:root{
  --bg1:#fff3b0;      /* jaune pastel */
  --bg2:#bde0fe;      /* bleu pastel */
  --bg3:#caffbf;      /* vert pastel */
  --ink:#17202a;
  --muted:#4b5563;
  --card:#ffffff;
  --line:rgba(0,0,0,.08);
  --brand:#3b82f6;
  --brand2:#22c55e;
  --brand3:#a855f7;
  --urgent:#fb7185;   /* ROUGE urgent */
  --urgent2:#be123c;
  --r:18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 15% 10%, var(--bg1), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, var(--bg2), transparent 60%),
    radial-gradient(900px 500px at 60% 90%, var(--bg3), transparent 60%),
    #fff;
}

a{color:inherit}
.container{width:min(1120px,92vw); margin:0 auto}

.alertbar{
  background:linear-gradient(90deg, var(--urgent), var(--urgent2));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.25);
}
.alert-inner{display:flex; align-items:center; gap:12px; padding:.55rem 0}
.pill{
  background:#fff;
  color:var(--urgent2);
  font-weight:900;
  border-radius:999px;
  padding:.18rem .6rem;
  font-size:.85rem;
}
.ticker{overflow:hidden; flex:1}
.track{display:flex; gap:28px; width:max-content; animation:marquee 18s linear infinite}
.track span{white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.alert-cta{color:#fff; font-weight:900; text-decoration:none}
.alert-cta:hover{text-decoration:underline}

.header{
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.logo{
  width:46px; height:46px; border-radius:16px;
  display:grid; place-items:center;
  background:conic-gradient(from 120deg, #f97316, #22c55e, #3b82f6, #a855f7, #f97316);
  color:#fff; font-weight:1000;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}
.brand-title{font-weight:1000}
.brand-sub{color:var(--muted); font-weight:700; font-size:.95rem}

.nav{
  display:flex; gap:10px; flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  font-weight:900;
  color:var(--ink);
  background:rgba(255,255,255,.75);
  border:1px solid var(--line);
  padding:.55rem .75rem;
  border-radius:999px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nav a:hover{
  transform:translateY(-1px);
}

.toprow{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

.hero{
  padding:18px 0 8px;
}
.hero-box{
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
h1{margin:.2rem 0 .6rem; font-size:clamp(1.7rem,3vw,2.4rem)}
h2{margin:0 0 .5rem; font-size:1.35rem}
p{color:var(--muted); line-height:1.55}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:12px;
}
.card{
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card h3{margin:.1rem 0 .5rem; font-size:1.05rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.65rem .9rem;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:1000;
  text-decoration:none;
  background:#fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn.primary{background:var(--brand); color:#fff; border-color:transparent}
.btn.green{background:var(--brand2); color:#fff; border-color:transparent}
.btn.purple{background:var(--brand3); color:#fff; border-color:transparent}
.btn:hover{filter:brightness(1.02)}

.section{padding:22px 0}
.section .head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap}

.footer{
  margin-top:30px;
  padding:22px 0;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.7);
}
.footer a{color:var(--muted); font-weight:900; text-decoration:none}
.footer a:hover{text-decoration:underline}

@media(max-width:980px){
  .grid{grid-template-columns:1fr}
}

/* ===== LOGO EN FILIGRANE (FOND DU SITE) ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/assets/header-ecole.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 520px auto;
  opacity: 0.06;              /* très discret */
  pointer-events: none;       /* n’interfère jamais */
  z-index: 0;
}

/* Le contenu passe AU-DESSUS du fond */
body > * {
  position: relative;
  z-index: 1;
}

/* ================================================= */
/* ✅ BANDES LATERALES (TRAITS) + TEXTE QUI DEFILE    */
/* ================================================= */
.side-band{
  position: fixed;
  top: 110px;     /* sous le header */
  bottom: 0;
  width: 90px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,.65),
    rgba(255,255,255,0)
  );
}

.side-band.left{
  left: 0;
  border-right: 2px solid rgba(0,0,0,.10); /* ✅ le trait visible */
}

.side-band.right{
  right: 0;
  border-left: 2px solid rgba(0,0,0,.10); /* ✅ le trait visible */
}

.side-text{
  position: absolute;
  top: 0;
  left: 50%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 1px;
  color: rgba(0,0,0,.28);
  white-space: nowrap;
  user-select: none;
}

/* Pas sur mobile */
@media (max-width: 1000px){
  .side-band{ display:none; }
}

/* ================================================= */
/* ✅ EFFET NÉON AU SURVOL : PARTOUT (cards/boutons/boites/menu) */
/* ================================================= */
.card:hover,
.btn:hover,
.hero-box:hover,
.nav a:hover{
  border-color: rgba(168,85,247,.70);
  box-shadow:
    0 0 10px rgba(168,85,247,.45),
    0 0 24px rgba(168,85,247,.25),
    0 18px 40px rgba(0,0,0,.18);
}

/* =========================================================
   HEADER – VERSION COMPACTE & PRO
   ========================================================= */

/* Header global */
.header {
  padding: 24px 0 18px;
}

/* Conteneur interne */
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Zone actions (connexion/admin) */
.header-actions {
  position: absolute;
  top: 14px;
  right: 16px;
}

.header-actions .btn {
  font-size: .85rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* Bloc logo + titre */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

/* Logo vidéo */
.brand-logo video {
  width: 84px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}

/* Texte du site */
.brand-text {
  text-align: left;
}

.brand-title {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.1;
}

.brand-sub {
  font-size: .95rem;
  opacity: .85;
  margin-top: 2px;
}

/* Navigation */
.nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.nav a {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.06);
  font-size: .9rem;
  text-decoration: none;
  transition: all .15s ease;
}

.nav a:hover {
  background: white;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
}

/* Responsive */
@media (max-width: 720px) {
  .brand {
    flex-direction: column;
    text-align: center;
  }

  .brand-text {
    text-align: center;
  }

  .header-actions {
    top: 10px;
    right: 10px;
  }
}

/* =========================================================
   ✅ AJOUT MOBILE (NE SUPPRIME RIEN) — PATCH FINAL
   ========================================================= */

/* 1) Sur téléphone: éviter chevauchement du bouton connexion/admin */
@media (max-width: 720px){
  .header-actions{
    position: static !important;
    width: 100%;
    display:flex;
    justify-content:center;
    gap:10px;
    margin-bottom: 6px;
  }
}

/* 2) Sur téléphone: nav devient un ruban scrollable horizontal */
@media (max-width: 720px){
  .nav{
    width:100%;
    flex-wrap: nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    justify-content:flex-start !important;
    padding: 8px 2px;
  }
  .nav a{
    white-space:nowrap;
    flex: 0 0 auto;
    padding: 10px 14px !important;
  }
  .nav::-webkit-scrollbar{ height: 6px; }
  .nav::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; }
}

/* 3) Boutons hero pleine largeur */
@media (max-width: 720px){
  .hero .btn{ width:100%; }
}

/* 4) Section Animations: 1 colonne (utilise event-grid + event-datebox) */
@media (max-width: 820px){
  .event-grid{ grid-template-columns: 1fr !important; gap: 14px !important; }
  .event-grid > div{ text-align:center !important; }
  .event-grid img{ width:min(240px,72vw) !important; height:auto !important; }
  .event-datebox{ display:block !important; text-align:center !important; }
}