/* ==================================================================
   KONSEIL — 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,
   un seul accent, serif editoriale pour les titres, ombres quasi
   absentes. La hierarchie vient de l'espace et du contraste, pas des
   effets.

   L'accent est un VERT PROFOND (#2d6a4f). Il n'est pas figé : chaque
   client peut porter le sien dans son espace, et _css/theme.php
   recalcule alors toute la gamme ci-dessous. Les valeurs ecrites ici
   sont celles de la plateforme, et le repli si la base est
   injoignable.
   ================================================================== */

/* --- 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;
  --texte-tres-doux: #8a8880;
  --texte-inverse: #ffffff;

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

  /* --- Accent : vert profond ----------------------------------- */
  --accent: #2d6a4f;
  --accent-fonce: #1e4634;
  --accent-texte: #2d6a4f;
  --accent-doux: #e2f3ec;

  /* --- Couleurs de statut (suivent la gamme) -------------------- */
  --vert: #317d54;
  --vert-doux: #e6f5ed;
  --rouge: #a74e44;
  --rouge-doux: #f5e7e6;
  --ambre: #7d6e31;
  --ambre-doux: #f5f2e6;
  --bleu: #4472a7;
  --bleu-doux: #e6edf5;

  /* --- Gamme de tons (regle 11c) --------------------------------
     Ces valeurs sont les defauts, calcules a partir du vert
     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: #a74e44;
  --ton-rouge-fonce: #863f37;
  --ton-rouge-doux: #f5e7e6;
  --ton-rouge-texte: #a74e44;
  --ton-rouge-encre: #ffffff;
  --ton-orange: #a77244;
  --ton-orange-fonce: #865c37;
  --ton-orange-doux: #f5ede6;
  --ton-orange-texte: #936339;
  --ton-orange-encre: #141413;
  --ton-jaune: #a79344;
  --ton-jaune-fonce: #867637;
  --ton-jaune-doux: #f5f2e6;
  --ton-jaune-texte: #7d6e31;
  --ton-jaune-encre: #141413;
  --ton-vert: #44a772;
  --ton-vert-fonce: #37865c;
  --ton-vert-doux: #e6f5ed;
  --ton-vert-texte: #317d54;
  --ton-vert-encre: #141413;
  --ton-bleu: #4472a7;
  --ton-bleu-fonce: #375c86;
  --ton-bleu-doux: #e6edf5;
  --ton-bleu-texte: #4472a7;
  --ton-bleu-encre: #ffffff;
  --ton-gris: #6e7c76;
  --ton-gris-fonce: #59645f;
  --ton-gris-doux: #eceeed;
  --ton-gris-texte: #62736c;
  --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 ---------------------
   L'application se regarde en plein jour, au bureau. 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;
}

/* --- 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; }
}