/* ==========================================================================
   ETALL — Base : remise à zéro, typographie, conteneurs, utilitaires
   ========================================================================== */

/* --- Remise à zéro ------------------------------------------------------- */

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

html {
  /* Empêche le défilement horizontal sur toute la page, à toute largeur */
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* Décale les ancres pour qu'elles ne passent pas sous la navbar fixe */
  scroll-padding-top: calc(var(--hauteur-navbar) + var(--e-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--police);
  font-size: var(--t-base);
  line-height: var(--interligne-texte);
  color: var(--encre);
  background-color: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  line-height: var(--interligne-titre);
  font-weight: var(--graisse-forte);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); font-weight: var(--graisse-forte); letter-spacing: -0.01em; }
h4 { font-size: var(--t-md); font-weight: var(--graisse-moyenne); letter-spacing: 0; }

p { text-wrap: pretty; }

a {
  color: var(--bleu-primaire);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

strong, b { font-weight: var(--graisse-forte); }

/* Les images ne débordent jamais et ne se déforment jamais (règle 7) */
img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- Icônes ---------------------------------------------------------------
   Réglage PAR DÉFAUT des icônes, volontairement placé ici, dans le premier
   fichier chargé : chaque composant peut ensuite imposer sa propre taille
   sans être écrasé. Les icônes reprennent la couleur du texte qui les
   entoure. Elles sont dessinées au trait ; la classe « plein » sert aux
   logos de marque (WhatsApp, TikTok, Facebook). */

svg[aria-hidden="true"] {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg.plein {
  fill: currentColor;
  stroke: none;
}

/* Le sprite d'icônes n'est jamais visible : il sert de bibliothèque */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

button {
  cursor: pointer;
  border: 0;
  background: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* --- Accessibilité au clavier ------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--bleu-logo);
  outline-offset: 2px;
  border-radius: var(--rayon-xs);
}

/* Lien « aller au contenu », visible seulement au clavier */
.saut-contenu {
  position: absolute;
  left: 50%;
  top: var(--e-2);
  transform: translate(-50%, -200%);
  z-index: calc(var(--plan-modale) + 10);
  padding: var(--e-3) var(--e-5);
  background: var(--bleu-primaire);
  color: var(--blanc);
  font-weight: var(--graisse-moyenne);
  border-radius: var(--rayon-pilule);
  text-decoration: none;
  transition: transform var(--transition-rapide);
}

.saut-contenu:focus {
  transform: translate(-50%, 0);
}

/* Masqué à l'écran mais lu par les lecteurs d'écran */
.lecture-seule {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Conteneurs et rythme des sections ----------------------------------- */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

.section {
  padding-block: var(--section-y);
}

.section--brume { background-color: var(--bleu-brume); }

/* --- Section au motif -----------------------------------------------------
   Le motif de fond (dessins scolaires bleus) habille une zone qui serait
   sinon entièrement blanche. Il est posé très atténué, derrière le contenu :
   il donne du relief sans jamais gêner la lecture.
   UNE SEULE section par page porte ce motif.
   -------------------------------------------------------------------------- */

.section--motif {
  position: relative;
  isolation: isolate;
}

.section--motif::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/motif-fond.jpg");
  background-repeat: repeat;
  background-size: 340px auto;
  opacity: .17;
  pointer-events: none;
}

@media (min-width: 900px) {
  .section--motif::before { background-size: 420px auto; }
}

.section--bleue {
  background: linear-gradient(135deg, var(--bleu-primaire) 0%, var(--bleu-nuit) 100%);
  color: var(--blanc);
}

.section--bleue h2,
.section--bleue h3 { color: var(--blanc); }

/* --- En-tête de section --------------------------------------------------- */

.entete-section {
  max-width: var(--largeur-texte);
  margin-bottom: var(--e-7);
}

.entete-section--centre {
  margin-inline: auto;
  text-align: center;
}

.surtitre {
  display: inline-block;
  margin-bottom: var(--e-3);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--rayon-pilule);
  background: var(--bleu-clair);
  color: var(--bleu-profond);
  font-size: var(--t-sm);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section--bleue .surtitre {
  background: rgba(255, 255, 255, .16);
  color: var(--blanc);
}

.chapeau {
  margin-top: var(--e-4);
  font-size: var(--t-md);
  color: var(--encre-douce);
}

.section--bleue .chapeau { color: rgba(255, 255, 255, .88); }

/* --- Utilitaires ---------------------------------------------------------- */

.texte-centre { text-align: center; }
.mesure       { max-width: var(--largeur-texte); }
.mesure-centre{ max-width: var(--largeur-texte); margin-inline: auto; }