/* Pages de présentation (learn/) : complète la feuille de l'application, chargée avant celle-ci. Couleurs : variables de
   src/style.css uniquement. Copiée telle quelle au build par scripts/vite-diffusion.ts. */
.s-page { padding-bottom: 8px; }
.s-page ul, .s-page ol { margin: 0; padding: 0; list-style: none; }

/* Fil d'Ariane */
.s-fil { padding-top: 16px; font-size: 14px; color: var(--texte-3); }
.s-fil ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.s-fil li { overflow-wrap: anywhere; }
.s-fil li + li::before { content: '/'; padding: 0 8px; color: var(--trait); }
.s-fil a { color: var(--texte-2); }

/* La langue de la page porte le contour or, comme le drapeau choisi dans l'application. */
.drapeau-bouton[aria-current='page'] .drapeau { opacity: 1; outline: 2px solid var(--focus); outline-offset: 2px; }

/* Présentation */
.s-heros .s-mascotte { width: 180px; height: 180px; object-fit: contain; justify-self: center; }
.s-etapes h3, .s-cartes h3 { font-size: 22px; }
.s-cartes { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .s-cartes { grid-template-columns: repeat(2, 1fr); } }
.s-cartes h3 a { color: var(--texte); text-decoration-color: var(--or); }
.s-petit { font-size: 22px; }

/* Listes (leçons, familles, finales) */
.s-liste { display: grid; grid-template-columns: 1fr; gap: 0; }
.s-liste li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--trait); overflow-wrap: anywhere; }
.s-liste li:last-child { border-bottom: 0; }
.s-liste a { font-weight: 600; }
@media (min-width: 720px) {
  .s-colonnes { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
  .s-colonnes li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* Une ouverture et ses lignes */
.s-ouverture h2 { font-size: clamp(24px, 5vw, 30px); }
.s-ouverture h3 { font-size: 18px; color: var(--texte-2); }
.s-ouverture h4 { margin: 4px 0 0; font-size: 15px; color: var(--texte-2); }
.s-lignes { display: flex; flex-direction: column; gap: 6px; }
.s-lignes li { padding: 6px 10px; border-radius: 8px; background: var(--nuit); border: 1px solid var(--trait); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; color: var(--texte-2); overflow-wrap: anywhere; }

/* Le menu revient à la ligne sur les écrans étroits. */
.entete-dedans { flex-wrap: wrap; }
.s-navigation { display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; }
.s-navigation a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .s-navigation { order: 1; flex-basis: 100%; }
}

/* Appel à analyser ses parties depuis les leçons. */
.s-trouver-erreur { max-width: 100%; min-height: 44px; white-space: normal; overflow-wrap: anywhere; text-align: center; }

/* Inscription proposée librement, avant le contenu de chaque page. */
.s-inscription { padding-top: 20px; }
.s-compte-gratuit { min-height: 48px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }