/* ==========================================================================
   Prise de rendez-vous — palette ADAPTÉE à ce thème (MAQUETTE_2019_TEST_
   AUTONOME, copie de MAQUETTE_2019). Même principe que VL_CYCLO_2024_TEST
   AUTONOME (dont ce fichier est issu) : reprendre les couleurs de marque du
   thème lui-même (assets/css/style.css) plutôt qu'une palette neutre :
     - bleu ardoise #455370 : couleur de marque du thème (texte, initiales
       des titres) -> sélections, étape active, jours disponibles ;
     - vert #25c583 : couleur des boutons d'action du thème (.btn-hero-
       primary, .eyebrow) -> boutons principaux, promos, étapes validées ;
     - #212121 pour les titres, Open Sans, boutons « pilule » arrondis.
   Palette de VL_CYCLO_2024_TEST AUTONOME gardée en commentaire plus bas.
   ========================================================================== */

:root {
    --rdv-ink: #2C3549;
    --rdv-ink-rgb: 44, 53, 73;
    --rdv-ink-2: #455370;
    --rdv-body: #455370;
    --rdv-heading: #212121;
    --rdv-border: #E1E5EC;
    --rdv-surface: #F3F5F8;
    --rdv-white: #FFFFFF;
    --rdv-muted: #7D8698;
    /* Vert promo/étapes validées : le vert d'action du thème (#25c583). */
    --rdv-ok: #25C583;
    --rdv-ok-rgb: 37, 197, 131;
    --rdv-ok-050: #E5F8EF;
    --rdv-warn: #C0392B;
    --rdv-warn-050: #FBEAE7;

    /* Bleu utilitaire (badges des prestations "véhicules spéciaux"),
       distinct du bleu ardoise de l'accent. */
    --rdv-blue: #2F6FA8;
    --rdv-blue-rgb: 47, 111, 168;
    --rdv-blue-600: #22527E;
    --rdv-blue-050: #E6EEF6;

    /* Accent : le bleu ardoise de marque du thème (#455370) — sélections,
       étape active, jours disponibles. Les boutons d'action, eux, sont
       verts comme sur le reste du thème (voir le bloc « Boutons au vert du
       thème » à la fin de ce fichier). */
    --rdv-accent: #455370;
    --rdv-accent-rgb: 69, 83, 112;
    --rdv-accent-600: #36415A;
    --rdv-accent-050: #EDF0F5;
    --rdv-accent-dark: #2C3549;

    /* Teinte chaude : total à payer, minuteur, carte "Moto". */
    --rdv-gold: #F2A93B;
    --rdv-gold-rgb: 242, 169, 59;
    --rdv-gold-600: #D08A1F;
    --rdv-gold-050: #FEF3E0;

    /* Open Sans : police du thème (assets/css/style.css), y compris pour les
       petites étiquettes (« Étape 1 sur 5 »...), comme les .eyebrow du thème,
       plutôt qu'une police à chasse fixe. */
    --rdv-font-display: "Open Sans", system-ui, sans-serif;
    --rdv-font-body: "Open Sans", system-ui, sans-serif;
    --rdv-font-mono: "Open Sans", system-ui, sans-serif;

    /* Palette VL_CYCLO_2024_TEST AUTONOME d'origine — au cas où :
       --rdv-ink: #091E3E; --rdv-ink-rgb: 9, 30, 62; --rdv-ink-2: #0F2A4D; --rdv-body: #4A5C72; --rdv-heading: #091E3E; --rdv-border: #DCEAF2; --rdv-surface: #EEF9FF; --rdv-muted: #7C8A99;
       --rdv-ok: #34AD54; --rdv-ok-rgb: 52, 173, 84; --rdv-ok-050: #E7F7EB;
       --rdv-accent: #06A3DA; --rdv-accent-rgb: 6, 163, 218; --rdv-accent-600: #057FAA; --rdv-accent-050: #EEF9FF; --rdv-accent-dark: #045C7D; */

    /* Palette VL_2026 d'origine (neutre, gris ardoise/doré) — au cas où :
       --rdv-ink: #16181B; --rdv-ink-rgb: 22, 24, 27; --rdv-ink-2: #1F2226; --rdv-body: #5B5F66; --rdv-heading: #16181B; --rdv-border: #E3E4E6; --rdv-surface: #F5F5F6; --rdv-muted: #9A9DA3;
       --rdv-ok: #17B961; --rdv-ok-rgb: 23, 185, 97; --rdv-ok-050: #E1F8EC;
       --rdv-blue: #3E7CB1; --rdv-blue-rgb: 62, 124, 177; --rdv-blue-600: #2E5F8A; --rdv-blue-050: #E7F0F7;
       --rdv-accent: #33414D; --rdv-accent-rgb: 51, 65, 77; --rdv-accent-600: #212B33; --rdv-accent-050: #E7ECEE; --rdv-accent-dark: #1B242A;
       --rdv-gold: #E8A33D; --rdv-gold-rgb: 232, 163, 61; --rdv-gold-600: #C6821F; --rdv-gold-050: #FDF3E3; */

    --r-sm: 10px;
    --r: 16px;
    --r-lg: 22px;
    --shadow-sm: 0 8px 20px -14px rgba(var(--rdv-ink-rgb), .25);
    --shadow: 0 24px 48px -20px rgba(var(--rdv-ink-rgb), .22);
    --shadow-lg: 0 40px 90px -30px rgba(var(--rdv-accent-rgb), .35);
    --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   Bannière "page-hero" (titre + fil d'Ariane) — normalement stylée par le
   style.css global de VL_2026 (jamais copié ici, ce n'est pas censé être
   une dépendance de cette seule page). Sans ce bloc, aucune marge ne
   dégageait ce titre de la nav de CE thème, qui est en position absolute/
   fixed sur desktop (≥992px, voir css/style.css) pour flotter par-dessus
   la bannière d'accueil — d'où le chevauchement. Valeurs adaptées à ce
   thème (couleurs --dark/--primary, marge calquée sur le padding déjà
   utilisé par les autres pages intérieures pour dégager cette même nav,
   voir contact.tpl : "py-5 mb-5" + "pt-lg-5 mt-lg-5").
   -------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    padding: 11rem 0 3.5rem;
    background: var(--dark, #091E3E) center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}
@media (max-width: 991.98px) {
    /* La nav de ce thème redevient position:relative sous 992px (voir
       css/style.css) : plus besoin de la marge de dégagement desktop. */
    .page-hero { padding: 3rem 0 2rem; }
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(9, 30, 62, .85) 0%, rgba(6, 163, 218, .35) 100%);
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 {
    color: #fff;
    font-family: var(--rdv-font-display);
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    font-weight: 800;
    margin-bottom: .65rem;
}
.page-hero p { color: rgba(255, 255, 255, .78); max-width: 58ch; margin: 0; }
.breadcrumb-ct {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    font-family: var(--rdv-font-mono);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 1.1rem;
}
.breadcrumb-ct a { color: rgba(255, 255, 255, .8); }
.breadcrumb-ct a:hover { color: var(--rdv-gold); }

.rdv-wrap {
    font-family: var(--rdv-font-body);
    color: var(--rdv-body);
    line-height: 1.6;
    /* background:
        radial-gradient(120% 55% at 15% 0%, var(--rdv-accent-050) 0%, transparent 60%),
        radial-gradient(100% 65% at 100% 100%, var(--rdv-ok-050) 0%, transparent 55%); */
}
.rdv-wrap h1, .rdv-wrap h2, .rdv-wrap h3 {
    font-family: var(--rdv-font-display); color: var(--rdv-heading);
    font-weight: 800; margin: 0; letter-spacing: -.01em;
}
.rdv-wrap button { font-family: inherit; }

/* --------------------------------------------------------------------------
   Structure générale : carte principale + colonne latérale
   -------------------------------------------------------------------------- */
.rdv-notice {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--rdv-accent-050); border: 1px solid #D3DAE8; border-radius: var(--r);
    padding: 14px 18px; margin-bottom: 18px; font-size: .88rem; color: var(--rdv-accent-dark);
}
.rdv-notice i { color: var(--rdv-accent); font-size: 1.1rem; margin-top: .1rem; flex: none; }
.rdv-notice strong { display: block; margin-bottom: .2rem; color: var(--rdv-heading); }

.rdv-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .rdv-layout { grid-template-columns: 1fr; } }

.rdv-shell {
    background: var(--rdv-white);
    border: 1px solid var(--rdv-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}
.rdv-shell::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--rdv-accent) 0%, var(--rdv-accent) 40%, #6B8FB0 75%, var(--rdv-ok) 100%);
}
@media (max-width: 480px) {
    .rdv-shell { border-radius: var(--r); border-left: none; border-right: none; }
}

/* --------------------------------------------------------------------------
   Fil de progression — cliquable pour revenir sur une étape déjà validée
   -------------------------------------------------------------------------- */
.rdv-steps { position: relative; display: flex; padding: 24px 32px 20px; }
.rdv-steps::before {
    content: ""; position: absolute; left: 46px; right: 46px; top: 37px; height: 2px;
    background: var(--rdv-border);
}
.rdv-steps__fill {
    position: absolute; left: 46px; top: 37px; height: 2px;
    background: linear-gradient(90deg, var(--rdv-ok), var(--rdv-accent)); width: 0%; transition: width .5s var(--ease);
}
.rdv-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; z-index: 1; }
.rdv-step__dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--rdv-font-mono); font-size: .74rem; font-weight: 700;
    background: var(--rdv-white); border: 2px solid #C7CEDB; color: var(--rdv-accent);
    transition: all .3s var(--ease);
}
.rdv-step__label { font-size: .72rem; font-weight: 700; color: var(--rdv-muted); text-align: center; transition: color .3s ease; }
.rdv-step.is-active .rdv-step__dot { background: var(--rdv-accent); border-color: var(--rdv-accent); color: #fff; transform: scale(1.1); box-shadow: 0 0 0 4px var(--rdv-accent-050); }
.rdv-step.is-active .rdv-step__label { color: var(--rdv-heading); }
.rdv-step.is-done .rdv-step__dot { background: var(--rdv-ok); border-color: var(--rdv-ok); color: #fff; }
.rdv-step.is-done .rdv-step__label { color: var(--rdv-body); }
.rdv-step.is-clickable { cursor: pointer; }
.rdv-step.is-clickable:hover .rdv-step__dot { background: var(--rdv-accent); border-color: var(--rdv-accent); color: #fff; }
.rdv-step.is-clickable:focus-visible .rdv-step__dot { outline: 2px solid var(--rdv-accent); outline-offset: 2px; }
@media (max-width: 575.98px) {
    .rdv-step__label { display: none; }
    .rdv-steps { padding: 18px 16px 14px; }
    .rdv-steps::before, .rdv-steps__fill { left: 22px; right: 22px; }
    .rdv-step__dot { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   Corps
   -------------------------------------------------------------------------- */
.rdv-body { padding: 6px 32px 28px; min-height: 400px; }
@media (max-width: 575.98px) { .rdv-body { padding: 4px 16px 22px; } }

.rdv-panel { display: none; }
.rdv-panel.is-active { display: block; animation: panelIn .4s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.rdv-panel__head { margin-bottom: 20px; }
.rdv-panel__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--rdv-font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rdv-accent-dark); background: var(--rdv-accent-050);
    padding: 4px 10px; border-radius: 999px; margin-bottom: 9px;
}
.rdv-panel h2 { font-size: 1.22rem; margin-bottom: 4px; }
.rdv-panel__sub { margin: 0; font-size: .9rem; color: var(--rdv-body); }

/* --- Étape 1 : natures --- */
.nature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .nature-grid { grid-template-columns: 1fr; } }
.nature-card {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    text-align: left; padding: 20px 18px;
    border: 1.5px solid var(--rdv-border); border-radius: var(--r);
    background: var(--rdv-white); cursor: pointer;
    transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: #C9CACD; }
.nature-card.is-selected {
    border-color: var(--rdv-accent); box-shadow: 0 0 0 3px var(--rdv-accent-050);
    background: linear-gradient(160deg, var(--rdv-accent-050) 0%, var(--rdv-white) 55%);
}
.nature-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.nature-card__icon {
    width: 52px; height: 52px; border-radius: 15px;
    display: grid; place-items: center;
    background: linear-gradient(155deg, var(--rdv-accent-050), #E2E7F0);
    color: var(--rdv-accent); font-size: 1.4rem;
    transition: all .3s var(--ease);
}
.nature-card.is-selected .nature-card__icon {
    background: linear-gradient(155deg, var(--rdv-accent), var(--rdv-accent-600));
    color: #fff; transform: scale(1.05) rotate(-4deg);
    box-shadow: 0 8px 16px -6px rgba(var(--rdv-accent-rgb), .5);
}
.nature-card__check {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rdv-border);
    display: grid; place-items: center; color: transparent; font-size: .7rem;
    transition: all .2s ease; flex: none;
}
.nature-card.is-selected .nature-card__check { background: var(--rdv-ok); border-color: var(--rdv-ok); color: #fff; }
.nature-card__name { font-family: var(--rdv-font-display); font-weight: 800; font-size: .98rem; color: var(--rdv-heading); }
.nature-card__hint { font-size: .78rem; color: var(--rdv-muted); margin: 0; }

/* Variété de couleurs sur les badges d'icône — sans ça, les 8 cartes de
   prestations restent toutes dans le même gris ardoise clair, ce qui rend
   la grille terne. Voir NATURE_COULEURS dans rendez-vous-en-ligne.js pour
   savoir quelle nature reçoit quelle teinte. */
.nature-card--or .nature-card__icon { background: linear-gradient(155deg, var(--rdv-gold-050), #F5E2C4); color: var(--rdv-gold-600); }
.nature-card--or.is-selected .nature-card__icon { background: linear-gradient(155deg, var(--rdv-gold), var(--rdv-gold-600)); box-shadow: 0 8px 16px -6px rgba(var(--rdv-gold-rgb), .5); }
.nature-card--or.is-selected { border-color: var(--rdv-gold); box-shadow: 0 0 0 3px var(--rdv-gold-050); background: linear-gradient(160deg, var(--rdv-gold-050) 0%, var(--rdv-white) 55%); }

.nature-card--vert .nature-card__icon { background: linear-gradient(155deg, var(--rdv-ok-050), #BFEED6); color: var(--rdv-ok); }
.nature-card--vert.is-selected .nature-card__icon { background: linear-gradient(155deg, var(--rdv-ok), #0E9A50); box-shadow: 0 8px 16px -6px rgba(var(--rdv-ok-rgb), .5); }
.nature-card--vert.is-selected { border-color: var(--rdv-ok); box-shadow: 0 0 0 3px var(--rdv-ok-050); background: linear-gradient(160deg, var(--rdv-ok-050) 0%, var(--rdv-white) 55%); }

.nature-card--bleu .nature-card__icon { background: linear-gradient(155deg, var(--rdv-blue-050), #CFE0EE); color: var(--rdv-blue); }
.nature-card--bleu.is-selected .nature-card__icon { background: linear-gradient(155deg, var(--rdv-blue), var(--rdv-blue-600)); box-shadow: 0 8px 16px -6px rgba(var(--rdv-blue-rgb), .5); }
.nature-card--bleu.is-selected { border-color: var(--rdv-blue); box-shadow: 0 0 0 3px var(--rdv-blue-050); background: linear-gradient(160deg, var(--rdv-blue-050) 0%, var(--rdv-white) 55%); }

.nature-card--or.is-selected .nature-card__icon,
.nature-card--vert.is-selected .nature-card__icon,
.nature-card--bleu.is-selected .nature-card__icon { color: #fff; transform: scale(1.05) rotate(-4deg); }

/* Met en avant la prestation la plus demandée (VTP côté voiture, CTM côté
   moto — voir NATURE_VEDETTES) : léger liseré doré au repos + ruban, sans
   aller jusqu'à l'aspect "sélectionné" pour ne pas prêter à confusion. */
.nature-card--vedette { border-color: #EED9AE; }
.nature-card__ribbon {
    position: absolute; top: -10px; left: 16px;
    /* color: var(--rdv-ink), pas #fff : le blanc sur cet ambre tombe autour
       de 2:1 de contraste, largement sous le seuil WCAG AA (4.5:1). */
    background: var(--rdv-gold); color: var(--rdv-ink);
    font-family: var(--rdv-font-mono); font-size: .62rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
    box-shadow: 0 4px 10px -3px rgba(var(--rdv-gold-rgb), .6);
}

/* --------------------------------------------------------------------------
   Étape "Véhicule" (Voiture / Moto) — grandes cartes dédiées, distinctes de
   .nature-card (bien plus petites) : c'est le tout premier choix du
   parcours, il doit avoir de la présence.
   -------------------------------------------------------------------------- */
/* auto-fit plutôt qu'un nombre de colonnes figé : 2 ou 3 cartes visibles
   selon les types gérés par le centre (voir appliquerCartesVehiculeDisponibles()). */
.vehicule-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
@media (max-width: 560px) { .vehicule-choice { grid-template-columns: 1fr; } }

.vehicule-choice__card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 14px;
    padding: clamp(28px, 5vw, 44px) 24px 32px;
    min-height: 260px;
    border: 2px solid var(--rdv-border);
    border-radius: calc(var(--r) + 6px);
    background: var(--rdv-white);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.vehicule-choice__card::before {
    /* Filet décoratif du haut, dans l'esprit de la bande de signalisation
       déjà utilisée ailleurs sur le site (stripe-rule) — discret ici. */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--rdv-accent), var(--rdv-ok));
    transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.vehicule-choice__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: #C9CACD;
}
.vehicule-choice__card.is-selected {
    border-color: var(--rdv-accent);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(180deg, var(--rdv-accent-050) 0%, var(--rdv-white) 45%);
}
.vehicule-choice__card.is-selected::before { transform: scaleX(1); }

.vehicule-choice__badge {
    width: 108px; height: 108px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    background: linear-gradient(155deg, var(--rdv-accent-050), #E2E7F0);
    color: var(--rdv-accent);
    font-size: 3.1rem; line-height: 1;
    transition: all .35s var(--ease);
}
.vehicule-choice__card.is-selected .vehicule-choice__badge {
    background: linear-gradient(155deg, var(--rdv-accent), var(--rdv-accent-600));
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 14px 26px -10px rgba(var(--rdv-accent-rgb), .55);
}
.vehicule-choice__card:hover .vehicule-choice__badge { transform: scale(1.04) rotate(-3deg); }

.vehicule-choice__name {
    font-family: var(--rdv-font-display); font-weight: 800;
    font-size: 1.3rem; color: var(--rdv-heading);
}
.vehicule-choice__desc { font-size: .9rem; color: var(--rdv-muted); margin: -6px 0 0; }

.vehicule-choice__check {
    position: absolute; top: 16px; right: 16px;
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--rdv-border);
    display: grid; place-items: center; color: transparent; font-size: .85rem;
    background: var(--rdv-white);
    transition: all .25s ease;
}
.vehicule-choice__card.is-selected .vehicule-choice__check {
    background: var(--rdv-ok); border-color: var(--rdv-ok); color: #fff;
}

/* La carte "Moto" reprend la teinte chaude (voir --rdv-gold) plutôt que
   l'ardoise par défaut de "Voiture" — les deux choix restent ainsi
   distincts au premier coup d'œil, pas seulement par leur icône. */
.vehicule-choice__card[data-type="CL"] .vehicule-choice__badge {
    background: linear-gradient(155deg, var(--rdv-gold-050), #F5E2C4);
    color: var(--rdv-gold-600);
}
.vehicule-choice__card[data-type="CL"].is-selected {
    border-color: var(--rdv-gold);
    background: linear-gradient(180deg, var(--rdv-gold-050) 0%, var(--rdv-white) 45%);
}
.vehicule-choice__card[data-type="CL"].is-selected .vehicule-choice__badge {
    background: linear-gradient(155deg, var(--rdv-gold), var(--rdv-gold-600));
    box-shadow: 0 14px 26px -10px rgba(var(--rdv-gold-rgb), .55);
}
.vehicule-choice__card[data-type="CL"].is-selected::before {
    background: linear-gradient(90deg, var(--rdv-gold), var(--rdv-ok));
}

/* La carte "Poids lourd" reprend le bleu (voir --rdv-blue), 3e teinte
   distincte pour ne pas confondre les 3 choix quand ils sont tous les
   trois présents (voir NATURE_COULEURS pour le même bleu ailleurs). */
.vehicule-choice__card[data-type="PL"] .vehicule-choice__badge {
    background: linear-gradient(155deg, var(--rdv-blue-050), #D6E6F2);
    color: var(--rdv-blue-600);
}
.vehicule-choice__card[data-type="PL"].is-selected {
    border-color: var(--rdv-blue);
    background: linear-gradient(180deg, var(--rdv-blue-050) 0%, var(--rdv-white) 45%);
}
.vehicule-choice__card[data-type="PL"].is-selected .vehicule-choice__badge {
    background: linear-gradient(155deg, var(--rdv-blue), var(--rdv-blue-600));
    color: #fff;
    box-shadow: 0 14px 26px -10px rgba(var(--rdv-blue-rgb), .55);
}
.vehicule-choice__card[data-type="PL"].is-selected::before {
    background: linear-gradient(90deg, var(--rdv-blue), var(--rdv-ok));
}

/* --- Étape 2 : calendrier + créneaux --- */
.slot-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; align-items: start; }
@media (max-width: 767.98px) { .slot-layout { grid-template-columns: 1fr; } }

.cal { position: relative; border: 1px solid var(--rdv-border); border-radius: var(--r); overflow: hidden; background: #fff; }
.cal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 15px; background: var(--rdv-accent-050); border-bottom: 1px solid var(--rdv-border);
}
.cal__head strong { font-family: var(--rdv-font-display); font-size: .93rem; text-transform: capitalize; color: var(--rdv-accent-dark); }
.cal__nav { display: flex; gap: 4px; }
.cal__nav button {
    width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--rdv-border);
    background: #fff; display: grid; place-items: center; cursor: pointer;
    color: var(--rdv-heading); transition: all .2s ease;
}
.cal__nav button:hover:not(:disabled) { background: var(--rdv-accent); color: #fff; border-color: var(--rdv-accent); }
.cal__nav button:disabled { opacity: .3; cursor: not-allowed; }
@media (max-width: 575.98px) {
    /* Cibles tactiles plus confortables au pouce (recommandation usuelle
       ~44px) — 30px était trop juste pour naviguer d'un mois à l'autre
       sur mobile sans viser à deux fois. */
    .cal__nav button { width: 40px; height: 40px; }
}

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 13px; }
.cal__dow { text-align: center; font-family: var(--rdv-font-mono); font-size: .62rem; color: var(--rdv-muted); padding-bottom: 5px; }
.cal__day {
    aspect-ratio: 1; border-radius: 9px; border: none; background: transparent;
    font-family: var(--rdv-font-body); font-size: .84rem; font-weight: 700; color: var(--rdv-heading);
    cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative;
    transition: all .18s ease;
}
.cal__day:disabled { color: #D3D4D6; cursor: not-allowed; }
.cal__day.is-empty { visibility: hidden; }
/* Point neutre = créneaux disponibles au tarif normal. Le vert (voir
   .has-promo ci-dessous, même couleur que .slot-btn.has-promo) reste
   réservé aux jours avec au moins une promo, pour ne pas s'y confondre. */
.cal__day.has-slots::after {
    content: ""; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%;
    background: var(--rdv-accent); box-shadow: 0 0 0 2px var(--rdv-accent-050);
}
.cal__day.has-promo::after {
    width: 6px; height: 6px; background: var(--rdv-ok);
    box-shadow: 0 0 0 2px var(--rdv-ok-050), 0 0 6px 0 rgba(23,185,97,.5);
}
.cal__day.has-slots:hover:not(:disabled) { background: var(--rdv-surface); }
.cal__day.has-promo:hover:not(:disabled) { background: var(--rdv-ok-050); }
.cal__day.is-selected { background: var(--rdv-accent); color: #fff; }
.cal__day.is-selected::after { background: #fff; box-shadow: none; }

.cal-legend { display: flex; gap: 16px; margin-top: 10px; }
.cal-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--rdv-muted); }
.cal-legend__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cal-legend__dot--dispo { background: var(--rdv-accent); }
.cal-legend__dot--promo { background: var(--rdv-ok); box-shadow: 0 0 5px 0 rgba(23,185,97,.5); }

.slot-list-wrap { border: 1px solid var(--rdv-border); border-radius: var(--r); padding: 16px; min-height: 280px; background: #fff; }
.slot-list-wrap__title { font-family: var(--rdv-font-display); font-weight: 700; font-size: .93rem; color: var(--rdv-heading); margin-bottom: 3px; text-transform: capitalize; }
.slot-list-wrap__count { font-size: .76rem; color: var(--rdv-muted); margin: 0 0 12px; }
.slot-count-promo {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--rdv-ok); font-weight: 700; background: var(--rdv-ok-050);
    padding: 4px 10px; border-radius: 999px;
}
.slot-count-promo i { font-size: .78rem; }
.slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
@media (max-width: 480px) { .slot-list { grid-template-columns: repeat(2, 1fr); } }
.slot-btn {
    position: relative; padding: 11px 9px 10px; border-radius: 12px; border: 1.5px solid var(--rdv-border);
    background: #fff; cursor: pointer; text-align: left; transition: all .2s var(--ease);
}
@media (max-width: 480px) { .slot-btn { padding: 13px 10px 12px; } }
.slot-btn:hover { border-color: var(--rdv-accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.slot-btn__time { display: block; font-family: var(--rdv-font-mono); font-weight: 700; font-size: .92rem; color: var(--rdv-heading); }
.slot-btn__price { display: block; font-family: var(--rdv-font-display); font-weight: 800; font-size: 1rem; color: var(--rdv-gold-600); margin-top: 2px; }
.slot-btn.has-promo { border-color: var(--rdv-ok); background: var(--rdv-ok-050); }
.slot-btn.has-promo .slot-btn__price { color: var(--rdv-ok); }
.slot-btn__promo {
    position: absolute; top: -8px; left: 9px;
    /* color: var(--rdv-ink), pas #fff : le blanc sur ce vert tombe autour
       de 2,9:1 de contraste, sous le seuil WCAG AA (4.5:1). */
    background: var(--rdv-ok); color: var(--rdv-ink); font-size: .62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px;
    box-shadow: 0 3px 8px -2px rgba(46,125,91,.55);
}
.slot-btn__price-old {
    display: inline; font-family: var(--rdv-font-mono); font-size: .74rem; color: var(--rdv-muted);
    text-decoration: line-through; margin-right: 5px;
}
.slot-btn.is-selected { background: var(--rdv-accent); border-color: var(--rdv-accent); }
.slot-btn.is-selected.has-promo { background: var(--rdv-accent); border-color: var(--rdv-accent); }
.slot-btn.is-selected .slot-btn__time { color: rgba(255,255,255,.7); }
.slot-btn.is-selected .slot-btn__price { color: #fff; }
.slot-btn.is-selected .slot-btn__price-old { color: rgba(255,255,255,.55); }
.slot-btn.is-selected::after {
    content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; top: 7px; right: 8px;
    color: #fff; font-size: .74rem;
}
.slot-empty { text-align: center; color: var(--rdv-muted); font-size: .88rem; padding: 55px 10px; }
.slot-empty i { display: block; font-size: 1.8rem; margin-bottom: 10px; color: var(--rdv-border); }

/* --- Étape 3 : options, volontairement discrètes (peu utilisées) --- */
.presta-intro { font-size: .84rem; color: var(--rdv-muted); margin-bottom: 16px; }
.presta-list { display: flex; flex-direction: column; gap: 8px; }
.presta-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--rdv-border); border-radius: var(--r-sm);
    cursor: pointer; transition: all .2s var(--ease); background: var(--rdv-white);
}
.presta-item:hover { border-color: var(--rdv-accent); }
.presta-item.is-selected { border-color: var(--rdv-accent); background: var(--rdv-accent-050); }
.presta-item__toggle {
    width: 20px; height: 20px; border-radius: 7px; border: 2px solid var(--rdv-border);
    display: grid; place-items: center; color: transparent; flex: none; font-size: .68rem;
    transition: all .2s ease;
}
.presta-item.is-selected .presta-item__toggle { background: var(--rdv-accent); border-color: var(--rdv-accent); color: #fff; }
.presta-item__icon {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: grid; place-items: center; font-size: 1rem;
    background: var(--rdv-accent-050); color: var(--rdv-accent);
    transition: all .2s ease;
}
.presta-item.is-selected .presta-item__icon { background: var(--rdv-accent); color: #fff; }
.presta-item__body { flex: 1; }
.presta-item__name { font-weight: 600; color: var(--rdv-heading); font-size: .88rem; }
.presta-item__price { font-family: var(--rdv-font-mono); font-weight: 700; color: var(--rdv-body); font-size: .86rem; }
.presta-skip-hint {
    display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 11px 14px;
    background: var(--rdv-surface); border-radius: var(--r-sm); font-size: .82rem; color: var(--rdv-body);
}
.presta-skip-hint i { color: var(--rdv-muted); }

/* --- Étape 4 : formulaire --- */
.hold-banner {
    display: flex; align-items: center; gap: 9px;
    background: var(--rdv-gold-050); color: var(--rdv-gold-600);
    padding: 9px 15px; border-radius: 999px; font-size: .8rem; font-weight: 600;
    margin-bottom: 20px; width: fit-content;
}
.hold-banner i { color: var(--rdv-gold); }
.hold-banner strong { font-family: var(--rdv-font-mono); color: var(--rdv-gold-600); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .78rem; font-weight: 700; color: var(--rdv-heading); margin-bottom: 6px; }
.field input, .field select, .field textarea {
    width: 100%; padding: .7rem .85rem; border-radius: 11px; border: 1.5px solid var(--rdv-border);
    font-family: inherit; font-size: 1rem; color: var(--rdv-heading); background: #fdfdfd;
    transition: all .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--rdv-accent); background: #fff; box-shadow: 0 0 0 3px var(--rdv-accent-050);
}
.field.has-error input { border-color: var(--rdv-warn); background: var(--rdv-warn-050); }
.field__error { font-size: .74rem; color: var(--rdv-warn); margin-top: 4px; display: none; }
.field.has-error .field__error { display: block; }
/* Obligatoire piloté par appliquerChampsObligatoires() (rendez-vous-en-ligne.js),
   d'après le planning VTWEB — voir CHAMPS_VTWEB_VERS_DOM. */
.field--required label::after { content: " *"; color: var(--rdv-accent); }

/* --- Étape 5 : paiement --- */
.paiement-card {
    background: var(--rdv-white); border: 1px solid var(--rdv-border); border-radius: var(--r);
    padding: 20px; box-shadow: var(--shadow-sm);
}
.paiement-erreur { color: var(--rdv-warn); margin-top: 12px; font-size: .86rem; }
.paiement-consentements { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.consentement-item {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .82rem; color: var(--rdv-body); line-height: 1.4; cursor: pointer;
}
.consentement-item input[type="checkbox"] {
    margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--rdv-accent); cursor: pointer;
}
.consentement-item a { color: var(--rdv-accent-dark); font-weight: 700; text-decoration: underline; }
.consentement-item a:hover { color: var(--rdv-accent); }
.btn-payer-cta {
    width: 100%; margin-top: 18px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: .8rem 1.3rem; border: none; border-radius: var(--r);
    background: linear-gradient(135deg, var(--rdv-accent), var(--rdv-accent-600));
    color: #fff; font-family: var(--rdv-font-display); font-weight: 800; font-size: .96rem;
    letter-spacing: -.01em; cursor: pointer;
    box-shadow: 0 12px 24px -12px rgba(var(--rdv-accent-rgb), .55);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s ease;
}
.btn-payer-cta i { font-size: .92rem; }
.btn-payer-cta:not(:disabled) { animation: payerCtaPulse 2.4s ease-in-out infinite; }
.btn-payer-cta:hover:not(:disabled) {
    animation: none; color: #fff; transform: translateY(-1px);
    box-shadow: 0 16px 30px -12px rgba(var(--rdv-accent-rgb), .7);
}
.btn-payer-cta:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
@keyframes payerCtaPulse {
    0%, 100% { box-shadow: 0 12px 24px -12px rgba(var(--rdv-accent-rgb), .55); }
    50% { box-shadow: 0 16px 34px -9px rgba(var(--rdv-accent-rgb), .8); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-payer-cta:not(:disabled) { animation: none; }
}
.paiement-footnote {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 16px 0 0; font-size: .8rem; color: var(--rdv-muted);
}
.paiement-trust { margin-top: 16px; margin-bottom: 0; }

/* --- Étape 6 : confirmation façon "billet" --- */
.ticket {
    max-width: 440px; margin: 0 auto;
    background: linear-gradient(155deg, var(--rdv-accent-dark), var(--rdv-ink)); border-radius: var(--r-lg);
    color: #fff; overflow: hidden; box-shadow: var(--shadow-lg);
    animation: ticketPop .5s var(--ease);
}
@keyframes ticketPop { from { opacity: 0; transform: scale(.95) translateY(8px); } to { opacity: 1; transform: none; } }
.ticket__top { padding: 26px 26px 20px; text-align: center; }
.ticket__badge {
    width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
    display: grid; place-items: center; background: rgba(46,125,91,.22); color: #6FCFA5;
    font-size: 1.5rem;
}
.ticket__top h2 { color: #fff; font-size: 1.12rem; margin-bottom: 5px; }
.ticket__top p { margin: 0; font-size: .84rem; color: rgba(255,255,255,.6); }
.ticket__perf {
    position: relative; height: 1px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 8px, transparent 8px 16px);
}
.ticket__perf::before, .ticket__perf::after {
    content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--rdv-surface);
}
.ticket__perf::before { left: -9px; }
.ticket__perf::after { right: -9px; }
.ticket__body { padding: 20px 26px 26px; }
.ticket__row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.13); font-size: .86rem; }
.ticket__row:last-of-type { border-bottom: 0; }
.ticket__row span:first-child { color: rgba(255,255,255,.5); }
.ticket__row span:last-child { color: #fff; font-weight: 700; text-align: right; }
/* Le montant se distingue des autres lignes (prestation/date/heure) : c'est
   l'info que le client vérifie en premier sur son billet. */
#tkPrix { color: var(--rdv-gold); font-size: 1.05rem; }
.ticket__price-old {
    display: inline-block; font-family: var(--rdv-font-mono); font-size: .78rem; font-weight: 600;
    color: rgba(255,255,255,.4); text-decoration: line-through; margin-right: 7px;
}
.ticket__ref { margin-top: 16px; text-align: center; font-family: var(--rdv-font-mono); font-size: .76rem; color: rgba(255,255,255,.45); }
.ticket__ref strong { color: #fff; font-size: .9rem; }
.confirm-actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }

/* --------------------------------------------------------------------------
   Panneau latéral : récapitulatif + aide/téléphone + localisation
   -------------------------------------------------------------------------- */
.rdv-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
@media (max-width: 900px) { .rdv-side { position: static; margin-top: 18px; } }

.recap-card {
    background: var(--rdv-white); border: 1px solid var(--rdv-border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); padding: 20px; border-top: 3px solid var(--rdv-accent);
}
.recap-card__title { font-family: var(--rdv-font-mono); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--rdv-muted); margin-bottom: 14px; }
.recap-line { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--rdv-border); }
.recap-line:last-of-type { border-bottom: 0; }
.recap-line__icon { width: 32px; height: 32px; border-radius: 9px; background: var(--rdv-accent-050); color: var(--rdv-accent); display: grid; place-items: center; font-size: .9rem; flex: none; transition: all .3s ease; }
.recap-line.is-filled .recap-line__icon { background: var(--rdv-accent); color: #fff; }
.recap-line__label { font-size: .7rem; color: var(--rdv-muted); margin-bottom: 2px; }
.recap-line__value { font-size: .86rem; font-weight: 700; color: var(--rdv-heading); }
.recap-line__value.is-empty { color: var(--rdv-muted); font-weight: 500; }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 13px; padding-top: 14px; border-top: 2px solid var(--rdv-gold); }
.recap-total span:first-child { font-family: var(--rdv-font-display); font-weight: 700; font-size: .86rem; }
.recap-total strong { font-family: var(--rdv-font-display); font-size: 1.4rem; color: var(--rdv-gold-600); }
.recap-total__old {
    display: inline-block; font-family: var(--rdv-font-mono); font-size: .8rem; font-weight: 600;
    color: var(--rdv-muted); text-decoration: line-through; margin-right: 8px; vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Récapitulatif inline de l'étape "Coordonnées" — voir renderCoordsRecap().
   Placé dans le panneau lui-même (pas #rdvSide) pour rester visible juste
   avant le bouton "Continuer" quel que soit le viewport.
   -------------------------------------------------------------------------- */
.coords-recap {
    margin-top: 22px; background: var(--rdv-accent-050); border: 1px solid var(--rdv-border);
    border-radius: var(--r-lg); padding: 16px 18px;
}
.coords-recap__title {
    display: flex; align-items: center; gap: 8px; font-family: var(--rdv-font-mono);
    font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rdv-accent-600);
    margin-bottom: 12px;
}
.coords-recap__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px;
}
.coords-recap__item { display: flex; flex-direction: column; gap: 2px; }
.coords-recap__label { font-size: .68rem; color: var(--rdv-muted); }
.coords-recap__value { font-size: .88rem; font-weight: 700; color: var(--rdv-heading); }
.coords-recap__value.is-empty { color: var(--rdv-muted); font-weight: 500; font-style: italic; }

/* Panneau d'aide sombre, dans l'esprit de la maquette de référence :
   un bloc contrasté qui rassure ceux qui préfèrent appeler plutôt que
   continuer en ligne. */
.help-card {
    background: linear-gradient(155deg, var(--rdv-accent-dark), var(--rdv-ink)); border-radius: var(--r-lg); padding: 20px;
    color: #fff; box-shadow: var(--shadow-sm);
}
.help-card__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--rdv-font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.55); margin-bottom: 8px;
}
.help-card h3 { color: #fff; font-size: 1rem; margin-bottom: 8px; }
.help-card p { font-size: .82rem; color: rgba(255,255,255,.62); margin: 0 0 16px; }
.help-card__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); }
.help-card__row i { color: var(--rdv-accent-050); font-size: .95rem; opacity: .75; }
.help-card__row-label { font-size: .7rem; color: rgba(255,255,255,.5); }
.help-card__row-value { font-size: .86rem; font-weight: 700; color: #fff; }
.help-card__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 14px; padding: .75rem 1rem; border-radius: 999px;
    background: #fff; color: var(--rdv-accent-dark); font-weight: 700; font-size: .88rem;
    border: none; cursor: pointer; transition: all .2s ease;
}
.help-card__cta:hover { background: var(--rdv-accent-050); }

.locate-card {
    background: var(--rdv-white); border: 1px solid var(--rdv-border); border-radius: var(--r-lg);
    padding: 16px; display: flex; align-items: center; gap: 12px;
}
.locate-card__icon {
    width: 38px; height: 38px; border-radius: 10px; background: var(--rdv-ink); color: #fff;
    display: grid; place-items: center; font-size: 1rem; flex: none;
}
.locate-card__eyebrow { font-family: var(--rdv-font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rdv-muted); margin-bottom: 3px; }
.locate-card__text { font-size: .84rem; font-weight: 600; color: var(--rdv-heading); line-height: 1.35; }

/* --------------------------------------------------------------------------
   Barre d'actions
   -------------------------------------------------------------------------- */
.rdv-actions { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px 26px; border-top: 1px solid var(--rdv-border); }
.rdv-actions:empty { display: none; }
@media (max-width: 575.98px) { .rdv-actions { padding: 15px 16px 20px; flex-wrap: wrap; gap: 10px; } }

/* --------------------------------------------------------------------------
   Barre d'actions fixée en bas d'écran sur mobile : sur un parcours aussi
   long (formulaire, calendrier, options), faire remonter le bouton
   principal tout en bas du contenu obligeait à chercher où il se trouvait
   à chaque étape. En le fixant au bas de l'écran (comme la plupart des
   parcours de réservation/paiement mobiles), l'action à faire reste
   toujours à portée de pouce, quelle que soit la longueur de l'étape en
   cours.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .rdv-actions:not(:empty) {
        position: fixed; left: 0; right: 0; z-index: 30;
        /* Contrairement à VL_2026 (dont ce fichier est porté), ce thème
           n'a pas de barre fixe mobile "Appeler" (.mobile-bar) — rien
           d'autre à empiler en bas d'écran, la barre va donc jusqu'à 0. */
        bottom: 0;
        background: var(--rdv-white);
        border-top: 1px solid var(--rdv-border);
        box-shadow: 0 -12px 28px -18px rgba(var(--rdv-ink-rgb), .35);
        padding: 10px 16px;
        flex-direction: column-reverse; align-items: stretch; gap: 8px;
    }
    .rdv-actions:not(:empty) > div { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .rdv-actions:not(:empty) .btn { width: 100%; justify-content: center; }
    /* Le bouton principal (Continuer / Confirmer le rendez-vous / Passer
       au paiement) reprend le traitement "gros bouton" du paiement
       (.btn-payer-cta) plutôt que la pastille discrète utilisée sur
       desktop — c'est l'action attendue à chaque étape, elle doit se
       repérer d'un coup d'œil sur mobile. */
    .rdv-actions:not(:empty) .btn-accent {
        padding: .95rem 1.2rem; font-size: 1rem; font-family: var(--rdv-font-display); font-weight: 800;
        border-radius: var(--r);
        background: linear-gradient(135deg, var(--rdv-accent), var(--rdv-accent-600));
        box-shadow: 0 12px 24px -12px rgba(var(--rdv-accent-rgb), .55);
    }
    /* "Retour" redevient un simple lien discret sous le bouton principal
       (pas une pastille de même poids visuel) — sur mobile, deux boutons
       de même importance créaient une hésitation sur lequel appuyer. */
    .rdv-actions:not(:empty) .btn-ghost {
        background: transparent; border: none; box-shadow: none;
        color: var(--rdv-muted); font-size: .85rem; padding: .35rem; width: auto; align-self: center;
    }
    .rdv-shell:has(.rdv-actions:not(:empty)) .rdv-body {
        /* Une seule barre fixe ici (pas de .mobile-bar dans ce thème,
           voir ci-dessus) : généreux quand même pour couvrir le cas le
           plus haut (étape "Options", bouton "Passer cette étape" en
           plus du bouton principal). Un peu trop d'espace vaut mieux
           qu'un bouton qui recouvre la fin du contenu. */
        padding-bottom: 160px;
    }
}

/* Toutes les règles ci-dessous sont préfixées par .rdv-wrap (le conteneur
   de toute la page de réservation, voir rendez-vous-en-ligne.tpl) : .btn
   et .btn-primary sont aussi de VRAIS noms de classe Bootstrap, utilisés
   ailleurs sur cette même page (ex. la flèche "retour en haut", .back-to-top,
   qui porte "btn btn-primary") — sans ce préfixe, ces règles s'appliquaient
   à TOUT élément Bootstrap .btn-primary de la page, pas seulement aux
   boutons du parcours de réservation. Incident constaté le 2026-09-11 :
   flèche "retour en haut" recolorée/redimensionnée par erreur. */
.rdv-wrap .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--rdv-font-body); font-weight: 700; font-size: .9rem; padding: .7rem 1.4rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: all .2s var(--ease); }
.rdv-wrap .btn-primary { background: var(--rdv-ink); color: #fff; }
/* color: #fff redéclaré ici (pas juste hérité de .btn-primary) : le .btn
   générique de Bootstrap fixe sa propre couleur au survol (spécificité
   plus élevée sur :hover que notre règle de base sans :hover), qui sinon
   l'emporte et rend le texte du bouton quasi invisible au survol. */
.rdv-wrap .btn-primary:hover { background: var(--rdv-ink-2); color: #fff; transform: translateY(-1px); }
.rdv-wrap .btn-accent { background: var(--rdv-accent); color: #fff; box-shadow: 0 10px 22px -12px rgba(var(--rdv-accent-rgb), .6); }
.rdv-wrap .btn-accent:hover:not(:disabled) { background: var(--rdv-accent-600); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(var(--rdv-accent-rgb), .7); }
.rdv-wrap .btn-accent:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.rdv-wrap .btn-ghost { background: transparent; color: var(--rdv-body); border-color: var(--rdv-border); }
.rdv-wrap .btn-ghost:hover { border-color: var(--rdv-heading); color: var(--rdv-heading); background: var(--rdv-surface); }
@media (max-width: 420px) {
    /* La mise en pile de .rdv-actions elle-même est gérée par la barre
       fixe mobile plus bas (@media 767.98px) — ne reste ici que le cas
       générique des autres boutons pleine largeur (ex: billet de
       confirmation, .confirm-actions) sur très petit écran.
       .rdv-wrap : comme les autres règles .btn de ce fichier, sans ce
       préfixe cette règle s'appliquait à TOUT .btn de la page — dont la
       flèche "retour en haut" (.back-to-top, "btn btn-primary"), étirée
       en pleine largeur sur les petits écrans au lieu de rester ronde. */
    .rdv-wrap .btn { justify-content: center; width: 100%; }
}

/* Sur mobile uniquement, la flèche "retour en haut" (.back-to-top, voir
   footer.tpl) chevauche la barre d'action collante en bas de cette page
   (bouton "Continuer"/"Payer...") — gênant sur un parcours déjà dense en
   boutons. .rdv-wrap n'existe que sur cette page (voir
   rendez-vous-en-ligne.tpl) : le sélecteur de frère général la cible sans
   affecter la flèche sur le reste du site ni sur cette page en desktop. */
@media (max-width: 767.98px) {
    .rdv-wrap ~ .back-to-top { display: none !important; }
}

/* --------------------------------------------------------------------------
   États transverses
   -------------------------------------------------------------------------- */
.rdv-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 70px 10px; color: var(--rdv-body); font-size: .88rem; font-weight: 600; }

/* Loader "volant" — sur le thème du contrôle technique auto plutôt qu'un
   spinner générique. Un léger halo pulsé derrière renforce l'impression
   de mouvement/moteur qui tourne, dans le même esprit que les glows
   accent-050 déjà utilisés ailleurs sur la page (icônes de nature, etc.). */
.wheel-loader-wrap { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.wheel-loader-wrap::before {
    content: ""; position: absolute; inset: -12px; border-radius: 50%;
    background: radial-gradient(circle, var(--rdv-accent-050) 0%, transparent 70%);
    animation: wheelGlow 1.2s ease-in-out infinite;
}
.wheel-loader { width: 56px; height: 56px; position: relative; animation: wheelSpin 2.6s linear infinite; }
.wheel-loader--sm { width: 34px; height: 34px; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
@keyframes wheelGlow {
    0%, 100% { opacity: .45; transform: scale(.88); }
    50% { opacity: 1; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .wheel-loader { animation-duration: 2.8s; }
    .wheel-loader-wrap::before { animation: none; opacity: .6; }
}

/* Petit loader local pour le changement de mois du calendrier, sans
   masquer l'étape entière (voir naviguerMois). */
.cal-loading {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .85); border-radius: var(--r);
}

.rdv-alert { display: flex; gap: 10px; padding: 12px 15px; border-radius: var(--r-sm); font-size: .84rem; margin-bottom: 16px; }
.rdv-alert-error { background: var(--rdv-warn-050); color: var(--rdv-warn); }
.rdv-alert-warn { background: #FFF6E0; color: #8A6100; }
.rdv-alert i { flex: none; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Impression : tout tenir sur une seule page, uniquement le billet
   -------------------------------------------------------------------------- */
@media print {
    body * { visibility: hidden; }
    .ticket, .ticket * { visibility: visible; }
    .ticket {
        position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;
        box-shadow: none; max-width: 100%; page-break-inside: avoid;
    }
    .confirm-actions, .rdv-actions, .page-hero, header, footer, .rdv-side { display: none !important; }
    @page { margin: 1.2cm; }
}

/* --------------------------------------------------------------------------
   Boutons au vert du thème (MAQUETTE_2019) : sur ce modèle, les actions
   (« Prendre rendez-vous », .btn-hero-primary) sont vertes #25c583, en
   pilule. Le parcours reprend ce code : bouton « Continuer », « Payer en
   ligne » et bouton de paiement. L'accent bleu ardoise reste pour les
   sélections (jour, créneau, étape en cours).
   -------------------------------------------------------------------------- */
.rdv-wrap .btn-accent {
    background: #25C583; color: #fff;
    box-shadow: 0 10px 22px -12px rgba(37, 197, 131, .65);
}
.rdv-wrap .btn-accent:hover:not(:disabled) {
    background: #1FA970; color: #fff;
    box-shadow: 0 14px 26px -12px rgba(37, 197, 131, .75);
}
.btn-payer-cta {
    background: linear-gradient(135deg, #25C583, #1FA970);
    box-shadow: 0 12px 24px -12px rgba(37, 197, 131, .6);
    border-radius: 999px;
}

/* Titre de page du thème (.page-title, voir style.css) : un peu moins
   d'espace sous le titre, le parcours commence juste en dessous. */
.page-title--rdv { padding-bottom: 0; }
.page-title--rdv .page-title__sub { margin: .6rem auto 0; max-width: 620px; color: #455370; }
.page-title--rdv + .rdv-wrap { padding-top: 1.5rem !important; }

/* --------------------------------------------------------------------------
   Neutralisation, SUR CETTE PAGE SEULEMENT, des styles globaux du thème
   MAQUETTE_2019 qui visent des balises et non des classes :
     - style.css stylise TOUS les <button> (fond gris, bordure verte 2px,
       padding 20px 60px, effet ::before « data-hover ») : cassait les jours
       et les flèches du calendrier ;
     - contact.css impose à TOUS les <input>, en !important, une simple
       bordure basse, largeur 100 % et apparence native supprimée : rendait
       les cases à cocher (CGV, OBFCM) invisibles ;
     - style.css met TOUS les liens en blanc.
   :where() garde aux boutons une spécificité minimale : les règles de classe
   du parcours (.slot-btn, .cal__day, .nature-card...) l'emportent toujours.
   Le reste du site n'est pas concerné (tout est préfixé par .rdv-wrap).
   -------------------------------------------------------------------------- */
:where(.rdv-wrap) button {
    padding: 0; border: 0; border-radius: 0; background: none;
    color: inherit; overflow: visible;
}
:where(.rdv-wrap) button::before { content: none; }

.rdv-wrap .field input {
    width: 100% !important;
    border: 1.5px solid var(--rdv-border) !important;
    border-radius: 11px;
}
.rdv-wrap .field input:focus { border-color: var(--rdv-accent) !important; }
.rdv-wrap .field.has-error input { border-color: var(--rdv-warn) !important; }

.rdv-wrap input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: auto !important;
    width: 18px !important; height: 18px;
    border: 0 !important;
}
.rdv-wrap input[type="checkbox"]:focus-visible { outline: 2px solid var(--rdv-accent) !important; outline-offset: 2px; }

.rdv-wrap a:not([class]) { color: var(--rdv-accent); text-decoration: underline; }

/* Flèches de mois du calendrier : le script les génère en
   <button class="cal__nav"> (la règle « .cal__nav button » plus haut ne les
   atteint donc pas) — style rond, dans l'esprit des pastilles du thème. */
.cal__head button.cal__nav {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--rdv-border); background: #fff;
    display: grid; place-items: center; cursor: pointer;
    color: var(--rdv-heading); transition: all .2s ease;
}
.cal__head button.cal__nav:hover:not(:disabled) { background: var(--rdv-accent); border-color: var(--rdv-accent); color: #fff; }
.cal__head button.cal__nav:disabled { opacity: .3; cursor: not-allowed; }
@media (max-width: 575.98px) { .cal__head button.cal__nav { width: 40px; height: 40px; } }

/* Barre de menu du thème fixée en haut (navbar fixed-top, ~61 px sur
   ordinateur, ~76 px sur téléphone) : quand le parcours fait défiler la page
   vers les étapes ou la liste des créneaux (scrollIntoView, voir
   rendez-vous-en-ligne.js), on garde cette hauteur libre pour qu'ils ne
   passent pas dessous. */
#rdvSteps, .slot-list-wrap, .rdv-panel { scroll-margin-top: 92px; }

/* Même largeur que la prise de rendez-vous de VL_2026 : ce thème est en
   Bootstrap 4 (.container plafonné à 1140 px), VL_2026 en Bootstrap 5
   (1320 px à partir de 1400 px de large, marges 12 px). Sur la page de
   réservation seulement. */
.rdv-wrap > .container { padding-left: .75rem; padding-right: .75rem; }
@media (min-width: 1400px) {
    .rdv-wrap > .container, .page-title--rdv.container { max-width: 1320px; }
}