/* sans id */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* LES JETONS DE COULEUR ET DE POLICE SONT DANS assets/palette.css.
     Ils y sont alles le jour ou l'on a compte : une seule page chargeait
     cette feuille, et changer le vert dans l'administration laissait
     trois cent quarante et un emplois sur l'ancien. La palette est
     maintenant chargee par toutes les pages, avant celle-ci.

     Ce qui reste ici n'est pas de la couleur : ce sont deux mesures de
     mise en page propres a l'accueil, et un alias de police que
     l'administration ne propose pas. */
  --font-mono:var(--font-display);   /* couche donnee : pas de famille en plus */
  --r:12px;
  --gutter:24px;   /* gouttiere de page, mobile */
}

/* ── Couche DONNEE : Space Mono ────────────────────────────────────
   Compteurs, timecodes, index et horloge. Traiter la donnee dans une
   voix distincte est ce qui separe une interface pilotee d'une page
   decoree. Chiffres tabulaires pour que rien ne bouge en defilant. */
#motion-fullscreen-counter,
#mfs-time,
#covCur, #covTot, #motCur, #motTot, #workCur, #workTot,
#kaolackTime, #kaolackTimeNav, #kaolackTimeMob, #kaolackTimeContact,
.mob-num,
[data-num]::before {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: .06em;
}
/* ── URANUS : accent violet distinct localement ── */
#uranus {
  --accent:#8b5cf6;
  --accent2:#e0e0e0;
}
html{scroll-behavior:smooth;overflow-x:hidden;overscroll-behavior-y:none}

/* ══════════════════════════════════════════
   FIX DÉFINITIF, L'ÉLITE SE REMARQUE
   Desktop + Mobile, ne se reproduira plus jamais.

   Cause : maskRevealUp démarre à clip-path:inset(100%)/opacity:0.
   Si l'animation est interrompue (bfcache, onglet arrière-plan,
   toggle de langue, suspension iOS, rechargement partiel),
   fill-mode:both maintient l'état initial → texte invisible.

   Solution : on tue l'animation sur les wraps et on force
   directement les valeurs finales. Le glitch ::before/::after
   est conservé, il ne fait que flash une couleur, il ne cache rien.
══════════════════════════════════════════ */

/* Fallback visible dès le premier paint */


/* ── SECTION CTA BAND ── */
.section-cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25rem;
  padding: 2.6rem clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--black);
}
.scta-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.82rem, 1.1vw, .95rem);
  letter-spacing: -.005em;
  color: var(--off);
  line-height: 1.3;
  margin: 0;
}
.scta-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--light);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--border2);
  padding: .6rem 1.2rem;
  border-radius: 9999px;
  transition: border-color .25s, color .25s, background .25s;
}
.scta-link:hover {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.04);
  color: #fff;
}
.scta-link--accent {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--black) !important;
  font-size: .84rem;
  padding: .95rem 2.1rem;
  box-shadow: 0 10px 34px -10px rgba(var(--accent-rgb),.55);
}
.scta-link--accent:hover {
  background: #EEFF8A !important;
  border-color: #EEFF8A !important;
  color: var(--black) !important;
}
/* ══════════════════════════════════════════════════════════════════
   LA FLECHE DEVIENT UNE PASTILLE
   ──────────────────────────────────────────────────────────────────
   Repris de la reference « Ora » : leur bouton n'est pas une pilule
   avec une fleche posee a la suite du texte, c'est une pilule QUI
   PORTE une pastille — un disque plein, d'une autre valeur, cale au
   bout. Ca fait un objet compose la ou il y avait un mot et un signe.

   LA PALETTE EST INVERSEE, ET C'EST OBLIGATOIRE. Chez eux la pilule
   est sombre et la pastille verte. Ici la pilule EST le vert : c'est
   la convention du site, une action principale se reconnait a
   l'aplat d'accent, et la changer sur deux bandes en la laissant
   ailleurs aurait casse la lecture. La pastille prend donc le noir.
   Meme dispositif, valeurs echangees.

   AUCUN TEXTE N'EST TOUCHE. Le balisage non plus : `.scta-arr`
   contenait deja la fleche, elle recoit seulement une boite. */
.scta-arr {
  display: inline-flex; align-items: center; justify-content: center;
  /* 2,45em : mesuree a 1,85em elle faisait 20 px dans une pilule de 40
     — une fleche dans un rond, pas une pastille. A ce rapport-la elle
     occupe les deux tiers de la hauteur et devient une piece du
     bouton, ce qui est tout l'objet du dispositif. */
  width: 2.45em; height: 2.45em; flex: 0 0 auto;
  margin: -.75em -1.25em -.75em .5em;   /* elle mord la marge droite de la pilule */
  border-radius: 50%;
  background: var(--black);
  color: var(--accent);
  font-size: .82em; line-height: 1;
  transition: transform var(--t-court) var(--ease-pose),
              background-color var(--t-court) var(--ease-pose);
}
/* La pastille avance, la pilule ne bouge pas. Deplacer les deux
   donnerait deux mouvements pour un seul geste. */
.scta-link:hover .scta-arr { transform: translateX(3px); }

/* Sur la variante nue — pilule bordee, sans aplat — la pastille
   s'inverse : c'est elle qui porte l'accent, puisque le fond ne le
   porte pas. */
.scta-link:not(.scta-link--accent) .scta-arr {
  background: var(--accent);
  color: var(--black);
}
@media(max-width: 640px) {
  .section-cta-band {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
  }
}

/* ── Em d'accroche : --font-accent italic (harmonisé avec Atelier) ── */
h1 em, h2 em, h3 em {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
/* hero-name-sub DM Serif Display italic, déjà présent dans définition canonique ~L883, doublon retiré */

/* ── SYNE, titres de sections (harmonisé avec Atelier) ── */
h1, h2, h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

/* Sécurité anti-débordement horizontal mobile */


/* ── MOTION PLAY OVERLAY sur work-card ── */
.motion-play-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:3;pointer-events:none;
  background:rgba(0,0,0,.28);
  transition:background .3s;
}
.work-card:hover .motion-play-overlay{background:rgba(0,0,0,.5)}
.motion-play-overlay svg{
  fill:#fff;
  filter:drop-shadow(0 2px 16px rgba(0,0,0,.6));
  transform:scale(1);transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.work-card:hover .motion-play-overlay svg{transform:scale(1.15)}

/* ── FIX MOBILE NOM HÉRO ── */
/* hero-name @480px, absorbé dans patch §8 @640px L7946 */
/* hero-name-wrap/sub-wrap white-space:normal, absorbé dans base L841 + L7946 */


/* content-visibility retiré, cassait les calculs de position de ScrollTrigger */

body{font-family:var(--font-body);background:var(--black);color:var(--light);-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;overflow-x:hidden;max-width:100vw}


/* ── WATERMARK TEXTE GÉANT (inspiré pieterkoopt) ── */
.wm-section { position: relative; overflow: hidden; isolation: isolate; }
/* Mobile : isolation:auto, isolation:isolate crée un stacking context composite par section.
   Le browser mobile expulse ces layers GPU quand ils quittent le viewport
   → espace noir + contenu qui réapparaît 1-2s après au retour. */

.wm-section::before { content:none !important;
  display:none !important;
  content: attr(data-wm);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(8rem, 22vw, 22rem);
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.05);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  line-height: 1;
}
.wm-section > * { position: relative; z-index: 1; }

/* ── PROCESS REDESIGN, style pieterkoopt 01/02/03 ── */


/* ══════════════════════════════════════
   PROCESS, CAROUSEL MOBILE + DOTS
   ══════════════════════════════════════ */
@media(max-width: 768px) {
  #pieter-process-wrap {
    overflow: visible;
    position: relative;
  }

  /* Track horizontal scroll snap, scroll natif pur, aucun JS handler.
     pan-x pan-y : le browser gère les deux directions nativement.
     → swipe horizontal = slide, swipe vertical = scroll page.
     Aucun conflit, aucun handler JS nécessaire. */
  #pieter-process-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    /* PAS de scroll-behavior:smooth, combat le snap natif sur iOS Safari → rebond/blocage */
  }

  /* Slide entier : même règle que le track */
  

  /* Zone de texte : pan-x pan-y, le doigt sur du texte peut scroller */
  

  /* Media : idem, le doigt sur l'image peut scroller verticalement */
  
  #pieter-process-track::-webkit-scrollbar { display: none; }

  /* Chaque step = slide full width */
  
  

  /* Dots process */
  
  
  .process-dot.active {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.3);
    width: 20px;
    border-radius: 4px;
  }
}
@media(min-width: 769px) {
  #pieter-process-track { display: contents; }
  
}

/* ── HERO TYPO, plus massive ── */


@keyframes manifeste-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ── HERO HUD OVERLAY SYSTEM ── */

/* HUD coin haut droite, supprimé */

/* HUD, bande bas (3 colonnes) */


/* Stats : réafficher sur mobile en format ligne dense */

/* HUD bottom remplacé par hero-stats partout (desktop ET mobile), masqué pour éviter la superposition */

/* ── HERO HUD, hero-sub redesign ── */


/* ── HERO CTA BLOCK, voir définitions canoniques dans le bloc principal ci-dessous ── */

/* ── HERO EYEBROW HUD ── */
/* .hero-eyebrow HUD, supprimé, absorbé dans définition canonique L841 */

/* ── HERO NAME HUD, fusionné dans définitions canoniques L842 (hero-name, déjà identique) et L878 (hero-name-sub, Syne uppercase appliqué) ── */

/* ── HERO PORTFOLIO LINKS HUD ── */


/* ── HUD mobile adaptations ── */


/* Manifeste-ticker : supprimé (redondant avec le typing effect du hero) */


/* ── CURSOR ── */
.cur{position:fixed;width:8px;height:8px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:9999;top:0;left:0;transform:translate(-50%,-50%);will-change:transform;transition:width .2s,height .2s;box-shadow:0 0 0 1.5px rgba(6,6,6,.5);display:none !important}
/* curseur natif .cur/.cur-r masqué, remplacé par le curseur contextuel #mdgCursor (VOIR/DRAG) */
.cur-r{position:fixed;width:32px;height:32px;border:1px solid rgba(255,255,255,.25);border-radius:50%;pointer-events:none;z-index:9998;top:0;left:0;transform:translate(-50%,-50%);will-change:transform;transition:width .3s,height .3s,border-color .3s;display:none !important}
.cur.g{width:15px;height:15px}.cur-r.g{width:52px;height:52px;border-color:rgba(255,255,255,.08)}
@media(hover:none){.cur,.cur-r{display:none}body{cursor:auto}}

/* ── NAV ── */
nav:not(#mob-tab-bar){position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1rem 3rem;background:rgba(6,6,6,.92);border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(255,255,255,0.03),0 4px 24px rgba(0,0,0,0.3)}
.nav-logo{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--light);text-decoration:none;letter-spacing:.1em;text-transform:uppercase;flex-shrink:0}

.nav-logo span{color:var(--light)}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{font-size:.75rem;color:var(--off);text-decoration:none;letter-spacing:.1em;text-transform:uppercase;transition:color .2s;font-weight:500}
.nav-links a:hover,.nav-links a.active{color:var(--light)}
.nav-links a::before{content:attr(data-num);margin-right:.55em;font-size:.62em;font-weight:700;letter-spacing:.05em;color:var(--accent);opacity:.6;vertical-align:1px;transition:opacity .2s}
.nav-links a:hover::before,.nav-links a.active::before{opacity:1}
.nav-cta{font-family:var(--font-display);font-size:.76rem;font-weight:700;color:var(--accent);background:transparent;padding:.5rem 1.2rem;border:1.5px solid var(--accent);border-radius:9999px;text-decoration:none;letter-spacing:.04em;transition:color .2s,background .2s,transform .2s,box-shadow .2s}
.nav-cta:hover{background:var(--accent);color:#1D2103;transform:scale(1.03);box-shadow:0 4px 20px rgba(var(--accent-rgb),.28)}
.nav-right{display:flex;align-items:center;gap:1rem}
/* ── LANG TOGGLE ── */
.lang-toggle{background:none;border:1.5px solid var(--border2);border-radius:9999px;padding:.3rem .75rem;font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--off);cursor:pointer;transition:border-color .2s,color .2s,background .2s;flex-shrink:0}
.lang-toggle:hover{border-color:#fff;color:#fff}
.lang-toggle.active{background:#fff;border-color:#fff;color:var(--black)}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.nav-burger span{display:block;width:22px;height:1.5px;background:var(--light);border-radius:4px}
section{position:relative;z-index:1}

/* ── HERO SCROLL DOWN HINT ── */


@keyframes heroLineGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}


/* ── HERO : split layout, photo droite, texte gauche ── */
#hero{
  min-height:100dvh;display:flex;flex-direction:column;
  padding:0;border-bottom:1px solid var(--border);
  overflow:hidden;position:relative;background:var(--black);
  z-index:1;
  max-width:100vw;
}

/* Les vidéos et l'image doivent couvrir entièrement le wrap élargi */
/* hero images, will-change handled by responsive rules above */


/* Préférence accessibilité, réduire les animations.

   CE QUE CETTE PREFERENCE DEMANDE, ET CE QU ELLE NE DEMANDE PAS.
   Sous Windows, « Effets d animation » decoche allume
   prefers-reduced-motion. Le site coupait alors TOUTE duree :
   animations, mais aussi le moindre fondu de couleur au survol. Un
   visiteur avec ce reglage voyait un site mort, et le proprietaire du
   site en premier — les images du portfolio changeaient par a-coups
   sur son ordinateur et en fondu sur son telephone.

   Ce que la preference vise, ce sont les declencheurs vestibulaires :
   ce qui SE DEPLACE, zoome, defile ou tourne. Un fondu d opacite et un
   changement de couleur n en font pas partie ; les garder ne trahit
   pas le reglage, cela evite seulement de rendre l interface muette.

   D ou la regle : les images clefs restent coupees, et les transitions
   survivent mais sur les seules proprietes qui ne bougent rien. Une
   « transition: transform .4s » devient instantanee sans qu on ait a
   la retrouver une par une. */
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  
  /* Désactive animations lourdes sauf marquee */
  *:not(.collabs-marquee):not(.nav-ticker-inner)::before,
  *:not(.collabs-marquee):not(.nav-ticker-inner)::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  *:not(.collabs-marquee):not(.nav-ticker-inner){
    scroll-behavior:auto !important;
  }
}
/* Fondu gauche, photo plein écran, noir opaque à gauche, transparent à droite */


/* Dégradé gauche, div dédié pour passer au-dessus de la vidéo */

/* Grain léger sur la photo */


/* Eyebrow label */


/* Nom principal */

/* Mask reveal + glitch sur les wraps internes */


/* hero-name @600px, absorbé dans patch §8 @640px L7946 */
/* Handle en DM Sans italic, bien plus petit */

/* Promesse courte, incisive */

/* .hero-sub base ancienne supprimée, absorbée dans HUD L599 */
/* .hero-sub strong + .hl, absorbés dans HUD L599 */


/* ── FIX ESPACE VIDE MOBILE, hero-left padding-bottom ── */

/* ── HERO LAYOUT, desktop ≥768px : neutralisé, remplacé par le bloc patch §8 ── */
@media(min-width:768px){
  #hero{flex-direction:row !important}
  
}

/* ── ABOUT (fond légèrement plus clair pour alterner) ── */
#about{padding:5rem 3rem;border-bottom:1px solid var(--border);background:var(--dark);position:relative;overflow:hidden}
#about::before{
  content:'';position:absolute;inset:-5%;
  background-size:cover;background-position:center 30%;
  opacity:.09;pointer-events:none;z-index:0;
  filter:grayscale(30%) contrast(1.05) brightness(.85);
  animation:about-drift 20s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes about-drift{0%{transform:scale3d(1.0,1.0,1) translateZ(0)}100%{transform:scale3d(1.05,1.05,1) translateY(-.5%) translateZ(0)}}

@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */#about::before{animation:none;transform:none}}
.container{max-width:1220px;margin:0 auto;position:relative;z-index:1;padding-left:1.5rem;padding-right:1.5rem}

/* Setup gallery : petite portrait + 2 setups en dessous */


/* About split layout */


/* Dégradé + flou sur le bas */


/* ── ABOUT PHOTO MORPHING ── */

.morph-slide.active{
  opacity:1;
  transform:scale(1.0);
  filter:blur(0px) brightness(.9);
  z-index:2;
}
.morph-slide.leaving{
  opacity:0;
  transform:scale(.97);
  filter:blur(8px) brightness(.7);
  z-index:3;
}
/* Dots indicateur morphing */


.morph-dot.active{
  background:var(--accent);
  transform:scale(1.35);
}


/* @keyframes pulse retiré, clignotement opacité des points "disponible" (tell IA) remplacé par anneau statique */

/* ═══════════════════════════════════════════
   SECTION TRANSITIONS, visual separators
   ═══════════════════════════════════════════ */

/* Divider accent line between sections */
section+section::before,
#hero+section::before {
  content:'';
  display:block;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.07) 20%,rgba(255,255,255,0.12) 50%,rgba(255,255,255,0.07) 80%,transparent 100%);
  margin:0;
}

/* Section entry, shimmer on section label */
.sec-label {
  position:relative;
  overflow:hidden;
}
.sec-label::after {
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent);
  animation:secShimmer 3s ease-in-out infinite;
}
@keyframes secShimmer {
  0%   { left:-100%; }
  40%,100% { left:200%; }
}

/* ── COLLABS TITLE FIX, mobile ── */


/* ── CONDITIONS, bilingual label fix ── */


/* ── MOBILE QUICK-NAV : bigger touch targets ── */


/* ── SECTION ACCESSIBILITY : skip-link ── */
.sr-skip-link{
  position:fixed;top:-100%;left:50%;transform:translateX(-50%);
  z-index:9999;
  background:var(--accent);color:var(--black);
  font-family:var(--font-display);font-weight:700;
  padding:.6rem 1.4rem;border-radius:0 0 12px 12px;
  font-size:.8rem;text-decoration:none;letter-spacing:.04em;
  transition:top .2s;
}
.sr-skip-link:focus{top:0}

/* ── FOOTER : uniform mobile layout ── */
@media(max-width:580px){
  .footer-main{
    display:flex !important;
    flex-direction:column !important;
  }
  .footer-main>*{
    border-right:none !important;
    border-bottom:1px solid var(--border);
    padding:1.4rem 1.25rem !important;
  }
  .footer-main>*:last-child{border-bottom:none}
  .f-footer-cta{flex-direction:row;gap:.4rem}
  .f-cta-btn-primary,.f-cta-btn-secondary{flex:1;text-align:center;font-size:.7rem}
  .footer-bottom{padding:.7rem 1.25rem;flex-direction:column;text-align:center;gap:.3rem}
}
.sec-label{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;display:flex;align-items:center;gap:.75rem}
.sec-label::after{content:'';flex:1;height:1px;background:linear-gradient(to right,rgba(255,255,255,0.14),transparent);transition:background .3s}


/* ── COLLABS PREMIUM ── */
#collabs{padding:5rem 3rem;border-bottom:1px solid var(--border);background:var(--dark);position:relative;overflow:clip}
#collabs::before{content:'';position:absolute;inset:-8%;background-image:url('/media/img/cette_image_en_16_9_sans_202606071242_ylerhm.webp');background-size:cover;background-position:center 20%;opacity:.18;pointer-events:none;z-index:0;filter:grayscale(30%) contrast(1.1);animation:collab-drift 18s ease-in-out infinite alternate;transform-origin:center}
@keyframes collab-drift{0%{transform:scale(1.0) translateY(0)}100%{transform:scale(1.06) translateY(-1%)}}
#collabs::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,0.02) 0%,transparent 60%),linear-gradient(to bottom,rgba(14,14,14,.88) 0%,rgba(14,14,14,.6) 40%,rgba(14,14,14,.88) 100%);pointer-events:none;z-index:0}
.collabs-premium .sec-label{justify-content:center;margin-bottom:1rem}
.collabs-premium .sec-label::after{display:none}

/* Avatars groupés */


/* Infos à côté des avatars */

/* Marquee noms */


/* ── Ligne statique collabs, message principal ── */


/* Marquee réduit, fond sonore, pas le message principal */


.collabs-marquee .sep{color:var(--accent);font-weight:700;padding:0 .25rem;font-size:.8em;flex-shrink:0;opacity:.5}

@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}


/* GRILLE MAGAZINE, 3 col, images avec height fixe */


/* Card 1 : grande à gauche sur 2 lignes */

/* Cards 2 & 3 : colonne du milieu */


/* Cards 4 & 5 : colonne droite */


/* Card 6 : en bas sur 2 colonnes ou on la cache si 5 suffit */


/* Photo qui remplit la carte */


/* Overlay gradient fort pour lisibilité */


/* Texte sur la photo */


/* Instagram icon */


/* .ac-card:hover box-shadow, absorbé dans §patch L3662 (!important) */

/* ── TRUST (fond surface pour contraster avec black) ── */
#trust{padding:5rem 3rem;border-bottom:1px solid var(--border);background:var(--surface)}


/* ── PORTFOLIO (carrousel horizontal) ── */
#work{padding:5rem 0 5rem;border-bottom:1px solid var(--border);background:var(--black);position:relative;overflow:hidden}
#work .container{max-width:none;padding:0}


.work-nav{display:flex;align-items:center;gap:1rem}
.work-counter{font-family:var(--font-display);font-weight:700;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);min-width:60px;text-align:center}
.work-counter strong{color:var(--light);font-weight:700}
.work-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--light);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s;font-size:1rem}
.work-arrow:hover{background:var(--accent);color:var(--black);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 20px rgba(255,255,255,0.17)}
.work-arrow:disabled{opacity:.3;cursor:not-allowed}
.work-arrow:disabled:hover{background:transparent;color:var(--light);border-color:var(--border);transform:none}

.work-track-wrap{position:relative;padding:0 3rem}
.work-track-wrap::before,.work-track-wrap::after{content:'';position:absolute;top:0;bottom:0;width:3rem;z-index:2;pointer-events:none}
.work-track-wrap::before{left:0;background:linear-gradient(to right,var(--black),transparent)}
.work-track-wrap::after{right:0;background:linear-gradient(to left,var(--black),transparent)}
.work-track{display:flex;gap:1.25rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.work-track::-webkit-scrollbar{display:none}
/* ── WORK CARDS, design premium ── */
.work-card{border-radius:12px;overflow:hidden;position:relative;overflow:hidden;border-radius:var(--r);background:var(--surface);flex:0 0 auto;width:clamp(260px,28vw,360px);aspect-ratio:4/5;scroll-snap-align:start;text-decoration:none;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 24px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.03);touch-action:pan-x pan-y}
.work-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.07);will-change:transform}
.work-card .work-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s}
.work-card:hover .work-img{transform:scale(1.06);filter:brightness(.55)}
.work-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.2) 50%,transparent 75%);opacity:.7;transition:opacity .45s}
.work-card:hover::after{opacity:1}
/* ── WORK META, hover reveal desktop, caption mobile ── */
.work-meta{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.2rem 1.2rem 1.15rem;
  z-index:2;
  display:flex;flex-direction:column;gap:.3rem;
  /* PEAUFINAGE : la catégorie reste visible au repos ; le titre se déploie au survol (desktop). Mobile = caption complète. */
}
.work-card:hover .work-meta{
  opacity:1;
  transform:translateY(0);
}
/* overlay gradient, quasi invisible au repos, fort au hover */
.work-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 45%,transparent 75%);
  transition:opacity .38s;
  z-index:1;pointer-events:none;
  opacity:0;
}
.work-card:hover .work-overlay{opacity:1}
.cov-card:hover .work-overlay{opacity:1}
.work-card-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1);z-index:3}
.work-card:hover .work-card-bar{transform:scaleX(1)}
.cov-card:hover .work-card-bar{transform:scaleX(1)}

/* ── Before/After comparison slider (work-card-ba) ── */
.work-card-ba{cursor:default}
.ba-slider{position:absolute;inset:0;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;cursor:ew-resize}
.ba-slider .work-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transform:none!important;filter:none!important;transition:none!important}
.ba-img-after{z-index:1}
.ba-img-before-wrap{position:absolute;inset:0;z-index:2;overflow:hidden;clip-path:inset(0 50% 0 0);will-change:clip-path;transition:none}
.ba-img-before-wrap .ba-img-before{position:absolute;inset:0;width:100%;height:100%}
.ba-divider{position:absolute;top:0;bottom:0;left:0;width:2px;background:rgba(255,255,255,.85);transform:translateX(0);z-index:4;pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.5);will-change:transform}
.ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(10,10,10,.78);border:1.5px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;gap:3px;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.5);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.ba-slider:hover .ba-handle{transform:translate(-50%,-50%) scale(1.12)}
.ba-tag{position:absolute;top:.9rem;z-index:5;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.32rem .65rem;border-radius:12px;background:rgba(10,10,10,.6);border:1px solid var(--border);color:#fff;pointer-events:none;transition:opacity .3s}
.ba-tag-before{left:.9rem}
.ba-tag-after{right:.9rem}
.work-card-ba:hover .ba-divider,.work-card-ba:hover .ba-handle{box-shadow:0 0 18px rgba(0,0,0,.65)}
.work-card-ba .work-meta{z-index:6;pointer-events:none}
.work-card-ba .work-overlay{z-index:5;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.0) 28%)}
.work-card:hover .ba-slider .work-img{transform:none!important;filter:none!important}
/* ── Carte BA : aucun voile au survol, la comparaison reste toujours nette ── */
.work-card-ba:hover{transform:none} /* géométrie figée : indispensable pour que le drag reste précis */
.work-card-ba::after{opacity:0;pointer-events:none}
.work-card-ba:hover::after{opacity:0}
.work-card-ba:hover .work-overlay{opacity:0}
.work-card-ba:hover .work-meta{opacity:0;transform:translateY(8px)}
/* Crédit discret en haut, sans fond ni dégradé, juste lisible via text-shadow */
.ba-credit{position:absolute;top:.92rem;left:50%;transform:translateX(-50%);z-index:5;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);text-shadow:0 1px 6px rgba(0,0,0,.55);pointer-events:none;white-space:nowrap}
.work-cat{font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.55rem}
.work-cat::before{content:'';width:18px;height:1px;background:var(--accent);opacity:.85}
.work-title{font-family:var(--font-display);font-weight:700;font-size:.96rem;letter-spacing:-.005em;color:#f5f2ec;line-height:1.16;display:flex;flex-direction:column;gap:.12rem}
.work-title em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:#b9b4ac;font-size:.8em;display:block;letter-spacing:0;margin-top:.18rem}
/* PEAUFINAGE : sur desktop (pointeur), le titre est masqué au repos et se déploie au survol. Le mobile (hover:none) garde le titre en caption. */
@media(hover:hover){
  .work-card .work-title{max-height:0;opacity:0;overflow:hidden;transform:translateY(6px);margin-top:0;transition:max-height .42s cubic-bezier(.16,1,.3,1),opacity .36s,transform .36s,margin-top .42s}
  .work-card:hover .work-title{max-height:80px;opacity:1;transform:none;margin-top:.15rem}
}

.work-footer{margin:2.5rem 3rem 0;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}

/* ── SWIPE HINT, mobile only ── */
.swipe-hint {
  display: none;
}

.work-hint{font-size:.72rem;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;font-weight:500;display:flex;align-items:center;gap:.6rem}
.work-hint .drag{display:inline-block;animation:dragHint 2.4s ease-in-out infinite}

@keyframes dragHint{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.work-more{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--off);letter-spacing:-.0025em;text-decoration:none;transition:color .3s}
.work-more:hover{color:var(--accent)}
.work-more .arr{transition:transform .3s}
.work-more:hover .arr{transform:translateX(4px)}


/* ── COVERS (carrousel horizontal) ── */
#covers{padding:5rem 0;border-bottom:1px solid var(--border);background:var(--black);position:relative;overflow:hidden}
#covers .container{max-width:none;padding:0}

.cov-nav{display:flex;align-items:center;gap:1rem}
.cov-counter{font-family:var(--font-display);font-weight:700;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);min-width:60px;text-align:center}
.cov-counter strong{color:var(--light);font-weight:700}
.cov-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--light);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s;font-size:1rem}
.cov-arrow:hover{background:var(--accent);color:var(--black);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 20px rgba(255,255,255,0.17)}
.cov-arrow:disabled{opacity:.3;cursor:not-allowed}
.cov-arrow:disabled:hover{background:transparent;color:var(--light);border-color:var(--border);transform:none}

.cov-track-wrap{position:relative;padding:0 3rem}
.cov-track-wrap::before,.cov-track-wrap::after{content:'';position:absolute;top:0;bottom:0;width:3rem;z-index:2;pointer-events:none}
.cov-track-wrap::before{left:0;background:linear-gradient(to right,var(--black),transparent)}
.cov-track-wrap::after{right:0;background:linear-gradient(to left,var(--black),transparent)}
.cov-track{display:flex;gap:1.25rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.cov-track::-webkit-scrollbar{display:none}
.cov-card{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:var(--r);background:var(--surface);flex:0 0 auto;width:clamp(240px,26vw,320px);aspect-ratio:1/1;scroll-snap-align:start;cursor:pointer;transition:transform .5s cubic-bezier(.16,1,.3,1);touch-action:pan-x pan-y}
.cov-card:hover{transform:translateY(-4px);will-change:transform}
.cov-card .cov-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .5s}
.cov-card:hover .cov-img{transform:scale(1.05);filter:brightness(.45)}
.cov-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.1) 45%,transparent 70%);opacity:0;transition:opacity .38s}
.cov-card:hover::after{opacity:1}
.cov-meta{position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.15rem 1rem;z-index:2;display:flex;flex-direction:column;gap:.2rem;opacity:0;transform:translateY(8px);transition:opacity .38s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1)}
.cov-card:hover .cov-meta{opacity:1;transform:translateY(0)}
.cov-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.0075em;color:var(--light);line-height:1.1}
.cov-artist{font-family:var(--font-body);font-size:.75rem;color:var(--off);font-weight:400;letter-spacing:.01em}
.cov-artist::before{content:', ';color:var(--accent)}
.cov-cat-tag{position:absolute;top:.9rem;left:.9rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--light);background:rgba(0,0,0,.6);padding:.3rem .55rem;border-radius:4px;z-index:2;opacity:.8;transform:translateY(0);transition:opacity .35s,transform .35s}
.cov-card:hover .cov-cat-tag{opacity:1;transform:translateY(0)}


/* ── SERVICES (fond dark) ── */
#services{padding:5rem 3rem 3rem;border-bottom:1px solid var(--border);background:var(--dark)}

.svc-h2{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-.0125em;line-height:1.05}
.svc-h2 em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--off);display:block;font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:0;margin-top:.2rem}


/* Barre top accent */


/* ── SVC CARD CLICK HINT ── */


/* Numéro : grand filigrane en position absolue */


.svc-cta .arr{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.svc-cta:hover .arr{transform:translateX(4px)}

/* ── CONTACT, REDESIGN PREMIUM ── */
#contact{
  padding:0;
  position:relative;
  overflow:hidden;
  background:var(--black);
}

/* Ligne déco verticale gauche */
#contact::after{
  content:'';
  position:absolute;
  left:3rem;top:0;bottom:0;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.07) 20%,rgba(255,255,255,.07) 80%,transparent);
  pointer-events:none;
  z-index:0;
}

/* Bruit de fond subtil */
#contact .contact-noise{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;opacity:.4;
}

/* Halo lumière centre-gauche */
#contact .contact-glow{
  position:absolute;
  left:-10%;top:30%;
  width:60vw;height:60vw;max-width:700px;max-height:700px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.03) 0%, transparent 65%);
  pointer-events:none;z-index:0;
}

/* Layout principal */
#contact .contact-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
}

/* COLONNE GAUCHE, accroche éditoriale */
.contact-left-col{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:7rem 4rem 5rem 3rem;
  border-right:1px solid var(--border);
  position:relative;
}

/* Numéro de section vertical */
.contact-side-num{
  position:absolute;
  top:7rem;right:-1.1rem;
  font-family:var(--font-display);
  font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  user-select:none;
}

.contact-eyebrow{
  display:flex;align-items:center;gap:.8rem;
  font-family:var(--font-display);font-size:.72rem;
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin-bottom:2.5rem;
}
.contact-eyebrow::before{
  content:'';width:20px;height:1px;
  background:var(--dim);display:block;flex-shrink:0;
}

.contact-h2{
  font-family:var(--font-accent) !important;
  font-weight:400 !important;
  font-size:clamp(3rem,5.5vw,5.5rem);
  line-height:.92;
  letter-spacing:-.01em;
  margin-bottom:2.5rem;
  color:var(--light);
}
.contact-h2 em{
  font-family:var(--font-accent);
  font-style:italic;font-weight:400;
  color:rgba(255,255,255,.45);
  display:block;
  font-size:clamp(2.2rem,4vw,4.2rem);
  letter-spacing:-.005em;
}

.contact-sub{
  font-size:.88rem;color:var(--off);
  line-height:1.85;font-weight:300;
  max-width:360px;margin-bottom:3.5rem;
}

/* Liens directs redesignés */
.contact-left-links{
  display:flex;flex-direction:column;gap:.5rem;
  margin-bottom:3rem;
}
.contact-direct-link{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.2rem;
  background:transparent;
  border:1px solid var(--border);
  border-radius:12px;
  text-decoration:none;
  transition:border-color .3s,background .3s,transform .3s cubic-bezier(.16,1,.3,1);
  position:relative;overflow:hidden;
}
.contact-direct-link::before{
  content:'';
  position:absolute;inset:0;
  background:rgba(255,255,255,.03);
  opacity:0;transition:opacity .3s;
}
.contact-direct-link:hover{
  border-color:rgba(255,255,255,.14);
  transform:translateX(6px);
}
.contact-direct-link:hover::before{ opacity:1; }
.contact-direct-link-icon{
  width:38px;height:38px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
}
.contact-direct-link-text{
  display:flex;flex-direction:column;gap:.08rem;flex:1;
}
.contact-direct-link-name{
  font-family:var(--font-display);font-weight:700;
  font-size:.82rem;color:var(--light);letter-spacing:.01em;
}
.contact-direct-link-val{
  font-size:.7rem;color:var(--dim);font-weight:300;
}
.contact-direct-link-arr{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex-shrink:0;
  color:var(--dim);
  transition:transform .25s cubic-bezier(.16,1,.3,1),color .2s;
}
.contact-direct-link:hover .contact-direct-link-arr{
  transform:translate(3px,-3px);color:var(--accent);
}

/* Méta-infos bas de colonne */
.info-list{
  display:flex;flex-direction:column;gap:.8rem;
  padding-top:2rem;
  border-top:1px solid var(--border);
}
.info-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.info-item:last-child{border-bottom:none;padding-bottom:0}
.info-label{
  font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.info-value{font-size:.82rem;color:var(--off)}

/* COLONNE DROITE, formulaire */
.contact-right-col{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:7rem 4rem 5rem 5rem;
  position:relative;
}

.contact-form-eyebrow{
  font-family:var(--font-display);font-size:.72rem;
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin-bottom:2rem;
  display:flex;align-items:center;gap:.8rem;
}
.contact-form-eyebrow::before{
  content:'';width:20px;height:1px;
  background:var(--dim);display:block;flex-shrink:0;
}

/* Subtle top shine */
.contact-quick-form::before{
  content:'';
  position:absolute;top:0;left:10%;right:10%;
  height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.14),transparent);
  pointer-events:none;z-index:1;
}

/* CTA btn */


/* Legacy, conservé pour compatibilité */


@media(max-width:480px){
  .contact-left-col{padding:4rem 1.2rem 2.5rem}
  .contact-right-col{padding:2.5rem 1.2rem 4rem}
  .contact-h2{font-size:clamp(2rem,8vw,2.8rem)}
}

footer{padding:2rem 3rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}


/* ══════════════════════════════════════════
   SYSTÈME D'ANIMATIONS AU SCROLL, MDG
══════════════════════════════════════════ */

/* ── CE SYSTEME N'EN ETAIT PAS UN, ET IL COUTAIT ──────────────────
   Il y avait ici une regle de base posant `will-change:opacity,
   transform` sur .reveal, .reveal-up, .reveal-left, .reveal-right,
   .reveal-scale, .reveal-fade, .reveal-line et .reveal-cinema, sous
   trois commentaires annoncant « geré par GSAP » : le reveal, les
   delais, le stagger.

   Verifie avant de la retirer : AUCUN GSAP NE LES ANIMAIT. Recherche
   faite sur tous les fichiers .js du projet, la seule occurrence de
   ces classes etait un filet de secours dans accueil.js, qui ne
   s'execute justement QUE si GSAP est absent. Les classes de retard
   .rd1, .rd2 et .rd3, portees par onze elements, n'etaient definies
   nulle part.

   Vingt-six elements de l'accueil portaient donc une couche de
   composition reservee pour toute la duree de la visite, au service
   d'animations qui n'existaient pas. Trois mecanismes veillaient sur
   ce vide — un filet si GSAP manque, une liste de forçage mobile, un
   bloc sous mouvement reduit. Le systeme etait garde de trois cotes
   et n'avait jamais tourne.

   Ces vingt-six elements portent maintenant data-poser ou
   data-couper. Le will-change est pose et RETIRE par motion.js, le
   temps du geste — voir la note en pied de assets/motion.css. */

/* ── Désactiver sur mobile bas de gamme ── */
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  .reveal,.reveal-up,.reveal-left,.reveal-right,
  .reveal-scale,.reveal-fade,.reveal-line {
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
  }
}

/* ── Mobile : will-change:auto, évite les couches GPU qui sont expulsées
   au scroll puis recréées → espace noir + contenu qui réapparaît 1-2s ── */


@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ── MASQUE REVEAL, glisse depuis le bas derrière une ligne invisible ── */
@keyframes maskRevealUp{
  0%  {clip-path:inset(100% 0 0 0);transform:translateY(12px);opacity:0}
  1%  {opacity:1}
  100%{clip-path:inset(0% 0 0 0);transform:translateY(0);opacity:1}
}
@keyframes maskRevealLeft{
  0%  {clip-path:inset(0 0 0 100%);opacity:0}
  1%  {opacity:1}
  100%{clip-path:inset(0 0 0 0%);opacity:1}
}

/* ── LIGNE DÉCORATIVE qui s'étend avant le nom ── */
@keyframes lineGrow{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}

/* ── GLITCH sur le nom ── */
@keyframes glitchMain{
  0%,100%{clip-path:none;transform:translate(0,0)}
  6%  {clip-path:inset(12% 0 72% 0);transform:translate(-3px, 0);color:#ffffff}
  8%  {clip-path:inset(12% 0 72% 0);transform:translate(3px, 0)}
  10% {clip-path:none;transform:translate(0,0);color:inherit}
  18% {clip-path:inset(55% 0 30% 0);transform:translate(3px, 0)}
  20% {clip-path:inset(55% 0 30% 0);transform:translate(-2px,0)}
  22% {clip-path:none;transform:translate(0,0)}
}
@keyframes glitchR{
  0%,100%{opacity:0}
  6%,10% {opacity:.7;transform:translate(4px,0);color:#ff3a3a;clip-path:inset(12% 0 72% 0)}
  8%     {transform:translate(-2px,0)}
  18%,22%{opacity:.6;transform:translate(-4px,0);color:#3adfff;clip-path:inset(55% 0 30% 0)}
  20%    {transform:translate(3px,0)}
}
@keyframes glitchL{
  0%,100%{opacity:0}
  6%,10% {opacity:.5;transform:translate(-4px,0);color:#3adfff;clip-path:inset(12% 0 72% 0)}
  18%,22%{opacity:.5;transform:translate(4px,0);color:#ff3a3a;clip-path:inset(55% 0 30% 0)}
}
/* Fade après glitch */
@keyframes nameRevealFade{
  0%  {opacity:0}
  100%{opacity:1}
}

@keyframes clipReveal{from{clip-path:inset(0 0 100% 0);opacity:0;transform:translateY(14px)}to{clip-path:inset(0 0 0% 0);opacity:1;transform:translateY(0)}}
@keyframes clipRevealLeft{from{clip-path:inset(0 100% 0 0);opacity:0}to{clip-path:inset(0 0% 0 0);opacity:1}}
@keyframes fadeBlur{from{opacity:0;filter:blur(6px);transform:translateY(10px)}to{opacity:1;filter:blur(0px);transform:translateY(0)}}

/* MOBILE MENU */
/* ── MOBILE MENU, Bottom Sheet iOS style ── */
/* Overlay sombre derrière */
.mob-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.72);
  z-index:198;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
  will-change:opacity;
}
.mob-overlay.open{opacity:1;pointer-events:all}

.mob-menu{
  position:fixed;
  bottom:0;left:0;right:0;
  top:auto;
  background:#0d0d0d;
  border-top:1px solid var(--border);
  border-radius:12px 12px 0 0;
  z-index:199;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  padding:0 0 env(safe-area-inset-bottom,0px);
  opacity:1;
  pointer-events:none;
  transform:translateY(100%) translateZ(0);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  will-change:transform;
  display:flex;
  max-height:88dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.mob-menu.open{transform:translateY(0) translateZ(0);pointer-events:all}

/* Poignée de glissement style iOS */
.mob-handle{
  width:36px;height:4px;border-radius:4px;
  background:rgba(255,255,255,.2);
  margin:14px auto 0;flex-shrink:0;
}

/* Header sheet */
.mob-sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem .75rem;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
/* Logo */
.mob-menu-logo{
  font-family:var(--font-display);font-weight:700;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--light);text-decoration:none;
  position:static;
}
/* Bouton fermer */
.mob-close{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.08);border:none;
  color:var(--off);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;position:static;padding:0;
  flex-shrink:0;
}
.mob-close:hover{background:rgba(255,255,255,.14);color:var(--light)}

/* Liens, liste compacte, pas centrée */
.mob-links-list{
  display:flex;flex-direction:column;
  padding:.5rem 0;
  flex-shrink:0;
}
.mob-nav-head{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);padding:.75rem 1.5rem .25rem;flex-shrink:0;
}
.mob-num{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  color:var(--dim);letter-spacing:.08em;
  min-width:2rem;flex-shrink:0;transition:color .15s;
}
.mob-menu a{
  font-family:var(--font-display);
  font-size:.95rem;font-weight:700;
  color:var(--off);
  text-decoration:none;
  letter-spacing:.02em;
  line-height:1;
  transition:color .15s,background .15s;
  display:flex;align-items:center;gap:.5rem;justify-content:flex-start;
  padding:.85rem 1.5rem;
  border-bottom:1px solid var(--border);
}
.mob-menu a:last-of-type{border-bottom:none}
.mob-menu a::after{
  content:'→';
  font-size:.75rem;color:rgba(255,255,255,.2);
  margin-left:auto;
  transition:transform .2s,color .2s;
}
.mob-menu a:hover{color:var(--light);background:rgba(255,255,255,.03)}
.mob-menu a:hover .mob-num{color:var(--accent)}
.mob-menu a:hover::after{transform:translateX(3px);color:var(--accent)}
.mob-menu a:active{background:rgba(255,255,255,.06)}

/* Séparateur */
.mob-divider{height:1px;background:rgba(255,255,255,.06);margin:.25rem 0}

/* Bas du menu */
.mob-menu-bottom{
  display:flex;flex-direction:row;align-items:center;
  gap:.75rem;padding:1rem 1.5rem 1.25rem;
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.mob-lang-toggle{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:9999px;
  padding:.45rem 1rem;
  font-family:var(--font-display);font-size:.68rem;font-weight:700;
  letter-spacing:.1em;color:var(--off);
  cursor:pointer;transition:all .2s;
}
.mob-lang-toggle:hover,.mob-lang-toggle.active{
  background:var(--accent);border-color:var(--accent);color:var(--black);
}
.mob-cta{
  flex:1;
  font-family:var(--font-display);font-size:.75rem;font-weight:700;
  color:var(--black);background:var(--accent);
  padding:.6rem 1.2rem;border-radius:9999px;
  text-decoration:none;letter-spacing:.04em;
  transition:opacity .2s;white-space:nowrap;
  text-align:center;
}
.mob-cta:hover{opacity:.88}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
}


/* ── TRÈS PETIT MOBILE (< 480px) : conserver le split gauche/droite ── */
@media(max-width:480px){
  #hero{flex-direction:column !important;min-height:100dvh;position:relative;overflow:hidden}
  
  
  
  
  
  
  
}
@media(max-width:640px){
  .nav-logo{font-size:.65rem;letter-spacing:.04em}
  /* .hero-name @640px white-space, absorbé dans patch §8 L7946 */
  
  
  /* .hero-sub font-size @480px, couvert par @640px L3146 */
  
  /* ── Collabs grid → carousel horizontal sur mobile ── */
  
  
  .work-card{width:80vw}
  .cov-card{width:80vw}
  
  
  
  .info-list{gap:.7rem}
  /* .hero-sub @480px border+padding, couverts par base HUD (border-left:none) et @640px */
  /* .hero-handle @480px, couvert par @640px canonique */
}


/* ── SECTION TITLE/SUBTITLE SPACING ── */
.svc-h2,.cov-h2,.motion-title,.about-title,.work-h2{margin-bottom:1.2rem}


/* ── TRUST LOGO UNIFORM FILTER ── */


/* ── SVC CARD BACKGROUNDS, remplacer les images hors-sujet ── */
a,button,.ac-card,.svc-card,.trust-item,.sk,.soc-item a,.tool,.work-card,.cov-card,.modal-box,.pack-card,.adv-card,.about-photo-wrap,.process-step,.cond-item{transition-timing-function:cubic-bezier(.16,1,.3,1)}

/* Fade-in sections au scroll, géré par le système reveal global */

/* Ripple au clic */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.1);transform:scale(0);animation:ripple-anim .6s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none}
@keyframes ripple-anim{to{transform:scale(4);opacity:0}}

/* Hover links fluides, propriétés ciblées (perf mobile) */
a,button{transition:color .3s cubic-bezier(.16,1,.3,1),background-color .3s cubic-bezier(.16,1,.3,1),opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),border-color .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
/* ── PERF MOBILE : désactiver will-change coûteux, évite layers GPU expulsés au scroll ── */


/* Cards */
/* .svc-card transition, absorbée dans §patch L3473 (transition spécifique) */
/* .trust-item et .tool retirés de ce groupe, leur transition est définie dans leur base */


/* Scroll smooth entre sections */
/* Staggered reveal for trust grid */


/* Nav link underline animation */
.nav-links a::after{content:'';display:block;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .3s cubic-bezier(.16,1,.3,1);transform-origin:left}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
/* Hero section fade improvement */
/* .ac-card transition + :hover, absorbés dans §patch L3659-3662 (!important) */
/* Reveal: voir système global */

/* ── MODAL SERVICES ── */

.modal-overlay{position:fixed;inset:0;background:rgba(6,6,6,.88);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;visibility:hidden;transition:opacity .4s cubic-bezier(.16,1,.3,1),visibility .4s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-box{background:var(--surface);border:1px solid var(--border2);border-radius:12px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;padding:2.5rem;position:relative;transform:translateY(24px) scale(.97);transition:transform .45s cubic-bezier(.16,1,.3,1);scrollbar-width:none}
.modal-box::-webkit-scrollbar{display:none}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-close{position:absolute;top:1.25rem;right:1.25rem;width:36px;height:36px;border-radius:50%;border:1px solid var(--border2);background:var(--surface2);color:var(--off);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;font-size:.85rem}
.modal-close:hover{background:var(--accent);color:var(--black);border-color:var(--accent)}


@media(max-width:640px){
  .modal-box{padding:1.75rem;border-radius:12px;max-height:92vh}
  
  
  
  
}

/* About photo slow reveal */

.about-photo-animated.visible img{
  transform:scale(1);
}
@media(hover:hover){
}


/* ── LOADER LOGO-JAUGE ── */
#loader{position:fixed;inset:0;z-index:99999;background:var(--black);display:flex;align-items:center;justify-content:center;pointer-events:all;overflow:hidden}
.loader-logo-stack{position:relative;width:clamp(130px,16vw,190px);opacity:0;transform:scale(.94);transition:opacity .5s ease,transform .9s cubic-bezier(.16,1,.3,1)}
#loader.ready .loader-logo-stack{opacity:1;transform:scale(1)}
.loader-logo-stack img{width:100%;height:auto;display:block}
.loader-logo-ghost{opacity:.13;filter:grayscale(1) brightness(1.4)}
.loader-logo-fill{position:absolute;inset:0;clip-path:inset(100% 0 0 0);filter:brightness(1.12) drop-shadow(0 0 18px rgba(var(--accent-rgb),.35));transition:clip-path .12s linear}
#loader.done{transform:translateY(-100%);pointer-events:none;transition:transform .6s cubic-bezier(.76,0,.18,1)}
#loader.done .loader-logo-stack{transform:scale(1.05);transition:transform .6s ease}
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */.loader-logo-stack{opacity:1;transform:none;transition:none}}

/* ── SECTION NUMBERS ── */
.sec-num{position:absolute;top:2rem;right:3rem;font-family:var(--font-display);font-weight:700;font-size:clamp(4rem,8vw,9rem);color:rgba(255,255,255,.03);line-height:1;letter-spacing:-.02em;pointer-events:none;user-select:none;z-index:0}


/* ── PROCESS ── */
#process{padding:5rem 3rem;border-bottom:1px solid var(--border);background:var(--black);position:relative;overflow:hidden}


/* Cases alternées, 2 et 4 en accent */


/* Conditions bloc */
/* ── CONDITIONS REPENSÉES ── */


@media(max-width:640px){
  
  #process{padding:3rem 1.5rem;overflow:visible}
  
  
  
  
  
}

/* ── FOOTER RETRAVAILLÉ ── */
/* ── MOTION DESIGN ── */
#motion{padding:5rem 3rem;border-bottom:1px solid var(--border);background:var(--dark);position:relative;overflow:hidden}
#motion::before{content:'';position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1536240478700-b869ad10e128?w=1400&q=80');background-size:cover;background-position:center;opacity:.05;pointer-events:none;z-index:0}


@media(max-width:700px){#motion{padding:3rem 1.5rem}}


/* Fullscreen video overlay */
/* ══════════════════════════════════════════════════════════════════
   PLAYER MDG — machine à états
   ──────────────────────────────────────────────────────────────────
   Remplace <video controls>. Motif : sur iOS, le bouton plein écran
   des contrôles NATIFS ouvre le lecteur système, qui recouvre
   intégralement l'overlay — donc le bouton × devient inatteignable.
   C'était le vrai piège. Avec des contrôles maison + playsinline,
   la vidéo reste dans notre DOM et le × reste au-dessus, toujours.

   États portés par #motion-fullscreen :
     .open  .is-loading  .is-playing  .is-paused  .is-error
   ══════════════════════════════════════════════════════════════════ */
#motion-fullscreen{
  visibility:hidden;
  opacity:0;
  position:fixed;inset:0;z-index:99999;
  background:rgba(0,0,0,.96);
  display:flex;flex-direction:column;
  transition:opacity .2s ease, visibility .2s ease;
  touch-action:none;               /* le swipe de fermeture nous appartient */
}
#motion-fullscreen.open{visibility:visible;opacity:1;}

/* ── Barre haute : bandeau dédié, la vidéo ne l'atteint jamais ──
   Dégradé pour que le × garde son contraste sur une image claire. */
#mfs-topbar{
  position:relative;z-index:6;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:calc(env(safe-area-inset-top,0px) + .75rem) 1rem .75rem;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0));
  pointer-events:none;             /* seuls les enfants captent */
}
#mfs-topbar > *{pointer-events:auto;}

#motion-fullscreen-close{
  width:48px;height:48px;flex:0 0 48px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s,transform .2s,border-color .2s;
}
#motion-fullscreen-close:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34);}
#motion-fullscreen-close:active{transform:scale(.94);}

#motion-fullscreen-counter{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  font-variant-numeric:tabular-nums;
}
#motion-fullscreen-counter[hidden]{display:none!important;}

/* ── Scène ── */
#mfs-stage{
  flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 1rem;
  will-change:transform;
}
#motion-fullscreen-inner{
  position:relative;
  /* --mfs-ar est pose par le JS des que les metadonnees de la video sont
     lues. Le cadre epouse donc le format reel du film : le travail motion de
     MDG est majoritairement vertical (9:16), l'enfermer dans un 16:9 le
     reduisait a une bande centrale bordee de noir.
     C'est la HAUTEUR qui pilote : avec width:100% la largeur etait imposee et
     l'aspect-ratio n'avait plus aucun effet. */
  height:100%;width:auto;
  max-width:min(1100px, 100%);max-height:100%;
  aspect-ratio:var(--mfs-ar, 16/9);
  border-radius:12px;overflow:hidden;
  background:#000;
  box-shadow:0 40px 120px rgba(0,0,0,.8);
}
#motion-fullscreen-content{position:absolute;inset:0;}
#motion-fullscreen-content video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000;display:block;
}

/* ── Poster : visible tant qu'on ne joue pas ── */
#mfs-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:1;
  transition:opacity .3s ease;
}
/* LE POSTER EST AU-DESSUS DE LA VIDEO (z-index:1, elle n'en a aucun).
   Sans cette regle il ne s'efface jamais : on entend le son, on voit
   l'image fixe. Retiree par la purge du CSS mort — `is-playing` est
   pose par le script, et compose par concatenation (`'is-' + s`) :
   aucune analyse du balisage ne pouvait le voir. */
#motion-fullscreen.is-playing #mfs-poster,
#motion-fullscreen.is-paused  #mfs-poster{opacity:0;pointer-events:none;}


/* ── Couche centrale : play / chargement / erreur ── */
#mfs-center{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
#mfs-center > *{pointer-events:auto;}

/* Voile de pause : rend l'etat identifiable au premier coup d'oeil et
   garantit le contraste du bouton central sur n'importe quelle image.
   Sans lui, un bouton blanc a 14% disparaissait sur une frame claire. */
#motion-fullscreen.is-paused #mfs-center{
  background:rgba(0,0,0,.34);
  transition:background .25s ease;
}

/* L'ERREUR EN DEMANDE PLUS QUE LA PAUSE, et elle n'en avait aucun.
   La pause n'a qu'un bouton a detacher. L'erreur pose une PHRASE, en
   gris (--off), et le poster reste a pleine opacite derriere elle —
   rien ne l'efface dans cet etat, a dessein : on garde l'oeuvre a
   l'ecran. Sur une vignette claire, un drapeau rouge et jaune par
   exemple, « Cette video n'a pas pu etre chargee » devenait illisible.
   Meme constat que deux etats plus haut, meme remede, un peu plus
   appuye parce qu'il porte du texte et non un contour. */
#motion-fullscreen.is-error #mfs-center{
  background:rgba(0,0,0,.62);
}

#mfs-play{
  width:76px;height:76px;border-radius:50%;
  background:rgba(0,0,0,.42);
  border:1.5px solid rgba(255,255,255,.72);
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s;
}
#mfs-play:hover{background:rgba(0,0,0,.58);border-color:#fff;transform:scale(1.06);}
#mfs-play:active{transform:scale(.95);}
#mfs-play svg{margin-left:4px;}
/* Le gros bouton play ne sert qu'à l'aperçu et à la pause. */
#motion-fullscreen.is-loading #mfs-play,
#motion-fullscreen.is-playing #mfs-play,
#motion-fullscreen.is-error   #mfs-play{display:none;}

#mfs-spinner{
  width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  border-top-color:var(--accent);
  animation:mfsSpin .7s linear infinite;
  display:none;
}
#motion-fullscreen.is-loading #mfs-spinner{display:block;}
@keyframes mfsSpin{to{transform:rotate(360deg)}}

#mfs-error{
  display:none;flex-direction:column;align-items:center;gap:1rem;
  text-align:center;padding:1.5rem;max-width:22rem;
}
/* Sans elle, une video qui echoue n'affiche rien du tout. */
#motion-fullscreen.is-error #mfs-error{display:flex;}

#mfs-error-msg{
  font-family:var(--font-body);font-size:.9rem;color:var(--off);line-height:1.5;
}
#mfs-retry{
  font-family:var(--font-display);font-size:.74rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.85rem 1.6rem;border-radius:9999px;
  background:var(--accent);border:none;color:var(--black);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .2s,filter .2s;
}
#mfs-retry:hover{filter:brightness(1.08);}
#mfs-retry:active{transform:scale(.96);}

/* ── Contrôles bas ──
   Masqués pendant la lecture après inactivité, toujours là en pause. */
#mfs-controls{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;flex-direction:column;gap:.35rem;
  padding:2.5rem .85rem .7rem;
  background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,0));
  opacity:0;visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}

/* LA SEULE REGLE QUI MONTRE LES CONTROLES. Les deux suivantes ne font
   que les cacher selon l'etat. Sans celle-ci la barre restait a
   opacity:0 en lecture comme en pause : ni bouton pause, ni barre de
   progression, ni volume, ni bouton plein ecran — jamais, sur aucune
   video. La croix, elle, vit dans #mfs-topbar et n'a jamais bouge :
   on pouvait toujours sortir. */
#motion-fullscreen.is-playing #mfs-controls,
#motion-fullscreen.is-paused  #mfs-controls{opacity:1;visibility:visible;}
#motion-fullscreen.is-playing.ctl-hidden #mfs-controls{opacity:0;visibility:hidden;}
#motion-fullscreen.is-loading #mfs-controls,
#motion-fullscreen.is-error   #mfs-controls{opacity:0;visibility:hidden;}

/* Timeline : 3px visibles, 20px de zone tactile */
#mfs-timeline{
  position:relative;height:20px;cursor:pointer;
  display:flex;align-items:center;
  touch-action:none;
}
#mfs-track{
  position:relative;width:100%;height:3px;border-radius:4px;
  background:rgba(255,255,255,.22);overflow:visible;
}
#mfs-buffered{
  position:absolute;left:0;top:0;height:100%;width:0;
  background:rgba(255,255,255,.3);border-radius:4px;
}
#mfs-progress{
  position:absolute;left:0;top:0;height:100%;width:0;
  background:var(--accent);border-radius:4px;
}
#mfs-knob{
  position:absolute;top:50%;left:0;
  width:12px;height:12px;border-radius:50%;
  background:var(--accent);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .18s cubic-bezier(.16,1,.3,1);
}
#mfs-timeline:hover #mfs-knob,
#mfs-timeline.scrubbing #mfs-knob{transform:translate(-50%,-50%) scale(1);}

#mfs-row{
  display:flex;align-items:center;gap:.35rem;
}
.mfs-btn{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  background:transparent;border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .2s,transform .2s;
}
.mfs-btn:hover{background:rgba(255,255,255,.12);}
.mfs-btn:active{transform:scale(.92);}
#mfs-time{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums;
  margin-left:.35rem;white-space:nowrap;
}
#mfs-spacer{flex:1 1 auto;}
#mfs-volwrap{display:flex;align-items:center;gap:.3rem;}
#mfs-vol{
  width:0;opacity:0;
  transition:width .25s cubic-bezier(.16,1,.3,1),opacity .2s;
  accent-color:var(--accent);
  cursor:pointer;
}
#mfs-volwrap:hover #mfs-vol,
#mfs-vol:focus-visible{width:70px;opacity:1;}

/* ── Pied : titre + artiste + navigation ── */
#mfs-footer{
  position:relative;z-index:6;flex:0 0 auto;
  display:flex;align-items:center;gap:1rem;
  padding:.85rem 1rem calc(env(safe-area-inset-bottom,0px) + .9rem);
}
#mfs-meta{flex:1 1 auto;min-width:0;text-align:center;}
#motion-fullscreen-title{
  font-family:var(--font-display);font-size:.85rem;font-weight:700;
  color:var(--light);letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#motion-fullscreen-artist{
  font-size:.72rem;color:var(--accent);margin-top:.2rem;
  font-family:var(--font-body);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#motion-fullscreen-prev,
#motion-fullscreen-next{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.8);cursor:pointer;line-height:1;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s,transform .2s,opacity .2s;
}
#motion-fullscreen-prev:hover,
#motion-fullscreen-next:hover{background:rgba(255,255,255,.18);transform:scale(1.08);}
#motion-fullscreen-prev:active,
#motion-fullscreen-next:active{transform:scale(.94);}
#motion-fullscreen-prev:disabled,
#motion-fullscreen-next:disabled{opacity:.22;cursor:default;pointer-events:none;}
#motion-fullscreen-prev[hidden],
#motion-fullscreen-next[hidden]{display:none!important;}

/* ── Mobile ── */
@media(max-width:768px){
  #mfs-stage{padding:0;}
  #motion-fullscreen-inner{
    border-radius:0;
    aspect-ratio:auto;height:100%;width:100%;max-width:100%;max-height:none;
  }
  #motion-fullscreen-content video{object-fit:contain;}
  #mfs-controls{padding:2.5rem .6rem .6rem;}
  /* Le bouton muet doit rester atteignable : il mesurait 0x0. Le curseur
   de volume, lui, ne s'ouvre qu'au survol — sur mobile les boutons
   materiels font le travail, un curseur y serait du bruit. */
#mfs-volwrap{display:flex;}          /* volume = boutons physiques sur mobile */
  #mfs-time{font-size:.68rem;}
  #motion-fullscreen-title{font-size:.8rem;}
  #mfs-footer{padding:.7rem .75rem calc(env(safe-area-inset-bottom,0px) + .75rem);}
}

/* ── Poignée de swipe : affordance de fermeture au pouce ── */
#mfs-grab{
  display:none;
  width:36px;height:4px;border-radius:4px;
  background:rgba(255,255,255,.28);
  margin:0 auto;
}
@media(hover:none){
  #mfs-grab{display:block;}
}

@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  #motion-fullscreen,#mfs-stage,#mfs-poster,#mfs-controls,
  #mfs-play,#mfs-knob,.mfs-btn{transition:none!important;}
  #mfs-spinner{animation-duration:1.4s;}
}
.motion-thumb{cursor:pointer}
.motion-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.motion-thumb:hover img{transform:scale(1.04)}

.motion-thumb:hover .motion-play{background:rgba(0,0,0,.5)}

.motion-thumb:hover .motion-play svg{transform:scale(1.12)}


@media(max-width:700px){
  #motion{padding:3rem 1.25rem}
  
  
  
}


/* ── AWARDS ── */
#awards{padding:5rem 3rem;background:var(--dark);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
#awards::before{content:'';position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1400&q=80');background-size:cover;background-position:center;opacity:.04;pointer-events:none;z-index:0}


/* ══════════════════════════════════════
   FOOTER, redesign propre desktop + mobile
════════════════════════════════════════ */
/* ═══════════════════════════════════════
   FOOTER REDESIGN, MDG Creative Studio
   ═══════════════════════════════════════ */
footer {
  background: #080808;
  border-top: 1px solid var(--border);
  padding: 0;
}

/* Ligne décorative top */
footer::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 35%, rgba(255,255,255,.06) 65%, transparent 100%);
}

/* ── GRILLE : 3 colonnes desktop ── */
.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.footer-brand {
  padding: 3rem 3rem 2.5rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.footer-contact-group {
  padding: 3rem 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: space-between;
}

/* ── LOGO ── */
.footer-brand .f-logo-wrap {
  display: flex; align-items: center; gap: .7rem;
}
.footer-brand .f-logo-img {
  height: 18px; width: auto; display: block;
  opacity: .6;
}
.footer-brand .f-logo-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: .68rem; color:var(--dim);
  letter-spacing: .14em; text-transform: uppercase;
}

/* ── Description brand ── */
.footer-brand-desc {
  font-size: .78rem;
  color:var(--dim);
  font-weight: 300;
  line-height: 1.75;
  max-width: 340px;
}

/* ── Socials ── */
.footer-brand .f-socials {
  display: flex; gap: .4rem; flex-wrap: wrap;
}
.footer-brand .f-socials a {
  width: 36px; height: 36px; border-radius: 12px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color:var(--dim); text-decoration: none;
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
.footer-brand .f-socials a:hover {
  background: #fff; color: #000; border-color: #fff;
  box-shadow: 0 4px 16px rgba(255,255,255,0.14);
}

/* ── Contact labels ── */
.f-nav-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color:var(--dim);
  margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: .6rem;
}
.f-nav-title::after {
  content: '';
  flex: 1; height: 1px;
  background: rgba(255,255,255,.06);
  max-width: 60px;
}

.f-contact-list {
  display: flex; flex-direction: column; gap: 1rem;
  flex: 1; margin-bottom: 2rem;
}
.f-contact-item {
  display: flex; align-items: flex-start; flex-direction: column;
  gap: .18rem; text-decoration: none; color: inherit;
}
.f-contact-lbl {
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase;
  color:var(--dim); font-weight: 700;
}
.f-contact-val {
  font-size: .82rem; color: rgba(255,255,255,.65);
  font-weight: 300; transition: color .2s; letter-spacing: .01em;
}
.f-contact-item:hover .f-contact-val { color: #fff; }

/* ── CTA buttons ── */
.f-footer-cta {
  display: flex; gap: .5rem; flex-wrap: nowrap;
}
.f-cta-btn-primary,
.f-cta-btn-secondary {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .65rem 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
  white-space: nowrap;
  flex: 1; justify-content: center;
}
.f-cta-btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--black);
}
.f-cta-btn-primary:hover {
  background: #EEFF8A;
  border-color: #EEFF8A;
  box-shadow: 0 4px 20px rgba(var(--accent-rgb),.25);
}
.f-cta-btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: rgba(255,255,255,.65);
}
.f-cta-btn-secondary:hover {
  border-color: rgba(255,255,255,.28);
  color: #fff;
  background: rgba(255,255,255,.05);
}

/* ── Bottom bar ── */
.footer-bottom {
  padding: 1rem 3rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.footer-bottom p,
.footer-bottom a {
  font-size: .72rem; color:var(--dim);
  font-weight: 300; text-decoration: none;
  letter-spacing: .05em; transition: color .2s;
}
.footer-bottom a:hover { color: rgba(255,255,255,.55); }

/* ── MOBILE ── */
@media(max-width:768px) {
  .footer-main {
    grid-template-columns: 1fr;
  }
  .footer-brand {
    padding: 2.25rem 1.5rem 2rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
    gap: 1.5rem;
  }
  .footer-contact-group {
    padding: 2rem 1.5rem;
    gap: 1.5rem;
  }
  .f-footer-cta {
    flex-direction: row;
  }
  .footer-bottom {
    flex-direction: column;
    gap: .3rem;
    text-align: center;
    padding: .9rem 1.5rem;
  }
  .footer-brand-desc { display: none; }
}

/* ── STAT COUNTER ── */


/* ── TICKER NAV ── */


.nav-ticker-inner .tick-sep{color:rgba(0,0,0,.4);font-size:.72rem;padding:0;flex-shrink:0}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}


/* ── SCROLL INDICATOR ── */
.scroll-indicator{
  position:fixed;right:1.5rem;top:50%;
  transform:translateY(-50%);
  z-index:90;
  display:flex;flex-direction:column;
  gap:.5rem;align-items:flex-end;
}
.scroll-dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--border2);
  transition:all .35s cubic-bezier(.16,1,.3,1);
  cursor:pointer;
  position:relative;
}
.scroll-dot.active{
  background:var(--accent);
  width:4px;height:16px;border-radius:4px;
  box-shadow:0 0 8px rgba(255,255,255,0.28);
}
.scroll-dot-label{
  position:absolute;right:10px;top:50%;
  transform:translateY(-50%);
  font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);opacity:0;
  white-space:nowrap;
  transition:opacity .2s,color .2s;
  pointer-events:none;
  padding-right:4px;
}
.scroll-dot.active .scroll-dot-label{opacity:1;color:var(--accent)}
.scroll-dot:hover .scroll-dot-label{opacity:1}


/* ── SAFE AREA INSETS (iPhone notch/home indicator) ── */
@supports(padding:max(0px)){
  body{padding-bottom:env(safe-area-inset-bottom,0)}
  .cpop{padding-bottom:calc(2rem + env(safe-area-inset-bottom,0))}
  #quick-nav{bottom:max(1rem, env(safe-area-inset-bottom,0))}
  #backToTop{bottom:max(1rem, env(safe-area-inset-bottom,0)) !important}
}

/* ── MOBILE NAV LOGO: hide subtitle on very small screens ── */
@media(max-width:380px){
  .nav-logo{font-size:.85rem;letter-spacing:.05em}
}

/* ── IMPROVE TOUCH TARGETS ── */


/* ── HERO PHOTO OVERLAY: stronger gradient on mobile for text legibility ── */


/* ── ABOUT SECTION: better mobile layout ── */
@media(max-width:640px){
  
  .sec-label{font-size:.72rem;letter-spacing:.22em;margin-bottom:2rem}
  
  
  
  
}

/* ── TRUST LOGOS: better display on mobile ── */


/* ── COLLABS SECTION MOBILE ── */


/* ── SECTION AWARDS MOBILE ── */


/* ── PRESS & TESTIMONIALS MOBILE ── */


/* ── CONTACT SECTION MOBILE ── */
@media(max-width:480px){
  
  .info-value{font-size:.82rem}
}

/* ── FOOTER MOBILE ── */
@media(max-width:480px){
  .footer-brand p{font-size:.78rem}
  
  
  .footer-bottom{padding:.9rem 1.25rem;gap:.5rem}
  .footer-bottom p{font-size:.72rem}
  .f-socials a{width:32px;height:32px;font-size:.65rem}
}

/* ── GRAIN TEXTURE ── */
.grain-overlay{position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");background-size:200px 200px;animation:grainAnim 1s steps(2) infinite}
@keyframes grainAnim{0%{transform:translate(0,0)}25%{transform:translate(-3%,-4%)}50%{transform:translate(2%,3%)}75%{transform:translate(-1%,2%)}100%{transform:translate(3%,-1%)}})
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */.grain-overlay{animation:none}}

/* ── MAGNETIC BUTTONS ── */
.magnetic{display:inline-block;transition:transform .4s cubic-bezier(.16,1,.3,1)}

/* ── PROGRESS BAR SCROLL ── */
.scroll-progress{position:fixed;top:0;left:0;width:0%;height:2px;background:var(--accent);z-index:10000;transition:width .1s linear;transform-origin:left}


/* ══════════════════════════════════════════════════════════════════
   TEXT REVEAL, ET LE TITRE QUI N'EST JAMAIS APPARU
   ──────────────────────────────────────────────────────────────────
   Le texte partait a translateY(105%) dans un parent en
   overflow:hidden — pousse hors de son propre cadre — et attendait
   `.reveal.visible` pour remonter.

   Cette classe n'est jamais posee. L'observateur qui l'ajoute vit dans
   atelier.html ; il n'a jamais ete porte sur la page d'accueil. La
   regle est arrivee sans son moteur.

   Consequence, sur telephone comme sur ordinateur : « On cree /
   quelque chose ? », le titre de la section contact, ne s'est jamais
   affiche. Deux spans mesures a 30 px et 46 px de decalage pour 28 et
   44 px de hauteur. Invisibles depuis le premier jour.

   Le repos redevient donc l'etat visible. L'entree en scene n'est pas
   perdue pour autant : sur ordinateur GSAP anime deja .contact-h2
   entiere (opacite et y), et sur telephone les animations d'entree
   sont coupees de toute facon. Ce glissement interieur faisait double
   emploi avec l'un et etait ignore par l'autre.

   La transition reste : elle ne coute rien tant que rien ne la
   declenche, et elle servira le jour ou un observateur arrivera.
   ══════════════════════════════════════════════════════════════════ */
.text-reveal{overflow:hidden;display:block}
.text-reveal-inner{display:block;transform:translateY(0);transition:transform .9s cubic-bezier(.16,1,.3,1)}

/* Stagger sur les titres hero */
/* .hero-name overflow:visible, déjà dans base L841 */


/* ── PRESS / MENTIONS ── */
#press{padding:5rem 3rem;border-bottom:1px solid var(--border);background:var(--dark);position:relative;overflow:hidden}
#press .container{max-width:860px}
#press::before{content:'';position:absolute;inset:-6%;background-image:url('/media/img/WhatsApp_Image_2024-08-24_at_02.04.52_hfk11q.jpg');background-size:cover;background-position:center 30%;opacity:.18;pointer-events:none;z-index:0;filter:grayscale(20%) contrast(1.08) brightness(.85);animation:press-drift 22s ease-in-out infinite alternate;transform-origin:center}
@keyframes press-drift{0%{transform:scale(1.0) translateX(0)}100%{transform:scale(1.05) translateX(-.5%)}}
#press::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,14,14,.82) 0%,rgba(14,14,14,.55) 35%,rgba(14,14,14,.82) 100%),radial-gradient(ellipse at 60% 40%,rgba(255,255,255,0.02) 0%,transparent 55%);pointer-events:none;z-index:0}


/* ── ILS PARLENT DE MOI ── */
#testimonials{padding:5rem 3rem;border-bottom:1px solid var(--border);background:var(--dark);position:relative;overflow:hidden}
#testimonials::before{
  content:'';position:absolute;inset:-5%;
  background-size:cover;background-position:center 25%;
  opacity:.1;pointer-events:none;z-index:0;
  filter:grayscale(25%) contrast(1.06) brightness(.82);
  animation:testimonials-drift 24s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes testimonials-drift{0%{transform:scale(1.0) translateX(0)}100%{transform:scale(1.05) translateX(-.4%)}}

@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */#testimonials::before{animation:none;transform:none}}

/* Colonne gauche sticky */


/* Author card, glassmorphism */


/* Stats, glassmorphism */


/* Colonne droite, vidéos */


/* Thumbnail cliquable YouTube */


/* ── DISTORSION HOVER IMAGES ── */
.work-card .work-img,
.cov-card .cov-img,
.ac-card .ac-photo{
  transition:transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease, clip-path .5s cubic-bezier(.16,1,.3,1) !important;
}
.work-card:hover .work-img{
  transform:scale(1.08) !important;
  filter:brightness(.55) saturate(1.1) !important;
}
.cov-card:hover .cov-img{
  transform:scale(1.06) !important;
  filter:brightness(.45) saturate(1.15) !important;
}

/* ── EASTER EGG ── */
#easter-egg{
  position:fixed;inset:0;z-index:99998;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--black);
  opacity:0;visibility:hidden;
  /* Ferme, cette couche couvre tout l'ecran en z-index 99998. Elle ne
     doit rien intercepter : les autres couches du site (#ig-artist-popup,
     .spotify-warn-overlay) le declarent deja, celle-ci ne s'appuyait que
     sur visibility:hidden. Une seule ligne de trop ailleurs, et un
     paragraphe invisible avalait les taps de toute la page. */
  pointer-events:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),visibility .5s;
}
#easter-egg.show{opacity:1;visibility:visible;pointer-events:auto}
.ee-content{text-align:center;position:relative}
.ee-logo{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,10vw,12rem);color:var(--accent);letter-spacing:.04em;line-height:1;animation:eePulse 1.5s ease-in-out infinite alternate;display:block;max-width:90vw;overflow:hidden;word-break:break-word}
@keyframes eePulse{0%{text-shadow:0 0 40px rgba(255,255,255,0.17)}100%{text-shadow:0 0 80px rgba(255,255,255,0.39),0 0 120px rgba(255,255,255,0.17)}}
.ee-sub{font-family:var(--font-accent);font-style:italic;font-weight:400;font-size:clamp(.75rem,3.5vw,1.3rem);color:var(--off);margin-top:1rem;opacity:0;animation:eeSlide .8s .3s ease forwards;max-width:85vw;margin-left:auto;margin-right:auto}
@keyframes eeSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.ee-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.ee-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ee-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);animation:eeFloat linear infinite}
@keyframes eeFloat{0%{transform:translateY(100vh) rotate(0deg);opacity:1}100%{transform:translateY(-100px) rotate(720deg);opacity:0}}


/* ── CURSOR TRAIL ── */
.cursor-trail{position:fixed;pointer-events:none;z-index:9996;border-radius:4px;overflow:hidden;opacity:0;transition:opacity .3s;will-change:transform}
.cursor-trail img{width:100%;height:100%;object-fit:cover;display:block}

/* ── IMAGE FOLLOW CURSOR (artistes collabs) ── */
.artist-preview{position:fixed;pointer-events:none;z-index:9995;width:180px;height:220px;border-radius:12px;overflow:hidden;opacity:0;transform:scale(.85) rotate(-3deg);transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);will-change:transform}
.artist-preview img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.artist-preview.show{opacity:1;transform:scale(1) rotate(-1deg)}
/* Noms artistes hoverable */
.collabs-marquee span:not(.sep){cursor:default;transition:color .3s}

/* ── HEURE KAOLACK ── */


.nav-avail{display:flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:500;color:var(--muted);letter-spacing:.02em;margin-right:.5rem}
/* ── Indicateur de statut WAVEFORM (remplace le point rond, identité studio musique) ── */
.wave-ind{display:inline-flex;align-items:flex-end;gap:2px;height:11px;flex-shrink:0;line-height:0}
.wave-ind i{width:2px;background:var(--accent);border-radius:4px;display:block}
.wave-ind i:nth-child(1){height:4px}
.wave-ind i:nth-child(2){height:9px}
.wave-ind i:nth-child(3){height:11px}
.wave-ind i:nth-child(4){height:6px}
.wave-ind i:nth-child(5){height:9px}
/* version compacte pour petits contextes (heure, eyebrow) */
.wave-ind.sm{height:9px;gap:1.5px}
.wave-ind.sm i{width:1.5px}
.wave-ind.sm i:nth-child(1){height:3px}
.wave-ind.sm i:nth-child(2){height:7px}
.wave-ind.sm i:nth-child(3){height:9px}
.wave-ind.sm i:nth-child(4){height:5px}
.wave-ind.sm i:nth-child(5){height:7px}
nav.scrolled{background:rgba(10,10,10,.92)}


/* hero-type-wrap base, absorbé dans §8 L7779 */

/* ── HERO PORTFOLIO LINKS ── */
/* base sans !important supprimée, absorbée dans HUD base L654-672 + patch §8 L8106 */


/* ── HERO CTAs (boutons) ── */


/* .hero-btn-primary:hover, intégré dans la définition ci-dessus */


/* .hero-btn-secondary:hover, intégré dans la définition ci-dessus */
/* ── HERO MINI STATS (cercles) ── */


@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── MOBILE IMPROVEMENTS ── */
@media(max-width:640px){
  /* Hero : photo plein fond, texte en bas */
  #hero{flex-direction:column !important;position:relative;overflow:hidden;min-height:100dvh;display:flex !important}
  
  
  
  
  

  

  /* Nom : jamais coupé */
  /* .hero-name @640px, absorbé dans patch §8 L7946 */
  /* .hero-name-sub @640px, absorbé dans patch §8 L7946 */

  /* CTAs : côte à côte */
  
  /* hero-btn-primary @640px, consolidé dans le bloc @media 640px ci-dessous */
  /* hero-btn-secondary @640px, consolidé dans le bloc @media 640px ci-dessous */

  /* hero-sub : visible sur mobile */
  
  
  
  /* .hero-portfolio-links @640px, absorbé dans patch §8 L8106 */

  
  

  /* Stats bar 3 colonnes en bas, dans le flux, pas en absolute */
  
  
  
  
  
  
}

@media(max-width:480px){
  /* Hero name even smaller */
  /* .hero-name @480px, absorbé dans patch §8 @640px L7946 */
  /* .hero-name-sub @480px, absorbé dans patch §8 @640px L7946 */
  
  /* Popup contact: safe area + scroll */
  .cpop{padding:1.75rem 1.25rem 1.25rem;border-radius:12px 12px 0 0;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .cpop-title{font-size:1.45rem}
  .cpop-sub{font-size:.78rem;margin-bottom:1.25rem}
  .cpop-link{padding:.85rem 1rem;gap:.75rem}
  .cpop-link-icon{width:36px;height:36px;border-radius:12px;flex-shrink:0}
  .cpop-link-icon svg{width:17px;height:17px}
  .cpop-link-name{font-size:.82rem}
  .cpop-link-detail{font-size:.68rem}
  .cpop-links{gap:.6rem}

  /* Motion grid: single col */
  
  /* Quick nav: smaller */
  #quick-nav{bottom:1rem;left:1rem}
  #quick-nav-toggle{font-size:.72rem;padding:.5rem .85rem .5rem .7rem}
  #quick-nav-menu{min-width:170px;border-radius:12px}
  .qn-item{font-size:.75rem;padding:.55rem .8rem}

  /* Work cards: mieux dimensionnés, image 4:5 sans zoom excessif */
  .work-card,.cov-card{width:72vw;max-width:280px}
  .work-meta{padding:1rem 1rem .9rem}
  .work-title{font-size:1rem}
  .work-cat{font-size:.72rem}

  /* Testimonials */
  

  /* Footer */
  .footer-bottom{padding:1rem 1.25rem}
}

/* Touch : work-meta en caption sous la card, pas en overlay */
@media(hover:none){
  /* La card elle-même ne doit pas avoir de gradient résiduel */
  .work-card::after{ opacity:0 !important; }
  .work-overlay{ opacity:0 !important; }

  /* Card en colonne, overflow hidden pour clipper l'image correctement */
  .work-card{
    display:flex;
    flex-direction:column;
    height:auto;
    aspect-ratio:unset;
    overflow:hidden;
    background:var(--surface);
    box-shadow:0 4px 16px rgba(0,0,0,.4);
    border:1px solid var(--border);
    border-radius:var(--r);
  }
  /* L'image : hauteur contrainte pour éviter les sources non-4:5 qui s'étirent */
  .work-card .work-img{
    width:100%;
    height:auto;
    max-height:340px;
    aspect-ratio:4/5;
    object-fit:cover;
    display:block;
    flex-shrink:0;
    border-radius:0;
  }
  /* work-meta sort de l'absolu et devient une caption en dessous */
  .work-meta{
    position:static;
    padding:.7rem .25rem .2rem;
    opacity:1 !important;
    transform:none !important;
    flex-direction:column;
    gap:.2rem;
  }
  .work-cat{
    font-size:.72rem;
    letter-spacing:.14em;
  }
  .work-title{
    font-size:.88rem;
  }
  .work-title em{
    font-size:.72em;
    margin-top:.1rem;
  }
  /* card-bar inutile sur mobile */
  .work-card-bar{ display:none; }
  /* Barre jade permanente sur mobile, contexte sans survol */

  /* Before/After slider : suit le même gabarit que .work-img en mode légende statique */
  .ba-slider{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    max-height:340px;
    aspect-ratio:4/5;
    flex-shrink:0;
  }
  .ba-slider .work-img{ border-radius:0; }
  .ba-tag{ font-size:.58rem; padding:.28rem .55rem; }
  .ba-credit{ display:none; } /* redondant : le nom est déjà dans la légende mobile sous l'image */

}

/* ── TRÈS PETIT MOBILE (< 480px) ── */
@media(max-width:480px){
  /* Hero: colonne sur petit mobile aussi */
  #hero{
    flex-direction:column !important;
    min-height:100dvh;
    position:relative;
    overflow:hidden;
    align-items:stretch;
  }
  /* Photo : plein écran */
  
  
  /* Fondu gauche repoussé à l'extrême gauche */
  
  
  

  /* Texte : prend tout l'espace, stats en-dessous */
  

  /* Nom : taille réduite, jamais coupé */
  /* .hero-name @480px, absorbé dans patch §8 @640px L7946 */
  /* .hero-name-sub @480px, absorbé dans patch §8 @640px L7946 */

  /* .hero-eyebrow @480px, couvert par @640px */

  /* Handle, couvert par @640px canonique */

  /* Type wrap */
  /* .hero-type-wrap @480px, couvert par @640px L3134 */

  /* hero-sub : visible, taille réduite */
  /* .hero-sub @480px, couvert par @640px */

  /* CTAs HUD, empilés, pas côte à côte */
  /* .hero-ctas @480px, couvert par @640px */
  /* hero-btn-secondary @480px, couvert par @640px */

  /* Portfolio links : cachés */
  /* .hero-portfolio-links @480px, absorbé dans @640px patch §8 L8106 */

  /* Stats : grille 1x3 dans le flux */
  
  
  
  
  
  
  

  /* Nav: logo compact, pas de texte fantôme */
  .nav-logo::after{content:none}

  /* Sections padding */
  #about,#services,#process,#contact,#testimonials,#motion,#collabs,#press,#awards{
    padding-left:1rem;padding-right:1rem;
  }
  #work .work-header,#work .work-footer,#covers .cov-header,#covers .cov-footer{
    margin-left:1rem;margin-right:1rem;
  }
  #work .work-track-wrap,#covers .cov-track-wrap{padding-left:1rem;padding-right:1rem}

  /* Process conditions: 1 col */

  /* Footer: réduit */
  .footer-bottom{padding:.85rem 1rem}
  .footer-brand .f-logo{font-size:1.15rem}

  /* Popup contact: safe area + scroll */
  .cpop{padding:1.75rem 1.25rem 1.25rem;border-radius:12px 12px 0 0;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .cpop-title{font-size:1.45rem}
  .cpop-sub{font-size:.78rem;margin-bottom:1.25rem}
  .cpop-link{padding:.85rem 1rem;gap:.75rem}
  .cpop-link-icon{width:36px;height:36px;border-radius:12px;flex-shrink:0}
  .cpop-link-icon svg{width:17px;height:17px}
  .cpop-link-name{font-size:.82rem}
  .cpop-link-detail{font-size:.68rem}
  .cpop-links{gap:.6rem}

  /* Motion grid: single col */

  /* Work cards: mieux dimensionnés, image 4:5 sans zoom excessif */
  .work-card,.cov-card{width:72vw;max-width:280px}
  .work-meta{padding:1rem 1rem .9rem}
  .work-title{font-size:1rem}
  .work-cat{font-size:.72rem}

  /* Testimonials */
  

  /* Footer */
  .footer-bottom{padding:1rem 1.25rem}
}

/* ── SAFE AREA INSETS (iPhone notch/island) ── */
@supports(padding:max(0px)){
  nav{
    padding-top:max(1rem, env(safe-area-inset-top, 1rem));
  }
  .cpop.active{
    padding-bottom:max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1.5rem));
  }
  #quick-nav{
    bottom:max(2rem, calc(env(safe-area-inset-bottom, 0px) + 2rem));
  }
  @media(max-width:480px){
    #quick-nav{
      bottom:max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 1rem));
    }
  }
}

/* ── AMÉLIORATIONS VISUELLES FINALES ── */

/* Scrollbar custom */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--dim);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* Focus visible amélioré pour accessibilité */
/* PAS DE border-radius DANS UNE REGLE DE FOCUS.
   Il y en avait un — 4px — dans les quatre regles de focus du site.
   C'est un vieux reflexe : les navigateurs dessinaient autrefois un
   contour strictement rectangulaire, et on arrondissait l'element pour
   arrondir le contour. Ils ne le font plus depuis longtemps : `outline`
   suit le rayon de l'element.

   Ce qui restait, c'etait le degat. La regle IMPOSE 4px a tout ce
   qu'elle touche — donc elle ecrase le rayon des elements RONDS. Au
   focus, un disque de 140px devenait un carre a coins a peine
   arrondis, et redevenait rond des que le focus partait. C'est ce
   qu'on voyait sur le badge de la section « La preuve », et ca touchait
   aussi les fleches de carrousel, le bouton du menu et les fermetures
   de modales — tous ronds.

   Les quatre regles gardent leur contour vert. Elles ne decident plus
   de la forme de ce qu'elles entourent. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* Sélection texte en accent */
::selection{background:rgba(255,255,255,0.14);color:var(--light)}
::-moz-selection{background:rgba(255,255,255,0.14);color:var(--light)}

/* Image lazy load transition smooth */
img[loading="lazy"]:not(.loaded){
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.5s infinite;
}
img[loading="lazy"].loaded{
  background:none;
  animation:none;
}
@keyframes skeleton-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ── SECTION TRANSITIONS ── */
section{position:relative}
section + section::before{
  content:'';
  display:block;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 20%,rgba(255,255,255,.06) 80%,transparent);
  position:absolute;top:0;left:0;right:0;
  pointer-events:none;
}
/* alternating bg hint */
#about,#process,#collabs,#press,#awards{background:var(--dark)}
#services,#pricing,#portfolio-accordion,#faq{background:var(--black)}


/* ============================================================ */
/* SECTION, Services & Cards */
/* ============================================================ */
/* ── PERF: Hero placeholder prevents black flash ── */
#hero { background: var(--black) !important; }


/* ── GLOBAL GLASS VARIABLES ── */
:root {
  --glass-bg: rgba(14,14,14,0.65);
  --glass-border: var(--border);
  --glass-border-accent: rgba(255,255,255,0.1);
  --glow-accent: rgba(255,255,255,0.06);
  --glass-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --glass-shadow-hover: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08), 0 0 40px rgba(255,255,255,0.03);
}


/* ══ SERVICE CARDS ══ */
/* .svc-card skin glass, fusionné dans définition structurelle L1411 */


/* ══ PRICING / PACK CARDS ══ */

/* Primaires : on laisse leur propre style dominer, override l'override générique */


/* Silver / Gold / Diamond : leurs styles spécifiques ci-dessous prennent le dessus */

/* ══ PROCESS STEPS ══ */
.process-step:not(:nth-child(even)){background:linear-gradient(160deg,rgba(16,16,16,.9) 0%,rgba(10,10,10,.95) 100%)}

/* ══ WORK CARDS ══ */
/* .work-card skin glass, fusionné dans définition de base L1306 */

/* ══ COLLAB AVATARS ══ */
/* .collabs-avatar skin glass, fusionné dans définitions de base L1144/1146 */

/* ══ TESTIMONIALS ══ */
/* .testimonials-sticky skin glass, fusionné dans définition de base L2873 */

/* Ambient glow top-left inside sticky card */


/* ══ CONTACT ══ */
/* .contact-direct-link skin glass, fusionné dans définition de base postérieure L6884/6885 */

/* ══ TRUST ITEMS ══ */
/* .trust-item / :hover skin glass, fusionné dans définitions de base L1276/1277 */

/* ══ FAQ ══ */
/* .faq-item skin glass, fusionné dans définition de base postérieure L6888 */
.faq-item.open{border-color:rgba(255,255,255,0.1);box-shadow:0 0 0 1px rgba(255,255,255,0.02),0 8px 30px rgba(0,0,0,.3)}

/* ══ ROLLOUT ══ */
/* .rollout-card skin glass, fusionné dans définition de base postérieure L5920 */

/* ══ MOBILE MENU ══ */
/* .mob-menu skin glass, fusionné dans définition de base L1803 */

/* ══ PRESS CARD ══ */
/* .press-card skin glass, fusionné dans définition de base L2837 */

/* ══ MODAL ══ */
/* .pack-modal-overlay skin glass, fusionné dans définition de base postérieure L4650 */

/* ══ IG BANNER ══ */

/* ══ BACK TO TOP ══ */
#backToTop{background:rgba(18,18,18,.88);border:1px solid var(--border);transition:bottom .3s cubic-bezier(.16,1,.3,1),opacity .3s,transform .3s,color .2s,border-color .2s}
#backToTop:hover{border-color:var(--accent);box-shadow:0 0 16px rgba(var(--accent-rgb),0.25)}

/* ══ SK (about skills) ══ */
/* .sk / :hover background glass, fusionné dans définitions de base L1118/1119 */

/* ══ AWARD ITEMS ══ */
/* .award-item skin glass, fusionné dans définition de base L2459/2460 */

/* ══ CONDITIONS ITEMS ══ */
/* .cond-item skin glass, fusionné dans définition de base L2325/2333 */

/* ══ CQF (contact form) ══ */
/* .cqf-field input/textarea/select + :focus skin glass, fusionné dans définition de base postérieure L6814/6820 */

/* ══ SKILLS GRID REACTIVE ══ */
/* .skills-grid + .sk-icon skin/transition glass, fusionnés dans définitions de base L1117/1120 */


/* ══ TRUST GRID GLASS ══ */
/* .trust-grid / .trust-item / :hover skin glass, fusionnés dans définitions de base L1275/1276/1277 */

/* ══ AC CARDS (collabs grid) ══ */
/* .ac-card transition glass, fusionné dans définition de base L1207 */


/* ══ WORK/COV ARROWS ══ */
/* .work-arrow / .cov-arrow + :hover skin glass, fusionnés dans définitions de base L1294/1295 et L1373/1374 */

/* ══ TICKER FIX : même logique que le marquee ══ */
/* .nav-ticker-inner animation/will-change + flex-shrink + :hover, fusionnés dans définitions de base L2673/2675/2676 (hover déjà présent L2674) */

/* ══ PRESS CARDS ══ */
/* .press-card transition + :hover, fusionnés dans définition de base L2837/2838 */

/* ══ FOOTER SOCIAL ICONS ══ */
/* .footer-brand .f-socials a + :hover skin glass, fusionné dans définition de base L2538/2545 */

/* ══ MOTION CARDS GLASS ══ */
/* .motion-card + :hover skin glass, fusionné dans définition de base L2370/2371 */

/* ══ FAQ REACTIVE ══ */
/* .faq-q transition glass, fusionné dans définition de base postérieure L6826 */
.faq-item.open .faq-q{padding-left:.25rem}

/* ══ HERO BTNS REACTIVE, fusionné dans les définitions canoniques ci-dessus ══ */

/* ══ SCROLL DOTS GLOW ══ */
/* .scroll-dot.active box-shadow glass, fusionné dans définition de base L2695 */

/* ══ ABOUT PHOTO FRAME ══ */
/* .about-photo-wrap skin glass, fusionné dans définition de base L960 */


/* ══ TOOL TAGS REACTIVE ══ */
/* .tool + :hover transition/transform glass, fusionnés dans définition de base L1125/1126 */


/* ══ OPTIMISATION MOBILE GLOBALE ══ */
@media(max-width:480px){
  /* Container padding réduit sur très petit écran */
  .container{padding-left:1rem !important;padding-right:1rem !important}
  /* Sections padding vertical réduit */
  #about,#services,#process,#pricing,#press,#awards{padding-left:1rem !important;padding-right:1rem !important}
  /* Titres */
  .svc-h2,.about-title,.process-header h2{font-size:clamp(1.4rem,6vw,1.8rem) !important}
  /* Contact grid */
  .contact-quick-form{padding:1.5rem !important;border-radius:12px !important}

  /* Trust grid */
  
  /* Footer */
  .footer-bottom{padding:1rem !important}
  /* Testimonials */
  #testimonials{padding:3rem 1rem !important}
  /* Collabs */
  #collabs{padding:2rem 1rem 3rem !important}
  
}

/* ══════════════════════════════════════════════════════
   FIX MOBILE SCROLL, STABILITÉ TOTALE
   Éléments qui disparaissent + espace noir 1-2s au retour.

   3 causes :
   1. backdrop-filter décoratifs → repaint GPU en cascade au scroll
   2. translateZ(0) sur cards carousel → layers composites expulsés
   3. contain:layout style sur scroll containers → idem

   On conserve nav + modals (fonctionnels).
══════════════════════════════════════════════════════ */


/* ============================================================ */
/* SECTION, Layout, Nav, Hero, Animations */
/* ============================================================ */
/* ── ACCORDION ── */
#portfolio-accordion {
  padding: 3.5rem 0 5rem;
  border-bottom: 1px solid var(--border);
  background: var(--black);
}
#portfolio-accordion .container { max-width: 1220px; margin: 0 auto; padding: 0 3rem; }


.acc-tab.active {
  background: var(--accent);
  color: var(--black);
  box-shadow: 0 4px 16px rgba(255,255,255,0.17);
}
.acc-tab:hover:not(.active) { color: var(--light); }

/* ── SOCIAL PROOF, section fusionnée press + testimonials ── */
#press { padding: 5rem 0; border-bottom: 1px solid var(--border); }


/* ── SP Feature block ── */

/* Glow accent discret coin haut-gauche */

/* Barre top accent */


/* Mot clé mis en valeur */


/* Badge verified, responsive */


/* ══════════════════════════════════════════════
   YT VIDEO CARDS, 4 CARTES UNIFORMES STYLE CAPTURE
   ══════════════════════════════════════════════ */

/* Wrapper principal */


/* Desktop: grille 4 colonnes */


/* Chaque slide = une carte */


/* Dots cachés sur desktop */


/* ── CARTE VIDÉO, exactement comme la capture ── */
.sp-vcard-hero {
  position: relative;
  cursor: pointer;
  background: #0d0d0d;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .35s, box-shadow .35s;
  display: flex;
  flex-direction: column;
}
.sp-vcard-hero:hover {
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 8px 40px rgba(0,0,0,.55);
}

/* ZONE PHOTO, remplit le haut de la carte */


.sp-vcard-hero:hover .sp-vcard-hero-thumb img {
  transform: scale(1.04);
}

/* Badge haut, nom artiste, collé en haut à gauche */


/* Dots de navigation, en bas à droite sur la photo */


.sp-vcard-nav-dot.on {
  background: #fff;
}
/* SOBRE : retrait des badges verts clignotants et des dots décoratifs sur les cartes vidéo (desktop) */

/* ZONE NOIRE BAS, séparée de la photo, pas un overlay */

/* Ligne séparatrice subtile entre photo et zone noire */


/* Nom artiste, taille contrôlée pour éviter le débordement */


/* Description, texte fin en dessous */


/* Description longue, la phrase qui parle de MDG */


/* Rangée bas : play button */


/* Bouton play, cercle comme la capture */

.sp-vcard-hero:hover .sp-vcard-hero-play {
  background: rgba(255,255,255,.88);
  border-color: transparent;
  transform: scale(1.1);
}
.sp-vcard-hero:hover .sp-vcard-hero-play svg { fill: #000; }

/* Masquer les anciens éléments inutilisés */


/* ══════════════════════════════
   LIGHTBOX VIDÉO, FULLSCREEN
   ══════════════════════════════ */
#sp-video-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .38s cubic-bezier(.16,1,.3,1);
}
/* Fond noir + blur */
#sp-video-lb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.94);
}
#sp-video-lb.open {
  opacity: 1;
  pointer-events: all;
}
#sp-video-lb-inner {
  position: relative;
  width: min(900px, 92vw);
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07);
  transform: translateY(18px) scale(.96);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
  z-index: 1;
}
#sp-video-lb.open #sp-video-lb-inner {
  transform: translateY(0) scale(1);
}
/* Iframe YT */
#sp-video-lb iframe {
  width: 100%; height: 100%;
  border: none; display: block;
  border-radius: 4px;
}
/* Poster pré-chargé dans le inner, swap au clic */
#sp-video-lb-poster {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%; height: 100%;
  display: block;
  z-index: 2;
  transition: opacity .3s;
}
#sp-video-lb.loading #sp-video-lb-poster { opacity: 1; }
#sp-video-lb:not(.loading) #sp-video-lb-poster { opacity: 0; pointer-events: none; }

/* Spinner centré pendant le chargement */
#sp-video-lb-spinner {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
#sp-video-lb.loading #sp-video-lb-spinner { opacity: 1; }
#sp-video-lb-spinner span {
  width: 36px; height: 36px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: rgba(255,255,255,.8);
  border-radius: 50%;
  animation: sp-spin .7s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* Bouton fermer, en dehors du inner */
#sp-video-lb-close {
  position: absolute;
  /* Offset VERTICAL : demi-hauteur de la video (16/9), pas la demi-largeur.
     Avec min(450px,46vw) le bouton partait hors ecran au-dessus (top:-52px
     en 1440x900). min(253px,25.9vw) est la valeur deja utilisee par le
     compteur et le bloc meta. */
  top: calc(50% - min(253px, 25.9vw) - 52px);
  right: calc(50% - min(450px, 46vw));
  z-index: 10;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.8);
  font-size: .9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
  line-height: 1;
}
#sp-video-lb-close:hover { background: rgba(255,255,255,.18); transform: scale(1.08); }

/* ── Commande de navigation (assets/carrousel.js) ──
   Elle remplace les deux fleches posees aux bords de l'ecran et le
   compteur "2 / 4" du coin : une seule commande, centree sous la
   video, qui donne aussi l'acces direct a chaque temoignage. */
#sp-video-lb-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(14px, calc(50% - min(253px, 25.9vw) - 62px));
  z-index: 10;
}
/* Sur ecran etroit la formule ci-dessus, calibree pour un compteur texte
   dans un coin, remontait la commande de 18 px SUR la video : elle
   couvrait le nom de la personne qui parle.

   Elle se pose donc en bas — mais AU-DESSUS de la barre d'onglets, qui
   occupe les 56 premiers pixels : plus bas, la commande passait
   dessous. Il reste 237 px entre la video et la barre, la place ne
   manque pas. */
@media (max-width: 700px) {
  #sp-video-lb-nav {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
  }
}


/* Label artiste + titre en bas du lightbox */
#sp-video-lb-meta {
  position: absolute;
  bottom: calc(50% - min(253px, 25.9vw) - 54px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .75rem;
  opacity: 0;
  transition: opacity .35s .2s;
  white-space: nowrap;
}
#sp-video-lb.open #sp-video-lb-meta { opacity: 1; }
#sp-video-lb-meta-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
#sp-video-lb-meta-sep {
  width: 1px; height: 10px;
  background: rgba(255,255,255,.2);
}
#sp-video-lb-meta-role {
  font-size: .72rem;
  color:var(--dim);
  letter-spacing: .04em;
}

/* ── Responsive ── */


/* ══════════════════════════════════════════
   SP VIDEOS, CAROUSEL MOBILE (< 768px)
   ══════════════════════════════════════════ */
/* Desktop medium, 2 colonnes */


/* Mobile, carousel snap */
@media(max-width: 768px) {
  
  
  

  
  

  /* Nom légèrement plus petit sur mobile */

  /* Dots */
  
  
  .sp-dot.active {
    background: var(--accent);
    width: 18px;
    border-radius: 4px;
  }
}

/* Compatibilité anciens sélecteurs */


/* Ligne décorative verticale gauche */

.port-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  letter-spacing: -.0175em; line-height: .95; margin-top: .5rem;
  color: var(--light);
  padding-left: 1.5rem;
}


/* ══════════════════════════════════════════
   PORT-TABS, glassmorphism premium redesign
   ══════════════════════════════════════════ */


/* Barre top, indicateur actif */

/* Glow accent en fond actif */


.port-tab.active::before { transform: scaleX(1); }
.port-tab.active::after { opacity: 1; }
.port-tab.active {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.11);
  box-shadow: 0 2px 28px rgba(0,0,0,.35),
              0 0 0 1px rgba(255,255,255,0.04) inset,
              inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Numéro filigrane, haut droite */

.port-tab.active .port-tab-num {
  color: rgba(255,255,255,0.07);
  transform: scale(1.08) translateX(2px);
}


/* Icône glassmorphism */


.port-tab.active .port-tab-icon {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 0 14px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.1);
}
.port-tab.active .port-tab-icon svg { stroke: var(--accent); }

/* Texte */


.port-tab.active .port-tab-name { color: var(--accent); }


.port-tab.active .port-tab-sub { color:var(--dim); }

/* ── RESPONSIVE ── */

@media(max-width:500px) {
  
  
  
  
  /* Supprimer fondu et indicateur de scroll */
  .port-tabs-wrap {
    position: relative;
    overflow: visible;
  }
  .port-tabs-wrap::after { display: none; }
  .port-tabs-wrap::before { display: none; }
  
}

/* ── GLOW TOURNANT sur Cover Art et In Motion ── */
/* Halo conique rotatif (tab-glow-spin) retiré, effet "IA" indésirable sur les onglets de la nav rapide */


.acc-panel.active { display: block; }
@keyframes accFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Quick-nav menu scroll sur petit écran si trop d'items */
@media(min-width:601px) and (max-width:900px){
  #quick-nav-menu{
    max-height:calc(100dvh - 140px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* ── MODAL OVERLAY ── */
.pack-modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(4,4,4,.9);
  align-items: flex-start; justify-content: center;
  padding: 1.5rem 1.5rem 3rem;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.pack-modal-overlay.open { display: flex; }
.pack-modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  width: 100%; max-width: 560px;
  margin: auto;
  overflow: visible;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
  animation: modalIn .35s cubic-bezier(.16,1,.3,1);
}
@media(max-width:640px){
  .pack-modal-overlay{
    padding: 0;
    align-items: flex-end;
    overflow: hidden;
  }
  .pack-modal{
    border-radius:12px 12px 0 0;
    height:92dvh;
    max-height:92dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    margin:0;
    width:100%;
    max-width:100%;
  }
}
@keyframes modalIn {
  from { opacity:0; transform: scale(.95) translateY(20px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.pack-modal-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--off);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.1rem; line-height: 1;
  transition: color .2s, border-color .2s;
  z-index: 2;
}
.pack-modal-close:hover { color: var(--light); border-color: var(--accent); }
.pack-modal-head {
  padding: 2rem 2rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.pack-modal-label {
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .4rem;
}
.pack-modal-name {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 700;
  color: var(--light); line-height: 1;
  margin-bottom: .2rem;
}
.pack-modal-sub {
  font-family: var(--font-accent);
  font-style: italic; font-size: .85rem;
  color: var(--dim);
}
.pack-modal-price {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700;
  color: var(--accent);
  margin-top: .75rem;
}
.pack-modal-price span { font-size: .85rem; font-weight: 500; color: var(--off); margin-left: .25rem; }
.pack-modal-body { padding: 1.5rem 2rem; }
.pack-modal-section-title {
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); margin-bottom: .75rem;
}
.pack-modal-features { list-style: none; margin-bottom: 1.5rem; }
.pack-modal-features li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .82rem; color: var(--off);
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.45;
}
.pack-modal-features li:last-child { border-bottom: none; }
.pack-modal-features li svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.pack-modal-features li strong { color: var(--light); font-weight: 500; }
.pack-modal-option {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: .75rem 1rem;
  font-size: .78rem; color: var(--off);
  margin-bottom: 1.5rem;
  line-height: 1.55;
}
.pack-modal-option strong { color: var(--accent); font-weight: 600; }
.pack-modal-form { display: flex; flex-direction: column; gap: .75rem; }
.pack-modal-form input,
.pack-modal-form textarea {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: .8rem 1rem;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--light);
  resize: none;
  transition: border-color .2s;
  outline: none;
}
.pack-modal-form input::placeholder,
.pack-modal-form textarea::placeholder { color: var(--dim); }
.pack-modal-form input:focus,
.pack-modal-form textarea:focus { border-color: rgba(255,255,255,0.22); }
.pack-modal-submit {
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent); color: var(--black);
  border: none; border-radius: 9999px;
  padding: .9rem 1.5rem;
  cursor: pointer;
  transition: opacity .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 6px 24px rgba(255,255,255,0.14);
}
.pack-modal-submit:hover { opacity: .88; transform: scale(1.02); box-shadow: 0 10px 32px rgba(255,255,255,0.22); }
.pack-modal-alt {
  text-align: center;
  font-size: .75rem; color: var(--dim);
  margin-top: .75rem;
}
.pack-modal-alt a { color: var(--off); text-decoration: none; transition: color .2s; }
.pack-modal-alt a:hover { color: var(--accent); }

/* ── TRUST STRIP dans Collabs ── */


/* Grille desktop, toujours visible, pas de scroll caché */


.ts-logo.ts-invert.ts-ready { opacity: .85; transition: opacity .25s ease; }


/* ── SERVICES SECONDAIRES, glassmorphisme ── */


/* ── Accordéon item ── */


.svc-secondary-item.open { background: var(--surface2); }
/* Ligne titre (trigger) */


.svc-secondary-item.open .svc-secondary-arr {
  transform: rotate(45deg);
  color: var(--accent);
}
/* Corps accordéon */

.svc-secondary-item.open .svc-secondary-body {
  max-height: 500px;
}


/* ── RÉFÉRENCES VISUELLES, zone upload contact ── */


/* ── CONTACT FORM, design pro ── */
.cqf-header { margin-bottom: 1.5rem; }
.cqf-header h3 {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.0075em; color: var(--light);
  margin-bottom: .35rem;
}
.cqf-header p {
  font-size: .78rem; color: var(--dim);
  font-weight: 300; line-height: 1.5;
}

/* Chips avec icônes */
.cqf-chips {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-bottom: 1.5rem;
}
.cqf-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em;
  padding: .5rem 1.1rem .5rem .85rem;
  border-radius: 9999px;
  border: 1px solid var(--border2);
  background: transparent; color: var(--off);
  cursor: pointer;
  transition: all .2s cubic-bezier(.16,1,.3,1);
  white-space: nowrap;
}
.cqf-chip svg { opacity: .6; flex-shrink: 0; transition: opacity .2s; }
.cqf-chip:hover { border-color: var(--accent); color: var(--accent); }
.cqf-chip:hover svg { opacity: 1; }
.cqf-chip.active {
  background: var(--accent); border-color: var(--accent);
  color: var(--black);
}
.cqf-chip.active svg { opacity: 1; stroke: var(--black); }

/* ── PACK CURTAINS DÉSACTIVÉS, accès direct aux tarifs ── */


#pricing {
  background: var(--black);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
#pricing::before {
  content: '';
  position: absolute;
  top: -200px; right: -300px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}
#pricing::after {
  content: '';
  position: absolute;
  bottom: -150px; left: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.02) 0%, transparent 70%);
  pointer-events: none;
}

/* ── HEADER SECTION ── */

.pricing-header .sec-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: .35rem 1rem;
  border-radius: 9999px;
  margin-bottom: 1.4rem;
}


/* ── TABS ── */


.pricing-tab.active {
  background: var(--accent);
  color: var(--black);
  box-shadow: 0 2px 12px rgba(255,255,255,0.14);
}
.pricing-tab:hover:not(.active) { color: var(--light); background: rgba(255,255,255,.04); }

/* ── PANELS ── */

.pricing-panel.active { display: block; }

/* ═══════════════════════════════════════════
   CURTAIN REVEAL, Pack Cards
   L'utilisateur glisse pour révéler le prix
═══════════════════════════════════════════ */


/* Couche rideau qui couvre le contenu */


/* Face du rideau, ce que l'utilisateur voit avant de glisser */


/* Numéro du pack en grand watermark */


/* Badge tier visible sur le rideau */


/* Nom du pack en grand sur le rideau */


/* Hint de glissement */


@keyframes curtain-hint-anim {
  0%,100% { opacity: 0; transform: rotate(-45deg) translateY(-2px); }
  50% { opacity: 1; transform: rotate(-45deg) translateY(2px); }
}

/* Barre de progression */


/* Effet de lumière en glissant */

.pack-curtain.dragging .pack-curtain-light { opacity: 1; }

/* État ouvert */
.pack-curtain.opened {
  pointer-events: none;
}
.pack-curtain.opened .pack-curtain-face {
  transform: translateX(100%);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.pack-curtain.opened .pack-curtain-light { opacity: 0; }

/* Snap back si pas assez glissé */
.pack-curtain.snapping .pack-curtain-face {
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}

/* ── Badge "Swipe" flottant sur mobile ── */


/* ═══════════════════════
   PACKS PRIMAIRES
═══════════════════════ */


/* .pack-card base, absorbée dans §patch L3485/L3494 (!important) */
/* .pack-card:hover, absorbée dans §patch L3502/L3511 (!important) */
/* .pack-card.featured, absorbée dans §patch L3512 (!important) */

/* Ambient top-edge light line */


/* ═══════════════════════════════════════════════
   PACK CARDS, THÈMES SILVER / GOLD / DIAMOND
═══════════════════════════════════════════════ */

/* ── Variables couleurs ── */
:root {
  --silver: #c0c8d8;
  --silver-dim: #8a9ab0;
  --silver-glow: rgba(192,200,216,.18);
  --silver-border: rgba(192,200,216,.3);
  --gold: #f0c040;
  --gold-dim: #b8880a;
  --gold-glow: rgba(240,192,64,.15);
  --gold-border: rgba(240,192,64,.35);
  --diamond: #c084fc;
  --diamond-dim: #CDE24C;
  --diamond-glow: rgba(192,132,252,.16);
  --diamond-border: rgba(192,132,252,.38);
}

/* ── SILVER card ── */


/* Rideau Silver */


/* ── GOLD card ── */


/* Rideau Gold */


/* ── DIAMOND card, déjà featured, on renforce ── */


/* ── Tier badge, pill coloré ── */


/* ── Pack name, grand, impactant ── */


/* ── Pack sub ── */


/* ── Prix display ── */


/* ── Divider ── */


/* ── Features ── */


/* ── CTA ── */


/* ═══════════════════════
   PACKS AVANCÉS (Spotlight / Magnum / Prestige)
═══════════════════════ */


/* ── Spotlight, accent vert ── */


/* ── Magnum, rose/violet ── */


/* ── Prestige, doré ── */


/* ═══════════════════════
   ROLLOUT, hero card
═══════════════════════ */


/* ═══════════════════════
   SERVICES ADDITIONNELS
═══════════════════════ */


/* ── FIX TABS OVERFLOW ── */


/* ═══════════════════════
   NOTE DE BAS DE SECTION
═══════════════════════ */


/* ═══════════════════════════════════════════════════════
   PRICING MOBILE, Carousel + Bottom Sheet + Guidage
   Design: compact cards, swipe natif, popup iOS-style
═══════════════════════════════════════════════════════ */


/* ── Wrap select visible seulement sur mobile ── */
.pricing-mobile-select-wrap { display: none; }

/* ══════════════════════════════════════════════
   BOTTOM SHEET, Popup détails pack (iOS style)
══════════════════════════════════════════════ */
#pack-bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: none;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  height: 100dvh;
}
#pack-bottom-sheet.open { display: flex; }

/* Fond sombre */
#pack-bs-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  animation: bs-fade-in .3s ease;
}
@keyframes bs-fade-in { from{opacity:0} to{opacity:1} }

/* Sheet elle-même */
#pack-bs-content {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px 12px 0 0;
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: bs-slide-up .4s cubic-bezier(.16,1,.3,1);
}
@keyframes bs-slide-up { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* Poignée en haut */
#pack-bs-handle {
  width: 36px; height: 4px;
  border-radius: 4px;
  background: var(--dim);
  margin: 1rem auto .75rem;
  flex-shrink: 0;
}

/* Header sheet */
#pack-bs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  z-index: 2;
}
#pack-bs-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.4rem;
  color: var(--light); letter-spacing: -.01em;
}
#pack-bs-tier {
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); display: block; margin-bottom: .2rem;
}
#pack-bs-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--off);
  transition: background .2s, color .2s; flex-shrink: 0;
}
#pack-bs-close:hover { background: var(--border2); color: var(--light); }

/* Corps sheet, zone scrollable */
#pack-bs-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  overscroll-behavior: contain;
}

/* CTA fixe en bas, hors du scroll */
#pack-bs-footer {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem calc(env(safe-area-inset-bottom,0px) + 1rem);
  display: flex; gap: .75rem;
}

#pack-bs-price {
  font-family: var(--font-display);
  font-size: 2.4rem; font-weight: 700;
  color: var(--accent); line-height: 1;
  margin-bottom: 1.25rem;
}
#pack-bs-price span { font-size: 1rem; font-weight: 500; color: var(--off); margin-left: .3rem; }

#pack-bs-features { list-style: none; margin-bottom: 1.5rem; }
#pack-bs-features li {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .85rem; color: var(--off);
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.45;
}
#pack-bs-features li:last-child { border-bottom: none; }
#pack-bs-features li strong { color: var(--light); font-weight: 500; }
.bs-feat-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); margin-top: 1px; }

#pack-bs-cta {
  flex: 1;
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .04em;
  color: var(--black); background: var(--accent);
  border: none; border-radius: 9999px;
  padding: .95rem 1.5rem;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 4px 20px rgba(255,255,255,0.14);
}
#pack-bs-cta:hover { opacity: .9; transform: translateY(-1px); }
/* Colonne icône à gauche */

/* Corps du texte */


/* Grille de conditions */


/* ═══════════════════════
   CURRENCY CONVERTER
═══════════════════════ */


/* ══════════════════════════════════════════════
   CONDITIONS GÉNÉRALES, carte stylisée
══════════════════════════════════════════════ */

/* Trait lumineux en haut */


/* ══════════════════════════════════════════
   COLLABS, ELITE BUILD
   Modifications vs original :
   • cutout derrière la carte (z-index:-1)
   • fond carte opaque (lisibilité totale)
   • cutout parallax inverse du tilt
   • crossfade cutout sur transition
   • idle float continu
   • name reveal par clip-path sur chaque slide
   • spotlight curseur sur le stage
   • gyroscope mobile
   • swipe mobile amélioré
══════════════════════════════════════════ */

/* ── SECTION ── */
#collabs{
  padding:2rem 0 5rem;
  border-bottom:1px solid var(--border);
  background:var(--dark);
  position:relative;
  overflow:visible;
}
#collabs::before{
  content:'';position:absolute;top:-200px;left:50%;
  transform:translateX(-50%);
  width:900px;height:500px;
  background:radial-gradient(ellipse,rgba(255,255,255,0.03) 0%,transparent 65%);
  pointer-events:none;z-index:0;
  animation:collabsGlow 7s ease-in-out infinite alternate;
}
@keyframes collabsGlow{
  0%  {opacity:.4;transform:translateX(-50%) scale(1)    translateY(0)}
  100%{opacity:1; transform:translateX(-50%) scale(1.15) translateY(-20px)}
}

/* ── HEADER ── */


/* ── Label collabs redesigné, pill éditorial premium ── */


/* ── STAGE ── */
#artist-stage{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding:4rem 2rem 3rem;min-height:520px;gap:0;
  /* spotlight suit le curseur via JS */
  --mx:50%;--my:50%;
  background:radial-gradient(
    600px circle at var(--mx) var(--my),
    rgba(255,255,255,0.02) 0%,
    transparent 55%
  );
}


#card-zone{
  flex:1;max-width:580px;position:relative;
  display:flex;align-items:center;justify-content:center;
  perspective:1100px;
}

/* ── CARD ── */

@keyframes cardIdle{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-6px)}
}
/* pause idle quand tilt actif, géré en JS */

/* shimmer haut */

/* lueur bas */


/* grain animé */

@keyframes grainShift{
  0%  {transform:translate(0,0)}
  25% {transform:translate(-1px,1px)}
  50% {transform:translate(1px,-1px)}
  75% {transform:translate(-1px,-1px)}
  100%{transform:translate(0,0)}
}

/* ── CUTOUT, DERRIÈRE LA CARTE ── */

@keyframes cutoutIdle{
  0%,100%{transform:translateY(0)   rotate(0deg)}
  50%    {transform:translateY(-10px) rotate(.5deg)}
}

/* deux images pour le crossfade */


/* halo derrière le cutout */

@keyframes haloBreath{
  0%  {transform:scale(1);   opacity:.5}
  100%{transform:scale(1.25);opacity:1}
}

/* ── INNER ── */


/* index pill */


/* name reveal par clip-path */


/* genre */


/* collab tag */


/* ── FOOTER ── */


.card-dot.active{
  background:var(--accent);width:24px;border-radius:4px;
  box-shadow:0 0 10px rgba(255,255,255,0.33);
}


/* progress bar */


/* flash */
@keyframes flashIn{
  0%{opacity:.18}50%{opacity:.06}100%{opacity:0}
}


/* ── TRANSITIONS CARTE ENTIÈRE ── */
@keyframes cEnterR{
  0%  {transform:translateX(70px) scale(.94) rotateY(-8deg);opacity:0;filter:blur(8px)}
  60% {filter:blur(0)}
  100%{transform:translateX(0)    scale(1)   rotateY(0);   opacity:1;filter:blur(0)}
}
@keyframes cEnterL{
  0%  {transform:translateX(-70px) scale(.94) rotateY(8deg);opacity:0;filter:blur(8px)}
  60% {filter:blur(0)}
  100%{transform:translateX(0)     scale(1)   rotateY(0);  opacity:1;filter:blur(0)}
}


/* ── MARQUEE ── */


/* ── RESPONSIVE ── */

@media(max-width:600px){
  /* Titre collabs : taille réduite + sans coupure */
  
  /* Sous-titre collabs : pas de <br> inutile, texte fluide */
  
  /* Marquee : noms plus petits pour éviter coupure */
  #collabs .collabs-marquee span:not(.sep){
    font-size:.78rem !important;
    padding:0 .7rem !important;
    white-space:nowrap !important;
  }
  /* Masquer le cutout, il déborde et casse le visuel sur mobile */
  /* Contenir la carte proprement */
  #card-zone{overflow:hidden;border-radius:12px;width:100% !important;max-width:100% !important}
  /* Layout carte horizontal propre */
  
  
}


/* ── COLLABS MOBILE PREMIUM LOOK ── */
@media(max-width:600px){
  
  
  #card-zone{width:100% !important;max-width:100% !important}
}


/* ── CONTACT ENRICHI ── */

.contact-quick-form{background:linear-gradient(160deg,rgba(22,22,22,.92) 0%,rgba(14,14,14,.96) 100%);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 48px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,0.04) inset;padding:2.5rem;display:flex;flex-direction:column;gap:1.25rem;position:relative;overflow:hidden;}
.contact-quick-form h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.0075em;color:var(--light);margin-bottom:.25rem}
.contact-quick-form p{font-size:.8rem;color:var(--dim);font-weight:300;line-height:1.6;margin-bottom:.5rem}
.cqf-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.cqf-field{display:flex;flex-direction:column;gap:.4rem}
.cqf-field.full{grid-column:1/-1}
.cqf-field label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cqf-field input,.cqf-field textarea,.cqf-field select{
  background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;
  padding:.7rem 1rem;font-family:var(--font-body);font-size:.85rem;color:var(--light);
  outline:none;transition:border-color .25s,box-shadow .25s,background .25s;resize:none;
  -webkit-appearance:none;appearance:none;
}
.cqf-field input:focus,.cqf-field textarea:focus,.cqf-field select:focus{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,0.22);box-shadow:0 0 0 3px rgba(255,255,255,0.04);
}
.cqf-field select option{background:var(--surface2);color:var(--light)}
.cqf-field textarea{min-height:100px;line-height:1.6}
.cqf-submit{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.5rem}
.cqf-submit button{
  font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.06em;
  background:var(--accent);color:var(--black);border:none;border-radius:9999px;
  padding:.75rem 1.6rem;cursor:pointer;transition:opacity .2s,transform .2s,box-shadow .2s;
  display:flex;align-items:center;gap:.5rem;
}
.cqf-submit button:hover{opacity:.88;transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,255,255,0.17)}
.cqf-note{font-size:.68rem;color:var(--dim);font-weight:300;line-height:1.5}
.cqf-success{display:none;text-align:center;padding:1.5rem;gap:.75rem;flex-direction:column;align-items:center}
.cqf-success.show{display:flex}
.cqf-success-icon{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.07);border:1px solid var(--accent);display:flex;align-items:center;justify-content:center}
.cqf-success-icon svg{width:20px;height:20px;stroke:var(--accent)}
.cqf-success h4{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--light)}
.cqf-success p{font-size:.8rem;color:var(--dim);font-weight:300}
.contact-left-links{margin-top:2.5rem;display:flex;flex-direction:column;gap:.5rem}
.contact-direct-link{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;background:linear-gradient(135deg,rgba(18,18,18,.8) 0%,rgba(12,12,12,.9) 100%);border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.3);text-decoration:none;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.contact-direct-link:hover{border-color:rgba(255,255,255,0.1);background:var(--surface2);transform:translateX(6px);box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,0.08)}
.contact-direct-link-icon{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(255,255,255,.7);transition:background .25s,color .25s}
.contact-direct-link-text{display:flex;flex-direction:column;gap:.1rem;flex:1}
.contact-direct-link-name{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--light);letter-spacing:.01em}
.contact-direct-link-val{font-size:.72rem;color:var(--dim);font-weight:300}
.contact-direct-link-arr{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;color:var(--dim);transition:transform .2s,color .2s}
.contact-direct-link:hover .contact-direct-link-icon{background:rgba(255,255,255,.1);color:#fff}
.contact-direct-link:hover .contact-direct-link-arr{transform:translate(2px,-2px);color:var(--accent)}


#faq {
  padding: 5rem 0;
  border-bottom: 1px solid var(--border);
  background: var(--black);
}
.faq-header { text-align: center; margin-bottom: 3rem; }


.faq-item.open .faq-q-icon {
  background: var(--accent); border-color: var(--accent);
  color: var(--black); transform: rotate(45deg);
}

.faq-item.open .faq-a { max-height: 500px; padding-bottom: 1.35rem; }


/* ── Footer enrichi ── */


.cpop-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9998;opacity:0;pointer-events:none;transition:opacity .35s}
.cpop-overlay.active{opacity:1;pointer-events:all}
.cpop-drag-handle{width:36px;height:4px;background:rgba(255,255,255,.15);border-radius:4px;margin:0 auto 1.5rem;display:none}
@media(max-width:768px){.cpop-drag-handle{display:block}}
.cpop{position:fixed;bottom:-100%;left:50%;transform:translateX(-50%);width:min(480px,95vw);background:var(--dark);border:1px solid var(--border);border-radius:12px 12px 0 0;padding:2.5rem 2rem 2rem;z-index:9999;transition:bottom .45s cubic-bezier(.16,1,.3,1);max-height:95vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cpop.active{bottom:0}
.cpop-close{position:absolute;top:1.25rem;right:1.25rem;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--off);transition:background .2s}
.cpop-close:hover{background:rgba(255,255,255,.15)}
.cpop-close svg{width:16px;height:16px}
.cpop-label{font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}
.cpop-title{font-family:var(--font-display);font-weight:700;font-size:1.8rem;color:var(--light);letter-spacing:-.015em;line-height:1.1;margin-bottom:.6rem}
.cpop-title em{color:var(--accent);font-style:normal}
.cpop-sub{font-size:.85rem;color:var(--dim);font-weight:300;margin-bottom:1.75rem}
.cpop-links{display:flex;flex-direction:column;gap:.75rem}
.cpop-link{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-radius:12px;border:1px solid var(--border);text-decoration:none;transition:all .3s cubic-bezier(.16,1,.3,1)}
.cpop-link:hover{transform:translateX(4px)}
.cpop-link-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cpop-link-icon svg{width:20px;height:20px}
.cpop-wa{background:rgba(37,211,102,.06);border-color:rgba(37,211,102,.2)}
.cpop-wa:hover{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.4)}
.cpop-wa .cpop-link-icon{background:rgba(37,211,102,.12);color:#25d366}
.cpop-ig{background:rgba(225,48,108,.06);border-color:rgba(225,48,108,.2)}
.cpop-ig:hover{background:rgba(225,48,108,.12);border-color:rgba(225,48,108,.4)}
.cpop-cal{background:rgba(var(--accent-rgb),.06);border-color:rgba(var(--accent-rgb),.2)}
.cpop-cal:hover{background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.4)}
.cpop-cal .cpop-link-icon{background:rgba(var(--accent-rgb),.12);color:var(--accent)}
.cpop-ig .cpop-link-icon{background:rgba(225,48,108,.12);color:#e1306c}
.cpop-mail{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.11)}
.cpop-mail:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.22)}
.cpop-mail .cpop-link-icon{background:rgba(255,255,255,0.07);color:var(--accent)}
.cpop-mail .cpop-link-icon svg{stroke:var(--accent)}
.cpop-link-name{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--light)}
.cpop-link-detail{font-size:.75rem;color:var(--dim);font-weight:300;margin-top:.15rem}
.cpop-arrow{width:16px;height:16px;stroke:var(--dim);margin-left:auto;flex-shrink:0;transition:transform .3s}
.cpop-link:hover .cpop-arrow{transform:translateX(4px);stroke:var(--light)}
/* Tabs */
.cpop-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;background:rgba(255,255,255,.04);border-radius:12px;padding:.3rem}
.cpop-tab{flex:1;font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.55rem .5rem;border-radius:4px;border:none;background:transparent;color:var(--dim);cursor:pointer;transition:all .25s}
.cpop-tab.active{background:var(--surface2);color:var(--light);box-shadow:0 2px 8px rgba(0,0,0,.3)}
/* Form fields */
.cpop-field-group{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.25rem}
.cpop-field{display:flex;flex-direction:column;gap:.4rem}
.cpop-label-field{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cpop-input{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;padding:.75rem 1rem;font-family:var(--font-body);font-size:.88rem;color:var(--light);outline:none;transition:border-color .2s,background .2s;width:100%;-webkit-appearance:none;appearance:none}
.cpop-input::placeholder{color:var(--dim)}
.cpop-input:focus{border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.02)}

/* ── CHIPS SELECT, type de projet ── */
.cpop-chips-select {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.cpop-chip-opt {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .45rem .9rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: transparent;
  color:var(--dim);
  cursor: pointer;
  transition: all .2s cubic-bezier(.16,1,.3,1);
  white-space: nowrap;
}
.cpop-chip-opt:hover {
  border-color: rgba(255,255,255,.25);
  color: var(--light);
  background: rgba(255,255,255,.04);
}
.cpop-chip-opt.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--black);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),.25);
}

/* ── CUSTOM DROPDOWN, budget ── */
.cpop-custom-select {
  position: relative;
}
.cpop-custom-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .75rem 1rem;
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--dim);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, background .2s;
}
.cpop-custom-select-btn.has-value {
  color: var(--light);
}
.cpop-custom-select-btn svg {
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
  color: var(--dim);
}
.cpop-custom-select.open .cpop-custom-select-btn {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.03);
}
.cpop-custom-select.open .cpop-custom-select-btn svg {
  transform: rotate(180deg);
}
/* Liste déroulante */
.cpop-drop-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #161616;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  z-index: 100;
  display: none;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  /* Animation */
  transform-origin: top center;
}
.cpop-custom-select.open .cpop-drop-list {
  display: block;
  animation: dropOpen .2s cubic-bezier(.16,1,.3,1);
}
@keyframes dropOpen {
  from { opacity: 0; transform: scaleY(.92) translateY(-4px); }
  to   { opacity: 1; transform: scaleY(1) translateY(0); }
}
.cpop-drop-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .78rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: .84rem;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}
.cpop-drop-item:last-child { border-bottom: none; }
.cpop-drop-item:hover {
  background: rgba(255,255,255,.04);
  color: var(--light);
}
.cpop-drop-item.selected {
  color: var(--accent);
  background: rgba(var(--accent-rgb),.06);
}
.cpop-drop-icon {
  font-family: var(--font-display);
  font-size: .78rem;
  color: var(--accent);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  opacity: .7;
}
.cpop-textarea{resize:none;min-height:90px;line-height:1.6}
.cpop-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:.7rem;background:var(--accent);color:var(--black);font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.06em;padding:.95rem 1.5rem;border-radius:9999px;border:none;cursor:pointer;transition:all .25s;box-shadow:0 4px 20px rgba(var(--accent-rgb),0.25)}
.cpop-submit:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 6px 28px rgba(255,255,255,0.22)}
.cpop-submit:active{transform:scale(.98)}

/* visibility:hidden a la fermeture, et pas seulement opacity:0. Un
   backdrop-filter sur un element seulement transparent garde sa couche
   vivante : le compositeur refloutait un plein ecran a chaque frame de
   defilement, pour une surcouche fermee. La visibilite est retardee de
   la duree du fondu, sinon la fermeture serait coupee net. */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:9990;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility 0s .35s;cursor:zoom-out}
.lb-overlay.active{opacity:1;visibility:visible;pointer-events:all;transition:opacity .35s,visibility 0s}
.lb{position:fixed;inset:0;z-index:9991;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;opacity:0;pointer-events:none;transition:opacity .35s}
.lb.active{opacity:1;pointer-events:all}
.lb-close{position:fixed;top:1.5rem;right:1.5rem;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,transform .2s;z-index:9992}
.lb-close:hover{background:rgba(255,255,255,.22);transform:scale(1.08)}
.lb-close svg{width:18px;height:18px}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,transform .2s,opacity .2s;z-index:9992}
.lb-nav:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.22);transform:translateY(-50%) scale(1.08)}
.lb-nav svg{width:20px;height:20px;stroke:currentColor}
.lb-prev{left:1.5rem}
.lb-next{right:1.5rem}
.lb-nav.hidden{opacity:0;pointer-events:none}
@media(max-width:640px){.lb-prev{left:.5rem}.lb-next{right:.5rem}.lb-nav{width:38px;height:38px}}
.lb-img-wrap{max-width:min(900px,80vw);max-height:74vh;overflow:hidden;border-radius:12px;cursor:default}
@media(max-width:640px){.lb-img-wrap{max-width:94vw;max-height:65vh}}
.lb-img{width:100%;height:100%;max-height:74vh;object-fit:contain;display:block;border-radius:12px;transition:opacity .22s}
.lb-img.switching{opacity:0}
.lb-info{margin-top:1.25rem;text-align:center}
.lb-title{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:.35rem}
.lb-desc{font-size:.8rem;color:rgba(255,255,255,.5);font-weight:300;letter-spacing:.04em}
.lb-hint{font-size:.72rem;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin-top:.6rem}

#quick-nav{
  position:fixed;bottom:2rem;left:2rem;z-index:8000;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  transition:bottom .3s cubic-bezier(.16,1,.3,1);
}
#quick-nav-toggle{
  display:flex;align-items:center;gap:.6rem;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:9999px;padding:.55rem 1rem .55rem .8rem;
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--off);
  cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);white-space:nowrap;
  box-shadow:0 4px 24px rgba(0,0,0,.4);
}
#quick-nav-toggle:hover{border-color:var(--accent);color:var(--accent)}
#quick-nav-toggle .qn-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex-shrink:0;
}
#quick-nav-menu{
  position:absolute;bottom:calc(100% + .6rem);left:0;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:12px;padding:.5rem;
  min-width:200px;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);
  transition:all .25s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
#quick-nav-menu.open{
  opacity:1;visibility:visible;transform:translateY(0) scale(1);
  pointer-events:all;
}
.qn-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.6rem .9rem;border-radius:12px;
  font-family:var(--font-body);font-size:.8rem;font-weight:400;
  color:var(--off);text-decoration:none;cursor:pointer;
  transition:background .18s,color .18s;white-space:nowrap;
  border:none;background:none;width:100%;text-align:left;
}
.qn-item:hover{background:var(--surface2);color:var(--light)}
.qn-item.active{color:var(--accent)}
.qn-item .qn-num{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;color:var(--dim);min-width:18px;
}
.qn-item:hover .qn-num,.qn-item.active .qn-num{color:var(--accent)}
.qn-divider{height:1px;background:var(--border);margin:.3rem .5rem}
#quick-nav-menu .qn-label{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);padding:.5rem .9rem .25rem;
}
@media(max-width:600px){
  #quick-nav{bottom:1rem;left:1rem}
  #quick-nav-menu{min-width:180px}
}
/* ══════════════════════════════════════════
   MOOD BOARD, formulaire devis
══════════════════════════════════════════ */
#moodboard-field{
  animation: mbReveal .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes mbReveal{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}


/* Drop zone */


/* Grille aperçus */


/* Barre d'ajout de lien */


/* Liste des liens */


/* Counter */


@media(max-width:480px){
}
/* Quand le banner IG est visible, offset géré dynamiquement par JS (comme le sticky player) */

/* ══════════════════════════════════════════
   AMÉLIORATION RESPONSIVE MOBILE < 480px
══════════════════════════════════════════ */
@media(max-width:480px){

  /* ── NAV ── */
  nav{
    padding:.75rem 1.1rem;
  }
  .nav-logo img{
    height:36px !important;
  }
  .nav-right{gap:.55rem}
  .lang-toggle{padding:.28rem .55rem;font-size:.72rem}
  .nav-cta{font-size:.68rem;padding:.45rem .95rem}

  /* ── SECTIONS padding uniformes ── */
  #about,#collabs,#work,#covers,#services,
  #process,#testimonials,#contact,#press,#awards,
  #trust,#motion,#pricing{
    padding-left:1.1rem !important;
    padding-right:1.1rem !important;
  }
  .container{
    padding-left:1.1rem !important;
    padding-right:1.1rem !important;
  }

  /* ── SECTION HEADERS ── */
  .sec-label{font-size:.72rem;letter-spacing:.2em;margin-bottom:1.5rem}
  

  /* ── HERO ── */
  
  
  
  
  
  
  

  /* ── ABOUT ── */
  #about{padding-top:5rem !important;padding-bottom:5rem !important}
  
  
  
  
  
  
  
  

  /* ── TRUST / LOGOS ── */
  
  
  
  
  
  

  /* ── COLLABS AVATARS ── */
  
  
  

  /* ── WORK / COVERS CAROUSELS ── */
  .work-card,.cov-card{width:74vw !important;max-width:270px !important}
  
  .work-footer{margin:1.75rem 1.1rem 0 !important}
  
  .work-title{font-size:.95rem}
  .work-cat{font-size:.72rem}
  .work-meta{padding:.9rem .9rem .85rem}
  .work-hint{font-size:.65rem}
  .work-more{font-size:.78rem}

  /* ── SERVICES ── */
  
  
  

  /* ── PROCESS ── */
  
  

  /* ── TESTIMONIALS ── */
  #testimonials{padding:5rem 1.1rem !important}
  

  /* ── PRESS ── */
  #press{padding:5rem 1.1rem !important}
  
  
  

  /* ── AWARDS ── */
  #awards{padding:5rem 1.1rem !important}
  
  
  

  /* ── CONTACT ── */
  #contact{padding:3.5rem 1.1rem !important}
  
  .contact-h2{font-size:clamp(1.8rem,8vw,2.6rem)}
  
  .info-list{gap:.65rem}
  .info-value{font-size:.8rem}

  /* ── FOOTER ── */
  
  .footer-brand p{font-size:.78rem;max-width:100% !important}
  .footer-brand .f-logo{font-size:1.15rem}
  
  
  .footer-bottom{padding:.85rem 1.1rem !important;flex-direction:column;text-align:center;gap:.4rem}
  .footer-bottom p,.f-made{font-size:.72rem}
  .f-socials{flex-wrap:wrap;gap:.5rem}
  .f-socials a{width:38px !important;height:38px !important}

  /* ── IG BANNER ── */

  /* ── POPUP CONTACT ── */
  .cpop{
    width:100% !important;
    left:0 !important;
    transform:none !important;
    border-radius:12px 12px 0 0 !important;
    padding:1.5rem 1.1rem 1.25rem !important;
  }

  /* ── MOTION GRID ── */

  /* ── PACK / PRICING CARDS ── */
  
  
  
  

  /* ── QUICK NAV ── */
  #quick-nav{bottom:1rem;left:.85rem}
  #quick-nav-toggle{font-size:.72rem;padding:.45rem .8rem .45rem .65rem}
  #quick-nav-menu{min-width:160px;border-radius:12px}
  .qn-item{font-size:.72rem;padding:.5rem .75rem}

  /* ── BACK TO TOP ── */
  #backToTop{
    bottom:1rem !important;
    right:.85rem !important;
    width:36px !important;
    height:36px !important;
    font-size:.75rem !important;
  }
  #back-to-top{
    bottom:1rem !important;
    right:.85rem !important;
    width:36px !important;
    height:36px !important;
    font-size:.75rem !important;
  }

  /* ── TEXT GLOBAL ── */
  h2,h3{word-break:break-word}
  p{overflow-wrap:break-word}
}


/* ════════════════════════════════════════════════════
   PATCH HERO, correctifs ciblés
   ════════════════════════════════════════════════════ */

/* 1. GRADIENTS, supprimer le triple overlay redondant.
      On garde uniquement hero-gradient-overlay (z-index:10)
      et le ::after (dégradé bas), on neutralise ::before */

/* Rebalancer le gradient principal pour laisser la photo respirer */

/* Dégradé bas légèrement plus fort pour ancrer le HUD */


/* 2. HERO-SUB COUPÉ À GAUCHE, le padding-left du grid manquait
      sur certaines breakpoints. On s'assure qu'il est toujours correct. */
/* padding-left hero-sub/eyebrow desktop, supprimé, géré par padding du parent .hero-left */

/* 3. HUD BOTTOM, fusionné dans la définition source L498 (suppression doublon, !important retirés) */
/* Label micro / Valeur / Colonne centre, fusionnés dans définitions sources ~L527-540 */

/* 4. HUD-TR (coin haut droite), supprimé */

/* 5. HERO-TYPE-WRAP (Brand Identity, bas droite), renforcer le
      fond pour le rendre lisible sur toute photo */


/* 6. POINTER-EVENTS, fix fragile sur hero-left grid :
      on met pointer-events:auto sur les éléments de contenu
      directement plutôt que de dépendre du parent=none */


/* 7. INTER, remplace Space Grotesk sur tous les éléments UI */
body,
.hero-hud-label, .hero-hud-val,
.hero-eyebrow, .hero-sub, .hero-handle,
.hero-btn-primary, .hero-btn-secondary,
.hero-portfolio-link, .hero-type-wrap,
.hero-manifeste-ticker,
.stat-label, .stat-sub,
.nav-links a, .nav-cta, .nav-avail, .lang-toggle,
.sec-label, .port-count-label, .port-tab-sub, .port-tab-name,
.pieter-step-badge, .pieter-step-desc, .pieter-step-rule,
.collabs-marquee, .cta-sub, .pricing-desc, .pricing-feature,
.testimonial-text, .testimonial-meta,
.footer-tagline, .footer-link, .footer-copy,
.form-label, .form-input, .form-textarea,
.about-body, .about-tag, .about-stat-label {
  font-family: var(--font-body) !important;
}

/* 8. H1 HERO desktop, layout définitif */


/* 8b. H1 mobile, compact */


/* 7. MOBILE HUD, ajustements pour le patch */


/* ════════════════════════════════════════════════════
   PATCH 2, image desktop, mobile hero, titres sections
   ════════════════════════════════════════════════════ */

/* A. IMAGE DESKTOP, object-position équilibré */
#heroDesktopImg {
  object-position: 50% 20% !important;
  filter: contrast(1.02) brightness(.95) !important;
}

/* B. MOBILE HERO, layout propre */


/* C. TITRES DE SECTIONS, même ADN que "L'ÉLITE SE REMARQUE"
      --font-display 700, uppercase, letter-spacing serré
      DESKTOP : tailles modérées, pas écrasantes */
.port-h2,
.sp-h2,
.about-main-title,
.svc-h2,
.collabs-main-title,
.faq-h2,
.contact-h2,
.cpop-title,
.about-title,
.process-header h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -.015em !important;
  line-height: .95 !important;
}

/* Desktop, tailles raisonnables */
.port-h2          { font-size: clamp(1.5rem, 2.2vw, 2.2rem) !important; }

.svc-h2           { font-size: clamp(1.4rem, 2vw, 2rem) !important; }

.faq-h2           { font-size: clamp(1.1rem, 1.4vw, 1.5rem) !important; }
.contact-h2       { font-size: clamp(1.7rem, 2.6vw, 2.6rem) !important; }

/* Les em italiques dans les titres, --font-accent, pas uppercase */
.port-h2 em,
.sp-h2 em,
.about-main-title em,
.svc-h2 em,
.collabs-main-title em,
.faq-h2 em,
.contact-h2 em,
.cpop-title em {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -.005em !important;
}

/* D. MOBILE, titres : taille serrée iPhone 11 (375px)
      jamais plus de 6-7vw pour éviter coupures et débords */
@media(max-width:640px) {
  .port-h2          { font-size: clamp(1.5rem, 6vw, 2rem) !important;   padding-left: 1.25rem !important; }
  
  /* Fix sp-h2 étendu à 768px, évite le wrap mot par mot sur tous les mobiles */
}
@media(max-width:768px) {
  
  .svc-h2           { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; }
  
  .faq-h2           { font-size: clamp(1.15rem, 4vw, 1.5rem) !important; }
  .contact-h2       { font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important; }

  /* Sections padding mobile, uniformisé */
  #about, #services, #collabs, #process, #pricing, #faq, #contact {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* port-h2 em sous-titre */
  .port-h2 em { font-size: clamp(.85rem, 3.5vw, 1.1rem) !important; }

  /* svc-h2 em */
  .svc-h2 em { font-size: clamp(.9rem, 3.5vw, 1.1rem) !important; }

  /* sp-h2 em */
  

  /* pieter-step-title */
  

  /* about-v2-h2 */
  

  /* process header */
  
}

/* ── FIX PAQUET FINAL ── */

/* 1. Behance / hero-portfolio-links : toujours visible sur desktop,
      compact sur mobile sous les CTAs */

/* Desktop : s'assurer que l'animation est bien jouée */


/* 2. hero-sub + hero-ctas : éviter le chevauchement sur desktop intermédiaire */
/* @media(min-width:768px) and (max-width:1200px), supprimé,
   les CTAs sont dans le flux normal, pas en position:absolute */

/* 3. sp-h2, empêcher débordement sur mobile */


/* 4. tab actif lisible, port-new-tab-btn inactive plus visible */
.port-new-tab-btn:not(.active) {
  color: rgba(255,255,255,.45) !important;
}
.port-new-tab-btn:not(.active) svg {
  opacity: .45 !important;
}

/* ============================================================ */
/* SECTION, Process, Pricing, Accordions */
/* ============================================================ */
/* ── PORTFOLIO NEW HEADER ── */
.port-new-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 2.6rem 3rem clamp(18px, 2.2vw, 28px); flex-wrap: wrap; gap: 1.5rem;
  border-bottom: 1px solid var(--border);
  /* LE FILET NE TOUCHE PLUS LE TITRE. La marge basse valait zero, et
     elle etait ecrite DEUX FOIS — une dans le raccourci, une en toutes
     lettres juste apres, comme si quelqu'un avait voulu s'en assurer.
     Le trait tombait donc a un pixel du bas de « 7 ans d'exigence »,
     c'est-a-dire dans le jambage du g.

     Un filet de section separe deux choses ; colle a l'une d'elles, il
     ne separe plus, il souligne. */
}
@media(max-width:767px) {
  .port-new-top { padding: 2rem 1.25rem 18px !important; gap: 1rem !important; }
}
.port-new-left { flex: 1; min-width: 0; }
.port-new-eyebrow {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
  display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem;
}
.port-new-eyebrow::before { content: ''; display: block; width: 16px; height: 1px; background: var(--dim); }
.port-new-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -.015em; line-height: 1; color: var(--light);
  text-transform: uppercase; margin-bottom: 0;
}
.port-new-h2 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: 58%; color: var(--off); text-transform: none; letter-spacing: 0;
  display: inline; margin-left: .5em;
}
.port-new-tabs-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9999px;
  padding: 4px;
  width: fit-content;
}
.port-new-tab-btn {
  font-family: var(--font-display);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  background: transparent;
  border: none;
  border-radius: 9999px;
  padding: .55rem 1.25rem;
  cursor: pointer;
  position: relative;
  transition: color .2s, background .2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .4em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.port-new-tab-btn::after { display: none; }
.port-new-tab-btn:hover { color: var(--off); }
.port-new-tab-btn.active {
  color: var(--black);
  background: var(--light);
}
.port-new-tab-btn svg { opacity: .5; transition: opacity .2s; flex-shrink: 0; }
.port-new-tab-btn.active svg { opacity: 1; }
.port-new-tab-btn:hover svg { opacity: .75; }

/* Swipe hint, fade gradient droite sur mobile */
.port-tabs-wrap {
  position: relative;
}
.port-tabs-wrap::after {
  content: '';
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--black));
  pointer-events: none;
  border-radius: 0 9999px 9999px 0;
}

/* Panels */
.pnl-acc { display: none; }
.pnl-acc.active { display: block; }


@media(max-width:500px) {
  .port-new-top {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 20px;
  }
  .port-tabs-wrap {
    display: block;
    width: 100%;
    overflow-x: visible;
  }
  .port-tabs-wrap::-webkit-scrollbar { display: none; }
  .port-tabs-wrap::after { display: none; }
  .port-new-tabs-row {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }
  .port-new-tab-btn {
    flex: 1;
    justify-content: center;
    padding: .5rem .4rem;
    font-size: .65rem;
    white-space: nowrap;
  }
}

/* ── Behance / Instagram, footer galerie ── */
.port-gallery-footer {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem clamp(1.25rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.port-gallery-footer-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.port-gallery-footer-text {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: normal;
  flex-shrink: 1;
  text-align: center;
  line-height: 1.6;
}
.port-gallery-footer-link {
  color: var(--off);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.port-gallery-footer-link:hover {
  color: var(--light);
  border-color: var(--light);
}
@media(max-width:767px) {
  .port-gallery-footer { padding: 1.5rem 1.25rem; gap: 1rem; }
  .port-gallery-footer-text { font-size: .68rem; }
}

/* ============================================================ */
/* SECTION, Utility / Fixes mineurs */
/* ============================================================ */
/* ── SOCIAL PROOF fond sombre, overrides ── */
#social-proof .sec-label { color: var(--dim) !important; }
#social-proof .sec-label::after { background: var(--border2) !important; }


#social-proof .reveal-line::before { background: var(--border2) !important; }

/* ============================================================ */
/* SECTION, Uranus / GSAP Pack */
/* ============================================================ */


        /* ── Covers Spotify, liste éditoriale (Proposition B) ── */
        
        
        
        
        
        
        
        
        /* Pastille Spotify à droite */
        
        
        
        /* Overlay obsolète (ancien design grille), neutralisé */

/* ============================================================ */
/* SECTION, Testimonials, SP, Social Proof */
/* ============================================================ */
/* ── ABOUT V2, redesign premium ── */
#about { padding: 5rem 3rem; border-bottom: 1px solid var(--border); background: var(--dark); position: relative; overflow: hidden; }


/* Photo col */


/* Badge flottant haut-gauche */


/* Stats overlay bas */


/* For Creators, accès discret URANUS */


/* Contenu texte */


/* Proposition de valeur isolée */

/* Stat bar */


@media(max-width:480px) {
}


/* Tools glow animation */


@keyframes toolGlow {
  0%, 70%, 100% {
    color: var(--dim);
    border-color: rgba(255,255,255,.08);
    box-shadow: none;
  }
  35% {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb),0.32);
    box-shadow: 0 0 10px rgba(var(--accent-rgb),0.12), inset 0 0 8px rgba(var(--accent-rgb),0.06);
  }
}


/* ============================================================ */
/* SECTION, Mobile Tab Bar */
/* ============================================================ */

  
  
  
  
  
  
  
  
  
  
  
  @media(max-width: 860px) {
  }
  /* legacy (masqués) */

  

/* ============================================================ */
/* SECTION, Carousels & Swipe */
/* ============================================================ */
/* ══ PORTRAITS GRID, layout stable, identique mobile/desktop ══ */
  

  

  
  

  /* Carte portrait */
  /* ── OPTION B, galerie carrée, nom & rôle HORS de la photo ── */
  

  /* Plaque photo carrée */
  

  

  /* Repères de coin (teal), apparaissent au survol */
  

  /* Info SOUS la photo */
  
  
  

  /* Lien Instagram, icône texte alignée à droite de l'info */
  

  /* ── Hover desktop uniquement ── */
  

  /* ── Mobile : photo légèrement éclaircie, IG visible ── */
  @media(hover: none) {
  }

  /* ── Reveal scroll, clip-path décalé par carte ── */
  
  

/* ============================================================ */
/* SECTION, Overlays & Modals */
/* ============================================================ */
/* ── Process : fond sombre unifié (cohérence avec le reste du site) ──
   Anciennement fond vert (accent). Repassé en sombre : le teal redevient
   l'accent (numéros, pills, traits) et les textes reprennent leur couleur
   claire par défaut. Les panneaux .pieter-step-content sont déjà en var(--black). */
/* #process background: repris par le style inline de la section (redesign Méthodologie crème) */
/* Badge des étapes, teal sur les panneaux sombres */


#pieter-process-wrap { position: relative; }

/* ============================================================ */
/* SECTION, About, Stats, Trust */
/* ============================================================ */
/* ── PRIX AFFICHÉS SUR LES CARDS ── */


/* Prix secondaire USD */


/* ── SWIPE HINT ── */
.swipe-hint {
  display: none;
  align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
  padding: .5rem 1.5rem .75rem;
  animation: swipeHintPulse 2s ease-in-out 1s 3;
}

/* Cache après le premier scroll */
.swipe-hint.hidden { display: none !important; }

/* ── IN MOTION : cartes moins hautes sur mobile pour ne pas bloquer le scroll vertical ── */

@media(max-width:600px){
  #acc-motion .work-card{
    width:70vw !important;
    aspect-ratio:9/13 !important;
  }
}

/* ── MARGES MOBILES GLOBALES ── */
@media(max-width:600px) {
  .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  section, #about, #services, #press, #faq, #contact { overflow-x: hidden; }
  /* #process et #pricing exclus : leurs enfants carousel utilisent overflow-x:auto + scroll-snap.
     Un parent overflow:hidden devient scroll-container implicite sur iOS → bloque les swipes. */
  #process, #pricing { overflow: visible; }
  
  
  
  
  
  
  
  
  
  .cqf-row { grid-template-columns: 1fr !important; }
  .cqf-chips { gap: .4rem; }
  
}

@media(max-width:380px) {
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  
  
}

/* ── PROCESS TIMELINE ── */
#process { padding: 6rem 0; border-bottom: 1px solid var(--border); }


.proc-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: .9rem; color: var(--light); margin-bottom: .5rem;
}


/* Conditions */


/* Valeur en grand, chiffre accent */


/* Label, titre sobre */


/* Détail, sous-texte fin */


/* Explication, texte léger, séparé */


@media(max-width:600px) {
  /* Carousel horizontal natif, scroll-snap */
  
  
  
  
  /* Nav wrapper : hint + dots */
  
  
  .proc-conds-hint.hidden { opacity: 0; pointer-events: none; }
  @keyframes hint-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
  }
  /* Dots */
  
  
  .proc-conds-dot.active {
    background: rgba(0,0,0,.7);
    width: 14px;
    border-radius: 4px;
  }
}

/* ============================================================ */
/* SECTION, Contact & Form */
/* ============================================================ */
/* ── CONDITIONS GÉNÉRALES REDESIGN ── */

/* Ligne accent haut */


/* Grille des rows */


/* Row pleine largeur */


/* Clé */


/* Valeur wrap */


/* Grand chiffre accent */


/* Texte détail */


/* ============================================================ */
/* SECTION, Motion & Morph */
/* ============================================================ */
/* ── FAQ REDESIGN v2, labels blanc/noir ── */
#faq { padding: 5rem 0; border-bottom: 1px solid var(--border); }
.faq-header { margin-bottom: 3rem; }
.faq-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -.0125em; line-height: 1.05; margin-top: .5rem;
  color: var(--light);
}
.faq-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px; overflow: hidden;
}
/* Séparateurs entre cellules */
.faq-item2:nth-child(odd) { border-right: 1px solid var(--border); }
.faq-item2:nth-child(1),.faq-item2:nth-child(2) { border-bottom: 1px solid var(--border); }
.faq-item2:nth-child(3),.faq-item2:nth-child(4) { border-bottom: 1px solid var(--border); }

.faq-item2 {
  background: var(--light);
  padding: 1.6rem 1.75rem;
  position: relative;
  transition: background .25s, color .25s;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* État fermé : fond clair, texte noir */
.faq2-q {
  background: none; border: none; cursor: pointer;
  width: 100%; text-align: left;
  font-family: var(--font-display); font-weight: 700;
  font-size: .88rem; letter-spacing: -.005em;
  color: #0d0d0d; line-height: 1.45;
  padding: 0; padding-right: 3rem;
  transition: color .2s;
}
.faq2-num {
  color: rgba(0,0,0,.06) !important;
}
.faq2-icon {
  border-color: rgba(0,0,0,.18) !important;
  color: rgba(0,0,0,.45) !important;
}
/* État ouvert : fond blanc pur, texte noir renforcé */
.faq-item2.open {
  background: #ffffff;
}
.faq-item2.open .faq2-q { color: #000000 !important; font-weight: 700; }
.faq-item2.open .faq2-a p { color: #222222 !important; }
.faq-item2.open .faq2-a p strong { color: #000000 !important; }
.faq-item2.open .faq2-a p a { color: #000000 !important; text-decoration: underline; }
.faq-item2.open .faq2-num { color: rgba(0,0,0,.05) !important; }
.faq-item2.open .faq2-icon {
  background: #000000 !important; border-color: #000000 !important;
  color: #ffffff !important; transform: rotate(180deg);
}

.faq2-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.9rem; letter-spacing: -.025em; line-height: 1;
  color: rgba(255,255,255,.04);
  position: absolute; top: .9rem; right: 1.4rem;
  pointer-events: none; user-select: none;
  transition: color .3s;
}
.faq2-icon {
  position: absolute; top: 1.6rem; right: 1.75rem;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: rgba(255,255,255,.4);
  transition: transform .3s cubic-bezier(.16,1,.3,1), background .25s, border-color .25s, color .25s;
}
.faq2-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.16,1,.3,1), padding .35s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
.faq2-a > p { min-height: 0; overflow: hidden; }
.faq-item2.open .faq2-a { grid-template-rows: 1fr; padding-top: .85rem; }
.faq2-a p {
  font-size: .81rem; color: var(--off);
  line-height: 1.75; font-weight: 300; margin: 0;
  transition: color .25s;
}
.faq2-a p strong { color: var(--light); font-weight: 600; transition: color .25s; }

/* Hover sur items fermés */
.faq-item2:not(.open):hover { background: #e8e5e0; }

@media(max-width:700px) {
  .faq-grid { grid-template-columns: 1fr; border-radius: 12px; }
  .faq-item2:nth-child(odd) { border-right: none; }
  .faq-item2:nth-child(1),.faq-item2:nth-child(2),
  .faq-item2:nth-child(3),.faq-item2:nth-child(4) { border-bottom: 1px solid var(--border); }
  .faq-item2 { padding: 1.25rem 1.5rem; }
  .faq2-num { font-size: 2rem; top: .8rem; right: 1rem; }
  .faq2-q { padding-right: 3rem; }
  .faq2-icon { top: 1.25rem; right: 1.5rem; }
}

/* ============================================================ */
/* SECTION, Media Queries Mobile (Layout) */
/* ============================================================ */
/* ══════════════════════════════════════════════════════
   URANUS GFX PACK, ULTRA PREMIUM DROP 2.0
   ══════════════════════════════════════════════════════ */

#uranus {
  --u-bg:      #08040f;
  --u-bg2:     #0c0717;
  --u-surface: rgba(255,255,255,.028);
  --u-border:  rgba(139,92,246,.12);
  --u-border2: rgba(139,92,246,.22);
  --u-border3: rgba(139,92,246,.42);
  --u-accent:  #8b5cf6;
  --u-accent2: #6d3fd6;
  --u-accent3: #c4b5fd;
  --u-gold:    #f5c842;
  --u-gold2:   #fde68a;
  --u-dim:     #9182b8;
  --u-mid:     #a99ccb;
  --u-light:   #f1ecfe;
  background: var(--u-bg);
  border-top: 1px solid rgba(139,92,246,.18);
  border-bottom: 1px solid rgba(139,92,246,.18);
  position: relative; overflow: visible; padding: 0;
}

/* ── Atmospheric background ── */
#uranus::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% -8%,  rgba(46,20,90,.38) 0%, transparent 60%),
    radial-gradient(ellipse 60%  80% at 95%  90%,  rgba(139,92,246,.12) 0%, transparent 55%),
    radial-gradient(ellipse 40%  50% at 5%   85%,  rgba(46,20,90,.18) 0%, transparent 55%),
    radial-gradient(ellipse 70%  45% at 50% 115%,  rgba(42,150,128,.22) 0%, transparent 60%),
    radial-gradient(ellipse 35%  35% at 20%  20%,  rgba(46,20,90,.08) 0%, transparent 50%);
  pointer-events: none;
}
/* Noise grain */
#uranus::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; opacity: .028; pointer-events: none;
}

/* ── Stars ── */
.u-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.u-stars span {
  position: absolute; border-radius: 50%; background: #fff;
  animation: u-twinkle var(--d,3s) ease-in-out infinite var(--delay,0s);
}
@keyframes u-twinkle {
  0%,100% { opacity: var(--lo,.12); transform: scale(1); }
  50%      { opacity: var(--hi,.7);  transform: scale(1.5); }
}

/* ══ TOP BANNER, limited drop ══ */
.u-drop-banner {
  position: relative; z-index: 3;
  background: linear-gradient(90deg, rgba(46,20,90,.3) 0%, rgba(139,92,246,.15) 50%, rgba(46,20,90,.3) 100%);
  border-bottom: 1px solid rgba(139,92,246,.22);
  padding: .6rem 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  overflow: hidden;
}
.u-drop-banner::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.08), transparent);
  animation: u-sweep 4s linear infinite;
}
@keyframes u-sweep { to { left: 160%; } }
.u-banner-badge {
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--u-gold);
  background: rgba(245,200,66,.1);
  border: 1px solid rgba(245,200,66,.3);
  border-radius: 9999px;
  padding: .22rem .65rem;
  white-space: nowrap;

}
@keyframes u-badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,200,66,.25); }
  50%      { box-shadow: 0 0 0 5px rgba(245,200,66,0); }
}
.u-banner-txt {
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--u-mid);
}
.u-banner-txt strong { color: var(--u-accent3); }

/* ══ COUNTDOWN ══ */
.u-countdown-wrap {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .6rem;
  padding: 1.1rem 1.5rem 1.2rem;
  background: rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(139,92,246,.15);
}


/* ══ HERO BAND ══ */
.u-hero-band {
  position: relative; z-index: 2;
  padding: 4rem 3rem 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  max-width: 1200px; margin: 0 auto;
}
.u-eyebrow {
  display: inline-flex; align-items: center;
  padding: .28rem .85rem;
  border-radius: 9999px;
  border: 1px solid var(--u-border3);
  background: rgba(139,92,246,.07);
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--u-accent); margin-bottom: 1.75rem;
}
.u-hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 10vw, 5.8rem);
  line-height: .92; letter-spacing: -.02em;
  color: var(--u-light); margin-bottom: 1.1rem;
  word-break: keep-all; overflow-wrap: normal;
}
.u-hero-title .u-line2 {
  display: block;
  background: linear-gradient(118deg, #c4b5fd 0%, #8b5cf6 30%, #6d3fd6 60%, #c4b5fd 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; background-size: 200% auto;
  animation: u-shimmer 5s linear infinite;
}
@keyframes u-shimmer {
  0%   { background-position: 0%   center; }
  100% { background-position: 200% center; }
}
.u-hero-desc {
  font-size: .9rem; color: var(--u-mid); font-weight: 300;
  line-height: 1.8; max-width: 420px; margin-bottom: 2rem;
}
/* ══ HERO COPY EXTRAS ══ */
.u-asset-pills {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-bottom: 1.5rem;
}
.u-pill {
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--u-accent);
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 9999px;
  padding: .3rem .75rem;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.u-pill:hover {
  background: rgba(139,92,246,.18);
  border-color: rgba(139,92,246,.5);
}
.u-sep {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(139,92,246,.35) 0%, rgba(139,92,246,.08) 60%, transparent 100%);
  margin: 1.5rem 0;
}


/* Price */


/* CTA */


.u-btn-secondary {
  font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--u-mid); background: none;
  border: 1px solid var(--u-border2); border-radius: 9999px;
  padding: .95rem 1.6rem; cursor: pointer;
  transition: border-color .2s, color .2s; text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
}
.u-btn-secondary:hover { border-color: var(--u-accent); color: var(--u-accent); }

/* ══ BOX VISUAL ══ */
/* Teaser vidéo desktop, PiP épinglé dans la colonne visuelle (signature mobile) */
.u-teaser-desk { display: none; }
@media(min-width: 1081px) {
  .u-teaser-desk {
    display: block;
    position: absolute;
    top: -8px; right: -18px;
    width: 220px; z-index: 20;
    transform: rotate(3deg);
    filter: drop-shadow(0 22px 50px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(139,92,246,.32));
  }
  .u-teaser-frame {
    position: relative; border-radius: 12px; overflow: hidden;
    border: 1px solid rgba(120,230,210,.32);
    background: #090A02;
  }
  .u-teaser-frame video { width: 100%; display: block; }
  .u-teaser-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(2,12,10,.55) 0%, transparent 28%); }
  .u-teaser-tag {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; background: rgba(2,12,10,.6);
    border: 1px solid rgba(255,255,255,.16); border-radius: 9999px;
    font: 700 .5rem var(--font-body); letter-spacing: .1em; color: #EEF6BC;
  }
  .u-teaser-sound {
    position: absolute; bottom: 10px; right: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 11px; background: rgba(2,12,10,.62);
    border: 1px solid rgba(255,255,255,.22); border-radius: 9999px;
    font: 600 .56rem var(--font-body); letter-spacing: .04em;
    color: #FAFCEF; cursor: pointer; transition: border-color .2s;
  }
  .u-teaser-sound:hover { border-color: var(--u-accent); }
}
.u-box-visual {
  position: relative; display: flex;
  align-items: center; justify-content: center;
}

@keyframes u-float {
  0%,100% { transform: rotateX(6deg) rotateY(-18deg) translateY(0); }
  50%      { transform: rotateX(6deg) rotateY(-18deg) translateY(-20px); }
}


.u-box-front-img.fading { opacity: 0; }


.u-orb-badge {
  position: absolute; padding: .38rem .8rem; border-radius: 9999px;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  animation: u-bob var(--bd,4s) ease-in-out infinite var(--bdelay,0s);
}
@keyframes u-bob {
  0%,100% { transform: translateY(0) rotate(var(--br,-2deg)); }
  50%      { transform: translateY(-9px) rotate(var(--br,-2deg)); }
}
.u-orb-badge.b1 { top: 6%; right: -12%; background: rgba(46,20,90,.22); border: 1px solid rgba(139,92,246,.38); color: var(--u-accent3); --bd:5s;--bdelay:0s;--br:3deg; }
.u-orb-badge.b2 { bottom: 24%; left: -16%; background: rgba(245,200,66,.08); border: 1px solid rgba(245,200,66,.28); color: var(--u-gold); --bd:4s;--bdelay:1s;--br:-3deg; }
.u-orb-badge.b3 { top: 40%; right: -18%; background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--u-mid); --bd:6s;--bdelay:.5s;--br:1deg; }
.u-box-glow {
  position: absolute; bottom: -24px; left: 50%;
  transform: translateX(-50%); width: 220px; height: 70px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(46,20,90,.5) 0%, transparent 70%);
  filter: blur(18px);
  opacity: .7;
}
@keyframes u-glow-pulse {
  0%,100% { opacity: .6; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scaleX(1.25); }
}

/* ══ CONTENT GRID ══ */


/* ── Gallery ── */


.u-gal-item.big { grid-column: span 2; aspect-ratio: 2/1; }

/* ── Assets chips ── */
.u-assets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 2.5rem; }
.u-asset-chip {
  display: flex; align-items: center; gap: .65rem;
  padding: .8rem .95rem;
  background: var(--u-surface); border: 1px solid var(--u-border);
  border-radius: 12px;
  transition: border-color .2s, background .2s;
}
.u-asset-chip:hover { border-color: var(--u-border2); background: rgba(139,92,246,.05); }
.u-asset-icon2 {
  width: 36px; height: 36px; border-radius: 12px;
  background: rgba(139,92,246,.1); border: 1px solid var(--u-border2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--u-accent); font-size: .65rem;
}
.u-asset-name2 { font-family: var(--font-display); font-size: .75rem; font-weight: 700; color: var(--u-light); }
.u-asset-detail2 { font-size: .72rem; color: var(--u-dim); font-weight: 300; margin-top: .04rem; }

/* ── Why preorder ── */
.u-why-row {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem 0; border-bottom: 1px solid rgba(139,92,246,.06);
}
.u-why-row:last-child { border-bottom: none; }
.u-why-num {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  color: var(--u-accent2); background: rgba(46,20,90,.12);
  border: 1px solid rgba(46,20,90,.25); border-radius: 4px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: .05rem;
}
.u-why-txt { font-size: .8rem; color: var(--u-dim); font-weight: 300; line-height: 1.7; }
.u-why-txt strong { color: var(--u-light); font-weight: 600; }

/* ══ GALERIE PREMIUM URANUS ══ */
.u-gallery-premium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.u-gal-premium {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/5;
  border: 1px solid rgba(46,20,90,.2);
  cursor: pointer;
  background: rgba(8,5,20,.8);
  transition: border-color .3s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.u-gal-premium.big { grid-column: span 1; aspect-ratio: 4/5; }
.u-gal-premium:hover {
  border-color: rgba(139,92,246,.55);
  transform: scale(1.025);
  z-index: 3;
  box-shadow: 0 12px 48px rgba(46,20,90,.35), 0 0 0 1px rgba(139,92,246,.1) inset;
}
.u-gal-premium img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: .85;
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.u-gal-premium:hover img { transform: scale(1.07); opacity: 1; }
.u-gal-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(3,2,10,.82) 100%);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: .75rem;
  opacity: 0;
  transition: opacity .25s;
}
.u-gal-premium:hover .u-gal-overlay { opacity: 1; }
.u-gal-label {
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.u-gal-zoom {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(139,92,246,.22);
  border: 1px solid rgba(139,92,246,.3);
  display: flex; align-items: center; justify-content: center;
  color: #c4b5fd; flex-shrink: 0;
}
@media(max-width:600px){
  .u-gallery-premium { grid-template-columns: repeat(3, 1fr); gap: .3rem; }
  .u-gal-premium.big { grid-column: span 1; aspect-ratio: 4/5; }
}

/* ══ ORDER CARD ══ */

.u-card-header {
  padding: 1.75rem 1.75rem 1.5rem;
  border-bottom: 1px solid var(--u-border);
  background: linear-gradient(135deg, rgba(46,20,90,.2) 0%, rgba(139,92,246,.06) 100%);
  position: relative;
}
.u-card-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #6d3fd6, #c4b5fd, #c4b5fd, #c4b5fd, #6d3fd6, transparent);
}
.u-card-pack-name {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--u-accent); margin-bottom: .5rem;
}
.u-card-price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: nowrap; }
.u-card-price-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.6rem); font-weight: 700;
  letter-spacing: -.025em; color: var(--u-light); line-height: 1; white-space: nowrap;
}
.u-card-price-sub { font-size: .72rem; color: var(--u-dim); font-weight: 300; white-space: nowrap; }
.u-card-tag {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .65rem;
  padding: .25rem .7rem; border-radius: 9999px;
  background: rgba(245,200,66,.08); border: 1px solid rgba(245,200,66,.2);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--u-gold);
}

/* Card body + form */
.u-card-body { padding: 1.5rem 1.75rem; }
.u-field2 { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.u-field2 label {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--u-accent);
}
.u-field2 input {
  background: rgba(255,255,255,.035); border: 1px solid var(--u-border2);
  border-radius: 12px; padding: .8rem 1rem;
  font-family: var(--font-body); font-size: .85rem; color: var(--u-light);
  outline: none; width: 100%;
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none;
}
.u-field2 input::placeholder { color: var(--u-dim); opacity: .5; }
.u-field2 input:focus { border-color: var(--u-accent); box-shadow: 0 0 0 3px rgba(139,92,246,.1); }

.u-submit2 {
  width: 100%; font-family: var(--font-display);
  font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #47500B 0%, #8b5cf6 50%, #8b5cf6 100%);
  border: none; border-radius: 12px; padding: 1rem 1.5rem; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 8px 30px rgba(10,60,50,.55); margin-bottom: .85rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.u-submit2::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transition: left .55s;
}
.u-submit2:hover { transform: translateY(-1px); box-shadow: 0 14px 44px rgba(10,60,50,.7); }
.u-submit2:hover::before { left: 150%; }
.u-submit2:active { transform: translateY(0); }

/* WhatsApp confirm btn */
.u-wa-btn {
  width: 100%; font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  color: #fff;
  background: linear-gradient(135deg, #1aad4a, #25d366);
  border: none; border-radius: 12px; padding: 1rem 1.5rem; cursor: pointer;
  display: none; align-items: center; justify-content: center; gap: .65rem;
  text-decoration: none; margin-bottom: .75rem;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 24px rgba(37,211,102,.3);
}
.u-wa-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 36px rgba(37,211,102,.45); }
.u-wa-hint {
  display: none; margin-top: -.4rem; margin-bottom: .85rem;
  background: rgba(37,211,102,.07); border: 1px solid rgba(37,211,102,.18);
  border-radius: 12px; padding: .65rem .9rem;
  font-size: .72rem; color: var(--u-dim); line-height: 1.55; text-align: center;
}

.u-card-note {
  font-size: .72rem; color: var(--u-dim); text-align: center;
  margin-top: .85rem; line-height: 1.55; font-weight: 300;
}
.u-card-note strong { color: var(--u-accent); }

/* Trust row */
.u-trust-row {
  display: flex; justify-content: space-around;
  padding-top: 1rem; border-top: 1px solid var(--u-border); margin-top: 1rem;
}
.u-trust-item { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.u-trust-icon { font-size: .9rem; display:flex; align-items:center; justify-content:center; color: var(--u-accent, #c8fa64); }
.u-trust-label {
  font-size: .72rem; color: var(--u-dim); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
  font-family: var(--font-display);
}

/* Success state */
.u-success2 { display: none; text-align: center; padding: 2.5rem 1.5rem; }
.u-success-ring {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, rgba(46,20,90,.2), rgba(139,92,246,.1));
  border: 1px solid var(--u-border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.u-success2 h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; color: var(--u-light);
  letter-spacing: -.01em; margin-bottom: .5rem;
}
.u-success2 p { font-size: .8rem; color: var(--u-dim); font-weight: 300; line-height: 1.65; }

/* ══ RESPONSIVE ══ */
@media(max-width: 1080px) {
  .u-hero-band { grid-template-columns: 1fr; gap: 2rem; padding: 3.5rem 1.5rem 2.5rem; }
  .u-box-visual { order: -1; }
  
  
  
}
@media(max-width: 600px) {
  /* Conteneur boîte : rester dans les marges de l'écran */
  #uranus-visual {
    max-width: 100%;
    overflow: visible;
    padding: .5rem 1.25rem 1rem;
    box-sizing: border-box;
  }
  /* Banner */
  .u-drop-banner { padding: .55rem 1rem; gap: .4rem; flex-wrap: wrap; justify-content: center; }
  .u-banner-txt { font-size: .72rem; text-align: center; width: 100%; }

  /* Countdown, grand et bien lisible */
  .u-countdown-wrap { padding: 1rem 1rem 1.15rem; gap: .5rem; }
  
  
  
  
  

  /* Hero */
  .u-hero-band { padding: 3.5rem 1.25rem 2.5rem; gap: 2rem; }
  .u-hero-title { font-size: clamp(2.8rem, 13vw, 3.8rem); }
  .u-hero-desc { font-size: .85rem; margin-bottom: 1.5rem; }
  
  
  .u-orb-badge { font-size: .72rem; padding: .28rem .6rem; }
  .u-orb-badge.b1 { right: -2%; }
  .u-orb-badge.b2 { left: -3%; }
  
  .u-btn-primary, .u-btn-secondary { text-align: center; justify-content: center; width: 100%; }

  /* Content grid */
  
  .u-assets-grid { grid-template-columns: 1fr; }
  
  .u-gal-item.big { grid-column: span 2; }
  .u-asset-chip { padding: .7rem .8rem; }
  .u-asset-name2 { font-size: .72rem; }
  .u-asset-detail2 { font-size: .72rem; }
  .u-why-txt { font-size: .78rem; }

  /* Order card */
  
  .u-card-header { padding: 1.25rem; }
  .u-card-body { padding: 1.25rem; }
  .u-card-price-num { font-size: 2rem !important; }
  .u-field2 input { font-size: 16px !important; padding: .9rem 1rem; border-radius: 12px; }
  .u-field2 label { font-size: .72rem; }
  .u-submit2, .u-wa-btn { font-size: .9rem !important; min-height: 54px; }
  .u-trust-row { gap: .2rem; }
  .u-trust-label { font-size: .72rem; }
  .u-trust-icon { font-size: .85rem; }
  .u-success2 h4 { font-size: 1.05rem; }
}

/* ============================================================ */
/* SECTION, Media Queries Mobile (Animations) */
/* ============================================================ */
/* ══ URANUS BOX VISUAL ══ */
#uranus-visual{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.75rem,3vw,1.5rem);
  padding:.5rem 0 1rem;
  perspective:900px;
}

/* ── Boîte CSS 3D draggable ── */
#uranus-box-wrap{
  flex-shrink:0;
  width:clamp(200px,34vw,310px);
  position:relative;
  cursor:grab;
  user-select:none;
  touch-action:none;
  filter:drop-shadow(0 0 32px rgba(139,92,246,.45)) drop-shadow(0 8px 40px rgba(0,0,0,.8));
  transition:filter .4s ease;
}
#uranus-box-wrap:hover{
  filter:drop-shadow(0 0 48px rgba(139,92,246,.65)) drop-shadow(0 12px 50px rgba(0,0,0,.85));
}
#uranus-box-wrap:active{cursor:grabbing}

#uranus-box-inner{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  transform:rotateX(-12deg) rotateY(28deg);
}

/* Toutes les faces */
.ub-face{
  position:absolute;
  top:0; left:0;
  backface-visibility:hidden;
  overflow:hidden;
  background: #0E1003;
}
.ub-face img{
  width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  opacity:1;
  transition:opacity .55s ease;
}
#uranusBoxImg.fading { opacity: 0; }

/* FRONT : face de référence, colle au plan */
#ub-front{
  /* positionné par JS : width, height, translateZ(D/2) */
  border:1.5px solid rgba(139,92,246,.75);
  box-shadow:0 20px 60px rgba(0,0,0,.9),0 0 0 1px rgba(168,240,228,.18) inset, 0 0 80px rgba(139,92,246,.25);
  border-radius:4px;
}
/* BACK : charnière sur le bord gauche du front, pivote 180° vers l'arrière */
#ub-back{
  background:#0B0C04;
  border:1px solid rgba(139,92,246,.2);
  border-radius:4px;
}
/* RIGHT : charnière sur le bord droit du front, pivote 90° vers la droite */
#ub-right{
  background:#131505;
  border:1px solid rgba(139,92,246,.25);
}
/* LEFT : charnière sur le bord gauche du front, pivote -90° vers la gauche */
#ub-left{
  background:#131505;
  border:1px solid rgba(139,92,246,.25);
}
/* TOP : charnière sur le bord haut du front, pivote -90° vers le haut */
#ub-top{
  background:linear-gradient(180deg,rgba(139,92,246,.3) 0%,rgba(6,40,33,.8) 100%);
  border:1px solid rgba(139,92,246,.35);
}
/* BOTTOM : charnière sur le bord bas du front, pivote 90° vers le bas */
#ub-bot{
  background:#06030e;
  border:1px solid rgba(139,92,246,.1);
}
/* Overlay gradient front */
#ub-ov{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,2,10,0) 45%,rgba(3,2,10,.88) 100%);
}
#ub-lbl{position:absolute;bottom:0;left:0;right:0;padding:.5rem .55rem;}
#ub-lbl .ubn{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.65rem,2.2vw,.88rem);
  color:#fff;letter-spacing:.06em;line-height:1.1;
  text-shadow: 0 1px 12px rgba(0,0,0,.9);
}
#ub-lbl .ubs{
  font-size:.72rem;color:var(--u-accent3);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;margin-top:.15rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
/* Drag hint */
#ub-hint{
  position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(139,92,246,.28);pointer-events:none;white-space:nowrap;
  transition:opacity .4s;
}

/* ── PSD Cards empilées ── */
#uranus-psd-stack{
  position:relative;
  width:clamp(120px,24vw,200px);
  height:clamp(170px,34vw,290px);
  flex-shrink:0;
}
.upsd-card{
  position:absolute;
  width:100%;
  aspect-ratio:3/4;
  border-radius:4px;
  overflow:hidden;
  border:1px solid rgba(139,92,246,.22);
  box-shadow:0 8px 24px rgba(0,0,0,.65);
  transform-origin:bottom center;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  cursor:pointer;
}
.upsd-card img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;}
.upsd-badge{
  position:absolute;top:5px;left:5px;
  background:rgba(3,2,10,.85);color:#8b5cf6;
  font-family:var(--font-display);font-size:7px;font-weight:700;
  letter-spacing:.1em;padding:2px 5px;border-radius:4px;
  border:1px solid rgba(139,92,246,.22);
  pointer-events:none;
}
/* Stack fan positions, 5 cartes */
#upsd-0{transform:rotate(-10deg) translateY(0px);z-index:1;}
#upsd-1{transform:rotate(-5deg) translateY(-3px);z-index:2;}
#upsd-2{transform:rotate(0deg) translateY(-6px);z-index:3;}
#upsd-3{transform:rotate(5deg) translateY(-9px);z-index:4;}
#upsd-4{transform:rotate(10deg) translateY(-12px);z-index:5;}
/* Hover: fan out */
#uranus-psd-stack:hover #upsd-0{transform:rotate(-20deg) translateY(10px);}
#uranus-psd-stack:hover #upsd-1{transform:rotate(-10deg) translateY(2px);}
#uranus-psd-stack:hover #upsd-2{transform:rotate(0deg) translateY(0px);}
#uranus-psd-stack:hover #upsd-3{transform:rotate(10deg) translateY(2px);}
#uranus-psd-stack:hover #upsd-4{transform:rotate(20deg) translateY(10px);}

/* Mobile */
@media(max-width:480px){
  #uranus-visual{
    gap:.4rem;
    padding:.5rem 1rem 1rem;
    max-width: 100%;
    box-sizing: border-box;
  }
  #uranus-box-wrap{width:clamp(150px,54vw,210px);}
  #uranus-psd-stack{width:clamp(95px,30vw,135px);height:clamp(135px,42vw,190px);}
}

/* ============================================================ */
/* SECTION, Media Queries Mobile (Components) */
/* ============================================================ */
/* ══ URANUS ACCORDION ══ */
.u-accordion {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto;
  padding: 0 3rem 5rem;
}
.u-accordion-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border: none; border-bottom: 1px solid rgba(139,92,246,.14);
  background: none; cursor: pointer;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--u-accent);
  transition: color .2s;
}
.u-accordion-trigger:hover { color: var(--u-accent3); }
.u-accordion-trigger-left { display: flex; align-items: center; }
.u-accordion-chevron {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--u-dim);
  transition: transform .35s cubic-bezier(.16,1,.3,1), color .2s;
}
.u-accordion-trigger[aria-expanded="true"] .u-accordion-chevron {
  transform: rotate(180deg);
  color: var(--u-accent);
}
.u-accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .35s ease;
  opacity: 0;
}
.u-accordion-panel.open {
  max-height: 2000px;
  opacity: 1;
}
.u-accordion-panel-inner {
  padding: 1.75rem 0 2rem;
}

/* order card inside accordion, full width, simpler */
.u-order-card-inline {
  background: rgba(139,92,246,.04);
  border: 1px solid rgba(139,92,246,.18);
  border-radius: 12px;
  overflow: hidden;
  max-width: 520px;
}
.u-order-card-inline .u-card-header {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid rgba(139,92,246,.1);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
}
.u-order-card-inline .u-card-pack-name {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--u-accent);
}
.u-order-card-inline .u-card-price {
  display: flex; align-items: baseline; gap: .4rem;
}
.u-order-card-inline .u-card-price-num {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1;
}
.u-order-card-inline .u-card-price-sub {
  font-size: .68rem; color: var(--u-dim); font-weight: 300; line-height: 1.3;
}
.u-order-card-inline .u-card-tag {
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .22rem .65rem; border-radius: 9999px; border: 1px solid;
  white-space: nowrap;
}
.u-order-card-inline .u-card-body { padding: 1.5rem 1.75rem; }


@media(max-width:600px){
  .u-accordion { padding: 0 1.25rem 3.5rem; }
}

/* ============================================================ */
/* SECTION, Fixes iOS Safari */
/* ============================================================ */
/* ── BOTTOM TAB BAR ── */
#mob-tab-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 8400;
  /* Fix micro-mouvement iOS : forcer GPU layer stable */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Fond épuré, pas de border-top, juste une ombre diffuse vers le haut */
  background: rgba(6,6,6,.96);
  box-shadow: 0 -1px 0 rgba(255,255,255,.06), 0 -20px 40px rgba(0,0,0,.5);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* Chaque tab */
.mob-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 6px;
  text-decoration: none;
  color:var(--dim);
  transition: color .18s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  /* Isolation pour éviter que l'indicateur actif déborde */
  isolation: isolate;
}

/* Icône, stroke fin, pas de fill */
.mob-tab svg {
  width: 17px; height: 17px;
  stroke-width: 1.6;
  display: block;
  flex-shrink: 0;
  transition: transform .22s cubic-bezier(.16,1,.3,1), opacity .18s;
}

/* Label, encore plus discret */
.mob-tab span {
  display: block;
  font-family: var(--font-display);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  opacity: .7;
  transition: opacity .18s;
}

/* État actif, pas de glow, juste couleur + point */
.mob-tab.active {
  color: var(--light);
}
.mob-tab.active span { opacity: 1; }
.mob-tab.active svg { transform: translateY(-1px); }

/* Point indicateur actif, minimaliste */
.mob-tab.active::after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--light);
}

/* Bouton Contact, texte seul, pas de pill */
.mob-tab-cta {
  color: var(--light) !important;
  background: none;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px;
  margin: 10px 8px;
  flex: none;
  padding: 0 12px;
  width: auto;
  height: 36px;
  min-height: auto;
  gap: 3px;
  align-self: center;
  transition: border-color .18s, color .18s;
}
.mob-tab-cta:active {
  border-color: rgba(255,255,255,.4);
  opacity: .8;
}
.mob-tab-cta::before, .mob-tab-cta::after { display: none !important; }
.mob-tab-cta svg { stroke: var(--light) !important; width: 14px; height: 14px; }
.mob-tab-cta span { color: var(--light) !important; opacity: 1; font-size: 7.5px; }

/* ============================================================ */
/* SECTION, Fixes Performance GPU */
/* ============================================================ */
#floating-cta{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:8000;
  transform:translateY(20px);opacity:0;pointer-events:none;
  transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);
}
#floating-cta.visible{opacity:1;transform:translateY(0);pointer-events:auto}
#floating-cta a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.05em;
  background:var(--accent);color:var(--black);border:none;border-radius:9999px;
  padding:.65rem 1.25rem;text-decoration:none;
  box-shadow:0 4px 24px rgba(255,255,255,0.19),0 2px 8px rgba(0,0,0,.4);
  transition:opacity .2s,transform .2s,box-shadow .2s;
}
#floating-cta a:hover{opacity:.9;transform:scale(1.04);box-shadow:0 6px 32px rgba(255,255,255,0.25)}
#floating-cta svg{flex-shrink:0}
/* Masquer sur mobile, la nav bottom suffit */
@media(max-width:767px){#floating-cta{display:none}}

/* ============================================================ */
/* SECTION, Fixes Visibilité GSAP */
/* ============================================================ */
/* ── MOBILE FALLBACK UNIVERSEL : forcer la visibilité des éléments GSAP sur mobile ──
   On utilise une transition fade-in subtile plutôt qu'un forçage brutal pour
   conserver un feeling animé sans bloquer le scroll.
── */


/* ── YouTube thumbnail placeholder ── */
.yt-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #111;
  z-index: 1;
}
.yt-placeholder svg { opacity: 0.3; }

/* ════════════════════════════════════════════════════════════
   MOBILE TOUCH-ACTION FIX, MDG Creative Studio
   Problème : le doigt posé sur une image ou une card bloque
   le scroll vertical. Solution : touch-action:pan-y sur tout
   ce qui ne doit PAS capturer le geste horizontal.
   ════════════════════════════════════════════════════════════ */

/* ── Images dans sections fixes (hors carousel) : laisser passer le scroll vertical ── */
img,
video,
.hero-photo-wrap img,
.hero-photo-wrap video,
.pieter-step-media img,
.pieter-step-media video,
.about-photo-wrap img,
.morph-slide img,
.sp-vcard-hero-thumb img,
.sp-vcard-row-thumb img,
.trust-logo,
.ac-card img,
.u-gallery-premium img,
.u-gal-premium img {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Éléments fixes (jamais dans un carousel horizontal) : pan-y ── */
/* NOTE : .pieter-step/.pieter-step-content/.pieter-step-media sont retirés ici
   car sur mobile (<768px) ils vivent dans un carousel horizontal (#pieter-process-track).
   Le touch-action est géré par l'override @media ci-dessous. */
/* NOTE2 : #process est intentionnellement absent ici, sur mobile il contient
   #pieter-process-track (carousel horizontal). Le pan-y serait hérité par le track
   et annulerait le pan-x. La section process elle-même n'a pas besoin de pan-y
   car elle ne contient pas d'images ou d'éléments qui capturent le touch. */
.svc-card,
.trust-item,
.ac-card,
.sp-card,
.sp-vcard,
.process-step,
.sk,
.faq-item2,
.about-photo-wrap,
.about-morph-wrap,
.morph-slide,
.u-box-visual,
.u-order-card,
.u-gal-premium,
.u-gallery-premium,
.pieter-step-num,
.pieter-step-eyebrow,
.pieter-step-title,
.pieter-step-body,
.collabs-avatar,
.collab-item,
#hero,
.hero-photo-wrap,
.hero-gradient-overlay,
#about,
#services,
#social-proof,
#contact,
#collabs,
#trust,
#pricing,
footer {
  touch-action: pan-y;
}

/* Carousel horizontal dans #collabs : géré directement dans le CSS inline de la section */

/* ── NE PAS mettre pan-y sur pack-card/adv-card/rollout-card/work-card/cov-card
   car ils sont dans des carousels horizontaux, le JS direction-aware gère ── */

/* ── Carrousels JS direction-aware : touch-action:pan-x pan-y
   pan-x pan-y = le browser autorise les deux directions, sans décider à l'avance.
   Le handler attachDirectionAwareTouch détecte l'intention (|dx|>|dy|) puis
   appelle e.preventDefault() uniquement si le geste est clairement horizontal.
   IMPORTANT : pan-y seul interdisait au compositing thread iOS de déléguer le
   horizontal au JS → e.preventDefault() ignoré → swipe bloqué. */
.work-track,
.cov-track,
.mot-track,
.sp-videos-track {
  touch-action: pan-x pan-y !important;
}

/* ── Témoignages : les cartes et leurs images doivent hériter pan-x pan-y
   du track, sans ça, le doigt posé sur la photo déclenche pan-y du parent
   .sp-card et le compositing thread iOS ignore e.preventDefault() horizontal ── */
.sp-slide,
.sp-vcard-hero,
.sp-vcard-hero-thumb,
.sp-vcard-hero-thumb img,
.sp-vcard-hero-body {
  touch-action: pan-x pan-y !important;
}

/* trust-strip-inner, port-tabs = scroll natif sans handler JS */


/* ── Grids pricing en mode carousel (mobile) : pan-x pan-y pour scroll dans les 2 sens ── */


/* ── BA slider : contrôle JS complet sur les deux axes (aucune délégation browser) ── */
.ba-slider {
  touch-action: none !important;
}

/* ── Process carousel : renforcement global (couvre tous les breakpoints) ── */
/* Les règles media (768px) définissent déjà pan-x sur #pieter-process-track ;
   ce bloc garantit qu'aucun parent ne le réécrase en dehors du breakpoint. */


/* ── Sections hero + photo-wrap : ne PAS bloquer le scroll ── */


/* ── Suppression du cursor:none sur mobile (cause freeze perçu) ── */
@media (hover: none) {
  body { cursor: auto !important; }
  .cur, .cur-r { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE ANIMATIONS, restaurer les transitions CSS
   Les keyframes sont conservées mais les éléments
   démarrent visibles (opacity:1) sur mobile via le CSS
   media query existant. On restaure ici les transitions
   hover uniquement sur desktop (hover:hover).
   ══════════════════════════════════════════════════════ */
@media (hover: none) {
  /* Désactiver les effets hover qui causent du lag tactile */
  .work-card:hover,
  .cov-card:hover,
  .svc-card:hover,
  .pack-card:hover,
  .pieter-step:hover .pieter-step-media img,
  .pieter-step:hover .pieter-step-media video {
    transform: none !important;
  }
  .work-card:hover .work-img,
  .cov-card:hover .cov-img {
    transform: none !important;
    filter: none !important;
  }
  /* Transitions plus courtes sur touch = fluidité perçue */
  .work-card,
  .cov-card,
  .svc-card {
    transition: none !important;
  }

  /* cov-card : meta en caption sous l'image */
  .cov-card {
    overflow: hidden !important;
    height: auto !important;
    aspect-ratio: unset !important;
    display: flex;
    flex-direction: column;
    background: var(--surface) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.4) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
  }
  .cov-card .cov-img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 0;
    display: block;
    flex-shrink: 0;
  }
  .cov-card::after { opacity: 0 !important; }
  .cov-cat-tag { display: none; }
  .cov-meta {
    position: static !important;
    padding: .55rem .2rem .1rem !important;
    opacity: 1 !important;
    transform: none !important;
    gap: .15rem;
  }
  .cov-title { font-size: .92rem; }
  .cov-artist { font-size: .7rem; }
}

/* ── MODAL PACK mobile : animation modalIn gelée → modal invisible sans ce fix.
   Couvert ici car le Système 2 (@media max-width:900px ~ligne 4324) pose
   animation:none sur les éléments GSAP, ce qui gèle modalIn avant qu'elle commence.
   ── */
@media (hover: none), (max-width: 900px) {
  .pack-modal-overlay.open .pack-modal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================ */
/* SECTION, Correctifs Post-Deploy */
/* ============================================================ */
img,video{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}
/* Conteneurs interactifs : pointer-events:auto pour que les touch events remontent correctement */
.work-card,.cov-card,.ac-card,.about-photo-wrap,.collabs-avatar,.nav-logo-wrap,.trust-item,.sp-vcard-hero,.work-arrow,.cov-arrow{pointer-events:auto}
/* Les tracks eux-mêmes doivent recevoir les touch events pour le scroll natif */
.work-track,.cov-track,.sp-videos-track,.ac-grid,.packs-grid,.advanced-grid,.pieter-process-track,.port-tabs,.sp-cards-row{pointer-events:auto}
/* Overlays : pointer-events:none pour ne PAS intercepter les gestes tactiles */
.motion-play-overlay,.work-overlay{pointer-events:none}
/* Images dans les conteneurs : pointer-events:none pour la protection */
.work-card img,.cov-card img,.ac-card img,.about-photo-wrap img,.collabs-avatar img,.sp-vcard-hero img{pointer-events:none}

/* ══ NORMALISATION ESPACEMENT GLOBAL ══ */
section + section{margin-top:0!important}
main > section{margin-top:0!important;margin-bottom:0!important}


/* ══ FIX TOUCH MOBILE, détection d'intention tactile correcte ══
   Les cards dans les carousels doivent laisser passer pan-x ET pan-y
   pour que le JS direction-aware puisse détecter l'intention et appeler
   e.preventDefault() sur le geste horizontal confirmé.
   pan-y seul = le browser iOS ignore le preventDefault JS sur l'axe X. */
@media(hover:none){
  .work-card,.cov-card,.ac-card{touch-action:pan-x pan-y!important}
  .work-card img,.cov-card img,.ac-card img{touch-action:pan-x pan-y!important}
  .motion-play-overlay,.work-overlay,.work-card-bar,.sp-vcard-hero-body,.sp-vcard-badge{pointer-events:none!important}
  .sp-vcard-hero{pointer-events:auto!important}
  .cov-meta,.work-meta{pointer-events:none!important}
}

/* ============================================================ */
/* SECTION, Correctifs Finaux / Urgents */
/* ============================================================ */
/* ── BOUTONS ARTISTES INLINE ── */
.about-artist-btn {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, opacity .2s;
  line-height: inherit;
  vertical-align: baseline;
}
.about-artist-btn:hover {
  border-color: var(--accent);
  opacity: .85;
}
.about-artist-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── POPUP ── */
#ig-artist-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  /* Son fond porte un backdrop-filter plein ecran. Sans visibility:hidden
     cette couche reste vivante, fermee ou non. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s cubic-bezier(.16,1,.3,1), visibility 0s .25s;
}
#ig-artist-popup.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity .25s cubic-bezier(.16,1,.3,1), visibility 0s;
}
#ig-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}
#ig-popup-card {
  position: relative;
  z-index: 1;
  background: #181818;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem 1.75rem 1.5rem;
  max-width: 340px;
  width: 100%;
  text-align: center;
  transform: translateY(16px) scale(.97);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
#ig-artist-popup.open #ig-popup-card {
  transform: translateY(0) scale(1);
}
#ig-popup-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: #fff;
}
#ig-popup-label {
  font-family: var(--font-display);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .4rem;
}
#ig-popup-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--light);
  margin-bottom: .65rem;
  letter-spacing: -.005em;
}
#ig-popup-sub {
  font-size: .82rem;
  color: var(--off);
  line-height: 1.65;
  margin-bottom: 1.4rem;
}
#ig-popup-sub strong {
  color: var(--light);
  font-weight: 600;
}
#ig-popup-actions {
  display: flex;
  gap: .6rem;
}
#ig-popup-cancel {
  flex: 1;
  background: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .7rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  color: var(--off);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
#ig-popup-cancel:hover { border-color: rgba(255,255,255,.28); color: var(--light); }
#ig-popup-confirm {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: linear-gradient(135deg, #e6683c, #dc2743, #bc1888);
  border: none;
  border-radius: 12px;
  padding: .7rem 1rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: opacity .2s;
}
#ig-popup-confirm:hover { opacity: .88; }

@media(max-width: 480px) {
  #ig-popup-card { padding: 1.5rem 1.25rem 1.25rem; border-radius: 12px; }
  #ig-popup-title { font-size: 1.1rem; }
}


/* ================================================================ */
/* @media(max-width:900px), 1/4, LAYOUT & SPACING                */
/* ================================================================ */
@media(max-width:900px){
  /*, layout bloc 1, */
  section,main,header,footer,nav,.container{max-width:100vw;box-sizing:border-box}

  /*, layout bloc 4, */
  
  

  /*, layout bloc 5, */

  /*, layout bloc 7, */

  /*, layout bloc 8, */
  
  
  

  /*, layout bloc 10, */
  #collabs{padding:2rem 1.5rem 3rem}
  
  
  
  
  
  

  /*, layout bloc 13, */
  #work{padding:3rem 0}
  .work-track-wrap{padding:0}
  /* Supprimer les rideaux noirs sur mobile, ils coupent les images sur les bords */
  .work-track-wrap::before,.work-track-wrap::after{display:none}
  .work-track{padding-left:1.5rem;padding-right:1.5rem}
  .work-card{width:72vw;max-width:280px}
  .work-footer{margin:2rem 1.5rem 0}
  .work-nav{display:none}
  .work-card:hover{transform:none}
  .work-card .work-img{transition:filter .3s}

  /*, layout bloc 14, */
  #covers{padding:3rem 0}
  
  .cov-track-wrap{padding:0}
  /* Supprimer les rideaux noirs sur mobile */
  .cov-track-wrap::before,.cov-track-wrap::after{display:none}
  .cov-track{padding-left:1.5rem;padding-right:1.5rem}
  .cov-card{width:72vw;max-width:280px}
  .cov-nav{display:none}
  .cov-card:hover{transform:none}
  .cov-card .cov-img{transition:filter .3s}

  /*, layout bloc 16, */
  #contact::after{display:none}
  #contact .contact-inner{grid-template-columns:1fr;min-height:auto}
  .contact-left-col{padding:5rem 1.5rem 3rem;border-right:none;border-bottom:1px solid var(--border)}
  .contact-right-col{padding:3rem 1.5rem 5rem}
  .contact-side-num{display:none}
  .contact-h2{font-size:clamp(2.4rem,7vw,3.5rem)}

  /*, layout bloc 18, */
  nav:not(#mob-tab-bar){padding:.75rem 1.25rem}
  .nav-links,.nav-right{display:none}
  /* Afficher le lang-toggle sur mobile à la place du burger */
  .nav-right { display: flex !important; }
  .nav-right .nav-avail, .nav-right .nav-cta { display: none !important; }
  .nav-burger{display:none}
  .nav-logo{font-size:.78rem;letter-spacing:.06em;white-space:nowrap}
  /* Nav top row prend toute la largeur pour le row dessous */
/* ── HERO MOBILE : colonne, texte + stats dans le flux ── */
  #hero{
    flex-direction:column;
    min-height:100dvh;
    align-items:stretch;
    position:relative;
    overflow:hidden;
  }
  /* Photo : plein écran absolu dans le hero */
  
  
  
  /* Texte : flex:1, stats poussées en bas */
  
  /* Stats : dans le flux, 3 colonnes */
  
  
  
  

  /* Sections */
  #about{padding:3rem 1.5rem;background:var(--dark)}
  #collabs{padding:2rem 1.5rem 3rem}
  
  
  
  
  
  
  
  
  
  
  
  #trust{padding:3rem 1.5rem}
  
  
  #services{padding:3rem 1.5rem 2rem}
  
  
  
  
  
  #contact{padding:0}
  
  .contact-h2{font-size:clamp(2rem,8vw,3rem)}
  footer{padding:1.5rem;flex-direction:column;gap:.6rem;text-align:center}

  /*, layout bloc 21, */
  .sec-num{font-size:clamp(3rem,10vw,6rem);right:1.5rem;top:1.5rem}

  /*, layout bloc 22, */
  #awards{padding:3rem 1.5rem}

  /*, layout bloc 23, */
  

  /*, layout bloc 24, */
  .scroll-indicator{display:none}

  /*, layout bloc 25, */
  .nav-burger{width:40px;height:40px;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.04)}
  .mob-close{width:40px;height:40px;font-size:1.2rem}
  .nav-links a,.nav-cta{min-height:44px}
  

  /*, layout bloc 26, */
  
  /* Réduire le gradient gauche sur mobile pour laisser la vidéo visible */
  

  /*, layout bloc 27, */
  #press{padding:3rem 1.5rem}
  

  /*, layout bloc 29, */
  #testimonials{padding:3rem 1.5rem}
  
  
  

  /*, layout bloc 34, */
  .port-h2 { padding-left: 1.25rem; font-size: clamp(2rem,8vw,3rem); }
  
  
  
  
  
  

  /*, layout bloc 35, */
  #portfolio-accordion { padding: 4rem 0 2.5rem; }
  #portfolio-accordion .container { padding: 0 1.5rem; }
  

  /*, layout bloc 36, */
  
  /* 2 colonnes sur mobile, tout visible, zero scroll */
  
  
  
  
  
  
  
  .ts-logo.ts-invert.ts-ready { opacity: .88; }

  /*, layout bloc 38, */
  

  /*, layout bloc 39, */
  

  /*, layout bloc 40, */
  /* ── Tabs mobile, remplacement du select ── */
  
  /* ── overflow:hidden sur #pricing clips le carousel mobile + bloque les touches aux bords ──
     On passe à overflow:visible sur mobile ; les pseudo-éléments déco sont masqués. */
  #pricing {
    overflow: visible !important;
  }
  #pricing::before,
  #pricing::after {
    display: none !important;
  }
  .pricing-mobile-select-wrap {
    display: none !important;
  }
  .pricing-mobile-tabs-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    overflow-x: unset;
    scroll-snap-type: unset;
    scrollbar-width: unset;
    -webkit-overflow-scrolling: unset;
    gap: .4rem;
    margin-bottom: 2rem;
    padding: .35rem;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 12px;
    width: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .pricing-mobile-tabs-wrap::-webkit-scrollbar { display: none; }

  /* Grille 2x2, indicateur scroll inutile */
  .pricing-tabs-outer {
    position: relative;
    margin-bottom: 2rem;
  }
  .pricing-tabs-outer .pricing-mobile-tabs-wrap {
    margin-bottom: 0;
  }
  .pricing-tabs-outer::after { display: none; }
  .pricing-tabs-outer::before { display: none; }

  .pricing-mobile-tab {
    font-family: var(--font-display);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    padding: .65rem .5rem;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--off);
    cursor: pointer;
    white-space: normal;
    text-align: center;
    width: 100%;
    scroll-snap-align: unset;
    transition: all .25s cubic-bezier(.16,1,.3,1);
    line-height: 1.2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .pricing-mobile-tab.active {
    background: var(--accent);
    color: var(--black);
    box-shadow: 0 3px 12px rgba(255,255,255,0.15);
  }
  .pricing-mobile-tab:not(.active):active {
    background: var(--surface2);
    color: var(--light);
  }

  /* ── Carousel wrapper ── */
  .pricing-panel.active .packs-grid,
  .pricing-panel.active .advanced-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    /* PAS de scroll-behavior:smooth ici, il combat le snap natif et provoque le rebond */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* padding-right large = peek visible de la card suivante */
    padding: .5rem 0 1rem 1.25rem;
    margin: 0 -1.5rem;
    /* fade droite pour indiquer scroll */
    -webkit-mask-image: linear-gradient(to right, black 0%, black 78%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black 78%, transparent 100%);
  }
  .pricing-panel.active .packs-grid::-webkit-scrollbar,
  .pricing-panel.active .advanced-grid::-webkit-scrollbar { display: none; }

  /* ── Cards : 78vw pour laisser ~22% de la suivante visible ── */
  .pricing-panel.active .pack-card,
  .pricing-panel.active .adv-card {
    flex: 0 0 78vw !important;
    max-width: 320px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    margin: 0 .75rem 0 0 !important;
    padding: 1.75rem 1.5rem !important;
    border-radius: 12px !important;
    min-height: auto !important;
    transform: none !important;
    touch-action: pan-x pan-y !important;
  }

  /* Tier + name bien espacés */
  .pricing-panel.active .pack-tier,
  .pricing-panel.active .adv-label {
    font-size: .72rem !important;
    margin-bottom: .4rem !important;
    letter-spacing: .18em !important;
  }
  .pricing-panel.active .pack-name,
  .pricing-panel.active .adv-title {
    font-size: 1.45rem !important;
    margin-bottom: .35rem !important;
    line-height: 1.1 !important;
  }

  /* Cache les détails, seul l'essentiel reste visible */
  .pricing-panel.active .pack-features,
  .pricing-panel.active .adv-features { display: none !important; }
  .pricing-panel.active .pack-divider,
  .pricing-panel.active .adv-divider  { display: none !important; }
  .pricing-panel.active .pack-sub,
  .pricing-panel.active .adv-subtitle { 
    font-size: .76rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Prix bien visible et aéré */
  .pricing-panel.active .pack-price { font-size: 2rem !important; letter-spacing: -.015em !important; }
  .pricing-panel.active .adv-price  { font-size: 2rem !important; letter-spacing: -.015em !important; margin-bottom: 1.1rem !important; }
  .pricing-panel.active .pack-price-wrap { margin-bottom: 1rem !important; }
  .pricing-panel.active .pack-price-unit,
  .pricing-panel.active .adv-price-unit { font-size: .72rem !important; }

  /* CTA remplacé par "Voir les détails" + "Démarrer" */
  .pricing-panel.active .pack-cta,
  .pricing-panel.active .adv-cta {
    display: none !important;
  }

  /* ── Dots indicateurs ── */
  .pricing-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    margin-bottom: .5rem;
  }
  .pricing-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    transition: all .3s cubic-bezier(.16,1,.3,1);
    cursor: pointer;
    border: none; padding: 0;
    /* zone de tap généreuse */
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .pricing-dot::after {
    content: '';
    position: absolute;
    inset: -8px;
  }
  .pricing-dot.active {
    background: var(--accent);
    width: 24px;
    border-radius: 4px;
  }

  /* ── Hint swipe ── */
  .pricing-swipe-hint {
    text-align: center;
    font-family: var(--font-display);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 1.25rem;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    animation: hint-fade 3s ease forwards;
  }
  @keyframes hint-fade { 0%,70%{opacity:1} 100%{opacity:0} }
  .pricing-swipe-hint svg { animation: hint-arrow 1.2s ease-in-out infinite; }
  @keyframes hint-arrow { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }

  /* ── Counter "1 / 3" ── */
  .pricing-counter {
    text-align: center;
    font-family: var(--font-display);
    font-size: .65rem; font-weight: 700;
    letter-spacing: .12em; color: var(--dim);
    margin-top: .5rem;
  }
  .pricing-counter span { color: var(--accent); }

  /* ── Bouton "Voir les détails" sur chaque card ── */
  .pack-mobile-actions {
    display: flex !important;
    flex-direction: column;
    gap: .55rem;
    margin-top: 1.25rem;
  }
  .pack-mobile-detail-btn {
    display: flex !important;
    align-items: center; justify-content: center;
    gap: .4rem;
    font-family: var(--font-display);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--light);
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 9999px;
    padding: .75rem 1.2rem;
    cursor: pointer; width: 100%;
    transition: border-color .2s, color .2s;
    line-height: 1.4;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .pack-mobile-detail-btn:hover { border-color: var(--accent); color: var(--accent); }
  .pack-mobile-start-btn {
    display: flex !important;
    align-items: center; justify-content: center;
    gap: .4rem;
    font-family: var(--font-display);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .08em;
    color: var(--black);
    background: var(--accent);
    border: none; border-radius: 9999px;
    padding: .75rem 1.2rem;
    cursor: pointer; width: 100%;
    transition: opacity .2s;
    line-height: 1.4;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .pack-mobile-start-btn:hover { opacity: .88; }

  /* ── Rollout panel mobile : scroll vertical sur le panel lui-même ── */
  #panel-rollout,
  #panel-addons {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    max-height: 75vh;
    padding-bottom: 2rem;
  }

  /* ── Rollout card mobile ── */
  .pricing-panel.active .rollout-card {
    margin: 0 1.5rem;
    border-radius: 12px;
    padding: 1.5rem;
    overflow: visible; /* le scroll est géré par le panel parent */
  }
  .pricing-panel.active .rollout-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
  }
  .pricing-panel.active .rollout-price-block { padding: 0; border: none; text-align: left; }
  .pricing-panel.active .rollout-title { font-size: 2rem !important; }
  .pricing-panel.active .rollout-desc { font-size: .8rem !important; word-break: break-word; }
  .pricing-panel.active .rollout-price { font-size: 1.8rem !important; }
  .pricing-panel.active .rollout-price-cta { width: 100%; justify-content: center; margin-top: 1rem; }

  /* ── Addons grid mobile ── */
  .pricing-panel.active .addons-grid {
    grid-template-columns: 1fr !important;
    padding: 0 1.5rem;
  }

  /*, layout bloc 41, */
  #collabs{padding:2rem 0 4rem}
  
  
  
  
  #artist-stage{padding:2rem .75rem 1.5rem;min-height:auto;gap:.25rem}
  
  

  /*, layout bloc 42, */
  
  .cqf-row{grid-template-columns:1fr}

  /*, layout bloc 43, */
  #faq { padding: 3.5rem 0; }
  

  /*, layout bloc 44, */
  

  /*, layout bloc 45, */
  .port-new-top { padding: 2.5rem 1.5rem 1rem; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .port-tabs-wrap { width: 100%; }
  .port-new-tabs-row { padding: 3px; width: 100%; display: flex; gap: 0; }
  .port-new-tab-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: .55rem .3rem; font-size: .62rem; letter-spacing: .04em; gap: .3em; }
  .port-new-tab-btn svg { width: 10px; height: 10px; }
  /* Titre Réalisations : tient sur une ligne, sous-titre serif empilé dessous */
  #portH2.port-new-h2 { font-size: clamp(1.25rem, 6vw, 1.7rem) !important; line-height: 1; white-space: nowrap; }
  #portH2.port-new-h2 em { display: block !important; font-size: 46% !important; margin: .5rem 0 0 !important; white-space: nowrap; color: var(--dim); }

  /*, layout bloc 46, */
  

  /*, layout bloc 47, */
  #about { padding: 5rem 1.5rem; }
  
  
  
  

  /*, layout bloc 48, */
  

  /*, layout bloc 49, */
  

  /*, layout bloc 52, */
  

  /*, layout bloc 53, */
  .u-accordion { padding: 0 1.5rem 4rem; }
  .u-order-card-inline { max-width: 100%; }

  /*, layout bloc 54, */
  #mob-tab-bar { display: flex; align-items: stretch; height: 56px; }
  footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  main { padding-bottom: 0; }

  /*, layout bloc 55, */
  #quick-nav { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + .75rem) !important; left: .85rem !important; }

  /*, layout bloc 57, */
  
  
  
  
}

/* ================================================================ */
/* @media(max-width:900px), 2/4, COMPOSANTS & UI                 */
/* ================================================================ */
@media(max-width:900px){
  /*, composants bloc 2, */
  .nav-links a,.nav-cta,.lang-toggle,.work-arrow,.cov-arrow,
  .mob-close,.mob-menu a,  .mdg-ctrl-btn,.mdg-play-btn{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .work-arrow,.cov-arrow{
    width:44px;height:44px;
  }

  /*, composants bloc 3, */
  .wm-section {
    overflow-x: visible;
    overflow-y: hidden;
    isolation: auto;
  }

  /*, composants bloc 9, */
  .qn-item{
    padding:.7rem 1.1rem !important;
    font-size:.8rem !important;
    min-height:44px;
  }
  #quick-nav-toggle{
    min-height:44px;
    font-size:.7rem;
    padding:.6rem 1rem .6rem .85rem;
  }

  /*, composants bloc 11, */
  .swipe-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 1rem 1.5rem 0;
    opacity: 0;
    animation: swipeHintFade 2.5s ease 1.2s forwards;
  }
  .swipe-hint svg { flex-shrink: 0; }
  @keyframes swipeHintFade {
    0%   { opacity: 0; transform: translateX(-6px); }
    30%  { opacity: 1; transform: translateX(0); }
    70%  { opacity: 1; }
    100% { opacity: 0; }
  }

  /*, composants bloc 12, */
  .work-footer{flex-direction:column !important;align-items:center !important;text-align:center;gap:1rem !important}
  .work-hint{
    font-size:.55rem;
    letter-spacing:.04em;
    color:var(--off);
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    border-radius:9999px;
    padding:.5rem 1rem;
    justify-content:center;
    white-space:nowrap;
    animation:swipeHintPulse 3s ease 0.8s 3;
  }
  @keyframes swipeHintPulse{
    0%,100%{opacity:.5}
    50%{opacity:1;background:rgba(255,255,255,.07)}
  }

  /*, composants bloc 15, */
  

  /*, composants bloc 20, */
  .about-photo-animated.visible img{transform:scale(1)}

  /*, composants bloc 30, */
  .work-card-bar{ display:block; transform:scaleX(1) !important; }

  /*, composants bloc 32, */
  /* Les fleches chevauchaient la video de ~37px de chaque cote : on les
     descend sous le cadre, la ou l'espace est libre et le pouce accessible. */
  #sp-video-lb-prev,
  #sp-video-lb-next {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    transform: none;
  }
  #sp-video-lb-prev { left: 1rem; right: auto; }
  #sp-video-lb-next { right: 1rem; left: auto; }
  #sp-video-lb-prev:hover,
  #sp-video-lb-next:hover { transform: scale(1.08); }
  #sp-video-lb-counter {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.7rem);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    position: fixed;
  }

  /*, composants bloc 33, */
  #sp-video-lb-close {
    top: calc(env(safe-area-inset-top, 0px) + 1rem);
    right: 1rem;
    position: fixed;
  }
  /* Le nom du temoin etait purement masque en mobile : on regardait un
     temoignage sans savoir qui parlait. Remis, empile sur deux lignes
     puisque le nowrap d'origine ne tient pas sur 375px. */
  #sp-video-lb-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    white-space: normal;
    text-align: center;
    /* Pas de position:fixed ici : #sp-video-lb-inner porte une transform et
       devient donc le bloc conteneur des descendants fixes, ce qui ramenait
       la meta par-dessus la video. On l'ancre sous le cadre en absolute. */
    position: absolute;
    top: calc(100% + .9rem);
    bottom: auto;
    left: 0;
    right: 0;
    transform: none;
  }
  #sp-video-lb-inner {
    width: 96vw;
    border-radius: 4px;
  }

  /*, composants bloc 37, */
  

  /*, composants bloc 50, */
  .swipe-hint { display: flex; }

  /*, composants bloc 51, */
  #acc-motion .work-card{
    width:58vw !important;
    aspect-ratio:9/13 !important;
  }
}

/* ================================================================ */
/* @media(max-width:900px), 3/4, PERFORMANCE GPU                 */
/* ================================================================ */
@media(max-width:900px){
  /*, performance bloc 19, */
  .morph-slide,.artist-preview,.cursor-trail{will-change:auto}
  
  .work-card,.cov-card{transform:none;will-change:auto}
  /* Barre de progression, GPU inutile sur mobile */
  .scroll-progress{will-change:auto}
  /* morph-slide, filter:blur très coûteux sur mobile */
  
  .morph-slide.leaving{filter:none !important;transform:none !important}
  /* reveal-cinema */
  

  /*, performance bloc 28, */
  #testimonials::before{
    inset:0;
    background-position:center 20%;
    opacity:.07;
    animation:none;
    transform:none;
  }

  /*, performance bloc 31, */
  /* ── backdrop-filter décoratifs → none ── */
  .cov-cat-tag{background:rgba(0,0,0,.78) !important}
  .footer-brand .f-socials a{}
  
  #backToTop{background:rgba(18,18,18,.96) !important}
  .contact-quick-form{background:rgba(14,14,14,.99) !important}
  .cpop-overlay{background:rgba(0,0,0,.82) !important}
  /* .work-arrow/.cov-arrow/.award-item/.cond-item/.hero-btn-secondary/.rollout-card/.press-card
     supprimés : aucun backdrop-filter dans leurs définitions CSS, ces neutralisations étaient CSS mort */

  /* ── cards hover : will-change géré uniquement au :hover sur desktop ── */
  .work-card,.cov-card{transform:none !important}

  /* ── Forcer visibilité immédiate, opacity:0 interdit ── */
  /* Tous les éléments qui peuvent démarrer à opacity:0 via GSAP/CSS
     sont forcés visibles. Animation:none évite tout recalcul de frame 0. */
  /* ── Éléments animés par GSAP au scroll, forcés visibles, animations supprimées ── */
  .reveal,.reveal-up,.reveal-left,.reveal-right,
  .reveal-scale,.reveal-fade,.reveal-line,.reveal-cinema,
  .hero-name,.hero-name-wrap,.hero-name-sub,.hero-name-sub-wrap,
  .hero-eyebrow,.hero-sub,
  .sec-label,.svc-h2,.sec-sub,.port-h2,.port-extract-label,.port-count,
  .port-tabs-wrap,.port-new-left,.port-new-eyebrow,.port-new-h2,.port-new-top,
  .about-v2-photo,.about-v2-content,.about-v2-h2,.about-v2-intro,.about-v2-body,
  .av2-badge,.av2-badge-txt,.sk,.about-text,
  .svc-card,.svc-header,.svc-secondary,.svc-secondary-item,
  .pieter-step,.process-header,
  .pack-card,.adv-card,.rollout-card,.addon-card,.addons-intro,
  .pack-price-display,.ppd-amount,.pcond-wrap,.pcond-row,
  .pricing-header,.pricing-tabs,.pricing-scope-note,.pricing-note,
  .pack-price-wrap,.pack-price,
  .work-card,.cov-card,.cov-header,.work-footer,
  .sp-vcard,.sp-stage,.sp-card,.sp-detail,.sp-header,.sp-feature,
  .collabs-hdr,.collabs-main-title,.collabs-main-sub,.collabs-marquee-wrap,.collabs-sub,
  .collabs-avatar,.collabs-avatars-row,
  .trust-strip,.trust-item,.trust-logo,
  .faq-header,.faq-item,.faq-q,
  .awards-grid,.awards-item,
  .contact-h2,.contact-sub,.contact-direct-link,.contact-grid,
  .portrait-card,
  .section-cta-band,.scta-line,
  .uranus-header,.u-box,.u-box-visual,.u-order-card,.u-gal-premium,
  .press-card,.press-grid,
  .footer-brand,.footer-nav,.footer-bottom,
  .award-item,.cond-item {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    visibility: visible !important;
    animation: none !important;
    /* transition:none supprimé de h1/h2/h3/p/section, préserve les transitions UX
       (ouverture FAQ, couleurs liens, focus states, hover cartes statiques) */
  }

  /* Nav / modals / tab-bar : conservés (fonctionnels, pas animés au scroll) */
}

/* ================================================================ */
/* @media(max-width:900px), 4/4, CORRECTIFS & FIXES              */
/* ================================================================ */
@media(max-width:900px){
  /*, correctifs bloc 6, */
  #about::before{
    inset:0;
    background-position:center 20%;
    opacity:.13;
    animation:none;
    transform:none;
  }

  /*, correctifs bloc 56, */
  /* Transition fade-in douce sur tous les éléments qui pourraient rester bloqués à opacity:0 */
  .sp-stage, .sp-card, .sp-detail, .sp-header, .sp-h2, .sp-sub, .sp-feature,
  .sp-vcard, .sp-quote-text, .sp-quote-mark, .sp-quote-author,
  .svc-header, .svc-h2, .sec-sub, .sec-label,
  .svc-secondary, .svc-secondary-label, .svc-secondary-item, .svc-secondary-name,
  .proc-cond, .proc-conds,
  .pricing-header, .pricing-header h2, .pricing-header p,
  .pricing-scope-note, .pricing-tabs,
  .port-h2, .port-extract-label, .port-count,
  #pnl-motion .work-card, #pnl-work .work-card, #pnl-covers .cov-card,
  .port-new-top, .port-new-left, .port-new-eyebrow, .port-new-h2,
  .pack-card, .adv-card, .rollout-card, .pricing-panel,
  .pcond-wrap, .pcond-row,
  .contact-h2, .contact-sub, .contact-direct-link, .contact-left-links,
  .contact-grid, .contact-quick-form,
  .info-list, .collabs-hdr, .collabs-main-title, .collabs-main-sub,
  .collabs-marquee-wrap, .collabs-sub,
  .trust-strip, .pieter-step, .process-header,
  .sp-vcard-hero, .sp-vcard-row, .sp-videos-list {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    visibility: visible !important;
  }
  .port-new-h2,
  .pack-card,
  /* Padding fix : éviter le débordement horizontal sur les sections SP */
  .sp-header {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    max-width: 100% !important;
  }
  
  

  /* Fix testimonials/social-proof container padding */
  #social-proof > .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Uranus : tous les éléments reveal-up et les assets */
  #uranus .reveal-up,
  #uranus .reveal-fade,
  #uranus .reveal-scale,
  #uranus .reveal-line,
  #uranus .u-hero-copy,
  #uranus .u-box-visual,
  #uranus .u-order-card,
  #uranus .u-asset-chip,
  #uranus .u-why-item,
  #uranus .u-why-num,
  #uranus .u-why-txt,
  #uranus .u-gallery-premium,
  #uranus .u-gal-premium,
  #uranus .u-section-label,
  #uranus .u-why-grid,
  #uranus .u-content,
  #uranus .u-assets-grid,
  #uranus-visual,
  #uranus-box-wrap,
  #uranus-psd-stack {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    visibility: visible !important;
  }
}

/* mdg-mobile-redesign */

.about-mob,.collabs-mob,.process-mob,.hero-mob,.sp-mob,.faq-mob,.uranus-mob,.pricing-mob{display:none}

@keyframes mdgMqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes uFloatM{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes uTwinkleM{0%,100%{opacity:.25}50%{opacity:.9}}
.svcm-item.open .svcm-body{display:block}
.svcm-item.open .svcm-sign::after{content:'\2013'}
.faqm-a{display:none}
.faqm-item.open .faqm-a{display:block}
.faqm-sign::after{content:'+'}
.faqm-item.open .faqm-sign::after{content:'\2013'}
/* ── TYPO MOBILE : corrections tailles sur tous les blocs mob ── */

/* FAQ mob, questions h3 (1.5rem inline → 1rem) */
.faq-mob .faqm-item h3{font-size:1rem!important;line-height:1.3!important}
.faq-mob .faqm-sign{font-size:1rem!important}
.faq-mob .faqm-a p{font-size:.8rem!important}
/* Titre section "Questions fréquentes" (1.85rem → 1.45rem) */
.faq-mob h2{font-size:1.45rem!important}

/* Hero mob, titres cartes "Cover Art", "In Motion" (clamp 1.8rem → 1.35rem) */


/* Services mob, titre section (1.85rem → 1.45rem) et titres services (1.32rem → 1.05rem) */

/* SP mob, blockquote témoignage (1.5rem → 1.1rem) */


/* About mob, h2 citation "L'exigence grandit..." (clamp 2.2rem → 1.55rem fixe) */


/* SP mob, "Témoignages" (1.9rem → 1.5rem + white-space:nowrap pour éviter le wrap du "s") */


/* Pricing mob, nom pack (2rem → 1.5rem) et prix (2.3rem → 1.8rem) */

@media(max-width:767px){
  #about > .container{display:none!important}
  #collabs > .container,#collabs > .portraits-section{display:none!important}
  #process > .container{display:none!important}
  
  #social-proof > .container{display:none!important}
  #services > .sec-num{display:none!important}
  #faq > .container{display:none!important}
  #pricing > .container,#pricing > .sec-num{display:none!important}
  
  .collabs-mob{display:block!important;background:var(--black);position:relative;z-index:3}
  .process-mob{display:block!important;background:#1a1a1a;position:relative;z-index:3}
  
  
  .faq-mob{display:block!important;background:var(--light);position:relative;z-index:3}
  
  #uranus{padding:0!important}
  #uranus > *:not(.uranus-mob){display:none!important}
  .uranus-mob{display:block!important;position:relative;z-index:3;background:radial-gradient(ellipse at 50% 16%,#353D03 0%,#151801 42%,#070801 100%)}
  #hero,#about,#collabs,#process,#services,#faq,#uranus,#pricing{overflow-x:hidden!important}
  #social-proof{overflow-x:clip!important}
  .mdg-mq{animation:mdgMqScroll 26s linear infinite}
  .mrev{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
  .mrev.in{opacity:1;transform:none}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  .mrev,.mrev.in{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ══════════════════════════════════════════════════════════════════
   LE VERRE LIQUIDE EST PARTI
   ──────────────────────────────────────────────────────────────────
   Ce bloc habillait la nav, son bouton, la barre du bas et les packs :
   un flou de 22px sature a 1,9, une REFRACTION par filtre SVG, un halo
   speculaire qui suivait le pointeur, un reflet qui balayait le bouton
   toutes les 5,5 secondes, et jusqu a quatre ombres internes empilees
   pour simuler un bord de verre.

   C est mot pour mot ce que la direction du site ecarte : glassmorphism,
   bordures multiples, animations decoratives, gros effets « pour faire
   moderne ». C est aussi, depuis 2024, la signature qu on reconnait au
   premier coup d oeil sur les sites sortis d un generateur.

   Il ne reste que ce dont la barre a besoin pour son travail : de quoi
   se detacher du contenu qui defile dessous. Les deux etats adaptatifs
   (nav-on-light / nav-on-dark, plus bas) ont le dernier mot.
   ══════════════════════════════════════════════════════════════════ */
nav:not(#mob-tab-bar){
  background:rgba(6,6,6,.92)!important;
  background-image:none!important;
  border-bottom:1px solid var(--border)!important;
  box-shadow:none!important;
}
/* Le degrade blanc pose sur la moitie haute de la barre simulait
   l epaisseur du verre. Sans verre, il ne represente plus rien. */
nav:not(#mob-tab-bar)::after{content:none!important}
nav:not(#mob-tab-bar) > *{position:relative;z-index:1}

/* Le bouton d appel retrouve sa definition d origine, plus haut dans la
   feuille : une pilule cerclee d accent qui se remplit au survol. Seul
   le reflet qui la traversait en boucle est neutralise ici. */
.nav-cta::after{content:none!important}

#mob-tab-bar{
  /* L ancrage reste !important : url(#lg-distort) creait un contexte de
     filtre qui decrochait la barre de son ancrage viewport sur Chrome
     Android et Safari iOS. Le filtre est parti, la precaution reste,
     elle ne coute rien. Les bords vivent dans BARRE FLOTTANTE plus bas. */
  position:fixed!important;
  background:rgba(13,14,16,.96)!important;
  background-image:none!important;
  box-shadow:0 14px 38px rgba(0,0,0,.5)!important;
}

/* ── Mobile : espacements coherents pour Services + Tarifs ── */
@media(max-width:700px){
  #services{padding:56px 20px 44px!important}
  #pricing{padding:56px 0 56px!important}
}

/* polish-90 */

/* ════════════════ FINITION 90%, accessibilité + premium (additif) ════════════════ */

/* 1. Contraste : éclaircir le gris le plus faible pour la lisibilité (WCAG) */
/* Le gris le plus faible est remonte dans assets/palette.css : il
   l'etait ici, puis une seconde fois plus bas — trois valeurs pour un
   meme jeton, et seule la derniere gagnait. */

/* 2. Focus visible accessible (clavier), anneau accent, sans gêner la souris */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,
.pricing-tab:focus-visible,.svc-card:focus-visible,.pack-cta:focus-visible,
.lang-toggle:focus-visible,.nav-cta:focus-visible,
.work-arrow:focus-visible,.cov-arrow:focus-visible,.nav-burger:focus-visible,
.faq-q:focus-visible,.mob-tab:focus-visible,.modal-close:focus-visible,.pack-modal-close:focus-visible{
  outline:2px solid var(--accent)!important;
  outline-offset:3px!important;
}
input,textarea,select{ accent-color:var(--accent); }

/* 3. Ancres : ne plus passer SOUS la nav fixe au scroll (offset propre) */
section[id]{ scroll-margin-top:88px; }
@media(max-width:900px){ section[id]{ scroll-margin-top:72px; } }

/* 4. Sélection de texte teintée accent */
::selection{ background:rgba(var(--accent-rgb),.28); color:#fff; }

/* 5. Scrollbar premium (desktop) */
@media(hover:hover){
  html{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.16);
    border:2px solid var(--black);
    border-radius:12px;
  }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(var(--accent-rgb),.55); }
}

/* 6. Garde-fous : médias fluides */
img,svg,video,iframe{ max-width:100%; }

/* 7. Transition de couleur unifiée sur les liens */
a{ transition:color .2s ease, opacity .2s ease; }

/* ════════════════ SYSTÈME, tokens typo & espacement (fondation) ════════════════ */
:root{
  /* Échelle d'espacement (base 8) */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px; --sp-6:96px;
  /* Courbe & durées de mouvement standard */
  --ease:cubic-bezier(.16,1,.3,1); --dur:.4s;
}

/* Rythme vertical cohérent des sections de contenu (le hero et les blocs full-screen ne sont pas touchés) */
#about,#services,#process,#collabs,#press,#awards,#pricing,#faq,#trust,#contact{
  padding-top:var(--sp-6)!important;
  padding-bottom:var(--sp-6)!important;
}
@media(max-width:900px){
  #about,#services,#process,#collabs,#press,#awards,#pricing,#faq,#trust,#contact{
    padding-top:56px!important;
    padding-bottom:56px!important;
  }
}

/* Grands titres de section : interligne + interlettrage unifiés (tailles inchangées) */
.svc-h2,.pricing-header h2,.awards-title,.collabs-main-title,.process-header h2,.trust-h2,.about-main-title{
  line-height:1.05!important;
  letter-spacing:-.01em!important;
  text-wrap:balance;
}
/* Sous-titres / chapeaux de section : lisibilité homogène */


/* ── En-têtes de section : marge basse unifiée (rythme constant) ── */
.svc-header,.process-header,.awards-header,.press-header,.faq-header,.testimonials-header,.pricing-header{
  margin-bottom:var(--sp-5)!important; /* 64px */
}
@media(max-width:900px){
  .svc-header,.process-header,.awards-header,.press-header,.faq-header,.testimonials-header,.pricing-header{
    margin-bottom:var(--sp-4)!important; /* 40px */
  }
}
/* Espacement label → titre → chapeau cohérent dans chaque en-tête */
.svc-header .sec-label,.process-header .sec-label,.faq-header .sec-label{ margin-bottom:.85rem!important; }

/* ── PILOTE (Services) : colonnes consolidées en source unique ──
   Remplace 4 déclarations legacy contradictoires (3/2/1 col selon blocs).
   3 col ≥1101px · 2 col ≤1100px · 1 col ≤700px */


/* ── Rayon des cartes de contenu unifié (cohérence visuelle) ── */


/* ── Cibles tactiles ≥44px sur mobile (recommandation WCAG/Apple) ── */
@media(hover:none),(max-width:900px){
  .lang-toggle{ min-height:44px; display:inline-flex; align-items:center; }
  .mob-lang-toggle{ min-height:44px; }
  .nav-burger{ width:44px; height:44px; align-items:center; justify-content:center; }
  .work-arrow,.cov-arrow{ min-width:44px; min-height:44px; }
}

/* ── Pastilles Spotify des covers : blanc (au lieu du vert accent) ── */

/* Logos Spotify des covers en blanc (mobile grille + desktop liste) */
a[data-spotify] svg{ fill:#fff !important; }
/* #about est passe en sombre : un glyphe Spotify noir y disparaissait
   (contraste 1,14 sur rgb(20,20,20)). La regle datait de l'epoque ou la
   section etait creme, ou le noir se voyait. On rend au logo sa couleur
   de marque, lisible sur fond sombre. */
#about .rows .r .r-sp{ fill:var(--accent) !important; }

/* ── HERO : portes (marques / artistes) ── */
/* ── Card Atelier MDG : fond blanc, contraste maximal ── */
/* Overlay transition Atelier MDG */
#atelierOverlay{position:fixed;inset:0;background:#fff;z-index:9999;opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
#atelierOverlay.active{opacity:1;pointer-events:all}
/* Mobile : cards empilées, patch robuste */
@media(max-width:767px){
}

/* ── PASSERELLE : film strip (clair, covers en défilement croisé) ── */
.passerelle{padding:clamp(64px,9vw,110px) 3rem;background:#fcfbf9;border-bottom:1px solid rgba(14,14,14,.08);overflow:hidden}
.pass-wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.pass-intro{text-align:left;margin:0;max-width:none}
.pass-eyebrow{font-family:var(--font-display);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#64730A;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.pass-eyebrow::before{content:'';width:24px;height:1px;background:#64730A;flex-shrink:0}
.pass-title{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:.98;letter-spacing:-.02em;color:var(--dark);margin-bottom:20px;text-wrap:balance}
.pass-title em{font-family:var(--font-accent);font-weight:400;font-style:italic;letter-spacing:0;color:#64730A}
.pass-lede{font-size:.95rem;line-height:1.65;color:#3a3935;max-width:440px;margin:0;text-wrap:pretty}
.pass-film{position:relative;display:flex;gap:14px;height:clamp(380px,42vw,500px);overflow:hidden;align-items:flex-start;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
/* ── LES DEUX COLONNES SONT PILOTEES PAR LE SCROLL ────────────────
   Elles portaient `animation:passVsc 22s linear infinite`, et la
   seconde la meme en 27s a l'envers. Un defilement autonome : il
   tournait meme quand personne ne scrollait, meme quand personne ne
   regardait, et occupait deux couches de composition en continu tant
   que la section etait a l'ecran.

   C'est l'idiome de gabarit par excellence, et il dit le contraire de
   ce que la section raconte. Un studio ne fait pas defiler son travail
   devant vous en boucle : il vous le montre au rythme ou vous
   avancez. Deux vitesses opposees liees au scroll donnent en plus la
   profondeur que la boucle ne donnait pas — deux plans, pas un tapis.

   LA CLASSE EST POSEE PAR motion.js, PAS ECRITE ICI. Si le script
   n'arrive pas, l'ancienne animation reprend : mieux vaut une boucle
   automatique qu'une colonne figee dont on ne verrait que la premiere
   image. C'est la meme logique que `.motion-arme` — le CSS ne se
   prive de rien tant que personne ne peut prendre le relais. */
.pass-fcol{display:flex;flex-direction:column;flex:1;min-width:0;height:max-content;animation:passVsc 22s linear infinite}
.pass-film--pilote .pass-fcol{animation:none;will-change:transform}
.pass-fcol.rev{animation-direction:reverse;animation-duration:27s}
/* height:auto N'EST PAS DECORATIF. Les balises portent width="440"
   height="440" — l'attribut compte comme une hauteur declaree, et
   aspect-ratio ne s'applique QUE si la hauteur vaut auto. Sans lui,
   la vignette faisait 163 de large pour 440 de haut, et object-fit
   recadrait la pochette carree en bande verticale : la cover
   apparaissait zoomee, amputee de sa gauche et de sa droite. */
.pass-fcol img{width:100%;height:auto;aspect-ratio:1;border-radius:12px;object-fit:cover;box-shadow:0 14px 34px -16px rgba(14,14,14,.3);display:block;margin-bottom:14px}
@keyframes passVsc{to{transform:translateY(-50%)}}
.pp-arr{color:#64730A;transition:transform .25s}
.pass-cta:hover .pp-arr{transform:translateX(5px)}
@media(max-width:760px){
  .passerelle{padding:56px 20px}
  .pass-wrap{display:flex;flex-direction:column;gap:28px}
  .pass-intro{text-align:center}
  .pass-eyebrow{justify-content:center}
  .pass-eyebrow::before{display:none}
  .pass-lede{margin:0 auto}
  .pass-film{height:300px;gap:10px;width:100%}
  .pass-fcol{animation-duration:13s}
  .pass-fcol.rev{animation-duration:16s}
  .pass-fcol img{margin-bottom:10px;border-radius:12px}
}

/* ── HERO desktop : réserver la bande des stats (la colonne s'arrête au-dessus) ── */


/* nhero-css */

#hero.nhero{background:#fcfbf9!important;position:relative;overflow:hidden;min-height:100svh;display:flex!important;flex-direction:column;justify-content:center;padding:calc(var(--nav-h,76px) + 1.4rem) clamp(20px,4vw,56px) 2.2rem!important;color:var(--dark)}
#hero.nhero .nh-grain{position:absolute;inset:0;z-index:1;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:120px 120px;pointer-events:none}
#hero.nhero .nh-in{position:relative;z-index:4;max-width:1280px;margin:0 auto;width:100%;flex:1;display:flex;flex-direction:column;min-height:0}
#hero.nhero .nh-toprow{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(18px,2.6vw,30px)}
/* ══ PAS DE PASTILLE RONDE DEVANT UN LIBELLE ══
   Le site en portait une quinzaine : un rond vert de 5 a 9px pose
   devant un sur-titre. C'est le tic visuel que le bloc WAVEFORM de
   index.html appelle deja « cliché IA », et qu'il n'avait retire qu'a
   moitie — il ne connaissait ni le heros, ni l'Atelier, ni Uranus, ni
   les etudes de cas. Le libelle porte seul : c'est la typographie qui
   marque, pas une puce. Les rembourrages asymetriques qui reservaient
   la place du rond sont remis d'aplomb en meme temps. */
#hero.nhero .nh-chip{display:inline-flex;align-items:center;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dark)}
#hero.nhero .nh-idx{font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#6a655e}
#hero.nhero .nh-cols{flex:1;display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,56px);align-items:stretch;min-height:0}
#hero.nhero .nh-txt{display:flex;flex-direction:column;justify-content:center;min-width:0}
#hero.nhero .nh-title{font-family:var(--font-display);font-weight:700;font-size:clamp(3.4rem,7vw,6.8rem);line-height:.85;letter-spacing:-.025em;color:var(--dark);margin:0}
#hero.nhero .nh-title em{display:block;font-family:var(--font-accent);font-style:italic;font-weight:400;font-size:.62em;letter-spacing:-.005em;color:var(--dark);margin-left:.5em}
#hero.nhero .nh-lede{margin:clamp(20px,2.4vw,30px) 0 0;font-size:clamp(.92rem,1.05vw,1rem);line-height:1.55;color:#3a3935;max-width:460px}
#hero.nhero .nh-lede-m{display:none}
#hero.nhero .nh-actions{display:flex;gap:14px;margin-top:clamp(24px,3vw,34px);align-items:center;flex-wrap:wrap}
#hero.nhero .nh-btn{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.02em;text-decoration:none;padding:14px 26px;border-radius:9999px;display:inline-flex;align-items:center;gap:8px;transition:transform .25s,box-shadow .25s,border-color .25s,scale var(--t-court) var(--ease-appui)}
#hero.nhero .nh-btn i{font-style:normal;transition:transform .25s}
#hero.nhero .nh-btn:hover i{transform:translateX(4px)}
#hero.nhero .nh-btn--p{background:var(--dark);color:#fff}
#hero.nhero .nh-btn--p:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(14,14,14,.2)}
#hero.nhero .nh-btn--s{color:var(--dark);border:1px solid rgba(14,14,14,.24)}
#hero.nhero .nh-btn--s:hover{border-color:var(--dark);transform:translateY(-2px)}
#hero.nhero .nh-meta{display:flex;gap:clamp(22px,3vw,32px);margin-top:clamp(28px,4vw,46px);font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6a655e}
#hero.nhero .nh-meta b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;color:var(--dark)}
#hero.nhero .nh-collabs{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(18px,2.4vw,26px);padding-top:clamp(18px,2.4vw,26px);border-top:1px solid rgba(14,14,14,.1)}
#hero.nhero .nh-pics{display:flex;align-items:center;flex:none}
#hero.nhero .nh-pic{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2.5px solid #fcfbf9;background:#eceae5}
#hero.nhero .nh-pic + .nh-pic{margin-left:-11px}
#hero.nhero .nh-collabs-lbl{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a8580}
#hero.nhero .nh-collabs-names{font-family:var(--font-body);font-weight:400;font-size:.84rem;line-height:1.45;letter-spacing:0;color:#3a3935;max-width:none}
#hero.nhero .nh-collabs-names b{font-family:var(--font-display);font-weight:600}
#hero.nhero .nh-collabs-names .hl{color:#B4CE38}
#hero.nhero .nh-imgcol{position:relative;overflow:hidden;border-radius:12px;min-height:420px;background:#eceae5}
#hero.nhero .nh-imgcol img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(.15) contrast(1.03);animation:nhkb 16s ease-in-out infinite alternate}
#hero.nhero .nh-tag{position:absolute;left:16px;bottom:16px;background:rgba(252,251,249,.92);padding:8px 14px;border-radius:9999px;font-family:var(--font-display);font-weight:700;font-size:.68rem;color:var(--dark);letter-spacing:.02em;z-index:2}
#hero.nhero .nh-imgwrap-mob{display:none}
@keyframes nhkb{0%{transform:scale(1.04)}100%{transform:scale(1.12) translate(-1%,-1%)}}
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */#hero.nhero .nh-imgcol img,#hero.nhero .nh-imgwrap-mob img{animation:none!important}}
@media(max-width:767px){
  #hero.nhero{padding:calc(var(--nav-h,70px) + 1.2rem) 24px 2.4rem!important;text-align:center}
  #hero.nhero .nh-toprow{justify-content:center;margin-bottom:14px}
  #hero.nhero .nh-idx{display:none}
  #hero.nhero .nh-chip{color:#6a655e;font-size:.56rem;letter-spacing:.24em;opacity:.8}
  #hero.nhero .nh-cols{display:flex;flex-direction:column;gap:0}
  #hero.nhero .nh-imgcol{display:none}
  #hero.nhero .nh-title{font-size:clamp(2.7rem,13vw,3.2rem);line-height:.86}
  #hero.nhero .nh-title em{margin-left:0}
  #hero.nhero .nh-imgwrap-mob{display:block;position:relative;margin:22px 0 0;border-radius:12px;overflow:hidden;height:260px}
  #hero.nhero .nh-imgwrap-mob img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:grayscale(.15) contrast(1.03);animation:nhkb 16s ease-in-out infinite alternate}
  #hero.nhero .nh-imgwrap-mob .nh-tag{left:12px;bottom:12px;padding:6px 12px;font-size:.62rem}
  #hero.nhero .nh-lede{display:none}
  #hero.nhero .nh-lede-m{display:block;margin:18px auto 0;font-size:.9rem;line-height:1.55;color:#3a3935;max-width:340px}
  #hero.nhero .nh-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:20px}
  #hero.nhero .nh-btn{justify-content:center;padding:15px}
  #hero.nhero .nh-meta{display:none}
  #hero.nhero .nh-collabs{justify-content:center;text-align:center;margin-top:16px;padding-top:16px}
  #hero.nhero .nh-collabs-names{font-size:.78rem}
}
/* Nav épuré au-dessus du hero : logo + dispo + langue seulement, le reste réapparaît au scroll */
nav:not(#mob-tab-bar):not(.scrolled) .nav-links,
nav:not(#mob-tab-bar):not(.scrolled) .nav-cta{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}
nav:not(#mob-tab-bar).scrolled .nav-links,
nav:not(#mob-tab-bar).scrolled .nav-cta{opacity:1;visibility:visible;transition:opacity .35s ease}
/* ── HEADER ADAPTATIF : s'inverse selon la luminosité du fond sous le header ── */
nav:not(#mob-tab-bar){transition:background .4s ease}
/* Sur fond CLAIR → encre sombre, barre transparente */
nav:not(#mob-tab-bar).nav-on-light{background:transparent!important;box-shadow:none!important;border-bottom-color:transparent!important}
nav.nav-on-light .nav-logo img{filter:brightness(0)!important;transition:filter .4s ease}
nav.nav-on-light .nav-logo,
nav.nav-on-light .nav-logo-sub,
nav.nav-on-light .nav-logo span{color:var(--dark)!important}
nav.nav-on-light .nav-avail{color:#3a3935!important}
nav.nav-on-light .nav-links a{color:#3a3935!important}
nav.nav-on-light .lang-toggle{color:var(--dark)!important;border-color:rgba(14,14,14,.28)!important}
nav.nav-on-light .lang-toggle.active{background:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}
nav.nav-on-light .nav-burger span{background:var(--dark)!important}
/* Sur fond SOMBRE → encre claire + voile dégradé léger (pas de barre franche) */
/* Le flou de 6px qui accompagnait ce degrade brouillait le contenu
   passant dessous et rendait le logo lisible a peu de frais. Sans lui,
   .82 ne suffisait plus : le nom du studio se posait a meme le titre.
   Un voile plus franc fait le meme travail, sans verre. */
nav:not(#mob-tab-bar).nav-on-dark{background:linear-gradient(to bottom,rgba(6,6,6,.96) 0%,rgba(6,6,6,.78) 52%,rgba(6,6,6,0) 100%)!important;box-shadow:none!important;border-bottom-color:transparent!important}
nav.nav-on-dark .nav-logo img{filter:none!important;transition:filter .4s ease}
nav.nav-on-dark .nav-logo,
nav.nav-on-dark .nav-logo-sub,
nav.nav-on-dark .nav-logo span{color:var(--light)!important}
nav.nav-on-dark .nav-avail{color:var(--muted)!important}
nav.nav-on-dark .nav-links a{color:var(--off)!important}
nav.nav-on-dark .lang-toggle{color:var(--off)!important;border-color:var(--border2)!important}
nav.nav-on-dark .nav-burger span{background:var(--light)!important}

/* sans id */

.lc-cta{position:relative;z-index:6;display:flex;align-items:center;gap:1rem;width:100%;box-sizing:border-box;margin-top:.9rem;padding:1.05rem 1.2rem;border:1.5px solid var(--accent);border-radius:12px;background:linear-gradient(120deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.05));text-decoration:none;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s,border-color .28s,background .28s}
        .lc-cta>*{pointer-events:none}
        .lc-cta::before{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(var(--accent-rgb),.28),transparent);transform:skewX(-18deg);transition:left .6s ease}
        .lc-cta:hover,.lc-cta:focus-visible{transform:translateY(-3px);border-color:var(--accent);background:linear-gradient(120deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.08));box-shadow:0 14px 40px rgba(var(--accent-rgb),.22),0 2px 0 rgba(var(--accent-rgb),.4) inset;outline:none}
        .lc-cta:hover::before{left:120%}
        .lc-cta:active{transform:translateY(-1px) scale(.995)}
        .lc-cta__icon{flex-shrink:0;width:46px;height:46px;border-radius:12px;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 0 22px rgba(var(--accent-rgb),.5)}
        .lc-cta__icon svg{width:24px;height:24px;display:block}
        .lc-cta__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
        .lc-cta__eyebrow{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
        .lc-cta__new{padding:1px 7px;border-radius:9999px;background:var(--accent);color:#101206;font-weight:700;letter-spacing:.14em}
        .lc-cta__title{font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:#14150C;letter-spacing:-.005em;line-height:1.15}
        .lc-cta__sub{font-size:.76rem;color:var(--dim);line-height:1.4}
        .lc-cta__go{flex-shrink:0;display:flex;align-items:center;gap:.45rem;font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--accent);white-space:nowrap}
        .lc-cta__go i{font-style:normal;transition:transform .28s cubic-bezier(.16,1,.3,1)}
        .lc-cta:hover .lc-cta__go i{transform:translateX(5px)}
        @media(max-width:767px){
          .lc-cta{align-items:flex-start;padding:1rem 1.1rem;min-height:66px}
          .lc-cta__go span{display:none}
          .lc-cta__title{font-size:1rem}
        }

/* chap-css */

#portfolio-accordion .port-tabs-wrap{display:none!important}
      /* LE RYTHME. Les chapitres se suivaient a 26 px : c'est
         l'interligne d'un paragraphe, pas l'intervalle entre deux
         disciplines. Une oeuvre a besoin d'un silence avant et apres
         pour qu'on la regarde ; c'est ce silence qui est rallonge ici,
         et rien d'autre. */
      .chap-wrap{padding:clamp(1rem,2.4vw,2.2rem) clamp(1.25rem,4vw,3rem) clamp(2.5rem,5vw,4.5rem);display:flex;flex-direction:column}
      .chap{border-top:1px solid var(--border);padding:clamp(2rem,4.2vw,3.6rem) 0 clamp(2.2rem,4.6vw,4rem)}
      /* Le dernier chapitre ne ferme plus : .port-gallery-footer dessine
         deja un trait juste apres. Deux filets pour une seule fin. */
      .chap-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:18px}
      .chap-head-l{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,20px);min-width:0}
      .chap-num{font-family:var(--font-accent);font-style:italic;font-size:1.05rem;color:var(--accent);flex:none}
      .chap-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,1.7vw,1.55rem);color:var(--light);text-transform:uppercase;letter-spacing:.005em}
      .chap-cnt{font-family:var(--font-display);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);flex:none}
      .chap-btn{font-family:var(--font-display);font-weight:700;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);background:none;border:none;cursor:pointer;padding:8px 0;flex:none;transition:opacity .2s}
      .chap-btn:hover{opacity:.65}
      .chap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
      .chap-it{position:relative;display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--surface);border:none;padding:0;cursor:pointer}
      .chap-it img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.16,1,.3,1)}
      .chap-it:hover img{transform:scale(1.05)}
      .chap-play{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(10,10,10,.55);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:.55rem;color:var(--light);pointer-events:none}
      .chap-more{position:relative;aspect-ratio:4/5;border-radius:12px;border:1px dashed rgba(255,255,255,.25);background:rgba(255,255,255,.03);color:var(--light);font-family:var(--font-display);font-weight:700;font-size:1.05rem;cursor:pointer;order:999;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
      .chap-more:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
      .chap-more .mm{display:none}
      .chap-grid:not(.collapsed) .chap-more{display:none}
      @media(min-width:768px){
        .chap-grid.collapsed .chap-it:nth-child(n+11){display:none}
        .chap-more.no-d{display:none}
      }
      @media(max-width:767px){
        .chap-grid{grid-template-columns:repeat(3,1fr);gap:8px}
        .chap-grid.collapsed .chap-it:nth-child(n+7){display:none}
        .chap-more .md{display:none}
        .chap-more .mm{display:block}
        .chap-more.no-m{display:none}
        .chap-title{font-size:1.05rem}
      }

/* stg-css */

#social-proof .stg-wrap{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,100px) clamp(22px,4vw,60px)}
  #social-proof .stg-mast{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-bottom:1px solid var(--light);padding-bottom:18px}
  #social-proof .stg-mast .l{font-family:var(--font-display);font-weight:700;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--light)}
  #social-proof .stg-mast .r{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  #social-proof .stg-quote{padding:clamp(44px,6vw,80px) 0 clamp(38px,5vw,64px);text-align:center}
  #social-proof .stg-quote .qm{font-family:var(--font-accent);font-style:italic;font-size:clamp(3rem,5vw,4.5rem);line-height:.4;color:var(--accent);opacity:.55}
  #social-proof .stg-quote blockquote{font-family:var(--font-accent);font-style:italic;font-weight:400;font-size:clamp(1.6rem,3.4vw,3rem);line-height:1.32;max-width:22ch;margin:clamp(18px,3vw,28px) auto 0;color:var(--light);text-wrap:balance}
  #social-proof .stg-quote blockquote b{font-style:normal;font-family:var(--font-display);font-weight:700;color:var(--accent)}
  #social-proof .stg-who{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(28px,4vw,40px);flex-wrap:wrap}
  #social-proof .stg-who img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center top;border:1px solid rgba(240,237,232,.2);filter:grayscale(.3)}
  #social-proof .stg-who .t{text-align:left}
  #social-proof .stg-who .t b{font-family:var(--font-display);font-weight:700;font-size:.9rem;display:block;color:var(--light)}
  #social-proof .stg-who .t span{font-size:.7rem;color:var(--dim)}
  #social-proof .stg-who .sep{width:1px;height:30px;background:rgba(240,237,232,.15)}
  #social-proof .stg-who .yrs{font-size:.7rem;color:var(--dim);font-family:var(--font-display);letter-spacing:.04em}
  #social-proof .stg-who .yrs b{font-size:.78rem;color:var(--light)}
  #social-proof .stg-strip-head{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(240,237,232,.13);padding-top:18px;margin-bottom:20px}
  #social-proof .stg-strip-head .l{font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
  #social-proof .stg-strip-head .r{font-family:var(--font-display);font-weight:700;font-size:.7rem;color:var(--dim)}
  #social-proof .stg-strip-head .r b{color:var(--light)}
  #social-proof .stg-vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
  /* reset des styles hérités de .sp-vcard-hero */
  #social-proof .stg-vc{background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;padding:0!important;display:block!important;transform:none!important;overflow:visible!important;cursor:pointer;min-width:0}
  #social-proof .stg-vc .im{position:relative;overflow:hidden;aspect-ratio:3/4;background:#0c0c0b}
  #social-proof .stg-vc .im img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04) brightness(.94);transition:filter .5s,transform .9s cubic-bezier(.16,1,.3,1)}
  #social-proof .stg-vc:hover .im img{filter:grayscale(0);transform:scale(1.04)}
  #social-proof .stg-vc .im::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
  #social-proof .stg-vc:hover .im::after{transform:scaleX(1)}
  #social-proof .stg-vc .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(6,6,6,.42);border:1px solid rgba(240,237,232,.55);display:grid;place-items:center;transition:transform .3s,background .3s,border-color .3s;z-index:2}
  #social-proof .stg-vc:hover .play{background:var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.06)}
  #social-proof .stg-vc .play svg{width:15px;height:15px;fill:var(--light);transition:fill .3s}
  #social-proof .stg-vc:hover .play svg{fill:var(--black)}
  #social-proof .stg-vc .lab{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 1px 0;align-items:baseline}
  #social-proof .stg-vc .lab b{font-family:var(--font-display);font-weight:700;font-size:.88rem;letter-spacing:-.005em;color:var(--light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #social-proof .stg-vc .lab .no{font-family:var(--font-display);font-weight:700;font-size:.6rem;color:var(--dim)}
  #social-proof .stg-vc .lab span{grid-column:1;font-size:.64rem;color:var(--dim)}
  #social-proof .stg-vc .lab .watch{grid-column:1/-1;margin-top:6px;font-family:var(--font-body);font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.04em;color:var(--accent);opacity:.72;transition:opacity .3s,transform .3s;transform:translateX(0)}
  #social-proof .stg-vc:hover .lab .watch{opacity:1;transform:translateX(3px)}
  #social-proof .stg-verified{display:flex;justify-content:center;margin-top:clamp(28px,4vw,40px)}
  #social-proof .stg-verified span{display:inline-flex;align-items:center;gap:8px;font:600 .66rem var(--font-body);letter-spacing:.08em;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.28);border-radius:9999px;padding:11px 20px}
  @media(max-width:760px){
    #social-proof .stg-quote blockquote{font-size:1.5rem}
    #social-proof .stg-vgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;margin:0 -22px;padding:0 22px;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
    #social-proof .stg-vgrid::-webkit-scrollbar{display:none}
    #social-proof .stg-vc{flex:0 0 62vw;max-width:230px;scroll-snap-align:start}
  }

/* abg-css */

#about{background:#eceae3 !important;padding:clamp(14px,2vw,26px) !important;overflow:hidden !important;border-bottom:1px solid rgba(17,16,8,.14) !important}
  #about::before{display:none !important}
  #about .abg-w{display:flex}
  #about .abg-grid{flex:1;border-top:1.5px solid var(--border);border-left:1.5px solid var(--border);display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(78px,auto);font-family:var(--font-body)}
  #about .abg-cell{border-right:1.5px solid var(--border);border-bottom:1.5px solid var(--border);padding:26px 20px 18px;position:relative;min-width:0;overflow:hidden}
  #about .abg-tag{position:absolute;top:10px;left:12px;font-family:var(--font-display);font-weight:700;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:#8a857b}
  #about .abg-mast{grid-column:span 8;display:flex;align-items:center;padding-top:18px}
  #about .abg-mast .l{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#111008;white-space:nowrap}
  #about .abg-mast .l i{color:#64730A;font-style:normal;margin:0 .35em}
  #about .abg-loc{grid-column:span 4;display:flex;align-items:center;justify-content:flex-end;padding-top:18px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#8a857b;text-align:right}
  #about .abg-title{grid-column:span 8;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,46px)}
  #about .abg-title h2{font-family:var(--font-display) !important;font-weight:700;font-size:clamp(2.4rem,6vw,5.6rem);line-height:.9;letter-spacing:-.025em;color:#111008;margin:0;text-wrap:balance}
  #about .abg-title h2 em{font-family:var(--font-accent) !important;font-style:italic;font-weight:400;color:#64730A;letter-spacing:-.0075em}
  #about .abg-portrait{grid-column:span 4;grid-row:span 2;padding:0}
  #about .abg-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}
  #about .abg-portrait .abg-tag{color:#fff;z-index:2;mix-blend-mode:difference}
  #about .abg-lede{grid-column:span 7;display:flex;align-items:center}
  #about .abg-lede p{font-family:var(--font-accent);font-style:italic;font-size:clamp(1.1rem,1.5vw,1.5rem);line-height:1.42;color:#111008;margin:0}
  #about .abg-body{grid-column:span 5;display:flex;align-items:center}
  #about .abg-body p{font-weight:300;font-size:.9rem;line-height:1.75;color:#413d37;margin:0}
  #about .abg-body p b{font-weight:600;color:#111008}
  #about .abg-photo{padding:0;height:270px}
  #about .abg-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
  #about .abg-photo.a{grid-column:span 6}
  #about .abg-photo.b{grid-column:span 6}
  #about .abg-collabs{grid-column:span 12;padding-top:28px}
  #about .abg-collabs .h{font-family:var(--font-display);font-weight:700;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:#8a857b;margin-bottom:14px}
  #about .abg-collabs .rows{display:grid;grid-template-columns:repeat(4,1fr);gap:0 1px;background:#111008}
  #about .abg-collabs .r{background:#eceae3;padding:4px 18px 4px 0;display:flex;flex-direction:column;gap:3px;text-decoration:none}
  #about .abg-collabs a.r{transition:background .25s;cursor:pointer}
  #about .abg-collabs a.r:hover{background:#e2dfd6}
  #about .abg-collabs .r:first-child{padding-left:0}
  #about .abg-collabs .r b{font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.005em;color:#111008}
  #about .abg-collabs .r span{font-size:.68rem;color:#8a857b}
  #about .abg-stat{grid-column:span 3;display:flex;flex-direction:column;justify-content:center}
  #about .abg-stat b{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3vw,2.7rem);letter-spacing:-.015em;line-height:1;color:#111008}
  #about .abg-stat span{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#8a857b;margin-top:9px}
  #about .abg-cta{grid-column:span 3;display:flex;align-items:center;justify-content:center;background:#111008;transition:background .25s}
  #about .abg-cta:hover{background:#64730A}
  #about .abg-cta a{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:#eceae3;text-decoration:none;letter-spacing:.02em;display:inline-flex;align-items:center;gap:9px}
  @media(max-width:860px){
    #about .abg-grid{grid-template-columns:repeat(2,1fr)}
    #about .abg-mast{grid-column:span 2}
    #about .abg-loc{grid-column:span 2;justify-content:flex-start;text-align:left;padding-top:12px}
    #about .abg-title{grid-column:span 2;grid-row:auto;padding:30px 20px}
    #about .abg-title h2{font-size:2.7rem}
    #about .abg-portrait{grid-column:span 2;grid-row:auto;height:360px}
    #about .abg-lede{grid-column:span 2}
    #about .abg-body{grid-column:span 2}
    #about .abg-photo.a,#about .abg-photo.b{grid-column:span 1;height:200px}
    #about .abg-collabs{grid-column:span 2}
    /* SOUS 860px LA GRILLE N'A PLUS QUE DEUX COLONNES. Un span 12 y
       fabrique dix colonnes implicites et ecrase toute la section :
       les deux photos, les collabs et les trois chiffres se sont
       retrouves en bandes de quarante pixels. Chaque cellule declare
       donc son empan mobile — celle-ci comme les autres. */
    #about .abg-collabs .rows{grid-template-columns:1fr 1fr}
    #about .abg-collabs .r{padding:10px 16px 10px 0}
    #about .abg-collabs .r:nth-child(odd){padding-left:0}
    #about .abg-stat{grid-column:span 1}
    #about .abg-cta{grid-column:span 2;height:88px}
  }

/* svc-redesign-css */

#services details>summary{list-style:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
#services details>summary::-webkit-details-marker{display:none}


#services .container .svc-h2{font-size:clamp(2.2rem,3.6vw,3.4rem)!important;line-height:1.02!important}
#services .container .svc-h2 em{font-size:clamp(1.5rem,2.4vw,2.1rem)!important;color:var(--accent)!important;display:block;font-style:italic;letter-spacing:0}

/* mdg-contact-footer-mob */

.contact-mob, .footer-mob { display: none; }
@media(max-width: 767px){
  #contact > .contact-mob { display: none !important; }
  #contact > .contact-inner { display: grid !important; }
  footer > .footer-main, footer > .footer-bottom { display: none !important; }
  .footer-mob { display: block !important; position: relative; z-index: 3; }
}
.contact-mob .cfm-wrap { padding: 46px 26px 0; text-align: center; }
.contact-mob .cfm-eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: .6rem; letter-spacing: .22em; color: var(--accent); text-transform: uppercase; }
.contact-mob .cfm-eyebrow span { width: 24px; height: 1.5px; background: var(--accent); }
.contact-mob .cfm-mark { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem,16vw,3.6rem); line-height: .86; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.4px var(--light); margin-top: 20px; }
.contact-mob .cfm-mark em { display: block; font-family: var(--font-accent); -webkit-text-stroke: 0; color: var(--accent); font-style: italic; font-weight: 400; font-size: .6em; margin-top: 6px; }
.contact-mob .cfm-sub { font-size: .82rem; color: var(--dim); line-height: 1.55; margin: 16px auto 0; max-width: 280px; }
.contact-mob .cfm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.contact-mob .cfm-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 20px 10px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; transition: border-color .2s, background .2s; }
.contact-mob .cfm-tile:active { background: rgba(255,255,255,.03); }
.contact-mob .cfm-tile .cfm-ico { width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.28); color: var(--accent); display: grid; place-items: center; }
.contact-mob .cfm-tile b { font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: var(--light); }
.contact-mob .cfm-tile span { font-size: .68rem; color: var(--dim); }
.contact-mob .cfm-tile.wide { grid-column: 1/-1; flex-direction: row; justify-content: center; background: var(--accent); border-color: var(--accent); padding: 16px; }
.contact-mob .cfm-tile.wide .cfm-ico { background: rgba(4,32,25,.18); border: none; color: #1D2103; width: 32px; height: 32px; }
.contact-mob .cfm-tile.wide b { color: #1D2103; font-size: .86rem; }
.contact-mob .cfm-info { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.contact-mob .cfm-info-row { display: flex; align-items: center; justify-content: space-between; font-size: .74rem; }
.contact-mob .cfm-info-row .k { color: var(--dim); letter-spacing: .04em; }
.contact-mob .cfm-info-row .v { font-family: var(--font-display); font-weight: 600; color: #cfcdc7; }
.contact-mob .cfm-dot { display: inline-flex; align-items: center; }
/* Footer mobile (assorti B) */
.footer-mob { margin-top: 0; padding: 38px 26px 30px; border-top: 1px solid var(--border); background: #040404; text-align: center; }
.footer-mob .fm-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.footer-mob .fm-logo img { height: 22px; width: auto; display: block; }
.footer-mob .fm-logo b { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--light); }
.footer-mob .fm-desc { font-size: .76rem; color: var(--dim); line-height: 1.6; margin: 14px auto 0; max-width: 300px; }
.footer-mob .fm-soc { display: flex; gap: 9px; justify-content: center; margin-top: 18px; }
.footer-mob .fm-soc a { width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; color: #cfcdc7; text-decoration: none; transition: border-color .2s, color .2s; }
.footer-mob .fm-soc a:active { border-color: var(--accent); color: var(--accent); }
.footer-mob .fm-uranus { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg,rgba(var(--accent-rgb),.12),transparent); border: 1px solid rgba(var(--accent-rgb),.25); text-decoration: none; }
.footer-mob .fm-uranus b { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .1em; color: var(--accent); }
.footer-mob .fm-uranus span { font-size: .66rem; color: var(--dim); }
.footer-mob .fm-bottom { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.footer-mob .fm-bottom p { font-size: .66rem; color:var(--dim); letter-spacing: .04em; }

/* sans id */

.spotify-warn-overlay{
    position:fixed; inset:0; z-index:99999;
    background:rgba(4,4,4,.78);
    display:flex; align-items:center; justify-content:center;
    padding:1.5rem;
    /* visibility:hidden a la fermeture : sinon ce flou plein ecran de 8px
       reste compose a chaque frame alors que rien n'est affiche. */
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .28s cubic-bezier(.16,1,.3,1), visibility 0s .28s;
  }
  .spotify-warn-overlay.open{ opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .28s cubic-bezier(.16,1,.3,1), visibility 0s; }
  .spotify-warn-box{
    width:100%; max-width:420px;
    background:linear-gradient(160deg,rgba(20,20,20,.98) 0%,rgba(10,10,10,.99) 100%);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03);
    padding:2.25rem 2rem 1.75rem;
    text-align:center;
    transform:translateY(16px) scale(.98);
    transition:transform .32s cubic-bezier(.16,1,.3,1);
  }
  .spotify-warn-overlay.open .spotify-warn-box{ transform:translateY(0) scale(1); }
  .spotify-warn-icon{
    width:60px; height:60px; margin:0 auto 1.1rem;
    border-radius:50%;
    background:rgba(29,185,84,.1);
    border:1px solid rgba(29,185,84,.25);
    display:flex; align-items:center; justify-content:center;
  }
  .spotify-warn-eyebrow{
    font-family:var(--font-body); font-size:.7rem; font-weight:600;
    letter-spacing:.22em; text-transform:uppercase;
    color:var(--dim); margin-bottom:.5rem;
  }
  .spotify-warn-title{
    font-family:var(--font-display); font-weight:700;
    font-size:1.4rem; color:var(--light);
    margin:0 0 .65rem; line-height:1.15;
  }
  .spotify-warn-text{
    font-family:var(--font-body); font-size:.9rem; line-height:1.6;
    color:var(--off); margin:0 0 1.6rem;
  }
  .spotify-warn-text strong{ color:var(--light); font-weight:600; }
  .spotify-warn-actions{ display:flex; flex-direction:column; gap:.6rem; }
  .spotify-warn-go,
  .spotify-warn-stay{
    font-family:var(--font-display); font-weight:700;
    font-size:.82rem; letter-spacing:.04em;
    padding:.9rem 1.5rem; border-radius:9999px;
    cursor:pointer; transition:all .25s cubic-bezier(.16,1,.3,1);
    width:100%;
  }
  .spotify-warn-go{
    background:#1DB954; color:#062b14; border:1px solid #1DB954;
  }
  .spotify-warn-go:hover{ background:#1ed760; transform:translateY(-2px); box-shadow:0 8px 24px rgba(29,185,84,.3); }
  .spotify-warn-stay{
    background:transparent; color:var(--off);
    border:1px solid var(--border2);
  }
  .spotify-warn-stay:hover{ color:var(--light); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.03); }
  @media(max-width:600px){
    .spotify-warn-box{ padding:1.9rem 1.4rem 1.5rem; border-radius:12px; }
    .spotify-warn-title{ font-size:1.25rem; }
  }

/* sans id */

/* Actif uniquement sur appareils à pointeur fin (souris) */
  @media (hover: hover) and (pointer: fine) {
    .mdg-cursor{
      position: fixed; top: 0; left: 0; z-index: 100000;
      pointer-events: none;
      mix-blend-mode: difference;
      opacity: 0;
      transition: opacity .3s;
    }
    .mdg-cursor.ready{ opacity: 1; }
    .mdg-cursor.is-hidden{ opacity: 0 !important; }
    .mdg-cursor-dot{
      position: fixed; top: 0; left: 0;
      width: 6px; height: 6px; border-radius: 50%;
      background: #fff;
      transform: translate(-50%, -50%);
      will-change: transform;
    }
    .mdg-cursor-ring{
      position: fixed; top: 0; left: 0;
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,.6);
      transform: translate(-50%, -50%);
      display: flex; align-items: center; justify-content: center;
      will-change: transform, width, height;
      transition: width .3s cubic-bezier(.16,1,.3,1), height .3s cubic-bezier(.16,1,.3,1), border-color .3s, background .3s;
    }
    .mdg-cursor-label{
      font-family: var(--font-display); font-weight: 700;
      font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
      color: #000; opacity: 0; transition: opacity .25s; white-space: nowrap;
    }
    /* État "VOIR" sur les cartes/covers */
    .mdg-cursor.is-view .mdg-cursor-ring{
      width: 76px; height: 76px;
      background: var(--accent); border-color: var(--accent);
    }
    .mdg-cursor.is-view .mdg-cursor-label{ opacity: 1; }
    .mdg-cursor.is-view .mdg-cursor-dot{ opacity: 0; }
    /* État "DRAG" sur les carrousels */
    .mdg-cursor.is-drag .mdg-cursor-ring{
      width: 82px; height: 82px;
      background: var(--accent); border-color: var(--accent);
    }
    .mdg-cursor.is-drag .mdg-cursor-label{ opacity: 1; }
    .mdg-cursor.is-drag .mdg-cursor-dot{ opacity: 0; }
    /* État "lien/bouton" : le ring grossit un peu */
    .mdg-cursor.is-link .mdg-cursor-ring{
      width: 54px; height: 54px;
      border-color: rgba(255,255,255,.9);
    }
    /* Le suiveur point + anneau est remplace par la fleche systeme :
       on ne masque plus le curseur. Regle neutralisee plutot que
       supprimee, pour garder trace de ce qu'elle faisait. */
    /* body.mdg-cursor-active, body.mdg-cursor-active *{ cursor: none !important; } */
    /* Exception : le slider before/after garde son curseur natif ew-resize */
    body.mdg-cursor-active .work-card-ba,
    body.mdg-cursor-active .work-card-ba *{ cursor: ew-resize !important; }
  }

/* sans id */

/* ══════════════════════════════════════════════════════════════════
   CINQ ANIMATIONS QUI NE S ARRETAIENT JAMAIS
   ──────────────────────────────────────────────────────────────────
   Il y avait ici, en boucle infinie : une lumiere qui circulait le
   long du trait de chaque sur-titre toutes les 3,8 s ; les sur-titres
   qui « respiraient » avec un halo vert toutes les 3,4 s ; les grands
   numeros de section qui pulsaient ET derivaient de 6 px toutes les
   7 s ; les pastilles de statut avec un halo qui battait toutes les
   2,2 s ; et un texte qui virait au vert lumineux pendant son
   decodage.

   Rien de tout cela ne dit quoi que ce soit. Ce sont des animations
   decoratives, ce que la direction du site ecarte, et elles tournaient
   en permanence sur toute la longueur de la page — y compris hors
   ecran. La hierarchie se fait par la taille et le blanc, pas par des
   choses qui clignotent.
   ══════════════════════════════════════════════════════════════════ */

/* mdg-ui-polish */

/* ════════════════════════════════════════════════════════════
   UI POLISH, finitions de cohérence (additions sûres, isolées)
   Bloc unique, retirable d'un coup si besoin.
   ════════════════════════════════════════════════════════════ */

/* 1. Focus clavier visible (accessibilité + sensation premium).
   Ne s'affiche qu'à la navigation clavier, jamais au clic souris. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Pas de double-anneau disgracieux sur les éléments déjà arrondis */
.u-btn-primary:focus-visible,
.hero-btn-primary:focus-visible,
.nav-cta:focus-visible,
.mob-cta:focus-visible { outline-offset: 4px; }

/* 4. Contraste lisibilité, --dim remonté pour passer le seuil AA
   sur fond sombre aux petites tailles (était #8b8b85). */
/* --dim vaut #9b968f, et cette valeur est dans assets/palette.css :
   la ou l'administration la lit, et ou la changer a un effet. */
html { scrollbar-color: rgba(255,255,255,.16) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),.45); background-clip: padding-box; }

/* Respect de prefers-reduced-motion : pour qui désactive les animations
   au niveau système, on coupe transitions/animations sans casser le layout. */
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    /* La liste blanche : rien ici ne deplace quoi que ce soit. Tout le
       reste — transform, width, height, clip-path, top/left — cesse
       d etre transitionne et devient instantane. */
    transition-property:
      opacity, visibility, color, background-color, border-color,
      outline-color, text-decoration-color, fill, stroke,
      box-shadow, filter, backdrop-filter !important;
  }
  /* Exception : dérive ambiante des covers (passerelle), mouvement doux voulu partout */
  .pass-fcol {
    animation-duration: 22s !important;
    animation-iteration-count: infinite !important;
  }
  .pass-fcol.rev { animation-duration: 27s !important; }
  /* La section pilotee l'emporte sur ces surcharges : elles datent du
     temps ou la boucle etait le seul comportement possible. */
  .pass-film--pilote .pass-fcol,
  .pass-film--pilote .pass-fcol.rev { animation: none !important; }
  @media(max-width:760px){
    .pass-fcol { animation-duration: 13s !important; }
    .pass-fcol.rev { animation-duration: 16s !important; }
  }
}

/* anti-pulse-humain */

/* ── Suppression des pulses lumineux (tell IA) : halos figés, numéros/labels
      stables, badges sans clignotement, étoiles URANUS immobiles. Les mêmes
      noms de keyframes redéfinis en états calmes (dernière déclaration = gagne). */
@keyframes collabsGlow{0%,100%{opacity:.5;transform:translateX(-50%) scale(1) translateY(0)}}
@keyframes haloBreath{0%,100%{transform:scale(1);opacity:.5}}
@keyframes u-glow-pulse{0%,100%{opacity:.6;transform:translateX(-50%) scaleX(1)}}
@keyframes u-badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,200,66,0)}}
@keyframes secLabelGlow{0%,100%{text-shadow:none}}
@keyframes secNumPulse{0%,100%{opacity:.8;text-shadow:none;transform:translateY(0)}}
@keyframes u-twinkle{0%,100%{opacity:var(--lo,.12);transform:scale(1)}}
@keyframes u-shimmer{0%,100%{background-position:0% center}}
@keyframes eePulse{0%,100%{text-shadow:0 0 40px rgba(255,255,255,.14)}}
/* le shimmer des labels de section : coupé */
.sec-label{animation:none !important}

/* mdg-dark-inversion */

/* ══════════════════════════════════════════════════════════════════
   BASCULE SOMBRE DES DEUX DERNIERES ZONES CLAIRES
   ──────────────────────────────────────────────────────────────────
   Direction MDG : le noir profond est le fond principal du site.
   Le hero (#fcfbf9) et #process (#efe9db) etaient les deux dernieres
   zones claires. Deux consequences :
     • rupture de continuite — on passait du clair au noir sans raison
       narrative, c'est le reflexe "je change le fond pour varier".
     • le vert signature y tombait a 1,1:1 de contraste, donc illisible :
       12 textes verts etaient invisibles avant cette bascule.

   Les !important sont imposes par le stock existant (1139 dans le
   fichier) : sans eux ces regles ne passent pas. A resorber au lot 1,
   quand le CSS sera extrait en couches ordonnees.
   ══════════════════════════════════════════════════════════════════ */

/* ── HERO ── */
#hero.nhero{ background:var(--black)!important; }
#hero.nhero .nh-in,
#hero.nhero .nh-toprow,
#hero.nhero .nh-cols,
#hero.nhero .nh-txt,
#hero.nhero .nh-title,
#hero.nhero .nh-title em,
#hero.nhero .nh-lede-m,
#hero.nhero .nh-chip,
#hero.nhero .nh-actions,
#hero.nhero .nh-imgwrap-mob{ color:var(--light)!important; }

#hero.nhero .nh-lede{ color:var(--off)!important; }
#hero.nhero .nh-idx { color:var(--dim)!important; }

#hero.nhero .nh-chip{
  border-color:var(--border2)!important;
  background:transparent!important;
}
#hero.nhero .nh-tag{
  background:rgba(6,6,6,.92)!important;
  color:var(--light)!important;
  border:1px solid var(--border2)!important;
}
#hero.nhero .nh-pic,
#hero.nhero .nh-imgcol,
#hero.nhero .nh-pic.loaded{ background:var(--surface)!important; }

/* Les boutons du hero sont desormais definis dans le bloc #mdg-hero.
   Les regles nth-child qui vivaient ici avaient une specificite
   superieure et retablissaient une bordure complete sur le bouton
   secondaire, alors qu'il doit etre un simple lien souligne. */

/* Carte Learning Center : etait une carte vert pale sur fond creme.
   Devient une surface sombre bordee, le vert ne sert plus que d'accent. */
.lc-band .lc-cta{
  background:var(--surface)!important;
  border:1px solid var(--border2)!important;
}
.lc-band .lc-cta__title{ color:var(--light)!important; }
.lc-band .lc-cta__sub  { color:var(--off)!important; }
.lc-band .lc-cta__eyebrow{ color:var(--dim)!important; }
.lc-band .lc-cta__go   { color:var(--accent)!important; }
.lc-band .lc-cta__new,
.lc-band .lc-cta__icon{
  background:var(--accent)!important;
  color:var(--black)!important;
}

/* ── PROCESS ── */
#process{
  background:var(--dark)!important;
  color:var(--light)!important;
  border-top:1px solid var(--border)!important;
}
#process .process-mob{ background:var(--dark)!important; }
#process h2,
#process h3,
#process .proc-title,
#process .container,
#process .process-mob{ color:var(--light)!important; }
#process p{ color:var(--off)!important; }
#process em.serif-dm{ color:var(--accent)!important; }


/* ── PASSERELLE ── */
#passerelle{ background:var(--black)!important; }
#passerelle .pass-title{ color:var(--light)!important; }
#passerelle .pass-lede { color:var(--off)!important; }
#passerelle .pass-eyebrow,
#passerelle .pass-title em,
#passerelle .pp-arr{ color:var(--accent)!important; }
/* Le CTA portait un degrade en style inline : une regle !important le bat. */
#passerelle .pass-cta{
  background:var(--accent)!important;
  color:var(--black)!important;
  box-shadow:none!important;
}
#passerelle .pass-cta span,
#passerelle .pass-cta .pp-arr{ color:var(--black)!important; }

/* ── A PROPOS ── */
#about{ background:var(--dark)!important; }
#about h2, #about .l, #about b{ color:var(--light)!important; }
#about p{ color:var(--off)!important; }
#about i, #about em{ color:var(--accent)!important; }
#about .r{
  background:var(--surface)!important;
  color:var(--light)!important;
  border-color:var(--border)!important;
}

/* ── FAQ : les cartes etaient des blocs creme sur section noire ── */
#faq .faq-item2{
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
}
#faq .faq2-q,
#faq .faq-item2 strong,
#faq .faq-item2 p,
#faq .faq-item2 div{ color:var(--light)!important; }
#faq .faq2-num,
#faq .faq2-icon{ color:var(--accent)!important; }

/* Etat actif du rail de navigation : le libelle etait vert sur pastille
   verte (contraste 1,0). Sur l'aplat d'accent, le texte passe en noir. */
.scroll-dot.active .scroll-dot-label,
.scroll-dot.is-active .scroll-dot-label,
.scroll-dot[aria-current] .scroll-dot-label{ color:var(--black)!important; }

/* Stats du hero et libelles de #process : elements sans classe, cibles
   par structure. Les regles d'accent et de texte secondaire sont
   re-affirmees APRES la regle large, sinon elles seraient ecrasees. */
#hero .nh-meta,
#hero .nh-meta b,
#hero .nh-meta span{ color:var(--light)!important; }

#process div,
#process span,
#process li{ color:var(--light)!important; }
#process p{ color:var(--off)!important; }
#process em.serif-dm,
#process .serif-dm,
#process em{ color:var(--accent)!important; }

/* Sur tout aplat vert, le texte est NOIR. Le vert est trop lumineux
   (L=0.86) pour porter du texte clair : .mob-cta etait en gris sur lime. */
.mob-cta,
.mob-cta *,
.nav-cta,
.scta-link--accent,
.pass-cta{ color:var(--black)!important; }

/* Noms des collaborations du hero : couleur calee sur l'ancien fond clair. */
#hero .nh-collabs-names,
#hero .nh-collabs-names b{ color:var(--off)!important; }

/* mdg-hero */

/* ══════════════════════════════════════════════════════════════════
   HERO — v2 : composition en blocs
   ──────────────────────────────────────────────────────────────────
   v1 corrigeait l'echelle du titre mais gardait le schema texte-a-gauche
   / image-a-droite : la structure la plus vue du web. Resultat : plus
   grand, mais toujours classique et trop vide. Et le Learning Center,
   reduit a une ligne grise, avait perdu toute presence alors que c'est
   le produit d'appel.

   v2 : une grille de blocs. Le titre reste dominant mais le vide du
   milieu est occupe par la tuile Learning Center, qui devient la seule
   SURFACE CLAIRE de la page. Sur un site noir, un aplat clair est
   l'evenement visuel le plus fort qui existe — plus fort que le vert,
   et d'une nature differente, donc sans concurrence avec le CTA.

   Repartition des emphases :
     vert plein  → action principale (marques)
     aplat clair → offre gratuite (Learning Center)
     filets      → structure editoriale
   ══════════════════════════════════════════════════════════════════ */

/* ── Le titre porte la page ── */
#hero.nhero .nh-title{
  /* Borne par la HAUTEUR autant que par la largeur : cale uniquement en
     vw, il poussait la bande de preuve hors de l'ecran sur un portable. */
  font-size:min(clamp(3.4rem, 10.5vw, 9rem), 18vh)!important;
  line-height:.84!important;
  letter-spacing:-.035em!important;
  margin:0!important;
}
#hero.nhero .nh-title em{
  font-size:.56em!important;
  letter-spacing:-.01em!important;
  color:var(--light)!important;
}

/* ── Une seule action verte ── */
#hero.nhero .nh-btn--p{
  background:var(--accent)!important;
  color:var(--black)!important;
  border:none!important;
  padding:15px 28px!important;
}
#hero.nhero .nh-btn--p:hover{
  background:var(--accent-press)!important;
  transform:translateY(-2px)!important;
  box-shadow:none!important;
}
#hero.nhero .nh-btn--s{
  background:transparent!important;
  border:none!important;
  color:var(--off)!important;
  padding:15px 4px!important;
  border-radius:0!important;
  border-bottom:1px solid rgba(255,255,255,.18)!important;
}
#hero.nhero .nh-btn--s:hover{
  color:var(--light)!important;
  border-bottom-color:var(--light)!important;
  transform:none!important;
}

/* ── Image : contre-champ, plus une carte ── */
#hero.nhero .nh-imgcol{
  border-radius:0!important;
  background:var(--dark)!important;
  min-height:0!important;
}
#hero.nhero .nh-imgcol img{
  filter:grayscale(1) contrast(1.06)!important;
  object-position:50% 22%!important;
}
#hero.nhero .nh-tag{
  background:rgba(6,6,6,.82)!important;
  color:var(--light)!important;
  border:1px solid var(--border2)!important;
}

/* ══════════════════════════════════════════════════════════════════
   TUILE LEARNING CENTER — la seule surface claire de la page
   La version d'origine etait une carte sombre bordee de vert avec un
   balayage lumineux et un halo : l'effet etait tapageur mais l'element
   restait sombre sur fond sombre. Un aplat clair ressort davantage,
   sans aucun effet.
   ══════════════════════════════════════════════════════════════════ */
#hero.nhero .lc-cta{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:.75rem!important;
  background:var(--light)!important;
  border:none!important;
  border-radius:4px!important;
  padding:1.15rem 1.25rem!important;
  margin:0!important;
  box-shadow:none!important;
  transition:transform .3s cubic-bezier(.16,1,.3,1),scale var(--t-court) var(--ease-appui)!important;
}
#hero.nhero .lc-cta::before{ display:none!important; }   /* balayage lumineux supprime */
#hero.nhero .lc-cta:hover{
  transform:translateY(-3px)!important;
  background:#fff!important;
  box-shadow:none!important;
}
#hero.nhero .lc-cta__icon{
  width:38px!important;height:38px!important;border-radius:12px!important;
  background:var(--accent)!important;      /* seul accent vert de la tuile */
  border:none!important;
  box-shadow:none!important;               /* halo supprime */
  flex:none!important;
}
#hero.nhero .lc-cta__icon svg{ width:20px!important;height:20px!important; }
#hero.nhero .lc-cta__icon svg *{ stroke:#101206!important; }
#hero.nhero .lc-cta__body{
  flex:1 1 auto!important;
  display:flex!important; flex-direction:column!important; gap:.3rem!important;
}
#hero.nhero .lc-cta__eyebrow{
  font-family:var(--font-display)!important;   /* JetBrains Mono n'est pas chargee */
  font-size:.58rem!important;
  color:#6f6b64!important;
}
#hero.nhero .lc-cta__new{
  background:#101206!important;
  color:var(--accent)!important;
  border:none!important;
}
#hero.nhero .lc-cta__title{
  font-size:1.02rem!important;
  color:#101206!important;
  line-height:1.15!important;
}
#hero.nhero .lc-cta__sub{ color:#5c5a54!important; font-size:.74rem!important; }
#hero.nhero .lc-cta__go{
  color:#101206!important;
  font-size:.76rem!important;
  align-self:flex-start!important;
}
#hero.nhero .lc-cta:hover .lc-cta__go i{ transform:translateX(5px)!important; }

/* ── Bande basse ── */
#hero.nhero .nh-meta b{ font-size:1.8rem!important; color:var(--light)!important; }
#hero.nhero .nh-collabs-names .hl{ color:var(--off)!important; }
#hero.nhero .nh-pic{ border-color:var(--black)!important; background:var(--surface)!important; }

/* Le rail de navigation affichait "Accueil" alors qu'on est deja en haut,
   et sa pastille fixe recouvrait les chiffres. Il n'apparait qu'apres. */
#quick-nav,
#scrollIndicator{ transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1); }
#quick-nav.qn-hidden{ opacity:0; transform:translateY(10px); pointer-events:none; }
/* Le rail vertical posait son libelle "Accueil" par-dessus le portrait.
   Meme raison que la pastille : on est deja en haut, l'indication est
   redondante tant qu'on n'a pas quitte le hero. */
#scrollIndicator.qn-hidden{ opacity:0; pointer-events:none; }

/* ══════════ DESKTOP : la grille de blocs ══════════ */
@media(min-width:768px){
  #hero.nhero .nh-in{ max-width:1440px!important; }

  /* .nh-txt s'efface : ses enfants deviennent cellules de .nh-cols */
  #hero.nhero .nh-txt{ display:contents!important; }

  #hero.nhero .nh-cols{
    height:100%!important;
    grid-template-columns:minmax(0,1fr) minmax(230px,.58fr) clamp(260px,24vw,460px)!important;
    grid-template-areas:
      "titre    titre     image"
      "lede     learning  image"
      "actes    learning  image"
      "collabs  collabs   collabs"!important;
    /* L'espace libre est place sur la DERNIERE rangee : sinon il
       s'ouvrait sous les boutons et laissait un vide de 165px au milieu
       de la colonne gauche. Le groupe titre/accroche/actions reste
       soude, la bande de preuve se cale en bas. */
    grid-template-rows:auto auto auto 1fr!important;
    align-content:stretch!important;
    column-gap:clamp(20px,2.4vw,34px)!important;
    row-gap:0!important;
  }

  #hero.nhero .nh-title   { grid-area:titre;  align-self:center; }
  #hero.nhero .nh-lede    { grid-area:lede;   max-width:30ch!important;
                            text-wrap:pretty;
                            margin:clamp(14px,1.8vw,22px) 0 0!important; align-self:start; }
  #hero.nhero .nh-actions { grid-area:actes;  margin-top:clamp(14px,1.8vw,20px)!important;
                            align-self:start; }

  /* La tuile occupe le vide du milieu, sur deux rangees */
  #hero.nhero .lc-cta{
    grid-area:learning;
    margin-top:clamp(14px,1.8vw,22px)!important;
    align-self:stretch!important;
  }

  /* Pas de debord. calc(50% - 50vw) se resout contre la largeur de la
     CELLULE de grille, pas du conteneur : il donnait -785px de marge, soit
     une image de 1115px dont 550px hors ecran — le sujet passait dehors.
     La colonne reste dans la grille et garde des proportions tenables. */
  #hero.nhero .nh-imgcol{
    grid-area:image;
    align-self:stretch;
    margin-right:0!important;
    min-height:clamp(300px,44vh,540px)!important;
  }

  /* Bande basse, filet continu */
  /* LA BANDE DE PREUVE TIENT TOUTE LA LARGEUR, CENTREE.
     Elle occupait deux colonnes sur trois, calee a droite, parce que
     les trois chiffres tenaient la premiere. Ces chiffres sont partis
     dans la section « La preuve » : la cellule est restee vide et la
     ligne flottait seule contre le bord droit, sans rien en face.

     CENTREE SUR DEMANDE DU PROPRIETAIRE. Elle a d'abord ete calee a
     gauche, sur le bord du titre, au motif que tout ce qui la precede
     dans cette colonne part de la. Vue a l'ecran, la decision est
     autre : la bande est le PIED du heros, elle court sous les trois
     colonnes et non sous la seule colonne de texte — un pied se
     centre sur ce qu'il porte, pas sur l'un de ses appuis.

     La variante mobile centrait deja, plus bas dans la feuille. Les
     deux disent maintenant la meme chose. */
  #hero.nhero .nh-collabs{
    grid-area:collabs;
    margin-top:clamp(16px,2.2vw,28px)!important;
    padding-top:14px!important;
    border-top:1px solid var(--border)!important;
    justify-content:center!important;
    text-align:center;
    align-self:end;
  }

  #hero.nhero .nh-imgwrap-mob{ display:none!important; }
}

/* ══════════ MOBILE ══════════ */
@media(max-width:767px){
  /* La barre d'onglets mobile est fixe, 56px, au ras du bas. */
  #hero.nhero{ padding-bottom:calc(56px + env(safe-area-inset-bottom,0px) + 18px)!important; }
  #hero.nhero .nh-title{ font-size:clamp(2.7rem,13vw,4.2rem)!important; }
  /* La source du hero mobile est une VERTICALE (1536x2752). Elle etait
     posee dans une boite horizontale de 327x179 : 30% de la photo
     visible, le sujet coupe. La boite reprend un format portrait proche
     de la source, et le cadrage vise le haut du buste plutot que le
     centre geometrique. Le hero deborde alors legerement sous la ligne
     de flottaison, ce qui est le comportement normal d'un hero mobile
     et invite au defilement. */
  #hero.nhero .nh-imgwrap-mob{
    height:auto!important;
    aspect-ratio:4/5!important;
    width:68%!important;              /* portrait resserre : le cadrage est
                                         conserve sans payer 409px de hauteur
                                         sur un ecran de 812 */
    max-width:270px!important;
    max-height:38vh!important;
    margin:14px auto 0!important;
    overflow:hidden;
  }
  #hero.nhero .nh-imgwrap-mob img{
    width:100%!important; height:100%!important;
    object-fit:cover!important;
    object-position:50% 28%!important;
  }
  #hero.nhero .nh-actions{ flex-direction:column!important; align-items:stretch!important; gap:10px!important; }
  #hero.nhero .nh-btn--p{ justify-content:center!important; }
  #hero.nhero .nh-btn--s{ justify-content:center!important; border-bottom:none!important; }

  /* Tuile compacte : icone + titre + fleche sur un rang */
  #hero.nhero .lc-cta{
    flex-direction:row!important;
    align-items:center!important;
    text-align:left!important;
    margin-top:14px!important;
    padding:.85rem 1rem!important;
    gap:.8rem!important;
  }
  #hero.nhero .lc-cta__sub{ display:none!important; }
  #hero.nhero .lc-cta__title{ font-size:.94rem!important; }
  #hero.nhero .lc-cta__go span{ display:none!important; }

  #hero.nhero .nh-meta{
    margin-top:20px!important; padding-top:14px!important;
    border-top:1px solid var(--border)!important;
    justify-content:space-between!important;
  }
  #hero.nhero .nh-meta b{ font-size:1.4rem!important; }
}

/* ══════════════════════════════════════════════════════════════════
   COUCHE DONNEE  (.mdg-num)
   Indices de section, valeurs, pourcentages, delais. Ces elements
   etaient en Instrument Serif italique : a cote d'un titre en Space
   Grotesk, un chiffre en serif italique ne lit pas comme une intention
   mais comme une police oubliee. Ils passent dans la voix display, en
   chiffres tabulaires — c'est le traitement, pas une famille de plus,
   qui les distingue.
   ══════════════════════════════════════════════════════════════════ */
.mdg-num{
  font-family:var(--font-display)!important;
  font-style:normal!important;
  font-weight:700!important;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  letter-spacing:-.01em!important;
}

/* ── Avatars des collaborations ──
   40px et bordes de creme (couleur du fond clair d'avant la bascule) :
   ils se decoupaient mal sur le noir. Plus grands, bordes du fond reel,
   et le chevauchement se resserre a la survol pour marquer le groupe. */
#hero.nhero .nh-pics{ padding-left:4px; }
#hero.nhero .nh-pic{
  width:54px!important; height:54px!important;
  border:2px solid var(--black)!important;
  background:var(--surface)!important;
  transition:transform .3s cubic-bezier(.16,1,.3,1), margin .3s cubic-bezier(.16,1,.3,1);
}
#hero.nhero .nh-pic + .nh-pic{ margin-left:-16px!important; }
#hero.nhero .nh-pics:hover .nh-pic + .nh-pic{ margin-left:-6px!important; }
#hero.nhero .nh-pic:hover{ transform:translateY(-3px); z-index:2; position:relative; }
@media(max-width:767px){
  #hero.nhero .nh-pic{ width:46px!important; height:46px!important; }
  #hero.nhero .nh-pic + .nh-pic{ margin-left:-13px!important; }
}

/* ── Stats "A propos" : le libelle chevauchait le chiffre ──
   .abg-tag etait en position:absolute avec mix-blend-mode:difference.
   Des que le chiffre grandissait (mobile), sa ligne remontait sous le
   libelle : les deux se superposaient sur ~4px et le melange de couches
   donnait des lettres parasites. Le libelle repasse dans le flux, en
   sur-titre normal. */
/* Correction : .abg-lede et .abg-body sont en flex RANGEE. Un libelle
   remis dans le flux y devient un frere HORIZONTAL du paragraphe, colle
   a sa gauche et centre sur sa hauteur — d'ou l'effet de travail bacle.
   Le libelle repasse donc en surimpression dans le coin de sa cellule,
   comme les reperes Fig. 01 : c'est le meme systeme, applique partout.
   Le chevauchement d'origine se reglait par la reserve de place en haut
   de cellule, pas en changeant le flux. */
#about .abg-tag{
  position:absolute!important; top:13px!important; left:20px!important;
  display:block!important; margin:0!important;
  mix-blend-mode:normal!important;
  color:var(--dim)!important;
  font-size:.5rem!important; font-weight:700!important;
  letter-spacing:.2em!important; text-transform:uppercase!important;
  line-height:1!important; white-space:nowrap!important;
  padding-left:9px!important;
}
/* Un tiret vert cale le libelle sur la verticale de sa cellule : sans
   lui, le repere flotte sans attache dans l'angle. */
#about .abg-tag::before{
  content:''; position:absolute; left:0; top:.12em;
  width:4px; height:.62em; background:var(--accent);
}
/* Reserve de place : uniquement dans les cellules de TEXTE. Les cellules
   d'image gardent padding:0, le repere s'y pose sur la photo. */
#about .abg-lede, #about .abg-body,
#about .abg-stat, #about .abg-mast, #about .abg-loc{
  padding-top:36px!important;
}
#about .abg-title{ padding-top:clamp(38px,3vw,52px)!important; }
#about .abg-photo .abg-tag, #about .abg-portrait .abg-tag{
  color:#fff!important; z-index:2!important; top:10px!important; left:12px!important;
}
#about .abg-photo .abg-tag::before, #about .abg-portrait .abg-tag::before{
  background:var(--accent);
}
/* ── Les reperes poses SUR une photo ──
   Ils sont en blanc pur, et rien ne garantissait qu'il y ait quelque
   chose de sombre dessous. Les deux images du bas sont des silhouettes
   sur fond de studio BLANC : mesure sur bureau, le contraste du libelle
   tombait a 1,05:1 — du blanc sur du blanc, le repere n'existait plus.
   Le portrait n'etait guere mieux loti, a 1,7:1.

   Le libelle reste blanc et la photo reste a fleur de cellule : c'est
   un voile sombre, degrade jusqu'a rien sur 70px, qui rend le fond que
   la photo ne fournit pas. Pas de cartouche ni de plaque derriere le
   texte — l'ombre appartient a l'image, comme en presse. */
#about .abg-photo::before,
#about .abg-portrait::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:70px; z-index:1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.78) 0,
    rgba(0,0,0,.55) 40%,
    rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* ── Rangee de logos partenaires ──
   Chaque logo portait une hauteur inline arbitraire (24, 30, 18, 27, 22px) :
   aucune normalisation, donc Omzo Beatz paraissait deux fois plus petit que
   ses voisins. Ils partagent desormais une BOITE commune et object-fit s'occupe
   du format. Les silhouettes sont ramenees au blanc : plusieurs fichiers sont
   des logos noirs, invisibles sur fond sombre. */
.mdg-partner{
  height:auto!important;
  width:auto!important;
  max-width:100%!important;
  max-height:34px!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1)!important;
  opacity:.72!important;
  transition:opacity .25s ease;
}
.mdg-partner:hover{ opacity:1!important; }
@media(max-width:767px){ .mdg-partner{ max-height:28px!important; } }

/* ── Bloc de statut dans la nav ──
   Il portait un flex-direction:column inline : un empilement de deux
   lignes au milieu d'une barre dont tous les autres elements tiennent
   sur une seule. Il cassait le rythme et se retrouvait coince entre le
   dernier lien et le selecteur de langue. Remis sur une ligne, separe
   par un point median, dans la voix donnee. */
nav .nav-avail{
  flex-direction:row!important;
  align-items:center!important;
  gap:.55rem!important;
  white-space:nowrap;
}
nav .nav-avail > span{ display:inline-flex!important; align-items:center; gap:.5rem; }
nav .nav-avail .nav-avail-sep{
  width:1px; height:11px; background:var(--border2); display:inline-block;
}
nav .nav-right{ gap:1.15rem!important; margin-left:1.5rem; }

/* Le bouton Learning Center de la nav etait borde de vert, juste a cote
   du CTA vert : deux verts qui se disputent la meme zone. Le Learning
   Center a deja sa tuile claire dans le hero, il n'a pas besoin du vert
   ici aussi. */
nav .nav-cta[href="/learning-center"]{
  border-color:var(--border2)!important;
  color:var(--off)!important;
}
nav .nav-cta[href="/learning-center"]:hover{
  border-color:var(--light)!important;
  color:var(--light)!important;
}

/* ══════════════════════════════════════════════════════════════════
   UN SEUL FILET PAR JONCTION
   Des elements adjacents dessinaient chacun leur bord a la MEME
   ordonnee : le trait faisait alors 2px et paraissait plus epais que
   les autres filets de la page. Cinq jonctions etaient concernees.
   A chaque fois on supprime un cote, jamais les deux, pour que la
   separation reste visible.
   ══════════════════════════════════════════════════════════════════ */

/* Les bandes de rappel suivent toujours une section qui porte deja son
   bord inferieur : elles n'ont pas besoin du leur en haut. */
.section-cta-band{ border-top:none!important; }

/* #collabs porte deja un bord inferieur ; le bord superieur que la
   bascule sombre avait ajoute a #process faisait doublon. */
#process{ border-top:none!important; }

/* La grille de FAQ et ses cartes dessinaient les memes aretes.
   Les cartes gardent leurs bords, le conteneur n'en a plus. */
.faq-grid{ border-top:none!important; border-bottom:none!important; }

/* ══════════════════════════════════════════════════════════════════
   GOUTTIERE MOBILE UNIQUE
   Chaque section avait la sienne : about 15px, portfolio 36, services
   42, process 46, faq 48, contact 69. Les filets heritant de la largeur
   de leur conteneur, aucun ne s'alignait avec le suivant — d'ou des
   traits qui semblent decales de bloc en bloc en descendant la page.
   Une seule valeur, alignee sur celle du hero.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  #about .abg-cell{ padding-left:var(--gutter)!important; padding-right:var(--gutter)!important; }
  #portfolio-accordion .chap{ margin-left:var(--gutter)!important; margin-right:var(--gutter)!important; }
  #faq .faqm-item{ margin-left:var(--gutter)!important; margin-right:var(--gutter)!important; }

  /* Deux cartes de FAQ qui se suivent dessinaient chacune leur bord :
     le trait entre elles faisait 2px. Seule la premiere garde le sien. */
  #faq .faqm-item + .faqm-item{ border-top:none!important; }
}

/* ══════════════════════════════════════════════════════════════════
   CITATION SELECTIONNEE
   La phrase se termine sur un fragment traite comme une selection
   systeme : surlignage, deux poignees, bulle contextuelle. Le vert
   signature remplace le bleu systeme, et la bulle agit reellement —
   un temoignage se cite, l'interface le rend litteralement citable.
   ══════════════════════════════════════════════════════════════════ */
.mdg-sel{
  position:relative;
  display:inline;
  background:var(--accent);
  color:var(--black);
  padding:.06em .1em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  border-radius:2px;
}
/* Les deux poignees de selection */
.mdg-sel::before,
.mdg-sel::after{
  content:'';
  position:absolute;
  width:2px;
  height:calc(100% + .22em);
  background:var(--accent);
  top:-.11em;
}
.mdg-sel::before{ left:-2px; }
.mdg-sel::after { right:-2px; }
.mdg-sel-dot{
  position:absolute; width:11px; height:11px; border-radius:50%;
  background:var(--accent); pointer-events:none;
}
.mdg-sel-dot--a{ left:-6px;  top:-.42em; }
.mdg-sel-dot--b{ right:-6px; bottom:-.42em; }

/* Bulle contextuelle */
.mdg-sel-menu{
  position:absolute;
  left:0; top:calc(100% + .68em);
  display:inline-flex; align-items:stretch;
  background:#1b1b1b;
  border:1px solid var(--border2);
  border-radius:9999px;
  padding:2px;
  white-space:nowrap;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-6px);
  transition:opacity .24s ease, transform .24s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  z-index:5;
}
.mdg-sel:hover .mdg-sel-menu,
.mdg-sel:focus-within .mdg-sel-menu,
.mdg-sel.is-open .mdg-sel-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mdg-sel-menu::after{
  content:''; position:absolute; bottom:100%; left:26px;
  border:6px solid transparent; border-bottom-color:#1b1b1b;
}
.mdg-sel-act{
  font-family:var(--font-body); font-size:.72rem; font-weight:500;
  color:var(--light); background:none; border:none; cursor:pointer;
  padding:.42rem .85rem; border-radius:9999px;
  transition:background .18s ease, color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.mdg-sel-act:hover{ background:rgba(255,255,255,.09); }
.mdg-sel-act.is-done{ color:var(--accent); }
.mdg-sel-div{ width:1px; background:var(--border2); margin:.28rem 0; }

/* La citation gagne en echelle : c'est elle l'evenement de la section */
#social-proof .stg-quote blockquote{
  font-family:var(--font-display)!important;
  font-style:normal!important;      /* elle heritait d'un italique */
  font-weight:700!important;
  font-size:clamp(1.55rem, 3.4vw, 2.9rem)!important;
  line-height:1.14!important;
  letter-spacing:-.02em!important;
  color:var(--light)!important;
  margin-bottom:3.2rem!important;   /* place pour la bulle sous le fragment */
}
#social-proof .stg-quote blockquote b{ font-weight:700; color:var(--light); }
#social-proof .stg-quote .qm{ display:none!important; }

@media(max-width:767px){
  #social-proof .stg-quote blockquote{ font-size:clamp(1.35rem,6.4vw,1.9rem)!important; }
  .mdg-sel-menu{ left:auto; right:0; }
  .mdg-sel-menu::after{ left:auto; right:26px; }
}
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  .mdg-sel-menu{ transition:none; }
}

/* ── Logos partenaires : equilibre OPTIQUE ──
   Normaliser par la hauteur seule ne suffit pas : a hauteur egale, un logo
   carre occupe bien moins de surface qu'un logo large et parait deux fois
   plus petit. C'etait le cas d'Omzo Beatz (carre) a cote de Sine Saloum
   (2,6:1). On repartit donc par rapport de forme. */
.mdg-partner--sq{ max-height:46px!important; }   /* carres : Omzo, ISS, Mpossible */
.mdg-partner--md{ max-height:36px!important; }   /* intermediaires */
.mdg-partner--wd{ max-height:28px!important; }   /* larges : Sine Saloum */
@media(max-width:767px){
  .mdg-partner--sq{ max-height:38px!important; }
  .mdg-partner--md{ max-height:30px!important; }
  .mdg-partner--wd{ max-height:24px!important; }
}

/* ── Le "50+" des collaborations ──
   Il etait en lettres evidees (-webkit-text-stroke, remplissage
   transparent), seul de son espece dans la section : a cote des autres
   chiffres pleins il ne se lisait pas comme une intention mais comme un
   rendu casse — le meme defaut que les watermarks retires. Il redevient
   plein, dans la voix donnee, et c'est l'echelle qui lui donne du poids. */
#collabs .mdg-outline-fix{
  -webkit-text-stroke:0!important;
  -webkit-text-fill-color:var(--light)!important;
  color:var(--light)!important;
  font-family:var(--font-display)!important;
  font-weight:700!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em!important;
}
#collabs .mdg-outline-fix .u{ color:var(--accent)!important; -webkit-text-fill-color:var(--accent)!important; }

/* ── Motion sous prefers-reduced-motion ──
   Tout couper laisse une page inerte pour qui a active le reglage. La
   recommandation est de remplacer le DEPLACEMENT par un fondu, pas de
   supprimer toute transition. Les reveals restent donc perceptibles. */
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  [data-reveal] .mdg-word > i,
  [data-snap]   .mdg-word > i{
    opacity:0!important; transform:none!important; filter:none!important;
    transition:opacity .4s ease!important;
  }
  [data-reveal].is-in .mdg-word > i,
  [data-snap].is-in   .mdg-word > i{ opacity:1!important; }
}

/* ── Chiffres evides : on remplit ──
   Plusieurs statistiques du site etaient en lettres creuses
   (-webkit-text-stroke + remplissage transparent). Isolees au milieu de
   chiffres pleins, elles ne se lisent pas comme une intention mais comme
   un rendu casse — meme defaut que les watermarks retires. Elles
   redeviennent pleines ; c'est l'echelle qui porte, pas le contour. */
.stat-number.outline,
.stat-number.outline .suf,
.stat-mini-number.outline,
.contact-mob .cfm-mark{
  -webkit-text-stroke:0!important;
  -webkit-text-fill-color:var(--light)!important;
  color:var(--light)!important;
  font-variant-numeric:tabular-nums;
}
/* Le suffixe garde l'accent : un seul signe vert, pas tout le nombre. */
.stat-number.outline .suf,
.contact-mob .cfm-mark em{
  -webkit-text-fill-color:var(--accent)!important;
  color:var(--accent)!important;
}

/* ══════════════════════════════════════════════════════════════════
   BARRE FLOTTANTE, PILULE ET SATELLITE
   ──────────────────────────────────────────────────────────────────
   Avant : une barre pleine largeur collee au bas de l'ecran, creusee
   d'une encoche par un masque radial, plus un calque separe pour
   loger le rond qui s'y encastrait. Trois pieces pour une forme.

   L'encoche coutait cher. Le masque devait suivre l'indicateur par
   --notch-x, l'indicateur devait vivre HORS de la barre pour ne pas
   etre rogne, et le trou restait orphelin des que l'un des deux
   bougeait sans l'autre.

   Une pilule qui flotte n'a rien a creuser. Le bouton se pose A COTE
   d'elle — c'est le meme geste, sans le decoupage. Le masque radial
   disparait, et avec lui la variable qui le pilotait.

   Deux objets poses sur la page plutot qu'un bandeau qui la ferme :
   on voit le contenu passer DESSOUS et sur les cotes, ce qu'une barre
   bord a bord interdisait.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  /* Le retrait des bords, et la place que le satellite prend a droite.
     Une seule source pour ces nombres : la pilule et le satellite
     doivent s'aligner au pixel, et ils sont poses separement. */
  :root{
    --nav-marge:14px;
    --nav-h:60px;
    --nav-sat:56px;
    --nav-ecart:10px;
    --nav-bas:max(14px, calc(env(safe-area-inset-bottom,0px) + 10px));
  }

  #mob-tab-bar{
    position:fixed;
    left:var(--nav-marge)!important;
    right:calc(var(--nav-marge) + var(--nav-sat) + var(--nav-ecart))!important;
    bottom:var(--nav-bas)!important;
    height:var(--nav-h)!important;
    padding:0 4px;
    border:none;
    border-radius:9999px;
    align-items:center!important;
    justify-content:space-around!important;
    /* Le masque creusait l'encoche. Il n'y a plus d'encoche. */
    -webkit-mask-image:none!important;
            mask-image:none!important;
    overflow:hidden;
  }

  /* Les quatre onglets, a egalite dans la pilule */
  #mob-tab-bar .mob-tab{
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; color:var(--dim); text-decoration:none;
    position:relative;
    height:calc(var(--nav-h) - 10px);
    margin:5px 0;
    border-radius:9999px;
    transition:color .2s ease, background .25s ease;
  }
  #mob-tab-bar .mob-tab svg{ width:17px; height:17px; stroke-width:1.7; }
  #mob-tab-bar .mob-tab span{
    font-family:var(--font-display); font-weight:700;
    font-size:7.5px; letter-spacing:.08em; text-transform:uppercase;
    line-height:1; white-space:nowrap;
  }

  /* L'onglet actif prend un fond, pas un point. Sur une pilule, une
     pastille interieure se lit d'un coup d'oeil ; un point de 3 px
     demandait de chercher lequel des quatre le portait. */
  #mob-tab-bar .mob-tab.active{
    color:var(--accent);
    background:rgba(var(--accent-rgb),.11);
  }
  #mob-tab-bar .mob-tab.active svg{ opacity:1; }
  #mob-tab-bar .mob-tab.active::before,
  #mob-tab-bar .mob-tab.active::after{ display:none!important; }

  /* L'espace de l'encoche n'existe plus ; la regle survivrait au cas ou
     un onglet garderait la classe. */
  

  /* ── LE SATELLITE ──
     Pose hors de la pilule, donc jamais rogne par son overflow ni par
     son rayon. Le calque hote garde pointer-events:none pour ne pas
     couvrir la page ; seul le bouton reprend les clics. */
  .mdg-tabcta-host{
    position:fixed!important;
    left:auto!important;
    right:var(--nav-marge)!important;
    bottom:var(--nav-bas)!important;
    width:var(--nav-sat);
    height:var(--nav-h);
    display:flex!important; align-items:center; justify-content:center;
    z-index:8402;
    pointer-events:none;
  }
  .mdg-tabcta-host > *{ pointer-events:auto; }

  .mdg-tabcta-host .mob-tab-cta{
    position:relative!important;
    left:auto!important; top:auto!important;
    transform:none!important;
    margin:0; flex:none;
    width:var(--nav-sat); height:var(--nav-sat);
    min-height:0;
    border:none;
    border-radius:9999px;
    background:var(--accent);
    color:var(--black)!important;
    display:flex; align-items:center; justify-content:center; gap:0;
    box-shadow:0 14px 34px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--accent-rgb),.35);
    transition:transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .mdg-tabcta-host .mob-tab-cta:active{ transform:scale(.93)!important; }
  .mdg-tabcta-host .mob-tab-cta span{ display:none; }
  .mdg-tabcta-host .mob-tab-cta::before,
  .mdg-tabcta-host .mob-tab-cta::after{ display:none!important; }
  .mdg-tabcta-host .mob-tab-cta svg{
    stroke:var(--black)!important; color:var(--black)!important;
    width:21px!important; height:21px!important; stroke-width:2!important;
  }

  /* Les deux autres objets du bas s'alignent sur la meme ligne de flottaison
     plutot que de garder chacun la sienne : 68 px pour l'un, 16 pour l'autre. */
  #quick-nav{ bottom:calc(var(--nav-bas) + var(--nav-h) + 10px)!important; left:var(--nav-marge)!important; }
  #backToTop{ bottom:calc(var(--nav-bas) + var(--nav-h) + 10px)!important; right:var(--nav-marge)!important; }
}

@media(max-width:767px) and (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  #mob-tab-bar .mob-tab,
  .mdg-tabcta-host .mob-tab-cta{ transition:none!important; }
}

/* ══════════════════════════════════════════════════════════════════
   DEGRADE DE TITRE
   D'apres la reference, mais dans la palette MDG : blanc casse vers le
   vert signature, pas un arc-en-ciel. Le degrade est reserve au segment
   ACCENTUE des titres — l'appliquer partout annulerait la hierarchie
   qu'il est cense creer.
   ══════════════════════════════════════════════════════════════════ */

/* L'italique editorial des titres prend le degrade : c'est le seul
   moment ou le vert touche la typographie. */
#hero .nh-title em,
.pass-title em,
#services .svc-h2 em,
.proc-title em{
  background:linear-gradient(96deg, var(--light) 8%, #DCEBA0 55%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ══════════════════════════════════════════════════════════════════
   CURSEUR
   Un point plein et un anneau qui le suit avec du retard. L'anneau
   s'ouvre sur les elements interactifs. Rien d'autre : pas de trainee,
   pas de deformation.
   ══════════════════════════════════════════════════════════════════ */
@media(hover:hover) and (pointer:fine){
  .mdg-cursor{ mix-blend-mode:normal; }
  .mdg-cursor-dot{
    width:5px!important; height:5px!important;
    background:var(--light)!important;
    border-radius:50%;
    transition:width .2s ease, height .2s ease, opacity .2s ease;
  }
  .mdg-cursor-ring{
    width:30px!important; height:30px!important;
    border:1px solid rgba(240,237,232,.34)!important;
    background:transparent!important;
    border-radius:50%;
    transition:width .28s cubic-bezier(.16,1,.3,1),
               height .28s cubic-bezier(.16,1,.3,1),
               border-color .22s ease, background .22s ease;
  }
  /* Au survol d'un element actionnable : l'anneau s'ouvre et prend
     l'accent, le point s'efface. */
  body.mdg-hot .mdg-cursor-ring{
    width:52px!important; height:52px!important;
    border-color:var(--accent)!important;
    background:rgba(var(--accent-rgb),.08)!important;
  }
  body.mdg-hot .mdg-cursor-dot{ opacity:0!important; }
  .mdg-cursor-label{
    font-family:var(--font-display); font-weight:700;
    font-size:.5rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent);
  }
}

/* Le module de revelation decoupe le texte en .mdg-word > i. Le degrade
   pose sur l'element parent est donc clippe sur SON texte, qui n'existe
   plus : il vit dans les descendants, lesquels heritent du remplissage
   transparent sans avoir de fond. Resultat, le texte disparaissait.
   On propage le fond aux porteurs reels du texte. */
.mdg-grad .mdg-word,
.mdg-grad .mdg-word > i,
#hero .nh-title em .mdg-word,
#hero .nh-title em .mdg-word > i,
.pass-title em .mdg-word,
.pass-title em .mdg-word > i,
#services .svc-h2 em .mdg-word,
#services .svc-h2 em .mdg-word > i,
.proc-title em .mdg-word,
.proc-title em .mdg-word > i{
  background-image:inherit;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ── Cadrages apres echange des photos ──
   Le hero recoit le carre (nuque) : cadrage sur le haut du buste.
   #about recoit la verticale (profil assis) : cadrage plus bas, le
   sujet y est au tiers inferieur. */
#hero.nhero .nh-imgcol img{ object-position:50% 26%!important; }
#hero.nhero .nh-imgwrap-mob img{ object-position:50% 24%!important; }
#about .abg-portrait img{ object-position:50% 18%!important; }

/* ══════════════════════════════════════════════════════════════════
   L'INDICATEUR MOBILE, RETIRE
   Le rond vert glissait vers l'onglet actif et lui empruntait son
   icone, tout en gardant openContact() au clic : il montrait
   « Portfolio » et ouvrait le Contact. Un seul objet, deux messages.

   Il redevient une action unique, posee a cote de la pilule, et
   l'onglet actif se marque dans la pilule — la ou on le cherche.
   Les regles vivent desormais dans BARRE FLOTTANTE, plus haut.
   ══════════════════════════════════════════════════════════════════ */

/* ── #about : les deux photos secondaires ──
   Elles occupaient 6 colonnes sur 12 pour 270px de haut, soit une fente
   de 2,75:1 — alors que les sources sont CARREES. Resultat : 36% de
   l'image visible, reduite a une bande horizontale. Ramenees a 4
   colonnes et un peu plus hautes, elles retrouvent un format proche de
   leur source et se rangent a cote du portrait sur la meme rangee. */
@media(min-width:768px){
  /* 4 colonnes laissaient 460px de vide a droite : toutes les autres
     rangees de la grille sont pleines, celle-ci ne l'etait pas. On garde
     6 colonnes et on gagne la proportion sur la HAUTEUR. */
  #about .abg-photo{ grid-column:span 6!important; height:clamp(360px,31vw,470px)!important; }
  #about .abg-photo img{ object-position:50% 30%!important; }
  /* Le portrait garde ses 4 colonnes et ses 2 rangees : la rangee est
     donc complete (4+4+4) et rien ne se retrouve orphelin. */
  #about .abg-portrait img{ object-position:50% 18%!important; }
}

/* ── Filet en double sous le titre des Realisations ──
   .port-new-top dessine deja son bord inferieur ; le premier .chap
   dessinait le sien juste en dessous, a 22px et sur une largeur
   differente. Deux traits la ou il en faut un, et desalignes de surcroit.
   Le premier chapitre perd son bord superieur. */
#portfolio-accordion .chap:first-of-type{ border-top:none!important; }

/* ══════════════════════════════════════════════════════════════════
   CURSEUR
   Le site masquait le curseur natif (cursor:none) pour afficher un point
   suivi d'un anneau. C'est un tic d'agence, et ce n'est pas ce que fait
   Apple : leurs sites laissent la fleche systeme. On la restitue en SVG
   pour l'avoir a l'identique partout, Windows compris — noire cernee de
   blanc, avec la pointe exactement sur le point actif.

   Sur les elements actionnables, elle prend le vert MDG : c'est le seul
   changement d'etat, pas de deformation ni de trainee.
   ══════════════════════════════════════════════════════════════════ */
@media(hover:hover) and (pointer:fine){
  /* Pas de selecteur descendant universel ici : "body.x *" aurait une
     specificite superieure a "a, button" et ecraserait la variante verte
     des elements actionnables. */
  body,
  body.mdg-cursor-active{ cursor:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='32'%20viewBox='0%200%2024%2032'><path%20d='M3%201.5%20L3%2024.2%20L8.9%2018.5%20L12.6%2027.1%20L16.4%2025.5%20L12.8%2017.1%20L20.5%2016.9%20Z'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'%20stroke-linejoin='round'/></svg>") 3 2, auto !important; }

  a, button, [role="button"], summary, label,
  .work-card, .cov-card, .mob-tab, [data-mot-src], .mdg-sel, .lc-cta,
  input[type="submit"], input[type="button"], select{
    cursor:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='32'%20viewBox='0%200%2024%2032'><path%20d='M3%201.5%20L3%2024.2%20L8.9%2018.5%20L12.6%2027.1%20L16.4%2025.5%20L12.8%2017.1%20L20.5%2016.9%20Z'%20fill='%23E4FA5A'%20stroke='%23060606'%20stroke-width='1.6'%20stroke-linejoin='round'/></svg>") 3 2, auto !important;
  }
  input[type="text"], input[type="email"], input[type="tel"], textarea{
    cursor:text !important;
  }
  .work-card-ba, .work-card-ba *{ cursor:ew-resize !important; }

  /* Le suiveur point + anneau n'a plus lieu d'etre. */
  #mdgCursor{ display:none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   TITRES DE SECTION : LE TRAITEMENT URANUS
   ──────────────────────────────────────────────────────────────────
   Capitales + degrade sur la PREMIERE partie, le reste en blanc et en
   casse normale. Le contraste ne vient pas de deux familles mais de
   deux traitements de la meme famille.

   Le HERO en est exclu : "L'ELITE / se remarque." fonctionnait avec son
   contraste capitales pleines / serif italique degrade. Le passer tout
   en capitales lui faisait perdre sa respiration.
   ══════════════════════════════════════════════════════════════════ */
.pass-title,
#services .svc-h2,
.proc-title,
#portH2{
  text-transform:uppercase!important;
  font-weight:700!important;
  line-height:.92!important;
  letter-spacing:-.04em!important;
}
.pass-title > .mdg-word > i,
#services .svc-h2 > .mdg-word > i,
.proc-title > .mdg-word > i,
#portH2 > .mdg-word > i{
  background:linear-gradient(118deg,
    #FFFFFF 0%, #E9F2C4 34%, var(--accent) 72%, #B4CE38 100%)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}

/* Le segment secondaire : blanc, casse normale, aucun degrade. */
.pass-title em,
#services .svc-h2 em,
.proc-title em,
#portH2 em{
  display:block;
  font-family:var(--font-display)!important;
  font-style:normal!important;
  font-weight:700!important;
  font-size:1em!important;
  text-transform:none!important;
  letter-spacing:-.03em!important;
  background:none!important; background-image:none!important;
  -webkit-text-fill-color:var(--light)!important;
  color:var(--light)!important;
}
.pass-title em .mdg-word > i,
#services .svc-h2 em .mdg-word > i,
.proc-title em .mdg-word > i,
#portH2 em .mdg-word > i{
  background:none!important; background-image:none!important;
  -webkit-text-fill-color:var(--light)!important;
  color:var(--light)!important;
}

/* ── HERO : capitales, seconde ligne degradee ──
   "L'ELITE" plein, "SE REMARQUE." en capitales dans la meme famille,
   porte par un degrade blanc vers vert. Le titre devient un bloc d'une
   seule voix, la seconde ligne decalee vers la droite.

   Le degrade est porte par les MOTS, jamais par le parent : le module
   de revelation deplace le texte dans des descendants, et un fond
   clippe sur le parent n'a alors plus de texte a clipper — il peignait
   un bloc vert plein. */
#hero.nhero .nh-title{
  text-transform:uppercase!important;
  background:none!important;
  -webkit-text-fill-color:var(--light)!important;
  color:var(--light)!important;
  font-size:min(clamp(3rem, 9.4vw, 7.6rem), 16vh)!important;
  line-height:.92!important;
  letter-spacing:-.04em!important;
}
#hero.nhero .nh-title > .mdg-word > i{
  background:none!important;
  -webkit-text-fill-color:var(--light)!important;
}
#hero.nhero .nh-title em{
  display:block;
  font-family:var(--font-display)!important;
  font-style:normal!important;
  font-weight:700!important;
  font-size:1em!important;
  text-transform:uppercase!important;
  letter-spacing:-.04em!important;
  padding-left:.18em;              /* le decalage de la seconde ligne */
  background:none!important;
}
#hero.nhero .nh-title em .mdg-word > i{
  background:linear-gradient(104deg,
    #FFFFFF 0%, #E9F2C4 30%, var(--accent) 62%, #C7E24A 100%)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
/* Le meme degrade, porte par l'em LUI-MEME.

   Il ne vivait que sur .mdg-word > i, les porteurs que le decoupage
   fabrique. Le titre se frappe desormais caractere par caractere : il
   n'est plus decoupe, ces porteurs n'existent plus, et le degrade
   n'avait plus de support. Or la regle qui rend le texte transparent
   pour laisser voir le degrade, elle, s'appliquait toujours : "se
   remarque." etait peint en transparent sur rien, donc invisible.

   Cette regle vient APRES le background:none de l'em, sinon elle serait
   annulee. Elle ne gene pas le decoupage s'il revenait un jour : dans
   ce cas l'em ne porte plus de texte en direct, son degrade se
   decouperait sur du vide et les porteurs garderaient le leur. */
#hero.nhero .nh-title em{
  background:linear-gradient(104deg,
    #FFFFFF 0%, #E9F2C4 30%, var(--accent) 62%, #C7E24A 100%)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
@media(max-width:767px){
  #hero.nhero .nh-title{ font-size:clamp(2.3rem,11vw,3.6rem)!important; }
  #hero.nhero .nh-title em{ padding-left:0; }
}

/* ══════════════════════════════════════════════════════════════════
   OUVERTURE : LE RIDEAU VERT
   ──────────────────────────────────────────────────────────────────
   C'est le seul moment ou le vert a le droit d'occuper tout l'ecran —
   precisement parce qu'il ne le fait jamais ailleurs. Il se retire vers
   le haut et decouvre le noir : le contraste de la marque est pose en
   une seconde, avant meme la premiere ligne de contenu.

   Le mecanisme existant est conserve : deux logos superposes, celui du
   dessus revele de bas en haut par un clip-path qui suit le chargement
   reel. On ne rajoute pas d'attente, on habille celle qui existe.
   ══════════════════════════════════════════════════════════════════ */
#loader{
  background:var(--accent)!important;
}
/* Le logo est un PNG blanc : sur le vert il faut l'inverser en noir. */
#loader .loader-logo-ghost{
  filter:brightness(0)!important;
  opacity:.17!important;
}
#loader .loader-logo-fill{
  filter:brightness(0)!important;   /* le halo lime n'a plus de sens sur du vert */
}
/* Le rideau : plus lent et mieux amorti que le defaut, pour qu'il se
   lise comme un geste et non comme un ecran qui disparait. */
#loader.done{
  transition:transform .78s cubic-bezier(.76,0,.18,1)!important;
}

/* Sous prefers-reduced-motion, le rideau ne glisse pas : il s'efface.
   Le contraste vert -> noir reste percu, sans deplacement. */
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  #loader.done{
    transform:none!important;
    opacity:0!important;
    transition:opacity .35s ease!important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DEUX CORRECTIONS DE TITRES
   ══════════════════════════════════════════════════════════════════ */

/* 1. "Plus exigeant que productif." : tout le titre virait au vert.
   La regle d'inversion #about i, #about em{color:var(--accent)} visait
   les italiques — mais le module de revelation enveloppe CHAQUE MOT dans
   un <i>. Des qu'un texte de cette section recoit data-reveal, il passe
   donc entierement au vert. Les porteurs de mots heritent desormais de
   leur parent : les mots dans <em> restent verts, les autres non. */
#about .mdg-word > i{ color:inherit!important; }

/* 2. Hero : "SE" se detachait sur sa propre ligne. La ligne occupait
   94%% de la largeur du titre — assez pour tenir, trop peu pour resister
   au moindre ecart de largeur ou de chargement de police. Le segment
   accentue est desormais insecable, et la taille reduite lui laisse une
   vraie marge au lieu de 6%%. */
@media(min-width:768px){
  #hero.nhero .nh-title em{ white-space:nowrap!important; }
  #hero.nhero .nh-title{ font-size:min(clamp(3rem, 8.6vw, 7rem), 15vh)!important; }
}

/* ══════════════════════════════════════════════════════════════════
   LE LECTEUR NE DOIT JAMAIS PARAITRE VIDE
   L'effacement emportait la barre entiere. On ne retire plus que la
   RANGEE DE BOUTONS : la ligne de progression reste, en retrait. Elle
   dit deux choses a la fois — ou en est la video, et ou appuyer pour
   retrouver le reste.
   ══════════════════════════════════════════════════════════════════ */
#motion-fullscreen.is-playing.ctl-hidden #mfs-controls{
  opacity:1!important; visibility:visible!important;
  background:transparent!important;
}
#motion-fullscreen.is-playing.ctl-hidden #mfs-row{
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
#motion-fullscreen.is-playing.ctl-hidden #mfs-timeline{ opacity:.55; }
#mfs-row{ transition:opacity .25s ease, visibility .25s ease; }
#mfs-timeline{ transition:opacity .25s ease; }

/* Fin de lecture : le bouton central ne dit pas "reprendre" mais
   "revoir". Sans ce mot, un rond avec un triangle laisse croire que la
   video va continuer alors qu'elle est finie. */
#motion-fullscreen.is-ended #mfs-play::after{
  content:attr(data-mdg-revoir);
  position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%);
  font-family:var(--font-display); font-weight:700;
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); white-space:nowrap;
}
#motion-fullscreen.is-ended #mfs-play{ overflow:visible; }

/* ══════════════════════════════════════════════════════════════════
   BOUTON A SURVOL INTERACTIF
   Un point sombre s'ouvre depuis la gauche et recouvre le bouton ; le
   libelle se dissout, un second arrive par la droite avec sa fleche.
   Reserve aux CTA PRINCIPAUX : l'appliquer partout ferait de ce geste
   un bruit de fond au lieu d'une hierarchie.
   ══════════════════════════════════════════════════════════════════ */
.mdg-ihb{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
}

/* Le point, puis le voile. Un seul element pour les deux : c'est la
   meme forme qui grandit, donc le geste se lit comme un seul mouvement. */
.mdg-ihb::before{
  /* Le voile passe AU-DESSUS du libelle plutot que derriere. Le faire
     disparaitre par la couleur supposait de battre
     "#hero.nhero .nh-btn--p{color:var(--black)!important}" — un ID, qu'aucun
     nombre de classes ne peut depasser. Le recouvrir evite la surenchere,
     et fonctionne quel que soit le bouton. */
  content:''; position:absolute; z-index:2;
  left:16px; top:50%;
  width:9px; height:9px; margin-top:-4.5px;
  border-radius:9999px;
  background:var(--black);
  transform:scale(1);
  transition:transform .46s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.mdg-ihb:hover::before,
.mdg-ihb:focus-visible::before{ transform:scale(90); }

/* Le libelle entrant. Il vit dans un attribut : l'envelopper dans un
   <span> couperait le noeud texte et le traducteur ne reconnaitrait
   plus le bouton. */
.mdg-ihb::after{
  content:attr(data-mdg-ihb);
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  gap:.4em;
  color:var(--accent);
  opacity:0; transform:translateX(26%);
  transition:opacity .3s ease .06s, transform .46s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  font:inherit; letter-spacing:inherit; text-transform:inherit; white-space:nowrap;
}
.mdg-ihb:hover::after,
.mdg-ihb:focus-visible::after{ opacity:1; transform:translateX(0); }

@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  /* Le glissement est du deplacement : il est remplace par une simple
     inversion, qui dit la meme chose sans rien bouger. */
  .mdg-ihb::before{ transition:none; transform:scale(90); opacity:0; }
  .mdg-ihb:hover::before, .mdg-ihb:focus-visible::before{ opacity:1; }
  .mdg-ihb::after{ transition:opacity .2s ease; transform:none; }
}

/* Sur ecran tactile il n'y a pas de survol : le bouton doit rester
   parfaitement lisible dans son etat de repos. */
@media(hover:none){
  .mdg-ihb::before, .mdg-ihb::after{ display:none!important; }
  .mdg-ihb:hover{ color:inherit!important; }
}

/* sans id */


/* mdg-motion */

/* ══════════════════════════════════════════════════════════════════
   MOTION MDG
   ──────────────────────────────────────────────────────────────────
     [data-reveal]  revelation par lignes, flou + montee  (Dia)
     [data-snap]    mots qui se calent d'un coup           (Snap Text)
     [data-count]   compteurs chiffres                     (Animate Count)
     [data-orbit]   cartes courbees sur un arc             (Orbital Wheel)

   Durees : 120ms (retour tactile) / 240ms (etat) / 420-900ms (entree).
   Courbe unique : cubic-bezier(.16,1,.3,1). Sortie plus rapide qu'entree.
   Tout est neutralise sous prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════ */

/* Le masque est porte par le MOT, l'animation par le <i> a l'interieur.
   Consequence essentielle : on ne deplace aucun noeud du document, donc
   les <em>, <b> et liens survivent. Une premiere version regroupait les
   mots dans des conteneurs de ligne et detruisait le <em> italique du
   hero ("se remarque."), qui repassait en sans-serif. */
.mdg-word{ display:inline-block; overflow:hidden; vertical-align:top; }
/* Pas de will-change ici. Il y etait, sur trois proprietes, et reservait
   une couche GPU par mot decoupe : 102 couches tenues pendant toute la
   visite, sur un telephone qui n'en a pas les moyens.

   Il ne servait a rien. La seule propriete reellement transitionnee est
   l'opacite, sur 0,4 s ; le brouillage, lui, pose transform et filter
   d'un seul coup sans les animer. Le compositeur promeut de lui-meme le
   temps de la transition. will-change est un signal pour une animation
   IMMINENTE : le tenir en permanence est precisement l'usage a eviter. */
.mdg-word > i{ display:inline-block; font-style:inherit; font-weight:inherit; }

/* Etat initial pose en CSS : evite tout flash avant que JS ne prenne la main. */
[data-reveal] .mdg-word > i{ opacity:0; transform:translateY(105%); filter:blur(6px); }
[data-snap]   .mdg-word > i{ opacity:0; transform:translateY(18px); }

/* Compteurs : chiffres tabulaires, sinon la largeur saute a chaque
   increment et toute la ligne tremble pendant le decompte. */
[data-mdg-count]{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* ══════════════════════════════════════════════════════════════════
   CHAPITRE WEB — vignettes en attente d'image
   ──────────────────────────────────────────────────────────────────
   Ces vignettes menent a une etude de cas, elles n'ouvrent pas la
   visionneuse. Tant qu'aucune capture n'est deposee, la case porte le
   nom du projet : elle garde sa place, ses proportions et son sens,
   au lieu de laisser un cadre vide qui ressemblerait a une panne.
   ══════════════════════════════════════════════════════════════════ */

.chap-web-nom{
  font-family:var(--font-display); font-weight:700;
  font-size:.62rem; line-height:1.2; letter-spacing:.01em;
  color:var(--off); text-wrap:balance;
}
.chap-it--web:hover .chap-web-nom{ color:var(--light) }

/* L'ecusson dit un etat, pas une invitation a cliquer : il reste sombre,
   pour ne pas attirer l'oeil davantage que les deux vraies vignettes-liens.
   Le point accent suffit a le rattacher a la charte. */
.chap-web-ici{
  position:absolute; left:9px; bottom:9px;
  display:inline-flex; align-items:center;
  font-family:var(--font-display); font-weight:700;
  font-size:.5rem; line-height:1; letter-spacing:.09em; text-transform:uppercase;
  color:var(--light); background:rgba(14,14,14,.78);
  border:1px solid rgba(255,255,255,.16);
  padding:5px 9px; border-radius:9999px;
}

/* ══════════════════════════════════════════════════════════════════
   MACHINE A ECRIRE
   ──────────────────────────────────────────────────────────────────
   Le curseur suit le dernier caractere pose. Il clignote, mais il est
   RETIRE des la fin de la frappe : rien ne continue de tourner apres.
   ══════════════════════════════════════════════════════════════════ */
.mdg-caret{
  display:inline-block; width:.055em; height:.76em;
  margin-left:.05em; vertical-align:baseline;
  background:var(--accent);
  animation:mdg-caret .9s steps(1) infinite;
}
@keyframes mdg-caret{ 50%{ opacity:0 } }
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  /* Clignoter est un mouvement : sous mouvement reduit le curseur reste
     pose, visible mais fixe. */
  .mdg-caret{ animation:none }
}

/* Roue orbitale : perspective portee par le conteneur, sinon chaque carte
   cree la sienne et l'arc ne se lit pas. */
[data-orbit]{ perspective:1400px; perspective-origin:50% 50%; }
[data-orbit] > *{ transform-style:preserve-3d; will-change:transform; }

@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  /* "Mouvement reduit" ne veut pas dire "aucune animation" : c'est le
     DEPLACEMENT qui est en cause, pas le fondu, lequel est explicitement
     admis. La revelation joue donc quand meme, en opacite seule — sinon
     le site parait mort sur toute machine ayant l'option activee.
     La roue orbitale, elle, reste figee : c'est du vrai mouvement. */
  [data-reveal] .mdg-word > i,
  [data-snap]   .mdg-word > i{ transform:none!important; filter:none!important; }
  [data-orbit] > *{ transform:none!important; opacity:1!important; }
}

/* Caracteres encore brouilles. Le remplissage est repose explicitement :
   sur les titres en degrade, le parent impose -webkit-text-fill-color
   transparent, que ce span heriterait sans avoir de fond a lui — il
   serait donc purement invisible. */
.mdg-scr{
  color:var(--accent)!important;
  -webkit-text-fill-color:var(--accent)!important;
}

/* mdg-form-states */

/* ══════════════════════════════════════════════════════════════════
   ETATS DE FORMULAIRE : ENVOI, ERREUR, SUCCES
   ══════════════════════════════════════════════════════════════════ */

/* Envoi. Un balayage traverse le libelle pendant l'aller-retour reseau.
   Il ne pretend pas connaitre la progression : il dit seulement que ca
   travaille, ce qui est exactement l'information disponible. Il s'arrete
   des que la reponse arrive — c'est ce qui le separe d'un ornement.
   Le texte est noir sur le vert : la bande rend ce noir partiellement
   transparent, donc le vert du bouton traverse la lettre et celle-ci
   s'eclaircit au passage. */
.mdg-shim{
  background-image:linear-gradient(100deg,
    currentColor 0%, currentColor 40%,
    rgba(6,6,6,.26) 50%,
    currentColor 60%, currentColor 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:mdg-shim 1.15s linear infinite;
}
@keyframes mdg-shim{ from{ background-position:200% 0 } to{ background-position:-60% 0 } }

@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  /* Le balayage est un deplacement : il est REMPLACE, pas supprime.
     L'information "ca travaille" est fonctionnelle, pas decorative —
     l'effacer laisserait l'utilisateur sans retour pendant toute
     l'attente reseau. Une respiration d'opacite la porte sans rien
     deplacer a l'ecran. */
  .mdg-shim{
    background-image:none;
    -webkit-text-fill-color:currentColor;
    /* !important assume : une regle universelle du site pose
       "*, ::before, ::after { animation-duration:.001ms !important }"
       sous ce reglage. C'est un coupe-circuit global, et le retour
       d'attente est la seule animation qui doive y survivre. */
    animation:mdg-shim-doux 1.6s ease-in-out infinite!important;
  }
  @keyframes mdg-shim-doux{ 0%,100%{ opacity:1 } 50%{ opacity:.42 } }
}

/* Erreur. Reste DANS le formulaire : le texte saisi n'est pas perdu et
   le recours est a portee de clic. */
.mdg-formerr{
  margin-top:14px; padding:13px 15px;
  border:1px solid rgba(255,110,110,.34);
  border-left:3px solid #FF6E6E;
  border-radius:4px;
  background:rgba(255,110,110,.07);
  font-family:var(--font-body); font-size:.82rem; line-height:1.55;
  color:var(--off);
}
.mdg-formerr b{
  display:block; margin-bottom:5px;
  font-family:var(--font-display); font-weight:700;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:#FF8B8B;
}
.mdg-formerr a{
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(var(--accent-rgb),.4);
}
.mdg-formerr a:hover{ border-bottom-color:var(--accent); }

/* mdg-mark-css */

/* == SOULIGNAGE D'UNE PHRASE ==
   Un trait qui se dessine sous UNE phrase, puis s'arrete. Il sert la
   hierarchie : il designe l'argument, il ne decore pas. En poser
   plusieurs annulerait ce qu'il cree. */
.mdg-mark{ position:relative; }

/* LE TRAIT LUI-MEME. Ces deux regles avaient disparu avec la purge du
   CSS mort : le <svg> est cree A L'EXECUTION par le script, il n'existe
   dans aucun balisage, et aucune analyse statique ne pouvait le voir.

   Sans `position:absolute`, le SVG revient dans le flux et se pose
   APRES le texte au lieu de dessous. Sans `fill:none; stroke:…`, le
   trace prend le defaut SVG — remplissage noir, aucun contour — et
   devient un aplat. La fonctionnalite ne visait plus rien depuis la
   reecriture de l'accroche : le defaut ne pouvait donc pas se voir. */
.mdg-mark-trait{
  position:absolute; pointer-events:none; overflow:visible; z-index:0;
}
.mdg-mark-trait path{
  fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200);
  transition:stroke-dashoffset .78s cubic-bezier(.16,1,.3,1) var(--delai,0s);
}
.mdg-mark-hote.is-on .mdg-mark-trait path{ stroke-dashoffset:0; }
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  /* Le trait reste, il ne se dessine plus : c'est le TRACE qui est du
     mouvement, pas le trait lui-meme. */
  .mdg-mark-trait path{ transition:none!important; stroke-dashoffset:0!important; }
}

/* ══════════════════════════════════════════════════════════════════
   CIBLES TACTILES : 44px MINIMUM
   ──────────────────────────────────────────────────────────────────
   Mesure avant correction : 57 commandes sur 120 mesuraient moins de
   44px sur mobile — 48%. Sur un site pense pour le telephone, c'est le
   defaut le plus concret : un bouton de 35px se rate.

   La regle ne s'applique qu'aux ecrans TACTILES. Une souris vise au
   pixel ; lui imposer des boutons de 44px alourdirait la composition
   sans rien resoudre.

   Deux exclusions volontaires :
     - .mdg-hp, le piege anti-spam, doit rester invisible et minuscule ;
     - les liens en ligne DANS une phrase sont exemptes par la norme
       (WCAG 2.5.8) : les agrandir casserait l'interlignage du texte.
   ══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  /* Boutons ronds et icones : la surface grandit, le dessin ne bouge pas. */
  .mfs-btn,
  .lb-nav,
  .modal-close,
  .cpop-close,
  .mob-close,
  .nav-logo,
  .lang-toggle,
  #motion-fullscreen-close,
  #motion-fullscreen-prev,
  #motion-fullscreen-next,
  #mfs-retry {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Pastilles de choix et onglets : on gagne en hauteur, la pilule
     reste une pilule. */
  .cqf-chip,
  .cpop-chip-opt,
  .chap-btn,
  .cpop-tab,
  .mdg-sel-act,
  .mob-tab,
  .port-new-tab-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Champs de saisie : 44px sert autant la visee que la lisibilite. */
  .cpop-input,
  .cpop-custom-select-btn,
  .cqf-wa,
  .scta-link,
  input:not([type="hidden"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 44px !important;
  }

  /* Liens de pied de galerie : hors flux de phrase, ils peuvent grandir. */
  .port-gallery-footer-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* Deuxieme passe : par ROLE plutot que par nom de classe.
   Les commandes restantes n'avaient pas de classe a cibler. Un <button>
   est toujours une commande — il n'y a pas de cas ou 44px le gene. Les
   liens, eux, ne sont vises que hors flux de phrase : pied de page,
   navigation, et liens porteurs d'une icone. */
@media (pointer: coarse) {

  button:not(.mdg-hp) {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .skip-link,
  footer a,
  nav a,
  .social a,
  .port-gallery-footer a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Liens dont le contenu est une icone : ils n'ont pas de texte pour
     donner de la surface, il faut la leur poser.

     a:has(> img) etait ici aussi, et c'etait une erreur de portee. Ce
     selecteur attrape TOUTE vignette cliquable du site, pas seulement
     les icones : les 27 cartes de Visuals et les 14 de Cover Art sont
     des <a><img>. Son display:inline-flex!important ecrasait alors la
     regle qui replie ces grilles sur mobile, et les deux chapitres se
     deversaient en entier. Motion y echappait par accident, ses
     cellules etant des <button>.

     Mesure avant retrait : sur 48 liens-icones sans texte, 44 depassent
     deja 44px. La moitie img ne protegeait donc rien, et cassait 41
     vignettes. Les 4 liens reellement courts sont des <a><svg>, a
     42x42 : c'est la moitie svg qui les rattrape, et elle reste. */
  a:has(> svg) {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Lien d'action isole dans sa cellule : ce n'est pas un lien de phrase,
   il porte une action et merite la meme surface que les autres. */
@media (pointer: coarse) {
  .abg-cta a,
  .abg-cell a:only-child {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FOCUS DES CHAMPS DE SAISIE
   La regle generale couvre a, button et [role=button] : contour vert de
   2px, parfaitement lisible. Les champs de formulaire, eux, ne
   recevaient qu'un changement de bordure a rgba(255,255,255,.22) —
   imperceptible sur fond sombre. Quelqu'un qui remplit le formulaire au
   clavier ne savait pas ou il se trouvait.

   Le contour est pose EN PLUS du changement de bordure existant, qui
   reste utile a la souris.
   ══════════════════════════════════════════════════════════════════ */
input:not([type="hidden"]):not(.mdg-hp):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Certains navigateurs n'exposent pas encore :focus-visible sur les
   champs : le focus simple sert de filet, sans penaliser la souris
   puisque cliquer dans un champ est deja une intention explicite. */
@supports not selector(:focus-visible) {
  input:not([type="hidden"]):not(.mdg-hp):focus,
  select:focus,
  textarea:focus {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   EXPERTISES
   ──────────────────────────────────────────────────────────────────
   La section disait juste, mais elle ne montrait rien : des filets
   d'un pixel, aucune profondeur, aucune reaction au survol. Sur une
   page qui vend de la direction artistique, c'etait le pire endroit
   ou etre plat.

   Un seul principe, tire des trois references : une lueur coloree
   derriere une surface sombre, des plans qui se decollent, et UN
   element mis en avant a la fois. Le reste — polices, couleurs,
   rayons — vient de la charte du site : rien n'est importe.

   Le halo suit le pointeur (assets/lueur.js pose --mx / --my). Sans
   JavaScript il reste centre en haut : la carte s'allume quand meme.
   ══════════════════════════════════════════════════════════════════ */
.xp{
  position:relative; overflow:hidden;
  border-radius:18px; border:1px solid var(--border);
  background:
    radial-gradient(130% 100% at 50% -14%, rgba(var(--accent-rgb),.07), transparent 62%),
    #0a0a0a;
  padding:clamp(44px,5.5vw,88px) clamp(22px,4.4vw,72px);
}
/* Un filet clair sur l'arete haute : c'est ce qui fait lire le panneau
   comme une surface eclairee par le dessus, et non comme un trou. */
.xp::before{
  content:''; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  pointer-events:none;
}
.xp-chiffre{
  position:absolute; top:26px; right:clamp(18px,3.5vw,58px);
  font-family:var(--font-accent); font-style:italic;
  font-size:clamp(5rem,11vw,9rem); line-height:1;
  color:rgba(255,255,255,.028); pointer-events:none; user-select:none;
}

.xp-tete{ position:relative; z-index:1 }
.xp-etiquette{
  display:flex; align-items:center; gap:15px;
  font-family:var(--font-display); font-weight:700;
  font-size:.66rem; letter-spacing:.3em; color:var(--accent);
  margin-bottom:26px;
}
.xp-trait{ width:34px; height:1px; background:var(--accent); flex:0 0 auto }
.xp-intro{
  font-family:var(--font-body); font-weight:300;
  font-size:clamp(.9rem,1.05vw,1rem); line-height:1.75;
  color:#8f8b84; max-width:56ch; margin:0 0 clamp(38px,4.6vw,62px);
}

/* ── La rangee de tuiles ──────────────────────────────────────────
   Huit disciplines, une seule allumee. C'est la touche eclairee au
   milieu d'une rangee eteinte : l'oeil sait ou il est avant de lire. */
.xp-tuiles{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  flex:1 1 auto; min-width:0;
}
.xp-t{
  display:flex; flex-direction:column; align-items:center;
  width:clamp(84px,8.6vw,106px); padding:14px 8px 12px;
  border-radius:16px; cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  color:var(--off);
  transition:transform .38s cubic-bezier(.34,1.25,.64,1), border-color .3s,
             box-shadow .3s, background .3s, color .3s;
}
.xp-t-icone{ display:block; width:26px; height:26px }
.xp-t-icone svg{ width:100%; height:100%; display:block }
.xp-t-no{
  font-family:var(--font-accent); font-style:italic;
  font-size:.8rem; line-height:1; opacity:.45; margin-top:7px;
}
.xp-t-nom{
  font-family:var(--font-display); font-weight:700;
  font-size:.58rem; line-height:1.25; letter-spacing:.01em;
  text-align:center; margin-top:7px; text-wrap:balance;
}
.xp-t:hover{ color:var(--light); border-color:rgba(255,255,255,.2) }
.xp-t:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.xp-t[aria-selected="true"]{
  color:var(--accent); transform:translateY(-9px);
  border-color:rgba(var(--accent-rgb),.55);
  background:linear-gradient(160deg, rgba(var(--accent-rgb),.17), rgba(var(--accent-rgb),.03));
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.06),
             0 20px 44px -18px rgba(var(--accent-rgb),.85);
}
.xp-t[aria-selected="true"] .xp-t-no{ opacity:1 }

/* Sur ecran etroit la rangee ne tient pas : elle defile, avec un cran
   d'arret par tuile. Mieux qu'un retour a la ligne qui casse le rang. */
@media(max-width:760px){
  .xp-tuiles{
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding:14px 2px 12px; margin-left:-4px; margin-right:-4px;
    scrollbar-width:none;
  }
  .xp-tuiles::-webkit-scrollbar{ display:none }
  .xp-t{ flex:0 0 auto; scroll-snap-align:center; width:92px }
}

/* ── Le rail : dire qu'il y a autre chose a cote ───────────────────
   La rangee defilait sans le dire. Sur un ecran tactile, un contenu
   coupe net au bord se lit comme un defaut de mise en page, pas comme
   une invitation a faire glisser.

   Deux fleches l'encadrent : elles changent de discipline, donc leur
   seule presence annonce qu'il y en a avant et apres. Elles sont
   DESACTIVEES pour de vrai aux extremites — c'est ainsi qu'on sait
   qu'on est arrive au bout. Et les bords s'estompent tant qu'il reste
   quelque chose a atteindre de ce cote-la. */
.xp-rail{ position:relative; display:flex; align-items:center; gap:8px }
.xp-rail-f{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto; padding:0;
  border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); color:var(--light);
  transition:background .25s, border-color .25s, color .25s, opacity .25s;
}
.xp-rail-f svg{ width:16px; height:16px; display:block }
.xp-rail-f:hover:not(:disabled){
  background:rgba(var(--accent-rgb),.14); border-color:rgba(var(--accent-rgb),.5); color:var(--accent);
}
.xp-rail-f:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.xp-rail-f:disabled{ opacity:.26; cursor:default }

/* Les voiles de bord vivent sur le rail, pas sur la zone qui defile :
   posees sur celle-ci, elles glisseraient avec le contenu. */
.xp-rail::before, .xp-rail::after{
  content:''; position:absolute; top:0; bottom:0; width:44px;
  pointer-events:none; opacity:0; transition:opacity .25s; z-index:2;
}
.xp-rail::before{ left:38px;  background:linear-gradient(90deg, #0a0a0a, transparent) }
.xp-rail::after { right:38px; background:linear-gradient(270deg, #0a0a0a, transparent) }
.xp-rail.a-gauche::before{ opacity:1 }
.xp-rail.a-droite::after { opacity:1 }

.xp-indice{
  display:none;
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.04em;
  color:var(--dim); text-align:center; margin:12px 0 0;
}
.xp-rail.a-droite ~ .xp-indice, .xp-rail.a-gauche ~ .xp-indice{ display:block }

@media(max-width:760px){
  .xp-tuiles{ margin-left:0; margin-right:0 }
}

/* ── La scene : lueur, pile, panneau ──────────────────────────────
   Deux bords de cartes depassent derriere le panneau. Ce n'est pas un
   ornement : c'est ce qui dit qu'il y en a d'autres dessous, et que
   celle-ci est au-dessus. */
.xp-scene{ position:relative; padding-top:20px; margin-top:clamp(32px,4.2vw,54px) }
.xp-lueur{
  position:absolute; left:50%; top:-6%;
  width:min(820px,96%); height:78%;
  transform:translateX(-50%); z-index:0; pointer-events:none;
  background:radial-gradient(52% 56% at var(--mx,50%) var(--my,38%),
             rgba(var(--accent-rgb),.22), transparent 72%);
  filter:blur(34px);
}
.xp-pile{
  position:absolute; left:50%; transform:translateX(-50%);
  height:46px; border-radius:16px; z-index:0;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}
.xp-pile--1{ top:9px;  width:calc(100% - 30px) }
.xp-pile--2{ top:0;    width:calc(100% - 66px) }

.xp-panneaux{ position:relative; z-index:1 }
.xp-p{
  display:grid; grid-template-columns:1.12fr 1fr;
  gap:clamp(26px,3vw,54px);
  padding:clamp(28px,3.2vw,46px);
  border-radius:17px;
  border:1px solid rgba(var(--accent-rgb),.2);
  background:linear-gradient(168deg, rgba(255,255,255,.062), rgba(255,255,255,.014) 60%), #0b0b0b;
  box-shadow:0 34px 86px -44px rgba(var(--accent-rgb),.55),
             inset 0 1px 0 rgba(255,255,255,.06);
  animation:xpEntree .4s cubic-bezier(.2,.85,.3,1) both;
}
/* display:grid ci-dessus l'emporterait sur l'attribut hidden : il faut
   le dire explicitement, sinon les huit panneaux s'affichent d'un coup. */
.xp-p[hidden]{ display:none }
@keyframes xpEntree{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

.xp-p-no{
  display:block; font-family:var(--font-accent); font-style:italic;
  font-size:clamp(3.4rem,5.6vw,5rem); line-height:.78;
  color:var(--accent); opacity:.9;
}

/* Les mots-cles, poses de travers comme des etiquettes collees a la
   main. Ils se redressent quand on les approche. */
.xp-etis{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 18px }
.xp-eti{
  display:inline-flex; padding:5px 11px; border-radius:8px;
  font-family:var(--font-display); font-weight:700;
  font-size:.58rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(var(--accent-rgb),.32);
  background:rgba(var(--accent-rgb),.06);
  transition:transform .32s cubic-bezier(.34,1.15,.64,1);
}
.xp-eti:first-child{
  color:var(--dark); background:var(--accent); border-color:var(--accent);
  box-shadow:0 10px 24px -12px rgba(var(--accent-rgb),.95);
}
.xp-eti:nth-child(1){ transform:rotate(-2.2deg) }
.xp-eti:nth-child(2){ transform:rotate(1.6deg) }
.xp-eti:nth-child(3){ transform:rotate(-1.1deg) }
.xp-eti:nth-child(4){ transform:rotate(2deg) }
.xp-etis:hover .xp-eti{ transform:none }

.xp-p-titre{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.45rem,2.5vw,2.1rem); line-height:1.06;
  letter-spacing:-.02em; color:var(--light); margin:0 0 14px;
}
.xp-p-desc{
  font-family:var(--font-body); font-weight:300;
  font-size:clamp(.88rem,1vw,.96rem); line-height:1.72;
  color:#8f8b84; margin:0; max-width:44ch;
}
.xp-p-desc em{ font-style:italic; color:#b9b4ac }

.xp-p-droite{ display:flex; flex-direction:column; justify-content:center }
.xp-p-sur{
  font-family:var(--font-display); font-weight:700;
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--dim); margin-bottom:14px;
}
.xp-p-liste{ list-style:none; padding:0; margin:0 }
.xp-p-liste li{
  position:relative; padding:0 0 11px 20px; margin-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--font-body); font-weight:300;
  font-size:.84rem; line-height:1.55; color:#a7a29b;
}
.xp-p-liste li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0 }
.xp-p-liste li::before{
  content:'—'; position:absolute; left:0; top:0;
  color:var(--accent); opacity:.75;
}

@media(max-width:860px){
  .xp-p{ grid-template-columns:1fr; gap:26px }
  .xp-p-droite{ justify-content:flex-start }
  .xp-pile--1{ width:calc(100% - 22px) }
  .xp-pile--2{ width:calc(100% - 48px) }
}

@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  .xp-t, .xp-eti{ transition:none }
  .xp-t[aria-selected="true"]{ transform:none }
  .xp-eti, .xp-etis:hover .xp-eti{ transform:none }
  .xp-p{ animation:none }
}

/* ══════════════════════════════════════════════════════════════════
   CHAPITRE 04 — LES SITES
   ──────────────────────────────────────────────────────────────────
   Les autres chapitres alignent des visuels : une grille de cinq
   colonnes en portrait leur va. Trois sites y flottaient dans deux
   colonnes vides, reduits a des vignettes de 80 px de large — et une
   page web ne se lit pas dans un timbre-poste.

   Ils ont donc leur grille : trois cartes larges, la capture en 16/10
   comme on regarde un ecran, et une legende qui NOMME le projet. Sans
   elle, le visiteur ne savait ni ce qu'il regardait ni que la carte
   menait quelque part.
   ══════════════════════════════════════════════════════════════════ */
.chap-grid--web{ grid-template-columns:repeat(3,1fr)!important; gap:18px }

.chap-it--web{
  aspect-ratio:auto;
  display:flex; flex-direction:column;
  border-radius:14px; overflow:hidden; padding:0;
  text-align:left; text-decoration:none;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition:border-color .3s, transform .35s cubic-bezier(.34,1.1,.64,1), box-shadow .35s;
}
.chap-it--web:hover, .chap-it--web:focus-visible{
  border-color:rgba(var(--accent-rgb),.42);
  transform:translateY(-4px);
  box-shadow:0 22px 52px -26px rgba(var(--accent-rgb),.45);
}

/* La capture : cadree en haut, parce que c'est le haut d'un site qui
   le fait reconnaitre — le pied de page se ressemble partout. */
.chap-web-vue{
  position:relative; display:block;
  aspect-ratio:16/10; overflow:hidden;
  background:#0b0b0b;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.chap-web-vue img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:top center;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.chap-it--web:hover .chap-web-vue img{ transform:scale(1.04) }

.chap-web-pied{
  display:flex; align-items:center; gap:12px;
  padding:13px 15px 14px;
}
.chap-web-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 }
.chap-web-t{
  font-family:var(--font-display); font-weight:700;
  font-size:.82rem; line-height:1.15; letter-spacing:-.005em;
  color:var(--light);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chap-web-s{
  font-family:var(--font-body); font-weight:300;
  font-size:.68rem; line-height:1.3; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chap-web-fl{
  flex:0 0 auto; font-size:.92rem; color:var(--accent); opacity:.55;
  transition:opacity .28s, transform .28s cubic-bezier(.34,1.2,.64,1);
}
.chap-it--web:hover .chap-web-fl{ opacity:1; transform:translateX(3px) }

/* L'ecusson revient sur la capture, pas sur la legende : c'est le site
   qu'il designe. */
.chap-it--web .chap-web-ici{ left:10px; bottom:10px }

@media(max-width:900px){
  /* Une carte par ligne : sur telephone, trois colonnes rendaient les
     captures illisibles, ce qui etait exactement le probleme.

     Et on sort de l'emboitement : le conteneur, l'enveloppe des
     chapitres et la gouttiere de .chap se cumulent a 64 px de chaque
     cote, soit un tiers d'un ecran de 390. Les deux dernieres sont
     annulees ici — la valeur se calcule a partir des memes variables,
     elle n'est pas recopiee a la main. La marge du conteneur, elle,
     reste : c'est celle de toute la page. */
  .chap-grid--web{ grid-template-columns:1fr!important; gap:14px }
  .chap-web-t{ font-size:.9rem }
  .chap-web-s{ font-size:.72rem }
  .chap-web-pied{ padding:15px 17px 16px }
}

@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  .chap-it--web, .chap-web-vue img, .chap-web-fl{ transition:none }
  .chap-it--web:hover{ transform:none }
  .chap-it--web:hover .chap-web-vue img{ transform:none }
}

/* Sur telephone seulement : la gouttiere de .chap s'ajoute a celle du
   conteneur, et une capture de site n'a plus la largeur pour se lire.
   Seule celle de .chap est annulee — l'enveloppe des chapitres ne pose
   plus la sienne depuis que l'oeuvre mise en avant la reclamait. La
   marge du conteneur reste : c'est celle de toute la page.
   Au-dela de 640 px la largeur ne manque plus, et la meme soustraction
   collerait les cartes aux bords. */
@media(max-width:640px){
  .chap-grid--web{
    margin-inline:calc(-1 * var(--gutter, 0px));
  }
}

/* ══════════════════════════════════════════════════════════════════
   SURVOL SUR ECRAN TACTILE
   ──────────────────────────────────────────────────────────────────
   Sur un pointeur qui ne survole pas, le navigateur applique quand
   meme :hover — au PREMIER appui. Toute regle de survol qui DEPLACE
   l'element deplace donc la cible sous le doigt : le bouton monte de
   2 px pendant que le doigt est encore pose, et si l'appui etait pres
   d'un bord, la levee ne tombe plus sur le meme element. Le navigateur
   n'emet pas de click. L'appui semble ignore ; le suivant fonctionne,
   parce que le decalage a deja eu lieu.

   D'ou "parfois ca ne reagit pas a la premiere touchee" : cela depend
   de l'endroit exact ou l'on pose le doigt.

   Le site compte 124 regles de survol qui deplacent ou agrandissent
   quelque chose. On annule le mouvement sur L'ELEMENT CLIQUABLE
   lui-meme — c'est lui qui doit rester sous le doigt. Les effets sur
   les enfants (une image qui zoome dans une carte) ne deplacent pas la
   cible du clic : ils restent. Les changements de couleur aussi.
   ══════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  /* Onze des cinquante-cinq regles concernees passent par un ID et un
     !important : un selecteur ordinaire ne peut pas les depasser, meme
     avec !important — a egalite de !important, c'est la specificite qui
     tranche.

     :is() prend la specificite de son argument le plus fort. Le premier
     est un identifiant qui n'existe nulle part : il n'ajoute aucune
     cible, seulement du poids. Les quatre :hover empilent ce qu'il faut
     pour passer devant #hero.nhero .nh-btn--p:hover. C'est le seul
     moyen de traiter la cause une fois, plutot que onze symptomes. */
  :is(#mdg-poids-seulement, a, button, summary,
      [role="button"], [role="tab"]):hover:hover:hover:hover {
    transform:none !important;
  }
}

/* scene-css */

/* ══════════════════════════════════════════════════════════════════
   LA SCENE DU PORTFOLIO
   ──────────────────────────────────────────────────────────────────
   Une oeuvre, du vide, un cartel.

   La composition est deliberement asymetrique : l'image indentee
   depuis la gauche, le cartel cale sur son pied, et toute la moitie
   droite laissee nue. Ce vide n'est pas un oubli de remplissage —
   c'est le mur, et il compte autant que ce qui est accroche dessus.
   La regle est la meme dans une galerie : ce qui entoure une piece
   dit combien elle vaut.

   L'image est bornee en HAUTEUR, jamais en largeur. Une pochette
   carree et une affiche 4/5 occupent donc la meme hauteur de mur et
   se succedent sans que la page bouge d'un pixel. C'est ce qui permet
   de changer d'oeuvre toutes les 3,2 s sans que le texte saute.

   Rien n'est recadre : object-fit vaut contain, pas cover. Recadrer
   une affiche pour l'ajuster a une case, c'est refaire le travail de
   celui qui l'a composee.
   ══════════════════════════════════════════════════════════════════ */
.scene{
  display:grid;
  grid-template-columns:auto minmax(10rem,15rem) 1fr;
  align-items:end;
  column-gap:clamp(1.6rem,3.6vw,4rem);
  padding:clamp(1.3rem,2.6vw,2.3rem) 0 clamp(.5rem,1.4vw,1.4rem);
  padding-left:clamp(0px,4vw,84px);
}

.scene-vue{
  position:relative;
  display:block;
  margin:0; padding:0; border:none; background:none;
  /* 66vh, MAIS jamais au point de pousser le cartel sous la ligne de
     flottaison : c'est lui qui nomme l'oeuvre. Sur un ecran bas,
     l'image cede les pixels, pas la legende. */
  height:clamp(300px, min(66vh, 100vh - 340px), 680px);
  aspect-ratio:4/5;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.scene--sq .scene-vue{ aspect-ratio:1 }

/* Deux couches, une seule visible. La suivante se charge dessous et
   prend la main quand elle est prete : jamais de trou blanc entre
   deux oeuvres, jamais de demi-image. */
.scene-couche{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  opacity:0;
  transition:opacity .85s cubic-bezier(.33,0,.2,1);
}
.scene-couche.on{ opacity:1 }

.scene-vue:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:14px;
}

/* ── LE CARTEL ─────────────────────────────────────────────────────
   Titre, mention, et le rang de l'oeuvre dans la serie. Trois
   niveaux, trois familles, trois graisses — c'est la hierarchie qui
   fait la lecture, pas des cadres ni des pastilles. */
.scene-cartel{
  padding-bottom:.4rem;
  transition:opacity .22s ease;
}
.scene-cartel.mue{ opacity:0 }

.scene-t{
  font-family:var(--font-accent); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,2.1vw,2.05rem); line-height:1.04;
  letter-spacing:-.01em; color:var(--light);
  margin:0;
}
.scene-s{
  font-family:var(--font-display); font-weight:700;
  font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  line-height:1.65; color:var(--dim);
  margin:.8rem 0 0;
}

/* L'indicateur. Un trait de 26 px et deux nombres : de quoi savoir ou
   l'on en est, sans construire une barre de progression qui volerait
   l'attention a l'image. */
.scene-n{
  position:relative;
  display:flex; align-items:center; gap:.45em;
  font-family:var(--font-display); font-weight:700;
  font-size:.62rem; letter-spacing:.2em; color:var(--dim);
  margin:1.9rem 0 0; padding-top:1.05rem;
}
.scene-n::before{
  content:''; position:absolute; top:0; left:0;
  width:26px; height:1px; background:rgba(255,255,255,.18);
}
.scene-n i{ font-style:normal; color:var(--light); transition:color .3s }
.scene-n span{ opacity:.4 }

/* Le seul retour au survol. Pas de zoom, pas de voile, pas de bouton
   qui apparait : le rang passe au vert, l'oeil comprend que la serie
   s'ouvre. Une propriete, aucun mouvement. */
.scene:hover .scene-n i{ color:var(--accent) }

/* Sur telephone, trois marges se cumulaient avant l'image : celle du
   conteneur (16), celle de l'enveloppe des chapitres (20) et la
   gouttiere de .chap (24). Soixante pixels de chaque cote sur un ecran
   de 375 — l'oeuvre mise en avant tombait a 255 px de large, moins des
   deux tiers de l'ecran. L'enveloppe rend la sienne : il reste la
   gouttiere de page, celle du titre du heros. */
@media(max-width:767px){
  .chap-wrap{ padding-left:0; padding-right:0 }
  .scene{
    grid-template-columns:1fr;
    padding-left:0;
    row-gap:1.5rem;
    padding-top:clamp(1.4rem,5vw,2.2rem);
    padding-bottom:.4rem;
  }
  /* En largeur, ici : sur telephone la hauteur d'ecran est la ressource
     rare, et une image bornee a 48vh y devient une vignette. */
  .scene-vue{ height:auto; width:min(100%,25rem) }
  .scene-cartel{ padding-bottom:0 }
  .scene-t{ font-size:clamp(1.35rem,6vw,1.75rem) }
  .scene-n{ margin-top:1.4rem }
}

/* Le fondu d'une oeuvre a l'autre ne deplace rien : il reste sous
   prefers-reduced-motion, comme les changements de couleur. Ce que la
   preference coupe ailleurs, ce sont les zooms et les glissements. */

/* ── LE TITRE DE SECTION ────────────────────────────────────────────
   Il annoncait quatre chapitres a 2 rem, soit la taille d'un titre de
   chapitre. Rien ne disait lequel contenait l'autre. */
.port-new-h2{ font-size:clamp(1.6rem,3.2vw,3rem) }

/* xp-index-css */

/* ══════════════════════════════════════════════════════════════════
   EXPERTISES : la boite dans la boite dans la boite
   ──────────────────────────────────────────────────────────────────
   Il y avait quatre niveaux de cadre empiles au meme endroit : le
   panneau exterieur (bord, arrondi, degrade radial), deux fausses
   cartes posees derriere pour figurer une pile, la lueur verte, puis
   le panneau lui-meme avec son bord vert et son ombre coloree. Et,
   dans le rail, huit tuiles de 92 px ou trois mots devaient tenir en
   trois lignes.

   Rien de tout cela ne portait de sens : c'etait du decor. Ce qui
   etouffait le contenu n'etait pas le manque de place — la section
   est large — mais le nombre de bords a franchir avant de lire un
   mot.

   Ce qui reste : une liste de huit disciplines, en colonne, ou chaque
   nom tient sur UNE ligne ; et le contenu de celle qu'on a choisie, a
   cote, pose sur le fond de la page. Rien n'est retire de l'HTML —
   les onglets, les fleches, le clavier et les roles ARIA sont
   intacts. C'est la mise en page qui change de registre.
   ══════════════════════════════════════════════════════════════════ */
.xp{
  border:none; border-radius:0; background:none;
  padding:clamp(30px,4vw,58px) 0 clamp(38px,4.6vw,70px);
  overflow:visible;
}
.xp::before{ display:none }
.xp-chiffre{ top:0; right:0 }

/* La pile de fausses cartes et la lueur : deux ornements qui
   annoncaient une profondeur qui n'existe pas. */
.xp-pile, .xp-lueur{ display:none }

/* Les mots-cles etaient quatre pastilles cerclees, dont une pleine,
   posees de travers. Quatre bords de plus pour quatre mots. Ils
   redeviennent ce qu'ils sont : une ligne de mots. */
.xp-etis{ gap:0; margin:16px 0 20px; align-items:baseline }
.xp-eti{
  padding:0; border:none; border-radius:0; background:none;
  transform:none; box-shadow:none;
  font-size:.6rem; letter-spacing:.16em; color:var(--dim);
}
.xp-eti:first-child{
  color:var(--accent); background:none; border:none; box-shadow:none;
}
.xp-eti + .xp-eti::before{
  content:'·'; margin:0 .7em; color:rgba(255,255,255,.28);
}
.xp-eti:nth-child(1),.xp-eti:nth-child(2),
.xp-eti:nth-child(3),.xp-eti:nth-child(4),
.xp-etis:hover .xp-eti{ transform:none }

/* Le panneau perd son cadre. Ce qui le detache du reste n'est plus un
   bord vert et une ombre, c'est l'espace autour. */
.xp-scene{ padding-top:0 }
.xp-p{
  border:none; border-radius:0; background:none;
  box-shadow:none; padding:0;
}

/* ── L'INDEX DES HUIT ──────────────────────────────────────────────
   A partir de 1000 px, le rail horizontal devient une table des
   matieres verticale. Un nom par ligne, aucune coupure de mot, et le
   choix courant se lit a la couleur — pas a une tuile qui decolle. */
@media(min-width:1000px){
  .xp-console{
    display:grid;
    grid-template-columns:minmax(200px,17rem) 1fr;
    column-gap:clamp(38px,5vw,86px);
    align-items:start;
  }
  .xp-rail{ display:block; grid-column:1; grid-row:1 }
  .xp-rail-f{ display:none }
  .xp-rail::before, .xp-rail::after{ display:none }
  .xp-rail.a-droite ~ .xp-indice,
  .xp-rail.a-gauche ~ .xp-indice,
  .xp-indice{ display:none }

  .xp-tuiles{ display:flex; flex-direction:column; gap:0; justify-content:flex-start }
  .xp-t{
    width:auto; flex-direction:row; align-items:baseline; gap:15px;
    padding:15px 2px; text-align:left;
    border:none; border-top:1px solid var(--border); border-radius:0;
    background:none; box-shadow:none; transform:none;
    transition:color .25s, border-color .25s;
  }
  .xp-tuiles .xp-t:last-child{ border-bottom:1px solid var(--border) }
  .xp-t-icone{ display:none }
  .xp-t-no{ margin-top:0; flex:0 0 auto; width:1.5em; opacity:.45 }
  .xp-t-nom{
    margin-top:0; text-align:left; text-wrap:wrap;
    font-size:.85rem; line-height:1.3; letter-spacing:-.005em;
  }
  .xp-t:hover{ color:var(--light); border-color:var(--border) }
  .xp-t[aria-selected="true"]{
    color:var(--accent); transform:none; background:none;
    box-shadow:none; border-color:rgba(var(--accent-rgb),.45);
  }

  .xp-scene{ grid-column:2; grid-row:1; margin-top:0 }
  .xp-p{ grid-template-columns:1.05fr 1fr; gap:clamp(28px,3vw,52px) }
  .xp-p-droite{ justify-content:flex-start }
}

/* Sous 1000 px le rail reste horizontal : il defile, et c'est le bon
   geste sur un telephone. Mais les tuiles y etaient pires qu'ailleurs
   — 92 px de large pour « Direction Artistique Musicale », soit trois
   lignes de six caracteres dans un cadre. Le cadre part, la ligne
   s'allonge, et le rail devient ce qu'il aurait toujours du etre : une
   rangee de noms qu'on fait glisser. */
@media(max-width:999px){
  .xp-tuiles{
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; scroll-snap-type:x mandatory;
    gap:clamp(18px,5vw,30px); padding:6px 2px 14px;
    margin-left:0; margin-right:0; scrollbar-width:none;
  }
  .xp-tuiles::-webkit-scrollbar{ display:none }
  .xp-t{
    /* Cale a gauche, pas au centre : le nom suivant depasse du bord et
       dit qu'il y en a d'autres. Centre, il n'en restait qu'un a
       l'ecran et le rail avait l'air fini. */
    width:auto; flex:0 0 auto; scroll-snap-align:start;
    flex-direction:row; align-items:baseline; gap:9px;
    padding:9px 0; white-space:nowrap; text-align:left;
    border:none; border-bottom:1px solid transparent; border-radius:0;
    background:none; box-shadow:none; transform:none;
  }
  .xp-t-icone{ display:none }
  .xp-t-no{ margin-top:0; opacity:.45 }
  .xp-t-nom{ margin-top:0; font-size:.79rem; text-align:left; white-space:nowrap }
  .xp-t[aria-selected="true"]{
    color:var(--accent); transform:none; background:none; box-shadow:none;
    border-color:transparent; border-bottom-color:var(--accent);
  }
  /* Les fondus de bord tiraient vers #0a0a0a, la couleur du panneau
     qui n'existe plus. Ils tirent vers le fond de la page. */
  .xp-rail::before{ background:linear-gradient(90deg, var(--black), transparent) }
  .xp-rail::after { background:linear-gradient(270deg, var(--black), transparent) }
  .xp-rail-f{ background:none; border-color:rgba(255,255,255,.14); color:var(--off) }
}


/* ══════════════════════════════════════════════════════════════════
   TEMOIGNAGES : quatre fois la meme carte
   ──────────────────────────────────────────────────────────────────
   La rangee disait quatre fois la meme chose : un numero, un nom, un
   role, et « Voir l'extrait → » repete a l'identique sous chaque
   portrait. Quatre invitations pour un seul geste, alors que le rond
   de lecture est deja pose au milieu de chaque image.

   Les quatre portraits se resserrent en bande — trois pixels entre
   eux, comme des photogrammes — et grandissent. Sous chacun, une
   legende de trois lignes, plus une. Le rond de lecture perd son
   flou de verre depoli : un cercle, un triangle, rien d'autre.
   ══════════════════════════════════════════════════════════════════ */
#social-proof .stg-vgrid{ gap:3px }
#social-proof .stg-vc .im{ aspect-ratio:4/5 }
#social-proof .stg-vc .play{
  width:40px; height:40px;
  background:rgba(6,6,6,.34);
  border:1px solid rgba(240,237,232,.42);
}
#social-proof .stg-vc .play svg{ width:13px; height:13px }
#social-proof .stg-vc:hover .play{ transform:translate(-50%,-50%) }

#social-proof .stg-vc .lab{
  display:flex; flex-direction:column; gap:5px;
  padding:15px 0 0;
}
#social-proof .stg-vc .lab .no{
  order:-1;
  font-family:var(--font-accent); font-style:italic; font-weight:400;
  font-size:.82rem; line-height:1; color:var(--accent); opacity:.85;
}
#social-proof .stg-vc .lab b{ font-size:.95rem; white-space:normal }
#social-proof .stg-vc .lab span{
  font-family:var(--font-display); font-weight:700;
  font-size:.58rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--dim);
}
/* Le rond de lecture porte deja l'invitation. Repetee sous chaque
   portrait, elle ne s'ajoutait pas : elle se diluait. */
#social-proof .stg-vc .lab .watch{ display:none }

/* Le sceau etait une pastille cerclee de vert. Une ligne suffit. */
#social-proof .stg-verified span{
  border:none; border-radius:0; padding:0;
  font-family:var(--font-display); font-weight:700;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
}

@media(max-width:760px){
  #social-proof .stg-vgrid{ gap:8px }
  #social-proof .stg-vc{ flex:0 0 66vw; max-width:250px }
}

/* faq-mob-css */

/* ══════════════════════════════════════════════════════════════════
   FAQ SUR TELEPHONE : huit questions, mille pixels
   ──────────────────────────────────────────────────────────────────
   Le meme retrait double qu'ailleurs : 28 px d'enveloppe plus 24 px de
   gouttiere sur chaque bord, soit 104 px pris sur un ecran de 375. Il
   restait 240 px pour la question — juste assez pour que SEPT des huit
   passent a la ligne. Chaque repli coutait 21 px, et la section
   depassait l'ecran et demi.

   Une seule gouttiere, et les questions tiennent sur une ligne. Le
   respir entre deux questions passe de 22 a 16 px : a une ligne par
   question, 22 px separaient moins qu'ils n'espaçaient.

   CORRECTION. Ramener l'enveloppe a zero, c'etait retirer la mauvaise
   marge. Le panneau clair s'est retrouve sans aucun retrait a lui :
   question, chiffre, signe et reponse colles a ses quatre bords,
   comme un texte qui deborde de sa feuille.

   18 px lui rendent son air interieur. Deux questions sur huit
   repassent a la ligne : c'est le prix d'un texte qui ne touche plus
   les parois, et il est juste.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  /* Le retrait du panneau clair. Distinct des 20 px de #faq, qui eux
     ne sont pas une marge interieure : ils DECOUPENT le panneau dans
     le noir de la page. */
  .faq-mob > div{ padding-left:18px!important; padding-right:18px!important }
  #faq .faqm-item{
    margin-left:0!important; margin-right:0!important;
    padding-top:16px!important; padding-bottom:16px!important;
  }
  /* Deux des questions repassent a la ligne, et la coupure naturelle
     laissait le point d'interrogation SEUL sur la seconde ligne :
     neuf pixels de texte sous une ligne pleine. `balance` repartit
     les deux lignes a egalite. Ignore la ou il n'est pas connu,
     et on retombe alors sur la coupure d'avant. */
  .faq-mob .faqm-item h3{
    font-size:1.02rem!important; line-height:1.25!important;
    text-wrap:balance;
  }
  .faq-mob h2{ font-size:1.6rem!important }
  .faq-mob .faqm-a p{ margin-top:9px!important }
}

/* conf-css */

/* ══════════════════════════════════════════════════════════════════
   LE BANDEAU DE CONFIANCE
   ──────────────────────────────────────────────────────────────────
   Une bande claire qui traverse toute la largeur, entre le travail et
   ce qu'on en dit. Elle n'est pas une section : elle est une
   RESPIRATION. Cent vingt pixels de clair au milieu du noir, juste
   assez pour que la page reprenne son souffle avant les temoignages.

   Elle sort du conteneur par la soustraction habituelle — 50 % de la
   largeur du parent moins 50 % de celle de l'ecran — parce qu'une
   bande qui s'arrete a 1220 px n'est plus une bande, c'est une carte.

   Sur fond clair, les silhouettes s'inversent : noires, la ou elles
   etaient blanches sur le noir. Et elles ne sont pas a pleine force :
   ce sont des noms qui appuient le travail, ils ne le concurrencent
   pas. Ils reviennent au noir plein quand on les approche.
   ══════════════════════════════════════════════════════════════════ */
.conf{
  width:100vw;
  margin-inline:calc(50% - 50vw);
  background:#eceae3;
  padding:clamp(26px,3.2vw,44px) clamp(20px,4vw,56px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(17px,2.2vw,28px);
}
.conf-lbl{
  font-family:var(--font-display); font-weight:700;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:#8a857b; text-align:center;
}
.conf-rang{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
  column-gap:clamp(26px,4.6vw,68px); row-gap:clamp(18px,2.4vw,28px);
  max-width:1180px; width:100%;
}
/* Un cran au-dessus des tailles de la rangee d'origine : celles-ci
   etaient calibrees pour un coin de section, pas pour une bande qui
   traverse l'ecran. L'ecart optique entre carres, intermediaires et
   larges est conserve tel quel. */
.conf .mdg-partner{
  filter:brightness(0)!important;
  opacity:.5!important;
  max-height:42px!important;
}
.conf .mdg-partner--sq{ max-height:52px!important }
.conf .mdg-partner--md{ max-height:42px!important }
.conf .mdg-partner--wd{ max-height:32px!important }
.conf .mdg-partner:hover{ opacity:1!important }

@media(max-width:767px){
  .conf{ padding:26px var(--gutter) 30px; gap:16px }
  /* En rangee libre, neuf logos tombaient 4 + 4 + 1 : le dernier restait
     seul au milieu, ce qui se lit comme un oubli. Une grille de trois
     donne trois rangs pleins. */
  .conf-rang{
    display:grid; grid-template-columns:repeat(3,1fr);
    column-gap:14px; row-gap:24px; justify-items:center;
  }
  .conf .mdg-partner{ max-height:32px!important }
  .conf .mdg-partner--sq{ max-height:40px!important }
  .conf .mdg-partner--md{ max-height:32px!important }
  .conf .mdg-partner--wd{ max-height:25px!important }
}

/* contact-mob-ordre-css */

/* ══════════════════════════════════════════════════════════════════
   CONTACT SUR TELEPHONE : L'ORDRE DE LECTURE
   ──────────────────────────────────────────────────────────────────
   Deux colonnes qui s'empilent, et l'empilement rendait la colonne
   gauche ENTIERE avant le formulaire : l'accroche, le bouton WhatsApp,
   les quatre reseaux, les trois lignes de meta. Six cents pixels de
   liens a franchir avant d'atteindre le champ « Nom ». Sur un ecran
   ou l'on ne voit qu'un tiers de section a la fois, le formulaire
   n'existait plus.

   L'ordre juste tient en trois temps : on lit POURQUOI ecrire, on
   ECRIT, et seulement apres on trouve les autres portes — WhatsApp,
   les reseaux — pour qui ne veut pas du formulaire. Un lien vers
   WhatsApp place AVANT le champ de saisie ne complete pas le
   formulaire : il le remplace.

   `display:contents` sur les deux enveloppes, et leurs enfants
   deviennent les elements du meme flux : intro, formulaire, contacts.
   Les enveloppes ne portaient rien d'autre qu'un retrait sur telephone
   — il repasse sur chaque bloc, un par un.

   Les trois lignes de meta (localisation, langues, delai) partent au
   pied de page. Ce sont des coordonnees de studio, pas un argument de
   contact : leur place est en bas de la page, avec le reste de ce
   qu'on garde pour la fin.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  #contact .contact-inner{ display:flex!important; flex-direction:column; }

  /* Les enveloppes s'effacent : leurs enfants prennent leur place dans
     le flux, seule facon de glisser le formulaire entre deux d'entre
     eux. Le retrait qu'elles portaient passe aux blocs eux-memes. */
  .contact-left-col,
  .contact-left-body{ display:contents; }

  .contact-intro    { order:1; padding:4.5rem 1.5rem 0; }
  .contact-right-col{ order:2; padding:2.25rem 1.5rem 2.5rem; }
  .contact-cta-block{ order:3; padding:0 1.5rem 3.5rem; }

  /* Deplacees dans .footer-mob, plus bas dans la page. */
  #contact .info-list{ display:none!important; }
}

@media(max-width:480px){
  .contact-intro    { padding:3.5rem 1.2rem 0; }
  .contact-right-col{ padding:2rem 1.2rem 2rem; }
  .contact-cta-block{ padding:0 1.2rem 3rem; }
}

/* Les memes trois lignes, au pied de page. Classes identiques a celles
   du contact : la traduction EN les trouve sans qu'on la double. */
.fm-infos{ margin-top:22px; text-align:left; }
.fm-infos .info-list{ padding-top:20px; gap:.7rem; }
.fm-infos .info-label{ font-size:.62rem; letter-spacing:.16em; }
.fm-infos .info-value{ font-size:.74rem; }
.fm-infos-dot{ color:var(--dim); margin:0 .35rem; }
.fm-infos-time{ color:var(--accent); font-variant-numeric:tabular-nums; }

/* conf-sceau-css */

/* ══════════════════════════════════════════════════════════════════
   LE SCEAU SUR LA COUTURE
   ──────────────────────────────────────────────────────────────────
   La bande claire des logos et le noir du portfolio se touchaient a
   plat : deux fonds bord a bord, un trait net, rien qui les relie.
   C'est la seule frontiere clair/sombre de la page, et elle passait
   pour un accident de fond plutot que pour une intention.

   Un disque pose A CHEVAL sur ce bord coud les deux. Il n'a rien a
   contenir — un cercle et une phrase qui tourne — donc il n'est pas
   une carte : c'est un objet typographique, et il tient dans une
   direction qui refuse les cartes.

   Il travaille deux fois. Il dit que la frontiere est voulue, et il
   dit qu'il y a une suite, exactement la ou un visiteur qui descend
   une page de quatorze mille pixels se demande s'il a fini.

   La rotation s'arrete si le systeme demande moins de mouvement. La
   lecon avait deja coute une correction ailleurs sur ce site.
   ══════════════════════════════════════════════════════════════════ */
.conf{ position:relative; }

/* Le positionnement vit sur une ancre, PAS sur le lien. Le gestionnaire
   de ripple (index.html) vise tout <a> au clic et lui impose
   `position:relative; overflow:hidden` en style inline : le sceau
   quittait la couture et retombait dans le flux de la bande des qu'on
   cliquait dessus. Une ancre qui n'est pas cliquable ne l'interesse
   pas, et le ripple garde son effet a l'interieur du disque. */
.conf-sceau-ancre{
  position:absolute; left:50%; top:0;
  translate:-50% -50%;
  width:clamp(78px,8.5vw,104px); aspect-ratio:1;
  z-index:4;
}
.conf-sceau{
  position:relative;
  width:100%; height:100%;
  border-radius:50%; overflow:hidden;
  background:var(--black);
  border:1px solid rgba(240,237,232,.18);
  display:grid; place-items:center;
  text-decoration:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .25s;
}
.conf-sceau:hover{ transform:scale(1.06); border-color:rgba(var(--accent-rgb),.55); }
.conf-sceau:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.conf-sceau-anneau{
  position:absolute; inset:0; width:100%; height:100%;
  animation:confSceauTourne 18s linear infinite;
}
.conf-sceau-anneau text{
  font-family:var(--font-display); font-weight:700;
  font-size:9.4px; letter-spacing:.26em; text-transform:uppercase;
  fill:var(--light);
}
@keyframes confSceauTourne{ to{ transform:rotate(360deg) } }

.conf-sceau-coeur{
  width:34%; aspect-ratio:1; border-radius:50%;
  background:var(--accent); color:#131505;
  display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.conf-sceau:hover .conf-sceau-coeur{ transform:translateY(2px); }

/* Le sceau deborde de 50 px de chaque cote de la couture, et les deux
   voisins etaient a portee : la phrase « la discographie complete est
   sur Behance » finissait 18 px SOUS le haut du disque, qui lui passait
   dessus. Le libelle de la bande, lui, arrivait 15 px sous le disque.
   On ecarte des deux cotes — le vide au-dessus de la bande, le retrait
   en dessous — plutot que de rapetisser le sceau. */
.conf{
  margin-top:clamp(30px,3vw,42px);
  padding-top:clamp(62px,6.5vw,80px);
}

@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  .conf-sceau-anneau{ animation:none }
  .conf-sceau, .conf-sceau-coeur{ transition:none }
  .conf-sceau:hover{ transform:none }
}

@media(max-width:767px){
  .conf{ margin-top:26px; padding-top:60px; }
  .conf-sceau-ancre{ width:76px; }
  .conf-sceau-anneau text{ font-size:9.8px; letter-spacing:.22em; }
}

/* ═══════════════════════════════════════════════════════════════════
   LA TABLE DE MONTAGE  —  #table-montage
   ───────────────────────────────────────────────────────────────────
   Douze pochettes posees sur un tapis de decoupe, que le scroll
   traverse en zoomant. Elle sort du labo (labo.html, dispositif 03),
   ou elle a ete jugee avant d'entrer ici. Elle vient JUSTE APRES LE
   HERO : la promesse, puis la preuve. On annonce sept ans et cinquante
   artistes, et l'ecran suivant les etale sur la table au lieu de
   demander qu'on le croie. Le portfolio, plus bas, reprend les pieces
   une par une.

   AUCUNE IMAGE NOUVELLE. Les douze pochettes sont deja sur l'accueil,
   dans l'accordeon juste au-dessus. Le navigateur les a en cache : la
   section ne coute pas un octet d'image de plus.

   POURQUOI GSAP EPINGLE, ET NON position:sticky. Le labo collait le
   plan en CSS. Ici c'est impossible : body porte overflow-x:hidden
   (mdg.css ligne 170), ce qui lui calcule overflow-y:auto et en fait
   un conteneur de defilement. Un enfant sticky se cale alors sur un
   scrollport qui ne defile jamais, et se contente de partir avec la
   page — mesure sur cette page-ci, pas suppose. GSAP epingle en
   position:fixed avec son propre espaceur, ce qu'aucun overflow
   d'ancetre ne peut defaire.
   ═══════════════════════════════════════════════════════════════════ */
#table-montage{background:var(--black);position:relative}
.tm-cadre{height:100svh;overflow:hidden;perspective:1200px;
  display:grid;place-items:center;position:relative}
.tm-plan{position:relative;width:min(1180px,92vw);aspect-ratio:16/10;
  transform-style:preserve-3d;transform:scale(.56);will-change:transform}
.tm-grille{position:absolute;inset:-40%;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(var(--accent-rgb),.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--accent-rgb),.055) 1px,transparent 1px);
  background-size:44px 44px}
/* Le plan est en 16:10, l'ecran d'un telephone en 9:19. A l'echelle
   finale le tapis s'arretait a mi-hauteur et le reste du cadre etait
   du noir mort : on ne zoomait plus dans une table, on regardait une
   vignette posee sur rien. Le tapis se prolonge donc verticalement, et
   seulement en portrait — etendu des quatre cotes a toutes les
   tailles, il demanderait au bureau une couche composee de plusieurs
   milliers de pixels de cote pour du vide. */
@media (max-aspect-ratio:4/5){.tm-grille{inset:-110% -40%}}

/* height:auto est obligatoire. Les pochettes sont en 440x550 et
   l'attribut height="550" du HTML devient une regle de presentation
   qui l'emporte sur aspect-ratio : sans cette ligne, chaque piece
   sortait haute de 550px au lieu d'etre carree. */
.tm-piece{position:absolute;left:var(--gx);top:var(--gy);width:var(--gw);
  height:auto;aspect-ratio:1;object-fit:cover;
  border:1px solid rgba(255,255,255,.1);
  transform:rotate(var(--gr,0deg)) translateZ(var(--gz,0px));
  box-shadow:0 26px 50px -34px rgba(0,0,0,.95)}

/* Les reperes sont les annotations du plan : de la typographie posee
   sur la table, pas des etiquettes d'interface. Le trait les rattache
   a la piece qu'ils nomment.
   POURQUOI ILS SONT A L'ACCENT. Ils etaient en gris sous une ombre
   diffuse. Sur douze pochettes il s'en trouve toujours une en plein
   jour : « Kaolack · 2019 » y disparaissait. Le vert signature est la
   seule couleur du site qui ne ressemble a aucune pochette, et l'ombre
   est devenue un halo court, qui detoure la lettre au lieu de la
   nimber.
   OU ILS ONT LE DROIT DE SE POSER : le cadre coupe, et a l'echelle
   finale il ne montre plus qu'une bande centrale du plan — sur un
   1280x800, de 9% a 91% en hauteur. Les quatre tiennent donc entre
   23% et 61%. La taille suit la fenetre et non le plan : la police est
   en pixels, le plan en pourcentage de la fenetre. */
.tm-repere{position:absolute;left:var(--gx);top:var(--gy);z-index:3;
  transform:rotate(var(--gr,0deg)) translateZ(var(--gz,0px));
  transform-origin:left center;white-space:nowrap;
  font-family:var(--font-display);font-weight:500;font-size:13px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 0 2px rgba(6,6,6,.95),0 0 7px rgba(6,6,6,.92),
    0 2px 20px rgba(6,6,6,.8)}
.tm-repere::before{content:"";display:inline-block;width:20px;height:1px;
  margin-right:11px;vertical-align:middle;background:currentColor;
  box-shadow:0 0 6px rgba(6,6,6,.9)}
@media(max-width:900px){.tm-repere{font-size:10px;letter-spacing:.2em}
  .tm-repere::before{width:15px;margin-right:8px}}
@media(max-width:520px){.tm-repere{font-size:8px;letter-spacing:.16em}
  .tm-repere::before{width:11px;margin-right:6px}}

/* Le voile monte haut et vient tot : a pleine echelle la phrase se
   pose sur des pochettes tres contrastees, et une ombre courte ne la
   sauvait pas — le « T » se perdait dans un fond clair. */
.tm-mot{position:absolute;inset:auto 0 0 0;z-index:4;
  padding:26svh 24px 9svh;text-align:center;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,6,6,.55) 34%,
    rgba(6,6,6,.93) 62%,var(--black) 82%)}
.tm-mot h2{margin:0;font-family:var(--font-display);font-weight:600;
  letter-spacing:-.02em;color:var(--light);
  font-size:clamp(30px,5.4vw,64px);line-height:1.02;
  /* 22ch et non 16 : a 16 la premiere moitie cassait apres « ce »,
     et on ne coupe pas une phrase sur un mot outil. */
  max-width:22ch;margin-inline:auto;text-wrap:balance}
.tm-mot em{display:block;font-family:var(--font-accent);font-style:italic;
  font-weight:400;color:var(--off)}
/* SUR TELEPHONE, LE BAS DE L'ECRAN N'EST PAS LIBRE. La barre d'onglets
   (#mob-tab-bar, 60px) et le retour-en-haut (#quick-nav, 44px) sont
   fixes : ensemble ils tiennent les 128 derniers pixels. La phrase se
   glissait dessous et se lisait a moitie — mesure a 375x812, pas
   suppose. Elle remonte au-dessus d'eux, avec de quoi respirer. */
@media(max-width:900px){.tm-mot{padding-bottom:172px}}

/* ── Sous mouvement reduit, la table se pose ────────────────────────
   Le zoom ne part pas (accueil.js ne cree pas le ScrollTrigger), donc
   rien n'epingle et rien ne monte l'echelle. Il reste a rendre visible
   ce que le mouvement devait reveler : le cadre se laisse remplir par
   son contenu, et la phrase quitte le voile pour se lire d'emblee. Une
   section qui coupe ses animations ne doit pas perdre son contenu au
   passage. */
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  .tm-cadre{height:auto;padding:12svh 0}
  .tm-plan{transform:scale(.92)}
  .tm-mot{position:static;opacity:1;background:none;padding:6svh 24px 0}
}

/* ═══════════════════════════════════════════════════════════════════
   LA FICHE  —  #carte
   ───────────────────────────────────────────────────────────────────
   Une carte d'identite de studio, qui s'incline sous le curseur et
   porte un tampon. Elle sort du labo (labo.html, dispositif 01).

   ELLE PRECEDE LA TABLE, ET NE S'EN SEPARE PAS. Les deux sortent du
   meme labo et se lisent ensemble : la fiche dit qui, la table montre
   quoi. C'est l'ordre du site d'ou vient le dispositif — chez lui la
   carte EST le hero, tout en haut, et le tapis de decoupe est la scene
   de cloture. Ici le hero existe deja : la carte se pose juste apres
   lui, et la table enchaine.

   UNE SEULE MISE EN PAGE, DU BUREAU AU TELEPHONE. Elle passait en une
   colonne sous 560px — photo dessus, champs dessous. Ce n'etait plus
   la meme carte, c'etait une liste avec une image. Elle garde donc ses
   deux colonnes partout et se contente de retrecir : les mesures sont
   en clamp(), la carte suit la fenetre au lieu de changer de forme.

   LE RELIEF VIENT DE LA LUMIERE, PAS D'UNE OMBRE. C'est un objet
   plat qu'on eclaire, pas une carte d'interface qu'on souleve — la
   nuance est toute la difference entre cette fiche et le pastiche de
   carte d'etudiant dont elle vient.
   ═══════════════════════════════════════════════════════════════════ */
#carte{background:var(--black);padding:13svh 0 12svh;position:relative;overflow:clip}

/* ── LE TAPIS DE DECOUPE, VU DE PRES ──────────────────────────────
   MEME MOTIF QUE .tm-grille, MEME COULEUR, MAILLE PLUS LARGE. C'est
   la meme table : #carte la montre de pres, #table-montage la montre
   entiere. 92px contre 44 — le rapport est celui du recul de camera
   qui separe les deux sections.

   POURQUOI IL EXISTE. #carte reserve 225 px de fond (13svh + 12svh)
   autour d'une scene qui en fait 401. La fiche flottait donc dans du
   noir, et #table-montage demarrait a froid juste apres : deux iles,
   avec du vide entre. Le tapis relie les deux — la fiche est posee
   SUR la table, et la section suivante n'est pas une autre scene,
   c'est la meme surface vue de plus loin.

   Il entre au scroll, pilote par motion.js. Au repos il est absent :
   il ne doit pas etre la avant que la fiche n'ait ete lue. */
.carte-tapis{
  position:absolute;inset:-20% -10%;pointer-events:none;z-index:0;
  opacity:0;
  /* .11 ET NON .055, LA VALEUR DE .tm-grille. Mesure avant de la
     changer : a .055 attenue par l'opacite de la timeline, l'alpha
     effectif des lignes tombait a 0,019 sur un fond #060606 — le tapis
     etait calcule, compose, et invisible. La grille de la table s'en
     contente parce qu'elle passe DERRIERE douze pochettes claires qui
     lui donnent un contraste ; ici elle est seule sur du noir. */
  background-image:linear-gradient(rgba(var(--accent-rgb),.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--accent-rgb),.11) 1px,transparent 1px);
  background-size:92px 92px;
  /* Le tapis s'eteint sur les bords : sans ce masque, la grille se
     coupe net au bord de la section et on voit une boite, pas une
     table qui continue hors champ. */
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 78%);
}
/* La scene passe DEVANT le tapis. Sans z-index elle resterait dans le
   meme plan qu'un element absolu declare avant elle, et la grille
   traverserait le carton de la fiche. */
#carte .fiche-scene{position:relative;z-index:1}
.fiche-scene{perspective:1400px;display:flex;flex-direction:column;
  align-items:center;gap:clamp(14px,3vw,20px);padding:0 24px}
/* LA PERSPECTIVE SUIT L'OBJET. Elle vaut 1400px pour une carte de
   620 : deux fois et demie sa largeur. Reduite par zoom a 316px, la
   carte gardait cette meme perspective — plus de quatre fois sa
   largeur — et l'inclinaison ne se voyait plus. Chaque palier reprend
   donc le rapport du bureau. */
@media(max-width:684px){.fiche-scene{padding:0 16px;perspective:1260px}}
@media(max-width:600px){.fiche-scene{perspective:1090px}}
@media(max-width:520px){.fiche-scene{perspective:910px}}
@media(max-width:440px){.fiche-scene{perspective:810px}}
@media(max-width:400px){.fiche-scene{perspective:715px}}
@media(max-width:350px){.fiche-scene{perspective:630px}}
/* LA CARTE A DEUX FACES, DONC TROIS COUCHES. `.fiche` ne porte plus
   que le volume et l'inclinaison ; `.fiche-plateau` porte la
   retourne ; les deux faces portent le carton. Empiler la retourne et
   l'inclinaison sur le meme element les ferait s'ecraser l'une
   l'autre — le JS ecrit un transform, le CSS en veut un autre. */
.fiche{position:relative;width:620px;
  transform-style:preserve-3d;will-change:transform;cursor:pointer}

/* ── SUR TELEPHONE, C'EST LA MEME CARTE, VUE PLUS PETITE ──────────
   Elle etait fluide : chaque mesure avait son clamp, et le resultat
   n'etait plus la meme carte. A 375px elle sortait PRESQUE CARREE
   (1.06 au lieu de 1.78), « En exercice » se coupait en deux, la
   legende de la photo aussi, et le tampon tombait sur « 50 artistes ».
   Une carte de visite n'a qu'une forme.

   Le dessin garde donc ses 620px et ses mesures au pixel ; c'est
   l'OBJET qui retrecit. zoom, et non transform:scale, parce que zoom
   agit sur la mise en page : la carte occupe vraiment sa taille reduite
   et n'a besoin d'aucune boite pour reserver sa place.

   PAR PALIERS, ET NON PAR CALCUL. Un facteur continu demanderait de
   diviser une longueur par une longueur, ce que calc() ne sait pas
   faire. Chaque palier est cale sur la largeur la plus etroite de sa
   bande, pour que la carte tienne partout dedans.

   Le bouton reste hors du zoom — il est un controle, pas une partie de
   la carte, et son texte doit rester lisible. */
@media(max-width:684px){.fiche{zoom:.90}}
@media(max-width:600px){.fiche{zoom:.78}}
@media(max-width:520px){.fiche{zoom:.65}}
@media(max-width:440px){.fiche{zoom:.58}}
@media(max-width:400px){.fiche{zoom:.51}}
@media(max-width:350px){.fiche{zoom:.45}}
/* La ou zoom manque, la carte reprend sa largeur souple : mieux vaut
   une carte un peu differente qu'une carte qui deborde de l'ecran. */
@supports not (zoom:1){.fiche{width:min(620px,100%)}}
.fiche-plateau{position:relative;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.fiche--dos .fiche-plateau{transform:rotateY(180deg)}
.fiche-face,.fiche-dos{
  background:var(--dark);border:1px solid var(--border2);border-radius:2px;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.fiche-face{position:relative;
  padding:26px 28px 22px}
/* Le dos se cale sur la face : c'est elle qui donne la hauteur, et une
   carte dont les deux cotes n'ont pas la meme taille n'est pas une
   carte. */
.fiche-dos{position:absolute;inset:0;transform:rotateY(180deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px}
.fiche-face::before,.fiche-dos::before{content:"";position:absolute;inset:9px;
  border:1px dashed rgba(255,255,255,.09);border-radius:1px;pointer-events:none}
.fiche-brillance{position:absolute;inset:0;border-radius:2px;opacity:0;
  transition:opacity .45s ease;pointer-events:none;
  background:radial-gradient(460px circle at var(--bx,50%) var(--by,50%),
    rgba(255,255,255,.09),rgba(255,255,255,.02) 42%,transparent 66%)}
.fiche.est-survole .fiche-brillance{opacity:1}
.fiche-tete{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;font-family:var(--font-display);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);
  padding-bottom:20px;border-bottom:1px solid var(--border)}
.fiche-corps{display:grid;grid-template-columns:132px 1fr;gap:24px;
  padding:22px 0 20px}
.fiche-photo{margin:0}
/* height:auto est obligatoire : l'attribut height du HTML est une
   indication de presentation, et sans regle CSS pour la contredire elle
   l'emporte sur aspect-ratio — l'image sortait a sa hauteur native.
   LE NOIR ET BLANC N'EST PLUS UN FILTRE. La photo precedente etait en
   couleur et grayscale(1) la desaturait, le survol la rendait. Celle-ci
   est deja tiree en noir et blanc : le filtre n'avait plus rien a
   retirer, et le survol plus rien a rendre. Reste ce qu'un survol peut
   encore dire ici — le contraste qui se reprend d'un cran. */
.fiche-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border:1px solid var(--border2);filter:contrast(1.08) brightness(.94);
  transition:filter .5s ease}
.fiche.est-survole .fiche-photo img{filter:contrast(1) brightness(1)}
.fiche-photo figcaption{margin-top:9px;font-family:var(--font-display);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
/* Les <dt>/<dd> sont enfants directs du <dl>, sans <div> par paire :
   la grille du <dl> les range en deux colonnes toute seule. Le
   wrapper n'etait pas neutre — poser-prises y voyait une feuille et
   posait UNE prise pour l'intitule ET sa valeur, la ou les <dl> des
   pages legales en ont une par element. */
.fiche-champs{margin:0;display:grid;
  grid-template-columns:88px 1fr;gap:13px 14px;align-items:baseline}
.fiche-champs dt{font-family:var(--font-display);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.fiche-champs dd{margin:0;font-family:var(--font-display);font-weight:500;
  font-size:14px;letter-spacing:.01em;line-height:1.35;color:var(--light)}
/* La moitie droite du pied reste vide : c'est la que le tampon tombe.
   Un tampon qui atterrit sur du texte n'a pas l'air pose, il a l'air
   mal place. */
.fiche-pied{padding-top:16px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:3px;max-width:58%}
.fiche-signature{font-family:var(--font-accent);font-style:italic;
  font-size:28px;line-height:1;color:var(--light)}
.fiche-mention{font-family:var(--font-display);font-size:9px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}

/* LE TAMPON EST POSE PAR DEFAUT, ET C'EST LE POINT. Dans le labo il
   n'apparaissait qu'au survol, avec un « passe le curseur dessus »
   pour le dire. Deux raisons de renverser ca ici : un contenu qui
   n'existe qu'au survol n'existe pas au doigt ni au clavier, et une
   page qui doit demander qu'on la survole s'excuse d'exister.

   SON ETAT DE REPOS EST L'ETAT POSE, jamais l'etat cache. Il l'a ete
   une premiere fois dans l'autre sens — la fiche partait avec une
   classe d'attente que le JS devait lever — et cela rendait le tampon
   invisible partout ou le JS ne passe pas. L'atterrissage est donc une
   ANIMATION, que accueil.js declenche a l'entree dans l'ecran : rien a
   lever, rien a attendre, et si personne ne la declenche il ne manque
   qu'un mouvement, pas un dessin. */
/* Il APPARAISSAIT, il FRAPPE maintenant. La course etait trop courte
   et trop reguliere pour se lire : sur telephone le tampon fait
   soixante pixels, et un fondu de six dixiemes y passe inapercu. Il
   vient de plus haut, depasse sa marque, puis se repose — c'est le
   depassement qui fait le coup, pas la duree. */
@keyframes fiche-tampon-tombe{
  0%  {opacity:0;   transform:rotate(-38deg) scale(2.1)}
  50% {opacity:1;   transform:rotate(-6deg)  scale(.92)}
  72% {opacity:.92; transform:rotate(-13.5deg) scale(1.05)}
  86% {opacity:.92; transform:rotate(-10deg) scale(.99)}
  100%{opacity:.92; transform:rotate(-11deg) scale(1)}
}
.fiche--tombe .fiche-tampon{
  animation:fiche-tampon-tombe .95s cubic-bezier(.22,.9,.3,1) both}
.fiche-tampon{position:absolute;
  color:var(--accent);opacity:.92;transform:rotate(-11deg) scale(1);
  transition:opacity .28s ease,transform .55s cubic-bezier(.18,1.32,.36,1);
  pointer-events:none}
.tampon-tour{font-family:var(--font-display);font-size:8.4px;
  letter-spacing:.3em;fill:currentColor}
.tampon-mot{font-family:var(--font-display);font-size:26px;font-weight:600;
  letter-spacing:.04em;fill:currentColor}
.tampon-date{font-family:var(--font-display);font-size:7.5px;
  letter-spacing:.28em;fill:currentColor}
/* ── LE DOS : LE MONOGRAMME EN INCRUSTATION CHROME ─────────────
   C'EST LE DESSIN QUI EST EN METAL, PAS UN RECTANGLE DERRIERE LUI. Le
   degrade est masque par le PNG du logo : le foil epouse donc les trois
   traits du monogramme, jusqu'aux arrondis. Un simple fond irise sous
   une image blanche aurait donne une plaque, pas une incrustation.

   C'EST UNE VRAIE MATIERE, PAS UN DEGRADE. Le premier essai empilait
   six teintes en linear-gradient : ca donnait du metal peint, pas du
   verre. La texture est un rendu de dispersion — pack « 3D Holographic
   Glass », planche 18, choisie parce qu'elle couvre TOUT le monogramme.
   Celles qui posent une forme isolee sur du blanc laissaient la moitie
   des traits vides.

   ELLE EST ENCODEE HORS DU SEUIL DU PROJET, ET C'EST DELIBERE.
   images-webp.py refuse au-dela d'un ecart quadratique de 1.5 ; celle-ci
   est a 6.3 a toutes les qualites, parce que le detail prismatique fin
   est ce que la mesure punit le plus. Mis cote a cote a la taille
   d'affichage — 290px — l'original en 2000px et ce fichier de 51 Ko
   sont indiscernables. Le seuil protege LE TRAVAIL MONTRE, ou l'image
   est le produit ; une matiere vue a travers un masque n'en est pas.

   IL GLISSE AVEC --bx/--by, les coordonnees que le pointeur ecrit deja
   sur la face pour sa lumiere. Le fond fait trois fois la taille du
   dessin, donc deplacer sa position de 0 a 100 % balaie tout le
   degrade : le meme geste allume les deux cotes de la carte. */
.fiche-dos-logo{
  width:290px;aspect-ratio:1;
  -webkit-mask:url(/media/img/NEW_LOGO_w_rxvoil.png) center/contain no-repeat;
          mask:url(/media/img/NEW_LOGO_w_rxvoil.png) center/contain no-repeat;
  background-image:url(/media/img/deco/holo_chrome.webp?v=30182938);
  background-size:230% 230%;
  background-position:var(--bx,50%) var(--by,50%);
  filter:drop-shadow(0 2px 10px rgba(255,255,255,.16))}
.fiche-dos-mention{font-family:var(--font-display);
  font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--dim)}

/* ── LE BOUTON QUI RETOURNE ──────────────────────────────── */
.fiche-bascule{appearance:none;-webkit-appearance:none;background:transparent;
  border:1px solid var(--border2);border-radius:999px;
  padding:9px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--off);
  transition:color .25s ease,border-color .25s ease}
.fiche-bascule:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.45)}
.fiche-bascule:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fiche-bascule i{font-style:normal;font-size:13px;line-height:1;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fiche-bascule[aria-pressed="true"] i{transform:rotate(180deg)}

/* Le tampon suit la carte au lieu de sauter a une autre taille : il
   reste le meme objet du bureau au telephone. */
.fiche-tampon{right:26px;bottom:20px;width:118px;height:118px}
/* Sous mouvement reduit, la fiche ne s'incline pas — accueil.js ne
   pose aucun ecouteur — et le tampon reste ou le CSS l'a mis. Il ne
   manque donc que la lumiere, qui est une opacite : elle a le droit
   de vivre, la preference vise ce qui se deplace. */
@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  .fiche{will-change:auto}
}

/* ═══════════════════════════════════════════════════════════════════
   LA CHRONOLOGIE  —  #chrono
   ───────────────────────────────────────────────────────────────────
   Six feuilles qu'on lit une par une, et qui se rangent dans un
   dossier. Le dossier est un vrai dossier : un DOS avec son onglet en
   haut a gauche, une FACE devant, les feuilles entre les deux.

   LE DOSSIER EST LA DES LA PREMIERE FEUILLE, et c'est la correction qui
   comptait. Il n'apparaissait qu'a la fin, une fois tout range : on
   voyait cinq minutes une feuille blanche descendre vers une forme
   sombre non identifiee, et le geste ne voulait rien dire. Un rangement
   ne se comprend que si on voit d'abord OU ca se range.

   L'ETAT DE REPOS EST UNE LISTE. Sans JavaScript, sans GSAP, les six
   feuilles se suivent de haut en bas, le dossier ne s'affiche pas, et
   tout se lit. C'est accueil.js qui pose `chr--pile`.
   ═══════════════════════════════════════════════════════════════════ */
#chrono{background:var(--black);position:relative}
.chr-cadre{position:relative;width:min(760px,92vw);margin:0 auto;
  padding:12svh 0}
.chr-eti{display:block;margin-bottom:clamp(20px,3vw,32px);
  font-family:var(--font-display);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim)}

/* ── LE BILLET ─────────────────────────────────────────────────────
   Souche a gauche avec l'annee, perforation en pointilles, bords
   crantes : le design demande. Je l'avais remplace par une feuille nue
   sans qu'on me le demande ; il revient.

   L'ANNEE EST DANS LA SOUCHE, EN HAUT. C'est la bande qui restera
   visible quand le billet sera recouvert par le suivant : c'est elle
   qui permet de compter la pile d'un coup d'oeil. */
.chr-c{position:relative;display:flex;background:var(--light);
  border-radius:12px;
  box-shadow:0 24px 50px -34px rgba(0,0,0,.95)}
.chr-souche{flex:0 0 clamp(92px,21%,158px);
  padding:clamp(16px,2.4vw,22px) 0 clamp(18px,2.6vw,24px) clamp(18px,2.6vw,28px)}
.chr-corps{flex:1;min-width:0;
  padding:clamp(16px,2.4vw,22px) clamp(20px,3vw,30px) clamp(18px,2.6vw,24px);
  border-left:2px dashed rgba(17,16,8,.2)}
/* Les crans : deux ronds de la couleur du fond, poses sur la
   perforation. Ils ne percent rien, ils font croire qu'on a perce. */
.chr-c::before,.chr-c::after{content:"";position:absolute;
  left:clamp(92px,21%,158px);width:20px;height:20px;margin-left:-11px;
  background:var(--black);border-radius:50%}
.chr-c::before{top:-10px}
.chr-c::after{bottom:-10px}
.chr-an{display:block;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.25rem,2.6vw,1.85rem);line-height:1;letter-spacing:-.02em;
  color:#111008;font-variant-numeric:tabular-nums}
.chr-an i{font-style:normal;color:#6f6a5e;font-size:.72em;margin:0 .1em}
.chr-tx{margin:0;font-family:var(--font-body);
  font-size:clamp(.84rem,1.1vw,.97rem);line-height:1.58;color:#3a3730;
  max-width:56ch}
.chr-tx i{font-family:var(--font-accent);font-style:italic;
  font-size:1.12em;color:#111008}
.chr-tx .chr-cr{font-family:var(--font-display);font-weight:600;
  font-size:.94em;letter-spacing:.02em;color:#111008}
.chr-c + .chr-c{margin-top:14px}

/* ── UNE BILLETTE SUR DEUX EST VERTE ──────────────────────────────
   Demande par le proprietaire : la premiere blanche, la deuxieme
   verte, la quatrieme, la sixieme. Cible par data-chr et non par
   :nth-child() — l'attribut dit le rang voulu, il ne se deduit pas de
   la position dans l'arbre, et il ne bougera pas si un billet est
   ajoute ou reordonne.

   CE QUE CA PLIE, ET C'EST ASSUME. assets/palette.css pose la regle :
   « UN seul aplat vert par ecran. Un second usage n'est tolere qu'en
   lineaire. » La pile en montre jusqu'a trois en meme temps. C'est une
   decision de direction artistique, pas un oubli — la note est ici
   pour que personne ne la corrige en croyant reparer un ecart.

   LE TEXTE RESTE SOMBRE, ET LA PALETTE LE PREVOIT : « contraste
   17,5:1 sur --black dans les deux sens : utilisable en fond de CTA
   avec du texte noir. » On ne fait donc que suivre l'usage documente
   du vert en aplat. Les gris chauds de la carte blanche (#3a3730,
   #6f6a5e) sont repris en versions olivees : sur un fond jaune-vert,
   un gris neutre tire au sale. */
.chr-c[data-chr="1"],
.chr-c[data-chr="3"],
.chr-c[data-chr="5"]{background:var(--accent)}

.chr-c[data-chr="1"] .chr-tx,
.chr-c[data-chr="3"] .chr-tx,
.chr-c[data-chr="5"] .chr-tx{color:#33370f}

.chr-c[data-chr="1"] .chr-an i,
.chr-c[data-chr="3"] .chr-an i,
.chr-c[data-chr="5"] .chr-an i{color:#5c6116}

/* La perforation en pointilles se lit moins sur le vert que sur le
   creme : le meme alpha sur une valeur claire donne un trait plus
   pale. Il est remonte pour que les deux cartes aient l'air percees
   de la meme facon. */
.chr-c[data-chr="1"] .chr-corps,
.chr-c[data-chr="3"] .chr-corps,
.chr-c[data-chr="5"] .chr-corps{border-left-color:rgba(17,16,8,.34)}
.chr-dos,.chr-face{display:none}

/* ── LE DOSSIER, quand le script prend la main ─────────────────────── */
/* Le titre de section touchait le bloc du dessus : le cadre epingle
   perdait tout son retrait. Il en garde en haut. */
.chr--pile .chr-cadre{height:100svh;padding:clamp(52px,9svh,104px) 0 0;
  display:flex;flex-direction:column;justify-content:center}
.chr--pile .chr-pont{position:relative;height:100%;overflow:hidden}
.chr--pile .chr-c{position:absolute;left:0;right:0;margin:0;
  /* LA PILE SE CONSTRUIT A VUE, et c'est tout le sujet. Les versions
     precedentes recouvraient entierement le billet precedent : on
     voyait des choses bouger sans jamais voir de pile, et le geste ne
     voulait rien dire. Le billet actif est ici, en bas de la zone ;
     ceux deja lus montent d'un cran chacun et RESTENT visibles, leur
     souche depassant. A la sixieme, on compte six annees empilees. */
  /* Le haut laisse la place a la pile qui monte : cran x cinq. En
     dessous, les premiers billets sortiraient par le haut du cadre. */
  top:clamp(152px,23svh,218px);height:clamp(168px,23svh,206px);
  will-change:transform}
/* Dans la pile, l'annee se colle en haut de la souche : c'est la bande
   qui depasse, et un retrait de 22px y mangeait la moitie du chiffre. */
.chr--pile .chr-souche{padding-top:9px}
.chr--pile .chr-corps{padding-top:9px}

/* LE DOSSIER EST UN OBJET ENTIER, PAS UN BORD D'ECRAN. Il etait colle
   a bottom:0 : le cadre lui coupait le bas, et on voyait une bande
   sombre plutot qu'un dossier. Il se decolle donc du bord, ses quatre
   coins sont arrondis, et on le voit en entier.

   Le dos monte plus haut que la face, et son onglet le coiffe : c'est
   l'onglet qui fait reconnaitre un dossier au premier coup d'oeil. */
.chr--pile .chr-dos{display:block;position:absolute;z-index:1;
  left:6%;right:6%;bottom:clamp(26px,4svh,56px);
  height:clamp(158px,26svh,224px);
  background:linear-gradient(180deg,#1d1d1d,#0c0c0c);
  border-radius:14px;border:1px solid var(--border2)}
.chr--pile .chr-dos::before{content:"";position:absolute;
  left:-1px;top:-15px;width:min(26%,150px);height:18px;
  background:#1d1d1d;border-radius:9px 9px 0 0;
  border:1px solid var(--border2);border-bottom:0}

/* LA FACE EST TRANSLUCIDE ET PENCHEE, pas un panneau opaque. C'est ce
   qui fait lire un dossier plutot qu'une boite : on voit les pieces au
   travers, floues, comme derriere un rabat de plastique. Elle etait
   pleine et droite, et le resultat ressemblait a un tiroir.

   Le rabat s'incline vers l'avant : transform-origin en bas, rotateX
   negatif, et son bord haut vient vers l'oeil. La perspective est posee
   sur l'element lui-meme, le cadre en ayant deja une pour les billets. */
.chr--pile .chr-face{display:block;position:absolute;z-index:20;
  left:6%;right:6%;bottom:clamp(26px,4svh,56px);
  height:clamp(118px,19svh,168px);
  border-radius:3px 3px 14px 14px;
  border:1px solid rgba(255,255,255,.14);border-bottom:0;
  /* Le rabat reste SOMBRE. En clair il virait au bandeau de verre
     fume pose sur rien ; c'est du carton, on doit juste deviner les
     pieces derriere, pas les lire. */
  background:linear-gradient(178deg,
    rgba(150,148,142,.34) 0%, rgba(46,46,46,.86) 22%,
    rgba(20,20,20,.96) 58%, rgba(10,10,10,.99) 100%);
  -webkit-backdrop-filter:blur(7px) saturate(.85);
          backdrop-filter:blur(7px) saturate(.85);
  transform-origin:bottom center;
  transform:perspective(1100px) rotateX(-7deg);
  box-shadow:0 -24px 54px -30px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(255,255,255,.10)}
.chr--pile .chr-face-l,.chr--pile .chr-face-n{position:absolute;top:17px;
  font-family:var(--font-display);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim)}
.chr--pile .chr-face-l{left:clamp(18px,2.6vw,28px)}
.chr--pile .chr-face-n{right:clamp(18px,2.6vw,28px);color:var(--off);
  font-variant-numeric:tabular-nums}
.chr--pile .chr-face-n b{color:var(--accent);font-weight:600}

/* ══════════════════════════════════════════════════════════════════
   LA PREUVE — la seule respiration claire de la page
   ──────────────────────────────────────────────────────────────────
   Voir la note au-dessus de <section id="preuve"> dans index.html pour
   le pourquoi. Ici, seulement le comment.

   AUCUN !important DANS TOUT CE BLOC, ET C'EST LE POINT. #about en
   porte 161, #services 129, #collabs 123 : ces sections ont ete
   retournees et re-retournees jusqu'a ce que plus personne ne puisse
   predire ce qui gagne. Une section neuve part d'une feuille blanche
   et n'a aucune raison d'entrer dans cette course.
   ══════════════════════════════════════════════════════════════════ */
#preuve{
  /* LA SECTION EST NOIRE ; C'EST LE BLOC QUI EST CLAIR. La difference
     n'est pas un detail : elle permet a la page de se voir tout autour
     du bloc, et c'est ce qui le fait exister comme un objet pose
     plutot que comme un trou dans le noir. */
  background:var(--black);
  padding:clamp(64px,10vh,130px) clamp(14px,3vw,42px) clamp(96px,14vh,170px);
  position:relative;
}

.pv-bloc{
  position:relative;
  max-width:1400px;margin:0 auto;
  background:var(--light);
  border-radius:clamp(18px,2.6vw,34px);
  padding:clamp(46px,7vh,96px) 0 clamp(74px,10vh,124px);
}
.pv-in{
  max-width:1180px;margin:0 auto;
  padding:0 clamp(24px,4vw,64px);
  position:relative;
}

/* ── LA TETE : deux colonnes reliees par un filet ──────────────── */
.pv-tete{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) auto minmax(0,.85fr);
  align-items:end;gap:clamp(20px,3vw,40px);
  position:relative;
}
.pv-gauche{position:relative;z-index:1}

/* LE CHIFFRE DE CHAPITRE SE TIENT DERRIERE CE QU'IL NUMEROTE. Pose a
   droite dans une premiere version, il flottait detache au-dessus de
   rien. 5,5 % de noir sur creme : ses deux cousins du site,
   .xp-chiffre et .sec-num, sont a 2,8 % et 3 % de blanc sur du
   #060606 — mesures, ils ne se voient pas du tout. */
.pv-chiffre{
  position:absolute;left:-.06em;top:-.42em;z-index:0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(8rem,16vw,14rem);line-height:1;
  letter-spacing:-.05em;color:rgba(17,16,8,.055);
  pointer-events:none;user-select:none;
}

.pv-eti{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-display);font-weight:700;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-deep);
}
/* --accent-deep et non --accent : la palette le prevoit pour ce cas,
   « vert sur fond clair : 5,0:1 sur --light ». Le vert de signature
   disparait sur du creme. */
.pv-trait{width:26px;height:1.5px;background:var(--accent-deep);display:block}

.pv-h2{
  margin:clamp(16px,2vw,26px) 0 0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:.98;
  letter-spacing:-.035em;color:#111008;
}
.pv-h2 em{
  display:block;font-family:var(--font-accent);font-style:italic;
  font-weight:400;font-size:.78em;letter-spacing:-.012em;color:#6f6a5e;
}

.pv-filet{
  display:block;width:clamp(40px,7vw,120px);height:1px;
  background:rgba(17,16,8,.22);margin-bottom:.75em;
}
.pv-droite{
  font-family:var(--font-body);
  font-size:clamp(.86rem,1.02vw,.98rem);line-height:1.62;
  color:#5a564d;max-width:38ch;margin:0 0 .35em;
}

/* ── LES CHIFFRES, POSES SUR DES SURFACES ──────────────────────── */
.pv-grille{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.5vw,18px);
  margin-top:clamp(52px,8vh,96px);
}
.pv-c{
  background:rgba(17,16,8,.035);
  border-radius:clamp(12px,1.4vw,18px);
  padding:clamp(24px,3vw,40px) clamp(20px,2.4vw,32px);
}
/* UN SEUL DES TROIS EST VERT, comme la palette l'exige : un aplat
   d'accent par ecran. Le dernier — neuf pays — parce que c'est celui
   qu'on ne devine pas. */
.pv-c--fort{background:var(--accent)}
.pv-c--fort span{color:#33370f}
.pv-c b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(3rem,6.8vw,5.4rem);line-height:.9;
  letter-spacing:-.05em;color:#111008;
  font-variant-numeric:tabular-nums;
}
.pv-c span{
  display:block;margin-top:.6em;
  font-family:var(--font-body);font-size:clamp(.76rem,.92vw,.88rem);
  line-height:1.4;color:#5a564d;
}

/* ── LA PAIRE D'ACTIONS ────────────────────────────────────────── */
.pv-actions{
  display:flex;align-items:center;gap:clamp(16px,2vw,28px);
  flex-wrap:wrap;margin-top:clamp(34px,5vh,58px);
}
.pv-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:9999px;
  background:#111008;color:var(--light);text-decoration:none;
  font-family:var(--font-display);font-weight:700;
  font-size:.8rem;letter-spacing:.03em;
  transition:transform var(--t-court) var(--ease-pose),
             scale var(--t-court) var(--ease-appui);
}
.pv-btn i{font-style:normal;transition:transform var(--t-court) var(--ease-pose)}
.pv-btn:hover{transform:translateY(-2px)}
.pv-btn:hover i{transform:translateX(4px)}
.pv-lien{
  font-family:var(--font-display);font-weight:700;
  font-size:.8rem;letter-spacing:.03em;color:#111008;
  text-decoration:none;border-bottom:1px solid rgba(17,16,8,.28);
  padding-bottom:3px;
  transition:border-color var(--t-court) var(--ease-pose)}
.pv-lien:hover{border-bottom-color:#111008}

/* ══════════════════════════════════════════════════════════════════
   LE BADGE, A CHEVAL SUR LE BORD DU BLOC
   ──────────────────────────────────────────────────────────────────
   DEUX SEPARATIONS, ET IL EN FAUT DEUX. Sa moitie haute est sur le
   creme du bloc : c'est son remplissage noir qui l'en detache. Sa
   moitie basse est sur le noir de la page : c'est sa bague creme qui
   l'en detache. Sans l'une des deux, la moitie correspondante
   disparaitrait purement et simplement dans le fond.

   IL TOURNE AU SCROLL, jamais tout seul — voir la scene dans
   motion.js. Une rotation autonome tournerait meme immobile, meme
   hors de l'ecran : c'est le defaut qu'on a retire a la passerelle.
   ══════════════════════════════════════════════════════════════════ */
.pv-badge{
  position:absolute;left:50%;bottom:0;
  /* LE CENTRAGE PASSE PAR `translate`, PAS PAR `transform`, ET CE
     N'EST PAS UN CAPRICE D'ECRITURE.

     Les deux proprietes se concatenent dans un ordre impose par la
     specification : translate, rotate, scale, PUIS transform. Ecrit en
     `transform:translate(-50%,50%)`, le centrage se retrouve donc
     APRES `scale` dans la chaine — et l'appui a 95 % mettait aussi le
     centrage a l'echelle. Le badge ne rentrait pas sur lui-meme, il
     rentrait ET se decalait de 3,5 px vers le haut a droite.

     Sur n'importe quel bouton, ce decalage passerait inapercu. Ici le
     badge est A CHEVAL sur la frontiere entre le creme et le noir :
     en bougeant, il change la proportion de disque sombre posee sur
     chaque fond, et c'est sa FORME qu'on voit changer, pas sa
     position.

     Avec la propriete `translate`, le centrage vient AVANT scale dans
     la chaine : le disque se comprime sur son propre centre et ne
     bouge pas d'un pixel. */
  translate:-50% 50%;
  width:clamp(104px,11vw,140px);aspect-ratio:1;
  border-radius:50%;
  background:#111008;
  border:clamp(7px,.9vw,11px) solid var(--light);
  display:grid;place-items:center;
  text-decoration:none;
  transition:scale var(--t-court) var(--ease-appui);
}
/* LE DISQUE NE BOUGE PLUS DU TOUT A L'APPUI, SUR DEMANDE.
   Il rentrait de 5 %, comme tous les autres elements cliquables du
   site. Partout ailleurs c'est invisible ; ici le badge est A CHEVAL
   sur la frontiere entre le creme du bloc et le noir de la page, et sa
   bague creme ne se voit que sur la moitie basse. Changer son rayon,
   meme de sept pixels, change la longueur de l'arc visible de chaque
   cote de la ligne — donc sa SILHOUETTE, pas sa taille.

   Le retour existe toujours, il a seulement quitte le contour : c'est
   la fleche qui s'enfonce. Elle est au centre, loin des deux bords,
   et rien de ce qu'elle fait ne touche au disque. */
.pv-badge:active{scale:1}
.pv-badge-fleche{transition:transform var(--t-court) var(--ease-appui)}
.pv-badge:active .pv-badge-fleche{
  transform:translateY(4px);
  transition:transform var(--t-reflexe) linear;
}

.pv-badge-txt{
  position:absolute;inset:0;width:100%;height:100%;
  fill:var(--light);
  font-family:var(--font-display);font-weight:700;
  font-size:8.4px;letter-spacing:.16em;
  will-change:transform;
}
.pv-badge-fleche{
  font-size:clamp(1.1rem,1.5vw,1.4rem);color:var(--accent);
  line-height:1;
}

/* ── Petits ecrans ─────────────────────────────────────────────── */
@media(max-width:900px){
  .pv-tete{grid-template-columns:1fr;align-items:start;gap:22px}
  .pv-filet{display:none}
  .pv-droite{max-width:52ch}
  .pv-chiffre{font-size:clamp(7rem,24vw,10rem);top:-.34em}
}
@media(max-width:640px){
  .pv-grille{grid-template-columns:1fr;gap:10px}
  .pv-c{display:flex;align-items:baseline;gap:18px;padding:20px 22px}
  .pv-c b{font-size:2.8rem}
  .pv-c span{margin-top:0}
  .pv-actions{gap:18px}
}

/* ══════════════════════════════════════════════════════════════════
   METHODOLOGIE — quatre ouvertures de chapitre
   ──────────────────────────────────────────────────────────────────
   LE TITRE DE LA SECTION DIT « chapitre par chapitre ». La mise en
   page ne le disait pas : trois colonnes egales repetees quatre fois,
   ou le NUMERO etait plus gros que le nom de l'etape. On lisait un
   tableau de tarifs — et un tableau numerote ses lignes, il ne les
   intitule pas.

   Un chapitre s'ouvre autrement : un index discret, puis le titre en
   grand, puis le texte. C'est l'inverse exact du rapport de tailles
   qu'il y avait — 4,2rem pour le numero contre 1,5 pour le nom.

   TROIS DECISIONS.

   Le NOM devient le sujet de sa ligne. C'est lui qu'on cherche quand
   on parcourt une methode ; le numero ne fait que la situer.

   Le TEXTE passe a droite, en colonne etroite. L'asymetrie fait
   respirer : deux blocs de largeur egale se neutralisent, un grand et
   un petit se hierarchisent.

   Le TRAIT DU BAS SE TRACE quand l'etape est atteinte. Il y avait un
   filet separe le long de la marge — un element de plus pour dire ce
   que la structure pouvait dire seule. Ici c'est la separation elle
   meme qui avance, et il n'y a rien a ajouter au dessin.
   ══════════════════════════════════════════════════════════════════ */
.proc-liste{ position:relative; }

.proc-etape{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  grid-template-areas:
    "index  index"
    "nom    texte"
    "engag  engag";
  column-gap:clamp(28px,5vw,80px);
  padding:clamp(34px,5.6vh,62px) 0 clamp(30px,4.6vh,50px);
}

/* ── L'INDEX : un numero et un tiret, rien de plus ──────────────── */
.proc-index{
  grid-area:index; display:flex; align-items:center; gap:14px;
  margin-bottom:clamp(16px,2.4vh,26px);
}
.proc-no{
  font-family:var(--font-display); font-weight:700;
  font-size:.78rem; letter-spacing:.24em;
  color:var(--dim)!important;
  transition:color var(--t-moyen) var(--ease-pose);
}
.proc-tiret{
  display:block; width:clamp(26px,4vw,54px); height:1px;
  background:var(--border2); transform-origin:left center;
  transition:background-color var(--t-moyen) var(--ease-pose);
}
.proc-etape.est-atteinte .proc-no{ color:var(--accent)!important; }
.proc-etape.est-atteinte .proc-tiret{ background:var(--accent); }

/* ── LE NOM PORTE LA LIGNE ──────────────────────────────────────── */
.proc-nom{
  grid-area:nom; margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,3.5vw,3rem); line-height:.98;
  letter-spacing:-.03em; color:var(--light);
  text-wrap:balance;
}

.proc-txt{
  grid-area:texte; margin:0;
  font-family:var(--font-body); font-weight:300;
  font-size:clamp(.86rem,1vw,.95rem); line-height:1.72;
  color:var(--off)!important; max-width:46ch;
  padding-top:.4em;
}

/* ── L'ENGAGEMENT, EN PIED DE CHAPITRE ──────────────────────────── */
.proc-engagement{
  grid-area:engag;
  margin:clamp(22px,3.4vh,38px) 0 0;
  font-family:var(--font-display); font-weight:700;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  /* LA MEME PILULE QUE L'ŒIL DE SECTION, SANS SA PASTILLE. L'engagement
     etait deux textes poses cote a cote au pied du chapitre ; il flottait.
     Enferme, il devient l'objet qu'il est : une clause. La pastille reste
     a l'œil de section pour que les deux ne se disputent pas le regard —
     un badge par section, pas un par etape. */
  display:inline-flex; align-items:center; gap:.85em; flex-wrap:wrap;
  width:max-content; max-width:100%;
  padding:.62em 1.15em;
  border:1px solid var(--border2);
  border-radius:9999px;
}
/* Le !important n'est pas un caprice : `#process div, #process span,
   #process li` force var(--light) sur tout, en !important, depuis le
   jour ou la section est passee du creme au noir. Une couleur
   secondaire ne peut se poser qu'au meme niveau. */
.proc-engagement b{ color:var(--accent-press)!important; font-weight:700; }
.proc-engagement span{
  color:var(--dim)!important; font-weight:400; letter-spacing:.06em;
  text-transform:none; font-family:var(--font-body); font-size:.78rem;
}

/* ═════════════════════════════════════════════════════════════════
   L'ŒIL DE SECTION DEVIENT UNE PILULE A PASTILLE
   ─────────────────────────────────────────────────────────────────
   Le dispositif vient de la reference « Ora » : un intitule de section
   n'y est pas un mot pose dans le vide, c'est une pilule QUI PORTE une
   pastille pleine. Un objet, la ou il y avait une ligne.

   LA PASTILLE COMPTE LES CHAPITRES. Elle aurait pu ne rien dire ; un
   badge decoratif est un badge de trop. Elle affiche 04, et la section
   annonce donc sa longueur avant qu'on la parcoure — l'information que
   cherche exactement quelqu'un qui arrive sur une methode.

   ELLE EST ECRITE EN CSS, PAS DANS LE BALISAGE, et ce n'est pas un
   detail. L'element porte une prise `mdg-t-` : l'administration y
   reecrit tout l'interieur. Un chiffre pose dans le HTML disparaitrait
   a la premiere publication, et personne ne saurait pourquoi.
   ═════════════════════════════════════════════════════════════════ */
.proc-chip{
  display:inline-flex; align-items:center; gap:.9em;
  padding:.75em 1.2em;
  border:1px solid var(--border2);
  border-radius:9999px;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  margin-bottom:clamp(18px,2.6vh,26px);
}
/* LA COULEUR SE POSE AVEC L'IDENTIFIANT, PAS SANS. `#process div` impose
   var(--light) en !important a tout div de la section : mesure faite, une
   simple classe en !important perdait quand meme, l'identifiant l'emporte
   a poids egal. L'etiquette reste donc sourde et c'est la pastille qui
   porte l'accent — deux verts cote a cote n'en font aucun. */
#process .proc-chip{ color:var(--off)!important; }
.proc-chip::after{
  content:'04';
  display:inline-flex; align-items:center; justify-content:center;
  width:1.4rem; height:1.4rem; flex:0 0 auto;
  /* LES MARGES VERTICALES ANNULENT EXACTEMENT LA HAUTEUR DU DISQUE.
     Sans ca, c'est la pastille qui dicterait la hauteur de la pilule et
     le rapport des deux changerait a chaque reglage. La hauteur reste
     celle du texte ; la pastille se centre dedans et ne pese rien. */
  margin-block:-.7rem;
  margin-right:-.66rem;              /* elle mord la marge droite */
  border-radius:50%;
  background:var(--accent); color:var(--black);
  font-family:var(--font-display); font-weight:700;
  font-size:.58rem; letter-spacing:.02em; line-height:1;
}
/* La version mobile vit dans `.process-mob`, un bloc a part : memes
   proportions, un cran plus petit. */
.proc-chip--mob{ font-size:.64rem; letter-spacing:.22em; margin-bottom:14px; }
.proc-chip--mob::after{ width:1.25rem; height:1.25rem; margin-block:-.625rem; margin-right:-.6rem; font-size:.54rem; }

/* LA PILULE TIENT AUSSI SUR TELEPHONE. `.process-mob` est un balisage
   separe, style en ligne : sans cette regle le dispositif s'arreterait
   a 767 px et le telephone verrait une autre section que l'ecran. Le
   !important repond aux couleurs posees en attribut, qui l'emportent
   autrement sur la feuille. */
.proc-engagement-mob{
  display:inline-flex; align-items:center;
  width:max-content; max-width:100%;
  margin-top:2px;
  padding:.5em 1em;
  border:1px solid var(--border2);
  border-radius:9999px;
}
/* Encore l'identifiant : `#process div` l'emporte sur une classe meme
   en !important. Les quatre clauses passent a l'accent — sur ordinateur
   c'est deja la couleur du fragment en gras, et la ligne mobile est ce
   fragment a elle seule. */
#process .proc-engagement-mob{ color:var(--accent-press)!important; }

/* ── LE TRAIT QUI SE TRACE ──────────────────────────────────────── */
.proc-trait{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--border);
}
/* L'ACCENT DU TRAIT EST ATTENUE, ET L'INDEX GARDE LE PLEIN. Trace en
   accent franc sur toute la largeur, il donnait trois bandes vives
   empilees des qu'on avait passe trois etapes — la page se mettait a
   rayer. La palette autorise le vert en lineaire au-dela d'un aplat
   par ecran, mais autoriser n'est pas conseiller.

   A 38 %, le trait confirme que l'etape est passee sans reclamer le
   regard. Ce qui doit l'attirer, c'est l'index — petit, precis, et
   lui en accent plein. */
.proc-trait::after{
  content:''; position:absolute; inset:0;
  background:rgba(var(--accent-rgb),.38);
  transform:scaleX(0); transform-origin:left center;
}
.proc-etape:last-child .proc-trait{ display:none; }

@media(max-width:767px){
  .proc-etape{
    grid-template-columns:1fr;
    grid-template-areas:"index" "nom" "texte" "engag";
    padding:30px 0 26px;
  }
  .proc-nom{ font-size:1.65rem; }
  .proc-txt{ padding-top:10px; max-width:none; }
}

/* Le trait se trace a l'arrivee de l'etape. Duree longue et courbe de
   lame : un trait qui se tire vite lit comme un glitch, un trait qui
   se tire lentement lit comme un geste. */
.proc-trait.se-trace::after{
  animation:proc-tracer 1.05s var(--ease-lame) forwards;
}
@keyframes proc-tracer{ to{ transform:scaleX(1) } }

/* ══════════════════════════════════════════════════════════════════
   METHODOLOGIE — LA SALLE
   ──────────────────────────────────────────────────────────────────
   Repris de l'affiche « Men's Talk Summit » que le proprietaire a
   donnee en reference : une piece construite en grille filaire, des
   panneaux retroeclaires, et deux valeurs seulement — le noir et une
   couleur.

   POURQUOI CA CONVIENT ICI PLUTOT QU'AILLEURS. Une methode est un
   espace qu'on traverse : quatre etapes, dans un ordre, avec un avant
   et un apres. Un sol qui fuit vers un horizon dit exactement ca, sans
   un mot. Sur une section qui n'aurait pas de progression, le meme
   decor ne serait qu'un fond.

   CE QUI EST REPRIS, ET CE QUI NE L'EST PAS. La structure — la
   profondeur, la lumiere, les deux valeurs. Pas le violet, pas le
   halo epais, pas les silhouettes : l'affiche est une piece
   evenementielle qui doit crier sur un fil d'actualite ; une section
   de site se lit assise. On prend le dispositif, pas le volume.

   TROISIEME GRILLE DU SITE, ET C'EST ASSUME. Le tapis de decoupe et
   celui de la fiche sont ORTHOGONAUX et a plat — ce sont des surfaces
   de travail vues de dessus. Celle-ci FUIT vers un horizon : c'est un
   sol, pas une table. Deux dispositifs differents qui se ressemblent
   de loin, comme une regle et un quadrillage.
   ══════════════════════════════════════════════════════════════════ */
#process::after{
  content:''; position:absolute; z-index:0;
  left:50%; bottom:0; width:300%; margin-left:-150%;
  height:62%;
  transform:perspective(560px) rotateX(76deg);
  transform-origin:bottom center;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(var(--accent-rgb),.30) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(90deg,
      rgba(var(--accent-rgb),.22) 0 1px, transparent 1px 74px);
  /* LE SOL S'EFFACE VERS L'HORIZON. Sans ce masque, les lignes se
     resserrent en une bande dense en haut de la perspective et le
     decor devient un mur de moire. La ou l'oeil ne peut plus separer
     deux lignes, il ne doit plus y en avoir. */
  -webkit-mask-image:linear-gradient(to top,
    #000 0%, rgba(0,0,0,.55) 26%, transparent 62%);
  mask-image:linear-gradient(to top,
    #000 0%, rgba(0,0,0,.55) 26%, transparent 62%);
  pointer-events:none;
}
/* Le contenu passe devant le sol. Sans z-index il partagerait le plan
   d'un pseudo-element declare apres lui, et le quadrillage passerait
   par-dessus la typographie. */
#process > *{ position:relative; z-index:1; }

/* ── LE PANNEAU RETROECLAIRE DE CHAQUE ETAPE ──────────────────────
   Sur l'affiche, chaque silhouette se detache sur un panneau lumineux.
   Ici chaque chapitre a le sien : une barre verticale sur son flanc
   gauche, eteinte tant qu'on ne l'a pas atteint, allumee ensuite.

   C'est le meme signal que l'index en accent, dit une seconde fois
   dans une autre grandeur — un point et une ligne. Une etape franchie
   se voit alors du coin de l'oeil, sans avoir a lire son numero. */
.proc-etape::before{
  content:''; position:absolute;
  left:calc(-1 * clamp(14px,2vw,30px)); top:clamp(30px,4.6vh,52px);
  bottom:clamp(26px,4vh,44px); width:2px;
  background:linear-gradient(to bottom,
    rgba(var(--accent-rgb),.55), rgba(var(--accent-rgb),0));
  transform:scaleY(0); transform-origin:top center;
  transition:transform var(--t-long) var(--ease-lame);
}
.proc-etape.est-atteinte::before{ transform:scaleY(1); }

/* Le nom prend un halo quand son chapitre est atteint. Tres faible —
   l'affiche peut se permettre un halo epais, elle se regarde une
   seconde ; un titre de section se lit, et un texte qui brille se lit
   mal. */
.proc-etape .proc-nom{
  transition:text-shadow var(--t-long) var(--ease-pose);
}
.proc-etape.est-atteinte .proc-nom{
  text-shadow:0 0 26px rgba(var(--accent-rgb),.16);
}

@media(max-width:767px){
  #process::after{ height:44%; }
  .proc-etape::before{ left:-14px; }
}