/*
 * 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);
}

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

/* === Sections === */

.mam-section {
    padding-block: var(--sp-8);
    position: relative;
}

.mam-section--hero {
    padding-block: var(--sp-10) var(--sp-8);
}

.mam-section--sm   { padding-block: var(--sp-7); }
.mam-section--lg   { padding-block: var(--sp-9); }

.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 */
.mam-editorial {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-5);
}
.mam-editorial__head {
    grid-column: 1 / 7;
}
.mam-editorial__body {
    grid-column: 8 / -1;
}
@media (max-width: 1024px) {
    .mam-editorial__head,
    .mam-editorial__body {
        grid-column: 1 / -1;
    }
}

/* === 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 {
    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) {
    .mam-logo__img { height: 52px; }
    .mam-header.is-scrolled .mam-logo__img { height: 40px; }
}

/* === 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;
}

.mam-nav__list 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 a:hover {
    text-decoration: none;
}

.mam-nav__list 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 a:hover::after,
.mam-nav__list a[aria-current]::after {
    transform: scaleX(1);
}

.mam-nav__cta {
    border: 1.5px solid currentColor;
    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-nav__cta:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--c-paper);
}

/* Sur fond sombre, hover plus doux (fuchsia-soft) */
.mam-header--overlay:not(.is-scrolled) .mam-nav__cta:hover {
    background-color: var(--c-fuchsia-soft);
    border-color: var(--c-fuchsia-soft);
    color: var(--c-ink);
}

/* 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;
}

/* === 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);
}

.mam-burger__bar:nth-child(1) { top: 18px; }
.mam-burger__bar:nth-child(2) { top: 26px; }

.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) {
    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-5) var(--gutter) var(--sp-7);
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
}

.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-display);
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-weight: 320;
    letter-spacing: -0.02em;
    padding: var(--sp-4) 0;
    color: var(--c-paper);
    transition: color var(--dur-hover) var(--ease-editorial),
                transform var(--dur-hover) var(--ease-editorial);
}

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

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

.mam-drawer__cta .mam-btn {
    background: var(--c-paper);
    color: var(--c-ink);
    border-color: var(--c-paper);
    justify-content: center;
    width: 100%;
    padding: var(--sp-4);
}

.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 */
.mam-footer__top {
    border-bottom: 1px solid var(--color-hairline);
    padding: var(--sp-7) 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-soft);
}

.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;
}

.mam-footer__baseline em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--c-fuchsia-soft);
    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);
}

.mam-footer__social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--c-stone-400);
    transition: color var(--dur-hover) var(--ease-editorial),
                border-color var(--dur-hover) var(--ease-editorial);
}

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

/* 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;
    }
}

.mam-footer__heading {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--c-fuchsia-soft);
    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;
}

.mam-footer__col a {
    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:hover {
    color: var(--c-fuchsia-soft);
    text-decoration: none;
}

.mam-footer__code {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.85em;
    color: var(--c-fuchsia-soft);
    font-weight: 300;
    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);
}

.mam-footer__col-cta a {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    color: var(--c-fuchsia-soft);
}

/* 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-display);
    font-size: var(--fs-lg);
    font-weight: 340;
    letter-spacing: -0.01em;
    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;
}

/* 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) */