/* wevia-w4s-components.css  D-CHARTE-W4S-COMPOSANTS-20260914 (sonnet-ebook, ordre DG).
   POURQUOI. Aligner les COULEURS ne suffit pas : la conformite "WEVIA for SAP" est un SYSTEME VISUEL, mesure
   sur wevia-for-sap.html : en-tete de section = numero mono violet + titre serif ; carte = bord --wv-border,
   rayon 18, degrade panel->creme, ombre douce ; lien de carte = mono 11px espace ; libelles = mono 9-11px
   majuscules espacees ; chiffres = serif navy. Ces regles vivaient dans UNE page ; elles deviennent un
   composant partage, consommant EXCLUSIVEMENT les jetons du canon (--wv-*), jamais de couleur en dur. */
:root{
  --w4s-radius:18px;
  --w4s-shadow:var(--wv-shadow-card,0 1px 3px rgba(27,17,51,.05),0 8px 24px rgba(27,17,51,.04));
}
/* ---- typographie de section : numero mono + titre serif ---- */
.w4s .section-title,.w4s h2{font-family:var(--wv-font-title)!important;font-weight:400!important;
  letter-spacing:-.01em;color:var(--wv-ink)}
.w4s .section-title{position:relative;padding-left:0}
.w4s .kicker,.w4s .snum{font-family:var(--wv-font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--wv-indigo);text-transform:uppercase}
.w4s .slead{color:var(--wv-muted);font-size:15px;line-height:1.68;max-width:620px}
/* ---- carte W4S ---- */
.w4s .tile,.w4s .card,.w4s .kpi{border:1px solid var(--wv-border);border-radius:var(--w4s-radius);
  background:linear-gradient(165deg,var(--wv-card),var(--wv-bg));box-shadow:var(--w4s-shadow);
  padding:var(--wv-card-pad,22px);transition:border-color .2s,box-shadow .2s}
.w4s .tile:hover,.w4s .card:hover{border-color:var(--wv-indigo);box-shadow:0 2px 6px rgba(79,70,229,.10),0 14px 34px rgba(27,17,51,.07)}
/* ---- lien d action (le "Open the module ->" de la reference) ---- */
.w4s .go{font-family:var(--wv-font-mono);font-size:11px;letter-spacing:.06em;color:var(--wv-indigo);
  display:inline-flex;align-items:center;gap:7px}
/* ---- pastille d etat ---- */
.w4s .live{font-family:var(--wv-font-mono);font-size:9px;letter-spacing:.1em;color:var(--wv-ok);
  display:inline-flex;align-items:center;gap:6px}
/* D-CANON-COULEURS-STATUT-20260914 : les statuts viennent DU CANON, plus aucune couleur en dur ici.
   Deux usages distincts et c est volontaire : le TEXTE prend le jeton AA texte, la PASTILLE prend le
   jeton signal (3:1 suffit pour un composant graphique). Avant, .live portait #0E9F6E en dur - lisible
   comme pastille (3.17:1) mais INSUFFISANT comme texte : le libelle LIVE etait sous le seuil AA. */
.w4s .ok,.w4s .pass,.w4s .statut-ok{color:var(--wv-ok)}
.w4s .warn,.w4s .wait,.w4s .statut-warn{color:var(--wv-warn)}
.w4s .fail,.w4s .err,.w4s .statut-fail{color:var(--wv-fail)}
.w4s .idle,.w4s .statut-idle{color:var(--wv-idle)}
.w4s .dot-ok,.w4s .live::before{background:var(--wv-ok-signal)}
.w4s .dot-warn{background:var(--wv-warn-signal)}
.w4s .dot-fail{background:var(--wv-fail-signal)}
.w4s .dot-ok,.w4s .dot-warn,.w4s .dot-fail{width:6px;height:6px;border-radius:50%;display:inline-block}
/* ---- valeurs chiffrees : serif navy, pas de violet criard ---- */
.w4s .stat-v,.w4s .value{font-family:var(--wv-font-title)!important;font-weight:400!important;
  color:var(--wv-navy)!important;letter-spacing:-.01em}
.w4s .stat-l,.w4s .label{font-family:var(--wv-font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--wv-muted)}
/* ---- barre de tete : police du canon, jamais Inter ---- */
.w4s .wv-topbar{font-family:var(--wv-font-body)!important;background:var(--wv-card)!important;
  border-bottom:1px solid var(--wv-border)!important}
/* ---- boutons : pilule indigo / pilule blanche bordee (mesure du canon) ---- */
.w4s .btn{font-family:var(--wv-font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--wv-radius-pill,60px);padding:10px 18px;border:1px solid var(--wv-border);
  background:var(--wv-card);color:var(--wv-ink)}
.w4s .btn.primary,.w4s .btn-primary{background:var(--wv-indigo);border-color:var(--wv-indigo);color:#fff}

/* ============================================================================
   D-CHARTE-W4S-ISO-20260914 (sonnet-ebook, ordre DG "polish ISO wevia-for-sap").
   ECHELLE TYPOGRAPHIQUE ET RYTHME, mesures cote a cote sur les deux pages rendues :
                     reference        erp-gap-fill     ecart
     corps           16px / 25.6      13.5px / 20.9    la page etait COMPRIMEE
     h1              66px Georgia     28px             titre sans presence
     h2              32px Georgia     22px
     carte padding   22 22 18         22 partout
     en-tete padding 60 0 26          0 0 24           aucune respiration
   La reference respire ; la cible etait tassee. On aligne l ECHELLE, pas les couleurs :
   la reference utilise #FDF9F5/#1B1B33 alors que le CANON impose #FAF7F5/#1B1B1B
   (assets/css/wevia-charte-canon.css). Conflit signale au DG - le canon l emporte ici,
   car c est lui le referentiel unique et une page ne fait pas foi contre lui.
   Georgia est la police de titre de la reference ; le canon declare "Instrument Serif,
   Georgia" en repli - on garde donc la pile du canon, qui retombe sur Georgia. */
.w4s{font-size:16px;line-height:1.6}
.w4s h1{font-size:clamp(38px,5.2vw,66px)!important;line-height:1.04;color:var(--wv-navy)!important;
  font-family:var(--wv-font-title)!important;font-weight:400!important;letter-spacing:-.02em}
.w4s h2,.w4s .section-title{font-size:clamp(24px,2.6vw,32px)!important;line-height:1.12;
  color:var(--wv-ink)!important;letter-spacing:-.01em}
.w4s h3{font-size:19px;line-height:1.25;font-family:var(--wv-font-title);font-weight:400;color:var(--wv-ink)}
.w4s p,.w4s li{font-size:16px;line-height:1.6}
.w4s .sub,.w4s .slead{font-size:15px;line-height:1.68;color:var(--wv-muted)}
/* respiration : la reference ouvre ses sections a 60px */
.w4s header,.w4s .hero{padding:60px 0 26px}
.w4s section,.w4s [id]:not(body):not(html) > h2{scroll-margin-top:80px}
.w4s .tile,.w4s .card,.w4s .kpi{padding:22px 22px 18px}
/* la barre de tete reste compacte : c est une barre, pas un hero */
.w4s .wv-topbar{padding:12px 28px}