/* ============================================================
   « Comptoir » — tokens
   Fork du design system LAB118 « Warm Craft », adapté à un
   lectorat 65+. Voir .claude/rules/design.md pour le pourquoi
   de chaque rupture.

   Contrastes vérifiés par design/verifier-contrastes.py —
   à relancer après toute retouche de palette.
   ============================================================ */

:root {
  /* ── Fonds ─────────────────────────────────────────────────
     Crème, jamais blanc pur : le blanc pur éblouit et fatigue. */
  --mt-ground:       #F7F3EA;   /* fond de page */
  --mt-surface:      #FFFFFF;   /* cartes, champs */
  --mt-sunken:       #EFE9DC;   /* zones en retrait */

  /* ── Texte — tous ≥ 7:1 (AAA) sur --mt-ground ───────────── */
  --mt-text:         #1A1712;   /* corps            16.1:1 */
  --mt-text-soft:    #4A4235;   /* secondaire        8.9:1 */
  /* Pas d'équivalent --lab-text-ghost : sous 7:1, on n'écrit pas. */

  /* ── Ambre de marque (hérité de LAB118 #E8A634, durci) ──── */
  /* 3.4:1 sur le fond crème — assez pour un aplat ou une bordure (WCAG
     1.4.11), et surtout 4.7:1 avec le texte foncé qu'on pose DESSUS sur les
     boutons pleins. L'ancien #A86A0E n'y arrivait qu'à 4.03 : le texte des
     boutons principaux passait sous le seuil AA. Pour du texte ambre SUR le
     fond, c'est --mt-amber-text qu'il faut, pas celui-ci. */
  --mt-amber:        #B4761A;
  --mt-amber-text:   #6E4304;   /* 7.7:1 → dès qu'un mot doit être ambre */
  --mt-amber-wash:   #F6E9CF;   /* fond de zone accentuée */

  /* ── Sémantique — porte l'information, jamais décoratif ───
     TOUJOURS accompagné d'un mot + d'un picto. Jamais seul. */
  --mt-danger:       #8E2417;   /* ⚠ arnaque, à ne pas faire   7.9:1 */
  --mt-danger-wash:  #FBEAE7;
  --mt-safe:         #2F5B3A;
  /* La couleur qu'on écrit SUR un aplat plein. Elle change avec le thème :
     l'aplat vert est foncé en clair, clair en sombre — une couleur de texte
     figée devient illisible dans l'un des deux. Mesuré à 1.92 sur le bouton
     « Garder » en mode sombre avant ces tokens. */
  --mt-sur-safe:     #FFFFFF;
  --mt-sur-amber:    #1A1712;   /* sur l'ambre plein           4.7:1 */
  /* L'état inactif : des COULEURS, pas une opacité. Une opacité se calcule
     contre le fond de la page, donc son rendu dépend du thème : `.4` donnait
     un bouton lisible sur crème et un bouton à 1.34 de contraste sur brun
     sombre — illisible. Deux couleurs plates, mesurées, une par thème. */
  --mt-inactif:      #DED7C6;
  --mt-sur-inactif:  #5F5A4C;   /* inactif, mais lisible       4.8:1 */
  --mt-safe-wash:    #EDF4EF;
  --mt-info:         #1F4E6B;   /* démarche administrative     8.0:1 */
  --mt-info-wash:    #E5EFF5;

  /* ── Traits ───────────────────────────────────────────────
     Système mené par la bordure, comme LAB118 — pas par l'ombre. */
  --mt-line:         #D9D0BE;
  /* 3.2:1 sur crème, 3.5:1 sur blanc : cette teinte borde les CHAMPS et
     les boutons secondaires, donc WCAG 1.4.11 s'y applique. L'ancien
     #B7AB92 tombait à 2.05 — une bordure de champ qu'on devine plus
     qu'on ne la voit. */
  --mt-line-strong:  #948768;

  /* ── Typographie ──────────────────────────────────────────
     Fraunces partout côté lecteurs. Plex Mono confiné au
     back-office, sur les métadonnées uniquement. */
  --mt-font:         'Fraunces', Georgia, 'Times New Roman', serif;
  --mt-font-meta:    'IBM Plex Mono', 'Courier New', monospace;

  --mt-size-base:    1.25rem;   /* 20px — plancher, pas une suggestion */
  --mt-size-body:    1.375rem;  /* 22px — corps du journal */
  --mt-size-lead:    1.5rem;    /* 24px — chapô */
  --mt-size-h3:      1.75rem;
  --mt-size-h2:      clamp(1.9rem, 3vw, 2.4rem);
  --mt-size-h1:      clamp(2.4rem, 5vw, 3.4rem);
  --mt-size-meta:    0.9rem;    /* back-office uniquement */

  --mt-leading:      1.7;
  --mt-leading-tight:1.25;      /* titres */
  --mt-measure:      60ch;      /* au-delà, l'œil saute des lignes */

  /* ── Espacement ─────────────────────────────────────────── */
  --mt-gap-xs:  0.5rem;
  --mt-gap-sm:  0.875rem;
  --mt-gap:     1.5rem;
  --mt-gap-lg:  2.5rem;
  --mt-gap-xl:  4rem;

  /* ── Formes ───────────────────────────────────────────────
     LAB118 est à ~0. On assouplit : l'angle vif lit
     « administratif », on veut « accueillant ».
     Les filets et tableaux gardent 0. */
  --mt-radius:       10px;
  --mt-radius-sm:    6px;

  /* ── Cibles tactiles — 56px, pas 44 ───────────────────────
     Tremblement essentiel, arthrose, précision réduite. */
  --mt-touch:        56px;

  /* ── Mouvement — courbe LAB118 conservée, durées écourtées ─ */
  --mt-ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --mt-duration:     180ms;
}

/* Thème sombre : disponible en option, jamais par défaut.
   Après 65 ans, le cristallin diffuse la lumière — un texte clair
   sur fond sombre produit un halo qui brouille les lettres. */
[data-theme='sombre'] {
  --mt-ground:       #17150F;
  --mt-surface:      #201D15;
  --mt-sunken:       #100E0A;
  --mt-text:         #F7F2E7;
  --mt-text-soft:    #C9C0AE;
  --mt-amber:        #E8A634;
  --mt-amber-text:   #F0BC63;
  --mt-amber-wash:   #2A2216;
  --mt-danger:       #F09080;
  --mt-danger-wash:  #2E1A16;
  --mt-safe:         #9CC5A4;
  --mt-sur-safe:     #12261A;
  --mt-sur-amber:    #1A1712;
  --mt-inactif:      #2B2720;
  --mt-sur-inactif:  #9A9082;   /* inactif, mais lisible       4.7:1 */
  --mt-safe-wash:    #17251A;
  --mt-info:         #8FC0DC;
  --mt-info-wash:    #14222B;
  --mt-line:         #34301F;
  --mt-line-strong:  #78704E;
}

/* ── Socle ─────────────────────────────────────────────────── */

/* La règle de fondation qui manquait. Sans elle, seuls les éléments que le
   navigateur passe en `border-box` (les <button>) respectent leur largeur :
   un <a> stylé en bouton avec `width: 100%` ajoutait son padding et sa
   bordure PAR-DESSUS, et débordait de 20 px. Vu sur « Lire l'article
   d'origine » dans le Radar.
   Chaque endroit devait jusqu'ici redéclarer `box-sizing` — et on
   l'oubliait. */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--mt-ground);
  color: var(--mt-text);
  font-family: var(--mt-font);
  font-size: var(--mt-size-base);
  line-height: var(--mt-leading);
  /* Jamais justifié : les lézardes créent de faux chemins de lecture. */
  text-align: left;
}

h1, h2, h3 {
  line-height: var(--mt-leading-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--mt-size-h1); }
h2 { font-size: var(--mt-size-h2); }
h3 { font-size: var(--mt-size-h3); }

p { max-width: var(--mt-measure); }

/* Pas d'italique dans le corps : dégrade la reconnaissance des
   lettres. Pour insister, on utilise le gras. */
p em, li em { font-style: normal; font-weight: 700; }

a { color: var(--mt-amber-text); text-underline-offset: 0.2em; }

/* Focus 3px (LAB118 est à 2px) — jamais retiré, nulle part. */
:focus-visible {
  outline: 3px solid var(--mt-amber);
  outline-offset: 2px;
  border-radius: 2px;
}

button, .mt-bouton, input, select {
  min-height: var(--mt-touch);
  font-family: inherit;
  font-size: var(--mt-size-base);
}

/* Non négociable — exigence RGAA. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Impression : le livrable de première classe ─────────────
   Une photocopieuse de mairie écrase les nuances. Noir sur blanc,
   URLs en toutes lettres, blocs jamais coupés. */
@media print {
  :root { --mt-ground: #FFF; --mt-surface: #FFF; --mt-text: #000; --mt-text-soft: #000; }
  body { font-size: 14pt; }
  .mt-article { break-inside: avoid; }
  nav, .mt-no-print { display: none !important; }
  /* Sur papier, un lien doit être recopiable à la main. */
  .mt-article a::after { content: " (" attr(href) ")"; font-size: 12pt; word-break: break-all; }
}

/* Cases à cocher et boutons radio : sans ceci, le navigateur les dessine
   en BLEU SYSTÈME — un second accent fort en pleine palette ambre, que le
   design system interdit explicitement (§ anti-patterns). Vu sur l'écran
   « Quand chercher ». */
input[type='checkbox'], input[type='radio'] {
  accent-color: var(--mt-amber);
}