/*
Theme Name: EduBridge Neo
Author: EduBridge Africa
Version: 1.3.0
Text Domain: edubridge-neo
*/

/* =========================
   0) VARIABLES GLOBALES
========================= */
:root{
  /* Palette */
  --ea-blue:#0B1C44;
  --ea-purple:#5C2ED9;
  --ea-gold:#C18F00;

  /* UI */
  --ea-ink:#0f172a;
  --ea-bg:#F6F9FF;
  --ea-card:#ffffff;
  --ea-line:#e5e7eb;

  /* Rayons/ombres */
  --ea-r:18px;
  --ea-sh:0 10px 30px rgba(15,23,42,.08);
  --ea-sh-2:0 24px 48px rgba(15,23,42,.14);

  /* Header */
  --header-h:60px;     /* mobile */
  --header-h-lg:76px;  /* desktop */
  --admin-offset:0px;  /* sera écrasé si admin-bar */

  /* Conteneur global */
  --container-max:1440px;  /* largeur max du contenu */
  --container-pad:22px;    /* padding latéral */

  /* Logo (tu peux ajuster via CSS additionnel) */
  --logo-max-w:280px;
  --logo-max-h-m:56px;   /* mobile */
  --logo-max-h-d:72px;   /* desktop */
}

/* admin-bar -> on décale le header */
.admin-bar{ --admin-offset:32px; }
@media (max-width:782px){ .admin-bar{ --admin-offset:46px; } }

/* =========================
   1) RESETS & BASE
========================= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ea-bg);
  color:var(--ea-ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }

/* Wrapper pour footer collé en bas */
.site{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
@supports (height:100svh){ .site{ min-height:100svh; } }
@supports (height:100dvh){ .site{ min-height:100dvh; } }

.site-content{ flex:1 0 auto; }
.site-footer{ flex-shrink:0; }

/* Conteneur global (unique) */
.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding-left:clamp(10px,1.8vw,var(--container-pad));
  padding-right:clamp(10px,1.8vw,var(--container-pad));
}

/* Pas de débordement horizontal */
html, body, .site, .site-content{ overflow-x:hidden; }

/* Cartes génériques */
.card{ background:var(--ea-card); border-radius:var(--ea-r); box-shadow:var(--ea-sh); overflow:hidden; }

/* =========================
   2) HEADER FIXE & OPAQUE
========================= */
.site-header{
  position:fixed !important;
  top:var(--admin-offset,0px); left:0; right:0;
  z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  background:#fff !important;                   /* opaque ⇒ rien ne passe derrière */
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  box-shadow:0 1px 0 rgba(15,23,42,.08);

  /* robustesse Safari/iOS */
  will-change:transform;
  -webkit-transform:translateZ(0);
          transform:translateZ(0);
  backface-visibility:hidden;
  contain:paint;
}
@media (min-width:1024px){
  .site-header{ height:var(--header-h-lg); }
}

/* Header = pleine largeur + aucun padding à gauche */
.site-header .container{
  max-width:100% !important;
  padding-left:0 !important;                                /* COLLE LE LOGO AU BORD GAUCHE */
  padding-right:clamp(10px, 2vw, 24px) !important;
}

/* Réserve l’espace du header dans le flux */
.site-content{
  padding-top:calc(var(--admin-offset,0px) + var(--header-h));
}
@media (min-width:1024px){
  .site-content{ padding-top:calc(var(--admin-offset,0px) + var(--header-h-lg)); }
}

/* Ligne interne du header */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* =========================
   3) LOGO & MARQUE
========================= */
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; min-width:0;
  margin-left:0 !important; padding-left:0 !important;      /* aucun décalage */
}
.brand__logo{
  width:34px; height:34px; border-radius:12px;
  background:conic-gradient(from 210deg,var(--ea-purple),var(--ea-gold),var(--ea-purple));
  box-shadow:var(--ea-sh);
}
@media (min-width:1024px){ .brand__logo{ width:42px; height:42px; } }

.brand__text{
  font:800 18px Poppins,Inter,sans-serif;
  letter-spacing:.4px;
  background:linear-gradient(90deg,var(--ea-blue),#1d2a5f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap;
}
.brand__dot{ font:800 12px/1 Inter; color:var(--ea-gold); margin-left:4px; }

/* Quand un logo personnalisé existe, on masque le texte */
.wp-custom-logo .brand__text,
.wp-custom-logo .brand__dot{ display:none !important; }

/* Logo image : taille contrôlée, collé à gauche */
.site-header .custom-logo{
  display:block;
  height:auto !important;
  width:auto;
  max-width:var(--logo-max-w);
  max-height:var(--logo-max-h-m);              /* mobile */
  margin-left:0;                               /* pas d’espace fantôme */
}
@media (min-width:1024px){
  .site-header .custom-logo{ max-height:var(--logo-max-h-d); }
}
.site-header .custom-logo-link{ display:inline-flex; align-items:center; }

/* Option : si tu veux coller encore plus au bord, décommente et ajuste :
.site-header .custom-logo{ margin-left:-6px; }
*/

/* =========================
   4) ACTIONS HEADER (recherche, login, burger)
========================= */
.h-actions{ display:flex; align-items:center; gap:8px; }

.btn, .icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; cursor:pointer; user-select:none;
  border-radius:14px; transition:transform .2s, box-shadow .2s, filter .2s;
}
.icon-btn{ width:40px; height:40px; background:#fff; box-shadow:var(--ea-sh); }
.icon-btn:hover{ transform:translateY(-2px); box-shadow:var(--ea-sh-2); }

.btn-primary{
  padding:10px 14px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--ea-purple),var(--ea-gold));
  box-shadow:0 10px 18px rgba(92,46,217,.18);
}
.btn-primary:hover{ filter:saturate(1.1) brightness(1.02); transform:translateY(-1px); }

.burger{ display:inline-flex; }
@media (min-width:1024px){ .burger{ display:none; } }

/* =========================
   5) MENU
========================= */
/* Desktop : horizontal + soulignement animé (nav-underline) */
.primary-nav{ display:none; }
@media (min-width:1024px){
  .primary-nav{ display:flex; align-items:center; position:relative; }
  .primary-nav .menu{
    display:flex; align-items:center; gap:12px;
    list-style:none; margin:0; padding:0;
  }
  .primary-nav .menu > li{ margin:0; position:relative; }
  .primary-nav .menu > li > a{
    position:relative;
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 12px; border-radius:12px;
    color:var(--ea-blue); font-weight:600; text-decoration:none;
    transition:filter .2s, transform .2s;
  }
  .primary-nav .menu > li > a:hover{ filter:saturate(1.08); }
  /* éviter un ::after hérité */
  .primary-nav a::after{ content:none !important; }
  /* barre animée (gérée en JS) */
  .primary-nav .nav-underline{
    position:absolute; bottom:6px; left:0; height:3px; width:0; opacity:0;
    border-radius:3px; pointer-events:none;
    background:linear-gradient(90deg,var(--ea-purple),var(--ea-gold));
    transition:left .25s cubic-bezier(.2,.8,.2,1),
               width .25s cubic-bezier(.2,.8,.2,1),
               opacity .2s ease;
  }
  .primary-nav.ready .nav-underline{ opacity:1; }
  /* sous-menus */
  .primary-nav .menu .sub-menu{
    position:absolute; top:calc(100% + 10px); left:10px;
    min-width:220px; background:#fff; border:1px solid var(--ea-line);
    border-radius:12px; box-shadow:var(--ea-sh-2); list-style:none;
    margin:0; padding:8px; opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .18s, transform .18s, visibility .18s; z-index:10;
  }
  .primary-nav .menu > li:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
  .primary-nav .menu .sub-menu a{ display:block; padding:10px 12px; border-radius:10px; color:var(--ea-blue); text-decoration:none; }
  .primary-nav .menu .sub-menu a:hover{ background:#f5f7fb; }
}

/* Mobile : menu “sheet” */
.scrim{
  position:fixed; inset:0; background:rgba(2,6,23,.32);
  opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; z-index:1090;
}
.scrim.show{ opacity:1; visibility:visible; }

.sheet{
  position:fixed; left:50%; top:0; transform:translate(-50%,-102%);
  z-index:1100; width:min(94vw,820px); max-height:min(86vh,720px);
  overflow:auto; border-radius:0 0 18px 18px; background:#fff; box-shadow:0 30px 70px rgba(15,23,42,.25);
  padding-top:env(safe-area-inset-top); transition:transform .25s ease;
}
.sheet.open{ transform:translate(-50%,0); }
.sheet-head{ position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#fff; border-bottom:1px solid var(--ea-line); }
.sheet-body{ padding:12px 16px 18px; display:grid; gap:10px; }
.sheet-nav .menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sheet-nav .menu > li > a{
  display:flex; padding:12px 14px; border-radius:12px; background:#f5f7fb;
  color:var(--ea-blue); font-weight:700; text-decoration:none; transition:transform .15s, background .2s;
}
.sheet-nav .menu > li > a:hover{ background:#eef2ff; }
.sheet-nav .menu > li > a:active{ transform:scale(.98); }
.sheet-nav .menu .sub-menu{ display:none; } /* simple (pas d’accordéon) */

/* =========================
   6) RECHERCHE OVERLAY
========================= */
.search-overlay{
  position:fixed; inset:0; z-index:1200; display:none;
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
}
.search-overlay.open{ display:block; }
.search-box{
  max-width:860px; margin:9vh auto 0; padding:18px;
  background:#fff; border-radius:18px; box-shadow:var(--ea-sh-2);
}
.search-box input{
  width:100%; font-size:18px; padding:14px 16px;
  border-radius:12px; border:1px solid var(--ea-line); outline:none;
}
.search-meta{ margin-top:10px; color:#64748b; font-size:.9rem; }

/* =========================
   7) PIED DE PAGE
========================= */
.site-footer{
  margin-top:28px;
  background:#0b1220; color:#cbd5e1;
  padding:28px 0 calc(28px + env(safe-area-inset-bottom));
}
.footer-grid{
  display:grid; gap:18px; grid-template-columns:1.2fr repeat(3,1fr);
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-item h4{ margin:8px 0 10px; color:#fff; }
.footer-item a{ color:#cbd5e1; text-decoration:none; }
.footer-item a:hover{ color:#fff; }
.footer-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.footer-legal{ text-align:center; margin-top:18px; font-size:.92rem; opacity:.9; }

/* =========================
   8) PRELOADER
========================= */
.loader{
  position:fixed; inset:0; z-index:1300; display:grid; place-items:center;
  background:rgba(246,249,255,.95); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.loader.show{ opacity:1; pointer-events:auto; }
.loader__inner{ position:relative; width:120px; height:120px; }
.loader__logo{
  position:absolute; inset:22px; border-radius:16px;
  background:conic-gradient(from 210deg,var(--ea-purple),var(--ea-gold),var(--ea-purple));
  filter:drop-shadow(0 8px 16px rgba(92,46,217,.25));
}
.loader__ring{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(92,46,217,.9), rgba(193,143,0,.9), rgba(92,46,217,.9));
  -webkit-mask:radial-gradient(closest-side, transparent 58%, #000 59%);
          mask:radial-gradient(closest-side, transparent 58%, #000 59%);
  animation:spin 1.1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(1turn); } }

/* =========================
   9) DÉCO AFRIQUE (desktop)
========================= */
.africa-bg{
  position:fixed;
  right:clamp(-220px,-12vw,-60px);
  bottom:clamp(-220px,-12vw,-80px);
  width:min(52vw,720px); height:auto; opacity:.10;
  pointer-events:none; z-index:0;
  filter:drop-shadow(0 20px 40px rgba(15,23,42,.12));
}
.africa-bg svg path{ fill:url(#grad-af); }
@media (max-width:1024px){ .africa-bg{ display:none; } }

/* =========================
   10) CONTENU WP RESPONSIVE
========================= */
.entry-content{ max-width:100%; word-break:break-word; overflow-wrap:anywhere; }
.alignfull, .alignwide{ max-width:100% !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; }

h1{ font-size:clamp(1.6rem, 4.8vw, 2.2rem); line-height:1.2; }
h2{ font-size:clamp(1.25rem, 3.8vw, 1.75rem); line-height:1.25; }
h3{ font-size:clamp(1.05rem, 3.2vw, 1.35rem); line-height:1.3; }
p, li{ font-size:clamp(.95rem, 2.9vw, 1.05rem); line-height:1.65; }

/* =========================
   11) PETITS PLUS
========================= */
.btn.ripple:active{ transform:scale(.99); }
.icon-btn.ripple:active{ transform:scale(.97); }
.kbd :focus-visible{ outline:2px solid #94a3b8; outline-offset:2px; }
.hide{ display:none !important; }

/* === PIN LOGO ULTRA-GAUCHE — OVERRIDES FINAUX === */

/* 1) zéro padding/marge à GAUCHE sur chaque wrapper du header */
.site-header,
.site-header .container,
.site-header .header-inner,
.site-header .brand,
.site-header .custom-logo-link {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 2) la zone container du header doit être pleine largeur */
.site-header .container {
  max-width: 100% !important;
}

/* 3) l'image du logo ne doit jamais réintroduire d'espace */
.site-header img.custom-logo {
  display: block !important;      /* supprime l'espace inline */
  height: auto !important;
  width: auto !important;
  margin-left: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  max-height: var(--logo-max-h-m, 56px);
}
@media (min-width: 1024px){
  .site-header img.custom-logo { max-height: var(--logo-max-h-d, 72px); }
}

/* 4) si tu veux le COLLER encore plus fort au coin, décommente et ajuste :
.site-header img.custom-logo { margin-left: -8px !important; }
*/

/* 5) désactive toute “gouttière” fantôme éventuelle posée par un thème/plugin */
:root { --container-pad: 0px; }        /* n’affecte pas le contenu, on cible juste le header */
/* ===== FIX LOGO MOBILE + DESKTOP ===== */

/* 0) Ne pas rogner ce qui déborde (évite la disparition du logo sur mobile) */
.site-header{
  contain: none !important;   /* annule le contain: paint précédent */
  overflow: visible !important;
}

/* 1) Variables de décalage : adapte ici */
:root{
  /* combien reculer le bloc logo à GAUCHE */
  --brand-left-shift-m: -8px;    /* mobile : petit nudge, ex: -8px */
  --brand-left-shift-d: -320px;  /* desktop : ta valeur qui marche */
  /* tailles du logo (optionnel) */
  --logo-max-h-m: 56px;
  --logo-max-h-d: 72px;
  --logo-max-w:  320px;
}

/* 2) On annule toute tentative de padding/marge à gauche dans le header */
.site-header,
.site-header .container,
.site-header .header-inner,
.site-header .custom-logo-link{
  padding-left: 0 !important;
  margin-left: 0 !important;
  max-width: 100% !important;
}

/* 3) On colle vraiment le bloc “brand” au bord gauche
      (utilise un margin négatif au lieu d’un transform) */
.site-header .brand{
  margin-left: var(--brand-left-shift-m) !important; /* mobile */
  padding-left: 0 !important;
}
@media (min-width:1024px){
  .site-header .brand{
    margin-left: var(--brand-left-shift-d) !important; /* desktop */
  }
}

/* 4) Logo : taille contrôlée, pas de transform (évite les clips mobiles) */
.site-header img.custom-logo{
  display:block !important;         /* supprime l’espace inline */
  height:auto !important;
  width:auto !important;
  max-width: var(--logo-max-w) !important;
  max-height: var(--logo-max-h-m) !important;
  margin:0 !important;
  border:0 !important;
  transform:none !important;        /* on neutralise d’anciennes règles */
}
@media (min-width:1024px){
  .site-header img.custom-logo{
    max-height: var(--logo-max-h-d) !important;
  }
}

/* 5) Sécurité iPhone notch : pas de gouttière obligatoire à gauche */
@supports(padding-left: max(0px)){
  .site-header{ padding-left: 0 !important; }
}
/* ===== WORDMARK + LOGO ENSEMBLE (collé à gauche) ===== */

/* variables de décalage */
:root{
  --brand-left-shift-m: -6px;    /* mobile */
  --brand-left-shift-d: -320px;  /* desktop (ajuste librement) */

  --logo-max-h-m: 56px;
  --logo-max-h-d: 72px;
  --logo-max-w:  320px;
}

/* ne rogne rien dans le header (sinon logo disparaît en mobile) */
.site-header{ contain:none !important; overflow:visible !important; }

/* annule tout padding/marge à gauche, on contrôle nous-mêmes */
.site-header,
.site-header .container,
.site-header .header-inner,
.site-header .custom-logo-link{
  padding-left:0 !important;
  margin-left:0 !important;
  max-width:100% !important;
}

/* le bloc logo+wordmark se déplace comme une seule unité */
.site-header .brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-left:var(--brand-left-shift-m) !important;
}
@media (min-width:1024px){
  .site-header .brand{ margin-left:var(--brand-left-shift-d) !important; }
}

/* logo dimensionné proprement */
.site-header img.custom-logo{
  display:block !important;
  height:auto !important;
  width:auto !important;
  max-width:var(--logo-max-w) !important;
  max-height:var(--logo-max-h-m) !important;
  margin:0 !important;
  transform:none !important;
}
@media (min-width:1024px){
  .site-header img.custom-logo{ max-height:var(--logo-max-h-d) !important; }
}

/* wordmark (toujours visible même si logo WP défini) */
.wp-custom-logo .brand__wordmark{ display:inline-flex !important; }
.brand__wordmark{
  display:inline-flex; gap:6px; align-items:baseline; line-height:1;
}
.brand__wordmark .wm-primary{
  font: 800 clamp(16px, 2.1vw, 20px) Poppins, Inter, system-ui;
  background: linear-gradient(90deg, #0B1C44, #1f2d66);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 6px rgba(11,28,68,.12);
  letter-spacing:.4px;
}
.brand__wordmark .wm-secondary{
  font: 800 clamp(11px, 1.4vw, 13px) Inter, system-ui;
  color: var(--ea-gold);
  text-transform:uppercase;
  letter-spacing:.14em;
  transform: translateY(1px);
}

/* micro-anim : tilt/respiration du logo au hover */
@media (hover:hover){
  .brand:hover img.custom-logo{ transform:rotate(-3deg) scale(1.03); transition:transform .25s ease; }
}

/* ===== Préchargeur – texte circulaire ===== */
.loader__orbit{
  position:absolute; inset:-8px;
  display:grid; place-items:center;
  animation: spin 8s linear infinite;
  opacity:.85;
}
.loader__inner{ position:relative; }
@media (prefers-reduced-motion: reduce){
  .loader__orbit{ animation:none; }
}

/* ===== Dock social (monochrome) ===== */
.social-dock{
  position:fixed; right:12px; bottom:16px;
  display:flex; flex-direction:column; gap:10px;
  z-index:1200;
}
.sd-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:#fff; color:#0B1C44; box-shadow:var(--ea-sh);
  text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, color .18s;
  border:1px solid #e7e9f3;
}
.sd-btn:hover{ transform:translateY(-2px); box-shadow:var(--ea-sh-2); color:#5C2ED9; }
@media (max-width:560px){
  .social-dock{ right:10px; bottom:10px; }
  .sd-btn{ width:38px; height:38px; border-radius:10px; }
}

/* ===== Le header reste 100% opaque (aucun texte derrière au scroll) ===== */
.site-header{
  position:fixed; top:var(--admin-offset,0px); left:0; right:0; z-index:1000;
  background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:0 1px 0 rgba(15,23,42,.08);
}
/* réserver la hauteur du header dans le flux */
.site-content{ padding-top:calc(var(--admin-offset,0px) + var(--header-h)); }
@media (min-width:1024px){ .site-content{ padding-top:calc(var(--admin-offset,0px) + var(--header-h-lg)); } }

/* (sécurité) pas de débordement horizontal */
html, body, .site, .site-content{ overflow-x:hidden; }

/* 6) (Option) Debug visuel — décommente si besoin
.site-header{ outline:1px dashed red; }
.site-header .container{ outline:1px dashed blue; }
.site-header .header-inner{ outline:1px dashed green; }
.site-header .brand{ outline:1px dashed orange; }
*/
/* ==== OVERRIDES FINAUX – 1) Préchargeur texte circulaire visible ==== */
.loader__inner{ width:140px; height:140px; overflow:visible; }
.loader__orbit{
  position:absolute; inset:-6px; display:grid; place-items:center;
  animation: spin 8s linear infinite; opacity:.9; pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .loader__orbit{ animation:none; } }

/* ==== 2) Logo + Wordmark = UNE UNITE qui bouge ensemble ==== */
:root{
  --brand-gap: 6px;           /* espace logo/wordmark */
  --brand-left-shift-m: -6px; /* décalage mobile (négatif colle à gauche) */
  --brand-left-shift-d: -320px; /* décalage desktop (ta valeur) */
}

/* on neutralise toute marge/padding hérités */
.site-header, .site-header .container, .site-header .header-inner,
.site-header .brand, .site-header .custom-logo-link{
  padding-left:0 !important; margin-left:0 !important; max-width:100% !important;
}

/* le bloc MARQUE (logo + wordmark) se décale comme 1 seul bloc */
.site-header .brand{
  display:inline-flex; align-items:center; gap:var(--brand-gap);
  margin-left:var(--brand-left-shift-m) !important;
}
@media (min-width:1024px){
  .site-header .brand{ margin-left:var(--brand-left-shift-d) !important; }
}

/* taille logo */
.site-header img.custom-logo{
  display:block !important; height:auto !important; width:auto !important;
  max-width:var(--logo-max-w) !important;
  max-height:var(--logo-max-h-m) !important; margin:0 !important; transform:none !important;
}
@media (min-width:1024px){
  .site-header img.custom-logo{ max-height:var(--logo-max-h-d) !important; }
}

/* wordmark toujours visible même avec logo WP */
.wp-custom-logo .brand__wordmark{ display:inline-flex !important; }
.brand__wordmark{ display:inline-flex; gap:6px; align-items:baseline; line-height:1; }
.brand__wordmark .wm-primary{
  font:800 clamp(16px, 2.1vw, 20px) Poppins, Inter, system-ui;
  background:linear-gradient(90deg,#0B1C44,#1f2d66);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.4px; text-shadow:0 1px 0 rgba(0,0,0,.06), 0 2px 6px rgba(11,28,68,.12);
}
.brand__wordmark .wm-secondary{
  font:800 clamp(11px, 1.4vw, 13px) Inter, system-ui;
  color:var(--ea-gold); text-transform:uppercase; letter-spacing:.14em; transform:translateY(1px);
}

/* petit effet au hover desktop */
@media (hover:hover){
  .brand:hover img.custom-logo{ transform:rotate(-3deg) scale(1.03); transition:transform .25s ease; }
}

/* ==== 3) Réseaux sociaux : en-tête et pied de page ==== */
/* Header (à gauche du bouton Connexion) */
.h-social{ display:flex; gap:8px; align-items:center; }
.hs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px;
  background:#fff; color:#0B1C44; border:1px solid #e7e9f3;
  box-shadow:var(--ea-sh); text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, color .18s;
}
.hs-btn:hover{ transform:translateY(-2px); color:#5C2ED9; box-shadow:var(--ea-sh-2); }
@media (max-width:640px){ .h-social{ display:none; } } /* on masque en mobile (présentes dans le sheet) */

/* Footer (simple, à styliser comme tu veux) */
.footer-social{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:10px; }
.fs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; background:#162033; color:#fff;
  font-weight:700; text-decoration:none; box-shadow:0 8px 16px rgba(0,0,0,.12);
  transition:transform .18s ease, filter .18s ease;
}
.fs-btn:hover{ transform:translateY(-2px); filter:brightness(1.15); }

/* sécurité : header opaque + espace réservé (au cas où) */
.site-header{ background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.site-content{ padding-top:calc(var(--admin-offset,0px) + var(--header-h)); }
@media (min-width:1024px){ .site-content{ padding-top:calc(var(--admin-offset,0px) + var(--header-h-lg)); } }
/* ==== Préchargeur : assure visibilité du texte circulaire ==== */
.loader__inner{ width:140px; height:140px; overflow:visible; }
.loader__orbit{
  position:absolute; inset:-6px;
  display:grid; place-items:center;
  animation:spin 8s linear infinite;
  opacity:.95; pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .loader__orbit{ animation:none; } }

/* ==== Logo + wordmark collés ET qui bougent ensemble ==== */
:root{
  --brand-gap: 0px;              /* 0 = collé */
  --brand-left-shift-m: 5px;    /* mobile : colle au bord gauche */
  --brand-left-shift-d: 10px;  /* desktop : ta valeur */
}

/* neutralise les paddings/marges qui éloignent le bloc marque */
.site-header, .site-header .container, .site-header .header-inner,
.site-header .brand, .site-header .custom-logo-link{
  padding-left:0 !important;
  margin-left:0 !important;
  max-width:100% !important;
}

/* le bloc MARQUE (logo + mot) = une unité qui se décale */
.site-header .brand{
  display:inline-flex;
  align-items:center;
  gap:var(--brand-gap);
  margin-left:var(--brand-left-shift-m) !important;
}
@media (min-width:1024px){
  .site-header .brand{ margin-left:var(--brand-left-shift-d) !important; }
}

/* image logo propre (aucun espace inline) */
.site-header img.custom-logo{
  display:block !important;
  height:auto !important;
  width:auto !important;
  max-width:var(--logo-max-w) !important;
  max-height:var(--logo-max-h-m) !important;
  margin:0 !important;
  transform:none !important;
  vertical-align:middle;
}
@media (min-width:1024px){
  .site-header img.custom-logo{ max-height:var(--logo-max-h-d) !important; }
}

/* wordmark toujours visible même si un logo WP est défini */
.wp-custom-logo .brand__wordmark{ display:inline-flex !important; }
.brand__wordmark{ display:inline-flex; gap:6px; align-items:baseline; line-height:1; }
.brand__wordmark .wm-primary{
  font:800 clamp(16px, 2.1vw, 20px) Poppins, Inter, system-ui;
  background:linear-gradient(90deg,#0B1C44,#1f2d66);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.4px; text-shadow:0 1px 0 rgba(0,0,0,.06), 0 2px 6px rgba(11,28,68,.12);
}
.brand__wordmark .wm-secondary{
  font:800 clamp(11px, 1.4vw, 13px) Inter, system-ui;
  color:var(--ea-gold);
  text-transform:uppercase; letter-spacing:.14em;
  transform:translateY(1px);
}

/* petit effet hover desktop */
@media (hover:hover){
  .brand:hover img.custom-logo{ transform:rotate(-3deg) scale(1.03); transition:transform .25s ease; }
}

/* ==== Réseaux sociaux header/pied (si pas déjà stylés) ==== */
.h-social{ display:flex; gap:8px; align-items:center; }
.hs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px;
  background:#fff; color:#0B1C44; border:1px solid #e7e9f3;
  box-shadow:var(--ea-sh); text-decoration:none;
  transition:transform .18s, box-shadow .18s, color .18s;
}
.hs-btn:hover{ transform:translateY(-2px); color:#5C2ED9; box-shadow:var(--ea-sh-2); }
@media (max-width:640px){ .h-social{ display:none; } }

.footer-social{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:10px; }
.fs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; background:#162033; color:#fff;
  font-weight:700; text-decoration:none; box-shadow:0 8px 16px rgba(0,0,0,.12);
  transition:transform .18s, filter .18s;
}
.fs-btn:hover{ transform:translateY(-2px); filter:brightness(1.15); }

/* ==== OFFSET DYNAMIQUE DU HEADER (empêche le chevauchement mobile) ==== */
/* Le JS va définir --header-real à la hauteur réelle du header */
.site-content{
  padding-top: var(--header-real, calc(var(--admin-offset,0px) + var(--header-h)));
}
@media (min-width:1024px){
  .site-content{
    padding-top: var(--header-real, calc(var(--admin-offset,0px) + var(--header-h-lg)));
  }
}

/* ==== BOUTON FLOTTANT DE SCROLL (fab) ==== */
.fab{
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 1400;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  border: 1px solid #e9edf5;
  background: linear-gradient(135deg, var(--ea-purple), var(--ea-gold));
  box-shadow: var(--ea-sh-2);
  color: #fff;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease;
  opacity: .96;
}
.fab:hover{ transform: translateY(-2px); filter: saturate(1.08) brightness(1.02); }
.fab:active{ transform: scale(.98); }

/* icône (↑) qui pivote automatiquement en mode "down" */
.fab__icon{ transition: transform .2s ease; fill: currentColor; }
.fab[data-mode="down"] .fab__icon{ transform: rotate(180deg); }

/* Taille un peu plus compacte sur très petits écrans */
@media (max-width:480px){
  .fab{ width: 42px; height: 42px; border-radius: 12px; }
}
/* ===== PRELOADER — logo fixe + orbite qui tourne ===== */
.loader{
  position:fixed; inset:0; z-index:1300;
  display:grid; place-items:center;
  background:rgba(246,249,255,.95);
  backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.loader.show{ opacity:1; pointer-events:auto; }

.eb-preloader{
  position:relative;
  width:140px; height:160px;           /* 140 pour le visuel + 20 pour la légende */
  display:grid; place-items:center;
  gap:8px;
}
.eb-preloader__mark{
  width:90px; height:auto;             /* ton logo centre */
  filter:drop-shadow(0 8px 16px rgba(92,46,217,.18));
}
.eb-preloader__orbit{
  position:absolute; inset:0;          /* occupe tout le cadre */
  pointer-events:none;
}
.eb-preloader__spin{
  transform-origin:110px 110px;
  animation:ebspin 3.8s linear infinite;
}
@keyframes ebspin { to { transform: rotate(360deg); } }

.eb-preloader__caption{
  font: 800 11px/1.1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.18em;
  color:#334155; text-align:center;
}

/* mobile: un chouïa plus petit */
@media (max-width:480px){
  .eb-preloader{ width:120px; height:150px; }
  .eb-preloader__mark{ width:80px; }
}

/* (Option) réduit les animations si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce){
  .eb-preloader__spin{ animation:none; }
}
/* ===== Logo + orbite (header) ===== */
.brand{
  display:flex; align-items:center; gap:10px; min-width:0;
  /* tu as déjà tes variables de décalage : elles s’appliquent ici */
  margin-left: var(--brand-left-shift-m, 0);
}
@media (min-width:1024px){
  .brand{ margin-left: var(--brand-left-shift-d, 0); }
}

/* le bloc qui contient le logo + l’orbite */
.brand-mark{
  position:relative;
  display:grid; place-items:center;
}

/* taille de l’orbite : s’adapte à la hauteur du logo */
.site-header img.custom-logo{
  display:block; height:auto; width:auto;
  max-height: var(--logo-max-h-m, 56px);
}
@media (min-width:1024px){
  .site-header img.custom-logo{ max-height: var(--logo-max-h-d, 72px); }
}

/* orbite centrée autour du logo */
.brand-orbit{
  position:absolute; inset:0; pointer-events:none;
  /* on “gonfle” un peu le cadre pour entourer le logo */
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  transform: translate(-18px, -18px); /* recentre l’agrandissement */
  opacity:.95;
}

/* rotation continue */
.brand-orbit__spin{
  transform-origin:110px 110px;
  animation: brandspin 6s linear infinite;
}
@keyframes brandspin { to { transform: rotate(360deg); } }

/* wordmark */
.brand-wordmark{
  display:inline-flex; align-items:baseline; gap:6px; text-decoration:none;
}
.brand-wordmark .wm-primary{
  font: 800 clamp(16px,2.1vw,20px) Poppins, Inter, system-ui;
  background:linear-gradient(90deg,#0B1C44,#1f2d66);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.4px;
}
.brand-wordmark .wm-secondary{
  font:800 clamp(11px,1.4vw,13px) Inter, system-ui;
  color:#C18F00; text-transform:uppercase; letter-spacing:.14em;
  transform: translateY(1px);
}

/* pause auto si l’utilisateur préfère moins d’animations */
@media (prefers-reduced-motion: reduce){
  .brand-orbit__spin{ animation:none; }
}

/* option : ne tourner qu’au survol desktop
@media (hover:hover){
  .brand-orbit__spin{ animation:none; }
  .brand-mark:hover .brand-orbit__spin{ animation: brandspin 6s linear infinite; }
}
*/
/* ========= FIX GLOBAL STYLES (buttons + menu underline) ========= */

/* 0) Espace logo <-> wordmark (ajuste la valeur si besoin) */
:root{ --brand-gap: 12px; } /* ex: 12–16px pour respirer */

/* 1) Rétablir la base des boutons */
.btn,
a.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:800; border-radius:14px;
  text-decoration:none; cursor:pointer; user-select:none;
  transition: transform .2s, box-shadow .2s, filter .2s;
}

/* 1b) NE PAS vider le fond des .btn-primary (on cible seulement les non-primaires) */
.btn:not(.btn-primary),
a.btn:not(.btn-primary){
  background: transparent !important;
}

/* 2) Bouton primaire = dégradé violet → or (header + footer) */
.btn-primary,
a.btn-primary,
.site-header .btn.btn-primary,
.site-footer .btn.btn-primary{
  background: linear-gradient(135deg, var(--ea-purple), var(--ea-gold)) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 10px 18px rgba(92,46,217,.18) !important;
}
.btn-primary:hover,
a.btn-primary:hover{
  filter:saturate(1.08) brightness(1.02);
  transform:translateY(-1px);
}

/* 3) Icon buttons (loupe, burger, etc.) */
.icon-btn{
  width:40px; height:40px;
  background:#fff !important;
  border:1px solid #e7e9f3;
  border-radius:14px;
  box-shadow:var(--ea-sh);
}
.icon-btn:hover{ transform:translateY(-2px); box-shadow:var(--ea-sh-2); }

/* 4) Barre animée du menu : visibilité au-dessus du fond */
.primary-nav{ position:relative; z-index:2; }
.primary-nav .nav-underline{
  position:absolute; bottom:6px; left:0; height:3px; width:0; opacity:0;
  border-radius:3px; pointer-events:none;
  background:linear-gradient(90deg,var(--ea-purple),var(--ea-gold));
  transition:left .25s cubic-bezier(.2,.8,.2,1),
             width .25s cubic-bezier(.2,.8,.2,1),
             opacity .2s ease;
  z-index:1; /* s'assure qu'elle n'est pas masquée */
}
/* liens au-dessus, mais transparents, pour laisser voir l'underline */
.primary-nav .menu > li > a{ position:relative; z-index:2; }

/* 5) L’orbite du logo ne doit bloquer ni clic ni hover */
.brand-orbit{ pointer-events:none !important; }
.brand-mark{ position:relative; z-index:1; }
.h-actions{ position:relative; z-index:2; } /* boutons toujours cliquables */