/* =====================================================================
   SNAZZY* — THÈME CLAIR v2 « tri-couleur » (v3.0.1) — Snazzy Digital Agency
   Système de fonds STRICT : BLANC #fff · NOIR #000 · KLEIN #4002f6.
   Zéro gris, zéro crème : le blanc est pur, le noir ponctue, le klein
   signe. Harmonisé sur TOUTES les pages (accueil, services, agence,
   réalisations, labo, app, audit). Filets brutalist noirs (--edge)
   partout, placeholders teintés klein (jamais gris).
   Rythme accueil : KLEIN (hero) → BLANC (pôles) → NOIR (manifeste+stats)
   → BLANC (suivez-nous) → KLEIN (faq) → BLANC (contact) → KLEIN (footer).
   Option « light_mode » à 0 = thème sombre historique intact.
   ===================================================================== */

:root{
  --paper:#fff;                 /* tue le crème PARTOUT (2 usages : .sx-reveal + carte audit) */
  --ink:#0a0a12;
  --tint1:#e9e4ff;              /* placeholders : teinte klein claire (pas de gris) */
  --tint2:#f4f1ff;
}

/* ---------------------------------------------------------------------
   ACCUEIL — coquille : blanc pur. Hero : VRAI klein #4002f6 (celui de la
   DA), dégradé lumineux sans plage bleu nuit.
   --------------------------------------------------------------------- */
.sx-body{background:#fff;color:var(--ink)}
body.sx-body{background:#fff;color:var(--ink)}

/* v3.1.9 : hero en KLEIN PUR #4002f6, aplat franc — fini la dérive
   violette du dégradé (#5b24ff). La profondeur vient du canvas 3D. */
.sx-stage{background:#4002f6}
.sx-pill{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------------------------------------------------------------------
   PÔLES — section BLANCHE, cartes blanches à cadre noir brutalist,
   vidéos claires + voile blanc dégradé + texte encre.
   --------------------------------------------------------------------- */
.sx-hwrap{background:#fff}
.sx-body .sx-htop h2{color:var(--ink)}
.sx-body .sx-eyebrow{color:var(--ink);opacity:.55}

.sx-card{
  background:#fff;
  border:var(--edge) solid var(--black);
  box-shadow:0 24px 60px -38px rgba(64,2,246,.35);
}
.sx-card .pn{background:radial-gradient(120% 100% at 30% 18%, var(--tint2) 0%, var(--tint1) 58%, #cbc3ff 100%)}
.sx-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 24%),
    linear-gradient(0deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.62) 30%, rgba(255,255,255,0) 62%);
}
.sx-body .sx-card h3,.sx-body .sx-card p,
.sx-body .sx-card .num,.sx-body .sx-card .tag,
.sx-body .sx-card .go{color:var(--ink)}

/* ---------------------------------------------------------------------
   MANIFESTE + STATS — section NOIRE (la ponctuation du rythme).
   .stats a un filet currentColor -> devient blanc tout seul.
   Le surlignage klein de « inoubliable. » claque sur le noir.
   --------------------------------------------------------------------- */
.sx-reveal{background:var(--black);color:#fff}

/* ---------------------------------------------------------------------
   SUIVEZ-NOUS — section BLANCHE, cadres noirs brutalist, remplissages
   couleur au survol (texte blanc, sauf aqua/lime -> noir).
   --------------------------------------------------------------------- */
.follow{background:#fff;color:var(--ink)}
.follow-aster{color:rgba(64,2,246,.14)}
.fstat{border:var(--edge) solid var(--black);background:#fff}
.fstat:hover .fs-meta,.fstat:hover .fs-meta b,.fstat:hover .fs-meta i,
.fstat:hover .fs-n,.fstat:hover .fs-ico,.fstat:hover .fs-go{color:#fff}
.fstat[data-acc="aqua"]:hover .fs-meta,.fstat[data-acc="aqua"]:hover .fs-meta b,
.fstat[data-acc="aqua"]:hover .fs-meta i,.fstat[data-acc="aqua"]:hover .fs-n,
.fstat[data-acc="aqua"]:hover .fs-ico,.fstat[data-acc="aqua"]:hover .fs-go{color:#000}
.post{border:var(--edge) solid var(--black);background:#fff}
.post-media{background:repeating-linear-gradient(135deg,var(--tint1) 0 16px,var(--tint2) 16px 32px)}
.post-tag,.post-likes{color:var(--ink)}
.post:hover{border-color:var(--klein)}

/* ---------------------------------------------------------------------
   FAQ — section KLEIN (le moment bleu du milieu de page), texte blanc,
   filets blancs, survol/ouvert lime (comme les rubans du footer).
   --------------------------------------------------------------------- */
.sx-faq{background:var(--klein);color:#fff}
.sx-faq-list{border-top:var(--edge) solid rgba(255,255,255,.45)}
.sx-faq-item{border-bottom:var(--edge) solid rgba(255,255,255,.45)}
.sx-faq-q:hover{color:var(--lime)}
.sx-faq-item[open] .sx-faq-q{color:var(--lime)}
.sx-faq-a p{opacity:.94}

/* ---------------------------------------------------------------------
   CONTACT — section BLANCHE : l'énorme typographie noire respire,
   le magnet klein devient le point focal.
   --------------------------------------------------------------------- */
.contact{background:#fff;color:var(--ink)}
.contact .lead{color:var(--klein)}
.contact .rows{border-top:var(--edge) solid var(--black)}

/* ---------------------------------------------------------------------
   SECTIONS NOIRES RESTAURÉES (la palette assume le noir) :
   .clients, .showreel, .sec-dark, .bar--black, .cta-band.dark,
   .page-hero.dark -> styles d'origine (noirs), AUCUNE surcharge ici.
   ---------------------------------------------------------------------
   PLACEHOLDERS MÉDIAS — teintes klein, jamais gris.
   --------------------------------------------------------------------- */
.reel-ph{background:repeating-linear-gradient(135deg,var(--tint1) 0 12px,var(--tint2) 12px 24px);border-color:var(--black)}
.reel-drop{border-color:rgba(64,2,246,.45);color:var(--klein);opacity:.9}
.rcard .media{background:repeating-linear-gradient(135deg,#1a1a1f 0 18px,#232329 18px 36px)} /* showreel reste noir : hachures charbon d'origine, pas gris clair */
.app-shot{background:var(--tint2)}
.phone .scr{background:repeating-linear-gradient(135deg,var(--tint1) 0 14px,var(--tint2) 14px 28px)}
.lab-media-wrap{background:var(--tint2)}
.rz-media-wrap{background:var(--tint2)}

/* Hero « tech » (page IA) : klein franc, cohérent avec le hero accueil. */
#hero.hero-tech{background:radial-gradient(125% 100% at 50% -12%, #5b24ff 0%, #4002f6 55%, #3200cf 100%)}
.hero-tech .btn{background:#fff;border-color:#fff;color:var(--klein)}

/* ---------------------------------------------------------------------
   FICHE RÉALISATION (.rzs) — hero couleur du projet (identité), corps
   BLANC, filets noirs brutalist, encre.
   --------------------------------------------------------------------- */
.snz-root.rzs{background:#fff;color:var(--ink)}
.rzs-stage{background:#fff;border:var(--edge) solid var(--black);box-shadow:0 30px 70px -44px rgba(64,2,246,.4)}
.rzs-aside-h{color:rgba(10,10,18,.55)}
.rzs-spec{border-top:1px solid var(--black)}
.rzs-spec .k{color:rgba(10,10,18,.55)}
.rzs-spec .v{color:var(--ink)}
.rzs-chips span{border:1px solid var(--black);color:var(--ink)}
.rzs-btn--line{border-color:var(--black);color:var(--ink)}
.rzs-btn--line:hover{background:var(--black);color:#fff;border-color:var(--black)}
.rzs-lead{color:var(--ink)}
.rzs-prose p{color:var(--ink)}

/* =====================================================================
   v3.1.0 — HARMONISATION FINALE (dernier gris/bleu nuit -> tri-couleur)
   ===================================================================== */

/* Réalisations : tuiles bento + fiches — placeholders teintés klein */
.tile .media{background:repeating-linear-gradient(135deg,var(--tint1) 0 18px,var(--tint2) 18px 36px)}
.rz-media--ph{background:repeating-linear-gradient(135deg,var(--tint1) 0 16px,var(--tint2) 16px 32px)}
.rz-single-media{background:var(--tint2);border:var(--edge) solid var(--black)}
.rzs-gallery figure{background:#fff;border:var(--edge) solid var(--black)}

/* Labo : les cartes média gardent leur drame NOIR, mais un noir PUR
   (fini le bleu nuit #0b0b12 / rgba(4,4,12)). */
.lab-media-wrap{background:#000}
.lab-media--ph{background:repeating-linear-gradient(135deg,#111 0 18px,#1c1c1c 18px 36px)}
.lab-scrim{background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.12) 100%)}

/* Lightbox (mode cinéma) : sombre par design, mais noir PUR palette. */
.lab-modal-panel{background:#0a0a0a}
.lm-media,.lm-media .lm-video,.lm-media .lm-img,.lm-left{background:#000}
.lab-modal--light .lm-left{background:#fff;border-right-color:rgba(0,0,0,.12)}
.lab-modal--light .lm-media{background:var(--tint2)}
.lab-modal--light .lm-media .lm-video,.lab-modal--light .lm-media .lm-img{background:var(--tint2)}

/* Audit : jauges & scanner — pistes teintées klein au lieu du gris */
.snzaud-scanner{background:var(--tint1)}
.snzaud-gauge{background:conic-gradient(var(--snzaud-c, var(--klein)) calc(var(--snzaud-p,0)*1%), var(--tint1) 0)}

/* =====================================================================
   v3.1.0 — PACK « VIE » : micro-interactions qui réveillent les pages
   (agence en tête). CSS pur, zéro JS, respect prefers-reduced-motion.
   ===================================================================== */

/* Cartes valeurs (.vcard) — balayage couleur au survol, façon fstat.
   Klein par défaut, variantes lime / flamingo / aqua / sunrise. */
.vcard{transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s}
.vcard::before{content:"";position:absolute;inset:0;background:var(--klein);transform:translateY(101%);transition:transform .5s cubic-bezier(.76,0,.24,1);z-index:0}
.vcard>*{position:relative;z-index:1}
.vcard:hover{transform:translateY(-6px);border-color:var(--klein)}
.vcard:hover::before{transform:translateY(0)}
.vcard:hover h3,.vcard:hover p,.vcard:hover .vnum{color:#fff}
.vcard[data-acc="lime"]::before{background:var(--lime)}
.vcard[data-acc="lime"]:hover{border-color:var(--lime)}
.vcard[data-acc="lime"]:hover h3,.vcard[data-acc="lime"]:hover p,.vcard[data-acc="lime"]:hover .vnum{color:#000}
.vcard[data-acc="flamingo"]::before{background:var(--flamingo)}
.vcard[data-acc="flamingo"]:hover{border-color:var(--flamingo)}
.vcard[data-acc="aqua"]::before{background:var(--aqua)}
.vcard[data-acc="aqua"]:hover{border-color:var(--aqua)}
.vcard[data-acc="aqua"]:hover h3,.vcard[data-acc="aqua"]:hover p,.vcard[data-acc="aqua"]:hover .vnum{color:#000}
.vcard[data-acc="sunrise"]::before{background:var(--sunrise)}
.vcard[data-acc="sunrise"]:hover{border-color:var(--sunrise)}

/* Équipe — photos réelles (nouveau champ v3.1.0) + survol vivant :
   lift, zoom doux de la photo, voile klein hard-light. */
.ph-media .ph-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.ph-media .ph-photo~.ph-i{color:#fff;opacity:.85;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.ph-media .ph-photo~.ph-tag{color:#fff;opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.team{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.team:hover{transform:translateY(-6px)}
.team:hover .ph-photo{transform:scale(1.06)}
.team .ph-media::after{content:"";position:absolute;inset:0;background:var(--klein);opacity:0;mix-blend-mode:hard-light;transition:opacity .4s;pointer-events:none}
.team:hover .ph-media::after{opacity:.30}
.team .ph-media{background:repeating-linear-gradient(135deg,var(--tint1) 0 16px,var(--tint2) 16px 32px)}

/* Chips (agence, services) — inversion encre au survol */
.chips span{transition:background .3s,color .3s,border-color .3s,transform .3s}
.chips span:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}

/* Étapes des pages services — glissement + numéro klein au survol */
.step{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.step:hover{transform:translateX(8px)}

/* Citation (fond noir) — la signature respire en klein clair */
.sec-dark .pquote .by{color:var(--klein-light);opacity:1}

@media (prefers-reduced-motion:reduce){
  .vcard,.vcard::before,.team,.ph-media .ph-photo,.chips span,.step{transition:none}
}

/* =====================================================================
   v3.1.7 — AÉRATION SECTION PÔLES (accueil) — version vérifiée
   Le header est une PILULE FLOTTANTE (marge en haut) : son bas visuel
   est mesuré en JS (navBottom, détection relâchée) et exposé via
   --snz-nav-b. Le titre se place sous la pilule + marge, la réserve
   d'espace des cartes suit, et la largeur des cartes est plafonnée par
   la hauteur disponible (ratio 4/5 préservé). Fallback 140px sans JS.
   ===================================================================== */
/* max(plancher, mesure) : si la mesure JS échoue (0), le PLANCHER garantit
   le dégagement d'une pilule standard ; si elle réussit, on colle au pixel
   (barre d'admin WP incluse quand connecté). */
.sx-hsticky{padding-top:max(clamp(238px,29vh,315px), calc(var(--snz-nav-b, 0px) + clamp(110px,13vh,158px)));padding-bottom:clamp(24px,4vh,48px)}
.sx-htop{top:max(clamp(160px,19.5vh,218px), calc(var(--snz-nav-b, 0px) + clamp(28px,3.5vh,48px)))}
.sx-panel{width:min(78vw,560px,calc((100svh - max(clamp(288px,35vh,375px), var(--snz-nav-b, 0px) + clamp(160px,19vh,220px))) * .8))}
@media(max-width:780px){
  .sx-htop{top:max(clamp(118px,15vh,160px), calc(var(--snz-nav-b, 0px) + clamp(24px,3vh,40px)))}
  .sx-hsticky{padding-top:max(clamp(190px,25vh,255px), calc(var(--snz-nav-b, 0px) + clamp(92px,11vh,130px)))}
  .sx-panel{width:min(82vw,calc((100svh - max(clamp(238px,31vh,315px), var(--snz-nav-b, 0px) + clamp(140px,17vh,190px))) * .8))}
}

/* =====================================================================
   v3.1.5 — CEINTURE : canvas blanc pour TOUTES les pages intérieures.
   Spécificité (0,2,0) > .snz-root du CSS critique inline (0,1,0) :
   même un cache HTML périmé côté hébergeur ne peut plus repeindre les
   pages en bleu nuit. Chaque template porte data-page.
   ===================================================================== */
.snz-root[data-page]{background:#fff;color:var(--ink)}

/* =====================================================================
   v3.2.1 — LOGO HERO +20% (demande DA) : min(62vw,520px) -> ×1.2.
   L'aster 3D suit via scrollhome.js (SIZE ×1.2, perspective F dérivée).
   ===================================================================== */
.sx-intrologo{width:min(74.4vw,624px)}

/* =====================================================================
   v3.4.2 — CONTRASTE : tout ce qui vit sur KLEIN passe en BLANC
   (le thème clair mettait l'encre noire par héritage -> invisible).
   ===================================================================== */
.sx-cue{color:#fff;opacity:.85}
.sx-cue .ar{background:#fff}
.magnet,.magnet .mi{color:#fff}

/* =====================================================================
   v3.5.2 — MOBILE : plus de bande blanche pendant le scrollytelling.
   1) .sx-stage passe en 100dvh (suit le viewport quand la barre d'URL
      mobile se replie) — fallback 100svh conservé.
   2) Ceinture : le wrapper .sx-hero est peint en klein -> même un vide
      transitoire pendant l'animation de la barre est invisible (en
      sombre il l'était déjà, le thème clair l'avait révélé en blanc).
   ===================================================================== */
.sx-hero{background:#4002f6}

/* =====================================================================
   v3.5.3 — TITRE PÔLES = MÊME ÉCHELLE QUE LES AUTRES SECTIONS
   « nos pôles d'expertise » passe au format display des titres du site
   (clamp 40px / 7.2vw / 128px, comme « suivez le mouvement »), desktop
   et mobile. Les réserves d'espace du système fail-safe (3.1.8) sont
   recalibrées pour la nouvelle hauteur (1-2 lignes) : le plafond de
   taille des cartes absorbe le delta, aucune collision possible.
   ===================================================================== */
.sx-htop h2{font-size:clamp(40px,7.2vw,128px);line-height:.92;text-wrap:balance}
.sx-hsticky{padding-top:max(clamp(300px,38vh,430px), calc(var(--snz-nav-b, 0px) + clamp(170px,21vh,270px)))}
.sx-panel{width:min(78vw,560px,calc((100svh - max(clamp(350px,44vh,490px), var(--snz-nav-b, 0px) + clamp(220px,27vh,330px))) * .8))}
@media(max-width:780px){
  .sx-htop h2{font-size:clamp(30px,9vw,46px)}
  .sx-hsticky{padding-top:max(clamp(225px,29vh,300px), calc(var(--snz-nav-b, 0px) + clamp(120px,15vh,170px)))}
  .sx-panel{width:min(82vw,calc((100svh - max(clamp(270px,35vh,360px), var(--snz-nav-b, 0px) + clamp(165px,20vh,225px))) * .8))}
}

/* =====================================================================
   v3.6.0 — CARTES PÔLES « APPLE » (thème clair)
   Fini les cadres noirs : châssis sans bordure, rayon 28px, ombres
   douces multicouches teintées klein, lift + zoom média au survol.
   La vidéo respire sous un scrim blanc dégradé, l'aster devient un
   FILIGRANE subtil dans la couleur du pôle (--c), et un petit aster
   EXPOSANT coloré signe chaque titre — comme le logo l'agence*.
   ===================================================================== */
.sx-card{border:0;border-radius:28px;background:#fff;
  box-shadow:0 1px 2px rgba(16,14,40,.05),0 12px 28px -12px rgba(16,14,40,.14),0 44px 90px -30px rgba(64,2,246,.16);
  transition:transform .55s cubic-bezier(.2,.7,.3,1),box-shadow .55s cubic-bezier(.2,.7,.3,1)}
.sx-card::before,.sx-card::after{content:none}
.sx-panel:hover .sx-card{transform:translateY(-10px);
  box-shadow:0 2px 4px rgba(16,14,40,.05),0 22px 44px -14px rgba(16,14,40,.18),0 70px 130px -34px rgba(64,2,246,.26)}
.sx-cardbg-media{transition:transform 1.1s cubic-bezier(.2,.7,.3,1);filter:saturate(1.04)}
.sx-panel:hover .sx-cardbg-media{transform:scale(1.045)}
/* Scrim : zone de texte propre, façon fiche App Store */
.sx-card .pn{background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.92) 24%,rgba(255,255,255,.45) 46%,rgba(255,255,255,0) 66%)}
/* Grand aster -> filigrane couleur du pôle, discret puis affirmé au survol */
.sx-cast{color:var(--c,#4002f6);opacity:.12;mix-blend-mode:normal;filter:none;
  width:76%;right:-15%;bottom:-13%;left:auto;top:auto;transform:rotate(10deg);
  transition:opacity .5s,transform .8s cubic-bezier(.2,.7,.3,1)}
.sx-panel:hover .sx-cast{opacity:.2;transform:rotate(18deg) scale(1.05)}
.sx-cast-glow{display:none}
/* Aster exposant : la signature l'agence* sur chaque titre */
.sx-card h3 .sx-sup{display:inline-flex;width:.34em;aspect-ratio:1735/1710;flex:none;
  transform:translateY(-.42em);color:var(--c,#4002f6)}
.sx-card h3 .sx-sup svg{width:100%;height:100%;fill:currentColor}
/* Micro-chrome raffiné */
.sx-card .num,.sx-card .tag{color:rgba(10,10,18,.5);opacity:1;font-size:11px}
.sx-card h3,.sx-card .body p{color:var(--ink,#0a0a12)}
.sx-card .body p{opacity:.78}
/* CTA pilule douce, inversion encre au survol */
.sx-card .go{background:rgba(10,10,18,.055);color:var(--ink,#0a0a12);
  border-radius:999px;padding:10px 16px;transition:background .35s,color .35s,transform .35s}
.sx-panel:hover .sx-card .go{background:var(--ink,#0a0a12);color:#fff;transform:translateX(2px)}
.sx-panel:hover .sx-card .go svg{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
  .sx-card,.sx-cardbg-media,.sx-cast,.sx-card .go{transition:none}
}

/* v3.6.1 — vignettes pôles : numéros 01-06 retirés (demande DA) */
.sx-card .num{display:none}

/* =====================================================================
   v3.8.4 — CARTES PÔLES : PLAQUE DE VERRE DÉPOLI (lisibilité + waw)
   Le texte repose sur un panneau glassmorphism flottant en bas de
   carte : flou 20px + saturation, lisible sur n'importe quelle vidéo.
   Tag du haut en mini-pilule verre. Fallback opaque sans backdrop.
   ===================================================================== */
.sx-card .body{position:absolute;left:clamp(12px,1.4vw,18px);right:clamp(12px,1.4vw,18px);bottom:clamp(12px,1.4vw,18px);
  background:rgba(255,255,255,.88);border-radius:20px;padding:clamp(14px,1.8vw,22px);
  border:1px solid rgba(255,255,255,.65);box-shadow:0 10px 30px -12px rgba(16,14,40,.22);
  transition:background .4s,box-shadow .4s}
@supports((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .sx-card .body{background:rgba(255,255,255,.46);-webkit-backdrop-filter:blur(26px) saturate(1.65);backdrop-filter:blur(26px) saturate(1.65)} /* v3.8.6 : -20% de plus, flou renforcé pour garder la lisibilité */
  .sx-panel:hover .sx-card .body{background:rgba(255,255,255,.54)}
}
.sx-panel:hover .sx-card .body{box-shadow:0 16px 40px -14px rgba(16,14,40,.3)}
/* Le voile plein-carte devient un simple souffle de profondeur */
.sx-card .pn{background:linear-gradient(0deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 42%)}
/* Tag catégorie : mini-pilule verre, lisible sur la vidéo */
.sx-card .tag{background:rgba(255,255,255,.78);color:var(--ink,#0a0a12);border-radius:999px;padding:7px 12px;opacity:1}
@supports((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .sx-card .tag{background:rgba(255,255,255,.38);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
}