/* ============================================================
   SOCING — base.css
   Reset doux + fondations typographiques et accessibilité.
   Dépend de tokens.css (à charger avant).
   Aucune police distante : pile système uniquement.
   ============================================================ */

/* ---- Reset doux ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  /* Mode de couleur déclaré : l'UI système reste cohérente */
  color-scheme: light;
  height: 100%;
  /* Préserve le zoom utilisateur : jamais de taille en px figée sur html */
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  min-height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif; /* pile système, rien de téléchargé */
  font-size: var(--texte-base); /* ≥ 18 px */
  line-height: 1.6; /* jamais au-dessus de 1.6 */
  color: var(--encre);
  background-color: var(--fond);
  /* Reflow : aucun débordement horizontal à partir de 320 px (WCAG 1.4.10) */
  overflow-x: hidden;
}

/* La signature a sa propre voix, ronde et franche, sans télécharger de fonte.
   Le texte courant reste dans la pile système pour la lecture à 200 %. */
.mot-signe,
.signature-socing,
h1 {
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
}

/* Cette garde vit dans une feuille liée directement par index.html : elle
   agit avant main.js et empêche un flash de marque si le module tarde ou
   échoue. Le code public reste inspectable ; seule l'exposition visuelle est
   réduite. */
body.identite-en-attente .entete-app,
body.identite-en-attente .pied-app,
body.identite-en-attente .btn-masquer,
body.identite-en-attente #nav-principale,
body.ecran-neutre-actif .entete-app,
body.ecran-neutre-actif .pied-app,
body.ecran-neutre-actif .btn-masquer,
body.ecran-neutre-actif #nav-principale,
body.ecran-neutre-actif .badge-decouverte,
body.ecran-neutre-actif .banniere-maj {
  display: none !important;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Déclencheurs natifs de fichier/caméra : présents dans le DOM le temps du
   geste, jamais visibles et sans style inline afin de garder une CSP stricte. */
.entree-native-hors-ecran,
.print-hors-ecran {
  position: fixed;
  inset: 0 auto auto -10000px;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* ---- Titres ---- */
h1, h2, h3, h4 {
  line-height: 1.25;
  font-weight: 700;
  text-wrap: balance;
  /* Les identifiants techniques et références sans espaces doivent rester
     lisibles à 200 % sans agrandir le viewport mobile. */
  overflow-wrap: anywhere;
}
h1 { font-size: var(--texte-xxl); }
h2 { font-size: var(--texte-xl); }
h3 { font-size: var(--texte-l); }

p, li {
  max-width: 65ch; /* ligne de lecture confortable */
  overflow-wrap: anywhere;
}

/* ---- Liens ---- */
a {
  color: var(--sarcelle);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}
a:hover {
  color: var(--sarcelle-sombre);
}

/* ---- Focus : TOUJOURS visible.
   Interdiction d'écrire outline:none sans remplacement. ---- */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--rayon-s);
}
/* Variante sur fond prune (bandeaux, écran de verrouillage) */
.fond-prune :focus-visible,
.fond-prune:focus-visible {
  outline: var(--focus-ring-sur-prune);
}

/* ---- Lien d'évitement « Aller au contenu » (WCAG 2.4.1) ---- */
.skip-link {
  position: absolute;
  top: var(--espace-2);
  left: var(--espace-2);
  z-index: var(--z-verrou);
  padding: var(--espace-3) var(--espace-4);
  min-height: var(--cible);
  display: inline-flex;
  align-items: center;
  background: var(--prune);
  color: var(--creme);
  border-radius: var(--rayon-m);
  font-weight: 600;
  text-decoration: none;
  /* Caché visuellement tant qu'il n'a pas le focus */
  transform: translateY(-300%);
  transition: transform var(--duree-moyenne) var(--courbe);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: var(--focus-ring-sur-prune);
}

/* ---- Masquage accessible (reste annoncé aux lecteurs d'écran) ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- Mouvement réduit : filet de sécurité global ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}