/* ============================================
   RDV BUTTON — <ancora-rdv-button>
   Used on home (.intro-rdv) and kinesiologie (.ks-hero)
   ============================================ */

ancora-rdv-button { display: block; }

/* Pinned to the viewport so the badge travels with the scroll and stays on
   screen. FERRÉ EN BAS À DROITE (maquette tofixe 05.06.26) : right edge at
   col-12 (var(--grid-margin) from the viewport edge), anchored to the bottom.
   Hidden on tablet/mobile via the host (.intro-rdv / .ks-hero__rdv). */
.rdv-cluster {
    position: fixed;
    bottom: var(--grid-margin);
    right: var(--grid-margin);
    width: calc((100vw - 2 * var(--grid-margin) - 11 * var(--grid-gutter)) / 12);
    /* Toujours au premier plan : au-dessus du header/menu (max 1001) et de tout
       le contenu de page. Reste sous l'overlay de grille debug (.grid-overlay
       9999, pointer-events:none) qui doit chapeauter toute la page. */
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.1111rem, 1.4vw, 2.2222rem);

    /* Reveal state — toggled by ancora-rdv-button.js.
       Ocre page (Accueil) : caché jusqu'à ce qu'on dépasse le hero banner.
       Teal page (Kinésiologie) : visible dès le début (le JS ajoute
       .is-visible immédiatement). */
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.6667rem);
    transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}

.rdv-cluster.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .4s ease, transform .4s ease;
}

.rdv-main-btn {
    position: relative;
    /* Taille fluide : inchangée en desktop classique, mais grossit en 2K/4K
       (sinon le badge paraît minuscule sur grand écran). */
    width: clamp(6.1111rem, 7.5vw, 13.3333rem);
    height: clamp(6.1111rem, 7.5vw, 13.3333rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* SVG overlay : « Prendre » (arc haut) / « Rendez-vous » (arc bas) courbés
   autour du logo centré. */
.rdv-arc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Texte courbé. fill = couleur du texte/logo ; surchargé par page/état
   (Accueil ocre par défaut · teal · bascules cuivre/Or sur fond sombre). */
.rdv-arc-text {
    font-family: var(--font-heading);
    font-size: 0.7222rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.0167rem;
    fill: var(--ocre);
}

/* The icon is a single-colour PNG; mask + background-color tints it to the
   exact brand colour so it always matches the labels. */
.rdv-main-btn .rdv-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: clamp(2.4444rem, 3vw, 5.3333rem);
    height: clamp(2.5556rem, 3.1vw, 5.5556rem);
    /* logo = couleur du texte (ocre sur Accueil) */
    background-color: var(--ocre);
    /* Mask inlined as a data URI: Chromium treats a file:// mask URL as
       cross-origin and silently drops it, so the icon vanished on local preview. */
    --rdv-icon-mask: url('data:image/png;base64,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');
    -webkit-mask: var(--rdv-icon-mask) center / contain no-repeat;
            mask: var(--rdv-icon-mask) center / contain no-repeat;
}

.rdv-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.1111rem, 1.4vw, 2.2222rem);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
    /* Padding gives the :hover scale() room so it isn't clipped by the
       overflow:hidden that the max-height reveal needs. The negative margin
       cancels the top padding so spacing to the main button is unchanged. */
    box-sizing: border-box;
    padding: 0.4444rem;
    margin-top: -0.4444rem;
}

.rdv-options.open {
    max-height: 24.4444rem; /* large pour ne pas clipper les ronds agrandis en 4K */
    opacity: 1;
}

/* Option circles follow the same per-page inverse rule as the badge:
   ocre page → teal circle, teal page → ocre circle (see .rdv-cluster--teal).
   The icon stays cream for contrast inside the filled circle. */
.rdv-option {
    width: clamp(3.6111rem, 4.4vw, 7.8889rem);
    height: clamp(3.6111rem, 4.4vw, 7.8889rem);
    background: var(--cuivre);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-bg);
    transition: transform 0.2s ease;
}

/* Glyphe (mail/tél) proportionnel au rond, pour rester lisible en 4K */
.rdv-option svg {
    width: 37%;
    height: 37%;
}

.rdv-option:hover {
    transform: scale(1.1);
}

/* ---------- TEAL PAGE (kinésiologie) ----------
   Maquette tofixe 05.06.26 : sur le fond clair du hero, tout le badge est en Or
   (texte courbé + logo + ronds). Sur les sections au fond non blanc (teal/Or),
   le CTA bascule en blanc (voir .rdv-cluster--on-color ci-dessous). */
.rdv-cluster--teal .rdv-arc-text {
    fill: var(--or);
}

.rdv-cluster--teal .rdv-icon {
    /* logo = couleur du texte (Or sur Kinésiologie) */
    background-color: var(--or);
}

.rdv-cluster--teal .rdv-option {
    background: var(--or);
    color: var(--teal); /* glyphe teal lisible dans le rond doré */
}

/* ---------- BASCULE sur fond NON BLANC (maquette tofixe 05.06.26) ----------
   .rdv-cluster--on-color est ajouté par ancora-rdv-button.js dès que le badge
   survole un élément dont le fond n'est pas blanc/clair (teal, ocre, cuivre,
   Or, illustrations marbrées…). Tout le CTA passe alors en BLANC pour rester
   lisible ; le glyphe des ronds garde la couleur de marque de la page. */
.rdv-cluster--on-color .rdv-arc-text {
    fill: var(--white);
}

.rdv-cluster--on-color .rdv-icon {
    background-color: var(--white);
}

.rdv-cluster--on-color .rdv-option {
    background: var(--white);
    color: var(--ocre); /* glyphe ocre lisible dans le rond blanc (Accueil) */
}

/* Kinésiologie : glyphe teal dans le rond blanc */
.rdv-cluster--teal.rdv-cluster--on-color .rdv-option {
    color: var(--teal);
}