/*
  Stocky — feuille de style de la page publique bilingue.
  Jetons de design repris tels quels de docs/DIRECTION_ARTISTIQUE.md (§2, 3, 4).
  Pas de framework CSS : dépendance zéro, conforme au budget de performance.

  TODO AVANT LANCEMENT : déposer les fichiers de police réels auto-hébergés et
  sous-ensemblés (Atkinson Hyperlegible + Schibsted Grotesk, Latin + FR) dans
  static marketing slash fonts (regular + bold Atkinson Hyperlegible en
  woff2, 600 + 700 Schibsted Grotesk en woff2), PUIS ajouter les règles
  @font-face correspondantes ici (poids 400/700 pour le corps, 600/700 pour
  les titres, font-display: swap à chaque fois).

  Aucune règle @font-face n'est déclarée pour l'instant : WhiteNoise valide au
  build (`collectstatic`, stockage manifest — cf. config/base.py) que tout
  chemin référencé dans un CSS existe réellement, même à l'intérieur d'un
  commentaire CSS (il scanne le texte, pas la syntaxe). Tant que les vrais
  fichiers de police ne sont pas livrés, la page utilise volontairement la
  pile de secours système (Segoe UI/Arial) : aucune casse visuelle, et le
  build ne risque pas d'échouer sur un fichier de police absent.
*/

:root {
  /* Marque */
  --green: #1F5A44;
  --green-700: #163F30;
  --green-100: #E3EEE7;
  --green-50: #F1F7F3;
  --ocre: #B9792C;
  --ocre-700: #8A5A1E;
  --ocre-100: #F3E6D3;
  --paper: #FBF7EF;
  --paper-card: #FFFFFF;
  --ink: #1C1B18;
  --ink-600: #4B4A45;
  --border: #E4E1D8;

  /* Sémantique (réservé aux états de stock/alertes — jamais décoratif) */
  --status-ok: #1F7A4D;
  --status-ok-bg: #E4F3EA;
  --status-warn: #A85F00;
  --status-warn-bg: #FBEBCF;
  --status-bad: #B3261E;
  --status-bad-bg: #FBE4E1;

  /* Typo */
  --font-body: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  --font-heading: "Schibsted Grotesk", "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;

  /* Espacement (base 8px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Rayons — usage différencié, jamais "tout arrondi" */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Élévation */
  --elevation-1: 0 1px 3px rgba(28, 27, 24, 0.08);
  --elevation-2: 0 4px 10px rgba(28, 27, 24, 0.12);
  --elevation-3: 0 8px 24px rgba(28, 27, 24, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1B1A17;
    --paper-card: #262420;
    --ink: #F3F0E8;
    --ink-600: #C9C5BA;
    --border: #3A382F;
    --green: #3C8A6B;
    --green-100: #1F352C;
    --green-50: #202a25;
    --ocre: #D99A4E;
    --ocre-100: #3a2c1a;
  }
}
:root[data-theme="dark"] {
  --paper: #1B1A17;
  --paper-card: #262420;
  --ink: #F3F0E8;
  --ink-600: #C9C5BA;
  --border: #3A382F;
  --green: #3C8A6B;
  --green-100: #1F352C;
  --green-50: #202a25;
  --ocre: #D99A4E;
  --ocre-100: #3a2c1a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; display: block; }

a { color: var(--green); }
a:hover { color: var(--green-700); }

:focus-visible {
  outline: 3px solid var(--ocre-700);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  color: var(--ink);
}
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
@media (min-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
}

p { margin: 0 0 var(--space-4); }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper-card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--elevation-1);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 21px;
  color: var(--green-700);
  text-decoration: none;
}
.main-nav {
  display: none;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a { text-decoration: none; color: var(--ink); font-size: 15px; }
@media (min-width: 900px) {
  .main-nav { display: flex; }
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.lang-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lang-switch a {
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
  font-size: 13px;
  color: var(--ink-600);
  min-width: 32px;
  text-align: center;
}
.lang-switch a[aria-current="true"] {
  background: var(--green-100);
  color: var(--green-700);
  font-weight: 700;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-700); }
.btn-secondary { background: transparent; color: var(--green-700); border-color: var(--green); }
.btn-secondary:hover { background: var(--green-50); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-block { width: 100%; }

/* ---------- Hero (split text/image) ---------- */
.hero {
  padding: var(--space-8) 0 var(--space-6);
  background: var(--green-50);
}
.hero__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.1fr 1fr; align-items: center; }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); }
.hero__reassurance { font-size: 14px; color: var(--ink-600); max-width: 42ch; }

.placeholder-visual {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--paper-card);
  color: var(--ink-600);
  font-size: 14px;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Pain section: list, not a 3-card grid ---------- */
.pain {
  padding: var(--space-8) 0;
}
.pain__list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin: var(--space-5) 0;
}
@media (min-width: 700px) {
  .pain__list { grid-template-columns: 1fr 1fr; }
}
.pain__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper-card);
}
.pain__tag {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ocre-700);
  background: var(--ocre-100);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
  height: fit-content;
}
.pain__images {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (min-width: 700px) {
  .pain__images { grid-template-columns: 1fr 1fr; }
}

/* ---------- How it works: full-width numbered band ---------- */
.how {
  padding: var(--space-8) 0;
  background: var(--paper-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.how__steps {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (min-width: 900px) {
  .how__steps { grid-template-columns: repeat(3, 1fr); }
}
.how__step { position: relative; padding-left: var(--space-7); }
.how__step-number {
  position: absolute;
  left: 0; top: 0;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--green);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Features: offset split rows per audience ---------- */
.features { padding: var(--space-8) 0; }
.feature-row {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}
.feature-row ul { margin: 0; padding-left: var(--space-5); }
.feature-row li { margin-bottom: var(--space-2); }

.highlight-block {
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-5) 0;
}
.highlight-block + .highlight-block { margin-top: var(--space-4); }

.tools-list { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.tools-list .tool { border-left: 3px solid var(--ocre); padding-left: var(--space-4); }

/* ---------- Country section: simple checklist, full width band ---------- */
.country {
  padding: var(--space-8) 0;
  background: var(--ink);
  color: var(--paper);
}
.country h2 { color: var(--paper); }
.country__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .country__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.country__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.country__list li { padding-left: var(--space-5); position: relative; }
.country__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px;
  background: var(--ocre);
  border-radius: 2px;
}
.country .placeholder-visual { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.25); color: #D9D6CC; }

/* ---------- Tour: simple list with a single visual, not a grid ---------- */
.tour { padding: var(--space-8) 0; }
.tour__list { list-style: none; margin: var(--space-5) 0; padding: 0; counter-reset: tour; }
.tour__list li {
  counter-increment: tour;
  padding: var(--space-3) 0 var(--space-3) var(--space-7);
  border-top: 1px solid var(--border);
  position: relative;
}
.tour__list li::before {
  content: counter(tour);
  position: absolute; left: 0; top: var(--space-3);
  font-family: var(--font-heading); font-weight: 700;
  color: var(--green-700);
}

/* ---------- Pilot programme ---------- */
.pilot {
  padding: var(--space-8) 0;
  background: var(--ocre-100);
}
.pilot__grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .pilot__grid { grid-template-columns: 1.2fr 1fr; align-items: center; } }

/* ---------- Pricing ---------- */
.pricing { padding: var(--space-8) 0; }
.pricing__toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: var(--space-4) 0 var(--space-5);
  overflow: hidden;
}
.pricing__toggle button {
  font-family: var(--font-body);
  border: none;
  background: var(--paper-card);
  color: var(--ink-600);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-size: 14px;
}
.pricing__toggle button[aria-selected="true"] {
  background: var(--green);
  color: #fff;
  font-weight: 700;
}
.pricing__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .pricing__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .pricing__grid { grid-template-columns: repeat(4, 1fr); }
}
.plan-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--paper-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.plan-card--featured {
  border-color: var(--green);
  box-shadow: var(--elevation-2);
}
.plan-card__badge {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  align-self: flex-start;
  margin-bottom: var(--space-2);
}
.plan-card__price {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  margin: var(--space-2) 0;
}
.plan-card__price small { font-size: 14px; font-weight: 400; color: var(--ink-600); }
.plan-card ul { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); font-size: 14px; }
.pricing__reassurance { margin-top: var(--space-5); font-size: 14px; color: var(--ink-600); display: grid; gap: var(--space-2); }

/* ---------- Lead form ---------- */
.lead-form-section { padding: var(--space-8) 0; background: var(--green-50); }
.lead-form { max-width: 640px; display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.form-field { display: grid; gap: var(--space-1); }
.form-field label { font-weight: 700; font-size: 14px; }
.form-field .help { font-size: 12px; color: var(--ink-600); }
.form-field input,
.form-field select {
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--paper-card);
  color: var(--ink);
}
.form-field.has-error input,
.form-field.has-error select { border-color: var(--status-bad); }
.form-field .field-error { color: var(--status-bad); font-size: 13px; }
.form-consent { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 14px; }
.form-consent input { width: 20px; height: 20px; margin-top: 2px; }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success {
  background: var(--status-ok-bg);
  color: var(--status-ok);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-weight: 700;
}
.form-error-banner {
  background: var(--status-bad-bg);
  color: var(--status-bad);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

/* ---------- FAQ accordion (native <details>, zero JS) ---------- */
.faq { padding: var(--space-8) 0; }
.faq details {
  border-top: 1px solid var(--border);
  padding: var(--space-3) 0;
}
.faq summary {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  padding: var(--space-2) 0;
  list-style: none;
  position: relative;
  padding-right: var(--space-6);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: var(--space-2);
  font-size: 20px;
  color: var(--green-700);
}
.faq details[open] summary::after { content: "–"; }
.faq .faq-answer { padding-top: var(--space-2); color: var(--ink-600); }

/* ---------- Final CTA band ---------- */
.final-cta {
  padding: var(--space-8) 0;
  background: var(--green-700);
  color: #fff;
  text-align: center;
}
.final-cta h2 { color: #fff; }
.final-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); }
.final-cta .btn-secondary { color: #fff; border-color: #fff; }
.final-cta .btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* ---------- Footer ---------- */
.site-footer { padding: var(--space-6) 0; background: var(--ink); color: var(--paper); }
.site-footer__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.site-footer h3 { color: var(--paper); font-size: 15px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-size: 14px; color: #D9D6CC; }
.site-footer__note { margin-top: var(--space-5); font-size: 13px; color: #B8B4A8; border-top: 1px solid #3A382F; padding-top: var(--space-4); }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 50;
  max-width: 640px;
  margin: 0 auto;
  background: var(--paper-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  padding: var(--space-4);
}
.cookie-banner p { font-size: 13px; color: var(--ink-600); margin-bottom: var(--space-3); }
.cookie-banner__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cookie-banner[hidden] { display: none; }

/* ---------- Floating WhatsApp button ----------
   Safe bottom-right position with margin; never overlaps the final CTA band
   content because it sits above everything at a fixed offset and the CTA
   buttons are centered with generous side padding at 360px width. */
.whatsapp-float {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--elevation-2);
  text-decoration: none;
  font-size: 26px;
}
.whatsapp-float:hover { filter: brightness(0.95); }

@media (max-width: 420px) {
  .whatsapp-float { width: 48px; height: 48px; right: var(--space-3); bottom: var(--space-3); }
  .cookie-banner { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
}