/* ==========================================================================
   CORTEX VALUE — DA v2 « Infrastructure de décision »
   Couche scopée à .da2 (page pilote = /cabinet). Chargée APRÈS styles.css.
   N'affecte aucune autre page tant que la classe n'est pas propagée.
   Brief : Direction artistique et technique (32 p.) — appliqué tel quel.
   ========================================================================== */

/* ----------  Tokens centralisés (brief §3.2 §4 §5.4 §7 §10.2)  ---------- */
:root{
  /* couleurs sources */
  --ctv-navy:#101B2B; --ctv-orange:#FF9E1B; --ctv-silver:#CDD8E4; --ctv-white:#FFFFFF;
  /* accent (états/surfaces — accent-600 = orange officiel) */
  --accent-500:#D7881E; --accent-600:#FF9E1B; --accent-700:#FFAC3C; --accent-1200:#FFF1DE;
  /* surfaces / texte sémantiques */
  --bg-technical:#CDD8E4; --bg-accent-soft:#FFF1DE;
  --text-secondary:#47505C; --text-muted:#6C737D;
  /* rayons (max 10px) */
  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-button:4px;
  /* espacement */
  --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;
  /* conteneurs */
  --container-max:1320px; --container-reading:760px;
  /* motion */
  --dur-fast:180ms; --dur-base:260ms; --dur-reveal:560ms;
  --ease-standard:cubic-bezier(.2,0,0,1); --ease-emphasized:cubic-bezier(.16,1,.3,1);
}

/* ----------  Conteneur élargi  ---------- */
.da2 .wrap{max-width:var(--container-max)}

/* ----------  Navigation (brief §7.1 : 80–88px, filet bas)  ---------- */
.da2 .nav .wrap{height:84px}
.da2 .nav-cta{border-radius:var(--radius-button)}
@media(max-width:620px){.da2 .nav .wrap{height:70px}}

/* ----------  Typographie : intensification signature (brief §3.2 §3.3)  ---------- */
/* Hero H1 : 60–90px desktop, 36–52px mobile, weight 600, très serré */
.da2 .page-hero h1,.da2 .hero h1{
  font-weight:600;line-height:.96;letter-spacing:-.045em;text-wrap:balance;
  font-size:clamp(2.25rem,10.5vw,3.25rem);max-width:15ch}
@media(min-width:768px){.da2 .page-hero h1,.da2 .hero h1{font-size:clamp(3.25rem,6vw,4.25rem)}}
@media(min-width:1200px){.da2 .page-hero h1,.da2 .hero h1{font-size:clamp(3.75rem,5.45vw,5.625rem)}}

/* H2 de section : 46–72px desktop, 32–42px mobile.
   Cabinet : h2 direct enfant de .wrap. Landing : aussi .sec-head h2 (impact/offres)
   et .sol .bridge (solution, gardée alignée à gauche). */
.da2 .band>.wrap>h2,.da2 .sec-head h2,.da2 .final h2,.da2 .sol .bridge{
  font-weight:600;line-height:1.02;letter-spacing:-.035em;text-wrap:balance;
  font-size:clamp(2rem,8.7vw,2.625rem)}
.da2 .band>.wrap>h2,.da2 .sec-head h2{max-width:18ch}
.da2 .final h2{max-width:22ch}
@media(min-width:768px){.da2 .band>.wrap>h2,.da2 .sec-head h2,.da2 .final h2,.da2 .sol .bridge{font-size:clamp(2.5rem,4.6vw,3.4rem)}}
@media(min-width:1200px){.da2 .band>.wrap>h2,.da2 .sec-head h2,.da2 .final h2,.da2 .sol .bridge{font-size:clamp(2.875rem,3.6vw,4.5rem)}}

/* Introduction / corps Spectral (brief : intro 20–24px, lh 1.58) */
.da2 .lede{font-size:clamp(1.125rem,.85rem + 1.1vw,1.5rem);line-height:1.58;letter-spacing:-.006em;max-width:62ch}

/* Chiffres tabulaires */
.da2 .vf-k,.da2 .t-n,.da2 .eyebrow .num{font-variant-numeric:tabular-nums lining-nums}

/* ----------  Rythme vertical (brief §5.5)  ---------- */
.da2 .page-hero{padding-top:clamp(120px,14vh,184px);padding-bottom:clamp(64px,7vw,104px)}
.da2 .band{padding-block:clamp(72px,8vw,128px)}

/* ----------  Rayons resserrés (brief §7.2 §7.4 : 4–10px)  ---------- */
.da2 .btn{border-radius:var(--radius-button);min-height:52px}
.da2 .pillar,.da2 .dcard,.da2 .sector,.da2 .bcard,.da2 .cross-entry,
.da2 .vf-node,.da2 .legal-meta,.da2 .conv-core,.da2 .conv-chip,
.da2 .offer,.da2 .compare,.da2 .rootflow{border-radius:var(--radius-md)}
/* Cartes : filets et alignements, pas d'ombres flottantes (brief §7.4) */
.da2 .offer,.da2 .rootflow{box-shadow:none}

/* ----------  Trame technique sur fonds navy (brief §8.3)  ---------- */
.da2 .page-hero,.da2 .hero,.da2 .band{position:relative;overflow:hidden}
.da2 .band>.wrap{position:relative;z-index:1}
.da2 .page-hero::after,.da2 .hero::after,.da2 .band.deep::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(205,216,228,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(205,216,228,.045) 1px,transparent 1px);
  background-size:48px 48px}
@media(max-width:767px){.da2 .page-hero::after,.da2 .hero::after,.da2 .band.deep::after{background-size:32px 32px}}

/* ----------  Mots-repères techniques (brief §6.2)  ---------- */
/* EXÉCUTION / PREUVE / DÉCISION / MARGE — arrière-plan, décoratifs (aria-hidden) */
.da2 .repere{position:absolute;z-index:0;pointer-events:none;user-select:none;
  right:clamp(-.15em,-1vw,0em);bottom:-.04em;
  font-family:var(--sans);font-weight:700;font-size:clamp(6rem,16vw,13rem);
  line-height:.8;letter-spacing:-.06em;text-transform:uppercase;white-space:nowrap;
  color:var(--ctv-white);opacity:.05}
.da2 .light .repere,.da2 .light-2 .repere{color:var(--ctv-navy);opacity:.035}
@media(max-width:767px){.da2 .repere{display:none}}

/* ----------  Reveal (brief §10.3 : translateY 18px, 560ms emphasized)  ---------- */
html.js .da2 .reveal{transform:translateY(18px);
  transition:opacity var(--dur-reveal) var(--ease-emphasized),transform var(--dur-reveal) var(--ease-emphasized)}
@media(max-width:767px){html.js .da2 .reveal{transform:translateY(12px)}}

/* ----------  Focus visible renforcé (brief §7.2)  ---------- */
.da2 a:focus-visible,.da2 .btn:focus-visible,.da2 button:focus-visible{outline-width:3px;outline-offset:3px}

/* ----------  Reduced motion (brief §10.7)  ---------- */
@media(prefers-reduced-motion:reduce){
  html.js .da2 .reveal{opacity:1;transform:none}
}