.form-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.form-message {
  font-size: 0.95rem;
  font-weight: 600;
}

.form-message.success {
  color: #15803d;
}

.form-message.error {
  color: #dc2626;
}

:root {
  /* Force light only : empeche iOS Safari 18+ de serialiser les couleurs systeme */
  /* (currentColor, accent-color, dynamic colors) en color(srgb ...) ou color(display-p3 ...) */
  /* qui font planter html2canvas 1.4.1 avec "unsupported color function color" */
  color-scheme: light only;
  --font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --color-text: #101828;
  --color-muted: #667085;
  --color-blue: #2f66f6;
  --color-blue-strong: #1d53f0;
  --color-border: #d2d7e5;
  --color-border-strong: rgba(47, 102, 246, 0.35);
  --color-soft: #f5f7ff;
  --shadow-card: 0 24px 60px rgba(16, 24, 40, 0.12);
  --radius-card: 24px;
  line-height: 1.5;
  color: var(--color-text);
  background-color: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family);
  background: #f5f7ff;
  color: var(--color-text);
}

a {
  color: inherit;
  text-decoration: none;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: min(1140px, calc(100% - 2.5rem));
  margin: 0 auto;
}

.logo {
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: #0f172a;
}

.logo-accent {
  color: var(--color-blue);
  position: relative;
  padding-bottom: 0.2rem;
}

.logo-accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #ef233c;
}

.site-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(210, 215, 229, 0.6);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1.6rem 0;
  flex-wrap: wrap;
}

.header-text {
  flex: 1;
  min-width: 220px;
}

.header-text h1 {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  letter-spacing: -0.03em;
}

.header-text p {
  margin: 0.35rem 0 0;
  color: var(--color-muted);
  max-width: 520px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease, border-color 0.2s ease;
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.button.primary {
  background: var(--color-blue);
  color: #ffffff;
  border-color: var(--color-blue);
  box-shadow: 0 18px 35px rgba(47, 102, 246, 0.28);
}

.button.primary:hover {
  transform: translateY(-1px);
  background: var(--color-blue-strong);
  border-color: var(--color-blue-strong);
}

.panel.form .button.primary {
  background: linear-gradient(135deg, #5a7bff 0%, #3a5bff 100%);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(58, 91, 255, 0.35);
}

.panel.form .button.primary:hover {
  background: linear-gradient(135deg, #3a5bff 0%, #2747f4 100%);
  transform: translateY(-2px);
}

.button.ghost {
  background: transparent;
  color: var(--color-blue);
  border-color: var(--color-border-strong);
}

.button.ghost:hover {
  background: rgba(47, 102, 246, 0.08);
}

.content {
  flex: 1;
  padding: clamp(2.5rem, 6vw, 4rem) 0 4rem;
}

/* Layout supprimé pour navigation à étapes */

.panel {
  background: #ffffff;
  border: 1.5px solid rgba(210, 215, 229, 0.55);
  border-radius: var(--radius-card);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  position: relative;
}

.panel.form {
  background: radial-gradient(
      circle at -10% -10%,
      rgba(99, 102, 241, 0.08),
      rgba(255, 255, 255, 0) 55%
    ),
    #ffffff;
  border: 1.5px solid rgba(47, 102, 246, 0.12);
  box-shadow: 0 32px 70px rgba(47, 102, 246, 0.1);
  padding: clamp(2rem, 4vw, 2.8rem);
  gap: 1.9rem;
}

/* ====================   PRÉ-SÉLECTION (Vue initiale)
   =========================== */

.panel.preselection {
  background: radial-gradient(
      circle at -10% -10%,
      rgba(47, 102, 246, 0.06),
      rgba(255, 255, 255, 0) 55%
    ),
    #ffffff;
}

.preselection-header {
  text-align: left;
}

.preselection-header h2 {
  font-size: 1.65rem;
  margin: 0.5rem 0;
}

.preselection-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.preselection-step {
  padding: 1.5rem;
  background: var(--color-soft);
  border-radius: 12px;
  height: fit-content;
}

.preselection-step-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--color-text);
}

/* Type client selector */
.client-type-selector {
  display: flex;
  gap: 0.75rem;
}

@media (max-width: 500px) {
  .client-type-selector {
    flex-direction: column;
  }
}

.client-type-option {
  flex: 1;
  cursor: pointer;
}

.client-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.client-type-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 0.95rem;
}

.client-type-option input:checked + .client-type-label {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.04);
  color: var(--color-blue);
}

/* Feedback au survol — restauré après la suppression du bloc CSS dupliqué (revue PR intra). */
.client-type-option:hover .client-type-label {
  border-color: var(--color-blue);
}

.client-type-label svg {
  opacity: 0.6;
  flex-shrink: 0;
}

.client-type-option input:checked + .client-type-label svg {
  opacity: 1;
  color: var(--color-blue);
}

/* Mode de paiement */
.payment-mode-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.payment-mode-option {
  cursor: pointer;
}

.payment-mode-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-mode-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.payment-mode-option input:checked + .payment-mode-label {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.04);
}

.payment-mode-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.payment-mode-text strong {
  font-weight: 600;
  font-size: 0.95rem;
}

.payment-mode-text small {
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Sélecteur de mode de financement (CPF / Direct) */
.funding-mode-selector {
  display: flex;
  gap: 0.75rem;
}

@media (max-width: 500px) {
  .funding-mode-selector {
    flex-direction: column;
  }
}

.funding-mode-option {
  flex: 1;
  cursor: pointer;
}

.funding-mode-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.funding-mode-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.funding-mode-option:hover .funding-mode-label {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.03);
}

.funding-mode-option input:checked + .funding-mode-label {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.06);
  box-shadow: 0 0 0 3px rgba(47, 102, 246, 0.1);
}

.funding-mode-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.funding-mode-text strong {
  font-weight: 600;
  font-size: 0.95rem;
}

.funding-mode-text small {
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Sélecteur de formation */
.formation-selector {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.formation-option {
  cursor: pointer;
}

.formation-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.formation-label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: #ffffff;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.formation-option:hover .formation-label {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.03);
}

.formation-option input:checked + .formation-label {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.06);
  box-shadow: 0 0 0 3px rgba(47, 102, 246, 0.1);
}

.formation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.formation-header strong {
  font-weight: 600;
  font-size: 1rem;
  color: #1f2937;
}

.formation-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-blue);
  white-space: nowrap;
}

.formation-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.formation-label small.formation-price-note {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-muted);
  white-space: nowrap;
}

.formation-label small {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.formation-label small strong {
  color: #1f2937;
  font-weight: 600;
}

/* Récapitulatif et bouton */
.preselection-footer-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.preselection-summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.preselection-summary .price-label {
  font-size: 0.95rem;
  color: var(--color-muted);
}

.preselection-summary .price-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-blue);
}

.preselection-summary .price-details {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-left: 0.25rem;
}

.preselection-footer {
  margin-top: 1.5rem;
}

.preselection-footer .button.primary {
  padding: 1rem 2rem;
  font-size: 1.05rem;
}

/* Sessions header avec bouton retour */
.sessions-header {
  margin-bottom: 0.5rem;
}

/* Rappel formation sélectionnée */
.formation-reminder {
  background: linear-gradient(135deg, rgba(47, 102, 246, 0.08) 0%, rgba(47, 102, 246, 0.04) 100%);
  border: 1px solid rgba(47, 102, 246, 0.2);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
}

.formation-reminder-label {
  color: #667085;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.formation-reminder-name {
  color: var(--color-blue);
  font-size: 1.1rem;
  font-weight: 700;
}

/* ====================   FIN PRÉ-SÉLECTION
   =========================== */

.panel h2 {
  margin: 0;
  font-size: 1.65rem;
  letter-spacing: -0.03em;
}

.panel-lead {
  margin: -0.4rem 0 0.85rem;
  color: var(--color-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* LES CHAPEAUX (la phrase grise sous un titre) — une regle pour la famille.
   Chacune des trois classes portait son plafond en `rem` (28, 26, 36), choisi sans rapport
   avec le texte : 28rem font 448 px quand « Repondez a quelques questions pour voir les
   sessions disponibles. » en demande 470 — la phrase cassait a UN mot de la fin, avec 600 px
   libres a droite (Come, 17/09/2026). Le symptome avait deja ete rustine une fois plus bas
   (`#sessionsFilterInfo { max-width: none }`) sans toucher a la cause.
   - `68ch` : la mesure de lecture se compte en caracteres. Assez large pour qu'un chapeau
     d'une phrase (le plus long en fait 81) tienne sur une ligne quand il y a la place.
   - `text-wrap: balance` : quand il FAUT passer a la ligne (telephone), les lignes sont
     equilibrees au lieu de « premiere ligne pleine + un mot abandonne ». Mesure a 390 px :
     4 / 5 mots au lieu de 6 / 3. Propriete ignoree par un vieux navigateur : rien ne casse.
   Garde : scripts/test_chapeaux_mot_orphelin.py */
.panel-lead,
.legend-subtitle {
  max-width: 68ch;
  text-wrap: balance;
}

/* Sessions view: le texte d'info doit prendre toute la largeur */
#sessionsFilterInfo {
  max-width: none;
}

.form-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.form-header #backToSessions {
  flex-shrink: 0;
}

.form-header-title {
  margin-bottom: 1rem;
}

.form-header-title h2 {
  margin: 0;
}

.form-header-title .panel-lead {
  margin: 0.5rem 0 0;
}

/* Le challenge reste à portée du bouton, y compris dans un récapitulatif mobile étroit. */
/* Côme, 16/09/2026 : le bloc est inséré parmi les champs d'une grille à deux colonnes ; sans consigne, il tombait
   dans une seule colonne (215 px sur un écran de 1440 px) et le widget de 300 px en débordait. Il prend toute la ligne. */
.ard-anti-robot { grid-column: 1 / -1; flex-basis: 100%; width: 100%; min-width: 0; margin: 20px 0; padding: 16px; box-sizing: border-box; border: 1px solid #c7d2fe; border-radius: 12px; background: #f8faff; color: #1e293b; }
.ard-anti-robot h3 { margin: 0 0 8px; font-size: 16px; }
.ard-anti-robot p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.ard-anti-robot:focus { outline: 2px solid #315efb; outline-offset: 3px; }
.ard-anti-robot .button { margin-top: 12px; }
/* Côme, 16/09/2026 : le widget « flexible » occupe la largeur du cadre (300 px minimum), aligné sur le texte et le bouton */
/* 18/09 (Côme) : le cadre du contrôle ne prend sa hauteur QUE s'il y a un contrôle à faire ; sinon une barre d'attente. */
#ard-anti-robot-widget { width: 100%; min-width: 300px; min-height: 0; }
.ard-anti-robot[data-etat="controle"] #ard-anti-robot-widget { min-height: 65px; }
.ard-anti-robot[data-etat="attente"] p { margin-bottom: 10px; }
.ard-anti-robot-barre { position: relative; height: 6px; border-radius: 999px; background: #e0e7ff; overflow: hidden; }
.ard-anti-robot-barre::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: inherit; background: #315efb; animation: ard-anti-robot-va 1.25s ease-in-out infinite; }
@keyframes ard-anti-robot-va { 0% { transform: translateX(-105%); } 100% { transform: translateX(270%); } }
@media (prefers-reduced-motion: reduce) { .ard-anti-robot-barre::after { animation: none; width: 100%; opacity: .55; } }
#ard-anti-robot-widget iframe { width: 100% !important; max-width: 100%; }
.ard-anti-robot [hidden] { display: none; }
@media (max-width: 400px) { .ard-anti-robot { padding: 12px 4px; margin-left: -8px; margin-right: -8px; width: auto; } /* 16/09 : le formulaire fait 292 px à 390 px ; le bloc déborde de 8 px de chaque côté pour laisser 300 px au widget Turnstile « flexible » (sa largeur minimale) */ }

/* Intra : la phrase d'accroche court sur la largeur du titre, pas sur 28 rem. */
#intraView .panel-lead {
  max-width: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.95rem;
  color: #1f2937;
  width: 100%;
}

.field label,
.field span {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.field input,
.field textarea,
.field select {
  border-radius: 14px;
  border: 1px solid rgba(210, 215, 229, 0.8);
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: #101828;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #a1aec6;
  opacity: 1;
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

/* Multiselect Dropdown (liste déroulante multi-sélection) */
.multiselect-dropdown {
  position: relative;
  width: 100%;
}

.multiselect-dropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  background: #ffffff;
  border: 1px solid rgba(47, 102, 246, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}

.multiselect-dropdown-trigger:hover {
  border-color: rgba(47, 102, 246, 0.4);
}

.multiselect-dropdown-trigger:focus {
  outline: none;
  border-color: rgba(47, 102, 246, 0.6);
  box-shadow: 0 0 0 3px rgba(47, 102, 246, 0.14);
}

.multiselect-dropdown.open .multiselect-dropdown-trigger {
  border-color: rgba(47, 102, 246, 0.6);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.multiselect-dropdown-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multiselect-dropdown-text.placeholder {
  color: #9ca3af;
}

.multiselect-dropdown-arrow {
  flex-shrink: 0;
  margin-left: 0.5rem;
  color: #6b7280;
  transition: transform 0.2s ease;
}

.multiselect-dropdown.open .multiselect-dropdown-arrow {
  transform: rotate(180deg);
}

.multiselect-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(47, 102, 246, 0.3);
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 8px 24px rgba(47, 102, 246, 0.12);
  z-index: 100;
}

.multiselect-dropdown.open .multiselect-dropdown-panel {
  display: block;
}

.multiselect-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: background-color 0.12s ease;
  margin: 0;
  font-weight: 400;
}

.multiselect-dropdown-item:hover {
  background-color: rgba(47, 102, 246, 0.06);
}

.multiselect-dropdown-item:has(input:checked) {
  background-color: rgba(47, 102, 246, 0.1);
}

.multiselect-dropdown-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #2f66f6;
  cursor: pointer;
  flex-shrink: 0;
}

.multiselect-dropdown-item span {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-text);
}

.multiselect-dropdown-item:has(input:checked) span {
  color: #1d53f0;
  font-weight: 500;
}

.multiselect-dropdown-item-autre {
  border-top: 1px dashed rgba(47, 102, 246, 0.2);
}

/* Champ "Autre" en pleine largeur sous le dropdown */
.autre-field {
  margin-top: 1rem;
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
}

/* S'assurer que autre-field prend toute la largeur dans tous les contextes */
.cpf-fields-content .autre-field,
.learner-card-fields .autre-field,
.conditional-form .autre-field {
  grid-column: 1 / -1;
  width: 100%;
}

.autre-field textarea {
  min-height: 100px;
  width: 100%;
}

.field label small {
  font-weight: 400;
  color: #6b7280;
  font-size: 0.85em;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: rgba(47, 102, 246, 0.6);
  box-shadow: 0 8px 20px rgba(47, 102, 246, 0.12),
    0 0 0 3px rgba(47, 102, 246, 0.14);
  background: #ffffff;
}

/* Filtre lieu de l'étape sessions (Pays → Ville). */
.sessions-location-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.intra-lieu-option[hidden],
.sessions-location-filter[hidden] {
  display: none;
}

/* B-062 — lieu pas encore fixé : on ANNONCE le lien Mon Compte Formation à venir plutôt
   que d'envoyer le candidat sur l'action EDOF d'une autre ville. */
.mcf-lien-a-venir {
  margin: 0.5rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 0.6rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #78350f;
  font-weight: 600;
  font-size: 0.9rem;
}

/* B-016 — une seule ville : plus de filtre, mais on dit OÙ. Sans cette ligne, le
   candidat lit une liste de dates sans lieu et croit qu'elles sont chez lui. */
.sessions-location-filter-note {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
}

.sessions-location-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted);
}

.sessions-location-filter-field select {
  min-width: 170px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  padding: 0.6rem 2.3rem 0.6rem 0.9rem;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--color-text);
  background-color: #ffffff;
  background-image: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right 0.85rem center;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sessions-location-filter-field select:hover {
  border-color: var(--color-border-strong);
}

.sessions-location-filter-field select:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(47, 102, 246, 0.15);
}

.sessions-location-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sessions-location-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.sessions-location-filter-btn:hover {
  border-color: var(--color-border-strong);
}

.sessions-location-filter-btn.active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #ffffff;
}

.sessions-location-filter-reset {
  align-self: flex-end;
  background: none;
  border: none;
  padding: 0.6rem 0.35rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sessions-location-filter-reset:hover {
  color: var(--color-blue-strong);
}

.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1rem;
}

.sessions-list.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: var(--color-muted);
  text-align: center;
}

.sessions-list.empty p {
  margin: 0;
}

/* Loading spinner pour les sessions */
.loading-sessions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}

.loading-sessions p {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.session-card {
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 18px;
  padding: 1.5rem;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
  cursor: pointer;
}

.session-card:hover {
  border-color: rgba(47, 102, 246, 0.6);
  box-shadow: 0 18px 36px rgba(47, 102, 246, 0.12);
  transform: translateY(-2px);
}

.session-card.selected {
  border-color: var(--color-blue);
  box-shadow: 0 18px 38px rgba(47, 102, 246, 0.18);
  background: rgba(47, 102, 246, 0.02);
}

.session-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.session-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.session-card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Badge de niveau pédagogique (piloté par DELIV'IA via sessions.niveau) */
.session-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  width: fit-content;
}

.session-level-badge.debutant {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
}

.session-level-badge.avance {
  color: #6d28d9;
  background: rgba(139, 92, 246, 0.14);
}

.session-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  color: #0f172a;
  flex: 1;
}

/* Date comme titre principal de la carte session */
.session-date-title {
  font-size: 1.15rem;
  color: var(--color-blue);
}

/* Dates complètes de la formation (e-learning + présentiel) */
.session-full-dates {
  margin: 0.25rem 0 0.5rem 0;
  font-size: 0.8rem;
  color: #6b7280;
  font-style: italic;
}

/* Label discret "(Présentiel)" après la date */
.session-dates-label {
  font-size: 0.85em;
  color: #9ca3af;
  font-weight: normal;
}

.session-date-badge {
  background: rgba(47, 102, 246, 0.12);
  color: #1f2937;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.session-price {
  color: #667085;
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.session-capacity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.12);
  width: fit-content;
  align-self: flex-start;
}

.session-capacity-badge.danger {
  color: #b91c1c;
  background: rgba(248, 113, 113, 0.18);
}


/* Badge d'urgence pour les inscriptions */
.session-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.session-urgency-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.session-urgency-badge.critical {
  color: #fff;
  background: #dc2626;
  animation: pulse-urgency 1.5s ease-in-out infinite;
}

.session-urgency-badge.warning {
  color: #92400e;
  background: rgba(251, 191, 36, 0.25);
}

.session-urgency-badge.info {
  color: #1e40af;
  background: rgba(59, 130, 246, 0.15);
}

@keyframes pulse-urgency {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}

.session-card.registration-closed {
  opacity: 0.7;
  cursor: default;
}

.session-card.registration-closed:hover {
  border-color: rgba(16, 24, 40, 0.08);
  box-shadow: none;
  transform: none;
}

.session-link-icon.disabled {
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

.session-summary .session-description {
  margin: 1rem 0 0;
  color: var(--color-muted);
  line-height: 1.5;
  font-size: 0.95rem;
}

.session-price-summary {
  margin: 0.5rem 0 0;
  color: #0f172a;
  font-weight: 700;
  font-size: 1.1rem;
}

.session-capacity-summary {
  margin-top: 0.75rem;
  display: inline-flex;
}
}

.session-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 0.25rem;
  opacity: 0.5;
}

.session-link-icon:hover {
  color: #667085;
  opacity: 1;
  transform: translateX(2px);
}

/* Formulaire multi-étapes */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

/* Mode de session entreprise (intra) — cartes empilées avec titre + sous-texte, sur la
   base de .client-type-selector/.client-type-option/.client-type-label (voir plus haut dans le fichier) ;
   déclarées après pour gagner la cascade. */
.company-mode-selector {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0.75rem;
  margin-bottom: 0;
}

.company-mode-option {
  border: none;
  padding: 0;
  background: transparent;
}

.company-mode-option:hover {
  border-color: transparent;
  background: transparent;
}

.company-mode-label {
  justify-content: flex-start;
  text-align: left;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.company-mode-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* Ancre le prix (position absolue en desktop) à CE conteneur, pas au label — le
     label a display:flex en ligne (hérité de .client-type-label) : un 2e enfant
     direct y serait placé à côté du texte plutôt qu'en dessous. En restant l'unique
     enfant du label, .company-mode-text garde son plein espace de mise en page. */
  position: relative;
}

.company-mode-text strong {
  font-weight: 600;
  font-size: 0.98rem;
  color: #1f2937;
}

/* Par défaut (mobile, carte étroite) : le prix reste dans le flux, sur sa propre
   ligne alignée à droite — la carte grandit légèrement, mais un padding-right fixe
   casserait le titre en escalier et chevaucherait quand même la description sur ces
   largeurs (texte déjà proche du bord). */
.company-mode-price {
  display: block;
  align-self: flex-end;
  margin-top: 0.15rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-blue);
  white-space: nowrap;
}

/* Au-delà de 540px (carte large) : le prix flotte dans le coin bas-droit du bloc
   texte sans ajouter de hauteur à la carte ; le padding-right (sur ce même bloc,
   pas sur le label) réserve sa place pour que la description ne le chevauche jamais. */
@media (min-width: 540px) {
  .company-mode-text {
    padding-right: 9rem;
  }
  .company-mode-price {
    position: absolute;
    right: 0;
    bottom: 0;
    align-self: auto;
    margin-top: 0;
  }
}

.company-mode-text small {
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.conditional-form {
  display: none;
}

.conditional-form.active {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-flow: dense;
  gap: 1rem 1.25rem;
}

.conditional-form .field.full-width {
  grid-column: 1 / -1;
}

/* Côme, 19/09/2026 au soir : le téléphone du responsable a rejoint la ligne de l'e-mail. L'adresse prend deux cellules sur
   grand écran (e-mail, téléphone, adresse sur une ligne ; code postal, ville, pays sur la suivante). Sous 1100 px la grille
   retombe d'elle-même : une cellule par champ, aucun débordement. */
@media (min-width: 1100px) {
  .conditional-form .field.field-large { grid-column: span 2; }
}

/* Sélecteur de mode de paiement (pour particuliers) */
.payment-mode-selector {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid rgba(47, 102, 246, 0.2);
  border-radius: 18px;
  background: rgba(47, 102, 246, 0.03);
  margin-bottom: 0.5rem;
}

.payment-mode-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
}

.payment-mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.payment-mode-option {
  display: flex;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #ffffff;
}

.payment-mode-option:hover {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.03);
}

.payment-mode-option input[type="radio"] {
  margin-right: 0.6rem;
  accent-color: var(--color-blue);
}

.payment-mode-option input[type="radio"]:checked + .payment-mode-label {
  color: var(--color-blue);
  font-weight: 600;
}

.payment-mode-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 500;
}

.payment-mode-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.payment-mode-text strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: inherit;
}

.payment-mode-text small {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-muted);
  opacity: 0.9;
}

.payment-mode-option input[type="radio"]:checked + .payment-mode-label .payment-mode-text small {
  color: var(--color-blue);
  opacity: 0.8;
}

/* Bloc champs CPF unifié (bleu) */
.cpf-fields-block {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px dashed var(--color-blue);
  border-radius: 18px;
  background: rgba(47, 102, 246, 0.04);
  width: 100%;
  box-sizing: border-box;
}

/* Sous-sections CPF */
.cpf-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(47, 102, 246, 0.15);
  margin-bottom: 0.5rem;
}

.cpf-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.cpf-section h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-blue);
}

.cpf-section-hint {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Prénom / Nom côte à côte */
.cpf-identity-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.cpf-identity-row .field {
  flex: 1;
  min-width: 0;
}

/* Champs téléphone */
.phone-input-group {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.phone-country-field {
  flex: 0 0 130px;
  min-width: 0;
}

.phone-number-field {
  flex: 1;
  min-width: 0;
}

.cpf-identity-row input,
.phone-input-group input,
.phone-input-group select {
  min-width: 0;
  width: 100%;
}

.phone-input-group select {
  padding: 0.75rem 0.5rem;
}

@media (max-width: 540px) {
  .cpf-identity-row,
  .phone-input-group {
    flex-direction: column;
    align-items: stretch;
  }

  .phone-country-field,
  .phone-number-field {
    flex: 1 1 auto;
  }
}

.cpf-fields-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cpf-fields-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-blue);
}

.cpf-fields-header p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.cpf-fields-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.field-hint {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

.field-error {
  font-size: 0.8rem;
  color: #dc2626;
  margin-top: 0.25rem;
  font-weight: 500;
}

/* Le SIRET retrouvé dans l'annuaire des entreprises : le nom en vert, un établissement fermé en ambre. */
.field-error.field-ok { color: #15803d; }
.field-error.field-alerte { color: #b45309; }

.cpf-cv-section,
.cpf-diploma-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: rgba(16, 185, 129, 0.06);
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* 01/09 — la section conformité CPF (« Informations complémentaires ») n'avait aucune
   règle : espacement vertical hérité au hasard. Même rythme que les sections CV /
   diplôme ci-dessus (sans leur fond). */
.cpf-conformite-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.cpf-cv-section h4,
.cpf-diploma-section h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: #047857;
}

.section-hint {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.4;
}

/* Champs dans les sections CPF - pleine largeur */
.cpf-cv-section .field,
.cpf-cv-section .checkbox,
.cpf-diploma-section .field,
.cpf-diploma-section .checkbox {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Input LinkedIn et autres inputs dans sections CPF */
.cpf-cv-section input[type="text"],
.cpf-cv-section input[type="file"],
.cpf-diploma-section input[type="file"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cpf-linkedin-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: #fff8e6;
  border-radius: 8px;
  border-left: 3px solid #f59e0b;
}

/* ============================================ */
/* SECTION QUESTIONS D'ATTENTE & POSITIONNEMENT */
/* ============================================ */
.cpf-positionnement-block {
  /* Wrapper CPF : sans cette règle, le grid 4 colonnes du parent
     .conditional-form ne lui donne qu'une cellule (~25% largeur), ce qui
     écrase le bloc et déforme les échelles 1-10. */
  grid-column: 1 / -1;
}

.cpf-positionnement-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(47, 102, 246, 0.05), rgba(139, 92, 246, 0.05));
  border-radius: 12px;
  border: 1px solid rgba(47, 102, 246, 0.15);
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.5rem;
  /* Forcer pleine largeur quand le bloc est enfant direct d'un .conditional-form
     (cas B2C fonds propres + B2B/OPCO) où le parent est un grid à plusieurs
     colonnes. Sans cette règle, le bloc n'occupe qu'une cellule (~25% de
     largeur). Inoffensif quand le parent est .cpf-fields-block (flex). */
  grid-column: 1 / -1;
}

/* Coaching seul : section « attentes » (individuel + entreprise). Enfant direct du grid
   .conditional-form — sans cette règle, elle n'occupe qu'une cellule (~25% largeur),
   même piège que .cpf-positionnement-section ci-dessus (lot 1, Côme 01/09). */
.coaching-attentes-section {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
}

.cpf-positionnement-section h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: #1e3a8a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cpf-positionnement-section h4::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, #2f66f6, #8b5cf6);
  border-radius: 2px;
}

.cpf-positionnement-section .field,
.cpf-positionnement-section .checkbox {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cpf-positionnement-section textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}

/* Rating scale 1-10 */
.rating-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rating-scale {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
}

.rating-button {
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  border: 2px solid var(--color-border);
  color: #374151;
  border-radius: 8px;
  padding: 0.55rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  line-height: 1;
}

.rating-button:hover {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.06);
  transform: translateY(-1px);
}

.rating-button.selected {
  background: linear-gradient(135deg, #2f66f6, #8b5cf6);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(47, 102, 246, 0.3);
}

.rating-button.in-range {
  border-color: rgba(47, 102, 246, 0.5);
  background: rgba(47, 102, 246, 0.08);
  color: var(--color-blue);
}

.rating-scale-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-muted);
  font-weight: 500;
  padding: 0 0.2rem;
}

/* Bloc "Grâce à l'IA, j'aimerais..." */
.positionnement-idees {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: #ffffff;
  border-radius: 10px;
  border: 1px dashed rgba(47, 102, 246, 0.25);
}

.positionnement-idees-intro {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: #1e3a8a;
  font-size: 0.95rem;
}

.positionnement-idees .field label {
  font-size: 0.9rem;
  color: #374151;
  font-weight: 500;
}

@media (max-width: 540px) {
  .rating-scale {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .rating-button {
    padding: 0.5rem 0;
    font-size: 0.9rem;
  }
}

.field-notice {
  margin: 0;
  font-size: 0.9rem;
  color: #92400e;
  font-weight: 500;
}

@media (max-width: 540px) {
  .payment-mode-options {
    grid-template-columns: 1fr;
  }
}

.individual-participants {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px dashed rgba(47, 102, 246, 0.35);
  border-radius: 18px;
  background: rgba(47, 102, 246, 0.04);
}

.individual-participants-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.individual-participants-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #1f2937;
}

.individual-participants-header p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.individual-participants-actions {
  display: flex;
  justify-content: flex-start;
}

.individual-participants-actions .button {
  min-width: max-content;
}

.individual-participants #individualParticipantsContainer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.company-learners {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px dashed rgba(47, 102, 246, 0.35);
  border-radius: 18px;
  background: rgba(47, 102, 246, 0.04);
}

/* .coachings-attribution-header : en-tête des sections Coachings (particulier et
   entreprise). Classe distincte de .company-learners-header pour que les scripts qui
   ciblent l'en-tête du bloc Apprenants (syncCoachingOnlyForm, app.js) ne puissent plus
   attraper celui des coachings par erreur — même habillage. */
.company-learners-header,
.coachings-attribution-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.company-learners-header h3,
.coachings-attribution-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #1f2937;
}

.company-learners-header p,
.coachings-attribution-header p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.company-learners #learnersContainer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.learner-card {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  background: #ffffff;
}

.learner-card-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-flow: dense;
  gap: 1rem 1.25rem;
}

.learner-card-fields .field.full-width {
  grid-column: 1 / -1;
}

/* 01/09 (Côme) — les wrappers conformité (.individual-conformite / .learner-conformite)
   ne sont PAS des .field : la règle ci-dessus ne les couvrait pas, et le grid auto-fit
   les rangeait dans UNE colonne (« Parlez-vous français ? » et les deux autres questions
   empilées à côté de « Pays », colonnes 3-4 vides, libellés repliés sur 3 lignes).
   Pleine largeur, une question par rangée. */
.learner-card-fields .individual-conformite,
.learner-card-fields .learner-conformite {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Une question de conformité = une rangée pleine largeur : libellé à gauche (une seule
   ligne aux largeurs de bureau), boutons Oui/Non à droite. Se replie proprement
   (options sous le libellé) quand la place manque. Partagé particulier / apprenant
   entreprise / bloc CPF. */
.field.conformite-question {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.field.conformite-question > label {
  flex: 1 1 280px;
  margin: 0;
}

.field.conformite-question .yes-no-options {
  flex: 0 0 auto;
}

.learner-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.learner-card-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-text);
}

.learner-card-header button {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.learner-card-header button:hover {
  opacity: 0.7;
}

/* 01/09 (Côme) — en-têtes de section « Formation » / « Coaching » du formulaire de
   remplissage : même vocabulaire que les titres à barre dégradée du questionnaire
   (.cpf-positionnement-section h4), en plus affirmé, avec un filet de séparation
   au-dessus pour marquer nettement le passage d'une section à l'autre. */
.form-section-heading {
  grid-column: 1 / -1;
  margin: 0.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.form-section-heading h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.form-section-heading h3::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 20px;
  background: linear-gradient(180deg, #2f66f6, #8b5cf6);
  border-radius: 2px;
}

/* Première section du formulaire : pas de filet au-dessus. */
.conditional-form .form-section-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Lot 2 (Côme 01/09) — section « Coachings » : désignation de l'apprenant de chaque
   coaching. Même vocabulaire visuel que le bloc Apprenants (cadre pointillé bleu,
   cartes blanches) pour rester cohérent avec le formulaire. */
.coachings-attribution {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px dashed rgba(47, 102, 246, 0.35);
  border-radius: 18px;
  background: rgba(47, 102, 246, 0.04);
}

.coachings-attribution-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.coaching-attribution-card {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
}

.coaching-attribution-card h4 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--color-text);
}

.coaching-attribution-card .field {
  margin: 0;
}

.form-footer-inline {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}

.form-footer-inline .button {
  min-width: max-content;
}

.form-footer-inline .button.primary {
  margin-left: auto;
}

form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.25rem;
}

form fieldset:first-of-type {
  border-top: none;
  padding-top: 0;
}

form fieldset + fieldset {
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(210, 215, 229, 0.6);
}

form legend {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1f2937;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  grid-column: 1 / -1;
}

.session-summary {
  grid-column: 1 / -1;
  border-radius: 18px;
  border: 1px dashed rgba(47, 102, 246, 0.35);
  background: rgba(47, 102, 246, 0.07);
  padding: 1.75rem;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.session-summary strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  color: var(--color-blue);
}

.session-summary p {
  margin: 0.25rem 0;
}

/* === MODE CPF RÉTROACTIF === */
.cpf-retroactif-summary {
  text-align: center;
}

.cpf-retroactif-badge {
  display: inline-block;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  margin-bottom: 0.75rem;
  border: 1px solid #f59e0b;
}

.cpf-retroactif-summary strong {
  display: block;
  color: var(--color-blue);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.cpf-retroactif-info {
  font-size: 0.92rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-top: 0.5rem;
}

.muted {
  color: var(--color-muted);
}

.checkbox {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: var(--color-muted);
  padding: 0.4rem 0 0;
}

.checkbox input {
  margin-top: 0.25rem;
  accent-color: var(--color-blue);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.legend-subtitle {
  margin: -0.4rem 0 0.85rem;
  font-size: 0.92rem;
  color: var(--color-muted);
  line-height: 1.55;
}

.checkbox span {
  line-height: 1.45;
}

.form-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.form-message {
  font-size: 0.95rem;
  font-weight: 600;
}

.form-message.success {
  color: #15803d;
}

.form-message.error {
  color: #dc2626;
}

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .header-content {
    align-items: flex-start;
  }

  .actions {
    width: 100%;
    justify-content: flex-start;
  }

  .content {
    padding: 2.5rem 0 3rem;
  }

  form fieldset {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .container {
    width: calc(100% - 2rem);
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .actions .button {
    width: 100%;
  }

}

/* Tutoriel Mon Compte Formation */
.mcf-tutorial {
  padding: 1rem;
}

.mcf-tutorial-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.mcf-tutorial-logo img {
  max-width: 180px;
  height: auto;
}

.mcf-tutorial-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.mcf-success-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.mcf-tutorial-header h2 {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  color: #047857;
}

.mcf-lead {
  font-size: 1.1rem;
  color: var(--color-muted);
  margin: 0;
}

.mcf-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

.mcf-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.mcf-step-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-blue);
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mcf-step-content {
  flex: 1;
}

.mcf-step-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: #1f2937;
}

.mcf-step-content p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.mcf-button {
  margin-top: 0.75rem;
}

.mcf-footer {
  text-align: center;
  padding: 1.5rem;
  background: rgba(16, 185, 129, 0.06);
  border-radius: 16px;
  border: 1px dashed rgba(16, 185, 129, 0.3);
}

.mcf-footer p {
  margin: 0 0 0.5rem;
  color: #1f2937;
}

.mcf-footer p:last-child {
  margin-bottom: 0;
}

.mcf-contact {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.mcf-contact a {
  color: var(--color-blue);
  text-decoration: underline;
}

.mcf-tuto-link {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: underline;
}

.mcf-tuto-link:hover {
  text-decoration: none;
}

/* Nouveaux styles MCF - FranceConnect+ */
.mcf-email-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1e40af;
}

.mcf-email-icon {
  font-size: 1.1rem;
}

.mcf-important-notice {
  padding: 0.875rem 1rem;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #92400e;
  line-height: 1.5;
}

.mcf-options-list {
  margin: 0.75rem 0 1rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.mcf-options-list li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #374151;
}

.mcf-help-box {
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  text-align: center;
}

.mcf-help-box p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: #475569;
}

.mcf-help-button {
  font-size: 0.9rem !important;
}

.mcf-substeps {
  margin: 0.75rem 0;
  padding-left: 1.25rem;
}

.mcf-substeps li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.5;
}

.mcf-presentiel-hint {
  font-size: 0.85rem;
  color: #6b7280;
  font-style: italic;
}

.mcf-validation-notice {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(16, 185, 129, 0.08);
  border-radius: 6px;
  font-size: 0.9rem;
  color: #047857;
}

/* Encart « règlement du coaching », posé SOUS le tutoriel Mon Compte Formation
   (parcours CPF + coaching). Reprend la carte du pied de tutoriel, en bleu pour
   la distinguer du bloc « inscription enregistrée » qui la précède. */
.coaching-reglement {
  margin-top: 1.25rem;
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.3);
}

.coaching-reglement h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: #1f2937;
}

.mcf-footer-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

/* Modal FranceConnect+ */
.fc-modal {
  z-index: 1001;
}

.fc-modal-content {
  max-width: 1000px !important;
  width: 95% !important;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
}

.fc-modal-header {
  padding: 1.5rem 2rem 1rem;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}

.fc-modal-header h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  color: #1f2937;
}

.fc-modal-header p {
  margin: 0 0 0.75rem;
  color: #6b7280;
  font-size: 0.95rem;
}

.fc-intro-options {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

.fc-intro-options li {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.fc-intro-options li:last-child {
  border-bottom: none;
}

.fc-intro-options strong {
  color: #1f2937;
}

.fc-tabs {
  display: flex;
  border-bottom: 2px solid #e5e7eb;
  background: #f9fafb;
}

.fc-tab-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

.fc-tab-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.fc-tab-desc {
  font-size: 0.8rem;
  font-weight: 400;
  color: #9ca3af;
  margin-top: 0.15rem;
}

.fc-tab-button.active .fc-tab-desc {
  color: #6b7280;
}

.fc-tab-button:hover {
  color: #374151;
  background: rgba(0, 0, 0, 0.02);
}

.fc-tab-button.active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
  background: white;
}

.fc-tab-icon {
  font-size: 1.25rem;
}

.fc-tab-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: #10b981;
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fc-tab-contents {
  padding: 1.5rem 2rem;
}

.fc-tab-content {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fc-prereq {
  padding: 1rem;
  background: #eff6ff;
  border-radius: 10px;
  margin-bottom: 1.25rem;
}

.fc-prereq h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: #1e40af;
}

.fc-prereq ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.fc-prereq li {
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  color: #374151;
}

.fc-video-placeholder {
  margin-bottom: 1.5rem;
}

.fc-video-label {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fc-video-embed {
  aspect-ratio: 16 / 9;
  background: #1f2937;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fc-video-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.fc-video-coming-soon {
  color: #9ca3af;
  font-size: 0.95rem;
}

.fc-video-credit {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: #9ca3af;
  font-style: italic;
  text-align: right;
}

.fc-steps-detail {
  margin-bottom: 1.25rem;
}

.fc-steps-detail h4 {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: #1f2937;
}

.fc-step-detail {
  display: flex;
  gap: 0.875rem;
  margin-bottom: 1rem;
}

.fc-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-blue);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-step-text {
  flex: 1;
}

.fc-step-text strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  color: #1f2937;
}

.fc-step-text p {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
  line-height: 1.5;
}

.fc-alternative,
.fc-cni-check {
  padding: 0.875rem 1rem;
  background: #fef3c7;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #92400e;
  line-height: 1.5;
}

.fc-alternative strong,
.fc-cni-check strong {
  color: #78350f;
}

.fc-cni-check p {
  margin: 0.5rem 0 0;
}

.fc-modal-footer {
  padding: 1rem 2rem 1.5rem;
  text-align: center;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* Responsive pour le modal FranceConnect+ */
@media (max-width: 600px) {
  .fc-modal-content {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .fc-tab-button {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    font-size: 0.8rem;
  }

  .fc-tab-icon {
    font-size: 1.5rem;
  }

  .fc-tab-contents {
    padding: 1.25rem 1rem;
  }

  .fc-modal-header {
    padding: 1.25rem 1rem 1rem;
  }

  .fc-modal-header h2 {
    font-size: 1.25rem;
  }
}

/* Messages UX - Règlement B2B */
.payment-urgency-notice {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 12px;
  text-align: center;
}

.urgency-message {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #92400e;
  line-height: 1.5;
}

.assistance-link {
  margin-top: 1.25rem;
  text-align: center;
}

.assistance-link p {
  margin: 0;
  font-size: 0.85rem;
}

.assistance-link a {
  color: var(--color-blue);
  text-decoration: underline;
}

/* Question Oui/Non pour diplôme CPF */
.diploma-question {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.question-label {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.95rem;
}

.yes-no-options {
  display: flex;
  gap: 1rem;
}

.yes-no-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #ffffff;
  font-weight: 500;
}

.yes-no-option:hover {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.03);
}

.yes-no-option input[type="radio"] {
  accent-color: var(--color-blue);
  width: 18px;
  height: 18px;
}

.yes-no-option input[type="radio"]:checked + span {
  color: var(--color-blue);
  font-weight: 600;
}

.yes-no-option:has(input[type="radio"]:checked) {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.06);
}

/* Boutons Oui/Non compacts (conformité) */
.yes-no-compact {
  gap: 0.5rem;
}

.yes-no-compact .yes-no-option {
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  min-width: 0;
}

/* Radio list (niveau IA) */
.radio-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.radio-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #ffffff;
  font-size: 0.95rem;
  line-height: 1.4;
}

.radio-list-item:hover {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.03);
}

.radio-list-item input[type="radio"] {
  accent-color: var(--color-blue);
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.radio-list-item:has(input[type="radio"]:checked) {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.06);
}

.radio-list-item input[type="radio"]:checked + span {
  color: var(--color-blue);
  font-weight: 600;
}

.yes-no-compact .yes-no-option input[type="radio"] {
  width: 15px;
  height: 15px;
}

/* Textarea adaptation handicap - non redimensionnable */
#cpfHandicapAdaptation,
#individualHandicapAdaptation,
[id^="learnerHandicapAdaptation"] {
  width: 100%;
  resize: none;
}

/* Auto-fill checkbox pour apprenant 1 (B2B) */
.autofill-option {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(16, 185, 129, 0.08);
  border: 1px dashed rgba(16, 185, 129, 0.4);
  border-radius: 10px;
}

.autofill-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #047857;
  font-weight: 500;
}

.autofill-checkbox input[type="checkbox"] {
  accent-color: #10b981;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.autofill-checkbox span {
  line-height: 1.4;
}

/* =====================================   MODAL - Fenêtre générique (tutoriel FranceConnect)
   ============================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: white;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}

.modal-close:hover {
  background: #f3f4f6;
  color: var(--color-text);
}

.modal-header {
  padding: 2rem 2rem 1rem;
  text-align: center;
}

.modal-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #2f66f6 0%, #1d53f0 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: white;
}

.modal-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

.modal-subtitle {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin: 0;
}

.modal-body {
  padding: 0 2rem 1.5rem;
}

.payment-total {
  text-align: center;
  font-size: 1rem;
  color: var(--color-muted);
  margin: 0 0 1.5rem;
}

.payment-total strong {
  color: var(--color-text);
  font-size: 1.25rem;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.payment-options.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.payment-option {
  display: block;
  cursor: pointer;
}

.payment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-option-content {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.payment-option:hover .payment-option-content {
  border-color: var(--color-border-strong);
  background: #fafbff;
}

.payment-option input[type="radio"]:checked + .payment-option-content {
  border-color: var(--color-blue);
  background: #f5f7ff;
  box-shadow: 0 0 0 3px rgba(47, 102, 246, 0.15);
}

.payment-option-title {
  font-weight: 600;
  color: var(--color-text);
  font-size: 1rem;
}

.payment-option-detail {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

.payment-option-fees {
  display: block;
  font-size: 0.8rem;
  color: #b45309;
  background: #fef3c7;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.5rem;
}

.payment-option-fees strong {
  color: #92400e;
}

.payment-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 1.5rem 0 0;
}

.payment-secure-note svg {
  color: #10b981;
}

.modal-footer {
  padding: 1rem 2rem 2rem;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.modal-footer .button {
  flex: 1;
}

@media (max-width: 500px) {
  .modal-content {
    border-radius: 12px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .modal-footer {
    flex-direction: column-reverse;
  }
}

/* =====================================   MODAL - Paiement SEPA (B2C Particuliers)
   ============================================ */

.sepa-modal {
  max-width: 520px;
}

.sepa-icon {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.sepa-info-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.sepa-info-box h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #166534;
  margin: 0 0 0.5rem;
}

.sepa-info-text {
  font-size: 0.9rem;
  color: #15803d;
  margin: 0;
}

.sepa-echeancier {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.sepa-echeancier td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.sepa-echeancier tr:last-child td {
  border-bottom: none;
}

.echeancier-label {
  color: var(--color-text);
  font-weight: 500;
}

.echeancier-montant {
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
}

.echeancier-date {
  color: var(--color-muted);
  text-align: right;
  font-size: 0.9rem;
}

.echeancier-total {
  background: #f8fafc;
}

.echeancier-total td {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 2px solid var(--color-border);
  border-bottom: none;
}

.sepa-attestation {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.sepa-attestation.shake {
  animation: shake 0.5s ease-in-out;
  border-color: #f59e0b;
  background: #fef3c7;
}

.sepa-attestation-label {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
}

.sepa-attestation-label input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 18px;
  height: 18px;
  accent-color: var(--color-blue);
  cursor: pointer;
  flex-shrink: 0;
}

.sepa-attestation-label span {
  font-size: 0.9rem;
  color: #92400e;
  line-height: 1.4;
}

@media (max-width: 500px) {
  .sepa-echeancier td {
    padding: 0.5rem 0.25rem;
    font-size: 0.9rem;
  }

  .echeancier-date {
    font-size: 0.8rem;
  }

  .sepa-attestation-label span {
    font-size: 0.85rem;
  }
}

/* =====================================   Attestation politique de confidentialité

   ⚠️ Noms VOLONTAIREMENT neutres. Ne jamais revenir à « rgpd-* », « consent-* »,
   « cookie-* » ou « privacy-* » : les listes anti-bannières-cookies des bloqueurs
   de pub masquent ces noms en `display:none !important`. Le 04/08/2026, la case
   était invisible chez tout visiteur équipé d'un bloqueur, alors que le formulaire
   l'exigeait pour valider. Garde : scripts/test_noms_non_bloques.py
   ============================================ */

.attestation-legale {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 1rem;
  grid-column: 1 / -1;
}

/* Les attestations programme et confidentialité se suivent quand aucun coaching
   ne s'intercale. Leur marge historique créait 24 px dans un flux simple et,
   dans la grille du formulaire, 56 px avec le `gap`. Dans le formulaire, les
   éléments coaching restent présents dans le DOM même lorsqu'ils sont masqués :
   on ne peut donc pas se contenter du voisin direct. Le sélecteur ne resserre
   que si la section coaching est masquée ; dès qu'elle est applicable, ses
   marges et sa position entre les deux attestations restent intactes. */
.attestation-legale + .attestation-legale {
  margin-top: 1rem;
}

.conditional-form:has(> .coachings-attribution[style*="display: none"]) > .attestation-legale:has(~ .attestation-legale) {
  margin-bottom: 0;
}

.conditional-form:has(> .coachings-attribution[style*="display: none"]) > .attestation-legale ~ .attestation-legale {
  margin-top: 0;
}

.attestation-legale-label {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
}

.attestation-legale-label input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 18px;
  height: 18px;
  accent-color: var(--color-blue);
  cursor: pointer;
  flex-shrink: 0;
}

.attestation-legale-label span {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.5;
}

.attestation-legale-label .lien-document-legal {
  color: var(--color-blue);
  text-decoration: underline;
  font-weight: 500;
}

.attestation-legale-label .lien-document-legal:hover {
  color: #1d53f0;
}

.attestation-legale.error {
  border-color: #ef4444;
  background: #fef2f2;
  animation: shake 0.5s ease-in-out;
}

.attestation-legale.error .attestation-legale-label span {
  color: #991b1b;
}

@media (max-width: 500px) {
  .attestation-legale-label span {
    font-size: 0.85rem;
  }
}

/* =====================================   LIEU DE SESSION + MODAL
   ============================================ */

.session-location {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.6rem;
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: #555;
}

.session-trainer {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.22);
  color: #0f766e;
  border-radius: 999px;
  padding: 0.25rem 0.7rem 0.25rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
}

.session-trainer-icon {
  flex-shrink: 0;
}

.session-location-label {
  font-weight: 500;
  color: #333;
}

.session-location-btn {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: #2563eb;
  border-radius: 999px;
  padding: 0.25rem 0.7rem 0.25rem 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.session-location-btn:hover,
.session-location-btn:focus-visible {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(37, 99, 235, 0.45);
  color: #1d4ed8;
  outline: none;
}

.session-location-icon {
  flex-shrink: 0;
}

.location-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  animation: location-fade-in 0.2s ease;
}

@keyframes location-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.location-modal {
  background: #fff;
  border-radius: 18px;
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: location-slide-up 0.25s ease;
}

@keyframes location-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.location-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.location-modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #000;
}

.location-modal-title {
  margin: 0 0 0.6rem 0;
  font-size: 1.55rem;
  color: #1a1a1a;
  padding-right: 2.5rem;
}

.location-modal-address {
  margin: 0 0 0.75rem 0;
  color: #444;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.location-modal-maps {
  color: #2563eb;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.location-modal-maps:hover {
  text-decoration: underline;
}

.location-modal-description {
  margin: 0 0 1.25rem 0;
  color: #666;
  font-size: 0.95rem;
  font-style: italic;
}

.location-modal-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.location-modal-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: #f0f0f0;
}

@media (max-width: 520px) {
  .location-modal {
    padding: 1.5rem 1rem;
  }
  .location-modal-photos {
    grid-template-columns: 1fr;
  }
  .location-modal-photo {
    height: 180px;
  }
}

/* ====================   PANIER COACHING
   =========================== */

.panel.coaching-cart {
  background: radial-gradient(
      circle at -10% -10%,
      rgba(47, 102, 246, 0.05),
      rgba(255, 255, 255, 0) 55%
    ),
    #ffffff;
  max-width: 560px;
  margin: 0 auto;
}

.coaching-desc {
  color: var(--color-text-secondary, #5a6375);
  font-size: 0.95rem;
  line-height: 1.6;
}

.coaching-selector {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
}

.coaching-selector button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong, rgba(210, 215, 229, 0.8));
  background: #ffffff;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  color: var(--color-blue, #2f66f6);
}

.coaching-selector button:hover:not(:disabled) {
  background: rgba(47, 102, 246, 0.07);
  border-color: var(--color-blue, #2f66f6);
}

.coaching-selector button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.coaching-selector #coachingCount {
  font-size: 1.5rem;
  font-weight: 700;
  min-width: 2rem;
  text-align: center;
  color: var(--color-text, #1a1d23);
}

.coaching-total {
  font-size: 1.05rem;
  color: var(--color-text, #1a1d23);
}

.coaching-total strong {
  color: var(--color-blue, #2f66f6);
  font-weight: 700;
}

.coaching-summary {
  margin: 0.5rem 0 0.25rem;
  border: 1px solid var(--color-border, rgba(210, 215, 229, 0.6));
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.6);
}

.coaching-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1rem;
  color: var(--color-text-secondary, #5a6375);
  padding: 0.3rem 0;
}

.coaching-summary-row strong {
  color: var(--color-text, #1a1d23);
  font-weight: 600;
}

.coaching-summary-qty {
  color: var(--color-blue, #2f66f6);
  font-weight: 600;
}

.coaching-summary-total {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border, rgba(210, 215, 229, 0.6));
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text, #1a1d23);
}

.coaching-summary-total strong {
  color: var(--color-blue, #2f66f6);
  font-weight: 700;
}

.session-price-coaching {
  margin: 0.2rem 0 0;
  color: #475569;
  font-weight: 600;
  font-size: 1rem;
}

.session-price-total {
  margin: 0.35rem 0 0;
  color: #0f172a;
  font-weight: 700;
  font-size: 1.15rem;
}

.coaching-actions {
  display: flex;
  gap: 0.9rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

.coaching-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--color-border-strong, rgba(210, 215, 229, 0.8));
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  color: var(--color-blue, #2f66f6);
  transition: background-color 0.15s ease;
}

.coaching-actions .btn-secondary:hover {
  background: rgba(47, 102, 246, 0.07);
}

.coaching-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: var(--color-blue, #2f66f6);
  color: #ffffff;
  box-shadow: 0 18px 35px rgba(47, 102, 246, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.coaching-actions .btn-primary:hover {
  transform: translateY(-1px);
  background: var(--color-blue-strong, #1a4fd8);
}

/* ====================   FORMULAIRE INTRA (session dédiée entreprise)
   =========================== */

.intra-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Grille des champs entreprise — même gabarit que .learner-card-fields/.conditional-form. */
.intra-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-flow: dense;
  gap: 1rem 1.25rem;
}

.intra-fields-grid .field.full-width {
  grid-column: 1 / -1;
}

/* Sélecteur de lieu — cartes empilées avec titre + sous-texte, même langage visuel que
   .client-type-option/.company-mode-option (radio masqué + label sœur mise en valeur). */
.intra-lieu-selector {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.intra-lieu-option {
  cursor: pointer;
}

.intra-lieu-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.intra-lieu-label {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.intra-lieu-option input:checked + .intra-lieu-label {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.04);
}

.intra-lieu-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.intra-lieu-text strong {
  font-weight: 600;
  font-size: 0.98rem;
  color: #1f2937;
}

.intra-lieu-option input:checked + .intra-lieu-label .intra-lieu-text strong {
  color: var(--color-blue);
}

.intra-lieu-text small {
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.45;
}

/* Sélecteur de blocs — réutilise .coaching-selector (boutons +/- ronds, compteur central) ;
   ces deux règles ne font que porter le même style sur l'id #intraBlocsCount. */
.intra-blocs-selector #intraBlocsCount {
  font-size: 1.5rem;
  font-weight: 700;
  min-width: 2rem;
  text-align: center;
  color: var(--color-text, #1a1d23);
}

.intra-blocs-label {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-blue, #2f66f6);
}

/* ====================   SÉLECTEUR DE PÉRIODES (periodPicker.js) — calendrier mensuel multi-fenêtres
   =========================== */

.period-picker {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  min-width: 0;
}

#intraPeriodPickerContainer {
  width: 100%;
  min-width: 0;
}

/* Chips des fenêtres validées — pastilles pleines, langage visuel des tags existants. */
.period-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.period-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  background: rgba(47, 102, 246, 0.08);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-blue-strong);
}

.period-picker-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border: none;
  border-radius: 50%;
  background: rgba(47, 102, 246, 0.14);
  color: var(--color-blue-strong);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.period-picker-chip-remove:hover {
  background: rgba(220, 38, 38, 0.16);
  color: #dc2626;
}

/* Calendrier */
.period-picker-calendar {
  background: #ffffff;
  border: 1.5px solid var(--color-border);
  border-radius: 16px;
  padding: 1.1rem 1.25rem 1.35rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.period-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.period-picker-month {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  text-transform: capitalize;
}

.period-picker-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: #ffffff;
  color: var(--color-blue);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.period-picker-nav:hover:not(:disabled) {
  background: rgba(47, 102, 246, 0.08);
}

.period-picker-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.period-picker-weekdays,
.period-picker-grid {
  display: grid;
  /* minmax(0, 1fr) et non 1fr : avec `1fr` (= minmax(auto, 1fr)), Safari calcule la largeur
     minimale d'une cellule `aspect-ratio: 1/1` à partir de sa hauteur et fait déborder le
     calendrier du cadre (Côme, 16/09/2026, capture à 20 h 10). Chrome ne montre rien : c'est le
     même piège de grille que le bloc anti-robot (grid-column) et le sélecteur de paiement. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
  width: 100%;
  min-width: 0;
}

.period-picker-weekdays {
  margin-bottom: 0.4rem;
}

.period-picker-weekdays span {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
}

.period-picker-cell {
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
}

.period-picker-cell-empty {
  visibility: hidden;
}

.period-picker-day {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Contexte d'empilement propre : la bande ::before (z-index -1) reste sous le chiffre
     sans passer sous le calendrier. */
  isolation: isolate;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  background: #ffffff;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.period-picker-day:hover:not(:disabled) {
  border-color: var(--color-blue);
  background: rgba(47, 102, 246, 0.06);
}

/* Jours passés / avant minDate : grisés, non cliquables (attribut disabled natif + style). */
.period-picker-day:disabled,
.period-picker-day.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #f3f4f8;
  color: var(--color-muted);
  border-color: var(--color-border);
}

/* Aujourd'hui : simple repère (point), quel que soit l'état de sélection. */
.period-picker-day.is-today::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* ---- La plage se lit comme UNE bande continue (16/09/2026, demande de Côme) ----
   Chaque jour couvert peint, derrière son chiffre, une bande qui déborde d'un
   demi-espacement de grille (0.15rem, la grille en laisse 0.3rem) de chaque côté pour
   rejoindre exactement celle du voisin — pas plus, sinon les deux transparences se
   superposent dans l'interstice et dessinent une couture plus sombre ; les
   cases de début et de fin sont pleines et la bande ne part que de leur bord. `.is-preview`
   est la même bande, plus pâle, pendant le survol quand un début est posé. */
.period-picker-day.is-selected,
.period-picker-day.is-preview {
  background: transparent;
  border-color: transparent;
  color: var(--color-blue-strong);
}

.period-picker-day.is-selected::before,
.period-picker-day.is-preview::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -0.15rem;
  right: -0.15rem;
  background: rgba(47, 102, 246, 0.14);
}

.period-picker-day.is-preview::before {
  background: rgba(47, 102, 246, 0.08);
}

/* En bord de ligne, la bande s'arrête au bord de la grille (arrondi côté extérieur). */
.period-picker-day.is-selected:nth-child(7n + 1)::before,
.period-picker-day.is-preview:nth-child(7n + 1)::before {
  left: 0;
  border-radius: 10px 0 0 10px;
}

.period-picker-day.is-selected:nth-child(7n)::before,
.period-picker-day.is-preview:nth-child(7n)::before {
  right: 0;
  border-radius: 0 10px 10px 0;
}

/* Début et fin : la bande ne remplit que l'espacement vers l'intérieur de la plage
   (un jour seul, début = fin, n'a donc aucune bande). */
.period-picker-day.is-selected.is-range-start::before,
.period-picker-day.is-preview.is-range-start::before {
  left: 100%;
  border-radius: 0;
}

.period-picker-day.is-selected.is-range-end::before,
.period-picker-day.is-preview.is-range-end::before {
  right: 100%;
  border-radius: 0;
}

.period-picker-day.is-selected.is-range-start,
.period-picker-day.is-selected.is-range-end,
.period-picker-day.is-selected.is-range-start:hover,
.period-picker-day.is-selected.is-range-end:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #ffffff;
}

/* Fin prévisualisée (survol) : contour seulement, elle n'est pas encore posée. */
.period-picker-day.is-preview.is-range-end,
.period-picker-day.is-preview.is-range-end:hover {
  background: #ffffff;
  border-color: var(--color-blue);
  color: var(--color-blue-strong);
}

/* Sélection en cours : début posé, fin pas encore choisie — distinct des fenêtres validées. */
.period-picker-day.is-pending,
.period-picker-day.is-pending:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(47, 102, 246, 0.22);
}

.period-picker-instructions {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Début posé : la consigne « cliquez maintenant la date de fin » prend le relais, en bleu. */
.period-picker-instructions.is-pending {
  color: var(--color-blue-strong);
  font-weight: 600;
}

/* Étape « Période souhaitée » du formulaire intra (index.html / app.js) */
/* La phrase de la période souhaitée (Côme, 20/09/2026) : ce n'est plus un chapeau à part,
   c'est une aide de l'écran (`.field-hint`, comme « Chaque bloc représente 2 jours de
   formation. »), pleine largeur, précédée de ⚠️. Seul l'écart avec le calendrier est ajouté. */
.intra-periodes-avertissement {
  margin: 0.25rem 0 1rem;
}

.intra-periodes-avertissement strong {
  color: var(--color-text);
}

/* Compteur sous le calendrier : « 1 période sélectionnée : du 3 au 21 novembre » —
   même registre que « 1 × 2 jours — total 7 900 € HT » (.intra-blocs-label). */
.intra-periodes-compteur {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-blue, #2f66f6);
}

.intra-periodes-compteur.is-vide {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-muted);
}


/* =====================================================   MODAL DE RÈGLEMENT QONTO (bascule du 03/08/2026)
   Depuis le 11/08/2026 il n'y a plus de CHOIX de rail — donc plus de
   cartes cliquables, seulement l'énoncé du seul rail ouvert. Les deux
   options radio et leurs états (:hover, :checked) ont disparu avec elles.
   ============================================================ */
.qonto-rail {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin: 0 0 1rem;
}

.qonto-echeances-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0.5rem 0 0.35rem;
}

.qonto-echeances-input {
  width: 5.5rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.qonto-echeances-input:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(47, 102, 246, 0.15);
}

.qonto-apercu {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0.6rem 0 0;
  min-height: 2.5em;
}


/* V2 (01/09) — choix du nombre de prélèvements (pages de règlement) */
.qonto-echeances-choix { display: flex; gap: 12px; margin: 6px 0 4px; }
.qonto-echeances-choix .qonto-choix { flex: 1; display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.qonto-echeances-choix .qonto-choix:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
.qonto-echeances-choix input { margin-top: 3px; }

/* =====================================================   V2 LOTS 3-4 (01/09/2026) — UN PAIEMENT PAR OFFRE
   L'écran Récapitulatif (une carte par offre, totaux) et les pages
   « Règlement n sur N » qui remplacent la modale Qonto.
   ============================================================ */
.recap-view,
.reglement-view {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 0 24px;
}

.recap-view h2,
.reglement-view h2 {
  margin: 0.25rem 0 0.75rem;
}

.recap-bloc {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.recap-bloc h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.recap-bloc p {
  margin: 0.15rem 0;
  font-size: 0.92rem;
  color: var(--color-muted);
}

.recap-bloc .recap-apprenants {
  color: var(--color-text);
}

.recap-offres {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.recap-offre-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 16px;
}

.recap-offre-num {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue);
}

.recap-offre-titre {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

.recap-offre-detail,
.recap-offre-note {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.recap-offre-montant {
  margin: 0.35rem 0 0;
  font-weight: 700;
  color: var(--color-text);
}

.recap-totaux {
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  margin-bottom: 18px;
}

.recap-totaux p {
  margin: 0.2rem 0;
  font-size: 0.92rem;
  color: var(--color-muted);
}

.recap-totaux .recap-total-general {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

.recap-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* Pages « Règlement n sur N — offre — montant » */
.reglement-etape {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue);
}

.reglement-view h2 {
  margin: 0.2rem 0 0.2rem;
  font-size: 1.25rem;
}

.reglement-montant {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.reglement-mandat-note {
  font-size: 0.88rem;
  color: var(--color-muted);
  margin: 0.75rem 0 1rem;
}

.reglement-continuer {
  margin: 0 0 0.75rem;
}

/* Liens discrets : OPCO / facture sous le bouton, retour au prélèvement
   au-dessus du devis. Gris, plus petits,
   soulignés au survol seulement. */
.reglement-liens-alternatifs,
.devis-retour-prelevement {
  font-size: 0.85rem;
  margin: 0.4rem 0 0;
}

.reglement-liens-alternatifs a,
.devis-retour-prelevement a {
  color: var(--color-muted);
  text-decoration: none;
}

.reglement-liens-alternatifs a:hover,
.devis-retour-prelevement a:hover {
  text-decoration: underline;
  color: var(--color-text);
}

.devis-retour-prelevement {
  padding: 8px 0 4px;
}

/* Requalification en cours (appel DELIV'IA) : les liens restent visibles mais
   inertes, pour qu'un second clic ne double pas l'appel. */
.reglement-liens-alternatifs.est-occupe a,
.devis-retour-prelevement.est-occupe a {
  pointer-events: none;
  opacity: 0.55;
}

/* Refus de requalification : le motif se lit DANS la page, sous les liens — jamais
   dans un bandeau flottant qui survivrait à l'écran suivant. */
.reglement-erreur {
  display: block;
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #b91c1c;
}

.reglement-erreur[hidden] {
  display: none;
}

/* Écran final : le bilan des règlements posés, une ligne par offre */
.reglements-recap-titre {
  margin: 1.25rem 0 0.4rem;
  font-size: 1rem;
}

.reglements-recap {
  margin: 0 0 0.75rem;
  padding-left: 1.2rem;
}

.reglements-recap li {
  margin: 0.25rem 0;
  font-size: 0.92rem;
  color: var(--color-text);
}

/* Récapitulatif unique et règlement 10/09 : même grille, états réels, sans déplacement. */
#registrationForm:has(#step2.active) > fieldset:has(#selectedSessionSummary) { display: none; }
#step2 { max-width: 780px; margin: 0 auto; }
#step2 > fieldset { margin-top: 4px; }
#step2 .form-footer { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
#step2 .form-footer > button { width: auto; justify-self: start; }
#step2 .form-footer > button[type="submit"] { justify-self: end; }
#step2 .form-footer .form-message { grid-column: 1 / -1; }
.recap-view, .reglement-view {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px;
  border: 1px solid #e3e7ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 32px #26365308;
}
.recap-intro, .reglement-dossier-note { color: var(--color-muted); font-size: .95rem; line-height: 1.65; }
.recap-intro { margin: 0 0 24px; }
.recap-bloc { background: #f7f9fc; padding: 20px; border: 1px solid #e8edf4; border-radius: 14px; }
.recap-bloc p { overflow-wrap: anywhere; }
/* Apercu en lecture seule de la signature du responsable, en fin de recapitulatif entreprise (Come, 20/09/2026). Le cadre
   se signe a l'etape 1 ; la capture d'ecran de preuve est prise sur le recapitulatif : le trace doit donc y figurer.
   Fond blanc et bordure : le PNG du trace est transparent, il resterait illisible sur le fond gris du bloc. */
.recap-signature { margin-top: 20px; }
.recap-signature-image { display: block; width: 100%; max-width: 640px; height: auto; margin: 8px 0 10px; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; }
.recap-offres { gap: 14px; margin: 20px 0; }
.recap-offre-card { padding: 20px; border-color: #e3e7ef; border-radius: 14px; box-shadow: none; }
.recap-offre-titre { font-size: 1rem; line-height: 1.55; }
.recap-offre-montant { font-size: 1.15rem; }
.recap-total-general { display: flex; gap: 18px; justify-content: space-between; align-items: center; border-top: 1px solid #e3e7ef; padding: 20px 2px 4px; font-size: 1rem; }
.recap-total-general strong { white-space: nowrap; font-size: 1.2rem; }
.recap-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 24px; }
.reglement-view h2 { font-size: 1.5rem; line-height: 1.4; margin: 12px 0; }
.reglement-montant { font-size: 1.35rem; margin-bottom: 18px; }
.reglement-dossier-note { padding: 14px 16px; background: #f7f9fc; border-radius: 12px; }
.reglement-corps { margin-top: 26px; }
.reglement-corps h3 { font-size: 1rem; line-height: 1.5; margin: 0 0 14px; }
.reglement-corps .qonto-echeances-choix { display: flex; gap: 12px; margin: 0 0 20px; }
.reglement-corps .qonto-choix { flex: 1; background: white; color: var(--color-text); border: 1px solid #dce3ef; border-radius: 12px; padding: 15px; box-shadow: none; }
.reglement-corps .qonto-choix[aria-pressed="true"] { border-color: var(--color-blue); background: #eff4ff; color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); }
.reglement-calendrier { padding: 20px; border: 1px solid #e3e7ef; background: #fafbfd; border-radius: 14px; margin-bottom: 22px; }
.reglement-echeances { list-style: none; margin: 0; padding: 0; }
.reglement-echeances li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #e8edf4; line-height: 1.45; }
.reglement-echeances strong { white-space: nowrap; }
.reglement-calendrier-note, .reglement-mandat-note { font-size: .82rem; line-height: 1.6; color: #64748b; margin: 14px 0 0; }
.reglement-corps > .button { margin: 0 8px 8px 0; }
.reglement-corps > a.button { display: inline-flex; align-items: center; text-decoration: none; }
.reglement-corps > .button.primary { width: 100%; justify-content: center; padding: 15px 18px; border-radius: 12px; }
.reglement-corps > .button.secondary { background: #fff; border: 1px solid #dce3ef; color: #475569; box-shadow: none; padding: 12px 16px; font-size: .9rem; border-radius: 12px; }
.reglement-liens-alternatifs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 16px; }
.reglement-liens-alternatifs .button.ghost { background: none; border: none; box-shadow: none; color: #64748b; font-size: .82rem; font-weight: 500; padding: 7px 0; }
.reglement-liens-alternatifs .button.ghost:hover { color: var(--color-blue); text-decoration: underline; }
.reglement-attention { padding: 14px 16px; background: #fffbf1; border: 1px solid #f3e6c1; border-radius: 12px; line-height: 1.6; font-size: .9rem; }
.reglement-verifie { color: #126348; background: #f0fbf6; padding: 14px 16px; border-radius: 12px; }
.reglement-erreur:empty { display: none; }
.reglement-corps button:disabled { cursor: wait; opacity: .55; }
.reglement-view :is(a, button):focus-visible, .recap-view button:focus-visible { outline: 3px solid #769af0; outline-offset: 3px; }
.reglement-reprise { max-width: 900px; margin: 24px auto; padding: 18px 22px; border: 1px solid #d9e4f7; border-radius: 14px; background: #f4f8ff; line-height: 1.6; }
.reglement-reprise p { margin: 0 0 12px; }
.reglement-reprise button { margin: 4px 12px 4px 0; }
@media (max-width: 600px) {
  #step2 .form-footer { grid-template-columns: 1fr; }
  #step2 .form-footer > button { width: 100%; }
  .recap-view, .reglement-view { padding: 18px; border-radius: 15px; }
  .recap-offres { grid-template-columns: 1fr; }
  .recap-total-general { flex-wrap: wrap; }
  .reglement-view h2 { font-size: 1.2rem; }
  .reglement-echeances li { font-size: .9rem; }
  .reglement-calendrier { padding: 16px; }
  .recap-actions .button { flex: 1 1 auto; }
  .reglement-reprise { margin: 16px; padding: 16px; }
}
/* Démarrage anticipé : document distinct, lecture courte, consentements explicites. */
.demarrage-anticipe{margin:24px 0;padding:24px;border:1px solid #d9dfef;border-radius:16px;background:#f8faff;color:#24314b}
.demarrage-anticipe h3{margin:0 0 12px;font-size:20px}
.demarrage-anticipe p{font-size:14px;line-height:1.65;margin:12px 0}
.demarrage-anticipe .demarrage-information{font-size:13px;color:#52627d}
.demarrage-anticipe label{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border-top:1px solid #e1e7f1;font-size:14px;line-height:1.6;cursor:pointer}
.demarrage-anticipe input{flex:none;width:18px;height:18px;margin-top:3px;accent-color:#4f46e5}
.demarrage-anticipe .demarrage-erreur{color:#b91c1c}
.demarrage-anticipe ol{padding-left:24px;font-size:14px;line-height:1.65}
.demarrage-anticipe li{margin:12px 0}
.demarrage-anticipe .demarrage-signature{display:block;width:100%;max-width:650px;height:auto;aspect-ratio:650/180;background:#fff;border:1px dashed #7b8daf;border-radius:8px;touch-action:none;cursor:crosshair}
.demarrage-anticipe .demarrage-signature:focus{outline:2px solid #4f46e5;outline-offset:3px}
.demarrage-anticipe button{margin-top:8px;padding:6px 10px;border:1px solid #ccd5e5;background:#fff;border-radius:6px;cursor:pointer}
@media(max-width:600px){.demarrage-anticipe{padding:18px}}
/* ─────────────────────────────────────────────────────────────────────────────
   SIGNATURE MANUSCRITE DU CANDIDAT (bas du formulaire d'inscription)

   Tanguy, 17/09/2026 : « comme la signature électronique sur Qualiobee, en bas du form ».
   Côme : « quelque chose de propre, que cela paraisse officiel ». D'où un bloc encadré, une
   mention de certification lisible, et une ligne de signature nommée — la mise en page d'un
   bas de contrat, pas d'un champ de formulaire de plus.

   ⚠️ Comme pour la case de politique de confidentialité (voir index.html), les noms de classes
   restent NEUTRES : aucun « rgpd- », « consent- », « cookie- » ni « privacy- », que les listes
   anti-bannières embarquées dans les bloqueurs de pub masquent en display:none !important.
   Garde : scripts/test_noms_non_bloques.py
   ───────────────────────────────────────────────────────────────────────────── */

/* Le formulaire particulier est une GRILLE (`.conditional-form.active`,
   `repeat(auto-fit, minmax(240px, 1fr))`), et sa seule regle de pleine largeur est
   `.conditional-form .field.full-width` — elle EXIGE la classe `field`. Un simple
   `class="full-width"` n'y produit donc rien : le 17/09/2026 le cadre de signature tenait
   247 px dans un formulaire de 1048, coince dans une colonne. Meme parti que
   `.attestation-legale` juste au-dessus : une regle a soi. `grid-column` est ignore hors
   grille, donc la meme classe sert aussi a l'emplacement entreprise, qui n'est pas dans une
   grille. Ne pas remplacer par la classe `field` : elle traine toute la mise en forme des
   champs de saisie. */
.signature-emplacement {
  grid-column: 1 / -1;
}

.signature-bloc {
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: #fbfcfe;
  padding: 1.1rem 1.25rem 0.9rem;
  margin: 1.5rem 0 0.25rem;
}

.signature-bloc.est-signee {
  border-color: #16a34a;
  background: #f6fdf8;
}

.signature-bloc-titre {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #475569;
  padding-bottom: 0.55rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid #e2e8f0;
}

.signature-bloc-mention {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #334155;
  margin: 0 0 0.95rem;
}

.signature-bloc-lieu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: #334155;
  margin-bottom: 0.7rem;
}

.signature-bloc-lieu label {
  margin: 0;
  font-weight: 600;
}

.signature-bloc-lieu input {
  width: 11rem;
  max-width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.92rem;
}

.signature-bloc-le { color: #475569; }

.signature-bloc-cadre {
  position: relative;
  border: 1.5px dashed #b9c2d0;
  border-radius: 8px;
  background: #fff;
}

.signature-bloc.est-signee .signature-bloc-cadre {
  border-style: solid;
  border-color: #bbf7d0;
}

/* `touch-action: none` est indispensable : sans lui, le doigt fait défiler la page
   au lieu de tracer, et la signature est impossible sur téléphone. */
.signature-bloc-cadre canvas {
  display: block;
  width: 100%;
  height: 150px;
  border-radius: 8px;
  touch-action: none;
  cursor: crosshair;
}

.signature-bloc-indice {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #94a3b8;
  font-size: 0.86rem;
  pointer-events: none;
  text-align: center;
  width: 100%;
}

.signature-bloc-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: #475569;
}

.signature-bloc-nom b { color: #0f172a; }

.signature-bloc-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.signature-bloc-horodatage { color: #16a34a; font-weight: 600; }

/* Tant que rien n'est signe, l'horodatage est un `<span>` VIDE. Il ne mesure rien, mais il
   compte quand meme comme un element du flex : le `gap` de `.signature-bloc-actions` s'applique
   donc entre lui et le bouton, et pousse « Effacer » de 12 px. Invisible tant que le bouton est
   cale a droite ; flagrant des que le pied passe a la ligne (telephone etroit, nom long), ou le
   bouton se retrouve en retrait de tout le reste — mesure a 320 px le 17/09/2026. Hors du flux
   tant qu'il est vide, il ne reclame plus rien. `:empty` ne tolere aucun espace dans le span :
   garde par scripts/test_signature_alignement.py. */
.signature-bloc-horodatage:empty { display: none; }

.signature-bloc-effacer {
  background: none;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
  color: #475569;
  cursor: pointer;
}

.signature-bloc-effacer:hover { background: #f1f5f9; }

@media (max-width: 480px) {
  .signature-bloc { padding: 0.9rem 0.85rem 0.75rem; }
  .signature-bloc-lieu input { width: 100%; }
  .signature-bloc-cadre canvas { height: 170px; }
}

/* ============================================================
   CONTRAT SIGNE DANS ARD (Come, 19/09/2026)
   Bouton de relecture, barre de chargement, cadre de signature,
   fenetre « Voir le contrat ». Pense d'abord pour 390 px.
   ============================================================ */

/* --- Bouton « J'ai signe · Actualiser » : lisible, avec un etat de chargement --- */
.reglement-corps > .button.reglement-actualiser,
.contrat-outils .button.reglement-actualiser {
  display: flex;
  width: 100%;
  gap: 10px;
  margin: 10px 0 0;
  padding: 13px 16px;
  min-height: 48px;
  border-radius: 12px;
  border: 1.5px solid var(--color-blue);
  background: #eff4ff;
  color: var(--color-blue-strong);
  font-size: .95rem;
  font-weight: 700;
  box-shadow: none;
}
.button.reglement-actualiser:hover:not(:disabled) { background: #e2ebff; transform: none; }
.button.reglement-actualiser:disabled { opacity: 1; cursor: progress; background: #f4f7fd; border-color: #c9d6f5; color: #4a6fd6; }
.reglement-actualiser-icone {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  position: relative;
}
/* La pointe de la fleche, au bout de l'arc. Elle disparait pendant la rotation. */
.reglement-actualiser-icone::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -1px;
  border: 4px solid transparent;
  border-left-color: currentColor;
  transform: rotate(40deg);
}
.button.reglement-actualiser[aria-busy="true"] .reglement-actualiser-icone { animation: reglement-tourne .8s linear infinite; }
.button.reglement-actualiser[aria-busy="true"] .reglement-actualiser-icone::after { display: none; }
@keyframes reglement-tourne { to { transform: rotate(360deg); } }

/* --- Barre de chargement a trois crans --- */
.contrat-annonce { margin: 0 0 14px; color: var(--color-muted); font-size: .95rem; line-height: 1.6; min-height: 1.6em; }
.contrat-progression { margin-top: 6px; }
.contrat-barre { height: 10px; border-radius: 999px; background: #e6ecf8; overflow: hidden; }
.contrat-barre-jauge {
  height: 100%;
  width: 18%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-blue) 0%, #6f95ff 50%, var(--color-blue) 100%);
  background-size: 200% 100%;
  transition: width .8s ease;
  animation: contrat-reflet 1.6s linear infinite;
}
@keyframes contrat-reflet { to { background-position: -200% 0; } }
.contrat-etapes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.contrat-etapes li { display: flex; align-items: center; gap: 12px; color: #94a3b8; font-size: .95rem; line-height: 1.45; }
.contrat-etapes li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #d5dcea;
  background: #fff;
}
.contrat-etapes li.est-en-cours { color: var(--color-text); font-weight: 600; }
.contrat-etapes li.est-en-cours::before { border-color: var(--color-blue); border-right-color: transparent; animation: reglement-tourne .9s linear infinite; }
.contrat-etapes li.est-fait { color: #126348; }
.contrat-etapes li.est-fait::before {
  border-color: #1f9d6b;
  background: #1f9d6b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* --- Cadre de signature --- */
.contrat-outils { display: grid; gap: 10px; margin-bottom: 14px; }
.contrat-outils .button { margin: 0; }
.button.contrat-voir {
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid #dce3ef;
  background: #fff;
  color: var(--color-text);
  box-shadow: none;
  text-decoration: none;
}
.button.contrat-voir:hover { border-color: var(--color-blue); color: var(--color-blue); }
.contrat-cadre {
  display: block;
  width: 100%;
  height: min(78vh, 760px);
  min-height: 520px;
  border: 1px solid #dce3ef;
  border-radius: 14px;
  background: #fafbfd;
}
.contrat-corps > .reglement-verifie { margin: 0 0 16px; font-weight: 600; }
.contrat-corps > .button.contrat-voir { margin: 0 0 12px; }
.conclusion-contrat { margin: 16px 0; line-height: 1.6; }
.conclusion-finale { max-width: 640px; margin: 0 auto; padding: 1.5rem 0.5rem; }
.conclusion-finale .mcf-tutorial-header { margin-bottom: 1.5rem; }
.conclusion-finale .mcf-tutorial-header h2 { font-size: clamp(1.35rem, 4.8vw, 1.75rem); line-height: 1.3; }
.conclusion-finale .mcf-success-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.conclusion-finale .conclusion-contrat { padding: 0.875rem 1rem; border-radius: 12px; font-size: 0.95rem; }
.conclusion-finale .conclusion-espace { margin: 1rem 0 1.75rem; line-height: 1.6; }
.conclusion-espace-carte {
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid #dce3f1;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.025);
}
.conclusion-espace-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: #f0efff;
  color: #5942ff;
}
.conclusion-espace .conclusion-espace-titre {
  margin: 22px 0 10px;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.conclusion-espace .conclusion-espace-description {
  margin: 0;
  color: #52617a;
  font-size: 0.9rem;
  line-height: 1.65;
}
.conclusion-espace-acces {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e9edf5;
  color: #5140e8;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
}
.conclusion-espace-acces:hover { color: #3927c8; }
.conclusion-espace-acces:focus-visible { outline: 2px solid #5942ff; outline-offset: 6px; border-radius: 4px; }
.conclusion-espace-acces > span:last-child { flex-shrink: 0; font-size: 1.3rem; font-weight: 400; }
.conclusion-espace .conclusion-espace-connexion {
  margin: 18px 6px 0;
  color: #667085;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.6;
}
.conclusion-espace-connexion::before { content: "◇"; color: #8c7dff; margin-right: 8px; }
.conclusion-finale .reglements-recap { background: #f6f8fb; border-radius: 12px; padding: 1rem 1rem 1rem 2rem; }
.conclusion-finale .reglements-recap li { overflow-wrap: anywhere; line-height: 1.6; }

/* --- Fenetre « Voir le contrat » --- */
.contrat-fenetre {
  width: min(920px, 100vw - 24px);
  height: min(92vh, 1100px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: none;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.contrat-fenetre[open] { display: flex; flex-direction: column; }
.contrat-fenetre::backdrop { background: rgba(16, 24, 40, .55); }
.contrat-fenetre-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e3e7ef; }
.contrat-fenetre-tete h3 { margin: 0; font-size: 1.05rem; }
.contrat-fenetre-fermer { padding: 9px 14px; min-height: 44px; }
.contrat-fenetre-apercu { flex: 1; width: 100%; min-height: 0; border: none; background: #f1f4f9; }
.contrat-fenetre-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid #e3e7ef; }
.contrat-fenetre-pied .reglement-mandat-note { margin: 0; flex: 1 1 220px; }
.contrat-fenetre-pied .button { text-decoration: none; min-height: 48px; flex: 1 1 160px; box-shadow: none; }
.contrat-fenetre :is(a, button):focus-visible { outline: 3px solid #769af0; outline-offset: 3px; }

@media (min-width: 601px) {
  .contrat-outils { grid-template-columns: 1fr 1fr; }
  .contrat-outils .button.reglement-actualiser { margin: 0; }
  .contrat-fenetre-pied .button { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  /* Sur telephone, le cadre prend toute la largeur de la carte : chaque pixel compte pour signer. */
  .contrat-cadre { width: calc(100% + 36px); margin-inline: -18px; border-radius: 0; border-inline: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contrat-barre-jauge, .contrat-etapes li.est-en-cours::before,
  .button.reglement-actualiser[aria-busy="true"] .reglement-actualiser-icone { animation: none; }
  .contrat-barre-jauge { transition: none; }
}

/* ============================================================
   DEVIS PDF QONTO SIGNE DANS ARD (Come, 20/09/2026)
   Le vrai PDF rendu en canvas (pdf.js), puis le cadre « Bon pour accord »
   (classes signature-bloc du formulaire). Pense d'abord pour 360 et 390 px.
   ============================================================ */
.devis-pdf-view .contrat-annonce:empty { display: none; }
.devis-pdf-numero { margin: 0; font-weight: 700; color: var(--color-text); font-size: 1rem; }
.devis-pdf-view .reglement-mandat-note { margin: 4px 0 0; }
.devis-pdf-attente { margin: 10px 0 4px; }
.devis-pdf-pages { display: grid; gap: 12px; margin: 14px 0 12px; }
.devis-pdf-page {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #dce3ef;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
.devis-pdf-chargement { margin: 0; padding: 32px 12px; text-align: center; color: var(--color-muted); background: #f7f9fc; border-radius: 12px; font-size: .9rem; }
.devis-pdf-telecharger {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid #dce3ef;
  color: #475569;
  box-shadow: none;
  padding: 12px 16px;
  font-size: .9rem;
  border-radius: 12px;
}
.devis-pdf-telecharger:hover { border-color: var(--color-blue); color: var(--color-blue); }
.devis-pdf-view .signature-bloc { margin: 18px 0 0; }
.devis-pdf-view .reglement-erreur { margin: 12px 0; }
.devis-pdf-view .reglement-corps > .button.primary.devis-pdf-signer { margin: 4px 0 0; }
.devis-pdf-signe { margin: 14px 0 16px; }
.devis-pdf-signe .button:disabled { cursor: progress; opacity: .6; }
.devis-pdf-view .reglement-attention + .button.primary { margin-top: 14px; }
/* Téléphone : le devis se LIT. L'écran quitte sa carte intérieure et les pages mordent sur la marge
   du formulaire : 310 px de page à 360 px d'écran au lieu de 224 (mesuré le 21/09/2026). */
@media (max-width: 600px) {
  .recap-view.devis-pdf-view, .reglement-view.devis-pdf-view { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .devis-pdf-pages { margin-left: -24px; margin-right: -24px; }
}
@media (max-width: 480px) {
  .devis-pdf-telecharger { width: 100%; justify-content: center; }
}

/* Page Terminé du CPF (Côme, 21/09/2026) : deux étapes numérotées, dans l'ordre. */
.cpf-etape {
  max-width: 600px;
  margin: 0 auto 2rem;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: #fff;
}

.cpf-etape-titre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font-size: 1.2rem;
  color: #1f2937;
}

.cpf-etape-numero {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #047857;
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cpf-etape .mcf-steps {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .mcf-tutorial:has(.cpf-etape) {
    padding: 0.25rem 0;
  }

  .cpf-etape {
    padding: 0.75rem 0.625rem;
    margin-bottom: 1.25rem;
  }

  .cpf-etape-titre {
    font-size: 1.05rem;
    gap: 0.5rem;
  }

  .cpf-etape-numero {
    width: 30px;
    height: 30px;
  }

  .cpf-etape .mcf-step {
    gap: 0.625rem;
  }

  .cpf-etape .mcf-step-number {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
  }

  .cpf-etape .mcf-step-content h3 {
    font-size: 1rem;
  }

}
/* Même sélecteur international pour CPF, particulier, entreprise et Intra. */
@media (min-width: 769px) {
  /* Un pays et un numéro demandent deux cellules ; une seule rognait les chiffres. */
  .field:has(> .telephone-international) { grid-column: span 2; }
}
@media (max-width: 768px) {
  .field:has(> .telephone-international) { grid-column: 1 / -1; }
}
.telephone-international {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  width: 100%;
  border: 1px solid rgba(210, 215, 229, 0.8);
  border-radius: 14px;
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.telephone-international:focus-within {
  border-color: rgba(47, 102, 246, 0.6);
  box-shadow: 0 0 0 3px rgba(47, 102, 246, 0.14);
}
.telephone-international > input[type="tel"],
.telephone-international > input[type="tel"]:focus {
  min-width: 0;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 0 13px 13px 0;
  outline: none;
  background: transparent;
  box-shadow: none;
}
.telephone-pays { min-width: 0; }
.telephone-pays summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 14px;
  border-radius: 13px 0 0 13px;
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
  background: rgba(47, 102, 246, 0.025);
  transition: background 0.2s ease;
}
.telephone-pays summary::-webkit-details-marker { display: none; }
.telephone-pays summary::before {
  content: "";
  position: absolute;
  right: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--color-border);
}
.telephone-pays summary::after {
  content: "";
  flex: 0 0 7px;
  height: 7px;
  margin: -3px 0 0 auto;
  border-right: 1.5px solid var(--color-muted);
  border-bottom: 1.5px solid var(--color-muted);
  transform: rotate(45deg);
}
.telephone-pays summary:hover,
.telephone-pays[open] summary { background: rgba(47, 102, 246, 0.07); }
.telephone-pays[open] summary::after { transform: translateY(3px) rotate(225deg); }
.telephone-pays summary:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -3px; }
.telephone-pays .telephone-pays-indicatif { flex-shrink: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.telephone-pays .telephone-pays-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}
.telephone-pays-liste {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: -1px;
  width: min(320px, 100%);
  padding: 10px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
}
.telephone-pays-liste input, .telephone-pays-liste select { width: 100%; min-width: 0; }
.telephone-pays-liste input { padding: 10px 12px; border-radius: 9px; }
.telephone-pays-liste select { margin-top: 8px; height: auto; font-size: 14px; padding: 4px; border: 0; border-radius: 6px; background: white; box-shadow: none; }
.telephone-pays-liste option { padding: 9px 8px; border-radius: 5px; }
@media (max-width: 540px) {
  .telephone-international { grid-template-columns: 68px minmax(0, 1fr); }
  .telephone-international > input[type="tel"],
  .telephone-international > input[type="tel"]:focus { padding-inline: 8px; }
  .telephone-pays summary { padding: 0 8px; gap: 6px; }
  .telephone-pays .telephone-pays-nom { display: none; }
}