/* ============================================================
   Brain — Arcade Premium (paper-first)
   ADN commun Super CISO Destroyer + Arcade Customizer :
   paper #f7f5ef / ink #0e0e12, Archivo Black + Rubik,
   skew -8°, bordures 4px, ombres dures offset (jamais de blur),
   CTA noir monochrome — la couleur vient des accents produit.
   ============================================================ */

:root{
  /* core tokens */
  --ink:#0e0e12;
  --paper:#f7f5ef;
  --paper-2:#eeebe1;
  --white:#ffffff;
  --gray:#9a9aa2;

  --text:var(--ink);
  --text-2:rgba(14,14,18,.64);
  --muted:rgba(14,14,18,.44);
  --border:rgba(14,14,18,.14);

  /* typography */
  --display:'Archivo Black', sans-serif;
  --sans:'Rubik', system-ui, -apple-system, sans-serif;

  /* signature arcade */
  --skew:-8deg;
  --shadow-hard:8px 8px 0 rgba(0,0,0,.9);
  --shadow-hard-sm:4px 4px 0 rgba(0,0,0,.9);
  --shadow-hard-xs:3px 3px 0 rgba(0,0,0,.9);

  --ease:cubic-bezier(.22,1,.36,1);
  --pop:cubic-bezier(.2,1.7,.5,1);
  --spring:cubic-bezier(.34,1.56,.64,1);   /* rebond doux — dock produits */
  --nav-h:64px;
  --clients-h:56px;   /* bande bas logos clients */
  --dock-h:84px;      /* dock produits (bas), mode fiche/cover */
  --maxw:1120px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ min-height:100%; font-family:var(--sans); font-weight:500; color:var(--text); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button{ font-family:inherit; color:inherit; cursor:pointer; border:none; background:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--ink); color:var(--paper); }

/* ---------- INTRO : le héros de la home centré plein écran — mêmes couleurs (fond sable,
   texte blanc, Brain noir par-dessus), glitchs rapides ---------- */
.intro{ position:fixed; inset:0; z-index:999; background:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.intro__hero{ position:relative; width:100%; display:flex; align-items:center; justify-content:center; }
.intro__mega{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100vw;
  display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.intro__line{ display:block; font-family:var(--display); font-size:clamp(64px,12.5vw,200px); line-height:.84;
  letter-spacing:-.01em; text-transform:uppercase; color:var(--white); white-space:nowrap;
  transform:skewX(var(--skew)); opacity:0; }
.intro__line--1{ animation:glitch-in .45s steps(10) .15s forwards; }
.intro__line--2{ animation:glitch-in .45s steps(10) .5s forwards; }
.intro__logo{ position:relative; z-index:1; height:clamp(130px,19vw,230px); width:auto;
  opacity:0; animation:glitch-in-logo .45s steps(10) .9s forwards; }
@keyframes glitch-in{
  0%{ opacity:0; clip-path:inset(0 0 100% 0); transform:skewX(var(--skew)) translateX(-14px); }
  10%{ opacity:1; clip-path:inset(0 0 62% 0); transform:skewX(var(--skew)) translateX(10px); }
  20%{ clip-path:inset(38% 0 24% 0); transform:skewX(var(--skew)) translateX(-8px); }
  30%{ clip-path:inset(12% 0 55% 0); transform:skewX(var(--skew)) translateX(6px); }
  40%{ opacity:.55; clip-path:inset(64% 0 6% 0); transform:skewX(var(--skew)) translateX(-10px); }
  50%{ opacity:1; clip-path:inset(24% 0 40% 0); transform:skewX(var(--skew)) translateX(8px); }
  60%{ clip-path:inset(4% 0 76% 0); transform:skewX(var(--skew)) translateX(-5px); }
  70%{ clip-path:inset(50% 0 18% 0); transform:skewX(var(--skew)) translateX(4px); }
  80%{ opacity:.8; clip-path:inset(10% 0 30% 0); transform:skewX(var(--skew)) translateX(-3px); }
  100%{ opacity:1; clip-path:inset(0 0 0 0); transform:skewX(var(--skew)) translateX(0); }
}
@keyframes glitch-in-logo{
  0%{ opacity:0; clip-path:inset(0 0 100% 0); transform:translateX(-14px); }
  10%{ opacity:1; clip-path:inset(0 0 62% 0); transform:translateX(10px); }
  20%{ clip-path:inset(38% 0 24% 0); transform:translateX(-8px); }
  30%{ clip-path:inset(12% 0 55% 0); transform:translateX(6px); }
  40%{ opacity:.55; clip-path:inset(64% 0 6% 0); transform:translateX(-10px); }
  50%{ opacity:1; clip-path:inset(24% 0 40% 0); transform:translateX(8px); }
  60%{ clip-path:inset(4% 0 76% 0); transform:translateX(-5px); }
  70%{ clip-path:inset(50% 0 18% 0); transform:translateX(4px); }
  80%{ opacity:.8; clip-path:inset(10% 0 30% 0); transform:translateX(-3px); }
  100%{ opacity:1; clip-path:inset(0 0 0 0); transform:translateX(0); }
}

/* ---------- arcade primitives ---------- */
/* signature block : skew -8°, bordure franche, ombre dure */
.arcade-block{ transform:skewX(var(--skew)); border:4px solid var(--ink); box-shadow:var(--shadow-hard-sm); }
.arcade-block > *{ transform:skewX(calc(-1 * var(--skew))); }

/* ---------- BANDE HAUT — toujours transparente : logo + burger = objets flottants ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; gap:20px; padding:0 24px; background:transparent; pointer-events:none; }
.nav > *{ pointer-events:auto; }   /* le contenu clique, la bande laisse passer */
.nav__brand{ display:flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.nav__logo{ height:34px; width:auto; }
.nav__right{ display:flex; align-items:center; gap:12px; flex:0 0 auto; margin-left:auto; }
/* gros bouton prendre rendez-vous — présent partout, à la place de l'ancien burger */
.nav__cta{ font-size:15px; padding:14px 28px; }
/* mode produit : la barre du haut chevauche la barre noire → logo blanc + CTA inversé */
body[data-pnav="on"] .nav{ height:var(--dock-h); }
body[data-pnav="on"] .nav__logo{ filter:brightness(0) invert(1); }
body[data-pnav="on"] .nav__cta{ color:var(--ink); background:var(--paper); border-color:var(--paper); box-shadow:3px 3px 0 rgba(0,0,0,.4); }
body[data-pnav="on"] .nav__cta:hover{ background:var(--white); }
/* gros X de fermeture produit — flottant en haut à gauche, hors de la barre noire */
.pclose{ display:none; position:fixed; top:calc(var(--dock-h) + 14px); left:24px; z-index:98;
  width:48px; height:48px; align-items:center; justify-content:center; font-size:22px;
  color:var(--ink); border:3px solid var(--ink); background:var(--paper); box-shadow:var(--shadow-hard-xs); transition:.15s var(--ease); }
body[data-pnav="on"] .pclose{ display:flex; }
.pclose:hover{ background:var(--ink); color:var(--paper); transform:translate(-1px,-1px); box-shadow:var(--shadow-hard-sm); }

/* logo Brain en grand, centré au-dessus du menu de section */
.cat-head__brain{ height:clamp(96px,14vw,168px); width:auto; }
/* héros catalogue : AWARENESS / ON DEMAND en énorme, pleine largeur, derrière le logo Brain */
.cat-hero{ position:relative; width:100%; display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vh,34px) 0; }
.cat-hero__mega{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100vw; z-index:0; margin:0;
  display:flex; flex-direction:column; align-items:center; pointer-events:none; user-select:none; }
.cat-hero__mega span{ display:block; font-family:var(--display); font-size:clamp(64px,12.5vw,200px); line-height:.84;
  letter-spacing:-.01em; text-transform:uppercase; color:var(--white); white-space:nowrap; transform:skewX(var(--skew));
  transition:color .25s var(--ease); }
.cat-hero .cat-head__brain{ position:relative; z-index:1; height:clamp(130px,19vw,230px); transition:filter .25s var(--ease); }
/* hover sur le logo Brain : inversion — le texte passe en noir devant, Brain en blanc derrière */
.cat-hero:has(.cat-head__brain:hover) .cat-hero__mega{ z-index:2; }
.cat-hero:has(.cat-head__brain:hover) .cat-hero__mega span{ color:var(--ink); }
.cat-hero:has(.cat-head__brain:hover) .cat-head__brain{ filter:brightness(0) invert(1); }
body[data-clients="on"] .nav__brand{ display:none; }   /* le grand logo remplace le petit sur ces pages */

/* gros menu de section : CATALOGUE / CAS D'USAGE — blocs arcade comme le toggle */
.bigmenu{ display:flex; align-items:stretch; justify-content:center; gap:clamp(16px,2.6vw,30px); flex-wrap:wrap; }
.bigmenu__item{ font-family:var(--display); font-size:clamp(22px,3.4vw,40px); line-height:1; letter-spacing:.005em;
  text-transform:uppercase; color:var(--ink); background:var(--white); border:3px solid var(--ink);
  box-shadow:var(--shadow-hard-xs); transform:skewX(var(--skew)); padding:10px 22px; transition:.15s var(--ease); }
.bigmenu__item:hover{ transform:skewX(var(--skew)) translate(-2px,-2px); box-shadow:var(--shadow-hard-sm); }
.bigmenu__item.is-active{ color:var(--paper); background:var(--ink); }

/* toggle de thème : 2 gros toggles indépendants — Cyber / IA (au moins un actif), avec case à cocher */
.tfilter{ display:flex; align-items:stretch; gap:14px; }
.tfilter__opt{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-size:clamp(14px,1.7vw,18px); letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink); background:var(--white); border:3px solid var(--ink); box-shadow:var(--shadow-hard-xs);
  transform:skewX(var(--skew)); padding:12px 30px; transition:.15s var(--ease); }
.tfilter__opt:not(.is-on){ opacity:.45; }
.tfilter__opt:hover{ transform:skewX(var(--skew)) translate(-2px,-2px); box-shadow:var(--shadow-hard-sm); }
.tfilter__opt.is-on{ color:var(--paper); background:var(--ink); }
/* case à cocher physique : ✓ visible quand le thème est sélectionné */
.tfilter__box{ width:19px; height:19px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border:3px solid currentColor; font-size:14px; line-height:1; }
.tfilter__opt.is-on .tfilter__box::after{ content:"✓"; font-family:var(--sans); font-weight:700; }

/* ---------- screens ---------- */
#app{ position:relative; }
.screen{ display:none; min-height:100vh; }
.screen.is-active{ display:block; animation:fade .35s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* ---------- transition fondu-pixel (portée de Brain Arcade) ----------
   La page se pixelise continûment (filtre SVG mosaïque sur <body>) pendant un
   fade-out vers le fond ; la nouvelle page se révèle en dé-pixelisant. */
html{ background:var(--paper, #f7f5ef); }

/* ---------- CTA shine (balayage lumineux périodique) ---------- */
.btn--shine{ position:relative; overflow:hidden; }
.btn--shine::after{ content:""; position:absolute; top:-10%; bottom:-10%; left:-30%; width:22%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:shine-sweep 6s var(--ease) infinite; }
@keyframes shine-sweep{ 0%, 88%{ left:-30% } 100%{ left:130% } }

/* ---------- BUTTONS — CTA noir monochrome ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:14px;
  letter-spacing:.04em; text-transform:uppercase; padding:13px 26px;
  color:var(--paper); background:var(--ink); border:4px solid var(--ink);
  box-shadow:var(--shadow-hard-sm); transform:skewX(var(--skew));
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), color .15s var(--ease); }
.btn > *, .btn{ /* text is skewed with the block — signature SCD */ }
.btn:hover{ transform:skewX(var(--skew)) translate(-2px,-2px) scale(1.02); box-shadow:var(--shadow-hard); }
.btn:active{ transform:skewX(var(--skew)) translate(2px,2px); box-shadow:none; }
.btn--ghost{ background:var(--paper); color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--xl{ font-size:clamp(17px,1.8vw,21px); padding:18px 48px; }

.eyebrow{ font-family:var(--display); font-size:11px; letter-spacing:.35em; text-transform:uppercase; color:var(--muted); }

/* (Home supprimée — le catalogue est la page d'arrivée) */

/* ---------- BANDE BAS : logos clients (blanc sur noir, serrés, fixe) ---------- */
.clients{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; align-items:center;
  padding:10px 0; background:var(--ink); }
body[data-clients="on"] .clients{ display:flex; }
.clients__row{ position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.clients__track{ display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); width:max-content;
  animation:logoscroll 32s linear infinite; }
.clients__row:hover .clients__track{ animation-play-state:paused; }
@keyframes logoscroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---------- BARRE PRODUITS (haut) — noire, logo actif simplement plus gros en blanc ---------- */
.pdock{ position:fixed; left:0; right:0; top:0; z-index:95; height:var(--dock-h); display:none;
  align-items:center; background:var(--ink); overflow:visible; }
body[data-pnav="on"] .pdock{ display:flex; }
/* fondus latéraux : les logos s'estompent avant le logo Brain / le CTA */
.pdock::before, .pdock::after{ content:""; position:absolute; top:0; bottom:0; width:clamp(120px,14vw,220px); z-index:3; pointer-events:none; }
.pdock::before{ left:0; background:linear-gradient(90deg, var(--ink) 35%, transparent); }
.pdock::after{ right:0; background:linear-gradient(270deg, var(--ink) 35%, transparent); }
.pdock__rail{ position:absolute; left:0; top:0; height:100%; z-index:2; display:flex; align-items:center; gap:clamp(20px,3vw,42px);
  padding:0 clamp(84px,11vw,170px); white-space:nowrap; transition:transform .5s var(--spring); will-change:transform; }
.pdock__item{ position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; height:100%; padding:0 4px; }
.pdock__item img{ height:32px; width:auto; display:block; filter:brightness(0) invert(1); opacity:.34;
  transition:opacity .3s var(--ease), height .25s var(--ease); }
.pdock__item:hover img{ opacity:.62; }
/* actif : logo blanc, un peu plus gros — sans autre effet */
.pdock__item.is-active img{ opacity:1; height:46px; }
.clients__logo{ width:96px; height:24px; flex:0 0 auto; object-fit:contain; object-position:center;
  filter:brightness(0) invert(1); }

/* =========================================================
   PAGE (cas d'usage / legal shared shell)
   ========================================================= */
.page{ max-width:var(--maxw); margin:0 auto; padding:calc(var(--nav-h) + clamp(16px,3vh,36px)) 24px calc(var(--clients-h) + 64px); }
.page__head{ max-width:680px; margin-bottom:48px; }
.page__title{ font-family:var(--display); font-size:clamp(30px,5vw,52px); letter-spacing:.01em; line-height:1.02;
  text-transform:uppercase; margin:14px 0 16px; }
.page__title--center{ text-align:center; font-size:clamp(22px,3vw,34px); margin:16px 0 4px; }
.page__lead{ font-size:clamp(16px,2vw,19px); color:var(--text-2); line-height:1.55; }
.page__lead--center{ text-align:center; }

/* =========================================================
   CATALOGUE — grille scrollable
   ========================================================= */
.cat-wide{ padding:calc(var(--nav-h) + clamp(16px,3vh,36px)) clamp(18px,4vw,56px) calc(var(--clients-h) + 48px); }
/* tête de page partagée : bigmenu + toggle centrés */
.cat-head{ display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:clamp(22px,3.5vh,40px); }

.catgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(18px,2vw,26px); }

.ccard{ position:relative; display:flex; flex-direction:column; text-align:left;
  background:var(--white); border:4px solid var(--ink); box-shadow:var(--shadow-hard-sm);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease); isolation:isolate; }
.ccard:hover{ transform:translate(-3px,-3px); box-shadow:var(--shadow-hard); }
.ccard:active{ transform:translate(2px,2px); box-shadow:none; }
/* zone visuelle = le logo produit */
.ccard__visual{ position:relative; display:flex; align-items:center; justify-content:center;
  height:clamp(150px,16vw,190px); background:var(--white); border-bottom:4px solid var(--ink); overflow:hidden; padding:18px; }
.ccard__visual img{ max-width:78%; max-height:88%; object-fit:contain; }
.ccard__num{ position:absolute; top:10px; right:14px; font-family:var(--display); font-size:20px; line-height:1;
  color:var(--ink); opacity:.18; }
.ccard__body{ display:flex; flex-direction:column; gap:10px; padding:18px 20px; flex:1; background:var(--paper); border-top:0; }
.ccard__cat{ font-family:var(--display); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.ccard__tag{ font-size:14px; color:var(--text-2); line-height:1.5; flex:1; }
.ccard__go{ display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-top:4px; }
.ccard__go-arr{ transition:transform .2s var(--ease); }
.ccard:hover .ccard__go-arr{ transform:translateX(5px); }
/* produit à venir : badge à la place du « Découvrir » */
.ccard__soon{ display:inline-flex; align-items:center; font-family:var(--display); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

/* =========================================================
   CAS D'USAGE — objectifs → solutions (accordéon de fiches)
   ========================================================= */
.ucgrid{ display:flex; flex-direction:column; gap:14px; max-width:100%; }
.uco{ background:var(--white); border:3px solid var(--ink); box-shadow:var(--shadow-hard-xs);
  transition:box-shadow .15s var(--ease); }
.uco.is-open{ box-shadow:var(--shadow-hard-sm); }
.uco__q{ width:100%; display:flex; align-items:center; gap:18px; text-align:left; padding:20px 22px; }
.uco__body{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.uco__title{ font-family:var(--display); font-size:clamp(15px,1.6vw,19px); letter-spacing:.01em;
  text-transform:uppercase; line-height:1.25; color:var(--ink); transition:.15s var(--ease); }
.uco__q:hover .uco__title{ transform:translateX(4px); }
.uco__desc{ font-size:14px; color:var(--text-2); line-height:1.5; }
.uco__meta{ flex:0 0 auto; font-family:var(--display); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper); background:var(--ink); padding:6px 10px; transform:skewX(var(--skew)); white-space:nowrap; }
.uco__sign{ flex:0 0 auto; font-size:24px; font-weight:400; color:var(--ink); transition:transform .2s var(--ease); }
.uco.is-open .uco__sign{ transform:rotate(45deg); }
.uco__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.uco.is-open .uco__a{ max-height:900px; }
.uco__cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;
  padding:4px 22px 24px; border-top:2px solid var(--border); margin-top:0; padding-top:20px; }

/* =========================================================
   BROWSE CHROME (flèches prev/next)
   ========================================================= */
.parrow{ position:fixed; top:50%; transform:translateY(-50%); z-index:55; width:48px; height:72px;
  display:none; align-items:center; justify-content:center; font-size:36px; font-weight:400; color:var(--ink);
  background:var(--paper); border:3px solid var(--ink); box-shadow:var(--shadow-hard-xs); transition:.15s var(--ease); }
body[data-pnav="on"] .parrow{ display:flex; }
.parrow:hover{ background:var(--ink); color:var(--paper); }
.parrow--l{ left:16px; } .parrow--r{ right:16px; }

/* =========================================================
   SHOWCASE — cover produit, paper-first
   ========================================================= */
.screen--showcase{ position:relative; }
.screen--showcase.is-active{ display:block; }
.sc-bg{ position:fixed; inset:0; z-index:0; background:var(--paper); }
.sc-scrim{ display:none; }
.showcase{ position:relative; z-index:2; min-height:100vh; max-width:1240px; margin:0 auto; color:var(--ink);
  padding:calc(var(--dock-h) + clamp(30px,5vh,60px)) clamp(24px,5vw,64px) 56px;
  display:flex; align-items:center; gap:clamp(28px,4vw,60px); animation:fade .35s var(--ease); }

/* atoms */
.sc-cat{ font-family:var(--display); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
/* logo produit = titre du showcase */
.sc-logo img{ width:clamp(240px,26vw,420px); height:auto; max-height:180px; object-fit:contain; object-position:left center; }
.sc-logo::after{ content:""; display:block; width:200px; height:8px; margin-top:16px; background:var(--ink); transform:skewX(var(--skew)); }
.sc-sub{ font-size:clamp(16px,2vw,20px); color:var(--text-2); max-width:44ch; line-height:1.45; }
.sc-info{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:18px; flex:1 1 0; min-width:0; }
.sc-ctas{ margin-top:8px; }
/* produit à venir : la fiche n'est pas accessible — étiquette à la place du CTA */
.sc-soon{ display:inline-flex; align-items:center; font-family:var(--display); font-size:clamp(15px,1.6vw,19px);
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--paper-2);
  border:4px solid var(--border); padding:16px 44px; transform:skewX(var(--skew)); }
.sc-count{ position:fixed; right:24px; bottom:16px; z-index:96; font-family:var(--display); font-size:13px; color:var(--ink); }
.sc-count span{ color:var(--muted); }

/* stat bars RPG — flat, bordées, accent produit */
.sc-stats{ display:flex; flex-direction:column; gap:9px; width:100%; max-width:400px; }
.sc-stat{ display:grid; grid-template-columns:120px 1fr 34px; align-items:center; gap:12px; }
.sc-stat__k{ font-family:var(--display); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); }
.sc-stat__bar{ height:12px; border:2px solid var(--ink); background:var(--white); overflow:hidden; transform:skewX(var(--skew)); }
.sc-stat__bar i{ display:block; height:100%; background:var(--p,var(--ink)); }
.sc-stat__v{ font-family:var(--display); font-size:12px; color:var(--ink); text-align:right; }

/* visual frame */
.sc-stage{ flex:1 1 0; display:flex; align-items:center; justify-content:center; min-width:0; }
.sc-visual{ position:relative; overflow:hidden; width:100%; aspect-ratio:16/10;
  border:4px solid var(--ink); background:var(--white); box-shadow:var(--shadow-hard);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.sc-visual__cap{ font-size:14px; color:var(--text-2); }
.sc-visual__hint{ font-family:var(--display); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* layouts */
.sc--L0 .sc-stage{ flex:1.15; }
.sc--L1{ justify-content:center; }
.sc--L1 .sc-center{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; max-width:780px; }
.sc--L1 .sc-center .sc-logo img{ object-position:center; }
.sc--L1 .sc-center .sc-logo::after{ margin-left:auto; margin-right:auto; }
.sc--L1 .sc-stats{ align-self:center; }
.sc-stage--3d{ perspective:1300px; }
.sc-stage--3d .sc-visual{ transform:rotateY(-14deg) rotateX(4deg); transform-origin:left center; }
.sc--L3 .sc-stage{ flex:1.15; }
.sc--L4{ align-items:flex-end; }
.sc--L4 .sc-stage--fill{ position:fixed; inset:0; z-index:0; }
.sc--L4 .sc-stage--fill .sc-visual{ width:100%; height:100%; aspect-ratio:auto; border:none; box-shadow:none; background:var(--paper-2); }
.sc--L4 .sc-info--low{ max-width:640px; flex:0 1 auto; }
.sc--L5{ padding:var(--nav-h) 0 0 0; gap:0; max-width:none; align-items:stretch; }
.sc-panel{ flex:0 0 42%; max-width:520px; display:flex; flex-direction:column; justify-content:center; gap:18px;
  padding:0 clamp(28px,3.5vw,56px); background:var(--white); border-right:4px solid var(--ink); }
.sc--L5 .sc-stage--full{ flex:1; padding:clamp(28px,4vw,60px); }
.sc--L6{ flex-direction:column; align-items:stretch; gap:22px; }
.sc-stage--hero{ position:relative; flex:1; }
.sc-stage--hero .sc-visual{ aspect-ratio:auto; height:100%; min-height:46vh; }
.sc-logo--over{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; text-align:center; pointer-events:none; }
.sc-logo--over img{ width:clamp(300px,36vw,560px); object-position:center; }
.sc-logo--over::after{ margin-left:auto; margin-right:auto; }
.sc-info--strip{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:24px; }
.sc-info--strip .sc-stats{ flex:1; min-width:260px; }
.sc--L7{ justify-content:center; }
.sc-center--3d{ display:flex; align-items:center; gap:clamp(28px,4vw,56px); max-width:1120px; width:100%; }
.sc-center--3d .sc-stage{ flex:1.1; }
.sc-center--3d .sc-meta{ flex:1; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }

/* =========================================================
   FICHE PRODUIT
   ========================================================= */
.p-back{ font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:28px; display:inline-flex; align-items:center; gap:6px; transition:.15s var(--ease); }
.p-back:hover{ color:var(--ink); }

.product__scroll{ max-width:880px; margin:0 auto; padding:calc(var(--dock-h) + 64px) 24px 120px; }
.p-hero{ margin-bottom:56px; }
.p-hero__cat{ font-family:var(--display); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
/* logo produit = titre de la fiche */
.p-hero__name{ margin-bottom:10px; }
.p-hero__name img{ width:clamp(280px,38vw,480px); height:auto; max-height:220px; object-fit:contain; object-position:left center; }
.p-hero__name::after{ content:""; display:block; width:200px; height:8px; margin-top:18px; background:var(--ink); transform:skewX(var(--skew)); }
.p-hero__tag{ font-size:clamp(18px,2.6vw,23px); color:var(--text-2); line-height:1.4; max-width:620px; margin-top:14px; }
.p-hero__cta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; }

.p-section{ margin:0 0 56px; content-visibility:auto; contain-intrinsic-size:auto 520px; }
.p-section__h{ position:relative; font-family:var(--display); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink);
  padding-bottom:12px; margin-bottom:24px; border-bottom:3px solid var(--ink); }
.p-section__h::after{ content:""; position:absolute; left:0; bottom:-3px; width:52px; height:3px; background:var(--p,var(--ink)); }
.p-prose p{ font-size:17px; line-height:1.7; color:var(--text-2); margin-bottom:16px; max-width:680px; }
.p-prose p strong{ color:var(--ink); font-weight:700; }

/* feature list */
.p-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.feat{ padding:20px 22px; background:var(--white); border:3px solid var(--ink); box-shadow:var(--shadow-hard-xs); transition:.15s var(--ease); }
.feat:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-hard-sm); }
.feat__t{ font-size:16px; font-weight:700; letter-spacing:-.01em; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.feat__t::before{ content:""; width:10px; height:10px; background:var(--p,var(--ink)); border:2px solid var(--ink);
  transform:skewX(var(--skew)); flex:0 0 auto; }
.feat__d{ font-size:14px; color:var(--text-2); line-height:1.55; }

/* image slots */
.p-shots{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.p-shots--single{ grid-template-columns:1fr; }
.shot{ position:relative; overflow:hidden; aspect-ratio:16/10; border:3px solid var(--ink); box-shadow:var(--shadow-hard-xs);
  background:var(--paper-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:20px; }
.v-scrim{ display:none; }
.shot__cap{ position:relative; z-index:2; font-size:13px; color:var(--text-2); max-width:80%; line-height:1.4; }
.shot__hint{ position:relative; z-index:2; font-family:var(--display); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* specs */
.p-specs{ display:grid; gap:0; border:3px solid var(--ink); background:var(--white); overflow:hidden; }
.spec{ display:grid; grid-template-columns:200px 1fr; gap:20px; padding:18px 22px; border-bottom:2px solid var(--border); }
.spec:last-child{ border-bottom:none; }
.spec__k{ font-family:var(--display); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); align-self:center; }
.spec__v{ font-size:15px; color:var(--ink); }

/* stats inline */
.p-kpis{ display:flex; flex-wrap:wrap; gap:28px; }
.kpi{ display:flex; flex-direction:column; gap:4px; }
.kpi__v{ font-family:var(--display); font-size:32px; letter-spacing:.005em; color:var(--ink); }
.kpi__v::after{ content:""; display:block; width:100%; height:5px; margin-top:4px; background:var(--p,var(--ink)); transform:skewX(var(--skew)); }
.kpi__k{ font-family:var(--display); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

/* FAQ accordion */
.faq{ border-top:3px solid var(--ink); }
.faq__item{ border-bottom:2px solid var(--border); }
.faq__q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 4px; font-size:16.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink); transition:.15s var(--ease); }
.faq__sign{ flex:0 0 auto; font-size:20px; font-weight:400; color:var(--muted); transition:transform .2s var(--ease); }
.faq__item.is-open .faq__sign{ transform:rotate(45deg); color:var(--ink); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .28s var(--ease); }
.faq__a p{ font-size:15px; line-height:1.65; color:var(--text-2); padding:0 4px 22px; max-width:680px; }
.faq__item.is-open .faq__a{ max-height:340px; }

/* pied de fiche : héros AWARENESS ON DEMAND + CTAs — commun à toutes les fiches */
.p-foot{ margin-top:64px; display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center; }
.p-foot__btns{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.btn.is-ok{ background:var(--paper) !important; color:var(--ink) !important; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:880px){
  .ucgrid,.p-features,.p-shots{ grid-template-columns:1fr; }
  .spec{ grid-template-columns:1fr; gap:4px; }
  body[data-pnav="on"] .parrow{ display:none; }
  .showcase{ flex-direction:column; justify-content:center; }
}
@media (max-width:560px){
  .nav__word{ display:none; }
  .catgrid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001s !important; transition-duration:.001s !important; } }