/* ================================================================
 * DATIVO - habillage de rdv.dativo.fr (Easy!Appointments 1.6.1)
 * Source : dtvsas_rdv/overlay/assets/dativo.css
 * Charte V2 « Emerald » (tokens repris de www.dativo.fr/assets/css/tokens.css)
 * ================================================================ */


/* Polices de la charte : copiées depuis www.dativo.fr par ext/rdv/sync-fonts.sh dans /opt/rdv/fonts
   (monté en /assets/dativo-fonts). Auto-hébergées : aucun appel à un service tiers. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url(../dativo-fonts/bricolage-grotesque-latin.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
    src: url(../dativo-fonts/dm-sans-latin.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap;
    src: url(../dativo-fonts/fraunces-italic-latin.woff2) format('woff2'); }

:root {
    --emerald: #4E7F65;
    --emerald-hover: #37664D;
    --emerald-active: #264C38;
    --emerald-50: #E4F7ED;
    --emerald-100: #CAEBD9;
    --forest: #1F3D33;
    --mint: #B7DDD2;
    --dew: #DCF1E0;
    --terra: #E37222;
    --ink-2: #4B5563;
    --line: #E5E7EB;
    --radius: 18px;
    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-accent: 'Fraunces', Georgia, serif;

    --bs-primary: #4E7F65;
    --bs-primary-rgb: 78, 127, 101;
    --bs-body-font-family: var(--font-body);
    --bs-body-color: #1F3D33;
    --bs-link-color: #37664D;
    --bs-link-color-rgb: 55, 102, 77;
    --bs-link-hover-color: #264C38;
}

/* ---------- Fond et structure de page ---------- */
html, body.dtv-rdv { background: var(--forest) !important; }
body.dtv-rdv {
    font-family: var(--font-body);
    color: var(--forest);
    min-height: 100vh;
    position: relative;
    -webkit-font-smoothing: antialiased;
}
.dtv-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(900px 520px at 85% 8%, rgba(132,189,159,.28), transparent 60%),
        radial-gradient(700px 500px at 5% 95%, rgba(21,127,119,.22), transparent 60%),
        linear-gradient(160deg, #1F3D33 0%, #264C38 45%, #37664D 100%);
}
.dtv-bg::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 70%, transparent 100%);
}
.dtv-top, .dtv-main { position: relative; z-index: 1; }

/* ---------- Barre haute ---------- */
.dtv-top { padding: 22px 0 8px; }
.dtv-brand img { height: 40px; width: auto; display: block; }
.dtv-back {
    color: rgba(255,255,255,.82); text-decoration: none; font-weight: 500; font-size: 15px;
    padding: 9px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
    transition: background .15s ease, color .15s ease;
}
.dtv-back:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ---------- Header de bienvenue ---------- */
.dtv-main { padding-bottom: 40px; }
.dtv-hero { color: #fff; padding: 44px 0 30px; }
.dtv-pill {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.92);
    padding: 7px 15px; border-radius: 999px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
}
.dtv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(183,221,210,.18); }
.dtv-hero h1 {
    font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em;
    font-size: clamp(34px, 5.2vw, 56px); line-height: 1.04; margin: 22px 0 18px; color: #fff;
}
.dtv-hero h1 em {
    font-family: var(--font-accent); font-style: italic; font-weight: 500; letter-spacing: -0.01em;
    color: var(--mint); white-space: nowrap;
}
.dtv-lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: rgba(255,255,255,.84); margin: 0 0 22px; }
.dtv-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.dtv-trust li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: rgba(255,255,255,.86); }
.dtv-trust svg, .dtv-trust i { color: var(--mint); width: 15px; }

/* ---------- Carte de réservation ---------- */
#book-appointment-wizard {
    position: relative; z-index: 1;
    border-radius: var(--radius) !important;
    box-shadow: 0 30px 70px rgba(8, 25, 18, .38), 0 2px 6px rgba(8, 25, 18, .15) !important;
    background: #fff !important;
    max-width: none !important;
}
.dtv-card-head,
body.dtv-rdv #book-appointment-wizard #header.dtv-card-head {
    gap: 16px; padding: 20px 26px; background: #fff !important; border-bottom: 1px solid var(--line) !important;
}
.dtv-card-ico {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; margin-right: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--emerald-50); color: var(--emerald); font-size: 20px;
}
.dtv-card-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--forest); line-height: 1.2; }
.dtv-card-sub { font-size: 14px; color: var(--ink-2) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pastilles d'étapes */
.dtv-steps { gap: 10px; }
#book-appointment-wizard .dtv-steps .book-step {
    width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 11px !important; background: var(--gray-100, #F3F4F6) !important;
    border: 1px solid var(--line); transition: all .2s ease; float: none !important;
}
#book-appointment-wizard .dtv-steps .book-step strong {
    font-size: 14px !important; font-weight: 700; color: #9CA3AF !important; font-family: var(--font-display);
}
#book-appointment-wizard .dtv-steps .book-step.active-step {
    background: var(--emerald) !important; border-color: var(--emerald);
    box-shadow: 0 6px 16px rgba(78,127,101,.35);
}
#book-appointment-wizard .dtv-steps .book-step.active-step strong { color: #fff !important; }
#book-appointment-wizard .dtv-steps .book-step[style*="display: none"] { display: none !important; }

/* Contenu des étapes */
#book-appointment-wizard .wizard-frame { padding: 28px 30px !important; }
#book-appointment-wizard .frame-container { min-height: 440px !important; }
#book-appointment-wizard .frame-title {
    font-family: var(--font-display); font-weight: 700 !important; letter-spacing: -0.025em;
    color: var(--forest) !important; font-size: clamp(22px, 2.6vw, 30px); margin-top: 8px !important;
}
#book-appointment-wizard label, #book-appointment-wizard .form-label { color: var(--forest); font-weight: 600; }
#book-appointment-wizard .form-control, #book-appointment-wizard .form-select {
    border-radius: 11px; border-color: #D1D5DB; padding: .62rem .9rem; font-family: var(--font-body);
}
#book-appointment-wizard .form-control:focus, #book-appointment-wizard .form-select:focus {
    border-color: var(--emerald); box-shadow: 0 0 0 .22rem rgba(78,127,101,.18);
}

/* Boutons */
#book-appointment-wizard .btn { border-radius: 12px; font-weight: 600; padding: .62rem 1.25rem; font-family: var(--font-body); }
#book-appointment-wizard .btn-dark,
#book-appointment-wizard .btn-primary,
#book-appointment-wizard .button-next,
#book-appointment-wizard #book-appointment-submit {
    background: var(--emerald) !important; border-color: var(--emerald) !important; color: #fff !important;
}
#book-appointment-wizard .btn-dark:hover,
#book-appointment-wizard .btn-primary:hover,
#book-appointment-wizard .button-next:hover,
#book-appointment-wizard #book-appointment-submit:hover {
    background: var(--emerald-hover) !important; border-color: var(--emerald-hover) !important;
}
#book-appointment-wizard .btn-outline-secondary,
#book-appointment-wizard .button-back {
    background: #fff !important; color: var(--forest) !important; border: 1px solid #D1D5DB !important;
}
#book-appointment-wizard .button-back:hover { background: var(--dew) !important; }

/* Mode de l'échange (téléphone ou visio, étape 1) */
#book-appointment-wizard #dtv-meeting-mode legend { color: var(--forest); }
#book-appointment-wizard .dtv-mode-options { display: flex; flex-wrap: wrap; gap: 10px; }
#book-appointment-wizard .dtv-mode-option {
    flex: 1 1 220px; display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--forest); border: 1px solid #D1D5DB; font-weight: 500;
}
#book-appointment-wizard .dtv-mode-hint { display: none; flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 400; color: var(--ink-2); }
#book-appointment-wizard #dtv-mode-phone:checked ~ .dtv-mode-hint-phone,
#book-appointment-wizard #dtv-mode-visio:checked ~ .dtv-mode-hint-visio { display: block; }
#book-appointment-wizard .dtv-mode-option:hover { border-color: var(--emerald); background: var(--emerald-50); }
#book-appointment-wizard .btn-check:checked + .dtv-mode-option {
    background: var(--emerald); border-color: var(--emerald); color: #fff;
}
#book-appointment-wizard .btn-check:focus-visible + .dtv-mode-option { box-shadow: 0 0 0 .22rem rgba(78,127,101,.18); }

/* Créneaux horaires */
#book-appointment-wizard #available-hours .available-hour {
    border-radius: 11px !important; border: 1px solid #D1D5DB !important; color: var(--forest) !important;
    font-weight: 500; background: #fff;
}
#book-appointment-wizard #available-hours .available-hour:hover { border-color: var(--emerald) !important; background: var(--emerald-50) !important; }
#book-appointment-wizard #available-hours .selected-hour {
    background: var(--emerald) !important; border-color: var(--emerald) !important; color: #fff !important;
}

/* Calendrier (flatpickr) */
#book-appointment-wizard .flatpickr-calendar.inline { border-radius: 14px; overflow: hidden; box-shadow: none; border: 1px solid var(--line); }
#book-appointment-wizard .flatpickr-months,
#book-appointment-wizard .flatpickr-months .flatpickr-month,
#book-appointment-wizard .flatpickr-weekdays,
#book-appointment-wizard span.flatpickr-weekday { background: var(--forest) !important; color: #fff !important; fill: #fff !important; }
#book-appointment-wizard .flatpickr-current-month { font-family: var(--font-display); font-weight: 700; }
#book-appointment-wizard .flatpickr-current-month .flatpickr-monthDropdown-months,
#book-appointment-wizard .flatpickr-current-month input.cur-year {
    background: transparent !important; color: #fff !important; font-weight: 700; font-family: var(--font-display);
}
#book-appointment-wizard .flatpickr-monthDropdown-months option { background: var(--forest); color: #fff; }
#book-appointment-wizard .flatpickr-months .flatpickr-prev-month svg,
#book-appointment-wizard .flatpickr-months .flatpickr-next-month svg { fill: #fff !important; }
#book-appointment-wizard .flatpickr-day.selected,
#book-appointment-wizard .flatpickr-day.selected:hover {
    background: var(--emerald) !important; border-color: var(--emerald) !important; color: #fff !important;
}
#book-appointment-wizard .flatpickr-day:not(.flatpickr-disabled):not(.selected):hover { background: var(--emerald-50); border-color: var(--emerald-50); }
#book-appointment-wizard .flatpickr-day.today:not(.selected) { border-color: var(--mint); }

/* Pied de carte */
.dtv-card-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 26px; background: #FAFCFB; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2);
}
.dtv-card-foot-note svg, .dtv-card-foot-note i { color: var(--emerald); }
.dtv-card-foot a { color: var(--emerald-hover); font-weight: 600; }
.dtv-card-login {
    text-decoration: none; font-weight: 600; color: var(--forest) !important;
    padding: 6px 13px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
}

/* Pied de page */
.dtv-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px;
    padding: 22px 0 0; color: rgba(255,255,255,.62); font-size: 13.5px;
}
.dtv-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dtv-foot a { color: rgba(255,255,255,.82); text-decoration: none; }
.dtv-foot a:hover { color: #fff; text-decoration: underline; }
.dtv-oss { font-size: 12.5px; }

/* Mobile */
@media (max-width: 767.98px) {
    .dtv-top { padding-top: 14px; }
    .dtv-back span { display: none; }
    .dtv-back { padding: 8px 12px; }
    .dtv-hero { padding: 26px 0 22px; }
    .dtv-hero h1 em { white-space: normal; }
    .dtv-card-head { padding: 18px 16px; }
    #company-name { flex-direction: column; }
    .dtv-card-ico { margin: 0 0 10px; }
    #book-appointment-wizard .wizard-frame { padding: 20px 16px !important; }
    .dtv-card-foot { padding: 14px 16px; justify-content: center; text-align: center; }
    .dtv-foot { justify-content: center; text-align: center; }
}