/* ==================================================================
   KOMPTA — jetons de charte et base mobile-first

   Ce fichier est le SEUL endroit du projet ou une couleur s'ecrit en
   hexadecimal. Partout ailleurs : var(--…). Voir CLAUDE.md du projet.

   Inspiration assumee : l'interface de claude.ai — fond ivoire chaud,
   accent bleu, serif editoriale pour les titres, ombres quasi
   absentes. La hierarchie vient de l'espace et du contraste, pas des
   effets.
   ================================================================== */

/* --- POLICES AUTO-HEBERGEES (RGPD : aucun CDN, regle 10d) --------- */
@font-face {
  font-family: "Inter";
  src: url("/_font/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/_font/sourceserif4-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Surfaces ------------------------------------------------- */
  --fond: #faf9f5;
  --surface: #ffffff;
  --surface-2: #f0eee6;
  --surface-3: #e9e6dc;

  /* --- Texte ---------------------------------------------------- */
  --texte: #141413;
  --texte-doux: #5f5e5a;
  /* CE GRIS A ETE ASSOMBRI. Il valait #8a8880, soit 3,37:1 sur le fond
     ivoire — sous le minimum AA de 4,5:1 exigé pour du texte courant
     (règle 10e). Il ne colorait pas que des ornements : le rôle dans la
     barre latérale, le fil d'Ariane, les libellés de fiche, le compteur
     de la visite guidée et les lignes désactivées d'un tableau. Autant
     de texte qu'on lit vraiment, et qui disparaissait sur un écran de
     portable en plein jour.
     La valeur ci-dessous est la plus CLAIRE qui passe encore AA : le gris
     reste plus léger que --texte-doux, la hiérarchie est conservée. */
  --texte-tres-doux: #726f65;
  --texte-inverse: #ffffff;

  /* --- Traits --------------------------------------------------- */
  --bordure: #e3e1d9;
  --bordure-forte: #d3d0c5;

  /* --- Accent vert-bleu ----------------------------------------------
     La couleur d'amorcage : sobre, lisible, sans rapport avec
     comme valeur de DEPART : ces jetons ne servent qu'a l'amorcage
     (base injoignable, migration en retard, premiere installation).
     Des que theme.php repond, c'est la couleur enregistree qui
     s'applique — et tout le reste s'en deduit (regle 11b). */
  --accent: #1f6f6b;
  --accent-fonce: #17544f;
  --accent-texte: #1a5c58; /* variante assombrie, lisible en petit texte (AA) */
  --accent-doux: #dcefed;

  /* --- Couleurs de statut --------------------------------------- */
  --vert: #187f48;
  --vert-doux: #e5f5ed;
  --rouge: #a82f22;
  --rouge-doux: #f5e7e5;
  --ambre: #88711a;
  --ambre-doux: #f5f2e5;
  --bleu: #2261a8;
  --bleu-doux: #e5edf5;

  /* --- Gamme de tons (regle 11c) --------------------------------
     Ces valeurs sont les defauts, calcules a partir du bleu
     ci-dessus. Des que quelqu'un choisit une autre couleur dans la page
     Configuration, _css/theme.php recalcule TOUTE cette gamme et la
     surcharge ici meme.

     Elles restent ecrites en clair pour une raison : si la base est
     injoignable ou la migration pas encore passee, theme.php ne rend
     rien et l'interface doit garder des couleurs correctes.

     Chaque ton a quatre variantes : la couleur (aplat de bouton), son
     survol (-fonce), son fond pastel (-doux), sa version lisible en
     petit texte (-texte) et l'encre qui se lit dessus (-encre).
     L'encre n'est pas figee : sur un jaune elle est noire, sur un bleu
     sombre elle est blanche — c'est calcule, pas suppose. */
  --accent-encre: #ffffff;
  --ton-rouge: #a82f22;
  --ton-rouge-fonce: #82251a;
  --ton-rouge-doux: #f5e7e5;
  --ton-rouge-texte: #a82f22;
  --ton-rouge-encre: #ffffff;
  --ton-orange: #a86122;
  --ton-orange-fonce: #824b1a;
  --ton-orange-doux: #f5ede5;
  --ton-orange-texte: #a86122;
  --ton-orange-encre: #ffffff;
  --ton-jaune: #a88d22;
  --ton-jaune-fonce: #826d1a;
  --ton-jaune-doux: #f5f2e5;
  --ton-jaune-texte: #88711a;
  --ton-jaune-encre: #141413;
  --ton-vert: #22a861;
  --ton-vert-fonce: #1a824b;
  --ton-vert-doux: #e5f5ed;
  --ton-vert-texte: #187f48;
  --ton-vert-encre: #141413;
  --ton-bleu: #2261a8;
  --ton-bleu-fonce: #1a4b82;
  --ton-bleu-doux: #e5edf5;
  --ton-bleu-texte: #2261a8;
  --ton-bleu-encre: #ffffff;
  --ton-gris: #5f5f6b;
  --ton-gris-fonce: #494953;
  --ton-gris-doux: #ececee;
  --ton-gris-texte: #5f5f6b;
  --ton-gris-encre: #ffffff;

  /* --- Typographie ---------------------------------------------- */
  --police-titre: "Source Serif 4", georgia, "times new roman", serif;
  --police-corps: "Inter", -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, sans-serif;

  /* --- Rythme --------------------------------------------------- */
  --rayon: 12px;
  --rayon-petit: 8px;
  --rayon-pilule: 999px;
  --ombre: 0 1px 2px rgb(20 20 19 / 4%);
  --ombre-flottante: 0 8px 24px rgb(20 20 19 / 8%);
  --transition: 150ms ease;

  /* Gouttiere de page : 16px sur telephone, 32 puis 64 plus haut. */
  --gouttiere: 16px;
  --largeur-max: 1100px;

  /* Largeur de la barre laterale : assez large pour que le plus long
     libelle du menu tienne sur UNE ligne (regle 11i). Un libelle coupe
     en deux fait perdre la lecture verticale du menu. */
  --barre-laterale: 248px;
}

/* --- MODE SOMBRE : volontairement non traite ---------------------
   Cette application se tient a bout de bras dans un rayon eclaire au
   neon, ou dans une cuisine. Le jour ou il faudra un theme sombre, il
   se fera en redefinissant ces jetons sous une media query, sans
   toucher a une seule regle de app.css. */

/* ==================================================================
   BASE — mobile d'abord
   ================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-corps);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a {
  color: var(--accent-texte);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--accent-fonce); }

/* Images fluides : jamais de largeur fixe en px (regle 10a). */
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* --- L'ATTRIBUT hidden DOIT GAGNER -------------------------------
   [hidden] vaut « display: none » dans la feuille par defaut du
   navigateur — donc la MOINS prioritaire de toutes. La moindre regle
   posant un display l'annule sans bruit : « .champ > label { display:
   flex } » suffit a faire reapparaitre un libelle qu'on croyait cache,
   et l'on cherche le bug dans le JavaScript, ou il n'est pas.

   C'est arrive : le selecteur « de quelle reserve » s'affichait, vide,
   a cote d'un compteur ecrase, sur un ecran ou le script l'avait
   pourtant masque.

   Le !important est ici a sa place : hidden n'est pas une question de
   style, c'est une question d'existence.
   ------------------------------------------------------------------ */
[hidden] { display: none !important; }

/* --- ACCESSIBILITE (regle 10e) ----------------------------------- */

/* Focus toujours visible. Ne jamais poser outline:none sans remplacer. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Lien d'evitement : hors ecran, ramene au premier coup de tabulation. */
.saut-contenu {
  position: absolute;
  top: -100px;
  left: var(--gouttiere);
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--rayon-petit);
  background: var(--texte);
  color: var(--texte-inverse);
  text-decoration: none;
  transition: top var(--transition);
}

.saut-contenu:focus { top: 12px; color: var(--texte-inverse); }

/* Reserve aux lecteurs d'ecran. */
.lecteur-seul {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --- BREAKPOINTS DE LA CHARTE ------------------------------------ */
@media (width >= 640px) {
  :root { --gouttiere: 32px; }

  h1 { font-size: 2.3rem; }
}

@media (width >= 1024px) {
  :root { --gouttiere: 64px; }
}