/*
 * Bouton « Prendre rendez-vous ».
 *
 * Le bouton apparaît dans la barre d'en-tête, dans le menu, sur l'accueil et sur
 * la page de confirmation d'un formulaire. Seules les variantes propres à ces
 * emplacements sont décrites ici : partout ailleurs, il porte les classes du
 * thème (`theme-button p-color-bg`) et n'a besoin de rien.
 *
 * ⚠️ Contraste. Le rose du thème, rgb(233, 66, 114), donne 3,83:1 avec du texte
 * blanc : conforme pour du grand texte (3:1) mais PAS pour du texte courant,
 * qui demande 4,5:1. Le bouton de la barre d'en-tête étant petit, il utilise une
 * variante à peine plus foncée, #d32a5f, qui atteint 4,91:1 sans s'écarter de la
 * couleur de marque. Les gros boutons du site gardent le rose du thème.
 */

/* ------------------------------------------------------------------ */
/* Barre d'en-tête, à côté du téléphone et des réseaux                 */
/* ------------------------------------------------------------------ */

.rdv-bouton-entete {
    display: inline-block;
    margin-left: 14px;
    padding: 4px 14px;
    border-radius: 3px;
    background: #d32a5f;
    color: #fff;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    transition: background .3s ease;
}

.rdv-bouton-entete:hover,
.rdv-bouton-entete:focus {
    background: #b02350;
    color: #fff;
    text-decoration: none;
}

/* Le contour de focus du thème disparaît sur fond coloré. */
.rdv-bouton-entete:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.rdv-bouton-entete .fa {
    margin-right: 6px;
}

/*
 * Sous 768 px, la barre d'en-tête passe ses éléments en colonne : le bouton
 * devient un bloc, haut de 44 px pour rester une cible tactile confortable.
 * Sa largeur reste celle de l'élément de liste qui le porte, mesurée à 192 px
 * en 390 px de large.
 */
@media (max-width: 767px) {
    /*
     * La barre d en-tete laissait ses elements en ligne flottante : le bouton
     * se retrouvait decale au milieu, le telephone a sa droite et les reseaux
     * rejetes sur une deuxieme ligne. On la remet a plat.
     */
    header .float-right {
        float: none !important;
    }

    header .float-right ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 16px;
        margin: 0;
        padding: 10px 0;
    }

    header .float-right li {
        margin: 0;
    }

    /* Le bouton prend sa propre ligne, en tete : c est l action mise en avant. */
    .rdv-entete-item {
        flex: 1 0 100%;
        order: -1;
    }

    .rdv-bouton-entete {
        display: block;
        margin: 0;
        /* 11 + 11 + 22,4 px de hauteur de ligne = 44 px, la cible tactile
           recommandee. A 8 px de padding le bouton n en faisait que 38. */
        padding: 11px 14px;
        text-align: center;
    }
}

/* ------------------------------------------------------------------ */
/* État de chargement                                                  */
/* ------------------------------------------------------------------ */

/*
 * Le widget est chargé au clic : il y a donc un court instant entre le clic et
 * l'ouverture de la fenêtre. Sans témoin, le visiteur clique une seconde fois.
 */
.rdv-bouton-chargement {
    opacity: .7;
    cursor: progress;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Encart de l'accueil et de la page de confirmation                   */
/* ------------------------------------------------------------------ */

.rdv-encart {
    padding: 28px 24px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fbfbfb;
    text-align: center;
}

.rdv-encart-titre {
    margin: 0 0 10px;
    color: #302632;
    font-size: 20px;
    font-weight: 700;
}

.rdv-encart p {
    margin: 0 0 18px;
    color: #4a4a4a;
}

.rdv-bouton-bloc {
    display: block;
    width: 100%;
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* Page dédiée                                                         */
/* ------------------------------------------------------------------ */

/*
 * Hauteur de l'agenda intégré. Calendly a besoin d'une hauteur explicite : son
 * iframe ne se dimensionne pas sur son contenu, et sans cette règle le
 * calendrier est tronqué à quelques dizaines de pixels.
 */
.rdv-agenda {
    min-height: 700px;
}

@media (max-width: 767px) {
    .rdv-agenda {
        min-height: 1000px;
    }
}

/* Message affiché si le widget ne se charge pas : le lien direct reste utile. */
.rdv-repli {
    padding: 24px;
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* Bloc de l'accueil                                                   */
/* ------------------------------------------------------------------ */

/*
 * Le bloc reprend .appoinment-form-style-two du thème : fond blanc, remonté de
 * 115 px, coiffé d'un bandeau coloré de 100 px. Le thème ne met du padding que
 * sur le `form` qu'il contenait ; son remplaçant a donc besoin du sien.
 */
.rdv-bloc-corps {
    padding: 0 25px 40px;
    text-align: center;
}

.rdv-bloc-corps > p {
    margin-bottom: 24px;
}

/*
 * ⚠️ `.welcome-section  a` — avec deux espaces dans la source — habille TOUT
 * lien de cette section en bouton : `width: max-content`, bordure, coins
 * arrondis, majuscules et une hauteur de ligne de 50 px. Elle vise les deux
 * boutons du hero, mais rien ne la limite à eux.
 *
 * Les deux règles ci-dessous la contrent par la spécificité (0,2,1 contre
 * 0,1,1) : sans elles, le bouton n'occupait pas la largeur du bloc et le lien
 * secondaire en débordait, texte tronqué.
 */
.welcome-section .rdv-bouton-bloc {
    width: 100%;
    margin: 0;
}

.welcome-section .rdv-lien {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    text-decoration: underline;
    color: #6f6f6f;
}

.welcome-section .rdv-lien:hover,
.welcome-section .rdv-lien:focus {
    color: #e94272;
    background: none;
}

.rdv-lien-ligne {
    margin: 18px 0 0;
}

/* ------------------------------------------------------------------ */
/* Entrée de menu                                                      */
/* ------------------------------------------------------------------ */

/*
 * Le menu porte déjà dix entrées sur deux niveaux : une de plus le fait passer
 * à la ligne et casse sa mise en page. Elle n'apparaît donc QUE lorsque le menu
 * devient collant — le thème lui ajoute alors la classe `fixed` — c'est-à-dire
 * au moment précis où la barre d'en-tête, et son bouton, ont défilé hors écran.
 *
 * Avant le défilement, c'est le bouton de la barre d'en-tête qui assure.
 */
.main-menu:not(.fixed) .rdv-menu {
    display: none;
}

/*
 * Sur mobile le menu est replié dans un tiroir : la contrainte de place ne
 * s'applique pas, et la barre d'en-tête reste au-dessus du tiroir. On garde
 * l'entrée visible pour qui ouvre le menu.
 */
@media (max-width: 767px) {
    .main-menu:not(.fixed) .rdv-menu {
        display: block;
    }
}

/* ------------------------------------------------------------------ */
/* Superposition de la fenêtre de réservation                          */
/* ------------------------------------------------------------------ */

/*
 * ⚠️ Le thème pose `z-index: 99999999999999` sur `.main-menu` — quatorze
 * chiffres, que le navigateur ramène à 2147483647, le maximum d'un entier
 * 32 bits. Calendly place son voile à 9999 : la fenêtre de réservation passait
 * donc DERRIÈRE le menu collant et derrière le tiroir mobile.
 *
 * Surenchérir est impossible, la valeur plafond étant déjà atteinte. On abaisse
 * donc le menu le temps que la fenêtre est ouverte : le script pose
 * `rdv-modale-ouverte` sur <body> tant que le voile de Calendly est présent.
 */
.rdv-modale-ouverte .main-menu,
.rdv-modale-ouverte header {
    z-index: 1 !important;
}

/*
 * Deux widgets tiers flottent eux aussi au-dessus : celui des avis
 * immodvisor, lui aussi au plafond 2147483647, et le bouton de messagerie
 * GetButton a 16000160. Ils restaient devant la fenetre de reservation.
 *
 * Cibles par prefixe : leurs identifiants portent un numero de compte qui
 * change d un site a l autre.
 */
.rdv-modale-ouverte [id^="imdw-"],
.rdv-modale-ouverte [class*="imdw-"],
.rdv-modale-ouverte [id^="gb-widget"] {
    z-index: 1 !important;
}

/* Le voile monte au plafond : à valeur égale, l'ordre du DOM le met devant. */
.calendly-overlay {
    z-index: 2147483647 !important;
}

/* Le défilement de la page sous la fenêtre est déroutant. */
.rdv-modale-ouverte {
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Encart sur la page de confirmation                                  */
/* ------------------------------------------------------------------ */

/*
 * L'encart est placé AVANT le récapitulatif : c'est l'action proposée, elle ne
 * doit pas attendre sous un rappel de ce que le visiteur vient d'écrire. Il lui
 * faut donc sa propre respiration sous le menu.
 */
.rdv-avant-confirmation {
    margin-top: 40px;
    margin-bottom: 50px;
}

/*
 * `.confirmation-wrapper` vient de la vue du bundle et réserve 160 px de padding
 * en haut — pensés quand sa carte arrivait en premier. L'encart occupe désormais
 * cette place, d'où un vide de la hauteur d'un écran entre les deux.
 *
 * ⚠️ Corrigé ici et non dans la vue : elle appartient au bundle, et
 * `vendor:publish --force` la réécrit à chaque déploiement.
 *
 * `:has()` limite la règle aux pages qui portent l'encart. Les navigateurs qui
 * ne le connaissent pas gardent simplement l'espacement d'origine.
 */
body:has(.rdv-avant-confirmation) .confirmation-wrapper {
    padding-top: 30px;
}

/*
 * En tablette portrait, le bouton pleine largeur s'étirait jusqu'à 737 px :
 * beaucoup pour une cible qu'on vise au pouce. On le borne et on le centre.
 */
@media (min-width: 480px) and (max-width: 767px) {
    .rdv-bouton-entete {
        max-width: 420px;
        margin: 0 auto;
    }
}

/*
 * Sous 360 px, le téléphone et les trois réseaux ne tiennent plus sur une ligne
 * et la dernière icône se retrouvait seule en dessous. Un espacement plus serré
 * les regroupe.
 */
@media (max-width: 359px) {
    header .float-right ul {
        gap: 8px 10px;
    }
}