/* TP Exchange — styles communs.
   La mise en page de chaque section est écrite directement dans le HTML (fidèle à la maquette
   Claude Design). Ce fichier regroupe la base, les animations, les survols et les états
   interactifs (FAQ, simulateur, aperçu du classeur, formulaire). */

/* ---------- Polices hébergées sur le site (Inter et Lora, licence SIL Open Font) ---------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url('../fonts/inter-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url('../fonts/lora-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../fonts/lora-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Base typographique de la maquette (système « Nocturne ») */
html { scroll-behavior: smooth; }
/* Espacement vertical unique entre les sections (deux sections voisines = 2 × --sec) */
:root {
  --sec: clamp(56px, 7vw, 92px);          /* entre deux sections : 2 × --sec */
  --gap-head: clamp(36px, 4vw, 48px);     /* en-tête de section → contenu */
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: #223a44;
  color: #eef6f7;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 5.6px;
}
p { margin: 0 0 8.4px; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: #3fbfae; text-decoration: none; text-underline-offset: 3px; }
a:hover { color: #7fdccf; }
input[type=range] { accent-color: #3fbfae; width: 100%; }
button { font-family: inherit; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #3fbfae; outline-offset: 2px; }
::selection { background: rgba(63,191,174,0.30); }

.site {
  min-height: 100vh;
  background: #223a44;
  color: #eef6f7;
  overflow-x: clip;
  isolation: isolate;
}
/* Fond statique : un décor fixé à l'écran (bleu nuit, grande lueur turquoise en bas à droite, reflet chaud en haut à gauche).
   Tout le contenu défile par-dessus, le fond ne bouge pas. */
.site::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48vw 42vh at 74% 80%, rgba(127,220,207,0.10), transparent 72%),
    radial-gradient(80vw 75vh at 70% 90%, rgba(63,191,174,0.14), transparent 70%),
    radial-gradient(60vw 55vh at 4% 0%, rgba(245,212,142,0.08), transparent 70%),
    radial-gradient(55vw 70vh at -6% 58%, rgba(230,179,79,0.075), transparent 70%),
    radial-gradient(120vw 90vh at 50% 40%, rgba(40,67,80,0.9), rgba(34,58,68,0) 75%),
    #1e323c;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 6px; background: #eef6f7; color: #122028;
}
.skip-link:focus { top: 12px; color: #122028; }

/* ---------- Animations ---------- */
@keyframes tpDraw { to { stroke-dashoffset: 0; } }
@keyframes tpHalo {
  0%, 100% { opacity: .7; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); }
}
@keyframes tpMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tpBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tpPulse { 0%, 100% { r: 6; opacity: 1; } 50% { r: 10; opacity: .6; } }

.halo {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

/* ---------- Survols ---------- */
.h-nav:hover { color: #eef6f7 !important; }
.h-logo:hover { color: #eef6f7 !important; }
.h-btn:hover { background: #fbf9f4 !important; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.45); color: #122028 !important; }
.h-btn-cta:hover { background: #fbf9f4 !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.45) !important; color: #122028 !important; }
.h-ghost:hover { background: rgba(233,246,247,0.07) !important; color: #e8eff1 !important; }
.h-ghost2:hover { background: rgba(233,246,247,0.09) !important; color: #ffffff !important; }
.h-card:hover { color: #e8eff1 !important; }
.h-lift:hover { transform: translateY(-4px) !important; }
.h-tint:hover { background: rgba(233,246,247,0.04) !important; }
.h-tint2:hover { background: rgba(233,246,247,0.09) !important; }
.h-link:hover { color: #a8ece2 !important; }
.h-mail:hover { background: rgba(18,32,40,0.5) !important; color: #eef6f7 !important; }
.h-box:hover { border-color: rgba(63,191,174,0.4) !important; background: rgba(18,32,40,0.55) !important; color: #eef6f7 !important; }
.h-foot:hover { color: #eef6f7 !important; }
.h-sujet:hover { border-color: rgba(63,191,174,0.5) !important; }
.h-reset:hover { background: rgba(233,246,247,0.09) !important; }
.field:focus { border-color: #3fbfae !important; }
.field::placeholder { color: #a4b8bf; }

/* ---------- En-tête : menu déroulant sur mobile ---------- */
.nav-toggle { display: none; }
.nav-extra { display: none; }
@media (max-width: 760px) {
  .nav-sep { display: none; }
  .header-row { gap: 10px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  /* Sur mobile, l'achat passe par le bouton du haut de page puis par la barre d'achat collante. */
  .header-cta { display: none !important; }

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    order: 2; margin-left: auto; width: 40px; height: 40px; padding: 0 10px; flex: none; cursor: pointer;
    border-radius: 6px; border: 1px solid rgba(233,246,247,0.16); background: transparent;
  }
  .nav-toggle span { display: block; height: 1.5px; border-radius: 1px; background: #eef6f7; transition: transform .3s, opacity .3s; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Sans JavaScript, le menu reste visible en liste ; avec, il s'ouvre au clic. */
  .site-nav {
    order: 3; width: 100%; flex-direction: column; flex-wrap: nowrap !important;
    margin: 0 !important; padding: 4px 0 6px;
    border-top: 1px solid rgba(233,246,247,0.15);
  }
  .js .site-nav { display: none !important; }
  .js .nav-open .site-nav { display: flex !important; }
  .site-nav a { padding: 13px 2px !important; font-size: 13px !important; border-bottom: 1px solid rgba(233,246,247,0.09); }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a > span { left: 2px !important; bottom: 7px !important; transform: none !important; }
  .nav-extra { display: block; }
}
@media (min-width: 761px) { .nav-toggle { display: none !important; } }

/* ---------- Barre d'achat collante (mobile) ---------- */
.buybar { display: none; }
@media (max-width: 760px) {
  .buybar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45;
    display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px;
    border-radius: 12px; background: rgba(29,49,59,0.94); border: 1px solid rgba(230,179,79,0.45);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    visibility: hidden; opacity: 0; transform: translateY(16px);
    transition: opacity .3s, transform .3s, visibility 0s linear .3s;
  }
  .buybar.is-visible { visibility: visible; opacity: 1; transform: none; transition: opacity .3s, transform .3s; }
  .buybar-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .buybar-txt b { font-weight: 500; font-size: 14px; color: #eef6f7; }
  .buybar-txt span { font-size: 12px; color: #bdcfd4; }
  .buybar-btn {
    margin-left: auto; flex: none; padding: 12px 16px; border-radius: 6px; white-space: nowrap;
    color: #122028; background: #f4f1ea;
    font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .buybar-btn:hover { color: #122028; background: #fbf9f4; }
}

/* ---------- Halos : figés sur mobile pour ménager la batterie ---------- */
@media (max-width: 760px) {
  .halo { animation: none !important; opacity: .85; }
}

/* ---------- Accueil : en-têtes du relevé masqués sur mobile ---------- */
@media (max-width: 720px) {
  .releve-head { display: none !important; }
}

/* ---------- Offre : case de consentement avant paiement ---------- */
.consent {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 14px 16px; border-radius: 10px;
  background: rgba(18,32,40,0.45); border: 1px solid rgba(233,246,247,0.17);
  font-size: 13px; line-height: 1.5; color: #ccd9dd;
  transition: border-color .25s, background .25s;
}
.consent:hover { border-color: rgba(63,191,174,0.4); }
.consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #3fbfae; cursor: pointer; }
.consent a { color: #6fdccd; text-decoration: underline; }
.consent.is-invalid { border-color: #ef8a7e; background: rgba(239,138,126,0.08); }

/* ---------- Page Livre : l'éventail de pages s'ouvre en grand ---------- */
.fan { position: relative; }
.fan-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fan-hit { fill: transparent; cursor: zoom-in; pointer-events: all; }
/* Feuille survolée : la vraie page se pose sur sa feuille (perspective calculée en JS), puis s'avance. */
.fan-lift { position: absolute; inset: 0; pointer-events: none; }
.fan-lift img {
  position: absolute; left: 0; top: 0; width: 720px; height: 1019px; max-width: none; display: block;
  transform-origin: 0 0; border-radius: 8px; opacity: 0;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .3s ease, filter .55s ease;
  will-change: transform, opacity; backface-visibility: hidden;
}
.fan-lift img.is-hot { opacity: 1; filter: drop-shadow(0 28px 34px rgba(0,0,0,0.55)); }
@media (hover: none), (prefers-reduced-motion: reduce) { .fan-lift { display: none; } }

/* Légende sous l'éventail : 5 bulles posées sur une courbe de cours (tracée en JS), chacune sous sa feuille. */
@property --ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.fan-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(36px, 5vw, 60px); }
.fan-legend { --z: 1px; --k: 1px; position: relative; align-self: stretch; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 12px; padding-bottom: 6px; }
.fan-legend::before {
  content: ""; position: absolute; inset: -12% -3%; pointer-events: none;
  background: none;
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent);
}
.fan-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.fan-line-path, .fan-line-glow { fill: none; stroke: url(#fanGrad); stroke-linecap: round; transition: stroke-dashoffset 2.2s cubic-bezier(.55,.1,.25,1); }
.fan-line-path { stroke-width: 2; }
.fan-line-glow { stroke-width: 10; opacity: .16; filter: blur(6px); }
.fan-comet { fill: #fff6dc; opacity: 0; filter: drop-shadow(0 0 5px #f5d48e) drop-shadow(0 0 12px rgba(230,179,79,0.8)); transition: opacity .8s 2.2s; }
.fan-end { fill: #e6b34f; opacity: 0; filter: drop-shadow(0 0 8px rgba(230,179,79,0.7)); transition: opacity .4s 2s; }
.fan-end-ring { fill: none; stroke: #e6b34f; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-drawn .fan-comet, .is-drawn .fan-end { opacity: 1; }
.is-drawn .fan-end-ring { animation: endPulse 2.6s ease-out 2.2s infinite; }
@keyframes endPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }

.fan-leaf {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px;
  padding: calc(var(--y) * var(--k)) 0 0; border: 0; background: none; color: #eef6f7; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fan-leaf:focus-visible { outline: none; }
.fan-leaf:focus-visible .fan-bubble { outline: 2px solid #7fdccf; outline-offset: 5px; }
.fan-leaf:nth-of-type(1) { --s: 112; --y: 140; --i: 0; }
.fan-leaf:nth-of-type(2) { --s: 126; --y: 70; --i: 1; }
.fan-leaf:nth-of-type(3) { --s: 150; --y: 92; --i: 2; }
.fan-leaf:nth-of-type(4) { --s: 122; --y: 38; --i: 3; }
.fan-leaf:nth-of-type(5) { --s: 134; --y: 0; --i: 4; }
/* Apparition : chaque bulle éclot quand la courbe l'atteint. */
.fan-orb { display: block; transition: opacity .6s, scale .8s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.25s + var(--i) * .38s); }
html.js .fan-legend:not(.is-drawn) .fan-orb { opacity: 0; scale: .35; }
.fan-bubble {
  --d: calc(var(--s) * var(--z));
  position: relative; width: var(--d); height: var(--d); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1.5px solid transparent;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.12), transparent 55%) padding-box,
    linear-gradient(160deg, #375667, #263f4a) padding-box,
    conic-gradient(from var(--ring), rgba(63,191,174,0.95), rgba(230,179,79,0.9) 28%, rgba(63,191,174,0.08) 52%, rgba(63,191,174,0.08) 80%, rgba(63,191,174,0.95)) border-box;
  box-shadow: 0 22px 44px -20px rgba(0,0,0,0.7), 0 0 0 8px rgba(63,191,174,0.035);
  animation: orbFloat 6s ease-in-out infinite, ringSpin 9s linear infinite;
  animation-delay: calc(var(--i) * -1.3s), calc(var(--i) * -1.8s);
  transition: scale .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
@keyframes orbFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes ringSpin { to { --ring: 360deg; } }
.fan-bubble-p { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #e6b34f; }
.fan-bubble-n { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: calc(var(--d) * 0.3); line-height: 1; letter-spacing: -0.02em; color: #eef6f7; }
/* Bulle centrale claire : la méthode, cœur du livre (même famille que la tuile « Tu débutes »). */
.fan-leaf:nth-of-type(3) .fan-bubble {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.75), transparent 55%) padding-box,
    linear-gradient(155deg, #f8e8c2, #f3efdf 50%, #dff3ee) padding-box,
    conic-gradient(from var(--ring), #f5d48e, #ffffff 25%, rgba(245,212,142,0.25) 52%, rgba(245,212,142,0.25) 80%, #f5d48e) border-box;
  box-shadow: 0 24px 50px -20px rgba(230,179,79,0.5), 0 0 0 8px rgba(245,212,142,0.06);
}
.fan-leaf:nth-of-type(3) .fan-bubble-p { color: #94650f; }
.fan-leaf:nth-of-type(3) .fan-bubble-n { color: #122028; }
.fan-leaf:hover .fan-bubble, .fan-leaf.is-hot .fan-bubble, .fan-leaf:focus-visible .fan-bubble {
  scale: 1.09; box-shadow: 0 26px 50px -20px rgba(0,0,0,0.7), 0 0 0 10px rgba(63,191,174,0.07), 0 0 46px rgba(63,191,174,0.35);
}
.fan-leaf:nth-of-type(3):hover .fan-bubble, .fan-leaf:nth-of-type(3).is-hot .fan-bubble, .fan-leaf:nth-of-type(3):focus-visible .fan-bubble {
  box-shadow: 0 26px 50px -20px rgba(230,179,79,0.55), 0 0 0 10px rgba(245,212,142,0.1), 0 0 50px rgba(245,212,142,0.42);
}
.fan-leaf-t {
  font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.25; letter-spacing: -0.005em; color: #cfdde1; max-width: 15ch; text-wrap: balance;
  transition: color .3s, opacity .6s calc(.45s + var(--i) * .38s);
}
html.js .fan-legend:not(.is-drawn) .fan-leaf-t { opacity: 0; }
.fan-leaf:hover .fan-leaf-t, .fan-leaf.is-hot .fan-leaf-t { color: #ffffff; }
/* Capsule de téléchargement, centrée sous la constellation. */
.fan-bar {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px;
  padding: 8px 8px 8px 10px; border-radius: 999px; border: 1px solid rgba(233,246,247,0.17);
  background: radial-gradient(260px 80px at 100% 50%, rgba(63,191,174,0.12), transparent 70%), linear-gradient(160deg, #324f5e, #263f4a);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.6);
}
/* Accroche à gauche du bouton : pastille « Gratuit » puis une phrase, l'essentiel en Lora. */
.fan-hint { display: inline-flex; align-items: center; gap: 14px; min-width: 0; text-align: left; }
.fan-badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: rgba(230,179,79,0.16); border: 1px solid rgba(230,179,79,0.28); color: #f3d58f;
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.fan-hint-txt { font-size: 14px; line-height: 1.45; color: #bdcfd4; text-wrap: pretty; }
.fan-hint-txt b {
  font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: 18px; letter-spacing: -0.005em; color: #eef6f7;
}
/* Bouton de téléchargement : reflet qui balaie, lueur qui respire et flèche qui descend, pour attirer l'œil. */
.fan-dl {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 11px 18px; border-radius: 999px;
  border: 1px solid rgba(63,191,174,0.35); background: rgba(63,191,174,0.07);
  color: #eef6f7; font-size: 14px; font-weight: 500;
  transition: background .3s, border-color .3s, transform .3s cubic-bezier(.2,.7,.2,1);
  animation: dlGlow 3.2s ease-in-out infinite;
}
.fan-dl::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,0.30) 44%, rgba(245,212,142,0.30) 56%, transparent 78%);
  transform: translateX(-130%); animation: dlShine 4.5s ease-in-out 1.2s infinite;
}
.fan-dl svg { animation: dlBob 1.8s ease-in-out infinite; }
.fan-dl:hover {
  color: #eef6f7; background: rgba(63,191,174,0.14); border-color: rgba(127,220,207,0.7); transform: translateY(-2px);
}
@keyframes dlGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63,191,174,0); border-color: rgba(63,191,174,0.35); }
  50% { box-shadow: 0 0 28px 2px rgba(63,191,174,0.45); border-color: rgba(127,220,207,0.85); }
}
@keyframes dlShine { 0% { transform: translateX(-130%); } 40%, 100% { transform: translateX(130%); } }
@keyframes dlBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } }
@media (prefers-reduced-motion: reduce) { .fan-dl, .fan-dl::after, .fan-dl svg { animation: none; } }
@media (max-width: 1000px) {
  .fan-legend { --z: 0.74px; --k: 0.62px; }
  .fan-leaf-t { font-size: 15px; }
  .fan-bubble-p { font-size: 10px; letter-spacing: 0.14em; }
}
@media (max-width: 900px) {
  .fan-bar { border-radius: 22px; padding: 16px 18px 18px; }
  .fan-hint { flex-direction: column; gap: 10px; text-align: center; max-width: 560px; }
}
@media (max-width: 720px) {
  /* Sur téléphone : bulles plus petites, numéros seuls. */
  .fan-legend { --z: 0.4px; --k: 0.3px; gap: 0 4px; }
  .fan-legend::before { display: none; }
  .fan-leaf-t, .fan-bubble-p { display: none; }
  .fan-bubble { border-width: 1.2px; box-shadow: 0 12px 24px -12px rgba(0,0,0,0.7); }
  .fan-bubble-n { font-size: calc(var(--d) * 0.32); }
}
@media (prefers-reduced-motion: reduce) {
  .fan-bubble { animation: none; }
  .fan-comet, .fan-end-ring { display: none; }
  .fan-orb, .fan-leaf-t, .fan-line-path, .fan-line-glow { transition: none; }
}
.ext-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-top: 4px; padding: 12px 4px 4px; border-top: 1px solid rgba(233,246,247,0.15);
  font-size: 13px; line-height: 1.45; color: #ccd9dd;
}
.ext-dialog {
  width: min(94vw, 760px); max-height: 96vh; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(233,246,247,0.19); background: #122028; color: #eef6f7;
}
.ext-dialog::backdrop { background: rgba(8,13,15,0.86); }
/* La page se réduit pour que la barre et le bouton restent toujours visibles. */
.ext-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.ext-dialog img { display: block; flex: 1 1 auto; min-height: 0; width: 100%; height: auto; object-fit: contain; border-radius: 4px; }
.ext-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.ext-btn {
  width: 40px; height: 40px; flex: none; cursor: pointer; font-size: 20px; line-height: 1;
  border-radius: 8px; border: 1px solid rgba(233,246,247,0.16); background: transparent; color: #eef6f7;
}
.ext-btn:hover { background: rgba(233,246,247,0.12); }

/* ---------- Bouton secondaire « doux » : teinte turquoise, flèche qui glisse au survol ---------- */
.btn-soft {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 10px 10px 10px 20px; border-radius: 8px; cursor: pointer; font-family: inherit;
  border: 1px solid rgba(63,191,174,0.35); background: rgba(63,191,174,0.07);
  color: #eef6f7; font-size: 15px; font-weight: 500; line-height: 1.55;
  transition: background .35s, border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn-soft::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.18) 45%, rgba(245,212,142,0.16) 55%, transparent 75%);
  transform: translateX(-130%); transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.btn-soft-arrow {
  flex: none; width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: rgba(63,191,174,0.16); color: #7fdccf;
  transition: background .35s, color .35s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn-soft:hover {
  color: #eef6f7; background: rgba(63,191,174,0.13); border-color: rgba(127,220,207,0.7);
  box-shadow: 0 0 24px rgba(63,191,174,0.25); transform: translateY(-2px);
}
.btn-soft:hover::after { transform: translateX(130%); }
/* Variante haute : même hauteur que le bouton principal placé à côté. */
.btn-soft-lg { padding: 12px 12px 12px 22px; font-size: 16px; }
.btn-soft-lg .btn-soft-arrow { width: 32px; height: 32px; }
.btn-soft:hover .btn-soft-arrow {
  background: linear-gradient(135deg, #8fe3d7, #f5d48e); color: #122028; transform: translateX(3px);
}

/* ---------- Accueil : contenu de l'ebook dans le cadre « Le pack » ---------- */
.pack-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pack-list li {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  background: linear-gradient(to right, rgba(233,246,247,0.17), rgba(233,246,247,0.17) 70%, transparent) no-repeat bottom / 100% 1px;
}
.pack-list li:first-child { padding-top: 0; }
.pack-list li:last-child { background: none; padding-bottom: 0; }
.pack-ico {
  flex: none; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(230,179,79,0.22), rgba(230,179,79,0.06)); border: 1px solid rgba(230,179,79,0.30);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s;
}
.pack-ico svg { width: 17px; height: 17px; fill: none; stroke: #f3d58f; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pack-list li > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: #bdcfd4; }
.pack-list b { font-size: 16px; font-weight: 500; letter-spacing: -0.005em; color: #eef6f7; }
.h-card:hover .pack-ico { border-color: rgba(230,179,79,0.6); }
.h-card:hover .pack-list li:nth-child(1) .pack-ico { transform: translateY(-2px); transition-delay: 0s; }
.h-card:hover .pack-list li:nth-child(2) .pack-ico { transform: translateY(-2px); transition-delay: .05s; }
.h-card:hover .pack-list li:nth-child(3) .pack-ico { transform: translateY(-2px); transition-delay: .1s; }
.h-card:hover .pack-list li:nth-child(4) .pack-ico { transform: translateY(-2px); transition-delay: .15s; }

/* ---------- Page Livre : sommaire (même langage que « La méthode » de l'accueil) ---------- */
.toc-facts { display: flex; flex-wrap: wrap; row-gap: 14px; margin-top: 4px; padding-top: 22px;
  background: linear-gradient(to right, rgba(233,246,247,0.16), rgba(233,246,247,0.16) 70%, transparent) no-repeat top / 100% 1px; }
.toc-facts span {
  display: flex; flex-direction: column; gap: 6px; padding: 0 24px; border-left: 1px solid rgba(233,246,247,0.15);
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #bdcfd4;
}
.toc-facts span:first-child { padding-left: 0; border-left: 0; }
.toc-facts b {
  font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(28px, 2.6vw, 34px); line-height: 1;
  letter-spacing: -0.01em; text-transform: none; color: #eef6f7;
}
.toc-facts span:last-child b { color: #e6b34f; }
@media (min-width: 900px) { .toc-intro { position: sticky; top: 112px; } }

.toc {
  flex: 1.3 1 460px; min-width: 0; margin: 0; list-style: none; display: flex; flex-direction: column;
  padding: 8px clamp(20px, 3vw, 32px); border-radius: 16px;
  background: rgba(233,246,247,0.08); border: 1px solid rgba(233,246,247,0.15);
}
.toc-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 18px; align-items: center;
  padding: 18px 0;
  background: linear-gradient(to right, transparent, rgba(233,246,247,0.17) 48px, rgba(233,246,247,0.17) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.toc-row:last-child { background: none; }
.toc-num {
  width: 36px; height: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500; background: #1f7a72; color: #e8eff1; transition: box-shadow .35s;
}
.toc-num-gold { background: #e6b34f; color: #161826; font-size: 18px; }
.toc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.toc-title { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: #eef6f7; }
.toc-desc { font-size: 14px; line-height: 1.5; color: #bdcfd4; text-wrap: pretty; }
.toc-page {
  padding: 4px 10px; border-radius: 6px; white-space: nowrap; font-size: 12px; color: #ccd9dd;
  background: rgba(233,246,247,0.09); border: 1px solid rgba(233,246,247,0.12); transition: border-color .35s, color .35s;
}
.toc-row:hover .toc-num { box-shadow: 0 0 0 5px rgba(63,191,174,0.16); }
.toc-row:hover .toc-num-gold { box-shadow: 0 0 0 5px rgba(230,179,79,0.18); }
.toc-row:hover .toc-page { border-color: rgba(63,191,174,0.4); color: #eef6f7; }
@media (max-width: 560px) {
  .toc-row { grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: start; }
  .toc-num { width: 32px; height: 32px; font-size: 14px; }
  .toc-page { grid-column: 2; justify-self: start; }
  .toc-facts span { padding: 0 16px; }
}

/* ---------- Simulateur d'épargne ---------- */
.mois-btn {
  flex: 1; cursor: pointer; font-size: 14px; padding: 9px 0; border-radius: 6px;
  border: 1px solid rgba(233,246,247,0.16); background: transparent; color: #cfd3e5;
  transition: background .25s, border-color .25s, color .25s;
}
.mois-btn.is-active { border-color: #3fbfae; background: rgba(63,191,174,0.14); color: #9fe6db; }

/* ---------- Aperçu du classeur (3 onglets) ---------- */
.scr-btn {
  position: relative; overflow: hidden; text-align: left; cursor: pointer; color: #eef6f7;
  display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 12px;
  border: 1px solid transparent; background: transparent;
  transition: background .4s, border-color .4s;
}
.scr-btn.is-active { border-color: rgba(233,246,247,0.19); background: rgba(233,246,247,0.09); }
.scr-num { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; color: #a4b8bf; transition: color .4s; }
.scr-btn.is-active .scr-num { color: #e6b34f; }
.scr-more { display: none; flex-direction: column; gap: 12px; }
.scr-btn.is-active .scr-more { display: flex; }
.scr-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left;
  background: linear-gradient(90deg,#3fbfae,#e6b34f);
  animation: tpBar 6s linear forwards;
}
.scr-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(0.96) translateY(14px);
  transition: opacity .7s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.scr-img.is-active { opacity: 1; transform: scale(1) translateY(0); }

/* ---------- FAQ ---------- */
.faq-item { border-radius: 12px; background: transparent; transition: background .3s; }
.faq-item.is-open { background: rgba(233,246,247,0.09); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; background: none; border: 0; border-radius: 12px; cursor: pointer;
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: #eef6f7; text-align: left;
}
.faq-q:hover { background: rgba(233,246,247,0.04); }
.faq-sign {
  flex: none; width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid rgba(233,246,247,0.16); display: flex; align-items: center; justify-content: center;
  color: #6fdccd; transition: color .3s, border-color .3s;
}
.faq-item.is-open .faq-sign { border-color: rgba(230,179,79,0.5); color: #f3d58f; }
.faq-a { margin: 0; padding: 0 64px 20px 20px; font-size: 15px; line-height: 1.6; color: #ccd9dd; text-wrap: pretty; }
@media (max-width: 560px) { .faq-a { padding-right: 20px; } }

/* ---------- Formulaire de contact ---------- */
.field {
  font-family: inherit; font-size: 15px; padding: 13px 14px; border-radius: 8px;
  border: 1px solid rgba(233,246,247,0.19); background: rgba(18,32,40,0.6); color: #eef6f7; outline: none;
  transition: border-color .25s;
}
.field.is-invalid { border-color: #ef8a7e; }
.sujet-btn {
  cursor: pointer; font-size: 14px; padding: 9px 14px; border-radius: 6px;
  border: 1px solid rgba(233,246,247,0.19); background: transparent; color: #ccd9dd;
  transition: background .25s, border-color .25s;
}
.sujet-btn.is-active { border-color: #3fbfae; background: rgba(63,191,174,0.14); color: #eef6f7; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .tab-marquee { animation: none !important; }
}

/* ---------- Par où commencer : grille de tuiles ---------- */
.bento { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-auto-rows: minmax(220px, auto); gap: 16px; }
.bento-tile { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.4vw, 30px); border-radius: 18px; color: #eef6f7;
  background: radial-gradient(260px 200px at 100% 0%, var(--g, rgba(63,191,174,0.12)), transparent 70%), linear-gradient(160deg, #324f5e 0%, #294451 55%, #263f4a 100%);
  border: 1px solid rgba(233,246,247,0.15); box-shadow: 0 1px 0 rgba(233,246,247,0.08) inset, 0 18px 40px -24px rgba(0,0,0,0.55);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .45s; }
.bento-tile:hover { transform: translateY(-4px); border-color: rgba(233,246,247,0.20); box-shadow: 0 1px 0 rgba(233,246,247,0.07) inset, 0 26px 50px -24px rgba(0,0,0,0.6); }
.bento-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bento-eye { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c, #6fdccd); }
.bento-big { margin-top: auto; font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(40px, 4.2vw, 58px); line-height: 1; letter-spacing: -0.02em; color: var(--c, #6fdccd); white-space: nowrap; }
.bento-sep { display: inline-block; margin: 0 0.2em; font-size: 0.62em; vertical-align: 0.18em; opacity: 0.55; }
.bento-txt { font-family: 'Lora', Georgia, serif; font-size: 18px; line-height: 1.4; color: #dbe7ea; max-width: 34ch; text-wrap: pretty; }
.bento-chip { flex: none; padding: 4px 10px; border-radius: 999px; background: rgba(233,246,247,0.09); border: 1px solid rgba(233,246,247,0.15); font-size: 12px; color: #ccd9dd; font-variant-numeric: tabular-nums; }
.bento-chips { display: flex; gap: 6px; }
.bento-wide { grid-column: 2 / 4; }
.bento-row { margin-top: auto; display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 40px); }
.bento-row .bento-big { margin-top: 0; }
.bento-row .bento-txt { padding-bottom: 4px; }
/* Tuile vedette, claire */
.bento-feature { grid-row: span 2; gap: 18px; color: #122028; border-color: rgba(245,212,142,0.55);
  background: radial-gradient(320px 260px at 0% 100%, rgba(172,214,205,0.34), transparent 70%), linear-gradient(155deg, #f4eadb 0%, #f3efe8 50%, #e6eeeb 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset, 0 24px 60px -26px rgba(230,179,79,0.45); }
.bento-feature:hover { border-color: rgba(245,212,142,0.9); box-shadow: 0 0 0 1px rgba(255,255,255,0.45) inset, 0 30px 70px -26px rgba(230,179,79,0.55); }
.bento-feature .bento-eye { color: #94650f; }
.bento-feature .bento-big { font-size: clamp(60px, 6.4vw, 92px); color: #122028; }
.bento-feature .bento-sep { color: #b07a14; opacity: 0.8; }
.bento-feature .bento-txt { font-size: 21px; color: #2a3a42; }
.bento-feature .bento-chip { background: rgba(18,32,40,0.06); border-color: rgba(18,32,40,0.12); color: #394951; }
.bento-tag { padding: 5px 11px; border-radius: 999px; background: #122028; color: #f5d48e; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.bento-deco { position: absolute; z-index: -1; right: 22px; top: 19%; width: 58%; max-width: 240px; color: rgba(176,122,20,0.18); pointer-events: none; }
@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(200px, auto); }
  .bento-feature { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
  .bento-wide { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .bento-tile { min-height: 190px; }
  .bento-feature { min-height: 300px; }
  .bento-deco { display: none; }
  .bento-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .bento-tile, .bento-tile:hover { transition: none; transform: none; } }
/* Variante 3 tuiles égales (page L'auteur) */
.bento-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); }
.bento-3 .bento-feature { grid-row: auto; }
.bento-end { margin-top: auto; }
.bento-ico { flex: none; width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--c, #6fdccd); background: rgba(233,246,247,0.08); border: 1px solid rgba(233,246,247,0.15); }
.bento-feature .bento-ico { color: #94650f; background: rgba(18,32,40,0.05); border-color: rgba(18,32,40,0.12); }
.bento-mail { color: #122028; }
.bento-mail .bento-txt { font-size: 22px; }
.bento-mail-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(18,32,40,0.12); font-size: 15px; font-weight: 500; color: #0f6f64; }
.bento-mail-go { flex: none; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #122028; color: #f5d48e; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.bento-mail:hover .bento-mail-go { transform: translate(2px, -2px); }
@media (max-width: 960px) {
  .bento-3 { grid-template-columns: 1fr 1fr; }
  .bento-3 .bento-feature { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 600px) {
  .bento-3 { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-3 .bento-tile { min-height: 0; }
  .bento-3 .bento-end { margin-top: 18px; }
}

/* =========================================================
   Accueil : compositions animées
   ========================================================= */

/* --- Bandeau de cotation (le pack en chiffres) --- */
.tick-wrap { position: relative; padding: 0 0 clamp(64px, 8vw, 104px); }
.tick {
  position: relative; overflow: hidden; padding: 22px 0;
  background: linear-gradient(to right, transparent, rgba(233,246,247,0.19) 12%, rgba(233,246,247,0.19) 88%, transparent) no-repeat top / 100% 1px,
              linear-gradient(to right, transparent, rgba(233,246,247,0.19) 12%, rgba(233,246,247,0.19) 88%, transparent) no-repeat bottom / 100% 1px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.tick-track { display: flex; width: max-content; animation: tickMove 46s linear infinite; }
.tick:hover .tick-track { animation-play-state: paused; }
.tick-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.tick-list li { display: flex; align-items: baseline; gap: 12px; padding: 0 clamp(28px, 3.4vw, 48px); white-space: nowrap; position: relative; }
.tick-list li::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: rgba(233,246,247,0.22); transform: translate(50%, -50%); }
.tick-k { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #bdcfd4; }
.tick-v { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: -0.015em; color: #eef6f7; }
.tick-gold { color: #e6b34f; }
.tick-d { font-size: 13px; color: #5fd3c3; }
@keyframes tickMove { to { transform: translateX(-50%); } }

/* --- Avant / après : une liste sobre dont le texte change avec l'interrupteur --- */
.ba-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px;
  background: rgba(18,32,40,0.55); border: 1px solid rgba(233,246,247,0.17);
}
.ba-knob {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px;
  background: linear-gradient(135deg, rgba(228,106,92,0.28), rgba(228,106,92,0.14)); border: 1px solid rgba(239,138,126,0.45);
  transition: transform .55s cubic-bezier(.5,0,.2,1), background .55s, border-color .55s;
}
.ba-opt { position: relative; z-index: 1; padding: 11px 20px; border: 0; background: none; color: #bdcfd4; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: color .4s; }
.ba-opt[aria-pressed="true"] { color: #eef6f7; }
.ba-list { list-style: none; margin: 0; padding: 0; }
.ba-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 22px 0; border-top: 1px solid rgba(233,246,247,0.14); }
.ba-row:first-child { padding-top: 0; border-top: 0; }
.ba-row:last-child { padding-bottom: 0; }
.ba-num { padding-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: #ef8a7e; transition: color .5s; }
.ba-stack { display: grid; }
.ba-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 6px; transition: opacity .45s, transform .45s, visibility .45s; transition-delay: calc(var(--i) * .07s); }
.ba-back { opacity: 0; visibility: hidden; transform: translateY(6px); }
.ba-title { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.25; color: #eef6f7; text-wrap: balance; }
.ba-sub { font-size: 15px; line-height: 1.45; color: #bdcfd4; }

/* --- La méthode : cycle en 6 étapes --- */
.cycle { position: relative; flex: 1.3 1 420px; max-width: 470px; aspect-ratio: 1; margin: 0 auto; }
.cycle-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cycle-track { fill: none; stroke: rgba(233,246,247,0.15); stroke-width: 2; }
.cycle-prog { fill: none; stroke: url(#cycleGrad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 600; transform: rotate(-90deg); transform-origin: 200px 200px; transition: stroke-dasharray 1s cubic-bezier(.5,0,.2,1); filter: drop-shadow(0 0 6px rgba(63,191,174,0.25)); }
.cycle-center {
  position: absolute; left: 50%; top: 50%; width: 58%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.cycle-k { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #bdcfd4; }
.cycle-k b { color: #e6b34f; font-weight: 500; }
.cycle-t { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.15; color: #eef6f7; text-wrap: balance; }
.cycle-d { font-size: 15px; line-height: 1.5; color: #ccd9dd; text-wrap: balance; }
.cycle-center.is-swap .cycle-t, .cycle-center.is-swap .cycle-d { animation: cycleIn .6s cubic-bezier(.2,.7,.2,1); }
@keyframes cycleIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.cycle-node {
  --ang: calc(var(--a) * 60deg - 90deg);
  position: absolute; left: calc(50% + 42.5% * cos(var(--ang))); top: calc(50% + 42.5% * sin(var(--ang)));
  width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-family: 'Lora', Georgia, serif; font-size: 18px; font-weight: 500; color: #bdcfd4;
  background: #223a44; border: 1.5px solid rgba(233,246,247,0.2);
  transition: background .5s, color .5s, border-color .5s, box-shadow .5s, scale .5s cubic-bezier(.3,1.5,.5,1);
}
.cycle-node:hover { border-color: #7fdccf; color: #eef6f7; }
.cycle-node.is-done { background: #1f7a72; border-color: #3fbfae; color: #eef6f7; }
.cycle-node.is-on { scale: 1.18; background: #3fbfae; border-color: #8fe3d7; color: #122028; box-shadow: 0 0 0 6px rgba(63,191,174,0.12), 0 0 24px rgba(63,191,174,0.25); }
.cycle-node-gold.is-on { background: #e6b34f; border-color: #f5d48e; box-shadow: 0 0 0 6px rgba(230,179,79,0.12), 0 0 24px rgba(230,179,79,0.25); }
.cycle-node:focus-visible { outline: 2px solid #f5d48e; outline-offset: 4px; }
@media (max-width: 520px) {
  .cycle-node { width: 40px; height: 40px; margin: -20px 0 0 -20px; font-size: 16px; }
  .cycle-center { width: 64%; gap: 6px; }
  .cycle-t { font-size: 19px; }
  .cycle-d { font-size: 13px; }
}

/* --- Bonus : fiches papier qui se déploient --- */
.sheets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 10px 0 20px; }
.sheet {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 270px; padding: 30px 22px 22px;
  border-radius: 14px; color: #122028;
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(18,32,40,0.07) 27px 28px) 0 120px / 100% 100% no-repeat, linear-gradient(170deg, #fbf7ec, #efe8d6);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 26px 50px -22px rgba(0,0,0,0.65);
  transform: rotate(var(--r)) translateY(calc((var(--i) - 1.5) * (var(--i) - 1.5) * 6px));
  transition: transform 1s cubic-bezier(.3,1.25,.4,1), box-shadow .4s; transition-delay: calc(var(--i) * .08s);
  cursor: default;
}
.sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c); }
.sheet::after { content: ""; position: absolute; right: 16px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
html.js .sheets:not(.is-open) .sheet { transform: translateX(calc((1.5 - var(--i)) * (100% + 18px))) rotate(calc(var(--r) * 1.6)) translateY(10px); }
.sheet:hover { transform: rotate(0deg) translateY(-12px) scale(1.03); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 36px 60px -24px rgba(0,0,0,0.7); transition-delay: 0s; z-index: 2; }
.sheet-k { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #525b5e; }
.sheet-t { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: -0.005em; text-wrap: balance; }
.sheet-d { font-size: 14px; line-height: 1.5; color: #3a4449; }
@media (max-width: 900px) {
  .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.js .sheets:not(.is-open) .sheet { transform: translateY(24px) rotate(var(--r)); opacity: 0; }
  .sheet { transition: transform .9s cubic-bezier(.3,1.25,.4,1), opacity .6s; transition-delay: calc(var(--i) * .08s); }
}
@media (max-width: 520px) { .sheets { grid-template-columns: 1fr; } .sheet { min-height: 200px; } }

/* --- Carte de l'offre : contour dégradé or et turquoise --- */
.offer-card {
  position: relative; border: 1px solid transparent !important;
  background: linear-gradient(#294451, #294451) padding-box, conic-gradient(from var(--ring), #e6b34f, rgba(230,179,79,0.2) 22%, #3fbfae 50%, rgba(63,191,174,0.2) 72%, #e6b34f) border-box !important;
  box-shadow: 0 30px 80px -40px rgba(230,179,79,0.5);
}

@media (prefers-reduced-motion: reduce) {
  .tick-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .ba-face, .sheet, .cycle-prog { transition: none; }
}
/* =========================================================
   Livre, Classeur, Auteur, FAQ : compositions animées
   ========================================================= */

/* --- Livre : le sommaire en étagère --- */
.shelf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.shelf { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 400px; margin: 0; padding: 0 0 14px; list-style: none; }
.shelf::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: 10px; border-radius: 4px;
  background: linear-gradient(180deg, #3d5f6e, #263f4a); box-shadow: 0 14px 30px -8px rgba(0,0,0,0.7), 0 -1px 0 rgba(233,246,247,0.17) inset;
}
.shelf::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -26px; height: 40px; background: radial-gradient(closest-side, rgba(63,191,174,0.12), transparent); filter: blur(10px); pointer-events: none; }
.spine {
  position: relative; flex: 0 0 64px; height: var(--h); min-width: 0; overflow: hidden; border-radius: 6px 6px 3px 3px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.28), transparent 18%, rgba(255,255,255,0.07) 46%, transparent 64%, rgba(0,0,0,0.32)),
    linear-gradient(180deg, #355463, #263f4a);
  border-top: 4px solid var(--c); box-shadow: 0 18px 30px -16px rgba(0,0,0,0.75);
  transition: flex-grow .7s cubic-bezier(.5,0,.15,1), flex-basis .7s cubic-bezier(.5,0,.15,1), height .7s cubic-bezier(.5,0,.15,1), transform .35s;
}
.spine:not(.is-open):hover { transform: translateY(-10px); }
.spine.is-open { flex: 1 1 0; height: 100%; background: radial-gradient(420px 300px at 85% 10%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%), linear-gradient(160deg, #355463, #263f4a); }
.spine-gold { background: linear-gradient(90deg, rgba(0,0,0,0.18), transparent 18%, rgba(255,255,255,0.25) 46%, transparent 64%, rgba(0,0,0,0.2)), linear-gradient(180deg, #f3e2b6, #d9bf82); }
.spine-btn {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px 0 16px;
  border: 0; background: none; color: #eef6f7; cursor: pointer; transition: opacity .35s;
}
.spine-btn::before, .spine-btn::after { content: ""; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--c); opacity: .55; }
.spine-btn::before { top: 54px; } .spine-btn::after { bottom: 26px; }
.spine-n { font-family: 'Lora', Georgia, serif; font-size: 22px; font-weight: 500; color: var(--c); }
.spine-v { writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 14px; font-family: 'Lora', Georgia, serif; font-size: 17px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; color: #dbe7ea; }
.spine-gold .spine-n, .spine-gold .spine-v { color: #122028; }
.spine.is-open .spine-btn { opacity: 0; pointer-events: none; }
.spine-btn:focus-visible { outline: 2px solid #f5d48e; outline-offset: -4px; }
.spine-open {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 28px clamp(22px, 2.6vw, 34px) 32px;
  min-width: 300px; opacity: 0; transform: translateX(16px); transition: opacity .4s, transform .5s cubic-bezier(.2,.7,.2,1); pointer-events: none;
}
.spine.is-open .spine-open { opacity: 1; transform: none; transition-delay: .35s; pointer-events: auto; }
.spine-big { position: absolute; right: 22px; top: 10px; font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(110px, 12vw, 170px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--c); opacity: .5; letter-spacing: -0.04em; }
.spine-p { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.spine-t { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.01em; color: #eef6f7; max-width: 22ch; text-wrap: balance; }
.spine-d { font-size: 15px; line-height: 1.55; color: #ccd9dd; max-width: 44ch; text-wrap: pretty; }
.spine-gold.is-open { background: radial-gradient(320px 260px at 0% 100%, rgba(143,227,215,0.5), transparent 70%), linear-gradient(155deg, #f8e8c2, #f3efdf 50%, #e2f4ef); }
.spine-gold .spine-p { color: #8a5e0e; } .spine-gold .spine-t { color: #122028; } .spine-gold .spine-d { color: #394951; } .spine-gold .spine-big { -webkit-text-stroke-color: #b07a14; }
@media (max-width: 760px) {
  .shelf { flex-direction: column; align-items: stretch; height: auto; gap: 6px; padding: 0; }
  .shelf::after, .shelf::before { display: none; }
  .spine { flex: none; height: 54px; border-radius: 10px; border-top: 0; border-left: 4px solid var(--c); background: linear-gradient(90deg, #355463, #263f4a); }
  .spine-gold { background: linear-gradient(90deg, #f3e2b6, #d9bf82); }
  .spine.is-open { flex: none; height: auto; }
  .spine:not(.is-open):hover { transform: none; }
  .spine-btn { flex-direction: row; gap: 14px; padding: 0 18px; position: relative; height: 54px; }
  .spine-btn::before, .spine-btn::after { display: none; }
  .spine-v { writing-mode: horizontal-tb; transform: none; margin: 0; font-size: 16px; }
  .spine.is-open .spine-btn { display: none; }
  .spine-open { position: relative; min-width: 0; padding: 22px 20px; transform: none; display: none; }
  .spine.is-open .spine-open { display: flex; }
  .spine-big { font-size: 90px; right: 14px; top: 6px; }
}

/* --- Livre : deux cas pratiques en graphiques --- */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 380px; border-radius: 18px;
  background: linear-gradient(160deg, #324f5e, #263f4a);
  border: 1px solid rgba(233,246,247,0.15); box-shadow: 0 18px 40px -24px rgba(0,0,0,0.6);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s;
}
.case:hover { transform: translateY(-4px); border-color: rgba(233,246,247,0.2); }
.case-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 3vw, 36px); }
.case-k { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #6fdccd; }
.case-down .case-k { color: #ef8a7e; }
.case-t { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(28px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.015em; }
.case-d { font-size: 16px; line-height: 1.55; color: #ccd9dd; max-width: 42ch; }
.case-verdict { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13px; font-weight: 500; background: rgba(63,191,174,0.12); color: #9fe6db; border: 1px solid rgba(63,191,174,0.3); }
.case-verdict span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #3fbfae; color: #122028; font-size: 12px; }
.case-down .case-verdict { background: rgba(228,106,92,0.12); color: #f3b0a7; border-color: rgba(228,106,92,0.32); }
.case-down .case-verdict span { background: #e46a5c; }
.case-chart { position: relative; margin-top: auto; height: 150px; clip-path: inset(0 100% 0 0); transition: clip-path 2s cubic-bezier(.5,0,.2,1) .2s; }
.cases.is-in .case-chart { clip-path: inset(-20px -20px 0 0); }
.case-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.case-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke: #5fd3c3; filter: drop-shadow(0 0 6px rgba(63,191,174,0.55)); }
.case-down .case-line { stroke: #ef8a7e; filter: drop-shadow(0 0 6px rgba(228,106,92,0.5)); }
.case-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -10px; border-radius: 50%; background: #8fe3d7; box-shadow: 0 0 0 6px rgba(63,191,174,0.18), 0 0 18px rgba(63,191,174,0.8); }
@keyframes casePulse { 50% { box-shadow: 0 0 0 12px rgba(63,191,174,0), 0 0 22px rgba(63,191,174,0.45); } }
.case-mark { position: absolute; transform: translate(-50%, calc(-100% - 12px)); padding: 3px 9px; border-radius: 999px; background: #122028; border: 1px solid rgba(239,138,126,0.5); color: #f3b0a7; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transition: opacity .5s 1.4s, transform .5s 1.4s; }
.case-mark::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #ef8a7e; box-shadow: 0 0 10px rgba(228,106,92,0.8); }
.case-mark-sell { transition-delay: 2s; }
.cases.is-in .case-mark { opacity: 1; }
@media (max-width: 760px) { .cases { grid-template-columns: 1fr; } .case { min-height: 340px; } }

/* --- Classeur : les 16 onglets dans une feuille Excel --- */
.xl { border-radius: 16px; overflow: hidden; background: #203741; border: 1px solid rgba(233,246,247,0.17); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.75), 0 0 0 1px rgba(63,191,174,0.05); }
.xl-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #122028; border-bottom: 1px solid rgba(233,246,247,0.12); font-size: 13px; color: #a9bec5; }
.xl-file { margin: 0 auto; }
.xl-formula { display: flex; align-items: stretch; border-bottom: 1px solid rgba(233,246,247,0.12); font-size: 14px; background: #263f4a; }
.xl-name { flex: none; width: 92px; padding: 10px 12px; border-right: 1px solid rgba(233,246,247,0.12); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #eef6f7; }
.xl-fx { flex: none; padding: 10px 12px; border-right: 1px solid rgba(233,246,247,0.12); font-style: italic; font-family: Georgia, serif; color: #6fdccd; }
.xl-f { flex: 1; min-width: 0; padding: 10px 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: #dbe7ea; }
.xl-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: #6fdccd; animation: xlBlink 1s steps(1) infinite; }
@keyframes xlBlink { 50% { opacity: 0; } }
.xl-grid { display: grid; grid-template-columns: 38px minmax(190px, 1.05fr) repeat(4, minmax(0, 1fr)); }
.xl-corner, .xl-col, .xl-row { background: #122028; color: #9db2b9; font-size: 12px; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(233,246,247,0.09); border-bottom: 1px solid rgba(233,246,247,0.09); transition: background .3s, color .3s; }
.xl-col { padding: 6px 0; }
.xl-col.is-hl, .xl-row.is-hl { background: rgba(63,191,174,0.16); color: #8fe3d7; }
.xl-ch { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 16px; border-right: 1px solid rgba(233,246,247,0.09); border-bottom: 1px solid rgba(233,246,247,0.09); box-shadow: 3px 0 0 var(--c) inset; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #a9bec5; }
.xl-ch b { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: 18px; letter-spacing: 0; text-transform: none; color: #eef6f7; }
.xl-cell {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 92px; padding: 14px; min-width: 0;
  border-right: 1px solid rgba(233,246,247,0.09); border-bottom: 1px solid rgba(233,246,247,0.09); cursor: cell; outline: none;
  transition: background .3s;
}
.xl-cell:not(.xl-empty):hover, .xl-cell.is-sel { background: rgba(63,191,174,0.08); }
.xl-cell.is-sel::after { content: ""; position: absolute; inset: -1px; border: 2px solid #3fbfae; box-shadow: 0 0 24px rgba(63,191,174,0.25); pointer-events: none; z-index: 1; }
.xl-cell.is-sel::before { content: ""; position: absolute; right: -4px; bottom: -4px; width: 7px; height: 7px; background: #3fbfae; border: 1px solid #203741; z-index: 2; }
.xl-tab { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 3px 8px; border-radius: 5px; background: var(--c); color: #f4f8f9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: nowrap; }
.xl-t { font-size: 15px; font-weight: 500; line-height: 1.3; color: #eef6f7; }
.xl-foot { display: flex; justify-content: space-between; padding: 8px 16px; background: #122028; font-size: 12px; color: #9db2b9; }
.xl-ready { display: inline-flex; align-items: center; gap: 8px; } .xl-ready i { width: 7px; height: 7px; border-radius: 50%; background: #3fbfae; box-shadow: 0 0 8px #3fbfae; }
@media (max-width: 860px) {
  .xl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl-corner, .xl-col, .xl-row, .xl-empty { display: none; }
  .xl-ch { grid-column: 1 / -1; background: rgba(18,32,40,0.6); }
  .xl-file { transform: none; }
}

/* --- Auteur : le parcours se dessine au fil du défilement --- */
.journey { position: relative; display: flex; flex-direction: column; padding-left: 34px; }
.jr-track, .jr-fill { position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; }
.jr-track { background: rgba(233,246,247,0.15); }
.jr-fill { background: linear-gradient(180deg, #3fbfae, #e6b34f); transform-origin: top; transform: scaleY(var(--p, 1)); box-shadow: 0 0 12px rgba(63,191,174,0.25); }
.jr-item { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 0 22px; transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1); }
html.js .journey:not(.is-static) .jr-item:not(.is-lit) { opacity: .28; transform: translateX(10px); }
.jr-dot { position: absolute; left: -33px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: #122028; border: 2px solid var(--c); transition: background .4s, box-shadow .4s, scale .4s cubic-bezier(.3,1.6,.5,1); }
.jr-item.is-lit .jr-dot { background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent), 0 0 16px var(--c); }
.jr-when { font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--c); }
.jr-what { font-family: 'Lora', Georgia, serif; font-size: 19px; line-height: 1.4; color: #eef6f7; text-wrap: pretty; }
.jr-now .jr-what { padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, rgba(230,179,79,0.14), rgba(230,179,79,0.04)); border: 1px solid rgba(230,179,79,0.3); }
.jr-now.is-lit .jr-dot { scale: 1.25; }
/* Phrases surlignées comme au marqueur */
.hl { background: linear-gradient(var(--hc), var(--hc)) no-repeat 0 88% / 0% 42%; padding: 0 4px; transition: background-size 1.1s cubic-bezier(.5,0,.2,1) var(--d, 0s); }
html:not(.js) .hl, [data-hl].is-in .hl { background-size: 100% 42%; }

/* --- FAQ : une conversation --- */
.faqx { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 56px); align-items: flex-start; }
.faqx-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.faqx-main { flex: 1.5 1 480px; min-width: 0; }
@media (min-width: 900px) { .faqx-main { position: sticky; top: 96px; } }
.faqx-qs { display: flex; flex-direction: column; gap: 16px; }
.faqx-group { display: flex; flex-direction: column; gap: 8px; }
.faqx-gk { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #a9bec5; }
.faqx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.faqx-pill {
  padding: 9px 14px; border-radius: 18px 18px 18px 6px; border: 1px solid rgba(233,246,247,0.19); background: rgba(233,246,247,0.04);
  color: #dbe7ea; font-family: inherit; font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer;
  transition: background .3s, border-color .3s, color .3s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.faqx-pill:hover { background: rgba(63,191,174,0.12); border-color: rgba(127,220,207,0.5); transform: translateY(-2px); }
.faqx-pill.is-asked { color: #a9bec5; border-style: dashed; }
.faqx-pill.is-asked::before { content: "✓ "; color: #5fd3c3; }
.faqx-mail { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 20px 22px; border-radius: 16px; background: rgba(18,32,40,0.45); border: 1px solid rgba(233,246,247,0.15); color: #eef6f7; transition: border-color .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.faqx-mail:hover { border-color: rgba(171,206,227,0.45); transform: translateY(-3px); }
.faqx-mail-k { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #abcee3; }
.faqx-mail-t { font-family: 'Lora', Georgia, serif; font-size: 20px; line-height: 1.3; }
.faqx-mail-a { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 500; color: #6fdccd; }
.chat { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #324f5e, #263f4a); border: 1px solid rgba(233,246,247,0.17); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.75); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: rgba(18,32,40,0.55); border-bottom: 1px solid rgba(233,246,247,0.12); }
.chat-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Lora', Georgia, serif; font-size: 18px; font-weight: 500; color: #122028; background: linear-gradient(135deg, #8fe3d7, #f5d48e); }
.chat-who { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 500; }
.chat-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: #a9bec5; }
.chat-st i { width: 7px; height: 7px; border-radius: 50%; background: #3fbfae; box-shadow: 0 0 8px #3fbfae; }
.chat-body { display: flex; flex-direction: column; gap: 12px; height: min(560px, 64vh); overflow-y: auto; padding: 22px 20px; scroll-behavior: smooth; overscroll-behavior: contain; }
.msg { max-width: 84%; padding: 12px 16px; font-size: 15px; line-height: 1.55; animation: msgIn .45s cubic-bezier(.2,.7,.2,1); text-wrap: pretty; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.msg-a { align-self: flex-start; border-radius: 18px 18px 18px 6px; background: rgba(233,246,247,0.07); border: 1px solid rgba(233,246,247,0.15); color: #dbe7ea; }
.msg-q { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: #f4f1ea; color: #122028; font-weight: 500; }
.msg.is-flash { animation: msgFlash 1.2s ease; }
@keyframes msgFlash { 30% { box-shadow: 0 0 0 3px rgba(245,212,142,0.6); } }
.msg-typing { display: inline-flex; gap: 5px; padding: 15px 16px; }
.msg-typing i { width: 7px; height: 7px; border-radius: 50%; background: #a9bec5; animation: typeDot 1.1s ease-in-out infinite; }
.msg-typing i:nth-child(2) { animation-delay: .15s; } .msg-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typeDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 20px; border-top: 1px solid rgba(233,246,247,0.12); background: rgba(18,32,40,0.45); font-size: 14px; color: #9db2b9; }
.chat-foot span:first-child { flex: 1; }
.chat-send { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(63,191,174,0.16); color: #6fdccd; }
html.js .faq-list[data-faq-chat].is-chat { display: none; }
@media (max-width: 899px) {
  .faqx { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 22px; }
  .faqx-side { display: contents; }
  .faqx-main { order: 2; margin-top: 14px; }
  .faqx-mail { order: 3; margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .spine, .spine-open, .case-chart, .case-mark, .jr-item, .hl { transition: none; }
  .case-dot, .xl-caret, .msg, .msg-typing i { animation: none; }
}
/* =========================================================
   Pack (accueil), héros et aperçu du classeur
   ========================================================= */

/* --- Accueil : le pack en paquet de cartes --- */
.deck { display: flex; flex-direction: column; gap: 18px; }
.deck-tabs { align-self: center; display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(18,32,40,0.55); border: 1px solid rgba(233,246,247,0.17); }
.deck-tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px; border: 0; border-radius: 999px; background: none; color: #bdcfd4; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .4s, color .4s; }
.deck-tab:hover { color: #eef6f7; }
.deck-tab.is-on { background: rgba(233,246,247,0.09); color: #eef6f7; }
.deck-tab-k { font-size: 11px; letter-spacing: 0.14em; color: #9db2b9; transition: color .4s; }
.deck-tab.is-on .deck-tab-k { color: #e6b34f; }
@keyframes deckProg { to { transform: scaleX(1); } }
.deck-stage { display: grid; padding-top: 64px; }
.deck-card {
  grid-area: 1 / 1; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center;
  gap: clamp(24px, 4vw, 60px); padding: clamp(28px, 4vw, 56px); border-radius: 24px; color: #eef6f7;
  border: 1px solid rgba(233,246,247,0.17); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.75);
  transform: translateY(-36px) scale(0.92); transform-origin: 50% 0; opacity: .7; filter: saturate(.7) brightness(.8); z-index: 1; cursor: pointer;
  transition: transform .9s cubic-bezier(.6,0,.2,1), opacity .9s, filter .9s;
}
.deck-card.is-front { transform: none; opacity: 1; filter: none; z-index: 2; cursor: default; }
.deck-card.is-enter { animation: deckIn .9s cubic-bezier(.6,0,.2,1); }
@keyframes deckIn { 0% { transform: translateY(-36px) scale(0.92); } 45% { transform: translateY(-64px) scale(0.97); } 100% { transform: none; } }
.deck-card:not(.is-front):hover { opacity: .9; transform: translateY(-44px) scale(0.92); }
.deck-book { background: radial-gradient(520px 380px at 18% 40%, rgba(230,179,79,0.12), transparent 70%), linear-gradient(160deg, #355463, #263f4a); }
.deck-xl { background: radial-gradient(560px 380px at 22% 45%, rgba(63,191,174,0.12), transparent 70%), linear-gradient(160deg, #32515f, #263f4a); }
.deck-vis { display: flex; justify-content: center; align-items: center; min-width: 0; }
.deck-cover { width: min(225px, 70%); transform: rotate(-4deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.5)); }
@keyframes coverFloat { 50% { translate: 0 -10px; rotate: 1.5deg; } }
.deck-laptop { width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.45)); }
.deck-txt { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.deck-badge { align-self: flex-start; padding: 5px 12px; border-radius: 999px; font-size: 12px; background: rgba(230,179,79,0.16); color: #f3d58f; border: 1px solid rgba(230,179,79,0.3); }
.deck-xl .deck-badge { background: rgba(63,191,174,0.16); color: #9fe6db; border-color: rgba(63,191,174,0.32); }
.deck-h { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.deck-xl .pack-ico { background: rgba(63,191,174,0.10); border-color: rgba(63,191,174,0.35); }
.deck-xl .pack-ico svg { stroke: #8fe3d7; }
.deck-go { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: #e6b34f; }
.deck-xl .deck-go { color: #6fdccd; }
.deck-go span { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(233,246,247,0.12); transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s; }
.deck-go:hover span { transform: translateX(4px); background: rgba(233,246,247,0.16); }
@media (max-width: 760px) {
  .deck-card { grid-template-columns: 1fr; padding: 24px 20px 26px; }
  .deck-cover { width: 128px; }
  .deck-stage { padding-top: 48px; }
  .deck-tab { padding: 10px 16px; }
}

/* --- Classeur : widgets qui sortent de l'écran, compteur qui défile --- */
.kpis { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.kpi {
  position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; gap: 4px; min-width: 156px; padding: 12px 14px 13px;
  border-radius: 14px; background: rgba(34,58,68,0.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(233,246,247,0.19); border-top: 2px solid var(--c); box-shadow: 0 22px 44px -18px rgba(0,0,0,0.75);
  transform: translate(calc(var(--mx, 0) * var(--z) * 1px), calc(var(--my, 0) * var(--z) * 1px));
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .7s calc(.5s + var(--i) * .2s), scale .9s cubic-bezier(.3,1.5,.5,1) calc(.5s + var(--i) * .2s);
  animation: kpiBob 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s);
}
@keyframes kpiBob { 50% { translate: 0 -9px; } }
html.js .kpis:not(.is-in) .kpi { opacity: 0; scale: .5; }
.kpi-k { font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #bdcfd4; }
.kpi-v { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: 24px; line-height: 1.1; color: #eef6f7; white-space: nowrap; }
.kpi-k { white-space: nowrap; }
.kpi-d { font-size: 12px; color: #5fd3c3; }
.kpi-dots { display: flex; gap: 4px; margin-top: 2px; }
.kpi-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(233,246,247,0.19); }
.kpi-dots i.on { background: var(--c); box-shadow: 0 0 8px var(--c); }
@media (max-width: 640px) {
  .kpi { min-width: 0; padding: 8px 10px; border-radius: 10px; }
  .kpi-v { font-size: 16px; } .kpi-k { font-size: 8.5px; } .kpi-d, .kpi-dots { display: none; }
}

/* --- Classeur : aperçu, onglets Excel et note épinglée --- */
.pv { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: clamp(28px, 3.5vw, 44px) clamp(24px, 4vw, 52px) clamp(30px, 3.5vw, 44px); }
.pv-stage { position: relative; width: 100%; max-width: 880px; }
.pv-glow { position: absolute; inset: -6% -4%; background: radial-gradient(closest-side at 45% 55%, rgba(63,191,174,0.34), transparent 72%), radial-gradient(closest-side at 78% 30%, rgba(230,179,79,0.22), transparent 70%); filter: blur(26px); pointer-events: none; }
.pv-screen { position: relative; aspect-ratio: 1600 / 1010; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pv-img { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 100% 0 0); z-index: 1; }
.pv-img.is-on { clip-path: inset(0 0 0 0); z-index: 2; transition: clip-path 1.1s cubic-bezier(.65,0,.2,1); }
.pv-img.was { clip-path: inset(0 0 0 0); z-index: 1; }
.pv-scan { position: absolute; top: 6%; bottom: 14%; left: 0; width: 2px; z-index: 3; opacity: 0; pointer-events: none; background: linear-gradient(transparent, #8fe3d7 20%, #f5d48e 80%, transparent); box-shadow: 0 0 18px 2px rgba(63,191,174,0.7); }
.pv-screen.is-wiping .pv-scan { animation: pvScan 1.1s cubic-bezier(.65,0,.2,1); }
@keyframes pvScan { 0% { left: 0; opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.pv-note {
  position: absolute; right: -7%; top: 4%; z-index: 4; width: 280px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px;
  border-radius: 14px 14px 14px 4px; color: #122028; background: linear-gradient(165deg, #fbf4dc, #efe3bf);
  box-shadow: 0 30px 50px -20px rgba(0,0,0,0.65); transform: rotate(2.5deg);
}
.pv-note::before { content: ""; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 14px 14px 0; border-color: transparent #e46a5c transparent transparent; border-top-right-radius: 14px; }
.pv-note.is-swap { animation: noteSwap .6s cubic-bezier(.2,.7,.2,1); }
@keyframes noteSwap { from { opacity: 0; transform: translateY(10px) rotate(2.5deg); } }
.pv-note-k { display: inline-flex; align-items: center; gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #1f7a72; }
.pv-note-k i { width: 8px; height: 8px; border-radius: 50%; background: #1f7a72; }
.pv-note-t { font-family: 'Lora', Georgia, serif; font-size: 17px; line-height: 1.35; text-wrap: pretty; }
.pv-note-c { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-note-c span { padding: 4px 10px; border-radius: 999px; background: #122028; color: #f3d58f; font-size: 12px; }
.pv-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 0 8px; border-top: 1px solid rgba(233,246,247,0.19); }
.pv-tab { position: relative; overflow: hidden; padding: 11px 20px 12px; border: 0; border-radius: 0 0 10px 10px; background: rgba(18,32,40,0.55); color: #bdcfd4; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .35s, color .35s; }
.pv-tab:hover { color: #eef6f7; }
.pv-tab.is-on { background: #eef6f7; color: #122028; box-shadow: 0 -2px 0 #1f7a72 inset; }
.pv-prog { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #3fbfae, #e6b34f); transform: scaleX(0); transform-origin: left; }
.pv-prog.run { animation: deckProg 6.5s linear forwards; }
.pv:hover .pv-prog.run { animation-play-state: paused; }
@media (max-width: 1000px) {
  .pv-note { position: relative; right: auto; top: auto; width: auto; max-width: 520px; margin: -10px auto 0; transform: none; }
  @keyframes noteSwap { from { opacity: 0; transform: translateY(10px); } }
}

/* --- Classeur : trois étapes en micro-animations --- */
.flow { position: relative; display: flex; align-items: center; gap: 18px; padding: clamp(20px, 2.6vw, 28px) clamp(24px, 4vw, 52px); border-top: 1px solid rgba(233,246,247,0.12); background: rgba(28,47,57,0.34); }
.flow-step { flex: none; display: flex; align-items: center; gap: 14px; }
.flow-ico { position: relative; flex: none; width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, rgba(127,220,207,0.22), rgba(63,191,174,0.04)); border: 1px solid rgba(63,191,174,0.4); overflow: hidden; }
.flow-dl svg { width: 32px; height: 32px; stroke: #8fe3d7; stroke-width: 3; }
.flow-arrow { animation: flowDrop 2.2s ease-in-out infinite; }
@keyframes flowDrop { 0% { transform: translateY(-10px); opacity: 0; } 25% { opacity: 1; } 60% { transform: translateY(2px); opacity: 1; } 85%, 100% { transform: translateY(5px); opacity: 0; } }
.flow-box { display: flex; align-items: center; width: 48px; height: 24px; padding: 0 4px; border-radius: 3px; background: #fdf3d6; border: 1px solid #d9c89a; box-shadow: 0 0 0 2px rgba(63,191,174,0.6); }
.flow-typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; font-size: 10.5px; font-weight: 600; color: #3c7fa8; border-right: 1.5px solid #3c7fa8; animation: flowType 3s steps(7) infinite, xlBlink .8s steps(1) infinite; }
@keyframes flowType { 0%, 12% { width: 0; } 55%, 88% { width: 7ch; } 100% { width: 7ch; } }
.flow-calc { gap: 4px; align-items: flex-end; padding-bottom: 14px; border-color: rgba(230,179,79,0.5); background: radial-gradient(circle at 30% 30%, rgba(245,212,142,0.22), rgba(230,179,79,0.04)); }
.flow-calc i { width: 6px; border-radius: 2px; background: linear-gradient(#f5d48e, #e6b34f); transform-origin: bottom; animation: calcBar 2.4s ease-in-out infinite; }
.flow-calc i:nth-child(1) { height: 12px; } .flow-calc i:nth-child(2) { height: 20px; animation-delay: .15s; } .flow-calc i:nth-child(3) { height: 16px; animation-delay: .3s; } .flow-calc i:nth-child(4) { height: 26px; animation-delay: .45s; }
@keyframes calcBar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.flow-txt { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #a9bec5; white-space: nowrap; }
.flow-txt b { font-size: 15px; font-weight: 500; color: #eef6f7; }
.flow-link { position: relative; flex: 1; min-width: 28px; height: 2px; background: repeating-linear-gradient(90deg, rgba(63,191,174,0.5) 0 6px, transparent 6px 12px) 0 0 / 12px 2px; animation: flowDash .9s linear infinite; }
@keyframes flowDash { to { background-position: 12px 0; } }
.flow-link i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #8fe3d7; box-shadow: 0 0 10px #3fbfae; animation: flowDot 2.6s ease-in-out infinite; }
@keyframes flowDot { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@media (max-width: 900px) {
  .flow { flex-direction: column; align-items: flex-start; gap: 10px; }
  .flow-link { flex: none; width: 2px; height: 24px; min-width: 0; margin-left: 28px; background: repeating-linear-gradient(180deg, rgba(63,191,174,0.5) 0 6px, transparent 6px 12px) 0 0 / 2px 12px; animation: none; }
  .flow-link i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-card, .pv-img.is-on, .kpi { transition: none; }
  .deck-cover, .kpi, .flow-arrow, .flow-typed, .flow-calc i, .flow-link, .flow-link i { animation: none; }
  .flow-typed { width: 7ch; }
}
/* --- Bandeau d'achat discret (FAQ, contact) --- */
.band-mini {
  max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 18px clamp(18px, 3vw, 28px);
  border-radius: 18px; border: 1px solid rgba(233,246,247,0.17); color: #eef6f7;
  background: radial-gradient(420px 160px at 100% 50%, rgba(63,191,174,0.12), transparent 70%), linear-gradient(160deg, #324f5e, #263f4a);
}
.band-mini-cover { flex: none; width: 48px; transform: rotate(-5deg); filter: drop-shadow(0 10px 14px rgba(0,0,0,0.45)); }
.band-mini-txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.band-mini-k { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #bdcfd4; }
.band-mini-t { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(19px, 2vw, 23px); line-height: 1.2; }
.band-mini-cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 600px) { .band-mini-cover { display: none; } .band-mini-cta { width: 100%; } .band-mini-cta > * { flex: 1 1 auto; justify-content: center; } }
/* Feuille Excel du classeur v50 : 6 colonnes d'outils par famille */
.xl-grid.xl-grid-6 { grid-template-columns: 38px minmax(150px, 0.95fr) repeat(6, minmax(0, 1fr)); }
.xl-grid-6 .xl-t { font-size: 14px; }
.xl-grid-6 .xl-cell { min-height: 96px; padding: 12px; }
@media (max-width: 860px) { .xl-grid.xl-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* =========================================================
   Classeur : aperçu en carrousel 3D (fenêtres en arc, reflet, halo de famille)
   ========================================================= */
.cf-sec { max-width: 1200px; margin: 0 auto; padding: var(--sec) clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: var(--gap-head); }
.cf-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cf { --cf-c: #3fbfae; position: relative; overflow-x: clip; margin: 0 calc(-1 * clamp(20px, 4vw, 40px)); padding: 10px clamp(20px, 4vw, 40px) 0; }
.cf-aura { position: absolute; left: 50%; top: 42%; width: min(980px, 96vw); height: 460px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--cf-c), transparent 72%); opacity: .16; filter: blur(56px); pointer-events: none; transition: opacity .6s; }
.cf.is-swap .cf-aura { animation: cfAura 1.2s ease-out; }
@keyframes cfAura { 0% { opacity: .08; } 45% { opacity: .24; } 100% { opacity: .16; } }
.cf-stage { position: relative; height: min(500px, 47vw); perspective: 2000px; perspective-origin: 50% 35%; touch-action: pan-y; }
.cf-item {
  --o: 0; --d: 0;
  position: absolute; left: 50%; top: 0; width: min(780px, 74vw); margin: 0; cursor: pointer; z-index: calc(10 - var(--d));
  transform: translateX(-50%) translateX(calc(var(--o) * 50%)) translateZ(calc(var(--d) * -280px)) rotateY(calc(var(--o) * -30deg));
  opacity: calc(1 - var(--d) * 0.3); filter: brightness(calc(1 - var(--d) * 0.2)) saturate(calc(1 - var(--d) * 0.2));
  transition: transform 1s cubic-bezier(.2,.75,.2,1), opacity 1s, filter 1s;
}
.cf-item.is-far { opacity: 0; pointer-events: none; }
.cf-item:not(.is-on):hover { filter: brightness(1) saturate(1); }
.cf-item.is-on { cursor: default; }
.cf-item img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 46px 90px -34px rgba(0,0,0,0.6), 0 0 0 1px rgba(233,246,247,0.15); -webkit-box-reflect: below 12px linear-gradient(transparent 74%, rgba(255,255,255,0.14)); }
.cf-item::after { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.20) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0; }
.cf-item.is-on::after { animation: cfSweep 1.5s .45s cubic-bezier(.4,0,.2,1) both; }
@keyframes cfSweep { from { background-position: 130% 0; } to { background-position: -40% 0; } }
.cf-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 32px); margin-top: clamp(30px, 4vw, 54px); }
.cf-cap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: min(520px, 100%); min-height: 112px; }
.cf.is-swap .cf-cap > * { animation: cfIn .7s cubic-bezier(.2,.7,.2,1) both; }
.cf.is-swap .cf-cap > :nth-child(2) { animation-delay: .06s; }
.cf.is-swap .cf-cap > :nth-child(3) { animation-delay: .12s; }
@keyframes cfIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.cf-fam { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-c); transition: color .6s; }
.cf-fam i { width: 8px; height: 8px; border-radius: 50%; background: var(--cf-c); box-shadow: 0 0 12px var(--cf-c); transition: background .6s, box-shadow .6s; }
.cf-t { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; color: #eef6f7; }
.cf-d { font-size: 15px; line-height: 1.55; color: #ccd9dd; text-wrap: balance; }
.cf-arrow { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(233,246,247,0.18); background: rgba(233,246,247,0.08); color: #eef6f7; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .3s, border-color .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.cf-arrow:hover { background: rgba(63,191,174,0.16); border-color: rgba(127,220,207,0.6); transform: scale(1.07); }
.cf-arrow:focus-visible, .cf-dot:focus-visible { outline: 2px solid #f5d48e; outline-offset: 3px; }
.cf-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.cf-dot { position: relative; overflow: hidden; width: 26px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(233,246,247,0.16); cursor: pointer; transition: width .5s cubic-bezier(.2,.7,.2,1), background .3s; }
.cf-dot::before { content: ""; position: absolute; inset: -10px 0; }
.cf-dot.is-on { width: 58px; }
.cf-dot i { position: absolute; inset: 0; background: linear-gradient(90deg, #3fbfae, #e6b34f); transform: scaleX(0); transform-origin: left; }
.cf-dot.is-on i { transform: scaleX(0.08); }
.cf-dot i.run { animation: deckProg 5.2s linear forwards; }
.cf:hover .cf-dot i.run { animation-play-state: paused; }
.cf-sec .flow { border-radius: 18px; border: 1px solid rgba(233,246,247,0.15); }
@media (max-width: 700px) {
  .cf-item { width: 84vw; transform: translateX(-50%) translateX(calc(var(--o) * 62%)) translateZ(calc(var(--d) * -200px)) rotateY(calc(var(--o) * -22deg)); }
  .cf-stage { height: 54vw; }
  .cf-arrow { width: 42px; height: 42px; }
  .cf-cap { min-height: 130px; }
  .cf-fam { font-size: 11px; letter-spacing: 0.12em; white-space: nowrap; }
  .cf-d { font-size: 14px; }
  .cf-dot { width: 18px; } .cf-dot.is-on { width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-item { transition: none; }
  .cf-item.is-on::after, .cf.is-swap .cf-aura, .cf.is-swap .cf-cap > * { animation: none; }
}
/* =========================================================
   Surfaces « papier » : les grands encadrés passent en ivoire, encre bleu nuit
   (bandeau d'achat, cartes Livre / Classeur, cas pratiques)
   ========================================================= */
.band-paper, .deck-book, .deck-xl, .case {
  --ink: #182b33; --ink-2: #475055; --hair: rgba(24,43,51,0.11);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 44px 90px -46px rgba(0,0,0,0.6);
}
.band-paper {
  max-width: 1260px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 16px;
  background:
    radial-gradient(520px 380px at 100% 100%, rgba(172,214,205,0.34), transparent 70%), linear-gradient(155deg, #f4eadb 0%, #f3efe8 50%, #e6eeeb 100%);
}
.band-paper .band-k { color: #8a6a2a; }
.band-paper .band-p { color: var(--ink-2); }
.band-paper .h-btn { background: var(--ink) !important; color: #f8f4ea !important; box-shadow: 0 14px 28px -14px rgba(24,43,51,0.6); }
.band-paper .h-btn:hover { background: #223a43 !important; color: #fff !important; box-shadow: 0 16px 32px -14px rgba(24,43,51,0.7) !important; filter: none; }
.band-paper .btn-soft { color: var(--ink); background: rgba(255,255,255,0.5); border-color: rgba(24,43,51,0.18); }
.band-paper .btn-soft-arrow { background: rgba(31,143,134,0.12); color: #17786f; }
.band-paper .btn-soft:hover { color: var(--ink); background: #fff; border-color: rgba(24,43,51,0.32); box-shadow: 0 12px 24px -14px rgba(24,43,51,0.45); }
.band-paper img { filter: drop-shadow(0 30px 36px rgba(24,43,51,0.35)) !important; }

.deck-book {
  background: radial-gradient(420px 320px at 100% 100%, rgba(172,214,205,0.34), transparent 70%), linear-gradient(155deg, #f4eadb 0%, #f3efe8 50%, #e6eeeb 100%);
}
.deck-xl {
  background: radial-gradient(420px 320px at 0% 0%, rgba(244,234,219,0.70), transparent 70%), linear-gradient(155deg, #f3efe8 0%, #e6eeeb 55%, #d7e8e3 100%);
}
.deck-card .deck-h { color: var(--ink); -webkit-text-fill-color: var(--ink); background: none; }
.deck-badge { background: rgba(230,179,79,0.14); color: #8a5e0e; border-color: rgba(176,122,20,0.28); }
.deck-xl .deck-badge { background: rgba(63,191,174,0.12); color: #17786f; border-color: rgba(23,120,111,0.26); }
.deck-card .pack-list li { background-image: linear-gradient(to right, var(--hair), var(--hair) 70%, transparent); }
.deck-card .pack-list li:last-child { background: none; }
.deck-card:not(.is-front) { opacity: .9; filter: saturate(.85) brightness(.72); }
.deck-card .pack-list li > span:last-child { color: var(--ink-2); }
.deck-card .pack-list b { color: var(--ink); }
.deck-card .pack-ico { background: rgba(230,179,79,0.14); border-color: rgba(176,122,20,0.26); }
.deck-card .pack-ico svg { stroke: #a8741a; }
.deck-xl .pack-ico { background: rgba(63,191,174,0.12); border-color: rgba(23,120,111,0.24); }
.deck-xl .pack-ico svg { stroke: #17786f; }
.deck-go { color: #9a6b14; }
.deck-xl .deck-go { color: #17786f; }
.deck-go span { background: rgba(24,43,51,0.07); }
.deck-go:hover { color: #9a6b14; }
.deck-xl .deck-go:hover { color: #17786f; }
.deck-go:hover span { background: rgba(24,43,51,0.12); }
.deck-cover, .deck-laptop { filter: drop-shadow(0 28px 34px rgba(24,43,51,0.32)); }

.case {
  background: radial-gradient(360px 280px at 0% 100%, rgba(172,214,205,0.34), transparent 70%), linear-gradient(155deg, #f4eadb 0%, #f3efe8 50%, #e6eeeb 100%);
}
.case:hover { border-color: #fff; }
.case-k { color: #17786f; }
.case-down .case-k { color: #c4493b; }
.case-d { color: var(--ink-2); }
.case-verdict { background: rgba(63,191,174,0.12); color: #17786f; border-color: rgba(23,120,111,0.24); }
.case-verdict span { background: #1f8f86; color: #fff; }
.case-down .case-verdict { background: rgba(228,106,92,0.10); color: #b23f32; border-color: rgba(196,73,59,0.24); }
.case-down .case-verdict span { background: #d0574a; }
.case-line { stroke: #1f8f86; filter: drop-shadow(0 4px 6px rgba(31,143,134,0.22)); }
.case-down .case-line { stroke: #d0574a; filter: drop-shadow(0 4px 6px rgba(208,87,74,0.2)); }
.case-dot { background: #1f8f86; box-shadow: 0 0 0 6px rgba(31,143,134,0.12), 0 0 14px rgba(31,143,134,0.25); }
.case-mark { background: var(--ink); border-color: var(--ink); color: #fbe7e3; }
.case-mark::after { background: #d0574a; box-shadow: 0 0 0 4px rgba(208,87,74,0.18); }.case-down {
  background: radial-gradient(360px 280px at 0% 100%, rgba(239,138,126,0.30), transparent 70%), linear-gradient(155deg, #f4eadb 0%, #f4ece4 50%, #f2e3de 100%);
}
.band-paper, .deck-book, .deck-xl, .case { border-color: rgba(245,212,142,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset, 0 30px 70px -34px rgba(0,0,0,0.5), 0 24px 60px -30px rgba(230,179,79,0.30); }

/* Encadré d'offre : la carte signature, sur papier, avec son anneau animé */
.offer-card {
  --ink: #182b33; --ink-2: #475055;
  color: var(--ink);
  background:
    radial-gradient(360px 280px at 0% 100%, rgba(172,214,205,0.34), transparent 70%) padding-box,
    linear-gradient(155deg, #f4eadb 0%, #f3efe8 50%, #e6eeeb 100%) padding-box,
    conic-gradient(from var(--ring), #e6b34f, rgba(230,179,79,0.25) 22%, #3fbfae 50%, rgba(63,191,174,0.25) 72%, #e6b34f) border-box !important;
  border: 2px solid transparent !important;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.6), 0 30px 80px -40px rgba(230,179,79,0.55);
}
.offer-card .offer-sub, .offer-card .offer-note { color: var(--ink-2) !important; }
.offer-card .offer-tag { background: rgba(176,122,20,0.12) !important; color: #8a5e0e !important; border: 1px solid rgba(176,122,20,0.25); }
.offer-card .offer-eur { color: var(--ink-2) !important; }
.offer-card .offer-li > span:first-child { display: inline-flex; flex: none; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; background: #1f8f86; color: #fff !important; font-size: 11px; margin-top: 1px; }
.offer-card .offer-trust { color: var(--ink-2) !important; }
.offer-card .offer-trust svg { stroke: #1f8f86; }
.offer-card .consent { background: rgba(255,255,255,0.55); border-color: rgba(24,43,51,0.14); color: var(--ink-2); }
.offer-card .consent:hover { border-color: rgba(31,143,134,0.5); }
.offer-card .consent a { color: #17786f; }
.offer-card .consent input { accent-color: #1f8f86; }
.offer-card .consent.is-invalid { border-color: #d0574a; background: rgba(208,87,74,0.08); }
.offer-card [data-consent-err] { color: #b23f32 !important; }
.offer-card .h-btn { background: var(--ink) !important; color: #f8f4ea !important; box-shadow: 0 16px 30px -14px rgba(24,43,51,0.6); }
.offer-card .h-btn:hover { background: #223a43 !important; color: #fff !important; filter: none; }
/* Fiches bonus : une seule identité (papier signature + filet menthe → or), plus de couleurs par fiche */
.sheet {
  border: 1px solid rgba(245,212,142,0.55);
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(18,32,40,0.07) 27px 28px) 0 120px / 100% 100% no-repeat,
    radial-gradient(260px 200px at 100% 100%, rgba(172,214,205,0.34), transparent 70%),
    linear-gradient(155deg, #f4eadb 0%, #f3efe8 50%, #e6eeeb 100%);
}
.sheet::before { height: 3px; background: linear-gradient(90deg, #3fbfae, #e6b34f); }
.sheet::after { display: none; }
.sheet-k { color: #8a6a2a; }
/* Simulateur d'épargne : tuiles en verre clair au lieu de blocs presque noirs */
.ep-tile {
  position: relative; border-radius: 12px;
  background: linear-gradient(160deg, rgba(233,246,247,0.10), rgba(233,246,247,0.04));
  border: 1px solid rgba(233,246,247,0.15);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}
.ep-tile > span:first-child { color: #bdcfd4 !important; }
/* =========================================================
   Page Livre : livre feuilletable (extrait offert)
   La couverture s'ouvre, on tourne les pages en 3D, la dernière page propose le PDF.
   ========================================================= */
.fb-sec { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px) var(--sec); }
.fb { --pw: min(340px, 40vw); --ph: calc(var(--pw) * 1.415); display: flex; flex-direction: column; align-items: center; gap: clamp(34px, 4vw, 48px); }
.fb-stage { position: relative; width: calc(var(--pw) * 2); height: var(--ph); perspective: 2600px; perspective-origin: 50% 40%; touch-action: pan-y; transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
html.js .fb:not(.is-in) .fb-stage { opacity: 0; transform: translateY(46px) scale(0.94); }
.fb-book { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.55,.05,.25,1); }
.fb-book.is-closed { transform: translateX(calc(var(--pw) * -0.5)); }
.fb-book::after { content: ""; position: absolute; left: 4%; right: 4%; top: 100%; height: 46px; margin-top: -8px; background: radial-gradient(closest-side, rgba(2,9,12,0.55), transparent); filter: blur(8px); transform: translateZ(-2px); transition: left 1.1s cubic-bezier(.55,.05,.25,1); pointer-events: none; }
.fb-book.is-closed::after { left: 52%; }

.fb-base { position: absolute; top: 0; width: 50%; height: 100%; }
.fb-base-r { left: 50%; border-radius: 2px 6px 6px 2px; box-shadow: 1px 1px 0 #e3dccb, 2px 2px 0 #f6f1e6, 3px 3px 0 #ddd5c2, 4px 4px 0 #f6f1e6, 5px 5px 0 #d3cab5, 0 40px 70px -30px rgba(0,0,0,0.65); }
.fb-base-l { left: 0; border-radius: 6px 2px 2px 6px; background: #f6f1e6; box-shadow: -1px 1px 0 #e3dccb, -2px 2px 0 #f6f1e6, -3px 3px 0 #ddd5c2, -4px 4px 0 #f6f1e6, -5px 5px 0 #d3cab5, 0 40px 70px -30px rgba(0,0,0,0.65); transition: opacity .5s .3s; }
.fb-book.is-closed .fb-base-l { opacity: 0; transition-delay: 0s; }

.fb-leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.55,.05,.25,1); cursor: pointer; }
.fb-leaf.is-flipped { transform: rotateY(-180deg); }
.fb-leaf.is-top:not(.is-flipped):hover { transform: rotateY(-9deg); }
.fb-leaf.is-top-back.is-flipped:hover { transform: rotateY(-171deg); }
.fb-face { position: absolute; inset: 0; overflow: hidden; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 6px 6px 2px; }
.fb-back { transform: rotateY(180deg); border-radius: 6px 2px 2px 6px; }
.fb-face > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Pli de la reliure, et ombre qui balaie la page pendant qu'elle tourne */
.fb-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.20), rgba(0,0,0,0.05) 5%, transparent 11%); }
.fb-back::after { background: linear-gradient(270deg, rgba(0,0,0,0.20), rgba(0,0,0,0.05) 5%, transparent 11%); }
.fb-cover::after { background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(0,0,0,0.25) 2%, transparent 6%); }
.fb-face::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(0,0,0,0.05), rgba(0,0,0,0.30)); }
.fb-back::before { background: linear-gradient(270deg, rgba(0,0,0,0.05), rgba(0,0,0,0.30)); }
.fb-leaf.is-turning .fb-face::before { animation: fbShade 1.1s ease-in-out; }
@keyframes fbShade { 50% { opacity: 1; } }

.fb-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 50%; background: rgba(24,43,51,0.86); color: #fff; cursor: zoom-in; opacity: 0; transform: scale(.85); transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1), background .3s; box-shadow: 0 8px 18px -6px rgba(0,0,0,0.5); }
.fb-back .fb-zoom { right: auto; left: 10px; }
.fb-zoom svg { width: 100%; height: 100%; }
.fb-face:hover .fb-zoom, .fb-zoom:focus-visible { opacity: 1; transform: none; }
.fb-zoom:hover { background: #1f8f86; }
@media (hover: none) { .fb-zoom { opacity: .9; transform: none; } }

/* Pages texte : intro (encre) et page finale (papier signature) */
.fb-ink, .fb-cta { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--pw) * 0.045); padding: calc(var(--pw) * 0.11); }
.fb-ink { color: #eef6f7; background: radial-gradient(70% 50% at 100% 0%, rgba(63,191,174,0.12), transparent 70%), linear-gradient(160deg, #294451, #182b33); }
.fb-cta { align-items: flex-start; color: #182b33; background: radial-gradient(70% 45% at 100% 100%, rgba(172,214,205,0.34), transparent 70%), linear-gradient(155deg, #f4eadb 0%, #f3efe8 50%, #e6eeeb 100%); }
.fb-k { font-size: calc(var(--pw) * 0.032); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #e6b34f; }
.fb-cta .fb-k { color: #8a6a2a; }
.fb-t { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: calc(var(--pw) * 0.088); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.fb-p { font-size: calc(var(--pw) * 0.042); line-height: 1.5; color: #ccd9dd; text-wrap: pretty; }
.fb-cta .fb-p { color: #475055; }
.fb-sign { margin-top: auto; font-family: 'Lora', Georgia, serif; font-size: calc(var(--pw) * 0.04); color: #bdcfd4; }
.fb-ink .fb-t { margin-top: auto; }
.fb-cta-ico { width: calc(var(--pw) * 0.13); height: calc(var(--pw) * 0.13); padding: calc(var(--pw) * 0.028); border-radius: 50%; background: #182b33; color: #f8e8c2; }
.fb-cta-ico svg { width: 100%; height: 100%; }
.fb-btn { display: inline-flex; align-items: center; margin-top: calc(var(--pw) * 0.02); padding: calc(var(--pw) * 0.035) calc(var(--pw) * 0.06); border-radius: 6px; background: #182b33; color: #f8f4ea; font-size: calc(var(--pw) * 0.036); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 14px 26px -14px rgba(24,43,51,0.7); transition: background .3s, transform .3s; }
.fb-btn:hover { background: #223a43; color: #fff; transform: translateY(-2px); }
.fb-link { font-size: calc(var(--pw) * 0.036); color: #17786f; text-decoration: underline; text-underline-offset: 3px; }
.fb-link:hover { color: #182b33; }

.fb-bar { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); }
.fb-bar .cf-arrow:disabled { opacity: .35; cursor: default; transform: none; background: rgba(233,246,247,0.05); border-color: rgba(233,246,247,0.18); box-shadow: none; }
.fb-cap { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 190px; }
.fb-cap-t { font-size: 15px; font-weight: 500; color: #eef6f7; }
.fb-dots { display: flex; gap: 7px; }
.fb-dot { position: relative; width: 22px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(233,246,247,0.18); cursor: pointer; transition: width .5s cubic-bezier(.2,.7,.2,1), background .4s; }
.fb-dot::before { content: ""; position: absolute; inset: -10px 0; }
.fb-dot.is-on { width: 44px; background: linear-gradient(90deg, #3fbfae, #e6b34f); }
.fb-dot:focus-visible { outline: 2px solid #f5d48e; outline-offset: 3px; }
@media (max-width: 700px) {
  .fb { --pw: 44vw; }
  .fb-zoom { width: 30px; height: 30px; padding: 6px; right: 6px; bottom: 6px; }
  .fb-back .fb-zoom { left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-stage, .fb-book, .fb-leaf, .fb-book::after { transition: none; }
  .fb-leaf.is-turning .fb-face::before { animation: none; }
}
/* Page Livre : titre à gauche, livre feuilletable à droite */
.livre-hero {
  position: relative; max-width: 1240px; margin: 0 auto; scroll-margin-top: 80px;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 40px) var(--sec);
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(36px, 5vw, 72px);
}
.livre-hero-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.livre-hero-tag { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #f3d58f; background: rgba(230,179,79,0.12); border: 1px solid rgba(230,179,79,0.30); }
.livre-hero .fb { --pw: min(300px, 24vw); }
.livre-hero dialog { position: fixed; }
@media (max-width: 960px) {
  .livre-hero { grid-template-columns: 1fr; }
  .livre-hero .fb { --pw: min(300px, 42vw); }
}
@media (max-width: 700px) { .livre-hero .fb { --pw: 44vw; } }

/* =========================================================
   Accueil : photo du bureau découpée par une courbe nette (clipPath #heroCurve, en fractions du cadre),
   le reste du héros en dégradé du sombre de la photo vers le bleu du site.
   La hauteur du héros suit la largeur, pour que l'ordinateur reste à droite du titre.
   ========================================================= */
.hero-photo {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  height: clamp(620px, 45vw, 940px);
  /* Pas de fond opaque : un halo sombre autour de la photo s'efface doucement et laisse voir le bleu du site. */
  background:
    radial-gradient(62% 78% at 78% 34%, rgba(14,16,17,0.78) 0%, rgba(14,16,17,0.5) 32%, rgba(14,16,17,0.22) 56%, rgba(14,16,17,0.07) 74%, rgba(14,16,17,0) 90%);
}
/* Les bords de la photo (gauche, haut, bas) prennent progressivement la teinte du site : la courbe reste nette, sans contraste brutal. */
.hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(34,58,68,0.62) 17%, rgba(34,58,68,0.42) 24%, rgba(34,58,68,0.2) 33%, rgba(34,58,68,0.07) 42%, rgba(34,58,68,0) 50%),
    linear-gradient(180deg, rgba(34,58,68,0.35) 0%, rgba(34,58,68,0) 16%),
    linear-gradient(180deg, rgba(34,58,68,0) 62%, rgba(34,58,68,0.32) 84%, rgba(34,58,68,0.62) 96%); }
.hero-clip-def { position: absolute; width: 0; height: 0; }
.hero-bg-wrap { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 18px 34px rgba(0,0,0,0.32)); }
.hero-bg { position: absolute; inset: 0; display: block; overflow: hidden; clip-path: url(#heroCurve); background: linear-gradient(180deg, #1c272e 0%, #131618 40%, #111315 70%, #1e3039 100%); }
.hero-bg img {
  position: absolute; right: 0; bottom: 4.5%; height: 92%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
  transform-origin: 72% 58%; transform: scale(1.03) translate(calc(var(--hx, 0) * -8px), calc(var(--hy, 0) * -5px));
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  animation: heroIn 2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroIn { from { opacity: 0; filter: brightness(.5) blur(4px); } to { opacity: 1; filter: none; } }
.hero-inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(40px, 4vw, 64px) clamp(20px, 4vw, 40px) clamp(56px, 6vw, 96px); }
.hero-txt { max-width: 560px; }
.hero-txt h1 { text-shadow: 0 2px 30px rgba(0,0,0,0.45); }
@media (max-width: 860px) {
  .hero-photo { flex-direction: column; align-items: stretch; height: auto; background: linear-gradient(180deg, #1f3038 0%, #161c1f 100%); }
  .hero-inner { order: 1; padding-bottom: 12px; }
  .hero-bg-wrap { position: relative; order: 2; inset: auto; filter: none; }
  .hero-bg { position: relative; inset: auto; clip-path: none; background: none; }
  .hero-bg::before, .hero-bg::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
  .hero-bg::before { top: 0; height: 32%; background: linear-gradient(180deg, #161c1f 0%, rgba(22,28,31,0.6) 45%, rgba(22,28,31,0) 100%); }
  .hero-bg::after { bottom: 0; height: 24%; background: linear-gradient(0deg, #223a44, rgba(34,58,68,0)); }
  .hero-bg img { position: static; width: 100%; height: auto; aspect-ratio: 1400 / 961; transform: none; animation: none; -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-bg img { animation: none; transition: none; transform: none; } }
/* Simulateur d'épargne de précaution : version claire, sur le papier ivoire des autres cartes claires */
.ep-paper {
  --ink: #182b33; --ink-2: #475055;
  color: var(--ink);
  background: radial-gradient(420px 300px at 100% 100%, rgba(172,214,205,0.34), transparent 70%), linear-gradient(155deg, #f4eadb 0%, #f3efe8 50%, #e6eeeb 100%);
  border: 1px solid rgba(245,212,142,0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset, 0 30px 70px -34px rgba(0,0,0,0.5);
}
.ep-paper [style*="color:#ccd9dd"], .ep-paper [style*="color:#a9bec5"] { color: var(--ink-2) !important; }
.ep-paper [style*="color:#f3d58f"] { color: #94650f !important; }
.ep-paper [style*="background:rgba(230,179,79,0.16)"] { background: rgba(176,122,20,0.12) !important; color: #8a5e0e !important; border: 1px solid rgba(176,122,20,0.22); }
.ep-paper [data-out-pct] { color: #17786f !important; }
.ep-paper input[type=range] { accent-color: #1f8f86; }
.ep-paper .mois-btn { background: rgba(255,255,255,0.55); border-color: rgba(24,43,51,0.16); color: var(--ink); }
.ep-paper .mois-btn:hover { border-color: rgba(31,143,134,0.5); }
.ep-paper .mois-btn.is-active { background: rgba(31,143,134,0.12); border-color: #1f8f86; color: #17786f; }
.ep-paper .ep-tile { background: rgba(255,255,255,0.6); border-color: rgba(24,43,51,0.1); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 10px 24px -18px rgba(24,43,51,0.35); }
.ep-paper .ep-tile > span:first-child { color: var(--ink-2) !important; }
.ep-paper [data-out-bar] { background: linear-gradient(90deg, #1f8f86, #d3a24a) !important; }
.ep-paper .ep-tile span[style*="rgba(233,246,247,0.12)"] { background: rgba(24,43,51,0.1) !important; }
.ep-paper svg[stroke="#e6b34f"] { stroke: #b07a14; }
/* Épargne de précaution : tuiles de résultats en vert-gris très pâle (le bas du dégradé ivoire), chiffres à l'encre */
.ep-paper .ep-tile { background: linear-gradient(160deg, #eef3f0, #e2ebe8); border-color: rgba(24,43,51,0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 12px 26px -20px rgba(24,43,51,0.4); color: var(--ink); }
.ep-paper .ep-tile > span:first-child, .ep-paper .ep-tile [style*="color:#a9bec5"] { color: #5b6a70 !important; }
.ep-paper .ep-tile [data-out-pct] { color: #17786f !important; }
.ep-paper .ep-tile span[style*="rgba(233,246,247,0.12)"] { background: rgba(24,43,51,0.1) !important; }
.ep-paper [data-out-bar] { background: linear-gradient(90deg, #3fbfae, #e6b34f) !important; }
/* FAQ et Contact : carte « Pas ta question ? » et bandeau d'achat en ivoire, bouton encre comme sur les autres cartes claires */
.faqx-mail, .band-mini {
  --ink: #182b33; --ink-2: #475055;
  color: var(--ink);
  background: radial-gradient(360px 240px at 100% 100%, rgba(172,214,205,0.34), transparent 70%), linear-gradient(155deg, #f4eadb 0%, #f3efe8 50%, #e6eeeb 100%);
  border: 1px solid rgba(245,212,142,0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset, 0 26px 60px -32px rgba(0,0,0,0.5);
}
.faqx-mail:hover { border-color: rgba(176,122,20,0.45); }
.faqx-mail-k, .band-mini-k { color: #8a6a2a; }
.faqx-mail-t, .band-mini-t { color: var(--ink); }
.faqx-mail-a { color: #17786f; }
.band-mini-cover { filter: drop-shadow(0 10px 14px rgba(24,43,51,0.3)); }
.band-mini .btn-soft { color: var(--ink); background: rgba(255,255,255,0.5); border-color: rgba(24,43,51,0.18); }
.band-mini .btn-soft-arrow { background: rgba(31,143,134,0.12); color: #17786f; }
.band-mini .btn-soft:hover { color: var(--ink); background: #fff; border-color: rgba(24,43,51,0.32); box-shadow: 0 12px 24px -14px rgba(24,43,51,0.45); }
.band-mini .h-btn { background: var(--ink) !important; color: #f8f4ea !important; box-shadow: 0 14px 28px -14px rgba(24,43,51,0.6); }
.band-mini .h-btn:hover { background: #22394a !important; color: #fff !important; filter: none; }
/* Mobile : la teinte des bords de la photo (réglage ordinateur) est remplacée par un simple fondu bas vers la couleur du site */
@media (max-width: 860px) {
  .hero-bg::after { inset: auto 0 0 0; height: 24%; background: linear-gradient(0deg, #223a44, rgba(34,58,68,0)); }
}
/* Accueil : la citation de l'auteur dans une bulle aux contours organiques, avec deux petites bulles qui s'en échappent */
.quote-bubble {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, #2e4b58 0%, #27404b 60%, #233a44 100%);
  border: 1px solid rgba(233,246,247,0.12);
  border-radius: 72px 160px 88px 180px / 64px 120px 90px 140px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 40px 80px -46px rgba(0,0,0,0.6);
}
.quote-bubble::before, .quote-bubble::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  background: linear-gradient(160deg, #2b4652, #233a44); border: 1px solid rgba(233,246,247,0.12);
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.6);
}
.quote-bubble::before { width: 34px; height: 34px; left: clamp(56px, 8vw, 110px); bottom: -26px; }
.quote-bubble::after { width: 16px; height: 16px; left: clamp(34px, 5.5vw, 78px); bottom: -52px; }
@media (max-width: 700px) { .quote-bubble { border-radius: 48px 90px 56px 100px / 44px 80px 60px 90px; } }
/* Accueil : les fiches bonus — vraie photo dans un cadre organique, éventail des vraies pages, liste numérotée */
.fx-sec { max-width: 1200px; margin: 0 auto; padding: var(--sec) clamp(20px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(48px, 7vw, 104px); }
.fx-visual { position: relative; padding-bottom: 8%; }
.fx-photo { overflow: hidden; aspect-ratio: 5 / 4; border-radius: 64px 180px 80px 160px / 60px 140px 90px 150px; box-shadow: 0 40px 80px -42px rgba(0,0,0,0.65); border: 1px solid rgba(233,246,247,0.1); }
.fx-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; display: block; transform: scale(1.04); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.fx-visual:hover .fx-photo img { transform: scale(1.08); }
.fx-stack { position: absolute; right: -4%; bottom: -2%; width: 34%; aspect-ratio: 0.707; }
.fx-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 26px 40px -18px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.18);
  transition: transform .9s cubic-bezier(.2,.75,.25,1); }
.fx-stack img:nth-child(1) { transform: rotate(9deg) translate(16%, -6%); }
.fx-stack img:nth-child(2) { transform: rotate(3deg) translate(7%, -2%); }
.fx-stack img:nth-child(3) { transform: rotate(-4deg); }
.fx-visual:hover .fx-stack img:nth-child(1) { transform: rotate(14deg) translate(32%, -12%); }
.fx-visual:hover .fx-stack img:nth-child(2) { transform: rotate(5deg) translate(15%, -5%); }
.fx-visual:hover .fx-stack img:nth-child(3) { transform: rotate(-7deg) translate(-6%, 2%); }
.fx-badge { position: absolute; left: 7%; top: 7%; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: #182b33;
  background: #f4f1ea; box-shadow: 0 12px 26px -12px rgba(0,0,0,0.5); }
.fx-txt { display: flex; flex-direction: column; gap: 16px; }
.fx-k { font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #bdcfd4; }
.fx-txt h2 { margin: 0; font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
.fx-intro { margin: 0; font-style: italic; font-size: 17px; line-height: 1.55; color: #ccd9dd; text-wrap: pretty; }
.fx-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.fx-list li { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-top: 1px solid rgba(233,246,247,0.12); }
.fx-list li:last-child { border-bottom: 1px solid rgba(233,246,247,0.12); }
.fx-n { flex: none; width: 32px; font-family: 'Lora', Georgia, serif; font-size: 22px; color: #e6b34f; }
.fx-list li > span:last-child { display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; line-height: 1.5; color: #a9bec5; }
.fx-list b { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: 19px; color: #eef6f7; }
@media (max-width: 900px) {
  .fx-sec { grid-template-columns: 1fr; }
  .fx-visual { max-width: 560px; }
  .fx-stack { right: 0; width: 32%; }
}
@media (prefers-reduced-motion: reduce) { .fx-photo img, .fx-stack img { transition: none; } }
/* Cas : photo de l'activité dans une forme organique, coin haut droit */
.case-photo { position: absolute; z-index: 0; top: -9%; right: -7%; width: 46%; aspect-ratio: 1; margin: 0; pointer-events: none; }
.case-photo::before { content: ""; position: absolute; inset: -14px; border-radius: 58% 42% 50% 50% / 46% 56% 44% 54%; border: 1.5px dashed rgba(31,143,134,0.38); transform: rotate(-8deg); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.case-down .case-photo::before { border-color: rgba(208,87,74,0.36); }
.case-photo img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; border: 6px solid #fbf8f2; box-shadow: 0 22px 44px -22px rgba(24,43,51,0.55); transition: transform .9s cubic-bezier(.2,.7,.2,1), border-radius 1.2s ease; }
.case-down .case-photo img { border-radius: 54% 46% 58% 42% / 44% 56% 48% 52%; }
.case-photo figcaption { position: absolute; left: 4%; bottom: 13%; padding: 5px 11px; border-radius: 999px; background: var(--ink); color: #f4eadb; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 8px 18px -8px rgba(24,43,51,0.5); }
.case-down .case-photo figcaption { background: #7a2f27; }
.case:hover .case-photo img { transform: scale(1.03) rotate(-2deg); border-radius: 52% 48% 56% 44% / 46% 54% 46% 54%; }
.case:hover .case-photo::before { transform: rotate(6deg); }
.case-photo ~ .case-body { padding-right: 40%; }
.case-photo ~ .case-body .case-d { max-width: none; }
@media (max-width: 760px) {
  .case-photo { position: relative; top: auto; right: auto; width: 62%; max-width: 260px; margin: 22px 0 -6px auto; margin-right: 18px; }
  .case-photo ~ .case-body { padding-right: clamp(26px, 3vw, 36px); }
}
@media (prefers-reduced-motion: reduce) { .case-photo img, .case-photo::before { transition: none; } }
/* Épargne : panneau organique, bocal qui se remplit et bulles de résultats */
.ep-wave { position: relative; isolation: isolate; }
.ep-paper.ep-play { --lvl: .5; background: none; border: 0; box-shadow: none; display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(28px, 4vw, 56px); }
.ep-blob { flex: 1 1 340px; display: flex; flex-direction: column; gap: 22px; padding: clamp(30px, 4vw, 52px) clamp(26px, 3.6vw, 48px); background: radial-gradient(320px 240px at 100% 100%, rgba(172,214,205,0.34), transparent 70%), linear-gradient(155deg, #f4eadb 0%, #f3efe8 50%, #e6eeeb 100%); border: 1px solid rgba(245,212,142,0.55); border-radius: 46px 120px 52px 150px / 52px 90px 64px 110px; box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset, 0 30px 70px -34px rgba(0,0,0,0.55); }
.ep-orbit { flex: 1.1 1 380px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(26px, 3vw, 36px); }
.ep-jar { position: relative; width: clamp(240px, 27vw, 350px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 34% 28%, #fbf8f2, #f1ebe0 62%, #e3ebe7); border: 6px solid #fbf8f2; box-shadow: 0 0 0 1px rgba(245,212,142,0.6), 0 34px 70px -30px rgba(0,0,0,0.6), inset 0 -18px 40px -24px rgba(24,43,51,0.3); }
.ep-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--lvl) * 100%); background: linear-gradient(180deg, #a6ddd4, #63c0b2); transition: height 1s cubic-bezier(.2,.7,.2,1); }
.ep-liquid svg { position: absolute; left: 0; bottom: calc(100% - 1px); width: 200%; height: 22px; animation: epDrift 7s linear infinite; }
.ep-liquid .ep-lw1 path { fill: #a6ddd4; }
.ep-liquid .ep-lw2 { height: 28px; animation-duration: 11s; animation-direction: reverse; }
.ep-liquid .ep-lw2 path { fill: rgba(166,221,212,0.5); }
.ep-jar-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink); text-align: center; }
.ep-jar-k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #3e4a4f; }
.ep-jar-v { font-family: 'Lora', Georgia, serif; font-size: clamp(48px, 5vw, 64px); font-weight: 500; line-height: 1.05; color: var(--ink) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.ep-stats { width: 100%; max-width: 480px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: center; }
.ep-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ep-stat-k { font-size: 13px; line-height: 1.3; color: #a9bec5; }
.ep-stat-v { font-family: 'Lora', Georgia, serif; font-size: clamp(24px, 2.2vw, 29px); font-weight: 500; line-height: 1.1; color: #f4efe6; }
.ep-stat-gap .ep-stat-v { color: #f0a79b; }
.ep-stat-time .ep-stat-v { color: #8fe3d7; }
@keyframes epDrift { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .ep-blob { border-radius: 36px 70px 40px 80px / 40px 60px 44px 70px; }
  .ep-paper.ep-play { flex-direction: column; align-items: stretch; gap: 16px; }
  .ep-blob { flex: none; gap: 16px; padding: 24px 22px; }
  .ep-orbit { display: contents; }
  .ep-jar { order: -1; align-self: center; width: 150px; border-width: 4px; }
  .ep-jar-k { font-size: 9px; }
  .ep-jar-v { font-size: 34px; }
  .ep-stats { order: 1; max-width: none; }
  .ep-stats { gap: 10px; padding-top: 8px; }
  .ep-stat-k { font-size: 12px; }
  .ep-stat-v { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .ep-liquid, .ep-liquid svg { animation: none; transition: none; } }
/* Classeur : photo réelle du classeur à l'écran, coins arrondis organiques */
.xl-photo { display: block; width: 100%; height: auto; }
/* Pack (accueil) : cartes aux bords organiques, pile de feuilles inclinée, visuel posé sur une forme ronde */
.deck-card { border-radius: 44px 150px 48px 120px / 48px 110px 56px 96px; }
.deck-card:not(.is-front) { opacity: .5; filter: none; transform: translateY(-40px) scale(0.93) rotate(-1.6deg); }
.deck-card:not(.is-front):hover { opacity: .7; transform: translateY(-50px) scale(0.93) rotate(-1.6deg); }
.deck-vis { position: relative; isolation: isolate; }
.deck-vis::before { content: ""; position: absolute; z-index: -1; width: min(88%, 460px); aspect-ratio: 1; border-radius: 52% 48% 44% 56% / 46% 54% 48% 52%; background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.85), rgba(255,255,255,0) 62%), linear-gradient(150deg, rgba(230,179,79,0.20), rgba(63,191,174,0.24)); }
.deck-vis::after { content: ""; position: absolute; z-index: -1; width: min(98%, 520px); aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(23,120,111,0.22); }
.deck-book .deck-vis::after { border-color: rgba(168,116,26,0.24); }
.deck-card .pack-list { gap: 10px; }
.deck-card .pack-list li, .deck-card .pack-list li:last-child { padding: 10px 16px 10px 10px; background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.7); border-radius: 22px 40px 22px 40px; }
.deck-card .pack-list li:nth-child(even) { margin-left: clamp(0px, 2vw, 22px); border-radius: 40px 22px 40px 22px; }
.deck-card .pack-ico { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; }
@media (max-width: 760px) {
  .deck-card { border-radius: 30px 70px 34px 60px / 34px 56px 40px 50px; }
  .deck-card .pack-list li:nth-child(even) { margin-left: 0; }
  .deck-vis::before { width: 200px; }
  .deck-vis::after { width: 236px; }
}

/* 16 onglets : fenêtre aux coins organiques, familles en simple titre et cartes qui remplissent chaque ligne */
.xl.xl-play { border-radius: 30px 30px 30px 90px / 30px 30px 30px 70px; background: linear-gradient(160deg, #26414c, #1c323b); }
.xl-play .xl-foot { padding: 10px 28px 10px 60px; }
.xl-play .xl-grid.xl-grid-6 { grid-template-columns: repeat(60, minmax(0, 1fr)); gap: 10px; padding: 8px clamp(20px, 2.4vw, 32px) clamp(22px, 2.6vw, 34px); }
.xl-play .xl-corner, .xl-play .xl-col, .xl-play .xl-row, .xl-play .xl-tab { display: none; }
.xl-play .xl-ch { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 18px; padding: 0 4px; border: 0; box-shadow: none; background: none; }
.xl-play .xl-ch > span { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.xl-play .xl-cell { min-height: 78px; padding: 14px 18px; border: 1px solid rgba(233,246,247,0.09); border-radius: 20px; background: rgba(233,246,247,0.045); cursor: default; transition: background .3s, border-color .3s; }
.xl-play .xl-cell[data-ref$="1"] { grid-column: span 10; }
.xl-play .xl-cell[data-ref$="2"] { grid-column: span 15; }
.xl-play .xl-cell[data-ref$="3"] { grid-column: span 12; }
.xl-play .xl-cell:hover, .xl-play .xl-cell.is-sel { background: rgba(233,246,247,0.09); border-color: rgba(233,246,247,0.14); }
.xl-play .xl-cell.is-sel::after { inset: -1px; border: 1.5px solid color-mix(in srgb, var(--c) 65%, #fff); border-radius: inherit; box-shadow: none; }
.xl-play .xl-cell.is-sel::before { display: none; }
.xl-play .xl-cell[data-go] { cursor: pointer; }
.xl-play .xl-cell[data-go] .xl-t::after { content: " →"; color: color-mix(in srgb, var(--c) 55%, #fff); white-space: nowrap; }
.xl-play .xl-t { font-size: 14.5px; }
@media (max-width: 860px) {
  .xl.xl-play { border-radius: 26px 26px 26px 56px / 26px 26px 26px 46px; }
  .xl-play .xl-formula { display: none; }
  .xl-play .xl-grid.xl-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px 14px 20px; }
  .xl-play .xl-cell[data-ref] { grid-column: span 1; min-height: 66px; padding: 12px 14px; border-radius: 16px; }
  .xl-play .xl-cell[data-ref="F3"] { grid-column: 1 / -1; }
  .xl-play .xl-t { font-size: 14px; }
}

/* Avant / après : photo à gauche, sur toute la hauteur ; titre, interrupteur et liste à droite */
.ba-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(40px, 6vw, 88px); align-items: stretch; }
.ba-side { display: flex; flex-direction: column; gap: var(--gap-head); }
.ba-head { display: flex; flex-direction: column; gap: 16px; }
.ba-head h2 { font-size: clamp(32px, 4vw, 52px); }
.ba-photo { position: relative; margin: 0; }
.ba-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; border: 1px solid rgba(245,212,142,0.45); box-shadow: 0 40px 80px -36px rgba(0,0,0,0.7); }
.ba-head .ba-switch { align-self: flex-start; margin-top: 12px; }
.ba-wrap.is-after .ba-knob { transform: translateX(100%); background: linear-gradient(135deg, rgba(63,191,174,0.32), rgba(63,191,174,0.14)); border-color: rgba(127,220,207,0.55); }
.ba-wrap.is-after .ba-num { color: #6fdccd; }
.ba-wrap.is-after .ba-front { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.ba-wrap.is-after .ba-back { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 860px) {
  .ba-wrap { grid-template-columns: 1fr; }
  .ba-head { align-items: center; text-align: center; max-width: 640px; margin: 0 auto; }
  .ba-head .ba-switch { align-self: center; }
  .ba-photo { order: 1; max-width: 560px; justify-self: center; width: 100%; }
  .ba-photo img { position: static; height: auto; aspect-ratio: 4 / 3; border-radius: 22px; }
}
@media (max-width: 600px) {
  .ba-opt { padding: 10px 14px; font-size: 13px; }
  .ba-row { grid-template-columns: 36px minmax(0, 1fr); padding: 18px 0; }
  .ba-title { font-size: 20px; }
}
/* Classeur : visite guidée, la capture zoome sur la zone clé de chaque onglet et une note l'explique */
.tour { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, 0.72fr); gap: clamp(24px, 3vw, 44px); align-items: center; }
.tour-screen { position: relative; aspect-ratio: 1366 / 853; overflow: hidden; border-radius: 22px; background: #1b2f38; border: 1px solid rgba(245,212,142,0.4); box-shadow: 0 40px 80px -36px rgba(0,0,0,0.75); }
.tour-zoom { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.6,0,.2,1); }
.tour-img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.tour-img.is-on { opacity: 1; }
.tour-spot { position: absolute; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 2px var(--c, #3fbfae), 0 0 0 9999px rgba(14,27,34,0.5); transition: left 1.1s cubic-bezier(.6,0,.2,1), top 1.1s cubic-bezier(.6,0,.2,1), width 1.1s cubic-bezier(.6,0,.2,1), height 1.1s cubic-bezier(.6,0,.2,1), box-shadow .6s; }
.tour-note { position: absolute; z-index: 2; margin: 0; max-width: 400px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px 13px 12px; border-radius: 16px; background: rgba(246,241,232,0.97); color: #182b33; font-size: 14.5px; line-height: 1.45; box-shadow: 0 18px 40px -18px rgba(0,0,0,0.7); transition: left 1.1s cubic-bezier(.6,0,.2,1), top 1.1s cubic-bezier(.6,0,.2,1), opacity .35s; }
.tour-note.is-out { opacity: 0; }
.tour-note-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c, #3fbfae); color: #102028; font-size: 11px; font-weight: 600; }
.tour-list { display: flex; flex-direction: column; gap: 4px; }
.tour-fam { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #9db2b9; }
.tour-fam:first-child { margin-top: 0; }
.tour-fam::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.tour-step { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 14px 11px 16px; border: 0; border-radius: 14px; background: none; color: #bdcfd4; font-family: inherit; text-align: left; cursor: pointer; transition: background .35s, color .35s; }
.tour-step::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--c); opacity: 0; transition: opacity .35s; }
.tour-step:hover { color: #eef6f7; background: rgba(233,246,247,0.04); }
.tour-step.is-on { color: #eef6f7; background: rgba(233,246,247,0.07); }
.tour-step.is-on::before { opacity: 1; }
.tour-t { font-size: 15px; font-weight: 500; }
.tour-d { max-height: 0; overflow: hidden; font-size: 13.5px; line-height: 1.45; color: #a9bec5; transition: max-height .5s ease; }
.tour-step.is-on .tour-d { max-height: 80px; }
.tour-prog { position: absolute; left: 16px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--c); opacity: .7; transform: scaleX(0); transform-origin: left; }
.tour-prog.run { animation: deckProg 7s linear forwards; }
.tour:hover .tour-prog.run { animation-play-state: paused; }
@media (max-width: 860px) {
  .tour { grid-template-columns: 1fr; }
  .tour-screen { border-radius: 16px; }
  .tour-note { left: 6px !important; right: 6px; max-width: none; gap: 8px; font-size: 12.5px; line-height: 1.35; padding: 7px 10px 8px 8px; border-radius: 12px; }
  .tour-note-n { width: 22px; height: 22px; font-size: 10px; }
  .tour-list { flex-direction: row; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .tour-fam { display: none; }
  .tour-step { flex: none; width: auto; scroll-snap-align: start; padding: 9px 14px; border: 1px solid rgba(233,246,247,0.12); border-radius: 999px; }
  .tour-step::before, .tour-d { display: none; }
  .tour-prog { left: 14px; right: 14px; bottom: 3px; }
  .tour-t { font-size: 14px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .tour-zoom, .tour-spot, .tour-note, .tour-img { transition: none; } }

/* Classeur, héros : même forme arrondie que la photo des fiches */
.xl-frame { position: relative; }
.xl-photo { border-radius: 64px 180px 80px 160px / 60px 140px 90px 150px; border: 1px solid rgba(233,246,247,0.1); box-shadow: 0 40px 80px -42px rgba(0,0,0,0.65); }
@media (max-width: 760px) { .xl-photo { border-radius: 36px 90px 44px 80px / 34px 72px 50px 76px; } }
/* La méthode : cadran fin, graduations et aiguille qui vise l'étape en cours */
.cycle-ticks { fill: none; stroke: rgba(233,246,247,0.24); stroke-width: 6; stroke-dasharray: 0.45 5.55; }
.cycle-inner { fill: none; stroke: rgba(233,246,247,0.13); stroke-width: 1; }
.cycle-track { stroke: rgba(233,246,247,0.16); stroke-width: 1.2; }
.cycle-prog { stroke-width: 2; filter: none; }
.cycle-hand { transform-origin: 200px 200px; transition: transform 1s cubic-bezier(.5,0,.2,1); }
.cycle-hand line { stroke: #e6b34f; stroke-width: 1.2; stroke-linecap: round; }
.cycle-hand circle { fill: #e6b34f; }
.cycle-center { width: 52%; }
.cycle-k { color: #bdcfd4; }
.cycle-k b { color: #e6b34f; }
.cycle-t { color: #f4f8f9; }
.cycle-d { color: #dbe7ea; }
.cycle-node { width: 38px; height: 38px; margin: -19px 0 0 -19px; font-size: 15px; background: #223a44; border: 1px solid rgba(233,246,247,0.26); color: #cfdde1; box-shadow: none; }
.cycle-node.is-done { background: #223a44; border-color: #3fbfae; color: #8fe3d7; }
.cycle-node.is-on, .cycle-node-gold.is-on { scale: 1.16; background: #f6f1e8; border-color: #f6f1e8; color: #182b33; box-shadow: 0 0 0 4px rgba(246,241,232,0.1); }
@media (max-width: 520px) { .cycle-node { width: 32px; height: 32px; margin: -16px 0 0 -16px; font-size: 13px; } .cycle-center { width: 56%; gap: 5px; } .cycle-t { font-size: 18px; } .cycle-d { font-size: 12.5px; line-height: 1.4; } }
@media (prefers-reduced-motion: reduce) { .cycle-hand { transition: none; } }
/* Classeur : visite guidée sur le fond sombre, capture cernée d'un liseré et étape active en crème */
.tour-lit .tour-screen { border-color: rgba(245,222,180,0.5); box-shadow: 0 0 0 5px rgba(233,246,247,0.04), 0 40px 80px -36px rgba(0,0,0,0.75); }
.tour-lit .tour-step.is-on { color: #182b33; background: linear-gradient(155deg, #f6eee0, #eef2ee); box-shadow: 0 16px 34px -22px rgba(0,0,0,0.7); }
.tour-lit .tour-step.is-on .tour-d { color: #475055; }
.tour-d { max-height: none; height: 0; transition: height .5s ease; }
.tour-step.is-on .tour-d { max-height: none; height: 2.9em; }
@media (max-width: 1120px) { .tour-step.is-on .tour-d { height: 4.35em; } }
/* Classeur : compteur du titre et finitions */
.band-note { margin: 0; max-width: 560px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 480px) { .hero-k { font-size: 11px !important; letter-spacing: 0.12em !important; } }
.tour-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
@media (max-width: 860px) {
  .tour-screen { overflow: visible; margin-bottom: 70px; }
  .tour-note { top: calc(100% + 10px) !important; left: 0 !important; right: 0; min-height: 56px; align-items: center; }
}
#apercu { scroll-margin-top: 40px; }
.hero-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero-facts { font-size: 14px; color: #a9bec5; }