/* ================================================
   Oxygen EDU — style-edu.css (burger mobile only)
   ================================================ */

/* Utilitaires + anti scroll horizontal */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:root{ --touch:44px; --shadow:0 10px 30px rgba(0,0,0,.35); }
html,body{ overflow-x:hidden; } /* bloque tout débordement horizontal */

/* ===== Header / Navbar (desktop) ===== */
.edu .site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(130%) blur(10px);
  background:
    radial-gradient(800px 300px at 50% -80px, rgba(139,92,246,.18), transparent 70%),
    linear-gradient(90deg, rgba(34,211,238,.10), rgba(139,92,246,.12), rgba(236,72,153,.10));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.edu .site-header .wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.edu .site-header .nav{ height:76px; display:flex; align-items:center; gap:.6rem; }

/* Marque (logo + deux lignes) */
.edu .site-header .brand{ display:flex; align-items:center; gap:.75rem; flex:0 0 auto; }
.edu .site-header .brand-link{ display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; color:#e7e7ee; }
.edu .site-header .logo{ width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(139,92,246,.6)); }
.edu .site-header .brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.edu .site-header .brand-line1{
  font-weight:800;
  background:linear-gradient(90deg,#22d3ee,#8b5cf6,#ec4899);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 18px rgba(139,92,246,.45);
}
.edu .site-header .brand-line2{
  font-size:.88rem; color:#c9d7ff; opacity:.9; letter-spacing:.2px;
}

/* Menu desktop */
.edu .site-header .menu{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  gap:.6rem; overflow-x:auto; scrollbar-width:none;
}
.edu .site-header .menu::-webkit-scrollbar{ display:none; }
.edu .site-header .menu a{
  padding:.55rem .9rem; border-radius:999px; color:#e7e7ee; font-weight:700; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.edu .site-header .menu a:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.20); }

/* Bouton burger : caché par défaut (desktop) */
#navToggle{ display:none; }

/* ===== Layout généraux ===== */
.edu .wrap{ max-width:1200px; margin:0 auto; padding:24px 16px 64px; }
img,svg,video,canvas{ max-width:100%; height:auto; }

/* ====== Breakpoint mobile/tablette ====== */
@media (max-width:960px){

  /* Bouton burger visible uniquement en mobile */
  #navToggle{
    display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
    min-height:var(--touch); padding:.5rem .75rem;
    border-radius:999px; border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    color:#e7e7ee; font-weight:700;
  }

  /* Le nav sert d’ancre pour l’overlay */
  .edu .site-header .nav{ position:relative; }

  /* Menu mobile : replié par défaut */
  #mainmenu{
    display:none !important;           /* <-- cache le menu par défaut */
    position:fixed;                    /* overlay qui suit le viewport */
    top:76px; left:0; right:0;
    max-width:100vw;                   /* <-- empêche tout débordement */
    overflow-x:hidden;                 /* <-- pas de scroll latéral */
    flex-direction:column; gap:.6rem;
    padding:.75rem 1rem 1rem;
    background:rgba(11,31,57,.96);
    backdrop-filter:blur(8px) saturate(120%);
    border-bottom:1px solid rgba(255,255,255,.12);
    z-index:1000;
  }
  #mainmenu.is-open{ display:flex !important; }

  /* Liens du menu en colonne avec cibles tactiles */
  #mainmenu a{ min-height:var(--touch); display:flex; align-items:center; }
}


/* ===== Newsletter / Modale / Footer (inchangés — garde ton style existant) ===== */
/* ... si tu as déjà ces sections plus bas dans ton CSS, garde-les ;
   l’important ici est le header + burger + overflow-x:hidden. */
/* ====== Contact : harmonisation bouton + checkbox ====== */

/* Bouton "Envoyer" = même style que les pastilles du header */
.edu form .form-actions button[type="submit"],
.edu form .form-actions input[type="submit"]{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.35rem;
  height:auto; width:auto;              /* évite le grand rectangle vertical */
  padding:.60rem 1.0rem;
  border-radius:999px;
  font-weight:700; letter-spacing:.2px;
  color:#e7e7ee;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow);
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
.edu form .form-actions button[type="submit"]:hover,
.edu form .form-actions input[type="submit"]:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
}
.edu form .form-actions button[type="submit"]:focus-visible,
.edu form .form-actions input[type="submit"]:focus-visible{
  outline:2px solid rgba(139,92,246,.6);
  outline-offset:2px;
}

/* Variante "plus présente" (si jamais tu ajoutes .is-primary) */
.edu form .form-actions .is-primary{
  background:linear-gradient(180deg, rgba(34,211,238,.35), rgba(139,92,246,.35));
  border-color: rgba(255,255,255,.18);
}

/* Consentement : case plus grande et visible */
.edu form label.checkbox{ display:flex; align-items:flex-start; gap:.55rem; }
.edu form label.checkbox input[type="checkbox"]{
  width:20px; height:20px; min-width:20px; min-height:20px;
  margin-top:.05rem; cursor:pointer;
  accent-color:#8b5cf6;               /* violet, cohérent avec la charte */
  border-radius:4px;
  border:1px solid rgba(255,255,255,.25);
}
/* Fallback si accent-color n’est pas supporté */
@supports not (accent-color: auto){
  .edu form label.checkbox input[type="checkbox"]{
    transform: scale(1.25);
  }
}
/* ===== Contact — bouton + checkbox + layout ===== */

/* Mascotte : à droite de la carte, hors du flux, et ne bloque jamais les clics */
.mascot-ptiteprof-out{
  position: absolute;
  right: -250px;        /* la pousse "à l'extérieur" de la boîte */
  bottom: 14px;
  width: 320px;        /* ajuste la taille à ton goût */
  height: auto;
  pointer-events: none;/* clé : ne capte pas les clics */
  z-index: 1;
}

/* Bouton bien au-dessus de tout chevauchement éventuel */
.actions-contact{ display:flex; justify-content:flex-end; align-items:center; }
.actions-contact .menu-btn{ position: relative; z-index: 2; }

/* Mobile/tablette : on remet la mascotte sous la carte pour éviter tout chevauchement/scrol */
@media (max-width: 980px){
  .mascot-ptiteprof-out{
    position: static;
    display: block;
    margin: 12px auto 0;
    width: 170px;
    transform: none;
  }
}


/* Actions du formulaire (le bouton) */
.edu .newsletter .actions{
  display: flex;
  align-items: center;
  gap: .9rem;
}

/* Bouton Envoyer = même style que les pastilles du header */
.edu .newsletter .actions button[type="submit"],
.edu .newsletter .actions input[type="submit"]{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.35rem;
  height:auto; width:auto;                /* évite le grand rectangle vertical */
  padding:.60rem 1.0rem;
  border-radius:999px;
  font-weight:700; letter-spacing:.2px;
  color:#e7e7ee;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow);
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
.edu .newsletter .actions button[type="submit"]:hover,
.edu .newsletter .actions input[type="submit"]:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
}
.edu .newsletter .actions button[type="submit"]:focus-visible,
.edu .newsletter .actions input[type="submit"]:focus-visible{
  outline:2px solid rgba(139,92,246,.6);
  outline-offset:2px;
}

/* Checkbox de consentement : plus grande et visible */
.edu .newsletter .consent{
  display:flex; align-items:flex-start; gap:.6rem; line-height:1.3;
}
.edu .newsletter .consent input[type="checkbox"]{
  width:20px; height:20px; min-width:20px; min-height:20px;
  margin-top:.1rem; cursor:pointer;
  accent-color:#8b5cf6;                 /* violet de la charte */
  border-radius:4px;
  border:1px solid rgba(255,255,255,.25);
}
/* Fallback anciens navigateurs */
@supports not (accent-color: auto){
  .edu .newsletter .consent input[type="checkbox"]{ transform: scale(1.25); }
}
/* Footer EDU — bouton cookies à droite */
.edu footer .foot { display:flex; align-items:center; } /* si pas déjà en flex */
.edu footer .foot .cookie-btn { margin-left:auto; }     /* colle le bouton à droite */