/*
  Jetons de couleur et base commune a toutes les pages de Cultis.

  🔴 CONTRAINTE QUI COMMANDE CE FICHIER : cible basse Chrome 109, la derniere
  version livree pour Windows 8, sur lequel travaille une partie des clients.
  Sont donc interdits l'imbrication CSS native (Chrome 112) et `color-mix()`
  (Chrome 111). Ces echecs sont SILENCIEUX : la regle est ignoree et la page
  parait presque normale sur la machine du developpeur, cassee sur celle du
  client. Le seul controle qui vaut est de regarder l'ecran, dans les deux
  themes.

  Les deux themes existent parce que le produit s'utilise en plein soleil au
  champ (clair, fort contraste) et le soir au hangar (sombre).
*/

/* Charte 2026-2027 (demande de Julien, 21 septembre 2026 : « ça fait un peu
   télétexte »). Des verts de feuillage plutot qu'un vert d'interface, un
   ambre de soleil pour ce qui presse, des surfaces douces en degrade, des
   angles plus ronds et des ombres en couches. Memes noms de jetons : toutes
   les pages en profitent sans etre reecrites. */
:root {
  --fond: #f2f5ee;
  --fond-2: #e8efe4;
  --carte: #ffffff;
  --carte-2: #fbfcf9;
  --bord: #e1e8dc;
  --texte: #132019;
  --doux: #5a6960;
  --vert: #1f7a4a;
  --vert-vif: #2fa864;
  --vert-clair: #dcefe2;
  --ambre: #a86200;
  --ambre-clair: #fcecd2;
  --rouge: #b3261e;
  --rouge-clair: #fbe2df;
  /* Le bleu ne sert qu'a l'eau (pluie, irrigation) : une seule
     signification, pour qu'il se lise sans legende. */
  --bleu: #2563a8;
  --bleu-clair: #dde9f6;
  --terre: #9a6a3f;
  --ombre: 0 1px 2px rgba(19,32,25,.05), 0 6px 16px rgba(19,32,25,.06),
           0 18px 40px rgba(19,32,25,.05);
  --ombre-forte: 0 2px 6px rgba(19,32,25,.08), 0 20px 50px rgba(19,32,25,.12);
  --rayon: 20px;
  /* Couleur du texte POSE sur le vert plein. Elle doit changer avec le
     theme : le vert sombre du mode clair demande du blanc, le vert clair du
     mode sombre demande du texte sombre. Un blanc fixe donnerait un rapport
     de contraste d'environ 2:1 en mode sombre, tres en dessous du seuil
     lisible — mesure sur le bouton d'inscription. */
  --sur-vert: #ffffff;
  /* L'en-tete illustre garde les memes couleurs dans les deux themes : c'est
     l'identite de la marque, pas un fond d'interface. */
  --hero-1: #134d31;
  --hero-2: #1f7a4a;
  --hero-3: #3aa56a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0a110d;
    --fond-2: #0f1a14;
    --carte: #131c17;
    --carte-2: #111914;
    --bord: #22302a;
    --texte: #e9f1eb;
    --doux: #93a59a;
    --vert: #5ed08e;
    --vert-vif: #7fe0a6;
    --vert-clair: #173222;
    --ambre: #f0ad4a;
    --ambre-clair: #33260f;
    --rouge: #ef8079;
    --rouge-clair: #351a18;
    --bleu: #7fb2ea;
    --bleu-clair: #152536;
    --terre: #c9955f;
    --ombre: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --ombre-forte: 0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
    --sur-vert: #0a110d;
  }
}

:root[data-theme="dark"] {
  --fond: #0a110d; --fond-2: #0f1a14; --carte: #131c17; --carte-2: #111914;
  --bord: #22302a; --texte: #e9f1eb; --doux: #93a59a; --vert: #5ed08e;
  --vert-vif: #7fe0a6; --vert-clair: #173222; --ambre: #f0ad4a;
  --ambre-clair: #33260f; --rouge: #ef8079; --rouge-clair: #351a18;
  --bleu: #7fb2ea; --bleu-clair: #152536; --terre: #c9955f;
  --ombre: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --ombre-forte: 0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
  --sur-vert: #0a110d;
}

* { box-sizing: border-box; }

body {
  margin: 0; color: var(--texte); min-height: 100vh;
  /* Un fond qui respire : deux halos tres doux plutot qu'un aplat. */
  background: var(--fond);
  background-image:
    radial-gradient(1100px 500px at 100% -10%, var(--fond-2), transparent 70%),
    radial-gradient(900px 500px at -10% 110%, var(--fond-2), transparent 70%);
  font: 16px/1.5 "Segoe UI Variable Text", "Segoe UI", -apple-system, Roboto,
        system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { letter-spacing: -.015em; }

.logo {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  background: var(--vert); display: grid; place-items: center;
}
.logo svg { width: 22px; height: 22px; }

.carte {
  background: linear-gradient(180deg, var(--carte), var(--carte-2));
  border: 1px solid var(--bord);
  border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px;
  transition: box-shadow .25s ease, transform .25s ease;
}
@media (hover: hover) {
  .carte:hover { box-shadow: var(--ombre-forte); }
}

/* Les cibles tactiles font 48 px au minimum : la saisie se fait avec des
   gants ou les mains sales. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px;
  background: linear-gradient(135deg, var(--vert), var(--vert-vif));
  color: var(--sur-vert); font-size: 16px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(31,122,74,.28);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  cursor: pointer; font-family: inherit;
  /* Un lien habille en bouton (« Télécharger en Excel ») ne doit pas garder
     le soulignement des liens : il se lirait comme du texte cliquable. */
  text-decoration: none;
}
@media (hover: hover) { .bouton:hover { filter: brightness(1.06); box-shadow: 0 10px 24px rgba(31,122,74,.34); } }
.bouton:active { transform: scale(.98); }
.bouton[disabled] { opacity: .55; cursor: default; }

label { display: block; font-size: 13.5px; color: var(--doux); margin-bottom: 5px; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="url"], input[type="search"] {
  width: 100%; min-height: 48px; padding: 0 14px; font-size: 16px;
  font-family: inherit; color: var(--texte); background: var(--carte);
  border: 1px solid var(--bord); border-radius: 13px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="tel"]:focus, input[type="url"]:focus, input[type="search"]:focus {
  outline: 2px solid var(--vert); outline-offset: 1px;
}

/* Les liens dans un texte d'aide gardent la couleur de la marque. */
.aide a, .legende a { color: var(--vert); font-weight: 550; }

/* Un element marque « hidden » reste cache, meme si une classe lui donne un
   display (flex, grid...) : sans cette regle, le bouton « Enregistrer » de
   la dictee restait visible alors qu'il n'y avait rien a enregistrer. */
[hidden] { display: none !important; }

/* Le calendrier natif suit le theme : sinon son icone reste noire sur fond
   sombre (mode nuit), invisible. */
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="light"] { color-scheme: light; }

/* Un bouton discret dans une phrase (« Oui, avec ça », « ✕ »). */
.bouton-lien { background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--vert); text-decoration: underline; cursor: pointer; }

/* --- Graphiques (graphiques.js) ----------------------------------------
   Un seul langage visuel pour tous les chiffres : colonnes arrondies en
   degrade, anneau de repartition, bande de temperatures. Les couleurs sont
   les jetons du theme, le mode nuit suit sans regle en plus. */
.graphique { display: block; width: 100%; height: auto; overflow: visible; }
.graphique .repere { stroke: var(--bord); stroke-dasharray: 3 5; }
.graphique .axe { stroke: var(--bord); stroke-width: 1.5; }
.graphique text { font-family: inherit; text-anchor: middle; }
.graphique .valeur { font-size: 13px; font-weight: 700; fill: var(--texte); }
.graphique .etiquette { font-size: 12.5px; fill: var(--doux); }
.graphique .etiquette.fort, .graphique .actuel .etiquette { fill: var(--texte); font-weight: 700; }
.graphique .vide { fill: var(--bord); }
.graphique .col { animation: gr-monte .6s cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 100%; transform-box: fill-box; }
.graphique .col.actuel path { filter: drop-shadow(0 4px 8px rgba(31,122,74,.35)); }
.graphique .col.pale .valeur { fill: var(--doux); font-weight: 600; }
@keyframes gr-monte { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .graphique .col { animation: none; } }

.meteo-svg .jour-actuel { fill: var(--vert-clair); opacity: .55; }
.meteo-svg .ligne-max { fill: none; stroke: var(--ambre); stroke-width: 2.5; stroke-linecap: round; }
.meteo-svg .ligne-min { fill: none; stroke: var(--bleu); stroke-width: 2; stroke-dasharray: 1 0; opacity: .8; }
.meteo-svg .pt-max { fill: var(--carte); stroke: var(--ambre); stroke-width: 2.5; }
.meteo-svg .pt-min { fill: var(--carte); stroke: var(--bleu); stroke-width: 2; }
.meteo-svg .tmax { font-size: 14px; font-weight: 700; fill: var(--texte); }
.meteo-svg .tmin { font-size: 12px; fill: var(--doux); }
.meteo-svg .pluie { fill: var(--bleu); opacity: .85; }
.meteo-svg .mm { font-size: 11.5px; font-weight: 700; fill: var(--bleu); text-anchor: start; }

.anneau-bloc { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.anneau { width: 150px; height: 150px; flex: 0 0 auto; }
.anneau .tranche { transition: stroke-width .2s ease; }
@media (hover: hover) { .anneau .tranche:hover { stroke-width: 20; } }
.anneau .centre { font-size: 24px; font-weight: 750; fill: var(--texte); text-anchor: middle; }
.anneau .sous { font-size: 10.5px; fill: var(--doux); text-anchor: middle; }
.legende-anneau { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; }
.legende-anneau li { display: grid; grid-template-columns: 12px 1fr auto; gap: 9px; align-items: center;
  padding: 5px 0; font-size: 14px; border-bottom: 1px dashed var(--bord); }
.legende-anneau li:last-child { border-bottom: 0; }
.legende-anneau i { width: 12px; height: 12px; border-radius: 4px; }
.legende-anneau b { font-weight: 650; color: var(--doux); font-size: 13px; }

/* Liens juridiques en pied de page (pages generees par
   outils/pages_juridiques.py). */
.pied-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  padding: 18px 16px 96px; font-size: 13px; }
.pied-legal a { color: var(--doux); text-decoration: none; }
@media (hover: hover) { .pied-legal a:hover { color: var(--vert); text-decoration: underline; } }