/**
 * Tunnel de RDV — CSS de base + barre de progression (Lot 0).
 *
 * Calé sur les tokens de charte --sos-* (mêmes valeurs que store-locator.css).
 * Redéclarés ici en :root car cette CSS peut être chargée seule sur
 * /prendre-rendez-vous/ (sans store-locator.css). var(..., fallback) pour rester
 * cohérent si les deux feuilles cohabitent sur une même page.
 */

:root {
    --sos-blue:        #21326A;
    --sos-blue-deep:   #0E1A45;
    --sos-yellow:      #FFCC2B;
    --sos-yellow-deep: #E5B500;
    --sos-bg:          #F6F8FC;
    --sos-surface-1:   #FFFFFF;
    --sos-text:        #21326A;
    --sos-text-soft:   #5A6E8C;
    --sos-text-muted:  #8B96AE;
    --sos-border:      rgba(33, 50, 106, 0.10);
    --sos-border-strong: rgba(33, 50, 106, 0.18);
    --sos-success:     #1FA76F;
    --sos-r-sm:        12px;
    --sos-r-md:        16px;
    --sos-r-lg:        20px;
    --sos-r-pill:      999px;
    --sos-elev-2:
        0 1px 2px rgba(33, 50, 106, 0.04),
        0 4px 8px rgba(33, 50, 106, 0.06),
        0 8px 16px rgba(33, 50, 106, 0.04);
    --sos-ease:        cubic-bezier(0.4, 0, 0.2, 1);
}

.sos-rdv,
.sos-rdv * {
    box-sizing: border-box;
}

.sos-rdv {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--sos-text, #21326A);
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 16px 40px;
}

/* Layout : mono-colonne par défaut (mobile) ; 2 colonnes + récap sticky en desktop. */
.sos-rdv__layout {
    display: block;
}
.sos-rdv__main {
    min-width: 0;
}
.sos-rdv__recap {
    display: none; /* desktop only */
}
@media (min-width: 900px) {
    .sos-rdv__layout {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 28px;
    }
    .sos-rdv__main {
        flex: 1 1 auto;
        max-width: 760px;
    }
    .sos-rdv__recap {
        display: block;
        flex: 0 0 300px;
        position: sticky;
        top: 24px;
    }
}

/* Masque le titre de page WP (h1.entry-title dans .page-header) : cette feuille
   n'est chargée que sur la ou les pages contenant [sos_rdv], donc l'effet est
   limité au tunnel. Permet de remonter tout le bloc. */
.page-header {
    display: none !important;
}

/* Corrige l'attribut [hidden] : nos éléments ont un display explicite (flex),
   qui sinon l'emporte sur la règle UA [hidden]{display:none}. */
.sos-rdv [hidden] {
    display: none !important;
}

.sos-rdv__noscript {
    text-align: center;
    color: var(--sos-text-soft, #5A6E8C);
}

/* ==========================================================================
   Barre de progression — 4 étapes (étapes 1→4)
   ========================================================================== */
.sos-rdv__progress {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 28px;
}

.sos-rdv__progress-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    text-align: center;
}

/* Trait de liaison entre les pastilles. */
.sos-rdv__progress-step::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--sos-border, rgba(33, 50, 106, 0.10));
    z-index: 0;
}
.sos-rdv__progress-step:first-child::before {
    display: none;
}
.sos-rdv__progress-step.is-done::before,
.sos-rdv__progress-step.is-current::before {
    background: var(--sos-yellow, #FFCC2B);
}

.sos-rdv__progress-num {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sos-r-pill, 999px);
    background: var(--sos-surface-1, #FFFFFF);
    border: 2px solid var(--sos-border-strong, rgba(33, 50, 106, 0.18));
    color: var(--sos-text-muted, #8B96AE);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s var(--sos-ease, ease);
}

.sos-rdv__progress-step.is-current .sos-rdv__progress-num {
    background: var(--sos-yellow, #FFCC2B);
    border-color: var(--sos-yellow, #FFCC2B);
    color: var(--sos-blue, #21326A);
}

.sos-rdv__progress-step.is-done .sos-rdv__progress-num {
    background: var(--sos-blue, #21326A);
    border-color: var(--sos-blue, #21326A);
    color: #FFFFFF;
}

.sos-rdv__progress-label {
    font-size: 12px;
    line-height: 1.3;
    color: var(--sos-text-muted, #8B96AE);
    max-width: 12ch;
}
.sos-rdv__progress-step.is-current .sos-rdv__progress-label {
    color: var(--sos-text, #21326A);
    font-weight: 600;
}

/* ==========================================================================
   En-tête centre verrouillé
   ========================================================================== */
.sos-rdv__centre {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 14px 18px;
    margin-bottom: 24px;
    background: var(--sos-surface-1, #FFFFFF);
    border: 1px solid var(--sos-border, rgba(33, 50, 106, 0.10));
    border-radius: var(--sos-r-md, 16px);
    box-shadow: var(--sos-elev-2);
}

/* Étape 0 : fiche BLEUE, titre en Outfit 900, « centre » en accent jaune. */
.sos-rdv__centre--intro {
    padding: 20px 24px;
    background: #21326A !important;
    border-color: #21326A !important;
}
.sos-rdv__centre-intro {
    font-family: 'Outfit', 'Poppins', system-ui, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.1;
    color: #FFFFFF;
}
.sos-rdv__centre-intro-accent {
    color: var(--sos-yellow, #FFCC2B);
}

.sos-rdv__centre-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sos-text-muted, #8B96AE);
}

.sos-rdv__centre-nom {
    font-weight: 600;
    font-size: 16px;
    color: var(--sos-text, #21326A);
    margin-right: auto;
}

.sos-rdv__centre-change {
    padding: 8px 16px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF !important;
    background: #21326A !important;
    background-image: none !important;
    border: none !important;
    border-radius: 14px 4px 14px 4px !important;
    text-decoration: none;
}
.sos-rdv__centre-change:focus-visible {
    outline: 2px solid #21326A;
    outline-offset: 2px;
}

/* ==========================================================================
   Étapes
   ========================================================================== */
.sos-rdv-step {
    background: var(--sos-surface-1, #FFFFFF);
    border: 1px solid var(--sos-border, rgba(33, 50, 106, 0.10));
    border-radius: var(--sos-r-lg, 20px);
    box-shadow: var(--sos-elev-2);
    padding: 28px 24px;
}

.sos-rdv-step__title {
    margin: 0 0 8px;
    font-family: 'Outfit', 'Poppins', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: var(--sos-text, #21326A);
}
/* Filet jaune sous les titres (DA standard). */
.sos-rdv-step__title::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 8px;
    background: var(--sos-yellow, #FFCC2B);
    border-radius: 2px;
}

.sos-rdv-step__help,
.sos-rdv-step__placeholder {
    margin: 0 0 20px;
    color: var(--sos-text-soft, #5A6E8C);
    font-size: 15px;
    line-height: 1.5;
}

/* Accessibilité : masque visuel qui reste lu par les lecteurs d'écran (clip, pas display:none). */
.sos-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Étape 0 : barre de recherche + dropdown résultats
   ========================================================================== */
.sos-rdv-search__card {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}

/* Bloc blanc = seul cadre (le champ n'a pas de bordure propre). */
.sos-rdv-search__field {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #FFFFFF;
    border: 1px solid var(--sos-border-strong, rgba(33, 50, 106, 0.18));
    border-radius: var(--sos-r-md, 16px);
}
.sos-rdv-search__field:focus-within {
    border-color: var(--sos-blue, #21326A);
    box-shadow: 0 0 0 3px rgba(33, 50, 106, 0.10);
}

/* Bouton géoloc : icône cible BLANCHE sur fond BLEU, À GAUCHE du champ (hors cadre). Sans hover. */
.sos-rdv-search__gps {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: stretch;
    width: 48px;
    padding: 0;
    border: none;
    border-radius: var(--sos-r-md, 16px);
    background: #21326A !important;
    background-image: none !important;
    color: #FFFFFF !important;
    cursor: pointer;
}
.sos-rdv-search__gps:focus-visible {
    outline: 2px solid var(--sos-blue, #21326A);
    outline-offset: 2px;
}
.sos-rdv-search__gps.is-loading {
    opacity: 0.5;
    cursor: progress;
}
.sos-rdv-search__gps-icon {
    display: inline-flex;
}

/* Champ de saisie : aucune bordure propre (une seule bordure = celle du bloc). */
.sos-rdv-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 4px;
    font: inherit;
    color: var(--sos-text, #21326A);
    background: transparent;
    border: none !important;
    box-shadow: none !important;
}
.sos-rdv-search__input:focus,
.sos-rdv-search__input:hover {
    outline: none;
    border: none !important;
    box-shadow: none !important;
}

/* CTA « Trouver mon centre » : DA reprise à l'identique du bouton jaune du site
   (header/footer) — jaune #FFCC2B, texte #002654, Outfit 700, radius 8px, picto
   triangle+ navy, couleurs figées (sans hover). Reste le submit de la recherche. */
.sos-rdv-search__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px !important;
    font-family: 'Outfit', 'Poppins', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #002654 !important;
    background: #FFCC2B !important;
    background-image: none !important;
    border: none !important;
    border-radius: 14px 4px 14px 4px !important;
    box-shadow: none !important;
    cursor: pointer;
}
.sos-rdv-search__cta:hover,
.sos-rdv-search__cta:focus,
.sos-rdv-search__cta:active {
    color: #002654 !important;
    background: #FFCC2B !important;
    background-image: none !important;
}
.sos-rdv-search__cta:focus-visible {
    outline: 2px solid #002654;
    outline-offset: 2px;
}
.sos-rdv-search__cta-picto {
    display: inline-flex;
    flex: 0 0 auto;
}
.sos-rdv-search__cta-picto svg {
    display: block;
}

/* ---- Lien géoloc explicite « Utiliser ma position GPS » ----
   Ligne 2 sous la barre. DA reprise à l'identique du lien du store-locator
   (.sos-sl__locate-link) : bleu clair, icône rond + « + », sans hover. */
.sos-rdv-search__locate-row {
    flex: 0 0 100%;   /* force le retour à la ligne sous la barre */
    display: flex;
    margin-top: 2px;
}
.sos-rdv-search__locate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    color: #009FE6 !important;
    font-family: inherit !important;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 0 !important;
    cursor: pointer;
}
/* Aucun hover : couleur figée sur tous les états. */
.sos-rdv-search__locate:hover,
.sos-rdv-search__locate:focus,
.sos-rdv-search__locate:active {
    color: #009FE6 !important;
    background: transparent !important;
    background-image: none !important;
}
.sos-rdv-search__locate:focus-visible {
    outline: 2px solid #009FE6;
    outline-offset: 2px;
}
.sos-rdv-search__locate-icon {
    display: inline-flex;
    align-items: center;
    color: currentColor;
}
.sos-rdv-search__locate-icon svg {
    flex-shrink: 0;
}

/* Mobile (≤768px) : 3 lignes — [icône géoloc + champ] / [lien GPS] / [bouton pleine largeur]. */
@media (max-width: 768px) {
    .sos-rdv-search__gps        { order: 1; }
    .sos-rdv-search__field      { order: 2; }
    .sos-rdv-search__locate-row { order: 3; }
    .sos-rdv-search__cta        { order: 4; flex: 0 0 100%; width: 100%; justify-content: center; }
}

/* ---- Dropdown résultats (sous la barre, dans la page) ---- */
.sos-rdv-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}
.sos-rdv-results__msg {
    margin: 0;
    color: var(--sos-text-soft, #5A6E8C);
    font-size: 14px;
}
.sos-rdv-results__more {
    align-self: flex-start;
    font-size: 14px;
    color: var(--sos-blue, #21326A);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Les 3 résultats dans UNE fiche, lignes séparées par un trait. */
.sos-rdv-results-card {
    background: #FFFFFF;
    border: 1px solid var(--sos-border, rgba(33, 50, 106, 0.10));
    border-radius: var(--sos-r-lg, 20px);
    box-shadow: var(--sos-elev-2);
    overflow: hidden;
}

/* Chaque centre = une ligne cliquable (neutralise le chrome carte individuel). */
.sos-rdv-results-card .sos-sl__card.sos-rdv-result {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sos-border, rgba(33, 50, 106, 0.10));
    cursor: pointer;
}
.sos-rdv-results-card .sos-sl__card.sos-rdv-result:last-child {
    border-bottom: none;
}
.sos-rdv-results-card .sos-rdv-result:focus-visible {
    outline: 2px solid var(--sos-blue, #21326A);
    outline-offset: -2px;
}

/* Ligne compacte : ville · CP à gauche / note + statut à droite. */
.sos-rdv-result .sos-sl__card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.sos-rdv-result__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}
.sos-rdv-result__line .sos-sl__card-city {
    margin: 0;
}
.sos-rdv-result__line .sos-sl__card-meta {
    margin: 0;
    flex: 0 0 auto;
}

/* ---- Navigation d'étape ---- */
.sos-rdv-step__nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}
.sos-rdv-step__nav .sos-rdv-btn--primary {
    margin-left: auto;
}

/* ---- Boutons de navigation : style feuille, bleu marine, texte blanc, sans hover.
   Retour + Continuer partagent la même DA (couleurs figées). ---- */
.sos-rdv-btn,
.sos-rdv-btn--primary,
.sos-rdv-btn--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font: inherit;
    font-weight: 700;
    color: #FFFFFF !important;
    background: #21326A !important;
    background-image: none !important;
    border: none !important;
    border-radius: 14px 4px 14px 4px !important;
    box-shadow: none !important;
    cursor: pointer;
}
.sos-rdv-btn:focus-visible {
    outline: 2px solid #21326A;
    outline-offset: 2px;
}
.sos-rdv-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Titres de section internes (Outfit 900 déjà posé) : espacement inter-blocs. */
.sos-rdv-step__title + .sos-rdv-schema,
.sos-rdv-step__title + .sos-rdv-cards,
.sos-rdv-step__title + .sos-rdv-fields {
    margin-top: 14px;
}
.sos-rdv-step--diagnostic .sos-rdv-step__title:not(:first-child),
.sos-rdv-step--vehicule .sos-rdv-step__title:not(:first-child) {
    margin-top: 26px;
}

/* ==========================================================================
   Étape 1 — Schéma vitrage (vue de dessus) à gauche + liste à droite
   ========================================================================== */
.sos-rdv-glazing {
    display: flex;
    align-items: center;
    gap: 24px;
}
/* Schéma = élément principal, prend de la place. */
.sos-rdv-schema {
    flex: 1 1 300px;
    max-width: 340px;
    text-align: center;
}
.sos-rdv-schema svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 460px;
    display: block;
}
/* Zones de vitrage (hit-areas transparentes du SVG) : cliquables sur toute leur
   surface. Sélectionnées = remplies teal. */
/* pointer-events sur les paths (id : forte spécificité) MAIS pas de fill ici,
   sinon il écraserait le fill teal des états .is-selected/:hover (spécificité classe). */
.sos-rdv-schema #vitres path {
    pointer-events: all;
    cursor: pointer;
}
.sos-rdv-zone {
    fill: transparent;
    pointer-events: all;
    cursor: pointer;
}
.sos-rdv-zone:hover,
.sos-rdv-zone.is-selected {
    fill: #21326b66;
}
.sos-rdv-zone:focus {
    outline: none;
}
.sos-rdv-zone:focus-visible {
    outline: none;
    fill: #21326b66;
    stroke: #21326B;
    stroke-width: 2;
}

/* Liste des vitres : 2 colonnes, boutons compacts. Inactif blanc/bordure grise/
   marine ; sélectionné TEAL/blanc. Aucun hover. */
.sos-rdv-vitres-list {
    flex: 1 1 300px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
}
.sos-rdv-vitre-btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: auto;
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: #21326A !important;
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid var(--sos-border-strong, rgba(33, 50, 106, 0.18)) !important;
    border-radius: var(--sos-r-sm, 12px) !important;
    cursor: pointer;
}
.sos-rdv-vitre-btn.is-selected {
    background: #21326B !important;
    border-color: #21326B !important;
    color: #FFFFFF !important;
}
.sos-rdv-vitre-btn:focus-visible {
    outline: 2px solid var(--sos-blue, #21326A);
    outline-offset: 2px;
}

/* Cartes type de dommage : inactif marine/texte blanc, sélectionné jaune/marine.
   Icône (impact/fissure) au-dessus du label. Compactées. Aucun hover. */
.sos-rdv-cards {
    display: grid;
    gap: 10px;
}
.sos-rdv-cards--dommages {
    grid-template-columns: repeat(3, 1fr);
}
.sos-rdv-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #FFFFFF !important;
    background: #21326A !important;
    background-image: none !important;
    border: none !important;
    border-radius: var(--sos-r-md, 16px) !important;
    cursor: pointer;
}
.sos-rdv-card.is-selected {
    background: #FFCC2B !important;
    color: #21326A !important;
}
.sos-rdv-card:focus-visible {
    outline: 2px solid var(--sos-blue, #21326A);
    outline-offset: 2px;
}
.sos-rdv-card__ico-wrap {
    display: inline-flex;
}
.sos-rdv-card__ico {
    width: 38px;
    height: 28px;
    color: currentColor;
}

/* Verdict dynamique */
.sos-rdv-verdict {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: var(--sos-r-md, 16px);
    font-weight: 600;
}
.sos-rdv-verdict--green {
    background: var(--sos-success-bg, rgba(31, 167, 111, 0.10));
    color: var(--sos-success, #1FA76F);
}
.sos-rdv-verdict--orange {
    background: var(--sos-warning-bg, rgba(232, 156, 43, 0.12));
    color: var(--sos-warning, #E89C2B);
}
.sos-rdv-verdict__icon {
    display: inline-flex;
    flex: 0 0 auto;
}
.sos-rdv-verdict__text {
    flex: 1 1 auto;
}

/* Badge « 0€ de franchise » */
.sos-rdv-badge--franchise {
    flex: 0 0 auto;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sos-blue, #21326A);
    background: var(--sos-yellow, #FFCC2B);
    border-radius: var(--sos-r-pill, 999px);
    white-space: nowrap;
}

/* ==========================================================================
   Étape 2 — Véhicule + assurance
   ========================================================================== */
.sos-rdv-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.sos-rdv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sos-rdv-field:first-child {
    grid-column: 1 / -1;
}
.sos-rdv-field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sos-text-soft, #5A6E8C);
}
.sos-rdv-field__req {
    color: var(--sos-danger, #D94F30);
}
.sos-rdv-field__input,
.sos-rdv-combo__input {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    color: var(--sos-text, #21326A);
    background: var(--sos-bg, #F6F8FC);
    border: 1px solid var(--sos-border-strong, rgba(33, 50, 106, 0.18));
    border-radius: var(--sos-r-sm, 12px);
}
.sos-rdv-field__input:focus,
.sos-rdv-combo__input:focus {
    outline: none;
    border-color: var(--sos-blue, #21326A);
    box-shadow: 0 0 0 3px rgba(33, 50, 106, 0.10);
}

/* Combobox assureur (liste filtrable) */
.sos-rdv-combo {
    position: relative;
}
.sos-rdv-combo__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--sos-surface-1, #FFFFFF);
    border: 1px solid var(--sos-border-strong, rgba(33, 50, 106, 0.18));
    border-radius: var(--sos-r-md, 16px);
    box-shadow: var(--sos-elev-3);
}
.sos-rdv-combo__opt {
    padding: 10px 12px;
    border-radius: var(--sos-r-sm, 12px);
    cursor: pointer;
    color: var(--sos-text, #21326A);
    font-size: 15px;
}
.sos-rdv-combo__opt.is-active {
    background: var(--sos-blue-soft, #ECF0F8);
}
.sos-rdv-combo__opt.is-other {
    margin-top: 4px;
    border-top: 1px solid var(--sos-border, rgba(33, 50, 106, 0.10));
    font-weight: 600;
    color: var(--sos-blue, #21326A);
}

/* Encart de prise en charge */
.sos-rdv-encart {
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: var(--sos-r-md, 16px);
    font-size: 14px;
    line-height: 1.5;
}
.sos-rdv-encart--green {
    background: var(--sos-success-bg, rgba(31, 167, 111, 0.10));
    color: var(--sos-success, #1FA76F);
    font-weight: 600;
}
.sos-rdv-encart--warning {
    background: var(--sos-warning-bg, rgba(232, 156, 43, 0.12));
    color: var(--sos-warning, #E89C2B);
    font-weight: 600;
}
.sos-rdv-encart--neutral {
    background: var(--sos-bg-deep, #EEF2F8);
    color: var(--sos-text-soft, #5A6E8C);
}

/* Réassurance « 0 € de franchise » : callout positif affiché systématiquement
   sous l'encart assureur, quelle que soit la compagnie. */
.sos-rdv-franchise {
    margin-top: 12px;
    padding: 14px 18px;
    border-radius: var(--sos-r-md, 16px);
    background: var(--sos-success-bg, rgba(31, 167, 111, 0.10));
    border: 1px solid var(--sos-success, #1FA76F);
}
.sos-rdv-franchise__title {
    margin: 0 0 4px;
    font-weight: 800;
    font-size: 15px;
    color: var(--sos-success, #1FA76F);
}
.sos-rdv-franchise__body {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sos-text, #22326A);
}
.sos-rdv-franchise__punch {
    margin: 0;
    font-weight: 800;
    font-size: 16px;
    color: var(--sos-success, #1FA76F);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 560px) {
    .sos-rdv__progress-label {
        font-size: 11px;
    }
    .sos-rdv-step {
        padding: 22px 16px;
    }
    .sos-rdv-search__input {
        flex-basis: 100%;
    }
    .sos-rdv-fields {
        grid-template-columns: 1fr;
    }
    .sos-rdv-cards--dommages {
        grid-template-columns: repeat(3, 1fr);
    }
    .sos-rdv-glazing {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .sos-rdv-schema {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .sos-rdv-schema svg {
        max-height: 380px;
    }
}

/* ==========================================================================
   Récapitulatif latéral « Mon intervention » (desktop, sticky)
   ========================================================================== */
.sos-rdv-recap__card {
    background: var(--sos-surface-1, #FFFFFF);
    border: 1px solid var(--sos-border, rgba(33, 50, 106, 0.10));
    border-radius: var(--sos-r-lg, 20px);
    box-shadow: var(--sos-elev-2);
    padding: 22px;
}
.sos-rdv-recap__title {
    margin: 0 0 18px;
    font-family: 'Outfit', 'Poppins', system-ui, sans-serif;
    font-weight: 900;
    font-size: 18px;
    color: var(--sos-text, #21326A);
}
/* Filet jaune sous le titre. */
.sos-rdv-recap__title::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 8px;
    background: var(--sos-yellow, #FFCC2B);
    border-radius: 2px;
}
.sos-rdv-recap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sos-rdv-recap__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.sos-rdv-recap__check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sos-r-pill, 999px);
    background: var(--sos-success-bg, rgba(31, 167, 111, 0.10));
    color: var(--sos-success, #1FA76F);
}
.sos-rdv-recap__text {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sos-text, #21326A);
}
.sos-rdv-recap__sub {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sos-text-soft, #5A6E8C);
}
.sos-rdv-recap__note {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--sos-text-soft, #5A6E8C);
}

/* ==========================================================================
   Étape 3 — Rendez-vous (calendrier + créneaux)
   ========================================================================== */
.sos-rdv-rdv__mention {
    margin: 6px 0 18px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sos-blue, #21326A);
    background: var(--sos-blue-soft, #ECF0F8);
    border-radius: var(--sos-r-sm, 12px);
}
.sos-rdv-rdv__loading {
    color: var(--sos-text-soft, #5A6E8C);
    font-size: 14px;
}
.sos-rdv-calendar {
    max-width: 360px;
}
.sos-rdv-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sos-rdv-cal__month {
    font-weight: 700;
    color: var(--sos-text, #21326A);
    text-transform: capitalize;
}
.sos-rdv-cal__nav {
    width: 32px;
    height: 32px;
    font: inherit;
    font-size: 18px;
    line-height: 1;
    color: #FFFFFF !important;
    background: #21326A !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer;
}
.sos-rdv-cal__nav--off {
    opacity: 0.3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sos-rdv-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.sos-rdv-cal__dow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--sos-text-muted, #8B96AE);
    padding-bottom: 4px;
}
.sos-rdv-cal__blank {
    aspect-ratio: 1 / 1;
}
.sos-rdv-cal__day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #21326A !important;
    background: #FFFFFF !important;
    border: 1px solid var(--sos-border-strong, rgba(33, 50, 106, 0.18)) !important;
    border-radius: var(--sos-r-sm, 12px) !important;
    cursor: pointer;
}
.sos-rdv-cal__day.is-selected {
    background: var(--sos-yellow, #FFCC2B) !important;
    border-color: var(--sos-yellow, #FFCC2B) !important;
    color: #21326A !important;
}
.sos-rdv-cal__day.is-disabled {
    color: var(--sos-text-faded, #B7C0D1) !important;
    background: var(--sos-bg-deep, #EEF2F8) !important;
    border-color: transparent !important;
    cursor: not-allowed;
}
/* Créneaux */
.sos-rdv-slots {
    margin-top: 22px;
}
.sos-rdv-slots__title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--sos-text, #21326A);
    text-transform: capitalize;
}
.sos-rdv-slots__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.sos-rdv-slot {
    padding: 10px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #21326A !important;
    background: #FFFFFF !important;
    border: 1px solid var(--sos-border-strong, rgba(33, 50, 106, 0.18)) !important;
    border-radius: var(--sos-r-md, 16px) !important;
    cursor: pointer;
}
.sos-rdv-slot.is-selected {
    background: var(--sos-yellow, #FFCC2B) !important;
    border-color: var(--sos-yellow, #FFCC2B) !important;
    color: #21326A !important;
}
.sos-rdv-slots__empty {
    color: var(--sos-text-soft, #5A6E8C);
    font-size: 14px;
}
/* Véhicule de prêt */
.sos-rdv-pret {
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid var(--sos-border, rgba(33, 50, 106, 0.10));
    border-radius: var(--sos-r-md, 16px);
}
.sos-rdv-pret__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--sos-text, #21326A);
    cursor: pointer;
}
.sos-rdv-pret__row input {
    width: 18px;
    height: 18px;
    accent-color: var(--sos-blue, #21326A);
}
.sos-rdv-pret__note {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--sos-text-soft, #5A6E8C);
}

/* ==========================================================================
   Étape 4 — Coordonnées (double opt-in)
   ========================================================================== */
.sos-rdv-field--full {
    display: block;
    margin-top: 14px;
}
.sos-rdv-consent {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sos-rdv-consent__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sos-text-soft, #5A6E8C);
    cursor: pointer;
}
.sos-rdv-consent__row input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--sos-blue, #21326A);
}
.sos-rdv-consent__row a {
    color: var(--sos-blue, #21326A);
    text-decoration: underline;
}
/* reCAPTCHA v2 (case à cocher) — le widget est une iframe de largeur fixe 302px :
   on le laisse se réduire proprement sur petit écran plutôt que déborder. */
.sos-rdv-captcha {
    margin-top: 18px;
}
.sos-rdv-captcha__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sos-text-soft, #5A6E8C);
}
.sos-rdv-captcha > div {
    max-width: 100%;
}
@media (max-width: 360px) {
    .sos-rdv-captcha > div {
        transform: scale(0.87);
        transform-origin: 0 0;
    }
}
.sos-rdv-submit-error {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--sos-r-md, 16px);
    background: var(--sos-danger-bg, rgba(217, 79, 48, 0.10));
    color: var(--sos-danger, #D94F30);
    font-size: 14px;
    font-weight: 600;
}

/* ==========================================================================
   Confirmation (étape 5)
   ========================================================================== */
.sos-rdv-confirm__msg {
    margin: 0 0 22px;
    padding: 14px 18px;
    font-weight: 600;
    color: var(--sos-success, #1FA76F);
    background: var(--sos-success-bg, rgba(31, 167, 111, 0.10));
    border-radius: var(--sos-r-md, 16px);
}
.sos-rdv-confirm__list {
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sos-rdv-confirm__row {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sos-border, rgba(33, 50, 106, 0.10));
}
.sos-rdv-confirm__row dt {
    flex: 0 0 130px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sos-text-muted, #8B96AE);
}
.sos-rdv-confirm__row dd {
    flex: 1 1 auto;
    margin: 0;
    font-weight: 600;
    color: var(--sos-text, #21326A);
}
.sos-rdv-confirm__prep {
    padding: 16px 18px;
    margin-bottom: 24px;
    background: var(--sos-bg-deep, #EEF2F8);
    border-radius: var(--sos-r-md, 16px);
}
.sos-rdv-confirm__prep-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sos-text, #21326A);
}
.sos-rdv-confirm__prep-list {
    margin: 0;
    padding-left: 20px;
    color: var(--sos-text-soft, #5A6E8C);
    font-size: 14px;
    line-height: 1.6;
}
.sos-rdv-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* =====================================================================
 * Étape 2 — Autofill plaque (loupe, statut, plaque étrangère, honeypot).
 * ================================================================== */
.sos-rdv-plaque-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.sos-rdv-plaque-row .sos-rdv-field__input {
    flex: 1 1 auto;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Loupe : même DA que les boutons du tunnel (marine, contenu blanc, sans bordure
   ni variation au survol). Les !important neutralisent les styles de bouton du
   thème/Elementor, qui ne passaient l'icône en blanc qu'au survol. Le rayon reste
   celui des champs pour rester aligné sur l'input plaque. */
.sos-rdv-plaque-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    padding: 0;
    color: #FFFFFF !important;
    background: #21326A !important;
    background-image: none !important;
    border: none !important;
    border-radius: var(--sos-r-sm, 12px) !important;
    box-shadow: none !important;
    cursor: pointer;
}
.sos-rdv-plaque-btn:hover,
.sos-rdv-plaque-btn:focus,
.sos-rdv-plaque-btn:active {
    color: #FFFFFF !important;
    background: #21326A !important;
    filter: none;
}
.sos-rdv-plaque-btn:focus-visible {
    outline: 2px solid #21326A;
    outline-offset: 2px;
}
.sos-rdv-plaque-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sos-rdv-plaque-btn.is-loading svg { animation: sos-rdv-spin 0.8s linear infinite; }
@keyframes sos-rdv-spin { to { transform: rotate(360deg); } }

.sos-rdv-plaque-status {
    font-size: 12.5px;
    line-height: 1.4;
    margin-top: 2px;
}
.sos-rdv-plaque-status--info { color: var(--sos-text-soft, #5A6E8C); }
.sos-rdv-plaque-status--ok   { color: var(--sos-success, #1FA76F); font-weight: 600; }
.sos-rdv-plaque-status--warn { color: var(--sos-yellow-deep, #E5B500); }

/* Bascule « plaque étrangère » + sélecteur de pays : pleine largeur dans la grille. */
.sos-rdv-field--foreign-toggle {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sos-text-soft, #5A6E8C);
    cursor: pointer;
}
.sos-rdv-field--foreign-toggle input { width: 16px; height: 16px; }
.sos-rdv-field--pays { grid-column: 1 / -1; }

/* Marqueur camping-car / véhicule aménagé : case pleine largeur, même DA que la
   bascule « plaque étrangère ». Le libellé « (pare-brise spécifique) » est atténué. */
.sos-rdv-field--camping {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sos-text-soft, #5A6E8C);
    cursor: pointer;
}
.sos-rdv-field--camping input { width: 16px; height: 16px; }
.sos-rdv-field__hint { font-weight: 400; opacity: 0.75; }

/* Honeypot : hors écran, jamais visible ni focusable pour un humain. */
.sos-rdv-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}