/* ===========================================================
   cohort-1 — Cohorte 1 (formation gratuite en recherche d'emploi)
   Uses the site design tokens defined in styles.css:
     --navy: #06162f
     --blue: #0b61de
     --paper: #f8f8f6
     --muted: #5f6b7d
   Loaded via <link rel="stylesheet" href="cohort-1.css">
   =========================================================== */

/* Smooth scroll for in-page anchor links (e.g. "Send my CV" → #inscription) */
html { scroll-behavior: smooth; }
/* Account for the fixed navbar (72px) so anchored targets aren't hidden under it */
section[id] { scroll-margin-top: 88px; }
/* Same for the CV form block targeted by the floating CTA (#cv-form) */
#cv-form { scroll-margin-top: 88px; }

body.cohort-page {
  background: var(--paper);
}

/* ---- HERO ---- */
.cohort-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(11, 97, 222, 0.22), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(11, 97, 222, 0.10), transparent 60%),
    linear-gradient(180deg, #06162f 0%, #0a2350 100%);
  color: #fff;
  /* Offset for fixed navbar (72px) so the H1 is never hidden behind it */
  padding-top: 72px;
}
.cohort-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  pointer-events: none;
}

/* Hero split layout (left text / right photo) */
.hero-split {
  position: relative;
  z-index: 1;
  max-width: 76rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-split {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding: 5rem 2rem 7rem;
  }
}
.hero-text { min-width: 0; }
.cohort-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 13px; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9);
}
.cohort-h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.cohort-h1 .accent {
  background: linear-gradient(90deg, #ffffff 0%, #cfe0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Styles pour le HTML injecté via {@html} (chaînes i18n) — doivent rester
   globaux : Svelte retire les règles scopées ciblant ces éléments (warning
   css_unused_selector), elles n'atteignent donc jamais le CSS compilé. */
.lede strong { color: #fff; }
.accent-text {
  background: linear-gradient(90deg, #ffffff 0%, #cfe0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- CARDS (glass style from site) ---- */
.cohort-card {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(6, 22, 47, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(6, 22, 47, 0.08);
}

/* ---- STEPS ---- */
.cohort-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(6, 22, 47, 0.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 78px;
}
.cohort-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(6, 22, 47, 0.25);
  border-color: rgba(11, 97, 222, 0.25);
}
.cohort-step .num {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #06162f, #0b61de);
  color: #fff; font-weight: 800;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 6px 16px -6px rgba(11, 97, 222, 0.5);
}
.cohort-step .num.num-blue {
  background: linear-gradient(135deg, #0b61de, #1e8bff);
}

/* ---- TRACKS (Track 1 / Track 2) ---- */
.cohort-track {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(6, 22, 47, 0.10);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(6, 22, 47, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cohort-track > .cohort-step-list { flex: 0 0 auto; }
.cohort-track > .cohort-track-text { flex: 0 0 auto; }
.cohort-track > .cohort-track-cta { margin-top: auto !important; padding-top: 32px; }
.cohort-track.track-blue {
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  border-color: rgba(11, 97, 222, 0.15);
}
.cohort-track .pill {
  display: inline-flex; padding: 4px 10px; border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(6, 22, 47, 0.15);
  color: var(--navy);
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.cohort-track .pill.pill-blue {
  border-color: rgba(11, 97, 222, 0.25);
  color: var(--blue);
}

/* ---- CTA (matches site .button-primary / .button-secondary) ---- */
.cohort-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  box-shadow: 0 18px 38px rgba(6, 22, 47, 0.18);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.cohort-cta:hover {
  background: #0a2350;
  border-color: #0a2350;
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(6, 22, 47, 0.28);
}
.cohort-cta.ghost {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cohort-cta.ghost:hover {
  background: rgba(255, 255, 255, 0.18);
}
.cohort-cta.cta-dark {
  /* Used inside the light track section for the TikTok button */
  background: var(--navy);
  border-color: var(--navy);
}
.cohort-cta[disabled] {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

/* ---- FORM ---- */
.cohort-form input,
.cohort-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(6, 22, 47, 0.14);
  background: #fff;
  color: var(--navy);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cohort-form input::placeholder,
.cohort-form textarea::placeholder {
  color: rgba(6, 22, 47, 0.45);
}
.cohort-form input:focus,
.cohort-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(11, 97, 222, 0.15);
}
.cohort-form .form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--navy);
}
.cohort-form .file-input {
  width: 100%;
  font-size: 14px;
  padding: 8px;
  border: 1px dashed rgba(6, 22, 47, 0.20);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
}
.cohort-form .file-input::file-selector-button {
  margin-right: 1rem;
  padding: 12px 20px;
  border-radius: 8px 0 0 8px;
  border: 0;
  font-weight: 600;
  background: rgba(11, 97, 222, 0.08);
  color: var(--blue);
  cursor: pointer;
}
.cohort-form .file-input::file-selector-button:hover {
  background: rgba(11, 97, 222, 0.14);
}
.cohort-form .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--navy);
}
.cohort-form .checkbox-row input { margin-top: 4px; accent-color: var(--blue); }
.cohort-form .submit-btn {
  font-size: 16px;
  padding: 18px;
}
.cohort-form .error-box {
  font-size: 14px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 12px;
}
.cohort-form .spinner {
  animation: spin 0.8s linear infinite;
}

/* ---- FAQ ---- */
.cohort-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 22px;
  font-weight: 600;
  color: var(--navy);
  display: flex; justify-content: space-between; align-items: center;
}
.cohort-faq summary::-webkit-details-marker { display: none; }
.cohort-faq[open] summary { color: var(--blue); }
.cohort-faq .body {
  padding: 0 22px 22px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---- COUNTERS (J1/J2/J3) ---- */
.cohort-counter {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  background: linear-gradient(135deg, #06162f, #0b61de);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- LIVE INDICATOR (TikTok brand pink — kept intentional) ---- */
.tiktok-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #ff2e63;
  box-shadow: 0 0 0 0 rgba(255,46,99,0.6);
  animation: tiktokPulse 1.8s infinite;
}
@keyframes tiktokPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,46,99,0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(255,46,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,46,99,0); }
}

/* ---- TICKER ---- */
.ticker {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.ticker-track {
  display: inline-flex; gap: 36px;
  white-space: nowrap;
  animation: tickerScroll 28s linear infinite;
  font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.7);
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- HERO BADGES (inline row under CTAs) ---- */
.hero-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) {
  .hero-badges {
    grid-template-columns: 1fr;
  }
}
.hero-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 0;
}
.hero-badge div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.hero-badge strong {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.hero-badge span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

/* ---- HERO PHOTO (right column) ---- */
.hero-photo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.hero-photo-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(11, 97, 222, 0.25), rgba(6, 22, 47, 0.1));
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.5),
    inset 0 0 0 8px rgba(6, 22, 47, 0.2);
}
.hero-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 1023px) {
  .hero-photo-frame {
    max-width: 320px;
  }
}
.hero-photo-card {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--navy);
  padding: 16px 24px;
  border-radius: 16px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.4);
  text-align: center;
  white-space: nowrap;
  max-width: 92%;
}
.hero-photo-stat {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--blue);
  margin: 0;
  line-height: 1;
}
.hero-photo-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.4;
}

/* ---- SECTIONS / TEXT HELPERS ---- */
.cohort-section { padding: 80px 24px; }
.cohort-section.bg-white { background: #fff; }
.cohort-section.bg-paper { background: var(--paper); }
.cohort-section.bg-warm {
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}
.cohort-section.bg-ink {
  background: var(--navy);
  color: #fff;
}
.cohort-section-inner { max-width: 72rem; margin: 0 auto; }
.cohort-section-narrow { max-width: 56rem; margin: 0 auto; }
.cohort-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 3rem);
  color: var(--navy);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.cohort-section-title.text-light { color: #fff; }
.cohort-section-lede {
  color: var(--muted);
  font-size: 1.125rem;
  max-width: 42rem;
  line-height: 1.6;
}
.cohort-section-lede.text-light { color: rgba(255,255,255,0.8); }
.cohort-text-center { text-align: center; }
.cohort-mb-14 { margin-bottom: 56px; }
.cohort-mb-12 { margin-bottom: 48px; }
.cohort-mb-10 { margin-bottom: 40px; }
.cohort-mb-8 { margin-bottom: 32px; }
.cohort-mb-6 { margin-bottom: 24px; }
.cohort-mb-4 { margin-bottom: 16px; }
.cohort-mb-3 { margin-bottom: 12px; }
.cohort-mb-2 { margin-bottom: 8px; }
.cohort-grid-2 {
  display: grid; gap: 24px;
}
.cohort-grid-3 {
  display: grid; gap: 24px;
}
@media (min-width: 768px) {
  .cohort-grid-2 { grid-template-columns: 1fr 1fr; }
  .cohort-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.cohort-card-title {
  font-weight: 700; font-size: 1.25rem; color: var(--navy);
  margin-bottom: 8px;
}
.cohort-card-text { color: var(--muted); line-height: 1.6; }
.cohort-track-title {
  font-size: 1.5rem; font-weight: 800; color: var(--navy);
  margin-bottom: 12px;
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.01em;
}
.cohort-track-text { color: var(--muted); margin-bottom: 24px; line-height: 1.6; }
.cohort-track-cta { margin-top: auto; padding-top: 32px; width: 100%; }

/* ---- TRACKS ALIGNMENT (How section) -------------------------------
   Côte à côte (>=768px), les deux cartes partagent leurs rangées via
   subgrid : pill / titre / texte intro / liste d'étapes / CTA.
   => les blocs de points chiffrés démarrent à la même hauteur dans les
      deux cartes et les CTA restent alignés en bas, quelle que soit la
      longueur du texte d'intro. La carte avec le moins d'étapes étire
      ses cartes (grid-auto-rows:1fr) pour remplir la zone harmonieusement.
   Fallback : layout flex historique (mobile / navigateurs sans subgrid). */
@media (min-width: 768px) {
  @supports (grid-template-rows: subgrid) {
    .cohort-tracks-grid {
      grid-template-rows: auto auto auto 1fr auto;
    }
    .cohort-tracks-grid > .cohort-track {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 5;
    }
  }
}

/* All step lists (Track 1 = 4 steps, Track 2 = 3 steps) share the same
   4-row grid so that each row has the same vertical position across tracks.
   Track 2's 4th row is empty but keeps its space so steps 1-3 align with
   Track 1's steps 1-3. */
.cohort-step-list {
  display: grid;
  grid-template-rows: repeat(4, minmax(78px, auto));
  gap: 12px;
}.cohort-list { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.cohort-final-ctas { display: flex; flex-direction: column; gap: 16px; justify-content: center; max-width: 520px; margin: 0 auto; }
@media (min-width: 640px) { .cohort-final-ctas { flex-direction: row; } }

.cohort-faq-list > * + * { margin-top: 16px; }
.cohort-form-stack > * + * { margin-top: 20px; }

.bac-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(11, 97, 222, 0.08);
  border: 1px solid rgba(11, 97, 222, 0.25);
  border-radius: 14px;
  font-size: 15px;
  color: var(--navy);
}
.bac-banner strong { font-weight: 700; }

/* ---- SPINNER ---- */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- TERMS MODAL ---- */
.consent-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.consent-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
}
.consent-main input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  cursor: pointer;
}
.terms-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  align-self: flex-start;
}
.terms-link:hover { color: #0848a8; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(6, 22, 47, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modalFade 0.2s ease-out;
}
@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-card {
  position: relative;
  background: #fff;
  color: var(--navy);
  border-radius: 18px;
  max-width: 640px;
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
  animation: modalSlide 0.25s ease-out;
}
@keyframes modalSlide {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(6, 22, 47, 0.06);
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}
.modal-close:hover { background: rgba(6, 22, 47, 0.12); }
.modal-title {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  padding: 28px 28px 4px;
  margin: 0;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.modal-subtitle {
  padding: 0 28px 20px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(6, 22, 47, 0.08);
}
.modal-body {
  padding: 20px 28px;
  overflow-y: auto;
  flex: 1;
}
.modal-section {
  margin-bottom: 20px;
}
.modal-section:last-child { margin-bottom: 0; }
.modal-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.modal-section p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--navy);
  margin: 0;
}
.modal-footer {
  padding: 16px 28px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid rgba(6, 22, 47, 0.08);
}
.modal-btn {
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.modal-btn:hover { transform: translateY(-1px); }
.modal-btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.modal-btn-primary:hover { background: #0a2350; border-color: #0a2350; }
.modal-btn-secondary {
  background: #fff;
  color: var(--navy);
  border-color: rgba(6, 22, 47, 0.15);
}
.modal-btn-secondary:hover { background: var(--paper); }

@media (max-width: 640px) {
  .modal-card { max-height: 92vh; }
  .modal-title { font-size: 20px; padding: 24px 24px 4px; }
  .modal-subtitle { padding: 0 24px 16px; }
  .modal-body { padding: 16px 24px; }
  .modal-footer { padding: 12px 24px 20px; flex-direction: column-reverse; }
  .modal-btn { width: 100%; }
}