:root{
  color-scheme: light;
  --primary:#0A2A6B;
  --accent:#E53935;
  --ring: 0 0 0 3px rgba(10,42,107,.14);
  --logo-card-bg:#FAFAF6;

  /* FlashInfos (vitesse + hauteur) */
  --flash-speed: 60s;   /* ↓ diminue pour accélérer */
  --flash-height: 56px; /* hauteur bandeau */
  --stack-gap: 0px;     /* écart header ⇢ flash ⇢ hero */
}

/* Reset micro-espaces navigateur */
html,body{ margin:0; padding:0 }

/* Utilitaires */
.text-primary{ color:var(--primary) }
.link-underline{ position:relative }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:currentColor; transition:width .25s ease }
.link-underline:hover::after{ width:100% }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px }

/* ===== HEADER BRANDING (logos) ===== */
.logo-block{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:.25rem .4rem; border-radius:12px;
  transition:transform .15s ease, box-shadow .15s ease;
  background:transparent;
}
.logo-block:hover{ transform:translateY(-1px) }

.logo-box{
  width:94px; height:94px; display:grid; place-items:center;
  border-radius:22px; background:var(--logo-card-bg);
  border:1px solid rgba(15,23,42,.18);
  box-shadow:0 12px 28px rgba(2,6,23,.12), inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter:saturate(120%) blur(2px);
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.logo-block:hover .logo-box{ box-shadow:0 14px 34px rgba(2,6,23,.14); border-color:rgba(15,23,42,.20); background:#FBFBF7 }

.logo-img{
  width:78px; height:78px; object-fit:contain;
  background:var(--logo-card-bg); border-radius:16px;
  filter: drop-shadow(0 2px 4px rgba(2,6,23,.06));
}
.logo-caption{ font-size:.8rem; font-weight:800; letter-spacing:.02em; line-height:1 }
.logo-caption.isg{ color:#E53935 }
.logo-caption.issad{ color:#22c55e }

@media (max-width:480px){
  .logo-box{ width:76px; height:76px; border-radius:16px }
  .logo-img{ width:62px; height:62px; border-radius:12px }
  .logo-caption{ font-size:.74rem }
}

/* NAV & DROPDOWNS */
.nav-group{ position:relative }
.dropdown-panel{
  position:absolute; left:0; top:100%; margin-top:8px; width:16rem; background:#fff;
  border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,.10);
  opacity:0; visibility:hidden; transition:.15s ease; padding:12px; z-index:40
}
.nav-group:hover .dropdown-panel{ opacity:1; visibility:visible }
.dropdown-panel::before{ content:""; position:absolute; left:0; right:0; top:-8px; height:8px }

/* Popovers “Administration” */
.role{ position:relative }
.role::after{ content:""; position:absolute; left:100%; top:0; width:14px; height:100% }
.popover-role{
  position:absolute; left:100%; top:0; margin-left:8px; width:260px; background:#fff;
  border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,.10);
  opacity:0; visibility:hidden; transition:.12s ease; padding:12px; z-index:50
}
.role:hover .popover-role{ opacity:1; visibility:visible }

/* Réseaux */
.social a{ transition:filter .15s ease, transform .15s ease }
.social a:hover{ filter:drop-shadow(0 0 6px rgba(255,255,255,.5)); transform:translateY(-1px) }
.social a[aria-label="Facebook"]:hover svg { fill:#1877F2 }
.social a[aria-label="LinkedIn"]:hover svg { fill:#0A66C2 }
.social a[aria-label="YouTube"]:hover  svg { fill:#FF0000 }
.social a[aria-label="WhatsApp"]:hover svg { fill:#25D366 }

/* Cartes “présentation” */
.panel-prez{ width:720px; padding:20px }
@media (min-width:900px){ .panel-prez{ width:820px } }
.prez-card{
  position:relative; overflow:hidden; background:#fff;
  border:1px solid #e2e8f0; border-radius:16px;
  box-shadow:0 10px 26px rgba(2,6,23,.10);
  transition:transform .18s ease, box-shadow .18s ease;
}
.prez-card:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(2,6,23,.14) }
.prez-top{ height:6px; background:linear-gradient(90deg,#0A2A6B, #2563eb, #22c55e) }
.prez-quote{ position:absolute; right:12px; top:8px; opacity:.10; pointer-events:none; font-size:84px; line-height:1; font-weight:900; color:#0A2A6B }
.prez-avatar{ width:56px; height:56px; border-radius:9999px; display:grid; place-items:center; font-weight:800; color:#fff; background:#0A2A6B; box-shadow:0 6px 14px rgba(2,6,23,.15) }
.btn-prez{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; padding:.6rem .9rem; border-radius:12px; border:1px solid #cbd5e1; background:#fff; transition:all .15s ease; color:#0A2A6B }
.btn-prez:hover{ border-color:#0A2A6B; box-shadow:0 6px 18px rgba(2,6,23,.10) }

/* Tailles fines & tables */
@media (max-width:400px){ html{ font-size:15px } #siteHeader .text-lg{ font-size:.95rem } .dropdown-panel{ width:95vw } }
@media (max-width:340px){ #siteHeader .text-lg{ display:none } }
@media (max-width:320px){ html{ font-size:14px } .card{ border-radius:.8rem } .card.p-5{ padding:.9rem !important } }
.table-wrap, .scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.table-wrap table{ min-width:540px }

/* HERO */
.hero{ position:relative; min-height:60vh }
@media (min-width:768px){ .hero{ min-height:68vh } }
.hero-bg, .hero-overlay, .hero-gradient{ position:absolute; inset:0 }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 20% }
@media (max-width:767px){ .hero-bg img{ object-position:center 30% } }
@media (min-width:1280px){ .hero-bg img{ object-position:center 15% } }
.hero-overlay{ background:rgba(10,42,107,.55); mix-blend-mode:multiply }
.hero-gradient{ background:linear-gradient(180deg, rgba(10,42,107,.30) 0%, rgba(10,42,107,.35) 40%, rgba(10,42,107,.55) 100%) }
.hero-inner{ position:relative; z-index:1; color:#fff }
.hero h1{ font-size:clamp(1.35rem,4.5vw + .3rem,2.75rem) !important; line-height:1.2 }
.hero p{  font-size:clamp(.92rem,2.6vw + .3rem,1.15rem) !important }

/* Boutons hero */
.btn-hero-accent{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.5rem; border-radius:9999px; font-weight:800;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  box-shadow:0 10px 24px rgba(229,57,53,.22);
  transition:filter .15s ease, transform .05s ease;
}
.btn-hero-accent:hover{ filter:brightness(.96) }
.btn-hero-accent:active{ transform:translateY(1px) }
.btn-hero-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.5rem; border-radius:9999px; font-weight:800;
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px) saturate(120%);
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
.btn-hero-outline:hover{ background:rgba(255,255,255,.20); border-color:#fff }
.btn-hero-outline:active{ transform:translateY(1px) }

/* Puces */
.chip-ghost{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:9999px; font-weight:700; font-size:.92rem;
  background:#fff; color:#0f172a; border:1px solid #e2e8f0;
  transition:color .15s ease, border-color .15s ease, background .15s ease, transform .05s ease;
}
.chip-ghost:hover{ color:#1d4ed8; border-color:#1d4ed8; background:#fff }

/* Stats */
.stat-card{
  background:#fff; border:1px solid #e2e8f0; border-radius:1rem;
  padding:1.5rem; text-align:center; box-shadow:0 8px 18px rgba(2,6,23,.06);
}
.stat-number{ font-size:2rem; font-weight:900; color:#1e3a8a }
@media (min-width:768px){ .stat-number{ font-size:2.25rem } }
.stat-label{ margin-top:.25rem; color:#475569 }

/* About */
.about{ position:relative }
.about-img{
  width:100%; height:420px; object-fit:cover; object-position:center 38%;
  border-radius:1rem; filter:saturate(105%) contrast(102%) brightness(98%);
  box-shadow:0 18px 40px rgba(2,6,23,.12);
}
.about-blur{
  position:absolute; inset:-14px; z-index:-1; border-radius:1.25rem;
  background-size:cover; background-position:center 38%;
  filter:blur(8px) saturate(110%) contrast(102%) opacity(.30);
}

/* Vision popover */
.vision{ position:relative }
.vision-bridge{ content:""; position:absolute; left:0; right:0; top:100%; height:12px }
.vision-panel{
  position:absolute; left:0; top:calc(100% + 10px); width:min(640px,92vw);
  background:linear-gradient(180deg, rgba(10,42,107,.92), rgba(10,42,107,.86));
  color:#fff; border-radius:16px; padding:18px; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 50px rgba(2,6,23,.18);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  z-index:30; backdrop-filter:blur(10px);
}
.vision:hover .vision-panel,
.vision:focus-within .vision-panel,
.vision.open .vision-panel{ opacity:1; visibility:visible; transform:translateY(0) }
.vision-panel .title{ font-weight:700; font-size:1.05rem; margin-bottom:.35rem }
.vision-panel .meta{ font-size:.78rem; color:#cfe0ff }
.vision-close{
  position:absolute; top:8px; right:10px; width:28px; height:28px;
  display:grid; place-items:center; border-radius:9999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
}
.vision-close:hover{ background:rgba(255,255,255,.16) }

/* Boutons génériques */
.btn-primary{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.1rem; border-radius:12px; font-weight:600;
  background:#0A2A6B; color:#fff; border:1px solid #0A2A6B;
  box-shadow:0 8px 20px rgba(10,42,107,.25);
  transition:filter .15s ease, transform .05s ease;
}
.btn-primary:hover{ filter:brightness(1.02) }
.btn-primary:active{ transform:translateY(1px) }

.btn-outline{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.1rem; border-radius:12px; font-weight:600;
  background:rgba(255,255,255,.85); color:#0A2A6B;
  border:1px solid rgba(15,23,42,.2);
  backdrop-filter:saturate(120%) blur(2px);
  transition:border-color .15s ease, background .15s ease, transform .05s ease;
}
.btn-outline:hover{ border-color:#2563eb; background:#fff }
.btn-outline:active{ transform:translateY(1px) }

/* Partenaires (logos défilants) */
.logos-marquee{ position:relative; overflow:hidden }
.logos-marquee::after, .logos-marquee::before{
  content:""; position:absolute; top:0; bottom:0; width:80px; pointer-events:none; z-index:1;
}
.logos-marquee::before{ left:0; background:linear-gradient(90deg, #fff, rgba(255,255,255,0)) }
.logos-marquee::after{ right:0; background:linear-gradient(270deg, #fff, rgba(255,255,255,0)) }
.logos-track{
  display:flex; align-items:center; gap:3rem; width:max-content; animation:logos-scroll 22s linear infinite;
  padding-block:.25rem; opacity:.9;
}
.logos-marquee:hover .logos-track{ animation-play-state:paused }
@keyframes logos-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.logo{ height:40px; max-width:180px; object-fit:contain; filter:grayscale(100%); transition:transform .15s ease, filter .15s ease, opacity .15s ease; opacity:.9 }
.logo:hover{ transform:translateY(-1px); filter:grayscale(0%); opacity:1 }
@media (prefers-reduced-motion:reduce){ .logos-track{ animation:none } }

/* Cartes & médias */
.badge-blue{ background:#dbeafe; color:#1e40af }
.card{ transition:transform .18s ease, box-shadow .18s ease }
.card:hover{ transform:translateY(-2px) scale(1.015); box-shadow:0 10px 24px rgba(2,6,23,.12) }
.media-frame{ position:relative; overflow:hidden; border-bottom:1px solid #e5e7eb }
.media-frame video::-webkit-media-controls-panel{ background:rgba(0,0,0,.15) }

/* Étoiles */
.stars{ display:inline-flex; flex-direction:row-reverse; gap:.5rem }
.stars input{ display:none }
.stars label{ cursor:pointer }
.stars svg{ width:28px; height:28px; fill:url(#starGrad); opacity:.6; transition:transform .12s ease, opacity .12s ease }
.stars input:checked + label svg, .stars label:hover svg, .stars label:hover ~ label svg{ opacity:1; transform:scale(1.05) }

/* Compteur circulaire */
.counter{ position:relative; width:48px; height:48px }
.counter svg{ transform:rotate(-90deg) }
.counter .num{ position:absolute; inset:0; display:grid; place-items:center; font-size:.7rem; color:#6B7280 }

/* Localiser */
#localiser .map-shell{ max-width:860px; margin-inline:auto }
#localiser .map-aspect{ position:relative; padding-bottom:58%; height:0 }
#localiser .map-aspect > iframe{ position:absolute; inset:0; width:100%; height:100% }
@media (min-width:1024px){ #localiser .col-left{ margin-top:12px } }

/* Sélection carte */
.campusCard.ring{ border-color:#2563eb !important }

/* Badges & bouton retour */
.badge-accent{
  display:inline-block; font-weight:700; font-size:.75rem; line-height:1;
  padding:.45rem .65rem; border-radius:9999px; background:#fee2e2; color:#b91c1c; border:1px solid #fecaca;
}
.badge-info{ background:#dbeafe; color:#1e3a8a }
.btn-return{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:9999px; font-weight:600;
  background:rgba(229,57,53,.08); color:#E53935; border:1px solid rgba(229,57,53,.25);
  transition:filter .15s ease, transform .05s ease;
}
.btn-return:hover{ filter:brightness(.98) }
.btn-return:active{ transform:translateY(1px) }

/* Grilles utilitaires */
#atouts .grid{ gap:1.25rem }
@media (max-width:640px){ #atouts .grid{ grid-template-columns:1fr !important } }
@media (max-width:640px){ footer .grid{ grid-template-columns:1fr 1fr !important; gap:1rem !important } }
@media (max-width:380px){ footer .grid{ grid-template-columns:1fr !important } }

/* ====== Mobile dropdowns (menu responsive avec <details>) ====== */
.mob-dd{
  border:1px solid #e5e7eb; border-radius:10px; background:#fff; overflow:hidden;
  margin:.25rem 0;
}
.mob-dd > summary{
  cursor:pointer; list-style:none; padding:.7rem .8rem; font-weight:600; color:#0f172a;
}
.mob-dd[open] > summary{ background:#f8fafc; border-bottom:1px solid #e5e7eb }
.mob-panel{ padding:.7rem .8rem }

/* ====== FR/EN styles ====== */
.lang-btn{ transition: background-color .15s ease, color .15s ease }
.lang-btn.active,
.lang-btn.is-fr[aria-pressed="true"]{ background:#0B2A6B; color:#fff }
.lang-btn.is-en[aria-pressed="true"]{ background:#fff; color:#0f172a }

/* ====== Body état "mobile-open" : bloque le scroll quand le menu est ouvert ====== */
@media (max-width: 768px){
  body.mobile-open{ overflow:hidden }
}

/* ======================= FLASH INFOS (PLEINE LARGEUR) ================= */
.flashbar{
  position:relative;
  margin:0 !important;
  padding:0;
  border:none !important;
}

/* “Break out” du conteneur : 100vw centré */
.flashbar .flash-fluid{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:transparent;
}

/* Zone visible + masque doux sur les bords */
.flashbar .flash-viewport{
  position:relative;
  overflow:hidden;
  height:var(--flash-height,56px);
}
.flashbar .flash-viewport::before,
.flashbar .flash-viewport::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; pointer-events:none; z-index:1;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,0));
}
.flashbar .flash-viewport::before{ left:0 }
.flashbar .flash-viewport::after { right:0; transform:scaleX(-1) }

/* Piste: part de l'extrémité DROITE (hors écran) → jusqu'au fond GAUCHE */
.flashbar .flash-track{
  display:flex; align-items:center; gap:1.75rem;
  width:max-content; height:100%;
  transform:translateX(100%); /* départ hors écran à droite */
  animation:flash-marquee var(--flash-speed, 22s) linear infinite;
}
.flashbar:hover .flash-track{ animation-play-state:paused }

@keyframes flash-marquee{
  0%   { transform:translateX(100%); }
  100% { transform:translateX(-100%); }
}

/* Pilules */
.flash-item{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.2rem; background:#fff; color:#0A2A6B; font-weight:800;
  border:none; border-radius:9999px; box-shadow:0 8px 20px rgba(2,6,23,.06);
  white-space:nowrap;
}
.flash-item .badge{
  font-size:.72rem; font-weight:800; line-height:1;
  padding:.25rem .45rem; border-radius:9999px;
  background:#dbeafe; color:#1e40af;
}
.flash-item .txt{ font-size:1rem; letter-spacing:.01em }

/* Mobile */
@media (max-width:640px){
  .flash-viewport{ height:50px }
  .flash-item{ padding:.55rem 1rem }
  .flash-item .txt{ font-size:.95rem }
}