@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Sriracha&family=Chelsea+Market&display=swap');

/* ============================================================
   École Communale de Perwez — thème personnalisé
   Palette :
     --primary  : #1F1B95  (bleu institutionnel, fond du menu)
     --secondary: #27AE60  (vert nature)
     --accent   : #F5A623  (jaune/or accent)
     --dark     : #2D3748
     --light    : #FFFFFF
   Typo :
     --school-font : famille "système" chaleureuse (pas de webfont à charger)
   ============================================================ */

:root {
  --school-primary:   #1F1B95;
  --school-secondary: #27AE60;
  --school-accent:    #F5A623;
  --school-dark:      #2D3748;
  --school-light:     #FFFFFF;
  --school-gray:      #F4F6F9;
  --school-border:    #E2E8F0;
  --school-font: 'Comic Sans MS', 'comic-sans-w01-regular', cursive;
  --font-patrick-hand: 'Patrick Hand', var(--school-font);
  --font-sriracha: 'Sriracha', cursive;
  --font-chelsea-market: 'Chelsea Market', var(--school-font);
  --school-gradient: linear-gradient(262deg, #3934E0 19%, #BDE9FB 52%, #70F0A6 83%);
  --brand-bar-height: 275px;        /* logo (233x257) + marge réduite, taille du site d'origine */
  --nav-bar-height:   2.8rem;
  --header-total:     calc(var(--brand-bar-height) + var(--nav-bar-height));
  --brand-bar-height-sm: 3rem;
  --nav-bar-height-sm:   2.4rem;
  --header-total-sm:  5.4rem;
}

/* ---- Typographie ---- */
body {
  font-family: var(--school-font);
  font-size: 18px;
  color: rgb(47, 21, 122);
  /* Fond blanc uni. Dégradé du template par défaut du site d'origine,
     remplacé à la demande de la direction :
     --bg-gradient: linear-gradient(63deg, #AFF0CA 0%, #BDE9FB 100%);
     --bg-overlay-color: transparent; */
  background-color: #fff;
  background-image: none;
}
h1, h2, h3, h4, h5, h6,
.school-name, .school-tagline {
  font-family: var(--school-font);
}

/* ---- Global overrides ---- */
a { color: var(--school-primary); }
a:hover { color: var(--school-secondary); }

/* ---- Boutons (.btn, spectre) : couleurs/typo/rayon du site, appliqués
   globalement. Reprend le traitement déjà utilisé localement sur
   #grav-login .btn et .contact-form button (voir plus bas) plutôt que
   les couleurs génériques Spectre ($primary-color orange de
   _variables.scss). ---- */
.btn {
  font-family: var(--school-font);
  font-weight: 700;
  border-radius: 6px;
  border-width: 2px;
  border-style: solid;
  box-shadow: none;
}

/* Bouton "par défaut" (sans variante de couleur) : contour bleu sur
   fond blanc, même logique que .carousel-btn plus bas. */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-link):not(.btn-clear) {
  background: #fff;
  border-color: var(--school-primary);
  color: var(--school-primary);
}
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-link):not(.btn-clear):hover,
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-link):not(.btn-clear):focus {
  background: var(--school-primary);
  border-color: var(--school-primary);
  color: #fff;
}
/* Halo au focus (accessibilité clavier) : remplace le halo orange
   ($primary-color de Spectre, via le mixin control-shadow()) par un halo
   aux couleurs de l'école. */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-link):not(.btn-clear):focus {
  box-shadow: 0 0 0 0.1rem rgba(31, 27, 149, 0.25);
}
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-link):not(.btn-clear):active,
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-link):not(.btn-clear).active {
  background: #19167A;
  border-color: #19167A;
  color: #fff;
}

/* Images et embeds (iframe/PDF via shortcode-media) toujours contenus dans
   leur colonne : theme.css a déjà `img{max-width:100%}` mais pas
   `height:auto`, donc une image avec un attribut height="…" figé (ajouté par
   TinyMCE) s'écrasait/s'étirait quand sa largeur se réduisait pour tenir
   dans une cellule de tableau ou une colonne étroite. Idem pour les iframes,
   qui n'avaient aucune limite de largeur. */
img {
  height: auto;
}
iframe {
  max-width: 100%;
}

/* Bouton principal : bleu institutionnel */
.btn-primary,
.btn.btn-primary {
  background: var(--school-primary);
  border-color: var(--school-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background: #19167A;
  border-color: #19167A;
  color: #fff;
}
.btn-primary:focus,
.btn.btn-primary:focus {
  box-shadow: 0 0 0 0.1rem rgba(31, 27, 149, 0.25);
}
.btn-primary:active,
.btn-primary.active,
.btn.btn-primary:active,
.btn.btn-primary.active {
  background: #121058;
  border-color: #121058;
}

/* Bouton secondaire : vert nature */
.btn-secondary,
.btn.btn-secondary {
  background: var(--school-secondary);
  border-color: var(--school-secondary);
  color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
  background: #1e8449;
  border-color: #1e8449;
  color: #fff;
}
.btn-secondary:focus,
.btn.btn-secondary:focus {
  box-shadow: 0 0 0 0.1rem rgba(39, 174, 96, 0.25);
}
.btn-secondary:active,
.btn-secondary.active,
.btn.btn-secondary:active,
.btn.btn-secondary.active {
  background: #196f3d;
  border-color: #196f3d;
}

/* Bouton lien : reprend la couleur des liens du site (voir règle `a`
   ci-dessus), pas de fond ni de contour. */
.btn-link,
.btn.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--school-primary);
}
.btn-link:hover,
.btn-link:focus,
.btn.btn-link:hover,
.btn.btn-link:focus {
  color: var(--school-secondary);
}
.btn-link:focus,
.btn.btn-link:focus {
  box-shadow: 0 0 0 0.1rem rgba(31, 27, 149, 0.25);
}

/* ---- Boutons "button" (classe des formulaires Grav core — form-builder,
   appointments, login...) : ".button { @extend .btn; }" dans le SCSS du
   thème (_extensions.scss) ne couvre que le look Spectre générique compilé
   dans theme.min.css, pas les couleurs école ci-dessus (school.css n'est
   pas passé par ce build) : on réapplique donc le même traitement ici,
   avec en plus les variantes .primary (bleu), .secondary (vert) et .danger
   (rouge) utilisées par ces formulaires (ex. login : "button primary"/
   "button secondary"). */
.button {
  font-family: var(--school-font);
  font-weight: 700;
  border-radius: 6px;
  border-width: 2px;
  border-style: solid;
  box-shadow: none;
}
.button:not(.primary):not(.secondary):not(.danger) {
  background: #fff;
  border-color: var(--school-primary);
  color: var(--school-primary);
}
.button:not(.primary):not(.secondary):not(.danger):hover,
.button:not(.primary):not(.secondary):not(.danger):focus {
  background: var(--school-primary);
  border-color: var(--school-primary);
  color: #fff;
}
.button:not(.primary):not(.secondary):not(.danger):focus {
  box-shadow: 0 0 0 0.1rem rgba(31, 27, 149, 0.25);
}
.button:not(.primary):not(.secondary):not(.danger):active {
  background: #19167A;
  border-color: #19167A;
  color: #fff;
}

/* Bouton principal : bleu institutionnel (même palette que .btn-primary) */
.button.primary {
  background: var(--school-primary);
  border-color: var(--school-primary);
  color: #fff;
}
.button.primary:hover,
.button.primary:focus {
  background: #19167A;
  border-color: #19167A;
  color: #fff;
}
.button.primary:focus {
  box-shadow: 0 0 0 0.1rem rgba(31, 27, 149, 0.25);
}
.button.primary:active {
  background: #121058;
  border-color: #121058;
}

/* Bouton secondaire : vert nature (même palette que .btn-secondary) */
.button.secondary {
  background: var(--school-secondary);
  border-color: var(--school-secondary);
  color: #fff;
}
.button.secondary:hover,
.button.secondary:focus {
  background: #1e8449;
  border-color: #1e8449;
  color: #fff;
}
.button.secondary:focus {
  box-shadow: 0 0 0 0.1rem rgba(39, 174, 96, 0.25);
}
.button.secondary:active {
  background: #196f3d;
  border-color: #196f3d;
}

/* Bouton danger : rouge, pour les actions destructives (suppression...) */
.button.danger {
  background: #C53030;
  border-color: #C53030;
  color: #fff;
}
.button.danger:hover,
.button.danger:focus {
  background: #9B2C2C;
  border-color: #9B2C2C;
  color: #fff;
}
.button.danger:focus {
  box-shadow: 0 0 0 0.1rem rgba(197, 48, 48, 0.25);
}
.button.danger:active {
  background: #822727;
  border-color: #822727;
}

/* Boutons dans les listes d'items (.items-list — ex. mailbox du plugin
   broadcast : bouton "Voir le message", liens article précédent/suivant) :
   héritent déjà du style par défaut de .button ci-dessus par la cascade,
   on le réaffirme explicitement ici pour ce conteneur. */
.items-list .button:not(.primary):not(.secondary):not(.danger) {
  background: #fff;
  color: var(--school-primary);
}
.items-list .button:not(.primary):not(.secondary):not(.danger):hover,
.items-list .button:not(.primary):not(.secondary):not(.danger):focus {
  background: var(--school-primary);
  color: #fff;
}
.items-list .button:not(.primary):not(.secondary):not(.danger):active {
  background: #19167A;
  color: #fff;
}

/* École : school-manager.css (.items-list article footer .actions a,
   .items-list .button) impose un look "neumorphique" (fond gris, rayon
   30px, double ombre portée, sans bordure), avec la même spécificité
   (2 classes) que le style par défaut ci-dessus : il gagne sur
   border-radius/box-shadow/border car il est chargé avant school.css.
   On reprend le même sélecteur ici (equal specificity, mais après dans
   la cascade) pour les écraser avec le rayon/l'absence d'ombre du site,
   et on supprime la bordure (pas de contour bleu ici, contrairement au
   style par défaut de .button plus haut). */
.items-list article footer .actions a,
.items-list .button {
  border-radius: 6px;
  box-shadow: none;
  border: none;
}
.items-list article footer .actions a:focus,
.items-list .button:focus {
  box-shadow: 0 0 0 0.1rem rgba(31, 27, 149, 0.25);
}

/* Même chose pour le fond gris du footer lui-même (school-manager.css
   ".items-list article footer { background-color: #F0F0F0; }"). */
.items-list article footer {
  background-color: transparent;
}

/* Fond du header d'item : bleu institutionnel plutôt que la variable
   --grad définie par item (school-manager.css ".items-list header").
   Note : sur la mailbox du plugin broadcast (message_item.html.twig),
   --grad servait aussi d'indicateur lu (vert) / non lu (orange) — ce
   changement uniformise en bleu et perd cette distinction visuelle. */
.items-list header {
  background-color: var(--school-primary);
  /* school-manager.css : padding: 2rem 1rem 1rem 1.5rem — top réduit */
  padding-top: 1rem;
}

/* Titre d'item : police du site (voir la règle h1-h6 plus haut) plutôt
   que le "sans-serif" imposé par school-manager.css (".items-list h3 {
   font: 900 1.25em/1.25 sans-serif; }" — le raccourci "font" écrase la
   famille pour ce h3 avec une spécificité plus élevée que h1-h6 seul). */
.items-list h3 {
  font-family: var(--school-font);
}

/* Fond bleu institutionnel en permanence (ouvert ou fermé) plutôt que
   blanc par défaut / vert #2BB17A à l'ouverture (school-manager.css
   ".items-list details[open] summary"). */
.items-list summary {
  background-color: var(--school-primary);
}
.items-list details[open] summary {
  background-color: var(--school-primary);
}
.items-list details[open] summary::after {
  background-color: var(--school-primary);
}

/* Texte du header toujours blanc : .items-list header (plus haut) a
   maintenant un fond bleu institutionnel en permanence, pas seulement
   à l'ouverture — le texte doit donc rester blanc que le details soit
   ouvert ou fermé (school-manager.css ne le met en blanc que sur
   ".items-list details[open] summary h3/header", et laisse #030303
   (quasi noir) par défaut, illisible sur fond bleu). */
.items-list summary h3,
.items-list summary header {
  color: #fff;
}

/* Div interne de .notebook (notebook.html.twig) : le total généraux/
   optionnels sous le tableau, ou le message "pas de bulletin" quand
   l'enfant n'a pas d'équipe — n'avaient aucun padding. */
.notebook > div {
  padding: 1rem;
}

/* Badges d'item (school-manager.css .item-badges) */
.item-badges {
  padding-top: 30px;
  padding-right: 10px;
}

/* Timeline du plugin behavior (timeline.css) : .timeline__event__content
   est dimensionné en "calc(40vw - 84px)", relatif à la largeur du
   viewport plutôt qu'à la zone (colonne de contenu, sidebar...) où
   l'élément se trouve réellement — il peut donc déborder de son
   conteneur. max-width complète width sans avoir à lutter en spécificité
   contre la règle d'origine. */
.timeline__event {
  max-width: 100%;
  box-sizing: border-box;
}
.timeline__event__content {
  max-width: 100%;
  box-sizing: border-box;
}

/* ---- Header : deux barres empilées ---- */

/* Wrapper fixé en haut de page — fond du site d'origine (#SITE_HEADER
   --bg-overlay-color: rgb(31, 27, 149)) derrière le dégradé et le menu */
#site-header {
  width: 100%;
  z-index: 100;
  background: #1F1B95;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.header-fixed #site-header {
  position: fixed;
  top: 0;
}

/* La barre brand hérite du fixed de #header via le compiled CSS —
   on annule le positionnement individuellement et on fixe la hauteur */
#header {
  position: static !important;
  height: var(--brand-bar-height) !important;
  background: var(--school-gradient) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
#header .navbar-section,
#header .school-brand-bar {
  height: var(--brand-bar-height) !important;
}

/* Barre navigation : pas de fond propre, elle laisse voir le fond de
   #site-header (#1F1B95) derrière elle, comme sur le site d'origine */
#header-nav {
  box-shadow: 0 2px 3px rgba(0,0,0,0.7); /* valeur exacte du site d'origine */
  height: var(--nav-bar-height);
  display: flex;
  align-items: center;
}
#header-nav .container {
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
}
.school-nav-inner {
  display: flex;
  align-items: center;
  height: var(--nav-bar-height);
}

/* Body offset = brand + nav */
body.header-fixed #body-wrapper {
  padding-top: var(--header-total) !important;
}
body.header-fixed .hero + #start > #body-wrapper {
  padding-top: 0 !important;
}
body.header-fixed .modular-hero.hero {
  margin-top: var(--header-total);
}
/* Le margin-top doit rétrécir en même temps que le header (voir #header.scrolled
   plus bas), sinon un espace blanc apparaît entre le bas du header et le hero
   pendant l'animation de scroll. */
body.header-fixed.header-animated .modular-hero.hero {
  transition: margin-top 0.5s ease;
}
body.header-fixed.header-animated.header-scrolled .modular-hero.hero {
  margin-top: var(--header-total-sm);
}

/* Scrolled : barre brand plus courte */
body.header-fixed.header-animated #header.scrolled {
  height: var(--brand-bar-height-sm) !important;
}
body.header-fixed.header-animated #header.scrolled .navbar-section,
body.header-fixed.header-animated #header.scrolled .school-brand-bar {
  height: var(--brand-bar-height-sm) !important;
}
body.header-fixed.header-animated #header.scrolled .logo .school-logo-img {
  width: 2.3rem;
  height: 2.5rem;
}
body.header-fixed.header-animated #header.scrolled .school-name {
  font-size: 1rem;
}
/* Logo + titre glissent de leur position centrée vers la gauche (voir
   .school-brand plus bas) ; le sous-titre s'efface progressivement au lieu
   de disparaître brutalement (display:none). */
body.header-fixed.header-animated #header.scrolled .school-brand {
  left: 0;
  transform: translate(0, -50%);
}
body.header-fixed.header-animated #header.scrolled .school-tagline,
body.header-fixed.header-animated #header.scrolled .school-nickname {
  opacity: 0;
  max-height: 0;
  margin-top: 0 !important;
}
body.header-fixed.header-animated #header-nav.scrolled-nav {
  height: var(--nav-bar-height-sm);
}

/* ---- Barre brand : pleine largeur, contenu centré ---- */
#header .container {
  max-width: none;
  width: 100%;
}
.school-brand-bar {
  justify-content: center;
}
/* .navbar-section a bien flex:1 0 0 côté Spectre, mais on le réaffirme
   pour être sûr qu'elle occupe toute la largeur du bandeau */
#header .navbar-section.logo {
  flex: 1 1 100%;
  width: 100%;
  justify-content: center;
  position: relative;
}

/* ---- Logo / School brand ----
   .school-brand est positionné en absolu, centré horizontalement/verticalement
   par défaut (left:50% + translate(-50%,-50%)) puis ramené à gauche
   (left:0 + translate(0,-50%)) en mode rétréci (#header.scrolled ci-dessus) :
   left et transform sont tous deux animables, ce qui donne un glissement
   fluide du centre vers la gauche pendant que le logo/texte rétrécissent. */
.school-brand {
  text-decoration: none !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.5s ease, transform 0.5s ease;
}

.school-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

/* #header .logo img/svg (theme.min.css) a une spécificité ID+classe+type :
   on doit inclure #header pour la dépasser (une ID l'emporte toujours sur des classes) */
#header .logo .school-logo-img {
  width: clamp(120px, 18vw, 233px);
  height: clamp(132px, 19.8vw, 257px); /* ratio 233:257 du logo sur le site d'origine */
  object-fit: contain;
  display: block;
  transition: height 0.3s ease, width 0.3s ease;
  flex-shrink: 0;
}

.school-logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.school-name {
  font-family: var(--font-patrick-hand);
  font-size: clamp(20px, 3.4vw, 41px);
  font-weight: 700;
  color: #2F157A;
  text-transform: uppercase;
  white-space: nowrap;
  transition: font-size 0.3s ease;
}

.school-nickname {
  font-family: var(--font-patrick-hand);
  font-size: clamp(28px, 5vw, 60px);
  font-weight: 700;
  color: #3934E0;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff, -1px 1px 0 #fff;
  white-space: nowrap;
  overflow: hidden;
  max-height: 4rem;
  opacity: 1;
  transition: opacity 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
}

.school-tagline {
  font-family: var(--font-sriracha);
  font-size: clamp(13px, 1.6vw, 20px);
  letter-spacing: 0.2em;
  color: #2F157A;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  max-height: 3rem;
  opacity: 1;
  transition: opacity 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
}

/* ---- Navigation : police Chelsea Market + couleurs du menu du site
   d'origine (extraites de ses variables CSS --txt/--txth/--bgh/--bgDrop) ---- */
#header-nav .dropmenu > ul > li > a {
  color: #fff !important;
  font-family: var(--font-chelsea-market);
  font-weight: 400;
  font-size: 13px; /* Chelsea Market est un display font sans variante fine :
                       on compense son côté épais en réduisant la taille */
  text-transform: none;
  letter-spacing: normal;
  padding: 0 0.9rem !important;
  line-height: var(--nav-bar-height);
}
/* Lien Accueil (icône maison, toujours en premier) */
#header-nav .nav-home-item a {
  padding: 0 0.7rem !important;
}
#header-nav .nav-home-item i {
  font-size: 1.1rem;
  vertical-align: middle;
}

/* Sous-menus (dropdown) : fond indigo foncé, texte clair (site d'origine) */
#header-nav .dropmenu ul ul {
  background: #281A39;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  top: var(--nav-bar-height);
}
#header-nav .dropmenu ul ul a {
  color: #F6F6F6 !important;
  font-family: var(--font-chelsea-market);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  padding: 0.5rem 1.2rem !important;
}
#header-nav .dropmenu ul ul a:hover {
  color: #AFF0CA !important;
  background: #907ACF;
}
/* Flèche du menu déroulant */
#header-nav .dropmenu > ul > li > a:before {
  color: rgba(255,255,255,0.6);
}

/* Bouton déconnexion : intégré directement dans la barre nav, même
   traitement (icône seule) que le lien Accueil */
#header-nav .logout {
  margin-left: auto;
  padding: 0 0.7rem;
  color: #fff !important;
}
#header-nav .logout i {
  font-size: 1.1rem;
  vertical-align: middle;
}

/* desktop-menu dans la nouvelle structure */
.desktop-menu.dropmenu {
  display: flex;
  align-items: center;
}
@media (max-width: 840px) {
  .desktop-menu.dropmenu { display: none; }
  #header-nav { display: none; }
}

/* ---- Hero ----
   Pas de !important : quand le header est fixe, la règle plus spécifique
   `body.header-fixed .modular-hero.hero` (plus haut) doit pouvoir pousser
   le hero sous le header via margin-top: var(--header-total). */
.modular-hero.hero {
  margin-top: 0;
}
.hero h1 {
  font-size: 3rem;
  font-weight: 800;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.hero h2 {
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ---- Section backgrounds ---- */
.bg-school-light { background: var(--school-gray); }
.bg-school-primary { background: var(--school-primary); color: #fff; }
.bg-school-primary h1,.bg-school-primary h2,.bg-school-primary h3 { color: #fff; }

/* ---- Section headings ---- */
.section-title {
  text-align: center;
  margin-bottom: 2rem;
}
.section-title h2 {
  color: var(--school-primary);
  font-size: 2rem;
  font-weight: 700;
  position: relative;
  display: inline-block;
  padding-bottom: 0.6rem;
}
.section-title h2::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: currentColor;
  margin: 0.4rem auto 0;
  border-radius: 2px;
}

/* Titre d'article (cartes du blog, .content-title h2 — partials/blog/
   title.html.twig) : même traitement que .section-title h2 ci-dessus
   (couleur + barre de soulignement). */
.content-title h2 {
  color: var(--school-primary);
  position: relative;
  display: inline-block;
  padding-bottom: 0.6rem;
}
.content-title h2::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: currentColor;
  margin: 0.4rem auto 0;
  border-radius: 2px;
}

/* ---- Navigation bas d'article (footer > ul — ex. activity_item.html.twig
   en vue simple, hors listing .items-list qui a déjà son propre style
   school-manager.css) : bouton précédent à gauche (premier li sans
   classe), tags au centre (li.tag), bouton suivant à droite (dernier li
   sans classe). ---- */
footer > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
footer > ul li {
  margin: 0;
}

/* Boutons gauche/droite : stylés directement sur le lien, qu'il porte
   ou non la classe .button (ex. activity_item.html.twig ne l'ajoute
   pas sur les liens précédent/suivant, contrairement à message_item.html.twig
   et notebook_item.html.twig). */
footer > ul > li:first-child:not(.tag) > a,
footer > ul > li:last-child:not(.tag) > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--school-font);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: none;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 2px solid var(--school-primary);
  border-radius: 6px;
  background: #fff;
  color: var(--school-primary);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
footer > ul > li:first-child:not(.tag) > a:hover,
footer > ul > li:first-child:not(.tag) > a:focus,
footer > ul > li:last-child:not(.tag) > a:hover,
footer > ul > li:last-child:not(.tag) > a:focus {
  background: var(--school-primary);
  border-color: var(--school-primary);
  color: #fff;
}

/* Tags au centre : badges arrondis */
footer > ul li.tag > a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  text-transform: none;
  background: var(--school-gray);
  color: var(--school-primary);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
footer > ul li.tag > a:hover,
footer > ul li.tag > a:focus {
  background: var(--school-primary);
  color: #fff;
}

/* ---- Titre de page (template par défaut) : rectangle blanc fixe et
   centré ; seul le texte à l'intérieur glisse depuis la droite au
   chargement de la page (overflow hidden sur le rectangle pour le clip). */
.page-title-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.page-title {
  background: transparent;
  color: rgb(47, 21, 122);
  font-family: 'Chelsea Market', fantasy;
  font-size: 38px;
  font-weight: 400;
  margin: 0;
  padding: 0.8rem 2.5rem;
  text-align: center;
  overflow: hidden;
}
.page-title::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: currentColor;
  margin: 0.4rem auto 0;
  border-radius: 2px;
}
.page-title-text {
  display: inline-block;
  animation: page-title-in-from-right 0.7s ease both;
}
@keyframes page-title-in-from-right {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---- Actualité : diaporama plein cadre (repris de #comp-lhg7bp8j du site
   d'origine — une seule image à la fois, légende en overlay) ---- */
.modular-news {
  padding: 3rem 1rem;
  background: var(--school-gray);
}
.modular-news .section-title {
  margin-bottom: 2rem;
}
.modular-news .section-title h2 {
  font-family: var(--font-sriracha);
  font-size: 32px;
  font-weight: 700;
  color: #2F157A;
  letter-spacing: 0.2em;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.6), -1px -1px 1px rgba(0,0,0,0.6);
}

.news-carousel-wrapper {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.news-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.news-carousel::-webkit-scrollbar { display: none; }

/* Une diapo = toute la largeur du diaporama */
.news-card {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
}
.news-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.news-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
}
.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Légende en overlay au bas de l'image, comme la galerie du site d'origine */
.news-card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.2rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
}
.news-card-caption h5 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.news-date {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.3rem;
  display: block;
}

.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
}
.carousel-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--school-primary);
  background: #fff;
  color: var(--school-primary);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
}
.carousel-btn:hover {
  background: var(--school-primary);
  color: #fff;
}

/* ---- Diaporama d'images générique (partials/media-carousel.html.twig),
   utilisé par les cartes "projet" (templates/projects.html.twig) et les
   lignes de "galerie" (templates/galleries.html.twig) : même principe que
   .news-carousel ci-dessus (scroll-snap horizontal), réutilise
   .carousel-controls/.carousel-btn. Un jeu d'images vide (ou d'une seule
   image) n'a pas de diaporama : voir le partial, qui n'ajoute
   .carousel-controls/data-carousel que si plusieurs images. ---- */
.media-carousel-wrapper {
  position: relative;
}
.media-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.media-carousel::-webkit-scrollbar { display: none; }
.media-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.media-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}
.media-carousel-wrapper .carousel-controls {
  margin-top: 0.5rem;
}
.media-carousel-wrapper .carousel-btn {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

/* ---- Modèle "Galeries" (templates/galleries.html.twig,
   partials/gallery-row.html.twig) : une bande pleine largeur par galerie,
   empilées, titre et diaporama de part et d'autre en alternant
   gauche/droite d'une galerie à l'autre (voir "reverse" dans le template).
   Fond alterné (une bande sur deux) pour bien distinguer chaque galerie. ---- */
.gallery-row {
  padding: 3rem 0;
}
.gallery-row:nth-child(even) {
  background: var(--school-gray);
}
.gallery-row-columns {
  align-items: center;
}
.gallery-row-reverse .gallery-row-columns {
  flex-direction: row-reverse;
}
.gallery-row-title h2 {
  margin-top: 0;
}
@media (max-width: 840px) {
  /* Toujours titre puis diaporama en pile sur mobile, quelle que soit
     l'alternance (les colonnes passent en pleine largeur, col-md-12). */
  .gallery-row-reverse .gallery-row-columns {
    flex-direction: row;
  }
}

/* Carrousel des galeries : défilement automatique (voir
   stepGalleryCarousel dans js/site.js), boutons discrets en bas à droite
   de l'image (superposés, pas en dessous — contrairement à
   .media-carousel-wrapper utilisé par les cartes "projets"). Hauteur
   naturelle (comme .media-carousel-slide), pas de recadrage forcé. */
.gallery-carousel-wrapper {
  position: relative;
}
.gallery-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-carousel::-webkit-scrollbar { display: none; }
.gallery-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.gallery-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery-carousel-btn {
  position: absolute;
  top: auto;
  bottom: 0.6rem;
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.gallery-carousel-btn:hover {
  opacity: 1;
}
.gallery-carousel-btn.carousel-prev { right: 3rem; left: auto; }
.gallery-carousel-btn.carousel-next { right: 0.6rem; }

/* ---- Inscriptions (repris de #comp-ls4hupow du site d'origine) :
   fond bleu clair, texte dans un encart blanc, icône téléphone
   centrée à cheval sur le bord supérieur de l'encart ---- */
.modular-registration {
  padding: 4rem 1rem;
  background: #BDE9FB;
  color: #1F1B95;
  text-align: center;
}
.registration-box {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  padding: 3rem 2rem 2.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.registration-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #1F1B95;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.modular-registration .section-title {
  margin-bottom: 2rem;
}
.modular-registration .section-title h2 {
  font-family: var(--font-sriracha);
  font-size: 32px;
  font-weight: 700;
  color: #1F1B95;
}
.modular-registration p {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: normal;
  color: #1F1B95;
  max-width: 640px;
  margin: 0 auto 0.5rem;
}

/* ---- Schedules section ---- */
.modular-schedules {
  padding: 3rem 1rem;
  background: var(--school-light);
}
.schedules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.schedule-card {
  background: var(--school-gray);
  border-radius: 8px;
  padding: 1.5rem;
  border-left: 4px solid var(--school-primary);
}
.schedule-card h4 {
  margin-top: 0;
  color: var(--school-primary);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.schedule-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--school-border);
  color: var(--school-dark);
}
.schedule-table td:first-child { font-weight: 600; width: 45%; }
.schedule-table tr:last-child td { border-bottom: none; }

/* ---- Module texte (site d'origine) ---- */
.modular-text p {
  font-family: 'comic sans ms', comic-sans-w01-regular, comic-sans-w02-regular, comic-sans-w10-regular, cursive;
  color: #2F157A;
}
.modular-text .section-title {
  text-align: center;
  margin-bottom: 2rem;
}
.modular-text .section-title h2 {
  color: #4720B7;
  font-family: var(--font-sriracha);
}

/* ---- Contact section : deux colonnes (infos / formulaire), fond
   indigo repris du site d'origine ---- */
.modular-contact {
  background: rgb(71, 32, 183);
  color: #fff;
  padding: 4rem 1rem;
}
.contact-title {
  /* Même style typographique que le titre du module "text"
     (.modular-text .section-title h2) : police Sriracha, 2rem/700,
     barre de soulignement. Couleur en blanc (le #4720B7 d'origine
     est illisible sur le fond violet de cette section, qui est
     justement rgb(71, 32, 183) = #4720B7). */
  color: #fff;
  font-family: var(--font-sriracha);
  font-size: 2rem;
  font-weight: 700;
  position: relative;
  display: inline-block;
  padding-bottom: 0.6rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}
.contact-title::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: currentColor;
  margin: 0.4rem 0 0;
  border-radius: 2px;
}
.modular-contact a {
  color: #fff;
}
.modular-contact a:hover {
  color: #BDE9FB;
}
.modular-contact .contact-columns {
  align-items: flex-start;
}

/* Colonne : informations de contact */
.contact-info-list {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
}
.contact-info-list li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.3rem;
}
.contact-info-list li:last-child {
  margin-bottom: 0;
}
.contact-info-list i {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.contact-info-list a,
.contact-info-list span {
  color: #fff;
  text-decoration: none;
}
.contact-info-list a:hover {
  text-decoration: underline;
}

/* Colonne : formulaire */
.contact-form fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.contact-form .form-field {
  margin-bottom: 1.3rem;
}
.contact-form .form-label label {
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.contact-form .form-label .required {
  color: #fff;
}
.contact-form .form-input {
  background: transparent;
  background-image: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0;
  color: #fff;
  padding: 0.5rem 0.1rem;
  width: 100%;
  box-shadow: none;
}
.contact-form textarea.form-input {
  resize: vertical;
  min-height: 6rem;
}
.contact-form .form-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.contact-form .form-input:focus {
  border-bottom-color: #fff;
  box-shadow: none;
  outline: none;
}
.contact-form .buttons {
  margin-top: 1.5rem;
}
.contact-form button[type="submit"],
.contact-form .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #fff;
  color: rgb(71, 32, 183);
  border: none;
  border-radius: 0;
  padding: 0.9rem 2.2rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.contact-form button[type="submit"]:hover,
.contact-form .button:hover {
  background: #BDE9FB;
  color: rgb(71, 32, 183);
}

/* ---- Pages Connexion / Mot de passe oublié / Lien magique (plugin login) ----
   #grav-login enveloppe les 3 formulaires (login-form, forgot-form,
   magic-form) : on remplace la carte "verre dépoli" générique héritée de
   custom.css par les couleurs/typo/style du site. */
#grav-login {
  background: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(45, 55, 72, 0.15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  max-width: 420px;
  padding: 2.5rem 2rem;
}
#grav-login h1,
#grav-login h2,
#grav-login h3,
#grav-login h4 {
  font-family: var(--font-chelsea-market);
  color: var(--school-primary);
}
#grav-login p {
  color: var(--school-dark);
}
#grav-login .form-input {
  border-color: var(--school-border);
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#grav-login .form-input:focus {
  border-color: var(--school-primary);
  box-shadow: 0 0 0 0.1rem rgba(31, 27, 149, 0.2);
}
#grav-login .button-wrapper {
  gap: 0.6rem;
}
/* form_button_classes ('btn', voir perwez.php) fait que tous les boutons/liens
   du plugin login rendent avec la classe .btn de spectre (pas .button
   .primary/.secondary) : on cible donc .btn directement. Le bouton "connexion"
   est repris via le sélecteur exact compilé dans theme.min.css
   (#grav-login .login-form button[type=submit]) pour égaler sa spécificité
   et gagner grâce à l'ordre de chargement (school.css après theme.min.css). */
#grav-login .btn {
  border-radius: 6px;
  font-weight: 700;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Bouton principal : connexion / envoi (forgot-form, magic-form n'ont pas
   de conflit de spécificité, mais on garde le même sélecteur pour tous). */
#grav-login form button[type="submit"],
#grav-login .login-form button[type="submit"] {
  background: var(--school-primary);
  border-color: var(--school-primary);
  color: #fff;
}
#grav-login form button[type="submit"]:hover,
#grav-login form button[type="submit"]:focus,
#grav-login .login-form button[type="submit"]:hover,
#grav-login .login-form button[type="submit"]:focus {
  background: #19167A;
  border-color: #19167A;
  color: #fff;
}

/* Liens secondaires : mot de passe oublié / lien magique */
#grav-login a.btn {
  background: transparent;
  border-color: var(--school-border);
  color: var(--school-primary);
}
#grav-login a.btn:hover {
  background: var(--school-gray);
  border-color: var(--school-primary);
}
#grav-login a.logout {
  color: var(--school-primary);
}

/* ---- Teams page ---- */
.teams-page {
  padding: 2rem 1rem;
}
.teams-page .team-item {
  text-align: center;
  margin-bottom: 2rem;
}
.teams-page .team-item .picture {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1rem;
  border: 3px solid var(--school-primary);
}
.teams-page .team-item .picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.teams-page .team-item .name {
  color: var(--school-primary);
  font-weight: 700;
  margin: 0.3rem 0 0;
}
.teams-page .team-item .title {
  color: #718096;
  font-weight: 400;
  font-size: 0.9rem;
  margin: 0.2rem 0;
}
.teams-page .social {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.teams-page .social a {
  color: var(--school-primary);
  font-size: 1.1rem;
}

/* ---- Modular teams (as part of modular page) ---- */
.modular-teams .team-item {
  text-align: center;
  margin-bottom: 2rem;
}
.modular-teams .picture {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 0.8rem;
  border: 3px solid var(--school-primary);
}
.modular-teams .picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modular-teams .name { color: var(--school-primary); }
.modular-teams .title { color: #718096; font-weight: 400; }

/* ---- Footer ----
   Repris du site d'origine : pas de colonnes, pas de nav, juste 3 lignes
   centrées (nom, email, copyright) sur fond gris très clair (#F6F6F6,
   couleur exacte du site), texte indigo #281A39. */
/* #footer (theme.min.css) est une règle par ID (padding/text-align/color) :
   on doit cibler #footer.school-footer pour la dépasser en spécificité */
#footer.school-footer {
  background: #F6F6F6;
  color: #281A39;
  text-align: center;
  padding: 38px 1rem 42px;
}
.footer-school-name {
  display: block;
  font-family: var(--school-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.41;
  color: #281A39;
  margin-bottom: 17px;
}
.footer-email {
  margin: 0 0 42px;
  font-size: 15px;
}
.footer-email a {
  color: #281A39;
  text-decoration: none;
}
.footer-email a:hover {
  text-decoration: underline;
}
.footer-copyright {
  margin: 0;
  font-size: 14px;
  line-height: 1.79;
  color: #281A39;
}
.footer-copyright a {
  color: #281A39;
}

/* ---- Mobile tweaks ---- */

/* #site-header est fixed avec z-index:100 (ligne ~387) pour rester au-dessus
   du contenu qui défile. Mais .mobile-menu (bouton hamburger, z-index:3) et
   .mobile-container (overlay plein écran, z-index:2) — définis dans le
   theme.css compilé — sont tous les deux en dessous : le bouton et le menu
   mobile se retrouvaient entièrement masqués derrière la barre header,
   invisibles et inaccessibles au clic. On les repasse au-dessus. */
.mobile-menu {
  z-index: 300 !important;
}
.mobile-container {
  z-index: 200 !important;
}

/* Repositionner le bouton hamburger dans la barre brand plus haute */
.mobile-menu .button_container {
  top: calc((var(--brand-bar-height) - 24px) / 2) !important;
}

/* Overlay menu couleur école */
.overlay {
  background: var(--school-primary) !important;
}
.overlay .treemenu li a {
  color: rgba(255,255,255,0.9) !important;
}
.overlay .treemenu li a:hover,
.overlay .treemenu li a.active {
  color: #fff !important;
}
.overlay .treemenu li {
  background: rgba(255,255,255,0.08);
}

/* Mobile body offset = barre brand seule (nav masquée) */
@media (max-width: 840px) {
  :root {
    --brand-bar-height: 4.5rem; /* la grande bannière (233x257 + texte) ne tient pas sur mobile */
  }
  body.header-fixed #body-wrapper {
    padding-top: var(--brand-bar-height) !important;
  }
  body.header-fixed .modular-hero.hero {
    margin-top: var(--brand-bar-height);
  }
  /* #header-nav est masqué en mobile : le header ne rétrécit qu'à la
     hauteur de la barre brand seule (--brand-bar-height-sm). */
  body.header-fixed.header-animated.header-scrolled .modular-hero.hero {
    margin-top: var(--brand-bar-height-sm);
  }
  .school-tagline, .school-nickname { display: none; }
  .school-name { font-size: 0.88rem; }
  #header .logo .school-logo-img { width: 2.36rem; height: 2.6rem; }

  /* Logo aligné à gauche sur mobile plutôt que centré : .school-brand est
     centré en absolu par défaut (règle plus haut, pour la grande bannière
     desktop) ; ici on repasse en flux normal, aligné à gauche, comme le
     fait déjà #header.scrolled côté desktop. */
  .school-brand-bar,
  #header .navbar-section.logo {
    justify-content: flex-start;
  }
  .school-brand {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }
}
@media (max-width: 480px) {
  .school-name { display: none; }
}