/* ============================================================ Touches « rose » de la charte (#fe1867). Chargé EN DERNIER (après les CSS de page) pour gagner la cascade sans !important. Le rose est réservé aux accents graphiques/UI (cœur du logo au scroll, pastille d'orbite, badge mandala, survol nav, FAQ, bouton hero) + quelques libellés (contact, étapes, localisation). Les SURTITRES de section ne sont plus roses (retour à la charte mocha var(--accent)). ============================================================ */ :root { --pink: #fe1867; } /* Surtitres de section : PLUS de rose (demande client). Ils reviennent à la couleur de charte var(--accent) (mocha #47433A) définie dans les CSS de page. .s-overline : home (#services, #a-propos, #contact), /services, témoignages. .section-label : fiches de soins + à propos (Comprendre, Pratique, FAQ…). Le rose migre vers les accents graphiques (voir plus bas : logo, orbit, mandala). */ /* Les surtitres .s-overline sont désormais des

(SEO) : on neutralise la marge haute par défaut des titres pour conserver le rendu d'origine. */ h2.s-overline { margin-top: 0; } /* ========================================================================= SYSTÈME — SURTITRES / OVERLINES UNIFIÉS (client 2026-07-21) Un seul style graphique pour TOUS les petits labels en capitales posés au-dessus d'un titre, quelle que soit la page. Historiquement fragmenté en 5 noms de classes (une par page/section) avec des valeurs légèrement différentes : .s-overline (0.88/500/0.14), .hero-h1 (0.88/400/0.12), .section-label (0.75/600/0.14), .hero-label (0.78/500/0.15), .hero-subtitle (déjà 0.88/500/0.14 côté à-propos). accents.css étant chargé EN DERNIER, ce bloc gagne la cascade et réaligne tout le monde sur la spec de référence (celle de .s-overline). Spec = source unique. NB : .hero-subtitle N'EST PAS ciblé ici car le nom est réutilisé sur les fiches de soin pour un sous-titre SÉRIF (rôle différent) ; côté à-propos il est déjà conforme. Les couleurs à deux tons (ex. .hero-h1 .hero-name en noir) ont une spécificité supérieure et restent intactes. ➜ Étape suivante possible (refactor) : remplacer ces 5 noms par UNE seule classe .overline dans les templates + retirer les définitions dispersées (nécessite de vérifier les sélecteurs JS d'animation). ========================================================================= */ .s-overline, .hero-h1, .section-label, .hero-label { font-family: var(--body); font-size: 0.88rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-wrap: balance; /* répartition équilibrée quand le surtitre passe sur 2 lignes */ } @media (max-width: 768px) { /* Mobile : une seule taille pour tous les surtitres (certains étaient à 12px). */ .s-overline, .hero-h1, .section-label, .hero-label { font-size: 14px !important; } } /* ========================================================================= SYSTÈME — BOUTONS UNIFIÉS (client 2026-07-21) UNE seule typo pour TOUS les boutons du site — SAUF .nav-cta (menu de navigation, qui garde son propre style). Historiquement chaque page avait ses classes (.btn / .btn-hero-fill / .btn-rdv / .services-light-help-btn…) avec des tailles (0.88 vs 1.1rem), graisses (500 vs 600) et interlettrages (0.04 / 0.06 / 0.08em) légèrement différents. accents.css chargé EN DERNIER, ce bloc réaligne tout le monde. Ne touche QUE la typo : le fond (plein / fantôme / rose) et le padding restent propres à chaque variante. ➜ Réglage unique ici : graisse 600, interlettrage 0.06em, capitales, 0.88rem. */ .btn, .btn-fill, .btn-ghost, .btn-hero-fill, .btn-hero-ghost, .btn-hero-link, .btn-primary, .btn-rdv, .services-light-help-btn, .temoignages-cta .btn, .about-panel-content .btn-fill, .about-panel-content .btn-ghost { font-size: 0.88rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 4px; /* coins arrondis sur TOUS les boutons (plus doux, client 2026-07-21) */ } /* ========================================================================= 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(--accent); margin-bottom: 0.35rem; } /* Logo WhatsApp (glyphe plein) : rempli en brun charte, sans contour (les autres icônes de contact sont en trait). */ .contact-icon svg.wa-logo { fill: var(--accent); stroke: none; } /* Numéro d'étape du déroulement (fiches de soins). */ .process-accordion-num { color: var(--accent); } /* 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(--accent); } .pricing-location svg { stroke: var(--accent); } /* 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); } /* ========================================================================= HOVER UNIFORME des boutons pleins foncés (client 2026-07-21) : la RÉFÉRENCE est « Trouver le soin adapté » (home .btn-fill) dont le FOND passe à #8F5E38 (mocha) au survol — le dégradé spotlight (lighten) se fond alors dedans : rendu lumineux uniforme, sans contour. btn-rdv / btn-hero-fill / services-light-help-btn restaient sur var(--accent) sombre au hover → le dégradé tranchait sur les bords (« contour » perçu sur Soulager mes symptômes) et le rendu était plus terne (guide). Même fond hover partout. (.btn-primary.btn-hero-fill rose garde son hover pink : spécificité sup.) */ .btn-rdv:hover, .btn-hero-fill:hover, .services-light-help-btn:hover { background: #8F5E38; } /* Bouton principal du hero des fiches de soins (« Réserver ») : rempli rose. NB : le bouton « Essayez le guide selon vos symptômes » (à propos) RESTE en --accent foncé au REPOS (client 2026-07-21, revient sur l'essai rose du 07-16) ; son hover = spotlight mocha + fond #8F5E38, IDENTIQUE aux autres boutons + suit le curseur (SEL de about.inline.js). */ .btn-primary.btn-hero-fill { background: var(--pink); } .btn-primary.btn-hero-fill:hover { background: var(--pink); } /* Lueur du bouton hero rose (au lieu du mocha) — valeurs D'ORIGINE. ⚠️ On NE surcharge PLUS le glow des boutons mocha ici : ils gardent l'effet d'origine plein de home/about/service.css (retour arrière 2026-07-21 : la cliente veut l'effet d'origine sur TOUS les boutons). Le seul à « adapter » était « Essayez le guide » (services-light-help-btn), qui a désormais le MÊME dégradé que les autres (groupe spotlight d'about.css) ET suit le curseur (ajouté au SEL du handler pointermove, about.inline.js). */ .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%); } /* ========================================================================= Accents graphiques roses (demande client) : le rose migre du TEXTE vers les éléments graphiques. Cœur du logo isolé, pastille de l'orbite « respiration », badge de sélection des cartes de soin. ========================================================================= */ /* Cœur du logo : rose une fois SEUL (au scroll, quand le texte a glissé). .logo-heart-mark est posé par le script du header sur le groupe « cœur ». Full = charte ; scrolled = rose. */ .logo-full .logo-heart-mark path { transition: fill 0.3s ease; } .site-header.scrolled .logo-full .logo-heart-mark path { fill: var(--pink); } /* Pastille de l'orbite « respiration » (home + /services). */ .breath-orbit-dot { background: var(--pink); } /* Badge de sélection des cartes de soin (mandala) : rose à l'état actif, check blanc pour le contraste. */ .mandala-card.active .mandala-check { background: var(--pink); border-color: var(--pink); } .mandala-card.active .mandala-check svg path { stroke: #fff; } /* Badge « score » des cartes de soin (« 1/1 », « 3/7 » quand un filtre est actif) : fond rose (accent graphique), texte blanc. (demande client 2026-07) */ .card-score { background: var(--pink); } /* Meta des cartes (« 45 min · 2 séances », « 7 × 15 min »…) : VISIBLE au repos (desktop + mobile) ; disparaît seulement au SURVOL desktop (la vague monte). (demande client 2026-07) */ @media (hover: hover) { .card:hover .card-meta { opacity: 0; transition: opacity 0.25s; } } /* Point de la timeline « Déroulement » (fiches soin) : anneau --accent au REPOS (défini dans service.css), ROSE quand l'étape est OUVERTE — soit l'étape ACTIVE pilotée au scroll (.is-active, GSAP desktop / listener mobile), soit une étape ouverte au CLIC (.is-open, desktop). Quand rien n'est ouvert (tout replié), aucun point rose (setActive ne force plus le dernier). */ .process-accordion.is-active::before, .process-accordion.is-open::before { border-color: var(--pink); background: var(--pink); box-shadow: 0 0 0 6px rgba(254, 24, 103, 0.1); } .process-accordion.is-active::after, .process-accordion.is-open::after { opacity: 1; background: #fff; } /* Options du bouton flottant « Réserver » (e-mail / WhatsApp / téléphone) : fond ROSE (au lieu du brun), pour matcher le bouton principal. (demande client 2026-07) Hover = pattern standard du site : fond → teinte PLUS CLAIRE de la même couleur (#ff5b91, le rose clair de la palette spotlight), icône blanche, AUCUN cadre. (L'ancienne inversion crème + double box-shadow faisait un gros anneau unique sur le site — retirée, client 2026-07-22.) */ .btn-fixed-options a { background: var(--pink); border-color: var(--pink); } @media (hover: hover) { .btn-fixed-options a:hover { background: #ff5b91; border-color: #ff5b91; color: #fff; box-shadow: none; } } /* ========================================================================= Robustesse MOBILE — header & logo (toutes pages). ========================================================================= */ @media (max-width: 768px) { /* Badge mandala actif : rose aussi sur mobile (override des !important). */ .mandala-card.active .mandala-check { background: var(--pink) !important; border-color: var(--pink) !important; } /* 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.) */ } /* ========================================================================= TACTILE — pas d'effets de survol « collants » sur les boutons (client 2026-07-21). Sur un écran tactile, `:hover` reste actif APRÈS le tap (jusqu'à toucher ailleurs) → la vague sombre du ghost et le glow des fills restaient « allumés », bouton figé en état survolé (effet bizarre). On neutralise ces effets quand le pointeur principal n'est pas de survol (mobile / tablette tactile) ; ils restent intacts sur souris via @media (hover: hover). `.nav-cta` (menu) est exclu. ========================================================================= */ @media (hover: none) { /* Fills « spotlight » : gradients curseur éteints + pas de halo/ombre au tap */ .btn-fill::before, .btn-fill::after, .btn-hero-fill::before, .btn-hero-fill::after, .btn-rdv::before, .btn-rdv::after, .btn-primary::before, .btn-primary::after, .services-light-help-btn::before, .services-light-help-btn::after, .temoignages-cta .btn-fill::before, .temoignages-cta .btn-fill::after { opacity: 0 !important; } .btn-fill:hover, .btn-hero-fill:hover, .btn-rdv:hover, .btn-primary:hover, .services-light-help-btn:hover, .temoignages-cta .btn-fill:hover { box-shadow: none !important; } /* .btn-fill : plus de bascule de fond (brun) au tap — reste en --accent */ .btn-fill:hover { background: var(--accent) !important; } /* Ghosts : la vague sombre (::before) ne monte plus, elle reste hors-champ, et le texte garde sa couleur de repos (sinon texte blanc sur fond clair). */ .btn-ghost::before, .btn-hero-ghost::before, .btn-hero-link::before, .about-panel-content .btn-ghost::before { top: 100% !important; left: 100% !important; } .btn-ghost:hover, .btn-hero-ghost:hover { color: var(--accent) !important; } .btn-hero-link:hover { color: var(--ink) !important; } .about-panel-content .btn-ghost:hover { color: #404B43 !important; } }