/* =========================================================
   unéo — index.html seulement
   DESIGN.md v3.10.1 « Diptyque ». S'appuie sur tokens.css.
   N'affecte pas les 12 autres pages (migration progressive).
   ========================================================= */

/* 2026-09-22 — EXCEPTION BORNÉE (voir §.v3-stats plus bas) : les chiffres
   « 500+ » et « 20+ » du hero passent en Playfair Display (non italique) et
   leurs libellés en Poppins, sur demande explicite du client, reprenant le
   traitement déjà validé sur la page de test nouveau-site-web/. Ni l'une ni
   l'autre police n'est dans DESIGN.md §8 (Geist / Playfair italique / IBM
   Plex Mono, toutes auto-hébergées) et le lien Google Fonts ajouté dans
   index.html contredit « aucun appel distant » (CLAUDE.md §12). Concerne
   uniquement ces deux chiffres du hero — pas propagé ailleurs. */

/* Polices auto-hébergées (DESIGN.md §8) — aucun appel fonts.googleapis/gstatic.
   Geist (variable, axe 400-700) vit dans site-header.css, chargé aux côtés
   de v3-home.css sur les pages à nav v4 (voir SECTIONS.md). */
@font-face{
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-italic-500.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

body{
  font-family: var(--f-poids);
  background: var(--c-creme);
  color: var(--c-charbon);
}
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
h1, h2, h3{ font-family: var(--f-poids); }
em{ font-family: var(--f-souffle); font-style: italic; font-weight: 500; }

/* ---------- En-tête ----------
   Déménagé dans assets/css/site-header.css le 2026-08-18 (nav partagée avec
   les autres pages à hero plein écran). Voir SECTIONS.md. */

/* Barre de progression du scroll (§4.7) : héritée telle quelle du site actuel.
   Déjà en var(--green) dans style.css, identique à var(--c-vert) — aucun changement requis. */

/* ---------- Hero : plein écran, reproduit fidèlement uneo-home-plein-ecran-v3.html
   (référence collée par Marc le 2026-08-17). Bloc de texte à GAUCHE (pas centré —
   la demande de centrage précédente est révoquée par cette référence explicite).
   Notre .site-header sticky remplace la nav locale de la maquette (même rôle,
   en plus persistant + barre de progression du scroll, §4.7). Photo et logo
   sont les mêmes assets déjà dans /assets/img (vérifié par extraction du base64
   collé : portrait-f40-cafe-facade.jpg + uneo-logo-creme-400.png). */
.v3-hero{
  position: relative;
  /* svh, pas dvh (2026-09-18) : dvh SUIT la barre d'adresse mobile, donc la
     hauteur du hero se recalcule pendant le defilement et l'image se
     redimensionne sous les yeux du visiteur (signale par Marc, captures a
     l'appui). svh est fige sur l'etat barres visibles, la hauteur ne bouge
     plus. vh reste en repli pour les navigateurs sans svh. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  /* flex-start (2026-09-03) : le centrage vertical plaçait le bloc de texte en
     plein sur le visage du sujet (nouvelle photo) — un ancrage haut, avec un
     padding-top calibré, laisse la tête et le torse dégagés au lieu de miser
     sur un centrage qui ignore où se trouve le sujet dans la photo. */
  align-items: flex-start;
  overflow: hidden;
  /* L'anneau vert par défaut ne fait que 2,82:1 sur le voile charbon (DESIGN.md §1,
     "refusé") — le hero est le seul endroit du site où le focus passe en crème. */
  --focus-ring: var(--c-creme);
}
.v3-hero-bg{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 64% 32%;
}
.v3-hero-voile{
  position: absolute; inset: 0;
  /* voile latéral : opaque à gauche (sous le texte) → transparent vers 66% de la largeur */
  background: linear-gradient(90deg,
    rgba(var(--scrim-hero-rgb),.66) 0%, rgba(var(--scrim-hero-rgb),.62) 30%,
    rgba(var(--scrim-hero-rgb),.30) 52%, rgba(var(--scrim-hero-rgb),0) 66%);
}
.v3-hero-content{
  position: relative; z-index: 2;
  width: 100%;
  /* Remonté (2026-09-03) : nouvelle photo hero, la tête du sujet est plus haute
     dans le cadre — le texte doit rester au-dessus, pas contre son visage.
     Redescendu un peu (retour de Marc, capture annotée) pour respirer sous
     la nav sans recoller à la tête. */
  padding: clamp(120px, 15vh, 210px) clamp(20px, 3vw, 48px) 120px;
}
/* max-width fluide (2026-09-03) : en em fixe (34em), le conteneur ne suivait
   pas la croissance du H1 en 4.4vw — au-delà de ~1170px de large, --fs-d1
   grossissait plus vite que la boîte, le H1 retombait sur 3-4 lignes au lieu
   de 2 (retour de Marc, capture à l'appui). 60vw suit la même pente que
   --fs-d1 avec une marge de sécurité (calibré sur le segment EN le plus
   long, « Management that gives you ») ; pas de plafond car une boîte plus
   large que le texte est invisible (pas de bordure/fond sur .bloc). */
.v3-hero .bloc{ max-width: max(544px, 60vw); color: var(--c-creme); margin: 0 auto; text-align: center; }
.v3-hero h1{
  margin: 0;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.06;
  font-size: var(--fs-d1);
  text-shadow: var(--ombre-texte-photo);
  color: var(--c-creme); /* style.css force color:var(--ink) sur tout h1 — override explicite requis */
}
.v3-hero h1 em{ color: var(--c-creme); }
.v3-hero .sous{
  margin: 16px 0 0;
  color: var(--creme-attenuee);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  width: 100%;
  font-family: var(--f-poids);
}
/* Bouton trop collé au sous-titre depuis le retrait de .v3-capsule du hero
   (signalé le 2026-08-18) — même respiration que .hero-actions ailleurs sur
   le site (cf. avec-uneo.html, gestion-multiresidentiel.html). */
.v3-hero .hero-actions{ margin-top: var(--space-4); justify-content: center; }
/* Desktop (2026-09-03, retour de Marc, capture annotée) : un margin-top fixe
   dépend de la hauteur du bloc H1 + sous-titre au-dessus — sur un écran très
   large/court, le H1 en 4.4vw peut faire 2 ou 4 lignes selon le point de
   rupture, ce qui déplaçait le bouton bien au-delà des genoux du sujet.
   Position absolue calée en vh : le bouton reste à hauteur des genoux quelle
   que soit la hauteur du texte au-dessus. */
@media (min-width: 821px){
  .v3-hero .hero-actions{
    position: absolute;
    left: 50%; top: 78vh;
    transform: translate(-50%, -50%);
    margin-top: 0;
    width: max-content;
  }
}
/* Capsule empilée (COMPONENTS.md §7) : la variante encastrée est retirée du
   système — à 16px, « Me libérer de ma gestion » occupe environ 200px, ce qui
   ne laisse plus assez de place au champ dans une capsule de 440px. Un seul
   format, empilé, à toutes les largeurs. */
.v3-capsule{
  display: flex; flex-direction: column; gap: 12px;
  margin: 28px 0 0;
  max-width: 440px;
  width: 100%;
}
.v3-capsule input{
  height: var(--cible-mobile);
  padding: 0 24px;
  background: var(--c-creme-input);
  border: 1px solid var(--c-gres);
  border-radius: var(--r-pill);
  font: inherit; font-size: 16px; color: var(--c-charbon);
  font-family: var(--f-poids);
  width: 100%;
}
.v3-capsule input::placeholder{ color: var(--c-taupe); }
.v3-pill{
  width: 100%; height: var(--cible-mobile);
  border: 0; cursor: pointer;
  background: var(--c-vert); color: var(--c-creme);
  font-family: var(--f-poids); font-weight: 600; font-size: 16px;
  border-radius: var(--r-pill);
  transition: background var(--dur-nav) var(--ease), transform 80ms var(--ease);
}
.v3-pill:hover{ background: var(--c-vert-press); }
.v3-pill:active{ transform: translateY(1px); }
.v3-pill[aria-busy="true"]{ opacity: .7; cursor: wait; }

/* États du formulaire (C5, COMPONENTS.md §2/§7) : jamais de rouge, factuel. */
.v3-capsule input.is-invalid{ border-color: var(--c-vert-press); border-width: 2px; }
.v3-capsule-erreur{
  order: 99; margin: -4px 0 0; font-size: var(--fs-body); color: var(--c-charbon);
}
.v3-capsule-reseau{
  margin-top: 12px; font-size: var(--fs-body); color: var(--c-charbon);
}
.v3-capsule-reseau a{ color: var(--c-vert); text-decoration: underline; font-weight: 600; }
.v3-capsule-succes{
  max-width: 440px; padding: 16px 24px;
  background: var(--c-creme-input); border: 1px solid var(--c-gres);
  border-radius: var(--r-panneau);
}
.v3-capsule-succes p{ margin: 0; font-size: var(--fs-body); color: var(--c-charbon); font-weight: 600; }
/* Sur le hero, la confirmation reste lisible sur le voile sombre. */
.v3-hero .v3-capsule-succes{ background: rgba(253,247,236,.95); }
/* Cible desktop ≥48px (§5) ; le champ/bouton de la capsule restent à 56px
   à toutes les largeurs, seule l'action secondaire de l'en-tête suit 48/desktop. */
.header-cta{
  height: var(--cible-desktop);
  padding: 0 20px;
  font-size: 16px; font-weight: 600; font-family: var(--f-poids);
  white-space: nowrap;
}
.v3-reassure{
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--f-voix); font-size: 13px; letter-spacing: .03em;
  color: var(--creme-attenuee);
  /* Sans cette limite, le texte dépasse la largeur du bouton/capsule (440px)
     dès qu'il passe sur deux lignes — signalé le 2026-08-18. */
  max-width: 440px;
}
.v3-reassure svg{ flex: none; }

/* Scrim bas : contraste dédié à la bande de stats, indépendant du voile latéral */
.v3-hero-scrim{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  height: clamp(110px, 16vh, 160px);
  background: linear-gradient(180deg, rgba(var(--scrim-hero-rgb),0) 0%, rgba(var(--scrim-hero-rgb),.42) 45%, rgba(var(--scrim-hero-rgb),.72) 100%);
}
.v3-stats{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: clamp(18px, 2.4vh, 28px) clamp(20px, 3vw, 48px);
}
.v3-stats div{
  font-family: var(--f-voix); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--creme-attenuee);
}
.v3-stats b{
  display: block; font-family: var(--f-poids);
  font-size: var(--fs-stat); font-weight: 700;
  letter-spacing: -.015em; color: var(--c-creme); margin-bottom: 6px; line-height: 1;
}
/* Exception bornée du 2026-09-22 (voir commentaire d'en-tête) : seuls les
   deux premiers chiffres (500+ / 20+) reçoivent Playfair + Poppins — le
   troisième slot est maintenant le badge Lauréat (image), pas du texte. */
.v3-stats > div:nth-child(-n+2){ font-family: "Poppins", var(--f-voix), sans-serif; }
.v3-stats > div:nth-child(-n+2) b{ font-family: "Playfair Display", var(--f-poids), serif; font-style: normal; }
/* Badge Lauréat 2026 — remplace le 3e mini-stat texte (« Lauréat 2026 /
   Gala CCIHR, présenté par Desjardins ») par l'image détourée déjà utilisée
   sur nouveau-site-web/ (assets/img/badge-laureat-2026.png). Hauteur calée
   pour respirer au même niveau que les deux chiffres voisins (align-items:
   flex-end hérité de .v3-stats). */
.v3-stats .v3-badge-laureat{
  height: clamp(48px, 6.4vw, 68px);
  width: auto;
}
@media (max-width: 820px){
  .v3-hero-voile{ background: linear-gradient(180deg, rgba(var(--scrim-hero-rgb),.30) 0%, rgba(var(--scrim-hero-rgb),.72) 62%, rgba(var(--scrim-hero-rgb),.8) 100%); }
  .v3-hero-content{ display: flex; align-items: flex-end; padding-bottom: 130px; height: 100%; }
  .v3-hero .bloc{ max-width: none; }
  .v3-stats{ display: none; } /* protège l'absence d'espace, comme la maquette */
  /* H1 remplacé le 2026-09-03 par un texte plus long avec un <br> manuel
     (2 segments) — à var(--fs-d1), chaque segment retombait à la ligne une
     seconde fois (3-4 lignes au total, interdit par Marc). Taille dédiée,
     calibrée pour que les deux segments les plus longs (FR et EN) tiennent
     chacun sur une seule ligne dès 320px de large. */
  .v3-hero h1{ font-size: clamp(1.35rem, 6.2vw, 1.7rem); }
}

/* ---------- Diptyque générique (charge mentale, etc.) ----------
   58/42, texte gauche / photo droite (handoff « Accueil réorganisée »
   2026-08-18) : seul usage actuel de .diptyque sur la page. */
.diptyque{
  display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 900px){ .diptyque{ grid-template-columns: 58fr 42fr; } }
.diptyque .parole,
.diptyque .image{ border-radius: var(--r-panneau); overflow: hidden; min-height: 420px; }
.diptyque .parole{
  background: var(--c-creme);
  /* Pas de padding à gauche : le texte doit démarrer au même repère que les
     autres sections (.section-head n'a pas ce padding interne) — signalé
     le 2026-08-18, « la charge » démarrait ~48px plus à droite qu'« aiguillage ». */
  padding: var(--s-12) var(--s-12) var(--s-12) 0;
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
}
@media (max-width: 640px){ .diptyque .parole{ padding: var(--s-12) 0; } }
.diptyque .parole > .label{ margin: 0; }
.diptyque .parole h2{
  font-size: var(--fs-d2); line-height: var(--lh-snug); font-weight: 600; margin: 0;
}
.diptyque .parole h2 em{ color: var(--c-vert); }
.diptyque .parole p{
  margin: 0; color: var(--c-taupe); font-size: 1rem; line-height: 1.55; max-width: 40ch;
}
.diptyque .image{ position: relative; background: var(--c-gres); }
.diptyque .image img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform var(--dur-hover) var(--ease); }
.diptyque .image:hover img{ transform: scale(1.02); }

/* ---------- Répartition chez nous / chez vous (bloc 02) ---------- */
.v3-repartition{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.v3-repartition-col{ display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--c-gres); }
.v3-repartition-col p{ margin: 0; color: var(--c-taupe); font-size: .9375rem; line-height: 1.55; max-width: none; }
.label.vert{ color: var(--c-vert); }
@media (max-width: 640px){ .v3-repartition{ grid-template-columns: 1fr; } }

/* ---------- Section head : eyebrow mono au-dessus du titre ---------- */
.section-head > .label{ display: block; margin-bottom: 12px; }

/* ---------- Deux parcours (bloc 03, nouveau) ----------
   Exception documentée : carte ombrée comme .t-card (témoignages), mais fond
   crème (même couleur que la page, pas blanc) — la carte se distingue par le
   filet et l'ombre, pas par un contraste de fond. Ajusté le 2026-08-18. */
.v3-parcours{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.v3-parcours-carte{
  display: block; text-decoration: none; color: inherit;
  background: var(--c-creme); border: 1px solid var(--line); border-radius: var(--r-carte);
  padding: 40px; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.v3-parcours-carte:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(66,105,91,.22); }
.v3-parcours-carte .label{ display: block; margin-bottom: 14px; color: var(--c-taupe); }
.v3-parcours-carte h3{ font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; margin: 0 0 10px; }
.v3-parcours-carte p{ margin: 0; font-size: 1rem; line-height: 1.6; color: var(--c-taupe); }
.v3-parcours-lien{
  display: block; margin-top: 20px; padding-top: 20px;
  border-top: 1px solid rgba(28,26,21,.14);
  font-size: 1rem; font-weight: 500; color: var(--c-vert);
}
.v3-parcours-carte .arrow{ display: inline-block; transition: transform var(--dur-nav) var(--ease); }
.v3-parcours-carte:hover .arrow{ transform: translateX(3px); }
@media (max-width: 900px){ .v3-parcours{ grid-template-columns: 1fr; } }

/* ---------- Ce qu'on prend en charge : grille 2 colonnes (bloc 04) ---------- */
.v3-services-grille{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 32px; }
.v3-services-item{
  display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: baseline;
  padding: 20px 0; border-top: 1px solid var(--c-gres);
}
.v3-services-item .titre{ font-size: 1.125rem; font-weight: 600; margin: 0; }
.v3-services-item p{ color: var(--c-taupe); margin: 6px 0 0; font-size: 1rem; line-height: 1.55; }
@media (max-width: 900px){ .v3-services-grille{ grid-template-columns: 1fr; } }
@media (max-width: 640px){
  .v3-services-item{ grid-template-columns: 96px 1fr; }
  .v3-services-item p{ display: none; }
}

/* ---------- La méthode : bande vert profond, diptyque inversé (bloc 05) ----------
   Vert-profond via le token, pas .bg-green-deep de style.css (#1F3129,
   valeur de l'ancien système — non équivalente à --c-vert-deep #2E4F43). */
/* Coins arrondis + gouttière, comme .diptyque (bloc 02) — signalé le
   2026-08-18, le bloc était à angles vifs contrairement au reste du système. */
.v3-methode-grid{ display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px){ .v3-methode-grid{ grid-template-columns: 42fr 58fr; } }
.v3-methode-photo,
.v3-methode-texte{ border-radius: var(--r-panneau); overflow: hidden; }
.v3-methode-photo{ min-height: 320px; position: relative; background: var(--c-gres); }
.v3-methode-photo img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.v3-methode-texte{
  background: var(--c-vert-deep);
  color: var(--c-creme); padding: var(--s-12);
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
}
.v3-methode-texte > .label{ color: var(--creme-attenuee); }
/* style.css force color:var(--ink) sur tout h1-h4 (règle générique) — même
   bug que le h1 du hero, override explicite requis sur fond sombre. */
.v3-methode-texte h2{ margin: 0; font-size: var(--fs-d2); line-height: var(--lh-snug); font-weight: 600; color: var(--c-creme); }
/* style.css force em{color:var(--green)} globalement (règle générique, même
   mécanisme que .v3-hero h1 em) — override explicite requis sur fond sombre. */
.v3-methode-texte h2 em{ color: var(--c-creme); }
.v3-methode-etapes{ display: grid; gap: 20px; }
.v3-methode-etapes > div{ padding-top: 16px; border-top: 1px solid var(--creme-filet); display: grid; gap: 6px; }
.v3-methode-etapes .label{ color: var(--creme-attenuee); }
.v3-methode-etapes p{ margin: 0; font-size: 1.0625rem; line-height: 1.5; }
@media (max-width: 640px){ .v3-methode-texte{ padding: 48px clamp(20px,5vw,32px); } }

/* ---------- CTA final : variante rectangulaire propre au bloc 07 ----------
   Seule différence visuelle avec la capsule du hero (pilule inchangée,
   règle absolue du handoff) : rayon 8px au lieu de --r-pill. Garde les
   classes .v3-capsule/.v3-pill pour le hook JS (v3-home.js). */
.v3-capsule--carre{ max-width: 420px; }
.v3-capsule--carre input{ border-radius: 8px; }
.v3-pill--carre{ border-radius: 8px; }

/* ---------- Liste filet (guichet unique) ---------- */
.liste-filet{ border-top: 1px solid var(--c-gres); }
.liste-filet-item{
  display: flex; align-items: baseline; gap: 24px;
  padding: 28px 0; border-bottom: 1px solid var(--c-gres);
}
.liste-filet-item .label{
  font-family: var(--f-voix); font-size: 13px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-taupe); width: 140px; flex: none;
}
.liste-filet-item .titre{ font-size: var(--fs-d3); font-weight: 600; margin: 0; }
.liste-filet-item p{ color: var(--c-taupe); margin: 6px 0 0; font-size: 1rem; max-width: 52ch; }
@media (max-width: 640px){
  .liste-filet-item{ flex-direction: column; gap: 4px; }
  .liste-filet-item .label{ width: auto; }
}

/* ---------- Plaque de preuve (C3) ---------- */
.plaque-preuve{
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--s-6);
}
.plaque-preuve-item{
  flex: 1 1 0; min-width: 160px;
  padding: 0 var(--s-6);
  border-left: 1px solid rgba(78,125,108,.4); /* --c-vert-filet à 40% (COMPONENTS.md §5) */
}
.plaque-preuve-item:first-child{ border-left: 0; padding-left: 0; }
.plaque-preuve-item b{
  display: block; font-family: var(--f-poids); font-weight: 700;
  font-size: var(--fs-stat); letter-spacing: -.015em;
  color: var(--c-creme); line-height: 1; margin-bottom: 8px;
}
.plaque-preuve-item span{
  font-family: var(--f-voix); font-size: var(--fs-label); letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-taupe);
}
@media (max-width: 640px){
  .plaque-preuve{ flex-direction: column; gap: var(--s-6); }
  .plaque-preuve-item{ border-left: 0; padding-left: 0; }
}

/* ---------- Séparateur filet ---------- */
.v3-filet{ height: 1px; background: var(--c-gres); border: 0; margin-block: var(--s-24); }
@media (max-width: 640px){ .v3-filet{ margin-block: 40px; } }

/* ---------- Méthode : séquence réelle, numérotation conservée (§4.3) ---------- */
.v3-etapes{ display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){ .v3-etapes{ grid-template-columns: 1fr; } }
.v3-etape{ border-top: 1px solid var(--c-gres); padding-top: 20px; }
.v3-etape .num{
  font-family: var(--f-souffle); font-style: italic; font-weight: 500;
  color: var(--c-vert); font-size: 1.6rem; margin-bottom: 8px;
}
.v3-etape h3{ font-size: var(--fs-d3); font-weight: 600; margin: 0; }
.v3-etape p{ color: var(--c-taupe); margin-top: 8px; font-size: var(--fs-body); line-height: 1.5; }

/* ---------- Notre modèle : surface éditoriale vert profond ---------- */
.v3-modele{ background: var(--c-vert-deep); color: var(--c-creme); }
.v3-modele .grid-3 > div{ border-top: 1px solid var(--c-vert-filet); padding-top: var(--s-6); }
.v3-modele h3{ color: var(--c-creme); }
.v3-modele .quote{ font-family: var(--f-souffle); font-style: italic; color: var(--c-creme); }

/* ---------- Témoignages : liste filet statique (§9 interdit le carrousel auto) ---------- */
/* TODO(unéo): en attente de témoignages réels signés — ne pas instancier avant. */
.v3-temoignages{ max-width: 860px; margin: 0 auto; }
.v3-temoignage{ border-bottom: 1px solid var(--c-gres); padding: 32px 0; }
.v3-temoignage:first-child{ border-top: 1px solid var(--c-gres); }
.v3-temoignage blockquote{
  margin: 0; font-size: 1.15rem; line-height: 1.5; color: var(--c-charbon);
}
.v3-temoignage .attr{
  margin-top: 14px; font-family: var(--f-voix); font-size: 13px;
  letter-spacing: .04em; color: var(--c-taupe);
}

/* ---------- CTA final : capsule, pas de formulaire multi-champs ---------- */
.v3-cta-final .parole{ padding: clamp(40px, 6vw, 72px); }

/* ---------- Pied de page ----------
   Déménagé dans assets/css/site-footer.css le 2026-08-18 (pied de page
   commun aux 13 pages). Voir SECTIONS.md. */

/* ---------- Reveal : amplitude réduite au mouvement 2/10 du §9
   (remplace translateY(28px)/0.9s de style.css par 8px/420ms, une seule fois) ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
/* Filet de sécurité : sans JavaScript, le contenu reste visible (hérite de style.css). */

@media (prefers-reduced-motion: reduce){
  .diptyque .image:hover img{ transform: none; }
}