/* ============================================================ MAÏLY ZEN — adaptations au contenu réel Seul fichier du thème qui s'écarte des maquettes. Chaque écart a son motif écrit ici et dans la fiche de chantier. Deux sections : 1. les grilles, quand le nombre de packs n'est plus cinq ; 2. le logo réel, qui remplace le nom retapé en Fraunces. ============================================================ */ /* ============================================================ 1 — GRILLES Les grilles des maquettes sont dessinées pour exactement cinq packs. Comme la praticienne peut en ajouter et en retirer, ces deux règles prennent le relais dès que le nombre n'est plus cinq. À cinq, rien ne change et la mise en page des maquettes s'applique telle quelle. ============================================================ */ /* Grille des problématiques, page d'accueil. Les maquettes font 3 cartes larges puis 2 très larges. Avec un autre nombre, on répartit également plutôt que de laisser une carte seule sur sa ligne. */ .f-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .f-grid--auto .f-card, .f-grid--auto .f-card:nth-child(4), .f-grid--auto .f-card:nth-child(5) { grid-column: auto; } /* Grille des tarifs, page d'accueil. Les maquettes figent cinq colonnes, ce qui laisse un trou à droite quand il y a moins de cinq packs. */ .p-grid--auto { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } @media (max-width: 1080px) { .f-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .p-grid--auto { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } @media (max-width: 768px) { .f-grid--auto { grid-template-columns: 1fr; } .p-grid--auto { grid-template-columns: 1fr 1fr; } } @media (max-width: 430px) { .p-grid--auto { grid-template-columns: 1fr; } } /* ============================================================ 2 — LOGO RÉEL Les maquettes retapaient « Maïly Zen » en Fraunces italique et dessinaient le symbole en SVG, posés sur une pastille crème. Le logo de la cliente est arrivé : le mot-symbole est un dessin, ses lettres ne viennent d'aucune fonte. Règle du dossier : le nom s'affiche toujours par l'image. Marina a tranché le 11 septembre, après avoir comparé trois dispositions : LE LOGO TEL QU'IL A ÉTÉ LIVRÉ, verrouillage vertical entier, centré, sans pastille. Aucune recomposition, donc rien à faire valider par Marie-Ly. Les règles de site.css qui visaient .brand, .brand-mark, .brand-name et .brand-sub ne trouvent plus leurs éléments, sauf .brand que l'on neutralise ici. On ne touche pas au fichier des maquettes. ============================================================ */ /* La pastille disparaît : plus de fond, plus de bordure, plus d'ombre. Le logo se pose directement sur la navbar. */ .brand { display: block; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } /* Le logo est plus haut que la pastille qu'il remplace. On reprend les 16 px de respiration de la navbar à 12, pour que la barre ne passe que de 88 à 100 px : le premier écran des maquettes garde son air. Agrandi le 18 septembre à la demande de Marie-Ly : 76 → 96 px, soit un quart de plus. La respiration retombe de 12 à 9 px pour que la barre n'aille pas au-delà de 114 px ; en dessous de 9, le logo touche le bord et les liens de navigation se retrouvent plus hauts que lui. Agrandi de nouveau le 24 septembre : 96 → 124 px. La respiration reste à 9 px, la barre passe de 115 à 143 px. */ .nav { padding: 9px 0; } .brand-logo { display: block; height: 124px; width: auto; margin: 0 auto; } /* ------------------------------------------------------------ MENU EN CAPITALES, ET LOGO CENTRÉ DANS LE VIDE Demande du 24 septembre. ------------------------------------------------------------ Les items passent de 14,5 px bas de casse à 17 px capitales. L'interlettrage et la graisse ne sont pas de l'ornement : en capitales à 400 et à 0,01 em, les mots se referment et se lisent moins bien qu'en bas de casse. 0,08 em et 500 sont ce qui rend les capitales lisibles à cette taille. Le voile de la barre porte aussi le bouton doré, qui est un lien de la colonne de droite : il passe donc en capitales avec les autres. C'est l'état validé sur le rendu du 24 septembre. ------------------------------------------------------------ LE CENTRAGE ------------------------------------------------------------ La barre des maquettes est une grille « 1fr auto 1fr ». Les deux pistes en fr sont égales par construction, donc le logo est centré dans la BARRE. Mais la colonne de gauche ne porte que deux liens (339 px mesurés) quand celle de droite en porte deux plus le bouton doré (471 px) : le vide à gauche du logo mesurait 154 px et celui de droite 22 px. Le logo était centré dans la barre et décentré dans le vide, ce qui est ce que l'œil voit. La grille devient une répartition libre : trois éléments, l'espace restant partagé à parts égales entre eux. Le logo se retrouve centré entre la fin de BIORÉSONANCE et le début de MASSAGES, quelle que soit la largeur. Mesuré à l'écart de 0 px de 769 à 1920 px. Contrepartie, et c'est la raison du palier à 900 px ajouté plus bas : en grille, quand la place manquait, c'était le logo qui se faisait écraser (mesuré : 63 px au lieu de 82 à 769 px de large, déjà le cas avant cette demande). En répartition libre, plus rien ne s'écrase, donc c'est le bouton doré qui sortirait de la barre. Les paliers ci-dessous sont dimensionnés pour que ni l'un ni l'autre n'arrive. */ .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .nav-links, .brand { flex: 0 0 auto; } .nav-links a { font-size: 17px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; } /* Sur le fond mauve profond du pied de page, les maquettes éclaircissaient le nom. L'image ne se recolore pas : on l'éclaircit d'un cran, sans toucher à la teinte de l'or. */ .f-brand .brand-mark { filter: brightness(1.08); } /* Le pied de page ne porte plus que le croissant et le lotus, décidé par Marina le 11 septembre. Plus de mot-symbole ni de ligne de base à côté : la question du pied de page recomposé est close, il n'y a plus de composition. Le symbole est passé de 38 à 52 px, puis à 76 px : seul, il n'est plus la vignette d'un verrouillage mais la marque elle-même, et c'est lui qui porte l'identité de la bande maintenant que la signature du bas ne l'écrase plus. */ .brand-mark { display: block; width: 76px; height: 76px; flex: none; } /* La phrase passe À DROITE du symbole au lieu de dessous, et la navigation se replie sur deux colonnes : deux demandes de Marina du 11 septembre, toutes deux pour gagner de la hauteur. La bande du pied de page était haute de quatre lignes de liens quand elle n'a que deux choses à dire. */ .f-brand { display: flex; align-items: center; gap: 24px; } .f-tag { margin-top: 0; max-width: 22ch; } /* Les deux colonnes de liens. La règle ne vise QUE le bloc Navigation : la colonne « Me suivre » n'a qu'une ou deux entrées, les mettre côte à côte les séparerait sans rien gagner. La marge d'empilement de site.css est reprise par l'écart de la grille, sinon la deuxième ligne la cumulerait. */ nav.f-col ul { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 46px; row-gap: 13px; } nav.f-col li + li { margin-top: 0; } /* Méga-logo de signature. Les maquettes fondaient le texte du haut vers le bas par un dégradé découpé sur les lettres. Même effet, obtenu par un masque d'opacité sur l'image : les lettres restent celles du logo. */ .f-mega { line-height: 0; } .f-mega img { display: inline-block; /* La signature occupait presque toute la largeur de la bande. Deux crans en arrière le 11 septembre : min(1080px, 88vw), puis 880, puis 460. Elle passe sous la moitié de sa taille d'origine et redevient une signature, pas un titre. */ width: min(460px, 56vw); height: auto; -webkit-mask-image: linear-gradient(180deg, #000 4%, rgba(0, 0, 0, .32) 94%); mask-image: linear-gradient(180deg, #000 4%, rgba(0, 0, 0, .32) 94%); filter: brightness(1.05); } /* Réduction, aux points de rupture des maquettes — 1080, 768 et 430, plus un palier à 900 ajouté le 24 septembre, expliqué en section 2. À 768, site.css replie la navbar sur deux colonnes et cache les liens : le logo se cale alors à gauche et le bouton doré à droite. La marge automatique qui le centrait doit disparaître au même moment. L'ORDRE DE CES BLOCS COMPTE. Ils ont tous la même spécificité : c'est le dernier écrit qui l'emporte. Un palier plus large écrit après un palier plus étroit annulerait ce dernier. 1080, puis 900, puis 768, puis 430, dans cet ordre et pas un autre. */ @media (max-width: 1080px) { /* Suit l'agrandissement du 18 septembre, dans le même rapport : 68 était neuf dixièmes de 76, 86 est neuf dixièmes de 96. Puis celui du 24 septembre : 108 est un peu moins de neuf dixièmes de 124. */ .brand-logo { height: 108px; } .nav-links a { font-size: 14.5px; letter-spacing: .06em; } .nav-links { gap: 18px; } .nav-inner { gap: 12px; } } @media (max-width: 900px) { /* Le palier ajouté le 24 septembre. Entre 769 et 900 px, les capitales et le bouton doré demandent plus de place qu'il n'en reste : sans ce palier, le bouton sortait de la barre par la droite (mesuré : 125 px dehors à 769 px de large). Le bouton doré se resserre ici, et lui seul : sa forme, sa couleur et son libellé ne bougent pas. Mesuré sans débordement ni retour à la ligne jusqu'à 769 px. */ .nav-links a { font-size: 13px; letter-spacing: .04em; } .nav-links { gap: 14px; } .nav-inner { gap: 10px; } .nav-cta { margin-left: 14px; } .nav-cta .btn { font-size: 12.5px; padding: 9px 10px 9px 15px; gap: 8px; } .nav-cta .arw { width: 22px; height: 22px; } .nav-cta .arw svg { width: 10px; height: 10px; } .brand-logo { height: 92px; } } @media (max-width: 768px) { /* En dessous de 768 la barre se replie sur deux colonnes, le logo se cale à gauche à côté du bouton doré : sa taille est dictée par la largeur qui reste, pas par la demande du 18 septembre. Elle ne bouge pas. */ .brand-logo { height: 54px; margin: 0; } .brand-mark { width: 62px; height: 62px; } /* Les deux lignes du bloc à 900 px que le repli mobile annulait dans site.css, et qu'il faut lui rendre puisque adaptations.css est chargé après lui : le bouton doré se cale à droite sans marge, à la taille des maquettes. Le logo à gauche, le bouton à droite : la répartition libre donne ici le même résultat que la grille des maquettes. */ .nav-cta { margin-left: 0; } .nav-cta .btn { padding: 9px 9px 9px 16px; gap: 8px; } .nav-cta .arw { width: 24px; height: 24px; } .nav-cta .arw svg { width: 12px; height: 12px; } } @media (max-width: 430px) { .brand-logo { height: 48px; } /* Même raison qu'au palier 768 : rendre à site.css le resserrement du bouton doré sous 430, que le bloc de 900 px annulait. */ .nav-cta .btn { font-size: 12px; padding: 9px 8px 9px 14px; } /* Sous 430, la phrase ne tient plus à côté du symbole : elle repasse dessous, à sa place d'origine. */ .f-brand { display: block; } .f-tag { margin-top: 18px; max-width: none; } nav.f-col ul { column-gap: 30px; } } /* ============================================================ 3 — NAVBAR SUR PAGE CLAIRE La navbar du socle est dessinée pour le bandeau sombre de l'accueil : voile mauve translucide, texte crème. Sur une page qui ouvre sur du crème — 404, mentions légales, politique de confidentialité, confirmation d'envoi — ce voile rend les liens illisibles. Les maquettes ont déjà résolu ce cas : leurs pages internes posent une navbar crème à texte encre, avec un filet doré. Ces trois règles sont reprises telles quelles de page-massages.css, pour que les pages sans maquette portent la navbar claire des maquettes plutôt qu'un troisième état inventé pour l'occasion. ============================================================ */ .mz-fond-clair .nav { background: rgba(245, 237, 232, .94); backdrop-filter: blur(14px) saturate(1.05); color: var(--encre); border-bottom: 1px solid rgba(201, 164, 90, .55); animation: none; } @supports (animation-timeline: scroll()) { .mz-fond-clair .nav { background: rgba(245, 237, 232, .94); color: var(--encre); border-bottom-color: rgba(201, 164, 90, .55); animation: none; } } /* ============================================================ 4 — LES ONDES DORÉES Demande de Marina, 11 septembre : le trait doré se dessine de gauche à droite, en boucle continue, épaisseur 2 px, lentement. Cette animation REMPLACE l'oscillation de 2 px posée un peu plus tôt : un seul mouvement à la fois sur un même trait. ------------------------------------------------------------ ÉPAISSEUR : 2 px partout, quelle que soit la taille de l'onde ------------------------------------------------------------ Les maquettes fixaient l'épaisseur en attribut sur le tracé du symbole. L'attribut a été retiré de parts/svg-defs.php : posé sur l'élément, il l'emportait sur l'héritage, et l'onde étant appelée par , plus aucune règle CSS ne pouvait l'atteindre. vector-effect: non-scaling-stroke sort l'épaisseur de l'échelle du dessin. Sans lui, une valeur unique donnait 1,47 px sur les séparateurs d'étapes de 420 px, 2,66 px sur le filigrane de 760 px et 0,63 px sur l'onde de l'encart biorésonance — trois épaisseurs différentes pour une seule valeur, et un trait sous le pixel qui se délavait en gris clair. Avec lui, 2 px veut dire 2 px sur les sept ondes du site. ------------------------------------------------------------ LE TRACÉ QUI SE DESSINE ------------------------------------------------------------ Le trait est transformé en un pointillé d'une seule longueur, aussi long que le tracé entier. Déplacer ce pointillé le long de la courbe fait apparaître le trait par la gauche, puis disparaître par la gauche. Le tracé porte pathLength="100" : les longueurs se comptent donc en pourcentage, pas en unités de dessin. C'est ce qui rend ces trois lignes lisibles, et indépendantes de la courbe elle-même. Le cycle ne saute jamais : il commence et finit sur un trait invisible. 45 % pour dessiner, 10 % de pause sur le trait complet, 45 % pour effacer. À 9 secondes, cela fait quatre secondes de tracé, ce qui est le rythme d'une respiration posée. stroke-dasharray et stroke-dashoffset sont des propriétés héritées : posées sur le , elles descendent dans le . C'est le même mécanisme que pour l'épaisseur. ============================================================ */ .wave svg { stroke-width: 2px; vector-effect: non-scaling-stroke; } @keyframes mzTrace { 0% { stroke-dashoffset: 100; } /* rien */ 45% { stroke-dashoffset: 0; } /* tracé complet */ 55% { stroke-dashoffset: 0; } /* la pause */ 100% { stroke-dashoffset: -100; } /* effacé par la gauche */ } .step-wave svg, .cta-wave svg, .bio-wave svg, .principe-wave svg { stroke-dasharray: 100; stroke-dashoffset: 100; animation: mzTrace 9s linear infinite; } /* Les ondes d'une même page ne partent pas ensemble : une ligne sur deux démarre à mi-cycle, sinon les quatre séparateurs se dessinent au même instant et l'effet tourne au métronome. */ .step-wave:nth-of-type(even) svg { animation-delay: -4.5s; } /* Le filigrane du bandeau Biorésonance n'est PAS concerné. C'est un décor de fond, posé derrière le titre du premier écran, et il porte déjà sa propre dérive, plus ample et plus lente, venue des maquettes. Un trait qui se dessine juste derrière un titre lui prendrait l'attention. Il garde donc son trait plein et son mouvement d'origine. */ /* ------------------------------------------------------------ MOUVEMENT RÉDUIT Quelqu'un qui demande à son système de réduire les animations ne doit pas se retrouver devant une onde absente : sans le pointillé, le trait serait figé sur son état invisible. On rend donc le trait plein, et on coupe. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .step-wave svg, .cta-wave svg, .bio-wave svg, .principe-wave svg { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; } } /* ============================================================ 5 — BANDEAU DÉFILANT SOUS LE PREMIER ÉCRAN Demande de Marina, 11 septembre. Ne figure dans aucune maquette : c'est un ajout, d'où sa place ici et non dans site.css. Le thème a déjà un bandeau défilant, plus bas sur l'accueil : gros texte en Fraunces italique, 34 secondes. Celui-ci est un autre objet, plus discret, et ne partage rien avec lui — d'où le préfixe mz- sur ses classes, pour qu'une retouche de l'un ne touche jamais l'autre. SANS COUTURE. La piste contient DEUX fois la même suite et se déplace de la moitié de sa largeur. À l'instant où l'animation reboucle, l'image à l'écran est identique à celle du départ : aucun saut. La suite est elle-même répétée trois fois, de quoi remplir un écran large. Aucun JavaScript, la règle du thème tient. Le mouvement ne porte que sur transform, que le navigateur compose sans recalculer la page. ============================================================ */ .mz-ruban { background: var(--mauve-deep); /* #6B5B7B */ height: 48px; padding: 12px 0; overflow: hidden; display: flex; align-items: center; /* Un bandeau plus large que l'écran ne doit jamais faire glisser la page entière sur le côté, mobile compris. */ max-width: 100%; } .mz-ruban-piste { display: flex; align-items: center; flex: none; /* sinon la piste se comprime à la largeur du bandeau */ animation: mzRuban 40s linear infinite; will-change: transform; } @keyframes mzRuban { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Le défilement ne s'interrompt pas au survol : demandé explicitement. */ .mz-ruban b { font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: 3px; text-transform: uppercase; color: var(--or); /* #C9A45A */ white-space: nowrap; } /* Le croissant de lune de la charte, en séparateur. Il ouvre chaque mention, donc il y en a bien un entre chacune, et un au tout début. */ .mz-ruban .moon { display: block; flex: none; width: 9px; height: 9px; margin: 0 22px; color: var(--or); } @media (max-width: 768px) { /* Le bandeau garde sa hauteur : c'est un rythme visuel, pas un bloc de lecture. Seule la respiration entre les mentions se resserre. */ .mz-ruban b { font-size: 12px; letter-spacing: 2.4px; } .mz-ruban .moon { margin: 0 16px; } } /* Un bandeau qui défile pendant quarante secondes est exactement ce que le réglage « réduire les animations » vise. On l'arrête, et les premières mentions restent lisibles. */ @media (prefers-reduced-motion: reduce) { .mz-ruban-piste { animation: none; } } /* ============================================================ 6 — JAMAIS UN MOT SEUL SUR LA DERNIÈRE LIGNE Demandé par Marina le 11 septembre, en voyant « différente. » et « directement. » tomber seuls sous leur paragraphe. Deux propriétés, deux usages : - « balance » répartit les lignes d'un bloc court pour qu'elles soient de longueur voisine. C'est ce qu'il faut sur les titres, les chapeaux et les citations, centrés, où l'œil compare les lignes entre elles. Le navigateur ne l'applique qu'aux blocs courts (six lignes au plus), d'où la séparation. - « pretty » ne touche qu'à la fin du bloc : il remonte de quoi empêcher un mot isolé sur la dernière ligne, sans redistribuer le reste. C'est ce qu'il faut sur les paragraphes de lecture, où rééquilibrer toutes les lignes se verrait. Un navigateur qui ne connaît pas ces valeurs les ignore et compose comme avant : rien ne casse, le mot seul revient, c'est tout. ============================================================ */ h1, h2, h3, h4, .lead, .chip, blockquote, .split-sub, .f-tag, .hero-sub, .sec-head p, /* Les cartes : deux lignes dans une colonne étroite, « pretty » n'a pas de quoi remonter un mot sans faire déborder la première ligne. Équilibrer les deux lignes, oui. */ .f-card p, .p-card p, .val-card p, .soin-card p { text-wrap: balance; } p, li, dd, figcaption, .form-detail, .mz-coord-delai { text-wrap: pretty; } /* ============================================================ 7 — LES ICÔNES CENTRÉES QUI NE L'ÉTAIENT PAS Signalé par Marina le 11 septembre sur le pied de la réflexologie. Les maquettes écrivent « margin: 0 auto » sur ces deux icônes pour les centrer au-dessus de leur bloc. Une marge latérale automatique ne centre QUE les éléments de type bloc, et un est de type ligne par défaut : la marge ne faisait donc rien. Sur la page Massages, la conséquence se voyait : le pied restait sur la même ligne que la pastille « EN OPTION » et le couple partait sur la gauche. Sur la grille des tarifs de l'accueil, l'icône se retrouvait seule sur sa ligne et le text-align du bloc la recentrait par accident : elle paraissait juste, à un décalage de ligne de base près. Les maquettes ont le même défaut, donc Marie-Ly a vu la même chose. ============================================================ */ .reflexo-ico, .p-ico { display: block; } /* ============================================================ 8 — LA MENTION « NE SE SUBSTITUE PAS À UN AVIS MÉDICAL » Demandée par Marina le 11 septembre, sur les pages Packs Signatures et Biorésonance. Elle se pose sous les questions fréquentes, à la fin du dernier bloc de lecture avant le dernier écran. Écrite en petit et en gris : elle doit être lisible sans prendre le pas sur la page. Le filet doré au-dessus la détache de la dernière réponse pour qu'on ne la lise pas comme la suite de celle-ci. ============================================================ */ .mz-mention-medicale { /* La mention est le troisième enfant de la grille des questions. Sans cette ligne elle retombe dans la colonne de gauche, sous le bouton, à la largeur de la colonne étroite. Elle traverse les deux colonnes : c'est une note de page, pas une suite de la dernière réponse. « 1 / -1 » vaut aussi quand la grille se replie sur une colonne, ce que « grid-column: 2 » ne ferait pas — il créerait une colonne. */ grid-column: 1 / -1; margin: 38px 0 0; padding-top: 22px; border-top: 1px solid rgba(201, 164, 90, .4); font-size: 13.5px; line-height: 1.65; font-style: italic; color: var(--encre-doux); max-width: 62ch; } /* Sur la page Biorésonance, le bloc des questions est posé sur le mauve pâle : même gris, il passe. Sur un fond sombre, il faudrait éclaircir, mais aucune des deux sections concernées n'est sombre aujourd'hui. */ /* ============================================================ 9 — LA CITATION DE LA PAGE BIORÉSONANCE Le socle bride toute citation de manifeste à seize signes de large (« .manifeste blockquote { max-width: 16ch } »), une règle écrite pour l'accueil où la phrase tient en six mots. Sur la page Biorésonance la citation est deux fois plus longue : elle tombait sur cinq lignes et se lisait comme un bloc compact. Mesuré : 535 px de large à 50 px de corps, soit treize signes par ligne. Le bloc passe à la largeur prévue par « .quote-big », 750 px, sur cette seule page. L'accueil et À propos gardent la leur. Le texte a été raccourci en même temps, les deux étaient nécessaires : à 535 px, même une phrase de cinquante signes prenait quatre lignes. 18 septembre : l'audit éditorial remplace cette citation par une phrase deux fois plus longue, qui dit le stress, les émotions et le temps de pause sans rien affirmer sur le corps. Mesurée à 50 px de corps, elle tombe sur cinq lignes. La règle posée le 11 septembre, trois lignes au maximum, imposait de reprendre la mise en forme. Élargir le bloc ne sert à rien : la largeur réelle ne vient pas d'ici mais de « .wrap-narrow », 880 px moins 32 px de marge de chaque côté, soit 816 px. Un max-width de 1000 px posé ici reste lettre morte, et pousser la section à 1064 px casserait le rythme des blocs étroits de la page. Le corps seul a donc été repris, et mesuré palier par palier : 40 px et 38 px donnent quatre lignes, 36 px en donne trois. C'est 36 px. La citation pèse moins lourd qu'avant, c'était le prix à payer pour garder le texte de Marie-Ly mot pour mot. ============================================================ */ .mz-bioresonance .manifeste blockquote { max-width: 816px; font-size: 36px; } @media (max-width: 1080px) { .mz-bioresonance .manifeste blockquote { max-width: 100%; font-size: 32px; } } @media (max-width: 430px) { .mz-bioresonance .manifeste blockquote { font-size: 26px; } } /* ============================================================ 10 — LES CHIFFRES CLÉS DE LA PAGE BIORÉSONANCE, À DEUX L'audit du 17 septembre supprime « 0 effet secondaire », le chiffre du milieu, et Marina a tranché le 18 : deux chiffres, pas de troisième inventé pour combler. Le gabarit saute déjà les valeurs vides, mais la grille garde trois colonnes de 360 px : les deux blocs restants se collaient à gauche avec un trou à droite. « auto-fit » supprime les colonnes vides, « justify-content: center » recentre ce qui reste. La règle vaut pour deux comme pour trois, donc rien ne casse si un troisième chiffre revient un jour. ============================================================ */ .mz-bioresonance .xl-row { grid-template-columns: repeat(auto-fit, minmax(0, 360px)); justify-content: center; } /* ============================================================ 11 — LE MANIFESTE DE L'ACCUEIL, PLUS LARGE Même cause que la citation de la page Biorésonance : le socle bride les citations de manifeste à seize signes, soit 528 px ici, une largeur dessinée pour la phrase courte de la maquette. Le texte de l'audit en fait 76, d'où quatre lignes, et le paragraphe en dessous quatre aussi. Mesuré largeur par largeur, sur le rendu et pas au jugé : bloc 880 px (actuel) : citation 3 lignes, paragraphe 4 à 640 px bloc 960 px : citation 2 lignes, paragraphe 3 à 800 px bloc 1120 px : citation 2 lignes, paragraphe 2 à 1000 px 960 px retenu : c'est la plus petite largeur qui donne les deux lignes demandées pour le titre, et le paragraphe y tient en trois, ce qui entrait dans la demande. 1120 px aurait donné deux lignes partout, au prix d'un bloc nettement plus large que le reste de la page. La règle ne vaut QUE pour l'accueil. La page Biorésonance a son propre réglage juste au-dessus, et la page À propos a le même défaut mais n'a pas encore été regardée : on avance page par page. ============================================================ */ .mz-accueil .manifeste .wrap-narrow { max-width: 960px; } .mz-accueil .manifeste blockquote { max-width: 100%; } .mz-accueil .manifeste .wrap-narrow > .rv > p, .mz-accueil .manifeste p.lead { max-width: 800px; } /* ============================================================ 12 — LE TÉMOIGNAGE DE L'ACCUEIL, EN ENTIER Le bloc du socle est dessiné pour une phrase : citation en Fraunces italique, corps jusqu'à 33 px, largeur bridée à 22 signes, le tout calé à côté d'un portrait de 544 px de haut, soit douze lignes. Le premier vrai témoignage, reçu par WhatsApp et écrit spontanément pour le site, en fait 583 signes. Marina a tranché le 18 septembre : on le garde en entier, quitte à réduire la police. Couper les mots d'une cliente sans son accord ne se faisait pas, et ce témoignage-là n'a pas d'équivalent. Deux réglages, et l'ordre compte. Réduire le corps seul ne sert à rien : la largeur est fixée en « ch », donc elle rétrécit avec la police et le nombre de lignes ne bouge pas d'un pouce, mesuré de 33 à 20 px, toujours dix-neuf lignes. Il faut libérer la largeur d'abord. Mesuré à pleine colonne, 547 px : 33 px : 15 lignes, bloc 885 px, dépasse la photo de 341 28 px : 14 lignes, bloc 739 px, dépasse de 195 26 px : 12 lignes, bloc 630 px, dépasse de 86 24 px : 11 lignes, bloc 565 px, dépasse de 21 22 px : 10 lignes, bloc 504 px 24 px retenu : le bloc et le portrait finissent à la même hauteur, à vingt pixels près. La citation reste nettement au-dessus du texte courant, qui est à 19 px. Sous 768 px la grille s'empile déjà et le socle libère la largeur de lui-même : le témoignage y tient sans rien changer, donc la règle s'arrête là. ============================================================ */ @media (min-width: 769px) { .mz-accueil .testi-quote blockquote, .mz-packs .testi-quote blockquote, .mz-bioresonance .testi-quote blockquote, .mz-massages .testi-quote blockquote { font-size: clamp(20px, 1.9vw, 24px); max-width: none; } } /* ------------------------------------------------------------ PLEINE LARGEUR, 24 SEPTEMBRE LES QUATRE PAGES QUI PORTENT UN TÉMOIGNAGE ------------------------------------------------------------ Les deux pages portent le même témoignage, celui marqué « À la une ». Elles partagent donc les mêmes règles, écrites une seule fois pour qu'une retouche sur l'une ne puisse pas laisser l'autre derrière. La pages des packs, de la Biorésonance puis des Massages ont rejoint ce réglage le 24 septembre. Plus aucune page ne pose un portrait de banque d'images à côté des mots d'une cliente. ------------------------------------------------------------ Le portrait a été retiré du gabarit : il n'existe pas de photo de la personne, et le bloc affichait à sa place une inconnue de banque d'images. La grille à deux colonnes n'a donc plus qu'un occupant. Trois réglages, et le troisième est le seul qui ne soit pas évident. La grille repasse à une colonne ; le bloc se centre, comme le titre de section juste au-dessus ; et la citation garde une largeur de lecture, parce que « pleine largeur » ne peut pas vouloir dire des lignes d'un bord à l'autre : la colonne fait 1136 px à 1440, une ligne y ferait 125 signes et l'œil perdrait le début de la suivante. Mesuré sur ce témoignage-ci, 588 signes, à 21 px : 447 px : 12 lignes de 49 signes — une colonne étroite au milieu 560 px : 10 lignes de 59 signes 660 px : 8 lignes de 74 signes 760 px : 7 lignes de 84 signes 860 px : 6 lignes de 98 signes — trop long pour être lu 660 px retenu, soit 50 signes de bride dans la police de la citation. C'est la valeur où le bloc occupe franchement la largeur sans que la ligne devienne pénible. Le corps passe de 24 à 21 px, demandé le 24 septembre. Il reste au-dessus du texte courant, qui est à 19 px. ------------------------------------------------------------ */ .mz-accueil .testi-grid, .mz-packs .testi-grid, .mz-bioresonance .testi-grid, .mz-massages .testi-grid { grid-template-columns: 1fr; gap: 0; } .mz-accueil .testi-quote, .mz-packs .testi-quote, .mz-bioresonance .testi-quote, .mz-massages .testi-quote { text-align: center; } .mz-accueil .testi-foot, .mz-packs .testi-foot, .mz-bioresonance .testi-foot, .mz-massages .testi-foot { justify-content: center; } /* La bride de lecture se pose sur la citation elle-même et non sur le bloc : « ch » se compte dans la police de l'élément, et la citation est la seule à être en Fraunces. Posée sur le bloc, la même valeur aurait aussi écrasé la ligne du prénom et la barre des avis, qui sont en DM Sans et n'ont pas de raison de se serrer. */ @media (min-width: 769px) { .mz-accueil .testi-quote blockquote, .mz-packs .testi-quote blockquote, .mz-bioresonance .testi-quote blockquote, .mz-massages .testi-quote blockquote { font-size: clamp(19px, 1.6vw, 21px); max-width: 50ch; margin-inline: auto; } } /* Le téléphone suivait le corps des maquettes, 22 px, et se retrouvait donc plus gros que la version large une fois celle-ci descendue à 21. Il passe à 20 px : la citation reste au-dessus du texte courant, qui est à 16,5 px sur cette largeur. */ @media (max-width: 768px) { .mz-accueil .testi-quote blockquote, .mz-packs .testi-quote blockquote, .mz-bioresonance .testi-quote blockquote, .mz-massages .testi-quote blockquote { font-size: 20px; } } /* ============================================================ 13 — LE DÉROULEMENT DE LA PAGE BIORÉSONANCE, EN CARTES Les six étapes étaient empilées, une par ligne, séparées par une onde dorée. Mesuré sur la page : 1 985 px de haut pour 800 signes de texte, soit 21 % d'une page qui en faisait 9 673, et la moitié droite de l'écran vide du premier numéro au dernier. Marina l'a relevé le 24 septembre et a retenu la mise en cartes. Trois dispositions ont été mesurées avant de choisir, toutes trois à peu près équivalentes en place gagnée, environ 1 100 px sur la section et 1 900 px sur la page : cartes en grille 884 px de section, page 7 814 deux colonnes 902 px, page 7 831 accordéon replié 898 px, page 7 827 Les cartes l'emportent parce qu'elles ne replient rien : le déroulé d'une séance est ce que la personne vient lire avant de réserver. La carte ne dessine rien de nouveau. Fond, bordure dorée, rayon de 26 px, ombre : tout est repris des .f-card de l'accueil. Seul le numéro change de rôle, il passe au-dessus du titre au lieu d'être une colonne à côté. Le nombre de colonnes est donné par le gabarit, qui compte les étapes remplies : deux colonnes jusqu'à quatre étapes, trois au-delà. Une grille qui se remplit toute seule mettait quatre cartes sur trois colonnes, 3 + 1, et la rangée de trois imposait sa hauteur à des cartes à moitié vides. Mesuré : 1 010 px de section ainsi, 620 px en deux colonnes. ============================================================ */ .der-grille { display: grid; gap: 22px; margin-top: 8px; } .der-grille--2 { grid-template-columns: repeat(2, 1fr); } .der-grille--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .der-grille--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .der-grille--2, .der-grille--3 { grid-template-columns: 1fr; } } .der-carte { position: relative; overflow: hidden; background: var(--creme-hi); border: 1px solid rgba(201, 164, 90, .4); border-radius: 26px; padding: 30px 28px 26px; box-shadow: var(--shadow-card); transition: transform .55s cubic-bezier(.2, .9, .25, 1), box-shadow .55s ease, border-color .5s ease; } .der-carte:hover { transform: translateY(-8px); border-color: rgba(201, 164, 90, .8); box-shadow: 0 34px 60px -34px rgba(107, 91, 123, .6); } .der-num { display: block; font-family: "Fraunces", serif; font-style: italic; font-weight: 300; font-size: 44px; line-height: .9; letter-spacing: -.05em; color: var(--mauve); margin-bottom: 14px; transition: color .5s ease; } .der-carte:hover .der-num { color: var(--or); } .der-carte h3 { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; } .der-carte p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--encre-doux); } @media (prefers-reduced-motion: reduce) { .der-carte { transition: none; } .der-carte:hover { transform: none; } } /* ============================================================ 14 — LE DERNIER ÉCRAN DES PACKS, LE LOGO AU LIEU DU VISAGE Demande de Marina du 24 septembre. Le bandeau du dernier écran portait un portrait de Marie-Ly en fond ; c'est le symbole de la marque qui le remplace, croissant et lotus, celui que le pied de page porte déjà seul depuis le 11 septembre. ------------------------------------------------------------ POURQUOI PAS LE VERROUILLAGE ENTIER ------------------------------------------------------------ Le logo complet porte le mot-symbole et sa ligne de base, « MASSAGES & BIORESONANCE », que cette section imprime déjà sous le bouton. Essayé : les deux se superposaient, à deux tailles et deux gris différents. Le symbole seul ne dit rien deux fois. ------------------------------------------------------------ LE CONTRASTE, ET CE QU'IL A COÛTÉ ------------------------------------------------------------ Un filigrane clair derrière du texte clair se paie. Mesuré sur le pixel de fond le plus clair sous chaque zone de texte, avant et après : titre paragraphe ligne du bas photo d'origine 6,35 4,27 3,21 symbole brut 4,31 3,27 2,68 symbole assombri 5,36 4,00 3,14 Assombrir le filigrane ne suffisait pas à revenir au niveau de la photo : les pétales du lotus restent le point clair. Le paragraphe et la ligne du bas gagnent donc en opacité, et le contraste repasse au-dessus de celui de la photo, 4,51 et 4,36 mesurés. Le seuil de 4,5 pour un texte courant est atteint pour la première fois sur cette section ; il ne l'était pas avec la photo. Portée élargie le 2 octobre. La garde qui empêche la photo Unsplash d'apparaître est passée sur les quatre autres pages : leur dernier écran peut donc, lui aussi, se retrouver avec le filigrane si sa photo est un jour retirée. Les deux corrections d'opacité suivent, par :has(.cta-logo), c'est-à-dire exactement là où le filigrane est rendu. Les quatre pages gardent leur photo aujourd'hui, rien ne bouge à l'écran ; la règle est là pour le jour où elles ne l'auront plus. ============================================================ */ .cta-logo { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; } .cta-logo img { width: 660px; max-width: 78vw; height: auto; opacity: .45; filter: brightness(.52) saturate(.65); } .mz-packs .cta .lead, .cta:has(.cta-logo) .lead { color: rgba(245, 237, 232, .86); } .mz-packs .cta-meta, .cta:has(.cta-logo) .cta-meta { color: rgba(245, 237, 232, .75); } @media (max-width: 768px) { /* Sous 768 px la section se resserre : le filigrane suit, sinon il déborde en haut et en bas et se fait couper par l'overflow. */ .cta-logo img { width: 420px; } } /* ============================================================ 15 — LE LOGO OUVRE LE PREMIER ÉCRAN DE L'ACCUEIL Demande de Marina du 2 octobre, après un retour de Marie-Ly. Le logo quitte la barre de navigation en haut de page et vient à la place de la pastille des avis, en tête du premier écran. ------------------------------------------------------------ LE FICHIER EST RECADRÉ ------------------------------------------------------------ mz-logo-hero.webp est mz-logo.webp sans sa ligne de base « MASSAGES & BIORESONANCE », parce que la ligne de texte qui suit dit déjà la même chose, et que c'est elle que les moteurs lisent. Le recadrage est documenté dans front-page.php, avec les mesures. L'original n'est pas touché : la barre de navigation et le pied de page gardent les leurs. ------------------------------------------------------------ LA BARRE : RIEN EN HAUT, LE LOGO AU DÉFILEMENT ------------------------------------------------------------ En haut de page le logo serait en double, à cent pixels de lui-même. Il s'efface donc, et revient quand la page défile, exactement sur la plage où la barre passe du voile mauve au crème : 40 à 220 px. Une seule animation de plus sur un mécanisme déjà en place, et zéro JavaScript. La règle vit sous @supports, comme celle de la barre. Là où les animations au défilement n'existent pas, le logo reste simplement visible, en double sur le premier écran : c'est la dégradation qui laisse voir la marque plutôt que de la cacher. Cette section ne vaut que pour l'accueil, seule page à porter ce premier écran. Les quatre pages internes gardent leur barre entière. ============================================================ */ .mz-accueil .hero-logo { display: block; width: 300px; max-width: 72vw; height: auto; margin: 0 auto 10px; } .mz-accueil .hero-inner .hero-sub { margin-top: 0; } @supports (animation-timeline: scroll()) { .mz-accueil .nav .brand { animation: navLogo linear both; animation-timeline: scroll(root); animation-range: 40px 220px; } @keyframes navLogo { from { opacity: 0; } to { opacity: 1; } } } @media (max-width: 768px) { .mz-accueil .hero-logo { width: 210px; margin-bottom: 6px; } } /* ============================================================ 16 — LA BARRE EN TROIS ZONES Dictée par Marina le 2 octobre : « le menu est divisé en 3 parties, la plus grande étant celle du centre. La partie de gauche est vide, celle du centre contient les items centrés, celle de droite contient le bouton centré. » La zone de gauche n'est pas vide dans le balisage : elle porte le logo. Elle PARAÎT vide sur le premier écran de l'accueil, parce que le logo y est rendu invisible là où le hero porte déjà le sien. Sa place reste réservée, donc rien ne se déplace quand il revient au défilement. Les colonnes sont « 1fr auto 1fr » et non des proportions fixes. Le bloc du milieu prend la largeur de ses quatre entrées, les deux côtés se partagent le reste à parts égales, et le centre reste le plus large tant que les entrées sont plus longues que le bouton. Mesuré à 1440 px : zone centrale 591 px, zones latérales 304 px chacune. Avec des proportions fixes du type 1fr 2fr 1fr, les quatre entrées débordaient de leur zone à 1200 px, à 9 px près. Le bouton est centré dans sa zone et non collé au bord : c'est la demande, et c'est ce qui distingue cette disposition de celle des maquettes. ============================================================ */ .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } /* grid-row: 1 sur les trois, et ce n'est pas une précaution. Le menu vient en premier dans le balisage et occupe la colonne 2 ; le placement automatique ne revient jamais en arrière, il envoyait donc le logo, qui demande la colonne 1, à la ligne suivante. La barre faisait 201 px de haut au lieu de 143, avec le logo sous le menu. */ .nav .brand { grid-column: 1; grid-row: 1; justify-self: center; } .nav-menu { grid-column: 2; grid-row: 1; justify-self: center; gap: 26px; } .nav-droite { grid-column: 3; grid-row: 1; justify-self: center; } .nav-droite .nav-cta { margin-left: 0; } /* ------------------------------------------------------------ TENIR LE CENTRAGE QUAND LA BARRE SE REMPLIT ------------------------------------------------------------ Les deux zones latérales ne sont égales que tant qu'aucune des deux n'est serrée par son contenu. Le bouton est plus large que le logo : dès que la barre se remplit, c'est la zone de droite qui impose sa largeur, la gauche devient plus étroite, et le menu dérive vers la gauche sans que rien ne déborde. Mesuré sur la page Massages, dérive du centre du menu par rapport au centre de la barre, en pixels : sans palier 1200:0 1100:-27 950:-41 850:-13 800:-38 769:-54 avec 1180 seul 1200:0 1100:0 950:0 850:-22 800:-47 769:-62 avec 1180 et 900 1200:0 1100:0 950:0 850:0 800:0 769:-12 D'où les deux paliers ci-dessous. Ils desserrent la barre avant qu'elle ne sature, et le menu reste centré au pixel de 1200 à 800 px. À 769 il reste 12 px de dérive, invisibles, et le logo n'est écrasé nulle part, ce qui n'était pas vrai sans ces paliers. Ces paliers s'ajoutent à ceux de la section 2, ils ne les remplacent pas : l'ordre d'écriture dans ce fichier fait foi. ------------------------------------------------------------ */ @media (max-width: 1180px) { .nav-links a { font-size: 13.5px; letter-spacing: .05em; } .nav-menu { gap: 14px; } .nav-inner { gap: 12px; } .nav-cta .btn { font-size: 12.5px; padding: 9px 10px 9px 15px; gap: 8px; } .nav-cta .arw { width: 22px; height: 22px; } .nav-cta .arw svg { width: 10px; height: 10px; } .brand-logo { height: 86px; } } @media (max-width: 900px) { .nav-links a { font-size: 12.5px; letter-spacing: .03em; } .nav-menu { gap: 11px; } .nav-inner { gap: 8px; } .nav-cta .btn { font-size: 11.5px; padding: 8px 8px 8px 13px; gap: 6px; } .nav-cta .arw { width: 20px; height: 20px; } .nav-cta .arw svg { width: 9px; height: 9px; } .brand-logo { height: 72px; } } /* ------------------------------------------------------------ LE REPLI MOBILE, RENDU AUX NOUVEAUX NOMS ------------------------------------------------------------ site.css replie la barre sous 768 px en visant .nav-links.left et .nav-links.right, deux classes que la mise en trois zones a fait disparaître. Sans ces règles, les quatre entrées restaient affichées sur téléphone et la barre y faisait 133 px de haut au lieu de 73. Le comportement rendu est celui des maquettes, à l'identique : sous 768 px il ne reste que le logo et le bouton doré. Que les quatre entrées n'y soient alors accessibles nulle part est un manque connu du dossier, antérieur à cette retouche, et qui reste à traiter. ------------------------------------------------------------ */ @media (max-width: 768px) { .nav-inner { grid-template-columns: auto 1fr; gap: 10px; } .nav-menu { display: none; } .nav .brand { grid-column: 1; justify-self: start; } .nav-droite { grid-column: 2; justify-self: end; } } /* ============================================================ 17 — LA RESPIRATION SOUS LA BARRE, PAGES DE SERVICE Demande de Marina, 2 octobre : « sur les pages de service, il faut un padding top, les éléments sont trop proche du menu ». Mesuré sur le local avant retouche, à 1440 px, écart entre le bas de la barre et le premier élément du bandeau : Massages 3 px Biorésonance 3 px Packs 3 px À propos 56 px Contact 67 px Mentions 79 px Les trois pages à bandeau ouvrent sur 146 px de padding haut, une valeur posée quand la barre faisait 73 px. Le logo l'a portée à 143 px le 24 septembre : il ne reste plus rien. La valeur n'est donc plus écrite en dur, elle suit la hauteur réelle de la barre. --mz-nav-h reprend les hauteurs mesurées aux trois paliers de la section 16 : 143, 105 puis 91 px. L'écart demandé s'ajoute par-dessus, 68 px sur grand écran, ce qui place ces trois pages entre À propos et Contact. ============================================================ */ :root { --mz-nav-h: 143px; } @media (max-width: 1180px) { :root { --mz-nav-h: 105px; } } @media (max-width: 900px) { :root { --mz-nav-h: 91px; } } /* Deux classes et non une : les surcouches page-*.css sont chargées après ce fichier, il faut passer devant elles en spécificité. */ .mz-massages .hero-int, .mz-bioresonance .hero-int, .mz-packs .hero-int { padding-top: calc(var(--mz-nav-h) + 68px); } @media (max-width: 768px) { .mz-massages .hero-int, .mz-bioresonance .hero-int, .mz-packs .hero-int { padding-top: calc(var(--mz-nav-h) + 44px); } } /* ============================================================ 18 — LA BARRE RESTE VIOLETTE AU DÉFILEMENT Demande de Marina, 2 octobre : « quand on scroll il faudrait que le menu ne devienne pas beige mais garde le côté flou / violet de l'accueil ». Trois états existaient : transparente sur le premier écran de l'accueil, crème au défilement, et crème en permanence sur les quatre pages internes et les pages sans bandeau. Il n'en reste qu'un seul principe : le voile mauve, flou, texte crème, partout. ------------------------------------------------------------ LA DENSITÉ DU VOILE EST MESURÉE, PAS CHOISIE ------------------------------------------------------------ Au défilement, le voile ne se pose plus sur le bandeau sombre mais sur le contenu clair de la page. À 42 % le texte crème n'y tient pas. Rapports de contraste du texte crème #F5EDE8 sur le voile composé, fond le plus défavorable (crème clair #FBF6F3) : mauve #6B5B7B à 86 % 3,92 insuffisant mauve #6B5B7B à 94 % 4,66 limite, et le voile vire au plat mauve #584A66 à 82 % 4,44 insuffisant mauve #584A66 à 86 % 4,90 retenu D'où le mauve profond #584A66 à 86 %. Le flou est conservé : c'est lui qui donne le « côté flou » demandé, le voile seul ne le ferait pas. ------------------------------------------------------------ LE LIEN DE LA PAGE COURANTE REPASSE EN CRÈME ------------------------------------------------------------ Les surcouches le marquent en doré #C9A45A. Sur ce voile le doré tombe à 2,46, et il n'était déjà qu'à 2,2 sur la barre crème : c'est un défaut antérieur à cette retouche, pas un effet de celle-ci. Le libellé repasse donc en crème, et c'est le soulignement doré plus la graisse 500 qui marquent la page courante. À revoir avec toi si tu préfères garder le doré sur le libellé. ============================================================ */ @supports (animation-timeline: scroll()) { /* Redéfinit l'arrivée de l'animation de site.css : même nom, dernière déclaration lue, donc c'est celle-ci qui s'applique. */ @keyframes navSolid { to { --nav-bg: rgba(88, 74, 102, .86); --nav-ink: #F5EDE8; --nav-line: rgba(201, 164, 90, .42); } } } /* ------------------------------------------------------------ LE REPLI DES NAVIGATEURS SANS DÉFILEMENT PILOTÉ ------------------------------------------------------------ Le fondu de la barre repose sur animation-timeline: scroll(), que Firefox ne sait pas encore lire. Hors @supports, la barre ne bouge donc jamais : elle doit être lisible à toutes les hauteurs de page, y compris posée sur le contenu clair. D'où le voile dense dès la règle de base, sur les cinq pages à bandeau. Firefox a une barre mauve pleine du premier au dernier pixel, lisible partout ; Chrome, Edge et Safari gardent le fondu, barre transparente sur le bandeau sombre puis voile dense au défilement. Avant cette retouche le repli Firefox était le voile à 42 % de site.css, soit un contraste de 2,9 sur le contenu clair de l'accueil. Ce défaut-là est antérieur, il est corrigé au passage. ------------------------------------------------------------ */ .mz-accueil .nav, .mz-massages .nav, .mz-bioresonance .nav, .mz-packs .nav, .mz-apropos .nav { background: rgba(88, 74, 102, .86); backdrop-filter: blur(14px) saturate(1.1); color: var(--creme); border-bottom: 1px solid rgba(201, 164, 90, .42); } @supports (animation-timeline: scroll()) { .mz-accueil .nav, .mz-massages .nav, .mz-bioresonance .nav, .mz-packs .nav, .mz-apropos .nav { background: var(--nav-bg); color: var(--nav-ink); border-bottom-color: var(--nav-line); backdrop-filter: blur(12px) saturate(1.1); animation: navSolid linear both; animation-timeline: scroll(root); animation-range: 40px 220px; } } /* Contact, mentions légales, politique, 404, confirmation : pas de bandeau sombre, la barre se pose sur du crème dès le premier pixel. Elle y prend directement le voile dense, sans animation. Cette règle remplace celle de la section 3. */ .mz-fond-clair .nav, body.mz-fond-clair .nav { background: rgba(88, 74, 102, .86); backdrop-filter: blur(14px) saturate(1.05); color: var(--creme); border-bottom: 1px solid rgba(201, 164, 90, .42); animation: none; } @supports (animation-timeline: scroll()) { body.mz-fond-clair .nav { background: rgba(88, 74, 102, .86); color: var(--creme); border-bottom-color: rgba(201, 164, 90, .42); animation: none; } } /* Page courante : libellé crème, soulignement doré permanent. */ .mz-massages .nav-links a.is-active, .mz-bioresonance .nav-links a.is-active, .mz-packs .nav-links a.is-active, .mz-apropos .nav-links a.is-active { color: inherit; font-weight: 500; background-image: linear-gradient(var(--or-clair), var(--or-clair)); background-size: 100% 1px; } /* ============================================================ 19 — LA LIGNE DE CHIFFRES QUAND IL N'Y EN A PLUS QUE DEUX « 3 techniques exclusives » retiré le 2 octobre, la ligne passe de trois chiffres à deux. Le socle la dessine en « space-between » avec « flex: 1 » sur chaque case : à trois, chaque case fait 380 px sur une largeur de 1200 ; à deux, elle en fait 580, et les deux nombres se retrouvent collés aux bords avec la lune de séparation perdue au milieu. Mesuré : 1 018 px entre le 5 et le 45. La règle ne s'applique qu'au cas « exactement deux chiffres », repéré par :has() sur la deuxième case qui est aussi la dernière. Si un troisième chiffre revient un jour, le socle reprend la main tout seul. ============================================================ */ .stats-row:has(.stat:nth-of-type(2):last-of-type) { justify-content: center; gap: clamp(40px, 9vw, 130px); } .stats-row:has(.stat:nth-of-type(2):last-of-type) .stat { flex: 0 1 auto; } /* ============================================================ 20 — UN SOIN SANS PHOTO PREND TOUTE LA LARGEUR Posé le 7 octobre avec le massage à quatre mains, dont la photo attend l'autorisation de diffusion de la seconde praticienne. La grille d'un soin est en deux colonnes égales. Sans photo, le gabarit rendait quand même son panneau : mz_style_fond() n'y posait que le voile, et le visiteur voyait un rectangle rose uni qui se lit comme une image qui n'a pas chargé. Le bloc de média ne se rend plus du tout, et la grille passe à une seule colonne. La carte de texte garde une largeur de lecture : sans cette limite, la ligne montait à 1136 px sur grand écran, soit plus du double de ce que les autres soins donnent. ============================================================ */ /* Deux classes, et c'est le piège d'ordre de chargement de ce dossier : page-massages.css est chargée APRÈS adaptations.css, donc à spécificité égale c'est elle qui gagne. Sans le préfixe, .soin-grid{1fr 1fr} du gabarit l'emportait et la carte restait dans une colonne sur deux, la seconde vide. Mesuré : carte de 533 px au lieu de 760. */ .mz-massages .soin-grid--seul { grid-template-columns: 1fr; } .mz-massages .soin-grid--seul .soin-body { max-width: 760px; margin-inline: auto; } /* ============================================================ 18 — LE MENU DE TÉLÉPHONE ============================================================ Arbitré le 15 octobre, jour de la mise en ligne. La section 16 notait le manque : sous 768 px il ne restait que le logo et le bouton doré, et les quatre pages n'étaient atteignables que depuis le pied de page. Construit sans une ligne de JavaScript, sur
. Le bouton est une cible de 48 × 48, au-dessus des 44 recommandés. Les trois traits prennent currentColor : ils suivent donc la barre sombre comme la barre claire des pages légales, sans règle supplémentaire. ============================================================ */ .nav-mobile { display: none; } .nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 48px; height: 48px; padding: 0 12px; cursor: pointer; list-style: none; border-radius: 12px; } /* Les deux syntaxes du marqueur natif : WebKit et la standard. */ .nav-burger::-webkit-details-marker { display: none; } .nav-burger::marker { content: ""; } .nav-burger-trait { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .28s cubic-bezier(.2,.9,.25,1), opacity .2s ease; } /* Ouvert, les trois traits deviennent une croix. Le trait du milieu s'efface, les deux autres pivotent sur le centre du bouton. */ .nav-mobile[open] .nav-burger-trait:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-mobile[open] .nav-burger-trait:nth-child(2) { opacity: 0; } .nav-mobile[open] .nav-burger-trait:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-mobile-liens { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; padding: 6px 22px 14px; background: rgba(88, 74, 102, .97); backdrop-filter: blur(16px) saturate(1.15); border-bottom: 1px solid rgba(245, 237, 232, .14); color: var(--creme); } .nav-mobile-liens a { display: flex; align-items: center; min-height: 52px; font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: inherit; border-bottom: 1px solid rgba(245, 237, 232, .12); /* La soulignure animée du menu de bureau n'a pas de sens ici : la ligne de séparation ferait doublon. */ background-image: none; } .nav-mobile-liens a:last-child { border-bottom: 0; } .nav-mobile-liens a.is-active { color: var(--or-clair); } /* Sur les pages claires, le panneau suit la barre crème à texte encre. */ .mz-fond-clair .nav-mobile-liens { background: rgba(245, 237, 232, .98); color: var(--encre); border-bottom-color: rgba(201, 164, 90, .55); } .mz-fond-clair .nav-mobile-liens a { border-bottom-color: rgba(201, 164, 90, .28); } .mz-fond-clair .nav-mobile-liens a.is-active { color: var(--or); } @media (prefers-reduced-motion: reduce) { .nav-burger-trait { transition: none; } } /* La barre passe à trois colonnes sous 768 : logo, vide, bouton doré et menu. Le bouton doré et le bouton de menu partagent la colonne de droite, dans cet ordre de lecture. */ @media (max-width: 768px) { .nav-inner { grid-template-columns: auto 1fr auto; } .nav-droite { grid-column: 2; justify-self: end; } .nav-mobile { display: block; grid-column: 3; grid-row: 1; justify-self: end; margin-left: 4px; } } /* ============================================================ 19 — DEUX RETOUCHES DE LISIBILITÉ SUR TÉLÉPHONE ============================================================ Arbitrées le 15 octobre sur mesures faites en ligne. LA LIGNE DE TARIF. « 20, 30 ou 40 min • 1 € la minute » passait sur deux lignes à 320, 360 et 390 px en laissant « minute » seul en bas. La taille descend de 28 à 24 px sous 430, et text-wrap:balance répartit la coupe au lieu de la subir. La ligne peut rester sur deux lignes aux largeurs les plus étroites ; elle n'y laisse plus de mot orphelin. LE BOUTON DORÉ. Mesuré à 163 × 38 sur téléphone, pour 44 px de haut recommandés comme cible tactile. On remonte la hauteur par le rembourrage, sans toucher à la forme ni à la couleur, et le texte revient de 11,5 à 12,5 px. ============================================================ */ /* La ligne de tarif n'est PAS traitée ici mais à la fin de page-massages.css. Raison mesurée le 15 octobre : page-massages.css est chargée APRÈS adaptations.css, et « .tarif » y a la même spécificité. La règle posée ici était donc écrasée, et sans effet. */ @media (max-width: 768px) { .nav-cta .btn { min-height: 44px; font-size: 12.5px; padding: 10px 10px 10px 16px; } } @media (max-width: 430px) { .nav-cta .btn { min-height: 44px; font-size: 12.5px; padding: 10px 9px 10px 14px; } }