/* --------------------------------------------------------------- Polices --
   Servies par ce serveur, plus par fonts.googleapis.com.

   La page ouvrait deux connexions externes avant d'afficher un seul mot, et
   telechargeait 71,6 Ko en quatre requetes — dont 8,9 Ko rien que pour la
   feuille qui declare les polices. Ces declarations sont maintenant ici, et
   les fichiers a cote : plus de connexion externe, une requete de moins, et
   rien qui depende de la disponibilite d'un tiers.

   Fichiers VARIABLES, une seule par famille et par sous-ensemble : elles
   portent toutes les graisses de 500 a 700 pour les titres, de 400 a 600 pour
   le texte. Six fichiers au lieu de quatorze en versions figees.

   latin et latin-ext seulement. Le site est en francais ; les jeux vietnamien,
   cyrillique et grec ne serviraient jamais, et le navigateur ne telecharge de
   toute facon que le sous-ensemble dont il a besoin.

   Les deux familles sont sous licence SIL OFL : les heberger soi-meme est
   expressement permis.

   font-display: swap — le texte s'affiche tout de suite dans la police de
   repli, puis bascule. Sans lui, la page reste muette le temps du
   telechargement. */

/* latin-ext */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/statique/polices/familjen-grotesk-500-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/statique/polices/familjen-grotesk-500-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/statique/polices/public-sans-400-italique-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/statique/polices/public-sans-400-italique-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/statique/polices/public-sans-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/statique/polices/public-sans-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@charset "utf-8";
/* ==========================================================================
   Meet Me After School — site vitrine.

   Direction. Le logo du centre n'est pas bleu marine et jaune comme le
   supposait la version précédente : c'est un azur dégradé surmonté d'une
   étoile marigold. La marque possède donc déjà ses couleurs ; le travail
   n'était pas d'en inventer, mais de les traiter autrement que ne le fait
   n'importe quel centre de soutien — page blanche, boutons bleus, timidité.
   Ici l'azur NOIE la surface : il porte l'ouverture, la section des salles
   et le pied. L'étoile ne sert qu'à ponctuer, une fois par écran, là où il
   faut agir. Le reste est un papier très légèrement bleuté.

   Typographie. Familjen Grotesk aux titres — ouvertures serrées, « g » à
   queue ouverte : une voix, là où les grotesques neutres n'en ont aucune.
   Public Sans au texte courant, dessinée pour l'administration américaine,
   donc lisible en petit corps sans concurrencer les titres.

   Ce que la version précédente faisait et qu'on ne refait pas : filets
   horizontaux, corps en serif, colonnes de journal, moitié droite vide, et
   une photographie de 149 Ko encodée en base64 dans le HTML.
   ========================================================================== */

:root {
    /* Relevé sur le logo : #54a8fc dominant, #3c60c0 en profondeur,
       étoile marigold. Exprimé en OKLCH pour garder la teinte constante
       quand la clarté change. */
    --azur-nuit:    oklch(30% 0.085 262);
    --azur-profond: oklch(38% 0.125 260);
    --azur:         oklch(52% 0.165 256);
    --azur-vif:     oklch(72% 0.135 250);
    --azur-brume:   oklch(94% 0.022 250);

    --etoile:       oklch(85% 0.155 88);
    --etoile-chaud: oklch(78% 0.155 74);
    --etoile-encre: oklch(48% 0.115 72);   /* le même jaune, lisible sur clair */

    --encre:        oklch(27% 0.045 265);
    --encre-douce:  oklch(45% 0.035 265);
    --encre-pale:   oklch(54% 0.03 265);   /* 57 % donnait 4,33:1 sur papier, sous le seuil */
    --papier:       oklch(98.6% 0.005 250);
    --papier-creux: oklch(96.4% 0.008 250);
    --blanc:        oklch(100% 0 0);

    --filet:        color-mix(in oklab, var(--encre) 13%, transparent);
    --filet-clair:  color-mix(in oklab, var(--blanc) 20%, transparent);

    /* Sémantique : chaque couleur de texte est posée sur son propre lavis
       et tient au-dessus de 4,5:1 — vérifié. */
    --succes-fond:  oklch(94% 0.05 155);
    --succes-texte: oklch(38% 0.09 155);
    --alerte-fond:  oklch(94% 0.05 25);
    --alerte-texte: oklch(43% 0.13 25);
    --alerte-vif:   oklch(52% 0.17 25);   /* astérisque « obligatoire », bordures */
    /* L'étiquette de section posée SUR le marigold : le jaune d'encre y
       tombe à 4,23:1, il faut cette valeur-là et pas une autre. */
    --etoile-sur-etoile: oklch(35% 0.09 70);

    --gouttiere:  clamp(1.25rem, 5vw, 5rem);
    --large:      78rem;
    --texte:      66ch;

    --respire:    clamp(4rem, 9vw, 8.5rem);
    --sortie:     cubic-bezier(.16, 1, .3, 1);

    --display: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
    --courant: "Public Sans", "Segoe UI", system-ui, sans-serif;
}

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

/* L'attribut « hidden » doit toujours l'emporter. La feuille du navigateur le
   traduit par « display: none », mais avec une specificite si faible que le
   moindre selecteur d'auteur passe devant. C'est arrive sur la fiche
   d'inscription : « .page-inscription .wrap button » imposait inline-flex, et
   « Retour » comme « Envoyer l'inscription » restaient affiches des la
   premiere etape alors que le script les masquait. Deux boutons jaunes
   concurrents sur la page qui compte le plus. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--courant);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--encre);
    background: var(--papier);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin: 0;
    /* `hyphens: auto` ne coupe PAS qu'en dernier recours : il coupe des qu'un
       trait d'union equilibre mieux les lignes, meme quand le mot tiendrait.
       « Un accompagne- / ment individuel. » s'affichait ainsi jusqu'a 412 px,
       alors que « accompagnement » entre sans peine dans la colonne. Un titre
       ne se coupe pas : `manual` ne coupe plus qu'aux traits d'union ecrits.
       `overflow-wrap` reste le garde-fou contre le debordement horizontal —
       il brise le mot sans trait d'union, ce qui n'arrive qu'a un mot vraiment
       plus large que sa colonne. */
    hyphens: manual;
    overflow-wrap: break-word;
}

p { margin: 0; max-width: var(--texte); }

a { color: inherit; }

::selection { background: var(--etoile); color: var(--encre); }

:focus-visible {
    outline: 3px solid var(--etoile-chaud);
    outline-offset: 3px;
    border-radius: 3px;
}

.visuellement-cache {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.saut-contenu {
    /* fixed, pas absolute : en absolu il se place par rapport au DOCUMENT,
       donc une fois la page defilee il apparaissait tout en haut, hors de
       l'ecran — un lien d'evitement invisible ne sert a rien. */
    position: fixed; left: 1rem; top: -4rem; z-index: 60;
    background: var(--etoile); color: var(--encre);
    padding: .75rem 1.25rem; border-radius: 999px;
    font-weight: 600; text-decoration: none;
    transition: top .2s var(--sortie);
}
.saut-contenu:focus { top: 1rem; }

/* --------------------------------------------------------------- Échelle */
/* Rapport 1,3 entre les degrés : une échelle plate se lit comme une absence
   de décision. */
.d1 { font-size: clamp(2.75rem, 7.4vw, 4.75rem); font-weight: 700; letter-spacing: -0.037em; }
.d2 { font-size: clamp(2rem, 4.3vw, 3.4rem);     font-weight: 600; letter-spacing: -0.03em; }
.d3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; }

/* « accompagnement » mesure 333 px au corps de 44 px, celui du titre sur
   telephone, et la colonne n'en offre que 320 sur un ecran de 360. Le titre
   passe a 2,2 rem sous 380 px : le mot y tient alors entier. Sans cela,
   `overflow-wrap` le briserait en plein milieu, sans meme un trait d'union.
   Au-dessus de 380 px il garde ses 44 px, ou le mot entre deja. */
@media (max-width: 380px) {
    .d1 { font-size: 2.2rem; }
}

.chapeau {
    font-size: clamp(1.0625rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    color: var(--encre-douce);
    max-width: 46ch;
}

/* Étiquette de section : l'étoile du logo, puis le mot. Elle remplace les
   filets horizontaux, qui découpaient la page en tranches de journal. */
.reperage {
    display: flex; align-items: center; gap: .55rem;
    font-family: var(--display);
    font-size: .8125rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--etoile-encre);
    margin: 0 0 1.15rem;
}
.reperage::before {
    content: ""; width: .85rem; height: .85rem; flex: 0 0 auto;
    background: currentColor;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.sur-sombre .reperage { color: var(--etoile); }

/* --------------------------------------------------------------- Ossature */
.encart { padding-inline: var(--gouttiere); }
.large  { max-width: var(--large); margin-inline: auto; }

.section { padding-block: var(--respire); }
.section-creuse { background: var(--papier-creux); }

/* Une section noyée d'azur : le fond EST la couleur, pas un bandeau posé
   derrière un titre. */
.sur-sombre {
    background: var(--azur-nuit);
    color: color-mix(in oklab, var(--blanc) 92%, var(--azur-vif));
}
.sur-sombre h1, .sur-sombre h2, .sur-sombre h3,
.ouverture h1, .ouverture h2, .entete-page h1 { color: var(--blanc); }
/* Une seule règle pour les trois surfaces sombres : l'ouverture, les en-têtes
   de page et les sections noyées. Sans elle le chapeau gardait son encre
   sombre, donc gris foncé sur bleu nuit. */
.sur-sombre .chapeau,
.ouverture .chapeau,
.entete-page .chapeau { color: color-mix(in oklab, var(--blanc) 80%, var(--azur-vif)); }
/* Le texte clair sur fond sombre paraît plus maigre : il lui faut de l'air. */
.sur-sombre p, .ouverture p, .entete-page p { line-height: 1.72; }

/* --------------------------------------------------------------- Boutons */
.bouton {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem;
    min-height: 3rem; padding: .8rem 1.6rem;
    font-family: var(--display); font-size: 1rem; font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none; white-space: nowrap;
    border: 1.5px solid transparent; border-radius: 999px;
    cursor: pointer;
    transition: background-color .22s var(--sortie), color .22s var(--sortie),
                border-color .22s var(--sortie), transform .12s var(--sortie);
}
.bouton:active { transform: scale(.975); }

.bouton-etoile { background: var(--etoile); color: var(--encre); }
.bouton-etoile:hover { background: var(--etoile-chaud); }

.bouton-fantome {
    background: transparent; color: currentColor;
    border-color: color-mix(in oklab, currentColor 45%, transparent);
}
.bouton-fantome:hover { border-color: currentColor; background: color-mix(in oklab, currentColor 10%, transparent); }

.bouton-encre { background: var(--azur-nuit); color: var(--blanc); }
.bouton-encre:hover { background: var(--azur-profond); }

.bouton-large { width: 100%; }

/* --------------------------------------------------------------- Bandeau */
.bandeau {
    position: sticky; top: 0; z-index: 40;
    background: transparent;
    transition: background-color .3s var(--sortie), box-shadow .3s var(--sortie);
}
/* Posé sur l'ouverture azur, le bandeau est transparent ; dès qu'on quitte
   l'ouverture il reprend un fond, sinon les liens blancs se perdent sur le
   papier. C'est exactement ce qui rendait « Centre de loisirs » et « FAQ »
   illisibles sur la version précédente. */
.bandeau.detache {
    background: color-mix(in oklab, var(--azur-nuit) 96%, transparent);
    box-shadow: 0 1px 0 var(--filet-clair);
}
body:not(.ouverture-sombre) .bandeau { background: var(--azur-nuit); }

.bandeau-int {
    max-width: var(--large); margin-inline: auto;
    padding: .85rem var(--gouttiere);
    display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
    color: var(--blanc);
}

.marque {
    display: flex; align-items: center;
    text-decoration: none;
    margin-right: auto;
    flex: 0 0 auto;
}
/* Le logo est large et bas ; on le dimensionne par la hauteur pour que la
   barre garde une hauteur tenable, la largeur suit le ratio 1,945. */
.marque img {
    height: clamp(2.75rem, 4vw, 3.75rem);
    width: auto;
}
.marque-etoile { width: 1.65rem; height: 1.65rem; fill: var(--etoile); flex: 0 0 auto; }

.menu ul {
    display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.7rem);
    list-style: none; margin: 0; padding: 0;
}
.menu a {
    position: relative;
    display: inline-flex; align-items: center;
    /* 44 px : la barre du haut sert aussi sur tablette, au doigt. */
    min-height: 44px;
    font-size: .95rem; font-weight: 500;
    text-decoration: none;
    color: color-mix(in oklab, var(--blanc) 82%, var(--azur-vif));
    transition: color .2s var(--sortie);
}
.menu a:hover { color: var(--blanc); }
.menu a[aria-current="page"] { color: var(--blanc); }
.menu a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .5rem;
    height: 2px; background: var(--etoile); border-radius: 2px;
}

.bouton-bandeau { min-height: 2.75rem; padding: .55rem 1.25rem; font-size: .95rem; }

.bascule-menu {
    display: none;
    width: 44px; height: 44px; margin-right: -.4rem;
    align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer; color: var(--blanc);
}
.bascule-barres { display: block; width: 22px; }
.bascule-barres i {
    display: block; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .28s var(--sortie), opacity .2s var(--sortie);
}
.bascule-barres i + i { margin-top: 6px; }
.bascule-menu[aria-expanded="true"] .bascule-barres i:first-child { transform: translateY(4px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] .bascule-barres i:last-child  { transform: translateY(-4px) rotate(-45deg); }

.menu-mobile {
    position: fixed; inset: 0; z-index: 39;
    background: var(--azur-nuit); color: var(--blanc);
    padding: 6rem var(--gouttiere) 2.5rem;
    display: flex; flex-direction: column; gap: 1.5rem;
    overflow-y: auto;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile li + li { border-top: 1px solid var(--filet-clair); }
/* Restreint aux liens de NAVIGATION : « .menu-mobile a » compte deux
   sélecteurs contre un pour « .bouton-etoile », il repeignait donc le bouton
   d'inscription en blanc sur jaune, et lui imposait son corps de 1,5 rem et
   son remplissage vertical. */
.menu-mobile nav a {
    display: block; padding: 1rem 0;
    font-family: var(--display); font-size: 1.5rem; font-weight: 600;
    letter-spacing: -0.02em; text-decoration: none; color: var(--blanc);
}
.menu-mobile nav a[aria-current="page"] { color: var(--etoile); }
.menu-mobile-pied { margin-top: auto; color: var(--azur-vif); font-size: .95rem; }
.menu-mobile-pied a { color: inherit; }

/* Accès au compte, pas une entrée de navigation : même corps que le menu pour
   ne pas faire une troisième taille dans la barre, mais sans le soulignement
   de page courante — on n'y est jamais « actuellement ». */
.lien-bandeau {
    display: inline-flex; align-items: center;
    min-height: 44px;
    font-size: .95rem; font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    color: color-mix(in oklab, var(--blanc) 82%, var(--azur-vif));
    transition: color .2s var(--sortie);
}
.lien-bandeau:hover { color: var(--blanc); }

/* 1150 et non 1000 : à 1000 px la barre était déjà à sa limite — logo, sept
   entrées et le bouton d'inscription remplissaient la largeur utile — et
   « Espace parents » l'aurait fait déborder. Sous ce seuil le menu déroulant
   prend le relais, et il porte le même lien : personne ne le perd. */
@media (max-width: 1150px) {
    .menu, .bouton-bandeau { display: none; }
    .bascule-menu { display: inline-flex; }
    /* Le lien, lui, RESTE. C'est le seul accès visible à l'espace parent une
       fois le menu refermé : un parent qui vient se connecter ne doit pas
       avoir à ouvrir un menu pour le trouver. Un cran plus petit et en blanc
       franc — il doit tenir entre le logo et la bascule sur un téléphone
       étroit, tout en se voyant. */
    .lien-bandeau { font-size: .875rem; color: var(--blanc); }
}

/* Seuil placé à 340 et non 380 : à 360 et 375 px — les tailles les plus
   répandues — le libellé passe encore avec de la marge, et rétrécir le logo
   là aurait abîmé la marque sur une majorité de téléphones pour un problème
   qui n'existe qu'en dessous. */
@media (max-width: 340px) {
    .marque img { height: 2.4rem; }
    .lien-bandeau { font-size: .8125rem; }
}

/* --------------------------------------------------------------- Ouverture */
/* Asymétrique : le texte à gauche, la photographie qui sort du cadre à
   droite. Pas de boîte posée par-dessus l'image — c'est ce qui donnait à la
   version précédente son air de rustine. */
.ouverture {
    position: relative;
    background: var(--azur-nuit);
    color: var(--blanc);
    overflow: hidden;
    isolation: isolate;
}
.ouverture::before {
    /* Une lueur azur en haut à gauche : la surface respire au lieu d'être un
       aplat mort. Pas un dégradé décoratif de bord à bord. */
    content: ""; position: absolute; z-index: -1;
    inset: -30% 40% 30% -20%;
    background: radial-gradient(closest-side, var(--azur-profond), transparent 72%);
    opacity: .85;
}
.ouverture-int {
    max-width: var(--large); margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--gouttiere) 0;
    display: grid; gap: clamp(2.5rem, 5vw, 4rem);
    align-items: end;
}
.ouverture-mot { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 900px) {
    /* Le bloc de texte est bien plus court que la photographie : cale en bas,
       il laissait 220 px de vide au-dessus de lui. Centre, la colonne
       respire des deux cotes. */
    .ouverture-int { align-items: center; padding-top: 0; }
    .ouverture-mot { padding-block: clamp(3rem, 5vw, 5rem); }
}
.ouverture-mot .d1 { color: var(--blanc); margin-bottom: 1.4rem; }
.ouverture-mot .chapeau { margin-bottom: 2.2rem; }
/* Le mot qui compte, souligné d'un trait d'étoile tracé sous la ligne de
   base : la couleur marque le sens, pas un fond de surlignage. */
.souligne {
    background-image: linear-gradient(var(--etoile), var(--etoile));
    background-size: 100% .16em;
    background-position: 0 92%;
    background-repeat: no-repeat;
    padding-bottom: .06em;
}
.ouverture-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.ouverture-photo {
    position: relative;
    margin-inline: calc(var(--gouttiere) * -1) calc(var(--gouttiere) * -1);
    align-self: stretch;
    min-height: 16rem;
}
.ouverture-photo picture { display: contents; }
.ouverture-photo img {
    width: 100%; height: 100%; min-height: 16rem;
    object-fit: cover; object-position: 50% 42%;
}
.ouverture-photo::after {
    /* La photographie se fond dans l'azur au lieu de s'arrêter net. */
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(to right, var(--azur-nuit), transparent 42%),
        linear-gradient(to top, var(--azur-nuit), transparent 38%);
}

@media (min-width: 900px) {
    /* L'ouverture ne suit PAS le conteneur centré des sections de contenu.
       Centré à 1248 px sur un écran de 1920, il laissait 416 px d'aplat bleu
       vide à gauche du titre. Sur une section blanche cette marge ne se voit
       pas ; sur un aplat, c'est un trou. L'ouverture prend donc toute la
       largeur, avec une gouttière qui grandit avec l'écran — la photo
       saignait déjà à droite, la composition est franche des deux côtés. */
    .ouverture-int {
        max-width: none;
        padding-inline: clamp(2rem, 6vw, 7rem) 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        column-gap: clamp(2.5rem, 5vw, 5rem);
    }
    .ouverture-photo {
        margin-left: 0;
        margin-right: 0;   /* la colonne touche déjà le bord droit */
        min-height: 32rem;
    }
    .ouverture-photo img { min-height: 32rem; }
}

/* Le bandeau de faits : l'étoile prend toute la bande, une seule fois. */
.faits {
    background: var(--etoile);
    color: var(--encre);
}
.faits-int {
    max-width: var(--large); margin-inline: auto;
    padding: 1.1rem var(--gouttiere);
    display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
    font-size: .95rem;
}
.faits-int b { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
.faits-int span { display: inline-flex; gap: .4rem; align-items: baseline; }
/* Le seul lien de la bande. Souligne discretement plutot que colore : sur le
   marigold, une couleur de lien tiendrait mal le contraste, et la bande doit
   rester une suite de faits, pas une barre de navigation. */
.fait-lien {
    color: inherit; text-decoration: none;
    display: inline-flex; gap: .4rem; align-items: baseline;
    border-bottom: 1.5px solid color-mix(in oklab, var(--encre) 32%, transparent);
    transition: border-color .2s var(--sortie);
}
.fait-lien:hover, .fait-lien:focus-visible { border-bottom-color: currentColor; }
/* Le lien de la bande faisait 27 px : c'est le seul de sa ligne, mais il mene
   aux avis Google et se rate au pouce. Le remplissage l'epaissit sans
   deplacer le trait, pose sur la ligne de base. */
@media (max-width: 1039px) {
    .fait-lien { padding-block: .5rem; }
}

/* --------------------------------------------------------- Deux colonnes */
/* L'intro tient la colonne de gauche et reste collée pendant que la liste
   défile. La version précédente laissait la moitié droite de l'écran vide :
   ici les deux colonnes portent chacune leur charge. */
.duo { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) {
    .duo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
    .duo-intro { position: sticky; top: 6.5rem; }
}

/* Liste de matières : des lignes, pas des cartes. Une carte n'existe que si
   l'élévation porte une hiérarchie ; ici c'est une énumération. */
.matieres { list-style: none; margin: 0; padding: 0; }
.matiere {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem 1.5rem;
    padding-block: clamp(1.5rem, 2.6vw, 2.1rem);
    border-top: 1px solid var(--filet);
}
.matiere:last-child { border-bottom: 1px solid var(--filet); }
.matiere h3 { grid-column: 1; grid-row: 1; }
.matiere > p { grid-column: 1; grid-row: 2; color: var(--encre-douce); }
/* .matiere-rythme est aussi un <p> : « .matiere p » compte deux sélecteurs
   contre un, il gagnait et renvoyait le rythme en deuxième rangée. */
.matiere > p.matiere-rythme {
    grid-column: 2; grid-row: 1;
    text-align: right; white-space: nowrap;
    font-family: var(--display); font-weight: 600;
    color: var(--encre-pale); font-size: .875rem; line-height: 1.3;
}
.matiere-rythme span {
    display: block;
    font-size: .75rem; font-weight: 500; letter-spacing: 0;
    color: var(--encre-pale);
}
.matiere-rythme b {
    display: block; font-size: 1.5rem; color: var(--encre);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.niveaux { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; padding: 0; list-style: none; }
.niveaux li {
    font-size: .8125rem; font-weight: 500;
    padding: .2rem .65rem; border-radius: 999px;
    background: var(--azur-brume); color: var(--azur-nuit);
}

/* L'adresse sous la description du lieu : un cran plus discret que le
   chapeau, c'est une precision pratique et non une phrase de presentation. */
.lieu-adresse {
    margin-top: .9rem;
    font-size: .95rem;
    color: color-mix(in oklab, var(--blanc) 72%, var(--azur-vif));
}

/* --------------------------------------------------- Les huit savants */
/* Le détail le plus singulier du centre : on lui donne le plus gros corps du
   site. En énumération à la ligne, les séparateurs se retrouvaient en début
   de ligne et chaque rangée démarrait à un endroit différent — illisible.
   C'est un tableau de salles : ça se compose en grille. */
.savants-noms {
    list-style: none; margin: 2.5rem 0 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem clamp(1rem, 3vw, 2.5rem);
}
@media (min-width: 760px)  { .savants-noms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .savants-noms { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.savants-noms li {
    font-family: var(--display);
    font-size: clamp(1.5rem, 3.6vw, 2.6rem);
    font-weight: 600; letter-spacing: -0.03em; line-height: 1.2;
    color: var(--blanc);
    min-width: 0;
}
.savants-noms li:nth-child(2n) { color: var(--azur-vif); }
/* La bibliothèque n'est pas une salle de cours : la couleur le dit. */
.savants-noms li:last-child { color: var(--etoile); }

/* Les deux temps du centre de loisirs, en regard. Chacun tient en trois
   lignes : la mise en page a deux colonnes prevue pour du texte long leur
   donnait un titre demesure et beaucoup de vide. */
.deux-temps {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: clamp(2rem, 4vw, 3.5rem);
}
.temps { border-top: 2px solid var(--filet); padding-top: 1.6rem; }
.temps h2 { margin-bottom: .85rem; }
.temps > p:last-child { color: var(--encre-douce); }
@media (min-width: 760px) {
    .deux-temps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* La session du centre de loisirs : colonne unique, largeur de lecture. Le
   formulaire d'inscription s'y loge sans s'etaler, et l'etat de la session
   precede directement ce qu'il annonce. */
.session-bloc { max-width: 44rem; margin-top: clamp(3rem, 6vw, 5.5rem); }
.session-bloc > .reperage { margin-bottom: .7rem; }
.session-bloc > #etatSession { color: var(--encre-douce); margin-bottom: 2.6rem; }

/* ------------------------------------------------------------- Étapes */
/* Numérotées parce que c'est réellement une séquence : l'ordre porte de
   l'information, il n'est pas décoratif. */
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; }
.etape {
    counter-increment: etape;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 0 clamp(1.25rem, 3vw, 2.25rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
    position: relative;
}
.etape::before {
    content: counter(etape);
    grid-row: 1 / span 2;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: .85;
    color: var(--etoile-encre);
    font-variant-numeric: tabular-nums;
}
/* Le fil qui relie les étapes : la séquence se voit sans qu'on l'écrive. */
.etape:not(:last-child)::after {
    content: ""; position: absolute;
    left: calc(clamp(2.5rem, 5vw, 3.75rem) * .28);
    top: clamp(3.1rem, 6vw, 4.4rem); bottom: .5rem;
    width: 1px; background: var(--filet);
}
.etape h3 { margin-bottom: .4rem; }
.etape p { color: var(--encre-douce); }

/* ------------------------------------------------------------- Avis */
.avis {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}
/* Pousse au bord oppose. Le nombre et le texte tenaient sur la moitie gauche
   d'une bande de 1267 px : 530 px d'aplat vide a droite, pour une densite de
   9,5 % — la plus faible du site. Ancree aux deux extremites, la bande se
   tient. Sous 700 px les elements s'empilent et la marge automatique retombe
   d'elle-meme. */
@media (min-width: 700px) { .avis-bouton { margin-left: auto; } }
.avis-nombre {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(3.5rem, 9vw, 6rem); line-height: .85;
    letter-spacing: -0.04em; color: var(--blanc);
    font-variant-numeric: tabular-nums;
}

/* La note, en etoiles remplies au prorata. Un degrade coupe net a la
   fraction exacte, decoupe sur le texte : 4,9 sur 5 remplit 98 % de la
   rangee, pas cinq etoiles pleines. Pas de letter-spacing ici — il ajoute
   une chasse apres la derniere etoile et fausserait la proportion. */
.avis-note {
    display: flex; align-items: baseline; gap: .55rem;
    color: color-mix(in oklab, var(--blanc) 88%, var(--azur-vif));
}
.avis-note b { color: var(--blanc); font-weight: 600; }
.avis-etoiles {
    font-size: 1.3rem; line-height: 1; white-space: nowrap;
    background: linear-gradient(90deg,
        var(--etoile) var(--part, 100%),
        color-mix(in oklab, var(--blanc) 26%, transparent) var(--part, 100%));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

/* --------------------------------------------------------- Appel final */
.appel {
    background: var(--etoile);
    color: var(--encre);
}
.appel-int {
    max-width: var(--large); margin-inline: auto;
    padding: var(--respire) var(--gouttiere);
    display: grid; gap: 2rem clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (min-width: 860px) { .appel-int { grid-template-columns: minmax(0, 1fr) auto; } }
/* L'étiquette de section sur le marigold : --etoile-encre y tombe à 4,23:1.
   Ce jaune-là n'est lisible que sur le papier, pas sur son propre aplat. */
.appel .reperage { color: var(--etoile-sur-etoile); }
.appel .d2 { color: var(--encre); }
.appel p { color: color-mix(in oklab, var(--encre) 82%, var(--etoile)); margin-top: .9rem; }

/* --------------------------------------------- Captures de l'application */
/* Trois téléphones côte à côte sur grand écran. Sur mobile, les empiler
   ferait trois écrans de haut à faire défiler avant d'atteindre la suite :
   ils glissent donc à l'horizontale, calés au doigt, et on en voit toujours
   un morceau du suivant pour que le glissement s'annonce de lui-même. */
.ecrans {
    list-style: none; margin: 2.6rem 0 0; padding: 0 0 .5rem;
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(13.5rem, 62%);
    gap: clamp(1.1rem, 3vw, 2rem);
    overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.ecrans::-webkit-scrollbar { display: none; }
.ecran { scroll-snap-align: start; }
.ecran img {
    display: block; width: 100%; height: auto;
    border-radius: 1.4rem;
    /* Le filet clair détache la capture du bleu nuit : sans lui, les bords
       blancs de l'application se fondent dans la section. */
    border: 1px solid var(--filet-clair);
    box-shadow: 0 1.4rem 3rem -1rem oklch(0% 0 0 / .55);
}
.ecran-mot {
    margin-top: 1.1rem; font-size: .95rem;
    color: color-mix(in oklab, var(--blanc) 78%, var(--azur-vif));
}
.ecran-mot b { color: var(--blanc); font-weight: 600; }
.ecran-mention {
    margin-top: 2.2rem; font-size: .875rem;
    color: color-mix(in oklab, var(--blanc) 62%, var(--azur-vif));
}
@media (min-width: 760px) {
    /* Etales sur toute la largeur, pas groupes a gauche. Une grille bridee a
       60 rem les tassait dans un conteneur qui en fait pres de 100 : 600 px
       d'aplat vide a droite des trois telephones.

       En flex avec « space-between », le premier est aligne sur le titre, le
       dernier sur le bord oppose, et les ecarts se repartissent seuls quelle
       que soit la largeur. Chaque bloc reste borne a 22 rem : image et
       legende forment un ensemble, et un telephone rendu plus grand qu'un
       telephone cesse de se lire comme tel. */
    .ecrans {
        display: flex; justify-content: space-between;
        gap: clamp(1.5rem, 3vw, 3rem);
        overflow-x: visible; scroll-snap-type: none;
    }
    .ecran { flex: 0 1 22rem; }
}

/* --------------------------------------------------------- Pages simples */
.entete-page {
    background: var(--azur-nuit); color: var(--blanc);
    padding: clamp(3.5rem, 7vw, 5.5rem) var(--gouttiere) clamp(2.75rem, 5vw, 4rem);
}
.entete-page-int { max-width: var(--large); margin-inline: auto; }
.entete-page .d1 { color: var(--blanc); max-width: 18ch; }
.entete-page .chapeau { color: color-mix(in oklab, var(--blanc) 78%, var(--azur-vif)); margin-top: 1.2rem; }

/* Au-dessus de 1000 px, le titre n'occupait que la moitié gauche et laissait
   le reste de la bande en bleu vide — jusqu'à 900 px de rien sur un grand
   écran. Le chapeau passe à droite : la bande travaille sur toute sa largeur
   et raccourcit d'autant.

   Les deux colonnes partent du HAUT. Elles etaient calées par le bas, ce qui
   supposait le titre plus grand que le chapeau. Des que l'inverse arrive —
   « Le centre dans votre poche. » sur une ligne face a cinq lignes de
   chapeau — le titre tombait au fond de la bande, laissant un trou sous
   l'etiquette. Par le haut, il descend le long du texte de droite quelle que
   soit la longueur des deux. */
@media (min-width: 1000px) {
    .entete-page-int {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
        gap: 0 clamp(2.5rem, 5vw, 4.5rem);
        align-items: start;
    }
    .entete-page .reperage { grid-column: 1; grid-row: 1; }
    .entete-page .d1 { grid-column: 1; grid-row: 2; max-width: none; }
    .entete-page .chapeau {
        grid-column: 2; grid-row: 2;
        /* La premiere ligne du chapeau se pose sur celle du titre : sans ce
           decalage, le petit corps flotte au-dessus de la haute capitale. */
        margin-top: .55rem;
        max-width: 34ch;
    }
}

.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.75rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.prose h3 { margin-top: 2rem; }
.prose p { color: var(--encre-douce); }
/* :not(.bouton) — sinon « .prose a » (deux sélecteurs) bat « .bouton-encre »
   (un seul) et repeint le texte d'un bouton azur foncé en azur : 2,4:1. */
.prose a:not(.bouton) { color: var(--azur); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.prose a:not(.bouton):hover { color: var(--azur-nuit); }
.prose strong { font-weight: 600; color: var(--encre); }

/* Liste de formules : lignes séparées d'un filet, alignées sur la même
   grille que les matières. Pas de grille de cartes identiques. */
.offres { list-style: none; margin: 0; padding: 0; }
.offre {
    padding-block: clamp(1.5rem, 2.6vw, 2.1rem);
    border-top: 1px solid var(--filet);
    display: grid; gap: .45rem;
}
.offre:last-child { border-bottom: 1px solid var(--filet); }
.offre p { color: var(--encre-douce); }
.offre h2 a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.5rem; }
/* Chaque formule porte son action : sans elle, on lisait sept propositions
   sans savoir quoi faire ensuite. Discrete a dessein — sept boutons jaunes
   sur une page, et le jaune ne veut plus rien dire. */
.offre-action { margin-top: .85rem; }
@media (min-width: 800px) {
    .offre { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
    /* Placement explicite : en automatique, l'action tombait sous le titre. */
    .offre h2 { grid-column: 1; grid-row: 1; }
    .offre > p:not(.offre-action) { grid-column: 2; grid-row: 1; }
    .offre-action { grid-column: 3; grid-row: 1; align-self: center; margin-top: 0; }
}

/* Modificateur de TAILLE seulement : la couleur reste au modificateur de
   couleur pose a cote (-etoile, -encre...). Melanger les deux dans une
   meme classe obligeait a la reecrire entierement pour changer de teinte. */
.bouton-mince {
    min-height: 44px; padding: .5rem 1.1rem;
    font-size: .9375rem;
    white-space: nowrap;
}

/* Questions : ouverture progressive, pas de modale ni de bascule maison. */
.questions { border-top: 1px solid var(--filet); }
.question { border-bottom: 1px solid var(--filet); }
.question summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
    font-family: var(--display); font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    font-weight: 600; letter-spacing: -0.015em;
    cursor: pointer; list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
    content: ""; flex: 0 0 auto;
    width: .7rem; height: .7rem; margin-right: .35rem;
    border-right: 2px solid var(--etoile-encre);
    border-bottom: 2px solid var(--etoile-encre);
    transform: rotate(45deg) translate(-.15rem, -.15rem);
    transition: transform .25s var(--sortie);
}
.question[open] summary::after { transform: rotate(-135deg) translate(-.2rem, -.2rem); }
.question-corps { padding-bottom: 1.5rem; }
.question-corps p { color: var(--encre-douce); }
.question-corps > * + * { margin-top: .9rem; }

/* Fiches de contact et d'horaires : des lignes, pas des boîtes. */
.reperes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.repere {
    display: grid; gap: .15rem 2rem;
    padding-block: 1.15rem;
    border-top: 1px solid var(--filet);
}
.repere:last-child { border-bottom: 1px solid var(--filet); }
.repere dt {
    font-family: var(--display); font-size: .8125rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--encre-pale);
}
.repere dd { margin: 0; color: var(--encre); }
.repere dd a {
    color: var(--azur);
    display: inline-block;
    min-height: 44px; line-height: 44px;
    /* Les lignes de l'adresse restent serrees ; seuls les liens s'aerent. */
    margin-block: -.55rem;
}
@media (min-width: 700px) {
    .repere { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; }
}

/* Les moyens de contact, sous la phrase : en colonne et non separes par des
   points, pour que chaque numero reste une cible tactile distincte. */
.repere-liens {
    display: flex; flex-direction: column; gap: .25rem;
    margin-top: .6rem;
}
.repere-liens a { min-height: 32px; display: inline-flex; align-items: center; }

/* Les contacts sous le texte des tarifs : sur fond sombre, en marigold pour
   se detacher, et espaces pour rester des cibles distinctes au doigt. */
.tarifs-liens {
    display: flex; flex-wrap: wrap; gap: .3rem 1.6rem;
    margin-top: 1.1rem;
}
.tarifs-liens a { color: var(--etoile); min-height: 44px; display: inline-flex; align-items: center; }

/* La carte de visite de la page contact. Remplace une liste de definitions
   a colonne d'etiquettes et filets, qui donnait a la page l'air d'un tableau
   de specifications. Ici les informations se groupent : l'adresse et son
   bouton, puis les moyens de joindre, puis les horaires. */
.carte-visite {
    background: var(--blanc);
    border: 1px solid var(--filet);
    border-radius: 1.1rem;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    max-width: 26rem;
}
.carte-adresse { margin-bottom: 1.1rem; line-height: 1.6; }
.carte-moyens {
    list-style: none; margin: 1.6rem 0 0; padding: 1.4rem 0 0;
    border-top: 1px solid var(--filet);
    display: flex; flex-direction: column; gap: .2rem;
}
/* 44 px : chaque numero reste une cible sure au doigt, c'est par la que
   passent la plupart des demandes. */
.carte-moyens a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--azur); text-decoration-thickness: 1px; text-underline-offset: .18em;
}
.carte-intitule {
    margin: 1.6rem 0 .7rem; padding-top: 1.4rem;
    border-top: 1px solid var(--filet);
    font-family: var(--display); font-size: .8125rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--encre-pale);
}
.carte-horaires { margin: 0; display: grid; gap: .35rem; }
.carte-horaires > div { display: flex; justify-content: space-between; gap: 1.5rem; }
.carte-horaires dt { color: var(--encre-douce); }
.carte-horaires dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* La page contact ne remplit pas la largeur : la carte fait 416 px, le
   formulaire est plafonne a 34 rem pour rester lisible. Dans un conteneur de
   1558 px, les deux colonnes flottaient a 250 px l'une de l'autre, chacune
   bordee de vide — deux ilots sans rapport. Rapprochees, elles forment un
   bloc, et la page cesse de paraitre a moitie vide. */
@media (min-width: 900px) {
    /* « .large.duo-contact » et non « .duo-contact » seul : plus bas dans la
       feuille, « .large { max-width: none } » retire la limite a toutes les
       sections pour les aligner sur les bandes colorees. A specificite egale
       c'est la derniere qui gagne, et elle est apres. Deux classes passent
       devant. */
    .large.duo-contact { max-width: 68rem; }
}

/* Liens autonomes : listes de contacts empilees, « Lire l'article », retour
   vers les actualites. Ils mesuraient 20 px de haut. Les liens NICHES dans une
   phrase gardent leur taille — les regles d'accessibilite les exemptent, et
   les epaissir casserait l'interligne du paragraphe. */
@media (max-width: 1039px) {
    .moyens-empiles a, .lien-autonome {
        display: inline-flex; align-items: center; min-height: 44px;
    }
}

/* ------------------------------------------------------------ Formulaires */
.formulaire { display: grid; gap: 1.15rem; max-width: 34rem; }
.champ { display: grid; gap: .4rem; }
.champ label { font-family: var(--display); font-weight: 600; font-size: .9375rem; }
.champ-aide { font-size: .8125rem; color: var(--encre-pale); }
.champ input, .champ textarea, .champ select {
    width: 100%; min-height: 3rem;
    padding: .7rem .9rem;
    /* 16 px minimum : en dessous, iOS zoome au premier appui. */
    font-family: var(--courant); font-size: 1rem; color: var(--encre);
    background: var(--blanc);
    border: 1.5px solid var(--filet); border-radius: .6rem;
    transition: border-color .2s var(--sortie), box-shadow .2s var(--sortie);
}
.champ textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
    border-color: var(--azur);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--azur) 22%, transparent);
}
/* Pot de miel : hors écran plutôt que display:none, que certains robots
   savent détecter. */
.pot-de-miel {
    position: absolute; left: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}
.form-ok, .form-erreur {
    padding: .9rem 1.1rem; border-radius: .6rem; font-size: .95rem;
    max-width: 34rem;
}
.form-ok     { background: var(--succes-fond); color: var(--succes-texte); }
.form-erreur { background: var(--alerte-fond);  color: var(--alerte-texte); }

/* --------------------------------------------------------------- Pied */
.pied {
    background: var(--azur-nuit);
    color: color-mix(in oklab, var(--blanc) 76%, var(--azur-vif));
    padding: clamp(2.5rem, 6vw, 6rem) var(--gouttiere) 1.5rem;
}
.pied-int {
    max-width: var(--large); margin-inline: auto;
    /* Deux colonnes des le telephone : empile, ce pied faisait 1073 px, soit
       plus d'un ecran et demi pour huit liens et deux horaires. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem clamp(1.25rem, 4vw, 3.5rem);
}
@media (min-width: 1040px) { .pied-int { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem 3.5rem; } }

.pied-marque { grid-column: 1 / -1; }
@media (min-width: 1040px) { .pied-marque { grid-column: auto; } }
.pied-logo, .pied-logo img { height: 2.75rem; width: auto; }
.pied-logo { display: block; margin-bottom: .7rem; }
@media (min-width: 1040px) { .pied-logo, .pied-logo img { height: 3.5rem; } .pied-logo { margin-bottom: 1.1rem; } }
.pied-phrase {
    font-family: var(--display);
    font-size: clamp(1.05rem, 3vw, 1.3rem); font-weight: 600;
    line-height: 1.25; letter-spacing: -0.02em; color: var(--blanc);
}

.pied-bloc h2 {
    font-size: .75rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--azur-vif); margin-bottom: .6rem;
}
.pied-bloc p { font-size: .9375rem; line-height: 1.5; }
.pied-bloc p + p { margin-top: .5rem; }
.pied-bloc a { color: inherit; text-decoration-color: var(--filet-clair); text-underline-offset: .2em; }
/* Telephone et courriel se touchent au doigt : 22 px de haut, c'est un rate
   assure. Les marges negatives evitent d'ecarter le bloc d'adresse. */
.pied-bloc p a { display: inline-block; padding-block: .6rem; margin-block: -.45rem; }
.pied-bloc a:hover { color: var(--blanc); }

/* Etiquette et horaire sur la meme ligne : en colonne, deux creneaux
   occupaient quatre lignes pour quatre mots. */
.pied-horaire {
    display: flex; flex-wrap: wrap; gap: 0 .5rem;
    max-width: 22rem; font-size: .9375rem;
}
.pied-horaire span:last-child { color: var(--blanc); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cibles tactiles de 44 px sous 1040 px : au pouce, un lien de 22 px de haut
   est un rate assure. Sur grand ecran la souris vise juste. */
@media (max-width: 1039px) {
    .pied-bloc p a { padding-block: .75rem; margin-block: -.6rem; }
}

/* Le pied recopiait la navigation entiere — huit liens deja presents en haut
   de chaque page, et dans le menu mobile. Sur grand ecran cette colonne faisait
   a elle seule la hauteur du pied, 574 px, en laissant un large vide a cote ;
   sur telephone elle ajoutait 226 px a derouler. Elle est retiree. Restent ici
   les deux liens qui ne vivaient QUE la : « Actualites », qui n'est lie de
   nulle part ailleurs, et l'espace parents. */
.pied-bas {
    max-width: var(--large); margin: clamp(1.75rem, 4vw, 3.5rem) auto 0;
    padding-top: 1.1rem; border-top: 1px solid var(--filet-clair);
    font-size: .8125rem; color: color-mix(in oklab, var(--blanc) 55%, var(--azur-nuit));
    display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
    align-items: baseline; justify-content: space-between;
}
.pied-bas p { margin: 0; }
.pied-bas-liens { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.pied-bas-liens a { color: inherit; text-decoration: none; }
.pied-bas-liens a:hover { text-decoration: underline; }
@media (max-width: 1039px) {
    .pied-bas-liens a { display: flex; align-items: center; min-height: 44px; }
}

/* --------------------------------------------------------------- Entrée */
/* Une seule chorégraphie, au chargement puis à l'approche : les blocs
   montent de 14 px en cascade. Aucune propriété de mise en page animée. */
/* Le contenu n'est masque que si le navigateur execute du script : c'est lui
   qui le revele, et sans lui la page entiere restait blanche. */
@media (prefers-reduced-motion: no-preference) {
    .anime .monte {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
        transition: opacity .5s var(--sortie), transform .5s var(--sortie);
        /* 40 ms, pas 70 : au-dela le dernier bloc d'un groupe accuse un
           retard qui se voit, surtout sur telephone ou tout arrive ensemble. */
        transition-delay: calc(var(--rang, 0) * 40ms);
    }
    .anime .monte.vu { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- Citation */
.citation {
    margin: 2.25rem 0;
    padding-left: clamp(1.25rem, 3vw, 2rem);
    border-left: 2px solid var(--etoile);
}
.citation p {
    font-family: var(--display);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 500; font-style: italic;
    line-height: 1.35; letter-spacing: -0.02em;
    color: var(--encre);
    max-width: 34ch;
}
.citation cite {
    display: block; margin-top: .8rem;
    font-style: normal; font-size: .875rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--encre-pale);
}

/* ==========================================================================
   FICHE D'INSCRIPTION

   Le formulaire est repris tel quel : son enchaînement en trois étapes, sa
   reconnaissance des familles déjà connues et ses appels à /api/public/*
   rapportent des inscriptions réelles. On ne retouche pas la logique d'un
   formulaire qui marche pour une question de style — on réhabille ses
   classes maison.
   ========================================================================== */
.page-inscription .wrap { max-width: 44rem; }

/* Le fil d'etapes : cinq jalons, l'etape courante en etoile, les franchies
   en azur. Sur telephone les libelles tombent — cinq mots ne tiennent pas —
   mais les numeros suffisent a se situer. */
.page-inscription .etapes-fil {
    list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0;
    display: flex; align-items: center; gap: .35rem;
}
.page-inscription .jalon {
    display: flex; align-items: center; gap: .5rem;
    flex: 0 0 auto;
    font-family: var(--display); font-size: .875rem; font-weight: 600;
    color: var(--encre-pale);
}
.page-inscription .jalon + .jalon::before {
    content: ""; display: block;
    width: clamp(.75rem, 4vw, 3rem); height: 1px;
    background: var(--filet); margin-right: .35rem;
}
.page-inscription .jalon span {
    display: grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: 999px;
    background: var(--azur-brume); color: var(--azur-nuit);
    font-size: .875rem; font-variant-numeric: tabular-nums;
}
.page-inscription .jalon em { font-style: normal; }
.page-inscription .jalon.on { color: var(--encre); }
.page-inscription .jalon.on span { background: var(--etoile); color: var(--encre); }
.page-inscription .jalon.fait span { background: var(--azur); color: var(--blanc); }
@media (max-width: 760px) { .page-inscription .jalon em { display: none; } }

/* Le choix de formule : une ligne par formule, pas une grille de cartes
   identiques. La fenetre de dates s'affiche quand le programme en a une. */
.page-inscription .formules { display: grid; gap: .6rem; }
.page-inscription .formule {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: 1rem 1.1rem;
    border: 1.5px solid var(--filet); border-radius: var(--r-md, 14px);
    background: var(--blanc); cursor: pointer;
    transition: border-color .18s var(--sortie), background-color .18s var(--sortie);
}
.page-inscription .formule:hover { border-color: var(--azur); }
.page-inscription .formule input { flex: 0 0 auto; margin-top: .2rem; accent-color: var(--azur); width: 1.1rem; height: 1.1rem; }
.page-inscription .formule:has(input:checked) {
    border-color: var(--azur); background: var(--azur-brume);
}
.page-inscription .formule-corps { display: grid; gap: .2rem; min-width: 0; }
.page-inscription .formule-nom {
    font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--encre);
}
.page-inscription .formule-fenetre {
    font-style: normal; font-size: .8125rem; font-weight: 500;
    color: var(--etoile-encre); margin-left: .35rem;
}
.page-inscription .formule-resume { font-size: .9375rem; color: var(--encre-douce); }

/* Famille deja connue : une indication, pas une alerte. */
.page-inscription .banniere-connu {
    margin-top: 1rem; padding: .85rem 1.1rem;
    background: var(--azur-brume); color: var(--azur-nuit);
    border-radius: .6rem; font-size: .9375rem;
}
.page-inscription .banniere-connu a { color: var(--azur-nuit); font-weight: 600; }

/* Pas de carte dans la carte : les étapes sont des blocs séparés d'un filet. */
.page-inscription .card {
    background: transparent;
    border: 0; border-top: 1px solid var(--filet);
    border-radius: 0;
    box-shadow: none;
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
    margin: 0;
}
.page-inscription .card + .card { margin-top: 0; }
.page-inscription .card h2 {
    font-family: var(--display); font-size: clamp(1.35rem, 2.1vw, 1.75rem);
    font-weight: 600; letter-spacing: -0.02em; color: var(--encre);
    margin: 0 0 .35rem;
}
.page-inscription .card h3 {
    font-family: var(--display); font-size: 1.05rem; font-weight: 600;
    color: var(--encre); margin: 0 0 .5rem;
}
.page-inscription .hint,
.page-inscription .card p { color: var(--encre-douce); font-size: .95rem; margin: 0 0 1.25rem; }

/* Chaque enfant dans son cadre : sans separation, deux fiches se collaient
   et on ne savait plus quel champ appartenait a qui. */
.page-inscription .child {
    border: 1px solid var(--filet);
    border-radius: var(--r-md, 14px);
    padding: clamp(1rem, 2.5vw, 1.4rem);
    margin-bottom: 1rem;
    background: var(--blanc);
}
.page-inscription .child .head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: .9rem;
}
.page-inscription .child .head strong {
    font-family: var(--display); font-size: .95rem; font-weight: 700;
    letter-spacing: .02em; color: var(--azur-nuit);
}
.page-inscription .rm {
    min-height: 44px; padding: .35rem .9rem;
    border: 1px solid var(--filet); border-radius: 999px;
    background: transparent; color: var(--encre-soft, var(--encre-douce));
    font-family: var(--courant); font-size: .875rem; font-weight: 500;
    cursor: pointer;
}
.page-inscription .rm:hover {
    border-color: var(--alerte-vif); color: var(--alerte-vif);
}

.page-inscription .row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .page-inscription .row { grid-template-columns: 1fr 1fr; } }

.page-inscription .field { display: grid; gap: .4rem; margin-bottom: 1rem; }
.page-inscription .field > label,
.page-inscription .field > .lbl {
    font-family: var(--display); font-weight: 600; font-size: .9375rem; color: var(--encre);
}
/* Pas « input[type=text] » : les champs de l'enfant sont crees en JavaScript
   SANS attribut type. Un selecteur d'attribut exige que l'attribut existe —
   ils restaient donc a 21 px, non stylés, au milieu de champs de 48. On vise
   tous les champs de saisie et on exclut ce qui n'en est pas un. */
.page-inscription .wrap input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
.page-inscription select,
.page-inscription textarea {
    width: 100%; min-height: 3rem; padding: .7rem .9rem;
    font-family: var(--courant); font-size: 1rem; color: var(--encre);
    background: var(--blanc);
    border: 1.5px solid var(--filet); border-radius: .6rem;
    transition: border-color .2s var(--sortie), box-shadow .2s var(--sortie);
}
.page-inscription textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
.page-inscription .wrap input:focus, .page-inscription select:focus, .page-inscription textarea:focus {
    border-color: var(--azur);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--azur) 22%, transparent);
}

/* Choix de matières : des pastilles à cocher, 44 px sous le doigt. */
.page-inscription .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-inscription .chips label {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px; padding: .45rem 1rem;
    border: 1.5px solid var(--filet); border-radius: 999px;
    font-size: .9375rem; cursor: pointer;
    transition: border-color .18s var(--sortie), background-color .18s var(--sortie);
}
.page-inscription .chips label:hover { border-color: var(--azur); }
.page-inscription .chips input { accent-color: var(--azur); width: 1.05rem; height: 1.05rem; }
.page-inscription .chips input:checked + span,
.page-inscription .chips label:has(input:checked) {
    background: var(--azur-brume); border-color: var(--azur); color: var(--azur-nuit);
}

.page-inscription .navrow {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
    padding-top: 1.75rem; border-top: 1px solid var(--filet);
}
.page-inscription .navrow .spacer, .page-inscription .navrow .grow { flex: 1 1 auto; }
.page-inscription .wrap button,
.page-inscription .wrap .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3rem; padding: .8rem 1.6rem;
    font-family: var(--display); font-size: 1rem; font-weight: 600;
    border: 1.5px solid transparent; border-radius: 999px;
    background: var(--etoile); color: var(--encre);
    cursor: pointer;
    transition: background-color .22s var(--sortie), transform .12s var(--sortie);
}
.page-inscription .wrap button:hover:not(:disabled) { background: var(--etoile-chaud); }
.page-inscription .wrap button:active:not(:disabled) { transform: scale(.975); }
.page-inscription .wrap button:disabled { opacity: 1; background: var(--azur-brume); color: var(--encre-pale); cursor: default; }
.page-inscription #backBtn,
.page-inscription .btn-ghost,
.page-inscription .secondary {
    background: transparent; color: var(--encre);
    border-color: var(--filet);
}
.page-inscription #backBtn:hover { background: var(--papier-creux); border-color: var(--encre-pale); }
.page-inscription #addChild {
    background: transparent; color: var(--azur); border-color: var(--filet);
    min-height: 44px; padding: .55rem 1.1rem; font-size: .9375rem;
}

/* Messages : la couleur ne suffit pas, le texte dit ce qui s'est passé. */
.page-inscription .err {
    display: none;
    padding: .9rem 1.1rem; margin-bottom: 1.25rem; border-radius: .6rem;
    background: var(--alerte-fond); color: var(--alerte-texte); font-size: .95rem;
}
.page-inscription .err.show, .page-inscription .err[style*="block"] { display: block; }
/* L'ancienne feuille masquait ce bloc ; le script le revele en posant un
   style en ligne au moment du succes. Sans « display: none », le message
   « Inscription bien reçue » s'affichait sous un formulaire encore vide. */
.page-inscription .ok {
    display: none;
    text-align: left;
    padding: clamp(2rem, 5vw, 3.5rem) 0;
}
.page-inscription .ok h2 {
    font-family: var(--display); font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
    color: var(--encre); margin: 0 0 .9rem;
}
.page-inscription .ok p { color: var(--encre-douce); }

.page-inscription #recognizeBanner {
    padding: .9rem 1.1rem; margin-bottom: 1.25rem; border-radius: .6rem;
    background: var(--azur-brume); color: var(--azur-nuit); font-size: .95rem;
}
.page-inscription .recap-line {
    display: flex; justify-content: space-between; gap: 1.5rem;
    padding: .7rem 0; border-top: 1px solid var(--filet);
    font-size: .95rem;
}
.page-inscription .recap-line:first-child { border-top: 0; }
.page-inscription .recap-line strong { font-weight: 600; text-align: right; }
.page-inscription .head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    margin-bottom: .75rem;
}
.page-inscription .muted, .page-inscription .small { color: var(--encre-pale); font-size: .875rem; }

/* --- Classes du formulaire repris qui n'avaient plus de style -------------
   L'ancienne page portait sa propre feuille dans un <style> ; en la
   remplaçant, ces règles-là étaient tombées. La plus grave : le pot de miel
   redevenait un champ VISIBLE au milieu du formulaire, qu'un parent pouvait
   remplir de bonne foi — et sa demande aurait été rejetée en silence. */
.page-inscription .hp {
    position: absolute; left: -9999px;
    min-height: 0 !important; padding: 0 !important;
    width: 1px; height: 1px; overflow: hidden;
    /* Comme dans l'ancienne feuille : hors cadre ET transparent. Deux
       verrous plutot qu'un pour un champ qui ne doit jamais se voir. */
    opacity: 0;
}

.page-inscription .req { color: var(--alerte-vif); margin-left: .15rem; }

.page-inscription .mat-label {
    display: block; margin: 1.25rem 0 .5rem;
    font-family: var(--display); font-weight: 600; font-size: .9375rem; color: var(--encre);
}

.page-inscription .note {
    margin-top: 1rem;
    font-size: .875rem; color: var(--encre-pale);
}

.page-inscription .who { min-width: 0; }

/* Etat « rien d'ouvert » : il remplace la fiche entiere plutot que de la
   laisser se remplir pour rien. */
.page-inscription .ferme { max-width: 34rem; padding-block: clamp(1rem, 3vw, 2rem); }
.page-inscription .ferme h2 {
    font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
    color: var(--encre); margin: 0 0 .9rem;
}
.page-inscription .ferme p { color: var(--encre-douce); margin: 0 0 1.6rem; }
.page-inscription .ferme-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Le bouton fantome prend la couleur courante : sur papier il lui faut un
   filet visible, sinon il disparait. */
.bouton-encre-filet { color: var(--encre); border-color: var(--filet); }
.bouton-encre-filet:hover { background: var(--azur-brume); border-color: var(--azur); color: var(--azur-nuit); }

/* --------------------------------------------------- Alignement des bandes */
/* Le bandeau du haut, l'ouverture et la ligne de faits forment un seul bloc
   visuel : ils partagent donc la meme gouttiere fluide, pas le conteneur
   centre des sections de contenu. Centre a 1248 px sur un ecran de 1920, ce
   bloc laissait 416 px d'aplat vide a gauche — invisible sur une section
   blanche, beant sur un aplat de couleur.
   Ces regles sont volontairement en fin de feuille : a specificite egale,
   c'est la derniere qui gagne, et les regles de base sont plus haut. */
@media (min-width: 900px) {
    .bandeau-int,
    .faits-int,
    .entete-page-int {
        max-width: none;
        padding-inline: clamp(2rem, 6vw, 7rem);
    }
    /* L'en-tete de page porte deja la gouttiere sur la bande : sans cela le
       rembourrage se cumulerait et le titre partirait deux fois trop loin. */
    .entete-page { padding-inline: 0; }

    /* Et tout le reste sur la meme verticale. Laisser les bandes colorees a
       112 px et le contenu a 336 creait une marche a chaque changement de
       fond. Les paragraphes restent limites a 66 caracteres par la regle
       generale : elargir la colonne n'allonge pas les lignes. */
    .encart { padding-inline: clamp(2rem, 6vw, 7rem); }
    .large { max-width: none; }
    .appel-int, .pied-int, .pied-bas {
        max-width: none;
        padding-inline: 0;
    }
    .appel { padding-inline: clamp(2rem, 6vw, 7rem); }
    .pied  { padding-inline: clamp(2rem, 6vw, 7rem); }
}

/* Texte saisi dans « Contenu du site » : ses retours a la ligne comptent.
   `pre-line` les conserve sans qu'on ait a injecter du <br>, donc sans
   autoriser de balisage dans un champ de saisie. */
.texte-libre { white-space: pre-line; }