: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}
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:56vh;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:70px 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; }