/*
 * Composants UI reutilisables : boutons, cartes, kickers, hairlines, pastilles.
 */

/* === Kicker (petit label uppercase au-dessus des H2) === */

.mam-kicker {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--color-text-muted);
    margin: 0 0 var(--sp-5);
}

.mam-kicker__num {
    color: var(--color-accent);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.mam-kicker__rule {
    display: inline-block;
    width: 48px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}

/* === Boutons === */

.mam-btn {
    --btn-pad-y: 1rem;
    --btn-pad-x: 1.75rem;

    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1;
    border: 1.5px solid var(--color-btn-border);
    border-radius: 0;
    cursor: pointer;
    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);
}

/* Primaire : bascule en fuchsia au hover (fond + border) */
.mam-btn:hover {
    text-decoration: none;
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--c-paper);
}

.mam-btn--outline {
    background: transparent;
    color: var(--color-text);
    border-color: currentColor;
}

/* Secondaire outline : outline + texte passent en fuchsia au hover */
.mam-btn--outline:hover {
    background-color: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Variante on-dark (outline blanc sur fond sombre) */
.mam-btn--on-dark:hover {
    background-color: transparent;
    border-color: var(--c-fuchsia-soft);
    color: var(--c-fuchsia-soft);
}

.mam-btn--ghost {
    background: transparent;
    border: none;
    padding: var(--sp-2) 0;
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    border-bottom: 1px solid var(--color-hairline);
    border-radius: 0;
}

.mam-btn--ghost::after {
    content: "\2192"; /* fleche droite */
    margin-left: var(--sp-2);
    display: inline-block;
    transform: translateX(-8px);
    opacity: 0;
    transition: transform var(--dur-hover) var(--ease-editorial),
                opacity var(--dur-hover) var(--ease-editorial);
}

/* Ghost : override du hover global. Pas de fond fuchsia, seulement texte +
   underline en fuchsia. */
.mam-btn--ghost:hover {
    background-color: transparent;
    color: var(--color-accent);
    border-color: transparent;
    border-bottom: 1px solid var(--color-accent);
}

.mam-btn--ghost:hover::after {
    transform: translateX(0);
    opacity: 1;
}

/* === Bouton rond signature (CTA de carte) === */

.mam-btn-round {
    --size: 56px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    display: inline-grid;
    place-items: center;
    border: none;
    cursor: pointer;
    transition: background var(--dur-hover) var(--ease-editorial),
                color var(--dur-hover) var(--ease-editorial);
}

.mam-btn-round:hover {
    background: var(--color-accent);
    color: var(--c-paper);
    text-decoration: none;
}

.mam-btn-round__arrow {
    width: 20px;
    height: 20px;
}

/* === Carte === */

.mam-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.mam-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.mam-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-reveal) var(--ease-editorial);
    will-change: transform;
}

.mam-card:hover .mam-card__media img {
    transform: scale(1.04);
}

.mam-card__body {
    padding: var(--sp-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.mam-card__meta {
    display: flex;
    gap: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    letter-spacing: 0;
}

.mam-card__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}

.mam-card__desc {
    font-size: var(--fs-md);
    color: var(--color-text);
    line-height: 1.55;
    margin: 0;
}

.mam-card__link {
    align-self: flex-start;
    margin-top: var(--sp-3);
}

/* Ruban statut */
.mam-ribbon {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-ink);
    color: var(--c-paper);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    z-index: 2;
}

.mam-ribbon--new {
    background: var(--color-accent);
}

.mam-ribbon--live {
    background: var(--c-stone-600);
}

/* Pastille */
.mam-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    white-space: nowrap;
}

.mam-pill--accent {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* === Bandeau de preview (phase de validation uniquement) === */

.mam-preview-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-toast);
    background: var(--c-ink);
    color: var(--c-paper);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    padding: var(--sp-3) var(--gutter);
    border-top: 1px solid var(--c-fuchsia-deep);
}

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

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

.mam-preview-bar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-fuchsia-soft);
    box-shadow: 0 0 12px var(--c-fuchsia-soft);
}

/* Segmented control - 3 propositions */
.mam-preview-bar__switch {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 3px;
    gap: 1px;
}

.mam-preview-bar__tab {
    padding: var(--sp-2) var(--sp-4);
    color: var(--c-stone-400);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-wide);
    transition: color var(--dur-hover) var(--ease-editorial),
                background var(--dur-hover) var(--ease-editorial);
    text-transform: uppercase;
    font-size: 0.68rem;
    line-height: 1.4;
}

.mam-preview-bar__tab:hover {
    color: var(--c-paper);
    text-decoration: none;
}

.mam-preview-bar__tab.is-active {
    background: var(--c-paper);
    color: var(--c-ink);
    font-weight: var(--fw-semibold);
    cursor: default;
    pointer-events: none;
}

/* Variante simple (design-system) */
.mam-preview-bar__link {
    color: var(--c-paper);
    border-bottom: 1px solid var(--c-fuchsia-soft);
    padding-bottom: 2px;
    transition: border-color var(--dur-hover) var(--ease-editorial);
}

.mam-preview-bar__link:hover {
    border-bottom-color: var(--c-paper);
    text-decoration: none;
}

/* Bouton toggle (croix) dans la barre */
.mam-preview-bar__toggle {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    color: var(--c-stone-400);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    cursor: pointer;
    transition: color var(--dur-hover) var(--ease-editorial),
                border-color var(--dur-hover) var(--ease-editorial),
                background var(--dur-hover) var(--ease-editorial);
    flex-shrink: 0;
}

.mam-preview-bar__toggle:hover {
    color: var(--c-paper);
    border-color: var(--c-fuchsia-soft);
    background: rgba(255, 255, 255, 0.04);
}

/* Etat cache : la barre descend hors de l'ecran */
.mam-preview-bar[data-mam-preview-hidden="true"] {
    transform: translateY(100%);
    transition: transform var(--dur-menu) var(--ease-luxury);
}
.mam-preview-bar {
    transition: transform var(--dur-menu) var(--ease-luxury);
}

/* Bouton reveal (flottant en bas a droite quand barre cachee) */
.mam-preview-reveal {
    position: fixed;
    bottom: var(--sp-4);
    right: var(--sp-4);
    z-index: var(--z-toast);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-ink);
    color: var(--c-paper);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    border: 1px solid var(--c-fuchsia-deep);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--dur-hover) var(--ease-editorial),
                transform var(--dur-hover) var(--ease-editorial),
                border-color var(--dur-hover) var(--ease-editorial);
}

.mam-preview-reveal[data-mam-preview-shown="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mam-preview-reveal:hover {
    border-color: var(--c-fuchsia-soft);
}

.mam-preview-reveal__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-fuchsia-soft);
    box-shadow: 0 0 10px var(--c-fuchsia-soft);
    animation: preview-pulse 2s ease-in-out infinite;
}

@keyframes preview-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}

/* La barre est en OVERLAY pur : pas de padding-bottom sur body, le contenu
   passe en dessous (temoin de phase preview, pas genant pour la projection). */

@media (max-width: 768px) {
    .mam-preview-bar__switch {
        width: 100%;
    }
    .mam-preview-bar__tab {
        flex: 1;
        text-align: center;
    }
}

/* === Swatches (preview design system) === */

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

.mam-swatch__chip {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-hairline);
}

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

.mam-swatch__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    margin: 0;
}

.mam-swatch__code {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.mam-swatch__var {
    font-size: var(--fs-xs);
    font-family: "SF Mono", Menlo, monospace;
    color: var(--color-text-subtle);
    margin: 0;
}

.mam-swatch__usage {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: var(--sp-1) 0 0;
    line-height: 1.4;
}

/* =====================================================================
   HERO - composition editoriale asymetrique
   Pattern : image plein ecran + overlay graduel + grid 12col + typo Fraunces
   -----
   Hauteur : calcul pour que search-strip soit visible a l'ouverture.
   Sur petit ecran (<820px) le search passe SOUS le fold en collapse mobile.
   ===================================================================== */

/* Strategie responsive claire :
   - Desktop large (>=1200px)     : hero 100dvh, search dans le hero
   - Laptop (900-1199px)          : hero 82dvh, search section externe
   - Tablet (600-899px)           : hero 75dvh, burger, search section externe
   - Mobile (<600px)              : hero taille naturelle, burger, search full-width
*/

.mam-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    color: var(--c-paper);
    isolation: isolate;
    min-height: 540px;
}

/* Desktop large : hero remplit le viewport, search inclus.
   Light/mixte : header solide pousse le hero -> on soustrait header-h.
   Dark : header en overlay -> le hero prend tout (100dvh). */
@media (min-width: 1200px) {
    .mam-hero {
        height: calc(100dvh - var(--header-h, 96px) - var(--preview-bar-h, 0px));
        max-height: 980px;
    }
    .mam-hero--dark {
        height: calc(100dvh - var(--preview-bar-h, 0px));
    }
}

/* Laptop : hero plus court pour laisser place au search externe visible au scroll */
@media (min-width: 900px) and (max-width: 1199px) {
    .mam-hero {
        height: calc(82dvh - var(--header-h, 96px));
        min-height: 560px;
    }
    .mam-hero--dark {
        height: 82dvh;
    }
}

/* Tablet : hero dimensionne pour etre dominant sans ecraser */
@media (min-width: 600px) and (max-width: 899px) {
    .mam-hero {
        height: calc(75dvh - var(--header-h, 76px));
        min-height: 540px;
    }
    .mam-hero--dark {
        height: 75dvh;
    }
}

/* Mobile : hero proportionne au contenu, pas contraint */
@media (max-width: 599px) {
    .mam-hero {
        min-height: calc(85dvh - var(--header-h, 76px));
    }
    .mam-hero--dark {
        min-height: 85dvh;
    }
}

/* Version ambiance sombre : le header est en overlay au-dessus du hero,
   donc le hero doit compenser en padding-top pour que le contenu ne soit
   pas cache derriere. L'inner ajoute son propre padding, on ne double pas. */
.mam-hero--dark {
    padding-top: var(--header-h, 96px);
}

.mam-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    /* scale(1.04) permanent pour un leger sur-cadrage (parallaxe naturelle).
       var(--parallax-offset) est mise a jour en JS au scroll.
       `will-change: transform` force la promotion en layer GPU -> la parallax
       ne re-rasterise plus l'image-bg a chaque frame. */
    transform: translate3d(0, var(--parallax-offset, 0px), 0) scale(1.04);
    animation: hero-reveal 1.4s var(--ease-luxury) both;
    will-change: transform;
}

.mam-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(10,10,10,0.45) 0%,
            rgba(10,10,10,0.15) 30%,
            rgba(10,10,10,0.25) 55%,
            rgba(10,10,10,0.85) 100%
        );
}

/* Grain sur le hero (ambiance Eden Home) */
/* Grain subtil sur hero sombre uniquement - version perf-friendly.
   Cle pour eviter le lag : pas de mix-blend-mode (trop cher au composite),
   tile de 140px (un seul decodage reutilise), opacity simple qui s'integre
   nativement au layer du hero sans surcout compositeur notable. */
.mam-hero--dark::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.08;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 140px 140px;
}

.mam-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--content-wide);
    margin-inline: auto;
    padding: clamp(var(--sp-4), 4vh, var(--sp-7)) var(--gutter);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(var(--sp-3), 2vh, var(--sp-5));
    min-height: 0;
}

/* Kicker en haut (position naturelle), titre pousse vers le bas via auto,
   bottom (sub + CTA) colle sous le titre. Meme avec kicker present,
   le titre garde son margin-top: auto (sinon tout se colle en haut et
   laisse un vide en bas). */
.mam-hero__title {
    margin-top: auto;
}

.mam-hero__title + .mam-hero__bottom {
    margin-top: clamp(var(--sp-4), 3vh, var(--sp-6));
}

/* Kicker hero */
.mam-hero__kicker {
    color: var(--c-paper);
    opacity: 0.85;
    animation: hero-in 0.9s var(--ease-editorial) 0.15s both;
}

.mam-hero__kicker .mam-kicker__num {
    color: var(--c-fuchsia-soft);
}

/* Titre display - Fraunces, taille par breakpoint clair */
.mam-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 340;
    font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
    font-size: 2.75rem;      /* mobile default */
    line-height: 1;
    letter-spacing: -0.028em;
    color: var(--c-paper);
}

@media (min-width: 600px) {
    .mam-hero__title { font-size: 3.5rem; }
}

@media (min-width: 900px) {
    .mam-hero__title { font-size: 4.5rem; line-height: 0.98; }
}

@media (min-width: 1200px) {
    .mam-hero__title { font-size: clamp(5rem, 7vw, 8rem); line-height: 0.95; }
}

.mam-hero__line {
    display: block;
    animation: hero-in 1s var(--ease-editorial) both;
}
.mam-hero__line:nth-child(1) { animation-delay: 0.28s; }
.mam-hero__line:nth-child(2) { animation-delay: 0.44s; }
.mam-hero__line:nth-child(3) { animation-delay: 0.6s; }

.mam-hero__line--em {
    color: var(--c-fuchsia-soft);
    padding-left: clamp(1rem, 4vw, 4rem);
}

.mam-hero__line--em .t-em {
    font-size: 0.92em;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-weight: 300;
}

/* Meta sidebar : chiffres en Fraunces, labels en sans-serif */
.mam-hero__meta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    animation: hero-in 0.9s var(--ease-editorial) both;
}
.mam-hero__meta:nth-child(1) { animation-delay: 0.7s; }
.mam-hero__meta:nth-child(2) { animation-delay: 0.8s; }
.mam-hero__meta:nth-child(3) { animation-delay: 0.9s; }

.mam-hero__meta-num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 350;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--c-paper);
    font-variation-settings: "opsz" 96, "SOFT" 30;
    font-variant-numeric: tabular-nums;
}

.mam-hero__meta-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--c-stone-400);
    line-height: 1.2;
}

/* Bas du hero : sub + CTAs */
.mam-hero__bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(var(--sp-4), 2vw, var(--sp-7));
    align-items: end;
    animation: hero-in 1s var(--ease-editorial) 1s both;
}

@media (max-width: 768px) {
    .mam-hero__bottom {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
}


.mam-hero__sub {
    max-width: 52ch;
    font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
    line-height: 1.45;
    color: var(--c-paper);
    opacity: 0.88;
    margin: 0;
}

.mam-hero__cta {
    display: inline-flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

/* Bouton "on dark" (outline clair sur hero sombre) */
.mam-btn--on-dark {
    border-color: var(--c-paper);
    color: var(--c-paper);
    background: transparent;
}
.mam-btn--on-dark:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Indicateur "scroll" - positionne a droite, discret */
.mam-hero__scroll {
    position: absolute;
    bottom: 50%;
    right: var(--sp-4);
    transform: translateY(50%) rotate(90deg);
    transform-origin: center;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--sp-3);
    color: var(--c-paper);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    opacity: 0.55;
    z-index: 2;
    animation: hero-in 1s var(--ease-editorial) 1.4s both;
    pointer-events: none;
}

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

.mam-hero__scroll-line {
    display: block;
    width: 1px;
    height: 40px;
    background: var(--c-paper);
    position: relative;
    overflow: hidden;
}
.mam-hero__scroll-line::after {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 40px;
    background: var(--c-fuchsia-soft);
    animation: scroll-indicator 2.4s var(--ease-luxury) infinite;
}

/* Animations d'entree staggered */
@keyframes hero-reveal {
    from { transform: translate3d(0, 0, 0) scale(1.12); opacity: 0.6; }
    to   { transform: translate3d(0, 0, 0) scale(1.04); opacity: 1; }
}

@keyframes hero-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes scroll-indicator {
    0%   { top: -40px; }
    60%  { top: 40px; }
    100% { top: 40px; }
}

/* =====================================================================
   Moteur de recherche - 2 emplacements selon viewport
   ===================================================================== */

/* Variante "on-hero" : dans le hero, en bas. Visible >=1200px uniquement. */
.mam-search-strip--on-hero {
    position: relative;
    z-index: 5;
    width: 100%;
    flex-shrink: 0;
    display: none;
}

.mam-search-strip__inner {
    width: 100%;
    max-width: var(--content-wide);
    margin-inline: auto;
    padding: 0 var(--gutter) var(--sp-5);
}

.mam-search-strip--on-hero .mam-search {
    max-width: 100%;
    grid-template-columns: 2fr 1fr 1fr auto;
    box-shadow: 0 24px 48px -24px rgba(10, 10, 10, 0.35);
}

/* Visible uniquement sur desktop large */
@media (min-width: 1200px) {
    .mam-search-strip--on-hero { display: block; }
}

/* Variante "external" : section dediee sous le hero. Visible <1200px. */
.mam-search-section {
    background: var(--color-bg);
    padding: var(--sp-7) 0;
    border-top: 1px solid var(--color-hairline);
    border-bottom: 1px solid var(--color-hairline);
}

@media (min-width: 1200px) {
    .mam-search-section { display: none; }
}

.mam-search-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.mam-search-section__kicker {
    color: var(--color-text-muted);
    margin: 0;
}

.mam-search--external {
    grid-template-columns: 2fr 1fr 1fr auto;
    border: 1px solid var(--color-hairline);
    box-shadow: none;
}

.mam-search--external .mam-search__submit-label {
    display: inline-block;
    margin-right: var(--sp-2);
}

/* Responsive du form search (dans les 2 variantes) */
@media (max-width: 820px) {
    .mam-search-strip--on-hero .mam-search,
    .mam-search--external {
        grid-template-columns: 1fr 1fr;
    }
    .mam-search-strip--on-hero .mam-search__submit,
    .mam-search--external .mam-search__submit {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .mam-search-strip--on-hero .mam-search,
    .mam-search--external {
        grid-template-columns: 1fr;
    }
    .mam-search--external .mam-search__submit-label {
        display: inline;
    }
}

/* =====================================================================
   Hero LIGHT - image fullscreen SOUS le header clair
   Le header reste sur fond paper (identite rassurante + lisibilite),
   mais l'image occupe toute la place disponible juste en dessous.
   Resultat : on a la "respiration" du header clair + l'impact visuel
   de l'image plein cadre. Meilleur des deux mondes.
   ===================================================================== */

.mam-hero--light {
    color: var(--c-paper);
    padding-top: 0; /* image colle au header */
}

.mam-hero--light .mam-hero__inner {
    color: var(--c-paper);
}

.mam-hero--light .mam-hero__line--em {
    color: var(--c-fuchsia-soft);
}

.mam-hero--light .mam-hero__sub,
.mam-hero--light .mam-hero__title {
    color: var(--c-paper);
}

/* En ambiance claire, l'image a un overlay un peu plus leger que le dark
   pour garder la couleur de l'image plus visible. */
.mam-hero--light .mam-hero__media::after {
    background:
        linear-gradient(180deg,
            rgba(10,10,10,0.22) 0%,
            rgba(10,10,10,0.1) 25%,
            rgba(10,10,10,0.3) 60%,
            rgba(10,10,10,0.8) 100%
        );
}

/* =====================================================================
   Search strip - adaptation selon l'ambiance
   ===================================================================== */

/* Sur ambiance claire : le moteur est DANS la section suivante (pas chevauchant)
   car le hero n'est plus sur fond sombre */
.mam-search-strip--light {
    margin-top: 0;
    background: var(--color-bg);
    padding-bottom: var(--sp-7);
}

.mam-search-strip--light .mam-search {
    border: 1px solid var(--color-hairline);
    box-shadow: none;
    max-width: var(--content-wide);
}

/* === Signature : bande "Depuis 1979" === */

.mam-since {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1;
    background: var(--color-accent-soft);
}

.ambiance-dark .mam-since {
    background: transparent;
    color: var(--c-paper);
    border-color: var(--color-accent);
}

/* === Moteur de recherche inline === */

.mam-search {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    background: var(--c-paper-pure);
    color: var(--c-ink);
    border: 1px solid var(--color-hairline);
    max-width: 720px;
}

.mam-search__field {
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    border-right: 1px solid var(--color-hairline);
}

.mam-search__label {
    font-size: var(--fs-xs);
    color: var(--c-stone-600);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
}

.mam-search__input {
    font-size: var(--fs-md);
    color: var(--c-ink);
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    width: 100%;
}

.mam-search__submit {
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-ink);
    color: var(--c-paper);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border: none;
    cursor: pointer;
    height: 100%;
    min-width: 72px;
    display: inline-grid;
    place-items: center;
    transition: background var(--dur-hover) var(--ease-editorial),
                color var(--dur-hover) var(--ease-editorial);
}

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

.mam-search__submit svg {
    transition: transform var(--dur-hover) var(--ease-editorial);
}

.mam-search__submit:hover svg {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .mam-search {
        grid-template-columns: 1fr;
    }
    .mam-search__field {
        border-right: none;
        border-bottom: 1px solid var(--color-hairline);
    }
}

/* === Reassurance 3 colonnes + effet spotlight hover (inspire Unleashed-Design) === */

.mam-reassure {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--color-hairline);
    border-bottom: 1px solid var(--color-hairline);
    position: relative;
}

.mam-reassure__item {
    padding: var(--sp-7) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    border-right: 1px solid var(--color-hairline);
    position: relative;
    cursor: default;
}

/* Au hover : juste la couleur de l'icone qui change, pas de transform */
.mam-reassure__item:hover .mam-reassure__icon {
    color: var(--c-fuchsia);
}

.mam-reassure__item:last-child {
    border-right: none;
}

.mam-reassure__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    margin-bottom: var(--sp-3);
    color: var(--color-accent);
    transition: color var(--dur-hover) var(--ease-editorial);
}

.mam-reassure__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    margin: 0;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.mam-reassure__text {
    /* WCAG AAA : on utilise color-text-muted (--stone-600 #6B6960) et non
       --stone-400 qui donnerait un contraste insuffisant sur paper. */
    color: var(--color-text-muted);
    font-size: var(--fs-md);
    line-height: 1.55;
    margin: 0;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .mam-reassure {
        grid-template-columns: 1fr;
    }
    .mam-reassure__item {
        border-right: none;
        border-bottom: 1px solid var(--color-hairline);
    }
    .mam-reassure__item:last-child {
        border-bottom: none;
    }
}

/* === Cartes programmes (inline, section "Programmes") === */

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

.mam-programme-card__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    letter-spacing: -0.02em;
    margin: var(--sp-3) 0 0;
    color: var(--color-text);
    line-height: 1.2;
}

.mam-programme-card__meta {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.mam-programme-card__desc {
    font-size: var(--fs-md);
    line-height: 1.55;
    margin: var(--sp-2) 0 0;
    color: var(--color-text);
}

/* Pastille "muted" (statut neutre, garanti AAA) */
.mam-pill--muted {
    border-color: var(--color-text-muted);
    color: var(--color-text-muted);
    background: transparent;
}

.mam-pill--accent {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* En ambiance sombre, on adapte la pastille muted pour rester lisible */
.ambiance-dark .mam-pill--muted,
.mam-section--dark .mam-pill--muted,
[data-ambiance="dark"] .mam-pill--muted {
    border-color: var(--c-stone-400);
    color: var(--c-stone-400);
}

.ambiance-dark .mam-pill--accent,
.mam-section--dark .mam-pill--accent,
[data-ambiance="dark"] .mam-pill--accent {
    border-color: var(--c-fuchsia-soft);
    color: var(--c-fuchsia-soft);
    background: transparent;
}

/* === Sections avec image en fond (pattern territoire / CTA hero) === */

.mam-section-bg {
    position: relative;
    padding: var(--sp-9) 0;
    overflow: hidden;
    color: var(--c-paper);
    isolation: isolate;
}

.mam-section-bg--tall {
    padding: calc(var(--sp-9) * 1.3) 0;
}

/* Deux sections image consecutives : on retire le padding qui double l'espace
   entre les deux et on ajoute un trait fuchsia de demarcation. */
.mam-section-bg + .mam-section-bg {
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mam-section-bg + .mam-section-bg::before {
    /* Remplace le noise-overlay classique pour ajouter aussi un trait fuchsia */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
    z-index: 1;
}

/* Petite marque fuchsia au top de la section pour demarquer */
.mam-section-bg + .mam-section-bg::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: var(--c-fuchsia-soft);
    z-index: 2;
}

/* Si la section est suivie directement d'une section bg, sa marque aussi */
.mam-section-bg:has(+ .mam-section-bg) {
    padding-bottom: calc(var(--sp-9) * 0.7);
}
.mam-section-bg + .mam-section-bg {
    padding-top: calc(var(--sp-9) * 0.9);
}

/* Si une section classique (paper/alt) precede une section bg,
   on ajoute aussi un trait fuchsia centre pour la demarcation */
:not(.mam-section-bg).mam-section + .mam-section-bg::after,
.mam-section--alt + .mam-section-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: var(--c-fuchsia-soft);
    z-index: 2;
}

.mam-section-bg__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    /* Promotion en layer compositeur : le gradient overlay ::after et le
       background-image sont composites ensemble sur une layer GPU isolee,
       sans re-rasteriser a chaque scroll. */
    transform: translateZ(0);
    will-change: transform;
}

.mam-section-bg__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(10,10,10,0.6) 0%,
            rgba(10,10,10,0.55) 50%,
            rgba(10,10,10,0.78) 100%);
}

/* Variante zoom lent (CTA final).
   `will-change: transform` + `translateZ(0)` forcent la promotion en layer
   compositeur GPU : la transform reste sur le GPU sans repaint CPU a chaque
   frame, meme a 120Hz Retina. Sans ca, background-image div = pas de
   promotion auto = le compositeur re-echantillonne l'image a chaque frame. */
.mam-section-bg__media--zoom {
    will-change: transform;
    animation: section-bg-zoom 24s var(--ease-editorial) infinite alternate;
}

@keyframes section-bg-zoom {
    from { transform: translateZ(0) scale(1); }
    to   { transform: translateZ(0) scale(1.08); }
}

/* Grain retire (mix-blend-mode: overlay fullscreen cassait les perfs). */

.mam-section-bg__content {
    position: relative;
    z-index: 2;
}

.mam-section-bg__content--center {
    text-align: center;
}

/* Kicker sur fond sombre (override) */
.mam-kicker--on-dark {
    color: var(--c-stone-400);
}
.mam-kicker--on-dark .mam-kicker__num {
    color: var(--c-fuchsia-soft);
}

/* (Anciennement : override iOS pour background-attachment: fixed - supprime
   car la propriete n'est plus utilisee du tout.) */

/* === Liste des departements (bloc territoire) === */

.mam-territoire {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.mam-territoire__dep {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-lg);
    color: var(--c-paper);
    letter-spacing: -0.01em;
    font-weight: var(--fw-medium);
}

.mam-territoire__code {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-style: italic;
    font-weight: 300;
    color: var(--c-fuchsia-soft);
    font-variation-settings: "opsz" 96, "SOFT" 80;
    font-variant-numeric: tabular-nums;
}

/* === Empty state (index.php fallback) === */

.mam-empty {
    min-height: 70vh;
    display: grid;
    place-content: center;
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
    gap: var(--sp-4);
}

.mam-empty__links {
    display: inline-flex;
    gap: var(--sp-3);
    align-items: center;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.mam-sep {
    color: var(--color-hairline);
}