/* ==========================================================================
   Prise de rendez-vous — palette NEUTRE, volontairement indépendante des
   couleurs du thème (--ct-primary, --ct-accent, etc.) : cette page est
   appelée à être réutilisée telle quelle sur l'ensemble des modèles, elle
   ne doit jamais jurer avec la couleur choisie par un client donné.
   Seuls le vert et le rouge sobres subsistent, pour leur valeur
   FONCTIONNELLE (disponibilité, erreur) — jamais décorative.
   ========================================================================== */

:root {
    --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-white: #FFFFFF;
    --rdv-muted: #9A9DA3;
    /* Vert promo/disponibilité : rendu plus vif ("flashy") qu'un vert sobre
       classique — sert à faire ressortir les créneaux en promotion et les
       étapes validées, par contraste avec le gris ardoise du reste de la
       page (voir --rdv-accent ci-dessous). Ancien vert plus sobre gardé en
       commentaire au cas où : --rdv-ok: #2E7D5B; --rdv-ok-050: #E9F3EF; */
    --rdv-ok: #17B961;
    --rdv-ok-rgb: 23, 185, 97;
    --rdv-ok-050: #E1F8EC;
    --rdv-warn: #B3401F;
    --rdv-warn-050: #FBEDE8;

    /* Bleu utilitaire — quatrième teinte, réservée aux badges d'icône des
       prestations "véhicules spéciaux" (camping-car, 4x4, pollution), pour
       varier la grille de prestations plutôt que de garder un badge gris
       uniforme sur les 8 cartes (voir NATURE_COULEURS, rendez-vous-en-ligne.js). */
    --rdv-blue: #3E7CB1;
    --rdv-blue-rgb: 62, 124, 177;
    --rdv-blue-600: #2E5F8A;
    --rdv-blue-050: #E7F0F7;

    /* Couleur d'accent : gris ardoise, choisi pour rester neutre et
       professionnel sans jurer avec la couleur d'aucun thème client.
       Réservée aux éléments qui guident l'action (bouton principal, étape
       active, sélections), jamais utilisée pour du texte ou des fonds
       neutres — le vert ci-dessus apporte le "peps" (promos, validation),
       pour ne pas retomber dans une page tout en gris.

       Anciennes teintes gardées en commentaire au cas où il faille y
       revenir :
       version brune (précédente) >> --rdv-accent: #9E5C0C; --rdv-accent-rgb: 158, 92, 12; --rdv-accent-600: #7A470A; --rdv-accent-050: #FBF0DE; --rdv-accent-dark: #4A2E06;
       version bleue (plus ancienne) >> --rdv-accent: #3D4B6E; --rdv-accent-rgb: 61, 75, 110; --rdv-accent-600: #2C3752; --rdv-accent-050: #EEF0F5; --rdv-accent-dark: #1B2133; */
    --rdv-accent: #33414D;
    --rdv-accent-rgb: 51, 65, 77;
    --rdv-accent-600: #212B33;
    --rdv-accent-050: #E7ECEE;
    --rdv-accent-dark: #1B242A;

    /* Troisième teinte, chaude celle-ci : réservée aux moments qui parlent
       de valeur/urgence (total à payer, minuteur de réservation), pour ne
       pas rester sur le seul duo ardoise/vert — et à la carte "Moto" de
       l'étape véhicule, pour la distinguer visuellement de "Voiture". */
    --rdv-gold: #E8A33D;
    --rdv-gold-rgb: 232, 163, 61;
    --rdv-gold-600: #C6821F;
    --rdv-gold-050: #FDF3E3;

    --rdv-font-display: var(--ct-font-display, 'Archivo', system-ui, sans-serif);
    --rdv-font-body: var(--ct-font-body, 'Manrope', system-ui, sans-serif);
    --rdv-font-mono: var(--ct-font-mono, 'JetBrains Mono', ui-monospace, monospace);

    --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; }
.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;
    background: var(--rdv-gold); color: #fff;
    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;
    background: var(--rdv-ok); color: #fff; 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;
        /* Le site affiche déjà, sur mobile, sa propre barre fixe
           "Appeler" en bas d'écran (.mobile-bar, voir footer.tpl —
           celle-ci réserve 4.5rem via body{padding-bottom}) : on empile
           notre barre juste au-dessus plutôt que de se superposer dessus,
           ce qui rendait le bouton "Continuer" illisible. */
        bottom: 4.5rem;
        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 {
        /* Généreux à dessein : réserve la place des deux barres fixes
           empilées (la nôtre + .mobile-bar du site), y compris dans le
           cas le plus haut (étape "Options" avec 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: 230px;
    }
}

/* Sur la page de prise de rendez-vous elle-même, le bouton "Rendez-vous"
   de la barre mobile du site (.mobile-bar, voir footer.tpl) n'a aucune
   utilité — on y est déjà. Seul "Appeler" reste, et prend toute la
   largeur (déjà géré par .mobile-bar .btn { flex: 1 } dans style.css). */
.mobile-bar a[href*="rendez-vous-en-ligne"] { display: none !important; }

/* 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; }
}

/* 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, pour ne pas
       affecter un éventuel autre .btn de la page hors du parcours. */
    .rdv-wrap .btn { justify-content: center; width: 100%; }
}

/* --------------------------------------------------------------------------
   É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; }
}