/* Couche de fidelite visuelle Les planches "Design des pages" ne changent ni les contenus, ni les contraintes WordPress. Cette feuille rapproche leur rendu de l'apercu : papier chaud, lignes fines, relief discret et sections plus composees. Elle reste volontairement en surcharge afin de pouvoir etre reprise dans le CSS additionnel de WordPress sans dupliquer les cinq feuilles de page. */ :root{ --fidelite-papier: color-mix(in srgb, var(--accent-rare) 10%, transparent); /* Meme grain, mais retourne : sur bordeaux un point brun ne se voit pas, c'est un point clair qui fait le papier. */ --fidelite-papier-sombre: color-mix(in srgb, var(--encre) 5%, transparent); --fidelite-filet: color-mix(in srgb, var(--accent-rare) 32%, transparent); --fidelite-ombre: color-mix(in srgb, var(--creme) 12%, transparent); --fidelite-ombre-forte: color-mix(in srgb, var(--creme) 20%, transparent); --fidelite-transition: 260ms cubic-bezier(0.2, 0.75, 0.25, 1); /* ---------- Nuances de degrade ---------- Cinq crans entre le creme et le sable, quatre entre les deux bordeaux. Aucune couleur nouvelle : tout sort des six jetons par color-mix. Un degrade de bande enjambe un ou deux crans, jamais plus de la moitie de l'echelle : l'ecart entre ses deux bouts reste alors sous les dix niveaux de rouge, on sent la profondeur, on ne voit pas la bande de couleur. */ --nuance-c0: var(--fond); --nuance-c1: color-mix(in srgb, var(--fond-alt) 22%, var(--fond)); --nuance-c2: color-mix(in srgb, var(--fond-alt) 46%, var(--fond)); --nuance-c3: color-mix(in srgb, var(--fond-alt) 72%, var(--fond)); --nuance-c4: var(--fond-alt); --nuance-b0: var(--creme); --nuance-b1: color-mix(in srgb, var(--fond-sombre) 45%, var(--creme)); --nuance-b2: color-mix(in srgb, var(--fond-sombre) 80%, var(--creme)); --nuance-b3: var(--fond-sombre); /* Le seul ecart lateral autorise : le bordeaux tire vers le terracotta du jeton --accent-rare, jamais vers une teinte neuve. */ --nuance-b-chaud: color-mix(in srgb, var(--accent-rare) 9%, var(--fond-sombre)); } html{ scroll-behavior: smooth; } body{ background-color: var(--fond); background-image: radial-gradient(circle at 18% -12%, color-mix(in srgb, var(--fond-alt) 72%, transparent), transparent 34rem), radial-gradient(circle at 86% 24rem, color-mix(in srgb, var(--accent-rare) 6%, transparent), transparent 28rem); text-rendering: optimizeLegibility; } h1, h2, h3{ text-wrap: balance; } p, li, blockquote{ text-wrap: pretty; } /* ---------- Degrades de bande ---------- Cette regle-ci est plus specifique que les .bande-xxx des feuilles de page, et chargee apres elles : son fond gagnait donc toujours, et les degrades ecrits dans les pages ne s'affichaient jamais. Verifie au fond calcule sur l'accueil : les radiaux de « Une seance » et du « Lieu » etaient morts. On inverse la logique. La page pose sa nuance dans --degrade-bande, une variable, donc hors conflit de cascade. Cette regle ne garde que le grain, qui est justement ce qui masque les anneaux de Mach sur les grandes surfaces. Le repli reproduit le voile d'avant, aucune bande ne se retrouve nue si sa page n'a rien dit. Les quatre valeurs de background-size pour deux couches sont volontaires : les valeurs en trop sont ignorees, et --degrade-bande peut ainsi compter jusqu'a trois couches sans que le grain ne soit reetire au passage. */ .section:not(.hero), .section--alt{ background-image: radial-gradient(circle at 0 12%, var(--fidelite-papier) 0 1px, transparent 1.25px), var(--degrade-bande, radial-gradient(ellipse 48% 80% at 100% 0%, color-mix(in srgb, var(--fond-alt) 35%, transparent), transparent 70%)); background-size: 14px 14px, auto, auto, auto; } /* Les bandes bordeaux n'avaient ni grain ni variable : un aplat sombre sur six cents pixels est precisement la surface ou les anneaux se voient le plus. Le :where() est la pour le poids : il ne compte pour rien, la regle pese donc autant qu'un .bande-xxx. Elle passe devant les feuilles de page, chargees avant elle, et laisse la main a home-upgrade.css, chargee apres elle, qui compose l'accueil a sa main. */ :where(.bande).section--claire{ background-color: var(--fond-sombre); background-image: radial-gradient(circle at 0 12%, var(--fidelite-papier-sombre) 0 1px, transparent 1.25px), var(--degrade-bande, radial-gradient(92% 130% at 50% 40%, color-mix(in srgb, var(--fond-sombre) 95%, var(--accent-rare)) 0%, var(--fond-sombre) 55%)); background-size: 14px 14px, auto, auto, auto; } /* Le filet en pied d'entete est retire le 28 aout, a sa demande. Il ne reste qu'une ombre tres diffuse : l'entete etant collante sur les cinq pages, il faut qu'elle se detache du contenu qui defile dessous, mais par une ombre et non par un trait. */ .entete{ box-shadow: 0 8px 30px color-mix(in srgb, var(--creme) 3%, transparent); } /* Pied de page. Les quatre feuilles de page y posaient le meme aplat creme. Un seul cran de sable en descente suffit a l'asseoir sous la derniere bande, et le meme partout tient la coherence des cinq pages. L'accueil garde le sien : home-upgrade.css est chargee apres celle-ci et pese pareil. */ .pied{ background-image: linear-gradient(180deg, var(--nuance-c0) 0%, var(--nuance-c1) 100%); } .menu a{ text-decoration-thickness: 1px; text-underline-offset: 0.45em; } .btn{ /* Filet interne retire le 30/08 : sur un bouton a plat il dessinait un contour parasite qu'on prenait pour une bordure. Seule l'ombre portee douce est conservee. */ box-shadow: 0 6px 14px color-mix(in srgb, var(--creme) 10%, transparent); transition: transform var(--fidelite-transition), box-shadow var(--fidelite-transition), background-color var(--fidelite-transition), border-color var(--fidelite-transition), color var(--fidelite-transition); } .btn:hover{ transform: translateY(-2px); box-shadow: var(--encre) 25%, transparent), 0 10px 18px color-mix(in srgb, var(--creme) 17%, transparent); } .btn:active{ transform: translateY(0) scale(0.985); box-shadow: var(--creme) 12%, transparent); } .btn:focus-visible{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-rare) 24%, transparent), 0 9px 18px color-mix(in srgb, var(--creme) 15%, transparent); } .avis-carte, .soin, .formule, .version, .offre, .pratique__grille li, .repere, .adresse, .rdv-carte, .contact__carte, .medical__barre, .huiles, .mention__carte, .formations li{ border-color: var(--fidelite-filet); box-shadow: 0 1px 0 color-mix(in srgb, var(--encre) 42%, transparent) inset, 0 12px 26px var(--fidelite-ombre); } .avis-carte, .formule, .version, .offre, .pratique__grille li, .repere, .adresse, .contact__carte, .medical__barre, .huiles, .mention__carte, .formations li{ background-image: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent-rare) 8%, transparent), transparent 13rem), linear-gradient(145deg, color-mix(in srgb, var(--fond) 86%, var(--encre)), var(--fond)); } .avis-carte, .soin, .formule, .version, .offre, .pratique__grille li, .repere, .adresse, .rdv-carte, .contact__carte, .medical__barre, .huiles, .mention__carte{ transition: transform var(--fidelite-transition), box-shadow var(--fidelite-transition), border-color var(--fidelite-transition); } @media (hover: hover){ .avis-carte:hover, .soin:hover, .formule:hover, .version:hover, .offre:hover, .pratique__grille li:hover, .repere:hover, .adresse:hover, .rdv-carte:hover, .contact__carte:hover, .medical__barre:hover, .huiles:hover, .mention__carte:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-rare) 56%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--encre) 46%, transparent) inset, 0 19px 32px var(--fidelite-ombre-forte); } } /* Leger relief sur les petites capitales espacees : c'est ce qui les empeche d'avoir l'air posees a plat sur le fond. Regle pensee pour du texte de 11 a 13 px. */ .titre-bande, .surtitre, .ornement{ text-shadow: 0 1px 0 color-mix(in srgb, var(--encre) 15%, transparent); } /* Mais

n'est plus un label depuis le 27 aout : c'est un titre de section en Marcellus bas de casse, a 38 px. A cette taille le relief devient un flou visible sous les empattements, et aucun autre titre de section du site n'en porte (.etape__titre, .rdv__titre, .faq__titre...). On le retire pour que les cinq pages aient rigoureusement la meme texture de titre. Les labels, eux, le gardent. */ h2.titre-bande{ text-shadow: none; } .hero h1, .titre-page h1{ letter-spacing: -0.018em; } .soin__prix, .offre__prix, .tableau__grille, .rdv-carte__chiffre{ font-variant-numeric: tabular-nums lining-nums; } .accordeon summary, .faq summary{ transition: color var(--fidelite-transition), background-color var(--fidelite-transition), padding-inline var(--fidelite-transition); } .accordeon summary:hover, .faq summary:hover{ color: var(--accent); background-color: color-mix(in srgb, var(--accent-rare) 6%, transparent); } .champ input, .champ textarea{ transition: border-color var(--fidelite-transition), box-shadow var(--fidelite-transition), background-color var(--fidelite-transition); } .champ input:focus, .champ textarea:focus{ outline: none; border-color: var(--accent); background: color-mix(in srgb, var(--fond) 94%, var(--encre)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); } /* Les bordures haute et basse de la bande d'appel sont retirees le 28 aout : c'est une bande bordeaux prise entre deux bandes cremes, le contraste des fonds marque deja ses deux limites. */ .bande-appel .appel__photo img, .hero__photo img, .hero__fond, .version__photo img, .contact__photo img, .praticienne__photo img{ transition: transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1), filter var(--fidelite-transition); } .appel__photo, .version__photo, .contact__photo, .praticienne__photo{ overflow: hidden; } @media (hover: hover){ .bande-appel:hover .appel__photo img, .hero:hover .hero__photo img, .version:hover .version__photo img, .contact__grille:hover .contact__photo img, .praticienne__grille:hover .praticienne__photo img{ transform: scale(1.025); } } @media (min-width: 60rem){ .bande:not(.hero){ /* Revue 4 du 29 aout : « trop d'espaces vides entre les textes », « il faut que ce soit plus resserre pour ne pas avoir a scroller autant ». Les pages mesurent 42 a 79 pour cent de hauteur en plus que les maquettes validees. Cette regle est le levier le plus rentable du lot parce qu'elle s'applique aux cinq pages a la fois. Attention a sa portee reelle : avec :not() elle pese 0,2,0, alors que le .bande des feuilles de page et les .bande-xxx de home-upgrade.css pesent 0,1,0. Au-dessus de 60 rem elle passe donc devant eux tous, y compris devant home-upgrade.css qui est pourtant chargee apres : la specificite l'emporte sur l'ordre. C'est ici, et nulle part ailleurs, que se decide le padding des bandes sur grand ecran. Sont donc neutralises au-dessus de 60 rem, releve du 30 aout : accueil.css:258 (.bande) et son equivalent dans les quatre autres feuilles de page, puis home-upgrade.css:596 (.bande-soins), 771 (.bande-etapes) et 824 (.bande-lieu). Les trois dernieres posaient un padding asymetrique haut/bas ; l'ecriture symetrique ci-dessous l'aplatit aussi. A arbitrer avec l'agent qui tient ces feuilles. Borne haute 3.6rem -> 2.6rem. A 1440 px on passe de 57,6 px a 41,6 px par bord, soit 32 px gagnes par bande. La borne basse et la pente, elles, ne jouent jamais ici : 1.7rem + 1.7vw atteint deja 2.6rem des 847 px, alors que la regle ne demarre qu'a 60 rem soit 960 px. Au-dessus du seuil la valeur vaut donc constamment 2.6rem. Le clamp est conserve tel quel pour rester sur la valeur cible demandee, mais ne pas lire ce padding comme fluide : il est fixe. Gain reel, bandes comptees page par page : boncadeau 4 bandes 128 px, accueil et infos 5 bandes 160 px, soins 6 bandes 192 px, a propos 8 bandes 256 px. Sur soins et a propos une partie du gain reste invisible : la bande-titre a sa hauteur tenue par le min-height pose juste en dessous. Aucune couleur touchee. */ padding-block: clamp(2.2rem, 1.7rem + 1.7vw, 2.6rem); } .bande-titre, .hero{ min-height: clamp(25rem, 37vw, 34rem); } .soin--phare, .formule:nth-child(2), .offre:nth-child(2){ box-shadow: 0 1px 0 color-mix(in srgb, var(--encre) 52%, transparent) inset, 0 18px 38px var(--fidelite-ombre-forte); } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } .btn, .avis-carte, .soin, .formule, .version, .offre, .pratique__grille li, .repere, .adresse, .rdv-carte, .contact__carte, .medical__barre, .huiles, .mention__carte, .bande-appel .appel__photo img, .hero__photo img, .hero__fond, .version__photo img, .contact__photo img, .praticienne__photo img{ transition: none; } } /* ============================================================ TACTILE ET LISIBILITE MOBILE, 28 aout. Chargee apres les feuilles de page, donc ces regles gagnent. Mesure a 375 px avant correction : boutons 42 px, menu 33 px, liens de pied de page 15 a 21 px, « Plus d'infos sur ce soin » 20 px, et le petit texte du logo a 8,96 px. Reference : WCAG 2.2, critere 2.5.8 Target Size (Minimum) exige 24 x 24 px en AA, le 2.5.5 recommande 44 x 44 en AAA. Le pied de page echouait meme le seuil AA. On vise 44 partout, ce qui est aussi la recommandation d'Apple et de Google. ============================================================ */ /* Une cible tactile ne se mesure pas au texte mais a la zone cliquable : min-block-size ne fait rien sur un element inline, d'ou le passage en inline-flex centre. */ .btn, .menu a, .lien-discret, .pied a, .marque, .etape__avancer, .etape__reculer, .fil__lien{ min-block-size: 44px; } .menu a, .lien-discret, .pied a{ display: inline-flex; align-items: center; } /* Les accordeons de la page Soins sont des cibles a part entiere. */ summary{ min-block-size: 44px; } /* Le mail du bloc Contact d'Infos pratiques vit hors du pied de page : mesure 204 x 21, sous le seuil AA. Les liens mailto et tel sont toujours autonomes, la regle peut donc etre generale. */ a[href^="mailto:"], a[href^="tel:"]{ display: inline-flex; align-items: center; min-block-size: 44px; } /* 8,96 px n'est defendable par aucune norme, et la regle du projet est « tout doit grossir, sa clientele plisse les yeux ». */ .marque__mots small{ font-size: clamp(0.6875rem, 0.66rem + 0.11vw, 0.75rem); } /* ------------------------------------------------------------ Finitions 2026, sans effet sur la composition validee. ------------------------------------------------------------ */ /* Empeche iOS de gonfler le texte en paysage. */ html{ -webkit-text-size-adjust: 100%; } /* Evite le mot orphelin en fin de titre, tres frequent en etroit. */ h1, h2, h3, .titre-bande, .etape__titre{ text-wrap: balance; } p, li{ text-wrap: pretty; } /* Les ancres internes ne doivent pas passer sous l'en-tete. */ [id]{ scroll-margin-block-start: 5rem; } /* Le carrousel d'avis ne doit pas entrainer la page avec lui. */ .avis__piste{ overscroll-behavior-inline: contain; } /* ============================================================ FOND « DEUX FOYERS » SUR TOUTES LES BANDES CLAIRES, 28 aout. Choisi parmi huit variantes, puis etendu a l'ensemble du site. Deux halos en diagonale, un clair en haut a gauche, un sable en bas a droite, poses sur un vertical qui descend du creme vers le sable. Tout passe par les jetons : si la teinte de base rebouge, les seize bandes suivent. POURQUOI ICI, ET AVEC CE POIDS. Chaque bande posait jusqu'ici son propre --degrade-bande depuis la feuille de sa page, avec un selecteur d'une seule classe. Une regle a trois classes passe devant toutes, quel que soit l'ordre de chargement, et fidelity.css est la seule feuille chargee par les cinq pages. Une regle, seize bandes. Les bandes bordeaux ne sont pas concernees : elles portent .section--claire, que ce selecteur ne touche pas. Le consommateur plus haut reserve quatre couches, dont une pour le grain : les trois couches ci-dessous tiennent exactement dans les trois restantes. NON REPRODUCTIBLE dans le selecteur de degrade de Gutenberg, qui n'accepte qu'une seule couche. A l'integration, ce sera du CSS additionnel, donc un reglage que Margo ne pourra pas bouger seule. ============================================================ */ :root{ --deux-foyers: radial-gradient(ellipse 74% 78% at 22% 22%, color-mix(in srgb, var(--encre) 92%, var(--fond)), transparent 62%), radial-gradient(ellipse 86% 88% at 82% 76%, color-mix(in srgb, color-mix(in srgb, var(--fond-alt) 90%, var(--creme)) 75%, transparent), transparent 64%), linear-gradient(170deg, var(--fond), color-mix(in srgb, var(--fond-alt) 78%, var(--fond))); } .bande.section:not(.hero):not(.bande-offres), .bande.section--alt:not(.bande-offres){ --degrade-bande: var(--deux-foyers); } /* ============================================================ CENTRAGES, REVUE 5 DU 04/09 « Centrer le texte sur le côté de la page où il est » (héros), « centrer les textes dans leur colonne », « centrer le titre », « centrer les titres / les textes sous les titres » (pied de page), « centrer le texte » (bloc adresse et bloc Une question). Les héros gardent leur MOITIÉ de page : on centre le texte DANS sa colonne, on ne recentre pas le bloc sur la page. Le titre décentré avec photo est validé en revue 3 et n'est pas remis en cause ici. Trois classes : cette feuille est chargée AVANT home-upgrade.css et page-section-backgrounds.css, c'est donc la spécificité et non l'ordre qui doit l'emporter. ============================================================ */ /* Héros des trois pages qui en ont un avec texte en colonne. */ .page-accueil .hero .hero__texte, .page-cadeaux .hero .hero__texte, .page-apropos .titre-page .titre-page__contenu{ text-align: center; } .page-accueil .hero .hero__texte .actions, .page-cadeaux .hero .hero__texte .actions{ justify-content: center; } /* « Une séance, pas à pas » : textes centrés dans leur colonne. Annule le text-align: left pose le 02/09 avec le ruban. */ .page-accueil .etapes .etapes__grille--ruban > li{ text-align: center; } .page-accueil .etapes .etapes__grille--ruban .etapes__num::after{ margin-inline: auto; /* le marqueur suit le centrage */ } /* « Le lieu » : titre et phrase centrés. */ .page-accueil .lieu .titre-bande, .page-accueil .lieu .lieu__phrase{ text-align: center; } /* Pied de page, sur les cinq pages : titres et textes centrés. */ .pied .pied__grille > div{ text-align: center; } .pied .pied__grille .marque{ justify-content: center; } /* Infos pratiques : bloc adresse et bloc « Une question ». */ .bande .adresse{ text-align: center; } .bande .adresse .adresse__lignes{ text-align: center; } .bande-contact .contact__texte{ text-align: center; } /* ---------- « Le lieu » : titre accordé aux deux sections précédentes, revue 5 du 04/09 ---------- Mesure avant correction : « Les trois soins » et « Une séance, pas à pas » sont en Marcellus 28 px casse normale, tandis que « Le lieu » était en Parkinsans 11 px capitales interlettrées. C'était un surtitre déguisé en titre de section, seul de son espèce sur la page. Les deux autres titres de bande ne sont PAS touchés : la mesure montre qu'ils sont déjà identiques entre eux, contrairement à ce que dit sa revue, qui décrit vraisemblablement la version déployée du 27 août. */ .page-accueil .lieu .titre-bande{ font-family: var(--titre); font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.75rem); font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--creme); } /* ---------- « Le lieu » : respiration avant la galerie, 04/09 ---------- Ecart mesure avant correction : 0 px. La phrase d'introduction touchait le slider, sans aucune marge ni de son cote ni de celui de la galerie. Valeur fluide, calee sur le rythme vertical du reste de la feuille. */ .page-accueil .lieu .lieu__phrase{ margin-bottom: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); } /* ---------- Respiration avant un bloc de cartes, 04/09 ---------- Deux endroits presentaient le meme defaut, mesure a 0 px d'ecart : la phrase du lieu collee a la galerie sur l'accueil, et la phrase « La personne qui recoit le bon choisira ensuite sa version... » collee a la grille des trois offres sur les bons cadeaux. Revue 5 : « Ajouter un espace sous [cette phrase] ». UNE SEULE regle pour les deux, et non une valeur recopiee : deux endroits qui doivent respirer pareil partagent la meme declaration. La regle du lieu plus haut pose la meme valeur, elle est donc redondante mais pas contradictoire. */ .page-accueil .lieu .lieu__phrase, .page-cadeaux .etape .etape__aide{ margin-bottom: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); } /* ============================================================ GRAISSE DES TITRES APRES LE PASSAGE A PARKINSANS, 04/09 Mesure apres la bascule du jeton : tous les titres tombaient en graisse 400. C'etait juste pour Marcellus, une serif dont le dessin porte seul ; en sans-serif la meme valeur donne des titres maigres et sans autorite. 600 plutot que 700 : 700 est deja la graisse des titres de cartes (« SOIN CIBLE ») et des libelles en capitales. Garder un cran d'ecart preserve la hierarchie, sinon tout le site se retrouve au meme poids et on reperd la distinction que la serif assurait. Specificite : cette feuille est chargee AVANT home-upgrade.css, donc c'est elle qui doit l'emporter, pas l'ordre. ============================================================ */ .page-accueil h1, .page-apropos h1, .page-soins h1, .page-cadeaux h1, .page-infos h1, .page-accueil h2, .page-apropos h2, .page-soins h2, .page-cadeaux h2, .page-infos h2, .bande .titre-bande, .bande .etape__titre, .etapes .etapes__grille--ruban h3, .lieu .titre-bande{ font-weight: 500; letter-spacing: -0.005em; /* une sans-serif large respire moins bien que Marcellus a taille de titre */ } /* ============================================================ COUPE DES GRANDS TITRES, 04/09 Les trois titres de heros portaient un
EN DUR. Un point de rupture fixe ignore la largeur de l'ecran et le dessin de la police : il fallait deja deux regles pour le masquer sur mobile, home-upgrade.css:1546 et accueil.css:2007. Symptome classique. Le passage de Marcellus a Parkinsans le rendait de toute facon faux : les points de coupe calcules pour une serif ne valent plus. Le systeme qui remplace : - text-wrap: balance repartit les lignes a longueurs egales, c'est exactement ce a quoi cette propriete sert, sur des titres courts. - max-width en ch conserve la composition sur DEUX lignes voulue par les designs valides. Sans elle, « Offrir un moment » tiendrait sur une seule ligne sur grand ecran et la maquette ne serait plus tenue. Sur un navigateur sans text-wrap: balance, la coupe reste correcte, simplement moins equilibree : la max-width suffit a la provoquer. Les deux regles display:none sur h1 br deviennent inertes, elles peuvent etre nettoyees mais ne genent pas. ============================================================ */ .page-accueil .hero h1, .page-cadeaux .hero h1, .page-apropos .titre-page h1{ max-width: 14ch; text-wrap: balance; margin-inline: auto; /* les titres sont centres depuis la revue 5 */ } /* ============================================================ HAUTEUR DES BANDEAUX, REVUE 5 DU 04/09 « Réduire la hauteur des bandeaux qui sont trop larges », plus la même demande sur les avis, « Prenez soin de vous » et le pied de page. Mesure avant correction : les six bandes de l'accueil partagent exactement le même rembourrage vertical, 41,6 px. UN SEUL reglage les commande, il n'y a donc pas huit corrections a faire mais une. Reduction de 30 pour cent. Sa revue ne donne AUCUNE valeur cible : ce chiffre est un point de depart mesurable, pas une verite. Pour ajuster, une seule valeur a changer ici. Le pied de page suit le meme rapport. ATTENTION, le heros n'est PAS concerne : son rembourrage vaut deja 0, sa hauteur vient de son contenu et de sa photo. Le reduire demande un autre levier, a traiter separement. ============================================================ */ .bande.section, .bande.section--alt, .bande.section--claire{ padding-block: clamp(1.55rem, 1.2rem + 1.2vw, 1.85rem); } .pied{ padding-block: clamp(1.45rem, 1.1rem + 1.1vw, 1.7rem); } /* ---------- Intitules de zones de l'accordeon, 04/09 ---------- Mesure : « Dos et epaules », « Nuque, trapezes et tete » et « Jambes legeres et pieds » etaient en graisse 700, soit EXACTEMENT celle des titres de cartes « SOIN CIBLE ». Or ce sont des sous-elements de la colonne Soin cible, donc un niveau en dessous : la hierarchie etait ecrasee, tout pesait pareil. 500, comme les titres de page et de section depuis le passage a Parkinsans. Le contraste avec le 700 des cartes retablit l'ordre. Deux classes plus un element : les regles existantes valent (0,2,0). */ .bande .accordeon summary, .bande .accordeon summary span{ font-weight: 500; } /* Titres de cartes de la page Soins, rattrapage du 04/09. Mesure : « Soin cible », « Soin signature » et « Soin prestige » etaient restes en graisse 400, valeur calee pour Marcellus. Apres le passage a Parkinsans et l'allegement des zones a 500, le titre de carte se retrouvait PLUS LEGER que les zones qu'il contient : hierarchie inversee. 600 le remet au-dessus. */ .bande .formule h3{ font-weight: 600; }