/* ──────────────────────────────────────────────────────────────────
 * Stop Cyberviolences — Foundational tokens
 * Colors, type, spacing, radii and shadow primitives.
 * ────────────────────────────────────────────────────────────────── */

/* Webfonts — all from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;500;600;700;800&family=Alegreya+Sans:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&family=League+Spartan:wght@600;700&family=Borel&display=swap");

:root {
  /* ════════ COLOR — Brand core ════════
   * Teintes ajustées pour le contraste WCAG 2.1 AA (audit Axe-core, juin 2026).
   * Les couleurs « texte/CTA » ont été assombries pour atteindre ≥ 4.5:1.
   * Valeurs d'origine conservées en commentaire pour mémoire. */
  --scv-indigo-700: #2E2CB8;   /* ex #4B4AA5 — texte sur indigo-300 (4.51 → 5.88) */
  --scv-indigo-600: #5654D4;   /* ex #6B63FF — texte/boutons (3.97 → 5.33) */
  --scv-indigo-500: #4644D4;   /* ex #6967F6 — couleur de marque (4.31 → 6.91) */
  --scv-indigo-300: #C6C4FF;
  --scv-indigo-200: #9695FF;

  --scv-coral-700: #9E2B2A;    /* ex #C84E4D — texte/hover, tag corail (3.08 → 5.06) */
  --scv-coral-600: #B8302F;    /* ex #E3736E — liens, bouton « Modifier » (3.02 → 6.0) */
  --scv-coral-500: #C94A49;    /* ex #F36B6A — fond des cards rouges (2.94 → 4.61) */
  --scv-coral-400: #FF5A58;

  --scv-green-700: #036B50;    /* ex #149E7B — ombre CTA + texte baromètre (2.95 → 5.68) */
  --scv-green-600: #048061;    /* ex #07C191 — CTA « Continuer », « Je m'inscris » (2.32 → 4.92) */
  --scv-green-500: #00CEB2;
  --scv-green-400: #39E083;

  --scv-yellow-500: #FBF79A;
  --scv-yellow-600: #EFE637;
  --scv-yellow-700: #C7C231;
  --scv-yellow-ink: #474405;

  --scv-mint-500: #7CE0C6;
  --scv-mint-600: #00CEB2;
  --scv-mint-ink: #1A4D40;     /* ex #236A58 — texte sur menthe/cards vertes (4.07 → 6.12) */

  --scv-teal-500: #207586;

  /* ════════ COLOR — Neutrals ════════ */
  --scv-ink:        #000000;
  --scv-ink-soft:   #1E1E1E;
  --scv-ink-mute:   #383838;
  --scv-ink-faint:  #6E6E6E;   /* ex #757575 — gris « faint » / placeholders, garanti ≥4.5:1 sur fonds clairs */

  --scv-line-strong: #AAA9A9;
  --scv-line:        #D2D2D2;
  --scv-line-soft:   #D9D9D9;
  --scv-surface-2:   #EFEFEF;
  --scv-surface-1:   #F5F5F5;
  --scv-surface-0:   #FDFDFD;
  --scv-paper:       #FFFFFF;

  /* ════════ COLOR — Semantic ════════ */
  --scv-fg:         var(--scv-ink);
  --scv-fg-muted:   var(--scv-ink-faint);
  --scv-fg-onDark:  #FFFFFF;
  --scv-bg:         var(--scv-paper);
  --scv-bg-soft:    var(--scv-indigo-300);
  --scv-brand:      var(--scv-indigo-500);
  --scv-cta:        var(--scv-green-600);
  --scv-alert:      var(--scv-coral-500);
  --scv-link:       var(--scv-coral-600);

  /* ════════ TYPE — Families ════════ */
  --scv-font-body:    "PT Sans", "Helvetica Neue", Arial, sans-serif;
  --scv-font-ui:      "Inter", "Helvetica Neue", Arial, sans-serif;
  --scv-font-display: "Alegreya Sans", "PT Sans", Georgia, sans-serif;
  --scv-font-poster:  "League Spartan", "Alegreya Sans", sans-serif;
  --scv-font-accent:  "Borel", "Brush Script MT", cursive;

  /* ════════ TYPE — Scale ════════ */
  --scv-size-12: 12px;
  --scv-size-14: 14px;
  --scv-size-16: 16px;
  --scv-size-18: 18px;
  --scv-size-20: 20px;
  --scv-size-23: 23px;
  --scv-size-24: 24px;
  --scv-size-32: 32px;
  --scv-size-40: 40px;
  --scv-size-46: 46px;
  --scv-size-48: 48px;

  /* ════════ TYPE — Tracking ════════ */
  --scv-track-tight:  -0.010em;
  --scv-track-normal:  0;
  --scv-track-button:  0.030em;
  --scv-track-eyebrow: 0.050em;

  /* ════════ SPACING ════════ */
  --scv-space-1:  4px;
  --scv-space-2:  8px;
  --scv-space-3: 12px;
  --scv-space-4: 16px;
  --scv-space-5: 24px;
  --scv-space-6: 32px;
  --scv-space-7: 48px;
  --scv-space-8: 64px;
  --scv-space-9: 96px;

  /* ════════ RADII ════════ */
  --scv-radius-xs:    4px;
  --scv-radius-sm:    6px;
  --scv-radius-md:    9px;
  --scv-radius-lg:   16px;
  --scv-radius-xl:   24px;
  --scv-radius-pill: 9999px;

  /* ════════ SHADOW ════════ */
  --scv-shadow-cta:    0 4px 0 0 var(--scv-green-700);
  --scv-shadow-card:   0 1px 2px 0 rgba(12,12,13,0.05),
                       0 4px 8px 0 rgba(12,12,13,0.05);
  --scv-shadow-pop:    0 8px 24px 0 rgba(12,12,13,0.10);
  --scv-shadow-poster: 0 0 69px 0 rgba(198,196,255,0.5);

  /* ════════ BORDERS ════════ */
  --scv-border-card:    3px solid;
  --scv-border-logo:    7px solid #fff;
  --scv-border-thin:    1px solid var(--scv-line);

  /* ════════ LAYOUT ════════ */
  --scv-container:     1199px;
  --scv-page-pad:        120px;
  --scv-header-h:         88px;
}

html { font-family: var(--scv-font-body); color: var(--scv-fg); background: var(--scv-bg); }
body { margin: 0; font-size: var(--scv-size-16); line-height: 1.5; }

/* ════════ RESPONSIVE LAYOUT ════════ */
.scv-container { padding: 0 40px; }
.scv-footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 48px; align-items: start; }
/* min-width:0 → les colonnes 1fr peuvent rétrécir sous la largeur min de leur contenu
   (sinon l'input newsletter force ~342px et déborde horizontalement sur mobile) */
.scv-footer-grid > * { min-width: 0; }

@media (max-width: 900px) {
  .scv-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .scv-container { padding: 0 16px; }
  .scv-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ════════ ONBOARDING « Mieux te connaître » ════════
   Rail fixe + colonne contenu. Sur tablette (iPad), le rail de 440px + un
   padding de 80px laissaient trop peu de place → débordement horizontal
   (iPad/WebKit). On rétrécit le rail et le padding par paliers, et la colonne
   contenu a min-width:0 pour pouvoir rétrécir. */
/* min-height 100vh (et 100dvh pour la barre d'outils dynamique iOS/Android) :
   l'écran onboarding n'a pas de header → le rail bleu doit descendre jusqu'en bas. */
.scv-onb-shell { display: grid; grid-template-columns: 440px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.scv-onb-main  { min-width: 0; padding: 72px 80px; display: flex; flex-direction: column; align-items: stretch; }
@media (max-width: 1024px) {
  .scv-onb-shell { grid-template-columns: 340px minmax(0, 1fr); }
  .scv-onb-main  { padding: 56px 40px; }
}
@media (max-width: 767px) {
  .scv-onb-shell { display: flex; flex-direction: column; }
  .scv-onb-main  { padding: 24px 20px 20px; }
}

.scv-display {
  font-family: var(--scv-font-poster);
  font-weight: 700;
  font-size: var(--scv-size-46);
  line-height: 1.05;
  letter-spacing: var(--scv-track-normal);
  color: var(--scv-ink-mute);
}

h1, .scv-h1 {
  font-family: var(--scv-font-display);
  font-weight: 700;
  font-size: var(--scv-size-32);
  line-height: 1;
  margin: 0 0 var(--scv-space-5);
  color: var(--scv-ink);
}

.scv-eyebrow {
  font-family: var(--scv-font-body);
  font-weight: 700;
  font-size: var(--scv-size-32);
  line-height: 1;
  letter-spacing: var(--scv-track-eyebrow);
  text-transform: uppercase;
  color: var(--scv-fg-onDark);
}

h2, .scv-h2 {
  font-family: var(--scv-font-body);
  font-weight: 700;
  font-size: var(--scv-size-24);
  line-height: 1;
  margin: 0 0 var(--scv-space-3);
}

h3, .scv-h3 {
  font-family: var(--scv-font-ui);
  font-weight: 700;
  font-size: var(--scv-size-23);
  line-height: 1;
  margin: 0 0 var(--scv-space-3);
}

p, .scv-body {
  font-family: var(--scv-font-body);
  font-size: var(--scv-size-16);
  line-height: 1.5;
  margin: 0 0 var(--scv-space-4);
}

.scv-body-sm {
  font-family: var(--scv-font-body);
  font-size: var(--scv-size-14);
  line-height: 1.4;
}

.scv-lead {
  font-family: var(--scv-font-body);
  font-size: var(--scv-size-18);
  line-height: 1.4;
}

.scv-ui {
  font-family: var(--scv-font-ui);
  font-weight: 700;
  font-size: var(--scv-size-14);
  letter-spacing: var(--scv-track-button);
}

/* Placeholders : couleur explicite à contraste suffisant (≥4.5:1 sur fond clair).
   opacity:1 neutralise l'éclaircissement appliqué par Firefox. */
::placeholder { color: var(--scv-ink-faint); opacity: 1; }

a, .scv-link {
  color: var(--scv-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--scv-coral-700); }

code, .scv-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--scv-surface-1);
  padding: 0.1em 0.35em;
  border-radius: var(--scv-radius-xs);
}

/* ════════ ACCESSIBILITÉ — masquage visuel (lecteurs d'écran seuls) ════════
   Titres de structure (h1/h2) ajoutés pour la hiérarchie WCAG sans impact visuel. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}