/* ============================================================
   Touches « rose » de la charte (#fe1867).
   Chargé EN DERNIER (après les CSS de page) pour gagner la cascade
   sans !important. Couleur des surtitres uniquement (pas de soulignement).
   Les surtitres du hero (hero-label / hero-subtitle) sont volontairement
   exclus (ils gardent le ton de la charte).
   ============================================================ */
:root {
    --pink: #fe1867;
}

/* Surtitres de section en rose — cohérent sur TOUTES les pages.
   .s-overline : home (#services, #a-propos, #contact), /services, témoignages.
   .section-label : fiches de soins + à propos (Comprendre, Pratique, FAQ…). */
.s-overline,
.section-label,
.about-panel-content .s-overline,
.contact-section .s-overline {
    color: var(--pink);
}

/* Les surtitres .s-overline sont désormais des <h2> (SEO) : on neutralise
   la marge haute par défaut des titres pour conserver le rendu d'origine. */
h2.s-overline {
    margin-top: 0;
}

/* =========================================================================
   Touches roses ciblées (demandes client). accents.css étant chargé en
   dernier, ces règles gagnent la cascade. Les sélecteurs « fiche de soin »
   (page-nav, pricing, faq, process, btn-hero) ne matchent que sur ces pages.
   ========================================================================= */

/* Soulignement de la navigation principale au survol (toutes pages). */
.nav-links > a:not(.nav-cta)::after,
.nav-dropdown-toggle::after {
    background: var(--pink);
}

/* Libellés des coordonnées (Téléphone / WhatsApp / E-mail) + respiration. */
.contact-method-label {
    color: var(--pink);
    margin-bottom: 0.35rem;
}

/* Numéro d'étape du déroulement (fiches de soins). */
.process-accordion-num {
    color: var(--pink);
}

/* Onglet actif de la navigation interne des fiches (soulignement). */
.page-nav a.is-active::before {
    background: var(--pink);
}

/* Localisation dans la section Tarifs (« La Canopée · Fribourg »). */
.pricing-location {
    color: var(--pink);
}
.pricing-location svg {
    stroke: var(--pink);
}

/* Icône FAQ (+) : contour et signe roses au repos, fond rose à l'ouverture. */
.faq-icon {
    border-color: var(--pink);
}
.faq-icon svg {
    stroke: var(--pink);
}
.faq-question:hover .faq-icon,
.faq-item.open .faq-icon {
    background: var(--pink);
    border-color: var(--pink);
}

/* Bouton principal du hero des fiches de soins (« Réserver ») : rempli rose. */
.btn-primary.btn-hero-fill {
    background: var(--pink);
}
.btn-primary.btn-hero-fill:hover {
    background: var(--pink);
}
/* Lueur du bouton recolorée en rose (au lieu du mocha) pour rester cohérent. */
.btn-primary.btn-hero-fill::before {
    background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%),
        #ff5b91 30%, #c2104e 90%);
}
.btn-primary.btn-hero-fill::after {
    background: radial-gradient(circle 160px at var(--mx, 50%) var(--my, 50%),
        rgb(255 214 230 / 55%) 0%, #fe186778 25%, #fe186724 95%);
}

/* =========================================================================
   Robustesse MOBILE — header & logo (toutes pages).
   ========================================================================= */
@media (max-width: 768px) {
    /* Header opaque + SANS backdrop-filter : sur WebKit iOS (tous navigateurs
       iOS, pas que Safari) le backdrop-filter du header échoue à se peindre →
       header « transparent » et contenu qui transparaît dessous au défilement.
       Un fond opaque règle ça de façon fiable. */
    .site-header.scrolled {
        background: rgb(230, 222, 208) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* (Le logo se réduit au cœur au scroll AUSSI sur mobile, comme sur desktop.
       L'ancien « figeage » mobile — ajouté pour masquer un glitch de glissement —
       n'est plus nécessaire depuis le nettoyage des couches GPU mobile + le fix
       du bouton flottant #btnFixed. Mécanisme du logo : voir home.css/services.css.) */
}