/*
 * Layout - grilles, conteneurs, sections, header, footer.
 */

/* === Conteneurs === */

.mam-container {
    width: 100%;
    max-width: var(--content-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.mam-container--tight {
    max-width: var(--content-width);
}

/* Largeur de lecture confortable pour les pages editoriales (~720-820px).
   Utilise par page.php et single.php pour le body de l'article. */
.mam-container--narrow {
    max-width: 820px;
}

/* Prose des pages legales (mentions, confidentialite, CGU) : largeur de lecture
   confortable, mais alignee a GAUCHE sur le bord de contenu (comme l'en-tete
   pleine largeur) au lieu d'etre centree -> evite l'effet d'ilot decale. Le
   conteneur reste .mam-container (bord gauche = celui du header) ; seule la
   prose est plafonnee ici. */
.mam-prose--legal {
    max-width: 760px;
    margin-inline: 0;
}
/* Titres de section dans la prose legale : les <h2>/<h3> nus (Gutenberg, sans
   classe) heritent sinon de la taille hero (base.css h2 = --fs-3xl, ~88px) et
   ecrasent le H1 de page (~37px). On les cale en dessous du titre de page :
   h2 = titre d'article, h3 = sous-section. */
.mam-prose--legal h2 {
    font-size: var(--fs-xl);
    line-height: 1.2;
    font-weight: var(--fw-medium);
    letter-spacing: -0.015em;
    margin-top: var(--sp-6);
}
.mam-prose--legal h3 {
    font-size: var(--fs-lg);
    line-height: 1.3;
    font-weight: var(--fw-medium);
}

/* =====================================================================
   Phase audit 2026-05 : alignement uniforme wp-block-group / .mam-container
   =====================================================================
   Probleme : les sections patterns Gutenberg (.wp-block-group.mam-section)
   utilisaient padding-inline = var(--gutter) sans max-width, ce qui
   alignait leurs enfants a X=58 sur 1440px. Mais le header (.mam-container)
   utilise max-width 1360 + margin auto + padding-inline gutter, donc son
   contenu commence a X=93. Decalage visuel de 35px entre kickers/H2 du
   header et ceux des sections du body.

   Fix : on retire le padding-inline du wp-block-group et on contraint les
   enfants directs aux memes regles que .mam-container (max-width centered
   + padding-inline gutter). Le wp-block-group lui-meme reste full-width
   (necessaire pour les backgrounds --alt mineral).

   Cibles preservees : .alignfull, .alignwide (qui doivent rester larges),
   et le wp-block-cover (cta-final) qui a sa propre logique.
*/
main .wp-block-group.mam-section,
main .wp-block-group.mam-section.is-layout-constrained {
    padding-inline: 0;
}

/* Cible directement les enfants du group sans :where() pour preserver
   la specificite face aux regles WP natives is-layout-constrained. */
main .wp-block-group.mam-section.is-layout-constrained > *:not(.alignfull):not(.alignwide):not(.wp-block-cover):not(.wp-block-image) {
    max-width: var(--content-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
    box-sizing: border-box;
}

/* .mam-kicker est en display:inline-flex (margin:auto ne fonctionne pas
   sur les inline). Quand le kicker est enfant direct d'un .wp-block-group
   .mam-section, on le passe en block-level flex pour qu'il s'aligne sur
   le meme axe que le H2 voisin. Le content (numero + rule + texte)
   reste aligne a gauche via justify-content: flex-start. */
main .wp-block-group.mam-section.is-layout-constrained > .mam-kicker {
    /* !important necessaire pour battre la regle .mam-kicker en
       components.css (display: inline-flex) ET les regles natives WP
       qui appliquent sur les wp-block-paragraph. */
    display: flex !important;
    justify-content: flex-start;
    width: 100%;
}

.mam-container--flush {
    max-width: 100%;
    padding-inline: 0;
}

/* === Pages WP standard (page.php / single.php) ===
   Remplace par l'architecture unifiee .mam-tpl* dans templates.css. */

/* === Sections === */

/* Echelle des paddings revue (passes audit 2026-05-16) : les anciens
   sp-8/sp-9 (104/168px) creaient des trous excessifs en cumul (336px
   entre 2 sections successives). On reduit a une echelle plus douce
   tout en gardant le contraste editorial entre --sm / base / --lg. */

.mam-section {
    padding-block: var(--sp-7); /* 48px depuis resserrage 11/06 */
    position: relative;
}

.mam-section--hero {
    padding-block: var(--sp-10) var(--sp-8); /* 272/104px - inchange pour hero */
}

.mam-section--sm { padding-block: var(--sp-6); } /* 40px */
.mam-section--lg { padding-block: var(--sp-8); } /* 76px depuis resserrage 11/06 */

/* Mitigation cumul de sections successives : on reduit le padding-top
   de la section qui suit pour eviter les espaces blancs excessifs
   (le padding-bottom de la precedente s'ajoute deja).

   Inclut aussi .mam-tpl__head qui n'a pas la classe .mam-section mais
   produit le meme effet de cumul (sp-6 pb + sp-8 pt = 168px de blanc
   entre H1 et premier paragraphe -> trop). */
.mam-section + .mam-section,
.mam-section--lg + .mam-section--lg,
.mam-section--lg + .mam-section,
.mam-section + .mam-section--lg,
header.mam-section + .mam-section,
header.mam-section + .mam-section--lg,
/* L'article prose dans .mam-tpl__body est descendant, pas sibling direct
   du head -> on cible le premier child du body qui suit le head. */
.mam-tpl__head + .mam-tpl__body > .mam-section:first-child,
.mam-tpl__head + .mam-tpl__body > .mam-section--lg:first-child,
.mam-tpl__head + .mam-tpl__body > article.mam-section:first-child,
.mam-tpl__head + .mam-tpl__body > article.mam-section--lg:first-child,
/* Phase B 2026-05 : sur pages locales, un CTA hero (.mam-locale-hero-cta)
   est insere entre .mam-tpl__head et .mam-tpl__body. La mitigation ci-dessus
   ne joue plus -> on cible la 1ere section du body apres CE CTA. */
.mam-locale-hero-cta + .mam-tpl__body > .mam-section:first-child,
.mam-locale-hero-cta + .mam-tpl__body > .mam-section--lg:first-child {
    /* Reequilibre 2026-05 : sp-5 (24px) etait trop serre, le kicker
       semblait colle au top de la section. sp-6 (40px) donne plus
       d'air au demarrage tout en conservant un total visuel
       coherent (40 + 104 = 144px entre 2 contenus). */
    padding-top: var(--sp-6);
}

/* Mobile : reduction supplementaire des paddings sections (un sp-9 en
   mobile = 168px = 25% du viewport, absurde). */
@media (max-width: 768px) {
    .mam-section    { padding-block: var(--sp-6); } /* 40px */
    .mam-section--sm { padding-block: var(--sp-5); } /* 24px */
    .mam-section--lg { padding-block: var(--sp-7); } /* 64px */
    .mam-section + .mam-section,
    .mam-section--lg + .mam-section--lg {
        padding-top: var(--sp-4); /* 16px */
    }
}

.mam-section--alt {
    background: var(--color-bg-alt);
}

.mam-section--dark {
    background: var(--c-ink-soft);
    color: var(--c-paper);
    --color-bg: var(--c-ink-soft);
    --color-bg-alt: var(--c-ink);
    --color-text: var(--c-paper);
    --color-text-muted: var(--c-stone-400);
    --color-hairline: rgba(255, 255, 255, 0.1);
    --color-btn-bg: var(--c-paper);
    --color-btn-text: var(--c-ink);
    --color-btn-border: var(--c-paper);
}

.mam-section--full-bleed {
    padding-inline: 0;
}

/* === Grille 12 colonnes === */

.mam-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-5);
}

.mam-grid--loose {
    gap: var(--sp-7);
}

@media (max-width: 768px) {
    .mam-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
    [class*="col-"] {
        grid-column: 1 / -1 !important;
    }
}

/* Helpers colonnes (desktop) */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: 1 / -1; }

/* Placement editorial : H2 col 1-6, corps col 8-12.
   align-items: center centre verticalement les deux colonnes : equilibre
   visuel quel que soit le rapport de hauteur (titre court / body long ou
   inverse). */
.mam-editorial {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-5);
    align-items: center;
}
.mam-editorial__head {
    grid-column: 1 / 7;
}
.mam-editorial__body {
    grid-column: 8 / -1;
}
/* Espace entre le paragraphe lead (t-body-lg) et le corps (t-body) : sans ca
   ils se collent alors que les paragraphes du corps sont espaces (retour
   cliente 01/07, section "Qui sommes-nous"). */
.mam-editorial__body .t-body-lg {
    margin-bottom: var(--sp-4);
}
/* Note de bas de bloc : petit texte discret (renvoi d'asterisque, mention). */
.mam-editorial__footnote {
    margin-top: var(--sp-5);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
}
@media (max-width: 1024px) {
    .mam-editorial__head,
    .mam-editorial__body {
        grid-column: 1 / -1;
    }
}
/* Editorial "intro" : kicker + titre + lead SEULS (ni image ni body). Le
   gabarit 2 colonnes laisse le lead orphelin a droite (retour 08/07, accueil
   "Les etapes de construction" : lead "Chaque projet est unique..." excentre).
   -> une colonne centree, lead SOUS le titre. Cible par le contenu via :has()
   (les editoriaux avec body, ex accueil section double-expertise, ne matchent
   pas et gardent leurs 2 colonnes). */
.mam-editorial:not(:has(.mam-editorial__media)):not(:has(.mam-editorial__body .t-body)) {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    max-width: 800px;
    margin-inline: auto;
    gap: var(--sp-3);
}
.mam-editorial:not(:has(.mam-editorial__media)):not(:has(.mam-editorial__body .t-body)) > .mam-editorial__head,
.mam-editorial:not(:has(.mam-editorial__media)):not(:has(.mam-editorial__body .t-body)) > .mam-editorial__body {
    grid-column: 1 / -1;
}
.mam-editorial:not(:has(.mam-editorial__media)):not(:has(.mam-editorial__body .t-body)) .mam-kicker {
    justify-content: center;
}
/* Image d'ambiance optionnelle (bloc editorial-2col) : dans la colonne de
   gauche sous le titre. Design system : pas de radius ni d'ombre. */
.mam-editorial__media {
    margin: var(--sp-4) 0 0;
}
.mam-editorial__media img {
    display: block;
    width: 100%;
    height: auto;
    /* Ratio naturel : pas d'aspect-ratio force, pour ne pas recadrer les photos
       d'ambiance (retour cliente 10/07). object-fit inutile en hauteur auto. */
}
/* Variante "image a droite" (editorial-2col imagePosition=right) : texte
   (kicker + titre + corps) a gauche, image en colonne dediee a droite, centree
   verticalement. Pages proposer-terrain / parrainage (retour cliente 09/07). */
.mam-editorial--media-right {
    grid-template-columns: 1.1fr 0.9fr;
    column-gap: var(--sp-6);
    align-items: start;
}
/* Colonnes explicites (double classe = specificite 0,3,0 pour surcharger la
   regle .mam-tpl--page .mam-editorial__body { grid-column: 8/-1 } plus bas) :
   texte (head + body) empile a gauche, image a droite sur les 2 lignes. */
/* display:block : le head est en display:contents par defaut (kicker+titre
   deviennent des items de grille) -> on lui redonne une box pour le placer. */
.mam-editorial.mam-editorial--media-right > .mam-editorial__head { display: block; grid-column: 1; grid-row: 1; align-self: end; }
.mam-editorial.mam-editorial--media-right > .mam-editorial__body { grid-column: 1; grid-row: 2; align-self: start; }
.mam-editorial.mam-editorial--media-right > .mam-editorial__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center; /* defaut : image centree verticalement en face du texte */
    margin: 0;
}
/* Option "Alignement vertical = En haut" (champ SCF verticalAlign). Bascule
   l'alignement des colonnes en haut, dans les DEUX positions d'image :
   - image a gauche : les 2 colonnes (titre+image / texte) alignees en haut ;
   - image a droite : l'image alignee en haut au lieu du centre.
   Double classe = specificite suffisante pour surcharger les regles de base
   (align-items:center l.231, align-self:center ci-dessus). Defaut = centre. */
.mam-editorial.mam-editorial--valign-top { align-items: start; }
.mam-editorial.mam-editorial--valign-top.mam-editorial--media-right > .mam-editorial__media { align-self: start; }
@media (max-width: 1024px) {
    /* Empile : texte puis image (l'image passe sous le texte, pleine largeur). */
    .mam-editorial--media-right { grid-template-columns: 1fr; }
    .mam-editorial.mam-editorial--media-right > .mam-editorial__head { grid-column: 1; grid-row: 1; }
    .mam-editorial.mam-editorial--media-right > .mam-editorial__body { grid-column: 1; grid-row: 2; }
    .mam-editorial.mam-editorial--media-right > .mam-editorial__media { grid-column: 1; grid-row: 3; }
}

/* === Colonnes des layouts qui-sommes-nous (markup manuel : le flex des colonnes
   core Gutenberg n'est pas present, on le fournit explicitement) === */
/* Double expertise : deux colonnes de texte + image centree dessous. */
.mam-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5) var(--sp-6);
    align-items: start;
}
.mam-duo__media {
    max-width: 600px;
    margin: var(--sp-5) auto 0;
    grid-column: 1 / -1;
}
.mam-duo__media img { display: block; width: 100%; height: auto; }
/* Assise financiere : texte (62%) + badge (38%), centres verticalement. */
.mam-assise {
    display: flex;
    gap: var(--sp-6);
    align-items: center;
}
/* Chiffres cles en ligne : 4 colonnes egales. */
.mam-stats-inline__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
}
/* Valeurs : 4 colonnes simples (sans carte), fond sombre. */
.mam-valeurs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5) var(--sp-6);
    margin-top: var(--sp-6);
}
.mam-valeurs h3 { margin-bottom: var(--sp-3); }
/* Image seule pleine largeur (ratio naturel, sans crop). */
.mam-image-full { margin: 0; }
.mam-image-full__img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
    .mam-duo { grid-template-columns: 1fr; }
    .mam-assise { flex-direction: column; align-items: stretch; }
    .mam-stats-inline__grid { grid-template-columns: repeat(2, 1fr); }
    .mam-valeurs { grid-template-columns: repeat(2, 1fr); }
}
/* quote-intro : l'intro est sur la MEME bande minerale pleine largeur que la
   citation (continuite avec l'en-tete, pas de bande blanche) - retour 09/07.
   Padding-top reduit : l'intro colle au H1 ; la citation suit dans sa section. */
.mam-qintro {
    background: var(--c-mineral);
    box-shadow: 0 0 0 100vmax var(--c-mineral);
    clip-path: inset(0 -100vmax);
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
}
/* Video : embed YouTube responsive pleine largeur 16:9 (le CSS core d'embed
   Gutenberg n'est pas charge ; on le fournit, scope .mam-video). */
.mam-video .wp-block-embed { margin: var(--sp-5) 0 0; }
.mam-video .wp-block-embed__wrapper { position: relative; width: 100%; padding-top: 56.25%; }
.mam-video .wp-block-embed__wrapper iframe,
.mam-video .wp-block-embed__wrapper video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* Fichier auto-heberge : on preserve le ratio de la source (pas de crop), fond
   sombre pour les letterbox. */
.mam-video .wp-block-embed__wrapper video { object-fit: contain; background: var(--c-ink, #111); }

/* Pages piliers : kicker + titre en pleine largeur en TETE, puis image + texte
   alignes en haut sur la meme rangee. Evite le texte centre verticalement
   contre (titre + image) qui "flottait". Scope .mam-tpl--page (pas l'accueil),
   desktop seulement (mobile garde l'empilement). display:contents sort les
   enfants de __head pour les replacer dans le grid 12 colonnes. */
@media (min-width: 1025px) {
    .mam-tpl--page .mam-editorial { align-items: start; }
    .mam-tpl--page .mam-editorial__head { display: contents; }
    .mam-tpl--page .mam-editorial__head > .mam-kicker { grid-column: 1 / -1; }
    .mam-tpl--page .mam-editorial__head > h2 { grid-column: 1 / -1; }
    .mam-tpl--page .mam-editorial__head > .mam-editorial__media { grid-column: 1 / 7; }
    /* Citation eventuelle dans le head : la caler dans la colonne gauche sous
       le titre (sinon, head dissous en display:contents, elle est auto-placee
       dans une cellule etroite d'une seule colonne -> texte ecrase). */
    .mam-tpl--page .mam-editorial__head > .mam-quote { grid-column: 1 / 7; }
    .mam-tpl--page .mam-editorial__body { grid-column: 8 / -1; align-self: start; margin-top: var(--sp-4); }
}

/* Paragraphes vides parasites sur les pages migrees en SCF : un wpautop applique
   en aval du rendu (output-buffer front) genere des <p></p> vides apres les
   blocs (</blockquote>, </figure>, </div>...). Le render.php neutralise deja les
   blancs inter-blocs ; ces <p> strictement vides residuels sont masques ici (un
   paragraphe sans contenu n'est jamais signifiant) -> pas de gaps verticaux ni
   d'items fantomes dans la grille editoriale. */
.mam-tpl--page .mam-tpl__body p:empty { display: none; }

/* === Header === */

.mam-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    width: 100%;
    padding-block: var(--sp-4);
    background: var(--color-bg);
    transition: background var(--dur-hover) var(--ease-editorial),
                padding var(--dur-hover) var(--ease-editorial),
                color var(--dur-hover) var(--ease-editorial);
}

/* Mode overlay : transparent par-dessus le hero, logo et nav en blanc */
.mam-header--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    color: var(--c-paper);
}

.mam-header--overlay .mam-logo__img {
    filter: brightness(0) invert(1);
}

/* Au scroll, bascule en solid : fond selon ambiance, logo selon ambiance.
   Pas de backdrop-filter (blur coute tres cher au compositeur sur Retina
   120Hz). Un fond opaque donne un rendu quasi identique pour un cout
   negligeable. */
.mam-header--overlay.is-scrolled {
    position: fixed;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 1px 0 var(--color-hairline);
}

.mam-header--overlay.is-scrolled .mam-logo__img {
    /* Reset du filter : on laisse le SVG afficher ses couleurs d'origine
       (dark-variant ou light-variant selon l'ambiance) */
    filter: none;
}

.ambiance-dark .mam-header--overlay.is-scrolled .mam-logo__img {
    /* En ambiance sombre, le svg dark (noir) devient invisible sur fond sombre :
       on force l'invert pour qu'il reste blanc */
    filter: brightness(0) invert(1);
}

/* Mega menu ouvert : le header bascule sur le fond d'ambiance pour etre
   coherent avec le panel (qui fait partie de la meme surface visuelle).
   Necessaire surtout en overlay sombre ou l'inconsistance entre panel sombre
   et header transparent creait un "trou" visuel au dessus du menu. */
.mam-header--overlay.has-panel-open {
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 1px 0 var(--color-hairline);
}

.mam-header--overlay.has-panel-open .mam-logo__img {
    filter: none;
}

.ambiance-dark .mam-header--overlay.has-panel-open .mam-logo__img {
    filter: brightness(0) invert(1);
}

.mam-header.is-scrolled {
    padding-block: var(--sp-3);
}

.mam-header__inner {
    /* Aligne sur var(--content-wide) (1360px) pour partager la meme
       grille que le contenu editorial (breadcrumb, H1, sections body).
       Resultat : alignement strict au pixel entre logo/menu/CTA du
       header et le contenu editorial, peu importe le viewport. */
    width: 100%;
    max-width: var(--content-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
}

.mam-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

/* Sur tablet/laptop, on reduit le gutter pour que le menu respire */
@media (min-width: 900px) and (max-width: 1199px) {
    .mam-header__inner {
        padding-inline: var(--sp-5);
        gap: var(--sp-4);
    }
}

.mam-hairline {
    display: block;
    height: 1px;
    background: var(--color-hairline);
    width: 100%;
}

/* === Logo === */

.mam-logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: currentColor;
}

.mam-logo:hover { text-decoration: none; }

.mam-logo__img {
    height: 64px;
    width: auto;
    display: block;
    transition: height var(--dur-hover) var(--ease-editorial),
                filter var(--dur-hover) var(--ease-editorial);
}

.mam-header.is-scrolled .mam-logo__img {
    height: 48px;
}

@media (max-width: 768px) {
    /* Logo reduit sur mobile : a 52px il etait trop imposant sur le hero
       (overlay accueil) et empietait sur le burger (C17). */
    .mam-logo__img { height: 44px; }
    .mam-header.is-scrolled .mam-logo__img { height: 36px; }
}

/* === Navigation primaire === */

.mam-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: clamp(var(--sp-3), 1.8vw, var(--sp-5));
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

/* IMPORTANT : on cible uniquement les liens DIRECTS de la nav primaire
   (enfants directs des <li> de premier niveau). Sans cette restriction,
   ::after attraperait tous les <a> a l'interieur des mega menus
   (panel-feature, btn ghost...) et creerait un trait fuchsia en bottom
   en plus de leur propre etat hover - d'ou le "double trait" observe. */
.mam-nav__list > li > a {
    position: relative;
    padding-block: var(--sp-3);
    display: inline-block;
    white-space: nowrap;
}

/* Sur viewport tablet/laptop serre, on compresse le tracking pour gagner de la largeur */
@media (min-width: 900px) and (max-width: 1199px) {
    .mam-nav__list {
        letter-spacing: 0.05em;
        font-size: 0.8rem;
    }
}

.mam-nav__list > li > a:hover {
    text-decoration: none;
}

.mam-nav__list > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-2);
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-hover) var(--ease-editorial);
}

.mam-nav__list > li > a:hover::after,
.mam-nav__list > li > a[aria-current]::after {
    transform: scaleX(1);
}

/* CTA "Nous contacter" header : plein noir / texte blanc par defaut (retour
   cliente 2026-05 "bouton nous contacter fond noir ecriture blanche").
   Inverse en plein blanc / texte noir quand le header overlay le hero sombre,
   pour garder le contraste visuel sur fond sombre non scrolle. */
.mam-nav__cta {
    background-color: var(--c-ink);
    border: 1.5px solid var(--c-ink);
    color: var(--c-paper);
    padding: var(--sp-2) var(--sp-4) !important;
    white-space: nowrap;
    transition: background-color var(--dur-hover) var(--ease-editorial),
                border-color var(--dur-hover) var(--ease-editorial),
                color var(--dur-hover) var(--ease-editorial);
}

.mam-header--overlay:not(.is-scrolled) .mam-nav__cta {
    background-color: var(--c-paper);
    border-color: var(--c-paper);
    color: var(--c-ink);
}

.mam-nav__cta:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--c-paper);
}

/* Sur fond sombre, le hover bascule en fuchsia plein */
.mam-header--overlay:not(.is-scrolled) .mam-nav__cta:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--c-paper);
}

/* Sur tablet/laptop, padding reduit pour que le CTA passe sur une ligne */
@media (min-width: 900px) and (max-width: 1199px) {
    .mam-nav__cta {
        padding: var(--sp-2) var(--sp-3) !important;
    }
}

.mam-nav__cta::after {
    display: none !important;
}

/* =====================================================================
   Topbar utilitaire (telephone, email, espace client)
   Fine bande au-dessus du header principal. Cachee sur mobile (<900px).
   ===================================================================== */

.mam-topbar {
    background: var(--c-ink);
    color: var(--c-paper);
    font-size: var(--fs-xs);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mam-topbar__inner {
    /* Topbar : meme largeur que .mam-header__inner (alignement vertical
       avec le logo/menu/CTA du header). Sur var(--content-wide) = 1360 pour
       partager la grille editoriale du site. */
    max-width: var(--content-wide);
    margin-inline: auto;
    padding: var(--sp-2) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 40px;
}

.mam-topbar__group {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

/* Slogan editable (remplace tel/email - retour cliente 26/05). Discret,
   sert aussi a annoncer une info temporaire (dates de fermeture...). */
.mam-topbar__slogan {
    color: var(--c-paper);
    opacity: 0.8;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mam-topbar__link,
.mam-topbar__client {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-paper);
    text-decoration: none;
    padding: var(--sp-1) 0;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-hover) var(--ease-editorial),
                opacity var(--dur-hover) var(--ease-editorial);
    white-space: nowrap;
}

.mam-topbar__link:hover,
.mam-topbar__client:hover {
    border-bottom-color: var(--color-accent);
}

.mam-topbar__link svg,
.mam-topbar__client svg {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--dur-hover) var(--ease-editorial);
}

.mam-topbar__link:hover svg,
.mam-topbar__client:hover svg {
    opacity: 1;
}

.mam-topbar__sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
}

.mam-topbar__client {
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
}

/* Mobile : topbar cachee, infos reportees dans le drawer */
@media (max-width: 900px) {
    .mam-topbar { display: none; }
}

/* Header overlay (ambiance dark home) : compenser le decalage de la topbar
   pour que le hero garde son alignement plein-ecran. */
.mam-header--overlay {
    /* Le hero dark calcule sa hauteur sur 100dvh - header-h. Avec la topbar
       on doit aussi soustraire la topbar (~40px). Mais on garde le header
       en overlay au-dessus du hero, donc pas de modif majeure. */
}

/* Lien "Espace client" -> MyProjectCompanion (lien externe).
   Style ghost : pas de bordure, icone + texte, hover accent. */
.mam-nav__client {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    color: var(--color-text);
    text-decoration: none;
    border: none;
    background: transparent;
    transition: color var(--dur-hover) var(--ease-editorial);
}

.mam-nav__client:hover {
    color: var(--color-accent);
}

.mam-nav__client svg {
    flex-shrink: 0;
}

@media (max-width: 1199px) {
    .mam-nav__client span { display: none; }
    .mam-nav__client { padding: var(--sp-2); }
}

@media (max-width: 768px) {
    .mam-nav__client { display: none; }
}

/* === Burger (mobile only) === */

.mam-burger {
    display: none;
    width: 44px;
    height: 44px;
    position: relative;
    align-items: center;
    justify-content: center;
    color: currentColor;
    transition: color var(--dur-hover) var(--ease-editorial);
}

/* Quand le drawer est ouvert, le burger passe au-dessus du drawer pour
   rester cliquable (le click devient la croix de fermeture). */
body.mam-drawer-open .mam-burger {
    position: fixed;
    top: calc(var(--sp-4) - 2px);
    right: var(--gutter);
    z-index: calc(var(--z-mega-menu) + 1);
    color: var(--c-paper);
}

@media (max-width: 768px) {
    body.mam-drawer-open .mam-burger {
        right: var(--sp-4);
    }
}

.mam-burger__bar {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--dur-hover) var(--ease-snap),
                top var(--dur-hover) var(--ease-snap),
                opacity var(--dur-hover) var(--ease-snap);
}

/* Hamburger classique 3 traits (retour cliente). A l'ouverture : la barre du
   milieu s'efface, les deux autres se croisent en X (fermeture). */
.mam-burger__bar:nth-child(1) { top: 16px; }
.mam-burger__bar:nth-child(2) { top: 22px; }
.mam-burger__bar:nth-child(3) { top: 28px; }

.mam-burger.is-open .mam-burger__bar:nth-child(1) {
    top: 22px;
    transform: rotate(45deg);
}
.mam-burger.is-open .mam-burger__bar:nth-child(2) {
    opacity: 0;
}
.mam-burger.is-open .mam-burger__bar:nth-child(3) {
    top: 22px;
    transform: rotate(-45deg);
}

@media (max-width: 900px) {
    .mam-nav__list { display: none; }
    .mam-burger { display: inline-flex; }
}

@media (min-width: 901px) {
    .mam-drawer { display: none; }
}

/* === Drawer mobile - fond adaptatif selon l'ambiance === */

.mam-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-mega-menu);
    /* Couleurs heritees du body (ambiance-light / ambiance-dark) */
    background: var(--color-bg);
    color: var(--color-text);
    transform: translateX(100%);
    transition: transform var(--dur-menu) var(--ease-luxury);
    overflow-y: auto;
    visibility: hidden;
}

.mam-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

/* Topbar du drawer : logo + bouton fermer, s'adapte a l'ambiance */
.mam-drawer__topbar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--gutter);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-hairline);
    z-index: 2;
}

.mam-drawer__logo img {
    height: 44px;
    width: auto;
    display: block;
    /* Le bon SVG est servi cote PHP selon l'ambiance, pas de filter */
}

.mam-drawer__close {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-hairline);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--dur-hover) var(--ease-editorial),
                color var(--dur-hover) var(--ease-editorial);
}

.mam-drawer__close:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.mam-drawer__close-label {
    line-height: 1;
}

.mam-drawer__inner {
    min-height: calc(100% - 80px);
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    display: flex;
    flex-direction: column;
    /* Espacement compact entre blocs : les groupes ont deja border + padding
       (retour cliente : menu mobile "trop gros"). */
    gap: var(--sp-3);
}

.mam-drawer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mam-drawer__list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mam-drawer__list a {
    display: block;
    font-family: var(--font-sans);
    /* Liens SECONDAIRES (FAQ, Mentions) : plus petits que la nav principale
       (etaient plus gros = incoherent + menu trop haut, retour cliente). */
    font-size: clamp(1rem, 3vw, 1.15rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    padding: var(--sp-3) 0;
    color: var(--color-text);
    transition: color var(--dur-hover) var(--ease-editorial),
                transform var(--dur-hover) var(--ease-editorial);
}

.mam-drawer__list a:hover {
    color: var(--color-accent);
    text-decoration: none;
    transform: translateX(6px);
}

.mam-drawer__cta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.mam-drawer__cta .mam-btn {
    /* Bouton principal SOMBRE (le drawer a un fond clair -> un bouton "paper"
       etait quasi invisible = "faisait tache", retour cliente). */
    background: var(--c-ink);
    color: var(--c-paper);
    border-color: var(--c-ink);
    justify-content: center;
    width: 100%;
    padding: var(--sp-4);
}

.mam-drawer__cta .mam-btn--ghost {
    /* Bouton secondaire (Espace client) : contour discret, visible sur fond clair. */
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-hairline);
}

.mam-drawer__meta {
    margin-top: auto;
    color: var(--c-stone-400);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    line-height: 1.6;
}

.mam-drawer__meta p { margin: 0 0 var(--sp-2); }

/* Lock du scroll body quand drawer ouvert */
body.mam-drawer-open {
    overflow: hidden;
}

/* === Footer === */

/* =====================================================================
   Footer refait avec arborescence complete
   ===================================================================== */

.mam-footer {
    background: var(--c-ink);
    color: var(--c-paper);
    --color-hairline: rgba(255, 255, 255, 0.08);
    --color-text-muted: var(--c-stone-400);
}

/* Bandeau haut : logo + baseline + reseaux. Padding reduit (audit
   2026-05) pour compacter le pre-footer qui prenait 300px verticaux
   pour 1 ligne de texte. */
.mam-footer__top {
    border-bottom: 1px solid var(--color-hairline);
    padding: var(--sp-5) 0;
    position: relative;
}

.mam-footer__top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: var(--c-fuchsia);
}

.mam-footer__top-inner {
    max-width: var(--content-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
}

.mam-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
}

.mam-footer__logo img {
    height: 72px;
    width: auto;
    display: block;
}

.mam-footer__baseline {
    margin: 0;
    font-size: var(--fs-md);
    color: var(--c-stone-400);
    max-width: 32ch;
    line-height: 1.5;
}

/* "Depuis 1979" - en blanc (romain depuis retour cliente 26/05 : enlever
   l'italique sur tous les titres ; le fuchsia ne ressort pas sur fond ink,
   decision DA 30/04/2026 : pas d'info importante en fuchsia sur noir). */
.mam-footer__baseline em {
    font-family: var(--font-sans);
    font-style: normal;
    color: var(--c-paper);
    font-weight: 300;
}

.mam-footer__social {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.mam-footer__social-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--c-stone-400);
    margin-right: var(--sp-2);
}

/* Reseaux sociaux - rond blanc plein + logo noir au repos, rond fuchsia +
   logo blanc au hover. Forme ronde validee suite retour cliente 2026-05
   "Logos des reseaux en rond blanc". */
.mam-footer__social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--c-paper);
    border: 1px solid var(--c-paper);
    border-radius: 50%;
    color: var(--c-ink);
    transition: background var(--dur-hover) var(--ease-editorial),
                border-color var(--dur-hover) var(--ease-editorial),
                color var(--dur-hover) var(--ease-editorial);
}

.mam-footer__social a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--c-paper);
}

/* Corps : 5 colonnes avec arborescence */
.mam-footer__body {
    padding: var(--sp-8) 0;
}

.mam-footer__body-inner {
    max-width: var(--content-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-7);
}

@media (max-width: 1024px) {
    .mam-footer__body-inner {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-6);
    }
    .mam-footer__col--contact {
        grid-column: 1 / -1;
        border-top: 1px solid var(--color-hairline);
        padding-top: var(--sp-6);
    }
}

@media (max-width: 600px) {
    .mam-footer__body-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-5);
    }
    .mam-footer__col--contact {
        grid-column: 1 / -1;
    }
}

/* Heading colonnes du footer en blanc - le fuchsia comme couleur de label
   ne ressortait pas sur fond ink (DA 30/04/2026). */
.mam-footer__heading {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--c-paper);
    margin: 0 0 var(--sp-4);
}

.mam-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.mam-footer__col li {
    font-size: var(--fs-sm);
    line-height: 1.45;
}

/* Liens textuels dans les colonnes du footer (departement, agence, etc.).
   Exclut les .mam-btn pour ne pas ecraser le styling des boutons : sinon
   le mam-btn--on-dark (texte ink) recupere color:paper et le bouton
   devient invisible (texte blanc sur fond paper). */
.mam-footer__col a:not(.mam-btn) {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-3);
    color: var(--c-paper);
    transition: color var(--dur-hover) var(--ease-editorial);
}

.mam-footer__col a:not(.mam-btn):hover {
    color: var(--color-accent);
    text-decoration: none;
}

/* Code departement footer - en italique sur Bricolage, blanc sur fond ink
   (le fuchsia ne ressort pas suffisamment - DA 30/04/2026). */
.mam-footer__code {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 0.85em;
    color: var(--c-paper);
    opacity: 0.6;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    flex-shrink: 0;
}

.mam-footer__sub {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-stone-400);
    margin-top: 2px;
}

.mam-footer__col-cta {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--color-hairline);
}

/* Ghost CTA dans footer sombre : couleur paper + arrow + underline blanc.
   Surclasse le ghost global qui utilise color-text (noir = invisible
   sur fond sombre). */
.mam-footer .mam-btn--ghost {
    color: var(--c-paper);
    border-bottom-color: var(--c-paper);
}

.mam-footer .mam-btn--ghost:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Colonne contact */
.mam-footer__col--contact {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.mam-footer__phone,
.mam-footer__mail {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.3;
}

.mam-footer__phone a {
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--c-paper);
}

.mam-footer__mail a {
    color: var(--c-stone-400);
    font-size: var(--fs-sm);
}

.mam-footer__cta {
    margin-top: var(--sp-3);
    justify-content: center;
    align-self: flex-start;
}

/* Labels & engagements (Pole Habitat etc.) */
.mam-footer__labels {
    border-top: 1px solid var(--color-hairline);
    padding: var(--sp-4) 0;
}
.mam-footer__labels-inner {
    max-width: var(--content-wide);
    margin: 0 auto;
    padding: 0 var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
}
.mam-footer__labels-title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
    font-weight: 600;
}
/* Lien wrapper du logo : effet 'badge' arrondi sur fond paper pour que
   le logo Pole Habitat (fond blanc d'origine, JPG fourni par client) reste
   propre et integre sur le footer dark. Style label de certification. */
.mam-footer__labels a {
    display: inline-flex;
    align-items: center;
    background: var(--c-paper);
    padding: var(--sp-2) var(--sp-3);
    border-radius: 6px;
    transition: transform 200ms var(--ease-editorial), box-shadow 200ms var(--ease-editorial);
}
.mam-footer__labels a:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.4);
}
.mam-footer__labels img {
    height: auto;
    max-height: 48px;
    width: auto;
    display: block;
}

/* Pied : legal */
.mam-footer__legal {
    border-top: 1px solid var(--color-hairline);
    padding: var(--sp-5) 0;
}

.mam-footer__legal-inner {
    max-width: var(--content-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--c-stone-400);
}

.mam-footer__copyright {
    margin: 0;
    letter-spacing: 0.02em;
}

.mam-footer__legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.mam-footer__legal-links a {
    color: var(--c-stone-400);
    transition: color var(--dur-hover) var(--ease-editorial);
}

.mam-footer__legal-links a:hover {
    color: var(--c-paper);
    text-decoration: none;
}

/* Quand une section bg precede le footer, pas de marqueur fuchsia supplementaire */
.mam-section-bg + .mam-footer .mam-footer__top::before {
    display: none;
}

/* (Anciens styles footer supprimes - remplaces par la nouvelle architecture
   ci-dessus : .mam-footer__top / __body / __legal avec 5 colonnes) */