/* ============================================================================
   DESIGN SYSTEM MARIE BRITOM
   Source unique : /apercu/book-landing/ — template BookLanding du projet
   Claude Design « Marie Britom Design System » (0c4ac002-a36e-4fae-814a-d3a53d5e27c6),
   direction artistique validée le 21 août 2026.

   Ce fichier est LA référence appliquée aux pages de production.
   public/book-landing.css reste la maquette figée, à ne plus modifier.

   Règle : aucune valeur en dur dans une page si un token existe.

   Trois écarts assumés, valables pour toutes les pages :
   1. polices servies depuis notre domaine, jamais depuis un CDN ;
   2. icônes tracées dans la page, jamais chargées depuis unpkg ;
   3. le système n'a aucune règle responsive : elle vit ici, sans toucher aux tokens.
   ========================================================================= */

@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono.woff2') format('woff2-variations'); font-weight: 100 800; font-display: swap; }

/* ------------------------------------------------------------ 1. COULEURS - */
:root {
  --ink-1000: #050208; --ink-900: #0b0510; --ink-850: #0f0916; --ink-800: #14101e; --ink-700: #1d1828; --ink-600: #2a2437;
  --paper-000: #ffffff; --paper-050: #fafbfc; --paper-100: #f8f7f6; --paper-200: #eef3f6; --paper-300: #e4e7ea; --paper-400: #cfd5db;
  --grey-700: #4a5158; --grey-600: #646b73; --grey-500: #8b9298; --grey-300: #b9bfc5;
  --blue-700: #0b6fc0; --blue-600: #1476cf; --blue-500: #1e9bf0; --blue-400: #39a9f5; --blue-300: #7cc6f8; --blue-100: #d8ecfd; --blue-050: #eef7fe;
  --orange-700: #c85a05; --orange-600: #f06a05; --orange-500: #ff7a08; --orange-400: #ff9740; --orange-100: #ffe6d0; --orange-050: #fff4ea;
  --green-600: #188a5b; --red-600: #c8391f; --amber-600: #b5820a;

  --surface-page: var(--paper-100);
  --surface-card: var(--paper-000);
  --surface-soft: var(--paper-200);
  --surface-inverse: var(--ink-900);
  --surface-inverse-raised: var(--ink-800);
  --text-title: var(--ink-900);
  --text-body: var(--grey-700);
  --text-muted: var(--grey-600);
  --text-on-inverse: var(--paper-000);
  --text-on-inverse-muted: #a9b0b8;
  --text-accent: var(--blue-500);
  --link: var(--blue-600);
  --link-hover: var(--blue-700);
  --action-primary: var(--blue-500);
  --action-primary-hover: var(--blue-600);
  --action-primary-press: var(--blue-700);
  --action-primary-text: var(--paper-000);
  --action-secondary-border: rgba(255, 255, 255, .55);
  --focus-ring: var(--blue-400);
  --border-card: var(--paper-300);
  --border-input: var(--paper-400);
  --border-inverse: rgba(255, 255, 255, .14);
  --rule-accent: var(--blue-500);

  /* Signature : voile radial bleu + orange derrière le livre. */
  --hero-veil:
    radial-gradient(110% 90% at 78% 30%, rgba(20, 90, 170, .45), rgba(11, 5, 16, 0) 60%),
    radial-gradient(80% 70% at 92% 62%, rgba(255, 122, 8, .22), rgba(11, 5, 16, 0) 65%);
}

/* -------------------------------------------------------- 2. TYPOGRAPHIE - */
:root {
  --font-core: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-2xs: 13px; --text-xs: 14px; --text-sm: 15px; --text-base: 17px; --text-md: 19px; --text-lg: 22px;
  --text-xl: 26px; --text-2xl: 32px; --text-3xl: 40px; --text-4xl: 52px; --text-5xl: 64px;
  --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.45; --leading-relaxed: 1.6;
  --tracking-tight: -.02em; --tracking-caps: .14em;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --measure-tight: 26ch; --measure-body: 52ch; --measure-wide: 64ch;
}

/* --------------------------------------------------------- 3. ESPACEMENTS - */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; --space-11: 96px; --space-12: 128px;
  --gutter-card: 24px; --gutter-card-lg: 32px;
  --section-y: 96px; --section-y-tight: 64px;
  --page-max: 1120px; --page-pad: 32px;
  --reading-max: 720px;
  --control-h-sm: 38px; --control-h: 48px; --control-h-lg: 56px;
  --hit-min: 44px;
}

/* ------------------------------------------------- 4. RAYONS ET ÉLÉVATION - */
:root {
  --radius-sm: 6px; --radius-lg: 12px; --radius-pill: 999px;
  --radius-card: 12px; --radius-control: 8px; --radius-input: 8px;
  --rule-accent-w: 3px; --rule-accent-len: 48px;

  --shadow-xs: 0 1px 2px rgba(11, 5, 16, .06);
  --shadow-card: 0 4px 16px rgba(11, 5, 16, .08);
  --shadow-book: 0 24px 60px rgba(5, 2, 8, .55);
  --ring-focus: 0 0 0 3px rgba(30, 155, 240, .35);
  --glow-cta: 0 8px 24px rgba(30, 155, 240, .32);

  --transition-control: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  --transition-card: box-shadow 200ms ease, transform 200ms ease;
  --lift-y: -3px;
  --press-scale: .98;
}

/* ---------------------------------------------------------------- 5. BASE - */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--space-9); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Le pied reste en bas même sur une page courte : plus de bande vide sous lui. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-core);
}
body > main { flex: 1 0 auto; }
h1, h2, h3, h4 { margin: 0; color: var(--text-title); }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection { background: var(--blue-100); color: var(--ink-900); }
.sur-encre ::selection, .encre ::selection { background: rgba(30, 155, 240, .35); color: #fff; }

.skip { position: absolute; left: -9999px; background: var(--paper-000); color: var(--ink-900); padding: 12px 18px; border-radius: var(--radius-control); }
.skip:focus { left: 16px; top: 16px; z-index: 60; }

.page { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); }
.lecture { max-width: var(--reading-max); margin-inline: auto; padding-inline: var(--page-pad); }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------ 6. COMPOSANT : Navbar --- */

.navbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  padding: var(--space-4) var(--page-pad);
  background: var(--surface-inverse);
}
.logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.logo img { width: 30px; height: 30px; }
.logo span { font: var(--weight-semibold) var(--text-base)/1 var(--font-core); color: var(--paper-000); }
.navbar nav { display: flex; align-items: center; gap: var(--space-7); }
.navlink {
  padding: var(--space-2) 0;
  font: var(--weight-regular) var(--text-sm)/1 var(--font-core);
  color: var(--text-on-inverse-muted);
  border-bottom: 2px solid transparent;
  transition: var(--transition-control);
  text-decoration: none;
}
.navlink:hover { color: var(--paper-000); }
.navlink[aria-current='page'] { font-weight: var(--weight-medium); color: var(--paper-000); border-bottom-color: var(--blue-500); }

/* ------------------------------------------------ 7. COMPOSANT : Button --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: var(--weight-medium) var(--text-base)/1 var(--font-core);
  border-radius: var(--radius-control); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: var(--transition-control);
  min-height: var(--hit-min); white-space: nowrap; flex-shrink: 0;
  height: var(--control-h); padding: 0 var(--space-6);
  background: var(--action-primary); color: var(--action-primary-text);
}
.btn:hover { background: var(--action-primary-hover); box-shadow: var(--glow-cta); color: var(--action-primary-text); }
.btn:active { background: var(--action-primary-press); transform: scale(var(--press-scale)); }
.btn--sm { height: var(--control-h-sm); padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--lg { height: var(--control-h-lg); padding: 0 var(--space-7); font-size: var(--text-md); }
.btn--secondary { background: transparent; color: var(--text-on-inverse); border-color: var(--action-secondary-border); }
.btn--secondary:hover { background: rgba(255, 255, 255, .08); border-color: var(--paper-000); box-shadow: none; color: var(--text-on-inverse); }
.btn .ico { width: 19px; height: 19px; flex: none; }
.btn--lg .ico { width: 22px; height: 22px; }

/* -------------------------------------- 8. COMPOSANTS : bandes et filets --- */

.bande { padding: var(--section-y) 0; }
.bande--tight { padding: var(--section-y-tight) 0; }
.bande--papier { background: var(--surface-page); }
.bande--doux { background: var(--surface-soft); }
.bande--encre { background: var(--surface-inverse); }
.bande--encre h2, .bande--encre h3 { color: var(--text-on-inverse); }
.bande--encre p { color: var(--text-on-inverse-muted); }

.filet { display: block; width: var(--rule-accent-len); height: var(--rule-accent-w); background: var(--rule-accent); border-radius: var(--radius-pill); }

h2.titre-section {
  font: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-core);
  letter-spacing: var(--tracking-tight);
  max-width: var(--measure-wide);
}
.accent { color: var(--blue-500); }

/* Le titre du livre ne s'ecrit jamais en italique : Poppins n'a pas d'italique
   servi depuis notre domaine, le navigateur en fabriquait une penchee. Il se
   distingue par la graisse et une legere chasse. */
/* Poppins n'a pas d'italique servi depuis notre domaine : toute emphase
   passe par la graisse et la couleur, jamais par une oblique fabriquée. */
em, i, cite { font-style: normal; font-weight: var(--weight-medium); color: var(--text-title); }

.titre-livre {
  font-style: normal;
  font-weight: var(--weight-semibold);
  letter-spacing: .005em;
}


/* ---------------------------------------------- 9. COMPOSANT : BookShot --- */

.bookshot { position: relative; display: flex; justify-content: center; }
/* Pas de second voile derrière le livre : celui du hero suffit. Le rectangle
   de dégradé laissait une arête visible à droite de la bannière. */
.bookshot img {
  position: relative; height: var(--book-h, 440px); width: auto;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-book);
}

/* ------------------------------------------ 10. COMPOSANT : NumberedCard - */

.carte-num-bloc {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--gutter-card);
  display: flex; flex-direction: column; gap: var(--space-3);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-card);
  text-decoration: none;
}
a.carte-num-bloc:hover { box-shadow: var(--shadow-card); transform: translateY(var(--lift-y)); border-color: var(--blue-300); }
.num { font: var(--weight-semibold) var(--text-lg)/1 var(--font-core); color: var(--grey-500); }
.carte-num-bloc h3 { font: var(--weight-semibold) var(--text-base)/1.35 var(--font-core); }
.carte-num-bloc p { font: var(--weight-regular) var(--text-sm)/1.55 var(--font-core); color: var(--text-muted); }

/* --------------------------------------- 11. COMPOSANT : liste numérotée - */
/* Les numéros 01–05 sont la signature du système : ils ordonnent une suite
   que la lectrice parcourt, ils ne décorent pas une grille. */

.liste-num { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: rang; }
.liste-num li { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: var(--space-4); }
.liste-num li::before {
  counter-increment: rang; content: '0' counter(rang);
  font: var(--weight-semibold) var(--text-xl)/1 var(--font-core);
  color: var(--grey-300);
}
.liste-num p { font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-core); color: var(--text-body); }
.bande--encre .liste-num li::before { color: var(--blue-500); }

/* --------------------------------------------- 12. COMPOSANT : CheckList - */

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4) var(--space-8); }
.checklist li { display: flex; align-items: center; gap: var(--space-3); }
.checklist .ico { width: 19px; height: 19px; flex: none; color: var(--blue-400); }
.checklist span { font: var(--weight-regular) var(--text-base)/1.45 var(--font-core); color: var(--text-on-inverse); }

/* ------------------------------------------- 13. COMPOSANT : formulaire --- */

.formulaire { display: grid; gap: var(--space-3); max-width: 420px; }
.formulaire input[type='email'] {
  font: var(--weight-regular) var(--text-base)/1 var(--font-core);
  height: var(--control-h-lg); width: 100%;
  color: var(--ink-900); background: var(--paper-000);
  border: 1px solid var(--border-input); border-radius: var(--radius-input);
  padding: 0 var(--space-5);
}
.formulaire input[type='email']::placeholder { color: var(--grey-500); }
.formulaire input[type='email']:focus-visible { border-color: var(--blue-500); box-shadow: var(--ring-focus); outline: none; }
/* Case de consentement : distincte du bouton, cible large, jamais discrète. */
.consentement {
  display: flex; align-items: flex-start; gap: var(--space-4);
  margin-top: var(--space-2); padding: var(--space-5);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--border-inverse);
  border-radius: var(--radius-card); cursor: pointer;
}
.consentement:hover { border-color: var(--blue-300); }
.consentement input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue-500); cursor: pointer; }
.consentement span { font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--text-on-inverse); }
.consentement:has(input:checked) { border-color: var(--blue-500); background: rgba(30, 155, 240, .1); }

.form-message { min-height: 1.4em; font: var(--weight-regular) var(--text-sm)/1.45 var(--font-core); }
.form-message[data-etat='erreur'] { color: var(--orange-400); }
.form-message[data-etat='info'] { color: var(--blue-300); }
.microcopy { font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--text-muted); max-width: var(--measure-wide); }
.bande--encre .microcopy { color: var(--text-on-inverse-muted); }
.bande--encre .microcopy a { color: var(--blue-300); }

/* ------------------------------------------------------------ 14. PIED --- */

.pied { background: var(--ink-1000); padding: var(--space-9) 0 var(--space-10); }
.pied p { font: var(--weight-regular) var(--text-xs)/1.6 var(--font-core); color: var(--grey-500); max-width: var(--measure-wide); }
.pied p + p { margin-top: var(--space-3); }
.pied a { color: var(--grey-300); }
.pied a:hover { color: var(--paper-000); }

/* ---------------------------------------------------------- 15. annonce --- */
/* Retour visuel de la copie d'un prompt, servi par app.js. */

.annonce {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  background: var(--ink-900); color: var(--paper-000);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-core);
  box-shadow: var(--shadow-card); z-index: 40;
}

/* -------------------------------------------------------- 16. RESPONSIVE - */
/* Un seul point de rupture, à 900 px : au-delà, deux colonnes ; en deçà, une
   seule, et l'échelle typographique se resserre. */

@media (max-width: 900px) {
  :root {
    --page-pad: 20px;
    --text-4xl: 34px; --text-3xl: 30px; --text-2xl: 26px; --text-xl: 22px;
    --section-y: 64px; --section-y-tight: 48px;
  }
  .navbar { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .navbar nav { flex-wrap: wrap; gap: var(--space-5); justify-content: center; }
  .liste-num li { grid-template-columns: 40px 1fr; gap: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; }
  a.carte-num-bloc:hover { transform: none; }
}