/*
Theme Name: Yukademia Etoile
Theme URI: https://github.com/yukademia/yukademia-theme-etoile
Author: Yukademia
Description: Style Template du système Blueprint. Galets, pilules et coiffe glacée : une page qui se lit en zigzag. Requiert le plugin yukademia-core.
Version: 1.4.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: yukademia-theme-etoile
*/

/* =========================================================================
   ÉTOILE

   Trois principes, et tout le reste en découle :

   1. LA COIFFE. Chaque page s'ouvre sur un bandeau glacé aux angles bas
      arrondis, qui porte la barre d'en-tête abricot. Le reste de la page
      est crème. Il n'y a jamais de deuxième bandeau.
   2. LE ZIGZAG. La forme par défaut d'une section est un rang de deux
      pistes, texte et image, dont le côté alterne. L'alternance vient
      d'un compteur PHP qui n'avance qu'au rendu réel — une section vide
      ne consomme pas son tour.
   3. LE GALET. Toute photographie est masquée par un rayon organique.
      UNE forme pour tout le site — la bulle — qui se reflète quand le
      rang s'inverse. Le pétale est réservé aux actualités : c'est la
      seule variation, et elle veut dire quelque chose.

   Les couleurs et les polices arrivent en variables `--ecole-*`,
   injectées par le plugin à wp_head priorité 99, donc APRÈS cette
   feuille. Les valeurs ci-dessous sont des REPLIS : un site sans
   réglages doit afficher le design complet.
   ====================================================================== */


/* -------------------------------------------------------------------------
   Polices — les dix familles de la liste fermée, auto-hébergées.

   Jamais Google Fonts : ce sont des sites d'écoles primaires, donc des
   données d'enfants, et un appel à un CDN tiers est un transfert de
   données que la CNIL a déjà sanctionné.

   400, 500 et 700 pour chacune, plus l'italique 400 — Bricolage
   Grotesque n'a pas d'italique, et il ne faut pas compter dessus.
   Le thème n'affiche AUCUN autre poids : demander un 600 ferait
   remonter la correspondance au 700 en silence.
   ---------------------------------------------------------------------- */

@font-face { font-family: 'Bricolage Grotesque'; src: url( assets/fonts/bricolage-grotesque-latin-400-normal.woff2 ) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url( assets/fonts/bricolage-grotesque-latin-500-normal.woff2 ) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url( assets/fonts/bricolage-grotesque-latin-700-normal.woff2 ) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'DM Sans'; src: url( assets/fonts/dm-sans-latin-400-normal.woff2 ) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url( assets/fonts/dm-sans-latin-500-normal.woff2 ) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url( assets/fonts/dm-sans-latin-700-normal.woff2 ) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url( assets/fonts/dm-sans-latin-400-italic.woff2 ) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'EB Garamond'; src: url( assets/fonts/eb-garamond-latin-400-normal.woff2 ) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url( assets/fonts/eb-garamond-latin-500-normal.woff2 ) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url( assets/fonts/eb-garamond-latin-700-normal.woff2 ) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url( assets/fonts/eb-garamond-latin-400-italic.woff2 ) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'Figtree'; src: url( assets/fonts/figtree-latin-400-normal.woff2 ) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url( assets/fonts/figtree-latin-500-normal.woff2 ) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url( assets/fonts/figtree-latin-700-normal.woff2 ) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url( assets/fonts/figtree-latin-400-italic.woff2 ) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'Inter'; src: url( assets/fonts/inter-latin-400-normal.woff2 ) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url( assets/fonts/inter-latin-500-normal.woff2 ) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url( assets/fonts/inter-latin-700-normal.woff2 ) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url( assets/fonts/inter-latin-400-italic.woff2 ) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'Libre Baskerville'; src: url( assets/fonts/libre-baskerville-latin-400-normal.woff2 ) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; src: url( assets/fonts/libre-baskerville-latin-500-normal.woff2 ) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; src: url( assets/fonts/libre-baskerville-latin-700-normal.woff2 ) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; src: url( assets/fonts/libre-baskerville-latin-400-italic.woff2 ) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'Lora'; src: url( assets/fonts/lora-latin-400-normal.woff2 ) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url( assets/fonts/lora-latin-500-normal.woff2 ) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url( assets/fonts/lora-latin-700-normal.woff2 ) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url( assets/fonts/lora-latin-400-italic.woff2 ) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'Nunito Sans'; src: url( assets/fonts/nunito-sans-latin-400-normal.woff2 ) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url( assets/fonts/nunito-sans-latin-500-normal.woff2 ) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url( assets/fonts/nunito-sans-latin-700-normal.woff2 ) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url( assets/fonts/nunito-sans-latin-400-italic.woff2 ) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'Playfair Display'; src: url( assets/fonts/playfair-display-latin-400-normal.woff2 ) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url( assets/fonts/playfair-display-latin-500-normal.woff2 ) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url( assets/fonts/playfair-display-latin-700-normal.woff2 ) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url( assets/fonts/playfair-display-latin-400-italic.woff2 ) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'Work Sans'; src: url( assets/fonts/work-sans-latin-400-normal.woff2 ) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url( assets/fonts/work-sans-latin-500-normal.woff2 ) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url( assets/fonts/work-sans-latin-700-normal.woff2 ) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url( assets/fonts/work-sans-latin-400-italic.woff2 ) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }


/* -------------------------------------------------------------------------
   Variables
   ---------------------------------------------------------------------- */

:root {
	--ecole-primaire:    #27505e;
	--ecole-secondaire:  #e7f7fc;
	--ecole-accent:      #ffc26f;
	--ecole-fond:        #f8f5ee;
	--ecole-texte:       #1d3b46;
	--ecole-font-titre:  'Figtree';
	--ecole-font-texte:  'Figtree';

	--pile-titre: var( --ecole-font-titre ), 'Figtree', 'Segoe UI', system-ui, sans-serif;
	--pile-texte: var( --ecole-font-texte ), 'Figtree', 'Segoe UI', system-ui, sans-serif;

	/* Encre LOCALE. Une section qui renverse le rapport clair/sombre
	   redéclare ces trois variables au lieu de surcharger les règles :
	   le composant ne sait pas dans quel conteneur il finira, et le
	   conteneur ne sait pas ce que le composant a prévu. */
	--encre:        var( --ecole-texte );
	--encre-douce:  rgba( 29, 59, 70, .68 );
	--trait:        rgba( 29, 59, 70, .16 );
	--trait-fort:   rgba( 29, 59, 70, .34 );

	--btn-fond:  var( --ecole-primaire );
	--btn-encre: var( --ecole-fond );

	--voile-image: rgba( 29, 59, 70, .08 );

	/* Même tracé que `etoile_icone( 'telecharger' )`, en masque CSS. Deux
	   écritures d'un même dessin, et c'est assumé : le PHP sert là où le
	   thème compose son balisage, le masque là où le balisage vient du
	   plugin et passe par `esc_html()`. */
	--icone-telecharger: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='m8 11 4 4 4-4'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E" );

	--largeur:    71.25rem;
	--gouttiere:  clamp( 1.25rem, 4vw, 2.5rem );

	--pas-serre:  clamp( 2.5rem, 5vw, 3.75rem );
	--pas:        clamp( 3.75rem, 7vw, 6.5rem );
	--pas-ample:  clamp( 5.5rem, 10vw, 9rem );

	--r-pilule:   999px;
	--r-bouton:   .7rem;
	--r-carte:    1.5rem;
	--r-panneau:  2.25rem;
	--r-coiffe:   clamp( 1.75rem, 4vw, 3.25rem );
	--r-barre:    1.25rem;

	--t-titre-page: clamp( 2.4rem, 1.3rem + 4.4vw, 4.25rem );
	--t-h2:         clamp( 1.7rem, 1.15rem + 2.3vw, 2.6rem );
	--t-h3:         clamp( 1.18rem, 1rem + .8vw, 1.5rem );
	--t-corps:      clamp( 1rem, .96rem + .18vw, 1.0625rem );
	--t-petit:      .875rem;
	--t-mini:       .78rem;

	--hauteur-photo: 4 / 3;
}

/* Les teintes dérivées suivent l'encre de l'école quand le navigateur
   sait les calculer. Sans `color-mix`, les valeurs statiques ci-dessus
   tiennent — elles sont justes pour la palette par défaut, et lisibles
   pour toute encre foncée. */
@supports ( color: color-mix( in srgb, red 50%, blue ) ) {
	:root {
		--encre-douce: color-mix( in srgb, var( --ecole-texte ) 72%, transparent );
		--trait:       color-mix( in srgb, var( --ecole-texte ) 16%, transparent );
		--trait-fort:  color-mix( in srgb, var( --ecole-texte ) 34%, transparent );
		--voile-image: color-mix( in srgb, var( --ecole-texte ) 8%, transparent );
	}
}


/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var( --ecole-fond );
	color: var( --encre );
	font-family: var( --pile-texte );
	font-size: var( --t-corps );
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

img {
	height: auto;
}

h1, h2, h3, h4 {
	font-family: var( --pile-titre );
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0;
	color: var( --encre );
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

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

a {
	color: inherit;
}

:focus-visible {
	outline: 3px solid var( --ecole-primaire );
	outline-offset: 3px;
	border-radius: 2px;
}

.sur-sombre :focus-visible,
.pied :focus-visible {
	outline-color: var( --ecole-accent );
}

.lecteur-seul {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.icone {
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: -.14em;
}


/* -------------------------------------------------------------------------
   Mise en page
   ---------------------------------------------------------------------- */

.enveloppe {
	width: min( 100% - 2 * var( --gouttiere ), var( --largeur ) );
	margin-inline: auto;
}

.section {
	padding-block: var( --pas );
}

/* Une ancre atteinte colle au bord haut de la fenêtre. Le dégagement se
   pose sur la CIBLE, pas sur le défilement du document : c'est la seule
   forme qui vaille aussi pour un lien arrivé de l'extérieur. */
[id] {
	scroll-margin-top: clamp( 1rem, 3vw, 2rem );
}

.section--serre {
	padding-block: var( --pas-serre );
}

.section--ample {
	padding-block: var( --pas-ample );
}

.section--haut-nul {
	padding-top: 0;
}

.entete-section {
	max-width: 44rem;
	margin-bottom: clamp( 2rem, 4vw, 3rem );
}

.entete-section--centre {
	margin-inline: auto;
	text-align: center;
}

.titre-page {
	font-size: var( --t-titre-page );
	line-height: 1.02;
}

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

.titre-bloc {
	font-size: var( --t-h3 );
	line-height: 1.2;
}

.chapeau {
	margin-top: 1.1rem;
	color: var( --encre-douce );
	max-width: 40rem;
}

.entete-section--centre .chapeau {
	margin-inline: auto;
}

/* Le zigzag. Deux pistes à partir de 768 px, et le média change de côté
   un rang sur deux — l'alternance est décidée en PHP, au rendu réel. */
.rang {
	display: grid;
	gap: clamp( 1.75rem, 4vw, 3.5rem );
	align-items: center;
}

.rang + .rang {
	margin-top: var( --pas );
}

.rang__texte > * + * {
	margin-top: 1.1rem;
}

.rang__media {
	min-width: 0;
}

/* Un rang sans image ne laisse pas une demi-page vide : il repasse sur
   une piste, et c'est sa POSITION qui continue l'alternance. Il reste
   ÉTROIT — pleine largeur, une ligne de titre et deux de texte flottent
   dans le vide — et se resserre quand deux se suivent. */
.rang--seul .rang__texte {
	max-width: 34rem;
}

.rang--seul + .rang--seul {
	margin-top: var( --pas-serre );
}

/* `align-items: center` est juste pour un texte face à une image, et
   faux dès que la seconde piste est une pile : le texte se met alors à
   flotter au milieu d'une colonne trois fois plus haute que lui. */
.rang--haut {
	align-items: start;
}

.duo {
	display: grid;
	gap: clamp( 1.5rem, 3vw, 2.5rem );
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}



/* -------------------------------------------------------------------------
   Renversements clair / sombre
   ---------------------------------------------------------------------- */

.sur-sombre {
	--encre:       var( --ecole-fond );
	--encre-douce: rgba( 255, 255, 255, .78 );
	--trait:       rgba( 255, 255, 255, .2 );
	--trait-fort:  rgba( 255, 255, 255, .4 );
	--btn-fond:    var( --ecole-accent );
	--btn-encre:   var( --ecole-texte );

	background: var( --ecole-primaire );
	color: var( --encre );
}

.sur-accent {
	--encre:       var( --ecole-texte );
	--encre-douce: rgba( 29, 59, 70, .74 );
	--btn-fond:    var( --ecole-primaire );
	--btn-encre:   var( --ecole-fond );

	background: var( --ecole-accent );
	color: var( --encre );
}

.sur-glace {
	--encre: var( --ecole-texte );

	background: var( --ecole-secondaire );
	color: var( --encre );
}


/* -------------------------------------------------------------------------
   Composants — pilule, bouton, galet
   ---------------------------------------------------------------------- */

.pilule {
	display: inline-block;
	margin: 0 0 1rem;
	padding: .42rem 1.05rem;
	border-radius: var( --r-pilule );
	background: var( --ecole-accent );
	color: var( --ecole-texte );
	font-size: var( --t-mini );
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.35;
}

.sur-accent .pilule {
	background: var( --ecole-fond );
}

.pilule--index {
	font-family: var( --pile-titre );
	font-size: .8rem;
	letter-spacing: .04em;
	padding-inline: .85rem;
}

.bouton {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .8rem 1.35rem;
	border: 1.5px solid transparent;
	border-radius: var( --r-bouton );
	font-family: var( --pile-texte );
	font-size: var( --t-petit );
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s ease, background-color .16s ease, color .16s ease;
}

.bouton:hover {
	transform: translateY( -2px );
}

.bouton--primaire {
	background: var( --btn-fond );
	color: var( --btn-encre );
}

.bouton--accent {
	background: var( --ecole-accent );
	color: var( --ecole-texte );
}

.bouton--contour {
	border-color: var( --trait-fort );
	color: var( --encre );
}

.bouton--contour:hover {
	border-color: var( --encre );
}

.bouton--texte {
	padding-inline: .25rem;
	background: none;
	color: var( --encre );
}

.bouton--texte:hover {
	text-decoration: underline;
	text-underline-offset: .3em;
}

/* L'icône de téléchargement s'accroche à l'ATTRIBUT, pas à une classe :
   tout lien qui déclenche un téléchargement la porte, d'où qu'il vienne
   — et il n'y a pas d'autre voie. `ecole_document_lien()` passe son
   libellé à `esc_html()`, donc un SVG glissé dedans s'afficherait en
   toutes lettres.

   Posée en masque sur `currentColor` plutôt qu'en image : elle suit alors
   la couleur du texte, et reste juste sur l'abricot comme sur l'aplat
   profond, sans qu'aucune règle de bouton ait à la connaître. */
/* Sous garde : sans masque, `background-color` peindrait un carré plein
   de la couleur du texte. **Une icône absente passe inaperçue, un carré
   noir non** — et c'est la seule des deux qui ressemble à une panne. */
@supports ( ( mask-image: none ) or ( -webkit-mask-image: none ) ) {

	a[download]::before {
		content: "";
		display: inline-block;
		width: 1.05em;
		height: 1.05em;
		flex: none;
		vertical-align: -.16em;
		background-color: currentColor;
		-webkit-mask: var( --icone-telecharger ) center / contain no-repeat;
		mask: var( --icone-telecharger ) center / contain no-repeat;
	}

	/* Dans un bouton, l'écart vient du `gap` du conteneur ; dans une
	   phrase, il n'y a rien pour l'écarter du mot qui suit. */
	.prose a[download]::before {
		margin-right: .35em;
	}
}

/* Le galet. UNE forme pour tout le site — la bulle — et son reflet quand
   le rang s'inverse : la courbe penche du même côté que la mise en page,
   au lieu de changer de nature d'une image à l'autre.

   Il y avait quatre masques tirés d'un `crc32( graine )`, deux ovales et
   deux pétales. Le tirage était stable — la même page rendait la même
   forme à chaque visite — mais RIEN NE LE RENDAIT LISIBLE : deux
   actualités voisines recevaient l'une une ellipse, l'autre un pétale,
   et le lecteur y voyait une hésitation, pas une intention. Une seule
   forme répétée devient une signature ; quatre formes distribuées au
   hasard ne sont qu'un bruit de fond.

   Le pétale est conservé, mais il ne circule plus : il est RÉSERVÉ aux
   actualités. C'est ce qui distingue une photo d'article d'une photo de
   page, sans qu'aucun libellé n'ait à le dire. */
/* Le fond d'attente est un VOILE d'encre, pas la couleur glace : posé en
   glace, il disparaissait sur la coiffe, qui est glace aussi — et une
   image qui ne charge pas ressemblait alors à une section absente. Léger,
   parce qu'il se voit AUSSI à travers les PNG à fond transparent, que les
   écoles déposent plus souvent qu'on ne croit. */
.figure {
	margin: 0;
	overflow: hidden;
	background: var( --voile-image );
}

.figure img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var( --hauteur-photo );
	object-fit: cover;
}

.galet-bulle { border-radius: 56% 44% 40% 60% / 46% 52% 48% 54%; }

/* Le reflet, pas une seconde forme : les coins sont échangés deux à deux
   sur l'axe vertical. Sur un rang inversé, la bulle penche donc vers le
   texte au lieu de s'en détourner. */
.rang--inverse .galet-bulle {
	border-radius: 44% 56% 60% 40% / 52% 46% 54% 48%;
}

.galet-petale { border-radius: 30% 8% 30% 8% / 36% 10% 36% 10%; }

.figure--carre {
	--hauteur-photo: 1 / 1;
}

.figure--portrait {
	--hauteur-photo: 4 / 5;
}

.figure--large {
	--hauteur-photo: 16 / 10;
}


/* -------------------------------------------------------------------------
   Cartes et panneaux
   ---------------------------------------------------------------------- */

.carte {
	padding: clamp( 1.4rem, 3vw, 2rem );
	border-radius: var( --r-carte );
}

.carte--contour {
	border: 1.5px solid var( --trait-fort );
}

.panneau {
	padding: clamp( 1.75rem, 5vw, 3.5rem );
	border-radius: var( --r-panneau );
}

/* Le galet touche le bas de sa boîte en son milieu : sans dégagement,
   l'encart se colle exactement là où la courbe est la plus basse. */
/* Le point médian sépare le statut de la direction diocésaine — deux
   champs distincts, qui se lisaient sinon comme une seule phrase. Il
   respire des deux côtés, et il est retiré aux lecteurs d'écran :
   c'est une virgule de mise en page, pas un mot. */
.encart-logo__separateur {
	margin: 0 .35em;
	opacity: .55;
}

.encart-logo {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	max-width: 26rem;
	margin-top: clamp( 1.5rem, 3.5vw, 2.5rem );
	padding: .9rem 1.2rem;
	border-radius: var( --r-carte );
	background: var( --ecole-accent );
	color: var( --ecole-texte );
	font-size: var( --t-petit );
	font-weight: 700;
	line-height: 1.35;
}

.encart-logo img {
	width: 5rem;
	height: auto;
	flex: none;
	border-radius: .4rem;
	background: #fff;
}

.cadre-logo {
	display: inline-flex;
	padding: .75rem 1rem;
	border-radius: var( --r-carte );
	background: #fff;
}

.cadre-logo img {
	max-height: 4.5rem;
	width: auto;
}


/* -------------------------------------------------------------------------
   Texte riche
   ---------------------------------------------------------------------- */

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

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

.prose a {
	color: var( --encre );
	text-decoration-color: var( --ecole-accent );
	text-decoration-thickness: .14em;
	text-underline-offset: .2em;
}

.prose a:hover {
	text-decoration-color: currentColor;
}

.prose ul,
.prose ol {
	margin: 0;
	padding-left: 1.15rem;
}

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

.prose ul {
	list-style: none;
	padding-left: 0;
}

.prose ul li {
	position: relative;
	padding-left: 1.4rem;
}

.prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var( --ecole-accent );
}

.prose blockquote {
	margin: 1.5em 0;
	padding-left: 1.2rem;
	border-left: 3px solid var( --ecole-accent );
	font-style: italic;
}

.prose img {
	border-radius: var( --r-carte );
}

.texte-doux {
	color: var( --encre-douce );
}


/* -------------------------------------------------------------------------
   En-tête
   ---------------------------------------------------------------------- */

.alerte {
	background: var( --ecole-primaire );
	color: var( --ecole-fond );
	font-size: var( --t-petit );
	text-align: center;
}

.alerte__dedans {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .25rem .75rem;
	padding-block: .7rem;
}

.alerte a {
	color: var( --ecole-accent );
	font-weight: 700;
	text-underline-offset: .25em;
}

.entete {
	padding-inline: var( --gouttiere );
}

.entete__barre {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: min( 100%, var( --largeur ) );
	margin-inline: auto;
	padding: .8rem clamp( .9rem, 2vw, 1.5rem );
	border-radius: 0 0 var( --r-barre ) var( --r-barre );
	background: var( --ecole-accent );
	color: var( --ecole-texte );
}

.marque {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin-right: auto;
	color: inherit;
	font-family: var( --pile-titre );
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
}

/* Le plafond du logo se pose ICI et dans le panneau mobile. Posé à un
   seul endroit, il a déjà laissé un logo occuper tout l'écran. */
.marque__logo {
	display: inline-flex;
	padding: .3rem .45rem;
	border-radius: .8rem;
	background: #fff;
}

.marque__logo img {
	max-height: 3rem;
	width: auto;
}

.marque__nom {
	max-width: 12rem;
	font-size: var( --t-petit );
}

.entete__nav {
	display: none;
}

.menu {
	display: flex;
	align-items: center;
	gap: clamp( .6rem, 1.6vw, 1.4rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu > li {
	position: relative;
}

.menu a {
	display: inline-block;
	padding: .4rem .2rem;
	color: inherit;
	font-size: var( --t-petit );
	font-weight: 500;
	text-decoration: none;
}

.menu > li > a:hover,
.menu > .current-menu-item > a,
.menu > .current_page_item > a {
	text-decoration: underline;
	text-decoration-thickness: .12em;
	text-underline-offset: .45em;
}

/* Le chevron s'accroche à `menu-item-has-children`, la classe que
   WordPress pose lui-même : le menu réel et la carte de repli le
   reçoivent alors par la MÊME règle, sans qu'aucune icône n'ait à être
   injectée dans la sortie de `wp_nav_menu()`. */
.menu > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .36em;
	height: .36em;
	margin-left: .45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY( -.18em ) rotate( 45deg );
	transition: transform .18s ease;
}

.menu > .menu-item-has-children:hover > a::after,
.menu > .menu-item-has-children:focus-within > a::after {
	transform: translateY( .06em ) rotate( 225deg );
}

.menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 14rem;
	margin: .55rem 0 0;
	padding: .6rem;
	list-style: none;
	border-radius: var( --r-carte );
	background: var( --ecole-fond );
	color: var( --ecole-texte );
	box-shadow: 0 18px 40px -24px rgba( 0, 0, 0, .55 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( .4rem );
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .2s;
}

/* Le pont. Sans lui, les 9 px qui séparent la rubrique de son panneau
   suffisent à perdre le survol ; le délai de 200 ms sur `visibility`
   pardonne en plus la diagonale de la souris. */
.menu .sub-menu::before {
	content: "";
	position: absolute;
	inset: -.75rem 0 100% 0;
}

.menu > li:hover > .sub-menu,
.menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.menu .sub-menu a {
	display: block;
	padding: .5rem .7rem;
	border-radius: .55rem;
}

.menu .sub-menu a:hover {
	background: var( --ecole-secondaire );
	text-decoration: none;
}

.entete__actions {
	display: none;
	align-items: center;
	gap: .9rem;
}

.entete__actions .bouton--primaire {
	background: var( --ecole-primaire );
	color: var( --ecole-fond );
}

.bascule {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	padding: 0;
	border: 0;
	border-radius: .75rem;
	background: var( --ecole-primaire );
	color: var( --ecole-fond );
	font-size: 1.3rem;
	cursor: pointer;
}

.panneau-mobile {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1.25rem var( --gouttiere ) 2.5rem;
	overflow-y: auto;
	background: var( --ecole-fond );
	color: var( --ecole-texte );
}

.panneau-mobile[hidden] {
	display: none;
}

.panneau-mobile__haut {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.panneau-mobile .marque__logo img {
	max-height: 2.75rem;
}

.panneau-mobile .menu {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.panneau-mobile .menu > li + li {
	border-top: 1px solid var( --trait );
}

.panneau-mobile .menu a {
	padding: .95rem 0;
	font-size: 1.15rem;
	font-weight: 700;
}

.panneau-mobile .menu .sub-menu {
	position: static;
	min-width: 0;
	margin: 0 0 .6rem;
	padding: 0 0 0 .9rem;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
}

.panneau-mobile .menu .sub-menu a {
	padding: .5rem 0;
	font-size: var( --t-corps );
	font-weight: 500;
}

/* Dans le panneau, les sous-menus sont déjà dépliés : un chevron y
   annoncerait une ouverture qui n'a pas lieu. */
.panneau-mobile .menu > .menu-item-has-children > a::after {
	display: none;
}

.panneau-mobile__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}


/* -------------------------------------------------------------------------
   Coiffe
   ---------------------------------------------------------------------- */

.coiffe {
	background: var( --ecole-secondaire );
	border-radius: 0 0 var( --r-coiffe ) var( --r-coiffe );
}

.coiffe__corps {
	padding-block: clamp( 2.25rem, 5vw, 4rem ) clamp( 2.25rem, 5vw, 4rem );
	text-align: center;
}

.coiffe__accroche {
	max-width: 42rem;
	margin: 1.1rem auto 0;
	color: var( --encre-douce );
}

.fil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	margin-top: 1rem;
	font-size: var( --t-petit );
	color: var( --encre-douce );
}

.fil a {
	color: inherit;
	text-underline-offset: .25em;
}

/* L'accueil ne centre pas : la coiffe y porte un rang de deux pistes. */
.coiffe--accueil .coiffe__corps {
	text-align: left;
	padding-bottom: clamp( 2.75rem, 6vw, 5rem );
}

.hero__titre {
	font-size: clamp( 2.1rem, 1.2rem + 3.6vw, 3.5rem );
}

.hero__accroche {
	margin-top: 1.2rem;
	font-size: clamp( 1rem, .95rem + .3vw, 1.15rem );
	color: var( --encre-douce );
	max-width: 34rem;
}

.hero__actions {
	margin-top: 1.75rem;
}


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

.chiffres {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	gap: 1rem;
	margin-top: 1.75rem;
}

.chiffre {
	padding: 1.25rem 1.35rem;
	border-radius: var( --r-carte );
	border: 1.5px solid transparent;
}

.chiffre--plein {
	background: var( --ecole-primaire );
	color: var( --ecole-fond );
}

.chiffre--contour {
	border-color: var( --trait-fort );
}

.chiffre__valeur {
	display: block;
	font-family: var( --pile-titre );
	font-size: clamp( 1.6rem, 1.3rem + 1.2vw, 2.1rem );
	font-weight: 700;
	line-height: 1.1;
}

.chiffre__libelle {
	margin: .45rem 0 0;
	font-size: var( --t-petit );
	line-height: 1.45;
}


/* -------------------------------------------------------------------------
   Mot du chef d'établissement
   ---------------------------------------------------------------------- */

.mot {
	text-align: center;
}

.mot__texte {
	max-width: 46rem;
	margin-inline: auto;
}

.mot__photo {
	width: 6.5rem;
	margin: 0 auto 1.25rem;
}

.mot__photo img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.mot__signature {
	display: block;
	max-height: 4.5rem;
	width: auto;
	margin: 1.75rem auto .5rem;
}

.mot__auteur {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem;
	margin-top: 1.75rem;
	padding: .6rem 1.4rem;
	border-radius: var( --r-pilule );
	background: var( --ecole-fond );
	color: var( --ecole-texte );
	font-size: var( --t-petit );
	font-weight: 700;
}

.mot__fonction {
	font-weight: 400;
}


/* -------------------------------------------------------------------------
   Citation et thème d'année
   ---------------------------------------------------------------------- */

.citation {
	max-width: 40rem;
}

.citation__marque {
	font-size: 2.25rem;
	color: var( --ecole-accent );
}

.citation__texte {
	margin: .5rem 0 0;
	font-family: var( --pile-titre );
	font-size: clamp( 1.3rem, 1.05rem + 1.1vw, 1.9rem );
	font-weight: 400;
	line-height: 1.3;
}

.citation__source {
	margin-top: 1rem;
	font-size: var( --t-petit );
	color: var( --encre-douce );
}

.theme-annee__periode {
	margin: 0 0 .4rem;
	font-size: var( --t-mini );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var( --encre-douce );
}

.theme-annee__image {
	margin-bottom: 1.25rem;
	--hauteur-photo: 16 / 9;
}


/* -------------------------------------------------------------------------
   Galerie — un rail qui se fait défiler
   ---------------------------------------------------------------------- */

.galerie {
	position: relative;
}

.galerie__rail {
	display: flex;
	gap: clamp( .9rem, 2vw, 1.5rem );
	padding-inline: var( --gouttiere );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.galerie__rail::-webkit-scrollbar {
	display: none;
}

.galerie__item {
	flex: 0 0 min( 82vw, 38rem );
	scroll-snap-align: center;
	margin: 0;
}

.galerie__item img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var( --r-panneau );
}

.galerie__legende {
	margin-top: .75rem;
	font-size: var( --t-petit );
	color: var( --encre-douce );
	text-align: center;
}

.galerie__commandes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.galerie__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --ecole-accent );
	color: var( --ecole-texte );
	font-size: 1.1rem;
	cursor: pointer;
}

.galerie__fleche[disabled] {
	opacity: .35;
	cursor: default;
}

.galerie__fleche--precedent .icone {
	transform: rotate( 180deg );
}

.galerie__points {
	display: flex;
	gap: .45rem;
}

.galerie__point {
	width: .5rem;
	height: .5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --trait-fort );
	cursor: pointer;
}

.galerie__point[aria-current="true"] {
	background: var( --ecole-primaire );
	transform: scale( 1.35 );
}


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

.grille-actus {
	display: grid;
	gap: clamp( 1rem, 2.5vw, 1.75rem );
}

/* Deux rangées, et la seconde prend le reste : les corps abricot font
   alors la même hauteur d'une carte à l'autre, quel que soit le nombre de
   lignes du titre — et la flèche s'aligne sur une seule ligne de base. */
.actu {
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	border-radius: var( --r-carte );
	background: var( --ecole-accent );
	color: var( --ecole-texte );
	text-decoration: none;
	transition: transform .2s ease;
}

.actu:hover {
	transform: translateY( -5px );
}

/* L'encoche. Le coin bas-droit de la photo s'ouvre sur l'aplat abricot :
   c'est le galet rappelé sur une carte, sans lui imposer sa forme. */
.actu__image {
	position: relative;
	overflow: hidden;
	border-radius: 0 0 var( --r-panneau ) 0;
}

.actu__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s cubic-bezier( .22, .61, .36, 1 );
}

.actu:hover .actu__image img {
	transform: scale( 1.06 );
}

/* La date quitte le corps pour la photo : elle y devient une pilule, et
   le corps ne porte plus que ce qui se lit. */
.actu__date {
	position: absolute;
	top: .75rem;
	left: .75rem;
	margin: 0;
	padding: .3rem .8rem;
	border-radius: var( --r-pilule );
	background: var( --ecole-fond );
	color: var( --ecole-texte );
	font-size: var( --t-mini );
	font-weight: 700;
	line-height: 1.4;
}

.actu--nue .actu__date {
	position: static;
	align-self: start;
}

.actu__corps {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	padding: 1.15rem 1.35rem 1.35rem;
}

.actu--nue .actu__corps {
	padding-top: 1.5rem;
}

/* Deux lignes réservées d'office. Les cartes ne s'étirent plus les unes
   sur les autres — c'est ce qui permet le décalage — donc un titre d'une
   ligne raccourcissait sa carte de vingt pixels par rapport à sa voisine,
   et le décalage voulu se confondait avec celui qu'on subit. */
.actu__titre {
	min-height: 2.56em;
	font-size: 1.08rem;
	line-height: 1.28;
	letter-spacing: -.01em;
}

.actu__lire {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-top: auto;
	font-size: var( --t-mini );
	font-weight: 700;
}

.actu__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.65rem;
	height: 1.65rem;
	flex: none;
	border-radius: 50%;
	background: var( --ecole-primaire );
	color: var( --ecole-fond );
	font-size: .8rem;
	transition: transform .2s ease;
}

.actu:hover .actu__fleche {
	transform: translateX( .3rem );
}


/* -------------------------------------------------------------------------
   Témoignages
   ---------------------------------------------------------------------- */

.grille-temoignages {
	display: grid;
	gap: clamp( 1rem, 2.5vw, 1.5rem );
}

.temoignage {
	padding: clamp( 1.4rem, 3vw, 2rem );
	border-radius: var( --r-carte );
	background: var( --ecole-secondaire );
}

.temoignage__marque {
	font-size: 1.6rem;
	color: var( --ecole-accent );
}

.temoignage__texte {
	margin: .6rem 0 1.1rem;
}

.temoignage__note {
	display: flex;
	gap: .15rem;
	margin-bottom: .5rem;
	color: var( --ecole-accent );
}

.temoignage__auteur {
	margin: 0;
	font-size: var( --t-petit );
	font-weight: 700;
}

.temoignage__date {
	margin: .1rem 0 0;
	font-size: var( --t-mini );
	color: var( --encre-douce );
}


/* -------------------------------------------------------------------------
   Accordéon
   ---------------------------------------------------------------------- */

.accordeon {
	display: grid;
	gap: .75rem;
	max-width: 48rem;
}

/* L'accordéon ne se centre que sous un titre centré. Centré partout, il
   se décalait de la colonne de texte qui le précède — un alignement
   presque juste se voit plus qu'un alignement franchement autre. */
.entete-section--centre ~ .accordeon {
	margin-inline: auto;
}

.qr {
	border: 1.5px solid var( --trait-fort );
	border-radius: .9rem;
	overflow: hidden;
}

.qr__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	font-weight: 700;
	font-size: var( --t-petit );
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.qr__question::-webkit-details-marker {
	display: none;
}

.qr[open] {
	border-color: transparent;
}

.qr[open] .qr__question {
	background: var( --ecole-primaire );
	color: var( --ecole-fond );
}

.qr__chevron {
	transition: transform .2s ease;
}

.qr[open] .qr__chevron {
	transform: rotate( 180deg );
}

.qr__reponse {
	overflow: hidden;
}

/* La transition n'existe que si le script a repris la main sur
   l'ouverture. Sans lui, `<details>` garde son comportement natif —
   instantané, mais jamais cassé. */
.etoile-js .qr__reponse {
	transition: height .3s cubic-bezier( .22, .61, .36, 1 );
}

.qr__dedans {
	padding: 1.1rem 1.25rem 1.35rem;
	font-size: var( --t-petit );
}


/* -------------------------------------------------------------------------
   Lignes de contact et documents
   ---------------------------------------------------------------------- */

.pile-contact {
	display: grid;
	gap: .75rem;
}

.contact-ligne {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 0;
	padding: .85rem 1.1rem;
	border: 1.5px solid var( --trait-fort );
	border-radius: var( --r-pilule );
	color: var( --encre );
	font-size: var( --t-petit );
	text-decoration: none;
}

a.contact-ligne:hover {
	border-color: var( --encre );
}

.contact-ligne__puce {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	flex: none;
	border-radius: 50%;
	background: var( --ecole-accent );
	color: var( --ecole-texte );
	font-size: 1rem;
}

.liste-docs {
	display: grid;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc-lien {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .8rem 1.05rem;
	border-radius: .8rem;
	background: var( --ecole-secondaire );
	color: var( --ecole-texte );
	font-size: var( --t-petit );
	font-weight: 500;
	text-decoration: none;
}

.doc-lien:hover {
	background: var( --ecole-accent );
}

.doc-annee {
	margin-left: auto;
	padding-left: .75rem;
	font-size: var( --t-mini );
	font-weight: 400;
	opacity: .75;
}

.docs-vide {
	margin: 0;
	font-size: var( --t-petit );
	color: var( --encre-douce );
}


/* -------------------------------------------------------------------------
   Formulaire — Contact Form 7 pose son propre balisage, on n'habille
   que les champs. Sans l'extension, rien de tout ceci ne s'applique et
   la page reste juste.
   ---------------------------------------------------------------------- */

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire input[type="url"],
.formulaire input[type="date"],
.formulaire select,
.formulaire textarea {
	width: 100%;
	padding: .8rem 1rem;
	border: 1.5px solid var( --trait-fort );
	border-radius: .7rem;
	background: var( --ecole-fond );
	color: var( --encre );
	font-family: inherit;
	font-size: var( --t-petit );
}

.formulaire textarea {
	min-height: 9rem;
	resize: vertical;
}

.formulaire label {
	display: block;
	margin-bottom: 1rem;
	font-size: var( --t-petit );
	font-weight: 700;
}

.formulaire input[type="submit"] {
	padding: .8rem 1.5rem;
	border: 0;
	border-radius: var( --r-bouton );
	background: var( --btn-fond );
	color: var( --btn-encre );
	font-family: inherit;
	font-size: var( --t-petit );
	font-weight: 700;
	cursor: pointer;
}

.formulaire .wpcf7-not-valid-tip {
	font-weight: 400;
	color: #b3261e;
}


/* -------------------------------------------------------------------------
   Tableaux
   ---------------------------------------------------------------------- */

.tableau-cadre {
	overflow-x: auto;
	border-radius: var( --r-carte );
	border: 1px solid var( --trait );
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var( --t-petit );
}

th,
td {
	padding: .8rem 1rem;
	text-align: left;
	border-bottom: 1px solid var( --trait );
}

thead th {
	font-weight: 700;
	background: var( --ecole-secondaire );
	white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
	border-bottom: 0;
}

.prose table {
	margin-block: 1.5em;
}


/* -------------------------------------------------------------------------
   Séries diverses
   ---------------------------------------------------------------------- */

.frise {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.frise__entree {
	display: grid;
	gap: .35rem .9rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var( --trait );
}

.frise__annee {
	justify-self: start;
	padding: .25rem .8rem;
	border-radius: var( --r-pilule );
	background: var( --ecole-accent );
	color: var( --ecole-texte );
	font-size: var( --t-mini );
	font-weight: 700;
}

.frise__texte {
	margin: 0;
}

.liste-plate {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --t-petit );
}

.liste-plate li {
	display: flex;
	gap: .7rem;
	align-items: baseline;
}

.liste-plate .icone {
	color: var( --ecole-accent );
}

.paire {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding: .7rem 0;
	border-bottom: 1px solid var( --trait );
	font-size: var( --t-petit );
}

.paire:last-child {
	border-bottom: 0;
}

.paire__valeur {
	font-weight: 700;
	text-align: right;
}

.paire__precision {
	flex-basis: 100%;
	color: var( --encre-douce );
	font-size: var( --t-mini );
}

.etapes {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: etape;
}

.etape {
	position: relative;
	padding: 1.35rem 1.5rem 1.35rem 4rem;
	border-radius: var( --r-carte );
	background: var( --ecole-secondaire );
	counter-increment: etape;
}

.etape::before {
	content: counter( etape );
	position: absolute;
	left: 1.35rem;
	top: 1.3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var( --ecole-primaire );
	color: var( --ecole-fond );
	font-family: var( --pile-titre );
	font-size: .85rem;
	font-weight: 700;
}

.grille-cartes {
	display: grid;
	gap: clamp( 1rem, 2.5vw, 1.5rem );
}

.pilier {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: clamp( 1.35rem, 3vw, 1.85rem );
	border: 1.5px solid var( --trait-fort );
	border-radius: var( --r-carte );
}

.pilier__icone {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
	object-position: left center;
}

.pilier__texte {
	margin: 0;
	font-size: var( --t-petit );
}

.coiffe__illustration {
	padding-bottom: clamp( 1.5rem, 4vw, 2.5rem );
}

/* Bornée : à 1140 px de large et en 16/10, la même image faisait
   712 px de haut et mangeait l'écran entier avant le premier mot. */
.coiffe__illustration .figure {
	--hauteur-photo: 5 / 2;

	max-width: 52rem;
	margin-inline: auto;
}

.grille-souple {
	display: grid;
	gap: clamp( 1rem, 2.5vw, 1.5rem );
	grid-template-columns: repeat( auto-fit, minmax( 17rem, 1fr ) );
}

.grille-membres {
	display: grid;
	gap: clamp( 1.5rem, 3vw, 2.25rem );
}

.membre {
	display: grid;
	gap: .7rem;
}

.membre__photo {
	--hauteur-photo: 1 / 1;
	max-width: 9rem;
}

.membre__nom {
	font-size: 1.05rem;
}

.membre__role {
	margin: .15rem 0 0;
	font-size: var( --t-petit );
	color: var( --encre-douce );
}

.membre__lien {
	font-size: var( --t-mini );
	text-underline-offset: .25em;
}

.groupe-equipe + .groupe-equipe {
	margin-top: var( --pas-serre );
}

.groupe-equipe__titre {
	margin-bottom: 1.25rem;
	font-size: var( --t-h3 );
}

.logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

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

.carte-lieu {
	overflow: hidden;
	border-radius: var( --r-panneau );
	background: var( --ecole-secondaire );
	aspect-ratio: 16 / 9;
}

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


/* -------------------------------------------------------------------------
   Articles
   ---------------------------------------------------------------------- */

.article__meta {
	margin-top: .75rem;
	font-size: var( --t-petit );
	color: var( --encre-douce );
}

.article__image {
	margin: 0 0 var( --pas-serre );
	--hauteur-photo: 16 / 9;
}

.article-corps {
	max-width: 44rem;
	margin-inline: auto;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin-top: var( --pas-serre );
	font-size: var( --t-petit );
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding-inline: .5rem;
	border-radius: .6rem;
	text-decoration: none;
}

.pagination .current {
	background: var( --ecole-primaire );
	color: var( --ecole-fond );
}

.rien {
	max-width: 34rem;
	color: var( --encre-douce );
}


/* -------------------------------------------------------------------------
   Pied de page
   ---------------------------------------------------------------------- */

.pied {
	--encre:       var( --ecole-fond );
	--encre-douce: rgba( 255, 255, 255, .74 );
	--trait:       rgba( 255, 255, 255, .18 );

	margin-top: var( --pas );
	padding-block: clamp( 3rem, 6vw, 4.5rem ) 0;
	background: var( --ecole-primaire );
	color: var( --encre );
}

.pied__grille {
	display: grid;
	gap: clamp( 2rem, 4vw, 3rem );
}

.pied__logo {
	display: inline-flex;
	margin-bottom: 1.1rem;
	padding: .5rem .7rem;
	border-radius: .9rem;
	background: #fff;
}

.pied__logo img {
	max-height: 4.5rem;
	width: auto;
}

.pied__nom {
	font-size: var( --t-h3 );
}

.pied__accroche {
	margin-top: 1rem;
	max-width: 22rem;
	font-size: var( --t-petit );
	color: var( --encre-douce );
}

.pied__titre {
	margin-bottom: 1.1rem;
	font-size: 1.15rem;
}

.pied__liens {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --t-petit );
}

.pied__liens a {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	text-decoration: none;
}

.pied__liens a:hover span:last-child {
	text-decoration: underline;
	text-underline-offset: .25em;
}

.pied__puce {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	flex: none;
	border-radius: 50%;
	background: var( --ecole-accent );
	color: var( --ecole-texte );
	font-size: .72rem;
}

.pied__coordonnees {
	display: grid;
	gap: .5rem;
	font-size: var( --t-petit );
	font-style: normal;
}

.pied__coordonnees a {
	text-decoration: none;
}

.pied__coordonnees a:hover {
	text-decoration: underline;
	text-underline-offset: .25em;
}

.reseaux {
	display: flex;
	gap: .6rem;
	margin-top: 1.5rem;
}

.reseaux a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var( --ecole-accent );
	color: var( --ecole-texte );
	font-size: 1.05rem;
}

.pied__bas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-top: clamp( 2.5rem, 5vw, 4rem );
	padding-block: 1.4rem;
	border-top: 1px solid var( --trait );
	font-size: var( --t-mini );
	color: var( --encre-douce );
}

.pied__bas a {
	color: var( --ecole-accent );
	text-underline-offset: .25em;
}


/* -------------------------------------------------------------------------
   Paliers — 560 / 768 / 1024 / 1440, et rien d'autre.

   Le jeu est fermé (BLUEPRINT §12) : un thème du parc en comptait huit,
   dont deux à 80 px d'écart, et la page se réorganisait deux fois dans
   un état que personne n'avait jamais regardé.
   ---------------------------------------------------------------------- */

@media ( min-width: 560px ) {
	.grille-actus,
	.grille-temoignages,
	.grille-cartes {
		grid-template-columns: repeat( 2, 1fr );
	}

	.galerie__item {
		flex-basis: min( 68vw, 38rem );
	}

	.frise__entree {
		grid-template-columns: auto 1fr;
		align-items: baseline;
	}

	.pile-contact {
		max-width: 26rem;
	}

	.grille-membres {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 768px ) {
	.rang {
		grid-template-columns: 1fr 1fr;
	}

	.rang--inverse .rang__media {
		order: -1;
	}

	.rang--seul {
		grid-template-columns: 1fr;
	}

	.rang--inverse.rang--seul .rang__texte {
		margin-left: auto;
	}

	.duo {
		grid-template-columns: 1fr 1fr;
	}

	.grille-actus,
	.grille-cartes {
		grid-template-columns: repeat( 3, 1fr );
	}

	/* Le zigzag jusque dans la grille : une carte sur deux descend d'un
	   cran. `align-items: start` est indispensable — étirées, les cartes
	   absorberaient le décalage au lieu de le montrer. */
	.grille-actus {
		align-items: start;
	}

	.grille-actus .actu:nth-child( even ) {
		margin-top: clamp( 1.5rem, 3vw, 2.75rem );
	}

	.pied__grille {
		grid-template-columns: 2fr 1fr 1.2fr;
	}

	.grille-membres {
		grid-template-columns: repeat( 3, 1fr );
	}

	.mot__auteur {
		margin-top: 2rem;
	}
}

@media ( min-width: 1024px ) {
	.entete__nav,
	.entete__actions {
		display: flex;
	}

	.bascule {
		display: none;
	}

	.entete__barre {
		padding-block: .9rem;
	}

	.marque {
		margin-right: clamp( 1rem, 3vw, 2.5rem );
	}

	.entete__nav {
		margin-right: auto;
	}

	.coiffe--accueil .rang {
		grid-template-columns: 1.05fr 1fr;
		gap: clamp( 2.5rem, 5vw, 4.5rem );
	}

	.galerie__item {
		flex-basis: 42rem;
	}
}

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

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}


/* -------------------------------------------------------------------------
   Utilitaires — EN DERNIER, et ce n'est pas une commodité de rangement.

   À spécificité égale, c'est la dernière règle déclarée qui l'emporte :
   posées plus haut, `.marge-haut` et consorts se faisaient écraser par le
   `margin: 0` de tout composant qui remet ses marges à zéro. La liste des
   horaires se collait ainsi à la grille au-dessus d'elle, sans qu'aucune
   des deux règles ne soit fausse.
   ---------------------------------------------------------------------- */

.actions--centre {
	justify-content: center;
}

.marge-haut {
	margin-top: 1.5rem;
}

.marge-haut--large {
	margin-top: clamp( 1.75rem, 4vw, 2.5rem );
}