/* ============================================================
   212 ACADEMY — Sections spécifiques (accueil + pages internes)
   ============================================================ */

/* ===== HERO accueil (vidéo plein écran + accroche bas-gauche) ===== */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--nuit)}
.hero-media{position:absolute;inset:0;will-change:transform}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,26,37,.55) 0%,rgba(23,26,37,.05) 35%,rgba(23,26,37,.35) 62%,rgba(23,26,37,.97) 100%),linear-gradient(90deg,rgba(23,26,37,.6),rgba(23,26,37,0) 60%)}
.hero-voile-scroll{position:absolute;inset:0;background:var(--nuit);opacity:0;pointer-events:none}
.hero-contenu{position:absolute;left:0;right:0;bottom:clamp(40px,9vh,110px);z-index:2}
.hero .eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--or-clair);margin-bottom:26px}
.hero .eyebrow::before{content:"";width:40px;height:1px;background:var(--or)}
.hero h1{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,7.2vw,124px);line-height:.92;letter-spacing:-.02em;color:var(--creme)}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .l > span{display:inline-block;will-change:transform}
.hero h1 .l:nth-child(3){color:transparent;-webkit-text-stroke:2px var(--or);}
.hero-bas{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:34px;flex-wrap:wrap}
.hero-bas p{max-width:480px;font-size:17px;line-height:1.65;color:var(--texte);opacity:.9}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-hint{position:absolute;right:32px;bottom:clamp(40px,9vh,110px);z-index:2;writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--doux);display:flex;align-items:center;gap:14px}
.hero-hint::after{content:"";width:1px;height:60px;background:linear-gradient(var(--or),transparent)}

/* ===== Manifeste (mots qui s'allument) ===== */
.manifeste{padding:clamp(100px,16vw,200px) 0}
.manifeste .blason-fond{position:absolute;right:-6vw;top:50%;width:min(44vw,620px);transform:translateY(-50%);opacity:.05;pointer-events:none}
.manifeste p.gros{font-family:var(--display);font-weight:500;font-size:clamp(22px,3.3vw,50px);line-height:1.28;letter-spacing:-.01em;color:var(--creme);max-width:1150px}
.manifeste p.gros .m{opacity:.14;transition:none}
.manifeste p.gros em{font-style:normal;color:var(--or)}
.manifeste .signature{margin-top:48px;display:flex;align-items:center;gap:18px;font-size:14px;color:var(--doux)}
.manifeste .signature img{width:44px}

/* ===== Méthode : stepper épinglé ===== */
.methode .grille{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,90px)}
.methode-visuel{position:sticky;top:14vh;height:72vh;border-radius:var(--rayon);overflow:hidden;border:1px solid var(--trait)}
.methode-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .8s ease,transform 1.4s ease}
.methode-visuel img.actif{opacity:1;transform:scale(1)}
.methode-visuel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,26,37,0) 55%,rgba(23,26,37,.8))}
.methode-visuel .compteur-etape{position:absolute;left:26px;bottom:22px;z-index:2;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.24em;color:var(--or-clair)}
.etape{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:6vh 0;opacity:.28;transition:opacity .5s}
.etape.actif{opacity:1}
.etape .n{font-family:var(--display);font-weight:900;font-size:clamp(60px,7vw,110px);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--or)}
.etape h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.8vw,40px);line-height:1.08;margin:18px 0 18px;color:var(--creme)}
.etape .etape-img{display:none;border-radius:18px;margin-bottom:24px;aspect-ratio:16/10;object-fit:cover;width:100%}

/* ===== Terrains ===== */
.terrains-grille{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:22px}
.terrains-grille .cadre-img:first-child{grid-row:span 2;aspect-ratio:auto;min-height:560px}
.terrains-grille .cadre-img{aspect-ratio:16/10}
.terrain-lettre{position:absolute;right:20px;top:14px;z-index:2;font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,78px);color:transparent;-webkit-text-stroke:1.5px rgba(237,205,156,.9);line-height:1}

/* ===== Rail horizontal des programmes ===== */
.rail-section{overflow:hidden;background:var(--nuit-2)}
.rail-wrap{height:100vh;display:flex;align-items:center}
.rail{display:flex;gap:26px;padding:0 6vw;will-change:transform}
.rail-intro{flex:0 0 min(440px,82vw);display:flex;flex-direction:column;justify-content:center;padding-right:30px}
.prog{position:relative;flex:0 0 min(420px,82vw);min-height:min(76vh,640px);border-radius:28px;padding:40px 36px;display:flex;flex-direction:column;background:linear-gradient(165deg,var(--nuit-3),var(--nuit) 80%);border:1px solid var(--trait);overflow:hidden}
.prog .fond{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.13;will-change:transform}
.prog > *:not(.fond){position:relative;z-index:1}
.prog .etoiles{font-size:15px}
.prog h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(30px,2.8vw,42px);line-height:1;margin:16px 0 6px;color:var(--creme)}
.prog .rythme{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--or-clair)}
.prog .prix{margin:26px 0 6px;font-family:var(--display);font-weight:800;font-size:clamp(36px,3.4vw,50px);line-height:1;color:var(--creme)}
.prog .prix small{font-size:.36em;font-weight:600;color:var(--doux);letter-spacing:.1em;margin-left:6px}
.prog .seances{font-size:14.5px;color:var(--doux);padding-bottom:22px;border-bottom:1px solid var(--trait)}
.prog .puces{margin-top:22px;gap:10px;flex:1}
.prog .puces li{font-size:15px}
.prog .btn{margin-top:28px;align-self:flex-start}
.prog.elite{background:linear-gradient(165deg,#2B2519,var(--nuit) 75%);border-color:rgba(224,184,122,.7);box-shadow:0 0 0 1px rgba(224,184,122,.3),0 30px 80px rgba(224,184,122,.12)}
.prog .badge{position:absolute;top:22px;right:22px;z-index:2;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;background:var(--or);color:var(--nuit);padding:7px 12px;border-radius:999px}

/* ===== Futures Lionnes (image dans les lettres) ===== */
.lionnes{padding:clamp(90px,12vw,150px) 0 clamp(80px,10vw,130px);overflow:hidden}
.mot-image{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(46px,12.5vw,230px);line-height:.88;letter-spacing:-.03em;background-size:cover;background-position:50% 0%;-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center}
.lionnes .deux-col{margin-top:clamp(50px,7vw,90px)}
.lionnes .age{font-family:var(--condense);font-size:clamp(60px,7vw,110px);line-height:1;color:var(--or)}

/* ===== Parcours compétition ===== */
.parcours-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,100px);align-items:start}
.parcours-grille .colle{position:sticky;top:18vh}

/* ===== Staff ===== */
.staff-piste{display:flex;gap:22px;overflow:visible}
.portrait{position:relative;flex:1;min-width:0;aspect-ratio:9/15;border-radius:20px;overflow:hidden;border:1px solid var(--trait);transform-style:preserve-3d;will-change:transform}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:filter .5s,transform .8s}
.portrait:hover img{filter:none;transform:scale(1.04)}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,26,37,0) 55%,rgba(23,26,37,.9))}
.portrait .nom{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--or-clair)}
.roles .carte h3{font-size:18px}
.roles .carte .diplome{margin-top:22px;padding-top:18px;border-top:1px solid var(--trait);font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.roles .carte.dir{border-color:rgba(224,184,122,.65)}

/* ===== Programmes (page) ===== */
.progs-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.progs-grille .prog{flex:none;min-height:0}
.comparatif{width:100%;border-collapse:collapse;font-size:15px}
.comparatif th,.comparatif td{padding:18px 16px;text-align:center;border-bottom:1px solid var(--trait)}
.comparatif th{font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--creme)}
.comparatif th small{display:block;margin-top:6px;color:var(--or);font-size:11px;letter-spacing:.2em}
.comparatif td:first-child,.comparatif th:first-child{text-align:left;color:var(--doux);font-weight:600}
.comparatif td{color:var(--texte)}
.comparatif .oui{color:var(--or);font-size:18px}
.comparatif .non{color:#3B4668}
.comparatif .col-elite{background:rgba(224,184,122,.06)}
.table-scroll{overflow-x:auto;border:1px solid var(--trait);border-radius:var(--rayon);padding:6px 10px}
.faq{max-width:900px}
.faq-item{border-bottom:1px solid var(--trait)}
.faq-q{width:100%;background:none;border:0;color:var(--creme);text-align:left;font-family:var(--display);font-weight:700;font-size:clamp(16px,1.6vw,20px);padding:28px 50px 28px 0;cursor:pointer;position:relative}
.faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:28px;font-weight:400;color:var(--or);transition:transform .35s}
.faq-item.ouvert .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-r{height:0;overflow:hidden}
.faq-r p{padding:0 0 28px;font-size:16px;line-height:1.75;color:var(--doux);max-width:760px}

/* ===== Contact ===== */
.contact-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,90px)}
.coord{display:flex;flex-direction:column;gap:18px}
.coord a.ligne,.coord div.ligne{display:flex;gap:18px;align-items:flex-start;padding:24px;border:1px solid var(--trait);border-radius:18px;text-decoration:none;background:rgba(255,255,255,.02);transition:.25s}
.coord a.ligne:hover{border-color:var(--or);background:rgba(224,184,122,.06)}
.coord .ico{flex:0 0 46px;height:46px;border-radius:50%;background:rgba(224,184,122,.12);display:flex;align-items:center;justify-content:center;color:var(--or)}
.coord .ico svg{width:20px;height:20px}
.coord .k{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--doux)}
.coord .v{margin-top:6px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--creme)}
.carte-map{margin-top:clamp(60px,8vw,100px);border-radius:var(--rayon);overflow:hidden;border:1px solid var(--trait);height:440px}
.carte-map iframe{width:100%;height:100%;border:0;filter:invert(.9) hue-rotate(185deg) saturate(.6) brightness(.9)}
.formulaire{background:linear-gradient(160deg,var(--nuit-3),var(--nuit-2));border:1px solid var(--trait);border-radius:28px;padding:clamp(28px,4vw,48px)}

/* ===== Inscription ===== */
.inscr-grille{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,70px);align-items:start}
.inscr-aside{position:sticky;top:120px}
.etapes-nav{display:flex;gap:8px;margin-bottom:34px}
.etapes-nav span{flex:1;height:3px;border-radius:3px;background:rgba(224,184,122,.18);position:relative;overflow:hidden}
.etapes-nav span i{position:absolute;inset:0;background:var(--or);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s}
.etapes-nav span.fait i{transform:scaleX(1)}
.panneau{display:none}
.panneau.actif{display:block}
.panneau h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,32px);color:var(--creme);margin-bottom:8px}
.panneau .aide{color:var(--doux);font-size:15px;margin-bottom:30px}
.choix-progs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choix-progs label{position:relative;display:block;padding:22px;border:1px solid var(--trait);border-radius:18px;cursor:pointer;transition:.25s;background:rgba(255,255,255,.02)}
.choix-progs input{position:absolute;opacity:0}
.choix-progs label:hover{border-color:rgba(224,184,122,.6)}
.choix-progs input:checked + .cp{outline:none}
.choix-progs label:has(input:checked){border-color:var(--or);background:rgba(224,184,122,.08);box-shadow:0 0 0 1px var(--or)}
.cp .etoiles{font-size:12px}
.cp b{display:block;font-family:var(--display);font-weight:800;font-size:18px;text-transform:uppercase;color:var(--creme);margin:8px 0 4px}
.cp span.p{font-size:14px;color:var(--or-clair);font-weight:700}
.cp small{display:block;margin-top:6px;color:var(--doux);font-size:13px}
.nav-form{display:flex;justify-content:space-between;gap:14px;margin-top:34px;flex-wrap:wrap}
.recap{border:1px solid var(--trait);border-radius:18px;padding:22px;font-size:15px;line-height:1.9;color:var(--texte);background:rgba(255,255,255,.02)}
.recap b{color:var(--or-clair);font-weight:700}
.erreur{color:#FF8A8F;font-size:13.5px;margin-top:14px;min-height:1em}

/* ===== Responsive sections ===== */
@media (max-width:1024px){
  .hero-hint{display:none}
  .methode .grille{grid-template-columns:1fr}
  .methode-visuel{display:none}
  .etape{min-height:0;opacity:1;padding:34px 0;border-top:1px solid var(--trait)}
  .etape .etape-img{display:block}
  .rail-wrap{height:auto;padding:90px 0}
  .rail{flex-direction:column;padding:0 32px}
  .rail-intro,.prog{flex:none;width:100%}
  .prog{min-height:0}
  .terrains-grille{grid-template-columns:1fr}
  .terrains-grille .cadre-img:first-child{grid-row:auto;min-height:0;aspect-ratio:16/10}
  .parcours-grille{grid-template-columns:1fr}
  .parcours-grille .colle{position:static}
  .staff-piste{display:grid;grid-template-columns:repeat(3,1fr)}
  .progs-grille{grid-template-columns:1fr 1fr}
  .contact-grille,.inscr-grille{grid-template-columns:1fr}
  .inscr-aside{position:static}
}
@media (max-width:640px){
  .hero h1 .l:nth-child(3){-webkit-text-stroke:1.2px var(--or)}
  .hero-bas p{font-size:15.5px}
  .rail{padding:0 20px}
  .prog{padding:32px 24px}
  .staff-piste{grid-template-columns:1fr 1fr}
  .progs-grille,.choix-progs{grid-template-columns:1fr}
}

/* Repli reduced-motion du rail (desktop) */
.rail-statique .rail-wrap{height:auto;padding:110px 0}
.rail-statique .rail{flex-wrap:wrap;justify-content:center}
.rail-statique .rail-intro{flex-basis:100%;padding:0 0 30px}
.rail-statique .prog{flex:0 0 calc(50% - 13px);min-height:0}

/* Correctifs QA */
.manifeste{overflow:hidden}
.prog h3{font-size:clamp(24px,2.1vw,31px);overflow-wrap:anywhere}
.progs-grille .prog{padding:34px 24px}
.progs-grille .prog h3{font-size:clamp(20px,1.55vw,24px)}
.progs-grille .prog .prix{font-size:clamp(30px,2.6vw,38px)}
@media (max-width:640px){
  .titre{overflow-wrap:anywhere}
  .hero .eyebrow{letter-spacing:.18em;font-size:10.5px}
  .hero .eyebrow::before{width:24px}
}
@media (max-width:640px){ .titre .pseudo{font-size:clamp(18px,5.9vw,30px)} }

.progs-grille .prog .prix{font-size:clamp(24px,2vw,32px);white-space:nowrap}
.prog .prix{white-space:nowrap}

/* ===== Finitions mobile (audit 27/09/2026) ===== */
@media (max-width:640px){
  .hero .eyebrow-plus{display:none}
  .hero .eyebrow{font-size:11px;letter-spacing:.2em}
  .btn{white-space:nowrap;font-size:12px;padding:14px 22px;letter-spacing:.04em}
  .hero-actions .btn,.cta-final .actions .btn{font-size:12.5px}
  .etiquette{font-size:12px;letter-spacing:.22em}
  .cadre-img .leg,.portrait .nom,.roles .carte .diplome,footer .devise{font-size:11.5px}
  .prog .prix small{font-size:13px}
  .mot-image{font-size:clamp(46px,14.5vw,80px);line-height:.92;-webkit-text-stroke:1px rgba(224,184,122,.55)}
  .signature a{display:inline-block;padding:10px 0}
  .coord .k{font-size:12px}
  main{padding-bottom:0}
  footer{padding-bottom:96px}
}
@media (max-width:640px){
  .titre{font-size:clamp(22px,6.6vw,34px)}
  .b2-contenu{padding:0 20px}
}
@media (max-width:380px){
  .conteneur{padding:0 16px}
  .btn{font-size:11px;padding:13px 17px;gap:8px}
  .rail{padding:0 16px}
  .prog{padding:28px 20px}
  .formulaire{padding:24px 18px}
  .coord a.ligne,.coord div.ligne{padding:18px}
}
@media (max-width:380px){ .hero .eyebrow{letter-spacing:.12em;font-size:10.5px;gap:10px} .hero .eyebrow::before{width:18px} }