:root{
  --bg:#000;
  --fg:#fff;
  --muted:#afb3b9;
  --accent:#00CFFF; /* bleu étoile */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--fg);text-decoration:none}

.container{max-width:1120px;margin:0 auto;padding:28px}

/* Décale le scroll pour ne pas cacher les titres sous le header sticky */
.anchor-target{scroll-margin-top:110px}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:sticky;top:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  border-bottom:1px solid #101010;z-index:20}
.brandmark{height:44px;filter:drop-shadow(0 0 24px rgba(0,207,255,.35))}
.sicon{width:50px;height:50px;object-fit:contain} /* icône S + visible */
.nav a{opacity:.9;margin-left:22px}
.nav .cta{padding:12px 18px;border:1px solid var(--accent);border-radius:999px}
.nav .cta:hover{background:var(--accent);color:#000;transition:.2s}

/* HERO plein écran (boutons en bas) */
.hero{
  display:grid;grid-template-rows:auto 1fr auto;gap:18px;
  min-height:100svh; /* plein écran mobile */
  align-items:center;justify-items:center;text-align:center;
  padding-top:32px;padding-bottom:8px;
}
.copy{max-width:900px}
.over.big{letter-spacing:.42em;font-size:16px;color:#a6abb1;margin-bottom:8px}
.hero h1{font-weight:800;font-size:44px;line-height:1.06;letter-spacing:-.01em;margin:0 0 14px}
.accent{color:var(--accent)}
.spark{color:var(--accent);filter:drop-shadow(0 0 16px rgba(0,207,255,.45))}
.hero p{font-size:20px;color:#e9edf1;margin:0 0 16px}

.hero-art {
  width: 100%;
  max-width: 980px;
  height: 100%;
  border-radius: 24px;
  border: 1px solid #0c1f25;
  box-shadow: 0 0 80px rgba(0, 207, 255, 0.1),
              inset 0 0 60px rgba(0, 207, 255, 0.05);
  display: block;
  object-fit: cover;
  margin-bottom: 50px;
}

.hero {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px; /* <-- Réduit l'espace entre les éléments */
  min-height: 100svh; /* On garde l'effet plein écran */
  align-items: start; /* Le contenu monte légèrement */
  justify-items: center;
  text-align: center;
  padding-top: 32px;
  padding-bottom: 8px;
}

.hero .copy {
  margin-bottom: 10 px; /* <-- Rapproche l'image du texte */
}

.hero-art {
  margin-top: 0px; /* <-- Supprime le grand espace au-dessus de l'image */
}

.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}
.btn{display:inline-block;padding:16px 22px;border-radius:56px;border:1px solid #2a2a2a;background:#0e0e0e;font-weight:700}
.btn.primary{background:var(--accent);color:#000;border-color:var(--accent)}
.btn.ghost{background:transparent}
.btn.xxl{padding:22px 34px;font-size:20px}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);transition:.15s}

/* Why / How / Apply */
.why h2,.how h2,.apply h2{font-size:36px;margin:26px 0 20px;font-weight:800;letter-spacing:-.01em}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid #121212;border-radius:18px;padding:22px;background:linear-gradient(180deg,#0e0e0e,#090909)}
.card h3{margin:6px 0 8px;font-weight:700}
.card p{margin:0;color:#cfd3d8}
.card .icon{font-size:24px}

.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
.step{border:1px solid #121212;border-radius:16px;padding:16px;background:#0b0b0b;color:#d7dbe0;
  display:flex;align-items:center;gap:10px}
.step span{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--accent);color:#000;font-weight:800}
.note{color:#a9adb2;margin-top:10px}

.apply{padding-top:10px;padding-bottom:40px}
.cta-box{text-align:center;border:1px solid #0f2b33;
  background:linear-gradient(180deg,rgba(0,207,255,.12),rgba(0,207,255,0));
  border-radius:22px;padding:28px;box-shadow:0 0 60px rgba(0,207,255,.08)}
.apply .lead{color:#cfd3d8;margin:6px 0 20px}

/* Footer */
.footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #101010;
  color:#aeb2b7;padding-top:18px;padding-bottom:22px}
.favicon{width:24px;height:24px;margin-right:8px;display:inline-block;vertical-align:middle}

/* Responsive */
@media (max-width:900px){
  .container{padding:20px}
  .brandmark{height:36px}
  .sicon{width:30px;height:30px}
  .hero h1{font-size:38px}
  .grid3{grid-template-columns:1fr}
  .steps4{grid-template-columns:1fr}
}

.hero .copy h1 {
  margin-top: 4px;  /* Réduit l’espace au minimum */
  margin-bottom: 8px; /* Garde un petit écart avec le sous-titre */
}

.hero .copy {
  margin-bottom: 4px; /* Rapproche tout le bloc du reste */
}

/* PATCH MOBILE*/
/* image = ratio fixe, jamais étirée */
.hero-art{
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

@media (max-width: 900px){
  .hero{ min-height:auto; }                 /* évite que la grille étire l'image */
  .hero-art{
    border:none;                            /* enlève le contour */
    box-shadow: 0 0 24px rgba(0,207,255,.10); /* glow doux (ou met 'none') */
    border-radius:14px;
  }
  .hero .actions{ margin-top:12px; }
}


/* —— PAGE CANDIDATURE —— */

.apply-hero { text-align:center; padding-top:36px; padding-bottom:10px; }
.apply-hero .lead { color:#cfd3d8; margin-top:6px; }
.pills.center{ justify-content:center; display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.pills.center li{ list-style:none; border:1px solid #141414; padding:8px 12px; border-radius:999px; color:#d0d4da; background:linear-gradient(180deg,#0f0f0f,#0a0a0a) }

.form-card{
  max-width:760px; margin:16px auto 32px; padding:22px;
  background:linear-gradient(180deg,#0e0e0e,#090909);
  border:1px solid #141414; border-radius:16px;
  box-shadow:0 0 40px rgba(0,207,255,.06);
}
.form-card .grid{ display:grid; gap:14px; }
.field{ display:block; }
.field > span{ display:block; font-weight:600; margin-bottom:6px; }
.field .hint{ display:block; font-style:normal; font-size:12px; color:#9aa0a6; margin-top:4px; }
.field input, .field textarea{
  width:100%; padding:14px 14px; border-radius:12px; border:1px solid #1b1b1b;
  background:#0b0b0b; color:#fff; outline:none;
}
.field input:focus, .field textarea:focus{ border-color:#184a55; box-shadow:0 0 0 4px rgba(0,207,255,.08); }
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.checks label{ display:flex; gap:8px; align-items:center; font-size:14px; color:#d0d4da; }
.success{ text-align:center; padding:22px 10px; }
.success .icon{ font-size:40px; margin-bottom:6px; }
.hidden{ display:none; }
.muted{ color:#a9adb2; }
.full{ width:100%; }

@media (max-width:900px){
  .form-card{ margin:10px 0 24px; border-radius:14px; }
  .checks{ grid-template-columns:1fr; }
}

/* —— Candidature V2 —— */

/* Hero plus “pro” */
.apply-hero { text-align:center; padding-top:40px; padding-bottom:12px; }
.apply-hero h1{ font-size:42px; line-height:1.08; font-weight:800; letter-spacing:-.01em; margin:8px 0 8px; }
.apply-hero .kpi{ font-size:18px; color:#d6dbe0; margin:4px 0 10px; }
.apply-hero .divider{
  width:min(560px,90%); height:1px; margin:8px auto 12px;
  background: linear-gradient(90deg, rgba(0,207,255,0) 0%, rgba(0,207,255,.35) 50%, rgba(0,207,255,0) 100%);
  box-shadow: 0 0 18px rgba(0,207,255,.25);
}
.pills.center.tight{ justify-content:center; display:flex; gap:10px; flex-wrap:wrap; }
.pills.center.tight li{ list-style:none; border:1px solid #141414; padding:8px 12px; border-radius:999px; color:#d0d4da; background:linear-gradient(180deg,#0f0f0f,#0a0a0a) }

/* Card “Sparks” */
.form-card{
  max-width:760px; margin:18px auto 34px; padding:22px;
  background:radial-gradient(60% 100% at 50% 0%, rgba(0,207,255,.05), rgba(0,207,255,0) 60%),
             linear-gradient(180deg,#0e0e0e,#090909);
  border:1px solid #133642; border-radius:18px;
  box-shadow:0 0 60px rgba(0,207,255,.08), inset 0 0 40px rgba(0,207,255,.05);
}
.form-card .grid{ display:grid; gap:16px; }
.field > span{ display:block; font-weight:600; margin-bottom:6px; }
.field .hint{ display:block; font-size:12px; color:#9aa0a6; margin-top:4px; }
.field input, .field textarea{
  width:100%; padding:14px 14px; border-radius:12px; border:1px solid #1b1b1b;
  background:#0b0b0b; color:#fff; outline:none; transition:border .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus{
  border-color:#1e5360; box-shadow:0 0 0 4px rgba(0,207,255,.09);
}

/* Niche clean (pas de bordure fieldset, grille ordonnée) */
.niche-group{ border:none; padding:0; margin:0; }
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; align-items:center; }
.checks label{ display:flex; gap:10px; align-items:center; font-size:14px; color:#d0d4da; }
.other-input{ display:none; margin-top:6px; }

/* Bouton */
.btn.full{ width:100%; }
.btn.xl{ padding:18px 24px; font-size:18px; }

/* Success pro */
.success{ text-align:center; padding:26px 10px; }
.success-badge{
  width:72px; height:72px; margin:0 auto 10px;
  border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(0,207,255,.35), rgba(0,207,255,.12));
  border:1px solid #154b57; display:grid; place-items:center; box-shadow:0 0 30px rgba(0,207,255,.25);
}
.success-badge .tick{ font-size:34px; color:#fff; font-weight:800; }
.success h3{ font-size:26px; margin:8px 0 6px; }
.success .actions{ margin-top:8px; }

/* Mobile */
@media (max-width:900px){
  .apply-hero h1{ font-size:34px; }
  .form-card{ border-radius:16px; margin:12px 0 28px; }
  .checks{ grid-template-columns:1fr; }
}

/* Niche clean + lisible mobile */
.niche-group{ border:none; padding:0; margin:0; }
.niche-group > .hint{ margin:4px 0 10px; color:#9aa0a6; }

.checks{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 18px;
}
.chk{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px; background:#0b0b0b; border:1px solid #171717;
}
.chk span{
  flex:1; color:#e7ebef; line-height:1.2; /* texte avant la case */
}
.chk input[type="checkbox"]{
  width:22px; height:22px; min-width:22px; min-height:22px; border-radius:6px;
}

.other-input{ display:none; margin-top:6px; }

.error{ color:#ff8a8a; }
.hidden{ display:none; }

@media (max-width:900px){
  .checks{ grid-template-columns:1fr; }
  .chk{ gap:10px; padding:12px; }
  .chk span{ font-size:15px; }
}

/* CHECKBOXES SPARKS — petites, arrondies, bleues, tick custom */
.chk input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; min-width:18px; min-height:18px;
  border-radius:6px;
  border:1.5px solid #1e5360;          /* bord teal discret */
  background:#0b0b0b;                   /* fond sombre */
  display:grid; place-content:center;
  transition:background-color .15s,border-color .15s,box-shadow .15s,transform .08s;
  accent-color:#00CFFF;                 /* fallback navigateurs modernes */
}
@media (min-width:900px){
  .chk input[type="checkbox"]{ width:20px; height:20px; }
}
.chk input[type="checkbox"]:hover{ border-color:#1f5c6a; }
.chk input[type="checkbox"]:focus{ outline:none; box-shadow:0 0 0 4px rgba(0,207,255,.12); }

.chk input[type="checkbox"]:checked{
  background:#00CFFF;                   /* bleu Sparks */
  border-color:#00CFFF;
}
.chk input[type="checkbox"]:checked::after{
  content:"";
  width:18px; height:18px;
  background:#001014;                   /* tick sombre lisible sur bleu */
  /* petit check SVG en mask (compatible iOS) */
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'>\
  <path d='M5.2 10.2L2.3 7.3l-1.4 1.4 4.3 4.3L13 5.2 11.6 3.8z' fill='%23000'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'>\
  <path d='M5.2 10.2L2.3 7.3l-1.4 1.4 4.3 4.3L13 5.2 11.6 3.8z' fill='%23000'/></svg>") no-repeat center/contain;
}

.chk{ display:flex; align-items:center; gap:10px; padding:10px 12px;
      background:#0b0b0b; border:1px solid #171717; border-radius:10px; }
.chk span{ flex:1; color:#e7ebef; line-height:1.2; }

.faq {
  margin: 4rem auto;
  max-width: 700px;
}

.faq h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.faq-item {
  margin-bottom: 1rem;
  border-bottom: 1px solid #333;
  padding-bottom: 1rem;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: #00CFFF; /* bleu Sparks */
}

.faq-answer {
  display: none;
  padding: 0 1rem;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #aaa;
  line-height: 1.5;
}

/* Empêche le header de coller au notch / barre système */
header, nav {
  padding-top: env(safe-area-inset-top);
}

/* Fallback si le navigateur ne supporte pas env() */
@supports not (padding-top: env(safe-area-inset-top)) {
  header, nav {
    padding-top: 20px; /* marge fixe de secours */
  }
}