/* Exemple 1, « Le Rideau » : noir de salle, velours, or. Phil Darwin, 03/10/2026, version 3. */
:root {
  --noir: #070605; --noir-2: #0f0c0a; --noir-3: #16120f;
  --ivoire: #f3ece0; --ivoire-2: #d9d0c2; --gris: #a59c8f;
  --or: #d4a64a; --or-clair: #f0d48a; --or-trait: rgba(212, 166, 74, .28);
  --velours: #5c0b12;
  --f-titre: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --f-texte: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ressort: cubic-bezier(.2, .7, .2, 1);
  --rideau: cubic-bezier(.72, 0, .18, 1);
  --cote: clamp(20px, 6vw, 88px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noir); color: var(--ivoire); font: 400 16px/1.6 var(--f-texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--cote); }
.wrap.etroit { max-width: 860px; }
section { position: relative; }

/* grain de pellicule, fixe, sans coût au défilement */
body::after { content: none; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* bandeau « exemple » et bulle */
.bandeau-exemple { position: relative; z-index: 20; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; align-items: center; padding: 7px 16px; background: #15110d; color: #e6d8bd; font-size: 12.5px; line-height: 1.4; text-align: center; border-bottom: 1px solid var(--or-trait); }
.bandeau-exemple .retour { color: var(--or-clair); font-weight: 600; }
.bulle { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 120; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 14px; background: var(--ivoire); color: #17120c; font-size: 14.5px; font-weight: 500; box-shadow: 0 18px 40px rgba(0,0,0,.45); transition: opacity .3s, transform .4s var(--ressort); }
.bulle.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Le rideau d'ouverture ---------- */
.rideau { display: none; }
.js .rideau { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.rideau .pan { position: absolute; top: 0; bottom: 0; width: 51%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), transparent 22%, transparent 70%, rgba(0,0,0,.6)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 1.2%, rgba(0,0,0,0) 3.4%, rgba(255,214,190,.10) 4.6%, rgba(0,0,0,0) 5.8%, rgba(0,0,0,.42) 8%),
    linear-gradient(90deg, #3a060b, #6d1019 50%, #3a060b);
  transition: transform 1.55s var(--rideau); will-change: transform; }
.rideau .pan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(90deg, var(--or) 0 2px, transparent 2px 6px); opacity: .85; }
.rideau .gauche { left: 0; transform-origin: 0 0; box-shadow: inset -30px 0 40px rgba(0,0,0,.55); }
.rideau .droite { right: 0; transform-origin: 100% 0; box-shadow: inset 30px 0 40px rgba(0,0,0,.55); }
.rideau .lambrequin { position: absolute; left: 0; right: 0; top: 0; height: clamp(54px, 11vh, 110px);
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2%, transparent 4%, rgba(255,214,190,.08) 5%, transparent 6%), linear-gradient(#2c0408, #5a0d14);
  -webkit-mask: radial-gradient(circle at 50% 0, #000 70%, transparent 71%) 0 100% / 90px 44px repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 22px) no-repeat;
          mask: radial-gradient(circle at 50% 0, #000 70%, transparent 71%) 0 100% / 90px 44px repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 22px) no-repeat;
  transition: transform 1s var(--rideau) .5s; z-index: 2; }
.rideau-annonce { position: absolute; inset: 0; z-index: 3; margin: 0; display: grid; place-content: center; text-align: center; gap: 10px; opacity: 0; transition: opacity .5s ease; }
.rideau-annonce span { font: 600 12px/1 var(--f-texte); letter-spacing: .32em; text-transform: uppercase; color: var(--or-clair); }
.rideau-annonce b { font: italic 500 clamp(44px, 9vw, 96px)/1 var(--f-titre); color: var(--ivoire); text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.rideau.annonce .rideau-annonce { opacity: 1; }
.rideau.ouvre .rideau-annonce { opacity: 0; transition-duration: .35s; }
.rideau.ouvre .gauche { transform: translateX(-104%) skewX(-4deg); }
.rideau.ouvre .droite { transform: translateX(104%) skewX(4deg); }
.rideau.ouvre .lambrequin { transform: translateY(-110%); }

/* ---------- L'ouverture (héros) ---------- */
.ouverture { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; background: #000; }
.ouverture .fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; z-index: -3; }
.nuit { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: rgba(4, 3, 2, .45); }
.js .nuit.torche { background: rgba(4, 3, 2, .8);
  -webkit-mask-image: radial-gradient(circle calc(var(--r, 0) * 1px) at calc(var(--x, -500) * 1px) calc(var(--y, -500) * 1px), transparent 0 38%, #000 100%);
          mask-image: radial-gradient(circle calc(var(--r, 0) * 1px) at calc(var(--x, -500) * 1px) calc(var(--y, -500) * 1px), transparent 0 38%, #000 100%); }
.halo { position: absolute; left: 0; top: 0; width: 520px; height: 520px; z-index: -1; pointer-events: none; border-radius: 50%; transform: translate3d(-999px, -999px, 0); mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 214, 150, .07), rgba(255, 200, 120, .025) 40%, transparent 64%); will-change: transform; }
.ouverture::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(7,6,5,.96) 0, rgba(7,6,5,.55) 30%, transparent 58%), linear-gradient(180deg, rgba(7,6,5,.7), transparent 22%); }

.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 28px; padding: 18px var(--cote); }
.marque { font: italic 500 22px/1 var(--f-titre); text-decoration: none; color: var(--ivoire); margin-right: auto; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav ul a { text-decoration: none; font-size: 14px; color: var(--ivoire-2); position: relative; }
.nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--or); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ressort); }
.nav ul a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-essai { text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 13px 18px; border-radius: 999px; border: 1px solid rgba(240, 212, 138, .55); color: var(--or-clair); background: rgba(7,6,5,.55); }

.ouverture-texte { width: min(640px, 100%); margin-left: auto; padding: 0 var(--cote) clamp(84px, 13vh, 130px); }
.surtitre { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--or-clair); }
.surtitre i { width: 28px; height: 1px; background: var(--or); }
.nom { margin: 0; font: 500 clamp(66px, 9vw, 140px)/.86 var(--f-titre); letter-spacing: -.02em; }
.nom .ligne { display: block; white-space: nowrap; }
.nom .ligne + .ligne { font-style: italic; color: var(--or-clair); padding-left: .5em; }
.phrase { max-width: 36ch; margin: 22px 0 0; font-size: clamp(16px, 1.35vw, 19px); color: #e9e1d3; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 28px; }
.credit { position: absolute; left: var(--cote); bottom: 22px; margin: 0; font-size: 12.5px; color: rgba(243, 236, 224, .55); letter-spacing: .02em; }
.credit.bas { z-index: 3; }
.defiler { position: absolute; left: 50%; bottom: 18px; width: 1px; height: 46px; transform: translateX(-50%); background: rgba(243,236,224,.25); overflow: hidden; }
.defiler span { position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--or-clair); animation: goutte 2.2s var(--ressort) infinite; }
@keyframes goutte { to { top: 110%; } }

/* lettres « obturateur » (21st.dev « Hero Shutter Text », traduit en CSS) */
.l { position: relative; display: inline-block; }
.js .ouverture .l { opacity: 0; filter: blur(12px); transform: translateY(.18em); }
.js .ouverture.pret .l { animation: lettre .9s var(--ressort) forwards; animation-delay: calc(var(--i) * 55ms + .25s); }
.l::before, .l::after { content: attr(data-c); position: absolute; left: 0; top: 0; color: var(--or); pointer-events: none; opacity: 0; }
.l::before { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%); }
.l::after { clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%); }
.js .ouverture.pret .l::before { animation: tranche-g .75s ease-in-out both; animation-delay: calc(var(--i) * 55ms); }
.js .ouverture.pret .l::after { animation: tranche-d .75s ease-in-out both; animation-delay: calc(var(--i) * 55ms + .1s); }
@keyframes lettre { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes tranche-g { 0% { transform: translateX(-80%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(80%); opacity: 0; } }
@keyframes tranche-d { 0% { transform: translateX(80%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(-80%); opacity: 0; } }
.js .ouverture .surtitre, .js .ouverture .phrase, .js .ouverture .actions, .js .ouverture .credit, .js .ouverture .nav { opacity: 0; transform: translateY(14px); }
.js .ouverture.pret .surtitre, .js .ouverture.pret .phrase, .js .ouverture.pret .actions, .js .ouverture.pret .credit, .js .ouverture.pret .nav { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s var(--ressort); }
.js .ouverture.pret .surtitre { transition-delay: .1s; }
.js .ouverture.pret .phrase { transition-delay: .75s; }
.js .ouverture.pret .actions { transition-delay: .95s; }
.js .ouverture.pret .credit, .js .ouverture.pret .nav { transition-delay: 1.1s; }

/* mot qui tourne sous le nom */
.tournant { margin: 18px 0 0; height: 1.3em; padding-top: .1em; overflow: hidden; font: italic 500 clamp(26px, 2.6vw, 36px)/1.15 var(--f-titre); color: var(--or-clair); }
.mot { display: inline-block; }
.lt { position: relative; display: inline-block; }
.lt.entre { animation: lettre-t .7s var(--ressort) both; animation-delay: calc(var(--i) * 35ms); }
.lt.entre::before, .lt.entre::after { content: attr(data-c); position: absolute; left: 0; top: 0; color: #fff; pointer-events: none; opacity: 0; }
.lt.entre::before { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%); animation: tranche-g .6s ease-in-out both; animation-delay: calc(var(--i) * 35ms); }
.lt.entre::after { clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); animation: tranche-d .6s ease-in-out both; animation-delay: calc(var(--i) * 35ms + .08s); }
.lt.sort { animation: sort-t .35s ease-in both; animation-delay: calc(var(--i) * 20ms); }
@keyframes lettre-t { from { opacity: 0; transform: translateY(.5em); filter: blur(6px); } }
@keyframes sort-t { to { opacity: 0; transform: translateY(-.5em); filter: blur(6px); } }
.js .ouverture .tournant { opacity: 0; }
.js .ouverture.pret .tournant { opacity: 1; transition: opacity .9s ease .6s; }

/* bande velours qui défile */
.bande-or-cadre { overflow: hidden; padding: 18px 0; background: var(--noir); }
.bande-or { transform: rotate(-1.6deg) scaleX(1.04); background: linear-gradient(90deg, #3a060b, #6d1019 50%, #3a060b); border-block: 1px solid var(--or); overflow: hidden; }
.bande-or .piste { padding: 16px 0; animation: defile 30s linear infinite reverse; }
.bande-or span { font: italic 500 clamp(26px, 3.2vw, 42px)/1 var(--f-titre); color: var(--or-clair); }
.bande-or span::after { background: var(--or-clair); }

/* pastille dorée qui tourne */
.offre { position: relative; }
.pastille-tourne { position: absolute; right: -14px; top: -46px; width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: var(--noir); box-shadow: inset 0 0 0 1px var(--or); color: var(--or-clair); z-index: 2; }
.pastille-tourne svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: tourne 16s linear infinite; }
.pastille-tourne text { font: 600 13px var(--f-texte); letter-spacing: .1em; fill: var(--or-clair); }
.pastille-tourne b { position: relative; font: italic 500 19px/1 var(--f-titre); text-align: center; color: var(--ivoire); }
.pastille-tourne sup { font-size: .55em; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Boutons ---------- */
.btn { --fond: var(--or); display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; padding: 15px 26px; border: 0; border-radius: 999px; background: var(--fond); color: #150f06; font: 600 15px/1 var(--f-texte); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .3s, box-shadow .3s; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .7s var(--ressort); }
.btn:hover { background: var(--or-clair); box-shadow: 0 16px 34px rgba(0, 0, 0, .5); }
.btn:hover::after { left: 130%; }
.btn.contour { background: rgba(7,6,5,.55); color: var(--ivoire); box-shadow: inset 0 0 0 1px rgba(243,236,224,.55); }
.btn.contour:hover { box-shadow: inset 0 0 0 1px var(--or-clair); color: var(--or-clair); }
.btn.ghost { background: transparent; color: var(--ivoire); box-shadow: inset 0 0 0 1px rgba(243,236,224,.4); }
.petit-btn { padding: 11px 18px; font-size: 14px; }
.lien-or { display: inline-block; margin-top: 18px; padding: 4px 0; border: 0; background: none; cursor: pointer; color: var(--or-clair); font: 500 15px var(--f-texte); text-decoration: none; background-image: linear-gradient(var(--or), var(--or)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .4s var(--ressort); }
.lien-or:hover { background-size: 30% 1px; }
.actions .lien-or { margin: 0 0 0 6px; }

/* ---------- Bandeau des références ---------- */
.refs { border-block: 1px solid var(--or-trait); background: var(--noir-2); }
.defile { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.piste { display: flex; width: max-content; padding: 20px 0; animation: defile 46s linear infinite; }
.piste span { display: inline-flex; align-items: center; gap: 44px; padding-right: 44px; font: italic 400 clamp(19px, 2vw, 25px)/1 var(--f-titre); color: rgba(243,236,224,.82); white-space: nowrap; }
.piste span::after { content: ""; width: 6px; height: 6px; background: var(--or); transform: rotate(45deg); }
.refs:hover .piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Le défilement qui fait bouger Phil (méthode scroll-world, vraies images) ---------- */
.defilement { background: #000; }
.cadre-defilement { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.defilement.actif { height: 330vh; }
.defilement.actif .cadre-defilement { position: sticky; top: 0; }
.toile { position: absolute; inset: 0; width: 100%; height: 100%; }
.toile-repli { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.defilement.actif .toile-repli { opacity: 0; transition: opacity .6s; }
.voile { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,.65)), linear-gradient(0deg, rgba(0,0,0,.92) 0, rgba(0,0,0,.4) 32%, transparent 55%); }
.etapes { position: absolute; left: var(--cote); right: var(--cote); bottom: clamp(70px, 13vh, 130px); max-width: 640px; min-height: 9em; }
.etape { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; font: 500 clamp(28px, 3.6vw, 50px)/1.08 var(--f-titre); color: var(--ivoire); text-wrap: balance; }
.etape small { display: block; margin-bottom: 14px; font: 600 12px/1 var(--f-texte); letter-spacing: .26em; text-transform: uppercase; color: var(--or-clair); }
.defilement.actif .etape { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }
.defilement:not(.actif) .etapes { position: absolute; display: grid; gap: 22px; min-height: 0; }
.defilement:not(.actif) .etape { position: static; font-size: clamp(22px, 2.6vw, 34px); }
.jauge { position: absolute; left: var(--cote); right: var(--cote); bottom: 46px; height: 1px; background: rgba(243,236,224,.18); }
.jauge i { position: absolute; inset: 0; background: var(--or); transform-origin: left; transform: scaleX(0); }
.defilement:not(.actif) .jauge { display: none; }

/* ---------- Le spectacle ---------- */
.spectacle { padding: clamp(90px, 13vw, 170px) 0; background: radial-gradient(60% 50% at 20% 30%, rgba(92, 11, 18, .45), transparent 70%), var(--noir); }
.spectacle-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.affiche { position: relative; margin: 0; border-radius: 6px; overflow: hidden; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ressort); box-shadow: 0 40px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(240,212,138,.18); will-change: transform; }
.affiche:hover { transition-duration: .12s; }
.affiche img { width: 100%; height: auto; }
.affiche .reflet { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at var(--gx, 30%) var(--gy, 20%), rgba(255, 240, 210, .28), transparent 60%); mix-blend-mode: soft-light; }
.surtitre-s { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--or-clair); }
.titre { margin: 0; font: 500 clamp(40px, 5.6vw, 82px)/1 var(--f-titre); letter-spacing: -.015em; text-wrap: balance; }
.chapo { max-width: 52ch; margin: 22px 0 0; font-size: clamp(16.5px, 1.3vw, 19px); color: var(--ivoire-2); }
.citation { margin: 30px 0 0; padding-left: 20px; border-left: 1px solid var(--or); font: italic 400 clamp(22px, 2.2vw, 30px)/1.25 var(--f-titre); color: var(--ivoire); }
.citation cite { display: block; margin-top: 10px; font: 600 11.5px/1 var(--f-texte); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.spectacle .actions { margin-top: 34px; }

/* ---------- Galerie qui glisse ---------- */
.galerie { padding: 0 0 clamp(90px, 11vw, 150px); }
.galerie .wrap { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 20px; margin-bottom: 30px; }
.galerie .wrap .surtitre-s { width: 100%; }
.glisse-aide { margin: 0; font-size: 13px; color: var(--gris); display: inline-flex; align-items: center; gap: 10px; }
.glisse-aide::after { content: ""; width: 34px; height: 1px; background: var(--or); animation: glisse 1.8s var(--ressort) infinite alternate; }
@keyframes glisse { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
.bande { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--cote) 18px; scroll-padding: 0 var(--cote); scrollbar-width: thin; scrollbar-color: var(--or) transparent; cursor: grab; }
.bande.tire { cursor: grabbing; scroll-snap-type: none; }
.bande figure { flex: 0 0 auto; margin: 0; height: clamp(280px, 56vh, 540px); width: calc(clamp(280px, 56vh, 540px) * var(--w)); max-width: 86vw; scroll-snap-align: start; position: relative; overflow: hidden; border-radius: 4px; }
.bande img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ressort), filter .6s; filter: saturate(.9); user-select: none; -webkit-user-drag: none; }
.bande figure:hover img { transform: scale(1.1); filter: saturate(1.05); }
.bande figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; font-size: 13.5px; color: var(--ivoire); background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); }

/* ---------- Les ateliers ---------- */
.cours { padding: clamp(90px, 11vw, 150px) 0; background: var(--noir-2); border-top: 1px solid var(--or-trait); }
.slogan { margin: 0; font: 500 clamp(52px, 9vw, 138px)/.95 var(--f-titre); letter-spacing: -.02em; }
.slogan span { display: inline-block; }
.slogan span:last-child { font-style: italic; color: var(--or-clair); position: relative; }
.slogan span:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .045em; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ressort) .9s; }
.js .slogan[data-apparait] span { opacity: 0; transform: translateY(.3em); transition: opacity .8s ease, transform 1s var(--ressort); }
.js .slogan.vu span { opacity: 1; transform: none; }
.js .slogan.vu span:nth-child(2) { transition-delay: .18s; }
.js .slogan.vu span:nth-child(3) { transition-delay: .36s; }
.slogan.vu span:last-child::after, .slogan:not([data-apparait]) span:last-child::after { transform: scaleX(1); }
.cours-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(30px, 6vw, 90px); margin-top: clamp(40px, 6vw, 70px); align-items: start; }
.ateliers { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--or-trait); }
.ateliers li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 6px 26px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--or-trait); cursor: default; outline: none; }
.ateliers h3 { margin: 0; font: 500 clamp(24px, 2.4vw, 34px)/1.1 var(--f-titre); transition: transform .5s var(--ressort), color .3s; }
.ateliers p { margin: 0; color: var(--ivoire-2); font-size: 15.5px; }
.ateliers li:hover h3, .ateliers li:focus-visible h3 { transform: translateX(12px); color: var(--or-clair); font-style: italic; }
.apercu-flottant { position: fixed; left: 0; top: 0; z-index: 30; width: 260px; height: 330px; object-fit: cover; border-radius: 6px; pointer-events: none; opacity: 0; transform: translate3d(-999px, -999px, 0) scale(.85); transition: opacity .35s, scale .35s; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.apercu-flottant.on { opacity: 1; }
.lieu { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 22px; border: 1px solid var(--or-trait); border-radius: 16px; background: linear-gradient(160deg, rgba(212,166,74,.08), transparent 60%); position: sticky; top: 30px; }
.affiche.petite { border-radius: 6px; }
.lieu p { margin: 0 0 10px; color: var(--ivoire-2); font-size: 15px; }
.lieu .lieu-jour { font: italic 500 26px/1.1 var(--f-titre); color: var(--or-clair); }
.coches { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.coches li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ivoire); }
.coches li::before { content: ""; position: absolute; left: 3px; top: .38em; width: 6px; height: 11px; border: solid var(--or); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- Formules (pastille qui glisse) ---------- */
.formules { padding: clamp(90px, 11vw, 150px) 0; }
.selecteur { position: relative; display: inline-flex; max-width: 100%; margin-top: 30px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--or-trait); overflow-x: auto; scrollbar-width: none; }
.selecteur::-webkit-scrollbar { display: none; }
.selecteur button { position: relative; z-index: 1; flex: 0 0 auto; padding: 11px 20px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--ivoire-2); transition: color .35s; }
.selecteur button.on { color: #150f06; font-weight: 600; }
.pastille { position: absolute; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 999px; background: var(--or); transition: transform .5s cubic-bezier(.22, 1, .36, 1), width .5s cubic-bezier(.22, 1, .36, 1); }
.offre { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 40px; align-items: end; margin-top: 22px; padding: clamp(24px, 4vw, 44px); border-radius: 22px; background: radial-gradient(80% 120% at 0% 0%, rgba(212,166,74,.12), transparent 60%), var(--noir-3); box-shadow: inset 0 0 0 1px var(--or-trait); }
.offre-panneau { grid-column: 1; grid-row: 1; }
.offre-panneau.entre { animation: entre .6s var(--ressort); }
@keyframes entre { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }
.prix { margin: 0; font: italic 500 clamp(46px, 6vw, 80px)/1 var(--f-titre); color: var(--or-clair); }
.prix-sous { margin: 10px 0 0; color: var(--ivoire-2); }
.offre-pied { grid-column: 2; grid-row: 1; display: grid; gap: 12px; justify-items: start; }
.petit { margin: 0; font-size: 13.5px; color: var(--gris); }

/* ---------- Le test ---------- */
.test { padding: clamp(90px, 11vw, 150px) 0; text-align: center; background: radial-gradient(50% 60% at 50% 0%, rgba(240, 212, 138, .14), transparent 70%), var(--noir); border-top: 1px solid var(--or-trait); }
.test .chapo { margin-inline: auto; }
.quiz { margin-top: 40px; padding: clamp(22px, 4vw, 40px); border-radius: 22px; background: var(--noir-3); box-shadow: inset 0 0 0 1px var(--or-trait), 0 40px 80px rgba(0,0,0,.4); text-align: left; }
.quiz.entre { animation: entre .55s var(--ressort); }
.quiz-tete { display: flex; align-items: center; gap: 16px; }
.quiz-etape { margin: 0; flex: 0 0 auto; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); }
.quiz-barre { position: relative; flex: 1; height: 2px; background: rgba(243,236,224,.14); border-radius: 2px; overflow: hidden; }
.quiz-barre i { position: absolute; inset: 0; background: var(--or); transform-origin: left; transform: scaleX(var(--p)); transition: transform .6s var(--ressort); }
.quiz-q { margin: 24px 0 22px; font: 500 clamp(24px, 2.6vw, 34px)/1.2 var(--f-titre); }
.quiz-r { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-r button { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; border: 0; border-radius: 14px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(243,236,224,.14); cursor: pointer; font-size: 15.5px; line-height: 1.35; transition: box-shadow .25s, background .25s, transform .25s; animation: entre .5s var(--ressort) both; animation-delay: calc(var(--i) * 70ms); }
.quiz-r button:hover { box-shadow: inset 0 0 0 1px var(--or); transform: translateY(-2px); }
.quiz-r .lettre { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--or); color: var(--or-clair); font-size: 13px; font-weight: 600; }
.quiz-r button.choisi { background: var(--or); color: #150f06; }
.quiz-r button.choisi .lettre { box-shadow: inset 0 0 0 1px #150f06; color: #150f06; }
.quiz-profil { margin: 14px 0 0; font: italic 500 clamp(34px, 4.4vw, 56px)/1.05 var(--f-titre); color: var(--or-clair); }
.quiz-profil span { position: relative; display: inline-block; }
.quiz-profil span::after { content: ""; position: absolute; inset: -.05em -.1em; background: var(--or); transform-origin: right; animation: rideau-texte 1s var(--rideau) .15s both; }
@keyframes rideau-texte { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.quiz-texte { margin: 16px 0 0; font-size: 17px; color: var(--ivoire-2); }
.quiz-cours { margin: 18px 0 0; font-size: 17px; }
.quiz-cours b { color: var(--or-clair); font-weight: 600; }
.quiz-apporte { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.quiz-apporte li { position: relative; padding-left: 26px; color: var(--ivoire); }
.quiz-apporte li::before { content: ""; position: absolute; left: 3px; top: .4em; width: 6px; height: 11px; border: solid var(--or); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.quiz-note { margin: 16px 0 0; font-size: 12.5px; color: var(--gris); }

/* ---------- Parcours d'élève ---------- */
.parcours { padding: clamp(90px, 11vw, 150px) 0; background: var(--noir-2); border-top: 1px solid var(--or-trait); }
.etapes-eleve { list-style: none; counter-reset: e; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; position: relative; }
.etapes-eleve::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: linear-gradient(90deg, var(--or), rgba(212,166,74,.15)); }
.etapes-eleve li { counter-increment: e; position: relative; padding-top: 76px; }
.etapes-eleve li::before { content: counter(e); position: absolute; left: 0; top: 0; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--noir-2); box-shadow: inset 0 0 0 1px var(--or); font: italic 500 28px/1 var(--f-titre); color: var(--or-clair); }
.etapes-eleve b { display: block; font: 500 23px/1.15 var(--f-titre); margin-bottom: 8px; }
.etapes-eleve span { color: var(--ivoire-2); font-size: 15px; }
.parrain { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 54px; padding: 22px 26px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--or-trait); }
.parrain p { margin: 0; color: var(--ivoire-2); }
.parrain p b { display: block; font: italic 500 24px/1.2 var(--f-titre); color: var(--ivoire); margin-bottom: 4px; }
.code { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px; border: 1px dashed var(--or); border-radius: 12px; background: rgba(212,166,74,.08); cursor: pointer; font: 600 17px/1 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .08em; color: var(--or-clair); }
.code span { font: 600 12px/1 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--ivoire-2); }

/* ---------- Programmer Phil ---------- */
.pros { padding: clamp(100px, 12vw, 170px) 0; overflow: hidden; }
.pros-fond { position: absolute; left: 0; right: 0; top: 0; height: min(100%, 100vh); background: url(../media/phil-projecteurs.webp) 60% 30% / cover no-repeat; opacity: .3; -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent); mask: linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent); }
.pros .wrap { position: relative; }
.formats { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.formats li { display: grid; gap: 4px; padding: 20px 0; border-top: 1px solid var(--or-trait); }
.formats span { font: 500 clamp(22px, 2.2vw, 30px)/1.15 var(--f-titre); transition: color .3s, transform .5s var(--ressort); }
.formats em { font-style: normal; color: var(--ivoire-2); font-size: 15px; }
.formats li:hover span { color: var(--or-clair); transform: translateX(8px); font-style: italic; }
.telecharger { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.telecharger a { padding: 13px 18px; border-radius: 999px; font-size: 14px; text-decoration: none; color: var(--ivoire); box-shadow: inset 0 0 0 1px rgba(243,236,224,.3); transition: box-shadow .3s, color .3s; }
.telecharger a:hover { box-shadow: inset 0 0 0 1px var(--or); color: var(--or-clair); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; padding: clamp(22px, 4vw, 36px); border-radius: 22px; background: rgba(15, 12, 10, .94); box-shadow: inset 0 0 0 1px var(--or-trait); }
.form label, dialog label { display: grid; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ivoire-2); }
.form .plein { grid-column: 1 / -1; }
input, select, textarea { width: 100%; padding: 14px 15px; border: 0; border-radius: 12px; background: #1b1612; color: var(--ivoire); box-shadow: inset 0 0 0 1px rgba(243,236,224,.18); font: 400 16px/1.4 var(--f-texte); letter-spacing: 0; text-transform: none; transition: box-shadow .25s; color-scheme: dark; }
input::placeholder, textarea::placeholder { color: #a39a8d; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--or); }
.form-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }

/* ---------- Presse ---------- */
.presse { padding: clamp(90px, 11vw, 150px) 0; border-top: 1px solid var(--or-trait); }
.articles { list-style: none; margin: 40px 0 0; padding: 0; }
.articles a { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 8px 30px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--or-trait); text-decoration: none; }
.articles li:last-child a { border-bottom: 1px solid var(--or-trait); }
.articles a::after { content: "↗"; color: var(--or); font-size: 20px; transition: transform .4s var(--ressort); }
.articles a:hover::after { transform: translate(4px, -4px); }
.source { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); }
.manchette { font: italic 400 clamp(22px, 2.6vw, 34px)/1.2 var(--f-titre); transition: color .3s; }
.articles a:hover .manchette { color: var(--or-clair); }
.note-avis { margin: 30px 0 0; color: var(--gris); font-size: 14.5px; }

/* ---------- Agenda ---------- */
.agenda { padding: 0 0 clamp(90px, 11vw, 150px); }
.dates { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; }
.dates li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 20px 24px; border-radius: 16px; background: var(--noir-3); box-shadow: inset 0 0 0 1px rgba(243,236,224,.08); transition: box-shadow .3s, transform .4s var(--ressort); }
.dates li:hover { box-shadow: inset 0 0 0 1px var(--or-trait); transform: translateX(4px); }
.jour { font: italic 500 26px/1 var(--f-titre); color: var(--or-clair); }
.dates b { display: block; font-weight: 600; font-size: 17px; }
.dates small { color: var(--gris); font-size: 14px; }

/* ---------- Pied de page ---------- */
.pied { padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--or-trait); overflow: hidden; }
.pied-nom { margin: 0 0 30px; text-align: center; white-space: nowrap; font: italic 500 17vw/0.9 var(--f-titre); color: transparent; -webkit-text-stroke: 1px rgba(212, 166, 74, .55); letter-spacing: -.02em; }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: 14.5px; color: var(--ivoire-2); }
.cols b { display: block; margin-bottom: 6px; color: var(--ivoire); font-weight: 600; }

/* ---------- Barre du bas (téléphone) ---------- */
.barre-mobile { display: none; }

/* ---------- Fenêtres ---------- */
dialog { width: min(460px, 92vw); max-height: 88vh; padding: 30px 26px 26px; border: 0; border-radius: 22px; background: #110e0b; color: var(--ivoire); box-shadow: inset 0 0 0 1px var(--or-trait), 0 40px 100px rgba(0,0,0,.7); }
dialog[open] { animation: entre .45s var(--ressort); }
dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
dialog h3 { margin: 0 0 6px; font: italic 500 32px/1.1 var(--f-titre); color: var(--or-clair); }
dialog form { display: grid; gap: 14px; margin-top: 18px; }
dialog .btn { width: 100%; margin-top: 4px; }
.fermer { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); cursor: pointer; font-size: 22px; line-height: 1; color: var(--ivoire); }
.dialog-video { width: min(940px, 94vw); padding: 56px 16px 16px; }
.video-cadre { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.video-cadre iframe { width: 100%; height: 100%; border: 0; }
.dialog-video .petit { margin-top: 12px; }

/* ---------- Apparitions ---------- */
.js [data-apparait]:not(.slogan) { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1s var(--ressort); }
.js [data-apparait].vu { opacity: 1; transform: none; }
.formats li:nth-child(2), .etapes-eleve li:nth-child(2), .articles li:nth-child(2), .dates li:nth-child(2) { transition-delay: .08s; }
.formats li:nth-child(3), .etapes-eleve li:nth-child(3), .articles li:nth-child(3), .dates li:nth-child(3) { transition-delay: .16s; }
.formats li:nth-child(4), .etapes-eleve li:nth-child(4) { transition-delay: .24s; }
.formats li:nth-child(5) { transition-delay: .32s; }
.formats li:nth-child(6) { transition-delay: .4s; }

/* ---------- Téléphone ---------- */
@media (max-width: 860px) {
  .nav ul { display: none; }
  .ouverture-texte { margin: 0; width: 100%; padding-bottom: 92px; }
  .ouverture .fond { object-position: 50% 25%; }
  .nom { font-size: clamp(64px, 19vw, 110px); }
  .phrase { font-size: 16.5px; }
  .actions .btn { flex: 1 1 auto; }
  .credit { bottom: 20px; }
  .defiler { left: auto; right: var(--cote); transform: none; }
  .spectacle-grille, .cours-grille { grid-template-columns: 1fr; }
  .affiche { max-width: 340px; }
  .lieu { position: static; }
  .surtitre { font-size: 11px; letter-spacing: .18em; gap: 9px; }
  .surtitre i { width: 16px; }
  .pros-fond { height: 75vh; opacity: .35; }
  .ateliers li { grid-template-columns: 1fr; }
  .offre { grid-template-columns: 1fr; }
  .offre-pied { grid-column: 1; grid-row: 2; justify-items: stretch; }
  .offre-pied .btn { width: 100%; }
  .quiz-r { grid-template-columns: 1fr; }
  .etapes-eleve { grid-template-columns: 1fr; gap: 0; }
  .etapes-eleve::before { left: 29px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--or), rgba(212,166,74,.15)); }
  .etapes-eleve li { padding: 4px 0 30px 82px; min-height: 76px; }
  .formats { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .articles a { grid-template-columns: minmax(0, 1fr) auto; }
  .articles .source { grid-column: 1 / -1; }
  .dates li { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
  .jour { font-size: 22px; }
  .dates li .btn { grid-column: 1 / -1; width: 100%; }
  .cols { grid-template-columns: 1fr; }
  .barre-mobile { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #0b0907; border-top: 1px solid var(--or-trait); transform: translateY(110%); transition: transform .5s var(--ressort); }
  .barre-mobile.on { transform: none; }
  .barre-mobile .btn { width: 100%; }
  .apercu-flottant { display: none; }
}
@media (max-width: 860px) {
  .offre { margin-top: 58px; }
  .offre .pastille-tourne { right: 8px; top: -50px; width: 92px; height: 92px; }
  .offre .pastille-tourne b { font-size: 16px; }
}
@media (max-width: 440px) {
  .selecteur { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
  .selecteur button { padding: 10px 2px; font-size: 13.5px; }
  .nav-essai { padding: 12px 14px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .rideau { display: none; }
  .piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .piste span[aria-hidden] { display: none; }
}

.prix small { font-size: .32em; letter-spacing: 0; margin-left: .3em; opacity: .75; white-space: nowrap; }

/* Corrections du 03/10, 16 h 30 (relecture d'Hamadi) */
.bandeau-exemple { padding: 10px 16px; font-size: 13px; }
.bandeau-exemple .retour { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px; background: var(--or-clair); color: #120d08; font-size: 16px; font-weight: 700; text-decoration: none; }
.bandeau-exemple .retour:hover { filter: brightness(1.08); }
.pros-porte { margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--or-trait); font: italic 500 clamp(22px, 2.4vw, 30px)/1.2 var(--f-titre); color: var(--or-clair); }
.form-tete h3 { margin: 0 0 6px; font: 500 clamp(26px, 3vw, 34px)/1.1 var(--f-titre); color: var(--ivoire); }
.form-tete p { margin: 0; color: var(--ivoire-2); font-size: 15px; letter-spacing: 0; text-transform: none; }
.video-cadre video { display: block; width: 100%; height: 100%; background: #000; }
.dialog-video .petit a { color: var(--or-clair); }
.bande img { filter: none; }

/* ===== Corrections d'Hamadi, 03/10 au soir ===== */
/* Le petit test : une introduction douce qui arrive phrase par phrase */
.test-intro { max-width: 56ch; margin: 22px auto 34px; }
.test-intro p { margin: 0 0 14px; font: italic 400 clamp(19px, 1.9vw, 24px)/1.45 var(--f-titre); color: var(--ivoire); }
.test-intro p:nth-child(2) { transition-delay: .12s; }
.test-intro p:nth-child(3) { transition-delay: .24s; color: var(--or-clair); }
.quiz-promesses { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.quiz-promesses li { position: relative; padding-left: 28px; color: var(--ivoire-2); }
.quiz-promesses li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--or); background: rgba(212,166,74,.18); }
.quiz-cours a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--or); }

/* Le parcours d'élève : la ligne se remplit et les étapes s'allument une à une au défilement */
.etapes-eleve.chemin { display: block; max-width: 760px; margin: 50px auto 0; --plein: 0px; --decalage: 32px; }
.etapes-eleve.chemin::before { left: 31px; right: auto; top: 32px; bottom: 60px; width: 2px; height: auto; background: rgba(212,166,74,.16); }
.etapes-eleve.chemin::after { content: ""; position: absolute; left: 31px; top: 32px; width: 2px; height: max(0px, calc(var(--plein) - 32px)); background: linear-gradient(180deg, var(--or-clair), var(--or)); transition: height .8s var(--ressort); }
.etapes-eleve.chemin li { padding: 10px 0 52px 100px; min-height: 64px; opacity: .22; transform: translateY(22px); transition: opacity .6s ease, transform .8s var(--ressort); }
.etapes-eleve.chemin li.active, .etapes-eleve.chemin li.faite { opacity: 1; transform: none; }
.etapes-eleve.chemin li::before { width: 64px; height: 64px; font-size: 30px; z-index: 1; transition: transform .6s var(--ressort), background .4s, color .4s, box-shadow .4s; }
.etapes-eleve.chemin li.active::before { transform: scale(1.18); background: var(--or); color: var(--noir); box-shadow: 0 0 0 9px rgba(212,166,74,.14); }
.etapes-eleve.chemin li.faite::before { background: var(--noir-3); color: var(--or); }
.etapes-eleve.chemin b { font-size: clamp(25px, 2.6vw, 34px); }
.etapes-eleve.chemin span { font-size: 16.5px; }

/* Le parrainage expliqué pas à pas */
.parrain { display: block; max-width: 760px; margin: 30px auto 0; padding: clamp(22px, 3vw, 34px); }
.parrain .parrain-titre { margin: 0 0 6px; font: italic 500 clamp(22px, 2.4vw, 28px)/1.25 var(--f-titre); color: var(--ivoire); }
.parrain .parrain-titre b { display: inline; font: inherit; color: var(--or-clair); margin: 0; }
.parrain .parrain-chapo { margin: 0 0 16px; }
.parrain-etapes { margin: 0 0 22px; padding-left: 22px; display: grid; gap: 10px; color: var(--ivoire-2); }
.parrain-etapes li::marker { color: var(--or); font-weight: 700; }
.parrain-etapes b { color: var(--ivoire); font-weight: 600; }
.parrain .parrain-note { margin: 14px 0 0; font-size: 13.5px; color: #a89e8c; }

/* Les ateliers mènent chacun à leur page */
.ateliers li { position: relative; }
.ateliers li:not(.sans-page) { cursor: pointer; }
.ateliers h3 a.etire { color: inherit; text-decoration: none; }
.ateliers h3 a.etire::after { content: ""; position: absolute; inset: 0; }
.ateliers li:not(.sans-page)::after { content: "Découvrir l’atelier →"; grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.parrain .code { white-space: nowrap; }
.parrain .code span { white-space: normal; text-align: left; }