/* ========================================================================== AlyCare — Styles globaux ========================================================================== */ /* POLICES AUTO-HÉBERGÉES (2026-09-06) — remplace l'@import Google Fonts. Deux raisons : 1) Performance. L'@import chaînait deux allers-retours réseau AVANT que la moindre police ne commence à se télécharger : main.css → fonts.googleapis.com (DNS + TLS + CSS) → fonts.gstatic.com (DNS + TLS + woff2). Les fichiers vivent maintenant dans assets/fonts/, servis par le même domaine, et les deux plus critiques sont préchargés dans le de chaque page (voir les — à RECOPIER sur toute nouvelle page). 2) RGPD. Plus aucun appel aux serveurs Google au chargement, donc un sous-traitant de moins à déclarer dans confidentialite.html. Ce sont les VERSIONS VARIABLES (axe wght) : un seul fichier par famille couvre toutes les graisses, au lieu d'un fichier par graisse. Ne pas remplacer par des fichiers statiques sans refaire ce calcul. Sources : paquets npm @fontsource-variable/* (miroir officiel des Google Fonts). Sous-ensembles latin + latin-ext uniquement — cyrillique, grec et vietnamien retirés, inutiles pour un site en français. Les noms de familles ci-dessous sont ceux d'origine (et NON les "... Variable" de Fontsource) pour que css/variables.css reste inchangé. Si Aly fournit un jour les vraies polices licenciées (DIN Condensed / Century Gothic Pro / Handsome Pro), remplacer les fichiers ici et dans --font-heading/--font-body/--font-script. */ /* ⚠️ L'ORDRE DE CES @font-face COMPTE, et il est volontaire : latin-ext D'ABORD, latin EN DERNIER, pour chaque famille et chaque style. Les deux plages se RECOUVRENT (latin-ext couvre U+0100-02BA, qui contient le U+0152-0153 « Œ/œ » déjà présent dans latin). Quand plusieurs @font-face d'une même famille couvrent un caractère, c'est la déclaration la PLUS TARDIVE qui l'emporte. Avec latin en premier — l'ordre livré le matin du 2026-09-06 — le seul « œ » de la page (dans « cœur ») faisait gagner latin-ext et déclenchait le téléchargement de DEUX fichiers inutiles, 45 Ko, sur un site entièrement en français. Mesuré, puis corrigé. C'est exactement pour cette raison que le CSS servi par Google Fonts place lui aussi latin en dernier. Ne pas « ranger » ces blocs par ordre alphabétique ou par sous-ensemble : ça réintroduirait le bug. */ @font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/big-shoulders-display-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/big-shoulders-display-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/jost-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/jost-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Jost'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/jost-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Jost'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/jost-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/caveat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/caveat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } *, *::before, *::after { box-sizing: border-box; cursor: none; } /* Tous les éléments cliquables ont leur icône curseur custom (.cursor-link, voir components.css + js/components/cursor.js) : jamais de pointer natif ici, sinon les deux curseurs se superposent. Le sélecteur universel ci-dessus a une spécificité nulle, donc sans cette règle explicite les navigateurs réappliqueraient quand même leur "pointer" par défaut sur ces éléments. */ a, button, .btn, select, label[for], [role="button"], [onclick], summary, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] { cursor: none; } /* Tactile ET mouvement réduit : on rend le curseur natif. Le curseur custom ne se lance que si `!finePointer || reduced` est FAUX (voir js/components/cursor.js, la ligne `if (!finePointer || reduced) return;`) — mais le `cursor: none` ci-dessus, lui, s'appliquait à tout le monde sans condition. Sans souris fine ça ne se voyait pas (cas tactile, corrigé le 2026-08-26) ; découvert le 2026-09-15 que la même chose se produit sous `prefers-reduced-motion: reduce` (Windows : Accessibilité → Effets visuels → Effets d'animation désactivé, ou équivalent macOS/Linux) : le script s'arrête au tout début sans rien dessiner, et il ne restait ALORS AUCUN curseur à l'écran — custom comme natif — pour une souris classique. Les deux conditions du bail-out JS sont donc reprises ici en OR (liste de media queries séparées par une virgule = disjonction en CSS), pour ne jamais laisser passer un cas où le script renonce sans que le CSS ne restaure le curseur natif. */ @media (pointer: coarse), (prefers-reduced-motion: reduce) { *, *::before, *::after { cursor: auto; } a, button, .btn, select, label[for], [role="button"], [onclick], summary, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] { cursor: pointer; } } /* ---- Lenis (sensation de scroll fluide) — CSS recommandé par la lib ---- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } /* Sélection de texte (2026-08-21, thème sombre) : la surbrillance native du navigateur, calibrée pour du texte noir sur blanc, rend le texte crème illisible sur fond sombre — on la repeint aux couleurs de la charte. */ ::selection { background: var(--color-primary); color: var(--color-text-on-primary); } body { margin: 0; font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text); background-color: var(--color-bg); } /* Pages courtes (2026-08-25) — AUCUNE PAGE NE PORTE CETTE CLASSE AUJOURD'HUI (retirée partout les 02 et 03/09, une fois toutes les pages remplies) : la règle est conservée pour une future page volontairement courte. Quand le contenu ne remplit pas l'écran, le pied de page s'arrêtait au milieu de la fenêtre en laissant une bande vide en dessous. Ces trois lignes le poussent en bas de l'écran SANS le rendre fixe : dès que le contenu dépasse une hauteur d'écran, margin-top: auto ne pousse plus rien et le pied de page reprend sa place normale à la suite. Opt-in par une classe plutôt qu'appliqué à tout le site : l'accueil empile des calques (pin en sticky du store, manifeste en absolute) et n'a aucun besoin de ce traitement — inutile de lui changer son body en conteneur flex. Les éléments du curseur custom sont en position fixed, donc hors flux : ils ne deviennent pas des enfants flex. */ body.page-short { display: flex; flex-direction: column; min-height: 100svh; } body.page-short .site-footer { margin-top: auto; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; line-height: var(--line-height-heading); margin: 0 0 var(--space-sm); /* Vert réservé aux titres (2026-08-21, demande de Rom) : c'est ici, et quasiment nulle part ailleurs, qu'on doit voir --color-accent. */ color: var(--color-heading); } h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } p { margin: 0 0 var(--space-sm); } a { color: var(--color-primary-dark); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; } /* ---- Layout helpers ---- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); } .section { /* --space-section, pas --space-2xl : sur un viewport court les 96 px du haut ET du bas mangeaient 32 % de l'écran. Voir variables.css § ÉCHELLE LAPTOP — inchangé dès 1000 px de hauteur de viewport, donc sur tout écran de bureau. */ padding: var(--space-section) 0; } .section--alt { background-color: var(--color-bg-alt); } /* ========================================================================== CTA POINTILLÉ — repris de obermann-webdesign.de ("Ready for the next step?") : une grille de petits points (::before, tuile ~19px, même recette radial-gradient(couleur 15%, transparent 8%) que la référence), révélée uniquement au centre de la section via un mask radial (même ellipse 60% / 43% que l'original) — elle s'estompe vers les bords plutôt que de couvrir tout le bloc en aplat. Couleur adaptée à la palette du site (rose --color-primary) au lieu du blanc de la référence (fond sombre là-bas, fond clair ici). N'affecte que les sections qui portent la classe — actuellement seule .cta-dots sur epilation-laser.html. ========================================================================== */ .cta-dots { position: relative; overflow: hidden; /* Position du "spot" qui suit la souris (2026-08-20, voir ::after et js/cta-dots.js) — hors écran par défaut tant que le JS ne l'a pas positionné (pas de survol au chargement). */ --spot-x: 50%; --spot-y: -9999px; /* Dégradé (2026-08-20) : raccorde en douceur le fond de la FAQ juste au-dessus (var(--color-bg), pas de .section--alt) au blanc de cette section (var(--color-surface)) sur les 260 premiers pixels, plutôt qu'un changement net à la frontière des deux sections. */ background: linear-gradient( to bottom, var(--color-bg) 0, var(--color-surface) 260px, var(--color-surface) 100% ); } .cta-dots::before { content: ''; position: absolute; inset: 0; /* Rose vif de la charte (--color-primary, #e6325e) repris des lignes de la timeline "Épilation laser" (voir css/timeline.css et .institut-video__contours dans home.css), pour rester cohérent avec les fonds décoratifs déjà en place plus haut sur le site. */ background-image: radial-gradient(color-mix(in srgb, var(--color-primary) 30%, transparent) 15%, transparent 8%); background-size: 19px 19px; background-repeat: repeat; /* Masque agrandi en hauteur (2026-08-20) : révèle plus de points vers le haut/bas de la section (ellipse 43% → 78% de hauteur, fondu repoussé à 96%) — la tuile de points (taille/espacement ci-dessus) ne change pas, seule la zone où le masque les laisse visibles s'étend. */ mask-image: radial-gradient(60% 48%, black 0%, black 10%, transparent 96%); -webkit-mask-image: radial-gradient(60% 48%, black 0%, black 10%, transparent 96%); pointer-events: none; } /* Points à pleine opacité (2026-08-20) : même tuile/couleur que ::before, mais SANS l'atténuation à 30% — révélés uniquement autour du curseur via un second masque (petit cercle centré sur --spot-x/--spot-y), combiné en intersection avec la même vignette globale que ::before (pour ne jamais dépasser la zone où les points existent déjà). Résultat : chaque point sous la souris passe à 100% d'opacité, le reste garde son opacité réduite (::before, en dessous). Purement visuel, voir js/cta-dots.js pour la position du spot — aucune ligne de JS dans ce fichier. */ .cta-dots::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--color-primary) 15%, transparent 8%); background-size: 19px 19px; background-repeat: repeat; mask-image: radial-gradient(60% 48%, black 0%, black 10%, transparent 96%), radial-gradient(64px 64px at var(--spot-x) var(--spot-y), black 0%, transparent 100%); mask-composite: intersect; -webkit-mask-image: radial-gradient(60% 48%, black 0%, black 10%, transparent 96%), radial-gradient(64px 64px at var(--spot-x) var(--spot-y), black 0%, transparent 100%); -webkit-mask-composite: source-in; pointer-events: none; transition: opacity 0.15s linear; } .cta-dots .container { position: relative; z-index: 1; } /* CTA CARTE (2026-08-20) — réutilise .benefit-card telle quelle (fond, radius, shadow-soft, ombre rosée + lueur curseur + trait d'accent au survol : tout vient de css/benefits.css, aucune duplication). .cta-card n'ajoute que le gabarit propre à une carte seule et centrée (les 3 cartes "bienfaits" sont dans une grille, celle-ci est isolée dans son propre container). */ .cta-card { max-width: 420px; margin: 0 auto; align-items: center; text-align: center; gap: var(--space-sm); /* overflow: visible (2026-08-20) : .benefit-card le met à "hidden" par défaut — sans l'override, l'anneau ci-dessous (§"bordure animée") serait rogné, même collé au bord de la carte. */ overflow: visible; /* Repositionnement (2026-08-20) : la carte, une fois verrouillée par js/cta-dots.js (transform revenu à 0), se retrouve dans sa position "naturelle" au sein de .cta-dots, centrée par le padding symétrique de .section (haut/bas identiques). On la remonte en transférant de l'espace du dessus vers le dessous (marge négative en haut, positive en bas, même valeur) : la hauteur totale de .cta-dots ne change pas (donc le fond pointillé, en absolute inset:0 sur toute la section, reste rigoureusement identique), seule la carte se déplace à l'intérieur. */ margin-top: calc(-1 * var(--space-xl)); margin-bottom: var(--space-xl); } /* CTA CARTE — bordure animée une fois en place (2026-08-20, corrigée n°2) : dès que la carte est verrouillée (.is-locked, posée par js/cta-dots.js une fois --ctp à 1), un anneau conic-gradient rose se met à tourner, collé au contour exact de la carte (inset: 0, même border-radius) pour attirer l'œil sur le CTA. Première version (mask-composite: exclude, technique à double masque) testée en direct sur le site : le masque n'excluait pas juste le centre comme prévu, il rendait tout l'anneau invisible — bug constaté en ligne. Deuxième version (background multi-couches + `transform: rotate()` sur le pseudo-élément entier) : bug constaté en ligne, pire que le premier — on tourne un RECTANGLE arrondi sur lui-même, donc à chaque angle autre que 0/90/180/270°, ses coins sortent du contour arrondi de la carte (visible seulement là où overflow le permet) → un polygone rose déformé au lieu d'un anneau, au lieu de rien. Version actuelle : on ne fait plus tourner l'ÉLÉMENT, on fait tourner l'ANGLE de départ du conic-gradient lui-même, via une custom property enregistrée (@property, seule façon de faire animer un angle par le navigateur). Le pseudo-élément reste fixe (même rectangle arrondi que la carte, jamais transformé) — seule la couleur qui tourne À L'INTÉRIEUR de l'anneau bouge. Fonctionne comme avant : border transparent réserve l'épaisseur de l'anneau, deux fonds superposés — le dégradé en border-box (visible uniquement DANS l'épaisseur du border), la couleur de la carte en padding-box par-dessus (couvre le centre). Bug constaté en ligne (2026-08-20, corrigé n°3) : une fois --ctp/opacity à 1, la carte devenait toute blanche — icône, titre et bouton disparus. Cause : ::before est en position: absolute avec z-index: auto, donc par les règles de l'ordre d'empilement CSS, un descendant positionné se peint TOUJOURS au-dessus du contenu en flux normal non positionné (icône, titre, bouton), même s'il est déclaré avant eux dans le DOM — l'ordre du HTML ne joue aucun rôle ici. ::before masquait donc tout le contenu de la carte. Correction : z-index: -1 le fait peindre juste après le fond propre de .cta-card (qui crée son propre contexte d'empilement, via le transform posé par js/cta-dots.js) mais avant tout le contenu en flux — l'anneau reste bien derrière le texte et le bouton, sans jamais sortir du contexte de la carte. */ @property --cta-ring-angle { syntax: ''; inherits: false; initial-value: 0deg; } .cta-card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-lg); border: 2px solid transparent; --cta-ring-angle: 0deg; background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, conic-gradient(from var(--cta-ring-angle), transparent 0deg, var(--color-primary) 55deg, transparent 130deg, transparent 360deg) border-box; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; } .cta-card.is-locked::before { opacity: 1; animation: cta-card-ring-spin 4s linear infinite; } @keyframes cta-card-ring-spin { to { --cta-ring-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .cta-card.is-locked::before { animation: none; } } /* Pas de lueur qui suit le curseur sur cette carte (2026-08-20) — présente par défaut car héritée de .benefit-card (js/benefits.js écoute le mousemove sur toutes les cartes, y compris celle-ci, pour la §2 "lueur au survol"). On la neutralise ici en CSS plutôt que de toucher au JS partagé avec les cartes "bienfaits" (01/02/03, qui la gardent). */ .cta-card .benefit-card__spot { display: none; } /* Entrée depuis hors écran, verrouillée (2026-08-20) — --ctp (0 → 1) posé par js/cta-dots.js, PAS par js/benefits.js (cette carte en est volontairement exclue, voir son commentaire "entranceCards") : contrairement aux cartes "bienfaits" (réversibles, on peut les voir repartir en arrière en remontant), --ctp se fige à 1 une fois la carte en place et ne bouge plus, quel que soit le scroll ensuite. Décalage de départ beaucoup plus grand (90dvh, hors écran — "comme si elle venait de sous le footer") que les 70-90px des cartes bienfaits. Spécificité doublée (.cta-card.benefit-card) pour l'emporter sur .benefit-card { opacity: var(--p); } (css/benefits.css) quel que soit l'ordre des feuilles de style — --p n'est de toute façon plus posé sur cette carte, mais mieux vaut ne pas en dépendre. --ctp par défaut à 1 (carte visible, en place) — PAS 0 (2026-08-20, correctif) : si js/cta-dots.js échoue à s'exécuter pour une raison ou une autre (bloqué, erreur, navigateur récalcitrant — carte invisible constatée sous Firefox), la carte reste visible par défaut plutôt que de disparaître définitivement. C'est le script qui bascule --ctp à 0 pour démarrer l'entrée hors écran — amélioration progressive, jamais l'inverse. */ .cta-card { --ctp: 1; transform: translateY(calc((1 - var(--ctp)) * 90dvh)); } .cta-card.benefit-card { opacity: var(--ctp); } @media (prefers-reduced-motion: reduce) { .cta-card { transform: none; } .cta-card.benefit-card { opacity: 1; } } .cta-card .benefit-card__title { margin-bottom: 0; } .cta-card .btn { margin-top: var(--space-xs); } /* Trait d'accent (.benefit-card__accent) supprimé sur cette carte (2026-08-20) — devenu redondant avec l'anneau rose qui tourne autour de la carte une fois verrouillée (voir §"CTA carte — bordure animée") : les deux au hover donnaient un résultat chargé. Gardé tel quel sur les cartes "bienfaits" (01/02/03, css/benefits.css, non touchées). */ .cta-card .benefit-card__accent { display: none; } /* Pas de rotation au survol sur cette carte (2026-08-20) — seule la taille change (scale), contrairement aux cartes "bienfaits" (01/02/03, qui gardent leur rotate(-8deg), non touchées). Sélecteur à spécificité plus élevée (.benefit-card.cta-card) pour l'emporter sur la règle de base (.benefit-card:hover .benefit-card__icon, css/benefits.css) quel que soit l'ordre des feuilles de style. */ .benefit-card.cta-card:hover .benefit-card__icon { transform: scale(1.12); } .section-title { text-align: center; /* Voir variables.css § ÉCHELLE LAPTOP. */ margin-bottom: var(--space-title-gap); } .section-title__eyebrow { /* Police "signature" (écho de "Handsome Pro" dans la charte cliente) : touche manuscrite au-dessus des titres condensés en majuscules — ajoutée le 2026-08-21 en appliquant la vraie charte de couleurs/typos. */ display: block; font-family: var(--font-script); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 600; letter-spacing: 0.01em; text-transform: none; /* Token dédié (voir variables.css) : le rose VIF de la charte en thème clair, sa déclinaison CLAIRE en thème sombre — à cette taille de script, le rose vif reste sourd sur un fond sombre alors que le rose clair s'y lit comme une signature lumineuse. */ color: var(--color-eyebrow); margin-bottom: var(--space-xs); /* Sur les pages prestation, ce sur-titre EST le

dans confidentialite.html. Un