/* ============================================================================
   VKR STUDIO — feuille de style unique
   ----------------------------------------------------------------------------
   Une seule feuille pour les 11 pages. Aucun préprocesseur, aucune étape de
   compilation : le fichier se modifie directement à la main.

   SOMMAIRE
     1.  Variables ............ couleurs, gouttières, courbes d'animation
     2.  Base ................. remise à zéro et réglages généraux
     3.  Typographie .......... .display, .label, .lede
     4.  Révélations .......... .rv et .mask, pilotés par vkr.js
     5.  Rideau d'ouverture ... #curtain (accueil uniquement)
     6.  En-tête et menus ..... header, nav, sous-menus, volet mobile
     7.  Héros ................ .hero (accueil) et .phero (pages internes)
     8.  Sections claires ..... .on-paper
     9.  Composants ........... .caps, .chips, .tick, .steps, .acc, .course...
     10. Références ........... .partners, .posters, .schools
     11. Contact et pied ...... .cta-final, footer
     12. Responsive ........... points de rupture 980 px et 620 px
     13. Pages légales ........ .legal, .legal-id

   RÈGLES DE MODIFICATION
     — Les couleurs et espacements passent tous par les variables du bloc 1.
       Changer --brass suffit à modifier l'accent sur l'ensemble du site.
     — Les tailles utilisent clamp(min, fluide, max) : elles s'adaptent seules
       entre mobile et grand écran, sans media query.
     — Deux points de rupture seulement : 980 px (le menu passe en hamburger)
       et 620 px (les grilles passent sur une colonne).
     — Toute animation est neutralisée par le bloc prefers-reduced-motion en
       fin de fichier : ne le supprimez pas, il conditionne l'accessibilité.

   PALETTE
     Dérivée des rendus du studio : encre vert sombre, os, laiton.
     --brass est le seul accent : employé avec parcimonie, il perd sa force
     s'il est généralisé.
   ========================================================================== */
:root{
  --ink:#0E110F;
  --ink-2:#141816;
  --ink-3:#1A1F1B;
  --bone:#EAE8E0;
  --paper:#E5E3DA;
  --paper-2:#DBD9CF;
  --stone:#8E938B;
  --slate:#5C625B;
  --brass:#B98F45;
  --line-d:rgba(234,232,224,.13);
  --line-d-2:rgba(234,232,224,.26);
  --line-l:rgba(18,22,19,.16);
  --line-l-2:rgba(18,22,19,.32);
  --gut:clamp(20px,4.2vw,60px);
  --sec:clamp(88px,11vw,172px);
  --ease:cubic-bezier(.19,1,.22,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:16px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--brass);color:var(--ink)}

/* --- typographie --- */
.display{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 118,'wght' 300;
  letter-spacing:-.018em;
  line-height:1.0;
  text-wrap:balance;
}
.label{
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(9.5px,1.05vw,11px);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:400;
}
.lede{font-size:clamp(16px,1.35vw,19px);line-height:1.6}

.wrap{width:100%;max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.rule{height:1px;background:var(--line-d);border:0}
.on-paper .rule{background:var(--line-l)}

/* --- révélations au scroll --- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(110%);transition:transform 1.15s var(--ease);transition-delay:var(--d,0ms)}
.go .mask>span,.in .mask>span{transform:none}

/* ============================================================
   ÉCRAN DE CHARGEMENT
   ============================================================ */
#curtain{
  position:fixed;inset:0;z-index:900;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:transform 1.1s var(--ease),visibility 1.1s;
}
#curtain.up{transform:translateY(-101%);visibility:hidden}
#curtain .cw{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 125,'wght' 400;
  font-size:clamp(22px,4vw,34px);letter-spacing:.34em;text-indent:.34em;color:var(--bone);opacity:.92}
#curtain .cb{width:min(240px,44vw);height:1px;background:var(--line-d-2);position:relative;overflow:hidden}
#curtain .cb i{position:absolute;inset:0;background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform 1.25s cubic-bezier(.5,0,.2,1)}
#curtain.load .cb i{transform:scaleX(1)}
#curtain .cl{color:var(--stone);opacity:0;transition:opacity .6s ease .35s}
#curtain.load .cl{opacity:1}

/* ============================================================
   EN-TÊTE
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:400;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 var(--gut);height:74px;
  transition:background .5s ease,height .5s var(--ease),border-color .5s ease;
  border-bottom:1px solid transparent;
}
header.stuck{
  height:62px;background:rgba(14,17,15,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line-d);
}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:32px;width:auto;transition:height .5s var(--ease)}
header.stuck .brand img{height:26px}
nav.main{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
nav.main a{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);position:relative;padding-block:6px;
  transition:color .35s ease;
}
nav.main a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
nav.main a:hover,nav.main a.here{color:var(--bone)}
nav.main a:hover::after,nav.main a.here::after{transform:scaleX(1);transform-origin:left}
.navitem{position:relative;display:flex;align-items:center}
.navitem>.sub{
  position:absolute;top:100%;left:-18px;min-width:238px;padding:10px 0 14px;
  background:rgba(14,17,15,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line-d);border-top:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .35s ease,transform .35s var(--ease),visibility .35s;
}
.navitem:hover>.sub,.navitem:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.navitem>.sub a{display:block;padding:9px 18px;white-space:nowrap}
.navitem>.sub a::after{left:18px;width:calc(100% - 36px)}
.hd-right{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.cta-line{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line-d-2);padding:11px 18px;transition:border-color .4s ease,background .4s ease,color .4s ease;
}
.cta-line:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
#burger{display:none;width:34px;height:34px;position:relative}
#burger i{position:absolute;left:6px;right:6px;height:1px;background:var(--bone);transition:transform .45s var(--ease),opacity .3s ease}
#burger i:nth-child(1){top:13px}
#burger i:nth-child(2){top:20px}
#burger.x i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
#burger.x i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

#overlay{
  position:fixed;inset:0;z-index:380;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--gut);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);
}
#overlay.open{clip-path:inset(0 0 0 0)}
#overlay a{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 115,'wght' 300;
  font-size:clamp(30px,8vw,54px);letter-spacing:-.02em;padding-block:8px;
  border-bottom:1px solid var(--line-d);opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s ease}
#overlay.open a{opacity:1;transform:none}
#overlay a:hover{color:var(--brass)}

/* ============================================================
   HÉROS — scène 360° temps réel
   ============================================================ */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#0a0d0b}
.hero-media{position:absolute;inset:-24px;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;
  transform:scale(1.06);transform-origin:50% 55%;will-change:transform;
  animation:push 26s cubic-bezier(.33,0,.2,1) forwards}
@keyframes push{from{transform:scale(1.1)}to{transform:scale(1.0)}}
@media(prefers-reduced-motion:reduce){.hero-media img{animation:none;transform:none}}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,13,11,.74) 0%,rgba(10,13,11,.14) 22%,rgba(10,13,11,.10) 38%,rgba(10,13,11,.66) 66%,rgba(10,13,11,.92) 88%,var(--ink) 100%),
    linear-gradient(78deg,rgba(10,13,11,.7) 0%,rgba(10,13,11,.34) 32%,rgba(10,13,11,0) 62%),
    radial-gradient(120% 80% at 50% 50%,transparent 40%,rgba(10,13,11,.52) 100%);
}
.hero-inner{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gut) clamp(28px,4vw,54px);
}
.hero-eyebrow{color:rgba(234,232,224,.82);margin-bottom:clamp(18px,2.4vw,30px)}
.hero-inner{text-shadow:0 1px 20px rgba(8,11,9,.6)}
.hero-eyebrow b{color:var(--brass);font-weight:400}
.hero h1{
  font-size:clamp(30px,6.3vw,96px);
  margin-bottom:clamp(20px,2.4vw,30px);
}
.hero h1 .mask{white-space:nowrap}
@media(max-width:520px){.hero h1 .mask{white-space:normal}}
.hero h1 em{font-style:normal;font-variation-settings:'wdth' 100,'wght' 300;color:var(--brass)}
.hero-sub{max-width:46ch;color:rgba(234,232,224,.78);margin-bottom:clamp(26px,3vw,38px)}
.hero-cta{
  display:inline-flex;align-items:center;gap:14px;align-self:flex-start;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:10px;border-bottom:1px solid var(--line-d-2);transition:border-color .4s ease,gap .4s var(--ease)
}
.hero-cta:hover{border-color:var(--brass);gap:22px}
.hero-cta span{color:var(--brass)}

.slate{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;
  margin-top:clamp(34px,5vw,60px);padding-top:16px;border-top:1px solid var(--line-d);
  color:rgba(234,232,224,.72);
}
.slate .drag{display:inline-flex;align-items:center;gap:9px;color:var(--bone)}
.slate .drag i{width:26px;height:1px;background:var(--brass);display:inline-block;animation:sweep 2.6s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}

/* ============================================================
   SECTIONS CLAIRES
   ============================================================ */
.on-paper{background:var(--paper);color:var(--ink)}
.on-paper .label{color:var(--slate)}
.on-paper .lede{color:var(--slate)}

.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,5vw,80px);align-items:start}
.intro-grid h2{font-size:clamp(27px,3.4vw,50px);max-width:16ch}
.intro-body p+p{margin-top:1.1em}
.intro-body p{color:var(--slate);max-width:60ch}
.intro-quote{
  margin-top:clamp(34px,4vw,56px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line-l);
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 108,'wght' 300;
  font-size:clamp(19px,2.05vw,28px);line-height:1.3;letter-spacing:-.01em;max-width:34ch;
}

/* --- index des services --- */
.index-row{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line-d)}
.index-row a{
  flex:1 1 200px;padding:20px 0;border-bottom:1px solid var(--line-d);
  display:flex;align-items:baseline;gap:12px;color:var(--stone);transition:color .35s ease
}
.index-row a:hover{color:var(--bone)}
.index-row a b{color:var(--brass);font-weight:400}

/* ============================================================
   PLANS — une seule scène, plusieurs caméras
   ============================================================ */
.shot{position:relative;height:clamp(460px,82vh,860px);overflow:hidden;background:var(--ink-2)}
.shot+.shot{border-top:1px solid rgba(0,0,0,.6)}
.shot-media{position:absolute;inset:0}
.shot-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.045);
  transition:transform 1.4s var(--ease),filter 1.4s var(--ease);filter:saturate(.92)}
.shot:hover .shot-media img{transform:scale(1.0);filter:saturate(1)}
.shot-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,13,11,.62) 0%,rgba(10,13,11,.12) 34%,rgba(10,13,11,.72) 82%,rgba(10,13,11,.94) 100%);
}
.shot-body{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(24px,3.4vw,52px) var(--gut);
}
.shot-slate{display:flex;justify-content:space-between;gap:20px;color:rgba(234,232,224,.66);
  text-shadow:0 1px 12px rgba(8,11,9,.7)}
.shot-slate .n{color:var(--brass)}
.shot-txt{max-width:min(640px,88vw)}
.shot-txt h3{font-size:clamp(26px,3.8vw,58px);margin-bottom:16px;max-width:15ch}
.shot-txt p{color:var(--stone);max-width:44ch;margin-bottom:24px}
.arrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:8px;border-bottom:1px solid var(--line-d-2);transition:gap .45s var(--ease),border-color .4s ease
}
.shot:hover .arrow,.arrow:hover{gap:20px;border-color:var(--brass)}

/* ============================================================
   ÉQUIPE
   ============================================================ */
.about-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(34px,5vw,86px);align-items:start}
.about-grid h2{font-size:clamp(26px,3.2vw,46px);max-width:15ch;margin-bottom:clamp(20px,2.4vw,30px)}
.about-grid p{color:var(--slate);max-width:56ch}
.about-grid p+p{margin-top:1.05em}

.spec{margin-top:clamp(30px,3.4vw,44px);border-top:1px solid var(--line-l)}
.spec div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--line-l)}
.spec dt{color:var(--slate)}
.spec dd{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 400;
  font-size:clamp(16px,1.6vw,21px);letter-spacing:.02em;text-align:right;color:var(--ink)}

.roster{border-top:1px solid var(--line-l-2)}
.roster li{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--line-l);transition:padding-left .5s var(--ease)}
.roster li:hover{padding-left:10px}
.roster .nm{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 400;
  font-size:clamp(17px,1.8vw,23px);letter-spacing:-.01em}
.roster .rl{color:var(--slate);text-align:right}

.credits{margin-top:clamp(46px,6vw,88px)}
.credits-list{display:flex;flex-wrap:wrap;gap:0;margin-top:18px;border-top:1px solid var(--line-l)}
.credits-list span{flex:1 1 180px;padding:16px 0;border-bottom:1px solid var(--line-l);
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 108,'wght' 400;
  font-size:clamp(15px,1.35vw,18px);letter-spacing:-.005em}
.credits-list span em{font-style:normal;color:var(--slate)}

/* ============================================================
   FORMATIONS
   ============================================================ */
.head-block{max-width:44ch;margin-bottom:clamp(40px,5vw,72px)}
.head-block h2{font-size:clamp(26px,3.4vw,50px);margin:14px 0 18px}
.head-block p{color:var(--stone)}
.on-paper .head-block p{color:var(--slate)}

.courses{border-top:1px solid var(--line-d)}
.course{
  display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,1fr) minmax(0,.3fr);
  gap:clamp(16px,3vw,48px);align-items:start;
  padding:clamp(26px,3vw,42px) 0;border-bottom:1px solid var(--line-d);
  transition:background .5s ease;
}
.course:hover{background:rgba(234,232,224,.028)}
.course .kn{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 125,'wght' 400;
  font-size:clamp(15px,1.6vw,20px);letter-spacing:.14em;color:var(--brass)}
.course h3{font-size:clamp(21px,2.4vw,32px);margin-bottom:12px}
.course p{color:var(--stone);max-width:52ch}
.course .who{color:var(--stone);text-align:right}
@media(max-width:820px){
  .course{grid-template-columns:1fr;gap:10px}
  .course .who{text-align:left}
}

/* ============================================================
   POURQUOI — accordéon
   ============================================================ */
.acc{border-top:1px solid var(--line-l-2)}
.acc-item{border-bottom:1px solid var(--line-l)}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(20px,2.4vw,30px) 0;text-align:left}
.acc-head h3{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 400;
  font-size:clamp(17px,2vw,26px);letter-spacing:-.012em;line-height:1.2;font-weight:400;
  transition:color .35s ease}
.acc-head:hover h4{color:var(--brass)}
.acc-sign{flex:0 0 auto;width:16px;height:16px;position:relative}
.acc-sign i{position:absolute;background:var(--ink);transition:transform .5s var(--ease),opacity .4s ease}
.acc-sign i:nth-child(1){left:0;right:0;top:7.5px;height:1px}
.acc-sign i:nth-child(2){top:0;bottom:0;left:7.5px;width:1px}
.acc-item.open .acc-sign i:nth-child(2){transform:scaleY(0);opacity:0}
.acc-panel{overflow:hidden;height:0;transition:height .62s var(--ease)}
.acc-panel p{color:var(--slate);max-width:62ch;padding-bottom:clamp(20px,2.4vw,30px)}
/* variante fond sombre */
.on-ink .acc,section:not(.on-paper) .acc{border-top-color:var(--line-d-2)}
.on-ink .acc-item,section:not(.on-paper) .acc-item{border-bottom-color:var(--line-d)}
.on-ink .acc-sign i,section:not(.on-paper) .acc-sign i{background:var(--bone)}
.on-ink .acc-panel p,section:not(.on-paper) .acc-panel p{color:var(--stone)}

/* ============================================================
   CONTACT
   ============================================================ */
#contact{position:relative;overflow:hidden;background:var(--ink)}
#contact .bg{position:absolute;inset:0;background-size:cover;background-position:50% 60%;opacity:.55;filter:saturate(.72)}
#contact .bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(14,17,15,.42) 38%,rgba(14,17,15,.72) 72%,rgba(14,17,15,.94) 100%)}
#contact .wrap{position:relative;z-index:2}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(34px,5vw,86px);align-items:end}
.contact-grid h2{font-size:clamp(30px,4.6vw,72px);max-width:12ch}
.contact-card{border-top:1px solid var(--line-d-2)}
.contact-card .row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--line-d)}
.contact-card .row a,.contact-card .row .v{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 110,'wght' 400;
  font-size:clamp(16px,1.6vw,21px);letter-spacing:-.01em;text-align:right;transition:color .35s ease}
.contact-card .row a:hover{color:var(--brass)}
.contact-card .k{color:var(--stone)}
.socials{display:flex;gap:26px;margin-top:26px}
.socials a{color:var(--stone);transition:color .35s ease}
.socials a:hover{color:var(--bone)}

footer{border-top:1px solid var(--line-d);background:var(--ink)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;padding-block:26px;color:var(--stone)}
.foot a:hover{color:var(--bone)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  nav.main,.cta-line{display:none}
  #burger{display:block}
  .intro-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .contact-grid{align-items:start}
}
@media(max-width:620px){
  .shot-slate .tech{display:none}
  .hero{min-height:560px}
  .shot{height:78svh}
  .roster li,.spec div,.contact-card .row{flex-direction:column;gap:2px;align-items:flex-start}
  .roster .rl,.spec dd,.contact-card .row a,.contact-card .row .v{text-align:left}
}

:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .mask>span{transform:none}
}

/* ============================================================
   COMPOSANTS DE PAGES INTÉRIEURES
   ============================================================ */

/* --- héros de page --- */
.phero{position:relative;min-height:clamp(520px,78vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-2)}
.phero-media{position:absolute;inset:0}
.phero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.phero-media::after{content:'';position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,13,11,.78) 0%,rgba(10,13,11,.3) 34%,rgba(10,13,11,.68) 74%,var(--ink) 100%),
  linear-gradient(76deg,rgba(10,13,11,.74) 0%,rgba(10,13,11,.3) 38%,rgba(10,13,11,0) 68%),
  linear-gradient(180deg,var(--tint,transparent) 0%,transparent 60%)}
.phero .wrap{position:relative;z-index:2;padding-bottom:clamp(38px,5vw,72px);padding-top:130px;width:100%}
.phero h1{font-size:clamp(30px,5.4vw,80px);max-width:16ch;margin:16px 0 20px}
.phero .plede{max-width:52ch;color:rgba(234,232,224,.8);font-size:clamp(15px,1.3vw,19px)}
.phero .crumb{color:var(--stone)}
.phero .crumb a:hover{color:var(--bone)}
.phero .crumb b{color:var(--brass);font-weight:400}

/* --- boutons --- */
.btn-row{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:clamp(26px,3vw,38px)}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:14px 22px;
  border:1px solid var(--line-d-2);transition:background .4s ease,color .4s ease,border-color .4s ease,gap .4s var(--ease)}
.btn:hover{gap:20px}
.btn-solid{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn-solid:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brass)}
.on-paper .btn{border-color:var(--line-l-2)}
.on-paper .btn-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-paper .btn-solid:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}

/* --- bandeau de repères --- */
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 clamp(18px,2.4vw,36px);border-top:1px solid var(--line-d)}
.chips span{padding:16px 0;border-bottom:1px solid var(--line-d);color:var(--stone);align-items:flex-start;
  display:flex;align-items:baseline;gap:10px}
.chips span::before{content:'';width:6px;height:1px;background:var(--brass);flex:0 0 auto;transform:translateY(-4px)}
.on-paper .chips{border-color:var(--line-l)}
.on-paper .chips span{border-color:var(--line-l);color:var(--slate)}

/* --- grille de capacités --- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.cap{background:var(--ink);padding:clamp(24px,2.6vw,36px);transition:background .5s ease}
.cap:hover{background:var(--ink-3)}
.cap h3{font-size:clamp(18px,1.9vw,24px);margin-bottom:16px}
.cap ul{list-style:none}
.cap li{color:var(--stone);padding:9px 0;border-top:1px solid var(--line-d);font-size:15px}
.cap li:first-child{border-top:0}
.cap .capk{color:var(--brass);margin-bottom:14px}
.on-paper .caps{background:var(--line-l);border-color:var(--line-l)}
.on-paper .cap{background:var(--paper)}
.on-paper .cap:hover{background:var(--paper-2)}
.on-paper .cap li{color:var(--slate);border-color:var(--line-l)}

/* --- process numéroté (l'ordre porte du sens) --- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(20px,2.6vw,40px);
  border-top:1px solid var(--line-d);padding-top:clamp(26px,3vw,40px)}
.step .sn{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 125,'wght' 300;
  font-size:clamp(34px,4.4vw,60px);color:var(--brass);line-height:1;margin-bottom:14px}
.step h3{font-size:clamp(17px,1.7vw,21px);margin-bottom:8px}
.step p{color:var(--stone);font-size:15px}
.on-paper .steps{border-color:var(--line-l)}
.on-paper .step p{color:var(--slate)}

/* --- liste à filets --- */
.tick{border-top:1px solid var(--line-d)}
.tick li{list-style:none;display:flex;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line-d)}
.tick li i{font-style:normal;color:var(--brass);font-family:'IBM Plex Mono',monospace;font-size:11px;flex:0 0 auto}
.on-paper .tick,.on-paper .tick li{border-color:var(--line-l)}

/* --- portraits d'équipe --- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(14px,1.6vw,24px)}
.person figure{position:relative;overflow:hidden;background:var(--ink-2);aspect-ratio:4/5}
.person img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);
  transition:transform 1.1s var(--ease),filter .8s ease}
.person:hover img{transform:scale(1.035)}
.person h3{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 400;
  font-size:clamp(15px,1.5vw,19px);letter-spacing:-.01em;margin-top:14px}
.person span{display:block;color:var(--stone);margin-top:4px}
.on-paper .person span{color:var(--slate)}

/* --- direction : grand portrait + texte --- */
.leader{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:center}
.leader+.leader{margin-top:clamp(50px,6vw,96px)}
.leader.rev{direction:rtl}
.leader.rev>*{direction:ltr}
.leader figure{overflow:hidden;background:var(--ink-2);aspect-ratio:4/5}
.leader img{width:100%;height:100%;object-fit:cover}
.leader h3{font-size:clamp(24px,3vw,42px);margin:14px 0 18px}
.leader p{color:var(--stone);max-width:52ch}
.leader p+p{margin-top:1em}
.on-paper .leader p{color:var(--slate)}
@media(max-width:820px){.leader{grid-template-columns:1fr}.leader figure{max-width:360px}}

/* --- fiches équipe dépliables --- */
.bio{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(18px,2.4vw,36px);
  padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line-l);align-items:start}
.bio:first-child{border-top:1px solid var(--line-l-2)}
.bio figure{overflow:hidden;background:var(--paper-2);aspect-ratio:4/5}
.bio img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.bio h3{font-size:clamp(19px,2.1vw,27px);margin-bottom:4px}
.bio .role{color:var(--slate);margin-bottom:14px}
.bio p{color:var(--slate);max-width:64ch}
.bio p+p{margin-top:.8em}
@media(max-width:620px){.bio{grid-template-columns:1fr}.bio figure{max-width:190px}}

/* --- logos partenaires --- */
.partners{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(26px,4.5vw,66px);margin-top:26px}
.partners img{height:clamp(30px,3.4vw,44px);width:auto;opacity:.62;transition:opacity .4s ease}
.partners img:hover{opacity:1}
.on-paper .partners img{filter:invert(1);opacity:.5}
.on-paper .partners img:hover{opacity:.85}

/* --- certification --- */
.cert{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:clamp(24px,3.4vw,54px);align-items:start}
.cert img.badge{width:100%;max-width:170px}
.cert h3{font-size:clamp(22px,2.8vw,38px);margin:12px 0 18px}
.cert p{color:var(--stone);max-width:70ch}
.on-paper .cert p{color:var(--slate)}
@media(max-width:700px){.cert{grid-template-columns:1fr}}

/* --- tarifs --- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.tier{background:var(--ink);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column}
.tier .tk{color:var(--brass);margin-bottom:16px}
.tier h3{font-size:clamp(18px,1.9vw,23px);margin-bottom:18px}
.tier ul{list-style:none;margin-bottom:24px}
.tier li{color:var(--stone);padding:8px 0;border-top:1px solid var(--line-d);font-size:15px}
.tier .price{margin-top:auto;padding-top:20px;border-top:1px solid var(--line-d-2);
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 400;
  font-size:clamp(21px,2.3vw,30px);letter-spacing:-.01em}
.tier .price small{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-top:8px}

/* --- deux colonnes texte --- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(30px,5vw,84px);align-items:start}
.split h2{font-size:clamp(25px,3.2vw,46px);max-width:16ch}
.split p{color:var(--stone);max-width:60ch}
.split p+p{margin-top:1.05em}
.on-paper .split p{color:var(--slate)}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* --- image pleine largeur intercalaire --- */
.band{position:relative;height:clamp(320px,52vh,560px);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
.band::after{content:'';position:absolute;inset:0;background:
  linear-gradient(180deg,var(--ink) 0%,rgba(10,13,11,.18) 26%,rgba(10,13,11,.2) 70%,var(--ink) 100%)}
.band figcaption{position:absolute;left:0;right:0;bottom:clamp(18px,2.4vw,34px);z-index:2;
  color:rgba(234,232,224,.66);text-shadow:0 1px 12px rgba(8,11,9,.7)}
.band figcaption .wrap{display:flex;justify-content:space-between;gap:20px}

/* --- pied de page contact --- */
.cta-final{position:relative;overflow:hidden;background:var(--ink)}
.cta-final .bg{position:absolute;inset:0;background-size:cover;background-position:50% 60%;opacity:.5;filter:saturate(.7)}
.cta-final .bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(180deg,var(--ink) 0%,rgba(14,17,15,.46) 40%,rgba(14,17,15,.78) 74%,rgba(14,17,15,.96) 100%)}
.cta-final .wrap{position:relative;z-index:2}

.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,.7fr));gap:clamp(26px,4vw,64px);
  padding-block:clamp(46px,5vw,72px);border-top:1px solid var(--line-d)}
.foot-grid h3{font-weight:400;margin-bottom:16px;color:var(--stone)}
.foot-grid nav{display:flex;flex-direction:column;gap:9px}
.foot-grid nav a{color:rgba(234,232,224,.86);transition:color .3s ease}
.foot-grid nav a:hover{color:var(--brass)}
.foot-logo{height:34px;width:auto;margin-bottom:20px}
.foot-grid .fdesc{color:var(--stone);max-width:36ch;font-size:15px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}

/* --- compléments --- */
#curtain .cmark{width:54px;height:auto;opacity:.95;animation:cmpulse 2.2s ease-in-out infinite}
@keyframes cmpulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
#overlay a.sublink{
  font-size:clamp(15px,3.4vw,20px);font-variation-settings:'wdth' 108,'wght' 400;
  padding-left:22px;color:var(--stone);border-bottom-color:rgba(234,232,224,.06)
}
#overlay a.sublink:hover{color:var(--bone)}
a.course{color:inherit}
a.course:hover .kn{color:var(--bone)}
.phero .slate{color:rgba(234,232,224,.7);border-top-color:var(--line-d)}
.bios{margin-top:clamp(10px,1.6vw,22px)}
.credits-list span{color:inherit}

/* --- ajustements optiques --- */
.brand img{height:34px}
header.stuck .brand img{height:28px}
@media(max-width:620px){.brand img{height:28px}header.stuck .brand img{height:24px}}
.tick li i{font-size:12px;opacity:.75;transform:translateY(-1px)}
.partners img{height:auto;max-height:34px}
.partners img.p-cannes{max-height:44px}
.partners img.p-gameatelier{max-height:52px}
.partners img.p-unreal{max-height:56px}
.partners img.p-gritgames{max-height:38px}
.partners img.p-illumination{max-height:28px}
.partners img.p-nacon{max-height:28px}
.band::after{background:
  linear-gradient(180deg,var(--ink) 0%,rgba(10,13,11,.34) 24%,rgba(10,13,11,.4) 66%,var(--ink) 100%)}


/* ============================================================
   BADGES DE FORMATION
   ============================================================ */
.phero-badge{
  position:absolute;z-index:3;right:clamp(24px,5vw,90px);top:50%;
  transform:translateY(-34%);
  width:clamp(150px,18vw,268px);height:auto;
  filter:drop-shadow(0 22px 54px rgba(6,9,7,.8)) brightness(1.12) contrast(1.04);
}
@media(max-width:980px){
  .phero-badge{width:120px;top:auto;bottom:clamp(96px,14vw,150px);transform:none;
    right:var(--gut);opacity:.92}
}
@media(max-width:620px){.phero-badge{width:88px;bottom:auto;top:88px}}
.course .kn img{width:clamp(52px,5.6vw,78px);height:auto;display:block;
  filter:drop-shadow(0 8px 20px rgba(6,9,7,.55));transition:transform .6s var(--ease)}
.course:hover .kn img{transform:translateY(-3px) scale(1.04)}

/* ============================================================
   MUR DE RÉFÉRENCES — affiches
   ============================================================ */
.posters{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:clamp(14px,1.8vw,26px);margin-top:clamp(30px,3.4vw,48px);
}
.posters figure{margin:0}
.posters img{
  width:100%;aspect-ratio:5/7;object-fit:cover;display:block;
  filter:grayscale(1) contrast(.94) brightness(.96);opacity:.72;
  transition:filter .7s var(--ease),opacity .7s var(--ease),transform .7s var(--ease);
}
.posters figure:hover img{filter:none;opacity:1;transform:translateY(-4px)}
.posters figcaption{
  margin-top:10px;color:var(--slate);font-size:9.5px;letter-spacing:.14em;line-height:1.5;
}
.on-paper .posters figcaption{color:var(--slate)}

/* ============================================================
   ÉCOLES & CENTRES DE FORMATION
   ============================================================ */
.schools{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  align-items:center;gap:clamp(20px,3vw,52px);margin-top:clamp(28px,3.2vw,44px);
}
.schools img{
  width:100%;max-width:168px;height:auto;margin:0 auto;display:block;
  mix-blend-mode:multiply;opacity:.66;
  transition:opacity .6s var(--ease);
}
.schools img:hover{opacity:1}
@media(max-width:620px){
  .posters{grid-template-columns:repeat(3,1fr)}
  .schools{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.legal{max-width:74ch;margin-inline:auto}
.legal+.legal{margin-top:clamp(52px,6vw,86px);padding-top:clamp(34px,4vw,54px);
  border-top:1px solid var(--line-l)}
.legal .label{color:var(--brass)}
.legal h2{font-size:clamp(23px,2.8vw,38px);margin:12px 0 clamp(20px,2.4vw,30px)}
.legal h3{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 500;
  font-size:clamp(15px,1.5vw,18px);letter-spacing:-.005em;font-weight:400;
  margin:clamp(22px,2.6vw,32px) 0 8px}
.legal p{color:var(--slate);margin-bottom:.85em}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-l-2);transition:text-decoration-color .35s ease}
.legal a:hover{text-decoration-color:var(--brass)}
.legal .todo{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  border:1px dashed rgba(185,143,69,.5);padding:2px 8px;border-radius:2px;
  white-space:nowrap;
}

/* Tableau d'identification de la société (page mentions légales) */
.legal-id{margin:18px 0 4px;border-top:1px solid var(--line-l)}
.legal-id div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--line-l)}
.legal-id dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);flex:0 0 auto}
.legal-id dd{text-align:right;color:var(--ink)}
@media(max-width:620px){
  .legal-id div{flex-direction:column;gap:2px;align-items:flex-start}
  .legal-id dd{text-align:left}
}


/* Mention textuelle terminant une rangée de logos partenaires */
.partners .p-more{
  color:var(--stone);opacity:.7;white-space:nowrap;align-self:center;
}
.on-paper .partners .p-more{color:var(--slate)}
/* La spirale Ubisoft est un pictogramme carré : il lui faut plus de
   hauteur que les logotypes horizontaux pour un poids visuel égal. */
.partners img.p-ubisoft{max-height:52px}

/* ============================================================
   SÉLECTEUR DE LANGUE
   Bascule FR / EN dans l'en-tête. Sur la version française le lien
   affiche « EN » et pointe vers /en/ ; l'inverse sur la version anglaise.
   ============================================================ */
.lang{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;
  color:var(--stone);padding:6px 2px;position:relative;flex:0 0 auto;
  transition:color .35s ease;
}
.lang::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.lang:hover{color:var(--bone)}
.lang:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:980px){
  /* Sur mobile le sélecteur reste visible, à gauche du bouton hamburger */
  .lang{margin-right:4px}
}

/* ============================================================
   TITRE RÉSERVÉ AUX LECTEURS D'ÉCRAN
   Certaines sections n'ont pas de titre visible mais doivent en porter
   un dans la structure du document, sans quoi la hiérarchie saute un
   niveau (h1 puis h3). Ce titre est lu par les lecteurs d'écran et par
   les robots d'indexation, mais invisible à l'écran.
   ============================================================ */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}