/* ==========================================================
   Bout d'Chemin — charte graphique (thèmes clair et sombre)
   Version de travail — octobre 2026 — titres en Bitter
   Usage : <html data-theme="auto|light|dark">
   "auto" (ou absence d'attribut) suit le réglage du téléphone.
   ========================================================== */

/* ---------- Polices (à héberger sur o2switch, pas via Google Fonts) ---------- */
@font-face {
  font-family: "Bitter";
  src: url("/fonts/Bitter-Variable.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens communs ---------- */
:root {
  --font-titre: "Bitter", Rockwell, Georgia, serif;
  --font-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Échelle typographique (mobile d'abord) */
  --fs-h1: 1.75rem;   /* 28px — titre de page */
  --fs-h2: 1.375rem;  /* 22px — titre de section */
  --fs-h3: 1.1875rem; /* 19px — titre de carte */
  --fs-texte: 1rem;   /* 16px — jamais moins pour les champs (évite le zoom iOS) */
  --fs-petit: 0.875rem; /* 14px — boutons, méta */
  --fs-mini: 0.75rem;   /* 12px — étiquettes */
  --lh-texte: 1.6;
  --lh-titre: 1.2;

  /* Espacements (base 4px) */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-6: 24px; --esp-8: 32px;

  /* Rayons */
  --rayon-etiquette: 6px;
  --rayon-controle: 8px;
  --rayon-carte: 12px;
  --rayon-modale: 16px;

  /* Cibles tactiles */
  --cible-min: 44px;

  /* Palette de marque (fixe, indépendante du thème) */
  --marque-nuit: #22301F;
  --marque-vigne: #4F6B3A;
  --marque-ocre: #C9894A;
  --marque-brique: #B5452F;
  --marque-creme: #F4EFE6;
}

/* ---------- Thème clair (par défaut) ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --fond: #F4EFE6;            /* crème */
  --surface: #FFFFFF;         /* cartes, modales */
  --surface-2: #EDE6D8;       /* zones secondaires, champs désactivés */
  --bordure: #E2D9C8;
  --bordure-forte: #CFC3AD;
  --contour: #8F8670;         /* contours des champs et des cartes (contraste 3:1 minimum) */

  --texte: #22301F;           /* nuit verte */
  --texte-2: #5C6655;         /* texte secondaire */
  --texte-discret: #7D8474;   /* placeholders uniquement */

  --action: #B5452F;          /* brique : actions principales seulement */
  --action-survol: #9C3A27;
  --sur-action: #FFFFFF;

  --vigne: #4F6B3A;           /* infos de sortie, boutons secondaires, liens */
  --lien: #3F5A2D;
  --etiquette-fond: #E7EEDD;
  --etiquette-texte: #2E4220;

  --ocre-fond: #F3E3CF;       /* mises en avant : places, nouveautés */
  --ocre-texte: #6B4318;

  --erreur: #A3242F;          /* distinct de la brique */
  --erreur-fond: #F8E1E1;
  --erreur-texte: #8E1F28;
  --succes-fond: #E7EEDD;
  --succes-texte: #2E4220;

  --focus: #4F6B3A;
  --ombre-carte: 0 1px 2px rgba(34, 48, 31, 0.06);
  --voile-modale: rgba(22, 30, 20, 0.45);

  --logo: url("/img/logo-horizontal-clair.svg");
  --logo-nom: url("/img/logo-nom-seul-clair.svg");
}

/* ---------- Thème sombre ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fond: #161E14;
    --surface: #22301F;
    --surface-2: #2C3B28;
    --bordure: #34452F;
    --bordure-forte: #4A5E43;
    --contour: #7E9570;
    --texte: #F4EFE6;
    --texte-2: #B8BFAE;
    --texte-discret: #8A9282;
    --action: #C25439;
    --action-survol: #A9432C;
    --sur-action: #FFFFFF;
    --vigne: #A9C08F;
    --lien: #BFD3A6;
    --etiquette-fond: #2F4229;
    --etiquette-texte: #CFE0BC;
    --ocre-fond: #4A3418;
    --ocre-texte: #F0C898;
    --erreur: #E5737A;
    --erreur-fond: #4A1E22;
    --erreur-texte: #F2A8AD;
    --succes-fond: #2F4229;
    --succes-texte: #CFE0BC;
    --focus: #A9C08F;
    --ombre-carte: none;
    --voile-modale: rgba(0, 0, 0, 0.6);
    --logo: url("/img/logo-horizontal-sombre.svg");
  --logo-nom: url("/img/logo-nom-seul-sombre.svg");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #161E14;
  --surface: #22301F;
  --surface-2: #2C3B28;
  --bordure: #34452F;
  --bordure-forte: #4A5E43;
    --contour: #7E9570;
  --texte: #F4EFE6;
  --texte-2: #B8BFAE;
  --texte-discret: #8A9282;
  --action: #C25439;
  --action-survol: #A9432C;
  --sur-action: #FFFFFF;
  --vigne: #A9C08F;
  --lien: #BFD3A6;
  --etiquette-fond: #2F4229;
  --etiquette-texte: #CFE0BC;
  --ocre-fond: #4A3418;
  --ocre-texte: #F0C898;
  --erreur: #E5737A;
  --erreur-fond: #4A1E22;
  --erreur-texte: #F2A8AD;
  --succes-fond: #2F4229;
  --succes-texte: #CFE0BC;
  --focus: #A9C08F;
  --ombre-carte: none;
  --voile-modale: rgba(0, 0, 0, 0.6);
  --logo: url("/img/logo-horizontal-sombre.svg");
  --logo-nom: url("/img/logo-nom-seul-sombre.svg");
}

/* ---------- Base ---------- */
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-texte);
  font-size: var(--fs-texte);
  line-height: var(--lh-texte);
}
h1, h2, h3 { font-family: var(--font-titre); font-weight: 600; line-height: var(--lh-titre); margin: 0 0 var(--esp-3); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
a { color: var(--lien); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (min-width: 768px) {
  :root { --fs-h1: 2.25rem; --fs-h2: 1.625rem; --fs-h3: 1.25rem; }
}

/* ---------- Composants de base ---------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: var(--esp-3) var(--esp-4);
}

.btn {
  min-height: var(--cible-min);
  padding: 0 var(--esp-4);
  border-radius: var(--rayon-controle);
  font: 500 var(--fs-petit)/1 var(--font-texte);
  cursor: pointer;
}
.btn-principal { background: var(--action); color: var(--sur-action); border: none; }
.btn-principal:hover { background: var(--action-survol); }
.btn-secondaire { background: transparent; color: var(--vigne); border: 1px solid var(--vigne); }
.btn-discret { background: transparent; color: var(--texte-2); border: none; }

.etiquette {
  display: inline-block;
  padding: 2px var(--esp-2);
  border-radius: var(--rayon-etiquette);
  font-size: var(--fs-mini);
  background: var(--etiquette-fond);
  color: var(--etiquette-texte);
}
.etiquette-ocre { background: var(--ocre-fond); color: var(--ocre-texte); }

.champ {
  width: 100%;
  min-height: var(--cible-min);
  padding: 0 var(--esp-3);
  font-size: var(--fs-texte);
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-controle);
}
.champ::placeholder { color: var(--texte-discret); }
.champ[aria-invalid="true"] { border-color: var(--erreur); }

.message-erreur {
  background: var(--erreur-fond);
  color: var(--erreur-texte);
  border: 1px solid var(--erreur);
  border-radius: var(--rayon-controle);
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--fs-petit);
}
.message-succes {
  background: var(--succes-fond);
  color: var(--succes-texte);
  border-radius: var(--rayon-controle);
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--fs-petit);
}

/* ---------- En-tête : menu à gauche, marque au centre, notifications + profil à droite ---------- */
.entete {
  display: grid;
  grid-template-columns: var(--cible-min) 1fr auto;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--esp-2);
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
}
.entete-marque {
  justify-self: center;
  width: 200px;            /* mobile : nom seul */
  height: 22px;
  background: var(--logo-nom) center / contain no-repeat;
}
@media (min-width: 768px) {
  .entete-marque { width: 300px; height: 32px; background-image: var(--logo); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}