/* ============================================================
Fondations mobile-first — à coller en tête de ton style.css,
juste après le reset (* { box-sizing: border-box; ... }).
============================================================
Chaque règle ci-dessous corrige un bug réel rencontré en
production (pas une précaution théorique) — voir
../references/mobile-first.md pour le détail de chaque cas.
============================================================ */
html {
/* Empêche le scroll horizontal fantôme causé par les animations
d'entrée (translateX) ou tout élément légèrement plus large
que le viewport. IMPORTANT : mets-le sur html ET body — sur
html seul ça ne suffit pas toujours, sur body seul non plus :
selon le mode de rendu, c'est l'un OU l'autre qui devient
l'élément scrollable réel du document. Les deux ensemble
couvrent les deux cas. */
overflow-x: hidden;
/* Décale le point d'ancrage des liens #section sous la hauteur
du header fixe (adapte la valeur à la hauteur réelle de ton
.site-header en desktop). */
scroll-padding-top: 96px;
}
body {
overflow-x: hidden;
}
/* Tout input/textarea/select sous 16px déclenche un zoom automatique
au focus sur iOS Safari — très désagréable, donne l'impression que
le site "n'est pas mobile friendly" même si tout le reste est bon. */
input, textarea, select {
font-size: 16px;
}
/* Cibles tactiles confortables (recommandation WCAG 2.5.5 / Apple HIG :
44×44px minimum). À appliquer sur les liens/boutons denses (nav,
listes d'actions) qui pourraient descendre sous ce seuil. */
a, button, [role="button"], input, select, textarea {
min-height: 44px;
}
/* Zones à encoche (notch / home indicator iPhone) : tout élément fixé
en bas d'écran (bottom navbar, boutons flottants, bannières) doit
respecter cette marge de sécurité — déjà intégré dans header.css,
fabs.css et pwa-install.css via env(safe-area-inset-bottom).
⚠️ Ça ne s'applique QUE si le du
contient viewport-fit=cover, sinon ces valeurs restent à 0 :
*/