/*
 * 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;
    /* Touche fuchsia (reunion 08/06 : reintroduire l'accent) : tiret fuchsia
       avant chaque kicker sur fond clair. Sur fond sombre -> override paper. */
    background: var(--color-accent);
    opacity: 1;
}

/* === Boutons ===
 *
 * Decision DA reunion 30/04/2026 : plus de boutons transparents au repos.
 * Trois styles seulement :
 *  - .mam-btn          : plein, noir/texte blanc par defaut, fuchsia au hover
 *  - .mam-btn--on-dark : plein, blanc/texte noir (a utiliser sur fond image / sombre)
 *  - .mam-btn--ghost   : lien + fleche, fleche visible des le repos, fuchsia au hover
 *
 * Le fuchsia n'apparait QUE au hover des elements cliquables.
 */

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

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

/* Variante on-dark : a utiliser sur fond image / section sombre.
   Fond plein blanc + texte noir au repos, fuchsia + texte blanc au hover. */
.mam-btn--on-dark {
    background: var(--c-paper);
    color: var(--c-ink);
    border-color: var(--c-paper);
}

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

/* Ghost : lien souligne avec fleche visible des le repos.
   Au hover : texte + underline + fleche passent en fuchsia. */
.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-medium);
    font-size: var(--fs-md);
    border-bottom: 1px solid currentColor;
    border-radius: 0;
}

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

.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(4px);
}

/* Ghost sur image hero : la lisibilite du border-bottom seul est trop
   faible (sur ciel ou facade claire). On encadre le bouton avec une
   bordure complete + leger fond translucide. */
.mam-hero .mam-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.85);
    background-color: rgba(10, 10, 10, 0.18);
    backdrop-filter: blur(2px);
    color: var(--c-paper);
    padding: var(--sp-3) var(--sp-5);
}

.mam-hero .mam-btn--ghost:hover {
    border-color: var(--c-paper);
    background-color: rgba(10, 10, 10, 0.32);
    color: var(--c-paper);
}

/* === 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;
    /* 3:2 = ratio des photos fournies (verifie : originaux realisations 1200x800)
       -> la vignette affiche la photo entiere, sans rognage (retour cliente 10/07).
       Les cartes agence gardent leur 16:9 (override templates-core.css). */
    aspect-ratio: 3 / 2;
    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;
}

/* Carte realisation : ligne meta "Categorie / Lieu (dept)" resserree, avec la
   categorie en accent et le separateur discret (retour Julien 06/07 :
   moins d'espace, separateur moins visible). Aligne sur le style blog. */
.mam-card--realisation .mam-card__meta {
    gap: var(--sp-2);
    align-items: center;
}
.mam-card--realisation .mam-card__cat {
    color: var(--color-accent);
}
.mam-card--realisation .mam-card__sep {
    color: var(--color-hairline);
}

/* Carte agence : eyebrow role (accent, comme realisation) + telephone discret
   (refonte hierarchie 10/07 : le tel n'est plus style comme un prix, et le role
   sert de kicker au-dessus du nom). */
.mam-card--agence .mam-card__cat {
    color: var(--color-accent);
}
.mam-card--agence .mam-card__agence-tel {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    margin: var(--sp-1) 0 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.
 * Decision DA reunion 30/04/2026 : un seul style fuchsia pour TOUS les
 * statuts (lancement, travaux en cours, livre) afin de garder une coherence
 * visuelle. Les variantes --new et --live sont conservees comme alias pour
 * eviter de casser le balisage existant mais rendent la meme couleur. */
.mam-ribbon {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: var(--sp-2) var(--sp-4);
    background: var(--color-accent);
    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,
.mam-ribbon--live {
    background: var(--color-accent);
}

/* Ruban "Livré" : programme termine (reunion 26/05). Neutre/sombre pour le
   distinguer du fuchsia promotionnel - signale un bien passe, non commercialise. */
.mam-ribbon--livre {
    background: var(--c-ink);
    color: var(--c-paper);
}

/* ---------------------------------------------------------------------------
   Carte annonce / programme - hierarchie (D19, CR cliente 01/07 + mail 03/07).
   Scope .mam-card--annonce (n'affecte pas les cards blog/agence/mega-menu).
   - Ruban = TYPE en FUCHSIA (mail Amelie 03/07 : "Laisser le bandeau
     Terrain+Maison / Terrain / Programme immobilier en fuchsia").
   - Etat commercial (programmes) = pastille NEUTRE sous le titre (le fuchsia
     porte desormais le bandeau de type -> on evite deux accents fuchsia sur
     la meme carte, regle DA "fuchsia ponctuel").
   - Hierarchie : meta kicker -> titre -> etat -> PRIX dominant, aligne en bas
     de rangee et separe par une hairline 1px (signature DA).
   --------------------------------------------------------------------------- */
.mam-card--annonce > .mam-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mam-card--annonce .mam-ribbon {
    background: var(--color-accent);
    color: var(--c-paper);
}
.mam-card--annonce .mam-card__body {
    flex: 1;
    gap: var(--sp-1);
    padding-top: var(--sp-4);
}
.mam-card--annonce .mam-card__meta {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.mam-card--annonce .mam-card__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    margin-top: var(--sp-1);
}
.mam-card__etat {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-ink);
}
.mam-card__etat::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
/* Programme termine (Livre) : etat neutre, pas fuchsia (bien passe). */
.mam-card__etat--livre {
    color: var(--c-stone-600);
}
.mam-card--annonce .mam-card__price {
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-stone-200);
}

/* 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(--c-paper);
    background: var(--color-accent);
}

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

.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);
    box-shadow: 0 0 12px var(--c-fuchsia);
}

/* (Le segmented control 3-ambiances a ete retire suite a la decision DA
   du 30/04/2026 : seule l'ambiance mixte est conservee. La barre sert
   maintenant uniquement de raccourci home <-> design system.) */

.mam-preview-bar__link {
    color: var(--c-paper);
    border-bottom: 1px solid var(--c-fuchsia);
    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);
    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);
    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);
}

.mam-preview-reveal__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-fuchsia);
    box-shadow: 0 0 10px var(--c-fuchsia);
    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). */

/* === 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 Bricolage
   -----
   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;
    /* Hauteur indicative de la barre search en bas (--mam-search-h),
       utilisee pour reserver l'espace dans le hero__inner et eviter le
       chevauchement avec le CTA quand le viewport est court. */
    --mam-search-h: 110px;
}

/* >=1200px : la barre search est dans le flex du hero. On ajoute donc
   son espace au min-height pour ne pas que le contenu deborde. */
@media (min-width: 1200px) {
    .mam-hero {
        min-height: calc(540px + var(--mam-search-h));
    }
}

/* 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: 720px;
    }
    .mam-hero--dark {
        height: calc(100dvh - var(--preview-bar-h, 0px));
        max-height: 720px;
    }
}

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

/* Mode video : iframe YouTube en cover.
   On utilise une astuce CSS classique pour faire un cover sur iframe 16:9 :
   width = max(100vw, 177.78vh), height = max(56.25vw, 100vh), puis centrage.
   Le pointer-events: none + tabindex=-1 empechent toute interaction (la video
   reste un fond decoratif, pas interactif). */
.mam-hero__media--video {
    overflow: hidden;
    transform: none; /* pas de scale, l'iframe a deja sa propre logique de cover */
    animation: hero-reveal 1.4s var(--ease-luxury) both;
}

.mam-hero__media--video .mam-hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, calc(100% * 16 / 9));
    height: max(100%, calc(100% * 9 / 16));
    min-width: calc(100vh * 16 / 9);
    min-height: calc(100vw * 9 / 16);
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
    object-fit: cover; /* fichier auto-heberge : remplit le hero en cover (sans effet sur l'iframe) */
}

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

/* Numero de kicker sur fond noir : on garde paper pour la lisibilite,
   le fuchsia ne ressort pas assez sur fond completement noir
   (decision DA reunion 30/04/2026). */
.mam-hero__kicker .mam-kicker__num {
    color: var(--c-paper);
}

/* Trait du kicker sur fond image (hero) : blanc comme le numero, pas fuchsia
   (consigne Julien 22/06 : sur fond sombre/image, numero ET trait en blanc).
   Aligne sur .mam-kicker--on-dark (paper @ 0.4). */
.mam-hero__kicker .mam-kicker__rule {
    background: var(--c-paper);
    opacity: 0.4;
}

/* Titre hero - Bricolage Grotesque, taille par breakpoint.
   margin-top: auto preserve - pousse le bloc title+bottom vers le bas
   du flex container (mam-hero__inner). margin: 0 ecrasait cet auto :
   on conserve les autres marges a 0 mais on garde l'auto pour le top. */
.mam-hero__title {
    margin: auto 0 0 0;
    font-family: var(--font-sans);
    font-weight: 300;
    font-variation-settings: "wght" 320, "wdth" 95, "opsz" 96;
    font-size: 2.75rem;      /* mobile default */
    line-height: 1;
    letter-spacing: -0.035em;
    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; }

/* La ligne emphasee reste blanche sur fond image sombre (lisibilite),
   l'italique Bricolage suffit a marquer l'emphase. */
.mam-hero__line--em {
    color: var(--c-paper);
    padding-left: clamp(1rem, 4vw, 4rem);
}

.mam-hero__line--em .t-em {
    font-size: 0.95em;
    letter-spacing: -0.02em;
    font-weight: 300;
}

/* Meta sidebar */
.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-sans);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--c-paper);
    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;
}

/* Phase 2 audit : si search bar presente, le sub occupe toute la
   largeur (les boutons mam-hero__cta sont masques en PHP). */
.mam-hero__bottom--with-search {
    grid-template-columns: 1fr;
}

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

/* (Le bouton --on-dark plein blanc est defini plus haut dans la section
   "Boutons". Pas de variante "outline blanc" : decision DA 30/04/2026
   contre les boutons transparents.) */

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

/* Cache la variante external sur desktop large (le moteur est alors
   dans le hero via .mam-search-strip--on-hero). */
@media (min-width: 1200px) {
    .mam-search-section--mobile-only { 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 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);
}

/* Sur le hero light (image overlay), on garde aussi le blanc pour
   coherence avec le hero dark - le fuchsia ne ressort pas assez sur
   fond image sombre. */
.mam-hero--light .mam-hero__line--em {
    color: var(--c-paper);
}

.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" === */

/* Pastille "depuis 1979" - en clair fond fuchsia plein, en sombre
   bordure paper sans fond pour ne pas concurrencer les rubans statut. */
.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(--c-paper);
    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);
}

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

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

/* Harmonisation 22/06 : etat de focus fuchsia (equivalent du border fuchsia des
   filtres /annonces/). Champ borderless -> fin soulignement fuchsia SOUS L'INPUT
   uniquement (pas sous toute la cellule : evite le filet lourd colle au bord de
   la bande blanche du hero). */
.mam-search__input:focus {
    box-shadow: 0 2px 0 var(--color-accent);
}

/* Harmonisation 22/06 : meme fleche de select custom que les filtres /annonces/
   (le RAYON etait un select natif). */
select.mam-search__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: var(--sp-5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 12px 8px;
}

.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-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    transition: background var(--dur-hover) var(--ease-editorial),
                color var(--dur-hover) var(--ease-editorial);
}

.mam-search-strip--on-hero .mam-search__submit-label {
    display: inline-block;
}

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

/* Masque le label sur tres petits ecrans pour eviter le retour ligne */
@media (max-width: 380px) {
    .mam-search-strip--on-hero .mam-search__submit-label {
        display: none;
    }
}

@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(--c-paper);
    background: var(--color-accent);
}

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

/* La pill accent reste fuchsia plein dans toutes les ambiances pour
   garder une coherence avec les rubans statut (decision DA 30/04/2026). */

/* === 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);
    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);
    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) - le numero passe en blanc, pas en
   fuchsia : la lisibilite prime sur l'accent decoratif (DA 30/04/2026). */
.mam-kicker--on-dark {
    color: var(--c-stone-400);
}
.mam-kicker--on-dark .mam-kicker__num {
    color: var(--c-paper);
}
.mam-kicker--on-dark .mam-kicker__rule {
    background: var(--c-paper);
    opacity: 0.4;
}

/* (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-sans);
    font-size: var(--fs-md);
    font-style: italic;
    font-weight: 400;
    color: var(--c-paper);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

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

/* ============================================================================
   Pop-up evenementielle (mam/popup-event)
   ----------------------------------------------------------------------------
   Modal accessible. L'affichage est pilote par l'attribut [hidden] (gere par
   le JS popup-event.js). Animations CSS keyframes pour le fade-in/scale-in
   au moment de l'apparition - declenche par .is-open ajoute par le JS.
   ============================================================================ */

.mam-popup {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    padding: var(--sp-4);
}

.mam-popup[hidden] {
    display: none;
}

.mam-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mam-popup__dialog {
    position: relative;
    background: var(--c-paper);
    color: var(--c-ink);
    max-width: 520px;
    width: 100%;
    max-height: calc(100vh - var(--sp-8));
    overflow: auto;
    border: 1px solid var(--color-hairline);
}

.mam-popup__close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--c-paper);
    color: var(--c-ink);
    border: 1px solid var(--color-hairline);
    cursor: pointer;
    transition: background var(--dur-hover) var(--ease-editorial),
                color var(--dur-hover) var(--ease-editorial),
                border-color var(--dur-hover) var(--ease-editorial);
}

.mam-popup__close:hover,
.mam-popup__close:focus-visible {
    background: var(--c-ink);
    color: var(--c-paper);
    border-color: var(--c-ink);
}

.mam-popup__media {
    margin: 0;
    background: var(--c-mineral, #f4f1ec);
}

.mam-popup__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
}

.mam-popup__body {
    padding: var(--sp-6) var(--sp-6) var(--sp-7);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.mam-popup__title {
    margin: 0;
}

.mam-popup__message {
    margin: 0;
}

.mam-popup__message p {
    margin: 0 0 var(--sp-3);
}

.mam-popup__message p:last-child {
    margin-bottom: 0;
}

.mam-popup__actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}

/* Empeche scroll body quand popup ouverte */
.mam-popup-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .mam-popup__dialog {
        max-width: 100%;
    }
    .mam-popup__body {
        padding: var(--sp-5);
    }
    .mam-popup__media img {
        max-height: 220px;
    }
}

/* --- Popup : dispositions d'image (mediaLayout) --- */

/* Moitie : image et texte cote a cote. */
.mam-popup__dialog--split {
    max-width: 780px;
    display: grid;
    grid-template-columns: 5fr 6fr;
    align-items: stretch;
}
.mam-popup__dialog--split .mam-popup__media {
    height: 100%;
}
.mam-popup__dialog--split .mam-popup__media img {
    height: 100%;
    max-height: none;
}

/* Fond : image en arriere-plan, texte par-dessus avec voile + lisere. */
.mam-popup__dialog--background {
    background-size: cover;
    background-position: center;
    border: 2px solid var(--c-ink);
    min-height: 360px;
    display: flex;
    align-items: flex-end;
}
.mam-popup__dialog--background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 18, 16, 0.86) 0%, rgba(20, 18, 16, 0.62) 45%, rgba(20, 18, 16, 0.28) 100%);
    pointer-events: none;
}
.mam-popup__dialog--background .mam-popup__body {
    position: relative;
    z-index: 1;
    color: #fff;
}
.mam-popup__dialog--background .mam-popup__title {
    color: #fff;
}

/* Haut : le titre est en flux (il DEFINIT la hauteur de la bande), l'image
   remplit derriere lui, calee exactement sur cette hauteur (titre + marges).
   La croix de fermeture est sur la meme ligne (haut-droite). */
.mam-popup__dialog--top .mam-popup__media {
    position: relative;
    background: var(--c-ink, #141210);
}
.mam-popup__dialog--top .mam-popup__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}
.mam-popup__dialog--top .mam-popup__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(20, 18, 16, 0.82) 0%, rgba(20, 18, 16, 0.5) 100%);
    pointer-events: none;
}
.mam-popup__title--over {
    position: relative;
    z-index: 1;
    margin: 0;
    /* padding-right large : laisse la place a la croix de fermeture (haut-droite). */
    padding: var(--sp-5) 64px var(--sp-5) var(--sp-6);
    color: #fff;
}

@media (max-width: 600px) {
    .mam-popup__dialog--split {
        grid-template-columns: 1fr;
    }
    .mam-popup__dialog--split .mam-popup__media img {
        height: auto;
        max-height: 200px;
    }
}

/* ============================================================================
   Listing archive : filtres + bouton "Charger plus"
   ----------------------------------------------------------------------------
   Utilise par mam_listing_render() sur les pages archive-mam_*.php.
   ============================================================================ */

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

.mam-listing__more {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-5);
}

/* Titre H2 generique au-dessus de la grille de listing (reunion 26/06). */
.mam-listing__title {
    margin: 0 0 var(--sp-4);
}

.mam-listing__more .mam-btn[disabled] {
    opacity: 0.6;
    cursor: wait;
}

.mam-listing-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-5);
    background: var(--c-mineral, #f4f1ec);
    border: 1px solid var(--color-hairline);
    align-items: end;
}

/* Actions sur 2e ligne dediee : pleine largeur, alignees a droite
   avec FILTRER en bouton principal a gauche du groupe et Reinitialiser
   en text-link discret a droite. Pattern UX standard (Airbnb, etc). */
.mam-listing-filters__actions {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-hairline);
    padding-top: var(--sp-4);
    margin-top: var(--sp-2);
}

.mam-listing-filters__field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--fs-sm);
}

/* Harmonisation 22/06 : labels alignes sur le moteur de recherche
   (.mam-search__label) -> meme poids semibold + meme couleur stone. */
.mam-listing-filters__field label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    color: var(--c-stone-600);
    font-weight: var(--fw-semibold);
}

.mam-listing-filters__field input,
.mam-listing-filters__field select {
    height: 44px;
    box-sizing: border-box;
    padding: 0 var(--sp-3);
    background: var(--c-paper);
    border: 1px solid var(--color-hairline);
    font-family: inherit;
    font-size: var(--fs-md);
    line-height: 1.2;
    color: inherit;
}

/* Selects natifs : reset apparence + fleche custom alignee a la
   hauteur des inputs text/number. */
.mam-listing-filters__field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: var(--sp-6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    background-size: 12px 8px;
}

.mam-listing-filters__field input:focus,
.mam-listing-filters__field select:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* Filtre type MULTI-SELECT (retour cliente 09/07) : liste deroulante a cases a
   cocher, stylee comme un <select> (meme hauteur/bordure/chevron). */
.mam-filter__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    color: var(--c-stone-600);
    font-weight: var(--fw-semibold);
}
.mam-filter-type-multi {
    position: relative;
}
.mam-filter-type-multi__summary {
    list-style: none;
    height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-6) 0 var(--sp-3);
    background: var(--c-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right var(--sp-3) center;
    background-size: 12px 8px;
    border: 1px solid var(--color-hairline);
    font-size: var(--fs-md);
    line-height: 1.2;
    color: inherit;
    cursor: pointer;
}
.mam-filter-type-multi__summary::-webkit-details-marker { display: none; }
.mam-filter-type-multi__summary:focus-visible { outline: none; border-color: var(--color-accent); }
.mam-filter-type-multi[open] .mam-filter-type-multi__summary { border-color: var(--color-accent); }
.mam-filter-type-multi__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-3);
    background: var(--c-paper);
    border: 1px solid var(--color-hairline);
    box-shadow: 0 12px 32px -12px rgba(10, 10, 10, .22);
}
.mam-filter-type-multi__opt {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
}
/* Override de la regle .mam-listing-filters__field input {height:44px} pour les
   cases a cocher du panneau. */
.mam-filter-type-multi__opt input[type="checkbox"] {
    height: auto;
    width: auto;
    padding: 0;
    margin: 0;
    border: 1px solid var(--c-stone-400);
    accent-color: var(--color-accent);
    flex: 0 0 auto;
}

.mam-listing-filters__range {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.mam-listing-filters__range input {
    flex: 1;
    width: 0;
    min-width: 0;
}

.mam-listing-filters__range span {
    color: var(--color-text-muted);
}

.mam-listing-filters__actions {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* Groupe boutons a droite (push to right via justify-content space-between
   sur le conteneur). Sans active-filters a gauche, les boutons sont
   aussi a droite (margin-left: auto sur le groupe). */
.mam-listing-filters__actions-buttons {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
}

.mam-listing-filters__actions .mam-btn {
    height: 44px;
    padding: 0 var(--sp-5);
    justify-content: center;
    min-width: 160px;
}

/* Bloc filtres actifs (count + chips) dans la ligne actions du form.
   Sur desktop : a gauche, sur la meme ligne que les boutons. */
.mam-listing-filters__actions .mam-listing-active-filters {
    flex: 1 1 auto;
    padding: 0;
    border: none;
    margin: 0;
    background: transparent;
}

/* Reinitialiser : style text-link plus discret que le FILTRER principal.
   Sans border, sans background, juste underline au hover. */
.mam-listing-filters__actions .mam-btn--ghost {
    min-width: auto;
    padding: 0 var(--sp-3);
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
}

.mam-listing-filters__actions .mam-btn--ghost:hover,
.mam-listing-filters__actions .mam-btn--ghost:focus {
    background: transparent;
    color: var(--c-ink);
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 720px) {
    .mam-listing-filters {
        grid-template-columns: 1fr;
        padding: var(--sp-4);
    }
}

/* =====================================================================
   Agence map - iframe Google Maps simple (CdC 1.4.9.7).
   ===================================================================== */
.mam-agence__map-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--c-mineral);
    margin-top: var(--sp-5);
    overflow: hidden;
}
.mam-agence__map-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (max-width: 720px) {
    .mam-agence__map-wrap { aspect-ratio: 4 / 3; }
}

/* =====================================================================
   Dept grid - maillage interne par departement (CdC 1.4.8).
   Utilise sur archive realisations notamment.
   ===================================================================== */
.mam-dept-grid {
    list-style: none;
    padding: 0;
    margin: var(--sp-5) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3);
}
.mam-dept-grid__item { margin: 0; }
.mam-dept-grid__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--c-paper);
    border: 1px solid var(--color-hairline);
    color: var(--c-ink);
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease;
}
.mam-dept-grid__link:hover {
    border-color: var(--c-ink);
    transform: translateY(-1px);
}
.mam-dept-grid__media {
    flex: 0 0 64px;
    height: 64px;
    overflow: hidden;
    background: var(--c-mineral);
    border-radius: 2px;
}
.mam-dept-grid__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mam-dept-grid__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.mam-dept-grid__code {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: .06em;
}
.mam-dept-grid__name {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-ink);
}

/* =====================================================================
   Realisation gallery - galerie photo asymetrique pour fiche realisation
   (CdC 1.4.9). Layout grid responsive : 2 cols desktop, 1 col mobile.
   ===================================================================== */
.mam-realisation-gallery {
    margin-top: var(--sp-5);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    /* Note : padding-inline + max-width retires (audit H7 visuel).
       Le parent .mam-container gere deja les contraintes horizontales. */
}
.mam-realisation-gallery__item {
    margin: 0;
    position: relative;
    background: var(--c-mineral);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.mam-realisation-gallery__item:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}
.mam-realisation-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms ease;
}
.mam-realisation-gallery__item:hover .mam-realisation-gallery__img {
    transform: scale(1.02);
}
@media (max-width: 720px) {
    .mam-realisation-gallery {
        grid-template-columns: 1fr;
    }
    .mam-realisation-gallery__item:first-child {
        aspect-ratio: 4 / 3;
    }
}

/* =====================================================================
   Avis card - rendu d'un temoignage client (CdC 1.4.9).
   Utilise sur fiche realisation, agence, home, etc.
   ===================================================================== */
.mam-avis-card {
    margin: 0;
    padding: var(--sp-6) var(--sp-5);
    background: var(--c-paper);
    border-left: 3px solid var(--color-accent);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.mam-avis-card__stars {
    display: flex;
    gap: 2px;
    font-size: var(--fs-lg);
    line-height: 1;
}
.mam-avis-card__star { color: #CBC8C1; } /* etoile vide : gris clair discret (--c-line n'existait pas -> noir herite, retour cliente 10/07) */
.mam-avis-card__star.is-filled { color: #f4a300; }

.mam-avis-card__verbatim {
    margin: 0;
    padding: 0;
    border: 0;
}
.mam-avis-card__verbatim p {
    margin: 0;
    font-family: var(--font-display, var(--font-serif));
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--c-ink);
    font-style: italic;
}
/* Echappements unicode (charset-independant : evite "A«" si la CSS est lue en latin-1). */
.mam-avis-card__verbatim p::before { content: "\00AB\00A0"; }
.mam-avis-card__verbatim p::after  { content: "\00A0\00BB"; }

.mam-avis-card__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.mam-avis-card__auteur {
    font-weight: 600;
    color: var(--c-ink);
    font-style: normal;
}
.mam-avis-card__ville::before { content: "\00B7"; margin-right: var(--sp-2); }
.mam-avis-card__date::before { content: "\00B7"; margin-right: var(--sp-2); }
/* Photo optionnelle de la realisation : bandeau paysage en HAUT de la carte,
   en pleine largeur (coiffe). On annule le padding haut de la carte (fiable)
   et on deborde le padding horizontal ; l'espace vers les etoiles vient du
   gap flex de la carte. */
.mam-avis-card.has-media {
    padding-top: 0;
}
.mam-avis-card__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--c-surface-2, rgba(0,0,0,.04));
    margin: 0 calc(-1 * var(--sp-5)) 0;
}
.mam-avis-card__media-trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}
.mam-avis-card__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.mam-avis-card__media-trigger:hover .mam-avis-card__media-img,
.mam-avis-card__media-trigger:focus-visible .mam-avis-card__media-img {
    transform: scale(1.04);
}

/* =====================================================================
   Prestations programme - liste equipements/finitions (demande Amelie).
   2 colonnes responsive, puce fuchsia discrete.
   ===================================================================== */
.mam-annonce__prestations-list {
    list-style: none;
    margin: var(--sp-5) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-2) var(--sp-6);
}
.mam-annonce__prestations-list li {
    position: relative;
    padding-left: var(--sp-4);
    padding-block: var(--sp-1);
    border-bottom: 1px solid var(--color-hairline);
    line-height: 1.4;
}
.mam-annonce__prestations-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* =====================================================================
   Lots table - affichage des lots disponibles sur fiche programme
   (CdC 1.4.9.5). Table semantique role=table accessible.
   ===================================================================== */
.mam-lots-table {
    margin-top: var(--sp-5);
    border-top: 1px solid var(--color-hairline);
}
.mam-lots-table__head,
.mam-lots-table__row {
    display: grid;
    /* Typologie | Surface | Prix | Action. Affichage agrege par typologie
       (retour cliente 26/05 : plus de colonne numero de lot ; retour 21/07 :
       plus de colonne Disponibilite - le tableau ne liste que les dispos). */
    grid-template-columns: 0.8fr 1.1fr 1.3fr minmax(170px, auto);
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--color-hairline);
    align-items: center;
}
.mam-lots-table__action {
    justify-self: end;
}
.mam-lots-table__action .mam-btn {
    white-space: nowrap;
}
.mam-lots-table__head {
    background: var(--c-mineral);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
}
.mam-lots-table__row {
    font-size: var(--fs-sm);
}
.mam-lots-table__row strong { font-weight: 600; color: var(--c-ink); }
.mam-lots-table__row em { color: var(--color-text-muted); font-style: italic; }
.mam-lots-table__row--vendu { opacity: 0.55; }
.mam-lots-table__row--vendu strong { text-decoration: line-through; }

/* Mobile : layout cartes au lieu de table grid */
@media (max-width: 720px) {
    .mam-lots-table__head { display: none; }
    .mam-lots-table__row {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
        padding-block: var(--sp-4);
    }
    .mam-lots-table__row > span {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-3);
    }
    .mam-lots-table__row > span::before {
        content: attr(data-label);
        font-size: var(--fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--color-text-muted);
        flex-shrink: 0;
    }
    /* Cellule action : bouton pleine largeur, pas de label fantome. */
    .mam-lots-table__action {
        justify-self: stretch;
        margin-top: var(--sp-2);
    }
    .mam-lots-table__action::before {
        content: none;
    }
    .mam-lots-table__action .mam-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   Filter tabs (pills) - reutilisable pour filtrer un listing par categorie.
   Usage actuel : home.php blog (Tous / Actualites / Conseils).
   ===================================================================== */
.mam-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    padding: var(--sp-1);
    background: var(--c-mineral);
    border-radius: 999px;
    width: max-content;
    max-width: 100%;
}

.mam-filter-tabs__item {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-4);
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-ink-soft);
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
    white-space: nowrap;
}

.mam-filter-tabs__item:hover {
    color: var(--c-ink);
}

.mam-filter-tabs__item.is-active {
    background: var(--c-ink);
    color: var(--c-paper);
}

@media (max-width: 480px) {
    .mam-filter-tabs {
        width: 100%;
        justify-content: stretch;
    }
    .mam-filter-tabs__item {
        flex: 1 1 0;
        justify-content: center;
        padding: var(--sp-2) var(--sp-3);
    }
}