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

   Ce fichier est le SEUL endroit du projet ou une couleur s'ecrit en
   hexadecimal (avec _css/theme.php, qui les recalcule). Partout
   ailleurs : var(--…). Voir le CLAUDE.md du projet.

   Charte applicative claude.ai (regle 11a) : fond ivoire chaud, accent
   unique, serif editoriale pour les titres, ombres quasi absentes. La
   hierarchie vient de l'espace et du contraste, pas des effets.

   L'accent par defaut est un vert foret : c'est une application de
   remise en forme, consultee le matin avant une seance et le soir
   devant une assiette. Il se change dans la page Configuration.
   ================================================================== */

/* --- 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 foret ---------------------------------------- */
  --accent: #1f7a4d;
  --accent-fonce: #155133;
  --accent-texte: #1f7a4d; /* contraste 5,05 sur le fond : lisible en petit corps (AA) */
  --accent-doux: #dff6eb;
  --accent-encre: #ffffff;

  /* --- Couleurs de statut --------------------------------------- */
  --vert: #1f834e;
  --vert-doux: #e5f5ed;
  --rouge: #8a2d23;
  --rouge-doux: #f5e7e5;
  --ambre: #83701f;
  --ambre-doux: #f5f2e5;
  --bleu: #23538a;
  --bleu-doux: #e5edf5;

  /* --- Encre et papier ------------------------------------------
     Les seules couleurs du projet qui NE SUIVENT PAS le theme.
     A l'ecran, tout se peint avec l'accent choisi en Configuration ;
     sur papier, un titre orange pale ne se lit pas, et l'encre coute
     cher. _css/impression.css redefinit donc --texte, --fond et leurs
     voisines a partir de ces quatre jetons, dans son bloc @media print.

     Elles sont ici et non dans impression.css parce que c'est la regle
     du projet : une couleur s'ecrit dans charte-tokens.css ou dans
     theme.php, nulle part ailleurs. theme.php ne les recalcule jamais —
     il n'y a pas de version « pastel » du noir. */
  --encre: #000000;
  --encre-douce: #333333;
  --encre-filet: #999999;
  --papier: #ffffff;

  /* --- 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 cinq 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 clair elle serait noire,
     sur ces tons soutenus elle est blanche — c'est calcule, pas
     suppose. */
  --ton-rouge: #8a2d23;
  --ton-rouge-fonce: #66211a;
  --ton-rouge-doux: #f5e7e5;
  --ton-rouge-texte: #8a2d23;
  --ton-rouge-encre: #ffffff;
  --ton-orange: #8a5323;
  --ton-orange-fonce: #663d1a;
  --ton-orange-doux: #f5ede5;
  --ton-orange-texte: #8a5323;
  --ton-orange-encre: #ffffff;
  --ton-jaune: #8a7623;
  --ton-jaune-fonce: #66561a;
  --ton-jaune-doux: #f5f2e5;
  --ton-jaune-texte: #83701f;
  --ton-jaune-encre: #ffffff;
  --ton-vert: #238a53;
  --ton-vert-fonce: #1a663d;
  --ton-vert-doux: #e5f5ed;
  --ton-vert-texte: #1f834e;
  --ton-vert-encre: #ffffff;
  --ton-bleu: #23538a;
  --ton-bleu-fonce: #1a3d66;
  --ton-bleu-doux: #e5edf5;
  --ton-bleu-texte: #23538a;
  --ton-bleu-encre: #ffffff;
  --ton-gris: #515c57;
  --ton-gris-fonce: #3c4440;
  --ton-gris-doux: #eceeed;
  --ton-gris-texte: #515c57;
  --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). */
  --barre-laterale: 248px;
}

/* ==================================================================
   BASE — mobile d'abord

   Allenassi se consulte d'abord sur telephone : dans une cuisine, une
   main sur la poele, ou dans une salle de sport entre deux series. Le
   grand ecran est le cas secondaire, jamais l'inverse.
   ================================================================== */
*,
*::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; }
}