/* ===================================================================
   DON BOSCO NICE — COMPOSANTS PARTAGÉS
   Importer après tokens.css.
   =================================================================== */

/* -------- RESET -------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-brown);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--color-ochre-light); color: var(--color-brown); }

/* Skip link — accessibilité */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-brown);
  color: var(--color-cream);
  padding: var(--space-3) var(--space-5);
  z-index: var(--z-toast);
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* Focus visible — accessibilité */
:focus-visible {
  outline: 2px solid var(--color-ochre);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* -------- TYPO ÉDITORIALE -------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-brown);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); font-weight: 600; line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-ochre-deep);
}

.editorial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: var(--lh-snug);
  color: var(--color-brown);
  text-wrap: balance;
}

/* Numérique éditorial — pour stats, dates, années */
.numeric-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 0.9;
  color: var(--color-ochre);
  letter-spacing: -0.04em;
  font-feature-settings: 'lnum' 1;
}

/* -------- LAYOUT -------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container-narrow { max-width: 880px; }
.container-wide { max-width: 1440px; }

section { padding-block: var(--section-pad-y); }
.section-tight { padding-block: clamp(2rem, 5vw, 3.5rem); }

.section-header {
  margin-bottom: var(--space-7);
  max-width: 720px;
}
.section-header.centered { margin-inline: auto; text-align: center; }
.section-header .eyebrow { display: block; margin-bottom: var(--space-3); }
.section-header h2 { margin-bottom: var(--space-3); }
.section-header p {
  font-size: var(--fs-md);
  color: var(--color-brown-soft);
  line-height: var(--lh-relaxed);
}

/* Surfaces */
.surface-cream { background: var(--color-cream); }
.surface-warm  { background: var(--color-cream-warm); }
.surface-ivory { background: var(--color-ivory); }
.surface-brown { background: var(--color-brown); color: var(--color-cream); }
.surface-brown h1, .surface-brown h2, .surface-brown h3 { color: var(--color-cream); }

/* Texture papier subtile */
.texture-paper {
  position: relative;
}
.texture-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(198, 138, 58, 0.04), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(198, 138, 58, 0.04), transparent 40%);
  z-index: 0;
}
.texture-paper > * { position: relative; z-index: 1; }

/* Décoration : trait ocre */
.rule {
  width: 64px;
  height: 2px;
  background: var(--color-azur); /* touche bleue : trait de séparation/titre (test, ex-ocre) */
  border: none;
  margin: var(--space-5) 0;
}
.rule-centered { margin-inline: auto; }

/* ==============================================================
   TOP BAR
   ============================================================== */
.top-bar {
  background: var(--color-brown);
  color: var(--color-cream);
  padding-block: var(--space-2);
  font-size: var(--fs-xs);
}
.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.top-bar-left, .top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.top-bar a {
  color: var(--color-cream);
  opacity: 0.78;
  transition: opacity var(--t-fast);
  letter-spacing: 0.02em;
}
.top-bar a:hover { opacity: 1; }
.top-bar-personas {
  display: flex;
  gap: var(--space-4);
}
.top-bar-personas a::before {
  content: '·';
  margin-right: var(--space-3);
  opacity: 0.4;
}
.top-bar-personas a:first-child::before { display: none; }
.top-bar-social { display: flex; gap: var(--space-2); }
/* A4 : boutons réseaux sociaux mis en valeur. Pastilles circulaires qui
   ressortent sur la barre brune et se remplissent d'ocre au survol. */
.top-bar-social a {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(251, 245, 233, 0.12);
  border: 1px solid rgba(251, 245, 233, 0.32);
  color: var(--color-cream);
  opacity: 1;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-base);
}
.top-bar-social a:hover {
  background: var(--color-ochre);
  border-color: var(--color-ochre);
  color: var(--color-white);
  transform: translateY(-1px);
}
/* Chaque réseau porte sa couleur de marque, au repos comme au survol, en haut
   comme en pied de page : la directrice veut les relancer et les voulait « en
   couleur » (RDV du 16/10/2026), là où l'option B ne colorait qu'au survol.
   Sélecteurs doublés de :hover pour passer devant le survol ocre générique. */
.top-bar-social a[class*="social-"],
.footer-social a[class*="social-"],
.footer-social a[class*="social-"]:hover { color: var(--color-white); opacity: 1; }
.top-bar-social a.social-facebook, .top-bar-social a.social-facebook:hover,
.footer-social a.social-facebook, .footer-social a.social-facebook:hover { background: #1877f2; border-color: #1877f2; }
.top-bar-social a.social-instagram, .top-bar-social a.social-instagram:hover,
.footer-social a.social-instagram, .footer-social a.social-instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); border-color: transparent; }
.top-bar-social a.social-tiktok, .top-bar-social a.social-tiktok:hover,
.footer-social a.social-tiktok, .footer-social a.social-tiktok:hover,
.top-bar-social a.social-x, .top-bar-social a.social-x:hover,
.footer-social a.social-x, .footer-social a.social-x:hover { background: #000; border-color: rgba(251, 245, 233, 0.32); }
.top-bar-social a.social-linkedin, .top-bar-social a.social-linkedin:hover,
.footer-social a.social-linkedin, .footer-social a.social-linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.footer-social a[class*="social-"]:hover { transform: translateY(-1px); }
.top-bar-social svg { width: 17px; height: 17px; }

/* Internat mis en valeur (demande 25/06) : petit bouton ocre qui ressort sur la
   barre brune, distinct des autres liens. Préfixe .top-bar pour battre le
   opacity:0.78 et la couleur de .top-bar a. */
.top-bar .top-bar-internat {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.28em 0.85em;
  border-radius: var(--radius-pill);
  background: rgba(198, 138, 58, 0.22);
  border: 1px solid var(--color-ochre);
  color: var(--color-cream);
  opacity: 1;
  font-weight: 600;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
.top-bar .top-bar-internat:hover {
  background: var(--color-ochre);
  color: var(--color-white);
  transform: translateY(-1px);
}
.top-bar-internat svg { width: 14px; height: 14px; }

@media (max-width: 880px) {
  .top-bar-personas { display: none; }
  /* personas masqués : top-bar-right seule, alignée à droite comme en desktop */
  .top-bar .container { justify-content: flex-end; }
}
/* Cinq réseaux au lieu de trois depuis le 22/10/2026 (80 px de plus) : la barre
   défilait vers 960 à 1024 px et rognait ses pastilles sous 880 px. On resserre
   écarts et pastilles, puis on retire Pronote (repris en tête des liens utiles
   du footer) et Contact (présent dans le menu et le footer). */
@media (max-width: 1100px) {
  .top-bar .container, .top-bar-right { gap: var(--space-3); }
  .top-bar-social { gap: 4px; }
  .top-bar-social a { width: 28px; height: 28px; }
  .top-bar-social svg { width: 15px; height: 15px; }
}
@media (max-width: 1024px) { .top-bar .top-bar-pronote { display: none; } }
@media (max-width: 960px) { .top-bar .top-bar-contact { display: none; } }
/* « Contacter l'APEL » (28/10) : 110 px de plus dans la barre ; il cède la place
   le premier, l'APEL reste dans le pied de page et sur la page Parents. */
@media (max-width: 1240px) { .top-bar .top-bar-apel { display: none; } }
/* Top-bar mobile : on ne garde que l'essentiel (École Directe + S'inscrire),
   le social / Contact / don restent accessibles via le menu et le footer */
@media (max-width: 640px) {
  .top-bar .container, .top-bar-right { gap: var(--space-3); }
  .top-bar-social { display: none; }
  /* Pronote reste joignable par les liens utiles du footer (depuis le
     22/10/2026 ; il n'était alors dans aucun menu) : on libère la largeur
     avant que la barre ne déborde (cf. fix mobile du 11/06). */
  .top-bar .top-bar-pronote { display: none; }
}
@media (max-width: 560px) {
  /* .top-bar en prefixe : bat le display de .btn declare plus bas dans la feuille */
  .top-bar .top-bar-contact, .top-bar .top-bar-don { display: none; }
}

/* ==============================================================
   HEADER + NAVIGATION
   ============================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  /* A2 : bande plus visible et mieux détachée du hero (fond plus opaque,
     liseré ocre, ombre douce). */
  background: rgba(251, 245, 233, 0.97);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 3px solid var(--color-azur);
  border-bottom: 3px solid var(--color-azur); /* TEST touche bleue de part et d'autre du menu (a valider avec Alexandra, sinon retirer border-top et repasser border-bottom a var(--border-ochre)) */
  box-shadow: 0 3px 16px rgba(61, 43, 31, 0.08);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 92px;
  padding-block: 0;
  position: relative;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}
.brand-lockup img { height: 78px; width: auto; display: block; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-azur);
}
.brand-text strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.05;
  color: var(--color-brown);
  letter-spacing: 0.005em;
}
.brand-text small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ochre-deep);
  margin-top: 4px;
}
@media (max-width: 600px) {
  .site-header .container { min-height: 76px; }
  .brand-lockup img { height: 60px; }
  .brand-text strong { font-size: 1.3rem; }
}

/* Bandeau d'annonce public (urgence / evenement), rendu en haut de page par header.php.
   Le CSS existait dans admin-articles.css (non chargee cote public) : porte ici pour
   que le bandeau s'affiche stylise sur le site public quand il est actif. */
.site-banner {
  position: relative;
  padding: 14px 52px;
  font-size: 1.05rem;
  text-align: center;
  border-bottom: 1px solid rgba(61, 43, 31, 0.18);
  /* Arrivée animée pour attirer l'œil (JS inline interdit par la CSP). */
  animation: banner-slide-down 0.5s ease-out both;
}
.site-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
}
/* Fonds francs + liseré d'accent : nettement détachés du crème de la page.
   Info passe à l'ocre PRIMAIRE (et non plus l'ocre-light, jugé trop discret). */
.site-banner-info     { background: var(--color-ochre); color: var(--color-brown); box-shadow: inset 0 4px 0 var(--color-ochre-deep); }
.site-banner-warning  { background: #F2B33E;            color: #3D2B1F;            box-shadow: inset 0 4px 0 #B07A1E; }
.site-banner-critical { background: #C0392B;            color: #FFFFFF;            box-shadow: inset 0 4px 0 #8E2A20; }

/* Pastille d'accroche (« À la une » / « À noter » / « Urgent »). */
.site-banner-tag {
  flex-shrink: 0;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: rgba(61, 43, 31, 0.18);
  color: inherit;
}
.site-banner-critical .site-banner-tag { background: rgba(255, 255, 255, 0.22); }

.site-banner-msg { font-weight: 600; }

/* CTA en bouton plein, bien détaché du fond. */
.site-banner-cta {
  flex-shrink: 0;
  display: inline-block;
  padding: 7px 17px;
  border-radius: var(--radius-pill);
  background: var(--color-brown);
  color: var(--color-cream);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.site-banner-cta:hover { background: var(--color-ochre-deep); transform: translateY(-1px); }
.site-banner-critical .site-banner-cta { background: #FFFFFF; color: #C0392B; }
.site-banner-critical .site-banner-cta:hover { background: #FBF5E9; }

.site-banner-dismiss {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: inherit;
  opacity: 0.65;
}
.site-banner-dismiss:hover { opacity: 1; }

@keyframes banner-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .site-banner { animation: none; }
}

.nav-primary {
  display: flex;
  gap: 5px;
  margin-left: auto;
  align-items: center;
}
.nav-primary > a {
  position: relative;
  font-size: var(--fs-sm);
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-brown);
  padding: var(--space-2) 0;
  transition: color var(--t-fast);
  letter-spacing: 0.01em;
}
.nav-primary > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.nav-primary > a:hover,
.nav-primary > a[aria-current="page"] { color: var(--color-ochre-deep); }
.nav-primary > a:hover::after,
.nav-primary > a[aria-current="page"]::after { transform: scaleX(1); }

/* Sub-menu (parent w/ dropdown) */
.nav-item-parent { position: relative; }
.nav-item-parent > .nav-trigger {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 4px;
  position: relative;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-brown);
  padding: 6px 10px;
  border: 1.5px solid var(--border-ochre);
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  letter-spacing: 0;
  cursor: pointer;
}
/* Contour marqué façon bouton « S'inscrire » : pastille bordée qui se remplit
   d'ocre au survol / sur la page active (A3, demande directrice : repères clairs
   et « flashy » pour un public parfois peu à l'aise avec le numérique). */
.nav-item-parent:hover > .nav-trigger,
.nav-item-parent:focus-within > .nav-trigger,
.nav-item-parent > .nav-trigger[aria-current="page"] {
  background: var(--color-ochre);
  color: var(--color-white);
  border-color: var(--color-ochre);
  box-shadow: 0 4px 12px rgba(198, 138, 58, 0.26);
}
.nav-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-ochre-deep);
  transition: color var(--t-base);
}
/* l'icône suit la couleur du texte quand la pastille se remplit d'ocre */
.nav-item-parent:hover > .nav-trigger .nav-ico,
.nav-item-parent:focus-within > .nav-trigger .nav-ico,
.nav-item-parent > .nav-trigger[aria-current="page"] .nav-ico { color: var(--color-white); }
.nav-trigger .chev {
  width: 10px; height: 10px;
  transition: transform var(--t-base);
  margin-top: 1px;
}
.nav-item-parent:hover .nav-trigger .chev { transform: rotate(180deg); }
.nav-submenu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 240px;
  background: var(--color-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base);
  z-index: 100;
}
/* The last menu (Soutenir) opens towards the left: opened to the right, it went
   17 px past a 1280 px window and gave every page a horizontal scrollbar. */
.nav-primary > .nav-item-parent:last-child .nav-submenu { left: auto; right: -16px; }
.nav-item-parent:hover .nav-submenu,
.nav-item-parent:focus-within .nav-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(2px);
}
.nav-submenu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-brown);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
  font-weight: 500;
}
.nav-submenu a:hover {
  background: var(--color-cream-warm);
  color: var(--color-ochre-deep);
}
.nav-submenu a small {
  display: block;
  font-size: 11px;
  color: var(--color-brown-mute);
  font-weight: 400;
  margin-top: 2px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* Recherche : bouton-loupe circulaire (renvoie vers la page /recherche).
   Remplace l'ancien champ inline pour laisser la place aux boutons de menu
   encadrés (A3) sans déborder du conteneur. */
.nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--color-brown);
  border: 1.5px solid var(--border-ochre);
  background: transparent;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.nav-search-btn:hover {
  background: var(--color-ochre);
  color: var(--color-white);
  border-color: var(--color-ochre);
  transform: translateY(-1px);
}
.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-cream);
  border: 1px solid color-mix(in oklab, var(--color-ochre) 35%, transparent);
  border-radius: var(--radius-pill);
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.nav-search:focus-within {
  border-color: var(--color-ochre);
  background: var(--color-white);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ochre) 18%, transparent);
}
.nav-search-icon {
  color: var(--color-brown-soft);
  flex-shrink: 0;
}
.nav-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-brown);
  width: 160px;
  letter-spacing: 0.01em;
}
.nav-search-input::placeholder {
  color: var(--color-brown-mute);
}
@media (max-width: 1280px) { .nav-search-input { width: 120px; } }
@media (max-width: 1200px) { .nav-search { display: none; } }
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  align-items: center;
  justify-content: center;
}

@media (max-width: 1200px) {
  .nav-primary { display: none; }
  .menu-toggle { display: inline-flex; }

  /* Phone and tablet menu (29/10/2026). Until then the hamburger switched a class
     that no rule read: the menu never opened under 1200 px. A panel under the
     sticky header, one section per row; a section opens its links in place
     (main.js), the desktop menu keeps opening on hover. */
  .nav-primary.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--space-4) var(--space-5) var(--space-6);
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-cream);
    border-bottom: 3px solid var(--color-azur);
    box-shadow: 0 16px 32px rgba(61, 43, 31, 0.18);
  }
  .nav-primary.is-open > .nav-item-parent > .nav-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 16px;
    font-size: var(--fs-base);
  }
  .nav-primary.is-open .nav-trigger .chev { margin-left: auto; width: 12px; height: 12px; }
  .nav-primary.is-open .nav-item-parent:hover .nav-trigger .chev { transform: none; }
  .nav-primary.is-open .nav-item-parent.is-open .nav-trigger .chev { transform: rotate(180deg); }
  .nav-primary.is-open .nav-submenu {
    display: none;
    position: static;
    min-width: 0;
    padding: var(--space-1) 0 var(--space-2) var(--space-5);
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .nav-primary.is-open .nav-item-parent.is-open .nav-submenu { display: block; }
  .nav-primary.is-open .nav-submenu a { padding: 10px 12px; font-size: var(--fs-base); }
}

/* ==============================================================
   BOUTONS
   ============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
  min-height: 44px;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--color-ochre);
  color: var(--color-white);
  border-color: var(--color-ochre);
  box-shadow: 0 4px 14px rgba(198, 138, 58, 0.28);
}
.btn-primary:hover {
  background: var(--color-ochre-deep);
  border-color: var(--color-ochre-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(198, 138, 58, 0.36);
}

.btn-secondary {
  background: transparent;
  color: var(--color-brown);
  border-color: var(--color-brown);
}
.btn-secondary:hover {
  background: var(--color-brown);
  color: var(--color-cream);
}

.btn-ghost {
  background: transparent;
  color: var(--color-brown);
  border-color: transparent;
  padding-inline: var(--space-4);
}
.btn-ghost:hover {
  background: var(--color-cream-warm);
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  min-height: auto;
  color: var(--color-ochre-deep);
  font-weight: 600;
  border-radius: 0;
  border-bottom: 1.5px solid var(--color-ochre);
  padding-bottom: 2px;
}
.btn-link:hover { color: var(--color-brown); border-bottom-color: var(--color-brown); }

.btn-on-dark.btn-secondary {
  color: var(--color-cream);
  border-color: var(--color-cream);
}
.btn-on-dark.btn-secondary:hover {
  background: var(--color-cream);
  color: var(--color-brown);
}

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); min-height: 36px; }
.btn-lg { padding: var(--space-4) var(--space-7); font-size: var(--fs-base); min-height: 52px; }

/* Lien fléché */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ochre-deep);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: gap var(--t-fast), color var(--t-fast);
}
.arrow-link::after {
  content: '→';
  transition: transform var(--t-fast);
}
.arrow-link:hover { color: var(--color-brown); gap: var(--space-3); }
.arrow-link:hover::after { transform: translateX(2px); }

/* ==============================================================
   BADGES (filières)
   ============================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--color-cream-warm);
  color: var(--color-brown);
}
.badge-college    { background: var(--color-accent-college);    color: #fff; }
.badge-lyceegt    { background: var(--color-accent-lyceegt);    color: #fff; }
.badge-lyceepro   { background: var(--color-accent-lyceepro);   color: #fff; }
.badge-cfa        { background: var(--color-accent-cfa);        color: #fff; }
.badge-sport      { background: var(--color-accent-sport);      color: #fff; }
.badge-international { background: var(--color-accent-international); color: #fff; }
.badge-outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--color-brown-soft);
}

/* ==============================================================
   CARTE FORMATION
   ============================================================== */
.card-formation {
  display: flex;
  flex-direction: column;
  background: var(--color-ivory);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
  position: relative;
  border: 1px solid var(--border-default);
}
.card-formation:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-ochre);
}
.card-formation .img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.card-formation .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.card-formation:hover .img-wrap img { transform: scale(1.04); }
.card-formation .badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
}
.card-formation .body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.card-formation h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-1);
}
.card-formation .body p {
  font-size: var(--fs-sm);
  color: var(--color-brown-soft);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-3);
}
.card-formation .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}
.card-formation .count {
  font-size: var(--fs-xs);
  color: var(--color-brown-mute);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ==============================================================
   CARTE ACTUALITÉ
   ============================================================== */
.card-news {
  display: flex;
  flex-direction: column;
  background: var(--color-ivory);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-default);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.card-news:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card-news .img-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.card-news .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card-news .body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.card-news .meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-brown-mute);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}
.card-news .meta time { color: var(--color-ochre-deep); font-weight: 600; }
.card-news h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
}
.card-news p {
  font-size: var(--fs-sm);
  color: var(--color-brown-soft);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-3);
}
.card-news .arrow-link { margin-top: auto; }

/* Carte persona */
.card-persona {
  background: var(--color-ivory);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--border-default);
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
}
.card-persona::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.card-persona:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-ochre);
}
.card-persona:hover::before { transform: scaleX(1); }
.card-persona h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-2);
}
.card-persona .persona-tagline {
  font-size: var(--fs-sm);
  color: var(--color-brown-soft);
  margin-bottom: var(--space-3);
  line-height: var(--lh-relaxed);
}
.card-persona ul { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-4); }
.card-persona li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-default);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: padding var(--t-fast), color var(--t-fast);
}
.card-persona li:last-child a { border-bottom: none; }
.card-persona li a:hover { padding-left: var(--space-2); color: var(--color-ochre-deep); }
.card-persona li a::after {
  content: '→';
  opacity: 0;
  transition: opacity var(--t-fast);
  color: var(--color-ochre-deep);
}
.card-persona li a:hover::after { opacity: 1; }

/* ==============================================================
   FORMULAIRES
   ============================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-brown);
}
.field .help {
  font-size: var(--fs-xs);
  color: var(--color-brown-mute);
}
.input,
.textarea,
.select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  color: var(--color-brown);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: var(--font-body);
}
.input::placeholder, .textarea::placeholder {
  color: var(--color-brown-mute);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-ochre);
  box-shadow: var(--shadow-focus);
}
.textarea { resize: vertical; min-height: 120px; }
.input-group {
  display: flex;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-default);
  overflow: hidden;
  background: var(--color-white);
}
.input-group input {
  flex: 1;
  border: none;
  padding: var(--space-3) var(--space-5);
  background: transparent;
  outline: none;
}
.input-group button {
  border-radius: 0;
  border: none;
}

.checkbox-line {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--color-brown-soft);
}
.checkbox-line input { margin-top: 4px; accent-color: var(--color-ochre); }

/* ==============================================================
   BANDEAU URGENCE
   ============================================================== */
.alert-banner {
  background: var(--color-ochre-deep);
  color: var(--color-white);
  padding: var(--space-3) 0;
  font-size: var(--fs-sm);
}
.alert-banner .container {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.alert-banner strong { letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--fs-xs); }
.alert-banner .alert-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* Cookie banner styles live in /assets/css/cookie-banner.css (loaded by the layout). */
/* Chatbot styles live in /assets/css/chatbot-widget.css (loaded by the widget partial). */

/* ==============================================================
   FOOTER
   ============================================================== */
.site-footer {
  background: var(--color-brown);
  color: var(--color-cream);
  padding-top: var(--space-9);
  margin-top: var(--space-9);
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-ochre), var(--color-ochre-deep), var(--color-ochre));
}
.footer-grid {
  display: grid;
  /* minmax(0, …) : sans lui, le min-content de la colonne newsletter
     (input + bouton) elargit la grille et fait deborder la page */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-7);
  padding-bottom: var(--space-8);
}
.footer-brand .footer-logos {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.footer-brand .footer-logos img:first-child { height: 64px; width: auto; }
/* Network logo: white cartouche rather than a rule as separator. Its wordmark is
   a mid grey (#6F7072) that scores 2.6:1 on the brown footer, and it is a
   network logo we may not retint, so we give it a ground instead. */
.footer-brand .footer-logos img:last-child {
  height: 50px;
  width: auto;
  background: #FFFFFF;
  padding: 7px 10px;
  border-radius: 4px;
}
/* The diocese, the Enseignement catholique and the Académie, next to our own
   logos (head of school, 26/10/2026). Same white ground as the network logo:
   their colours are not meant for the brown footer. */
.footer-institutions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  background: #FFFFFF;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: var(--space-4);
  max-width: 100%;
}
.footer-institutions img {
  height: 46px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.footer-brand p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  opacity: 0.7;
  max-width: 280px;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-ochre);
  margin-bottom: var(--space-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a {
  font-size: var(--fs-sm);
  opacity: 0.78;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.footer-col a:hover { opacity: 1; color: var(--color-ochre-light); }
.footer-contact-line {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  opacity: 0.78;
}
.footer-contact-line strong { color: var(--color-ochre-light); display: block; margin-bottom: 2px; }

.newsletter-form {
  display: flex;
  margin-top: var(--space-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.newsletter-form input {
  flex: 1;
  min-width: 0; /* flex item : autorise la compression sous la largeur intrinseque (sinon deborde en mobile) */
  background: transparent;
  border: none;
  padding: var(--space-3) var(--space-4);
  color: var(--color-cream);
  font-size: var(--fs-sm);
  outline: none;
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter-form button {
  background: var(--color-ochre);
  color: var(--color-white);
  border: none;
  padding: var(--space-3) var(--space-5);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: background var(--t-fast);
}
.newsletter-form button:hover { background: var(--color-ochre-deep); }
.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: all var(--t-fast);
}
.footer-social a:hover {
  opacity: 1;
  border-color: var(--color-ochre);
  background: var(--color-ochre);
}
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }

/* Labels & partners: "very small" for the head of school and the CFO
   (2026-09), who wanted them more visible. One white band per group, logos at
   a common height on it, so that no logo sits on a tile of its own. */
.footer-contact-apel { margin-top: var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-relaxed); opacity: 0.85; }
.footer-contact-apel a { font-weight: 600; }
.footer-labels {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-5) clamp(1rem, 4vw, 3rem) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.footer-labels-group { display: flex; flex-direction: column; align-items: center; }
.footer-labels-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) clamp(1.25rem, 3vw, 2.5rem);
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-4) clamp(1rem, 3vw, 2rem);
  max-width: 1100px;
}
.footer-labels-row img {
  height: 76px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
@media (max-width: 720px) {
  .footer-labels-row img { height: 52px; max-width: 150px; }
}
/* A logo that must be shown with a text next to it (Qualiopi and its action
   categories). The white cartouche gets the thin grey outline the Qualiopi
   charter draws on a white background, and keeps at least 23 mm (87 px) of
   signature width on a phone, hence 64 px instead of 52. */
.footer-label-mention {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 240px;
}
.footer-labels-row .footer-label-mention img {
  border: 1px solid #d6d6d6;
  max-width: none;
}
.footer-label-mention figcaption {
  font-size: 12px;
  line-height: 1.35;
  color: #333;
  text-align: center;
}
@media (max-width: 720px) {
  .footer-labels-row .footer-label-mention img { height: 64px; }
}
.footer-labels-caption {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-ochre);
  text-align: center;
  margin-bottom: var(--space-3);
}

.footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-4) 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  opacity: 0.5;
  flex-wrap: wrap;
}

.footer-legal-links {
  text-align: center;
  padding: var(--space-3) 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
}
.footer-legal-links a,
.footer-legal-cookies-btn {
  color: inherit;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0 var(--space-1);
}
.footer-legal-cookies-btn:hover { color: #fff; }

.page-legal { padding: var(--space-7) var(--space-4); max-width: 880px; }
.page-legal h1 { margin-bottom: var(--space-5); color: var(--color-brown-deep); }
.page-legal .legal-content h2 { margin-top: var(--space-5); color: var(--color-brown-deep); }
.page-legal .legal-content p,
.page-legal .legal-content ul { line-height: var(--lh-relaxed); }
.page-legal .legal-updated { margin-top: var(--space-6); color: var(--color-brown-mute); }

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==============================================================
   BREADCRUMB
   ============================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-brown-mute);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding-block: var(--space-5);
}
.breadcrumb a { transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--color-ochre-deep); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-2);
  opacity: 0.5;
}
.breadcrumb li[aria-current="page"] { color: var(--color-brown); font-weight: 600; }

/* ==============================================================
   GRILLES UTILITAIRES
   ============================================================== */
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

@media (max-width: 880px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flex { display: flex; gap: var(--space-4); }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* Animations d'entrée */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.7s var(--ease-out) both; }
.fade-up-delay-1 { animation-delay: 80ms; }
.fade-up-delay-2 { animation-delay: 160ms; }
.fade-up-delay-3 { animation-delay: 240ms; }

/* ── Content block templates (inserted via TinyMCE) ────────────────── */

.content-cols-2,
.content-cols-3 {
    display: grid;
    gap: var(--space-5, 24px);
    margin-block: var(--space-5, 24px);
}
.content-cols-2 { grid-template-columns: 1fr 1fr; }
.content-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) {
    .content-cols-2,
    .content-cols-3 { grid-template-columns: 1fr; }
}
.content-col h3 {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    color: var(--color-brown-deep, #3D2B1F);
    margin-bottom: var(--space-2, 8px);
}

.content-quote {
    border-left: 4px solid var(--color-accent, #C68A3A);
    padding: var(--space-4, 16px) var(--space-5, 24px);
    margin-block: var(--space-5, 24px);
    background: var(--color-cream, #FBF5E9);
    border-radius: 0 8px 8px 0;
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.6;
}
.content-quote cite {
    display: block;
    margin-top: var(--space-3, 12px);
    font-style: normal;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.9rem;
    color: var(--color-accent, #C68A3A);
    font-weight: 600;
}

.content-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5, 24px);
    justify-content: center;
    margin-block: var(--space-6, 32px);
    text-align: center;
}
.content-stat {
    flex: 1 1 140px;
    max-width: 200px;
}
.content-stat-number {
    display: block;
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-accent, #C68A3A);
    line-height: 1.1;
    font-variant-numeric: lining-nums;
}
.content-stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-brown-soft, #6B5B4E);
    margin-top: var(--space-1, 4px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.content-cta {
    text-align: center;
    margin-block: var(--space-6, 32px);
}
.content-cta-btn {
    display: inline-block;
    padding: var(--space-3, 12px) var(--space-6, 32px);
    background: var(--color-accent, #C68A3A);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: background 0.15s;
}
.content-cta-btn:hover {
    background: var(--color-brown-deep, #3D2B1F);
}

.content-infobox {
    background: var(--color-cream, #FBF5E9);
    border: 1px solid var(--color-accent, #C68A3A);
    border-radius: 8px;
    padding: var(--space-4, 16px) var(--space-5, 24px);
    margin-block: var(--space-5, 24px);
}
.content-infobox h4 {
    color: var(--color-accent, #C68A3A);
    margin: 0 0 var(--space-2, 8px);
    font-weight: 700;
}

.content-media-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5, 24px);
    align-items: center;
    margin-block: var(--space-5, 24px);
}
@media (max-width: 700px) {
    .content-media-text { grid-template-columns: 1fr; }
}
.content-media-img img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.content-accordion {
    border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 8px;
    margin-block: var(--space-3, 12px);
    overflow: hidden;
}
.content-accordion summary {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-brown-deep, #3D2B1F);
    background: var(--color-cream, #FBF5E9);
    list-style: none;
}
.content-accordion summary::before {
    content: '▸ ';
    color: var(--color-accent, #C68A3A);
}
.content-accordion[open] summary::before {
    content: '▾ ';
}
.content-accordion > p,
.content-accordion > div {
    padding: var(--space-3, 12px) var(--space-4, 16px);
}

/* Frise horaire : one step per list item, the time in bold at its head, so
   Enter in the editor adds a step. Each rule is doubled with a .page-body
   variant: prose.css comes later and numbers every <ol> of a page. First
   used for « Une journée à l'internat » (29/09). */
ol.content-timeline,
.page-body ol.content-timeline {
    list-style: none;
    margin-block: var(--space-5, 24px);
    padding: 0 0 0 var(--space-2, 8px);
}
ol.content-timeline > li,
.page-body ol.content-timeline > li {
    position: relative;
    margin: 0;
    padding: 0 0 var(--space-4, 16px) var(--space-6, 32px);
    border-left: 2px solid var(--border-ochre, rgba(198, 138, 58, 0.35));
}
ol.content-timeline > li:last-child,
.page-body ol.content-timeline > li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}
ol.content-timeline > li::before,
.page-body ol.content-timeline > li::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 0.3em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-ivory, #FEFCF5);
    border: 3px solid var(--color-ochre, #C68A3A);
}
ol.content-timeline > li > strong:first-child,
.page-body ol.content-timeline > li > strong:first-child {
    display: block;
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: lining-nums;
    color: var(--color-ochre-deep, #A36A22);
    line-height: 1.2;
}

/* Cartes de formules : offers set side by side (the three boarding
   formulas, 29/09), each with its price in large type. */
.content-offers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-4, 16px);
    margin-block: var(--space-6, 32px);
}
.content-offer {
    background: var(--color-ivory, #FEFCF5);
    border: 1px solid var(--border-ochre, rgba(198, 138, 58, 0.35));
    border-top: 4px solid var(--color-azur, #00629B);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-5, 24px);
}
.content-offer h3,
.page-body .content-offer h3 {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: 1.4rem;
    color: var(--color-brown-deep, #3D2B1F);
    margin: 0 0 var(--space-1, 4px);
    padding: 0;
    border: 0;
}
.content-offer p,
.page-body .content-offer p {
    margin: 0 0 var(--space-2, 8px);
    font-size: 1rem;
}
.content-offer p:last-child,
.page-body .content-offer p:last-child { margin-bottom: 0; }
.content-offer .content-offer-price,
.page-body .content-offer .content-offer-price {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-ochre-deep, #A36A22);
    font-variant-numeric: lining-nums;
    line-height: 1.1;
    margin: var(--space-3, 12px) 0 var(--space-1, 4px);
}
.content-offer .content-offer-price small {
    display: block;
    margin-top: 2px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-brown-mute, #9B8470);
}
.fade-up-delay-4 { animation-delay: 320ms; }

/* ==============================================================
   INTRO SALESIENNE — bandeau d'introduction reutilisable sur les
   pages de section (textes rediges par la directrice). Ton editorial,
   centre, sobre. Mettre <section class="intro-salesienne">.
   ============================================================== */
.intro-salesienne {
  background: var(--color-cream-warm);
  padding: var(--space-7) 0;
  border-top: 2px solid var(--color-azur); /* touche bleue : liserés de la bande intro (test, ex-ocre) */
  border-bottom: 2px solid var(--color-azur);
}
.intro-salesienne .container { max-width: 820px; }
.intro-salesienne .container::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-azur); /* touche bleue : trait au-dessus de l'intro (test, ex-ocre) */
  margin: 0 auto var(--space-5);
}
.intro-salesienne p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-brown);
  text-align: center;
  margin: 0 auto var(--space-4);
}
.intro-salesienne p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Personnes référentes en bas de page filière (décision 25/06).
   Composant homogène : 3-4 contacts (photo + nom + fonction + contact).
   ------------------------------------------------------------------ */
.contacts-filiere {
  background: var(--color-cream-warm);
  padding: var(--space-9) 0;
  border-top: 1px solid var(--border-ochre);
}
/* A block placed inside a page's text ([[contacts:…]], see
   render_inline_contact_zones()): a panel of the column, not a band. */
.page-body .contacts-filiere {
  padding: var(--space-6) var(--space-5);
  margin: var(--space-5) 0 var(--space-7);
  border-top: 0;
  border-radius: var(--radius-lg);
}
.page-body .contacts-filiere .container { padding-inline: 0; max-width: none; }
.page-body .contacts-filiere h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: 0; }
.contacts-filiere h2 {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: var(--space-2);
}
.contacts-filiere-intro {
  text-align: center;
  color: var(--color-brown-soft);
  max-width: 60ch;
  margin: 0 auto var(--space-7);
}
/* Presentation of a pole in several paragraphs (Equipe page, texts of the head
   of school of 04/05): centred block, text read left to right. */
.contacts-filiere-intro.is-long {
  text-align: left;
  max-width: 68ch;
  line-height: 1.7;
}
.contacts-filiere-intro.is-long p { margin: 0 0 var(--space-3); }
.contacts-filiere-intro.is-long p:last-child { margin-bottom: 0; }
/* RANGEES. La direction compose de vraies rangees, de deux a huit personnes,
   dont certaines sont titrees (« Vos contacts pour les classes de 3e »). Une
   grille a quatre colonnes fixes casserait ce decoupage et laisserait une
   rangee de deux collee a gauche : chaque rangee est donc un groupe centre.
   Voir render_contact_zone() dans includes/people_helpers.php. */
.contacts-row + .contacts-row { margin-top: var(--space-7); }
.contacts-row-title {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-brown-mute);
  margin-bottom: var(--space-4);
}
.contacts-filiere-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}
.contact-card {
  flex: 0 1 205px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  background: var(--color-cream);
  border: 1px solid var(--border-ochre);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
}
/* PHOTO. Un carre sur toute la largeur de la carte, coins arrondis, a la
   place de la vignette ronde de 84 px d'origine : la direction trouvait les
   visages « vraiment tres petits » et regrettait le fond, la cour de
   l'etablissement, que le rond rognait (14/09). Le recadrage des portraits
   s'est desserre en meme temps (ZOOM 1,25 dans tools/prepare-portraits.py et
   includes/people_upload.php) et la carte charge la variante 480 px. Le
   max-width tient la photo quand la carte prend toute la largeur du mobile. */
.contact-card-photo {
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  object-fit: cover;
  margin-bottom: var(--space-2);
}
.contact-card-photo.is-placeholder {
  display: grid;
  place-items: center;
  background: var(--color-ochre-soft);
  color: var(--color-ochre-deep);
}
.contact-card-photo.is-placeholder svg { width: 64px; height: 64px; }
.contact-card-name { font-weight: 700; color: var(--color-brown); line-height: 1.2; }
.contact-card-name.is-pending { color: var(--color-brown-mute); font-weight: 600; font-style: italic; }
.contact-card-role { font-size: var(--fs-sm); color: var(--color-brown-soft); }
.contact-card-link {
  margin-top: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ochre-deep);
  text-decoration: none;
}
.contact-card-link:hover { text-decoration: underline; }
/* Les fonctions tiennent sur une a trois lignes selon les personnes. Les cartes
   d'une meme rangee s'etirent a la meme hauteur (flex, align-items: stretch),
   et cette marge automatique pousse le dernier lien en bas : les « Contacter »
   s'alignent au lieu de flotter a des hauteurs differentes. */
.contact-card-link:last-child { margin-top: auto; padding-top: 4px; }
@media (max-width: 460px) { .contact-card { flex-basis: 100%; } }

/* Réservé aux lecteurs d'écran : précise une destination (« nouvelle fenêtre »)
   sans encombrer la page. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Variante SANS PORTRAIT (render_contacts_filiere pose .is-textual quand aucune
   photographie n'est fournie). Les silhouettes alignées disparaissent : la carte
   se recentre sur la fonction, tenue par un filet ocre et le romain du titre.
   Voir includes/contacts_helpers.php pour le choix du mode. */
.contacts-filiere.is-textual .contact-card { gap: 7px; }
.contacts-filiere.is-textual .contact-card::before {
  content: '';
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-ochre);
  margin-bottom: var(--space-2);
}
.contacts-filiere.is-textual .contact-card-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
/* Les intitulés de fonction tiennent sur 1 à 3 lignes : sans cela le lien
   flotterait à une hauteur différente dans chaque carte. */
.contacts-filiere.is-textual .contact-card-link { margin-top: auto; padding-top: var(--space-3); }

/* ============================================================
   VIDÉO YOUTUBE — façade « click-to-load » (RGPD : iframe chargée
   au clic seulement). Markup : render_video_facade() (templates) ou
   bloc « Vidéo » du back-office ; hydratée par main.js (initVideoFacades).
   ============================================================ */
.db-video {
  position: relative;
  display: block;
  width: 100%;
  margin: var(--space-5) 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-brown);
  box-shadow: 0 18px 50px -22px rgba(61, 43, 31, 0.4);
}
.db-video-media { position: absolute; inset: 0; cursor: pointer; }
.db-video-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-video-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(61, 43, 31, 0.10), rgba(61, 43, 31, 0.34));
  transition: background var(--t-base);
}
.db-video-media:hover::after { background: rgba(61, 43, 31, 0.20); }
.db-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 76px;
  height: 76px;
  border: none;
  border-radius: 50%;
  background: var(--color-ochre);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-base), background var(--t-base);
}
.db-video-play svg { width: 30px; height: 30px; margin-left: 3px; }
.db-video-media:hover .db-video-play,
.db-video-play:focus-visible {
  background: var(--color-ochre-deep);
  transform: translate(-50%, -50%) scale(1.08);
}
.db-video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Repli sans JavaScript : lien centré lisible sur le fond brun. */
.db-video a,
.db-video-fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  color: var(--color-cream);
  text-align: center;
  font-weight: 600;
  text-decoration: none;
}
.page-body .db-video a { color: var(--color-cream); }
@media (max-width: 560px) {
  .db-video-play { width: 60px; height: 60px; }
  .db-video-play svg { width: 24px; height: 24px; }
}

/* Lightbox vidéo (ouverte au clic depuis un bouton [data-video-lightbox]).
   <dialog> natif : backdrop, Échap et focus-trap gérés par le navigateur.
   L'iframe youtube-nocookie est injectée à l'ouverture (RGPD) puis retirée
   à la fermeture (coupe le son). Hydratée par main.js (initVideoLightbox). */
.video-lightbox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centrage robuste (le reset du projet neutralise le margin:auto natif) */
  margin: 0;
  border: none;
  padding: 0;
  background: transparent;
  width: min(1100px, 92vw);
  max-width: 100%;
  overflow: visible;
}
.video-lightbox::backdrop { background: rgba(28, 20, 13, 0.82); }
.video-lightbox-inner { position: relative; }
.video-lightbox-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-lightbox-frame iframe,
.video-lightbox-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-lightbox-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-base);
}
.video-lightbox-close:hover { background: var(--color-ochre); }
@media (max-width: 560px) {
  .video-lightbox-close { top: -42px; }
}

/* Teaser hosted on the site (render_video_teaser): poster, play button and
   caption, opened in the lightbox above. Same play button as .db-video. */
.video-teaser {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-brown);
  box-shadow: 0 18px 50px -22px rgba(61, 43, 31, 0.4);
  color: #fff;
  text-decoration: none;
}
.video-teaser picture,
.video-teaser-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-teaser::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(61, 43, 31, 0.05) 40%, rgba(28, 20, 13, 0.72));
  transition: background var(--t-base);
}
.video-teaser-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--color-ochre);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-base), background var(--t-base);
}
.video-teaser-play svg { width: 34px; height: 34px; margin-left: 4px; }
.video-teaser:hover .video-teaser-play,
.video-teaser:focus-visible .video-teaser-play {
  background: var(--color-ochre-deep);
  transform: translate(-50%, -50%) scale(1.08);
}
.video-teaser-caption {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-4);
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.25;
}
.video-teaser-caption small {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  opacity: 0.85;
}
@media (max-width: 560px) {
  .video-teaser-play { width: 64px; height: 64px; }
  .video-teaser-play svg { width: 26px; height: 26px; }
  .video-teaser-caption { left: var(--space-4); bottom: var(--space-3); font-size: var(--fs-md); }
}

/* Shortcut to the back office, shown to signed-in editors only
   (templates/partials/admin-edit-link.php). */
.admin-edit-link {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--color-brown, #3b2a1a);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.admin-edit-link:hover, .admin-edit-link:focus-visible { background: var(--color-ochre-deep, #8a5a1f); color: #fff; }
@media print { .admin-edit-link { display: none; } }