/* ---------- Polices (hébergées sur le site, licence SIL OFL) ---------- */
@font-face{
  font-family:"Montserrat";
  src:url("../polices/montserrat.woff2") format("woff2-variations"),
      url("../polices/montserrat.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Luxurious Script";
  src:url("../polices/luxurious-script.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ==================================================================
   PORTFOLIO VALENTIN KURTZ
   1. Jetons & base          7. Projets éditoriaux
   2. Grain, titres, icônes  8. Contact & pied
   3. Barre & menu           9. Lecteur vidéo
   4. Hero                  10. Adaptatif
   5. Accueil               11. Mouvement réduit
   6. Projets professionnels
================================================================== */

/* ---------- 1. JETONS & BASE ---------- */

:root{
  --noir:#111111;
  --noir-profond:#0a0a0a;
  --noir-carte:#171717;
  --blanc:#ffffff;
  --ambre:#ffae00;

  --texte:rgba(255,255,255,.66);
  --texte-faible:rgba(255,255,255,.42);
  --trait:rgba(255,255,255,.14);
  --trait-fort:rgba(255,255,255,.28);

  --marge:clamp(20px,5vw,84px);
  --large:1480px;
  --respiration:clamp(56px,7vw,112px);
  --barre-h:76px;
  --barre-h-fixe:60px;
  --doux:cubic-bezier(.22,.61,.36,1);

  --bruit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bruit-doux:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)' opacity='0.42'/%3E%3C/svg%3E");

  --i-fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6h17M13 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --i-sortie:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10 10 2M4 2h6v6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --i-instagram:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.4'/%3E%3C/svg%3E");
  --i-youtube:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M22 8.2c-.2-1.5-1-2.5-2.5-2.7C17.3 5.2 12 5.2 12 5.2s-5.3 0-7.5.3C3 5.7 2.2 6.7 2 8.2c-.2 1.3-.2 3.8-.2 3.8s0 2.5.2 3.8c.2 1.5 1 2.5 2.5 2.7 2.2.3 7.5.3 7.5.3s5.3 0 7.5-.3c1.5-.2 2.3-1.2 2.5-2.7.2-1.3.2-3.8.2-3.8s0-2.5-.2-3.8zM10 15.2V8.8l5.5 3.2z'/%3E%3C/svg%3E");
  --i-tiktok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 2h-3.4v13.3a2.9 2.9 0 1 1-2.9-2.9c.3 0 .6 0 .9.1V9a6.4 6.4 0 1 0 5.4 6.3V8.6a7.9 7.9 0 0 0 4.6 1.5V6.7A4.6 4.6 0 0 1 16.6 2z'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--barre-h-fixe) + 24px)}
.page-editoriaux{scroll-padding-top:calc(var(--barre-h-fixe) + 70px)}

body{
  margin:0;
  background:var(--noir);
  color:var(--texte);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}

img,video,canvas,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:900;color:var(--blanc);line-height:.92;letter-spacing:-.02em}
p{margin:0 0 1.05em}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd,figure{margin:0}

:focus-visible{outline:2px solid var(--ambre);outline-offset:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.evitement{position:fixed;top:-100px;left:16px;z-index:200;background:var(--ambre);color:#111;padding:10px 16px;font-weight:700;transition:top .2s}
.evitement:focus{top:16px}

.conteneur{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}

.section{padding-block:var(--respiration);position:relative}
.section--serree{padding-block:clamp(40px,5vw,78px)}
.section--haut-serre{padding-top:clamp(12px,2vw,30px)}

/* Étiquettes : elles portent une information (section, numéro, catégorie) */
.etiquette{
  margin:0 0 9px;
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

.prose{max-width:62ch;color:var(--texte)}
.prose p:last-child{margin-bottom:0}
.prose--large{max-width:72ch;font-size:1.05em}
.prose--centre{margin-inline:auto;text-align:center}

.lien-simple{color:var(--ambre);border-bottom:1px solid rgba(255,174,0,.4);padding-bottom:2px}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(24px,3vw,42px) 0 0}
.actions--centre{justify-content:center}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:48px;padding:14px 26px;
  background:var(--ambre);color:#111;border:1px solid var(--ambre);
  font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.bouton--vide{background:transparent;color:var(--blanc);border-color:var(--trait-fort)}
.bouton--a-completer{background:transparent;color:var(--texte-faible);border:1px dashed var(--trait-fort);cursor:default}
@media (hover:hover){
  .bouton:hover{background:var(--blanc);border-color:var(--blanc);color:#111;transform:translateY(-2px)}
  .bouton--a-completer:hover{background:transparent;color:var(--texte-faible);border-color:var(--trait-fort);transform:none}
}

/* À compléter : visible uniquement en mode édition */
.a-completer{
  display:inline-block;margin:16px 0 0;padding:10px 14px;
  border:1px dashed var(--trait-fort);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-faible);
}
.a-completer--dessous{position:absolute;left:50%;bottom:14px;translate:-50% 0;margin:0;white-space:nowrap;background:rgba(0,0,0,.5)}

/* ---------- 2. GRAIN, TITRES, ICÔNES ---------- */

.grain-global{
  position:fixed;inset:0;z-index:120;pointer-events:none;
  background-image:var(--bruit);
  background-size:260px 260px;
  opacity:.055;
  mix-blend-mode:screen;
}

/* Titres texturés : le bruit se dépose dans la lettre */
.texture{color:var(--blanc)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .texture{
    background-color:var(--blanc);
    background-image:var(--bruit-doux);
    background-size:150px 150px;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}

/* Le verrou visuel du site : capitales massives + script ambré en appui */
.lockup{
  display:flex;align-items:flex-end;flex-wrap:wrap;
  margin:0;
  font-weight:900;color:var(--blanc);
  font-size:clamp(38px,6.4vw,102px);
  text-transform:uppercase;
  letter-spacing:-.035em;
  line-height:.86;
}
.lockup__caps{display:block}
.lockup__script{
  display:block;
  font-family:"Luxurious Script",cursive;
  font-weight:400;
  font-size:1.16em;
  line-height:.78;
  letter-spacing:0;
  text-transform:none;
  color:var(--ambre);
  white-space:nowrap;
  margin-left:-.26em;
  transform:translateY(.16em) rotate(-3deg);
  transform-origin:left bottom;
}
/* Sur une seule ligne : la taille s'ajuste à la largeur disponible */
.lockup--ligne{
  flex-wrap:nowrap;white-space:nowrap;
  font-size:min(clamp(38px,6.4vw,102px), calc((min(100vw, var(--large)) - 2 * var(--marge)) / var(--longueur, 12) * .95));
}
.lockup--centre{justify-content:center;text-align:center}
.lockup--moyen{font-size:clamp(32px,4.4vw,70px)}
/* Script décalé sous la fin du mot, comme sur les planches du parcours */
.lockup--decale{
  display:inline-flex;flex-direction:column;align-items:flex-end;
  padding-right:.5em;
  font-size:clamp(36px,4.8vw,78px);
}
.lockup--decale .lockup__script{
  font-size:.96em;
  margin:-.36em -.5em 0 0;
  transform:rotate(-4deg);
  transform-origin:right center;
}

.titre-page{font-size:clamp(38px,6vw,88px);text-transform:uppercase;letter-spacing:-.03em;line-height:.9}
.titre-bloc{font-size:clamp(26px,2.8vw,42px);text-transform:uppercase;letter-spacing:-.02em;margin:0 0 clamp(22px,2.6vw,38px)}
.titre-script{
  margin:0 0 12px;
  font-family:"Luxurious Script",cursive;font-weight:400;
  font-size:clamp(40px,3.8vw,60px);line-height:1;letter-spacing:0;
  text-transform:none;color:var(--ambre);
}

/* Icônes (masques : elles prennent la couleur du texte) */
.icone-fleche,.icone-sortie,.icone-reseau{
  display:inline-block;flex:none;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;
}
.icone-fleche{--i:var(--i-fleche);width:20px;height:12px;transition:translate .25s var(--doux)}
.icone-sortie{--i:var(--i-sortie);width:11px;height:11px}
.icone-reseau{width:16px;height:16px}
.icone-reseau--instagram{--i:var(--i-instagram)}
.icone-reseau--youtube{--i:var(--i-youtube);width:18px}
.icone-reseau--tiktok{--i:var(--i-tiktok)}
.icone-lecture{
  display:inline-block;flex:none;width:0;height:0;
  border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;
}
@media (hover:hover){
  a:hover > .icone-fleche{translate:4px 0}
}

.jetons{display:flex;flex-wrap:wrap;gap:8px}
.jetons li{font-size:12px;line-height:1.3;border:1px solid var(--trait-fort);padding:7px 12px;color:rgba(255,255,255,.8)}
.jetons--pleins li{background:rgba(255,255,255,.07);border-color:transparent;font-weight:600;color:var(--blanc)}

/* ---------- 3. BARRE & MENU ---------- */

.barre{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--barre-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 var(--marge);
  border-bottom:1px solid transparent;
  transition:background .3s,height .3s,border-color .3s;
}
.barre.est-fixe{
  height:var(--barre-h-fixe);
  background:rgba(12,12,12,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--trait);
}
.barre__marque{display:flex;align-items:center;flex:none;min-height:44px}
.barre__marque img{width:auto;height:30px;transition:height .3s var(--doux)}
.barre.est-fixe .barre__marque img{height:24px}

.barre__nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.barre__nav a{
  position:relative;padding-block:8px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);transition:color .2s;
}
.barre__nav a[aria-current]{color:var(--ambre)}
.barre__nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--ambre);
  transition:right .28s ease;
}
.barre__nav a[aria-current]::after{right:0}
.barre__nav .barre__contact{padding:10px 18px;border:1px solid var(--trait-fort);color:var(--blanc)}
.barre__nav .barre__contact::after{display:none}
@media (hover:hover){
  .barre__nav a:hover{color:var(--blanc)}
  .barre__nav a:hover::after{right:0}
  .barre__nav .barre__contact:hover{background:var(--ambre);border-color:var(--ambre);color:#111}
}

.barre__burger{display:none;width:44px;height:44px;position:relative;margin-right:-10px}
.barre__burger span:not(.sr-only){
  position:absolute;left:11px;right:11px;height:2px;background:var(--blanc);transition:transform .25s;
}
.barre__burger span:not(.sr-only):nth-of-type(1){top:17px}
.barre__burger span:not(.sr-only):nth-of-type(2){top:25px}
.barre__burger[aria-expanded="true"] span:not(.sr-only):nth-of-type(1){transform:translateY(4px) rotate(45deg)}
.barre__burger[aria-expanded="true"] span:not(.sr-only):nth-of-type(2){transform:translateY(-4px) rotate(-45deg)}

.menu-mobile{
  position:fixed;inset:0;z-index:95;
  background:rgba(10,10,10,.97);
  display:flex;align-items:center;justify-content:center;
}
.menu-mobile[hidden]{display:none}
.menu-mobile nav{display:flex;flex-direction:column;gap:8px;text-align:center;padding:var(--marge)}
.menu-mobile a{
  font-size:clamp(26px,7.4vw,44px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;
  color:var(--blanc);padding:6px 0;
}
.menu-mobile a[aria-current]{color:var(--ambre)}

/* ---------- 4. HERO ---------- */

.hero{
  --hero-h:min(100svh, calc(100vw * 9 / 16 + var(--barre-h) + 60px));
  position:relative;
  height:var(--hero-h);min-height:560px;
  overflow:hidden;
  background:var(--noir);
  isolation:isolate;
}
.hero__fond{
  position:absolute;inset:0;z-index:0;
  background:#0d0d0d center/cover no-repeat;
}
.hero__fond::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%,rgba(255,174,0,.07) 0%,rgba(255,174,0,0) 58%);
}
.hero__grain{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.8}

/* La composition est posée sur le bas du hero : le buste coupé touche le bord */
.hero__scene{
  position:absolute;left:0;right:0;bottom:0;margin-inline:auto;z-index:2;
  width:min(100%, calc(var(--hero-h) * 16 / 9));
  aspect-ratio:16/9;
  container-type:size;
}
.hero__couche{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  opacity:0;
}
/* Portrait : plus petit et décalé à droite (réglable dans l'administration) */
.hero__couche--portrait{
  object-position:center bottom;
  transform-origin:50% 100%;
  translate:calc(var(--portrait-decalage,24%) + var(--px,0) * 16px) calc(var(--py,0) * 9px);
  scale:var(--portrait-echelle,.84);
}
/* Parallaxe : « Portfolio » glisse dans l'autre sens que la photo */
.hero__couche--portfolio{translate:calc(var(--px,0) * -26px) calc(var(--py,0) * -14px)}
.hero__couche--valentin,.hero__couche--kurtz{translate:calc(var(--px,0) * -7px) calc(var(--py,0) * -4px)}
.hero.est-parallaxe .hero__couche{transition:translate .9s cubic-bezier(.16,.8,.3,1)}
.hero.est-parallaxe .hero__couche--portrait{will-change:translate}

/* Une seule séquence animée : l'arrivée du logotype */
.hero__couche{animation:apparition .9s var(--doux) forwards}
.hero__couche--valentin{animation-delay:.12s}
.hero__couche--kurtz{animation-delay:.24s}
.hero__couche--portfolio{animation-delay:.52s}
.hero__couche--portrait{animation-delay:.36s;animation-duration:1.05s}
/* « Portfolio » animé : il s'écrit tout seul, un fondu court suffit à l'arrivée */
.hero__couche--anime{animation-delay:0s;animation-duration:.5s}
@keyframes apparition{
  from{opacity:0;transform:translateY(14px) scale(1.016)}
  to{opacity:1;transform:none}
}

.hero__mention{
  position:absolute;left:3.9%;bottom:19.5%;z-index:3;margin:0;
  color:var(--ambre);
  font-size:clamp(9px,1.05vw,19px);
  font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  opacity:0;animation:apparition .8s ease .72s forwards;
}
@supports (font-size:1cqh){
  .hero__mention{font-size:2.55cqh}
}
.hero__mention--mobile{display:none}

/* Flèche épaisse : invite à faire défiler */
.hero__fleche{
  position:absolute;left:50%;bottom:clamp(14px,2.6vh,30px);z-index:4;
  translate:-50% 0;
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;
  color:var(--ambre);
  opacity:0;animation:apparition .8s ease 1.1s forwards;
}
.hero__fleche-svg{width:26px;height:38px;animation:va-et-vient 1.9s cubic-bezier(.45,0,.55,1) 1.5s infinite}
@keyframes va-et-vient{
  0%,100%{transform:translateY(-5px)}
  50%{transform:translateY(7px)}
}
@media (hover:hover){
  .hero__fleche:hover{color:var(--blanc)}
  .hero__fleche:hover .hero__fleche-svg{animation-play-state:paused}
}

/* ---------- 5. ACCUEIL ---------- */

.entete-section{margin-bottom:clamp(28px,3.4vw,52px)}
.entete-section__intro{margin-top:clamp(14px,1.8vw,24px)}
.entete-section--page{margin-bottom:clamp(24px,3vw,42px)}
.entete-section--page .lockup{font-size:clamp(48px,8.6vw,138px)}

/* Projets : une section par projet */
.projet{scroll-margin-top:calc(var(--barre-h-fixe) + 30px)}
.projet + .projet{margin-top:clamp(40px,5vw,78px);padding-top:clamp(40px,5vw,78px);border-top:1px solid var(--trait)}
.projet__ligne{
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(28px,4.2vw,72px);align-items:center;
}
.projet__visuel{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16/9;background:var(--noir-carte);border:1px solid var(--trait);
}
.projet__image{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--doux)}
.projet__vide,.galerie__vide,.carte-video__vide{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:16px;text-align:center;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-faible);
  border:1px dashed var(--trait-fort);
}
.projet__lecture{
  position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
  background:rgba(12,12,12,.5);border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s,border-color .25s,scale .35s var(--doux);
}
.projet__lecture::after{
  content:"";position:absolute;left:34px;top:27px;
  border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff;
  transition:border-color .25s;
}
.projet__visuel::after{content:"";position:absolute;inset:0;border:2px solid transparent;transition:border-color .25s;pointer-events:none}
@media (hover:hover){
  a.projet__visuel:hover .projet__image{transform:scale(1.035)}
  a.projet__visuel:hover .projet__lecture{background:var(--ambre);border-color:var(--ambre);scale:1.06}
  a.projet__visuel:hover .projet__lecture::after{border-left-color:#111}
  a.projet__visuel:hover::after{border-color:var(--ambre)}
}

.projet__artiste{
  margin:0 0 14px;
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.projet__titre{margin:0 0 22px;font-size:clamp(28px,3.1vw,50px);text-transform:uppercase;letter-spacing:-.028em;line-height:.95}
.projet__actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.projet__actions li{
  padding:7px 12px;border:1px solid var(--trait-fort);
  font-size:11px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.84);
}
.projet__concept{margin:0 0 22px;max-width:62ch;font-size:16px}
.projet__fiche{display:flex;flex-wrap:wrap;gap:18px clamp(28px,4vw,56px);margin:0 0 28px}
.projet__fiche > div{display:flex;flex-direction:column;gap:9px;min-width:0}
.projet__fiche dt{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-faible)}
.projet__fiche dd{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.88)}
.projet__stats{
  display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,44px);
  margin:0 0 28px;
}
.projet__stats > div{display:flex;flex-direction:column-reverse;gap:8px}
.projet__stats dd{font-size:clamp(26px,2.5vw,40px);font-weight:900;color:var(--ambre);letter-spacing:-.03em;line-height:1;white-space:nowrap}
.projet__stats dt{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-faible)}
.projet__cta{margin:0}

/* Mosaïque */
.mosaique{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.mosaique--vertical{grid-template-columns:repeat(auto-fit,minmax(160px,230px));justify-content:center;gap:12px}
.mosaique__tuile{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:var(--noir-carte)}
.mosaique--vertical .mosaique__tuile{aspect-ratio:3/4;border:1px solid var(--trait)}
.mosaique__tuile img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.92);transition:filter .4s,transform .6s var(--doux)}
.mosaique__legende{
  position:absolute;inset:auto 0 0 0;padding:36px 12px 10px;
  display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(to top,rgba(0,0,0,.9) 30%,transparent);
  opacity:0;translate:0 6px;transition:opacity .3s,translate .3s var(--doux);
}
.mosaique__legende small{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.mosaique__legende span{
  font-size:12px;font-weight:600;line-height:1.3;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mosaique__tuile--video::before{
  content:"";position:absolute;right:10px;top:10px;z-index:1;width:30px;height:30px;border-radius:50%;
  background:var(--ambre) no-repeat center/9px 11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M0 0l9 5.5L0 11z' fill='%23111'/%3E%3C/svg%3E");
  opacity:0;scale:.7;transition:opacity .25s,scale .3s var(--doux);
}
@media (hover:hover){
  .mosaique__tuile:hover img{filter:none;transform:scale(1.05)}
  .mosaique__tuile:hover .mosaique__legende,.mosaique__tuile:focus-visible .mosaique__legende{opacity:1;translate:0 0}
  .mosaique__tuile--video:hover::before{opacity:1;scale:1}
}
@media (hover:none){
  .mosaique__legende{opacity:1;translate:0 0}
  .mosaique__tuile img{filter:none}
}

/* Chiffres */
.bande-chiffres{
  display:grid;grid-template-columns:repeat(var(--colonnes,4),minmax(0,1fr));gap:clamp(18px,3vw,48px);
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
  padding-block:clamp(30px,4vw,54px);
}
.chiffre__valeur{
  display:block;font-size:clamp(38px,5.4vw,82px);font-weight:900;color:var(--ambre);
  letter-spacing:-.04em;line-height:.9;white-space:nowrap;
}
.chiffre__label{display:block;margin-top:12px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-faible)}
.chiffre--vide .chiffre__valeur{color:transparent;-webkit-text-stroke:1px var(--trait-fort)}

.clients{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  margin:clamp(26px,3.2vw,44px) 0 0;
  font-size:13px;letter-spacing:.05em;color:rgba(255,255,255,.72);
}
.clients span{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--texte-faible)}

/* Univers créatifs : un index typographique */
.index-univers{border-top:1px solid var(--trait)}
.index-univers__ligne{border-bottom:1px solid var(--trait)}
.index-univers__lien{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px) 58px;align-items:center;
  gap:clamp(16px,3vw,48px);
  padding:clamp(28px,3.6vw,50px) 0;
  transition:padding .5s var(--doux);
}
.index-univers__lien::before{
  content:"";position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--accent,var(--ambre));
  transition:width .7s var(--doux);
}
.index-univers__nom{display:block;min-width:0}
.index-univers__caps{
  display:block;
  font-size:clamp(54px,9vw,146px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.045em;line-height:.8;
}
.index-univers__logo{
  display:block;width:auto;height:auto;
  max-width:min(100%,520px);max-height:clamp(62px,7.6vw,110px);
  object-fit:contain;object-position:left center;
}
.index-univers__logo--eqalizer{max-height:clamp(78px,8.4vw,124px)}
.index-univers__logo--valk{max-height:clamp(74px,8vw,120px)}
.index-univers__tags{font-size:12.5px;line-height:1.9;letter-spacing:.16em;text-transform:uppercase;color:var(--texte)}
.index-univers__vignette{display:none}
.index-univers__fleche{
  position:relative;width:58px;height:58px;border-radius:50%;border:1px solid var(--trait-fort);
  transition:background .3s,border-color .3s,rotate .45s var(--doux);
}
.index-univers__fleche::after{
  content:"";position:absolute;inset:0;margin:auto;width:20px;height:12px;background:var(--blanc);
  -webkit-mask:var(--i-fleche) center/contain no-repeat;mask:var(--i-fleche) center/contain no-repeat;
}
@media (hover:hover){
  .index-univers__lien:hover{padding-left:clamp(10px,1.6vw,24px)}
  .index-univers__lien:hover::before{width:100%}
  .index-univers__lien:hover .index-univers__fleche{background:var(--accent,var(--ambre));border-color:var(--accent,var(--ambre));rotate:-45deg}
  .index-univers__lien:hover .index-univers__fleche::after{background:#111}
}

/* Aperçu qui suit le pointeur */
.apercu-flottant{
  position:fixed;left:0;top:0;z-index:90;
  width:clamp(260px,24vw,380px);aspect-ratio:16/10;overflow:hidden;
  border:1px solid var(--trait-fort);box-shadow:0 30px 80px rgba(0,0,0,.6);
  pointer-events:none;opacity:0;scale:.86;
  transition:opacity .25s,scale .4s var(--doux);
}
.apercu-flottant.est-visible{opacity:1;scale:1}
.apercu-flottant img{width:100%;height:100%;object-fit:cover}

/* Parcours */
.parcours{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(44px,6vw,110px);align-items:start;
  margin-top:clamp(14px,2vw,26px);
}
.parcours__partie > .lockup{margin-bottom:clamp(26px,3vw,42px)}
.frise{margin-left:5px;border-left:1px solid var(--trait-fort)}
.frise__item{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);gap:20px;padding:0 0 30px 28px}
.frise__item:last-child{padding-bottom:4px}
.frise__item::before{
  content:"";position:absolute;left:-6px;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--noir);border:2px solid var(--ambre);
}
.frise__periode{margin:0;padding-top:1px;font-size:12px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.72)}
.frise__titre{margin:0 0 7px;font-size:clamp(16px,1.3vw,20px);line-height:1.2;letter-spacing:-.01em}
.frise__texte{margin:0;font-size:14.5px}
.outils{display:grid;gap:26px;margin-top:clamp(30px,3.6vw,50px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--trait)}

/* ---------- 6. PROJETS PROFESSIONNELS ---------- */

.page-entete{padding-top:calc(var(--barre-h) + clamp(34px,5vw,82px));padding-bottom:clamp(20px,2.6vw,40px);position:relative}
.page-projets .page-entete,.page-editoriaux .page-entete{padding-bottom:clamp(30px,3.6vw,52px);border-bottom:1px solid var(--trait)}
.page-projets .page-entete + .section--haut-serre{padding-top:clamp(34px,4.2vw,64px)}

.sommaire{display:flex;flex-wrap:wrap;gap:10px}
.sommaire a{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;
  border:1px solid var(--trait);
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);
  transition:border-color .2s,color .2s,background .2s;
}
.sommaire span{font-size:10px;color:var(--ambre)}
@media (hover:hover){
  .sommaire a:hover{border-color:var(--ambre);color:var(--blanc);background:rgba(255,174,0,.06)}
}

/* Volet « En savoir plus » */
.depliant{margin-top:clamp(30px,3.4vw,46px);border-top:1px solid var(--ambre);border-bottom:1px solid var(--ambre)}
.depliant__bouton{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  padding:18px 0;text-align:left;
  font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blanc);
  transition:color .2s;
}
.depliant__bouton i{
  position:relative;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--trait-fort);
  transition:background .25s,border-color .25s;
}
.depliant__bouton i::before,.depliant__bouton i::after{
  content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;background:currentColor;
  translate:-50% -50%;transition:rotate .4s var(--doux);
}
.depliant__bouton i::after{rotate:90deg}
.depliant__bouton[aria-expanded="true"] i::after{rotate:0deg}
.depliant__bouton[aria-expanded="true"] i{background:var(--ambre);border-color:var(--ambre);color:#111}
@media (hover:hover){
  .depliant__bouton:hover{color:var(--ambre)}
  .depliant__bouton:hover i{border-color:var(--ambre)}
}
.avec-js .depliant__zone{
  display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .6s var(--doux),visibility 0s linear .6s;
}
.avec-js .depliant.est-ouvert .depliant__zone{
  grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .6s var(--doux),visibility 0s linear 0s;
}
.depliant__interieur{min-height:0;overflow:hidden}

.details{display:grid;gap:clamp(38px,4.4vw,68px);padding:clamp(20px,2.4vw,34px) 0 clamp(34px,4vw,58px)}
.details__tete{max-width:74ch;margin-bottom:clamp(26px,3vw,42px)}
.details__tete .titre-bloc{margin-bottom:0}
.details__tete .prose{margin-top:18px}
.details__contexte{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,4vw,70px);margin-bottom:clamp(30px,3.6vw,50px);
}
.details__sous-titre{margin:0 0 12px;font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-faible)}
.details__meta{margin:0 0 24px;font-size:14px;font-weight:600;color:rgba(255,255,255,.86)}

.enjeux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);counter-reset:enjeu}
.enjeux__item{
  counter-increment:enjeu;padding:clamp(20px,2.2vw,30px);
  border:1px solid var(--trait);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 70%);
}
.enjeux__item::before{
  content:counter(enjeu,decimal-leading-zero);display:block;margin-bottom:18px;
  font-size:30px;font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--ambre);
}
.enjeux__item h4{margin:0 0 10px;font-size:16px;line-height:1.15;text-transform:uppercase;letter-spacing:-.005em}
.enjeux__item p{margin:0;font-size:14.5px}


/* Galerie d'habillage : images, GIF ou vidéos en boucle */
.galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.6vw,40px) clamp(18px,2.2vw,32px)}
.galerie__item{display:flex;flex-direction:column;gap:16px}
.galerie__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border:1px solid var(--trait)}
.galerie__media img,.galerie__media video{width:100%;height:100%;object-fit:contain}
.galerie__media--anime::before{
  content:"Animation";position:absolute;left:12px;top:12px;z-index:1;padding:4px 8px;
  background:var(--ambre);color:#111;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.galerie__item figcaption h4{margin:0 0 6px;font-size:15px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:var(--blanc)}
.galerie__item figcaption p{margin:0;font-size:15.5px}

/* Autres projets, rangés par artiste */
/* Raccourcis vers les créateurs */
.filtres-artistes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(26px,3.2vw,44px)}
.filtres-artistes a{
  display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:8px 14px;
  border:1px solid var(--trait);
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);
  transition:border-color .2s,color .2s,background .2s;
}
.filtres-artistes small{font-size:12px;font-weight:700;color:var(--texte-faible)}
@media (hover:hover){
  .filtres-artistes a:hover{border-color:var(--ambre);color:var(--blanc);background:rgba(255,174,0,.07)}
}

.artistes{display:grid;gap:clamp(36px,4.4vw,68px)}
.artiste{min-width:0;scroll-margin-top:calc(var(--barre-h-fixe) + 24px)}
.artiste__nom{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;
  margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--trait-fort);
  font-size:clamp(17px,1.5vw,22px);line-height:1.1;text-transform:uppercase;letter-spacing:-.01em;
}
.artiste__nom small{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--texte-faible)}
.artiste__videos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px clamp(16px,1.8vw,26px)}

.carte-video__lien{display:flex;flex-direction:column;height:100%;border:1px solid var(--trait);transition:border-color .2s}
.carte-video__visuel{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--noir-carte)}
.carte-video__visuel img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--doux)}
.carte-video__lecture{
  position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:var(--ambre);opacity:0;scale:.7;transition:opacity .25s,scale .3s var(--doux);
}
.carte-video__lecture::after{
  content:"";position:absolute;left:21px;top:17px;
  border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #111;
}
.carte-video__titre{
  margin:11px 14px 13px;color:rgba(255,255,255,.88);
  font-size:14px;font-weight:600;line-height:1.38;transition:color .2s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (hover:hover){
  a.carte-video__lien:hover .carte-video__visuel img{transform:scale(1.045)}
  a.carte-video__lien:hover .carte-video__lecture{opacity:1;scale:1}
  a.carte-video__lien:hover{border-color:var(--ambre)}
  a.carte-video__lien:hover .carte-video__titre{color:var(--blanc)}
}

/* ---------- 7. PROJETS ÉDITORIAUX ---------- */

/* Une section par projet */
.edito{padding-top:clamp(56px,7vw,110px)}
.edito + .edito{margin-top:clamp(28px,3.4vw,56px);border-top:1px solid var(--trait)}
.editoriaux{padding-bottom:clamp(40px,5vw,80px)}
.edito__tete{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(18px,2.2vw,30px);margin-bottom:clamp(34px,4vw,60px);
}
.edito__baseline{margin:0;font-size:clamp(10px,1vw,12px);font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.edito__logo{display:flex;justify-content:center;margin:0}
.edito__logo img{height:auto}
.edito__logo--raplay img{width:min(600px,82vw)}
.edito__logo--eqalizer img{width:auto;max-width:min(540px,80vw);max-height:170px}
.edito__logo--valk img{width:clamp(210px,22vw,330px)}
.edito__tete .lockup{margin-top:-.1em}
.edito__tete .actions{margin-top:4px}

.edito__bloc{margin-top:clamp(48px,5.6vw,92px)}
.edito__intro{margin:calc(-1 * clamp(10px,1.4vw,22px)) 0 clamp(34px,4vw,56px)}
.edito__sous-titre{
  display:flex;align-items:center;gap:16px;
  margin:clamp(40px,4.6vw,72px) 0 12px;
  font-size:clamp(18px,1.7vw,24px);line-height:1.1;letter-spacing:.02em;text-transform:uppercase;
}
.edito__sous-titre::before{content:"";flex:none;width:30px;height:2px;background:var(--accent)}
.edito__sous-titre--filet{margin-top:clamp(48px,5.4vw,84px);padding-top:clamp(34px,3.8vw,56px);border-top:1px solid var(--trait)}
.edito__chapo{max-width:72ch;margin:0 0 clamp(28px,3.4vw,46px)}
.edito__bloc > .lockup{margin-bottom:clamp(30px,3.6vw,50px)}
.edito__video{max-width:900px;margin-top:clamp(50px,6vw,90px)}

/* Aperçu de site : la page défile au survol */
.navigateur{
  max-width:1120px;margin:0 auto;overflow:hidden;
  border:1px solid var(--trait-fort);border-radius:12px;background:#0e0b16;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.8);
}
.navigateur__barre{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--trait);background:#16121f}
.navigateur__barre i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.navigateur__url{margin-left:12px;padding:3px 14px;border-radius:20px;background:rgba(255,255,255,.06);font-size:12px;letter-spacing:.03em;color:rgba(255,255,255,.72)}
.navigateur__aide{margin-left:auto;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-faible)}
.navigateur__ecran{position:relative;aspect-ratio:16/10;overflow:hidden;outline-offset:-3px}
.navigateur__ecran img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0;
  transition:object-position 1.8s var(--doux);
}
@media (hover:hover){
  .navigateur__ecran:hover img{object-position:50% 100%;transition:object-position 16s cubic-bezier(.4,0,.6,1)}
}
.navigateur__ecran:focus-visible img{object-position:50% 100%;transition:object-position 16s cubic-bezier(.4,0,.6,1)}
@media (hover:none){
  .navigateur__aide{display:none}
  .navigateur__ecran{overflow-y:auto}
  .navigateur__ecran img{height:auto;object-fit:fill}
}

/* Cases numérotées */
.cases{
  display:grid;grid-template-columns:repeat(var(--colonnes,4),minmax(0,1fr));
  border-top:1px solid var(--trait);border-left:1px solid var(--trait);
}
.cases__item{padding:clamp(20px,2.2vw,30px);border-right:1px solid var(--trait);border-bottom:1px solid var(--trait);transition:background .3s}
.cases__num{display:block;margin-bottom:clamp(18px,2.2vw,30px);font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--texte-faible)}
.cases__item h4{margin:0 0 10px;font-size:14px;line-height:1.2;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blanc)}
.cases__item p{margin:0;font-size:14px;line-height:1.55}
@media (hover:hover){
  .cases__item:hover{background:rgba(255,255,255,.03)}
}

/* Étapes reliées par des flèches */
.fleches{
  --ecart:clamp(40px,5vw,84px);
  display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--ecart);
}
.fleches__etape{display:flex;flex-direction:column;min-width:0}
.fleches__visuel{position:relative;aspect-ratio:4/5;min-height:0;margin-bottom:22px;background:#000;border:1px solid var(--trait)}
.fleches__visuel > img,.fleches__visuel > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fleches__visuel > .galerie__vide{position:absolute;inset:0}
.fleches__etape:not(:last-child) .fleches__visuel::after{
  content:"";position:absolute;left:100%;top:50%;width:var(--ecart);height:14px;translate:0 -50%;
  background:var(--accent,var(--ambre));
  -webkit-mask:var(--i-fleche) center/min(46%,34px) 14px no-repeat;mask:var(--i-fleche) center/min(46%,34px) 14px no-repeat;
}
.fleches__repere{margin:0 0 8px;font-size:clamp(22px,2.2vw,32px);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--accent,var(--ambre))}
.fleches__titre{margin:0 0 10px;font-size:clamp(16px,1.35vw,20px);line-height:1.15;text-transform:uppercase}
.fleches__texte{margin:0;font-size:15.5px}
.fleches--carre .fleches__visuel{aspect-ratio:1;background:#1b152f;border-color:rgba(167,139,250,.22)}
.fleches--carre .fleches__visuel > img{object-fit:contain;padding:8%}
.fleches--carre .fleches__etape:last-child .fleches__visuel{border-color:var(--accent)}

/* Logo animé (ou animation de repli à partir des étapes de construction) */
.logo-anime{
  position:relative;display:flex;align-items:center;justify-content:center;
  max-width:920px;aspect-ratio:16/9;margin:0 auto;overflow:hidden;
  border:1px solid rgba(167,139,250,.22);
  background:#0a0710;
}
.logo-anime + .fleches{margin-top:clamp(30px,3.6vw,52px)}
.logo-anime__media{width:100%;height:100%;object-fit:contain}

/* Le logo et ses déclinaisons : cases carrées côte à côte */
.visuels-carres{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,220px));gap:clamp(12px,1.6vw,20px)}
.visuels-carres__cadre{
  position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;padding:14%;
  border:1px solid var(--trait);
  background:#0a0a0a;
}
.visuels-carres__cadre img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.visuels-carres__cadre--plein{padding:0}
.visuels-carres__cadre--plein img,.visuels-carres__cadre--plein video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.visuels-carres__legende{margin:10px 0 0;font-size:12.5px;font-weight:600;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-faible)}

/* Le « R » se construit, puis le logo complet se dévoile */
.logo-anime__scene{position:absolute;inset:0;--fin-echelle:.47;--fin-x:-88%}
.logo-anime__etape{
  position:absolute;left:50%;top:44%;width:auto;height:46%;
  translate:-50% -50%;opacity:0;
  animation:etape-r 9s var(--doux) infinite;
  animation-delay:calc(var(--etape) * 1s);
}
.logo-anime__etape--finale{animation-name:etape-r-finale}
.logo-anime__complet{
  position:absolute;left:50%;top:44%;width:62%;
  translate:-50% -50%;opacity:0;
  clip-path:inset(0 100% 0 0);
  animation:mot-complet 9s var(--doux) infinite;animation-delay:3s;
}
@keyframes etape-r{
  0%{opacity:0;scale:.95}
  2%,9%{opacity:1;scale:1}
  11%,100%{opacity:0;scale:1.02}
}
@keyframes etape-r-finale{
  0%{opacity:0;scale:.95;translate:-50% -50%}
  2%,15%{opacity:1;scale:1;translate:-50% -50%}
  24%{opacity:1;scale:var(--fin-echelle);translate:calc(-50% + var(--fin-x)) -50%}
  30%,100%{opacity:0;scale:var(--fin-echelle);translate:calc(-50% + var(--fin-x)) -50%}
}
@keyframes mot-complet{
  0%,20%{opacity:0;clip-path:inset(0 100% 0 0)}
  23%{opacity:1;clip-path:inset(0 79% 0 0)}
  34%,50%{opacity:1;clip-path:inset(0 0 0 0)}
  56%,100%{opacity:0;clip-path:inset(0 0 0 0)}
}

/* Palette en pastilles : au survol, la pastille s'ouvre en carte */
.palette-pastilles{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px clamp(10px,1.4vw,18px)}
.palette-pastilles__separateur{color:var(--trait-fort);font-size:22px;line-height:44px}
.palette-groupe{display:flex;flex-direction:column;gap:9px;min-width:0}
.palette-groupe__liste{display:flex;gap:8px}
.palette-groupe__nom{
  display:flex;align-items:center;gap:7px;margin:0;
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-faible);white-space:nowrap;
}
.pastille-couleur{position:relative}
.pastille-couleur__point{
  display:block;width:44px;height:44px;border-radius:50%;
  background:var(--c);border:1px solid rgba(255,255,255,.2);
  transition:transform .25s var(--doux),box-shadow .25s;
}
.pastille-couleur__carte{
  position:absolute;left:50%;bottom:calc(100% + 14px);z-index:6;
  display:grid;width:264px;
  border:1px solid var(--trait-fort);background:#0c0c0c;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.85);
  translate:-50% 8px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s,translate .32s var(--doux),visibility 0s linear .22s;
}
.pastille-couleur--gauche .pastille-couleur__carte{left:0;translate:0 8px}
.pastille-couleur--droite .pastille-couleur__carte{left:auto;right:0;translate:0 8px}
.pastille-couleur__aplat{display:block;height:54px}
.pastille-couleur__nom{padding:12px 15px 0;font-size:14px;font-weight:700;color:var(--blanc)}
.pastille-couleur__hex{padding:3px 15px 0;font:500 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;color:var(--texte-faible)}
.pastille-couleur__role{padding:9px 15px 0;font-size:13px;line-height:1.5}
.pastille-couleur__famille{padding:10px 15px 14px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-faible)}
.pastille-couleur__point:focus-visible + .pastille-couleur__carte,
.pastille-couleur__point[aria-expanded="true"] + .pastille-couleur__carte{
  opacity:1;visibility:visible;translate:-50% 0;transition-delay:0s;
}
.pastille-couleur--gauche .pastille-couleur__point:focus-visible + .pastille-couleur__carte,
.pastille-couleur--gauche .pastille-couleur__point[aria-expanded="true"] + .pastille-couleur__carte,
.pastille-couleur--droite .pastille-couleur__point:focus-visible + .pastille-couleur__carte,
.pastille-couleur--droite .pastille-couleur__point[aria-expanded="true"] + .pastille-couleur__carte{translate:0 0}
@media (hover:hover){
  .pastille-couleur:hover .pastille-couleur__point{transform:scale(1.12);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
  .pastille-couleur:hover .pastille-couleur__carte{opacity:1;visibility:visible;translate:-50% 0;transition-delay:0s}
  .palette-groupe .pastille-couleur--gauche:hover .pastille-couleur__carte,
  .palette-groupe .pastille-couleur--droite:hover .pastille-couleur__carte{translate:0 0}
}

/* Galerie en zigzag */
.zigzag{display:grid;gap:clamp(46px,6vw,96px)}
.zigzag__item{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4.4vw,80px);align-items:center}
.zigzag__item:nth-child(even) .zigzag__media{order:2}
.zigzag__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000;border:1px solid var(--trait)}
.zigzag__media > img,.zigzag__media > video{width:100%;height:100%;object-fit:cover}
.zigzag__num{display:block;margin-bottom:18px;font-size:clamp(34px,3.4vw,52px);font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--accent,var(--ambre))}
.zigzag__texte h4{margin:0 0 14px;font-size:clamp(22px,2.3vw,36px);line-height:1;text-transform:uppercase;letter-spacing:-.02em}
.zigzag__texte p{max-width:48ch;margin:0}

/* Formats Valk */
.formats{margin-top:clamp(4px,.8vw,12px)}
.format{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4.2vw,72px);align-items:center;
  padding:clamp(34px,4vw,60px) 0;border-bottom:1px solid var(--trait);
}
.format__logo{
  display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;
  border:1px solid var(--trait);
  background:#070707;
}
.format__logo img{width:auto;height:auto;max-width:74%;max-height:62%;object-fit:contain;transition:scale .5s var(--doux)}
.format__nom-repli{font-size:28px;font-weight:900;text-transform:uppercase;color:var(--blanc)}
.format__question{margin:0 0 16px;font-size:clamp(28px,3.1vw,50px);line-height:.95;text-transform:uppercase;letter-spacing:-.028em}
.format__texte{max-width:58ch;margin:0 0 26px}
.format .projet__stats{margin-bottom:0}
.format .projet__cta{margin-top:26px}
@media (hover:hover){
  .format:hover .format__logo img{scale:1.05}
}

/* ---------- 8. CONTACT & PIED ---------- */

.contact{padding:clamp(60px,7.5vw,116px) 0 clamp(52px,6vw,92px);border-top:1px solid var(--trait)}
.contact .lockup{margin-bottom:clamp(34px,4.4vw,64px)}
.contact__grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,96px);align-items:start}
.contact__action{margin:30px 0 0}
.coordonnees > div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:15px 0;border-top:1px solid var(--trait)}
.coordonnees > div:last-child{border-bottom:1px solid var(--trait)}
.coordonnees dt{padding-top:2px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-faible)}
.coordonnees dd{font-size:16px;font-weight:600;color:var(--blanc);overflow-wrap:anywhere}
@media (hover:hover){
  .coordonnees a:hover{color:var(--ambre)}
}

.pied{position:relative;background:#070707;border-top:1px solid var(--trait-fort)}
.pied__haut{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:clamp(24px,4vw,70px);padding:clamp(40px,5vw,68px) 0 clamp(30px,3.4vw,46px);
}
.pied__logo{display:block}
.pied__logo img{width:auto;height:38px}
.pied__nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 26px}
.pied__nav a,.pied__retour{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);transition:color .2s;
}
.pied__bas{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;
  padding:18px 0 28px;border-top:1px solid var(--trait);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-faible);
}
.pied__bas p{margin:0}
.pied__retour i{font-style:normal;margin-left:6px}
@media (hover:hover){
  .pied a:hover{color:var(--ambre)}
}

/* ---------- 9. LECTEUR VIDÉO ---------- */

.lecteur{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--trait);background:#000;overflow:hidden}
.lecteur img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s}
.lecteur__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;background:var(--ambre);transition:transform .25s;
}
.lecteur__play::after{content:"";position:absolute;left:31px;top:26px;border:13px solid transparent;border-left:20px solid #111;border-right:0}
.lecteur iframe{width:100%;height:100%;border:0}
@media (hover:hover){
  .lecteur--yt:hover img{transform:scale(1.03);opacity:.82}
  .lecteur--yt:hover .lecteur__play{transform:translate(-50%,-50%) scale(1.08)}
}

.lecteur-modale{
  width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:var(--marge);
  border:0;background:transparent;color:var(--blanc);overflow:hidden;
}
.lecteur-modale[open]{display:flex;align-items:center;justify-content:center;animation:fondu .3s ease}
.lecteur-modale::backdrop{background:rgba(6,6,6,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lecteur-modale__boite{position:relative;width:min(1200px,100%,calc((100svh - 200px) * 16 / 9))}
.lecteur-modale__tete{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:11px 11px 11px clamp(16px,1.8vw,22px);
  background:var(--ambre);color:#111;
}
.lecteur-modale__textes{min-width:0}
.lecteur-modale__artiste{margin:0 0 4px;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:rgba(17,17,17,.64)}
.lecteur-modale__titre{
  margin:0;font-size:clamp(14px,1.25vw,17px);font-weight:800;line-height:1.25;letter-spacing:.02em;text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lecteur-modale__fermer{
  position:relative;flex:none;width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(17,17,17,.3);color:#111;transition:background .2s,border-color .2s,color .2s;
}
.lecteur-modale__fermer::before,.lecteur-modale__fermer::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg;
}
.lecteur-modale__fermer::after{rotate:-45deg}
.lecteur-modale__cadre{aspect-ratio:16/9;background:#000;border:1px solid var(--ambre);border-top:0}
.lecteur-modale__cadre iframe,.lecteur-modale__cadre video{display:block;width:100%;height:100%;border:0}
@media (hover:hover){
  .lecteur-modale__fermer:hover{background:#111;border-color:#111;color:var(--ambre)}
}
@keyframes fondu{from{opacity:0}to{opacity:1}}


/* Frise horizontale : les étapes alternent au-dessus et en dessous de la ligne */
.frise-h{
  display:grid;grid-template-columns:repeat(calc(var(--n) + 1),minmax(0,1fr));
  grid-template-rows:auto 34px auto;
  column-gap:clamp(10px,1.4vw,22px);
  align-items:end;
}
.frise-h__item{position:relative;min-width:0;text-align:center}
.frise-h__item--haut{align-self:end;padding-bottom:6px}
.frise-h__item--bas{align-self:start;padding-top:6px}
.frise-h__item::after{
  content:"";position:absolute;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:var(--noir);border:2px solid var(--accent,var(--ambre));
}
.frise-h__item--haut::after{bottom:-23px}
.frise-h__item--bas::after{top:-23px}
.frise-h__ligne{grid-column:1 / -1;grid-row:2;align-self:center;height:1px;background:var(--trait)}
.frise-h__num{display:block;margin-bottom:6px;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--texte-faible)}
.frise-h__titre{margin:0 0 7px;font-size:clamp(14px,1.2vw,17px);line-height:1.15;text-transform:uppercase;letter-spacing:.04em;color:var(--blanc)}
.frise-h__texte{margin:0;font-size:15px;line-height:1.5}

/* Une section projet insérée dans un bloc éditorial */
.projets--edito .projet{scroll-margin-top:0}

/* Bouton rond : passe à la section suivante */
.bouton-suivant{
  position:fixed;right:clamp(14px,2.4vw,34px);bottom:clamp(14px,2.4vw,34px);z-index:70;
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:rgba(14,14,14,.74);border:1px solid var(--trait-fort);color:var(--ambre);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .25s,border-color .25s,color .25s,opacity .3s,transform .3s var(--doux);
}
.bouton-suivant[hidden]{display:none}
.bouton-suivant--discret{opacity:0;pointer-events:none}
@media (min-width:761px){.bouton-suivant.bouton-suivant--mobile{display:none}}
.bouton-suivant__fleche{width:19px;height:27px;animation:va-et-vient 1.9s cubic-bezier(.45,0,.55,1) infinite}
.bouton-suivant--haut .bouton-suivant__fleche{rotate:180deg}
@media (hover:hover){
  .bouton-suivant:hover{background:var(--ambre);border-color:var(--ambre);color:#111;transform:scale(1.06)}
  .bouton-suivant:hover .bouton-suivant__fleche{animation-play-state:paused}
}

/* Mentions légales & confidentialité */
.legal{display:grid;gap:clamp(30px,3.6vw,52px);max-width:900px}
.legal__maj{margin:0;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-faible)}
.legal__bloc .titre-bloc{font-size:clamp(20px,2vw,28px);margin-bottom:16px}
.legal__texte{max-width:78ch;font-size:15px}
.legal__fiche{display:grid;gap:0;border-top:1px solid var(--trait)}
.legal__fiche > div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--trait)}
.legal__fiche dt{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-faible)}
.legal__fiche dd{font-size:15px;color:rgba(255,255,255,.88)}
.legal__bloc--confidentialite{margin-top:clamp(16px,2vw,30px);padding-top:clamp(30px,3.6vw,50px);border-top:1px solid var(--trait-fort);scroll-margin-top:calc(var(--barre-h-fixe) + 24px)}
.legal__sous-bloc{margin-top:clamp(22px,2.6vw,34px)}
.legal__refus{max-width:78ch;margin-top:18px;padding:16px 20px;border:1px solid var(--trait-fort);border-left:2px solid var(--ambre)}
.legal__refus p{margin:0}
.legal__refus p + p{margin-top:14px}
.legal__sous-titre{margin:0 0 8px;font-size:15px;line-height:1.3;text-transform:uppercase;letter-spacing:.06em;color:var(--blanc)}

/* Page 404 */
.erreur{padding:calc(var(--barre-h) + clamp(60px,9vw,130px)) 0 clamp(60px,8vw,120px)}
.erreur__texte{margin-top:clamp(18px,2.4vw,32px)}
.erreur__liens{display:grid;gap:10px;margin-top:clamp(28px,3.4vw,48px);max-width:720px}
.erreur__liens a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 18px;
  padding:18px 22px;border:1px solid var(--trait);
  font-size:14px;color:var(--texte);transition:border-color .2s,background .2s,color .2s;
}
.erreur__liens span{grid-column:1;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blanc)}
.erreur__liens .icone-fleche{grid-column:2;grid-row:1 / span 2;color:var(--ambre)}
@media (hover:hover){
  .erreur__liens a:hover{border-color:var(--ambre);background:rgba(255,174,0,.06);color:rgba(255,255,255,.86)}
}

/* ---------- TABLE DE MONTAGE (principaux projets de l'accueil) ---------- */
.montage__haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:center}
.montage__ecran{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000 center/cover no-repeat;border:1px solid var(--trait)}
.montage__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s}
.montage__video.est-active{opacity:1}
.montage__code{
  position:absolute;left:12px;bottom:12px;padding:5px 9px;background:rgba(0,0,0,.6);
  font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:#fff;
}
.montage__ecran .projet__lecture{left:auto;top:auto;right:12px;bottom:12px;width:48px;height:48px;margin:0}
.montage__ecran .projet__lecture::after{left:19px;top:14px;border-width:9px 0 9px 14px}
.montage__fiches{display:grid}
.montage__fiche{grid-area:1 / 1;align-self:center;opacity:0;visibility:hidden;translate:0 10px;transition:opacity .35s,translate .45s var(--doux),visibility 0s linear .35s}
.montage__fiche.est-active{opacity:1;visibility:visible;translate:0 0;transition-delay:.12s,.12s,0s}
.montage__fiche .projet__titre{margin-bottom:clamp(18px,2vw,28px)}
.montage__fiche .projet__stats{margin-bottom:clamp(20px,2.4vw,32px)}
.montage__fiche .actions{margin-top:0}

.montage__timeline{
  --col:42px;container-type:inline-size;
  display:grid;grid-template-columns:var(--col) minmax(0,1fr);
  margin-top:clamp(26px,3.2vw,46px);padding-bottom:10px;
  border:1px solid var(--trait);background:#0c0c0c;
}
.montage__pistes-noms,.montage__bande{
  --w:clamp(150px,calc((100cqi - var(--col) - 2px) / var(--n)),260px);
  --hp:calc((var(--w) - 4px) * 9 / 16);
}
.montage__pistes-noms{display:grid;grid-template-rows:30px var(--hp) var(--hp) 38px;row-gap:6px;border-right:1px solid var(--trait)}
.montage__pistes-noms span{display:grid;place-items:center;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--texte-faible)}
.montage__defile{position:relative;overflow:hidden;cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.montage.est-saisie .montage__plan{transition:none}
.montage__bande{
  position:relative;display:grid;grid-template-rows:30px var(--hp) var(--hp) 38px;row-gap:6px;
  width:calc(var(--total,var(--n)) * var(--w));will-change:transform;
}
.montage__regle{
  position:relative;border-bottom:1px solid var(--trait);
  background:repeating-linear-gradient(90deg,var(--trait) 0 1px,transparent 1px calc(var(--w) / 6)) left bottom / 100% 7px no-repeat;
}
.montage__regle span{position:absolute;left:calc(var(--debut) * var(--w) + 7px);top:8px;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--texte-faible)}
.montage__piste{position:relative}
.montage__plan{
  position:absolute;top:0;bottom:0;left:calc(var(--debut) * var(--w) + 2px);width:calc(var(--w) - 4px);
  overflow:hidden;text-align:left;background:var(--noir-carte) center/cover no-repeat;
  border:1px solid rgba(255,255,255,.16);filter:saturate(.55) brightness(.62);
  transition:filter .35s,border-color .25s;
}
.montage__plan.est-actif{filter:none;border-color:var(--ambre)}
.montage__plan-artiste{
  position:absolute;left:0;top:0;max-width:100%;padding:4px 8px;background:var(--ambre);color:#111;
  font-size:10px;font-weight:700;line-height:1.2;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.montage__plan-titre{
  position:absolute;left:0;right:0;bottom:0;padding:16px 8px 5px;
  background:linear-gradient(transparent,rgba(0,0,0,.86));color:#fff;
  font-size:10.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.montage__onde{
  position:absolute;inset:0 2px;border:1px solid rgba(74,222,128,.32);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 40' preserveAspectRatio='none'%3E%3Cpath d='M3 11v18M9 16v8M15 9v22M21 18v5M27 18v4M33 17v6M39 14v12M45 17v6M51 11v18M57 16v7M63 18v4M69 14v12M75 15v10M81 18v4M87 17v6M93 9v22M99 9v22M105 17v6M111 15v10M117 17v6M123 14v12M129 9v22M135 18v4M141 16v7M147 17v6M153 15v10M159 18v5M165 18v5M171 16v7M177 18v4M183 16v7M189 16v7M195 9v22M201 18v4M207 15v10M213 18v4M219 14v12M225 16v8M231 13v14M237 9v22M243 16v8M249 14v12M255 17v6M261 16v7M267 13v14M273 14v12M279 18v5M285 16v8M291 17v6M297 16v7M303 16v7M309 18v5M315 15v10M321 11v18M327 17v6M333 14v12M339 12v16M345 17v6M351 16v7M357 18v4' stroke='%234ade80' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") left center / 360px 100% repeat-x,rgba(74,222,128,.07);
}
.montage__tete{position:absolute;left:0;top:0;bottom:0;z-index:3;width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.montage__tete::before{content:"";position:absolute;left:-6px;top:0;width:14px;height:13px;background:#fff;clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
@media (hover:hover){
  .montage__plan:hover{filter:none}
  .montage__ecran:hover .projet__lecture{background:var(--ambre);border-color:var(--ambre)}
  .montage__ecran:hover .projet__lecture::after{border-left-color:#111}
}
/* Sans JavaScript : la liste des projets, simplement */
.sans-js .montage__ecran,.sans-js .montage__timeline{display:none}
.sans-js .montage__haut{grid-template-columns:minmax(0,1fr)}
.montage__ecran{order:2}
.sans-js .montage__fiches{gap:40px}
.sans-js .montage__fiche{grid-area:auto;opacity:1;visibility:visible;translate:none}
@media (max-width:980px){
  .montage__haut{grid-template-columns:minmax(0,1fr)}
  .montage__ecran{order:0}
}
@media (max-width:760px){
  .montage__timeline{--col:30px}
}
@media (prefers-reduced-motion:reduce){
  .montage__video,.montage__fiche,.montage__plan{transition:none}
}

/* ---------- APPARITIONS AU DÉFILEMENT (classes posées par site.js) ---------- */
.a-reveler{opacity:0;translate:0 26px;transition:opacity .7s var(--doux) var(--retard,0s),translate .8s var(--doux) var(--retard,0s)}
.a-reveler.est-vu{opacity:1;translate:0 0}
.a-reveler .lockup__script{clip-path:inset(-20% 100% -20% -10%);transition:clip-path .9s var(--doux) .25s}
.a-reveler.est-vu .lockup__script{clip-path:inset(-20% -10% -20% -10%)}
.frise-h__ligne{transform-origin:left center;transition:transform 1.2s var(--doux)}
.frise-h.a-tracer .frise-h__ligne{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){
  .a-reveler,.a-reveler .lockup__script{opacity:1;translate:none;clip-path:none;transition:none}
  .frise-h.a-tracer .frise-h__ligne{transform:none}
}

/* ---------- ONGLETS : un univers ou un créateur à la fois ---------- */
.onglets-univers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(24px,3vw,44px);border:1px solid var(--trait)}
.onglets-univers a + a{border-left:1px solid var(--trait)}
.onglets-univers__logo{display:block;width:auto;height:clamp(28px,3.1vw,44px);max-width:78%;object-fit:contain}
.onglets-univers__logo--valk{height:clamp(34px,3.7vw,52px)}
.onglets-univers a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent,var(--ambre));scale:0 1;transition:scale .45s var(--doux)}
.onglets-univers a.est-actif::after{scale:1 1}
.onglets-univers a{
  position:relative;display:grid;place-items:center;height:clamp(78px,8.6vw,124px);padding:14px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blanc);
  opacity:.36;filter:grayscale(1);transition:opacity .25s,filter .25s,background .25s;
}
.onglets-univers a.est-actif{opacity:1;filter:none;background:rgba(255,255,255,.035)}
.filtres-artistes a.est-actif{background:var(--blanc);border-color:var(--blanc);color:#111}
.filtres-artistes a.est-actif small{color:rgba(17,17,17,.6)}
@media (hover:hover){
  .onglets-univers a:not(.est-actif):hover{opacity:.8;filter:none}
}
.avec-onglets .edito{padding-top:clamp(34px,4.4vw,64px);margin-top:0;border-top:0}

/* ---------- CHAPITRES, BANDE DÉFILANTE, CHIFFRE VEDETTE (mise en page) ---------- */
/* Les créateurs défilent en grandes capitales entre deux sections */
.defilant{margin-top:clamp(40px,5vw,78px)}
.defilant__titre{margin-bottom:14px}
.defilant__fenetre{overflow:hidden;border-block:1px solid var(--trait);padding-block:clamp(16px,2vw,28px)}
.defilant__piste{display:flex;width:max-content;animation:defile 46s linear infinite}
.defilant__groupe{display:flex;align-items:center;flex:none}
.defilant__groupe span{font-size:clamp(26px,3.6vw,56px);font-weight:900;line-height:1.1;letter-spacing:-.025em;text-transform:uppercase;white-space:nowrap}
.defilant__groupe i{flex:none;width:9px;height:9px;margin-inline:clamp(18px,2.4vw,40px);background:var(--ambre);rotate:45deg}
@keyframes defile{to{transform:translateX(-50%)}}
@media (hover:hover){.defilant__fenetre:hover .defilant__piste{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){
  .defilant__piste{animation:none;width:auto;flex-wrap:wrap;padding-inline:var(--marge)}
  .defilant__groupe{flex-wrap:wrap;row-gap:8px}
  .defilant__groupe + .defilant__groupe{display:none}
}
#realisations{padding-bottom:0}

/* Parcours : compétences et logiciels en bande pleine largeur */
.outils--bande{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,90px);margin-top:clamp(40px,5vw,72px)}

/* Projets : une miniature sur deux à droite, l'extrait se joue au survol */
@media (min-width:981px){
  .projets--details .projet:nth-child(even) .projet__ligne{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  .projets--details .projet:nth-child(even) .projet__visuel{order:2}
}
.projet__survol{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s;pointer-events:none}
.projet__survol.est-lance{opacity:1}
/* pendant l'aperçu, le bouton reste à sa place et devient une bulle de verre : l'extrait se voit à travers */
.projet__lecture{transition:background .3s,border-color .3s,box-shadow .3s,scale .35s var(--doux)}
a.projet__visuel.est-survole .projet__lecture{
  background:linear-gradient(140deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.07) 55%,rgba(255,255,255,.14) 100%);
  border-color:rgba(255,255,255,.55);scale:1;
  -webkit-backdrop-filter:blur(12px) saturate(1.8);backdrop-filter:blur(12px) saturate(1.8);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 4px rgba(0,0,0,.18),0 12px 32px rgba(0,0,0,.28)
}
a.projet__visuel.est-survole .projet__lecture::after{border-left-color:#fff}

/* ---------- LISIBILITÉ : lignes de projet, volet, univers (accueil), page éditoriale ---------- */

/* Ligne de projet : fiche en tableau, deux boutons côte à côte */
.projet__cta.actions{margin-top:0}
.projet .depliant{padding-inline:clamp(18px,2.6vw,40px);background:rgba(255,255,255,.03);transition:background .25s}
.projet .depliant__bouton{padding:clamp(18px,2.2vw,28px) 0;letter-spacing:0;text-transform:none}
.projet .depliant__titre{font-size:clamp(17px,1.7vw,24px)}
.projet .depliant__titre{font-size:clamp(15px,1.4vw,19px);letter-spacing:.06em}
/* Vidéos verticales mises en avant (Valk) : la case au format 9:16 ne garde que la vidéo, sans les bords floutés de la miniature */
.projets--vertical .projet__ligne{grid-template-columns:minmax(0,250px) minmax(0,1fr);justify-content:start}
.projets--vertical .projet__visuel{aspect-ratio:9/16}
.projets--vertical .projet + .projet{margin-top:clamp(30px,3.6vw,52px);padding-top:clamp(30px,3.6vw,52px)}
@media (hover:hover){.projet .depliant:not(.est-ouvert):hover{background:rgba(255,174,0,.07)}}
.projet__format{margin:-10px 0 18px;font-size:12.5px;font-weight:600;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.projet__roles{margin:0 0 28px}
.details .titre-bloc{font-size:clamp(20px,2vw,30px)}
.details__tete{margin-bottom:clamp(20px,2.4vw,32px)}
.enjeux__item p{font-size:15.5px}

/* Page éditoriale : le logo du sélecteur fait office de titre, les blocs sont séparés */
.avec-onglets .edito__tete{padding-top:0}
.edito__bloc{padding-top:clamp(36px,4.4vw,68px);border-top:1px solid var(--trait)}
/* Résumé d'abord : le détail d'un univers (étapes, direction artistique, méthode) se déplie */
.depliant--edito{margin-top:clamp(44px,5vw,80px);border-color:var(--trait-fort)}
.depliant--edito + .depliant--edito{margin-top:-1px}
.depliant--edito .depliant__bouton{padding:clamp(20px,2.4vw,32px) 0;letter-spacing:0;text-transform:none}
.depliant__titre{display:grid;gap:8px;font-size:clamp(19px,2vw,30px);font-weight:900;line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:var(--blanc)}
.depliant__titre small{font-size:12px;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.62)}
.depliant--edito.est-ouvert{padding-inline:0;background:none}
.depliant--edito .edito__bloc{margin-top:0;padding-top:clamp(8px,1.2vw,18px);padding-bottom:clamp(34px,4vw,60px);border-top:0}
.avec-js .depliant--edito .edito__bloc > .etiquette,.avec-js .depliant--edito .edito__bloc > .titre-bloc,.avec-js .depliant--edito .edito__bloc > .lockup{display:none}
.sans-js .depliant--edito .depliant__bouton{display:none}

/* ---------- PLEINE LARGEUR : des sections qui respirent d'un bord à l'autre ---------- */
:root{--g:clamp(16px,2.6vw,48px)}
body{overflow-x:clip}
/* cadre étendu à toute la largeur de l'écran, à une gouttière des bords */
.montage__timeline,.onglets-univers--carrousel,#realisations .bande-chiffres--vedette{
  width:calc(100vw - 2 * var(--g));max-width:none;margin-left:calc(50% - 50vw + var(--g));margin-right:0
}
/* bande de fond d'un bord à l'autre, sans balisage supplémentaire */
.bande-sombre{
  background:#0b0b0b;box-shadow:0 0 0 100vmax #0b0b0b;clip-path:inset(0 -100vmax)
}
#autres-contenus,#univers{background:#0b0b0b;border-block:1px solid rgba(255,255,255,.06)}

/* Accueil : la table de montage */
.montage__timeline{border:1px solid var(--trait);--col:58px}
.montage__pistes-noms,.montage__bande{--w:clamp(170px,calc((100cqi - var(--col) - 2px) / var(--n)),330px)}

/* Accueil : la mosaïque défile sur deux rangées, bord à bord */
.mosaique-defilante{display:grid;gap:10px;margin-block:clamp(4px,1vw,14px) clamp(26px,3vw,40px)}
.mosaique-defilante__rang{overflow:hidden}
.mosaique-defilante__piste{display:flex;gap:10px;width:max-content;animation:defile 60s linear infinite}
.mosaique-defilante__rang--inverse .mosaique-defilante__piste{animation-direction:reverse}
.mosaique-defilante__piste li{flex:none;width:clamp(200px,21vw,320px)}
.mosaique-defilante__piste .mosaique__tuile{aspect-ratio:16/9}
@media (hover:hover){.mosaique-defilante__rang:hover .mosaique-defilante__piste{animation-play-state:paused}}

/* Accueil : les vues cumulées au centre, les trois autres chiffres en ligne dessous */
#realisations .bande-chiffres--vedette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0;border:0}
#realisations .bande-chiffres--vedette .chiffre:first-child{grid-column:1 / -1;text-align:center;padding:clamp(24px,3vw,44px) 0 clamp(24px,3vw,40px)}
#realisations .bande-chiffres--vedette .chiffre:first-child .chiffre__valeur{font-size:clamp(76px,9.5vw,150px);line-height:.88}
#realisations .bande-chiffres--vedette .chiffre:first-child .chiffre__label{margin-top:clamp(12px,1.4vw,20px);font-size:clamp(12.5px,1vw,14px)}
#realisations .bande-chiffres--vedette .chiffre ~ .chiffre{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  padding:clamp(24px,2.8vw,40px) 16px;border-block:1px solid var(--trait)
}
#realisations .bande-chiffres--vedette .chiffre ~ .chiffre + .chiffre{border-left:1px solid var(--trait)}
/* cases fermées sur les côtés */
#realisations .bande-chiffres--vedette .chiffre:nth-child(2){border-left:1px solid var(--trait)}
#realisations .bande-chiffres--vedette .chiffre ~ .chiffre:last-child{border-right:1px solid var(--trait)}
#realisations .bande-chiffres--vedette .chiffre ~ .chiffre .chiffre__valeur{font-size:clamp(38px,4.2vw,68px)}
#realisations .bande-chiffres--vedette .chiffre ~ .chiffre .chiffre__label{margin:0}

/* Accueil : univers en carrousel, la diapositive va jusqu'à la section Parcours */
#univers{padding-bottom:0}
.onglets-univers--carrousel{margin-top:clamp(24px,3vw,40px)}
.onglets-univers--carrousel a{overflow:hidden}
.onglets-univers--carrousel a.est-actif::after{scale:0 1}
.onglets-univers__progres{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--accent,var(--ambre))}
.onglets-univers--carrousel a.est-actif .onglets-univers__progres{animation:progres var(--duree,6s) linear forwards}
.carrousel-univers.est-en-pause .onglets-univers__progres{animation-play-state:paused}
@keyframes progres{to{width:100%}}
.carrousel-univers__scene{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:clamp(440px,38vw,620px);overflow:hidden;background:#0a0a0a}
.carrousel-univers__diapo{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .9s,visibility 0s linear .9s}
.carrousel-univers__diapo.est-active{opacity:1;visibility:visible;transition:opacity .9s,visibility 0s}
.carrousel-univers__fond{position:absolute;top:0;right:0;width:64%;height:100%;object-fit:cover;object-position:center top;scale:1.08;transition:scale 7s linear}
.carrousel-univers__diapo.est-active .carrousel-univers__fond{scale:1}
.carrousel-univers__voile{position:absolute;inset:0;background:linear-gradient(90deg,#0a0a0a 0%,#0a0a0a 36%,rgba(10,10,10,.55) 46%,rgba(10,10,10,0) 62%),linear-gradient(0deg,rgba(10,10,10,.5),transparent 30%)}
.carrousel-univers__texte{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;height:100%;padding-left:calc(var(--g) + clamp(0px,2vw,40px));padding-right:var(--g)}
.carrousel-univers__texte > *{max-width:min(520px,32vw);opacity:0;translate:0 18px;transition:opacity .6s,translate .7s var(--doux)}
.carrousel-univers__diapo.est-active .carrousel-univers__texte > *{opacity:1;translate:0 0}
.carrousel-univers__diapo.est-active .carrousel-univers__texte > :nth-child(2){transition-delay:.12s}
.carrousel-univers__diapo.est-active .carrousel-univers__texte > :nth-child(3){transition-delay:.22s}
.carrousel-univers__diapo.est-active .carrousel-univers__texte > :nth-child(4){transition-delay:.32s}
.carrousel-univers__logo{height:clamp(56px,6vw,100px);width:auto;object-fit:contain;object-position:left center}
.carrousel-univers__logo--valk{height:clamp(70px,7.4vw,122px)}
.carrousel-univers__nom{font-size:clamp(40px,5vw,80px);font-weight:900;text-transform:uppercase;line-height:1}
.carrousel-univers__accroche{font-size:clamp(17px,1.4vw,22px);line-height:1.5;color:rgba(255,255,255,.88)}
.carrousel-univers__tags{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sans-js .carrousel-univers__diapo:not(:first-child){display:none}
.sans-js .carrousel-univers__diapo:first-child{opacity:1;visibility:visible}
.sans-js .carrousel-univers__texte > *{opacity:1;translate:none}

@media (max-width:760px){
  .montage__timeline{--col:30px}
  #realisations .bande-chiffres--vedette{grid-template-columns:minmax(0,1fr)}
  #realisations .bande-chiffres--vedette .chiffre ~ .chiffre{border-inline:1px solid var(--trait)}
  #realisations .bande-chiffres--vedette .chiffre ~ .chiffre + .chiffre{border-top:0}
  .carrousel-univers__scene{height:600px}
  .carrousel-univers__fond{width:100%;height:44%;object-position:center top}
  .carrousel-univers__voile{background:linear-gradient(0deg,#0a0a0a 0%,#0a0a0a 56%,rgba(10,10,10,0) 70%)}
  .carrousel-univers__texte{justify-content:flex-end;padding:0 var(--marge) 36px;gap:16px}
  .carrousel-univers__texte > *{max-width:none}
  .carrousel-univers__accroche{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .mosaique-defilante__piste{animation:none}
  .mosaique-defilante__rang{overflow-x:auto}
  .carrousel-univers__fond{transition:none;scale:1}
  .carrousel-univers__texte > *{transition:none}
  .onglets-univers--carrousel a.est-actif .onglets-univers__progres{animation:none;width:100%}
}

/* ---------- BANNIÈRES : premier projet pro et en-têtes d'univers, d'un bord à l'autre ---------- */
/* Projets professionnels : chaque projet est une bannière d'un bord à l'autre, visuel à droite puis à gauche.
   Le séparateur et le volet « En savoir plus » prennent aussi toute la largeur ; le texte reste aligné sur la page. */
.page-projets .page-entete + .section--haut-serre{padding-top:0}
.projets--details{--bord:calc(max(0px, (100vw - var(--large)) / 2) + var(--marge))}
.projets--details .projet{width:100vw;margin-left:calc(50% - 50vw)}
.projets--details .projet + .projet{margin-top:clamp(40px,5vw,78px);padding-top:0;border-top:1px solid var(--trait)}
.projets--details .projet .depliant{margin-top:0;padding-inline:var(--bord)}
.projets--details .projet__visuel{border:0}
@media (min-width:981px){
  .projets--details .projet .projet__ligne{
    display:flex;align-items:center;position:relative;min-height:clamp(460px,42vw,680px);overflow:hidden;background:#0a0a0a
  }
  .projets--details .projet .projet__visuel{position:absolute;inset:0 0 0 32%;aspect-ratio:auto;order:0}
  .projets--details .projet:nth-child(even) .projet__visuel{inset:0 32% 0 0}
  .projets--details .projet .projet__ligne::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,#0a0a0a 0%,#0a0a0a 34%,rgba(10,10,10,.7) 46%,rgba(10,10,10,0) 62%),linear-gradient(0deg,rgba(10,10,10,.6),transparent 28%)
  }
  .projets--details .projet:nth-child(even) .projet__ligne::after{
    background:linear-gradient(270deg,#0a0a0a 0%,#0a0a0a 34%,rgba(10,10,10,.7) 46%,rgba(10,10,10,0) 62%),linear-gradient(0deg,rgba(10,10,10,.6),transparent 28%)
  }
  /* le texte reste dans le flux : la bannière s'agrandit si le texte est long, au lieu de le couper */
  .projets--details .projet .projet__infos{
    position:relative;z-index:2;width:min(540px,34vw);margin-left:var(--bord);padding-block:clamp(40px,4vw,64px)
  }
  .projets--details .projet:nth-child(even) .projet__infos{margin-left:auto;margin-right:var(--bord)}
  .projets--details .projet .projet__titre{font-size:clamp(34px,3.4vw,60px)}
  .projets--details .projet .projet__lecture{left:58%}
  .projets--details .projet:nth-child(even) .projet__lecture{left:42%}
}
@media (max-width:980px){
  .projets--details .projet .projet__ligne{gap:0}
  .projets--details .projet .projet__infos{padding:clamp(22px,4vw,34px) var(--marge) clamp(26px,4vw,36px)}
}

/* Vidéo à la une (Eqalizer, Valk) : le titre de la section est dans la bannière, qui touche les séparateurs */
.page-editoriaux .edito__bloc.edito__bloc--une{
  padding-top:0;padding-bottom:0;border-bottom:1px solid var(--trait);
  border-image:linear-gradient(var(--trait),var(--trait)) 1 0 1 0 / 1px 0 1px 0 / 0 100vmax
}
.page-editoriaux .edito__bloc.edito__bloc--une:has(.depliant){padding-bottom:clamp(36px,4vw,60px)}
.projet__une{margin-bottom:clamp(22px,2.4vw,34px)}
.projet__une .titre-bloc{margin:0}
.projet__une-trait{display:block;width:clamp(56px,5vw,84px);height:3px;margin-top:clamp(16px,1.8vw,24px);background:var(--ambre)}

/* Autres projets : une rangée défilante par créateur, qui file jusqu'au bord droit de l'écran */
.artistes--rangees{gap:clamp(44px,5vw,76px)}
.artiste__tete{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.artistes--rangees .artiste__nom{
  flex:1;display:flex;align-items:center;justify-content:flex-start;gap:18px;margin:0;padding:0;border:0;
  font-size:clamp(22px,2.3vw,36px);font-weight:900;letter-spacing:-.02em
}
.artistes--rangees .artiste__nom::after{content:"";flex:1;height:1px;background:var(--trait)}
.artistes--rangees .artiste__nom small{order:2;white-space:nowrap}
.artiste__fleches{display:flex;gap:8px}
.artiste__fleches[hidden]{display:none}
.artiste__fleche{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--trait-fort);color:var(--blanc);transition:border-color .2s,background .2s,opacity .2s
}
.artiste__fleche--avant .icone-fleche{rotate:180deg}
.artiste__fleche:disabled{opacity:.3;cursor:default}
@media (hover:hover){.artiste__fleche:not(:disabled):hover{border-color:var(--ambre);background:var(--ambre);color:#111}}
.artistes--rangees .artiste__videos{
  --bord:calc(max(0px, (100vw - var(--large)) / 2) + var(--marge));
  display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:0;scrollbar-width:none;
  margin-right:calc(-1 * var(--bord));padding-right:var(--bord)
}
.artistes--rangees .artiste__videos::-webkit-scrollbar{display:none}
.artistes--rangees .artiste__videos > li{flex:0 0 clamp(260px,23vw,360px);scroll-snap-align:start}
.artistes--rangees .carte-video__lien{border:0}
.artistes--rangees .carte-video__visuel{border:1px solid var(--trait);transition:border-color .2s}
.artistes--rangees .carte-video__titre{margin:12px 0 0;padding:0;font-size:14.5px;font-weight:700;color:rgba(255,255,255,.88)}
.carte-video__createur{display:block;margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ambre)}
.artistes--rangees .carte-video__createur + .carte-video__titre{margin-top:4px}
@media (hover:hover){.artistes--rangees a.carte-video__lien:hover .carte-video__visuel{border-color:var(--ambre)}}
@media (max-width:760px){
  .artistes--rangees .artiste__videos > li{flex-basis:74vw}
  .artiste__fleches{display:none}
  .artistes--rangees .artiste__nom{justify-content:space-between;align-items:baseline;font-size:20px}
  .artistes--rangees .artiste__nom::after{display:none}
  .artistes--rangees .carte-video__titre{margin:10px 0 0;font-size:13.5px}
}

/* Projets éditoriaux : l'en-tête de chaque univers devient une bannière, comme le carrousel de l'accueil */
.edito:has(.edito__banniere){padding-top:0}
/* la bannière touche le séparateur du dessus et celui du bloc suivant */
.edito__banniere + .edito__bloc,.edito__banniere + .depliant--edito{margin-top:0}
.edito__banniere{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-bottom:0;
  height:clamp(440px,38vw,620px);overflow:hidden;background:#0a0a0a
}
.edito__banniere-fond{position:absolute;top:0;right:0;width:62%;height:100%;object-fit:cover;object-position:center top}
.edito__banniere-voile{position:absolute;inset:0;background:linear-gradient(90deg,#0a0a0a 0%,#0a0a0a 36%,rgba(10,10,10,.55) 46%,rgba(10,10,10,0) 62%),linear-gradient(0deg,rgba(10,10,10,.5),transparent 30%)}
.edito__banniere .edito__tete{
  position:relative;z-index:1;height:100%;margin:0;align-items:flex-start;justify-content:center;text-align:left;gap:18px;
  padding-left:calc(max(0px, (100vw - var(--large)) / 2) + var(--marge));padding-right:var(--marge)
}
.edito__banniere .edito__tete > *{max-width:min(520px,31vw);margin:0}
.edito__banniere .edito__logo{justify-content:flex-start}
.edito__banniere .edito__logo img{width:auto;max-width:100%;height:clamp(60px,6vw,100px);max-height:none;object-fit:contain;object-position:left center}
.edito__banniere .prose,.edito__banniere .prose p{text-align:left;margin-inline:0}
.edito__banniere .prose p{font-size:clamp(15px,1.15vw,18px)}
.edito__banniere .actions{justify-content:flex-start}
/* Raplay : l'aperçu du site défile au survol, à la place de la photo */
.edito__banniere-ecran{aspect-ratio:auto;overflow:hidden;outline-offset:-3px}
.edito__banniere-voile,.edito__banniere .edito__tete{pointer-events:none}
.edito__banniere .edito__tete > *{pointer-events:auto}
@media (max-width:980px){
  .edito__banniere{height:auto;display:flex;flex-direction:column}
  .edito__banniere-fond{position:relative;width:100%;height:auto;aspect-ratio:16/9}
  .edito__banniere-voile{inset:0 0 auto;height:56.25vw;background:linear-gradient(0deg,#0a0a0a 0%,rgba(10,10,10,0) 35%)}
  .edito__banniere .edito__tete{padding:clamp(20px,4vw,32px) var(--marge) clamp(32px,6vw,48px)}
  .edito__banniere .edito__tete > *{max-width:640px}
  .edito__banniere-ecran{aspect-ratio:16/10}
}

/* ---------- GRAND ÉCRAN : Autres projets et page éditoriale sur toute la largeur ---------- */
/* Autres projets : le bloc part de la même marge que le carrousel de l'accueil, plus de vide à gauche */
.page-projets #autres > .conteneur{max-width:none;padding-inline:calc(var(--g) + clamp(0px,2vw,40px))}
.page-projets #autres .artistes--rangees .artiste__videos{
  --bord:calc(var(--g) + clamp(0px,2vw,40px));margin-right:calc(-1 * var(--bord));padding-right:var(--bord)
}

/* Projets éditoriaux : menu des univers pleine largeur, avec une marge sur les bords */
.page-editoriaux .onglets-univers{width:calc(100vw - 2 * var(--g));max-width:none;margin-left:calc(50% - 50vw + var(--g));margin-right:0}
/* séparateurs d'un bord à l'autre (le trait déborde du cadre sans rien décaler) */
.page-editoriaux .edito + .edito,.page-editoriaux .edito__bloc{
  border-image:linear-gradient(var(--trait),var(--trait)) 1 0 0 0 / 1px 0 0 0 / 0 100vmax
}
.page-editoriaux .depliant .edito__bloc{border-image:none}
/* dépliables : même case que « En savoir plus » des projets pros, sur toute la largeur */
.depliant--edito{
  --bord:calc(max(0px, (100vw - var(--large)) / 2) + var(--marge));
  width:100vw;margin-left:calc(50% - 50vw);padding-inline:var(--bord);
  border-color:var(--ambre);background:rgba(255,255,255,.03);transition:background .25s
}
.depliant--edito.est-ouvert{padding-inline:var(--bord);background:rgba(255,255,255,.03)}
.depliant--edito .depliant__bouton{padding:clamp(18px,2.2vw,28px) 0}
.depliant--edito .depliant__titre{gap:6px;font-size:clamp(15px,1.4vw,19px);letter-spacing:.06em}
.depliant--edito .depliant__titre small{font-size:11px;letter-spacing:.22em}
@media (hover:hover){.depliant--edito:not(.est-ouvert):hover{background:rgba(255,174,0,.07)}}
/* chiffres : une case par chiffre, tous sur la même ligne, comme sur l'accueil */
.page-editoriaux .bande-chiffres{
  width:calc(100vw - 2 * var(--g));max-width:none;margin-left:calc(50% - 50vw + var(--g));margin-right:0;
  gap:0;padding:0;border:1px solid var(--trait)
}
.page-editoriaux .bande-chiffres .chiffre{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  padding:clamp(26px,3vw,44px) 16px
}
.page-editoriaux .bande-chiffres .chiffre + .chiffre{border-left:1px solid var(--trait)}
.page-editoriaux .bande-chiffres .chiffre__valeur{font-size:clamp(38px,4.2vw,68px)}
.page-editoriaux .bande-chiffres .chiffre__label{margin:0}
@media (max-width:760px){
  .page-editoriaux .bande-chiffres:not([data-colonnes="1"]){gap:0}
  .page-editoriaux .bande-chiffres .chiffre:nth-child(odd){border-left:0}
  .page-editoriaux .bande-chiffres .chiffre:nth-child(n+3){border-top:1px solid var(--trait)}
  .page-editoriaux .bande-chiffres .chiffre{padding:24px 10px}
  .page-editoriaux .bande-chiffres .chiffre__label{font-size:11px;letter-spacing:.12em}
}

/* ---------- 10. ADAPTATIF ---------- */

@media (max-width:1180px){
  .mosaique{grid-template-columns:repeat(4,minmax(0,1fr))}
  .artiste__videos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .frise-h{grid-template-rows:auto 28px auto}
  .frise-h__texte{font-size:14px}
  .index-univers__lien{grid-template-columns:minmax(0,1fr) 58px}
  .index-univers__tags{grid-column:1;grid-row:2}
  .index-univers__fleche{grid-column:2;grid-row:1 / span 2}
  .cases--4{--colonnes:2 !important}
  .enjeux{grid-template-columns:1fr}
}

@media (max-width:980px){
  .barre__nav{display:none}
  .barre__burger{display:block}
  .projet__ligne,.format,.contact__grille,.details__contexte,.parcours{grid-template-columns:minmax(0,1fr)}
  .galerie{grid-template-columns:minmax(0,1fr)}
  .artiste__videos{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* La frise redevient verticale, comme le parcours de l'accueil */
  .frise-h{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:0;margin-left:5px;border-left:1px solid var(--trait-fort)}
  .frise-h__item,.frise-h__item--haut,.frise-h__item--bas{grid-column:1 !important;grid-row:auto !important;align-self:auto;padding:0 0 26px 26px;text-align:left}
  .frise-h__item::after{left:-6px;top:3px;bottom:auto;margin-left:0}
  .frise-h__ligne{display:none}
  .frise-h__texte{font-size:15px}
  .fleches:not(.fleches--carre){--n:1 !important}
  .fleches--carre{--n:2 !important}
  .fleches:not(.fleches--carre) .fleches__etape{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:24px;align-items:start}
  .fleches:not(.fleches--carre) .fleches__visuel{grid-row:1 / 5;margin-bottom:0}
  .fleches:not(.fleches--carre) .fleches__etape:not(:last-child) .fleches__visuel::after{
    left:50%;top:100%;width:14px;height:var(--ecart);translate:-50% 0;rotate:none;
    -webkit-mask-size:14px min(46%,34px);mask-size:14px min(46%,34px);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M6 1v17M1 13l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M6 1v17M1 13l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  }
  .fleches--carre .fleches__etape:nth-child(2n) .fleches__visuel::after{display:none}
  .zigzag__item{grid-template-columns:minmax(0,1fr);gap:22px}
  .zigzag__item:nth-child(even) .zigzag__media{order:0}
  .bande-chiffres:not([data-colonnes="1"]){--colonnes:2 !important;gap:30px 20px}
  .cases--3{--colonnes:2 !important}
}

@media (max-width:760px){
  :root{--barre-h:64px;--barre-h-fixe:56px}
  .barre__marque img{height:24px}
  .barre.est-fixe .barre__marque img{height:22px}

  /* Hero plein écran : le nom en haut sur toute la largeur, la mention dessous,
     la photo en grand posée sur le bas, la flèche par-dessus */
  .hero{height:100svh;min-height:620px;max-height:900px;padding:0;display:block}
  .hero__scene{position:absolute;inset:var(--barre-h) 0 0;width:auto;height:auto;aspect-ratio:auto;container-type:normal}
  .hero__couche{inset:auto;height:auto;max-width:none}
  .hero__couche--valentin,.hero__couche--kurtz,.hero__couche--portfolio{left:50%;top:1%;width:112vw;translate:-50% 0}
  .hero picture{display:contents}
  .hero__couche--portrait{left:50%;bottom:0;width:236vw;translate:-51% 0;scale:1;transform-origin:50% 100%}
  .hero__scene .hero__mention{
    left:0;right:0;top:calc(112vw * .5625 * .8);bottom:auto;padding-inline:var(--marge);
    font-size:11px;font-weight:600;letter-spacing:.2em;text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 7px rgba(0,0,0,.75);
  }
  .hero__mention--mobile{display:none}
  .hero__fleche{position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:5;width:48px;height:48px}
  .hero__fleche-svg{width:20px;height:29px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}

  .mosaique{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .mosaique--vertical{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mosaique__legende{padding:26px 8px 7px}
  .mosaique__legende span{font-size:12px}

  .index-univers__lien{grid-template-columns:minmax(0,1fr) auto;gap:14px 16px;padding:24px 0 28px}
  .index-univers__vignette{display:block;grid-column:2;grid-row:1;width:92px;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--trait)}
  .index-univers__nom{grid-column:1;grid-row:1;align-self:center}
  .index-univers__caps{font-size:clamp(44px,13.4vw,72px)}
  .index-univers__tags{grid-column:1 / -1;grid-row:2;font-size:11.5px}
  .index-univers__fleche{display:none}

  .frise__item{grid-template-columns:minmax(0,1fr);gap:4px}
  .projet__lecture{width:64px;height:64px;margin:-32px 0 0 -32px}
  .projet__lecture::after{left:25px;top:20px;border-width:12px 0 12px 18px}
  .projet__stats{gap:22px 30px}

  .lockup:not(.lockup--decale) .lockup__script{margin-left:.3em}
  .entete-section--page .lockup{font-size:clamp(40px,11vw,64px)}
  .lockup--ligne{white-space:normal;flex-wrap:wrap;font-size:clamp(32px,9.6vw,46px)}
  .lockup--ligne.lockup--centre{flex-direction:column;align-items:center}
  .lockup--ligne.lockup--centre .lockup__script{margin-left:0;transform:translateY(.1em) rotate(-3deg);transform-origin:center}
  .contact .lockup--ligne{flex-direction:column;align-items:flex-start}
  .contact .lockup--ligne .lockup__script{margin-left:1em}

  .artiste__videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .artiste__nom{font-size:15px}
  .filtres-artistes a{padding:8px 12px;font-size:12px}
  .carte-video__titre{margin:9px 10px 11px;font-size:12.5px;-webkit-line-clamp:3}

  .index-univers__logo{max-height:clamp(46px,13vw,74px)}
  .index-univers__logo--eqalizer,.index-univers__logo--valk{max-height:clamp(58px,15vw,88px)}
  .legal__fiche > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .bouton-suivant{width:50px;height:50px}
  .bouton-suivant__fleche{width:16px;height:23px}

  .fleches--carre{--n:1 !important}
  .fleches--carre .fleches__etape{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:20px;align-items:start}
  .fleches--carre .fleches__visuel{grid-row:1 / 5;margin-bottom:0}
  .fleches--carre .fleches__etape .fleches__visuel::after{display:none}
  .fleches:not(.fleches--carre) .fleches__etape{grid-template-columns:118px minmax(0,1fr)}

  .cases{--colonnes:1 !important}
  .palette-pastilles{gap:16px 12px}
  .palette-groupe__liste{flex-wrap:wrap}
  .pastille-couleur__point{width:38px;height:38px}
  .pastille-couleur__carte{width:min(262px,78vw)}
  .visuels-carres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projets--vertical .projet__ligne{grid-template-columns:minmax(0,1fr)}
  .projets--vertical .projet__visuel{max-width:220px}
  .navigateur{border-radius:8px}
  .navigateur__url{margin-left:6px}
  .logo-anime:not(:has(video)){aspect-ratio:4/3}
  .a-completer--dessous{white-space:normal;width:90%;text-align:center}

  .coordonnees > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .outils--bande{grid-template-columns:minmax(0,1fr)}
  .pied__haut{grid-template-columns:minmax(0,1fr)}
  .pied__nav{justify-content:flex-start}
  .pied__logo img{height:30px}
}

@media (max-width:420px){
  .chiffre__valeur{font-size:clamp(32px,10vw,44px)}
  .mosaique--vertical{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 11. MOUVEMENT RÉDUIT ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__couche,.hero__mention,.hero__fleche{animation:none;opacity:1;transform:none}
  .hero__fleche-svg,.bouton-suivant__fleche{animation:none}
  .hero.est-parallaxe .hero__couche{transition:none}
  .logo-anime__etape,.logo-anime__complet{animation:none}
  .logo-anime__complet{opacity:1;clip-path:none}
  .navigateur__ecran{overflow-y:auto}
  .navigateur__ecran img{height:auto;object-fit:fill;transition:none}
  .navigateur__aide{display:none}
  .avec-js .depliant__zone,.avec-js .depliant.est-ouvert .depliant__zone{transition:none}
}

/* ==================================================================
   ATELIERS : timeline motion, plans de travail Illustrator, calques
   Photoshop. Même gabarit : fiche à gauche, écran à droite, puis la
   bande propre au logiciel. Traits fins, libellés techniques, ambre
   pour l'élément actif.
================================================================== */
.atelier{--a-ambre:var(--ambre);margin-top:clamp(8px,1vw,14px)}
.atelier__mono{font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-faible)}
.atelier__haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(20px,2.4vw,34px)}
.atelier__colonne{display:flex;flex-direction:column;gap:20px}
.atelier__fiche{display:flex;flex-direction:column;gap:14px}
.atelier__fiche > *{margin:0;transition:opacity .25s,translate .25s}
.atelier__fiche.est-en-cours > *{opacity:0;translate:0 6px}
.atelier__fiche .etiquette{margin:0}
.atelier__fiche-titre{font-size:clamp(24px,2.5vw,38px);font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.01em;color:var(--blanc)}
.atelier__fiche-texte{color:rgba(255,255,255,.78);line-height:1.6;max-width:460px;min-height:4.8em}
.atelier__ecran{position:relative;aspect-ratio:16/9;border:1px solid var(--trait);background:#000;overflow:hidden}
.atelier__code,.atelier__doc{position:absolute;z-index:6;padding:5px 8px;background:rgba(0,0,0,.72);pointer-events:none}
.atelier__code{left:12px;bottom:12px;font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--ambre)}
.atelier__doc{left:12px;top:12px}
.atelier__oeil{appearance:none;background:none;border:0;padding:0;width:15px;height:9px;flex:none;position:relative;color:inherit;opacity:.75;transition:opacity .2s}
.atelier__oeil::before{content:"";position:absolute;inset:0;border:1.4px solid currentColor;border-radius:50%/60%}
.atelier__oeil::after{content:"";position:absolute;left:5.5px;top:2.5px;width:4px;height:4px;border-radius:50%;background:currentColor}
button.atelier__oeil{cursor:pointer;width:24px;height:24px;margin:-8px -4px;background:linear-gradient(currentColor,currentColor) center/0 0 no-repeat}
button.atelier__oeil::before{inset:7.5px 4.5px}
button.atelier__oeil::after{left:10px;top:10px}
button.atelier__oeil.est-masque{opacity:.25;background-size:17px 1.4px;background-position:center}
.atelier__bande{border:1px solid var(--trait)}
.atelier__bande-tete{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--trait)}
.atelier__cases{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.atelier__case{appearance:none;background:none;border:0;border-right:1px solid var(--trait);color:inherit;font:inherit;text-align:left;cursor:pointer;position:relative;padding:14px;display:flex;flex-direction:column;gap:12px;transition:background .25s}
.atelier__case:last-child{border-right:0}
.atelier__case::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--ambre);opacity:0;transition:opacity .25s;pointer-events:none}
.atelier__case::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ambre)}
.atelier__case.est-actif{background:rgba(255,174,0,.05)}
.atelier__case.est-actif::before{opacity:1}
.atelier__case.est-actif::after{animation:atelier-progres var(--duree,4s) linear forwards}
.est-en-pause .atelier__case.est-actif::after,.est-en-pause .ps-ligne.est-actif::after{animation-play-state:paused}
@keyframes atelier-progres{to{width:100%}}
.atelier__vignette{position:relative;height:clamp(96px,9.5vw,150px);border:1px solid var(--trait);overflow:hidden;background:#13101b}
.atelier__vignette img{position:absolute;inset:12% 0;width:100%;height:76%;object-fit:contain;opacity:.9}
.atelier__case-pied{display:flex;align-items:center;gap:10px;min-width:0}
.atelier__case-pied .atelier__mono{color:var(--ambre)}
.atelier__case-nom{font-size:13px;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s}
.atelier__case.est-actif .atelier__case-nom{color:var(--blanc)}
.atelier button:focus-visible,.atelier [role="button"]:focus-visible{outline:2px solid var(--ambre);outline-offset:-2px}

/* --- 1. Motion : la timeline de calques --- */
.atelier__media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;will-change:transform,opacity}
.atelier__media.est-visible{opacity:1}
.atelier-motion.est-pret .atelier__media.est-visible{opacity:0}
.atelier__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.atelier__media--vide{display:grid;place-items:center;color:var(--texte-faible);font-size:13px}
.motion-tl{display:grid;grid-template-columns:250px minmax(0,1fr);border:1px solid var(--trait);user-select:none;-webkit-user-select:none}
.motion-tl__noms{border-right:1px solid var(--trait);min-width:0}
.motion-tl__tete,.motion-tl__regle{height:34px;border-bottom:1px solid var(--trait)}
.motion-tl__tete{display:flex;align-items:center;gap:10px;padding:0 6px 0 14px}
.motion-tl__lecture{appearance:none;background:none;border:0;cursor:pointer;margin-left:auto;width:32px;height:30px;display:grid;place-items:center}
.motion-tl__lecture span{width:10px;height:11px;background:var(--blanc);clip-path:polygon(0 0,100% 50%,0 100%)}
.motion-tl__lecture.est-en-lecture span{clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.motion-tl__calque{appearance:none;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.05);font:inherit;width:100%;height:44px;display:flex;align-items:center;gap:12px;padding:0 14px;text-align:left;font-size:12.5px;color:rgba(255,255,255,.55);cursor:pointer;transition:color .2s,background .2s,box-shadow .2s}
.motion-tl__calque .atelier__mono{width:16px;flex:none}
.motion-tl__calque.est-actif{color:var(--blanc);box-shadow:inset 2px 0 0 var(--ambre);background:rgba(255,174,0,.05)}
.motion-tl__calque.est-actif .atelier__mono{color:var(--ambre)}
.motion-tl__nom{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.motion-tl__calque--vitesse{height:64px;border-bottom:0;cursor:default}
.motion-tl__pistes{position:relative;cursor:ew-resize;touch-action:pan-y}
.motion-tl__regle{position:relative}
.motion-tl__regle span{position:absolute;top:12px}
.motion-tl__regle i{position:absolute;bottom:0;width:1px;height:5px;background:var(--trait)}
.motion-tl__regle i.est-long{height:9px}
.motion-tl__piste{height:44px;position:relative;border-bottom:1px solid rgba(255,255,255,.05)}
.motion-tl__barre{position:absolute;top:10px;height:24px;border:1px solid var(--trait-fort);background:rgba(255,255,255,.04);transition:border-color .2s,background .2s}
.motion-tl__barre.est-actif{border-color:var(--ambre);background:rgba(255,174,0,.08)}
.motion-tl__cle{position:absolute;top:17px;width:10px;height:10px;margin-left:-5px;rotate:45deg;background:var(--noir);border:1.5px solid rgba(255,255,255,.6);transition:background .15s,border-color .15s,scale .2s}
.motion-tl__cle.est-passee{background:var(--blanc);border-color:var(--blanc)}
.motion-tl__cle.est-actif{background:var(--ambre);border-color:var(--ambre);scale:1.25}
.motion-tl__courbe{height:64px;border-bottom:0}
.motion-tl__courbe svg{position:absolute;inset:6px 0;width:100%;height:calc(100% - 12px);overflow:visible}
.motion-tl__courbe path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:stroke .2s}
.motion-tl__courbe path.est-actif{stroke:var(--ambre);stroke-width:1.6}
.motion-tl__point{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--ambre);pointer-events:none}
.motion-tl__curseur{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--blanc);pointer-events:none;z-index:3}
.motion-tl__curseur::before{content:"";position:absolute;left:-6px;top:0;width:14px;height:13px;background:var(--blanc);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.motion-tl__pistes.est-saisi .motion-tl__curseur::before{background:var(--ambre)}
.atelier-motion:not(.est-pret) .motion-tl{display:none}

/* --- 2. Illustrator : les plans de travail --- */
/* nuancier : les cases, puis la fiche de la couleur choisie juste en dessous */
.ai-couleur{width:100%;padding-top:12px;border-top:1px solid var(--trait);transition:opacity .2s}
.ai-couleur.est-en-cours{opacity:0}
.ai-couleur b{display:block;font-size:12px;line-height:1.2;text-transform:uppercase;font-weight:900;color:var(--blanc)}
.ai-couleur code{display:block;margin-top:5px;font:600 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.04em;color:var(--ambre)}
.ai-couleur p{margin:7px 0 0;font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.66)}
.ai-nuancier__aide{margin:auto 0 0;font-size:8.5px;opacity:.8}
.ai-ws{position:relative;aspect-ratio:16/10;border:1px solid var(--trait);display:grid;grid-template-columns:44px minmax(0,1fr) 184px;background:#08070b;overflow:hidden}
.ai-outils,.ai-nuancier{background:#0e0e0e;z-index:3;display:flex;flex-direction:column;align-items:center}
.ai-outils{border-right:1px solid var(--trait);gap:3px;padding:8px 0}
.ai-outils i,.ps-outils i{display:grid;place-items:center;color:rgba(255,255,255,.5);position:relative}
.ai-outils i{width:30px;height:30px}
.ai-outils i.est-actif,.ps-outils i.est-actif{background:var(--ambre);color:var(--noir)}
.ai-outils svg{width:16px;height:16px}
.ai-outils hr{width:20px;border:0;border-top:1px solid var(--trait);margin:4px 0}
.ai-vue{position:relative;overflow:hidden}
.ai-monde{position:absolute;left:50%;top:50%;display:flex;gap:70px;align-items:center;transform-origin:0 0;will-change:transform}
.ai-plan{position:relative;flex:none;height:var(--h-plan,300px);aspect-ratio:1.18;background-color:#13101b;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:22px 22px;background-position:center;box-shadow:0 0 0 1px rgba(255,255,255,.12);transition:opacity .4s,box-shadow .4s}
.ai-plan:not(.est-actif){opacity:.5}
.ai-plan.est-actif{box-shadow:0 0 0 1px rgba(255,174,0,.8)}
.ai-plan__nom{position:absolute;left:0;bottom:calc(100% + 8px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ai-plan.est-actif .ai-plan__nom{color:var(--ambre)}
.ai-dessin{position:absolute;left:50%;top:50%;width:min(90%,calc(var(--h-plan,300px) * .8 * var(--r,1.075)));aspect-ratio:var(--r,1.075);translate:-50% -50%}
.ai-source{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ai-forme,.ai-reste{position:absolute;inset:0;transition:opacity .5s,background-color .5s;opacity:0}
.ai-forme{background:var(--couleur-logo,#6D28D9);-webkit-mask:center/100% 100% no-repeat;mask:center/100% 100% no-repeat}
.ai-reste{background:center/100% 100% no-repeat}
/* mode « forme » : le logo est redessiné (forme en couleur, pièces écartées en gris) */
.ai-plan.est-analyse .ai-source{opacity:0}
.ai-plan.est-analyse .ai-forme{opacity:1}
.ai-plan .ai-reste{display:none} /* la pièce écartée ne se voit que dans les vignettes */
.ai-plan.est-analyse.est-vide .ai-forme{opacity:0}
.ai-plan:not(.est-analyse).est-vide .ai-source{opacity:.15}
/* mode « plan » : le visuel complet est le plan de travail ; la plume suit le contour du logo */
.atelier-ai--plan .ai-plan{aspect-ratio:var(--r,1);height:min(var(--h-plan,300px),calc(var(--l-plan,9999px) / var(--r,1)));background:#000}
.atelier-ai--plan .ai-dessin{inset:0;width:100%;height:100%;translate:none;aspect-ratio:auto}
.atelier-ai--plan .ai-source{object-fit:cover;transition:opacity .6s}
.atelier-ai--plan .ai-plan.est-analyse .ai-source{opacity:1}
.atelier-ai--plan .ai-plan.est-vide .ai-source{opacity:.12}
.atelier-ai--plan .ai-plan.est-analyse .ai-forme{opacity:0}
.atelier-ai--plan.est-teinte .ai-plan.est-analyse:not(.est-vide) .ai-forme{opacity:1}
.atelier-ai--plan .ai-reste{display:none}
.atelier-ai--plan .atelier__vignette{background:#000}
.atelier-ai--plan .atelier__vignette img{inset:0;height:100%;object-fit:contain;opacity:1}
.ai-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ai-trace path{fill:none;stroke:var(--ambre);stroke-width:2;vector-effect:non-scaling-stroke;transition:opacity .6s}
.ai-trace rect{fill:#13101b;stroke:var(--ambre);stroke-width:1.6;vector-effect:non-scaling-stroke;transition:opacity .5s}
.ai-trace rect.est-dernier{fill:var(--ambre)}
.ai-trace.est-repose rect{opacity:0}
.ai-trace.est-repose path{opacity:.3}
.ai-plume{position:absolute;z-index:4;width:18px;height:26px;margin-left:-9px;pointer-events:none;opacity:0;transition:opacity .25s;fill:#13101b;stroke:var(--blanc);stroke-width:1.6}
.ai-plume circle{fill:var(--blanc);stroke:none}
.ai-vue .atelier__doc,.ai-vue .atelier__code{left:12px}
.ai-nuancier{border-left:1px solid var(--trait);padding:12px 14px;gap:12px;align-items:stretch;overflow-y:auto;scrollbar-width:none}
.ai-nuancier .atelier__mono{font-size:9px;letter-spacing:.08em}
.ai-nuancier__grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.ai-nuancier__grille button{appearance:none;border:0;padding:0;cursor:pointer;width:100%;aspect-ratio:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:scale .2s}
.ai-nuancier__grille button.est-actif{outline:2px solid var(--ambre);outline-offset:2px}
.atelier-ai:not(.est-pret) .ai-plan:not(.est-actif){display:none}
.atelier-ai:not(.est-pret) .ai-monde{position:absolute;inset:14% 10%;left:10%;top:14%;display:grid;place-items:center}

/* --- 3. Photoshop : documents et calques --- */
.ps-ws{display:grid;grid-template-columns:52px minmax(0,1fr) 320px;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--trait);height:clamp(540px,46vw,660px)}
.ps-onglets{grid-column:1/-1;display:flex;border-bottom:1px solid var(--trait);overflow-x:auto;scrollbar-width:none}
.ps-onglets::-webkit-scrollbar{display:none}
.ps-onglets button{appearance:none;background:none;border:0;border-right:1px solid var(--trait);padding:12px 16px;cursor:pointer;white-space:nowrap;transition:color .2s,box-shadow .2s}
.ps-onglets button.est-actif{color:var(--blanc);box-shadow:inset 0 -2px 0 var(--ambre)}
.ps-outils{border-right:1px solid var(--trait);display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0}
.ps-outils i{width:36px;height:36px}
.ps-outils i.est-actif::after{content:"Déplacement";position:absolute;left:44px;z-index:7;white-space:nowrap;padding:5px 8px;background:var(--ambre);color:var(--noir);font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.ps-outils svg{width:20px;height:20px}
.ps-vue{position:relative;overflow:hidden;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:32px 32px}
.ps-monde{position:absolute;left:50%;top:50%;display:flex;gap:56px;align-items:center;transform-origin:0 0;will-change:transform}
.ps-doc{position:relative;flex:none;height:min(var(--h-doc,480px),calc(var(--l-doc,9999px) / var(--r,.5625)));cursor:pointer;transition:opacity .45s}
.ps-doc:not(.est-actif){opacity:.3}
.ps-doc.est-actif{cursor:default}
.ps-doc__nom{position:absolute;left:0;bottom:calc(100% + 8px);white-space:nowrap;font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ps-doc.est-actif .ps-doc__nom{opacity:0}
.ps-toile{position:absolute;inset:0;box-shadow:0 0 0 1px var(--trait);background:repeating-conic-gradient(#1c1c1c 0 25%,#141414 0 50%) 0 0/16px 16px;overflow:hidden}
.ps-toile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s,translate .6s var(--doux),filter .6s}
.ps-toile img.est-cache{opacity:0}
.ps-toile img.est-arrivee{opacity:0;translate:0 -14px;filter:blur(4px);transition:none}
.ps-repere{position:absolute;z-index:5;border:1px dashed rgba(255,174,0,.9);pointer-events:none;opacity:0;transition:opacity .3s}
.ps-repere.est-visible{opacity:1}
.ps-repere span{position:absolute;left:-1px;bottom:100%;margin-bottom:4px;padding:3px 6px;background:var(--ambre);color:var(--noir);font:700 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ps-vue__format{position:absolute;top:14px;right:14px;z-index:6}
.ps-panneau{border-left:1px solid var(--trait);display:flex;flex-direction:column;min-height:0}
.ps-panneau h5{margin:0;padding:11px 14px;border-bottom:1px solid var(--trait);display:flex;justify-content:space-between}
.ps-reglages{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--trait)}
.ps-liste{overflow-y:auto;scrollbar-width:thin}
.ps-ligne{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:rgba(255,255,255,.55);transition:color .2s,background .2s,box-shadow .2s,opacity .3s}
.ps-ligne.est-actif{color:var(--blanc);box-shadow:inset 2px 0 0 var(--ambre);background:rgba(255,174,0,.05)}
.ps-ligne.est-absent{opacity:.42}
.ps-ligne::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ambre)}
.ps-ligne.est-actif::after{animation:atelier-progres var(--duree,3s) linear forwards}
.ps-ligne__choix{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.ps-vignette{width:44px;height:44px;flex:none;border:1px solid var(--trait);position:relative;overflow:hidden;background:repeating-conic-gradient(#222 0 25%,#181818 0 50%) 0 0/8px 8px}
.ps-vignette img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ps-vignette img.est-cadree{inset:auto;object-fit:fill;max-width:none}
.ps-ligne__texte{font-size:13px;min-width:0}
.ps-ligne__texte small{display:block;font-size:11px;color:var(--texte-faible);margin-top:3px;line-height:1.35}
.ps-cadenas{margin-left:auto;width:9px;height:8px;border:1.4px solid currentColor;position:relative;margin-top:4px;opacity:.6;flex:none}
.ps-cadenas::before{content:"";position:absolute;left:0;top:-6px;width:5px;height:5px;border:1.4px solid currentColor;border-bottom:0;border-radius:4px 4px 0 0}
.atelier-ps:not(.est-pret) .ps-doc:not(.est-actif){display:none}

@media (hover:hover){
  .motion-tl__calque:hover{color:var(--blanc)}
  .atelier__case:not(.est-actif):hover{background:rgba(255,255,255,.03)}
  .atelier__case:hover .atelier__case-nom{color:var(--blanc)}
  .ai-nuancier__grille button:hover{scale:1.15}
  .ps-onglets button:not(.est-actif):hover{color:var(--blanc)}
  .ps-doc:not(.est-actif):hover{opacity:.6}
  .ps-ligne:not(.est-actif):hover{color:var(--blanc);background:rgba(255,255,255,.03)}
  button.atelier__oeil:hover{opacity:1}
}
@media (max-width:900px){
  .atelier__haut{grid-template-columns:minmax(0,1fr);gap:18px}
  .atelier__haut > .atelier__ecran,.atelier__haut > .ai-ws{order:-1}
  .atelier__fiche-texte{min-height:0}
  .motion-tl{grid-template-columns:118px minmax(0,1fr)}
  .motion-tl__calque{gap:8px;padding:0 10px;font-size:11px}
  .motion-tl__calque > .atelier__mono:first-child{display:none}
  .motion-tl__regle span:nth-of-type(even){display:none}
  .atelier__cases{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .atelier__case{flex:0 0 42%;scroll-snap-align:start}
  .ai-ws{aspect-ratio:auto;grid-template-columns:38px minmax(0,1fr);grid-template-rows:300px auto}
  .ai-outils i{width:28px;height:28px}
  .ai-nuancier{grid-column:1 / -1;border-left:0;border-top:1px solid var(--trait);overflow:visible}
  .ai-nuancier__grille{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
  .ai-nuancier__aide{display:none}
  .ai-vue .atelier__doc{display:none}
  .ai-monde{gap:40px}
  .ps-ws{grid-template-columns:minmax(0,1fr);grid-template-rows:none;height:auto}
  .ps-outils{flex-direction:row;justify-content:center;border-right:0;border-bottom:1px solid var(--trait);padding:6px}
  .ps-outils i{width:32px;height:32px}
  .ps-outils i.est-actif::after{display:none}
  .ps-vue{height:min(440px,62vh)}
  .ps-monde{gap:28px}
  .ps-panneau{border-left:0;border-top:1px solid var(--trait)}
}
@media (prefers-reduced-motion:reduce){
  .atelier__case.est-actif::after,.ps-ligne.est-actif::after{animation:none;width:100%}
}
@media (max-width:900px){
  .atelier__code{max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ==================================================================
   L'ATELIER DE L'ACCUEIL : menu Montage / Motion design / Graphisme /
   Illustration au-dessus de la timeline. Le montage reste affiché en
   premier ; les autres onglets ne s'ouvrent qu'au clic.
================================================================== */
.ateliers__menu{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border:1px solid var(--trait);margin-top:clamp(14px,1.6vw,22px)}
.ateliers__onglet{appearance:none;background:none;border:0;border-right:1px solid var(--trait);color:rgba(255,255,255,.5);font:inherit;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 12px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:color .25s,background .25s}
.ateliers__onglet:last-child{border-right:0}
.ateliers__onglet svg{width:15px;height:15px;flex:none}
.ateliers__onglet::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ambre);scale:0 1;transition:scale .35s var(--doux)}
.ateliers__onglet.est-actif{color:var(--blanc);background:rgba(255,255,255,.035)}
.ateliers__onglet.est-actif svg{color:var(--ambre)}
.ateliers__onglet.est-actif::after{scale:1 1}
.ateliers__onglet:focus-visible{outline:2px solid var(--ambre);outline-offset:-2px}
.ateliers__panneau[hidden]{display:none}
.ateliers__panneau .atelier{margin-top:0}
.ai-ws--sans-nuancier{grid-template-columns:44px minmax(0,1fr)}
.atelier__ecran.est-cliquable{cursor:pointer}
.atelier__fiche-action{margin:4px 0 0}
.ps-doc__lien{position:absolute;inset:0;z-index:4;display:none}
.ps-doc.est-actif .ps-doc__lien{display:block}
@media (hover:hover){
  .ateliers__onglet:not(.est-actif):hover{color:var(--blanc)}
}
@media (max-width:760px){
  .ateliers__menu{display:flex;overflow-x:auto;scrollbar-width:none}
  .ateliers__menu::-webkit-scrollbar{display:none}
  .ateliers__onglet{flex:1 0 auto;padding:10px 14px;font-size:10px;letter-spacing:.12em}
}

/* Photoshop : visuel final, et calque verrouillé toujours visible */
.ps-toile img.ps-finale{opacity:0;transition:opacity .8s .5s}
.ps-toile img.ps-finale.est-visible{opacity:1}
.ps-ligne button.atelier__oeil:disabled{cursor:default;opacity:.75}