/* Khallot — l'accueil (système visuel 2, voir deploy/SYSTEME-VISUEL.md).
   Une idée par section, de grands blancs, les vrais écrans de l'app.
   Le mouvement est dans vitrine.js ; sans lui, tout est visible et fixe. */

.vitrine { --voile-bleu: #edf1fc; --voile-sable: #f4ede2; --voile-menthe: #e5f4ef; --voile-laiton: #f6eedd;
  --espace: clamp(112px, 13vw, 196px); overflow-x: clip; }
.vitrine h2 { font-size: var(--t-1); font-weight: 700; letter-spacing: -.048em; line-height: 1.02; }
.vitrine h3 { font-size: var(--t-3); font-weight: 680; letter-spacing: -.035em; line-height: 1.1; }

.v-section { width: min(var(--large), calc(100% - 2 * var(--gouttiere))); margin: var(--espace) auto 0; }
.v-tete { max-width: 780px; margin: 0 auto clamp(44px, 5.5vw, 76px); text-align: center; }
.v-tete p { max-width: 560px; margin: 22px auto 0; text-wrap: balance; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--encre-2); }
.v-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vitrine .button { min-height: 52px; padding: 0 26px; font-size: 16px; }
.v-lien { margin-top: 36px; text-align: center; font-size: 15px; }
.v-lien a { color: var(--encre-2); }

/* ── Le téléphone (châssis fin, 5 px) ─────────────────────────────────── */
.tel { --w: 300px; position: relative; display: block; width: var(--w); flex: none; padding: 5px;
  border-radius: calc(var(--w) * .158); background: linear-gradient(150deg, #2a2e36, #07080b 46%, #1b1e24);
  box-shadow: 0 0 0 1px #3d424a, 0 0 0 2px #b9bec6, 0 0 0 3px #4b5058,
              0 46px 90px -30px rgba(16, 29, 53, .42), 0 18px 36px -18px rgba(16, 29, 53, .25); }
.tel > img { display: block; width: 100%; height: auto; border-radius: calc((var(--w) - 10px) * .137); background: #fbf7f1; }
.tel::before { content: ""; position: absolute; z-index: 6; top: calc(5px + var(--w) * .028); left: 50%;
  width: calc(var(--w) * .30); height: calc(var(--w) * .088); transform: translateX(-50%); border-radius: 999px; background: #050608; }
.tel::after { content: ""; position: absolute; right: -4px; top: 27%; width: 3px; height: 11%; border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #6a6f78, #c6cad1); }

/* L'écran animé que vitrine.js pose sur la capture : des bandes de la même
   image, découpées entre deux blocs de l'interface. */
.ecran { position: absolute; z-index: 3; inset: 5px; overflow: hidden; border-radius: calc((var(--w) - 10px) * .137);
  background: #fbf7f1; isolation: isolate; perspective: 1400px; }
.ecran .vue { position: absolute; inset: 0; background: #fbf7f1; perspective: 1400px; }
.ecran .vue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; }
.tel.anime > img { opacity: 0; }
.doigt { position: absolute; z-index: 5; width: 15%; aspect-ratio: 1; margin: -7.5% 0 0 -7.5%; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .5); border: 1.5px solid rgba(16, 29, 53, .18);
  box-shadow: 0 6px 18px -6px rgba(16, 29, 53, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; }
.onde { position: absolute; z-index: 4; width: 15%; aspect-ratio: 1; margin: -7.5% 0 0 -7.5%; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .9); opacity: 0; }

/* ── Haut de page ─────────────────────────────────────────────────────── */
.v-hero { position: relative; padding-top: clamp(52px, 7vw, 104px); text-align: center; overflow: clip; }
/* L'entrée du texte du héros, sans JavaScript : visible tout de suite,
   légèrement remonté en 0,6 s. */
@keyframes v-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.v-hero h1 .v-ligne, .v-hero .v-lede, .v-hero .v-actions, .v-hero .v-preuve { animation: v-entree .6s cubic-bezier(.2,.7,.2,1) both; }
.v-hero h1 .v-ligne:nth-child(2) { animation-delay: .06s; }
.v-hero .v-lede { animation-delay: .12s; }
.v-hero .v-actions { animation-delay: .18s; }
.v-hero .v-preuve { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .v-hero h1 .v-ligne, .v-hero .v-lede, .v-hero .v-actions, .v-hero .v-preuve { animation: none; } }

.v-hero-texte { position: relative; z-index: 4; padding: 0 var(--gouttiere); }
.v-hero h1 { font-size: clamp(46px, 8.2vw, 118px); font-weight: 720; letter-spacing: -.058em; line-height: .95; }
.v-ligne { display: block; }
.v-lede { max-width: 560px; margin: 28px auto 0; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.5; color: var(--encre-2); text-wrap: balance; }
.v-hero .v-actions { justify-content: center; margin-top: 34px; }
.v-preuve { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 22px; font-size: 14px; color: var(--gris); }
.v-preuve span + span::before { content: "·"; margin-right: 18px; color: #b5b9c3; }
.v-preuve a { color: var(--encre-2); }

/* L'aurore : un dégradé vivant (Paper Shaders) derrière les téléphones.
   Sans WebGL, les mêmes couleurs en dégradés fixes. */
.v-aurore { position: absolute; z-index: 0; left: 50%; top: 38%; width: min(1700px, 160vw); height: min(820px, 80vw); transform: translateX(-50%);
  background: radial-gradient(40% 48% at 28% 58%, rgba(51, 92, 245, .45), transparent 72%),
              radial-gradient(38% 46% at 72% 52%, rgba(26, 184, 156, .45), transparent 72%),
              radial-gradient(28% 36% at 52% 44%, rgba(207, 166, 97, .35), transparent 72%);
  -webkit-mask-image: radial-gradient(50% 46% at 50% 54%, #000 30%, transparent 100%); mask-image: radial-gradient(50% 46% at 50% 54%, #000 30%, transparent 100%);
  pointer-events: none; }
.v-aurore.vivante { background: none; }
.v-aurore canvas, .v-nuit-fond canvas { contain: strict; display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

.v-eventail { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-start;
  margin: clamp(52px, 6vw, 80px) auto 0; height: clamp(500px, 54vw, 680px); perspective: 1600px; }
.v-eventail .tel { transform-style: preserve-3d; will-change: transform; }
.v-eventail .tel-centre { --w: clamp(250px, 23vw, 316px); z-index: 2; }
.v-eventail .tel-gauche, .v-eventail .tel-droite { --w: clamp(200px, 18.5vw, 252px); margin-top: 74px; }
.v-eventail .tel-gauche { margin-right: -34px; transform: rotate(-5deg); }
.v-eventail .tel-droite { margin-left: -34px; transform: rotate(5deg); }
.v-eventail::after { content: ""; position: absolute; z-index: 3; left: -50vw; right: -50vw; bottom: 0; height: 34%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(251, 247, 241, 0), var(--creme) 88%); }

/* Les trois bulles de l'éventail. */
.ac-bulle { position: absolute; z-index: 4; display: grid; gap: 2px; padding: 11px 15px; text-align: left; border-radius: 16px;
  background: rgba(255, 253, 248, .9); border: 1px solid #e7dfd1; box-shadow: 0 14px 34px -16px rgba(16, 29, 53, .28);
  font-size: 13px; line-height: 1.4; color: var(--encre-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  --inclinaison: -1.5deg; --derive: 5px; animation: v-flotter 8s ease-in-out infinite; }
.ac-bulle b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--menthe-sombre); }
.ac-bulle strong { color: var(--nuit); font-size: 14px; }
.ac-bulle.b1 { top: 9%; left: max(18px, calc(50% - 560px)); animation-delay: -2s; }
.ac-bulle.b2 { top: 32%; right: max(18px, calc(50% - 600px)); --inclinaison: 1.5deg; --derive: 6px; animation-duration: 10s; animation-delay: -4s; width: 216px; }
.ac-bulle.b3 { top: 64%; left: max(36px, calc(50% - 530px)); --inclinaison: -.8deg; --derive: 4px; animation-duration: 9s; animation-delay: -6s; }
.ac-bulle.b2 strong { min-height: 3.9em; }
.ac-bulle strong[data-ecrire]::after { content: "|"; margin-left: 1px; color: var(--menthe-sombre); animation: v-curseur 1s steps(1) infinite; }
@keyframes v-flotter { 0%, 100% { translate: 0 0; rotate: var(--inclinaison); } 50% { translate: 0 calc(var(--derive) * -2); rotate: calc(var(--inclinaison) * -.4); } }
@keyframes v-curseur { 50% { opacity: 0; } }

/* ── Les filières ─────────────────────────────────────────────────────── */
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }

/* ── Le scan ──────────────────────────────────────────────────────────── */
.v-scan-scene { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 24px 48px;
  padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 80px) clamp(28px, 3vw, 40px); border-radius: 40px; background: var(--voile-bleu); overflow: hidden; }
.v-scan-tel { display: flex; justify-content: center; }
.v-scan-tel .tel { --w: clamp(240px, 22vw, 290px); }
.v-etapes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.v-etapes li { position: relative; padding-top: 18px; font-size: 15px; line-height: 1.5; color: var(--gris); transition: color .5s; }
.v-etapes li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: rgba(16, 29, 53, .12); }
.v-etapes li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--nuit);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--sortie); }
.v-etapes li strong { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 650; color: inherit; letter-spacing: -.01em; }
.v-etapes li.actif { color: var(--encre-2); }
.v-etapes li.actif strong { color: var(--nuit); }
.v-etapes li.actif::after { transform: scaleX(1); }

/* ── Les trois cartes ─────────────────────────────────────────────────── */
.v-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v-carte { position: relative; display: flex; flex-direction: column; align-items: center; height: clamp(540px, 48vw, 640px);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px) 0; border-radius: 36px; overflow: hidden; text-align: center; }
.v-carte.t-bleu { background: var(--voile-bleu); }
.v-carte.t-sable { background: var(--voile-sable); }
.v-carte.t-menthe { background: var(--voile-menthe); }
.v-carte-texte p { max-width: 300px; margin: 12px auto 0; font-size: 16px; line-height: 1.5; color: var(--encre-2); }
.v-carte .tel { --w: min(272px, 82%); margin-top: auto; translate: 0 24%; transition: translate .8s var(--sortie); }
.v-carte:hover .tel { translate: 0 20%; }

/* ── La section sombre : les quatre onglets ───────────────────────────── */
.v-nuit { position: relative; width: min(1400px, calc(100% - 24px)); margin: var(--espace) auto 0; border-radius: 44px; overflow: hidden;
  background: var(--nuit); color: #fff; }
.v-nuit-fond { position: absolute; inset: 0; opacity: .9;
  background: radial-gradient(50% 60% at 85% 20%, rgba(51, 92, 245, .35), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(26, 184, 156, .22), transparent 70%); }
.v-nuit-fond.vivante { background: none; }
.v-nuit-contenu { position: relative; z-index: 1; padding: clamp(72px, 9vw, 128px) var(--gouttiere); }
.v-nuit h2 { color: #fff; }
.v-nuit .v-tete p { color: rgba(255, 255, 255, .68); }
.v-onglets { display: grid; grid-template-columns: minmax(0, 420px) auto; justify-content: center; align-items: center; gap: clamp(48px, 8vw, 120px); }
.v-onglets-liste { display: grid; gap: 4px; }
.v-onglets-liste button { position: relative; display: grid; padding: 18px 0 20px; border: 0; background: none; color: inherit; text-align: left;
  font: inherit; cursor: pointer; }
.v-onglets-liste strong { font-size: clamp(22px, 2.2vw, 28px); font-weight: 650; letter-spacing: -.03em; color: rgba(255, 255, 255, .42); transition: color .4s; }
.v-onglets-liste button:hover strong { color: rgba(255, 255, 255, .7); }
.v-onglets-liste span { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .7);
  transition: max-height .6s var(--sortie), opacity .5s, margin .6s var(--sortie); }
.v-onglets-liste button[aria-selected="true"] strong { color: #fff; }
.v-onglets-liste button[aria-selected="true"] span { max-height: 6em; opacity: 1; margin-top: 8px; }
.v-onglets-liste i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.v-onglets-liste i::after { content: ""; position: absolute; inset: 0; background: var(--menthe); transform: scaleX(0); transform-origin: left; }
.v-onglets-liste button[aria-selected="true"] i::after { transform: scaleX(1); }
.v-onglets.minute .v-onglets-liste button[aria-selected="true"] i::after { animation: v-minute var(--duree, 6s) linear forwards; }
.v-onglets.minute.pause .v-onglets-liste button[aria-selected="true"] i::after,
.v-onglets.minute:hover .v-onglets-liste button[aria-selected="true"] i::after,
.v-onglets.minute:focus-within .v-onglets-liste button[aria-selected="true"] i::after { animation-play-state: paused; }
@keyframes v-minute { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.v-onglets-tel .tel { --w: clamp(250px, 24vw, 310px); box-shadow: 0 0 0 1px #3d424a, 0 0 0 2px #8d939c, 0 0 0 3px #4b5058, 0 50px 100px -30px rgba(0, 0, 0, .6); }
.v-onglets-tel .tel > [role="tabpanel"] { display: none; }
.v-onglets-tel .tel > [role="tabpanel"].actif { display: block; }
.v-onglets-tel [role="tabpanel"] img { display: block; width: 100%; height: auto; border-radius: calc((var(--w) - 10px) * .137); }
.v-onglets-tel .tel.anime > [role="tabpanel"] { opacity: 0; }

/* ── Le khâlot ────────────────────────────────────────────────────────── */
.v-khalot { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; padding: clamp(40px, 6vw, 88px) clamp(28px, 6vw, 96px) 0;
  border-radius: 40px; background: var(--voile-laiton); overflow: hidden; }
.v-khalot-texte { align-self: center; padding-bottom: clamp(40px, 6vw, 88px); max-width: 500px; }
.v-khalot-texte p { margin-top: 22px; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.55; color: var(--encre-2); }
.v-rang { margin-top: 36px; max-width: 380px; padding: 18px 20px; border-radius: 20px; background: rgba(255, 253, 248, .8); box-shadow: var(--ombre); }
.v-rang > div:first-child { display: flex; justify-content: space-between; font-size: 13px; font-weight: 650; color: var(--nuit); }
.v-rang-barre { height: 8px; margin: 10px 0; border-radius: 99px; background: rgba(16, 29, 53, .08); overflow: hidden; }
.v-rang-barre i { display: block; width: 52.6%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--laiton), var(--menthe)); transform-origin: left; }
.v-rang small { font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
.v-khalot-visuel .tel { --w: clamp(240px, 23vw, 300px); margin-bottom: -18%; }

/* ── Et ce n'est pas tout ─────────────────────────────────────────────── */
  transform: rotate(45deg); transition: transform .4s var(--sortie), top .4s var(--sortie); }
  transition: max-height .6s var(--sortie), opacity .5s, margin .6s var(--sortie); }

/* ── La confiance ─────────────────────────────────────────────────────── */
.v-promesses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 0; padding: 0; list-style: none; }
.v-promesses li { display: grid; align-content: start; gap: 10px; padding-top: 24px; border-top: 1.5px solid var(--nuit); }
.v-promesses strong { font-size: clamp(22px, 2vw, 26px); font-weight: 680; letter-spacing: -.03em; line-height: 1.15; color: var(--nuit); }
.v-promesses span { font-size: 16px; line-height: 1.55; color: var(--encre-2); }

/* ── Le don ───────────────────────────────────────────────────────────── */
.v-don-carte { display: grid; grid-template-columns: 1fr minmax(0, 470px); align-items: center; gap: clamp(36px, 6vw, 88px);
  padding: clamp(40px, 6vw, 88px); border-radius: 44px; background: var(--voile-sable); }
.v-don-texte h2 { font-size: var(--t-2); }
.v-don-texte > p { margin-top: 22px; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.55; color: var(--encre-2); }
.v-don-texte .v-actions { margin-top: 32px; }
.v-don-note { margin-top: 18px; font-size: 13.5px; color: var(--gris); }
.v-budget { padding: clamp(26px, 3vw, 38px); border-radius: 30px; background: var(--papier); box-shadow: var(--ombre); }
.v-budget-total strong { display: block; font-size: clamp(48px, 5.4vw, 72px); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--nuit); font-variant-numeric: tabular-nums; }
.v-budget-total span { display: block; margin-top: 10px; font-size: 16px; color: var(--encre-2); }
.v-budget-barre { display: flex; gap: 3px; height: 14px; margin: 28px 0 18px; }
.v-budget-barre i { height: 100%; border-radius: 99px; transform-origin: left; }
.v-budget-barre .b-dev { flex: 2200; }
.v-budget-barre .b-ia { flex: 900; }
.v-budget-barre .b-serv { flex: 230; }
.v-budget-barre .b-apple { flex: 99; }
.b-dev { background: var(--nuit); }
.b-ia { background: var(--cobalt); }
.b-serv { background: var(--menthe); }
.b-apple { background: var(--laiton); }
.v-budget-legende { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--encre-2); }
.v-budget-legende li { display: flex; align-items: center; gap: 10px; }
.v-budget-legende li i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.v-budget-legende b { margin-left: auto; font-weight: 600; color: var(--nuit); font-variant-numeric: tabular-nums; }
.v-equivalences { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.v-equivalences p { padding: 14px 16px; border-radius: 16px; background: var(--voile-menthe); font-size: 14px; line-height: 1.35; color: var(--encre-2); }
.v-equivalences b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--menthe-sombre); }
.v-budget-source { margin-top: 18px; font-size: 13px; color: var(--gris); }
.v-budget-source a { color: var(--encre-2); }

/* ── Les ressources ───────────────────────────────────────────────────── */
.v-ressources .v-tete h2 { font-size: var(--t-2); }
.v-ressources-liens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v-ressources-liens a { position: relative; display: grid; gap: 4px; padding: 26px 56px 26px 26px; border-radius: 24px; border: 1px solid var(--filet);
  background: var(--papier); text-decoration: none; transition: transform .5s var(--sortie), box-shadow .4s; }
.v-ressources-liens a::after { content: "→"; position: absolute; right: 24px; top: 50%; transform: translate(-4px, -50%); color: var(--gris); transition: transform .4s var(--sortie), color .3s; }
.v-ressources-liens a:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.v-ressources-liens a:hover::after { transform: translate(0, -50%); color: var(--nuit); }
.v-ressources-liens strong { font-size: 18px; font-weight: 650; color: var(--nuit); letter-spacing: -.02em; }
.v-ressources-liens span { font-size: 14.5px; color: var(--gris); }

/* ── L'invitation ─────────────────────────────────────────────────────── */
.v-final { text-align: center; }
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.v-formulaire { max-width: 620px; margin: 0 auto; padding: clamp(24px, 3vw, 36px); border-radius: 30px; background: var(--papier); box-shadow: var(--ombre); text-align: left; }
.v-formulaire .champs { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.v-formulaire label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; color: var(--nuit); }
.v-formulaire label[hidden] { display: none; }
.v-formulaire input[type="email"], .v-formulaire select { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(16, 29, 53, .16);
  background: #fff; font: 400 16px var(--police); color: var(--encre); }
.v-formulaire input:focus, .v-formulaire select:focus { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.v-formulaire .case { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-weight: 400; font-size: 13.5px; line-height: 1.5; color: var(--encre-2); }
.v-formulaire .case input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--nuit); }
.v-formulaire .actions { margin-top: 18px; }
.v-formulaire .actions .button { width: 100%; }
.v-formulaire .fineprint { margin-top: 12px; }

/* Une fois l'inscription envoyée, la confirmation prend la place du formulaire. */
.v-formulaire.est-envoye > :not(.v-confirmation) { display: none; }
.v-confirmation { display: grid; justify-items: center; gap: 12px; padding: 10px 0 6px; text-align: center; }
.v-confirmation[hidden] { display: none; }
.v-coche { width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: var(--voile-menthe); color: var(--menthe-sombre); }
.v-confirmation p { max-width: 470px; font-size: 16px; line-height: 1.55; color: var(--encre-2); }
.v-confirmation .v-confirmation-titre { margin-top: 4px; font-size: clamp(26px, 3.4vw, 32px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--nuit); }
.v-confirmation-lien { display: inline-flex; align-items: center; min-height: 46px; margin-top: 8px; padding: 0 24px; border: 1px solid var(--filet); border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--nuit); text-decoration: none; transition: background .3s, border-color .3s; }
.v-confirmation-lien[hidden] { display: none; }
.v-confirmation-lien:hover { background: var(--voile-sable); border-color: rgba(16, 29, 53, .24); }
.v-confirmation .fineprint { margin-top: 6px; font-size: 13.5px; color: var(--gris); }
.v-confirmation .fineprint a { color: var(--encre-2); }
@media (prefers-reduced-motion: no-preference) {
  .v-confirmation:not([hidden]) { animation: v-confirmation-entree .6s var(--sortie) both; }
  .v-confirmation:not([hidden]) .v-coche { animation: v-coche-pop .7s var(--sortie) .1s both; }
}
@keyframes v-confirmation-entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes v-coche-pop { from { transform: scale(.6); } to { transform: scale(1); } }

/* ── Questions ────────────────────────────────────────────────────────── */
.v-faq { max-width: 780px; }
.v-faq h2 { font-size: var(--t-2); margin-bottom: 28px; text-align: center; }
.v-faq details { border-bottom: 1px solid var(--filet); }
.v-faq summary { position: relative; padding: 22px 40px 22px 0; list-style: none; cursor: pointer; font-size: 18px; font-weight: 600; color: var(--nuit); letter-spacing: -.015em; }
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--gris); transition: transform .4s var(--sortie); }
.v-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.v-faq details p { padding: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--encre-2); }

/* ── Tablette ─────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  .v-scan-scene { grid-template-columns: 1fr; }
  .v-etapes { grid-template-columns: 1fr; gap: 14px; }
  .v-onglets { grid-template-columns: 1fr; justify-items: center; gap: 40px; }
  .v-onglets-liste { width: 100%; max-width: 520px; }
  .v-khalot { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .v-khalot-texte { padding-bottom: 0; }
  .v-rang { margin-left: auto; margin-right: auto; text-align: left; }
  .v-don-carte { grid-template-columns: 1fr; }
  .v-cartes { grid-template-columns: repeat(3, minmax(280px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere); scroll-padding: 0 var(--gouttiere); }
  .v-cartes::-webkit-scrollbar { display: none; }
  .v-carte { scroll-snap-align: start; height: 560px; }
  .v-promesses, .v-ressources-liens { grid-template-columns: 1fr; }
}

/* ── Téléphone ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .vitrine { --espace: 104px; }
  .v-hero { padding-top: 40px; }
  .v-preuve { gap: 4px 12px; font-size: 13px; }
  .v-preuve span + span::before { margin-right: 12px; }
  .v-eventail { height: 420px; margin-top: 40px; }
  .v-eventail .tel-centre { --w: 200px; }
  .v-eventail .tel-gauche, .v-eventail .tel-droite { --w: 160px; margin-top: 56px; }
  .v-eventail .tel-gauche { margin-right: -92px; }
  .v-eventail .tel-droite { margin-left: -92px; }
  .ac-bulle { padding: 8px 11px; border-radius: 13px; font-size: 11px; }
  .ac-bulle strong { font-size: 12px; }
  .ac-bulle b { font-size: 11px; }
  .ac-bulle.b1 { top: 0; left: 8px; }
  .ac-bulle.b2 { top: 36%; right: 8px; width: 150px; }
  .ac-bulle.b3 { top: 70%; left: 8px; }
  .v-scan-scene { padding: 28px 18px 24px; border-radius: 30px; }
  .v-carte { height: 520px; border-radius: 30px; }
  .v-cartes { grid-template-columns: repeat(3, 84%); }
  .v-nuit { width: calc(100% - 16px); border-radius: 30px; }
  .v-onglets-liste strong { font-size: 21px; }
  .v-khalot { padding: 36px 22px 0; border-radius: 30px; }
  .v-don-carte { padding: 32px 20px; border-radius: 30px; }
  .v-don-texte .v-actions .button { flex: 1 1 100%; }
  .v-equivalences { grid-template-columns: 1fr; }
  .v-formulaire .champs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-bulle { animation: none; }
  .v-carte .tel, .v-etapes li::after, .v-onglets-liste span { transition: none; }
}

/* Les titres des sections en deux colonnes : un cran plus petits. */
.v-khalot h2 { font-size: var(--t-2); }

/* Le défilé de la fin : des ombres plus courtes, entières dans leur bande. */

/* Sur téléphone : un en-tête d'une ligne (le menu complet est en pied de page),
   et la preuve en deux lignes sans point orphelin. */
@media (max-width: 640px) {
  .v-preuve span:last-child { flex-basis: 100%; }
  .v-preuve span:last-child::before { display: none; }
}

/* Le fondu vers le crème tient au haut de page, pas à l'éventail : l'éventail
   s'incline avec le pointeur et son fondu laissait voir une lisière. */
.v-eventail::after { display: none; }
.v-hero::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: clamp(150px, 17vw, 240px); pointer-events: none;
  background: linear-gradient(to bottom, rgba(251, 247, 241, 0), var(--creme) 82%); }

@media (max-width: 640px) {
  .ac-bulle.b2 { display: none; }
  .ac-bulle.b1 { top: 4%; left: 6px; }
  .ac-bulle.b3 { top: auto; bottom: 36%; left: auto; right: 6px; }
}

/* ── L'équipe (écrite par deploy/equipe-actualites-vers-site.py) ──────── */
.v-equipe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 7vw, 104px); align-items: start; }
.v-equipe-texte h2 { font-size: var(--t-2); }
.v-equipe-texte > p { margin-top: 18px; max-width: 460px; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.55; color: var(--encre-2); }
.v-equipe-mot { margin: 36px 0 32px; padding-left: 22px; border-left: 2px solid var(--menthe); }
.v-equipe-mot blockquote { margin: 0; font-size: clamp(19px, 1.7vw, 22px); font-weight: 500; line-height: 1.45; letter-spacing: -.012em; color: var(--nuit); }
.v-equipe-mot figcaption { margin-top: 14px; font-size: 14.5px; color: var(--gris); }
.v-equipe-mot figcaption b { display: block; font-weight: 650; color: var(--nuit); }
.v-equipe-gens { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.v-equipe-gens li { display: grid; align-content: start; gap: 3px; padding: 18px 0; border-bottom: 1px solid var(--filet); }
.v-equipe-gens b { font-size: 17.5px; font-weight: 650; letter-spacing: -.015em; color: var(--nuit); }
.v-equipe-gens span { font-size: 14.5px; line-height: 1.4; color: var(--gris); }
@media (max-width: 999px) { .v-equipe { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .v-equipe-gens { grid-template-columns: 1fr; } }

/* ════ Pages du même système : association, équipe, application ═══════ */

/* Le fil d'Ariane (écrit par deploy/navigation-site.py). */
.page-breadcrumb { width: min(var(--large), calc(100% - 2 * var(--gouttiere))); margin: 22px auto 0; font-size: 13.5px; color: var(--gris); }
.page-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.page-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: #b5b9c3; }
.page-breadcrumb a { color: var(--gris); text-decoration: none; }
.page-breadcrumb a:hover { color: var(--nuit); }

/* L'en-tête d'une page : centré, une phrase, deux boutons, des repères. */
.v-page-tete { position: relative; padding: clamp(56px, 8vw, 120px) var(--gouttiere) 0; text-align: center; overflow: clip; }
.v-page-tete > :not(.v-aurore) { position: relative; z-index: 1; }
.v-page-tete h1 { font-size: clamp(44px, 7vw, 96px); font-weight: 720; letter-spacing: -.055em; line-height: .97; }
.v-page-tete .v-actions { justify-content: center; margin-top: 34px; }
.v-page-tete .v-aurore { top: 20%; height: min(640px, 70vw); opacity: .8; }
ul.v-preuve { margin: 24px auto 0; padding: 0 0 clamp(24px, 4vw, 48px); list-style: none; max-width: 760px; }
ul.v-preuve li + li::before { content: "·"; margin-right: 18px; color: #b5b9c3; }

/* Deux cartes côte à côte, un lien discret. */
.v-cartes-2 { grid-template-columns: repeat(2, 1fr); }
.v-carte h3 { font-size: clamp(24px, 2.4vw, 30px); }
.v-carte-texte p { max-width: 380px; }
.v-carte-lien { display: inline-block; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--nuit); text-underline-offset: .25em; }
.v-fiches { display: grid; gap: 10px; width: min(100%, 380px); margin-top: auto; padding: 28px 0 36px; }
.v-fiches span { display: block; padding: 16px 20px; border-radius: 16px; background: var(--papier); text-align: left;
  box-shadow: 0 1px 0 rgba(16, 29, 53, .06), 0 16px 34px -22px rgba(16, 29, 53, .4); font-size: 15px; font-weight: 600; color: var(--nuit); }
.v-fiches span:nth-child(odd) { rotate: -1.2deg; }
.v-fiches span:nth-child(even) { rotate: 1.2deg; translate: 14px 0; }

/* Adhérer ou donner : deux grandes formules. */
.v-formules { display: grid; gap: 12px; }
.v-formule { position: relative; display: grid; gap: 4px; padding: 24px 26px; border-radius: 24px; background: var(--papier); box-shadow: var(--ombre);
  text-decoration: none; color: var(--encre-2); transition: transform .5s var(--sortie), box-shadow .4s; }
.v-formule:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(16, 29, 53, .05), 0 28px 50px -24px rgba(16, 29, 53, .4); }
.v-formule span { font-size: 13px; font-weight: 600; color: var(--gris); }
.v-formule strong { font-size: 30px; font-weight: 700; letter-spacing: -.04em; color: var(--nuit); }
.v-formule strong small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--gris); }
.v-formule em { font-style: normal; font-size: 15px; }
.v-formule i { position: absolute; right: 24px; top: 50%; translate: 0 -50%; font-style: normal; font-weight: 600; font-size: 15px; color: var(--nuit); }
.v-formule i::after { content: " →"; }
.v-formule-don { background: var(--nuit); }
.v-formule-don span, .v-formule-don em { color: rgba(255, 255, 255, .7); }
.v-formule-don strong, .v-formule-don i { color: #fff; }
.v-don-texte .v-equivalences { margin-top: 26px; }
.v-don-texte .v-equivalences p { background: rgba(255, 253, 248, .7); }

/* La promesse des statuts. */
.v-statuts { max-width: 980px; padding: clamp(40px, 6vw, 88px) clamp(24px, 6vw, 96px); border-radius: 44px; background: var(--voile-bleu); text-align: center; }
.v-statuts h2 { font-size: var(--t-2); }
.v-statuts blockquote { margin: 32px auto 0; max-width: 760px; }
.v-statuts blockquote p { font-size: clamp(19px, 1.9vw, 24px); font-weight: 500; line-height: 1.5; letter-spacing: -.012em; color: var(--nuit); }
.v-statuts cite { display: block; margin-top: 14px; font-style: normal; font-size: 14px; color: var(--gris); }
.v-statuts .v-promesses { margin-top: 44px; text-align: left; }
.v-statuts .v-promesses li { border-top-color: rgba(16, 29, 53, .25); }
.v-portes a { padding-right: 26px; }
.v-portes a::after { display: none; }
.v-portes span { line-height: 1.5; }
@media (max-width: 999px) {
  .v-cartes-2 { grid-template-columns: repeat(2, minmax(300px, 1fr)); }
}
@media (max-width: 640px) {
  .v-cartes-2 { grid-template-columns: repeat(2, 86%); }
  .v-statuts { border-radius: 30px; }
  ul.v-preuve li:last-child { flex-basis: auto; }
}

/* ── La page de l'équipe : l'organigramme (deploy/equipe-actualites-vers-site.py) ── */
.eo-hero, .eo, .eo-fin { width: min(1080px, calc(100% - 2 * var(--gouttiere))); margin: 0 auto; }
.eo-hero { position: relative; padding: clamp(56px, 8vw, 112px) 0 clamp(32px, 4vw, 56px); text-align: center; }
.eo-hero h1 { font-size: clamp(46px, 7vw, 96px); font-weight: 720; letter-spacing: -.055em; line-height: .95; }
.eo-hero .lede { max-width: 560px; margin: 22px auto 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--encre-2); text-wrap: balance; }
.eo h2 { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); line-height: 1.3; }
.eo h3 { font-size: 19px; font-weight: 680; letter-spacing: -.02em; }
.eo-sert { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--gris); }
.eo-personne { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-radius: 6px; }
.eo-personne b { font-size: 19px; font-weight: 680; letter-spacing: -.02em; color: var(--nuit); transition: color .2s; }
.eo-personne small { font-size: 14px; line-height: 1.35; color: var(--gris); }
.eo-personne:hover b, .eo-personne:focus-visible b { color: var(--cobalt); }
.eo-personne:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
.eo-gens { display: flex; flex-direction: column; }
.eo-haut { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.eo-groupe { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; }
.eo-cote .eo-gens { border-top: 1px solid var(--filet); }
.eo-cote .eo-personne { border-bottom: 1px solid var(--filet); }
.eo-bureau { padding: 30px 30px 24px; border-radius: 32px; background: var(--nuit); color: #fff; text-align: center; }
.eo-bureau h2 { color: #9fb0d6; }
.eo-bureau .eo-sert { color: #aeb8d2; }
.eo-bureau .eo-personne b { color: #fff; }
.eo-bureau .eo-personne small { color: #aeb8d2; }
.eo-bureau .eo-personne:hover b { color: #7fe0c8; }
.eo-bureau .president { align-items: center; padding: 16px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.eo-bureau .president b { font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.03em; }
.eo-bureau .president small { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--menthe); }
.eo-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; padding-top: 6px; }
.eo-lien { width: 1px; height: 48px; margin: 26px auto; background: var(--filet); }
.eo-niveau { padding-top: 26px; border-top: 1px solid var(--filet); scroll-margin-top: 90px; }
.eo-niveau-tete { max-width: 640px; margin-bottom: 22px; }
.eo-rang { display: grid; gap: clamp(20px, 3vw, 40px); }
.eo-rang.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eo-rang.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eo-carte { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 24px; border-radius: 24px; background: var(--papier); border: 1px solid var(--filet); scroll-margin-top: 90px; }
.eo-filieres { margin-bottom: 6px; font-size: 13px; color: var(--gris); }
.eo-pole ul { display: grid; gap: 6px; margin: 6px 0 4px; padding: 0; list-style: none; }
.eo-pole li { font-size: 14.5px; line-height: 1.45; color: var(--encre-2); }
.eo-pole .eo-gens { margin-top: 10px; border-top: 1px solid var(--filet); }
.eo-delegues { border-top: 2px solid var(--menthe); }
.eo-delegues .eo-niveau-tete h2, .eo-delegues .eo-carte h3 { color: var(--menthe-sombre); }
.eo-delegues .eo-niveau-tete .eo-sert { font-size: 16px; color: var(--encre-2); max-width: 58ch; }
.eo-delegues .eo-carte { background: var(--voile-menthe); border-color: transparent; }
.eo-niveau-comites { margin-top: 56px; }
.eo-comites { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.eo-comite p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--encre-2); }
.eo-fiche { position: fixed; inset: 0; margin: auto; width: min(540px, calc(100vw - 32px)); max-height: min(82vh, 720px); overflow: auto; padding: 32px; border: 0; border-radius: 28px;
  background: var(--papier); color: var(--encre); box-shadow: 0 40px 100px -30px rgba(16, 29, 53, .5); }
.eo-fiche::backdrop { background: rgba(16, 29, 53, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.eo-fiche-tete { padding-right: 44px; margin-bottom: 6px; }
.eo-fiche h3 { font-size: clamp(22px, 4vw, 28px); letter-spacing: -.03em; }
.eo-filiere { font-size: 13px; color: var(--gris); }
.eo-fiche-role { margin: 12px 0 14px; font-weight: 600; color: var(--menthe-sombre); }
.eo-fiche p { margin-bottom: 12px; font-size: 15.5px; line-height: 1.6; color: var(--encre-2); }
.eo-fiche-missions { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.eo-fiche-missions li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; color: var(--encre-2); }
.eo-fiche-missions li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1.5px; background: var(--menthe); }
.eo-fiche-parcours { padding-top: 12px; border-top: 1px solid var(--filet); }
.eo-fiche-lien { font-weight: 600; color: var(--cobalt); }
.eo-fermer { all: unset; cursor: pointer; position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--gris); }
.eo-fermer:hover { color: var(--encre); background: var(--creme); }
@media (prefers-reduced-motion: no-preference) { .eo-fiche:popover-open { animation: eo-ouvre .35s var(--sortie); } }
@keyframes eo-ouvre { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.eo-fin { padding: clamp(80px, 10vw, 140px) 0 24px; text-align: center; }
.eo-mot { max-width: 760px; margin: 0 auto 72px; }
.eo-mot blockquote { margin: 0; font-size: clamp(21px, 2.2vw, 28px); font-weight: 500; line-height: 1.45; letter-spacing: -.015em; color: var(--nuit); }
.eo-mot blockquote::before { content: "« "; }
.eo-mot blockquote::after { content: " »"; }
.eo-mot figcaption { margin-top: 14px; font-size: 14.5px; color: var(--gris); }
.eo-engager { max-width: 620px; margin: 0 auto; padding: clamp(32px, 4vw, 48px); border-radius: 32px; background: var(--voile-sable); }
.eo-engager h2 { font-size: clamp(26px, 3vw, 36px); }
.eo-engager p { max-width: 48ch; margin: 10px auto 22px; color: var(--encre-2); }
.eo-marge { max-width: 68ch; margin: 48px auto 0; font-size: 13px; color: var(--gris); }
@media (max-width: 860px) {
  .eo-haut { grid-template-columns: 1fr; }
  .eo-bureau { order: -1; }
  .eo-rang.n3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .eo-rang.n2, .eo-comites, .eo-deux { grid-template-columns: 1fr; }
  .eo-bureau { padding: 24px; }
  .eo-fiche { padding: 24px; }
}

/* L'aurore d'un en-tête de page se fond dans le crème avant le bas de section. */
.v-page-tete::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(251, 247, 241, 0), var(--creme) 85%); }
.v-promesses-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.v-promesses-4 strong { font-size: clamp(18px, 1.6vw, 21px); }
@media (max-width: 999px) { .v-promesses-4 { grid-template-columns: 1fr 1fr; } }

/* ── La page de l'application (fonctionnalites.html ; fonctionnalites.js change les captures) ── */
.vitrine-app { position: relative; padding: clamp(56px, 8vw, 112px) var(--gouttiere) 0; text-align: center; overflow: clip; }
.vitrine-app > * { position: relative; z-index: 1; }
.vitrine-app .eyebrow, .film-app .eyebrow, .feature-family .eyebrow, .feature-access .eyebrow, .feature-faq .eyebrow, .support-panel .eyebrow, .feature-final .eyebrow {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 650; letter-spacing: .08em; color: var(--gris); }
.vitrine-app h1 { font-size: clamp(46px, 7.6vw, 108px); font-weight: 720; letter-spacing: -.056em; line-height: .95; }
.vitrine-app h1 span { color: inherit; }
.vitrine-app .lede { max-width: 620px; margin: 26px auto 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--encre-2); text-wrap: balance; }
.vitrine-app .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.vitrine-app .fineprint { max-width: 560px; margin: 16px auto 0; }
.hero-confiance { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--gris); }
.hero-confiance li + li::before { content: "·"; margin-right: 18px; color: #b5b9c3; }
.vitrine-scene { position: relative; display: flex; justify-content: center; align-items: flex-start; height: clamp(440px, 46vw, 600px); margin-top: clamp(48px, 6vw, 80px); }
.vitrine-scene .v-ecran { margin: 0; }
.vitrine-scene .tel { --w: clamp(190px, 19vw, 250px); }
.vitrine-scene .v1 { margin-top: 70px; margin-right: -30px; rotate: -7deg; z-index: 1; }
.vitrine-scene .v2 { z-index: 3; }
.vitrine-scene .v3 { margin-top: 24px; margin-left: -24px; rotate: 4deg; z-index: 2; }
.vitrine-scene .v4 { margin-top: 90px; margin-left: -30px; rotate: 9deg; z-index: 1; }
.vitrine-app::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: clamp(140px, 16vw, 220px); pointer-events: none;
  background: linear-gradient(to bottom, rgba(251, 247, 241, 0), var(--creme) 85%); }
.vitrine-flottants .flottant { position: absolute; z-index: 4; display: grid; gap: 2px; max-width: 240px; padding: 11px 15px; border-radius: 16px; text-align: left;
  background: rgba(255, 253, 248, .92); border: 1px solid #e7dfd1; box-shadow: 0 14px 34px -16px rgba(16, 29, 53, .28); font-size: 13px; line-height: 1.4; color: var(--encre-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: v-flotter 9s ease-in-out infinite; --inclinaison: -1deg; --derive: 5px; }
.vitrine-flottants .flottant b { color: var(--nuit); font-size: 13.5px; }
.vitrine-flottants .f-khalot { top: 6%; left: max(12px, calc(50% - 560px)); }
.vitrine-flottants .f-cartes { top: 26%; right: max(12px, calc(50% - 580px)); animation-delay: -3s; --inclinaison: 1.2deg; }
.vitrine-flottants .f-devoir { top: 58%; left: max(24px, calc(50% - 520px)); animation-delay: -5s; }
.vitrine-note { position: relative; z-index: 3; margin-top: -40px; }

.film-app { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 6vw, 96px);
  width: min(var(--large), calc(100% - 2 * var(--gouttiere))); margin: var(--espace) auto 0; padding: clamp(36px, 5vw, 80px); border-radius: 40px; background: var(--voile-bleu); }
.film-texte h2 { font-size: var(--t-2); }
.film-texte p { margin-top: 18px; max-width: 520px; font-size: clamp(16.5px, 1.4vw, 18.5px); line-height: 1.55; color: var(--encre-2); }
.film-texte .fineprint { font-size: 13px; color: var(--gris); }
.film-app > p, .film-app > .fineprint { grid-column: 1 / -1; margin: 0; max-width: 760px; font-size: 15px; line-height: 1.55; color: var(--encre-2); }
.film-app > .fineprint { font-size: 13px; color: var(--gris); }

/* Le choix d'une capture : un sélecteur segmenté sous le téléphone. */
.film-ecran, .famille-ecran { display: grid; justify-items: center; gap: 14px; margin: 0; }
.capture-choix { order: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(16, 29, 53, .06); }
.capture-choix button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font: 600 13.5px var(--police); color: var(--encre-2); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.capture-choix button:hover { color: var(--nuit); }
.capture-choix button[aria-pressed="true"] { background: var(--papier); color: var(--nuit); box-shadow: 0 1px 2px rgba(16, 29, 53, .08), 0 6px 14px -8px rgba(16, 29, 53, .3); }
.capture-status { order: 3; margin: 0; font-size: 13px; color: var(--gris); }
.capture-status.capture-error { color: var(--rouge); }
.film-ecran .tel, .famille-ecran .tel { order: 1; --w: clamp(240px, 22vw, 290px); }
.tel .ecrans { display: block; }
.tel .ecrans img { display: block; width: 100%; height: auto; border-radius: calc((var(--w) - 10px) * .137); background: #fbf7f1; }
.tel .ecrans img[hidden] { display: none; }
.tel .ecrans img.actif { animation: v-capture .55s var(--sortie); }
@keyframes v-capture { from { opacity: .4; transform: scale(.985); } }
.film-ecran figcaption, .famille-ecran figcaption { order: 4; max-width: 300px; font-size: 13.5px; line-height: 1.45; color: var(--gris); text-align: center; }
.capture-grand { order: 5; font-size: 13.5px; font-weight: 600; color: var(--encre-2); }

/* Le sommaire : une barre de chapitres qui reste en vue. */
.feature-contents { position: sticky; top: 76px; z-index: 20; display: flex; gap: 2px; width: max-content; max-width: calc(100% - 2 * var(--gouttiere)); margin: clamp(64px, 8vw, 112px) auto 0;
  padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgba(251, 247, 241, .82); border: 1px solid var(--filet);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 12px 30px -22px rgba(16, 29, 53, .45); }
.feature-contents::-webkit-scrollbar { display: none; }
.feature-contents a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 550; color: var(--encre-2); text-decoration: none; transition: background-color .25s, color .25s; }
.feature-contents a span { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--gris); }
.feature-contents a:hover { color: var(--nuit); background: rgba(16, 29, 53, .05); }
.feature-contents a.actif { background: var(--nuit); color: #fff; }
.feature-contents a.actif span { color: rgba(255, 255, 255, .6); }

/* Une famille de fonctions : le texte à gauche, le téléphone qui reste en vue. */
.feature-family { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tete ecran" "liste ecran" "note ecran"; column-gap: clamp(40px, 7vw, 112px);
  width: min(var(--large), calc(100% - 2 * var(--gouttiere))); margin: clamp(96px, 11vw, 160px) auto 0; scroll-margin-top: 140px; }
.feature-family-heading { grid-area: tete; }
.feature-family-heading h2 { font-size: var(--t-2); }
.feature-family-heading > p:not(.eyebrow) { margin-top: 18px; max-width: 560px; font-size: clamp(16.5px, 1.4vw, 18.5px); line-height: 1.55; color: var(--encre-2); }
.feature-state { display: inline-flex; margin-top: 18px; padding: 6px 12px; border-radius: 999px; background: var(--voile-menthe); font-size: 13px; font-weight: 600; color: var(--menthe-sombre); }
.feature-state-invited { background: var(--voile-sable); color: #8a5a12; }
.feature-related { display: inline-block; margin: 14px 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--nuit); }
.feature-list { grid-area: liste; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--filet); }
.feature-list > div { display: grid; grid-template-columns: minmax(180px, .8fr) 1.6fr; gap: 6px 28px; padding: 20px 0; border-bottom: 1px solid var(--filet); }
.feature-list dt { font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.35; color: var(--nuit); }
.feature-list dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--encre-2); }
.feature-footnote { grid-area: note; margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--gris); }
.feature-footnote p { margin-top: 6px; }
.feature-family .famille-ecran { grid-area: ecran; align-self: start; position: sticky; top: 150px; margin-top: 8px; padding: 32px 36px 28px; border-radius: 36px; background: var(--voile-menthe); }
.feature-family:nth-of-type(even) .famille-ecran { background: var(--voile-bleu); }

/* Classe, accès : des cartes simples. */
.feature-access { width: min(var(--large), calc(100% - 2 * var(--gouttiere))); margin: clamp(96px, 11vw, 160px) auto 0; scroll-margin-top: 140px; }
.feature-access h2 { font-size: var(--t-2); }
.feature-access > p, .feature-access-heading .lede { max-width: 680px; margin-top: 18px; font-size: clamp(16.5px, 1.4vw, 18.5px); line-height: 1.55; color: var(--encre-2); }
.feature-access-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 36px; }
.feature-access-grid article { padding: 28px; border-radius: 28px; background: var(--papier); border: 1px solid var(--filet); }
.feature-access-grid h3 { font-size: 20px; }
.feature-access-grid article p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--encre-2); }
.feature-access-grid .feature-state { margin: 0 0 12px; }
.feature-access-grid .fineprint { font-size: 13px; color: var(--gris); }
.feature-access > .fineprint { margin-top: 20px; font-size: 13.5px; color: var(--gris); }

/* Questions, soutien, invitation. */
.feature-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px);
  width: min(var(--large), calc(100% - 2 * var(--gouttiere))); margin: clamp(96px, 11vw, 160px) auto 0; }
.faq-intro h2 { font-size: var(--t-2); }
.faq-intro p:not(.eyebrow) { margin: 18px 0; font-size: 17px; line-height: 1.55; color: var(--encre-2); }
.faq-intro a { font-weight: 600; color: var(--nuit); }
.faq-list details { border-bottom: 1px solid var(--filet); }
.faq-list details:first-child { border-top: 1px solid var(--filet); }
.faq-list summary { position: relative; padding: 22px 40px 22px 0; list-style: none; cursor: pointer; font-size: 17.5px; font-weight: 600; color: var(--nuit); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--gris); transition: transform .4s var(--sortie); }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { padding-bottom: 22px; font-size: 15.5px; line-height: 1.6; color: var(--encre-2); }
.support-panel { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: clamp(32px, 6vw, 88px); align-items: center;
  width: min(var(--large), calc(100% - 2 * var(--gouttiere))); margin: clamp(96px, 11vw, 160px) auto 0; padding: clamp(36px, 6vw, 80px); border-radius: 44px; background: var(--voile-sable); }
.support-intro h2 { font-size: var(--t-2); }
.support-intro p:not(.eyebrow) { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--encre-2); }
.support-about { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--nuit); }
.support-options { display: grid; gap: 12px; }
.support-option { position: relative; display: grid; gap: 4px; padding: 24px 26px; border-radius: 24px; background: var(--papier); box-shadow: var(--ombre); text-decoration: none; color: var(--encre-2); transition: box-shadow .4s; }
.support-option:hover { box-shadow: 0 1px 2px rgba(16, 29, 53, .05), 0 28px 50px -24px rgba(16, 29, 53, .4); }
.support-label { font-size: 12px; font-weight: 650; letter-spacing: .06em; color: var(--gris); }
.support-price { font-size: 30px; font-weight: 700; letter-spacing: -.04em; color: var(--nuit); }
.support-price small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--gris); }
.support-description { font-size: 15px; }
.support-link { position: absolute; right: 24px; top: 50%; translate: 0 -50%; font-weight: 600; font-size: 15px; color: var(--nuit); }
.support-donation { background: var(--nuit); }
.support-donation .support-label, .support-donation .support-description, .support-donation .support-price small { color: rgba(255, 255, 255, .7); }
.support-donation .support-price, .support-donation .support-link { color: #fff; }
.support-footnote { font-size: 13px; line-height: 1.55; color: var(--gris); }
.feature-final { position: relative; width: min(1400px, calc(100% - 24px)); margin: clamp(96px, 11vw, 160px) auto 0; padding: clamp(72px, 9vw, 128px) var(--gouttiere);
  border-radius: 44px; background: var(--nuit); color: #fff; text-align: center; overflow: hidden; }
.feature-final h2 { color: #fff; font-size: var(--t-1); }
.feature-final > p:not(.eyebrow):not(.fineprint) { max-width: 560px; margin: 20px auto 0; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.feature-final .eyebrow { color: rgba(255, 255, 255, .55); }
.feature-final .actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 24px; margin-top: 34px; }
.feature-final .button.clair { background: #fff; border-color: #fff; color: var(--nuit); }
.feature-final-link { color: rgba(255, 255, 255, .8); font-weight: 600; }
.feature-final .fineprint { margin-top: 22px; color: rgba(255, 255, 255, .5); }

@media (max-width: 999px) {
  .film-app { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .film-texte p { margin-left: auto; margin-right: auto; }
  .feature-family { grid-template-columns: 1fr; grid-template-areas: "tete" "ecran" "liste" "note"; }
  .feature-family .famille-ecran { position: static; margin-top: 28px; }
  .feature-faq, .support-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vitrine-scene { height: 380px; }
  .vitrine-scene .tel { --w: 150px; }
  .vitrine-scene .v1, .vitrine-scene .v4 { display: none; }
  .vitrine-flottants .flottant { padding: 8px 11px; font-size: 11px; max-width: 160px; }
  .vitrine-flottants .f-cartes { display: none; }
  .feature-contents { top: 70px; border-radius: 18px; }
  .feature-list > div { grid-template-columns: 1fr; }
  .feature-access-grid { grid-template-columns: 1fr; }
  .film-app, .support-panel { padding: 28px 20px; border-radius: 30px; }
  .feature-family .famille-ecran { padding: 24px 16px; border-radius: 30px; }
  .feature-final { width: calc(100% - 16px); border-radius: 30px; }
  .support-link { position: static; translate: none; margin-top: 6px; }
}
.feature-contents { transition: opacity .4s, translate .5s var(--sortie); }
.feature-contents.retire { opacity: 0; translate: 0 -12px; pointer-events: none; }

/* Deux rangées qui défilent en sens contraire : les filières, puis les écoles. */
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--nuit); }
.v-nuit-lien { margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.v-nuit .button.clair { background: #fff; border-color: #fff; color: var(--nuit); }

/* ── Le scan : la caméra recréée et les quatre temps ──────────────────── */
.v-etapes { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 999px) { .v-etapes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .v-etapes { grid-template-columns: 1fr; } }

/* ── Les films d'écran (11 oct. 2026) ─────────────────────────────────────
   Les écrans de présentation du teaser, en vidéo muette dans le même cadre
   que les captures. Le scan : le téléphone à gauche, les quatre temps à
   droite, qui suivent la vidéo ; plus d'épinglage au défilement. */
.tel > video, .v-film-dessus video { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1304; object-fit: cover;
  border-radius: calc((var(--w) - 10px) * .137); background: #fbf7f1; }
.v-film-dessus { position: absolute; z-index: 5; inset: 5px; transition: opacity .45s var(--sortie); }
.v-film-dessus.cache { opacity: 0; pointer-events: none; }
.v-scan-scene { grid-template-columns: auto minmax(0, 440px); justify-content: center; gap: 32px clamp(48px, 7vw, 112px);
  padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.v-scan-tel .tel { --w: clamp(250px, 23vw, 310px); }
.v-scan .v-etapes { grid-column: auto; grid-template-columns: 1fr; gap: 26px; margin: 0; }
.v-scan .v-etapes li { padding-top: 0; padding-left: 22px; }
.v-scan .v-etapes li::before, .v-scan .v-etapes li::after { left: 0; right: auto; top: 2px; bottom: 2px; width: 2px; height: auto; }
.v-scan .v-etapes li::after { transform: scaleY(0); transform-origin: top; }
.v-scan .v-etapes li.actif::after { transform: scaleY(1); }
@media (max-width: 999px) {
  .v-scan-scene { grid-template-columns: 1fr; justify-items: center; }
  .v-scan .v-etapes { max-width: 440px; }
}
@media (max-width: 640px) {
  .v-scan-tel .tel { --w: 240px; }
  .v-scan .v-etapes { gap: 16px; }
  .v-scan .v-etapes li { font-size: 15px; }
}

/* ── Le récit : le début du teaser, joué au défilement (vitrine.js, « Le récit ») ──
   Dimanche, 23 h : les papiers d'une semaine de prépa s'empilent, s'éparpillent,
   se rangent en grille puis se replient dans l'icône, et un cercle crème rouvre
   la page. Sans JavaScript ou avec « Réduire les animations » : la nuit et ses
   papiers éparpillés, puis la phrase et le film. Les papiers sont ceux du teaser
   (teaser/film2/film.js, scène A), positions comprises. */
.v-recit { --main-ecrite: "Noteworthy", "Bradley Hand", "Segoe Print", cursive; position: relative; margin-top: clamp(72px, 9vw, 140px); }
.v-recit-scene { position: relative; }
.v-recit-nuit { position: relative; height: 100svh; min-height: 620px; overflow: hidden; color: #fff;
  background: radial-gradient(70% 55% at 50% 45%, #1d3060 0%, #122142 45%, #0b152b 100%); }
.v-recit-papiers { position: absolute; inset: 0; perspective: 900px; }
.vp { --x: var(--xh); --y: var(--yh); --s: .95; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); }
.v-recit-halo { position: absolute; left: 50%; top: 50%; width: min(980px, 130vw); height: min(520px, 70vw); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 15, 34, .9), rgba(8, 15, 34, .6) 55%, rgba(8, 15, 34, 0)); pointer-events: none; }
.v-recit-texte { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.v-recit-texte > * { grid-area: 1 / 1; margin: 0; padding: 0 var(--gouttiere); color: #fff; }
.v-recit-texte > :not(h2) { visibility: hidden; }
.v-recit-heure { display: grid; justify-items: center; }
.v-recit-heure span { font-size: clamp(30px, 3.4vw, 50px); font-weight: 650; letter-spacing: -.035em; }
.v-recit-heure strong { font-size: clamp(112px, 15vw, 224px); font-weight: 760; letter-spacing: -.065em; line-height: .88; }
.v-recit .v-recit-ligne { max-width: 15ch; font-size: clamp(42px, 6vw, 92px); font-weight: 740; letter-spacing: -.052em; line-height: 1; text-wrap: balance;
  text-shadow: 0 6px 30px rgba(5, 10, 25, .55); }
.v-recit .v-recit-ligne em { font-style: normal; color: #2fd3b4; }
.v-recit-mini { position: absolute; left: 0; right: 0; top: clamp(92px, 11svh, 120px); margin: 0; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .72); }
.v-recit-creme { display: none; }
.v-recit-fin { display: grid; justify-items: center; gap: clamp(24px, 2.8vw, 36px); padding: clamp(72px, 9vw, 120px) var(--gouttiere) 0; text-align: center; }
.v-recit-icone { width: clamp(96px, 9vw, 132px); height: auto; border-radius: 22.5%; box-shadow: 0 30px 60px -26px rgba(16, 29, 53, .6); }
.v-recit-phrase { max-width: 16ch; margin: 0; font-size: var(--t-1); font-weight: 700; letter-spacing: -.048em; line-height: 1.02; text-wrap: balance; color: var(--nuit); }
.v-recit-phrase em { font-style: normal; color: var(--cobalt); }
.v-recit-phrase .m { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .18em; margin: -.08em -.02em -.18em; }
.v-recit-phrase .m > span { display: inline-block; }
.v-recit-film { gap: 10px; }
.v-recit-film svg { width: 13px; height: 14px; }
/* les papiers (repris du teaser) */
.rp-feuille { background: #fdfcf8; border-radius: 4px; padding: 16px 18px; font-family: Helvetica, Arial, sans-serif; color: #222; text-align: left;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .25), 0 26px 50px -12px rgba(0, 0, 0, .6); }
.rp-tt { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.rp-st { font-size: 11.5px; color: #555; margin-top: 3px; }
.rp-ln { height: 6px; background: #e6e3dc; border-radius: 3px; margin-top: 8px; }
.rp-cahier { background: repeating-linear-gradient(#fdfcf8 0 19px, #d6e2f2 19px 20px); }
.rp-postit { background: linear-gradient(170deg, #ffe98a, #f9d85a); padding: 16px 14px; font: 22px/1.15 var(--main-ecrite); color: #3a3210; text-align: left;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .55); border-radius: 2px; }
.rp-bulle { background: rgba(245, 246, 250, .95); border-radius: 20px; padding: 10px 13px; text-align: left; font: 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #111;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .55); }
.rp-ap { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 11px; color: #666; margin-bottom: 4px; }
.rp-ic { width: 18px; height: 18px; border-radius: 5px; }
/* chaque papier : sa place sans JavaScript (en largeur, en hauteur) et son inclinaison.
   La politique du site (style-src 'self') interdit les style="…" dans le HTML : tout est ici. */
.vp:nth-child(1) { --xh: -34.4vw; --yh: -25.9svh; --xv: -16.3vw; --yv: -15.6svh; --r: -8deg; }
.vp:nth-child(2) { --xh: 33.3vw; --yh: -36.3svh; --xv: 17vw; --yv: -31.8svh; --r: 3deg; }
.vp:nth-child(3) { --xh: 31.3vw; --yh: 25.9svh; --xv: 19.3vw; --yv: 13.3svh; --r: 7deg; }
.vp:nth-child(4) { --xh: -32.3vw; --yh: 29.6svh; --xv: -20.7vw; --yv: 24.6svh; --r: -5deg; }
.vp:nth-child(5) { --xh: -12.5vw; --yh: -37svh; --xv: -27.8vw; --yv: 1.9svh; --r: -12deg; }
.vp:nth-child(6) { --xh: 15.6vw; --yh: -27.8svh; --xv: 28.1vw; --yv: -6.7svh; --r: 10deg; }
.vp:nth-child(7) { --xh: 7.3vw; --yh: 38svh; --xv: 11.5vw; --yv: 34.4svh; --r: 4deg; }
.vp:nth-child(8) { --xh: -42.7vw; --yh: 5.6svh; --xv: -25.6vw; --yv: -33.5svh; --r: -6deg; }
.vp:nth-child(9) { --xh: 43.8vw; --yh: 1.9svh; --xv: 27vw; --yv: -20.4svh; --r: 8deg; }
.vp:nth-child(10) { --xh: -19.3vw; --yh: 7.4svh; --xv: -31.5vw; --yv: -24.2svh; --r: 9deg; }
.vp:nth-child(11) { --xh: -12.5vw; --yh: 41.1svh; --xv: -9.6vw; --yv: 42.1svh; --r: -3deg; }
.vp:nth-child(12) { --xh: 24.5vw; --yh: -2.8svh; --xv: 32.6vw; --yv: 40.8svh; --r: 12deg; }
.rp-colloscope { width: 250px; }
.rp-sur { font: 700 10px Helvetica, Arial, sans-serif; letter-spacing: 1.5px; color: #888; }
.rp-sur + .rp-tt { margin-top: 6px; }
.rp-groupe { width: 270px; }
.rp-groupe .rp-ic { background: #34c759; }
.rp-ds { width: 262px; }
.rp-ds .rp-ln:nth-of-type(1) { width: 92%; }
.rp-ds .rp-ln:nth-of-type(2) { width: 70%; }
.rp-ds .rp-ln:nth-of-type(3) { width: 84%; }
.rp-dm { width: 236px; padding-top: 12px; padding-bottom: 54px; }
.rp-dm .rp-tt { font: 400 19px var(--main-ecrite); letter-spacing: 0; }
.rp-dm .rp-st { font: 14px var(--main-ecrite); color: #b4432c; }
.rp-thermo { width: 148px; height: 132px; }
.rp-carte { display: flex; flex-direction: column; justify-content: center; width: 186px; height: 118px; border-radius: 8px; text-align: center; }
.rp-carte .rp-st { margin: 0; }
.rp-carte .rp-tt { margin-top: 6px; font-size: 14px; }
.rp-carte-histoire { display: grid; place-items: center; width: 150px; height: 96px; }
.rp-carte-histoire .rp-tt { margin-top: 4px; font-size: 13.5px; }
.rp-copie { position: relative; width: 286px; height: 190px; font: 16px var(--main-ecrite); color: #333; }
.rp-copie > div + div { margin-top: 2px; }
.rp-copie .rp-note { position: absolute; right: 16px; top: 12px; margin: 0; font: 700 30px var(--main-ecrite); color: #d22; }
.rp-copie .rp-cercle { position: absolute; left: 12px; top: 42px; width: 160px; height: 30px; margin: 0; border: 2px solid #d22; border-radius: 50%; }
.rp-copie .rp-remarque { margin-top: 30px; font-size: 14px; color: #d22; }
.rp-pdf { display: flex; align-items: center; gap: 12px; width: 226px; border-radius: 10px; }
.rp-pdf-ic { display: grid; place-items: center; flex: none; width: 36px; height: 44px; border-radius: 5px; background: #e5484d; color: #fff; font: 800 10px Helvetica, Arial, sans-serif; }
.rp-pdf .rp-tt { font-size: 13px; }
.rp-agenda { width: 214px; padding: 12px 14px; }
.rp-agenda > div { padding: 5px 0; border-bottom: 1px solid #eee; font: 12.5px Helvetica, Arial, sans-serif; }
.rp-agenda > .rp-mois { padding: 0; border: 0; font: 700 11px Helvetica, Arial, sans-serif; letter-spacing: 1px; color: #b4432c; }
.rp-anglais { width: 132px; height: 118px; background: linear-gradient(170deg, #ffb8c9, #f79ab2); color: #4a1222; }
.rp-rappel { width: 250px; }
.rp-rappel .rp-ic { background: #8e8e93; }
@media (max-width: 1100px) { .vp { --s: .78; } }
@media (max-aspect-ratio: 4/5) { .vp { --x: var(--xv); --y: var(--yv); --s: .66; } }

/* la version jouée : la section s'allonge, la scène reste collée en haut de l'écran */
.v-recit.anime { height: 435svh; }
.v-recit.anime .v-recit-scene { position: sticky; top: 0; height: 100svh; overflow: clip; }
.v-recit.anime .v-recit-nuit { position: absolute; inset: 0; height: auto; min-height: 0; }
.v-recit.anime .vp { opacity: 0; transform: none; will-change: transform, opacity, filter; }
.v-recit.anime .v-recit-texte > * { visibility: visible; opacity: 0; will-change: transform, opacity; }
.v-recit.anime .v-recit-texte > .v-recit-heure { opacity: 1; }
.v-recit.anime .v-recit-mini, .v-recit.anime .v-recit-halo { opacity: 0; }
.v-recit.anime .v-recit-creme { display: block; position: absolute; inset: 0; background: var(--creme); clip-path: circle(0% at 50% 50%); }
.v-recit.anime .v-recit-fin { position: absolute; inset: 0; align-content: center; padding: 0 var(--gouttiere); pointer-events: none; }
.v-recit.anime .v-recit-fin > * { opacity: 0; }

/* le film, en plein écran et avec le son, seulement à la demande */
.v-teaser { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(6, 11, 22, .94); color: #fff; place-items: center; overscroll-behavior: contain; }
.v-teaser[open] { display: grid; }
.v-teaser::backdrop { background: transparent; }
.v-teaser video { display: block; border-radius: 18px; background: #0b152b; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8); }
.v-teaser.vertical video { height: min(88svh, 170vw); aspect-ratio: 9 / 16; }
.v-teaser.horizontal video { width: min(92vw, 1280px, 150svh); aspect-ratio: 16 / 9; }
.v-teaser-fermer { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background var(--rapide); }
.v-teaser-fermer:hover { background: rgba(255, 255, 255, .24); }
.v-teaser-fermer svg { width: 16px; height: 16px; }
html.film-ouvert { overflow: hidden; }

/* ── Les chapitres après le récit (accueil-film.js) ────────────────────────
   Chaque section marquée data-chapitre s'allonge ; sa scène reste collée et
   remonte d'un écran sous la fin du chapitre précédent, invisible jusqu'à ce
   qu'elle se colle. Les décors sont dans un cadre de 960 × 540 (540 × 960 en
   hauteur) mis à l'échelle. Sans JavaScript ou avec « Réduire les
   animations », rien de ceci ne s'applique : les sections restent fixes. */
.vf-lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.v-section.anime[data-chapitre] { position: relative; z-index: 2; width: auto; max-width: none; margin: -100svh 0 0; }
.v-section.anime[data-chapitre] > :not(.vf-scene, .vf-lu) { display: none; }
.vf-attente { pointer-events: none; }
/* en attente, la scène est déjà peinte (images décodées, calques prêts) mais imperceptible : sa première image ne clignote pas */
.vf-attente .vf-scene { opacity: .001; }
.vf-scene { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--creme); color: var(--nuit); }
.vf-appareil, .vf-sombre { position: absolute; inset: 0; }
.vf-sombre { background: radial-gradient(75% 55% at 50% 45%, #1c2336 0%, #0c1019 72%); }
.vf-cadre { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; }
.vf-cam { position: absolute; inset: 0; transform-origin: 50% 50%; perspective: 1100px; }
.vf-voyageurs { position: absolute; inset: 0; pointer-events: none; }
.vf-a { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.vf-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.vf-icone { position: absolute; left: 0; top: 0; overflow: hidden; border-radius: 22.5%; box-shadow: 0 30px 60px -26px rgba(16, 29, 53, .6); transition: box-shadow .3s; }
.vf-icone.vf-sans-ombre { box-shadow: none; }
.vf-icone img { display: block; width: 100%; height: 100%; }
.vf-icone i { position: absolute; inset: 0; background: #fff; opacity: 0; }
.vf-bague { position: absolute; left: 0; top: 0; border: 4px solid rgba(255, 255, 255, .95); border-radius: 50%; opacity: 0; }

/* le texte : le titre de la section mot à mot, et ses quatre temps */
.vf-textes { pointer-events: none; }
.vf-colonne { position: absolute; left: 40px; top: 0; bottom: 0; width: 390px; display: flex; flex-direction: column; justify-content: center; gap: 34px;
  color: var(--vf-encre, var(--nuit)); }
.vitrine .vf-titre { margin: 0; font-size: 52px; font-weight: 740; letter-spacing: -.05em; line-height: 1.02; color: inherit; text-wrap: balance; }
.vf-titre em { font-style: normal; color: var(--cobalt); }
.vf-m { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .03em .18em; margin: -.08em -.03em -.18em; }
.vf-m > span { display: inline-block; transform: translateY(112%); will-change: transform; }
.v-scan .vf-etapes { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.v-scan .vf-etapes li, .v-scan .vf-etapes li.actif { position: relative; padding: 0 0 0 16px; font-size: 12px; line-height: 1.45; color: inherit; opacity: .42; transition: opacity .35s; }
.v-scan .vf-etapes li strong, .v-scan .vf-etapes li.actif strong { margin-bottom: 2px; font-size: 13.5px; color: inherit; }
.v-scan .vf-etapes li.actif { opacity: 1; }
.v-scan .vf-etapes li::before { background: currentColor; opacity: .18; }
.v-scan .vf-etapes li::after { display: none; }
.vf-jauge { position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: currentColor; transform: scaleY(0); transform-origin: top; }
.haut .vf-colonne { left: 36px; right: 36px; top: 64px; bottom: 40px; width: auto; justify-content: space-between; gap: 0; text-align: center; }
.vitrine .haut .vf-titre { font-size: 46px; }
.v-scan .haut .vf-etapes li, .v-scan .haut .vf-etapes li.actif { grid-area: 1 / 1; padding: 0; font-size: 21px; opacity: 0; }
.v-scan .haut .vf-etapes li strong, .v-scan .haut .vf-etapes li.actif strong { font-size: 24px; }
.v-scan .haut .vf-etapes li.actif { opacity: 1; }
.v-scan .haut .vf-etapes li::before, .haut .vf-jauge { display: none; }

/* le scan : l'emploi du temps sur papier, le viseur, la semaine de l'app (plan D du teaser) */
.v-scan.anime { height: 346svh; }
.vf-papier { width: 400px; padding: 16px 14px 14px; border-radius: 3px; background: #fdfdfb; font-family: Helvetica, Arial, sans-serif; color: #1d1d1d;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 22px 40px -10px rgba(40, 30, 15, .28), 0 60px 80px -40px rgba(40, 30, 15, .25); }
.vf-ent { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1.5px solid #222; }
.vf-ent b { font-size: 13px; }
.vf-ent span { font-size: 10px; color: #444; }
.vf-edt { display: grid; grid-template-columns: 24px repeat(6, minmax(0, 1fr)); grid-template-rows: 16px repeat(10, 38px); border: 1px solid #333; }
.vf-edt > div { padding: 2px 3px; border-right: .5px solid #bbb; border-bottom: .5px solid #ddd; font-size: 7.4px; line-height: 1.15; }
.vf-edt .vf-j { background: #eee; border-bottom: 1px solid #333; text-align: center; font-size: 8px; font-weight: 700; }
.vf-edt .vf-h { padding-right: 3px; background: #f7f7f7; text-align: right; font-size: 7px; color: #555; }
.vf-edt .vf-c { margin: 1px; overflow: hidden; border: .8px solid #333; border-radius: 1px; background: #fff; }
.vf-edt .vf-c b { display: block; font-size: 7.8px; }
.vf-edt .vf-c.vf-g { background: repeating-linear-gradient(135deg, #f1f1f1 0 3px, #fafafa 3px 6px); }
.vf-viseur { width: 452px; height: 500px; }
.vf-coin { position: absolute; width: 44px; height: 44px; border: 0 solid #fff; }
.vf-hg { left: 0; top: 0; border-width: 5px 0 0 5px; border-radius: 16px 0 0 0; }
.vf-hd { right: 0; top: 0; border-width: 5px 5px 0 0; border-radius: 0 16px 0 0; }
.vf-bg { left: 0; bottom: 0; border-width: 0 0 5px 5px; border-radius: 0 0 0 16px; }
.vf-bd { right: 0; bottom: 0; border-width: 0 5px 5px 0; border-radius: 0 0 16px 0; }
.vf-trait { width: 420px; height: 4px; border-radius: 3px; background: var(--menthe); box-shadow: 0 0 22px 8px rgba(26, 184, 156, .4); }
.vf-semaine { width: 472px; padding: 22px 18px 18px; border-radius: 28px; background: #fff; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: var(--nuit);
  box-shadow: 0 2px 4px rgba(16, 29, 53, .05), 0 18px 40px -8px rgba(16, 29, 53, .18), 0 50px 90px -30px rgba(16, 29, 53, .25); }
.vf-sem-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.vf-sem-tete b { font: 800 22px -apple-system, "SF Pro Display", system-ui, sans-serif; letter-spacing: -.6px; }
.vf-pastille { padding: 4px 10px; border-radius: 20px; background: #dcf5ee; font-size: 12.5px; font-weight: 650; color: var(--menthe-sombre); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s; }
.vf-pastille.vf-plus { opacity: 1; }
.vf-sem { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.vf-jr { padding-bottom: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--gris); }
.vf-jr b { display: block; margin-top: 1px; font: 700 20px -apple-system, "SF Pro Display", system-ui, sans-serif; letter-spacing: -.5px; color: var(--nuit); }
.vf-jr.vf-on b { width: 34px; margin: 2px auto 0; border-radius: 12px; background: var(--cobalt); color: #fff; }
.vf-col { position: relative; height: 380px; border-radius: 12px; background: #f6f3ee; }
.vf-bl { position: absolute; left: 3px; right: 3px; padding: 5px 6px; overflow: hidden; border-radius: 9px; font: 650 10px/1.15 -apple-system, "SF Pro Text", system-ui, sans-serif; transform-origin: 50% 50%; }
.vf-cours { background: #e4e8f0; color: #3e4a60; }
.vf-rev { background: #dcf5ee; color: var(--menthe-sombre); box-shadow: inset 3px 0 0 var(--menthe); }
.vf-kh { background: #faefd7; color: #8a6216; box-shadow: inset 3px 0 0 #d9a23a; }
.vf-ds { background: #fde8e2; color: #b4432c; box-shadow: inset 3px 0 0 #ee6a4f; }
.vf-voyageur { position: absolute; overflow: hidden; }
.vf-v-pap, .vf-v-app { position: absolute; inset: 0; }
.vf-v-pap { padding: 2px 3px; font: 700 7.8px/1.15 Helvetica, Arial, sans-serif; color: #1d1d1d; }
.vf-v-app { padding: 5px 6px; font: 650 10px/1.15 -apple-system, "SF Pro Text", system-ui, sans-serif; opacity: 0; }

/* le jour J : la veille, la copie, les cartes (captures veille-ds, copy, cards, cards-answer), en éléments isolés */
.v-trio.anime { height: 436svh; }
.vf-etapes { display: grid; gap: 14px; }
.vf-etapes .vf-etape { position: relative; padding-left: 16px; opacity: .42; transition: opacity .35s; text-align: left; }
.vf-etapes .vf-etape.actif { opacity: 1; }
.vf-etape::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: currentColor; opacity: .18; }
.vitrine .vf-etape h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; color: inherit; }
.vf-etape p { max-width: none; margin: 0; font-size: 12px; line-height: 1.45; color: inherit; }
.haut .vf-etapes .vf-etape { grid-area: 1 / 1; padding: 0; opacity: 0; text-align: center; }
.haut .vf-etapes .vf-etape.actif { opacity: 1; }
.vitrine .haut .vf-etape h3 { font-size: 24px; }
.haut .vf-etape p { font-size: 21px; }
.haut .vf-etape::before, .haut .vf-etape .vf-jauge { display: none; }
.vf-ui { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; }
.vf-heure, .vf-notif, .vf-veille, .vf-dernier, .vf-copie-tete, .vf-remarque, .vf-carte, .vf-bouton, .vf-note, .vf-frise { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; text-align: left; }
.vf-heure { display: grid; justify-items: center; color: var(--nuit); }
.vf-heure span { font-size: 17px; font-weight: 600; color: var(--gris); }
.vf-heure b { font: 700 104px/1 -apple-system, "SF Pro Display", system-ui, sans-serif; letter-spacing: -.045em; }
.vf-notif { width: 400px; padding: 13px 15px 14px; border-radius: 24px; background: rgba(248, 249, 252, .94); color: #111;
  box-shadow: 0 2px 4px rgba(16, 29, 53, .06), 0 24px 50px -16px rgba(16, 29, 53, .35); }
.vf-notif-tete { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #555; }
.vf-notif-tete img { width: 26px; height: 26px; border-radius: 7px; }
.vf-notif-tete span:first-of-type { flex: 1; letter-spacing: .3px; }
.vf-notif-tete span:last-child { font-weight: 400; color: #777; }
.vf-notif-titre { margin-top: 8px; font-size: 16px; font-weight: 650; letter-spacing: -.2px; }
.vf-notif-corps { margin-top: 2px; font-size: 15px; line-height: 1.34; color: #222; }
/* le surligneur passe d'une ligne à l'autre : le fond d'un élément en ligne court sur toutes ses lignes */
.vf-sl { background-image: linear-gradient(#bfeee1, #bfeee1); background-repeat: no-repeat; background-size: 0% 100%; border-radius: 3px; }
.vf-vol { position: absolute; overflow: hidden; visibility: hidden; }
.vf-vol-bloc { inset: 0; border-radius: inherit; }
.vf-vol-notif { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; }
.vf-vol-notif .vf-notif { box-shadow: none; }
.vf-veille { width: 420px; padding: 20px 22px 22px; border-radius: 26px; color: #fff;
  background: linear-gradient(160deg, #2b3a5c 0%, #172544 55%, #0f1b33 100%); box-shadow: 0 24px 50px -18px rgba(16, 29, 53, .55); }
.vf-veille-pastille { display: inline-block; padding: 5px 11px; border-radius: 20px; background: #f6dfae; color: #3d2b06; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.vf-veille-quand { margin-top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; color: rgba(255, 255, 255, .75); }
.vf-veille-titre { margin-top: 6px; font: 800 30px/1.05 -apple-system, "SF Pro Display", system-ui, sans-serif; letter-spacing: -.8px; }
.vf-veille-sous { margin-top: 8px; font-size: 15px; font-weight: 600; color: #8fb0ff; }
.vf-veille p { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.vf-dernier { width: 420px; padding: 16px 18px; border-radius: 22px; background: #fbf1e3; color: var(--nuit); box-shadow: 0 14px 34px -18px rgba(16, 29, 53, .35); }
.vf-dernier-tete { display: flex; justify-content: space-between; align-items: baseline; }
.vf-dernier-tete b { font-size: 17px; font-weight: 750; }
.vf-dernier-tete span { font-size: 13px; color: var(--gris); }
.vf-dernier-ligne { display: flex; gap: 10px; margin-top: 10px; font-size: 15px; line-height: 1.35; }
.vf-dernier-ligne span { font-weight: 700; color: #e2793a; }
.vf-copie-tete { width: 420px; color: var(--nuit); }
.vf-copie-sur { font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; color: var(--menthe-sombre); }
.vf-copie-titre { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.vf-copie-titre > b { font: 800 26px -apple-system, "SF Pro Display", system-ui, sans-serif; letter-spacing: -.6px; }
.vf-copie-titre span { font-size: 15px; color: var(--gris); }
.vf-copie-titre span b { font: 800 34px -apple-system, "SF Pro Display", system-ui, sans-serif; color: var(--nuit); }
.vf-copie { width: 420px; padding: 16px 26px 20px; border-radius: 6px; font: 21px/32px "Noteworthy", "Bradley Hand", "Segoe Print", cursive; color: #26324d; text-align: left;
  background: #fdfcf8 repeating-linear-gradient(transparent 0 31px, #d6e2f2 31px 32px) 0 16px; box-shadow: 0 2px 3px rgba(0, 0, 0, .08), 0 26px 50px -18px rgba(16, 29, 53, .35); }
.vf-copie sub, .vf-copie sup, .vf-maths sub, .vf-maths sup, .vf-face-q sub { font-size: .62em; line-height: 0; }
.vf-entoure { position: relative; display: inline-block; }
.vf-entoure svg { position: absolute; left: -12px; top: -4px; width: calc(100% + 24px); height: calc(100% + 8px); overflow: visible; }
.vf-entoure ellipse { fill: none; stroke: #d22; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.vf-rond { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #e84545; color: #fff; font: 700 12px/1 -apple-system, system-ui, sans-serif; }
.vf-copie > .vf-rond { position: absolute; right: 16px; top: 14px; transform: scale(0); }
.vf-remarque { width: 420px; padding: 16px 18px 18px; border-radius: 22px; background: #fff; color: var(--nuit);
  box-shadow: 0 2px 4px rgba(16, 29, 53, .05), 0 22px 46px -18px rgba(16, 29, 53, .3); }
.vf-remarque-sur { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 1.3px; color: var(--gris); }
.vf-remarque-texte { margin-top: 8px; font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.vf-pli { height: 0; overflow: hidden; }
.vf-reflexe { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #eef2fd; font-size: 14.5px; line-height: 1.38; color: #1d2840; opacity: 0; }
.vf-reflexe-sur { margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: 1.3px; color: var(--cobalt); }
.vf-dos { width: 380px; height: 300px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(16, 29, 53, .06), 0 16px 34px -18px rgba(16, 29, 53, .3); }
.vf-carte { width: 380px; height: 300px; color: var(--nuit); transform-style: preserve-3d; will-change: transform; }   /* pas d'opacité ici : elle aplatirait la 3D */
.vf-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px 20px; border-radius: 24px; background: #fff; text-align: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 2px 4px rgba(16, 29, 53, .05), 0 24px 50px -18px rgba(16, 29, 53, .32); }
.vf-verso { transform: rotateY(180deg); }
.vf-face-tete { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--gris); }
.vf-puce { padding: 4px 10px; border-radius: 20px; background: #e8edff; color: var(--cobalt); }
.vf-puce-r { background: #dcf5ee; color: var(--menthe-sombre); }
.vf-face-corps { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; }
.vf-face-sur { font-size: 15px; color: var(--gris); }
.vf-maths { font: italic 400 23px/1.45 "Times New Roman", Times, serif; }
.vf-face-q { font: 750 19px/1.25 -apple-system, "SF Pro Display", system-ui, sans-serif; letter-spacing: -.3px; }
.vf-face-txt { font-size: 15px; line-height: 1.4; color: #2a3348; }
.vf-frac { display: inline-grid; margin: 0 2px; vertical-align: middle; line-height: 1.15; text-align: center; }
.vf-frac > span:first-child { padding: 0 3px; border-bottom: 1.2px solid currentColor; }
.vf-bouton { width: 380px; padding: 15px; border-radius: 30px; background: var(--cobalt); color: #fff; text-align: center; font-size: 16px; font-weight: 650;
  box-shadow: 0 14px 28px -12px rgba(51, 92, 245, .6); }
.vf-note { display: grid; place-items: center; width: 92px; padding: 10px 0; border-radius: 18px; }
.vf-note b { font-size: 14px; font-weight: 700; }
.vf-note span { font-size: 13px; }
.vf-b1 { background: #f8ded9; color: #e84545; }
.vf-b2 { background: #faebd5; color: #d98a14; }
.vf-b3 { background: #dfe1f2; color: #335cf5; }
.vf-b4 { background: #dbeee5; color: #148f79; }
.vf-frise { width: 400px; height: 80px; }
.vf-frise-ligne { position: absolute; left: 0; right: 0; top: 18px; height: 2px; border-radius: 2px; background: rgba(16, 29, 53, .16); transform-origin: 0 50%; transform: scaleX(0); }
.vf-point { position: absolute; top: 0; display: grid; justify-items: center; width: 96px; margin-left: -48px; text-align: center; opacity: 0; transition: opacity .25s; }
.vf-point i { width: 10px; height: 10px; margin-top: 14px; border-radius: 50%; background: var(--cobalt); }
.vf-point b { margin-top: 8px; font-size: 13px; font-weight: 650; color: var(--nuit); }
.vf-point span { font-size: 12px; font-weight: 650; color: var(--menthe-sombre); }
.vf-frise small { position: absolute; left: -40px; right: -40px; top: 78px; text-align: center; font-size: 12px; color: var(--gris); }
.vf-mini { width: 34px; height: 26px; border-radius: 6px; background: #fff; box-shadow: 0 6px 14px -6px rgba(16, 29, 53, .45), inset 0 0 0 1.5px var(--cobalt); }

/* ── L'annonce, sous le haut de page ─────────────────────────────────────
   Écrite par deploy/equipe-actualites-vers-site.py pendant 45 jours après un
   article « à la une » de association/site/actualites.json. */
.annonce-equipe { position: relative; z-index: 4; width: min(760px, calc(100% - 2 * var(--gouttiere))); margin: clamp(28px, 4vw, 48px) auto 0; }
.annonce-carte { display: grid; gap: 6px; padding: 22px 26px; border-radius: var(--r-2); background: var(--papier);
  border: 1px solid var(--filet); box-shadow: var(--ombre); color: var(--encre); text-decoration: none;
  transition: transform var(--rapide) var(--sortie); }
.annonce-carte:hover { transform: translateY(-2px); }
.annonce-carte .eyebrow { margin: 0; color: var(--menthe-sombre); font-size: var(--t-mini); font-weight: 650; letter-spacing: .02em; }
.annonce-titre { margin: 0; color: var(--nuit); font-size: var(--t-4); font-weight: 680; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.annonce-texte { margin: 0; color: var(--encre-2); font-size: var(--t-petit); line-height: 1.5; }
.annonce-lien { margin-top: 6px; color: var(--cobalt); font-size: var(--t-petit); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .annonce-carte { transition: none; } .annonce-carte:hover { transform: none; } }