/* Érèbe — vitrine v2 (2026-10-08). Même langage d'interface que les vitrines d'ARKHÉE et d'AGORA
   (halos radiaux, trame de points, verre, cartes en relief léger, apparitions au défilement, rail d'onglets),
   habillé de la charte « Constat » validée par Adam (design-system/identites/erebe/plaquettes-2026-10-08/
   erebe-guidelines-01-constat.html) : graphite #1C1E1D, os #ECEBE6, jaune #F2C230.
   Thème clair ET sombre choisis par le système. Aucune couleur hors des jetons ci-dessous.
   Sauvegarde v1 : site.css.avant-refonte-2026-10-08. Les pages légales réutilisent .tete / .pied / .page-simple.
   Langues (2026-10-08) : sélecteur .lang + .fait-foi ; sauvegarde site.css.avant-langues-2026-10-08. */

@font-face { font-family: "Erebe Titre"; src: url("fonts/Erebe-Titre-VF.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Erebe Interface"; src: url("fonts/Erebe-Interface-VF.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Erebe Releve"; src: url("fonts/Erebe-Releve-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Erebe Releve"; src: url("fonts/Erebe-Releve-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ═════════════════════════ JETONS — CLAIR ═════════════════════════ */
:root {
  color-scheme: light dark;
  --fond: #F1F0EC;            /* papier */
  --fond-2: #E9E8E2;          /* panneau en retrait (écrans d'exemple) */
  --surface: #FFFFFF;
  --surface-2: #F6F5F1;
  --verre: rgba(255, 255, 255, .72);
  --verre-fort: rgba(241, 240, 236, .86);
  --filet: #DCDAD2;
  --filet-doux: rgba(28, 30, 29, .10);
  --filet-fort: rgba(28, 30, 29, .26);
  --texte: #1C1E1D;           /* graphite — 14:1 sur le papier */
  --texte-2: #3D423F;         /* 9,6:1 */
  --attenue: #5B626D;         /* 5,6:1 sur le papier (le #687280 de la charte ne fait que 4,3:1) */
  --jaune: #F2C230;           /* accent — en aplat, texte graphite dessus (9,9:1) */
  --sur-jaune: #1C1E1D;
  --jaune-doux: rgba(242, 194, 48, .22);
  --jaune-lueur: rgba(242, 194, 48, .55);
  --jaune-texte: #1C1E1D;     /* le jaune n'est jamais du texte sur fond clair (1,5:1) */
  --repere: #8A6A0A;          /* filet/pastille jaune assombri pour les repères sur fond clair */
  --focus: #1C1E1D;
  --succes: #16A34A; --succes-texte: #0F6B33; --succes-fond: #E3F3E8;
  --alerte-texte: #9A3A23;
  --encours-fond: #E4E6EA;
  --nuit: #1C1E1D; --sur-nuit: #ECEBE6;
  --halo-1: rgba(242, 194, 48, .26);   /* chaud, derrière le héros et le téléphone */
  --halo-2: rgba(28, 30, 29, .07);     /* froid graphite, contrepoint */
  --trame: rgba(28, 30, 29, .16);
  --reflet: rgba(255, 255, 255, .75);
  --ombre-1: 0 1px 2px rgba(28, 30, 29, .06), 0 6px 16px -8px rgba(28, 30, 29, .14);
  --ombre-2: 0 4px 18px rgba(28, 30, 29, .09);
  --ombre-3: 0 28px 64px -18px rgba(28, 30, 29, .24);
  --bulle-vous: #1C1E1D; --sur-bulle-vous: #ECEBE6;
  --hemera-fond: #F7F6F2;
  --px-frame: #e9e4dc; --px-hi: #fbf9f5; --px-lo: #cfc8bd;
  --masque: #000;
  --os: #ECEBE6; --graphite: #1C1E1D; /* le sweat d'exemple : même étoffe dans les deux thèmes, comme une photo produit */

  --f-titre: "Erebe Titre", "Roboto Slab", Georgia, serif;
  --f-texte: "Erebe Interface", "IBM Plex Sans", system-ui, sans-serif;
  --f-chiffre: "Erebe Releve", "IBM Plex Mono", ui-monospace, monospace;
  --fs-label: .75rem; --fs-petit: .875rem; --fs-corps: 1.0625rem; --fs-chapo: clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-h3: 1.25rem; --fs-h2: clamp(1.9rem, 3.8vw, 2.9rem); --fs-h1: clamp(2.3rem, 5.6vw, 4.25rem);
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 112px;
  --r: 16px; --r-g: 26px; --r-p: 10px; --cible: 44px;
  --largeur: 1180px; --tete-h: 68px;
  --courbe: cubic-bezier(.2, .7, .3, 1); --d1: 140ms; --d2: 280ms; --d3: 620ms; --defile: 48s;
}

/* ═════════════════════════ JETONS — SOMBRE ═════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0F1110;
    --fond-2: #141716;
    --surface: #1C1E1D;
    --surface-2: #232625;
    --verre: rgba(28, 30, 29, .62);
    --verre-fort: rgba(15, 17, 16, .82);
    --filet: #2F3331;
    --filet-doux: rgba(236, 235, 230, .08);
    --filet-fort: rgba(236, 235, 230, .22);
    --texte: #ECEBE6;
    --texte-2: #C9CBC6;
    --attenue: #9CA3AF;       /* 7,3:1 sur #0F1110 */
    --jaune-doux: rgba(242, 194, 48, .14);
    --jaune-lueur: rgba(242, 194, 48, .38);
    --jaune-texte: #F2C230;   /* 11:1 sur #0F1110 */
    --repere: #F2C230;
    --focus: #F2C230;
    --succes-texte: #4ADE80; --succes-fond: #12301E;
    --alerte-texte: #F08A6F;
    --encours-fond: #2C302E;
    --halo-1: rgba(242, 194, 48, .12);
    --halo-2: rgba(236, 235, 230, .05);
    --trame: rgba(236, 235, 230, .12);
    --reflet: rgba(255, 255, 255, .06);
    --ombre-1: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -8px rgba(0, 0, 0, .5);
    --ombre-2: 0 4px 18px rgba(0, 0, 0, .35);
    --ombre-3: 0 28px 64px -16px rgba(0, 0, 0, .7);
    --bulle-vous: #F2C230; --sur-bulle-vous: #1C1E1D;
    --px-frame: #2a2b2e; --px-hi: #6a6c70; --px-lo: #121214;
  }
}

/* ═════════════════════════ BASE ═════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--tete-h) + 16px); }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 var(--fs-corps)/1.6 var(--f-texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 700; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
:where(a, button, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saut { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--jaune); color: var(--sur-jaune); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.saut:focus { top: 12px; }
.cadre { width: min(var(--largeur), 100% - 32px); margin-inline: auto; }
.etroit { width: min(720px, 100% - 32px); }
.centre { text-align: center; }
.centre .intro { margin-inline: auto; }
.mono { font-family: var(--f-chiffre); }
.clair-seul { display: block; } .sombre-seul { display: none; }
@media (prefers-color-scheme: dark) { .clair-seul { display: none; } .sombre-seul { display: block; } }

/* ═════════════════════════ TYPO ═════════════════════════ */
.label { display: inline-flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-4); padding: 5px 14px;
  font: 500 var(--fs-label)/1.2 var(--f-chiffre); letter-spacing: .2em; text-transform: uppercase;
  color: var(--jaune-texte); background: var(--jaune-doux); border: 1px solid var(--jaune-doux); border-radius: 999px; }
.label::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--jaune); box-shadow: 0 0 0 1px var(--repere); }
h2 { font-size: var(--fs-h2); line-height: 1.1; margin-bottom: var(--e-4); text-wrap: balance; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
.intro { max-width: 60ch; color: var(--texte-2); text-wrap: pretty; }
.baseline { font: 500 11px/1 var(--f-texte); letter-spacing: .22em; text-transform: uppercase; color: var(--attenue); margin: var(--e-3) 0; }
.etiquette.exemple { justify-self: start; align-self: flex-start; display: inline-block; margin: 0; font: 500 10.5px/1 var(--f-chiffre); letter-spacing: .14em; text-transform: uppercase;
  color: var(--attenue); border: 1px dashed var(--filet-fort); border-radius: 999px; padding: 5px 10px; }

/* ═════════════════════════ BOUTONS ═════════════════════════ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--cible); padding: 0 var(--e-5);
  border-radius: 999px; border: 1px solid transparent; font: 600 .95rem/1 var(--f-texte); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: box-shadow var(--d2) var(--courbe), border-color var(--d1), background-color var(--d1), color var(--d1), transform var(--d1); }
.btn:active { transform: translateY(1px); }
.btn-petit { min-height: 38px; padding: 0 var(--e-4); font-size: var(--fs-petit); }
.btn-plein { background: var(--jaune); color: var(--sur-jaune); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -6px var(--jaune-lueur); }
.btn-plein:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -6px var(--jaune-lueur); }
.btn-plein span[aria-hidden] { transition: transform var(--d2) var(--courbe); }
.btn-plein:hover span[aria-hidden] { transform: translateX(3px); }
.btn-verre { background: var(--verre); color: var(--texte); border-color: var(--filet-fort); }
.btn-verre:hover { border-color: var(--texte); }
.btn[disabled] { opacity: .6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
/* Compatibilité pages légales / page serveur (_page) */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible); padding: 0 var(--e-4); border-radius: 999px;
  font: 600 var(--fs-petit)/1 var(--f-texte); text-decoration: none; cursor: pointer; border: 1px solid var(--filet-fort); background: var(--verre); color: var(--texte); }
.bouton.plein { background: var(--jaune); color: var(--sur-jaune); border-color: transparent; }

/* ═════════════════════════ BANDEAU + EN-TÊTE ═════════════════════════ */
.annonce { background: var(--nuit); color: var(--sur-nuit); text-align: center; font-size: var(--fs-petit); position: relative; }
.annonce::after { content: ""; position: absolute; inset: auto 20% 0; height: 1px; background: linear-gradient(90deg, transparent, var(--jaune), transparent); opacity: .6; }
.annonce a { display: block; padding: 9px 16px; text-decoration: none; }
.annonce b { color: var(--jaune); font-weight: 600; }
.annonce-go { display: inline-block; margin-left: 4px; transition: transform var(--d2) var(--courbe); }
.annonce a:hover .annonce-go { transform: translateX(4px); }

.tete { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent;
  transition: background-color var(--d2), border-color var(--d2); }
.tete.colle, .page-simple .tete { background: var(--verre-fort); border-bottom-color: var(--filet-doux);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.tete-in { display: flex; align-items: center; gap: var(--e-5); height: var(--tete-h); }
.marque { flex: none; display: block; }
.marque img { height: 38px; width: auto; }
.nav { display: flex; gap: var(--e-1); margin-inline: auto; }
.nav a { color: var(--texte-2); text-decoration: none; font-size: var(--fs-petit); padding: 8px 14px; border-radius: 999px; transition: background-color var(--d1), color var(--d1); }
.nav a:hover, .nav a[aria-current="true"] { color: var(--texte); background: var(--jaune-doux); }
.tete-cta { display: flex; align-items: center; gap: var(--e-2); flex: none; }
.burger { display: none; width: var(--cible); height: var(--cible); border-radius: 50%; border: 1px solid var(--filet-fort); background: var(--verre); color: var(--texte); cursor: pointer; place-items: center; }
.burger i, .burger i::before, .burger i::after { display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; position: relative; transition: transform var(--d2) var(--courbe), background-color var(--d1); }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; }
.burger i::before { top: -5px; } .burger i::after { top: 5px; }
.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }
/* Se connecter (10/10/2026) : bouton dans l en-tete sur ecran large, ligne du menu ☰ sur mobile — comme ARKHÉE. */
.nav .connexion-menu { display: none; }
@media (max-width: 900px) {
  .tete-cta .connexion { display: none; }
  .tete.ouvert .nav .connexion-menu { display: block; color: var(--texte); font-weight: 600; border-top: 1px solid var(--filet-doux); border-radius: 0; margin-top: var(--e-2); }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .tete-cta { margin-left: auto; }
  .burger:not([hidden]) { display: grid; }
  .tete.ouvert { background: var(--fond); }
  .tete.ouvert .nav { display: grid; position: absolute; left: 0; right: 0; top: var(--tete-h); margin: 0; padding: var(--e-3) 16px var(--e-5);
    background: var(--fond); box-shadow: var(--ombre-3); border-bottom: 1px solid var(--filet-doux); gap: 2px; }
  .tete.ouvert .nav a { font-size: 1.05rem; padding: 14px 12px; border-radius: 12px; }
}

/* Sélecteur de langue (2026-10-08) : le composant de la vitrine d'ARKHÉE (<details> natif, marche sans JS),
   habillé des jetons Constat. Deux exemplaires sur l'accueil : dans l'en-tête (écran large) et dans le menu ☰. */
.lang { position: relative; flex: none; }
.lang > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--cible); padding: 0 12px;
  border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--verre); color: var(--texte-2); cursor: pointer;
  font: 500 var(--fs-petit)/1 var(--f-texte); letter-spacing: .06em; user-select: none; transition: border-color var(--d1), color var(--d1); }
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover, .lang[open] > summary { color: var(--texte); border-color: var(--texte); }
.lang-flag { font-size: 1.15em; line-height: 1; }
.lang > summary i { width: 7px; height: 7px; margin-inline-start: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--d1) var(--courbe); }
.lang[open] > summary i { transform: translateY(1px) rotate(-135deg); }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 184px; padding: 6px; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--filet); border-radius: 14px; box-shadow: var(--ombre-3); }
.lang-menu a { display: flex; align-items: center; gap: 10px; min-height: var(--cible); padding: 0 12px; border-radius: 10px;
  color: var(--texte); text-decoration: none; font-size: var(--fs-petit); }
.lang-menu a:hover, .lang-menu a:focus-visible { background: var(--surface-2); outline: none; }
.lang-menu a:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.lang-menu a[aria-current="true"] { background: var(--jaune-doux); font-weight: 600; }
.lang-menu .lang-code { width: 22px; color: var(--attenue); font: 500 .75rem/1 var(--f-chiffre); letter-spacing: .08em; }
.lang-menu a[aria-current="true"] .lang-code { color: var(--texte); }
.nav .lang { display: none; }
.nav .lang-menu a { padding: 0 12px; font-size: var(--fs-petit); border-radius: 10px; }
@media (max-width: 900px) {
  .tete-cta .lang.dans-tete { display: none; }
  .tete.ouvert .nav .lang { display: block; margin-top: var(--e-2); }
  .tete.ouvert .nav .lang > summary { min-height: 48px; }
  .nav .lang-menu { position: static; box-shadow: none; margin-top: 8px; min-width: 0; }
}
/* Pages légales traduites : seule la version française fait foi */
.fait-foi { margin: 0 0 var(--e-4); padding: 10px 14px; border-radius: var(--r-p); border: 1px dashed var(--filet-fort); color: var(--texte-2); font-size: var(--fs-petit); max-width: 68ch; }
.page-simple .tete-cta { gap: var(--e-2); }

/* ═════════════════════════ HÉROS ═════════════════════════ */
.heros { position: relative; padding: clamp(48px, 8vw, 96px) 0 0; isolation: isolate; }
.heros-halo { position: absolute; inset: -120px 0 auto; height: 1100px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 42% at 50% 2%, var(--halo-1), transparent 70%),
    radial-gradient(32% 30% at 88% 30%, var(--halo-2), transparent 70%),
    radial-gradient(30% 30% at 10% 40%, var(--halo-2), transparent 70%); }
.heros-halo::after { content: ""; position: absolute; inset: 0; opacity: .6;
  background-image: radial-gradient(var(--trame) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(58% 42% at 50% 22%, var(--masque), transparent 75%);
          mask-image: radial-gradient(58% 42% at 50% 22%, var(--masque), transparent 75%); }
.heros-in { text-align: center; display: grid; justify-items: center; }
.confiance { display: inline-flex; align-items: center; gap: var(--e-3); margin: 0 0 var(--e-6); padding: 6px 16px 6px 6px; border-radius: 999px;
  border: 1px solid var(--filet-doux); background: var(--verre); color: var(--texte-2); font-size: var(--fs-petit); box-shadow: var(--ombre-1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.confiance b { color: var(--texte); font-weight: 600; }
.confiance-ico { display: inline-flex; }
.confiance-ico i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--fond); box-shadow: 0 0 0 1px var(--filet-doux); }
.confiance-ico i + i { margin-left: -8px; }
.confiance-ico .icone { width: 16px; height: 16px; }
.heros h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.022em; margin-bottom: var(--e-5); text-wrap: balance; max-width: 28ch; }
/* 28ch (était 22ch) : le titre est coupé à la main (<br>) ; l'espagnol et l'allemand, plus longs, tenaient sur 3 lignes. */
.heros h1 em { font-style: normal; background: linear-gradient(transparent 64%, var(--jaune) 64% 90%, transparent 90%); padding: 0 .04em; }
.h1-tuile { display: inline-grid; place-items: center; vertical-align: -0.14em; width: 1.08em; height: 1.08em; margin-right: .06em;
  border-radius: .26em; background: var(--surface); border: 1px solid var(--filet); box-shadow: var(--ombre-2), inset 0 1px 0 var(--reflet); }
.h1-tuile img { width: 50%; height: auto; }
.chapo { max-width: 58ch; font-size: var(--fs-chapo); color: var(--texte-2); text-wrap: pretty; }
.note { margin-top: var(--e-4); font-size: var(--fs-petit); color: var(--attenue); }

/* Le champ de demande (verre, liseré dégradé, curseur qui clignote) */
.demande { position: relative; width: min(720px, 100%); margin-top: var(--e-7); padding: var(--e-4); text-align: left; border-radius: 22px;
  background: var(--verre); border: 1px solid var(--filet); box-shadow: var(--ombre-3), inset 0 1px 0 var(--reflet);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.demande::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--jaune-lueur), transparent 35%, transparent 65%, var(--filet-fort));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.demande-champ { display: flex; gap: var(--e-3); align-items: flex-start; min-height: 64px; padding: var(--e-2) var(--e-2) var(--e-4); color: var(--texte); text-decoration: none; font-size: 1.05rem; line-height: 1.5; }
.demande-ico { flex: none; margin-top: 1px; }
.demande-ico .icone { width: 22px; height: 22px; }
/* Avatar d'Hémera dans le champ (2026-10-09) : même pastille que ses bulles (.av), centrée sur la 1re ligne de texte.
   Fond --hemera-fond dans les deux thèmes : le logo tricolore (os, jaune, graphite) y reste lisible. */
.demande-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -4px; padding: 5px; border-radius: 50%;
  background: var(--hemera-fond); border: 1px solid var(--filet); box-shadow: var(--ombre-1); }
.demande-av img { width: 100%; height: 100%; object-fit: contain; }
.demande-texte::after { content: ""; display: inline-block; width: 2px; height: 1.1em; vertical-align: -.18em; margin-left: 2px; background: var(--texte); animation: curseur 1s steps(1) infinite; }
@keyframes curseur { 50% { opacity: 0; } }
.demande-barre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.demande-actions { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.puce { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--fs-petit); color: var(--texte-2); border: 1px solid var(--filet-fort); border-radius: 999px; padding: 6px 12px; }
.point { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--succes); box-shadow: 0 0 0 3px color-mix(in srgb, var(--succes) 22%, transparent); }

/* Fenêtre produit (schéma) */
.fenetre { margin: var(--e-8) auto 0; max-width: 980px; border-radius: var(--r-g); border: 1px solid var(--filet); overflow: hidden;
  background: linear-gradient(180deg, var(--surface), var(--fond)); box-shadow: var(--ombre-3); }
.fenetre-barre { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--filet-doux); }
.fenetre-barre i { width: 10px; height: 10px; border-radius: 50%; background: var(--filet-fort); }
.fenetre-barre i:first-child { background: var(--jaune); }
.fenetre-barre span { margin-left: var(--e-3); font: 500 var(--fs-label) var(--f-chiffre); letter-spacing: .12em; text-transform: uppercase; color: var(--attenue); }
.fenetre-corps { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--e-5); padding: clamp(16px, 4vw, 40px);
  background: radial-gradient(70% 90% at 25% 0%, var(--jaune-doux), transparent 70%); }
.fenetre > figcaption { font-size: var(--fs-label); color: var(--attenue); text-align: center; padding: 0 16px 16px; }
.plaque { position: relative; min-width: 0; display: grid; gap: var(--e-4); padding: var(--e-5); border-radius: var(--r); border: 1px solid var(--filet); background: var(--surface); box-shadow: var(--ombre-1); }
.plaque::before { content: ""; position: absolute; inset: -1px var(--e-6) auto; height: 1px; background: linear-gradient(90deg, transparent, var(--jaune), transparent); }
.plaque-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); }
.plaque-tete b { font: 700 1.1rem var(--f-titre); }
.compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-3); }
.compare figure { margin: 0; display: grid; gap: 6px; justify-items: center; min-width: 0; }
.compare figcaption { font-size: var(--fs-label); color: var(--attenue); letter-spacing: .06em; }
.vignette { --sweat: var(--os); display: grid; place-items: center; width: min(150px, 100%); aspect-ratio: 1; border-radius: 12px; color: var(--graphite);
  background: radial-gradient(80% 80% at 50% 30%, var(--surface), var(--fond-2)); border: 1px solid var(--filet-doux); }
.vignette svg { width: 72%; }
.vignette.copie { transform: rotate(-2deg); background: radial-gradient(80% 80% at 40% 30%, var(--surface-2), var(--encours-fond)); }
.vignette.copie svg { transform: rotate(4deg) scale(.94); }
.vignette.photo { overflow: hidden; background: none; padding: 0; }
.vignette.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette.copie.photo img { transform: none; }
.compare-lien { display: grid; justify-items: center; gap: 6px; }
.compare-lien i { width: 1px; height: 18px; background: var(--filet-fort); }
.compare-lien b { font: 600 var(--fs-label)/1.2 var(--f-texte); padding: 6px 10px; border-radius: 999px; background: var(--jaune); color: var(--sur-jaune); text-align: center; white-space: nowrap; }
.lignes { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--filet-doux); }
.lignes div { display: flex; justify-content: space-between; gap: var(--e-3); padding: 9px 0; border-bottom: 1px solid var(--filet-doux); font-size: var(--fs-petit); }
.lignes dt { color: var(--attenue); } .lignes dd { margin: 0; text-align: right; }
.plaque-actions { display: flex; justify-content: flex-end; gap: var(--e-2); }
.plaque-actions .btn { min-height: 36px; padding: 0 var(--e-4); font-size: var(--fs-petit); pointer-events: none; }
.fenetre-cote { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); align-content: start; }
.fenetre-cote li { display: grid; gap: 6px; padding: var(--e-4); border-radius: var(--r); border: 1px solid var(--filet-doux); background: var(--surface); }
.fenetre-cote small { font: 500 var(--fs-label) var(--f-chiffre); letter-spacing: .12em; text-transform: uppercase; color: var(--attenue); }
.hash { font-size: 12px; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jauge { display: block; height: 8px; border-radius: 4px; background: var(--encours-fond); overflow: hidden; }
.jauge i { display: block; height: 100%; width: 38%; border-radius: inherit; background: var(--jaune); }
.cote-hemera { grid-template-columns: 34px 1fr; align-items: center; font-size: var(--fs-petit); line-height: 1.4; }
.cote-hemera img, .av { width: 34px; height: 34px; padding: 5px; border-radius: 50%; background: var(--hemera-fond); border: 1px solid var(--filet); object-fit: contain; }
.cote-hemera b { display: block; font-size: var(--fs-label); }

/* Bandeau défilant : là où Érèbe regarde */
.surfaces { padding: var(--e-8) 0 0; }
.surfaces-titre { text-align: center; margin-bottom: var(--e-5); font: 500 var(--fs-label) var(--f-chiffre); letter-spacing: .2em; text-transform: uppercase; color: var(--attenue); }
.defile-vue { overflow: hidden; padding-block: .15em; margin-block: -.15em;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--masque) 12%, var(--masque) 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--masque) 12%, var(--masque) 88%, transparent); }
.defile-piste { display: flex; width: max-content; }
.defile-moitie { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.defile-moitie li { font: 700 1.35rem/1.35 var(--f-titre); color: var(--texte-2); white-space: nowrap; margin-right: var(--e-7); }
/* 2026-10-09 : interligne 1.35 + marge de coupe : avec 1, la boîte rognait les jambages (g, p, y, ç) dans .defile-vue { overflow: hidden }. */
.defile-moitie .sep { width: 7px; height: 7px; border-radius: 1px; background: var(--jaune); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .defile-piste { animation: defile var(--defile) linear infinite; }
  .defile:hover .defile-piste { animation-play-state: paused; }
}
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .defile-vue { -webkit-mask-image: none; mask-image: none; }
  .defile-piste { width: 100%; justify-content: center; }
  .defile-moitie { flex-wrap: wrap; justify-content: center; gap: var(--e-4) 0; padding-inline: 4vw; }
  .defile-moitie[aria-hidden="true"] { display: none; }
}

/* ═════════════════════════ SECTIONS ═════════════════════════ */
.section { position: relative; padding: var(--e-9) 0; }
.section.serre { padding-top: 0; }

/* ═════════════════════════ EXEMPLES : onglets + rail ═════════════════════════ */
.onglets { display: flex; flex-wrap: nowrap; justify-content: safe center; gap: var(--e-2); margin: var(--e-7) auto var(--e-5); overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.onglets::-webkit-scrollbar { display: none; }
.onglets[hidden] { display: none; }
.onglets button { flex: none; display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); padding: 0 var(--e-4) 0 6px; border-radius: 999px;
  border: 1px solid var(--filet-doux); background: var(--verre); color: var(--texte-2); font: 500 var(--fs-petit)/1 var(--f-texte); cursor: pointer; transition: all var(--d2) var(--courbe); }
.onglets button i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); transition: inherit; }
.onglets button .icone { width: 18px; height: 18px; }
.onglets button:hover { color: var(--texte); border-color: var(--filet-fort); }
.onglets button[aria-selected="true"] { color: var(--texte); border-color: var(--repere); background: var(--jaune-doux); box-shadow: 0 2px 14px -4px var(--jaune-lueur); }
.onglets button[aria-selected="true"] i { background: var(--jaune); }
.onglets button[aria-selected="true"] .icone { color: var(--sur-jaune); }
.onglets button[aria-selected="true"] .icone .j { color: var(--surface); }

/* Familles d'exemples (2026-10-08) : bascule à trois segments au-dessus des onglets.
   Segment actif en graphite plein (hiérarchie forte), onglets en jaune doux (hiérarchie seconde). */
.familles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: min(560px, 100%); margin: var(--e-7) auto 0; padding: 4px;
  border-radius: 999px; border: 1px solid var(--filet-doux); background: var(--verre); }
.familles[hidden] { display: none; }
.familles button { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--cible); padding: 4px var(--e-3); border: 0; border-radius: 999px;
  background: transparent; color: var(--texte-2); font: 600 var(--fs-petit)/1.15 var(--f-texte); text-align: center; cursor: pointer; transition: background var(--d2) var(--courbe), color var(--d2) var(--courbe); }
.familles button:hover { color: var(--texte); background: var(--surface-2); }
.familles button[aria-pressed="true"] { background: var(--texte); color: var(--fond); }
.familles .nb { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; font: 500 11px/1 var(--f-chiffre);
  background: var(--surface-2); color: var(--attenue); }
.familles button[aria-pressed="true"] .nb { background: var(--jaune); color: var(--sur-jaune); }
.familles + .onglets { margin-top: var(--e-4); }
.onglets button[hidden], .scen[hidden] { display: none; }

/* Largeur des cartes en unités de conteneur (la section) : la marge latérale vaut exactement la moitié
   du vide autour d'une carte, si bien que la première ET la dernière carte peuvent être centrées. */
#exemples { container-type: inline-size; }
.rail { --carte: min(1000px, calc(100cqw - 64px));
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--carte); gap: var(--e-5); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; padding: var(--e-4) calc((100cqw - var(--carte)) / 2) var(--e-6); margin-top: var(--e-6); }
.js .rail { margin-top: 0; }
.rail::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .rail { scroll-behavior: smooth; } }
.scen { scroll-snap-align: center; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-radius: var(--r-g); border: 1px solid var(--filet);
  background: var(--surface); box-shadow: var(--ombre-3); overflow: hidden;
  transition: opacity var(--d3) var(--courbe), transform var(--d3) var(--courbe), filter var(--d3) var(--courbe); }
.js .scen:not(.courant) { opacity: .4; transform: scale(.96); filter: saturate(.5); cursor: pointer; }
.js .scen:not(.courant) * { pointer-events: none; }
.scen-ecran { display: grid; gap: var(--e-4); align-content: center; padding: clamp(20px, 3.5vw, 36px); border-right: 1px solid var(--filet-doux);
  background: radial-gradient(90% 70% at 0% 100%, var(--jaune-doux), transparent 70%), var(--fond-2); }
.scen-info { display: grid; gap: var(--e-3); align-content: center; padding: clamp(20px, 3.5vw, 40px); }
.scen-k { font: 500 var(--fs-label) var(--f-chiffre); letter-spacing: .18em; text-transform: uppercase; color: var(--attenue); }
.scen-info h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.18; text-wrap: balance; }
.scen-info > p:not(.scen-k) { color: var(--texte-2); font-size: .97rem; }

/* Marque protégée des exemples : Érèbe elle-même (logo d'origine sur pastille os, lisible dans les deux thèmes) */
.marque-protegee { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--fs-label); color: var(--attenue); }
.marque-protegee img { width: 22px; height: 22px; padding: 3px; flex: none; border-radius: 6px; background: var(--os); object-fit: contain; }
.marque-protegee b { color: var(--texte); font-weight: 600; }
.centre-f { margin-top: var(--e-4); justify-content: center; text-align: left; }

/* L'objet de l'exemple (annonce, compte, résultat, dossier) et son tampon « après » */
.objet { position: relative; display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3); border-radius: 14px; background: var(--surface); border: 1px solid var(--filet);
  box-shadow: var(--ombre-1); transition: filter var(--d3) var(--courbe), opacity var(--d3) var(--courbe); }
.objet b { display: block; font-size: .95rem; line-height: 1.3; }
.objet small { display: block; color: var(--attenue); font-size: 12.5px; line-height: 1.4; }
.objet .vignette { width: 64px; flex: none; border-radius: 10px; }
.avatar { --sweat: var(--os); flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--graphite);
  background: var(--fond-2); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--jaune); }
.avatar svg { width: 70%; }
.avatar.photo { overflow: hidden; background: none; }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.35); display: block; }
.resultat-objet { display: block; padding: var(--e-4); }
.resultat-objet b { font-family: var(--f-titre); font-size: 1.05rem; margin: 2px 0; }
.flou { filter: blur(4px); user-select: none; }
.dossier-objet { display: block; padding: var(--e-4); }
.dossier-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); padding-bottom: var(--e-2); border-bottom: 1px solid var(--texte); }
.dossier-tete b { font-family: var(--f-titre); }
.pieces { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.pieces li { display: flex; justify-content: space-between; gap: var(--e-3); padding: 7px 0; border-bottom: 1px dashed var(--filet); }
.pieces span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pieces code { font-family: var(--f-chiffre); color: var(--attenue); white-space: nowrap; }
.tampon { position: absolute; right: 14px; top: -11px; transform: rotate(-6deg); padding: 4px 10px; border: 2px solid var(--succes-texte); border-radius: 6px;
  font: 700 12px/1 var(--f-chiffre); letter-spacing: .14em; text-transform: uppercase; color: var(--succes-texte); background: var(--succes-fond); }
/* état « après » (par défaut, sans script ou mouvement réduit) */
.annonce-objet > :not(.tampon), .profil-objet > :not(.tampon), .resultat-objet > :not(.tampon), .prive-objet > :not(.tampon) { opacity: .55; filter: grayscale(1); }
/* .reste : l'objet reste en ligne (dossier préparé, pas de retrait demandé) — jamais grisé */
.objet.reste > :not(.tampon) { opacity: 1; filter: none; }
.tuile-objet { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--filet-doux); color: var(--texte-2); }
.tuile-objet .icone { width: 26px; height: 26px; }
.tuile-objet .icone .j { color: var(--repere); }
.pieces code.manque { color: var(--alerte-texte); }

/* La frise du scénario */
.scene { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.scene li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--e-3); align-items: start; padding: 7px 0 7px 0; font-size: .9rem; line-height: 1.4; }
.scene li::before { content: ""; position: absolute; left: 55px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--filet-fort); }
.scene li::after { content: ""; position: absolute; left: 59px; top: 24px; bottom: -8px; width: 1px; background: var(--filet-fort); }
.scene li:last-child::after { display: none; }
.scene li > span { padding-left: 22px; }
.scene time { font: 500 12px/1.6 var(--f-chiffre); color: var(--attenue); white-space: nowrap; }
.scene li.vous::before { background: var(--jaune); box-shadow: 0 0 0 2px var(--repere); }
.scene li.vous > span { font-weight: 600; }
.scene li.fin::before { background: var(--succes); box-shadow: 0 0 0 2px var(--succes-fond); }
.scene li.fin > span { font-weight: 600; color: var(--succes-texte); }
.scene li.fin svg { display: inline; vertical-align: -1px; }
.scene .nw { white-space: nowrap; }
.scene .jauge { display: inline-block; vertical-align: middle; width: 90px; margin-left: 6px; }
.scene .jauge i { width: 100%; }

/* Lecture animée (site.js pose .joue sur la carte courante). Sans script / mouvement réduit : état final. */
@media (prefers-reduced-motion: no-preference) {
  .js .scene li { opacity: 0; transform: translateX(-8px); transition: opacity 360ms var(--courbe), transform 360ms var(--courbe); }
  .js .joue .scene li { opacity: 1; transform: none; }
  .js .joue .scene li:nth-child(2) { transition-delay: 500ms; } .js .joue .scene li:nth-child(3) { transition-delay: 1100ms; }
  .js .joue .scene li:nth-child(4) { transition-delay: 1700ms; } .js .joue .scene li:nth-child(5) { transition-delay: 2300ms; }
  .js .scene .jauge i { transform: scaleX(0); transform-origin: left; transition: transform 1200ms var(--courbe) 2000ms; }
  .js .joue .scene .jauge i { transform: none; }
  .js .scen .objet > :not(.tampon) { opacity: 1; filter: none; transition: opacity 500ms var(--courbe), filter 500ms var(--courbe); }
  .js .scen.joue .objet > :not(.tampon) { opacity: .55; filter: grayscale(1); transition-delay: 2900ms; }
  .js .scen.joue .objet.reste > :not(.tampon) { opacity: 1; filter: none; }
  .js .scen .tampon { opacity: 0; transform: rotate(-6deg) scale(1.6); transition: opacity 260ms var(--courbe), transform 360ms cubic-bezier(.3, 1.5, .5, 1); }
  .js .scen.joue .tampon { opacity: 1; transform: rotate(-6deg); transition-delay: 3000ms; }
}
.coches { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.coches li { display: grid; grid-template-columns: 18px 1fr; gap: var(--e-3); align-items: start; font-size: .93rem; }
.scen-info .coches li { padding: 9px 14px; border-radius: 999px; background: var(--fond); border: 1px solid var(--filet-doux); }
.coche { position: relative; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--jaune); flex: none; }
.coche::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--sur-jaune); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ═════════════════════════ MANDAT : téléphone + étapes ═════════════════════════ */
.mandat::before { content: ""; position: absolute; inset: 6% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 48% at 24% 50%, var(--halo-1), transparent 70%); }
.mandat { isolation: isolate; }
.mandat-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
/* Pixel 10 Pro XL — 76,6 × 162,8 mm. Obsidian en sombre, Porcelain en clair (repris d'ARKHÉE). */
.pixel { --px-w: min(330px, 84vw); position: relative; justify-self: center; margin: 0; width: var(--px-w); aspect-ratio: 76.6 / 162.8;
  border-radius: calc(var(--px-w) * .15); padding: calc(var(--px-w) * .014);
  background: linear-gradient(90deg, var(--px-hi), var(--px-frame) 8%, var(--px-lo) 50%, var(--px-frame) 92%, var(--px-hi));
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.18), 0 40px 80px -20px rgba(0,0,0,.45), 0 18px 36px -18px rgba(0,0,0,.35); }
.px-btn { position: absolute; right: -3px; width: 4px; border-radius: 2px; background: linear-gradient(270deg, var(--px-lo), var(--px-hi)); }
.px-power { top: 22%; height: 7%; } .px-vol { top: 32%; height: 14%; }
.px-screen { position: relative; height: 100%; border-radius: calc(var(--px-w) * .136); overflow: hidden; display: flex; flex-direction: column;
  border: calc(var(--px-w) * .016) solid #040404; color: var(--texte); isolation: isolate;
  background: radial-gradient(90% 45% at 50% 100%, var(--jaune-doux), transparent 70%), var(--fond); }
.px-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: calc(var(--px-w) * .12); background: linear-gradient(115deg, rgba(255,255,255,.06), transparent 30%); }
.px-cam { position: absolute; top: 11px; left: 50%; width: calc(var(--px-w) * .042); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3140 0 18%, #050505 40%); box-shadow: 0 0 0 1.5px #000; z-index: 2; }
.px-status { display: flex; justify-content: space-between; align-items: center; padding: 0 calc(var(--px-w) * .05) 0 calc(var(--px-w) * .055); height: calc(var(--px-w) * .105); }
.px-status svg { display: block; height: calc(var(--px-w) * .04); width: auto; }
.px-gesture { align-self: center; width: 30%; height: 4px; border-radius: 2px; margin: 12px 0 9px; background: var(--texte); opacity: .8; }
.ip-tete { display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px; border-bottom: 1px solid var(--filet-doux);
  background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ip-tete img { height: 26px; width: auto; }
.ip-tete b { display: block; font: 700 .95rem/1.2 var(--f-titre); }
.ip-tete small { display: inline-flex; align-items: center; gap: 6px; color: var(--attenue); font-size: 11px; }
.ip-fil { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 12px 12px 8px; overflow: hidden; }
.ip-fil .etiquette { align-self: center; }
.bulle { position: relative; max-width: 86%; padding: 9px 12px; border-radius: 18px; font-size: .84rem; line-height: 1.4; border: 1px solid var(--filet-doux); }
.bulle.elle { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 6px; box-shadow: var(--ombre-1); }
.bulle.vous { align-self: flex-end; background: var(--bulle-vous); color: var(--sur-bulle-vous); border: 0; border-bottom-right-radius: 6px; font-weight: 600; }
.ip-fil .bulle.elle { margin-left: 30px; max-width: calc(86% - 30px); }
.ip-fil .bulle .av { position: absolute; left: -32px; bottom: 0; width: 26px; height: 26px; padding: 4px; }
.bulle.carte { align-self: flex-start; width: calc(86% - 30px); margin-left: 30px; display: grid; gap: 5px; background: var(--surface); box-shadow: var(--ombre-1); }
.bulle.carte b { font-family: var(--f-titre); }
.bulle.carte small { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--attenue); margin-top: 3px; }
.barre { display: block; height: 7px; border-radius: 4px; background: var(--encours-fond); }
.barre.l90 { width: 90%; } .barre.l55 { width: 55%; }
.mini-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 5px; }
.mini-actions span { font-size: .7rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--filet-fort); }
.mini-actions .on { background: var(--jaune); color: var(--sur-jaune); border-color: transparent; }
.pastille { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font: 600 11px/1.3 var(--f-texte); white-space: nowrap; }
.pastille.encours { background: var(--jaune-doux); color: var(--texte); }
.ip-saisie { display: flex; align-items: center; justify-content: space-between; margin: 4px 12px 0; padding: 6px 6px 6px 14px; border-radius: 999px;
  border: 1px solid var(--filet-fort); background: var(--surface); font-size: .8rem; color: var(--attenue); }
.ip-saisie i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: var(--jaune); color: var(--sur-jaune); }
.etapes { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.etapes li { display: grid; grid-template-columns: 44px 1fr; gap: var(--e-4); align-items: start; padding: var(--e-4); border-radius: var(--r);
  border: 1px solid var(--filet-doux); background: var(--verre); box-shadow: var(--ombre-1); transition: border-color var(--d2), transform var(--d2) var(--courbe); }
.etapes li:hover { border-color: var(--filet-fort); transform: translateY(-2px); }
.etapes b { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-family: var(--f-titre); background: var(--jaune-doux); color: var(--jaune-texte); letter-spacing: .06em; }
.etapes h3 { font-size: 1.08rem; margin-bottom: 2px; }
.etapes p { color: var(--texte-2); font-size: .93rem; }
.garde { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.garde li { font-size: .9rem; color: var(--texte-2); padding-left: var(--e-4); border-left: 2px solid var(--jaune); }
.garde b { display: block; color: var(--texte); font-size: .95rem; }
/* Bulles qui se jouent une à une (site.js pose .joue) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-chat] > * { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--courbe), transform 420ms var(--courbe); }
  .js [data-chat].joue > * { opacity: 1; transform: none; }
  .js [data-chat].joue > :nth-child(2) { transition-delay: 250ms; } .js [data-chat].joue > :nth-child(3) { transition-delay: 1000ms; }
  .js [data-chat].joue > :nth-child(4) { transition-delay: 1900ms; } .js [data-chat].joue > :nth-child(5) { transition-delay: 2700ms; }
}

/* ═════════════════════════ PUBLICS ═════════════════════════ */
.publics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); margin-top: var(--e-6); }
.public { position: relative; overflow: hidden; display: grid; gap: var(--e-3); align-content: start; padding: var(--e-6); border-radius: var(--r-g); border: 1px solid var(--filet);
  background: radial-gradient(80% 90% at 0% 0%, var(--jaune-doux), transparent 60%), var(--surface); box-shadow: var(--ombre-2);
  transition: transform var(--d2) var(--courbe), box-shadow var(--d2) var(--courbe); }
.public.personnes { background: radial-gradient(80% 90% at 100% 0%, var(--halo-2), transparent 60%), var(--surface); }
.public:hover { transform: translateY(-3px); box-shadow: var(--ombre-3); }
.public-tuile { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--filet); box-shadow: var(--ombre-1), inset 0 1px 0 var(--reflet); margin-bottom: var(--e-2); }
.public-tuile .icone { width: 30px; height: 30px; }
.public h3 { font-size: 1.6rem; }
.public > p { color: var(--texte-2); }

/* ═════════════════════════ HÉMERA ═════════════════════════ */
.hemera { isolation: isolate; }
.hemera::before { content: ""; position: absolute; inset: 10% 0; z-index: -1; pointer-events: none; background: radial-gradient(36% 50% at 74% 50%, var(--halo-1), transparent 70%); }
.hemera-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.hemera-tuile { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: var(--e-5); border-radius: 28px; background: var(--hemera-fond);
  border: 1px solid var(--filet); box-shadow: var(--ombre-3), inset 0 1px 0 var(--reflet); }
.hemera-tuile img { width: 60px; height: auto; }
.questions { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.questions li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--filet-fort); background: var(--verre); font-size: var(--fs-petit); color: var(--texte-2); }
.conversation { margin: 0; max-width: none; }
.fil { display: flex; flex-direction: column; gap: 10px; padding: var(--e-5); background: radial-gradient(70% 70% at 100% 0%, var(--jaune-doux), transparent 70%); }
.fil .etiquette { align-self: center; margin-bottom: var(--e-2); }
.fil .bulle { font-size: .95rem; max-width: 80%; padding: 11px 15px; }
.fil .bulle.elle { margin-left: 42px; max-width: calc(86% - 42px); }
.fil .bulle .av { position: absolute; left: -42px; bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .flotte { animation: flotte 6s ease-in-out infinite; }
}
@keyframes flotte { 50% { transform: translateY(-8px); } }

/* ═════════════════════════ TARIFS ═════════════════════════ */
.forfaits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-7); align-items: stretch; }
.forfait { position: relative; display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-6) var(--e-5); border-radius: var(--r-g); border: 1px solid var(--filet);
  background: var(--surface); box-shadow: var(--ombre-1); transition: transform var(--d2) var(--courbe), box-shadow var(--d2) var(--courbe); }
.forfait:hover { box-shadow: var(--ombre-3); }
.forfait.reco { border-color: var(--repere); transform: translateY(-8px); box-shadow: 0 0 0 1px var(--repere), var(--ombre-3);
  background: linear-gradient(180deg, var(--jaune-doux), transparent 40%), var(--surface); }
.drapeau { position: absolute; top: -12px; left: var(--e-5); padding: 3px var(--e-3); border-radius: 999px; background: var(--jaune); color: var(--sur-jaune);
  font: 700 var(--fs-label)/1.4 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; }
.dispo { align-self: flex-start; padding: 5px 10px; border-radius: 999px; border: 1px dashed var(--filet-fort); color: var(--texte-2);
  font: 500 11px/1.2 var(--f-chiffre); letter-spacing: .1em; text-transform: uppercase; }
.forfait h3 { font-size: 1.6rem; }
.forfait .pour { color: var(--attenue); font-size: var(--fs-petit); min-height: 2.8em; }
.prix { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.prix data { font: 500 2.6rem/1 var(--f-chiffre); letter-spacing: -.04em; }
.prix small { color: var(--attenue); font-size: var(--fs-petit); }
.forfait .coches { border-top: 1px solid var(--filet-doux); padding-top: var(--e-4); margin: 0; }
.forfait .coches li { font-size: .92rem; }
.forfait .coche { background: var(--jaune-doux); }
.forfait .btn { margin-top: auto; width: 100%; }
.note-tarifs { margin-top: var(--e-5); max-width: 76ch; color: var(--attenue); font-size: var(--fs-petit); }

/* ═════════════════════════ FAQ ═════════════════════════ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq-cote { position: sticky; top: calc(var(--tete-h) + 24px); }
.aide { display: grid; gap: var(--e-2); justify-items: start; margin-top: var(--e-6); padding: var(--e-5); border-radius: var(--r-g); border: 1px solid var(--filet);
  background: radial-gradient(80% 80% at 0% 0%, var(--jaune-doux), transparent 70%), var(--surface); box-shadow: var(--ombre-1); }
.aide b { font: 700 1.15rem var(--f-titre); }
.aide p { color: var(--texte-2); font-size: .95rem; margin-bottom: var(--e-2); }
.faq-liste { display: grid; gap: var(--e-3); }
.faq-liste details { border: 1px solid var(--filet-doux); border-radius: var(--r); background: var(--verre); padding: 0 var(--e-5); transition: border-color var(--d2), background-color var(--d2), box-shadow var(--d2); }
.faq-liste details:hover { border-color: var(--filet-fort); }
.faq-liste details[open] { border-color: var(--filet); background: var(--surface); box-shadow: var(--ombre-1); }
.faq-liste summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); min-height: 64px; padding-block: 12px;
  font: 700 1.05rem/1.35 var(--f-titre); }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--jaune-doux); color: var(--jaune-texte); font: 500 18px/1 var(--f-chiffre); transition: transform var(--d2) var(--courbe); }
.faq-liste details[open] summary::after { transform: rotate(45deg); }
.faq-liste details p { color: var(--texte-2); margin: 0 0 var(--e-5); max-width: 68ch; }

/* ═════════════════════════ APPEL FINAL + FORMULAIRE ═════════════════════════ */
.final { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(40px, 8vw, 96px) clamp(20px, 5vw, 64px);
  border-radius: var(--r-g); border: 1px solid var(--filet); background: var(--surface); box-shadow: var(--ombre-2); }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 80% at 50% 0%, var(--halo-1), transparent 70%), radial-gradient(40% 60% at 50% 100%, var(--halo-2), transparent 70%); }
.final-tuile { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--e-5); border-radius: 18px; background: var(--surface);
  border: 1px solid var(--filet); box-shadow: var(--ombre-2), inset 0 1px 0 var(--reflet); }
.final-tuile img { width: 30px; height: auto; }
.final h2, .final .intro { margin-inline: auto; }
.inscription { max-width: 520px; margin: var(--e-6) auto 0; text-align: left; }
.ligne-champ { display: flex; gap: var(--e-2); padding: 6px; border-radius: 999px; border: 1px solid var(--filet-fort); background: var(--fond); box-shadow: inset 0 1px 2px var(--filet-doux); }
.ligne-champ:focus-within { border-color: var(--texte); }
.ligne-champ input[type=email] { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--e-4); border: 0; background: transparent; color: var(--texte); font: 400 1rem var(--f-texte); border-radius: 999px; }
.ligne-champ input[type=email]:focus-visible { outline: none; }
.ligne-champ input::placeholder { color: var(--attenue); opacity: 1; }
.accord { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; margin-top: var(--e-4); font-size: var(--fs-petit); line-height: 1.45; color: var(--texte-2); cursor: pointer; }
.accord input { width: 22px; height: 22px; margin: 0; accent-color: var(--jaune); cursor: pointer; }
.accord a { color: var(--texte); }
.pot { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.retour { min-height: 1.4em; margin-top: 10px; font-size: var(--fs-petit); font-weight: 600; color: var(--alerte-texte); }
.merci { display: none; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r); background: var(--succes-fond); color: var(--succes-texte); font-weight: 600; border: 1px solid var(--succes-texte); }
.merci svg { width: 22px; height: 22px; flex: none; }
.inscription.fait .ligne-champ, .inscription.fait .accord, .inscription.fait .retour { display: none; }
.inscription.fait .merci { display: flex; }
:target > .inscription .merci { display: flex; }
:target > .inscription .ligne-champ, :target > .inscription .accord { display: none; }

/* ═════════════════════════ PIED ═════════════════════════ */
.pied { border-top: 1px solid var(--filet-doux); padding: var(--e-8) 0 var(--e-6); font-size: var(--fs-petit); }
.pied-in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--e-6); }
.pied-marque img { height: 44px; width: auto; }
.pied-marque p:last-child a { color: var(--texte-2); text-decoration: none; }
.pied nav { display: grid; gap: var(--e-2); align-content: start; }
.pied nav b { font-weight: 600; margin-bottom: var(--e-1); }
.pied nav a { color: var(--attenue); text-decoration: none; padding: 2px 0; }
.pied a:hover { color: var(--texte); text-decoration: underline; }
.pied-base { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--filet-doux); color: var(--attenue); font-size: var(--fs-label);
  display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }

/* ═════════════════════════ PAGES LÉGALES (+ page serveur _page) ═════════════════════════ */
.page-simple main { padding: var(--e-7) 0 var(--e-9); }
.page-simple h1 { font-size: clamp(2rem, 5vw, 3rem); margin: var(--e-6) 0 var(--e-3); }
.page-simple h2 { font-size: 1.35rem; margin: var(--e-6) 0 var(--e-2); }
.page-simple p, .page-simple li { max-width: 68ch; }
.page-simple dl { display: grid; grid-template-columns: 220px 1fr; gap: 8px 20px; }
.page-simple dt { color: var(--attenue); }
.page-simple dd { margin: 0; }
.page-simple .maj { color: var(--attenue); font-size: var(--fs-petit); }
.page-simple form { margin-top: var(--e-5); }
.a-completer { background: var(--jaune); color: var(--sur-jaune); padding: 0 4px; font-weight: 600; }

/* ═════════════════════════ APPARITIONS ═════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .monte { animation: monte var(--d3) var(--courbe) backwards; }
  .heros-in > :nth-child(2) { animation-delay: 70ms; } .heros-in > :nth-child(3) { animation-delay: 140ms; }
  .heros-in > :nth-child(4) { animation-delay: 210ms; } .heros-in > :nth-child(5) { animation-delay: 280ms; }
  .js .apparait { opacity: 0; transform: translateY(24px) scale(.985); transition: opacity 700ms var(--courbe), transform 700ms var(--courbe), box-shadow var(--d2) var(--courbe); }
  .js .apparait.vu { opacity: 1; transform: none; }
  .js .forfait.reco.apparait.vu { transform: translateY(-8px); }
  .js .publics .apparait:nth-child(2), .js .forfaits .apparait:nth-child(2) { transition-delay: 90ms; }
  .js .forfaits .apparait:nth-child(3) { transition-delay: 180ms; }
}
@keyframes monte { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demande-texte::after { display: none; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}

/* ═════════════════════════ RESPONSIVE ═════════════════════════ */
@media (max-width: 960px) {
  .forfaits { grid-template-columns: 1fr; }
  .forfait.reco, .js .forfait.reco.apparait.vu { transform: none; }
  .forfait .pour { min-height: 0; }
  .faq { grid-template-columns: 1fr; } .faq-cote { position: static; }
  .hemera-in, .mandat-in { grid-template-columns: 1fr; }
  .mandat-texte { order: -1; }
}
@media (max-width: 820px) {
  .rail { --carte: calc(100cqw - 56px); gap: var(--e-3); }
  .scen { grid-template-columns: 1fr; }
  .scen-ecran { border-right: 0; border-bottom: 1px solid var(--filet-doux); }
  .publics { grid-template-columns: 1fr; }
  .fenetre-corps { grid-template-columns: 1fr; }
  .fenetre-cote { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied-in { grid-template-columns: 1fr 1fr; } .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .section { padding: var(--e-8) 0; }
  .section.serre { padding-top: 0; }
  .onglets { justify-content: flex-start; margin-inline: -16px; padding: 4px 16px; }
  .familles { margin-top: var(--e-6); }
  .familles button { padding: 4px 6px; font-size: .8125rem; }
  .familles .nb { display: none; }
  .scen .objet { padding-top: 26px; }
  .tampon { right: 10px; }
  .demande-barre { flex-direction: column; align-items: stretch; }
  .demande-actions { flex-direction: column; }
  .demande-actions .btn, .actions .btn { width: 100%; min-height: 48px; }
  .puce { align-self: flex-start; }
  .actions { flex-direction: column; }
  .fenetre-cote { display: none; }
  .compare { grid-template-columns: 1fr 1fr; }
  .compare-lien { grid-column: 1 / -1; order: 3; grid-auto-flow: column; align-items: center; }
  .compare-lien i { width: 24px; height: 1px; }
  .lignes dd { font-size: 12.5px; }
  .garde { grid-template-columns: 1fr; }
  .marque img { height: 32px; }
  .annonce-plus { display: none; }
  .confiance { border-radius: 18px; text-align: left; font-size: .8rem; line-height: 1.4; }
  .ligne-champ { flex-direction: column; border-radius: 18px; }
  .ligne-champ .btn { width: 100%; min-height: 48px; }
  .public, .forfait { padding: var(--e-5); }
  .defile-moitie li { font-size: 1.1rem; margin-right: var(--e-6); }
  .page-simple dl { grid-template-columns: 1fr; gap: 2px; } .page-simple dd { margin-bottom: 10px; }
}
@media (max-width: 400px) {
  .scen-ecran, .scen-info { padding: var(--e-4); }
  .scene li { grid-template-columns: 46px 1fr; gap: var(--e-2); }
  .scene li::before { left: 49px; } .scene li::after { left: 53px; }
  .scene time { font-size: 11px; }
  .fil { padding: var(--e-4); }
}

/* ═════════ Forfaits : effet de survol façon AGORA (09/10/2026) ═════════
   Carte qui se soulève avec un halo jaune, lumière qui suit le pointeur (posée par site.js,
   souris seulement), anneau de lumière qui tourne autour du forfait conseillé.
   Rien ne bouge en mouvement réduit. */
@property --tour { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.forfait { --lueur: rgba(242, 194, 48, .10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .forfait { --lueur: rgba(242, 194, 48, .08); } }
:root[data-theme="dark"] .forfait { --lueur: rgba(242, 194, 48, .08); }
.forfait.lueur::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), var(--lueur), transparent 65%);
  opacity: 0; transition: opacity var(--d3) var(--courbe); }
.forfait.lueur:hover::after { opacity: 1; }
.forfait > * { position: relative; z-index: 1; }
.forfait > .drapeau { position: absolute; z-index: 2; }
.forfait.reco { box-shadow: 0 0 0 1px var(--repere), 0 30px 70px -24px var(--jaune-lueur), var(--ombre-3); }
.forfait.reco::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--tour), transparent 0 55%, var(--jaune) 75%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@media (prefers-reduced-motion: no-preference) {
  .forfait.reco::before { animation: tour 5s linear infinite; }
  .js .forfaits .apparait.vu { transition-delay: 0s; }
  .forfait:hover, .js .forfait.apparait.vu:hover { transform: translateY(-4px); border-color: var(--filet-fort);
    box-shadow: 0 22px 48px -20px var(--jaune-lueur), var(--ombre-2); }
  .forfait.reco:hover, .js .forfait.reco.apparait.vu:hover { transform: translateY(-12px); border-color: var(--repere);
    box-shadow: 0 0 0 1px var(--repere), 0 34px 80px -22px var(--jaune-lueur), var(--ombre-3); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 960px) {
  .forfait.reco:hover, .js .forfait.reco.apparait.vu:hover { transform: translateY(-4px); }
}
@keyframes tour { to { --tour: 360deg; } }