/* Site public Toclo+ — mêmes couleurs que l'app (tocloplus_mobile_atelier/src/theme/tokens.js).
   Pages volontairement simples : lisibles sur un petit téléphone Android, rapides en 3G. */
:root {
  color-scheme: light;
  --creme: #FBF7F1;
  --creme-2: #F2E9DB;
  --brun: #0F0D0B; /* identité « gazelle » (2026-10-13) : en-tête noir encre, logo blanc et or */
  --brun-texte: #4B2E16;
  --vert: #4A6B45;
  --vert-fonce: #3A5536;
  --vert-clair: #E3EAD9;
  --bronze: #8A5A30;
  --encre: #2C2620;
  --encre-2: #6B5F52;
  --ligne: #E7DFD1;
  --brique: #9A3A26;
  --brique-fond: #F7E1DB;
  --rayon: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--vert-fonce); font-weight: 600; text-underline-offset: 3px; }
a:hover { color: var(--brun-texte); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--vert); outline-offset: 2px;
}

/* --- En-tête -------------------------------------------------------------------------- */
.entete { background: var(--brun); color: var(--creme); }
.entete .barre { max-width: 860px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 10px; color: var(--creme); text-decoration: none; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; }
/* Nouvelle identité (2026-10-06) : logo « TOCLO+ » doré, fait pour fond sombre comme cet en-tête. */
/* Identité « mètre ruban » (2026-10-09) : logo transparent, un peu plus haut (mètre ruban). */
.marque img { height: 40px; width: auto; display: block; }
.marque .plus { color: #EEA91D; }
.nav { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }
.nav a { color: var(--creme-2); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; text-decoration: underline; }

/* --- Contenu ---------------------------------------------------------------------------- */
main { max-width: 860px; margin: 0 auto; padding: 28px 16px 56px; }
h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.2; color: var(--brun-texte); margin: 0 0 8px; }
h2 { font-size: 1.3rem; color: var(--brun-texte); margin: 36px 0 10px; padding-top: 8px; border-top: 1px solid var(--ligne); }
h3 { font-size: 1.08rem; color: var(--brun-texte); margin: 22px 0 6px; }
.chapeau { color: var(--encre-2); font-size: 1.05rem; margin: 0 0 20px; }
.date-maj { color: var(--encre-2); font-size: 0.92rem; }
ul, ol { padding-left: 1.3em; }
li { margin: 4px 0; }
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid var(--ligne); }
th { background: var(--creme-2); color: var(--brun-texte); }
.tableau { overflow-x: auto; background: #fff; border: 1px solid var(--ligne); border-radius: 12px; }
.tableau table { margin: 0; }

.carte { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 20px; margin: 16px 0; }
.carte h2 { border-top: 0; margin-top: 0; padding-top: 0; }
.etapes { counter-reset: etape; list-style: none; padding: 0; }
.etapes li { counter-increment: etape; position: relative; padding: 4px 0 10px 46px; }
.etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--vert); color: #fff; font-weight: 700; display: grid; place-items: center;
}
.alerte { background: var(--brique-fond); color: var(--brique); border-radius: 12px; padding: 14px 16px; font-weight: 600; }
.info { background: var(--vert-clair); color: var(--vert-fonce); border-radius: 12px; padding: 14px 16px; }
.liens-rapides { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 20px; }
.liens-rapides a { display: block; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px; text-decoration: none; color: var(--encre); }
.liens-rapides a strong { display: block; color: var(--brun-texte); font-size: 1.1rem; margin-bottom: 4px; }
.liens-rapides a:hover { border-color: var(--vert); }

/* --- Formulaire ------------------------------------------------------------------------- */
form label { display: block; font-weight: 600; margin: 14px 0 6px; }
form .aide { display: block; font-weight: 400; color: var(--encre-2); font-size: 0.9rem; }
input, textarea {
  width: 100%; font: inherit; color: var(--encre); background: #fff;
  border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; min-height: 48px;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus { border-color: var(--vert); }
.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-top: 16px; }
.case input { width: 22px; min-height: 22px; height: 22px; margin-top: 3px; accent-color: var(--vert); flex: none; }
button {
  font: inherit; font-weight: 700; color: #fff; background: var(--brique); border: 0; border-radius: 12px;
  padding: 14px 20px; min-height: 52px; width: 100%; margin-top: 20px; cursor: pointer;
}
button.bouton-vert { background: var(--vert); }
button:disabled { opacity: 0.6; cursor: wait; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* anti-robots */
.message { margin-top: 16px; }
.message[hidden] { display: none; }

/* À COMPLÉTER : surligné pour qu'aucun oubli ne passe la relecture (le déploiement est
   d'ailleurs bloqué tant qu'il en reste, voir verifier.js). */
.a-completer { background: #FFF1B8; color: #6B4E00; padding: 0 4px; border-radius: 4px; font-weight: 700; }

/* --- Pied --------------------------------------------------------------------------------- */
.pied { border-top: 1px solid var(--ligne); color: var(--encre-2); font-size: 0.9rem; }
.pied .barre { max-width: 860px; margin: 0 auto; padding: 20px 16px 32px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }