/*
Theme Name: Yukademia Gouache
Theme URI: https://github.com/yukademia/yukademia-theme-gouache
Author: Yukademia
Description: Style Template du système Blueprint. Requiert le plugin yukademia-core.
Version: 0.20.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: yukademia-theme-gouache
*/

/* ==========================================================================
   GOUACHE — la couleur n'est pas un accent, c'est le support.

   Aplats opaques bord à bord. Aucune ombre portée, aucun dégradé, aucune
   carte. Une section n'est pas une boîte posée sur la page : elle EST la
   page sur cette hauteur.

   Deux verrous de forme, tenus partout :
     - rayon 0 sur les conteneurs, rayon plein sur tout ce qui se clique ;
     - l'accent ne porte JAMAIS de texte, il ne sert que de plaque.
       Mesuré : encre sur accent = 3,81:1, papier sur accent = 3,21:1.
       Les deux échouent en AA pour du texte courant.

   Sommaire
     1. Polices
     2. Jetons
     3. Socle
     4. Typographie
     5. Mise en page
     6. Le bouton
     7. Pilules et fleur
     8. En-tête et navigation
     9. Pied
    10. Accessibilité
    11. Composants de contenu
    12. Utilitaires et composants de page
   ========================================================================== */


/* ==========================================================================
   1. POLICES

   Auto-hébergées, jamais Google Fonts : ce sont des données d'enfants, et
   un appel à un CDN tiers est un transfert que la CNIL a déjà sanctionné.

   Les dix familles de la liste fermée sont embarquées. Le navigateur n'en
   télécharge qu'une : `unicode-range` et la correspondance de famille font
   le tri. Une famille absente ferait retomber l'école sur la pile de
   secours, en silence.

   `latin-ext` n'est pas facultatif en français : « oe » lié (U+0153) y vit,
   et « coeur », « soeur », « oeuvre » sont du vocabulaire d'école.
   ========================================================================== */

@font-face {
	font-family: 'Bricolage Grotesque';
	src: url( assets/fonts/bricolage-grotesque-latin-wdth.woff2 ) format('woff2-variations');
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	src: url( assets/fonts/bricolage-grotesque-latin-ext-wdth.woff2 ) format('woff2-variations');
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	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;
}

@font-face {
	font-family: 'Playfair Display';
	src: url( assets/fonts/playfair-display-latin-wght.woff2 ) format('woff2-variations');
	font-weight: 400 900;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'Playfair Display';
	src: url( assets/fonts/playfair-display-latin-ext-wght.woff2 ) format('woff2-variations');
	font-weight: 400 900;
	font-display: swap;
	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;
}

@font-face {
	font-family: 'Lora';
	src: url( assets/fonts/lora-latin-wght.woff2 ) format('woff2-variations');
	font-weight: 400 700;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'Lora';
	src: url( assets/fonts/lora-latin-ext-wght.woff2 ) format('woff2-variations');
	font-weight: 400 700;
	font-display: swap;
	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;
}

@font-face {
	font-family: 'EB Garamond';
	src: url( assets/fonts/eb-garamond-latin-wght.woff2 ) format('woff2-variations');
	font-weight: 400 800;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'EB Garamond';
	src: url( assets/fonts/eb-garamond-latin-ext-wght.woff2 ) format('woff2-variations');
	font-weight: 400 800;
	font-display: swap;
	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;
}

@font-face {
	font-family: 'Libre Baskerville';
	src: url( assets/fonts/libre-baskerville-latin-400.woff2 ) format('woff2');
	font-weight: 400;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'Libre Baskerville';
	src: url( assets/fonts/libre-baskerville-latin-ext-400.woff2 ) format('woff2');
	font-weight: 400;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'Libre Baskerville';
	src: url( assets/fonts/libre-baskerville-latin-700.woff2 ) format('woff2');
	font-weight: 700;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'Libre Baskerville';
	src: url( assets/fonts/libre-baskerville-latin-ext-700.woff2 ) format('woff2');
	font-weight: 700;
	font-display: swap;
	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;
}

@font-face {
	font-family: 'Figtree';
	src: url( assets/fonts/figtree-latin-wght.woff2 ) format('woff2-variations');
	font-weight: 300 900;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'Figtree';
	src: url( assets/fonts/figtree-latin-ext-wght.woff2 ) format('woff2-variations');
	font-weight: 300 900;
	font-display: swap;
	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;
}

@font-face {
	font-family: 'DM Sans';
	src: url( assets/fonts/dm-sans-latin-wght.woff2 ) format('woff2-variations');
	font-weight: 100 1000;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'DM Sans';
	src: url( assets/fonts/dm-sans-latin-ext-wght.woff2 ) format('woff2-variations');
	font-weight: 100 1000;
	font-display: swap;
	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;
}

@font-face {
	font-family: 'Inter';
	src: url( assets/fonts/inter-latin-wght.woff2 ) format('woff2-variations');
	font-weight: 100 900;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'Inter';
	src: url( assets/fonts/inter-latin-ext-wght.woff2 ) format('woff2-variations');
	font-weight: 100 900;
	font-display: swap;
	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;
}

@font-face {
	font-family: 'Nunito Sans';
	src: url( assets/fonts/nunito-sans-latin-wght.woff2 ) format('woff2-variations');
	font-weight: 200 1000;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'Nunito Sans';
	src: url( assets/fonts/nunito-sans-latin-ext-wght.woff2 ) format('woff2-variations');
	font-weight: 200 1000;
	font-display: swap;
	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;
}

@font-face {
	font-family: 'Work Sans';
	src: url( assets/fonts/work-sans-latin-wght.woff2 ) format('woff2-variations');
	font-weight: 100 900;
	font-display: swap;
	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;
}
@font-face {
	font-family: 'Work Sans';
	src: url( assets/fonts/work-sans-latin-ext-wght.woff2 ) format('woff2-variations');
	font-weight: 100 900;
	font-display: swap;
	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;
}


/* ==========================================================================
   2. JETONS

   Les `--ecole-*` sont le REPLI. Le plugin injecte les vraies valeurs à
   `wp_head` priorité 99, donc APRÈS cette feuille : un site sans réglages
   affiche le design par défaut, complet, et une école qui règle ses cinq
   couleurs l'emporte sans qu'aucun fichier ne bouge.

   Les valeurs par défaut sont relevées au pixel dans les références, pas
   estimées : crème, encre, ciel, rose, rouge.
   ========================================================================== */

:root {
	--ecole-primaire:    #65BEF9;
	--ecole-secondaire:  #FF8CAC;
	--ecole-accent:      #F73426;
	--ecole-fond:        #F2EBD0;
	--ecole-texte:       #1F2840;
	--ecole-font-titre:  'Bricolage Grotesque';
	--ecole-font-texte:  'Figtree';

	/* Jetons de zone. Une section qui renverse le rapport clair/sombre
	   REDÉCLARE ces deux-là ; elle ne surcharge jamais les règles des
	   composants. Le conteneur ne sait pas ce que ses composants ont
	   prévu, et le composant ne sait pas où il finira. */
	--zone-fond:  var( --ecole-fond );
	--zone-texte: var( --ecole-texte );

	/* Piles de secours. Le nom générique en tête est ce que le plugin
	   remplace ; ce qui suit couvre le cas où le woff2 ne charge pas. */
	--pile-titre: var( --ecole-font-titre ), 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
	--pile-texte: var( --ecole-font-texte ), 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Typographie. SIX registres, et le sixième est une correction.

	   L'accueil rendait huit titres au même cran de 44 px et deux affiches
	   de 112 px : aucune hiérarchie entre une section pivot et une liste de
	   documents, et un H2 qui concurrençait le H1. Trois crans
	   d'espacement avaient été posés, mais un seul cran de titre.

	   Désormais : l'affiche UNE fois par page, sur le H1 et lui seul ; le
	   titre fort pour les deux ou trois sections qui portent la page ; le
	   titre ordinaire, nettement redescendu, pour tout le reste.

	   L'affiche descend à 2,25rem sur téléphone : un titre d'école réel
	   fait « École Sainte-Marie de la Visitation », pas trois mots. */
	/* RELEVÉS le 26 août 2026 (seconde passe) : le corps à 17 px se lisait
	   petit sur les pages denses, et le micro à 11,2 px espacé de 0.18em
	   était illisible — un libellé en capitales bâton qu'on doit plisser
	   les yeux pour lire n'étiquette rien. Corps à 18 px, micro à 13 px,
	   espacement divisé par deux. */
	--t-affiche:     clamp( 2.25rem, 7vw, 5.25rem );
	--t-titre-fort:  clamp( 1.75rem, 3.2vw, 2.5rem );
	--t-titre:       clamp( 1.375rem, 2.1vw, 1.75rem );
	--t-sous:        clamp( 1.1875rem, 1.5vw, 1.375rem );
	--t-passage:     clamp( 1.1875rem, 1.4vw, 1.375rem );
	--t-corps:       1.125rem;
	--t-micro:       0.8125rem;

	--i-affiche: 0.84;
	--i-titre:   0.95;
	--i-corps:   1.6;

	--lettre-affiche: -0.03em;
	--lettre-titre:   -0.02em;
	--lettre-micro:   0.09em;

	--gras-affiche: 800;
	--gras-titre:   700;
	--gras-micro:   600;

	/* Largeur condensée de l'affiche. Ne s'applique qu'aux familles à axe
	   `wdth` : Bricolage Grotesque et Nunito Sans. Les serifs de la liste
	   l'ignorent sans rien casser, et l'affiche tient quand même parce que
	   son caractère vient de l'échelle et de l'interlignage, pas de la
	   chasse. */
	--chasse-affiche: 78%;

	/* Rythme vertical. TROIS crans, pas un. Un seul cran partout est le
	   réglage par défaut de tout le monde, et il se reconnaît.

	   RESSERRÉ le 26 août 2026 (seconde passe) : à 120 px de bande et
	   64 px de passage, une section d'un titre et deux lignes flottait
	   dans son aplat — « les sections font trop vide ». Le tiers en moins
	   rapproche le contenu sans coller les bandes. */
	--cran-bande:   clamp( 3rem, 7vw, 5.5rem );
	--cran-passage: clamp( 1.75rem, 4vw, 3rem );
	--cran-ligne:   1.25rem;

	--gouttiere: clamp( 1.25rem, 4vw, 2.5rem );
	/* Marge de page : la RÉFÉRENCE DU PARC, Étoile (BLUEPRINT §12,
	   2 septembre 2026) — 4 % de l'écran entre 1.25rem et 2.5rem, 3rem dès
	   1440 px. Distincte de `--gouttiere`, qui reste l'espacement INTERNE
	   du thème (gaps, retraits) et ne suit pas le bord. */
	--marge-page: clamp( 2rem, 8vw, 2.5rem );

	/* L'ARDOISE, et son état de repos est le TÉLÉPHONE (demande d'Emilien,
	   4 septembre 2026). Sur un petit écran, une bande de couleur va de
	   bord à bord : le retrait de 6 px laissait un liseré de papier le long
	   des deux bords. Le retrait revient à partir de 560 px, où l'ardoise a
	   de nouveau de la page où se poser.

	   **Le RAYON, lui, ne bouge pas** (arbitrage d'Emilien, même jour) :
	   les coins restent arrondis sur téléphone. La bande touche les deux
	   bords et garde ses quatre coupoles — le papier se voit dans les
	   encoches, et c'est voulu. *Un seul jeton varie donc, et c'est le
	   retrait : un jeton qui ne varie plus est une indirection morte.*

	   La coupure VERTICALE entre deux bandes, elle, ne bouge pas : c'est
	   elle qui montre le papier entre deux couleurs, et `gouache_fond()`
	   garantit que deux bandes voisines n'ont jamais la même.

	   `--marge-page` monte d'autant : la bande touchant le bord, le texte
	   se retrouverait à 24 px de l'écran au lieu de 26. Plancher porté à
	   2rem — 32 px au lieu de 26 —, ce que la demande appelle « un peu plus
	   de padding ». La pop-up et la réglette gardent leur retrait propre :
	   ce sont des objets DANS la page, pas des sections. */
	--retrait-ardoise: 0;
	/* PORTÉE À 105 rem — 1680 px — le 31 août 2026, à la demande d'Emilien.
	   Un seul jeton : le conteneur, la frise et la scène du diaporama le
	   lisent tous, et leurs calculs de débord s'y adaptent sans être
	   retouchés. */
	/* 71.25rem de contenu, la largeur de référence du parc — le site à
	   1680 px de la v0.14.0 est abandonné le 2 septembre 2026. */
	--large-max: 71.25rem;
	--mesure:    62ch;
	--mesure-courte: 36ch;

	/* Verrou de forme, RÉVISÉ le 26 août 2026 — trois fois, et la version
	   finale est celle d'Emilien : PLUS D'ANGLE VIF. Quatre rayons, chacun
	   avec un rôle, du plus grand au plus petit objet :

	   - les SECTIONS à 32 px — des ardoises posées sur le papier ;
	   - les IMAGES à 20 px ;
	   - les COMMANDES à 8 px ;
	   - le rayon PLEIN réservé aux étiquettes, où il porte une
	     information — cette chose-là est un jeton, pas un bouton.

	   `--rayon-nul` reste pour ce qui doit affleurer (plaque d'en-tête). */
	--rayon-nul:     0;
	--rayon-commande: 0.5rem;
	--rayon-image:   1.25rem;
	--rayon-section: 2rem;
	--rayon-plein:   999px;

	/* Le voile du héros. UN SEUL nombre, parce qu'il porte tout le
	   contraste de ce qui reste posé directement sur la photo. 0.58 donne
	   3,20:1 pour du crème sur le pire cas d'une photo blanche, au-dessus
	   du seuil de 3:1 du grand texte — et il ne vaut QUE parce que le
	   surtitre et les appels ont leur propre fond. Voir la section du
	   héros : les trois réglages se tiennent. */
	--voile-heros: 0.58;

	--duree-vive:  0.12s;
	--duree:       0.26s;
	--duree-ample: 0.42s;

	/* Le retard qui remet un sommaire replié hors du chemin du clavier. Il
	   attend la fin du pli — et zéro dès que le mouvement est refusé, car
	   le bloc « reduced-motion » raccourcit les durées, jamais les
	   retards : sans ce jeton, un sommaire fermé restait tabulable un
	   quart de seconde chez qui a désactivé les animations. */
	--repli-delai: 0.26s;
	--courbe:      cubic-bezier( 0.16, 1, 0.3, 1 );
	--courbe-presse: cubic-bezier( 0.34, 1.4, 0.64, 1 );

	/* Le seul tracé du jeu qui doive vivre en CSS : le lien de document est
	   produit par le plugin, on ne lui ajoute pas de balise. Même dessin,
	   même graisse que `gouache_icone( 'telechargement' )` — les deux se
	   modifient ENSEMBLE. */
	--icone-telechargement: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.75v10.5M8.25 10.75 12 14.5l3.75-3.75M4.75 19.25h14.5'/%3E%3C/svg%3E" );
	--icone-chevron: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.75 9.25 12 15.5l6.25-6.25'/%3E%3C/svg%3E" );

	/* Une échelle de plans, pour ne pas semer des `z-index: 9999`. */
	--plan-fond:     0;
	--plan-releve:   1;
	--plan-entete:   100;
	--plan-panneau:  200;
	--plan-evitement: 300;
}


/* ==========================================================================
   3. SOCLE
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var( --zone-fond );
	color: var( --zone-texte );
	font-family: var( --pile-texte );
	font-size: var( --t-corps );
	line-height: var( --i-corps );
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Aucun ratio d'image n'est garanti : beaucoup de photos d'école sont des
   captures verticales prises au téléphone. Tout conteneur impose donc son
   format, et l'image le remplit. */
figure {
	margin: 0;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}


/* ==========================================================================
   4. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
	margin: 0;
	font-family: var( --pile-titre );
	font-weight: var( --gras-titre );
	line-height: var( --i-titre );
	letter-spacing: var( --lettre-titre );
	text-wrap: balance;
}

p {
	margin: 0 0 0.9em;
	max-width: var( --mesure );
}

p:last-child {
	margin-bottom: 0;
}

/* L'affiche. Le titre n'est pas une ligne, c'est un objet : il touche les
   bords et il chevauche ce qui l'entoure. */
.yk-affiche {
	font-family: var( --pile-titre );
	font-size: var( --t-affiche );
	font-weight: var( --gras-affiche );
	font-stretch: var( --chasse-affiche );
	line-height: var( --i-affiche );
	letter-spacing: var( --lettre-affiche );
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0;
}

/* Le titre fort : le cran qui manquait. Deux ou trois sections par page
   le portent, jamais plus. L'accueil rendait huit titres au meme cran et
   deux affiches, donc aucune hierarchie. */
.yk-titre-fort {
	font-family: var( --pile-titre );
	font-weight: var( --gras-affiche );
	font-stretch: var( --chasse-affiche );
	font-size: var( --t-titre-fort );
	line-height: 1.02;
	letter-spacing: var( --lettre-titre );
	text-wrap: balance;
	margin: 0;
}

.yk-titre {
	font-size: var( --t-titre );
}

/* La citation garde une echelle de display, mais la sienne : elle ne
   reprend pas celle du H1, qu'elle concurrencait. */
.yk-citation__texte {
	font-family: var( --pile-titre );
	font-size: clamp( 1.5rem, 3vw, 2.25rem );
	font-weight: var( --gras-titre );
	line-height: 1.15;
	letter-spacing: var( --lettre-titre );
	margin: 0;
}

.yk-sous-titre {
	font-size: var( --t-sous );
	font-weight: var( --gras-titre );
}

/* Le passage. Les serifs ne vivent que dans le champ « police des titres »,
   or le corps de la référence est une serif. Ce registre la ramène là où
   elle se lit vraiment : les chapeaux, sur une mesure courte. */
.yk-passage {
	font-family: var( --pile-titre );
	font-size: var( --t-passage );
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	max-width: var( --mesure-courte );
	text-transform: none;
}

/* Le micro-libellé. C'est le liant de tout le thème : navigation, boutons,
   étiquettes, dates, liens de pied. Il porte le registre technique et il
   survit à n'importe quelle substitution de police, parce que c'est un
   traitement et pas une famille. */
.yk-micro {
	font-family: var( --pile-texte );
	font-size: var( --t-micro );
	font-weight: var( --gras-micro );
	letter-spacing: var( --lettre-micro );
	text-transform: uppercase;
	line-height: 1.4;
}

.yk-mesure {
	max-width: var( --mesure );
}

.yk-nombre {
	font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   5. MISE EN PAGE

   Le plein-bord est la règle, le conteneur l'exception. Chaque section est
   un aplat qui va d'un bord à l'autre ; seul le texte à l'intérieur est
   mesuré.
   ========================================================================== */

.yk-conteneur {
	width: 100%;
	max-width: calc( var( --large-max ) + 2 * var( --marge-page ) );
	margin-inline: auto;
	padding-inline: var( --marge-page );
}

/* La bande : un aplat en ARDOISE ARRONDIE (quatrième passe, demande
   d'Emilien). Le plein-bord strict laissait des angles vifs partout ;
   chaque bande prend désormais un léger retrait et le rayon de section.
   Une bande papier reste invisible sur le fond papier — seuls les aplats
   de couleur se lisent comme des ardoises posées sur la page, et les
   coupures entre deux couleurs montrent le papier.

   Elle REDÉCLARE ses deux variables de zone plutôt que de surcharger les
   règles de ses composants, sans quoi un bouton posé dedans ne saurait
   pas sur quoi il est posé. */
.yk-bande {
	background: var( --zone-fond );
	color: var( --zone-texte );
	padding-block: var( --cran-bande );
	margin-inline: var( --retrait-ardoise );
	border-radius: var( --rayon-section );
}

.yk-bande + .yk-bande,
.yk-bande + .yk-bandes,
.yk-bandes + .yk-bande {
	margin-top: clamp( 0.375rem, 0.8vw, 0.75rem );
}

/* Deux conteneurs dans une même bande sont deux BLOCS, pas deux lignes :
   une section qui porte le mot de la directrice puis les témoignages doit
   les séparer autant que deux sections voisines. Sans ce cran, ils se
   touchaient. */
.yk-bande > .yk-conteneur + .yk-conteneur {
	margin-top: var( --cran-bande );
}

.yk-bande--papier {
	--zone-fond: var( --ecole-fond );
	--zone-texte: var( --ecole-texte );
}

.yk-bande--encre {
	--zone-fond: var( --ecole-texte );
	--zone-texte: var( --ecole-fond );
}

.yk-bande--primaire {
	--zone-fond: var( --ecole-primaire );
	--zone-texte: var( --ecole-texte );
}

.yk-bande--secondaire {
	--zone-fond: var( --ecole-secondaire );
	--zone-texte: var( --ecole-texte );
}

/* L'accent en fond ne porte QUE de l'affiche. Mesuré : encre sur accent
   donne 3,81:1, ce qui passe pour du grand titre et échoue pour du texte
   courant. Cette bande n'accueille donc pas de paragraphe. */
.yk-bande--accent {
	--zone-fond: var( --ecole-accent );
	--zone-texte: var( --ecole-texte );
}

.yk-bande--serree {
	padding-block: var( --cran-passage );
}

.yk-pile {
	display: grid;
	gap: var( --cran-ligne );
	justify-items: start;
}

.yk-pile--large {
	gap: var( --cran-passage );
}

/* Grille de base. `auto-fit` plutôt qu'un nombre de colonnes fixe : le
   contenu de démonstration est volontairement à trous (3 chiffres sur 4,
   8 photos sur 12), et une grille à trois colonnes montre alors deux cases
   vides que personne n'a demandées. */
.yk-grille {
	display: grid;
	gap: var( --gouttiere );
	grid-template-columns: 1fr;

	/* La grille sert souvent un `<ul>` : sans ce reset, chaque témoignage
	   portait une puce — vue sur les captures de la seconde passe. */
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( min-width: 768px ) {
	.yk-grille--paire {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.yk-grille--fluide {
		grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	}
}

@media ( min-width: 1024px ) {
	.yk-grille--dominante {
		grid-template-columns: minmax( 0, 3fr ) minmax( 0, 2fr );
	}
}

/* Les bandes verticales : une série se lit en colonnes pleine hauteur, une
   couleur chacune. C'est la signature de structure du thème.

   Les libellés restent HORIZONTAUX. La référence les tourne à 90°, et le
   texte tourné est un tic d'agence qui coûte à la lecture ; sur un site
   d'école, un parent qui cherche « Cantine » ne va pas incliner la tête.
   La structure porte le caractère toute seule.

   Sous 1024 px les bandes se recouchent : la signature s'estompe là où se
   fait l'essentiel du trafic, et c'est un point ouvert assumé. */
.yk-bandes {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 0.375rem, 0.8vw, 0.75rem );
	margin-inline: var( --retrait-ardoise );
}

.yk-bandes__champ {
	background: var( --zone-fond );
	color: var( --zone-texte );
	padding: var( --cran-passage ) var( --gouttiere );
	display: flex;
	flex-direction: column;
	gap: var( --cran-ligne );
	min-width: 0;
	border-radius: var( --rayon-section );
}

@media ( min-width: 1024px ) {
	.yk-bandes {
		grid-auto-flow: column;
		grid-auto-columns: minmax( 0, 1fr );
		min-height: 32rem;
	}

	.yk-bandes__champ {
		justify-content: flex-end;
	}
}

/* La frise. Une série qui continue déborde du bord droit, coupée net :
   l'élément suivant est visible, tronqué, et il dit qu'il y a une suite.
   Une école qui remplit 3 items sur 12 y paraît normale, là où une grille
   à trois colonnes montrerait des trous. */
.yk-frise {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax( 15rem, 22rem );
	gap: var( --gouttiere );
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;

	/* Le bord GAUCHE s'aligne sur le conteneur : un titre en retrait avec
	   des entrées collées au bord de l'écran se lisait comme deux sections.
	   Le `100%` est la largeur de la frise elle-même — la même référence
	   que le conteneur centré, barre de défilement exclue. Le bord droit
	   garde la gouttière : la série continue de déborder, coupée net. */
	padding-inline-start: max( var( --marge-page ), calc( ( 100% - var( --large-max ) ) / 2 ) );
	padding-inline-end: var( --marge-page );
	padding-bottom: var( --cran-ligne );
	scrollbar-width: thin;

	/* La frise suit toujours un en-tête de section : sans ce cran, les
	   vignettes collaient au titre (vu sur les captures d'Emilien). */
	margin-top: var( --cran-passage );
}

/* La frise sert souvent un `<ul>` : sans ce reset, chaque entrée portait
   une puce — le même piège que la grille avait déjà payé. */
.yk-frise {
	list-style: none;
	margin-bottom: 0;
}

.yk-frise > * {
	scroll-snap-align: start;
	min-width: 0;
}

/* Les témoignages en frise. Ce ne sont pas des cartes : un filet en tête
   les sépare, et rien d'autre — ni fond, ni bord, ni ombre. */
.yk-temoignages > li {
	border-top: 1.5px solid currentColor;
	padding-top: var( --cran-ligne );
}

.yk-temoignages blockquote {
	margin: 0;
	font-family: var( --pile-titre );
	font-size: var( --t-sous );
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: var( --lettre-titre );
}

/* Les cadres d'image.

   REVU le 26 aout 2026. Toute image du theme passait par un masque en
   quatre-feuilles. La forme etait juste une fois, et fausse repetee : deux
   ecoles du parc rendaient exactement la meme page, ce qu'un catalogue de
   templates ne doit jamais produire. Elle ne sert plus nulle part par
   defaut.

   Quatre formes simples, choisies par ROLE dans `gouache_cadre()`. Toutes
   imposent leur format et remplissent en `cover` : aucun ratio d'image
   n'est garanti, beaucoup de photos d'ecole sont des captures verticales
   prises au telephone. */
.yk-cadre {
	overflow: hidden;
	background: color-mix( in srgb, var( --zone-texte ) 8%, transparent );
}

.yk-cadre > img,
.yk-cadre img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* La double classe est deliberee. `.yk-duo__image` et `.yk-fiche__portrait`
   imposent deja un format a ce qu'ils contiennent ; sans ce cran de
   specificite, le cercle sortait en ellipse 4/3. Une regle de conteneur ne
   connait pas ses composants, et le composant ne sait pas dans quel
   conteneur il finira. */
.yk-cadre.yk-cadre--carre {
	aspect-ratio: 1;
	border-radius: var( --rayon-image );
}

.yk-cadre.yk-cadre--large {
	aspect-ratio: 16 / 10;
	border-radius: var( --rayon-image );
}

/* Le cercle ne sert qu'aux visages. Un batiment coupe en rond se lit mal ;
   un portrait, non. */
.yk-cadre.yk-cadre--cercle {
	aspect-ratio: 1;
	border-radius: 50%;
}

/* L'arche : un demi-cercle en haut, un pied aux coins d'image. Une seule
   declaration, aucun fichier, et elle ne ressemble a rien d'autre dans le
   parc. */
.yk-cadre.yk-cadre--arche {
	aspect-ratio: 3 / 4;
	border-radius: 999px 999px var( --rayon-image ) var( --rayon-image );
}


/* ==========================================================================
   6. LE BOUTON

   SIMPLIFIÉ le 26 août 2026. La version précédente empilait deux
   pseudo-éléments pour figurer une sérigraphie mal calée : une plaque de
   couleur décalée sous la face, qui se recalait au survol. L'idée venait
   du métier, mais elle produisait un objet chargé, à gélule pleine, répété
   des dizaines de fois par page.

   Ce qui reste : un aplat, un rayon de 8 px, un libellé. Le survol assombrit
   la face et le bouton se soulève d'un pixel ; l'appui l'enfonce. Deux
   propriétés animées, `transform` et `background-color`, et rien à
   empiler.
   ========================================================================== */

/* RENFORCÉ à la quatrième passe : « des boutons plus prononcés ». Corps
   monté, assise plus large, graisse plus franche — une commande se voit
   avant de se lire. */
.yk-bouton,
.wpcf7-form .wpcf7-submit {
	--face: var( --ecole-texte );
	--encre-face: var( --ecole-fond );

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9375rem 1.75rem;
	min-height: 3rem;
	border: 0;
	border-radius: var( --rayon-commande );
	background: var( --face );
	color: var( --encre-face );
	font-family: var( --pile-texte );
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var( --duree-vive ) var( --courbe ),
	            background-color var( --duree-vive ) linear;
}

/* Le bouton de document suit sa ZONE, pas des couleurs fixes : la liste
   des documents tombe sur n'importe quel fond du cycle, encre compris. */
.yk-doc__bouton {
	--face: var( --zone-texte );
	--encre-face: var( --zone-fond );
}

.yk-bouton:hover,
.yk-bouton:focus-visible,
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus-visible {
	background: color-mix( in srgb, var( --face ) 86%, var( --encre-face ) );
	transform: translateY( -1px );
}

.yk-bouton:active,
.wpcf7-form .wpcf7-submit:active {
	transform: translateY( 1px );
}

/* Variante claire : face papier sur fond sombre. */
.yk-bouton--papier {
	--face: var( --ecole-fond );
	--encre-face: var( --ecole-texte );
}

/* Variante ajourée : un trait, pas un aplat. Elle prend les couleurs de sa
   ZONE et non des couleurs fixes, sans quoi elle disparaît dès qu'une bande
   renverse le rapport clair/sombre. */
.yk-bouton--vide {
	background: transparent;
	color: var( --zone-texte );
	box-shadow: inset 0 0 0 1.5px var( --zone-texte );
}

.yk-bouton--vide:hover,
.yk-bouton--vide:focus-visible {
	background: var( --zone-texte );
	color: var( --zone-fond );
}

/* Une cible large vaut mieux qu'une cible jolie sur un téléphone tenu
   d'une main. */
.yk-bouton--pleine {
	width: 100%;
}

/* La COMMANDE CARRÉE : burger, croix, repli, commandes du diaporama. Ces
   quatre objets répétaient les mêmes huit déclarations chacun de son côté,
   et l'un d'eux finissait toujours par diverger d'un demi-pixel. Une seule
   coque, et le composant ne décrit plus que ce qui lui est propre. */
.yk-commande {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var( --rayon-commande );
	background: transparent;
	color: inherit;
	cursor: pointer;
	flex: none;
	transition: background-color var( --duree-vive ) linear,
	            color var( --duree-vive ) linear;
}

/* La variante cernée : un trait, comme le bouton ajouré. Elle suit sa ZONE
   et non des couleurs fixes, sans quoi elle disparaît dès qu'une bande
   renverse le rapport clair/sombre. */
.yk-commande--cerne {
	box-shadow: inset 0 0 0 1.5px var( --zone-texte );
	color: var( --zone-texte );
}

.yk-commande--cerne:hover,
.yk-commande--cerne:focus-visible {
	background: var( --zone-texte );
	color: var( --zone-fond );
}

/* ==========================================================================
   7. PILULES, ICÔNES ET ÉTOILE
   ========================================================================== */

/* Le jeu d'icônes, tracé par `gouache_icone()`. UNE taille de référence,
   UNE graisse de trait, posées ici : deux familles d'icônes sur une page
   se voient tout de suite, et c'est le défaut d'un thème qui en ajoute au
   fil de l'eau. Les tracés vivent dans `functions.php`, ce réglage vit
   ici, et rien ne les redéclare ailleurs.

   `stroke` en `currentColor` : l'icône prend l'encre de sa zone, claire
   sur les bandes sombres, sans une seule règle de zone. */
.yk-icone {
	width: 1.375rem;
	height: 1.375rem;
	flex: none;
	fill: none;
	stroke: currentColor;
}

.yk-icone--petite {
	width: 1.125rem;
	height: 1.125rem;
}

/* L'étiquette. Même forme que le bouton, mais elle ne se clique pas : ni
   plaque, ni transition, ni curseur.

   Le padding a été RELEVÉ à la sixième passe. À 6 px sur 14 px, une
   étiquette qui passe à deux lignes — « Dossiers acceptés de janvier à
   mai, dans la limite des places », mesurée à 520 × 54 px — collait son
   texte au bord haut et au bord bas de la gélule. Le rayon plein n'aide
   pas : plus la pilule est haute, plus ses coupoles mordent sur le
   texte. */
.yk-etiquette {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.25rem;
	border-radius: var( --rayon-plein );
	box-shadow: inset 0 0 0 1.5px var( --zone-texte );
	font-family: var( --pile-texte );
	font-size: var( --t-micro );
	font-weight: var( --gras-micro );
	letter-spacing: var( --lettre-micro );
	text-transform: uppercase;
}

.yk-etiquette--pleine {
	box-shadow: none;
	background: var( --zone-texte );
	color: var( --zone-fond );
}

/* Le champ de saisie reprend la pilule. Un champ bas et gris se remplit
   moins bien qu'un champ haut et franc. */
.yk-champ {
	width: 100%;
	padding: 0.9375rem 1.25rem;
	border: 0;
	border-radius: var( --rayon-commande );
	background: var( --ecole-fond );
	color: var( --ecole-texte );
	font: inherit;
	box-shadow: inset 0 0 0 1.5px color-mix( in srgb, var( --ecole-texte ) 30%, transparent );
}

/* L'étiquette est AU-DESSUS du champ, jamais dedans. Un texte indicatif
   qui disparaît à la saisie est un texte perdu. */
.yk-libelle {
	display: block;
	margin-bottom: 0.5rem;
}

.yk-champ::placeholder {
	color: var( --ecole-texte );
	opacity: 0.7;
}

/* L'étoile remplace la fleur à quatre pétales (26 août, seconde passe) :
   la forme était trop singulière pour un marqueur. `currentColor` : elle
   prend l'encre de sa zone, claire sur les bandes sombres. */
.yk-etoile {
	flex: none;
	fill: currentColor;
}


/* ==========================================================================
   8. EN-TÊTE ET NAVIGATION

   Une seule ligne au bureau, 72 px de haut, jamais plus de 80.
   Sous 1024 px, un panneau plein écran : sept rubriques et un bouton ne
   tiennent pas sur une ligne de tablette.
   ========================================================================== */

.yk-entete {
	position: sticky;
	top: 0;
	z-index: var( --plan-entete );
	color: var( --zone-texte );
}

/* Le fond de l'en-tête est une plaque à part, en opacité, pour qu'elle
   n'apparaisse qu'une fois le contenu passé dessous. Au sommet de la page,
   l'en-tête flotte sur l'aplat du héros.

   CONSÉQUENCE À TENIR : la PREMIÈRE bande de chaque page doit être en
   papier. L'en-tête garde la couleur de texte du corps, donc encre ; encre
   sur crème mesure 12,24:1, mais encre sur accent tombe à 3,81:1 et le
   libellé de navigation est du texte courant. Une page qui ouvrirait sur
   une bande accent rendrait sa navigation illisible pendant les cent
   premiers pixels de défilement. */
.yk-entete::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var( --ecole-fond );
	opacity: 1;
}

/* La plaque se pose au défilement. Aucun écouteur de scroll : une
   animation pilotée par le défilement natif, hors du fil principal.
   Là où elle n'est pas gérée, la plaque reste opaque, ce qui est l'état
   lisible. Le repli est donc le bon. */
@supports ( animation-timeline: scroll() ) {
	@media ( prefers-reduced-motion: no-preference ) {
		.yk-entete::before {
			animation: yk-plaque linear both;
			animation-timeline: scroll( root block );
			animation-range: 0 8rem;
		}
	}
}

@keyframes yk-plaque {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* SAUF au-dessus d'un héros en photo (huitième passe). La plaque
   transparente suppose que l'en-tête flotte sur un APLAT de papier, où son
   libellé encre mesure 12,24:1. Sur une photo, ce contrat n'existe plus :
   le contraste dépend de ce que l'école a déposé, et personne ne peut le
   garantir. La plaque reste donc opaque du premier pixel.

   Une media query n'ajoute aucune spécificité — piège déjà payé sur la
   bascule de barre — mais celle-ci n'en a pas besoin : (0,2,1) contre
   (0,1,1), la classe de corps l'emporte partout. */
.yk-heros-image .yk-entete::before {
	animation: none;
	opacity: 1;
}

/* Sous la largeur de barre : burger, marque, appel. Le burger ouvre la
   ligne, l'appel la ferme, et toute la navigation vit dans le tiroir. */
.yk-entete__interieur {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4rem;
	padding-block: 0.75rem;
}

/* La BARRE (sixième passe) : « logo à gauche, menu au centre, bouton à
   droite, espacé sur toute la longueur ».

   Trois colonnes `1fr auto 1fr`, et non un `space-between`. La nuance
   décide de tout : en `space-between`, le menu se centre entre ses deux
   voisins, donc il glisse vers la droite dès qu'un nom d'école est plus
   long que le libellé du bouton — et il glisserait différemment sur
   chaque site du parc. Deux colonnes latérales égales le centrent sur
   l'EN-TÊTE, quels que soient le logo et l'appel.

   LE SEUIL N'EST PAS UN POINT DE RUPTURE, il est MESURÉ au rendu par
   `nav.js`, qui pose `.yk-entete--barre` quand la ligne tient vraiment.

   Un seuil fixe était faux par construction ici, et il a fallu deux
   essais pour le voir : les libellés du menu sont les TITRES DE PAGES
   saisis par chaque école. Le thème ne les connaît pas et ne peut pas y
   toucher — « un site = plugin + thème installés inchangés ». Sur le
   contenu de démonstration les sept rubriques font 871 px et la ligne
   tient à partir de ~1320 px ; une école qui nomme sa page « Informations
   pratiques et vie scolaire » en demandera 1600, une autre qui abrège en
   demandera 1100. Aucune valeur écrite ici n'est juste pour les deux.

   Le script compare donc la largeur naturelle de la barre à la place
   réellement disponible, au chargement et à chaque redimensionnement.
   Sans script, la barre ne s'affiche pas — et la navigation complète
   reste servie par le PIED, sur toutes les pages. */
.yk-barre {
	display: none;
}

.yk-entete--barre .yk-entete__interieur {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
	align-items: center;
	gap: var( --gouttiere );
	min-height: 4.5rem;
}

.yk-entete--barre .yk-burger {
	display: none;
}

.yk-entete--barre .yk-marque {
	justify-self: start;
}

.yk-entete--barre .yk-barre {
	display: block;
	justify-self: center;
	min-width: 0;
}

.yk-entete--barre .yk-entete__actions {
	justify-self: end;
	margin-left: 0;
}

/* Pendant la mesure, la barre est rendue hors flux et invisible : sans
   cela, `nav.js` mesurerait un élément en `display: none`, dont toutes
   les largeurs valent zéro. */
.yk-entete__interieur .yk-barre--mesure {
	display: block;
	position: absolute;
	visibility: hidden;
	pointer-events: none;
	white-space: nowrap;
}

.yk-barre__liste {
	display: flex;
	align-items: center;
	gap: clamp( 0.5rem, 1.1vw, 1.25rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-barre__liste > li {
	position: relative;
}

/* Le registre MICRO, comme partout ailleurs dans le thème pour ce qui
   étiquette plutôt que ce qui se lit en continu. */
.yk-barre__liste > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	padding-inline: 0.25rem;
	font-family: var( --pile-texte );
	font-size: var( --t-micro );
	font-weight: var( --gras-micro );
	letter-spacing: var( --lettre-micro );
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.yk-barre__liste > li > a:hover,
.yk-barre__liste > li > a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}

/* La page courante se marque SOUS SON TEXTE, comme dans le tiroir : deux
   marqueurs différents pour un même état se lisent comme deux états.

   PLUS EN ACCENT (huitième passe, « c'est rouge quand c'est actif, ça rend
   pas bien »). Le rouge était le seul trait de sa couleur sur toute la
   plaque crème, et il criait plus fort que la rubrique qu'il désignait.

   Les deux autres couleurs de la palette ne pouvaient pas le remplacer, et
   c'est mesuré, pas supposé — posées sur la crème #F2EBD0 :

     ciel  #65BEF9 → 1,71:1     rose #FF8CAC → 1,83:1
     rouge #F73426 → 3,21:1     encre #1F2840 → 12,24:1

   Le seuil non textuel est de 3:1. Un filet ciel ou rose sous un libellé
   se serait effacé — et un marqueur d'état qu'on ne voit pas n'est pas un
   marqueur. Reste l'encre, prise en `currentColor` : le repère suit alors
   sa ZONE, et il tiendra encore si une école repeint son en-tête.

   Le survol garde le sien : plus fin, posé plus bas. Deux traits de même
   couleur se distinguent par leur poids, comme sur du papier. */
.yk-barre .current-menu-item > a,
.yk-barre [aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.28em;
}

/* Le chevron des rubriques à sommaire, en masque : le libellé vient de
   `gouache_navigation()`, qui sert AUSSI le tiroir — où `nav.js` injecte
   déjà son propre bouton. Une icône ajoutée dans le lien y ferait
   doublon. */
.yk-barre li.menu-item-has-children > a::after {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	flex: none;
	background: currentColor;
	-webkit-mask: var( --icone-chevron ) center / contain no-repeat;
	mask: var( --icone-chevron ) center / contain no-repeat;
	transition: transform var( --duree-vive ) var( --courbe );
}

.yk-barre li.menu-item-has-children:hover > a::after,
.yk-barre li.menu-item-has-children:focus-within > a::after {
	transform: rotate( 180deg );
}

/* Le SOMMAIRE déroulant. Aucun état gardé nulle part : il s'ouvre au
   survol et au `:focus-within`, donc il ne PEUT pas rester bloqué — ce
   qui est exactement le défaut qu'on vient de corriger dans le tiroir.

   C'est un panneau posé par-dessus la page : sans fond opaque, il serait
   illisible. Il reste plat — un aplat, un filet, aucune ombre. */
.yk-barre .sub-menu {
	position: absolute;
	top: calc( 100% + 0.5rem );
	left: 50%;
	transform: translateX( -50% );
	z-index: var( --plan-releve );
	min-width: 13rem;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	background: var( --ecole-fond );
	color: var( --ecole-texte );
	border-radius: var( --rayon-commande );
	box-shadow: inset 0 0 0 1.5px color-mix( in srgb, var( --ecole-texte ) 22%, transparent );
	opacity: 0;
	visibility: hidden;
	transition: opacity var( --duree-vive ) linear,
	            visibility 0s linear var( --duree-vive );
}

.yk-barre li:hover > .sub-menu,
.yk-barre li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transition: opacity var( --duree-vive ) linear, visibility 0s;
}

/* Le pont invisible. Sans lui, le pointeur qui descend du libellé vers le
   panneau traverse 8 px de vide, le survol se perd et le panneau se
   referme sous le doigt. */
.yk-barre .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -0.5rem;
	height: 0.5rem;
}

.yk-barre .sub-menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var( --rayon-commande );
	font-family: var( --pile-texte );
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.yk-barre .sub-menu a:hover,
.yk-barre .sub-menu a:focus-visible {
	background: color-mix( in srgb, var( --ecole-texte ) 8%, transparent );
}

.yk-marque {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	text-decoration: none;
	font-family: var( --pile-titre );
	font-weight: var( --gras-titre );
	font-size: 1.0625rem;
	letter-spacing: var( --lettre-titre );
	line-height: 1.1;
	min-width: 0;
}

/* Le logo est borné ICI ET DANS LE PANNEAU. Un plafond posé à un seul
   endroit laisse l'autre sans plafond, et un logo d'école non borné occupe
   tout l'écran d'un téléphone. */
.yk-marque img {
	max-height: 2.5rem;
	width: auto;
}

/* C'est le NOM qui se tronque, jamais le bouton. « École Sainte-Marie de
   la Visitation » ne rentre pas dans un en-tête de téléphone, et entre
   perdre la fin d'un nom et perdre l'appel aux inscriptions, le choix est
   fait. */
.yk-marque > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yk-entete__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

/* Les deux réseaux tiennent la place du bouton d'inscription, à TOUTES
   les largeurs. Rien à resserrer sous 560 px : une icône n'a pas de
   libellé long à tronquer, ce qui était tout le sujet de la règle que ce
   bloc remplace. Le filet passe à pleine force, comme celui du burger
   posé juste à côté ; celui du pied reste à 40 % parce qu'il y voisine du
   texte, pas une autre commande.

   **2,25 rem et NON 2,75, et surtout `nowrap`.** La colonne droite de la
   barre est un `1fr` apparié à la colonne du logo : elle vaut ce qui
   reste une fois le menu servi, soit 86 px sur le jeu d'essai. Deux
   tuiles de 44 px et leur écart demandaient 96 px, et la liste faisait
   ce qu'une liste qui déborde fait — elle passait à la ligne, et les
   deux réseaux s'empilaient l'un sur l'autre EN SILENCE, la barre
   restant parfaitement « conforme » au contrôle statique.

   Deux tuiles de 36 px demandent 80 px : moins que le bouton qu'elles
   remplacent, donc la barre tient au moins aussi souvent qu'avant. Et si
   le menu d'une école la serrait encore plus, `nowrap` fait DÉBORDER la
   liste — ce que `nav.js` mesure, et il repose alors le burger. *Un
   défaut qui se voit vaut mieux qu'un empilement qui se range.* */
.yk-entete .yk-reseaux {
	flex-wrap: nowrap;
}

.yk-entete .yk-reseau {
	width: 2.25rem;
	height: 2.25rem;
	box-shadow: inset 0 0 0 1.5px var( --zone-texte );
	color: var( --zone-texte );
}

.yk-entete .yk-reseau:hover,
.yk-entete .yk-reseau:focus-visible {
	background: var( --zone-texte );
	color: var( --zone-fond );
}

/* Le bouton d'ouverture. Les DEUX états sont dessinés dans le bouton, la
   feuille en montre un : trois traits animés en croix demandaient six
   règles de `transform` pour figurer ce que deux icônes disent d'emblée,
   et ils divergeaient d'un demi-pixel du reste du jeu. */
.yk-burger {
	box-shadow: inset 0 0 0 1.5px var( --zone-texte );
	color: var( --zone-texte );
}

.yk-burger:hover,
.yk-burger:focus-visible {
	background: var( --zone-texte );
	color: var( --zone-fond );
}

.yk-burger__fermer,
.yk-burger[aria-expanded="true"] .yk-burger__ouvrir {
	display: none;
}

.yk-burger[aria-expanded="true"] .yk-burger__fermer {
	display: block;
}

/* Le TIROIR (troisième passe, demande d'Emilien). Il glisse du bord
   GAUCHE, sous un voile qui ferme au clic. Une croix le ferme aussi, et
   les rubriques à sommaire se déplient en accordéon : le « + » n'apparaît
   qu'au survol de sa rubrique — toujours visible au toucher, où le survol
   n'existe pas. */
.yk-voile {
	position: fixed;
	inset: 0;
	z-index: calc( var( --plan-panneau ) - 1 );
	background: color-mix( in srgb, var( --ecole-texte ) 45%, transparent );
	opacity: 0;
	transition: opacity var( --duree ) linear;
}

.yk-voile.est-ouvert {
	opacity: 1;
}

.yk-voile[hidden] {
	display: none;
}

.yk-tiroir {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: var( --plan-panneau );
	width: min( 24rem, 100vw );
	background: var( --ecole-fond );
	color: var( --ecole-texte );
	display: flex;
	flex-direction: column;
	gap: var( --cran-ligne );
	padding: 1rem var( --marge-page ) var( --cran-passage );
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX( -100% );
	transition: transform var( --duree ) var( --courbe );
}

.yk-tiroir.est-ouvert {
	transform: none;
}

.yk-tiroir[hidden] {
	display: none;
}

.yk-tiroir__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3rem;
}

/* La croix de fermeture : une commande, comme le burger auquel elle
   répond. Elle porte donc le même cerne et la même icône. */
.yk-tiroir__fermer {
	box-shadow: inset 0 0 0 1.5px var( --zone-texte );
	color: var( --zone-texte );
}

.yk-tiroir__fermer:hover,
.yk-tiroir__fermer:focus-visible {
	background: var( --zone-texte );
	color: var( --zone-fond );
}

.yk-tiroir ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.25rem;
}

/* Une rubrique est une ligne : le lien, puis le « + » quand elle porte un
   sommaire. La grille les tient côte à côte, le sommaire dessous. */
.yk-tiroir li.menu-item-has-children {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: center;
}

/* Le sommaire occupe la rangée entière, sous le lien et son chevron. Les
   deux sélecteurs valent : avec script, c'est l'enveloppe de repli qui
   descend ; sans script, le sous-menu y descend lui-même. */
.yk-tiroir li.menu-item-has-children > .sub-menu,
.yk-tiroir li.menu-item-has-children > .yk-tiroir__repli {
	grid-column: 1 / -1;
}

/* `:not( .yk-bouton )` n'est PAS une précaution : c'est une correction.
   Cette règle vaut (0,1,1) contre (0,1,0) pour `.yk-bouton`, et elle
   écrasait donc l'appel aux inscriptions posé en pied de tiroir — mesuré
   `padding: 8px 0` et `display: block` au lieu de `15px 28px` en
   `inline-flex`. Le libellé collait au bord gauche du bouton, sur les
   sept pages. *Une règle d'élément dans un conteneur atteint tout ce qui
   passe, y compris les composants qui savaient déjà quoi faire.* */
.yk-tiroir a:not( .yk-bouton ) {
	display: block;
	padding: 0.5rem 0;
	font-family: var( --pile-titre );
	font-size: var( --t-sous );
	font-weight: var( --gras-titre );
	letter-spacing: var( --lettre-titre );
	text-decoration: none;
}

/* La page courante se marque SOUS SON TEXTE, pas sur toute la largeur de
   la rangée : la barre pleine largeur salissait le tiroir (retour de la
   quatrième passe).

   Même correction que dans la barre, et pour la même mesure : le tiroir est
   crème lui aussi, donc ciel et rose y disparaissent pareillement. */
.yk-tiroir .current-menu-item > a,
.yk-tiroir [aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.3em;
}

/* Le bouton de repli. Toujours DESSINÉ — un repli invisible est un repli
   qui n'existe pas — mais en retrait ; le survol ou le focus de sa
   rubrique le réveille. Le chevron pointe vers le bas au repos et fait un
   demi-tour à l'ouverture : c'est la convention, et une convention n'a pas
   à être apprise. */
.yk-tiroir__plus {
	width: 2.25rem;
	height: 2.25rem;
	opacity: 0.45;
	transition: opacity var( --duree-vive ) linear;
}

.yk-tiroir li:hover > .yk-tiroir__plus,
.yk-tiroir li:focus-within > .yk-tiroir__plus,
.yk-tiroir li.est-deplie > .yk-tiroir__plus {
	opacity: 1;
}

.yk-tiroir__plus .yk-icone {
	width: 1.125rem;
	height: 1.125rem;
	transition: transform var( --duree ) var( --courbe );
}

.yk-tiroir li.est-deplie > .yk-tiroir__plus .yk-icone {
	transform: rotate( 180deg );
}

/* LE REPLI. C'est ici que se jouait « les dropdowns sont bloqués ».
   L'état vivait dans l'attribut `hidden` du sous-menu, et `.yk-tiroir ul
   { display: grid }` — spécificité (0,1,1) — l'emportait sur `[hidden]`
   — (0,1,0). Le sous-menu restait donc affiché quoi que fasse le script :
   mesuré sur le DOM réel, `hidden` à vrai et 328 px de haut.

   L'état est passé dans une classe sur la rubrique, que rien ne peut
   écraser en silence. La HAUTEUR, elle, est posée par `nav.js`.

   La piste de grille `0fr → 1fr` a été essayée d'abord et elle s'ouvre
   correctement — mesuré à 242 px sur le rendu réel. Ce qu'elle ne fait
   pas, c'est FERMER : une piste à `0fr` garde encore la taille de base de
   son contenu, soit les 16 px de padding du sous-menu, et chaque rubrique
   repliée laissait donc un cran de vide. Une hauteur mesurée ferme à
   zéro exactement, et reste juste quel que soit le nombre d'entrées que
   l'école ajoute.

   `visibility` accompagne le pli, décalée à la fin de la fermeture : une
   hauteur nulle cache à l'œil, pas au lecteur d'écran ni à la tabulation.
   Sans script, l'enveloppe n'existe pas et le sommaire est simplement
   déplié — aucun bouton mort, aucun contenu enfermé. */
.yk-tiroir__repli {
	height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: height var( --duree ) var( --courbe ),
	            visibility 0s linear var( --repli-delai );
}

.yk-tiroir li.est-deplie > .yk-tiroir__repli {
	visibility: visible;
	transition: height var( --duree ) var( --courbe ),
	            visibility 0s;
}

/* Le sommaire déplié : un simple retrait, en corps de texte estompé —
   le filet d'accent salissait le tiroir (quatrième passe).

   L'espacement est en PADDING et non en marge : dans une piste de grille
   ramenée à 0fr, une marge reste hors de la boîte que `overflow` découpe,
   et le pli fermé gardait 14 px de vide. */
.yk-tiroir .sub-menu {
	margin: 0;
	padding: 0.125rem 0 0.875rem 1.25rem;
	gap: 0;
}

.yk-tiroir .sub-menu a {
	font-family: var( --pile-texte );
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	padding: 0.375rem 0;
	opacity: 0.82;
	transition: opacity var( --duree-vive ) linear;
}

.yk-tiroir .sub-menu a:hover,
.yk-tiroir .sub-menu a:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Les sections visées par le sommaire s'arrêtent SOUS l'en-tête collant,
   pas derrière lui. */
.yk-bande[id] {
	scroll-margin-top: 5rem;
}

body.yk-fige {
	overflow: hidden;
}


/* ==========================================================================
   9. PIED
   ========================================================================== */

.yk-pied {
	--zone-fond: var( --ecole-texte );
	--zone-texte: var( --ecole-fond );

	background: var( --zone-fond );
	color: var( --zone-texte );

	/* Le cran de PASSAGE, pas celui de bande : le pied est une annexe, pas
	   une section — « footer trop gros » (seconde passe). Il ne porte plus
	   que les liens de pages, jamais les sommaires d'ancres. Et comme les
	   bandes, c'est une ardoise : retrait, rayon, y compris en pied de
	   page. */
	padding-block: var( --cran-passage );
	margin: clamp( 0.375rem, 0.8vw, 0.75rem ) var( --retrait-ardoise );
	border-radius: var( --rayon-section );
}

/* Quatre blocs plutot qu'une liste de liens et un logotype geant.
   L'ancien pied empilait une rangee de liens, un mot de marque a
   3,5 rem et une adresse : beaucoup de hauteur pour peu d'information,
   et rien de ce qu'un parent vient y chercher. */
.yk-pied__grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --cran-passage );
}

@media ( min-width: 560px ) {
	.yk-pied__grille {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1024px ) {
	.yk-pied__grille {
		grid-template-columns: 1.6fr 1fr 1fr 0.8fr;
		gap: var( --gouttiere );
	}
}

.yk-pied__bloc {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	min-width: 0;
}

.yk-pied__intitule {
	margin: 0 0 0.25rem;
	opacity: 0.7;
}

.yk-pied__marque {
	font-family: var( --pile-titre );
	font-size: var( --t-titre );
	font-weight: var( --gras-titre );
	letter-spacing: var( --lettre-titre );
	line-height: 1.1;
	margin: 0;
}

/* Le logo tient la place du nom, sur une PLAQUE claire. Le pied est une
   ardoise d'encre : un logo à texte sombre sur fond transparent — le cas
   ordinaire — y serait illisible, et le thème ne peut pas connaître les
   couleurs d'un fichier que l'école dépose. La plaque referme le sujet
   pour les cinquante écoles à la fois.

   Le plafond de hauteur est posé ICI ET DANS L'EN-TÊTE : un plafond posé
   à un seul endroit laisse l'autre sans plafond, et un logo d'école non
   borné occupe tout l'écran d'un téléphone. */
/* `width: fit-content` n'est pas décoratif : le bloc d'identité étire ses
   enfants, et la plaque mesurait 369 px pour un logo de 158 — un aplat
   blanc à moitié vide. Un `inline-flex` ne protège de rien dès qu'il
   devient l'enfant d'une grille ou d'une colonne flex. */
.yk-pied__logo {
	display: inline-flex;
	width: fit-content;
	align-self: start;
	margin: 0;
	padding: 0.625rem 0.875rem;
	border-radius: var( --rayon-image );
	background: var( --zone-texte );
}

.yk-pied__logo img {
	display: block;
	max-height: 3rem;
	width: auto;
}

.yk-pied__identite p,
.yk-pied__identite address {
	max-width: 32ch;
}

.yk-pied address {
	font-style: normal;
}

.yk-pied__horaires {
	opacity: 0.8;
	max-width: 28ch;
}

.yk-pied__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.15rem;
}

.yk-pied__liste a {
	display: inline-block;
	min-height: 1.75rem;
	padding-block: 0.25rem;
	text-decoration: none;
}

.yk-pied__liste a:hover,
.yk-pied__liste a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Les reseaux sociaux : la marque, et rien d'autre. Pas de libelle sous
   le glyphe, il n'apprend rien a personne. Le nom part en `aria-label`,
   pour qui ne voit pas le dessin. */
.yk-reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-reseau {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var( --rayon-commande );
	box-shadow: inset 0 0 0 1.5px color-mix( in srgb, var( --zone-texte ) 40%, transparent );
	transition: background-color var( --duree-vive ) linear,
	            color var( --duree-vive ) linear;
}

.yk-reseau svg {
	width: 1.125rem;
	height: 1.125rem;
	fill: currentColor;
}

.yk-reseau:hover,
.yk-reseau:focus-visible {
	background: var( --zone-texte );
	color: var( --zone-fond );
}

.yk-pied__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --cran-ligne ) var( --gouttiere );
	margin-top: var( --cran-bande );
	padding-top: var( --cran-passage );
	border-top: 1px solid color-mix( in srgb, var( --zone-texte ) 25%, transparent );
}

/* Le point median est rationne : un seul par ligne, et seulement dans une
   bande de metadonnees. */
.yk-pied__separe::before {
	content: " · ";
	opacity: 0.5;
}

.yk-pied__rattachement {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.yk-pied__rattachement .yk-micro {
	margin: 0;
}

/* ==========================================================================
   10. ACCESSIBILITÉ
   ========================================================================== */

.yk-evitement {
	position: absolute;
	left: var( --marge-page );
	top: 0;
	z-index: var( --plan-evitement );
	padding: 0.75rem 1.25rem;
	background: var( --ecole-texte );
	color: var( --ecole-fond );
	border-radius: 0 0 var( --rayon-plein ) var( --rayon-plein );
	font-family: var( --pile-texte );
	font-size: var( --t-micro );
	font-weight: var( --gras-micro );
	letter-spacing: var( --lettre-micro );
	text-transform: uppercase;
	text-decoration: none;
	transform: translateY( -110% );
	transition: transform var( --duree ) var( --courbe );
}

.yk-evitement:focus {
	transform: translateY( 0 );
}

/* Le contour de focus prend la couleur du texte de sa ZONE, pas une
   couleur fixe. Une valeur en dur devient invisible dès qu'une bande
   renverse le rapport clair/sombre, et un contour invisible ressemble à un
   contour absent : personne ne cherche de bug. */
:focus-visible {
	outline: 3px solid var( --zone-texte );
	outline-offset: 3px;
}

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

/* Tout ce qui bouge s'arrête ici. La règle vise les transitions et les
   animations, pas les états : le survol continue de répondre, il répond
   simplement sans trajet. */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* La règle ci-dessus raccourcit les DURÉES, pas les retards. Celui-ci
	   se remet donc à zéro à la main. */
	:root {
		--repli-delai: 0s;
	}
}


/* ==========================================================================
   11. COMPOSANTS DE CONTENU

   Aucune carte. Ce qui porte une donnée est soit l'aplat lui-même, soit une
   ligne de texte, soit une pilule. Pas une seule ombre portée dans cette
   section, et c'est la règle qui la tient entière.
   ========================================================================== */

/* --- Prose : ce que rend un champ wysiwyg -------------------------------- */

.yk-prose {
	max-width: var( --mesure );
}

.yk-prose > * + * {
	margin-top: 0.9em;
}

.yk-prose h2,
.yk-prose h3 {
	font-size: var( --t-sous );
	margin-top: 1.6em;
}

.yk-prose ul,
.yk-prose ol {
	padding-left: 1.25rem;
}

.yk-prose li + li {
	margin-top: 0.35em;
}

.yk-prose a {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* --- L'annonce de l'école -------------------------------------------------

   ÉTAIT une barre pleine largeur AVANT l'en-tête (huitième passe : « enlève
   la bannière tout en haut, convertis-la en pop-up en bas à droite »). Elle
   poussait toute la page de 60 px et se lisait avant le nom de l'école.

   DEUX ÉTATS, et l'ordre des règles le dit :

   - au repos — donc sans JavaScript — une ardoise d'encre dans le flux,
     sous le pied, sans commande. Rien ne recouvre la page ;
   - `.yk-popup--flottante`, posée par `nav.js`, la décolle en bas à droite
     et réveille la croix.

   Écrit dans ce sens et pas l'inverse : si le script ne répond pas,
   l'annonce reste lisible et n'occupe rien. */

.yk-popup {
	--zone-fond: var( --ecole-texte );
	--zone-texte: var( --ecole-fond );

	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: var( --zone-fond );
	color: var( --zone-texte );
	padding: var( --cran-ligne ) var( --gouttiere );
	margin-inline: clamp( 0.375rem, 0.8vw, 0.75rem );
	margin-top: clamp( 0.375rem, 0.8vw, 0.75rem );
	border-radius: var( --rayon-section );
}

/* En capitales espacées — le registre micro — l'annonce faisait trois
   lignes illisibles dans la pastille. Le micro ÉTIQUETTE ; ici le texte se
   lit, donc il prend une casse normale et une chasse ordinaire. C'était le
   bon registre pour une barre pleine largeur, ce n'est plus le bon pour un
   message de 22 rem. */
.yk-popup__texte {
	font-size: 0.9375rem;
	line-height: 1.45;
	max-width: 46ch;
}

.yk-popup__corps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	min-width: 0;
	flex: 1 1 auto;
}

/* Le bouton renforcé reprendrait toute la hauteur de l'annonce : il
   redescend d'un cran. C'est le SEUL endroit du thème qui touche aux
   crans d'un bouton, et il le fait par une règle qui le nomme —
   `.yk-alerte .yk-bouton` avait déjà ce rôle. */
.yk-popup .yk-bouton {
	min-height: 2.25rem;
	padding: 0.5rem 1rem;
	font-size: 0.8125rem;
}

/* La pastille flottante. Bornée à 22 rem : une annonce d'école tient en
   deux lignes — « Rentrée des classes : mardi 1er septembre à 8h30 » — et
   au-delà elle cesse d'être une annonce. */
.yk-popup--flottante {
	position: fixed;
	right: clamp( 1rem, 2.5vw, 2rem );
	bottom: clamp( 1rem, 2.5vw, 2rem );
	z-index: var( --plan-panneau );

	/* La largeur suit le retrait : sans ce calcul, la pastille touchait le
	   bord gauche sur téléphone alors qu'elle gardait sa marge à droite. */
	width: min( 22rem, calc( 100vw - 2 * clamp( 1rem, 2.5vw, 2rem ) ) );
	margin: 0;
	padding: 1.625rem;
}

/* Sur la pastille, le corps s'empile : à 22 rem de large, le texte et son
   bouton côte à côte laissaient six caractères par ligne. */
.yk-popup--flottante .yk-popup__corps {
	display: grid;
	justify-items: start;
	gap: 0.875rem;
}

/* L'entrée. Elle ne se déclenche qu'une fois, à la révélation, et elle est
   COURTE : une annonce qui glisse pendant une demi-seconde en bas d'écran
   se lit comme une publicité. */
@media ( prefers-reduced-motion: no-preference ) {
	.yk-popup--flottante {
		animation: yk-popup-entree var( --duree ) var( --courbe ) both;
	}
}

@keyframes yk-popup-entree {
	from {
		opacity: 0;
		transform: translateY( 0.75rem );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* La croix. `hidden` en PHP, révélée par le script : un bouton auquel
   personne ne répond est un bouton mort, et le thème n'en pose pas. Elle
   suit sa zone — encre — donc elle reste visible quelle que soit la
   palette de l'école. */
.yk-popup__fermer {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;

	/* Le retrait négatif aligne OPTIQUEMENT le glyphe sur le texte : la
	   commande fait 36 px pour rester cliquable au doigt, son tracé n'en
	   fait que 24. Sans lui, la croix paraissait rentrée dans la
	   pastille. Il reste petit devant le padding, qui fait le reste. */
	margin: -0.375rem -0.375rem 0 0;
	color: var( --zone-texte );
}

.yk-popup__fermer:hover,
.yk-popup__fermer:focus-visible {
	background: color-mix( in srgb, currentColor 18%, transparent );
}

.yk-popup__fermer[hidden] {
	display: none;
}

/* --- Bannière de page ---------------------------------------------------- */

.yk-banniere {
	padding-block: var( --cran-bande ) var( --cran-passage );
}

.yk-banniere__pile {
	display: grid;
	gap: var( --cran-ligne );
	justify-items: start;
}

.yk-banniere__image {
	margin-top: var( --cran-passage );
	aspect-ratio: 21 / 9;
	overflow: hidden;
	border-radius: var( --rayon-image );
}

.yk-banniere__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Le héros de l'accueil -------------------------------------------------

   REFAIT une seconde fois le 31 août 2026 (dixième passe, repère fourni
   par Emilien) : le contenu vit DANS l'image, centré, et non plus sur une
   plaque de papier glissée sous elle.

   LE VOILE EST LE PRIX DE CETTE DEMANDE, et il est mesuré. Du texte posé
   sur une photo déposée par une école n'a aucun contraste garanti : la
   même page peut recevoir une cour à l'ombre ou un ciel blanc. Le voile
   d'encre couvre TOUTE l'image, uniformément — un aplat, pas un dégradé,
   ce qui est déjà le vocabulaire du thème.

   Le taux vient d'un calcul sur le PIRE CAS, une zone de photo blanche,
   avec du crème par-dessus :

     55 % → 2,94:1     58 % → 3,20:1     62 % → 3,60:1
     68 % → 4,34:1     70 % → 4,63:1     72 % → 4,84:1

   Le seuil AA du texte courant est 4,5:1, celui du grand texte 3:1.

   **70 % a été essayé d'abord, et RENDU : la photo n'était plus une
   photo.** Un voile assez épais pour porter du texte de 13 px efface tout
   ce qu'on voulait montrer, et c'est justement l'image que la demande met
   au centre.

   Le contraste a donc CHANGÉ DE PORTEUR. Tout ce qui est petit porte son
   propre fond et ne dépend plus du voile : le surtitre passe en pilule
   pleine, les appels en boutons pleins. Ne restent sur la photo que
   l'affiche et l'accroche — deux tailles de GRAND TEXTE, donc 3:1, donc
   58 %, où la photo se lit encore.

   L'accroche est fixée à 24 px et non laissée à `--t-passage`, qui plafonne
   à 22 : le seuil du grand texte est à 24 px pour du romain, et 22 px
   aurait exigé 4,5:1 — c'est-à-dire le voile épais qu'on vient d'écarter.
   Deux pixels décident du réglage de toute la section. */

.yk-heros {
	padding-block: var( --cran-passage ) var( --cran-bande );
}

/* La variante à image. Sans image, le héros reste la pile de texte
   d'origine, dans son aplat de bande : rien à recouvrir, rien à voiler. */
.yk-heros--image {
	/* Le héros REDÉCLARE sa zone plutôt que de surcharger ses composants :
	   sous le voile, l'étiquette, les boutons et le filet de focus doivent
	   tous savoir qu'ils sont sur de l'encre. C'est la discipline du thème,
	   et c'est ce qui évite d'écrire une exception par composant.

	   La classe de `gouache_fond()` reste posée sur la bande — le cycle ne
	   doit pas se décaler — mais ses deux variables sont écrasées ici. */
	--zone-fond: var( --ecole-texte );
	--zone-texte: var( --ecole-fond );

	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	color: var( --zone-texte );

	/* 50 vh de plancher, demandés ; jamais la hauteur d'écran entière. Le
	   `clamp` borne aussi le haut : sur un écran 4K, 74 vh feraient
	   1 600 px d'affiche avant le premier mot de la page. */
	min-height: clamp( 28rem, 74vh, 48rem );
	padding-block: var( --cran-bande );
}

.yk-heros__fond {
	position: absolute;
	inset: 0;
}

.yk-heros__fond img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le voile. Sur le fond et non sur le héros : il doit couvrir la photo et
   passer SOUS le contenu, et l'ordre du DOM suffit à le dire. Aucun
   `z-index` dans tout le composant. */
.yk-heros--image .yk-heros__fond::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var( --ecole-texte );
	opacity: var( --voile-heros );
}

.yk-heros__plaque {
	position: relative;
}

/* Sous l'image, la plaque n'est plus un aplat : elle n'est qu'un calque de
   position. Le `width` est nécessaire — `place-items: center` rétracte
   sinon la grille sur son contenu et le conteneur cesse de centrer. */
.yk-heros--image .yk-heros__plaque {
	width: 100%;
}

.yk-heros__pile {
	display: grid;
	gap: 0.875rem;
	justify-items: start;
	min-width: 0;
}

/* Centré, comme le repère. C'est le SEUL endroit du thème où le texte se
   centre : partout ailleurs il s'aligne sur le conteneur, et un héros
   centré au milieu d'une page alignée à gauche ne fonctionne que parce
   qu'il est une affiche, pas un paragraphe. */
.yk-heros--image .yk-heros__pile {
	justify-items: center;
	text-align: center;
	max-width: 56rem;

	/* `margin-inline: auto` et non `justify-self: center`. Les deux
	   centrent la pile sur Edge aujourd'hui — vérifié, 713 px contre
	   713 — mais pas par le même mécanisme : `justify-self` sur une boîte
	   de BLOC relève de l'alignement de bloc, arrivé récemment dans les
	   moteurs. Là où il manque, la déclaration est ignorée en silence, la
	   pile reste bornée à 56 rem et se colle à gauche : le héros serait
	   décentré de 200 px sans qu'aucune erreur ne le signale.

	   Les marges automatiques font le même travail depuis toujours. */
	margin-inline: auto;
}

/* L'accroche se borne plus court que la mesure de lecture : sous une
   affiche de 84 px, une ligne de 62 caractères traverse tout l'écran et
   l'ensemble cesse de se lire comme un bloc. */
.yk-heros__pile .yk-passage {
	max-width: 44ch;
	margin-top: 0.25rem;
}

.yk-heros--image .yk-heros__pile .yk-passage {
	/* 24 px pile : le seuil du GRAND TEXTE. Voir le calcul du voile
	   ci-dessus — cette valeur et `--voile-heros` se modifient ensemble. */
	font-size: 1.5rem;
	max-width: 48ch;
	text-wrap: balance;
}

.yk-heros__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.yk-heros--image .yk-heros__actions {
	justify-content: center;
}

/* Le cran devant les appels appartient au HÉROS et pas à la classe : 404 et
   Contact réutilisent `.yk-heros__actions` dans une pile qui porte déjà son
   propre cran, et une marge ajoutée là s'y additionnerait. */
.yk-heros__pile .yk-heros__actions {
	margin-top: 0.75rem;
}

/* --- Chiffres clés -------------------------------------------------------- */

.yk-chiffres {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --cran-passage ) var( --gouttiere );
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( min-width: 768px ) {
	.yk-chiffres {
		grid-template-columns: repeat( auto-fit, minmax( 9rem, 1fr ) );
	}
}

.yk-chiffres__valeur {
	display: block;
	font-family: var( --pile-titre );
	font-size: clamp( 2.5rem, 7vw, 4.5rem );
	font-weight: var( --gras-affiche );
	font-stretch: var( --chasse-affiche );
	line-height: var( --i-affiche );
	letter-spacing: var( --lettre-affiche );
	font-variant-numeric: tabular-nums;
}

.yk-chiffres__libelle {
	display: block;
	margin-top: 0.5rem;
}

/* LA RÉGLETTE. Un aplat DANS la bande — pas une carte : ni ombre, ni
   bord, ni élévation, juste un cran de teinte pris à l'encre de la zone.
   C'est le vocabulaire du thème (l'aplat porte la donnée) appliqué à
   l'endroit qui en manquait le plus : trois nombres flottaient dans le
   tiers gauche d'un conteneur de 1400 px, et c'est ce que « ça fait
   vide » désignait.

   La teinte se calcule sur la ZONE et non en dur : la réglette tombe sur
   le papier aujourd'hui, elle tombera ailleurs le jour où une école
   remplit une section de plus. */
.yk-reglette {
	background: color-mix( in srgb, var( --zone-texte ) 8%, var( --zone-fond ) );
	border-radius: var( --rayon-section );
	padding: var( --cran-passage ) var( --gouttiere );
	margin-top: var( --cran-passage );
}

/* Un filet entre les chiffres, et seulement quand ils sont côte à côte.
   Il sépare des données réelles — ce n'est pas un trait de décoration. */
@media ( min-width: 768px ) {
	.yk-reglette > li + li {
		border-left: 1.5px solid color-mix( in srgb, var( --zone-texte ) 22%, transparent );
		padding-left: var( --gouttiere );
	}
}

/* --- Duo texte / image ---------------------------------------------------- */

.yk-duo {
	display: grid;
	gap: var( --cran-passage );
	align-items: center;
}

@media ( min-width: 768px ) {
	.yk-duo {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		gap: var( --gouttiere );
	}

	/* Le duo dont l'IMAGE porte la section : elle prend la part la plus
	   large. Sert la présentation de l'école, où une photo bornée à 22 rem
	   sous un bloc de texte ressemblait à une pièce jointe. */
	.yk-duo--large {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.2fr );
	}

	.yk-duo--inverse > :first-child {
		order: 2;
	}
}

.yk-duo__texte {
	display: grid;
	gap: var( --cran-ligne );
	justify-items: start;
	min-width: 0;
}

/* L'IMAGE NE DICTE PLUS LA HAUTEUR, ELLE LA SUIT (neuvième passe, « ça
   fait vide »).

   Le vide avait une cause mécanique, et elle est la même sur sept bandes
   du site. Dans une colonne de 640 px, une arche en 3/4 se rend à 853 px
   de haut et un carré à 640. La bande prenait donc la hauteur de la
   PHOTO ; `align-items: center` centrait le texte dedans et coupait le
   reste en deux vides égaux. Mesuré sur Participation : bande 1029 px,
   texte 133 px — **13 % de remplissage, 448 px de bleu au-dessus et 448
   en dessous.** Sur la page des spécificités : 25 %, 305 px de chaque
   côté.

   Aucune écriture ne remplit ça : le champ porte deux phrases, et c'est
   très bien ainsi. C'est le format de l'image qu'il fallait cesser de
   subir. Elle se rend désormais en PAN — un rectangle qui prend la
   hauteur de la piste, quelle qu'elle soit — avec un plancher pour la
   bande où le texte est vraiment court.

   Le cercle est la seule exception : il ne sert qu'aux visages, et un
   visage étiré n'est plus un portrait. */
@media ( min-width: 768px ) {
	.yk-duo {
		align-items: stretch;
	}

	.yk-duo__texte {
		align-self: center;
	}

	/* LE CERCLE NE S'ÉTIRE PAS. Vu au balayage, à 1024 px seulement : le
	   `stretch` posé sur la piste s'applique à TOUS les enfants, cercle
	   compris. Sa largeur est explicite — 21 rem, un piège déjà payé — et
	   sa hauteur devenait celle de la rangée : le visage de la directrice
	   sortait en ellipse. L'exclure du pan ne suffisait pas ; il faut lui
	   rendre son alignement. */
	.yk-duo .yk-duo__image.yk-cadre--cercle {
		align-self: center;
	}

	/* (0,3,0) — au-dessus de `.yk-cadre.yk-cadre--carre`, dont la double
	   classe était justement là pour passer devant `.yk-duo__image`. On
	   ne compte pas sur l'ordre du fichier pour trancher ça. */
	.yk-duo .yk-duo__image:not( .yk-cadre--cercle ) {
		position: relative;
		align-self: stretch;
		aspect-ratio: auto;
		min-height: 21rem;
	}

	.yk-duo .yk-duo__image:not( .yk-cadre--cercle ) > img {
		position: absolute;
		inset: 0;
	}

	/* L'arche devient ELLIPTIQUE, et c'est la seule écriture qui tienne
	   sur une boîte dont on ne connaît plus le format.

	   En rayons fixes, deux échecs successifs : à 999 px le navigateur
	   rabat les quatre coins au prorata et le pied tombait de 20 à 6 px ;
	   à 12 rem le cintre devenait un coin arrondi posé sur un rectangle —
	   une pastille, pas une arche.

	   `50% / 34%` sépare le rayon horizontal du vertical : les deux coins
	   hauts font exactement une demi-largeur chacun, donc leur somme vaut
	   la largeur et rien n'est rabattu ; le pied garde son rayon d'image
	   quelle que soit la hauteur. La forme suit la boîte au lieu de la
	   contredire. */
	.yk-duo .yk-duo__image.yk-cadre--arche {
		border-radius:
			50% 50% var( --rayon-image ) var( --rayon-image ) /
			34% 34% var( --rayon-image ) var( --rayon-image );
	}
}

.yk-duo__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	min-width: 0;
	border-radius: var( --rayon-image );
}

/* Un portrait en cercle dans un duo se BORNE : à pleine colonne, le visage
   de la directrice faisait 900 px de diamètre et écrasait son propre mot.
   Largeur EXPLICITE et non `max-width` + marges auto : l'image intérieure
   est en pourcentage, et deux largeurs relatives face à face s'effondrent
   à zéro. */
.yk-duo__image.yk-cadre--cercle {
	width: min( 100%, 21rem );
	justify-self: center;
}

.yk-duo__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Lignes : le cran le plus serré du thème ------------------------------ */

/* Un filet sous CHAQUE ligne est la mise en page la plus paresseuse qui
   soit. Ici le filet sépare des GROUPES, et les lignes d'un même groupe
   respirent sans trait. */
.yk-groupe + .yk-groupe {
	margin-top: var( --cran-passage );
	padding-top: var( --cran-passage );
	border-top: 1.5px solid currentColor;
}

/* Un bloc d'information se BORNE (décision du 19 août, Marelle, reprise
   ici à la troisième passe) : sur un conteneur de 1400 px, l'étiquette et
   sa valeur finissaient à mille pixels l'une de l'autre, et l'œil se
   trompe de rang dès qu'il y en a six. À 47 rem, le `space-between`
   redevient juste. */
.yk-lignes {
	display: grid;
	gap: var( --cran-ligne );
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 47rem;
}

.yk-ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	justify-content: space-between;
}

.yk-ligne__valeur {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
}

/* Le tarif porte son montant à l'échelle du titre : c'est le chiffre que
   les familles viennent chercher. */
.yk-ligne--montant .yk-ligne__valeur {
	font-family: var( --pile-titre );
	font-size: var( --t-sous );
	font-weight: var( --gras-titre );
	letter-spacing: var( --lettre-titre );
}

/* Le rang dont la valeur est une PHRASE, et non une donnée courte.

   `horaires_garderie`, `_etude`, `_portail`, `_secretariat` et
   `mentions_hebergeur_adresse` sont des `textarea` au modèle : les
   gabarits y appelaient déjà `nl2br()`, la feuille ne l'avait jamais
   suivi. Le `space-between` du rang et le `text-align: right` de la
   valeur donnaient alors TROIS alignements pour trois rangées —
   mesuré à 1440 px le 4 septembre 2026 sur « Autour de la classe » :
   valeur à x=357 sur deux lignes, x=142, x=142 sur deux lignes. Une
   valeur courte reste à droite du libellé ; une valeur longue bascule
   dessous en pleine largeur, et son cadrage à droite rend un
   paragraphe en drapeau à gauche (BLUEPRINT §12, 4 septembre 2026).

   Ici le rang est une DÉFINITION : le libellé tient sa piste, la
   valeur est une colonne de texte cadrée à gauche. Le cadrage à droite
   et les chiffres tabulaires restent à ce qu'ils servent — un montant,
   un horaire, un nom.

   `.yk-ligne` et `.yk-ligne--texte` ont la même spécificité (0,1,0) :
   cette règle DOIT rester après elle dans la feuille. */
.yk-ligne--texte {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem;
	justify-content: start;
}

.yk-ligne--texte .yk-ligne__valeur {
	font-variant-numeric: normal;
	font-weight: 400;
	text-align: left;
}

@media ( min-width: 560px ) {

	.yk-ligne--texte {
		grid-template-columns: minmax( 7rem, 12rem ) 1fr;
		gap: 0.35rem 1.5rem;
	}
}

/* --- Le renvoi vers « Nos spécificités » ----------------------------------

   Sur l'accueil et sur Notre école (BLUEPRINT §12, 13 septembre 2026). Il
   ANNONCE, la page détaille : au plus quatre intitulés, jamais leurs
   textes. La rangée compacte qui vivait ici est retirée le même jour :
   Notre école ne détaille plus les spécificités, elle y renvoie.

   Au bureau, l'invitation tient la colonne étroite, les intitulés la
   large, et le bouton se pose au pied de l'invitation, à hauteur de la
   dernière entrée. Sur téléphone, tout s'empile dans l'ordre du document
   — titre, phrase, intitulés, lien —, qui est aussi l'ordre de lecture. */

.yk-renvoi__grille {
	display: grid;
	gap: var( --cran-passage );
}

@media ( min-width: 1024px ) {
	.yk-renvoi__grille {
		grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr );
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"tete liste"
			"lien liste";
		column-gap: var( --gouttiere );
	}

	.yk-renvoi__tete {
		grid-area: tete;
	}

	.yk-renvoi__liste {
		grid-area: liste;
	}

	.yk-renvoi__lien {
		grid-area: lien;
		align-self: end;
	}
}

.yk-renvoi__tete {
	display: grid;
	gap: var( --cran-ligne );
	justify-items: start;
	align-content: start;
}

.yk-renvoi__liste {
	display: grid;
	gap: var( --cran-ligne );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* L'intitulé à l'échelle du titre fort, son marqueur dans une piste fixe :
   les quatre textes partent du même bord, quelle que soit la largeur du
   glyphe ou de l'icône déposée. */
.yk-renvoi__entree {
	display: grid;
	grid-template-columns: 2.5rem minmax( 0, 1fr );
	gap: 1rem;
	align-items: center;
	font-family: var( --pile-titre );
	font-size: var( --t-titre-fort );
	font-weight: var( --gras-affiche );
	font-stretch: var( --chasse-affiche );
	line-height: 1.02;
	letter-spacing: var( --lettre-titre );
	text-wrap: balance;
}

.yk-renvoi__entree .yk-marqueur,
.yk-renvoi__entree .yk-marqueur-icone {
	width: 2.5rem;
	height: 2.5rem;
}

.yk-renvoi__entree .yk-marqueur-icone img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.yk-renvoi__lien {
	margin: 0;
}

/* Le bouton suit sa ZONE, comme celui des documents : le cycle peut poser
   ce bloc sur l'encre, où un bouton d'encre disparaîtrait. Et il peut
   passer à la ligne : son libellé est le titre de la page, saisi par
   l'école, et un bouton qui déborde du téléphone est pire qu'un bouton
   sur deux lignes. */
.yk-renvoi__lien .yk-bouton {
	--face: var( --zone-texte );
	--encre-face: var( --zone-fond );
	max-width: 100%;
	white-space: normal;
	text-align: center;
}

/* --- Une spécificité par bande --------------------------------------------

   La page « Nos spécificités », `parts/specificites.php`. Chaque entrée
   prend sa bande, sa couleur et sa photo en pan ; le côté de la photo
   alterne, parce que plusieurs duos du même côté font un peigne. */

/* Le rang. Il donne une colonne vertébrale à la suite — sans lui, quatre
   bandes de même structure se lisent comme quatre répétitions plutôt que
   comme une progression. En retrait de sa zone : c'est un repère, pas un
   titre, et il ne doit jamais concurrencer celui qu'il précède.

   `aria-hidden` : la lecture « zéro un » n'apporte rien à qui écoute la
   page, et l'ordre est déjà porté par la structure du document. */
.yk-specif__rang {
	margin: 0;
	font-family: var( --pile-titre );
	font-size: var( --t-titre-fort );
	font-weight: var( --gras-affiche );
	font-stretch: var( --chasse-affiche );
	line-height: 1;
	letter-spacing: var( --lettre-titre );
	font-variant-numeric: tabular-nums;
	color: color-mix( in srgb, currentColor 42%, transparent );
}

/* Le duo SANS photo : les deux colonnes portent du texte, et deux blocs
   de texte se lisent depuis leur PREMIÈRE ligne. Le centrage vertical,
   juste quand une photo fait face, décalerait ici le titre par rapport à
   son propre paragraphe. */
@media ( min-width: 768px ) {
	.yk-duo--texte .yk-duo__texte {
		align-self: start;
	}
}

/* --- Le relevé : ce que les dons ont financé ------------------------------

   REMPLACE le grand livre borné à 47 rem (neuvième passe). Une réalisation
   n'est pas une ligne de comptes : elle prend un poste à elle, avec son
   montant à l'échelle du titre fort, et les postes se rangent sur toute la
   largeur de la bande.

   Un FILET par poste, jamais une boîte : ce qui porte une donnée est
   l'aplat, une ligne de texte ou une pilule — règle 1 du thème. */

.yk-releve {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: var( --cran-passage ) var( --gouttiere );
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-releve__poste {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	min-width: 0;
	padding-top: var( --cran-ligne );
	border-top: 2px solid currentColor;
}

.yk-releve__montant {
	font-family: var( --pile-titre );
	font-size: var( --t-titre-fort );
	font-weight: var( --gras-affiche );
	font-stretch: var( --chasse-affiche );
	line-height: 1;
	letter-spacing: var( --lettre-titre );
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.yk-releve__objet {
	margin: 0;
	max-width: 28ch;
}

.yk-releve__poste > .yk-micro {
	margin: 0;
}

/* --- L'annonce : une phrase seule sur son aplat ---------------------------

   Un paragraphe isolé dans une grande bande se rendait sur 34 % de sa
   largeur. Le registre était faux : posée seule sur un aplat d'encre, une
   phrase s'annonce, elle ne se lit pas au fil du texte. Intitulé étroit à
   gauche, énoncé à l'échelle du titre à droite. */

.yk-annonce {
	display: grid;
	gap: var( --cran-ligne );
}

@media ( min-width: 768px ) {
	.yk-annonce {
		grid-template-columns: minmax( 0, 12rem ) minmax( 0, 1fr );
		gap: var( --gouttiere );
		align-items: start;
	}
}

.yk-annonce__intitule {
	margin: 0;
	padding-top: 0.45em;
}

.yk-annonce__texte {
	font-family: var( --pile-titre );
	font-size: var( --t-titre );
	font-weight: var( --gras-titre );
	line-height: 1.25;
	letter-spacing: var( --lettre-titre );
	max-width: 34ch;
	margin: 0;
	text-wrap: balance;
}

/* --- Questions fréquentes ------------------------------------------------- */

.yk-details {
	display: grid;
	gap: 0;
	max-width: 52rem;
}

.yk-detail {
	border-top: 1.5px solid currentColor;
}

.yk-detail:last-child {
	border-bottom: 1.5px solid currentColor;
}

.yk-detail summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-block: var( --cran-ligne );
	cursor: pointer;
	list-style: none;
	font-family: var( --pile-titre );
	font-size: var( --t-sous );
	font-weight: var( --gras-titre );
	letter-spacing: var( --lettre-titre );
	line-height: 1.2;
}

.yk-detail summary::-webkit-details-marker {
	display: none;
}

/* Le même chevron que le tiroir, et pour la même raison : deux replis sur
   une page qui se signalent différemment se lisent comme deux mécaniques
   distinctes. Demi-tour à l'ouverture. */
.yk-detail__chevron {
	margin-top: 0.2em;
	transition: transform var( --duree ) var( --courbe );
}

.yk-detail[open] .yk-detail__chevron {
	transform: rotate( 180deg );
}

.yk-detail__corps {
	padding-bottom: var( --cran-ligne );
}

/* --- Actualités ----------------------------------------------------------- */

/* REFAIT le 26 août 2026 (troisième passe). Toujours pas une boîte : une
   image arrondie, une date en pilule, un titre. Trois présentations —
   la une, la carte, la ligne — et une composition « une + liste » qui
   remplace la frise : la frise tronquée faisait un bandeau de vignettes,
   pas un bulletin. */
/* LE CRAN VIVAIT AU MAUVAIS ÉTAGE (huitième passe, « soucis d'espace sur
   les composants d'actualité »). La grille et son `gap` étaient posés sur
   l'`<article>`, qui n'a qu'UN enfant : le lien qui enveloppe toute
   l'entrée. Le `gap` ne séparait donc rien du tout.

   Ce qu'on voyait à l'écran n'était pas un réglage mais un résidu : zéro
   entre l'image et la pilule de date, zéro entre le titre et l'extrait,
   0,9 em sous les paragraphes par la règle générale, et un demi-cran
   flottant sous la pilule — la place que la hauteur de ligne réserve aux
   jambages sous un `inline-flex`. Quatre valeurs, aucune choisie.

   La grille descend donc sur le LIEN, et les marges de paragraphe se
   taisent à l'intérieur. */
.yk-article {
	min-width: 0;
}

.yk-article > a {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	justify-items: start;
	min-width: 0;
}

.yk-article > a > p {
	margin: 0;
}

/* La une : l'article qui porte la section. Bornée pour les contextes hors
   grille (l'archive), où elle prendrait sinon les 1400 px du conteneur. */
.yk-article--une {
	width: min( 100%, 56rem );
}

/* Son rythme est le sien : à 40 px de titre, le cran de 12 px des cartes
   colle l'extrait sous les descendantes. La photo et l'appel de lecture
   prennent un cran de plus — ce sont les deux bornes du bloc. */
.yk-article--une > a {
	gap: 1rem;
}

.yk-article--une .yk-article__image {
	margin-bottom: 0.375rem;
}

.yk-article--une .yk-article__appel {
	margin-top: 0.375rem;
}

.yk-article--une .yk-article__titre--une {
	font-size: var( --t-titre-fort );
	line-height: 1.05;
}

.yk-article__extrait {
	max-width: 52ch;
}

.yk-article__appel {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* La ligne : vignette carrée arrondie, date, titre. Sert les listes
   latérales — « à côté de la une » et « à lire aussi ». */
.yk-article--ligne a {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.yk-article__vignette {
	flex: none;
	width: 5.5rem;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var( --rayon-image );
}

.yk-article__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var( --duree-ample ) var( --courbe );
}

.yk-article--ligne:hover .yk-article__vignette img {
	transform: scale( 1.05 );
}

.yk-article--ligne__texte {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

/* La composition : la une à gauche, la liste à droite, un fil entre les
   lignes — un fil entre des GROUPES, pas sous chaque ligne. */
.yk-actus {
	display: grid;
	gap: var( --cran-passage );
}

@media ( min-width: 1024px ) {
	.yk-actus {
		/* 7fr/4fr donnait 830 px à la une et 470 px à la liste, pour deux
		   lignes de deux lignes chacune : la colonne droite portait un
		   sixième de la hauteur de la gauche. Le rapport se resserre. */
		grid-template-columns: minmax( 0, 5fr ) minmax( 0, 4fr );
		gap: var( --gouttiere );
		align-items: start;
	}

	/* La photo de une se COUCHE. En 16/10 sur 830 px elle faisait 480 px
	   de haut, et à elle seule elle creusait l'écart avec la colonne de
	   droite : 763 px contre 294. Le 16/9 en rend 80, et la une reste
	   la pièce dominante — c'est son rôle, pas celui d'un mur. */
	.yk-actus .yk-article--une .yk-article__image {
		aspect-ratio: 16 / 9;
	}

	/* Et les lignes prennent du corps. Une vignette de 5,5 rem à côté
	   d'une photo de 700 px se lit comme une note de bas de page. */
	.yk-actus__liste .yk-article__vignette {
		width: 7rem;
	}
}

.yk-actus__liste {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --cran-ligne );
}

.yk-actus__liste > .yk-article {
	width: 100%;
}

.yk-actus__liste .yk-article--ligne + .yk-article--ligne {
	border-top: 1.5px solid color-mix( in srgb, currentColor 30%, transparent );
	padding-top: var( --cran-ligne );
}

/* Le lien d'archive reste DANS LE FLUX, un cran sous la dernière ligne.

   Il a été essayé au pied de la colonne, pour qu'il ferme la piste à la
   hauteur de la une : mesuré, il se retrouvait seul 470 px sous la
   dernière ligne. Un élément échoué au milieu d'un aplat se lit comme un
   oubli, pas comme un repère. Le vide restant est sous la liste, d'un
   seul tenant — et sur ce thème, un champ de couleur EST le support. */
.yk-actus__liste > .yk-bouton {
	margin-top: var( --cran-passage );
}

.yk-article__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var( --rayon-image );
}

.yk-article__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var( --duree-ample ) var( --courbe );
}

.yk-article:hover .yk-article__image img {
	transform: scale( 1.04 );
}

.yk-article__titre {
	font-size: var( --t-sous );
}

.yk-article a {
	text-decoration: none;
}

.yk-article a:hover .yk-article__titre,
.yk-article a:focus-visible .yk-article__titre {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

/* --- La galerie : un escalier qui se replie en diaporama -------------------

   Le diaporama est obligatoire dans tout Style Template (§12, 7 août 2026),
   et deux exigences ne se négocient pas : il fonctionne SANS JavaScript, et
   la lecture automatique s'arrête.

   Sans script, la scène est donc un escalier — toutes les photos visibles,
   en grille décalée. `diapo.js` pose `.yk-diapo--anime` et replie la scène :
   un seul grand tirage à la fois, dont la forme tourne avec le rang. */

.yk-diapo__scene {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --gouttiere );
	margin: 0;
	padding-block: 0;
	padding-inline: max( var( --marge-page ), calc( ( 100% - var( --large-max ) ) / 2 ) );
	list-style: none;
}

@media ( min-width: 768px ) {
	.yk-diapo:not( .yk-diapo--anime ) .yk-diapo__scene {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	/* Un escalier régulier, et non un désordre : une composition qui change
	   d'une visite à l'autre n'est pas un design. */
	.yk-diapo:not( .yk-diapo--anime ) .yk-diapo__vue:nth-child( 4n + 2 ) {
		transform: translateY( 12% );
	}

	.yk-diapo:not( .yk-diapo--anime ) .yk-diapo__vue:nth-child( 4n + 3 ) {
		transform: translateY( -8% );
	}

	.yk-diapo:not( .yk-diapo--anime ) .yk-diapo__vue:nth-child( 4n + 4 ) {
		transform: translateY( 6% );
	}
}

.yk-diapo {
	margin-top: var( --cran-passage );
}

.yk-diapo__vue figure {
	margin: 0;
}

.yk-diapo__vue figcaption {
	margin-top: 0.5rem;
}

/* La scène animée. Les vues s'empilent sur la même cellule et se fondent ;
   la hauteur est celle du tirage, la largeur suit sa forme — c'est le
   format qui change d'une photo à l'autre, pas la photo qui saute. */
.yk-diapo--anime .yk-diapo__scene {
	grid-template-columns: none;
}

.yk-diapo--anime .yk-diapo__vue {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
}

/* Le fondu n'existe qu'APRÈS la première vue posée : au chargement, les
   huit vues passaient 400 ms superposées en semi-transparence, légendes
   mélangées — attrapé sur capture. */
@media ( prefers-reduced-motion: no-preference ) {
	.yk-diapo--anime.est-prete .yk-diapo__vue {
		transition: opacity var( --duree-ample ) linear;
	}
}

.yk-diapo--anime .yk-diapo__vue.est-active {
	opacity: 1;
	pointer-events: auto;
}

.yk-diapo--anime .yk-diapo__vue figure {
	display: grid;
	justify-items: center;
	gap: var( --cran-ligne );
}

/* Hauteur posée, largeur déduite du ratio de la forme. La borne de largeur
   ne mord que sur les petits écrans, où le `cover` du cadre absorbe la
   perte de ratio. */
.yk-diapo--anime .yk-diapo__vue .yk-cadre {
	height: clamp( 18rem, 62vh, 38rem );
	width: auto;
	max-width: 100%;
}

/* Les commandes, révélées par le script. Des commandes : rayon de 8 px,
   comme le veut le verrou de forme. */
.yk-diapo__commandes {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: var( --cran-passage );
}

/* Les trois commandes reprennent la coque cernée du burger et de la croix.
   Elles ne déclarent plus rien : les flèches et le couple lecture/pause
   étaient dessinés à coups de bordures et de triangles, chacun avec son
   propre calage, et aucun ne tombait tout à fait sur la grille du jeu.

   Deux barres quand la lecture tourne, un triangle quand elle est en
   pause : l'icône montre l'ÉTAT, le libellé caché dit l'ACTION. Ce ne
   sont pas la même information — c'est pourquoi les deux existent. */
.yk-diapo__cmd--lecture .yk-diapo__ic-lecture,
.yk-diapo__cmd--lecture.est-en-pause .yk-diapo__ic-pause {
	display: none;
}

.yk-diapo__cmd--lecture.est-en-pause .yk-diapo__ic-lecture {
	display: block;
}

.yk-diapo__etat {
	font-variant-numeric: tabular-nums;
}

/* --- Documents ------------------------------------------------------------ */

.yk-docs {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 52rem;
}

.yk-doc {
	border-top: 1.5px solid currentColor;
	padding-block: var( --cran-ligne );
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.yk-doc:last-child {
	border-bottom: 1.5px solid currentColor;
}

/* Le lien qui télécharge est un BOUTON depuis la quatrième passe (« bien
   en évidence ») : la classe vient du gabarit via `ecole_document_lien()`.
   Ne reste ici que la flèche, qui dit le geste. */
.yk-doc a:not( .yk-bouton ) {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	font-family: var( --pile-texte );
	font-size: var( --t-micro );
	font-weight: var( --gras-micro );
	letter-spacing: var( --lettre-micro );
	text-transform: uppercase;
}

/* La flèche est un MASQUE et non un caractère. Le libellé du lien vient de
   `ecole_document_lien()`, côté plugin : on n'y glisse pas de balise. Le
   masque prend `currentColor`, donc l'encre de la zone, et rend le même
   tracé que le reste du jeu — un « ↓ » typographique changeait de dessin
   et de chasse avec chaque police d'école. */
.yk-doc a::after {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	background: currentColor;
	-webkit-mask: var( --icone-telechargement ) center / contain no-repeat;
	mask: var( --icone-telechargement ) center / contain no-repeat;
	transition: transform var( --duree ) var( --courbe );
}

.yk-doc a:hover::after,
.yk-doc a:focus-visible::after {
	transform: translateY( 0.25rem );
}

/* --- Jalons : le sommaire d'une page longue ------------------------------- */

/* Ce ne sont PAS des appels à l'action, et ils ne doivent pas y
   ressembler : ni plaque, ni gélule, ni cerne. Des liens en registre
   micro, chacun suivi d'un chevron qui dit « ça descend ». La page
   Inscriptions portait à leur place un bouton qui visait la page
   Inscriptions — un cul-de-sac avec l'allure d'une sortie. */
.yk-jalons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-jalon {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	font-family: var( --pile-texte );
	font-size: var( --t-micro );
	font-weight: var( --gras-micro );
	letter-spacing: var( --lettre-micro );
	text-transform: uppercase;
	text-decoration: none;
}

/* Le soulignement porte sur le LIBELLÉ seul : passé sous le chevron, il
   le barrait. */
.yk-jalon span {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
	text-decoration-color: color-mix( in srgb, currentColor 35%, transparent );
	transition: text-decoration-color var( --duree-vive ) linear;
}

.yk-jalon:hover span,
.yk-jalon:focus-visible span {
	text-decoration-color: currentColor;
}

.yk-jalon .yk-icone {
	transition: transform var( --duree-vive ) var( --courbe );
}

.yk-jalon:hover .yk-icone {
	transform: translateY( 0.15rem );
}

/* --- Étapes numérotées ---------------------------------------------------- */

/* Le numéro est ici une information : une inscription se fait dans cet
   ordre. Ailleurs dans le thème, rien n'est numéroté. */
.yk-etapes {
	counter-reset: etape;
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 52rem;
}

.yk-etape {
	counter-increment: etape;
	display: grid;
	grid-template-columns: 3rem minmax( 0, 1fr );
	gap: 0 1.25rem;
	padding-block: var( --cran-passage );
	border-top: 1.5px solid currentColor;
}

.yk-etape:last-child {
	border-bottom: 1.5px solid currentColor;
}

.yk-etape::before {
	content: counter( etape, decimal-leading-zero );
	font-family: var( --pile-titre );
	font-size: var( --t-sous );
	font-weight: var( --gras-titre );
	font-variant-numeric: tabular-nums;
}

/* --- Équipe --------------------------------------------------------------- */

/* Une école qui n'a saisi qu'UN membre d'équipe voyait son portrait
   prendre les 1320 px de la piste unique : un visage en cercle de 1320 px
   de diamètre, vu sur la capture d'Emilien.

   La grille garde `auto-fit` — c'est la fiche qui se BORNE, pas la piste.
   `auto-fill` a été essayé d'abord et corrigeait bien le portrait, mais
   il enfermait la fiche unique dans une piste de 186 px : le nom, la
   fonction et la biographie s'y cassaient en quatre lignes avec 1200 px
   de vide à côté. Borner la fiche règle les deux cas d'un coup — un seul
   membre tient dans une colonne lisible, six se rangent côte à côte. */
.yk-equipe {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
	gap: var( --gouttiere );
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-fiche {
	display: grid;
	gap: 0.5rem;
	justify-items: start;
	min-width: 0;
	max-width: 20rem;
}

/* Second verrou, indépendant du nombre de pistes : un portrait ne dépasse
   pas cette taille, quoi qu'il arrive à la grille au-dessus. */
.yk-fiche__portrait,
.yk-fiche__sans-portrait {
	width: 100%;
	max-width: 13rem;
}

/* Le membre sans photo : la même rondelle que les autres, avec une
   silhouette dedans. Un trou dans une rangée de portraits se lit comme un
   défaut ; une silhouette se lit comme « pas de photo ». */
.yk-fiche__sans-portrait {
	display: grid;
	place-items: center;
	color: color-mix( in srgb, var( --zone-texte ) 45%, transparent );
}

.yk-fiche__sans-portrait .yk-icone {
	width: 40%;
	height: 40%;
}

/* --- Menu de la cantine ---------------------------------------------------

   Une colonne par jour, un plat par ligne : depuis le 13 septembre 2026, un
   jour est un texte (BLUEPRINT §12). Les colonnes gardent l'affiche du
   tableau qu'elles remplacent — le nom du jour en titre, les filets de
   1,5 px à la couleur de la zone — et replient d'elles-mêmes sur téléphone,
   où le tableau défilait de côté. */

.yk-menu-jours {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 10rem, 1fr ) );
	gap: var( --cran-ligne ) 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-menu-jour__nom {
	margin: 0;
	padding-bottom: var( --cran-ligne );
	border-bottom: 1.5px solid currentColor;
	font-family: var( --pile-titre );
	font-size: var( --t-sous );
	font-weight: var( --gras-titre );
	letter-spacing: var( --lettre-titre );
}

.yk-menu-jour__plats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-menu-jour__plats li {
	padding: var( --cran-ligne ) 0;
	border-bottom: 1.5px solid color-mix( in srgb, currentColor 25%, transparent );
}

/* --- Les menus, semaine par semaine ---------------------------------------

   Cinq semaines au plus, une par onglet (BLUEPRINT §12, 12 septembre 2026).
   L'onglet est une COMMANDE : rayon de 8 px, jamais le rayon plein, qui
   dit « jeton » et reste aux étiquettes. Ajouré au repos, en aplat quand
   sa semaine est ouverte — et les deux états prennent les couleurs de la
   ZONE, parce que `gouache_fond()` peut poser cette bande sur n'importe
   quel aplat du cycle. L'accent n'y porte aucun texte.

   SANS JAVASCRIPT, la barre reste cachée et les semaines s'empilent, chacune
   sous son étiquette. `yk-js` est posée sur `<html>` en tête de page, AVANT
   le premier rendu : posée par un script différé, elle replierait sous les
   yeux du visiteur des semaines déjà peintes. */

.yk-menus-onglets {
	display: none;
}

.yk-js .yk-menus-onglets {
	display: flex;
	gap: 0.625rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	/* Le contour de focus sort de 6 px : une boîte qui défile le rognerait.
	   Le rembourrage lui laisse sa place ; la marge négative et la largeur
	   compensée rendent l'alignement sur le titre. Largeur EXPLICITE : une
	   `.yk-pile` n'étire pas ses enfants. */
	width: calc( 100% + 1rem );
	margin: -0.5rem;
	padding: 0.5rem;
}

.yk-menus-onglet {
	flex: none;
	min-height: 2.75rem;
	padding: 0.625rem 1.125rem;
	border: 0;
	border-radius: var( --rayon-commande );
	background: transparent;
	color: var( --zone-texte );
	box-shadow: inset 0 0 0 1.5px var( --zone-texte );
	font-family: var( --pile-texte );
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var( --duree-vive ) var( --courbe ),
		color var( --duree-vive ) var( --courbe ),
		transform var( --duree-vive ) var( --courbe );
}

.yk-menus-onglet:hover {
	background: color-mix( in srgb, var( --zone-texte ) 12%, transparent );
}

.yk-menus-onglet:active {
	transform: translateY( 1px );
}

.yk-menus-onglet[aria-selected="true"] {
	background: var( --zone-texte );
	color: var( --zone-fond );
}

.yk-menus-semaine__titre {
	margin: 0 0 var( --cran-ligne );
}

/* UN ENFANT DE `.yk-pile` NE RÉTRÉCIT PAS SOUS SON CONTENU. La pile est une
   grille à piste `auto` : sans `min-width: 0`, la semaine prenait la
   largeur minimale de son tableau (34 rem) et la page débordait sur
   téléphone — mesuré en émulation à 375 px, la fenêtre de mise en page
   s'élargissait à 617. Les jours sont en liste depuis le 13 septembre
   2026 ; la règle reste, le prochain contenu large ferait pareil. */
.yk-menus-semaine {
	min-width: 0;
}

.yk-js .yk-menus--onglets .yk-menus-semaine__titre,
.yk-js .yk-menus--onglets .yk-menus-semaine:not( .est-ouverte ) {
	display: none;
}

/* --- Logos partenaires ---------------------------------------------------- */

/* Des logos, et rien d'autre : pas d'étiquette de catégorie sous chacun.
   Le logo EST la crédibilité, le libellé n'ajoute rien que le lecteur ne
   sache déjà. */
.yk-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --gouttiere );
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-logos img {
	max-height: 3.5rem;
	width: auto;
}

/* --- Citation ------------------------------------------------------------- */

.yk-citation {
	margin: 0;
	max-width: 24ch;
}

.yk-citation figcaption {
	margin-top: var( --cran-passage );
}

/* La citation à l'échelle de l'AFFICHE. Au cran de titre et sur 24ch,
   elle faisait trois lignes en haut à gauche d'une bande pleine : la
   section la plus vide de l'accueil. À cette échelle, la phrase remplit
   sa bande toute seule — c'est le langage d'affiche du thème, employé là
   où il y a vraiment une déclaration à porter, et une seule fois par
   page.

   La largeur est EXPLICITE, en rem, et posée sur la FIGURE. Trois pièges
   payés l'un après l'autre pour en arriver là, tous vus sur capture :

   - `max-width` en `ch` sur la figure valait 18 fois le « 0 » du corps à
     18 px, soit 162 px, pendant que le texte était rendu à 60 px. Les
     mots ne tenaient plus dans la ligne et `overflow-wrap` les coupait
     en deux : « ensembl / e » ;
   - remise en `ch` sur le blocquote, elle restait fausse : `ch` ne tient
     pas compte de `font-stretch`, et 22ch valaient 330 px au lieu des
     570 attendus ;
   - en `min( 100%, 38rem )`, elle ne s'appliquait plus du tout. La
     figure est dans une `.yk-pile`, qui aligne ses enfants sans les
     étirer : sa largeur se déduit de son contenu, et un pourcentage
     calculé sur une largeur elle-même déduite du contenu ne résout rien.

   C'est le piège que le portrait en cercle du duo avait déjà payé, et il
   se dit en une phrase : face à une largeur déduite, il faut une largeur
   explicite. */
.yk-citation--affiche {
	width: 100%;
	max-width: 38rem;
}

.yk-citation--affiche .yk-citation__texte {
	font-size: clamp( 2rem, 5.2vw, 3.75rem );
	font-stretch: var( --chasse-affiche );
	font-weight: var( --gras-affiche );
	line-height: 1.04;
	text-wrap: balance;
}

/* La note, en étoiles pleines ; la vide reste dessinée, estompée. */
.yk-note {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
}

.yk-note .yk-etoile {
	width: 1rem;
	height: 1rem;
}

.yk-note .yk-etoile--vide {
	opacity: 0.28;
}

/* --- Le formulaire de contact : celui de Contact Form 7 -------------------

   Le formulaire est une DONNÉE du site, résolu et garanti en français par
   le plugin (`ecole_formulaire_contact()`, BLUEPRINT §12, 13 septembre
   2026) ; le formulaire maison de la onzième passe est retiré. Chaque site
   a son gabarit, donc la feuille habille les classes de Contact Form 7 et
   JAMAIS celles d'un gabarit. Une seule exception, `.yk-duo`, que le
   gabarit du plugin pose autour des deux champs courts ; sans elle, un
   champ par ligne.

   Ce que la onzième passe avait réglé tient : une colonne sur téléphone,
   les champs courts par paire au-dessus de 768 px, et 46 rem au plus —
   au-delà, un champ devient une piste où l'œil perd le début de sa
   ligne. */

.wpcf7 {
	width: 100%;
	max-width: 46rem;
}

.wpcf7-form {
	display: grid;
	gap: var( --cran-ligne );
}

/* `wpautop` enveloppe chaque libellé dans un paragraphe : c'est la grille
   qui espace, et la mesure de lecture n'a rien à borner ici. */
.wpcf7-form p {
	margin: 0;
	max-width: none;
}

/* `.yk-duo` est AUSSI le duo texte/image du thème, qui porterait ici sa
   gouttière de section, l'étirement de sa piste et son centrage. Dans le
   formulaire, il ne garde que la paire. (0,2,0) : au-dessus du duo, quel
   que soit l'ordre du fichier. */
.wpcf7-form .yk-duo {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --cran-ligne );
	align-items: start;
}

@media ( min-width: 768px ) {
	.wpcf7-form .yk-duo {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --cran-ligne ) var( --gouttiere );
	}
}

/* Le libellé est AU-DESSUS du champ, en texte courant : un parent le lit,
   il ne le déchiffre pas. */
.wpcf7-form label {
	display: block;
	font-weight: 600;
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.5rem;
}

/* Le champ reprend celui du thème : un aplat crème à 8 px de rayon. Son
   filet est d'ENCRE et non de zone, parce que le champ est crème sur toutes
   les bandes et que c'est contre lui que le filet doit se voir. */
.wpcf7-form input.wpcf7-form-control:not( .wpcf7-submit ),
.wpcf7-form textarea.wpcf7-form-control,
.wpcf7-form select.wpcf7-form-control {
	display: block;
	width: 100%;
	padding: 0.9375rem 1.25rem;
	border: 0;
	border-radius: var( --rayon-commande );
	background: var( --ecole-fond );
	color: var( --ecole-texte );
	font: inherit;
	font-weight: 400;
	box-shadow: inset 0 0 0 1.5px var( --ecole-texte );
}

.wpcf7-form textarea.wpcf7-form-control {
	min-height: 9rem;
	resize: vertical;
}

/* Le champ refusé double son filet. La couleur ne dit rien seule : c'est
   le message dessous qui informe, et le filet le relie à son champ.
   (0,3,1), comme la règle du champ, et placée après elle : écrite en
   (0,3,0), elle perdait, et le champ refusé gardait son filet simple. */
.wpcf7-form input.wpcf7-form-control.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-form-control.wpcf7-not-valid,
.wpcf7-form select.wpcf7-form-control.wpcf7-not-valid {
	box-shadow: inset 0 0 0 3px var( --ecole-texte );
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: 0.5rem;
	color: inherit;
	font-size: var( --t-corps );
	font-weight: 600;
}

/* Le bouton d'envoi partage les règles de `.yk-bouton` (section 6) ; il ne
   précise ici que sa ZONE, comme le bouton de document. */
.wpcf7-form .wpcf7-submit {
	--face: var( --zone-texte );
	--encre-face: var( --zone-fond );
	appearance: none;
}

/* La roue d'attente suit sa zone : grise, elle disparaissait sur l'encre. */
.wpcf7-form .wpcf7-spinner {
	background-color: var( --zone-texte );
	vertical-align: middle;
}

.wpcf7-form .wpcf7-spinner::before {
	background-color: var( --zone-fond );
}

/* Le retour d'envoi. Un filet et un retrait, jamais une boîte : la règle 1
   vaut ici comme ailleurs, et il suit sa ZONE. (0,3,1), comme les règles
   d'état de Contact Form 7, dont la feuille passe avant celle du thème :
   leurs bordures bleue, verte, jaune ou rouge ne reviennent pas. */
.wpcf7 form.wpcf7-form .wpcf7-response-output {
	margin: var( --cran-ligne ) 0 0;
	padding: 0.25rem 0 0.25rem var( --cran-ligne );
	border: 0;
	border-left: 4px solid currentColor;
	font-family: var( --pile-titre );
	font-size: var( --t-sous );
	font-weight: var( --gras-titre );
	letter-spacing: var( --lettre-titre );
	line-height: 1.3;
}

.yk-carte-enveloppe {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var( --rayon-image );
}

.yk-carte-enveloppe iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* --- Pagination ----------------------------------------------------------- */

.yk-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var( --cran-bande );
}

.yk-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: 0.75rem;
	border-radius: var( --rayon-plein );
	box-shadow: inset 0 0 0 1.5px currentColor;
	text-decoration: none;
	font-family: var( --pile-texte );
	font-size: var( --t-micro );
	font-weight: var( --gras-micro );
	letter-spacing: var( --lettre-micro );
}

.yk-pagination .page-numbers.current {
	background: var( --zone-texte );
	color: var( --zone-fond );
}


/* ==========================================================================
   12. UTILITAIRES ET COMPOSANTS DE PAGE
   ========================================================================== */

/* Un enfant de `.yk-pile` est aligné à gauche et ne s'étire pas : c'est ce
   qu'on veut pour un titre, jamais pour une grille. Cette classe le dit
   explicitement plutôt que de désactiver `justify-items` au cas par cas. */
.yk-pleine-largeur {
	width: 100%;
	justify-self: stretch;
}

/* LES BLOCS BORNÉS PRENNENT LEUR BORNE (sixième passe). Chacun portait un
   `max-width` mais aucune largeur : dans une `.yk-pile`, qui aligne ses
   enfants à gauche sans les étirer, ils se rétractaient sur leur contenu.
   La FAQ, bornée à 52 rem, était rendue à 585 px — la largeur de sa plus
   longue question — et les 800 px restants de la bande ne portaient rien.
   C'est une bonne part de ce que « ça fait vide » désignait, et ça se
   corrige en un endroit plutôt qu'en huit. */
.yk-details,
.yk-docs,
.yk-etapes,
.yk-chrono,
.yk-lignes,
.yk-lecture,
.yk-menu-jours {
	width: 100%;
}

/* Une colonne de lecture : un document se lit, il ne s'étale pas sur les
   1400 px du conteneur. Sert l'article seul. */
.yk-lecture {
	max-width: 56rem;
}

.yk-etoile--marqueur {
	width: 2rem;
	height: 2rem;
}

/* Le marqueur qui ouvre un bloc de valeur ou de spécificité. Il tourne
   par rang (`gouache_marqueur()`) : cinq blocs portaient cinq fois la
   même étoile, et cinq marqueurs identiques ne marquent rien. */
.yk-marqueur {
	width: 2rem;
	height: 2rem;
}

.yk-marqueur-icone {
	max-width: 3.5rem;
}

.yk-portrait {
	max-width: 22rem;
	width: 100%;
}

.yk-signature {
	max-width: 12rem;
}

/* Un `.yk-micro` glissé dans un titre est une précision, pas un second
   titre : il se pose sous la ligne plutôt que de la couper. */
.yk-titre > .yk-micro,
.yk-sous-titre > .yk-micro {
	display: block;
	margin-top: 0.4rem;
}

/* --- Chronologie ---------------------------------------------------------- */

/* L'année mène, l'événement suit. Le trait sépare les entrées ici, et non
   les groupes : une chronologie EST une suite de lignes, c'est le seul
   endroit du thème où le filet par ligne dit quelque chose. */
.yk-chrono {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 52rem;
}

.yk-chrono__ligne {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem;
	padding-block: var( --cran-ligne );
	border-top: 1.5px solid currentColor;
}

.yk-chrono__ligne:last-child {
	border-bottom: 1.5px solid currentColor;
}

@media ( min-width: 560px ) {
	.yk-chrono__ligne {
		grid-template-columns: 7rem minmax( 0, 1fr );
		gap: 0 1.5rem;
		align-items: baseline;
	}
}

.yk-chrono__annee {
	font-family: var( --pile-titre );
	font-size: var( --t-sous );
	font-weight: var( --gras-titre );
	font-variant-numeric: tabular-nums;
	letter-spacing: var( --lettre-titre );
}

/* --- Document présenté avec son texte ------------------------------------- */

.yk-doc--riche {
	display: grid;
	gap: var( --cran-ligne );
	justify-items: start;
	padding-block: var( --cran-passage );
}

/* --- Recherche ------------------------------------------------------------ */

.yk-recherche {
	display: grid;
	gap: 0.5rem;
	max-width: 34rem;
	width: 100%;
}

.yk-recherche__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.yk-recherche .yk-champ {
	flex: 1 1 12rem;
	min-width: 0;
}

/* --- Coordonnées ---------------------------------------------------------- */

/* REFAITES le 26 août 2026 (sixième passe). C'était une liste
   intitulé-à-gauche / valeur-à-droite, bornée à 47 rem : sur une bande
   pleine, les 900 px restants du conteneur ne portaient rien, et l'œil
   devait traverser la ligne pour relier « TÉLÉPHONE » à son numéro.

   Maintenant des blocs à icône, en grille qui prend toute la largeur.
   L'intitulé est SOUS l'icône et AU-DESSUS de sa valeur : les trois
   tiennent dans un même regard. C'est aussi l'endroit du thème où les
   icônes servent le plus — chacune nomme ce que la ligne contient. */
.yk-coordonnees {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: var( --cran-passage ) var( --gouttiere );
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-coord {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 0.875rem;
	align-items: start;
	min-width: 0;
}

/* L'icône est estompée : elle repère la ligne, elle ne la concurrence
   pas. Pleine encre, six icônes alignées faisaient une colonne de
   pictogrammes plus visible que les coordonnées elles-mêmes. */
.yk-coord__icone {
	margin-top: 0.15rem;
	opacity: 0.7;
}

.yk-coord__corps {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.yk-coord__valeur {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

a.yk-coord__valeur {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}


/* --- Cibles de pointage --------------------------------------------------- */

/* WCAG 2.5.8 demande 24 x 24 px pour une cible, hors lien inséré dans une
   phrase. Les liens de pied et la marque ne sont pas dans une phrase : ce
   sont des cibles de navigation, et mesurés à 18 px ils étaient sous le
   seuil. Ils ne le sont plus.

   Le seuil retenu est 2,75 rem et non 24 px : c'est la valeur que tiennent
   déjà le bouton, la pilule et le lien de document, et un parc de cibles
   de deux hauteurs différentes se voit. */
.yk-marque,
.yk-pied__liens a {
	min-height: 2.75rem;
}

.yk-pied .yk-micro a,
.yk-prose a {
	display: inline-block;
	min-height: 1.5rem;
	padding-block: 0.35rem;
}

/* Au-dessus du téléphone, l'ardoise retrouve sa page : le retrait de 6 px
   revient, et la marge de page redescend à la référence du parc — celle
   d'Étoile. Le rayon, lui, vaut 32 px à toutes les largeurs. */
@media ( min-width: 560px ) {
	:root {
		--marge-page: clamp( 1.25rem, 4vw, 2.5rem );
		--retrait-ardoise: clamp( 0.375rem, 0.8vw, 0.75rem );
	}
}

@media ( min-width: 1440px ) {
	:root {
		--marge-page: 3rem;
	}
}