/* ============================================================
   MY VTC GO — RESERVATION.CSS
   Page de conversion ultra-simple : formulaire en priorité, aucun bloc narratif long, CTA toujours accessibles.
   ============================================================ */

.reservation-header { position: relative; }/* ---------- Micro-hero ---------- */
.res-hero {
  padding: calc(var(--header-h) + 24px) 0 24px;
  text-align: center;
  background: var(--surface);
  border-bottom: 1px solid var(--stroke);
}.res-hero h1 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  margin-bottom: 8px;
}.res-hero-sub {
  color: var(--text-mid);
  font-size: 0.98rem;
  margin-bottom: 18px;
}.res-hero-chips {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}.res-hero-chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-mid);
  background: var(--white);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-pill);
  padding: 7px 14px;
}.res-hero-chips svg { width: 15px; height: 15px; color: var(--accent); }/* ---------- Formulaire : section sans fioritures ---------- */
.res-form-section {
  padding: 28px 0;
}.booking-card-standalone {
  max-width: 560px;
  margin: 0 auto;
}/* ---------- CTA row (réutilisé du pattern home, redéfini ici en local) ---------- */
.hero-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}/* ---------- Comment ça marche : 3 étapes ---------- */
.res-steps {
  padding: 28px 0;
  background: var(--surface);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}.res-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 700px) {.res-steps-grid { grid-template-columns: 1fr; } }.res-step {
  text-align: center;
}.res-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 8px;
}.res-step p {
  font-size: 0.92rem;
  color: var(--text-mid);
  margin: 0;
}/* ---------- Bloc confiance : liste courte ---------- */
.res-trust {
  padding: 24px 0;
}.res-trust-list {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  list-style: none;
  padding: 0;
}
@media (max-width: 600px) {.res-trust-list { grid-template-columns: 1fr; } }.res-trust-list li {
  font-size: 0.9rem;
  color: var(--text-mid);
  padding-left: 22px;
  position: relative;
}.res-trust-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
}/* ---------- Zones principales ---------- */
.res-zones {
  padding: 20px 0 28px;
  background: var(--surface);
  border-top: 1px solid var(--stroke);
}.res-zones-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
  font-size: 0.88rem;
}.res-zones-row a {
  color: var(--text-hi);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--stroke-strong);
}.res-zones-row a span {
  font-weight: 400;
  color: var(--text-low);
}.res-zones-airports {
  color: var(--text-low);
  font-size: 0.82rem;
}/* ---------- CTA final ---------- */
.res-cta-final {
  padding: 36px 0 56px;
  text-align: center;
}.res-cta-final h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  margin-bottom: 18px;
}/* ---------- Options à cocher (services supplémentaires) ---------- */
.options-field { margin-bottom: 16px; }.options-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 8px;
  display: block;
}
/* Bouton pliable "Services supplémentaires" */
.options-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.options-toggle .options-chevron {
  width: 12px; height: 8px;
  color: var(--text-low);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.options-toggle[aria-expanded="true"] .options-chevron {
  transform: rotate(180deg);
}
.options-checkboxes[hidden] { display: none; }
.options-hint {
  font-weight: 400;
  color: var(--text-low);
  font-size: 0.78rem;
}.options-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}.option-check:last-child {
  grid-column: 1 / -1;
  width: 50%;
  margin: 0 auto;
}.option-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  padding: 9px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}.option-check:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-dim, #E8F7EF);
}.option-check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}.option-check-icon {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  display: block;
  color: var(--text-mid);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}.option-check:has(input:checked) .option-check-icon { color: var(--accent); }/* ---------- Champ message (textarea) ---------- */
.field textarea {
  font-family: inherit;
  font-size: 0.92rem;
  padding: 11px 14px;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md);
  resize: vertical;
  min-height: 70px;
}.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}/* ---------- Étape 2 : séparateur et méthode d'envoi ---------- */
.step2-divider {
  height: 1px;
  background: var(--stroke);
  margin: 4px 0 20px;
}.send-method-field { margin-bottom: 18px; }/* ---------- Transition douce entre étapes ---------- */
[data-step] { animation: stepFadeIn 0.3s ease; }
@keyframes stepFadeIn {from { opacity: 0; transform: translateY(6px); }to { opacity: 1; transform: translateY(0); }
}/* ---------- État "bloqué" du bouton d'estimation une fois le prix affiché ---------- */
[data-estimate-btn].is-locked {
  background: var(--ink);
}[data-estimate-btn].is-locked:hover { opacity: 0.92; }/* ============================================================
   CHAMP DATE + HEURE PERSONNALISÉ
   ============================================================ */
.datetime-field { position: relative; margin-bottom: 12px; }.datetime-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: 0.92rem;
  color: var(--text-low);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}.datetime-trigger:hover { border-color: var(--accent); }.datetime-trigger.has-value { color: var(--text-hi); font-weight: 600; }.datetime-icon {
  display: block;
  width: 18px; height: 18px;
  flex: 0 0 18px;
  color: var(--accent);
}/* Panneau (overlay) */
.datetime-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 50;
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.18);
  padding: 18px;
  max-height: 80vh;
  overflow-y: auto;
}
/* MOBILE : le calendrier peut être bas dans la page (après Départ/Destination).
   On réduit le padding. Pas de max-height restrictive : en mode 2 étapes le
   calendrier seul doit s'afficher en ENTIER (tout le mois jusqu'à 31). */
/* La carte laisse déborder le calendrier qui flotte au-dessus (mobile + PC)
   — sinon son overflow:hidden le couperait. */
.booking-card,
.booking-card-standalone {
  overflow: visible;
}
@media (max-width: 639px) {
  .datetime-panel {
    padding: 14px;
    max-height: none;
    overflow-y: visible;
  }
}
.datetime-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Bouton retour au calendrier (visible seulement en mode heures sur mobile) */
.datetime-slots-back {
  display: none;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 4px 2px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
  cursor: pointer;
}
/* MOBILE : affichage en 2 étapes (calendrier PUIS heures) */
/* 2 ÉTAPES sur TOUTES tailles : calendrier seul, puis heures après sélection */
.datetime-slots-col { display: none; }
.datetime-panel.show-slots .datetime-calendar-col { display: none; }
.datetime-panel.show-slots .datetime-slots-col { display: block; }
.datetime-panel.show-slots .datetime-slots-back { display: block; }
.datetime-slots-col .datetime-slots-label { display: none; }

@media (min-width: 640px) {
  /* PC : le calendrier FLOTTE par-dessus le contenu (comme mobile) → la carte
     et le hero ne bougent pas, rien ne "saute" sur la page. */
  .datetime-panel:not([hidden]) {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 270px;
    max-width: 100%;
    max-height: none;
  }
  /* PC : calendrier compact (cases resserrées, chiffres plus petits) */
  .datetime-panel .datetime-cal-grid { gap: 2px; }
  .datetime-panel .datetime-cal-day { max-height: 34px; font-size: 0.78rem; }
  .datetime-calendar-col { max-width: 100%; margin: 0 auto; width: 100%; }
  .datetime-panel .datetime-cal-weekdays { font-size: 0.62rem; }
  .datetime-panel .datetime-cal-month { font-size: 0.86rem; }
  .datetime-panel-inner {
    flex-direction: column;
    gap: 24px;
  }.datetime-calendar-col, .datetime-slots-col { flex: 1; min-width: 0; }
}/* Calendrier */
.datetime-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}.datetime-cal-month {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: capitalize;
}.datetime-cal-nav {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-mid);
}.datetime-cal-nav:hover { background: var(--surface); }.datetime-cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }.datetime-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-low);
  margin-bottom: 4px;
}.datetime-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}.datetime-cal-day {
  aspect-ratio: 1;
  max-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: none;
  font-size: 0.84rem;
  color: var(--text-hi);
  cursor: pointer;
}.datetime-cal-day:hover:not(:disabled) { background: var(--surface); }.datetime-cal-day:disabled { color: var(--text-low); opacity: 0.35; cursor: not-allowed; }.datetime-cal-day.is-empty { visibility: hidden; cursor: default; }.datetime-cal-day.is-selected { background: var(--accent); color: var(--white); font-weight: 700; }.datetime-cal-day.is-today:not(.is-selected) { border: 1.5px solid var(--accent); }/* Créneaux horaires */
.datetime-slots-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-low);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}.datetime-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}.datetime-slots-placeholder {
  grid-column: 1 / -1;
  font-size: 0.84rem;
  color: var(--text-low);
  text-align: center;
  padding: 24px 0;
}.datetime-slot {
  border: 1px solid var(--stroke);
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 8px 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-hi);
  cursor: pointer;
  text-align: center;
}.datetime-slot:hover { border-color: var(--accent); }.datetime-slot.is-selected { background: var(--accent); color: var(--white); border-color: var(--accent); }/* ============================================================
   AUTOCOMPLÉTION (vrai <input> + liste déroulante maison)
   ============================================================ */
.autocomplete-wrapper {
  position: relative;
}.autocomplete-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--white);
  border: 1.5px solid var(--stroke-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  z-index: 500;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
}.autocomplete-dropdown.open { display: block; }.autocomplete-dropdown::-webkit-scrollbar { width: 6px; }.autocomplete-dropdown::-webkit-scrollbar-thumb { background: var(--stroke-strong); border-radius: 3px; }.autocomplete-dropdown { scrollbar-width: thin; }.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-hi);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background 0.15s ease;
  line-height: 1.35;
}.autocomplete-item-icon {
  display: block;
  flex: 0 0 17px;
  width: 17px; height: 17px;
  color: var(--text-low);
  transition: color 0.15s ease;
}.autocomplete-item:hover, .autocomplete-item.active {
  background: var(--surface);
}.autocomplete-item:hover .autocomplete-item-icon, .autocomplete-item.active .autocomplete-item-icon {
  color: var(--accent);
}/* ============================================================
   BOUTON GÉOLOCALISATION (Ma position) — champ Départ
   ============================================================ */
.input-with-action {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  border: 1.5px solid var(--stroke-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  overflow: hidden;
  padding: 0;
}.input-with-action input {
  /* Départ = input standard, hérite de .field input (bordure, focus, etc.)
     comme le champ Destination. (Ancien style "sans bordure" supprimé.) */
  width: 100%;
}/* (ancien style .input-action-btn supprimé — remplacé par le style icône interne plus bas) */
@keyframes gpsPulse {0%, 100% { opacity: 1; }50% { opacity: 0.4; }
}/* ============================================================
   BLOC D'ENVOI FINAL — 2 boutons côte à côte (WhatsApp / Email)
   ============================================================ */
.send-final-block { margin-top: 8px; }.send-final-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 10px;
  text-align: center;
}.send-final-buttons {
  display: flex;
  gap: 12px;
}.send-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}.send-btn:active { transform: scale(0.98); }.send-btn svg { width: 19px; height: 19px; flex: 0 0 19px; display: block; }.send-btn-whatsapp {
  background: #25D366;
  color: var(--white);
}.send-btn-whatsapp:hover { opacity: 0.9; }.send-btn-email.is-loading { opacity: 0.6; cursor: wait; }/* ============================================================
   PASSAGERS + BAGAGES — 45% / 10% / 45%
   ============================================================ */
.pax-bags-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}.pax-bags-sep { display: none; }.pax-bags-row .field { margin-bottom: 0; }

@media (max-width: 480px) {.send-final-buttons { flex-direction: column; }
}.send-final-status {
  margin-top: 12px;
  font-size: 0.85rem;
  text-align: center;
  color: var(--accent);
  font-weight: 600;
}/* ============================================================
   BLOC ENVOI FINAL — 2 boutons côte à côte + Appeler centré
   ============================================================ */
.resa-send-block { margin-top: 10px; }.resa-send-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-hi);
  text-align: center;
  margin-bottom: 10px;
}.resa-send-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}.resa-btn-wa, .resa-btn-em {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  border-radius: var(--r-md);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
}.resa-btn-wa svg, .resa-btn-em svg {
  width: 16px; height: 16px;
  flex: 0 0 16px;
  display: block;
}.resa-btn-wa { background: #25D366; color: #fff; }.resa-btn-em { background: #1a1a1a; color: #fff; }.resa-btn-wa[hidden], .resa-btn-em[hidden] { display: none; }.resa-ou {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-low);
  flex-shrink: 0;
}.resa-send-status {
  margin-top: 10px;
  font-size: 0.84rem;
  text-align: center;
  color: var(--accent);
  font-weight: 600;
}/* Bouton Appeler centré sous les 2 boutons */
.resa-call-btn {
  display: block;
  text-align: center;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-hi);
  text-decoration: none;
}.resa-call-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---- FIX autocomplete Départ : le conteneur input+bouton (.input-with-action)
   sert aussi de .autocomplete-wrapper. Son overflow:hidden coupait le dropdown
   de suggestions (invisible). On rétablit le débordement quand les 2 classes
   coexistent, pour que les suggestions Départ s'affichent comme Destination. ---- */
.input-with-action.autocomplete-wrapper { overflow: visible; }
/* garde les coins arrondis propres malgré overflow:visible */


/* ============================================================
   OPTION C — champ Départ identique à Destination
   Le bouton géoloc interne est masqué (la géoloc se déclenche via
   le libellé "Ma position" au-dessus, rendu cliquable en JS).
   Le conteneur ne déforme plus le champ : input pleine largeur,
   même bordure/hauteur que Destination. Voir refactor-log.md.
   ============================================================ */
.input-with-action {
  display: block;
  position: relative;   /* ancre le dropdown de suggestions */
  overflow: visible;    /* laisse les suggestions s'afficher */
  border: none;
  background: transparent;
  padding: 0;
}
.input-with-action input {
  width: 100%;
  /* hérite du style standard .field input (bordure, padding, hauteur)
     -> strictement identique au champ Destination */
}

/* "Ma position" cliquable : couleur accent + soulignement discret au survol */
.geoloc-label {
  color: var(--accent) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 6px;
  transition: background 0.18s ease;
}
.geoloc-label:hover { background: var(--accent-dim, rgba(77,163,255,0.12)); }
.geoloc-label .geoloc-label-icon { width: 13px; height: 13px; flex: 0 0 13px; }


/* ============================================================
   CHAMP DÉPART — version finale (icône GPS interne + bordure)
   - conteneur = wrapper de positionnement (pas de déformation)
   - input = identique à Destination (bordure via .field input),
     avec un padding-right pour laisser la place à l'icône
   - bouton géoloc = petite icône dans le coin droit du champ
   - "Ma position" (au-dessus) ET l'icône déclenchent la géoloc
   ============================================================ */
.input-with-action {
  display: block;
  position: relative;
  overflow: visible;
  border: none;
  background: transparent;
  padding: 0;
}
.input-with-action input {
  width: 100%;
  padding-right: 42px;   /* place pour l'icône GPS */
}
.input-with-action .input-action-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  z-index: 2;
}
.input-with-action .input-action-btn:hover {
  background: var(--accent-dim, rgba(77,163,255,0.12));
}
.input-with-action .input-action-icon {
  width: 19px;
  height: 19px;
}
.input-with-action .input-action-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
/* Feedback discret quand l'email est auto-corrigé (faute de frappe domaine) */
.email-corrected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(16,124,86,0.15) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* ===== TARIF BIENVEILLANCE — champs et affichage remise ===== */
.price-reveal-detail{
  margin-top:-4px;margin-bottom:10px;
  font-size:.95rem;font-weight:600;letter-spacing:.01em;
  color:var(--accent,#0f7b6c);text-align:center;
}
.bv-hint{
  margin:6px 0 0;font-size:.85rem;line-height:1.5;opacity:.75;
}
.bv-options{display:flex;flex-direction:column;gap:10px;}
.bv-situation-group{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px;
}
.bv-situation-btn{
  padding:12px 8px;border-radius:10px;
  border:1px solid rgba(0,0,0,.14);background:#fff;
  font:inherit;font-size:.92rem;font-weight:600;color:inherit;
  cursor:pointer;text-align:center;line-height:1.25;
  transition:border-color .15s,background .15s,color .15s;
}
.bv-situation-btn:hover{border-color:rgba(0,0,0,.3);}
.bv-situation-btn.is-selected{
  background:#111;border-color:#111;color:#fff;
}
.bv-situation-btn:focus-visible{outline:2px solid var(--accent,#0f7b6c);outline-offset:2px;}
@media (max-width:420px){
  .bv-situation-group{grid-template-columns:1fr;}
}

/* ===== MISE À DISPOSITION — sélection du forfait ===== */
.mad-forfait-group{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px;
}
.mad-forfait-btn{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 6px;border-radius:10px;
  border:1px solid rgba(0,0,0,.14);background:#fff;
  font:inherit;color:inherit;cursor:pointer;text-align:center;
  transition:border-color .15s,background .15s,color .15s;
}
.mad-forfait-btn strong{font-family:var(--font-display);font-size:1.05rem;font-weight:700;}
.mad-forfait-btn span{font-size:.74rem;opacity:.7;line-height:1.3;}
.mad-forfait-btn:hover{border-color:rgba(0,0,0,.3);}
.mad-forfait-btn.is-selected{background:#111;border-color:#111;color:#fff;}
.mad-forfait-btn.is-selected span{opacity:.85;}
.mad-forfait-btn:focus-visible{outline:2px solid var(--accent,#0f7b6c);outline-offset:2px;}
.mad-hint{margin:8px 0 0;font-size:.85rem;line-height:1.5;opacity:.75;}
@media (max-width:560px){
  .mad-forfait-group{grid-template-columns:repeat(2,1fr);}
}