/* Savoira — Accueil v2 (brief de refonte juillet 2026)
   Tokens du brief §4 : 6 couleurs + star, Instrument Sans + Newsreader italique,
   grille 1160, sections 112/64, radii 16/12/24, un seul token d'ombre. */

/* ---------- Reset & tokens ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #101613;
  --pine: #0E3B2C;
  --pine-hover: #0C3225;
  --moss: #DFEBE3;
  --cream: #FAF8F2;
  --white: #FFFFFF;
  --line: #E7E3D9;
  --star: #E8A33D;
  --muted: rgba(16, 22, 19, .64);
  --cream-72: rgba(250, 248, 242, .72);
  --shadow: 0 1px 2px rgba(16, 22, 19, .04), 0 8px 24px rgba(16, 22, 19, .06);
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  /* Troisième face, strictement utilitaire (revue CCM §4.1) : métadonnées,
     fils d'Ariane, badges de durée, chaînes techniques (emails, n° de
     certificat). 12 px · +8 % d'interlettrage · capitales pour badges et
     breadcrumbs, bas de casse pour les chaînes techniques. Jamais dans les
     titres ni le corps de texte. */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
  background: var(--cream);
}

img { display: block; max-width: 100%; }
a { color: var(--pine); text-decoration: none; }
a:hover { color: var(--pine-hover); }

:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 2px; }

.container { width: min(100% - 48px, 1160px); margin-inline: auto; }

/* ---------- Typographie (§4.2) ---------- */
.h1 { font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.h2 { font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.h3 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.body-l { font-size: 19px; line-height: 30px; font-weight: 400; }
.caption { font-size: 13px; line-height: 18px; font-weight: 500; }
.eyebrow {
  display: block;
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pine);
}
em.serif, .serif-frag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}
.muted { color: var(--muted); }

/* Motifs inscrits au système (revue FAQ §4) — référence : FAQ.html
   · Rangée de stats sous le hero : chiffre en H3 (22/28, 600) + label mono caps.
   · Chips de suggestion sous une recherche (« Souvent demandé : … »).
   · Sidebar d'ancres numérotées avec compteurs + scroll-spy (pages longues).
   · Carte support compacte sombre (pine) en pied de sidebar.
   · Bande contact sombre à trois cartes — compte comme LE moment sombre de sa
     page (un seul par page, footer non compris). */

/* Face mono utilitaire (système — revue CCM §4.1) */
.meta-mono {
  font-family: var(--mono);
  font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: .08em;
}
.meta-mono.caps { text-transform: uppercase; }

/* Fil d'Ariane des pages intérieures (système — revue CCM §4.3) :
   « SAVOIRA / NOM DE LA PAGE » remplace l'eyebrow simple de la home. */
.breadcrumb {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--pine); }
.breadcrumb .bc-sep { color: var(--line-sep, var(--muted)); opacity: .6; }
.breadcrumb .current { color: var(--pine); }

/* En-tête de section : eyebrow → H2 → sous-titre (rythme répété, §4.2) */
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .h2 { margin-top: 16px; }
.section-head .sub { margin-top: 16px; color: var(--muted); max-width: 56ch; }
.section-head.center .sub { margin-inline: auto; }

/* ---------- Sections (§4.3) ---------- */
.section { padding: 112px 0; }
.section-tight { padding: 48px 0; }

/* ---------- Boutons (§5) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border-radius: 12px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary { background: var(--pine); color: var(--cream); }
.btn-primary:hover { background: var(--pine-hover); color: var(--cream); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: rgba(16, 22, 19, .05); color: var(--ink); }
.btn-inverted { background: var(--cream); color: var(--pine); }
.btn-inverted:hover { background: var(--white); color: var(--pine); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 15px; }

.link-tertiary {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--pine); font-weight: 600; font-size: 16px;
  transition: color .18s ease;
  padding: 12px 0; margin: -12px 0; /* zone tactile ≥ 44 px */
}
.link-tertiary .arr { transition: transform .18s ease; }
.link-tertiary:hover { color: var(--pine); text-decoration: underline; text-underline-offset: 3px; }
.link-tertiary:hover .arr { transform: translateX(4px); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--moss); color: var(--pine);
  font-size: 13px; line-height: 18px; font-weight: 500;
}
.filter-pill {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 16px; border-radius: 999px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line);
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.filter-pill:hover { border-color: var(--ink); }
.filter-pill.active { background: var(--pine); color: var(--cream); border-color: var(--pine); }
/* Zone tactile ≥ 44 px sans changer la taille visuelle (mobile pass §3) */
.filter-pill { position: relative; }
.filter-pill::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }

/* ---------- Nav & footer : voir site-chrome.css (composant partagé) ---------- */

section[id], .section { scroll-margin-top: 72px; }

/* ---------- Héros (§6.1) ---------- */
.hero { padding: 112px 0 0; text-align: center; }
.hero-inner { max-width: 820px; margin-inline: auto; }
.hero .h1 { margin-top: 20px; }
/* Pastille de preuve au-dessus du H1 (pass v3 §3.1) */
.proof-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px; margin-top: 20px;
  border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  color: var(--ink);
}
.pp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--moss); border: 1px solid var(--line); }
.pp-sep { color: var(--muted); }
.pp-star { color: var(--star); }
.hero-sub { margin-top: 20px; color: var(--muted); max-width: 56ch; margin-inline: auto; }
.hero-ctas { display: flex; justify-content: center; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

/* Variante tweak : moment serif dans le H1 (défaut) ou le sous-titre */
.v-sub { display: none; }
body[data-serif="sub"] .v-h1 { display: none; }
body[data-serif="sub"] .v-sub { display: inline; }
body[data-serif="sub"] .sub-frag { font-family: var(--serif); font-style: italic; font-weight: 500; }

/* Capture produit du héros : cadre radius 24, bordure 1 px (§4.4) */
.hero-frame-wrap { padding: 72px 0 40px; }
.hero-frame {
  width: min(100%, 1000px); margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Recadrage dans la capture (les fichiers incluent leur propre chrome + fond) */
.crop { position: relative; overflow: hidden; }
.crop img {
  position: absolute;
  max-width: none;
  width: calc(100% / var(--cw));
  height: calc(100% / var(--ch));
  left: calc(-100% * var(--cl) / var(--cw));
  top: calc(-100% * var(--ct) / var(--ch));
}
/* héros : tableau de bord, ~75 % supérieurs de l'app (brief §6.1) —
   dashboard-hero.webp v3 : capture app seule (2876×1458), sans chrome ni fond —
   pleine largeur, recadrage vertical uniquement, sans étirement */
.crop-hero { --cl: 0; --cw: 1; --ct: 0; --ch: .773; aspect-ratio: 2.55; }
body[data-capture="complete"] .crop-hero { --ch: 1; aspect-ratio: 2876 / 1458; }
/* blocs produit : zone app, même échelle de contenu pour les trois cadres
   (final pass §2.2 — cw ≈ .74 partout) */
.crop-dashboard  { --cl: .053; --cw: .924; --ct: 0; --ch: 1; aspect-ratio: 1.874; } /* mes-cours-hd.webp : capture app seule (2880×1420), sidebar exclue */
.crop-explorer   { --cl: .053; --cw: .922; --ct: 0; --ch: 1; aspect-ratio: 1.874; } /* explorer-hd.webp : capture app seule (2878×1416), sidebar exclue */
.crop-certificat { --cl: 0; --cw: 1; --ct: 0; --ch: 1; aspect-ratio: 1922 / 1308; } /* certificat-hd.webp : document entier (1922×1308), plein cadre */

/* ---------- Bande logos (§6.2) ---------- */
.logos { border-bottom: 1px solid var(--line); }
.logos-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.logos-label { color: var(--muted); white-space: nowrap; }
/* Deux logos propres (note v2.4) : label à gauche, logos à droite, écart 56 px —
   l'air est voulu. Structure prête à accueillir d'autres marques. */
.wordmarks { display: flex; align-items: center; gap: 56px; }
.wordmarks img {
  width: auto;
  filter: grayscale(1) brightness(.25);
  opacity: .4;
}
.wordmarks img[alt="Orange"] { height: 30px; }
.wordmarks img[alt="Rawbank"] { height: 27px; }

/* ---------- Catalogue (§6.3) ---------- */
.filters { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 48px; }
.courses-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 40px;
}

/* Traitement de carte unique (§4.4) : bordure par défaut, ombre via tweak */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
}
body[data-cartes="ombre"] .card { border-color: transparent; box-shadow: var(--shadow); }

.course-card {
  display: flex; flex-direction: column;
  padding: 24px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.course-card.hidden { display: none; }

.cc-top { display: flex; align-items: center; gap: 8px; }
.cc-rating {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto;
  font-size: 13px; line-height: 18px; font-weight: 500;
  color: var(--muted);
}
.cc-rating svg { color: var(--star); }
.course-card .h3 { margin-top: 16px; }
.cc-desc {
  margin-top: 8px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cc-meta { margin-top: 12px; margin-bottom: 20px; color: var(--muted); }
/* Footer de carte épinglé en bas : filets et prix alignés sur toute la rangée */
.cc-divider { height: 1px; background: var(--line); margin-top: auto; }
.cc-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.cc-price { font-size: 22px; line-height: 28px; font-weight: 600; }

.catalog-foot { display: flex; justify-content: center; margin-top: 48px; }

/* ---------- Blocs produit (§6.4) ---------- */
.features { display: flex; flex-direction: column; gap: 96px; margin-top: 72px; }
.feature {
  display: grid; grid-template-columns: 4fr 7fr; align-items: center;
  gap: 64px;
}
.feature.flip { grid-template-columns: 7fr 4fr; }
.feature.flip .feature-text { order: 2; }
.feature.flip .feature-shot { order: 1; }
.feature-text .h3 { margin-top: 14px; font-size: 26px; line-height: 32px; }
.feature-text p { margin-top: 10px; color: var(--muted); max-width: 44ch; }
.feature-text .link-tertiary { margin-top: 18px; }
.feature-shot {
  background: var(--white);
  /* les captures partagent le fond papier de la page : bordure renforcée
     + ombre au repos (exception « fenêtre produit ») pour détacher le cadre */
  border: 1px solid #DBD5C6;
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ---------- Comment ça marche (§6.5) ---------- */
.values {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px;
  margin-top: 64px;
}
.value-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--moss); color: var(--pine);
}
.value .h3 { margin-top: 16px; }
.value p { margin-top: 6px; color: var(--muted); }

/* ---------- Tarifs — le panneau sombre unique (§6.6) ---------- */
.pricing-panel {
  background: var(--pine);
  border-radius: 24px;
  padding: 64px;
  display: grid; grid-template-columns: 1fr 420px; gap: 64px;
  color: var(--cream);
  position: relative; overflow: hidden;
}
/* Texture discrète — grille cream à ~5 %, cellules 24 px, fondue vers les bords
   (pass v3 §3.3 — seul le panneau tarifs porte une texture) */
.pricing-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(250, 248, 242, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 248, 242, .05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(115% 115% at 50% 40%, #000 30%, transparent 76%);
  mask-image: radial-gradient(115% 115% at 50% 40%, #000 30%, transparent 76%);
}
.pricing-panel > * { position: relative; }
.pricing-panel .eyebrow { color: var(--moss); }
.pricing-panel .h2 { color: var(--cream); margin-top: 16px; }
.pricing-copy { margin-top: 16px; color: var(--cream-72); max-width: 48ch; }
.pricing-checklist { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.pricing-checklist li { display: flex; align-items: flex-start; gap: 10px; }
.pricing-checklist svg { flex: none; margin-top: 5px; color: var(--moss); }
.pricing-panel .btn-inverted { margin-top: 36px; }

.price-card {
  background: var(--white);
  border-radius: 16px;
  padding: 32px;
  color: var(--ink);
  align-self: center;
}
.price-card .pc-title { font-size: 22px; line-height: 28px; font-weight: 600; }
.price-card .pc-sub { margin-top: 6px; color: var(--muted); }
.track-list { margin-top: 24px; border-top: 1px solid var(--line); }
.track-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.track-name { font-weight: 500; }
.track-note { color: var(--muted); }
.track-price { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-foot { margin-top: 20px; }

/* ---------- Preuves (§6.7) ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.quote-card { padding: 32px; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.quote-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.quote-stars { display: flex; gap: 3px; color: var(--star); }
.quote-card blockquote {
  margin-top: 18px;
  font-size: 19px; line-height: 30px;
  text-wrap: pretty;
}
.quote-who { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 0; margin-top: auto; padding-top: 24px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--moss); color: var(--pine);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.qw-name { font-size: 15px; font-weight: 600; display: block; }
.qw-role { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--muted); }

.stats-line { margin-top: 56px; text-align: center; color: var(--muted); }
.stats-line .dot { margin: 0 10px; }

/* ---------- CTA finale (§6.8) ---------- */
.final-cta { text-align: center; }
.final-cta .h2 { margin-top: 16px; }
.final-cta p { margin-top: 16px; color: var(--muted); }
.final-cta .actions {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-top: 36px; flex-wrap: wrap;
}
/* Microcopie de réassurance sous les CTA (pass v3 §3.2) */
.cta-reassure {
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin-top: 24px; color: var(--muted);
}
.cr-item { display: inline-flex; align-items: center; gap: 8px; }
.cr-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--moss); color: var(--pine);
}

/* ---------- Footer : voir site-chrome.css (composant partagé) ---------- */

/* ---------- Motion (§8) : entrée blur-fade sur le héros uniquement ----------
   opacity 0 · blur(8px) · translateY(16px) → net, 500 ms ease-out, jouée une
   fois au chargement. Le reste de la page est visible immédiatement. */
html { --fx-step: 80ms; }
@media (prefers-reduced-motion: no-preference) {
  [data-fx-load] .fx {
    opacity: 0; visibility: hidden;
    filter: blur(8px);
    transform: translateY(16px);
    transition:
      opacity var(--fx-dur, .5s) ease-out,
      filter var(--fx-dur, .5s) ease-out,
      transform var(--fx-dur, .5s) ease-out,
      visibility 0s linear;
    transition-delay: calc(var(--fx-i, 0) * var(--fx-step, 80ms));
  }
  [data-fx-load] .fx.in { opacity: 1; visibility: visible; filter: blur(0); transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
  html { --fx-step: 50ms; }
  [data-fx-load] .fx { transform: translateY(12px); }
}

/* ---------- Responsive (§4.3 : 1160 / 768 / 480) ---------- */
@media (max-width: 1160px) {
  .pricing-panel { grid-template-columns: 1fr 380px; gap: 48px; padding: 48px; }
  .feature { gap: 40px; }
  .wordmarks { gap: 40px; }
}

@media (max-width: 900px) {
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .pricing-panel { grid-template-columns: 1fr; }
  .price-card { align-self: stretch; }
}

@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .section-tight { padding: 64px 0; }
  .hero { padding-top: 64px; }
  .hero-frame-wrap { padding: 40px 0 64px; }
  .h1 { font-size: 40px; line-height: 44px; }
  .h2 { font-size: 30px; line-height: 36px; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 24px; }
  .feature.flip .feature-shot { order: 0; }
  .feature.flip .feature-text { order: 1; }
  .feature-shot { order: 0; }
  .feature-text { order: 1; }
  .logos-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .pricing-panel { padding: 40px 28px; }
  .features { gap: 64px; margin-top: 48px; }
  /* Chips catalogue : une seule ligne en défilement horizontal, « Tous »
     visible d'abord, fondu au bord droit, pas de barre visible (mobile v2.5 §4). */
  .filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 28px;
    padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters .filter-pill { flex: none; }
}

@media (max-width: 600px) {
  .courses-grid { grid-template-columns: 1fr; }
  /* Héros : recadrage mobile dédié — accueil + carte de cours actif (≈ 4:3),
     lisible à ~350 px au lieu du dashboard entier réduit (mobile pass §2.2) */
  .crop-hero, body[data-capture="complete"] .crop-hero {
    --cl: .051; --cw: .610; --ct: .089; --ch: .862; aspect-ratio: 1.395;
  }
}

@media (max-width: 480px) {
  .values { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
  /* Ligne de réassurance : si elle casse, trois items en colonne centrée
     avec leurs coches — jamais en drapeau (mobile v2.5 §6). */
  .cta-reassure { flex-direction: column; align-items: center; gap: 12px; }
  /* Bande logos : label centré au-dessus, logos sur une ligne centrée (v2.4) */
  .logos-inner { align-items: center; }
  .wordmarks { justify-content: center; gap: 40px; }
  .wordmarks img[alt="Orange"] { height: 27px; }
  .wordmarks img[alt="Rawbank"] { height: 24px; }
}