/* ============================================================
 * Bloc « Quentin CTA » : gros bouton d'appel à l'action,
 * avec une copie flottante en bas de l'écran (facultative).
 * Chargé sur le site et dans l'éditeur (handle qr-cta),
 * seulement sur les pages qui contiennent le bloc.
 *
 * Reprend les jetons de style-v26.css (--qr-ink, --qr-accent,
 * --qr-line, --qr-radius, --qr-mono, --qr-s*). Chaque var() a
 * une valeur de secours pour l'éditeur, où style-v26.css n'est
 * pas chargé.
 *
 * Blindage : le thème pose html a { color: #000 } et remet à
 * zéro pas mal de choses dans .content-text. Les règles partent
 * donc de .qr-cta.qr-cta pour passer devant.
 *
 * v2 (oct. 2026) :
 *   - la flèche est un SVG dans une pastille (le caractère ↗
 *     devenait un emoji bleu sur iPhone)
 *   - le flottant ne colore plus la barre de Safari (voir plus bas)
 *   - entrée plus douce, en deux temps
 * ============================================================ */

.qr-cta,
.qr-cta-flottant {
    /* style « noir » (par défaut) : bouton encre, pastille verte */
    --qr-cta-fond:           var(--qr-ink, #131313);
    --qr-cta-encre:          #fff;
    --qr-cta-pastille:       var(--qr-accent, #0bd65f);
    --qr-cta-pastille-encre: var(--qr-ink, #131313);

    /* une seule courbe pour tout ce qui bouge : départ vif, arrivée très douce */
    --qr-cta-courbe: cubic-bezier(0.22, 1, 0.36, 1);
}

.qr-cta.is-style-vert,
.qr-cta-flottant.is-style-vert {
    /* style « vert » : bouton vert, pastille encre */
    --qr-cta-fond:           var(--qr-accent, #0bd65f);
    --qr-cta-encre:          var(--qr-ink, #131313);
    --qr-cta-pastille:       var(--qr-ink, #131313);
    --qr-cta-pastille-encre: #fff;
}


/* ----- l'encadré, dans l'article ----- */

.qr-cta.qr-cta {
    box-sizing: border-box;
    width: 100%;
    margin-top: var(--qr-s4, 44px);
    margin-bottom: var(--qr-s4, 44px);
    padding: var(--qr-s3, 26px);
    border: 1px solid var(--qr-line, #e5e5e5);
    border-radius: var(--qr-radius, 14px);
    background: #fafafa;
    text-align: center;
}

.qr-cta.qr-cta .qr-cta__surtitre,
.qr-cta.qr-cta .qr-cta__note {
    padding: 0;
    font-family: var(--qr-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.73rem;
    line-height: 1.5;
    color: var(--qr-ink-2, #5c5c5c);
}

.qr-cta.qr-cta .qr-cta__surtitre { margin: 0 0 var(--qr-s2, 16px); }
.qr-cta.qr-cta .qr-cta__note     { margin: var(--qr-s2, 16px) 0 0; }


/* ----- le bouton (dans l'article et en flottant) -----
   Le fond est un dégradé d'une seule couleur, pas un background-color :
   voir la note sur Safari plus bas. À l'oeil c'est strictement pareil. */

.qr-cta.qr-cta .qr-cta__btn,
.qr-cta-flottant .qr-cta-flottant__btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background-color: transparent;
    background-image: linear-gradient(var(--qr-cta-fond), var(--qr-cta-fond));
    color: var(--qr-cta-encre);
    font-family: inherit;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.35s var(--qr-cta-courbe), box-shadow 0.35s var(--qr-cta-courbe);
}

.qr-cta.qr-cta .qr-cta__btn {
    width: 100%;
    min-height: 64px;
    padding: 12px 14px 12px 30px;
    font-size: 1.14rem;
    line-height: 1.25;
    text-wrap: balance;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Le texte garde sa couleur : le thème a des règles a:hover / a:visited. */
.qr-cta.qr-cta .qr-cta__btn:hover,
.qr-cta.qr-cta .qr-cta__btn:focus,
.qr-cta.qr-cta .qr-cta__btn:visited,
.qr-cta-flottant .qr-cta-flottant__btn:hover,
.qr-cta-flottant .qr-cta-flottant__btn:focus,
.qr-cta-flottant .qr-cta-flottant__btn:visited {
    color: var(--qr-cta-encre);
    text-decoration: none;
}

.qr-cta.qr-cta .qr-cta__btn:focus-visible,
.qr-cta-flottant .qr-cta-flottant__btn:focus-visible {
    outline: 2px solid var(--qr-ink, #131313);
    outline-offset: 3px;
}

/* La pastille : un rond de la couleur d'accent, avec la flèche dedans. */
.qr-cta__fleche {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: linear-gradient(var(--qr-cta-pastille), var(--qr-cta-pastille));
    color: var(--qr-cta-pastille-encre);
    transition: transform 0.35s var(--qr-cta-courbe);
}

.qr-cta__fleche svg {
    display: block;
    width: 16px;
    height: 16px;
    transition: transform 0.35s var(--qr-cta-courbe);
}

/* Survol : seulement là où il y a une vraie souris. Au doigt, un :hover
   reste « collé » après le toucher. */
@media (hover: hover) {

    .qr-cta.qr-cta .qr-cta__btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.35);
    }

    .qr-cta-flottant .qr-cta-flottant__btn:hover {
        transform: translateY(-2px);
    }

    .qr-cta__btn:hover .qr-cta__fleche,
    .qr-cta-flottant__btn:hover .qr-cta__fleche {
        transform: scale(1.1);
    }

    .qr-cta__btn:hover .qr-cta__fleche svg,
    .qr-cta-flottant__btn:hover .qr-cta__fleche svg {
        transform: translateX(2px);
    }

    .qr-cta__btn:hover .qr-cta__fleche.is-externe svg,
    .qr-cta-flottant__btn:hover .qr-cta__fleche.is-externe svg {
        transform: translate(1.5px, -1.5px);
    }
}

/* Appui : le bouton s'enfonce un peu. */
.qr-cta.qr-cta .qr-cta__btn:active,
.qr-cta-flottant .qr-cta-flottant__btn:active {
    transform: scale(0.975);
    transition-duration: 0.12s;
}


/* ----- la copie flottante -----
   Accrochée au <body> par view.js. Sous la barre d'édition (10000)
   et les boutons ACF (9999), au-dessus du menu (1001).

   SAFARI (iOS 26) : Safari teinte sa barre du bas avec la couleur d'un
   élément fixe qui longe le bas de l'écran. La première version (une
   pilule noire presque pleine largeur) rendait donc tout le pied de
   l'écran gris foncé. Trois précautions, pour ne plus y avoir droit :
     1. l'élément fixe est ce conteneur, qui n'a AUCUN fond ;
     2. la pilule ne fait jamais toute la largeur (elle est centrée) ;
     3. son fond est un dégradé (background-image), pas un background-color.
   Ne pas remettre de fond plein sur .qr-cta-flottant. */

.qr-cta-flottant {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
    box-sizing: border-box;
    width: max-content;
    max-width: min(560px, calc(100vw - 48px));
    margin: 0;
    padding: 0;
    background: none;

    /* caché tant que view.js n'a pas dit le contraire */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 26px) scale(0.94);
    transform-origin: 50% 100%;

    /* sortie : courte et discrète */
    transition: opacity 0.22s ease-in,
                transform 0.28s cubic-bezier(0.4, 0, 1, 1),
                visibility 0s linear 0.28s;
}

.qr-cta-flottant.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);

    /* entrée : longue, qui se pose tout doucement */
    transition: opacity 0.4s ease-out,
                transform 0.7s var(--qr-cta-courbe),
                visibility 0s;
}

.qr-cta-flottant[hidden] {
    display: none !important;
}

.qr-cta-flottant .qr-cta-flottant__btn {
    width: 100%;
    min-height: 54px;
    padding: 7px 7px 7px 24px;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 14px 34px -10px rgba(0, 0, 0, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.10);
}

/* Un texte trop long se coupe proprement au lieu de déborder. */
.qr-cta-flottant .qr-cta__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Deuxième temps de l'entrée : la pastille arrive juste après la pilule. */
.qr-cta-flottant .qr-cta__fleche {
    opacity: 0;
    transform: scale(0.5);
}

.qr-cta-flottant.is-visible .qr-cta__fleche {
    animation: qr-cta-pastille 0.6s var(--qr-cta-courbe) 0.16s both;
}

@keyframes qr-cta-pastille {
    from { opacity: 0; transform: scale(0.5) rotate(-35deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* L'animation garde la main sur transform : au survol on agrandit autrement. */
@media (hover: hover) {
    .qr-cta-flottant.is-visible .qr-cta-flottant__btn:hover .qr-cta__fleche {
        animation: none;
        opacity: 1;
        transform: scale(1.1);
    }
}


/* ----- petit écran ----- */

@media (max-width: 800px) {

    .qr-cta.qr-cta {
        padding: var(--qr-s2, 16px);
    }

    .qr-cta.qr-cta .qr-cta__btn {
        min-height: 58px;
        padding: 10px 10px 10px 22px;
        gap: 12px;
        font-size: 1.04rem;
    }

    .qr-cta.qr-cta .qr-cta__fleche {
        width: 38px;
        height: 38px;
    }

    /* Toujours centré, jamais pleine largeur (voir la note Safari). */
    .qr-cta-flottant {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        max-width: 76vw;
    }

    /* Ce qui vit déjà en bas de l'écran remonte pour lui laisser la place :
       la barre d'édition (connecté) et les boutons CTA ACF de single.php. */
    body.has-qr-cta-flottant .qr-editbar,
    body.has-qr-cta-flottant .fixed-cta-buttons {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
}


/* ----- mouvement réduit, impression ----- */

@media (prefers-reduced-motion: reduce) {

    .qr-cta-flottant,
    .qr-cta-flottant.is-visible {
        transform: translate(-50%, 0);
        transition: opacity 0.2s linear, visibility 0s;
    }

    .qr-cta-flottant .qr-cta__fleche,
    .qr-cta-flottant.is-visible .qr-cta__fleche {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .qr-cta.qr-cta .qr-cta__btn,
    .qr-cta-flottant .qr-cta-flottant__btn,
    .qr-cta__fleche,
    .qr-cta__fleche svg {
        transition: none;
    }
}

@media print {
    .qr-cta-flottant {
        display: none !important;
    }
}


/* ----- éditeur seulement ----- */

.qr-cta .qr-cta__indice {
    margin: var(--qr-s2, 16px) 0 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #757575;
}

.qr-cta .qr-cta__indice.is-alerte {
    color: #b26200;
}

/* Dans l'éditeur le bouton est un <div> : on y écrit, on ne clique pas. */
.editor-styles-wrapper .qr-cta .qr-cta__btn {
    cursor: text;
}

.editor-styles-wrapper .qr-cta .qr-cta__btn:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}