/* ==========================================================================
   devispaysagiste.fr · Variables du système de design
   --------------------------------------------------------------------------
   Un seul fichier, partagé par la vitrine, l'application et les calculateurs.
   Changer une valeur ici la change partout.

   Deux thèmes :
   - clair  : par défaut dans l'application et les calculateurs
              (plus lisible en plein soleil, sur le chantier) ;
   - sombre : la vitrine, et le mode sombre de l'application.

   Pour imposer un thème à une page ou à un bloc : data-theme="light" ou
   data-theme="dark". Sans attribut, la page suit le réglage du téléphone.

   Contrastes vérifiés (WCAG niveau AA, 4,5:1 minimum pour le texte) :
   tous les textes passent sur fond, carte et surface, dans les deux thèmes.
   ========================================================================== */

:root {
  /* ---------- Palette brute ----------
     Les composants ne l'utilisent pas directement : ils passent par les
     rôles plus bas (--fond, --carte, --texte…), qui changent selon le thème. */
  --nuit: #101412;
  --schiste: #181D1A;
  --ardoise: #222824;
  --craie: #ECEFEA;
  --lin: #F4F5F2;
  --blanc: #FFFFFF;
  --encre: #131714;

  /* L'unique couleur d'action, réservée au bouton principal (un par écran).
     Texte blanc dessus : contraste 5,0:1. Identique dans les deux thèmes. */
  --buis: #2F7D57;
  --buis-survol: #286C4B;
  --sur-buis: #FFFFFF;

  /* ---------- Polices ---------- */
  /* « … Variable » : nom des polices embarquées dans l'application (hors connexion).
     Le nom simple sert à la vitrine et à la démo, qui les chargent depuis Google Fonts. */
  --police-texte: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Mona Sans (licence libre, GitHub), choisie le 21/10/2026 face à Archivo. */
  --police-titre: 'Mona Sans Variable', 'Mona Sans', 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titre-largeur: 112.5%;   /* semi-étendue */
  --titre-graisse: 500;      /* intermédiaire : jamais de gras lourd */

  /* ---------- Tailles de texte (téléphone → ordinateur) ---------- */
  --taille-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);       /* 36 → 64 px */
  --taille-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);         /* 28 → 44 px */
  --taille-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);        /* 20 → 24 px */
  --taille-texte-l: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);    /* 17 → 20 px */
  --taille-texte: 1rem;         /* 16 px. Jamais moins dans un champ : l'iPhone zoomerait. */
  --taille-petit: 0.875rem;     /* 14 px */
  --taille-legende: 0.8125rem;  /* 13 px */
  --taille-montant: clamp(1.625rem, 1.5rem + 0.5vw, 1.75rem);   /* 26 → 28 px, bandeau de marge */
  --taille-montant-xl: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);     /* 32 → 40 px */
  --interligne-titre: 1.1;
  --interligne-texte: 1.5;

  /* ---------- Espacements (base 4 px) ---------- */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 48px;
  --espace-8: 64px;
  --espace-9: 96px;
  --espace-section: clamp(4.5rem, 3rem + 5vw, 7.5rem);          /* 72 → 120 px entre sections */
  --gouttiere: 20px;
  --largeur-max: 1200px;

  /* ---------- Formes ---------- */
  --rayon-pilule: 999px;   /* boutons, pastilles, champs de la vitrine */
  --rayon-carte: 16px;
  --rayon-champ: 12px;     /* champs de l'application (formulaires longs) */
  --rayon-petit: 8px;
  --hauteur-controle: 48px;   /* cible confortable pour le pouce */

  /* ---------- Mouvement ---------- */
  --duree-rapide: 120ms;   /* survol */
  --duree: 200ms;          /* changement d'état */
  --duree-entree: 500ms;   /* apparition au défilement */
  --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Rôles : thème clair (par défaut) ----------
   Répétés sur [data-theme="light"] pour qu'un bloc clair puisse vivre
   à l'intérieur d'une page sombre. */
:root,
[data-theme="light"] {
  --fond: var(--lin);
  --carte: var(--blanc);
  --surface: #ECEEEA;
  --surface-survol: #E3E6E1;
  --trait: #DFE2DC;
  --trait-fort: #C9CEC7;
  --texte: var(--encre);
  --texte-2: #565E58;
  --texte-3: #616963;
  --anneau: var(--encre);       /* contour du focus clavier : neutre, jamais vert */

  /* Signaux : uniquement pour l'état du chiffrage, jamais pour décorer.
     Toujours en texte sur fond teinté, jamais en aplat. */
  --perte: #B42318;
  --perte-fond: #F4E0DF;
  --rentable: #1D6B44;
  --rentable-fond: #DFEAE5;
  --attention: #8A5800;
  --attention-fond: #EFE8DB;

  /* Thème clair : bordure fine et ombre presque invisible. */
  --ombre-carte: 0 0 0 1px var(--trait), 0 1px 3px rgb(16 20 18 / 0.06);
  --ombre-flottante: 0 0 0 1px var(--trait), 0 8px 24px rgb(16 20 18 / 0.1);
  --voile-nav: rgb(244 245 242 / 0.9);
  color-scheme: light;
}

/* ---------- Rôles : thème sombre ----------
   Aucune ombre : une carte se détache par sa teinte, un cran plus claire. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: var(--nuit);
    --carte: var(--schiste);
    --surface: var(--ardoise);
    --surface-survol: #2A312C;
    --trait: #2B322D;
    --trait-fort: #3A433D;
    --texte: var(--craie);
    --texte-2: #A8B0AA;
    --texte-3: #8A928C;
    --anneau: var(--craie);
    --perte: #FF8A7A;
    --perte-fond: #382C27;
    --rentable: #6FCF97;
    --rentable-fond: #24362C;
    --attention: #E5B567;
    --attention-fond: #353225;
    --ombre-carte: none;
    --ombre-flottante: 0 0 0 1px var(--trait);
    --voile-nav: rgb(16 20 18 / 0.86);
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --fond: var(--nuit);
  --carte: var(--schiste);
  --surface: var(--ardoise);
  --surface-survol: #2A312C;
  --trait: #2B322D;
  --trait-fort: #3A433D;
  --texte: var(--craie);
  --texte-2: #A8B0AA;
  --texte-3: #8A928C;
  --anneau: var(--craie);
  --perte: #FF8A7A;
  --perte-fond: #382C27;
  --rentable: #6FCF97;
  --rentable-fond: #24362C;
  --attention: #E5B567;
  --attention-fond: #353225;
  --ombre-carte: none;
  --ombre-flottante: 0 0 0 1px var(--trait);
  --voile-nav: rgb(16 20 18 / 0.86);
  color-scheme: dark;
}