/* AFCIP Préinscription — feuille de style unique (pas de build nécessaire,
   compatible hébergement mutualisé). Palette et esprit visuel repris de la
   version originale : navy / gold, chaleureux mais institutionnel. */

:root {
  --navy-950: #061b38;
  --navy-900: #0b2a5b;
  --navy-800: #123b78;
  --navy-700: #1a4a94;
  --navy-100: #e7eef9;
  --navy-50: #f4f8fd;

  --gold-600: #de9f13;
  --gold-500: #f2b733;
  --gold-400: #f6c85c;
  --gold-100: #fdf3dc;

  --rose-600: #dc2626;
  --rose-300: #fca5a5;
  --rose-50: #fef2f2;

  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --shadow-card: 0 10px 25px -15px rgba(11, 42, 91, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--navy-950);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Le HTML par défaut du navigateur gère [hidden] avec la même spécificité
   qu'une règle de classe (0,1,0) — nos classes définissant `display` (ex.
   .field-group, .form-step) l'emportaient donc sur l'attribut `hidden` et
   affichaient des sections censées être masquées. On force l'attribut à
   toujours gagner. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
}

/* --- Layout ---------------------------------------------------------- */
.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.section { padding: 3.5rem 0; }
@media (min-width: 640px) { .section { padding: 5rem 0; } }

/* --- Boutons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid transparent;
  padding: 0.85rem 1.6rem;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  min-height: 2.75rem;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--gold-500); color: var(--navy-950); }
.btn-primary:hover { background: var(--gold-400); box-shadow: var(--shadow-card); }
.btn-outline { background: #fff; color: var(--navy-950); border-color: var(--navy-100); }
.btn-outline:hover { border-color: var(--navy-700); }
.btn-danger-outline { background: #fff; color: var(--rose-600); border-color: var(--rose-300); }
.btn-danger-outline:hover { background: var(--rose-50); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.85rem; min-height: 2.25rem; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* --- Cartes / badges ----------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--navy-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-sky { background: #e0f2fe; color: #075985; }
.badge-violet { background: #ede9fe; color: #5b21b6; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-orange { background: #ffedd5; color: #9a3412; }
.badge-slate { background: #f1f5f9; color: #334155; }

/* --- En-tête / navigation ------------------------------------------------ */
.site-header {
  border-bottom: 1px solid var(--navy-100);
  background: #fff;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.site-header img { height: 2.25rem; width: auto; }

/* --- Hero (image complète + CTA cliquable posé dessus) -------------------- */
.hero { position: relative; overflow: hidden; background: var(--navy-950); }
.hero-inner { position: relative; max-width: 72rem; margin: 0 auto; }
.hero-inner img { width: 100%; height: auto; display: block; }
.hero-cta {
  position: absolute;
  left: 16.93%; top: 71.63%; width: 23.68%; height: 7.23%;
  border-radius: 999px;
}
.hero-cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Sections formations / réassurance ----------------------------------- */
.formations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .formations-grid { grid-template-columns: 1fr 1fr; } }
.formation-card { padding: 1.5rem; }
.formation-card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 0.85rem;
  background: var(--navy-50); color: var(--navy-900); margin-bottom: 0.75rem;
}
.formation-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.formation-card p { margin: 0; color: rgba(11,42,91,0.65); font-size: 0.95rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.pill { background: var(--navy-100); color: var(--navy-900); font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; }

.reassurance { background: var(--navy-950); color: #fff; }
.reassurance h2 { text-align: center; font-size: 1.9rem; margin: 0 0 0.5rem; }
.reassurance > .container > p { text-align: center; color: rgba(255,255,255,0.75); margin: 0 0 2.5rem; }
.reassurance-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .reassurance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reassurance-grid { grid-template-columns: repeat(4, 1fr); } }
.reassurance-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.reassurance-card .icon { color: var(--gold-400); margin-bottom: 0.75rem; }
.reassurance-card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.reassurance-card p { margin: 0; color: rgba(255,255,255,0.7); font-size: 0.9rem; }

/* --- Pied de page --------------------------------------------------------- */
.site-footer { background: #fff; border-top: 1px solid var(--navy-100); padding: 2rem 0; font-size: 0.9rem; }
.site-footer .container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; text-align: center; }
@media (min-width: 640px) { .site-footer .container { flex-direction: row; text-align: left; } }
.site-footer img { height: 1.75rem; opacity: 0.8; }
.site-footer p { font-size: 0.8rem; color: rgba(11,42,91,0.6); margin: 0; }
.site-footer a { color: rgba(11,42,91,0.7); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--navy-950); }

/* --- Formulaire de préinscription ----------------------------------------- */
.form-page { background: var(--navy-50); min-height: 100vh; }
.form-topbar {
  background: #fff; border-bottom: 1px solid var(--navy-100);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.25rem;
}
.form-topbar img { height: 1.9rem; }
.progress-wrap { max-width: 46rem; margin: 1.5rem auto; padding: 0 1.25rem; }
.progress-steps { display: flex; align-items: center; justify-content: space-between; }
.progress-step { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex: 1; }
.progress-step .dot {
  width: 2.25rem; height: 2.25rem; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; font-weight: 700; background: var(--navy-100); color: var(--navy-700);
  font-size: 0.9rem;
}
.progress-step.done .dot { background: var(--navy-900); color: #fff; }
.progress-step.current .dot { background: var(--navy-900); color: #fff; box-shadow: 0 0 0 4px var(--navy-100); }
.progress-step span.label { font-size: 0.75rem; color: rgba(11,42,91,0.6); }
.progress-step.current span.label, .progress-step.done span.label { color: var(--navy-950); font-weight: 600; }
.progress-line { flex: 0 0 2rem; height: 2px; background: var(--navy-100); margin-top: -1.4rem; }
.progress-line.done { background: var(--navy-900); }
.progress-compact { display: none; }
@media (max-width: 639px) {
  .progress-steps { display: none; }
  .progress-compact { display: block; }
  .progress-compact .bar-bg { background: var(--navy-100); border-radius: 999px; height: 0.5rem; overflow: hidden; }
  .progress-compact .bar-fill { background: var(--gold-500); height: 100%; border-radius: 999px; transition: width 0.3s ease; }
  .progress-compact p { font-size: 0.8rem; color: rgba(11,42,91,0.6); margin: 0.5rem 0 0; }
}

.form-card { max-width: 46rem; margin: 0 auto 4rem; padding: 0 1.25rem; }
.form-card .card { padding: 1.75rem; }
@media (min-width: 640px) { .form-card .card { padding: 2.25rem; } }
.form-step h2 { margin: 0 0 0.4rem; font-size: 1.5rem; }
.form-step > p.hint-top { margin: 0 0 1.5rem; color: rgba(11,42,91,0.65); }

.field-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.field-group label.field-label { font-weight: 700; font-size: 0.95rem; }
.field-group .required-star { color: var(--gold-600); margin-left: 0.15rem; }
.field-group .field-hint { font-size: 0.85rem; color: rgba(11,42,91,0.6); margin: -0.25rem 0 0; }
.field-error { display: flex; align-items: center; gap: 0.4rem; color: var(--rose-600); font-size: 0.85rem; font-weight: 600; }

.text-input, select.text-input, textarea.text-input {
  width: 100%; border: 2px solid var(--navy-100); border-radius: 0.85rem;
  padding: 0.75rem 1rem; font-size: 1rem; color: var(--navy-950); background: #fff;
  transition: border-color 0.15s ease;
}
.text-input:focus { outline: none; border-color: var(--navy-800); }
.text-input.has-error { border-color: var(--rose-300); }
textarea.text-input { min-height: 8rem; resize: vertical; }

.two-col { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .two-col { grid-template-columns: 1fr 1fr; } }

.option-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .option-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.option-card {
  display: flex; align-items: flex-start; gap: 0.75rem; text-align: left;
  border: 2px solid var(--navy-100); border-radius: var(--radius-md); padding: 1rem;
  background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 2.75rem; width: 100%;
}
.option-card:hover { border-color: var(--navy-700); box-shadow: var(--shadow-card); }
.option-card.selected { border-color: var(--navy-900); background: var(--navy-50); box-shadow: var(--shadow-card); }
.option-card .option-icon {
  display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 0.7rem; background: var(--navy-50); color: var(--navy-900); flex-shrink: 0;
}
.option-card.selected .option-icon { background: var(--navy-900); color: #fff; }
.option-card .option-text { flex: 1; }
.option-card .option-text .title { display: block; font-weight: 700; font-size: 0.95rem; }
.option-card .option-text .desc { display: block; font-size: 0.85rem; color: rgba(11,42,91,0.6); margin-top: 0.15rem; }
.option-card .option-radio {
  width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 2px solid var(--navy-100);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 0.15rem;
}
.option-card.selected .option-radio { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.option-card .option-check {
  width: 1.25rem; height: 1.25rem; border-radius: 0.4rem; border: 2px solid var(--navy-100);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.option-card.selected .option-check { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.option-grid.has-error .option-card:not(.selected) { border-color: var(--rose-300); }

.subgroup-box { background: var(--navy-50); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .subgroup-box { padding: 1.25rem; } }
.narrow-grid-1 { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .narrow-grid-1 { grid-template-columns: 7.5rem 1fr; } }
.narrow-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .narrow-grid-2 { grid-template-columns: 10rem 1fr; } }
.narrow-grid-1 .field-group, .narrow-grid-2 .field-group, .two-col .field-group { margin-bottom: 0; }

.step-actions { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.75rem; }

.consent-row { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.9rem; border: 2px solid var(--navy-100); border-radius: var(--radius-md); margin-bottom: 0.75rem; }
.consent-row input[type="checkbox"] { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.consent-row.has-error { border-color: var(--rose-300); }

.recap-block { border: 1px solid var(--navy-100); border-radius: var(--radius-md); padding: 1.1rem; margin-bottom: 1rem; }
.recap-block h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.recap-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; padding: 0.2rem 0; }
.recap-row dt { color: rgba(11,42,91,0.6); }
.recap-row dd { margin: 0; font-weight: 600; text-align: right; }

/* --- Page confirmation ----------------------------------------------------- */
.confirmation-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy-50); padding: 2rem 1.25rem; }
.confirmation-card { max-width: 32rem; text-align: center; padding: 2.5rem; }
.confirmation-card .check-circle {
  width: 4rem; height: 4rem; border-radius: 999px; background: #dcfce7; color: #166534;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem;
}

/* --- Admin ----------------------------------------------------------------- */
.admin-shell { display: flex; min-height: 100vh; background: var(--navy-50); }
.admin-sidebar { width: 15.5rem; background: var(--navy-950); color: #fff; display: flex; flex-direction: column; flex-shrink: 0; }
.admin-sidebar .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; padding: 1.25rem; font-size: 1.05rem; }
.admin-sidebar nav { flex: 1; padding: 0 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.admin-sidebar nav a {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.85rem; border-radius: 0.7rem;
  color: rgba(255,255,255,0.75); font-weight: 600; font-size: 0.92rem;
}
.admin-sidebar nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-sidebar nav a.active { background: rgba(255,255,255,0.12); color: #fff; }
.admin-sidebar .footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; }
.admin-sidebar .footer a { color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; }
.admin-main { flex: 1; padding: 1.75rem 2rem; min-width: 0; }
@media (max-width: 900px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .admin-sidebar nav { flex-direction: row; padding: 0.5rem; }
  .admin-sidebar .footer { display: none; }
}

.stat-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { padding: 1.25rem; display: flex; align-items: center; gap: 0.85rem; }
.stat-card .icon { width: 2.75rem; height: 2.75rem; border-radius: 0.85rem; background: var(--gold-100); color: var(--navy-900); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-card .value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.stat-card .label { font-size: 0.85rem; color: rgba(11,42,91,0.6); }

.dist-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .dist-grid { grid-template-columns: repeat(3, 1fr); } }
.dist-card { padding: 1.25rem; }
.dist-card h3 { margin: 0 0 0.85rem; font-size: 1rem; }
.dist-row { margin-bottom: 0.65rem; }
.dist-row .top { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.3rem; }
.dist-bar-bg { background: var(--navy-50); border-radius: 999px; height: 0.5rem; overflow: hidden; }
.dist-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy-800), var(--gold-500)); }

.filters-bar { display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
@media (min-width: 900px) { .filters-bar { grid-template-columns: repeat(4, 1fr); } }
.filters-bar .search-row { grid-column: 1 / -1; }

.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--navy-100); background: #fff; }
table.candidates-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 60rem; }
table.candidates-table th { text-align: left; padding: 0.85rem 1rem; background: var(--navy-50); font-weight: 700; white-space: nowrap; }
table.candidates-table th a { display: inline-flex; align-items: center; gap: 0.3rem; }
.sort-btn { display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; font-weight: 700; color: rgba(11,42,91,0.7); background: none; border: 0; padding: 0; cursor: pointer; }
.sort-btn:hover { color: var(--navy-950); }
.sort-btn .sort-icon { font-size: 0.7rem; opacity: 0.4; }
.sort-btn.sort-active .sort-icon { opacity: 1; color: var(--navy-900); }
table.candidates-table td { padding: 0.85rem 1rem; border-top: 1px solid var(--navy-50); vertical-align: top; }
table.candidates-table tr:hover td { background: var(--navy-50); }
table.candidates-table .cand-name { font-weight: 700; }
table.candidates-table .cand-email { color: rgba(11,42,91,0.55); font-size: 0.82rem; }
.formation-cell { max-width: 220px; }

.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: 0.85rem; color: rgba(11,42,91,0.65); }
.pagination .btns { display: flex; gap: 0.5rem; }
.pagination button { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid var(--navy-100); background: #fff; display: flex; align-items: center; justify-content: center; }
.pagination button[disabled] { opacity: 0.4; cursor: not-allowed; }

.detail-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 64rem; }
@media (min-width: 1024px) { .detail-grid { grid-template-columns: 2fr 1fr; } }
.info-card { padding: 1.25rem; margin-bottom: 1.25rem; }
.info-card h3 { margin: 0 0 0.75rem; }
.info-row { display: flex; gap: 0.5rem; font-size: 0.9rem; padding: 0.25rem 0; flex-wrap: wrap; }
.info-row dt { color: rgba(11,42,91,0.6); width: 14rem; flex-shrink: 0; }
.info-row dd { margin: 0; font-weight: 600; }

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy-50); padding: 1.5rem; }
.login-card { max-width: 24rem; width: 100%; padding: 2rem; }
.login-card .logo { text-align: center; margin-bottom: 1.25rem; }
.login-card .logo img { height: 2.5rem; margin: 0 auto; }
.login-card h1 { font-size: 1.3rem; text-align: center; margin: 0 0 1.5rem; }

.alert-error { background: var(--rose-50); border: 1px solid var(--rose-300); color: var(--rose-600); padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.9rem; margin-bottom: 1rem; }
.alert-success { background: #dcfce7; border: 1px solid #86efac; color: #166534; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.9rem; margin-bottom: 1rem; }

.skeleton { background: var(--navy-50); border-radius: var(--radius-md); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.fade-in { animation: fadeIn 0.4s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.text-muted { color: rgba(11,42,91,0.6); }
.mt-0 { margin-top: 0; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

/* --- Pages légales (confidentialité, etc.) ----------------------------- */
.policy-header { background: #fff; border-bottom: 1px solid var(--navy-100); }
.policy-header .container { max-width: 48rem; padding-top: 1rem; padding-bottom: 1rem; }
.policy-header img { height: 2rem; width: auto; }
.policy-main { max-width: 48rem; margin: 0 auto; padding: 3rem 1.25rem 4.5rem; }
.policy-main h1 { font-size: 2rem; font-weight: 800; margin: 0 0 0.4rem; }
.policy-main > p.text-muted { margin: 0 0 2.5rem; }
.policy-section { margin-bottom: 2rem; }
.policy-section h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.75rem; }
.policy-section p { margin: 0 0 0.75rem; line-height: 1.65; color: rgba(11,42,91,0.85); }
.policy-section p:last-child { margin-bottom: 0; }
.policy-section ul { margin: 0 0 0.75rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; line-height: 1.6; color: rgba(11,42,91,0.85); }
.policy-section ul:last-child { margin-bottom: 0; }

/* --- Direction artistique AFCIP 2026 : immersion, mouvement, plein écran --- */
:root { --ink: #062c5f; --deep: #031c40; --blue: #07549d; --sky: #eaf6ff; --gold: #fbbd24; }
body { background: #fff; color: var(--ink); }
.container { max-width: 1280px; }
.site-header { position: sticky; top: 0; z-index: 20; border: 0; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.site-header .container { min-height: 78px; gap: 28px; }
.site-header img { height: 46px; }
.site-nav { display: flex; gap: 26px; margin-left: auto; font-size: .89rem; font-weight: 700; }
.site-nav a { position: relative; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--gold); transition: right .25s ease; }
.site-nav a:hover::after { right: 0; }
.btn { border: 0; font-weight: 800; letter-spacing: -.01em; }
.btn-primary { background: linear-gradient(115deg, #f7aa13, #ffd35f); color: var(--ink); box-shadow: 0 12px 24px rgba(232,157,20,.2); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 17px 35px rgba(232,157,20,.28); }
.afcip-hero { position: relative; min-height: min(775px, calc(100vh - 78px)); overflow: hidden; isolation: isolate; display: flex; align-items: center; background: radial-gradient(circle at 73% 22%, #1c71b9 0, #083e7d 23%, #031f49 59%, #021735 100%); color: #fff; }
.afcip-hero::before { content: ''; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(90deg, transparent 49%, rgba(255,255,255,.13) 50%, transparent 51%), linear-gradient(0deg, transparent 49%, rgba(255,255,255,.1) 50%, transparent 51%); background-size: 80px 80px; z-index: -1; }
.afcip-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; padding-top: 70px; padding-bottom: 100px; }
.hero-copy { padding: 25px 0; }
.hero-kicker, .section-kicker { display: flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 900; letter-spacing: .18em; margin: 0 0 20px; }
.hero-kicker span { width: 28px; height: 2px; background: var(--gold); }
.afcip-hero h1 { max-width: 680px; margin: 0; font-size: clamp(3.25rem, 5.6vw, 5.5rem); line-height: .98; letter-spacing: -.065em; }
.afcip-hero h1 em, .section-intro h2 em, .reassurance h2 em, .formation-detail h2 em { font-family: Georgia, serif; font-size: 1.04em; font-weight: 400; color: var(--gold); letter-spacing: -.075em; }
.hero-lead { max-width: 525px; margin: 28px 0; font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.55; color: rgba(255,255,255,.82); }
.hero-actions { display: flex; gap: 25px; align-items: center; flex-wrap: wrap; }.btn-hero { min-height: 58px; padding: 1rem 1.45rem; font-size: 1rem; }.hero-text-link { font-weight: 700; color: rgba(255,255,255,.92); }.hero-text-link span { color: var(--gold); margin-left: 5px; }
.hero-trust { display: flex; gap: 32px; margin-top: 42px; font-size: .87rem; color: rgba(255,255,255,.72); }.hero-trust span { border-left: 1px solid rgba(255,255,255,.25); padding-left: 13px; }.hero-trust b { color: var(--gold); font-size: 1.2rem; }
.hero-visual { position: relative; min-height: 525px; }.hero-visual::before { content: ''; position: absolute; width: 91%; height: 89%; bottom: -4%; right: -6%; border: 1px solid rgba(255,255,255,.33); border-radius: 48% 48% 10% 48%; }.hero-visual img { width: 100%; height: 525px; object-fit: cover; object-position: 52% center; border-radius: 54% 14% 50% 14%; box-shadow: 24px 25px 0 rgba(1,19,53,.23); }
.hero-stamp { position: absolute; right: -15px; top: 46px; width: 165px; height: 165px; display: grid; place-content: center; border: 2px dashed var(--gold); border-radius: 50%; color: var(--gold); text-align: center; font-family: Georgia, serif; font-style: italic; line-height: 1.15; transform: rotate(12deg); background: rgba(3,31,73,.68); }.hero-stamp strong { font-size: 1.1rem; }
.hero-float-card { position: absolute; left: -35px; bottom: 8px; display: flex; align-items: center; gap: 12px; padding: 15px 19px; border-radius: 12px; background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 18px 35px rgba(0,0,0,.18); }.hero-float-card span { color: var(--gold); font-size: 1.3rem; }.hero-float-card p { margin: 0; font-size: .76rem; line-height: 1.4; }.hero-float-card strong { font-size: .9rem; }
.hero-wave { position: absolute; left: -4%; right: -4%; height: 80px; bottom: -46px; border-radius: 50% 50% 0 0; background: #fff; z-index: 1; }.orbit-one,.orbit-two { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }.orbit-one { width: 520px; height: 520px; right: -270px; top: -200px; animation: drift 11s ease-in-out infinite; }.orbit-two { width: 300px; height: 300px; left: -170px; bottom: -120px; animation: drift 15s ease-in-out infinite reverse; }
@keyframes drift { 50% { transform: translate(-18px, 22px) scale(1.06); } }
.section { padding: 105px 0; }.section-intro { max-width: 730px; margin: 0 auto 55px; text-align: center; }.section-kicker { justify-content: center; color: #0a64a9; }.section-intro h2, .reassurance h2 { font-size: clamp(2.3rem, 4vw, 4rem); line-height: 1; letter-spacing: -.055em; margin: 0 0 19px; }.section-intro h2 em { color: #0f64a7; }.section-intro > p:last-child { font-size: 1.05rem; color: rgba(6,44,95,.7); line-height: 1.6; }
.formations-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }.formation-card { position: relative; overflow: hidden; min-height: 440px; display: flex; flex-direction: column; border-radius: 20px; padding: 27px; border: 1px solid #e3edf7; background: #fff; box-shadow: 0 18px 42px rgba(3,44,95,.08); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }.formation-card:hover { transform: translateY(-10px); box-shadow: 0 30px 58px rgba(3,44,95,.18); }.formation-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .17; filter: saturate(.75); transition: transform .5s ease, opacity .35s ease; }.formation-card:hover .formation-photo { transform: scale(1.08); opacity: .28; }.formation-card > *:not(.formation-photo) { position: relative; z-index: 1; }.formation-number { position: absolute; z-index: 2; right: 20px; top: 14px; font-size: 3.7rem; font-weight: 900; letter-spacing: -.08em; color: rgba(6,44,95,.08); }.formation-card .icon { margin: 0 0 25px; width: 58px; height: 58px; background: var(--ink); color: var(--gold); border-radius: 17px; }.formation-card h3 { max-width: 270px; font-size: 1.4rem; line-height: 1.08; letter-spacing: -.035em; margin: 0 0 13px; }.formation-card p { max-width: 280px; font-size: .92rem; line-height: 1.5; color: rgba(6,44,95,.7); }.formation-link { margin-top: auto; width: fit-content; display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 900; color: #07549d; }.formation-link span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--ink); transition: transform .2s ease; }.formation-card:hover .formation-link span { transform: translateX(5px); }.pill-row { position: relative; z-index: 1; }.pill { background: rgba(255,255,255,.8); border: 1px solid rgba(6,44,95,.12); }.catalogue-cta { margin-top: 47px; display: flex; justify-content: center; gap: 22px; align-items: center; flex-wrap: wrap; }.catalogue-cta p { margin: 0; font-size: .96rem; font-weight: 700; }.btn-outline { border: 1px solid #c9dcea; }
.reassurance { position: relative; padding: 110px 0; overflow: hidden; background: var(--deep); }.reassurance::before { content: ''; position: absolute; width: 700px; height: 700px; right: -390px; top: -330px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }.reassurance-heading { max-width: 750px; margin: 0 auto 52px; text-align: center; }.reassurance .section-kicker { color: var(--gold); }.reassurance h2 em { color: var(--gold); }.reassurance-heading > p:last-child { margin: 18px 0 0; color: rgba(255,255,255,.68); }.reassurance-grid { gap: 15px; }.reassurance-card { border: 1px solid rgba(255,255,255,.14); background: linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025)); cursor: default; }
.formation-page { background: #fff; }.formation-hero { min-height: min(650px,calc(100vh - 78px)); display: flex; align-items: center; overflow: hidden; background: linear-gradient(120deg,#031b3e,#07579e); color: #fff; }.formation-hero-grid { display: grid; grid-template-columns: 1fr .82fr; gap: 64px; align-items: center; padding-top: 75px; padding-bottom: 75px; }.back-link { display: inline-block; margin-bottom: 45px; color: rgba(255,255,255,.75); font-size: .9rem; font-weight: 700; }.formation-hero h1 { margin: 0; max-width: 640px; font-size: clamp(3rem,5.3vw,5.1rem); line-height: .98; letter-spacing: -.065em; }.formation-hero h1 + p { max-width: 550px; margin: 26px 0 30px; font-size: 1.17rem; color: rgba(255,255,255,.8); line-height: 1.55; }.formation-visual { position: relative; }.formation-visual img { width: 100%; min-height: 420px; object-fit: cover; border-radius: 53% 16% 48% 16%; box-shadow: 20px 20px 0 rgba(0,0,0,.15); }.formation-icon-orb { position: absolute; left: -34px; bottom: -24px; display: flex; align-items: center; gap: 15px; padding: 17px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 16px 40px rgba(0,0,0,.23); }.formation-icon-orb svg { color: #f2ae19; }.formation-icon-orb span { font-size: .83rem; font-weight: 800; line-height: 1.25; }.formation-detail { padding-top: 110px; padding-bottom: 105px; }.detail-intro { max-width: 770px; }.detail-intro .section-kicker { justify-content: flex-start; }.formation-detail h2 { font-size: clamp(2rem,3.4vw,3.55rem); line-height: 1.04; letter-spacing: -.05em; margin: 0; }.benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 57px; }.benefit-card { padding: 25px; min-height: 170px; border-radius: 16px; background: #f0f7fd; }.benefit-card span { color: #0b67ac; font-weight: 900; font-size: .82rem; letter-spacing: .15em; }.benefit-card h3 { margin: 45px 0 0; font-size: 1.08rem; line-height: 1.25; }.levels-panel { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:35px; margin-top:60px; border-radius:18px; background:var(--deep); color:#fff; }.levels-panel .section-kicker { justify-content:flex-start; margin-bottom:10px; color:var(--gold); }.levels-panel h2 { font-size:1.7rem; }.level-pills { display:flex; gap:8px; flex-wrap:wrap; }.level-pills span { padding:10px 14px; border:1px solid rgba(255,255,255,.2); border-radius:50px; font-weight:800; font-size:.85rem; }.formation-cta { padding: 94px 0; text-align:center; background: #eaf6ff; }.formation-cta .section-kicker { color:#0b67ac; }.formation-cta h2 { margin:0 0 30px; font-size:clamp(2.5rem,4vw,4.2rem); line-height:.98; letter-spacing:-.06em; }
.not-found { display:grid; place-content:center; min-height:70vh; text-align:center; gap:20px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }.reveal.is-visible { opacity:1; transform:none; }.reveal-delay { transition-delay:.15s; }
@media (max-width: 840px) { .site-nav { display:none; }.site-header .container { min-height:69px; }.site-header img { height:40px; }.afcip-hero { min-height:auto; }.afcip-hero-grid,.formation-hero-grid { grid-template-columns:1fr; padding-top:55px; }.hero-visual { max-width:560px; width:90%; justify-self:end; }.hero-visual img { height:410px; }.formations-grid { grid-template-columns:repeat(2,1fr); }.benefit-grid { grid-template-columns:1fr; }.levels-panel { flex-direction:column; align-items:flex-start; }.formation-visual { max-width:520px; }.formation-hero { min-height:auto; }.formation-hero-grid { gap:35px; }.back-link { margin-bottom:30px; } }
@media (max-width: 560px) { .site-header .container { padding:10px 18px; }.site-header img { height:35px; }.site-header .btn { font-size:.75rem; min-height:38px; padding:0 13px; }.afcip-hero-grid { padding:42px 22px 85px; gap:20px; }.afcip-hero h1 { font-size:3.2rem; }.hero-lead { font-size:1.03rem; margin:20px 0; }.hero-actions { gap:17px; }.btn-hero { width:100%; }.hero-text-link { padding-left:5px; }.hero-trust { gap:12px; margin-top:28px; font-size:.72rem; }.hero-visual { width:100%; min-height:375px; }.hero-visual img { height:365px; border-radius:45% 10% 40% 10%; }.hero-stamp { width:124px; height:124px; right:-2px; top:10px; font-size:.8rem; }.hero-float-card { left:0; bottom:-8px; padding:12px; }.hero-wave { height:55px; bottom:-35px; }.section { padding:74px 0; }.section-intro { padding:0 8px; margin-bottom:33px; }.section-intro h2,.reassurance h2 { font-size:2.5rem; }.formations-grid { grid-template-columns:1fr; gap:14px; }.formation-card { min-height:310px; padding:22px; }.formation-card .icon { width:49px; height:49px; margin-bottom:18px; }.formation-card h3 { font-size:1.27rem; }.catalogue-cta { margin-top:28px; }.catalogue-cta .btn { width:100%; text-align:center; }.reassurance { padding:76px 0; }.reassurance-grid { grid-template-columns:1fr; }.formation-hero-grid { padding:42px 22px 58px; }.formation-hero h1 { font-size:3.1rem; }.formation-visual img { min-height:300px; }.formation-icon-orb { left:0; bottom:-18px; }.formation-detail { padding:70px 22px; }.formation-detail h2 { font-size:2.1rem; }.benefit-grid { margin-top:35px; }.benefit-card { min-height:130px; }.benefit-card h3 { margin-top:28px; }.levels-panel { margin-top:35px; padding:25px; }.formation-cta { padding:70px 0; }.formation-cta h2 { font-size:2.8rem; } }

/* --- Préinscription : composition inspirée de la maquette AFCIP ----------- */
.form-page { background: #f4f9fd; }
.form-topbar { min-height: 94px; padding: 12px max(4vw, 28px); background: rgba(255,255,255,.97); border: 0; box-shadow: 0 2px 20px rgba(3,38,80,.05); gap: 34px; }
.form-topbar > a:first-child img { width: 220px; height: auto; }.form-nav { display:flex; gap:27px; margin-left:auto; }.form-nav a { font-size:.86rem; font-weight:700; color:var(--ink); }.form-nav a:hover { color:#0d67aa; }.form-top-cta { min-height:44px; padding:0 22px; }
.enrollment-banner { position:relative; min-height:205px; overflow:hidden; color:#fff; background:linear-gradient(90deg,#032c62 0%,#075694 49%,#f2f7fc 78%); }.enrollment-banner-inner { height:205px; position:relative; display:flex; align-items:center; overflow:hidden; }.enrollment-banner h1 { margin:0 0 8px; font-size:clamp(2.2rem,3.8vw,3.65rem); line-height:.95; letter-spacing:-.055em; }.enrollment-banner h1 em { font-family:Georgia,serif; color:var(--gold); font-weight:400; }.enrollment-banner .hero-kicker { margin-bottom:12px; font-size:.64rem; }.enrollment-banner p:last-child { max-width:550px; margin:0; font-size:1.04rem; line-height:1.45; }.enrollment-banner > .container > img { position:absolute; width:53%; height:100%; object-fit:cover; object-position:center 36%; right:6%; top:0; mix-blend-mode:normal; clip-path:polygon(16% 0,100% 0,100% 100%,0 100%); }.banner-values { position:absolute; display:flex; flex-direction:column; gap:13px; align-items:flex-start; right:0; top:0; bottom:0; justify-content:center; width:12%; padding-left:18px; background:rgba(244,249,253,.95); color:var(--ink); }.banner-values span { display:flex; align-items:center; gap:8px; font-size:.67rem; }.banner-values span:first-letter { font-size:1.4rem; }.banner-values b { font-size:.62rem; }
.enrollment-layout { width:min(1480px,100%); display:grid; grid-template-columns:365px minmax(0,1fr); gap:22px; padding:18px max(3vw,22px) 0; margin:0 auto; }.enrollment-sidebar { position:sticky; top:95px; align-self:start; padding:28px 25px; border-radius:17px; background:linear-gradient(150deg,#fff 0%,#eef7fd 100%); box-shadow:0 12px 32px rgba(3,44,95,.08); }.enrollment-sidebar .section-kicker { justify-content:flex-start; margin-bottom:9px; color:#106aac; }.enrollment-sidebar h2 { margin:0 0 25px; font-size:1.8rem; line-height:1.08; letter-spacing:-.045em; }.sidebar-formations { display:grid; gap:8px; }.sidebar-formation { display:grid; grid-template-columns:34px 1fr 16px; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid #dce8f2; font-weight:800; font-size:.89rem; line-height:1.2; color:var(--ink); }.sidebar-formation svg { color:#0a579c; }.sidebar-formation b { opacity:0; color:#df9d08; transition:opacity .2s ease,transform .2s ease; }.sidebar-formation:hover b { opacity:1; transform:translateX(4px); }.sidebar-promises { margin-top:26px; padding-top:18px; border-top:2px solid #f6bb26; }.sidebar-promises p { margin:0 0 10px; font-size:.84rem; font-weight:700; color:#174a79; }
.enrollment-form-area { min-width:0; }.enrollment-form-area .progress-wrap { max-width:none; margin:0; padding:22px 30px 14px; background:#fff; border-radius:17px 17px 0 0; }.enrollment-form-area .progress-line { flex-basis:6rem; }.enrollment-form-area .form-card { max-width:none; margin:0; padding:0; }.enrollment-form-area .form-card .card { min-height:600px; padding:29px 30px; border:0; border-radius:0 0 17px 17px; box-shadow:0 12px 32px rgba(3,44,95,.08); }.enrollment-form-area .form-step h2 { color:var(--ink); font-size:1.85rem; }.enrollment-form-area .form-step h2::after { content:''; display:block; width:92px; height:3px; margin-top:10px; background:linear-gradient(90deg,#f6b51e 0 38%,#cadceb 38%); }.enrollment-form-area .option-grid.cols-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }.enrollment-form-area .option-card { min-height:72px; padding:14px; border-color:#dce8f2; }.enrollment-form-area .option-card .option-text .desc { font-size:.79rem; }.enrollment-form-area .step-actions { padding-top:13px; border-top:1px solid #dce8f2; }.enrollment-form-area .step-actions .btn-primary { min-width:156px; }.preinscription-footer { margin-top:20px; padding:20px 0; background:linear-gradient(100deg,#063f79,#022a60); color:#fff; }.preinscription-footer .container { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:.86rem; }.preinscription-footer span { display:flex; align-items:center; gap:9px; }.preinscription-footer a { text-decoration:underline; text-underline-offset:4px; font-weight:700; }
@media (max-width: 1050px) { .form-nav { display:none; }.enrollment-layout { grid-template-columns:280px minmax(0,1fr); }.enrollment-sidebar { padding:22px 18px; }.sidebar-formation { font-size:.8rem; }.enrollment-banner > .container > img { right:8%; width:56%; }.banner-values { display:none; } }
@media (max-width: 760px) { .form-topbar { min-height:72px; padding:10px 18px; }.form-topbar > a:first-child img { width:150px; }.form-top-cta { padding:0 13px; min-height:39px; font-size:.75rem; }.form-top-cta svg { display:none; }.enrollment-banner { min-height:238px; background:linear-gradient(150deg,#043a77 0%,#075594 47%,#d9ecf8 47%,#f4f9fd 100%); }.enrollment-banner-inner { height:238px; align-items:flex-start; padding-top:23px; }.enrollment-banner h1 { font-size:2.3rem; }.enrollment-banner p:last-child { font-size:.91rem; max-width:56%; }.enrollment-banner > .container > img { right:-19%; top:59px; width:78%; height:179px; clip-path:none; border-radius:48% 0 0 0; }.enrollment-layout { display:block; padding:0; }.enrollment-sidebar { display:none; }.enrollment-form-area .progress-wrap { border-radius:0; padding:16px 18px 10px; }.enrollment-form-area .progress-steps { display:none; }.enrollment-form-area .progress-compact { display:block; }.enrollment-form-area .form-card .card { min-height:0; padding:23px 18px 28px; border-radius:0; box-shadow:none; }.enrollment-form-area .form-step h2 { font-size:1.55rem; }.enrollment-form-area .option-grid.cols-2 { grid-template-columns:1fr; }.enrollment-form-area .option-card { min-height:66px; }.enrollment-form-area .option-card .option-text .desc { display:none; }.enrollment-form-area .step-actions { position:sticky; bottom:0; z-index:5; padding:15px 0 0; background:#fff; }.enrollment-form-area .step-actions .btn { flex:1; padding-left:10px; padding-right:10px; }.preinscription-footer { margin-top:0; }.preinscription-footer .container { align-items:flex-start; flex-direction:column; padding:0 18px; } }

.hero-reassurance { margin: -9px 0 24px; color: #ffce59; font-size: .84rem; font-weight: 800; }.choice-help { width:min(650px,100%); margin:29px auto 0; padding:15px 20px; border:1px solid #d8e7f3; border-radius:13px; background:#f5faff; color:var(--ink); }.choice-help summary { cursor:pointer; font-weight:800; }.choice-help p { margin:11px 0 0; line-height:1.5; font-size:.92rem; color:rgba(6,44,95,.72); }.audience-panel { display:flex; align-items:center; gap:20px; max-width:900px; margin:0 0 38px; padding:21px 24px; border-radius:16px; background:#f3f9fd; border-left:4px solid var(--gold); }.audience-panel .section-kicker { justify-content:flex-start; flex:0 0 auto; margin:0; }.audience-panel > p:last-child { margin:0; line-height:1.5; font-size:1rem; font-weight:700; }.form-reassurance { margin:0 0 7px; color:#07549d; font-size:.88rem; font-weight:800; text-align:center; }.form-draft-note { display:flex; justify-content:center; align-items:center; gap:7px; margin:0 0 22px; color:rgba(6,44,95,.65); font-size:.78rem; text-align:center; }.confirmation-next { display:grid; grid-template-columns:auto 1fr; gap:13px 12px; margin:28px 0 0; padding:20px; border-radius:14px; background:#f4f9fd; text-align:left; }.confirmation-next span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--gold); color:var(--ink); font-size:.72rem; font-weight:900; }.confirmation-next p { margin:0; font-size:.84rem; line-height:1.45; color:rgba(6,44,95,.72); }.confirmation-next strong { color:var(--ink); }
@media(max-width:560px) { .hero-reassurance { margin:0 0 19px; font-size:.75rem; }.audience-panel { align-items:flex-start; flex-direction:column; gap:8px; padding:18px; }.audience-panel .section-kicker { margin:0; }.form-reassurance { line-height:1.6; }.form-draft-note { margin-bottom:20px; } }

/* Les quatre formations actives sont alignées sur une seule ligne sur ordinateur. */
@media (min-width: 1051px) { .formations-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }