/* Les Loustics — pages du site vitrine (accueil, jeux et exercices, à propos, authentification).
   Chargée par $cssFiles, en plus de style.css qui porte la charte et Bootstrap.
   Aucun style inline : la CSP l'interdit, et la règle du workspace aussi.

   Le parti pris de la tâche 8e : LA FENÊTRE SUR LE VILLAGE. Un parent décide en trente
   secondes, et rien ne le convainc autant que de voir l'écran que son enfant aura. Le site
   se montre donc avec des captures réelles du jeu, présentées comme des photographies
   montées sur un carton — passe-partout de papier, filet ocre, étiquette du lieu posée dans
   le coin. C'est le seul geste appuyé de la page ; tout le reste se tient tranquille.

   Structure : les sections alternent BLANC et papier depuis la tâche 8k (point 7 du porteur) —
   auparavant papier et parchemin, deux beiges si proches que l'alternance ne se voyait plus et
   que les cartes crème s'y noyaient. Chaque section s'ouvre sur une ÉTIQUETTE qui nomme une
   chose vraie — un domaine du PER, un cycle du programme, un lieu du village — jamais un
   numéro décoratif. */

/* ---------------------------------------------------------------------------------------------
   Bandes et étiquettes
   --------------------------------------------------------------------------------------------- */
.lou-bande { padding: 4.5rem 0; }
/* La bande claire de la vitrine est BLANCHE depuis la tâche 8k (point 7). Elle était en
   parchemin, et la page empilait deux beiges très proches : l'alternance ne se voyait plus,
   les captures et les cartes crème s'y noyaient. Le blanc rend au papier de la charte son rôle
   de couleur — c'est lui, maintenant, qui est la bande TEINTÉE. Le filet reste : entre du blanc
   et du crème, la frontière est trop douce pour se passer d'un trait. */
.lou-bande--blanc { background: #fff; }
.lou-hero + .lou-bande--blanc,
.lou-bande + .lou-bande--blanc,
.lou-bande--blanc + .lou-bande { border-block-start: 1px solid rgba(140, 135, 128, .18); }
.lou-bande h2 { margin-bottom: 1.25rem; }
@media (max-width: 767.98px) { .lou-bande { padding: 3rem 0; } }
/* Les pages en bandes ferment sur un aplat pleine largeur : la marge que style.css réserve
   au-dessus du pied y dessinerait une bande de papier de 4 rem entre la dernière section et lui. */
.lou-foot { margin-top: 0; }

/* L'étiquette nomme : « Éveil · 3 à 4 ans », « MSN · Mathématiques », « Place du village ».
   Elle n'ouvre jamais une numérotation 01/02/03 : le contenu n'est pas une séquence. */
.lou-etiquette { display: inline-block; font-family: var(--lou-texte); font-weight: 800;
    font-size: var(--lou-fs-legend); letter-spacing: .14em; text-transform: uppercase;
    color: var(--lou-ocre-texte); margin-bottom: .5rem; }
.lou-etiquette--sapin { color: var(--lou-sapin-fonce); }

.lou-intro { font-size: var(--lou-fs-lead); max-width: 62ch; }

/* ---------------------------------------------------------------------------------------------
   Le bloc d'accroche (retour R3 du porteur, 27/08)
   --------------------------------------------------------------------------------------------- */
/* Le héros et « Combien ça coûte ? » disaient la même chose de deux façons : deux tailles de
   paragraphe à la suite, des `mt-3` ici et des `mt-4` là, une largeur de mesure pour l'un et
   pas pour l'autre. Le porteur a vu ce que c'était — « un mélange de polices, de tailles, de
   couleurs et d'espacements ».
   D'où UN SEUL bloc, posé sur les quatre accroches du site (les trois héros et le prix) :
     - une échelle de trois tailles, pas plus — l'étiquette, le titre, puis le texte, dont seul
       le premier paragraphe (`.lead`) est agrandi ;
     - une mesure unique de 34 rem : au-delà, une ligne de 90 signes se lit deux fois ;
     - un rythme vertical écrit ICI et non dans les vues. Les `mt-*` semés dans le HTML étaient
       la vraie source du désordre : trois vues, trois valeurs, aucune raison.
   Les marges des enfants sont remises à zéro et c'est l'espacement de frère à frère qui les
   rétablit — un bloc ne peut donc plus s'écarter tout seul de son voisin. */
/* La mesure est portée par les enfants de TEXTE, pas par le bloc : posée sur le bloc, elle
   rétrécissait aussi la rangée de boutons, et les deux appels à l'action passaient à la ligne
   pour trois pixels manquants. Un bouton n'a pas de mesure de lecture. */
.lou-accroche > p, .lou-accroche > h1, .lou-accroche > h2 { max-width: 34rem; }
.lou-accroche > * { margin-bottom: 0; }
.lou-accroche > * + * { margin-top: 1rem; }
/* L'étiquette et son titre sont UNE unité : l'écart entre eux est plus petit que partout ailleurs. */
.lou-accroche > .lou-etiquette { margin-bottom: 0; }
.lou-accroche > .lou-etiquette + * { margin-top: .35rem; }
.lou-accroche h1, .lou-accroche h2 { margin-bottom: 0; }
/* Le seul paragraphe agrandi du bloc. La graisse 300 de la .lead de Bootstrap n'existe pas dans
   Manrope (500 à 800 sont chargées) : le navigateur la synthétisait, d'où un gris de texte
   légèrement différent de celui du paragraphe suivant. On la ramène sur une graisse réelle. */
.lou-accroche .lead { font-size: var(--lou-fs-lead); font-weight: 500; margin-bottom: 0; }
/* La rangée de boutons et le bandeau de gratuité respirent davantage : ils ferment le bloc. */
.lou-accroche > .lou-actions, .lou-accroche > .lou-gratuit { margin-top: 1.75rem; }
.lou-accroche > .lou-actions + .lou-gratuit { margin-top: 1.25rem; }
/* Même chose pour les deux blocs qui ferment le héros du catalogue : les comptes s'écartent du
   paragraphe agrandi, puis les raccourcis des comptes. Le rythme est écrit ICI — dans le bloc qui
   le porte, et avec une spécificité (0-2-0, 0-3-0) qui passe DEVANT le `> * + *` de base. Écrit
   dans la section « Jeux et exercices » plus bas, il y arrivait à égalité de spécificité mais plus
   tard dans la feuille : un `margin: 0` y annulait le rythme, et les deux blocs se collaient. */
.lou-accroche > .lou-comptes { margin-top: 1.5rem; }
.lou-accroche > .lou-comptes + .lou-raccourcis { margin-top: 1.25rem; }

/* ---------------------------------------------------------------------------------------------
   Justification des paragraphes (tâche 8k, point 10)
   --------------------------------------------------------------------------------------------- */
/* Les paragraphes de la vitrine sont justifiés, AVEC la césure automatique — en français l'une
   ne va pas sans l'autre : sans `hyphens`, une colonne étroite se creuse de rivières blanches au
   premier mot long (« bibliothécaire », « recommandations »). La césure s'appuie sur le
   `lang="fr"` de <html> ; sans lui, le navigateur couperait à l'anglaise.
   `:where()` annule la spécificité du sélecteur : les exceptions ci-dessous, qui ne portent
   qu'une classe, l'emportent alors naturellement — sans quoi il aurait fallu les surenchérir.
   N'y échappent que les lignes qui ne sont pas du texte courant : étiquettes de section,
   pastilles d'état, la réponse en un mot de « Combien ça coûte ? » et le bandeau de gratuité,
   dont la seconde ligne se serait étirée sur toute la largeur.
   Le pied de page en est exclu (point 10 encore) : ses colonnes tiennent en vingt caractères et
   la justification y creuserait ce que la césure ne comblerait pas.
   `hyphenate-limit-chars` bride enfin la césure : jamais un mot de moins de six lettres, jamais
   moins de trois lettres de part et d'autre du trait. Sans elle, un encadré étroit coupait
   « en-core » et « at-tendent » — quatre traits en six lignes, une page qui bégaie. Les
   navigateurs qui l'ignorent retombent sur la césure ordinaire : rien à perdre. */
:where(.lou-hero, .lou-bande, .lou-section, .lou-niveau, .lou-question .reponse) p {
    text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3; }
.lou-etiquette, .lou-age-etat, .lou-prix-reponse, .lou-gratuit { text-align: left; hyphens: manual; }
/* L'aveu de franchise a rejoint le tiers de droite : sa colonne tombe à 330 px, et la
   justification y creusait les mêmes rivières que dans les principes. Même remède, même raison. */
.lou-franchise p { text-align: left; }
/* Les principes en sont exclus, eux aussi. Leurs colonnes tombent à 210 px et le sigle PER y
   voyage insécable, collé à son icône de sortie de site (`.lou-lien-per`). Un bloc insécable
   dans une colonne étroite, et la justification creuse devant lui un trou large comme le mot :
   c'était le cas dans « Le programme de l'école ». Le drapeau de droite coûte moins cher qu'un
   trou au milieu d'une phrase de deux lignes. La césure, elle, reste : c'est elle qui tient
   ce drapeau. */
.lou-principe p { text-align: left; }

/* ---------------------------------------------------------------------------------------------
   Signature : la fenêtre sur le village
   --------------------------------------------------------------------------------------------- */
/* Un passe-partout de papier autour d'une capture, et l'étiquette écrite sous l'image, dans la
   marge basse — comme au dos d'une photographie montée. `padding` plutôt qu'une bordure : le
   carton doit être du papier de la charte, pas un trait.
   L'étiquette est POSÉE SOUS l'image et non dessus : les captures du village portent déjà leur
   propre interface dans les quatre coins, et une pastille flottante s'y serait cognée. */
.lou-fenetre { position: relative; display: block; margin: 0; padding: .55rem;
    background: var(--lou-carte); border-radius: 1.6rem; box-shadow: var(--lou-ombre-haute); }
.lou-fenetre > img { display: block; width: 100%; height: auto; border-radius: 1.15rem;
    /* Le filet intérieur tient lieu de cadre : sans lui, un ciel clair se fond dans le papier. */
    box-shadow: inset 0 0 0 1px rgba(63, 58, 54, .18); }
.lou-fenetre figcaption { padding: .65rem .85rem .3rem; font-weight: 700; font-size: var(--lou-fs-petit);
    line-height: 1.45; color: var(--lou-loup-texte); }
.lou-fenetre figcaption .bi { color: var(--lou-ocre-texte); }
.lou-fenetre figcaption em { font-style: normal; color: var(--lou-encre); }

/* ---------------------------------------------------------------------------------------------
   Le carrousel du héros — RETIRÉ (refonte du héros demandée par le porteur, 03/09)
   ---------------------------------------------------------------------------------------------
   Quatre-vingt-quinze lignes vivaient ici : le calage 16/10 des diapositives, la hauteur
   minimale de leur légende, l'étiquette LIEU/QUÊTE, la rangée de commandes en trois colonnes,
   les deux flèches et le bouton d'arrêt habillés en boutons Bootstrap, et les pastilles
   ramenées de la surimpression dans le flux avec leurs contrastes recalculés.
   Le héros ne montre plus qu'UNE capture fixe (app/Views/accueil/index.php) : plus de
   diapositive, donc plus de calage à faire, plus de légende à égaliser, plus de commande à
   contraster. Ce qui reste utile — le passe-partout, le filet intérieur, la légende — est la
   `.lou-fenetre` juste au-dessus, celle que les trois autres figures du site utilisent déjà.
   Le travail d'accessibilité qui vivait ici n'est pas perdu : il ne sert plus, parce que la
   commande qu'il protégeait n'existe plus. `initCarrousels()` reste dans app.js, générique et
   inerte — aucune page n'ouvre plus de carrousel. */

/* ---------------------------------------------------------------------------------------------
   Accueil
   --------------------------------------------------------------------------------------------- */
/* Bandeau de gratuité de l'accueil : une affirmation d'aujourd'hui, pas une promesse (le texte
   prudent complet vit dans la section #combien). Le fond ocre pâle la sort du corps de page. */
/* La forme (inline-flex, alignement, écart) est posée dans la vue par les utilitaires de
   Bootstrap — `d-inline-flex align-items-baseline gap-2` : il ne reste ici que ce que le
   framework ne sait pas, la peau ocre de la charte. */
.lou-gratuit { max-width: 100%; background: rgba(226, 162, 75, .16); border: 1px solid rgba(226, 162, 75, .45); border-radius: 50rem; padding: .55rem 1.1rem; margin-bottom: 0; }
.lou-gratuit .bi { color: var(--lou-ocre-fonce); font-size: 1.15rem; }

.lou-illustration { max-width: 100%; border-radius: 1.5rem; box-shadow: var(--lou-ombre-haute); }
.lou-section { padding: 3rem 0; }
.lou-section h2 { margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------------------------------------
   À propos — texte suivi et partis pris
   --------------------------------------------------------------------------------------------- */
/* LE RYTHME DES INTERTITRES, écrit ici et non en `mt-5` dans la vue. C'est la même correction que
   pour le bloc d'accroche, pour la même raison : les `mt-*` semés dans le HTML étaient la vraie
   source du désordre — quatre intertitres, quatre occasions de se tromper de valeur. Le premier
   n'a pas d'écart : c'est lui qui ouvre la colonne. */
.lou-prose > h2 { margin-top: 3rem; margin-bottom: 1rem; }
.lou-prose > h2:first-child { margin-top: 0; }
.lou-prose > .lou-actions { margin-top: 2rem; }

/* « Nos partis pris » — PLAT depuis la passe d'harmonisation (revue live du porteur : « retirer
   les bordures/cards »). C'étaient six `card card-lou` (filet ocre, dégradé crème, ombre) empilées
   au milieu d'un texte suivi qui ne porte aucune autre carte. Le parti pris se pose donc
   directement sur le papier, comme les principes et les âges de l'accueil : le sous-titre en
   GRAS, la phrase dessous, l'espacement pour seule séparation.
   La graisse vient de `h3` (800 dans la charte) et la taille de --lou-fs-titre : c'est
   `.h5` de Bootstrap, retiré de la vue, qui les ramenait à 500 et 1,25 rem. */
.lou-parti { padding: .25rem 0; }
.lou-parti h3 { font-size: var(--lou-fs-titre); font-weight: 800; margin-bottom: .3rem; }
.lou-parti p { margin-bottom: 0; }

/* Les dix principes (tâche 8k puis R1 du 27/08) : une GRANDE icône, un titre, une phrase.
   « Moins de texte, des icônes plus grandes » est une seule et même demande, vue des deux côtés :
   c'est l'icône qui fait entrer dans le principe, la phrase qui le referme.
   La RÉPARTITION EN COLONNES a quitté cette feuille à l'audit R2 : c'était une grille CSS écrite
   à la main pour obtenir ce que `row row-cols-*` de Bootstrap donne, en plus prévisible. Elle
   vit maintenant dans la vue, en clair. */
/* `> .bi` et non `.bi` : le principe du PER contient un lien qui porte, lui aussi, une petite
   icône de sortie de site. Sans l'enfant direct, elle héritait des 2,75 rem et du `display:block`
   du principe, et tombait toute seule à la ligne suivante. */
/* ICÔNE ET TITRE CENTRÉS (porteur, 19/09/2026), le texte non : c'est la tête du principe qu'on
   parcourt du regard en balayant la rangée, et une colonne de pictogrammes alignés se lit plus
   vite si chacun est au milieu de sa carte. L'icône se centre par `text-align` et non par
   `margin: auto` : un bloc qui prend toute la largeur n'a pas de marge à répartir, et le
   pictogramme restait collé à gauche (vu à la capture, pas au code). La PHRASE, elle, garde son drapeau à gauche —
   centrer trois lignes de longueurs différentes donne un sapin de Noël, et « Le programme de
   l'école » contient un lien insécable qui creuserait des trous (voir `.lou-principe p`). */
.lou-principe > .bi { display: block; font-size: 2.75rem; line-height: 1; color: var(--lou-sapin);
    margin-bottom: .5rem; text-align: center; }
.lou-principe h3 { font-size: var(--lou-fs-titre); font-weight: 800; margin-bottom: .3rem; text-align: center; }
/* Corps de texte = --lou-encre partout (harmonisation vitrine) : la phrase d'un principe lisait
   en gris quand la description d'un âge, juste à côté, était à l'encre. Une seule teinte. */
.lou-principe p { margin-bottom: 0; }
/* « Bientôt » : la pastille de Bootstrap (.badge .rounded-pill) habillée de la charte, rien de
   plus — forme, graisse et espacements sont ceux du framework. Elle dit qu'un principe est un
   engagement pris et non une fonction en ligne ; les teintes sont celles de « En préparation »
   des trois âges, pour qu'un parent reconnaisse la même promesse au même endroit du site.
   `vertical-align` la remonte sur la ligne du titre : la .badge de Bootstrap est en baseline
   et pendait sous les capitales de Manrope 800. */
.lou-bientot { color: var(--lou-ocre-texte); background: rgba(226, 162, 75, .2);
    letter-spacing: .06em; text-transform: uppercase; vertical-align: .12em; }

/* Les trois âges — PLAT depuis la passe d'harmonisation (revue live du porteur : « retirer les
   bordures/cards »). C'étaient des `card card-lou` (filet ocre, dégradé crème, ombre) au milieu
   d'une page où « Nos principes », juste au-dessus, est déjà plat : les deux blocs racontent la
   même chose de deux façons. L'âge se pose donc directement sur la bande — pas de bordure, pas
   d'ombre, fond transparent —, l'icône, l'état, le sous-titre en GRAS et la phrase aérés.
   L'icône monte à 3 rem — c'est elle qu'on voit d'abord quand on cherche « pour quel âge ». Sa
   couleur ocre venait de `.card-lou .bi` ; sans la carte, on la pose ici. L'ÉTAT est écrit sous
   elle, avant le titre : un parent qui inscrit un enfant de neuf ans doit savoir que le cycle 2
   n'est pas encore ouvert. */
.lou-age { padding: .25rem 0; }
.lou-age .bi { display: block; font-size: 3rem; line-height: 1; color: var(--lou-ocre); }
.lou-age h3 { font-size: var(--lou-fs-titre); font-weight: 800; margin-bottom: .3rem; }
.lou-age-etat { display: inline-block; font-family: var(--lou-texte); font-weight: 800;
    font-size: var(--lou-fs-legend); letter-spacing: .1em; text-transform: uppercase;
    color: var(--lou-sapin-fonce); background: rgba(79, 138, 107, .14);
    border-radius: 50rem; padding: .15rem .7rem; margin: .75rem 0 .35rem; }
.lou-age-etat--bientot { color: var(--lou-ocre-texte); background: rgba(226, 162, 75, .2); }

/* « Combien ça coûte ? » — la réponse tient en un mot, alors elle est posée seule et en grand.
   C'est la manuscrite de la charte, pas un chiffre géant : le prix n'est pas un argument
   commercial ici, c'est la fin d'une histoire de famille racontée juste au-dessous.
   Marges à zéro : c'est le rythme de .lou-accroche qui les donne, et la réponse se cale plus
   près de sa question que du paragraphe qui suit — elle répond au titre, pas au texte. */
.lou-prix-reponse { font-family: var(--lou-titre); font-weight: 700; line-height: 1;
    font-size: var(--lou-fs-display); color: var(--lou-sapin-fonce); margin: 0; }
.lou-accroche > .lou-prix-reponse { margin-top: .5rem; }

/* L'aveu de franchise (point 5) : un encadré, parce qu'il ne se lit pas comme le reste — c'est
   le seul endroit du site où nous parlons de nos manques.
   Il passe DANS LE TIERS DE DROITE (retour R3 du porteur) : posé sous le texte, en pleine
   largeur, il se lisait comme une conclusion — c'est-à-dire comme le dernier mot de la page sur
   le prix. À côté, il redevient ce qu'il est : une note en marge, qu'on lit en même temps que
   l'argument et non après lui.
   Il devient donc VERTICAL — le pictogramme au-dessus, comme une carte — au lieu du couple
   icône-à-gauche/texte-à-droite qui n'a plus de largeur pour tenir dans un tiers. */
/* PLAT depuis la passe d'harmonisation (« retirer les bordures/cards ») : plus de filet ocre ni
   d'ombre, juste un lavis ocre très léger — le « fond très léger » que la consigne autorise. La
   note reste mise à part (c'est le seul endroit où l'on parle de nos manques), mais par sa teinte
   de fond, pas par une carte au milieu d'une page qu'on vient d'aplatir. */
.lou-franchise { padding: 1.35rem 1.5rem; background: rgba(226, 162, 75, .1); border-radius: 1.25rem; }
.lou-franchise .bi { display: block; font-size: 1.9rem; line-height: 1; color: var(--lou-ocre-fonce); margin-bottom: .65rem; }
.lou-franchise h3 { font-size: var(--lou-fs-titre); font-weight: 800; margin-bottom: .4rem; }
/* Corps de texte = UNE seule teinte, --lou-encre (harmonisation vitrine). L'aveu de franchise
   lisait en gris (--lou-loup-texte) quand les paragraphes voisins étaient à l'encre : c'était
   « une couleur par paragraphe ». Il rejoint l'encre ; sa mise à part tient à l'encadré, pas
   à la couleur du texte. */
.lou-franchise p { margin-bottom: 0; }

.lou-hero { padding: 3.5rem 0 3rem; }
.lou-hero h1 { font-size: var(--lou-fs-display); line-height: 1.12; }
/* La phrase du PER, sous l'accroche : elle cite la source du programme et y renvoie. Elle parle
   moins fort que l'accroche — c'est une précision, pas une promesse. La mesure, la taille et
   l'espacement lui viennent maintenant de .lou-accroche : il ne reste ici que sa couleur. */
.lou-per { color: var(--lou-loup-texte); }
/* Le lien sort du site : l'icône ne doit jamais se retrouver seule au bout d'une ligne. */
.lou-lien-per { white-space: nowrap; }
.lou-lien-per .bi { font-size: .72em; margin-left: .22em; vertical-align: .08em; }

/* Les déguisements : les en-pied détourés se posent sur le papier, sans carte autour. Ils sont
   déjà des dessins cernés — les encadrer une deuxième fois ferait un timbre. */
.lou-deguisements { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem; align-items: end; }
.lou-deguisement { text-align: center; }
.lou-deguisement img { width: 100%; height: auto; max-width: 160px; }
.lou-deguisement span { display: block; font-weight: 700; font-size: var(--lou-fs-petit); margin-top: .25rem; }

/* ---------------------------------------------------------------------------------------------
   Questions fréquentes — <details>/<summary> natif : ni script, ni piège au clavier
   --------------------------------------------------------------------------------------------- */
.lou-questions { max-width: 52rem; }
/* PLATES depuis la passe d'harmonisation (« retirer les bordures/cards ») : dix questions
   encadrées, ombrées et posées sur un dégradé crème faisaient dix cartes empilées — la section
   la plus lourde de la page, pour ce qui n'est qu'une liste. Une question est maintenant une
   LIGNE, séparée de la suivante par un filet, comme un sommaire.
   Le filet reste indispensable : sans lui, une réponse dépliée et la question suivante se
   toucheraient sans qu'on sache où l'une finit. C'est un séparateur, pas un cadre. */
.lou-question { border-block-end: 1px solid rgba(140, 135, 128, .28); }
.lou-question:first-of-type { border-block-start: 1px solid rgba(140, 135, 128, .28); }
.lou-question > summary { list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 0;
    font-weight: 700; font-size: var(--lou-fs-base); position: relative; }
.lou-question > summary::-webkit-details-marker { display: none; }
/* Le chevron est dessiné par la feuille, pas par un caractère dans le HTML : il ne doit pas
   être lu par un lecteur d'écran, qui annonce déjà l'état ouvert/fermé du <details>. */
.lou-question > summary::after { content: ''; position: absolute; right: .35rem; top: 1.35rem;
    width: .6rem; height: .6rem; border-right: 2.5px solid var(--lou-ocre-texte);
    border-bottom: 2.5px solid var(--lou-ocre-texte); transform: rotate(45deg);
    transition: transform .18s ease; }
.lou-question[open] > summary::after { transform: rotate(-135deg); top: 1.6rem; }
.lou-question > summary:focus-visible { outline: 3px solid var(--lou-ocre); outline-offset: 2px; }
.lou-question .reponse { padding: 0 0 1.25rem; }
.lou-question .reponse > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .lou-question > summary::after { transition: none; } }

/* ---------------------------------------------------------------------------------------------
   Jeux et exercices
   --------------------------------------------------------------------------------------------- */
/* Forme (flex, retour à la ligne, écart, liste sans puces) : utilitaires de Bootstrap dans la
   vue. Seule la marge BASSE est remise à zéro (celle que le reboot pose sur un <ul>) : la marge
   haute appartient au rythme de .lou-accroche, écrit plus haut dans cette feuille. Un `margin: 0`
   ici annulait ce rythme — même spécificité, mais plus bas dans la feuille — et collait les
   pastilles au paragraphe qui les annonce. */
.lou-comptes { margin-bottom: 0; }
/* Le filet ocre est parti avec les autres (« retirer les bordures/cards ») : cinq pastilles
   cerclées au ras du héros y ajoutaient cinq cadres. Le lavis ocre suffit à les détacher du
   papier — c'est le « fond très léger » que la consigne laisse, et c'est celui de l'aveu de
   franchise et de la pastille « Bientôt » : une seule façon de teinter un bloc sur le site. */
.lou-comptes li { background: rgba(226, 162, 75, .14);
    border-radius: 50rem; padding: .45rem 1.1rem; font-weight: 700; }
.lou-comptes strong { color: var(--lou-sapin-fonce); }
.lou-raccourcis { margin-bottom: 0; font-size: var(--lou-fs-petit); }
.lou-raccourcis > span { color: var(--lou-loup-texte); font-weight: 600; }
.lou-raccourcis a { display: inline-flex; align-items: baseline; gap: .35rem; font-weight: 700;
    text-decoration: none; border-bottom: 2px solid var(--lou-ocre); padding-bottom: .1rem; }
.lou-raccourcis a:hover, .lou-raccourcis a:focus-visible { border-bottom-color: var(--lou-sapin); }
.lou-raccourcis .ages { font-weight: 500; color: var(--lou-loup-texte); font-size: var(--lou-fs-petit); }

/* Un niveau : sa présentation à gauche, sa capture à droite, puis sa grille de quêtes. */
/* Même leçon que style.css (24/09/2026) : `scroll-padding-top` sur <html> porte déjà la réserve du
   bandeau, `scroll-margin-top` s'y AJOUTE — un demi-rem d'air, pas une seconde hauteur de bandeau. */
.lou-niveau { scroll-margin-top: .5rem; padding: 3.5rem 0; }
.lou-niveau + .lou-niveau { border-top: 1px solid rgba(140, 135, 128, .22); }
.lou-niveau h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .75rem; }
.lou-niveau h2 .ages { font-family: var(--lou-texte); font-size: var(--lou-fs-base); font-weight: 700; color: var(--lou-loup-texte); }

/* Le portrait vient d'une fiche de personnage : son fond parchemin RESTE, le cadre est assumé.
   Filet ocre et coins arrondis, comme une carte que l'on garde — pas un détourage bâclé.
   Le vignetage (l'ombre interne large, couleur parchemin) éteint les marges : les fiches sont
   des planches serrées, et deux ou trois lettres de la colonne voisine entrent dans le cadre.
   Les recadrer aurait coûté le marteau du nain et la palette du musicien. */
.lou-personnage-bloc { text-align: center; margin: 0; }
/* Le cadre ocre de 3 px et son ombre sont partis avec les autres (« retirer les bordures/cards ») :
   le portrait d'un guide n'est pas une carte à collectionner, c'est l'illustration d'un niveau.
   Le VIGNETAGE reste, et c'est lui qui compte : les fiches sont des planches serrées, et sans
   cette ombre interne couleur parchemin, deux ou trois lettres de la colonne voisine entrent dans
   l'image. Les recadrer coûterait le marteau du nain et la palette du musicien. */
.lou-personnage-cadre { display: inline-block; position: relative; max-width: 190px;
    border-radius: 1rem; overflow: hidden; }
.lou-personnage-cadre::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 16px 13px rgba(243, 235, 222, .97); }
.lou-personnage { display: block; width: 100%; height: auto; }
.lou-personnage-bloc figcaption { font-size: var(--lou-fs-petit); color: var(--lou-loup-texte); margin-top: .5rem; }

.quete-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1.75rem 1.5rem; margin-top: 2rem; }
/* PLATE depuis la passe d'harmonisation (« retirer les bordures/cards ») : le catalogue empilait
   trente-quatre cartes cerclées, ombrées et posées sur un dégradé crème — sur un téléphone, la
   page en faisait quarante mille pixels de haut, et l'oeil ne voyait plus que des cadres.
   Ce qui reste est ce qui INFORME : le filet coloré du haut, qui dit le domaine du PER, et
   l'espacement. Le filet passe de 5 px à 3 px : sans cadre autour, il n'a plus à tenir tête à
   une bordure — il ouvre la fiche, il ne l'encadre pas. */
.quete-fiche { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 0 0;
    border-top: 3px solid var(--lou-loup-clair); }
.quete-fiche h3 { font-size: var(--lou-fs-titre); font-weight: 800; margin: 0; }
.quete-fiche .lieu { color: var(--lou-loup-texte); font-size: var(--lou-fs-petit); margin: 0; }
.quete-fiche .objectifs { list-style: none; padding: 0; margin: .25rem 0 0; font-size: var(--lou-fs-petit); }
.quete-fiche .objectifs li { margin-bottom: .35rem; }
.quete-fiche .objectifs code { font-family: var(--lou-texte); font-weight: 800; font-size: var(--lou-fs-legend);
    background: rgba(226, 162, 75, .18); color: var(--lou-encre); border-radius: .4rem; padding: .1rem .4rem; }
.quete-fiche .gestes { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: auto 0 0; list-style: none; }
.quete-fiche .gestes li { font-size: var(--lou-fs-legend); font-weight: 700; color: var(--lou-sapin-fonce);
    background: rgba(79, 138, 107, .12); border-radius: 50rem; padding: .2rem .7rem; }
.quete-fiche .duree { font-size: var(--lou-fs-petit); color: var(--lou-loup-texte); }
/* La VIGNETTE qui ouvrait chaque fiche a été retirée (revue live du porteur : « les miniatures
   avant les titres ne servent pas »). C'était l'illustration d'introduction de la quête, servie
   ici en 4/3 au-dessus de son titre : vingt-six dessins pour trente-quatre fiches — la même
   maison-et-chat sous quatre titres différents, la même grange sous trois autres. Elles ne
   distinguaient donc pas les quêtes, elles les déguisaient en cartes à jouer, et elles doublaient
   la hauteur d'une page qu'un parent parcourt pour COMPARER. Le titre, le lieu, la durée et
   l'objectif du PER, eux, disent chacun quelque chose. */

/* Le domaine du PER décide de la couleur du filet supérieur : ce n'est pas une décoration,
   c'est le rangement du Plan d'études romand rendu visible. Les valeurs viennent de
   app/Data/domaines.php — un attribut style= serait interdit par la CSP. */
.domaine-L   { border-top-color: #7FB4D9; }
.domaine-MSN { border-top-color: #E2A24B; }
.domaine-SHS { border-top-color: #8FB996; }
.domaine-A   { border-top-color: #F2A7B5; }
.domaine-CM  { border-top-color: #4F8A6B; }
.domaine-FG  { border-top-color: #A58BD0; }
.domaine-EN  { border-top-color: #8C8780; }
.quete-fiche .domaine { font-family: var(--lou-texte); font-weight: 800; font-size: var(--lou-fs-legend);
    letter-spacing: .1em; text-transform: uppercase; color: var(--lou-loup-texte); }

/* Comment se déroule une quête : quatre moments, dans l'ordre où ils arrivent. Ici la
   numérotation dit quelque chose de vrai — c'est une séquence — alors elle reste. */
.lou-deroule { counter-reset: etape; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1.5rem; }
.lou-deroule li { counter-increment: etape; list-style: none; padding-top: .5rem; border-top: 3px solid var(--lou-ocre); }
.lou-deroule li::before { content: counter(etape); display: block; font-family: var(--lou-titre);
    font-size: 1.8rem; font-weight: 700; color: var(--lou-ocre-texte); line-height: 1; margin-bottom: .35rem; }
.lou-deroule h3 { font-size: var(--lou-fs-titre); font-weight: 800; }
.lou-deroule p { margin-bottom: 0; }

/* ---------------------------------------------------------------------------------------------
   Inscription et connexion — la carte se pose SUR le village
   --------------------------------------------------------------------------------------------- */
/* Le fond est une vue réelle du village, voilée pour que le texte reste lisible. Le voile est
   un dégradé de papier opaque à 92 % : sur le contraste, c'est lui qui compte, pas l'image. */
.auth-village { position: relative; isolation: isolate; min-height: calc(100vh - var(--lou-entete-h));
    display: flex; align-items: center; padding: 3rem 0; overflow: hidden; }
/* Le flou n'est pas un effet : les captures du village portent l'interface du jeu (le nom du
   lieu, la boussole, les boutons), et sous un simple voile ces textes restaient lisibles en
   fantôme derrière le formulaire. Flouté, le village redevient une ambiance. `scale` évite la
   frange transparente que le flou crée sur les bords. */
.auth-village::before { content: ''; position: absolute; inset: 0; z-index: -2;
    background-image: url('/assets/img/captures/village-place.webp');
    background-size: cover; background-position: center 35%;
    filter: blur(5px); transform: scale(1.05); }
.auth-village::after { content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(251, 246, 238, .84), rgba(244, 234, 219, .95)); }
.auth-village--chateau::before { background-image: url('/assets/img/captures/chateau-des-arts.webp'); }
/* 18/09/2026 (porteur) : « mot de passe oublié » a un fond, elle aussi — un TROISIÈME lieu, pour
   que les trois pages d'authentification ne se confondent pas au coup d'œil. */
.auth-village--lac::before { background-image: url('/assets/img/captures/lac-du-cartographe.webp'); }
/* La marque au-dessus d'une carte SEULE (mot de passe oublié) : centrée, plus petite que celle de
   la colonne d'appui, et elle ne prend pas la place du titre. */
.auth-marque--carte { display: block; margin: 0 auto 1.25rem; max-width: 12rem; height: auto; }
/* Sur un téléphone, la même image couvre une surface bien plus petite : l'interface du jeu y
   est proportionnellement énorme, et le flou doit suivre. */
@media (max-width: 767.98px) { .auth-village::before { filter: blur(9px); } }
/* Le fond blanc est dans style.css (`.carte-blanche`), porté par les vues : la même carte sert
   aux trois pages d'authentification ET au contact, qui ne charge pas cette feuille. */
.auth-carte { border: 1px solid rgba(226, 162, 75, .35); box-shadow: var(--lou-ombre-haute); }
.auth-carte .card-body { padding: 2rem; }
@media (max-width: 575.98px) { .auth-carte .card-body { padding: 1.35rem; } }
/* Le louveteau détouré qui accompagne l'argumentaire (point 4 : les costumes illustrent le
   site). Il se pose sur le fond, sans cadre : c'est déjà un dessin cerné. Il disparaît sur
   les écrans bas, où la place appartient au formulaire. */
.auth-hote { display: block; width: 150px; height: auto; margin-top: 1rem; }
/* La marque dans la MOITIÉ GAUCHE (retour R4 du porteur, 27/08). Ces deux pages n'ont pas de
   pied — le formulaire est tout — et la seule marque était celle du bandeau, à 44 px, au-dessus
   d'une carte qui occupe l'écran. Elle ouvre maintenant la colonne d'argumentaire, du côté où
   l'œil commence.
   `alt=""` : le nom du site est déjà porté par le lien du bandeau, à trois éléments de là. Le
   redire ferait annoncer « Les Loustics » deux fois à un lecteur d'écran, pour une image qui
   n'apporte alors rien.
   Elle disparaît sous 992 px avec le louveteau : en dessous, il n'y a plus deux moitiés, la
   colonne passe SOUS le formulaire, et la marque du bandeau reste à trois centimètres. */
.auth-marque { display: block; height: 64px; width: auto; margin-bottom: 1.5rem; }
@media (max-width: 991.98px) { .auth-marque { display: none; } }
.auth-appui { max-width: 30rem; }
.auth-appui h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
/* Forme de la liste : `list-unstyled` et `d-flex gap-2 align-items-start` dans la vue (audit R2).
   Ne restent ici que les deux valeurs que Bootstrap ne devine pas — le décrochement du bloc et
   l'écart entre deux arguments. */
.auth-appui ul { margin: 1.25rem 0 0; }
.auth-appui li { margin-bottom: .85rem; }
.auth-appui .bi { color: var(--lou-sapin-fonce); font-size: 1.2rem; flex: 0 0 auto; line-height: 1.5; }
.auth-legal { margin: 1.25rem 0 0; font-size: var(--lou-fs-petit); color: var(--lou-loup-texte); }
@media (max-height: 780px) and (min-width: 992px) { .auth-hote { display: none; } }
@media (max-width: 991.98px) { .auth-hote { display: none; } }

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   T9M — « CE QUE L'ATELIER PRÉPARE », en bas du catalogue public.

   Une LISTE et non une grille de fiches, et c'est délibéré : une fiche de quête promet une
   illustration, des exercices et une durée éprouvée. Une mission annoncée n'a que son titre, son
   lieu et son niveau visé — lui donner la même boîte qu'aux autres ferait croire à un contenu
   équivalent, sur une page que des parents lisent pour décider.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.lou-a-venir-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .75rem; margin-top: 1.5rem; }
/* Le cadre en pointillé est parti avec les autres (« retirer les bordures/cards »). Ce qu'il
   disait — « ceci n'est pas encore jouable » — reste dit deux fois, et mieux : par la hachure du
   fond et par la pastille « En préparation » posée devant le titre. */
.lou-a-venir-fiche {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "badge titre" "badge lieu";
    align-items: center; gap: .15rem .75rem;
    padding: .8rem 1rem; border-radius: 1rem;
    background: repeating-linear-gradient(135deg, rgba(140, 135, 128, .07) 0 6px, transparent 6px 14px);
}
.lou-a-venir-fiche .badge { grid-area: badge; white-space: nowrap; }
.lou-a-venir-fiche strong { grid-area: titre; font-size: var(--lou-fs-base); }
.lou-a-venir-fiche > span.text-loup { grid-area: lieu; font-size: var(--lou-fs-petit); }
@media (max-width: 575.98px) {
    .lou-a-venir-fiche { grid-template-columns: 1fr; grid-template-areas: "badge" "titre" "lieu"; justify-items: start; gap: .35rem; }
}