/* =========================================================
   REATM RECORDS — Feuille de style principale
   Palette maison : #050505 · #111111 · #8A8A8A · #FFFFFF
   Accent maison : rouge #e11b22 · jaune #f5b60d
   Chaque entité pose ensuite son propre accent (voir PAGES ENTITÉS).
   ========================================================= */
:root{
  --red:#e11b22;
  --red-dark:#c5161c;
  --red-soft:rgba(225,27,34,.12);
  --yellow:#f5b60d;
  --yellow-2:#ffd45e;
  --yellow-soft:rgba(245,182,13,.14);
  --bg:#ffffff;
  --bg-alt:#f7f7f7;
  --bg-soft:#f2f2f2;
  --card:#ffffff;
  --text:#111111;
  --muted:#5b5b5b;
  --border:#e6e6e6;
  --header-bg:rgba(255,255,255,.82);
  --panel-bg:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.07);
  --shadow-lg:0 26px 60px rgba(0,0,0,.14);
  --footer-bg:#0b0b0b;
  --ring:rgba(0,0,0,.08);
  --nav-h:74px;
}
html[data-theme="dark"]{
  --bg:#050505;
  --bg-alt:#0b0b0b;
  --bg-soft:#101010;
  --card:#111111;
  --text:#ffffff;
  --muted:#8A8A8A;
  --border:#262626;
  --header-bg:rgba(5,5,5,.8);
  --panel-bg:#0a0a0a;
  --shadow:0 10px 30px rgba(0,0,0,.5);
  --shadow-lg:0 26px 60px rgba(0,0,0,.65);
  --footer-bg:#050505;
  --ring:rgba(255,255,255,.1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  transition:background-color .4s ease,color .4s ease;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.ic{width:1em;height:1em;fill:currentColor;display:block;flex:0 0 auto}
.wrap{width:100%;max-width:1760px;margin:0 auto;padding:0 clamp(18px,3.2vw,64px)}
.script{font-family:'Caveat',cursive}
.only-dark{display:none}
html[data-theme="dark"] .only-dark{display:block}
html[data-theme="dark"] .only-light{display:none}

/* ---------- Révélations au défilement ---------- */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-x{opacity:0;transform:translateX(-26px)}
.js .reveal-x.in{opacity:1;transform:none}
.js .reveal-zoom{opacity:0;transform:scale(.94)}
.js .reveal-zoom.in{opacity:1;transform:none}
/* entrée en bascule 3D, réservée aux cartes */
/* Le texte se dévoile derrière un masque qui remonte.
   Le recoupement porte sur un calque intérieur, jamais sur l'élément observé :
   un clip-path ramène l'aire d'intersection à zéro, et l'IntersectionObserver
   ne se déclencherait alors jamais. */
.js .reveal-mask{opacity:1;transform:none}
.js .reveal-mask > .rm-i{
  display:block;
  opacity:0;clip-path:inset(0 0 105% 0);transform:translateY(16px);
  transition:clip-path 1.05s cubic-bezier(.16,1,.3,1),opacity .75s ease,transform 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}
.js .reveal-mask.in > .rm-i{opacity:1;clip-path:inset(0 0 0 0);transform:none}
/* un filet qui se trace sur toute sa longueur */
.js .reveal-line{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.js .reveal-line.in{transform:scaleX(1)}
/* une entrée latérale, pour les listes et les colonnes */
.js .reveal-side{opacity:0;transform:translateX(-26px);transition:opacity .8s ease,transform .95s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.js .reveal-side.in{opacity:1;transform:none}
.js .reveal-card{opacity:0;transform:perspective(1100px) rotateX(11deg) translateY(52px);transform-origin:top center;
  transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.js .reveal-card.in{opacity:1;transform:perspective(1100px) rotateX(0deg) translateY(0)}

/* ---------- Barre de progression de lecture ---------- */

/* =================== LOGO / MARQUE =================== */
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}
/* Le sigle est détouré par un masque plutôt que peint : sa couleur devient
   une simple variable, ce qui permet à chaque pôle de porter son logo
   (voir --logo-ink, plus bas) sans dupliquer le fichier image. */
.brand-mark{
  flex:0 0 auto;height:var(--lm,46px);width:calc(var(--lm,46px) * 1.294);
  background-color:var(--logo-ink,#111111);
  -webkit-mask:url('../assets/logo.png') no-repeat 49% 46%;
  mask:url('../assets/logo.png') no-repeat 49% 46%;
  -webkit-mask-size:122.6% auto;mask-size:122.6% auto;
  position:relative;
  transition:transform .45s cubic-bezier(.2,.8,.3,1),background-color .4s ease;
}
.brand.on-dark .brand-mark{background-color:var(--logo-ink-dark,#ffffff)}
/* variante logo complet, mot-symbole inclus */
.brand-full{
  display:block;height:var(--lm,120px);width:calc(var(--lm,120px) * 1.148);
  background:url('../assets/logo.png') no-repeat 49% 59%;
  background-size:122.6% auto;
  filter:invert(1);
}
html[data-theme="dark"] .brand-full{filter:none}
.brand-full.on-dark{filter:none}
.brand:hover .brand-mark{transform:translateY(-2px) scale(1.04)}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt .n1{font-size:calc(var(--lm,46px)*.36);font-weight:700;letter-spacing:3.2px}
.brand-txt .n2{font-size:calc(var(--lm,46px)*.27);font-weight:500;letter-spacing:4.4px;color:var(--muted);margin-top:4px}
.brand.on-dark{color:#fff}
.brand.on-dark .brand-txt .n2{color:rgba(255,255,255,.62)}

/* =================== HEADER =================== */
header{
  position:sticky;top:0;z-index:110;
  background:var(--header-bg);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease;
}
header.scrolled{border-bottom-color:var(--border);box-shadow:0 8px 30px rgba(0,0,0,.06)}
html[data-theme="dark"] header.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.6)}
.nav{display:flex;align-items:center;gap:22px;padding:13px 0;transition:padding .35s ease}
header.scrolled .nav{padding:8px 0}
.menu{display:flex;gap:4px;margin:0 auto;list-style:none;font-size:14px;font-weight:500}
.menu a{
  position:relative;display:block;padding:8px 13px;border-radius:10px;color:var(--text);opacity:.82;
  transition:color .25s ease,opacity .25s ease,background-color .25s ease;
}
.menu a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--yellow));transition:left .3s ease,right .3s ease;
}
.menu a:hover{opacity:1;color:var(--red)}
.menu a:hover::after{left:13px;right:13px}
.menu .active{color:var(--red);font-weight:600;opacity:1}
.menu .active::after{left:13px;right:13px;background:var(--red)}
/* repère de page courante : sur une page d'entité il prend sa couleur */
body[data-entity] .menu .active{color:var(--acc)}
body[data-entity] .menu .active::after{background:var(--acc)}
.menu .active::after{height:2.5px;border-radius:2px}
body[data-entity] .mnav-list a.active{color:var(--acc)}
body[data-entity] .mnav-list a.active::before{background:var(--acc)}
html[data-theme="dark"] body[data-entity] .mnav-list a.active{color:var(--acc)}
.hdr-actions{display:flex;align-items:center;gap:9px}
.icon-btn{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--border);color:var(--text);font-size:14px;background:transparent;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s ease,color .3s ease,background-color .3s ease;
}
.icon-btn:hover{border-color:var(--red);color:var(--red);transform:translateY(-3px)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;
  font-family:'Poppins',sans-serif;font-weight:600;border-radius:999px;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,background-color .3s ease;
}
.btn i{transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.btn:hover i{transform:translateX(4px)}
.btn::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);
}
.btn:hover::before{animation:shine .8s ease}
@keyframes shine{to{left:130%}}
.btn-red{background:var(--red);color:#fff;padding:12px 22px;font-size:13.5px}
.btn-red:hover{background:var(--red-dark);transform:translateY(-3px);box-shadow:0 14px 28px rgba(225,27,34,.35)}
.btn-yellow{background:var(--yellow);color:#111;padding:13px 24px;font-size:14px}
.btn-yellow:hover{background:#e0a505;transform:translateY(-3px);box-shadow:0 14px 28px rgba(245,182,13,.38)}
#themeToggle .ic{transition:transform .55s cubic-bezier(.2,.8,.3,1),opacity .3s ease}
#themeToggle.spin .ic{transform:rotate(360deg) scale(1.15)}

/* =================== MENU HAMBURGER =================== */
.burger{
  display:none;position:relative;width:46px;height:46px;border-radius:14px;flex:0 0 auto;
  border:1px solid var(--border);background:transparent;cursor:pointer;z-index:111;
  transition:border-color .35s ease,background-color .35s ease,transform .35s cubic-bezier(.2,.8,.3,1);
}
.burger:hover{border-color:var(--red)}
.burger:active{transform:scale(.94)}
.burger-box{position:absolute;inset:0;display:grid;place-items:center}
.burger-line{
  position:absolute;left:50%;width:20px;height:2px;border-radius:2px;background:var(--text);
  transform:translateX(-50%);
  transition:transform .45s cubic-bezier(.68,-.35,.27,1.35),opacity .25s ease,width .45s ease,background-color .35s ease;
}
.burger-line:nth-child(1){top:16px}
.burger-line:nth-child(2){top:22px;width:14px;margin-left:-3px}
.burger-line:nth-child(3){top:28px}
.burger.open{background:var(--red);border-color:var(--red)}
.burger.open .burger-line{background:#fff;width:20px;margin-left:0}
.burger.open .burger-line:nth-child(1){transform:translateX(-50%) translateY(6px) rotate(45deg)}
.burger.open .burger-line:nth-child(2){opacity:0;transform:translateX(-50%) scaleX(.2)}
.burger.open .burger-line:nth-child(3){transform:translateX(-50%) translateY(-6px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:106;background:var(--panel-bg);
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:circle(0% at calc(100% - 46px) 44px);
  visibility:hidden;
  transition:clip-path .75s cubic-bezier(.76,0,.24,1),visibility 0s .75s,background-color .4s ease;
}
.mobile-nav.open{
  clip-path:circle(150% at calc(100% - 46px) 44px);
  visibility:visible;
  transition:clip-path .75s cubic-bezier(.76,0,.24,1),visibility 0s 0s,background-color .4s ease;
}
.mobile-nav::before{
  content:"";position:absolute;top:-120px;right:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(225,27,34,.22),transparent 68%);pointer-events:none;
  animation:floaty 9s ease-in-out infinite;
}
.mobile-nav::after{
  content:"";position:absolute;bottom:-150px;left:-120px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,182,13,.18),transparent 68%);pointer-events:none;
  animation:floaty 12s ease-in-out infinite reverse;
}
@keyframes floaty{0%,100%{transform:translate(0,0)}50%{transform:translate(-16px,20px)}}
.mnav-inner{
  position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;
  width:100%;max-width:720px;margin:0 auto;
  padding:calc(var(--nav-h) + 22px) clamp(20px,6vw,44px) calc(30px + env(safe-area-inset-bottom));
}
.mnav-label{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.mnav-label::after{content:"";flex:1;height:1px;background:var(--border)}
.mnav-list{list-style:none;margin:14px 0 0}
.mnav-list li{
  border-bottom:1px solid var(--border);
  opacity:0;transform:translateY(22px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.mobile-nav.open .mnav-list li{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 55ms + 240ms)}
.mnav-list a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;
  padding:16px 6px;font-size:clamp(19px,4.6vw,27px);font-weight:700;letter-spacing:-.3px;
  transition:color .3s ease,padding-left .35s cubic-bezier(.2,.8,.3,1);
}
.mnav-list a .num{font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:1.6px;transition:color .3s ease,transform .35s ease}
.mnav-list a::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--red),var(--yellow));transform:scaleY(0);transform-origin:top;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.mnav-list a:hover,.mnav-list a.active{color:var(--red);padding-left:18px}
html[data-theme="dark"] .mnav-list a:hover,html[data-theme="dark"] .mnav-list a.active{color:var(--yellow)}
.mnav-list a:hover::before,.mnav-list a.active::before{transform:scaleY(1)}
.mnav-list a:hover .num{color:var(--red);transform:translateX(-5px)}
.mnav-foot{
  margin-top:auto;padding-top:30px;
  opacity:0;transform:translateY(22px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.mobile-nav.open .mnav-foot{opacity:1;transform:none;transition-delay:640ms}
.mnav-foot .btn{width:100%;padding:16px 22px;font-size:14.5px}
.mnav-soc{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.mnav-soc a{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:16px;
  border:1px solid var(--border);color:var(--text);position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),color .3s ease,border-color .3s ease;
}
.mnav-soc a::before{
  content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--red),var(--yellow));
  transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.3,1),opacity .35s ease;
}
.mnav-soc a i,.mnav-soc a .ic{position:relative;z-index:2}
.mnav-soc a:hover{color:#fff;border-color:transparent;transform:translateY(-4px)}
.mnav-soc a:hover::before{transform:scale(1);opacity:1}
.mnav-contact{font-size:12.8px;color:var(--muted);line-height:2;margin-top:18px}
.mnav-contact a{transition:color .28s ease}
.mnav-contact a:hover{color:var(--red)}
.mnav-contact i{color:var(--red);width:18px;margin-right:9px}
html[data-theme="dark"] .mnav-contact i{color:var(--yellow)}

/* =================== HERO =================== */
.hero{position:relative;background:var(--bg);padding-bottom:6px;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero-inner{display:grid;grid-template-columns:1.02fr 1.24fr;gap:clamp(30px,5vw,76px);align-items:center;min-height:400px;padding-top:clamp(34px,5vw,62px);padding-bottom:10px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.6px;font-size:13px;margin-bottom:14px;
  padding:7px 14px;border-radius:999px;background:var(--red-soft);color:var(--red)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.5}}
.hero h1{font-size:clamp(30px,3.8vw,54px);line-height:1.1;font-weight:800;letter-spacing:-1.2px}
.hero h1 .red{color:var(--red)}
html[data-theme="dark"] .hero h1 .red{color:var(--yellow)}
.hero h1 .thin{font-weight:600;font-size:clamp(23px,2.8vw,39px);display:block;margin-top:10px;line-height:1.24}
.brush{width:170px;height:12px;margin:16px 0 26px;
  background:linear-gradient(90deg,var(--yellow),var(--yellow-2));border-radius:40% 60% 50% 50%/100% 100% 100% 100%;transform:skewX(-14deg)}
html[data-theme="dark"] .hero .brush{background:linear-gradient(90deg,var(--red),#ff6a6f)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hstage{position:relative;height:clamp(240px,34vw,430px)}
/* un seul cadre : l'image occupe tout l'espace, comme avant */
.hs-main{
  position:absolute;inset:0;overflow:hidden;border-radius:20px;
  box-shadow:var(--shadow-lg);background:var(--bg-soft);
}
/* les plans qui défilent */
.hs-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:0;
  transition:opacity .95s ease,transform 1.35s cubic-bezier(.16,1,.3,1),clip-path 1.15s cubic-bezier(.16,1,.3,1);
}
.hs-slide.is-on{opacity:1}
/* ----- les plaques des entités -----
   Chaque plan porte la photo de son entité, assombrie par le voile, et le nom
   par-dessus. Plus d'aplat ni de sigle : l'entité se reconnaît à son décor. */
.hs-pl[data-ent="studio"]{background-image:url('../assets/studio-nuit.png')}
.hs-pl[data-ent="academy"]{background-image:url('../assets/academy-cours.jpg');background-position:center 45%}
/* l'image est en portrait : on la cale sur le mur d'instruments */
.hs-pl[data-ent="store"]{background-image:url('../assets/store-salle.jpg');background-position:center 38%}
.hs-pl[data-ent="production"]{background-image:url('../assets/casque.png')}
.hs-pl[data-ent="events"]{background-image:url('../assets/production.png');background-position:center 45%}

/* ----- le cartouche : REATM au trait, l'entité pleine -----
   La même composition que sur les pages d'entité, centrée dans le cadre.
   Le cartouche appartient au cadre et non au plan : un plan porte une
   transformation, donc son propre contexte d'empilement, et il passerait
   sous le voile. */
.hs-cap{
  position:absolute;z-index:6;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--pl-ink,#FFFFFF);pointer-events:none;text-align:center;
  padding:0 clamp(16px,3vw,40px);
  transition:color .6s ease;
}
/* un halo sombre sous le nom : par endroits la photo est claire et l'encre
   de l'entité y perdrait son contraste */
.hs-cap::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;
  width:min(92%,780px);height:min(80%,400px);transform:translate(-50%,-50%);
  background:radial-gradient(58% 54% at 50% 50%,rgba(6,8,12,.78),rgba(6,8,12,.46) 58%,transparent 80%);
}
.hs-cap b,.hs-cap em{
  display:block;font-style:normal;font-weight:800;
  font-size:clamp(44px,7vw,124px);letter-spacing:-3.6px;line-height:.92;
  opacity:0;transform:translateY(16px);
  transition:opacity .75s ease .18s,transform .95s cubic-bezier(.16,1,.3,1) .18s;
}
.hs-cap em{transition-delay:.3s}
.hs-cap.in b,.hs-cap.in em{opacity:1;transform:none}
.hs-cap b{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.92);
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.hs-cap em{color:var(--pl-ink,#FFFFFF);text-shadow:0 10px 36px rgba(0,0,0,.5)}
/* l'encre suit le plan affiché. Les couleurs sont celles des pages
   d'entité : la teinte pleine s'éteindrait sur une photo assombrie, ces
   déclinaisons claires y gardent leur contraste. */
.hs-main[data-ent="studio"]{--pl-ink:#FF7A80}
.hs-main[data-ent="academy"]{--pl-ink:#93C5FD}
.hs-main[data-ent="store"]{--pl-ink:#E8E8EA}
.hs-main[data-ent="production"]{--pl-ink:#FACC15}
.hs-main[data-ent="events"]{--pl-ink:#FFE3B8}
.hs-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(0,0,0,0) 34%),linear-gradient(0deg,rgba(5,5,5,.35),transparent 55%)}
/* Sur une plaque le voile change de nature : il n'ouvre plus la photo sur la
   page, il assombrit celle de l'entité pour que le nom s'y détache. */
.hs-main.on-mark .hs-veil{opacity:1;transition:opacity .6s ease,background .6s ease;
  background:linear-gradient(115deg,rgba(6,8,12,.64) 0%,rgba(6,8,12,.40) 46%,rgba(6,8,12,.62) 100%)}
.hs-veil{transition:opacity .6s ease}
/* ----- avancer ou reculer à la main -----
   Le cadre tourne seul ; les deux flèches ne font que devancer le minuteur,
   qui repart de zéro à chaque clic. */
.hs-nav{
  position:absolute;z-index:7;top:50%;transform:translateY(-50%);
  width:clamp(38px,3.2vw,46px);height:clamp(38px,3.2vw,46px);
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(10,12,16,.42);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;
  /* visibles d'emblée, mais en retrait : une commande qu'il faut survoler
     pour découvrir n'en est pas une */
  opacity:.6;transition:opacity .35s ease,background-color .3s ease,transform .3s cubic-bezier(.34,1.4,.64,1);
}
.hs-prec{left:clamp(10px,1.1vw,18px)}
.hs-suiv{right:clamp(10px,1.1vw,18px)}
.hs-nav svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.4}
.hs-main:hover .hs-nav,.hs-nav:hover,.hs-nav:focus-visible{opacity:1}
.hs-nav:hover{background:rgba(10,12,16,.72)}
.hs-prec:hover{transform:translateY(-50%) translateX(-2px)}
.hs-suiv:hover{transform:translateY(-50%) translateX(2px)}
.hs-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(hover:none){.hs-nav{opacity:1}}
.hero-features{display:flex;align-items:stretch;gap:0;padding:22px 0 32px;flex-wrap:wrap}
.hero-features .f{display:flex;align-items:center;gap:9px;font-size:12.2px;font-weight:600;padding:8px clamp(12px,1.5vw,22px);border-right:1px solid var(--border);white-space:nowrap;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),color .3s ease}
.hero-features .f:first-child{padding-left:0}
.hero-features .f:last-child{border-right:none}
.hero-features .f:hover{transform:translateY(-3px);color:var(--red)}
.hero-features i{font-size:17px;color:var(--red)}
html[data-theme="dark"] .hero-features i{color:var(--yellow)}

/* =================== SERVICES =================== */
.services{background:var(--bg-alt);padding:clamp(52px,6vw,84px) 0 clamp(56px,6vw,90px);position:relative;overflow:hidden}
.services::before{
  content:"";position:absolute;top:-120px;right:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,var(--yellow-soft),transparent 70%);pointer-events:none;
}
.services .wrap{position:relative;z-index:2}
.services-head{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end;margin-bottom:40px}
.services-head .lead{margin:0 0 22px}
.tag{display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:700;letter-spacing:1.6px;color:var(--muted);text-transform:uppercase;margin-bottom:18px}
.tag::before{content:"";width:28px;height:2px;background:var(--red);animation:tagLine 2.8s ease-in-out infinite}
.tag::after{content:"";width:20px;height:2px;background:var(--yellow);animation:tagLine 2.8s ease-in-out infinite .4s}
@keyframes tagLine{0%,100%{transform:scaleX(1);opacity:.85}50%{transform:scaleX(1.5);opacity:1}}
h2.section-title{font-size:clamp(23px,2.7vw,38px);font-weight:700;line-height:1.22;letter-spacing:-.7px}
h2.section-title .y{color:var(--yellow)}
html[data-theme="dark"] h2.section-title .y{color:var(--yellow)}
.lead{color:var(--muted);font-size:14.5px;line-height:1.85;margin:18px 0 26px;max-width:560px}
/* ---------- Les 5 univers : une grille éditoriale, pas cinq rectangles ---------- */
.cards{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(16px,1.5vw,24px);
  perspective:1600px;
}
.ucard{
  --acc:#111111;        /* accent sur le fond de la carte, suit le thème */
  --acc-img:#ffffff;    /* accent posé sur la photo, toujours lisible sur sombre */
  --glow:rgba(0,0,0,.16);
  position:relative;display:flex;flex-direction:column;isolation:isolate;
  border-radius:20px;overflow:hidden;background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease,border-color .5s ease,background-color .4s ease;
}
.ucard:hover{transform:translateY(-12px);border-color:color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:0 30px 70px var(--glow)}
@supports not (color: color-mix(in srgb,#000 50%,#fff)){
  .ucard:hover{border-color:var(--acc)}
}
/* halo propre à l'entité */
.ucard::before{
  content:"";position:absolute;left:50%;top:-38%;width:78%;height:78%;transform:translateX(-50%);
  background:radial-gradient(circle,var(--glow),transparent 68%);
  opacity:0;transition:opacity .7s ease;pointer-events:none;z-index:0;
}
.ucard:hover::before{opacity:1}

/* ----- visuel ----- */
.ucard-media{position:relative;overflow:hidden;height:210px;flex:0 0 auto}
.ucard-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.02);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s ease;
}
.ucard:hover .ucard-img{transform:scale(1.12)}
.ucard-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,.15) 0%,rgba(5,5,5,.72) 100%);
  transition:opacity .6s ease;
}
.ucard:hover .ucard-veil{opacity:.82}
/* teinte de l'entité qui monte sur l'image */
.ucard-tint{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(180deg,transparent 40%,var(--acc-img) 140%);
  opacity:0;transition:opacity .7s ease;
}
.ucard:hover .ucard-tint{opacity:.55}

/* sceau de l'entité (déclinaison officielle du logo) */
.ucard-sigil{
  position:absolute;left:18px;top:18px;z-index:4;
  width:46px;height:46px;border-radius:13px;overflow:hidden;
  background:#050505 center/contain no-repeat;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  transition:transform .6s cubic-bezier(.34,1.4,.64,1),box-shadow .5s ease;
}
.ucard-sigil img{width:100%;height:100%;object-fit:cover;display:block}
.ucard:hover .ucard-sigil{transform:translateY(-3px) scale(1.06);box-shadow:0 12px 28px var(--glow)}
/* Studio n'a pas de plaque dédiée : on pose le logo officiel sur le noir maison */
.ucard-sigil--logo{background-image:url('../assets/logo.png');background-size:78% auto;background-position:49% 46%}

.ucard-idx{
  position:absolute;right:18px;top:14px;z-index:4;
  font-size:13px;font-weight:700;letter-spacing:2px;color:rgba(255,255,255,.62);
  transition:color .4s ease,transform .5s cubic-bezier(.2,.8,.3,1);
}
.ucard:hover .ucard-idx{color:var(--acc-img);transform:translateY(-2px)}

/* le mot d'ordre de l'univers, posé sur l'image */
.ucard-word{
  position:absolute;left:18px;right:18px;bottom:16px;z-index:4;
  font-size:clamp(19px,1.7vw,26px);font-weight:800;letter-spacing:-.6px;line-height:1;
  color:var(--acc-img);white-space:nowrap;text-shadow:0 2px 14px rgba(0,0,0,.55);
  text-transform:uppercase;
  transform:translateY(0);transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.ucard:hover .ucard-word{transform:translateY(-6px)}
.ucard-word em{font-style:normal;color:var(--acc-img)}

/* ----- corps ----- */
.ucard-body{position:relative;z-index:2;padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.ucard-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.ucard-kicker::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--acc);transition:width .5s cubic-bezier(.2,.8,.3,1)}
.ucard:hover .ucard-kicker::before{width:28px}
.ucard h3{font-size:19px;font-weight:700;letter-spacing:-.3px;margin-bottom:9px}
.ucard h3 em{font-style:normal;color:var(--acc)}
.ucard p{font-size:13.2px;color:var(--muted);line-height:1.8;margin-bottom:16px}
.ucard-cta{
  margin-top:auto;align-self:flex-start;position:relative;
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;letter-spacing:.2px;color:var(--acc);
}
.ucard-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.ucard-cta::after{
  content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;background:currentColor;
  transition:right .5s cubic-bezier(.2,.8,.3,1);
}
.ucard:hover .ucard-cta::after{right:0}
.ucard:hover .ucard-cta svg{transform:translateX(6px)}

/* ================= ÉLÉMENT GRAPHIQUE PROPRE À CHAQUE UNIVERS ================= */
.gfx{position:absolute;z-index:4;pointer-events:none}

/* STUDIO — waveform qui s'anime */
.gfx-wave{left:18px;right:18px;bottom:54px;display:flex;align-items:flex-end;gap:3px;height:28px;overflow:hidden;opacity:.6;transition:opacity .5s ease}
.ucard:hover .gfx-wave{opacity:1}
.gfx-wave i{flex:0 0 3px;background:var(--acc-img);border-radius:2px;transform-origin:bottom;transition:height .4s ease}
/* au repos la waveform garde un relief : ce n'est pas un trait */
.gfx-wave i:nth-child(6n+1){height:30%}
.gfx-wave i:nth-child(6n+2){height:64%}
.gfx-wave i:nth-child(6n+3){height:42%}
.gfx-wave i:nth-child(6n+4){height:88%}
.gfx-wave i:nth-child(6n+5){height:34%}
.gfx-wave i:nth-child(6n){height:56%}
.ucard:hover .gfx-wave i{animation:waveBar 1.05s ease-in-out infinite}
.gfx-wave i:nth-child(3n){animation-delay:.12s}
.gfx-wave i:nth-child(4n){animation-delay:.3s}
.gfx-wave i:nth-child(5n){animation-delay:.46s}
@keyframes waveBar{0%,100%{height:18%}50%{height:96%}}

/* ACADEMY — la progression pédagogique */
.gfx-steps{left:18px;right:18px;bottom:52px;height:30px;display:flex;align-items:center;gap:8px}
.gfx-steps .rail{position:relative;flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.gfx-steps .rail b{position:absolute;inset:0;width:22%;background:var(--acc-img);border-radius:3px;transition:width 1s cubic-bezier(.16,1,.3,1)}
.ucard:hover .gfx-steps .rail b{width:100%}
.gfx-steps span{
  font-size:9.5px;font-weight:700;letter-spacing:1.4px;color:rgba(255,255,255,.72);
  transition:color .4s ease,transform .5s ease;
}
.ucard:hover .gfx-steps span:last-child{color:var(--acc-img);transform:scale(1.14)}

/* PRODUCTION — les lignes qui se construisent + éclat jaune */
.gfx-build{left:18px;right:18px;bottom:52px;display:flex;flex-direction:column;gap:5px}
.gfx-build i{height:3px;border-radius:3px;background:var(--acc-img);width:18%;transition:width .75s cubic-bezier(.16,1,.3,1)}
.gfx-build i:nth-child(2){opacity:.65;transition-delay:.08s}
.gfx-build i:nth-child(3){opacity:.4;transition-delay:.16s}
.ucard:hover .gfx-build i{width:100%}
.ucard[data-entity="production"]::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(120deg,transparent 30%,rgba(250,204,21,.28),transparent 70%);
}
.ucard[data-entity="production"]:hover::after{animation:prodFlash .9s ease}
@keyframes prodFlash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}

/* STORE — les étiquettes du showroom */
.gfx-tags{left:18px;right:18px;bottom:52px;display:flex;flex-wrap:wrap;gap:6px}
.gfx-tags span{
  font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;color:#fff;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.3);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),border-color .4s ease;
}
.ucard:hover .gfx-tags span{opacity:1;transform:none;border-color:var(--acc-img)}
.ucard:hover .gfx-tags span:nth-child(2){transition-delay:.07s}
.ucard:hover .gfx-tags span:nth-child(3){transition-delay:.14s}

/* EVENTS — le balayage de projecteur */
.gfx-spot{inset:0;overflow:hidden}
.gfx-spot i{
  position:absolute;top:-60%;left:-30%;width:42%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,238,205,.42),transparent);
  transform:rotate(16deg) translateX(-40%);opacity:0;
  transition:opacity .5s ease;
}
.ucard:hover .gfx-spot i{opacity:1;animation:spotSweep 2.4s ease-in-out infinite}
@keyframes spotSweep{0%{transform:rotate(16deg) translateX(-40%)}50%{transform:rotate(16deg) translateX(230%)}100%{transform:rotate(16deg) translateX(-40%)}}
.gfx-spark{inset:0}
.gfx-spark i{
  position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(255,235,200,.9);
  opacity:0;transition:opacity .4s ease;
}
.ucard:hover .gfx-spark i{opacity:1;animation:sparkRise 3.1s ease-in-out infinite}
.gfx-spark i:nth-child(1){left:16%;bottom:14%;animation-delay:0s}
.gfx-spark i:nth-child(2){left:38%;bottom:8%;animation-delay:.5s}
.gfx-spark i:nth-child(3){left:62%;bottom:18%;animation-delay:1s}
.gfx-spark i:nth-child(4){left:82%;bottom:10%;animation-delay:1.5s}
@keyframes sparkRise{0%{transform:translateY(0) scale(.6);opacity:0}25%{opacity:1}100%{transform:translateY(-70px) scale(1.1);opacity:0}}

/* ================= PALETTE PAR ENTITÉ ================= */
.ucard[data-entity="studio"]{--acc:#e11b22;--acc-img:#FF4A50;--glow:rgba(225,27,34,.26)}
html[data-theme="dark"] .ucard[data-entity="studio"]{--acc:#e11b22;--acc-img:#FF4A50;--glow:rgba(225,27,34,.26)}
.ucard[data-entity="academy"]{--acc:#2563EB;--acc-img:#93C5FD;--glow:rgba(37,99,235,.34)}
.ucard[data-entity="academy"] .ucard-body{background:linear-gradient(180deg,#EFF6FF,transparent 70%)}
html[data-theme="dark"] .ucard[data-entity="academy"] .ucard-body{background:linear-gradient(180deg,rgba(37,99,235,.14),transparent 70%)}
.ucard[data-entity="production"]{--acc:#FACC15;--acc-img:#FACC15;--glow:rgba(250,204,21,.36)}
.ucard[data-entity="production"] .ucard-cta{color:#8a6d00}
html[data-theme="dark"] .ucard[data-entity="production"] .ucard-cta{color:#FACC15}
.ucard[data-entity="store"]{--acc:#111111;--acc-img:#ffffff;--glow:rgba(17,17,17,.14)}
.ucard[data-entity="store"]{border-color:#dcdcdc}
html[data-theme="dark"] .ucard[data-entity="store"]{--acc:#ffffff;--glow:rgba(255,255,255,.12);border-color:#2f2f2f}
.ucard[data-entity="store"] .ucard-veil{background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(5,5,5,.62) 100%)}
.ucard[data-entity="events"]{--acc:#111111;--acc-img:#FFE3B8;--glow:rgba(255,205,140,.34)}
html[data-theme="dark"] .ucard[data-entity="events"]{--acc:#ffffff}
.ucard[data-entity="events"] .ucard-media{background:#050505}

/* l'accent du texte reste lisible en thème clair pour les entités très claires */
.ucard[data-entity="production"] h3 em{color:#8a6d00}
html[data-theme="dark"] .ucard[data-entity="production"] h3 em{color:#FACC15}

/* pas de survol au doigt : on montre l'état actif d'emblée */
@media(hover:none){
  .ucard:hover{transform:none}
  .gfx-wave{opacity:1}
  .gfx-tags span{opacity:1;transform:none}
  .gfx-steps .rail b{width:62%}
  .gfx-build i{width:70%}
}

/* =================== MISSION =================== */
.mission{background:var(--bg-soft);padding:clamp(52px,6vw,84px) 0;position:relative;overflow:hidden}
.mission-bg{position:absolute;inset:0;background:url('../assets/casque.png') center/cover;opacity:.04;filter:grayscale(1) contrast(.85);transition:opacity .4s ease}
html[data-theme="dark"] .mission{background:#050505}
html[data-theme="dark"] .mission-bg{opacity:1;filter:none}
.mission-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg-soft) 26%,rgba(0,0,0,0) 100%);opacity:0}
html[data-theme="dark"] .mission-bg::after{opacity:1;background:linear-gradient(90deg,#050505 30%,rgba(5,5,5,.78) 55%,rgba(5,5,5,.35) 100%)}
.mission .wrap{position:relative;z-index:2}
.mission-grid{display:grid;grid-template-columns:1fr 2.15fr;gap:34px;align-items:start}
.mission h2{font-size:clamp(24px,3.3vw,32px);font-weight:800;line-height:1.25}
@media(min-width:981px){.mission h2{white-space:nowrap}}
.mission h2 .y{color:var(--yellow)}
.mission .brush2{width:200px;height:11px;margin-top:16px;background:linear-gradient(90deg,var(--yellow),var(--yellow-2));border-radius:50%;transform:skewX(-14deg)}
html[data-theme="dark"] .mission .brush2{background:linear-gradient(90deg,var(--red),#ff6a6f)}
.mission-items{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.mi{padding:0 22px;border-right:1px solid var(--border);font-size:12.5px;color:var(--muted);line-height:1.75;transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.mi:last-child{border-right:none}
.mi:hover{transform:translateY(-5px)}
.mi .mic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;margin-bottom:16px;
  font-family:'Poppins',sans-serif;font-size:22px;font-weight:800;letter-spacing:-1px;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease}
.mi .mic.ci-red{box-shadow:0 10px 24px rgba(225,27,34,.26)}
.mi .mic.ci-yellow{box-shadow:0 10px 24px rgba(245,182,13,.26)}
html[data-theme="dark"] .mi .mic{box-shadow:none}
.mi strong{display:block;color:var(--text);font-size:15px;font-weight:700;margin-bottom:5px;letter-spacing:-.2px}
.mi em{display:block;font-style:normal;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);margin-bottom:9px}
html[data-theme="dark"] .mi em{color:var(--yellow)}
/* bandeau des valeurs */
.values{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.values span{
  display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--text);
  background:var(--card);border:1px solid var(--border);
  transition:transform .4s cubic-bezier(.2,.8,.3,1),border-color .3s ease,box-shadow .3s ease;
}
.values span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.values span:nth-child(even)::before{background:var(--yellow)}
.values span:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:0 12px 26px rgba(0,0,0,.08)}
html[data-theme="dark"] .values span{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .values span:hover{border-color:var(--yellow);box-shadow:none}
.mi:hover .mic{transform:rotate(-8deg) scale(1.08)}
.mi b{color:var(--text);font-weight:600}
html[data-theme="dark"] .mi .mic{background:rgba(225,27,34,.12)!important;border:1.5px solid var(--red);color:var(--red)}
html[data-theme="dark"] .mi .mic.y{background:rgba(245,182,13,.12)!important;border-color:var(--yellow);color:var(--yellow)}
html[data-theme="dark"] .mi{color:#dcdcdc;border-right-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .mi b{color:#fff}

/* =================== ACADEMIE =================== */
.academie{display:grid;grid-template-columns:1fr 1.25fr .95fr;gap:0;background:var(--bg);align-items:stretch}
.academie>*{min-width:0}
.aca-photo{position:relative;min-height:300px;background-image:url('../assets/guitare.png');background-size:cover;background-position:center;overflow:hidden}
.aca-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45))}
html[data-theme="dark"] .aca-photo::after{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6))}
.aca-photo .sc{position:absolute;right:16px;top:26px;z-index:2;color:#fff;font-family:'Caveat',cursive;font-size:clamp(21px,2.6vw,27px);line-height:1.1;text-align:right;transform:rotate(-6deg);text-shadow:0 2px 10px rgba(0,0,0,.6)}
.aca-photo .sc::after{content:"";display:block;width:90px;height:4px;background:var(--yellow);margin:8px 0 0 auto;border-radius:4px}
.aca-mid{padding:clamp(34px,5vw,54px) clamp(22px,4vw,44px)}
.tag-sm{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--red);text-transform:uppercase;margin-bottom:16px}
.tag-sm::before{content:"";width:26px;height:2px;background:var(--red)}
html[data-theme="dark"] .tag-sm{color:var(--yellow)}
html[data-theme="dark"] .tag-sm::before{background:var(--yellow)}
.aca-mid h2{font-size:clamp(21px,2.8vw,28px);font-weight:700;line-height:1.3}
.aca-mid h2 .y{color:var(--yellow)}
.aca-mid p{color:var(--muted);font-size:13.4px;line-height:1.85;margin-top:16px;max-width:440px}
.aca-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:12px;margin-top:26px;max-width:520px}
.aca-stats .st{
  display:flex;flex-direction:column;gap:2px;padding:12px 10px;border-radius:14px;text-align:center;align-items:center;min-width:0;
  background:var(--bg-alt);border:1px solid var(--border);
  transition:transform .4s cubic-bezier(.2,.8,.3,1),border-color .3s ease;
}
.aca-stats .st:hover{transform:translateY(-4px);border-color:var(--red)}
.aca-stats b{font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--red)}
html[data-theme="dark"] .aca-stats b{color:var(--yellow)}
html[data-theme="dark"] .aca-stats .st{background:rgba(255,255,255,.04)}
.aca-stats span{font-size:9.6px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--muted)}
.instruments{display:flex;flex-wrap:wrap;gap:22px;margin-top:30px}
.inst{text-align:center;font-size:11.5px;font-weight:600;transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.inst:hover{transform:translateY(-6px)}
.inst .ib{width:50px;height:50px;border-radius:16px;background:var(--yellow);color:#111;display:grid;place-items:center;font-size:19px;margin:0 auto 10px;
  box-shadow:0 8px 20px rgba(245,182,13,.28);transition:box-shadow .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.inst:hover .ib{transform:rotate(-8deg)}
html[data-theme="dark"] .inst .ib{background:rgba(245,182,13,.1);border:1.5px solid var(--yellow);color:var(--yellow);box-shadow:none}
.aca-side{background:var(--bg-alt);padding:clamp(28px,4vw,36px) clamp(22px,3vw,30px);display:flex;flex-direction:column;justify-content:center}
html[data-theme="dark"] .aca-side{background:#0b0b0b;border-left:1px solid var(--border)}
.side-title{font-family:'Caveat',cursive;font-size:26px;line-height:1.1;display:flex;gap:12px;align-items:flex-start}
.side-title::before{content:"";width:26px;height:2px;background:var(--red);margin-top:14px;flex:0 0 26px}
.side-title u{text-decoration:none;border-bottom:3px solid var(--red);padding-bottom:2px}
html[data-theme="dark"] .side-title u{border-bottom-color:var(--yellow)}
.side-list{margin:22px 0 0;list-style:none;display:flex;flex-direction:column;gap:16px}
.side-list li{display:flex;gap:14px;font-size:12.4px;line-height:1.7;color:var(--text)}
.side-list i{color:var(--red);font-size:14px;margin-top:3px;width:16px;text-align:center;flex:0 0 16px}
html[data-theme="dark"] .side-list i{color:var(--yellow)}
.side-list .m{color:var(--muted)}
.aca-side .btn-red{margin-top:26px;padding:14px 24px}
.dark-script{font-family:'Caveat',cursive;font-size:clamp(25px,3.4vw,31px);line-height:1.1;color:var(--text);margin-bottom:22px}
.dark-script em{font-style:normal;color:var(--yellow);border-bottom:6px solid rgba(245,182,13,.4)}


/* ---------- La section Académie porte les couleurs de son entité ----------
   Bleu #2563EB, mais posé en contour et en filets plutôt qu'en aplats :
   l'entité doit se reconnaître sans que la page en soit saturée. */
.academie{--aca:#2563EB;--aca-soft:rgba(37,99,235,.10);--aca-line:rgba(37,99,235,.28)}
html[data-theme="dark"] .academie{--aca:#93C5FD;--aca-soft:rgba(147,197,253,.10);--aca-line:rgba(147,197,253,.28)}

.academie .tag-sm{color:var(--aca)}
.academie .tag-sm::before{background:var(--aca)}
html[data-theme="dark"] .academie .tag-sm{color:var(--aca)}
html[data-theme="dark"] .academie .tag-sm::before{background:var(--aca)}

.academie .aca-mid h2 .y{color:var(--aca)}
.academie .aca-stats b{color:var(--aca)}
html[data-theme="dark"] .academie .aca-stats b{color:var(--aca)}
.academie .aca-stats .st:hover{border-color:var(--aca-line)}

/* les pastilles d'instruments : contour bleu au lieu du bloc jaune plein */
.academie .inst .ib{
  background:var(--aca-soft);border:1.5px solid var(--aca-line);color:var(--aca);
  box-shadow:none;
}
html[data-theme="dark"] .academie .inst .ib{background:var(--aca-soft);border-color:var(--aca-line);color:var(--aca)}
.academie .inst:hover .ib{border-color:var(--aca)}

.academie .side-list i{color:var(--aca)}
html[data-theme="dark"] .academie .side-list i{color:var(--aca)}
.academie .side-title u{border-bottom-color:var(--aca)}
html[data-theme="dark"] .academie .side-title u{border-bottom-color:var(--aca)}
.academie .dark-script em{color:var(--aca);border-bottom-color:var(--aca-line)}

/* un seul aplat bleu sur toute la section : le bouton */
/* la couleur du bouton suit le pôle affiché : voir le bloc « aperçu des pôles » */

/* =================== FOOTER =================== */
footer{
  position:relative;overflow:hidden;background:var(--footer-bg);color:#d7d7d7;
  padding:0;isolation:isolate;
}
.f-aura{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.f-aura span{position:absolute;border-radius:50%;filter:blur(10px)}
.f-aura .a1{width:520px;height:520px;top:-230px;left:-140px;background:radial-gradient(circle,rgba(225,27,34,.30),transparent 66%);animation:drift 16s ease-in-out infinite}
.f-aura .a2{width:460px;height:460px;bottom:-200px;right:-120px;background:radial-gradient(circle,rgba(245,182,13,.26),transparent 66%);animation:drift 20s ease-in-out infinite reverse}
.f-aura .a3{width:360px;height:360px;top:40%;left:45%;background:radial-gradient(circle,rgba(225,27,34,.14),transparent 70%);animation:drift 24s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.12)}}
.f-grid-lines{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 0%,#000 25%,transparent 78%);
}
footer .wrap{position:relative;z-index:2}
.f-top{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;padding:clamp(46px,5vw,68px) 0 44px;border-bottom:1px solid rgba(255,255,255,.08)}
/* bloc de marque du pied de page : le logo principal, seul */
.f-brandblock{display:flex;align-items:center}
.brand-full.on-dark{transition:transform .5s cubic-bezier(.2,.8,.3,1),opacity .4s ease}
.brand-full.on-dark:hover{transform:translateY(-3px) scale(1.02)}
.f-news{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:28px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.f-news h4{font-size:15.5px;color:#fff;font-weight:700;margin-bottom:6px}
.f-news p{font-size:12.3px;color:#a9a9a9;line-height:1.7;margin-bottom:18px}
.f-form{display:flex;gap:10px;flex-wrap:wrap}
.f-form input{
  flex:1 1 180px;min-width:0;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);color:#fff;
  padding:13px 16px;border-radius:999px;font-size:13px;font-family:inherit;outline:none;
  transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease;
}
.f-form input::placeholder{color:#8a8a8a}
.f-form input:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(225,27,34,.16);background:rgba(0,0,0,.5)}
.f-form .btn{padding:13px 22px;font-size:13px;flex:0 0 auto}
.f-note{font-size:11px;color:#8a8a8a;margin-top:12px;display:flex;align-items:center;gap:7px}
.f-note i{color:var(--yellow)}

.f-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(30px,3.5vw,56px);padding:48px 0 44px}
.f-cols h4{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:20px;position:relative;padding-bottom:12px}
.f-cols h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--red),var(--yellow))}
.f-line{display:flex;gap:12px;align-items:flex-start;font-size:12px;line-height:1.75;margin-bottom:16px;color:#c3c3c3}
.f-line .fi{
  flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:12.5px;
  background:rgba(225,27,34,.14);color:var(--red);border:1px solid rgba(225,27,34,.28);
  transition:background-color .3s ease,color .3s ease,transform .35s cubic-bezier(.2,.8,.3,1);
}
.f-line.y .fi{background:rgba(245,182,13,.14);color:var(--yellow);border-color:rgba(245,182,13,.3)}
.f-line:hover .fi{transform:translateY(-3px)}
.f-line a:hover{color:#fff}
.f-nav{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:12.4px;color:#c3c3c3}
.f-nav a{display:inline-flex;align-items:center;gap:9px;transition:color .28s ease,transform .32s cubic-bezier(.2,.8,.3,1)}
.f-nav a::before{content:"";width:0;height:1.5px;border-radius:2px;background:var(--red);transition:width .3s ease}
.f-nav a:hover{color:#fff;transform:translateX(3px)}
.f-nav a:hover::before{width:12px}
.f-soc{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.f-soc a{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:15px;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);color:#e9e9e9;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),color .3s ease,border-color .3s ease;
}
.f-soc a::before{
  content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,var(--red),var(--yellow));
  transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.3,1),opacity .35s ease;
}
.f-soc a i,.f-soc a .ic{position:relative;z-index:2}
.f-soc a:hover{color:#fff;transform:translateY(-5px);border-color:transparent}
.f-soc a:hover::before{transform:scale(1);opacity:1}
.f-handle{font-size:12.4px;color:#c3c3c3;display:flex;align-items:center;gap:8px}
.f-handle i{color:var(--yellow)}
.f-bottom{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;font-size:11.5px;color:#9f9f9f;padding:24px 0 28px;border-top:1px solid rgba(255,255,255,.08)}
.f-bottom-links{display:flex;flex-wrap:wrap;gap:18px}
.f-bottom-links a{transition:color .28s ease}
.f-bottom-links a:hover{color:var(--yellow)}
.to-top{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;cursor:pointer;
  background:var(--red);color:#fff;border:none;font-size:14px;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),background-color .3s ease,box-shadow .3s ease;
}
.to-top:hover{transform:translateY(-5px);box-shadow:0 14px 26px rgba(225,27,34,.4)}

/* bouton flottant retour en haut */
.fab{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:90;
  width:48px;height:48px;border-radius:16px;border:none;cursor:pointer;display:grid;place-items:center;
  background:var(--red);color:#fff;font-size:15px;box-shadow:0 14px 30px rgba(225,27,34,.34);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.85);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.3,1),visibility .4s,background-color .3s ease;
}
.fab.show{opacity:1;visibility:visible;transform:none}
.fab:hover{background:var(--red-dark);transform:translateY(-4px)}

/* =================== RESPONSIVE =================== */
@media(max-width:1300px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .mission-items{grid-template-columns:repeat(3,1fr);gap:26px 0}
}
@media(max-width:1080px){
  .menu{display:none}
  .hdr-actions .hide-md{display:none}
  .burger{display:block}
  .nav{gap:14px;justify-content:space-between}
  .hdr-actions{margin-left:auto}
  .f-cols{grid-template-columns:1fr 1fr;gap:34px 28px}
}
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:28px;padding-top:30px}
  .hstage{order:-1;height:clamp(220px,52vw,300px)}
  .hs-veil{background:linear-gradient(0deg,rgba(5,5,5,.45),transparent 60%)}
  .services-head{grid-template-columns:1fr;gap:22px;align-items:start;margin-bottom:30px}
  .lead{max-width:none}
  .mission-grid{grid-template-columns:1fr;gap:26px}
  .mission-items{grid-template-columns:repeat(2,1fr);gap:26px 22px}
  .mi{border-right:none;padding:0}
  html[data-theme="dark"] .mi{border-right:none}
  .mission-bg::after{opacity:1;background:linear-gradient(0deg,var(--bg-soft),rgba(0,0,0,.05))}
  html[data-theme="dark"] .mission-bg::after{background:linear-gradient(0deg,#050505 20%,rgba(5,5,5,.72) 100%)}
  .academie{grid-template-columns:1fr}
  .aca-photo{min-height:240px}
  html[data-theme="dark"] .aca-side{border-left:none;border-top:1px solid var(--border)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .f-top{grid-template-columns:1fr;gap:30px;padding:48px 0 36px}
}
@media(max-width:700px){
  :root{--nav-h:66px}
  .hero-features{gap:10px;padding:18px 0 26px}
  .hero-features .f{flex:1 1 calc(50% - 10px);padding:11px 13px;border-right:none;border:1px solid var(--border);border-radius:14px;background:var(--bg-alt);font-size:11.8px}
  .hero-features .f:first-child{padding-left:13px}
  .cards{grid-template-columns:1fr;gap:18px}
  .ucard-media{height:220px}
  .f-cols{grid-template-columns:1fr;gap:30px;padding:36px 0 32px}
  .f-bottom{justify-content:center;text-align:center;flex-direction:column-reverse;gap:16px}
  .instruments{gap:16px}
  .inst{flex:1 1 calc(33.333% - 16px)}
  .mission-items{grid-template-columns:1fr}
}
@media(max-width:400px){
  .brand-txt .n1{letter-spacing:2px}
  .brand-txt .n2{letter-spacing:3px}
  .f-form .btn{width:100%}
}
@media(hover:none){
  .ucard:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal,.js .reveal-x,.js .reveal-zoom{opacity:1!important;transform:none!important}
}
@media print{header,.fab,.f-aura,.mobile-nav{display:none!important}}

/* =========================================================
   PAGES ENTITÉS — socle commun
   Chaque entité pose --acc / --acc-img / --glow sur <body>
   ========================================================= */
/* L'accent de la maison : l'accueil n'a pas d'entité, et sans cette valeur
   le numéro des sections, dessiné au filet, resterait invisible. */
body{--acc:#e11b22;--acc-img:#FF4A50;--glow:rgba(225,27,34,.24)}
body[data-entity]{--acc:#111111;--acc-img:#ffffff;--glow:rgba(0,0,0,.18)}
body[data-entity="studio"]{--acc:#e11b22;--acc-img:#FF4A50;--glow:rgba(225,27,34,.26)}
body[data-entity="academy"]{--acc:#2563EB;--acc-img:#93C5FD;--glow:rgba(37,99,235,.32)}
body[data-entity="production"]{--acc:#FACC15;--acc-img:#FACC15;--glow:rgba(250,204,21,.34)}
body[data-entity="store"]{--acc:#111111;--acc-img:#ffffff;--glow:rgba(17,17,17,.14)}
body[data-entity="events"]{--acc:#FFE3B8;--acc-img:#FFE3B8;--glow:rgba(255,205,140,.34)}
body[data-entity="maison"]{--acc:#e11b22;--acc-img:#ffffff;--glow:rgba(225,27,34,.28)}

/* fil d'ariane / retour */
.crumbs{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.crumbs a{display:inline-flex;align-items:center;gap:8px;transition:color .3s ease,transform .35s cubic-bezier(.2,.8,.3,1)}
.crumbs a:hover{color:var(--acc);transform:translateX(-3px)}
.crumbs svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}

/* en-tête de page */
.phero{position:relative;overflow:hidden;isolation:isolate}
.phero-inner{position:relative;z-index:3;padding-top:clamp(64px,10vw,130px);padding-bottom:clamp(52px,7vw,96px)}
.phero h1{
  font-size:clamp(38px,8vw,112px);line-height:.94;font-weight:800;letter-spacing:-3px;text-transform:uppercase;
  margin:0 0 22px;
}
.phero h1 em{font-style:normal;color:var(--acc)}
.phero .sub{font-size:clamp(14px,1.5vw,19px);line-height:1.7;max-width:620px;color:var(--muted)}
.phero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.phero-veil{position:absolute;inset:0;z-index:1;pointer-events:none}

/* sections numérotées */
.sec{padding:clamp(52px,7vw,104px) 0;position:relative}
.sec-head{display:flex;align-items:flex-end;gap:clamp(18px,3vw,40px);flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px)}
.sec-num{
  font-size:clamp(30px,4vw,58px);font-weight:800;letter-spacing:-2px;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--acc);opacity:.75;flex:0 0 auto;
}
.sec-title{font-size:clamp(22px,3.2vw,42px);font-weight:800;letter-spacing:-1.2px;line-height:1.08;text-transform:uppercase}
.sec-lead{color:var(--muted);font-size:14.5px;line-height:1.85;max-width:620px;margin-top:14px}

/* listes de prestations */
.lines{border-top:1px solid var(--border)}
.lines li{
  list-style:none;display:flex;align-items:center;gap:18px;padding:18px 6px;
  border-bottom:1px solid var(--border);font-size:clamp(15px,1.8vw,21px);font-weight:600;letter-spacing:-.3px;
  transition:padding-left .45s cubic-bezier(.2,.8,.3,1),color .3s ease,background-color .3s ease;
}
.lines li b{
  flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:1.6px;color:var(--muted);min-width:30px;
  transition:color .3s ease;
}
.lines li:hover{padding-left:20px;color:var(--acc)}
.lines li:hover b{color:var(--acc)}

/* grille de cartes de page */
.pgrid{display:grid;gap:clamp(14px,1.6vw,22px)}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
.pgrid--4{grid-template-columns:repeat(4,1fr)}
.pgrid--2{grid-template-columns:repeat(2,1fr)}
.pcard{
  position:relative;border-radius:18px;overflow:hidden;background:var(--card);
  border:1px solid var(--border);padding:26px 22px;
  transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .4s ease,box-shadow .5s ease,background-color .4s ease;
}
.pcard:hover{transform:translateY(-8px);border-color:var(--acc);box-shadow:0 24px 50px var(--glow)}
.pcard h3{font-size:17px;font-weight:700;margin-bottom:9px;letter-spacing:-.2px}
.pcard p{font-size:13.2px;line-height:1.8;color:var(--muted)}
.pcard .tagline{font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--acc);margin-bottom:12px;display:block}

/* bandeau d'action de fin de page */
.pcta{padding:clamp(56px,8vw,110px) 0;text-align:center;position:relative;overflow:hidden}
.pcta h2{font-size:clamp(24px,4.4vw,58px);font-weight:800;letter-spacing:-2px;line-height:1.05;text-transform:uppercase;margin-bottom:26px}
.btn-acc{
  background:var(--acc);color:#050505;padding:17px 34px;font-size:14px;letter-spacing:.4px;
}
body[data-entity="events"] .btn-acc{background:var(--acc);color:#050505}
body[data-entity="studio"] .btn-acc{background:#e11b22;color:#fff}
body[data-entity="studio"] .btn-acc:hover{background:#c5161c;box-shadow:0 16px 34px rgba(225,27,34,.35)}
.btn-acc:hover{transform:translateY(-3px);box-shadow:0 16px 34px var(--glow)}

/* waveform réutilisable */
.wavebar{display:flex;align-items:flex-end;gap:3px;height:var(--wh,46px);overflow:hidden}
.wavebar i{flex:0 0 3px;background:var(--acc);border-radius:2px;transform-origin:bottom;animation:waveBar 1.15s ease-in-out infinite}
.wavebar i:nth-child(6n+1){height:28%;animation-delay:0s}
.wavebar i:nth-child(6n+2){height:64%;animation-delay:.12s}
.wavebar i:nth-child(6n+3){height:40%;animation-delay:.26s}
.wavebar i:nth-child(6n+4){height:92%;animation-delay:.08s}
.wavebar i:nth-child(6n+5){height:34%;animation-delay:.34s}
.wavebar i:nth-child(6n){height:58%;animation-delay:.2s}

/* =================== CADRE EN BIAIS ===================
   Le cadre d'une page d'entité se partage en deux : le texte sur fond uni à
   gauche, la photo à droite, séparées par une diagonale. Le nom de l'entité
   est posé en grand du côté photo, et sous lui, le cas échéant, les liens
   vers les pages voisines.
   Les bornes de la coupe sont en vw et non en % : la même valeur sert au
   découpage du fond et à la largeur du texte, qui sans cela se compareraient
   à deux conteneurs différents.
   L'image, elle, reste dans une règle ordinaire de la page : une url() posée
   dans une propriété personnalisée se résout par rapport au document et non
   par rapport à la feuille, et se perdrait sous un sous-chemin. */
.ph-coupe{
  --coupe-haut:46vw;--coupe-bas:64vw;--ph-col:480px;
  --ph-h1:clamp(32px,4.6vw,66px);
  --ph-trait:var(--acc);
  --ph-contour:rgba(255,255,255,.92);
  --ph-encre:#FFFFFF;
  --ph-lien:#FFFFFF;
  --ph-voile:linear-gradient(115deg,rgba(8,10,14,.66) 0%,rgba(8,10,14,.38) 46%,rgba(8,10,14,.58) 100%);
}
.ph-coupe .phero-bg{
  opacity:1;
  clip-path:polygon(var(--coupe-haut) 0,100% 0,100% 100%,var(--coupe-bas) 100%);
}
/* le voile n'assombrit que le côté photo : il porte le nom en grand sans
   toucher au côté texte, qui garde sa couleur */
.ph-coupe .phero-veil{
  background:var(--ph-voile);
  clip-path:polygon(var(--coupe-haut) 0,100% 0,100% 100%,var(--coupe-bas) 100%);
}
.ph-cut{
  position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--ph-trait);
  clip-path:polygon(var(--coupe-haut) 0,calc(var(--coupe-haut) + 2px) 0,calc(var(--coupe-bas) + 2px) 100%,var(--coupe-bas) 100%);
}
/* Le texte reste du côté uni. La contrainte porte sur chaque élément et non
   sur .phero-inner, qui est aussi le conteneur centré de la page : lui donner
   une largeur maximale l'aurait recentré au milieu du cadre. */
/* ----- le fil d'Ariane -----
   Il quitte la colonne de texte pour devenir un enfant direct du cadre : sur
   petit écran il doit passer devant la bande photo, et seul un enfant du
   cadre peut prendre son rang dans la colonne.
   Le haut du cadre lui revient donc, la colonne de texte part de zéro, et la
   marge basse du fil reste celle du fil : la composition ne change pas. */
.ph-fil{position:relative;z-index:3;padding-top:clamp(40px,5.4vw,76px)}
.ph-coupe .phero-inner{padding-top:0;padding-bottom:clamp(44px,5.6vw,80px)}
.ph-coupe .phero-inner>*{max-width:min(var(--ph-col),calc(var(--coupe-haut) - 120px))}
/* le titre cède du terrain au nom de l'entité */
.ph-coupe h1{font-size:var(--ph-h1);letter-spacing:-2.2px;margin-bottom:18px}

/* ----- le nom de l'entité, posé sur la photo -----
   REATM au trait, l'entité pleine : les deux se lisent d'un coup sans
   recouvrir le visuel. */
.ph-side{
  position:absolute;z-index:3;right:clamp(26px,4.4vw,88px);top:26%;
  text-align:right;max-width:min(54vw,860px);
}
.ph-nom{position:relative;pointer-events:none;font-weight:800;letter-spacing:-3px;line-height:.9}
/* un halo sombre sous le nom : par endroits la photo est claire et l'encre
   de l'entité y perdrait son contraste */
.ph-nom::before{
  content:"";position:absolute;inset:-22% -12%;z-index:-1;
  background:radial-gradient(68% 64% at 58% 52%,rgba(6,8,12,.74),rgba(6,8,12,.42) 60%,transparent 82%);
}
.ph-nom b,.ph-nom em{display:block;font-style:normal;font-size:clamp(34px,7.4vw,132px)}
.ph-nom b{color:transparent;-webkit-text-stroke:2.5px var(--ph-contour);filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.ph-nom em{color:var(--ph-encre);text-shadow:0 10px 36px rgba(0,0,0,.5)}
.js .ph-nom{opacity:0;transform:translateY(20px);
  transition:opacity .85s ease .12s,transform 1.05s cubic-bezier(.16,1,.3,1) .12s}
.js .ph-nom.in{opacity:1;transform:none}
/* le nom de la page, sous celui de l'entité */
.ph-sous{
  margin-top:clamp(14px,1.8vw,22px);
  font-size:clamp(12px,1.1vw,15px);font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.5);
}
/* ----- les pages voisines, sous le nom -----
   Une pastille, le nom de la page, et un trait qui se trace au survol. */
.ph-poles{
  display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:clamp(14px,2vw,30px);margin-top:clamp(20px,2.4vw,32px);
}
.ph-poles a{
  position:relative;display:inline-flex;align-items:center;gap:11px;padding:4px 0;
  font-size:clamp(12px,1.05vw,15px);font-weight:700;letter-spacing:.3px;color:#fff;
  text-shadow:0 4px 18px rgba(0,0,0,.5);
  transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1),color .3s ease;
}
.js .ph-poles a{opacity:0;transform:translateY(14px)}
.js .ph-poles.in a{opacity:1;transform:none}
.ph-poles a:nth-child(2){transition-delay:.09s}
.ph-poles a:nth-child(3){transition-delay:.18s}
.ph-poles .pt{
  width:9px;height:9px;border-radius:50%;background:var(--ph-lien);flex:0 0 9px;
  transition:transform .4s cubic-bezier(.34,1.5,.64,1);
}
.ph-poles a:hover{color:var(--ph-lien)}
.ph-poles a:hover .pt{transform:scale(1.45)}
.ph-poles a::after{
  content:"";position:absolute;left:20px;right:0;bottom:0;height:2px;border-radius:2px;background:var(--ph-lien);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.ph-poles a:hover::after,.ph-poles a:focus-visible::after{transform:scaleX(1)}

/* Trop étroit pour une coupe en biais : la photo quitte le fond du cadre et
   devient une bande à part, en tête du cadre. Elle garde une arête en biais,
   le nom en grand et les liens par-dessus — la même composition que sur grand
   écran, pivotée d'un quart de tour. L'entité annonce donc la page, et la
   phrase qui la porte vient dessous.
   Le cadre passe en colonne pour que l'ordre se règle : la bande vient après
   le texte dans le document, où elle doit rester pour la version grand écran. */
@media(max-width:980px){
  .ph-coupe{display:flex;flex-direction:column;align-items:stretch}
  .ph-coupe .phero-bg,.ph-coupe .phero-veil,.ph-cut{display:none}
  /* le fil passe tout en haut, la bande suit, le texte vient après */
  .ph-fil{order:-2;padding-top:clamp(16px,4vw,26px)}
  .ph-fil .crumbs{margin-bottom:clamp(14px,3.4vw,20px)}
  .ph-side{order:-1}
  .ph-coupe .phero-inner{padding-top:clamp(26px,5.5vw,38px);padding-bottom:clamp(28px,6vw,44px)}
  .ph-coupe .phero-inner>*{max-width:none}
  .ph-coupe .sub{max-width:620px}
  .ph-side{
    /* position:relative conserve right/top du mode absolu : on les neutralise,
       sans quoi la bande glisse hors du cadre par la gauche. */
    position:relative;right:auto;top:auto;max-width:none;text-align:left;isolation:isolate;
    padding:clamp(34px,8vw,56px) clamp(18px,3.2vw,64px) clamp(50px,11vw,78px);
    background-size:cover;background-repeat:no-repeat;background-position:center;
    /* l'arête part vers le bas : c'est de ce côté qu'est désormais le texte */
    clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%);
  }
  .ph-side::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(165deg,rgba(8,10,14,.78),rgba(8,10,14,.56) 55%,rgba(8,10,14,.72))}
  .ph-nom::before{display:none}
  .ph-nom b,.ph-nom em{font-size:clamp(42px,13.5vw,78px)}
  .ph-poles{justify-content:flex-start;margin-top:clamp(18px,4.2vw,26px);gap:13px 22px}
}

/* =================== TRANSITION DE PAGE =================== */
.veil{position:fixed;inset:0;z-index:500;pointer-events:none;background:var(--acc);opacity:0;transition:opacity .55s ease}
html.tx-leaving .veil{opacity:1}
/* voile d'arrivée : la couleur de l'entité se retire pour révéler la page */
.veil-in{position:fixed;inset:0;z-index:500;pointer-events:none;background:var(--veil-in,#050505);
  transform:translateY(0);transition:transform .85s cubic-bezier(.76,0,.24,1),opacity .6s ease}
html.tx-ready .veil-in{transform:translateY(-101%);opacity:0}
.tx-clone{
  position:fixed;z-index:520;overflow:hidden;background-size:cover;background-position:center;
  transition:left .8s cubic-bezier(.76,0,.24,1),top .8s cubic-bezier(.76,0,.24,1),
             width .8s cubic-bezier(.76,0,.24,1),height .8s cubic-bezier(.76,0,.24,1),
             border-radius .8s cubic-bezier(.76,0,.24,1);
}
.tx-clone .tx-flood{position:absolute;inset:0;background:var(--tx-acc,#050505);opacity:0;transition:opacity .7s ease .18s}
.tx-clone .tx-label{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-40%);text-align:center;
  font-size:clamp(28px,7vw,88px);font-weight:800;letter-spacing:-2.5px;text-transform:uppercase;color:#fff;
  opacity:0;transition:opacity .5s ease .34s,transform .7s cubic-bezier(.16,1,.3,1) .34s;
}
.tx-clone.go .tx-flood{opacity:.94}
.tx-clone.go .tx-label{opacity:1;transform:translateY(-50%)}

@media(max-width:1080px){
  .pgrid--4{grid-template-columns:repeat(2,1fr)}
  .pgrid--3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .pgrid--4,.pgrid--3,.pgrid--2{grid-template-columns:1fr}
  .sec-head{align-items:flex-start;gap:12px}
  .phero h1{letter-spacing:-1.6px}
}
@media(prefers-reduced-motion:reduce){
  .veil,.veil-in,.tx-clone{display:none!important}
}

/* =========================================================
   PIED DE PAGE AUX COULEURS DE L'ENTITÉ
   Seules les pages portant .f-tinted sont concernées : Academy,
   Production et Store. Studio, l'accueil et la maison gardent
   l'accent rouge et jaune de la maison.
   ========================================================= */
body[data-entity="academy"] .f-tinted{
  --facc:#2563EB;--facc-2:#60A5FA;
  --facc-soft:rgba(37,99,235,.16);--facc-line:rgba(37,99,235,.34);
  --faura-1:rgba(37,99,235,.30);--faura-2:rgba(96,165,250,.20);
}
body[data-entity="production"] .f-tinted{
  --facc:#FACC15;--facc-2:#FDE047;
  --facc-soft:rgba(250,204,21,.16);--facc-line:rgba(250,204,21,.36);
  --faura-1:rgba(250,204,21,.26);--faura-2:rgba(253,224,71,.17);
}
body[data-entity="store"] .f-tinted{
  --facc:#FFFFFF;--facc-2:#8A8A8A;
  --facc-soft:rgba(255,255,255,.10);--facc-line:rgba(255,255,255,.26);
  --faura-1:rgba(255,255,255,.13);--faura-2:rgba(138,138,138,.12);
}

/* halos de fond */
.f-tinted .f-aura .a1{background:radial-gradient(circle,var(--faura-1),transparent 66%)}
.f-tinted .f-aura .a2{background:radial-gradient(circle,var(--faura-2),transparent 66%)}
.f-tinted .f-aura .a3{background:radial-gradient(circle,var(--faura-2),transparent 70%)}

/* filets sous les intitulés de colonne */
.f-tinted .f-cols h4::after{background:linear-gradient(90deg,var(--facc),var(--facc-2))}

/* pastilles de contact */
.f-tinted .f-line .fi{background:var(--facc-soft);color:var(--facc);border-color:var(--facc-line)}
.f-tinted .f-line.y .fi{background:var(--facc-soft);color:var(--facc-2);border-color:var(--facc-line)}

/* liens de navigation */
.f-tinted .f-nav a::before{background:var(--facc)}

/* réseaux sociaux */
.f-tinted .f-soc a::before{background:linear-gradient(135deg,var(--facc),var(--facc-2))}
body[data-entity="production"] .f-tinted .f-soc a:hover,
body[data-entity="store"] .f-tinted .f-soc a:hover{color:#050505}
.f-tinted .f-handle i{color:var(--facc)}

/* infolettre */
.f-tinted .f-form input:focus{border-color:var(--facc);box-shadow:0 0 0 4px var(--facc-soft)}
.f-tinted .f-form .btn-red{background:var(--facc);color:#050505}
body[data-entity="academy"] .f-tinted .f-form .btn-red{color:#fff}
.f-tinted .f-form .btn-red:hover{background:var(--facc-2);box-shadow:0 14px 28px var(--facc-soft)}
.f-tinted .f-note i{color:var(--facc)}

/* retour en haut, dans le pied de page et en flottant */
.f-tinted .to-top{background:var(--facc);color:#050505}
body[data-entity="academy"] .f-tinted .to-top{color:#fff}
.f-tinted .f-bottom-links a:hover{color:var(--facc)}
body[data-entity="academy"] .fab,
body[data-entity="production"] .fab,
body[data-entity="store"] .fab{background:var(--acc);color:#050505;box-shadow:0 14px 30px var(--glow)}
body[data-entity="academy"] .fab{color:#fff}

/* ===== LES TROIS PÔLES DE L'ACADÉMIE, VUS DEPUIS L'ACCUEIL =====
   Trois libellés lisibles d'un coup d'œil : le détail est sur la page
   REATM Academy, ici on annonce simplement la structure. */
.aca-poles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px;max-width:600px}
.aca-poles>*{min-width:0}
.aca-poles .ap{
  border:1px solid var(--aca-line,var(--border));border-radius:14px;
  padding:16px 15px;background:var(--aca-soft,transparent);
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s ease;
}
.aca-poles .ap:hover{transform:translateY(-5px);border-color:var(--aca,var(--red))}
.aca-poles i{font-size:15px;color:var(--aca,var(--red));display:block;margin-bottom:11px}
.aca-poles b{display:block;font-size:13.4px;font-weight:700;letter-spacing:-.2px;margin-bottom:5px}
.aca-poles span{display:block;font-size:11.4px;line-height:1.65;color:var(--muted)}
@media(max-width:760px){.aca-poles{grid-template-columns:1fr;gap:8px}.aca-poles i{margin-bottom:8px}}

/* ===== LE LOGO DE CHAQUE PÔLE =====
   L'accueil et « Nos services » portent le logo de la maison, en noir sur
   fond clair et en blanc sur fond sombre. Sur la page d'un pôle, le même
   sigle prend la couleur de ce pôle : on sait où l'on est dès l'en-tête.
   Deux valeurs par pôle, car l'en-tête est blanc en mode clair et noir en
   mode sombre, et une couleur lisible sur l'un ne l'est pas sur l'autre. */
body{--logo-ink:#111111}
html[data-theme="dark"] body{--logo-ink:#ffffff}
body[data-entity="maison"]{--logo-ink:#111111}
html[data-theme="dark"] body[data-entity="maison"]{--logo-ink:#ffffff}

body[data-entity="studio"]{--logo-ink:#e11b22}
html[data-theme="dark"] body[data-entity="studio"]{--logo-ink:#FF4A50}
/* le logo de l'Académie est vert-bleu : le logotype le suit */
body[data-entity="academy"]{--logo-ink:#44797F}
html[data-theme="dark"] body[data-entity="academy"]{--logo-ink:#7FB3B8}
/* le jaune du pôle Prod disparaît sur un en-tête blanc : on l'assombrit
   juste assez pour le lire, sans quitter la famille ambrée */
body[data-entity="production"]{--logo-ink:#CA8A04}
html[data-theme="dark"] body[data-entity="production"]{--logo-ink:#FACC15}
body[data-entity="store"]{--logo-ink:#111111}
html[data-theme="dark"] body[data-entity="store"]{--logo-ink:#ffffff}
body[data-entity="events"]{--logo-ink:#111111}
html[data-theme="dark"] body[data-entity="events"]{--logo-ink:#FFE3B8}

/* le second mot du logotype nomme le pôle : REATM ACADEMY, REATM STUDIO… */
body[data-entity]:not([data-entity="maison"]) .brand-txt .n2{color:var(--logo-ink)}

/* ===== LE LOGO OFFICIEL DE CHAQUE PÔLE =====
   Sur la page d'un pôle, le sigle détouré laisse place au logo de ce pôle :
   une pastille qui porte sa couleur. Le mot « REATM RECORDS » gravé sous le
   sigle a été retiré de ces fichiers, illisible à 46 px — il est de toute
   façon déjà écrit à côté, en toutes lettres.
   Les chemins restent dans des règles ordinaires : une url() rangée dans une
   variable se résoudrait depuis la page et non depuis la feuille de style. */
body[data-entity]:not([data-entity="maison"]) .brand-mark{
  width:var(--lm,46px);
  background-color:transparent;
  background-repeat:no-repeat;background-position:center;background-size:cover;
  -webkit-mask:none;mask:none;
  border-radius:13px;
  box-shadow:0 2px 12px rgba(0,0,0,.16);
}
body[data-entity="studio"] .brand-mark{background-image:url('../assets/mark-studio.jpg')}
body[data-entity="academy"] .brand-mark{background-image:url('../assets/mark-academy.jpg')}
body[data-entity="production"] .brand-mark{background-image:url('../assets/mark-production.jpg')}
body[data-entity="store"] .brand-mark{background-image:url('../assets/mark-store.jpg')}
body[data-entity="events"] .brand-mark{background-image:url('../assets/mark-events.jpg')}
html[data-theme="dark"] body[data-entity] .brand-mark{box-shadow:0 2px 12px rgba(0,0,0,.5)}

/* ===== L'IDENTITÉ DE LA MAISON, SUR L'ACCUEIL =====
   Sections numérotées : qui nous sommes, la vision, les valeurs. Elles
   venaient de la page « Nos services » et vivent maintenant sur l'accueil,
   donc leurs règles rejoignent la feuille partagée. */
.mz-vision{background:var(--bg-alt)}
.mz-quote{
  font-size:clamp(26px,4.4vw,56px);font-weight:800;letter-spacing:-2px;line-height:1.1;text-transform:uppercase;
}
.mz-quote em{font-style:normal;color:var(--red)}
html[data-theme="dark"] .mz-quote em{color:var(--yellow)}
/* valeurs et missions : deux colonnes de listes numérotées */
.mz-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,70px)}
.mz-val li{
  list-style:none;display:flex;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);
  font-size:clamp(17px,2.2vw,27px);font-weight:700;letter-spacing:-.6px;
  transition:padding-left .45s cubic-bezier(.2,.8,.3,1),color .3s ease;
}
.mz-val li:hover{padding-left:16px;color:var(--red)}
html[data-theme="dark"] .mz-val li:hover{color:var(--yellow)}
.mz-val b{font-size:11px;font-weight:700;letter-spacing:1.6px;color:var(--muted);flex:0 0 26px}
.mz-val small{display:block;font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:5px;line-height:1.6}
@media(max-width:820px){.mz-two{grid-template-columns:1fr}}
/* le numéro de section, dans l'étiquette du bloc R.E.A.T.M */
.mz-n{opacity:.55;margin-right:7px;letter-spacing:1.4px}

/* =================== APERÇU DES PÔLES — un panneau qui défile ===================
   Les cinq pôles partagent la mise en page de l'ancien bloc Académie. Les plans
   sont empilés dans une seule cellule de grille : la section se cale sur le plus
   haut, donc elle ne saute pas d'un pôle à l'autre. */
.spot{background:var(--bg)}
.spot-stage{display:grid}
.spot-slide{
  grid-area:1/1;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s ease,visibility 0s linear .55s;
}
.spot-slide.on{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s,0s}
/* l'entrée en cascade : chaque élément porte son propre retard */
.spot-slide [style*="--d"]{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.spot-slide.on [style*="--d"]{opacity:1;transform:none;transition-delay:var(--d,0ms)}

/* chaque pôle garde sa couleur : deux valeurs, l'en-tête clair n'acceptant pas
   les teintes vives que le fond sombre supporte */
.spot-slide[data-ent="studio"]{--aca:#e11b22;--aca-soft:rgba(225,27,34,.10);--aca-line:rgba(225,27,34,.30);--aca-fort:#c5161c}
html[data-theme="dark"] .spot-slide[data-ent="studio"]{--aca:#FF4A50;--aca-soft:rgba(255,74,80,.12);--aca-line:rgba(255,74,80,.32);--aca-fort:#e11b22}
.spot-slide[data-ent="academy"]{--aca:#2563EB;--aca-soft:rgba(37,99,235,.10);--aca-line:rgba(37,99,235,.28);--aca-fort:#1D4ED8}
html[data-theme="dark"] .spot-slide[data-ent="academy"]{--aca:#93C5FD;--aca-soft:rgba(147,197,253,.10);--aca-line:rgba(147,197,253,.28);--aca-fort:#2563EB}
.spot-slide[data-ent="production"]{--aca:#CA8A04;--aca-soft:rgba(202,138,4,.12);--aca-line:rgba(202,138,4,.30);--aca-fort:#A16207}
html[data-theme="dark"] .spot-slide[data-ent="production"]{--aca:#FACC15;--aca-soft:rgba(250,204,21,.12);--aca-line:rgba(250,204,21,.32);--aca-fort:#CA8A04}
.spot-slide[data-ent="store"]{--aca:#111111;--aca-soft:rgba(17,17,17,.07);--aca-line:rgba(17,17,17,.22);--aca-fort:#000000}
html[data-theme="dark"] .spot-slide[data-ent="store"]{--aca:#FFFFFF;--aca-soft:rgba(255,255,255,.08);--aca-line:rgba(255,255,255,.26);--aca-fort:#E5E5E5}
.spot-slide[data-ent="events"]{--aca:#A9762E;--aca-soft:rgba(169,118,46,.12);--aca-line:rgba(169,118,46,.30);--aca-fort:#8A5F23}
html[data-theme="dark"] .spot-slide[data-ent="events"]{--aca:#FFE3B8;--aca-soft:rgba(255,227,184,.12);--aca-line:rgba(255,227,184,.30);--aca-fort:#E6C796}
/* le bouton suit le pôle au lieu d'un bleu figé */
.academie .aca-side .btn-red{background:var(--aca);color:#fff}
.spot-slide[data-ent="production"] .aca-side .btn-red{color:#1B1D1A}
/* l'ocre d'Events ne porte ni le blanc ni le noir sur fond clair : le bouton
   prend sa teinte foncée. En sombre, la crème reprend l'encre sombre. */
.spot-slide[data-ent="events"] .aca-side .btn-red{background:var(--aca-fort);color:#fff}
html[data-theme="dark"] .spot-slide[data-ent="events"] .aca-side .btn-red{background:var(--aca);color:#1B1D1A}
html[data-theme="dark"] .spot-slide[data-ent="store"] .aca-side .btn-red{color:#111111}
/* en mode sombre, l'accent de l'Académie est un bleu pâle : le texte du bouton
   y passe en sombre. Celui du Studio garde le rouge plein, plus lisible qu'un
   saumon sous du blanc. */
html[data-theme="dark"] .spot-slide[data-ent="academy"] .aca-side .btn-red{color:#0B1220}
html[data-theme="dark"] .spot-slide[data-ent="studio"] .aca-side .btn-red{background:#e11b22;color:#fff}
html[data-theme="dark"] .spot-slide[data-ent="studio"] .aca-side .btn-red:hover{background:#c5161c}
.academie .aca-side .btn-red:hover{background:var(--aca-fort,var(--aca));box-shadow:0 14px 28px var(--aca-line)}

/* Moins d'animation : le bloc change toujours de pôle, mais d'un coup.
   Le figer laisserait quatre pôles sur cinq invisibles. */
@media(prefers-reduced-motion:reduce){
  .spot-slide [style*="--d"]{opacity:1;transform:none;transition:none}
  .spot-slide{transition:none}
  .spot-slide.on{transition:none}
}