/* =============================================================================
   Inoma Canada — 02-base.css
   -----------------------------------------------------------------------------
   Remise à zéro raisonnée + styles d'éléments natifs + utilitaires de mise en
   page. Consomme uniquement les tokens de 01-tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  line-height: var(--interligne-corps);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Le contenu ne s'affiche qu'une fois les traductions posées : évite le
     clignotement des clés i18n brutes. Repli si le JS échoue (voir plus bas). */
}

/* Anti-clignotement i18n : on masque le corps tant que i18n n'a pas tourné,
   mais SEULEMENT si le JS est actif — sinon le site resterait blanc. */
html.js-actif:not(.i18n-pret) body { visibility: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  color: var(--couleur-texte);
  line-height: var(--interligne-titre);
  letter-spacing: var(--lettrage-titre);
  margin: 0 0 var(--espace-4);
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 5.5vw, var(--taille-4xl)); font-weight: var(--graisse-extra); line-height: var(--interligne-serre); }
h2 { font-size: clamp(1.625rem, 3.4vw, var(--taille-2xl)); font-weight: var(--graisse-forte); }
h3 { font-size: var(--taille-lg); font-weight: var(--graisse-forte); }
h4 { font-size: var(--taille-md); font-weight: var(--graisse-semi); }

p { margin: 0 0 var(--espace-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--couleur-primaire);
  text-decoration-color: var(--couleur-trait);
  text-underline-offset: 0.2em;
  transition: color var(--transition-douce);
}
a:hover { color: var(--couleur-primaire-fort); text-decoration-color: currentColor; }

ul, ol { margin: 0 0 var(--espace-4); padding-left: var(--espace-5); }
li { margin-bottom: var(--espace-2); }

strong { font-weight: var(--graisse-semi); }
small { font-size: var(--taille-sm); }

hr {
  border: 0;
  border-top: var(--trait-fin) solid var(--couleur-bordure);
  margin: var(--espace-7) 0;
}

:focus-visible {
  outline: var(--focus-epaisseur) solid var(--focus-anneau);
  outline-offset: var(--focus-decalage);
  border-radius: var(--rayon-sm);
}
/* Sur fond marine, l'anneau bleu serait invisible : on passe à l'or.
   La liste ne couvrait que .section--sombre, .pied et .entete--sombre —
   c'est-à-dire AUCUN des blocs sombres réellement employés. Le héros, la bande
   d'aide financière, l'appel professionnel et la planche de nuit recevaient donc
   l'anneau #104870 sur du marine : présent, mais introuvable à l'œil.
   04-accueil.css rattrapait le coup au cas par cas, bouton par bouton. */
.section--sombre :focus-visible,
.pied :focus-visible,
.entete--sombre :focus-visible,
.heros :focus-visible,
.planche--nuit :focus-visible,
.bandeau-subv :focus-visible,
.appel-pro :focus-visible {
  outline-color: var(--focus-anneau-clair);
}

/* L'en-tête est collante et haute de 4,5 rem : sans cette ligne, toute ancre
   dépose sa cible SOUS l'en-tête, donc invisible. Aucun scroll-margin n'existait
   nulle part, et l'accueil porte maintenant cinq ancres.
   Les deux sélecteurs sont nécessaires : `main [id]` est un combinateur de
   DESCENDANCE, il ne matche pas `<main id="contenu">` lui-même — c'est-à-dire
   la cible du lien d'évitement, celui qui sert précisément à qui navigue au
   clavier. */
main[id],
main [id] { scroll-margin-top: 5.5rem; }

/* ---------------------------------------------------------------------------
   Lien d'évitement — accessibilité clavier
--------------------------------------------------------------------------- */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  background: var(--couleur-accent);
  color: var(--couleur-accent-contraste);
  padding: var(--espace-3) var(--espace-5);
  border-radius: 0 0 var(--rayon-md) 0;
  font-weight: var(--graisse-semi);
}
.lien-evitement:focus { left: 0; }

/* ---------------------------------------------------------------------------
   Mise en page
--------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-contenu);
  margin-inline: auto;
  padding-inline: var(--espace-5);
}
.conteneur--large { max-width: var(--largeur-large); }
.conteneur--texte { max-width: var(--largeur-texte); }

.section { padding-block: var(--espace-8); }
@media (min-width: 48rem) { .section { padding-block: var(--espace-9); } }

.section--sans-haut { padding-top: 0; }
.section--sans-bas  { padding-bottom: 0; }
.section--basse { background: var(--couleur-surface-basse); }
.section--surface { background: var(--couleur-surface); }
.section--sombre {
  background: var(--couleur-surface-sombre);
  color: var(--couleur-texte-sur-sombre);
}
.section--sombre h1,
.section--sombre h2,
.section--sombre h3,
.section--sombre h4 { color: var(--couleur-texte-sur-sombre); }
.section--sombre p { color: var(--couleur-texte-doux-sombre); }
.section--sombre a { color: var(--couleur-accent); }

/* Mobile-first : la règle la PLUS large doit être écrite en DERNIER. Elle ne
   l'était pas — au-dessus de 64 rem les deux media queries matchaient, et à
   spécificité égale c'est la dernière qui gagne : .grille--3 et .grille--4
   retombaient toujours à deux colonnes. Personne ne l'avait vu parce qu'aucune
   page ne s'en sert (chacune définit sa propre grille). */
.grille { display: grid; gap: var(--espace-5); }
@media (min-width: 40rem) { .grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40rem) { .grille--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grille--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem) { .grille--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grille--4 { grid-template-columns: repeat(4, 1fr); } }

.pile { display: flex; flex-direction: column; gap: var(--espace-4); }
.rangee { display: flex; flex-wrap: wrap; gap: var(--espace-3); align-items: center; }

/* ---------------------------------------------------------------------------
   Typographie utilitaire
--------------------------------------------------------------------------- */
/* L'ÉTIQUETTE — la voix « appareil de mesure » du système typographique.
   Chasse large (112 %), petites capitales, 11 px. C'est la troisième voix
   d'Archivo, celle qui n'existait pas avec Manrope : on l'obtient de l'axe de
   chasse, pas d'une seconde fonte.

   Réservée aux libellés de 24 caractères ou moins. Au-delà, on repasse en casse
   phrase : une provenance longue en capitales à 11 px ne se lit pas, et le
   problème est pire en français, où les accents se perdent dans le lettrage. */
.surtitre {
  display: block;
  font-family: var(--police-titre);
  font-size: 0.6875rem;
  font-weight: var(--graisse-forte);
  font-stretch: var(--chasse-large);
  letter-spacing: var(--lettrage-etiquette);
  text-transform: uppercase;
  color: var(--couleur-primaire);
  margin-bottom: var(--espace-3);
}
.section--sombre .surtitre { color: var(--couleur-accent); }

.intro {
  font-size: var(--taille-md);
  color: var(--couleur-texte-secondaire);
  max-width: var(--largeur-texte);
}
.section--sombre .intro { color: var(--couleur-texte-doux-sombre); }

.texte-secondaire { color: var(--couleur-texte-secondaire); }
.texte-centre { text-align: center; }
.texte-centre .intro { margin-inline: auto; }

/* Espacements utilitaires — évitent les `style=""` en dur dans le HTML */
.bloc-entete   { margin-bottom: var(--espace-7); }
.espace-haut   { margin-top: var(--espace-6); }
.espace-haut-l { margin-top: var(--espace-7); }

/* Masqué visuellement mais lu par les lecteurs d'écran */
.lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }