/* ── INDEX.CSS — Page d'accueil (high-end visual design) ── */

/* ── ANIMATIONS ── (fadeUp + .fade* mutualisés dans css/common.css depuis l'audit 2026-06-01) ── */

/* ── HERO — Accueil humain (île claire fixe, duo de marque teal/sea) ──
   Reste clair dans les 2 thèmes (base --cream-fixed) → texte en couleurs FIXES
   (--ink-fixed / --teal), jamais --slate/--muted qui s'inversent en sombre.
   Couleurs PRIORITAIRES : #008090 (--teal) mène, #00b698 (--sea) en compagnon de dégradé.
   Raccorde aux cartes domaines juste dessous (logement=#008090 / budget=#00b698). */
.hv-hero{
  background:
    radial-gradient(120% 95% at 86% 4%, color-mix(in srgb,var(--teal) 14%,transparent) 0%, transparent 56%),
    radial-gradient(95% 90% at 2% 98%, color-mix(in srgb,var(--sea) 13%,transparent) 0%, transparent 55%),
    linear-gradient(168deg, color-mix(in srgb,var(--teal) 7%,var(--cream-fixed)) 0%, var(--cream-fixed) 52%, color-mix(in srgb,var(--sea) 5%,var(--cream-fixed)) 100%);
  padding:clamp(40px,7vw,88px) clamp(20px,6vw,80px) clamp(88px,12vw,150px);
  position:relative;overflow:hidden;
}
/* source de lumière — large halo teal diffus en haut à droite (18% : marge de contraste pour « 1987 » teal de la carte) */
.hv-hero::before{
  content:'';position:absolute;top:-200px;right:-150px;width:760px;height:760px;
  background:radial-gradient(circle,color-mix(in srgb,var(--teal) 18%,transparent) 0%,transparent 62%);
  filter:blur(6px);pointer-events:none;
}
/* éclosion sea en bas à gauche pour la profondeur */
.hv-hero::after{
  content:'';position:absolute;bottom:-220px;left:-180px;width:640px;height:640px;
  background:radial-gradient(circle,color-mix(in srgb,var(--sea) 16%,var(--cream-fixed)) 0%,transparent 60%);
  opacity:.7;pointer-events:none;
}
.hv-hero-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,84px);align-items:center;
  position:relative;z-index:1;
}
/* Libellé de section (classe PARTAGÉE : domaines, « Qui sommes-nous », agenda) :
   casse normale, sans interlettrage ni pastille. Les capitales espacées au-dessus
   de chaque titre faisaient gabarit ; seul le héros garde sa pastille. */
.hv-eyebrow{
  display:inline-block;
  font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:600;
  color:var(--teal-ink);
  margin-bottom:28px;
}
/* Eyebrow du héros : pastille en capitales + icône map-pin teal (identité de marque),
   mais TEXTE en --ink-fixed : le teal petit texte (.66rem) sur fond teinté teal
   échoue l'AA (~3.6:1) ; l'ink-fixed (~11:1) garde la lisibilité, la pastille teal porte la couleur. */
.hv-hero .hv-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.26em;
  color:var(--ink-fixed);margin-bottom:26px;
  padding:7px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--teal) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 24%,transparent);
}
.hv-hero .hv-eyebrow svg{width:13px;height:13px;flex-shrink:0;color:var(--teal);}
.hv-h1{
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  /* 112 px sur 5 lignes auparavant : CTA sous la ligne de flottaison sur les
     portables courants. 4,25rem = plafond des autres héros ; 1.06 laisse passer
     le jambage du « g » de budget. */
  font-size:clamp(2.6rem,4.6vw,4.25rem);
  letter-spacing:-0.04em;line-height:1.06;
  color:var(--ink-fixed);
  margin:0 0 26px;
  text-wrap:balance;
}
.hv-h1-l1,.hv-h1-l2,.hv-h1-l3{display:block;}
/* Accent teal sur la 3e ligne + swash marqueur dégradé teal→sea au pied du texte */
.hv-h1-mark{
  color:var(--teal);
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--teal) 30%,transparent),color-mix(in srgb,var(--sea) 26%,transparent));
  background-repeat:no-repeat;
  background-size:100% .16em;
  background-position:0 .82em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hv-lede{
  font-family:'Outfit',sans-serif;font-weight:300;
  font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;
  color:color-mix(in srgb,var(--ink-fixed) 72%,transparent);
  max-width:520px;margin:0 0 26px;
}
/* Ligne de réassurance */
.hv-assur{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;
  margin:0 0 34px;padding:0;
}
.hv-assur li{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Outfit',sans-serif;font-weight:500;font-size:.92rem;
  color:color-mix(in srgb,var(--ink-fixed) 78%,transparent);
}
.hv-assur svg{width:18px;height:18px;color:var(--teal);flex-shrink:0;}
.hv-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* Button-in-Button (pill + nested icon circle, magnetic hover) */
.hv-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:6px 6px 6px 22px;border-radius:999px;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:.95rem;
  letter-spacing:-.005em;
  transition:transform .35s var(--ease-spring),background .35s var(--ease),box-shadow .35s var(--ease),opacity .35s var(--ease);
  text-decoration:none;cursor:pointer;border:0;
  position:relative;
}
.hv-btn--primary{
  background:var(--ink-fixed);color:var(--cream-fixed);
  box-shadow:0 1px 0 0 rgba(255,255,255,.12) inset, 0 8px 24px color-mix(in srgb,var(--ink-fixed) 18%,transparent);
}
.hv-btn--primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 0 rgba(255,255,255,.15) inset, 0 16px 36px color-mix(in srgb,var(--ink-fixed) 22%,transparent);}
.hv-btn--primary:active{transform:translateY(0) scale(.98);opacity:.92;}
.hv-btn--ghost{
  background:transparent;color:var(--ink-fixed);
  border:1px solid color-mix(in srgb,var(--ink-fixed) 14%,transparent);
  padding:13px 22px;
}
.hv-btn--ghost:hover{background:color-mix(in srgb,var(--ink-fixed) 5%,transparent);transform:translateY(-2px);}
.hv-btn--ghost:active{transform:translateY(0) scale(.98);opacity:.85;}
.hv-btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;
  background:color-mix(in srgb,#fff 14%,transparent);
  flex-shrink:0;
  transition:transform .45s var(--ease-spring),background .35s var(--ease);
}
.hv-btn-icon svg{width:16px;height:16px;}
.hv-btn--primary:hover .hv-btn-icon{transform:translate(3px,-3px) scale(1.06);background:color-mix(in srgb,#fff 22%,transparent);}

/* Double-Bezel (partagé : about + agenda) */
.hv-bezel{
  background:color-mix(in srgb,var(--teal) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 14%,transparent);
  border-radius:28px;padding:6px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.hv-bezel:hover{transform:translateY(-2px);box-shadow:0 18px 40px color-mix(in srgb,var(--teal) 14%,transparent);border-color:color-mix(in srgb,var(--teal) 28%,transparent);}
.hv-bezel-inner{
  background:var(--cream-fixed);
  border-radius:22px;padding:24px 26px;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.4),inset 0 -1px 0 0 color-mix(in srgb,var(--ink-fixed) 4%,transparent);
  position:relative;overflow:hidden;
}

/* ── Carte signature « Notre engagement » (duo de marque teal/sea, premium) ── */
.hv-hero-aside{display:flex;justify-content:center;}
.hv-sig{
  position:relative;width:100%;max-width:440px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--teal) 16%,transparent) 0%,color-mix(in srgb,var(--sea) 9%,transparent) 55%,transparent 100%);
  border:1px solid color-mix(in srgb,var(--teal) 22%,transparent);
  border-radius:30px;padding:7px;
  box-shadow:0 30px 70px color-mix(in srgb,var(--teal) 16%,transparent),0 4px 14px color-mix(in srgb,var(--ink-fixed) 8%,transparent);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.hv-sig:hover{
  transform:translateY(-2px);
  box-shadow:0 40px 90px color-mix(in srgb,var(--teal) 22%,transparent),0 6px 18px color-mix(in srgb,var(--ink-fixed) 10%,transparent);
}
.hv-sig-inner{
  position:relative;overflow:hidden;
  background:var(--cream-fixed);
  border-radius:24px;
  padding:clamp(30px,3.4vw,44px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px color-mix(in srgb,var(--teal) 7%,transparent);
}
/* éclat sea dans le coin haut-droit de la carte */
.hv-sig-inner::before{
  content:'';position:absolute;top:-90px;right:-90px;width:240px;height:240px;
  background:radial-gradient(circle,color-mix(in srgb,var(--sea) 22%,transparent),transparent 65%);
  pointer-events:none;
}
.hv-sig-inner>*{position:relative;}
.hv-sig-eyebrow{
  display:block;
  font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:600;
  color:var(--ink-fixed);/* fond clair fixe (carte du héros) : texte fixe */
  margin-bottom:10px;
}
.hv-sig-year{
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(4.6rem,8vw,6.6rem);
  letter-spacing:-.04em;line-height:.86;
  color:var(--teal);
  font-variant-numeric:tabular-nums;
  margin-bottom:18px;
}
.hv-sig-lead{
  font-family:'Fraunces',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.4;
  color:color-mix(in srgb,var(--ink-fixed) 82%,transparent);
  text-wrap:balance;
  margin-bottom:22px;
}
.hv-sig-divider{
  height:1px;width:100%;
  background:linear-gradient(90deg,color-mix(in srgb,var(--teal) 45%,transparent),color-mix(in srgb,var(--sea) 30%,transparent) 40%,transparent 78%);
  margin-bottom:20px;
}
.hv-sig-foot{
  display:flex;align-items:flex-start;gap:12px;
  font-family:'Outfit',sans-serif;font-weight:500;font-size:.92rem;line-height:1.45;
  color:color-mix(in srgb,var(--ink-fixed) 74%,transparent);
}
.hv-sig-foot svg{width:22px;height:22px;color:var(--teal);flex-shrink:0;margin-top:1px;}

@media(max-width:1100px){
  .hv-hero-grid{grid-template-columns:1fr;gap:44px;}
  .hv-hero-aside{justify-content:flex-start;}
  .hv-sig{max-width:520px;}
}
@media(max-width:600px){
  .hv-hero{padding:28px 16px 72px;}
  .hv-sig{max-width:none;}
  .hv-cta-row{flex-direction:column;align-items:stretch;}
  .hv-btn{justify-content:space-between;}
}

/* ── DOMAINS — Asymmetrical Bento (fond ESF teinté) ── */
.hv-domains{
  background:color-mix(in srgb,var(--teal) 5%,var(--cream-fixed));
  padding:clamp(96px,12vw,160px) clamp(20px,6vw,80px);
  margin:0;
  position:relative;overflow:hidden;
}
.hv-domains::before{
  content:'';position:absolute;top:-200px;left:-180px;width:560px;height:560px;
  background:radial-gradient(circle,color-mix(in srgb,var(--teal) 22%,transparent) 0%,transparent 60%);
  pointer-events:none;
}
.hv-domains::after{
  content:'';position:absolute;bottom:-200px;right:-180px;width:560px;height:560px;
  background:radial-gradient(circle,color-mix(in srgb,var(--sea) 20%,transparent) 0%,transparent 60%);
  pointer-events:none;
}
.hv-domains>*{position:relative;z-index:1;}
.hv-domains-head{
  max-width:var(--max);margin:0 auto;
}
.hv-bento{
  max-width:var(--max);margin:0 auto;
}
/* Empilé à toutes les largeurs : en 2 colonnes, les 3 enfants (libellé, titre,
   sous-titre) se répartissaient en L à partir de 1100 px. */
.hv-domains-head{
  display:grid;grid-template-columns:1fr;gap:14px;
  margin-bottom:56px;
}
/* Fond clair FIXE : texte fixe. --teal-ink s'éclaircissait en sombre (2,5:1) ;
   --teal-ink-fixed reste à 6,4:1 dans les deux thèmes. */
.hv-domains-head .hv-eyebrow{margin-bottom:0;color:var(--teal-ink-fixed);}
.hv-h2{
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(2.2rem,4.6vw,3.75rem);
  letter-spacing:-.03em;line-height:1.05;
  color:var(--ink-fixed);margin:0;
  text-wrap:balance;
}
.hv-h2 em{font-style:italic;color:var(--teal);}
.hv-h2-sub{
  font-family:'Outfit',sans-serif;font-weight:300;
  font-size:1.05rem;line-height:1.55;
  color:color-mix(in srgb,var(--ink-fixed) 65%,transparent);
  max-width:52ch;margin:0;
}

.hv-bento{
  display:grid;grid-template-columns:repeat(12,1fr);gap:18px;
}
/* Fond `--cream-fixed` : les accents de texte prennent les variantes FIXES,
   sinon ils s'éclaircissent en thème sombre sur un fond resté clair. */
.hv-card{
  text-decoration:none;color:inherit;
  /* flex : la carte intérieure remplit la coque étirée par la grille (sinon
     bande teintée vide de ~35 px sous Budget et Vie quotidienne). */
  display:flex;
  --dc:var(--teal);--dc-ink:var(--teal-ink-fixed);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.hv-card[data-d="logement"]{--dc:var(--logement);--dc-ink:var(--teal-ink-fixed);}
.hv-card[data-d="budget"]{--dc:var(--budget);--dc-ink:var(--sea-ink-fixed);}
.hv-card[data-d="droits"]{--dc:var(--droits);--dc-ink:var(--droits-ink-fixed);}
.hv-card[data-d="insertion"]{--dc:var(--insertion);--dc-ink:var(--insertion-ink-fixed);}
.hv-card--lg{grid-column:span 7;}
.hv-card--sm{grid-column:span 5;}
.hv-card:hover{transform:translateY(-2px);box-shadow:0 24px 56px color-mix(in srgb,var(--dc) 18%,transparent);}

.hv-card-inner{
  position:relative;overflow:hidden;
  min-height:340px;
  padding:36px;
  display:flex;flex-direction:column;flex:1;
}
.hv-card--lg .hv-card-inner{min-height:380px;padding:44px 44px 40px;}

.hv-card-num{
  position:absolute;top:18px;right:28px;
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(5rem,10vw,8.5rem);
  letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--dc);opacity:.16;
  transition:opacity .5s var(--ease);
  user-select:none;
  pointer-events:none;
}
.hv-card:hover .hv-card-num{opacity:.24;}

.hv-card-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:14px;flex:1;
  margin-top:auto;
}
.hv-card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;
  background:color-mix(in srgb,var(--dc) 12%,transparent);
  color:var(--dc);
  margin-bottom:8px;
  transition:transform .5s var(--ease);
}
/* 1.75 comme les autres icônes de carte (le HTML pose 1 : trait quasi invisible). */
.hv-card-icon svg{width:22px;height:22px;stroke-width:1.75;}
.hv-card:hover .hv-card-icon{transform:scale(1.08);}
.hv-card-title{
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2rem);
  letter-spacing:-.02em;line-height:1.05;
  color:var(--ink-fixed);
  margin:0;
}
.hv-card--lg .hv-card-title{font-size:clamp(1.8rem,3vw,2.4rem);}
.hv-card-desc{
  font-family:'Outfit',sans-serif;font-weight:400;
  font-size:.98rem;line-height:1.55;
  color:color-mix(in srgb,var(--ink-fixed) 65%,transparent);
  margin:0;
  max-width:48ch;
  flex:1;
}
.hv-card-cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:8px;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:.84rem;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--dc-ink);
  align-self:flex-start;
}
.hv-card-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;
  background:color-mix(in srgb,var(--dc) 12%,transparent);
  transition:transform .45s var(--ease-spring),background .35s var(--ease);
}
.hv-card-arrow svg,.hv-btn-icon svg{stroke-width:1.75;}
.hv-card-arrow svg{width:14px;height:14px;}
.hv-card:hover .hv-card-arrow{transform:translate(4px,-2px);background:var(--dc);color:#fff;}
.hv-card:hover .hv-card-arrow svg{color:#fff;}
/* white-on-sea : la pastille flèche budget au survol = blanc sur sea brut (2.58) → --budget-deep (4.66) */
.hv-card[data-d="budget"]:hover .hv-card-arrow{background:var(--budget-deep);}

@media(max-width:1100px){
  .hv-card--lg,.hv-card--sm{grid-column:span 6;}
}
@media(max-width:700px){
  .hv-domains{padding:80px 16px;}
  .hv-bento{grid-template-columns:1fr;gap:14px;}
  .hv-card--lg,.hv-card--sm{grid-column:auto;}
  .hv-card-inner,.hv-card--lg .hv-card-inner{min-height:280px;padding:28px;}
  .hv-card-num{font-size:6rem;top:14px;right:20px;}
}

/* ── ABOUT — Editorial Split (deep teal background, brand statement) ── */
.hv-about{
  background:linear-gradient(135deg,#005A65 0%,var(--teal) 100%);
  color:white;
  padding:clamp(96px,12vw,160px) clamp(20px,6vw,80px);
  position:relative;overflow:hidden;
}
/* Halo sombre et textes opaques (même recette que les héros) : halo blanc et
   blancs à 78-85 % faisaient tomber pastille et paragraphes sous 4,5:1. */
.hv-about::before{
  content:'';position:absolute;top:-200px;right:-200px;width:680px;height:680px;
  background:radial-gradient(circle,color-mix(in srgb,var(--ink-fixed) 18%,transparent) 0%,transparent 60%);
  pointer-events:none;
}
.hv-about::after{
  content:'';position:absolute;bottom:-180px;left:-160px;width:540px;height:540px;
  background:radial-gradient(circle,color-mix(in srgb,var(--coral) 35%,transparent) 0%,transparent 60%);
  pointer-events:none;
}
.hv-about-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(48px,7vw,96px);align-items:center;
  position:relative;z-index:1;
}
.hv-about-text .hv-eyebrow{margin-bottom:14px;color:#fff;}
.hv-about-text .hv-h2{margin-bottom:28px;color:#fff;}
/* Sea éclairci (corail réservé aux actions) : 3,3:1 côté teal clair, 5,6:1 côté
   #005A65 ; grand texte, seuil 3:1. */
.hv-about-text .hv-h2 em{color:color-mix(in srgb,var(--sea) 35%,#fff);font-style:italic;}
.hv-about-p{
  font-family:'Outfit',sans-serif;font-weight:400;
  font-size:1rem;line-height:1.6;
  color:#fff;
  margin-bottom:14px;max-width:54ch;
}
.hv-about-p strong{color:#fff;font-weight:600;}
.hv-btn--small{padding:6px 6px 6px 18px;margin-top:14px;}
.hv-btn--small .hv-btn-icon{width:32px;height:32px;}
.hv-btn--small .hv-btn-icon svg{width:14px;height:14px;}

.hv-about-kpi{display:flex;flex-direction:column;gap:14px;}
.hv-about .hv-bezel{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);}
.hv-kpi{--dc:var(--teal);}
.hv-kpi[data-d="logement"]{--dc:var(--logement);}
.hv-kpi[data-d="budget"]{--dc:var(--budget);}
.hv-kpi[data-d="droits"]{--dc:var(--droits);}
.hv-kpi-inner{padding:24px 28px;}
.hv-kpi-num{
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(2.4rem,4vw,3.4rem);
  letter-spacing:-.03em;line-height:.95;
  color:var(--dc);font-variant-numeric:tabular-nums;
  margin-bottom:8px;
}
/* Chiffres des cartes « Qui sommes-nous » (cartes claires fixes) : la règle
   globale .hv-kpi-num plus bas (bandeau KPI) impose color:var(--dc-ink), non
   défini ici → retombait en blanc hérité (invisible). On rétablit l'accent du
   domaine, approfondi pour le contraste AA sur fond crème. */
.hv-about-kpi .hv-kpi-num{color:color-mix(in srgb,var(--dc) 72%,var(--ink-fixed));}
.hv-kpi-lbl{
  font-size:.9rem;line-height:1.5;
  color:color-mix(in srgb,var(--ink-fixed) 72%,transparent);
}

@media(max-width:1100px){
  .hv-about-inner{grid-template-columns:1fr;gap:48px;}
}
@media(max-width:600px){
  .hv-about{padding:80px 16px;}
}

/* Le bloc agenda/calendrier vit désormais dans css/agenda.css,
   chargé par les seules pages qui portent un calendrier. */

/* ── PARTNERS ── */
.partners{padding:40px clamp(16px,4vw,56px);border-top:2px solid color-mix(in srgb,var(--teal) 22%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--sea) 4%,transparent),transparent);}
.partners-inner{max-width:var(--max);margin:0 auto;}
/* Libellé simple (pas de capitales espacées) ; fond qui s'inverse → --teal-ink (AA 2 thèmes). */
.partners p{text-align:center;font-size:.95rem;font-weight:600;color:var(--teal-ink);margin-bottom:22px;}
.partners-logos{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;}
/* Plateaux clairs FIXES, comme le bandeau du pied de page : les logos
   institutionnels (tracés sombres) restent lisibles en thème sombre, à pleine
   opacité et en couleur (40 % et gris auparavant : fantômes, invisibles en
   sombre). Hauteur affichée inchangée : 34 px (fichiers taillés à 2× par L5). */
.partners-logos picture{
  display:inline-flex;align-items:center;justify-content:center;
  height:58px;padding:0 18px;
  background:var(--cream-fixed);
  border:1px solid color-mix(in srgb,var(--ink-fixed) 8%,transparent);
  border-radius:14px;
}
.partners-logos img{height:34px;width:auto;}

/* ── Phase 11 Wave 2 EMP-D — KPIs section ── */
.hv-kpis{padding:clamp(48px,8vw,96px) clamp(20px,5vw,80px);background:var(--cream);}
.hv-kpis-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,32px);}
.hv-kpi-card{--dc:var(--teal);--dc-ink:var(--teal-ink);padding:clamp(20px,2.5vw,32px);background:var(--sand);border:1px solid color-mix(in srgb,var(--ink-fixed) 6%,transparent);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 28px color-mix(in srgb,var(--ink-fixed) 4%,transparent);text-align:center;transition:transform .4s cubic-bezier(.32,.72,0,1),box-shadow .4s cubic-bezier(.32,.72,0,1);}
.hv-kpi-card[data-d="logement"]{--dc:var(--logement);--dc-ink:var(--teal-ink);}
.hv-kpi-card[data-d="budget"]{--dc:var(--budget);--dc-ink:var(--sea-ink);}
.hv-kpi-card[data-d="droits"]{--dc:var(--droits);--dc-ink:var(--droits-ink);}
.hv-kpi-card[data-d="insertion"]{--dc:var(--insertion);--dc-ink:var(--insertion-ink);}
.hv-kpi-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 36px color-mix(in srgb,var(--dc) 14%,transparent);}
.hv-kpi-num{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--dc-ink);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.hv-kpi-num span{font-size:.55em;font-weight:500;color:var(--dc-ink);}
.hv-kpi-label{margin-top:10px;font-family:'Outfit',sans-serif;font-size:.92rem;color:var(--muted);line-height:1.45;font-weight:500;}
@media(max-width:900px){.hv-kpis-inner{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.hv-kpis-inner{grid-template-columns:1fr;}}

/* ── Testimonial section ── */
.hv-testimonial{padding:clamp(64px,9vw,120px) clamp(20px,5vw,80px);background:var(--ink-fixed);color:var(--cream-fixed);position:relative;overflow:hidden;}
.hv-testimonial::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 80% at 30% 50%,color-mix(in srgb,var(--teal) 18%,transparent) 0%,transparent 70%);pointer-events:none;}
.hv-testimonial-inner{max-width:920px;margin:0 auto;position:relative;z-index:1;}
.hv-testimonial-eyebrow{display:inline-block;font-family:'Outfit',sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--cream-fixed) 75%,transparent);background:color-mix(in srgb,var(--teal) 24%,transparent);padding:6px 14px;border-radius:999px;margin-bottom:32px;}
.hv-testimonial-quote{margin:0;border:0;padding:0;}
.hv-testimonial-quote p{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.4;color:var(--cream-fixed);text-wrap:balance;letter-spacing:-.01em;margin:0 0 28px;}
.hv-testimonial-footer{display:flex;flex-direction:column;gap:4px;font-style:normal;}
.hv-testimonial-footer cite{font-family:'Outfit',sans-serif;font-style:normal;font-weight:600;font-size:.94rem;color:var(--cream-fixed);}
.hv-testimonial-meta{font-family:'Outfit',sans-serif;font-size:.82rem;color:color-mix(in srgb,var(--cream-fixed) 60%,transparent);}

/* ── Phase 11 Wave 2 EMP-D — Stabilité layout (P1-PERF-01) ── */
/* layout seul : paint rognait l'anneau de focus des cartes au bord de la grille. */
.hv-bento{contain:layout;}
.hv-card{contain:layout paint;}

/* ── Reveal animation respecte prefers-reduced-motion (déjà géré via .reveal global, ce bloc renforce le scope) ── */
@media (prefers-reduced-motion: reduce){
  .hv-kpis,.hv-testimonial{transition:none;}
  .hv-kpi-card{transition:none;}
  .cal-day{transition:none!important;}
  .cal-day.has-events:hover{transform:none!important;}
}

/* ── Phase 11 Wave 3 EMP-G — Hover hv-card background lighten ── */
.hv-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);}
.hv-card:hover{
  /* --cream-fixed : la carte intérieure reste claire, la coque aussi (en --cream,
     elle virait au bleu nuit en thème sombre). */
  background:color-mix(in srgb,var(--cream-fixed) 88%,var(--dc));
}

/* About conviction enrichie */
/* Blanc, et non --ink : cette citation est posée sur le dégradé teal
   sombre du bloc, où --ink tombait à 2,02:1. En blanc : 4,68 à 7,92:1
   selon l'extrémité du dégradé. */
.about-conviction{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.15rem,2vw,1.4rem);
  line-height:1.55;
  color:#fff;
  text-wrap:balance;
  letter-spacing:-.01em;
  margin:0 0 24px;
  padding-left:18px;
  border-left:3px solid var(--teal);
}

/* Réserve la place de la grille avant son remplissage par le script : sans
   cela la page saute de 300 à 450 px au chargement, sur les trois pages qui
   portent le calendrier. */
.cal-days{min-height:min(48vw,300px);}