/* ==========================================================================
   ÉCOLE LIBRE SAINT-MARTIN — Design system
   Palette joyeuse & chaleureuse pour une école fondamentale belge.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	/* Couleurs de marque */
	--sm-blue:        #1e6f9f;
	--sm-blue-dark:   #14506f;
	--sm-blue-soft:   #e8f3f9;
	--sm-sun:         #f6b93b;
	--sm-sun-dark:    #e0a01f;
	--sm-coral:       #e8663d;
	--sm-coral-soft:  #fdeae2;
	--sm-green:       #6aae5b;
	--sm-green-soft:  #eaf5e6;

	/* Neutres chauds */
	--sm-ink:         #23303a;
	--sm-ink-soft:    #4a5a66;
	--sm-muted:       #6b7a86;
	--sm-line:        #e7ded2;
	--sm-paper:       #fbf7f0;
	--sm-card:        #ffffff;

	/* Typo */
	--sm-font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
	--sm-font-body:    "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Rythme */
	--sm-radius:      16px;
	--sm-radius-lg:   28px;
	--sm-radius-pill: 999px;
	--sm-shadow:      0 10px 30px -12px rgba(20, 60, 90, .28);
	--sm-shadow-sm:   0 6px 18px -10px rgba(20, 60, 90, .35);
	--sm-container:   1200px;
	--sm-gap:         clamp(1rem, 2.5vw, 2rem);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--sm-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--sm-ink);
	background: var(--sm-paper);
	-webkit-font-smoothing: antialiased;
}
/* Garde-fou : empêche tout scroll horizontal (ex. tiroir de menu mobile hors écran).
   Sur la racine, cela n'affecte pas le header sticky. */
html { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--sm-blue); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--sm-blue-dark); }
h1, h2, h3, h4 { font-family: var(--sm-font-display); line-height: 1.15; color: var(--sm-ink); font-weight: 600; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
:focus-visible { outline: 3px solid var(--sm-sun); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 999; background: #fff; padding: .6rem 1rem; border-radius: var(--sm-radius); box-shadow: var(--sm-shadow); }

/* ---------- 3. Layout ---------- */
.container { width: min(100% - 2.4rem, var(--sm-container)); margin-inline: auto; }
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--tint { background: var(--sm-blue-soft); }
.section--sun  { background: linear-gradient(180deg, #fff9ec, #fdf3dd); }
.grid { display: grid; gap: var(--sm-gap); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.stack > * + * { margin-top: 1rem; }
.text-center { text-align: center; }

.section__head { text-align: center; max-width: 42rem; margin: 0 auto clamp(1.5rem, 4vw, 2.75rem); }
.section__eyebrow {
	display: inline-block; font-family: var(--sm-font-display); font-weight: 600;
	color: var(--sm-coral); text-transform: uppercase; letter-spacing: .08em;
	font-size: .82rem; margin-bottom: .4rem;
}
.section__head p { color: var(--sm-ink-soft); font-size: 1.1rem; }

/* ---------- 4. Boutons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--sm-font-display); font-weight: 600; font-size: 1rem;
	padding: .72rem 1.5rem; border-radius: var(--sm-radius-pill);
	border: 2px solid transparent; cursor: pointer; text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--sm-blue); color: #fff; box-shadow: var(--sm-shadow-sm); }
.btn--primary:hover { background: var(--sm-blue-dark); color: #fff; }
.btn--sun { background: var(--sm-sun); color: var(--sm-ink); box-shadow: var(--sm-shadow-sm); }
.btn--sun:hover { background: var(--sm-sun-dark); color: var(--sm-ink); }
.btn--ghost { background: #fff; color: var(--sm-blue); border-color: var(--sm-line); }
.btn--ghost:hover { border-color: var(--sm-blue); color: var(--sm-blue-dark); }
.btn--block { width: 100%; justify-content: center; }

/* ---------- 5. En-tête & navigation ---------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--sm-line);
}
.site-header__bar { display: flex; align-items: center; gap: 1rem; padding-block: .65rem; position: relative; }
.site-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.site-brand img { width: 54px; height: 54px; object-fit: contain; }
.site-brand__text { font-family: var(--sm-font-display); font-weight: 700; line-height: 1.05; color: var(--sm-blue-dark); }
.site-brand__text small { display: block; font-family: var(--sm-font-body); font-weight: 600; font-size: .72rem; color: var(--sm-coral); letter-spacing: .04em; }

.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav > ul { display: flex; align-items: center; gap: .1rem; }
.primary-nav a {
	display: block; padding: .55rem .7rem; border-radius: var(--sm-radius-pill);
	font-family: var(--sm-font-display); font-weight: 500; color: var(--sm-ink);
	text-decoration: none; transition: background .15s, color .15s; white-space: nowrap;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current_page_item > a {
	background: var(--sm-blue-soft); color: var(--sm-blue-dark);
}
.primary-nav .menu-item-has-children { position: relative; }
.primary-nav .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 240px;
	background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-radius);
	box-shadow: var(--sm-shadow); padding: .5rem; display: block;
	opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
	transition: opacity .18s, transform .18s, visibility .18s; flex-direction: column;
}
/* pointer-events: le panneau fermé (même les colonnes visibles du méga) ne doit
   PAS capter le survol, sinon il se rouvre en passant sous le menu. */
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu,
.primary-nav .menu-item-has-children.is-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.primary-nav .sub-menu a { border-radius: 10px; }

/* Méga-menu (« L'école ») : panneau pleine largeur du conteneur, en colonnes. */
.primary-nav .mega { position: static; }
.primary-nav .mega > .sub-menu {
	left: 0; right: 0; width: 100%; min-width: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .25rem 2rem; padding: 1.6rem 2rem;
}
/* « Pont » invisible : comble l'espace entre « L'école » et le panneau, pour que
   la souris ne quitte jamais la zone de survol en descendant (sinon le menu se ferme).
   Actif seulement quand le panneau est ouvert (pointer-events hérité). */
.primary-nav .mega > .sub-menu::before {
	content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
}
/* Titre de colonne = enfant de 1er niveau du méga (non cliquable). */
.primary-nav .mega > .sub-menu > .menu-item > a {
	font-family: var(--sm-font-display); font-weight: 600; font-size: .78rem;
	text-transform: uppercase; letter-spacing: .06em; color: var(--sm-coral);
	padding: 0 .3rem .5rem; margin-bottom: .3rem; border-bottom: 1px solid var(--sm-line);
	border-radius: 0; pointer-events: none; cursor: default;
}
.primary-nav .mega > .sub-menu > .menu-item > a:hover { background: transparent; }
/* Liens de colonne = 3e niveau, affichés en liste inline.
   pointer-events: inherit → suit l'état du panneau (auto ouvert / none fermé),
   sinon le « none » de base rendait ces liens non cliquables. */
.primary-nav .mega .sub-menu .sub-menu {
	position: static; opacity: 1; visibility: visible; transform: none; pointer-events: inherit;
	box-shadow: none; border: none; padding: .35rem 0 1rem; background: transparent; min-width: 0;
}
.primary-nav .mega .sub-menu .sub-menu a { padding: .35rem .3rem; font-weight: 500; color: var(--sm-ink); }

/* ---------- Top bar (bandeau d'informations) ---------- */
.topbar { background: var(--sm-blue-dark); color: #eaf3f9; font-size: .86rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .45rem; flex-wrap: wrap; }
.topbar__msg { margin: 0; display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.topbar__msg a { color: var(--sm-sun); text-decoration: underline; }
.topbar__links { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
.topbar__links a { color: #eaf3f9; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.topbar__links a:hover { color: #fff; }
@media (max-width: 640px) {
	.topbar__inner { justify-content: center; }
	.topbar__links { display: none; }
}

.header-cta { display: flex; align-items: center; gap: .5rem; }
.nav-toggle {
	display: none; border: 2px solid var(--sm-line); background: #fff; border-radius: var(--sm-radius);
	width: 46px; height: 46px; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
	content: ""; display: block; width: 22px; height: 2.5px; background: var(--sm-ink); border-radius: 2px; position: relative;
	transition: transform .25s ease, top .25s ease, background .2s ease;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
/* Burger → croix quand le tiroir est ouvert. */
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open span::after { top: 0; transform: rotate(-45deg); }
.nav-close { display: none; }

/* ---------- 6. Hero plein cadre (accueil) ---------- */
/* La hauteur vit sur le hero ; la photo remplit TOUT le bloc (height:100%),
   même quand le texte est plus haut que 62vh (fenêtres peu hautes) —
   sinon une bande apparaît au-dessus/en dessous de l'image. */
.hero-lg { position: relative; display: grid; isolation: isolate; background: var(--sm-blue-dark); min-height: clamp(420px, 62vh, 640px); }
.hero-lg > * { grid-area: 1 / 1; min-width: 0; }
.hero-lg__slider { position: relative; overflow: hidden; height: 100%; }
/* Voile haut : les ciels surexposés des photos butaient en gris délavé contre le
   header blanc — on teinte le haut comme le voile du bas, la jonction devient nette. */
.hero-lg__slider::after {
	/* z-index 3 : au-dessus des slides (.is-active est à 2). Dégradé long et
	   progressif (stops en courbe) : teinte le ciel sans jamais dessiner de barre. */
	content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none;
	height: clamp(240px, 42vh, 380px);
	background: linear-gradient(180deg,
		rgba(8, 28, 42, .30) 0%,
		rgba(8, 28, 42, .24) 20%,
		rgba(8, 28, 42, .16) 42%,
		rgba(8, 28, 42, .09) 64%,
		rgba(8, 28, 42, .03) 84%,
		rgba(8, 28, 42, 0) 100%);
}
.hero-lg__slider .slider__track { height: 100%; }
.hero-lg__slider .slider__slide { height: 100%; }
.hero-lg__slider .slider__slide img,
.hero-lg__slider > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
/* Voile : protège la zone de texte (bas + gauche) en laissant la photo respirer à droite. */
.hero-lg__overlay {
	align-self: end; z-index: 2; pointer-events: none; color: #fff;
	padding: clamp(3.5rem, 14vw, 9rem) 0 clamp(2.6rem, 7vw, 4.6rem);
	background:
		linear-gradient(to top, rgba(8,28,42,.86) 0%, rgba(8,28,42,.55) 34%, rgba(8,28,42,.14) 68%, rgba(8,28,42,0) 100%),
		linear-gradient(100deg, rgba(8,28,42,.50) 0%, rgba(8,28,42,.22) 42%, rgba(8,28,42,0) 70%);
}
.hero-lg__eyebrow {
	display: inline-block; font-family: var(--sm-font-display); font-weight: 600; font-size: .82rem;
	letter-spacing: .12em; text-transform: uppercase; color: var(--sm-sun); margin-bottom: .7rem;
}
.hero-lg__title { font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.05; color: #fff; margin: 0 0 .5rem; max-width: 20ch; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.hero-lg__title .accent { color: var(--sm-sun); }
.hero-lg__lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.92); max-width: 44rem; margin: 0 0 1.6rem; }
.hero-lg__overlay .hero__actions { pointer-events: auto; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-lg__credit { position: absolute; right: .9rem; top: .75rem; z-index: 3; margin: 0; font-size: .62rem; color: rgba(255,255,255,.6); background: rgba(8,28,42,.3); padding: .18rem .55rem; border-radius: var(--sm-radius-pill); backdrop-filter: blur(4px); }

/* Slider générique (structure réutilisée par le hero) */
.slider { position: relative; overflow: hidden; }
.slider__track { display: flex; transition: transform .7s cubic-bezier(.65,.05,.36,1); }
.slider__slide { min-width: 100%; }
.slider__slide img { object-fit: cover; width: 100%; }
.slider__dots { position: absolute; bottom: 18px; left: 0; right: 0; z-index: 4; display: flex; gap: .45rem; justify-content: center; }
.slider__dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,.55); cursor: pointer; transition: width .2s, background .2s; }
.slider__dot.is-active { background: #fff; width: 28px; border-radius: 999px; }

/* Variante FONDU (hero) : les vues sont empilées ; la nouvelle photo fond
   PAR-DESSUS la précédente (qui reste opaque dessous pendant la transition,
   sinon les deux images se mélangent en fantôme avec le fond). */
.slider--fade .slider__track { display: grid; transition: none; }
.slider--fade .slider__slide { min-width: 0; grid-area: 1 / 1; opacity: 0; transition: opacity 1.1s ease; z-index: 1; }
.slider--fade .slider__slide.is-active { opacity: 1; z-index: 2; }
.slider--fade .slider__slide.is-leaving { opacity: 1; transition: none; }
/* Ken Burns uniquement sur la vue affichée (économise le GPU). */
.slider--fade .slider__slide img { animation-play-state: paused; }
.slider--fade .slider__slide.is-active img { animation-play-state: running; }

/* Vague de transition en bas du hero, couleur du fond de page. */
.hero-lg__wave { position: absolute; inset: auto 0 -1px; z-index: 3; pointer-events: none; line-height: 0; }
.hero-lg__wave svg { display: block; width: 100%; height: clamp(28px, 6vw, 72px); }
.hero-lg__wave path { fill: var(--sm-paper); }
/* Les pastilles remontent au-dessus de la vague, en bas à droite. */
.hero-lg .slider__dots { bottom: clamp(2.4rem, 6.5vw, 4.6rem); right: clamp(1rem, 3vw, 2.2rem); left: auto; justify-content: flex-end; }

/* Boutons : variantes grande taille & claire (sur photo sombre) */
.btn--lg { padding: .9rem 1.8rem; font-size: 1.08rem; }
.btn--light { background: #fff; color: var(--sm-blue-dark); border-color: #fff; }
.btn--light:hover { background: rgba(255,255,255,.9); color: var(--sm-blue-dark); }

/* ---------- 7. Vague décorative ---------- */
.wave { display: block; width: 100%; height: 60px; }
.wave--paper { fill: var(--sm-paper); }
.wave--tint  { fill: var(--sm-blue-soft); }

/* ---------- 8. Cartes ---------- */
.card {
	background: var(--sm-card); border-radius: var(--sm-radius-lg); overflow: hidden;
	box-shadow: var(--sm-shadow-sm); border: 1px solid var(--sm-line);
	display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease;
	position: relative; /* toute la tuile est cliquable via le lien « Lire la suite » étiré */
}
.card__more::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover { transform: translateY(-4px); box-shadow: var(--sm-shadow); }
.card__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--sm-blue-soft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__media img { transform: scale(1.04); }
/* Placeholder élégant (monogramme sur dégradé) quand une actualité n'a pas de photo */
.card__media--ph { display: grid; place-items: center; position: relative; }
.card__media--ph::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.6px); background-size: 18px 18px; opacity: .5; }
.card__mono { font-family: var(--sm-font-display); font-weight: 600; font-size: 4.2rem; color: rgba(255,255,255,.92); line-height: 1; z-index: 1; text-shadow: 0 3px 14px rgba(0,0,0,.15); }
.card__media--v1 { background: linear-gradient(135deg, var(--sm-blue), var(--sm-blue-dark)); }
.card__media--v2 { background: linear-gradient(135deg, var(--sm-coral), #c8492a); }
.card__media--v3 { background: linear-gradient(135deg, var(--sm-green), #3f7f45); }
.card__media--v4 { background: linear-gradient(135deg, var(--sm-sun), var(--sm-sun-dark)); }
.card__media--v4 .card__mono { color: rgba(255,255,255,.95); }
.card__body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card__tag {
	align-self: flex-start; font-family: var(--sm-font-display); font-weight: 600; font-size: .72rem;
	text-transform: uppercase; letter-spacing: .05em; color: var(--sm-blue-dark);
	background: var(--sm-blue-soft); padding: .25rem .7rem; border-radius: var(--sm-radius-pill); margin-bottom: .6rem;
}
.card__title { font-size: 1.2rem; margin-bottom: .35rem; }
.card__title a { text-decoration: none; color: inherit; }
.card__title a:hover { color: var(--sm-blue); }
.card__meta { font-size: .85rem; color: var(--sm-muted); margin-bottom: .6rem; }
.card__excerpt { color: var(--sm-ink-soft); margin-bottom: 1rem; }
.card__more { margin-top: auto; font-family: var(--sm-font-display); font-weight: 600; text-decoration: none; }
.card__more::after { content: " →"; }

/* Document (ligne) */
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.doc-item {
	display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius); padding: .9rem 1.1rem; transition: border-color .15s, transform .15s;
}
.doc-item:hover { border-color: var(--sm-blue); transform: translateX(3px); }
.doc-item__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--sm-coral-soft); color: var(--sm-coral); display: grid; place-items: center; font-size: 1.3rem; }
.doc-item__title { font-weight: 700; text-decoration: none; color: var(--sm-ink); }
.doc-item__title:hover { color: var(--sm-blue); }
.doc-item__cat { font-size: .8rem; color: var(--sm-muted); }

/* ---------- 8b. Espace parent (barre latérale) ---------- */
.parent-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start; }
.parent-nav { position: sticky; top: 96px; }
.parent-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.parent-nav a {
	display: flex; align-items: center; justify-content: space-between; gap: .6rem;
	padding: .75rem 1rem; border-radius: var(--sm-radius);
	font-family: var(--sm-font-display); font-weight: 500; color: var(--sm-ink);
	text-decoration: none; transition: background .15s, color .15s;
}
.parent-nav a:hover { background: var(--sm-blue-soft); color: var(--sm-blue-dark); }
.parent-nav a.is-active { background: var(--sm-blue); color: #fff; }
.parent-nav .badge { background: var(--sm-coral); color: #fff; border-radius: var(--sm-radius-pill); font-size: .72rem; font-weight: 700; min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 .35rem; }
.parent-main { min-width: 0; }
.parent-main > h2:first-child { margin-top: 0; }
@media (max-width: 820px) {
	.parent-layout { grid-template-columns: 1fr; }
	.parent-nav { position: static; }
	.parent-nav ul { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
	.parent-nav a { padding: .5rem .9rem; }
}

/* Grille d'agenda / événements */
.agenda-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.agenda-item { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-radius); padding: 1rem 1.2rem; }
.agenda-date { flex: none; width: 62px; text-align: center; background: var(--sm-blue-soft); border-radius: 12px; padding: .5rem 0; line-height: 1.1; }
.agenda-date .d { font-family: var(--sm-font-display); font-weight: 700; font-size: 1.4rem; color: var(--sm-blue-dark); display: block; }
.agenda-date .m { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sm-coral); }
.agenda-item__body { flex: 1; }
.agenda-item__title { font-family: var(--sm-font-display); font-weight: 600; margin: 0 0 .2rem; }
.agenda-item__meta { font-size: .82rem; color: var(--sm-muted); }
.agenda-tag { display: inline-block; font-size: .72rem; font-weight: 600; background: var(--sm-green-soft); color: #2f6b2a; border-radius: var(--sm-radius-pill); padding: .1rem .6rem; margin-left: .4rem; }

/* ---------- 9. Citation ---------- */
.quote-band { background: var(--sm-blue-dark); color: #fff; text-align: center; }
.quote-band blockquote { font-family: var(--sm-font-display); font-size: clamp(1.3rem, 3vw, 1.9rem); max-width: 46rem; margin: 0 auto; font-weight: 500; }
.quote-band .quote-mark { font-size: 3rem; color: var(--sm-sun); line-height: 0; }

/* ---------- 10. Contenu éditorial ---------- */
.page-hero { background: var(--sm-blue-soft); padding-block: clamp(2rem, 5vw, 3.5rem); }
/* Pages éditoriales : le titre s'aligne sur la colonne de lecture (.entry-content, 46rem). */
.page-hero--narrow .container { width: min(100% - 2.4rem, 46rem); }
.breadcrumb { font-size: .85rem; color: var(--sm-muted); margin-bottom: .5rem; }
.breadcrumb a { color: var(--sm-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--sm-blue); }
.entry-content { max-width: 46rem; margin-inline: auto; }
.entry-content img { border-radius: var(--sm-radius); }
.entry-content h2 { margin-top: 1.8em; }
.entry-content a { font-weight: 700; }
.entry-content blockquote {
	border-left: 4px solid var(--sm-sun); background: var(--sm-sun); background: #fff8e8;
	padding: 1rem 1.4rem; border-radius: 0 var(--sm-radius) var(--sm-radius) 0; margin: 1.5em 0;
}
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { border: 1px solid var(--sm-line); padding: .6rem .8rem; text-align: left; }

/* ---------- 11. Formulaires ---------- */
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-family: var(--sm-font-display); font-weight: 500; margin-bottom: .35rem; }
.form-field .req { color: var(--sm-coral); }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password],
input[type=date], input[type=number], select, textarea {
	width: 100%; padding: .7rem .9rem; border: 2px solid var(--sm-line); border-radius: var(--sm-radius);
	font: inherit; background: #fff; color: var(--sm-ink); transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--sm-blue); outline: none; }
textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: .85rem; color: var(--sm-muted); }
.form-card { background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-radius-lg); padding: clamp(1.4rem, 4vw, 2.4rem); box-shadow: var(--sm-shadow-sm); }
.alert { border-radius: var(--sm-radius); padding: .9rem 1.1rem; margin-bottom: 1.2rem; font-weight: 600; }
.alert--ok { background: var(--sm-green-soft); color: #2f6b2a; border: 1px solid #bfe0b5; }
.alert--err { background: var(--sm-coral-soft); color: #a5381a; border: 1px solid #f3c4b3; }

/* ---------- 12. Pied de page ---------- */
.site-footer { background: var(--sm-ink); color: #cfd8de; margin-top: clamp(2.5rem, 6vw, 4rem); }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.footer-brand__text { font-family: var(--sm-font-display); font-weight: 700; color: #fff; font-size: 1.25rem; }
.footer-widget__title { font-family: var(--sm-font-display); color: #fff; font-size: 1.05rem; margin-bottom: .8rem; }
.footer-menu, .footer-widget ul { list-style: none; padding: 0; margin: 0; }
.footer-menu li, .footer-widget li { margin-bottom: .45rem; }
.footer-menu a { text-decoration: none; opacity: .85; }
.footer-menu a:hover { opacity: 1; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.1rem; font-size: .85rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- 13. Divers ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-radius-pill); padding: .3rem .9rem; font-size: .85rem; text-decoration: none; color: var(--sm-ink-soft); }
.pill:hover, .pill.is-active { background: var(--sm-blue); color: #fff; border-color: var(--sm-blue); }
.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.pagination .page-numbers { padding: .5rem .85rem; border-radius: var(--sm-radius); background: #fff; border: 1px solid var(--sm-line); text-decoration: none; }
.pagination .current { background: var(--sm-blue); color: #fff; border-color: var(--sm-blue); }
.notice-box { background: var(--sm-sun); color: var(--sm-ink); border-radius: var(--sm-radius); padding: 1rem 1.3rem; font-weight: 600; display:flex; gap:.6rem; align-items:center; }

/* ---------- 14. Responsive ---------- */
@media (max-width: 900px) {
	.footer-grid { grid-template-columns: 1fr; }
	/* Hero compact en mobile : le message reste lisible sans manger tout l'écran. */
	.hero-lg { min-height: clamp(330px, 52vh, 450px); }
	.hero-lg__overlay { padding: clamp(2.2rem, 11vw, 4.5rem) 0 1.6rem; }
	.hero-lg__eyebrow { font-size: .7rem; margin-bottom: .4rem; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
	.hero-lg__title { font-size: clamp(1.6rem, 5.6vw, 2.2rem); line-height: 1.12; max-width: none; }
	.hero-lg__lead { font-size: .95rem; line-height: 1.45; margin-bottom: 1rem; }
	.hero-lg__overlay .btn--lg { padding: .65rem 1.2rem; font-size: .95rem; }
	.hero-lg__credit { bottom: auto; top: .6rem; right: .6rem; font-size: .55rem; color: rgba(255,255,255,.55); padding: .14rem .5rem; }
	.slider__dots { bottom: 10px; }
	/* Le backdrop-filter du header crée un bloc conteneur pour les éléments fixed :
	   on le retire en mobile pour que le tiroir de menu couvre bien tout l'écran. */
	.site-header { backdrop-filter: none; background: #fff; }
	.nav-toggle { display: inline-flex; }
	.primary-nav {
		position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); background: #fff;
		box-shadow: var(--sm-shadow); padding: 5rem 1.2rem 2rem; overflow-y: auto;
		overscroll-behavior: contain;
		/* Fermé : la boîte reste DANS le viewport (pas de scroll horizontal), masquée par clip-path. */
		clip-path: inset(0 0 0 100%); visibility: hidden;
		transition: clip-path .32s cubic-bezier(.22,.61,.36,1), visibility 0s .32s; z-index: 200;
	}
	.primary-nav.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .32s cubic-bezier(.22,.61,.36,1); }

	/* Entrée en cascade des entrées du menu. */
	.primary-nav > ul > li { opacity: 0; transform: translateX(18px); transition: opacity .28s ease, transform .28s ease; }
	.primary-nav.is-open > ul > li { opacity: 1; transform: none; }
	.primary-nav.is-open > ul > li:nth-child(1) { transition-delay: .05s; }
	.primary-nav.is-open > ul > li:nth-child(2) { transition-delay: .09s; }
	.primary-nav.is-open > ul > li:nth-child(3) { transition-delay: .13s; }
	.primary-nav.is-open > ul > li:nth-child(4) { transition-delay: .17s; }
	.primary-nav.is-open > ul > li:nth-child(5) { transition-delay: .21s; }
	.primary-nav.is-open > ul > li:nth-child(6) { transition-delay: .25s; }
	.primary-nav.is-open > ul > li:nth-child(n+7) { transition-delay: .29s; }

	/* Retour visuel au tap. */
	.primary-nav a:active { background: var(--sm-blue-soft); border-radius: 10px; }

	/* Le fond de page ne défile plus derrière le tiroir ouvert. */
	html.nav-locked, html.nav-locked body { overflow: hidden; }
	.primary-nav ul { flex-direction: column; align-items: stretch; gap: .15rem; list-style: none; margin: 0; padding: 0; }
	.primary-nav a { padding: .75rem .8rem; white-space: normal; }

	/* Bouton fermer (injecté en JS) */
	.nav-close {
		display: grid; place-items: center; position: absolute; top: 1rem; right: 1.1rem;
		width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--sm-line);
		background: #fff; color: var(--sm-ink); font-size: 1.05rem; line-height: 1; cursor: pointer;
	}

	/* Accordéon : sous-menus repliés par défaut, dépliés au tap sur le parent. */
	.primary-nav .menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
	.primary-nav .menu-item-has-children > a::after {
		content: "▾"; font-size: .85em; color: var(--sm-muted);
		transition: transform .2s ease; flex: none;
	}
	.primary-nav .menu-item-has-children.is-open > a::after { transform: rotate(-180deg); }
	.primary-nav .sub-menu {
		display: none; position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: none; min-width: 0; pointer-events: auto;
		background: var(--sm-paper); border-radius: 14px; padding: .35rem .5rem .5rem; margin: .15rem 0 .4rem;
	}
	.primary-nav .menu-item-has-children.is-open > .sub-menu { display: block; }

	/* Méga-menu : colonnes → titres de section + listes, tout visible une fois « L'école » ouvert.
	   display:none répété ici car le desktop pose un display:grid plus spécifique. */
	.primary-nav .mega > .sub-menu { display: none; grid-template-columns: 1fr; gap: 0; }
	.primary-nav .menu-item-has-children.is-open > .sub-menu.sub-menu { display: block; }
	.primary-nav .mega > .sub-menu > .menu-item > a {
		pointer-events: none; border-bottom: none; padding: .7rem .3rem .15rem;
		font-size: .74rem; color: var(--sm-coral); margin: 0;
	}
	.primary-nav .mega > .sub-menu > .menu-item > a::after { content: none; }
	.primary-nav .mega .sub-menu .sub-menu {
		display: block; background: transparent; padding: 0; margin: 0; border-radius: 0;
	}
	.primary-nav .mega .sub-menu .sub-menu a { padding: .55rem .5rem; }

	/* z-index SOUS le header (100) : le tiroir vit dans le contexte d'empilement
	   du header sticky, un backdrop plus haut recouvrirait le menu et capterait
	   tous les taps (menu inutilisable). */
	.nav-backdrop { position: fixed; inset: 0; background: rgba(20,40,60,.42); backdrop-filter: blur(3px); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .25s; }
	.nav-backdrop.is-open { opacity: 1; visibility: visible; }
	/* Bouton Connexion : libellé conservé, format compact. */
	.header-cta .btn { padding: .55rem 1.05rem; font-size: .95rem; }
}
@media (max-width: 560px) {
	.site-brand__text small { display: none; }
	.footer-bottom { flex-direction: column; }
}

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

/* ---------- 16. Annuaire « Nos classes » (portraits) ---------- */
.class-directory { align-items: stretch; }
.class-portrait {
	background: var(--sm-card); border: 1px solid var(--sm-line); border-radius: var(--sm-radius-lg);
	padding: 1.6rem 1.4rem; text-align: center; display: flex; flex-direction: column; align-items: center;
	box-shadow: var(--sm-shadow-sm);
}
.class-portrait__media {
	width: 118px; height: 118px; border-radius: 50%; overflow: hidden; margin-bottom: 1rem;
	background: var(--sm-blue-soft); box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--sm-blue-soft);
}
.class-portrait__media .class-portrait__img,
.class-portrait__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.class-portrait__name { font-family: var(--sm-font-display); font-weight: 600; font-size: 1.2rem; color: var(--sm-ink); }
.class-portrait__teacher { color: var(--sm-blue-dark); font-weight: 600; font-size: .92rem; margin-top: .15rem; }
.class-portrait__teacher--muted { color: var(--sm-muted); font-weight: 500; font-style: italic; }
.class-portrait__quote {
	margin: .9rem 0 0; padding: .7rem .9rem 0; border: 0; border-top: 1px dashed var(--sm-line);
	font-style: italic; color: var(--sm-ink-soft); font-size: .92rem; line-height: 1.45;
}
.class-portrait--compact { padding: 1.2rem 1rem; }
.class-portrait--compact .class-portrait__media { width: 92px; height: 92px; margin-bottom: .7rem; }
.class-portrait--compact .class-portrait__name { font-size: 1.06rem; }
.class-portrait--compact .class-portrait__teacher { font-size: .84rem; }

/* ---------- 17. État connecté dans l'en-tête (sobre) ---------- */
.account { display: inline-flex; align-items: center; gap: .75rem; }
.account__space {
	display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
	border: 1px solid var(--sm-line); border-radius: var(--sm-radius-pill);
	padding: .38rem .9rem; font-weight: 600; font-size: .9rem; color: var(--sm-ink); background: #fff;
	transition: border-color .15s, background .15s;
}
.account__space:hover { border-color: var(--sm-blue); background: var(--sm-blue-soft); color: var(--sm-blue-dark); }
.account__dot { width: 8px; height: 8px; border-radius: 50%; background: #3aa65c; flex: none; }
.account__name { color: var(--sm-muted); font-weight: 600; padding-left: .5rem; border-left: 1px solid var(--sm-line); }
.account__out { font-size: .82rem; color: var(--sm-muted); text-decoration: none; }
.account__out:hover { color: var(--sm-coral); text-decoration: underline; }
@media (max-width: 900px) {
	.account__name, .account__out { display: none; }
}

/* Logo officiel de l'école dans l'en-tête */
.site-brand--logo { gap: 0; }
.site-brand__logo { height: 60px; width: auto; display: block; }
@media (max-width: 560px) { .site-brand__logo { height: 48px; } }

/* ---------- 18. Agenda : bascule Liste / Calendrier ---------- */
.agenda__switch { display: inline-flex; gap: .3rem; background: var(--sm-blue-soft); border-radius: var(--sm-radius-pill); padding: .25rem; margin-bottom: 1.2rem; }
.agenda__tab {
	border: 0; background: transparent; cursor: pointer; font-family: var(--sm-font-body); font-weight: 700;
	font-size: .9rem; color: var(--sm-blue-dark); border-radius: var(--sm-radius-pill); padding: .4rem 1rem;
}
.agenda__tab.is-active { background: var(--sm-blue); color: #fff; box-shadow: var(--sm-shadow-sm); }

/* Grille mensuelle */
.agenda-cal { border: 1px solid var(--sm-line); border-radius: var(--sm-radius-lg); overflow: hidden; background: #fff; }
.agenda-cal__head { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .8rem 1rem; background: var(--sm-blue-soft); }
.agenda-cal__label { font-family: var(--sm-font-display); font-weight: 600; font-size: 1.15rem; color: var(--sm-blue-dark); text-transform: capitalize; min-width: 11rem; text-align: center; }
.agenda-cal__nav {
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sm-line); background: #fff; cursor: pointer;
	font-size: 1.3rem; line-height: 1; color: var(--sm-blue); display: grid; place-items: center;
}
.agenda-cal__nav:hover:not(:disabled) { background: var(--sm-blue); color: #fff; }
.agenda-cal__nav:disabled { opacity: .35; cursor: default; }
.agenda-cal__grid { width: 100%; border-collapse: collapse; display: none; table-layout: fixed; }
.agenda-cal__grid.is-shown { display: table; }
.agenda-cal__grid th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sm-muted); font-weight: 700; padding: .5rem 0; background: var(--sm-paper); }
.agenda-cal__grid td { border: 1px solid var(--sm-line); vertical-align: top; height: 5.2rem; padding: .25rem; width: 14.28%; }
.agenda-cal__grid td.is-empty { background: repeating-linear-gradient(135deg, #fafafa, #fafafa 6px, #fff 6px, #fff 12px); }
.agenda-cal__num { font-size: .82rem; font-weight: 700; color: var(--sm-ink-soft); display: block; text-align: right; padding: 0 .2rem; }
.agenda-cal__day.is-today .agenda-cal__num { background: var(--sm-coral); color: #fff; border-radius: 50%; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; margin-left: auto; padding: 0; }
.agenda-cal__day.has-event { background: #fbfdff; }
.agenda-cal__events { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.agenda-cal__chip {
	font-size: .68rem; line-height: 1.2; background: var(--sm-green-soft); color: #2f6b2a; border-radius: 5px;
	padding: .12rem .3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default;
}
.agenda-cal__more { font-size: .66rem; color: var(--sm-muted); font-weight: 700; padding-left: .2rem; }
@media (max-width: 620px) {
	.agenda-cal__grid td { height: 3.6rem; }
	.agenda-cal__chip { font-size: 0; padding: .28rem; }
	.agenda-cal__chip::before { content: '•'; font-size: .9rem; color: #3aa65c; }
	.agenda-cal__more { display: none; }
	.agenda-cal__label { min-width: 8rem; font-size: 1rem; }
}

/* ---------- 19. Documents joints (téléchargement) ---------- */
.doc-attach {
	display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
	background: var(--sm-blue-soft); border: 1px solid #cfe6f2; border-radius: var(--sm-radius);
	padding: .9rem 1.1rem; margin: 1.6rem 0;
}
.doc-attach__label { font-weight: 700; color: var(--sm-blue-dark); }
.doc-embed { margin: 1.5rem 0; }
.doc-embed img { width: 100%; height: auto; border: 1px solid var(--sm-line); border-radius: var(--sm-radius); box-shadow: var(--sm-shadow-sm); }
.doc-list--files { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .6rem; }
.doc-list--files li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-radius); padding: .8rem 1.1rem; }
.doc-list--files .doc-file__name { font-weight: 600; flex: 1; min-width: 12rem; }

/* ---------- 20. Page Contact ---------- */
.page-hero--contact { background: linear-gradient(180deg, var(--sm-blue-soft), #fff); }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 2.5rem; align-items: start; }
.contact-info { position: sticky; top: 96px; }
.contact-info > h2 { margin-top: 0; }
.contact-details { list-style: none; margin: 1.2rem 0 1.8rem; padding: 0; display: grid; gap: 1rem; }
.contact-details li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-details__ic {
	flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
	background: var(--sm-blue-soft); font-size: 1.15rem;
}
.contact-details a { text-decoration: none; }
.contact-details a:hover { text-decoration: underline; }
.contact-note {
	background: var(--sm-sun); color: var(--sm-ink); border-radius: var(--sm-radius-lg);
	padding: 1.3rem 1.5rem; box-shadow: var(--sm-shadow-sm);
}
.contact-note p { margin: 0 0 .5rem; }
.contact-note .btn { margin-top: .6rem; }
.contact-form-card { margin: 0; }
.contact-form-card h3 { margin-top: 1.4rem; color: var(--sm-blue-dark); }
.contact-form-card h3:first-of-type { margin-top: 0; }
@media (max-width: 860px) {
	.contact-grid { grid-template-columns: 1fr; gap: 1.6rem; }
	.contact-info { position: static; }
}

/* ---------- 21. Hub de connexion ---------- */
.page-hero--hub { background: linear-gradient(180deg, var(--sm-blue-soft), #fff); }
.hub__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.hub__card {
	display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
	background: #fff; border: 2px solid var(--sm-line); border-radius: var(--sm-radius-lg);
	padding: 1.6rem 1rem; cursor: pointer; font-family: var(--sm-font-body); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.hub__card:hover { transform: translateY(-3px); box-shadow: var(--sm-shadow-sm); border-color: var(--sm-blue); }
.hub__card.is-active { border-color: var(--sm-blue); background: var(--sm-blue-soft); box-shadow: var(--sm-shadow-sm); }
.hub__emoji { font-size: 2.2rem; }
.hub__title { font-family: var(--sm-font-display); font-weight: 600; font-size: 1.2rem; color: var(--sm-ink); }
.hub__desc { font-size: .85rem; color: var(--sm-muted); }
.hub__panel { display: none; }
.hub__panel.is-open { display: block; animation: sm-fade .2s ease; }
.hub__admin { text-align: center; margin-top: 1.5rem; }
.hub__admin a { color: var(--sm-muted); font-size: .9rem; }
@keyframes sm-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) { .hub__cards { grid-template-columns: 1fr; } }

/* ---------- 22. Espace enseignant (front, mobile) ---------- */
.page-hero--prof { background: linear-gradient(180deg, var(--sm-green-soft), #fff); }
/* Onglets de l'espace enseignant : grille responsive (jamais de scroll horizontal). */
.prof-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin-bottom: 1.6rem; }
.prof-tab {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-align: center;
	padding: .75rem 1rem; min-height: 48px; border-radius: var(--sm-radius); background: #fff; border: 1px solid var(--sm-line);
	font-family: var(--sm-font-display); font-weight: 600; color: var(--sm-ink); text-decoration: none; line-height: 1.15;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.prof-tab span[aria-hidden] { font-size: 1.05em; }
.prof-tab:hover { border-color: var(--sm-blue); color: var(--sm-blue-dark); }
.prof-tab.is-active { background: var(--sm-blue); color: #fff; border-color: var(--sm-blue); box-shadow: var(--sm-shadow-sm); }
/* Agenda : dates repliées derrière « Voir plus » (l'attribut hidden doit gagner sur display). */
.agenda-item[hidden] { display: none; }
.agenda-more-wrap { text-align: center; margin: .8rem 0 0; }

/* Sélecteur de classe (enseignant·e multi-classes) : rangée de pilules au-dessus des onglets. */
.prof-tabs--classes { display: flex; flex-wrap: wrap; grid-template-columns: none; margin-bottom: .7rem; }
.prof-tabs--classes .prof-tab { flex: 0 0 auto; min-height: 42px; padding: .5rem .95rem; border-radius: var(--sm-radius-pill); background: var(--sm-paper); }
.prof-tabs--classes .prof-tab.is-active { background: var(--sm-blue-dark); border-color: var(--sm-blue-dark); }
/* « Quitter » isolé sur sa propre ligne, en bas, façon action secondaire. */
.prof-tab--out { grid-column: 1 / -1; background: transparent; border-style: dashed; border-color: var(--sm-line); color: var(--sm-muted); min-height: 44px; }
.prof-tab--out:hover { border-color: var(--sm-coral); color: var(--sm-coral); background: #fff; }
@media (max-width: 520px) { .prof-tabs { grid-template-columns: repeat(2, 1fr); } }

.prof-file { display: block; width: 100%; padding: .8rem; border: 2px dashed var(--sm-blue); border-radius: var(--sm-radius); background: var(--sm-blue-soft); font-size: 1rem; cursor: pointer; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: 1rem 0; }
.photo-grid__item { position: relative; display: block; border-radius: var(--sm-radius); overflow: hidden; aspect-ratio: 1; background: var(--sm-blue-soft); }
.photo-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid--gallery .photo-grid__item { box-shadow: var(--sm-shadow-sm); }
.photo-grid__del {
	position: absolute; top: .35rem; right: .35rem; width: 28px; height: 28px; border-radius: 50%;
	background: rgba(20,30,40,.72); color: #fff; display: grid; place-items: center; text-decoration: none;
	font-size: .9rem; line-height: 1;
}
.photo-grid__del:hover { background: var(--sm-coral); color: #fff; }

/* ---------- 23. Uploader de photos moderne ---------- */
.sm-uploader { margin: 1rem 0 1.6rem; }
.sm-drop {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
	text-align: center; padding: 2rem 1.2rem; cursor: pointer;
	border: 2.5px dashed #b9d6e6; border-radius: var(--sm-radius-lg); background: var(--sm-blue-soft);
	transition: border-color .15s, background .15s, transform .1s;
}
.sm-drop:hover { border-color: var(--sm-blue); }
.sm-drop.is-dragover { border-color: var(--sm-blue); background: #d6ebf6; transform: scale(1.01); }
.sm-drop__icon { font-size: 2.4rem; line-height: 1; }
.sm-drop__title { font-family: var(--sm-font-display); font-weight: 600; font-size: 1.15rem; color: var(--sm-blue-dark); }
.sm-drop__hint { font-size: .88rem; color: var(--sm-muted); }
.sm-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sm-drop:focus-within { outline: 3px solid var(--sm-sun); outline-offset: 2px; }

.sm-uploader__bar { height: 8px; border-radius: 999px; background: var(--sm-line); overflow: hidden; margin-top: 1rem; }
.sm-uploader__bar-fill { display: block; height: 100%; width: 0; background: var(--sm-blue); transition: width .25s ease; }
.sm-uploader__bar-fill.is-error { background: var(--sm-coral); }
.sm-uploader__summary { margin-top: .6rem; font-weight: 600; color: var(--sm-blue-dark); }

.sm-uploader__queue { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.up-item { display: flex; gap: .8rem; align-items: center; background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-radius); padding: .6rem .8rem; }
.up-item__thumb { flex: none; width: 46px; height: 46px; border-radius: 10px; background: var(--sm-blue-soft) center/cover no-repeat; }
.up-item__body { flex: 1; min-width: 0; }
.up-item__name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-item__track { height: 6px; border-radius: 999px; background: var(--sm-line); overflow: hidden; margin: .3rem 0; }
.up-item__fill { display: block; height: 100%; width: 0; background: var(--sm-blue); transition: width .2s ease; }
.up-item__status { font-size: .78rem; color: var(--sm-muted); }
.up-item.is-done { border-color: #bfe3b4; background: var(--sm-green-soft); }
.up-item.is-done .up-item__fill { background: #3aa65c; }
.up-item.is-done .up-item__status { color: #2f6b2a; font-weight: 700; }
.up-item.is-error { border-color: #f0b8ab; background: var(--sm-coral-soft); }
.up-item.is-error .up-item__fill { background: var(--sm-coral); }
.up-item.is-error .up-item__status { color: var(--sm-coral); font-weight: 700; }
.album-gallery__title { margin-top: 1.5rem; }
@keyframes sm-pop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.photo-grid__item.is-new { animation: sm-pop .25s ease; }

/* ---------- 24. Visionneuse d'album (lightbox) ---------- */
.photo-grid[data-lightbox] .photo-grid__item { cursor: zoom-in; }
body.sm-lb-open { overflow: hidden; }
.sm-lb[hidden] { display: none; }
.sm-lb {
	position: fixed; inset: 0; z-index: 1000; display: grid;
	grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto;
	align-items: center; gap: .5rem; padding: clamp(.6rem, 2vw, 1.5rem);
	background: rgba(15, 26, 34, .93); backdrop-filter: blur(4px);
}
.sm-lb__stage { grid-column: 2; grid-row: 1; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.sm-lb__img { max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: var(--sm-radius); box-shadow: 0 20px 60px -20px rgba(0,0,0,.8); background: #0c141b; }
.sm-lb__cap { color: #eef4f8; margin-top: .7rem; font-size: .95rem; text-align: center; max-width: 60ch; }
.sm-lb__close {
	grid-column: 3; grid-row: 1; align-self: start; justify-self: end;
	width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.14); color: #fff; font-size: 1.2rem; line-height: 1;
}
.sm-lb__close:hover { background: var(--sm-coral); }
.sm-lb__nav {
	width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.14); color: #fff; font-size: 2rem; line-height: 1; display: grid; place-items: center;
	grid-row: 1; align-self: center;
}
.sm-lb__nav:hover { background: var(--sm-blue); }
.sm-lb__prev { grid-column: 1; }
.sm-lb__next { grid-column: 3; }
.sm-lb__count { grid-column: 2; grid-row: 1; align-self: start; justify-self: center; color: #cdd9e1; font-weight: 700; font-size: .85rem; background: rgba(0,0,0,.35); padding: .2rem .7rem; border-radius: var(--sm-radius-pill); }
.sm-lb__strip { grid-column: 1 / -1; grid-row: 2; display: flex; gap: .4rem; overflow-x: auto; padding: .4rem; scrollbar-width: thin; }
.sm-lb__thumb {
	flex: none; width: 60px; height: 60px; border-radius: 8px; border: 2px solid transparent; cursor: pointer;
	background: #223 center/cover no-repeat; opacity: .55; transition: opacity .15s, border-color .15s;
}
.sm-lb__thumb:hover { opacity: .85; }
.sm-lb__thumb.is-active { opacity: 1; border-color: var(--sm-sun); }
@media (max-width: 640px) {
	.sm-lb__nav { width: 40px; height: 40px; font-size: 1.5rem; }
	.sm-lb__img { max-height: 64vh; }
	.sm-lb__thumb { width: 48px; height: 48px; }
}

/* Widget Turnstile */
.sm-turnstile { margin: 0 0 1.1rem; }

/* ---------- 25. Page de classe : en-tête d'infos utiles ---------- */
.class-head {
	display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; align-items: start;
	background: linear-gradient(180deg, var(--sm-blue-soft), #fff); border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-lg); padding: 1.6rem 1.8rem; margin-bottom: 2rem;
}
.class-head__intro { display: flex; gap: 1.2rem; align-items: center; }
.class-head__portrait { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--sm-blue-soft); }
.class-head__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.class-head__cycle { display: inline-block; font-family: var(--sm-font-display); font-weight: 600; color: var(--sm-coral); text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; }
.class-head__teacher { font-family: var(--sm-font-display); font-weight: 600; font-size: 1.35rem; color: var(--sm-blue-dark); margin: .15rem 0 0; }
.class-head__quote { margin: .5rem 0 0; padding: 0; border: 0; font-style: italic; color: var(--sm-ink-soft); }
.class-head__cards { display: grid; gap: .8rem; }
.info-card { background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-radius); padding: .9rem 1.1rem; }
.info-card--next { background: var(--sm-sun); border-color: transparent; }
.info-card--contact { background: var(--sm-green-soft); border-color: #cfe8c6; }
.info-card__label { display: block; font-weight: 700; font-size: .8rem; margin-bottom: .25rem; }
.info-card__title { font-family: var(--sm-font-display); font-size: 1.05rem; display: block; }
.info-card__meta { font-size: .85rem; color: var(--sm-ink-soft); }
.info-card__body { font-size: .92rem; }
.info-card__body p { margin: 0 0 .3rem; }
.info-card__body a { font-weight: 600; }
.class-section { margin-top: 2.5rem; }
@media (max-width: 760px) {
	.class-head { grid-template-columns: 1fr; padding: 1.3rem; }
	.class-head__intro { flex-direction: column; text-align: center; }
}

/* ---------- 26. Liste de réservations de matériel ---------- */
.resa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.resa-item { display: flex; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-radius); padding: .8rem 1.1rem; }
.resa-item__date { flex: none; width: 58px; text-align: center; background: var(--sm-blue-soft); border-radius: 12px; padding: .45rem 0; line-height: 1.1; }
.resa-item__date .d { font-family: var(--sm-font-display); font-weight: 700; font-size: 1.3rem; color: var(--sm-blue-dark); display: block; }
.resa-item__date .m { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sm-coral); }
.resa-item__body { flex: 1; min-width: 0; }
.resa-item__mat { display: inline-block; font-family: var(--sm-font-display); font-weight: 600; font-size: .8rem; background: var(--sm-ink); color: #fff; border-radius: var(--sm-radius-pill); padding: .12rem .7rem; }
.resa-item__time { margin: .3rem 0 0; font-weight: 600; }
.resa-item__who { margin: .1rem 0 0; font-size: .85rem; color: var(--sm-muted); }
.resa-item__cancel { flex: none; }

/* ---------- 27. Espace parent : blocs & communications ---------- */
.parent-block { margin-top: 2.5rem; }
.parent-block > h2 { margin-bottom: 1rem; }
.parent-block__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.parent-block__head h2 { margin: 0; }
.comm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.comm-item { background: #fff; border: 1px solid var(--sm-line); border-left: 4px solid var(--sm-coral); border-radius: var(--sm-radius); padding: 1rem 1.2rem; }
.comm-item__head { display: flex; align-items: center; gap: .6rem; }
.comm-item__title { font-family: var(--sm-font-display); font-weight: 600; font-size: 1.08rem; }
.comm-item__new { background: var(--sm-coral); color: #fff; border-radius: var(--sm-radius-pill); font-size: .68rem; font-weight: 700; padding: .08rem .55rem; text-transform: uppercase; letter-spacing: .03em; }
.comm-item__meta { color: var(--sm-muted); font-size: .82rem; margin: .15rem 0 .5rem; }
.comm-item__body { color: var(--sm-ink-soft); }
.comm-item__body p { margin: 0 0 .4rem; }

/* ---------- Boutons compacts ---------- */
.btn--sm { padding: .48rem 1rem; font-size: .9rem; }

/* ---------- Documents officiels lisibles (espace parents) ---------- */
.doc-valid { display: grid; gap: 1rem; }
.doc-valid__item {
	border: 1px solid var(--sm-line); border-radius: var(--sm-radius);
	padding: 1.1rem 1.2rem; background: #fff; box-shadow: var(--sm-shadow-sm);
}
.doc-valid__item.is-ok { background: #fbfefc; border-color: #cdead9; }
.doc-valid__top { display: flex; gap: .8rem; align-items: flex-start; }
.doc-valid__ico { font-size: 1.4rem; line-height: 1.2; flex: 0 0 auto; }
.doc-valid__head { flex: 1; min-width: 0; }
.doc-valid__head strong { font-family: var(--sm-font-display); font-size: 1.1rem; }
.doc-valid__meta { display: block; color: var(--sm-muted); font-size: .85rem; }
.doc-valid__flag { display: block; color: var(--sm-coral); font-weight: 600; font-size: .9rem; margin-top: .2rem; }
.doc-valid__read { margin: .9rem 0 0; border: 1px solid var(--sm-line); border-radius: 12px; overflow: hidden; }
.doc-valid__read summary {
	cursor: pointer; list-style: none; padding: .7rem 1rem; background: var(--sm-blue-soft);
	font-weight: 600; color: var(--sm-blue-dark); user-select: none;
}
.doc-valid__read summary::-webkit-details-marker { display: none; }
.doc-valid__read[open] summary { border-bottom: 1px solid var(--sm-line); }
.doc-valid__body { padding: 1rem 1.2rem; color: var(--sm-ink-soft); }
.doc-valid__body h3, .doc-valid__body h4 { color: var(--sm-ink); }
.doc-valid__body p { margin: 0 0 .7rem; }
.doc-valid__body ul, .doc-valid__body ol { margin: 0 0 .7rem 1.2rem; }
.doc-valid__file { margin: .8rem 0 0; }
.doc-valid__empty { color: var(--sm-muted); font-style: italic; margin: .8rem 0 0; }
.doc-valid__check {
	display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem;
	padding-top: .9rem; border-top: 1px dashed var(--sm-line); font-weight: 600;
}
.doc-valid__check input { margin-top: .25rem; transform: scale(1.2); accent-color: var(--sm-blue); }
.doc-valid__item.is-ok .doc-valid__check { opacity: .75; }

/* ---------- Boutons d'accès rapide (page de classe) ---------- */
.class-quicklinks { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.6rem; }
.ql-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--sm-blue); color: #fff; text-decoration: none;
	font-family: var(--sm-font-display); font-weight: 600;
	padding: .7rem 1.3rem; border-radius: var(--sm-radius-pill);
	box-shadow: var(--sm-shadow-sm); transition: transform .15s ease, background .15s ease;
}
.ql-btn::before { content: "→"; font-weight: 700; }
.ql-btn:hover { background: var(--sm-blue-dark); color: #fff; transform: translateY(-2px); }

/* ---------- 28. Micro-animations & apparitions au défilement ---------- */
/* Entrée du hero au chargement */
@keyframes sm-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero-lg__eyebrow { animation: sm-rise .7s cubic-bezier(.22,.61,.36,1) backwards; }
.hero-lg__title   { animation: sm-rise .7s cubic-bezier(.22,.61,.36,1) .12s backwards; }
.hero-lg__lead    { animation: sm-rise .7s cubic-bezier(.22,.61,.36,1) .24s backwards; }
.hero-lg__overlay .hero__actions { animation: sm-rise .7s cubic-bezier(.22,.61,.36,1) .36s backwards; }
/* Lent zoom « Ken Burns » sur les photos du hero */
@keyframes sm-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-lg__slider .slider__slide img,
.hero-lg__slider > img { animation: sm-kenburns 18s ease-in-out infinite alternate; }

/* Apparition au défilement : .reveal est posé par le JS (invisible tant que
   l'élément n'est pas entré dans le viewport), puis .is-inview l'anime.
   L'animation ne laisse aucun transform résiduel → les hovers restent intacts. */
.reveal { opacity: 0; }
.reveal.is-inview { opacity: 1; animation: sm-rise .6s cubic-bezier(.22,.61,.36,1) backwards; }

/* Hovers doux supplémentaires */
.class-portrait { transition: transform .18s ease, box-shadow .18s ease; }
.class-portrait:hover { transform: translateY(-4px); box-shadow: var(--sm-shadow); }
.agenda-item { transition: border-color .15s ease, transform .15s ease; }
.agenda-item:hover { border-color: var(--sm-blue); transform: translateX(3px); }

/* ---------- 29. États de chargement ---------- */
/* Bouton en cours d'envoi : le libellé s'efface, un anneau tourne à la place */
@keyframes sm-spin { to { transform: rotate(360deg); } }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 1.15em; height: 1.15em; border-radius: 50%;
	border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
	animation: sm-spin .7s linear infinite;
}
.btn--ghost.is-loading::after, .btn--light.is-loading::after,
.btn--sun.is-loading::after {
	border-color: rgba(30,111,159,.25); border-top-color: var(--sm-blue);
}

/* Barre de progression en haut de page pendant une navigation / connexion */
.page-loader { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000; pointer-events: none; opacity: 0; transition: opacity .2s; }
.page-loader__fill {
	display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--sm-sun), var(--sm-coral), var(--sm-blue));
	border-radius: 0 999px 999px 0;
}
.page-loader.is-active { opacity: 1; }
.page-loader.is-active .page-loader__fill { animation: sm-loadbar 2.5s cubic-bezier(.15,.6,.3,1) forwards; }
@keyframes sm-loadbar { 0% { width: 0; } 55% { width: 62%; } 100% { width: 88%; } }

/* ---------- Éditeur de boutons rapides (formulaire prof) ---------- */
.ql-editor { display: grid; gap: .6rem; margin-bottom: .3rem; }
.ql-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: .6rem; align-items: center; }
.ql-row input { margin: 0; }
.ql-del {
	flex: none; width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
	background: var(--sm-coral-soft); color: var(--sm-coral); border: 1px solid transparent;
	font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.ql-del:hover { background: var(--sm-coral); color: #fff; }
@media (max-width: 560px) {
	.ql-row { grid-template-columns: 1fr auto; }
	.ql-row input[type="url"] { grid-column: 1 / 2; }
	.ql-del { grid-row: 1 / 3; align-self: stretch; height: auto; }
}

/* ---------- 30. Bloc-notes de l'accueil (post-it) ---------- */
.postit-section { background: linear-gradient(180deg, #fffdf6, var(--sm-paper)); }
.postit-board {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1.2rem, 3vw, 2rem); max-width: 64rem; margin-inline: auto; align-items: start;
}
.postit {
	position: relative; padding: 1.9rem 1.4rem 1.3rem; border-radius: 2px 2px 14px 2px;
	box-shadow: 0 12px 22px -14px rgba(35, 48, 58, .45);
	transform: rotate(-1.6deg); transition: transform .2s ease, box-shadow .2s ease;
	font-size: .98rem; line-height: 1.55;
}
.postit:nth-child(2n) { transform: rotate(1.3deg); }
.postit:nth-child(3n) { transform: rotate(-.7deg); }
.postit:hover { transform: rotate(0) translateY(-5px); box-shadow: 0 18px 30px -16px rgba(35, 48, 58, .5); }
/* Le morceau de ruban adhésif */
.postit::before {
	content: ""; position: absolute; top: -13px; left: 50%; width: 92px; height: 27px;
	transform: translateX(-50%) rotate(-2.5deg);
	background: rgba(255, 255, 255, .55); border: 1px solid rgba(35, 48, 58, .08);
	box-shadow: 0 2px 5px -2px rgba(35, 48, 58, .2);
}
.postit--jaune { background: #fff6c4; }
.postit--bleu  { background: #ddf0fb; }
.postit--rose  { background: #fde3ea; }
.postit--vert  { background: #e5f5dc; }
.postit__title { font-size: 1.12rem; margin-bottom: .45rem; }
.postit__body { color: var(--sm-ink-soft); }
.postit__body a { overflow-wrap: anywhere; }
.postit__link { display: inline-block; margin-top: .55rem; font-weight: 800; font-family: var(--sm-font-display); text-decoration-thickness: .12em; }
.postit__date { display: block; margin-top: .8rem; font-size: .78rem; color: rgba(35, 48, 58, .5); text-align: right; }

/* ---------- 31. Fiche santé & autorisations (espace parents) ---------- */
.fiche-child {
	border: 1px solid var(--sm-line); border-radius: var(--sm-radius);
	padding: 1.1rem 1.3rem 1.2rem; margin: 0 0 1.4rem; background: #fff;
}
.fiche-child legend { font-family: var(--sm-font-display); font-weight: 600; font-size: 1.1rem; padding: 0 .5rem; color: var(--sm-blue-dark); }
.fiche-q { margin-bottom: 1.1rem; }
.fiche-q:last-child { margin-bottom: 0; }
.fiche-q__label { font-weight: 700; margin: 0 0 .45rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.choice { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-weight: 500; }
.fiche-cond { margin-top: .7rem; padding: .85rem 1rem; background: var(--sm-blue-soft); border-radius: 12px; }
.fiche-cond[hidden] { display: none; }
.fiche-cond label { font-weight: 600; }
.fiche-cond textarea { width: 100%; margin-top: .4rem; }
.fiche-cond .pill { cursor: pointer; }
.fiche-error[hidden] { display: none; }

/* ---------- 32. Facebook (en-tête + pied de page) ---------- */
.social-fb {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%; flex: none;
	background: var(--sm-blue-soft); color: var(--sm-blue-dark);
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.social-fb:hover { background: #1877f2; color: #fff; transform: translateY(-1px); }
.social-fb svg { display: block; }
.footer-fb { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; }
.footer-fb svg { flex: none; }

/* Portraits de titulaires : si l'image servie n'est pas le carré sm_avatar
   (ancien upload non régénéré), garder le haut de la photo — les visages. */
.class-portrait__media img, .class-head__portrait img { object-position: 50% 25%; }

/* Annuaire des classes : carte cliquable si l'utilisateur peut voir la page. */
.class-portrait--link { position: relative; }
.class-portrait__go { color: inherit; text-decoration: none; }
.class-portrait__go::after { content: ""; position: absolute; inset: 0; border-radius: var(--sm-radius-lg); }
.class-portrait--link:hover { box-shadow: var(--sm-shadow); }
.class-portrait--link:hover .class-portrait__go { color: var(--sm-blue-dark); }

/* Visionneuse PDF des documents officiels (espace parents). */
.doc-valid__pdf { display: block; width: 100%; height: min(72vh, 680px); border: 0; background: #fff; }
@media (max-width: 700px) { .doc-valid__pdf { height: 60vh; } }