/* Start Academia — feuille de style unique
   Charte : bleu vif #2F44CE · bleu moyen #6988EE · bleu pâle #B9CDFF · orange vif #FE5500 · blanc
   Titres LT Wave (Exo 2 en attendant les fichiers) · texte IBM Plex Sans · repères IBM Plex Mono */

:root {
  --nuit: #0b1033;
  --nuit-2: #141c58;
  --ivoire: #f2f3f8;
  --bleu: #2f44ce;
  --bleu-m: #6988ee;
  --bleu-p: #b9cdff;
  --orange: #fe5500;
  --encre: #10153a;
  --gris: #5a6085;
  --titre: "LT Wave", "Exo 2", sans-serif;
  --texte: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --bord: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--nuit);
  color: #fff;
  font: 400 1.0625rem/1.6 var(--texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; }
::selection { background: var(--orange); color: var(--nuit); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
html { scrollbar-color: var(--bleu-m) var(--nuit); }

h1, h2, h3 { font-family: var(--titre); font-weight: 500; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
.cache-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evite { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--encre); padding: 10px 16px; border-radius: 8px; }
.evite:focus { top: 12px; }

/* ---------- Bouton (une seule action, une seule forme) ---------- */
.action {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 10px 0 24px;
  border-radius: 999px; background: var(--orange); color: var(--nuit);
  font: 600 1rem/1 var(--texte); text-decoration: none;
  box-shadow: 0 10px 24px -10px rgb(7 10 36 / .55);
  transition: transform .2s var(--sortie), box-shadow .2s var(--sortie);
}
.action svg { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: rgb(11 16 51 / .12); transition: transform .2s var(--sortie); }
.action:active { transform: scale(.97); }
@media (hover: hover) {
  .action:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgb(7 10 36 / .6); }
  .action:hover svg { transform: translate(2px, -2px); }
}
.action.compacte { min-height: 44px; padding-left: 18px; font-size: .9375rem; }
.action.compacte svg { width: 28px; height: 28px; padding: 7px; }

/* ---------- En-tête ---------- */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, transform .4s var(--sortie); }
.entete .barre { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; padding: 0 var(--bord); }
.entete.pleine { background: rgb(11 16 51 / .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.marque { display: flex; align-items: center; gap: 10px; }
.marque img:first-child { width: 38px; height: 38px; border-radius: 10px; }
/* Logo animé : le « A » tourne avec le défilement, le triangle orange (l'IA) se détache quand on bouge */
.logo-anime { position: relative; flex: none; width: 38px; height: 38px; border-radius: 10px; perspective: 140px; background: radial-gradient(120% 90% at 30% 10%, #5a73ff, #2f44ce 55%, #1d2b98); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 18px -8px rgb(47 68 206 / .9); }
.logo-anime svg { position: absolute; inset: 3px; width: 32px; height: 32px; overflow: visible; }
.la-a { transform: rotateY(var(--tour, 0deg)); filter: drop-shadow(0 1px 1px rgb(11 16 51 / .35)); backface-visibility: visible; }
.la-t { transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--tr, 0deg)); transform-origin: 80% 80%; filter: drop-shadow(0 0 var(--lueur, 0px) #ff7a3d); }
.logo-anime.arrive .la-a { animation: la-tour 1.1s var(--sortie) both; }
.logo-anime.arrive .la-t { animation: la-retour 1.1s .25s var(--sortie) both; }
@keyframes la-tour { from { transform: rotateY(-360deg) scale(.6); opacity: 0; } to { transform: rotateY(0deg) scale(1); opacity: 1; } }
@keyframes la-retour { from { transform: translate(9px, -9px) rotate(40deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .logo-anime.arrive svg { animation: none; } }
.marque img:last-child { width: auto; height: 27px; filter: brightness(0) invert(1); }
.menu { display: flex; gap: 32px; }
.menu a { font-size: .9375rem; text-decoration: none; opacity: .82; }
.menu a:hover { opacity: 1; }
.droite { display: flex; align-items: center; gap: 28px; }
.droite .apprenant { font-size: .875rem; opacity: .68; text-decoration: none; padding-left: 28px; border-left: 1px solid rgb(255 255 255 / .22); }

.menu-mobile { display: none; position: relative; }
.menu-mobile summary { list-style: none; cursor: pointer; padding: 10px 16px; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; font-size: .9375rem; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile nav { position: absolute; right: 0; top: calc(100% + 10px); display: grid; min-width: 220px; padding: 8px 20px; border-radius: 16px; background: var(--nuit-2); box-shadow: 0 20px 40px -16px rgb(0 0 0 / .6); }
.menu-mobile nav a { padding: 12px 0; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .12); }
.menu-mobile nav a:last-child { border-bottom: 0; }

/* ---------- 1. Ouverture : la démo ---------- */
.demo {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 72px); align-items: center;
  padding: 120px var(--bord) 64px;
  background-color: var(--nuit);
  background-image: radial-gradient(rgb(185 205 255 / .18) 1px, transparent 1.3px); background-size: 24px 24px;
}
.demo h1 { font-size: clamp(2.8rem, 6.2vw, 5.6rem); margin-bottom: 20px; }
.demo .promesse { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: rgb(255 255 255 / .9); max-width: 32ch; margin-bottom: 28px; }
.recherche { position: relative; max-width: 560px; }
.recherche label { display: block; font-size: .9375rem; font-weight: 600; margin-bottom: 10px; }
.champ { position: relative; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 18px 40px -18px rgb(0 0 0 / .6); }
.champ input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 18px; font: 400 1.0625rem var(--texte); color: var(--encre); }
.champ input::placeholder { color: #7a7f9e; }
.champ input:focus { outline: none; }
.champ:focus-within { outline: 2px solid var(--orange); outline-offset: 3px; }
.champ input[aria-invalid="true"]::placeholder { color: #c0392b; }
.champ button { flex: none; min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--orange); color: var(--nuit); font: 600 1rem var(--texte); cursor: pointer; transition: transform .2s var(--sortie); }
.champ button:active { transform: scale(.97); }
.champ button:disabled { opacity: .75; cursor: progress; }
#suggestions { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 8px); list-style: none; background: #fff; color: var(--encre); border-radius: 18px; padding: 6px; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .6); }
#suggestions li { padding: 11px 14px; border-radius: 12px; cursor: pointer; }
#suggestions li[aria-selected="true"], #suggestions li:hover { background: #e8edff; }
.aide { margin-top: 10px; font-size: .875rem; color: rgb(255 255 255 / .66); }
.apres-demo { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .16); max-width: 560px; animation: entre .6s var(--sortie) both; }
.apres-demo p { font: 500 1.25rem/1.3 var(--titre); margin-bottom: 16px; max-width: 30ch; }
.ou { margin-top: 26px; font-size: .9375rem; color: rgb(255 255 255 / .8); max-width: 46ch; }
.ou a { color: #fff; font-weight: 600; }
.confiance { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: .875rem; color: rgb(255 255 255 / .72); }
.confiance span { display: inline-flex; align-items: center; gap: 8px; }
.confiance svg { width: 15px; height: 15px; fill: var(--orange); }

/* La bulle, qui devient le dossier quand on lance la démo */
.bulle-demo {
  position: relative; height: min(76vh, 720px); border-radius: 50%; overflow: hidden;
  background: var(--nuit-2); box-shadow: 0 0 0 1px rgb(185 205 255 / .3), 0 0 0 18px rgb(11 16 51), 0 0 0 19px rgb(185 205 255 / .18);
  transition: border-radius .9s var(--sortie), box-shadow .9s var(--sortie);
}
.bulle-demo > img, .bulle-demo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; transition: opacity .9s var(--sortie), transform 1.4s var(--sortie); }
.bulle-demo > video { object-position: 50% 50%; background: var(--nuit-2); }
.bulle-demo > video, .bulle-demo > img { scale: 1.06; }
.bulle-demo { will-change: transform; }
.film-pause { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 2; padding: 7px 14px; border: 1px solid rgb(255 255 255 / .5); border-radius: 999px; background: rgb(11 16 51 / .55); color: #fff; font: .75rem var(--mono); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.film-pause:hover { background: rgb(11 16 51 / .8); }
.bulle-demo.ouverte .film-pause { display: none; }
.bulle-demo.ouverte { border-radius: 28px; box-shadow: 0 0 0 1px rgb(185 205 255 / .25), 0 40px 80px -40px rgb(0 0 0 / .8); }
.bulle-demo.ouverte > img, .bulle-demo.ouverte > video { opacity: .1; transform: scale(1.08); }
.dossier { position: absolute; inset: 0; overflow-y: auto; padding: clamp(24px, 3vw, 40px); overscroll-behavior: contain; scrollbar-width: thin; }
.dossier:focus { outline: none; }
.d-tete { font-size: .875rem; color: var(--bleu-p); margin-bottom: 6px; }
.dossier h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.d-ville { color: rgb(255 255 255 / .74); margin: 4px 0 18px; }
.d-attente { color: rgb(255 255 255 / .74); margin-top: 16px; }
.d-attente::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--orange); animation: pouls 1s ease-in-out infinite alternate; }
@keyframes pouls { to { opacity: .25; } }
.d-etapes { list-style: none; counter-reset: d; }
.d-etapes li { counter-increment: d; display: grid; grid-template-columns: 30px 1fr; padding: 14px 0; border-top: 1px solid rgb(255 255 255 / .14); animation: entre .5s var(--sortie) both; }
.d-etapes li::before { content: "✓"; grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: var(--nuit); font: 700 .75rem/20px var(--texte); text-align: center; margin-top: 2px; }
.d-etapes h3 { font: 600 1rem var(--texte); letter-spacing: 0; margin-bottom: 4px; }
.d-etapes li > div { color: rgb(255 255 255 / .82); font-size: .9375rem; }
.d-etapes strong { color: #fff; }
.d-etapes ul { padding-left: 18px; }
.d-etapes ul li { display: list-item; border: 0; padding: 2px 0; animation: none; }
.d-etapes ul li::before { display: none; }
.d-note { display: block; margin-top: 4px; font-size: .8125rem; color: rgb(255 255 255 / .6); }
.dossier table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.dossier th { text-align: left; font-weight: 400; color: rgb(255 255 255 / .6); padding: 2px 8px 6px 0; }
.dossier td { white-space: nowrap; padding: 6px 8px 6px 0; border-top: 1px solid rgb(255 255 255 / .1); }
.dossier td:last-child, .dossier th:last-child { text-align: right; padding-right: 0; }
@keyframes entre { from { opacity: 0; transform: translateY(8px); } }
.d-temps { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .14); font: 500 1.15rem var(--titre); color: #ffd3bd; }
.d-suite { margin-top: 16px; display: grid; gap: 14px; justify-items: start; }
.d-suite p { color: rgb(255 255 255 / .86); max-width: 52ch; }
.d-autre { background: none; border: 0; color: #fff; font: 600 .9375rem var(--texte); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; padding: 6px 0; }
.d-source { margin-top: 18px; font-size: .78rem; color: rgb(255 255 255 / .56); }

/* ---------- 2. Partenaires ---------- */
.partenaires { padding: 56px var(--bord); border-block: 1px solid rgb(255 255 255 / .08); }
.partenaires p { text-align: center; font-size: .875rem; color: rgb(255 255 255 / .66); margin-bottom: 22px; }
.noms { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; max-width: 1180px; margin: 0 auto; }
.noms li { font: 500 1.2rem var(--titre); color: rgb(255 255 255 / .62); white-space: nowrap; }

/* ---------- 3. Manifeste ---------- */
/* ---------- Manifeste : le paperboard tactile et le grand « A » ---------- */
.manifeste { position: relative; background: var(--ivoire); color: var(--encre); padding-bottom: 120px; }
.defile-pb { height: 560vh; }
.scene-pb { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: 96px var(--bord) 40px; background-image: radial-gradient(rgb(47 68 206 / .12) 1px, transparent 1.3px); background-size: 24px 24px; }
/* l'écran tactile sur pied, comme ceux des salles de formation */
.paperboard { position: relative; justify-self: center; height: min(66vh, 720px); margin-top: -4vh; aspect-ratio: 3 / 4; margin: 0; }
.pb-ecran { position: relative; height: 100%; border-radius: 22px; padding: 16px; background: linear-gradient(160deg, #23284a, #0b0f2a 60%); box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 50px 80px -40px rgb(11 16 51 / .65), 0 20px 30px -20px rgb(11 16 51 / .5); }
.pb-ecran::before { content: ""; position: absolute; inset: 16px; border-radius: 8px; background: #fcfcfe; background-image: radial-gradient(rgb(47 68 206 / .14) 1px, transparent 1.2px); background-size: 22px 22px; box-shadow: inset 0 0 0 1px rgb(16 21 58 / .08), inset 0 18px 30px -24px rgb(16 21 58 / .25); }
.pb-ecran::after { content: ""; position: absolute; inset: 16px; border-radius: 8px; background: linear-gradient(115deg, rgb(255 255 255 / .55), transparent 32%); pointer-events: none; }
.pb-barre { position: absolute; z-index: 2; left: 34px; right: 34px; top: 30px; display: flex; justify-content: space-between; font: .75rem var(--mono); color: var(--gris); }
.pb-num b { color: var(--bleu); font-weight: 600; }
.pb-outils { position: absolute; z-index: 2; left: 30px; top: 50%; translate: 0 -50%; display: grid; gap: 12px; padding: 10px 7px; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px -8px rgb(16 21 58 / .35); }
.pb-outils i { width: 14px; height: 14px; border-radius: 50%; }
.o-bleu { background: var(--bleu); } .o-orange { background: var(--orange); box-shadow: 0 0 0 3px #ffd9c6; } .o-encre { background: var(--encre); } .o-gomme { background: #fff; border: 1.5px solid #c9cde0; border-radius: 4px !important; }
.pb-pages { position: absolute; inset: 16px; perspective: 1400px; }
.pb-page { position: absolute; inset: 0; display: grid; align-content: center; padding: 70px 46px 60px 80px; transform-origin: 50% 0; backface-visibility: hidden; opacity: 0; transform: rotateX(0); transition: transform .7s var(--sortie), opacity .45s; }
.pb-page.vue { opacity: 1; }
.pb-page.tournee { opacity: 0; transform: rotateX(-105deg); }
.manifeste .pb-texte { max-width: none; font: 500 min(5vh, 3.3rem)/1.06 var(--titre); letter-spacing: -.02em; color: var(--encre); text-wrap: balance; clip-path: inset(0 100% 0 0); }
.pb-page.vue .pb-texte { clip-path: inset(0 0 0 0); transition: clip-path 1.1s .2s cubic-bezier(.6, .1, .3, 1); }
.pb-texte em { font-style: normal; color: var(--bleu); background: linear-gradient(transparent 64%, rgb(254 85 0 / .32) 64%, rgb(254 85 0 / .32) 90%, transparent 90%) no-repeat 0 0 / 0% 100%; }
.pb-page.vue .pb-texte em { background-size: 100% 100%; transition: background-size .6s 1.1s var(--sortie); }
.manifeste .pb-preuves { max-width: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; font: .8125rem var(--mono); color: var(--gris); opacity: 0; transition: opacity .5s 1.3s; }
.pb-page.vue .pb-preuves { opacity: 1; }
.pb-qualiopi { color: var(--bleu); }
.pb-jauge { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 30px; height: 2px; border-radius: 2px; background: rgb(16 21 58 / .08); }
.pb-jauge span { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--bleu-m), var(--orange)); border-radius: 2px; }
.pb-plumier { position: absolute; left: 22%; right: 22%; bottom: -12px; height: 12px; border-radius: 0 0 8px 8px; background: #1a1f3d; }
.pb-plumier i { position: absolute; left: 18%; top: -5px; width: 34%; height: 6px; border-radius: 4px; background: linear-gradient(90deg, #ddd, #fff 30%, #ddd); box-shadow: 0 2px 4px rgb(0 0 0 / .25); }
.pb-plumier i::after { content: ""; position: absolute; right: -6px; top: 1px; width: 8px; height: 4px; border-radius: 0 3px 3px 0; background: var(--orange); }
.pb-pied { position: absolute; left: 50%; top: 100%; translate: -50% 0; width: 70%; height: 11vh; }
.pb-pied::before { content: ""; position: absolute; left: 50%; top: 0; width: 14px; height: 100%; translate: -50% 0; background: linear-gradient(90deg, #9aa0b8, #e3e6f0, #9aa0b8); border-radius: 0 0 3px 3px; }
.pb-pied::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 6px; background: linear-gradient(#cfd3e2, #9aa0b8); box-shadow: 0 14px 22px -8px rgb(11 16 51 / .35); }
.pb-pied i { position: absolute; bottom: -10px; width: 14px; height: 14px; border-radius: 50%; background: #23284a; }
.pb-pied i:first-child { left: 6%; } .pb-pied i:last-child { right: 6%; }
/* le grand A */
.manifeste-a { position: relative; justify-self: center; width: min(40vw, 620px); aspect-ratio: 1; pointer-events: none; --lueur: .12; }
.ma-halo { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #6a82ff, #2f44ce 48%, #141d6e 100%); box-shadow: 0 0 0 22px var(--ivoire), 0 0 0 23px rgb(47 68 206 / .16), 0 0 0 64px var(--ivoire), 0 0 0 65px rgb(47 68 206 / .09), 0 40px 90px -30px rgb(20 29 110 / .7); }
.ma-halo::after { content: ""; position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(45% 55% at 62% 62%, rgb(254 85 0 / .9), transparent 70%); opacity: var(--lueur); mix-blend-mode: screen; }
.ma-svg { position: absolute; inset: 24%; width: 52%; height: 52%; overflow: visible; filter: drop-shadow(0 18px 24px rgb(11 16 51 / .45)); animation: ma-flotte 6s ease-in-out infinite; }
.ma-3d { position: absolute; inset: 0; width: 100%; height: 100%; }
.manifeste-a.en-3d .ma-svg { display: none; }
.manifeste .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; padding: 40px var(--bord) 0; }
.manifeste p { font-size: 1.15rem; color: var(--gris); max-width: 52ch; }
.manifeste ol { list-style: none; border-top: 1px solid rgb(16 21 58 / .15); }
.manifeste li a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgb(16 21 58 / .15); text-decoration: none; font: 500 1.3rem var(--titre); transition: color .2s, padding .3s var(--sortie); }
.manifeste li a span { font: .8125rem var(--mono); color: var(--gris); }
@media (hover: hover) { .manifeste li a:hover { color: var(--bleu); padding-left: 10px; } }
@keyframes ma-flotte { 50% { transform: translateY(-10px) rotate(-2deg); } }
.manifeste .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 56px; align-items: end; }
.manifeste p { font-size: 1.15rem; color: var(--gris); max-width: 52ch; }
.manifeste ol { list-style: none; border-top: 1px solid rgb(16 21 58 / .15); }
.manifeste li a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgb(16 21 58 / .15); text-decoration: none; font: 500 1.3rem var(--titre); transition: color .2s, padding .3s var(--sortie); }
.manifeste li a span { font: .8125rem var(--mono); color: var(--gris); }
@media (hover: hover) { .manifeste li a:hover { color: var(--bleu); padding-left: 10px; } }

/* ---------- 4. La chaîne (scène épinglée) ---------- */
.chaine { position: relative; height: 700vh; }
.chaine .scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--nuit); }
.maillon { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--sortie), visibility 0s .9s; }
.maillon.actif { opacity: 1; visibility: visible; transition: opacity .9s var(--sortie), visibility 0s; }
.maillon .visuel { position: absolute; inset: 0; overflow: hidden; }
.maillon .visuel img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.02 + .1 * var(--q, 0))); transform-origin: 60% 50%; }
.maillon .visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 16 51 / .92) 0%, rgb(11 16 51 / .7) 38%, rgb(11 16 51 / .1) 75%), linear-gradient(0deg, rgb(11 16 51 / .6), transparent 40%); }
.maillon .graphique { background: radial-gradient(70% 80% at 85% 100%, rgb(254 85 0 / .7), transparent 60%), linear-gradient(160deg, var(--bleu-m), var(--bleu) 45%, var(--nuit)); }
.maillon .graphique svg { position: absolute; right: 22%; top: 0; width: 56%; height: 100%; }
.maillon .texte { position: absolute; left: var(--bord); bottom: clamp(56px, 11vh, 120px); width: min(560px, 46vw); transform: translateY(24px); transition: transform 1s var(--sortie); }
.maillon.actif .texte { transform: none; }
.maillon .rang { font: .875rem var(--mono); color: var(--bleu-p); }
.maillon h3 { font-size: clamp(2.6rem, 5.4vw, 5rem); margin: 10px 0 18px; }
.maillon .geste { font-size: 1.2rem; line-height: 1.45; margin-bottom: 22px; max-width: 34ch; }
.maillon dl { display: grid; grid-template-columns: 96px 1fr; border-top: 1px solid rgb(255 255 255 / .2); font-size: .975rem; }
.maillon dt, .maillon dd { padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / .2); }
.maillon dt { color: rgb(255 255 255 / .62); }
.maillon dd { color: rgb(255 255 255 / .9); }
.maillon .preuve { margin-top: 20px; display: flex; gap: 14px; align-items: baseline; font-family: var(--titre); font-size: 1.2rem; line-height: 1.3; }
.maillon .preuve::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); transform: translateY(-2px); }
.maillon .preuve strong { font-weight: 500; color: #ffd3bd; }
.maillon .suite { margin-top: 24px; }
.maillon dd, .cible li, .infos dd, .histoires p { text-wrap: pretty; }

.carte { position: absolute; right: var(--bord); top: 50%; transform: translateY(-50%); width: 264px; padding: 20px 12px 8px; border-radius: 16px; background: rgb(11 16 51 / .55); }
.carte svg { width: 100%; height: auto; overflow: visible; }
.carte line { stroke: rgb(255 255 255 / .28); stroke-width: 1; }
.carte circle { fill: var(--nuit); stroke: rgb(255 255 255 / .7); stroke-width: 1.5; transition: fill .4s, r .4s; }
.carte circle.fait { fill: var(--bleu-p); stroke: var(--bleu-p); }
.carte circle.ici { fill: var(--orange); stroke: var(--orange); r: 8; }
.carte ol { list-style: none; margin-top: 18px; border-top: 1px solid rgb(255 255 255 / .2); }
.carte li a { display: flex; justify-content: space-between; padding: 7px 0; font-size: .875rem; text-decoration: none; color: rgb(255 255 255 / .8); border-bottom: 1px solid rgb(255 255 255 / .12); }
.carte li a span { font-family: var(--mono); font-size: .8125rem; }
.carte li.ici a { color: #fff; }
.carte li.ici a span { color: var(--orange); }

/* ---------- 5. Méthode ---------- */
.methode { position: relative; min-height: 100vh; display: grid; align-items: center; padding: 140px var(--bord); overflow: hidden; }
.methode > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.methode::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(11 16 51 / .95), rgb(11 16 51 / .8) 48%, rgb(11 16 51 / .3)); }
.methode .contenu { position: relative; z-index: 2; max-width: 620px; }
.methode h2 { font-size: clamp(2.6rem, 5.8vw, 5.4rem); margin-bottom: 44px; }
.etapes { list-style: none; counter-reset: e; margin-bottom: 44px; }
.etapes li { display: grid; grid-template-columns: 52px 1fr; padding: 20px 0; border-top: 1px solid rgb(255 255 255 / .2); counter-increment: e; }
.etapes li:last-child { border-bottom: 1px solid rgb(255 255 255 / .2); }
.etapes li::before { content: counter(e); font: .875rem var(--mono); color: var(--orange); padding-top: 6px; }
.etapes h3 { font-size: 1.5rem; margin-bottom: 4px; }
.etapes p { color: rgb(255 255 255 / .78); }

/* ---------- 6. Outils ---------- */
.outils { padding: clamp(110px, 14vw, 180px) var(--bord); }
.tete { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-bottom: 56px; }
.tete h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); max-width: 14ch; }
.tete p { max-width: 42ch; color: rgb(255 255 255 / .74); }
.liste { list-style: none; border-top: 1px solid rgb(255 255 255 / .15); }
.liste li { display: grid; grid-template-columns: 1.1fr .9fr 1.5fr; gap: 28px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid rgb(255 255 255 / .15); }
.liste h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.liste .usage { font-size: .9375rem; color: var(--bleu-p); }
.liste p { color: rgb(255 255 255 / .74); }
.complement { margin-top: 30px; color: rgb(255 255 255 / .6); font-size: .9375rem; }

/* ---------- 7. Pour qui + ALUR ---------- */
.clair { background: var(--ivoire); color: var(--encre); }
.clair .tete p { color: var(--gris); }
.pourqui { padding: clamp(110px, 14vw, 180px) var(--bord); }
.cibles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgb(16 21 58 / .15); }
.cible { padding: 36px 32px 36px 0; }
.cible + .cible { padding-left: 32px; border-left: 1px solid rgb(16 21 58 / .15); }
.cible h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--bleu); margin-bottom: 12px; }
.cible p { color: var(--gris); }
.cible ul { list-style: none; margin: 18px 0; }
.cible li { padding: 9px 0; border-top: 1px solid rgb(16 21 58 / .1); }
.cible .financement { font-weight: 600; font-size: .9375rem; }
.alur { display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center; margin-top: 88px; padding: 40px 0; border-block: 1px solid rgb(16 21 58 / .15); }
.alur .heures { font: 500 clamp(4rem, 8vw, 6rem)/.9 var(--titre); color: var(--bleu); }
.alur h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 8px; }
.alur p { color: var(--gris); max-width: 58ch; }
.alur .lien { display: inline-flex; align-items: center; gap: 6px; color: var(--bleu); font-weight: 600; white-space: nowrap; }
.alur .lien svg { width: 16px; height: 16px; }

/* ---------- 8. Résultats ---------- */
.resultats { padding: clamp(110px, 14vw, 180px) var(--bord); background: linear-gradient(180deg, var(--nuit), var(--nuit-2)); }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid rgb(255 255 255 / .15); margin-bottom: 80px; }
.chiffres div { padding: 36px 20px 30px 0; }
.chiffres div + div { padding-left: 20px; border-left: 1px solid rgb(255 255 255 / .15); }
.chiffres strong { display: block; font: 500 clamp(2.6rem, 5vw, 4.6rem)/1 var(--titre); font-variant-numeric: tabular-nums; }
.chiffres span { display: block; margin-top: 12px; font-size: .9375rem; color: rgb(255 255 255 / .7); }
.histoires { list-style: none; }
.histoires li { display: grid; grid-template-columns: 1fr 1.5fr 220px; gap: 40px; align-items: baseline; padding: 30px 0; border-top: 1px solid rgb(255 255 255 / .13); }
.histoires li:last-child { border-bottom: 1px solid rgb(255 255 255 / .13); }
.histoires h3 { font-size: clamp(1.6rem, 2.8vw, 2.5rem); }
.histoires p { color: rgb(255 255 255 / .76); }
.histoires .qui { text-align: right; font-size: .9375rem; color: var(--bleu-p); }
.avis { display: flex; align-items: center; gap: 16px; margin-top: 56px; font: 500 clamp(1.4rem, 2.6vw, 2rem) var(--titre); }
.avis svg { width: 120px; height: 22px; fill: var(--orange); }

/* ---------- 9. Équipe ---------- */
.equipe { padding: clamp(110px, 14vw, 180px) var(--bord) 80px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.membre { border-top: 1px solid rgb(16 21 58 / .15); padding-top: 28px; }
.initiales { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--bleu); color: #fff; font: 500 1.5rem var(--titre); }
.membre h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 20px 0 4px; }
.membre .role { color: var(--bleu); font-weight: 600; }
.membre p:last-child { color: var(--gris); margin-top: 12px; max-width: 48ch; }

/* ---------- 10. Infos pratiques + FAQ ---------- */
.pratique { padding: 80px var(--bord) clamp(110px, 14vw, 180px); }
.infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-top: 1px solid rgb(16 21 58 / .15); margin-bottom: 110px; }
.infos div { padding: 22px 0; border-bottom: 1px solid rgb(16 21 58 / .1); }
.infos dt { font-weight: 600; margin-bottom: 4px; }
.infos dd { color: var(--gris); }
.infos a { color: var(--bleu); }
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; }
.faq h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); }
.faq details { border-top: 1px solid rgb(16 21 58 / .15); }
.faq details:last-child { border-bottom: 1px solid rgb(16 21 58 / .15); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 22px 48px 22px 0; font: 500 1.25rem/1.3 var(--titre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(var(--bleu), var(--bleu)) center / 14px 2px no-repeat, linear-gradient(var(--bleu), var(--bleu)) center / 2px 14px no-repeat; transition: transform .25s var(--sortie); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; color: var(--gris); max-width: 62ch; }

/* ---------- 11. Appel final ---------- */
.final { position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 120px var(--bord); overflow: hidden; }
.final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 70% at 50% 55%, rgb(11 16 51 / .55), rgb(11 16 51 / .92)); }
.final .contenu { position: relative; z-index: 2; display: grid; justify-items: center; }
.final h2 { font-size: clamp(3rem, 7.4vw, 6rem); max-width: 12ch; margin-bottom: 22px; }
.final p { max-width: 46ch; color: rgb(255 255 255 / .86); font-size: 1.125rem; margin-bottom: 36px; }
.final .tel { margin: 22px 0 0; font-size: 1rem; }

/* ---------- Pied de page ---------- */
.pied { background: #070a24; color: rgb(255 255 255 / .72); padding: 72px var(--bord) 32px; font-size: .9375rem; }
.pied .colonnes { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.pied h2 { font: 600 .9375rem var(--texte); color: #fff; margin-bottom: 14px; letter-spacing: 0; }
.pied ul { list-style: none; }
.pied li { margin-bottom: 8px; }
.pied a { text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied .bas { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .875rem; opacity: .7; }

.barre-mobile { display: none; }

/* ---------- Sous-pages ---------- */
.sous-page .entete { background: rgb(11 16 51 / .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.page-tete { padding: 180px var(--bord) 96px; background-color: var(--nuit); background-image: radial-gradient(rgb(185 205 255 / .16) 1px, transparent 1.3px); background-size: 24px 24px; }
.page-tete .contenu { max-width: 760px; }
.page-tete .fil { font-size: .875rem; color: rgb(255 255 255 / .66); margin-bottom: 28px; }
.page-tete .fil a { color: #fff; }
.page-tete h1 { font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 22px; }
.page-tete .promesse { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: rgb(255 255 255 / .86); max-width: 52ch; margin-bottom: 32px; }
.texte-page { padding: clamp(80px, 10vw, 140px) var(--bord); }
.texte-page .bloc { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 24px 64px; padding: 36px 0; border-top: 1px solid rgb(16 21 58 / .15); max-width: 1180px; }
.texte-page h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--bleu); }
.texte-page p { color: var(--gris); max-width: 60ch; margin-bottom: 14px; }
.texte-page strong { color: var(--encre); }
.points { list-style: none; max-width: 60ch; }
.points li { padding: 12px 0; border-bottom: 1px solid rgb(16 21 58 / .1); color: var(--gris); text-wrap: pretty; }
.points li:first-child { padding-top: 0; }
.numerotes { counter-reset: n; }
.numerotes li { counter-increment: n; position: relative; padding-left: 32px; }
.numerotes li::before { content: counter(n); position: absolute; left: 0; font: .875rem var(--mono); color: var(--bleu); padding-top: 3px; }
.lien-texte { color: var(--bleu); font-weight: 600; }
.preuve-texte { margin-top: 18px; padding-left: 18px; border-left: 2px solid var(--orange); color: var(--encre) !important; font: 500 1.2rem/1.35 var(--titre); }
.texte-page mark { background: #ffe1d1; color: var(--encre); padding: 0 4px; border-radius: 3px; }
.final-simple { min-height: auto; padding: clamp(100px, 12vw, 160px) var(--bord); background: var(--nuit); }
.final-simple::before { display: none; }

/* ---------- Catalogue des formations ---------- */
.page-catalogue { padding-top: clamp(56px, 7vw, 96px); }
.catalogue { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; max-width: 1180px; margin-bottom: 72px; }
.sommaire ol { list-style: none; }
.sommaire a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgb(16 21 58 / .12); color: var(--encre); text-decoration: none; font: 500 1.15rem var(--titre); }
.sommaire a span { font: .875rem var(--mono); color: var(--bleu); }
.sommaire a:hover { color: var(--bleu); }
.communs { background: #fff; border-radius: 20px; padding: 28px 30px; box-shadow: 0 1px 0 rgb(16 21 58 / .06), 0 18px 40px -24px rgb(16 21 58 / .25); }
.communs h2 { font-size: 1.25rem !important; margin-bottom: 14px; }
.communs dl div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgb(16 21 58 / .08); font-size: .9375rem; }
.communs dt { font: .8125rem var(--mono); color: var(--bleu); padding-top: 2px; }
.communs dd { color: var(--gris); }
.communs a { color: var(--bleu); }
.famille { max-width: 1180px; padding: 56px 0 24px; scroll-margin-top: 90px; }
.famille-tete { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; margin-bottom: 18px; }
.famille-tete img { width: 220px; height: 140px; object-fit: cover; border-radius: 16px; }
.famille-tete p { color: var(--gris); max-width: 58ch; margin: 8px 0 0; }
.fiche { border-top: 1px solid rgb(16 21 58 / .15); scroll-margin-top: 90px; }
.fiches .fiche:last-child { border-bottom: 1px solid rgb(16 21 58 / .15); }
.fiche summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 40px 20px 0; position: relative; }
.fiche summary::-webkit-details-marker { display: none; }
.fiche summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(var(--bleu), var(--bleu)) center / 14px 2px no-repeat, linear-gradient(var(--bleu), var(--bleu)) center / 2px 14px no-repeat; transition: transform .25s var(--sortie); }
.fiche[open] summary::after { transform: rotate(45deg); }
.fiche .nom { font: 500 1.15rem/1.3 var(--titre); color: var(--encre); }
.fiche .duree { font: .8125rem var(--mono); color: var(--bleu); white-space: nowrap; }
.fiche .detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; padding: 0 0 26px; }
.fiche h4 { font: .8125rem var(--mono); color: var(--bleu); font-weight: 400; margin-bottom: 8px; }
.fiche ul { padding-left: 18px; color: var(--gris); }
.fiche li { margin-bottom: 6px; }
.fiche dl div { padding: 8px 0; border-top: 1px solid rgb(16 21 58 / .08); font-size: .9375rem; }
.fiche dt { font: .8125rem var(--mono); color: var(--bleu); }
.fiche dd { color: var(--gris); }
@media (max-width: 1000px) {
  .catalogue, .fiche .detail { grid-template-columns: 1fr; }
  .famille-tete { grid-template-columns: 1fr; }
  .famille-tete img { width: 100%; height: 160px; }
  .communs dl div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Ouverture : la bulle s'ouvre, le film avance avec la molette (façon Vesper) ---------- */
.voyage { position: relative; height: 620vh; background-color: var(--nuit); }
.voyage .scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background-image: radial-gradient(rgb(185 205 255 / .16) 1px, transparent 1.3px); background-size: 24px 24px; }
.hublot { position: absolute; inset: 0; clip-path: ellipse(var(--rx, 27%) var(--ry, 40%) at var(--cx, 72%) 53%); background: var(--nuit-2); will-change: clip-path; }
.hublot video { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1.12)); transform-origin: 62% 55%; }
.voile { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(11 16 51 / .78), rgb(11 16 51 / 0) 48%), linear-gradient(90deg, rgb(11 16 51 / .55), transparent 55%); opacity: var(--v, 0); }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 50%; }
.voyage-titre { position: absolute; z-index: 2; left: var(--bord); top: 50%; translate: 0 -46%; width: min(42vw, 620px); opacity: var(--t, 1); transform: translateX(calc((1 - var(--t, 1)) * -40px)); }
.voyage-titre .surtitre { color: var(--bleu-p); }
.voyage-titre h1 { font-size: clamp(3rem, 5.6vw, 5.4rem); margin-bottom: 22px; }
.voyage-titre h1 .h1-sujet { display: block; margin-bottom: 18px; font: .8125rem/1.5 var(--mono); letter-spacing: .03em; color: var(--bleu-p); max-width: 46ch; }
.voyage-titre h1 .h1-accroche { display: block; background: linear-gradient(90deg, #fff 10%, var(--bleu-p) 55%, #ffb08a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.voyage-titre .promesse { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: rgb(255 255 255 / .82); max-width: 44ch; margin-bottom: 30px; }
.vt-actions, .vf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.lien-demo { color: #fff; font-weight: 600; text-underline-offset: .3em; }
.voyage-titre .confiance { margin-top: 30px; }
.voyage-titre.cache, .voyage-fin:not(.visible) { pointer-events: none; }
/* les chapitres qui défilent sur le film */
.chapitres { position: absolute; z-index: 2; left: var(--bord); bottom: 15vh; width: min(60vw, 820px); }
.chapitre { position: absolute; left: 0; bottom: 0; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--sortie), transform .8s var(--sortie); }
.chapitre.actif { opacity: 1; transform: none; }
.ch-sur { font: .8125rem var(--mono); color: rgb(255 255 255 / .8); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.ch-sur::before { content: ""; width: 26px; height: 1px; background: var(--orange); }
.ch-titre { font: 500 clamp(2.6rem, 5.6vw, 5.4rem)/1.02 var(--titre); letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 30px rgb(11 16 51 / .4); }
.ch-titre span { display: block; color: rgb(255 255 255 / .62); }
.index-ch { position: absolute; z-index: 2; right: var(--bord); bottom: 15vh; list-style: none; display: grid; gap: 14px; opacity: var(--v, 0); }
.index-ch li { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: .8125rem; color: rgb(255 255 255 / .55); transition: color .3s; }
.index-ch i { width: 2px; height: 14px; border-radius: 2px; background: rgb(255 255 255 / .35); transition: height .4s var(--sortie), background .3s; }
.index-ch li.actif { color: #fff; }
.index-ch li.actif i { height: 26px; background: var(--orange); }
.voyage-fin { position: absolute; z-index: 3; left: var(--bord); bottom: 15vh; opacity: var(--f, 0); transform: translateY(calc((1 - var(--f, 0)) * 24px)); }
.voyage-fin p { font: 500 clamp(2.6rem, 5.6vw, 5.4rem)/1.02 var(--titre); letter-spacing: -.02em; margin-bottom: 26px; text-shadow: 0 2px 30px rgb(11 16 51 / .4); }
.indice { position: absolute; z-index: 2; left: 50%; bottom: 26px; translate: -50% 0; display: grid; justify-items: center; gap: 8px; font: .75rem var(--mono); color: rgb(255 255 255 / .7); opacity: var(--t, 1); }
.indice::after { content: ""; width: 1px; height: 30px; background: linear-gradient(#fff, transparent); animation: descend 1.6s var(--sortie) infinite; }
@keyframes descend { from { transform: scaleY(0); transform-origin: top; } to { transform: scaleY(1); transform-origin: top; } }
.passer { position: absolute; z-index: 3; right: var(--bord); bottom: 26px; font: .8125rem var(--mono); color: rgb(255 255 255 / .75); }
.demo .titre-h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); margin-bottom: 20px; }
@media (max-width: 1000px) {
  .hublot { clip-path: ellipse(var(--rx, 46%) var(--ry, 21%) at 50% var(--cy, 77%)); }
  .voyage-titre { top: 92px; translate: none; width: auto; right: var(--bord); }
  .voyage-titre .promesse, .voyage-titre .confiance { display: none; }
  .voyage-titre h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .chapitres, .voyage-fin { bottom: 13vh; width: auto; right: var(--bord); }
  .index-ch { display: none; }
  .indice { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .voyage { height: 100vh; }
  .indice::after { animation: none; }
}
/* ---------- Fin de l'accueil (v2) : cartes, bento, équipe, infos, FAQ ---------- */
.surtitre { display: inline-flex; align-items: center; gap: 10px; font: .8125rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--bleu); margin-bottom: 18px; }
.surtitre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgb(254 85 0 / .18); }
.tete-v2 { max-width: 1180px; margin-bottom: 56px; }
.tete-v2 h2, .eq-texte h2 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); max-width: 16ch; }
.tete-v2 h2 span, .eq-texte h2 span { color: var(--bleu); }
.tete-v2.sombre h2 span { background: linear-gradient(90deg, var(--bleu-p), #ffb08a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tete-v2.sombre .surtitre { color: var(--bleu-p); }
.tete-v2.sombre .chapo { color: rgb(255 255 255 / .72); }
.chapo { margin-top: 18px; font-size: 1.15rem; color: var(--gris); max-width: 52ch; }

.pourqui { background: var(--ivoire); color: var(--encre); padding: clamp(100px, 12vw, 160px) var(--bord); background-image: radial-gradient(rgb(47 68 206 / .1) 1px, transparent 1.3px); background-size: 24px 24px; }
.cibles-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.carte-cible { display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 1px 0 rgb(16 21 58 / .05), 0 24px 50px -32px rgb(16 21 58 / .35); transition: transform .4s var(--sortie), box-shadow .4s var(--sortie); }
@media (hover: hover) { .carte-cible:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgb(16 21 58 / .05), 0 36px 60px -30px rgb(47 68 206 / .45); } .carte-cible:hover .cc-img img { transform: scale(1.05); } }
.cc-img { position: relative; height: 210px; overflow: hidden; }
.cc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sortie); }
.cc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(11 16 51 / .55)); }
.cc-num { position: absolute; z-index: 1; left: 22px; bottom: 16px; font: 500 2.4rem/1 var(--titre); color: #fff; }
.cc-corps { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 24px; }
.cc-corps h3 { font-size: 1.55rem; margin-bottom: 10px; }
.cc-corps > p { color: var(--gris); }
.cc-corps ul { list-style: none; margin: 18px 0 22px; display: grid; gap: 10px; }
.cc-corps li { display: flex; gap: 10px; align-items: flex-start; font-size: .975rem; }
.coche { flex: none; width: 20px; height: 20px; margin-top: 2px; padding: 3px; border-radius: 50%; background: #e8ecff; fill: none; stroke: var(--bleu); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cc-fin { margin-top: auto; align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: #fff1e9; color: #b33d00 !important; font: .8125rem var(--mono); }
.alur-v2 { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; margin-top: 22px; padding: 40px 44px; border-radius: 28px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #4a62f0, var(--bleu) 45%, #18237f); }
.alur-v2::before { content: ""; position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 38px, rgb(255 255 255 / .08) 38px 39px); }
.alur-v2::after { content: ""; position: absolute; left: 30%; bottom: -60%; width: 60%; height: 120%; background: radial-gradient(closest-side, rgb(254 85 0 / .45), transparent); }
.alur-v2 > * { position: relative; z-index: 1; }
.alur-chiffre { display: grid; justify-items: center; width: 150px; height: 150px; align-content: center; border-radius: 50%; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.alur-chiffre span { font: 500 4rem/1 var(--titre); background: linear-gradient(180deg, #fff, #ffc2a3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.alur-chiffre small { font: .75rem var(--mono); color: rgb(255 255 255 / .75); }
.alur-texte h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 10px; max-width: 26ch; }
.alur-texte p { color: rgb(255 255 255 / .8); max-width: 60ch; }
.action-claire { background: #fff; color: var(--encre); }

.resultats-v2 { position: relative; padding: clamp(100px, 12vw, 160px) var(--bord); background: radial-gradient(80% 60% at 85% 0%, rgb(47 68 206 / .45), transparent 70%), var(--nuit); overflow: hidden; }
.bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: minmax(190px, auto); gap: 18px; max-width: 1280px; }
.bloc-b { position: relative; overflow: hidden; margin: 0; padding: 28px; border-radius: 24px; background: linear-gradient(160deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03)); box-shadow: inset 0 0 0 1px rgb(185 205 255 / .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; text-decoration: none; }
.bloc-b strong { font: 500 clamp(3.2rem, 5vw, 4.6rem)/1 var(--titre); letter-spacing: -.03em; }
.bloc-b em { font: 500 1.6rem var(--titre); font-style: normal; margin-left: 6px; color: #ffb08a; }
.bloc-b > p { margin-top: 12px; color: rgb(255 255 255 / .74); max-width: 30ch; }
.bloc-b.grand { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(90% 70% at 100% 0%, rgb(254 85 0 / .55), transparent 70%), linear-gradient(160deg, #3d55e8, #1b2585); box-shadow: none; }
.bloc-b.grand strong { font-size: clamp(6rem, 11vw, 9.5rem); }
.reseau { position: absolute; top: 24px; right: 20px; width: 62%; fill: none; stroke: rgb(255 255 255 / .35); }
.reseau circle { fill: #fff; stroke: none; } .reseau .n { fill: var(--orange); }
.avis-b .etoiles { display: flex; gap: 4px; margin-bottom: 10px; }
.avis-b .etoiles svg { width: 22px; height: 22px; fill: #ffb400; }
.histoire { grid-column: span 1; display: flex; flex-direction: column; justify-content: space-between; }
.histoire blockquote { font: 500 1.3rem/1.3 var(--titre); color: rgb(255 255 255 / .9); }
.histoire blockquote::before { content: "“"; display: block; font: 3.4rem/0.6 var(--titre); color: var(--orange); margin-bottom: 6px; }
.histoire b { color: #fff; font-weight: 500; background: linear-gradient(transparent 62%, rgb(254 85 0 / .4) 62%); }
.histoire figcaption { margin-top: 18px; font: .8125rem var(--mono); color: var(--bleu-p); }
.qualiopi-b { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 28px; background: #fff; color: var(--encre); box-shadow: none; }
.qualiopi-b img { width: 170px; height: auto; }
.qualiopi-b p { color: var(--gris) !important; font-size: .9375rem; margin: 0; }
.qualiopi-b b { color: var(--encre); font-weight: 600; }
.qualiopi-b img { grid-row: span 2; }
.lien-cert { margin-top: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--bleu); font-weight: 600; font-size: .9375rem; }
.lien-cert svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: #e8ecff; }

.equipe-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; padding: clamp(100px, 12vw, 160px) var(--bord); background: var(--ivoire); color: var(--encre); }
.eq-photo { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 1100 / 914; box-shadow: 0 40px 80px -40px rgb(16 21 58 / .55); }
.eq-photo img { width: 100%; height: 100%; object-fit: cover; }
.eq-legende { position: absolute; left: 18px; bottom: 18px; right: 18px; padding: 12px 16px; border-radius: 14px; background: rgb(11 16 51 / .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: .8125rem var(--mono); }
.membre-v2 { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid rgb(16 21 58 / .12); }
.membre-v2:first-of-type { margin-top: 32px; }
.membre-v2 .initiales { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 500 1.1rem var(--titre); color: #fff; background: radial-gradient(circle at 30% 25%, #6a82ff, var(--bleu) 60%, #18237f); box-shadow: 0 0 0 4px #fff, 0 10px 20px -8px rgb(47 68 206 / .6); }
.membre-v2 h3 { font-size: 1.45rem; }
.membre-v2 .role { font: .8125rem var(--mono); color: var(--bleu); margin: 4px 0 8px; }
.membre-v2 p:last-child { color: var(--gris); max-width: 52ch; }

.pratique-v2 { padding: clamp(100px, 12vw, 160px) var(--bord); background: #fff; color: var(--encre); }
.infos-grille { display: grid; grid-template-columns: 2.4fr 1fr; gap: 22px; max-width: 1280px; align-items: start; }
.infos-v2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.info { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto 1fr; column-gap: 16px; padding: 20px 22px; border-radius: 18px; background: var(--ivoire); }
.info .ico { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: #fff; fill: none; stroke: var(--bleu); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 6px 14px -8px rgb(47 68 206 / .5); }
.info dt { font-weight: 600; margin-bottom: 4px; }
.info dd { color: var(--gris); font-size: .9375rem; }
.info a { color: var(--bleu); }
.carte-qualiopi { position: sticky; top: 110px; display: grid; gap: 16px; padding: 28px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgb(16 21 58 / .1), 0 24px 50px -30px rgb(16 21 58 / .35); }
.carte-qualiopi img { width: 190px; height: auto; }
.carte-qualiopi p { color: var(--gris); font-size: .9375rem; }
.faq-v2 { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; max-width: 1280px; margin-top: 96px; }
.faq-v2 h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.faq-liste { display: grid; gap: 10px; }
.faq-liste details { border-radius: 16px; background: var(--ivoire); padding: 0 24px; transition: background .3s; }
.faq-liste details[open] { background: #e9edff; }
.faq-liste summary { list-style: none; cursor: pointer; position: relative; padding: 20px 40px 20px 0; font: 500 1.15rem/1.3 var(--titre); }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #fff linear-gradient(var(--bleu), var(--bleu)) center / 11px 2px no-repeat; box-shadow: 0 4px 10px -4px rgb(47 68 206 / .5); }
.faq-liste summary::before { content: ""; position: absolute; right: 13px; top: 50%; width: 2px; height: 11px; margin-top: -5.5px; background: var(--bleu); z-index: 1; transition: transform .3s var(--sortie); }
.faq-liste details[open] summary::before { transform: scaleY(0); }
.faq-liste details p { padding-bottom: 22px; color: var(--gris); max-width: 62ch; }
.final .surtitre { color: var(--bleu-p); }
.final p.surtitre { font: .8125rem var(--mono); margin-bottom: 18px; color: var(--bleu-p); }
.final-qualiopi { width: 150px; height: auto; margin-top: 36px; padding: 10px 14px; border-radius: 12px; background: #fff; }
.pied-qualiopi { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; margin-top: 22px; max-width: 360px; text-decoration: none; }
.pied-qualiopi img { width: 120px; height: auto; padding: 8px 10px; border-radius: 10px; background: #fff; }
.pied-qualiopi span { font-size: .75rem; line-height: 1.4; color: rgb(255 255 255 / .6); }
.conf-qualiopi img { height: 38px; width: auto; padding: 5px 8px; border-radius: 7px; background: #fff; }
.pb-qualiopi img { height: 34px; width: auto; }
.revele { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--sortie), transform .8s var(--sortie); }
.revele.vu { opacity: 1; transform: none; }
@media (max-width: 1000px) {
  .cibles-v2, .bento, .infos-grille, .faq-v2, .equipe-v2 { grid-template-columns: 1fr; }
  .infos-v2 { grid-template-columns: 1fr; }
  .bloc-b.grand { grid-row: auto; min-height: 300px; }
  .qualiopi-b { grid-column: auto; grid-template-columns: 1fr; }
  .qualiopi-b img { grid-row: auto; }
  .alur-v2 { grid-template-columns: 1fr; padding: 32px 26px; gap: 24px; }
  .carte-qualiopi { position: static; }
  .faq-v2 { gap: 28px; margin-top: 72px; }
}
@media (prefers-reduced-motion: reduce) { .revele { opacity: 1; transform: none; transition: none; } }

/* ---------- Outils maison (v2) : une carte par outil avec son écran ---------- */
.outils-v2 { position: relative; padding: clamp(100px, 12vw, 160px) var(--bord); background: radial-gradient(70% 50% at 10% 0%, rgb(47 68 206 / .4), transparent 70%), var(--nuit); overflow: hidden; }
.atelier { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1280px; }
.outil { display: grid; grid-template-rows: auto 1fr; gap: 0; border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, rgb(255 255 255 / .08), rgb(255 255 255 / .025)); box-shadow: inset 0 0 0 1px rgb(185 205 255 / .16); }
.outil .o-texte { padding: 28px 30px 30px; display: flex; flex-direction: column; }
.outil.vedette { grid-column: 1 / -1; grid-template-columns: 1fr 1.15fr; grid-template-rows: auto; align-items: center; background: radial-gradient(70% 90% at 100% 100%, rgb(254 85 0 / .28), transparent 60%), linear-gradient(150deg, #3046d6, #17206e); box-shadow: none; }
.outil.vedette .o-texte { padding: 44px; }
.o-etape { font: .75rem var(--mono); color: var(--bleu-p); letter-spacing: .03em; margin-bottom: 12px; }
.outil h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.outil.vedette h3 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
.o-texte > p:not(.o-etape):not(.o-acces) { color: rgb(255 255 255 / .78); max-width: 52ch; }
.o-texte b { color: #fff; font-weight: 600; }
.badge-b { font: .6875rem var(--mono); letter-spacing: .02em; padding: 5px 10px; border-radius: 999px; background: rgb(254 85 0 / .16); color: #ffb08a; box-shadow: inset 0 0 0 1px rgb(254 85 0 / .4); }
.o-gains { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 20px; }
.o-gains div { padding: 14px 16px; border-radius: 16px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); min-width: 180px; flex: 1; }
.o-gains strong { display: block; font: 500 1.35rem/1.1 var(--titre); background: linear-gradient(90deg, #fff, #ffc2a3); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 4px; }
.o-gains span { font-size: .8125rem; color: rgb(255 255 255 / .66); }
.o-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.o-acces { margin-top: auto; font: .75rem var(--mono); color: rgb(255 255 255 / .55); }
.o-acces a { color: var(--bleu-p); }
/* composition du dossier d'adresse : l'appli + les pages imprimées */
.compo-dossier { position: relative; margin: 36px 36px 36px 0; min-height: 470px; }
.compo-dossier figure { margin: 0; }
.cd-appli { position: absolute; left: 0; top: 0; width: 82%; margin: 0 !important; border-radius: 16px !important; min-height: 0 !important; transform: perspective(1600px) rotateY(-5deg); transition: transform .8s var(--sortie); }
.cd-appli img { display: block; width: 100%; height: auto; }
.cd-courbe { position: absolute; left: 6%; bottom: 2%; width: 56%; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .6); transition: transform .8s var(--sortie); }
.cd-courbe img { display: block; width: 100%; height: auto; border-radius: 8px; }
.cd-page { position: absolute; width: 28%; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .7); transition: transform .8s var(--sortie); }
.cd-page img { display: block; width: 100%; height: auto; }
.p-a { right: 9%; top: 14%; transform: rotate(-5deg); }
.p-b { right: -2%; top: 30%; transform: rotate(6deg); }
@media (hover: hover) { .vedette:hover .cd-appli { transform: none; } .vedette:hover .p-a { transform: rotate(-8deg) translate(-14px, -8px); } .vedette:hover .p-b { transform: rotate(9deg) translate(10px, 6px); } .vedette:hover .cd-courbe { transform: translateY(-6px); } }
/* écrans des outils */
.ecran-o { position: relative; margin: 22px 22px 0; border-radius: 16px 16px 0 0; background: #f6f7fb; color: var(--encre); overflow: hidden; min-height: 250px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7); }
.vedette .ecran-o { margin: 36px 36px 36px 0; border-radius: 18px; min-height: 0; transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transition: transform .8s var(--sortie); }
@media (hover: hover) { .vedette:hover .ecran-o { transform: none; } .outil:hover .ecran-o:not(.vedette .ecran-o) { transform: translateY(-4px); } }
.outil .ecran-o { transition: transform .6s var(--sortie); }
.eo-barre { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #e6e8f2; font: .6875rem var(--mono); color: var(--gris); }
.eo-barre i { width: 9px; height: 9px; border-radius: 50%; background: #dfe2ee; }
.eo-barre span { margin-left: 8px; }
.eo-ext { margin-left: auto; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--bleu); color: #fff; font: 600 .625rem var(--texte); box-shadow: 0 0 0 3px rgb(47 68 206 / .25); }
.eo-t { font: 600 .75rem var(--texte); color: var(--encre); margin-bottom: 8px; }
.eo-dossier { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; gap: 10px; padding: 14px; }
.eo-carte { position: relative; grid-row: span 2; min-height: 200px; border-radius: 12px; background: linear-gradient(135deg, #e3e9fb, #f1f3fb); background-image: linear-gradient(#d5dbef 1px, transparent 1px), linear-gradient(90deg, #d5dbef 1px, transparent 1px), linear-gradient(135deg, #e3e9fb, #f1f3fb); background-size: 26px 26px, 26px 26px, auto; overflow: hidden; }
.eo-cercle { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgb(47 68 206 / .1); box-shadow: inset 0 0 0 2px rgb(47 68 206 / .5); }
.eo-point { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 3px #fff; }
.p1 { left: 32%; top: 34%; } .p2 { left: 62%; top: 28%; } .p3 { left: 68%; top: 60%; } .p4 { left: 38%; top: 66%; } .p5 { left: 50%; top: 76%; }
.eo-bien { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; translate: -50% -50%; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #fff, 0 0 0 10px rgb(254 85 0 / .25); }
.eo-ventes, .eo-tuile { padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 #e6e8f2; }
.eo-ventes ul, .eo-tuile ul { list-style: none; display: grid; gap: 6px; font-size: .6875rem; }
.eo-ventes li { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid #eef0f6; }
.eo-ventes b { font-weight: 500; color: var(--gris); }
.eo-tuile { font-size: .6875rem; color: var(--gris); }
.eo-dossier .dpe, .eo-dossier .vivre, .eo-dossier .flyer { grid-column: auto; }
.eo-dossier { grid-template-columns: 1.2fr 1fr 1fr; }
.eo-ventes { grid-column: 2 / 4; }
.eo-dpe { display: flex; gap: 4px; margin-bottom: 6px; }
.eo-dpe i { font: 700 .6875rem var(--texte); color: #fff; width: 22px; height: 18px; display: grid; place-items: center; border-radius: 3px; font-style: normal; }
.eo-dpe .g { background: #d7221f; } .eo-dpe .f { background: #f0731b; } .eo-dpe .e { background: #f5b616; }
.vivre li::before { content: "• "; color: var(--bleu); }
.eo-flyer { display: block; height: 52px; border-radius: 6px; background: linear-gradient(160deg, var(--bleu) 55%, var(--orange) 55%); }
.eo-dossier .flyer { grid-column: 2 / 4; display: none; }
.eo-annonce { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; padding: 16px; }
.eo-photo { height: 150px; border-radius: 10px; background: url(/img/visite.webp) center / cover; }
.eo-lignes { display: grid; align-content: start; gap: 9px; padding-top: 6px; }
.eo-lignes i { height: 9px; border-radius: 5px; background: #e1e4ef; } .eo-lignes i.court { width: 60%; }
.eo-popup { position: absolute; right: 14px; top: 10px; width: 56%; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -14px rgb(16 21 58 / .45), inset 0 0 0 1px #e6e8f2; }
.eo-popup .eo-t { color: var(--bleu); }
.eo-adr { font: 500 1rem/1.2 var(--titre); margin-bottom: 4px; }
.eo-adr::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-right: 8px; box-shadow: 0 0 0 3px rgb(254 85 0 / .25); }
.eo-sec { font-size: .6875rem; color: var(--gris); }
.ecran-o.capture { background: #0b1020; }
.ecran-o.capture img { display: block; width: 100%; height: 250px; object-fit: cover; object-position: top left; }
.eo-acm { padding: 16px; }
.eo-barres { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 0 6px; border-bottom: 1px solid #e1e4ef; }
.eo-barres i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: #c9d3fb; }
.eo-barres i.moi { background: var(--orange); }
.eo-radar { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e6e8f2; font-size: .75rem; }
.eo-radar span { position: absolute; left: 12px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--bleu); opacity: .3; }
.eo-radar .r2 { transform: scale(.65); opacity: .55; } .eo-radar .r3 { transform: scale(.3); background: var(--bleu); opacity: 1; }
.eo-radar b { margin-left: 38px; font-weight: 600; color: var(--bleu); }
.eo-chat { display: grid; gap: 10px; padding: 16px; font-size: .8125rem; }
.eo-chat .q { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--bleu); color: #fff; }
.eo-chat .r { max-width: 90%; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: inset 0 0 0 1px #e6e8f2; color: var(--encre); }
.eo-chat .r span { display: block; margin-top: 8px; font: .6875rem var(--mono); color: var(--bleu); }
.marche { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; max-width: 1280px; margin-top: 28px; padding: 22px 26px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgb(185 205 255 / .16); }
.marche p { color: rgb(255 255 255 / .7); }
.marche ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.marche li { padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / .08); font-size: .875rem; }
.marche .lien-demo { margin-left: auto; }
@media (max-width: 1000px) {
  .atelier, .outil.vedette { grid-template-columns: 1fr; }
  .vedette .ecran-o { margin: 0 22px 26px; transform: none; }
  .compo-dossier { margin: 0 22px 26px; min-height: 0; aspect-ratio: 1 / .78; }
  .outil.vedette .o-texte { padding: 30px 26px 10px; }
  .eo-dossier { grid-template-columns: 1fr 1fr; } .eo-carte { grid-row: auto; grid-column: 1 / -1; min-height: 150px; } .eo-ventes { grid-column: 1 / -1; }
  .marche .lien-demo { margin-left: 0; }
}

/* ---------- Ils nous font confiance : le mur de logos ---------- */
.partenaires-v2 { padding: clamp(80px, 9vw, 120px) var(--bord); background: var(--ivoire); color: var(--encre); background-image: radial-gradient(rgb(47 68 206 / .1) 1px, transparent 1.3px); background-size: 24px 24px; }
.pv-tete { text-align: center; margin: 0 auto 44px; }
.pv-tete .surtitre { justify-content: center; }
.pv-tete h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.pv-tete h2 span { color: var(--bleu); }
.mur { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1240px; margin: 0 auto; }
.mur li { flex: 0 1 calc((100% - 4 * 14px) / 5); min-width: 150px; height: 104px; display: grid; place-items: center; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 rgb(16 21 58 / .05), 0 14px 30px -24px rgb(16 21 58 / .4); transition: transform .4s var(--sortie), box-shadow .4s var(--sortie); }
.mur img { max-width: 100%; max-height: 62px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) opacity(.72); transition: filter .4s var(--sortie); }
.mur .p-nom span { font: 500 1.02rem/1.15 var(--titre); text-align: center; color: #6b7091; letter-spacing: -.01em; transition: color .4s; }
@media (hover: hover) {
  .mur li:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgb(16 21 58 / .05), 0 24px 40px -24px rgb(47 68 206 / .45); }
  .mur li:hover img { filter: none; }
  .mur li:hover span { color: var(--bleu); }
}
@media (max-width: 640px) { .mur li { flex-basis: calc((100% - 14px) / 2); min-width: 0; height: 88px; } }

.liens-specialises { margin-top: 26px; color: var(--gris); font-size: .9375rem; }
.liens-specialises a { color: var(--bleu); font-weight: 600; }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 1000px) {
  .menu, .droite .apprenant { display: none; }
  .menu-mobile { display: block; margin-left: auto; }
  .carte { display: none; }
  .manifeste .deux, .faq { grid-template-columns: 1fr; gap: 40px; }
  .defile-pb { height: 460vh; }
  .scene-pb { grid-template-columns: 1fr; padding-top: 84px; }
  .paperboard { height: auto; width: min(100%, 460px); aspect-ratio: 3 / 3.6; }
  .pb-pied { height: 5vh; }
  .pb-page { padding: 60px 26px 50px 60px; }
  .manifeste .pb-texte { font-size: min(8.4vw, 2.4rem); }
  .pb-outils { left: 22px; }
  .manifeste-a { display: none; }
  .demo { grid-template-columns: 1fr; padding-top: 110px; }
  .bulle-demo { height: 58vh; border-radius: 48%; scroll-margin-top: 80px; }
  .bulle-demo.ouverte { height: auto; min-height: 60vh; }
  .bulle-demo.ouverte .dossier { position: relative; }
  .liste li { grid-template-columns: 1fr; gap: 6px; }
  .cibles, .infos { grid-template-columns: 1fr; }
  .cible, .cible + .cible { padding: 30px 0; border-left: 0; border-bottom: 1px solid rgb(16 21 58 / .15); }
  .chiffres { grid-template-columns: 1fr; }
  .chiffres div, .chiffres div + div { padding: 26px 16px 22px 0; border-left: 0; border-bottom: 1px solid rgb(255 255 255 / .12); }
  .histoires li { grid-template-columns: 1fr; gap: 8px; }
  .histoires .qui { text-align: left; }
  .alur { grid-template-columns: 1fr; gap: 16px; }
  .texte-page .bloc { grid-template-columns: 1fr; gap: 14px; }
  .pied .colonnes { grid-template-columns: 1fr 1fr; }

  /* La chaîne redevient une suite de chapitres */
  .chaine { height: auto; }
  .chaine .scene { position: static; height: auto; overflow: visible; }
  .maillon, .maillon.actif { position: relative; opacity: 1; visibility: visible; display: grid; }
  .maillon .visuel { position: relative; height: 62vh; }
  .maillon .visuel img { transform: none; }
  .maillon .visuel::after { background: linear-gradient(0deg, var(--nuit), transparent 45%); }
  .maillon .graphique { height: 38vh; }
  .maillon .texte, .maillon.actif .texte { position: relative; left: 0; bottom: 0; width: auto; transform: none; padding: 0 var(--bord) 72px; margin-top: -96px; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .entete .barre { height: 68px; }
  .entete .action { display: none; }
  .marque img:last-child { height: 22px; }
  .marque img:first-child, .logo-anime { width: 32px; height: 32px; }
  .logo-anime svg { inset: 3px; width: 26px; height: 26px; }
  .champ { flex-direction: column; border-radius: 22px; }
  .champ input { min-height: 50px; padding: 0 14px; }
  .champ button { width: 100%; }
  .bulle-demo { height: 46vh; }
  .apres-demo .action { width: 100%; justify-content: space-between; }
  .duo { grid-template-columns: 1fr; }
  .pied .colonnes { grid-template-columns: 1fr; }
  .barre-mobile { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; transform: translateY(140%); transition: transform .4s var(--sortie); }
  .barre-mobile.visible { transform: none; }
  .barre-mobile .action { width: 100%; justify-content: space-between; }
  .pied { padding-bottom: 104px; }
  .page-tete { padding-top: 130px; }
  .page-tete .action { width: 100%; justify-content: space-between; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .chaine { height: auto; }
  .chaine .scene { position: static; height: auto; }
  .maillon, .maillon.actif { position: relative; opacity: 1; visibility: visible; min-height: 100vh; }
  .carte { display: none; }
}

/* ---------- Simulateur de financement (page Financement) ---------- */
.texte-page .bloc-simu { display: block; }
.simu-tete { max-width: 760px; margin-bottom: 28px; }
.simu-tete h2 { margin-bottom: 12px; }
.simu-tete p { font-size: 1.125rem; }
.simu { background: #fff; border-radius: 28px; box-shadow: 0 1px 0 rgb(16 21 58 / .06), 0 30px 60px -30px rgb(16 21 58 / .25); padding: clamp(10px, 1.6vw, 14px); color: var(--encre); }
.simu [hidden] { display: none !important; }
.simu-inactif .simu-panneau, .simu-inactif .simu-onglets { opacity: .45; pointer-events: none; }
.simu-perime { margin: 8px 8px 14px; padding: 14px 18px; border-radius: 14px; background: #ffe1d1; color: var(--encre) !important; max-width: none !important; }
.simu-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 20px; background: var(--ivoire); }
.simu-onglets button { min-height: 60px; padding: 10px 14px; border: 0; border-radius: 15px; background: transparent; color: var(--gris); font: 600 1rem/1.25 var(--texte); cursor: pointer; transition: background .2s var(--sortie), color .2s var(--sortie); }
.simu-onglets button span { display: inline-block; margin-left: 6px; font: 500 .75rem/1 var(--mono); letter-spacing: .08em; padding: 4px 7px; border-radius: 6px; background: rgb(47 68 206 / .1); color: var(--bleu); vertical-align: 2px; }
.simu-onglets button[aria-selected="true"] { background: var(--nuit); color: #fff; }
.simu-onglets button[aria-selected="true"] span { background: rgb(185 205 255 / .18); color: var(--bleu-p); }
@media (hover: hover) { .simu-onglets button[aria-selected="false"]:hover { background: #fff; color: var(--encre); } }
.simu-panneau { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); gap: clamp(20px, 3vw, 40px); padding: clamp(22px, 3.4vw, 40px) clamp(14px, 2.6vw, 30px) clamp(16px, 2vw, 24px); }
.simu-panneau:focus-visible { outline-offset: -2px; border-radius: 20px; }
.simu-champ { border: 0; margin: 0 0 26px; min-width: 0; }
.simu-champ > label, .simu-champ legend { display: block; margin-bottom: 10px; font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--encre); }
.simu-saisie { display: flex; align-items: center; min-height: 58px; border: 1.5px solid rgb(16 21 58 / .2); border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.simu-saisie:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 4px rgb(47 68 206 / .14); }
.simu-saisie input { flex: 1; min-width: 0; border: 0; background: none; padding: 12px 16px; font: 600 1.25rem/1 var(--texte); color: var(--encre); outline: 0; }
.simu-saisie input::placeholder { color: rgb(90 96 133 / .55); font-weight: 400; }
.simu-saisie input[aria-invalid="true"] { color: #b4232c; }
.simu-saisie:has(input[aria-invalid="true"]) { border-color: #b4232c; }
.simu-saisie span { padding: 0 16px; color: var(--gris); font: .9rem var(--mono); white-space: nowrap; }
.simu-select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; min-height: 58px; padding: 12px 44px 12px 16px; border: 1.5px solid rgb(16 21 58 / .2); border-radius: 14px; font: 500 1rem/1.3 var(--texte); color: var(--encre); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232f44ce' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 18px center; appearance: none; }
.simu-select:focus-visible { border-color: var(--bleu); box-shadow: 0 0 0 4px rgb(47 68 206 / .14); outline: 0; }
.simu-choix-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.simu-choix { position: relative; cursor: pointer; }
.simu-choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.simu-choix span { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 16px; border: 1.5px solid rgb(16 21 58 / .16); border-radius: 12px; font-size: .95rem; line-height: 1.3; color: var(--encre); transition: border-color .2s, background .2s; }
.simu-choix input:checked + span { border-color: var(--bleu); background: rgb(47 68 206 / .07); box-shadow: inset 0 0 0 1px var(--bleu); }
.simu-choix input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (hover: hover) { .simu-choix:hover span { border-color: var(--bleu-m); } }
.simu .simu-aide { margin: 9px 0 0; font-size: .875rem; line-height: 1.5; max-width: none; }
.simu .simu-erreur { margin: 8px 0 0; font-size: .875rem; color: #b4232c; }
.simu .simu-note { margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: var(--ivoire); font-size: .9rem; line-height: 1.5; color: var(--encre); max-width: none; }
.simu .simu-note-calcul { border-left: 3px solid var(--bleu); }
.simu-resultat { align-self: start; position: sticky; top: 100px; padding: clamp(24px, 3vw, 32px); border-radius: 22px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgb(47 68 206 / .55), transparent 60%), var(--nuit); }
.simu .simu-resultat p { color: rgb(255 255 255 / .74); max-width: none; }
.simu .simu-etiquette { margin: 0; font: 500 .75rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-p); }
.simu .simu-montant { margin: 12px 0 4px; font: 500 clamp(2.2rem, 4vw, 3.2rem)/1.08 var(--titre); letter-spacing: -.02em; color: #fff; overflow-wrap: anywhere; }
.simu .simu-legende { margin: 0 0 18px; font-size: .9rem; }
.simu-detail { margin: 0 0 18px; border-top: 1px solid rgb(185 205 255 / .2); }
.simu-detail div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgb(185 205 255 / .2); font-size: .95rem; }
.simu-detail dt { color: rgb(255 255 255 / .7); }
.simu-detail dd { font-weight: 600; text-align: right; white-space: nowrap; }
.simu .simu-message { margin: 0 0 18px; font-size: .9rem; line-height: 1.55; color: #fff; }
.simu-copier { width: 100%; min-height: 50px; border: 1px solid rgb(185 205 255 / .35); border-radius: 12px; background: rgb(255 255 255 / .08); color: #fff; font: 600 .95rem var(--texte); cursor: pointer; transition: background .2s; }
.simu-copier:not(:disabled):hover { background: rgb(255 255 255 / .16); }
.simu-copier:disabled { opacity: .4; cursor: not-allowed; }
.simu .simu-reserve { margin: 16px 0 0; font-size: .78rem; line-height: 1.55; color: rgb(255 255 255 / .6); }
.simu-suite { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgb(185 205 255 / .2); }
.simu-suite .action { width: 100%; justify-content: space-between; min-height: 56px; padding-left: 20px; font-size: .95rem; line-height: 1.25; }
.simu .simu-suite p { margin: 10px 0 0; font-size: .85rem; line-height: 1.5; }
.simu .simu-sources { margin: 0; padding: 4px clamp(14px, 2.6vw, 30px) 18px; font-size: .8rem; line-height: 1.7; max-width: none; }
.simu-sources a { color: var(--bleu); }
@media (max-width: 860px) {
  .simu-panneau { grid-template-columns: minmax(0, 1fr); }
  .simu-resultat { position: static; }
}
@media (max-width: 520px) {
  .simu { border-radius: 22px; }
  .simu-onglets button { font-size: .9rem; min-height: 64px; }
  .simu-onglets button span { display: block; width: max-content; margin: 6px auto 0; }
}

.simu-questions { min-width: 0; }