:root {
    --mm-nocturne:    #2F3B37;
    --mm-vert-cendre: #425752;
    --mm-sauge:       #C0CCBF;
    --mm-brun:        #43332D;
    --mm-blush:       #EED8CF;
    --mm-ivoire:      #F4EEE7;
    --mm-ciel:        #91B7C1;

    /* Fond du site en blanc pur (retour 4 juin) : aligne les pages
       secondaires sur la home, dont les sections claires sont déjà en
       blanc via le scrub (COLOR_ANCHORS = 255,255,255). */
    --bg: #ffffff;
    --fg: var(--mm-nocturne);
    --fg-soft: rgba(47, 59, 55, 0.58);
    --fg-faint: rgba(47, 59, 55, 0.30);
    --rule: rgba(47, 59, 55, 0.15);
    /* Couleur d'accent au survol (review 2026-05-28) : on quitte le
       Ciel Poudré (bleu) pour rester dans la palette verte de la
       maison. Vert Cendré par défaut sur les fonds clairs, basculé
       en Sauge Veloutée sur les sections sombres pour garder le
       contraste. */
    --c-accent: var(--mm-vert-cendre);
    /* 0 = pas de vidéo derrière (texte normal), 1 = vidéo pleine
       opacité (texte ivoire). Pilotée par applyScroll. */
    --video-presence: 0;

    --serif: "Cormorant Garamond", "Times New Roman", serif;
    --sans:  "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
    /* Version édito : Romance Dream sur tous les titres (police
       propriétaire de la plateforme de marque, livrée 2026-05-28).
       Italiana en fallback si la police met du temps à charger. */
    --display: "Romance Dream", "Italiana", "Cormorant Garamond", "Times New Roman", serif;
    --title:   "Romance Dream", "Italiana", "Cormorant Garamond", "Times New Roman", serif;
  }

  /* Romance Dream : police propriétaire, fichier .otf + .ttf en local
     dans /assets/fonts/. Embarquée pour les titres uniquement. */
  @font-face {
    font-family: "Romance Dream";
    src: url("/assets/fonts/Romance-Dream.otf") format("opentype"),
         url("/assets/fonts/Romance-Dream.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Romance Dream";
    src: url("/assets/fonts/Romance-Dream-Italic.otf") format("opentype"),
         url("/assets/fonts/Romance-Dream-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { margin: 0; padding: 0; }
  figure { margin: 0; }
  body {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(16px, 1vw + 0.55rem, 18px);
    line-height: 1.65;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    transition: color 0.6s linear, background-color 0.6s linear;
  }
  body.no-js .anti-fouc, body.js-ready .anti-fouc { visibility: visible; }
  body:not(.js-ready):not(.no-js) .anti-fouc { visibility: hidden; }

  ::selection { background: var(--mm-brun); color: var(--mm-ivoire); }

  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--c-accent); }
  a:focus-visible, button:focus-visible {
    outline: 1.5px solid var(--c-accent);
    outline-offset: 4px;
  }

  .skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--mm-ivoire); color: var(--mm-nocturne); padding: 12px 18px;
    font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; text-transform: none;
    border: 1px solid var(--mm-nocturne);
  }
  .skip:focus { left: 24px; top: 24px; z-index: 9999; }

  /* Layout */
  .wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
  .col-narrow { max-width: 720px; }
  .col-medium  { max-width: 880px; }

  /* ===== TOPBAR ===== */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px clamp(20px, 5vw, 64px);
    z-index: 80;
    pointer-events: none;
    mix-blend-mode: difference;
    color: #ffffff;
    transition: color 0.4s ease;
  }
  /* Wordmark « Maison Mistral » du header (home) : masqué à l'ouverture,
     révélé en fondu au scroll quand le médaillon central s'estompe (#1).
     Hérite du mix-blend du topbar (s'inverse selon le fond). Piloté en
     opacité par scripts-home.js. */
  .topbar__brand { display: block; pointer-events: auto; }
  /* Home UNIQUEMENT : le wordmark est masqué à l'ouverture puis révélé en
     fondu au scroll (scripts-home.js), pendant que le médaillon central
     s'estompe. Les pages internes (.topbar--overlay) n'ont pas ce médaillon
     qui voyage → le wordmark y reste visible d'emblée (exclu par :not). */
  .topbar:not(.topbar--overlay) .topbar__brand { opacity: 0; visibility: hidden; }
  .topbar__brand img { display: block; height: clamp(20px, 2vw, 28px); width: auto; }
  /* Quand la vidéo du hero a disparu, on quitte le difference (qui
     rend gris sale sur les verts medium) pour une couleur pleine
     PROGRESSIVE (var(--header-ink)) qui vire vers le clair à mesure
     que le fond s'assombrit, et atteint le blanc tôt. */
  body.topbar-solid .topbar {
    mix-blend-mode: normal;
    color: var(--header-ink, var(--fg));
  }
  /* Le wordmark est une IMAGE blanche : une fois la vidéo passée (mix-blend
     retiré), color: n'agit plus dessus → il resterait blanc, invisible sur
     les sections claires. On l'inverse comme le médaillon, piloté par la
     même rampe --mark-ink (0 = noir sur fond clair → 1 = blanc sur fond
     sombre). Pas de filtre tant que la vidéo couvre l'écran : le mix-blend
     difference du topbar suffit alors (et un filter casserait ce mix-blend). */
  body.topbar-solid .topbar__brand img {
    filter: brightness(0) invert(var(--mark-ink, 0));
    transition: filter 0.3s ease;
  }
  .topbar__logo {
    height: 60px; width: auto; display: block;
    pointer-events: auto;
  }
  .topbar__right {
    display: flex; align-items: center; gap: 20px;
    pointer-events: auto;
  }
  .topbar__repere {
    display: inline-flex; align-items: center; gap: 11px;
    font-family: var(--sans);
    font-weight: 500;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.04em;
    font-size: 11px;
    text-transform: none;
    white-space: nowrap;
  }
  .topbar__clock {
    width: 27px; height: 27px; display: block; flex: none;
    overflow: visible;
  }
  .topbar__clock .tc-ring {
    fill: none; stroke: currentColor; stroke-width: 3;
    opacity: 0.45;
  }
  .topbar__clock .tc-hand {
    stroke: currentColor; stroke-linecap: round;
    transform-box: view-box; transform-origin: 50px 50px;
    transition: transform 0.22s linear;
  }
  .topbar__clock .tc-hand--h { stroke-width: 4.5; }
  .topbar__clock .tc-hand--m { stroke-width: 3; opacity: 0.8; }
  .topbar__clock .tc-pin { fill: currentColor; }

  /* Burger */
  .burger {
    background: none; border: none; cursor: pointer;
    padding: 4px; margin: 0;
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 28px; height: 28px;
    color: inherit;
  }
  .burger__line {
    display: block; height: 1px; width: 100%;
    background: currentColor;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }
  .burger[aria-expanded="true"] .burger__line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .burger[aria-expanded="true"] .burger__line:nth-child(2) {
    opacity: 0;
  }
  .burger[aria-expanded="true"] .burger__line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .topbar__brand { display: block; pointer-events: auto; line-height: 0; }

  /* Header des pages secondaires (toutes sauf la home) : TOUJOURS transparent.
     Comme le header de la home, on s'appuie sur mix-blend-mode: difference
     pour que le médaillon et le burger s'inversent d'eux-mêmes selon
     l'arrière-plan au scroll (clair sur fond sombre, foncé sur fond clair).
     Aucun fond, aucun flou, aucune version « solide ». Un seul médaillon
     (blanc) suffit, l'inversion fait le reste — y compris menu ouvert
     (panneau blanc → médaillon + croix en noir automatiquement). */
  .topbar--overlay {
    justify-content: space-between;
    mix-blend-mode: difference;
    color: #fff;
    background: transparent;
    pointer-events: auto;
  }
  /* Pages à hero plein écran à image de fond (À propos, article) : tant que le
     header surplombe le hero (.topbar--over-hero, posé/retiré par scripts-nav
     via IntersectionObserver), on désactive le mix-blend → logo + burger en
     BLANC pur (sinon le difference les grise sur le ciel clair du hero). Au
     scroll hors hero, la classe est retirée → le mix-blend difference reprend
     et le header s'adapte de nouveau à la couleur de fond (retour client 24/06). */
  .topbar--overlay.topbar--over-hero { mix-blend-mode: normal; color: #fff; }
  /* Wordmark « Maison Mistral » (texte) sur les pages internes, comme la
     navbar de la home après scroll. Hauteur calée sur celle de la home. */
  .topbar--overlay .topbar__logo { height: clamp(22px, 2.4vw, 30px); width: auto; }

  /* Contenu des pages secondaires : dégage la barre fixe en haut. */
  .page-main { padding-top: clamp(92px, 12vh, 132px); }

  /* ===== Kit « page de contenu » (À propos, Collection, Article, Journal) =====
     Réutilise les tokens et composants du home (titres var(--display),
     prose var(--sans), accroche var(--serif), boutons .btn-*). Sert de
     base figée et cohérente pour toutes les pages éditoriales. */
  .page-hero { max-width: 860px; margin: 0 auto; text-align: center; padding: clamp(8px,2vh,24px) clamp(20px,5vw,40px) 0; }
  /* Plus d'air sous le grand titre script (Romance Dream) : ses jambages
     descendants (le « J » de Journal, etc.) venaient coller l'accroche juste
     en dessous. Marge généreuse pour dégager les swashes. Spécificité élevée
     pour battre `.section-wf__title { margin: 0 }` (le h1 porte les 2 classes). */
  .page-hero .page-hero__h1 { margin: 0 0 clamp(34px,6vh,64px); }
  .page-hero__lead {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(19px, 1.2vw + 0.6rem, 26px); line-height: 1.5;
    color: var(--mm-vert-cendre); max-width: 56ch; margin: 0 auto;
  }
  .page-hero__media { margin: clamp(32px,5vh,64px) auto 0; max-width: 1000px; padding: 0 clamp(20px,5vw,40px); }
  .page-hero__media img { width: 100%; height: auto; display: block; filter: saturate(.92) sepia(.05); }
  .page-hero__media figcaption {
    font-family: var(--sans); font-weight: 300; font-size: 12px; letter-spacing: .04em;
    color: var(--fg-soft); text-align: center; margin-top: 12px;
  }
  .prose-col { max-width: 720px; margin: 0 auto; padding: 0 clamp(20px,5vw,40px); }
  .prose-col .maison__title {
    font-size: clamp(23px, 1.6vw + 0.6rem, 32px);
    margin: clamp(44px,6vh,76px) 0 clamp(14px,2vh,22px);
  }
  .prose-col .maison__title:first-child { margin-top: 0; }
  .prose-col .maison__prose { max-width: none; }
  .prose-list { list-style: none; margin: 0; padding: 0; }
  .prose-list li {
    font-family: var(--sans); font-weight: 300; font-size: clamp(15px, 0.5vw + 0.7rem, 17px);
    line-height: 1.7; color: var(--mm-nocturne);
    padding: 0 0 0 22px; margin: 0 0 14px; position: relative;
  }
  .prose-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 1px; background: var(--c-accent); }
  .prose-list strong { font-weight: 600; }
  .prose-cta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px,4vw,40px); margin-top: clamp(36px,5vh,60px); }
  @media (max-width: 720px) {
    .page-hero__media { padding: 0; }
  }

  /* ===== Pages légales (mentions légales, confidentialité, CGU) =====
     Réutilise le kit « page de contenu » (.page-hero, .prose-col,
     .maison__title, .maison__prose, .prose-list). Deux ajouts spécifiques :
     une liste de définition pour les blocs d'identité (éditeur, hébergeur,
     conception) et un marqueur « à compléter » pour les informations Maison
     Mistral encore en attente. */
  .legal-col { max-width: 760px; }
  .legal-updated {
    font-family: var(--sans); font-weight: 300; font-size: 13px;
    letter-spacing: .04em; color: var(--fg-soft);
    margin: 0 0 clamp(30px, 5vh, 52px);
  }
  .legal-dl { margin: 0; }
  .legal-dl > div {
    display: grid; grid-template-columns: 230px 1fr; gap: 4px 28px;
    align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule);
  }
  .legal-dl > div:first-child { border-top: 1px solid var(--rule); }
  .legal-dl dt {
    font-family: var(--sans); font-weight: 500; font-size: 12px;
    letter-spacing: .05em; text-transform: uppercase; color: var(--fg-soft);
    margin: 0;
  }
  .legal-dl dd {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(15px, .5vw + .7rem, 17px); line-height: 1.55;
    color: var(--mm-nocturne); margin: 0;
  }
  .legal-dl dd a:hover { color: var(--c-accent); }
  .legal-pending {
    display: inline-block; font-family: var(--sans); font-weight: 500;
    font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mm-brun); background: var(--mm-blush);
    padding: 2px 9px; border-radius: 999px; vertical-align: middle;
  }
  .legal-note {
    margin: clamp(40px, 6vh, 64px) 0 0;
    padding: clamp(20px, 3vh, 28px) clamp(20px, 3vw, 30px);
    border: 1px solid var(--rule); border-left: 2px solid var(--c-accent);
    background: rgba(192, 204, 191, .10);
    font-family: var(--sans); font-weight: 300; font-size: 14px;
    line-height: 1.7; color: var(--fg-soft);
  }
  .legal-note strong { color: var(--mm-nocturne); font-weight: 500; }
  @media (max-width: 620px) {
    .legal-dl > div { grid-template-columns: 1fr; gap: 3px; }
  }

  /* Page Contact autonome : section sombre comme le contact du home, pour
     faire ressortir le formulaire et la pilule budget blanche. On bascule
     --fg en ivoire pour que tout le contenu (titre, prose, champs) suive.
     Le padding-top dégage la barre fixe (pas de .page-main ici). */
  .contact-standalone {
    background: var(--mm-nocturne);
    color: var(--mm-ivoire);
    /* --bg en nocturne : le cartouche radial de .contact__inner--centered
       utilise var(--bg) ; il doit égaler le fond de section pour rester
       invisible (sinon halo ivoire sur le vert). */
    --bg: var(--mm-nocturne);
    --fg: var(--mm-ivoire);
    --fg-soft: rgba(244, 238, 231, 0.66);
    --rule: rgba(244, 238, 231, 0.20);
    /* Accent au survol sur fond sombre : ivoire (jamais le kaki par défaut,
       qui disparaîtrait sur le nocturne). */
    --c-accent: var(--mm-ivoire);
    /* Padding géré par les colonnes (sections pleine largeur bord à bord) ;
       aucune marge basse → les panneaux/colonnes arrivent au ras du footer
       (pas de bande verte résiduelle sous le panneau blanc). */
    padding: 0;
  }
  .contact-standalone .contact__title,
  .contact-standalone .contact__lede { color: var(--mm-ivoire); }
  /* Étoiles fixes en arrière-plan de la page Contact (comme la home, mais
     rendues visibles ici car il n'y a pas de scrub pour les animer). */
  .contact-standalone .stars { opacity: 0.45; }
  /* Page Contact entièrement verte : body nocturne (sinon du blanc
     apparaîtrait derrière le footer), et barre du bas du footer transparente
     comme sur la home → les étoiles fixes se prolongent derrière elle. */
  body.contact-page { background: var(--mm-nocturne); }
  /* Double classe (.page.contact-page) pour battre `body.page .footer__base`
     défini plus bas (même spécificité sinon → c'est l'ordre qui gagnait). */
  body.page.contact-page .footer__base { background: transparent; }

  /* État initial masqué avant l'arrivée séquencée (scripts-contact). Retiré
     par JS ; si reduced-motion ou GSAP absent, le contenu reste visible. */
  .contact-top[data-anim="pending"] .contact__title,
  .contact-top[data-anim="pending"] .contact__lede,
  .contact-top[data-anim="pending"] .letter-form__prose,
  .contact-top[data-anim="pending"] .letter-form__message,
  .contact-top[data-anim="pending"] .letter-form__actions,
  .contact-where[data-anim="pending"] .contact-where__map,
  .contact-where[data-anim="pending"] .contact-where__title,
  .contact-where[data-anim="pending"] .contact-where__text,
  .contact-where[data-anim="pending"] .contact-where__coords,
  .contact-where[data-anim="pending"] .contact__sla { opacity: 0; }

  /* ----- Contact : disposition pleine largeur, bord à bord (esprit collection) -----
     Section 1 : panneau BLANC (intro) à gauche / fond vert étoilé (formulaire)
     à droite. Section 2 : fond vert étoilé (carte) à gauche / panneau BLANC
     (coordonnées) à droite. Les colonnes vertes sont transparentes → le champ
     d'étoiles fixe (z-index 1) transparaît ; les panneaux blancs (z-index 2)
     le masquent de leur côté. */
  .contact-top,
  .contact-where {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  }
  /* Panneaux blancs : fond blanc + texte foncé (le reste de la page est ivoire
     sur nocturne). */
  .contact-top__intro,
  .contact-where__info {
    background: #fff; color: var(--mm-nocturne);
    --fg: var(--mm-nocturne); --fg-soft: rgba(47, 59, 55, 0.66);
    --c-accent: var(--mm-vert-cendre);
    display: flex; flex-direction: column; justify-content: center;
  }

  /* Section 1 : intro (blanc, gauche) + formulaire (vert/étoiles, droite). */
  .contact-top__intro {
    text-align: left;
    padding: clamp(120px, 18vh, 184px) clamp(28px, 4vw, 72px) clamp(56px, 9vh, 100px) clamp(28px, 5vw, 88px);
  }
  .contact-top__intro .contact__title { color: var(--mm-nocturne); margin: 0 0 clamp(18px, 2.6vh, 28px); }
  .contact-top__intro .contact__lede { color: rgba(47, 59, 55, 0.7); margin: 0; max-width: 34ch; }
  /* Invitation au scroll sous le titre (retour client 24/06), même langage que
     les pages collection : libellé + trait vertical dont un segment descend en
     boucle (keyframe scrollSeg, défini plus bas). Sur panneau blanc → foncé. */
  .contact-top__intro .contact__cue {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    margin-top: clamp(30px, 5vh, 56px);
    font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-soft);
  }
  .contact-top__intro .contact__cue::after {
    content: ""; width: 1px; height: 58px;
    background-image: linear-gradient(to bottom, currentColor, currentColor);
    background-repeat: no-repeat; background-size: 100% 38%;
    background-position: 0 -50%; opacity: .85;
    animation: scrollSeg 2s cubic-bezier(.5,0,.5,1) infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .contact-top__intro .contact__cue::after { animation: none; background-position: 0 50%; opacity: .6; }
  }
  .contact-top__form {
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(120px, 18vh, 184px) clamp(28px, 5vw, 88px) clamp(56px, 9vh, 100px);
  }
  .contact-top__form .letter-form--prose {
    text-align: left; max-width: 640px; margin: 0; width: 100%;
  }

  /* Section 2 : carte (vert/étoiles, gauche) + coordonnées (blanc, droite). */
  .contact-where__map {
    margin: 0; display: flex; align-items: center; justify-content: center;
    padding: clamp(56px, 9vh, 120px) clamp(28px, 5vw, 72px);
  }
  .contact-where__info {
    text-align: left;
    padding: clamp(56px, 9vh, 120px) clamp(28px, 5vw, 88px);
  }
  .contact-map__svg {
    width: 100%; height: auto; max-width: 460px; display: block; margin: 0 auto;
    overflow: visible;
  }
  @media (max-width: 860px) {
    /* Empilement : panneau blanc puis colonne verte (section 1) ;
       coordonnées (blanc) puis carte (section 2). */
    .contact-top, .contact-where { grid-template-columns: 1fr; }
    .contact-top__intro { padding-top: clamp(104px, 16vh, 150px); padding-bottom: clamp(36px, 6vh, 56px); }
    .contact-top__form { padding-top: clamp(40px, 6vh, 64px); }
    .contact-where__map { order: 2; }
    .contact-where__info { order: 1; }
  }
  /* De-damier (review 22/06 #45) : le panneau blanc reste à GAUCHE dans les
     deux sections (intro + coordonnées), la colonne verte étoilée à droite
     (formulaire + carte). Fini l'alternance en damier sur desktop. */
  @media (min-width: 861px) {
    .contact-where__info { grid-column: 1; grid-row: 1; }
    .contact-where__map  { grid-column: 2; grid-row: 1; }
  }
  .map-land {
    fill: rgba(244, 238, 231, 0.05);
    stroke: rgba(244, 238, 231, 0.42); stroke-width: 1.1; stroke-linejoin: round;
  }
  .map-dot { fill: rgba(244, 238, 231, 0.45); }
  .map-star { fill: var(--mm-ivoire); }
  .map-ring {
    fill: none; stroke: var(--mm-ivoire); stroke-width: 1.4;
    transform-box: fill-box; transform-origin: center;
    animation: mapPulse 2.8s ease-out infinite;
  }
  @keyframes mapPulse {
    0%   { transform: scale(0.5); opacity: 0.7; }
    100% { transform: scale(3.2); opacity: 0; }
  }
  .map-label { font-family: var(--sans); }
  .map-label--ref { fill: rgba(244, 238, 231, 0.5); font-size: 11px; letter-spacing: 0.05em; }
  .map-label--sea { fill: rgba(244, 238, 231, 0.3); font-size: 11px; font-style: italic; letter-spacing: 0.14em; text-anchor: middle; }
  .map-label--here { fill: var(--mm-ivoire); font-size: 13.5px; letter-spacing: 0.05em; }

  .contact-where__info { text-align: left; }
  .contact-where__title {
    font-family: var(--title); font-weight: 400; text-transform: none; letter-spacing: 0.005em;
    font-size: clamp(22px, 1.6vw + 0.5rem, 32px); line-height: 1.15;
    color: var(--mm-ivoire); margin: 0 0 clamp(14px, 2vh, 20px);
  }
  /* Review 23/06 #102 : grande initiale (U) à la taille standard 2.2em (comme
     les autres titres), seule grande lettre du titre (« provence » minuscule). */
  .contact-where__title::first-letter { font-size: 2.2em; line-height: 0.9; }
  .contact-where__text {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(15px, 0.5vw + 0.7rem, 17px); line-height: 1.8;
    color: rgba(244, 238, 231, 0.82); margin: 0 0 clamp(22px, 3vh, 32px); max-width: 42ch;
  }
  .contact-where__coords { list-style: none; margin: 0 0 clamp(22px, 3vh, 30px); padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .contact-where__coords li { display: flex; flex-direction: column; gap: 3px; }
  .contact-where__k {
    font-family: var(--sans); font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 238, 231, 0.5);
  }
  .contact-where__coords a,
  .contact-where__coords li > span:last-child {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(16px, 0.6vw + 0.6rem, 19px); color: var(--mm-ivoire);
  }
  .contact-where__coords a {
    width: max-content; border-bottom: 1px solid rgba(244, 238, 231, 0.25);
    padding-bottom: 1px; transition: border-color 0.3s ease;
  }
  .contact-where__coords a:hover { border-color: var(--mm-ivoire); }
  .contact-where .contact__sla { margin: 0; text-align: left; }
  /* Panneau blanc (coordonnées) : texte foncé, surcharge des couleurs ivoire
     définies plus haut pour le fond nocturne. */
  .contact-where__info .contact-where__title { color: var(--mm-nocturne); }
  .contact-where__info .contact-where__text { color: rgba(47, 59, 55, 0.78); }
  .contact-where__info .contact-where__k { color: rgba(47, 59, 55, 0.5); }
  .contact-where__info .contact-where__coords a,
  .contact-where__info .contact-where__coords li > span:last-child { color: var(--mm-nocturne); }
  .contact-where__info .contact-where__coords a { border-bottom-color: rgba(47, 59, 55, 0.25); }
  .contact-where__info .contact-where__coords a:hover { border-color: var(--mm-vert-cendre); }
  .contact-where__info .contact__sla { color: rgba(47, 59, 55, 0.6); }
  @media (prefers-reduced-motion: reduce) {
    .map-ring { animation: none; opacity: 0.4; transform: scale(1.6); }
  }

  /* ============================================================
     Page éditoriale (À propos…) : hero plein écran + sections
     alternées image / texte + bloc valeurs. Réutilisable.
     ============================================================ */

  /* Hero immersif : image plein écran, voile dégradé, titre bas-gauche.
     Échoit l'esprit du hero vidéo de la home. */
  .ed-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background-color: var(--mm-nocturne);
    overflow: hidden;
  }
  /* Image de fond en élément dédié : plus haute que le hero pour autoriser
     le parallaxe (translation au scroll) sans révéler les bords. */
  .ed-hero__media {
    position: absolute; left: 0; top: -12%;
    width: 100%; height: 124%;
    z-index: 0;
    will-change: transform;
  }
  .ed-hero__bg { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ed-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom,
      rgba(20,26,24,0.30) 0%, rgba(20,26,24,0.08) 38%, rgba(20,26,24,0.66) 100%);
  }
  .ed-hero__inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px) clamp(56px, 11vh, 128px);
  }
  /* État initial masqué avant l'animation de chargement (GSAP). Retiré par
     JS si reduced-motion ou si GSAP ne charge pas → contenu visible. */
  .ed-hero[data-anim="pending"] .ed-hero__media,
  .ed-hero[data-anim="pending"] .ed-hero__base,
  .ed-hero[data-anim="pending"] .ed-hero__rule,
  .ed-hero[data-anim="pending"] .ed-hero__h1,
  .ed-hero[data-anim="pending"] .ed-hero__lead,
  .ed-hero[data-anim="pending"] .ed-hero__kw,
  .ed-hero[data-anim="pending"] .ed-hero__cue { opacity: 0; }
  /* Même principe pour les heros éditoriaux simples (.page-hero) : titre,
     accroche et image masqués avant l'arrivée séquencée GSAP (scripts-ed).
     reduced-motion / fallback retirent data-anim → tout redevient visible. */
  .page-hero[data-anim="pending"] .page-hero__h1,
  .page-hero[data-anim="pending"] .page-hero__lead,
  .page-hero[data-anim="pending"] .page-hero__media { opacity: 0; }
  /* Hero éditorial plein écran de /collections : images + texte masqués avant
     l'arrivée séquencée (scripts-ed). */
  .coll-hero[data-anim="pending"] .coll-hero__center > *,
  .coll-hero[data-anim="pending"] .coll-hero__fig { opacity: 0; }
  .ed-hero__rule { width: 54px; height: 1px; background: rgba(255,255,255,.6); margin: 0 0 clamp(20px,3vh,30px); }
  .ed-hero__h1 {
    font-family: var(--title); font-weight: 400;
    font-size: clamp(40px, 6vw, 92px); line-height: 1.03; letter-spacing: 0.01em;
    color: #fff; margin: 0 0 clamp(22px, 3.2vh, 34px); max-width: 17ch;
  }
  .ed-hero__lead {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(18px, 1.3vw + 0.5rem, 27px); line-height: 1.5;
    color: rgba(255,255,255,0.94); max-width: 46ch; margin: 0;
  }
  .ed-hero__cue {
    position: absolute; left: 50%; bottom: clamp(20px,3vh,30px); transform: translateX(-50%);
    z-index: 2; font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(255,255,255,.8);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .ed-hero__cue::after { content: ""; width: 1px; height: 36px; background: rgba(255,255,255,.6); animation: cuepulse 2.6s ease-in-out infinite; }

  /* ----- Hero À propos : variante sobre et centrée -----
     Reprend l'image plein écran, le voile et l'arrivée séquencée de .ed-hero,
     mais centre un bloc unique (baseline → titre → filet → accroche) avec
     beaucoup d'air. Aucun ornement : le calme tient lieu de mise en scène.
     Voile renforcé + léger vignettage central pour la lisibilité au milieu
     (la zone centrale de l'image est la plus claire). */
  /* Contenu poussé vers le bas du hero (retour client 24/06) plutôt que centré
     verticalement → l'image de fond (château) respire dans la moitié haute. */
  .ed-hero--maison { align-items: flex-end; }
  .ed-hero--maison::after {
    background:
      linear-gradient(to bottom, rgba(20,26,24,0.46), rgba(20,26,24,0.34) 48%, rgba(20,26,24,0.52)),
      radial-gradient(closest-side at 50% 46%, rgba(20,26,24,0.42), rgba(20,26,24,0) 78%);
  }
  .ed-hero--maison .ed-hero__inner {
    max-width: 900px; margin: 0 auto;
    /* Padding bas généreux (contenu vers le bas, place pour le cue de scroll). */
    padding: clamp(40px,8vh,90px) clamp(20px,5vw,56px) clamp(128px,19vh,208px);
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
  }
  .ed-hero__base {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(15px, 0.7vw + 0.5rem, 19px); letter-spacing: 0.02em;
    color: rgba(255,255,255,0.9); margin: 0 0 clamp(16px,2.4vh,24px);
  }
  .ed-hero--maison .ed-hero__h1 {
    text-align: center; max-width: 20ch;
    font-size: clamp(32px, 4.2vw, 62px); margin: 0 0 clamp(20px,2.8vh,30px);
  }
  .ed-hero--maison .ed-hero__rule { margin: 0 0 clamp(20px,3vh,30px); }
  .ed-hero--maison .ed-hero__lead { max-width: 52ch; text-align: center; }
  /* H1 SEO discret (centré, estompé) sous l'accroche du hero À propos. */
  .ed-hero--maison .ed-hero__kw {
    font-family: var(--sans); font-weight: 500;
    font-size: clamp(12px, 0.7vw + 0.3rem, 14px);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: clamp(20px, 3vh, 32px) 0 0; text-align: center;
  }

  /* ----- Hero collection : variante 2 colonnes plein écran -----
     Texte à gauche (fond blanc, texte nocturne), image à droite pleine
     hauteur, invitation au scroll (trait animé) sous le texte. Réutilise
     l'arrivée séquencée de .ed-hero (mais pas sa parallaxe, cf. scripts-ed). */
  .ed-hero--split {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: stretch;
    /* Review 23/06 : le blanc s'estompe en bas → on aperçoit un bout du voile
       de couleur de la collection (le fond du .collection-main transparaît)
       avant même de scroller. */
    background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 82%, transparent 100%);
    color: var(--fg);
  }
  .ed-hero--split::after { display: none; } /* pas de voile sur l'image */
  /* Image en colonne : absolue dans la colonne (hors flux) pour qu'elle
     REMPLISSE la hauteur sans l'imposer (un portrait 2:3 à demi-largeur ferait
     sinon ~1,5× la largeur en hauteur et dépasserait le 100svh). */
  .ed-hero--split .ed-hero__media {
    order: 2; position: relative; left: auto; top: auto;
    width: 100%; height: auto; overflow: hidden;
  }
  .ed-hero--split .ed-hero__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
  .ed-hero--split .ed-hero__inner {
    order: 1; position: relative; z-index: 2;
    max-width: none; margin: 0;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    padding: clamp(48px,9vh,110px) clamp(28px,5vw,84px);
    text-align: left;
  }
  .ed-hero--split .ed-hero__rule { background: var(--c-accent); }
  /* Trait déplacé SOUS « the wedding day » (review 19 juin) : marge en haut ET
     en bas pour séparer le bloc titre (nom + anglais) de l'accroche en dessous. */
  .ed-hero__rule--collection { margin-top: clamp(20px, 3vh, 32px); margin-bottom: clamp(22px, 3.2vh, 34px); }
  .ed-hero--split .collection__english { color: var(--fg-soft); }
  /* Nom de la collection = élément d'affichage (gros, Romance Dream), n'est
     plus le H1. Marge resserrée car le vrai H1 SEO le suit juste en dessous. */
  .ed-hero--split .ed-hero__h1 { color: var(--mm-nocturne); max-width: 14ch; margin-bottom: clamp(10px, 1.4vh, 16px); }
  /* Vrai H1 SEO, discret (modèle .hero__kw de la home) : porte la requête cible.
     Graisse volontairement plus fine que la home (400 vs 500) pour alléger le
     sous-titre sous le nom de collection. */
  .ed-hero--split .ed-hero__kw {
    font-family: var(--sans); font-weight: 400;
    font-size: clamp(12.5px, 0.8vw + 0.3rem, 15px);
    letter-spacing: 0.05em; line-height: 1.45;
    color: var(--mm-vert-cendre);
    margin: 0 0 clamp(18px, 2.6vh, 28px); max-width: 38ch;
  }
  .ed-hero--split .ed-hero__lead { color: var(--mm-vert-cendre); max-width: 42ch; }
  /* Invitation au scroll : libellé + trait vertical où un segment descend
     en boucle (remplace le pulse du cue plein écran). */
  .ed-hero--split .ed-hero__cue {
    position: static; transform: none; left: auto; bottom: auto;
    align-items: flex-start; margin-top: clamp(34px,6vh,64px);
    color: var(--fg-soft);
  }
  .ed-hero--split .ed-hero__cue::after {
    width: 1px; height: 58px;
    background-image: linear-gradient(to bottom, currentColor, currentColor);
    background-repeat: no-repeat; background-size: 100% 38%;
    background-position: 0 -50%; opacity: .85;
    animation: scrollSeg 2s cubic-bezier(.5,0,.5,1) infinite;
  }
  @keyframes scrollSeg {
    0%   { background-position: 0 -60%; opacity: 0; }
    22%  { opacity: .9; }
    78%  { opacity: .9; }
    100% { background-position: 0 160%; opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ed-hero--split .ed-hero__cue::after { animation: none; background-position: 0 50%; opacity: .6; }
  }

  /* ----- Sections collection : pleine largeur, bord à bord, alternées ----- */
  .coll-row {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: stretch; min-height: 100svh; /* chaque section = un plein écran */
    background: var(--bg);
    position: relative;
  }
  /* Séparateur doux UNIDIRECTIONNEL : l'ombre n'est portée que sur le BAS de
     la section du dessus (jamais des deux côtés de la jointure → pas de
     « double » ombre). Technique : le ::before de chaque section est placé
     juste AU-DESSUS d'elle (sur le bas de l'élément précédent) ; comme la
     section courante se peint après la précédente (ordre DOM), l'ombre
     apparaît sur le bas du précédent. Pleine largeur, dégradé sombre au
     ras de la jointure qui se dissipe vers le haut. */
  .coll-row::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    transform: translateY(-100%);
    height: clamp(54px, 8vh, 100px);
    background: linear-gradient(to bottom,
      rgba(47, 59, 55, 0) 0%, rgba(47, 59, 55, 0.22) 100%);
    pointer-events: none;
  }
  /* Dernière section : pas de section en dessous pour porter l'ombre, donc on
     la dessine sur son propre bas (vers le bloc CTA). Même rendu visuel. */
  .coll-row--last::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: clamp(54px, 8vh, 100px);
    background: linear-gradient(to bottom,
      rgba(47, 59, 55, 0) 0%, rgba(47, 59, 55, 0.22) 100%);
    pointer-events: none; z-index: 3;
  }
  /* Image absolue (hors flux) : remplit sa colonne sans imposer la hauteur,
     sinon le portrait 2:3 à demi-largeur dépasserait le 100svh de la section. */
  .coll-row__media { order: 1; position: relative; overflow: hidden; }
  .coll-row__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(.92) sepia(.05);
  }
  .coll-row__body {
    order: 2; display: flex; flex-direction: column; justify-content: center;
    padding: clamp(44px,8vh,100px) clamp(28px,5vw,88px);
  }
  /* Même espace titre/tiret que tiret/paragraphe (aligné sur .split__rule). */
  .coll-row__body .split__h2 { color: var(--mm-nocturne); margin: 0 0 clamp(18px,2.6vh,26px); }
  .coll-row__body p {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(15px, 0.5vw + 0.7rem, 17px); line-height: 1.85;
    color: var(--mm-nocturne); margin: 0; max-width: 46ch;
  }
  /* Image à droite, texte à gauche. */
  .coll-row--reverse .coll-row__media { order: 2; }
  .coll-row--reverse .coll-row__body { order: 1; }

  @media (max-width: 820px) {
    /* Hero et sections empilés : image au-dessus, texte en dessous. */
    .ed-hero--split { grid-template-columns: 1fr; min-height: auto; }
    .ed-hero--split .ed-hero__media { order: 1; height: auto; aspect-ratio: 3 / 2; }
    .ed-hero--split .ed-hero__inner { order: 2; padding: clamp(32px,6vh,56px) clamp(20px,6vw,32px) clamp(48px,8vh,72px); }
    .coll-row { grid-template-columns: 1fr; min-height: auto; }
    .coll-row__media,
    .coll-row--reverse .coll-row__media { order: 1; aspect-ratio: 3 / 2; }
    .coll-row__body,
    .coll-row--reverse .coll-row__body { order: 2; }
  }

  /* ===== Sections collection — mise en page ÉDITORIALE à images superposées
     (review 19 juin : remplace les coll-row pleine largeur, trop proches du
     hero). Largeur contenue, blanc généreux, 2 portraits qui se chevauchent
     en diagonale + texte, alternés gauche/droite. ===== */
  .coll-ed {
    display: grid; grid-template-columns: 1.04fr 1fr;
    align-items: center; gap: clamp(36px, 6vw, 104px);
    max-width: 1240px; margin: 0 auto;
    padding: clamp(54px, 11vh, 128px) clamp(24px, 6vw, 72px);
  }
  .coll-ed--reverse .coll-ed__text  { order: 2; }
  .coll-ed--reverse .coll-ed__media { order: 1; }
  .coll-ed__text { max-width: 42ch; }
  .coll-ed__text .split__h2 { color: var(--mm-nocturne); margin: 0 0 clamp(16px, 2.4vh, 24px); }
  .coll-ed__text p:not(.coll-present__en) {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(15px, .5vw + .7rem, 17px); line-height: 1.85;
    color: var(--mm-nocturne); margin: 0; max-width: 46ch;
  }
  /* Bouton « Découvrir » sur la page index : marge au-dessus pour respirer. */
  .coll-ed--index .prose-cta { margin-top: clamp(22px, 3vh, 32px); }
  /* Composition : 2 portraits décalés qui se chevauchent. */
  .coll-ed__media { position: relative; aspect-ratio: 1 / 1.04; }
  .coll-ed__fig { margin: 0; position: absolute; overflow: hidden; }
  .coll-ed__fig img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(.94) sepia(.04);
  }
  .coll-ed__fig--a { top: 0; left: 0; width: 66%; aspect-ratio: 2 / 3; z-index: 1; }
  .coll-ed__fig--b {
    bottom: 0; right: 0; width: 52%; aspect-ratio: 3 / 4; z-index: 2;
    border: 7px solid #fff; box-shadow: 0 22px 56px rgba(47, 59, 55, .20);
  }
  /* Section inversée (texte à droite) : on miroite le décalage des images. */
  .coll-ed--reverse .coll-ed__fig--a { left: auto; right: 0; }
  .coll-ed--reverse .coll-ed__fig--b { right: auto; left: 0; }
  @media (max-width: 860px) {
    .coll-ed { grid-template-columns: 1fr; gap: clamp(26px, 7vw, 40px); padding: clamp(40px, 7vh, 72px) clamp(20px, 6vw, 32px); }
    /* #111 : sur mobile, le bloc image passe TOUJOURS sous le texte de la
       collection (on annule l'inversion des cartes en quinconce). */
    .coll-ed--reverse .coll-ed__text { order: 0; }
    .coll-ed--reverse .coll-ed__media { order: 0; }
    .coll-ed__media { aspect-ratio: 1 / 1; max-width: 440px; width: 100%; margin: 0 auto; }
  }

  /* ===== Présentation épurée de collection (review 23/06 #105) =====
     Un bloc de texte (intro + corps + liste + suite) à gauche, une grande
     image verticale « en long » à droite (sticky), puis une galerie des
     autres images. Remplace les sections .coll-ed sur les pages collection.
     Couleurs par collection via --coll / --coll-deep (classe c-<slug>). */
  .coll-present {
    max-width: 1240px; margin: 0 auto;
    /* Review 23/06 : plus de marge en haut (le texte était trop collé au hero). */
    padding: clamp(80px, 13vh, 184px) clamp(20px, 5vw, 48px) clamp(48px, 9vh, 124px);
  }
  .coll-present__main {
    display: grid; grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(34px, 5vw, 78px); align-items: start;
  }
  /* min-width:0 : sans ça le marquee (width:max-content) gonfle la colonne
     texte et écrase la colonne image. */
  .coll-present__text { max-width: 60ch; min-width: 0; }
  .coll-present__intro {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(20px, 1.3vw + 0.5rem, 28px); line-height: 1.45;
    color: var(--mm-nocturne); margin: 0;
  }
  .coll-present__text .split__rule { background: var(--coll-deep); margin: clamp(20px, 3vh, 30px) 0; }
  .coll-present__text > p {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(15px, 0.5vw + 0.7rem, 17px); line-height: 1.85;
    color: var(--mm-nocturne); margin: 0 0 1.1em;
    text-align: justify; hyphens: auto;
  }
  .coll-present__text > p.coll-present__intro { text-align: left; hyphens: none; }
  /* Liste « d'une belle façon » (review #105) */
  .coll-present__list-lead {
    font-family: var(--sans); font-weight: 400; letter-spacing: 0.01em;
    font-size: clamp(14px, 0.5vw + 0.6rem, 16px); line-height: 1.6;
    color: var(--coll-deep); margin: 0 0 0.9em;
  }
  .coll-present__list { list-style: none; margin: 0 0 1.6em; padding: 0; }
  /* Bandeau DÉFILANT des mots-clés (review #105, remplace les pilules) :
     marquee horizontal en boucle continue, mots en grand façon titre, séparés
     d'une étoile. Les fondus latéraux masquent les bords. */
  .coll-mq {
    overflow: hidden; margin: clamp(8px,1.6vh,16px) 0 1.9em;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .coll-mq__track { display: flex; width: max-content; animation: collMq 26s linear infinite; }
  .coll-mq__group { display: flex; align-items: center; flex: none; }
  .coll-mq__item {
    font-family: var(--title); text-transform: lowercase; letter-spacing: 0.02em;
    /* Review 23/06 : un cran plus petit pour voir plus de mots à la fois. */
    font-size: clamp(16px, 1vw + 0.45rem, 25px); line-height: 1;
    color: var(--coll-deep); padding: 0 clamp(13px,1.5vw,24px); white-space: nowrap;
  }
  .coll-mq__sep { color: var(--coll-deep); opacity: .55; font-size: clamp(10px,0.7vw,13px); }
  @keyframes collMq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .coll-mq__track { animation: none; } }
  .coll-present__list--lines li {
    position: relative; padding-left: 28px; margin: 0 0 0.7em;
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(15px, 0.5vw + 0.7rem, 17px); line-height: 1.6;
    color: var(--mm-nocturne);
  }
  .coll-present__list--lines li::before {
    content: ''; position: absolute; left: 0; top: 0.62em;
    width: 14px; height: 1px; background: var(--coll-deep);
  }
  /* Composition CHEVAUCHANTE (review #8) : image principale + 2e décalée qui la
     chevauche, contour blanc + ombre (façon coll-ed), sans cadre coloré fin. */
  .coll-present__media { position: relative; align-self: start; min-width: 0; min-height: clamp(460px, 64vh, 720px); }
  .coll-present__fig { margin: 0; overflow: hidden; position: absolute; }
  .coll-present__fig img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(.94) sepia(.04); transition: transform 1.1s ease;
  }
  .coll-present__media:hover .coll-present__fig--a img { transform: scale(1.03); }
  .coll-present__fig--a { top: 0; left: 0; width: 72%; aspect-ratio: 3 / 4; z-index: 1; }
  .coll-present__fig--b {
    right: 0; bottom: 0; width: 52%; aspect-ratio: 3 / 4; z-index: 2;
    border: 6px solid #fff; box-shadow: 0 26px 58px -26px rgba(47,59,55,0.42);
  }
  /* Une seule image (pas de chevauchement possible) : pleine colonne. */
  .coll-present__media--solo { min-height: 0; }
  .coll-present__media--solo .coll-present__fig--a { position: relative; width: 100%; aspect-ratio: 2 / 3; }
  /* #131 : le bloc galerie de 3 photos est retiré de TOUTES les collections
     (desktop + mobile), sur demande du client. On ne garde que la composition
     de 2 images en haut. (Les règles de grille ci-dessous restent inertes.) */
  .coll-present__gallery {
    display: none; gap: clamp(14px, 1.6vw, 22px);
    margin-top: clamp(34px, 5vh, 64px);
  }
  /* Une seule image restante : bande paysage pleine largeur (moment large). */
  .coll-present__gallery--1 { grid-template-columns: 1fr; }
  .coll-present__gallery--1 .coll-present__shot img { aspect-ratio: 16 / 9; }
  .coll-present__gallery--2 { grid-template-columns: repeat(2, 1fr); }
  /* Galerie de 3 (review 23/06) : deux latérales ALIGNÉES (même niveau, même
     taille, sans contour, en retrait) + une image centrale PLUS GRANDE qui
     passe par-dessus. Contour blanc + ombre réservés à celle du milieu. */
  .coll-present__gallery--3 { grid-template-columns: 1fr 1.04fr 1fr; gap: 0; align-items: center; margin-top: clamp(48px, 7vh, 92px); }
  .coll-present__gallery--3 .coll-present__shot:nth-child(1),
  .coll-present__gallery--3 .coll-present__shot:nth-child(3) { z-index: 1; }
  .coll-present__gallery--3 .coll-present__shot:nth-child(2) {
    z-index: 3; margin: 0 -12%;
    border: 7px solid #fff; box-shadow: 0 28px 62px -26px rgba(47,59,55,0.45);
  }
  .coll-present__gallery--4 { grid-template-columns: repeat(4, 1fr); }
  .coll-present__shot { margin: 0; overflow: hidden; }
  .coll-present__shot img {
    width: 100%; height: 100%; display: block; aspect-ratio: 3 / 4; object-fit: cover;
    filter: saturate(.94) sepia(.04); transition: transform 1s ease;
  }
  .coll-present__shot:hover img { transform: scale(1.04); }
  @media (max-width: 860px) {
    .coll-present__main { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); }
    .coll-present__media { min-height: clamp(300px, 72vw, 440px); }
    .coll-present__gallery--3, .coll-present__gallery--4 { grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 3vw, 18px); }
    /* mobile : on annule le chevauchement (marges négatives + quinconce) */
    .coll-present__gallery--3 .coll-present__shot:nth-child(1),
    .coll-present__gallery--3 .coll-present__shot:nth-child(2),
    .coll-present__gallery--3 .coll-present__shot:nth-child(3) { margin: 0; }
  }

  /* ===== Retours Review mobile (juillet 2026) — pages collection ===== */
  @media (max-width: 620px) {
    /* (#131 : la galerie est désormais masquée globalement, plus besoin ici.) */
    /* #114-#121 : marges trop importantes. On resserre le rythme vertical de
       la page collection (après le hero, autour du bloc, avant « Explorer »). */
    .coll-present { padding: clamp(34px, 6vh, 56px) clamp(20px, 5vw, 32px) clamp(28px, 5vh, 48px); }
    .collection-main .rule-deco { margin: clamp(40px, 7vh, 72px) auto; }
    .collection__closing { padding: clamp(40px, 7vh, 68px) clamp(20px, 5vw, 32px) clamp(44px, 7vh, 72px); }
    .collection__closing.collection__closing--standalone { padding-top: clamp(34px, 6vh, 56px); padding-bottom: clamp(28px, 5vh, 48px); }
    .collection__cross--plain { padding-top: clamp(44px, 8vh, 80px); }
    .collection__cross { padding-bottom: clamp(40px, 7vh, 72px); }
    /* #112 : mieux cadrer les photos de la composition (montrer davantage le
       haut de l'image plutôt qu'un recadrage centré qui coupe). */
    .coll-present__fig img { object-position: center 22%; }
  }

  /* ===== Hero éditorial plein écran de la page /collections (review 19 juin) :
     texte centré, composition d'images sur les côtés (2 superposées à gauche,
     1 grande à droite). 100svh au chargement. ===== */
  /* Hero plein écran → on annule le padding-top de .page-main (sinon il
     décale tout vers le bas) : le hero gère lui-même l'espace sous le header. */
  .page-main:has(.coll-hero) { padding-top: 0; }
  .coll-hero {
    position: relative;
    min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    gap: clamp(20px, 3.5vw, 60px);
    /* Padding-top réduit + bottom plus généreux : le contenu (centré) remonte
       et l'image droite ne colle plus le bas (review 19 juin). */
    padding: clamp(84px, 10vh, 116px) clamp(24px, 5vw, 64px) clamp(60px, 10vh, 104px);
    overflow: hidden;
  }
  .coll-hero__side { flex: 1 1 0; min-width: 0; }
  .coll-hero__center { flex: 0 1 560px; text-align: center; }
  .coll-hero__center .page-hero__lead { max-width: 46ch; margin: clamp(20px, 3vh, 34px) auto 0; }
  /* Côté gauche : 2 portraits qui se chevauchent. */
  .coll-hero__side--left { position: relative; height: clamp(300px, 46vh, 450px); }
  .coll-hero__fig { margin: 0; position: absolute; overflow: hidden; }
  .coll-hero__fig img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.94) sepia(.04); }
  .coll-hero__fig--a { top: 0; left: 0; width: 64%; aspect-ratio: 2 / 3; z-index: 1; }
  .coll-hero__fig--b {
    bottom: 0; right: 0; width: 54%; aspect-ratio: 3 / 4; z-index: 2;
    border: 7px solid #fff; box-shadow: 0 18px 48px rgba(47, 59, 55, .2);
  }
  /* Côté droit : 1 grande image verticale, plus haute (mais contenue pour
     garder de l'air en haut et en bas). */
  .coll-hero__side--right { position: relative; height: clamp(380px, 62vh, 600px); }
  .coll-hero__fig--r { inset: 0; width: 100%; height: 100%; }
  @media (max-width: 920px) {
    .coll-hero {
      flex-direction: column; min-height: auto;
      gap: clamp(28px, 6vw, 44px);
      padding: clamp(108px, 16vh, 140px) clamp(20px, 6vw, 32px) clamp(40px, 7vh, 64px);
    }
    .coll-hero__side, .coll-hero__center { flex: none; width: 100%; }
    .coll-hero__center { order: -1; }
    .coll-hero__side--left  { height: clamp(300px, 50vh, 420px); max-width: 460px; width: 100%; margin: 0 auto; }
    /* Retour client : sur mobile, le hero de /collections ne garde que les
       deux photos de gauche ; la grande image de droite (bateau) est retirée. */
    .coll-hero__side--right { display: none; }
  }

  /* Section alternée image / texte */
  .split {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; gap: clamp(36px, 6vw, 96px);
    max-width: 1240px; margin: 0 auto;
    padding: clamp(56px, 10vh, 132px) clamp(20px, 5vw, 48px);
  }
  .split__media { overflow: hidden; }
  .split__media img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; aspect-ratio: 4 / 5;
    filter: saturate(.92) sepia(.05);
    transition: transform 1.2s ease;
  }
  .split__media:hover img { transform: scale(1.03); }
  .split--reverse .split__media { order: 2; }
  .split--reverse .split__body { order: 1; }
  .split__body { max-width: 48ch; }
  .split__h2 {
    font-family: var(--title); font-weight: 400;
    font-size: clamp(26px, 2.4vw + 0.4rem, 44px); line-height: 1.1;
    color: var(--mm-nocturne);
    /* Même espace au-dessus du tiret qu'en dessous (titre / tiret / paragraphe
       régulièrement espacés). Aligné sur le margin-bottom de .split__rule. */
    margin: 0 0 clamp(18px,2.6vh,26px);
  }
  .split__rule { width: 40px; height: 1px; background: var(--c-accent); margin: 0 0 clamp(18px,2.6vh,26px); }
  .split__body p {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(15px, 0.5vw + 0.7rem, 17px); line-height: 1.85;
    color: var(--mm-nocturne); margin: 0 0 1.1em;
  }
  .split__body p:last-child { margin-bottom: 0; }
  .split__body .prose-cta { margin-top: clamp(26px,3.5vh,40px); }

  /* Bloc valeurs : bandeau nocturne, 4 valeurs en grille (pause éditoriale). */
  /* Section « L'esprit » — review 22/06 (#84) : passée du bandeau nocturne à
     la variante claire « écriture bleue sur fond ivoire » (mockup client).
     Fond Voile d'Ivoire, accents Ciel Poudré ; le corps est assombri (mix vers
     le Nocturne) pour rester lisible sur fond clair. */
  /* #123 : le bloc ivoire « L'esprit » se fond dans le blanc de la page
     (dégradé haut/bas vers le blanc), au lieu d'un aplat aux bords francs. */
  .values { background: linear-gradient(180deg, #fff 0%, var(--mm-ivoire) 20%, var(--mm-ivoire) 80%, #fff 100%); color: var(--mm-ciel); --c-accent: var(--mm-ciel); }
  .values__inner {
    max-width: 1100px; margin: 0 auto;
    padding: clamp(64px, 12vh, 150px) clamp(20px, 5vw, 48px);
  }
  .values__head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 6vh, 68px); }
  .values__h2 {
    font-family: var(--title); font-weight: 400;
    font-size: clamp(28px, 3vw, 48px); line-height: 1.1;
    color: var(--mm-ciel); margin: 0 0 clamp(14px, 2vh, 20px);
  }
  .values__intro {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(16px, 1vw + 0.4rem, 20px); line-height: 1.5;
    color: color-mix(in srgb, var(--mm-ciel) 76%, var(--mm-nocturne)); margin: 0;
  }
  .values__grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2vw, 24px); text-align: left;
  }
  /* Carte valeur : encadré fin + lettrine en filigrane (esprit « Notre méthode »). */
  .values__item {
    position: relative; overflow: hidden;
    background: color-mix(in srgb, var(--mm-ciel) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--mm-ciel) 40%, transparent);
    padding: clamp(28px, 4vh, 44px) clamp(26px, 3.2vw, 42px);
    display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px);
  }
  .values__letter {
    position: absolute; right: clamp(-10px, -1vw, -6px); bottom: clamp(-30px, -3vh, -18px);
    font-family: var(--title); font-weight: 400;
    font-size: clamp(130px, 15vw, 200px); line-height: 0.9;
    color: var(--mm-ciel); opacity: .14; pointer-events: none; user-select: none;
  }
  .values__item h3 {
    /* Titres de cartes en Romance Dream BAS-DE-CASSE (capitales uniformes
       lisibles, règle générale). Couleur Ciel (section bleu/ivoire #84).
       Review 23/06 #90 : poids NORMAL (le faux-gras 700 sur Romance Dream,
       sans vraie graisse, créait des artefacts) — même typo que les autres
       titres ; bleu plus profond conservé pour le contraste. */
    font-family: var(--title); font-style: normal; font-weight: 400; letter-spacing: 0.025em;
    text-transform: lowercase;
    font-size: clamp(18px, 1vw + 0.45rem, 23px); line-height: 1.3;
    color: color-mix(in srgb, var(--mm-ciel) 64%, #102027); margin: 0; position: relative; z-index: 1;
  }
  .values__item p {
    /* Review 23/06 #90 : le corps était mixé avec le Nocturne (vert sombre)
       et tirait visiblement vers le vert. Mix avec un sombre bleuté neutre
       pour rester franchement bleu, tout en restant lisible sur l'ivoire. */
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(14px, 0.5vw + 0.6rem, 16px); line-height: 1.75;
    color: color-mix(in srgb, var(--mm-ciel) 56%, #102027); margin: 0; position: relative; z-index: 1;
  }

  @media (max-width: 820px) {
    .split { grid-template-columns: 1fr; gap: clamp(22px,4vh,32px); }
    .split--reverse .split__media,
    .split--reverse .split__body { order: 0; }
    .split__media img { aspect-ratio: 3 / 2; }
    .values__grid { grid-template-columns: 1fr; gap: 28px; }
  }

  /* ===== Page À propos — sections dédiées (review #19 / #23 / #26) ===== */

  /* Hero « nu » : image immersive sans texte par-dessus (#27). Voile très
     allégé (aucun texte à contraster, juste le repère et le header). */
  .ed-hero--bare::after {
    background:
      linear-gradient(to bottom, rgba(20,26,24,0.22), rgba(20,26,24,0.04) 38%, rgba(20,26,24,0.30));
  }

  /* Grande accroche (#23) : ce que nous faisons, centré, en grand. */
  .about-statement {
    max-width: 940px; margin: 0 auto;
    padding: clamp(80px, 14vh, 168px) clamp(20px, 5vw, 40px) clamp(56px, 9vh, 110px);
    text-align: center;
  }
  .about-statement__big {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(30px, 3.4vw + 0.4rem, 56px); line-height: 1.14;
    letter-spacing: 0.005em; color: var(--fg);
    margin: 0 auto clamp(22px, 3.2vh, 34px); max-width: 22ch;
  }
  .about-statement__kw {
    font-family: var(--sans); font-weight: 500;
    font-size: clamp(12px, 0.7vw + 0.3rem, 14px); letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-soft);
    margin: 0 0 clamp(22px, 3.2vh, 30px);
  }
  .about-statement__lead {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(18px, 1.5vw + 0.3rem, 24px); line-height: 1.5;
    color: var(--fg); max-width: 660px; margin: 0 auto;
  }
  /* Accroche descendue du hero (retour client 24/06) : même registre italique
     que le lead, posée en tête de la section, suivie d'un séparateur. */
  .about-statement__intro {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(19px, 1.6vw + 0.3rem, 26px); line-height: 1.5;
    color: var(--fg); max-width: 620px; margin: 0 auto;
  }
  /* Séparateur trait/étoile de la section : marges verticales généreuses
     (retour client 24/06 : plus d'air entre l'accroche, le filet et le titre). */
  .about-statement .rule-deco { margin-top: clamp(46px, 7vh, 88px); margin-bottom: clamp(50px, 7.5vh, 96px); }
  /* #122 : marges trop importantes sur mobile (haut de la page À propos) →
     on resserre l'accroche, le séparateur et « Nos fondations ». */
  @media (max-width: 620px) {
    .about-statement { padding: clamp(38px, 6vh, 58px) 20px clamp(30px, 5vh, 46px); }
    .about-statement .rule-deco { margin-top: clamp(26px, 4.5vh, 44px); margin-bottom: clamp(28px, 5vh, 46px); }
    .foundations { padding: clamp(10px, 2vh, 22px) 20px clamp(42px, 7vh, 68px); }
    .foundations__head { margin-bottom: clamp(28px, 5vh, 44px); }
  }

  /* Nos fondations (#19 + #21) : origine du nom + 3 noms mis en avant. */
  .foundations {
    max-width: 1120px; margin: 0 auto;
    padding: clamp(20px, 3vh, 40px) clamp(20px, 5vw, 40px) clamp(76px, 12vh, 140px);
  }
  .foundations__head { max-width: 800px; margin: 0 auto clamp(48px, 7vh, 84px); text-align: center; }
  .foundations__head .split__rule { margin-left: auto; margin-right: auto; }
  .foundations__head p {
    font-family: var(--sans); font-weight: 300; font-size: clamp(14px, 0.5vw + 0.6rem, 15px);
    line-height: 1.75; color: var(--fg-soft); margin: 0 0 14px;
  }
  /* Les 3 fondations forment un BLOC encadré : fin filet tout autour +
     filets verticaux entre les colonnes (même gris clair var(--rule) que
     les séparateurs et les bordures des cartes collections). */
  .foundations__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border: 1px solid var(--rule);
  }
  .foundations__item {
    text-align: center;
    padding: clamp(40px, 6vh, 76px) clamp(22px, 3vw, 44px);
    border-right: 1px solid var(--rule);
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column; align-items: center;
    transition: background-color .4s ease;
  }
  .foundations__item:last-child { border-right: 0; }
  /* Survol : voile de la COULEUR DE LA COLLECTION (review 23/06), plus le gris
     d'accent. Chaque item porte sa classe .c-<slug> qui définit --coll. */
  .foundations__item:hover { background: color-mix(in srgb, var(--coll) 20%, transparent); }
  .foundations__num {
    font-family: var(--serif); font-style: italic; font-size: 14px;
    color: var(--fg-soft); margin: 0 0 12px;
  }
  .foundations__name {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(28px, 2.2vw + 0.4rem, 40px); line-height: 1.08;
    color: var(--fg); margin: 0 0 16px; transition: color .3s ease;
  }
  .foundations__item:hover .foundations__name { color: var(--coll-deep); }
  .foundations__why {
    font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.7;
    color: var(--fg-soft); margin: 0 auto; max-width: 30ch;
  }
  .foundations__link {
    margin-top: clamp(16px, 2.4vh, 24px);
    font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em;
    color: var(--coll-deep); opacity: 0; transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease;
  }
  .foundations__item:hover .foundations__link { opacity: 1; transform: translateY(0); }

  /* Cindy · Joris · Ensemble (review 22/06, MAJ client) : on CONSERVE l'ancienne
     mise en page en pêle-mêle (3 colonnes, photo centrale Ensemble plus grande).
     On retire seulement la photo de GAUCHE (Cindy) et de DROITE (Joris) → leur
     texte « remonte » et occupe la colonne. La photo centrale (vraie photo des
     fondateurs) est conservée. Bios développées #74/#78/#79 ; portraits
     Cindy/Joris à intégrer au shooting (#26). */
  /* Section fondateurs (review 23/06 #3) : carte blanche à ombre portée qui
     CHEVAUCHE la photo (pattern « Se marier en Provence » de la home). Photo
     qui déborde d'un côté, carte texte de l'autre, superposées sur ~1 colonne.
     Alternance Cindy (photo gauche) / Joris (photo droite). */
  .founders { padding: clamp(20px,4vh,48px) 0 clamp(40px,7vh,96px); }
  .founders__bloc {
    grid-template-columns: repeat(12, minmax(0,1fr)); gap: 0;
    align-items: center;
    padding: clamp(30px,5vh,70px) clamp(20px,5vw,48px);
  }
  .founders__bloc .split__media { grid-column: 1 / 8; grid-row: 1; z-index: 1; }
  .founders__bloc .split__media img { aspect-ratio: 4 / 5; }
  /* Carte texte blanche qui chevauche la photo, ombre portée (z-index 2). */
  .founders__bloc .split__body {
    grid-column: 7 / 13; grid-row: 1; z-index: 2; max-width: none; align-self: center;
    background: #fff; box-shadow: 0 30px 70px -28px rgba(47,59,55,0.22);
    padding: clamp(30px,4.4vh,56px) clamp(26px,3.2vw,48px);
  }
  /* Bloc inversé (Joris) : photo à droite, carte à gauche. */
  .founders__bloc.split--reverse .split__media { grid-column: 6 / 13; }
  .founders__bloc.split--reverse .split__body { grid-column: 1 / 7; }
  /* Signature de chaque fondateur : phrase isolée, en serif italique, accent. */
  .founders__quote {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(18px, 1vw + 0.5rem, 23px); line-height: 1.4;
    color: var(--c-accent);
    margin: clamp(22px, 3vh, 32px) 0 0;
  }
  .founders__closing {
    text-align: center;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(21px, 1.4vw + 0.5rem, 30px); line-height: 1.4;
    color: var(--mm-nocturne);
    max-width: 720px; margin: clamp(24px, 5vh, 60px) auto 0; padding: 0 24px;
  }
  @media (max-width: 820px) {
    /* #124 : sur mobile, on suit l'ordre demandé par le client — Cindy, puis
       Joris, puis le bloc du couple (« Cindy & Joris »), puis la signature.
       Réordonnancement CSS uniquement (via order) : le contenu et l'ordre
       desktop restent identiques, on ne fait que déplacer l'affichage mobile. */
    .founders { display: flex; flex-direction: column; }
    .founders__bloc--intro { order: 2; }
    .founders__closing { order: 3; }
    .founders__bloc { grid-template-columns: 1fr; padding-top: clamp(24px,5vh,48px); padding-bottom: clamp(24px,5vh,48px); }
    .founders__bloc .split__media,
    .founders__bloc.split--reverse .split__media { grid-column: 1; grid-row: 1; }
    .founders__bloc .split__body,
    .founders__bloc.split--reverse .split__body {
      grid-column: 1; grid-row: 2; margin: clamp(-56px,-8vw,-32px) clamp(14px,4vw,30px) 0;
    }
  }
  @media (max-width: 760px) {
    .foundations__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
    .foundations__item { border-right: 0; border-bottom: 1px solid var(--rule); }
    .foundations__item:last-child { border-bottom: 0; }
  }

  /* ===== Journal : liste + carte article ===== */
  /* Séparateur étoile de la charte entre l'accroche et la grille d'articles :
     pleine largeur + espace au-dessus, voir .rule-deco--page (défini après la
     règle .rule-deco de base pour l'emporter dans la cascade). */
  .journal-section { padding-bottom: clamp(60px, 10vh, 120px); }
  .journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 48px); }
  .journal-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
  .journal-card__media { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--mm-sauge); }
  .journal-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) sepia(.05); transition: transform 1s ease; }
  .journal-card:hover .journal-card__media img { transform: scale(1.04); }
  .journal-card__media--empty { background: linear-gradient(135deg, var(--mm-sauge), var(--mm-blush)); }
  .portfolio__tile-empty { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--mm-sauge), var(--mm-blush)); }
  .journal-card__body { padding: 18px 2px 0; display: flex; flex-direction: column; gap: 8px; }
  .journal-card__meta { font-family: var(--sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-soft); }
  .journal-card__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.4vw + .5rem, 26px); line-height: 1.25; color: var(--mm-nocturne); }
  .journal-card__excerpt { font-family: var(--sans); font-weight: 300; font-size: 15px; line-height: 1.65; color: var(--fg-soft); }
  .journal-card:hover .journal-card__title { color: var(--mm-vert-cendre); }
  .journal-empty { text-align: center; font-family: var(--serif); font-style: italic; color: var(--fg-soft); padding: clamp(40px, 8vh, 100px) 0; }
  @media (max-width: 880px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .journal-grid { grid-template-columns: 1fr; } }

  /* ===== Article ===== */
  .article { padding-bottom: clamp(48px, 8vh, 96px); }
  .article__head { max-width: 720px; margin: 0 auto clamp(28px, 4vh, 44px); padding: 0 clamp(20px, 5vw, 40px); text-align: center; }
  .article__meta { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft); margin: 0 0 16px; }
  .article__title { font-size: clamp(30px, 3.4vw + .5rem, 52px); line-height: 1.08; color: var(--mm-nocturne); margin: 0 0 clamp(16px, 2.4vh, 24px); }
  .article__chapeau { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(18px, 1.2vw + .5rem, 24px); line-height: 1.5; color: var(--mm-vert-cendre); margin: 0; }
  .article__cover { max-width: 1000px; margin: 0 auto clamp(32px, 5vh, 60px); padding: 0 clamp(20px, 5vw, 40px); }
  .article__cover img { width: 100%; height: auto; display: block; filter: saturate(.92) sepia(.05); }
  .article__body p { font-family: var(--sans); font-weight: 300; font-size: clamp(16px, .5vw + .7rem, 17px); line-height: 1.85; color: var(--mm-nocturne); margin: 0 0 1.2em; }
  .article__h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(23px, 1.8vw + .4rem, 30px); line-height: 1.25; color: var(--mm-nocturne); margin: clamp(34px, 5vh, 52px) 0 .5em; }
  .article__h3 { font-family: var(--sans); font-weight: 500; font-size: 18px; letter-spacing: .02em; color: var(--mm-nocturne); margin: 2em 0 .6em; }
  .article__quote { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(20px, 1.6vw + .4rem, 28px); line-height: 1.4; color: var(--mm-vert-cendre); border-left: 2px solid var(--c-accent); padding-left: clamp(18px, 2vw, 28px); margin: clamp(28px, 4vh, 44px) 0; }
  .article__list { margin: 0 0 1.2em; padding: 0 0 0 1.1em; }
  .article__list li { font-family: var(--sans); font-weight: 300; font-size: clamp(16px, .5vw + .7rem, 17px); line-height: 1.75; color: var(--mm-nocturne); margin: 0 0 .5em; }
  .article__hr { border: 0; height: 1px; background: var(--rule); margin: clamp(32px, 5vh, 52px) auto; max-width: 120px; }
  .article__figure { margin: clamp(28px, 4vh, 44px) 0; }
  /* Images du corps : carré (1:1), calé sur la largeur de la colonne de
     lecture. Pas de débordement, hauteur maîtrisée — propre en desktop comme
     en mobile. Recadrage centré (object-fit: cover). */
  .article__figure img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; filter: saturate(.92) sepia(.05); }
  .article__figure figcaption { font-family: var(--sans); font-size: 13px; color: var(--fg-soft); text-align: center; margin-top: 10px; }
  .article__body code { font-family: ui-monospace, monospace; font-size: .9em; background: color-mix(in srgb, var(--mm-sauge) 30%, transparent); padding: 1px 5px; border-radius: 3px; }
  .article__back { text-align: center; margin-top: clamp(40px, 6vh, 64px); }

  /* ----- Hero article : immersif (image mise en avant + titre) -----
     Réutilise .ed-hero / .ed-hero--maison (image plein écran, voile,
     bloc centré, arrivée séquencée de scripts-ed). Le titre est le H1. */
  .ed-hero--article { min-height: 82svh; }
  .ed-hero--article .ed-hero__base {
    font-family: var(--sans); font-style: normal; font-weight: 500;
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.82); margin: 0 0 clamp(16px,2.4vh,24px);
  }
  .ed-hero--article .ed-hero__h1 { max-width: 22ch; }
  .ed-hero--article .ed-hero__lead { max-width: 50ch; }
  /* Corps de l'article : respire sous le hero plein écran. */
  .article-page .article__body { padding-top: clamp(54px, 8vh, 96px); }

  /* Photos dans le corps : traitement éditorial. .--wide déborde la colonne
     de lecture (720) ; .--demo (photos d'illustration injectées au build)
     est recadrée pour garder un rythme régulier. Les images Notion réelles
     (sans .--demo) conservent leur ratio naturel. */
  /* Plus de débordement pleine largeur : toutes les images du corps restent
     dans la colonne, en carré (cf. .article__figure img ci-dessus). */

  /* ===== Bloc « explore » : maillage de fin de page (réutilisable) =====
     Cartes de redirection vers les autres pages clés. Variante --dark pour
     les fonds nocturne (page contact). Calqué sur .collection__cross. */
  .explore { max-width: 1100px; margin: 0 auto; padding: clamp(20px,3vh,32px) clamp(20px,5vw,40px) clamp(76px,11vh,130px); }
  .explore__title { font-family: var(--title); font-style: normal; font-weight: 400; letter-spacing: 0.025em; font-size: clamp(20px,1.4vw + .4rem,26px); color: var(--mm-nocturne); text-align: center; margin: 0 0 clamp(28px,4vh,44px); }
  .explore__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px,2vw,28px); }
  .explore-card { display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; min-height: clamp(118px,15vh,150px); text-decoration: none; padding: clamp(22px,3vw,32px); border: 1px solid var(--rule); position: relative; transition: border-color .3s ease; }
  .explore-card:hover { border-color: var(--c-accent); }
  .explore-card__kicker { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); }
  .explore-card__name { font-family: var(--title); font-style: normal; text-transform: lowercase; letter-spacing: 0.025em; font-size: clamp(20px,1.5vw + .3rem,28px); line-height: 1.2; color: var(--mm-nocturne); }
  .explore-card__arrow { position: absolute; right: clamp(20px,3vw,30px); top: clamp(20px,3vw,26px); color: var(--c-accent); transition: transform .3s ease; }
  .explore-card:hover .explore-card__arrow { transform: translateX(4px); }
  .explore .prose-cta { justify-content: center; margin-top: clamp(30px,4.5vh,48px); }
  /* Variante sombre (page contact) : la couleur ivoire est portée par le bloc
     pour que l'étoile rule-deco (currentColor) soit visible sur le nocturne. */
  .explore--dark { color: var(--mm-ivoire); }
  .explore--dark .explore__title { color: var(--mm-ivoire); }
  .explore--dark .explore-card { border-color: rgba(244,238,231,.22); }
  .explore--dark .explore-card:hover { border-color: var(--mm-sauge); }
  .explore--dark .explore-card__kicker { color: rgba(244,238,231,.6); }
  .explore--dark .explore-card__name { color: var(--mm-ivoire); }
  .explore--dark .explore-card__arrow { color: var(--mm-sauge); }
  /* Variante panneau blanc (fin de page contact) : le bloc « Poursuivre la
     visite » sort du fond nocturne étoilé et se pose sur un panneau blanc
     pleine largeur, dans la continuité des panneaux .contact-top__intro /
     .contact-where__info. z-index 2 pour passer au-dessus des étoiles fixes ;
     contenu (titre + grille) recentré sur 1100. */
  /* Portfolio défilant sur Contact (review 23/06, fond BLANC) : carrousel
     d'images SANS titre, sur fond blanc (sortie du nocturne étoilé), avant
     « Poursuivre la visite ». Réutilise le composant .portfolio__*. */
  .contact-portfolio {
    position: relative; z-index: 2; background: #fff;
    /* Padding haut agrandi (retour client 24/06) : plus d'air blanc entre le
       bas du fond vert étoilé (section carte) et la galerie d'images. */
    padding: clamp(88px, 15vh, 190px) 0 clamp(44px, 7vh, 88px);
  }
  /* Séparateur sur fond blanc, descendu (plus d'air avant les photos).
     Sélecteur .contact-standalone … pour battre le margin-bottom du .rule-deco
     de base (sinon une bande nocturne s'intercale avant « Poursuivre »). */
  .contact-standalone .rule-deco--contact {
    position: relative; z-index: 2; background: #fff; color: var(--mm-nocturne);
    max-width: none; margin: 0 auto; padding: clamp(40px, 6vh, 82px) clamp(24px, 7vw, 140px);
  }
  .contact-standalone .rule-deco--contact::before,
  .contact-standalone .rule-deco--contact::after { border-top-color: rgba(47, 59, 55, 0.2); }

  .explore--panel {
    position: relative; z-index: 2;
    background: #fff;
    max-width: none; margin: 0;
    padding: clamp(60px, 9vh, 110px) clamp(20px, 5vw, 48px) clamp(76px, 11vh, 130px);
    --fg: var(--mm-nocturne);
    --fg-soft: rgba(47, 59, 55, 0.66);
    --rule: rgba(47, 59, 55, 0.18);
    --c-accent: var(--mm-vert-cendre);
  }
  /* Titre « Poursuivre la visite » à la MÊME taille que les autres H2 de Contact
     (review 23/06 : il paraissait plus petit que « Une maison ancrée… »). */
  .explore--panel .explore__title { max-width: 1100px; margin: 0 auto clamp(28px,4vh,44px); color: var(--mm-nocturne); font-size: clamp(22px, 1.6vw + 0.5rem, 32px); }
  /* Review 23/06 : cartes « Poursuivre » épurées, FOND BLANC (plus de teinte
     bleu/vert/rose), en blocs linéaires séparés par des filets, façon « Nos
     fondations » de À propos. */
  .explore--panel .explore__grid {
    grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1100px; margin: 0 auto;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  }
  /* Bas d'article : seulement 2 cartes → 2 colonnes (éviter la 3e vide).
     Limité au-dessus du point de bascule mobile : sous 720px, la règle
     d'empilement (1 colonne, plus bas) doit primer malgré le :has(). */
  @media (min-width: 721px) {
    .explore--panel .explore__grid:has(.explore-card:nth-child(2):last-child) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .explore--panel .explore-card {
    background: #fff;
    border: 0; border-right: 1px solid var(--rule);
    min-height: 0; text-align: center; align-items: center; justify-content: center;
    padding: clamp(34px, 5vh, 58px) clamp(20px, 3vw, 40px); gap: 12px;
    transition: background-color .35s ease;
  }
  .explore--panel .explore-card:last-child { border-right: 0; }
  .explore--panel .explore-card__kicker { color: var(--fg-soft); }
  .explore--panel .explore-card__name { color: var(--mm-nocturne); }
  .explore--panel .explore-card__arrow { position: static; color: var(--fg-soft); margin-top: 4px; }
  .explore--panel .explore-card:hover { background: color-mix(in srgb, var(--mm-nocturne) 4%, transparent); }
  @media (max-width: 720px) {
    .explore--panel .explore__grid { grid-template-columns: 1fr; }
    .explore--panel .explore-card { border-right: 0; border-bottom: 1px solid var(--rule); }
    .explore--panel .explore-card:last-child { border-bottom: 0; }
  }

  /* ===== Page 404 (introuvable) =====
     Plein écran nocturne étoilé, dans l'esprit de la page Contact : champ
     d'étoiles fixe rendu visible, texte ivoire, accent ivoire. Le « 0 » du
     code 404 est l'étoile Maison Mistral (gimmick de marque). Puis le footer
     habituel en dessous (bloc blanc + barre nocturne, comme la home). */
  .notfound {
    position: relative;
    min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    background: var(--mm-nocturne);
    color: var(--mm-ivoire);
    --fg: var(--mm-ivoire);
    --fg-soft: rgba(244, 238, 231, 0.66);
    --c-accent: var(--mm-ivoire);
    padding: clamp(132px, 20vh, 200px) clamp(24px, 6vw, 80px) clamp(88px, 13vh, 150px);
    text-align: center;
    overflow: hidden;
  }
  /* Étoiles fixes rendues visibles (opacity 0 par défaut, comme sur contact). */
  .notfound .stars { opacity: 0.4; }
  .notfound__inner { position: relative; z-index: 2; max-width: 660px; }
  .notfound__code {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(8px, 1.6vw, 22px);
    font-size: clamp(96px, 23vw, 230px); line-height: 0.9;
    color: var(--mm-ivoire);
    margin: 0 0 clamp(26px, 5vh, 48px);
  }
  .notfound__star {
    width: clamp(56px, 14vw, 138px); height: auto; flex: 0 0 auto;
    fill: var(--mm-sauge);
    animation: nfTwinkle 4.6s ease-in-out infinite;
  }
  @keyframes nfTwinkle {
    0%, 100% { opacity: 0.85; transform: rotate(0deg) scale(1); }
    50%      { opacity: 1;    transform: rotate(180deg) scale(1.07); }
  }
  .notfound__title {
    font-size: clamp(26px, 3vw + 0.5rem, 46px); line-height: 1.12;
    color: var(--mm-ivoire); margin: 0 0 clamp(16px, 2.5vh, 24px);
  }
  .notfound__text {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(15px, 0.5vw + 0.7rem, 17px); line-height: 1.8;
    color: rgba(244, 238, 231, 0.78);
    margin: 0 auto clamp(36px, 5.5vh, 52px); max-width: 46ch;
  }
  .notfound__actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(18px, 3vw, 36px);
  }
  /* Entrée douce du bloc (le data-anim="pending" reste sans JS dédié ici :
     l'animation est purement CSS, donc toujours jouée, et neutralisée en
     prefers-reduced-motion). */
  .notfound__inner { animation: nfRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  @keyframes nfRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .notfound__star { animation: none; }
    .notfound__inner { animation: none; }
  }

  /* Page 404 entièrement nocturne : body sombre (sinon du blanc apparaîtrait
     derrière le footer) + barre du bas du footer transparente, comme la home
     et la page contact → les étoiles fixes se prolongent derrière elle. */
  body.notfound-page { background: var(--mm-nocturne); }
  body.page.notfound-page .footer__base { background: transparent; }

  /* Closing CTA autonome (index collections) : ajoute l'air en bas. */
  /* Page /collections : on équilibre le blanc autour du bloc CTA final.
     Double classe pour battre le shorthand `padding: … 0` de
     .collection__closing (défini plus bas) qui remettait le bas à 0 (boutons
     collés au footer). Au-dessus s'ajoute déjà le padding-bottom de
     .coll-present-list (~63px), en dessous le padding-top du footer (~81px) :
     on compense pour obtenir un espace haut/bas symétrique. */
  .collection__closing.collection__closing--standalone {
    padding-top: clamp(52px, 7vh, 90px);
    padding-bottom: clamp(40px, 6vh, 76px);
  }

  /* ===== Page Collection (gabarit) ===== */
  .collection__english { font-family: var(--title); text-transform: lowercase; font-size: clamp(15px, .65vw + .45rem, 19px); letter-spacing: .08em; color: rgba(255,255,255,.85); margin: 10px 0 0; }
  /* Les sections s'enchaînent avec leur propre rythme (padding par défaut du
     .split), sans séparateur entre elles. Le SEUL séparateur de la page est
     l'étoile de la charte, placée avant « Explorer nos autres collections ».
     On le contraint à la largeur du contenu (sinon le filet barre tout l'écran). */
  /* Séparateur du gabarit collection, avant « Explorer nos autres collections » :
     contraint à la largeur du contenu (sinon le filet barre tout l'écran au-dessus
     d'un bloc centré). Marge symétrique, le séparateur porte seul l'espacement. */
  .collection-main .rule-deco {
    /* Review 23/06 : filet allongé (quasi pleine largeur) + plus d'air. */
    max-width: none;
    margin: clamp(84px, 12vh, 150px) auto;
    padding: 0 clamp(24px, 7vw, 140px);
  }
  /* padding-bottom à 0 : c'est la marge du séparateur qui crée le gap au-dessus. */
  /* Marge généreuse au-dessus du bloc CTA : il succède à des sections
     immersives pleine hauteur, il lui faut de l'air pour respirer. */
  /* Review 23/06 : grande marge BASSE dans la couleur sous « Aucun tarif
     affiché », pour aérer la transition couleur → blanc avant « Explorer ». */
  .collection__closing { max-width: 720px; margin: 0 auto; padding: clamp(84px, 14vh, 156px) clamp(20px, 5vw, 40px) clamp(100px, 15vh, 168px); text-align: center; }
  .collection__cta-text { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(20px, 1.4vw + .4rem, 28px); line-height: 1.45; color: var(--mm-vert-cendre); margin: 0 0 clamp(24px, 3.5vh, 36px); }
  .collection__closing .prose-cta { justify-content: center; }
  .collection__note { font-family: var(--sans); font-weight: 300; font-size: 13px; color: var(--fg-soft); margin: clamp(28px, 4vh, 44px) 0 0; }
  .collection__cross { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px) clamp(72px, 11vh, 130px); }
  .collection__cross-title { font-family: var(--title); font-style: normal; font-weight: 400; letter-spacing: 0.025em; font-size: clamp(20px, 1.4vw + .4rem, 26px); color: var(--mm-nocturne); text-align: center; margin: 0 0 clamp(28px, 4vh, 44px); }
  /* Repris du design « Nos fondations » (À propos) — retour client 24/06 :
     blocs COLLÉS dans un cadre unique (filet entre colonnes), centrés, fond
     blanc au repos, voile de la couleur de la collection au survol seulement. */
  .collection__cross-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); }
  .collection__cross-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none; padding: clamp(40px, 6vh, 76px) clamp(22px, 3vw, 44px); border: 0; border-right: 1px solid var(--rule); transition: background-color .4s ease; }
  .collection__cross-card:last-child { border-right: 0; }
  .collection__cross-en { font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: var(--fg-soft); transition: color .3s ease; }
  .collection__cross-name { text-transform: lowercase; font-size: clamp(24px, 2vw + .4rem, 34px); color: var(--mm-nocturne); transition: color .3s ease; }
  .collection__cross-arrow { margin-top: 4px; color: var(--fg-soft); transition: transform .3s ease, color .3s ease; }
  .collection__cross-card:hover .collection__cross-arrow { transform: translateX(4px); }
  @media (max-width: 600px) {
    .collection__cross-grid { grid-template-columns: 1fr; }
    .collection__cross-card { border-right: 0; border-bottom: 1px solid var(--rule); }
    .collection__cross-card:last-child { border-bottom: 0; }
  }

  /* ===== Couleur par collection (review 22/06 #38-42, renforcée) =====
     Chaque collection porte sa couleur de charte (Miréio = Blush, Mistrau =
     Sauge, Maire = Ciel), en accents graphiques + léger voile de fond.
     --coll = pastel (voile, cadres) ; --coll-deep = version foncée LISIBLE
     (traits, labels, flèches, bordures). Posé via .c-<slug> (page collection +
     cartes home) ET les modificateurs --<slug> (puces de maillage). */
  .c-mireio,  .collection__cross-card--mireio,  .explore-card--mireio  { --coll: var(--mm-blush); --coll-deep: color-mix(in srgb, var(--mm-blush) 42%, var(--mm-brun)); }
  .c-mistrau, .collection__cross-card--mistrau, .explore-card--mistrau { --coll: var(--mm-sauge); --coll-deep: color-mix(in srgb, var(--mm-sauge) 46%, var(--mm-vert-cendre)); }
  .c-maire,   .collection__cross-card--maire,   .explore-card--maire   { --coll: var(--mm-ciel);  --coll-deep: color-mix(in srgb, var(--mm-ciel) 66%, var(--mm-nocturne)); }
  /* Maillage générique (contact / article), sans collection cible : on cycle. */
  .explore__grid .explore-card:not([class*="explore-card--"]):nth-child(3n+1) { --coll: var(--mm-ciel);  --coll-deep: color-mix(in srgb, var(--mm-ciel) 66%, var(--mm-nocturne)); }
  .explore__grid .explore-card:not([class*="explore-card--"]):nth-child(3n+2) { --coll: var(--mm-sauge); --coll-deep: color-mix(in srgb, var(--mm-sauge) 46%, var(--mm-vert-cendre)); }
  .explore__grid .explore-card:not([class*="explore-card--"]):nth-child(3n+3) { --coll: var(--mm-blush); --coll-deep: color-mix(in srgb, var(--mm-blush) 42%, var(--mm-brun)); }

  /* Puces de maillage explore (variante colorée historique) : fond teinté +
     bordure + label/flèche dans la couleur. */
  .explore-card {
    background: color-mix(in srgb, var(--coll) 16%, transparent);
    border-color: color-mix(in srgb, var(--coll) 60%, var(--rule));
  }
  .explore-card:hover {
    border-color: var(--coll-deep);
    background: color-mix(in srgb, var(--coll) 26%, transparent);
  }
  .explore-card__kicker, .explore-card__arrow { color: var(--coll-deep); }
  /* « Explorer nos autres collections » : fond blanc au repos, VOILE de la
     couleur de la collection au survol seulement (nom + label + flèche colorés
     au survol), façon « Nos fondations ». Filet entre colonnes inchangé. */
  .collection__cross-card:hover { background: color-mix(in srgb, var(--coll) 20%, transparent); }
  .collection__cross-card:hover .collection__cross-name,
  .collection__cross-card:hover .collection__cross-en,
  .collection__cross-card:hover .collection__cross-arrow { color: var(--coll-deep); }

  /* ----- Page collection : la couleur infuse toute la page ----- */
  /* Voile de fond léger sur la page entière. */
  .collection-main.c-mireio, .collection-main.c-mistrau, .collection-main.c-maire {
    /* #130 (itération) : DÉGRADÉ CONTINU qui s'INTENSIFIE vers le bas (au lieu
       de fondre en blanc avant le closing). La couleur reste présente jusqu'au
       bloc de contact (closing coloré) ; le fondu vers le blanc ne se fait que
       dans « Explorer » (via son ::before). Plus de trait séparateur couleur/
       blanc. Même logique sur les 3 collections (chacune sa teinte). */
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--coll) 24%, #fff) 0%,
      color-mix(in srgb, var(--coll) 32%, #fff) 55%,
      color-mix(in srgb, var(--coll) 42%, #fff) 100%);
    background-repeat: no-repeat;
  }
  /* Cadre des photos (ex-blanc) → teinte de la collection. */
  .collection-main .coll-ed__fig--b { border-color: var(--coll); }
  /* Traits, label « the wedding day », trait de scroll, étoile → couleur foncée. */
  .collection-main .split__rule,
  .collection-main .ed-hero--split .ed-hero__rule { background: var(--coll-deep); }
  .collection-main .ed-hero--split .collection__english { color: var(--coll-deep); }
  .collection-main .ed-hero--split .ed-hero__cue { color: var(--coll-deep); }
  .collection-main .rule-deco svg { color: var(--coll-deep); }
  .collection-main .collection__cta-text { color: var(--coll-deep); }
  /* Review #104 : la section « Explorer nos autres collections » sort du voile
     (fond blanc pleine largeur) → transition couleur → blanc juste après le
     bloc de contact, sans séparateur à cet endroit. */
  /* Marge BLANCHE au-dessus de « Explorer » (review 23/06) : le fond blanc
     démarre haut, l'espace blanc sépare nettement de la zone colorée. */
  .collection__cross--plain { position: relative; isolation: isolate; padding-top: clamp(100px, 15vh, 168px); }
  /* #130 : la couleur de la page se FOND vers le blanc ICI (et seulement ici),
     en dégradé doux — plus de trait ni de coupure nette. Le haut d'« Explorer »
     prolonge la teinte du dégradé, le blanc s'installe avant les cartes. */
  .collection__cross--plain::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 100vw; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent 0%, var(--bg) 40%, var(--bg) 100%);
    z-index: -1;
  }

  /* Rappel discret sur les cartes collection de la home : label anglais + numéro
     dans la couleur de la collection (la carte porte .c-<slug>). */
  .collection-card.c-mireio .collection-card__name-sub,
  .collection-card.c-mistrau .collection-card__name-sub,
  .collection-card.c-maire .collection-card__name-sub { color: var(--coll-deep); }
  .collection-card.c-mireio .collection-card__num,
  .collection-card.c-mistrau .collection-card__num,
  .collection-card.c-maire .collection-card__num { color: var(--coll-deep); }

  /* ===== Index /collections : présentation en sections alternées =====
     Chaque collection est un .split (image / texte alterné gauche-droite),
     aéré comme À propos, avec un label EN, le nom, l'accroche et un bouton
     « Découvrir ». Pas de séparateur entre les sections : le padding du
     .split porte le rythme. Image = c.heroImage (source unique). */
  .coll-present-list { padding-bottom: clamp(40px, 7vh, 96px); }
  .coll-present__en {
    font-family: var(--title); text-transform: lowercase; font-size: 15px; letter-spacing: .08em;
    color: var(--fg-soft); margin: 6px 0 0;
  }

  /* Quand le menu est ouvert : on garde la topbar visible (donc le
     burger, qui se transforme en croix) mais on masque l'horloge et
     le mot pour ne laisser que la croix de fermeture. */
  body.nav-open .topbar__repere { opacity: 0; visibility: hidden; }

  /* Le panneau du menu est TOUJOURS blanc → la croix de fermeture doit être
     foncée pour rester visible, quel que soit l'endroit où l'on a ouvert le
     menu. Sans ça, le burger suit l'encre du scrub (--header-ink) et devient
     clair/invisible si on ouvre le menu sur une section sombre ou en pleine
     transition de couleur. On fige donc le header en foncé + on coupe le
     mix-blend dès que le menu est ouvert (!important pour battre topbar-solid,
     over-hero et le scrub). */
  body.nav-open .topbar {
    mix-blend-mode: normal !important;
    color: var(--mm-nocturne) !important;
  }
  /* Le wordmark du header est une IMAGE blanche (rendue visible par le
     mix-blend ou un filtre d'inversion selon le fond). Menu ouvert = fond blanc
     + mix-blend coupé → on la force en noir pour qu'elle reste lisible. */
  body.nav-open .topbar__brand img,
  body.nav-open .topbar__logo {
    filter: brightness(0) !important;
  }

  /* ===== PANNEAU NAV ===== */

  /* Panneau burger minimaliste (review 2026-05-28 v2) : juste les
     liens de nav centrés, en minuscules, fond blanc. La fermeture
     se fait via le burger existant en haut à droite. */
  .nav-panel {
    position: fixed; inset: 0; z-index: 70;
    background: #ffffff;
    color: var(--mm-nocturne);
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(80px, 12vh, 140px) clamp(32px, 8vw, 100px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    overflow-y: auto;
  }
  .nav-panel.is-open { opacity: 1; visibility: visible; }

  .nav-panel__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: clamp(14px, 2.2vh, 26px);
  }
  .nav-panel__link {
    position: relative;
    display: inline-block;
    font-family: var(--title);
    font-weight: 400;
    font-size: clamp(26px, 2.4vw + 0.5rem, 38px);
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--mm-nocturne);
    padding: 0;
    transition: color 0.3s ease, padding-left 0.3s ease;
  }
  .nav-panel__link:hover {
    color: var(--mm-vert-cendre);
    padding-left: 8px;
  }
  /* Variante « label » : le mot sert juste de titre de groupe
     (Collections), pas de lien — pas de cursor pointer, pas de hover. */
  .nav-panel__link--label {
    cursor: default;
  }
  .nav-panel__link--label:hover {
    color: var(--mm-nocturne);
    padding-left: 0;
  }

  /* Sous-menu Collections : aligné quasi sous le titre, juste un
     léger retrait pour signaler la hiérarchie. */
  .nav-panel__sub {
    list-style: none;
    margin: clamp(8px, 1.2vh, 14px) 0 clamp(8px, 1.2vh, 14px) clamp(4px, 0.4vw, 8px);
    padding: 0;
    display: flex; flex-direction: column;
    gap: clamp(6px, 0.9vh, 10px);
  }
  .nav-panel__sub a {
    display: inline-flex; align-items: baseline; gap: 14px;
    color: rgba(47, 59, 55, 0.65);
    transition: color 0.3s ease, padding-left 0.3s ease;
    padding: 2px 0;
  }
  .nav-panel__sub a:hover {
    color: var(--mm-vert-cendre);
    padding-left: 4px;
  }
  .nav-sub__name {
    font-family: var(--title);
    font-weight: 400; letter-spacing: 0.005em;
    font-size: clamp(17px, 0.9vw + 0.3rem, 22px);
    line-height: 1.2;
    color: var(--mm-nocturne);
  }
  .nav-sub__desc {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(12px, 0.5vw + 0.2rem, 14px);
    letter-spacing: 0.04em;
    color: rgba(47, 59, 55, 0.5);
  }

  /* ===== ÉTOILES ===== */
  .stars {
    position: fixed; inset: 0;
    pointer-events: none;
    opacity: 0; z-index: 1;
  }
  .stars svg { width: 100%; height: 100%; display: block; }

  /* ===== PIVOT ===== */

  /* ===== HERO ===== */
  .hero {
    /* Deux écrans : phase 1 = médaillon centré qui se déplace vers
       le header ; phase 2 = texte « Votre amour… » sur la vidéo. */
    min-height: 200svh;
    display: grid; grid-template-rows: 1fr auto;
    padding: 0;
    position: relative;
    overflow: hidden;
  }
  /* Sceau médaillon piloté par le scroll : centré et grand en phase 1,
     puis vient se loger à la place du logo du header en phase 2.
     Positionné comme le médaillon du loader (continuité visuelle). */
  .hero-mark {
    position: fixed; top: 50%; left: 50%;
    /* Médaillon central. Reste centré ; il s'efface en fondu au scroll
       (le wordmark .topbar__brand prend le relais). Review 23/06 #92 :
       réduit (~-40 %) — le client le trouvait trop gros (c'est CE médaillon
       qu'il visait, pas le titre texte .hero__mark). */
    width: clamp(150px, 17vw, 220px); height: auto;
    transform: translate(-50%, -50%);
    z-index: 70; pointer-events: none;
    color: #ffffff;
    filter: drop-shadow(0 1px 6px rgba(0,0,0,.18));
    will-change: opacity;
  }
  /* Une fois posé dans le header (fin de la phase A), le médaillon
     s'aligne sur la logique d'inversion automatique du burger : blanc
     sur fond sombre, noir sur fond clair. On retire le drop-shadow
     car le filter crée un stacking context qui casse le mix-blend. */
  .hero-mark.is-posed {
    mix-blend-mode: difference;
    filter: none;
    /* Décharge la couche GPU : le médaillon ne bouge plus, le navigateur
       peut rendre le SVG en vectoriel natif au lieu d'une texture
       rasterisée (qui pouvait paraître pixelisée). */
    will-change: auto;
  }
  /* Médaillon docké, une fois la vidéo disparue : on quitte le
     difference pour un filtre progressif brightness(0) invert() piloté
     par --mark-ink (0 = noir sur fond clair → 1 = blanc sur fond
     sombre). Même rampe que le texte du header → transition douce et
     synchrone, plus de changement brusque (review 2026-05-31). */
  body.topbar-solid .hero-mark.is-posed {
    mix-blend-mode: normal;
    filter: brightness(0) invert(var(--mark-ink, 0));
    transition: filter 0.3s ease;
  }
  .hero-mark.is-posed img {
    /* Plus de transform 3D = plus besoin de cacher le verso. On évite
       aussi tout sous-pixel hint imposé par la couche 3D. */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
  .hero-mark img {
    display: block; width: 100%; height: auto;
    /* Pirouette Y : on cache le verso pour ne jamais voir le texte du
       sceau en miroir entre 90° et 270°. Le médaillon disparaît pendant
       la moitié arrière de la rotation, langage 3D propre. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .hero > *:not(.hero__video):not(.hero__foot) { position: relative; z-index: 1; }
    /* Loader — sceau médaillon, révélation par ligne */
  body.mm-loading { overflow: hidden; }
  #mm-loader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--mm-nocturne);
    display: grid; place-items: center;
    transition: opacity .9s ease, visibility .9s;
  }
  #mm-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
  .mm-loader__seal {
    /* Même taille que .hero-mark pour la continuité loader → hero (review #92). */
    width: clamp(150px, 17vw, 220px); height: auto; display: block;
    -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0);
    opacity: 0;
    animation: mmSealReveal 1.9s cubic-bezier(.22,.61,.36,1) .15s forwards,
               mmSealPulse 2.6s ease-in-out 2.2s infinite;
  }
  @keyframes mmSealReveal {
    0%   { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); opacity: 0; }
    14%  { opacity: 1; }
    100% { -webkit-clip-path: inset(0 0 0 0);   clip-path: inset(0 0 0 0);   opacity: 1; }
  }
  @keyframes mmSealPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
  @media (prefers-reduced-motion: reduce) {
    .mm-loader__seal { animation: none; -webkit-clip-path: none; clip-path: none; opacity: 1; }
    #mm-loader { transition: opacity .3s ease, visibility .3s; }
  }
  .petals { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
  /* Vidéo fixe plein écran : dimensionnée sur le GRAND viewport (lvh = barre
     du navigateur masquée). Sur mobile, la barre Safari/Chrome se rétracte au
     scroll et agrandit le viewport ; en 100svh la vidéo ne couvrait plus le bas
     → bande blanche. En 100lvh elle couvre toujours (déborde légèrement sous la
     barre quand celle-ci est visible, invisible). Fallback 100vh pour les vieux
     navigateurs (où vh = déjà la hauteur barre masquée). */
  .hero__video { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden; will-change: opacity;
    background: var(--mm-ivoire) url("/assets/photos/canaille-12.jpg") center/cover no-repeat; }
  .hero__video iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;
    min-width: 177.78vh; min-height: 100vh; min-height: 100lvh;
    transform: translate(-50%, -50%);
    border: 0; pointer-events: none;
  }
  .hero, .hero__inner { color: var(--mm-ivoire); }
  .hero .hero__mark, .hero .hero__lede, .hero .hero__foot,
  .hero .hero__cue, .hero .btn-primary, .hero .btn-secondary { color: var(--mm-ivoire); }
  .hero .hero__kw { color: rgba(244,238,231,.82); }
  .hero .hero__rule { background: var(--mm-ivoire); }
  .hero__video::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,32,29,.62), rgba(26,32,29,.48) 45%, rgba(26,32,29,.74));
  }
  .hero__inner {
    /* Le texte est placé dans la PHASE 2 du hero : on le décale
       d'un viewport complet pour qu'il n'apparaisse qu'après
       que le médaillon ait fini sa course vers le header. */
    align-self: start;
    max-width: 1320px; margin: 0 auto; width: 100%;
    padding: calc(100svh + 14vh) clamp(20px, 5vw, 64px) 0;
    text-align: left;
  }
  .hero__lead {
    max-width: 780px;
    display: flex; flex-direction: column; align-items: flex-start;
    opacity: 0; visibility: hidden;
  }
  .hero__medaillon {
    width: clamp(120px, 16vw, 200px); height: auto;
    margin-bottom: clamp(32px, 5vh, 56px);
    color: var(--mm-nocturne);
    opacity: 0.88;
  }
  .hero__mark {
    font-family: var(--display); font-weight: 600;
    /* Review 23/06 #92 : « moins gros » — réduction portée à ~30 % (retour
       client : -13 % insuffisant). Original 76px → 53px. */
    font-size: clamp(24px, 3.65vw, 53px);
    line-height: 1.1; letter-spacing: 0.015em;
    text-transform: none;
    margin: 0 0 8px; max-width: 18ch;
  }
  .hero__kw {
    font-family: var(--sans); font-weight: 500;
    font-size: clamp(14px, 1.15vw, 17px);
    letter-spacing: 0.04em; text-transform: none;
    color: var(--fg-soft); margin: 0 0 4px;
  }
  .hero__rule {
    width: 56px; height: 1px; background: var(--fg);
    margin: 32px 0;
    transition: background 0.6s linear;
  }
  .hero__lede {
    max-width: 560px;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(18px, 2vw, 26px); line-height: 1.5;
    margin: 0 0 36px; color: var(--fg);
  }
  .hero__ctas {
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
    margin-bottom: 8px;
  }
  /* Boutons CTA (review 2026-05-28 v2) : retour au style sobre avec
     un trait fin sous le texte. Au survol, un second trait fin
     apparaît AU-DESSUS, en s'étalant en longueur (animation
     scaleX 0 → 1 ancrée à gauche). Effet d'encadrement progressif. */
  .btn-primary {
    position: relative;
    display: inline-block;
    font-family: var(--sans);
    /* Poids aligné sur .btn-secondary (review 22/06 #75 : le « gras » du CTA
       principal dénotait par rapport aux autres). Hiérarchie portée par le
       filet, plus par la graisse. */
    font-size: 13px; font-weight: 400;
    letter-spacing: 0.04em;
    /* Couleur alignée sur celle du texte courant et des séparateurs
       (review 2026-05-28) : le fg-soft donne le même gris que le
       paragraphe et les filets, plutôt qu'un noir plein qui sortait
       de la palette. */
    color: var(--fg-soft);
    padding: 10px 4px 8px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 55%, transparent);
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
  }
  .btn-primary:hover {
    color: var(--fg);
    border-bottom-color: currentColor;
  }
  .btn-primary::before {
    /* Trait du dessus, caché au repos, qui se déploie de gauche à
       droite au survol. */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(.4, .1, .25, 1);
  }
  .btn-primary:hover::before,
  .btn-primary:focus-visible::before { transform: scaleX(1); }

  /* Variante plus discrète : même mécanique, juste un cran plus léger
     en intensité. */
  .btn-secondary {
    position: relative;
    display: inline-block;
    font-family: var(--sans);
    /* Taille alignée sur .btn-primary (review 23/06 #89 : « la même taille de
       police » pour les trois CTA de la section méthode). */
    font-size: 13px; font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--fg-soft);
    padding: 10px 4px 8px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 60%, transparent);
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
  }
  .btn-secondary::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: color-mix(in srgb, currentColor 60%, transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(.4, .1, .25, 1);
  }
  .btn-secondary:hover {
    color: var(--fg);
    border-bottom-color: currentColor;
  }
  .btn-secondary:hover::before,
  .btn-secondary:focus-visible::before {
    transform: scaleX(1);
    background: currentColor;
  }
  .hero__foot {
    /* Fixé au bas du viewport, pleine largeur, avec les MÊMES
       gouttières que la topbar : à gauche aligné avec la position
       du médaillon docké, à droite aligné avec le burger. */
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 0 clamp(20px, 5vw, 64px) 22px;
    display: flex; justify-content: space-between; align-items: end; gap: 24px;
    font-family: var(--sans); font-size: 11px;
    letter-spacing: 0.06em; text-transform: none;
    color: var(--fg-soft);
    z-index: 60; pointer-events: none;
    will-change: opacity, transform;
    mix-blend-mode: difference;
  }
  .hero__cue { display: inline-flex; align-items: center; gap: 14px; }
  .hero__cue::after {
    content: ""; display: block;
    width: 1px; height: 44px; background: currentColor; opacity: 0.7;
    animation: cuepulse 2.6s ease-in-out infinite;
  }
  @keyframes cuepulse {
    0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
    50%      { transform: scaleY(1);   opacity: 0.85; }
  }

  /* ===== SECTIONS WIREFRAME ===== */

  /* Section commune */
  .section-wf {
    padding: clamp(80px, 14vh, 180px) 0 clamp(80px, 12vh, 160px);
    border-top: 1px solid var(--rule);
    position: relative;
  }
  .section-wf__title {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(32px, 4.4vw, 60px);
    line-height: 1.08; letter-spacing: 0.015em;
    text-transform: none; margin: 0;
  }

  /* La maison */
  .maison__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(40px, 7vw, 100px); align-items: start;
  }
  .maison__title {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(32px, 4.4vw, 60px);
    line-height: 1.08; letter-spacing: 0.015em;
    text-transform: none;
    margin: 0 0 32px;
  }
  .maison__rule {
    width: 40px; height: 1px; background: var(--fg);
    margin: 0 0 32px; transition: background 0.6s linear;
  }
  .maison__prose {
    font-family: var(--sans); font-size: clamp(16px, 1vw + 0.5rem, 18px);
    line-height: 1.75; font-weight: 300; max-width: 54ch;
  }
  .maison__prose p { margin: 0 0 1em; }
  .maison__prose p:last-child { margin-bottom: 0; }
  .maison__cta-wrap { margin-top: 32px; }
  .maison__aside {
    padding-top: 6px;
    display: flex; flex-direction: column; align-items: stretch;
  }

  /* Portrait Cindy & Joris avec flip 3D au survol (review 2026-05-28).
     Mécanisme identique aux cartes collections : perspective sur le
     container, rotateY sur le wrapper, backface-hidden sur les deux
     faces. Au repos = photo ; au survol = citation sur fond ivoire. */
  .maison__portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    perspective: 1400px;
  }
  .maison__portrait-flip {
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(.4, .1, .25, 1);
    will-change: transform;
  }
  .maison__portrait:hover .maison__portrait-flip,
  .maison__portrait:focus-within .maison__portrait-flip {
    transform: rotateY(180deg);
  }
  .maison__portrait-face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    border-radius: 0;
  }
  .maison__portrait-face--front img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 25%;
    display: block;
  }
  .maison__portrait-face--back {
    transform: rotateY(180deg);
    background: var(--mm-nocturne);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: clamp(28px, 4vw, 56px);
    gap: clamp(28px, 4vh, 48px);
  }
  /* Citation en ivoire sur fond nocturne (review V2 #2). Sélecteur volontairement
     plus spécifique (0,3,0) que `.s-maison .maison__aside blockquote` (0,2,1),
     sinon la couleur scrubée (--maison-text → nocturne une fois scrollé) rendait
     la citation invisible sur le fond nocturne du dos de carte. */
  .s-maison .maison__portrait-face--back .maison__portrait-quote {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(20px, 1.6vw + 0.4rem, 28px);
    line-height: 1.4;
    color: var(--mm-ivoire);
    max-width: 24ch;
    margin: 0;
  }
  .maison__portrait-seal {
    display: block;
    width: clamp(140px, 18vw, 200px);
    height: auto;
    opacity: 0.85;
  }
  @media (prefers-reduced-motion: reduce) {
    .maison__portrait-flip,
    .maison__portrait:hover .maison__portrait-flip,
    .maison__portrait:focus-within .maison__portrait-flip {
      transform: none;
      transition: none;
    }
  }
  /* Transition douce du texte de la maison pendant le passage vidéo → beige.
     --maison-text est calculée en JS (applyScroll) : ivoire quand la vidéo
     est encore présente derrière, nocturne (== --fg) une fois la vidéo
     disparue. Interpolation linéaire entre les deux. */
  .s-maison { color: var(--maison-text, var(--fg)); }
  .s-maison .maison__title,
  .s-maison .maison__prose,
  .s-maison .maison__prose p,
  .s-maison .maison__aside blockquote { color: var(--maison-text, var(--fg)); }
  .s-maison .maison__rule { background: var(--maison-text, var(--fg)); }
  .s-maison .maison__seal {
    /* SVG nocturne : on l'aplatit en noir puis on inverse selon la
       présence de la vidéo → noir → gris → blanc, en suivant le fondu. */
    filter: brightness(0) invert(var(--video-presence, 0));
  }
  @media (max-width: 840px) { .maison__grid { grid-template-columns: 1fr; } }

  /* Collections */
  /* Intro section Collections : titre (avec sous-titre H2) puis
     paragraphe lede empilés verticalement (review 2026-05-28). */
  .collections__intro {
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 3.5vh, 40px);
    margin-bottom: clamp(56px, 8vh, 96px);
  }
  .collections__lede {
    font-family: var(--sans); font-size: clamp(16px, 1vw + 0.5rem, 18px);
    font-weight: 300; line-height: 1.7; margin: 0; max-width: 70ch;
    color: var(--fg-soft);
  }
  .collections__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0; border-top: 1px solid var(--rule);
    margin-top: clamp(40px, 6vh, 72px);
  }
  .collection-card {
    /* Carte entièrement cliquable : l'<a> enveloppe le flip 3D (le lien
       interne n'était plus atteignable une fois la carte retournée). */
    text-decoration: none; color: inherit; cursor: pointer;
    position: relative;
    border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    perspective: 1400px;
    /* min-height pour que la face arrière (image) ait un cadre stable
       même si le texte de la face avant est court. Le padding intérieur
       reste sur les faces, pas sur la carte. */
    min-height: 440px;
    display: flex;
  }
  .collection-card:last-child { border-right: 0; }
  /* Container 3D qui pivote au survol. preserve-3d + backface-hidden
     sur les faces pour que la face arrière ne soit pas visible quand
     elle est en arrière-plan. */
  .collection-card__flip {
    position: relative; width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(.4, .1, .25, 1);
    will-change: transform;
  }
  .collection-card:hover .collection-card__flip,
  .collection-card:focus-within .collection-card__flip {
    transform: rotateY(180deg);
  }
  .collection-card__face {
    position: absolute; inset: 0;
    padding: clamp(36px, 4vh, 52px) clamp(22px, 2.4vw, 36px) clamp(30px, 4vh, 44px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex; flex-direction: column; gap: 14px;
    overflow: hidden;
  }
  .collection-card__face--front {
    /* Position relative dans le flux pour donner sa hauteur à la carte ;
       la face arrière est en absolute au-dessus. */
    position: relative;
  }
  .collection-card__face--back {
    transform: rotateY(180deg);
    padding: 0;
    background: var(--mm-nocturne);
  }
  .collection-card__face--back img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(0.92) sepia(0.05);
  }
  .collection-card__back-label {
    position: absolute; left: clamp(22px, 2.4vw, 36px); bottom: clamp(20px, 3vh, 28px);
    font-family: var(--title); font-size: clamp(26px, 2vw, 36px);
    color: var(--mm-ivoire);
    letter-spacing: 0.01em;
    text-shadow: 0 2px 18px rgba(0,0,0,.4);
  }
  /* prefers-reduced-motion : désactive le flip, garde l'apparence
     front avec un voile photo discret derrière (option : on laisse
     juste la face avant visible). */
  @media (prefers-reduced-motion: reduce) {
    .collection-card__flip,
    .collection-card:hover .collection-card__flip,
    .collection-card:focus-within .collection-card__flip {
      transform: none;
      transition: none;
    }
  }
  .collection-card__num {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 14px; letter-spacing: 0.04em; color: var(--fg-soft);
    text-transform: none;
  }
  .collection-card__name {
    margin: 0;
    display: flex; flex-direction: column;
    gap: clamp(8px, 1.2vh, 14px);
    color: var(--fg);
  }
  /* Nom de la collection (Miréio / Mistrau / Maire) : titre principal
     de la carte, en grand, en Romance Dream (review #3 : le nom de la
     collection en premier et en grand, l'anglais en sous-titre dessous). */
  .collection-card__name-main {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(26px, 2vw + 0.3rem, 36px);
    line-height: 1.12;
    letter-spacing: 0.02em;
    color: var(--fg);
  }
  /* Sous-titre anglais (the wedding day / the wedding celebration /
     the experience) : plus petit, gris doux, sous le nom de la collection. */
  .collection-card__name-sub {
    font-family: var(--title);
    font-weight: 400;
    text-transform: lowercase;
    font-size: clamp(13px, 0.6vw + 0.35rem, 16px);
    line-height: 1.25;
    letter-spacing: 0.08em;
    color: var(--fg-soft);
  }
  .collection-card__desc {
    font-family: var(--sans); font-size: 14px; line-height: 1.7;
    font-weight: 300; color: var(--fg-soft); margin: 0; flex: 1;
  }
  .collection-card__link {
    margin-top: 18px; align-self: flex-start;
    font-family: var(--sans); font-size: 11px; font-weight: 400;
    letter-spacing: 0.06em; text-transform: none; color: var(--fg);
    border: 0; padding: 0;
    display: inline-flex; align-items: center; gap: 10px;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s, color 0.2s;
  }
  .collection-card__link::after {
    content: ""; width: 16px; height: 1px; background: currentColor;
  }
  .collection-card:hover .collection-card__link,
  .collection-card:focus-within .collection-card__link {
    opacity: 1; transform: translateY(0);
  }
  .collection-card::before {
    content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
    background: var(--fg); transform: scaleX(0); transform-origin: left;
    transition: transform 0.5s;
  }
  .collection-card:hover::before { transform: scaleX(1); }
  @media (max-width: 840px) {
    .collections__grid  { grid-template-columns: 1fr; }
    .collection-card { border-right: 0; }
  }

  /* Provence — mise en page « débordement » (review 2026-05-28) :
     le H2 occupe le haut-gauche, la photo prend la moitié droite et
     déborde jusqu'au bord droit du viewport, et la carte de texte
     ivoire vient se poser en bas-gauche en chevauchant l'image.
     Composition éditoriale avec effet de superposition assumé. */
  .provence__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    gap: 0 clamp(20px, 3vw, 48px);
    position: relative;
  }
  .provence__title {
    grid-column: 1 / 8;
    grid-row: 1;
    font-family: var(--title); font-weight: 400;
    font-size: clamp(32px, 4.4vw, 60px);
    line-height: 1.05; letter-spacing: 0.005em;
    margin: 0 0 clamp(40px, 6vh, 72px);
  }
  /* Image qui déborde à droite : elle sort du `.wrap` par margin-right
     négatif équivalent au padding latéral du wrap, puis prolonge au
     besoin sur la gouttière. */
  .provence__img {
    grid-column: 5 / 13;
    grid-row: 2;
    width: calc(100% + clamp(20px, 5vw, 64px));
    margin-right: calc(-1 * clamp(20px, 5vw, 64px));
    height: clamp(420px, 62vh, 680px);
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: rgba(47, 59, 55, 0.06);
  }
  .provence__img img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    display: block; filter: saturate(0.90) sepia(0.08);
  }
  /* Carte de texte ivoire qui chevauche l'image en bas-gauche.
     Décalée légèrement vers la gauche (margin-right) pour laisser
     respirer la photo à droite (review 2026-05-31). */
  .provence__text {
    grid-column: 1 / 7;
    grid-row: 2;
    align-self: end;
    margin: 0 clamp(30px, 3vw, 56px) clamp(32px, 6vh, 80px) 0;
    padding: clamp(36px, 5vh, 60px) clamp(32px, 4vw, 52px);
    background: #ffffff;
    box-shadow: 0 30px 70px -28px rgba(47, 59, 55, 0.22);
    position: relative;
    z-index: 2;
  }
  .provence__prose {
    font-family: var(--sans); font-size: clamp(15px, 0.7vw + 0.4rem, 17px);
    font-weight: 300; line-height: 1.75;
    color: var(--fg-soft);
  }
  .provence__prose p { margin: 0 0 1em; }
  .provence__prose p:last-child { margin-bottom: 0; }
  @media (max-width: 840px) {
    /* Sur mobile, on dépile : titre, puis image pleine largeur, puis
       carte texte qui chevauche le bas de l'image par margin négatif. */
    .provence__inner {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .provence__title { grid-column: 1; grid-row: 1; }
    .provence__img {
      grid-column: 1; grid-row: 2;
      width: calc(100% + clamp(20px, 5vw, 64px) * 2);
      margin-left: calc(-1 * clamp(20px, 5vw, 64px));
      margin-right: calc(-1 * clamp(20px, 5vw, 64px));
      height: clamp(280px, 50vh, 420px);
    }
    .provence__text {
      grid-column: 1; grid-row: 3;
      margin: -40px clamp(16px, 4vw, 32px) 0;
    }
  }

  /* Réalisations */
  .realisations__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 6vw, 88px); align-items: end;
    margin-bottom: clamp(48px, 7vh, 80px);
  }
  .realisations__intro {
    font-family: var(--sans); font-size: clamp(16px, 1vw + 0.5rem, 18px);
    font-weight: 300; line-height: 1.7; color: var(--fg-soft);
    margin: 0; max-width: 44ch;
  }
  .realisations__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 20px);
  }
  .real-item {
    position: relative; overflow: hidden;
    display: block; text-decoration: none; color: inherit;
  }
  .real-item img {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    display: block; filter: saturate(0.88) sepia(0.07);
    transition: transform 0.6s ease, filter 0.6s ease;
  }
  .real-item:hover img { transform: scale(1.03); filter: saturate(0.95) sepia(0.04); }
  /* Bouton « Découvrir » apparaissant au survol de la carte portfolio
     (review #27). Voile sombre léger + libellé centré, transition douce. */
  .real-item::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(47,59,55,.0) 50%, rgba(47,59,55,.55) 100%);
    opacity: 0; transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .real-item:hover::after { opacity: 1; }
  .real-item__hover {
    position: absolute; left: 50%; bottom: 24px;
    transform: translate(-50%, 12px);
    opacity: 0;
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: none;
    color: var(--mm-ivoire);
    padding: 10px 22px; border: 1px solid rgba(244,238,231,.7);
    background: rgba(47,59,55,.18);
    backdrop-filter: blur(2px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none; /* la cible cliquable est le <a> parent */
  }
  .real-item:hover .real-item__hover {
    opacity: 1; transform: translate(-50%, 0);
  }
  .real-item__caption {
    margin-top: 14px; font-family: var(--sans); font-size: 11px; font-weight: 400;
    letter-spacing: 0.04em; text-transform: none; color: var(--fg-soft);
    display: flex; flex-direction: column; gap: 4px;
  }
  .real-item__domaine { color: var(--fg); font-weight: 500; }
  .real-item__ville { color: var(--fg-soft); font-weight: 300; }
  .realisations__presse {
    margin-top: clamp(32px, 4vh, 48px); font-family: var(--sans); font-size: 12px;
    font-weight: 400; letter-spacing: 0.06em; text-transform: none;
    color: var(--fg-faint);
  }
  @media (max-width: 840px) {
    .realisations__head { grid-template-columns: 1fr; }
    .realisations__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) { .realisations__grid { grid-template-columns: 1fr; } }

  /* Témoignages (review 2026-05-28) : encart blanc centré façon
     "carte de citation" éditoriale. Le contraste blanc / fond Vert
     Cendré rend la citation parfaitement lisible et lui donne le
     poids d'un moment fort de la lecture. */
  .temoignage__title {
    text-align: center;
    margin: 0 auto clamp(32px, 5vh, 56px);
    /* Max-width plus serré pour forcer « leur mariage » à la ligne
       et garder un titre bien équilibré (review 2026-05-31). */
    max-width: 18ch;
    /* #129 : la section reste BLANCHE plus longtemps → le témoignage doit
       s'adapter (texte foncé sur blanc, ivoire si jamais le fond passe sombre).
       On pilote donc tout par --fg (le scrub) au lieu de forcer l'ivoire. */
    color: var(--fg);
  }
  .temoignage__inner {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(48px, 7vh, 88px) clamp(36px, 5vw, 80px);
    /* Encadré fin qui suit l'encre courante (foncé sur blanc, clair sur sombre). */
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--fg) 28%, transparent);
    color: var(--fg);
    text-align: center;
  }
  .temoignage__quote {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(22px, 2.4vw, 34px); line-height: 1.45;
    margin: 0 0 clamp(28px, 4vh, 44px);
    color: var(--fg);
  }
  .temoignage__quote::before,
  .temoignage__quote::after {
    content: '"';
    font-family: var(--serif);
    color: color-mix(in srgb, var(--fg) 38%, transparent);
    font-size: 1.1em;
    line-height: 0;
    vertical-align: -0.1em;
  }
  .temoignage__quote::before { margin-right: 0.2em; }
  .temoignage__quote::after  { margin-left: 0.2em; }
  .temoignage__attr {
    font-family: var(--sans);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--fg) 75%, transparent);
    margin: 0;
  }
  .temoignage__attr::before {
    content: ''; display: inline-block;
    width: 28px; height: 1px;
    background: color-mix(in srgb, var(--fg) 42%, transparent);
    margin-right: 14px; vertical-align: middle;
  }

  /* Journal */
  .journal__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(36px, 6vw, 88px); align-items: end;
    margin-bottom: clamp(48px, 7vh, 80px);
  }
  .journal__title {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(32px, 4.4vw, 60px);
    line-height: 1.08; letter-spacing: 0.015em;
    text-transform: none; margin: 0;
  }
  .journal__intro {
    font-family: var(--sans); font-size: clamp(16px, 1vw + 0.5rem, 18px);
    font-weight: 300; line-height: 1.75; color: var(--fg-soft); margin: 0; max-width: 50ch;
  }
  .journal__themes {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 28px);
  }
  .journal-theme { border-top: 1px solid var(--rule); padding-top: 20px; }
  /* Reset de la marge par défaut de <figure> (1em 40px) qui décalait
     les images vers la droite par rapport aux titres. */
  .journal-theme__media { margin: 0 0 18px; overflow: hidden; }
  .journal-theme__media img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    display: block; filter: saturate(0.88) sepia(0.07);
    transition: transform 0.6s ease;
  }
  .journal-theme:hover .journal-theme__media img { transform: scale(1.03); }
  .journal-theme__title {
    font-family: var(--display); font-style: normal; font-weight: 600;
    font-size: clamp(16px, 1.1vw + 0.4rem, 19px);
    text-transform: none; letter-spacing: 0.02em; line-height: 1.2;
    margin: 0 0 10px; color: var(--fg);
  }
  .journal-theme__desc {
    font-family: var(--sans); font-size: 13px; font-weight: 300;
    line-height: 1.65; color: var(--fg-soft); margin: 0;
  }
  @media (max-width: 840px) {
    .journal__head   { grid-template-columns: 1fr; }
    .journal__themes { grid-template-columns: 1fr; }
  }

  /* Contact */
  .contact__inner { max-width: 680px; }
  .contact__title {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(34px, 4.4vw, 58px); line-height: 1.1;
    text-transform: none; letter-spacing: 0.015em; margin: 0 0 28px;
  }
  .contact__lede {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(17px, 1.2vw + 0.5rem, 20px);
    line-height: 1.7; margin: 0 0 38px; max-width: 50ch; color: var(--fg-soft);
  }
  .contact__cta {
    display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: none;
    border-bottom: 1px solid currentColor; padding: 0 0 6px;
    transition: color 0.3s, border-color 0.3s;
  }
  .contact__cta:hover { color: var(--c-accent); border-color: var(--c-accent); }
  .contact__localisation {
    margin-top: 40px; font-family: var(--sans); font-size: 12px; font-weight: 400;
    letter-spacing: 0.06em; text-transform: none; color: var(--fg-faint);
  }

  /* Footer (review 2026-05-28) : refonte complète. Bloc principal
     en colonnes éditoriales sur fond blanc avec brand + plan du site
     + collections + contact. Mini-footer en bas pour copyright et
     mentions légales. Sort du scrub couleur de la page : couleur
     fixe blanche, indépendante du body. */
  .footer {
    position: relative;
    z-index: 3;
    /* Le footer lui-même est transparent : seul le bloc principal
       porte le fond blanc. La barre du bas reste transparente pour
       laisser voir le fond sombre étoilé de la page (review 2026-05-31). */
    background: transparent;
    color: var(--mm-nocturne);
  }
  .footer__wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 64px);
  }
  .footer__main {
    /* Padding-haut réduit (retour client 24/06) : la dernière section de la
       page apporte déjà son padding-bas ; le gros padding-haut cumulé éloignait
       trop le séparateur du contenu en haut sans rien donner en bas. L'air
       autour du séparateur est désormais porté par .footer__rule (équilibré). */
    padding: clamp(4px, 1vh, 14px) 0 clamp(40px, 6vh, 72px);
    background: #ffffff;
  }
  .footer__main > .footer__wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  /* Séparateur trait + étoile en tête du footer (review 22/06 #76 / #89) :
     conteneur dédié (PAS .footer__wrap, qui est en grid) avec la même
     gouttière, et un espace sous le filet avant les colonnes. */
  .footer__rule {
    /* Review 23/06 : filet allongé (quasi pleine largeur) + plus d'air, le
       trait paraissait trop court et tassé sur grand écran.
       Retour client 24/06 : marges haut/bas rééquilibrées et plus généreuses en
       bas → le séparateur n'est plus collé au footer (centré dans la transition
       page → footer, avec le padding-bas de la dernière section au-dessus). */
    max-width: none; margin: 0 auto;
    padding: clamp(10px, 1.5vh, 22px) clamp(24px, 7vw, 140px) clamp(78px, 11vh, 150px);
  }
  .footer__rule .rule-deco { margin: 0; }
  /* Home : pas de séparateur en tête de footer. Le scrub fait passer le fond
     du vert foncé au blanc pile à cet endroit → la rupture de couleur délimite
     déjà le footer, un filet ferait doublon. Les autres pages (fond blanc) le
     gardent pour marquer la limite. On rend au footer une respiration en haut
     (le filet portait cet espace) pour que le logo ne colle pas la rupture. */
  body:not(.page) .footer__rule { display: none; }
  body:not(.page) .footer__main { padding-top: clamp(44px, 7vh, 80px); }

  /* Bloc brand : logo + tagline SEO + réseaux. */
  .footer__brand {
    display: flex; flex-direction: column;
    gap: clamp(20px, 3vh, 32px);
  }
  .footer__logo-link {
    display: inline-block;
    color: var(--mm-nocturne);
  }
  .footer__logo {
    height: clamp(38px, 4.5vh, 52px); width: auto;
    display: block;
  }
  .footer__tagline {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(15px, 0.7vw + 0.4rem, 17px);
    line-height: 1.7;
    color: rgba(47, 59, 55, 0.7);
    margin: 0;
    max-width: 44ch;
  }

  /* Réseaux sociaux dans le bloc brand. */
  .footer__socials {
    display: flex; flex-wrap: wrap; gap: 18px;
    margin-top: clamp(4px, 1vh, 8px);
  }
  .footer__socials a {
    font-family: var(--sans);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--mm-nocturne);
    border-bottom: 1px solid rgba(47, 59, 55, 0.3);
    padding-bottom: 2px;
    transition: border-color 0.3s ease, color 0.3s ease;
  }
  .footer__socials a:hover {
    border-color: var(--mm-vert-cendre);
    color: var(--mm-vert-cendre);
  }

  /* Colonnes plan du site / collections / contact. */
  .footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
  }
  .footer__col-title {
    font-family: var(--sans);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--mm-nocturne);
    margin: 0 0 clamp(16px, 2vh, 22px);
  }
  .footer__col-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: clamp(10px, 1.4vh, 16px);
  }
  .footer__col-list a {
    display: inline-flex; flex-direction: column;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(15px, 0.7vw + 0.4rem, 17px);
    line-height: 1.4;
    color: var(--mm-nocturne);
    transition: color 0.3s ease, padding-left 0.3s ease;
  }
  .footer__col-list a:hover {
    color: var(--mm-vert-cendre);
    padding-left: 6px;
  }
  .footer__col-sub {
    display: block;
    font-family: var(--sans); font-style: normal; font-weight: 400;
    font-size: 11px; letter-spacing: 0.05em;
    color: rgba(47, 59, 55, 0.5);
    margin-top: 2px;
  }
  .footer__contact {
    font-style: normal;
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(15px, 0.7vw + 0.4rem, 17px);
    line-height: 1.7;
    color: var(--mm-nocturne);
  }
  .footer__contact p { margin: 0 0 4px; }
  .footer__contact p:last-child { margin-bottom: 0; }
  .footer__contact a {
    color: var(--mm-nocturne);
    font-style: italic;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
  }
  .footer__contact a:hover {
    border-color: currentColor;
    color: var(--mm-vert-cendre);
  }

  /* Mini-footer : transparent, posé sur le fond sombre étoilé de la
     page. Texte en ivoire (review 2026-05-31). */
  .footer__base {
    position: relative;
    z-index: 3;
    border-top: 1px solid rgba(244, 238, 231, 0.18);
    padding: clamp(20px, 3vh, 28px) 0;
  }
  /* La barre du bas a un texte ivoire (pensé pour le fond étoilé nocturne de
     la home). Sur les autres pages, le fond de page est blanc → elle serait
     invisible. On lui donne donc un fond nocturne explicite (hors home),
     pour un rendu identique partout : bloc blanc + barre sombre. */
  body.page .footer__base { background: var(--mm-nocturne); }
  .footer__base-wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(16px, 3vw, 32px);
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 11px; font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(244, 238, 231, 0.62);
  }
  /* Tous les éléments à gauche groupés dans un seul bloc :
     médaillon → copyright → mentions légales (review 2026-05-31). */
  .footer__base-left {
    display: flex; align-items: center;
    gap: clamp(14px, 2vw, 22px);
    flex-wrap: wrap;
  }
  .footer__base-logo {
    height: clamp(20px, 3vh, 28px); width: auto;
    opacity: 0.55;
    /* Monogramme nocturne → on l'éclaircit pour le fond sombre. */
    filter: brightness(0) invert(1);
  }
  .footer__legal {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 22px);
  }
  .footer__legal a {
    color: rgba(244, 238, 231, 0.62);
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
  }
  .footer__legal a:hover {
    color: var(--mm-ivoire);
    border-color: currentColor;
  }
  .footer__credit { color: rgba(244, 238, 231, 0.62); }
  .footer__credit a {
    color: rgba(244, 238, 231, 0.62);
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
  }
  .footer__credit a:hover { color: var(--mm-ivoire); }

  @media (max-width: 980px) {
    .footer__main > .footer__wrap { grid-template-columns: 1fr; }
  }
  @media (max-width: 680px) {
    /* Footer plus compact sur mobile (retour client) : « Le site » et
       « Nos collections » côte à côte sur 2 colonnes, « Nous joindre » à la
       suite en pleine largeur → moins de hauteur qu'un empilement 1 par 1. */
    .footer__cols { grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vh, 38px) clamp(20px, 6vw, 40px); }
    .footer__col:last-child { grid-column: 1 / -1; }
    .footer__base-wrap { gap: 12px; }
  }

  /* ===== Resserrage mobile placé APRÈS les règles de base (retour client) =====
     Les overrides plus haut dans le fichier étaient déclarés AVANT les règles
     de base correspondantes (rule-deco, closing, foundations) → celles-ci, plus
     bas, les écrasaient et l'espace restait trop grand. On les redéclare ici,
     en fin de feuille, pour qu'ils l'emportent. */
  @media (max-width: 620px) {
    /* Pages collection : moins d'espace sous les images, avant le CTA de fin. */
    .collection-main .rule-deco { margin: clamp(30px, 5vh, 52px) auto; }
    .collection__closing { padding: clamp(28px, 5vh, 50px) clamp(20px, 5vw, 32px) clamp(30px, 5vh, 52px); }
    .collection__closing.collection__closing--standalone { padding-top: clamp(26px, 4.5vh, 44px); padding-bottom: clamp(26px, 4.5vh, 44px); }
    .collection__cross--plain { padding-top: clamp(36px, 6vh, 64px); }
    .collection__cross { padding-bottom: clamp(34px, 6vh, 58px); }
    /* À propos : « Nos fondations » — le grand padding-bas creusait un vide
       avant « L'histoire ». */
    .foundations { padding-bottom: clamp(34px, 6vh, 56px); }
    .foundations__head { margin-bottom: clamp(26px, 4.5vh, 40px); }
    /* Séparateur pleine largeur (entre fondations et histoire sur À propos,
       sous le hero sur /collections) : ~160px de marges → beaucoup trop sur
       mobile, c'est le principal vide signalé. */
    .rule-deco--page { margin: clamp(30px, 5vh, 54px) auto; }
  }

  /* Reveal */
  .reveal-line { display: block; overflow: hidden; }
  .reveal-line > span { display: block; will-change: transform; }
  .fade-up { opacity: 0; transform: translateY(18px); will-change: transform, opacity; }

  /* Ombre sur images en mode sombre */
  .s-realisations .real-item img,
  .s-temoignage .temoignage__inner,
  .s-journal .journal-theme,
  .s-contact .contact__inner {
    box-shadow: none;
  }

  /* Couleur d'accent au survol sur les sections sombres : ivoire (blanc).
     Le Vert Cendré par défaut disparaîtrait sur un fond Vert Cendré/Nocturne ;
     règle de marque : accent kaki sur fond clair, blanc/ivoire sur fond sombre. */
  .s-temoignage,
  .s-journal,
  .s-methode,
  .s-contact {
    --c-accent: var(--mm-ivoire);
  }

  @media (max-width: 760px) {
    .topbar { padding: 16px 20px; }
    .hero__inner { text-align: left; align-items: flex-start; }
    .hero__ctas { justify-content: flex-start; }
  }

  /* ===== REDUCED MOTION ===== */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: smooth; }
    body { transition: none; background: var(--mm-ivoire); color: var(--mm-nocturne); }
    .hero, .s-maison, .s-collections {
      background: var(--mm-ivoire); color: var(--mm-nocturne); --fg: var(--mm-nocturne);
    }
    .s-provence { background: var(--mm-blush); color: var(--mm-brun); --fg: var(--mm-brun); }
    .s-realisations { background: var(--mm-sauge); color: var(--mm-nocturne); --fg: var(--mm-nocturne); }
    .s-temoignage { background: var(--mm-vert-cendre); color: var(--mm-ivoire); --fg: var(--mm-ivoire); }
    .s-journal, .s-contact, footer.foot {
      background: var(--mm-nocturne); color: var(--mm-ivoire); --fg: var(--mm-ivoire);
    }
    .hero__video { display: none !important; }
    .hero, .hero__inner, .hero .hero__mark, .hero .hero__lede, .hero .hero__foot, .hero .hero__cue, .hero .btn-primary, .hero .btn-secondary { color: var(--mm-nocturne) !important; }
    .hero .hero__kw { color: var(--mm-vert-cendre) !important; }
    .hero .hero__rule { background: var(--mm-nocturne) !important; }
    .stars { opacity: 0.55; }
    .reveal-line > span { transform: none !important; }
    .fade-up { opacity: 1 !important; transform: none !important; }
    .hero__cue::after { animation: none; opacity: 0.6; }
    .nav-panel { transition: none; }
  }

  /* =====================================================================
     ÉDITO — surcharges de la version v2 (jour-nuit-edito)
     Tous les titres en Italiana (placeholder Romance Dream),
     paragraphes justifiés à la française avec césures activées,
     comme dans la maquette Édition.
     ===================================================================== */

  /* Charte typo (commentaire #2 du graphiste, confirmé client 22/06) : TOUT le
     titre est en Romance Dream, en CASSE NATURELLE → la fonte rend ses
     capitales et la PREMIÈRE LETTRE est AGRANDIE (::first-letter / .t-initial
     2.2em, « texte 10 → initiale 20-25 »), le client la veut « en grand ».
     SEULS les titres explicitement commentés « aucune majuscule / normal »
     passent en .t-plain (lowercase + initiale neutralisée). Les SOUS-titres,
     eux, sont en Romance Dream BAS-DE-CASSE (capitales uniformes lisibles, plus
     bas) — JAMAIS d'uppercase (swashs illisibles). */
  .hero__mark,
  .section-wf__title,
  .maison__title,
  .collections__title,
  .provence__title,
  .realisations__title,
  .journal__title,
  .contact__title,
  .coll-card__name,
  .collection-card__name,
  .collection-card__name-main,
  .ed-hero__h1,
  .split__h2,
  .values__h2,
  .article__title,
  .collection__cross-name,
  .coll-index__name,
  .title-main,
  .journal-card__title,
  .about-statement__big,
  .foundations__name,
  .founders__name,
  .notfound__code,
  .notfound__title {
    font-family: var(--title);
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0.025em;
  }
  /* Initiale agrandie (drop-cap) : même fonte Romance Dream que le corps du
     titre, mais ~2,2× plus grande (ratio du commentaire #2 : « si le texte
     fait 10, l'initiale fait 20-25 »). UNE seule initiale agrandie par titre.
     .t-cap exclut du ::first-letter les titres en élision (« L'histoire »)
     pour ne pas happer l'apostrophe : leur initiale est posée via .t-initial. */
  .hero__mark::first-letter,
  .maison__title::first-letter,
  .contact__title::first-letter,
  .temoignage__title::first-letter,
  .methode__title::first-letter,
  .ed-hero__h1::first-letter,
  .split__h2:not(.t-cap):not(.t-plain)::first-letter,
  .values__h2:not(.t-cap):not(.t-plain)::first-letter,
  .article__title::first-letter,
  .title-main::first-letter,
  .journal-card__title::first-letter,
  .about-statement__big::first-letter,
  .foundations__name::first-letter,
  .founders__name::first-letter,
  .explore__title::first-letter,
  .collection__cross-title::first-letter,
  .collection-card__name-main::first-letter {
    font-family: var(--title);
    font-size: 2.2em;
    line-height: 0.9;
  }
  /* Initiale décorative explicite (span), là où ::first-letter ne convient
     pas : titres en élision (« L'histoire » → seul le L décoré, l'apostrophe
     reste fine en Cormorant) et 2e initiale d'un titre à deux noms
     (« Cindy & Joris » → le J décoré comme le C). */
  .t-initial {
    font-family: var(--title);
    font-size: 2.2em;
    line-height: 0.9;
  }
  /* Titres « à plat » (review 22/06, #67 #69 #70 #73 + retour client) : titres
     voulus SANS grande initiale ornée NI grandes capitales swash. Romance Dream
     rend les MAJUSCULES en grandes capitales très ornées ; on force donc le
     bas-de-casse → la fonte rend alors toutes ses lettres en capitales
     UNIFORMES (« minuscules de la police Dream »). On neutralise aussi la
     lettrine. S'applique aux titres À propos commentés + contact + sections
     collection. */
  .t-plain { text-transform: lowercase; }
  .t-plain::first-letter { font-size: 1em; line-height: inherit; }
  .t-plain .t-initial { font-size: 1em; line-height: inherit; }
  /* Espace après la grande initiale d'un title-main (review 22/06 #60 / #88 :
     « ne pas coller le L au texte »). Petit retrait à droite du ::first-letter. */
  .title-main::first-letter { padding-right: 0.08em; }
  /* Apostrophe fine des titres (review 19 juin) : Romance Dream rend un trait
     d'apostrophe trop épais (et le ::first-letter l'agrandit quand elle suit
     l'initiale). On la passe en Cormorant, taille réduite, jamais agrandie.
     Posée par build.js (thinTitleApostrophes) dans tous les titres. */
  .t-apos {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 0.72em; letter-spacing: 0; vertical-align: baseline;
  }
  /* Le H1 SEO reste en serif italique (mots-clés cibles, déjà serif). */

  /* Séparateur prestige (filet large + ornement central). Inséré en
     tout début de section, il REMPLACE le trait pleine largeur entre
     sections — c'est lui qui fait la frontière. La couleur suit
     currentColor (donc le scrub jour/nuit) : ivoire sur fond sombre,
     nocturne sur fond clair, sans surcharge à écrire par section.
     L'ornement central est slot-able : losange par défaut, étoile
     Maison Mistral ou monogramme à terme. */
  .rule-deco {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%; max-width: 100%;
    /* Marge plus généreuse en bas pour que le séparateur soit
       visuellement centré entre le bas de la section précédente et le
       contenu de la nouvelle section (review 2026-05-26). */
    margin: 0 auto clamp(96px, 13vh, 180px);
    color: currentColor;
    opacity: 1;
  }
  .rule-deco::before, .rule-deco::after {
    content: ""; flex: 1; min-width: 0;
    /* Un SEUL filet fin, en gris clair var(--rule) — la même couleur que
       les bordures des cartes collections. Tous les séparateurs du site
       sont alignés sur ce trait clair (review séparateurs). */
    border-top: 1px solid var(--rule);
    height: 0;
  }
  /* Étoile Maison Mistral en ornement central : carrée, discrète.
     L'opacité ne porte QUE sur l'étoile (le filet, lui, reste à la
     pleine valeur claire de var(--rule)). */
  .rule-deco svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .5; }
  /* Variantes d'ornement central : tailles différentes selon l'élément
     glissé au milieu (losange par défaut, plus large quand on met le
     monogramme/logo Maison Mistral). */
  .rule-deco--logo svg { width: 56px; height: 28px; }
  .rule-deco--logo .rule-deco__mark img { display: block; height: 24px; width: auto; }

  /* Séparateur « pleine largeur » des pages de contenu (sous le hero du
     Journal et de la Collection) : edge-to-edge avec gouttière 48px, et un
     espace généreux au-dessus (le filet ne doit pas être collé au texte).
     Défini APRÈS .rule-deco de base pour gagner la cascade à spécificité égale. */
  .rule-deco--page {
    max-width: none;
    padding: 0 clamp(20px, 5vw, 48px);
    margin: clamp(66px, 10vh, 116px) auto clamp(58px, 9vh, 104px);
  }
  /* Séparateur d'un bloc explore (contact / journal / article) : on le sort de
     la colonne (max 1100) pour qu'il atteigne lui aussi la pleine largeur, avec
     la même gouttière. Full-bleed sûr car body porte overflow-x: hidden. */
  .explore .rule-deco {
    width: 100vw; max-width: 100vw;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    padding: 0 clamp(20px, 5vw, 48px);
  }

  /* La version édito retire le trait pleine largeur natif des sections :
     c'est le .rule-deco qui fait office de frontière. On ramène aussi
     le padding-top des sections au plus juste pour que le séparateur
     joue son rôle visuel près de la limite entre deux sections. */
  .section-wf {
    border-top: none !important;
    padding-top: clamp(40px, 6vh, 80px) !important;
  }

  /* Section Portfolio en galerie maçonnerie (review 2026-05-26).
     Reprise de la mise en page de la maquette Édition : grille 12
     colonnes, tuiles de tailles variables, gap minimal pour effet
     mosaïque éditoriale. */
  .portfolio__head { text-align: center; max-width: 1100px; margin: 0 auto clamp(40px, 6vh, 72px); }
  .portfolio__intro {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(17px, 1.1vw + 0.6rem, 21px);
    color: var(--fg-soft);
    line-height: 1.6;
    margin: clamp(16px, 2vh, 24px) auto 0;
    /* Centrage simple (pas de justify pour éviter les retours à la ligne
       disgracieux sur une intro courte). */
    text-align: center;
    max-width: 880px;
  }
  /* Portfolio en CARROUSEL défilant (review 22/06 #56) : photos au même
     format, alignées et qui défilent en continu (au lieu de la mosaïque en
     damier). Marquee auto (JS clone pour une boucle sans couture), pause au
     survol ; sans JS / en reduced-motion, c'est un rail scrollable à la main.
     Pas de `gap` : un margin-right par tuile rend le translateX(-50%) parfait. */
  .portfolio__viewport {
    margin-top: clamp(8px, 1.2vh, 18px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  }
  .portfolio__viewport::-webkit-scrollbar { display: none; }
  .portfolio__grid {
    display: flex; flex-wrap: nowrap; width: max-content;
  }
  .portfolio__viewport.is-marquee { overflow: hidden; }
  .portfolio__viewport.is-marquee .portfolio__grid {
    animation: portfolioScroll var(--pf-dur, 60s) linear infinite;
  }
  .portfolio__viewport.is-marquee:hover .portfolio__grid,
  .portfolio__viewport.is-marquee:focus-within .portfolio__grid {
    animation-play-state: paused;
  }
  @keyframes portfolioScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  /* Tuile uniforme : même format portrait pour toutes (les modificateurs de
     taille de l'ancienne mosaïque sont neutralisés). */
  .portfolio__tile,
  .portfolio__tile--wide, .portfolio__tile--big,
  .portfolio__tile--tall, .portfolio__tile--square {
    flex: 0 0 auto;
    width: clamp(230px, 23vw, 320px);
    aspect-ratio: 3 / 4;
    margin: 0 clamp(14px, 1.6vw, 24px) 0 0;
    grid-column: auto; grid-row: auto;
    overflow: hidden; position: relative; display: block;
  }
  .portfolio__tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: sepia(0.06) saturate(.82) contrast(1.04);
    transition: transform 1.2s ease, filter 1.2s ease;
    display: block;
  }
  .portfolio__tile:hover img {
    transform: scale(1.035);
    filter: sepia(0.04) saturate(.92) contrast(1.04);
  }
  /* Overlay au survol : voile sombre + caption avec couple + lieu.
     Caption alignée EN BAS (justify-content: flex-end) car c'est là
     que le dégradé est le plus opaque — meilleur contraste pour la
     lisibilité (review 2026-05-28). */
  .portfolio__tile figcaption {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
    gap: 6px;
    padding: clamp(16px, 2vh, 28px);
    background: linear-gradient(180deg, rgba(47,59,55,0) 30%, rgba(47,59,55,.78) 100%);
    color: var(--mm-ivoire);
    text-align: center;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
  }
  .portfolio__tile:hover figcaption,
  .portfolio__tile:focus-within figcaption { opacity: 1; }
  .portfolio__couple {
    font-family: var(--title);
    font-weight: 400;
    font-size: clamp(20px, 1.6vw + 0.3rem, 28px);
    line-height: 1.15;
    color: var(--mm-ivoire);
    margin: 0;
    transform: translateY(8px);
    transition: transform 0.45s ease;
  }
  .portfolio__lieu {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(11px, 0.6vw + 0.3rem, 13px);
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: rgba(244,238,231,.88);
    margin: 0;
    transform: translateY(8px);
    transition: transform 0.45s ease 0.05s;
  }
  .portfolio__tile:hover .portfolio__couple,
  .portfolio__tile:hover .portfolio__lieu { transform: translateY(0); }

  @media (max-width: 720px) {
    .portfolio__tile,
    .portfolio__tile--wide, .portfolio__tile--big,
    .portfolio__tile--tall, .portfolio__tile--square {
      width: clamp(200px, 64vw, 280px);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .portfolio__viewport.is-marquee { overflow-x: auto; }
    .portfolio__viewport.is-marquee .portfolio__grid { animation: none; }
  }

  /* Bloc presse Carats & Cake (review 2026-05-28) : un seul séparateur
     prestige, avec le logo en remplacement du losange central. Le slot
     central est élargi pour accueillir le logo allongé (ratio ~10:1),
     et le logo lui-même reste discret (« pas que ça soit trop gros »).
     Le logo suit le scrub couleur via CSS-mask + background-color. */
  /* Bloc Carats & Cake centré entre Collections et Provence : on
     supprime le séparateur du haut de Provence, et on donne au bloc
     presse une marge haut/bas asymétrique pour qu'il respire au
     niveau du haut, mais reste relativement proche de la section
     suivante (review 2026-05-28). */
  /* Bloc presse (review V2 #5 + retour 4 juin) : même filet que le
     séparateur à l'étoile, mais avec « Featured on » + le logo Carats & Cake
     au centre à la place du losange. Les filets latéraux encadrent le bloc. */
  .press-feature {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    width: 100%;
    margin: clamp(120px, 16vh, 220px) auto clamp(60px, 8vh, 104px);
    color: var(--mm-nocturne);
  }
  .press-feature::before,
  .press-feature::after {
    content: ""; flex: 1; min-width: 0;
    /* Un seul filet fin clair (var(--rule)), aligné sur le séparateur
       étoile et les bordures des cartes collections — plus de double trait. */
    border-top: 1px solid var(--rule);
    height: 0;
  }
  .press-feature__center {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(10px, 1.6vh, 16px);
  }
  .press-feature__label {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(11px, 0.55vw + 0.3rem, 13px);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: color-mix(in srgb, currentColor 55%, transparent);
  }
  /* Logo Carats & Cake en noir (review V2 #5) : volontairement plus grand
     pour ressortir, ne suit pas le scrub (la section est sur fond clair). */
  /* Logo Carats & Cake (review 22/06 #51 : invisible car le masque CSS +
     fill="currentColor" se résolvait en transparent selon le navigateur).
     Passé en <img> sur un SVG à fill solide, rendu fiable partout. */
  .press-feature__logo {
    display: block;
    width: clamp(200px, 26vw, 320px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
  }
  .press-feature__logo img { display: block; width: 100%; height: auto; }
  .press-feature__logo:hover { opacity: 0.78; transform: translateY(-1px); }

  /* Section « Notre méthode » : remplace l'ancien Journal (review #13).
     4 étapes en grille, numérotation romaine, esthétique éditoriale. */
  .methode__head {
    max-width: 720px; margin: 0 auto clamp(40px, 6vh, 72px);
    text-align: center;
  }
  .methode__intro {
    margin-top: clamp(16px, 2vh, 24px);
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(17px, 1.1vw + 0.6rem, 21px);
    line-height: 1.6;
    color: var(--fg-soft);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }
  /* Notre méthode (review 2026-05-28 v2) : 4 cartes en grille 2×2.
     Chaque carte a un fond très légèrement teinté, une bordure 1px
     fine de la même intensité que les séparateurs prestige, et une
     lettrine Romance Dream en filigrane d'arrière-plan (opacité
     basse) qui décore sans dominer. La hiérarchie repose sur le
     chiffre romain, le nom de l'étape et sa description. */
  .methode__steps {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
    max-width: 1100px;
    margin: 0 auto;
  }
  .methode__step {
    position: relative;
    overflow: hidden;
    /* Cartouche fin : fond très subtilement éclairci par rapport à la
       section, bordure exactement à l'opacité des séparateurs. */
    background: color-mix(in srgb, currentColor 3%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    padding: clamp(28px, 4vh, 44px) clamp(28px, 3.5vw, 44px);
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: clamp(10px, 1.6vh, 18px);
  }
  /* Lettrine en filigrane d'arrière-plan : Romance Dream, énorme,
     positionnée en bas-droite avec faible opacité. Ne participe pas
     au flux du texte, c'est un ornement visuel discret. */
  .methode__letter {
    position: absolute;
    right: clamp(-12px, -1vw, -8px);
    bottom: clamp(-32px, -3vh, -20px);
    font-family: var(--title);
    font-weight: 400;
    font-size: clamp(140px, 16vw, 220px);
    line-height: 0.9;
    color: currentColor;
    opacity: .08;
    pointer-events: none;
    user-select: none;
    letter-spacing: 0;
  }
  /* Chiffre romain en haut, discret, type petit serif italique. */
  .methode__roman {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(15px, 0.7vw + 0.3rem, 18px);
    color: var(--fg-soft);
    line-height: 1;
    margin: 0;
    position: relative; z-index: 1;
  }
  .methode__name {
    font-family: var(--title);
    font-weight: 400; text-transform: none;
    letter-spacing: 0.005em;
    font-size: clamp(22px, 1.3vw + 0.7rem, 30px);
    line-height: 1.15;
    margin: 0;
    color: var(--fg);
    position: relative; z-index: 1;
  }
  .methode__copy {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(13px, 0.6vw + 0.5rem, 14px);
    line-height: 1.7;
    color: var(--fg-soft);
    text-align: left;
    margin: 0;
    position: relative; z-index: 1;
    /* On retire la justification pour garder des lignes nettes,
       l'arrière-plan lettrine demande déjà de la clarté. */
    hyphens: auto;
  }
  @media (max-width: 720px) {
    .methode__steps { grid-template-columns: 1fr; }
    .methode__letter { font-size: clamp(120px, 30vw, 180px); }
  }

  /* Système de sous-titre dans un H2 (review 2026-05-28) : permet de
     segmenter un titre long sans casser la sémantique (un seul H2),
     même typo que le titre principal mais plus petit en dessous.
     Usage : <h1|h2><span class="title-main">…</span><span class="title-sub">…</span></h1> */
  .title-main,
  .title-sub {
    display: block;
    font-weight: 400;
  }
  /* Titre principal = Romance Dream (comme tous les titres, charte #2). */
  .title-main {
    font-family: var(--title);
    font-style: normal;
    letter-spacing: 0.025em;
    font-size: 1em; line-height: 1.05;
  }
  /* Sous-titre = MÊME typo que le titre (Romance Dream) mais en MAJUSCULE et
     plus petit, gris (demande client review 22/06, récurrente : « sous-titre
     en majuscule, même police que les titres principaux »). Romance Dream étant
     tout-capitales, le rendu est en grandes capitales ; uppercase sécurise le
     fallback Italiana. Remplace l'ancien Cormorant italique. */
  .title-sub {
    font-family: var(--title);
    font-style: normal;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    font-size: 0.46em; line-height: 1.3;
    margin-top: clamp(10px, 1.4vh, 16px);
    color: var(--fg-soft);
  }

  /* Formulaire narratif (review 2026-05-28) : inspiration Hermeline
     Photographies / Ayata. Les labels et les inputs s'enchaînent comme
     les mots d'une phrase, chaque champ est juste un trait sous le mot.
     Le but est que le formulaire ressemble à une lettre qui se complète,
     pas à une grille de champs intimidante. */
  .letter-form {
    margin: clamp(40px, 6vh, 72px) auto 0;
    max-width: 880px; width: 100%;
    text-align: left;
  }
  .letter-form__salutation {
    font-family: var(--title);
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: 400;
    color: var(--fg);
    margin: 0 0 clamp(28px, 4vh, 48px);
    letter-spacing: 0.005em;
  }
  .letter-form__lines {
    display: flex; flex-direction: column;
    gap: clamp(20px, 2.6vh, 32px);
  }
  .letter-form__line {
    display: flex; align-items: baseline;
    flex-wrap: wrap;
    gap: clamp(10px, 1.2vw, 18px);
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(18px, 1.3vw + 0.4rem, 22px);
    line-height: 1.5;
    color: var(--fg-soft);
  }
  .letter-form__line--block { flex-direction: column; align-items: stretch; }
  .letter-form__label {
    flex: 0 0 auto;
    color: var(--fg-soft);
    white-space: nowrap;
  }
  .letter-form__label--block {
    margin-bottom: clamp(8px, 1vh, 14px);
  }
  .letter-form__input,
  .letter-form__textarea {
    flex: 1 1 240px;
    min-width: 0;
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(18px, 1.3vw + 0.4rem, 22px);
    line-height: 1.5;
    color: var(--fg);
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    padding: 4px 6px 8px;
    outline: none;
    transition: border-color 0.3s ease;
    /* Style cohérent sur toutes les plateformes */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border-radius: 0;
  }
  .letter-form__input:hover,
  .letter-form__textarea:hover {
    border-color: color-mix(in srgb, currentColor 65%, transparent);
  }
  .letter-form__input:focus,
  .letter-form__textarea:focus {
    border-color: currentColor;
    color: var(--fg);
  }
  .letter-form__input::placeholder,
  .letter-form__textarea::placeholder {
    color: color-mix(in srgb, currentColor 35%, transparent);
    font-style: italic;
    opacity: 1;
  }
  /* Select stylé comme un input texte avec une chevron discrète */
  .letter-form__input--select {
    padding-right: 28px;
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) 14px, calc(100% - 8px) 14px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .letter-form__input--select option {
    /* Les options du <select> utilisent le fond natif de l'OS, on les
       laisse en sans-serif lisible et en couleur foncée par défaut. */
    font-family: var(--sans); font-style: normal; font-size: 14px;
    background: var(--mm-ivoire); color: var(--mm-nocturne);
  }
  .letter-form__textarea {
    width: 100%;
    resize: vertical;
    min-height: clamp(100px, 14vh, 160px);
    padding: 12px 6px;
  }
  .letter-form__actions {
    margin-top: clamp(40px, 5vh, 64px);
    display: flex; justify-content: flex-end;
  }
  .letter-form__submit {
    display: inline-flex; align-items: center; gap: 14px;
    background: transparent; border: 0;
    font-family: var(--sans);
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--fg);
    padding: 14px 0;
    cursor: pointer;
    border-bottom: 1px solid currentColor;
    transition: gap 0.3s ease, color 0.3s ease;
  }
  .letter-form__submit:hover { gap: 22px; }
  .letter-form__arrow {
    transition: transform 0.3s ease;
    display: inline-block;
  }
  .letter-form__submit:hover .letter-form__arrow { transform: translateX(4px); }

  /* Statut d'envoi (injecté par scripts-form) + champ requis en erreur.
     Couleurs neutres qui s'adaptent au fond clair (home) ou nocturne (Contact) :
     l'état courant hérite de la couleur du texte, le succès prend l'accent. */
  .letter-form__status { margin: clamp(18px, 2.4vh, 26px) 0 0; font-size: 14px; line-height: 1.6; opacity: .85; }
  .letter-form__status:empty { display: none; }
  .letter-form__status.is-error { color: #c65a4c; opacity: 1; }
  .letter-form__status.is-sent {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(18px, 1.1vw + .5rem, 23px); line-height: 1.5;
    color: var(--c-accent); opacity: 1;
  }
  .lf-i--error, .lf-i--error::placeholder { border-color: #c65a4c; color: #c65a4c; }

  /* Mobile : on aère, les labels passent au-dessus de leur input pour
     ne pas que les lignes se cassent dans tous les sens. */
  @media (max-width: 700px) {
    .letter-form__line {
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
    }
    .letter-form__label { white-space: normal; }
    .letter-form__input { flex: 1 1 100%; }
    .letter-form__actions { justify-content: stretch; }
    .letter-form__submit { width: 100%; justify-content: center; }
  }

  /* ================================================================
     Formulaire « prose » (review 2026-05-28) : variante centrée où
     les champs se fondent dans une vraie phrase qu'on lit d'une
     traite. Les <input> et <select> sont inline-block et viennent se
     glisser entre les mots du label, qui n'est plus un label séparé
     mais du texte courant <span>.
     ================================================================ */
  /* Section Contact centrée (review 2026-05-28) : on remplace le
     wrapper à gauche par un bloc centré, plus large pour héberger la
     phrase narrative, avec un cartouche d'arrière-plan Nocturne qui
     fade out doucement vers les bords. Le but : voiler les étoiles
     derrière le texte pour la lisibilité, sans créer une bordure
     nette qui couperait la composition. */
  .contact__inner--centered {
    position: relative;
    /* z-index > 1 pour passer AU-DESSUS de la couche `.stars` qui est
       fixed avec z-index 1. Sans ça, les étoiles transparaissent à
       travers le cartouche. */
    z-index: 2;
    text-align: center;
    max-width: 980px;
    margin-left: auto; margin-right: auto;
    padding: clamp(56px, 8vh, 96px) clamp(32px, 6vw, 80px);
    /* Cartouche en radial-gradient : couleur exacte du fond de section
       au centre (var(--bg) suit le scrub jour/nuit), fade out vers
       transparent aux bords. Comme la couleur du centre est strictement
       égale à celle du body, le cartouche est invisible — sauf qu'il
       opacifie la zone des étoiles derrière le texte. */
    background: radial-gradient(
      ellipse at center,
      var(--bg) 0%,
      var(--bg) 60%,
      transparent 100%
    );
  }
  /* Tout est centré à l'intérieur du cartouche, y compris les blocs
     qui avaient des `max-width` à gauche par défaut. */
  .contact__inner--centered .contact__lede {
    max-width: 60ch;
    margin-left: auto; margin-right: auto;
  }
  .contact__inner--centered .letter-form__message {
    margin-left: auto; margin-right: auto;
  }
  .contact__inner--centered .contact__sla {
    margin-left: auto; margin-right: auto;
  }
  .letter-form--prose {
    margin: clamp(40px, 6vh, 72px) auto 0;
    max-width: 880px; width: 100%;
    text-align: center;
  }
  .letter-form__prose {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(20px, 1.5vw + 0.4rem, 26px);
    line-height: 2;
    color: var(--fg);
    margin: 0;
    word-spacing: 0.04em;
    /* Centré, flux naturel (review 2026-05-31) : le justify isolait
       les comboboxes sur leur propre ligne. Le centré garde la phrase
       compacte et lisible, les champs s'enchaînent dans le texte. */
    text-align: center;
  }
  /* Texte des phrases de la lettre en blanc 100 % pour la lisibilité sur
     le fond nocturne (retour 4 juin). Les champs à remplir restent en
     ton effacé (var(--fg-soft)), eux ne changent pas. */
  .lf-w {
    display: inline;
    color: #fff;
  }
  .lf-w--punct {
    /* Une ponctuation ne porte pas d'espace avant : on annule le
       gap visuel introduit par word-spacing. */
    margin-left: -0.35em;
    color: #fff;
  }
  .lf-i {
    display: inline-block;
    font: inherit;
    font-style: italic; font-weight: 400;
    color: var(--fg);
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    padding: 0 6px 2px;
    margin: 0 2px;
    outline: none;
    /* Largeur dimensionnée sur le `size` HTML (qui correspond au
       placeholder), pour que la phrase reste lisible. */
    width: auto;
    min-width: 4ch;
    max-width: 100%;
    text-align: center;
    vertical-align: baseline;
    transition: border-color 0.3s ease;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border-radius: 0;
    /* Si supporté : auto-fit au contenu réel */
    field-sizing: content;
  }
  .lf-i:hover { border-color: color-mix(in srgb, currentColor 65%, transparent); }
  .lf-i:focus { border-color: currentColor; }
  .lf-i::placeholder {
    color: color-mix(in srgb, currentColor 35%, transparent);
    font-style: italic;
    text-align: center;
    opacity: 1;
  }
  /* Select natif (review 2026-05-31, définitif) : on garde le picker
     système du navigateur (fiable, fonctionne partout, mobile inclus).
     Le contrôle fermé est stylé pour s'intégrer à la phrase italique ;
     le menu déroulant utilise l'UI native. */
  .lf-i--select {
    /* Hérite du style .lf-i (italique serif, underline). On ajoute
       juste le chevron et l'espace pour. */
    cursor: pointer;
    padding: 0 22px 2px 6px;
    /* nowrap pour que le contrôle ne se coupe jamais en deux lignes. */
    white-space: nowrap;
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 12px) calc(50% + 1px), calc(100% - 7px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  /* Les <option> du menu natif : taille 16 px pour empêcher iOS Safari
     de zoomer au focus, en sans-serif lisible et fond clair. */
  .lf-i--select option {
    font-family: var(--sans);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    background: var(--mm-ivoire);
    color: var(--mm-nocturne);
  }
  /* Quand aucune valeur choisie (placeholder affiché), ton effacé. */
  .lf-i--select:invalid { color: color-mix(in srgb, currentColor 55%, transparent); }

  /* Déclencheurs budget / source : rendus comme un champ select inline
     (mêmes .lf-i .lf-i--select), mais ce sont des <button> qui ouvrent un
     modal. Tant que rien n'est choisi (pas .is-filled), ton effacé comme un
     placeholder. .lf-pick-group garde le déclencheur collé à sa ponctuation
     (virgule / point) pour éviter qu'elle saute seule à la ligne. */
  .lf-pick { cursor: pointer; }
  .lf-pick:not(.is-filled) { color: color-mix(in srgb, currentColor 55%, transparent); }
  .lf-pick-group { white-space: nowrap; }

  /* ----- Modal de sélection (budget / source) ----- */
  .picker {
    position: fixed; inset: 0; z-index: 200;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
  }
  .picker.is-open { display: flex; }
  .picker__backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 26, 24, 0.55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .picker__panel {
    position: relative;
    width: min(440px, 100%);
    max-height: 82vh; overflow-y: auto;
    background: var(--mm-ivoire); color: var(--mm-nocturne);
    border-radius: 14px;
    padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 36px) clamp(20px, 3vw, 28px);
    box-shadow: 0 30px 80px rgba(20, 26, 24, 0.4);
    text-align: center;
  }
  .picker__title {
    font-family: var(--title); font-style: normal; font-weight: 400; letter-spacing: 0.025em;
    font-size: clamp(18px, 1.4vw + 0.4rem, 23px);
    color: var(--mm-nocturne); margin: 0 0 clamp(16px, 2.4vh, 24px);
  }
  .picker__list { list-style: none; margin: 0; padding: 0; }
  .picker__opt {
    display: block; width: 100%;
    background: transparent; border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--mm-nocturne) 12%, transparent);
    padding: 13px 8px;
    font-family: var(--sans); font-size: 15px; font-weight: 300;
    color: var(--mm-nocturne); cursor: pointer;
    transition: background 0.2s ease;
  }
  .picker__opt:hover, .picker__opt:focus-visible {
    background: color-mix(in srgb, var(--mm-sauge) 40%, transparent); outline: none;
  }
  .picker__opt[aria-selected="true"] { font-weight: 500; }
  .picker__list li:last-child .picker__opt { border-bottom: 0; }
  .picker__close {
    margin-top: clamp(16px, 2.4vh, 24px);
    background: transparent; border: 0;
    font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--mm-nocturne) 60%, transparent); cursor: pointer;
  }
  .picker__close:hover { color: var(--mm-nocturne); }

  /* Bloc message en dessous de la phrase, séparé. */
  .letter-form__message {
    margin-top: clamp(40px, 6vh, 72px);
    max-width: 720px; margin-left: auto; margin-right: auto;
    text-align: left;
  }
  .letter-form__msg-label {
    display: block;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(18px, 1.2vw + 0.4rem, 22px);
    color: var(--fg-soft);
    margin-bottom: clamp(10px, 1.4vh, 16px);
    text-align: center;
  }

  /* Bouton d'envoi centré. */
  .letter-form--prose .letter-form__actions {
    justify-content: center;
  }
  .letter-form--prose .letter-form__submit {
    border-bottom: 1px solid currentColor;
    /* Animation trait au-dessus comme les autres boutons. */
    position: relative;
  }
  .letter-form--prose .letter-form__submit::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(.4, .1, .25, 1);
  }
  .letter-form--prose .letter-form__submit:hover::before,
  .letter-form--prose .letter-form__submit:focus-visible::before {
    transform: scaleX(1);
  }

  @media (max-width: 720px) {
    .letter-form__prose {
      font-size: clamp(17px, 4vw, 20px);
      line-height: 1.9;
    }
  }

  /* Section Journal sur la home (review 2026-05-28) : aperçu de
     3 articles avec CTA vers /journal. Renforce le maillage SEO
     pilier-satellite. */
  .journal-preview__head {
    max-width: 1100px; margin: 0 auto clamp(40px, 6vh, 72px);
    text-align: center;
  }
  /* Sous-titre du H2 réduit dans cette section pour ne pas dominer
     le titre (review 2026-05-31). Marge haute généreuse (retour client
     24/06) : le swash de la grande initiale « L » de « Le journal » descend
     bas et venait coller le sous-titre. */
  .journal-preview__head .title-sub {
    font-size: 0.38em;
    letter-spacing: 0.02em;
    margin-top: clamp(22px, 3.4vh, 40px);
  }
  .journal-preview__intro {
    margin: clamp(16px, 2vh, 24px) auto 0;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(17px, 1.1vw + 0.6rem, 21px);
    line-height: 1.6;
    color: var(--fg-soft);
    /* Plus généreux : on évite les retours à la ligne intempestifs
       sur le paragraphe d'intro. */
    max-width: 78ch;
  }
  .journal-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
  }
  .journal-card { margin: 0; }
  .journal-card__link {
    display: flex; flex-direction: column; gap: clamp(18px, 2.5vh, 28px);
    color: inherit;
  }
  .journal-card__media {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    margin: 0;
  }
  .journal-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.9s ease;
    filter: saturate(0.92) sepia(0.05);
  }
  .journal-card__link:hover .journal-card__media img { transform: scale(1.04); }
  .journal-card__body {
    display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px);
  }
  .journal-card__kicker {
    font-family: var(--sans);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--fg-soft);
  }
  .journal-card__title {
    font-family: var(--title);
    font-style: normal;
    font-weight: 400; letter-spacing: 0.025em;
    font-size: clamp(20px, 1.2vw + 0.5rem, 26px);
    line-height: 1.25;
    margin: 0;
    color: var(--fg);
    transition: color 0.3s ease;
  }
  .journal-card__link:hover .journal-card__title { color: var(--c-accent); }
  .journal-card__excerpt {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(13px, 0.6vw + 0.4rem, 14px);
    line-height: 1.7;
    color: var(--fg-soft);
    margin: 0;
  }
  .journal-preview__cta {
    margin-top: clamp(40px, 6vh, 72px);
    display: flex; justify-content: center;
  }
  @media (max-width: 900px) {
    .journal-preview__grid { grid-template-columns: 1fr; gap: clamp(28px, 4vh, 40px); }
  }
  /* #128 : sur mobile, la home est trop longue → la section « Le journal »
     devient une liste compacte de titres cliquables, sans images. La carte
     entière reste un lien (titre cliquable). */
  @media (max-width: 620px) {
    .s-journal-preview .journal-card__media { display: none; }
    .s-journal-preview .journal-card__link { gap: 6px; }
    .s-journal-preview .journal-preview__grid { gap: clamp(24px, 4vh, 34px); }
  }

  /* Mention SLA + coordonnées sous le CTA contact (review #34). */
  .contact__sla {
    margin-top: 1.25rem;
    font-family: var(--sans);
    font-size: 13px; font-weight: 300;
    color: rgba(244,238,231,.72);
    letter-spacing: 0.01em;
    line-height: 1.7;
    text-align: center;
    max-width: 540px;
    margin-left: auto; margin-right: auto;
  }
  .contact__sla a {
    color: rgba(244,238,231,.88);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: .5px;
  }
  .contact__sla a:hover { color: var(--mm-ivoire); }

  /* Corps de texte : justification à la française avec césures
     automatiques pour éviter les blancs disgracieux. */
  .hero__lede,
  .maison__prose,
  .maison__prose p,
  .collections__lede,
  .collection-card__desc,
  .provence__prose,
  .provence__prose p,
  .realisations__intro,
  .journal__intro,
  .journal-theme__desc,
  .contact__lede,
  .maison__prose p,
  .split__body p,
  .coll-row__body p,
  .values__item p,
  .prose-col p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }