@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary-blue: #0052CC;
  --primary-blue-hover: #0747A6;
  --primary-blue-light: #EBF3FF;
  --accent-gold: #D97706;
  --accent-gold-light: #FEF3C7;
  --accent-gold-hover: #B45309;
  --surface-ground: #F8FAFC;
  --surface-card: #FFFFFF;
  --border-card: #E5EDF7;
  --text-main: #0F172A;
  --text-muted: #475569;

  /* Couleurs sémantiques (statuts & feedback) — reprennent les teintes Tailwind
     déjà utilisées en dur dans apprenant.js / admin.js, ici centralisées. */
  --success: #059669;        /* emerald-600 — en ligne, synchronisé, VALIDE, score */
  --success-light: #D1FAE5;  /* emerald-100 */
  --warning: #D97706;        /* amber-600 — hors-ligne 0-Data, EN_ATTENTE, Open Badge */
  --warning-light: #FEF3C7;  /* amber-100 */
  --danger: #E11D48;         /* rose-600 — export critique, SUSPENDU, erreur */
  --danger-light: #FFE4E6;   /* rose-100 */
  --info: #0052CC;           /* alias de --primary-blue — liens, notifications */
  --info-light: #EBF3FF;

  /* Accents par rôle (appliqués aux liserés de nav/header, badges de rôle) */
  --role-apprenant: var(--accent-gold);   /* chaleureux, motivant — XP, progression */
  --role-enseignant: var(--primary-blue); /* professionnel — CoP, ressources */
  --role-admin: #0F172A;                  /* sobre, gouvernance */
  --role-admin-alert: var(--danger);      /* liseré d'alerte ministérielle */
}

/* Liserés d'identification de rôle (à poser sur <header>/<nav> si besoin de
   renforcer visuellement l'espace courant — additif, n'altère rien par défaut) */
.role-strip-apprenant { border-top: 3px solid var(--role-apprenant); }
.role-strip-enseignant { border-top: 3px solid var(--role-enseignant); }
.role-strip-admin { border-top: 3px solid var(--role-admin); }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--text-main);
  background-color: var(--surface-ground);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Editorial Title Typography (Humain, Professionnel, Institutionnel) */
.font-editorial {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.015em;
}

/* Subtle, clean card styling matching user reference */
.resafad-clean-card {
  background: #FFFFFF;
  border: 1px solid #E5EDF7;
  border-radius: 24px;
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.resafad-clean-card:hover {
  transform: translateY(-3px);
  border-color: #BFDBFE;
  box-shadow: 0 16px 32px -8px rgba(0, 82, 204, 0.08);
}

/* ==========================================================================
   EFFET GLACE / GLASSMORPHISM DESIGN SYSTEM
   ========================================================================== */

.glass-panel {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 32px 0 rgba(0, 82, 204, 0.07);
}

.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.05), inset 0 1px 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.88);
  transform: translateY(-3px);
  border-color: rgba(0, 82, 204, 0.3);
  box-shadow: 0 20px 40px -10px rgba(0, 82, 204, 0.12), inset 0 1px 2px 0 rgba(255, 255, 255, 1);
}

.glass-card-dark {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.35), inset 0 1px 1px 0 rgba(255, 255, 255, 0.15);
}

.glass-card-dark:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 20px 48px -8px rgba(0, 82, 204, 0.25), inset 0 1px 2px 0 rgba(255, 255, 255, 0.2);
}

.glass-header {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
}

.glass-header-dark {
  background: rgba(10, 17, 40, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.3);
}

.glass-pill {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}

.glass-pill:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: #0052CC;
  transform: translateY(-1px);
}

.glass-pill-dark {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
}

.glass-pill-dark:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Ambient glow orbs in background */
.ambient-bg-glow {
  position: fixed;
  border-radius: 9999px;
  filter: blur(70px);
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}

/* Icon badge style matching screenshots */
.icon-badge-blue {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background-color: #EBF3FF;
  color: #0052CC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.resafad-clean-card:hover .icon-badge-blue {
  background-color: #0052CC;
  color: #FFFFFF;
  transform: scale(1.05);
}

/* Pill buttons matching screenshots */
.btn-pill-blue {
  background-color: #0052CC;
  color: #FFFFFF;
  border-radius: 9999px;
  font-weight: 600;
  padding: 10px 24px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 82, 204, 0.2);
}
.btn-pill-blue:hover {
  background-color: #0747A6;
  box-shadow: 0 4px 14px rgba(0, 82, 204, 0.3);
  transform: translateY(-1px);
}

.btn-pill-gold {
  background-color: #D97706;
  color: #FFFFFF;
  border-radius: 9999px;
  font-weight: 700;
  padding: 12px 28px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}
.btn-pill-gold:hover {
  background-color: #B45309;
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35);
  transform: translateY(-1px);
}

.btn-pill-outline {
  background-color: #FFFFFF;
  color: #1E293B;
  border: 1px solid #CBD5E1;
  border-radius: 9999px;
  font-weight: 600;
  padding: 12px 26px;
  transition: all 0.2s ease;
}
.btn-pill-outline:hover {
  background-color: #F8FAFC;
  border-color: #94A3B8;
}



/* Clean toast notification */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast-item {
  pointer-events: auto;
  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ==========================================================================
   EFFET GLACE GLOBAL — site public & menu
   ========================================================================== */

/* Fond ambiant coloré fixe : indispensable pour que le flou "glace" soit visible */
.bg-african-pattern {
  background-color: #F1F5FB;
  background-image:
    radial-gradient(40rem 40rem at 8% 10%, rgba(59, 130, 246, 0.18), transparent 60%),
    radial-gradient(36rem 36rem at 92% 30%, rgba(0, 176, 240, 0.16), transparent 60%),
    radial-gradient(34rem 34rem at 30% 85%, rgba(245, 158, 11, 0.12), transparent 60%),
    radial-gradient(30rem 30rem at 85% 90%, rgba(16, 185, 129, 0.12), transparent 60%);
  background-attachment: fixed;
}

/* Sections pleines → voiles translucides */
.bg-african-pattern section.bg-white,
.bg-african-pattern section[class*="bg-slate-50"],
.bg-african-pattern section[class*="bg-[#"] {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* Cartes du site public → cartes glace */
.resafad-clean-card,
.resafad-clean-card.bg-white {
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.06), inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);
}
.resafad-clean-card:hover {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(0, 82, 204, 0.3);
}

/* Menu principal : verre plus transparent et lumineux */
.glass-header {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 24px -4px rgba(0, 82, 204, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

/* Menu mobile déroulant */
.glass-menu {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.glass-menu-item {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.75);
}

/* Pied de page */
.glass-footer {
  background: rgba(235, 240, 247, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   MENU PRINCIPAL — barre de verre, lien actif souligné (sans pastille au survol)
   ========================================================================== */
header nav.hidden.lg\:flex {
  gap: 2rem;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
header nav.hidden.lg\:flex > a {
  border: none;
  background: none;
  box-shadow: none;
}
header nav.hidden.lg\:flex > a.border-b-2 {
  border-bottom: 2px solid #0052CC;
  border-radius: 0;
  padding-bottom: 0.25rem;
}

/* Fond blanc de la bande du haut retiré : seule la barre de verre du menu reste */
header.glass-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

/* Fond statique : il ne défile pas avec la page */
html { background-color: #F1F5FB; }
.bg-african-pattern { background-attachment: fixed; background-repeat: no-repeat; background-size: cover; }

/* Menu statique : reste fixé en haut de l'écran pendant le défilement */
header.glass-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.bg-african-pattern { padding-top: 5rem; }

/* Menu fixe : voile léger pour garder le texte lisible */
header.glass-header {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

/* Cartes de modules (formulaire de contact) : pastille cochée */
.module-card input:checked ~ div .module-check { background: #0052CC; border-color: #0052CC; }
.module-card .module-check i { opacity: 0; }
.module-card input:checked ~ div .module-check i { opacity: 1; }

/* Héro de l'accueil : photo en fond avec dégradé bleu institutionnel */
.hero-photo {
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.bg-african-pattern section.hero-photo {
  background-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent !important;
}

/* Ancre : le formulaire ne passe pas sous le menu fixe */
html { scroll-padding-top: 6rem; }

/* ==========================================================================
   ANIMATION DU HÉRO (accueil) — apparition en cascade, reflet, bouton vivant
   ========================================================================== */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.hero-anim {
  opacity: 0;
  animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-d1 { animation-delay: 0.15s; }
.hero-d2 { animation-delay: 0.45s; }
.hero-d3 { animation-delay: 0.85s; }
.hero-d4 { animation-delay: 1.2s; }

/* Mot clé : dégradé lumineux qui défile */
.hero-accent {
  background: linear-gradient(100deg, #7dd3fc 0%, #ffffff 35%, #38bdf8 60%, #7dd3fc 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: heroShine 5s ease-in-out 1.6s infinite;
}
@keyframes heroShine {
  0%, 100% { background-position: 100% 50%; }
  50%      { background-position: 0% 50%; }
}

/* Bouton Réserver : plus grand, halo qui pulse, flèche qui avance */
.btn-hero-cta {
  padding: 1.1rem 3rem;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  animation: ctaPulse 2.4s ease-in-out 2s infinite;
}
.btn-hero-cta:hover { transform: translateY(-3px) scale(1.04); }
.btn-hero-cta .cta-arrow { transition: transform 0.25s ease; }
.btn-hero-cta:hover .cta-arrow { transform: translateX(6px); }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0, 82, 204, 0.45), 0 0 0 0 rgba(56, 189, 248, 0.55); }
  50%      { box-shadow: 0 10px 30px rgba(0, 82, 204, 0.55), 0 0 0 16px rgba(56, 189, 248, 0); }
}


/* Curseur de la machine à écrire */
.hero-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 3px;
  vertical-align: text-bottom;
  background: #7dd3fc;
  animation: caretBlink 0.9s steps(1) infinite;
}
.hero-caret.done { opacity: 0; animation: none; transition: opacity 0.6s ease; }
@keyframes caretBlink { 50% { opacity: 0; } }


/* ==========================================================================
   APPARITION AU DÉFILEMENT — même mécanique que DIOURGUI (directive appReveal)
   data-reveal="up|down|left|right|zoom" sur un bloc, ou data-reveal-group sur une
   grille (ses enfants montent l'un après l'autre, 0,5 s d'écart). Piloté par main.js.
   ========================================================================== */
:root { --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal { opacity: 0; }
.reveal.reveal-in {
  opacity: 1;
  animation: reveal-up 1.19s var(--ease-out) backwards;
}
.reveal.reveal-in[data-reveal='down']  { animation-name: reveal-down; }
.reveal.reveal-in[data-reveal='left']  { animation-name: reveal-left; }
.reveal.reveal-in[data-reveal='right'] { animation-name: reveal-right; }
.reveal.reveal-in[data-reveal='zoom']  { animation-name: reveal-zoom; }
/* décalage progressif entre les cartes d'une grille (au-delà de 6 : 2,5 s) */
[data-reveal-group] > .reveal.reveal-in:nth-child(2) { animation-delay: 0.5s; }
[data-reveal-group] > .reveal.reveal-in:nth-child(3) { animation-delay: 1s; }
[data-reveal-group] > .reveal.reveal-in:nth-child(4) { animation-delay: 1.5s; }
[data-reveal-group] > .reveal.reveal-in:nth-child(5) { animation-delay: 2s; }
[data-reveal-group] > .reveal.reveal-in:nth-child(n+6) { animation-delay: 2.5s; }
@keyframes reveal-up    { from { opacity: 0; transform: translateY(42px); } }
@keyframes reveal-down  { from { opacity: 0; transform: translateY(-42px); } }
@keyframes reveal-left  { from { opacity: 0; transform: translateX(-56px); } }
@keyframes reveal-right { from { opacity: 0; transform: translateX(56px); } }
@keyframes reveal-zoom  { from { opacity: 0; transform: scale(0.92); } }

/* Survol des cartes animées : soulèvement + icône qui monte */
[data-reveal-group] > .resafad-clean-card, [data-reveal-group] > * > .resafad-clean-card { transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.35s ease, border-color 0.35s ease; }
[data-reveal-group] > .resafad-clean-card:hover, [data-reveal-group] > * > .resafad-clean-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -16px rgba(0, 82, 204, 0.25); }
.resafad-clean-card:hover .icon-badge-blue { transform: translateY(-3px) scale(1.05); }

/* ==========================================================================
   ESPACE ENSEIGNANTS (/espace) : champs de formulaire, onglets, pagination
   ========================================================================== */
.espace-label { display: block; font-size: 0.75rem; font-weight: 700; color: #334155; margin-bottom: 0.25rem; }
.espace-champ { width: 100%; padding: 0.625rem 0.875rem; border-radius: 0.75rem; border: 1px solid #E2E8F0; background: rgba(255, 255, 255, 0.85); font-size: 0.875rem; }
.espace-champ:focus { outline: 2px solid #0052CC; outline-offset: 1px; border-color: transparent; }
.espace-onglet { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 700; color: #475569; background: rgba(255, 255, 255, 0.7); border: 1px solid #E2E8F0; transition: color 0.2s ease, border-color 0.2s ease; }
.espace-onglet:hover { color: #0052CC; border-color: #BFDBFE; }
.espace-onglet.actif { color: #FFFFFF; background: #0052CC; border-color: #0052CC; }
.espace-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin-top: 1.5rem; }
.espace-pagination a { display: block; min-width: 2.25rem; padding: 0.375rem 0.625rem; text-align: center; border-radius: 0.625rem; font-size: 0.8125rem; font-weight: 700; color: #475569; background: #FFFFFF; border: 1px solid #E2E8F0; }
.espace-pagination .active a { color: #FFFFFF; background: #0052CC; border-color: #0052CC; }

.espace-pagination li:only-child { display: none; }

/* Mentions « @Nom » : dans les messages et liste de choix (assets/js/mentions.js) */
.mention { font-weight: 700; color: #0052CC; background: #EBF3FF; border-radius: 0.375rem; padding: 0 0.25rem; }
.mention-liste { position: absolute; z-index: 120; max-height: 18rem; overflow-y: auto; padding: 0.375rem; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 0.875rem; box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.2); }
.mention-option { display: block; padding: 0.5rem 0.625rem; border-radius: 0.625rem; cursor: pointer; }
.mention-option strong { display: block; font-size: 0.8125rem; color: #0F172A; }
.mention-option span { display: block; font-size: 0.6875rem; color: #64748B; }
.mention-option:hover, .mention-option.actif { background: #EBF3FF; }
.mention-vide { padding: 0.5rem 0.625rem; font-size: 0.75rem; color: #64748B; }
/* Bleu pendant la saisie. Ni gras ni marge ici : le texte coloré doit rester aligné sur le curseur du textarea. */
.mention-zone { position: relative; }
.mention-zone textarea { display: block; position: relative; background: transparent; color: transparent; caret-color: #0F172A; }
.mention-zone textarea::placeholder { color: #94A3B8; }
.mention-miroir { position: absolute; inset: 0; overflow: hidden; color: #0F172A; white-space: pre-wrap; overflow-wrap: break-word; pointer-events: none; }
.mention-saisie { color: #0052CC; background: #EBF3FF; border-radius: 0.25rem; }

/* Notifications de l'espace enseignants */
.notif-compteur { position: absolute; top: -0.45rem; right: -0.55rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.2rem; display: grid; place-items: center; border-radius: 9999px; background: #E11D48; color: #FFFFFF; font-size: 0.625rem; font-weight: 800; line-height: 1; }
.notif-non-lue { background: #EBF3FF !important; border-color: #BFDBFE; }

/* ==========================================================================
   MOBILE : en-tête sur une ligne (logo à gauche, bouton de session à côté du menu)
   ========================================================================== */
@media (max-width: 639px) {
  header.glass-header > div:first-child { gap: 0.5rem; }
  header.glass-header a.group { gap: 0.375rem; flex-shrink: 0; margin-right: 0.5rem; }
  header.glass-header a.group > img { height: 1.875rem; }
  header.glass-header a.group > span { height: 1.5rem; }
  header.glass-header .session-menu { position: static; }
  header.glass-header .session-toggle { gap: 0.25rem; padding: 8px 12px; font-size: 0.75rem; line-height: 1.15; text-align: center; }
  header.glass-header .session-panel { top: 100%; left: 1rem; right: 1rem; width: auto; }
  header.glass-header #mobile-menu-btn { flex-shrink: 0; }
}
@media (max-width: 374px) {
  header.glass-header > div:first-child { gap: 0.375rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  header.glass-header a.group { gap: 0.25rem; margin-right: 0.375rem; }
  header.glass-header a.group > img { height: 1.5rem; }
  header.glass-header a.group > span { height: 1.25rem; }
  header.glass-header .session-toggle { padding: 8px 10px; }
}
@media (min-width: 640px) and (max-width: 767px) {
  header.glass-header a.group { gap: 0.375rem; }
  header.glass-header .session-toggle { padding: 10px 14px; font-size: 0.75rem; white-space: nowrap; }
}

/* Héros sur téléphone et tablette : toutes les personnes restent visibles,
   le texte commence sous les visages et la photo se fond dans le bleu nuit */
@media (max-width: 1023px) {
  .bg-african-pattern section.hero-photo,
  section.hero-photo {
    background-color: #0A1128 !important;
    background-image: linear-gradient(180deg, rgba(10,17,40,0.1) 0, rgba(0,82,204,0.25) 30vw, rgba(10,17,40,0.82) 62vw, #0A1128 91vw), url('../images/equipe-resafad.jpg') !important;
    background-size: 100% 100%, 137vw auto !important;
    background-position: 0 0, 54% 0 !important;
    min-height: 0 !important;
    padding-top: 44vw !important;
    padding-bottom: 2.5rem !important;
  }
  .bg-african-pattern section.hero-photo.hero-photo-formation,
  section.hero-photo.hero-photo-formation {
    background-image: linear-gradient(180deg, rgba(10,17,40,0.1) 0, rgba(0,82,204,0.25) 30vw, rgba(10,17,40,0.82) 62vw, #0A1128 91vw), url('../images/formation-hero.jpg') !important;
  }
  section.hero-photo [data-hero-pill] { font-size: 0.625rem; letter-spacing: 0.08em; padding: 0.25rem 0.75rem; }
  section.hero-photo [data-hero-title] { font-size: 1.75rem; }
  section.hero-photo [data-hero-type] { font-size: 0.875rem; }
  section.hero-photo .btn-hero-cta { font-size: 0.9375rem; padding: 0.75rem 1.5rem; white-space: nowrap; }
}

/* Tablette à l'horizontale : le menu complet tient sur une ligne sans toucher les logos */
@media (min-width: 1024px) and (max-width: 1279px) {
  header.glass-header nav.hidden { gap: 0.875rem; font-size: 0.8125rem; }
  header.glass-header a.group { gap: 0.5rem; flex-shrink: 0; }
  header.glass-header a.group > img { height: 2.25rem; }
  header.glass-header .session-toggle { padding: 10px 16px; white-space: nowrap; }
}
@media (min-width: 1280px) {
  header.glass-header nav.hidden { gap: 1.25rem; }
}
@media (min-width: 1024px) {
  header.glass-header nav.hidden > a { white-space: nowrap; }
}