/* =========================================================================
   Pas à son — feuille de styles de la page d'accueil
   Charte validée : lavande / bleu / jaune / vert sur blanc,
   rouge #D3263A réservé aux graphèmes, Lexend (interface) + Andika (lecture).
   Mise en page : colonne centrée de 77,5 rem, une section = un bloc,
   grilles qui passent en 2 colonnes puis 1 sur téléphone.
   ========================================================================= */

/* ---------- 1. Jetons de la charte ------------------------------------- */
:root {
  /* Lavande — couleur signature */
  --lavande-50:  #F3F0FD;
  --lavande-100: #EEEAFD;
  --lavande-150: #E1DBFA;
  --lavande-200: #C9C0F3;
  --lavande-300: #B8AEEF;
  --violet-600:  #5B4BB7;
  --violet-700:  #463897;
  --violet-800:  #3B2F84;
  /* Bleu doux */
  --bleu-50:  #E3F0FC;
  --bleu-100: #D1E6FA;
  --bleu-600: #2F6DB5;
  --bleu-800: #1F5A9E;
  /* Jaune */
  --jaune-50:  #FFF3CC;
  --jaune-100: #FFEAA6;
  --jaune-400: #FFD84D;
  --jaune-500: #E3B92A;
  --ocre-700:  #8A6200;
  --ocre-800:  #6E4E00;
  /* Vert doux */
  --vert-50:  #E2F4E8;
  --vert-100: #CDEBD7;
  --vert-600: #2E7D4F;
  --vert-800: #23663F;
  /* Neutres */
  --blanc: #FFFFFF;
  --brume: #F7F5FE;
  --trait: #ECE8FA;
  --encre: #2B2547;
  --encre-douce: #5A5478;
  --encre-carte: #4A4468;
  /* Rouge graphème : réservé aux graphèmes travaillés, aucun autre usage */
  --couleur-grapheme: #D3263A;

  /* Rôles (modifiés par « Adapter l'affichage ») */
  --fond: var(--blanc);
  --surface: var(--blanc);
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --texte-carte: var(--encre-carte);
  --bordure: var(--trait);
  --bordure-bouton: var(--lavande-200);
  --focus: var(--bleu-600);

  /* Typographies */
  --police-interface: 'Lexend', 'Verdana', 'Segoe UI', system-ui, sans-serif;
  --police-lecture: 'Andika', 'Lexend', 'Verdana', system-ui, sans-serif;

  /* Lecture (modifiés par « Espacement ») */
  --interligne: 1.6;
  --espace-lettres: 0.01em;
  --espace-mots: 0.06em;

  /* Formes et mesures */
  --rayon-carte: 2rem;
  --rayon-interieur: 1.375rem;
  --rayon-pilule: 999px;
  --gouttiere: 1.5rem;
  --entre-sections: 6rem;
  --largeur-max: 77.5rem;
  --barre-onglets: 0px;

  /* Bordure à rayures des fiches papier */
  --rayures: repeating-linear-gradient(135deg, var(--lavande-200) 0 8px, var(--blanc) 8px 16px);

  color-scheme: light;
}

/* ---------- 2. Réglages « Adapter l'affichage » ------------------------ */
html[data-taille="normal"]     { font-size: 100%; }
html[data-taille="grand"]      { font-size: 115%; }
html[data-taille="tres-grand"] { font-size: 130%; }

html[data-espacement="large"] {
  --interligne: 1.9;
  --espace-lettres: 0.06em;
  --espace-mots: 0.22em;
}

html[data-contraste="renforce"] {
  --texte: #000000;
  --texte-doux: #2B2547;
  --texte-carte: #2B2547;
  --bordure: #B8AEEF;
  --bordure-bouton: #5B4BB7;
}

html[data-fond="creme"]   { --fond: #FFF8E7; }
html[data-fond="lavande"] { --fond: #F5F2FD; }

/* ---------- 3. Base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 1rem; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-interface);
  font-size: 1.25rem;
  line-height: var(--interligne);
  letter-spacing: var(--espace-lettres);
  word-spacing: var(--espace-mots);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--barre-onglets);
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }

a { color: var(--violet-700); }
a:hover { color: var(--encre); }

a:focus-visible,
button:focus-visible,
main:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.icone {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: 0.75rem 1.25rem;
  border-radius: var(--rayon-pilule);
  background: var(--violet-600);
  color: var(--blanc);
  font-weight: 600;
  text-decoration: none;
}
.lien-evitement:focus { top: 1rem; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Graphème : rouge + gras + souligné, jamais la couleur seule */
.grapheme {
  color: var(--couleur-grapheme);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}
.grapheme-seul {
  font-family: var(--police-lecture);
  color: var(--couleur-grapheme);
  font-weight: 700;
  letter-spacing: 0;
}
.mot-lecture { font-family: var(--police-lecture); letter-spacing: var(--espace-lettres); }

.rayures { background: var(--rayures); }

/* ---------- 4. Boutons ------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0 1.5rem;
  border-radius: var(--rayon-pilule);
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  word-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.bouton--principal {
  min-height: 4.25rem;
  padding: 0 2.125rem;
  background: var(--violet-600);
  color: var(--blanc);
  font-size: 1.4375rem;
  box-shadow: 0 6px 0 var(--violet-800);
}
.bouton--principal:hover { color: var(--blanc); background: var(--violet-700); }
.bouton--principal:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--violet-800); }
.bouton--principal .icone { width: 1.625rem; height: 1.625rem; stroke-width: 2.5; }

.bouton--contour {
  background: var(--surface);
  border-color: var(--bordure-bouton);
  color: var(--violet-700);
}
.bouton--contour:hover { background: var(--lavande-50); color: var(--violet-700); }

.bouton--secondaire {
  background: var(--surface);
  border-color: var(--violet-600);
  color: var(--violet-700);
}
.bouton--secondaire:hover { background: var(--lavande-50); color: var(--violet-700); }
.bouton--secondaire .icone { stroke-width: 2.5; width: 1.375rem; height: 1.375rem; }

.bouton--doux {
  background: var(--lavande-50);
  color: var(--violet-700);
}
.bouton--doux:hover { background: var(--lavande-100); color: var(--violet-700); }
.bouton--doux .icone { stroke-width: 2.5; width: 1.375rem; height: 1.375rem; }

.bouton-rond {
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--bordure-bouton);
  background: var(--surface);
  color: var(--violet-700);
  cursor: pointer;
  padding: 0;
}
.bouton-rond:hover { background: var(--lavande-50); }
.bouton-rond--plein { border-color: transparent; background: var(--lavande-50); width: 3rem; height: 3rem; }

/* « Bientôt disponible » : lien présent mais page pas encore créée */
[data-a-venir] { cursor: pointer; }

/* ---------- 5. En-tête ------------------------------------------------- */
.entete {
  background: var(--fond);
  border-bottom: 2px solid var(--bordure);
}
.entete__ligne {
  max-width: 85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--texte);
  text-decoration: none;
  flex-shrink: 0;
}
.logo:hover { color: var(--texte); }
.logo__image { width: 3.25rem; height: 3.25rem; }
.logo__texte { display: flex; flex-direction: column; line-height: 1.1; }
.logo__nom { font-size: 1.625rem; font-weight: 700; letter-spacing: 0; }
.logo__slogan { font-size: 0.9375rem; font-weight: 500; color: var(--texte-doux); }

.nav-principale__liste { display: flex; flex-wrap: nowrap; gap: 0.25rem; }
.nav-principale a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.125rem;
  border-radius: var(--rayon-pilule);
  color: var(--texte);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav-principale a:hover { background: var(--lavande-50); color: var(--violet-700); }
.nav-principale a[aria-current="page"] {
  background: var(--lavande-50);
  color: var(--violet-700);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

.bouton--reglages { position: relative; min-height: 3.25rem; padding: 0 1.25rem; font-size: 1.0625rem; flex-shrink: 0; }
.bouton--reglages__court { display: none; }

/* ---------- 6. Zone d'accueil ------------------------------------------ */
.accueil { padding-top: 4.5rem; }

.accueil__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3.5rem;
  align-items: center;
}

.accueil__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  min-width: 0;
}

.pastille-bonjour {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem 0.375rem 0.625rem;
  border-radius: var(--rayon-pilule);
  background: var(--jaune-50);
  color: var(--ocre-800);
  font-size: 1.0625rem;
  font-weight: 600;
}
.icone-etoile { width: 1.375rem; height: 1.375rem; fill: var(--jaune-400); stroke: var(--ocre-700); stroke-width: 1.5; stroke-linejoin: round; }

.accueil__titre {
  font-size: 4rem;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  word-spacing: 0;
}
.accueil__phrase {
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--texte-doux);
  max-width: 26ch;
}
.accueil__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.5rem;
}

.accueil__visuel {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 1.5rem;
  min-width: 0;
}
.rond-deco { position: absolute; border-radius: 50%; }
.rond-deco--jaune { width: 18.75rem; height: 18.75rem; max-width: 80%; aspect-ratio: 1; background: var(--jaune-50); top: -0.625rem; right: 1.25rem; }
.rond-deco--bleu  { width: 7.5rem; height: 7.5rem; background: var(--bleu-50); bottom: 0; left: 1.875rem; }

/* Mini-fiche */
.mini-fiche {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 30rem;
  padding: 0.75rem;
  border-radius: 1.875rem;
  transform: rotate(-2deg);
  box-shadow: 0 18px 40px rgba(43, 37, 71, 0.12);
}
.mini-fiche__interieur {
  background: var(--blanc);
  color: var(--encre);
  border-radius: var(--rayon-interieur);
  padding: 1.375rem 1.75rem 1.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.mini-fiche__haut { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mini-fiche__son { display: flex; flex-direction: column; }
.mini-fiche__etiquette { font-size: 1rem; font-weight: 500; color: var(--encre-douce); }
.mini-fiche__grapheme { font-size: 6.5rem; line-height: 1; }
.mini-fiche__cadre {
  width: 8.75rem;
  height: 8.75rem;
  flex-shrink: 0;
  border-radius: 1.5rem;
  border: 3px solid var(--lavande-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-fiche__cadre img { width: 7rem; height: 7rem; }
.mini-fiche__mot { font-size: 2.5rem; line-height: 1.2; }
.mini-fiche__lignes { display: flex; flex-direction: column; gap: 0.875rem; padding-top: 0.5rem; }
.ligne-ecriture {
  height: 1.75rem;
  border-bottom: 2px solid var(--lavande-200);
  background: linear-gradient(transparent calc(50% - 1px), var(--lavande-100) calc(50% - 1px), var(--lavande-100) calc(50% + 1px), transparent calc(50% + 1px));
}
.mini-fiche__etoile {
  position: absolute;
  top: -1.125rem;
  right: -0.875rem;
  width: 4.625rem;
  height: 4.625rem;
  border-radius: 50%;
  background: var(--jaune-400);
  box-shadow: 0 4px 0 var(--jaune-500);
  transform: rotate(8deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-fiche__etoile svg { width: 2.5rem; height: 2.5rem; fill: var(--blanc); stroke: var(--ocre-700); stroke-width: 1.5; stroke-linejoin: round; }

/* Le chemin */
.chemin {
  margin-top: 3.5rem;
  padding: 1.125rem 1.5rem;
  border: 2px solid var(--bordure);
  border-radius: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.chemin__etape { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; }
.chemin__numero {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.chemin__fleche { color: var(--lavande-300); display: flex; }
.chemin__fleche .icone { width: 1.75rem; height: 1.75rem; stroke-width: 2.5; }

/* Couleurs d'activité (servent au chemin et aux cartes) */
.couleur-lavande { --c-fond: var(--lavande-100); --c-rond: var(--lavande-150); --c-texte: var(--violet-700); --c-fort: var(--violet-600); }
.couleur-bleu    { --c-fond: var(--bleu-50);     --c-rond: var(--bleu-100);    --c-texte: var(--bleu-800);   --c-fort: var(--bleu-600); }
.couleur-jaune   { --c-fond: var(--jaune-50);    --c-rond: var(--jaune-100);   --c-texte: var(--ocre-800);   --c-fort: var(--ocre-700); }
.couleur-vert    { --c-fond: var(--vert-50);     --c-rond: var(--vert-100);    --c-texte: var(--vert-800);   --c-fort: var(--vert-600); }
.chemin__numero { background: var(--c-fond); color: var(--c-texte); }

/* ---------- 7. Sections ------------------------------------------------ */
.section { padding-top: var(--entre-sections); }
.section--derniere { padding-bottom: var(--entre-sections); }

.titre-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.titre-section h2 { font-size: 2.5rem; line-height: 1.2; font-weight: 600; letter-spacing: 0; }
.titre-section--avec-lien { justify-content: space-between; flex-wrap: wrap; align-items: flex-end; }
.titre-section--avec-lien > .titre-section { margin-bottom: 0; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.lien-fleche .icone { width: 1.375rem; height: 1.375rem; stroke-width: 2.5; }

/* ---------- 8. Cartes d'activité --------------------------------------- */
.grille-activites {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.carte-activite {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 18.75rem;
  padding: 2rem;
  border-radius: var(--rayon-carte);
  background: var(--c-fond);
  color: var(--encre);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.carte-activite:hover { color: var(--encre); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(43, 37, 71, 0.10); }
.carte-activite > * { position: relative; }
.carte-activite__rond {
  position: absolute;
  right: -3.125rem;
  bottom: -3.125rem;
  width: 11.25rem;
  height: 11.25rem;
  border-radius: 50%;
  background: var(--c-rond);
}
.carte-activite__icone {
  width: 5.75rem;
  height: 5.75rem;
  border-radius: 1.75rem;
  background: var(--blanc);
  color: var(--c-fort);
  display: flex;
  align-items: center;
  justify-content: center;
}
.carte-activite__icone .icone { width: 3rem; height: 3rem; }
.carte-activite__titre { font-size: 2rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
.carte-activite__phrase { font-size: 1.125rem; line-height: 1.5; color: var(--encre-carte); }
html[data-contraste="renforce"] .carte-activite__phrase { color: var(--encre); }
.carte-activite__fleche {
  margin-top: auto;
  align-self: flex-start;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--c-fort);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
}
.carte-activite__fleche .icone { stroke-width: 2.5; }

/* ---------- 9. Cartes de son ------------------------------------------- */
.grille-sons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.carte-son {
  border-radius: 1.875rem;
  padding: 0.5625rem;
  margin: 0;
}
.carte-son__interieur {
  height: 100%;
  background: var(--blanc);
  color: var(--encre);
  border-radius: var(--rayon-interieur);
  padding: 1.25rem 1.5rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}
html[data-contraste="renforce"] .carte-son__interieur { color: #000000; }

.carte-son__haut { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.25rem; }
.carte-son__etiquette { font-size: 1rem; font-weight: 500; color: var(--encre-douce); }

.badge-decouvert {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--rayon-pilule);
  background: var(--vert-50);
  color: var(--vert-800);
  font-size: 0.9375rem;
  font-weight: 600;
}
.badge-decouvert .icone { width: 1.125rem; height: 1.125rem; stroke-width: 3; }

.carte-son__milieu { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.carte-son__grapheme { font-size: 5.25rem; line-height: 1; }
.carte-son__illustration {
  width: 7rem;
  height: 7rem;
  flex-shrink: 0;
  border-radius: var(--rayon-interieur);
  background: var(--brume);
  display: flex;
  align-items: center;
  justify-content: center;
}
.carte-son__illustration img { width: 5.75rem; height: 5.75rem; }

.carte-son__mot { font-size: 2rem; line-height: 1.3; }
.carte-son__mot.lecture-possible { cursor: pointer; text-decoration: underline dotted var(--lavande-300); text-underline-offset: 0.35em; }

.carte-son__actions { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.25rem; }
.carte-son__decouvrir { flex-grow: 1; min-height: 3.25rem; }

/* ---------- 10. Mes sons découverts ------------------------------------ */
.decouverts {
  padding: 2.5rem;
  border-radius: var(--rayon-carte);
  background: var(--brume);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.decouverts .titre-section { margin-bottom: 0; }
.decouverts__liste { display: flex; flex-wrap: wrap; gap: 1rem; }

.son-decouvert {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 4.5rem;
  padding: 0 1.625rem 0 0.875rem;
  border-radius: 1.375rem;
  background: var(--blanc);
  border: 2px solid var(--bordure);
  color: var(--encre);
  text-decoration: none;
}
.son-decouvert:hover { color: var(--encre); border-color: var(--lavande-200); }
.son-decouvert__coche {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--vert-50);
  color: var(--vert-800);
  display: flex;
  align-items: center;
  justify-content: center;
}
.son-decouvert__coche .icone { width: 1.375rem; height: 1.375rem; stroke-width: 3; }
.son-decouvert__mot { font-size: 1.1875rem; font-weight: 500; }
.son-decouvert__grapheme { font-size: 2.375rem; line-height: 1; }

.decouverts__vide { color: var(--texte-doux); font-size: 1.125rem; }

.decouverts__suivant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  border-top: 2px solid var(--bordure);
}
.decouverts__suivant p { font-size: 1.25rem; color: var(--texte-carte); }
.decouverts__suivant .grapheme { font-family: var(--police-lecture); font-size: 1.875rem; }

/* ---------- 11. Espace adultes ----------------------------------------- */
.bandeau-adultes {
  padding: 2rem 2.5rem;
  border-radius: var(--rayon-carte);
  border: 2px solid var(--bordure);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.bandeau-adultes__texte { display: flex; align-items: center; gap: 1.5rem; min-width: 0; }
.bandeau-adultes__icone {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  border-radius: 1.375rem;
  background: var(--lavande-50);
  color: var(--violet-600);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bandeau-adultes__icone .icone { width: 2.375rem; height: 2.375rem; }
.bandeau-adultes h2 { font-size: 1.625rem; line-height: 1.3; font-weight: 600; }
.bandeau-adultes p { font-size: 1.125rem; color: var(--texte-doux); max-width: 52ch; margin-top: 0.25rem; }

/* ---------- 12. Pied de page ------------------------------------------- */
.pied { background: var(--brume); border-top: 2px solid var(--bordure); }
html[data-fond="lavande"] .pied { background: var(--blanc); }
.pied__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 2.5rem;
  font-size: 1.0625rem;
}
.pied__nom { font-weight: 700; font-size: 1.25rem; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.pied__liens a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------- 13. Barre d'onglets (téléphone) ---------------------------- */
.barre-onglets { display: none; }

/* ---------- 14. Annonce « bientôt disponible » ------------------------- */
.annonce {
  position: fixed;
  left: 50%;
  bottom: calc(1.5rem + var(--barre-onglets));
  transform: translateX(-50%);
  z-index: 40;
  max-width: calc(100% - 2rem);
  padding: 0.875rem 1.5rem;
  border-radius: var(--rayon-pilule);
  background: var(--encre);
  color: var(--blanc);
  font-size: 1.0625rem;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(43, 37, 71, 0.25);
  text-align: center;
}

/* ---------- 15. Panneau « Adapter l'affichage » ------------------------ */
.reglages { position: fixed; inset: 0; z-index: 60; }
.reglages__voile { position: absolute; inset: 0; background: rgba(43, 37, 71, 0.35); }
.reglages__panneau {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(28rem, 100%);
  background: var(--fond);
  color: var(--texte);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(43, 37, 71, 0.18);
  padding-top: env(safe-area-inset-top, 0px);
}
.reglages__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem 0.875rem 1.25rem;
  border-bottom: 2px solid var(--bordure);
}
.reglages__entete h2 { display: flex; align-items: center; gap: 0.625rem; font-size: 1.5rem; font-weight: 600; letter-spacing: 0; }
.reglages__entete h2 .icone { color: var(--violet-600); width: 1.625rem; height: 1.625rem; }

.reglages__corps {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.apercu { border-radius: 1.5rem; padding: 0.5rem; }
.apercu__interieur {
  background: var(--fond);
  border-radius: 1.125rem;
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.apercu__etiquette { font-size: 0.9375rem; font-weight: 500; color: var(--texte-doux); }
.apercu__texte { font-family: var(--police-lecture); font-size: 1.375rem; }
html[data-contraste="renforce"] .apercu__texte { font-weight: 700; }

.reglage { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.reglage legend, .reglage__titre { font-size: 1.25rem; font-weight: 600; padding: 0; margin-bottom: 0.625rem; letter-spacing: 0; }
.reglage__titre { margin-bottom: 0; }
.reglage__choix { display: grid; gap: 0.5rem; }
.reglage__choix--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reglage__choix--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reglage__aide { font-size: 0.9375rem; color: var(--texte-doux); padding-left: 0.25rem; }

.choix { position: relative; display: block; cursor: pointer; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix__boite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 4.75rem;
  padding: 0.5rem;
  border-radius: 1.125rem;
  border: 2px solid var(--bordure-bouton);
  background: var(--blanc);
  color: var(--encre);
  font-weight: 500;
  text-align: center;
}
.choix__demo { line-height: 1.15; font-weight: 600; font-size: 1.5rem; }
.choix__demo--lecture { font-family: var(--police-lecture); font-weight: 400; }
.choix__nom { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; line-height: 1.2; }
.choix__nom .icone { display: none; width: 0.875rem; height: 0.875rem; stroke-width: 3.5; }
.choix__pastille { display: block; width: 2.75rem; height: 1.875rem; border-radius: 0.625rem; border: 2px solid var(--lavande-300); }
.choix__pastille--blanc { background: #FFFFFF; }
.choix__pastille--creme { background: #FFF8E7; }
.choix__pastille--lavande { background: #F5F2FD; }

.choix input:checked + .choix__boite {
  background: var(--violet-600);
  border: 3px solid var(--violet-600);
  color: var(--blanc);
  font-weight: 600;
}
.choix input:checked + .choix__boite .choix__nom .icone { display: inline; }
.choix input:focus-visible + .choix__boite { outline: 3px solid var(--focus); outline-offset: 3px; }

.interrupteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 4rem;
  padding: 0.5rem 1rem;
  border-radius: 1.125rem;
  border: 2px solid var(--bordure);
  background: var(--blanc);
  color: var(--encre);
  font-family: inherit;
  font-size: 1.0625rem;
  text-align: left;
  cursor: pointer;
}
.interrupteur__libelle { display: flex; align-items: center; gap: 0.75rem; }
.interrupteur__libelle .icone { color: var(--violet-600); }
.interrupteur__piste {
  position: relative;
  flex-shrink: 0;
  width: 3.75rem;
  height: 2.125rem;
  border-radius: var(--rayon-pilule);
  background: #D8D3EC;
  transition: background-color .15s ease;
}
.interrupteur__bouton {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform .15s ease;
}
.interrupteur[aria-checked="true"] .interrupteur__piste { background: var(--violet-600); }
.interrupteur[aria-checked="true"] .interrupteur__bouton { transform: translateX(1.625rem); }

.reglages__pied {
  display: flex;
  gap: 0.625rem;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--bordure);
}
.reglages__pied .bouton { min-height: 3.5rem; font-size: 1.0625rem; }
.bouton--large { flex-grow: 1; }
.reglages__pied .bouton--principal { box-shadow: 0 4px 0 var(--violet-800); }

body.reglages-ouverts { overflow: hidden; }

/* ---------- 15 bis. En-tête : largeur insuffisante ---------------------
   Sous 1350 px : libellé court « Affichage » et slogan masqué, pour que
   l'en-tête tienne sur une ligne sans débordement. */
@media (max-width: 84.375rem) {
  .logo__slogan { display: none; }
  .bouton--reglages__long { display: none; }
  .bouton--reglages__court { display: inline; }
}

/* En taille Grand / Très grand (ou espacement large), le menu passe sur
   une deuxième ligne sous le logo au lieu de sortir de l'écran. */
html[data-taille="grand"] .entete__ligne,
html[data-taille="tres-grand"] .entete__ligne,
html[data-espacement="large"] .entete__ligne { flex-wrap: wrap; row-gap: 0.5rem; }
html[data-taille="grand"] .nav-principale,
html[data-taille="tres-grand"] .nav-principale,
html[data-espacement="large"] .nav-principale { order: 3; flex-basis: 100%; min-width: 0; }
html[data-taille="grand"] .nav-principale__liste,
html[data-taille="tres-grand"] .nav-principale__liste,
html[data-espacement="large"] .nav-principale__liste { flex-wrap: wrap; }

/* ---------- 16. Tablette ----------------------------------------------- */
@media (max-width: 75rem) {
  .nav-principale a { padding: 0 0.75rem; font-size: 1.0625rem; }
  .logo__slogan { display: none; }
  .bouton--reglages__long { display: none; }
  .bouton--reglages__court { display: inline; }
  .grille-activites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-sons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accueil__titre { font-size: 3.25rem; }
}

/* ---------- 17. Téléphone ---------------------------------------------- */
@media (max-width: 68rem) {
  :root {
    --gouttiere: 1rem;
    --entre-sections: 4rem;
    --barre-onglets: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  }
  body { font-size: 1.1875rem; }

  /* En-tête : logo + « Affichage » ; la navigation passe en bas */
  .entete__ligne { padding-block: 0.75rem; gap: 0.75rem; }
  .nav-principale { display: none; }
  .logo__image { width: 2.75rem; height: 2.75rem; }
  .logo__nom { font-size: 1.375rem; }
  .logo__slogan { display: none; }
  .bouton--reglages { min-height: 3rem; padding: 0 0.875rem; font-size: 1rem; gap: 0.5rem; }

  .barre-onglets {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--fond);
    border-top: 2px solid var(--bordure);
    box-shadow: 0 -6px 20px rgba(43, 37, 71, 0.06);
    padding: 0.5rem 0.375rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
  }
  .barre-onglets ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .barre-onglets a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 3.75rem;
    color: var(--texte);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    word-spacing: 0;
    text-decoration: none;
  }
  .barre-onglets__icone { display: flex; padding: 0.25rem 1rem; border-radius: var(--rayon-pilule); }
  .barre-onglets a[aria-current="page"] { color: var(--violet-700); font-weight: 700; }
  .barre-onglets a[aria-current="page"] .barre-onglets__icone { background: var(--lavande-100); }

  /* Accueil en une colonne */
  .accueil { padding-top: 2rem; }
  .accueil__grille { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .accueil__texte { gap: 1.25rem; }
  .pastille-bonjour { font-size: 1rem; }
  .accueil__titre { font-size: 2.625rem; line-height: 1.15; }
  .accueil__phrase { font-size: 1.25rem; }
  .accueil__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .accueil__actions .bouton--principal { min-height: 4rem; font-size: 1.3125rem; }
  .accueil__actions .bouton--contour { align-self: center; min-height: 3.25rem; }
  .accueil__visuel { padding-block: 0.75rem 0; }
  .rond-deco { display: none; }
  .mini-fiche { padding: 0.625rem; border-radius: 1.625rem; transform: rotate(-1.5deg); margin-inline: 0.25rem; }
  .mini-fiche__interieur { padding: 1rem 1.25rem 1.125rem; gap: 0.375rem; }
  .mini-fiche__grapheme { font-size: 4.75rem; }
  .mini-fiche__cadre { width: auto; height: auto; border: 0; }
  .mini-fiche__cadre img { width: 6.25rem; height: 6.25rem; }
  .mini-fiche__mot { font-size: 2rem; }
  .mini-fiche__lignes .ligne-ecriture:nth-child(2) { display: none; }
  .mini-fiche__etoile { width: 3.5rem; height: 3.5rem; top: -0.875rem; right: -0.375rem; }
  .mini-fiche__etoile svg { width: 1.875rem; height: 1.875rem; }

  .chemin {
    margin-top: 1.75rem;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }
  .chemin__fleche { display: none; }
  .chemin__etape { padding: 0.625rem 0.75rem; border: 2px solid var(--bordure); border-radius: 1.125rem; font-size: 1rem; line-height: 1.3; gap: 0.625rem; }
  .chemin__numero { width: 2.25rem; height: 2.25rem; }

  .titre-section { gap: 0.75rem; margin-bottom: 1.25rem; }
  .titre-section h2 { font-size: 1.875rem; }
  .titre-section .bouton-rond { width: 3rem; height: 3rem; }
  .titre-section--avec-lien .lien-fleche { display: none; }

  /* Cartes d'activité : icône + titre */
  .grille-activites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
  .carte-activite { min-height: 10.625rem; padding: 1.25rem; gap: 0.75rem; border-radius: 1.625rem; }
  .carte-activite__rond, .carte-activite__phrase, .carte-activite__fleche { display: none; }
  .carte-activite__icone { width: 4rem; height: 4rem; border-radius: 1.25rem; }
  .carte-activite__icone .icone { width: 2.125rem; height: 2.125rem; }
  .carte-activite__titre { font-size: 1.4375rem; }

  /* Cartes de son : 2 colonnes, contenu centré */
  .grille-sons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
  .carte-son { border-radius: 1.5rem; padding: 0.4375rem; --rayures: repeating-linear-gradient(135deg, var(--lavande-200) 0 6px, var(--blanc) 6px 12px); }
  .carte-son__interieur { border-radius: 1.125rem; padding: 0.75rem 0.75rem 0.875rem; align-items: center; gap: 0.25rem; }
  .carte-son__haut { position: absolute; top: 0.5rem; right: 0.5rem; min-height: 0; }
  .carte-son__etiquette { display: none; }
  .badge-decouvert { width: 1.875rem; height: 1.875rem; padding: 0; justify-content: center; border-radius: 50%; }
  .badge-decouvert__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .carte-son__milieu { flex-direction: column; gap: 0.25rem; }
  .carte-son__grapheme { font-size: 3.625rem; line-height: 1.05; }
  .carte-son__illustration { width: auto; height: auto; background: none; }
  .carte-son__illustration img { width: 4.375rem; height: 4.375rem; }
  .carte-son__mot { font-size: 1.5625rem; text-align: center; }
  .carte-son__actions { gap: 0.5rem; padding-top: 0.375rem; }
  .carte-son__actions .bouton-rond { width: 3rem; height: 3rem; }
  .carte-son__decouvrir { flex-grow: 0; width: 3rem; min-height: 3rem; height: 3rem; padding: 0; border-radius: 50%; background: var(--violet-600); color: var(--blanc); }
  .carte-son__decouvrir:hover { background: var(--violet-700); color: var(--blanc); }
  .carte-son__decouvrir-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Sons découverts : liste verticale */
  .decouverts { padding: 1.5rem 1.25rem; border-radius: 1.625rem; gap: 1.125rem; }
  .decouverts__liste { flex-direction: column; gap: 0.625rem; }
  .son-decouvert { display: flex; min-height: 4rem; padding: 0 1rem 0 0.75rem; gap: 0.75rem; border-radius: 1.25rem; }
  .son-decouvert__coche { width: 2.25rem; height: 2.25rem; }
  .son-decouvert__mot { font-size: 1.125rem; }
  .son-decouvert__grapheme { font-size: 2.125rem; }
  .decouverts__suivant { flex-direction: column; align-items: stretch; gap: 0.75rem; padding-top: 1rem; }
  .decouverts__suivant p { font-size: 1.125rem; }
  .decouverts__suivant .grapheme { font-size: 1.75rem; }
  .decouverts__suivant .bouton { width: 100%; }

  .bandeau-adultes { padding: 1.25rem; border-radius: 1.625rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .bandeau-adultes__icone { display: none; }
  .bandeau-adultes h2 { font-size: 1.375rem; }
  .bandeau-adultes p { font-size: 1.0625rem; }

  .pied__ligne { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-block: 1.5rem 2rem; font-size: 1rem; }
  .pied__nom { display: none; }
  .pied__liens { flex-direction: column; gap: 0; }

  .reglages__panneau { width: 100%; box-shadow: none; }
  .reglages__entete h2 { font-size: 1.3125rem; }
}

/* ---------- 17 bis. Téléphone : texte agrandi ou très petit écran -------
   Le bouton « Affichage » ne montre plus que son icône ; son nom reste
   lu par les lecteurs d'écran et il reste accessible au clavier.
   Le chemin passe sur une seule colonne. */
@media (max-width: 68rem) {
  .logo { flex-shrink: 1; min-width: 0; }
  .logo__texte { min-width: 0; }

  html[data-taille="grand"] .bouton--reglages,
  html[data-taille="tres-grand"] .bouton--reglages { width: 3rem; height: 3rem; min-height: 3rem; padding: 0; gap: 0; }
  html[data-taille="grand"] .bouton--reglages__court,
  html[data-taille="tres-grand"] .bouton--reglages__court { display: none; }
  html[data-taille="grand"] .bouton--reglages__long,
  html[data-taille="tres-grand"] .bouton--reglages__long {
    display: inline;
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  html[data-taille="grand"] .chemin,
  html[data-taille="tres-grand"] .chemin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 21.25rem) {
  .bouton--reglages { width: 3rem; height: 3rem; min-height: 3rem; padding: 0; gap: 0; }
  .bouton--reglages__court { display: none; }
  .bouton--reglages__long {
    display: inline;
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ---------- 17 ter. Ajustements de débordement ----------------------- */

/* Mini-fiche inclinée : supprime le débordement horizontal résiduel
   créé par la rotation, sans rogner la fiche ni son étoile. */
.accueil { overflow-x: clip; }

/* Chemin : le texte d'une étape passe déjà sur deux lignes dans sa case.
   À 320–360 px, un mot seul (« m'entraîne », « découvre ») est plus large
   que la case : les étapes passent alors sur une colonne, sans couper
   les mots. */
@media (max-width: 23.75rem) {
  .chemin { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 25rem) {
  /* Petit téléphone + texte Grand / Très grand : cartes de sons sur une
     colonne, illustration de la mini-fiche sous le graphème. */
  html[data-taille="grand"] .grille-sons,
  html[data-taille="tres-grand"] .grille-sons { grid-template-columns: minmax(0, 1fr); }
  html[data-taille="grand"] .mini-fiche__haut,
  html[data-taille="tres-grand"] .mini-fiche__haut { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

@media (max-width: 68rem) {
  /* Barre du bas en Très grand : icônes et libellés sur une ligne,
     libellés légèrement réduits pour qu'ils ne se touchent pas. */
  html[data-taille="grand"] .barre-onglets a { font-size: 0.76rem; }
  html[data-taille="tres-grand"] .barre-onglets a { font-size: 0.673rem; }
  html[data-taille="tres-grand"] .barre-onglets__icone { padding-inline: 0.5rem; }
}
@media (max-width: 21.25rem) {
  .barre-onglets { padding-left: 0; padding-right: 0; }
}
@media (max-width: 25rem) {
  /* Petit téléphone + texte agrandi : le bouton « Écouter » d'un titre
     passe sous le titre s'il n'y a plus la place à côté. */
  html[data-taille="grand"] .titre-section,
  html[data-taille="tres-grand"] .titre-section { flex-wrap: wrap; }
  /* Le bouton principal garde son texte entier dans l'écran. */
  html[data-taille="grand"] .accueil__actions .bouton--principal,
  html[data-taille="tres-grand"] .accueil__actions .bouton--principal { padding-inline: 1.25rem; }
}

/* ---------- 18. Mouvement réduit --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .carte-activite:hover { transform: none; }
}