/* =====================================================================
   Ecole Sainte-Marie - design system global
   Direction: editorial lumineux, chaleureux, contemporain
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&family=Caveat:wght@500;600;700&display=swap');

:root{
  --blue-deep:#15537d;
  --blue:#2d7fb0;
  --blue-soft:#dceffb;

  --bg:#f8f5ef;
  --cream:#efe6d7;
  --taupe:#c8b08b;
  --taupe-deep:#7c664a;
  --taupe-soft:#ecdfcb;

  --ink:#21303c;
  --ink-soft:#5c6d7a;
  --line:#dfd3c1;

  --yellow:#f3ca6f;
  --yellow-soft:#f9efcf;
  --sage:#90b49b;
  --sage-deep:#4f7760;
  --sage-soft:#deebe0;
  --rose:#db9e97;
  --rose-deep:#ae655d;
  --rose-soft:#f5e2df;

  --font-head:'DM Serif Display', Georgia, serif;
  --font-body:'Manrope', 'Segoe UI', sans-serif;
  --font-hand:'Caveat', cursive;

  --r-md:16px;
  --r-lg:24px;
  --r-xl:34px;

  --shadow-sm:0 6px 20px rgba(28,44,61,.08);
  --shadow-md:0 18px 45px rgba(28,44,61,.13);
  --shadow-lg:0 28px 64px rgba(28,44,61,.18);

  --gut:clamp(20px,4vw,42px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg); }
body{
  margin:0;
  overflow-x:clip;
  max-width:100%;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(55rem 30rem at 90% -10%, rgba(45,127,176,.11), transparent 68%),
    radial-gradient(45rem 28rem at -10% 20%, rgba(243,202,111,.15), transparent 62%),
    linear-gradient(var(--bg), var(--bg));
  line-height:1.68;
  font-size:clamp(15px,1.06vw,17px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
svg{ max-width:100%; }
table{ max-width:100%; }
h1,h2,h3,h4,p,li,a,span{ overflow-wrap:break-word; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:8px; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  line-height:1.12;
  font-weight:400;
  margin:0 0 .45em;
  letter-spacing:.01em;
}
h1{ font-size:clamp(2.2rem,5vw,3.7rem); }
h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); }
h3{ font-size:clamp(1.2rem,1.9vw,1.5rem); }
h4{ font-size:1.08rem; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.lead{ font-size:clamp(1.05rem,1.45vw,1.24rem); color:var(--ink-soft); line-height:1.62; }
.muted{ color:var(--ink-soft); }

/* Paragraphes de contenu justifiés sur toutes les pages */
.section p,
.section .lead,
.section li,
.tj{ text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
/* Zones centrées : le centrage prime sur la justification */
.center p, .center .lead, .center li, .center .tj,
.section-head.center p, .section-head.center .lead,
.cta-band p, .cta-band .lead,
.page-hero p, .page-hero .lead,
[style*="text-align:center"] p,
[style*="text-align:center"] .lead,
[style*="text-align: center"] p,
[style*="text-align: center"] .lead{ text-align:center; text-justify:auto; hyphens:none; -webkit-hyphens:none; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.58em;
  font-family:var(--font-body);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.75rem;
  color:var(--taupe-deep);
  margin-bottom:.6em;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  background:linear-gradient(90deg, var(--blue), transparent);
  border-radius:2px;
}
.center-eb{ justify-content:center; }
.center-eb::before{ display:none; }

.wrap,.container{ width:min(1180px,100% - 2*var(--gut)); margin-inline:auto; }
.section{ padding-block:clamp(52px,8vw,110px); position:relative; }
.section-head{ max-width:680px; margin-bottom:clamp(30px,4vw,50px); }
.section-head.center,.section-head .center,.center{ text-align:center; }
.section-head.center{ margin-inline:auto; }

.row{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.stack{ display:flex; flex-direction:column; gap:1rem; }

.grid{ display:grid; gap:clamp(18px,2.5vw,30px); }
/* minmax(0,1fr) au lieu de 1fr : autorise les colonnes a retrecir sous la
   largeur min-content de leur contenu (evite les debordements horizontaux
   quand un enfant a un contenu large : timelines, tableaux, mots longs). */
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:920px){
  .grid.cols-3,.grid.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:minmax(0,1fr); }
}

/* ---- Primitives de mise en page réutilisables (scalables) ----------
   .grid-layout    : grille auto-responsive, les colonnes se calculent
                     seules (aucune media query). Régler via --col-min.
   .sidebar-layout : menu latéral collant sur PC, empilé sous le contenu
                     sur mobile (<=900px). Régler la largeur via --side.
                     Enfants attendus : <div class="side"> + <div class="main">.
   -------------------------------------------------------------------- */
.grid-layout{
  display:grid;
  gap:clamp(18px,2.5vw,30px);
  grid-template-columns:repeat(auto-fit, minmax(min(var(--col-min,260px),100%), 1fr));
}
.sidebar-layout{
  display:grid;
  gap:clamp(24px,4vw,48px);
  grid-template-columns:var(--side,280px) minmax(0,1fr);
  align-items:start;
}
.sidebar-layout > .side{ position:sticky; top:88px; min-width:0; }
.sidebar-layout > .main{ min-width:0; }
@media (max-width:900px){
  .sidebar-layout{ grid-template-columns:minmax(0,1fr); }
  .sidebar-layout > .side{ position:static; top:auto; }
}

/* Barre de filtres / catégories : liste verticale sur PC, défilement
   horizontal « au pouce » sur mobile (overflow-x). Réutilisable partout. */
.filter-list{ display:flex; flex-direction:column; gap:.3rem; }
@media (max-width:900px){
  .filter-list{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:.5rem;
    padding-bottom:.2rem;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .filter-list::-webkit-scrollbar{ display:none; }
  .filter-list > *{ flex:0 0 auto; scroll-snap-align:start; }
}

.bg-cream{ background:linear-gradient(180deg, rgba(239,230,215,.66), rgba(239,230,215,.4)); }
.bg-blue{ background:linear-gradient(180deg, rgba(220,239,251,.75), rgba(220,239,251,.43)); }
.bg-sage{ background:linear-gradient(180deg, rgba(222,235,224,.75), rgba(222,235,224,.45)); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family:var(--font-body);
  font-weight:800;
  font-size:.92rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:.84em 1.42em;
  border-radius:999px;
  cursor:pointer;
  border:1.5px solid transparent;
  background:var(--blue-deep);
  color:#fff;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
  line-height:1;
  white-space:nowrap;
  max-width:100%;
  overflow-wrap:anywhere;
}
.btn svg{ width:1.02em; height:1.02em; }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }

.btn-primary{ background:linear-gradient(140deg, var(--blue-deep), #1f6f9e); color:#fff; }
.btn-sun{ background:linear-gradient(130deg, var(--yellow), #dfb255); color:#5a4314; }
.btn-sun:hover{ background:linear-gradient(130deg, #f0c458, #d7a74a); }
.btn-soft{ background:var(--blue-soft); color:var(--blue-deep); }
.btn-soft:hover{ background:#cce4f7; }
.btn-ghost{ background:rgba(255,255,255,.65); color:var(--ink); border-color:var(--line); backdrop-filter:blur(4px); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-deep); background:#fff; }
.btn-lg{ font-size:1rem; padding:.95em 1.75em; }

.hero.va .btn-ghost,
.cta-band .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.14); }
.hero.va .btn-ghost:hover,
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.23); border-color:#fff; color:#fff; }

.card{
  background:rgba(255,255,255,.85);
  border:1px solid rgba(223,211,193,.92);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card.hoverable:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:rgba(45,127,176,.35);
}
.card-body{
  padding:clamp(18px,2.2vw,26px);
  display:flex;
  flex-direction:column;
  gap:.56em;
  flex:1;
}
.card-body h3{ margin:0; }
.card-body p{ margin:0; }

.photo{
  background-color:var(--taupe-soft);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  width:100%;
  min-height:80px;
  position:relative;
  isolation:isolate;
}
.photo.ratio-16x9,.ratio-16x9{ aspect-ratio:16/9; }
/* Squelette de chargement : uniquement si une vraie source est présente */
.photo[data-src]:not([data-src=""]):not(.is-loaded)::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,var(--taupe-soft) 8%,#f4ead9 18%,var(--taupe-soft) 33%);
  background-size:220% 100%;
  animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{ to{ background-position:-220% 0; } }
/* Placeholder de marque quand aucune photo n'est fournie
   (évite le bloc vide et le shimmer infini d'un data-src="") */
.photo[data-src=""],
.photo:not([data-src]){
  background:linear-gradient(135deg,var(--blue-soft) 0%,var(--taupe-soft) 100%);
}
.photo[data-src=""]::after,
.photo:not([data-src])::after{
  content:"";
  position:absolute;
  inset:0;
  background:url("../images/Logo.png") center/auto min(56%,148px) no-repeat;
  opacity:.42;
  animation:none;
}

.iconchip{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  flex:none;
  color:#fff;
  box-shadow:0 10px 22px rgba(28,44,61,.18);
}
.iconchip svg{ width:26px; height:26px; }
.ic-blue{ background:linear-gradient(150deg,var(--blue),var(--blue-deep)); }
.ic-sage{ background:linear-gradient(150deg,var(--sage),var(--sage-deep)); }
.ic-yellow{ background:linear-gradient(150deg,var(--yellow),#dcaa47); color:#5f4a1f; }
.ic-rose{ background:linear-gradient(150deg,var(--rose),var(--rose-deep)); }
.ic-taupe{ background:linear-gradient(150deg,var(--taupe),var(--taupe-deep)); }
.ic{ display:inline-grid; place-items:center; color:var(--blue-deep); }

.pill{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-family:var(--font-body);
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.38em .86em;
  border-radius:999px;
  background:var(--taupe-soft);
  color:var(--taupe-deep);
  line-height:1;
}
.pill-blue{ background:var(--blue-soft); color:var(--blue-deep); }
.pill-yellow{ background:var(--yellow-soft); color:#896819; }
.pill-rose{ background:var(--rose-soft); color:var(--rose-deep); }
.pill-sage{ background:var(--sage-soft); color:var(--sage-deep); }
.pill-taupe{ background:var(--taupe-soft); color:var(--taupe-deep); }
.level-tag{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:800;
  font-size:.76rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.36em .8em;
  border-radius:999px;
  background:var(--blue-soft);
  color:var(--blue-deep);
}

.blob{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(2px); z-index:0; }

.page-hero{
  background:
    radial-gradient(110% 85% at 82% -10%, rgba(45,127,176,.2), transparent 60%),
    radial-gradient(100% 80% at -10% 15%, rgba(243,202,111,.22), transparent 56%),
    linear-gradient(180deg, rgba(248,245,239,.95), rgba(248,245,239,.8));
  padding-block:clamp(44px,6.5vw,90px);
  text-align:center;
  position:relative;
}
.page-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(21,83,125,.28), transparent);
}
.page-hero .wrap{ max-width:760px; }
.page-hero h1{ margin:.1em 0 .3em; }
.breadcrumb{ font-size:.84rem; color:var(--ink-soft); font-weight:600; margin-bottom:1em; }
.breadcrumb a{ color:var(--blue-deep); font-weight:700; }
.breadcrumb a:hover{ text-decoration:underline; }

.site-nav{
  position:sticky;
  top:0;
  z-index:60;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  background:rgba(248,245,239,.74);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.site-nav.scrolled{
  border-color:rgba(223,211,193,.8);
  box-shadow:0 10px 24px rgba(28,44,61,.1);
  background:rgba(248,245,239,.86);
}
.nav-inner{ display:flex; align-items:center; gap:1.4rem; padding-block:.6rem; flex-wrap:nowrap; width:min(1180px,100% - 2*var(--gut)); max-width:none; margin-inline:auto; }
.nav-inner > nav{ flex:1 1 auto; display:flex; justify-content:center; min-width:0; }
.nav-mobile-only{ display:none; }
.nav-brand{ display:flex; align-items:center; gap:.8em; flex:none; }
.nav-brand .nb-text{ display:flex; flex-direction:column; line-height:1.05; }
.nav-brand .nb-text b{ font-family:var(--font-head); font-size:1.2rem; color:var(--ink); letter-spacing:.005em; white-space:nowrap; }
.nav-brand .nb-text small{ font-family:var(--font-hand); font-size:1.12rem; color:var(--blue-deep); letter-spacing:.01em; line-height:1; white-space:nowrap; }

.nav-links{ display:flex; align-items:center; gap:.4rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:center; }
.nav-links a,
.nav-links .sub-toggle{
  position:relative;
  display:block;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.94rem;
  padding:.55em 1em;
  border-radius:999px;
  color:var(--ink-soft);
  white-space:nowrap;
  transition:color .18s ease, background .18s ease;
}
.nav-links .sub-toggle{ border:none; background:none; cursor:pointer; }
.nav-links a:hover,
.nav-links .sub-toggle:hover{ color:var(--blue-deep); background:var(--blue-soft); }
.nav-links a.active,
.nav-links .sub-toggle.active{ color:var(--blue-deep); font-weight:700; background:var(--blue-soft); }

/* Sous-menu déroulant */
.nav-links .has-sub{ position:relative; }
.nav-links .has-sub > a,
.nav-links .has-sub > .sub-toggle{ display:inline-flex; align-items:center; gap:.3em; }
.nav-links .sub-caret{ width:14px; height:14px; transition:transform .2s ease; }
.nav-links .has-sub:hover > a .sub-caret,
.nav-links .has-sub:hover > .sub-toggle .sub-caret,
.nav-links .has-sub:focus-within > a .sub-caret,
.nav-links .has-sub:focus-within > .sub-toggle .sub-caret{ transform:rotate(180deg); }
.nav-links .sub-menu{
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%) translateY(8px);
  margin-top:.5rem;
  min-width:210px;
  display:flex;
  flex-direction:column;
  gap:.16rem;
  list-style:none;
  padding:.5rem;
  background:rgba(248,245,239,.98);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:0 18px 34px rgba(28,44,61,.16);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:5;
}
/* Pont invisible : garde le survol actif entre le lien et le panneau */
.nav-links .sub-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-.6rem;
  height:.6rem;
}
.nav-links .has-sub:hover > .sub-menu,
.nav-links .has-sub:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-links .sub-menu a{ display:block; white-space:nowrap; }

.nav-cta{ display:flex; align-items:center; gap:.7rem; padding-left:1.1rem; border-left:1px solid var(--line); }
.nav-cta-primary{
  font-size:.84rem;
  padding:.72em 1.3em;
  border-radius:999px;
  background:linear-gradient(130deg, var(--yellow), #dfb255);
  color:#5a4314;
  box-shadow:0 4px 14px rgba(225,178,53,.3);
}
.nav-cta-primary:hover{ background:linear-gradient(130deg, #f0c458, #d7a74a); transform:translateY(-1px); }

.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  width:46px;
  height:46px;
  border-radius:13px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
}
.nav-toggle .nt-bars{ display:flex; flex-direction:column; gap:4px; width:20px; }
.nav-toggle .nt-bars span{ height:2.5px; width:100%; background:var(--ink); border-radius:2px; transition:transform .22s ease, opacity .2s ease; }
.site-nav.open .nav-toggle .nt-bars span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.site-nav.open .nav-toggle .nt-bars span:nth-child(2){ opacity:0; }
.site-nav.open .nav-toggle .nt-bars span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:1100px){
  .nav-inner{ gap:1rem; }
  .nav-inner > nav{ flex:0 0 auto; }
  .nav-brand{ margin-right:auto; }
  .nav-toggle{ display:inline-flex; }
  .nav-cta{ padding-left:0; border-left:none; }
  .nav-links{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:.16rem;
    background:rgba(248,245,239,.97);
    backdrop-filter:saturate(150%) blur(12px);
    -webkit-backdrop-filter:saturate(150%) blur(12px);
    border-bottom:1px solid var(--line);
    padding:.7rem var(--gut) 1.1rem;
    box-shadow:0 18px 30px rgba(28,44,61,.12);
    transform:translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    max-height:calc(100vh - 70px);
    max-height:calc(100dvh - 70px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .site-nav.open .nav-links{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ padding:.82em 1.1em; border-radius:999px; font-size:1rem; }
  .nav-links .sub-toggle{ width:100%; justify-content:space-between; padding:.82em 1.1em; font-size:1rem; font-weight:700; color:var(--ink); }
  .nav-links a.active,
  .nav-links .sub-toggle.active{ background:var(--blue-soft); }
  .nav-cta .btn:not(.nav-cta-primary){ display:none; }
  .nav-mobile-only{ display:block; }
  .nav-admin-link{ margin-top:.45rem; padding-top:.55rem; border-top:1px solid var(--line); }
  .nav-admin-link a{ display:flex; align-items:center; justify-content:center; gap:.5em; color:var(--blue-deep); font-weight:700; }
  .nav-admin-link a svg{ width:17px; height:17px; }

  /* Sous-menu : empilé en ligne sur mobile */
  .nav-links .has-sub > a .sub-caret,
  .nav-links .has-sub > .sub-toggle .sub-caret{ display:none; }
  .nav-links .sub-menu{
    position:static;
    transform:none;
    margin-top:0;
    opacity:1;
    visibility:visible;
    pointer-events:none;
    min-width:0;
    background:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:none;
    box-shadow:none;
    padding:.1rem 0 .3rem .9rem;
    gap:.1rem;
  }
  .nav-links .sub-menu::before{ display:none; }
  .nav-links .sub-menu a{ font-size:.94rem; color:var(--ink-soft); }
  /* Le sous-menu ne capte les clics que lorsque le menu mobile est ouvert
     (sinon ses liens invisibles recouvrent le haut du contenu et captent les taps). */
  .site-nav.open .nav-links .sub-menu{ pointer-events:auto; }
}

@media (max-width:720px){
  .nav-cta-primary{ display:none !important; }
  .nav-cta{ gap:0; }
}

@media (max-width:560px){
  .nav-inner{ gap:.6rem; }
  .nav-brand .nb-text b{ font-size:1.02rem; }
  .nav-brand .nb-text small{ font-size:1rem; }
}

/* Bouton retour en haut */
.to-top{
  position:fixed;
  right:clamp(16px,3vw,28px);
  bottom:clamp(16px,3vw,28px);
  z-index:70;
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:var(--blue-deep);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(21,83,125,.4);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--blue); transform:translateY(-2px); }
.to-top svg{ width:22px; height:22px; }
@media (prefers-reduced-motion:reduce){ .to-top{ transition:opacity .2s ease, visibility .2s; transform:none; } .to-top.show:hover{ transform:none; } }

.site-footer{
  background:
    radial-gradient(70rem 30rem at 88% -18%, rgba(45,127,176,.28), transparent 56%),
    #1c2d38;
  color:#ccdae3;
  margin-top:0;
}
.site-footer a{ color:#ccdae3; }
.site-footer a:hover{ color:#fff; }
.footer-news{
  border-bottom:1px solid rgba(255,255,255,.13);
}
.footer-news-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(18px,3vw,40px);
  flex-wrap:wrap;
  padding-block:clamp(28px,4vw,44px);
}
.footer-news .fn-text{ flex:1 1 320px; }
.footer-news .fn-text h3{ color:#fff; font-size:1.3rem; margin:0 0 .3em; }
.footer-news .fn-text p{ color:#9eb0bc; font-size:.92rem; margin:0; max-width:52ch; }
.footer-news .fn-form{ display:flex; gap:.6em; flex:1 1 360px; flex-wrap:wrap; }
.footer-news .fn-form input[type="email"]{
  flex:1 1 200px;
  width:auto;
  border:1.5px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  color:#fff;
  border-radius:var(--r-md);
  padding:.8em 1em;
}
.footer-news .fn-form input[type="email"]::placeholder{ color:#9eb0bc; }
.footer-news .fn-form input[type="email"]:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(45,127,176,.3); background:rgba(255,255,255,.12); }
.footer-news .fn-form .btn{ white-space:nowrap; }
.footer-news .hp{ position:absolute; left:-9999px; }
.footer-news .fn-msg{ flex-basis:100%; margin:.2em 0 0; font-weight:700; font-size:.9rem; }
.footer-news .fn-ok{ color:#9ad9b0; }
.footer-news .fn-err{ color:#f4b0a6; }
@media (max-width:560px){
  .footer-news .fn-form .btn{ width:100%; }
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(24px,4vw,48px);
  padding-block:clamp(46px,6vw,76px);
}
@media (max-width:920px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-brand{ align-items:center; text-align:center; }
  .footer-brand p{ max-width:38ch; }
  .footer-socials{ justify-content:center; }
}
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-logo{ display:inline-flex; background:#fff; border-radius:var(--r-lg); padding:16px 20px; border:1px solid rgba(255,255,255,.55); box-shadow:0 18px 40px rgba(0,0,0,.28); transition:transform .25s ease, box-shadow .25s ease; }
.footer-logo:hover{ transform:translateY(-3px); box-shadow:0 26px 54px rgba(0,0,0,.36); }
.footer-logo img{ height:180px; width:auto; aspect-ratio:752/1024; display:block; }
.footer-brand p{ margin-top:1.3em; font-size:.92rem; color:#9eb0bc; max-width:32ch; }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom:.9em; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55em; }
.footer-col ul li{ font-size:.92rem; }
.footer-col .fcontact{ display:flex; gap:.6em; align-items:flex-start; font-size:.92rem; margin-bottom:.7em; }
.footer-col .fcontact svg{ width:18px; height:18px; flex:none; margin-top:3px; stroke:#84c2ea; }
.footer-socials{ display:flex; gap:.6em; margin-top:1em; }
.footer-socials a{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.11);
  transition:background .15s ease;
}
.footer-socials a:hover{ background:var(--blue); }
.footer-socials svg{ width:20px; height:20px; stroke:#fff; }
.footer-partner{ display:inline-block; margin-top:1.2em; background:#fff; padding:.5em .8em; border-radius:12px; line-height:0; box-shadow:var(--shadow-sm); }
.footer-partner img{ height:44px; width:auto; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  padding-block:1.2rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  font-size:.84rem;
  color:#91a2af;
}
.footer-bottom a:hover{ text-decoration:underline; }

.field,.fld{ display:flex; flex-direction:column; gap:.4em; margin-bottom:1rem; }
.field label,.fld label,.field > span:first-child{
  font-family:var(--font-body);
  font-weight:800;
  letter-spacing:.02em;
  font-size:.86rem;
  color:var(--ink);
  text-transform:uppercase;
}
.field.two{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .field.two{ grid-template-columns:1fr; } }
input,select,textarea{
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  padding:.75em .95em;
  width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(45,127,176,.19);
}
textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:.82rem; color:var(--ink-soft); }

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .photo[data-src]:not(.is-loaded)::after{ animation:none; }
}

.hide{ display:none !important; }
.signature{ font-family:var(--font-hand); }

.hero.vc .hero-slogan,
.signature{ text-shadow:0 2px 10px rgba(255,255,255,.45); }

/* =====================================================================
   MOBILE FLUIDE — 80 % des visiteurs sont sur téléphone.
   Objectif : pages courtes, denses et balayables, sans scroll infini.
   ===================================================================== */

/* Rangée de cartes balayable horizontalement sur mobile (scroll-snap).
   Ajouter la classe .snap-m à une .grid pour l'activer.
   Réservé aux écrans TACTILES (pointer:coarse) : à la souris, sans barre de
   défilement visible, on ne pourrait pas faire défiler — sur PC les cartes
   restent donc empilées classiquement. */
@media (max-width:620px) and (pointer:coarse){
  .grid.snap-m{
    display:flex;
    overflow-x:auto;
    gap:12px;
    scroll-snap-type:x mandatory;
    padding:4px 4px 14px;
    margin-inline:-4px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .grid.snap-m::-webkit-scrollbar{ display:none; }
  .grid.snap-m > *{ flex:0 0 82%; max-width:82%; scroll-snap-align:center; }
  /* Les animations reveal gênent le balayage : on les neutralise ici. */
  .grid.snap-m > .reveal{ opacity:1; transform:none; transition:none; }
}

@media (max-width:600px){
  .section{ padding-block:30px 38px; }
  .section-head{ margin-bottom:20px; }
  .btn-lg{ width:100%; white-space:normal; }

  h1{ font-size:clamp(1.85rem,7.6vw,2.2rem); }
  h2{ font-size:clamp(1.5rem,6vw,1.8rem); }
  .lead{ font-size:1.02rem; }

  .page-hero{ padding-block:26px 22px; }
  .breadcrumb{ margin-bottom:.5em; }

  .cta-band{ padding:26px 20px !important; border-radius:var(--r-lg) !important; }

  /* Navigation plus basse */
  .nav-inner{ padding-block:.4rem; }

  /* Footer condensé : logo réduit, colonnes de liens côte à côte */
  .footer-news-inner{ padding-block:20px; }
  .footer-top{ padding-block:28px; gap:20px; grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-col:last-child{ grid-column:1 / -1; }
  .footer-logo{ padding:10px 12px; }
  .footer-logo img{ height:96px; }
  .footer-brand p{ margin-top:.8em; }
}

/* =====================================================================
   DOCUMENTS PDF  (cartes + modale plein écran) — pages APEL / OGEC
   ===================================================================== */
.pdf-docs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.pdf-doc{ display:flex; flex-direction:column; gap:1rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.2em 1.3em; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.pdf-doc:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--rose); }
.pdf-head{ display:flex; align-items:center; gap:.9rem; }
.pdf-ic{ width:48px; height:48px; border-radius:13px; background:var(--rose-soft); color:var(--rose-deep); display:grid; place-items:center; flex:none; }
.pdf-ic svg{ width:24px; height:24px; }
.pdf-info{ min-width:0; }
.pdf-info b{ font-family:var(--font-head); font-weight:400; font-size:1.08rem; line-height:1.2; color:var(--ink); display:block; }
.pdf-info small{ font-size:.84rem; color:var(--ink-soft); }
.pdf-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; }
.pdf-btn{ display:inline-flex; align-items:center; gap:.45em; font-size:.85rem; font-weight:700; color:var(--blue-deep); border:1.5px solid var(--line); background:#fff; padding:.55em .9em; border-radius:999px; cursor:pointer; font-family:inherit; transition:border-color .15s ease, transform .15s ease, background .15s ease, color .15s ease; }
.pdf-btn:hover{ border-color:var(--blue); transform:translateY(-1px); }
.pdf-btn svg{ width:16px; height:16px; flex:none; }
.pdf-btn-primary{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.pdf-btn-primary:hover{ background:var(--blue); border-color:var(--blue); }

/* Modale plein écran */
html.pdf-lock{ overflow:hidden; }
.pdf-modal{ position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; background:rgba(18,26,34,.9); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:pdfFade .18s ease; }
.pdf-modal[hidden]{ display:none; }
@keyframes pdfFade{ from{ opacity:0; } to{ opacity:1; } }
.pdf-modal-bar{ display:flex; align-items:center; gap:.8rem; padding:.7rem clamp(.8rem,3vw,1.4rem); color:#fff; }
.pdf-modal-title{ font-family:var(--font-head); font-size:clamp(1rem,3.5vw,1.2rem); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdf-modal-tools{ display:flex; align-items:center; gap:.5rem; flex:none; }
.pdf-btn-ghost{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff; }
.pdf-btn-ghost:hover{ background:rgba(255,255,255,.22); border-color:#fff; }
.pdf-close{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--ink); border:none; cursor:pointer; flex:none; box-shadow:0 6px 16px -6px rgba(0,0,0,.5); transition:transform .15s ease, background .15s ease; }
.pdf-close svg{ width:24px; height:24px; }
.pdf-close:hover{ transform:rotate(90deg) scale(1.05); background:var(--rose-soft); color:var(--rose-deep); }
.pdf-close:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }
.pdf-modal-frame{ flex:1; margin:0 clamp(.5rem,2.5vw,1.2rem) clamp(.6rem,2.5vw,1.2rem); border-radius:var(--r-md); overflow:hidden; background:#f4efe6; }
.pdf-modal-frame iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:600px){
  .pdf-modal-tools .pdf-btn-ghost span{ display:none; }
  .pdf-modal-frame{ margin:0 .4rem .5rem; }
}

/* =====================================================================
   PAGES ÉQUIPE & ASSOCIATIONS  (enseignantes, personnel, APEL, OGEC)
   ===================================================================== */

/* Intro de section : lead centré et lisible */
.section-intro{ max-width:760px; margin:0 auto; text-align:center; color:var(--ink-soft); font-size:1.05rem; line-height:1.6; }
.section-intro strong{ color:var(--ink); font-weight:600; }

/* Missions : cartes éditoriales à grand numéro (flex centré, pas d'orphelin) */
.missions-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:1rem; margin-top:1.6rem; }
.mission{ position:relative; flex:1 1 300px; max-width:360px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5em 1.4em 1.35em; box-shadow:var(--shadow-sm); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.mission:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--m,var(--blue)); }
.mission h3{ font-family:var(--font-head); font-weight:400; font-size:1.16rem; margin:0 0 .3em; color:var(--ink); line-height:1.2; }
.mission p{ margin:0; font-size:.95rem; line-height:1.45; color:var(--ink-soft); }
.mission .iconchip{ margin-bottom:.9em; }
/* Texte des cartes aligné à gauche : la justification creusait de grands espaces sur ces colonnes étroites */
.mission p, .serv-list li, .serv-list li span, .act-card li, .act-card ul{ text-align:left; text-justify:auto; hyphens:none; -webkit-hyphens:none; }

/* Trombinoscope éditorial : cartes SANS avatar (accent coloré + rôle + nom) */
.rgroup{ margin-top:2rem; }
.rgroup:first-of-type{ margin-top:0; }
.rgroup-head{ display:flex; align-items:baseline; gap:.7rem; margin:0 0 1.1rem; flex-wrap:wrap; }
.rgroup-head .rg-title{ font-family:var(--font-head); font-weight:400; font-size:1.32rem; color:var(--ink); position:relative; padding-left:.65em; }
.rgroup-head .rg-title::before{ content:""; position:absolute; left:0; top:.14em; bottom:.14em; width:4px; border-radius:3px; background:var(--gc,var(--blue)); }
.rgroup-head .rg-count{ font-size:.85rem; color:var(--ink-soft); }
.roster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem; }
.rp{ position:relative; background:#fff; border:1px solid var(--line); border-left:4px solid var(--a,var(--blue)); border-radius:var(--r-md); padding:1.1em 1.2em; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.rp:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.rp .rp-tag{ display:inline-block; font-size:.71rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--a2,var(--blue-deep)); margin-bottom:.35em; }
.rp .rp-name{ font-family:var(--font-head); font-weight:400; font-size:1.14rem; line-height:1.2; color:var(--ink); }
.rp .rp-note{ font-size:.86rem; color:var(--ink-soft); margin-top:.3em; line-height:1.4; }

/* Services (APEL) : mêmes cartes que les missions (icône en haut, 3+2 centré) */
.serv-list{ list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:1rem; }
.serv-list li{ position:relative; flex:1 1 300px; max-width:360px; display:flex; flex-direction:column; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5em 1.4em 1.35em; box-shadow:var(--shadow-sm); transition:transform .16s ease, box-shadow .16s ease; }
.serv-list li:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.serv-list li .iconchip{ width:54px; height:54px; border-radius:18px; margin-bottom:.9em; }
.serv-list li span{ font-size:1rem; line-height:1.45; color:var(--ink); }

.assoc-note{ background:var(--yellow-soft); border:1px solid var(--taupe-soft); border-radius:var(--r-md); padding:1.1em 1.25em; font-size:.95rem; color:var(--ink); }
.assoc-note b{ font-family:var(--font-head); }
.assoc-note p{ margin:.2em 0 0; }

/* Nos actions (APEL) */
.act-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1rem; margin-top:1.4rem; }
.act-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.3em 1.35em; box-shadow:var(--shadow-sm); }
.act-card .ah{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9em; }
.act-card .ah .iconchip{ width:44px; height:44px; border-radius:13px; flex:none; }
.act-card .ah h3{ margin:0; font-size:1.16rem; }
.act-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55em; }
.act-card li{ position:relative; padding-left:1.3em; font-size:.95rem; line-height:1.4; color:var(--ink); }
.act-card li::before{ content:""; position:absolute; left:.15em; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--rose); }

.contact-band{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; justify-content:space-between; }
.contact-band .cb-links{ display:flex; flex-wrap:wrap; gap:.7rem; }