/* SYNAP'SCHOOL — Styles spécifiques au formulaire d'inscription
   Compléments à style.css (variables et composants génériques déjà disponibles)
   ─────────────────────────────────────────────────────────────────── */

/* ═════════ SECTION HEADER (numéro + titre) ═════════ */
.form-section__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.form-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(230, 145, 79, 0.25);
  flex-shrink: 0;
}
.form-section__head h2 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--orange);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.form-section--info .form-section__num {
  background: var(--sage-dark);
  color: #fff;
  box-shadow: 0 4px 12px rgba(101, 123, 81, 0.25);
}
.form-section--info .form-section__head h2 {
  color: var(--sage-dark);
}
.form-section--recap .form-section__num {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 4px 12px rgba(63, 129, 120, 0.25);
}
.form-section--recap .form-section__head h2 { color: var(--teal); }

.form-section__intro {
  color: var(--ink-soft);
  margin: 6px 0 18px;
  font-size: 0.95rem;
}
.form-section__note {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: italic;
}
.form-subhead {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 18px 0 12px;
  font-weight: 700;
}
.form-subhead--mt { margin-top: 22px; }

.field__hint {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-style: italic;
}

/* ═════════ MODE D'INSCRIPTION ═════════ */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 18px; /* place pour le badge « Recommandé » qui dépasse en haut */
}
/* Badge « Recommandé » sur la carte engagement annuel (même style que tarifs) */
.mode-card--annual::before {
  content: "Recommandé";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 1;
}
/* Badge « Le plus complet » sur la ligne forfait 5×/semaine —
   mêmes proportions que le badge « Recommandé » */
.forfait-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  /* En mobile : la pastille reste DANS sa ligne (pas de chevauchement
     avec la ligne précédente), sous le nom du forfait */
  .forfait-badge {
    display: block;
    width: fit-content;
    margin: 4px 0 2px;
  }
}
.mode-card {
  position: relative;
  background: #fff;
  border: 2px solid #e9e0d2;
  border-radius: 18px;
  padding: 24px 22px 22px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mode-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(44, 42, 38, 0.08);
}
.mode-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mode-card__check {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cdc2af;
  background: #fff;
  transition: all 0.2s ease;
}
.mode-card__check::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--orange);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.mode-card input:checked ~ .mode-card__check {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(230, 145, 79, 0.15);
}
.mode-card input:checked ~ .mode-card__check::after { transform: scale(1); }
.mode-card input:checked ~ * { color: inherit; }

.mode-card__title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.mode-card__sub {
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 14px;
}
.mode-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mode-card__list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.45;
}
.mode-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
}
.mode-card--annual { background: linear-gradient(135deg, #FFF8EF 0%, #FBF7F0 100%); border-color: var(--orange-soft); }
.mode-card--annual .mode-card__list li::before { background: var(--orange); }
.mode-card--annual.is-recommended::after {
  content: "Recommandé";
  position: absolute;
  top: -10px;
  left: 22px;
  background: var(--orange);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
.mode-card input:checked + .mode-card__check + .mode-card__title ~ * {
  /* placeholder pour cascade */
}

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

/* ═════════ FORFAIT — table radio élégante ═════════ */
.forfait-table {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(44, 42, 38, 0.06);
  margin-top: 8px;
}
.forfait-table__head {
  display: grid;
  grid-template-columns: 50px 1.6fr 1.4fr 1fr 1.2fr;
  background: var(--sage);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 18px;
}
.forfait-table__head span:first-child { grid-column: 2 / 3; }
.forfait-row {
  display: grid;
  grid-template-columns: 50px 1.6fr 1.4fr 1fr 1.2fr;
  align-items: center;
  padding: 18px;
  border-top: 1px solid #f3eadd;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
}
.forfait-row:first-of-type { border-top: none; }
.forfait-row:nth-child(odd) { background: #FBF7F0; }
.forfait-row:hover { background: #F5EDE0; }
.forfait-row input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.forfait-row__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cdc2af;
  position: relative;
  background: #fff;
}
.forfait-row__check::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--orange);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.forfait-row input:checked ~ .forfait-row__check {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(230, 145, 79, 0.12);
}
.forfait-row input:checked ~ .forfait-row__check::after { transform: scale(1); }
.forfait-row__name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--orange-dark);
}
.forfait-row__days, .forfait-row__hours {
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.forfait-row__price {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.forfait-row__price small {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .forfait-table__head { display: none; }
  /* Version compacte : nom, puis « jours · heures » sur une ligne,
     puis « prix · tarif horaire » sur une ligne. 3 lignes au lieu de 5. */
  .forfait-row {
    display: block;
    position: relative;
    padding: 16px 18px 16px 62px;
  }
  .forfait-row__check {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
  .forfait-row__name { display: block; margin-bottom: 2px; }
  .forfait-row__days,
  .forfait-row__hours { display: inline; font-size: 0.85rem; }
  .forfait-row__days::after { content: "\00A0·\00A0"; color: var(--ink-soft); }
  .forfait-row__price {
    display: block;
    text-align: left;
    margin-top: 4px;
    font-size: 1.05rem;
  }
  .forfait-row__price small { display: inline; margin-left: 8px; }
  .forfait-row__price small::before { content: "("; }
  .forfait-row__price small::after { content: ")"; }
}

/* ═════════ FORMULE PERSONNALISÉE ═════════ */
.custom-card {
  margin-top: 20px;
  background: #fff;
  border: 2px solid #e9e0d2;
  border-radius: 16px;
  padding: 22px;
  position: relative;
}
.custom-card__head {
  display: flex;
  align-items: flex-start; /* rond aligné sur la 1re ligne du titre, même s'il se replie */
  gap: 12px;
  cursor: pointer;
  margin-bottom: 10px;
}
.custom-card__head .custom-card__check { margin-top: 3px; }
.custom-card__head input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.custom-card__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cdc2af;
  position: relative;
  background: #fff;
  flex-shrink: 0;
}
.custom-card__check::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--orange);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.custom-card__head input:checked ~ .custom-card__check {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(230, 145, 79, 0.12);
}
.custom-card__head input:checked ~ .custom-card__check::after { transform: scale(1); }
.custom-card__head strong {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--orange-dark);
}
.custom-card__intro {
  margin: 4px 0 8px;
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 600;
}
.custom-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  font-size: 0.92rem;
}
.custom-card__list li {
  display: flex;
  align-items: flex-start; /* point calé sur la 1re ligne si le texte se replie */
  gap: 10px;
  margin-bottom: 4px;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;    /* jamais écrasé par le texte */
  margin-top: 0.5em; /* centré sur la 1re ligne de texte */
}
.dot--sage { background: var(--sage); }
.dot--orange { background: var(--orange); }
.custom-card__plafond {
  margin: 6px 0 14px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}
.custom-card__grid {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #FBF7F0;
  border-radius: 12px;
  margin-top: 12px;
}
.custom-card.is-active .custom-card__grid { display: flex; }

.day-group__label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.day-group__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.day-group--total {
  border-top: 1px dashed #e0d2bb;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.day-group--total .day-group__label { margin-bottom: 0; }
.day-group__total {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--teal);
}

.day-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border: 1.5px solid #d8cdb6;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
  transition: all 0.2s ease;
}
.day-chip:hover { border-color: var(--orange); }
/* Rendu uniforme radio/checkbox : cercle custom identique pour TOUTES les
   chips (« nombre de jours », « jours concernés », formule perso).
   Sélection = anneau blanc + cœur orange foncé, sans noir. */
.day-chip input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  transform: none;
  border: 1.5px solid #cfc4ae;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border 0.15s ease, background 0.15s ease;
}
.day-chip:has(input:checked) input {
  border: 4px solid #fff;
  background: var(--orange-dark);
}
/* Les chips placées dans un .field héritaient des styles de champ texte
   (.field input : padding 11px 14px → cercles gonflés ; .field label :
   gras 700). On neutralise pour un rendu identique aux chips du haut. */
.field .day-chip input {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1.5px solid #cfc4ae;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
}
.field .day-chip:has(input:checked) input {
  border: 4px solid #fff;
  background: var(--orange-dark);
}
.field .day-chip input:focus {
  box-shadow: none;
  outline: 0;
}
.field label.day-chip {
  font-weight: 400;
  font-size: 0.9rem;
  color: inherit;
}
.day-chip input:checked + * { font-weight: 700; }
.day-chip:has(input:checked) {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
/* Chip inactive : quota de jours atteint */
.day-chip:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}
.day-chip--long:has(input:checked) { background: var(--teal); border-color: var(--teal); }

/* ═════════ SÉANCE DÉCOUVERTE ═════════ */
.discover-card {
  margin-top: 16px;
  background: #fff;
  border: 2px solid #d6e3d5;
  border-radius: 16px;
  padding: 18px 22px;
  position: relative;
}
.discover-card__head {
  display: flex;
  align-items: flex-start; /* carré aligné sur la 1re ligne du titre */
  gap: 12px;
  cursor: pointer;
  margin-bottom: 6px;
}
.discover-card__head .discover-card__check { margin-top: 2px; }
.discover-card__head input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.discover-card__check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #c7d4c5;
  position: relative;
  background: #fff;
  flex-shrink: 0;
}
.discover-card__check::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.discover-card__head input:checked ~ .discover-card__check {
  background: var(--sage);
  border-color: var(--sage);
}
.discover-card__head input:checked ~ .discover-card__check::after { opacity: 1; }
.discover-card__head strong {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--sage-dark);
}
.discover-card__desc {
  margin: 0 0 0 34px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ═════════ ORGANISATION DES JOURNÉES (info) ═════════ */
.horaires-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 6px;
}
.horaires-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  border: 1px solid #ecdfcb;
  position: relative;
  padding-left: 38px;
}
.horaires-card__dot {
  position: absolute;
  left: 16px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.horaires-card__dot--orange { background: var(--orange); }
.horaires-card__dot--teal { background: var(--teal); }
/* Le titre du jour (strong direct) reste un bloc ; les horaires dans les
   items restent EN LIGNE avec leur libellé (« Accueil à 15h00 ») */
.horaires-card > strong { display: block; margin-bottom: 8px; color: var(--ink); }
.horaires-card li strong { display: inline; margin: 0; color: var(--ink); }
.horaires-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

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

/* ═════════ MENSUALITÉS (cartes) ═════════ */
.mensu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.mensu-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  text-align: center;
  border: 1.5px solid #ecdfcb;
}
.mensu-card__title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--orange-dark);
  margin-bottom: 2px;
}
.mensu-card small {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 10px;
}
.mensu-card__price {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--teal);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.mensu-card__price small {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-soft);
  font-style: normal;
  margin: 0;
  display: inline;
}

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

/* Section paiement masquée par défaut, visible si engagement annuel */
#section-paiement { display: none; }
#section-paiement.is-visible { display: block; }

/* Détails transport (visible si transport choisi) */
#transport-details { display: none; }
#transport-details.is-visible { display: block; margin-top: 18px; }

/* ═════════ SERVICE DE TRANSPORT ═════════ */
.transport-banner {
  background: linear-gradient(135deg, #EEF4EC 0%, #F7FAF6 100%);
  border: 1px solid var(--sage);
  color: var(--sage-dark);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  padding: 14px 18px;
  border-radius: 12px;
  margin: 12px 0 0;
}

.transport-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.transport-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 12px;
  border: 1.5px solid #ecdfcb;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.transport-row:hover { border-color: var(--orange-soft); }
.transport-row input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.transport-row__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cdc2af;
  background: #fff;
  position: relative;
}
.transport-row__check::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--orange);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.transport-row input:checked ~ .transport-row__check {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(230, 145, 79, 0.12);
}
.transport-row input:checked ~ .transport-row__check::after { transform: scale(1); }
.transport-row__title { font-weight: 700; color: var(--ink); }
.transport-row__price {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--orange-dark);
  font-size: 1rem;
}
.transport-row:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
.transport-row--featured { background: #FFF6EB; border-color: var(--orange-soft); }
.transport-row--featured .transport-row__title { color: var(--orange-dark); }

@media (max-width: 600px) {
  /* Mobile : le prix descend sous le titre au lieu de l'écraser sur le côté.
     Le titre dispose de toute la largeur → plus de retour à la ligne mot à mot. */
  .transport-row { grid-template-columns: 40px 1fr; row-gap: 2px; }
  .transport-row__check { grid-row: 1 / span 2; }
  .transport-row__title { grid-column: 2; }
  .transport-row__price { grid-column: 2; justify-self: start; font-size: 0.95rem; }
}

.transport-days {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* ═════════ RÉCAPITULATIF ═════════ */
.form-section--recap {
  background: linear-gradient(135deg, var(--cream) 0%, #FFF8EF 100%);
  border: 1.5px solid var(--orange-soft);
}
.recap-table {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(44, 42, 38, 0.06);
  margin-top: 12px;
}
.recap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 16px 22px;
  border-bottom: 1px solid #f3eadd;
}
@media (max-width: 600px) {
  /* Mobile : libellé au-dessus, valeur en dessous alignée à gauche —
     deux colonnes étroites rendaient le texte illisible */
  .recap-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
  .recap-row__label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .recap-row__value { text-align: left; }
}
/* Prix sur sa propre ligne, en orange (injecté par inscription.js) */
.recap-row__value .recap-price {
  display: block;
  margin-top: 2px;
  color: var(--orange-dark);
}
/* Montants seuls (total annuel, mensualité) : même couleur que les prix */
#recap-annuel, #recap-mensu { color: var(--orange-dark); }
.recap-row:last-child { border-bottom: none; }
.recap-row__label { color: var(--ink-soft); }
.recap-row__value {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
  text-align: right;
}
.recap-row--total {
  background: var(--orange);
  color: #fff;
}
.recap-row--total .recap-row__label {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.recap-row--total .recap-row__label small {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  margin-top: 4px;
  line-height: 1.4;
}
.recap-row--total .recap-row__value {
  color: #fff;
  font-size: 1.5rem;
  align-self: center;
}

/* ═════════ ACTIONS FINALES ═════════
   Desktop : mascotte debout à droite du bloc (rangée flex).
   Mobile : mascotte ancrée en haut à droite du bloc, pieds dans le bloc
   (~28px), corps au-dessus ; la marge haute réserve l'espace du corps. */
.actions-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
}
.actions-row .form-section--actions {
  background: linear-gradient(135deg, var(--beige) 0%, var(--cream) 100%);
  flex: 1;
  margin-bottom: 0;
}
.actions-row__mascotte {
  flex: 0 0 auto;
  height: 190px; /* taille standard des mascottes du site */
  width: auto;
  filter: drop-shadow(0 10px 18px rgba(44, 42, 38, 0.18));
  pointer-events: none;
}

@media (max-width: 720px) {
  .actions-row {
    display: block;
    position: relative;
    margin-top: 66px; /* espace réservé au corps de la mascotte */
  }
  .actions-row__mascotte {
    position: absolute;
    height: 120px;
    top: -58px; /* ~62px de pieds dans le bloc, au niveau du titre */
    right: 20px;
    z-index: 1;
  }
}

/* ═════════ RADIO ROW STACK ═════════ */
.radio-row--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ═════════ MODALITÉ DE PAIEMENT — cartes sélectionnables ═════════ */
.pay-grid {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.pay-row { grid-template-columns: 40px 1fr; }
.pay-row__sub {
  display: block;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-top: 2px;
}
/* Carte sélectionnée : même langage que l'option transport mise en avant */
.pay-row:has(input:checked) {
  background: #FFF6EB;
  border-color: var(--orange-soft);
}
.pay-row:has(input:checked) .transport-row__title { color: var(--orange-dark); }

/* ═════════ FORM-STATUS amélioré ═════════ */
.formulary-status {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.formulary-status--info {
  background: #EEF4EC;
  border-left: 4px solid var(--sage);
  color: var(--sage-dark);
}
.formulary-status--success {
  background: #E8F2EA;
  border-left: 4px solid var(--sage);
  color: var(--sage-dark);
}
.formulary-status--error {
  background: #FBE9E2;
  border-left: 4px solid #c0392b;
  color: #8a2a1f;
}