/* SAVA — feuille de style (système importé 2026-07-25, corrigé par critique
   Impeccable avant implémentation : contraste teal, cohérence cartes, callout
   sans side-tab, responsive réel). Voir DESIGN.md. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--surface-page);color:var(--text-primary);
  font-family:var(--font-serif);font-size:var(--text-body);line-height:var(--leading-editorial);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--text-brand);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--text-brand-hover)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sava-btn:focus-visible{outline-offset:3px}

.sava-wrap{width:100%;max-width:var(--content-max);margin:0 auto;padding:0 var(--space-6)}
.sava-wrap--narrow{max-width:var(--content-max-narrow)}
@media (min-width:768px){.sava-wrap{padding:0 var(--space-8)}}

/* --- nav --- */
.sava-nav{
  display:flex;align-items:center;gap:var(--space-8);padding:14px var(--space-6);
  background:var(--surface-page);box-shadow:inset 0 -1px 0 var(--border-hairline);
  font-family:var(--font-display);position:sticky;top:0;z-index:20;
}
.sava-nav__logo{display:flex;align-items:center;flex:none}
.sava-nav__logo img{height:22px}
.sava-nav__links{display:none;gap:var(--space-6);flex:1;margin-left:var(--space-4)}
.sava-nav__link{font-size:14px;font-weight:var(--weight-medium);color:var(--text-primary);text-decoration:none;transition:color 150ms var(--ease-standard)}
.sava-nav__link:hover{color:var(--text-brand)}
.sava-nav__link--active{font-weight:var(--weight-semibold);color:var(--text-brand)}
.sava-nav .sava-nav__cta{display:none;margin-left:auto}
.sava-nav__mobile-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.sava-nav .sava-nav__cta-icon{display:inline-flex;position:relative;min-width:44px;min-height:44px;justify-content:center}
.sava-nav__menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  background:transparent;border:1px solid transparent;color:var(--text-primary);cursor:pointer;padding:0;
}
.sava-nav__menu-toggle-icon{display:none}
.sava-nav__menu-toggle-icon--open{display:inline-flex}
.sava-nav__menu-toggle[aria-expanded="true"] .sava-nav__menu-toggle-icon--open{display:none}
.sava-nav__menu-toggle[aria-expanded="true"] .sava-nav__menu-toggle-icon--close{display:inline-flex}
.sava-nav__mobile-panel{
  display:flex;flex-direction:column;background:var(--surface-page);
  box-shadow:inset 0 -1px 0 var(--border-hairline);position:sticky;top:50px;z-index:19;
}
.sava-nav__mobile-panel[hidden]{display:none}
.sava-nav__mobile-link{
  padding:14px var(--space-6);font-family:var(--font-display);font-size:15px;font-weight:var(--weight-medium);
  color:var(--text-primary);text-decoration:none;border-top:1px solid var(--border-hairline);
}
.sava-nav__mobile-link:first-child{border-top:none}
.sava-nav__mobile-link--active{color:var(--text-brand);font-weight:var(--weight-semibold)}
@media (min-width:900px){
  .sava-nav__links{display:flex}
  .sava-nav .sava-nav__cta{display:inline-flex}
  .sava-nav__mobile-actions{display:none}
  .sava-nav__mobile-panel{display:none}
}

/* --- buttons --- */
.sava-btn{
  font-family:var(--font-display);font-weight:var(--weight-medium);border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;
  transition:background var(--duration-base) var(--ease-standard), opacity var(--duration-base), scale var(--duration-fast) var(--ease-standard);
  border:1px solid transparent;
}
.sava-btn:not(.sava-btn--static):active{scale:0.96}
.sava-btn:disabled{cursor:default;opacity:.6}
.sava-btn:disabled:active{scale:1}
.sava-btn--sm{padding:6px 14px;font-size:13px}
.sava-btn--md{padding:10px 20px;font-size:15px}
.sava-btn--lg{padding:14px 28px;font-size:16px}
.sava-btn--primary{background:var(--action-primary);color:var(--text-on-inverse);border-color:var(--action-primary)}
.sava-btn--primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--text-on-inverse)}
.sava-btn--secondary{background:transparent;color:var(--text-brand);border-color:var(--text-brand)}
.sava-btn--secondary:hover{background:var(--surface-tint);color:var(--text-brand)}
.sava-btn--inverse{background:var(--text-on-section-inverse);color:var(--surface-inverse);border-color:var(--text-on-section-inverse)}
.sava-btn--inverse:hover{opacity:.85}
.sava-btn svg{flex:none}

/* --- badge --- */
.sava-badge{
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.02em;
  padding:4px 10px;border-radius:var(--radius-sm);display:inline-block;
}
.sava-badge--live{background:var(--status-live-bg);color:var(--status-live)}
.sava-badge--success{background:var(--status-success-bg);color:var(--status-success)}
.sava-badge--warning{background:var(--status-warning-bg);color:var(--status-warning)}
.sava-badge--danger{background:var(--status-danger-bg);color:var(--status-danger)}
.sava-badge--neutral{background:var(--status-neutral-bg);color:var(--status-neutral)}

/* --- eyebrow --- */
.sava-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--accent-text);font-weight:600;
}
.sava-eyebrow::before{content:"";width:18px;height:2px;background:var(--accent);display:inline-block}

/* --- trust pill (hero credibility line) --- */
.sava-trust-pill{
  display:inline-flex;gap:7px;align-items:center;font-family:var(--font-mono);font-size:12px;
  color:var(--text-on-tint);background:var(--surface-tint);padding:6px 12px;border-radius:var(--radius-sm);
  font-weight:600;
}

/* --- color strategy: blue = institutional (home, /ecoles), teal = individual/
   grassroots (/solo) — reinforces the top-down vs. bottom-up GTM split already
   established in the copy, not decoration. Added in the "colorize" pass,
   2026-07-25: "committed but still sober" — same two hues the system already
   owns, no new color introduced. Primary buttons stay blue everywhere so the
   one primary action keeps one findable color across the whole site. */
.theme-solo .sava-trust-pill{color:var(--accent-text);background:var(--surface-tint-teal)}
.theme-solo .sava-card__icon{color:var(--accent)}
.theme-solo .sava-callout{background:var(--surface-tint-teal)}

/* --- card (hairline border, no shadow — one rule everywhere, see critique P1) --- */
.sava-card{
  background:var(--surface-card);border-radius:var(--radius-md);
  padding:var(--space-6);border:1px solid var(--border-hairline);
}
.sava-card__icon{color:var(--brand-mark);display:block;margin-bottom:var(--space-3)}
.sava-card__title{font-family:var(--font-display);font-size:17px;margin:0 0 8px;color:var(--text-primary)}
.sava-card__body{font-family:var(--font-serif);font-size:14px;color:var(--text-secondary);line-height:var(--leading-body);margin:0}

/* --- callout (tinted block, no colored side rule — critique flagged the
   original left-border as a recognized generic-AI-UI tell) --- */
.sava-callout{
  background:var(--surface-tint);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);
}
.sava-callout__title{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:15px;color:var(--text-heading-strong);margin:0 0 4px}
.sava-callout__body{font-family:var(--font-serif);font-size:14px;color:var(--text-secondary);margin:0}

/* --- sections --- */
.sava-section{padding:var(--space-16) 0}
.sava-section--sunken{background:var(--surface-sunken)}
.sava-section--tint{background:var(--surface-tint)}
.sava-section--inverse{background:var(--surface-inverse);color:var(--text-on-section-inverse)}
/* peak: a section given more room to be the page's loudest moment, not the
   same padding/weight as every other section — see bolder pass 2026-07-25 */
.sava-section--peak{padding:var(--space-24) 0}
.sava-section--peak .sava-section-title{font-size:2.5rem}
@media (min-width:900px){.sava-section--peak .sava-section-title{font-size:3rem}}
/* tight: a light "connector" beat (one paragraph, no card grid) — deliberately
   less padding so it reads as a pause between two heavier sections rather than
   a peer of equal weight (layout pass 2026-07-26: rhythm was carried almost
   entirely by background color, with only one padding step site-wide). */
.sava-section--tight{padding:var(--space-12) 0}
.sava-section--inverse .sava-eyebrow{color:var(--accent-on-section-inverse)}
.sava-section--inverse .sava-eyebrow::before{background:var(--accent-on-section-inverse)}
/* secondary buttons inside the inverse section must track *its* flip, not
   the page's — --text-brand is tuned for the page canvas, which is the
   opposite surface from whatever the inverse section currently is. */
.sava-section--inverse .sava-btn--secondary{color:var(--text-secondary-on-section-inverse);border-color:var(--text-secondary-on-section-inverse)}
.sava-section--inverse .sava-btn--secondary:hover{background:var(--text-on-section-inverse);color:var(--surface-inverse)}
.sava-section-title{font-size:2rem;font-weight:var(--weight-black);letter-spacing:-.02em;margin:10px 0 8px;color:var(--text-primary)}
.sava-section--inverse .sava-section-title{color:var(--text-on-section-inverse)}
@media (min-width:900px){.sava-section-title{font-size:2.5rem}}

/* --- hero ---
   Sizes trimmed 2026-07-26: the previous 4.75rem/3.75rem desktop sizes,
   repeated centered on every page, read as monotone/heavy across the site.
   Full display size is now reserved for the home page (.sava-hero--xl);
   every other page gets the smaller default. .sava-hero--left breaks the
   centered/narrow pattern for secondary pages. */
.sava-hero{padding:var(--space-12) 0 var(--space-10)}
.sava-hero__grid{display:grid;gap:40px;align-items:center}
.sava-hero h1{font-size:var(--text-h1);font-weight:var(--weight-black);line-height:1.04;letter-spacing:-.03em;color:var(--text-heading-strong);margin:20px 0 22px}
.sava-hero__sub{font-family:var(--font-serif);font-size:18px;line-height:1.6;color:var(--text-secondary);max-width:520px;margin:0 0 var(--space-6)}
.sava-hero__cta{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:900px){
  .sava-hero__grid{grid-template-columns:1.05fr .95fr}
  .sava-hero h1{font-size:var(--text-display-lg)}
}
.sava-hero h1.sava-hero__title--sub{font-size:var(--text-h1)}
@media (min-width:900px){.sava-hero h1.sava-hero__title--sub{font-size:var(--text-display-lg)}}
.sava-hero--xl h1{font-size:2.75rem}
@media (min-width:900px){.sava-hero--xl h1{font-size:4.75rem}}
.sava-hero--xl h1.sava-hero__title--sub{font-size:2.75rem}
@media (min-width:900px){.sava-hero--xl h1.sava-hero__title--sub{font-size:3.75rem}}
.sava-hero__content--left{text-align:left;margin:0;max-width:640px}

/* device-screen mock: reserved for real-time displays per the design system's
   own rule ("blue-950 pour les vraies maquettes d'écran"), and doubles as the
   fix for the P1 card-consistency finding — this is categorically a screen,
   not a card, so it never competes with the hairline-border card rule. */
.sava-screen{
  background:var(--blue-950);color:var(--paper-0);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-lg);
}
.sava-screen__bar{
  display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--blue-900);
  border-bottom:1px solid var(--blue-800);
}
.sava-screen__dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--teal-500);flex:none}
.sava-screen__label{font-family:var(--font-mono);font-size:12px;color:var(--teal-100);letter-spacing:.06em;font-weight:600}
.sava-screen__time{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--blue-200);font-variant-numeric:tabular-nums}
.sava-screen__row{display:flex;align-items:center;gap:14px;padding:16px 18px;border-top:1px solid var(--blue-800)}
.sava-screen__row:first-of-type{border-top:none}
.sava-screen__code{font-family:var(--font-mono);font-size:13px;color:var(--blue-200);width:26px;font-weight:600;flex:none}
.sava-screen__text{flex:1}
.sava-screen__title{font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--text-on-inverse)}
.sava-screen__meta{font-family:var(--font-mono);font-size:12px;color:var(--blue-200);margin-top:2px}
.sava-screen__status{width:9px;height:9px;border-radius:50%;flex:none}
.sava-screen__status--warning{background:var(--amber-600)}
.sava-screen__status--live{background:var(--teal-500)}
.sava-screen__status--danger{background:var(--brick-600)}
.sava-screen__caption{font-family:var(--font-mono);font-size:11px;color:var(--blue-200);padding:10px 18px;border-top:1px solid var(--blue-800)}

/* --- motion: one authored focal moment (see DESIGN.md) ---
   The screen mock is the single element the critique identified as genuinely
   product-specific — it dramatizes "SAVA diffuse l'info en temps réel"
   directly in the first viewport. On load its rows populate in sequence like
   a real board receiving live data, and the header dot pulses as a live
   indicator. Nothing else on the page animates on scroll — a reveal-on-every-
   section pattern was deliberately rejected earlier this session as generic. */
@media (prefers-reduced-motion: no-preference) {
  .sava-screen > *{opacity:0;transform:translateY(6px);animation:sava-screen-in 420ms cubic-bezier(.16,1,.3,1) forwards}
  .sava-screen > *:nth-child(1){animation-delay:0ms}
  .sava-screen > *:nth-child(2){animation-delay:180ms}
  .sava-screen > *:nth-child(3){animation-delay:320ms}
  .sava-screen > *:nth-child(4){animation-delay:460ms}
  .sava-screen > *:nth-child(5){animation-delay:600ms}
  .sava-screen__dot::after{
    content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
    animation:sava-pulse 1.8s cubic-bezier(.16,1,.3,1) infinite;animation-delay:780ms;
  }
}
@keyframes sava-screen-in{to{opacity:1;transform:translateY(0)}}
@keyframes sava-pulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}

/* --- problem --- */
.sava-problem__grid{display:grid;gap:var(--space-8);align-items:center}
.sava-problem-numlist{display:flex;flex-direction:column;gap:var(--space-6)}
.sava-problem-numlist__item{display:flex;align-items:baseline;gap:var(--space-4);border-bottom:1px solid var(--border-hairline);padding-bottom:var(--space-4)}
.sava-problem-numlist__item span:last-child{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;color:var(--text-primary)}
.sava-problem-numlist__num{font-family:var(--font-mono);font-weight:600;color:var(--brand-mark);font-size:3rem;line-height:0.8;letter-spacing:-0.02em;flex:0 0 auto;min-width:2.2ch}
@media (min-width:900px){.sava-problem__grid{grid-template-columns:1fr 1fr}}

/* --- modules --- */
.sava-modules__grid{display:grid;gap:16px;margin-top:var(--space-8)}
@media (min-width:640px){.sava-modules__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.sava-modules__grid{grid-template-columns:repeat(3,1fr)}}
/* --cap2: for a 5-card grid, the 3-column step produces a ragged 3+2 last
   row (layout pass 2026-07-26) — stay at 2 columns so 5 items settle as a
   clean 2/2/1 instead. */
.sava-modules__grid--cap2{max-width:800px;margin-left:auto;margin-right:auto}
@media (min-width:960px){.sava-modules__grid--cap2{grid-template-columns:repeat(2,1fr)}}

/* --- modules: lead (the mechanism) vs. secondary (the rest) — critique
   2026-07-25 flagged the flat 3x2 grid for burying the real differentiator
   (SIEL + real-time diffusion) under generic enumeration; this gives the two
   mechanism modules their own weight instead of equal billing with the rest. */
.sava-modules__lead{display:grid;gap:20px;margin-top:var(--space-8)}
@media (min-width:700px){.sava-modules__lead{grid-template-columns:1fr 1fr}}
.sava-modules__lead .sava-card{padding:var(--space-8);background:var(--surface-tint);border-color:var(--surface-tint-border)}
.sava-modules__lead .sava-card__title{font-size:1.375rem;font-weight:700;margin-bottom:10px}
.sava-modules__lead .sava-card__body{font-size:16px}
.sava-modules__secondary{display:grid;gap:14px;margin-top:18px}
@media (min-width:640px){.sava-modules__secondary{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.sava-modules__secondary{grid-template-columns:repeat(4,1fr)}}
.sava-modules__secondary .sava-card{padding:var(--space-5)}
.sava-modules__secondary .sava-card__icon svg{width:20px;height:20px}
.sava-modules__secondary .sava-card__title{font-size:14px}
.sava-modules__secondary .sava-card__body{font-size:13px}

/* --- two ways --- */
.sava-twoways__grid{display:grid;gap:24px;margin-top:var(--space-8)}
@media (min-width:768px){.sava-twoways__grid{grid-template-columns:1fr 1fr}}
.sava-twoways__card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:var(--space-10) var(--space-8)}
.sava-twoways__head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.sava-twoways__head svg{color:var(--brand-mark);width:30px;height:30px}
.sava-twoways__card--solo .sava-twoways__head svg{color:var(--accent)}
.sava-twoways__card h3{font-size:1.625rem;font-weight:var(--weight-black);margin:10px 0 10px;color:var(--text-heading-strong)}
.sava-twoways__card p{font-family:var(--font-serif);font-size:16px;color:var(--text-secondary);line-height:1.6;margin:0 0 var(--space-5)}

/* --- faq (native <details>, no JS accordion library needed) --- */
.sava-faq{border-top:1px solid var(--border-hairline)}
.sava-faq details{border-bottom:1px solid var(--border-hairline)}
.sava-faq summary{
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;padding:1.25rem 0.25rem;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--text-primary);
  transition:color 150ms var(--ease-standard);
}
.sava-faq summary::-webkit-details-marker{display:none}
.sava-faq summary::after{
  content:"+";font-family:var(--font-mono);font-size:1.2rem;color:var(--text-muted);flex:none;
  display:inline-block;transition:transform 200ms var(--ease-standard),color 150ms var(--ease-standard);
}
.sava-faq details[open] summary::after{transform:rotate(45deg);color:var(--text-brand)}
.sava-faq details[open] summary{color:var(--text-brand)}
.sava-faq__body{font-family:var(--font-serif);padding:0 0.25rem 1.5rem;color:var(--text-secondary);line-height:1.6;animation:sava-fade-in 220ms var(--ease-out)}
@keyframes sava-fade-in{from{opacity:0}to{opacity:1}}

/* --- contact --- */
.sava-field{display:flex;flex-direction:column;gap:6px}
.sava-field label{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text-primary)}
.sava-input,.sava-textarea{
  font-family:var(--font-serif);font-size:15px;padding:10px 14px;border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-primary);
  box-shadow:inset 0 0 0 0 var(--focus-ring);transition:box-shadow var(--duration-base) var(--ease-standard);
}
.sava-input:focus,.sava-textarea:focus{outline:none;border-color:var(--focus-ring);box-shadow:0 0 0 3px var(--focus-ring-tint)}
.sava-textarea{resize:vertical;min-height:100px}

/* --- footer --- */
.sava-footer{background:var(--surface-sunken);padding:var(--space-10) 0}
.sava-footer__grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.sava-footer__meta{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin:10px 0 0}
.sava-footer__links{font-family:var(--font-display);font-size:14px;display:flex;gap:20px;flex-wrap:wrap}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}