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

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

  /* --- Accent terracotta ---------------------------------------- */
  --accent: #d97757;
  --accent-fonce: #b85c3f;
  --accent-texte: #9c4b31; /* variante assombrie, lisible en petit texte (AA) */
  --accent-doux: #f7e6de;

  /* --- Couleurs de statut --------------------------------------- */
  --vert: #3d7a5c;
  --vert-doux: #e2efe7;
  --rouge: #b3453a;
  --rouge-doux: #f7e3e1;
  --ambre: #9a6c14;
  --ambre-doux: #f6ecd6;
  --bleu: #3f6b8f;
  --bleu-doux: #e4edf4;

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

/* --- MODE SOMBRE : volontairement non traite ---------------------
   L'application se regarde en plein jour, dans une maison. 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; }
}