/* ============================================================================
   NTHG SHELL v10 (?v=20260729-shell10) : systeme partage header + footer + animations
   ATTENTION : ne PAS reutiliser shell5, shell6, shell7, shell8 NI shell9 (toutes
   servies au moins une fois, edge CF public max-age=31536000 immutable) :
   ?v=20260729-shell10 est la chaine canonique du 29/07.
   A charger sur TOUTES les pages APRES les CSS existantes :
   <link rel="stylesheet" href="/css/nthg-shell.css?v=20260729-shell10">
   + police display (obligatoire, avec les polices existantes) :
   family=Anton dans l'URL Google Fonts de la page.
   + script compagnon : <script src="/js/nthg-shell.js?v=20260729-shell10" defer></script>

   CLASSES DU SYSTEME (aucun id requis, tout s'initialise par presence de classe) :
   .shl-header        barre fixe pleine largeur (logo gauche, nav centree, CTA droite).
                      Variante .shl-header--hero : posee transparente sur un hero rouge
                      (texte blanc, logo passe en blanc). Etat .c (ajoute au scroll) :
                      fond clair solide + ombre. Burger + panneau .shl-menu en mobile.
   .shl-menu          panneau mobile plein ecran fond rouge (items Anton geants).
   .shl-hero          bande hero rouge degradee (fonce en haut, clair en bas), H1 Anton
                      blanc centre, sous-titre Sora, pilule blanche. .shl-hero-cards =
                      rangee de cartes video pleine largeur en desktop (7-8),
                      4 en mobile, coupees par le bas du hero
                      (formes alternees rectangle arrondi / ovale).
   .shl-stack         conteneur (le <main>) : chaque enfant .shl-panel devient sticky
                      top:0 et la section suivante glisse par-dessus (effet rideau,
                      scroll naturel, aucun detournement de molette). Les panneaux plus
                      hauts que l'ecran recoivent .shl-tall par le JS (repassent en flux).
   .shl-panel         une section empilable du .shl-stack (fond opaque obligatoire).
   .shl-ghost         titre fantome : arrive tres pale + leger translateY, fonce en
                      s'installant quand .in est ajoute (IntersectionObserver).
   .shl-cascade       liste : les enfants apparaissent element par element
                      (fantome -> plein, ~90 ms de decalage chacun) quand .in est ajoute.
   .shl-cards         rail horizontal de cartes cas (scroll-snap). Fleches optionnelles
                      .shl-arr-prev / .shl-arr-next dans la meme section.
   .shl-card          carte cas : media (.shl-card-media) + pilule + titre Anton +
                      puces chiffres (.shl-card-facts).
   .shl-stats         bande rouge, cartes blanches .shl-stat, gros chiffres Anton
                      .shl-num (JS : count-up 900 ms, une seule fois, des l'entree).
   .shl-quote         carte blanche posee sur fond rouge avec 2 cartes fantomes
                      pivotees derriere (+ .shl-arr rondes si plusieurs citations).
   .shl-footer        footer noir : titre geant Anton 2 lignes, colonnes de liens en
                      parentheses, colonne formulaire (.shl-foot-form), annuaire complet
                      (.shl-foot-all), bande basse + wordmark NOTHING geant coupe
                      (.shl-foot-mark : image /img/logo-nothing-white.svg, decoratif, aria-hidden).
   .shl-pill          bouton pilule blanche texte noir uppercase. Variante
                      .shl-pill--red : fond rouge texte blanc.
   prefers-reduced-motion : tout est statique (opacites 1, positions finales).
   ========================================================================== */

:root{
  --shl-r:#B91C30;--shl-rh:#9E1729;--shl-ink:#1a1a1a;--shl-bg:#fafafa;--shl-dk:#0a0a0a;
  --shl-an:'Anton','Arial Narrow',Impact,sans-serif;
  --shl-sa:'Sora','sora-fb',Arial,sans-serif;
  --shl-ez:cubic-bezier(.16,1,.3,1);
}

/* ------------------------------ HEADER ------------------------------ */
.shl-header{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,3.4vw,44px);background:transparent;border:0;border-radius:0;width:auto;margin:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;transition:background .35s var(--shl-ez),box-shadow .35s var(--shl-ez),padding .35s var(--shl-ez)}
.shl-header .shl-logo{display:flex;align-items:center;flex:0 0 auto}
.shl-header .shl-logo img{height:17px;width:auto;display:block;transition:filter .35s var(--shl-ez)}
.shl-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:clamp(10px,1.6vw,26px)}
.shl-link{font-family:var(--shl-sa);font-weight:600;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--shl-ink);white-space:nowrap;padding:8px 2px;transition:opacity .2s;text-decoration:none}
.shl-link::before{content:"( "}
.shl-link::after{content:" )"}
.shl-link:hover{opacity:.6}
.shl-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.shl-cta{display:inline-flex;align-items:center;justify-content:center;font-family:var(--shl-sa);font-weight:700;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;background:#fff;color:#0a0a0a;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:11px 22px;white-space:nowrap;text-decoration:none;transition:transform .2s var(--shl-ez),box-shadow .2s var(--shl-ez)}
.shl-cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.18)}
/* variante posee sur hero rouge : tout en blanc */
.shl-header--hero .shl-link{color:#fff}
.shl-header--hero .shl-logo img{filter:brightness(0) invert(1)}
/* etat scrolle (classe .c ajoutee par le JS, compatible main.js) */
.shl-header.c{background:rgba(250,250,250,.96);box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.07);padding-top:12px;padding-bottom:12px}
.shl-header.c .shl-link{color:var(--shl-ink)}
.shl-header.c .shl-logo img{filter:none}
.shl-header.c .shl-cta{border-color:rgba(0,0,0,.16)}
/* burger */
.shl-burger{display:none;background:none;border:0;cursor:pointer;padding:10px;margin:-6px -6px -6px 0}
.shl-burger svg{width:22px;height:22px;stroke:var(--shl-ink);stroke-width:2.2;stroke-linecap:round;display:block}
.shl-header--hero:not(.c) .shl-burger svg{stroke:#fff}
/* panneau mobile plein ecran rouge */
.shl-menu{position:fixed;inset:0;z-index:200;background:linear-gradient(180deg,#8f1425,var(--shl-r));display:none;flex-direction:column;align-items:flex-start;justify-content:center;padding:88px clamp(24px,8vw,60px) 48px;opacity:0;transition:opacity .3s}
.shl-menu.open{display:flex;opacity:1}
.shl-menu nav{display:flex;flex-direction:column;gap:6px;width:100%}
.shl-menu nav a{font-family:var(--shl-an);font-weight:400;font-size:clamp(2.2rem,9vw,3.4rem);line-height:1.12;letter-spacing:.01em;text-transform:uppercase;color:#fff;text-decoration:none}
.shl-menu nav a:hover{color:rgba(255,255,255,.75)}
.shl-menu .shl-cta{margin-top:30px;font-size:.8rem;padding:14px 30px}
.shl-menu .shl-lang{margin-top:18px;color:#fff;font-family:var(--shl-sa);font-weight:600;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
.shl-menu .shl-lang::before{content:"( "}.shl-menu .shl-lang::after{content:" )"}
.shl-menu-close{position:absolute;top:22px;right:22px;background:none;border:0;cursor:pointer;padding:10px}
.shl-menu-close svg{width:26px;height:26px;stroke:#fff;stroke-width:2.2;stroke-linecap:round;display:block}
@media(max-width:960px){
  .shl-nav{display:none}
  .shl-actions .shl-lang{display:none}
  .shl-actions .shl-cta{display:none}
  .shl-burger{display:block}
}

/* ------------------------------ HERO -------------------------------- */
.shl-hero{position:relative;overflow:hidden;min-height:92svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;background:linear-gradient(180deg,#4d0a14 0%,#8f1425 34%,var(--shl-r) 62%,#d97985 88%,#eec6cb 100%);color:#fff;padding:clamp(110px,14vh,170px) 20px 0}
.shl-hero-inner{max-width:900px;margin:0 auto auto;position:relative;z-index:2}
.shl-hero h1{font-family:var(--shl-an);font-weight:400;text-transform:uppercase;font-size:clamp(2.5rem,6.4vw,5rem);line-height:1.04;letter-spacing:.005em;color:#fff;margin:0 0 20px;text-shadow:0 2px 30px rgba(0,0,0,.25);text-wrap:balance}
.shl-hero h1 em{font-style:normal;color:#fff}
.shl-hero-sub{font-family:var(--shl-sa);font-size:clamp(.92rem,1.2vw,1.05rem);line-height:1.7;color:rgba(255,255,255,.92);max-width:660px;margin:0 auto 30px}
/* .shl-seg : segment de phrase insecable en bloc (les lignes se coupent aux
   frontieres naturelles de la phrase, jamais sur un mot orphelin) */
.shl-hero-sub .shl-seg{display:inline-block;max-width:100%;text-wrap:balance}
.shl-hero-sub strong{color:#fff}
.shl-pill{display:inline-flex;align-items:center;justify-content:center;font-family:var(--shl-sa);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;background:#fff;color:#0a0a0a;border-radius:999px;padding:15px 34px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s var(--shl-ez),box-shadow .2s var(--shl-ez)}
.shl-pill:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.shl-pill--red{background:var(--shl-r);color:#fff}
.shl-pill--red:hover{background:var(--shl-rh);box-shadow:0 12px 30px rgba(185,28,48,.3)}
/* rangee de videos influenceurs verticales (9/16) sur TOUTE la largeur du hero
   en desktop (7-8 tuiles flexibles, plafond 220px), 4 tuiles en mobile.
   Formes alternees rectangle 24px / ovale, alignees sur une ligne reguliere,
   ancrees au bord bas du hero et coupees par lui (marge negative + clip hero) */
.shl-hero-cards{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,1.4vw,20px);margin-top:clamp(34px,5vh,64px);margin-bottom:calc(-1 * clamp(48px,8vh,88px));width:100vw;margin-left:calc(50% - 50vw);padding:0 clamp(10px,1.4vw,24px)}
.shl-hcard{flex:1 1 0;min-width:0;max-width:220px;aspect-ratio:9/16;overflow:hidden;background:#2a0d12;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.shl-hcard video,.shl-hcard img{width:100%;height:100%;object-fit:cover;display:block}
.shl-hcard:nth-child(odd){border-radius:24px}
.shl-hcard:nth-child(even){border-radius:50%}
@media(max-width:640px){
  .shl-hero{min-height:86svh}
  /* VF-0728 #5 : main-enhanced.css ecrase le padding des <section> en mobile
     (section{padding-top:clamp(2.5rem,8vw,4rem)!important}) : le H1 montait sous
     le wordmark de la barre. On re-force ici (feuille chargee apres). */
  .shl-hero{padding-top:clamp(96px,13vh,116px)!important}
  .shl-hero-cards{justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:10px;padding:0 16px;margin-bottom:-36px}
  .shl-hero-cards::-webkit-scrollbar{display:none}
  .shl-hcard{flex:0 0 auto;max-width:none;height:250px}
  /* mobile : 4 videos maximum, comme avant la rangee pleine largeur */
  .shl-hcard:nth-child(n+5){display:none}
}

/* ------------------------- EMPILEMENT (rideau) ----------------------- */
/* le fix mobile historique (html,body{overflow-x:hidden}) transforme body en
   conteneur de defilement et tue position:sticky ; clip coupe pareil sans
   creer de scroll container. */
html,body{overflow-x:clip!important}
.shl-stack{position:relative}
.shl-stack > .shl-panel{position:sticky;top:0}
:where(.shl-stack > .shl-panel){background:var(--shl-bg)}
.shl-stack > .shl-panel.shl-tall{position:relative;top:auto}
.shl-panel{overflow:hidden}
.shl-stack [id],.shl-footer [id]{scroll-margin-top:84px}
.shl-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}

/* ------------------------- TITRES + CASCADE -------------------------- */
/* unification : les titres de section historiques (.sht) passent sur le
   display Anton du systeme (coherence sur toutes les pages du site) */
html body .sht{font-family:var(--shl-an);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.08;font-size:clamp(1.9rem,4.2vw,3.2rem)}
html body .sht em{font-style:normal;color:var(--shl-r)}
.shl-title{font-family:var(--shl-an);font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.06;letter-spacing:.005em;color:var(--shl-ink);margin:0;text-wrap:balance}
.shl-title em{font-style:normal;color:var(--shl-r)}
.shl-sub{font-family:var(--shl-sa);font-size:clamp(.92rem,1.15vw,1.02rem);color:#4a4a4a;line-height:1.7;max-width:62ch;margin:16px 0 0;text-wrap:pretty}
.shl-ghost{opacity:.13;transform:translateY(16px);transition:opacity .9s var(--shl-ez),transform .9s var(--shl-ez)}
.shl-ghost.in{opacity:1;transform:none}
.shl-cascade > *{opacity:.15;transform:translateY(16px);transition:opacity .65s var(--shl-ez),transform .65s var(--shl-ez)}
.shl-cascade.in > *{opacity:1;transform:none}
.shl-cascade.in > *:nth-child(2){transition-delay:.09s}
.shl-cascade.in > *:nth-child(3){transition-delay:.18s}
.shl-cascade.in > *:nth-child(4){transition-delay:.27s}
.shl-cascade.in > *:nth-child(5){transition-delay:.36s}
.shl-cascade.in > *:nth-child(6){transition-delay:.45s}
.shl-cascade.in > *:nth-child(7){transition-delay:.54s}
.shl-cascade.in > *:nth-child(8){transition-delay:.63s}
.shl-cascade.in > *:nth-child(9){transition-delay:.72s}
.shl-cascade.in > *:nth-child(10){transition-delay:.81s}

/* ------------------------- CARTES CAS (rail) ------------------------- */
.shl-cases{padding:clamp(72px,9vw,120px) 0;background:var(--shl-bg)}
.shl-cases-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.shl-cards-nav{display:flex;gap:10px;flex:0 0 auto}
.shl-arr{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(0,0,0,.18);background:#fff;color:var(--shl-ink);font-size:1.05rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.shl-arr:hover{background:var(--shl-r);border-color:var(--shl-r);color:#fff}
.shl-cards{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px clamp(20px,5vw,48px) 26px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.shl-cards::-webkit-scrollbar{display:none}
/* carte cas VERTICALE (3/4.5) : video pleine carte, texte par-dessus en bas
   sur voile de lisibilite, zero puce decorative */
.shl-card{position:relative;flex:0 0 min(74vw,340px);aspect-ratio:3/4.5;scroll-snap-align:start;background:#1a1a1a;border:0;border-radius:22px;overflow:hidden;text-decoration:none;color:#fff;box-shadow:0 10px 34px rgba(0,0,0,.12);transition:transform .4s var(--shl-ez),box-shadow .4s var(--shl-ez);display:block}
.shl-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.22)}
.shl-card-media{position:absolute;inset:0;background:#1a1a1a;overflow:hidden}
.shl-card-media video,.shl-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shl-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.26) 62%,rgba(0,0,0,.82) 100%)}
.shl-card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px}
.shl-card-pill{align-self:flex-start;font-family:var(--shl-sa);font-weight:600;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:5px 12px;background:rgba(0,0,0,.22)}
/* garde-fou VF-0728 #7 : titre de carte sur UNE seule ligne, toujours
   (nowrap + ellipsis ; les co-artistes vont dans la description, pas le titre) */
.shl-card-t{font-family:var(--shl-an);font-weight:400;text-transform:uppercase;font-size:1.18rem;line-height:1.2;letter-spacing:.01em;margin:0;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.shl-card-t em{font-style:normal;color:#fff}
.shl-card-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.shl-card-facts li{font-family:var(--shl-sa);font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.88);padding-left:0}
.shl-cases-foot{text-align:center;margin-top:26px}

/* --------------------------- BANDE CHIFFRES -------------------------- */
.shl-stats{background:var(--shl-r);color:#fff;padding:clamp(64px,8vw,104px) 0}
.shl-stats-title{font-family:var(--shl-an);font-weight:400;text-transform:uppercase;text-align:center;font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.1;color:#fff;margin:0 0 clamp(34px,4.5vw,54px);text-wrap:balance}
/* VF-0728 #6 : la grille s'adapte au nombre de tuiles (3 chiffres agence sur
   l'accueil, 4 ailleurs) : plus de colonne fantome quand une tuile part */
.shl-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.shl-stat{background:#fff;color:var(--shl-ink);border-radius:18px;padding:clamp(22px,2.6vw,34px) clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:8px;min-height:150px;justify-content:flex-start;align-items:flex-start}
.shl-num{font-family:var(--shl-an);font-weight:400;font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.shl-num-s{color:var(--shl-r)}
.shl-stat-l{font-family:var(--shl-sa);font-size:.8rem;color:#4a4a4a;line-height:1.4}
.shl-stat-l2{font-family:var(--shl-sa);font-size:.7rem;color:#8a8a8a;line-height:1.35}
@media(max-width:960px){.shl-stats-grid{grid-template-columns:1fr 1fr}.shl-stats-grid > .shl-stat:nth-child(3):last-child{grid-column:1/-1;max-width:calc(50% - 8px);width:100%;margin:0 auto}}
@media(max-width:480px){.shl-stats-grid{grid-template-columns:1fr 1fr;gap:10px}.shl-stat{min-height:120px}.shl-stats-grid > .shl-stat:nth-child(3):last-child{max-width:calc(50% - 5px)}}

/* ------------------------------ METHODE ------------------------------ */
.shl-method{background:#fff;padding:clamp(72px,9vw,120px) 0}
.shl-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,72px);align-items:start}
.shl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.shl-steps li{display:grid;grid-template-columns:64px 1fr;column-gap:18px;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.shl-steps li:first-child{border-top:1px solid rgba(0,0,0,.08)}
.shl-step-n{grid-row:1/3;font-family:var(--shl-sa);font-weight:600;font-size:.74rem;letter-spacing:.06em;color:var(--shl-r);padding-top:.5em}
.shl-step-n::before{content:"( "}.shl-step-n::after{content:" )"}
/* VF-0728 #12 : les titres d'etape suivent le traitement unique des H3 :
   Sora semi-gras, casse de phrase (le display Anton reste aux H1/H2) */
.shl-steps h3{font-family:var(--shl-sa);font-weight:600;text-transform:none;font-size:1.05rem;line-height:1.3;letter-spacing:0;margin:0 0 6px}
.shl-steps p{font-family:var(--shl-sa);font-size:.86rem;color:#4a4a4a;line-height:1.6;margin:0}
@media(max-width:860px){.shl-split{grid-template-columns:1fr;gap:26px}}

/* ------------------------------ CITATION ----------------------------- */
.shl-quote{background:var(--shl-r);padding:clamp(72px,9vw,120px) 0;position:relative;overflow:hidden}
.shl-quote .shl-title{color:#fff;text-align:center;margin-bottom:clamp(34px,4.5vw,54px)}
.shl-quote-stage{position:relative;max-width:760px;margin:0 auto}
.shl-quote-card{position:relative;z-index:2;background:#fff;color:var(--shl-ink);border-radius:18px;padding:clamp(28px,4vw,48px);box-shadow:0 26px 70px rgba(0,0,0,.28);font-family:var(--shl-sa);font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.75;text-align:center}
.shl-quote-stage::before,.shl-quote-stage::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55);border-radius:18px;z-index:0}
.shl-quote-stage::before{transform:rotate(-3.2deg) translateY(10px)}
.shl-quote-stage::after{transform:rotate(2.4deg) translateY(14px);background:rgba(255,255,255,.35)}
.shl-quote .shl-arr{border-color:rgba(255,255,255,.6);background:transparent;color:#fff}
.shl-quote .shl-arr:hover{background:#fff;color:var(--shl-r)}

/* ------------------------------ FOOTER ------------------------------- */
.shl-footer{position:relative;z-index:5;background:var(--shl-dk);color:#fff;padding:clamp(64px,8vw,110px) 0 0;overflow:hidden}
.shl-foot-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,90px);align-items:start}
.shl-foot-title{font-family:var(--shl-an);font-weight:400;text-transform:uppercase;font-size:clamp(2.6rem,6vw,4.8rem);line-height:1.02;letter-spacing:.005em;color:#fff;margin:0 0 clamp(28px,3.5vw,46px)}
.shl-foot-cols{display:flex;gap:clamp(28px,4vw,64px);flex-wrap:wrap}
.shl-foot-nav{display:flex;flex-direction:column;gap:12px}
.shl-foot-nav a{font-family:var(--shl-sa);font-weight:600;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.85);text-decoration:none;transition:color .2s}
.shl-foot-nav a::before{content:"( "}.shl-foot-nav a::after{content:" )"}
.shl-foot-nav a:hover{color:#fff}
/* colonne formulaire (landing) / bouton (pages interieures) */
.shl-foot-form{display:flex;flex-direction:column;gap:6px}
.shl-foot-form .shl-form-k{font-family:var(--shl-sa);font-weight:600;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 4px}
.shl-foot-form .shl-form-k::before{content:"( "}.shl-foot-form .shl-form-k::after{content:" )"}
/* VF-0728 #11 : chaque label de groupe (NOM, EMAIL, VOTRE BESOIN, BUDGET,
   MESSAGE...) respire pareil au-dessus du contenu qui precede */
.shl-form label.shl-form-k{display:block;margin-top:30px}
.shl-form fieldset legend.shl-form-k{margin-bottom:2px}
.shl-form input[type=text],.shl-form input[type=email],.shl-form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);border-radius:0;color:#fff;font-family:var(--shl-sa);font-size:.95rem;padding:10px 2px 12px;outline:none;transition:border-color .2s}
.shl-form input:focus,.shl-form textarea:focus{border-color:#fff}
.shl-form input::placeholder,.shl-form textarea::placeholder{color:rgba(255,255,255,.3)}
.shl-form textarea{resize:vertical;min-height:84px}
.shl-form fieldset{border:0;padding:0;margin:30px 0 0}
.shl-form legend{padding:0}
.shl-form .shl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.shl-form .shl-chip{position:relative;cursor:pointer;font-family:var(--shl-sa);font-size:.76rem;font-weight:500;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:8px 15px;transition:all .2s}
.shl-form .shl-chip:hover{border-color:rgba(255,255,255,.6);color:#fff}
.shl-form .shl-chip input{position:absolute;opacity:0;pointer-events:none}
.shl-form .shl-chip:has(input:checked){background:#fff;border-color:#fff;color:#0a0a0a;font-weight:600}
.shl-form .shl-consent{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font-family:var(--shl-sa);font-size:.72rem;color:rgba(255,255,255,.6);line-height:1.55;cursor:pointer}
.shl-form .shl-consent input{margin-top:3px;accent-color:var(--shl-r);flex:0 0 16px;width:16px;height:16px}
.shl-form .shl-consent a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.shl-form .shl-pill{margin-top:24px;align-self:flex-start}
.shl-foot-alt{display:flex;flex-direction:column;gap:14px;margin-top:26px;font-family:var(--shl-sa);font-size:.8rem;color:rgba(255,255,255,.6)}
.shl-foot-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* annuaire complet (tous les liens du site) */
.shl-foot-all{margin-top:clamp(44px,5vw,70px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.shl-foot-all h4{font-family:var(--shl-sa);font-weight:600;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.42);margin:0 0 12px}
.shl-foot-all ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.shl-foot-all a{font-family:var(--shl-sa);font-size:.74rem;color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s}
.shl-foot-all a:hover{color:#fff}
/* bande basse + wordmark geant coupe */
.shl-foot-bottom{margin-top:clamp(36px,4vw,56px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.shl-foot-bottom a,.shl-foot-bottom span{font-family:var(--shl-sa);font-weight:600;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.6);text-decoration:none}
.shl-foot-bottom a::before,.shl-foot-bottom .shl-year::before{content:"( "}
.shl-foot-bottom a::after,.shl-foot-bottom .shl-year::after{content:" )"}
.shl-foot-bottom a:hover{color:#fff}
.shl-foot-bottom .shl-copy{margin-left:auto;text-transform:none;letter-spacing:.01em;font-weight:400;color:rgba(255,255,255,.4)}
/* wordmark image : VRAI logo Nothing blanc VECTORISE (SVG, net a toute taille,
   viewBox 0 0 3200 863.86), geant, centre, coupe par le bas du footer.
   Markup canonique :
   <div class="shl-foot-mark" aria-hidden="true"><img src="/img/logo-nothing-white.svg" alt="" width="3200" height="864" loading="lazy" decoding="async"></div> */
.shl-foot-mark{display:flex;justify-content:center;align-items:flex-start;overflow:hidden;height:clamp(64px,11vw,236px);margin-top:clamp(20px,3vw,36px);user-select:none;pointer-events:none}
.shl-foot-mark img{display:block;width:74vw;min-width:60vw;max-width:80vw;height:auto;aspect-ratio:3200/864}
@media(max-width:960px){
  .shl-foot-grid{grid-template-columns:1fr}
  .shl-foot-all{grid-template-columns:1fr 1fr}
  .shl-foot-bottom .shl-copy{margin-left:0;width:100%}
}

/* FAQ : questions en Sora 600 (ce fichier charge apres main.css) */
html body .faq__q{font-family:var(--shl-sa);font-weight:600}

/* ------------------- SYSTEME DE CASSE (VF-0728 #12) ------------------- */
/* UN seul systeme sur tout le site :
   - H1 / H2 / titres de section = Anton MAJUSCULES (.shl-title, .sht,
     .shl-stats-title, .shl-foot-title + gros titres historiques ci-dessous) ;
   - H3 / sous-titres = Sora semi-gras, casse de phrase (jamais uppercase) ;
   - eyebrows / labels = Sora petites capitales, interlettrage uniforme.
   Jamais d'alternance maj / pas-maj entre deux sections voisines. */
html body .vc-title,html body .mc-title{font-family:var(--shl-an);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.08}
html body .vc-title em,html body .mc-title em{font-style:normal}
html body .stp h3,html body .sc h3,html body .cs-name,html body .cs-kn,html body .bab h3{font-family:var(--shl-sa);font-weight:600;text-transform:none}
html body .she,html body .bai-cat,html body .bac,html body .mql,html body .cf-label,html body .ftc h4{font-family:var(--shl-sa);font-weight:600;text-transform:uppercase;letter-spacing:.1em}

/* --------------------- REDUCED MOTION : tout statique ---------------- */
@media(prefers-reduced-motion:reduce){
  .shl-ghost,.shl-cascade > *{opacity:1!important;transform:none!important;transition:none!important}
  .shl-stack > .shl-panel{position:relative;top:auto}
  .shl-cards{scroll-behavior:auto}
  .shl-header,.shl-cta,.shl-pill,.shl-card{transition:none}
}

/* ======================================================================
   v8 (20260729-shell8) : corrections QA proprietaire du 29/07
   ====================================================================== */

/* ---- D. EMPILEMENT : les bandes pleine largeur passent au dessus du hero
   Sur les pages interieures, nthg-shell-page.css epingle le hero
   (.shl-stack > .shl-hero.shl-panel{position:sticky}) et fait glisser le
   contenu par dessus via .shl-panel:not(.shl-hero){z-index:2}. Ce lift ne
   vise QUE les .shl-panel : une bande pleine largeur intercalee qui n'est
   pas un panneau (bandeau logos labels .atm-mq, bande artistes
   .atm-artists) restait statique, donc peinte SOUS le hero epingle qui,
   lui, est positionne. Resultat : en descendant, le hero rouge se voyait
   a la place de la bande. C'est le bug signale sur /promo-musique-tiktok/.
   Le fond de ces bandes etait deja opaque : seul l'ordre de peinture etait
   en cause, on ne corrige donc que l'empilement.
   .shl-band = le crochet generique a poser sur toute future bande
   pleine largeur intercalee entre deux panneaux.
   Specificite NULLE (:where) : un z-index deja declare gagne (footer :5). */
:where(.shl-stack > .shl-band,
       .shl-stack > .atm-mq,
       .shl-stack > .atm-artists){position:relative;z-index:2}

/* ---- A. BLOC "EN BREF" (.tldr) : recentre dans le gabarit --------------
   L'ancien hero centrait .hero__c par flex (.hero{display:flex;
   align-items:center}). Depuis la refonte le bloc vit dans une bande
   .shl-rest, qui est un bloc simple : .hero__c{max-width:780px} sans
   marges auto tombait donc a fond a gauche, hors gabarit. */
.shl-rest .hero__c{max-width:860px;margin-left:auto;margin-right:auto}
.shl-stack .tldr{
  max-width:820px;
  margin:clamp(18px,3vw,30px) auto clamp(26px,4vw,40px);
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  border-left:3px solid var(--shl-r);
  border-radius:14px;
  padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px);
  box-shadow:0 6px 24px rgba(0,0,0,.05);
  font-family:var(--shl-sa);font-size:.95rem;line-height:1.7;
  color:#333;text-align:left
}
.shl-stack .tldr strong{
  display:block;margin:0 0 8px;
  font-family:var(--shl-sa);font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--shl-r)
}

/* ---- G. AUCUN ITALIQUE DANS LES TITRES DISPLAY ANTON -------------------
   main.css declare .ctaBlk h2 em{font-style:italic} (0-1-2), qui battait
   .shl-t2 em{font-style:normal} (0-1-1, nthg-shell-page.css). Anton n'a pas
   d'italique : le navigateur synthetisait une oblique, et le cisaillement
   collait optiquement le segment accentue au mot suivant
   ("...LEVEL UPVOTRE MARKETING GAMING ?").
   On ne touche QUE font-style : la couleur de chaque em reste celle que la
   page lui donne deja (rouge sur les CTA, encre sur les titres sobres). */
html body .shl-t2 em,html body .ctaBlk h2 em{font-style:normal}

/* ======================================================================
   v10 (20260729-shell10) : vague 3 du 29/07 (QA proprietaire)
   Chantiers : 4 rythme vertical, 5 panneaux pleine largeur, 6 grilles
   secteurs, 7 wordmark du footer + lien Cookies, 2 cartes campagnes.
   ====================================================================== */

/* ---- H. RYTHME VERTICAL GLOBAL (chantier 4 : "trop colle") -----------
   UNE seule regle pour tout le parc :
   - un titre de section qui SUIT du contenu reprend 64 a 80 px d'air ;
   - le paragraphe qui SUIT un titre descend de 24 a 32 px.
   L'eyebrow (.she, .shl-hero-k, .bai-cat) reste colle a son titre :
   c'est une etiquette, pas du contenu. */
.shl-stack :is(p,ul,ol,ol li,figure,table,blockquote,div,section,article)
  + :is(.sht,.shl-t2,.shl-title,.shl-stats-title){
  margin-top:clamp(64px,7vw,80px)
}
.shl-stack :is(.she,.shl-hero-k,.bai-cat,.bac,.mql)
  + :is(.sht,.shl-t2,.shl-title,.shl-stats-title){
  margin-top:0
}
.shl-stack :is(.sht,.shl-t2,.shl-title,.shl-stats-title)
  + :is(p,ul,ol,.shd,.lead){
  margin-top:clamp(24px,2.6vw,32px)
}
.shl-stack .sh .shd{margin-top:clamp(24px,2.6vw,32px)}
.shl-stack .sh .she{margin-bottom:clamp(16px,1.8vw,22px)}

/* ---- I. PANNEAUX PLEINE LARGEUR (chantier 5 : "la page est etroite") --
   Motif corrige : un .shl-panel a qui la page donne un max-width (760 a
   880 px) + margin auto. Le panneau peignait alors une bande claire
   ETROITE au milieu du fond blanc du body : la page paraissait coincee.
   Regle : le panneau reprend toute la largeur avec son fond clair opaque,
   et c'est un padding lateral qui recree la colonne de lecture centree
   (900 px). Les marges verticales passent en padding pour que deux
   panneaux clairs se touchent sans liseres blancs.
   .shl-flush = le crochet a poser sur tout futur panneau de ce motif ;
   les classes listees ensuite sont l'inventaire du parc au 29/07
   (faq / comparatif-agences-tiktok-paris / nothing-vs-* / pourquoi-nothing). */
.shl-stack > .shl-flush,
.shl-stack > .faq-hero,.shl-stack > .faq-wrap,
.shl-stack > .cmp-hero,.shl-stack > .cmp-wrap,
.shl-stack > .wh-hero,.shl-stack > .wh-wrap,
.shl-stack > .wh-clients,.shl-stack > .wh-cta{
  max-width:none;width:auto;
  margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;
  border-radius:0;
  padding-left:max(20px,calc(50% - 450px));
  padding-right:max(20px,calc(50% - 450px));
  padding-top:clamp(34px,4.5vw,58px);
  padding-bottom:clamp(34px,4.5vw,58px)
}
/* les enfants deja centres le restent : leur max-width se lit maintenant
   a l'interieur de la colonne, plus contre le bord de l'ecran */
.shl-stack > .shl-flush > *,
.shl-stack > .faq-wrap > *,.shl-stack > .cmp-wrap > *,.shl-stack > .wh-wrap > *{
  max-width:100%
}

/* ---- J. GRILLES DES PAGES SECTEURS (chantier 6 : "pas centre") --------
   .vert-feat-grid etait fige a 3 colonnes : une grille de 4 tuiles
   (etudes de cas, KPIs, tendances) laissait une tuile orpheline calee a
   gauche. En auto-fit la grille s'equilibre d'elle-meme (4 / 3 / 2 / 1)
   et reste centree quel que soit le nombre de tuiles. */
.shl-stack .vert-feat-grid{
  grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  justify-content:center;align-items:stretch
}
@media(max-width:560px){.shl-stack .vert-feat-grid{grid-template-columns:1fr}}
/* crochet generique : centrer la derniere ligne d'une grille auto-fit */
.shl-grid-center{justify-content:center}

/* ---- K. WORDMARK DU FOOTER (chantier 7 : "un trait noir dessous") -----
   Le wordmark geant doit etre coupe NET par le bas du document : plus
   aucune bande noire dessous. Trois causes fermees d'un coup :
   1. le conteneur repasse en display:block avec line-height/font-size a 0
      (aucun espace de ligne residuel sous une image de bloc) ;
   2. le footer et le conteneur n'ont aucune marge/padding bas ;
   3. plus rien ne peut etre injecte APRES le wordmark : le lien de
      revocation cookies vit desormais dans .shl-foot-bottom (voir L). */
.shl-foot-mark{
  display:block;overflow:hidden;
  height:clamp(64px,11vw,236px);
  margin:clamp(20px,3vw,36px) 0 0;padding:0;
  font-size:0;line-height:0;
  user-select:none;pointer-events:none
}
.shl-foot-mark img{
  display:block;margin:0 auto;
  width:74vw;min-width:60vw;max-width:80vw;height:auto;
  aspect-ratio:3200/864;vertical-align:bottom
}
.shl-footer{padding-bottom:0}
.shl-footer > .shl-foot-mark:last-child{margin-bottom:0}

/* ---- L. LIEN COOKIES DANS LA LIGNE BASSE DU FOOTER (chantier 7) ------
   Markup canonique (injecte par /js/nthg-consent.js, ou statique) :
   <button type="button" class="shl-foot-cookies" id="nthgCookiesLink">Cookies</button>
   pose dans .shl-foot-bottom, AVANT le .shl-copy. Meme casse, meme
   parentheses et meme couleur que les liens voisins. */
.shl-foot-bottom .shl-foot-cookies{
  font-family:var(--shl-sa);font-weight:600;font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
  background:none;border:0;padding:0;margin:0;
  text-decoration:none;cursor:pointer;
  transition:color .2s
}
.shl-foot-bottom .shl-foot-cookies::before{content:"( "}
.shl-foot-bottom .shl-foot-cookies::after{content:" )"}
.shl-foot-bottom .shl-foot-cookies:hover{color:#fff}
.shl-foot-bottom .shl-foot-cookies:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* filet : jamais de bouton de revocation isole sous le wordmark */
.shl-footer > #nthgCookiesLink,.shl-foot-mark + #nthgCookiesLink{display:none}

/* ---- M. CARTES CAMPAGNES CENTREES (chantier 2) -----------------------
   Rangee de 4 campagnes reelles : capsule carree /img/campaigns/, puis
   le texte SOUS l'image (jamais par-dessus : lisibilite garantie).
   Markup canonique :
   <div class="shl-camps shl-cascade">
     <article class="shl-camp">
       <div class="shl-camp-media"><img src="/img/campaigns/<slug>-capsule.webp" ...></div>
       <div class="shl-camp-body">
         <p class="shl-camp-k">Musique</p>
         <h3 class="shl-camp-t">Jeck "Defaite"</h3>
         <ul class="shl-camp-facts"><li>...</li></ul>
       </div>
     </article>
   </div> */
.shl-camps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:clamp(16px,2vw,24px);
  max-width:1120px;margin:0 auto;justify-content:center
}
@media(max-width:560px){.shl-camps{grid-template-columns:1fr;max-width:400px}}
.shl-camp{
  display:flex;flex-direction:column;text-align:center;
  /* surface volontairement plus claire que le noir des sections sombres
     (.srv est en #0f0f0f sur /agence-tiktok-ads/) : la carte se detache
     aussi bien sur fond clair que sur fond noir */
  background:#1c1c1c;color:#fff;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;overflow:hidden;
  box-shadow:0 10px 34px rgba(0,0,0,.18);
  transition:transform .35s var(--shl-ez),box-shadow .35s var(--shl-ez)
}
.shl-camp:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.2)}
.shl-camp-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#1a1a1a}
.shl-camp-media img{width:100%;height:100%;object-fit:cover;display:block}
.shl-camp-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)
}
.shl-camp-body{
  padding:clamp(16px,1.8vw,22px) clamp(14px,1.6vw,20px) clamp(20px,2.2vw,26px);
  display:flex;flex-direction:column;align-items:center;gap:10px;flex:1 1 auto
}
.shl-camp-k{
  font-family:var(--shl-sa);font-weight:600;font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0
}
.shl-camp-t{
  font-family:var(--shl-an);font-weight:400;text-transform:uppercase;
  font-size:1.12rem;line-height:1.18;letter-spacing:.01em;
  margin:0;color:#fff;text-wrap:balance
}
.shl-camp-t em{font-style:normal;color:#fff}
.shl-camp-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;width:100%}
.shl-camp-facts li{
  font-family:var(--shl-sa);font-size:.79rem;line-height:1.5;
  color:rgba(255,255,255,.9);text-wrap:pretty
}
.shl-camp-facts strong{font-weight:700;color:#fff}