/* Site Soul Revenge (Pêche & Pixel).
   Valeurs reprises de design/izark/valeurs-animation.md (palette, polices, contrastes, minutage).
   Pour changer la palette, il suffit de modifier les variables ci-dessous. */
:root{
  --nuit:#05080D;   /* fond */
  --coque:#0D1420;  /* cartes */
  --circuit:#1E2A3A;/* lignes */
  --lum:#E8EEF5;    /* texte principal */
  --brume:#93A1B3;  /* texte secondaire */
  --cyan:#5FE8FE;   /* froid, machine : liens, focus */
  --bleu:#2F8BC5;   /* froid profond : décor seulement */
  --ambre:#FF9F43;  /* chaud, humain : bouton principal */
  --or:#FED286;     /* chaud clair */
  --f-titre:"Michroma","Arial Narrow",sans-serif;
  --f-texte:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1120px;
}
@font-face{font-family:"Michroma";src:url(fonts/michroma.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sora";src:url(fonts/sora.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nuit);-webkit-text-size-adjust:100%}
body{background:var(--nuit);color:var(--lum);font:400 17px/1.6 var(--f-texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:30;background:var(--lum);color:var(--nuit);padding:10px 14px}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.mono{font:500 12px/1.5 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brume)}

/* ---------- En-tête ---------- */

/* ---------- Teaser ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px 0 36px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(60% 45% at 22% 42%,rgba(47,139,197,.16),transparent 70%),
  radial-gradient(60% 45% at 78% 42%,rgba(255,159,67,.11),transparent 70%)}
.grain{position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scan{position:absolute;left:0;right:0;top:0;height:30%;z-index:-1;pointer-events:none;background:linear-gradient(transparent,rgba(95,232,254,.045),transparent);transform:translateY(-100%)}
.anim .scan{animation:scan 11s linear 3.6s infinite}
.hors .scan,.hors .signal i,.hors .curseur{animation-play-state:paused!important}
.signal i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ambre);margin-right:8px;vertical-align:1px}
.anim .signal i{animation:pouls 2.4s ease-in-out infinite}
@keyframes pouls{50%{opacity:.35}}
@keyframes scan{to{transform:translateY(420%)}}
.axe{position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:-1;background:linear-gradient(var(--bleu),transparent 30%,transparent 70%,var(--ambre));opacity:.45}

/* ---------- L'œil : le logo client (logo-oeil-alexy.png) est la base, les effets sont des calques ----------
   Mesures sur l'image 1254 px : iris (625, 478) rayon 195 ; ondes gauche x 0-307 / y 325-633 ; ondes droite x 953-1254 / y 340-600.
   Animations en transform et opacity seulement. Tactile et mobile : le regard bouge seul (izark.js). Mouvement réduit : image fixe. */
.logo-oeil{position:relative;margin:0;aspect-ratio:1;overflow:hidden}
.logo-accueil{width:min(580px,88vw,calc(100svh - 400px));min-width:min(320px,88vw)}
.logo-iz{width:min(460px,84vw);margin:0 auto 22px}
.logo-base{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 7%,#000 88%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 7%,#000 88%,transparent);mask-composite:intersect}
.calques{position:absolute;inset:0;pointer-events:none}
.calques i{position:absolute;display:block}
.cq{position:absolute;overflow:hidden}
.cq img{position:absolute;max-width:none;height:auto}
/* halo radial cyan et ambre, centré sur l'iris */
.halo-suit{position:absolute;left:49.84%;top:38.12%;width:64%;aspect-ratio:1;margin:-32% 0 0 -32%;mix-blend-mode:screen}
.halo{position:absolute;inset:0;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 43% 50%,rgba(95,232,254,.42),rgba(47,139,197,.16) 26%,transparent 46%),radial-gradient(circle at 57% 50%,rgba(255,159,67,.36),rgba(254,210,134,.1) 26%,transparent 46%)}
/* l'iris : une copie de l'image, découpée en disque, qui pulse */
.iris-p{left:34.29%;top:22.57%;width:31.1%;aspect-ratio:1;border-radius:50%;opacity:0;mix-blend-mode:screen}
.iris-p img{width:321.5%;left:-110.25%;top:-72.57%}
/* les ondes : copies des zones d'ondes, qui vibrent en scaleX depuis le bord de l'œil */
.onde-v{position:absolute;mix-blend-mode:screen}
.onde-v .cq{inset:0;opacity:0}
.onde-g{left:0;top:25.92%;width:24.48%;height:24.56%;transform-origin:100% 50%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.onde-g .cq{transform-origin:100% 50%}
.onde-g img{width:408.5%;left:0;top:-105.5%}
.onde-d{left:76%;top:27.11%;width:24%;height:20.73%;transform-origin:0 50%;-webkit-mask-image:linear-gradient(270deg,transparent,#000 40%);mask-image:linear-gradient(270deg,transparent,#000 40%)}
.onde-d .cq{transform-origin:0 50%}
.onde-d img{width:416.6%;left:-316.7%;top:-130.8%}
/* la zone de l'œil (amande) : reflet et paupières */
.amande{position:absolute;left:15%;top:14.12%;width:70%;height:48%;clip-path:ellipse(50% 50% at 50% 50%)}
.reflet-z{mix-blend-mode:screen}
.reflet{top:-10%;left:0;width:26%;height:120%;opacity:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent 28%,rgba(226,242,255,.2) 50%,transparent 72%)}
.paup{display:none;position:absolute;left:15.625%;top:16.458%;width:66.146%;height:40%;
  /* contour exact de l'ouverture intérieure de l'anneau, mesuré sur l'image (oeil7/contour.py) : rien ne sort de l'œil */
  clip-path:polygon(0.00% 52.60%,3.94% 41.67%,7.87% 33.85%,15.75% 20.83%,23.62% 11.72%,31.50% 5.73%,39.37% 2.08%,45.67% 0.52%,51.97% 0.00%,58.27% 0.52%,64.57% 2.08%,70.87% 8.33%,78.74% 21.35%,86.61% 34.90%,92.91% 46.88%,100.00% 58.33%,100.00% 58.33%,92.91% 66.15%,86.61% 73.44%,78.74% 82.29%,70.87% 89.84%,64.57% 94.79%,58.27% 98.44%,51.97% 100.00%,45.67% 99.48%,39.37% 97.92%,31.50% 94.27%,23.62% 88.54%,15.75% 79.43%,7.87% 66.93%,3.94% 59.90%)}
/* deux paupières en SVG aux couleurs de l'œil (bleu nuit à gauche, presque noir au centre, ambre sombre à droite), bord légèrement lumineux.
   La haute est bombée vers le bas, la basse vers le haut. Ouvertes, elles sont étirées en hauteur (scaleY 4) : bord très courbe.
   En fermant, l'étirement revient à 1 : la courbure diminue et la haute finit sur la ligne de fermeture courbe. Seul transform bouge,
   le liseré garde son épaisseur (non-scaling-stroke), la découpe .paup les garde dans l'œil. */
.lid{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.lid-h,.lid-b{transform-box:view-box;will-change:transform}
.lid-h{transform-origin:0 0;transform:translateY(-980px) scaleY(4)}
.lid-b{transform-origin:0 384px;transform:translateY(870px) scaleY(4)}
.flash{left:0;top:calc(59% - 1px);width:100%;height:2px;opacity:0;background:linear-gradient(90deg,rgba(95,232,254,0),#5FE8FE 18%,#fff 50%,#FF9F43 82%,rgba(255,159,67,0))}

.anim .logo-oeil{animation:logoIn .7s ease-out both}
.anim .paup{display:block}
.anim .lid-h{animation:lidH 1.6s cubic-bezier(.2,.8,.2,1) .5s both}
.anim .lid-b{animation:lidB 1.6s cubic-bezier(.2,.8,.2,1) .5s both}
.anim .flash{animation:flash 1.1s cubic-bezier(.3,.7,.2,1) .2s both}
.halo{-webkit-mask-image:radial-gradient(circle,transparent 15%,#000 24%);mask-image:radial-gradient(circle,transparent 15%,#000 24%)}
.anim .halo{animation:haloP 3.6s ease-in-out 1.6s infinite alternate both}
.anim .iris-p{animation:irisP 3.6s ease-in-out 1.6s infinite alternate both}
.anim .onde-g .cq{animation:ondeV 1.9s ease-in-out 1.4s infinite alternate both}
.anim .onde-d .cq{animation:ondeV 1.9s ease-in-out .45s infinite alternate both}
.anim .reflet{animation:reflet 7s linear 3.2s infinite}
.anim .parle .onde-v .cq{animation-duration:.5s}
.hors .logo-oeil *,.logo-oeil.hors *{animation-play-state:paused!important}
@keyframes logoIn{from{opacity:0}}
@keyframes lidH{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-980px) scaleY(4)}}
@keyframes lidB{from{transform:translateY(0) scaleY(1)}to{transform:translateY(870px) scaleY(4)}}
@keyframes flash{0%{opacity:0;transform:scaleX(.04)}40%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes haloP{from{opacity:.3;transform:scale(.9)}to{opacity:.85;transform:scale(1.06)}}
@keyframes irisP{from{opacity:0;transform:scale(1)}to{opacity:.42;transform:scale(1.035)}}
@keyframes ondeV{from{opacity:.08;transform:scaleX(1)}to{opacity:.7;transform:scaleX(1.08)}}
@keyframes reflet{0%{opacity:0;transform:translateX(-110%)}3%{opacity:1}20%{opacity:1;transform:translateX(390%)}23%,100%{opacity:0;transform:translateX(390%)}}
/* le regard : calque de l'iris, déplacé en transform par izark.js (tactile et mobile seulement) */
.regard{position:absolute;inset:0}
/* mobile et écran tactile : iris et reflet visibles, l'iris un peu plus présent pour que le regard se voie */
@media (max-width:700px),(pointer:coarse){.anim .iris-p{animation-name:irisM}}
@keyframes irisM{from{opacity:.3;transform:scale(1)}to{opacity:.58;transform:scale(1.035)}}
.mots{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:14px;padding:0 20px}
.mots li{font:500 13px/1.5 var(--f-mono);letter-spacing:.22em;text-transform:uppercase}
.mots li:nth-child(odd){color:var(--cyan)} .mots li:nth-child(even){color:var(--or)}
.anim .mots li{animation:mot .5s ease-out both}
.anim .mots li:nth-child(1){animation-delay:2.1s}.anim .mots li:nth-child(2){animation-delay:2.5s}
.anim .mots li:nth-child(3){animation-delay:2.9s}.anim .mots li:nth-child(4){animation-delay:3.3s}
@keyframes mot{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.voix{margin-top:clamp(14px,2.4vw,26px);width:min(620px,calc(100% - 40px));min-height:12.3em;font:400 clamp(13px,1.15vw,15px)/1.65 var(--f-mono);color:var(--lum);text-align:left;border-left:1px solid var(--circuit);padding:6px 10px 6px 16px;background:rgba(5,8,13,.72)}
.anim .voix{animation:apparait .8s ease-out 3.5s both}
.voix .etiq{display:block;color:var(--cyan);letter-spacing:.2em;font-size:12px;text-transform:uppercase;margin-bottom:4px}
.voix .l{display:block;min-height:1.65em}
.voix .l.chaud{color:var(--or)}
.voix .g{color:var(--cyan)}
.curseur{display:inline-block;width:.6em;height:1.1em;vertical-align:-.18em;background:var(--ambre);margin-left:2px}
.anim .curseur{animation:cur 1.1s steps(1) infinite}
@keyframes cur{50%{opacity:0}}

.actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;margin-top:20px;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;font:600 15px var(--f-texte);text-decoration:none;cursor:pointer;border:1px solid var(--circuit);background:rgba(13,20,32,.6);color:var(--lum);border-radius:2px}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-chaud{background:var(--ambre);border-color:var(--ambre);color:var(--nuit)}
.btn-chaud:hover{background:var(--or);border-color:var(--or);color:var(--nuit);box-shadow:0 0 22px rgba(255,159,67,.3)}
.btn[disabled]{cursor:default;opacity:.85}
.btn svg{width:18px;height:18px}
.note-son{font-size:12px}

.anim .actions{animation:apparait 1s ease-out 3.6s both}

/* ---------- Sections ---------- */
section.bloc{position:relative;padding:72px 0 24px}
.bloc h2{font:400 clamp(18px,2.3vw,26px)/1.25 var(--f-titre);letter-spacing:.14em;text-transform:uppercase;margin:6px 0 10px}
.bloc .intro{color:var(--brume);max-width:60ch;margin-bottom:26px;font-size:16px}
.bloc .num{color:var(--cyan)}
.bloc.chaud .num{color:var(--or)}
.sep{height:1px;width:min(var(--wrap),calc(100% - 40px));margin:0 auto;background:linear-gradient(90deg,transparent,var(--bleu),#fff 50%,var(--ambre),transparent);opacity:.35}
.grille{display:grid;gap:14px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.carte{border:1px solid var(--circuit);background:var(--coque);padding:16px}
.carte h3{font:600 16px/1.35 var(--f-texte);margin:6px 0 4px}
.carte p{font-size:14px;color:var(--brume)}

/* vidéos : iframes youtube-nocookie, loading="lazy", cadre 16/9 réservé */
.video{position:relative;aspect-ratio:16/9;width:100%;border:1px solid var(--circuit);background:
  radial-gradient(70% 90% at 25% 50%,rgba(47,139,197,.28),transparent 70%),
  radial-gradient(70% 90% at 80% 50%,rgba(255,159,67,.2),transparent 70%),var(--coque);
  overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* liens */
.liens h3{font:400 12px/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.liens.c h3{color:var(--or)}
.liens ul{list-style:none}
.liens li{border-top:1px solid var(--circuit)}
.liens li a,.liens li span{display:flex;justify-content:space-between;gap:12px;padding:11px 0;min-height:44px;align-items:center;font-size:15px;color:var(--lum);text-decoration:none}
.liens li a:hover{color:var(--cyan)}
.liens li a small,.liens li span small{color:var(--brume);font:400 11px var(--f-mono);letter-spacing:.1em;white-space:nowrap}
.liens li span{color:var(--brume)}

/* dates */
.dates{list-style:none;border-top:1px solid var(--circuit)}
.dates li{display:grid;grid-template-columns:170px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--circuit)}
.dates time,.dates .quand{font:400 13px var(--f-mono);letter-spacing:.08em;color:var(--lum)}
.dates .quoi b{display:block;font-weight:600}
.dates .quoi span{font-size:14px;color:var(--brume)}
.tag{font:400 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--circuit);color:var(--brume);white-space:nowrap}
.tag.v{border-color:var(--ambre);color:var(--or)}
.dates li.passe{opacity:.8}
.dates a{font-size:14px}

/* e-shop */
.produit .vis{aspect-ratio:1;border:1px dashed var(--circuit);display:grid;place-items:center;margin-bottom:12px;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(30,42,58,.35) 10px 11px)}
.produit .btn{width:100%;margin-top:12px;min-height:44px}

/* formulaire */
form.devis{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-width:860px}
.champ{display:flex;flex-direction:column;gap:6px}
.champ.l2{grid-column:1/-1}
.champ label,.champ legend{font:400 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brume)}
.champ input,.champ select,.champ textarea{font:400 16px var(--f-texte);color:var(--lum);background:var(--coque);border:1px solid var(--circuit);padding:11px 12px;min-height:46px;border-radius:2px;width:100%}
.champ textarea{min-height:120px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 2px rgba(95,232,254,.25)}
.case{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--brume)}
.case input{width:20px;height:20px;margin-top:2px;accent-color:var(--ambre);flex:none}
.champ .case{display:flex;flex-direction:row;gap:12px;align-items:flex-start;font:400 14px/1.5 var(--f-texte);letter-spacing:0;text-transform:none;color:var(--brume);cursor:pointer}
.champ .case input{width:20px;height:20px;min-height:0;padding:0;margin:2px 0 0}
.retour{grid-column:1/-1;font:400 13px var(--f-mono);color:var(--or);min-height:1.5em}
fieldset{border:0}

footer{padding:56px 0 40px;margin-top:56px;border-top:1px solid var(--circuit)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer a{color:var(--lum);text-decoration:none;margin-right:18px;display:inline-block;padding:10px 0}
footer a:hover{color:var(--cyan)}
footer .pied-droit{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
footer .credit{margin:0;font-size:13px;color:var(--brume);letter-spacing:.02em}

.rv{opacity:1}
.anim.rvok .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.anim.rvok .rv.vu{opacity:1;transform:none}


/* ---------- Menu ---------- */

.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 24px;background:linear-gradient(var(--nuit) 35%,rgba(5,8,13,0))}
.top .sigle{position:relative;z-index:2;display:flex;align-items:center;gap:8px;min-height:44px;text-decoration:none}
.top .sigle b{color:var(--lum);font-weight:500}
.menu-btn{position:relative;z-index:2;display:none;background:rgba(5,8,13,.6);border:1px solid var(--circuit);color:var(--lum);font:500 12px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;min-height:44px;padding:0 16px;cursor:pointer}
.menu-btn:hover{border-color:var(--cyan)}
#nav ul{list-style:none;margin:0;padding:0}
#nav a,.sous-btn{font:400 11px/1 var(--f-titre);letter-spacing:.16em;text-transform:uppercase;color:var(--brume);text-decoration:none}
#nav a:hover,#nav a[aria-current]{color:var(--lum)}
#nav a.bk{color:var(--or)}
#nav a .note{display:none}
.sous-btn{background:none;border:0;cursor:pointer;min-width:32px;min-height:44px;color:var(--brume)}
.sous-btn::after{content:"";display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 1px 1px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.sous-btn[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.sous-btn:hover{color:var(--lum)}

/* Ordinateur : menu en ligne, sous-menu déroulant */
@media (min-width:1101px){
  .nav-l{display:flex;align-items:center}
  .nav-l>li{position:relative;display:flex;align-items:center}
  .nav-l>li>a{display:flex;align-items:center;min-height:44px;padding:0 11px}
  .nav-l>li.a-sous>a{padding-right:2px}
  .nav-l>li.grp{margin-left:10px;padding-left:10px;border-left:1px solid var(--circuit)}
  .sous{position:absolute;top:100%;left:0;min-width:230px;background:var(--coque);border:1px solid var(--circuit);padding:6px 0}
  .js .sous:not(.ouvert){display:none}
  .sous a{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-height:44px}
  .sous a .note{display:block;font:500 12px var(--f-mono);letter-spacing:.14em;color:var(--brume)}
  .sous a:hover{background:var(--circuit)}
}

/* Tablette et mobile : bouton Menu, liste en plein écran */
@media (max-width:1100px){
  .top{padding:8px 16px}
  .js .menu-btn{display:block}
  #nav{position:fixed;inset:0;z-index:1;background:rgba(5,8,13,.97);padding:72px 20px 32px;overflow:auto;overscroll-behavior:contain}
  .js #nav:not(.ouvert){display:none}
  .nav-l{max-width:560px;margin:0 auto}
  .nav-l>li{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--circuit)}
  .nav-l>li>a{flex:1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0;font-size:15px;color:var(--lum)}
  .nav-l>li.grp{margin-top:22px;border-top:1px solid var(--circuit)}
  #nav a .note{display:inline;font:500 12px var(--f-mono);letter-spacing:.16em;color:var(--brume)}
  .sous-btn{min-width:48px;min-height:48px;border-left:1px solid var(--circuit);margin-left:12px}
  .sous{width:100%;padding:0 0 10px 18px;border-left:1px solid var(--cyan);margin:0 0 12px 2px}
  .js .sous:not(.ouvert){display:none}
  .sous a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 0;min-height:44px;font-size:13px!important;color:var(--lum)!important}
  body.menu-ouvert{overflow:hidden}
}
@media (max-width:600px){ .top .long{display:none} }
/* Sans JavaScript : en-tête statique, tout est visible */
html:not(.js) .top{position:static;flex-wrap:wrap}
html:not(.js) #nav{position:static;padding:0;background:none}

/* ---------- Pages intérieures ---------- */
.p-hero{position:relative;padding:132px 0 56px;overflow:hidden;isolation:isolate}
.p-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 70% at 15% 30%,rgba(47,139,197,.16),transparent 70%),radial-gradient(55% 70% at 88% 40%,rgba(255,159,67,.11),transparent 70%)}
.p-hero h1{font:400 clamp(26px,4.4vw,52px)/1.15 var(--f-titre);letter-spacing:.12em;text-transform:uppercase;margin:10px 0 16px}
.p-hero .lead{font-size:clamp(17px,1.6vw,20px);max-width:58ch;color:var(--lum)}
.p-hero .lead+.lead{margin-top:10px;color:var(--brume);font-size:16px}
.ancres{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.froid{color:var(--cyan)} .chaud-t{color:var(--or)}
.visuel-vide{aspect-ratio:4/3;border:1px dashed var(--circuit);display:grid;place-items:center;text-align:center;padding:16px;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(30,42,58,.35) 10px 11px)}
.visuel-vide.rond{aspect-ratio:1;border-radius:50%;max-width:260px;margin:0 auto}
.formation{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,56px);align-items:start}
.formation.inverse{grid-template-columns:1fr 1.1fr}
.formation.inverse>.media{order:-1}
.formation h3{font:400 13px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:26px 0 10px}
.bloc.chaud .formation h3{color:var(--or)}
.formation p{color:var(--brume)}
.membres{list-style:none;border-top:1px solid var(--circuit)}
.membres li{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--circuit)}
.membres li b{font-weight:600}
.membres li span{color:var(--brume);font-size:15px}
.membres li.ou{justify-content:flex-start;color:var(--brume);font:500 11px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;padding:6px 0}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.albums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.album{display:flex;gap:14px;align-items:center}
.album img,.album .pochette{width:96px;height:96px;flex:none;border:1px solid var(--circuit)}
.album .pochette{display:grid;place-items:center;background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(30,42,58,.4) 8px 9px)}
.album h3{font:600 16px var(--f-texte);margin:0 0 2px}
.album p{font-size:14px;color:var(--brume)}
.petit{display:inline-flex;align-items:center;min-height:44px}
.album a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:14px}
.galerie{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:12px}
.galerie figure{margin:0;border:1px solid var(--circuit);background:var(--coque);overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover}
.galerie .g-haut{grid-row:span 2}
.galerie-bas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.legende{margin-top:10px;font-size:13px;color:var(--brume)}
.manifeste{list-style:none;display:grid;gap:2px}
.manifeste li{font:400 clamp(17px,1.6vw,22px)/1.5 var(--f-texte);letter-spacing:0;text-transform:none;color:var(--lum);padding:14px 0;border-bottom:1px solid var(--circuit)}
.manifeste li b{display:block;font:400 13px/1.4 var(--f-titre);letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px}
.manifeste li:nth-child(odd) b{color:var(--cyan)} .manifeste li:nth-child(even) b{color:var(--or)}
.p-hero .actions,.p-hero .voix{animation:none}
.p-hero .voix-p{margin:18px auto 0;min-height:0}
.voix-p[hidden]{display:none}
#son{min-height:46px;min-width:44px}
.p-hero.centre{text-align:center}
.p-hero.centre .lead{margin-left:auto;margin-right:auto}
.p-hero.centre .ancres{justify-content:center}
.err{font:400 13px/1.4 var(--f-texte);color:var(--or)}
.champ [aria-invalid="true"]{border-color:var(--ambre)}
.simple{min-height:100svh;display:grid;place-items:center;text-align:center;padding:110px 20px 60px}
.simple h1{font:400 clamp(22px,3.4vw,38px)/1.2 var(--f-titre);letter-spacing:.12em;text-transform:uppercase;margin:14px 0}
.simple p{color:var(--brume);max-width:52ch;margin:0 auto 10px}
.simple .cta{justify-content:center}
.texte{max-width:936px}   /* en px et non en ch : la largeur ne bouge plus quand la police Sora arrive (saut de page à 1440) */
.texte h2{font:400 16px/1.3 var(--f-titre);letter-spacing:.12em;text-transform:uppercase;margin:36px 0 10px}
.texte p,.texte li{color:var(--brume);margin-bottom:8px}
.texte ul{padding-left:20px}
.vide-etat{border:1px dashed var(--circuit);padding:22px;color:var(--lum)}
.vide-etat p{color:var(--brume);margin-top:4px;font-size:15px}
.histo{margin-top:30px}
.histo h3{font:400 12px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brume);margin-bottom:10px}
footer .mono a{color:var(--brume);margin:0;padding:10px 0}
@media (max-width:860px){
  .formation,.formation.inverse{grid-template-columns:1fr}
  .formation.inverse>.media{order:0}
  .albums{grid-template-columns:1fr}
  .galerie{grid-template-columns:1fr}
  .galerie .g-haut{grid-row:auto}
}
@media (max-width:600px){
  .p-hero{padding:96px 0 36px}
  .galerie-bas{grid-template-columns:1fr}
}
.sans-haut{padding-top:0}
.une{grid-template-columns:1fr 1fr;gap:16px}
.une-t{font:400 12px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brume);margin:26px 0 12px}
@media (max-width:860px){.une{grid-template-columns:1fr}}

/* ---------- Accueil : message, deux portes, écouter (version 3) ---------- */
:root{--c-trio:#FED286;--c-groupe:#FF9F43;--c-izark:#5FE8FE}
.t-trio{color:var(--c-trio)} .t-groupe{color:var(--c-groupe)} .t-izark{color:var(--c-izark)}
.message{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:22px}
.message .grand{font:400 clamp(18px,2.4vw,28px)/1.35 var(--f-titre);letter-spacing:.08em;text-transform:uppercase}
.message .m-froid{border-left:2px solid var(--cyan);padding-left:18px}
.message .m-chaud{border-left:2px solid var(--ambre);padding-left:18px}
.dp-grille{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.dp{display:flex;flex-direction:column;background:var(--coque);border:1px solid var(--circuit);transition:border-color .3s}
.dp.chaud-p:hover,.dp.chaud-p:focus-within{border-color:var(--ambre)}
.dp.froid-p:hover,.dp.froid-p:focus-within{border-color:var(--cyan)}
.dp-lien{display:block;color:var(--lum);text-decoration:none}
.dp .vis{aspect-ratio:16/8;overflow:hidden;background:var(--nuit)}
.dp .vis img{width:100%;height:100%;object-fit:cover}
.dp.chaud-p .vis img{object-position:50% 80%}
.dp.froid-p .vis img{object-position:50% 30%}
.dp .txt{padding:18px 18px 16px}
.dp h3{font:400 15px/1.4 var(--f-titre);letter-spacing:.12em;text-transform:uppercase;margin:6px 0}
.dp .txt p{font-size:15px;color:var(--brume)}
.dp-lien:hover h3{color:var(--ambre)} .froid-p .dp-lien:hover h3{color:var(--cyan)}
.formations{list-style:none;border-top:1px solid var(--circuit);margin-top:auto}
.formations li{position:relative}
.formations a{display:flex;flex-direction:column;gap:2px;min-height:56px;justify-content:center;padding:12px 44px 12px 18px;color:var(--lum);text-decoration:none;border-bottom:1px solid var(--circuit)}
.formations li:last-child a{border-bottom:0}
.formations a::after{content:"→";position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.formations strong{font:400 13px/1.4 var(--f-titre);letter-spacing:.12em;text-transform:uppercase}
.formations .f-trio strong,.formations .f-trio::after{color:var(--c-trio)}
.formations .f-groupe strong,.formations .f-groupe::after{color:var(--c-groupe)}
.formations span{font-size:14px;color:var(--brume)}
.formations a:hover{background:rgba(255,159,67,.05)}
.bientot-p{margin-top:auto;padding:16px 18px;border-top:1px solid var(--circuit);color:var(--c-izark)}
.bientot-p b{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:8px;vertical-align:1px}
#nav a .t-trio,#nav a .t-groupe{color:inherit}
.sous .s-trio{border-left:2px solid var(--c-trio);padding-left:10px}
.sous .s-groupe{border-left:2px solid var(--c-groupe);padding-left:10px}
.tag.trio{color:var(--c-trio);border-color:rgba(254,210,134,.5)}
.tag.groupe{color:var(--c-groupe);border-color:rgba(255,159,67,.5)}
.tag.izark{color:var(--c-izark);border-color:rgba(95,232,254,.5)}
#trio .num,#trio h2,#trio .formation h3{color:var(--c-trio)}
#groupe-complet .num,#groupe-complet .formation h3{color:var(--c-groupe)}
@media (max-width:860px){.message,.dp-grille{grid-template-columns:1fr}}
@media (max-width:600px){.dp .vis{aspect-ratio:16/10}}
.photo{margin:0}
.photo img{width:100%;border:1px solid var(--circuit)}
.dp.chaud-p .vis img{object-position:50% 0}
.dp .vis{aspect-ratio:16/9}
.media .grille{margin-top:16px}
.spotify{margin-top:8px;border:1px solid var(--circuit);background:var(--coque);padding:clamp(14px,2.4vw,24px);max-width:960px}
.spotify h3{font:400 clamp(17px,2vw,20px) var(--f-titre);letter-spacing:.1em;text-transform:uppercase;color:var(--lum)}
.spotify .mono{display:block;margin:4px 0 16px;color:var(--brume)}
.spotify iframe{display:block;width:100%;height:452px;border:0;border-radius:12px}
@media (max-width:600px){.spotify iframe{height:380px}}
.vid{margin:0}
.vid .leg{display:block;margin-top:10px}
.vid .leg b{display:block;font:600 15px/1.3 var(--f-texte)}
.vid .leg .mono{display:block;margin-top:2px}
.une .vid .leg b{font-size:18px}


/* Bouton « Voir toutes les vidéos » (style secondaire, 48 px de haut) */
.btn-tout{min-height:48px;border-color:#93A1B3}
.cta-videos{margin-top:22px}

/* ---------- Mobile ---------- */
@media (max-width:860px){
  .g3,.g4{grid-template-columns:1fr 1fr}
  .grille.g3.videos{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .hero{padding:64px 0 28px;justify-content:flex-start}
  .hero{min-height:auto;padding-bottom:48px}
  .mots{max-width:290px;margin-left:auto;margin-right:auto}
  .g3,.g4{grid-template-columns:1fr}
  .g4.shop{grid-template-columns:1fr 1fr}
  .dates li{grid-template-columns:1fr auto;gap:4px 12px}
  .dates .quoi{grid-column:1/-1;grid-row:2}
  form.devis{grid-template-columns:1fr}
  section.bloc{padding:56px 0 16px}
}
/* .voix : hauteur du pire passage de 3 lignes (mesuré par voix_hauteur.py, police 13 px), les boutons ne bougent plus */
@media (max-width:644.98px){.voix{min-height:13em}}
@media (max-width:389.98px){.voix{min-height:14.4em}}
@media (max-width:374.98px){.voix{min-height:16em}}
@media (max-width:354.98px){.voix{min-height:17.7em}}
@media (max-width:324.98px){.voix{min-height:19.2em}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}