/* ===== Polices auto-hébergées =====
   Rubik (titres) et Muli (corps) sont servies en local : aucune requête vers un tiers.
   Ce sont des polices variables, un seul fichier par sous-ensemble couvrant toute la
   plage de graisses, d'où le font-weight en intervalle. */
@font-face {
    font-family: 'Muli';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/Muli-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Muli';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/Muli-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/Rubik-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/Rubik-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Socle commun site Archiv'2000 =====
   --bleu-section est le bleu foncé des grands aplats et des nombres des compteurs :
   il porte l'identité visuelle du site et se distingue de l'accent --bleu. */
:root {
    --bleu: #1c60ff;
    --bleu-fonce: #0043d6;
    --bleu-section: #004070;
    --marine: #040c2c;
    --gris-texte: #70799f;
    --gris-clair: #f6f7fb;
    --noir: #212529;
    --ombre-carte: 0 6px 24px rgba(4, 12, 44, 0.10);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Muli', Arial, Helvetica, sans-serif;
    color: var(--gris-texte);
    font-size: 16px;
    line-height: 1.5;
    background: #fff;
}

/* Échelle typographique */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    font-weight: 500;
    line-height: 1.2;
    color: var(--marine);
}

h1 { font-size: 2.7em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1.1em; }

img {
    max-width: 100%;
}

a {
    color: var(--marine);
}

a:hover {
    color: var(--bleu);
}

.adapt-content {
    margin: auto;
    max-width: 1140px;
    padding: 0 15px;
}

/* Bouton principal (« En savoir + » du héro) */
.btn {
    display: inline-block;
    background-color: var(--bleu);
    color: #fff;
    text-decoration: none;
    padding: 12px 30px;
    border: none;
    border-radius: 3px;
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    font-size: 16px;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--bleu-fonce);
    color: #fff;
}

/* Bouton sombre du formulaire de contact : presque noir plutôt que bleu d'accent. */
.btn-sombre {
    display: inline-block;
    background-color: var(--noir);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 13px 34px;
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    font-size: 17px;
    cursor: pointer;
}

.btn-sombre:hover {
    background-color: #000;
    color: #fff;
}

/* ===== En-tête =====
   Sur l'accueil, la barre de coordonnées et la barre de menu sont en surimpression du
   héro ; sur les pages internes elles restent dans le flux. D'où l'enveloppe .entete,
   que body.accueil bascule en absolu. */
.entete {
    position: relative;
    z-index: 20;
}

body.accueil .entete {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* ----- Barre supérieure (coordonnées) -----
   Pages internes : bandeau bleu foncé arrondi. Accueil : aucun fond, pour laisser voir
   le visuel du héro et son animation (surcharge body.accueil plus bas). */
.topbar {
    color: #fff;
    font-size: 16px;
    padding-top: 12px;
}

.topbar .adapt-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bleu-section);
    border-radius: 4px;
    padding: 7px 20px;
}

body.accueil .topbar .adapt-content {
    background-color: transparent;
    justify-content: flex-start;
    padding: 10px 15px;
    /* le fond est une photo : une ombre discrète garantit la lisibilité sur les
       visuels clairs */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.topbar a {
    color: #fff;
    text-decoration: none;
}

.topbar a:hover {
    text-decoration: underline;
}

.topbar .ico {
    height: 16px;
    width: 16px;
    vertical-align: -3px;
    margin-right: 6px;
    fill: #fff;
}

.topbar .coord {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 30px;
}

body.accueil .topbar .coord {
    justify-content: flex-start;
}

/* ----- Barre de menu ----- */
header {
    background: #fff;
}

/* Sur l'accueil, la barre de menu est une carte blanche posée sur le héro :
   elle ne prend pas toute la largeur et porte une ombre légère. */
body.accueil header {
    background: transparent;
}

body.accueil header .top-bar {
    background: #fff;
    border-radius: 5px;
    box-shadow: var(--ombre-carte);
    padding-left: 30px;
    padding-right: 30px;
}

header .top-bar {
    display: flex;
    align-items: center;
    padding-top: 18px;
    padding-bottom: 18px;
}

/* Sticky animé : le header réapparaît fixe en glissant du haut une fois qu'il a défilé
   hors de vue, avec un padding réduit. Désactivé sur l'accueil, voir scriptMenu.js. */
header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 5px rgba(4, 12, 44, 0.12);
    animation: slideInDown 0.7s both;
}

header.sticky .top-bar {
    padding-top: 10px;
    padding-bottom: 10px;
}

@keyframes slideInDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

#logo img {
    max-width: 250px;
    max-height: 65px;
    display: block;
}

.top-menu {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
}

.top-menu a {
    text-decoration: none;
    color: var(--marine);
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.top-menu a:hover, .top-menu a.selected {
    color: var(--bleu);
}

/* menu mobile */
.ico-menu {
    display: none;
    background: none;
    border: none;
    font-size: 26px;
    color: var(--bleu);
    cursor: pointer;
    padding: 0 5px;
}

#mobile-menu {
    display: none;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid #e8eaf2;
}

#mobile-menu a {
    text-decoration: none;
    color: var(--marine);
    padding: 12px 20px;
    border-bottom: 1px solid #f0f1f7;
}

#mobile-menu a:hover, #mobile-menu a.selected {
    color: var(--bleu);
}

#mobile-menu.visible {
    display: flex;
}

/* ===== Bouton « retour en haut » (injecté par scriptMenu.js) ===== */
.haut {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bleu-section);
    box-shadow: 0 4px 12px rgba(4, 12, 44, 0.25);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.haut.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.haut:hover {
    background: var(--bleu);
}

.haut svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

/* ===== Contenu des pages secondaires ===== */
.page-content {
    padding: 50px 0 60px;
}

.page-content h2 {
    font-size: 1.8em;
    margin-top: 1.6em;
}

.page-content h3 {
    font-size: 1.5em;
}

.page-content p {
    margin: 0 0 1.2em;
}

/* ===== Formulaire de contact (partagé) =====
   « Sujet » est obligatoire, « Message » ne l'est pas. */
.form-contact {
    max-width: 830px;
    margin: 0 auto;
}

.form-contact .ligne2 {
    display: flex;
    gap: 30px;
}

.form-contact .ligne2 > * {
    flex: 1;
}

.form-contact label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
}

.form-contact .req {
    color: #d00;
}

.form-contact input, .form-contact textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 22px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-family: inherit;
    font-size: 15px;
    background: #fff;
}

.form-contact input:focus, .form-contact textarea:focus {
    outline: 2px solid var(--bleu);
    border-color: var(--bleu);
}

/* champ honeypot anti-spam : caché aux humains */
.form-contact .hp {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

.form-contact .actions {
    text-align: center;
}

.form-contact .txtMail {
    display: block;
    margin-top: 12px;
    font-weight: 700;
}

/* ===== Pied de page ===== */
footer {
    background-color: var(--bleu-section);
    color: #fff;
    margin-top: 0;
}

.footer {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding-top: 55px;
    padding-bottom: 50px;
}

.footer-part {
    flex: 1;
    min-width: 180px;
}

.footer-part .titre {
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #fff;
}

.footer-part ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-part li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-part a {
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    line-height: 1.9;
    padding: 3px 0;
}

/* Puce dessinée en CSS : le site ne charge aucune police d'icônes. */
.footer-part.partenaires a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 12px;
    vertical-align: 2px;
    border-top: 2px solid rgba(255, 255, 255, 0.8);
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
}

.footer-part a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-part.groupe {
    text-align: center;
    font-size: 15px;
    color: #fff;
}

.footer-part.groupe img {
    height: 49px;
    width: auto;
    margin-bottom: 15px;
    background-color: #fff;
    padding: 6px 12px;
    border-radius: 3px;
}

/* Barre de copyright : noire, sous le pied de page bleu.
   Mention à gauche, lien Facebook à droite. */
.copyright {
    background: #000;
    font-size: 15px;
    padding: 18px 0;
    color: #fff;
}

.copyright .adapt-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.copyright a {
    color: #fff;
}

.copyright .reseau {
    display: inline-flex;
    flex: none;
}

.copyright .reseau svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.copyright .reseau:hover svg {
    fill: var(--bleu);
}

/* ===== Responsive ===== */

/* L'en-tête bascule en mode mobile dès 900 px, et non 800 : entre les deux, le
   menu horizontal tenait encore mais « Processus de stockage » passait sur deux
   lignes. Le seuil est aligné sur celui du héro (styleAccueil.css), pour que la
   barre de menu et le visuel changent de mise en page d'un seul tenant.
   Ce qui ne concerne pas l'en-tête — formulaire, pied de page — reste à 800. */
@media all and (max-width: 900px) {
    .topbar {
        display: none;
    }

    .top-menu {
        display: none;
    }

    /* sur mobile, la barre de menu redevient opaque et dans le flux */
    body.accueil .entete {
        position: relative;
    }

    body.accueil header {
        background: #fff;
    }

    body.accueil header .top-bar {
        box-shadow: none;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* burger à gauche, logo centré */
    .ico-menu {
        display: block;
        order: -1;
    }

    #logo {
        margin: 0 auto;
        min-width: 0;
    }

    #logo img {
        height: auto;
        max-height: 65px;
        max-width: min(250px, calc(100vw - 120px));
    }

    header .top-bar::after {
        content: "";
        width: 36px;
    }
}

@media all and (max-width: 800px) {
    .form-contact .ligne2 {
        flex-direction: column;
        gap: 0;
    }

    .footer {
        gap: 20px;
    }

    .footer-part {
        flex: 1 1 100%;
    }

    .footer-part.partenaires {
        flex: 1 1 calc(50% - 10px);
    }
}

@media all and (max-width: 480px) {
    .footer-part.partenaires {
        flex-basis: 100%;
    }

    .footer-part.partenaires.suite {
        margin-top: -20px;
    }

    .footer-part.partenaires.suite .titre {
        display: none;
    }
}