/*
 * AD-097 / AD-098 — Les règles de base, reprises des maquettes telles quelles.
 *
 * Ce fichier est la copie du bloc qui suit `:root` dans chaque `.dc.html`
 * public. Il est identique d'une page à l'autre, à la lettre — ce qui est
 * précisément la raison de ne l'écrire qu'une fois.
 *
 * ⛔ AUCUNE VALEUR N'EST MODIFIÉE. Les sélecteurs, les propriétés et l'ordre
 * sont ceux de la maquette.
 */

* { box-sizing: border-box }

body {
    margin: 0;
    background: var(--surface-page);
    color: var(--on-surface-page);
    font-family: var(--font-text);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

/* ⚠️ `dl`, `dd`, `dt` ET `fieldset` MANQUAIENT À CETTE LISTE (AD-396).
   Les maquettes Contact et Tunnel les remettent à zéro comme les autres ;
   sans eux, la marge par défaut du navigateur s'ajoutait sous chaque liste
   de définitions — le récapitulatif et les mentions légales prenaient une
   respiration que la maquette n'a pas. */
h1, h2, h3, h4, p, figure, ol, ul, dl, dd, dt, fieldset { margin: 0 }

/* Un `fieldset` porte une bordure et un rembourrage par défaut, et surtout
   une largeur minimale implicite qui DÉBORDE une grille. */
fieldset { border: 0; padding: 0; min-width: 0 }

a {
    color: var(--color-brand-strong);
    text-underline-offset: 3px;
    transition: color var(--motion-fast) var(--ease),
                background-color var(--motion-fast) var(--ease),
                border-color var(--motion-fast) var(--ease);
}

/* ⚖️ CETTE VALEUR N'EST PAS LA MÊME SUR TOUTES LES MAQUETTES (AD-397).
   Accueil écrit `--color-accent-strong`, les trois autres `--surface-accent`.
   J'avais unifié sur la majorité : c'était DÉJÀ un écart. Chaque page reçoit
   désormais la valeur de SA maquette, et la règle globale porte celle des
   trois pages qui s'accordent. */
a:hover { color: var(--surface-accent) }
[data-page="accueil"] a:hover { color: var(--color-accent-strong) }

/* La maquette Contact ne fait glisser QUE la couleur des liens ; les trois
   autres y ajoutent le fond et la bordure. Même raisonnement. */
[data-page="contact"] a { transition: color var(--motion-fast) var(--ease) }

/* AD-105 : le focus doit se voir. Jamais `outline: none`. */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

img { display: block; max-width: 100% }

/* `textarea` manquait : son fond et sa bordure changeaient d'un coup sec
   au focus, là où les autres champs glissaient (AD-396). */
button, summary, input, select, textarea {
    transition: background-color var(--motion-fast) var(--ease),
                border-color var(--motion-fast) var(--ease),
                color var(--motion-fast) var(--ease),
                box-shadow var(--motion-fast) var(--ease);
}

/* Cibles tactiles : tout lien de navigation secondaire ou de contact fait 44 px */
[data-touch] a { min-height: 44px; display: flex; align-items: center }
[data-touch-inline] { min-height: 44px; display: inline-flex; align-items: center }

/* Garde-fous anti-débordement — AD-115 */
[data-header-inner] > * { min-width: 0 }
[data-split] > * { min-width: 0 }
h1, h2, h3 { text-wrap: balance; hyphens: manual }

/*
 * AD-113 — prefers-reduced-motion COUPE TOUT.
 *
 * Repris mot pour mot des maquettes. La règle est ici, à la racine, et non
 * dans chaque composant : une animation ajoutée demain dans une feuille qui
 * aurait oublié la requête média passerait au travers.
 */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important }
    .has-motion [data-reveal] { opacity: 1; transform: none }
}