/* Base : remise à zéro, typographie et utilitaires. Toutes les valeurs viennent de tokens.css. */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--sg-papier); color: var(--sg-encre); font: 400 var(--sg-t-corps)/var(--sg-lh-corps) var(--sg-sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { padding: 0; list-style: none; }

h1, .h1 { font: 700 var(--sg-t-h1)/var(--sg-lh-titre) var(--sg-serif); letter-spacing: -.3px; }
h2, .h2 { font: 700 var(--sg-t-h2)/var(--sg-lh-titre) var(--sg-serif); }
h3, .h3 { font: 400 var(--sg-t-h3)/1.3 var(--sg-serif); }
.lead { font-size: var(--sg-t-lead); line-height: var(--sg-lh-lead); color: var(--sg-gris); max-width: var(--sg-mesure); }
.petit { font-size: var(--sg-t-petit); }
.gris { color: var(--sg-gris); }
.prose { max-width: var(--sg-mesure); }
.prose > * + * { margin-top: var(--sg-4); }
.prose h2 { margin-top: var(--sg-7); }
.prose a, a.lien { color: var(--sg-lien); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.prose a:hover, a.lien:hover { text-decoration-thickness: 2px; }

/* Une variante de titre pour le mobile, l'autre pour les grands écrans */
.m { display: none; }
@media (max-width: 767px) { .d { display: none; } .m { display: inline; } }

.wrap { max-width: var(--sg-largeur); margin: 0 auto; padding-inline: var(--sg-gouttiere); }
.section { padding-block: var(--sg-section); }
.fond-ecume { background: var(--sg-ecume); }
.fond-blanc { background: var(--sg-blanc); }
.fond-encre { background: var(--sg-encre); color: var(--sg-papier); }
.fond-encre .lead { color: var(--sg-ecume); }
.fond-encre a.lien { color: var(--sg-lien-sombre); }
.entete-section { margin-bottom: var(--sg-6); }
.entete-section .lead { margin-top: var(--sg-3); }

.evitement { position: absolute; left: -9999px; top: 8px; background: var(--sg-encre); color: #fff; padding: 8px 14px; z-index: 50; }
.evitement:focus { left: 8px; }
:focus-visible { outline: none; box-shadow: var(--sg-focus); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* Très petits écrans : titres un peu plus petits pour tenir sur 2 lignes */
@media (max-width: 389px) { :root { --sg-t-h1: 25px; --sg-t-carte: 14px; } }
@media (max-width: 359px) { :root { --sg-t-h1: 23px; --sg-t-h2: 22px; --sg-t-h3: 17px; --sg-t-carte: 13px; } .grille, .grille-3 { gap: var(--sg-3); } }

/* Maquette : message passager des boutons gérés par une extension en ligne */
.demo-toast { position: fixed; left: 50%; bottom: var(--sg-5); transform: translateX(-50%); max-width: calc(100vw - 32px); padding: var(--sg-3) var(--sg-4); background: var(--sg-encre); color: var(--sg-papier); z-index: 90; }

/* Titres équilibrés : jamais une dernière ligne orpheline. Le nombre de lignes ne change pas, seule leur longueur s'égalise. */
h1, h2, h3, .h3 { text-wrap: balance; }
.lead, .sens, .aide { text-wrap: pretty; }