:root{--bg:#ffffff;--fg:#0f172a;--muted:#475569;--accent:#0ea5e9;--card:#f8fafc;--border:#e2e8f0;--shadow:0 10px 30px rgba(2,6,23,.12)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

body > header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--border);
  z-index:30
}

.navbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-weight:800;letter-spacing:.2px}
.brand span{color:var(--accent)}
.menu{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.menu a{padding:8px 12px;border-radius:12px;border:1px solid transparent}
.menu a:hover{border-color:var(--border)}
.cta a{padding:8px 14px;border-radius:999px;border:2px solid var(--accent);color:var(--accent)}
.cta a.primary{background:var(--accent);color:#fff}

.hero{
  position:relative;
  min-height:420px;
  display:grid;
  place-items:center;
  overflow:hidden
}

.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(20%)}
.overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.35))}

.hero-inner{
  position:relative;
  padding:48px 0;
  text-align:center;
  color:#fff;
  z-index:10
}



.hero h1{font-size:clamp(30px,5vw,48px);margin:0 0 12px;text-shadow:0 4px 18px rgba(0,0,0,.35)}
.hero p{margin:0 0 18px;color:#e2e8f0;font-size:clamp(16px,2.2vw,18px)}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{appearance:none;border:none;border-radius:999px;background:var(--accent);color:white;padding:12px 18px;font-weight:700;box-shadow:var(--shadow)}
.btn.outline{background:transparent;color:#fff;border:2px solid #fff}
.section{padding:38px 0}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:20px}
.card p{margin:0 0 12px;color:var(--muted)}
.card ul{margin:0 0 12px;padding-left:18px}
.tag{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;margin-right:6px;color:#0369a1;background:#e0f2fe;border-color:#bae6fd}
.ribbon{display:inline-block;background:#fde68a;color:#92400e;border:1px solid #fcd34d;border-radius:999px;padding:4px 10px;font-size:12px;margin-left:8px}
footer{border-top:1px solid var(--border);margin-top:12px;color:var(--muted)}
.footer-inner{padding:18px 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.contact{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{border:1px solid var(--border);border-radius:999px;padding:6px 12px;background:#fff}
.wrap{max-width:1100px;margin:0 auto;padding:22px 20px}
.btn.slim{padding:10px 16px;border-radius:999px;border:2px solid var(--accent);background:transparent;color:var(--accent);font-weight:700}
.lead{color:var(--muted)}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-22{margin-top:22px}
.alert{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.alert.success{border-left:4px solid #22c55e}.alert.error{border-left:4px solid #ef4444}
.input,.textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px}


/* =========================================================
   Variantes de boutons (cohérentes avec le design existant)
   Place ce bloc APRÈS .btn { ... }
   ========================================================= */




/* --- Bouton outline/ghost lisible dans la hero --- */
.hero .btn.outline,
.hero .btn.ghost {
  background: #fff !important;                 /* fond clair */
  color: var(--brand-700, #0e7490) !important;  /* texte bleu lisible */
  border: 1px solid var(--brand-300, #7dd3fc) !important;
  text-shadow: none !important;
  box-shadow: 0 8px 24px rgba(2,132,199,.10);
}

.hero .btn.outline:hover,
.hero .btn.ghost:hover {
  color: var(--brand-800, #0a5568) !important;
  border-color: var(--brand-400, #38bdf8) !important;
  box-shadow: 0 10px 28px rgba(2,132,199,.14);
}

/* Onglets compacts en bas de la page (Première / Terminale) */
.btn.slim {
  padding: .55rem 1rem;
  background: #fff;
  color: var(--brand-700, #0e7490);
  border: 1px solid var(--brand-300, #7dd3fc);
}

.btn.slim:hover {
  color: var(--brand-800, #0a5568);
  border-color: var(--brand-400, #38bdf8);
}

/* =============== HERO NSI : vignette douce et lisible =============== */


.hero { position: relative; overflow: hidden; }

/* vignette très subtile, bords floutés + masque pour fondre */
.hero--nsi::before{
  content:"";
  position:absolute;
  inset:-8% -12%;                 /* dépasse pour éviter les bords visibles */
  background:
    radial-gradient(60% 38% at 50% 42%,
      rgba(10,20,35,.14) 0%,
      rgba(10,20,35,.09) 45%,
      rgba(10,20,35,.04) 62%,
      transparent 78%);
  filter: blur(10px);              /* bords hyper doux */
  mask-image: radial-gradient(62% 40% at 50% 42%, #000 55%, #0008 70%, transparent 85%);
  pointer-events:none;
}

/* lisibilité sans assombrir à outrance */
.hero--nsi h1{
  color:#fff;
  text-shadow:
    0 18px 48px rgba(0,0,0,.35),
    0 2px 0 rgba(0,0,0,.22);
}
.hero--nsi .lead{
  color:rgba(255,255,255,.94);
  text-shadow:0 2px 12px rgba(0,0,0,.22);
}

/* boutons : primaire identique, outline très lisible sur clair */
.hero--nsi .btn{ box-shadow:0 12px 32px rgba(2,132,199,.26); }
.hero--nsi .btn.outline,
.hero--nsi .btn.ghost{
  background:#fff !important;
  border:2px solid #38bdf8 !important;
  color:#035c92 !important;
  text-shadow:none !important;
}
.hero--nsi .btn.outline:hover,
.hero--nsi .btn.ghost:hover{
  border-color:#0ea5e9 !important;
  color:#014a78 !important;
  box-shadow:0 14px 36px rgba(2,132,199,.32);
}

/* sur petits écrans : vignette encore plus légère */
@media (max-width: 900px){
  .hero--nsi::before{
    filter: blur(8px);
    background: radial-gradient(68% 46% at 50% 44%,
      rgba(10,20,35,.10) 0%,
      rgba(10,20,35,.06) 52%,
      transparent 78%);
    mask-image: radial-gradient(70% 46% at 50% 44%, #000 45%, #0006 62%, transparent 80%);
  }
}

/* Activer un fond via la variable CSS --page-bg (injectée par header.php) */
.hero--bg {
  background-image: var(--page-bg);
  background-size: cover;
  background-position: center;
}

/* Quand on utilise le fond via CSS, on masque l'<img> de la hero */
.hero--bg > img { display: none; }

.menu-dropdown {
  position: relative;
}

.menu-dropdown-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.menu-dropdown-content {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;

  min-width: 180px;

  padding: .45rem;

  border: 1px solid #dbe5ef;
  border-radius: 12px;

  background: #fff;

  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);

  transition:
    opacity .15s ease,
    transform .15s ease,
    visibility .15s ease;

  z-index: 50;
}

.menu-dropdown:hover .menu-dropdown-content,
.menu-dropdown:focus-within .menu-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-dropdown-content a {
  display: block;

  padding: .65rem .8rem;

  border-radius: 8px;

  color: #0f172a;
  text-decoration: none;

  white-space: nowrap;
}

.menu-dropdown-content a:hover {
  background: #eff6ff;
  color: #0284c7;
}

/* =========================================================
   Menu Contact
   ========================================================= */

.contact-choice {
  border-bottom: 1px solid #e2e8f0;
}

.contact-choice summary {
  padding: .65rem .8rem;

  color: #0f172a;
  font-weight: 600;

  cursor: pointer;
  list-style: none;

  border-radius: 8px;
}

.contact-choice summary::-webkit-details-marker {
  display: none;
}

.contact-choice summary::after {
  content: "›";
  float: right;

  color: #0284c7;

  transition: transform .15s ease;
}

.contact-choice[open] summary::after {
  transform: rotate(90deg);
}

.contact-choice summary:hover {
  background: #eff6ff;
  color: #0284c7;
}

.contact-choice-value {
  padding: .15rem .8rem .75rem;
}

.contact-choice-value a {
  padding: 0;

  color: #0284c7;
  font-size: .9rem;
  font-weight: 700;

  text-decoration: none;
}

.contact-choice-value a:hover {
  text-decoration: underline;
}

.contact-form-link {
  display: block;

  padding: .65rem .8rem;

  color: #0f172a;
  font-weight: 600;

  text-decoration: none;
  border-radius: 8px;
}

.contact-form-link:hover {
  background: #eff6ff;
  color: #0284c7;
}

/* ==========================================================
   ESPACE ÉLÈVES — CONNEXION
   ========================================================== */


/* ----------------------------------------------------------
   Carte de connexion
   ---------------------------------------------------------- */

.student-login-card {
    max-width: 680px;
    padding: 1.5rem;
}


.student-login-card form {
    max-width: 420px;
}


.student-login-card input[type="text"],
.student-login-card input[type="password"] {
    width: 100%;
    max-width: 360px;
    padding: 0.7rem 0.8rem;

    border: 1px solid #cbd5e1;
    border-radius: 8px;

    font: inherit;

    background: #fff;
}


.student-login-card input:focus {
    outline: none;
}


/* ----------------------------------------------------------
   Première — bleu
   ---------------------------------------------------------- */

.student-login.theme-premiere .badge {
    color: #075fcf;
    background: #e7f1ff;
}


.student-login.theme-premiere
.student-login-card {
    border-color: #cfe2ff;
    background: #f7faff;
}


.student-login.theme-premiere
.student-login-card input:focus {
    border-color: #1478f2;
    box-shadow:
        0 0 0 3px rgba(20, 120, 242, 0.12);
}


.student-login.theme-premiere
.student-login-card .btn {
    background: #1478f2;
    border-color: #1478f2;
    color: #fff;
}


/* ----------------------------------------------------------
   Terminale — vert
   ---------------------------------------------------------- */

.student-login.theme-terminale .badge {
    color: #087a36;
    background: #e4f7e9;
}


.student-login.theme-terminale
.student-login-card {
    border-color: #c6e8d0;
    background: #f5fcf7;
}


.student-login.theme-terminale
.student-login-card input:focus {
    border-color: #16a34a;
    box-shadow:
        0 0 0 3px rgba(22, 163, 74, 0.12);
}


.student-login.theme-terminale
.student-login-card .btn {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}


/* ----------------------------------------------------------
   Information sur le niveau
   ---------------------------------------------------------- */

.student-login-info {
    max-width: 680px;

    margin-top: 1.25rem;
    padding: 1rem 1.25rem;

    border-radius: 10px;
}


.student-login.theme-premiere
.student-login-info {
    color: #075fcf;
    background: #eaf3ff;
}


.student-login.theme-terminale
.student-login-info {
    color: #087a36;
    background: #e8f8ed;
}
/* ==========================================================
   SESSION ÉLÈVE CONNECTÉE
   ========================================================== */

/*
 * Le lien Déconnexion se distingue volontairement
 * des liens ordinaires de navigation.
 */

body.student-connected .menu > a.student-logout-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 14px;

    border-radius: 12px;

    font-weight: 700;
    text-decoration: none;
}


/* ----------------------------------------------------------
   Première — bleu
   ---------------------------------------------------------- */

body.student-connected.student-premiere
.menu > a.student-logout-link {
    color: #ffffff;
    background: #1478f2;
    border: 1px solid #1478f2;
}

body.student-connected.student-premiere
.menu > a.student-logout-link:hover {
    color: #ffffff;
    background: #0f65cf;
    border-color: #0f65cf;
}


/* ----------------------------------------------------------
   Terminale — vert
   ---------------------------------------------------------- */

body.student-connected.student-terminale
.menu > a.student-logout-link {
    color: #ffffff;
    background: #16a34a;
    border: 1px solid #16a34a;
}

body.student-connected.student-terminale
.menu > a.student-logout-link:hover {
    color: #ffffff;
    background: #15803d;
    border-color: #15803d;
}