/* Toisé — pages du site (accueil, connexion, compte, administration) */
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(/polices/barlow-condensed-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(/polices/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 400; font-display: swap; src: url(/polices/public-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 600; font-display: swap; src: url(/polices/public-sans-latin-600-normal.woff2) format('woff2'); }

:root {
  --calque: #eef1f0;      /* papier calque */
  --papier: #fbfcfc;
  --graphite: #23272b;    /* trait des murs, texte */
  --mine: #5b6168;        /* texte secondaire */
  --trait: #c9cfcd;       /* traits fins */
  --cote: #2b59c3;        /* bleu des cotes : mesures, liens */
  --cote-pale: #dfe7f7;
  --rouge: #c23b22;       /* crayon rouge : à vérifier, erreurs */
  --vert: #2f7d4f;
  --d: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --t: 'Public Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--calque); color: var(--graphite); font: 400 17px/1.55 var(--t); }
a { color: var(--cote); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--cote); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--d); font-weight: 600; line-height: 1.05; margin: 0 0 .4em; letter-spacing: .005em; }
h1 { font-size: clamp(44px, 6.4vw, 78px); }
h2 { font-size: clamp(32px, 3.6vw, 44px); }
h3 { font-size: 24px; font-weight: 500; }
p { margin: 0 0 1em; max-width: 68ch; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.num { font-family: var(--d); font-weight: 500; font-variant-numeric: tabular-nums; }

/* en-tête */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.logo { display: inline-flex; align-items: baseline; gap: 10px; color: var(--graphite); text-decoration: none; font: 600 30px/1 var(--d); }
.logo svg { align-self: center; }
.top nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.top nav a { text-decoration: none; padding: 8px 12px; color: var(--graphite); border-radius: 3px; }
.top nav a:hover { background: #fff8; }

/* boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/1 var(--t); padding: 13px 20px; border-radius: 3px; border: 1.5px solid var(--graphite); background: transparent; color: var(--graphite); cursor: pointer; text-decoration: none; }
.btn:hover { background: #fff; }
.btn.plein { background: var(--graphite); color: var(--papier); }
.btn.plein:hover { background: #3a4046; }
.btn.petit { padding: 8px 12px; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn.danger { border-color: var(--rouge); color: var(--rouge); }

/* formulaires */
.champ { display: block; margin: 0 0 16px; }
.champ span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.champ small { display: block; color: var(--mine); font-size: 13px; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search] { width: 100%; font: 400 16px var(--t); padding: 11px 12px; border: 1.5px solid #aab2b0; border-radius: 3px; background: var(--papier); color: var(--graphite); }
input:focus { border-color: var(--cote); outline: none; box-shadow: 0 0 0 3px var(--cote-pale); }
.coche { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 0 0 18px; }
.coche input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--graphite); }
.erreur { color: var(--rouge); font-size: 15px; min-height: 1.4em; margin: 0 0 12px; }
.info { background: var(--cote-pale); border-left: 3px solid var(--cote); padding: 10px 14px; font-size: 15px; margin: 0 0 16px; }

/* feuille (zone de travail posée sur le calque) */
.feuille { background: var(--papier); border: 1px solid var(--trait); box-shadow: 0 1px 0 #fff inset, 0 18px 40px -28px #23272b55; }

/* tableau */
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th { text-align: left; font-weight: 600; color: var(--mine); font-size: 13px; padding: 8px 10px; border-bottom: 1.5px solid var(--graphite); }
td { padding: 9px 10px; border-bottom: 1px solid var(--trait); vertical-align: top; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plus { color: var(--vert); } .moins { color: var(--graphite); }
.muet { color: var(--mine); font-size: 14px; }

.pied { border-top: 1px solid var(--trait); margin-top: 72px; padding: 28px 0 40px; color: var(--mine); font-size: 14px; }
.pied .wrap { display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
.pied a { color: var(--mine); }

@media (max-width: 640px) { body { font-size: 16px; } .wrap { padding: 0 16px; } .top nav a.cache-mobile { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }