/* La Marine des Goudes · Les grandes tablées · tokens
   Bichromie stricte : vert #1C5733 + blanc #FFFFFF. Les nuances sont le vert en opacité réduite. */
:root{
  /* Couleurs */
  --green:#1C5733;
  --white:#FFFFFF;
  --green-80:rgba(28,87,51,.8);   /* texte secondaire, placeholders · ≈ 5:1 sur blanc (AA) */
  --green-25:rgba(28,87,51,.25);  /* filets de séparation (nav, étapes de confirmation) */
  --green-20:rgba(28,87,51,.2);   /* segments inactifs de la barre de progression */

  /* Typographies */
  --font-display:"LMDG Akzidenz Ext","Helvetica Neue",Arial,sans-serif;          /* titres, capitales */
  --font-body:"LMDG Copperplate","Copperplate Gothic","Copperplate",Georgia,serif; /* corps, capitales */
  --font-accent:"LMDG Luminari","Luminari",Georgia,serif;                          /* accents, bas-de-casse */

  --leading:1.55;
  --ls-display:.14em;  /* titres (h1 : .16em dans la maquette ; charte : +199 = .199em, resserré pour tenir à 360 px) */
  --ls-body:.04em;     /* corps Copperplate, légèrement ouvert pour la lisibilité en capitales */
  --ls-accent:.026em;  /* Luminari, +26 charte */

  /* Tailles */
  --fs-h1:clamp(28px,7.4vw,52px);
  --fs-h2:clamp(22px,4.6vw,30px);
  --fs-done:clamp(24px,5.4vw,36px);
  --fs-h3:clamp(20px,4vw,26px);
  --fs-accent:clamp(19px,3.6vw,24px);
  --fs-body:15px;
  --fs-option:14px;
  --fs-label:13px;
  --fs-small:12px;
  --fs-input:16px;     /* minimum iOS, pas de zoom */

  /* Espacements (base 4) */
  --s-2:4px; --s-3:8px; --s-4:12px; --s-5:16px; --s-6:24px; --s-7:32px; --s-8:48px; --s-9:64px; --s-10:96px;

  /* Layout */
  --container:760px;   /* largeur max contenu, padding latéral 20px */
  --tap-min:48px;      /* zone cliquable minimum */

  /* Filets & rayons */
  --rule:1.5px;
  --rule-error:3px;
  --radius-0:0px;
  --radius-pill:999px; /* pilules (délai, référence) et pastilles numérotées uniquement */

  /* Mouvement */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-state:140ms;
  --t-ui:240ms;
}