/* ============================================
   FORMATION.CSS — Pages de contenu protégées
   (Débutant / Intermédiaire / Expert)
   Réutilise les tokens de style.css — aucune redéfinition de palette.
   ============================================ */

/* ---------- Portail d'accès ---------- */
.access-gate{
  min-height: 70vh;
  display:flex; align-items:center; justify-content:center;
  padding:120px 6vw 80px;
}
.access-gate-box{
  max-width:480px; width:100%;
  border:1px solid var(--border);
  background:var(--card);
  padding:48px;
  text-align:center;
}
.access-gate-box h1{
  font-family:var(--f-display);
  font-size:2rem;
  text-transform:uppercase;
  color:var(--title);
  margin-bottom:16px;
}
.access-gate-box p{
  color:var(--text);
  margin-bottom:28px;
  font-size:17px;
}
#accessForm{ display:flex; flex-direction:column; gap:16px; }
.access-gate-box input[type="email"], .access-gate-box input[type="text"]{
  width:100%;
  font-family:var(--f-serif);
  font-size:17px;
  padding:14px 16px;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
}
.access-gate-box input[type="email"]:focus, .access-gate-box input[type="text"]:focus{ border-color:var(--gold); outline:none; }
.access-gate-box button{
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:var(--gold);
  color:var(--bg);
  padding:16px;
  transition:background 0.25s ease;
}
.access-gate-box button:hover{ background:var(--gold-hover); }
.access-gate-box button:disabled{ opacity:0.6; cursor:not-allowed; }
.access-error{
  color:#e0483f;
  font-family:var(--f-mono);
  font-size:13px;
  min-height:18px;
}

/* ---------- En-tête de formation ---------- */
.formation-header{
  padding:150px 8vw 60px;
  text-align:center;
  border-bottom:1px dashed var(--border);
}
.formation-header h1{
  font-family:var(--f-display);
  font-size:clamp(2.4rem, 5vw, 4rem);
  text-transform:uppercase;
  color:var(--title);
  margin:14px 0 20px;
}

/* ---------- Chapitres (contenu long) ---------- */
.chapters{ padding:70px 8vw; max-width:900px; margin:0 auto; }
.chapter-block{
  border-bottom:1px solid var(--border);
  padding-bottom:56px;
  margin-bottom:56px;
}
.chapter-block:last-child{ border-bottom:none; }
.chapter-number{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--gold);
  margin-bottom:10px;
}
.chapter-block h2{
  font-family:var(--f-display);
  font-size:1.9rem;
  text-transform:uppercase;
  color:var(--title);
  margin-bottom:28px;
}
.chapter-block h3{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold);
  margin:32px 0 14px;
}
.chapter-block p{
  color:var(--text);
  margin-bottom:18px;
  max-width:760px;
}
.chapter-block ul{ margin-bottom:18px; }
.chapter-block ul li{
  color:var(--text);
  padding:6px 0 6px 20px;
  position:relative;
}
.chapter-block ul li::before{
  content:"—"; position:absolute; left:0; color:var(--gold);
}
.chapter-image{
  width:100%;
  max-width:760px;
  margin:28px 0;
  border:1px solid var(--border);
  background:var(--card);
}
.chapter-image img, .chapter-image svg{ width:100%; height:auto; display:block; }
.chapter-image-caption{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--muted);
  padding:12px 16px;
  border-top:1px solid var(--border);
}
.chapter-photo{
  width:100%; max-width:760px; aspect-ratio:16/9; object-fit:cover;
  filter:grayscale(1) contrast(1.1);
  border:1px solid var(--border);
  margin:28px 0;
}

/* ---------- Section Examen ---------- */
.exam-section{ padding:70px 8vw; max-width:820px; margin:0 auto; }
.exam-section > .section-title{ text-align:center; }
.exam-section > .section-intro{ text-align:center; margin:0 auto 50px; }

.exam-question{
  border:1px solid var(--border);
  background:var(--card);
  padding:28px;
  margin-bottom:22px;
}
.exam-question-num{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:10px;
}
.exam-question-text{
  color:var(--title);
  font-size:17px;
  margin-bottom:18px;
  font-weight:600;
}
.exam-options{ display:flex; flex-direction:column; gap:10px; }
.exam-options-vf{ flex-direction:row; gap:20px; }
.exam-option{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.exam-option:hover{ border-color:var(--gold); }
.exam-option input{ margin-top:4px; accent-color:var(--gold); }
.exam-option span{ color:var(--text); font-size:15px; }

.exam-question-correct{ border-color:#4a9d5f; }
.exam-question-incorrect{ border-color:#e0483f; }
.exam-option-right-answer{ border-color:#4a9d5f; background:rgba(74,157,95,0.08); }
.exam-option-wrong-answer{ border-color:#e0483f; background:rgba(224,72,63,0.08); }

.exam-reflexion{
  margin-top:50px;
  padding-top:40px;
  border-top:1px dashed var(--border);
}
.exam-reflexion h3{
  font-family:var(--f-display);
  font-size:1.4rem;
  text-transform:uppercase;
  color:var(--title);
  margin-bottom:10px;
}
.exam-reflexion-note{ color:var(--muted); font-size:14px; margin-bottom:24px; }
.exam-reflexion-item{ color:var(--text); margin-bottom:16px; padding-left:4px; }

#examForm > button{
  width:100%;
  margin-top:20px;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:var(--gold);
  color:var(--bg);
  padding:18px;
  transition:background 0.25s ease;
}
#examForm > button:hover{ background:var(--gold-hover); }

/* ---------- Résultats ---------- */
.results-section{ padding:70px 8vw; max-width:700px; margin:0 auto; }
.results-box{
  text-align:center;
  border:1px solid var(--border);
  background:var(--card);
  padding:56px 40px;
}
.results-passed{ border-color:#4a9d5f; }
.results-failed{ border-color:#e0483f; }
.results-score{
  font-family:var(--f-display);
  font-size:4.5rem;
  color:var(--gold);
  line-height:1;
}
.results-detail{
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--muted);
  margin:10px 0 24px;
}
.results-message{ color:var(--text); font-size:17px; margin-bottom:28px; }
.results-box .btn-primary{
  display:inline-block;
  background:var(--gold); color:var(--bg);
  font-family:var(--f-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  padding:16px 30px; border:none; cursor:pointer;
}
.certificate-box{
  margin-top:28px;
  padding-top:28px;
  border-top:1px dashed var(--border);
}
.certificate-box p{ color:var(--text); margin-bottom:16px; }
.certificate-box a.btn-primary{ text-decoration:none; }

@media (max-width: 640px){
  .access-gate-box{ padding:32px 24px; }
  .exam-options-vf{ flex-direction:column; }
}