/*
 * templates-variants.css - variantes de templates par CPT/contexte.
 *
 * Couvre :
 *   - .mam-tpl--localisation (construire-maison-*, programmes-immobiliers-*)
 *   - .mam-tpl--annonce (terrain-maison, programme)
 *   - .mam-annonce-strip (bande Reperes sous le hero)
 *
 * Depend de templates-core.css (charge avant).
 */

/* =====================================================================
   Variantes locales : CPT mam_localisation
   (construire-maison-*, programmes-immobiliers-*)
   ===================================================================== */

/* CTA hero locale (CdC §1.4.3 / §1.4.6) : conserve pour compat retro
   mais retire de single-mam_localisation en Phase C (pivot offre-first).
   Les CTA sont desormais delegues a la trust-bar + sticky mobile. */
.mam-locale-hero-cta {
    padding-block: var(--sp-3) var(--sp-5);
}
.mam-locale-hero-cta .mam-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
}
@media (max-width: 520px) {
    .mam-locale-hero-cta .mam-container { flex-direction: column; align-items: stretch; }
    .mam-locale-hero-cta .mam-btn { text-align: center; }
}

/* =====================================================================
   Phase C audit 2026-05 : Marketplace head (offre-first)
   =====================================================================
   Header compact pour les pages d'offre (locales + archives). Objectif :
   permettre a la 1ere row de cards d'etre above-the-fold sur 1440x900.
   - H1 sobre (~32-40px)
   - Stats one-liner (count + fourchette prix)
   - Trust-bar inline (Depuis 1979 · Pole Habitat · etc)
   - Le watermark dept reste actif via la regle .mam-tpl--localisation. */

.mam-marketplace-head {
    padding-block: var(--sp-5) var(--sp-6);
}

.mam-marketplace-head__kicker {
    margin-bottom: var(--sp-3);
}

.mam-marketplace-head__title {
    font-size: clamp(2rem, 3.5vw + 1rem, 3.5rem);
    line-height: 1.05;
    margin-bottom: var(--sp-3);
    max-width: 24ch;
}

/* Intro depliante (audit 2026-05) : details/summary natifs HTML5 sous
   le H1 des marketplace heads. Permet a l'utilisateur de lire la
   presentation editoriale sans encombrer above-the-fold (offre-first). */
.mam-marketplace-head__intro {
    margin: 0 0 var(--sp-4);
    max-width: 72ch;
}
.mam-marketplace-head__intro-toggle {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0;
    margin: var(--sp-3) 0 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--c-stone-200, var(--c-stone-100));
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink);
    padding-bottom: var(--sp-2);
    transition: color 200ms ease, border-color 200ms ease;
    user-select: none;
}
.mam-marketplace-head__intro-toggle::-webkit-details-marker {
    display: none;
}
.mam-marketplace-head__intro-toggle:hover {
    color: var(--color-accent);
    border-color: currentColor;
}
.mam-marketplace-head__intro.is-expanded .mam-marketplace-head__intro-toggle {
    color: var(--color-accent);
    border-color: currentColor;
}
.mam-marketplace-head__intro-toggle-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    transition: transform 250ms ease;
}
.mam-marketplace-head__intro.is-expanded .mam-marketplace-head__intro-toggle-icon {
    transform: rotate(45deg);
}
.mam-marketplace-head__intro-toggle-label-close {
    display: none;
}
.mam-marketplace-head__intro.is-expanded .mam-marketplace-head__intro-toggle-label-open {
    display: none;
}
.mam-marketplace-head__intro.is-expanded .mam-marketplace-head__intro-toggle-label-close {
    display: inline;
}
.mam-marketplace-head__intro-body {
    /* Intro discrete (reunion 06/06) : plus petite et attenuee, le H1 porte. */
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--color-text-muted);
}
/* Apercu clamp 2 lignes max (reunion 06/06), retire par JS au depli. */
.mam-marketplace-head__intro-body.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mam-marketplace-head__intro-body p {
    margin: 0 0 var(--sp-3);
}
.mam-marketplace-head__intro-body p:last-child {
    margin-bottom: 0;
}
@keyframes mam-intro-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mam-marketplace-head__stats {
    font-size: var(--fs-lg);
    line-height: 1.4;
    margin: 0 0 var(--sp-4);
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}

.mam-marketplace-head__stats strong {
    font-weight: 600;
}

.mam-marketplace-head__stats-sep {
    display: inline-block;
    margin: 0 0.4em;
    color: var(--c-stone-400);
}

.mam-trust-bar {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: 0;
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-stone-600);
}

.mam-trust-bar li {
    position: relative;
    padding-right: var(--sp-3);
}

.mam-trust-bar li:not(:last-child)::after {
    content: '\00B7';
    position: absolute;
    right: 0;
    color: var(--c-stone-400);
}

/* Section editoriale deplacee en bas (Phase C). Style sobre, lecture
   confortable, en contraste avec le marketplace head compact. */
.mam-locale-editorial {
    background: var(--c-stone-100);
}

.mam-locale-editorial .mam-kicker {
    margin-bottom: var(--sp-3);
    display: block;
}

.mam-locale-editorial__inner {
    max-width: 65ch;
}

.mam-locale-editorial__inner p {
    font-size: var(--fs-lg);
    line-height: 1.65;
    margin-bottom: var(--sp-4);
}

@media (max-width: 768px) {
    .mam-marketplace-head__title {
        font-size: clamp(1.75rem, 6vw + 0.5rem, 2.25rem);
        max-width: none;
    }
    .mam-marketplace-head__stats {
        font-size: var(--fs-md);
    }
    .mam-trust-bar {
        font-size: 0.6875rem;
    }
}

/* --- Head : marqueur decoratif numero departement ----------------- */

/* On garde le pattern .mam-tpl__head + .mam-container du systeme :
   - .mam-tpl__head : padding-inline clamp gutter
   - .mam-tpl__head > .mam-container : max-width content-wide, padding 0
   Resultat : H1 aligne avec les sections du body (qui utilisent aussi
   .mam-container avec max-width content-wide). */

.mam-tpl--localisation .mam-tpl__head:not(.mam-tpl__head--hero) {
    position: relative;
    /* Note 2026-05 : padding harmonise (sp-4 / sp-5) via la regle
       d'harmonisation above-the-fold plus haut. On ne surcharge plus. */
}

/* Le contenu du head au-dessus du filigrane decoratif */
.mam-tpl--localisation .mam-tpl__head > .mam-container {
    position: relative;
    z-index: 1;
}

/* Filigrane numero dept en accent rose, signature visuelle assumee
   des pages locales (Phase B audit 2026-05). Le numero est gros et
   en debord bottom-right pour creer une ancre territoriale forte
   sans concurrencer le H1 (qui reste a gauche en z-index 1).
   Passe via custom property --mam-dept-code (attr() ne traverse
   pas les ancetres pour content). */
.mam-tpl--localisation .mam-tpl__head:not(.mam-tpl__head--hero)::before {
    content: var(--mam-dept-code, '');
    position: absolute;
    top: 0;
    right: clamp(0.5rem, 3vw, 3rem);
    font-family: var(--font-sans);
    font-size: clamp(9rem, 17vw, 18rem);
    font-weight: 300;
    font-style: italic;
    line-height: 0.82;
    color: var(--color-accent);
    opacity: 0.18;
    letter-spacing: -0.06em;
    pointer-events: none;
    z-index: 0;
    font-variant-numeric: tabular-nums;
    transform: translateY(-8%);
    user-select: none;
}

/* H1 : contraint pour eviter qu'il s'etire et entre en conflit visuel
   avec le filigrane numero dept */
.mam-tpl--localisation .mam-tpl__title {
    max-width: 24ch;
    /* Override le `text-wrap: nowrap` de .mam-tpl__head .mam-tpl__title :
       les H1 villes/piliers sont des phrases curees longues ("Faire
       construire sa maison a X : Maisons Alain Metral vous accompagne").
       En nowrap elles debordent par-dessus le filigrane dept. On autorise
       le wrap : la phrase tient sur 2-3 lignes dans 24ch et degage le "74". */
    text-wrap: balance;
    white-space: normal;
}

.mam-tpl--localisation .mam-tpl__lead {
    max-width: 56ch;
}

/* --- Layout intro : grid 12 cols editorial ----------------------- */

/* Pattern coherent avec .mam-editorial du systeme :
   - col 1-8 : prose intro (~65ch effective, lecture confortable)
   - col 9-12 : aside avec panel Reperes + CTAs (sticky)
   - gap entre col 8 et 9 absorbe l'espace visuel intermediaire */


/* --- Section annonces : grille uniforme cards ---------------------- */

/* Sur les pages localisation, .mam-grid--cards est en auto-fill pour
   gerer elegamment 1-12 annonces sans cases vides disgracieuses. */
.mam-tpl--localisation .mam-grid--cards {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Cas particulier : 1 seule annonce. Au lieu de l'etaler sur toute la
   largeur en auto-fill, on la borne pour qu'elle reste a taille de card. */
.mam-tpl--localisation .mam-grid--cards:has(> :only-child) {
    grid-template-columns: minmax(320px, 480px);
}

.mam-tpl--localisation .mam-section__head {
    align-items: center;
}

/* === Prose : rendu de the_content() avec une typographie respiree === */

.mam-prose > * + * { margin-top: var(--sp-5); }
.mam-prose h2 { margin-top: var(--sp-7); }
/* Harmonisation H3 en fuchsia sur tous les gabarits (demande cliente 24/07 :
   "passer tous les H3 en fuchsia"). Avant, seul le blog (.mam-prose--post)
   passait ses H3 en accent ; les autres proses (realisation, programme,
   annonce, pages instit, locale) heritaient du noir. On aligne au niveau
   .mam-prose pour couvrir tout le contenu editorial. */
.mam-prose h3 { margin-top: var(--sp-6); color: var(--color-accent); }
/* Titres de prose des fiches realisation : reduire la taille. Sans regle propre,
   ils heritaient des h2/h3 globaux (echelle display ~52px), trop gros pour du
   corps d'article (retour cliente 16/07). Scope .mam-realisation__body pour ne
   pas entrer en collision de specificite avec .mam-prose--post / --annonce. */
.mam-realisation__body .mam-prose h2 {
    font-size: clamp(1.6rem, 1.2vw + 1rem, 2.1rem);
    line-height: 1.15;
}
.mam-realisation__body .mam-prose h3 {
    font-size: clamp(1.25rem, 0.6vw + 1rem, 1.5rem);
    line-height: 1.2;
}
.mam-prose p, .mam-prose ul, .mam-prose ol {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
}

/* B12 (revirement cliente 01/07) : la justification demandee au 19/06 (MAM-G1)
   est RETIREE. Les textes editoriaux / SEO / FAQ reviennent en alignement a
   gauche (defaut), plus lisible et sans lezardes (accessibilite). Ne pas
   remettre text-align:justify sans acter avec la cliente. */

/* === Blog : contenu Gutenberg (the_content) aligne sur le design system ===
   La cliente peut poser n'importe quel bloc Gutenberg (titre, liste, citation,
   tableau, details, code, image, bouton...) : ils arrivent avec leur markup
   wp-block-* natif, non style. On les remet ici aux tokens MAM, scope au corps
   d'article (.mam-prose--post). Pas de numerotation de section : un article de
   blog n'est pas une sequence typee (cf. le compteur reserve a --annonce). */

/* Titres : echelle "section d'article", pas display/hero (le H2 sortait a ~91px
   via l'element theme.json). */
.mam-prose--post h2,
.mam-prose--post h2.wp-block-heading {
    margin-top: var(--sp-7);
    margin-bottom: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-stone-200);
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
    font-weight: var(--fw-medium);
    letter-spacing: -0.02em;
    line-height: var(--lh-snug);
}
.mam-prose--post h3,
.mam-prose--post h3.wp-block-heading {
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-3);
    font-family: var(--font-sans);
    font-size: clamp(1.15rem, 0.5vw + 1rem, 1.35rem);
    font-weight: var(--fw-semibold);
    color: var(--color-accent);
    letter-spacing: -0.015em;
    line-height: var(--lh-snug);
}
.mam-prose--post h4,
.mam-prose--post h4.wp-block-heading {
    margin-top: var(--sp-5);
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}

/* Rendu WYSIWYG : le corps d'article suit la taille de l'editeur Gutenberg.
   Pas de lead automatique sur le 1er paragraphe (la cliente ajuste la taille
   au cas par cas via l'editeur si besoin). */

/* Listes. */
.mam-prose--post ul, .mam-prose--post ol { padding-left: 1.3em; }
.mam-prose--post li + li { margin-top: var(--sp-2); }
.mam-prose--post li::marker { color: var(--color-accent); }

/* Citation (wp:quote). */
.mam-prose--post blockquote,
.mam-prose--post .wp-block-quote {
    margin: var(--sp-6) 0;
    padding-left: var(--sp-5);
    border-left: 3px solid var(--color-accent);
    font-size: var(--fs-lg);
    font-style: italic;
    color: var(--color-text);
}
.mam-prose--post blockquote cite,
.mam-prose--post .wp-block-quote cite {
    display: block;
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    font-style: normal;
    color: var(--color-text-muted);
}

/* Citation en exergue (wp:pullquote). */
.mam-prose--post .wp-block-pullquote {
    margin: var(--sp-7) 0;
    padding: var(--sp-6) 0;
    border-top: 2px solid var(--c-ink);
    border-bottom: 2px solid var(--c-ink);
    text-align: center;
}
.mam-prose--post .wp-block-pullquote p {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: -0.02em;
}
.mam-prose--post .wp-block-pullquote cite { color: var(--color-accent); font-size: var(--fs-sm); font-style: normal; }

/* Details / summary (wp:details). */
.mam-prose--post .wp-block-details {
    margin: var(--sp-5) 0;
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-stone-100);
    border-radius: 6px;
}
.mam-prose--post .wp-block-details summary { font-family: var(--font-sans); font-weight: var(--fw-semibold); cursor: pointer; }
.mam-prose--post .wp-block-details > *:not(summary) { margin-top: var(--sp-3); }

/* Code / prefomate (wp:code, wp:preformatted). */
.mam-prose--post .wp-block-code,
.mam-prose--post pre {
    margin: var(--sp-5) 0;
    padding: var(--sp-4);
    background: var(--c-ink);
    color: var(--c-paper);
    border-radius: 6px;
    overflow-x: auto;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

/* Image + legende (wp:image). */
.mam-prose--post .wp-block-image { margin: var(--sp-6) 0; }
.mam-prose--post .wp-block-image img { height: auto; border-radius: 6px; }
.mam-prose--post figcaption {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-align: center;
}

/* Bouton Gutenberg -> look bouton MAM (wp:button). */
.mam-prose--post .wp-block-button { margin: var(--sp-5) 0; }
.mam-prose--post .wp-block-button__link {
    display: inline-block;
    padding: 0.85em 1.6em;
    background: var(--c-ink);
    color: var(--c-paper);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background .2s ease;
}
.mam-prose--post .wp-block-button__link:hover { background: var(--color-accent); }

/* Separateur (wp:separator). */
.mam-prose--post hr,
.mam-prose--post .wp-block-separator {
    width: 6rem;
    margin: var(--sp-7) auto;
    border: 0;
    border-top: 1px solid var(--c-stone-400);
    opacity: 1;
}

/* Tableau (wp:table). */
.mam-prose--post .wp-block-table { margin: var(--sp-6) 0; overflow-x: auto; }
.mam-prose--post .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.mam-prose--post .wp-block-table th,
.mam-prose--post .wp-block-table td { padding: var(--sp-3); border-bottom: 1px solid var(--c-stone-200); text-align: left; }
.mam-prose--post .wp-block-table th { font-family: var(--font-sans); font-weight: var(--fw-semibold); }

/* Colonnes (wp:columns). */
.mam-prose--post .wp-block-columns { margin: var(--sp-6) 0; gap: var(--sp-5); }

/* === Fiche technique : tableau a 4 cellules par ligne === */

.mam-fiche-tech {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-5) 0;
}

.mam-fiche-tech th,
.mam-fiche-tech td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--color-hairline);
    font-size: var(--fs-sm);
}

.mam-fiche-tech th {
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    font-size: var(--fs-xs);
    width: 25%;
    vertical-align: top;
}

@media (max-width: 600px) {
    .mam-fiche-tech, .mam-fiche-tech tbody, .mam-fiche-tech tr { display: block; }
    .mam-fiche-tech th, .mam-fiche-tech td { display: block; width: 100%; padding: var(--sp-2) 0; border: none; }
    .mam-fiche-tech tr { border-bottom: 1px solid var(--color-hairline); padding: var(--sp-3) 0; }
}

/* === Coordonnees agence : panneau d'infos 4 colonnes (audit 2026-06) ===
   Avant : grille 2 col + lignes horaires/zones pleine largeur => cellules
   quasi vides, effet flottant. Desormais 4 colonnes equilibrees (Adresse /
   Contact / Horaires / Departements) avec un label uniforme par colonne. */

.mam-agence-coords {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-5) var(--sp-6);
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-hairline);
}

@media (max-width: 600px) {
    .mam-agence-coords { grid-template-columns: 1fr 1fr; }
}

.mam-agence-coords__label {
    display: block;
    font-size: var(--fs-xs);
    /* Mail Amelie 19/06 : un peu de fuchsia sur les coordonnees agence
       (adresse / contact / horaires / departements couverts). */
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--sp-2);
}

.mam-agence-coords__address {
    font-style: normal;
    line-height: 1.6;
}

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

.mam-agence-coords__contact a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-hover) var(--ease-editorial), color var(--dur-hover) var(--ease-editorial);
}

.mam-agence-coords__contact a:hover {
    color: var(--color-accent);
    border-bottom-color: currentColor;
}

.mam-agence-coords__phone {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    letter-spacing: -0.01em;
}

.mam-agence-coords__email {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    word-break: break-word;
}

.mam-agence-coords__horaires ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    line-height: 1.5;
}

.mam-agence-coords__zones-links {
    margin: 0;
    line-height: 1.6;
}

.mam-agence-coords__zones-links a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-hairline);
    transition: border-color var(--dur-hover) var(--ease-editorial), color var(--dur-hover) var(--ease-editorial);
}

.mam-agence-coords__zones-links a:hover {
    color: var(--color-accent);
    border-bottom-color: currentColor;
}

/* === Liste des secteurs d'intervention (audit 2026-06) : grille scannable
   au lieu de puces brutes. Secteur en gras + communes en muted. === */
.mam-agence__zones-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-5) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 var(--sp-7);
}

.mam-agence__zones-list li {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--color-hairline);
    line-height: 1.5;
}

.mam-agence__zones-list strong {
    display: block;
    /* Mail Amelie 19/06 : touche fuchsia sur les secteurs d'intervention
       (titre de chaque secteur couvert). */
    color: var(--color-accent);
    margin-bottom: var(--sp-1);
}

.mam-agence__zones-list span {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* === Rythme vertical de la template agence (audit 2026-06) : les sections
   prose consecutives (intro/savoir-faire/zones/conclusion) etaient en
   padding sp-7 => ~128px de vide entre chaque. On resserre. === */
.mam-tpl--agence .mam-agence__intro,
.mam-tpl--agence .mam-agence__savoirfaire,
.mam-tpl--agence .mam-agence__zones,
.mam-tpl--agence .mam-agence__conclusion {
    padding-block: var(--sp-5);
}

/* Corps editorial agence : pleine largeur du container (retour 12/06).
   Le cap a 860px cale a gauche laissait une zone morte a droite, incoherent
   avec les autres pages. */

.mam-tpl--agence .mam-form--agence {
    max-width: none; /* pleine largeur (mam-container ~1360) comme les autres sections de la fiche */
}

/* === Video embed responsive === */

.mam-video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
}

.mam-video-embed iframe,
.mam-video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* === Search results === */

.mam-search-results {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
}

.mam-search-result {
    border-bottom: 1px solid var(--color-hairline);
    padding-bottom: var(--sp-7);
}

.mam-search-result__type {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    margin: 0 0 var(--sp-2);
}

.mam-search-result h2 a {
    color: var(--color-text);
    text-decoration: none;
}

.mam-search-result h2 a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

/* === Searchform === */

.mam-searchform {
    width: 100%;
}

.mam-searchform__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.mam-searchform__row {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--color-hairline);
    background: var(--c-paper-pure);
}

.mam-searchform__input {
    flex: 1;
    padding: var(--sp-4) var(--sp-5);
    background: transparent;
    border: none;
    outline: none;
    font-size: var(--fs-md);
    color: var(--c-ink);
}

.mam-searchform__input::placeholder { color: var(--c-stone-400); }

.mam-searchform__submit {
    border-radius: 0;
    border: none;
    cursor: pointer;
}

/* === 404 === */

.mam-404 .mam-section {
    min-height: 60vh;
    display: grid;
    place-content: center;
}

/* === Maillage interne (pages localisation dept) ===
   Chips editoriaux : pas de border-radius (l'identite MAM est sharp,
   pas pilule moderne). Filet inferieur fin qui s'epaissit au hover,
   eveille au lieu de "decoller" la card. */
.mam-locale-mesh {
    list-style: none;
    margin: var(--sp-5) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0;
    border-top: 1px solid var(--color-hairline);
}
.mam-locale-mesh li {
    margin: 0;
    border-bottom: 1px solid var(--color-hairline);
    border-right: 1px solid var(--color-hairline);
}
/* Suppression de la border-right sur la derniere colonne de chaque ligne
   (impossible en CSS pur avec auto-fill ; on accepte le filet sur le bord). */
.mam-locale-mesh a {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4);
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.2;
    position: relative;
    transition: color var(--dur-hover) var(--ease-editorial),
                background var(--dur-hover) var(--ease-editorial),
                padding-left var(--dur-hover) var(--ease-editorial);
}
/* Fleche subtile a droite, revele au hover */
.mam-locale-mesh a::after {
    content: "\2192";
    margin-left: auto;
    font-family: var(--font-sans);
    font-weight: 300;
    color: var(--color-accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--dur-hover) var(--ease-editorial),
                transform var(--dur-hover) var(--ease-editorial);
}
.mam-locale-mesh a:hover,
.mam-locale-mesh a:focus-visible {
    background: var(--color-bg);
    padding-left: calc(var(--sp-4) + 6px);
    color: var(--color-accent);
    text-decoration: none;
}
.mam-locale-mesh a:hover::after,
.mam-locale-mesh a:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

/* Sur fond --alt (creme), les chips inversent : background blanc, filet
   gris, hover sur le fond creme (le contraste s'inverse). */
.mam-section--alt .mam-locale-mesh a {
    background: transparent;
}
.mam-section--alt .mam-locale-mesh a:hover,
.mam-section--alt .mam-locale-mesh a:focus-visible {
    background: var(--c-paper);
}

/* === Section FAQ locale : aerer le rythme entre questions === */
.mam-tpl--localisation .mam-faq__item {
    border-top: 1px solid var(--color-hairline);
    padding-block: var(--sp-4);
    transition: padding-left var(--dur-hover) var(--ease-editorial);
}
.mam-tpl--localisation .mam-faq__item:last-child {
    border-bottom: 1px solid var(--color-hairline);
}
/* Decalage au survol = affordance pour inviter a ouvrir une question FERMEE.
   Une fois la question ouverte, on retire le decalage (sinon la reponse deja
   affichee "saute" a droite au survol, effet parasite - retour 07/07). */
.mam-tpl--localisation .mam-faq__item:not([open]):hover {
    padding-left: var(--sp-2);
}
.mam-tpl--localisation .mam-faq__item[open] {
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.015) 100%);
}

/* =====================================================================
   Variantes locales : pages annonces (programme + terrain-maison)
   Style editorial magazine : prose lecture confortable (820px),
   typographie hierarchisee avec compteurs CSS, wp:table reformatee
   en fiche technique, wp:gallery en grille editoriale.
   ===================================================================== */

.mam-prose--annonce {
    counter-reset: mam-section;
}

/* --- Typographie prose : hierarchie editoriale claire ------------- */

.mam-prose--annonce > h2.wp-block-heading {
    counter-increment: mam-section;
    position: relative;
    margin-top: var(--sp-7);
    margin-bottom: var(--sp-4);
    padding-top: var(--sp-5);
    border-top: 2px solid var(--c-ink);
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Numero auto avant chaque H2 : 01/02/03... en accent rose, italique */
.mam-prose--annonce > h2.wp-block-heading::before {
    content: counter(mam-section, decimal-leading-zero);
    display: block;
    margin-bottom: var(--sp-3);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.mam-prose--annonce > h3.wp-block-heading {
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-3);
    font-family: var(--font-sans);
    font-size: clamp(1.15rem, 0.5vw + 1rem, 1.35rem);
    font-weight: 500;
    font-style: normal;
    color: var(--color-accent);
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.mam-prose--annonce > p,
.mam-prose--annonce > ul,
.mam-prose--annonce > ol {
    margin-block: var(--sp-4);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    color: var(--color-text);
}

/* Premier paragraphe apres un H2 : taille majoree (lead editorial) */
.mam-prose--annonce > h2 + p {
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--color-text);
}

/* Drop cap : DESACTIVE par defaut sur .mam-prose--annonce.
   Active uniquement dans le bloc INTRO via .mam-block__split-main. */
.mam-prose--annonce > p:first-of-type::first-letter {
    /* no-op */
}

/* --- wp:table : reformate en fiche technique editoriale ----------- */

.mam-prose--annonce .wp-block-table {
    margin-block: var(--sp-6);
}

.mam-prose--annonce .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    border: 0;
    border-top: 2px solid var(--c-ink);
}

/* Reset complet du is-style-stripes natif WP (zebrures laides) */
.mam-prose--annonce .wp-block-table.is-style-stripes,
.mam-prose--annonce .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.mam-prose--annonce .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background: transparent;
    border: 0;
}

.mam-prose--annonce .wp-block-table tr {
    border-bottom: 1px solid var(--color-hairline);
}

.mam-prose--annonce .wp-block-table th,
.mam-prose--annonce .wp-block-table td {
    padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
    text-align: left;
    vertical-align: top;
    border: 0;
    font-size: var(--fs-sm);
}

.mam-prose--annonce .wp-block-table th {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    color: var(--color-text-muted);
    width: 30%;
}

.mam-prose--annonce .wp-block-table td {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 400;
    color: var(--color-text);
    padding-right: var(--sp-5);
}

/* Si plusieurs colonnes (label + value + label + value), garder le rythme */
.mam-prose--annonce .wp-block-table th + td + th {
    border-left: 1px solid var(--color-hairline);
    padding-left: var(--sp-5);
}

/* Mobile : 2 colonnes -> stack vertical pour lisibilite */
@media (max-width: 700px) {
    .mam-prose--annonce .wp-block-table,
    .mam-prose--annonce .wp-block-table table,
    .mam-prose--annonce .wp-block-table tbody,
    .mam-prose--annonce .wp-block-table tr {
        display: block;
        width: 100%;
    }
    .mam-prose--annonce .wp-block-table th,
    .mam-prose--annonce .wp-block-table td {
        display: block;
        width: 100%;
        padding: var(--sp-2) 0;
        border-left: 0 !important;
        padding-left: 0 !important;
    }
    .mam-prose--annonce .wp-block-table th {
        padding-top: var(--sp-4);
    }
    .mam-prose--annonce .wp-block-table tr {
        padding-block: var(--sp-2);
        border-bottom: 1px solid var(--color-hairline);
    }
}

/* --- wp:gallery : grille editoriale au lieu du flex natif --------- */

.mam-prose--annonce .wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    margin-block: var(--sp-6);
    /* Override le flex inline du bloc Gallery natif */
}

.mam-prose--annonce .wp-block-gallery.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.mam-prose--annonce .wp-block-gallery .wp-block-image {
    margin: 0;
    overflow: hidden;
    background: var(--color-bg-alt);
    /* Pas de border-radius : identite MAM = sharp */
}

.mam-prose--annonce .wp-block-gallery .wp-block-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-reveal) var(--ease-editorial);
}

.mam-prose--annonce .wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.03);
}

/* Si une seule image dans la galerie : grille auto-fit borne */
.mam-prose--annonce .wp-block-gallery:has(> .wp-block-image:only-child) {
    grid-template-columns: 1fr;
    max-width: 720px;
}

/* Mobile : toujours 1 colonne */
@media (max-width: 700px) {
    .mam-prose--annonce .wp-block-gallery,
    .mam-prose--annonce .wp-block-gallery.columns-3 {
        grid-template-columns: 1fr;
    }
}

/* --- Images simples (wp:image hors galerie) ---------------------- */

.mam-prose--annonce > .wp-block-image,
.mam-prose--annonce figure.wp-block-image {
    margin-block: var(--sp-6);
}

.mam-prose--annonce .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

.mam-prose--annonce .wp-block-image figcaption {
    margin-top: var(--sp-3);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--color-text-muted);
    text-align: left;
}

/* --- Listes : styling editorial -------------------------------- */

.mam-prose--annonce > ul,
.mam-prose--annonce > ol {
    padding-left: var(--sp-5);
}

.mam-prose--annonce > ul li,
.mam-prose--annonce > ol li {
    margin-top: var(--sp-2);
    line-height: var(--lh-loose);
}

/* Bullets fuchsia */
.mam-prose--annonce > ul li::marker {
    color: var(--color-accent);
}

/* --- Citations et separateurs ---------------------------------- */

.mam-prose--annonce blockquote {
    margin-block: var(--sp-6);
    padding-left: var(--sp-5);
    border-left: 2px solid var(--color-accent);
    font-family: var(--font-sans);
    font-style: italic;
    font-size: var(--fs-lg);
    line-height: 1.45;
    color: var(--color-text);
}

.mam-prose--annonce hr.wp-block-separator {
    margin-block: var(--sp-7);
    border: 0;
    border-top: 1px solid var(--color-hairline);
}

/* (Style ribbon hero unifie dans .mam-tpl__hero .mam-ribbon--hero) */

/* =====================================================================
   Variante annonce : layout en BLOCS DIVERSIFIES (CdC §1.4.9.5)
   Detection par titre H2 -> rendu different par bloc :
     * mam-block--intro     : split 5-7 (numero XL + H2 / prose drop cap)
     * mam-block--tech-stats: grid cards STAT (donnees SCF, fond ink)
     * mam-block--gallery   : gallery extraite, asymetrique full-bleed
     * mam-block--context   : prose centree style edito magazine
     * mam-block--features  : grid 2-3 cards par H3+P (par sous-section)
     * mam-block--steps     : timeline horizontale 4-5 etapes
     * mam-block--prose     : prose alternance (default/alt)
     * mam-block--video     : embed YouTube/Vimeo plein largeur
     * mam-block--maillage  : grid 3 cards autres programmes
   ===================================================================== */

/* --- Head price row : prix + bouton brochure cote a cote ---------- */

.mam-tpl--annonce .mam-tpl__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-hairline);
}

.mam-tpl--annonce .mam-tpl__price-row .mam-tpl__price {
    margin: 0;
    padding: 0;
    border: 0;
}

.mam-tpl--annonce .mam-tpl__brochure {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-accent);
    color: var(--c-paper);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    font-weight: var(--fw-semibold);
    border: 1px solid var(--color-accent);
    text-decoration: none;
    transition: background var(--dur-hover) var(--ease-editorial),
                color var(--dur-hover) var(--ease-editorial);
}

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

.mam-tpl--annonce .mam-tpl__brochure svg {
    flex-shrink: 0;
}

/* Si pas de prix (juste CTA brochure) -> pas de border-top, align right */
.mam-tpl--annonce .mam-tpl__price-row--cta-only {
    justify-content: flex-start;
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: var(--sp-5);
}

/* --- Strip Reperes : SUPPRIMEE (CR 11/06) -------------------------- */
/* La bande .mam-annonce-strip sous le hero est remplacee par la grille
   .mam-annonce__hero-reperes integree a la colonne meta du hero scinde
   (voir section .mam-tpl--annonce plus bas). Les classes __item/__label/
   __value sont conservees dans le markup et stylees UNIQUEMENT sous le
   scope .mam-annonce__hero-reperes. */

/* (Regles "continuite head -> strip" et price-row supprimees avec la strip :
   le head annonce reprend le padding standard de templates-core.) */

/* =====================================================================
   .mam-tpl--realisation - fiche realisation, posture editoriale magazine
   d'architecture (refonte 2026-05 audit visuel).
   =====================================================================

   Structure :
   - Hero immersif full-viewport (overlay text bas-gauche)
   - Spec sheet strip (annee, surface, ...)
   - Sticky nav laterale desktop (scroll-spy)
   - Chapitre 01 : Le projet (layout 2 cols aside sticky + prose)
   - Chapitre 02 : Galerie asymetrique
   - Chapitre 03 : Temoignage pull-quote pleine largeur fond ink
   - Chapitre 04 : Realisations similaires
   - CTA final dedie (Voir annonces + Construire ma maison)
   ===================================================================== */

/* Token local : numero dept en filigrane (transmis via custom property
   inline sur <main>) - reuse pattern .mam-tpl--localisation. */
.mam-tpl--realisation {
    /* Gouttiere gauche des blocs texte du "Projet" : indente la prose pour
       l'equilibre magazine (le texte n'est pas colle au bord gauche). */
    --realisation-aside-w: 14rem;
    --realisation-hero-h: clamp(560px, 78vh, 760px);
    /* Audit 2026-05 : on laisse les feature-settings par defaut.
       Le bug "A` l'interieur" venait du doublon @font-face entre
       typography.css et theme.json (fontFamilies). theme.json est
       maintenant la SOT (Font Library WordPress 7.0). */
    --realisation-feature-fix: normal;
}

/* Fil d'Ariane realisation : sorti du hero (reunion 06/06) -> bande neutre
   "case (b)" (texte fonce, templates-core.css). Plus d'override clair. */

/* --- HERO IMMERSIF FULL-VIEWPORT --- */

.mam-realisation__hero {
    position: relative;
    min-height: var(--realisation-hero-h);
    padding: 0;
    background: var(--c-ink);
    color: var(--c-paper);
    overflow: hidden;
}

/* Image full-bleed en absolute pour permettre overlay text. */
.mam-tpl--realisation .mam-tpl__hero,
.mam-realisation__hero-media {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 0;
}

.mam-realisation__hero-img,
.mam-tpl--realisation .mam-tpl__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Ken Burns subtle au load */
    animation: mam-realisation-kenburns 14s ease-out forwards;
    transform-origin: 60% 40%;
}

/* Override .mam-tpl__hero::after du core (gradient bottom) pour creer
   un gradient bien plus profond, lisible derriere l'overlay text. */
.mam-tpl--realisation .mam-tpl__hero::after,
.mam-realisation__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Scrim renforce en haut (2026-06) : lisibilite fil d'Ariane + eyebrow clairs
       sans text-shadow, y compris sur image claire / placeholder. */
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0.18) 13%, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, 0) 52%, rgba(10, 10, 10, 0.78) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Tres grands ecrans (reunions 03/06 + 06/06) : l'image hero ne doit pas
   s'etirer en full-bleed. Capee a 1680px centree, bords fondus dans le noir
   du hero via masque lateral. (Ne concerne plus les annonces : leur hero est
   scinde a ratio fixe depuis le CR 11/06.) */
@media (min-width: 1600px) {
    .mam-tpl--realisation .mam-tpl__hero,
    .mam-realisation__hero-media {
        left: 50%;
        right: auto;
        width: min(100%, 1680px);
        transform: translateX(-50%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
    }
}

@keyframes mam-realisation-kenburns {
    from { transform: scale(1.08); }
    to   { transform: scale(1.00); }
}

/* Shell d'overlay text : positionne par-dessus l'image. */
.mam-realisation__hero-shell {
    position: relative;
    z-index: 2;
    min-height: var(--realisation-hero-h);
    display: grid;
    /* Rangee 1fr vide en tete -> pousse meta ET scroll-hint sur la rangee du bas
       (retour cliente 10/07 : meta au niveau du "Decouvrir"). 2 colonnes : meta a
       gauche, scroll-hint a droite. */
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr auto;
    padding-block: var(--sp-4) var(--sp-6);
    margin-top: 0 !important;       /* override core .mam-tpl__head--hero .mam-container { margin-top: sp-5 } */
}


.mam-realisation__hero-meta {
    grid-row: 2;
    grid-column: 1;
    align-self: end;
    /* Elargi (reunion 03/06) : le H1 est une phrase descriptive longue, pas un
       nom court. A 32ch la colonne etait trop etroite -> 4-6 lignes avec une
       spec qui retombait seule. ~36rem laisse la phrase respirer sur 2-3 lignes,
       le max-width du H1 (.mam-realisation__title) prend le relais a l'interieur. */
    max-width: 36rem;
    /* Drop in animation */
    animation: mam-realisation-rise 1.2s var(--ease-luxury, cubic-bezier(0.53, 0.15, 0, 1)) 0.2s both;
}

@keyframes mam-realisation-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Logo programme (retour cliente 09/07) : les fichiers logo fournis sont deja un
   logo sur carre blanc -> on affiche l'image telle quelle, SANS fond ni padding
   ajoutes (qui la compresseraient encore), a une taille lisible. */
.mam-realisation__logo {
    display: block;
    max-width: 60%;
    max-height: 90px;
    width: auto;
    margin: 0 0 var(--sp-4);
    object-fit: contain;
}

/* Horaires agence deplaces au-dessus du formulaire (retour cliente 09/07). */
.mam-agence__form-horaires {
    margin-bottom: var(--sp-5);
}
.mam-agence__form-horaires-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-2) 0 0;
}
.mam-agence__form-horaires-list li {
    font-size: var(--fs-md);
    line-height: 1.6;
}

.mam-realisation__kicker {
    color: rgba(250, 249, 245, 0.78);
    margin-bottom: var(--sp-3);
    font-feature-settings: var(--realisation-feature-fix);
}

.mam-realisation__kicker .mam-kicker__rule {
    background: rgba(250, 249, 245, 0.4);
}

/* H1 hero magazine. Reunion 03/06 : le H1 affiche desormais la phrase
   descriptive CUREE (mam_h1_seo), VISIBLE (plus de sr-only). Le nom court du
   projet passe en eyebrow (.mam-realisation__title-name) au-dessus. Taille
   ajustee : une phrase, pas un nom de 2 mots. */
.mam-realisation__title-name {
    display: block;
    font-family: var(--font-sans);
    font-size: clamp(0.875rem, 0.3vw + 0.75rem, 1.0625rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-paper);
    margin: 0 0 var(--sp-2);
}
.mam-realisation__title {
    /* H1 = phrase descriptive curee (mam_h1_seo), pas un nom court : on la
       traite comme une PHRASE, pas comme un gros titre hero. Reunion 03/06 :
       a 3.4rem dans 22ch elle se cassait en ~6 lignes (coupant une spec en
       deux). Taille reduite (~2-2.4rem) + largeur elargie (32ch) => lecture
       sur 2-3 lignes, sobre, sans coupure disgracieuse. */
    font-size: clamp(1.5rem, 1.4vw + 0.7rem, 2.4rem) !important;
    font-weight: 500;
    font-variation-settings: "wght" 480, "wdth" 96;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--c-paper);
    margin: 0 0 var(--sp-3);
    max-width: 32ch;
    text-wrap: balance !important;
    white-space: normal !important;
    font-feature-settings: var(--realisation-feature-fix);
}
.mam-realisation__title-main {
    display: block;
}

.mam-realisation__hero-subtitle {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(0.875rem, 0.3vw + 0.75rem, 1.0625rem);
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(250, 249, 245, 0.78);
    font-weight: 500;
    font-feature-settings: var(--realisation-feature-fix);
    /* Limite de wrap pour eviter ligne tres longue sur grands ecrans */
    max-width: 50ch;
}

@media (max-width: 600px) {
    .mam-realisation__title {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
        letter-spacing: -0.03em;
    }
    .mam-realisation__hero-subtitle {
        font-size: 0.75rem;
        letter-spacing: 0.06em;
    }
}

.mam-realisation__hero-location {
    margin: 0;
    font-size: var(--fs-md);
    letter-spacing: 0.01em;
    color: rgba(250, 249, 245, 0.85);
    font-feature-settings: var(--realisation-feature-fix);
}

/* Scroll hint : ligne verticale + label "Decouvrir" en bas */
.mam-realisation__scroll-hint {
    grid-row: 2;
    grid-column: 2;
    align-self: end;
    justify-self: end;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
    color: rgba(250, 249, 245, 0.7);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: color 250ms ease;
    padding: var(--sp-3) var(--sp-2);
}
.mam-realisation__scroll-hint:hover {
    color: var(--c-paper);
}
.mam-realisation__scroll-line {
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, rgba(250, 249, 245, 0.7) 0%, rgba(250, 249, 245, 0.1) 100%);
    animation: mam-realisation-scrollpulse 2.2s ease-in-out infinite;
    transform-origin: top;
}
@keyframes mam-realisation-scrollpulse {
    0%, 100% { transform: scaleY(1);   opacity: 0.7; }
    50%      { transform: scaleY(0.4); opacity: 0.3; }
}

/* --- SPEC SHEET STRIP --- */

.mam-realisation__specs {
    padding-block: var(--sp-5) var(--sp-5);
    border-bottom: 1px solid var(--c-stone-100);
    background: var(--c-paper);
}

.mam-realisation__specs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Audit visuel : minimum 160px, max 1fr. Particularites prend toute
       la 2eme rangee (--wide span all) pour eviter wrap horrible. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
}

.mam-realisation__spec {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding-right: var(--sp-4);
    border-right: 1px solid var(--c-stone-100);
    font-feature-settings: var(--realisation-feature-fix);
    /* Permet d'avoir un value qui wrap proprement */
    min-width: 0;
}
.mam-realisation__spec:last-child { border-right: 0; }
.mam-realisation__spec--wide {
    grid-column: 1 / -1;
    border-right: 0;
    padding-right: 0;
    padding-top: var(--sp-4);
    margin-top: var(--sp-2);
    border-top: 1px solid var(--c-stone-100);
}
.mam-realisation__spec--wide .mam-realisation__spec-value {
    /* Particularites en mode horizontal flow plutot que big number */
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
}

.mam-realisation__spec-label {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-stone-500, #908d83);
    font-weight: 500;
}

.mam-realisation__spec-value {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 1.5vw + 0.5rem, 1.875rem);
    font-weight: 400;
    line-height: 1;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}

.mam-realisation__spec-value--small {
    font-size: clamp(1rem, 0.75vw + 0.5rem, 1.125rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
}

@media (max-width: 720px) {
    .mam-realisation__specs-list {
        grid-template-columns: 1fr 1fr;
    }
    .mam-realisation__spec {
        border-right: 0;
        border-bottom: 1px solid var(--c-stone-100);
        padding-right: 0;
        padding-bottom: var(--sp-3);
    }
    .mam-realisation__spec:last-child {
        border-bottom: 0;
    }
    .mam-realisation__spec--wide { grid-column: span 2; }
}

/* --- STICKY NAV LATERALE --- */

.mam-realisation__nav {
    position: fixed;
    /* Position fixe etroite pour ne PAS overlap l'aside chapter
       (qui demarre a x=93). La nav doit rester sous 80px de largeur
       max (numbers only, label en tooltip absolute a droite). */
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms ease;
    padding: var(--sp-3) 4px;
}
.mam-realisation__nav.is-visible {
    opacity: 1;
    pointer-events: auto;
}
/* Sur section ink (temoignage) : adapter le contraste */
.mam-realisation__nav.is-on-dark a {
    color: rgba(250, 249, 245, 0.4);
}
.mam-realisation__nav.is-on-dark a:hover,
.mam-realisation__nav.is-on-dark a.is-active {
    color: var(--c-paper);
}
.mam-realisation__nav.is-on-dark .mam-realisation__nav-label {
    background: rgba(10, 10, 10, 0.85);
    color: var(--c-paper);
    border-color: rgba(250, 249, 245, 0.15);
}
.mam-realisation__nav.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.mam-realisation__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.mam-realisation__nav a {
    display: block;
    color: var(--c-stone-400, #a8a59c);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 0;
    transition: color 200ms ease;
    position: relative;
    font-feature-settings: var(--realisation-feature-fix);
    font-variant-numeric: tabular-nums;
    /* Numero seul - largeur fixe pour ne pas overflow */
    width: 22px;
}
.mam-realisation__nav-num {
    transition: opacity 200ms ease;
    opacity: 0.7;
}
/* Label en tooltip floating absolute, ne pousse pas la largeur nav. */
.mam-realisation__nav-label {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: rgba(250, 249, 245, 0.95);
    color: var(--c-ink);
    padding: 6px 10px;
    border-radius: 2px;
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    border: 1px solid rgba(10, 10, 10, 0.08);
    box-shadow: 0 4px 12px rgba(10, 10, 10, 0.08);
}
/* Petite ligne decorative qui passe a fuchsia sur active */
.mam-realisation__nav a::before {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    width: 4px;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: transform 250ms ease, background 200ms ease;
}
.mam-realisation__nav a:hover,
.mam-realisation__nav a.is-active {
    color: var(--c-ink);
}
.mam-realisation__nav a:hover .mam-realisation__nav-num,
.mam-realisation__nav a.is-active .mam-realisation__nav-num {
    opacity: 1;
}
.mam-realisation__nav a:hover .mam-realisation__nav-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.mam-realisation__nav a.is-active::before {
    transform: translateY(-50%) scaleX(1);
    background: var(--color-accent);
    width: 8px;
}
.mam-realisation__nav a.is-active {
    color: var(--color-accent);
}

/* Cacher la nav sur viewports etroits. Apparait des 1280px (laptops
   13/14" standard) pour donner une experience magazine sur le plus
   grand nombre. */
@media (max-width: 1280px) {
    .mam-realisation__nav { display: none; }
}

/* --- CHAPITRE 01 : LE PROJET (layout 2 cols aside sticky + prose) ---
   Rythme magazine : grandes respirations entre sections (--sp-8 = 104px). */

.mam-realisation__chapter {
    padding-block: var(--sp-7) var(--sp-8);
}

/* Blocs texte du "Projet" : grille gouttiere gauche + prose. La gouttiere
   (aside, desormais vide - plus de numeros 01/02) indente le texte pour
   l'equilibre magazine (retour cliente 07/07 : texte colle a gauche = "desaxe"). */
.mam-realisation__chapter-shell {
    display: grid;
    grid-template-columns: var(--realisation-aside-w) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}

/* Le 1er element de la colonne texte n'a pas de margin-top parasite
   (.mam-prose pose un margin-top generique sur les h2). */
.mam-realisation__chapter-main > :first-child {
    margin-top: 0;
}

/* Kicker de section unifie (07/07) : plus de marqueurs numerotes. Meme
   langage visuel que .mam-realisation__edito-kicker (tiret fuchsia + label
   uppercase), reutilisable hors .mam-prose (galerie, temoignage, similaires). */
.mam-realisation__section-kicker {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1.3;
    margin: 0 0 var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap; /* meme protection anti-debordement que l'edito-kicker (cf. plus bas) */
}
.mam-realisation__section-kicker::before {
    content: "";
    width: 40px;
    height: 1px;
    background: var(--color-accent);
    flex-shrink: 0;
}
/* Section temoignage (fond mineral clair, contenu centre) : kicker centre. */
.mam-realisation__quote-section .mam-realisation__section-kicker {
    justify-content: center;
}
/* Variante temoignage + video : layout 2 colonnes aligne a gauche. */
.mam-realisation__quote-section--with-video .mam-realisation__section-kicker {
    justify-content: flex-start;
}

/* Main prose colonne. Largeur etendue (audit 2026-05) : 72ch au lieu
   de 64ch pour reduire l'espace mort a droite sur grands ecrans. */
.mam-realisation__chapter-main {
    max-width: 72ch;
}

/* Chapitres avec image (texte + photo) : on leve le cap 72ch, sinon l'image
   (colonne ~40%) devient minuscule et laisse un grand vide a droite (retour
   cliente 07/07). Le texte reste borne par sa propre colonne (grid + edito). */
.mam-realisation__chapter-main:has(.mam-realisation__edito--media-right),
.mam-realisation__chapter-main:has(.mam-realisation__edito--media-left) {
    max-width: none;
}

.mam-realisation__chapter-main > * + * {
    margin-top: var(--sp-5);
}

/* H2 explicite par section narrative (DOCX 2026-05) :
   "Le projet en quelques mots", "Les caracteristiques de la maison",
   "Notre accompagnement". Etiquette eclatante avec rule decorative
   pour matcher la posture magazine. */
.mam-realisation__section-title {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 1.5vw + 0.75rem, 2rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--c-ink);
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-stone-100);
    text-wrap: balance;
}

/* Sous-titre editorial sous le H2 (ex sur LYRA : "Villa Contemporaine
   d'exception avec vue lac"). Stylise comme un lead. */
.mam-realisation__accroche-titre {
    font-family: var(--font-sans);
    font-size: clamp(1.125rem, 0.5vw + 0.875rem, 1.375rem);
    font-weight: 500;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--color-accent);
    margin: 0 0 var(--sp-3);
    text-wrap: balance;
}

.mam-realisation__accroche-corps {
    font-family: var(--font-sans);
    font-size: clamp(1.0625rem, 0.4vw + 0.875rem, 1.25rem);
    line-height: 1.55;
    color: var(--c-ink-soft, #171717);
    margin: 0;
}
/* Lettrine retiree (CR 11/06) : a 1.8em elle etait trop petite pour une
   vraie drop cap et creait un trou avec la 2e ligne. */

/* ===== Gabarit EDITO commun aux 3 blocs texte du Projet (CR 11/06) =====
   kicker (h2 style kicker) + texte normal + option image 2 colonnes
   (--media-right / --media-left). Remplace les 3 mises en page distinctes
   (titre lourd + carac spec-sheet + bande accompagnement). */
.mam-prose .mam-realisation__edito-kicker {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1.3;
    margin: 0 0 var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    /* flex-wrap: le numero + le libelle + le tiret sont des items flex ;
       sur un titre long en colonne etroite (mobile), le nowrap par defaut
       empechait le libelle de se casser -> il debordait la colonne et
       provoquait un scroll horizontal de toute la page (retour cliente 22/07,
       "la page realisation s'etire sur les cotes en mobile"). */
    flex-wrap: wrap;
}
/* Tiret fuchsia avant le label (passe 12/06) : meme langage que les kickers
   numerotes de l'accueil et des annonces, remplace le filet bas. */
.mam-prose .mam-realisation__edito-kicker::before {
    content: "";
    width: 40px;
    height: 1px;
    background: var(--color-accent);
    flex-shrink: 0;
}

.mam-realisation__edito--media-right,
.mam-realisation__edito--media-left {
    display: grid;
    gap: var(--sp-6);
    align-items: center;
}
.mam-realisation__edito--media-right { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.mam-realisation__edito--media-left  { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

.mam-realisation__edito-text {
    min-width: 0;
}

/* Texte seul (pas de colonnes) : mesure de lecture bornee, les lignes de
   ~1100px etaient trop longues (passe 12/06). */
.mam-realisation__edito:not(.mam-realisation__edito--media-right):not(.mam-realisation__edito--media-left) .mam-realisation__edito-text {
    max-width: 70ch;
}

.mam-realisation__edito-media {
    margin: 0;
    min-width: 0;
}
.mam-realisation__edito-media-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Corps en <div> (accompagnement, contenu wpautop) : memes styles de texte
   que les <p> accroche, paragraphes internes normalises. */
div.mam-realisation__accroche-corps p {
    font: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0 0 var(--sp-3);
}
div.mam-realisation__accroche-corps p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .mam-realisation__edito--media-right,
    .mam-realisation__edito--media-left {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
    /* Mobile : toujours texte d'abord, image dessous. */
    .mam-realisation__edito--media-left .mam-realisation__edito-media {
        order: 2;
    }
}

.mam-realisation__carac-points {
    list-style: none;
    margin: 0 0 var(--sp-5);
    padding: 0;
    display: grid;
    gap: 0;
}

.mam-realisation__carac-point {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--sp-3);
    padding-block: var(--sp-3);
    border-top: 1px solid var(--c-stone-100);
    font-feature-settings: var(--realisation-feature-fix);
}
.mam-realisation__carac-point:last-child {
    border-bottom: 1px solid var(--c-stone-100);
}

.mam-realisation__carac-point-num {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
    font-weight: 500;
    padding-top: 4px;
}

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

.mam-realisation__carac-point-titre {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: -0.005em;
}

.mam-realisation__carac-point-desc {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--c-ink-soft, #171717);
}

/* (Anciennes mises en page carac--cols / carac-media / accompagnement--band
   supprimees le 11/06 : remplacees par le gabarit edito ci-dessus.) */

@media (max-width: 960px) {
    /* Mobile : plus de gouttiere, prose pleine largeur. */
    .mam-realisation__chapter-shell {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
    /* Items de grille : autoriser le retrecissement sous leur largeur
       min-content (le defaut min-width:auto empechait la colonne de passer
       sous ~403px -> debordement horizontal de la page sur petits ecrans,
       retour cliente 22/07 verifie a 390px). */
    .mam-realisation__chapter-main,
    .mam-realisation__chapter-aside {
        min-width: 0;
    }
    .mam-realisation__chapter {
        padding-block: var(--sp-6) var(--sp-6);
    }
}

/* --- VIDEO SECTION (optionnelle) - chapitre intermediaire encadre --- */
.mam-realisation__video-section {
    padding-block: var(--sp-6) var(--sp-8);
}
.mam-realisation__video-head {
    max-width: 56ch;
    margin: 0 auto var(--sp-5);
    text-align: center;
}
.mam-realisation__video-kicker {
    margin: 0 0 var(--sp-2);
    justify-content: center;
}

/* Numerotation des sections (retour cliente 09/07) : 01, 02, 03... A GAUCHE du
   kicker. Le compteur s'incremente sur chaque kicker present dans le body (une
   section = un kicker), en ordre d'affichage. Le ::before est le 1er element de
   l'inline-flex du kicker -> le numero se place naturellement a gauche du tiret
   et du libelle. Couvre toutes les sections : Le projet, Galerie, Caracteristiques,
   Video, Accompagnement, Temoignage, "A decouvrir" (maillage), "Votre projet" (CTA). */
.mam-realisation__body {
    counter-reset: mam-rsec;
}
.mam-realisation__body .mam-kicker {
    counter-increment: mam-rsec;
}
/* Numero (::before) : on annule les dimensions/fond du tiret original et on
   affiche le compteur. order:-2 pour le placer tout a gauche du kicker. */
.mam-realisation__body .mam-kicker::before {
    content: counter(mam-rsec, decimal-leading-zero);
    order: -2;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
/* Trait fuchsia recree en ::after, reordonne juste apres le numero (order:-1) :
   rendu final = "01 —— Libelle". Le gap du .mam-kicker espace les 3 elements. */
.mam-realisation__body .mam-kicker::after {
    content: "";
    order: -1;
    width: 40px;
    height: 1px;
    background: var(--color-accent);
    flex-shrink: 0;
}
/* CTA (fond sombre) : numero + trait en clair pour la lisibilite. */
.mam-realisation__body .mam-realisation__cta-kicker::before {
    color: var(--c-paper);
}
.mam-realisation__body .mam-realisation__cta-kicker::after {
    background: var(--c-paper);
}

/* Numerotation des sections AGENCE + LOCALISATION (harmonisation 10/07) : meme
   modele que realisation ci-dessus (compteur sur chaque kicker du body, numero
   ::before + trait ::after, sur kicker NU -> aucun changement de markup).
   - Le hero est exclu (son kicker .mam-tpl__kicker est dans .mam-tpl__head,
     hors .mam-tpl__body).
   - Le CTA final mutualise (.mam-kicker--on-dark) est exclu -> non numerote,
     comme sur toutes les autres pages ou ce pattern est utilise. */
.mam-tpl--agence .mam-tpl__body,
.mam-tpl--localisation .mam-tpl__body {
    counter-reset: mam-cptsec;
}
.mam-tpl--agence .mam-tpl__body .mam-kicker:not(.mam-kicker--on-dark),
.mam-tpl--localisation .mam-tpl__body .mam-kicker:not(.mam-kicker--on-dark) {
    counter-increment: mam-cptsec;
}
.mam-tpl--agence .mam-tpl__body .mam-kicker:not(.mam-kicker--on-dark)::before,
.mam-tpl--localisation .mam-tpl__body .mam-kicker:not(.mam-kicker--on-dark)::before {
    content: counter(mam-cptsec, decimal-leading-zero);
    order: -2;
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.mam-tpl--agence .mam-tpl__body .mam-kicker:not(.mam-kicker--on-dark)::after,
.mam-tpl--localisation .mam-tpl__body .mam-kicker:not(.mam-kicker--on-dark)::after {
    content: "";
    order: -1;
    width: 40px;
    height: 1px;
    background: var(--color-accent);
    flex-shrink: 0;
}
/* Trait deja present en span sur certains kickers (ex "Avis clients") masque :
   le trait vient desormais du ::after (evite le double trait). */
.mam-tpl--agence .mam-tpl__body .mam-kicker:not(.mam-kicker--on-dark) .mam-kicker__rule,
.mam-tpl--localisation .mam-tpl__body .mam-kicker:not(.mam-kicker--on-dark) .mam-kicker__rule {
    display: none;
}

.mam-realisation__video-title {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 1.8vw + 0.5rem, 2.25rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--c-ink);
    text-wrap: balance;
    font-feature-settings: var(--realisation-feature-fix);
}
.mam-realisation__video-embed {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-ink);
}
/* Variante bornee : evite la video full-bleed trop massive sur grands ecrans. */
.mam-realisation__video-embed--bounded {
    max-width: 1100px;
    margin-inline: auto;
}
.mam-realisation__video-embed iframe,
.mam-realisation__video-embed embed,
.mam-realisation__video-embed object,
.mam-realisation__video-embed video {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}

/* Variante portrait (YouTube Shorts pour video temoignage). */
.mam-realisation__video-embed--portrait {
    aspect-ratio: 9 / 16;
    max-width: 360px;
    margin: 0 auto;
    background: transparent;
}

/* Bloc video temoignage sous le pull-quote (chapitre 03 fond paper). */
.mam-realisation__quote-video {
    position: relative;
    z-index: 1;
    max-width: 64rem;
    margin-top: var(--sp-6);
    text-align: center;
    color: var(--c-stone-600, #6b6960);
}
.mam-realisation__quote-video-label {
    margin: 0 0 var(--sp-3);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-stone-500, #908d83);
    font-weight: 500;
}

/* --- CHAPITRE 02 : GALERIE ASYMETRIQUE --- */

.mam-realisation__gallery-section {
    padding-block: var(--sp-6) var(--sp-8);
}

.mam-realisation__gallery-head {
    margin-bottom: var(--sp-5);
    max-width: 56ch;
}

/* P6h : onglets galerie residence / chantier (programmes). Style soulignement,
   onglet actif en fuchsia. Le panneau masque est retire du flux. */
.mam-gallery-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    margin-top: var(--sp-4);
}
.mam-gallery-tab {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 0 var(--sp-2);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
    color: var(--c-stone-600, #6b6b6b);
    cursor: pointer;
    transition: color var(--dur-hover, 0.2s) var(--ease-editorial, ease),
                border-color var(--dur-hover, 0.2s) var(--ease-editorial, ease);
}
.mam-gallery-tab:hover { color: var(--c-ink); }
.mam-gallery-tab.is-active {
    color: var(--c-ink);
    border-bottom-color: var(--color-accent);
}
.mam-gallery-panel.is-hidden { display: none; }

/* Video de chantier self-hosted (onglet "Le chantier" des programmes). */
.mam-chantier-video {
    width: 100%;
    max-height: 70vh;
    display: block;
    margin-bottom: var(--sp-5);
    border-radius: var(--radius-md, 8px);
    background: #000;
}

.mam-realisation__gallery-title {
    font-family: var(--font-sans);
    font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.75rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0;
    text-wrap: balance;
    color: var(--c-ink);
    font-feature-settings: var(--realisation-feature-fix);
}

.mam-realisation__gallery-title em {
    font-style: normal;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

/* Galerie : MOSAIQUE editoriale (CR 11/06, ref eden-home.fr) : colonnes
   masonry, chaque photo affichee ENTIERE a son ratio naturel (zero rognage),
   2 colonnes desktop / 1 mobile. Remplace le carrousel scroll-snap du 08/06
   (la cliente est revenue dessus) et l'ancienne grid asymetrique a ratios
   forces. Lightbox au clic conservee (triggers inchanges). */
.mam-realisation__gallery {
    columns: 2;
    column-gap: var(--sp-4);
    padding-inline: var(--gutter);
}

.mam-realisation__gallery-item,
.mam-realisation__gallery-item.is-feature,
.mam-realisation__gallery-item.is-wide,
.mam-realisation__gallery-item.is-wide + .mam-realisation__gallery-item {
    margin: 0 0 var(--sp-4);
    position: relative;
    overflow: hidden;
    background: var(--c-mineral);
    break-inside: avoid;
}

.mam-realisation__gallery-trigger {
    all: unset;
    cursor: zoom-in;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.mam-realisation__gallery-trigger::after {
    /* Subtle reveal hint au hover */
    content: '+';
    position: absolute;
    right: var(--sp-3);
    bottom: var(--sp-3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--c-paper);
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease, transform 300ms ease;
    pointer-events: none;
}
.mam-realisation__gallery-trigger:hover::after,
.mam-realisation__gallery-trigger:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}
.mam-realisation__gallery-trigger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.mam-realisation__gallery-img {
    /* Mosaique : hauteur naturelle (ratio source), pas de cover. */
    width: 100%;
    height: auto;
    display: block;
    transition: transform 900ms var(--ease-luxury, cubic-bezier(0.53, 0.15, 0, 1));
}
.mam-realisation__gallery-trigger:hover .mam-realisation__gallery-img {
    transform: scale(1.03);
}

/* Mosaique : toutes les photos visibles d'emblee (comme la reference
   eden-home) -> le reveal progressif est neutralise (markup PHP conserve). */
.mam-realisation__gallery .mam-realisation__gallery-item.is-deferred,
.mam-realisation__gallery.is-revealed .mam-realisation__gallery-item.is-deferred {
    display: block;
    animation: none;
}
@keyframes mam-realisation-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mam-realisation__gallery-reveal {
    display: none;
}

@media (max-width: 700px) {
    .mam-realisation__gallery { columns: 1; }
}

/* (Bloc carrousel scroll-snap du 08/06 supprime le 11/06 : la cliente est
   revenue au principe mosaique, ref eden-home. Fleches .mam-gallery-nav et
   wrapper JS retires de realisation.js.) */

/* --- LIGHTBOX (dialog natif) --- */

.mam-realisation-lightbox {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    margin: 0;
    inset: 0;
    color: var(--c-paper);
    overflow: hidden;
}
.mam-realisation-lightbox::backdrop {
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(6px);
}
.mam-realisation-lightbox__inner {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--sp-5);
    box-sizing: border-box;
}
.mam-realisation-lightbox__img {
    /* Bornes en unites viewport (fix 11/06) : max 100% se resolvait contre
       une piste de grid dimensionnee par l'image elle-meme -> taille native,
       l'image debordait de l'ecran en hauteur. */
    max-width: calc(100vw - 2 * var(--sp-6));
    max-height: calc(100dvh - 2 * var(--sp-6));
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.mam-realisation-lightbox__close,
.mam-realisation-lightbox__prev,
.mam-realisation-lightbox__next {
    position: absolute;
    background: transparent;
    border: 1px solid rgba(250, 249, 245, 0.5);
    color: var(--c-paper);
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    transition: background 200ms ease, border-color 200ms ease;
}
.mam-realisation-lightbox__close:hover,
.mam-realisation-lightbox__prev:hover,
.mam-realisation-lightbox__next:hover {
    background: rgba(250, 249, 245, 0.1);
    border-color: var(--c-paper);
}
.mam-realisation-lightbox__close { top: var(--sp-4); right: var(--sp-4); }
.mam-realisation-lightbox__prev  { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.mam-realisation-lightbox__next  { right: var(--sp-4); top: 50%; transform: translateY(-50%); }
.mam-realisation-lightbox__counter {
    position: absolute;
    bottom: var(--sp-4);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(250, 249, 245, 0.7);
    font-variant-numeric: tabular-nums;
}

/* --- CHAPITRE 03 : TEMOIGNAGE PULL-QUOTE PLEINE LARGEUR ---
   Audit 2026-05 v3 : passage du fond ink vers fond mineral pour
   meilleure lisibilite (le texte du verbatim etait penalise par le
   contraste fort sur ink + l'italic 40px). */

.mam-realisation__quote-section {
    background: var(--c-mineral, var(--c-stone-100));
    color: var(--c-ink);
    /* Tokenise (audit 11/06) : suivait un clamp 4-8rem hardcode qui avait
       echappe au resserrage global des sp-7/8/9. */
    padding-block: clamp(var(--sp-7), 8vw, var(--sp-9));
    position: relative;
    overflow: hidden;
}

/* Decorative quote mark en filigrane fuchsia subtle */
.mam-realisation__quote-section::before {
    content: '"';
    position: absolute;
    top: -3rem;
    left: clamp(1rem, 5vw, 4rem);
    font-family: var(--font-sans);
    font-size: clamp(14rem, 22vw, 28rem);
    font-style: italic;
    font-weight: 300;
    color: rgba(139, 15, 105, 0.06);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.mam-realisation__quote-shell {
    position: relative;
    z-index: 1;
    max-width: 64rem;
    text-align: center;
}

/* CR 11/06 : avec une video temoignage, avis et video cote a cote
   (la section empilee etait trop haute). Sans video, .quote-grid est un
   simple bloc -> rendu inchange. */
.mam-realisation__quote-section--with-video .mam-realisation__quote-shell {
    max-width: var(--content-wide);
}
.mam-realisation__quote-section--with-video .mam-realisation__quote-stars {
    text-align: left;
    justify-content: flex-start;
}
.mam-realisation__quote-section--with-video .mam-realisation__quote-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--sp-6);
    align-items: center;
    text-align: left;
}
.mam-realisation__quote-section--with-video .mam-realisation__quote-video {
    margin-top: 0;
    max-width: none;
}
@media (max-width: 900px) {
    .mam-realisation__quote-section--with-video .mam-realisation__quote-stars {
    text-align: left;
    justify-content: flex-start;
}
.mam-realisation__quote-section--with-video .mam-realisation__quote-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .mam-realisation__quote-section--with-video .mam-realisation__quote-video {
        margin-top: var(--sp-5);
    }
}

/* Rythme vertical UNIFORME du corps de fiche (audit 11/06) : les paddings
   heterogenes (48/76, 76/76, 24/24, 40/76...) donnaient des espaces entre
   blocs allant de 64 a 152px. Toutes les sections claires passent a sp-7
   haut/bas -> 96px constants entre blocs clairs, 48px de blanc avant/apres
   les bandes colorees (temoignage / CTA, padding interne sp-9 conserve). */
.mam-realisation__body > .mam-realisation__chapter,
.mam-realisation__body > .mam-realisation__chapter--sub,
.mam-realisation__body > .mam-realisation__gallery-section,
.mam-realisation__body > .mam-realisation__video-section,
.mam-realisation__body > .mam-realisation__similaires-section {
    padding-block: var(--sp-7);
}

.mam-realisation__quote-stars {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: var(--sp-4);
    color: rgba(10, 10, 10, 0.18);
    font-size: 18px;
    line-height: 1;
}
.mam-realisation__quote-star.is-filled {
    color: #f4a300;
}

.mam-realisation__quote-verbatim {
    margin: 0 0 var(--sp-5);
    padding: 0;
    border: 0;
}
.mam-realisation__quote-verbatim p {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
    line-height: 1.3;
    font-weight: 400;
    font-style: italic;
    color: var(--c-ink);
    margin: 0;
    text-wrap: balance;
    letter-spacing: -0.015em;
    font-feature-settings: var(--realisation-feature-fix);
}
.mam-realisation__quote-verbatim p::before { content: '"\00A0'; color: var(--color-accent); }
.mam-realisation__quote-verbatim p::after  { content: '\00A0"'; color: var(--color-accent); }

.mam-realisation__quote-author {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-stone-600, #6b6960);
    font-feature-settings: var(--realisation-feature-fix);
}
.mam-realisation__quote-name {
    color: var(--c-ink);
    font-weight: 600;
}
.mam-realisation__quote-sep {
    opacity: 0.5;
}

/* --- CHAPITRE 04 : SIMILAIRES --- */

.mam-realisation__similaires-section {
    padding-block: var(--sp-8) var(--sp-7);
}

.mam-realisation__similaires-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}

.mam-realisation__similaires-title {
    font-family: var(--font-sans);
    font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.75rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--c-ink);
    text-wrap: balance;
    font-feature-settings: var(--realisation-feature-fix);
}
.mam-realisation__similaires-title em {
    font-style: normal;
    color: var(--color-accent);
    font-weight: 400;
}

.mam-realisation__similaires-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}
.mam-realisation__similaires-cta span[aria-hidden] {
    display: inline-block;
    transition: transform 250ms ease;
}
.mam-realisation__similaires-cta:hover span[aria-hidden] {
    transform: translateX(4px);
}

/* --- CTA FINAL DEDIE --- */

/* CTA final magazine : climax avec image background (featured image
   du post) + overlay sombre pour lisibilite. Fond ink reste fallback
   si pas de featured image. */
.mam-realisation__cta {
    background: var(--c-ink);
    color: var(--c-paper);
    /* Tokenise (audit 11/06), cf. quote-section. */
    padding-block: clamp(var(--sp-8), 10vw, var(--sp-9));
    position: relative;
    overflow: hidden;
}

.mam-realisation__cta::before {
    /* Glow fuchsia subtil en background pour signature visuelle.
       Garde meme avec image bg (s'ajoute par-dessus). */
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 30%, rgba(139, 15, 105, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 25% 80%, rgba(139, 15, 105, 0.12) 0%, transparent 35%);
    pointer-events: none;
    z-index: 2;
}

/* Image background : couche dediee avec Ken Burns subtle et overlay
   gradient sombre pour lisibilite du texte par-dessus. */
.mam-realisation__cta-bg {
    position: absolute;
    inset: 0;
    background-image: var(--mam-cta-bg);
    background-size: cover;
    background-position: center;
    z-index: 0;
    /* Ken Burns subtile au load */
    animation: mam-realisation-cta-kenburns 20s ease-out forwards;
    transform-origin: 50% 50%;
}
.mam-realisation__cta-bg::after {
    /* Overlay sombre fort en bas pour la lisibilite du texte
       (gradient bottom-up pour effet "fade into ink"). */
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.78) 100%);
}
@keyframes mam-realisation-cta-kenburns {
    from { transform: scale(1.08); }
    to   { transform: scale(1.00); }
}

.mam-realisation__cta-shell {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 56rem;
}

.mam-realisation__cta-kicker {
    margin: 0 0 var(--sp-3);
    justify-content: center;
    color: rgba(250, 249, 245, 0.65);
}
.mam-realisation__cta-kicker .mam-kicker__rule {
    background: rgba(250, 249, 245, 0.3);
}

.mam-realisation__cta-title {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 3vw + 0.5rem, 3.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--c-paper);
    margin: 0 0 var(--sp-4);
    text-wrap: balance;
    font-feature-settings: var(--realisation-feature-fix);
}
.mam-realisation__cta-title em {
    /* Paper (retour 12/06) : le fuchsia manquait de lisibilite sur le fond
       image sombre - meme arbitrage que le kicker du hero accueil (DA 30/04). */
    font-style: normal;
    color: var(--c-paper);
    font-weight: 400;
}

.mam-realisation__cta-lead {
    font-size: var(--fs-md);
    line-height: 1.55;
    color: rgba(250, 249, 245, 0.78);
    margin: 0 0 var(--sp-5);
    max-width: 44rem;
    margin-inline: auto;
}

.mam-realisation__cta-buttons {
    display: inline-flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

/* Boutons CTA : les 2 en plein paper sur fond ink. Inverses au hover
   (ink avec border paper) pour effet de retournement subtle.
   Alignement parite hauteur 52px + box-sizing border-box. */
.mam-realisation__cta .mam-btn {
    align-items: center;
    min-height: 52px;
    box-sizing: border-box;
    background: var(--c-paper);
    color: var(--c-ink);
    border: 1px solid var(--c-paper);
    transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
    /* Label CTA editable par le client : peut etre long -> autoriser le retour
       a la ligne et borner a 100% pour ne pas deborder le viewport mobile
       (le nowrap par defaut des .mam-btn provoquait un scroll horizontal). */
    white-space: normal;
    max-width: 100%;
    text-align: center;
}
.mam-realisation__cta .mam-btn:hover {
    background: var(--color-accent);
    color: var(--c-paper);
    border-color: var(--color-accent);
}

/* --- Variation : pas d'image hero (fallback) --- */
.mam-tpl--realisation .mam-tpl__head:not(.mam-tpl__head--hero) {
    background: var(--c-paper);
    padding-block: var(--sp-7) var(--sp-5);
}
.mam-tpl--realisation .mam-tpl__head:not(.mam-tpl__head--hero) .mam-tpl__title {
    color: var(--c-ink);
}

/* Le pattern cta-final generique n'est plus injecte par le template
   (remplace par mam-realisation__cta). Si quelqu'un le rajoute via
   admin, on le masque pour eviter le double CTA. */
.mam-tpl--realisation > .mam-tpl__body > .wp-block-cover:has(.mam-cta-final) {
    /* Garde-fou non-destructif : on n'a pas de double CTA prevu par le
       template, mais si un admin l'insere via Gutenberg, on l'affiche
       a opacite normale. Pas de masquage automatique. */
}

/* =====================================================================
   .mam-tpl--annonce - hero scinde (retour cliente 11/06) + carte + agence + CTA
   ===================================================================== */

/* Hero scinde : image 16:9 affichee ENTIERE a gauche (photos cliente en
   16:9 -> zero rognage), meta + reperes a droite. Remplace le hero immersif
   full-bleed object-fit:cover (audit 2026-05) qui rognait le sujet des photos
   (~2.67:1 affiche sur ecran 1920). Deviation actee CR 11/06. Le head garde
   la bande mineral standard de templates-core (coherence inter-gabarits). */

.mam-annonce__hero-shell {
    display: grid;
    gap: var(--sp-5) var(--sp-6);
    align-items: start;
}

.mam-annonce__hero-shell--has-media {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
}

@media (max-width: 1023px) {
    /* Tablette/mobile : image 16:9 entiere d'abord, meta dessous. */
    .mam-annonce__hero-shell--has-media {
        grid-template-columns: 1fr;
    }
}

/* Colonne visuel : image + badges en legende dessous (CR 11/06). */
.mam-annonce__hero-visual {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
}

.mam-annonce__hero-media {
    position: relative; /* ancre le cartouche logo incruste (audit entete 29/06) */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.mam-annonce__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ratio source = ratio cadre -> pas de rognage reel */
    display: block;
}

.mam-annonce__hero-meta {
    min-width: 0;
    animation: mam-realisation-rise 1.2s var(--ease-luxury, cubic-bezier(0.53, 0.15, 0, 1)) 0.2s both;
}

.mam-annonce__kicker {
    margin-bottom: var(--sp-3);
}


.mam-annonce__title {
    font-size: clamp(1.75rem, 1.6vw + 0.75rem, 2.75rem) !important;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance !important;
    white-space: normal !important;
    margin: 0 0 var(--sp-3);
}

.mam-annonce__hero-baseline {
    margin: 0 0 var(--sp-3);
    font-size: clamp(0.875rem, 0.4vw + 0.75rem, 1.0625rem);
    line-height: 1.5;
    color: var(--color-text-muted);
    font-style: normal;
}

.mam-annonce__hero-price {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-sans);
    font-size: clamp(1.25rem, 1vw + 0.75rem, 1.75rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
/* Renvoi d'asterisque du prix (vers la mention legale) : petit exposant discret. */
.mam-annonce__price-ast {
    font-size: 0.6em;
    font-weight: 400;
    vertical-align: super;
    line-height: 0;
    margin-left: 0.1em;
    color: var(--color-text-muted);
}

/* Reperes du bien : grille compacte 2 colonnes dans la colonne meta
   (ex bande .mam-annonce-strip sous le hero, integree au hero CR 11/06). */
.mam-annonce__hero-reperes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-5);
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: var(--sp-4) 0 0;
    border-top: 1px solid var(--color-hairline);
}

.mam-annonce__hero-reperes .mam-annonce-strip__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mam-annonce__hero-reperes .mam-annonce-strip__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    color: var(--color-text-muted);
}

.mam-annonce__hero-reperes .mam-annonce-strip__value {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    /* Reference sans espaces (ex AM/THONON/PROGRAMME) : on autorise la coupure
       n'importe ou pour qu'elle passe a la ligne au lieu d'etre coupee sur les
       ecrans etroits (retour cliente mobile). */
    overflow-wrap: anywhere;
}

.mam-annonce__hero-reperes .mam-annonce-strip__item--lead .mam-annonce-strip__value {
    font-family: var(--font-sans);
    font-style: italic;
    color: var(--color-accent);
}

.mam-annonce__hero-badges {
    display: inline-flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.mam-annonce__hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    /* Radius 0 = conforme design system (l.18 "zero border-radius") + aligne
       sur les rubans statut des cartes. La distinction tag/bouton ne vient PAS
       de la forme mais de la couleur (ruban fuchsia vs boutons ink) et de la
       taille (chip vs bouton), conformement a la hierarchie du DS. */
    border-radius: 0;
}
.mam-annonce__hero-badge--type {
    background: var(--color-accent);
    color: var(--c-paper);
}
.mam-annonce__hero-badge--statut-disponible {
    background: rgba(232, 245, 233, 0.95);
    color: #1b5e20;
}
.mam-annonce__hero-badge--statut-reserve,
.mam-annonce__hero-badge--statut-optionne {
    background: rgba(255, 244, 229, 0.95);
    color: #6b3a00;
}
.mam-annonce__hero-badge--statut-vendu {
    background: rgba(240, 240, 240, 0.95);
    color: #5f6368;
}

/* Colonne d'actions du hero (audit 29/06) : empile les boutons et les aligne a
   la MEME largeur (stretch) pour une colonne nette + hierarchie claire. */
.mam-annonce__hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    max-width: 340px;
}
.mam-annonce__hero-actions .mam-btn {
    margin-top: 0;
    justify-content: center;
}

/* "Demander le plan" = action PRIMAIRE = bouton PLEIN INK (design system l.169
   "Primaire : fond --ink, hover fuchsia"). Le primaire DS n'est PAS fuchsia : le
   fuchsia est reserve aux rubans/hovers -> ainsi le bouton ne se confond plus
   avec le ruban statut fuchsia. Bordure transparente = meme hauteur que le
   secondaire a contour. */
.mam-annonce__hero-plan {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--c-ink);
    color: var(--c-paper);
    border: 1px solid transparent;
}
.mam-annonce__hero-plan:hover {
    background: var(--color-accent);
    color: var(--c-paper);
}

/* "Telecharger la plaquette" = action SECONDAIRE = bouton CONTOUR (design system
   l.170 "Secondaire : fond transparent, border 1.5px --ink, radius 0"). */
.mam-annonce__hero-brochure {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: transparent;
    color: var(--c-ink);
    border: 1.5px solid var(--c-ink);
}
.mam-annonce__hero-brochure:hover {
    background: var(--c-ink);
    color: var(--c-paper);
}

/* Logo programme INCRUSTE sur la photo (audit entete 29/06, option B) :
   cartouche blanc en bas a gauche du visuel -> contraste garanti pour des logos
   sombres, et le logo ne duplique plus le H1 de la colonne meta. Le logo EST la
   marque, pose sur le visuel (pattern immobilier). Radius 0 (design system). */
.mam-annonce__logo--overlay {
    position: absolute;
    left: var(--sp-3);
    bottom: var(--sp-3);
    max-width: 55%;
    background: var(--c-paper);
    padding: var(--sp-2) var(--sp-3);
}
.mam-annonce__logo--overlay .mam-annonce__logo-img {
    display: block;
    max-width: 100%;
    max-height: 44px;
    width: auto;
    height: auto;
}
/* Mobile : logo programme plus discret (retour cliente "logo trop gros").
   La taille est pilotee par la hauteur du logo -> on la reduit + cartouche
   plus compact. */
@media (max-width: 600px) {
    .mam-annonce__logo--overlay {
        max-width: 44%;
        padding: var(--sp-1) var(--sp-2);
    }
    .mam-annonce__logo--overlay .mam-annonce__logo-img {
        max-height: 30px;
    }
}

/* Spec strip enrichi */
.mam-annonce-strip__item--wide {
    grid-column: 1 / -1;
}
.mam-annonce-strip__value--small {
    font-size: var(--fs-md) !important;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
}

/* Carte localisation */
.mam-block--map {
    padding-block: var(--sp-7);
}

/* (Regles carte-carree deplacees APRES les regles de base .mam-annonce__map
   plus bas - meme specificite, l'ordre source decide.) */
.mam-annonce__map-wrap {
    margin-top: var(--sp-5);
    border: 1px solid var(--c-stone-100);
    overflow: hidden;
    background: var(--c-mineral);
}
/* Conteneur carte Leaflet (tuiles raster OSM). Hauteur explicite obligatoire
   (Leaflet ne calcule pas la hauteur). z-index 0 : garde les panes/controles
   sous le header sticky. */
.mam-annonce__map {
    height: 420px;
    width: 100%;
    z-index: 0;
    background: var(--c-mineral);
}
/* Desaturation legere des tuiles -> coherence design system monochrome. */
.mam-annonce__map .leaflet-tile-pane {
    filter: grayscale(0.1) contrast(0.95);
}
.mam-annonce__map .leaflet-control-attribution {
    font-size: 0.625rem;
}
/* Marqueur : pastille fuchsia (divIcon, sans image). */
.mam-map-pin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent, #A5127C);
    border: 3px solid var(--c-paper, #fff);
    box-sizing: border-box;
}
.mam-annonce__map-caption {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-stone-600, #6b6960);
    text-align: right;
    background: var(--c-paper);
    border-top: 1px solid var(--c-stone-100);
}
.mam-annonce__map-caption a {
    color: var(--c-ink);
    text-decoration: none;
    font-weight: 500;
}
.mam-annonce__map-caption a:hover {
    color: var(--color-accent);
}

/* CR 11/06 : carte en petit carre dans la colonne droite de la Presentation
   (remplace la section bandeau pleine largeur, conservee en fallback).
   Texte un peu plus large que la carte (3fr/2fr). Place APRES les regles de
   base .mam-annonce__map (meme specificite -> ordre source). */
/* Double classe = specificite superieure aux regles de templates-blocks.css,
   qui se charge APRES ce fichier (ordre d'enqueue). */
.mam-block__split.mam-block__split--with-map {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
/* Colonne gauche (header Presentation + prose). Sans carte, elle occupe
   toute la grille (comportement historique du split annonce). Le split-side
   generique est display:none (numero sticky retire) -> re-scope ici. */
.mam-annonce__intro-main {
    grid-column: 1 / -1;
    min-width: 0;
}
.mam-block__split--with-map .mam-annonce__intro-main {
    grid-column: auto;
}
.mam-block__split--with-map .mam-annonce__map-aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
    /* Sticky (audit 12/06) : sur les presentations longues (programmes), la
       carte suit la lecture au lieu de laisser la colonne droite vide. */
    position: sticky;
    top: calc(var(--header-h-small, 72px) + var(--sp-5));
    align-self: start;
}
/* Compense le demi-interlignage du kicker gauche (inline dans une ligne
   a line-height 1.55) pour aligner les deux kickers au pixel. */
.mam-block__split--with-map .mam-annonce__map-aside > .mam-kicker {
    margin-top: 7px;
}
.mam-annonce__map--square {
    height: auto;
    aspect-ratio: 1 / 1;
}

/* Numerotation DYNAMIQUE des sections annonce (CR 11/06) : compteur CSS
   en ordre DOM -> impossible a desynchroniser. Incrementent : les kickers
   .mam-kicker--seq (Presentation, Disponibilites, Galerie, Localisation
   fallback, Agence, Similaires) et les numeros de heads des sections de
   contenu (.mam-block__num, vides cote PHP). Le filigrane --echo AFFICHE
   la valeur courante sans incrementer (il suit le kicker dans le DOM).
   CTA finaux et aside carte : volontairement sans numero (meme decision
   que le CTA partage 'Votre projet', audit du matin). */
.mam-tpl--annonce .mam-tpl__body {
    counter-reset: mam-annonce-sec;
}
.mam-tpl--annonce .mam-kicker--seq .mam-kicker__num {
    counter-increment: mam-annonce-sec;
}
.mam-tpl--annonce .mam-kicker--seq .mam-kicker__num::before {
    content: counter(mam-annonce-sec, decimal-leading-zero);
}
.mam-tpl--annonce .mam-tpl__body .mam-block__num:not(.mam-block__num--echo) {
    counter-increment: mam-annonce-sec;
}
.mam-tpl--annonce .mam-tpl__body .mam-block__num:not(.mam-block__num--echo):empty::before {
    content: counter(mam-annonce-sec, decimal-leading-zero);
}
.mam-tpl--annonce .mam-block__num--echo::before {
    content: counter(mam-annonce-sec, decimal-leading-zero);
}

/* Rythme vertical UNIFORME annonce + agence (audit 11/06, meme convention
   que la realisation) : sections claires a sp-7 haut/bas -> 96px constants
   entre blocs clairs, 48px avant les bandes (CTA ink, contact agence).
   Sur l'agence, le quatuor de textes (intro/savoir-faire/secteurs/conclusion)
   garde son empilement compact volontaire. */
.mam-tpl--annonce .mam-tpl__body > .mam-block {
    padding-block: var(--sp-7);
}
.mam-tpl--agence .mam-agence__avis,
.mam-tpl--agence .mam-agence__annonces-region,
.mam-tpl--agence .mam-agence__map {
    padding-block: var(--sp-7);
}

/* Galerie "L'agence en images" : MOSAIQUE masonry (colonnes) + lightbox (JS
   mutualise realisation.js). Chaque photo affichee ENTIERE a son ratio naturel
   (zero rognage, retour cliente 10/07) - meme pattern que la galerie realisation. */
.mam-agence__gallery {
    columns: 2;
    column-gap: var(--sp-4);
    margin-top: var(--sp-5);
}
.mam-agence__gallery-item {
    margin: 0 0 var(--sp-4);
    overflow: hidden;
    border-radius: 4px;
    break-inside: avoid;
}
.mam-agence__gallery-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.mam-agence__gallery-img {
    display: block;
    width: 100%;
    height: auto; /* ratio naturel, pas de rognage (mosaique) */
    transition: transform 0.4s ease;
}
.mam-agence__gallery-trigger:hover .mam-agence__gallery-img,
.mam-agence__gallery-trigger:focus-visible .mam-agence__gallery-img {
    transform: scale(1.04);
}
@media (max-width: 700px) {
    .mam-agence__gallery { columns: 1; }
}
@media (max-width: 900px) {
    /* Le split repasse en 1 colonne : la carte carree suit sous le texte. */
    .mam-block__split.mam-block__split--with-map {
        grid-template-columns: 1fr;
    }
}

/* Bloc agence référente */
.mam-block--agence {
    padding-block: var(--sp-6);
}
.mam-annonce__agence {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--sp-6);
    align-items: center;
    background: var(--c-mineral);
    padding: var(--sp-5);
    border-left: 4px solid var(--color-accent);
}
.mam-annonce__agence-photo {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
}
/* Interlocuteur SANS photo (commercial en charge, pas d'agence) : pas de colonne
   photo -> barre de contact pleine largeur, identite a gauche + actions a droite.
   Sobre, sans avatar (le monogramme d'initiales faisait trop "reseau social"). */
.mam-annonce__agence--sans-photo {
    grid-template-columns: 1fr;
}
.mam-annonce__agence-identity {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
/* Contenu : identite a gauche, groupe d'actions a droite (agence ET commercial)
   -> remplit la largeur de la carte au lieu de tout caler a gauche. */
.mam-annonce__agence-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4) var(--sp-6);
}
.mam-annonce__agence-cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
}
.mam-annonce__agence-kicker {
    margin: 0;
    color: var(--c-stone-600, #6b6960);
}
.mam-annonce__agence-title {
    font-family: var(--font-sans);
    font-size: clamp(1.25rem, 1vw + 0.75rem, 1.625rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--c-ink);
}
.mam-annonce__agence-address {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--c-ink-soft, #171717);
    line-height: 1.5;
}
.mam-annonce__agence-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-size: 0.9375rem;
}
.mam-annonce__agence-contact a {
    color: var(--c-ink);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid currentColor;
}
.mam-annonce__agence-contact a:hover {
    color: var(--color-accent);
}
.mam-annonce__agence-cta {
    align-self: flex-start;
    margin-top: var(--sp-1);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

/* CTA contact agence (C5) : rangee Appeler / Etre rappele, puis lien discret
   "Decouvrir l'agence" en dessous. */
.mam-annonce__agence-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.mam-annonce__agence-link {
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.mam-annonce__agence-link:hover {
    color: var(--c-ink);
}

@media (max-width: 720px) {
    .mam-annonce__agence {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
    .mam-annonce__agence-photo {
        aspect-ratio: 16 / 9;
    }
    .mam-annonce__agence-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* CTA final annonce */
.mam-annonce__cta {
    background: var(--c-ink);
    color: var(--c-paper);
    /* Tokenise (audit 11/06), cf. quote-section realisation. */
    padding-block: clamp(var(--sp-8), 10vw, var(--sp-9));
    position: relative;
    overflow: hidden;
}
.mam-annonce__cta-bg {
    position: absolute;
    inset: 0;
    background-image: var(--mam-cta-bg);
    background-size: cover;
    background-position: center;
    z-index: 0;
    animation: mam-realisation-cta-kenburns 20s ease-out forwards;
    transform-origin: 50% 50%;
}
.mam-annonce__cta-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.78) 100%);
}
.mam-annonce__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 30%, rgba(139, 15, 105, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 25% 80%, rgba(139, 15, 105, 0.12) 0%, transparent 35%);
    pointer-events: none;
    z-index: 2;
}
.mam-annonce__cta-shell {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 56rem;
}
.mam-annonce__cta-kicker {
    margin: 0 0 var(--sp-3);
    justify-content: center;
    color: rgba(250, 249, 245, 0.65);
}
.mam-annonce__cta-kicker .mam-kicker__rule {
    background: rgba(250, 249, 245, 0.3);
}
.mam-annonce__cta-title {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 3vw + 0.5rem, 3.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--c-paper);
    margin: 0 0 var(--sp-4);
    text-wrap: balance;
}
.mam-annonce__cta-title em {
    font-style: normal;
    color: var(--c-paper);
    font-weight: 400;
}
.mam-annonce__cta-lead {
    font-size: var(--fs-md);
    line-height: 1.55;
    color: rgba(250, 249, 245, 0.78);
    margin: 0 0 var(--sp-5);
    max-width: 44rem;
    margin-inline: auto;
}
.mam-annonce__cta-buttons {
    display: inline-flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    justify-content: center;
}
.mam-annonce__cta .mam-btn {
    align-items: center;
    min-height: 52px;
    box-sizing: border-box;
    background: var(--c-paper);
    color: var(--c-ink);
    border: 1px solid var(--c-paper);
    transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.mam-annonce__cta .mam-btn:hover {
    background: var(--color-accent);
    color: var(--c-paper);
    border-color: var(--color-accent);
}

/* Galerie annonce : utilise maintenant mam-realisation__gallery (pattern
   asymetrique realisation). Override pour la borner dans le container
   parent au lieu de full-bleed avec padding gutter. */
.mam-tpl--annonce .mam-realisation__gallery {
    padding-inline: 0;
}

/* Retrait "01 PRESENTATION" filigrane orphelin sur T+M sans chapitrage
   (seule section numerotee de la page -> un 01 seul n'a pas de sens).
   CR 11/06 : sans le filigrane, l'espace qu'il occupait restait -> on
   compacte le padding haut du bloc et la marge du head pour que le
   kicker "Presentation" tombe naturellement sous le hero. */
.mam-tpl--annonce-terrain-maison .mam-block--intro .mam-block__num--huge,
.mam-tpl--annonce-terrain .mam-block--intro .mam-block__num--huge {
    display: none;
}
.mam-tpl--annonce-terrain-maison .mam-block--intro .mam-block__head,
.mam-tpl--annonce-terrain .mam-block--intro .mam-block__head {
    display: block;
    margin-bottom: var(--sp-4);
}

/* Mobile : reduire hero overlay */
@media (max-width: 720px) {
    .mam-annonce__title {
        font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    }
    .mam-annonce__hero-price {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
}