/* ============================================================
   ORIION GLOBAL — Feuille de style
   Architecture de marque :
   · une même structure, une même typographie (Jost)
   · seule la couleur du point identifie chaque univers
     Global #F4981C · Academy #10A094 · Accompagnement #3C9D36
     Studio #E6002A · Connect #7B4DCC · Bleu principal #223140
   ============================================================ */

:root {
  --bleu: #223140;
  --orange: #F4981C;
  --vert: #3C9D36;
  --dore: #D4AF37;
  --academy: #10A094;          /* le point de l'Academy (turquoise de sa charte) */
  --academy-rgb: 16, 160, 148;
  --rouge: #E6002A;
  --violet: #7B4DCC;

  --orange-rgb: 244, 152, 28;
  --vert-rgb: 60, 157, 54;
  --dore-rgb: 212, 175, 55;
  --rouge-rgb: 230, 0, 42;
  --violet-rgb: 123, 77, 204;

  /* Univers courant (par défaut : ORIION Global) */
  --u: var(--orange);
  --u-rgb: var(--orange-rgb);
  --u-text: #b86f0c;

  --ink: #223140;
  --ink-soft: #5b6675;
  --line: #e3ded6;
  --bg-soft: #f4f2ee;
  --white: #ffffff;

  --font: "Archivo", "Segoe UI", system-ui, sans-serif;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(34, 49, 64, .06);
  --shadow-lg: 0 22px 44px rgba(34, 49, 64, .12);
  --sable: #E8E2DB;
  /* Couleur du texte posé sur la couleur d'univers (orange et doré : bleu, sinon blanc) */
  --u-ink: #223140;
  --nuit: #223140;
  /* Couleur des points décoratifs */
  --pt: var(--u);
  --maxw: 1180px;
}
body[data-univers="academy"]        { --u: var(--dore);   --u-rgb: var(--dore-rgb);   --u-text: #8f7418; }
body[data-univers="accompagnement"] { --u: var(--vert);   --u-rgb: var(--vert-rgb);   --u-text: #2c7a28; --u-ink: #fff; }
body[data-univers="studio"]         { --u: var(--rouge);  --u-rgb: var(--rouge-rgb);  --u-text: #b8001f; --u-ink: #fff; }
body[data-univers="connect"]        { --u: var(--violet); --u-rgb: var(--violet-rgb); --u-text: #5f36a8; --u-ink: #fff; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; color: var(--bleu); letter-spacing: -.01em; }
h1, h2 { font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.06; font-stretch: 92%; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; }
.section-tight { padding: 56px 0; }
.soft { background: var(--bg-soft); }
.tint { background: linear-gradient(110deg, #eee9e2 0%, #f5f2ed 55%, rgba(var(--u-rgb), .14) 100%); }
.center { text-align: center; }
.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 720px; }
.center .lead { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 14px; } .mt-2 { margin-top: 28px; } .mt-3 { margin-top: 52px; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--u-ink); background: var(--u); padding: 7px 16px 6px;
  clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); margin-bottom: 18px;
}
/* Les hachures ///// sous un titre, à la couleur de l'univers */
.hachures { display: block; width: 150px; height: 9px; margin-top: 12px; background: repeating-linear-gradient(-60deg, var(--u) 0 2px, transparent 2px 6px); }
.center .hachures { margin-left: auto; margin-right: auto; }
.note { font-size: .9rem; color: var(--ink-soft); }
.u-text { color: var(--u-text); }

/* ---------- Logo (wordmark) ----------
   ORIIO•N : le point coloré identifie l'univers.        */
.wm {
  --dot: var(--orange);
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1; color: var(--bleu); font-size: 26px;
}
.wm-name {
  display: inline-flex; align-items: baseline;
  font-weight: 700; font-size: 1em; letter-spacing: .04em;
}
.wm-dot {
  display: inline-block; width: .24em; height: .24em; border-radius: 50%;
  background: var(--dot); margin: 0 .04em 0 .02em; transform: translateY(-.03em);
}
.wm-sub {
  font-weight: 500; font-size: .40em; letter-spacing: .34em; text-indent: .34em;
  margin-top: .32em; color: var(--bleu);
}
.wm--academy        { --dot: var(--academy); }
.wm--accompagnement { --dot: var(--vert); }
.wm--studio         { --dot: var(--rouge); }
.wm--connect        { --dot: var(--violet); }
.wm--global         { --dot: var(--orange); }
.wm-line { width: 64px; height: 3px; background: var(--dot); border-radius: 3px; margin-top: .55em; }
/* Le vrai logotype (PNG) : sa hauteur suit la taille de police du bloc .wm */
.wm-img { display: block; height: 1.05em; width: auto; }
/* Chaque logo existe en deux images ; le fond décide laquelle s'affiche */
.wm-img--clair { display: none; }
.sombre .wm-img--clair, .ub-visual .wm-img--clair, .cm .wm-img--clair { display: block; }
.sombre .wm-img--fonce, .ub-visual .wm-img--fonce, .cm .wm-img--fonce { display: none; }
.wm-img--plein { height: 1.7em; }
/* Logotype Academy : ORIION + ACADEMY dans l'image, un peu plus haut que le mot seul */
.wm-img--academy { height: 1.5em; }
.site-header .wm-img--plein { height: 44px; }
.site-footer .wm-img--plein { height: 52px; }
.wm-xl { font-size: clamp(54px, 9vw, 104px); }
.wm-lg { font-size: clamp(40px, 6vw, 64px); }
.wm-md { font-size: 34px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 10px; border: 2px solid var(--bleu);
  background: var(--bleu); color: #fff; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(34,49,64,.18); }
.btn-u { background: var(--u); border-color: var(--u); color: var(--u-ink); }
.btn-u:hover { box-shadow: 0 12px 24px rgba(var(--u-rgb), .32); }
.btn-outline { background: transparent; color: var(--bleu); }
.btn-outline:hover { background: var(--bleu); color: #fff; }
.btn-outline-u { background: transparent; color: var(--u-text); border-color: var(--u); }
.btn-outline-u:hover { background: var(--u); color: var(--u-ink); }
.btn-light { background: #fff; border-color: #fff; color: var(--bleu); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--bleu); }
.btn-sm { padding: 10px 17px; font-size: .92rem; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }
.center .actions { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  /* pas de backdrop-filter : il ferait du bandeau le repère du menu mobile fixé */
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 14px; }
.main-nav { display: flex; align-items: center; gap: 14px; }
.main-nav > ul { display: flex; align-items: center; gap: 4px; }
.main-nav > ul > li { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 8px;
  font-weight: 500; font-size: .93rem; border-radius: 8px; transition: background .2s;
}
.nav-link:hover, .nav-link.active { background: var(--bg-soft); }
.nav-link.active { font-weight: 700; }
.nav-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--orange)); flex: none; }
.sub-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 320px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s;
}
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sub-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: .94rem; white-space: nowrap; }
.sub-menu a:hover { background: var(--bg-soft); }
.soon-tag { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0d8378; background: rgba(16,160,148,.14); padding: 3px 9px; border-radius: 999px; flex: none; }
.nav-cta { display: flex; gap: 8px; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; align-items: center; }
.burger span { width: 24px; height: 2px; background: var(--bleu); transition: .25s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.notice-band { background: var(--bleu); color: #fff; text-align: center; font-size: .9rem; padding: 9px 16px; }
.notice-band b { color: var(--u); }

/* ---------- Hero accueil ---------- */
.hero { padding: 90px 0 84px; }
.hero.sombre { background: radial-gradient(60% 70% at 100% 0%, rgba(var(--orange-rgb), .6), rgba(var(--orange-rgb), 0) 70%), linear-gradient(160deg, #1f2b38 0%, var(--nuit) 50%, #1a2530 100%); }
.hero .container { position: relative; z-index: 1; }
.hero h1 { margin-top: 26px; font-size: clamp(2.2rem, 5.4vw, 4.2rem); max-width: 14ch; }
.hero h1 > span { display: block; }
/* Une fois le titre découpé mot à mot (système mo- de l'autre session), chaque
   ligne est un .mo-mot : on force le retour à la ligne, qui ne doit pas dépendre
   de la largeur des mots. */
html.mo .hero h1 > .mo-mot { display: block; }
/* Défi de la carte (page Academy) : flèche manuscrite + phrase, là où la carte
   existe (au-dessus de 900 px, pointeur fin). La carte, elle, reste intouchable. */
.defi-carte { display: none; }
@media (min-width: 901px) and (hover: hover) {
  .hero-carte .defi-carte { display: flex; align-items: flex-end; gap: 8px; position: absolute; right: 19%; bottom: 9%; z-index: 2; max-width: 290px; pointer-events: none; }
}
.defi-carte svg { width: 92px; height: 92px; flex: none; overflow: visible; fill: none; stroke: var(--jaune); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; animation: defi-flotte 3.2s ease-in-out infinite; }
.defi-carte .defi-trait { stroke-dasharray: .045 .04; }
.defi-carte p { font-family: "Kaushan Script", cursive; font-size: 1.32rem; line-height: 1.18; color: #fff; transform: rotate(-5deg); text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.defi-carte p b { display: block; color: var(--jaune); font-weight: 400; font-size: 1.12em; }
@keyframes defi-flotte { 0%, 100% { transform: translate(0, 0) rotate(6deg); } 50% { transform: translate(-5px, -7px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .defi-carte svg { animation: none; } }

/* ---- Découvrir : le mur des invités (#rencontres) ---------- */
.rc-mur { position: relative; isolation: isolate; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: 0 24px 60px -30px rgba(37, 50, 65, .35); }
.rc-mur::before { content: ""; position: absolute; inset: -14px -14px auto auto; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--jaune-rgb, 223, 181, 68), .45) 0 2px, transparent 2.5px) 0 0 / 14px 14px; z-index: -1; }
.rc-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.rc-tete b { display: block; font-size: 1.12rem; color: var(--nuit); }
.rc-tete span:not(.rc-micro) { display: block; font-size: .9rem; color: var(--muted, #5d6670); }
.rc-micro { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--nuit); display: grid; place-items: center; position: relative; }
.rc-micro::after { content: ""; position: absolute; inset: -5px; border-radius: 18px; border: 2px solid var(--turq); opacity: 0; animation: rc-onde 2.4s ease-out infinite; }
.rc-micro svg, .rc-ico svg { width: 24px; height: 24px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rc-micro svg { stroke: var(--jaune); }
.rc-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-grille li { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--sable-2, #F4F0EA);
  border: 1px solid transparent; transition: transform .3s, border-color .3s, background .3s, box-shadow .3s; }
.rc-grille li b { font-size: .95rem; color: var(--nuit); line-height: 1.2; }
.rc-grille li small { grid-column: 2; font-size: .8rem; color: var(--muted, #5d6670); line-height: 1.35; }
.rc-ico { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--turq-rgb, 16, 160, 148), .12); }
.rc-ico svg { stroke: var(--turq); }
.rc-grille li:nth-child(4n+2) .rc-ico, .rc-grille li:nth-child(4n+3) .rc-ico { background: rgba(var(--jaune-rgb, 223, 181, 68), .2); }
.rc-grille li:nth-child(4n+2) .rc-ico svg, .rc-grille li:nth-child(4n+3) .rc-ico svg { stroke: #b58b17; }
.rc-grille li:hover { transform: translateY(-3px); background: #fff; border-color: var(--line); box-shadow: 0 12px 26px -16px rgba(37, 50, 65, .4); }
.rc-format { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border-radius: 14px; background: var(--nuit); color: rgba(255, 255, 255, .72); font-size: .8rem; line-height: 1.35; }
.rc-format span { padding: 14px 16px; }
.rc-format span + span { border-left: 1px dashed rgba(255, 255, 255, .18); }
.rc-format b { display: block; color: var(--jaune); font-size: .95rem; margin-bottom: 2px; }
@keyframes rc-onde { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }
@media (max-width: 640px) {
  .rc-mur { padding: 18px; border-radius: 16px; }
  .rc-grille { grid-template-columns: 1fr; }
  .rc-format { grid-template-columns: 1fr; }
  .rc-format span + span { border-left: 0; border-top: 1px dashed rgba(255, 255, 255, .18); }
}
@media (prefers-reduced-motion: reduce) { .rc-micro::after { animation: none; } }

/* ---- Découvrir : la route de la découverte (De l'idée à l'expérience) ---- */
.ex-route { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.ex-route::before, .ex-route::after { content: ""; position: absolute; top: 34px; left: 12.5%; right: 12.5%; height: 4px; border-radius: 4px; }
.ex-route::before { background: repeating-linear-gradient(90deg, rgba(var(--turq-rgb, 16, 160, 148), .35) 0 8px, transparent 8px 16px); }
.ex-route::after { background: linear-gradient(90deg, var(--turq), var(--jaune)); transform-origin: left; }
.ex-route.visible::after { animation: ex-remplir 1.8s .3s cubic-bezier(.6, 0, .2, 1) backwards; }
.ex-etape { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.ex-pastille { position: relative; width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 3px solid var(--turq); display: grid; place-items: center;
  box-shadow: 0 0 0 8px var(--sable-2, #F4F0EA), 0 14px 28px -14px rgba(37, 50, 65, .45); transition: transform .35s; }
.ex-pastille svg { width: 30px; height: 30px; fill: none; stroke: var(--turq); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ex-pastille em { position: absolute; top: -6px; right: -8px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--nuit); color: #fff;
  font-style: normal; font-weight: 800; font-size: .74rem; display: grid; place-items: center; }
.ex-carte { margin-top: 20px; width: 100%; flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 18px 16px; text-align: center;
  box-shadow: 0 16px 34px -24px rgba(37, 50, 65, .45); transition: transform .35s, box-shadow .35s; }
.ex-carte h3 { text-transform: uppercase; font-size: .98rem; line-height: 1.25; }
.ex-carte p { color: var(--ink-soft); font-size: .9rem; margin-top: 6px; }
.ex-etape:hover .ex-carte { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(37, 50, 65, .5); }
.ex-etape:hover .ex-pastille { transform: scale(1.06) rotate(-4deg); }
.ex-envie { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ex-envie i { width: 16px; height: 6px; border-radius: 3px; background: var(--line); }
.ex-envie i:first-of-type { margin-left: 4px; }
.ex-envie[data-n="1"] i:nth-of-type(-n+1), .ex-envie[data-n="2"] i:nth-of-type(-n+2),
.ex-envie[data-n="3"] i:nth-of-type(-n+3), .ex-envie[data-n="4"] i { background: var(--turq); }
/* la dernière étape : la direction trouvée */
.ex-etape--cible .ex-pastille { background: var(--jaune); border-color: var(--jaune); animation: ex-halo 2.6s ease-out infinite; }
.ex-etape--cible .ex-pastille svg { stroke: var(--nuit); }
.ex-etape--cible .ex-pastille em { background: #fff; color: var(--nuit); }
.ex-etape--cible .ex-carte { background: var(--nuit); border-color: var(--nuit); }
.ex-etape--cible .ex-carte h3 { color: var(--jaune); }
.ex-etape--cible .ex-carte p, .ex-etape--cible .ex-envie { color: rgba(255, 255, 255, .72); }
.ex-etape--cible .ex-envie i { background: var(--jaune); }
/* la fusée qui fait la route */
/* la piste couvre la route ; seule la transformation bouge (pas de recalcul de mise en page) */
.ex-fusee { position: absolute; z-index: 1; top: 13px; left: calc(12.5% - 23px); right: calc(12.5% - 23px); height: 46px; container-type: inline-size; pointer-events: none; }
.ex-fusee svg { display: block; width: 46px; height: 46px; animation: ex-vol 7s ease-in-out infinite; will-change: transform, opacity; fill: var(--jaune); stroke: var(--nuit); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
/* les portes : ce que ça peut devenir */
.ex-portes { position: relative; isolation: isolate; overflow: hidden; margin-top: 56px; padding: 30px 28px 32px; border-radius: 22px; background: var(--nuit); }
.ex-portes::before { content: ""; position: absolute; z-index: -1; top: -26px; right: -26px; width: 96px; height: 96px;
  background: radial-gradient(circle, rgba(var(--jaune-rgb, 223, 181, 68), .35) 0 2px, transparent 2.5px) 0 0 / 14px 14px; }
.ex-portes-titre { margin: 0 0 20px; text-align: center; color: #fff; font-weight: 800; font-size: 1.2rem; }
.ex-portes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ex-portes li { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 12px; color: #fff; font-weight: 700; font-size: .92rem;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: transform .3s, background .3s, border-color .3s; }
.ex-portes li:hover { transform: translateY(-3px); background: rgba(var(--turq-rgb, 16, 160, 148), .16); border-color: rgba(var(--turq-rgb, 16, 160, 148), .55); }
.ex-portes li span { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--turq-rgb, 16, 160, 148), .2); }
.ex-portes li svg { width: 19px; height: 19px; fill: none; stroke: var(--turq); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ex-portes li:nth-child(even) span { background: rgba(var(--jaune-rgb, 223, 181, 68), .18); }
.ex-portes li:nth-child(even) svg { stroke: var(--jaune); }
.ex-portes.visible li { animation: ex-entree .5s calc(var(--i, 0) * 70ms + .25s) backwards; }
.ex-fusee svg, .ex-etape--cible .ex-pastille { animation-play-state: var(--mo-etat, running); }
@keyframes ex-remplir { from { transform: scaleX(0); } }
@keyframes ex-vol { 0% { transform: translateX(0) rotate(90deg); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(calc(50cqw - 23px), -4px) rotate(90deg); } 88% { opacity: 1; } 100% { transform: translateX(calc(100cqw - 46px)) rotate(90deg); opacity: 0; } }
@keyframes ex-halo { 0% { box-shadow: 0 0 0 8px var(--sable-2, #F4F0EA), 0 0 0 8px rgba(var(--jaune-rgb, 223, 181, 68), .5); }
  100% { box-shadow: 0 0 0 8px var(--sable-2, #F4F0EA), 0 0 0 22px rgba(var(--jaune-rgb, 223, 181, 68), 0); } }
@keyframes ex-entree { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 900px) {
  .ex-route { grid-template-columns: 1fr 1fr; gap: 34px 16px; }
  .ex-route::before, .ex-route::after, .ex-fusee { display: none; }
}
@media (max-width: 640px) {
  .ex-route { grid-template-columns: 1fr; gap: 16px; }
  .ex-route::before { display: block; top: 36px; bottom: 36px; left: 34px; right: auto; width: 4px; height: auto;
    background: repeating-linear-gradient(180deg, rgba(var(--turq-rgb, 16, 160, 148), .35) 0 8px, transparent 8px 16px); }
  .ex-etape { flex-direction: row; align-items: flex-start; gap: 16px; }
  .ex-pastille { flex: none; }
  .ex-carte { margin-top: 0; text-align: left; padding: 16px; }
  .ex-portes { padding: 24px 16px; border-radius: 18px; }
  .ex-portes li { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ex-fusee svg, .ex-etape--cible .ex-pastille { animation: none; } .ex-fusee { display: none; } }

/* ---- Découvrir : le cycle « On observe. On touche. On recommence. » ---- */
.ob-cycle { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; position: relative; }
.ob-cycle::before { content: ""; position: absolute; top: 31px; left: 7.14%; right: 7.14%; height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(var(--turq-rgb, 16, 160, 148), .4) 0 7px, transparent 7px 14px); }
.ob-cycle li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ob-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--line);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .55), 0 12px 24px -14px rgba(37, 50, 65, .45); transition: transform .3s, border-color .3s;
  animation: ob-tour 4.9s calc(var(--i, 0) * .7s) infinite; animation-play-state: var(--mo-etat, running); }
.ob-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--turq); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ob-cycle li:nth-child(even) .ob-ico svg { stroke: #b58b17; }
.ob-cycle li b { margin-top: 14px; font-size: .95rem; color: var(--nuit); line-height: 1.2; }
.ob-cycle li small { margin-top: 4px; font-size: .78rem; color: var(--ink-soft); line-height: 1.35; max-width: 130px; }
.ob-cycle li:hover .ob-ico { transform: translateY(-4px) rotate(-6deg); border-color: var(--turq); }
/* la boucle de retour : du dernier geste vers le premier */
.ob-boucle { position: relative; height: 34px; margin: 8px 7.14% 40px; border: 2px dashed rgba(var(--turq-rgb, 16, 160, 148), .45); border-top: 0; border-radius: 0 0 40px 40px; }
.ob-boucle::before { content: ""; position: absolute; left: -7px; top: -8px; border: 6px solid transparent; border-bottom: 9px solid var(--turq); border-top: 0; }
.ob-boucle span { position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%) rotate(-3deg);
  font-family: "Kaushan Script", cursive; font-size: 1.1rem; color: var(--turq); white-space: nowrap; }
@keyframes ob-tour { 0%, 14%, 100% { transform: none; border-color: var(--line); } 6% { transform: translateY(-6px) scale(1.08); border-color: var(--turq); } }
@media (max-width: 900px) {
  .ob-cycle { grid-template-columns: repeat(4, 1fr); gap: 26px 10px; }
  .ob-cycle::before, .ob-boucle { display: none; }
}
@media (max-width: 640px) {
  .ob-cycle { grid-template-columns: 1fr 1fr; }
  .ob-cycle li:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .ob-ico { animation: none; } }

/* ---- Academy : la carte « Notre équipe » et la page equipe.html ---- */
a.eq-carte { color: inherit; text-decoration: none; cursor: pointer; }
a.eq-carte h3 { color: var(--nuit); }
a.eq-carte:hover { border-style: solid; background: rgba(var(--turq-rgb, 16, 160, 148), .06); }
a.eq-carte .card-link { align-self: center; }
/* le :focus-visible global pose border-radius: 4px ; on garde l'arrondi des cartes */
a.eq-carte:focus-visible { border-radius: var(--radius); border-style: solid; }
.eq-role:focus-visible { border-radius: 18px; outline-color: var(--jaune); }
.eq-missions { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.eq-missions li { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px 26px;
  box-shadow: 0 16px 34px -24px rgba(37, 50, 65, .45); transition: transform .3s, box-shadow .3s; }
.eq-missions li:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -24px rgba(37, 50, 65, .5); }
.eq-missions li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--turq); transform: scaleX(.18); transform-origin: left; transition: transform .45s; }
.eq-missions li:hover::after { transform: scaleX(1); }
.eq-num { position: absolute; top: 14px; right: 18px; font-weight: 900; font-size: 2.6rem; line-height: 1; color: rgba(var(--turq-rgb, 16, 160, 148), .14); }
.eq-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(var(--turq-rgb, 16, 160, 148), .12); }
.eq-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--turq); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eq-missions li:nth-child(even) .eq-ico { background: rgba(var(--jaune-rgb, 223, 181, 68), .2); }
.eq-missions li:nth-child(even) .eq-ico svg { stroke: #b58b17; }
.eq-missions li:nth-child(even) .eq-num { color: rgba(var(--jaune-rgb, 223, 181, 68), .25); }
.eq-missions li:nth-child(even)::after { background: var(--jaune); }
.eq-missions h3 { margin-top: 18px; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .02em; }
.eq-missions p { margin-top: 8px; color: var(--ink-soft); font-size: .93rem; }
/* la posture : plutôt que… / nous choisissons de */
.eq-paires-tete, .eq-paires li { display: grid; grid-template-columns: 1fr 56px 1fr; }
.eq-paires-tete { max-width: 860px; margin: 36px auto 0; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.eq-paires-tete span { padding: 0 22px; }
.eq-paires-tete span:last-child { color: var(--turq); }
.eq-paires { list-style: none; max-width: 860px; margin: 10px auto 0; padding: 0; display: grid; gap: 12px; }
.eq-paires li { align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 26px -20px rgba(37, 50, 65, .4); }
.eq-non, .eq-oui { padding: 18px 22px; display: flex; align-items: center; }
.eq-non { color: var(--ink-soft); background: rgba(37, 50, 65, .03); text-decoration: line-through; text-decoration-color: rgba(230, 0, 42, .45); text-decoration-thickness: 2px; }
.eq-oui { font-weight: 800; color: var(--nuit); background: rgba(var(--turq-rgb, 16, 160, 148), .09); }
.eq-vers { display: grid; place-items: center; background: linear-gradient(90deg, rgba(37, 50, 65, .03) 50%, rgba(var(--turq-rgb, 16, 160, 148), .09) 50%); }
.eq-vers svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--turq); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* le chemin de l'autonomie */
.eq-chemin { list-style: none; position: relative; max-width: 980px; margin: 40px auto 0; padding: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.eq-chemin::before, .eq-chemin::after { content: ""; position: absolute; top: 10px; left: 16.66%; right: 16.66%; height: 8px; border-radius: 8px; }
.eq-chemin::before { background: var(--line); }
.eq-chemin::after { background: linear-gradient(90deg, var(--turq), var(--jaune)); transform-origin: left; }
.eq-chemin li { position: relative; text-align: center; padding: 0 10px; }
.eq-chemin li::before { content: ""; position: absolute; z-index: 1; top: -40px; left: 50%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: #fff; border: 5px solid var(--turq); }
.eq-chemin li:nth-child(2)::before { border-color: #7bab6c; }
.eq-chemin li:last-child::before { background: var(--jaune); border-color: var(--jaune); box-shadow: 0 0 0 6px rgba(var(--jaune-rgb, 223, 181, 68), .25); }
.eq-chemin small { display: block; margin-top: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--turq); }
.eq-chemin b { display: block; margin-top: 4px; font-size: 1.15rem; text-transform: uppercase; color: var(--nuit); }
.eq-chemin p { margin-top: 6px; color: var(--ink-soft); font-size: .92rem; }
/* qui fait vivre la maison */
.eq-roles { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.eq-role { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 24px; border-radius: 18px; background: var(--nuit);
  color: rgba(255, 255, 255, .74); font-size: .9rem; line-height: 1.5; text-decoration: none; transition: transform .3s, box-shadow .3s; }
.eq-role:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -22px rgba(37, 50, 65, .6); }
.eq-role::before { content: ""; position: absolute; top: -30px; right: -30px; width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(var(--turq-rgb, 16, 160, 148), .45) 0 2px, transparent 2.5px) 0 0 / 12px 12px; }
.eq-role:nth-child(even)::before { background: radial-gradient(circle, rgba(var(--jaune-rgb, 223, 181, 68), .45) 0 2px, transparent 2.5px) 0 0 / 12px 12px; }
.eq-role small { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--jaune); }
.eq-role b { color: #fff; font-size: 1.1rem; line-height: 1.25; }
.eq-role .eq-go { margin-top: auto; padding-top: 6px; font-weight: 800; color: var(--turq); }
/* venir nous rencontrer */
.eq-cta { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center;
  padding: 44px; border-radius: 24px; background: var(--nuit); color: #fff; }
.eq-cta::before { content: ""; position: absolute; z-index: -1; bottom: -40px; left: -40px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(var(--turq-rgb, 16, 160, 148), .35) 0 2px, transparent 2.5px) 0 0 / 14px 14px; }
.eq-cta h2 { color: #fff; margin-top: 10px; }
.eq-cta p { color: rgba(255, 255, 255, .75); margin-top: 10px; }
.eq-cta .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
.eq-cta .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.eq-horaires { display: grid; gap: 10px; }
.eq-horaires div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-radius: 12px; font-weight: 700;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.eq-horaires span { color: var(--jaune); white-space: nowrap; }
/* entrées en cascade (accrochées à .visible, jamais d'état caché au repos) */
.eq-missions.visible li, .eq-paires.visible li, .eq-roles.visible .eq-role { animation: eq-entree .55s calc(var(--i, 0) * 90ms + .15s) backwards; }
.eq-chemin.visible::after { animation: eq-remplir 2s .3s cubic-bezier(.6, 0, .2, 1) backwards; }
@keyframes eq-entree { from { opacity: 0; transform: translateY(14px); } }
@keyframes eq-remplir { from { transform: scaleX(0); } }
@media (max-width: 900px) {
  .eq-missions, .eq-roles { grid-template-columns: 1fr 1fr; }
  .eq-cta { grid-template-columns: 1fr; padding: 32px 26px; }
}
@media (max-width: 640px) {
  .eq-missions, .eq-roles { grid-template-columns: 1fr; }
  .eq-paires-tete { display: none; }
  .eq-paires li { grid-template-columns: 1fr; }
  .eq-vers { height: 34px; background: none; }
  .eq-vers svg { transform: rotate(90deg); width: 28px; height: 28px; padding: 6px; }
  .eq-chemin { grid-template-columns: 1fr; gap: 26px; padding-top: 0; }
  .eq-chemin::before, .eq-chemin::after { display: none; }
  .eq-chemin li::before { position: static; display: block; margin: 0 auto 4px; }
  .eq-cta { padding: 26px 20px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .eq-missions.visible li, .eq-paires.visible li, .eq-roles.visible .eq-role, .eq-chemin.visible::after { animation: none; } }

/* ---- Academy : les membres de l'équipe (equipe.html, générés depuis _src/equipe.json ; inertes tant que la liste est vide) ---- */
.mb-grille { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.mb-carte { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 38px -26px rgba(37, 50, 65, .5); transition: transform .35s, box-shadow .35s; }
.mb-carte:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 26px 48px -26px rgba(37, 50, 65, .55); }
.mb-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nuit); }
.mb-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(37, 50, 65, .5)); pointer-events: none; }
.mb-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.mb-carte:hover .mb-photo img { transform: scale(1.05); }
.mb-initiale { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 5.5rem; color: var(--jaune);
  background: radial-gradient(circle, rgba(var(--turq-rgb, 16, 160, 148), .35) 0 2px, transparent 2.5px) 0 0 / 16px 16px, linear-gradient(150deg, var(--nuit), #1c4b52); }
.mb-carte:nth-child(even) .mb-initiale { color: var(--turq); }
.mb-texte { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 18px 20px 22px; }
.mb-texte small { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(var(--turq-rgb, 16, 160, 148), .12); color: #0b7a70;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mb-carte:nth-child(even) .mb-texte small { background: rgba(var(--jaune-rgb, 223, 181, 68), .22); color: #7a5c0c; }
.mb-texte b { display: block; margin-top: 10px; font-size: 1.25rem; line-height: 1.15; color: var(--nuit); }
.mb-role { display: block; margin-top: 3px; font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
.mb-citation { margin-top: 12px; font-family: "Kaushan Script", cursive; font-size: 1.05rem; line-height: 1.35; color: #0b7a70; }
.mb-desc { margin-top: 8px; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.mb-lien { margin-top: auto; padding-top: 14px; font-weight: 800; font-size: .9rem; color: #0b7a70; text-decoration: none; }
.mb-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
/* en attendant les portraits : un picto à la place de la photo, en format plus bas */
.mb-photo--picto { aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(var(--turq-rgb, 16, 160, 148), .35) 0 2px, transparent 2.5px) 0 0 / 16px 16px, linear-gradient(150deg, var(--nuit), #1c4b52); }
.mb-picto { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); transition: transform .4s; }
.mb-picto svg { width: 38px; height: 38px; fill: none; stroke: var(--jaune); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mb-carte:nth-child(even) .mb-picto svg { stroke: var(--turq); }
.mb-carte:hover .mb-picto { transform: scale(1.08) rotate(-5deg); }
.mb-grille.visible .mb-carte { animation: eq-entree .55s calc(var(--i, 0) * 90ms + .15s) backwards; }
@media (max-width: 640px) { .mb-grille { grid-template-columns: 1fr; gap: 14px; } .mb-initiale { font-size: 3.6rem; } .mb-texte { padding: 14px; } .mb-texte b { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .mb-grille.visible .mb-carte { animation: none; } }
/* groupes de membres (L'équipe de la maison / Les intervenants du samedi) : grilles centrées, cartes à initiale plus basses */
/* rangées centrées : la dernière rangée incomplète reste au milieu */
.mb-grille { display: flex; flex-wrap: wrap; justify-content: center; }
.mb-grille > .mb-carte { flex: 0 1 260px; }
.mb-groupe-tete { margin-top: 48px; text-align: center; }
.mb-groupe-tete h3 { display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nuit); }
.mb-groupe-tete h3::before, .mb-groupe-tete h3::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--jaune); }
.mb-groupe-tete p { margin-top: 6px; font-size: .92rem; color: var(--ink-soft); }
.mb-groupe-tete + .mb-grille { margin-top: 20px; }
.mb-photo--initiale { aspect-ratio: 4 / 3; }
.mb-photo--initiale .mb-initiale { font-size: 4.4rem; }
@media (max-width: 640px) {
  .mb-grille > .mb-carte { flex-basis: calc(50% - 7px); }
  .mb-photo--initiale .mb-initiale { font-size: 3rem; }
  .mb-texte small { font-size: .6rem; padding: 3px 8px; }
}
.hero h1 span:not(:has(span))::after { content: "."; color: var(--orange); }
.hero .lead { margin: 22px 0 0; max-width: 620px; }
.hero .wm { display: flex; align-items: flex-start; margin: 18px 0 0; }
.hero .wm-img--plein { height: clamp(64px, 8vw, 96px); }
.archi .hachures { margin-left: auto; margin-right: auto; }
.hero .kicker { font-size: .82rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 26px; }
.hero h1 { margin-top: 40px; }
.hero .tagline { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 600; color: var(--bleu); margin-top: 34px; }
.hero .tagline span::after { content: "."; }
.hero .actions { margin-top: 34px; }

/* ---------- Hero page univers ---------- */
.page-hero { padding: 76px 0 70px; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 18ch; }
.page-hero .breadcrumb { font-size: .86rem; color: var(--ink-soft); margin-bottom: 26px; }
.page-hero .breadcrumb a:hover { color: var(--u); }
.page-hero .wm { margin-bottom: 26px; }
.page-hero .values { display: flex; flex-wrap: wrap; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; color: var(--u-text); margin: 6px 0 22px; }
.page-hero .values i { font-style: normal; color: var(--u); margin: 0 10px; }
.page-hero .lead { margin-top: 16px; }
.page-hero .actions { margin-top: 30px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 6px;
  background: var(--u); color: var(--u-ink); font-size: .84rem; font-weight: 700; margin-bottom: 18px;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; }

/* ---------- Architecture de marque (arbre) ---------- */
.archi { text-align: center; }
.archi-root { display: inline-flex; flex-direction: column; align-items: center; position: relative; padding-bottom: 46px; }
.archi-root::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 3px; height: 46px; background: var(--bleu); transform: translateX(-50%); }
.archi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; padding-top: 44px; position: relative; }
.archi-card {
  position: relative; background: #fff; border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); border-top: 0;
  padding: 48px 22px 32px; border-top: 9px solid var(--c); color: inherit;
  transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; align-items: center;
}
.archi-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.archi-card::before { content: ""; position: absolute; top: -53px; left: 50%; width: 3px; height: 44px; background: var(--bleu); transform: translateX(-50%); }
.archi-card::after {
  content: ""; position: absolute; top: -21px; left: 50%; width: 24px; height: 24px; border-radius: 50%;
  background: var(--c); border: 4px solid #fff; transform: translateX(-50%); box-shadow: 0 0 0 2px var(--c);
}
.archi-h { position: absolute; top: -53px; left: 50%; width: calc(100% + 26px); height: 3px; background: var(--bleu); }
.archi-card:last-child .archi-h { display: none; }
.archi-card .wm { --dot: var(--c); font-size: 30px; }
.archi-card .wm-line { background: var(--c); }
.archi-icon { width: 54px; height: 54px; color: var(--c); margin: 22px 0 14px; }
.archi-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Les trois mots-clés, un par ligne : les quatre cartes s'alignent exactement. */
.archi-values { font-size: .84rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-align: center; line-height: 1.7; }
.archi-values i { display: block; height: 0; overflow: hidden; font-size: 0; }
.archi-card .go { margin-top: auto; padding-top: 18px; font-size: .9rem; font-weight: 600; color: var(--c); filter: brightness(.85); }
.archi-note { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.archi-note > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; font-size: .95rem; display: flex; gap: 14px; align-items: center; text-align: left; }
.archi-note .dots { display: flex; gap: 5px; flex: none; }
.archi-note .dots span { width: 12px; height: 12px; border-radius: 50%; }

/* ---------- Blocs univers (accueil) ---------- */
.univers-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 72px 0; border-top: 1px solid var(--line); }
.univers-block:first-child { border-top: 0; }
.univers-block:nth-child(even) .ub-visual { order: -1; }
.ub-visual {
  border-radius: 18px; aspect-ratio: 5 / 4; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
  background: radial-gradient(70% 70% at 100% 0%, rgba(var(--c-rgb), .8), rgba(var(--c-rgb), 0) 70%), linear-gradient(160deg, #1f2c3a, var(--bleu) 55%, #1a2530);
  position: relative; overflow: hidden; isolation: isolate; color: #fff; --u: var(--c); --pt: var(--c);
}
.ub-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/44px 44px; -webkit-mask-image: radial-gradient(70% 90% at 10% 100%, #000 20%, transparent 100%); mask-image: radial-gradient(70% 90% at 10% 100%, #000 20%, transparent 100%); }
.ub-visual .ac-globe { width: 360px; height: 360px; right: -120px; top: auto; bottom: -140px; }
.ub-visual .ac-croix { top: 22px; left: 22px; }
.ub-visual .ac-points { bottom: 22px; left: 22px; }
.ub-visual .wm, .ub-visual .wm-sub { color: #fff; }
.ub-visual .wm { font-size: clamp(36px, 5vw, 56px); --dot: var(--c); }
.ub-visual .wm-line { background: var(--c); }
.ub-visual .archi-icon { color: var(--c); width: 64px; height: 64px; margin: 8px 0 0; filter: brightness(1.15); }
.ub-text .eyebrow { background: var(--c); color: var(--c-ink, #fff); }
.ub-text .values { display: flex; flex-wrap: wrap; font-weight: 600; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text); margin: 10px 0 18px; }
.ub-text .values i { font-style: normal; color: var(--c); margin: 0 8px; }
.ub-text .check-list li::before { color: var(--c); }
.ub-text .btn-u { background: var(--c); border-color: var(--c); color: var(--c-ink, #fff); }
.ub-text .btn-u:hover { box-shadow: 0 12px 24px rgba(var(--c-rgb), .32); }

/* ---------- Cartes & grilles ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
/* Un contenu défilant (calendrier) ne doit pas élargir sa colonne sur mobile */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .form-grid > *, .cal, .cal-jours { min-width: 0; }
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px; border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: .98rem; }
.card-dashed { border: 2px dashed var(--u); background: transparent; box-shadow: none; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.card-dashed:hover { transform: none; box-shadow: none; }
.icon {
  width: 52px; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--u-rgb), .12); color: var(--u-text); margin-bottom: 18px;
}
.icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card.center .icon { margin-left: auto; margin-right: auto; }
.card-link { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--u-text); }
.card-tag { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: rgba(var(--u-rgb), .14); color: var(--u-text); margin-bottom: 14px; }
.card-tag.open { background: rgba(var(--vert-rgb), .14); color: #2c7a28; }

.card-accent { border-left: 4px solid var(--c, var(--u)); }

.pole-card { position: relative; overflow: hidden; }
.pole-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--u); }
.pole-card .icon { margin-bottom: 14px; }

.check-list li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--u); }

.hours-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.hours-table th, .hours-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .96rem; }
.hours-table th { background: var(--bleu); color: #fff; font-weight: 800; text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; }
.hours-table tr:last-child td { border-bottom: 0; }

/* ---------- Chiffres ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; background: #fff; border-radius: var(--radius); padding: 28px 18px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.stat b { display: block; font-size: 2.4rem; font-weight: 800; color: var(--bleu); line-height: 1; letter-spacing: -.02em; }
.stat span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: .92rem; }
.stat i { display: block; width: 36px; height: 4px; border-radius: 4px; margin: 0 auto 16px; background: var(--c, var(--orange)); }

/* ---------- Points forts ---------- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.why { display: flex; gap: 18px; background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.why .num { flex: none; width: 44px; height: 44px; border-radius: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center; background: var(--bleu); color: #fff; font-weight: 700; }
.why p { color: var(--ink-soft); font-size: .96rem; margin-top: 4px; }

/* ---------- Tarifs ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.price-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.price-head { background: var(--bleu); color: #fff; padding: 18px; text-align: center; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .95rem; }
.price-featured .price-head { background: var(--u); color: var(--u-ink); }
.price-featured { border: 2px solid var(--u); transform: scale(1.02); }
.price-body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.price { font-size: 2.3rem; font-weight: 800; color: var(--bleu); text-align: center; line-height: 1; letter-spacing: -.02em; }
.price small { font-size: .95rem; font-weight: 500; color: var(--ink-soft); }
.price-body ul { margin: 22px 0 26px; flex: 1; }
.price-body li { padding: 8px 0 8px 26px; border-bottom: 1px solid var(--line); position: relative; font-size: .95rem; }
.price-body li::before { content: "✓"; position: absolute; left: 0; color: var(--u); font-weight: 700; }
.price-body li .sub { display: block; font-size: .82rem; color: var(--ink-soft); }
.price-body .btn { width: 100%; }
.ribbon { position: absolute; top: 18px; right: -38px; background: var(--bleu); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 44px; transform: rotate(45deg); white-space: nowrap; }

/* ---------- Formulaires ---------- */
.form-card h3 { margin-bottom: 6px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 6px; color: var(--bleu); }
input, select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 8px; font: inherit; font-size: .96rem;
  color: var(--ink); background: #fff; transition: border .2s, box-shadow .2s;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--u); box-shadow: 0 0 0 4px rgba(var(--u-rgb), .16); }
.form-success { display: none; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(var(--vert-rgb), .12); color: #2c7a28; font-weight: 500; }
.form-success.show { display: block; }
.form-error { display: none; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(var(--rouge-rgb), .1); color: #b00020; font-weight: 500; }
.form-error.show { display: block; }
button[disabled] { opacity: .6; cursor: progress; transform: none; }
.form-note { font-size: .84rem; color: var(--ink-soft); margin-top: 14px; }

/* ---------- Passerelles entre univers ---------- */
.pass-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.pass-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 30px 28px; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.pass-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pass-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--de), var(--vers)); }
.pass-flow { display: flex; align-items: center; gap: 9px; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; white-space: nowrap; }
.pass-flow b { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--bleu); }
.pass-flow b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.pass-flow .de { --c: var(--de); }
.pass-flow .vers { --c: var(--vers); }
.pass-flow .fleche { color: var(--ink-soft); font-size: 1rem; letter-spacing: 0; }
.pass-card h3 { margin-bottom: 8px; }
.pass-card p { color: var(--ink-soft); font-size: .98rem; }
.pass-card .card-link { color: var(--vers); filter: brightness(.85); }

/* ---------- Rubrique éditoriale ---------- */
.pub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.pub-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.pub-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--u); }
.pub-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pub-card h3 { font-size: 1.18rem; }
.pub-card p { color: var(--ink-soft); font-size: .96rem; flex: 1; }
.pub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pub-reseau, .pub-cat {
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.pub-reseau { background: rgba(var(--u-rgb), .14); color: var(--u-text); }
.pub-cat { border: 1px solid var(--line); color: var(--ink-soft); }
.pub-pied { font-size: .84rem; color: var(--ink-soft); }
.page-hero .pub-meta { margin-bottom: 18px; }

.pub-article { max-width: 720px; margin: 0 auto; font-size: 1.06rem; }
.pub-article p { color: var(--ink-soft); margin-bottom: 1em; }
.pub-encart {
  background: var(--bg-soft); border-left: 3px solid var(--u); border-radius: 0 14px 14px 0;
  padding: 18px 22px; margin: 22px 0;
}
.pub-encart b {
  display: block; font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--u-text); margin-bottom: 8px;
}
.pub-encart p:last-child { margin-bottom: 0; }
.pub-oui { border-left-color: var(--vert); background: rgba(var(--vert-rgb), .07); }
.pub-oui b { color: #2c7a28; }
.pub-non { border-left-color: var(--rouge); background: rgba(var(--rouge-rgb), .06); }
.pub-non b { color: #b8001f; }
.pub-cta {
  margin-top: 40px; padding: 28px; border: 2px dashed var(--u); border-radius: var(--radius);
  text-align: center;
}
.pub-cta p { font-size: 1.1rem; color: var(--ink); font-weight: 500; margin-bottom: 18px; }

/* ---------- Carte membre Academy ---------- */
.cartes-membre { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cm { position: relative; background: #fbf8f1; border: 1px solid #e6dfd0; border-radius: 22px; padding: 26px 26px 0; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 420px; color: var(--bleu); }
.cm-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cm-tete .wm { font-size: 26px; align-items: flex-start; }
.cm-badge { background: var(--dore); color: var(--bleu); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; padding: 6px 12px; border-radius: 4px; transform: rotate(-2deg); }
.cm-accroche { font-weight: 600; font-size: .92rem; text-transform: uppercase; letter-spacing: .02em; max-width: 24ch; line-height: 1.4; }
.cm-liste { display: grid; gap: 6px; font-size: .88rem; }
.cm-liste li { position: relative; padding-left: 22px; }
.cm-liste li::before { content: ""; position: absolute; left: 0; top: .35em; width: 12px; height: 12px; border: 2px solid var(--dore); border-radius: 4px; }
.cm-champs { display: grid; gap: 8px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.cm-champs span::after { content: ""; display: inline-block; width: 55%; border-bottom: 1px dotted #9aa3ae; margin-left: 8px; vertical-align: bottom; }
.cm-numero { border: 1.5px solid var(--bleu); border-radius: 8px; padding: 8px 12px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cm-numero::after { content: ""; display: inline-block; width: 60%; border-bottom: 1px dotted #9aa3ae; margin-left: 8px; vertical-align: bottom; }
.cm-pied { margin: auto -26px 0; background: var(--bleu); color: #fff; padding: 14px 26px; font-weight: 600; font-size: .92rem; text-transform: uppercase; letter-spacing: .04em; }
.cm-pied b { color: var(--dore); }
.cm-tete--sombre { background: var(--bleu); color: #fff; margin: -26px -26px 0; padding: 16px 26px; font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; justify-content: center; }
.cm-tete--sombre b { color: var(--dore); margin-right: 8px; }
.cm-pass { display: flex; justify-content: center; gap: 28px; font-weight: 700; text-transform: uppercase; font-size: .9rem; padding-bottom: 10px; border-bottom: 1.5px solid var(--bleu); }
.cm-acces { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: .84rem; padding-bottom: 10px; border-bottom: 1.5px solid var(--bleu); }
.cm-acces > div { display: grid; gap: 5px; align-content: start; }
.cm-acces > div + div { border-left: 1.5px solid var(--bleu); padding-left: 16px; }
.cm-acces b { background: var(--dore); display: inline-block; width: max-content; padding: 2px 8px; text-transform: uppercase; font-size: .76rem; letter-spacing: .06em; margin-bottom: 4px; }
.cm-acces em { font-style: normal; color: #a8770a; font-weight: 600; font-size: .8rem; text-transform: uppercase; }
.cm-sous { display: inline-block; background: var(--dore); padding: 2px 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; width: max-content; }
.cm-sous small { background: none; text-transform: none; font-weight: 500; letter-spacing: 0; font-size: .72rem; margin-left: 4px; }
.cm-mois { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; text-align: center; font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.cm-mois span::after { content: ""; display: block; width: 20px; height: 20px; margin: 5px auto 0; border: 1.5px solid var(--bleu); border-radius: 50%; }
.cm-signature { display: flex; justify-content: space-between; gap: 14px; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cm-signature span:last-child { flex: 1; max-width: 55%; border: 1.5px solid var(--bleu); border-radius: 8px; padding: 6px 10px; min-height: 52px; }
@media (max-width: 900px) { .cartes-membre { grid-template-columns: 1fr; } }
/* Les vraies faces de la carte membre (PDF de Mysah), posées côte à côte
   comme deux cartes sur une table ; elles se redressent au survol. */
.cm-faces { display: flex; justify-content: center; align-items: flex-start; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap; }
.cm-face { margin: 0; width: min(300px, 78vw); display: grid; gap: 12px; justify-items: center; }
.cm-face img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-lg);
  transition-property: rotate, translate; transition-duration: .45s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
.cm-face--recto img { rotate: -3deg; }
.cm-face--verso img { rotate: 3deg; translate: 0 18px; }
.cm-face:hover img { rotate: 0deg; translate: 0 -6px; }
.cm-face figcaption { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.cm-face--verso figcaption { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .cm-face img { transition: none; } }

/* ---------- Pages légales ---------- */
.legal { max-width: 820px; margin: 0 auto; }
.legal h2 { font-size: 1.3rem; text-transform: none; letter-spacing: -.01em; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 1.05rem; margin-top: 24px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal p { margin-top: 12px; }
.legal ul { margin-top: 12px; }
.legal ul li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.legal ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--u); }
.legal a { color: var(--u-text); text-decoration: underline; text-underline-offset: 3px; }
.legal .maj { font-size: .88rem; color: var(--ink-soft); margin-bottom: 34px; }
.legal .todo { background: rgba(var(--orange-rgb), .1); border-left: 3px solid var(--orange); padding: 14px 16px; border-radius: 0 12px 12px 0; font-size: .92rem; color: var(--ink); margin-top: 16px; }

/* ---------- Page 404 ---------- */
.err-page { text-align: center; padding: 110px 0 90px; }
.err-code { font-size: clamp(70px, 14vw, 150px); font-weight: 700; line-height: 1; color: var(--bleu); letter-spacing: -.03em; }
.err-dots { display: flex; justify-content: center; gap: 10px; margin: 26px 0 34px; }
.err-dots span { width: 14px; height: 14px; border-radius: 50%; }

/* ---------- Calendrier de réservation ---------- */
.cal { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; background: #fff; }
.cal-duree { display: flex; gap: 8px; margin-bottom: 12px; }
.cal-duree label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 10px; font-size: .92rem; font-weight: 600; color: var(--ink); cursor: pointer; margin: 0; }
.cal-duree label:has(input:checked) { border-color: var(--u); background: rgba(var(--u-rgb), .1); color: var(--u-text); }
.cal-duree input { width: auto; margin: 0; accent-color: var(--u); }
.cal-jours { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.cal-jour { flex: none; width: 58px; padding: 8px 4px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; text-align: center; cursor: pointer; font: inherit; line-height: 1.2; color: var(--ink); }
.cal-jour small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.cal-jour b { display: block; font-size: 1.15rem; font-weight: 600; }
.cal-jour em { display: block; font-style: normal; font-size: .68rem; color: var(--ink-soft); }
.cal-jour.on { border-color: var(--u); background: var(--u); color: #fff; }
.cal-jour.on small, .cal-jour.on em { color: rgba(255,255,255,.85); }
.cal-jour.complet { opacity: .45; cursor: not-allowed; }
.cal-creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 12px; }
.cal-creneau { padding: 9px 4px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: .9rem; font-weight: 500; color: var(--ink); cursor: pointer; text-align: center; }
.cal-creneau:hover:not(:disabled) { border-color: var(--u); }
.cal-creneau.on { background: var(--u); border-color: var(--u); color: #fff; }
.cal-creneau:disabled { background: var(--bg-soft); color: #aab3bf; text-decoration: line-through; cursor: not-allowed; border-color: transparent; }
.cal-choix { margin-top: 10px; min-height: 1.4em; }
.cal-choix b { color: var(--u-text); }
.cal-vide { grid-column: 1 / -1; font-size: .9rem; color: var(--ink-soft); padding: 6px 2px; }

/* ---------- Événements ---------- */
.event-card { display: flex; gap: 18px; align-items: flex-start; }
.event-date { flex: none; width: 64px; border-radius: 14px; background: rgba(var(--u-rgb), .12); text-align: center; padding: 10px 0; }
.event-date b { display: block; font-size: 1.5rem; line-height: 1; color: var(--u-text); }
.event-date span { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.event-meta { font-size: .84rem; color: var(--u-text); font-weight: 600; margin-bottom: 6px; }

/* ---------- Témoignages ---------- */
.testimonial { background: #fff; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; }
.testimonial blockquote { color: var(--ink); font-size: 1rem; flex: 1; }
.testimonial .who { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.testimonial .avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--c, var(--bleu)); flex: none; }
.testimonial .who b { display: block; font-size: .95rem; }
.testimonial .who span { font-size: .84rem; color: var(--ink-soft); }
.testimonial .stars { color: var(--orange); margin-bottom: 12px; letter-spacing: 2px; }

/* ---------- Étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { background: #fff; border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); border: 1px solid var(--line); position: relative; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-size: 2rem; font-weight: 800; color: var(--u); opacity: .7; line-height: 1; display: block; margin-bottom: 14px; }
.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-item { background: #fff; border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--line); margin-bottom: 12px; overflow: hidden; }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border: 0; background: transparent; text-align: left; font-weight: 700; font-size: 1rem; color: var(--bleu); cursor: pointer; }
.faq-q .chev { transition: transform .25s; color: var(--u); }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 22px 20px; color: var(--ink-soft); font-size: .97rem; }

/* ---------- Bandeau CTA ---------- */
.cta-band {
  background: var(--bleu); color: #fff; border-radius: 18px; padding: 56px 48px; display: flex; gap: 32px; align-items: center; justify-content: space-between;
  position: relative; overflow: hidden;
}
.cta-band::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -160px; top: -240px; background: radial-gradient(circle at 60% 40%, rgba(var(--u-rgb), .75), rgba(var(--u-rgb), 0) 70%); }
.cta-band .btn-light { background: var(--u); border-color: var(--u); color: var(--u-ink); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.8); margin-top: 8px; max-width: 560px; }
.cta-band .actions { flex: none; }
.cta-band .btn-light { border-color: #fff; }

/* ---------- Palette (rappel discret) ---------- */
.palette { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.palette div { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-soft); }
.palette span { width: 18px; height: 18px; border-radius: 6px; }

/* ---------- Espace membre (démo) ---------- */
.demo-banner { background: var(--orange); color: #fff; text-align: center; font-size: .88rem; font-weight: 500; padding: 8px 16px; }
.dash-layout { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.dash-nav { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; position: sticky; top: 100px; }
.dash-nav a { display: block; padding: 11px 14px; border-radius: 10px; font-weight: 500; font-size: .95rem; }
.dash-nav a:hover, .dash-nav a.active { background: rgba(var(--u-rgb), .12); color: var(--u-text); }
.kpi { text-align: center; }
.kpi .note { margin-bottom: 4px; }
.kpi h3 { color: var(--u-text); }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(160deg, #1f2c3a, var(--bleu) 60%, #1a2530); color: rgba(255,255,255,.82); padding: 64px 0 28px; margin-top: 40px; position: relative; overflow: hidden; }
.site-footer > .container { position: relative; }
.site-footer::before { content: ""; position: absolute; top: 40px; right: 40px; width: 120px; height: 120px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 10v12M10 16h12' stroke='%23fff' stroke-opacity='.45' stroke-width='1.4'/%3E%3C/svg%3E") 0 0/32px 32px; }
.site-footer::after { content: ""; position: absolute; top: 14px; left: 24px; width: 130px; height: 40px; background: radial-gradient(circle, var(--orange) 2px, transparent 2.6px) 0 0/24px 24px, radial-gradient(circle, var(--orange) 2px, transparent 2.6px) 12px 12px/24px 24px; opacity: .8; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer .wm, .site-footer .wm-sub { color: #fff; }
.site-footer .wm { font-size: 30px; align-items: flex-start; }
.site-footer .wm-sub { text-indent: 0; }
.footer-desc { margin-top: 16px; font-size: .95rem; max-width: 320px; }
.site-footer h4 { color: #fff; margin-bottom: 14px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.site-footer li { margin-bottom: 9px; font-size: .95rem; display: flex; align-items: center; gap: 9px; }
.site-footer li a:hover { color: #fff; }
.footer-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .86rem; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Apparition au scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .archi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .archi-root::after, .archi-card::before, .archi-h { display: none; }
  .archi-root { padding-bottom: 10px; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .pub-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* La navigation passe en menu déroulant avant le reste de la mise en page :
   sept entrées et deux boutons ne tiennent plus sur une seule ligne. */
@media (max-width: 1180px) {
  /* Le menu replié est translaté hors écran : sans ceci, la page se
     laisse faire défiler latéralement sur mobile. */
  html, body { overflow-x: hidden; }
  .burger { display: flex; }
  /* Menu plein écran, bleu nuit, liens en grand qui arrivent en cascade */
  .main-nav {
    position: fixed; inset: 78px 0 0 0; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 0;
    padding: 28px 24px 28px; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.2,1); overflow-y: auto;
    background: radial-gradient(60% 50% at 100% 0%, rgba(var(--u-rgb), .55), transparent 70%), linear-gradient(160deg, #1f2b38, var(--bleu) 55%, #1a2530);
    color: #fff;
  }
  .main-nav::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/44px 44px; }
  .main-nav.open { transform: none; }
  .site-header.compact .main-nav { inset-block-start: 62px; }
  body.menu-ouvert { overflow: hidden; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; position: relative; }
  .main-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.12); opacity: 0; transform: translateX(30px); transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); }
  .main-nav.open > ul > li { opacity: 1; transform: none; }
  .main-nav.open > ul > li:nth-child(1) { transition-delay: .08s; } .main-nav.open > ul > li:nth-child(2) { transition-delay: .14s; }
  .main-nav.open > ul > li:nth-child(3) { transition-delay: .2s; }  .main-nav.open > ul > li:nth-child(4) { transition-delay: .26s; }
  .main-nav.open > ul > li:nth-child(5) { transition-delay: .32s; } .main-nav.open > ul > li:nth-child(6) { transition-delay: .38s; }
  .nav-link { padding: 16px 6px; font-size: 1.45rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; color: #fff; border-radius: 0; gap: 14px; }
  .nav-link:hover, .nav-link.active { background: transparent; color: #fff; }
  .nav-link.active .nav-dot { box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
  .nav-dot { width: 12px; height: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.28); }
  .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 12px 32px; min-width: 0; }
  .sub-menu a { color: rgba(255,255,255,.78); padding: 8px 0; font-size: 1rem; white-space: normal; }
  .sub-menu a:hover { background: transparent; color: #fff; }
  .soon-tag { background: rgba(255,255,255,.14); color: #fff; }
  .nav-cta { flex-direction: column; margin-top: 24px; position: relative; opacity: 0; transform: translateY(16px); transition: opacity .45s .4s, transform .45s .4s; }
  .main-nav.open .nav-cta { opacity: 1; transform: none; }
  .nav-cta .btn { width: 100%; padding: 15px 20px; font-size: 1rem; }
  .nav-cta .btn:not(.btn-outline) { background: var(--u); border-color: var(--u); color: var(--u-ink); }
  .nav-cta .btn-outline { border-color: rgba(255,255,255,.7); color: #fff; }
}

@media (max-width: 900px) {
  .archi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-3, .pricing-grid, .univers-block, .why-grid, .archi-note, .pass-grid, .pub-grid { grid-template-columns: 1fr; }
  .univers-block { gap: 32px; padding: 48px 0; }
  .univers-block:nth-child(even) .ub-visual { order: 0; }
  .price-featured { transform: none; }
  .cta-band { flex-direction: column; align-items: flex-start; padding: 40px 28px; }
  .dash-layout { grid-template-columns: 1fr; }
  .dash-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  section { padding: 64px 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .archi-grid, .grid-4, .stats, .steps, .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .hero { padding: 56px 0 48px; }
  .btn { width: 100%; }
  .ub-visual { aspect-ratio: 4 / 3; }
}

/* ============================================================
   ORIION ACADEMY — charte graphique propre (identité visuelle 2026)
   Palette : bleu nuit #253241 · turquoise #10A094 · jaune solaire #DFB544
   + tons neutres (sable #E8E2DB). Typos : Archivo (titres massifs,
   textes) + Kaushan Script (mots manuscrits). Motifs : croix, points,
   hachures, étiquettes jaunes inclinées, globe pointillé.
   Tout est limité à body[data-univers="academy"].
   ============================================================ */
body[data-univers="academy"] {
  --nuit: #253241; --turq: #10A094; --jaune: #DFB544; --sable: #E8E2DB; --sable-2: #F4F0EA;
  --turq-rgb: 16, 160, 148; --jaune-rgb: 223, 181, 68;
  --bleu: var(--nuit); --dore: var(--jaune); --dore-rgb: var(--jaune-rgb);
  --u: var(--turq); --u-rgb: var(--turq-rgb); --u-text: #0d8378; --u-ink: #fff; --pt: var(--jaune);
  --ink: var(--nuit); --ink-soft: #4d5a68; --bg-soft: var(--sable-2); --line: #dfd9d0;
  --font: "Archivo", "Jost", "Segoe UI", system-ui, sans-serif;
  --radius: 14px;
}
body[data-univers="academy"] h1, body[data-univers="academy"] h2 {
  font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; font-stretch: 92%;
}
body[data-univers="academy"] h3 { font-weight: 700; letter-spacing: -.01em; }
body[data-univers="academy"] .lead { color: var(--ink-soft); }
/* L'exergue devient l'étiquette jaune inclinée de la charte */
body[data-univers="academy"] .eyebrow {
  background: var(--jaune); color: var(--nuit); padding: 7px 16px 6px; letter-spacing: .08em; font-weight: 800; font-size: .78rem;
  clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); margin-bottom: 18px;
}
body[data-univers="academy"] .btn { border-radius: 10px; font-weight: 700; }
body[data-univers="academy"] .btn-u { color: #fff; }
body[data-univers="academy"] .btn-jaune { background: var(--jaune); border-color: var(--jaune); color: var(--nuit); }
body[data-univers="academy"] .btn-jaune:hover { box-shadow: 0 12px 24px rgba(var(--jaune-rgb), .4); }
body[data-univers="academy"] .tint { background: linear-gradient(110deg, var(--sable) 0%, #ede8e2 55%, #cfe6e0 100%); }
body[data-univers="academy"] .soft { background: var(--sable-2); }
body[data-univers="academy"] .card, body[data-univers="academy"] .step, body[data-univers="academy"] .price-card { border-radius: 14px; }
body[data-univers="academy"] .icon { border-radius: 10px; background: rgba(var(--turq-rgb), .14); color: var(--turq); }
body[data-univers="academy"] .card-tag { border-radius: 4px; background: rgba(var(--jaune-rgb), .28); color: var(--nuit); }
body[data-univers="academy"] .card-tag.open { background: var(--turq); color: #fff; }
body[data-univers="academy"] .pole-card::before { background: var(--turq); }
body[data-univers="academy"] .badge { border-radius: 6px; background: var(--jaune); color: var(--nuit); font-weight: 700; }
body[data-univers="academy"] .badge::before { background: var(--nuit); }
body[data-univers="academy"] input, body[data-univers="academy"] select, body[data-univers="academy"] textarea { border-radius: 8px; }
body[data-univers="academy"] .step::before { color: var(--turq); font-weight: 800; opacity: .6; }
body[data-univers="academy"] .cta-band { background: var(--nuit); border-radius: 18px; }
body[data-univers="academy"] .cta-band::before { background: radial-gradient(circle at 70% 30%, rgba(var(--turq-rgb), .75), rgba(var(--turq-rgb), 0) 70%); }
body[data-univers="academy"] .cta-band .btn-light { background: var(--jaune); border-color: var(--jaune); color: var(--nuit); }
body[data-univers="academy"] .notice-band b { color: var(--jaune); }

/* Le mot manuscrit (Kaushan Script ≈ Mekar Script) */
.script, .ac-script { font-family: "Kaushan Script", "Brush Script MT", cursive; font-weight: 400; text-transform: none; letter-spacing: 0; font-stretch: normal; color: var(--turq); display: inline-block; transform: rotate(-3deg); line-height: 1; padding: .05em .1em 0; }
.script.jaune, .ac-script.jaune { color: var(--jaune); }
/* Les hachures ///// sous un titre */
.ac-hachures { display: block; width: 150px; height: 9px; margin-top: 12px; background: repeating-linear-gradient(-60deg, var(--jaune) 0 2px, transparent 2px 6px); }
.center .ac-hachures { margin-left: auto; margin-right: auto; }
/* Les motifs de la charte : croix, points, quadrillage */
.ac-croix, .ac-points { position: absolute; pointer-events: none; }
.ac-croix { width: 120px; height: 120px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 10v12M10 16h12' stroke='%23fff' stroke-opacity='.75' stroke-width='1.4'/%3E%3C/svg%3E") 0 0/32px 32px; }
.ac-croix.sombre { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 10v12M10 16h12' stroke='%23253241' stroke-opacity='.55' stroke-width='1.4'/%3E%3C/svg%3E"); }
.ac-points { width: 130px; height: 60px; background: radial-gradient(circle, var(--pt) 2px, transparent 2.6px) 0 0/24px 24px, radial-gradient(circle, var(--pt) 2px, transparent 2.6px) 12px 12px/24px 24px; }
.ac-points.turq { background-image: radial-gradient(circle, var(--turq) 2px, transparent 2.6px), radial-gradient(circle, var(--turq) 2px, transparent 2.6px); }

/* Fond bleu nuit de la charte : dégradé turquoise, quadrillage, motifs */
.sombre {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(60% 70% at 100% 0%, rgba(var(--u-rgb), .8), rgba(var(--u-rgb), 0) 70%), linear-gradient(160deg, #1f2b38 0%, var(--nuit) 50%, #1a2530 100%);
}
.sombre::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/48px 48px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/48px 48px;
  -webkit-mask-image: radial-gradient(70% 90% at 10% 100%, #000 20%, transparent 100%); mask-image: radial-gradient(70% 90% at 10% 100%, #000 20%, transparent 100%);
}
.sombre h1, .sombre h2, .sombre h3 { color: var(--sable); }
body .sombre .lead, body .sombre p, body .sombre .note { color: rgba(255,255,255,.82); }
.sombre .breadcrumb, .sombre .breadcrumb a { color: rgba(255,255,255,.65); }
.sombre .breadcrumb a:hover { color: var(--u); }
.sombre .wm, .sombre .wm-sub { color: #fff; }
.sombre .card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: none; backdrop-filter: blur(4px); }
.sombre .card h3 { color: #fff; }
body .sombre .card p { color: rgba(255,255,255,.78); }
.sombre .btn-outline { color: #fff; border-color: rgba(255,255,255,.7); }
.sombre .btn-outline:hover { background: #fff; color: var(--nuit); }
.sombre .check-list li::before { color: var(--u); }
.sombre .values { color: #fff; }
.sombre .values i { color: var(--u); }
.sombre .badge { background: var(--u); color: var(--u-ink); }
.sombre .wm-line { background: var(--u); }
.sombre .u-text { color: var(--u); }
.sombre .ac-croix { top: 30px; right: 40px; }
.sombre .ac-points { bottom: 36px; right: 40px; }
/* Le globe pointillé */
.ac-globe { position: absolute; z-index: -1; width: 620px; height: 620px; right: -160px; top: -120px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.5) 1.3px, transparent 1.9px) 0 0/11px 11px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 48%, transparent 50%); mask-image: radial-gradient(circle at 50% 50%, #000 0 48%, transparent 50%);
  opacity: .45;
}
.ac-globe::before, .ac-globe::after { content: ""; position: absolute; inset: 12% 2%; border: 1.5px solid rgba(255,255,255,.35); border-radius: 50%; transform: rotate(-22deg); }
.ac-globe::after { inset: 2% 22%; transform: rotate(18deg); }
/* Arc jaune (quart de cercle) */
.ac-arc { position: absolute; width: 360px; height: 360px; border: 44px solid var(--jaune); border-radius: 50%; right: -150px; bottom: -190px; pointer-events: none; z-index: -1; opacity: .95; }

/* Hero Academy */
.ac-hero { padding: 76px 0 70px; }
.ac-hero .container { position: relative; z-index: 1; }
.ac-hero h1 { font-size: clamp(2rem, 4.9vw, 3.6rem); max-width: 16ch; }
.ac-hero h1 .script, .ac-hero h1 .ac-script { font-size: 1.15em; }
.ac-hero .lead { max-width: 640px; }
.ac-hero .actions { margin-top: 30px; }

/* Signature « Ton espace. Tes rencontres. Tes projets. » */
.ac-signature { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-weight: 800; text-transform: uppercase; font-size: clamp(1.05rem, 2.3vw, 1.5rem); letter-spacing: -.01em; color: var(--nuit); }
.ac-signature b { color: var(--jaune); }
.sombre .ac-signature { color: #fff; }
.ac-signature svg { width: 40px; height: 40px; fill: none; stroke: var(--jaune); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Horaires (affiche « Nos horaires ») */
.ac-horaires { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; border-radius: 16px; overflow: hidden; background: var(--nuit); color: #fff; box-shadow: var(--shadow-lg); position: relative; }
.ac-horaires > div { padding: 32px 34px; }
.ac-horaires > div + div { border-left: 1px solid rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(var(--turq-rgb), .55), rgba(var(--turq-rgb), .15)); }
.ac-horaires .eyebrow { font-size: .95rem; padding: 9px 18px; }
.ac-jour { display: inline-block; background: var(--jaune); color: var(--nuit); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 8px 20px; border-radius: 999px; margin-top: 18px; font-size: .95rem; }
.ac-heure { display: flex; align-items: center; gap: 10px; margin: 10px 0 0 10px; font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; }
.ac-heure svg { width: 24px; height: 24px; fill: none; stroke: var(--jaune); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ac-horaires h3 { color: #fff; font-size: 1.35rem; text-transform: uppercase; }
.ac-horaires .check-list { margin-top: 20px; }
.ac-horaires .check-list li { text-transform: uppercase; font-weight: 600; font-size: .92rem; letter-spacing: .03em; margin-bottom: 12px; }
.ac-horaires .check-list li::before { color: var(--jaune); font-size: 1.1rem; top: -2px; }
.ac-horaires .ac-vacances { grid-column: 1 / -1; background: var(--jaune); color: var(--nuit); display: flex; gap: 16px; align-items: center; padding: 18px 34px; font-weight: 500; border-left: 0; }
.ac-horaires .ac-vacances svg { width: 34px; height: 34px; fill: none; stroke: var(--nuit); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Grille tarifaire (support « Grille tarifaire 2026-2027 ») */
.ac-grille { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.ac-bande { padding: 12px 28px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; color: #fff; background: var(--turq); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ac-bande small { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .86rem; opacity: .95; }
.ac-bande.jaune { background: var(--jaune); color: var(--nuit); }
.ac-rang { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 24px; align-items: center; padding: 26px 28px; }
.ac-rang.sombre { background: linear-gradient(120deg, var(--nuit), #2e4658 70%, #1f6f68); color: #fff; }
.ac-rang.sombre p, .ac-rang.sombre li { color: rgba(255,255,255,.88); }
.ac-rang + .ac-rang { border-top: 1px solid var(--line); }
.ac-prix-nom { font-weight: 800; text-transform: uppercase; font-size: 1.35rem; letter-spacing: -.01em; line-height: 1.1; }
.ac-prix { display: block; font-weight: 800; font-size: 1.7rem; margin-top: 6px; line-height: 1; }
.ac-prix small { font-weight: 500; font-size: .95rem; text-transform: none; letter-spacing: 0; opacity: .85; }
.ac-offert { display: inline-block; background: var(--jaune); color: var(--nuit); font-weight: 800; text-transform: uppercase; font-size: .74rem; letter-spacing: .06em; padding: 4px 10px; border-radius: 4px; margin-top: 10px; }
.ac-coches { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; font-size: .96rem; }
.ac-coches li { position: relative; padding-left: 24px; }
.ac-coches li::before { content: "✓"; position: absolute; left: 0; color: var(--turq); font-weight: 800; }
.ac-rang.sombre .ac-coches li::before { color: #4fd3c4; }
.ac-rang .btn { white-space: nowrap; }
.ac-rang.clair { align-items: center; }
.ac-rang.clair .ac-desc { border-left: 2px solid var(--jaune); padding-left: 20px; font-size: 1.05rem; }
.ac-rang.clair .ac-desc b { display: block; }
.ac-plus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: linear-gradient(120deg, var(--nuit), #2b4254); color: #fff; }
.ac-plus > div { padding: 26px 28px; }
.ac-plus > div + div { border-left: 1px solid rgba(255,255,255,.16); }
.ac-plus h4 { color: #fff; text-transform: uppercase; font-weight: 800; font-size: .95rem; letter-spacing: .02em; line-height: 1.25; }
.ac-plus .ac-tarif { display: block; margin: 12px 0 8px; font-size: 1.02rem; }
.ac-plus .ac-tarif b { font-weight: 800; }
.ac-plus p { color: rgba(255,255,255,.78); font-size: .92rem; }
.ac-biseaux { display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px; gap: 0; }
.ac-biseaux > div { padding: 30px 34px; color: #fff; }
.ac-biseaux > div h3 { color: #fff; text-transform: uppercase; font-size: 1.15rem; }
.ac-biseaux > div p { margin-top: 10px; color: rgba(255,255,255,.92); font-size: .96rem; }
.ac-biseaux .jaune { background: var(--jaune); color: var(--nuit); border-radius: 14px 0 0 14px; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); padding-right: 60px; }
.ac-biseaux .jaune h3, .ac-biseaux .jaune p { color: var(--nuit); }
.ac-biseaux .turq { background: var(--turq); border-radius: 0 14px 14px 0; clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); padding-left: 60px; margin-left: -40px; text-align: right; }

/* Carte membre — nouvelle identité (recto photo / verso sombre) */
body[data-univers="academy"] .cm { background: var(--nuit); border: 0; color: #fff; border-radius: 16px; padding: 26px 28px 0; min-height: 480px; gap: 12px; }
body[data-univers="academy"] .cm-recto { background: radial-gradient(70% 60% at 100% 0%, rgba(var(--turq-rgb), .8), transparent 70%), linear-gradient(160deg, #2f4254, var(--nuit) 60%, #1b2a36); }
body[data-univers="academy"] .cm-tete .wm { align-items: flex-start; }
body[data-univers="academy"] .cm .wm { color: #fff; }
body[data-univers="academy"] .cm-accroche { font-weight: 500; text-transform: none; font-size: .95rem; max-width: 26ch; color: rgba(255,255,255,.9); line-height: 1.4; }
body[data-univers="academy"] .cm-accroche b { color: var(--jaune); text-transform: uppercase; font-weight: 800; }
.cm-titre { font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--jaune); letter-spacing: -.02em; line-height: 1; margin-top: 8px; }
.cm-corps { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: stretch; }
.cm-photo { border: 2px solid var(--turq); border-radius: 18px; background: rgba(var(--turq-rgb), .12); min-height: 150px; }
body[data-univers="academy"] .cm-champs { gap: 14px; font-size: .84rem; font-weight: 700; text-transform: none; letter-spacing: 0; margin-top: 0; }
body[data-univers="academy"] .cm-champs span::after { border-bottom-color: rgba(255,255,255,.55); width: 50%; }
body[data-univers="academy"] .cm-numero { border: 0; background: var(--turq); color: #fff; border-radius: 10px; padding: 10px 14px; text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 700; }
body[data-univers="academy"] .cm-numero::after { border-bottom-color: rgba(255,255,255,.7); }
body[data-univers="academy"] .cm-pied { margin: auto -28px 0; background: var(--sable); color: var(--nuit); padding: 16px 28px; font-weight: 800; letter-spacing: -.01em; font-size: 1rem; text-align: center; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); padding-top: 22px; }
body[data-univers="academy"] .cm-pied b { color: var(--jaune); }
body[data-univers="academy"] .cm-verso { background: radial-gradient(60% 50% at 100% 100%, rgba(var(--turq-rgb), .55), transparent 70%), linear-gradient(180deg, #1f2b38, var(--nuit)); }
body[data-univers="academy"] .cm-pass { border-bottom: 0; gap: 32px; font-size: 1.05rem; font-weight: 800; padding: 6px 0 4px; }
body[data-univers="academy"] .cm-pass span { display: inline-flex; align-items: center; gap: 10px; }
body[data-univers="academy"] .cm-pass span::before { content: ""; width: 22px; height: 22px; border-radius: 6px; background: var(--turq); }
body[data-univers="academy"] .cm-acces { border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 16px; font-size: .86rem; }
body[data-univers="academy"] .cm-acces > div + div { border-left-color: rgba(255,255,255,.25); }
body[data-univers="academy"] .cm-acces b { background: var(--turq); color: #fff; border-radius: 999px; padding: 4px 14px; font-weight: 800; font-size: .82rem; }
body[data-univers="academy"] .cm-acces span { font-weight: 600; }
body[data-univers="academy"] .cm-acces em { color: var(--jaune); font-size: .74rem; }
body[data-univers="academy"] .cm-sous { background: var(--turq); color: #fff; border-radius: 999px; padding: 6px 18px; font-weight: 800; font-size: .95rem; letter-spacing: 0; }
body[data-univers="academy"] .cm-sous small { color: #fff; }
body[data-univers="academy"] .cm-mois { grid-template-columns: repeat(9, 1fr); font-size: .74rem; font-weight: 800; }
body[data-univers="academy"] .cm-mois span::after { width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--turq); }
body[data-univers="academy"] .cm-signature { margin: 10px -28px 0; padding: 18px 28px 0; background: var(--sable); color: var(--nuit); clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
body[data-univers="academy"] .cm-signature span:first-child::after { content: ""; display: block; border-bottom: 1px dotted var(--nuit); margin-top: 22px; }
body[data-univers="academy"] .cm-signature span:last-child { border: 1.5px solid var(--turq); border-radius: 10px; min-height: 56px; }
body[data-univers="academy"] .cm-verso .cm-pied { margin-top: 0; clip-path: none; padding-top: 6px; }

/* Responsive */
@media (max-width: 900px) {
  .ac-horaires, .ac-biseaux, .ac-plus, .ac-rang { grid-template-columns: 1fr; }
  .ac-horaires > div + div { border-left: 0; }
  .ac-plus > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .ac-biseaux .jaune, .ac-biseaux .turq { clip-path: none; padding: 26px; margin: 0; text-align: left; border-radius: 14px; }
  .ac-biseaux { gap: 14px; }
  .ac-rang .btn { width: 100%; }
  .ac-globe { width: 420px; height: 420px; right: -180px; top: -100px; }
  .ac-arc { display: none; }
  .cm-corps { grid-template-columns: 1fr; }
  .cm-photo { display: none; }
}
@media (max-width: 560px) {
  body[data-univers="academy"] .cm { padding: 22px 20px 0; }
  body[data-univers="academy"] .cm-pass { flex-wrap: wrap; gap: 10px 22px; font-size: .95rem; }
  body[data-univers="academy"] .cm-acces { grid-template-columns: 1fr; }
  body[data-univers="academy"] .cm-acces > div + div { border-left: 0; padding-left: 0; }
  body[data-univers="academy"] .cm-sous { width: auto; max-width: 100%; white-space: normal; font-size: .82rem; padding: 6px 14px; line-height: 1.3; }
  body[data-univers="academy"] .cm-mois { font-size: .64rem; gap: 2px; }
  body[data-univers="academy"] .cm-mois span::after { width: 20px; height: 20px; }
  body[data-univers="academy"] .cm-pied, body[data-univers="academy"] .cm-signature { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .ac-hero h1 { font-size: 1.9rem; }
  .ac-horaires > div, .ac-rang, .ac-plus > div { padding: 22px 20px; }
  .ac-coches { grid-template-columns: 1fr; }
}


/* ============================================================
   ANIMATIONS — entrées en cascade, motifs vivants, survols
   (toutes coupées si l'utilisateur préfère moins de mouvement)
   ============================================================ */
@keyframes monte { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes derive { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8px, -10px); } }
@keyframes derive-inverse { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8px, 8px); } }
@keyframes orbite-a { from { transform: rotate(-22deg); } to { transform: rotate(338deg); } }
@keyframes orbite-b { from { transform: rotate(18deg); } to { transform: rotate(-342deg); } }
@keyframes defile { to { transform: translateX(-50%); } }
@keyframes pop { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: none; } }

/* Entrée du hero : chaque ligne arrive l'une après l'autre */
.hero .eyebrow, .hero .wm, .hero h1 > span, .hero .lead, .hero .actions,
.page-hero .breadcrumb, .page-hero .wm, .page-hero .values, .page-hero .eyebrow, .page-hero .badge,
.page-hero h1, .page-hero .lead, .page-hero .actions, .page-hero .pub-meta { animation: monte .9s cubic-bezier(.2,.7,.2,1) both; }
.hero .eyebrow, .page-hero .breadcrumb { animation-delay: .05s; }
.hero .wm, .page-hero .wm { animation-delay: .15s; }
.hero h1 > span:nth-child(1), .page-hero .values, .page-hero .eyebrow, .page-hero .badge, .page-hero .pub-meta { animation-delay: .28s; }
.hero h1 > span:nth-child(2), .page-hero h1 { animation-delay: .4s; }
.hero h1 > span:nth-child(3) { animation-delay: .52s; }
.hero .lead, .page-hero .lead { animation-delay: .62s; }
.hero .actions, .page-hero .actions { animation-delay: .76s; }

/* Les motifs vivent doucement */
.sombre .ac-points, .ub-visual .ac-points { animation: derive 9s ease-in-out infinite; }
.sombre .ac-croix, .ub-visual .ac-croix { animation: derive-inverse 12s ease-in-out infinite; }
/* Les points du globe défilent en diagonale (pas de 11px : la boucle est invisible) */
@keyframes points-coulent { from { background-position: 0 0; } to { background-position: -44px 22px; } }
.ac-globe { will-change: transform, background-position; transition: transform .6s cubic-bezier(.2,.7,.2,1); animation: points-coulent 6s linear infinite; }
.ac-globe::before { animation: orbite-a 70s linear infinite; }
.ac-globe::after { animation: orbite-b 95s linear infinite; }
.ub-visual .archi-icon { animation: flotte 5s ease-in-out infinite; }

/* Cascade des cartes dans les grilles */
.grid-2 > .reveal:nth-child(2), .grid-3 > .reveal:nth-child(2), .grid-4 > .reveal:nth-child(2), .steps > .reveal:nth-child(2),
.stats > .reveal:nth-child(2), .archi-grid > .reveal:nth-child(2), .pass-grid > .reveal:nth-child(2), .why-grid > .reveal:nth-child(2), .pub-grid > .reveal:nth-child(2) { transition-delay: .12s; }
.grid-2 > .reveal:nth-child(3), .grid-3 > .reveal:nth-child(3), .grid-4 > .reveal:nth-child(3), .steps > .reveal:nth-child(3),
.stats > .reveal:nth-child(3), .archi-grid > .reveal:nth-child(3), .pass-grid > .reveal:nth-child(3), .why-grid > .reveal:nth-child(3), .pub-grid > .reveal:nth-child(3) { transition-delay: .24s; }
.grid-2 > .reveal:nth-child(4), .grid-3 > .reveal:nth-child(4), .grid-4 > .reveal:nth-child(4), .steps > .reveal:nth-child(4),
.stats > .reveal:nth-child(4), .archi-grid > .reveal:nth-child(4), .pass-grid > .reveal:nth-child(4), .why-grid > .reveal:nth-child(4), .pub-grid > .reveal:nth-child(4) { transition-delay: .36s; }
.grid-3 > .reveal:nth-child(n+5), .grid-4 > .reveal:nth-child(n+5), .pub-grid > .reveal:nth-child(n+5) { transition-delay: .48s; }

/* Les hachures se déploient quand elles arrivent à l'écran */
.hachures, .ac-hachures { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.7,.2,1) .25s; }
.center .hachures, .center .ac-hachures, .archi .hachures { transform-origin: center; }
.hachures.visible, .ac-hachures.visible, .visible .hachures, .visible .ac-hachures { transform: none; }

/* Survols */
.icon, .archi-icon, .nav-dot, .card-link, .go { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.card:hover .icon { transform: translateY(-4px) rotate(-6deg); }
.archi-card:hover .archi-icon { transform: scale(1.12); }
.archi-card:hover .go, .card:hover .card-link { transform: translateX(6px); }
.nav-link:hover .nav-dot { transform: scale(1.6); }
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }
.stat:hover, .why:hover, .testimonial:hover, .pass-card:hover, .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stat, .why, .testimonial, .step { transition: transform .3s, box-shadow .3s; }
.cal-creneau.on, .cal-jour.on { animation: pop .35s cubic-bezier(.2,.7,.2,1); }

/* Bandeau qui défile (accueil) */
.defile { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; background: #fff; }
.defile-piste { display: flex; width: max-content; animation: defile 34s linear infinite; }
.defile:hover .defile-piste { animation-play-state: paused; }
.defile > .defile-piste > span { display: inline-flex; align-items: center; gap: 44px; padding-right: 44px; white-space: nowrap; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .92rem; color: var(--bleu); }
.defile > .defile-piste i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--orange)); flex: none; }

/* L'en-tête se compacte au défilement */
.nav-wrap, .site-header .wm-img--plein { transition: height .3s ease; }
.site-header.compact .nav-wrap { height: 62px; }
.site-header.compact .wm-img--plein { height: 36px; }
.site-header.compact { box-shadow: 0 6px 24px rgba(34,49,64,.08); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hachures, .ac-hachures { transform: none; }
}


/* ---------- Finitions : accessibilité, anti-spam, filtres, WhatsApp, galerie ---------- */
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--bleu); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 700; transition: top .2s; }
.skip:focus { top: 0; outline: 3px solid var(--orange); }
:focus-visible { outline: 3px solid var(--u); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; }
.piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 34px; }
.filtre { border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: .86rem; padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.filtre:hover { border-color: var(--u); transform: translateY(-2px); }
.filtre.on { background: var(--u); border-color: var(--u); color: var(--u-ink); }
.pub-card[hidden] { display: none; }
.wa { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(37,211,102,.4); transition: transform .25s, box-shadow .25s; }
.wa:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 14px 32px rgba(37,211,102,.5); }
.wa svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.galerie { columns: 3; column-gap: 18px; }
.galerie figure { break-inside: avoid; margin: 0 0 18px; border-radius: 14px; overflow: hidden; position: relative; cursor: zoom-in; background: var(--bleu); }
.galerie img { width: 100%; height: auto; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.galerie figure:hover img { transform: scale(1.04); opacity: .92; }
.galerie figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; color: #fff; font-weight: 700; font-size: .9rem; background: linear-gradient(transparent, rgba(34,49,64,.8)); }
.visionneuse { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1100px); }
.visionneuse::backdrop { background: rgba(34,49,64,.88); backdrop-filter: blur(4px); }
.visionneuse img { max-width: 100%; max-height: 82vh; border-radius: 14px; display: block; margin: 0 auto; }
.visionneuse p { color: #fff; text-align: center; margin-top: 12px; font-weight: 600; }
.visionneuse-fermer { position: absolute; top: -8px; right: -8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--bleu); font-size: 1.5rem; cursor: pointer; }
@media (max-width: 900px) { .galerie { columns: 2; } }
@media (max-width: 560px) { .galerie { columns: 1; } .wa { right: 14px; bottom: 14px; width: 50px; height: 50px; } }
@media print { .wa, .skip, .site-header .nav-cta, .burger { display: none !important; } }


/* ============================================================
   SECTIONS ANIMÉES — mots qui s'écrivent, arbre qui se dessine,
   icônes tracées, relief 3D, halo sous le curseur, défilés
   ============================================================ */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes tourne-angle { to { --angle: 360deg; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes glisse-mot { from { opacity: 0; transform: translateY(.7em) rotate(3deg); } to { opacity: 1; transform: none; } }

/* Titres mot à mot */
.mot { display: inline-block; opacity: 0; transform: translateY(.7em) rotate(3deg); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 60ms + .1s); will-change: transform; }
.visible .mot, .mot.visible { opacity: 1; transform: none; }
h2 .mot .script, h2 .mot .ac-script { display: inline-block; }

/* Les cartes arrivent avec un léger zoom, les blocs univers glissent depuis les côtés */
.card.reveal:not(.visible), .stat.reveal:not(.visible), .step.reveal:not(.visible), .why.reveal:not(.visible) { transform: translateY(40px) scale(.96); }
.ub-text.reveal:not(.visible) { transform: translateX(-48px); }
.ub-visual.reveal:not(.visible) { transform: translateX(48px) scale(.94); }
.univers-block:nth-child(even) .ub-text.reveal:not(.visible) { transform: translateX(48px); }
.univers-block:nth-child(even) .ub-visual.reveal:not(.visible) { transform: translateX(-48px) scale(.94); }

/* L'arbre de marque se dessine : tronc, traverses, points, puis cartes */
.archi-root::after { transform: translateX(-50%) scaleY(0); transform-origin: top; transition: transform .6s cubic-bezier(.2,.7,.2,1) .2s; }
.visible .archi-root::after { transform: translateX(-50%) scaleY(1); }
.archi-card::before { transform: translateX(-50%) scaleY(0); transform-origin: top; transition: transform .5s cubic-bezier(.2,.7,.2,1) .35s; }
.archi-h { transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.7,.2,1) .15s; }
.archi-card::after { transform: translateX(-50%) scale(0); transition: transform .45s cubic-bezier(.34,1.56,.64,1) .7s; }
.archi-card.visible::before { transform: translateX(-50%) scaleY(1); }
.archi-card.visible .archi-h { transform: scaleX(1); }
.archi-card.visible::after { transform: translateX(-50%) scale(1); }
.archi-card .wm-line { transform: scaleX(0); transition: transform .6s cubic-bezier(.2,.7,.2,1) .8s; }
.archi-card.visible .wm-line { transform: scaleX(1); }

/* Les icônes au trait se dessinent */
.reveal .icon svg *, .reveal .archi-icon svg *, .archi-card .archi-icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.visible .icon svg *, .visible .archi-icon svg *, .archi-card.visible .archi-icon svg * { animation: trace 1.4s cubic-bezier(.2,.7,.2,1) .3s forwards; }
.visible .icon svg *:nth-child(2), .visible .archi-icon svg *:nth-child(2) { animation-delay: .5s; }
.visible .icon svg *:nth-child(3), .visible .archi-icon svg *:nth-child(3) { animation-delay: .7s; }
.visible .icon svg *:nth-child(n+4), .visible .archi-icon svg *:nth-child(n+4) { animation-delay: .9s; }

/* Chiffres clés : la barre se remplit */
.stat i { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.7,.2,1) .3s; }
.stat.visible i { transform: scaleX(1); }

/* Relief 3D au survol (la souris incline la carte) */
.relief { transform-style: preserve-3d; }
.relief.actif { transition: transform .12s ease-out !important; }
.relief.actif .archi-icon, .relief.actif .wm { transform: translateZ(30px); }
.relief.actif > * { backface-visibility: hidden; }

/* Halo lumineux qui suit le curseur sur les fonds sombres */
.sombre::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 60%); }
.sombre.eclaire::after { opacity: 1; }

/* Bordure lumineuse qui tourne autour des passerelles */
.pass-card { border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--angle), var(--de), var(--vers), var(--line) 40%, var(--line) 60%, var(--de)) border-box; }
.pass-card:hover { animation: tourne-angle 3s linear infinite; }

/* Témoignages qui défilent en continu */
.defile-cartes { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding: 6px 0; }
.defile-cartes .defile-piste { gap: 24px; animation: defile 46s linear infinite; padding-right: 24px; }
.defile-cartes .testimonial { width: 400px; flex: none; }
.defile-cartes:hover .defile-piste { animation-play-state: paused; }

/* Bandeau de mots : grand, un mot sur deux en contour */
.defile > .defile-piste > span { font-size: clamp(1.1rem, 2.4vw, 1.7rem); letter-spacing: .04em; }
.defile > .defile-piste > span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.2px var(--bleu); }

/* FAQ : la question ouverte s'allume */
.faq-item { transition: border-color .3s, box-shadow .3s, transform .3s; }
.faq-item.open { border-color: var(--u); box-shadow: 0 12px 32px rgba(var(--u-rgb), .16); transform: scale(1.01); }
.faq-item.open .faq-q { color: var(--u-text); }

/* Boutons aimantés : suivent un peu le curseur */
.aimant { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }

@media (max-width: 900px) { .defile-cartes .testimonial { width: 300px; } }
@media (prefers-reduced-motion: reduce) {
  .mot, .card.reveal, .ub-text.reveal, .ub-visual.reveal, .stat i, .archi-h, .archi-card .wm-line { opacity: 1; transform: none; }
  .archi-root::after, .archi-card::before, .archi-card::after { transform: translateX(-50%); }
  .reveal .icon svg *, .reveal .archi-icon svg *, .archi-card .archi-icon svg * { stroke-dasharray: none; stroke-dashoffset: 0; }
  .sombre::after { display: none; }
}


/* ============================================================
   ORIION CONNECT — la Maison : titres en serif élégant, crème,
   violet, mot manuscrit (d'après les supports Connect 2026)
   ============================================================ */
body[data-univers="connect"] { --bg-soft: #f7f1e8; --line: #e6dccd; --creme: #f7f1e8; }
body[data-univers="connect"] h1, body[data-univers="connect"] h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; text-transform: none; letter-spacing: -.015em; line-height: 1.12; font-stretch: normal; }
body[data-univers="connect"] h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
body[data-univers="connect"] .script { color: var(--violet); }
body[data-univers="connect"] .sombre .script { color: #c9a9ff; }
body[data-univers="connect"] .tint { background: linear-gradient(110deg, #f7f1e8 0%, #fbf8f3 55%, rgba(var(--violet-rgb), .10) 100%); }
body[data-univers="connect"] .price-card { border: 1px solid var(--line); background: #fff; }
body[data-univers="connect"] .price-head { background: transparent; color: var(--bleu); font-family: "Archivo", sans-serif; font-size: 1.5rem; letter-spacing: .02em; padding: 8px 18px 0; }
body[data-univers="connect"] .price-head small { display: block; font-size: .95rem; color: var(--violet); letter-spacing: .12em; margin-top: 2px; }
body[data-univers="connect"] .price-featured .price-head { background: transparent; color: var(--bleu); }
body[data-univers="connect"] .price-featured { border-color: var(--violet); background: linear-gradient(180deg, #fff, #f7f1e8); }
body[data-univers="connect"] .price { font-family: "Playfair Display", Georgia, serif; font-weight: 600; color: var(--violet); font-size: 2.8rem; background: var(--creme); border-radius: 10px; padding: 16px 12px 12px; }
body[data-univers="connect"] .price-featured .price { background: var(--violet); color: #e9d8a6; }
body[data-univers="connect"] .price-featured .price small { color: rgba(255,255,255,.85); }
body[data-univers="connect"] .price small { display: block; font-family: "Archivo", sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
body[data-univers="connect"] .ribbon { background: var(--violet); }
.cx-picto { width: 58px; height: 58px; border-radius: 50%; background: var(--violet); color: #fff; display: flex; align-items: center; justify-content: center; margin: -29px auto 0; position: relative; z-index: 1; box-shadow: 0 8px 20px rgba(var(--violet-rgb), .3); }
.cx-picto svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body[data-univers="connect"] .pricing-grid { padding-top: 66px; }
body[data-univers="connect"] .price-card { overflow: visible; }
/* « Offre de lancement » : une pastille posée sur le haut de la carte, comme sur le support */
body[data-univers="connect"] .price-card .ribbon { top: -66px; right: auto; left: 50%; transform: translateX(-50%); border-radius: 999px; padding: 7px 16px; font-size: .72rem; letter-spacing: .08em; white-space: nowrap; }
body[data-univers="connect"] .price-card .ribbon::before { content: "✦ "; color: #e9d8a6; }
.cx-devise { margin-top: 18px; font-family: "Playfair Display", Georgia, serif; font-size: 1.25rem; color: #fff; }
.cx-devise .script { font-size: 1.3em; }
.cx-signature { font-family: "Playfair Display", Georgia, serif; font-size: 1.6rem; line-height: 1.25; color: var(--bleu); }
.cx-signature b { color: var(--violet); font-weight: 600; }
.cx-citation { position: relative; text-align: center; padding: 44px 34px 34px; background: #fff; }
.cx-citation h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: 1.5rem; }
.cx-citation .check-list { display: inline-block; text-align: left; }
.cx-guillemets { font-family: "Playfair Display", Georgia, serif; font-size: 4rem; line-height: 1; color: var(--violet); display: block; height: .55em; }
.cx-atouts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.cx-atouts > div { padding: 26px 18px; text-align: center; border-left: 1px solid var(--line); }
.cx-atouts > div:first-child { border-left: 0; }
.cx-atouts .icon { margin: 0 auto 14px; background: transparent; color: var(--violet); width: 44px; height: 44px; }
.cx-atouts .icon svg { width: 34px; height: 34px; stroke-width: 1.4; }
.cx-atouts h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--violet); font-weight: 800; }
.cx-atouts p { font-size: .84rem; color: var(--ink-soft); margin-top: 6px; }
.cx-benefices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-top: 26px; border-top: 1px solid var(--line); }
.cx-benefices > div { display: flex; align-items: center; gap: 12px; font-size: .92rem; font-weight: 600; color: var(--ink); }
.cx-benefices svg { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--violet); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1024px) { .cx-atouts { grid-template-columns: repeat(3, 1fr); } .cx-atouts > div:nth-child(3n+1) { border-left: 0; } .cx-atouts > div:nth-child(n+4) { border-top: 1px solid var(--line); } .cx-benefices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cx-atouts { grid-template-columns: 1fr 1fr; } .cx-atouts > div:nth-child(odd) { border-left: 0; } .cx-atouts > div:nth-child(even) { border-left: 1px solid var(--line); } .cx-atouts > div:nth-child(n+3) { border-top: 1px solid var(--line); } .cx-benefices { grid-template-columns: 1fr; } }

/* Plan d'accès (Contact) */
.plan iframe { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 12px; display: block; filter: saturate(.85); }


/* ---------- Progression de lecture, retour en haut, nouveautés, impression ---------- */
.progression { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--u); transform-origin: left; transform: scaleX(0); z-index: 70; pointer-events: none; }
.haut { position: fixed; left: 22px; bottom: 22px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--bleu); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s; }
.haut.visible { opacity: 1; transform: none; pointer-events: auto; }
.haut:hover { background: var(--bleu); color: #fff; }
.haut svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.footer-news { margin-top: 22px; max-width: 340px; }
.footer-news label { color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; margin-bottom: 8px; }
.footer-news-ligne { display: flex; gap: 8px; }
.footer-news input[type="email"] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.footer-news input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.footer-news input[type="email"]:focus { border-color: var(--u); box-shadow: 0 0 0 4px rgba(var(--u-rgb), .25); }
.footer-news .btn { background: var(--u); border-color: var(--u); color: var(--u-ink); padding: 10px 16px; font-size: 1.1rem; }
.footer-news .form-success, .footer-news .form-error { margin-top: 10px; padding: 10px 12px; font-size: .9rem; }
@media (max-width: 560px) { .haut { left: 14px; bottom: 14px; width: 42px; height: 42px; } }

@media print {
  .site-header, .site-footer .footer-grid > div:not(:last-child), .footer-news, .haut, .progression, .defile, .defile-cartes, .ac-croix, .ac-points, .ac-globe, .cta-band .actions, .btn, form { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  section { padding: 24px 0 !important; break-inside: avoid; }
  .sombre, .tint, .soft, .cta-band, .ub-visual, .ac-rang.sombre, .ac-plus, .ac-horaires { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .sombre h1, .sombre h2, .sombre h3, .sombre p, .sombre .lead, .ac-horaires h3, .ac-horaires li, .ac-plus h4, .ac-plus p, .ac-rang.sombre * { color: #000 !important; }
  .wm-img--clair { display: none !important; } .wm-img--fonce { display: block !important; }
  .reveal, .mot { opacity: 1 !important; transform: none !important; }
  .faq-a { max-height: none !important; }
  .card, .price-card, .step, .stat { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* Étiquettes des articles sur fond sombre */
.sombre .pub-reseau { background: var(--u); color: var(--u-ink); }
.sombre .pub-cat { border-color: rgba(255,255,255,.45); color: #fff; }
.sombre .pub-meta { color: rgba(255,255,255,.8); }


/* ============================================================
   ACADEMY — univers visuel : pictos dessinés à la main, flèches
   en pointillés, globe clair, grand « + », points turquoise
   ============================================================ */
.doodle { position: absolute; pointer-events: none; color: var(--jaune); width: 90px; height: 90px; z-index: 1; opacity: .95; }
.doodle svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.doodle-fleche, .doodle-fleche-droite, .doodle-viseur { color: #6b7784; }
.sombre .doodle-fleche, .sombre .doodle-fleche-droite, .sombre .doodle-viseur { color: rgba(255,255,255,.55); }
@keyframes doodle-flotte { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes doodle-flotte-b { 0%, 100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-9px) rotate(-2deg); } }
@keyframes fusee-vole { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(6px, -14px) rotate(2deg); } }
.doodle-ampoule { animation: doodle-flotte 6s ease-in-out infinite; }
.doodle-bulles, .doodle-chat { animation: doodle-flotte-b 7s ease-in-out infinite; }
.doodle-loupe { animation: doodle-flotte 8s ease-in-out infinite 1s; }
.doodle-reseau { animation: doodle-flotte-b 9s ease-in-out infinite .5s; }
.doodle-fusee { animation: fusee-vole 5s ease-in-out infinite; }
/* Les traits se dessinent à l'arrivée à l'écran, les flèches en pointillés en dernier */
.doodle svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.visible .doodle svg *, .doodle.visible svg * { animation: trace 1.6s cubic-bezier(.2,.7,.2,1) forwards; }
.doodle svg *:nth-child(2) { animation-delay: .3s; } .doodle svg *:nth-child(3) { animation-delay: .6s; } .doodle svg *:nth-child(n+4) { animation-delay: .9s; }
.doodle-fleche svg *, .doodle-fleche-droite svg * { animation-duration: 2.2s; }
.doodle-fleche svg path:first-child, .doodle-fleche-droite svg path:first-child { stroke-dasharray: 8 8; stroke-dashoffset: 0; }

/* Section « univers visuel » : fond clair, globe gris au centre, arcs en pointillés */
.ac-univers { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(70% 60% at 100% 0%, rgba(var(--turq-rgb), .28), transparent 70%), linear-gradient(120deg, #f6f6f4 0%, #f2f4f3 55%, #dcece7 100%); }
.ac-univers::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(37,50,65,.05) 1px, transparent 1px) 0 0/48px 48px, linear-gradient(90deg, rgba(37,50,65,.05) 1px, transparent 1px) 0 0/48px 48px; -webkit-mask-image: radial-gradient(60% 60% at 100% 100%, #000 10%, transparent 100%); mask-image: radial-gradient(60% 60% at 100% 100%, #000 10%, transparent 100%); }
.ac-univers .ac-globe { background-image: radial-gradient(circle, rgba(37,50,65,.32) 1.3px, transparent 1.9px); opacity: .55; left: 50%; right: auto; top: -80px; transform: translateX(-50%); width: 640px; height: 640px; }
.ac-univers .ac-globe::before, .ac-univers .ac-globe::after { border-color: rgba(37,50,65,.28); }
.ac-univers .container { position: relative; z-index: 1; }
.ac-univers .ac-croix { top: 34px; left: 28px; }
.ac-univers .ac-points { bottom: 30px; right: 30px; --pt: var(--turq); }
.ac-arc-pointille { position: absolute; border: 2px dashed #6b7784; border-radius: 50%; pointer-events: none; opacity: .55; z-index: 0; }
.ac-arc-pointille.gauche { width: 520px; height: 900px; left: -420px; top: 40px; }
.ac-arc-pointille.droite { width: 520px; height: 900px; right: -420px; top: -120px; }
.ac-univers .card { background: rgba(255,255,255,.88); backdrop-filter: blur(4px); }
@media (max-width: 900px) { .doodle { width: 56px; height: 56px; } .ac-arc-pointille { display: none; } .ac-univers .ac-globe { width: 420px; height: 420px; } }
@media (prefers-reduced-motion: reduce) { .doodle svg * { stroke-dasharray: none; stroke-dashoffset: 0; } .doodle-fleche svg path:first-child, .doodle-fleche-droite svg path:first-child { stroke-dasharray: 8 8; } }


/* ---- La vraie Terre pointillée de la charte Academy (images extraites du PDF) ---- */
.doodle-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.doodle-img svg { display: none; }
body[data-univers="academy"] .sombre .ac-globe {
  background: url(motifs/terre-blanc.png) no-repeat right top / contain;
  -webkit-mask-image: none; mask-image: none; border-radius: 0; opacity: .85; animation: none;
  width: 520px; height: 920px; right: 0; top: -60px;
}
body[data-univers="academy"] .sombre .ac-globe::before, body[data-univers="academy"] .sombre .ac-globe::after { display: none; }
body[data-univers="academy"] .cta-band .ac-globe, body[data-univers="academy"] section.sombre:not(.page-hero) .ac-globe { right: 0; left: auto; top: -40px; bottom: auto; }
.ac-univers .ac-globe {
  background: url(motifs/terre.png) no-repeat center / contain; -webkit-mask-image: none; mask-image: none; border-radius: 0;
  width: 760px; height: 760px; left: 50%; right: auto; top: 30px; transform: translateX(-50%); opacity: .5; animation: none;
}
.ac-univers .ac-globe::before, .ac-univers .ac-globe::after { display: none; }
@media (max-width: 900px) {
  body[data-univers="academy"] .sombre .ac-globe { width: 300px; height: 540px; opacity: .6; }
  .ac-univers .ac-globe { width: 460px; height: 460px; }
}

/* Carte membre : la Terre en filigrane au verso, la fusée au recto */
.cm-terre { position: absolute; right: -60px; top: -30px; width: 260px; height: 420px; background: url(motifs/terre-blanc.png) no-repeat right top / contain; opacity: .35; pointer-events: none; }
body[data-univers="academy"] .cm-verso > * { position: relative; }

/* Étiquette + badge côte à côte dans les heros Academy */
/* Tampon « Maison de quartier » : écriture manuscrite, cadre pointillé incliné, petite maison dessinée */
@keyframes tampon-pose { 0% { opacity: 0; transform: rotate(-12deg) scale(1.6); } 60% { opacity: 1; transform: rotate(-3deg) scale(.96); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }
.ac-tampon { display: inline-flex; align-items: center; gap: 12px; margin: 2px 0 20px; padding: 8px 18px 8px 14px; border: 2px dashed var(--jaune); border-radius: 14px; color: var(--jaune);
  font-family: "Kaushan Script", cursive; font-size: 1.45rem; line-height: 1; letter-spacing: .01em; transform: rotate(-4deg); transform-origin: left center;
  animation: tampon-pose .9s cubic-bezier(.2,.9,.3,1.3) .55s both; position: relative; }
.ac-tampon::after { content: ""; position: absolute; inset: 4px; border-radius: 10px; border: 1px solid rgba(var(--jaune-rgb), .35); pointer-events: none; }
.ac-tampon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ac-tampon small { font-family: "Archivo", sans-serif; font-size: .62rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #fff; opacity: .85; margin-left: 4px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.35); align-self: center; }
.page-hero .ac-tampon { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .ac-tampon { animation: none; } }


/* ============================================================
   UNIVERS VISUEL DÉCLINÉ PAR PÔLE — les pictos prennent la couleur
   de l'univers (jaune pour l'Academy), la Terre habille tous les
   fonds sombres, le mot manuscrit et le tampon suivent la couleur.
   ============================================================ */
.doodle { color: var(--u); }
body[data-univers="academy"] .doodle { color: var(--jaune); }
.doodle-img { background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; aspect-ratio: var(--ratio, 1); height: auto; }
.doodle-img svg, .doodle-img img { display: none; }
body:not([data-univers="academy"]) .doodle-img { opacity: .9; }
/* La Terre pointillée sur tous les fonds sombres et les panneaux univers */
.sombre .ac-globe { background: url(motifs/terre-blanc.png) no-repeat right top / contain; -webkit-mask-image: none; mask-image: none; border-radius: 0; opacity: .8; animation: none; width: 520px; height: 920px; right: 0; top: -60px; left: auto; bottom: auto; }
.sombre .ac-globe::before, .sombre .ac-globe::after { display: none; }
.hero.sombre .ac-globe { opacity: .7; }
.ub-visual .ac-globe { background: url(motifs/terre-blanc.png) no-repeat right top / contain; -webkit-mask-image: none; mask-image: none; border-radius: 0; opacity: .6; animation: none; width: 240px; height: 430px; right: 0; top: -10px; left: auto; bottom: auto; }
.ub-visual .ac-globe::before, .ub-visual .ac-globe::after { display: none; }
/* Le mot manuscrit et le tampon dans la couleur du pôle */
.script { color: var(--u); }
.sombre .script { color: var(--u); filter: brightness(1.25); }
body[data-univers="academy"] .script.jaune, body[data-univers="academy"] .sombre .script.jaune { color: var(--jaune); filter: none; }
body[data-univers="connect"] .sombre .script { color: #c9a9ff; filter: none; }
.ac-tampon { border-color: var(--u); color: var(--u); }
.ac-tampon::after { border-color: rgba(var(--u-rgb), .35); }
.sombre .ac-tampon { filter: brightness(1.2); }
body[data-univers="academy"] .ac-tampon { border-color: var(--jaune); color: var(--jaune); filter: none; }
body[data-univers="academy"] .ac-tampon::after { border-color: rgba(var(--jaune-rgb), .35); }
/* Section claire au globe : le halo prend la couleur du pôle */
.ac-univers { background: radial-gradient(70% 60% at 100% 0%, rgba(var(--u-rgb), .22), transparent 70%), linear-gradient(120deg, #f6f6f4 0%, #f2f4f3 55%, #e9eeec 100%); }
.ac-univers .ac-points { --pt: var(--u); }
body[data-univers="academy"] .ac-univers { background: radial-gradient(70% 60% at 100% 0%, rgba(var(--turq-rgb), .28), transparent 70%), linear-gradient(120deg, #f6f6f4 0%, #f2f4f3 55%, #dcece7 100%); }
@media (max-width: 900px) { .sombre .ac-globe { width: 300px; height: 540px; opacity: .55; } .ub-visual .ac-globe { width: 160px; height: 290px; } }


/* ---------- Connect : grille des formules retravaillée ---------- */
body[data-univers="connect"] .pricing-grid { align-items: stretch; gap: 28px; }
body[data-univers="connect"] .price-card { transition: transform .3s, box-shadow .3s; box-shadow: 0 10px 30px rgba(34,49,64,.06); }
body[data-univers="connect"] .price-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(34,49,64,.12); }
body[data-univers="connect"] .price-body { padding-bottom: 24px; }
body[data-univers="connect"] .price-eq { display: block; font-family: "Archivo", sans-serif; font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin-top: 6px; }
.price-usage { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: var(--creme, #f7f1e8); border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; font-size: .92rem; color: var(--ink-soft); margin-top: auto; }
.price-usage b { color: var(--ink); font-weight: 700; }
.price-usage svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--violet); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* La carte vedette : violet profond, prix doré */
body[data-univers="connect"] .price-featured { transform: translateY(-14px); border: 0; background: radial-gradient(70% 60% at 100% 0%, rgba(201,169,255,.35), transparent 70%), linear-gradient(160deg, #2b1c4d 0%, #4a2a8f 60%, #5e3bb3 100%); color: #fff; box-shadow: 0 30px 60px rgba(75,42,143,.35); }
body[data-univers="connect"] .price-featured:hover { transform: translateY(-20px); }
body[data-univers="connect"] .price-featured .price-head, body[data-univers="connect"] .price-featured .price-head small { color: #fff; }
body[data-univers="connect"] .price-featured .price-head small { color: #e9d8a6; }
body[data-univers="connect"] .price-featured .cx-picto { background: #e9d8a6; color: #2b1c4d; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
body[data-univers="connect"] .price-featured .cx-picto svg { stroke: #2b1c4d; }
body[data-univers="connect"] .price-featured .price { background: rgba(255,255,255,.08); color: #e9d8a6; border: 1px solid rgba(233,216,166,.35); }
body[data-univers="connect"] .price-featured .price small { color: rgba(255,255,255,.85); }
body[data-univers="connect"] .price-featured .price-eq { color: rgba(255,255,255,.7); }
body[data-univers="connect"] .price-featured .price-body li { color: #fff; border-bottom-color: rgba(255,255,255,.14); }
body[data-univers="connect"] .price-featured .price-body li::before { color: #e9d8a6; }
body[data-univers="connect"] .price-featured .price-body li .sub { color: rgba(255,255,255,.65); }
body[data-univers="connect"] .price-featured .btn-u { background: #e9d8a6; border-color: #e9d8a6; color: #2b1c4d; }
body[data-univers="connect"] .price-featured .btn-u:hover { box-shadow: 0 12px 24px rgba(233,216,166,.35); }
body[data-univers="connect"] .price-featured .price-usage { background: rgba(0,0,0,.22); border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
body[data-univers="connect"] .price-featured .price-usage b { color: #fff; }
body[data-univers="connect"] .price-featured .price-usage svg { stroke: #e9d8a6; }
body[data-univers="connect"] .price-card .ribbon { background: #e9d8a6; color: #2b1c4d; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
body[data-univers="connect"] .price-card .ribbon::before { color: #2b1c4d; }
@media (max-width: 900px) { body[data-univers="connect"] .price-featured, body[data-univers="connect"] .price-featured:hover { transform: none; } body[data-univers="connect"] .pricing-grid { padding-top: 40px; gap: 60px; } }


/* ---------- Contact express ---------- */
.express { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.express-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s, border-color .3s; position: relative; overflow: hidden; }
.express-carte::after { content: "→"; position: absolute; right: 18px; top: 18px; color: var(--u); font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.express-carte:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--u); }
.express-carte:hover::after { opacity: 1; transform: none; }
.express-carte svg { width: 30px; height: 30px; fill: none; stroke: var(--u); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.express-carte b { font-weight: 800; font-size: 1.05rem; color: var(--bleu); }
.express-carte span { font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 900px) { .express { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .express { grid-template-columns: 1fr; } }

/* ---------- Equivalent mensuel Academy ---------- */
.ac-eq { display: block; font-size: .82rem; font-weight: 500; color: var(--ink-soft); margin-top: 4px; }

/* ---------- Confirmation d'envoi : la coche se dessine ---------- */
.form-success { display: none; align-items: center; gap: 14px; }
.form-success.show { display: flex; animation: monte .5s cubic-bezier(.2,.7,.2,1) both; }
.form-success .coche { width: 40px; height: 40px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.form-success .coche circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: trace-coche .7s cubic-bezier(.2,.7,.2,1) forwards; }
.form-success .coche path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: trace-coche .5s cubic-bezier(.2,.7,.2,1) .5s forwards; }
@keyframes trace-coche { to { stroke-dashoffset: 0; } }


/* ---------- Mobile : les pictos ne chevauchent plus les textes ---------- */
@media (max-width: 900px) {
  /* Dans les heros et bandeaux sombres : un seul picto, discret, en haut à droite sous les croix */
  .page-hero .doodle ~ .doodle, .hero .doodle ~ .doodle, section.sombre .doodle ~ .doodle { display: none; }
  .page-hero .doodle, .hero .doodle, section.sombre .doodle { top: 160px !important; right: 16px !important; left: auto !important; bottom: auto !important; width: 60px !important; height: auto !important; opacity: .75; }
  /* Dans les sections claires : le globe reste, les pictos s'effacent */
  .ac-univers .doodle { display: none; }
  /* Bandeaux de fin (texte centré) : pas de picto non plus */
  section.sombre:not(.page-hero):not(.hero) .doodle { display: none; }
  /* Tampon et étiquette plus compacts */
  .ac-tampon { font-size: 1.1rem; padding: 6px 12px; gap: 8px; }
  .ac-tampon small { font-size: .56rem; letter-spacing: .16em; margin-left: 2px; padding-left: 8px; }
  .ac-tampon svg { width: 22px; height: 22px; }
  .page-hero .eyebrow, .hero .eyebrow { font-size: .7rem; padding: 6px 12px 5px; }
}

/* Cartes des pôles Academy : une couleur par pôle (liseré, étiquette, icône, lien) */
.pole-card { --c: var(--u); --c-rgb: var(--u-rgb); --c-text: var(--u-text); --c-ink: var(--u-ink); }
/* (sélecteurs renforcés : ils doivent passer devant les règles propres à l'Academy) */
body[data-univers] .pole-card::before { background: var(--c); }
body[data-univers] .pole-card .card-tag, body[data-univers] .pole-card .card-tag.open { background: var(--c); color: var(--c-ink); }
body[data-univers] .pole-card .icon { background: rgba(var(--c-rgb), .14); color: var(--c-text); }
body[data-univers] .pole-card .card-link { color: var(--c-text); }
body[data-univers] .pole-card:hover { border-color: rgba(var(--c-rgb), .5); }

/* ---------- Accompagnement : d'une organisation subie à une organisation pilotée ---------- */
.avant-apres { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.aa-tete, .aa-ligne { display: grid; grid-template-columns: 1fr 1fr; }
.aa-tete span { padding: 12px 20px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--bleu); color: #fff; }
.aa-tete span:last-child { background: var(--u); color: var(--u-ink); }
.aa-ligne { border-top: 1px solid var(--line); }
.aa-ligne span { padding: 14px 20px; font-weight: 600; color: var(--ink-soft); position: relative; }
.aa-ligne span:last-child { color: var(--u-text); font-weight: 700; background: rgba(var(--u-rgb), .06); }
.aa-ligne span:last-child::before { content: "→"; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--u); color: var(--u-ink); font-size: .7rem; display: flex; align-items: center; justify-content: center; }
.card .avant-apres { box-shadow: none; }
@media (max-width: 560px) { .check-list[style*="columns"] { columns: 1 !important; } }

/* Titres de hero longs (phrase complète) : plus petits, plus larges */
.page-hero h1.h1-long { font-size: clamp(1.55rem, 3.2vw, 2.5rem); max-width: 30ch; line-height: 1.12; }
.page-hero h1.h1-long .script { font-size: 1.25em; display: block; margin-top: .15em; }


/* ---------- Constellation ORIION Global (hero de l'accueil) ----------
   Sept étoiles reliées au nœud orange (ORIION Global) et au nœud vert
   (l'Accompagnement) : halos lumineux, liens qui se tracent puis
   impulsions qui circulent, étoiles qui scintillent, orbite qui tourne. */
@keyframes cst-trace { to { stroke-dashoffset: 0; } }
@keyframes cst-scintille { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes cst-poussiere { 0%, 100% { opacity: .15; } 50% { opacity: .8; } }
@keyframes cst-respire { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.14); opacity: .45; } }
@keyframes cst-apparait { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes cst-flotte { 0%, 100% { transform: translateY(-50%) rotate(0); } 50% { transform: translateY(calc(-50% - 14px)) rotate(1deg); } }
@keyframes cst-tourne { to { transform: rotate(360deg); } }
@keyframes cst-halo-in { from { opacity: 0; } to { opacity: 1; } }
.constellation { position: absolute; right: 3%; top: 50%; width: min(50vw, 680px); transform: translateY(-50%); z-index: 3; pointer-events: none; overflow: visible; user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); animation: cst-flotte 10s ease-in-out infinite; }
.constellation .cst-poussiere circle { animation: cst-poussiere 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.constellation .cst-halos { animation: cst-halo-in 2s ease 1s both; }
.constellation .cst-halos circle { filter: url(#cst-flou); }
.constellation .cst-liens path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cst-trace 1.2s cubic-bezier(.2,.7,.2,1) forwards; }
.constellation .cst-liens path:nth-child(1) { animation-delay: .9s; }
.constellation .cst-liens path:nth-child(2) { animation-delay: 1.5s; }
.constellation .cst-liens path:nth-child(3) { animation-delay: 1.2s; }
.constellation .cst-liens path:nth-child(4) { animation-delay: 1.8s; }
.constellation .cst-liens path:nth-child(5) { animation-delay: 2.3s; }
.constellation .cst-impulsions circle { filter: drop-shadow(0 0 6px #fff); }
.constellation .cst-etoiles circle, .constellation .cst-vert, .constellation .cst-orange { transform-box: fill-box; transform-origin: center; }
.constellation .cst-etoiles circle { animation: cst-apparait .7s cubic-bezier(.34,1.56,.64,1) both, cst-scintille 4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,255,255,.45)); }
.constellation .cst-etoiles circle:nth-child(1) { animation-delay: .3s, 3s; }
.constellation .cst-etoiles circle:nth-child(2) { animation-delay: .5s, 3.6s; }
.constellation .cst-etoiles circle:nth-child(3) { animation-delay: .4s, 4.1s; }
.constellation .cst-etoiles circle:nth-child(4) { animation-delay: .6s, 3.3s; }
.constellation .cst-etoiles circle:nth-child(5) { animation-delay: .7s, 4.6s; }
.constellation .cst-etoiles circle:nth-child(6) { animation-delay: .8s, 3.9s; }
.constellation .cst-etoiles circle:nth-child(7) { animation-delay: 1.4s, 5s; }
.constellation .cst-vert { animation: cst-apparait .9s cubic-bezier(.34,1.56,.64,1) .25s both; filter: drop-shadow(0 0 22px rgba(60,157,54,.7)); }
.constellation .cst-orange { animation: cst-apparait .9s cubic-bezier(.34,1.56,.64,1) both; filter: drop-shadow(0 0 22px rgba(244,152,28,.7)); }
.constellation .cst-halo { transform-box: fill-box; transform-origin: center; animation: cst-respire 3.2s ease-in-out 1.2s infinite; }
.constellation .cst-orbite { transform-box: fill-box; transform-origin: center; animation: cst-tourne 28s linear infinite; }
@media (max-width: 1180px) { .constellation { width: 50vw; right: 1%; opacity: .9; } }
@media (max-width: 900px) {
  /* Sur téléphone : en haut à droite, à côté du logo et du titre, au-dessus du fond, tapotable */
  .constellation { width: 50vw; right: -8.5%; top: 39%; transform: none; opacity: .95; z-index: 2; animation: none; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
  .hero .container { position: relative; z-index: 1; }
  .hero h1 { position: relative; z-index: 3; }
}
@media (prefers-reduced-motion: reduce) { .constellation, .constellation * { animation: none !important; } .constellation .cst-liens path { stroke-dasharray: none; } .constellation .cst-impulsions { display: none; } }

/* Constellation cliquable : les nœuds répondent au clic, onde qui s'élargit */
.constellation .cst-etoiles circle, .constellation .cst-vert circle, .constellation .cst-orange circle:last-child { pointer-events: auto; cursor: pointer; }
.constellation .cst-etoiles circle:hover { filter: drop-shadow(0 0 18px rgba(255,255,255,.9)); }
@keyframes cst-onde { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.cst-onde { fill: none; stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: cst-onde 1.1s cubic-bezier(.2,.7,.2,1) forwards; pointer-events: none; }

.hero .container { -webkit-user-select: none; user-select: none; }
.hero .container p, .hero .container h1 { -webkit-user-select: text; user-select: text; }


/* ============================================================
   ORIION ACCOMPAGNEMENT — mise en scène « conseil » : cockpit,
   indicateurs, jauges, diagnostic interactif, radar, parcours,
   camembert, avant/après, espace client
   ============================================================ */
.acc-hero-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.acc-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); max-width: none; }
.acc-hero h1 .script { font-size: 1.15em; }
.acc-devise { margin-top: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.15rem; color: #fff; }
.acc-devise .script { text-transform: none; letter-spacing: 0; font-size: 1.35em; }
.acc-devise.sombre-non { color: var(--bleu); }
/* Cockpit */
.acc-cockpit { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 20px 22px 22px; backdrop-filter: blur(6px); color: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.acc-cockpit-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.acc-cockpit-tete span { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; display: inline-flex; align-items: center; gap: 8px; }
.acc-cockpit-tete i { width: 9px; height: 9px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 4px rgba(60,157,54,.25); animation: cst-scintille 2.4s ease-in-out infinite; }
.acc-cockpit-tete small { font-size: .7rem; color: rgba(255,255,255,.55); }
.acc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.acc-kpi { background: rgba(0,0,0,.22); border-radius: 12px; padding: 12px 12px 10px; }
.acc-kpi small { display: block; font-size: .66rem; color: rgba(255,255,255,.65); line-height: 1.3; min-height: 2.6em; }
.acc-kpi b { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.acc-tendance { display: block; font-style: normal; font-size: .66rem; font-weight: 700; margin-top: 4px; }
.acc-tendance.bas { color: #7fd07a; } .acc-tendance.haut { color: #7fd07a; }
.acc-cockpit-corps { display: grid; grid-template-columns: 1.3fr .8fr; gap: 12px; margin-top: 12px; }
.acc-barres, .acc-anneau { background: rgba(0,0,0,.22); border-radius: 12px; padding: 12px; }
.acc-barres small { display: block; font-size: .66rem; color: rgba(255,255,255,.65); margin-bottom: 6px; }
.acc-barres svg { width: 100%; height: auto; }
.acc-barres rect { rx: 3; transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.acc-barres-avant rect { fill: rgba(255,255,255,.35); } .acc-barres-apres rect { fill: var(--vert); }
.visible .acc-barres rect, .acc-cockpit.visible .acc-barres rect { transform: scaleY(1); }
.acc-barres rect:nth-child(2) { transition-delay: .12s; } .acc-barres rect:nth-child(3) { transition-delay: .24s; }
.acc-barres-apres rect:nth-child(1) { transition-delay: .4s; } .acc-barres-apres rect:nth-child(2) { transition-delay: .52s; } .acc-barres-apres rect:nth-child(3) { transition-delay: .64s; }
.acc-anneau svg { width: 100%; height: auto; }
.acc-anneau-vert, .acc-anneau-or { stroke-dasharray: 0 100; transition: stroke-dasharray 1.4s cubic-bezier(.2,.7,.2,1) .4s; }
.visible .acc-anneau-vert { stroke-dasharray: 64 100; } .visible .acc-anneau-or { stroke-dasharray: 22 100; transition-delay: 1.2s; }
.acc-anneau-val { font-size: 22px; font-weight: 800; fill: #fff; } .acc-anneau-lib { font-size: 8.5px; fill: rgba(255,255,255,.7); font-weight: 600; }
.acc-plan { margin-top: 12px; }
.acc-plan small { font-size: .66rem; color: rgba(255,255,255,.65); }
.acc-plan-barre { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 6px; }
.acc-plan-barre i { display: block; height: 100%; width: var(--p, 0); background: linear-gradient(90deg, var(--vert), #7fd07a); border-radius: 999px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .6s; }
.visible .acc-plan-barre i { transform: scaleX(1); }
.acc-plan-etats { display: flex; gap: 14px; font-size: .68rem; color: rgba(255,255,255,.7); margin-top: 6px; }
.acc-plan-etats span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); margin-right: 5px; }
.acc-plan-etats span:nth-child(2)::before { background: #e9d8a6; } .acc-plan-etats span:nth-child(3)::before { background: rgba(255,255,255,.35); }
/* Éligibilité */
.acc-eligibilite { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.acc-elig { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.acc-elig-oui { border-top: 6px solid var(--vert); } .acc-elig-alt { border-top: 6px solid var(--bleu); }
.acc-jauge { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.acc-jauge svg { width: 110px; height: auto; }
.acc-jauge-arc { stroke-dasharray: 0 100; transition: stroke-dasharray 1.3s cubic-bezier(.2,.7,.2,1) .3s; }
.visible .acc-elig-oui .acc-jauge-arc, .acc-elig-oui.visible .acc-jauge-arc { stroke-dasharray: 100 100; }
.visible .acc-elig-alt .acc-jauge-arc, .acc-elig-alt.visible .acc-jauge-arc { stroke-dasharray: 38 100; }
.acc-jauge b { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.acc-criteres { display: grid; gap: 6px; margin-top: 10px; }
.acc-criteres li { position: relative; padding-left: 24px; font-size: .95rem; }
.acc-criteres li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 4px; background: rgba(var(--u-rgb), .18); border: 2px solid var(--u); }
.acc-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.acc-puces span { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .86rem; font-weight: 600; transition: transform .25s, border-color .25s, background .25s; }
.acc-puces span:hover { transform: translateY(-2px); border-color: var(--u); background: rgba(var(--u-rgb), .08); }
.reveal .acc-puces span { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.reveal.visible .acc-puces span { opacity: 1; transform: none; }
.reveal.visible .acc-puces span:nth-child(n+2) { transition-delay: .06s; } .reveal.visible .acc-puces span:nth-child(n+4) { transition-delay: .14s; } .reveal.visible .acc-puces span:nth-child(n+6) { transition-delay: .22s; } .reveal.visible .acc-puces span:nth-child(n+8) { transition-delay: .3s; } .reveal.visible .acc-puces span:nth-child(n+10) { transition-delay: .38s; }
/* Diagnostic interactif */
.acc-cases { display: grid; gap: 8px; margin-top: 14px; }
.acc-cases label { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: .95rem; transition: background .2s, border-color .2s; }
.acc-cases label:hover { border-color: var(--u); }
.acc-cases label:has(input:checked) { background: rgba(var(--u-rgb), .1); border-color: var(--u); }
.acc-cases input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--u); flex: none; }
.acc-resultat { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; box-shadow: var(--shadow); }
.acc-score { position: relative; width: 110px; height: 110px; flex: none; }
.acc-score svg { width: 100%; height: 100%; }
.acc-score-arc { transition: stroke-dasharray .8s cubic-bezier(.2,.7,.2,1), stroke .4s; }
.acc-score-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.acc-score-titre { display: block; font-weight: 800; font-size: 1.05rem; }
.acc-score-texte { color: var(--ink-soft); font-size: .92rem; margin-top: 4px; }
.acc-verite { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.acc-verite p { font-size: 1.15rem; color: var(--ink); }
.acc-verite-grand { font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 1.9rem) !important; letter-spacing: -.01em; margin: 14px 0 10px; }
.acc-verite-grand .script { text-transform: none; letter-spacing: 0; font-size: 1.15em; }
/* Radar */
.acc-radar svg { width: 100%; max-width: 460px; height: auto; margin: 0 auto; display: block; }
.acc-radar-apres, .acc-radar-avant { transform-box: fill-box; transform-origin: center; transform: scale(.2); opacity: 0; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .8s; }
.visible .acc-radar-avant { transform: scale(1); opacity: 1; transition-delay: .2s; }
.visible .acc-radar-apres { transform: scale(1); opacity: 1; transition-delay: .6s; }
.acc-legende { display: flex; justify-content: center; gap: 22px; font-size: .86rem; color: var(--ink-soft); margin-top: 8px; }
.acc-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
/* Parcours en 5 étapes */
.acc-parcours { position: relative; }
.acc-parcours-ligne { position: absolute; left: 10%; right: 10%; top: 34px; height: 3px; background: var(--line); border-radius: 3px; }
.acc-parcours-ligne i { display: block; height: 100%; width: var(--p, 0%); background: var(--u); border-radius: 3px; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.acc-etapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; }
.acc-etape { background: transparent; border: 0; cursor: pointer; font: inherit; color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 4px; }
.acc-etape b { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 3px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; transition: transform .3s, border-color .3s, background .3s, color .3s; }
.acc-etape span { font-size: .88rem; font-weight: 700; text-align: center; }
.acc-etape.on b, .acc-etape.fait b { border-color: var(--u); }
.acc-etape.on b { background: var(--u); color: var(--u-ink); transform: scale(1.12); box-shadow: 0 10px 24px rgba(var(--u-rgb), .3); }
.acc-etape.on span { color: var(--ink); }
.acc-etape:hover b { transform: scale(1.08); border-color: var(--u); }
.acc-etape-detail { margin-top: 22px; min-height: 240px; }
.acc-etape-panneau { display: none; animation: monte .5s cubic-bezier(.2,.7,.2,1) both; }
.acc-etape-panneau.on { display: block; }
.acc-etape-panneau .acc-criteres { grid-template-columns: repeat(2, 1fr); gap: 6px 22px; }
/* Domaines terrain */
.acc-domaines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.acc-domaines > div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 22px 12px; text-align: center; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .3s, background .3s; }
.acc-domaines > div:hover { transform: translateY(-4px); background: rgba(var(--u-rgb), .25); }
.acc-domaines svg { width: 30px; height: 30px; fill: none; stroke: var(--u); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: brightness(1.3); }
/* Camembert interactif */
.acc-camembert { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: center; }
.acc-pie { width: 100%; height: auto; }
.acc-parts path { fill: rgba(var(--u-rgb), .18); stroke: #fff; stroke-width: 3; cursor: pointer; transition: fill .3s, transform .3s; transform-box: fill-box; transform-origin: 160px 160px; }
.acc-parts path:hover { fill: rgba(var(--u-rgb), .45); }
.acc-parts path.on { fill: var(--u); transform: scale(1.04); }
.reveal .acc-parts path { opacity: 0; transition: opacity .5s, fill .3s, transform .3s; }
.reveal.visible .acc-parts path { opacity: 1; }
.reveal.visible .acc-parts path:nth-child(2) { transition-delay: .1s; } .reveal.visible .acc-parts path:nth-child(3) { transition-delay: .2s; } .reveal.visible .acc-parts path:nth-child(4) { transition-delay: .3s; } .reveal.visible .acc-parts path:nth-child(5) { transition-delay: .4s; } .reveal.visible .acc-parts path:nth-child(6) { transition-delay: .5s; }
.acc-pie-centre { fill: #fff; filter: drop-shadow(0 6px 14px rgba(34,49,64,.15)); }
.acc-pie-num { font-size: 22px; font-weight: 800; fill: var(--u); }
.acc-pie-lib { font-size: 11px; font-weight: 800; fill: var(--bleu); text-transform: uppercase; letter-spacing: .06em; }
.acc-pie-etiquettes text { pointer-events: none; }
.acc-axes { position: relative; min-height: 260px; }
.acc-axe { display: none; animation: monte .45s cubic-bezier(.2,.7,.2,1) both; }
.acc-axe.on { display: block; }
.acc-axe .acc-criteres { grid-template-columns: repeat(2, 1fr); gap: 8px 22px; font-size: 1rem; }
/* Avant / après */
.acc-bascule { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; box-shadow: var(--shadow); max-width: 820px; margin: 0 auto; }
.acc-bascule-tete { display: flex; align-items: center; justify-content: center; gap: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; color: var(--ink-soft); margin-bottom: 18px; }
.acc-bascule-vs { color: var(--u); font-size: 1.2rem; }
.acc-interrupteur { width: 64px; height: 34px; border-radius: 999px; border: 0; background: var(--line); position: relative; cursor: pointer; transition: background .3s; }
.acc-interrupteur i { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.acc-interrupteur[aria-pressed="true"] { background: var(--u); }
.acc-interrupteur[aria-pressed="true"] i { transform: translateX(30px); }
.acc-ligne { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 700; }
.acc-avant { color: var(--ink); transition: color .4s, opacity .4s; }
.acc-apres { color: var(--u-text); opacity: .35; transition: opacity .5s, transform .5s; transform: translateX(-8px); }
.acc-fleche { color: var(--line); transition: color .4s; }
.acc-ligne.on .acc-apres { opacity: 1; transform: none; } .acc-ligne.on .acc-avant { opacity: .45; text-decoration: line-through; } .acc-ligne.on .acc-fleche { color: var(--u); }
.acc-bascule-pied { text-align: center; margin-top: 16px; font-size: 1.05rem; }
.acc-bascule-fixe .acc-ligne.on .acc-avant { text-decoration: none; opacity: .6; }
/* Mission sur mesure */
.acc-flux { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; }
.acc-flux span { padding: 6px 12px; border-radius: 8px; background: rgba(var(--u-rgb), .1); color: var(--u-text); }
.acc-flux i { font-style: normal; color: var(--ink-soft); }
.acc-facteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.acc-facteurs > div { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: .86rem; font-weight: 600; transition: transform .25s, border-color .25s; }
.acc-facteurs > div:hover { transform: translateY(-3px); border-color: var(--u); }
.acc-facteurs svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--u); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Conseil ponctuel */
.acc-ponctuel { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.acc-horloge svg { width: 100%; max-width: 300px; margin: 0 auto; display: block; }
.acc-horloge-arc { stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s cubic-bezier(.2,.7,.2,1) .3s; }
.visible .acc-horloge-arc { stroke-dasharray: 100 100; }
.acc-horloge-val { font-size: 34px; font-weight: 800; fill: var(--bleu); } .acc-horloge-lib { font-size: 9px; font-weight: 700; fill: var(--ink-soft); }
/* Preuves */
.acc-preuves { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acc-preuve { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 22px; }
.acc-preuve b { display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--u); filter: brightness(1.3); line-height: 1; }
.acc-preuve span { display: block; margin-top: 6px; color: rgba(255,255,255,.75); font-size: .92rem; }
.acc-citation { grid-column: 1 / -1; font-family: "Kaushan Script", cursive; font-size: 1.35rem; color: #fff; text-align: center; padding: 8px 0 0; }
/* Espace client */
.acc-espace { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.acc-espace-nav { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--bg-soft); overflow-x: auto; }
.acc-espace-nav button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: .9rem; padding: 9px 14px; border-radius: 8px; cursor: pointer; color: var(--ink-soft); white-space: nowrap; }
.acc-espace-nav button.on { background: #fff; color: var(--u-text); box-shadow: var(--shadow); }
.acc-espace-vues { padding: 26px 28px; min-height: 240px; }
.acc-vue { display: none; animation: monte .45s cubic-bezier(.2,.7,.2,1) both; }
.acc-vue.on { display: block; }
.acc-vue-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.acc-vue-kpis > div { background: var(--bg-soft); border-radius: 12px; padding: 12px 14px; }
.acc-vue-kpis small { display: block; font-size: .72rem; color: var(--ink-soft); } .acc-vue-kpis b { font-size: 1.15rem; font-weight: 800; }
.acc-vue .acc-plan-barre { background: var(--line); }
.acc-vue .acc-plan-barre i { transform: scaleX(1); }
.acc-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.acc-kanban > div { background: var(--bg-soft); border-radius: 12px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.acc-kanban b { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.acc-kanban span { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .84rem; font-weight: 600; }
.acc-kanban > div:nth-child(3) span { border-left: 3px solid var(--vert); } .acc-kanban > div:nth-child(2) span { border-left: 3px solid #e9b94a; } .acc-kanban > div:nth-child(4) span { border-left: 3px solid var(--rouge); }
/* Démarrer */
.acc-demarrer { display: grid; gap: 14px; }
.acc-demarrer-etape { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.acc-demarrer-etape b { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--u); color: var(--u-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.acc-demarrer-etape h3 { font-size: 1.05rem; margin-bottom: 4px; } .acc-demarrer-etape p { color: var(--ink-soft); font-size: .94rem; }
@media (max-width: 1024px) { .acc-camembert { grid-template-columns: 300px 1fr; } .acc-facteurs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .acc-hero-grille, .acc-eligibilite, .acc-camembert, .acc-ponctuel, .acc-preuves { grid-template-columns: 1fr; }
  .acc-cockpit { display: none; }
  .acc-etapes { grid-template-columns: repeat(5, 1fr); gap: 2px; } .acc-etape span { font-size: .7rem; } .acc-etape b { width: 40px; height: 40px; font-size: .8rem; }
  .acc-parcours-ligne { top: 28px; }
  .acc-etape-panneau .acc-criteres, .acc-axe .acc-criteres { grid-template-columns: 1fr; }
  .acc-domaines { grid-template-columns: repeat(2, 1fr); } .acc-kanban { grid-template-columns: 1fr 1fr; } .acc-vue-kpis { grid-template-columns: 1fr; }
  .acc-ligne { grid-template-columns: 1fr; gap: 4px; } .acc-fleche { display: none; }
  .acc-camembert svg { max-width: 300px; margin: 0 auto; }
}


/* ============================================================
   ORIION ACADEMY — PAGE V2 « Le futur se construit aujourd'hui »
   Classes .av-* : uniquement utilisées sur academy-v2.html.
   Palette de la charte Academy : nuit, turquoise, jaune, sable.
   ============================================================ */

/* ---- Ouverture ---- */
.av-hero-grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.av-hero h1 { max-width: 13ch; }
.av-question-ouverture { font-size: 1.22rem; font-weight: 600; }
.av-question-ouverture s { text-decoration-thickness: 3px; text-decoration-color: rgba(255,255,255,.45); opacity: .7; }
body .av-question-ouverture b { color: var(--jaune); }
.av-hero-visuel { position: relative; }

/* Cadre photo commun aux illustrations */
.av-photo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: var(--sable); box-shadow: var(--shadow-lg); }
.av-photo img { width: 100%; height: 100%; object-fit: cover; }
.av-photo::after { content: ""; position: absolute; inset: 0; border: 3px solid rgba(255,255,255,.55); border-radius: 20px; pointer-events: none; }
.av-photo--pivot { transform: rotate(-2deg); }
.av-etiquette {
  position: absolute; left: -14px; bottom: -16px; background: var(--jaune); color: var(--nuit);
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem;
  padding: 10px 20px; transform: rotate(-3deg); box-shadow: 0 10px 20px rgba(0,0,0,.25);
  clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
}

/* ---- Notre philosophie ---- */
.av-philo { position: relative; overflow: hidden; isolation: isolate; background: var(--sable-2); }
.av-philo .container { position: relative; z-index: 1; }
.av-philo .ac-croix { top: 40px; right: 30px; opacity: .5; }
.av-philo .ac-points { bottom: 40px; left: 24px; --pt: var(--turq); }
.av-philo-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.av-mais { margin-top: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--nuit); }
.av-verbes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.av-verbes li { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--turq); border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: .95rem; }
.av-verbes li:nth-child(even) { border-left-color: var(--jaune); }
.av-philo-visuel { position: relative; }
.av-encart { position: relative; z-index: 2; margin: -46px 0 0 44px; background: var(--nuit); color: #fff; border-radius: 14px; padding: 22px 26px; box-shadow: var(--shadow-lg); font-size: 1.05rem; }
body .av-encart p { color: rgba(255,255,255,.82); }
.av-encart b { color: var(--jaune); font-weight: 800; }

/* ---- Les questions ---- */
.av-questions { position: relative; overflow: hidden; isolation: isolate; }
.av-questions .container { position: relative; z-index: 1; }
.av-questions .ac-points { top: 40px; left: 22px; --pt: var(--jaune); }
.av-bulles { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 22px; }
.av-bulle {
  flex: 0 1 330px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 18px 18px 18px 5px;
  padding: 22px 24px 20px; cursor: pointer; position: relative; box-shadow: var(--shadow);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.av-bulle::after { content: ""; position: absolute; left: 24px; bottom: -9px; width: 16px; height: 16px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.av-bulle:nth-child(odd) { transform: rotate(-1deg); }
.av-bulle:nth-child(even) { transform: rotate(1deg); }
.av-bulle:hover, .av-bulle:focus-visible { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-lg); }
.av-bulle-q { display: block; font-weight: 800; font-size: 1.02rem; line-height: 1.3; color: var(--nuit); padding-right: 34px; }
.av-bulle-r { display: block; max-height: 0; overflow: hidden; opacity: 0; color: var(--ink-soft); font-size: .95rem; transition: max-height .45s cubic-bezier(.2,.7,.2,1), opacity .3s, margin .3s; }
.av-bulle.on { transform: rotate(0); box-shadow: var(--shadow-lg); border-color: rgba(var(--turq-rgb), .45); }
.av-bulle.on .av-bulle-r { max-height: 260px; opacity: 1; margin-top: 12px; }
.av-bulle-plus { position: absolute; top: 20px; right: 20px; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--turq-rgb), .14); }
.av-bulle-plus::before, .av-bulle-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; background: var(--turq); transform: translate(-50%, -50%); transition: transform .3s; }
.av-bulle-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.av-bulle.on .av-bulle-plus { background: var(--jaune); }
.av-bulle.on .av-bulle-plus::before, .av-bulle.on .av-bulle-plus::after { background: var(--nuit); }
.av-bulle.on .av-bulle-plus::after { transform: translate(-50%, -50%) rotate(0); }
.av-note-questions { margin-top: 44px; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 600; line-height: 1.45; }
.av-note-questions b { font-weight: 800; color: var(--nuit); }
.sombre .av-note-questions b, .av-orbite-section .av-note-questions b { color: var(--jaune); }

/* ---- La chaîne : d'une envie à un projet ---- */
.av-chaine-section { position: relative; overflow: hidden; isolation: isolate; background: #fff; }
.av-chaine-section .container { position: relative; z-index: 1; }
.av-chaine-section .ac-globe { left: 50%; right: auto; transform: translateX(-50%); top: -140px; opacity: .35; background-image: radial-gradient(circle, rgba(37,50,65,.3) 1.3px, transparent 1.9px); }
.av-chaine-section .ac-globe::before, .av-chaine-section .ac-globe::after { border-color: rgba(37,50,65,.22); }
.av-chaine { display: grid; gap: 22px; }
.av-fil { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 18px; box-shadow: var(--shadow); }
.av-maillon { padding: 0 18px; }
.av-maillon-num { display: block; font-weight: 800; font-size: .72rem; letter-spacing: .14em; color: var(--turq); }
.av-maillon-icone { display: flex; width: 46px; height: 46px; border-radius: 12px; background: rgba(var(--turq-rgb), .12); color: var(--turq); align-items: center; justify-content: center; margin: 10px 0 12px; }
.av-maillon-icone svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.av-maillon h3 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: -.01em; }
.av-maillon p { color: var(--ink-soft); font-size: .93rem; margin-top: 6px; }
.av-maillon--fin .av-maillon-icone { background: var(--jaune); color: var(--nuit); }
.av-maillon--fin h3 { color: var(--u-text); }
.av-lien { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--turq) 0 6px, transparent 6px 12px); opacity: .7; }
.av-lien::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left-color: var(--turq); }

/* ---- Compétences invisibles ---- */
.av-double { display: grid; gap: 16px; }
.av-rang { display: grid; grid-template-columns: 270px 46px 1fr; align-items: center; gap: 14px; background: #fff; border-radius: 16px; border-left: 4px solid var(--jaune); padding: 22px 26px; box-shadow: var(--shadow); }
.av-rang-gauche { display: flex; flex-wrap: wrap; gap: 8px; }
.av-tag { background: var(--sable); color: var(--nuit); font-weight: 700; font-size: .85rem; padding: 6px 13px; border-radius: 999px; }
.av-fleche { position: relative; height: 2px; background: rgba(var(--turq-rgb), .55); }
.av-fleche::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left-color: var(--turq); }
.av-rang-droite h3 { text-transform: uppercase; font-size: 1.05rem; }
.av-rang-droite p { color: var(--ink-soft); font-size: .96rem; margin-top: 6px; }

/* ---- Les six verbes en orbite ---- */
.av-orbite-section .container { position: relative; z-index: 1; }
.av-orbite { position: relative; max-width: 720px; margin: 46px auto 0; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.av-orbite::before { content: ""; position: absolute; inset: 9%; border: 2px dashed rgba(255,255,255,.3); border-radius: 50%; }
.av-orbite-photo { position: relative; width: 46%; aspect-ratio: 1 / 1; margin: 0; border-radius: 50%; overflow: hidden; border: 6px solid var(--jaune); box-shadow: var(--shadow-lg); }
.av-orbite-photo img { width: 100%; height: 100%; object-fit: cover; }
.av-mot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--jaune); color: var(--nuit); font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  font-size: .88rem; padding: 10px 20px; border-radius: 999px; white-space: nowrap; box-shadow: 0 12px 24px rgba(0,0,0,.28);
}
.av-mot:nth-child(even) { background: var(--turq); color: #fff; }
.av-mot--1 { left: 50%;   top: 4%; }
.av-mot--2 { left: 89.5%; top: 27%; }
.av-mot--3 { left: 89.5%; top: 73%; }
.av-mot--4 { left: 50%;   top: 96%; }
.av-mot--5 { left: 10.5%; top: 73%; }
.av-mot--6 { left: 10.5%; top: 27%; }

/* ---- Projets ---- */
.av-projets { position: relative; overflow: hidden; isolation: isolate; }
.av-projets .container { position: relative; z-index: 1; }
.av-projets .ac-points { top: 50px; left: 24px; --pt: var(--turq); }
.av-frise { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.av-frise::before { content: ""; position: absolute; top: 23px; left: 12.5%; right: 12.5%; height: 2px; background: repeating-linear-gradient(90deg, var(--turq) 0 6px, transparent 6px 12px); }
.av-frise-etape { text-align: center; padding: 0 16px; }
.av-frise-pastille { display: inline-flex; width: 48px; height: 48px; border-radius: 50%; background: var(--nuit); color: #fff; font-weight: 800; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 0 0 8px #fff; }
.av-frise-etape:last-child .av-frise-pastille { background: var(--jaune); color: var(--nuit); }
.av-frise-etape h3 { margin-top: 16px; text-transform: uppercase; font-size: 1rem; }
.av-frise-etape p { color: var(--ink-soft); font-size: .93rem; margin-top: 6px; }

.av-projet { display: grid; grid-template-columns: .85fr 1.15fr; background: var(--nuit); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); }
.av-projet-photo { margin: 0; min-height: 320px; }
.av-projet-photo img { width: 100%; height: 100%; object-fit: cover; }
.av-projet-corps { padding: 34px 38px 36px; }
.av-projet-cat { display: inline-block; background: var(--jaune); color: var(--nuit); font-weight: 800; text-transform: uppercase; font-size: .74rem; letter-spacing: .1em; padding: 5px 12px; border-radius: 4px; }
.av-projet-titre { color: #fff; text-transform: uppercase; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 800; margin-top: 12px; line-height: 1.1; }
.av-projet-chiffres { display: flex; gap: 34px; margin: 20px 0; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.av-projet-chiffres b { display: block; font-size: 1.9rem; font-weight: 800; color: var(--jaune); line-height: 1; }
.av-projet-chiffres span { font-size: .85rem; color: rgba(255,255,255,.72); }
body .av-projet-texte { color: rgba(255,255,255,.85); }
body .av-projet-appris { color: var(--turq); font-weight: 800; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; margin-top: 18px; }
.av-projet-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.av-projet-liste li { background: rgba(var(--turq-rgb), .22); border: 1px solid rgba(var(--turq-rgb), .5); color: #fff; padding: 6px 13px; border-radius: 999px; font-size: .86rem; font-weight: 600; }
.av-projet .card-link { color: var(--jaune); }

/* ---- Le résultat ---- */
.av-resultat { background: var(--sable-2); }
.av-resultat-grille { display: grid; grid-template-columns: .85fr 1.15fr; gap: 54px; align-items: start; }
.av-resultat-liste { display: grid; gap: 16px; font-size: clamp(1.05rem, 2.1vw, 1.4rem); font-weight: 600; color: var(--ink-soft); }
.av-resultat-liste li { position: relative; padding-left: 36px; }
.av-resultat-liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: 20px; height: 2px; background: var(--turq); }
.av-resultat-liste b { color: var(--nuit); font-weight: 800; }
.av-resultat-fort { color: var(--nuit); border-left: 3px solid var(--jaune); padding: 4px 0 4px 33px !important; margin-left: -3px; }
.av-resultat-fort::before { display: none; }
.av-resultat-fort b { color: var(--u-text); }

/* ---- Invitation finale ---- */
.av-fin-titre { max-width: 22ch; margin-inline: auto; }
body .av-fin-sous { font-size: clamp(1.15rem, 2.8vw, 1.7rem); font-weight: 700; color: #fff; margin-top: 10px; }

/* ---- Adaptations écran ---- */
@media (max-width: 1024px) {
  .av-hero-grille, .av-philo-grille, .av-resultat-grille { grid-template-columns: 1fr; gap: 40px; }
  .av-hero h1 { max-width: none; }
  .av-encart { margin-left: 0; }
  .av-projet { grid-template-columns: 1fr; }
  .av-projet-photo { max-height: 320px; }
}
@media (max-width: 900px) {
  .av-fil { grid-template-columns: 1fr; gap: 4px; padding: 22px; }
  .av-maillon { padding: 0; }
  .av-lien { width: 2px; height: 26px; margin: 4px 0 4px 22px; background: repeating-linear-gradient(180deg, var(--turq) 0 6px, transparent 6px 12px); }
  .av-lien::after { right: auto; left: -5px; top: auto; bottom: -1px; border-left-color: transparent; border-top-color: var(--turq); }
  .av-rang { grid-template-columns: 1fr; gap: 12px; }
  .av-fleche { display: none; }
  .av-frise { grid-template-columns: 1fr 1fr; gap: 34px 0; }
  .av-frise::before { display: none; }
  .av-orbite { aspect-ratio: auto; flex-direction: column; gap: 12px; margin-top: 34px; }
  .av-orbite::before { display: none; }
  .av-orbite-photo { width: 190px; }
  .av-mot { position: static; transform: none; }
  .av-etiquette { left: 8px; }
}
@media (max-width: 560px) {
  .av-frise { grid-template-columns: 1fr; }
  .av-bulle { flex: 1 1 100%; }
  .av-projet-corps { padding: 26px 22px 28px; }
  .av-projet-chiffres { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .av-bulle, .av-bulle:hover { transform: none; }
}


/* ============================================================
   ACADEMY — SECTION « UNE MAISON POUR GRANDIR AUTREMENT »
   La démonstration descend en s'affirmant : ce que ce n'est pas
   (en retrait, marqué d'un rond pointillé barré), ce que c'est
   (en grand, coché, « progressivement » passé au feutre jaune),
   les dix apprentissages posés dans un registre ancré, et la
   conviction qui ferme la section en socle bleu nuit.
   Tout est préfixé .am- : aucune règle existante n'est modifiée,
   ni les .av-* (academy-v2.html), ni les .ac-* de la charte.
   ============================================================ */
.am-maison {
  position: relative;
  /* L'arc pointillé déborde volontairement à droite. Sans overflow la page
     se laisserait faire défiler latéralement au-delà de 1180px, largeur à
     partir de laquelle la règle globale html,body{overflow-x:hidden} ne
     s'applique plus. */
  overflow: hidden;
  isolation: isolate;
  /* Le bouton « Découvrir l'Academy » du hero pointe ici : l'ancre ne doit
     pas atterrir sous le bandeau collant de 78px. */
  scroll-margin-top: 96px;
}
.am-maison > .container { position: relative; z-index: 1; }

/* Les motifs de fond ne vivent que dans les marges extérieures, et seulement
   quand ces marges existent réellement (conteneur 1180px + 24px de gouttière).
   En dessous, aucun décor absolu n'est affiché : rien ne peut croiser le texte.
   Le rythme de la section est porté par sa composition, pas par ces pictos. */
.am-maison > .am-arc, .am-maison > .doodle.doodle-chat { display: none; }
@media (min-width: 1380px) {
  .am-maison > .am-arc { display: block; width: 540px; height: 1000px; right: -480px; top: 40px; opacity: .45; }
  /* Le picto reprend le turquoise : le jaune de la charte est illisible sur le sable. */
  .am-maison > .doodle.doodle-chat { display: block; left: 18px; top: 44%; width: 88px; color: var(--turq); opacity: .5; }
}

/* ---- 1. L'énoncé : la négation en retrait, l'affirmation en grand ---- */
.am-tete { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 26px 58px; align-items: start; }
.am-tete > .reveal + .reveal { transition-delay: .12s; }
.am-maison .am-titre { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.1; max-width: 12em; }
/* Le fragment manuscrit est un inline-block : il ne se coupe pas entre deux
   lignes, mais son contenu peut s'enrouler. La largeur du titre ne descend
   jamais sous sa largeur naturelle (~10,5em), et l'interligne ouvert évite
   que deux lignes de Kaushan ne se chevauchent si le client rallonge le texte.
   Le turquoise profond --u-text remonte le contraste à 3,7:1 (AA grand texte)
   là où --turq plafonne à 2,7:1 sur le sable. */
.am-maison .am-titre .ac-script { font-size: 1.08em; line-height: 1.18; color: var(--u-text); }
.am-maison .am-tete .ac-hachures { width: 164px; }

.am-dire { display: grid; gap: 15px; padding-top: 4px; }
.am-dire p { position: relative; padding-left: 38px; }
.am-marque { position: absolute; left: 0; top: .3em; width: 21px; height: 21px; border-radius: 50%; }
.am-marque--non { border: 1.5px dashed rgba(37, 50, 65, .42); }
.am-marque--non::after { content: ""; position: absolute; left: 4px; top: 9px; width: 12px; height: 1.5px; background: var(--ink-soft); transform: rotate(-45deg); }
.am-non { font-size: clamp(1.02rem, 1.5vw, 1.1rem); line-height: 1.5; color: var(--ink-soft); }
.am-marque--oui { background: var(--turq); }
.am-marque--oui::after { content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.am-oui { margin-top: 10px; font-size: clamp(1.12rem, 1.8vw, 1.34rem); line-height: 1.5; font-weight: 500; color: var(--nuit); }
.am-oui b { font-weight: 800; }
/* Le mot pivot du discours client, passé au feutre jaune */
.am-cle { color: var(--nuit); background: linear-gradient(180deg, transparent 55%, rgba(var(--jaune-rgb), .62) 55%, rgba(var(--jaune-rgb), .62) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Le fil pointillé descend de l'énoncé vers le registre. Il est dans le flux
   et sans marge basse : sa pointe touche le panneau par construction, il n'y a
   aucun décalage à régler à la main et rien ne peut se désaligner. */
.am-fil { position: relative; display: block; width: 2px; height: 52px; margin: 34px 0 0 21px; transform-origin: top;
  background: repeating-linear-gradient(180deg, rgba(var(--turq-rgb), .75) 0 5px, transparent 5px 11px); }
.am-fil::after { content: ""; position: absolute; left: -5px; bottom: 0; width: 0; height: 0; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--jaune); }
.am-maison .am-fil.reveal:not(.visible) { opacity: 1; transform: scaleY(0); }

/* ---- 2. Le registre : dix lignes régulières, enfin ancrées ---- */
.am-registre { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 30px 34px 20px; }
/* Le liseré turquoise rime avec la pastille cochée de l'affirmation :
   les dix verbes sont la suite du « c'est », pas une colonne flottante. */
.am-registre::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--turq); }
.am-registre-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.am-maison .am-sous-titre { font-size: clamp(1.1rem, 2.1vw, 1.45rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; color: var(--nuit); }
.am-filet { flex: 1 1 60px; min-width: 40px; height: 2px; opacity: .85; background: repeating-linear-gradient(90deg, var(--turq) 0 6px, transparent 6px 13px); }
.am-repere { flex: none; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

/* Cinq rangées partagées par les deux colonnes : elles s'ouvrent et se ferment
   toujours sur la même ligne, même si un libellé passe sur deux lignes. */
.am-verbes { margin-top: 20px; display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: clamp(26px, 3.6vw, 56px); }
.am-verbes li { display: flex; align-items: baseline; gap: 14px; padding: 14px 2px 13px; border-top: 1px solid var(--line);
  font-size: clamp(.97rem, 1.35vw, 1.05rem); font-weight: 600; line-height: 1.35; color: var(--nuit); }
.am-verbes li:nth-child(5), .am-verbes li:last-child { border-bottom: 1px solid var(--line); }
.am-verbes li::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--turq); transform: translateY(-.34em); }
/* Le dernier apprentissage est le point d'arrivée : il passe au jaune. */
.am-verbes li:last-child { font-weight: 800; }
.am-verbes li:last-child::before { width: 26px; background: var(--jaune); }

/* ---- 3. Le socle : la conviction porte et ferme la section ---- */
.am-socle { margin-top: 42px; border-radius: 18px; padding: 34px 40px 36px;
  box-shadow: inset 5px 0 0 var(--jaune), var(--shadow-lg);
  display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr); gap: 18px 44px; align-items: start; }
/* L'étiquette jaune inclinée reste le signal d'ouverture de la section, une
   seule fois. Sur le bleu nuit la conviction prend un libellé typographique
   jaune (7,4:1) : plus de jaune sur jaune possible, et deux signes distincts. */
.am-maison .am-libelle { font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; line-height: 1.4; color: var(--jaune); }
/* Le semis de points passe dans le flux : il ne peut plus rien recouvrir, et il
   reste visible sur mobile là où tous les motifs absolus disparaissent. */
.am-maison .am-socle .ac-points { position: static; display: block; width: 118px; height: 54px; margin-top: 12px; opacity: .55; }
.am-maison .am-socle-texte { max-width: 62ch; font-size: clamp(1.1rem, 2vw, 1.36rem); line-height: 1.45; font-weight: 500; color: rgba(255, 255, 255, .9); }
.am-maison .am-socle-texte b { display: block; margin-top: 10px; font-weight: 800; color: var(--jaune); }

/* ---- Adaptations écran (les paliers du site : 1024, 900, 560) ---- */
@media (max-width: 1024px) {
  .am-tete { gap: 22px 40px; }
  .am-registre { padding: 28px 26px 18px; }
  .am-socle { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 16px 34px; padding: 30px 30px 32px; }
}
@media (max-width: 900px) {
  .am-tete { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .am-maison .am-titre { max-width: 16em; }
  .am-dire { max-width: 720px; }
  .am-fil { height: 44px; margin-top: 28px; }
  .am-registre { padding: 26px 24px 16px; }
  /* Une seule colonne : dix lignes toutes sur un seul niveau, aucune ligne
     orpheline, au prix d'une liste plus haute. La régularité prime. */
  .am-verbes { margin-top: 16px; grid-template-rows: none; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .am-verbes li { padding: 11px 2px 10px; }
  .am-verbes li:nth-child(5) { border-bottom: 0; }
  .am-socle { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 36px; }
}
@media (max-width: 560px) {
  .am-dire p { padding-left: 32px; }
  .am-marque { width: 19px; height: 19px; }
  .am-marque--non::after { left: 3.5px; top: 8px; width: 11px; }
  .am-marque--oui::after { left: 7px; top: 4px; }
  .am-registre { padding: 24px 20px 14px; border-radius: 14px; }
  .am-registre-tete { gap: 10px 14px; }
  .am-verbes li { padding: 11px 0 10px; gap: 11px; }
  .am-verbes li::before { width: 14px; }
  .am-verbes li:last-child::before { width: 20px; }
  .am-socle { padding: 26px 22px 28px; border-radius: 14px; }
  .am-maison .am-socle .ac-points { width: 104px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .am-maison .am-fil.reveal:not(.visible) { transform: none; }
}
/* À l'impression, le bleu nuit est ramené au blanc par la feuille existante :
   le libellé et la phrase de chute, qui portent une couleur explicite,
   doivent repasser en noir. */
@media print {
  .am-maison .am-fil { display: none !important; }
  .am-maison .am-registre, .am-maison .am-socle { box-shadow: none !important; border: 1px solid #ccc !important; }
  .am-maison .am-libelle, .am-maison .am-socle-texte b { color: #000 !important; }
  .am-maison .am-cle { background: none !important; }
}


/* ============================================================
   COUCHE D'ANIMATION — « le site s'écrit, puis il respire »
   Trois familles :
     1. les entrées en scène : tout arrive comme si une main
        l'écrivait — mot à mot, trait par trait, ligne à ligne ;
     2. la vie ambiante : une fois posé, rien n'est tout à fait
        immobile — motifs qui dérivent, liserés qui balaient ;
     3. la réponse au doigt : cartes qui s'inclinent, boutons
        aimantés, soulignements qui se tirent.

   Règle de sûreté tenue partout : aucun état caché n'est écrit
   dans une règle de base, uniquement dans une image-clé. Si le
   JavaScript ne tourne pas (pas de classe .mo sur <html>) ou si
   le visiteur demande moins d'animation (le garde-fou global
   neutralise animation et transition), la page s'affiche
   entière et lisible, sans une seule ligne à défaire.
   ============================================================ */
:root {
  --mo-sortie: cubic-bezier(.2, .7, .2, 1);
  --mo-rebond: cubic-bezier(.2, .9, .3, 1.3);
  --mo-etat: running;          /* passe à « paused » hors écran */
}

/* ---------- 1. LES ENTRÉES EN SCÈNE ---------- */

/* Les titres se composent mot à mot. Le mot est un masque, le
   span intérieur monte : rien ne dépasse, rien ne décale. */
html.mo .mo-mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
html.mo .mo-mot > span { display: inline-block; animation: mo-monte-mot .85s var(--mo-sortie) both paused; animation-delay: calc(var(--i, 0) * 62ms); }
html.mo .mo-mots.mo-vu .mo-mot > span { animation-play-state: var(--mo-etat); }
@keyframes mo-monte-mot { from { transform: translateY(104%) rotate(3deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Le mot manuscrit ne monte pas : il s'écrit de gauche à droite.
   On n'y touche pas au transform, sa rotation de charte est
   portée par .ac-script et doit survivre. */
html.mo .mo-mots .ac-script, html.mo .mo-mots .script { animation: mo-ecrit 1.1s var(--mo-sortie) both paused; animation-delay: calc(var(--i, 0) * 62ms + 120ms); }
html.mo .mo-mots.mo-vu .ac-script, html.mo .mo-mots.mo-vu .script { animation-play-state: var(--mo-etat); }
@keyframes mo-ecrit { from { clip-path: inset(-30% 102% -30% -10%); opacity: .2; } to { clip-path: inset(-30% -10% -30% -10%); opacity: 1; } }

/* L'étiquette inclinée se pose comme un tampon encreur, puis
   gondole très légèrement, comme un papier collé à la main. */
html.mo .eyebrow { animation: mo-tampon .7s var(--mo-rebond) both paused; }
html.mo .eyebrow.mo-vu { animation-play-state: var(--mo-etat); }
@keyframes mo-tampon {
  0% { opacity: 0; transform: scale(1.35) rotate(-4deg); }
  62% { opacity: 1; transform: scale(.97) rotate(.6deg); }
  100% { opacity: 1; transform: none; }
}

/* Les séries — listes, lignes de tableau, pastilles — se
   remplissent une par une plutôt que d'un bloc. */
html.mo .mo-serie > * { animation: mo-entre-ligne .6s var(--mo-sortie) both paused; animation-delay: calc(var(--i, 0) * 58ms); }
html.mo .mo-serie.mo-vu > * { animation-play-state: var(--mo-etat); }
@keyframes mo-entre-ligne { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* Les pastilles et étiquettes se tamponnent, elles ne glissent pas. */
html.mo .mo-serie.mo-pastilles > * { animation-name: mo-pose-pastille; animation-timing-function: var(--mo-rebond); }
@keyframes mo-pose-pastille { from { opacity: 0; transform: scale(.72) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* La cascade des grilles ne s'arrête plus au quatrième enfant :
   l'index est posé par le script, la règle vaut pour dix comme
   pour trois. (transition-delay est une propriété simple : elle
   ne touche pas à la liste de transitions de .reveal.) */
html.mo .reveal { transition-delay: calc(var(--i, 0) * 85ms); }

/* Le surligneur jaune passe sous les mots forts. */
html.mo .mo-surligne { background-image: linear-gradient(rgba(var(--jaune-rgb), .55), rgba(var(--jaune-rgb), .55));
  background-repeat: no-repeat; background-position: 0 88%; background-size: 0 .42em; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  animation: mo-surligneur .75s var(--mo-sortie) both paused; animation-delay: .35s; }
html.mo .mo-surligne.mo-vu { animation-play-state: var(--mo-etat); }
@keyframes mo-surligneur { from { background-size: 0 .42em; } to { background-size: 100% .42em; } }

/* La phrase de signature se découvre sous la plume. */
html.mo .ac-signature { animation: mo-plume 1.25s var(--mo-sortie) both paused; }
html.mo .ac-signature.mo-vu { animation-play-state: var(--mo-etat); }
@keyframes mo-plume { from { clip-path: inset(-40% 100% -40% -2%); } to { clip-path: inset(-40% -2% -40% -2%); } }

/* Les pictos au trait des cartes arrivent de travers et se
   redressent — le tracé SVG existant continue de se dessiner. */
html.mo .card .icon, html.mo .pole-card .icon { animation: mo-redresse .7s var(--mo-rebond) both paused; animation-delay: .12s; }
html.mo .reveal.visible .icon, html.mo .visible .card .icon { animation-play-state: var(--mo-etat); }
@keyframes mo-redresse { from { opacity: 0; transform: rotate(-16deg) scale(.72); } to { opacity: 1; transform: none; } }

/* ---------- 2. LA VIE AMBIANTE ---------- */

/* L'étiquette respire une fois posée. */
html.mo .eyebrow.mo-vu { animation: mo-tampon .7s var(--mo-rebond) both, mo-gondole 9s ease-in-out 1.2s infinite; animation-play-state: var(--mo-etat); }
@keyframes mo-gondole { 0%, 100% { transform: rotate(-.5deg) translateY(0); } 50% { transform: rotate(.45deg) translateY(-2px); } }

/* Le liseré de couleur des cartes de pôle balaie vers le jaune. */
html.mo .pole-card::before { background: linear-gradient(90deg, var(--u) 0 30%, var(--jaune) 45%, var(--u) 60% 100%); background-size: 260% 100%;
  animation: mo-balaie 7s ease-in-out infinite; animation-play-state: var(--mo-etat); }
html.mo .pole-card:nth-child(2)::before { animation-delay: 2.3s; }
html.mo .pole-card:nth-child(3)::before { animation-delay: 4.6s; }
@keyframes mo-balaie { 0%, 100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }

/* Un halo pulse derrière chaque picto de carte. */
html.mo .card .icon { position: relative; }
html.mo .card .icon svg, html.mo .pole-card .icon svg { position: relative; z-index: 1; }
html.mo .card .icon::after { content: ""; position: absolute; inset: -22%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(var(--u-rgb), .32), transparent 68%);
  animation: mo-respire 5.4s ease-in-out infinite; animation-play-state: var(--mo-etat); }
html.mo .grid-3 > *:nth-child(even) .icon::after, html.mo .grid-4 > *:nth-child(even) .icon::after { animation-delay: 1.7s; }
@keyframes mo-respire { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }

/* Les pastilles d'univers battent doucement, l'une après l'autre.
   (Échelle seulement : un flou animé se re-rastérise à chaque image.) */
html.mo .main-nav .nav-dot { animation: mo-bat 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 260ms); }
@keyframes mo-bat { 0%, 82%, 100% { transform: scale(1); } 88% { transform: scale(1.5); } }

/* Un anneau s'échappe du bouton WhatsApp. */
html.mo .wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0;
  animation: mo-onde 2.9s ease-out infinite; animation-play-state: var(--mo-etat); pointer-events: none; }
@keyframes mo-onde { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.75); } }

/* Les hachures continuent de courir une fois déployées. */
html.mo .ac-hachures.visible, html.mo .hachures.visible { animation: mo-court 2.4s linear .9s infinite; animation-play-state: var(--mo-etat); }
@keyframes mo-court { from { background-position: 0 0; } to { background-position: 12px 0; } }

/* ---------- 3. LE SCROLL PILOTE LES DÉCORS ---------- */

/* La propriété « translate » est indépendante de « transform » :
   la parallaxe se superpose aux flottements existants des
   doodles et du globe sans jamais les écraser. */
html.mo .ac-croix, html.mo .ac-points, html.mo .ac-globe, html.mo .doodle { translate: 0 var(--mo-y, 0px); }
html.mo .page-hero > .container { opacity: var(--mo-hero-o, 1); scale: var(--mo-hero-s, 1); }

/* La barre de lecture prend la couleur de l'univers et une tête. */
html.mo .progression { height: 4px; background: linear-gradient(90deg, var(--turq), var(--jaune)); }
html.mo .progression::after { content: ""; position: absolute; right: 0; top: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--jaune); box-shadow: 0 0 10px rgba(var(--jaune-rgb), .9); }

/* ---------- 4. LA RÉPONSE AU DOIGT ---------- */

/* La liste de transitions est réécrite EN ENTIER : opacity et
   transform y restent, sans quoi les cartes qui portent aussi
   .reveal cesseraient d'apparaître en fondu sur tout le site. */
html.mo .mo-carte {
  transition: opacity .75s var(--mo-sortie), transform .5s var(--mo-sortie), box-shadow .4s ease;
}
html.mo .grid-2, html.mo .grid-3, html.mo .grid-4, html.mo .pricing-grid, html.mo .steps { perspective: 1100px; }
@media (hover: hover) {
  html.mo .mo-carte:hover {
    transform: perspective(1100px) rotateX(var(--mo-rx, 0deg)) rotateY(var(--mo-ry, 0deg)) translateY(-7px);
  }
}

/* Un halo doux suit la main à l'intérieur de la carte. */
html.mo .mo-carte { position: relative; overflow: hidden; }
html.mo .mo-carte > * { position: relative; z-index: 1; }
html.mo .mo-carte::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; z-index: 0; pointer-events: none;
  left: var(--mo-mx, 50%); top: var(--mo-my, 50%); margin: -130px 0 0 -130px;
  background: radial-gradient(circle, rgba(var(--u-rgb), .16), transparent 70%);
  opacity: 0; transition: opacity .35s ease; }
@media (hover: hover) { html.mo .mo-carte:hover::after { opacity: 1; } }

/* Les boutons sont aimantés : « translate » ne touche pas au
   transform du survol déjà défini par la charte. */
html.mo .btn { translate: var(--mo-ax, 0px) var(--mo-ay, 0px);
  transition: opacity .75s var(--mo-sortie), transform .2s var(--mo-sortie), translate .35s var(--mo-sortie), box-shadow .25s ease, background .2s ease, color .2s ease; }

/* Tout ce qu'on presse s'enfonce comme un tampon. */
html.mo .mo-presse { transform: scale(.96) !important; transition-duration: .09s !important; }

/* Le lien de carte tire son soulignement. */
html.mo .card-link { position: relative; }
html.mo .card-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .38s var(--mo-sortie); }
html.mo .card-link:hover::after, html.mo .card-link:focus-visible::after, html.mo .card:hover .card-link::after { transform: scaleX(1); }

/* Les lignes du tableau des horaires s'allument au passage. */
html.mo .hours-table tbody tr, html.mo .hours-table tr { transition: background-color .28s ease; }
html.mo .hours-table tr:hover td { background: rgba(var(--u-rgb), .09); }

/* Les coches sautent, la ligne avance d'un pas. */
html.mo .check-list li, html.mo .ac-coches li { transition: transform .3s var(--mo-sortie); }
html.mo .check-list li:hover, html.mo .ac-coches li:hover { transform: translateX(6px); }
html.mo .check-list li::before { transition: transform .35s var(--mo-rebond); }
html.mo .check-list li:hover::before { transform: scale(1.45) rotate(-8deg); }

/* Les champs s'allument à la saisie. */
html.mo .form-card input:focus-visible, html.mo .form-card select:focus-visible, html.mo .form-card textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(var(--u-rgb), .18); }

/* Les pastilles de la liste des verbes se soulèvent (elles ne
   sont pas cliquables : le mouvement reste minuscule et sans
   changement de couleur, pour ne rien promettre). */
html.mo .av-tag, html.mo .av-verbes li { transition: transform .3s var(--mo-sortie); }
@media (hover: hover) {
  html.mo .av-tag:hover, html.mo .av-verbes li:hover { transform: translateY(-3px); }
}

/* ---------- Replis ---------- */
/* Écran étroit : on garde les entrées et les tampons, on coupe
   les boucles permanentes les plus coûteuses. */
@media (max-width: 900px) {
  html.mo .card .icon::after, html.mo .pole-card::before, html.mo .main-nav .nav-dot { animation: none; }
  html.mo .mo-carte::after { display: none; }
}
/* Machine modeste ou économie de données : plus aucune boucle. */
html.mo.mo-sobre .card .icon::after, html.mo.mo-sobre .pole-card::before,
html.mo.mo-sobre .ac-hachures.visible, html.mo.mo-sobre .hachures.visible,
html.mo.mo-sobre .main-nav .nav-dot, html.mo.mo-sobre .wa::after { animation: none; }
html.mo.mo-sobre .eyebrow.mo-vu { animation: mo-tampon .7s var(--mo-rebond) both; }

/* À l'impression, aucune image-clé ne doit rester figée sur sa
   première étape : tout ce qui s'anime doit s'imprimer entier. */
@media print {
  html.mo .mo-mot > span, html.mo .mo-mots .ac-script, html.mo .mo-mots .script,
  html.mo .eyebrow, html.mo .mo-serie > *, html.mo .card .icon, html.mo .pole-card .icon,
  html.mo .ac-signature, html.mo .mo-surligne { animation: none !important; }
  html.mo .mo-surligne { background-image: none !important; }
  html.mo .progression, html.mo .mo-carte::after, html.mo .wa::after { display: none !important; }
}
/* Une ponctuation recollee garde son blanc, mais plus son point de coupe. */
html.mo .mo-ponct { margin-left: .16em; }


/* ============================================================
   CARTE À PHOTO — un univers de découverte prend le visage de
   son métier. La photo remplit la carte (::before), un voile
   bleu nuit descend par-dessus (::after) pour que le texte reste
   lisible quelle que soit l'image, et le titre passe en blanc.

   L'adresse de la photo est écrite ICI, dans la feuille de style,
   et non dans une variable posée sur la balise : un url() passé
   par variable est résolu depuis assets/ et donnerait
   assets/assets/… (même piège que les motifs, voir build.py).
   Ajouter un univers = une ligne dans la liste ci-dessous.
   ============================================================ */
.carte-photo { position: relative; overflow: hidden; isolation: isolate; border-color: transparent; }
.carte-photo::before, .carte-photo::after { content: ""; position: absolute; inset: 0; z-index: 0; }
/* La photo, cadrée sur le sujet, avec un lent rapprochement au survol. */
.carte-photo::before {
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* Le voile : léger en haut, où l'on veut voir la photo ; dense là où
   le texte commence. Mesuré sur les pixels réels : 6,1:1 au pire
   (le titre), contre 4,5:1 exigé par le niveau AA. */
.carte-photo::after {
  background: linear-gradient(180deg, rgba(34, 49, 64, .28) 0%, rgba(34, 49, 64, .82) 40%, rgba(34, 49, 64, .88) 100%);
}
.carte-photo > * { position: relative; z-index: 1; }
@media (hover: hover) { .carte-photo:hover::before { transform: scale(1.09); } }

/* Les photos, une par univers de découverte. */
.carte-photo--artisanat::before { background-image: url(univers/artisanat.jpg); }
/* photos Unsplash (licence gratuite), crédits dans _src/credits-photos.txt */
.carte-photo--media::before { background-image: url(univers/media.jpg); }
.carte-photo--tech::before { background-image: url(univers/tech.jpg); }
.carte-photo--mode::before { background-image: url(univers/mode.jpg); }
.carte-photo--expression::before { background-image: url(univers/expression.jpg); }
.carte-photo--culture::before { background-image: url(univers/culture.jpg); }

/* Le texte repasse en clair — chaque couleur est réécrite, on ne
   compte pas sur l'héritage : ces cartes vivent sur fond clair. */
.carte-photo h3 { color: #fff; }
.carte-photo p { color: rgba(255, 255, 255, .88); }
.carte-photo .note { color: rgba(255, 255, 255, .74); }
.carte-photo .card-link { color: var(--jaune); }
/* Le picto devient un carreau translucide, comme posé sur la photo. */
.carte-photo .icon { background: rgba(255, 255, 255, .16); color: #fff; }
.carte-photo .icon::after { display: none; }        /* pas de halo turquoise sur une photo */
/* Les mots-clés deviennent des jetons de verre. */
.carte-photo .av-tag { background: rgba(255, 255, 255, .17); color: #fff; }
.carte-photo .card-tag { background: rgba(255, 255, 255, .2); color: #fff; }
/* Le halo qui suit le curseur n'a plus lieu d'être : la photo l'occupe. */
html.mo .carte-photo.mo-carte::after { background: linear-gradient(180deg, rgba(34, 49, 64, .28) 0%, rgba(34, 49, 64, .82) 40%, rgba(34, 49, 64, .88) 100%); opacity: 1; width: auto; height: auto; margin: 0; left: 0; top: 0; border-radius: 0; }


/* ============================================================
   DEUXIÈME VAGUE DE MOUVEMENT — l'effet « waouh »
   Ce qui manquait à la première : le passage d'une page à
   l'autre, l'arrivée en volume des cartes, le rideau des
   sections sombres, la photo qui vit, le remplissage des
   boutons et la profondeur du héros sous le curseur.
   Mêmes règles de sûreté : aucune propriété de mise en page
   animée, aucun état caché hors image-clé, tout se neutralise
   sous prefers-reduced-motion.
   ============================================================ */

/* ---- Le passage d'une page à l'autre : RETIRÉ -------------
   Essayé le 2026-09-10 avec @view-transition { navigation: auto }
   et un en-tête nommé. Résultat en production : le contenu de la
   page disparaissait sous le bandeau — l'instantané « root »
   (tout sauf l'en-tête nommé) restait sur la première étape de
   son image-clé, à opacité 0, quand la transition n'allait pas
   à son terme. Un fondu qui peut vider la page n'a rien à faire
   sur un site en ligne. À ne pas remettre sans une reprise
   complète : instantanés nommés section par section, et jamais
   d'image-clé qui parte d'une opacité nulle sur la racine. */

/* ---- Les cartes arrivent en volume ------------------------
   Elles ne montent plus à plat : elles basculent depuis le bas,
   comme une carte qu'on redresse sur la table. */
html.mo .mo-carte { transform-origin: 50% 100%; }
html.mo .grid-2 > .mo-carte.reveal:not(.visible),
html.mo .grid-3 > .mo-carte.reveal:not(.visible),
html.mo .grid-4 > .mo-carte.reveal:not(.visible) {
  transform: perspective(1100px) rotateX(9deg) translateY(38px) scale(.97);
}

/* ---- Le rideau des sections sombres -----------------------
   Une section bleu nuit ne se contente pas d'apparaître : elle
   se déroule du haut vers le bas. clip-path ne provoque aucun
   recalcul de mise en page. */
/* La classe .mo-rideau est posee par le script AU MOMENT ou la section
   entre a l'ecran : avant, la section n'a aucun clip-path du tout.
   Une animation en pause avec un remplissage « both » laisserait la
   section decoupee a zero si le declencheur n'arrivait jamais — c'est
   exactement ce qui est arrive au heros, que le script n'observe pas. */
html.mo section.sombre.mo-rideau { animation: mo-rideau .95s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mo-rideau { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- La photo des cartes d'univers ne s'arrête jamais ------
   Un lent travelling, très ample, très lent : on ne le voit pas
   bouger, on sent que l'image est vivante. */
.carte-photo::before { animation: mo-travelling 26s ease-in-out infinite alternate; animation-play-state: var(--mo-etat, running); }
@keyframes mo-travelling {
  from { transform: scale(1.03) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -2%); }
}
/* Au survol on ne met pas le travelling en pause — une animation
   qui tourne garde la main sur transform, la valeur de survol serait
   ignoree. On compose avec la propriete independante « scale ». */
@media (hover: hover) {
  .carte-photo::before { scale: 1; transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
  .carte-photo:hover::before { scale: 1.06; }
}

/* ---- Les boutons se remplissent ---------------------------
   ::after porte déjà le reflet de la charte, on prend ::before :
   une nappe monte du bas au survol et au focus clavier. */
html.mo .btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  transform: translateY(101%); transition: transform .42s cubic-bezier(.2, .7, .2, 1);
}
html.mo .btn:hover::before, html.mo .btn:focus-visible::before { transform: none; }
html.mo .btn > * { position: relative; z-index: 1; }
/* Sur les boutons clairs, la nappe doit foncer et non éclaircir. */
html.mo .btn-jaune::before, html.mo .btn-light::before {
  background: linear-gradient(0deg, rgba(34, 49, 64, .16), rgba(34, 49, 64, 0));
}

/* ---- La profondeur du héros sous le curseur ---------------
   Les décors bougent déjà au défilement (--mo-y) ; le curseur
   ajoute la composante horizontale sur la même propriété. */
html.mo .ac-croix, html.mo .ac-points, html.mo .ac-globe, html.mo .doodle {
  translate: var(--mo-x, 0px) var(--mo-y, 0px);
}

/* ---- La bande de mots ------------------------------------- */
body[data-univers="academy"] .defile { background: var(--nuit); border-color: rgba(255, 255, 255, .12); }
body[data-univers="academy"] .defile > .defile-piste > span { color: rgba(255, 255, 255, .92); }
body[data-univers="academy"] .defile > .defile-piste i { background: var(--jaune); }

/* ---- Replis ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.mo section.sombre.mo-rideau { clip-path: none !important; animation: none !important; }
  html.mo .grid-2 > .mo-carte.reveal:not(.visible),
  html.mo .grid-3 > .mo-carte.reveal:not(.visible),
  html.mo .grid-4 > .mo-carte.reveal:not(.visible) { transform: none !important; }
}
@media print {
  html.mo section.sombre.mo-rideau { animation: none !important; clip-path: none !important; }
  .carte-photo::before { animation: none !important; }
}

/* ============================================================
   La salle de pause (jeux.html — page cachée, hors menu)
   Deux jeux au trait de la charte : plateau sable, décor
   pointillé, le point orange du logo en personnage.
   ============================================================ */
.jx-onglets { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.jx-onglet {
  border: 1px solid var(--line); background: var(--white); color: var(--ink-soft);
  padding: 10px 20px; border-radius: 999px; cursor: pointer; font-weight: 700;
  letter-spacing: .02em; transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.jx-onglet:hover { border-color: var(--bleu); color: var(--bleu); }
.jx-onglet.active { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.jx-jeu[hidden] { display: none; }

.jx-bandeau {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.jx-bandeau-mid { flex: 1 1 260px; text-align: center; }
.jx-bandeau-fin { text-align: right; }
.jx-score {
  font-size: 34px; font-weight: 900; line-height: 1; color: var(--bleu);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.jx-score--best { color: var(--orange); }

.jx-scene {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-soft); box-shadow: var(--shadow);
}
.jx-scene canvas { display: block; width: 100%; height: auto; touch-action: none; }

.jx-over {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 12px; padding: 24px; text-align: center;
  background: rgba(34, 49, 64, .88); backdrop-filter: blur(2px);
}
.jx-over[hidden] { display: none; }
.jx-over h3 { color: #fff; font-size: 26px; text-transform: uppercase; letter-spacing: -.01em; }
.jx-over p { color: rgba(255, 255, 255, .82); max-width: 34ch; }

.jx-pad { display: none; }
.jx-touche {
  border: 1px solid var(--line); background: var(--white); color: var(--bleu);
  width: 68px; height: 58px; border-radius: 12px; font-size: 22px; font-weight: 800;
  cursor: pointer; box-shadow: var(--shadow); user-select: none; touch-action: manipulation;
}
.jx-touche:active { background: var(--bleu); color: #fff; transform: translateY(1px); }
.jx-touche--large { width: auto; padding: 0 24px; font-size: 16px; }
.jx-aide { margin-top: 14px; text-align: center; }

@media (hover: none), (max-width: 760px) {
  /* une croix directionnelle, comme sur une manette */
  .jx-pad { display: grid; grid-template-columns: repeat(3, 68px); gap: 8px; justify-content: center; margin-top: 18px; }
  .jx-touche[data-dir="haut"]   { grid-area: 1 / 2; }
  .jx-touche[data-dir="gauche"] { grid-area: 2 / 1; }
  .jx-touche[data-dir="bas"]    { grid-area: 2 / 2; }
  .jx-touche[data-dir="droite"] { grid-area: 2 / 3; }
  .jx-pad--course { grid-template-columns: auto auto; }
  .jx-aide { display: none; }
  .jx-score { font-size: 26px; }
}


/* ============================================================
   LE PASS ACADEMY — la section devient un objet
   À gauche, ce que le Pass ouvre : un registre réglé, une ligne
   par usage, au lieu de onze pastilles qui s'enroulent.
   À droite, un laissez-passer : bandeau nuit, perforation, les
   deux formules côte à côte et le tampon « 1 mois offert ».
   ============================================================ */
.pa-section { position: relative; overflow: hidden; isolation: isolate; }
.pa-section > .container { position: relative; z-index: 1; }
.pa-section > .ac-croix { opacity: .5; }
.pa-grille { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 30px 44px; align-items: start; }

/* ---- Le registre ---- */
.pa-registre { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--turq);
  border-radius: 16px; padding: 28px 30px 24px; box-shadow: var(--shadow); }
.pa-registre-tete { display: flex; align-items: center; gap: 16px; }
.pa-registre-tete h3 { flex: none; text-transform: uppercase; font-size: 1.05rem; letter-spacing: -.01em; }
.pa-filet { flex: 1 1 40px; min-width: 24px; height: 2px; opacity: .85;
  background: repeating-linear-gradient(90deg, var(--turq) 0 6px, transparent 6px 13px); }
.pa-repere { flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

.pa-inclus { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
.pa-inclus li { position: relative; padding: 11px 0 11px 26px; font-size: .95rem; font-weight: 700; color: var(--nuit);
  border-bottom: 1px solid var(--line); }
.pa-inclus li:last-child { border-bottom: 0; }
/* Sur deux colonnes, la dernière rangée peut compter deux lignes : aucune
   des deux ne porte de filet. */
@media (min-width: 901px) { .pa-inclus li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
/* La coche est dessinée, pas écrite : deux traits, comme au crayon. */
.pa-inclus li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 12px; height: 7px;
  border-left: 2px solid var(--turq); border-bottom: 2px solid var(--turq); transform: rotate(-45deg); }
.pa-inclus li:nth-child(even)::before { border-color: var(--jaune); }
.pa-note { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: .9rem; color: var(--ink-soft); }

/* ---- Le laissez-passer ---- */
.pa-billet { position: relative; overflow: hidden; border-radius: 18px; color: #fff; padding: 30px 34px 30px;
  background: radial-gradient(90% 70% at 100% 0%, rgba(var(--turq-rgb), .5), transparent 62%),
              linear-gradient(160deg, #2b3a49 0%, var(--nuit) 55%, #1b2733 100%);
  box-shadow: inset 6px 0 0 var(--jaune), var(--shadow-lg); }
.pa-billet .ac-points { top: auto; bottom: 18px; right: 22px; left: auto; width: 96px; height: 44px; opacity: .45; --pt: var(--jaune); }

.pa-marque { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.pa-titre { display: block; margin-top: 8px; font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.pa-sous { display: block; margin-top: 8px; font-size: .88rem; color: rgba(255, 255, 255, .74); }

/* La perforation : un trait pointillé et deux encoches qui mordent
   dans le bord, à la couleur du fond de section. */
.pa-perfo { display: block; position: relative; height: 1px; margin: 24px -34px 24px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 6px, transparent 6px 13px); }
.pa-perfo::before, .pa-perfo::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px;
  border-radius: 50%; background: var(--bg-soft); transform: translateY(-50%); }
.pa-perfo::before { left: -11px; }
.pa-perfo::after { right: -11px; }

.pa-tarifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.pa-tarif { position: relative; }
.pa-tarif--an { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .18); }
.pa-formule { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--jaune); }
.pa-prix { margin: 8px 0 0; line-height: 1; font-variant-numeric: tabular-nums; }
.pa-prix b { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; }
.pa-prix small { font-size: .82rem; font-weight: 500; color: rgba(255, 255, 255, .72); white-space: nowrap; }
.pa-detail { display: block; margin-top: 8px; font-size: .82rem; color: rgba(255, 255, 255, .62); }
/* Le tampon, incliné comme celui du héros. */
.pa-offert { display: inline-block; margin-top: 12px; padding: 5px 12px 4px; border: 2px dashed var(--jaune); border-radius: 8px;
  color: var(--jaune); font-family: "Kaushan Script", cursive; font-size: 1.02rem; line-height: 1; transform: rotate(-4deg); }

.pa-cta { margin-top: 26px; width: 100%; justify-content: center; }
.pa-pied { margin-top: 16px; font-size: .82rem; color: rgba(255, 255, 255, .6); max-width: 40ch; }

/* ---- Écrans ---- */
@media (max-width: 1024px) {
  .pa-grille { gap: 26px 32px; }
  .pa-registre { padding: 24px 24px 20px; }
  .pa-billet { padding: 26px 26px 26px; }
  .pa-perfo { margin-left: -26px; margin-right: -26px; }
}
@media (max-width: 900px) {
  .pa-grille { grid-template-columns: minmax(0, 1fr); }
  .pa-inclus { grid-template-columns: minmax(0, 1fr); }
  .pa-inclus li { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .pa-tarifs { grid-template-columns: minmax(0, 1fr); }
  .pa-tarif--an { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
}
@media print {
  .pa-billet { background: #fff !important; color: #000 !important; box-shadow: none !important; border: 1px solid #ccc !important; }
  .pa-billet * { color: #000 !important; }
  .pa-perfo::before, .pa-perfo::after { display: none; }
}


/* ============================================================
   ENCART — une phrase forte posée sur le bleu nuit.
   Remplace l'usage de .av-encart hors de la page academy-v2 :
   ce composant-là porte un margin-top de -46px, fait pour
   chevaucher une photo, et il recouvrait le texte partout où
   il servait d'encadré ordinaire.
   ============================================================ */
.encart { position: relative; margin: 32px 0 0; background: var(--nuit); color: #fff; border-radius: 14px;
  padding: 24px 28px; box-shadow: inset 5px 0 0 var(--jaune), var(--shadow-lg); font-size: 1.05rem; }
body .encart p { color: rgba(255, 255, 255, .86); }
.encart b { color: var(--jaune); font-weight: 800; }
.encart .eyebrow { background: var(--jaune); color: var(--nuit); }
@media (max-width: 640px) { .encart { padding: 20px 22px; border-radius: 12px; } }


/* ============================================================
   UNE LIBERTÉ DANS UN CADRE — la section prend la forme de son
   propre mot. Les cinq principes se placent sur le pourtour et
   la posture de l'équipe se tient au milieu, entourée par eux.
   Chaque principe est marqué par deux équerres tracées, pas par
   un filet de côté : c'est le vocabulaire du cadre, et ça le
   distingue des cartes employées ailleurs sur la page.
   ============================================================ */
.cd-section { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #fbfaf8 0%, var(--bg-soft) 60%, rgba(var(--turq-rgb), .07) 100%); }
.cd-section > .container { position: relative; z-index: 1; }
.cd-section > .ac-croix { opacity: .45; }

/* Les six cellules font la même taille : c'est ce qui fait lire un
   cadre plutôt qu'une grille de cartes. Le texte se centre donc
   verticalement, sinon les principes courts flotteraient en haut
   d'une boîte trop haute. */
.cd-cadre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; }

/* ---- Un principe ---- */
.cd-principe { position: relative; background: #fff; border-radius: 14px; padding: 26px 30px 24px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: center; }
/* Les deux équerres : haut-gauche et bas-droite. Elles ne se ferment
   jamais tout à fait — un cadre qui laisse passer. */
.cd-principe::before, .cd-principe::after { content: ""; position: absolute; width: 26px; height: 26px; }
.cd-principe::before { top: 12px; left: 12px; border-top: 2px solid var(--c, var(--turq)); border-left: 2px solid var(--c, var(--turq)); border-radius: 6px 0 0 0; }
.cd-principe::after { bottom: 12px; right: 12px; border-bottom: 2px solid var(--c, var(--turq)); border-right: 2px solid var(--c, var(--turq)); border-radius: 0 0 6px 0; }
.cd-principe:nth-child(2), .cd-principe:nth-child(4) { --c: var(--jaune); }
.cd-principe h3 { font-size: 1.08rem; text-transform: uppercase; letter-spacing: -.01em; }
.cd-principe p { margin-top: 10px; color: var(--ink-soft); font-size: .95rem; }
/* La confiance est celle qui ouvre les autres : elle porte le fond sable. */
.cd-principe--cle { background: var(--sable); }
.cd-principe--cle p { color: #4a5461; }

/* ---- Le centre ---- */
.cd-centre { grid-column: 2; grid-row: 2; position: relative; overflow: hidden;
  border-radius: 14px; padding: 28px 30px; color: #fff;
  background: radial-gradient(85% 70% at 100% 0%, rgba(var(--turq-rgb), .45), transparent 60%),
              linear-gradient(160deg, #2b3a49, var(--nuit) 60%, #1b2733);
  box-shadow: var(--shadow-lg); }
.cd-principe:nth-child(5) { grid-column: 3; grid-row: 2; }
.cd-libelle { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--jaune); }
.cd-phrase { margin-top: 12px; font-size: 1.06rem; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.cd-phrase b { color: var(--jaune); font-weight: 800; }
.cd-equipe { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .26);
  font-size: .9rem; color: rgba(255, 255, 255, .7); }

/* ---- Écrans ---- */
@media (max-width: 900px) {
  .cd-cadre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Le placement explicite du bureau n'a plus de sens : on laisse
     couler, et la posture ferme la série sur toute la largeur. */
  .cd-centre, .cd-principe:nth-child(5) { grid-column: auto; grid-row: auto; }
  .cd-centre { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  /* Une colonne : chaque bloc reprend sa hauteur naturelle. */
  .cd-cadre { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 16px; }
  .cd-principe { padding: 24px 22px 22px; }
}


/* ============================================================
   UNE MAISON QUI VIT AVEC LES JEUNES — le mur de propositions
   Les huit idées ne sont plus des pastilles alignées au centre :
   ce sont des fiches de papier épinglées, légèrement de travers,
   comme sur un vrai mur. Le propos passe à gauche, la chute se
   pose sur un filet — plus rien n'est centré, plus rien ne flotte.
   ============================================================ */
.ct-section .container { position: relative; z-index: 1; }

.ct-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; }
.ct-tete .lead { max-width: 52ch; }
.ct-appel { align-self: end; margin-bottom: 4px; font-size: .72rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--jaune); white-space: nowrap; }
.ct-appel::before { content: ""; display: inline-block; width: 26px; height: 2px; vertical-align: middle; margin-right: 12px;
  background: repeating-linear-gradient(90deg, var(--jaune) 0 5px, transparent 5px 10px); }

/* ---- Le mur ---- */
.ct-mur { list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 20px; }
.ct-fiche { position: relative; background: var(--sable); color: var(--nuit); border-radius: 4px;
  padding: 26px 18px 20px; text-align: center; font-weight: 700; font-size: .96rem; line-height: 1.35;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .28);
  rotate: var(--r, -1deg); transition: rotate .35s cubic-bezier(.2, .7, .2, 1), translate .35s cubic-bezier(.2, .7, .2, 1); }
/* Chaque fiche penche différemment : un mur, pas un tableau. */
.ct-fiche:nth-child(2)  { --r: 1.2deg; }
.ct-fiche:nth-child(3)  { --r: -.6deg; }
.ct-fiche:nth-child(4)  { --r: 1.6deg; }
.ct-fiche:nth-child(5)  { --r: .8deg; }
.ct-fiche:nth-child(6)  { --r: -1.4deg; }
.ct-fiche:nth-child(7)  { --r: .5deg; }
.ct-fiche:nth-child(8)  { --r: -1.1deg; }
/* Le coin corné, en bas à droite : un vrai bout de papier. */
.ct-fiche::after { content: ""; position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  background: linear-gradient(135deg, transparent 50%, rgba(34, 49, 64, .22) 50%); border-radius: 0 0 4px 0; }
/* La punaise. */
.ct-punaise { position: absolute; top: 9px; left: 50%; translate: -50% 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--turq); box-shadow: 0 0 0 3px rgba(var(--turq-rgb), .28), 0 2px 3px rgba(0, 0, 0, .35); }
.ct-fiche:nth-child(even) .ct-punaise { background: var(--jaune); box-shadow: 0 0 0 3px rgba(var(--jaune-rgb), .28), 0 2px 3px rgba(0, 0, 0, .35); }
@media (hover: hover) {
  .ct-fiche:hover { rotate: 0deg; translate: 0 -5px; }
}

/* ---- La chute ---- */
.ct-chute { margin-top: 46px; padding-top: 26px; border-top: 1px dashed rgba(255, 255, 255, .22); max-width: 62ch; }
body .ct-chute p { color: rgba(255, 255, 255, .78); font-size: 1.02rem; }
.ct-signature { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(1.05rem, 2.2vw, 1.4rem); }
body .ct-signature { color: #fff; }
.ct-signature b { color: var(--jaune); font-weight: 800; }
.ct-signature svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--jaune); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---- Écrans ---- */
/* Huit fiches : quatre colonnes ou deux, jamais trois — sinon la
   dernière rangée reste incomplète et le mur retombe dans le
   défaut qu'on corrigeait. Les libellés se replient sur deux
   lignes, les cellules gardent la même hauteur. */
@media (max-width: 1024px) { .ct-mur { gap: 20px 16px; } }
@media (max-width: 780px) {
  .ct-tete { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ct-appel { align-self: start; }
  .ct-mur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; margin-top: 32px; }
}
@media (max-width: 420px) { .ct-fiche { padding: 24px 12px 18px; font-size: .9rem; } }
@media print { .ct-fiche { rotate: none !important; box-shadow: none !important; border: 1px solid #ccc !important; } }


/* ============================================================
   NOS HORAIRES — la semaine sur un axe, pas dans un tableau
   Un axe commun de 9 h à 19 h : la barre des jours d'école part
   à 15 h 30, celle du samedi couvre presque tout. Le titre
   « quand l'école ferme, la maison ouvre » devient visible.
   ============================================================ */
.hr-semaine { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px 20px; box-shadow: var(--shadow); }
.hr-ligne { display: grid; grid-template-columns: 190px minmax(0, 1fr) 150px; align-items: center; gap: 22px;
  padding: 16px 0; border-bottom: 1px solid var(--line); }
.hr-ligne:last-of-type { border-bottom: 0; }
.hr-nom { font-weight: 800; font-size: 1rem; color: var(--nuit); }
.hr-heures { font-weight: 800; font-size: .98rem; color: var(--nuit); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* La piste : le temps fermé reste visible en pointillé. */
.hr-piste { position: relative; height: 14px; border-radius: 7px;
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px); }
.hr-barre { position: absolute; top: -3px; height: 20px; left: var(--de, 0%); width: var(--l, 100%);
  border-radius: 10px; background: var(--turq); box-shadow: 0 4px 12px rgba(var(--turq-rgb), .35);
  transform-origin: left center; }
/* Le samedi est le grand jour : il prend le jaune de la charte. */
.hr-ligne--grand .hr-barre { background: var(--jaune); box-shadow: 0 4px 12px rgba(var(--jaune-rgb), .4); }
.hr-ligne--ferme .hr-nom, .hr-ligne--ferme .hr-heures { color: var(--ink-soft); font-weight: 700; }

/* La barre se déploie quand la section arrive à l'écran. Le
   dépliage n'est que décoratif : les horaires sont écrits. */
html.mo .hr-semaine.visible .hr-barre { animation: hr-pousse .9s cubic-bezier(.2, .7, .2, 1) both; }
html.mo .hr-semaine.visible .hr-ligne:nth-of-type(2) .hr-barre { animation-delay: .14s; }
@keyframes hr-pousse { from { transform: scaleX(0); opacity: .4; } to { transform: none; opacity: 1; } }

/* L'axe des heures : une réglette posée dans la colonne du milieu,
   exactement sous les pistes. */
.hr-axe { display: grid; grid-template-columns: 190px minmax(0, 1fr) 150px; gap: 22px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.hr-reglette { grid-column: 2; display: flex; justify-content: space-between; }
.hr-reglette i { font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  color: var(--ink-soft); position: relative; padding-top: 8px; }
.hr-reglette i::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 5px; background: var(--line); }
.hr-reglette i:first-child::before { left: 0; }
.hr-reglette i:last-child::before { left: auto; right: 0; }

/* Le jour du jour, marqué discrètement par le script. */
.hr-ligne--auj { position: relative; }
.hr-ligne--auj .hr-nom::after { content: "aujourd'hui"; display: inline-block; margin-left: 10px; padding: 3px 9px 2px;
  border-radius: 999px; background: rgba(var(--turq-rgb), .14); color: #0d8378;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; vertical-align: 2px; }

.hr-note { margin-top: 16px; font-size: .9rem; color: var(--ink-soft); }

@media (max-width: 900px) {
  .hr-semaine { padding: 20px 20px 16px; }
  .hr-axe { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hr-reglette { grid-column: 1; }
  .hr-ligne { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 0; }
  .hr-nom { grid-column: 1; }
  .hr-heures { grid-column: 2; }
  .hr-piste { grid-column: 1 / -1; }
}
@media print { .hr-piste, .hr-axe { display: none; } }


/* ============================================================
   TARIFS — une carte de prix, pas quatre boîtes identiques
   L'accès d'abord, les compléments ensuite. Chaque ligne est
   tirée jusqu'à son prix par un filet pointillé : on lit le nom,
   l'œil suit le filet, il tombe sur le chiffre.
   ============================================================ */
.tf-carte { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: 12px 34px 26px; max-width: 900px; margin-left: auto; margin-right: auto; }
.tf-groupe { padding: 20px 0 6px; }
.tf-groupe + .tf-groupe { border-top: 1px dashed var(--line); }
.tf-groupe-titre { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 6px; }

.tf-ligne { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; }
.tf-nom { flex: 0 1 auto; font-weight: 800; font-size: 1.02rem; color: var(--nuit); }
/* La précision est écrite sous le nom, en clair : elle ne doit pas
   se lire comme une deuxième offre. */
.tf-nom em { display: block; font-style: normal; font-weight: 500; font-size: .88rem; color: var(--ink-soft); margin-top: 3px; }
/* Le filet s'aligne sur la ligne de base du nom et du prix, pas sur
   le bas du bloc : sinon il passe sous la précision et ne relie plus
   rien. Un élément vide de 2 px a sa ligne de base en bas : il vient
   donc se poser exactement sur celle du chiffre. */
.tf-filet { flex: 1 1 20px; min-width: 18px; height: 2px; align-self: baseline;
  background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 8px); }
.tf-prix { flex: none; font-weight: 800; font-size: 1.35rem; color: var(--nuit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tf-prix small { font-size: .78rem; font-weight: 500; color: var(--ink-soft); margin-left: 4px; }
.tf-prix i { font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 6px; vertical-align: 3px; }

/* La ligne socle : c'est elle qui porte l'offre, elle domine. */
.tf-ligne--socle .tf-nom { font-size: 1.14rem; }
.tf-ligne--socle .tf-prix { font-size: 2rem; color: #0d8378; letter-spacing: -.02em; }
.tf-ligne--socle .tf-filet { background: repeating-linear-gradient(90deg, rgba(var(--turq-rgb), .55) 0 3px, transparent 3px 8px); }

/* Le tampon, incliné comme partout ailleurs sur la charte. */
.tf-tampon { display: inline-block; margin-left: 10px; padding: 4px 10px 3px; border: 2px dashed var(--jaune);
  border-radius: 8px; color: #a8770a; font-family: "Kaushan Script", cursive; font-size: .95rem; line-height: 1;
  transform: rotate(-3deg); vertical-align: 2px; }

.tf-note { margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: .88rem; color: var(--ink-soft); }

@media (max-width: 640px) {
  .tf-carte { padding: 8px 22px 22px; }
  /* Sans place pour le filet, le prix passe sous le nom. */
  .tf-ligne { flex-wrap: wrap; gap: 4px 12px; }
  .tf-nom { flex: 1 1 100%; }
  .tf-filet { display: none; }
  .tf-prix { font-size: 1.25rem; }
  .tf-ligne--socle .tf-prix { font-size: 1.7rem; }
  .tf-tampon { margin-left: 0; margin-top: 8px; }
}


/* ============================================================
   NOTRE AMBITION — la conclusion de la page, en typographie
   C'est la thèse : elle ne se range pas dans des cartes ni dans
   des pastilles. Les dix capacités forment un bloc de grandes
   capitales séparées par des points tracés, qui monte jusqu'à
   la dernière — celle qui contient toutes les autres et qui
   passe au manuscrit.
   ============================================================ */
.ab-section { position: relative; overflow: hidden; isolation: isolate; }
.ab-section > .container { position: relative; z-index: 1; }
.ab-section > .ac-points { top: auto; bottom: 40px; left: 3%; opacity: .5; }

.ab-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 24px 56px; align-items: end; }
/* La négation est mise en retrait : plus petite, plus grise, barrée
   d'un filet à gauche. C'est ce qu'on refuse, pas ce qu'on propose. */
.ab-negation { align-self: end; padding-left: 20px; border-left: 3px solid var(--line);
  font-size: 1rem; color: var(--ink-soft); max-width: 46ch; }

.ab-amorce { margin-top: 46px; font-size: .74rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--u-text); }
.ab-amorce::after { content: ""; display: block; width: 54px; height: 2px; margin-top: 12px;
  background: repeating-linear-gradient(90deg, var(--turq) 0 6px, transparent 6px 12px); }

/* Le bloc de verbes : du texte, pas une liste à puces. */
.ab-verbes { list-style: none; margin: 22px 0 0; padding: 0;
  font-size: clamp(1.35rem, 3.1vw, 2.15rem); font-weight: 800; line-height: 1.28;
  text-transform: uppercase; letter-spacing: -.02em; color: var(--nuit); }
.ab-verbes li { display: inline; }
/* Le point tracé qui sépare deux capacités, alternativement
   turquoise et jaune : le rythme de la charte, à l'échelle du texte. */
.ab-verbes li:not(:last-child)::after {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--turq); margin: 0 .42em .18em; vertical-align: middle;
}
.ab-verbes li:nth-child(even):not(:last-child)::after { background: var(--jaune); }
/* La dernière n'est pas une capacité de plus : c'est celle qui les
   rassemble. Elle passe au manuscrit et garde sa casse. */
.ab-verbes .ab-final { display: block; margin-top: .28em; }
.ab-verbes .ab-final .ac-script { font-size: 1.22em; color: var(--u-text); text-transform: none; letter-spacing: 0; }

/* La chute, tenue par un filet plein sur toute la largeur. */
.ab-chute { margin-top: 44px; padding-top: 26px; border-top: 2px solid var(--nuit);
  font-size: clamp(1rem, 1.9vw, 1.18rem); color: var(--ink-soft); max-width: 74ch; }
.ab-chute b { display: block; margin-top: 8px; color: var(--nuit); font-weight: 800;
  font-size: 1.08em; letter-spacing: -.01em; }

@media (max-width: 900px) {
  .ab-tete { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ab-negation { align-self: start; }
  .ab-amorce { margin-top: 34px; }
  .ab-chute { margin-top: 34px; }
}
@media (max-width: 560px) {
  .ab-verbes li:not(:last-child)::after { width: 7px; height: 7px; margin: 0 .34em .16em; }
}


/* ============================================================
   L'APPEL FINAL — trois portes, pas trois boutons
   Trois boutons de même poids obligent le lecteur à choisir sans
   rien savoir. Ici chaque porte est numérotée, dit où elle mène
   et à qui elle s'adresse ; la première est pleine, c'est le pas
   le plus simple à faire.
   ============================================================ */
.fn-section .container { position: relative; z-index: 1; }
.fn-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 40px 56px; align-items: center; }

.fn-propos .lead { max-width: 40ch; }
.fn-lieu { display: flex; align-items: center; gap: 10px; margin-top: 18px;
  font-size: .84rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.fn-lieu svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fn-signature { margin-top: 30px; padding-top: 22px; border-top: 1px dashed rgba(255, 255, 255, .24);
  font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.02rem; line-height: 1.35; }
body .fn-signature { color: rgba(255, 255, 255, .72); }
.fn-signature b { display: block; margin-top: 4px; color: var(--jaune); font-size: 1.12em; }

/* ---- Les portes ---- */
.fn-portes { display: grid; gap: 12px; }
.fn-porte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 20px 22px; border-radius: 14px; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04);
  transition: background-color .3s ease, border-color .3s ease, translate .3s cubic-bezier(.2, .7, .2, 1); }
.fn-num { font-size: .72rem; font-weight: 800; letter-spacing: .12em; color: rgba(255, 255, 255, .4); font-variant-numeric: tabular-nums; }
.fn-texte b { display: block; font-size: 1.06rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.fn-texte em { display: block; margin-top: 5px; font-style: normal; font-size: .88rem; color: rgba(255, 255, 255, .66); }
.fn-fleche { display: flex; width: 34px; height: 34px; border-radius: 50%; flex: none; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); color: #fff; transition: translate .3s cubic-bezier(.2, .7, .2, 1), background-color .3s ease; }
.fn-fleche svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* La première porte est pleine : c'est le pas le plus simple. */
.fn-porte--une { background: var(--jaune); border-color: var(--jaune); }
.fn-porte--une .fn-num { color: rgba(34, 49, 64, .5); }
.fn-porte--une .fn-texte b { color: var(--nuit); }
/* Mesure faite : a 78 % d'opacite le contraste tombait a 4,38:1 sur le
   jaune, sous le seuil AA du petit texte. Remonte a 90 %. */
.fn-porte--une .fn-texte em { color: rgba(34, 49, 64, .9); }
.fn-porte--une .fn-fleche { background: rgba(34, 49, 64, .16); color: var(--nuit); }

@media (hover: hover) {
  .fn-porte:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .38); translate: 0 -3px; }
  .fn-porte--une:hover { background: #e9c463; border-color: #e9c463; }
  .fn-porte:hover .fn-fleche { translate: 4px 0; background: rgba(255, 255, 255, .2); }
  .fn-porte--une:hover .fn-fleche { background: rgba(34, 49, 64, .24); }
}
.fn-porte:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }

@media (max-width: 900px) {
  .fn-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  .fn-signature { margin-top: 24px; }
}
@media (max-width: 480px) {
  .fn-porte { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 18px; }
  .fn-fleche { display: none; }
}


/* ============================================================
   TROISIÈME VAGUE — les six sections refondues prennent vie
   Chaque section reçoit le mouvement qu'elle appelle : le billet
   se poinçonne, le registre se coche ligne à ligne, le cadre se
   trace avant que la posture n'arrive au milieu, les fiches
   s'épinglent, les filets de prix se tirent, les capacités
   s'allument une à une, les portes entrent par la droite.

   Toutes sont accrochées à .visible — la classe que le site pose
   déjà quand le bloc entre à l'écran. Aucun état masqué nouveau :
   si le déclencheur n'arrive pas, le bloc reste simplement dans
   l'état où le mécanisme .reveal l'a laissé.
   ============================================================ */

/* ---- 1. Le laissez-passer se poinçonne -------------------- */
html.mo .pa-billet .pa-perfo::before, html.mo .pa-billet .pa-perfo::after { scale: 0; }
html.mo .pa-billet.visible .pa-perfo::before, html.mo .pa-billet.visible .pa-perfo::after {
  animation: mo-poincon .5s cubic-bezier(.2, .9, .3, 1.4) .45s both; }
html.mo .pa-billet.visible .pa-perfo::after { animation-delay: .55s; }
@keyframes mo-poincon { from { scale: 0; } 70% { scale: 1.25; } to { scale: 1; } }
html.mo .pa-billet.visible .pa-tarif { animation: mo-monte-doux .6s var(--mo-sortie) both; animation-delay: calc(.6s + var(--i, 0) * .12s); }
html.mo .pa-billet.visible .pa-offert { animation: tampon-pose .8s cubic-bezier(.2, .9, .3, 1.3) 1s both; }
html.mo .pa-billet.visible .pa-cta { animation: mo-monte-doux .6s var(--mo-sortie) 1.05s both; }
@keyframes mo-monte-doux { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- 2. Le registre se coche ligne à ligne ---------------- */
html.mo .pa-registre.visible .pa-inclus li { animation: mo-entre-ligne .5s var(--mo-sortie) both; animation-delay: calc(.25s + var(--i, 0) * .055s); }
html.mo .pa-registre.visible .pa-inclus li::before { animation: mo-coche .45s cubic-bezier(.2, .9, .3, 1.5) both; animation-delay: calc(.4s + var(--i, 0) * .055s); }
@keyframes mo-coche { from { opacity: 0; transform: rotate(-45deg) scale(0); } 65% { transform: rotate(-45deg) scale(1.3); } to { opacity: 1; transform: rotate(-45deg) scale(1); } }

/* ---- 3. Le cadre se trace, puis la posture arrive --------- */
html.mo .cd-principe.visible::before { animation: mo-equerre-haut .55s var(--mo-sortie) both; animation-delay: calc(var(--i, 0) * .1s); }
html.mo .cd-principe.visible::after { animation: mo-equerre-bas .55s var(--mo-sortie) both; animation-delay: calc(.1s + var(--i, 0) * .1s); }
@keyframes mo-equerre-haut { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mo-equerre-bas { from { clip-path: inset(100% 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
/* La posture n'entre qu'une fois le cadre posé. */
html.mo .cd-centre.visible { animation: mo-centre .7s var(--mo-sortie) .5s both; }
@keyframes mo-centre { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ---- 4. Les fiches s'épinglent ---------------------------- */
html.mo .ct-fiche.visible { animation: mo-epingle .6s cubic-bezier(.2, .8, .3, 1.2) both; animation-delay: calc(var(--i, 0) * .07s); }
@keyframes mo-epingle { from { opacity: 0; transform: translateY(-16px) scale(.9); } to { opacity: 1; transform: none; } }
html.mo .ct-fiche.visible .ct-punaise { animation: mo-poincon .4s cubic-bezier(.2, .9, .3, 1.5) both; animation-delay: calc(.2s + var(--i, 0) * .07s); }

/* ---- 5. La semaine : la réglette et la pastille du jour --- */
html.mo .hr-semaine.visible .hr-reglette i { animation: mo-fondu .5s ease both; animation-delay: calc(.5s + var(--i, 0) * .05s); }
html.mo .hr-semaine.visible .hr-ligne { animation: mo-fondu .5s ease both; animation-delay: calc(var(--i, 0) * .1s); }
html.mo .hr-semaine.visible .hr-ligne--auj .hr-nom::after { animation: mo-poincon .5s cubic-bezier(.2, .9, .3, 1.4) .9s both; }
@keyframes mo-fondu { from { opacity: 0; } to { opacity: 1; } }

/* ---- 6. Les filets de prix se tirent ---------------------- */
html.mo .tf-carte.visible .tf-filet { animation: mo-tire-filet .65s var(--mo-sortie) both; animation-delay: calc(.2s + var(--i, 0) * .1s); transform-origin: left center; }
@keyframes mo-tire-filet { from { transform: scaleX(0); } to { transform: none; } }
html.mo .tf-carte.visible .tf-prix { animation: mo-monte-doux .55s var(--mo-sortie) both; animation-delay: calc(.45s + var(--i, 0) * .1s); }
html.mo .tf-carte.visible .tf-tampon { animation: tampon-pose .8s cubic-bezier(.2, .9, .3, 1.3) .9s both; }

/* ---- 7. Les capacités s'allument une à une ----------------
   Les éléments sont en ligne : transform ne s'y applique pas,
   on n'anime donc que l'opacité — et les points séparateurs,
   eux, sont des pseudo-éléments en inline-block. */
html.mo .ab-verbes.visible li { animation: mo-fondu .5s ease both; animation-delay: calc(var(--i, 0) * .09s); }
html.mo .ab-verbes.visible li:not(:last-child)::after { animation: mo-point .4s cubic-bezier(.2, .9, .3, 1.6) both; animation-delay: calc(.12s + var(--i, 0) * .09s); }
@keyframes mo-point { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
html.mo .ab-verbes.visible .ab-final .ac-script { animation: mo-ecrit 1.1s var(--mo-sortie) 1s both; }

/* ---- 8. Les portes entrent par la droite ------------------ */
html.mo .fn-porte.visible { animation: mo-porte .6s var(--mo-sortie) both; animation-delay: calc(var(--i, 0) * .12s); }
@keyframes mo-porte { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
/* La flèche de la première porte fait un aller-retour discret :
   c'est le geste qui dit « par ici ». */
html.mo .fn-porte--une.visible .fn-fleche { animation: mo-appel 3.4s ease-in-out 1.4s infinite; animation-play-state: var(--mo-etat, running); }
@keyframes mo-appel { 0%, 72%, 100% { translate: 0 0; } 80% { translate: 5px 0; } 88% { translate: 0 0; } }

@media print {
  html.mo .pa-billet .pa-perfo::before, html.mo .pa-billet .pa-perfo::after { scale: 1; }
  html.mo [class] { animation: none !important; }
}

/* ---- Salle de pause : le classement partagé ---------------- */
.jx-signature { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.jx-signature[hidden] { display: none; }
.jx-signature input {
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1);
  color: #fff; border-radius: 10px; padding: 10px 14px; width: 190px; font: inherit;
}
.jx-signature input::placeholder { color: rgba(255, 255, 255, .55); }
.jx-signature input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.jx-verdict { color: var(--orange); font-weight: 700; }
.jx-verdict[hidden] { display: none; }

.jx-classement { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 20px; }
.jx-classement-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.jx-classement-tete h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.jx-rangs { margin-top: 12px; }
.jx-rang {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--white); margin-bottom: 6px;
}
.jx-rang-num { font-weight: 900; color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: center; }
.jx-rang-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jx-rang-score { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--bleu); }
/* Le podium reprend les couleurs de la maison : orange, bleu nuit, sable. */
.jx-rang--podium:nth-child(1) { border-color: var(--orange); box-shadow: inset 3px 0 0 var(--orange); }
.jx-rang--podium:nth-child(1) .jx-rang-num,
.jx-rang--podium:nth-child(1) .jx-rang-score { color: var(--orange); }
.jx-rang--podium:nth-child(2) { border-color: var(--bleu); box-shadow: inset 3px 0 0 var(--bleu); }
.jx-rang--podium:nth-child(3) { border-color: var(--sable); box-shadow: inset 3px 0 0 var(--sable); }
.jx-rang--moi { background: rgba(var(--orange-rgb), .1); border-color: var(--orange); }
.jx-etat[hidden] { display: none; }

/* ---- Salle de pause : le soroban ---------------------------
   Cadre bleu nuit, perles sable, perle comptée = orange.
   La géométrie est fixe (perle 26 px, pas de 30 px) : le script
   pose les perles à ces mesures, ne les changer que des deux
   côtés à la fois. */
.jx-scene--sor { padding: 22px 14px 18px; }
.jx-sor-consigne { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.jx-sor-cible { font-size: 46px; font-weight: 900; line-height: 1; color: var(--bleu); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.jx-sor-lu { color: var(--ink-soft); font-size: .95rem; }
.jx-sor-lu b { color: var(--bleu); font-variant-numeric: tabular-nums; }

.jx-sor-cadre {
  display: flex; gap: 10px; justify-content: center;
  background: var(--nuit); border-radius: 14px; padding: 18px 16px 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: box-shadow .25s;
}
.jx-sor-juste { box-shadow: inset 0 0 0 2px var(--vert), 0 0 22px rgba(60, 157, 54, .45); }

.jx-sor-tige { position: relative; width: 62px; }
.jx-sor-tige::before {
  content: ""; position: absolute; left: 50%; top: 4px; bottom: 24px; width: 3px;
  margin-left: -1.5px; background: rgba(232, 226, 219, .3); border-radius: 2px;
}
.jx-sor-ciel { position: relative; height: 66px; }
.jx-sor-barre { height: 8px; background: var(--sable); border-radius: 2px; }
.jx-sor-terre { position: relative; height: 150px; }
.jx-sor-chiffre {
  display: block; text-align: center; color: rgba(255, 255, 255, .55);
  font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; padding-top: 2px;
}

.jx-perle {
  position: absolute; left: 50%; margin-left: -23px; width: 46px; height: 26px;
  padding: 0; border: 0; cursor: pointer; background: var(--sable);
  -webkit-appearance: none; appearance: none;
  clip-path: polygon(50% 0%, 100% 42%, 100% 58%, 50% 100%, 0 58%, 0 42%);
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), background .16s;
}
.jx-perle:hover { background: #fff; }
.jx-perle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.jx-perle.active { background: var(--orange); }
/* Comptée = collée à la barre : celle du haut descend, celles du bas montent. */
.jx-perle--ciel.active { transform: translateY(34px); }
.jx-sor-terre .jx-perle.active { transform: translateY(-30px); }

.jx-sor-jauge { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 16px; }
.jx-sor-jauge i { display: block; height: 100%; width: 100%; background: var(--orange); transition: width .2s linear; }

@media (max-width: 460px) {
  .jx-sor-cadre { transform: scale(.84); transform-origin: top center; margin-bottom: -42px; }
  .jx-sor-cible { font-size: 38px; }
}


/* ============================================================
   LA CARTE DANS LE HÉROS — l'objet posé dans le vide à droite
   Le héros passe en deux colonnes au-dessus de 900 px : le
   propos à gauche, la carte à droite, légèrement de trois quarts
   comme un objet tenu en main. En dessous, elle disparaît et le
   texte reprend toute la largeur — sur un téléphone elle serait
   trop petite pour être lisible.
   ============================================================ */
.hc-grille { display: grid; grid-template-columns: minmax(0, 1fr); }
.hc-scene { display: none; }

@media (min-width: 901px) {
  .hc-grille { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 40px 46px; align-items: center; }
  .hc-scene { display: block; perspective: 1400px; }
  /* Les pictos du héros restent bien visibles : Mysah veut que le côté
     droit soit habité. À .5 sur le bleu nuit, ils disparaissaient. La
     carte passe par-dessus (scène en z-index 3). */
  .hero-carte > .doodle { opacity: .88; }
}

.cb {
  position: relative; width: 100%; max-width: 300px; margin: 0 auto;
  aspect-ratio: 640 / 1015; border-radius: 16px; overflow: hidden; background: #1a2531;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: perspective(1400px) rotateY(var(--cb-ry, -13deg)) rotateX(var(--cb-rx, 7deg)) rotateZ(-2deg);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
/* La vraie carte membre (recto du PDF de Mysah), en image pleine.
   Un reflet léger passe dessus pour lui donner la matière d'un objet. */
.cb-face { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%); }

/* Elle respire, comme un objet tenu à la main. */
html.mo .cb { animation: cb-flotte 7s ease-in-out infinite; animation-play-state: var(--mo-etat, running); }
@keyframes cb-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
/* Entrée en scène : elle arrive de la droite en se redressant. */
html.mo .hero-carte .cb { animation: cb-arrive 1s cubic-bezier(.2, .7, .2, 1) .3s both, cb-flotte 7s ease-in-out 1.3s infinite; }
@keyframes cb-arrive { from { opacity: 0; translate: 40px 0; rotate: 6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

@media (prefers-reduced-motion: reduce) { .cb { transform: none; } }
@media print { .hc-scene { display: none !important; } }


/* ---- La carte se dérobe -----------------------------------
   Le décalage de fuite vit sur la scène, la carte garde son
   flottement et son inclinaison. Elle n'intercepte plus le
   pointeur que sur elle-même, pour pouvoir bondir si on la
   rattrape — le reste du héros reste cliquable normalement. */
/* Le lissage est fait image par image en JavaScript : pas de
   transition CSS, elle lutterait contre la boucle.
   pointer-events: none est la garantie dure — meme un curseur
   plus rapide qu'elle ne peut pas la survoler. */
.hc-scene { translate: var(--fx, 0px) var(--fy, 0px); will-change: translate; pointer-events: none; }
.hc-scene .cb { pointer-events: none; }
/* Poursuivie, elle recule dans la profondeur : « scale » est une
   propriete independante, elle se compose avec l'inclinaison
   (transform) et le flottement (translate) sans rien ecraser. */
.cb { scale: var(--cb-s, 1); }
/* Elle vagabonde au-dessus du texte : une ombre portee plus
   marquee la detache de ce qu'elle survole. */
@media (min-width: 901px) { .hero-carte .hc-scene { position: relative; z-index: 3; } }

/* ---- Salle de pause : les briques --------------------------
   Le plateau se dimensionne par sa hauteur (le rapport largeur/
   hauteur est posé par le script) ; les sélecteurs sont volontairement
   plus précis que « .jx-scene canvas », qui impose 100 % de large. */
.jx-scene--briques { padding: 16px 14px; }
.jx-briques { display: flex; gap: 18px; justify-content: center; align-items: flex-start; }
.jx-briques canvas.jx-briques-plateau {
  width: auto; height: min(520px, 58vh);
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft);
}
.jx-briques canvas.jx-briques-suivante {
  width: 88px; height: 88px; border: 1px solid var(--line); border-radius: 10px;
}
.jx-briques-cote { min-width: 92px; text-align: center; }
.jx-briques-cote .note { margin-top: 10px; }
.jx-briques-chiffre {
  display: block; font-size: 22px; font-weight: 900; color: var(--bleu);
  font-variant-numeric: tabular-nums;
}

@media (hover: none), (max-width: 760px) {
  .jx-pad--briques { grid-template-columns: repeat(3, 68px); }
  .jx-touche[data-brique="gauche"] { grid-area: 1 / 1; }
  .jx-touche[data-brique="tourner"] { grid-area: 1 / 2; }
  .jx-touche[data-brique="droite"] { grid-area: 1 / 3; }
  .jx-touche[data-brique="bas"] { grid-area: 2 / 1; }
  .jx-touche[data-brique="poser"] { grid-area: 2 / 2 / 3 / 4; width: auto; font-size: 15px; }
}

/* Sur téléphone, le plateau et son panneau tiennent dans la largeur. */
@media (max-width: 560px) {
  .jx-briques { gap: 10px; }
  .jx-briques canvas.jx-briques-plateau { height: min(420px, 50vh); }
  .jx-briques canvas.jx-briques-suivante { width: 66px; height: 66px; }
  .jx-briques-cote { min-width: 72px; }
  .jx-briques-chiffre { font-size: 18px; }
  .jx-scene--briques { padding: 14px 8px; }
}

/* ---- Salle de pause : 2048 --------------------------------- */
.jx-scene--2048 { padding: 18px 14px; }
.jx-scene--2048 canvas.jx-2048-plateau {
  width: 100%; max-width: 440px; margin: 0 auto; background: transparent;
}
.jx-2048-plus { color: var(--u-text); font-weight: 800; margin-top: 4px; }
.jx-2048-plus[hidden] { display: none; }

/* Hero de l'accueil : le second paragraphe suit le premier de près */
.hero .lead + .hero-vision { margin-top: 12px; }

/* Téléphones : la constellation se loge à droite de « Créer ». Le titre de
   l'accueil garde une taille fixe (35 px) sous 640 px, donc ses lignes sont
   au même endroit sur tous les téléphones : on place la constellation en
   pixels, pour que ses nœuds de gauche tombent dans le vide après « Créer »
   sans toucher « Accompagner » au-dessus ni « Transmettre » en dessous. */
@media (max-width: 640px) {
  .constellation { width: 141px; left: 240px; right: auto; top: 232px; }
}

/* ---- Salle de pause : le morpion ---------------------------
   Croix orange (le joueur), ronds bleu nuit (l'ordinateur), tracés
   en CSS : le script ne pose qu'une classe par case. */
.jx-scene--morpion { padding: 22px 14px; }
.jx-morpion { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.jx-morpion-annonce { font-weight: 800; font-size: 1.15rem; color: var(--bleu); min-height: 1.6em; text-align: center; }
.jx-morpion-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: min(330px, 100%); aspect-ratio: 1;
}
.jx-case {
  position: relative; padding: 0; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--white); box-shadow: var(--shadow); transition: background .18s;
}
.jx-case:hover:not(.jx-case--x):not(.jx-case--o) { background: rgba(var(--orange-rgb), .08); }
.jx-case:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.jx-case--x::before, .jx-case--x::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 58%; height: 11%;
  background: var(--orange); border-radius: 99px;
  transform: translate(-50%, -50%) rotate(45deg); animation: jx-trace .18s ease-out;
}
.jx-case--x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.jx-case--o::before {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  border: 10px solid var(--nuit); animation: jx-trace .18s ease-out;
}
.jx-case--gagne { background: rgba(var(--orange-rgb), .18); }
/* « scale » plutôt que transform : la croix garde sa rotation pendant l'apparition */
@keyframes jx-trace { from { opacity: 0; scale: .5; } }
@media (max-width: 460px) { .jx-case--o::before { border-width: 7px; } }

/* ---- Salle de pause : le glouton --------------------------- */
.jx-scene--glouton { padding: 16px 12px; }
.jx-scene--glouton canvas.jx-glouton-plateau {
  width: 100%; max-width: 440px; margin: 0 auto; border-radius: 10px;
}

/* ---- Salle de pause : sept onglets sur téléphone -----------
   Ils ne s'empilent plus sur quatre lignes : une seule rangée
   qui défile au doigt, l'onglet choisi se recentre (script). */
@media (max-width: 760px) {
  .jx-onglets {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    margin: 0 -12px 22px; padding: 2px 12px 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .jx-onglets::-webkit-scrollbar { display: none; }
  .jx-onglet { flex: 0 0 auto; scroll-snap-align: center; }
}

/* ---- Salle de pause : le démineur --------------------------
   Cases sable en relief, cases ouvertes blanches ; chiffres aux
   couleurs des univers ; drapeau orange et mine bleu nuit tracés
   en CSS (le script ne pose que des classes). */
.jx-scene--demineur { padding: 18px 12px; }
.jx-demineur { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.jx-mode {
  border: 1px solid var(--line); background: var(--white); color: var(--bleu);
  padding: 8px 18px; border-radius: 999px; font-weight: 700; cursor: pointer;
  transition: background .18s, border-color .18s;
}
.jx-mode.active { background: var(--orange); border-color: var(--orange); color: var(--nuit); }
.jx-demineur-grille {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px;
  width: min(400px, 100%); aspect-ratio: 1;
}
.jx-mine {
  position: relative; padding: 0; border: 0; border-radius: 5px; cursor: pointer;
  background: var(--sable); color: var(--bleu); font-weight: 900;
  font-size: clamp(12px, 3.6vw, 18px); line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -3px 0 rgba(34, 49, 64, .14);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-touch-callout: none;
}
.jx-mine:hover:not(.jx-mine--vue) { background: #efe9e1; }
.jx-mine:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; z-index: 1; }
.jx-mine--vue { background: var(--white); box-shadow: none; cursor: default; }
.jx-mine[data-n="1"] { color: var(--academy); }
.jx-mine[data-n="2"] { color: var(--vert); }
.jx-mine[data-n="3"] { color: var(--rouge); }
.jx-mine[data-n="4"] { color: var(--violet); }
.jx-mine[data-n="5"] { color: var(--u-text); }
.jx-mine[data-n="6"], .jx-mine[data-n="7"], .jx-mine[data-n="8"] { color: var(--bleu); }
/* le drapeau : un mât bleu nuit, une flamme orange */
.jx-mine--drapeau::after {
  content: ""; position: absolute; left: 34%; top: 20%; width: 8%; height: 62%;
  background: var(--nuit); border-radius: 2px;
}
.jx-mine--drapeau::before {
  content: ""; position: absolute; left: 40%; top: 20%; width: 38%; height: 32%;
  background: var(--orange); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.jx-mine--faux { background: rgba(230, 0, 42, .2); }
/* la mine : un disque bleu nuit ; celle qui a sauté, sur fond rouge */
.jx-mine--bombe::before, .jx-mine--boum::before {
  content: ""; position: absolute; inset: 28%; border-radius: 50%;
  background: var(--nuit); box-shadow: 0 0 0 3px rgba(34, 49, 64, .22);
}
.jx-mine--boum { background: var(--rouge); box-shadow: none; }
.jx-mine--boum::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }

/* ---- Salle de pause : quatre en ligne ----------------------
   Plateau bleu nuit, jetons orange (le joueur) et violets
   (l'ordinateur, couleur de Connect). Chaque colonne est un
   bouton : on vise la colonne, le jeton tombe tout seul. */
.jx-scene--quatre { padding: 20px 12px; }
.jx-quatre { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.jx-quatre-grille {
  display: flex; gap: 6px; width: min(440px, 100%);
  background: var(--nuit); padding: 10px; border-radius: 16px;
  box-shadow: 0 10px 24px rgba(34, 49, 64, .18);
}
.jx-quatre-col {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 4px 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  transition: background .15s;
}
.jx-quatre-col:hover, .jx-quatre-col:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.jx-quatre-col--pleine { cursor: not-allowed; }
.jx-quatre-col--pleine:hover { background: transparent; }
.jx-quatre-trou {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: var(--bg-soft); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .28);
}
.jx-quatre-trou--x, .jx-quatre-trou--o { animation: jx-chute .32s cubic-bezier(.3, .8, .4, 1); }
.jx-quatre-trou--x { background: var(--orange); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14); }
.jx-quatre-trou--o { background: var(--violet); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.jx-quatre-trou--gagne { box-shadow: 0 0 0 3px #fff, 0 0 14px rgba(255, 255, 255, .6); }
@keyframes jx-chute { from { transform: translateY(-320%); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .jx-quatre-trou--x, .jx-quatre-trou--o { animation: none; } }

/* ---- Salle de pause : le sudoku ----------------------------
   Grille blanche à traits bleu nuit (épais autour des carrés),
   chiffres donnés en bleu nuit sur sable, chiffres du joueur en
   orange foncé, erreurs en rouge. La case choisie, sa ligne, sa
   colonne, son carré et les chiffres identiques s'éclairent. */
.jx-scene--sudoku { padding: 18px 12px; }
.jx-sudoku { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.jx-sudoku-grille {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px;
  width: min(450px, 100%); background: #b9c0c8;
  border: 2px solid var(--nuit); border-radius: 8px; overflow: hidden;
}
.jx-sdk-case {
  position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; cursor: pointer;
  background: var(--white); color: var(--u-text); font-weight: 800;
  font-size: clamp(15px, 4.6vw, 23px); line-height: 1; font-variant-numeric: tabular-nums;
}
.jx-sdk-case--d { border-right: 2px solid var(--nuit); }
.jx-sdk-case--b { border-bottom: 2px solid var(--nuit); }
.jx-sdk-case--donnee { background: #f3efe9; color: var(--nuit); }
.jx-sdk-case--zone { background: #eef1f4; }
.jx-sdk-case--donnee.jx-sdk-case--zone { background: #e6e3de; }
.jx-sdk-case--meme { background: rgba(var(--orange-rgb), .2); }
.jx-sdk-case--sel { background: rgba(var(--orange-rgb), .38); }
.jx-sdk-case--faux { color: var(--rouge); background: rgba(230, 0, 42, .1); }
.jx-sdk-case:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.jx-sdk-notes {
  position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr);
  font-size: clamp(7px, 1.7vw, 10px); font-weight: 700; color: var(--ink-soft); line-height: 1;
}
.jx-sdk-notes span { display: flex; align-items: center; justify-content: center; }

.jx-sudoku-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; width: min(450px, 100%); }
.jx-sdk-touche {
  aspect-ratio: 1 / 1.15; min-width: 0; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--white);
  color: var(--bleu); font-weight: 800; font-size: clamp(15px, 4.2vw, 20px);
  box-shadow: var(--shadow);
}
.jx-sdk-touche:active { background: var(--bleu); color: #fff; }
.jx-sudoku-outils { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.jx-sudoku-outils .jx-mode:disabled { opacity: .45; cursor: not-allowed; }

/* le choix du niveau, dans le voile de départ */
.jx-niveaux { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.jx-niveau {
  border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff;
  padding: 7px 16px; border-radius: 999px; font-weight: 700; cursor: pointer;
}
.jx-niveau.active { background: var(--orange); border-color: var(--orange); color: var(--nuit); }

/* ---- Salle de pause : les échecs ---------------------------
   Échiquier sable et brun doux, pièces pleines : orange cerné de
   bleu nuit pour le joueur, bleu nuit pour l'ordinateur. Le script
   ne pose que des classes ; les glyphes sont suivis de U+FE0E pour
   ne jamais tourner en émoji sur téléphone. */
.jx-scene--echecs { padding: 16px 10px; }
.jx-echecs { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.jx-echecs-plateau {
  display: grid; grid-template-columns: repeat(8, 1fr); width: min(480px, 100%);
  border: 3px solid var(--nuit); border-radius: 8px; overflow: hidden;
  box-shadow: 0 10px 24px rgba(34, 49, 64, .18);
}
.jx-ech-case {
  position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  font-size: clamp(22px, 7.4vw, 44px);
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", "DejaVu Sans", serif;
}
.jx-ech-case--clair { background: #EFE9E1; }
.jx-ech-case--sombre { background: #B9A98F; }
.jx-ech-p--moi {
  color: var(--orange);
  text-shadow: 1px 0 0 var(--nuit), -1px 0 0 var(--nuit), 0 1px 0 var(--nuit), 0 -1px 0 var(--nuit), 0 2px 3px rgba(34, 49, 64, .35);
}
.jx-ech-p--lui { color: var(--nuit); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.jx-ech-case--dernier { box-shadow: inset 0 0 0 999px rgba(244, 152, 28, .24); }
.jx-ech-case--choisie { box-shadow: inset 0 0 0 999px rgba(244, 152, 28, .5); }
.jx-ech-case--echec { box-shadow: inset 0 0 0 999px rgba(230, 0, 42, .5); }
.jx-ech-case--cible::after {
  content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%;
  background: rgba(34, 49, 64, .38); pointer-events: none;
}
.jx-ech-case--prise::after {
  content: ""; position: absolute; inset: 6%; border-radius: 50%;
  border: 4px solid rgba(34, 49, 64, .5); pointer-events: none;
}
.jx-ech-case:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; z-index: 1; }
.jx-echecs-prises { font-size: 1.05rem; letter-spacing: .06em; min-height: 1.4em; }

/* ---- Salle de pause : le solitaire -------------------------
   Sept colonnes ; chaque case et chaque colonne est un conteneur
   (container-type) : les cartes se mesurent en cqw, c'est-à-dire en
   largeur de leur colonne — la même table tient sur un téléphone
   comme sur un grand écran. Dos bleu nuit au point orange du logo,
   cœurs et carreaux en rouge Studio. */
.jx-scene--solitaire { padding: 14px 10px 18px; }
.jx-sol-annonce { min-height: 1.5em; font-size: 1rem; margin-bottom: 8px; }
.jx-sol { width: min(600px, 100%); margin: 0 auto 12px; display: flex; flex-direction: column; gap: 14px; }
.jx-sol-haut, .jx-sol-bas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.jx-sol-case {
  position: relative; container-type: inline-size; aspect-ratio: 1 / 1.4; padding: 0;
  border: 2px dashed rgba(34, 49, 64, .2); border-radius: 8px; background: transparent;
}
.jx-sol-case--talon { cursor: pointer; }
.jx-sol-espace { aspect-ratio: 1 / 1.4; }
.jx-sol-colonne { position: relative; container-type: inline-size; }
.jx-sol-cale { width: 100%; }
.jx-sol-marque, .jx-sol-tour {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 40cqw; font-weight: 900; color: rgba(34, 49, 64, .22);
}
.jx-sol-compte {
  position: absolute; right: 6cqw; bottom: 6cqw; z-index: 1;
  font-size: 22cqw; font-weight: 800; color: #fff; pointer-events: none;
}
.jx-carte {
  position: absolute; left: -2px; top: -2px; width: calc(100% + 0px); height: 140cqw;
  padding: 0; cursor: pointer; border: 1px solid #cfc6ba; border-radius: 8cqw;
  background: #fff; box-shadow: 0 1px 3px rgba(34, 49, 64, .2); font-family: var(--font);
}
.jx-sol-colonne .jx-carte { left: 0; }
.jx-carte-coin {
  position: absolute; top: 6cqw; left: 8cqw; font-size: clamp(11px, 25cqw, 20px); font-weight: 800; line-height: 1;
  letter-spacing: -.04em; white-space: nowrap;
}
.jx-carte-centre {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding-top: 22cqw; font-size: 58cqw; line-height: 1;
}
.jx-carte--rouge { color: var(--rouge); }
.jx-carte--noire { color: var(--nuit); }
.jx-carte--dos {
  cursor: default; border-color: var(--nuit);
  background: radial-gradient(circle, var(--orange) 0 9cqw, transparent 9.6cqw),
              repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 4cqw, transparent 4cqw 8cqw), var(--nuit);
}
.jx-sol-case--talon .jx-carte--dos { cursor: pointer; pointer-events: none; }
.jx-carte:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; z-index: 2; }
.jx-carte:not(.jx-carte--dos):hover { box-shadow: 0 0 0 2px var(--orange), 0 2px 6px rgba(34, 49, 64, .25); }

/* ---- Salle de pause : le flipper ---------------------------
   Table bleu nuit à trame de points, murs sable, batteurs orange,
   bumpers aux couleurs des univers. Le canvas se dimensionne par
   sa largeur (rapport 400/640 posé par le script). */
.jx-scene--flipper { padding: 12px 10px 16px; }
.jx-scene--flipper canvas.jx-flipper-plateau {
  width: 100%; max-width: 400px; margin: 0 auto; border-radius: 16px;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
@media (hover: none), (max-width: 760px) {
  .jx-pad--flipper { grid-template-columns: 1fr 1.2fr 1fr; width: min(400px, 100%); margin-left: auto; margin-right: auto; }
  .jx-pad--flipper .jx-touche { width: auto; height: 64px; font-size: 18px; }
}

/* ---- Salle de pause : le pendu ------------------------------ */
.jx-scene--pendu { padding: 18px 12px; }
.jx-pendu { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.jx-scene--pendu canvas.jx-pendu-potence { width: min(200px, 60%); height: auto; }
.jx-pendu-droite { flex: 1 1 280px; max-width: 460px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.jx-pendu-mot { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.jx-pendu-lettre {
  width: 1.45em; height: 1.75em; display: flex; align-items: center; justify-content: center;
  border-bottom: 3px solid var(--nuit); font-weight: 900; font-size: clamp(20px, 5vw, 28px); color: var(--bleu);
}
.jx-pendu-lettre--manquee { color: var(--rouge); }
.jx-pendu-clavier { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; width: 100%; }
.jx-pendu-touche {
  min-width: 0; aspect-ratio: 1 / 1.15; padding: 0; cursor: pointer; border: 1px solid var(--line);
  border-radius: 8px; background: var(--white); color: var(--bleu); font-weight: 800; font-size: clamp(13px, 3.4vw, 17px);
}
.jx-pendu-touche:disabled { cursor: default; }
.jx-pendu-touche--bonne { background: rgba(var(--orange-rgb), .22); border-color: var(--orange); }
.jx-pendu-touche--fausse { background: var(--bg-soft); color: #aab1ba; text-decoration: line-through; }

/* ---- Salle de pause : les dames ----------------------------- */
.jx-scene--dames { padding: 16px 10px; }
.jx-dames-plateau {
  display: grid; grid-template-columns: repeat(10, 1fr); width: min(500px, 100%);
  border: 3px solid var(--nuit); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 24px rgba(34, 49, 64, .18);
}
.jx-dames-case { position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; display: flex; align-items: center; justify-content: center; }
.jx-dames-case--clair { background: #EFE9E1; }
.jx-dames-case--sombre { background: #B9A98F; cursor: pointer; }
.jx-dames-case--dernier { box-shadow: inset 0 0 0 999px rgba(244, 152, 28, .24); }
.jx-dames-case--choisie { box-shadow: inset 0 0 0 999px rgba(244, 152, 28, .5); }
.jx-dames-case--pris { box-shadow: inset 0 0 0 3px rgba(230, 0, 42, .55); }
.jx-dames-case--cible::after {
  content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(34, 49, 64, .4); pointer-events: none;
}
.jx-dames-case:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; z-index: 1; }
.jx-pion { width: 78%; height: 78%; border-radius: 50%; position: relative; pointer-events: none; }
.jx-pion--moi { background: var(--orange); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(34, 49, 64, .4); }
.jx-pion--lui { background: var(--nuit); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), 0 1px 2px rgba(34, 49, 64, .4); }
.jx-pion--dame::after {
  content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85);
}
.jx-dames-compte { font-weight: 700; }

/* ---- Salle de pause : la bataille navale -------------------- */
.jx-scene--navale { padding: 16px 10px; }
.jx-navale { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin: 8px 0 12px; }
.jx-navale-bloc { flex: 1 1 260px; max-width: 340px; }
.jx-navale-titre { font-weight: 800; text-align: center; margin-bottom: 6px; color: var(--bleu); }
.jx-navale-grille {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 4px;
  background: #cfe6e3; border-radius: 8px;
}
.jx-navale-grille--cible { background: #d7e3ee; }
.jx-nav-case {
  position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 3px;
  background: rgba(255, 255, 255, .55);
}
.jx-nav-case--cible { cursor: crosshair; }
.jx-nav-case--cible:hover:not(:disabled) { background: rgba(var(--orange-rgb), .35); }
.jx-nav-case:disabled { cursor: default; }
.jx-nav-case--navire { background: #8a97a6; }
.jx-nav-case--eau::after, .jx-nav-case--deduit::after {
  content: ""; position: absolute; inset: 38%; border-radius: 50%; background: rgba(34, 49, 64, .45);
}
.jx-nav-case--deduit::after { background: rgba(34, 49, 64, .2); }
.jx-nav-case--touche { background: var(--orange); }
.jx-nav-case--touche::after {
  content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 70%;
}
.jx-nav-case--coule { background: var(--rouge); }
.jx-nav-case--navire.jx-nav-case--touche { background: var(--orange); }

/* ---- Salle de pause : l'oiseau ------------------------------ */
.jx-scene--oiseau { padding: 12px 10px 16px; }
.jx-scene--oiseau canvas.jx-oiseau-plateau {
  width: 100%; max-width: 400px; margin: 0 auto; border-radius: 16px; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none;
}

/* ---- Salle de pause : le casse-briques ---------------------- */
.jx-scene--casse { padding: 12px 10px 16px; }
.jx-scene--casse canvas.jx-casse-plateau {
  width: 100%; max-width: 400px; margin: 0 auto; border-radius: 16px; cursor: none;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
@media (hover: none) { .jx-scene--casse canvas.jx-casse-plateau { cursor: auto; } }

/* ---- Salle de pause : le mot du jour ------------------------
   Grille de 6 × 5 tuiles ; vert Accompagnement = bien placée,
   orange Global = ailleurs dans le mot, gris = absente. */
.jx-scene--motjour { padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.jx-mdj-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(300px, 82%); }
.jx-mdj-tuile {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); border-radius: 8px; background: var(--white);
  font-weight: 900; font-size: clamp(22px, 7vw, 32px); color: var(--bleu); text-transform: uppercase;
  transition: background .25s, border-color .25s, color .25s;
}
.jx-mdj-tuile--pleine { border-color: #9aa3ad; }
.jx-mdj-tuile--bon { background: var(--vert); border-color: var(--vert); color: #fff; }
.jx-mdj-tuile--ailleurs { background: var(--orange); border-color: var(--orange); color: var(--nuit); }
.jx-mdj-tuile--absent { background: #9aa3ad; border-color: #9aa3ad; color: #fff; }
.jx-mdj-clavier { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; width: min(480px, 100%); }
.jx-mdj-touche {
  grid-column: span 2; min-width: 0; height: 48px; padding: 0; cursor: pointer;
  border: 0; border-radius: 8px; background: #e6e2dc; color: var(--bleu); font-weight: 800; font-size: 15px;
}
.jx-mdj-touche--large { grid-column: span 3; font-size: 13px; }
.jx-mdj-touche:active { transform: translateY(1px); }
.jx-mdj-touche--bon { background: var(--vert); color: #fff; }
.jx-mdj-touche--ailleurs { background: var(--orange); color: var(--nuit); }
.jx-mdj-touche--absent { background: #9aa3ad; color: #fff; }
@media (max-width: 420px) { .jx-mdj-touche { height: 44px; font-size: 13px; } .jx-mdj-touche--large { font-size: 11px; } }

/* ---- Salle de pause : lot 1 (taquin, code, billes, paires, couleurs) ---- */
.jx-scene--taquin, .jx-scene--code, .jx-scene--billes, .jx-scene--paires, .jx-scene--simon {
  padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
/* taquin */
.jx-taq-grille { display: grid; gap: 6px; width: min(380px, 100%); padding: 6px; background: var(--nuit); border-radius: 12px; }
.jx-taq-tuile {
  aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--sable); color: var(--nuit); font-weight: 900; font-size: clamp(16px, 5vw, 28px);
  box-shadow: inset 0 -4px 0 rgba(34, 49, 64, .18);
}
.jx-taq-tuile--place { background: #f6e3c7; box-shadow: inset 0 -4px 0 rgba(244, 152, 28, .55); }
.jx-taq-tuile--vide { background: transparent; box-shadow: none; cursor: default; }
/* code secret */
.jx-code { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(360px, 100%); }
.jx-code-secret, .jx-code-ligne { display: flex; align-items: center; gap: 8px; }
.jx-code-secret { padding: 6px 12px; background: var(--nuit); border-radius: 999px; }
.jx-code-essais { display: flex; flex-direction: column; gap: 5px; }
.jx-code-ligne { padding: 4px 10px; border-radius: 999px; }
.jx-code-ligne--active { background: rgba(var(--orange-rgb), .14); }
.jx-code-pion { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-soft); box-shadow: inset 0 2px 4px rgba(34, 49, 64, .25); }
.jx-code-pion--plein { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.jx-code-pion--cache { background: rgba(255, 255, 255, .15); }
.jx-code-retour { display: grid; grid-template-columns: repeat(2, 10px); gap: 3px; margin-left: 8px; }
.jx-code-retour i { width: 10px; height: 10px; border-radius: 50%; background: rgba(34, 49, 64, .12); }
.jx-code-retour i.jx-code-noir { background: var(--nuit); }
.jx-code-retour i.jx-code-blanc { background: #fff; box-shadow: 0 0 0 1.5px var(--nuit); }
.jx-code-palette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.jx-code-couleur { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-weight: 800; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.jx-code-action { height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--bleu); font-weight: 800; cursor: pointer; }
.jx-code-action--ok { background: var(--bleu); color: #fff; border-color: var(--bleu); }
/* solitaire à billes */
.jx-billes-plateau { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: min(360px, 100%); padding: 10px; background: #d9c9ad; border-radius: 50%; }
.jx-billes-hors { aspect-ratio: 1; }
.jx-billes-trou {
  aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #b9a98f; box-shadow: inset 0 3px 5px rgba(34, 49, 64, .35);
}
.jx-billes-trou--bille { background: radial-gradient(circle at 35% 30%, #ffd9a3 0 18%, var(--orange) 45%, #b86f0c 100%); box-shadow: 0 2px 3px rgba(34, 49, 64, .35); }
.jx-billes-trou--choisi { outline: 3px solid var(--nuit); outline-offset: 1px; }
.jx-billes-trou--cible { box-shadow: inset 0 0 0 3px var(--vert), inset 0 3px 5px rgba(34, 49, 64, .35); }
/* paires */
.jx-paires-grille { display: grid; gap: 6px; width: min(420px, 100%); }
.jx-carte-p {
  aspect-ratio: 3 / 4; min-width: 0; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--nuit) radial-gradient(circle, var(--orange) 0 7%, transparent 8%); color: transparent;
  font-size: clamp(20px, 6vw, 34px); font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", "DejaVu Sans", serif;
  transition: transform .15s;
}
.jx-carte-p--visible { background: var(--white); box-shadow: 0 0 0 2px var(--line); }
.jx-carte-p--trouvee { box-shadow: 0 0 0 2px var(--vert); cursor: default; }
/* mémoire des couleurs */
.jx-simon { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: min(320px, 90%); }
.jx-simon-pad {
  aspect-ratio: 1; border: 0; border-radius: 22px; cursor: pointer; background: var(--pad); opacity: .45;
  color: rgba(255, 255, 255, .8); font-weight: 900; font-size: 22px; transition: opacity .1s, transform .1s, box-shadow .1s;
}
.jx-simon-pad:disabled { cursor: default; }
.jx-simon-pad--allume { opacity: 1; transform: scale(1.03); box-shadow: 0 0 26px var(--pad); }

/* ---- Salle de pause : lot 2 (mots mêlés, tape vite, quiz, Yam's) ---- */
.jx-scene--mele, .jx-scene--tape, .jx-scene--quiz, .jx-scene--yams { padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* mots mêlés */
.jx-mele { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; align-items: flex-start; width: 100%; }
.jx-mele-grille { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; width: min(400px, 100%); }
.jx-mele-case {
  aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--white); color: var(--bleu); font-weight: 800; font-size: clamp(13px, 3.8vw, 19px); box-shadow: 0 0 0 1px var(--line);
}
.jx-mele-case--depart { box-shadow: 0 0 0 3px var(--orange); }
.jx-mele-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; max-width: 220px; }
.jx-mele-liste li { font-weight: 800; color: var(--bleu); letter-spacing: .04em; }
.jx-mele-liste li.jx-mele-trouve { color: #9aa3ad; text-decoration: line-through; }
/* tape vite */
.jx-tape { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(460px, 100%); }
.jx-tape-mot { font-size: clamp(30px, 9vw, 46px); font-weight: 900; color: var(--bleu); letter-spacing: .02em; min-height: 1.2em; }
.jx-tape-suite { color: var(--ink-soft); font-size: 1.05rem; min-height: 1.4em; }
.jx-tape-saisie {
  width: 100%; font: inherit; font-size: 24px; text-align: center; padding: 12px 14px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--white); color: var(--bleu);
}
.jx-tape-saisie:focus { outline: none; border-color: var(--orange); }
.jx-tape-saisie--faux { border-color: var(--rouge); background: rgba(230, 0, 42, .06); }
/* quiz */
.jx-quiz { width: min(560px, 100%); display: flex; flex-direction: column; gap: 14px; }
.jx-quiz-jauge { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.jx-quiz-jauge i { display: block; height: 100%; background: var(--orange); transition: width .1s linear; }
.jx-quiz-question { font-size: clamp(18px, 4.6vw, 22px); font-weight: 800; color: var(--bleu); text-align: center; min-height: 2.6em; }
.jx-quiz-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .jx-quiz-choix { grid-template-columns: 1fr; } }
.jx-quiz-reponse {
  text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--white);
  color: var(--bleu); font-weight: 700; font-size: 1rem; cursor: pointer;
}
.jx-quiz-reponse:hover:not(:disabled) { border-color: var(--orange); }
.jx-quiz-reponse--juste { background: var(--vert); border-color: var(--vert); color: #fff; }
.jx-quiz-reponse--fausse { background: var(--rouge); border-color: var(--rouge); color: #fff; }
/* Yam's */
.jx-yams { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(420px, 100%); }
.jx-yams-des { display: flex; gap: 10px; justify-content: center; }
.jx-de {
  width: 54px; height: 54px; padding: 8px; border: 0; border-radius: 12px; cursor: pointer; background: var(--white);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); box-shadow: 0 0 0 2px var(--line), 0 3px 0 rgba(34, 49, 64, .15);
}
.jx-de-point { width: 9px; height: 9px; margin: auto; border-radius: 50%; }
.jx-de-point--on { background: var(--nuit); }
.jx-de--garde { box-shadow: 0 0 0 3px var(--orange), 0 3px 0 rgba(34, 49, 64, .15); background: #fff4e5; }
.jx-mode--fort { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.jx-yams-feuille { width: 100%; border-collapse: collapse; font-size: .98rem; }
.jx-yams-feuille td { padding: 4px 8px; border-bottom: 1px solid var(--line); color: var(--bleu); }
.jx-yams-feuille td:last-child { text-align: right; width: 90px; }
.jx-yams-bonus td { color: var(--ink-soft); font-style: italic; }
.jx-yams-case { width: 72px; padding: 4px 0; border-radius: 8px; border: 1px dashed transparent; background: transparent; font-weight: 800; color: var(--ink-soft); cursor: default; }
.jx-yams-case--proposee { border-color: var(--orange); color: var(--u-text); cursor: pointer; }
.jx-yams-case--prise { color: var(--bleu); background: var(--bg-soft); }

/* ---- Salle de pause : lot 3 (arcade : envahisseurs, astéroïdes, traversée, sauteur, tour, ping-pong) ---- */
.jx-scene--arcade { padding: 12px 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.jx-scene--arcade canvas.jx-arcade-plateau {
  width: 100%; max-width: 400px; margin: 0 auto; border-radius: 16px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.jx-scene--arcade canvas.jx-arcade-plateau--large { max-width: 560px; }
.jx-pad { display: none; gap: 10px; justify-content: center; width: 100%; max-width: 400px; }
@media (hover: none) { .jx-pad { display: flex; } }
.jx-pad-b {
  flex: 1; min-height: 56px; border: 0; border-radius: 14px; background: var(--white); color: var(--bleu);
  font-size: 22px; font-weight: 900; box-shadow: 0 0 0 1px var(--line), 0 3px 0 rgba(34, 49, 64, .15);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.jx-pad-b:active { background: var(--orange); color: #fff; }

/* ---- Salle de pause : lot 4 (Reversi, trois à la suite, logimage, mahjong) ---- */
.jx-scene--rev, .jx-scene--trois, .jx-scene--logi, .jx-scene--mahj { padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Reversi */
.jx-rev { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: min(420px, 100%); padding: 8px; background: #1f6b45; border-radius: 14px; }
.jx-rev-case { aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 6px; background: #2e8a5a; position: relative; cursor: default; }
.jx-rev-case::after { content: ''; position: absolute; inset: 11%; border-radius: 50%; transition: background-color .25s, inset .2s; }
.jx-rev--orange::after { background: var(--orange); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.jx-rev--violet::after { background: #7B4DCC; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22); }
.jx-rev--possible { cursor: pointer; }
.jx-rev--possible::after { inset: 38%; background: rgba(255, 255, 255, .38); }
.jx-rev--possible:hover::after { inset: 20%; background: rgba(244, 152, 28, .55); }
.jx-rev--dernier { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); }
/* trois à la suite */
.jx-trois { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; width: min(420px, 100%); padding: 8px; background: #223140; border-radius: 14px; touch-action: none; }
.jx-trois-case {
  aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
  color: rgba(255, 255, 255, .92); font-size: clamp(15px, 4.8vw, 23px); font-weight: 900; line-height: 1;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18); transition: transform .15s, opacity .2s;
}
.jx-trois--choisie { transform: scale(.86); box-shadow: 0 0 0 3px #fff, inset 0 -4px 0 rgba(0, 0, 0, .18); }
.jx-trois--efface { transform: scale(.3); opacity: .15; }
.jx-trois--indice { animation: jx-trois-indice 1s ease-in-out infinite; }
@keyframes jx-trois-indice { 50% { transform: scale(.86); } }
@media (prefers-reduced-motion: reduce) {
  .jx-trois-case { transition: none; }
  .jx-trois--indice { animation: none; box-shadow: 0 0 0 3px #fff; }
}
/* logimage */
.jx-logi { display: grid; grid-template-columns: auto repeat(var(--n, 10), minmax(0, 1fr)); width: min(470px, 100%); user-select: none; -webkit-user-select: none; touch-action: none; }
.jx-logi-ind { display: flex; gap: 3px; font-weight: 800; color: var(--bleu); font-size: clamp(9px, 2.5vw, 13px); line-height: 1.15; }
.jx-logi-ind--col { flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 5px; }
.jx-logi-ind--lig { justify-content: flex-end; align-items: center; padding-right: 7px; white-space: nowrap; }
.jx-logi-ind--fait { color: #b3bac2; }
.jx-logi-case {
  aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; position: relative; cursor: pointer;
  background: var(--white); box-shadow: inset -1px -1px 0 #d9d2c8, inset 1px 1px 0 #d9d2c8;
}
.jx-logi--noir { background: var(--nuit); }
.jx-logi--croix::after, .jx-logi--erreur::after {
  content: '×'; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 900; font-size: clamp(12px, 3vw, 18px); color: var(--ink-soft);
}
.jx-logi--erreur { background: rgba(230, 0, 42, .12); }
.jx-logi--erreur::after { color: var(--rouge); }
.jx-logi--solution { background: rgba(244, 152, 28, .6); }
.jx-logi--bord-d { box-shadow: inset -2px -1px 0 #8e98a3, inset 1px 1px 0 #d9d2c8; }
.jx-logi--bord-b { box-shadow: inset -1px -2px 0 #8e98a3, inset 1px 1px 0 #d9d2c8; }
.jx-logi--bord-d.jx-logi--bord-b { box-shadow: inset -2px -2px 0 #8e98a3, inset 1px 1px 0 #d9d2c8; }
/* mahjong solitaire */
.jx-mahj { position: relative; width: min(560px, calc(100% - 14px)); aspect-ratio: 20 / 13.4; margin: 10px 0 0 14px; }
.jx-mahj-tuile {
  position: absolute; width: 10%; height: 20%; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: #fbf7ef; box-shadow: 3px 4px 0 #cfc5b4, 4px 5px 0 rgba(34, 49, 64, .3);
  transform: translate(calc(var(--z, 0) * -4px), calc(var(--z, 0) * -5px));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 900; font-size: clamp(14px, 4.4vw, 26px); line-height: 1;
}
.jx-mahj-tuile small { font-size: .5em; margin-top: 2px; }
.jx-mahj--a { color: var(--orange); }
.jx-mahj--b { color: #10A094; }
.jx-mahj--bloquee { background: #e9e2d6; cursor: default; }
.jx-mahj--choisie { background: #ffe7c2; box-shadow: 0 0 0 3px var(--orange), 3px 4px 0 #cfc5b4; }
.jx-mahj--indice { box-shadow: 0 0 0 3px #10A094, 3px 4px 0 #cfc5b4; }

/* ---- Salle de pause : lot 5 (backgammon, belote, tarot) ---- */
.jx-scene--bg, .jx-scene--belote, .jx-scene--tarot { padding: 12px 6px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* backgammon : 6 pointes | barre | 6 pointes | sorties ; en haut 13 → 24, en bas 12 → 1 */
.jx-bg {
  display: grid; width: min(640px, 100%); aspect-ratio: 1.25; padding: 6px; border-radius: 14px; background: #2e5e4e; gap: 0 2px;
  grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, .7fr) repeat(6, minmax(0, 1fr)) minmax(0, .8fr);
  grid-template-rows: minmax(0, 1fr) 54px minmax(0, 1fr);
}
.jx-bg-pt { position: relative; min-width: 0; padding: 3px 0; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; cursor: default; }
.jx-bg-pt--bas { flex-direction: column-reverse; }
.jx-bg-pt::before { content: ''; position: absolute; inset: 0; background: var(--tri, #E8E2DB); clip-path: polygon(0 0, 100% 0, 50% 86%); }
.jx-bg-pt--bas::before { clip-path: polygon(0 100%, 100% 100%, 50% 14%); }
.jx-bg-pt--b { --tri: #c9a27a; }
.jx-bg-pion {
  position: relative; z-index: 1; width: 84%; aspect-ratio: 1; flex: none; border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22); display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: clamp(9px, 2.4vw, 13px);
}
.jx-bg-pion--j { background: var(--orange); }
.jx-bg-pion--o { background: #7B4DCC; }
.jx-bg-barre, .jx-bg-sortie { position: relative; min-width: 0; border: 0; padding: 4px 0; background: rgba(0, 0, 0, .2); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: default; }
.jx-bg-barre--bas, .jx-bg-sortie--bas { flex-direction: column-reverse; }
.jx-bg-sortie small { color: #fff; font-weight: 800; font-size: 12px; }
.jx-bg-milieu { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.jx-bg-milieu .jx-de { width: 40px; height: 40px; padding: 6px; cursor: default; }
.jx-bg-milieu .jx-de--use { opacity: .35; }
.jx-bg-milieu .jx-de--o { background: #efe7fb; }
.jx-bg--source { cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); border-radius: 6px; }
.jx-bg--choisi { box-shadow: inset 0 0 0 3px #fff; border-radius: 6px; }
.jx-bg--cible { cursor: pointer; }
.jx-bg--cible::after {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: 2; width: 34%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 3px rgba(244, 152, 28, .8);
}
.jx-bg--dernier::before { filter: brightness(1.12); }
/* table de cartes (belote, tarot) */
.jx-ct-table {
  display: grid; width: min(660px, 100%); gap: 8px; padding: 10px; border-radius: 16px; background: #1f6b45; color: #fff;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto minmax(170px, auto) auto auto;
  grid-template-areas: ". nord ." "ouest centre est" "main main main" "encheres encheres encheres";
}
.jx-ct-nord { grid-area: nord; } .jx-ct-ouest { grid-area: ouest; } .jx-ct-est { grid-area: est; }
.jx-ct-centre { grid-area: centre; position: relative; min-height: 170px; }
.jx-ct-main { grid-area: main; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px; border-radius: 12px; }
.jx-ct-encheres { grid-area: encheres; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.jx-ct-encheres:empty { display: none; }
.jx-ct-nord, .jx-ct-ouest, .jx-ct-est { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; border-radius: 10px; }
.jx-ct-nom { margin: 0; font-size: .78rem; font-weight: 800; text-align: center; line-height: 1.2; }
.jx-ct-dos { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; padding-left: 6px; }
.jx-ct-dos i { width: 13px; height: 20px; margin-left: -6px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .7); background: repeating-linear-gradient(45deg, #7B4DCC 0 3px, #6a3fbd 3px 6px); }
.jx-ct--actif { box-shadow: inset 0 0 0 2px var(--orange); }
.jx-ct-carte {
  width: 44px; height: 64px; padding: 0; border-radius: 6px; border: 1px solid #d9d2c8; background: #fff; color: #223140;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; line-height: 1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25); transition: transform .12s;
}
.jx-ct-carte--rouge { color: #E6002A; }
.jx-ct-main .jx-ct-carte:disabled { opacity: .5; cursor: default; }
.jx-ct-carte--jouable { cursor: pointer; }
.jx-ct-carte--jouable:hover, .jx-ct-carte--jouable:focus-visible { transform: translateY(-5px); }
.jx-ct-centre .jx-ct-carte { position: absolute; left: 50%; top: 50%; }
.jx-ct-retourne { transform: translate(-50%, -50%) rotate(-4deg); }
.jx-ct-pli--0 { transform: translate(-50%, 8%); }
.jx-ct-pli--2 { transform: translate(-50%, -108%); }
.jx-ct-pli--1 { transform: translate(-135%, -50%); }
.jx-ct-pli--3 { transform: translate(35%, -50%); }
@media (max-width: 520px) { .jx-ct-carte { width: 38px; height: 56px; font-size: 13px; } }
/* tarot : atouts, Excuse, cartes choisies pour l'écart */
.jx-ct-carte--atout { background: #223140; color: #fff; border-color: #223140; }
.jx-ct-carte--excuse { background: #D4AF37; color: #223140; border-color: #b8952b; }
.jx-ct-carte--choisie { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--orange), 0 2px 0 rgba(0, 0, 0, .25); }
.jx-scene--tarot .jx-ct-main { gap: 3px; }