@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Rock+Salt&display=swap');


:root {
    --os-nav-w: 290px;          /* colonne bureau */
    --os-nav-w-mobile: 260px;   /* panneau responsive */
    --os-nav-bg: #000;
    --os-nav-pad-x: 60px;
    --os-nav-gap-logo: 50px;    /* vide entre le logo et le menu (point 0) */
}


/* ==========================================================================
   1. LA COLONNE
   ========================================================================== */

#masthead.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--os-nav-w);
    height: 100vh;
    height: 100dvh;              /* iOS : évite le saut dû à la barre d'adresse */
    background: var(--os-nav-bg);
    z-index: 900;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    border: 0;
    box-shadow: none;
    transition: background-color .35s ease, -webkit-transform .35s ease;
    transition: background-color .35s ease, transform .35s ease;
}

/* --- Filet anti-débordement ---
   Empêche le retour du bug « texte éclaté lettre par lettre » quel que
   soit le nom de classe employé par la version d'Astra installée. */
#masthead.site-header * {
    max-width: 100%;
    box-sizing: border-box;
}
#masthead img {
    max-width: 100%;
    height: auto;
}

/* --- ALIGNEMENT À GAUCHE, SUR LE BORD DU LOGO ---
   Mesure comparative : dans la référence, logo, menu et liens
   secondaires partagent tous le même bord gauche. Chez nous il y en
   avait trois différents (53, 101 et 168 px), parce qu'Astra centre —
   ou aligne à droite — chaque bloc du Header Builder dans sa section.
   On neutralise tout centrage hérité, sur toute la chaîne. */
#masthead .site-branding,
#masthead .ast-site-identity,
#masthead .site-logo-img,
#masthead .ast-builder-menu-1,
#masthead .ast-builder-menu-2,
#masthead .ast-main-header-bar-alignment,
#masthead .main-header-bar-navigation,
#masthead .site-navigation,
#masthead .main-navigation,
#masthead .main-header-menu,
#masthead .ast-header-html,
#masthead .ast-builder-html-element,
#masthead .ast-header-html-1,
#masthead .os-foot {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    text-align: left !important;
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}


#masthead .main-header-menu,
#masthead .main-header-menu li,
#masthead .main-header-menu a,
#masthead .main-navigation,
#masthead .main-navigation li,
#masthead .main-navigation a,
#masthead .ast-nav-menu li,
#masthead .ast-nav-menu a,
#masthead .stack-on-mobile,
#masthead .stack-on-mobile li,
#masthead .stack-on-mobile a,
#masthead .submenu-with-border li,
#masthead .submenu-with-border a,
#masthead .main-header-bar-navigation,
#masthead .os-foot a {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

/* Les enveloppes d'Astra, remises en colonne. */
#masthead [class*="ast-builder-grid-row"],
#masthead .ast-main-header-wrap,
#masthead .ast-primary-header-bar,
#masthead .main-header-bar-navigation,
#masthead .ast-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    border: 0;
}

/* Les sections, hauteur naturelle : sans ça elles se partagent la
   hauteur en parts égales et le texte casse. */
#masthead [class*="site-header-primary-section-"],
#masthead [class*="ast-flex"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    -ms-flex: none !important;
    flex: none !important;
    grid-template-columns: none !important;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    border: 0;
}

/* --- Structure réelle, confirmée à l'inspecteur ---
   Deux sections seulement, la droite est vide ; logo, menu, menu
   secondaire et copyright sont tous empilés dans la section gauche.
   Elle est épinglée directement à l'écran : elle ne dépend ainsi
   d'aucun des cinq conteneurs intermédiaires d'Astra. */
#masthead .site-header-primary-section-left {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--os-nav-w) !important;
    z-index: 901;
    /* Un élément épinglé ignore le padding de ses parents : on le
       redéfinit ici. */
    padding: 66px 20px 60px var(--os-nav-pad-x) !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   2. LOGO  (point 0 — rapproché du menu)
   ========================================================================== */

#masthead .site-branding,
#masthead .ast-site-identity {
    width: 100%;
    padding: 0;
    margin: 0;
}
#masthead .custom-logo-link img {
    width: auto;
    max-width: 170px;
    height: auto;
    display: block;
}
/* Astra ajoute parfois un titre de site vide sous le logo : il
   creuserait un espace fantôme. */
#masthead .ast-site-title-wrap:empty,
#masthead .site-title:empty {
    display: none;
}


/* ==========================================================================
   3. MENU PRINCIPAL  (points 0, 1 et 2)
   ========================================================================== */

#masthead .ast-builder-menu-1 {
    /* Vide fixe : margin-top:auto varierait avec la hauteur de l'écran. */
    margin-top: var(--os-nav-gap-logo) !important;
    width: 100%;
}
#masthead .ast-builder-menu,
#masthead .main-navigation {
    width: 100%;
}

#masthead .main-header-menu,
#masthead .main-navigation > ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
#masthead .ast-builder-menu-1 .main-header-menu > li {
    width: 100%;
    margin: 0 0 3px 0;
    padding: 0;
    border: 0;
    list-style: none;
}

/* Point 1 — typographie : Archivo, 14 px, graisse 800.
   Le rembourrage est posé DÈS LE REPOS et compensé par une marge
   négative : c'est ce qui évite que le texte saute au survol. */
#masthead .ast-builder-menu-1 .main-header-menu > li > a {
    position: relative;
    display: inline-block;
    font-family: 'Archivo', 'Rubik', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    color: #fff;
    background: transparent;
    padding: 7px 10px;
    margin-left: -10px;
    border-radius: 0;
    transition: background-color .18s ease, color .18s ease;
}

/* --- SURVOL : un filet blanc se déploie sous le libellé ---
   Le filet est positionné en absolu : il ne prend aucune place dans le
   flux, donc les entrées ne bougent pas d'un pixel au survol. Il est
   dessiné en permanence mais réduit à zéro, et se déploie de la gauche
   vers la droite — d'où l'animation plutôt qu'une apparition sèche. */
#masthead .ast-builder-menu-1 .main-header-menu > li > a::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 1px;
    height: 2px;
    background: #fff;
    /* Double sécurité : opacité ET transformation. Si l'une des deux
       propriétés est ignorée ou écrasée par une autre feuille, l'autre
       garde le filet invisible au repos. */
    opacity: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: opacity .2s ease, -webkit-transform .22s ease;
    transition: opacity .2s ease, transform .22s ease;
}
#masthead .ast-builder-menu-1 .main-header-menu > li > a:hover::after,
#masthead .ast-builder-menu-1 .main-header-menu > li > a:focus::after {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
#masthead .ast-builder-menu-1 .main-header-menu > li > a:hover {
    color: #fff;
    background: transparent;
}

/* --- ENTRÉE ACTIVE : l'encadré blanc, réservé à la page courante --- */
#masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-item > a,
#masthead .ast-builder-menu-1 .main-header-menu > li.current_page_item > a,
#masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-ancestor > a,
#masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-parent > a {
    background: #fff;
    color: #000;
    opacity: 1;
}
/* Pas de filet blanc sur fond blanc. */
#masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-item > a::after,
#masthead .ast-builder-menu-1 .main-header-menu > li.current_page_item > a::after,
#masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-ancestor > a::after,
#masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-parent > a::after {
    display: none;
}
#masthead .ast-builder-menu-1 .main-header-menu > li > a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}


/* ==========================================================================
   4. PIED DE COLONNE  (point 4 — un seul bloc HTML)

   Le menu Astra n° 2 n'est plus utilisé : liens et copyright vivent
   ensemble dans un élément HTML du Header Builder, ce qui donne un
   alignement propre et une seule zone à traduire.

   CONTENU À COLLER DANS L'ÉLÉMENT HTML DU HEADER BUILDER :

   <div class="os-foot">
     <span class="os-foot-rule"></span>
     <a href="https://be-origine.com/contact-origine-structures/">Contact</a>
     <a href="https://be-origine.com/mentions-legales/">Mentions légales</a>
     <a href="https://be-origine.com/cgu/">CGU</a>
     <p class="os-copy">Copyright 2026 — Origine Structures</p>
   </div>
   ========================================================================== */

#masthead .ast-header-html,
#masthead .ast-builder-html-element {
    width: 100%;
    margin: 0;
    padding: 0;
}

#masthead .os-foot {
    width: 100%;
    margin-top: 26px;
    font-family: 'Archivo', 'Rubik', 'Helvetica Neue', Arial, sans-serif;
}

/* Le filet séparateur, repris de l'exemple : 30 x 2 px. */
#masthead .os-foot-rule {
    display: block;
    width: 30px;
    height: 2px;
    background: #fff;
    margin: 0 0 20px 0;
}

#masthead .os-foot a {
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    color: #fff;
    padding: 2px 0;
    transition: opacity .18s ease;
}
#masthead .os-foot a:hover,
#masthead .os-foot a:focus {
    opacity: .6;
    text-decoration: underline;
}
#masthead .os-foot a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Point 4 — le copyright s'efface : il est à peine lisible au repos et
   ne se révèle qu'au survol. La transition porte sur la couleur, pas
   sur l'opacité du bloc, pour ne pas faire pâlir aussi les liens. */
#masthead .os-foot .os-copy,
#masthead .ast-builder-html-element p {
    margin: 18px 0 0 0;
    padding: 0;
    font-family: 'Archivo', 'Rubik', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, .28);
    transition: color .3s ease;
    cursor: default;
}
#masthead .os-foot .os-copy:hover,
#masthead .ast-builder-html-element p:hover,
#masthead .ast-header-html:hover p {
    color: rgba(255, 255, 255, .92);
}

/* --- FILET SÉPARATEUR ---
   MESURE sur la référence : trait blanc de 30 x 2 px, 30 px sous la
   dernière entrée du menu, 27 px au-dessus des liens secondaires.
   Il était jusqu'ici porté par le bloc HTML « os-foot » ; comme le menu
   Astra n° 2 reste en place, on le pose directement dessus. */
#masthead .ast-builder-menu-2::before {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #fff;
    margin: 30px 0 27px 0;
}

/* Point 3 — le menu Astra n° 2, s'il est conservé : même famille et
   même bord gauche que le menu principal, en plus petit. */
#masthead .ast-builder-menu-2 .main-header-menu > li {
    width: 100%;
    margin: 0 0 3px 0;
}
#masthead .ast-builder-menu-2 .main-header-menu > li > a {
    display: inline-block;
    font-family: 'Archivo', 'Rubik', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none !important;
    color: #fff;
    background: transparent;
    padding: 2px 0;
    margin-left: 0;
}
#masthead .ast-builder-menu-2 .main-header-menu > li > a:hover {
    background: transparent;
    color: #fff;
    opacity: .6;
    text-decoration: underline;
}


/* ==========================================================================
   5. BUREAU  (au-dessus de 1024 px)
   ========================================================================== */
@media (min-width: 1025px) {

    #content.site-content,
    .site-footer,
    .ast-above-footer-wrap {
        margin-left: var(--os-nav-w);
    }

    .os-nav-toggle,
    .os-nav-scrim {
        display: none !important;
    }
}


/* ==========================================================================
   6. RESPONSIVE  (jusqu'à 1024 px) — panneau glissant + cercle
   ========================================================================== */
@media (max-width: 1024px) {

    /* Header mobile natif d'Astra neutralisé : c'est notre panneau qui
       prend le relais, avec le même balisage que le bureau. */
    #ast-mobile-header,
    #masthead .ast-mobile-header-wrap,
    #masthead .ast-mobile-menu-trigger-minimal,
    #masthead .ast-mobile-menu-trigger-fill,
    #masthead .menu-toggle {
        display: none !important;
    }
    #ast-desktop-header {
        display: flex !important;
    }

    #masthead.site-header {
        width: var(--os-nav-w-mobile);
        background: var(--os-nav-bg);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        z-index: 1000;
        will-change: transform;
    }
    body.os-nav-open #masthead.site-header {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    #masthead .site-header-primary-section-left {
        width: var(--os-nav-w-mobile) !important;
        /* 100 px en bas : la place du cercle */
        padding: 40px 16px 100px 32px !important;
        /* La section est épinglée au viewport. Selon les navigateurs, la
           transformation posée sur #masthead l'entraîne ou non — d'où le
           bandeau noir resté visible à gauche en responsive. On la
           translate donc explicitement, ce qui donne le même résultat
           dans les deux cas. */
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: -webkit-transform .35s ease;
        transition: transform .35s ease;
    }
    body.os-nav-open #masthead .site-header-primary-section-left {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    #masthead .custom-logo-link img {
        max-width: 140px;
    }
    #masthead .ast-builder-menu-1 {
        margin-top: 34px !important;
    }

    #content.site-content,
    .site-footer {
        margin-left: 0;
    }

    /* Zone de clic pour refermer. Transparente : l'exemple n'assombrit
       pas le contenu. */
    .os-nav-scrim {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        background: transparent;
        display: none;
    }
    body.os-nav-open .os-nav-scrim {
        display: block;
    }

    /* Point 5 — le cercle blanc, en bas à gauche, toujours visible.
       Même position ouvert ou fermé : seule l'icône change. */
    .os-nav-toggle {
        position: fixed;
        left: 24px;
        bottom: 24px;
        width: 42px;
        height: 42px;
        z-index: 1002;   /* au-dessus du panneau */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;          /* cercle, comme l'exemple */
        background: #fff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: -webkit-transform .2s ease;
        transition: transform .2s ease;
    }
    .os-nav-toggle:hover {
        -webkit-transform: scale(1.06);
        transform: scale(1.06);
    }
    .os-nav-toggle:focus-visible {
        outline: 2px solid #000;
        outline-offset: 3px;
    }
    .os-nav-toggle svg {
        width: 19px;
        height: 19px;
        display: block;
        stroke: #1a1a1a;
        stroke-width: 2;
        stroke-linecap: round;
        fill: none;
        pointer-events: none;   /* le clic vise toujours le bouton */
    }
    .os-nav-toggle .os-ico-close { display: none; }
    body.os-nav-open .os-nav-toggle .os-ico-open { display: none; }
    body.os-nav-open .os-nav-toggle .os-ico-close { display: block; }

    /* Le copyright se décale pour ne pas passer sous le cercle. */
    #masthead .os-foot .os-copy {
        padding-left: 34px;
    }
}


/* ==========================================================================
   7. Confort de lecture
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    #masthead.site-header,
    #masthead .main-header-menu > li > a,
    #masthead .os-foot a,
    .os-nav-toggle {
        transition: none !important;
    }
}


/* ==========================================================================
   8. COMPORTEMENT PROPRE À LA PAGE D'ACCUEIL
   ==========================================================================

   >>> C'EST ICI, ET NULLE PART AILLEURS, QUE SE RÉGLE LE MENU SUR LA HOME.

   Le menu latéral est le MÊME sur toutes les pages, Home comprise : c'est
   le header d'Astra, et il n'existe qu'en un seul exemplaire. Ce qui
   change sur la Home, ce n'est pas le menu, c'est son COMPORTEMENT —
   fond transparent au-dessus du hero, et hero en pleine largeur.

   Ces quelques règles sont volontairement regroupées ici plutôt que
   dispersées, et surtout PAS déplacées dans le snippet de la Home :
   dupliquer le menu dans deux feuilles, ce serait revenir au problème des
   deux menus à maintenir en parallèle qu'on a écarté en phase 3. Une
   entrée ajoutée au menu se répercuterait sur toutes les pages sauf la
   Home, ou l'inverse.

   Pour modifier l'apparence du menu SUR LA HOME uniquement, ajouter la
   règle ici, préfixée par body.home. Exemple :
       body.home #masthead .main-header-menu > li > a { color: #fff; }
   ========================================================================== */

@media (min-width: 1025px) {

    /* Le hero occupe toute la largeur et passe SOUS la colonne. */
    body.home #content.site-content {
        margin-left: 0;
    }

    /* ...mais les sections situées SOUS le hero, elles, doivent dégager
       la colonne. Sur les autres pages ce décalage est porté par
       #content ; sur la Home, #content est remis à zéro pour le hero,
       c'est donc <main class="os-main"> qui doit le reprendre.

       La règle est posée ICI, et non dans le snippet de la Home, pour
       deux raisons : elle réutilise --os-nav-w, donc elle ne peut jamais
       diverger de la largeur réelle du menu ; et elle reste valable même
       si le snippet de la Home est une ancienne copie. Le !important
       neutralise justement une éventuelle ancienne valeur. */
    body.home .os-main {
        margin-left: var(--os-nav-w) !important;
    }

    /* Colonne transparente tant que le hero est visible... */
    body.home #masthead.site-header {
        background: transparent;
    }

    /* ...puis fond noir dès qu'on scrolle en dessous. La classe .os-solid
       est posée par astra-menu-lateral.js. */
    body.home #masthead.site-header.os-solid {
        background: var(--os-nav-bg);
    }
}

/* Sur la photo du hero, le texte du menu a besoin d'un peu de tenue :
   une ombre très douce suffit à le décoller des zones claires, sans
   modifier son apparence sur les autres pages. */
body.home #masthead .main-header-menu > li > a,
body.home #masthead .os-foot a,
body.home #masthead .os-foot .os-copy {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
body.home #masthead .main-header-menu > li.current-menu-item > a {
    text-shadow: none;   /* l'encadré blanc n'en a pas besoin */
}

/* En responsive, la colonne devient un panneau glissant : plus aucun
   décalage à prévoir, le contenu reprend toute la largeur. */
@media (max-width: 1024px) {
    body.home .os-main {
        margin-left: 0 !important;
    }
}