/* Theme Name: Maison Minceur Theme URI: https://www.maisonminceur.fr Description: Theme enfant GeneratePress de Maison Minceur -- feuille derivee de la charte de direction artistique, sans aucune valeur relevee de l'ancien site. Author: Maison Minceur Template: generatepress Version: 1.0.202610221241 Text Domain: mm-generatepress-child */ /* ========================================================================= MAISON MINCEUR -- feuille du site neuf Traduction de docs/specs/charte-direction-artistique-mm-institut-premium.md. Aucune valeur ne provient d'un releve de l'ancien site. Couleurs lues dans design/palettes.json : aucune n'est ecrite ici. ========================================================================= */ :root { /* 4.2 Couleur -- les roles */ --mm-ground: #fffbfb; --mm-surface: #f7f1ed; --mm-body: #48352d; --mm-ink: #2c1f1a; --mm-muted: #68554a; --mm-action: #f49d49; --mm-action-fort: #d9872e; --mm-rule: #2c1f1a1f; --mm-rule-soft: #2c1f1a14; --mm-clair: #ffffff; --mm-clair-20: #ffffff33; --mm-voile: #2c1f1ae6; /* LE FOND D'UN ÉLÉMENT SE DÉRIVE DU FOND DE SA SECTION (Monsieur, 15/09/2026 : « que la couleur des éléments soit définie par rapport à celle du background de la section »). Mesure du même soir sur les 37 pages composées avec l'habillage servi : 9 familles d'éléments, 47 occurrences, portaient le fond EXACT de leur section, ou un blanc à 1,03 de contraste -- objectifs, associations, cartes, encadrés, zones, tableau, preuve, grille des tarifs, ruban avant/après. Une teinte fixe tombe juste sur un fond et se confond avec l'autre : l'alternance des sections change d'une page à l'autre selon les sections omises. La section DÉCLARE donc les deux valeurs, et chaque composant lit `--mm-fond-element`. Section claire (par défaut) : fond crème pâle, éléments en surface ; section douce : fond surface, éléments en blanc. */ --mm-fond-section: var(--mm-ground); --mm-fond-element: var(--mm-surface); /* 3.1 Deux familles, deux roles -- et deux voix dans la serif (24/08/2026) Cormorant SC porte l'identite : elle reste sur le H1, les chiffres mis en avant et les prix. Elle devient lourde des qu'un titre depasse une ligne (reserve ecrite par la charte elle-meme, section 9.1, jamais tranchee avant ce jour) : les SOUS-TITRES passent en Cormorant Garamond, memes formes, casse normale. Arbitrage de Monsieur, 24/08 : « Cormorant SC fait partie de l'identite donc j'aimerais que ce soit conserve pour certains elements cle. Pour le reste on peut basculer sur Garamond pour les sous-titres. » Aucune police de plus a charger : le theme enfant sert deja Garamond 300. */ --mm-serif: 'Cormorant SC', Cormorant, Georgia, serif; --mm-serif-titre: 'Cormorant Garamond', Cormorant, Georgia, serif; --mm-sans: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif; /* 5. Espace -- echelle de 8, sans exception */ --mm-1: .5rem; --mm-2: 1rem; --mm-3: 1.5rem; --mm-4: 2rem; --mm-6: 3rem; --mm-8: 4rem; /* La respiration ENTRE deux sections. Chaque section en prend la moitie : appliquee des deux cotes, elle se cumulerait (mesure du 23/08 : 256 px). */ --mm-respiration: clamp(4rem, 8vw, 8rem); /* 3.3 La colonne de lecture */ --mm-mesure: 68ch; /* 11. Le gabarit LARGE : un PLAFOND fluide, jamais une largeur (arbitrage de Monsieur, 28/08/2026). En dessous, le contenu prend l'ecran moins la gouttiere ; le plafond ne mord qu'au-dela de ~1 400 px. 80 rem = 1 280 px, la borne des systemes courants (Tailwind 7xl, Bootstrap xxl 1 320) ; 96 rem etalait les cartes sur 1 536 px a 1 920 et donnait aux pages composees un bord different de celui du conteneur du theme (1 290). Un seul jeton, cinq conteneurs. */ --mm-large: 80rem; /* La largeur d'une carte portrait, et celle de la colonne qui la porte a cote d'un recit (09/10/2026) : une seule valeur, sinon la carte et sa colonne se desaligneraient. */ --mm-carte-portrait: 18rem; /* 4.3 Rayon unique */ --mm-rayon: 2px; } /* ------------------------------------------------------------------------- Fondations ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Ces fondations portaient un scope `.mm-neuf`. Il a ete retire le 23/08/2026 : AUCUN producteur n'ecrit cette classe -- ni site_neuf_mm.py, ni le convertisseur, ni le gabarit, ni le theme -- et le HTML de l'accueil neuf rend un corps `class="mm-titre-masque full-width-content"`. Portee par un selecteur que rien n'emet, toute la typographie de la charte etait inerte : le corps, les six niveaux de titre, les paragraphes, les liens, le focus. Or le diagnostic de la charte (1) est que « le defaut est typographique et spatial ». La feuille remplace la feuille heritee, elle ne cohabite pas avec elle : elle habille donc les elements directement. */ body { margin: 0; background: var(--mm-ground); color: var(--mm-body); /* 3.2 Corps a 17 px, interligne 1.65 -- le point le plus contre-intuitif de la charte, et celui qui rend la hierarchie possible. */ font: 400 1.0625rem/1.65 var(--mm-sans); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* 3.2 L'echelle Major Third (1,25), fluide. Les ruptures assumees : H1 a 4,2 rem, H2 en Garamond (casse normale), H3 a H6 en sans-serif graisse 600, corps a 17 px. LE TITRE DE PAGE AU TÉLÉPHONE (Monsieur #5 et #9 du 09/10/2026, run 659 : le téléphone d'abord). Le plancher de 44 px du clamp coupait les mots longs en plein milieu (« accompagnement » sur l'accueil et Nos centres, « confidentialité ») et menait onze titres à 4 ou 5 lignes à 360 px : un mot plus large que sa boîte est coupé par l'`overflow-wrap: break-word` de GeneratePress. `min(8.4vw, …)` fait suivre la police à la largeur : le titre le plus long, celui de l'accueil, tient en 3 lignes de 360 à 414 px (30,2 à 34,8 px, sous les seuils 31 / 32 / 33,5 / 36 px de l'étude du run 659) ; la police ne change plus à partir de 600 px, et rien ne change à partir de 736 px (la largeur de l'accueil, règle plus bas). Le plancher de 30 px agit sous 357 px : sans lui, le titre passerait sous le titre de section (29,6 px) dès 353 px ; l'accueil prend alors 4 lignes à 320 px (mesuré), la hiérarchie prime (verdict #9). Mesures : docs/enquetes/enquete-mm-titres-de-page-au-telephone-cycle-153.md. */ h1 { font: 300 max(1.875rem, min(8.4vw, clamp(2.75rem, 1.8rem + 3.6vw, 4.2rem)))/1.08 var(--mm-serif); letter-spacing: .01em; color: var(--mm-ink); margin: 0; } /* 2,8 rem (44,8 px) etait une taille d'ANNONCE : juste quand le titre paraît trois fois sur l'accueil, trop lourde quand il revient treize fois sur une page de soin. Ramene a 2,25 rem (36 px) -- la hierarchie tient toujours face au h3 a 1,4 rem, et la page cesse de crier a chaque section. */ h2 { font: 300 clamp(1.85rem, 1.45rem + 1.4vw, 2.25rem)/1.18 var(--mm-serif-titre); letter-spacing: .01em; color: var(--mm-ink); margin: 0; } /* LE TROISIEME NIVEAU REVIENT AU SERIF. Il basculait en sans, et la rupture passait inapercue sur l'accueil -- ou les h3 sont des noms de soin isoles dans des cartes -- mais devenait un defaut de finition sur une page longue, ou une question de FAQ (18 px serif) et un titre de carte (25,6 px sans) occupent le MEME rang avec deux polices et deux tailles. Mesure du 24/08/2026, page de soin. Les trois niveaux partagent desormais une famille et une progression reguliere ; seul le sur-titre reste en sans, parce qu'il n'est pas un titre mais une etiquette. */ /* LE TITRE D'UNE CARTE EST UN h3 DE STYLE, QUEL QUE SOIT SON NIVEAU (15/09/2026). Quand une grille suit directement le titre de page (hub « Nos soins »), `normaliser_titres` promeut le premier titre de carte en h2 pour ne pas sauter de niveau -- juste pour la structure. Stylé comme un titre de section, il sortait en grand et souligné au milieu de ses voisines (relevé par Monsieur). Le niveau sert le document, l'apparence suit la carte. */ h3, .mm-carte__corps h2 { --mm-compense: 0; /* police ou graisse non mesurée : aucun décalage deviné (run 442) */ font: 500 clamp(1.25rem, 1.15rem + .35vw, 1.4rem)/1.3 var(--mm-serif-titre); color: var(--mm-ink); margin: 0; letter-spacing: normal; text-transform: none; } h4 { font: 600 1.15rem/1.3 var(--mm-sans); color: var(--mm-ink); margin: 0; } p { margin: 0 0 var(--mm-2); max-width: var(--mm-mesure); } a { color: inherit; } .mm-surtitre { display: block; font: 600 .8125rem/1.2 var(--mm-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mm-muted); margin: 0 0 var(--mm-2); } .mm-chapeau { color: var(--mm-muted); margin: var(--mm-2) 0 0; } /* Un titre de section porte sa respiration dans le CHAPEAU qui le suit ; quand le texte vient sans chapeau -- le bloc Lagree -- il se collait au titre, `h2` n'ayant aucune marge basse. La regle vaut pour le paragraphe comme pour le chapeau : c'est ce qui suit un titre qui prend l'air. */ h2 + p { margin-top: var(--mm-2); } .mm-mention { font-size: .875rem; color: var(--mm-muted); } /* Une mention posee sous une action se COLLAIT a elle (24/08/2026, bloc Lagree) : `.mm-actions` ne porte de marge qu'en haut, et un paragraphe n'en porte qu'en bas -- entre les deux, rien. Le defaut avait deja ete rencontre dans le bloc d'appel, et repare LA-BAS seulement ; il attendait partout ailleurs. Le 11/09/2026 il attendait sous le ruban d'images (Monsieur : « respecte les espaces sous les blocs, c'est un point qui revient souvent »). La regle cesse donc de nommer un voisin : une mention qui n'ouvre pas son conteneur porte TOUJOURS son espace, quel que soit le bloc au-dessus d'elle. */ .mm-mention:not(:first-child) { margin-top: var(--mm-3); } /* ------------------------------------------------------------------------- Rythme -- une section, une respiration, partagee avec sa voisine ------------------------------------------------------------------------- */ .mm-section { padding-block: calc(var(--mm-respiration) / 2); padding-inline: clamp(1.25rem, 6vw, 7rem); } .mm-section--douce { background: var(--mm-surface); --mm-fond-section: var(--mm-surface); --mm-fond-element: var(--mm-clair); } .mm-section:first-child { padding-top: var(--mm-respiration); } /* `:last-of-type`, pas `:last-child` (chasse du run 711) : la ligne d'auteur en bande, un `

`, suit désormais la dernière section d'une page sans appel (rendez-vous) ; `:last-child` lui ôtait alors sa respiration basse. Sur toute autre page, l'appel (une `section` sans `.mm-section`) reste le dernier de son type, comme il restait le dernier enfant : rendu inchangé, mesuré sur 80 pages. */ .mm-section:last-of-type { padding-bottom: var(--mm-respiration); } /* L'EN-TETE D'UNE PAGE EST SYMETRIQUE (Monsieur, 14/09/2026 : « un ecart plus important au-dessus qu'en dessous »). La premiere section prenait une respiration pleine en haut et la DEMI-respiration du rythme en bas -- mesure : 115 px / 58 px a 1440, 64 / 32 a 390, sur les sept en-tetes de pages interieures. Une section d'en-tete ne partage pas son bas avec sa voisine comme le fait une section de corps : elle se clot. */ .mm-section:first-child { padding-bottom: var(--mm-respiration); } /* Le dernier element de l'en-tete ne rajoute pas sa marge de paragraphe a la respiration (mesure : 131 px sous la mention des tarifs contre 115 au-dessus). */ .mm-section:first-child > .mm-large > :last-child, .mm-section:first-child > .mm-etroit > :last-child, .mm-section:first-child .mm-entete > :last-child { margin-bottom: 0; } @media (min-width: 52rem) { /* Son portrait (page de soin) traverse la section de bord a bord : il touchait le bas mais laissait 103 px vides en haut, et le texte colle en haut laissait 240 px vides dessous. */ .mm-section:first-child .mm-duo--portrait > .mm-duo__part--photo { margin-block: calc(-1 * var(--mm-respiration)); /* Sans plafond : a 34 rem, la photo de Vital Dome s'arretait 28 px avant le bas d'un en-tete plus haut qu'elle et laissait une bande creme dessous (14/09/2026). */ max-height: none; } .mm-section:first-child .mm-duo--portrait > .mm-duo__part:not(.mm-duo__part--photo) { align-self: center; } /* UNE MEME HAUTEUR D'EN-TETE SUR TOUTES LES PAGES DE SOIN (Monsieur, 14/09/2026 : « plus harmonieux »). Mesure : 471 a 572 px a 1440, jusqu'a 731 px a 1920 -- deux causes, la longueur du texte ET le format de la photo, dont la hauteur intrinseque etirait la ligne de grille. La ligne prend une hauteur commune (38 rem de section, respiration comprise, au-dessus du plus long texte mesure), et l'image se pose EN ABSOLU dans son cadre : elle remplit, elle ne pousse plus. */ .mm-section:first-child .mm-duo--portrait { min-height: calc(38rem - 2 * var(--mm-respiration)); } .mm-section:first-child .mm-duo--portrait > .mm-duo__part--photo { position: relative; min-height: 0; } .mm-section:first-child .mm-duo--portrait > .mm-duo__part--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; } } .mm-large { max-width: var(--mm-large); margin-inline: auto; } .mm-etroit { max-width: var(--mm-mesure); margin-inline: auto; } .mm-section > * > .mm-surtitre + h2 { margin-top: 0; } /* L'ESPACE SOUS UN TITRE DE SECTION -- REGLE GENERALE, JAMAIS BLOC PAR BLOC. Quatre regles vivaient ici jusqu'au 11/09/2026 : `h2 + .mm-grille`, `h2 + .mm-etapes`, `h2 + .mm-portes`, `.mm-chapeau + .mm-grille`, toutes a `--mm-8`. Elles etaient MORTES, et depuis longtemps : `entete_de_section()` enveloppe le sur-titre, le titre et le chapeau dans `.mm-entete` -- enveloppe ajoutee plus tard, pour les sections en colonnes -- si bien que le `h2` avait cesse d'etre le FRERE du bloc. Un selecteur d'adjacence ne mord plus quand on deplace l'une des deux parties ; rien ne l'a signale, et la respiration a disparu sans bruit. Mesure du 11/09 : 9 frontieres sur 17 a zero. Monsieur l'a signale TROIS fois (24/08 sous le bloc d'actions, 11/09 a 00h10 sous le ruban d'images, 11/09 a 18h23 sous le titre des centres) ; les deux premieres corrections nommaient un VOISIN PARTICULIER, donc n'ont repare qu'un cas chacune. La regle ne nomme donc plus aucun bloc : elle nomme un ROLE. Ce qui suit un en-tete est soit du TEXTE SUIVI -- il appartient encore au bloc de titre, palier serre -- soit un OBJET POSE, quel qu'il soit, present ou a venir : palier large. Un bloc neuf n'a rien a declarer pour respirer. Les paliers viennent de l'echelle (UX-E1) et de la progression par role (UX-V6, `design/regles-ux-web.md`) ; le regime mobile vaut 60-70 % du desktop (enquete espacement inter-sections, cycle 144, confiance 85 %). La specificite `.mm-section .mm-entete` (0,2,0) est deliberee : elle passe DEVANT la marge haute que certains blocs portaient en propre, sans qu'il faille les retirer un par un -- et sans cumul, une marge n'etant jamais additionnee a elle-meme. Garde mecanique : `controle_espacement_mm.py` (epreuve INS-03 #533). */ /* LE ROLE SE LIT SUR L'ELEMENT, ET LA LISTE DU TEXTE SUIVI EST ICI, UNE FOIS. `+ p` tout court ne convient pas : un `p` peut porter un OBJET -- `.mm-actions` tient un bouton, `.mm-signature-recit` une signature -- et recevrait alors l'espace serre d'un paragraphe de lecture. Le texte suivi, c'est un paragraphe NU, un chapeau ou une mention, et rien d'autre. Cette liste est la source que `controle_espacement_mm.py` RELEVE dans la feuille au lieu de la recopier : une valeur ou un role qui change ici change le contrôle du meme coup. */ .mm-section .mm-entete + * { margin-top: var(--mm-6); } .mm-section .mm-entete + p:not([class]), .mm-section .mm-entete + p.mm-chapeau, .mm-section .mm-entete + p.mm-mention { margin-top: var(--mm-3); } @media (max-width: 45.999rem) { .mm-section .mm-entete + * { margin-top: var(--mm-4); } .mm-section .mm-entete + p:not([class]), .mm-section .mm-entete + p.mm-chapeau, .mm-section .mm-entete + p.mm-mention { margin-top: var(--mm-2); } } /* LE RECIT D'UN TEXTE DECLARE (18/09/2026, page de soin locale). Monsieur a relevé « des petites coquilles d'espaces entre les éléments et des titres » ; mesure au servi à 1346 px : intertitre -> zones 0 px, paragraphe -> intertitre 16 px, paragraphe -> cartes et cartes -> paragraphe 16 px, là où la règle sous un en-tête donne 24 px au texte et 48 px à un objet. Même principe qu'elle : un ROLE, jamais un voisin nommé. Un objet posé (tout ce qui n'est ni paragraphe nu, ni liste nue, ni intertitre) respire au grand palier avant et après lui ; un intertitre ouvre un nouveau bloc (grand palier au-dessus) et tient son contenu (palier serré dessous). `:where()` ramène chaque sélecteur à la spécificité de ses deux classes (0,2,0) : il en faut deux, parce que `.entry-content ul` (0,1,1) remet à zéro la marge haute de toute liste -- l'intertitre restait collé à ses zones (mesure du 18/09, 0 px). À spécificité égale avec la règle sous un en-tête, les valeurs coïncident (grand palier pour un objet, rien pour un paragraphe) ; l'ordre ci-dessous départage le reste -- la dernière ligne, celle de l'intertitre, l'emporte. */ .mm-section.mm-section--recit :where(.mm-large, .mm-etroit, .mm-duo__part, .mm-precautions__texte) > :where(*) + :where(:not(p:not([class]), ul:not([class]), h3)), .mm-section.mm-section--recit :where(.mm-large, .mm-etroit, .mm-duo__part, .mm-precautions__texte) > :where(:not(p:not([class]), ul:not([class]), h3, .mm-entete)) + :where(*), .mm-section.mm-section--recit :where(.mm-large, .mm-etroit, .mm-duo__part, .mm-precautions__texte) > :where(*) + :where(h3) { margin-top: var(--mm-6); } .mm-section.mm-section--recit :where(.mm-large, .mm-etroit, .mm-duo__part, .mm-precautions__texte) > :where(h3) + :where(*) { margin-top: var(--mm-3); } @media (max-width: 45.999rem) { .mm-section.mm-section--recit :where(.mm-large, .mm-etroit, .mm-duo__part, .mm-precautions__texte) > :where(*) + :where(:not(p:not([class]), ul:not([class]), h3)), .mm-section.mm-section--recit :where(.mm-large, .mm-etroit, .mm-duo__part, .mm-precautions__texte) > :where(:not(p:not([class]), ul:not([class]), h3, .mm-entete)) + :where(*), .mm-section.mm-section--recit :where(.mm-large, .mm-etroit, .mm-duo__part, .mm-precautions__texte) > :where(*) + :where(h3) { margin-top: var(--mm-4); } .mm-section.mm-section--recit :where(.mm-large, .mm-etroit, .mm-duo__part, .mm-precautions__texte) > :where(h3) + :where(*) { margin-top: var(--mm-2); } } /* ------------------------------------------------------------------------- Hero -- « une phrase de 20 mots maximum, un bouton » (6) ------------------------------------------------------------------------- */ .mm-hero { position: relative; isolation: isolate; padding-block: clamp(5rem, 10vw, 8.5rem); padding-inline: clamp(1.25rem, 6vw, 7rem); /* Le texte du hero part du BORD DU CONTENU des sections qui suivent (Monsieur, 15/09/2026 : « la ou commence le contenu sous le hero »). Une section centre `.mm-large` (80 rem) dans sa marge : son bord vaut max(marge, (largeur - 80 rem) / 2). Le hero ne portait que la marge -- mesure sur la page servie : bords confondus jusqu'a 1440 px, puis 91 contre 116 px a 1512, 112 contre 320 a 1920, 112 contre 640 a 2560. `100%` (et non `100vw`) : la largeur du hero, barre de defilement exclue. */ padding-inline-start: max(clamp(1.25rem, 6vw, 7rem), (100% - var(--mm-large)) / 2); /* Le cadrage reste centre. Un decalage a 78 % a ete essaye le 24/08/2026 pour sortir de la colonne de texte le logo Maison Minceur grave au milieu de la photographie : mesure sur capture, il ne l'en sortait pas -- le titre couvre 62 % de la largeur, et le logo tombe dedans quel que soit le cadrage. Il a donc ete retire : une correction qui ne corrige pas laisse croire que le defaut est traite. La collision reste ouverte, et se resoudra par l'image ou par la composition du hero, pas par un reglage de fond. */ background: var(--mm-surface) center / cover no-repeat; color: var(--mm-surface); } /* Le fond ANIME se pose SOUS le voile et SUR l'image, qui reste dessous en repli. Il n'est servi qu'a partir de 52 rem : sur telephone, une video de fond coute des donnees pour un cadrage que personne ne voit. Cette regle ne suffit PAS a epargner le telechargement -- une balise video se charge meme masquee par le CSS -- et c'est le pilote qui ne pose la source qu'au-dela du seuil. */ .mm-hero__fond { display: none; } @media (min-width: 52rem) { .mm-hero__fond { display: block; position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; /* Le fond reste invisible JUSQU'A CE QUE LA LECTURE COMMENCE -- l'evenement `playing`, pas l'expiration d'un delai, qui ne serait qu'une devinette : quatre secondes ont ete essayees le 24/08/2026 et ne suffisaient pas partout. Le pilote pose la classe. */ opacity: 0; transition: opacity .9s ease; } .mm-hero__fond--lu { opacity: 1; } /* Une balise video SAIT se recadrer, contrairement a une iframe : `cover` remplace l'agrandissement au-dela de la fenetre (100vw / 56.25vw) qu'exigeait l'ancien lecteur YouTube. */ .mm-hero__fond video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .mm-hero__fond { display: none; } } .mm-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; /* Opacites MESUREES : il faut 65 % de brun profond pour tenir 4,5:1 sur une photo blanche. Plancher a 75 % sur la zone de texte (6,26:1). */ background: linear-gradient(100deg, color-mix(in srgb, var(--mm-ink) 92%, transparent) 0%, color-mix(in srgb, var(--mm-ink) 85%, transparent) 40%, color-mix(in srgb, var(--mm-ink) 75%, transparent) 62%, color-mix(in srgb, var(--mm-ink) 50%, transparent) 100%); } @media (max-width: 45.999rem) { .mm-hero::before { background: color-mix(in srgb, var(--mm-ink) 82%, transparent); } } .mm-hero__inner { max-width: min(62%, 46rem); } @media (max-width: 45.999rem) { .mm-hero__inner { max-width: 100%; } } .mm-hero h1 { color: var(--mm-clair); max-width: 18ch; margin-bottom: var(--mm-3); } /* Au téléphone, le titre de l'accueil prend toute la largeur (run 659) : la largeur en `ch` suit la police, et 18 ch gardés laissaient 4 lignes de 320 à 402 px à la taille du téléphone. De 600 à 735 px, la largeur levée fait aussi passer l'accueil de 4 à 3 lignes. Les centres gardent leurs 22 ch (règle suivante). */ @media (max-width: 45.999rem) { .mm-hero:not(.mm-hero--page) h1 { max-width: none; } } /* Le titre d'un hero de PAGE (centres) : trois lignes au plus, a toute largeur (Monsieur, 14/09/2026). A la taille d'annonce de l'accueil (67 px, 18 ch), « Transformez votre silhouette a Levallois-Perret » prenait 4 lignes a 390 px. Mesure sur les quatre titres de centre : 48 px et 22 ch tiennent 3 lignes de 390 a 1440 px. La largeur en `ch` suit la taille : reduire la police sans elargir la mesure ne changerait pas le nombre de lignes. */ .mm-hero--page h1 { font: 300 clamp(2rem, 1.5rem + 2vw, 3rem)/1.12 var(--mm-serif); max-width: 22ch; } .mm-hero p { color: var(--mm-surface); max-width: 42ch; font-size: 1.1875rem; } .mm-hero .mm-surtitre { color: var(--mm-surface); opacity: .85; } /* LE FIL D'ARIANE SUR UNE PHOTOGRAPHIE (pages de centre, 08/09/2026). Sans cette regle il gardait le gris de texte de `.mm-ariane p` -- pose sur une image sombre, il s'y perdait. Un etat qu'un composant ne declare pas revient au theme, et le theme ne sait rien de la photo qui est dessous. Le lien survole passe au clair et non a l'orange d'action : sur un fond photographique, l'orange n'a plus le contraste qu'il a sur le creme. */ .mm-hero .mm-ariane p { color: var(--mm-surface); opacity: .85; } .mm-hero .mm-ariane a:hover, .mm-hero .mm-ariane a:focus-visible { color: var(--mm-clair); } /* ------------------------------------------------------------------------- Action -- la seule chose orange de la page (4.2) ------------------------------------------------------------------------- */ .mm-actions { margin: var(--mm-4) 0 0; } .mm-bouton { display: inline-block; background: var(--mm-action); color: var(--mm-ink); font: 600 .9375rem/1 var(--mm-sans); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding: 1rem 2rem; border: 0; border-radius: var(--mm-rayon); transition: background 160ms ease; } .mm-bouton:hover, .mm-bouton:focus-visible { background: var(--mm-action-fort); } /* Un bouton SOBRE : meme forme, meme poids, sans l'orange. La charte n'accorde qu'un seul bouton orange par ecran, et c'est celui qui convertit -- les deux autres gestes du trio meritent la meme forme, pas la meme couleur. */ .mm-bouton--sobre { background: transparent; color: var(--mm-ink); box-shadow: inset 0 0 0 1px var(--mm-ink); } .mm-bouton--sobre:hover, .mm-bouton--sobre:focus-visible { background: var(--mm-ink); color: var(--mm-ground); } /* Deux ou trois boutons cote a cote : meme regle. Le duo sert l'en-tete d'une page de soin (rendez-vous + tarifs), le trio l'appel final de l'accueil. */ .mm-actions--trio, .mm-actions--duo { display: flex; flex-wrap: wrap; gap: var(--mm-2); max-width: none; } .mm-appel .mm-actions--trio { justify-content: center; } /* Sur le brun profond de l'appel, le bouton sobre s'inverse : filet creme. */ .mm-appel .mm-bouton--sobre { color: var(--mm-surface); box-shadow: inset 0 0 0 1px var(--mm-clair-20); } .mm-appel .mm-bouton--sobre:hover, .mm-appel .mm-bouton--sobre:focus-visible { background: var(--mm-surface); color: var(--mm-ink); } .mm-lien { display: inline-block; font: 600 .8125rem/1 var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--mm-ink); border-bottom: 1px solid var(--mm-action); padding-bottom: 3px; } .mm-lien:hover, .mm-lien:focus-visible { color: var(--mm-action-fort); } /* ------------------------------------------------------------------------- Cartes -- « fond blanc chaud, filet, sans rayon, image 4:3, lien discret, PAS de bouton orange par carte » (6) ------------------------------------------------------------------------- */ /* La derniere rangee se cale A GAUCHE, avec les autres (arbitrage de Monsieur, 24/08/2026 : « je prefere que ce soit aligne sur la gauche, c'est plus logique »). Une carte orpheline y poursuit la lecture au lieu de sauter au milieu ; les emplacements vides tombent a droite, la ou la rangee se serait terminee. Elle avait ete centree quelques heures plus tot, sur mon seul jugement : sept soins dans trois colonnes laissent deux cases vides, et cinq centres une. Le flux reste flexible -- une grille CSS pose ses colonnes avant de savoir combien d'elements arrivent, et ne saurait donc pas traiter une rangee incomplete autrement que les autres. Les rangees pleines restent bord a bord : la base d'un element vaut exactement sa part de la largeur, gouttieres deduites, moins un centieme de pixel pour absorber les arrondis du navigateur -- sans quoi une rangee pleine retombe a un element de moins. */ .mm-grille { display: flex; flex-wrap: wrap; gap: var(--mm-3); justify-content: flex-start; } .mm-grille > * { flex: 0 1 100%; } @media (min-width: 34rem) { .mm-grille--reguliere > * { flex-basis: calc((100% - var(--mm-3)) / 2 - .01px); } } @media (min-width: 62rem) { .mm-grille--3.mm-grille--reguliere > * { flex-basis: calc((100% - 2 * var(--mm-3)) / 3 - .01px); } .mm-grille--2.mm-grille--reguliere > * { flex-basis: calc((100% - var(--mm-3)) / 2 - .01px); } } .mm-carte { background: var(--mm-fond-element); border: 1px solid var(--mm-rule); border-radius: 0; /* Pas de `height: 100%` : dans un flux flexible, une hauteur explicite se resout contre un conteneur de hauteur automatique, donc elle ne vaut rien -- et elle ANNULE l'etirement qui alignait les cartes d'une meme rangee. Mesure du 24/08 : la premiere rangee de soins rendait trois cartes de trois hauteurs. L'etirement par defaut suffit, et il aligne. */ display: flex; flex-direction: column; min-width: 0; } .mm-carte__visuel { display: block; aspect-ratio: 4 / 3; overflow: hidden; /* Un cadre DANS un élément prend le fond de la section : il se distingue de la carte qui le porte, et la carte le sépare de la section (15/09/2026). */ background: var(--mm-fond-section); } .mm-carte__visuel--16-9 { aspect-ratio: 16 / 9; } /* EMPLACEMENT RESERVE -- une carte dont l'image n'est pas encore fournie. Decide par Monsieur le 01/09/2026 pour que la grille reste reguliere en attendant le visuel reel. Il tient l'espace exact qu'occupera la photographie, et se lit comme une attente, jamais comme un decor : un aplat au ton de la maison, un filet interieur, aucune icone et aucun texte. Ne JAMAIS y mettre une image d'illustration -- ce serait dire quelque chose de faux sur un lieu. */ .mm-carte__visuel--vide { background: var(--mm-ground); box-shadow: inset 0 0 0 1px var(--mm-rule-soft); } /* La signature d'un texte a la premiere personne, quand aucune photographie ne porte deja le nom de qui parle (pages de confirmation). Le recit de la page a propos ne la porte plus depuis le 09/10/2026 : sa carte portrait dit le nom et le role. Meme registre que les sur-titres : petites capitales espacees, ton eteint, mais sans majuscules forcees : c'est un NOM, pas une etiquette de section. */ .mm-signature-recit { margin-top: var(--mm-3); color: var(--mm-muted); font-size: .875rem; letter-spacing: .04em; } /* La liste des lieux : une ville par ligne, son adresse dessous en ton eteint. Pas de puce -- la ville en porte deja le poids -- mais un filet gauche qui tient la colonne, comme les autres listes de la maison. */ /* Alignee sur la colonne de lecture, comme les paragraphes qui l'encadrent : sans cette mesure la liste partait plus a gauche qu'eux, et la section paraissait decousue (mesure du 01/09/2026). */ .mm-lieux { list-style: none; padding: 0; margin: var(--mm-3) auto 0; max-width: var(--mm-mesure); } .mm-lieux > li { padding: var(--mm-2) 0 var(--mm-2) var(--mm-3); border-left: 1px solid var(--mm-rule-soft); } .mm-lieux > li + li { margin-top: var(--mm-1); } .mm-lieux a { color: var(--mm-ink); text-decoration: none; font-weight: 600; } .mm-lieux a:hover, .mm-lieux a:focus-visible { color: var(--mm-action-fort); text-decoration: underline; text-underline-offset: .25em; } .mm-lieux__adresse { display: block; margin-top: .15rem; color: var(--mm-muted); font-size: .9375rem; } /* LA LISTE SEULE DANS SA SECTION se répartit sur la largeur (page de soin, 14/09/2026) : empilée à 68 ch, elle aurait rouvert la moitié droite vide que les cartes à photo comblaient. */ @media (min-width: 40rem) { .mm-lieux--grille { max-width: none; margin-inline: 0; display: grid; gap: var(--mm-2) var(--mm-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .mm-lieux--grille > li + li { margin-top: 0; } } .mm-carte__visuel img, .mm-carte__visuel iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; } .mm-carte__corps { padding: var(--mm-4); display: flex; flex-direction: column; gap: var(--mm-1); flex: 1; } /* La categorie et la date, au-dessus du titre. Meme registre que les sur-titres de section -- petites capitales espacees, ton eteint -- mais plus petit : c'est un reperage, pas une annonce. La puce separatrice prend un blanc fin de chaque cote pour ne pas coller aux mots. */ .mm-carte__meta { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-muted); margin: 0 0 var(--mm-1); } /* La categorie mene a son archive. Elle garde le ton eteint de la ligne de reperage -- un lien qui crie a cette place volerait l'attention au titre -- et ne se signale qu'au survol et au clavier. */ .mm-carte__meta a { color: inherit; text-decoration: none; } .mm-carte__meta a:hover, .mm-carte__meta a:focus-visible { color: var(--mm-action-fort); text-decoration: underline; text-underline-offset: .25em; } /* La ligne de reperage REPREND sa taille : `.mm-carte__corps p` (0,1,1) l'emportait sur `.mm-carte__meta` (0,1,0) et la servait a 15 px au lieu de 12 (mesure du 14/09/2026). 13 px, choisie par Monsieur le meme jour sur planche. */ .mm-carte__corps p.mm-carte__meta { font-size: .8125rem; letter-spacing: .1em; } /* Le titre d'un ARTICLE se lit en sans-serif demi-gras (Monsieur, 14/09/2026, variante A sur planche : « reste coherent avec les autres elements du site »). Un titre d'article court jusqu'a 90 signes : en Cormorant 500 a 22 px, il se lisait mal. Exception assumee a la famille unique des h3 (24/08/2026) : elle vaut pour les titres de SECTION, pas pour une liste de lectures. Toutes les cartes d'articles -- journal de l'accueil et « A lire aussi » des soins -- portent `.mm-carte--article`. */ .mm-carte--article .mm-carte__corps :is(h2, h3) { --mm-compense: 0; /* police ou graisse non mesurée : aucun décalage deviné (run 442) */ font: 600 1.1875rem/1.35 var(--mm-sans); letter-spacing: 0; } .mm-carte__corps :is(h2, h3) a { color: inherit; text-decoration: none; } .mm-carte__corps :is(h2, h3) a:hover, .mm-carte__corps :is(h2, h3) a:focus-visible { color: var(--mm-action-fort); } .mm-carte__corps p { color: var(--mm-muted); font-size: .9375rem; margin: 0; } .mm-carte__corps .mm-lien { margin-top: auto; padding-top: var(--mm-3); align-self: flex-start; } /* ------------------------------------------------------------------------- Etapes -- « comment cela se passe », le bloc de clarte ------------------------------------------------------------------------- */ .mm-etapes { display: grid; gap: var(--mm-6); grid-template-columns: 1fr; } @media (min-width: 46rem) { .mm-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mm-etape { border-top: 1px solid var(--mm-rule); padding-top: var(--mm-3); } .mm-etape__rang { display: block; font: 300 2.5rem/1 var(--mm-serif); color: var(--mm-action); margin-bottom: var(--mm-2); } .mm-etape h3 { margin-bottom: var(--mm-1); } .mm-etape p { margin: 0; } /* ------------------------------------------------------------------------- Portes -- les chemins restants, nommes, aucun cache ------------------------------------------------------------------------- */ /* Ces portes se dessinaient en cellules a filets partages -- une gouttiere d'un pixel sur un fond de filet, cadre d'une bordure exterieure. L'oeil y lisait un tableau, la ou la charte reserve les filets VERTICAUX aux tableaux et n'en veut nulle part ailleurs (24/08/2026). Chaque porte reprend donc la forme deja employee par les etapes : un filet au-dessus, et de l'air autour. */ .mm-portes { display: grid; gap: var(--mm-6) var(--mm-4); grid-template-columns: 1fr; } @media (min-width: 40rem) { .mm-portes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .mm-portes { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .mm-porte { display: block; padding-top: var(--mm-3); border-top: 1px solid var(--mm-rule); text-decoration: none; transition: border-color 160ms ease; } .mm-porte:hover, .mm-porte:focus-visible { border-top-color: var(--mm-action); } .mm-porte__titre { display: block; font: 600 1.0625rem/1.3 var(--mm-sans); color: var(--mm-ink); margin-bottom: var(--mm-1); } .mm-porte__texte { display: block; font-size: .9375rem; color: var(--mm-muted); } /* ------------------------------------------------------------------------- Duo -- deux parts de largeur egale ------------------------------------------------------------------------- */ .mm-duo { display: grid; gap: var(--mm-6); grid-template-columns: 1fr; } @media (min-width: 52rem) { /* Centrees, les deux parts laissaient un vide au-dessus ET au-dessous du texte, plus court que l'image : le bloc Lagree paraissait bancal. Etirees, elles font la meme hauteur et le texte commence ou l'image commence. */ .mm-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } } .mm-duo__part > :first-child { margin-top: 0; } .mm-duo__part > img { width: 100%; height: 100%; max-height: 26rem; object-fit: cover; } /* Un PORTRAIT ne se recadre pas comme un paysage : le duo ordinaire coupe a 26 rem en `cover`, ce qui rognerait un visage. Ici l'image garde ses proportions, et c'est la colonne de texte qui se centre en face d'elle. */ /* Portrait BORD A BORD (arbitrage de Monsieur, 24/08/2026, sur planche rendue) : la photographie prend toute la hauteur du bloc, sans cadre, sans aplat et sans legende. Le texte occupe sa moitie, elle occupe la sienne -- c'est le seul des trois traitements essayes qui n'ajoute rien autour d'elle. */ .mm-duo--portrait { align-items: stretch; } /* DEUX TIERS pour le texte, un tiers pour la photographie (arbitrage final de Monsieur, 24/08/2026 -- la moitie a ete essayee entre-temps). */ @media (min-width: 52rem) { .mm-duo--portrait { grid-template-columns: 2fr 1fr; } /* Variante a visuel gauche. Les colonnes s'echangent, et l'ORDRE D'AFFICHAGE avec elles -- jamais l'ordre du HTML, qui reste texte puis image : c'est lui que suit le telephone quand la grille retombe en une colonne, et qu'ecoute un lecteur d'ecran. */ .mm-duo--visuel-gauche { grid-template-columns: 1fr 2fr; } .mm-duo--visuel-gauche > .mm-duo__part { order: 2; } /* Le debordement bord a bord CHANGE DE COTE avec la photographie. Laisse a droite, il la poussait SUR le texte : mesure sur capture, le sur-titre « A PROPOS » et le titre commencaient par-dessus l'image. Un debordement n'est pas une decoration, il vise un bord precis de la fenetre -- inverser les colonnes sans l'inverser produit un chevauchement, pas un miroir. */ .mm-duo--visuel-gauche > .mm-duo__part--photo { order: 1; margin-right: 0; margin-left: calc(-1 * var(--mm-retrait-conteneur)); } } /* DUO A VIDEO (21/09/2026) -- « j'aimerais qu'on ajoute une video a droite de ce bloc afin que ce soit 2 colonnes » (Monsieur, page Monaco). C'est une VARIANTE, pas le duo portrait : une photographie verticale remplit la hauteur du bloc et deborde jusqu'au bord de la fenetre, une video est un rectangle 16/9 qui ne deborde de rien. Elle a donc sa propre part -- `--video` et non `--photo` -- qui n'herite d'aucun debordement ni d'aucune hauteur plancher. Les colonnes sont EGALES, et c'est un ecart assume au deux-tiers/un-tiers arbitre le 24/08/2026 pour les photographies : dans un tiers de conteneur, un 16/9 tombe sous 340 px de large. L'arbitrage portait sur un visuel qui gagne en hauteur ; celui-ci gagne en largeur. A rejuger sur planche rendue. */ .mm-duo--video { align-items: start; } @media (min-width: 52rem) { .mm-duo--video { grid-template-columns: 1fr 1fr; } } /* La part video ne porte QUE la video : pas de `min-height`, qui creuserait un vide sous elle quand le texte d'en face est court, et pas de debordement lateral. */ .mm-duo__part--video { align-self: start; } /* Bornee : sans plafond, la photographie tirait le bloc a plus de neuf cents pixels et laissait un demi-ecran de vide sous le texte. Bord a bord ne veut pas dire sans limite. */ /* BORD A BORD veut dire jusqu'au bord de la FENETRE, pas jusqu'a la marge du conteneur (Monsieur, 24/08/2026, capture a l'appui : il restait un lisere creme a droite, et la photographie s'arretait avant le haut et le bas de la section). Deux debordements sont donc necessaires : `50% - 50vw` la porte au bord droit quelle que soit la largeur du conteneur -- y compris sur les ecrans ou celui-ci se centre -- et une marge verticale negative annule la respiration de la section, que la photographie doit traverser. */ .mm-duo__part--photo { align-self: stretch; min-height: 26rem; max-height: 34rem; /* Le debordement vaut EXACTEMENT le retrait lateral de la section. Un `50% - 50vw` a ete essaye : dans une colonne de grille, ce `50%` se rapporte a la colonne et non a la page -- la mesure suivante a rendu une page de 1769 px de large pour une fenetre de 1440, c'est-a-dire un defilement lateral. Retire aussitot. */ margin-right: calc(-1 * var(--mm-retrait-conteneur)); margin-block: calc(var(--mm-respiration) / -2); } /* LE RETRAIT REEL DU CONTENEUR, pas seulement la marge de la section (Monsieur, 14/09/2026 : une bande creme restait entre la photographie et le bord de l'ecran). Au-dela de 80 rem de contenu, `.mm-large` se CENTRE : son bord s'eloigne de la fenetre de (100vw - 80 rem) / 2, et le debordement, qui ne valait que la marge de section, s'arretait avant -- mesure : 0 px jusqu'a 1440, 99 px a 1680, 208 px a 1920, 528 px a 2560. `100vw` compte la barre de defilement : le surplus (quelques pixels) est rogne par `overflow-x: clip` sur la section qui porte le portrait, pour ne jamais ouvrir de defilement lateral. */ .mm-duo--portrait { --mm-retrait-conteneur: max(clamp(1.25rem, 6vw, 7rem), (100vw - var(--mm-large)) / 2); } .mm-section:has(.mm-duo--portrait) { overflow-x: clip; } @media (max-width: 51.999rem) { /* Sous le point de rupture du duo, les deux parts s'empilent : la photographie garde son debordement lateral, mais reprend sa place dans le flux vertical -- sinon elle mordrait sur le texte. */ .mm-duo__part--photo { margin-inline: calc(-1 * clamp(1.25rem, 6vw, 7rem)); margin-block: 0; max-height: 26rem; } } /* DANS LE CORPS DE PAGE, LA PHOTOGRAPHIE RESTE DANS SA COLONNE, ENCADRÉE (12/10/2026). Tout le contenu s'y tient dans le conteneur : une photographie qui déborde d'un seul côté déséquilibre la page. À toutes les largeurs, plus aucune marge négative, et le cadre des cartes portrait de la maison (fond d'élément, filet, marge intérieure). Le HÉROS -- la première section -- garde sa photographie bord à bord : les règles du débord ci-dessus RESTENT écrites, elles ne sont neutralisées que hors de la première section, par des sélecteurs plus précis. */ .mm-section:not(:first-child) .mm-duo__part--photo, .mm-section:not(:first-child) .mm-duo--visuel-gauche > .mm-duo__part--photo { margin: 0; padding: var(--mm-2); background: var(--mm-fond-element); border: 1px solid var(--mm-rule); } .mm-section:not(:first-child) .mm-duo__part--photo > img { border-radius: var(--mm-rayon); } /* AU TÉLÉPHONE, LA PHOTOGRAPHIE FERME LE HÉROS (12/10/2026). Empilée sous le texte, elle laissait dessous la respiration basse de la section, une bande de fond lue comme une erreur : elle descend jusqu'au bas de la section, et le corps de page commence juste après. Seulement quand le duo FERME la section : un élément posé après lui ne serait pas chevauché. */ @media (max-width: 51.999rem) { .mm-section:first-child > .mm-large > .mm-duo--portrait:last-child > .mm-duo__part--photo { margin-bottom: calc(-1 * var(--mm-respiration)); } } /* VARIANTE RECIT -- un texte LONG en face d'une photographie. Le duo portrait a ete calibre le 24/08/2026 sur des textes courts : un chapeau, deux boutons. Le recit de la fondatrice fait trois paragraphes et depasse largement la photographie. Du 01/09 au 10/09/2026, la photographie etait COLLANTE (`position: sticky`) et suivait la lecture : Monsieur l'a rejete (« je n'aime pas l'animation de l'image »), puis a rejete aussi le cadre de portrait propose en remplacement. La photographie est donc POSEE EN HAUT de sa colonne, nue, immobile, a son format plafonne ; le blanc sous elle quand le texte est plus long est un espace de mise en page ordinaire. `align-self: start` reste indispensable : une part etiree prendrait toute la hauteur du texte et le plafond n'aurait plus de sens. */ .mm-duo--recit > .mm-duo__part--photo { align-self: start; position: static; min-height: 0; max-height: none; margin-block: 0; } .mm-duo--recit > .mm-duo__part--photo > img { height: auto; max-height: 34rem; } .mm-duo__part--photo > img { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; /* Le recadrage part du HAUT, pas du centre : sur un portrait vertical, `cover` centre sur le milieu du cliche -- c'est-a-dire sur les epaules -- et coupe la tete (constate par Monsieur le 24/08/2026). Un visage se garde entier. Une image qui declare son point de visee le porte en `--mm-visee` (18/09/2026) : une donnee transportee, pas un style en ligne. Le defaut se DEFINIT ici (la garde des jetons refuse un jeton jamais defini) ; le style en ligne de l'image l'emporte sur cette regle, et c'est ce qui fait passer le point declare. */ --mm-visee: center 28%; object-position: var(--mm-visee); } /* CARTE PORTRAIT (09/10/2026) -- une personne en carte : photographie 4:5, nom et role dessous. Meme taille a toutes les largeurs : la photographie ne suit plus la fenetre (le duo bord a bord rendait un portrait vertical en bandeau au-dela de 1 440 px, le haut de la tete coupe). Langage des cartes de la maison : fond d'element, filet, angle de la charte. Remplace le cadre du 24/08, qu'aucune page n'employait plus. */ .mm-portrait { margin: 0; width: min(100%, var(--mm-carte-portrait)); padding: var(--mm-2); background: var(--mm-fond-element); border: 1px solid var(--mm-rule); text-align: center; --mm-compense: 0; /* centre : le trace des titres ne se decale pas */ } /* La visee par defaut est un reglage PROPRE a la carte, pas une copie de celle du duo : le recadrage 4:5 d'un portrait 2:3 retire un sixieme de la hauteur, dont 28 % au-dessus de la tete et le reste en bas du cliche -- le visage reste entier (constate sur la photographie de la page a propos, 09/10/2026). */ .mm-portrait__photo img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--mm-rayon); --mm-visee: center 28%; object-position: var(--mm-visee); } .mm-portrait figcaption { padding: var(--mm-2) var(--mm-1) var(--mm-1); } .mm-portrait__nom { display: block; font: 400 1.625rem/1.2 var(--mm-serif-titre); color: var(--mm-ink); } .mm-portrait__role { display: block; margin-top: .25rem; font-size: .9375rem; line-height: 1.4; color: var(--mm-muted); } /* UN RECIT ET SA CARTE PORTRAIT (choix du 09/10/2026). Trois parts soeurs dans l'ordre du HTML : en-tete, carte, texte. Sous 52 rem, elles s'empilent dans cet ordre, la carte centree sous le titre, avec le meme ecart avant et apres elle : la marge haute de la carte est celle de tout objet pose sous un titre (`.mm-section .mm-entete + *`, 32 px puis 48 px des 46 rem), et le texte reprend le meme palier. Au-dela, le texte a gauche a sa mesure de lecture et la carte a droite, en haut, l'ensemble centre ; la regle de grille, de meme specificite (0,2,0) et placee apres, annule cette marge, qui decalerait la carte sous le sur-titre. */ .mm-recit-portrait > .mm-portrait { margin-inline: auto; } .mm-recit-portrait > .mm-recit-portrait__texte { max-width: var(--mm-mesure); margin: var(--mm-6) auto 0; } .mm-recit-portrait__texte > :first-child { margin-top: 0; } @media (max-width: 45.999rem) { .mm-recit-portrait > .mm-recit-portrait__texte { margin-top: var(--mm-4); } } @media (max-width: 51.999rem) { .mm-recit-portrait > .mm-entete { text-align: center; --mm-compense: 0; /* centre : le trace des titres ne se decale pas */ } } @media (min-width: 52rem) { .mm-recit-portrait { display: grid; justify-content: center; column-gap: var(--mm-8); grid-template-columns: minmax(0, var(--mm-mesure)) var(--mm-carte-portrait); grid-template-rows: auto 1fr; grid-template-areas: "entete carte" "texte carte"; } .mm-recit-portrait > .mm-entete { grid-area: entete; } .mm-recit-portrait > .mm-portrait { grid-area: carte; align-self: start; margin: 0; } .mm-recit-portrait > .mm-recit-portrait__texte { grid-area: texte; max-width: none; margin: var(--mm-3) 0 0; } } /* Une video occupe la place d'une photographie, et garde son rapport : sans `aspect-ratio`, une iframe se rabat sur les 150 px de haut du navigateur. LE CADRE EST HABILLE (Monsieur, 24/08/2026 : « c'est laid pour l'instant »). Il etait un rectangle de brun profond a bords vifs, pose au milieu d'une page creme : le temps du chargement, la page portait un trou noir, et une fois chargee la video restait un bloc etranger. Trois gestes le rattachent au reste -- des coins arrondis comme les cartes, un filet de la meme famille que les autres cadres, et un fond d'ATTENTE creme au lieu du brun. Le fond ne se voit qu'une seconde ou deux ; c'est exactement pour cela qu'il doit etre de la couleur de la page et non de son contraire. L'ombre est large et tres douce : elle decolle la video du fond sans dessiner de bordure -- c'est ce qui distingue une video posee d'une video encadree. */ /* PAS DE `max-height` (14/09/2026). Plafonnée à 30 rem, la vidéo pleine largeur (1 267 px) rendait 480 px de haut au lieu de 713 : un format aplati, que Monsieur a relevé. Le rapport 16:9 se tient seul. */ .mm-video { aspect-ratio: 16 / 9; width: 100%; background: var(--mm-surface); overflow: hidden; border-radius: var(--mm-rayon); box-shadow: 0 1px 2px color-mix(in srgb, var(--mm-ink) 8%, transparent), 0 12px 28px -12px color-mix(in srgb, var(--mm-ink) 22%, transparent); } .mm-video iframe { width: 100%; height: 100%; border: 0; display: block; } /* ------------------------------------------------------------------------- En-tete -- « fond creme, filet bas d'un pixel, logo typographique a gauche, menu sans-serif espace a droite » (6) L'en-tete n'avait AUCUNE regle a lui : il portait le sans-serif du corps et la largeur par defaut de GeneratePress. D'ou trois ecarts, tous visibles a l'oeil : le nom de la maison en sans-serif gras quand le pied de page le porte en Cormorant SC ; un fond blanc la ou la charte veut le creme ; et une marge qui ne tombe pas sur celle du corps, le conteneur du theme ayant sa propre largeur. Le nom reprend donc EXACTEMENT la forme du logo du pied : une signature n'a pas deux voix. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- LE BANDEAU DE SERVICE -- au-dessus de l'en-tete (Monsieur, 07/09/2026) Rendu par `entete.php` sur le hook `generate_before_header`. Il porte trois choses et pas une de plus : un numero, une adresse, une langue. Il est FIN et SOMBRE -- l'encre de la charte, pas le creme de l'en-tete : deux bandes claires l'une sur l'autre ne se distinguent pas, et le site perdrait son assise haute. Petites capitales espacees, comme les sur-titres : c'est de la signaletique, pas de la lecture. ------------------------------------------------------------------------- */ .mm-bandeau { background: var(--mm-ink); color: var(--mm-clair); } .mm-bandeau__dedans { max-width: var(--mm-large); margin-inline: auto; padding: var(--mm-1) clamp(1.25rem, 6vw, 7rem); display: flex; align-items: center; justify-content: flex-end; gap: var(--mm-3); /* La meme gouttiere que l'en-tete : les trois bandes du haut (bandeau, nom, menu) tombent sur un seul bord, sinon l'oeil lit un decalage. */ } .mm-bandeau__lien { font: 500 .75rem/1.6 var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mm-clair); text-decoration: none; white-space: nowrap; } .mm-bandeau__lien:hover, .mm-bandeau__lien:focus-visible { color: var(--mm-clair); text-decoration: underline; text-underline-offset: 3px; } /* La langue se detache des deux coordonnees : elle ne s'appelle pas, elle se choisit. Un filet la separe, comme les reperes de `.mm-faits`. */ .mm-bandeau__langue { padding-left: var(--mm-3); border-left: 1px solid var(--mm-clair-20); display: inline-flex; align-items: center; gap: var(--mm-1); } /* TOUTES les langues sont montrees, pas seulement celle d'en face (Monsieur, 07/09/2026) : on ne choisit pas dans une liste qu'on ne voit pas. La courante est un ``, jamais un lien -- on ne va pas ou l'on est deja ; elle se distingue en PLEIN et les autres en retrait, sans changer de taille : un bandeau qui bouge quand on change de langue se lit comme une erreur. */ .mm-bandeau__langue-choix { padding: 0; opacity: .6; } .mm-bandeau__langue-choix:hover, .mm-bandeau__langue-choix:focus-visible { opacity: 1; } .mm-bandeau__langue-choix.is-courante { opacity: 1; font-weight: 600; text-decoration: none; cursor: default; } .mm-bandeau__separateur { opacity: .35; } /* TELEPHONE : trois informations ne tiennent pas sur 390 px. L'adresse s'efface -- c'est la moins urgente des trois en mobilite, et elle reste au pied de page. Le numero, lui, est justement ce qu'on cherche sur un telephone. */ @media (max-width: 768px) { .mm-bandeau__dedans { justify-content: center; gap: var(--mm-2); } .mm-bandeau__lien[href^="mailto:"] { display: none; } } .site-header { /* CREME, pas le fond de page (Monsieur, 24/08/2026). Les deux se ressemblent sur la palette -- #fffbfb contre #f7f1ed -- mais le premier se lit blanc a l'ecran, et la barre disparaissait dans la page. La charte demande « fond creme, filet bas » : c'est ce ton-la, celui des sections douces. */ background: var(--mm-surface); border-bottom: 1px solid var(--mm-rule); } .site-header .inside-header { max-width: var(--mm-large); padding-inline: clamp(1.25rem, 6vw, 7rem); } .main-title { margin: 0; } .main-title a { font: 300 1.5rem/1.2 var(--mm-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--mm-ink); text-decoration: none; } .main-title a:hover, .main-title a:focus-visible { color: var(--mm-action-fort); } /* La navigation portait son propre fond BLANC, qui dessinait un rectangle clair sur le creme de l'en-tete -- une boite la ou la charte ne veut qu'un filet. */ .main-navigation, .main-navigation .inside-navigation, .main-navigation .main-nav > ul { background: transparent; } .main-navigation .main-nav > ul > li > a { font: 500 .9375rem/1 var(--mm-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mm-ink); } .main-navigation .main-nav > ul > li > a:hover, .main-navigation .main-nav > ul > li[class*="current"] > a { color: var(--mm-action-fort); } /* Le menu passait a la ligne, et ce n'etait pas faute de place : mesure du 24/08/2026, sa liste occupait 544 px sur les ~950 libres, mais son `flex-wrap: wrap` la coupait quand meme. Deux symptomes, une seule cause -- « Blog » et « Rendez-vous » rejetes en seconde ligne, ET un vide de 34 px sous l'en-tete, ou tombait le drapeau de langue chasse hors de la barre. */ /* Mesure hors ligne du 24/08/2026 : les sept entrees totalisent 543 px pour 544 px disponibles -- elles TIENNENT. Ce qui les separait n'etait pas un manque de place mais un defaut d'alignement : leurs sommets tombaient a quatre hauteurs differentes (y = 53, 60, 62, 69), et la liste montait a 56 px pour des entrees de 31. Le drapeau de langue, chasse hors de la barre, creusait alors 34 px de vide sous l'en-tete. Une seule cause, deux symptomes. */ /* TOUT CE BLOC NE VAUT QU'AU-DESSUS DU POINT DE RUPTURE DU MENU MOBILE. Pose sans condition de largeur, il produisait le defaut mesure le 24/08/2026 a 390 px : le menu de bureau ET le bouton hamburger s'affichaient ensemble, et la barre horizontale poussait le document a 583 px pour une fenetre de 390 -- un defilement lateral sur toute la page, pas seulement un menu laid. La cause tient a la specificite qu'on avait du choisir : GeneratePress masque sa liste sous le seuil par une regle de CLASSE (`.main-navigation ul`), et notre `#site-navigation` la surclasse. L'identifiant reste necessaire -- le parent injecte 24 ko en ligne apres notre feuille -- mais il ne doit mordre que la ou le menu de bureau existe. Sa borne n'est pas un choix de cette feuille : c'est la NÉGATION exacte de la requête du menu hamburger, déclarée UNE fois dans le thème enfant (`MM_BORNE_MENU_PX`, servie à GeneratePress par son filtre) et LUE ici par `borne_menu_mm.py`. Jusqu'au 29/09/2026, elle était écrite à la main (769 px, complément du 768 par défaut de GeneratePress) pendant que le thème déclarait 1024 dans un réglage que personne ne lisait : une tablette de 820 px recevait le menu de bureau, qui débordait de la fenêtre (quête MM-LE-MENU-PASSE-EN-TIROIR-JUSQU-A-LA-TABLETTE). Négation et non « borne + 1 » : une largeur fractionnaire (1024,5 px sous zoom) ne tombait sous aucune des deux requêtes, ni hamburger ni bureau (chasse aux bugs du run 536). */ @media not all and (max-width: 1024px) { /* LE MENU DEBORDAIT PAR-DESSUS LE NOM DE LA MAISON (mesure du 07/09/2026, 1440 px). `#site-navigation` heritait de `flex-shrink: 1` : le conteneur flex de l'en-tete le comprimait a 577 px quand son contenu en reclamait 881, et comme la barre interdit tout repli (`flex-wrap: nowrap` ci-dessous, `white-space: nowrap` sur les liens), le trop-plein SORTAIT de la boite -- vers la gauche, puisqu'il est aligne a droite. L'onglet « Soins » commencait a x=359 quand le titre finissait a x=411 : 52 px de recouvrement. Les deux boites cessent donc de se laisser comprimer ; ce qui manque de place se traite en place, pas en debordement silencieux. */ /* MESURE DU 07/09/2026, deuxieme passe : `flex-shrink: 0` n'a rien change -- le nav rendait toujours 577 px pour 862 reclames, et il restait 286 px de VIDE entre la fin du nom (x=411) et son bord gauche (x=697). Le defaut n'etait pas une compression : c'est que le nav ne PRENAIT PAS la place libre de la ligne. Il la prend donc (`flex-grow: 1`), et le nom cesse de pouvoir etre comprime. L'en-tete offre 1107 px utiles, le nom en garde 245, le menu recoit les 862 restants -- de quoi tenir sans sortir de sa boite. */ #site-navigation { flex: 1 1 auto; } /* Le menu se range A DROITE de la ligne, pas contre le nom. Mesure du 07/09/2026, apres l'allegement des libelles : les sept onglets ne reclament plus que 717 px sur les 862 offerts, et `space-between` du theme laissait les 145 px de reste APRES eux -- le menu se collait au nom (1 px) et l'en-tete finissait sur un vide. La barre du menu se lit de droite a gauche depuis le bord de la page ; c'est ce bord qui la tient, pas le nom. */ #site-navigation .main-nav { margin-left: auto; } .site-header .site-branding { flex-shrink: 0; } /* LA RESPIRATION DES ONGLETS, rendue au cran de la charte (Monsieur, 08/09/2026 : « c'est beaucoup trop proche »). Elle avait ete ramenee au demi-cran le 07/09 pour faire tenir SEPT onglets aux libelles longs dans 863 px. Ce motif a disparu : la barre en compte six, « Prendre rendez-vous » est devenu « Rendez-vous », « Methode Lagree » est devenu « Lagree », et les centres sont descendus d'un cran. Mesure du 08/09 : le menu ne reclamait plus que 456 px sur les 862 offerts -- on payait un resserrement pour une place qu'on avait de reste. Un cran plein rend 32 px entre deux libelles, et le chevron centre y trouve ses 11 px de part et d'autre. */ #site-navigation .main-nav > ul > li > a { padding-inline: var(--mm-2); } /* Le selecteur porte l'IDENTIFIANT du theme, et ce n'est pas un caprice : le parent injecte 24 ko de style EN LIGNE dans la page, apres notre feuille. Une regle de classe s'y perd ; une regle d'identifiant tient. */ #site-navigation .main-nav > ul { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; } /* Chaque entree tient la MEME hauteur. Mesure du 24/08/2026 : elles rendaient 15, 33 et 48 px selon qu'elles portaient ou non un sous-menu, et l'oeil y lisait un menu casse sur deux lignes alors qu'elles etaient toutes sur une seule. Le sous-menu, lui, sort du flux -- sinon celui de la langue depasse la barre et creuse 34 px de vide entre l'en-tete et la page. */ #site-navigation .main-nav > ul > li { float: none; display: flex; align-items: center; height: 100%; } #site-navigation .main-nav > ul > li > a { display: flex; align-items: center; line-height: 1; padding-block: var(--mm-2); /* « Methode Lagree » et « Rendez-vous » se coupaient en deux lignes : c'est ce qui donnait a ces deux entrees 62 px quand les autres en faisaient 47, et ce que l'oeil lisait comme un menu casse. Un libelle de menu ne se coupe pas -- s'il ne tient pas, c'est le menu qu'il faut alleger. */ white-space: nowrap; } /* Une regle `position: absolute` sur les sous-menus a ete posee ici le 24/08/2026 pour les sortir du flux, puis RETIREE le meme jour : elle supposait un probleme que la marge de `.entry-content` expliquait deja, et elle cassait l'ouverture au survol -- le sous-menu se posait a `top: -143px`, au-dessus de la page. Le theme sait deja les placer ; on ne le corrige pas. Ce qui les deplacait, c'est notre PROPRE `display: flex` sur l'entree : le sous-menu y devenait un element flexible, centre verticalement sur une entree de 50 px alors qu'il en fait 336 -- d'ou un decalage de (336 - 50) / 2, soit exactement les 143 px mesures. Il reprend donc sa place sous l'entree, et cesse d'etre aligne comme un frere du lien. */ #site-navigation .main-nav > ul > li > ul { top: 100%; align-self: flex-start; } /* Le chevron d'un sous-menu est un BOUTON : sans cette remise a plat, il ajoutait treize pixels a son entree, et deux entrees sur sept depassaient. */ #site-navigation .main-nav > ul > li > .dropdown-menu-toggle { display: flex; align-items: center; padding-block: 0; line-height: 1; } /* LE CHEVRON DESEQUILIBRAIT LA BARRE (Monsieur, 07/09/2026). Mesure : il est rendu DANS le lien, apres le texte, et son SVG occupe 15 px. L'espace entre deux libelles valait donc 16 px apres un onglet nu (8 + 8 de padding) et 31 px apres un onglet a sous-menu -- l'oeil lisait un menu mal espace, et il avait raison. Un chevron est un SIGNE, pas un mot : il n'a pas a elargir l'onglet qui le porte. Il sort donc du flux et se CENTRE sur la frontiere des deux paddings, exactement au milieu de l'espace qui separe les deux libelles. L'espacement des libelles redevient constant -- 16 px partout -- et le chevron ne colle ni au mot qui le precede ni a celui qui le suit. Il est aussi ramene a .6em : a 15 px pour un texte de 15 px, il pesait autant que la lettre qu'il accompagne. */ #site-navigation .main-nav > ul > li > a { position: relative; } #site-navigation .main-nav > ul > li > a > .dropdown-menu-toggle { /* LA FLECHE APPARTIENT A SON MOT (Monsieur, 08/09/2026 : « ce qui induit en erreur est l'espace entre la fleche et l'element de nav auquel elle est attachee »). Centree dans l'espace, elle etait a EGALE distance des deux libelles : rien ne disait lequel elle qualifiait. Elle se pose donc juste apres son texte -- .4em d'air -- et laisse le reste du cran devant le libelle suivant. Le rapport est d'environ un a trois : l'oeil rattache sans hesiter. Elle reste DANS la boite du lien, ce qui rend inutile la demi-chasse qu'on avait donnee a la liste. */ position: absolute; left: calc(100% - var(--mm-2) + .4em); top: 50%; transform: translateY(-50%); margin: 0; padding: 0; /* LE CHEVRON FLOTTAIT AU-DESSUS DU MOT (Monsieur, 08/09/2026). Mesure : le bouton etait bien centre (meme axe que le texte, y=120,3), mais son SVG se posait 17,1 px PLUS HAUT. Cause : le bouton restait `display: inline` -- la regle qui le mettait en flex visait `li > .dropdown-menu-toggle`, or il vit dans le LIEN, pas dans le `li`, et ne l'a jamais recu. Un `line-height: 0` sur une boite en ligne pose son contenu sur une ligne de base sans hauteur : le SVG remontait d'autant. Le bouton devient donc une boite a la taille de son icone, que la translation centre vraiment. */ display: flex; align-items: center; justify-content: center; height: auto; line-height: 0; } #site-navigation .main-nav > ul > li > a .gp-icon { display: flex; align-items: center; line-height: 0; } #site-navigation .main-nav > ul > li > a .gp-icon svg { width: .6em; height: .6em; /* Un SVG en ligne s'assoit sur la LIGNE DE BASE, pas au milieu de sa boite : il retombait 1,9 px sous l'axe du mot alors que son bouton, lui, etait centre au pixel. En bloc, il n'a plus de ligne de base a suivre. Le bloc seul n'a pas suffi : le theme parent decale ses icones d'un cran (`position: relative` + `top`) pour les asseoir sur une ligne de texte. Notre chevron ne vit plus sur une ligne mais dans une boite deja centree -- ce decalage n'a plus d'objet, et il remettait les 1,9 px que le centrage venait d'oter. */ display: block; position: static; top: auto; } } /* Une page qui OUVRE sur un hero ne veut pas de marge au-dessus de lui : le theme en pose 34 px sur le contenu, et ils creusaient une bande claire entre la barre du menu et l'image (mesure du 24/08/2026 -- la marge etait sur `.entry-content`, pas sur le hero, c'est pourquoi on la cherchait ailleurs). La regle ne vise QUE ce cas : un article garde la sienne. */ /* La regle ne visait QUE les pages ouvrant sur un hero, et laissait 34 px de bande claire sous l'en-tete sur toutes les autres -- les pages de soin ouvrent sur une `.mm-section`, pas sur un `.mm-hero` (mesure du 24/08/2026 : `.entry-content` a 166 px quand l'en-tete finit a 133). Toute page composee par nous commence par l'un ou par l'autre : la regle couvre les deux, et l'article d'un blog garde la sienne. */ .entry-content:has(> .mm-hero), .entry-content:has(> .mm-section:first-child) { margin-top: 0; } /* ------------------------------------------------------------------------- Les jetons du THEME PARENT, ramenes aux couleurs de la charte GeneratePress injecte ses propres variables dans la page, EN LIGNE et apres notre feuille : `--contrast: #222222`, `--accent: #1e73be`. Ce bleu n'est nulle part dans la palette de Maison Minceur, et il ressortait la ou le theme s'en sert -- chevrons, liens de survol, elements de formulaire. Meme cause, meme remede que pour les jetons de Kadence : on redeclare, avec la specificite qu'il faut pour passer devant un style en ligne. ------------------------------------------------------------------------- */ :root:root { --contrast: #2c1f1a; --contrast-2: #48352d; --contrast-3: #68554a; --base: #f7f1ed; --base-2: #f7f1ed; --base-3: #fffbfb; --accent: #f49d49; } .main-navigation .main-nav > ul > li > a { padding-inline: var(--mm-2); } /* ------------------------------------------------------------------------- LE MENU OUVERT, sous la borne du hamburger (téléphone ET tablette) -- 29/09/2026 Mesure du 29/09/2026 à 820 px, menu ouvert : chaque entrée de premier niveau ne faisait que 15 px de haut. La hauteur de ligne de 1 posée plus haut pour la barre de bureau valait aussi pour le menu ouvert, où rien ne la corrigeait. La flèche de sous-menu, flottante et haute de 18 px, débordait de sa ligne de 15 et décalait celles du dessous : chaque flèche semblait appartenir à l'entrée suivante. Le défaut existait déjà au téléphone ; passer le hamburger jusqu'à la tablette le servait aussi aux tablettes (quête MM-LE-MENU-PASSE-EN-TIROIR-JUSQU-A-LA-TABLETTE, verdict de Monsieur Q6 : cibles d'au moins 44 px, pour le téléphone et la tablette). Chaque entrée devient une rangée de 2,75 rem (44 px) au moins, son libellé à gauche et sa flèche à droite, centrée sur la même ligne et haute comme la rangée : le doigt trouve l'entrée ET la flèche. La borne est celle du thème, lue par `borne_menu_mm.py` : ce bloc ne vaut que là où le hamburger existe. ------------------------------------------------------------------------- */ @media (max-width: 1024px) { #site-navigation .main-nav > ul > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; line-height: 1.2; padding-block: var(--mm-1); } /* GeneratePress donne à la flèche `height: 100%`, qui ne se résout pas dans une rangée de hauteur minimale : la flèche restait à 15 px, collée en haut (relevé du 29/09/2026). `height: auto` rend l'étirement possible ; la marge négative lui rend toute la hauteur de la rangée, remplissage compris. */ #site-navigation .main-nav > ul > li > a > .dropdown-menu-toggle { float: none; height: auto; align-self: stretch; margin-block: calc(-1 * var(--mm-1)); display: flex; align-items: center; padding-block: 0; } /* Le bouton du menu : ses seuls traits, sans fond (Monsieur, 29/09/2026, jugé sur tablette : « je préfère qu'il n'y ait pas de couleur, juste les traits »). GeneratePress pose en ligne un voile noir à 2 % sur le bouton, au repos, au survol et au focus (`.mobile-menu-control-wrapper .menu-toggle`) : l'identifiant de l'en-tête le reprend. La cible tactile reste celle du bouton, 55 x 60 px ; le focus garde son contour. */ #masthead .mobile-menu-control-wrapper .menu-toggle, #masthead .mobile-menu-control-wrapper .menu-toggle:hover, #masthead .mobile-menu-control-wrapper .menu-toggle:focus { background-color: transparent; } /* Les entrées des sous-menus aussi : 40 px sous GeneratePress, 44 au moins ici (verdict de Monsieur Q8, run 536 -- la cible tactile vaut pour tout le menu ouvert). */ #site-navigation .main-nav ul ul a { display: flex; align-items: center; min-height: 2.75rem; } } /* ------------------------------------------------------------------------- LE MENU OUVERT COUVRE L'ÉCRAN, sous la borne du hamburger Au téléphone et sur tablette, le menu ouvert occupe tout l'écran : toutes les lignes dans la même voix, le téléphone au pied, aucun bouton. L'en-tête entier devient la couche : la barre sombre est avant lui, hors de lui, et il n'est pas collant ; fixé du haut au bas de l'écran, il la couvre et suit la lecture sans calcul. Il prend le z-index maximal : le menu ouvert est la couche la plus haute du site, au-dessus de tout élément flottant, présent ou futur (bulle de discussion comprise). La place qu'il quitte dans la page est rendue par `--mm-entete-h` (posée par le script du menu) : la page ne bouge pas sous lui. Sans le script, le plein écran tient, et la croix ferme. La voix des entrées est celle des titres, en casse normale (Cormorant Garamond 300, la graisse déjà chargée) ; les sous-entrées sont dans la voix du texte. Chaque ligne fait 3,5 rem (56 px), les sous-entrées gardent leurs 44 px. La flèche d'une entrée prend les marges du bouton du menu (20 px de part et d'autre) : elle tombe à l'aplomb de la croix. ------------------------------------------------------------------------- */ /* `--mm-entete-h` : posée par le script du menu (en ligne sur , qui l'emporte) ; 0 sans lui. */ :root { --mm-entete-h: 0px; } .mm-menu-pied { display: none; } @media (max-width: 1024px) { /* La page ne défile plus, et le navigateur ne la recale pas quand l'en-tête quitte le flux. */ html.mobile-menu-open { overflow: hidden; overflow-anchor: none; } html.mobile-menu-open body { padding-top: var(--mm-entete-h); } html.mobile-menu-open #masthead { position: fixed; inset: 0; z-index: 2147483647; overflow-y: auto; overscroll-behavior: contain; background: var(--mm-ground); border-bottom: 0; } html.mobile-menu-open #masthead .inside-header { align-content: flex-start; } #masthead #site-navigation.toggled { margin: 0; padding: var(--mm-2) 0 var(--mm-4); width: 100%; background: transparent; } #site-navigation.toggled .inside-navigation { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: none; padding: 0; } #site-navigation.toggled .main-nav { order: 1; width: 100%; } #site-navigation.toggled .main-nav > ul, #site-navigation.toggled .main-nav ul ul.sub-menu { background: transparent; border: 0; } #site-navigation.toggled .main-nav > ul > li > a { font-family: var(--mm-serif-titre); font-size: 1.625rem; font-weight: 300; text-transform: none; letter-spacing: 0; line-height: 1.2; min-height: 3.5rem; padding-inline: 0; } #site-navigation.toggled .main-nav > ul > li > a > .dropdown-menu-toggle { padding-inline: 20px; } #site-navigation.toggled .main-nav ul ul a { font-family: var(--mm-sans); font-size: 1rem; font-weight: 300; text-transform: none; letter-spacing: 0; padding-left: var(--mm-2); } #site-navigation.toggled .main-nav ul li a, #site-navigation.toggled .main-nav ul li a:is(:hover, :focus, :active), #site-navigation.toggled .main-nav ul li.sfHover > a, #site-navigation.toggled .main-nav ul li[class*="current-menu-"] > a { color: var(--mm-ink); background: transparent; } /* Le pied : le téléphone de la barre sombre, recopié par le script du menu (une seule source : le bandeau), sous un filet. */ html.mobile-menu-open #masthead #site-navigation.toggled .mm-menu-pied { display: block; order: 2; margin-top: var(--mm-3); padding-top: var(--mm-3); border-top: 1px solid var(--mm-rule-soft); } #site-navigation .mm-menu-pied a, #site-navigation .mm-menu-pied a:is(:hover, :focus, :active) { display: flex; align-items: center; gap: .875rem; min-height: 2.75rem; font: 400 1rem/1.4 var(--mm-sans); color: var(--mm-ink); text-decoration: none; background: transparent; } #site-navigation .mm-menu-pied svg { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } } /* ------------------------------------------------------------------------- La preuve des avis -- ce que la maison ne peut pas dire d'elle-meme Une note se MONTRE, elle ne s'affirme pas : le chiffre est gros, les etoiles se posent l'une apres l'autre, et la phrase dit d'ou il vient. L'animation dure moins d'une seconde et ne se rejoue pas -- au-dela, ce n'est plus une preuve, c'est une reclame. ------------------------------------------------------------------------- */ .mm-duo--preuve { align-items: center; } /* LES TARIFS D'UN SOIN (15/09/2026) : le texte à gauche, la carte de menu de CE soin à droite -- une seule prestation, donc une seule colonne, et la carte ne porte plus la respiration de fin de colonne qu'une grille de neuf prestations exigeait. */ .mm-duo--tarifs { align-items: center; } .mm-tarifs-grilles.mm-tarifs-grilles--seule { columns: auto; } .mm-tarifs-grilles--seule .mm-tarifs { padding-bottom: var(--mm-4); } @media (min-width: 52rem) { .mm-duo--preuve { grid-template-columns: 3fr 2fr; } } .mm-preuve { --mm-compense: 0; /* centré : le tracé des titres ne se décale pas (run 442) */ text-align: center; padding: var(--mm-6) var(--mm-4); border: 1px solid var(--mm-rule); background: var(--mm-fond-element); } .mm-preuve__note { font: 300 clamp(3rem, 2rem + 4vw, 4.5rem)/1 var(--mm-serif); color: var(--mm-ink); margin: 0; } .mm-preuve__etoiles { margin: var(--mm-2) 0 0; display: flex; justify-content: center; gap: .25rem; font-size: 1.5rem; line-height: 1; max-width: none; } .mm-etoile { color: var(--mm-action); opacity: 0; animation: mm-etoile-apparait .45s ease forwards; animation-delay: calc(var(--rang) * .12s); } .mm-etoile--vide { color: var(--mm-rule); } @keyframes mm-etoile-apparait { from { opacity: 0; transform: translateY(.3rem) scale(.85); } to { opacity: 1; transform: none; } } .mm-preuve__detail { margin: var(--mm-2) 0 0; font-size: .875rem; color: var(--mm-muted); max-width: none; } /* Les coordonnees d'une section « nous joindre » se lisent de loin : ce sont deux chemins directs, pas deux lignes de texte courant. CE BLOC NE VAUT QUE POUR LE BANDEAU ETROIT (convertisseur, `.mm-etroit`) et pour l'appel. Il portait `.mm-coordonnees a` sans contexte, et attrapait la grille trois colonnes des pages de centre -- meme classe, autre nature : telephone et Instagram y sortaient en serif de 1,75 rem a cote d'une adresse en .9375 rem. Disproportion constatee par Monsieur le 10/09/2026. */ .mm-etroit.mm-coordonnees { display: flex; flex-wrap: wrap; gap: var(--mm-2) var(--mm-6); margin: var(--mm-4) 0 0; max-width: none; } .mm-etroit.mm-coordonnees a, .mm-appel .mm-coordonnees a { font: 300 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.2 var(--mm-serif-titre); color: var(--mm-ink); text-decoration: none; border-bottom: 1px solid var(--mm-action); padding-bottom: 4px; } .mm-etroit.mm-coordonnees a:hover, .mm-etroit.mm-coordonnees a:focus-visible { color: var(--mm-action-fort); } /* Dans l'appel a l'action, le fond est brun profond : les coordonnees s'y posent en creme, centrees comme le reste du bandeau. */ .mm-appel .mm-coordonnees { justify-content: center; margin-top: var(--mm-4); } .mm-appel .mm-coordonnees a { color: var(--mm-surface); } .mm-appel .mm-coordonnees a:hover, .mm-appel .mm-coordonnees a:focus-visible { color: var(--mm-action); } /* Une carte d'article n'a pas d'image : son titre EST son visuel. */ .mm-carte--texte .mm-carte__corps { padding: var(--mm-4); gap: var(--mm-3); } /* LA CARTE AFFIRMEE (Monsieur, 16/09/2026, forme B sur planche a quatre formes). Elle porte un ARGUMENT -- les convictions de la maison, les points d'equipement d'un studio -- et non une liste de lectures : son texte se lit au corps du texte courant et a l'encre, son titre en sans-serif demi-gras, et un filet haut la signale sur un fond dont elle se distingue peu. La regle generale `.mm-carte__corps p` (15 px, ton eteint) reste intacte : elle vaut pour toutes les cartes du site, une retouche a cet endroit les changeait toutes en silence (lecon des regles « element + classe », 15/09/2026). Le filet prend la couleur d'action, JAMAIS une teinte fixe : la carte est servie sur deux fonds de section, et un ton ecrit en dur ne tient pas sur les deux. */ /* LE DUO D'ARGUMENTS (Monsieur, 16/09/2026, forme D) : la description tient sa colonne de lecture, les blocs s'empilent a cote sur toute leur largeur. Sous 60 rem, la grille retombe en une colonne -- le texte d'abord, les blocs ensuite, dans l'ordre du document. */ .mm-duo--arguments { grid-template-columns: 1fr 1.6fr; gap: var(--mm-6); align-items: start; } .mm-duo--arguments .mm-entete { max-width: none; } @media (max-width: 60rem) { .mm-duo--arguments { grid-template-columns: 1fr; gap: var(--mm-4); } } /* Une grille d'UNE colonne reste a une colonne : sans cette regle, la regle reguliere des 34 rem lui en donnait deux, et les blocs empiles du duo se remettaient cote a cote. */ .mm-grille--1.mm-grille--reguliere > * { flex-basis: 100%; } .mm-carte--affirmee { border-top: 3px solid var(--mm-action); } .mm-carte--affirmee .mm-carte__corps { gap: var(--mm-2); } /* LE TITRE SE LIT EN CAPITALES, comme les autres intitules de reperage de la page -- sur-titres de section, ligne de machine d'une carte de studio, intitules du tableau (Monsieur, 16/09/2026, sur le rendu servi : « je prefererais que "La finesse plutot que le volume" soit en majuscule avec les autres sous titres »). Meme reglage que les intitules du tableau : 13 px, interlettrage .12em -- un titre de bloc et un intitule de colonne sont la meme nature d'etiquette, ils ne se reglent pas chacun dans son coin. */ .mm-carte--affirmee .mm-carte__corps :is(h2, h3) { --mm-compense: 0; /* police et graisse changees : aucun decalage devine (run 442) */ font: 600 .8125rem/1.5 var(--mm-sans); letter-spacing: .12em; text-transform: uppercase; } /* LE CORPS SE RANGE DERRIERE SON TITRE. Porte a l'encre et au corps du texte courant, il dominait l'etiquette en capitales qui le coiffe (Monsieur, 16/09/2026, sur le rendu servi : « le contenu est trop visible maintenant ») -- le rapport s'etait inverse avec le passage du titre en capitales. Il reprend donc le ton eteint, et garde 16 px : plus lisible que les 15 px d'une carte de lecture, moins present qu'un paragraphe de corps de page. */ .mm-carte--affirmee .mm-carte__corps p { font-size: 1rem; color: var(--mm-muted); } /* Le pied natif du theme laisse derriere le notre un bandeau BLANC et vide : sa barre de copyright existe toujours, meme videe de son texte (mesure du 24/08/2026 -- `.copyright-bar` sans contenu dans un `footer.site-info`). On la retire, plutot que de la remplir de rien. La fleche de retour en haut, elle, etait servie sans aucune regle : un petit rectangle gris colle au bord, qui se lit comme un defaut d'affichage. Elle prend la forme des boutons de la charte -- ronde, discrete, a droite. */ .site-info { display: none; } /* Le selecteur porte `body` : le theme pose sa fleche a GAUCHE par une regle plus specifique que la notre, et elle y restait malgre sa nouvelle forme (mesure du 24/08/2026) -- et son style EN LIGNE, `a.generate-back-to-top`, passe devant une simple classe. Il faut donc nommer l'element autant que la classe pour reprendre la main. */ body a.generate-back-to-top { /* `position: fixed` est POSE ICI, et ce n'etait pas une precaution : mesure du 24/08/2026, la fleche etait en `static` -- ses `right` et `bottom` ne valaient donc rien, et elle tombait dans le flux, en bas a gauche, sous le pied de page. Le theme la fixe par une feuille que cette page ne charge pas. */ /* Au-dessus de TOUT : a 100, elle passait derriere le pied de page (Monsieur, 24/08/2026, capture a l'appui). Le pied ouvre son propre contexte d'empilement, et la fleche s'y noyait des qu'on atteignait le bas. */ position: fixed; z-index: 9999; right: var(--mm-4); bottom: var(--mm-4); left: auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; /* Creme sur brun, et non l'inverse : posee en brun, elle disparaissait dans le pied de page, qui l'est aussi -- seul le chevron restait visible. */ background: var(--mm-surface); color: var(--mm-ink); border: 0; box-shadow: 0 1px 8px rgba(0, 0, 0, .18); opacity: .9; transition: background 160ms ease, opacity 160ms ease; } body a.generate-back-to-top:hover, body a.generate-back-to-top:focus-visible { background: var(--mm-action); color: var(--mm-ink); opacity: 1; } /* Le style EN LIGNE du theme pose un fond noir a 40 % sur cette fleche : il faut le meme poids de selecteur pour le reprendre. */ body a.generate-back-to-top { background-color: var(--mm-surface); } body a.generate-back-to-top:hover { background-color: var(--mm-action); } /* Le plan du site : des colonnes de liens, pas une liste a puces. */ .mm-plan { list-style: none; padding: 0; margin: var(--mm-4) 0 0; max-width: none; display: grid; gap: var(--mm-2) var(--mm-4); grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); } .mm-plan a { color: var(--mm-ink); text-decoration: none; border-bottom: 1px solid var(--mm-rule); padding-bottom: 2px; } .mm-plan a:hover, .mm-plan a:focus-visible { color: var(--mm-action-fort); border-bottom-color: var(--mm-action); } /* ------------------------------------------------------------------------- Pied de page -- le dernier bandeau, meme encre que l'appel a l'action Ces regles vivaient dans le PHP d'un mu-plugin d'atelier, avec leurs couleurs EN DUR et un repli sur `--global-palette1/3` -- les jetons de Kadence, dont le site neuf s'est libere. Elles rejoignent la feuille de la charte, et ne connaissent plus que ses roles. Le pied porte la meme encre que l'appel a l'action qui le precede : deux bandeaux sombres qui se suivent ne font qu'un seul pied, et c'est voulu. ------------------------------------------------------------------------- */ .mm-pied { position: relative; z-index: 0; background: var(--mm-ink); color: var(--mm-surface); padding-block: clamp(3rem, 6vw, 5rem) 0; padding-inline: clamp(1.25rem, 6vw, 7rem); } .mm-pied__inner { max-width: var(--mm-large); margin-inline: auto; display: grid; gap: var(--mm-6); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); padding-bottom: var(--mm-6); } /* Ces deux-la etaient EMISES sans regle : le controle des classes les a denoncees des que le producteur du pied est entre dans son perimetre. Elles ne sont pas decoratives -- la marque tient une colonne et demie, parce que sa signature respire mal dans la largeur d'une liste de liens. */ .mm-pied__marque { grid-column: span 1; max-width: 34ch; } /* LES COLONNES DU PIED ETAIENT ETRANGES (Monsieur, 07/09/2026), et la mesure dit pourquoi. `auto-fit` rendait QUATRE colonnes de 281 px a 1440 px ; la marque en reservait DEUX, les trois listes une chacune -- cinq cellules pour quatre colonnes. « Nous joindre » retombait donc SEUL sur une deuxieme ligne, sous la marque, et la deuxieme colonne restait VIDE : la marque, bornee a 34 ch, n'occupait que 272 px des 610 qu'elle reservait. Le nombre de colonnes ne peut pas se deviner quand l'un des blocs en prend deux : au-dessus du seuil, la grille se DECLARE -- une colonne large pour la signature, trois egales pour les listes, quatre blocs sur une seule ligne. */ @media (min-width: 64rem) { .mm-pied__inner { grid-template-columns: 2fr 1fr 1fr 1fr; } .mm-pied__marque { grid-column: auto; } } .mm-pied__colonne { min-width: 0; } .mm-pied .mm-surtitre { color: var(--mm-clair); opacity: .7; margin: 0 0 var(--mm-2); } .mm-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mm-1); } .mm-pied a { color: var(--mm-surface); text-decoration: none; border-bottom: 1px solid transparent; } .mm-pied a:hover, .mm-pied a:focus-visible { color: var(--mm-action); border-bottom-color: currentColor; } .mm-pied__logo { font: 300 1.5rem/1.2 var(--mm-serif); letter-spacing: .12em; margin: 0 0 var(--mm-1); color: var(--mm-clair); } .mm-pied__baseline { color: var(--mm-surface); opacity: .75; margin: 0; max-width: 30ch; } .mm-pied__bas { max-width: var(--mm-large); margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--mm-2) var(--mm-4); align-items: center; justify-content: space-between; border-top: 1px solid var(--mm-clair-20); padding-block: var(--mm-3) var(--mm-4); font-size: .875rem; color: var(--mm-surface); opacity: .8; } .mm-pied__bas p { margin: 0; } .mm-pied__bas ul { display: flex; flex-wrap: wrap; gap: var(--mm-1) var(--mm-3); list-style: none; margin: 0; padding: 0; } /* ------------------------------------------------------------------------- Appel a l'action -- « bandeau brun profond, texte creme, un bouton » (6) ------------------------------------------------------------------------- */ .mm-appel { --mm-compense: 0; /* centré : le tracé des titres ne se décale pas (run 442) */ /* UN TON AU-DESSUS DU PIED (Monsieur, 15/09/2026 : « ce bloc CTA devrait avoir une couleur un peu plus claire que le bloc footer »). Tous deux en `--mm-ink`, le bandeau et le pied se fondaient en un seul aplat : l'appel ne se détachait pas. */ background: var(--mm-body); color: var(--mm-surface); text-align: center; padding-block: clamp(3.5rem, 7vw, 6rem); padding-inline: clamp(1.25rem, 6vw, 7rem); margin: 0; } .mm-appel h2 { color: var(--mm-surface); max-width: 24ch; margin: 0 auto; } .mm-appel .mm-surtitre { color: var(--mm-surface); opacity: .7; } .mm-chapeau--centre { margin-inline: auto; max-width: 46ch; } .mm-appel .mm-chapeau { color: var(--mm-surface); opacity: .85; } .mm-appel p { margin-inline: auto; } .mm-appel .mm-mention { color: var(--mm-surface); opacity: .75; } /* ------------------------------------------------------------------------- Le titre du theme s'efface devant celui de la page ------------------------------------------------------------------------- */ /* Une page composee porte son H1 dans son hero (charte 6). Si le theme affiche EN PLUS son propre titre d'entree, la page ouvre sur deux titres -- et le premier des deux est celui que personne n'a ecrit. Constate le 23/08/2026 sur le rendu servi : « Site neuf - accueil » s'affichait au-dessus du hero. La classe est posee par le theme (`body_class`), non par un producteur : le controle des classes ne pouvait donc pas la reclamer, et son absence n'a rougi nulle part. C'est l'angle mort qui a laisse passer ce defaut. */ body.mm-titre-masque .site-content .entry-header .entry-title, body.mm-titre-masque .site-content > .page-header { display: none; } /* ------------------------------------------------------------------------- Texte courant d'une page longue -- la colonne de lecture (3.3) ------------------------------------------------------------------------- */ h5 { font: 600 1rem/1.4 var(--mm-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--mm-ink); margin: 0; } h6 { font: 600 .875rem/1.4 var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mm-muted); margin: 0; } /* CETTE REGLE EST CELLE DE LA COLONNE DE LECTURE : elle ne vaut donc QUE dans le contenu. Ecrite sur le selecteur nu `ul, ol`, elle attrapait toutes les listes du document -- le menu principal en premier. Mesure du 07/09/2026 : le `ul` de la barre se retrouvait plafonne a `--mm-mesure` (68 ch, soit 544 px) quand ses sept onglets en reclamaient 862 ; comme la barre interdit tout repli et s'aligne a droite, les 318 px de trop SORTAIENT par la gauche, sur le nom de la maison. Le defaut ne datait pas du menu : il dormait depuis que la regle existe, et le menu l'a revele en grandissant (« Blog », « A propos », le chevron du rendez-vous). Une mesure de lecture se porte au texte, jamais au document -- sans quoi chaque nouvelle liste hors contenu (fil d'Ariane, sommaire, pied de page) hérite d'un plafond qui n'a pas de sens pour elle. LA MESURE ET LE RETRAIT PASSENT SOUS `:where()` (14/09/2026, run 439). Écrite en `.entry-content ul` (élément + classe), la règle battait la classe seule de chaque composant : `.mm-zones`, `.mm-vise`, `.mm-deroule`, `.mm-combos`, `.mm-faits` déclaraient `max-width: none` et `padding: 0`, et la règle générique les écrasait EN SILENCE. Mesure servie sur la page de madérothérapie à 1440 px : les cinq listes plafonnées à 661 px, leur contenu parti à 106 px au lieu de 86 -- la moitié droite vide et le double bord que Monsieur jugeait « amateur ». Le défaut avait déjà été rustiné pour `.mm-coordonnees` seule (10/09/2026). Sous `:where()`, la liste de texte nue garde sa mesure ; toute classe qui déclare autre chose l'emporte. La MARGE reste à l'ancienne sélectivité : l'espacement est réglé et contrôlé ailleurs (charte §5.1), ce correctif ne le touche pas. */ :where(.entry-content) :is(ul, ol) { max-width: var(--mm-mesure); padding-left: 1.25rem; } .entry-content ul, .entry-content ol { margin: 0 0 var(--mm-2); } .entry-content li { margin-bottom: var(--mm-1); } /* La cible d'une ancre interne. Sans decalage, le titre vise se colle au bord haut de la fenetre et se lit comme s'il n'y avait rien avant lui. */ .mm-ancre { display: block; height: 0; scroll-margin-top: var(--mm-8); } /* Un titre qui PORTE une ancre se decale de lui-meme : les pages legales visent leurs articles par l'id du

, sans intercaler d'element vide (07/09/2026). */ .mm-section h2[id] { scroll-margin-top: var(--mm-8); } /* Le sommaire d'une page longue -- les cinq pages legales et rien d'autre a ce jour. Il remplace les accordeons de l'ancien site : un texte juridique replie ne se lit pas, et son contenu n'est pas indexe tant qu'il reste ferme. La liste est donc PLATE, posee sur un aplat doux, et les articles se deroulent en dessous. Pas de puce : chaque ligne est un lien, il porte deja le poids. */ .mm-sommaire { background: var(--mm-surface); border-left: 2px solid var(--mm-rule); padding: var(--mm-3) var(--mm-4); margin: var(--mm-4) 0 var(--mm-6); max-width: var(--mm-mesure); } .mm-sommaire ul { list-style: none; padding: 0; margin: 0; } .mm-sommaire li { margin-bottom: var(--mm-1); } .mm-sommaire li:last-child { margin-bottom: 0; } .mm-sommaire a { color: var(--mm-ink); text-decoration: underline; text-decoration-color: var(--mm-rule); text-underline-offset: 3px; } .mm-sommaire a:hover, .mm-sommaire a:focus-visible { text-decoration-color: var(--mm-action); } /* 4.3 « Les ombres portees disparaissent, remplacees par des filets d'un pixel. » Un separateur est un filet, jamais une barre. */ .mm-filet { border: 0; border-top: 1px solid var(--mm-rule); max-width: var(--mm-mesure); margin: var(--mm-6) auto; } /* Une illustration dans le fil du texte. Rayon 0 sur les images (4.3), legende en texte secondaire (4.2). Elle deborde la colonne de lecture : c'est ce debord qui la distingue d'un paragraphe. */ .mm-figure { margin: var(--mm-6) 0; max-width: 100%; } .mm-figure img { width: 100%; border-radius: 0; } .mm-figure figcaption { font-size: .875rem; color: var(--mm-muted); margin-top: var(--mm-1); max-width: var(--mm-mesure); } /* ------------------------------------------------------------------------- Reperes courts -- trois faits lus d'un coup d'oeil ------------------------------------------------------------------------- */ /* Ne du bloc Lagree, le 23/08/2026 : le visiteur doit comprendre CE QUE C'EST avant de decider de cliquer. Forme derivee du sur-titre de la charte (3.2) -- capitales espacees, sans-serif, texte secondaire -- separes par des filets verticaux plutot que par des puces : trois reperes ne sont pas une liste a lire, ce sont trois choses a voir en meme temps. */ .mm-faits { list-style: none; padding: 0; margin: var(--mm-3) 0 var(--mm-4); display: flex; flex-wrap: wrap; gap: 0 var(--mm-3); /* Ces reperes ne sont pas de la LECTURE : la regle generale des listes les bornait a la mesure de la colonne de texte (68 ch, soit 544 px), et trois reperes de 570 px y passaient a la ligne alors que leur colonne en offrait 813 (mesure du 24/08/2026). Une ligne de reperes prend la largeur qu'on lui donne, pas celle d'un paragraphe. */ max-width: none; } .mm-faits li { margin: 0; padding-right: var(--mm-3); border-right: 1px solid var(--mm-rule); font: 600 .8125rem/1.6 var(--mm-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mm-muted); } .mm-faits li:last-child { border-right: 0; padding-right: 0; } /* Chiffres cles -- le nombre en grand, son objet dessous, chacun dans sa carte. Ne du bloc Lagree de l'accueil le 14/09/2026 : Monsieur a choisi les cartes sur l'atelier, parmi trois presentations servies ensemble (cartes, sans cadre, encadre). Ecriture de la note Google (`.mm-preuve__note`, serif leger) pour que deux chiffres de l'accueil parlent la meme langue. Chiffres ALIGNES (`lnum`) : Cormorant dessine par defaut des chiffres elzeviriens, et le « 0 » de « 50 » tombait plus bas que le « 5 ». Une carte porte le fond de PAGE, jamais celui de sa section (DEC-149-456). */ /* Autant de colonnes que de faits, sur UNE ligne : le bloc « A propos » en porte trois, sans nombre -- la carte rend alors le texte entier, centre dans sa hauteur (14/09/2026). */ .mm-chiffres { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 11rem); gap: var(--mm-2); margin: var(--mm-4) 0 0; } .mm-chiffres__item { --mm-compense: 0; /* centré : le tracé des titres ne se décale pas (run 442) */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; background: var(--mm-fond-element); border: 1px solid var(--mm-rule); padding: var(--mm-3) var(--mm-2); } /* La carte prend le fond OPPOSE a celui de sa section (DEC-149-456) : creme sur une section blanche (« A propos »), blanche sur une section creme (Lagree). Une teinte fixe ne tient pas quand le composant est servi sur les deux fonds. */ @media (max-width: 30rem) { /* Trois cartes a 390 px : « PERSONNALISE » touchait les bords de la sienne. */ .mm-chiffres { gap: var(--mm-1); } .mm-chiffres__item { padding-inline: var(--mm-1); } .mm-chiffres__libelle { letter-spacing: .08em; } } .mm-chiffres__chiffre { font: 300 3rem/1 var(--mm-serif-titre); color: var(--mm-ink); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .mm-chiffres__libelle { font: 600 .75rem/1.4 var(--mm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mm-muted); } .mm-chiffres + .mm-actions { margin-top: var(--mm-6); } /* Un lien dans une mention reste du TEXTE : il se souligne, il ne se met pas en capitales. L'empilement de trois formes de lien en trois centimetres etait le defaut du bloc precedent. */ .mm-mention a { color: inherit; text-decoration: underline; text-decoration-color: var(--mm-rule); text-underline-offset: 3px; } .mm-mention a:hover, .mm-mention a:focus-visible { text-decoration-color: var(--mm-action); } /* ------------------------------------------------------------------------- Vitrine d'images -- une grande image ENTIÈRE, des vignettes, une fenêtre ------------------------------------------------------------------------- */ /* La grille de vignettes (13 rem, 4/3 `cover`) a été rejetée par Monsieur le 10/09/2026 (« brut, aucune interaction ») : elle recadrait des montages carrés et des photos verticales en paysage, coupant les étiquettes « avant / après » et le haut des salles. La vitrine montre chaque image dans SON format (`contain`, jamais `cover` sur la grande image), et se décline en DEUX modules pour varier d'une page à l'autre (maquette validée v3, 10/09/2026) : - vertical (défaut) : colonne de vignettes à droite, bornée à la hauteur de l'image, flèches haut / bas ; - horizontal (modificateur) : bande étalée sous l'image sur toute sa largeur, flèches gauche / droite. Le cadre suit le module : carré pour la colonne (les montages avant / après sont carrés), 4/3 pour la bande. Le script (site_neuf_mm.script_vitrine) ne porte aucune donnée : il lit ce balisage. Sans script, tout reste visible. */ .mm-galerie { --mm-cadre: 1 / 1; --mm-vignette: 6.5rem; display: grid; gap: var(--mm-1); max-width: 40rem; /* CENTRÉE : bornée à 40 rem et collée à gauche, la vitrine laissait un vide à droite que Monsieur a trouvé étrange (22h31). Un espace la sépare de son titre, comme le ruban (23h13). */ margin-inline: auto; margin-top: var(--mm-4); } .mm-vitrine__haut { display: grid; grid-template-columns: minmax(0, 1fr) var(--mm-vignette); gap: var(--mm-2); align-items: stretch; } /* Cadres des éléments en ligne (bouton seul dans un div) : wpautop (WordPress) entoure de

tout run en ligne posé entre des blocs -- un bouton nu à côté d'un div recevait un

orphelin, donc un

vide de plus dans la grille (servi le 10/09/2026). Les cadres sont transparents : ils passent la place à leur bouton. */ .mm-vitrine__scene { min-width: 0; display: grid; } .mm-vitrine__defile-cadre, .mm-vitrine__fleche-cadre { display: grid; min-width: 0; } .mm-vitrine__defile-cadre:has(> [hidden]) { display: none; } .mm-vitrine__grande { all: unset; cursor: zoom-in; display: block; position: relative; width: 100%; aspect-ratio: var(--mm-cadre); overflow: hidden; background: var(--mm-fond-element); } .mm-vitrine__grande:focus-visible { outline: 2px solid var(--mm-action-fort); outline-offset: 4px; } /* Deux calques : le fondu croise l'ancienne et la nouvelle image sans trou blanc. */ .mm-vitrine__calque { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 420ms ease; } .mm-vitrine__calque.est-visible { opacity: 1; } .mm-vitrine__loupe { position: absolute; right: var(--mm-2); bottom: var(--mm-2); font: 600 .6875rem/1 var(--mm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mm-ink); background: var(--mm-clair); padding: .5rem .75rem; opacity: 0; transition: opacity 160ms ease; } .mm-vitrine__grande:hover .mm-vitrine__loupe, .mm-vitrine__grande:focus-visible .mm-vitrine__loupe { opacity: 1; } @media (hover: none) { .mm-vitrine__loupe { opacity: 1; } } /* La colonne ne contribue AUCUNE hauteur : elle prend celle de l'image, jamais plus (Monsieur, 10/09/2026 : « ne dépasse pas la hauteur de l'image »). */ .mm-vitrine__colonne { position: relative; min-height: 0; } .mm-vitrine__bande-cadre { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--mm-1); } .mm-vitrine__bande { display: grid; grid-auto-rows: var(--mm-vignette); gap: var(--mm-1); min-height: 0; overflow-y: auto; scrollbar-width: none; align-content: start; scroll-snap-type: y mandatory; } .mm-vitrine__bande::-webkit-scrollbar { display: none; } .mm-vitrine__defile { all: unset; cursor: pointer; height: 1.75rem; display: grid; place-items: center; border: 1px solid var(--mm-rule); color: var(--mm-ink); font-size: .95rem; transition: border-color 160ms ease, opacity 160ms ease; } .mm-vitrine__defile:hover { border-color: var(--mm-action); } .mm-vitrine__defile:focus-visible { outline: 2px solid var(--mm-action-fort); outline-offset: 2px; } .mm-vitrine__defile[disabled] { opacity: .3; cursor: default; } .mm-vitrine__defile[hidden] { display: none; } .mm-vitrine__vignette { all: unset; cursor: pointer; display: block; height: var(--mm-vignette); overflow: hidden; background: var(--mm-surface); position: relative; scroll-snap-align: start; } .mm-vitrine__vignette img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity 200ms ease; } .mm-vitrine__vignette::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; transition: border-color 200ms ease; } .mm-vitrine__vignette:hover img, .mm-vitrine__vignette.est-active img { opacity: 1; } .mm-vitrine__vignette.est-active::after { border-color: var(--mm-action); } .mm-vitrine__vignette:focus-visible { outline: 2px solid var(--mm-action-fort); outline-offset: -2px; } /* LE RUBAN -- module horizontal : une seule ligne de photos, sans image mise en avant (Monsieur, 22h31 : « une ligne de photos sans la photo mise en avant »). Chaque photo garde son format à une hauteur commune ; la ligne prend toute la largeur et défile aux flèches ou au doigt ; un clic ouvre la fenêtre. */ .mm-galerie--ruban { max-width: none; margin-inline: 0; /* L'espace entre le titre et les photos est porté par `.mm-galerie` (Monsieur, 10/09/2026 23h01 puis 23h13 : les deux modules). */ } /* La mention sous la vitrine centrée se centre avec elle « pour respecter le reste » (Monsieur, 10/09/2026 23h01). */ .mm-galerie + .mm-mention { text-align: center; margin-inline: auto; } .mm-ruban__cadre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--mm-2); align-items: center; } .mm-ruban__ligne { display: flex; gap: var(--mm-2); height: clamp(14rem, 24vw, 22rem); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; } .mm-ruban__ligne::-webkit-scrollbar { display: none; } .mm-ruban__photo { all: unset; cursor: zoom-in; display: block; flex: 0 0 auto; height: 100%; background: var(--mm-fond-element); scroll-snap-align: start; position: relative; } .mm-ruban__photo img { height: 100%; width: auto; max-width: none; display: block; } .mm-ruban__photo::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; transition: border-color 200ms ease; pointer-events: none; } .mm-ruban__photo:hover::after, .mm-ruban__photo:focus-visible::after { border-color: var(--mm-action); } .mm-ruban__photo:focus-visible { outline: none; } .mm-galerie--ruban .mm-vitrine__defile { height: 2.25rem; width: 2.25rem; } .mm-vitrine__barre { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--mm-2); border-top: 1px solid var(--mm-rule); padding-top: var(--mm-1); margin-top: var(--mm-1); } .mm-vitrine__legende { display: flex; gap: var(--mm-2); align-items: baseline; min-width: 0; font-size: .9375rem; margin: 0; } .mm-vitrine__compte { font: 600 .75rem/1 var(--mm-sans); letter-spacing: .14em; color: var(--mm-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .mm-vitrine__alt { color: var(--mm-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-vitrine__fleche { all: unset; cursor: pointer; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid var(--mm-rule); color: var(--mm-ink); font-size: 1.1rem; transition: border-color 160ms ease; } .mm-vitrine__fleche:hover { border-color: var(--mm-action); } .mm-vitrine__fleche:focus-visible { outline: 2px solid var(--mm-action-fort); outline-offset: 2px; } @media (max-width: 47.999rem) { /* Sur téléphone, les deux modules se rejoignent : bande horizontale sous l'image, au doigt, sans flèches de défilement. */ .mm-vitrine__haut { grid-template-columns: 1fr; } .mm-vitrine__colonne { height: 4.5rem; } .mm-vitrine__bande-cadre { position: absolute; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); } .mm-vitrine__defile-cadre { display: none; } .mm-vitrine__bande { display: flex; overflow-y: hidden; overflow-x: auto; scroll-snap-type: x mandatory; } .mm-vitrine__vignette { flex: 0 0 4.5rem; height: 4.5rem; } /* Le ruban au doigt : la ligne seule, sans flèches. */ .mm-ruban__cadre { grid-template-columns: minmax(0, 1fr); } .mm-ruban__ligne { height: 12rem; } } /* La fenêtre d'agrandissement : un `dialog` natif, un seul par page, partagé par toutes les vitrines. Le voile est du brun profond : c'est l'image qui fait la lumière. */ .mm-loupe { border: 0; padding: 0; background: transparent; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; } .mm-loupe::backdrop { background: var(--mm-voile); } .mm-loupe__corps { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; padding: var(--mm-3); gap: var(--mm-2); box-sizing: border-box; } .mm-loupe__image { min-height: 0; display: grid; place-items: center; } .mm-loupe__image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity 420ms ease; } .mm-loupe__pied { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--mm-2); align-items: center; color: var(--mm-clair); font-size: .9375rem; } .mm-loupe__compte { color: var(--mm-clair); opacity: .7; } .mm-loupe__alt { color: var(--mm-clair); } .mm-loupe__pied .mm-vitrine__fleche, .mm-loupe__fermer { border-color: var(--mm-clair-20); color: var(--mm-clair); } .mm-loupe__pied .mm-vitrine__fleche:hover, .mm-loupe__fermer:hover { border-color: var(--mm-action); } .mm-loupe__fermer { all: unset; cursor: pointer; height: 2.25rem; padding-inline: .85rem; display: grid; place-items: center; border: 1px solid; font: 600 .6875rem/1 var(--mm-sans); letter-spacing: .14em; text-transform: uppercase; } .mm-loupe__fermer:focus-visible, .mm-loupe__pied .mm-vitrine__fleche:focus-visible { outline: 2px solid var(--mm-action); outline-offset: 2px; } .mm-loupe__legende { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; } /* ------------------------------------------------------------------------- Avis -- une carte, une note, jamais un ornement ------------------------------------------------------------------------- */ .mm-avis { margin: 0; padding: var(--mm-4); } .mm-avis blockquote, .mm-avis p { margin: 0 0 var(--mm-2); } .mm-avis figcaption { font-size: .875rem; color: var(--mm-muted); } .mm-avis-liste { align-items: stretch; } /* Les etoiles sont la SEULE exception au « l'orange ne sert qu'a l'action » (4.2) : ce sont des etoiles, elles ne peuvent pas etre brunes. La regle est sauve parce qu'une note n'est pas cliquable -- elle n'entre en concurrence avec aucun bouton. */ .mm-avis__note { color: var(--mm-action); font-size: 1.0625rem; letter-spacing: .12em; margin: 0 0 var(--mm-2); } /* ------------------------------------------------------------------------- Informations pratiques -- coordonnees et plan ------------------------------------------------------------------------- */ .mm-coordonnees { /* Une grille de trois colonnes, pas une liste de lecture : sans `max-width: none`, la mesure des listes de texte la replie en deux colonnes et une troisième dessous. */ list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--mm-2); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .mm-coordonnees li { margin: 0; padding-top: var(--mm-2); border-top: 1px solid var(--mm-rule); } .mm-coordonnees strong { display: block; font: 600 .8125rem/1.2 var(--mm-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mm-muted); margin-bottom: var(--mm-1); } .mm-coordonnees p { margin-bottom: var(--mm-1); } /* Dans la grille, un lien est une ligne de texte courant qui se trouve etre cliquable : meme corps que l'adresse et les horaires, soulignement discret. `.mm-lien` (capitales espacees, filet orange) est fait pour une action en fin de carte, pas pour un numero de telephone (Monsieur, 10/09/2026). */ .mm-coordonnees li a { display: inline; font: inherit; letter-spacing: 0; text-transform: none; color: var(--mm-body); border-bottom: 0; padding-bottom: 0; text-decoration: underline; text-decoration-color: var(--mm-rule); text-underline-offset: 3px; transition: text-decoration-color 160ms ease; } .mm-coordonnees li a:hover, .mm-coordonnees li a:focus-visible { color: var(--mm-ink); text-decoration-color: var(--mm-action); } /* Un plan est un rectangle d'image : meme traitement qu'un visuel de carte, sans bordure propre et sans rayon (4.3). */ .mm-carte-geo { margin: var(--mm-4) 0 0; aspect-ratio: 16 / 9; overflow: hidden; } .mm-carte-geo iframe { width: 100%; height: 100%; border: 0; display: block; } /* « Ou nous trouver » d'une page de centre -- forme du bloc Perinea (Monsieur, 15/09/2026) : une ligne a icone par coordonnee, le plan de la fiche a cote. L'icone est un element pose sur la section : son fond suit `--mm-fond-element`, jamais le fond de la section (DEC-149-456). */ .mm-trouver { display: grid; gap: var(--mm-6); grid-template-columns: 1fr; align-items: start; } @media (min-width: 52rem) { .mm-trouver { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } } .mm-trouver__infos { list-style: none; padding: 0; margin: 0; max-width: none; display: flex; flex-direction: column; gap: var(--mm-3); } .mm-trouver__ligne { display: flex; align-items: center; gap: var(--mm-2); margin: 0; } .mm-trouver__icone { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--mm-rule); border-radius: var(--mm-rayon); background: var(--mm-fond-element); color: var(--mm-action-fort); } .mm-trouver__icone svg { width: 1.25rem; height: 1.25rem; } /* L'icône se centre sur la HAUTEUR du bloc libellé + texte (Monsieur, 15/09/2026 : « je préférerais que l'icône soit centrée ») -- une ligne d'horaires sur quatre lignes garde son icône au milieu, pas collée au libellé. */ .mm-trouver strong { display: block; font: 600 .8125rem/1.2 var(--mm-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mm-muted); margin: 0 0 var(--mm-1); } .mm-trouver__ligne p { margin: 0; line-height: 1.6; } .mm-trouver a { color: var(--mm-body); border-bottom: 0; padding-bottom: 0; text-decoration: underline; text-decoration-color: var(--mm-rule); text-underline-offset: 3px; transition: text-decoration-color 160ms ease; } .mm-trouver a:hover, .mm-trouver a:focus-visible { color: var(--mm-ink); text-decoration-color: var(--mm-action); } .mm-trouver .mm-carte-geo { margin: 0; aspect-ratio: 4 / 3; border: 1px solid var(--mm-rule); } /* Le lien externe : centré sous le plan, plus petit que le texte courant -- une indication, pas une action (Monsieur, 15/09/2026). */ .mm-trouver__lien { margin: var(--mm-2) 0 0; max-width: none; text-align: center; font-size: .875rem; } .mm-trouver__lien a { color: var(--mm-muted); } /* ------------------------------------------------------------------------- Formulaire -- DÉCIDÉ ici, la charte ne le décrivait pas (question 4) Règle retenue : un champ est un filet et du vide, jamais une boîte grise. Rayon 2px comme les boutons (4.3) ; l'orange n'apparaît qu'au focus et sur le bouton d'envoi, donc jamais deux fois en même temps (4.2). Refonte du 05/10/2026 (run 621, I5) : un seul style pour tous les intitulés (étiquettes ET légendes -- le nom et les soins sont des `fieldset`, ils échappaient à la règle des `label`) ; les choix deviennent des étiquettes cliquables, en casse normale ; une case cochée passe à l'encre, pas à l'orange ; le filet d'un champ porte un contraste de 3:1 sur le fond (WCAG 1.4.11), là où le filet de la charte (brun à 12 %) le laissait invisible. Les sélecteurs passent par `.wpforms-container .wpforms-form` : la feuille de WPForms écrit `div.wpforms-container-full .wpforms-form ...`, il faut la dépasser sans `!important`. Aucun identifiant de formulaire ni de champ n'est écrit ici : la même feuille sert les dix-huit formulaires, dans les deux langues. Balisage de référence : WPForms Lite 2.0.2.1, rendu « modern ». L'état coché s'accroche à `li > input + label.wpforms-field-label-inline` : le contrôle des formulaires (controle_formulaires_mm.py) vérifie ce balisage à chaque passage. ------------------------------------------------------------------------- */ .mm-formulaire { max-width: 44rem; margin-top: var(--mm-4); --mm-filet-champ: color-mix(in srgb, var(--mm-ink) 50%, transparent); } /* WPForms « modern » peint le formulaire par SES variables, posées en ligne sur `#wpforms-` : un bleu #066aab absent de la palette sur le bouton, les cases et les sauts de page (relevé servi du 15/09/2026). Une règle de classe perd contre cet id ; une variable redéclarée sur l'élément ENFANT `.wpforms-form` gagne par héritage, quel que soit le formulaire du centre ou de la langue -- aucun id écrit ici. */ .mm-formulaire .wpforms-form { --wpforms-button-background-color: var(--mm-action); --wpforms-button-border-color: var(--mm-action); --wpforms-button-text-color: var(--mm-ink); --wpforms-button-border-radius: var(--mm-rayon); --wpforms-page-break-color: var(--mm-action); /* Un champ se détache de sa section : il prend le fond d'élément qu'elle déclare -- blanc sur une section crème, crème sur une section claire. Transparent, il se confondait avec elle (10/10/2026). Même fond pour les champs et les étiquettes de choix, plus bas. */ --wpforms-field-background-color: var(--mm-fond-element); --wpforms-field-menu-color: var(--mm-ground); --wpforms-field-border-color: var(--mm-filet-champ); --wpforms-field-border-color-spare: var(--mm-filet-champ); --wpforms-field-border-radius: var(--mm-rayon); --wpforms-field-text-color: var(--mm-body); --wpforms-label-color: var(--mm-ink); --wpforms-label-sublabel-color: var(--mm-muted); --wpforms-label-error-color: var(--mm-action-fort); } .mm-formulaire .wpforms-container .wpforms-form .wpforms-field { padding: 0; margin: 0 0 var(--mm-3); } .mm-formulaire .wpforms-container .wpforms-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } /* L'intitulé : une étiquette ou une légende, le même dessin. */ .mm-formulaire .wpforms-container .wpforms-form .wpforms-field-label { display: block; float: none; width: auto; padding: 0; font: 600 .8125rem/1.3 var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mm-ink); margin: 0 0 var(--mm-1); } .mm-formulaire .wpforms-container .wpforms-form .wpforms-required-label { color: var(--mm-muted); } .mm-formulaire .wpforms-container .wpforms-form .wpforms-field-sublabel { display: block; margin: .375rem 0 0; padding: 0; font: 400 .8125rem/1.3 var(--mm-sans); letter-spacing: 0; text-transform: none; color: var(--mm-muted); } .mm-formulaire .wpforms-container .wpforms-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) { width: 100%; max-width: none; height: auto; padding: .875rem 1rem; font: 400 1.0625rem/1.5 var(--mm-sans); color: var(--mm-body); background: var(--mm-fond-element); border: 1px solid var(--mm-filet-champ); border-radius: var(--mm-rayon); box-shadow: none; transition: border-color 160ms ease; } .mm-formulaire .wpforms-container .wpforms-form :is(input, select, textarea):hover { border-color: var(--mm-ink); } .mm-formulaire .wpforms-container .wpforms-form textarea { min-height: 8rem; resize: vertical; } .mm-formulaire .wpforms-container .wpforms-form :is(input, select, textarea):focus-visible { border-color: var(--mm-action); outline: 2px solid var(--mm-action); outline-offset: 1px; box-shadow: none; } .mm-formulaire ::placeholder { color: var(--mm-muted); opacity: .7; } /* Les choix : des étiquettes cliquables qui se rangent à la ligne, la case native reste dans le flux d'accessibilité (focus clavier, lecteur d'écran), invisible. */ .mm-formulaire .wpforms-container .wpforms-form :is(.wpforms-field-checkbox, .wpforms-field-radio).wpforms-field ul { display: flex; flex-wrap: wrap; gap: .5rem; grid-template-columns: none; list-style: none; margin: 0; padding: 0; } .mm-formulaire .wpforms-container .wpforms-form :is(.wpforms-field-checkbox, .wpforms-field-radio).wpforms-field li { position: relative; display: block; width: auto; margin: 0; padding: 0; } .mm-formulaire .wpforms-container .wpforms-form :is(.wpforms-field-checkbox, .wpforms-field-radio).wpforms-field li input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .mm-formulaire .wpforms-container .wpforms-form :is(.wpforms-field-checkbox, .wpforms-field-radio).wpforms-field li input::before, .mm-formulaire .wpforms-container .wpforms-form :is(.wpforms-field-checkbox, .wpforms-field-radio).wpforms-field li input::after { content: none; } .mm-formulaire .wpforms-container .wpforms-form .wpforms-field-label-inline { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .625rem 1rem; min-height: 2.75rem; font: 400 1rem/1.3 var(--mm-sans); letter-spacing: 0; text-transform: none; color: var(--mm-body); background: var(--mm-fond-element); border: 1px solid var(--mm-filet-champ); border-radius: var(--mm-rayon); transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .mm-formulaire .wpforms-container .wpforms-form li:hover > .wpforms-field-label-inline { border-color: var(--mm-ink); } .mm-formulaire .wpforms-container .wpforms-form li > input:checked + .wpforms-field-label-inline { background: var(--mm-ink); border-color: var(--mm-ink); color: var(--mm-clair); } .mm-formulaire .wpforms-container .wpforms-form li > input:checked + .wpforms-field-label-inline::before { content: ""; width: .375rem; height: .7rem; margin: -.125rem .125rem 0 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } .mm-formulaire .wpforms-container .wpforms-form li > input:focus-visible + .wpforms-field-label-inline { outline: 2px solid var(--mm-action); outline-offset: 2px; } .mm-formulaire .wpforms-container .wpforms-form :is(input, select, textarea)[aria-invalid="true"], .mm-formulaire .wpforms-container .wpforms-form .wpforms-error:not(label) { border-color: var(--mm-action-fort); } .mm-formulaire .wpforms-container .wpforms-form label.wpforms-error, .mm-formulaire .wpforms-container .wpforms-form em.wpforms-error { display: block; color: var(--mm-action-fort); text-transform: none; letter-spacing: 0; font: 400 .875rem/1.4 var(--mm-sans); margin-top: var(--mm-1); } .mm-formulaire .wpforms-container .wpforms-form .wpforms-submit-container { padding: var(--mm-1) 0 0; margin: 0; } .mm-formulaire .wpforms-container .wpforms-form :is(button[type="submit"], input[type="submit"]) { display: inline-block; width: auto; height: auto; background: var(--mm-action); color: var(--mm-ink); font: 600 .9375rem/1 var(--mm-sans); letter-spacing: .06em; text-transform: uppercase; padding: 1.125rem 2.5rem; border: 0; border-radius: var(--mm-rayon); cursor: pointer; box-shadow: none; transition: background 160ms ease; } .mm-formulaire .wpforms-container .wpforms-form :is(button[type="submit"], input[type="submit"]):hover { background: var(--mm-action-fort); } @media (max-width: 34rem) { .mm-formulaire .wpforms-container .wpforms-form :is(button[type="submit"], input[type="submit"]) { width: 100%; } } /* ------------------------------------------------------------------------- Tarifs et tableaux -- « sans bordure verticale, filets horizontaux, prix en Cormorant SC » (6) ------------------------------------------------------------------------- */ /* Un tableau large ne se comprime pas : il defile dans son propre cadre, sinon c'est la PAGE qui defile lateralement, et tout le reste part avec elle. */ .mm-table-scroll { overflow-x: auto; margin: var(--mm-4) 0; } /* CE QU'UN CADRE CONTIENT NE POUSSE PAS CONTRE SES BORDS. Regle de CONTENANT, pas d'adjacence : tout ce qu'on pose dans `.mm-tableau` renonce a ses marges exterieures -- c'est deja le patron de `.mm-combo > *`. La regle a ete posee quand `.mm-tableau` peignait encore un fond et une bordure ; depuis le passage au modele Lagree, c'est la TABLE qui porte l'objet, et la regle sert desormais a empecher un decalage entre le bloc et sa table plutot qu'un vide dans un cadre. Elle reste necessaire. MESURE DU 11/09/2026, avec les DEUX feuilles servies : `.mm-table-scroll` porte `margin: var(--mm-4)`, soit 32 px, et il est NICHE dans le cadre -- d'ou 33 px de vide en haut ET en bas, a l'interieur. C'est le vide que Monsieur signalait EN HAUT du cadre et qu'aucune mesure ne reproduisait : les apercus rendaient sans le theme parent (quete UN-APERCU-DE-MESURE-DOIT-PORTER-TOUTES-LES-FEUILLE). Sa marge n'est PAS retiree a la source : hors d'un cadre -- dans un article, ou `functions.php` enveloppe tout `` du site -- elle est legitime et separe le tableau du texte. */ .mm-tableau > * { margin: 0; } /* LE `margin-bottom` D'UN TABLEAU SE REMET A ZERO ICI, SUR L'ELEMENT, et jamais sur `.mm-tableau table` : GeneratePress pose `table { margin: 0 0 1.5em }` dans `assets/css/main.min.css` -- releve sur la feuille SERVIE le 11/09/2026, ou la regle apparait deux fois. Dans un cadre qui porte un fond et une bordure, ces 1.5em deviennent 24 px de vide sous la derniere rangee, A L'INTERIEUR du cadre : le tableau cesse de remplir son cadre et prend l'air d'un tableur collé dans la page. Vise sur un voisin (`.mm-tableau table`), la remise a zero n'aurait couvert que ce cadre-la, et le defaut serait revenu sous le premier tableau pose ailleurs -- c'est exactement la maniere dont l'espace sous les titres a du etre corrige trois fois avant de l'etre par role (DEC-149-453). L'espace AUTOUR d'un tableau appartient a son conteneur, jamais a lui. */ table { width: 100%; border-collapse: collapse; margin: 0; } th, td { text-align: left; padding: var(--mm-2) var(--mm-2) var(--mm-2) 0; border-bottom: 1px solid var(--mm-rule); border-left: 0; border-right: 0; } th { font: 600 .8125rem/1.2 var(--mm-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mm-muted); } td.mm-prix, .mm-prix { font: 300 1.5rem/1.2 var(--mm-serif); color: var(--mm-ink); white-space: nowrap; } /* ------------------------------------------------------------------------- La grille des tarifs -- une carte de menu, les prestations en colonnes (11/09/2026, run 431) ------------------------------------------------------------------------- Douze tableaux a deux colonnes se lisaient comme une grille d'administration (Monsieur, 08/09/2026 : « vraiment laide »). La page rend desormais UNE CARTE DE MENU, comme au restaurant : un seul cadre blanc chaud a filet, sans rayon (charte §6), dans lequel les neuf prestations coulent en colonnes CSS -- 1 -> 2 -> 3 a 34 / 62 rem (charte §11.4), chacune a sa hauteur, les colonnes s'equilibrent d'elles-memes, sans JavaScript. Chaque prestation : un titre, un sous-titre par groupe, et une ligne par formule -- le libelle a gauche, le PRIX a droite en Cormorant SC, la mention sous le prix (le total domine, l'unitaire se lit a cote : Baymard 2023). Regard de Monsieur du 11/09/2026 12h28 sur trois formes servies : les cartes en grille reguliere (« tres esthetique », mais des hauteurs trop inegales), les cartes emboitees en colonnes, et la carte de menu -- retenue a 12h33. Aucune formule mise en avant : sans releve de ventes, ce serait une fausse preuve sociale. */ .mm-tarifs-grilles { columns: 1; column-gap: var(--mm-8); background: var(--mm-fond-element); border: 1px solid var(--mm-rule); border-radius: 0; padding: var(--mm-6) var(--mm-6) 0; } /* Trois colonnes seulement quand chacune garde de quoi ecrire une formule anglaise sur une ligne (« Package of 12 sessions ») : a 62 rem la colonne utile tombait sous 15 rem et les libelles se cassaient (bug-hunt F2, 11/09/2026, mesure a 1024 px). */ @media (min-width: 34rem) { .mm-tarifs-grilles { columns: 2; } } @media (min-width: 70rem) { .mm-tarifs-grilles { columns: 3; } } /* Sous 46 rem la carte garde sa forme mais rend ses marges a la ligne : 3 rem de chaque cote, c'etait un quart de l'ecran a 390 px (charte §11.4, bug-hunt F2). */ @media (max-width: 45.999rem) { .mm-tarifs-grilles { padding: var(--mm-4) var(--mm-3) 0; } } /* L'espace au-dessus de la carte est une propriete de la carte posee, pas de son voisin (regle generale, 11/09/2026) -- sans effet tant que la carte ouvre la section (le sommaire du matin a ete retire a 16h43), la regle tient si un bloc revient au-dessus. */ .mm-tarifs-grilles:not(:first-child) { margin-top: var(--mm-4); } /* Une prestation ne se coupe jamais entre deux colonnes, et chacune porte son espace en dessous. Le bas de la carte est donc DELEGUE a la derniere prestation de la colonne la plus haute -- la carte ne pose que ses trois autres cotes. Mesure du 11/09/2026 (audit Itachi) : avec un padding bas sur la carte, le bas valait le double du haut ; et un `:last-child` a zero ne tient pas, les colonnes se reequilibrent et la plus haute finit sur une autre prestation que la derniere. */ /* LA COUPURE ENTRE DEUX PRESTATIONS SE VOIT (Monsieur, 11/09/2026 17h05-17h07, sur trois essais servis : filet d'encre sous le titre d'abord retenu, puis « finalement B » -- le BANDEAU CREME : le nom de la prestation en petites capitales espacees de la signature Cormorant SC, sur un aplat creme qui coupe la colonne de bord a bord) ; et chaque prestation laisse sous sa derniere ligne une respiration d'une section et demie (« une marge sous le dernier element d'une section pour marquer encore plus la distance »). L'espace appartient a la prestation posee, jamais a sa voisine. */ .mm-tarifs { break-inside: avoid; padding: 0 0 calc(var(--mm-8) + var(--mm-4)); } .mm-tarifs[id] { scroll-margin-top: var(--mm-8); } .mm-tarifs h2 { --mm-compense: 0; /* police ou graisse non mesurée : aucun décalage deviné (run 442) */ font: 600 1.05rem/1.3 var(--mm-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--mm-ink); background: var(--mm-fond-section); padding: var(--mm-2) var(--mm-3); margin: 0 calc(-1 * var(--mm-3)); } .mm-tarifs h2 a { color: inherit; text-decoration: none; } .mm-tarifs h2 a:hover, .mm-tarifs h2 a:focus-visible { color: var(--mm-action-fort); text-decoration: underline; text-underline-offset: .25em; } /* Le sous-titre de groupe porte son propre espace au-dessus, qu'il suive le titre ou une liste de formules (mesure du 11/09/2026 : « Deux zones » collait a « 12 seances ») -- regle sur l'element pose, jamais sur son voisin. */ .mm-tarifs h3 { font: 600 .75rem/1.2 var(--mm-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mm-muted); margin: var(--mm-4) 0 0; } .mm-tarifs__lignes { margin: var(--mm-3) 0 0; } .mm-tarifs__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mm-2); padding: var(--mm-2) 0; border-bottom: 1px solid var(--mm-rule-soft); } .mm-tarifs__lignes > .mm-tarifs__ligne:last-child { border-bottom: 0; padding-bottom: 0; } .mm-tarifs__formule { font: 400 1rem/1.4 var(--mm-sans); color: var(--mm-body); margin: 0; } .mm-tarifs__ligne dd { margin: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .mm-tarifs__mention { font-size: .8125rem; line-height: 1.3; color: var(--mm-muted); } /* ------------------------------------------------------------------------- Articles lies -- poses par le theme en pied d'article ------------------------------------------------------------------------- */ .mm-lies { padding-block: var(--mm-respiration); padding-inline: clamp(1.25rem, 6vw, 7rem); background: var(--mm-surface); } .mm-lies-titre { margin-bottom: var(--mm-8); } .mm-lies-grille { display: grid; gap: var(--mm-3); grid-template-columns: 1fr; max-width: var(--mm-large); margin-inline: auto; } @media (min-width: 34rem) { .mm-lies-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 62rem) { .mm-lies-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Une carte d'article lie est une carte (6) : fond blanc chaud, filet, sans rayon, image 4:3, et AUCUN bouton orange. */ .mm-lies-carte { /* Pas de `height: 100%` : dans un flux flexible, une hauteur explicite se resout contre un conteneur de hauteur automatique, donc elle ne vaut rien -- et elle ANNULE l'etirement qui alignait les cartes d'une meme rangee. Mesure du 24/08 : la premiere rangee de soins rendait trois cartes de trois hauteurs. L'etirement par defaut suffit, et il aligne. */ display: flex; flex-direction: column; min-width: 0; background: var(--mm-ground); border: 1px solid var(--mm-rule); text-decoration: none; transition: border-color 160ms ease; } .mm-lies-carte:hover, .mm-lies-carte:focus-visible { border-color: var(--mm-ink); } .mm-lies-vignette, .mm-lies-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mm-surface); } .mm-lies-vignette img, .mm-lies-image img { width: 100%; height: 100%; object-fit: cover; } .mm-lies-rubrique { display: block; font: 600 .8125rem/1.2 var(--mm-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mm-muted); padding: var(--mm-4) var(--mm-4) 0; } .mm-lies-carte-titre { margin: var(--mm-1) 0 0; padding: 0 var(--mm-4); } .mm-lies-extrait { color: var(--mm-muted); font-size: .9375rem; margin: var(--mm-1) 0 0; padding: 0 var(--mm-4); } /* Le « lire la suite » reprend le lien discret de la charte, sans etre un lien lui-meme : la carte entiere l'est deja. */ .mm-lies-suite { display: inline-block; margin: auto var(--mm-4) var(--mm-4); padding-top: var(--mm-3); font: 600 .8125rem/1 var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mm-ink); border-bottom: 1px solid var(--mm-action); padding-bottom: 3px; align-self: flex-start; } /* La signature d'auteur des articles vivait ici (`.mm-signature-*`) : elle est devenue la fiche d'auteur du bas de l'article, dans feuille_article_mm.py (05/10/2026, run 617). Le premier `.mm-signature` de ce bloc était entièrement recouvert par celui de la ligne d'auteur des pages composées, plus bas : il est retiré avec elle. */ /* ------------------------------------------------------------------------- Hero avec image -- le voile n'a de sens que sur une photo ------------------------------------------------------------------------- */ /* `.mm-hero` porte deja le degrade : il ne se justifie QUE sur une image, ou il assure le contraste du texte clair (opacites mesurees plus haut). Un hero sans photo n'a rien a voiler -- il se pose sur le creme et rend son texte a l'encre. */ .mm-hero--image { color: var(--mm-surface); } .mm-hero:not(.mm-hero--image) { color: var(--mm-body); } .mm-hero:not(.mm-hero--image)::before { background: none; } .mm-hero:not(.mm-hero--image) h1 { color: var(--mm-ink); } .mm-hero:not(.mm-hero--image) p { color: var(--mm-body); } .mm-hero:not(.mm-hero--image) .mm-surtitre { color: var(--mm-muted); opacity: 1; } /* ------------------------------------------------------------------------- LE GABARIT « PAGE DE SOIN » -- six composants, sept pages Ils sont ecrits une fois et servent les sept soins, puis les declinaisons locales a venir. Aucune couleur en dur : tout passe par les jetons de la charte, sans quoi un changement de palette laisserait des ilots derriere lui. ------------------------------------------------------------------------- */ /* Le fil d'Ariane. Discret par construction : il sert a se situer et a revenir, jamais a attirer. La page courante n'est pas un lien -- on y est deja. */ .mm-ariane { margin: 0 0 var(--mm-3); } .mm-ariane p { margin: 0; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mm-muted); /* UNE ligne, sur toutes les pages (Monsieur, 14/09/2026). Dans un hero, la mesure des paragraphes (en `ch`) bornait le fil a 252 px et le cassait en deux lignes. S'il manque de place au telephone, c'est la page courante qui s'abrege, jamais le chemin. */ max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mm-ariane a { color: inherit; text-decoration: none; } .mm-ariane a:hover, .mm-ariane a:focus-visible { color: var(--mm-action-fort); text-decoration: underline; text-underline-offset: .25em; } .mm-ariane__sep { margin-inline: .5em; opacity: .55; } /* Le deroule d'une seance : une FRISE, et non une liste numerotee. Un filet continu relie les etapes, chaque numero se pose dessus dans une pastille. La difference est mince a decrire et nette a l'oeil : une liste s'enumere, une frise se PARCOURT -- on voit d'un coup ou l'on entre et ou l'on sort. Le filet s'arrete a la derniere pastille, sinon il pend. LA PASTILLE EST PLEINE (Monsieur, 15/09/2026 : « je pense à la façon dont on montre la prise en charge sur les pages de kiné chez Perinea »). Le modèle Perinea (`liste-etapes`) : un numéro dans un disque plein, un filet qui relie les disques, verticalement sur téléphone, horizontalement sur écran large. Repris ici en jetons de la charte : disque brun, chiffre clair -- l'orange reste au bouton. */ .mm-deroule { list-style: none; counter-reset: etape; padding: 0; margin: var(--mm-4) 0 0; max-width: var(--mm-mesure); position: relative; } .mm-deroule li { counter-increment: etape; position: relative; margin: 0; padding: .45rem 0 var(--mm-4) 3.75rem; min-height: 2.75rem; } .mm-deroule li:last-child { padding-bottom: 0; } .mm-deroule li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mm-body); color: var(--mm-clair); font: 600 1.0625rem/1 var(--mm-sans); } /* Le filet part SOUS chaque disque et descend jusqu'au suivant ; le dernier n'en porte pas. */ .mm-deroule li:not(:last-child)::after { content: ""; position: absolute; left: 1.375rem; top: 2.75rem; bottom: 0; width: 1px; background: var(--mm-rule); } /* SUR ÉCRAN LARGE, LES ÉTAPES SE POSENT CÔTE À CÔTE (Monsieur, 14/09/2026 : « pas d'usage de la largeur sur desktop »). Disque au-dessus, texte dessous, filet horizontal du disque jusqu'à la colonne voisine. Le filet ne traverse jamais une fin de rangée : deux colonnes jusqu'à 64 rem, quatre au-delà, et le compte de colonnes est écrit pour que la dernière de chaque rangée se désigne (`nth-child`) -- une grille `auto-fill` ne le permettrait pas. Écrite APRÈS la frise : à sélectivité égale, la dernière règle l'emporte. */ @media (min-width: 52rem) { .mm-deroule { max-width: none; display: grid; gap: var(--mm-6) var(--mm-4); grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-deroule li { padding: calc(2.75rem + var(--mm-2)) var(--mm-2) 0 0; min-height: 0; } .mm-deroule li:not(:last-child)::after { left: calc(2.75rem + var(--mm-1)); right: calc(-1 * var(--mm-4) + var(--mm-1)); top: 1.375rem; bottom: auto; width: auto; height: 1px; } .mm-deroule li:nth-child(2n)::after { display: none; } } @media (min-width: 64rem) { .mm-deroule { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mm-deroule li:nth-child(2n)::after { display: block; } .mm-deroule li:nth-child(4n)::after, .mm-deroule li:last-child::after { display: none; } /* LE NOMBRE D'ÉTAPES DÉCIDE DES COLONNES (15/09/2026). À quatre colonnes, cinq étapes en laissaient UNE seule sur la seconde rangée -- cinq soins sur sept. Cinq étapes tiennent sur une rangée, six se rangent trois par trois ; au-delà, quatre par rangée. Le filet suit : il s'arrête à la dernière colonne de chaque rangée. */ .mm-deroule:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .mm-deroule:has(> li:nth-child(5):last-child) li:nth-child(4n)::after { display: block; } .mm-deroule:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mm-deroule:has(> li:nth-child(6):last-child) li:nth-child(n)::after { display: block; } .mm-deroule:has(> li:nth-child(6):last-child) li:nth-child(3n)::after { display: none; } .mm-deroule li:last-child::after { display: none; } } /* Les zones du corps. Une liste, pas une grille : leur nombre varie d'un soin a l'autre, et une grille a colonnes fixes rouvrirait le trou de la derniere rangee que la charte a deja tranche ailleurs. */ .mm-zones { /* Une grille n'est pas un texte : la mesure de ligne (68ch) qui borne les listes ordinaires la ratatinait sur la moitie gauche de la section, et le reste faisait un vide sans raison (capture du 24/08/2026). */ max-width: none; list-style: none; padding: 0; margin: var(--mm-3) 0 0; display: grid; gap: var(--mm-2); grid-template-columns: 1fr; } @media (min-width: 34rem) { .mm-zones { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } /* Une zone SEULE ne s'etire pas sur toute la largeur : etiree, elle se lit comme un titre rate plutot que comme une vignette (Vital Dome, dont la seule zone est « le corps entier »). */ .mm-zones:has(> :only-child) { grid-template-columns: minmax(0, 22rem); } } /* Une zone se lisait comme une case vide : un cadre fin, un nom en petit, et beaucoup d'air autour de rien. Elle porte maintenant un FILET D'ACCENT en tete -- le meme geste que les cartes d'objectif, pour que les deux series se repondent -- un nom plus present, et une note qui garde sa place meme absente : sans quoi les vignettes n'avaient pas la meme hauteur et la rangee se lisait de travers. */ /* EN CARTES (Monsieur, 14/09/2026 : « un peu bas de gamme, je préférerais des cards, un peu comme chez Perinea »). Un simple filet orange au-dessus d'un nom se lisait comme une case vide. La carte est BLANCHE, cadrée d'un filet et d'une ombre douce : la même section est tantôt douce, tantôt claire, et le blanc tient sur les deux fonds -- le cadre la détache là où la teinte seule ne suffirait pas (règle du fond de section). Le filet d'accent reste, en tête de carte. */ .mm-zone { padding: var(--mm-3); background: var(--mm-fond-element); border: 1px solid var(--mm-rule-soft); border-top: 2px solid var(--mm-action); border-radius: var(--mm-rayon); box-shadow: 0 1px 3px var(--mm-rule); display: flex; flex-direction: column; gap: .4rem; } .mm-zone__nom { font-family: var(--mm-serif-titre); font-size: 1.25rem; line-height: 1.2; color: var(--mm-ink); } .mm-zone__note { color: var(--mm-muted); font-size: .875rem; min-height: 1.2em; } /* « Ce que ce soin vise » : une carte par objectif, chacune ouverte par un court filet d'accent. C'est la seule couleur de la section -- la charte n'en veut qu'une par ecran, et l'orange reste au bouton de rendez-vous. */ .mm-vise { max-width: none; list-style: none; padding: 0; margin: var(--mm-3) 0 0; display: grid; gap: var(--mm-3); grid-template-columns: 1fr; } @media (min-width: 40rem) { .mm-vise { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mm-vise li { position: relative; padding: var(--mm-3) var(--mm-3) var(--mm-3) var(--mm-4); background: var(--mm-fond-element); border-radius: var(--mm-rayon); border-left: 2px solid var(--mm-action); color: var(--mm-body); } .mm-vise li span { display: block; max-width: 38ch; } /* Une liste de faits en COLONNE : les faits de l'accueil s'alignent en ligne, ceux d'une page de soin sont des phrases entieres et ne le peuvent pas. */ .mm-faits--colonne { display: block; list-style: none; padding: 0; margin: var(--mm-2) 0 0; } .mm-faits--colonne li { position: relative; padding: 0 0 var(--mm-2) var(--mm-3); text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--mm-body); } .mm-faits--colonne li::before { /* Un TIRET SIMPLE, jamais un cadratin : la regle vaut pour tout ce que le site rend visible, y compris une puce dessinee par le CSS. */ content: "-"; position: absolute; left: 0; color: var(--mm-action); } /* L'encadre des contre-indications. Il ne CRIE pas -- pas de rouge, pas de pictogramme d'alarme : sur une page de sante, l'alarmisme se retourne contre la confiance qu'on cherche. Il se distingue autrement : un fond plus soutenu, un filet lateral, et un titre qui annonce ce qu'on va lire. Le lecteur voit qu'il change de registre AVANT d'entrer dans la liste. */ /* LA DISPOSITION (Monsieur, 15/09/2026 : « améliorer la disposition et la lisibilité »). Sur écran large, deux parts : à gauche le ressenti, en corps de chapeau, et la mention médicale sous lui ; à droite l'encadré, dont la liste se lit d'une seule colonne. La veille, l'encadré étiré sur toute la largeur coupait sa liste en deux colonnes inégales et laissait la mention flotter dessous, en petit corps. */ .mm-precautions { display: grid; gap: var(--mm-4); grid-template-columns: 1fr; } @media (min-width: 52rem) { .mm-precautions { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mm-8); align-items: start; } } .mm-precautions__ressenti { margin: 0; font-size: 1.1875rem; line-height: 1.6; color: var(--mm-body); } .mm-precautions__texte .mm-alerte__mention { margin-top: var(--mm-3); padding-top: var(--mm-3); border-top: 1px solid var(--mm-rule); font-size: .875rem; line-height: 1.55; } .mm-alerte { margin: 0; padding: var(--mm-4); background: var(--mm-fond-element); border-left: 3px solid var(--mm-action-fort); border-radius: 0 var(--mm-rayon) var(--mm-rayon) 0; box-shadow: 0 1px 3px var(--mm-rule); max-width: none; } /* Le titre de l'encadré se lit comme un titre, non comme une étiquette : les petites capitales espacées de 13 px annonçaient mal une liste de santé. */ .mm-alerte__titre { margin: 0 0 var(--mm-2); font: 600 1.0625rem/1.4 var(--mm-sans); color: var(--mm-ink); } .mm-alerte ul { list-style: none; padding: 0; margin: 0; max-width: none; } /* Une ligne par situation, séparées d'un filet : on repère d'un coup d'œil si la sienne y est. */ .mm-alerte li { position: relative; margin: 0; padding: .7rem 0 .7rem var(--mm-3); color: var(--mm-body); font-size: 1rem; line-height: 1.5; border-top: 1px solid var(--mm-rule-soft); } .mm-alerte li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--mm-action-fort); } /* La variante DOUCE porte les situations qui demandent un avis ou une adaptation, non une exclusion. Meme forme, filet plus discret : la difference de regime se voit sans qu'on ait besoin de la lire. */ .mm-alerte--douce { border-left-color: var(--mm-rule); margin-top: var(--mm-3); } .mm-alerte__mention { margin: var(--mm-2) 0 0; font-size: .8125rem; color: var(--mm-muted); } /* LES SOINS COMBINES. Chaque association est une carte : les deux soins en tete, la raison dessous. Le « + » est decoratif et masque aux lecteurs d'ecran -- il separe deux noms, il ne se prononce pas. */ .mm-combos { list-style: none; padding: 0; margin: var(--mm-3) 0 0; max-width: none; display: grid; gap: var(--mm-3); grid-template-columns: 1fr; } @media (min-width: 42rem) { .mm-combos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mm-combo { padding: var(--mm-3); background: var(--mm-fond-element); border: 1px solid var(--mm-rule-soft); border-radius: var(--mm-rayon); } .mm-combo > * { margin: 0; } /* EN SANS-SERIF (Monsieur, 14/09/2026 : « la typo est difficile à lire »). Le serif de titre à 18 px, maigre, se lisait mal sur deux noms séparés d'un « + ». Même registre que les questions de la FAQ : une étiquette d'interface, pas un titre de lecture. */ .mm-combo__titre { font: 600 1.0625rem/1.4 var(--mm-sans); color: var(--mm-ink); } .mm-combo__titre span { color: var(--mm-action); margin-inline: .15em; } .mm-combo__titre a { color: inherit; text-decoration: none; } .mm-combo__titre a:hover, .mm-combo__titre a:focus-visible { color: var(--mm-action-fort); text-decoration: underline; text-underline-offset: .25em; } .mm-combo__pourquoi { margin-top: var(--mm-1); color: var(--mm-body); font-size: .9375rem; } .mm-combo__quand { margin-top: var(--mm-1); color: var(--mm-muted); font-size: .8125rem; } /* Le tableau de comparaison -- la section que 153 clics reclamaient. IL DEFILE DANS SON PROPRE CADRE, jamais en poussant la page : le menu du 24/08/2026 avait deborde le document a 583 px pour une fenetre de 390, et c'est un defaut qu'on ne refait pas. */ /* LA STRUCTURE VIENT DU MODELE VALIDE PAR MONSIEUR, LES COULEURS DE LA CHARTE. Le modele est celui du comparatif Lagree servi en production (`.mm-lagree-comparatif`, page /nos-soins/methode-lagree/) : Monsieur l'avait demande, valide, et a demande le 11/09/2026 qu'on le reprenne ici. Repris : l'en-tete a fond PLEIN avec texte clair, sa premiere colonne plus sombre encore, le sous-titre de colonne en italique, les filets horizontaux SEULS (aucune bordure exterieure), l'ombre portee douce, le rayon, la respiration large, et le survol qui eclaircit la ligne. NON repris, et c'est une consigne explicite de Monsieur -- « on ne garde que la structure et non les couleurs en dur » : le modele de production ecrit ses teintes en dur (#8c7560, #6b5a47, #faf5ec, #ebe3d3), et ce taupe est precisement celui que la charte du site neuf a abandonne. Aucune valeur de couleur n'est ecrite ici (UX-C4). L'OBJET, C'EST LA TABLE, plus le cadre : `.mm-tableau` ne peint plus rien et ne sert que le defilement -- le defaut du 24/08/2026 (le menu qui debordait la page a 583 px pour une fenetre de 390) reste ferme, le defilement demeure DANS le bloc. */ .mm-tableau { overflow-x: auto; margin: var(--mm-3) 0 0; } .mm-tableau table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: .9375rem; background: var(--mm-fond-element); border-radius: var(--mm-rayon); box-shadow: 0 1px 3px var(--mm-rule); overflow: hidden; } /* LES FILETS (Monsieur, 14/09/2026 : « améliore les traits du tableau »). En `--mm-rule-soft`, les séparations de lignes disparaissaient presque sur le blanc, et les colonnes n'en avaient aucune : les valeurs flottaient. Les lignes passent au filet franc, et un filet vertical doux sépare les colonnes du corps -- la charte réserve précisément les filets verticaux aux tableaux. */ .mm-tableau th, .mm-tableau td { text-align: left; padding: var(--mm-3) calc(var(--mm-3) + var(--mm-1)); border-bottom: 1px solid var(--mm-rule); vertical-align: top; } .mm-tableau tbody td { border-left: 1px solid var(--mm-rule-soft); } .mm-tableau tbody tr:last-child th, .mm-tableau tbody tr:last-child td { border-bottom: 0; } .mm-tableau thead th { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-clair); font-weight: 600; background: var(--mm-body); border-bottom: 0; } .mm-tableau thead th:first-child { background: var(--mm-ink); width: 26%; } /* SOUS-TITRE DE COLONNE -- ecrit mais INERTE tant qu'aucun balisage ne le porte. Le modele Lagree s'en sert pour situer chaque colonne (« au centre Riviera ») ; le tableau des soins n'en a pas l'usage aujourd'hui. Arbitrage de Monsieur, 11/09/2026 : « conserve au cas ou mais n'active qu'au besoin ». Une regle sans element a viser ne coute rien et ne rend rien -- elle attend son premier tableau a colonnes situees. */ .mm-tableau thead th .mm-sous { display: block; font-size: .8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; font-style: italic; opacity: .85; margin-top: .15rem; } /* LA PREMIERE COLONNE SE DETACHE PAR SON POIDS, PAS PAR UN FOND -- et c'est une regle generale, pas un reglage de ce tableau. Monsieur, 11/09/2026 : « veille a ce que les couleurs ne soient pas identiques entre des elements d'une section et le fond de cette meme section (c'est le concept de contraste et de lisibilite) ». Il l'a vu sur ce tableau, et la mesure lui donne raison au point pres : la colonne rendait rgb(247,241,237) et la section aussi -- exactement la meme valeur. POURQUOI AUCUNE TEINTE FIXE NE MARCHE ICI : le meme tableau est pose tantot sur `--mm-ground`, tantot sur `--mm-surface` (sections douces). Une couleur ecrite se confondra donc toujours avec l'un des deux fonds. Le contraste est porte par le blanc de la table contre le fond de la section ; a l'interieur, la colonne se distingue par son poids et son encre. Le modele Lagree pouvait teinter la sienne parce que sa page, sa table et sa colonne faisaient TROIS valeurs distinctes -- ce n'est pas notre cas. */ .mm-tableau tbody th { color: var(--mm-ink); font-weight: 600; } /* Le survol designe la ligne lue -- repris du modele, en jetons de la charte. */ .mm-tableau tbody tr { transition: background .18s ease; } /* Le survol prend le fond de la SECTION : il se distingue de la table quel que soit son fond. */ .mm-tableau tbody tr:hover td, .mm-tableau tbody tr:hover th { background: var(--mm-fond-section); } .mm-tableau tbody th a { color: inherit; text-decoration: none; } .mm-tableau tbody th a:hover, .mm-tableau tbody th a:focus-visible { color: var(--mm-action-fort); text-decoration: underline; text-underline-offset: .25em; } /* SOUS 46 REM, LE TABLEAU SE REPLIE -- il ne defile plus (charte 11.4). MESURE DU 01/09/2026, sur les huit pages qui le portent : a 390 px la table composait 576 px dans un cadre de 341. Le cadre contenait bien son defilement -- la page ne debordait pas -- mais 235 px restaient hors champ, soit les trois colonnes de droite ENTIEREMENT invisibles a l'ouverture, derriere un geste lateral que rien n'annonce. Sur la section que 153 clics reclamaient, c'est le contenu utile qui etait cache : seule la colonne du nom se voyait. LA FORME REPLIEE : une ligne devient un bloc, le nom du soin lui sert d'en-tete, et chaque cellule s'ouvre en DEUX COLONNES -- l'intitule a gauche, la valeur a droite. L'intitule n'est pas recopie dans le HTML : il est REATTRIBUE depuis `data-col`, que le producteur unique pose a partir de COLONNES_COMPARAISON. Une seule source pour l'en-tete et pour l'etiquette. La ligne d'en-tete, elle, ne s'affiche plus mais reste dans le document pour les lecteurs d'ecran : masquee a l'oeil, jamais retiree de l'arbre. AUCUN JAVASCRIPT -- comme les accordeons de la FAQ plus bas. */ @media (max-width: 45.999rem) { .mm-tableau { overflow-x: visible; } .mm-tableau table { min-width: 0; } .mm-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mm-tableau tbody tr { display: block; border-bottom: 1px solid var(--mm-rule); } .mm-tableau tbody tr:last-child { border-bottom: 0; } .mm-tableau tbody th, .mm-tableau tbody td { display: block; border-bottom: 0; } .mm-tableau tbody th { padding: var(--mm-3) var(--mm-3) var(--mm-1); } .mm-tableau tbody td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--mm-2); align-items: baseline; padding: var(--mm-1) var(--mm-3); } .mm-tableau tbody tr td:last-child { padding-bottom: var(--mm-3); } /* L'etiquette prend la meme voix que l'en-tete d'ecran : c'est le meme mot, il ne doit pas changer d'allure en changeant de place. */ .mm-tableau tbody td::before { content: attr(data-col); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-muted); font-weight: 600; line-height: 1.5; } } /* Les questions frequentes. Le resultat enrichi FAQ n'existe plus cote Google : cette section ne se justifie que par le service rendu au lecteur, et elle est donc ecrite pour etre LUE -- questions en clair, reponses ouvertes, aucun pliage qui obligerait a cliquer pour savoir. */ .mm-questions { margin: var(--mm-3) 0 0; max-width: var(--mm-mesure); } /* DEUX COLONNES DE QUESTIONS SUR ÉCRAN LARGE (Monsieur, 14/09/2026 : « le bloc FAQ utilise mal l'espace libre à droite »). Chaque question garde sa hauteur propre (`align-items: start`) : en ouvrir une ne déforme pas sa voisine. Les filets passent en tête de chaque question, pour que les deux colonnes se lisent sur les mêmes lignes. */ @media (min-width: 52rem) { .mm-questions { max-width: none; display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--mm-6); } .mm-questions .mm-question, .mm-questions .mm-question:last-child { border-bottom: 0; border-top: 1px solid var(--mm-rule); } } /* ACCORDEONS NATIFS (`
`). Aucun JavaScript : le pli est une fonction du navigateur, il repond au clavier, et la recherche dans la page l'ouvre toute seule. Le marqueur par defaut est retire au profit d'un chevron dessine en bordures -- un caractere aurait dependu d'une police, un SVG aurait ete un fichier de plus. */ .mm-question { border-bottom: 1px solid var(--mm-rule); } .mm-question:last-child { border-bottom: 0; } .mm-question > summary { list-style: none; cursor: pointer; position: relative; padding: var(--mm-3) var(--mm-4) var(--mm-3) 0; /* EN SANS-SERIF, contre l'harmonisation faite une heure plus tot (Monsieur, 24/08/2026 : « une typo facilement lisible »). Ce n'est pas une exception de confort : une question de FAQ n'est pas un titre qu'on lit, c'est une COMMANDE qu'on clique. Elle appartient a l'interface, comme les liens du menu et les libelles de bouton -- tous en sans dans cette feuille. Le serif reste aux titres de lecture. */ font: 600 1.0625rem/1.4 var(--mm-sans); color: var(--mm-ink); /* Cible tactile : la regle UX-E3 du catalogue maison demande 44 px au moins. */ min-height: 2.75rem; display: flex; align-items: center; } .mm-question > summary::-webkit-details-marker { display: none; } .mm-question > summary::after { content: ""; position: absolute; right: .35rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.35rem; border-right: 1.5px solid var(--mm-action-fort); border-bottom: 1.5px solid var(--mm-action-fort); transform: rotate(45deg); transition: transform .25s ease; } .mm-question[open] > summary::after { transform: rotate(-135deg); margin-top: -.1rem; } .mm-question > summary:hover, .mm-question > summary:focus-visible { color: var(--mm-action-fort); } .mm-question__corps { padding: 0 var(--mm-4) var(--mm-3) 0; } .mm-question__corps p { margin: 0; color: var(--mm-body); } /* La LETTRINE a ete posee puis RETIREE le 24/08/2026. Elle est conservee en memoire ici, sans regle : `::first-letter` detachait le « L » du mot suivant selon la police, et le lecteur y voyait une coquille avant d'y voir un ornement. Un signe qui fait douter de l'orthographe ne se rattrape pas par un reglage -- il se retire. */ /* La signature. Exigee par le socle (« qui, comment, pourquoi ») et par le regime YMYL ; aucune page de soin ne la portait avant le 24/08/2026. Elle se pose en bas, en petit : c'est une preuve, pas une revendication. */ /* LA PAROLE DE LA FONDATRICE. Une citation, pas un paragraphe : elle se pose au milieu, en serif un peu plus grand, avec le portrait au-dessus et le nom dessous. Aucun guillemet dessine -- la balise `blockquote` et la composition suffisent a dire qu'on change de voix, et un gros guillemet decoratif ferait temoignage de site marchand. C'est le seul endroit de la page ou la maison parle a la premiere personne. */ .mm-parole { --mm-compense: 0; /* centré : le tracé des titres ne se décale pas (run 442) */ margin: 0; max-width: 44rem; margin-inline: auto; text-align: center; } /* LE PORTRAIT SE CENTRE PAR SES MARGES : `img` est un bloc dans cette feuille, et un bloc ignore `text-align` -- il restait calé à gauche d'une citation centrée (Monsieur, 14/09/2026 : « centre l'image au-dessus au moins »). */ .mm-parole__portrait { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; object-position: center 22%; margin: 0 auto var(--mm-3); } /* LE GUILLEMET REVIENT (Monsieur, 14/09/2026 : « accentuer l'aspect citation »). Il avait été écarté le 24/08 sur mon seul raisonnement (« ferait témoignage de site marchand ») ; le verdict rendu sur la chose prime. Un seul « en serif d'accent, grand et léger, au-dessus du texte, plus un corps de citation agrandi : la voix change avant qu'on lise. */ .mm-parole blockquote { margin: 0; padding: 0; border: 0; } .mm-parole blockquote::before { content: "\201C"; display: block; height: 3.5rem; margin-bottom: var(--mm-1); font: 300 8rem/1 var(--mm-serif); color: var(--mm-action); } .mm-parole blockquote p { margin: 0; max-width: none; font-family: var(--mm-serif-titre); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); line-height: 1.4; color: var(--mm-ink); font-style: italic; } .mm-parole figcaption { margin-top: var(--mm-3); display: flex; flex-direction: column; gap: .1rem; } .mm-parole__nom { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-ink); font-weight: 600; } .mm-parole__role { font-size: .8125rem; color: var(--mm-muted); } /* L'ANCIENNE LIGNE D'AUTEUR -- TRANSITOIRE. Celle des pages servies avant le run 711 : au pied de la dernière section, sous un filet fin, nom en gras (variante A du 13/09/2026). Ces règles restent tant que des pages servies la portent (DEC-153-52 : la feuille part avant les pages) ; la base `.mm-signature` (corps, centrage) sert aussi la bande. À retirer -- le filet haut et `.mm-signature strong` -- une fois les pages reversées (constat à reprendre de l'audit #391). La date ne se coupe jamais : sur téléphone, l'épreuve la rendait en « Mis à / jour le ». */ .mm-signature { max-width: 44rem; margin: var(--mm-6) auto 0; padding-top: var(--mm-3); border-top: 1px solid var(--mm-rule-soft); font-size: .8125rem; line-height: 1.5; color: var(--mm-muted); text-align: center; } .mm-signature strong { color: var(--mm-ink); font-weight: 600; } .mm-signature__date { white-space: nowrap; } /* LA LIGNE D'AUTEUR EN BANDE, COMME LA MENTION DE PERINEA (Monsieur, #3 et #5 du 12/10/2026, run 711, sur planche). Dernier bloc du contenu (`poser_signature`), sous le bandeau d'appel : au fond du pied, dont elle devient la tête ; un filet la sépare des colonnes du pied. Texte clair à 72 %, comme chez Perinea (contraste calculé ≈ 8:1). « Par l'équipe de Maison Minceur » mène à la page À propos. Les règles `.mm-signature` d'au-dessus RESTENT (DEC-153-52) : la feuille part avant les pages, et l'ancienne ligne, encore servie dans la dernière section, doit garder son rendu jusqu'à ce que les pages suivent. La bande les surcharge par la classe qu'elle seule porte. Sur téléphone, la date passe à la ligne et le séparateur disparaît : il restait seul en fin de première ligne (planche du 12/10/2026). */ .mm-signature.mm-signature--bande { max-width: none; margin: 0; padding: 1rem 1.5rem; border-top: 0; border-bottom: 1px solid color-mix(in srgb, var(--mm-surface) 12%, transparent); background: var(--mm-ink); color: color-mix(in srgb, var(--mm-surface) 72%, transparent); line-height: 1.6; } .mm-signature--bande a, .mm-signature--bande a:visited { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .mm-signature--bande a:hover, .mm-signature--bande a:focus-visible { color: var(--mm-surface); } .mm-signature--bande a:focus-visible { outline: 2px solid var(--mm-surface); outline-offset: 2px; } @media (max-width: 45.999rem) { .mm-signature--bande .mm-signature__sep { display: none; } .mm-signature--bande .mm-signature__date { display: block; } } /* ------------------------------------------------------------------------- SECTIONS « CENTREES » -- UN SEUL BORD, CELUI DE L'ACCUEIL (14/09/2026) La variante centrait le titre, bornait le texte a 68ch au milieu d'une colonne de 54 rem, et laissait listes et grilles a leur propre largeur : mesure sur les pages de soin, de centre et Lagree a 1440 px, QUATRE bords gauches (86, 288 et 448 px, plus le titre centre), et un bord qui sautait d'une section a l'autre sur la page Lagree. Monsieur : « tres peu esthetique », « approximatif, le rendu fait amateur » ; option A retenue, le modele de l'accueil valide. Elle revient sur l'arbitrage du 24/08/2026 (« les sections mono colonne centrees »), a sa demande. La classe reste emise par les producteurs (41 appels) : c'est la REGLE qui change, en un seul lieu. Le conteneur est celui de toutes les sections, le titre part du bord, le texte garde sa mesure de lecture a partir du meme bord, grilles et tableaux prennent la largeur entiere. Seul le bandeau d'appel final, hors de cette variante, reste centre, comme sur l'accueil. ------------------------------------------------------------------------- */ .mm-section--centree > .mm-large, .mm-section--centree > .mm-etroit { max-width: var(--mm-large); margin-inline: auto; } .mm-section--centree .mm-entete { max-width: none; margin-inline: 0; text-align: left; } .mm-section--centree .mm-entete p { margin-inline: 0; text-align: left; } .mm-section--centree .mm-entete > :last-child { margin-bottom: 0; } /* EXCEPTION, meme soir (Monsieur, 14/09/2026, 21h28) : l'EN-TETE d'une page interieure -- premiere section, texte seul (hubs, Lagree, tarifs, a propos, contact, rendez-vous) -- reste CENTRE. Le bord unique vaut pour le corps des pages ; le hero annonce. Les heros sur photographie (accueil, centres) et l'en-tete a portrait des soins gardent leur bord gauche. Un seul axe dans l'en-tete : fil, titre, chapeau et mention centres ensemble. */ .mm-section--centree:first-child .mm-entete { --mm-compense: 0; /* centré : le tracé des titres ne se décale pas (run 442) */ max-width: var(--mm-mesure); margin-inline: auto; text-align: center; } .mm-section--centree:first-child .mm-entete p, .mm-section--centree:first-child > .mm-large > .mm-mention { margin-inline: auto; text-align: center; } /* SECTION DE TEXTE SEUL SUR L'AXE (Monsieur, 15/09/2026) -- voir `section(au_centre=)`. Même geste que l'en-tête d'une page intérieure : un seul axe, en-tête ET paragraphes centrés dans la mesure de lecture. Essayée la veille en deux colonnes, la définition d'un soin a été préférée centrée. Écrite APRÈS la variante « bord unique » qu'elle contredit. */ .mm-section--au-centre .mm-entete { --mm-compense: 0; /* centré : le tracé des titres ne se décale pas (run 442) */ max-width: var(--mm-mesure); margin-inline: auto; text-align: center; } .mm-section--au-centre .mm-entete p, .mm-section--au-centre > .mm-large > p { margin-inline: auto; text-align: center; } /* Un formulaire posé sur l'axe se centre avec son en-tête (Monsieur, 15/09/2026, page Lagree) ; ses champs et libellés restent alignés à gauche à l'intérieur. */ .mm-section--au-centre > .mm-large > .mm-formulaire { margin-inline: auto; } /* La liste des lieux posée sur l'axe se centre aussi, sa colonne de lecture gardée (12/10/2026) : `.entry-content ul` (0,1,1) remet sa marge gauche à zéro et l'emporte sur `.mm-lieux` (0,1,0), qui la laissait au bord sous un en-tête centré. */ .mm-section--au-centre > .mm-large > .mm-lieux { margin-inline: auto; } /* LES REPÈRES PRATIQUES -- une carte, une ligne par repère (page Lagree, 15/09/2026). La valeur est à l'encre et en corps de lecture, l'intitulé en titre de carte à sa gauche ; au téléphone, les deux s'empilent. Même carte que les vignettes (fond d'élément, filet, ombre, filet d'accent en tête) : la section alterne ses fonds, le blanc tient sur les deux. */ .mm-reperes { max-width: 48rem; margin-inline: auto; padding: var(--mm-1) var(--mm-4); background: var(--mm-fond-element); border: 1px solid var(--mm-rule-soft); border-top: 2px solid var(--mm-action); border-radius: var(--mm-rayon); box-shadow: 0 1px 3px var(--mm-rule); } .mm-reperes__ligne { display: grid; grid-template-columns: 1fr; gap: .25rem; padding: var(--mm-2) 0; border-bottom: 1px solid var(--mm-rule-soft); } .mm-reperes__ligne:last-child { border-bottom: 0; } @media (min-width: 34rem) { .mm-reperes__ligne { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--mm-3); align-items: baseline; } } .mm-reperes dt { font-family: var(--mm-serif-titre); font-size: 1.25rem; line-height: 1.2; color: var(--mm-ink); } .mm-reperes dd { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--mm-ink); } /* ------------------------------------------------------------------------- LA TEXTURE -- de la matiere, pas du motif Monsieur, 24/08/2026 : « ajouter de la texture ou de la profondeur au background pour rendre le site plus premium ». Le piege etait le motif : un dessin repetitif date une page et la fait ressembler a un gabarit achete. Ce qui donne l'impression de matiere est plus discret -- un GRAIN, comme celui d'un papier. On ne le voit pas ; on voit que le fond n'est pas plat. C'est un bruit fractal calcule par le navigateur (feTurbulence), inscrit dans la feuille : AUCUNE requete reseau, aucune image a heberger, et il ne pixellise a aucun agrandissement. Il est pose a 0,055 d'opacite -- assez pour rompre l'aplat, trop peu pour se remarquer. Il ne prend AUCUN clic (`pointer-events: none`) et se retire pour qui demande moins d'animations, par coherence avec le reste de la feuille. Il ne se pose que sur les sections DOUCES : sur toutes, il ferait un fond de plus, c'est-a-dire de nouveau un aplat -- l'alternance disparaitrait, et avec elle le rythme qu'on cherche. */ .mm-section--douce { position: relative; } .mm-section--douce::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.055; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj48ZmlsdGVyIGlkPSJnIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTgwIiBoZWlnaHQ9IjE4MCIgZmlsdGVyPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjUiLz48L3N2Zz4="); background-size: 180px 180px; } .mm-section--douce > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .mm-section--douce::after { display: none; } } /* ------------------------------------------------------------------------- Accessibilite et mouvement ------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--mm-action); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; animation-duration: 0ms !important; } } /* ------------------------------------------------------------------------- Le tracé des titres part du bord -- compensation de l'approche gauche (approche_polices_mm.py, table approches_polices_mm.json) ------------------------------------------------------------------------- */ .mm-approche-n49 { --mm-approche: 0.049em; } .mm-approche-n42 { --mm-approche: 0.042em; } .mm-approche-n5 { --mm-approche: 0.005em; } .mm-approche-n4 { --mm-approche: 0.004em; } .mm-approche-n2 { --mm-approche: 0.002em; } .mm-approche-n1 { --mm-approche: 0.001em; } .mm-approche-4 { --mm-approche: -0.004em; } .mm-approche-14 { --mm-approche: -0.014em; } .mm-approche-15 { --mm-approche: -0.015em; } .mm-approche-18 { --mm-approche: -0.018em; } .mm-approche-19 { --mm-approche: -0.019em; } .mm-approche-24 { --mm-approche: -0.024em; } .mm-approche-25 { --mm-approche: -0.025em; } .mm-approche-26 { --mm-approche: -0.026em; } .mm-approche-28 { --mm-approche: -0.028em; } .mm-approche-34 { --mm-approche: -0.034em; } .mm-approche-35 { --mm-approche: -0.035em; } .mm-approche-38 { --mm-approche: -0.038em; } .mm-approche-39 { --mm-approche: -0.039em; } .mm-approche-40 { --mm-approche: -0.040em; } .mm-approche-41 { --mm-approche: -0.041em; } .mm-approche-42 { --mm-approche: -0.042em; } .mm-approche-44 { --mm-approche: -0.044em; } .mm-approche-45 { --mm-approche: -0.045em; } .mm-approche-48 { --mm-approche: -0.048em; } .mm-approche-49 { --mm-approche: -0.049em; } .mm-approche-51 { --mm-approche: -0.051em; } .mm-approche-52 { --mm-approche: -0.052em; } .mm-approche-58 { --mm-approche: -0.058em; } .mm-approche-61 { --mm-approche: -0.061em; } .mm-approche-66 { --mm-approche: -0.066em; } .mm-approche-68 { --mm-approche: -0.068em; } .mm-approche-74 { --mm-approche: -0.074em; } .mm-approche-79 { --mm-approche: -0.079em; } .mm-approche-80 { --mm-approche: -0.080em; } .mm-approche-82 { --mm-approche: -0.082em; } .mm-approche-87 { --mm-approche: -0.087em; } .mm-approche-90 { --mm-approche: -0.090em; } [class*="mm-approche-"] { translate: calc(var(--mm-approche, 0em) * var(--mm-compense, 1)) 0; } /* ========================================================================= PAGE ARTICLE -- trois colonnes au bureau, une colonne et une jauge en dessous (feuille_article_mm.py ; HTML : bloc « Page article » du thème enfant) ========================================================================= */ /* Sous la grille : une colonne CENTRÉE, dans l'ordre du document -- le sommaire replié, l'article, la carte du soin. La colonne droite (les liens utiles) ne s'y montre pas : « beaucoup plus succinct ». Le texte collé à gauche d'un cadre de 1 200 px était le défaut relevé. L'ordre visuel est celui du document : la lecture au clavier suit l'écran. */ .mm-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-4); max-width: 54rem; margin-inline: auto; } .mm-article__centre { min-width: 0; } .mm-contexte { display: none; } /* Hors de la boîte de l'article, sommaire et carte touchaient les bords de l'écran au téléphone (capture 390 du 05/10/2026) : ils prennent la gouttière du texte. */ .mm-article-sommaire, .mm-article-soin { margin-inline: var(--mm-4); } .mm-article-sommaire { margin-top: var(--mm-3); } /* Le texte sur un fond beige, comme le mode lecture d'une liseuse (Monsieur, #11 du 05/10/2026). La boîte de l'article DÉCLARE son fond, et ses éléments lisent `--mm-fond-element` : ils passent en clair au lieu de s'y fondre. L'encadré « Bon à savoir » vient du connecteur, qui peint avec `--alfred-accent` -- le même beige (relevé du servi) : on lui donne le fond des éléments. Posé brut, le fond paraissait « un peu triste », comme une erreur d'affichage (Monsieur, #22) : le cadre prend un filet et une ombre douce, qui le font lire comme une page posée sur le site. Sa marge intérieure est la NÔTRE (et non celle de GeneratePress) : l'image à la une s'y place bord à bord. */ .single-post.separate-containers .inside-article { --mm-fond-section: var(--mm-surface); --mm-fond-element: var(--mm-clair); --alfred-accent: var(--mm-fond-element); --mm-article-marge: var(--mm-3); padding: var(--mm-article-marge); background: var(--mm-fond-section); border: 1px solid var(--mm-rule); border-radius: var(--mm-rayon); box-shadow: 0 1px 2px var(--mm-rule-soft), 0 24px 48px -28px var(--mm-rule); } @media (min-width: 46rem) { .single-post.separate-containers .inside-article { --mm-article-marge: var(--mm-6); } } /* L'en-tête : image, rubrique, titre, date. Le titre d'un article est une PHRASE, pas un nom de page : la taille d'annonce du h1 (44 px au plancher) cassait « Madérothérapie » au milieu du mot à 390 px (relevé du 05/10/2026 ; la coupure vient du `word-wrap` du parent). La taille seule le règle. PAS de césure automatique : essayée le même jour, elle coupait des mots qui tenaient (« mas-sage », « redes-sine », « La-gree ») -- pire que le défaut. */ .mm-article__rubrique { margin: 0 0 var(--mm-2); } .mm-article__rubrique a { text-decoration: none; } .single-post .entry-header .entry-title { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); line-height: 1.12; } .single-post .entry-header .entry-meta { margin-top: var(--mm-2); font-size: .875rem; color: var(--mm-muted); } .single-post .entry-header .entry-meta a { color: inherit; text-decoration: none; } /* L'image à la une OUVRE l'article (Monsieur, #22). Large (16:9 ou plus), elle s'y pose bord à bord, en bandeau 2:1. Sinon elle reste ENTIÈRE, jamais coupée : centrée, hauteur bornée, sur le fond du cadre -- un bandeau ôtait la moitié d'une carte-titre carrée, signature comprise (#41). La forme est décidée par le thème, sur les dimensions de l'image (`mm_article_forme_image`). */ .mm-article__image { margin: 0 0 var(--mm-6); } .mm-article__image--bandeau { margin: calc(-1 * var(--mm-article-marge)) calc(-1 * var(--mm-article-marge)) var(--mm-6); } .mm-article__image--bandeau img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--mm-rayon) var(--mm-rayon) 0 0; } .mm-article__image--entiere img { display: block; width: auto; max-width: 100%; height: auto; max-height: 28rem; margin-inline: auto; border-radius: var(--mm-rayon); } .single-post .entry-content { margin-top: var(--mm-6); } .single-post .entry-content h2[id] { scroll-margin-top: var(--mm-4); } /* Les illustrations du texte, mieux introduites (Monsieur, #22) : un passe-partout clair, de l'air au-dessus et au-dessous, la légende en italique. La vidéo reçoit le même cadre. Une image plus petite que la colonne n'est pas agrandie (elle deviendrait floue). */ .single-post .entry-content :is(.wp-block-image, .wp-block-embed) { margin: var(--mm-6) 0; padding: var(--mm-2); background: var(--mm-fond-element); border: 1px solid var(--mm-rule-soft); border-radius: var(--mm-rayon); } .single-post .entry-content .wp-block-image img { display: block; max-width: 100%; height: auto; margin-inline: auto; } /* L'ancien balisage d'une image alignée (`div.wp-block-image > figure.aligncenter`) passe en `display: table` par la feuille du bloc image : le tableau prend la largeur propre de l'image, 600 px dans un écran de 390 sur l'article 2798 (vérification des 58 articles servis, run 807). En bloc, la figure reste dans sa colonne. */ .single-post .entry-content .wp-block-image :is(.aligncenter, .alignleft, .alignright) { display: block; max-width: 100%; } .single-post .entry-content .wp-block-image :is(.aligncenter, .alignleft, .alignright) > figcaption { display: block; } .single-post .entry-content :is(.wp-block-image, .wp-block-embed) figcaption { margin: var(--mm-2) 0 0; font-size: .875rem; font-style: italic; line-height: 1.4; color: var(--mm-muted); text-align: center; --mm-compense: 0; } /* LA LECTURE LONGUE (Monsieur, #23 du 05/10/2026 : les titres « un peu brouillon », « une mise en page plus propice à la lecture longue », sur écran comme au téléphone). Relevé du servi le même jour sur l'article des machines Lagree : h2 et h3 sans AUCUNE marge -- un h2 tombait sur son h3, un h3 collait au paragraphe suivant -- et des liens sans couleur ni soulignement. Ce que la lecture à l'écran demande, et ce que fait la feuille : - un titre appartient au texte qu'il ANNONCE : beaucoup d'air au-dessus, peu au-dessous ; - deux niveaux de titre se distinguent d'un coup d'œil (taille et air), et deux titres qui se suivent se rapprochent ; - l'interligne s'ouvre un peu pour un texte long (1,7), la mesure reste celle de la charte ; - un lien se voit : encre forte, soulignement fin et brun (l'orange reste à l'action) ; - les listes respirent, leurs puces se taisent. */ .single-post .entry-content { line-height: 1.7; } .single-post .entry-content p { margin: 0 0 var(--mm-3); } .single-post .entry-content h2 { font-size: clamp(1.6rem, 1.35rem + .9vw, 2rem); line-height: 1.2; margin: var(--mm-6) 0 var(--mm-2); } .single-post .entry-content h3 { font-size: clamp(1.25rem, 1.15rem + .35vw, 1.4rem); line-height: 1.3; margin: var(--mm-4) 0 var(--mm-1); } .single-post .entry-content h4 { margin: var(--mm-3) 0 var(--mm-1); } .single-post .entry-content :is(h2, h3, h4) + :is(p, ul, ol) { margin-top: 0; } .single-post .entry-content :is(h2, h3) + :is(h3, h4) { margin-top: var(--mm-2); } .single-post .entry-content > :is(h2, h3, h4):first-child { margin-top: 0; } .single-post .entry-content strong { font-weight: 600; color: var(--mm-ink); } /* Un lien se voit par un soulignement BRUN discret : l'orange reste à l'action -- « dès qu'une couleur d'action apparaît trois fois sur une page, elle ne signale plus rien » (charte §4 ; recommandation validée par Monsieur, #41). */ .single-post .entry-content a:not([class]) { color: var(--mm-ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--mm-muted); text-underline-offset: .2em; } .single-post .entry-content a:not([class]):hover { text-decoration-color: var(--mm-ink); text-decoration-thickness: 2px; } .single-post .entry-content :is(ul, ol) { margin: 0 0 var(--mm-3); } .single-post .entry-content li { margin-bottom: var(--mm-2); padding-left: .25rem; } .single-post .entry-content li::marker { color: var(--mm-muted); } /* Un tableau d'article est le composant tableau du site (`.mm-tableau`, rendu par le thème) : il ne lui faut ici que son air, comme une illustration. */ .single-post .entry-content .mm-tableau { margin: var(--mm-6) 0; } /* WordPress sert la feuille du bloc tableau dès qu'un article en porte un dans sa figure (`.wp-block-table`) : cadre foncé sur chaque cellule, filet de 3 px sous l'en-tête, disposition fixe. Le composant ne règle pas ces côtés-là : 3 tableaux sur 4 rendaient donc autrement que le modèle validé (chasse post-correction du run 617, B2). On les remet à zéro, dans l'article. */ .single-post .entry-content .mm-tableau table { table-layout: auto; } .single-post .entry-content .mm-tableau :is(thead, tfoot) { border: 0; } .single-post .entry-content .mm-tableau :is(th, td) { border-top: 0; border-right: 0; } .single-post .entry-content .mm-tableau thead th { border-left: 0; } .single-post .entry-content .mm-tableau tbody th { border-left: 0; } /* Dans la colonne de lecture, les cellules se resserrent : la respiration du composant est pensée pour la pleine largeur d'une page de soin, et un tableau à quatre colonnes défilait de côté à 1 440 px (relevé du 05/10/2026, article des machines Lagree). */ @media (min-width: 46rem) { .single-post .entry-content .mm-tableau :is(th, td) { padding: var(--mm-2) var(--mm-1) var(--mm-2) var(--mm-2); } .single-post .entry-content .mm-tableau thead th { letter-spacing: .08em; } .single-post .entry-content .mm-tableau table { min-width: 0; } } @media (min-width: 46rem) { .single-post .entry-content h2 { margin-top: var(--mm-8); } .single-post .entry-content h3 { margin-top: var(--mm-6); } } /* Le sommaire. En dessous de la grille : une boîte repliée, « Sommaire » et son signe. */ .mm-article-sommaire__repli { border: 1px solid var(--mm-rule); border-radius: var(--mm-rayon); } .mm-article-sommaire__titre { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: var(--mm-1) var(--mm-3); cursor: pointer; list-style: none; font: 600 .8125rem/1.2 var(--mm-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mm-ink); } .mm-article-sommaire__titre::-webkit-details-marker { display: none; } .mm-article-sommaire__titre::after { content: "+"; font-size: 1.25rem; font-weight: 300; letter-spacing: 0; } .mm-article-sommaire__repli[open] > .mm-article-sommaire__titre::after { content: "\2212"; } .mm-article-sommaire__liste { list-style: none; margin: 0; padding: 0 var(--mm-3) var(--mm-2); max-width: none; } .mm-article-sommaire__liste li { margin: 0; } .mm-article-sommaire__liste a { display: block; padding: var(--mm-1) 0 var(--mm-1) var(--mm-2); border-left: 2px solid transparent; text-decoration: none; font-size: .9375rem; line-height: 1.4; color: var(--mm-muted); } .mm-article-sommaire__liste a:hover { color: var(--mm-ink); } /* La partie en cours : posée par le script de la page (`aria-current`). */ .mm-article-sommaire__liste a[aria-current] { color: var(--mm-ink); border-left-color: var(--mm-action); } /* La carte du soin dont parle l'article : en tête de la colonne droite au bureau (22/10/2026 ; à gauche avant), dans la colonne droite après les articles liés au téléphone. */ .mm-article-soin { background: var(--mm-ground); border: 1px solid var(--mm-rule); } .mm-article-soin__vignette { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mm-surface); } .mm-article-soin__vignette img { width: 100%; height: 100%; object-fit: cover; } .mm-article-soin__corps { padding: var(--mm-3); } .mm-article-soin__corps .mm-surtitre { margin-bottom: var(--mm-1); } .mm-article-soin__nom { margin: 0; max-width: none; font: 500 1.25rem/1.3 var(--mm-serif-titre); color: var(--mm-ink); } .mm-article-soin__nom a { text-decoration: none; } .mm-article-soin__chapeau { margin: var(--mm-1) 0 0; font-size: .9375rem; line-height: 1.5; color: var(--mm-muted); } .mm-article-soin__lien { display: inline-block; margin-top: var(--mm-2); padding-bottom: 3px; font: 600 .8125rem/1 var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--mm-ink); border-bottom: 1px solid var(--mm-action); } /* Sans soin, la carte n'a que ce bouton : elle se masque avec lui au téléphone. */ .mm-article-soin--seul { display: none; } /* Le bouton de la carte ne se montre qu'au bureau : au téléphone, l'appel au bout de l'article porte déjà le seul « Prendre rendez-vous » (charte §6). */ .mm-article-soin__rdv { display: none; margin-top: var(--mm-3); padding-inline: var(--mm-2); font-size: .8125rem; text-align: center; --mm-compense: 0; } /* Les blocs de la colonne droite : liens utiles, derniers articles, catégories. */ .mm-contexte__bloc ul { list-style: none; margin: 0; padding: 0; } .mm-contexte__bloc li { margin: 0; padding: var(--mm-1) 0; border-top: 1px solid var(--mm-rule-soft); } .mm-contexte__bloc a { text-decoration: none; font-size: .9375rem; line-height: 1.4; color: var(--mm-body); } .mm-contexte__bloc a:hover { color: var(--mm-ink); } /* LE BAS DE L'ARTICLE : un seul bandeau, bord à bord (Monsieur, #10 et #22), qui porte d'abord QUI parle -- la marque et sa présentation --, puis la question et le seul bouton orange de l'écran (#25 : un bas de page « trop lourd », des redites ; ordre de How Clients Buy, la confiance avant la demande). Le fond s'étend par une ombre pleine que `clip-path` borne en hauteur : aucune largeur de plus, donc aucun défilement de côté. */ .mm-article-fin { display: grid; gap: var(--mm-6); align-items: center; margin-top: var(--mm-8); padding: var(--mm-8) var(--mm-4); background: var(--mm-surface); box-shadow: 0 0 0 100vmax var(--mm-surface); clip-path: inset(0 -100vmax); } .mm-article-fin__nom { margin: 0 0 var(--mm-2); max-width: none; font: 300 1.75rem/1.1 var(--mm-serif); letter-spacing: .04em; color: var(--mm-ink); } .mm-article-fin__texte { margin: 0; color: var(--mm-body); } .mm-article-fin__rdv { text-align: center; --mm-compense: 0; } .mm-article-fin__rdv p { margin: 0 auto var(--mm-4); max-width: none; font: 300 clamp(1.6rem, 1.3rem + 1vw, 2.25rem)/1.2 var(--mm-serif-titre); color: var(--mm-ink); } @media (min-width: 62rem) { .mm-article-fin { padding-inline: 0; } .mm-article-fin--deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mm-8); } .mm-article-fin--deux .mm-article-fin__rdv { padding-left: var(--mm-8); border-left: 1px solid var(--mm-rule); } } /* Les articles liés suivent le bas de l'article, en large. */ /* Deux bandeaux beiges qui se toucheraient se fondraient en un seul : l'espace les sépare. */ .mm-article-fin + .mm-lies, .mm-article + .mm-lies { margin-top: var(--mm-8); } /* La jauge d'avancement : un trait en haut de l'écran, rempli par le script de la page. Elle passe AU-DESSUS de tout ce qui colle au haut de l'écran : sur l'atelier, le bandeau « ATELIER » (collant, z-index 99999) la masquait entièrement (relevé du 05/10/2026) ; en ligne, la barre d'administration de WordPress (99999) ferait de même pour un connecté. */ .mm-jauge { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000; pointer-events: none; background: var(--mm-rule-soft); } .mm-jauge__barre { height: 100%; background: var(--mm-action); transform: scaleX(0); transform-origin: left center; } /* L'ANCIENNE grille (05/10/2026), gardée tant que son HTML est servi (DEC-153-52) : à retirer en bloc après le dépôt du thème recomposé. Les règles qu'elle portait et dont la page neuve a besoin sont redites dans `_regles_lecture()` (chasse du run 807, B15). */ @media (min-width: 75rem) { .mm-article { max-width: none; align-items: start; gap: var(--mm-6); grid-template-columns: 16rem minmax(0, 1fr) 15rem; grid-template-rows: auto 1fr; } .mm-article-soin { grid-column: 1; grid-row: 1; margin: 0; } .mm-article-soin--seul { display: block; } .mm-article-soin__rdv { display: block; } .mm-article-sommaire { grid-column: 1; grid-row: 2; margin: 0; } .mm-article__centre { grid-column: 2; grid-row: 1 / span 2; } .mm-contexte { grid-column: 3; grid-row: 1 / span 2; } .mm-article-sommaire, .mm-contexte { position: sticky; top: var(--mm-4); max-height: calc(100vh - var(--mm-8)); overflow-y: auto; } .mm-contexte { display: block; } .mm-article-sommaire__repli { border: 0; } .mm-article-sommaire__titre { min-height: 0; padding: 0 0 var(--mm-2); cursor: default; pointer-events: none; } /* Même poids que la règle du signe « − » (qui marquait le repli ouvert), sinon il restait. */ .mm-article-sommaire__repli > .mm-article-sommaire__titre::after, .mm-article-sommaire__repli[open] > .mm-article-sommaire__titre::after { content: none; } .mm-article-sommaire__liste { padding: 0; } } /* ========================================================================= PAGE ARTICLE, recomposée le 22/10/2026 -- la grille de lecture (feuille_article_mm.py ; HTML : `.mm-lecture`, bloc « Page article » du thème enfant) ========================================================================= */ /* Sous la grille : une colonne centrée, dans l'ordre du document -- le sommaire, l'article, l'équipe, « À lire également », précédent et suivant, puis le soin, les liens utiles, les derniers articles et les catégories (Monsieur, #22 de l'accueil du 22/10/2026 : l'ordre au téléphone). */ .mm-lecture { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-4); max-width: 54rem; margin-inline: auto; } /* Un élément de grille ne descend pas sous la largeur de son contenu : la rangée des articles liés, six cartes côte à côte (simulées), élargissait la page de 2 682 px (mesure servie du 22/10/2026, `essai1.txt`). */ .mm-lecture > * { min-width: 0; } .mm-lecture > :is(.mm-equipe, .mm-voisins, .mm-lecture__droite) { margin-inline: var(--mm-4); } /* Le sommaire au téléphone, variante A (Monsieur #30 et #31 du 22/10/2026) : AU REPOS, aucune bande avant l'image -- le sommaire est dans la carte de l'article, sous le titre (`.mm-sommaire-carte`) ; EN LISANT, une barre fine, fixée en haut, nomme la partie en cours. Le script la montre une fois la carte passée et la retire après l'article ; sans script, la carte suffit. La jauge reste la seule ligne de progression (#5) et passe au-dessus de la barre. */ .mm-lecture > .mm-article-sommaire { /* z-index : au niveau du bandeau « ATELIER » (99999, qu'elle couvre en lisant), sous la jauge (100000). */ position: fixed; top: 0; left: 0; right: 0; z-index: 99999; margin: 0; padding-top: 3px; background: var(--mm-ground); border-bottom: 1px solid var(--mm-rule); box-shadow: 0 6px 16px -12px var(--mm-rule); transform: translateY(-100%); visibility: hidden; transition: transform 200ms ease, visibility 200ms; } .mm-lecture > .mm-article-sommaire--visible { transform: none; visibility: visible; } .mm-lecture .mm-article-sommaire__titre > span:first-child { display: none; } .mm-lecture .mm-article-sommaire__titre::before { content: ""; flex: none; width: 1.125rem; height: .75rem; border-top: 1.5px solid var(--mm-ink); border-bottom: 1.5px solid var(--mm-ink); background: linear-gradient(var(--mm-ink), var(--mm-ink)) center / 100% 1.5px no-repeat; } @media (prefers-reduced-motion: reduce) { .mm-lecture > .mm-article-sommaire { transition: none; } } /* La carte du sommaire, dans l'article sous le titre (téléphone seulement). */ .mm-sommaire-carte { margin: var(--mm-3) 0 0; background: var(--mm-fond-element); border: 1px solid var(--mm-rule); } .mm-sommaire-carte__titre { display: flex; align-items: center; gap: var(--mm-1); min-height: 48px; padding: 0 var(--mm-2); cursor: pointer; list-style: none; } .mm-sommaire-carte__titre::-webkit-details-marker { display: none; } .mm-sommaire-carte__titre .mm-surtitre { margin: 0; color: var(--mm-ink); } .mm-sommaire-carte__compte { flex: 1; font-size: .875rem; color: var(--mm-muted); } .mm-sommaire-carte__titre::after { content: "+"; font: 300 1.25rem/1 var(--mm-sans); color: var(--mm-ink); } .mm-sommaire-carte[open] > .mm-sommaire-carte__titre::after { content: "‘2"; } .mm-sommaire-carte__liste { margin: 0; padding: 0 var(--mm-2) var(--mm-2) var(--mm-4); font-size: .9375rem; line-height: 1.5; } .mm-sommaire-carte__liste li { margin: 0 0 var(--mm-1); } .single-post .entry-content .mm-sommaire-carte__liste a, .mm-sommaire-carte__liste a { color: var(--mm-body); text-decoration: none; } .mm-lecture .mm-article-sommaire__repli { border: 0; } .mm-lecture .mm-article-sommaire__titre { gap: var(--mm-2); padding-inline: var(--mm-4); } .mm-article-sommaire__courante { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 .875rem/1.3 var(--mm-sans); letter-spacing: 0; text-transform: none; color: var(--mm-muted); } .mm-article-sommaire__etat { margin: 0; padding: 0 var(--mm-4) var(--mm-1); font-size: .8125rem; line-height: 1.4; color: var(--mm-muted); } .mm-article-sommaire__etat:empty { display: none; } .mm-lecture .mm-article-sommaire__liste { max-height: 60vh; overflow-y: auto; padding: 0 var(--mm-4) var(--mm-2); } /* Une partie lue se coche (module 1) : un trait discret à droite du lien. */ .mm-lecture .mm-article-sommaire__liste a { position: relative; padding-right: var(--mm-3); } .mm-lecture .mm-article-sommaire__liste a[data-lue]::after { content: ""; position: absolute; right: .25rem; top: 50%; width: .35rem; height: .65rem; border: solid var(--mm-muted); border-width: 0 2px 2px 0; transform: translateY(-60%) rotate(45deg); } /* Une ancre suivie s'arrête sous la barre collante, pas dessous. */ .mm-lecture .entry-content h2[id] { scroll-margin-top: var(--mm-8); } /* Le temps de lecture et le partage, sous le titre et sa date (modules 4 et 5). */ .mm-article-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mm-1) var(--mm-2); margin-top: var(--mm-2); font-size: .875rem; color: var(--mm-muted); } .mm-partage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-1); } .mm-partage__bouton { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mm-rule); border-radius: 50%; background: var(--mm-fond-element); color: var(--mm-ink); cursor: pointer; text-decoration: none; } .mm-partage__bouton[hidden] { display: none; } .mm-partage__bouton svg { width: 18px; height: 18px; } /* GeneratePress peint tout bouton en sombre au survol, au focus et à l'appui (piège P6 du run 807). */ .mm-partage .mm-partage__bouton:is(:hover, :focus, :active) { background-color: var(--mm-fond-element); color: var(--mm-ink); border-color: var(--mm-ink); } .mm-partage .mm-partage__bouton:focus-visible { outline: 2px solid var(--mm-action); outline-offset: 2px; } .mm-partage__statut { font-size: .8125rem; } /* Le fil d'Ariane au-dessus du titre, à la place de la rubrique seule (module 3). */ .mm-article__ariane { margin: 0 0 var(--mm-2); } /* La suite à mi-lecture (module 8) : une carte posée entre deux parties. */ .single-post .entry-content .mm-suite { margin: var(--mm-6) 0; } .mm-suite__lien { display: flex; align-items: center; gap: var(--mm-2); padding: var(--mm-2); background: var(--mm-fond-element); border: 1px solid var(--mm-rule); text-decoration: none; color: var(--mm-ink); transition: border-color 160ms ease; } .mm-suite__lien:hover, .mm-suite__lien:focus-visible { border-color: var(--mm-ink); } .mm-suite__vignette { flex: none; width: 6rem; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mm-fond-section); } .mm-suite__vignette img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; } .mm-suite__corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; min-width: 0; } .mm-suite__corps .mm-surtitre { margin: 0; } .mm-suite__titre { font: 500 1.25rem/1.25 var(--mm-serif-titre); color: var(--mm-ink); } /* Les questions de l'article en accordéon (module 9) : une question par ligne, son signe à droite. */ .single-post .entry-content .mm-faq { margin: var(--mm-3) 0 var(--mm-6); border-top: 1px solid var(--mm-rule); } .mm-faq__item { border-bottom: 1px solid var(--mm-rule); } .mm-faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--mm-2); min-height: 44px; padding: var(--mm-2) 0; cursor: pointer; list-style: none; } .mm-faq__question::-webkit-details-marker { display: none; } .mm-faq__question::after { content: "+"; flex: none; font: 300 1.5rem/1 var(--mm-sans); color: var(--mm-ink); } .mm-faq__item[open] > .mm-faq__question::after { content: "\2212"; } .single-post .entry-content .mm-faq__question h3 { margin: 0; font-size: 1.125rem; line-height: 1.35; } .mm-faq__texte { font-weight: 600; color: var(--mm-ink); } .mm-faq__reponse { padding: 0 0 var(--mm-2); } .single-post .entry-content .mm-faq__reponse > :last-child { margin-bottom: 0; } /* L'appel au rendez-vous, au bout de l'article (module 10) : la question et le seul bouton orange. */ .mm-article-appel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-3); justify-items: center; text-align: center; --mm-compense: 0; margin-top: var(--mm-6); padding: var(--mm-4) var(--mm-3); background: var(--mm-fond-element); border: 1px solid var(--mm-rule); } .mm-article-appel p { margin: 0; max-width: none; font: 300 clamp(1.5rem, 1.25rem + 1vw, 2rem)/1.2 var(--mm-serif-titre); color: var(--mm-ink); } @media (min-width: 46rem) { .mm-article-appel { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; align-items: center; text-align: left; } } /* L'encart de l'équipe : qui écrit, sa présentation, la page À propos. */ .mm-equipe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-2); padding: var(--mm-3); background: var(--mm-surface); border: 1px solid var(--mm-rule); } .mm-equipe__tete { display: flex; align-items: center; gap: var(--mm-2); } .mm-equipe__tete .mm-surtitre { margin: 0; } .mm-equipe__monogramme { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mm-ground); border: 1px solid var(--mm-rule); font: 400 1.25rem/1 var(--mm-serif); color: var(--mm-ink); } .mm-equipe__nom { margin: .125rem 0 0; max-width: none; font: 400 1.375rem/1.1 var(--mm-serif); color: var(--mm-ink); } .mm-equipe__texte { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--mm-body); } .mm-equipe__lien { justify-self: start; padding-bottom: 3px; font: 600 .8125rem/1 var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--mm-ink); border-bottom: 1px solid var(--mm-action); } /* Précédent et suivant : deux cartes de texte, la flèche dans leur surtitre. */ .mm-voisins { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-2); } .mm-voisins__lien { display: flex; flex-direction: column; gap: var(--mm-1); padding: var(--mm-3); background: var(--mm-ground); border: 1px solid var(--mm-rule); text-decoration: none; color: var(--mm-ink); transition: border-color 160ms ease; } .mm-voisins__lien:hover, .mm-voisins__lien:focus-visible { border-color: var(--mm-ink); } .mm-voisins__lien .mm-surtitre { margin: 0; } .mm-voisins__lien--precedent .mm-surtitre::before { content: "\2190\00a0"; } .mm-voisins__lien--suivant .mm-surtitre::after { content: "\00a0\2192"; } .mm-voisins__titre { font: 500 1.25rem/1.3 var(--mm-serif-titre); } @media (min-width: 46rem) { .mm-voisins { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-voisins__lien--suivant { grid-column: 2; text-align: right; } } /* La colonne droite : le soin, les liens utiles, les derniers articles, les catégories. Toute grille de la page DÉCLARE sa colonne (`minmax(0, 1fr)`) : laissée implicite, elle s'étire à la largeur du contenu -- 3 002 px pour cette colonne au relevé du 22/10/2026 (consigné dans l'audit du run 807, `audit-run807.md`). */ .mm-lecture__droite { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-4); align-content: start; } .mm-lecture__droite .mm-article-soin { margin: 0; } .mm-contexte__date { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--mm-muted); } .mm-contexte__rubriques li { justify-content: space-between; align-items: baseline; gap: var(--mm-1); } .mm-contexte__nombre { font-size: .875rem; color: var(--mm-muted); } /* Au téléphone, les catégories se posent en pastilles (maquette validée, #6) ; au bureau, en liste avec leur nombre d'articles (plus bas, dans la grille). */ .mm-contexte__rubriques { display: flex; flex-wrap: wrap; gap: var(--mm-1); } .mm-contexte__bloc .mm-contexte__rubriques li { padding: 0; border: 0; } .mm-contexte__bloc .mm-contexte__rubriques a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--mm-2); border: 1px solid var(--mm-rule); background: var(--mm-fond-element); } .mm-contexte__rubriques .mm-contexte__nombre { display: none; } /* « À lire également » (Monsieur, #27 de l'accueil et #5 de la séance du 22/10/2026) : sous les colonnes, en pleine largeur et sans cassure avec le fond -- le fond s'étend par une ombre pleine que `clip-path` borne en hauteur, comme le bandeau d'hier : aucune largeur de plus, donc aucun défilement de côté. Une rangée qui défile : trois cartes au bureau, deux sur tablette, une et le bord de la suivante au téléphone. */ .mm-lecture > .mm-lies { --mm-fond-section: var(--mm-surface); --mm-fond-element: var(--mm-clair); margin-top: var(--mm-6); padding: var(--mm-6) 0; background: var(--mm-surface); box-shadow: 0 0 0 100vmax var(--mm-surface); clip-path: inset(0 -100vmax); } .mm-lies__entete { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mm-2); margin: 0 var(--mm-4) var(--mm-4); } .mm-lecture .mm-lies-titre { margin: 0; } .mm-lies__fleches { display: flex; gap: var(--mm-1); } .mm-lies__fleche { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mm-ink); border-radius: 50%; background: transparent; color: var(--mm-ink); font: 400 1.5rem/1 var(--mm-sans); cursor: pointer; } .mm-lies__fleche[hidden] { display: none; } .mm-lies .mm-lies__fleche:is(:hover, :focus, :active) { background-color: transparent; color: var(--mm-ink); } .mm-lies .mm-lies__fleche:focus-visible { outline: 2px solid var(--mm-action); outline-offset: 2px; } .mm-lies__rangee { list-style: none; margin: 0; padding: 2px var(--mm-4); display: flex; gap: var(--mm-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; /* L'aimantation ignore la marge intérieure : elle doit la connaître (leçon du journal, 05/10/2026). */ scroll-padding-inline: var(--mm-4); } .mm-lies__rangee::-webkit-scrollbar { display: none; } /* `min-width: 0` : sans lui, une carte ne descend pas sous la largeur propre de son image (768 px). */ .mm-lies__item { flex: 0 0 85%; min-width: 0; display: flex; margin: 0; scroll-snap-align: start; } .mm-lies__item > .mm-carte { flex: 1; min-width: 0; } .mm-lies .mm-carte--article .mm-carte__corps { padding: var(--mm-3); gap: var(--mm-1); } .mm-lies .mm-carte--article .mm-carte__corps :is(h2, h3) { margin: 0; font-size: 1.125rem; line-height: 1.35; } @media (min-width: 34rem) { .mm-lies__item { flex-basis: calc((100% - var(--mm-3)) / 2); } } /* La grille, au bureau : à gauche le sommaire collant, puis l'équipe au bout de la lecture ; au centre l'article, puis précédent et suivant ; à droite la colonne, qui défile avec la page ; dessous, sur toute la largeur, « À lire également ». Le sommaire colle dans sa rangée, qui finit au-dessus de l'équipe. */ @media (min-width: 75rem) { .mm-lecture { max-width: none; align-items: start; gap: var(--mm-6); grid-template-columns: 16rem minmax(0, 1fr) 15rem; /* L'équipe tient la colonne gauche SOUS le sommaire, et son bas s'aligne sur le pied de l'article : l'article couvre les deux premières rangées, l'équipe prend la seconde, le sommaire colle dans la première (Monsieur, #36 du 22/10/2026 : « il s'arrête au même niveau que le pied du corps central de l'article »). */ grid-template-rows: 1fr auto auto auto; grid-template-areas: "sommaire centre droite" "equipe centre droite" ". voisins droite" "lies lies lies"; } /* La barre s'étire sur la rangée du sommaire et c'est son repli qui colle, DANS la barre : un élément collant posé directement dans la grille glisse sur toute la hauteur de la grille, et le sommaire recouvrait l'équipe en fin de lecture (Monsieur, #40 et #41 du 22/10/2026). Ni hauteur bornée ni défilement sur la barre (ceux de l'ancienne grille, gardés plus haut) : le repli collerait dans la barre, qui défile avec la page. */ .mm-lecture > .mm-article-sommaire { grid-area: sommaire; align-self: stretch; position: static; max-height: none; overflow: visible; z-index: auto; background: none; border: 0; transition: none; left: auto; right: auto; padding-top: 0; box-shadow: none; transform: none; visibility: visible; } .mm-lecture .mm-article-sommaire__repli { position: sticky; top: var(--mm-4); max-height: calc(100vh - var(--mm-8)); overflow-y: auto; } .mm-lecture .mm-article-sommaire__titre > span:first-child { display: inline; } .mm-lecture .mm-article-sommaire__titre::before { content: none; } .mm-sommaire-carte { display: none; } .mm-lecture .mm-article-sommaire__titre { min-height: 0; padding: 0 0 var(--mm-2); cursor: default; pointer-events: none; } .mm-lecture .mm-article-sommaire__repli > .mm-article-sommaire__titre::after, .mm-lecture .mm-article-sommaire__repli[open] > .mm-article-sommaire__titre::after { content: none; } .mm-lecture .mm-article-soin--seul, .mm-lecture .mm-article-soin__rdv { display: block; } .mm-article-sommaire__courante { display: none; } .mm-lecture .mm-article-sommaire__etat { padding: 0 0 var(--mm-2); } .mm-lecture .mm-article-sommaire__liste { max-height: none; overflow: visible; padding: 0; } .mm-lecture .entry-content h2[id] { scroll-margin-top: var(--mm-4); } /* Un article sans parties n'a pas de sommaire : l'équipe prend la tête de la colonne gauche, au lieu d'une colonne vide sur toute la hauteur de l'article (chasse A du run 807, R5 : 836, 2262). */ .mm-lecture--sans-sommaire { grid-template-areas: "equipe centre droite" ". centre droite" ". voisins droite" "lies lies lies"; } .mm-lecture__centre { grid-area: centre; } .mm-lecture > .mm-equipe { grid-area: equipe; margin: 0; } .mm-lecture > .mm-voisins { grid-area: voisins; margin: 0; } .mm-lecture > .mm-lecture__droite { grid-area: droite; margin: 0; } .mm-lecture > .mm-lies { grid-area: lies; margin-top: var(--mm-2); } .mm-lies__entete { margin-inline: 0; } .mm-lies__rangee { padding-inline: 0; scroll-padding-inline: 0; } .mm-lies__item { flex-basis: calc((100% - 2 * var(--mm-3)) / 3); } .mm-contexte__rubriques { display: block; } .mm-contexte__bloc .mm-contexte__rubriques li { display: flex; padding: var(--mm-1) 0; border-top: 1px solid var(--mm-rule-soft); } .mm-contexte__bloc .mm-contexte__rubriques a { display: inline; min-height: 0; padding: 0; border: 0; background: none; } .mm-contexte__rubriques .mm-contexte__nombre { display: inline; } } /* ------------------------------------------------------------------------- Liste du journal -- /blog/, rubriques, recherche (feuille_journal_mm.py, 05/10/2026) ------------------------------------------------------------------------- */ /* La recherche, dans l'en-tête centré, sous le chapeau. Le bouton reste BRUN : chercher n'est pas convertir (charte §10.1). */ .mm-journal__recherche { display: flex; gap: var(--mm-1); max-width: 34rem; margin: var(--mm-4) auto 0; } .mm-journal__recherche input[type="search"] { flex: 1; min-width: 0; min-height: 48px; padding: .75rem 1rem; font: 400 1rem/1.5 var(--mm-sans); color: var(--mm-body); /* Le fond d'un élément se dérive de celui de sa section (Monsieur, 15/09/2026) : dans l'en-tête doux, c'est le blanc. */ background: var(--mm-fond-element); border: 1px solid var(--mm-rule); border-radius: var(--mm-rayon); } .mm-journal__recherche input[type="search"]:focus-visible { outline: none; border-color: var(--mm-action); } .mm-journal__recherche button { flex: 0 0 48px; min-height: 48px; border: 0; border-radius: var(--mm-rayon); background: var(--mm-ink); color: var(--mm-clair); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .mm-journal__recherche svg { width: 20px; height: 20px; } /* Les rubriques : une rangée qui DÉFILE au téléphone, avec un repère visible (fondu et flèche). */ .mm-journal__rubriques { position: relative; margin: 0 calc(-1 * clamp(1.25rem, 6vw, 7rem)) var(--mm-4); } .mm-journal__rubriques ul { list-style: none; margin: 0; display: flex; gap: var(--mm-1); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 2px clamp(1.25rem, 6vw, 7rem); /* L'aimantation colle la première pastille au BORD du cadre de défilement, marge intérieure ignorée (mesure du 05/10/2026 : pastille à x=0 malgré 23 px de marge ; retour de Monsieur, message 14) : elle doit connaître la marge. */ scroll-padding-inline: clamp(1.25rem, 6vw, 7rem); } .mm-journal__rubriques ul::-webkit-scrollbar { display: none; } .mm-journal__rubriques li { flex: 0 0 auto; scroll-snap-align: start; } .mm-journal__rubriques a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; font: 600 .75rem/1 var(--mm-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mm-ink); text-decoration: none; white-space: nowrap; background: var(--mm-fond-element); border: 1px solid var(--mm-rule); border-radius: var(--mm-rayon); } .mm-journal__rubriques a:hover, .mm-journal__rubriques a:focus-visible { border-color: var(--mm-ink); } .mm-journal__rubriques a[aria-current="page"] { background: var(--mm-ink); color: var(--mm-clair); border-color: var(--mm-ink); } .mm-journal__rubriques::after { content: "›"; position: absolute; right: 0; top: 2px; bottom: 2px; width: 3.5rem; display: flex; align-items: center; justify-content: flex-end; padding-right: .75rem; font: 400 1.75rem/1 var(--mm-sans); color: var(--mm-ink); pointer-events: none; background: linear-gradient(to right, transparent, var(--mm-fond-section) 55%); } /* Les flèches, posées par le script : une de chaque côté où l'on PEUT défiler (Monsieur, 05/10/2026, message 23 : « si on peut défiler à droite, il faut une flèche à droite ; si on peut défiler à gauche, une flèche à gauche »). Elles font défiler au toucher ; leur cible fait 56 px de large. Le repère CSS ci-dessus ne sert plus qu'à une page sans script. */ .mm-journal__fleche { position: absolute; top: 2px; bottom: 2px; z-index: 1; width: 3.5rem; border: 0; padding: 0 .75rem; display: flex; align-items: center; cursor: pointer; color: var(--mm-ink); font: 400 1.75rem/1 var(--mm-sans); } .mm-journal__fleche[hidden] { display: none; } /* Au survol, au focus et à l'appui, GeneratePress peint tout bouton en sombre et son texte en blanc (`button:focus`, plus spécifique qu'une classe seule) : la flèche devenait un bloc noir au glyphe invisible après un toucher (capture du 05/10/2026). On garde sa couleur à chaque état. */ .mm-journal__rubriques .mm-journal__fleche:is(:hover, :focus, :active) { background-color: transparent; color: var(--mm-ink); } .mm-journal__rubriques .mm-journal__fleche:focus-visible { outline: 2px solid var(--mm-action); outline-offset: -2px; } .mm-journal__fleche--gauche { left: 0; justify-content: flex-start; background: linear-gradient(to left, transparent, var(--mm-fond-section) 55%); } .mm-journal__fleche--droite { right: 0; justify-content: flex-end; background: linear-gradient(to right, transparent, var(--mm-fond-section) 55%); } .mm-journal__rubriques--js::after { display: none; } @media (min-width: 62rem) { .mm-journal__rubriques { margin-inline: 0; } .mm-journal__rubriques ul { flex-wrap: wrap; overflow: visible; padding: 0; scroll-padding-inline: 0; } .mm-journal__rubriques::after { display: none; } .mm-journal__fleche { display: none; } } /* La carte d'article dans la liste : la carte du site neuf, son visuel 16:9 au-dessus. */ .mm-journal .mm-carte--article .mm-carte__corps { padding: var(--mm-3); gap: var(--mm-1); } .mm-journal .mm-carte--article .mm-carte__corps :is(h2, h3) { margin: 0; font-size: 1.125rem; line-height: 1.35; } .mm-journal .mm-carte--article .mm-carte__corps :is(h2, h3) a { color: var(--mm-ink); text-decoration: none; } .mm-journal .mm-carte--article .mm-carte__corps :is(h2, h3) a:hover { color: var(--mm-action-fort); } .mm-journal .mm-carte__visuel img { transition: transform 400ms ease; } .mm-journal .mm-carte:hover .mm-carte__visuel img { transform: scale(1.03); } .mm-journal .mm-grille { gap: var(--mm-3); } /* À la une : le premier de la page, plus grand, avec son extrait. */ .mm-journal .mm-carte--une { margin-bottom: var(--mm-4); } .mm-journal .mm-carte--une .mm-carte__corps { padding: var(--mm-3); } .mm-journal .mm-carte--une .mm-carte__corps h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.25; } /* L'étiquette « À la une » et l'extrait prennent la taille, le ton et la marge des paragraphes de carte (`.mm-carte__corps p`, feuille commune, plus spécifique qu'une classe seule) : c'est le rendu que Monsieur a vu et validé, sur planche puis au servi. Les tailles et couleurs qu'on déclarait ici ne s'appliquaient pas (audit du run 616, C2, mesuré au servi : 15 px, ton éteint) ; on ne garde que ce qui s'applique. */ .mm-carte__extrait { line-height: 1.6; } .mm-journal__surtitre { font-weight: 600; line-height: 1; letter-spacing: .12em; text-transform: uppercase; } @media (min-width: 52rem) { .mm-journal .mm-carte--une { flex-direction: row; } .mm-journal .mm-carte--une .mm-carte__visuel { flex: 0 0 58%; aspect-ratio: auto; min-height: 22rem; } .mm-journal .mm-carte--une .mm-carte__corps { justify-content: center; padding: var(--mm-6); } } /* Cinq au téléphone, dix à l'ordinateur (Monsieur, #16-#18) : sous 46 rem, les cartes au-delà de la cinquième attendent le bouton. La classe n'est posée que par le script : sans lui, les dix restent. */ .mm-journal__plus { margin: var(--mm-4) 0 0; } .mm-journal__plus[hidden] { display: none; } .mm-journal__plus button { width: 100%; cursor: pointer; background: transparent; } /* Le complément exact de (min-width: 46rem), sans trou entre 45,999 et 46 rem aux largeurs fractionnaires (chasse du run 616, F5 ; même leçon que la borne du menu). */ @media not all and (min-width: 46rem) { .mm-journal-js .mm-journal__au-dela { display: none; } } @media (min-width: 46rem) { .mm-journal__plus { display: none; } } /* La pagination : gros boutons au téléphone, numéros à l'ordinateur. Le cadre se pose sur les BOUTONS seulement, par leurs classes -- jamais par la structure (double encadré relevé par Monsieur sur la planche v2, message 14). Les numéros sont ceux de paginate_links(). */ .mm-journal__pagination { margin-top: var(--mm-6); display: flex; align-items: center; justify-content: space-between; gap: var(--mm-1); } .mm-journal__pas, .mm-journal__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 1rem; font: 600 .8125rem/1 var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mm-ink); text-decoration: none; border: 1px solid var(--mm-rule); border-radius: var(--mm-rayon); white-space: nowrap; } .mm-journal__pas:hover, .mm-journal__pagination a.page-numbers:hover { border-color: var(--mm-ink); } .mm-journal__pagination .page-numbers.current { background: var(--mm-ink); color: var(--mm-clair); border-color: var(--mm-ink); } .mm-journal__pagination .page-numbers.dots { border: 0; min-width: 0; padding: 0 .25rem; color: var(--mm-muted); } .mm-journal__position { white-space: nowrap; color: var(--mm-muted); font-size: .9375rem; } .mm-journal__numeros { display: none; } @media (min-width: 46rem) { .mm-journal__pagination { justify-content: center; } .mm-journal__position { display: none; } .mm-journal__numeros { display: flex; gap: var(--mm-1); } } /* Une liste vide : une phrase, et dans une langue sans article, le chemin du journal français. */ .mm-journal__vide { max-width: var(--mm-mesure); margin: 0 auto; text-align: center; --mm-compense: 0; } .mm-journal__vide p { margin: 0 auto var(--mm-3); }