` : le backdrop est transparent, `lighten(noir, transparent)` vaut noir, et on obtient des lettres NOIRES OPAQUES sans la moindre erreur. Un masque SVG, lui, produit de la vraie transparence alpha et se moque des contextes d'empilement : c'est `assets/fork/affiche.js` qui le pose. ETAT PAR DEFAUT = LE REPLI. Les regles ci-dessous rendent un aplat plein avec des lettres en bleu petrole : parfaitement lisible si le JS ne s'execute pas. C'est la classe `.mms-evide-actif`, posee par le script une fois les masques en place, qui efface l'aplat et l'encre CSS pour laisser voir le SVG. Jamais l'inverse : rien ne doit dependre du JS pour rester lisible. */ .mms-aff--evide .mms-aff__l { position: relative; color: var(--color-secondary); background: var(--color-highlight); } .mms-aff--evide .mms-aff__l:nth-child(3n+2) { background: var(--color-surface); } .mms-aff--evide .mms-aff__l:nth-child(3n+3) { background: var(--color-white); } /* Le masque est en place : l'aplat et l'encre passent au SVG. Le texte reste dans le DOM (lecteurs d'ecran, moteurs), simplement transparent -- c'est lui qui continue de donner sa largeur et sa hauteur a la boite. */ .mms-evide-actif .mms-aff--evide .mms-aff__l { background: transparent; color: transparent; } .mms-aff__svg { position: absolute; inset: 0; display: block; pointer-events: none; } /* -------------------------------------------------------------------------- 2. LE MOT PORTEUR, dans un titre courant -------------------------------------------------------------------------- Tous les titres ne sont pas des affiches. Pour les titres courants, un seul mot prend la couleur, ET RIEN D'AUTRE. CORRECTION DU 2026-08-05 : ce mot etait auparavant bascule en Anton capitales et agrandi de 12 %. Pose au milieu d'une phrase en serif, l'ecart de corps et de dessin etait laid -- juge sur capture, et a juste titre. Anton est un choix de LIGNE, pas de mot. Ici, seule la couleur change. LE VEHICULE EST `.mms-mot`, PAS `.color-primary`. Mesure du 2026-08-05 : `.color-primary` n'est pas une classe semantique mais un UTILITAIRE genere avec `!important` (`mixins/_mixins.scss`). Aucune regle sans `!important` ne peut donc le recolorer : les regles de couleur ecrites en session 2 compilaient, matchaient l'element, et n'ont JAMAIS rien colore. Le defaut de fond est consigne en A6 de `proto/REMONTEES-TEMPLATE.md`. -------------------------------------------------------------------------- */ /* Sur fond clair, le mot prend le MAGENTA de ses sous-titres, pas le terracotta : c'est le contraste qu'elle emploie, et le magenta tient 6,8:1 sur blanc quand le terracotta n'est qu'a 4,5:1. */ .pmb-hero__title .mms-mot, .pmb-h2 .mms-mot { color: var(--color-accent); } /* Sur une section peinte ou une image, l'encre de marque redevient necessaire : le magenta sur terracotta serait illisible. */ .pmb-cover__title .mms-mot, .pmb-cta__title .mms-mot, .pmb--scheme-brand .pmb-h2 .mms-mot, .pmb--has-bg .pmb-h2 .mms-mot, .pmb--has-bg .pmb-hero__title .mms-mot { color: var(--color-on-primary); } /* -------------------------------------------------------------------------- 3. LA CARTE DE COULEUR DECALEE DERRIERE LA PHOTO -------------------------------------------------------------------------- Sur son affiche A3, la photo des enfants repose sur un aplat magenta legerement decale vers le haut a gauche. C'est SON relief : pas une ombre portee, un aplat franc. Ses documents ne portent aucune ombre. Rendu en `::before` : aucun element ajoute au DOM, donc aucune modification du PHP. `z-index: 0` sur le media et `-1` sur l'aplat le posent derriere sans creer de contexte d'empilement qui piegerait la lightbox de la galerie. -------------------------------------------------------------------------- */ /* NE CIBLER QUE DE VRAIS CONTENEURS DE PHOTO. Mesure du 2026-08-05, apres DEUX erreurs de suite dues au nom des classes : ni `.pmb-intro__figure-wrap` ni `.pmb-figure` ne portent d'image. `.pmb-figure` est le CHIFFRE lui-meme (`10`) : l'aplat le recouvrait et le « 10 » disparaissait. Le seul vrai conteneur de photo est `.pmb-media`. **Un nom de classe ne prouve rien : lire le DOM rendu avant de cibler.** */ .pmb-snippet .pmb-media { position: relative; z-index: 0; } .pmb-snippet .pmb-media::before { content: ""; position: absolute; z-index: -1; top: -18px; left: -18px; width: 100%; height: 100%; background: var(--color-accent); border-radius: var(--radius-l); pointer-events: none; } @media (max-width: 782px) { .pmb-snippet .pmb-media::before { top: -10px; left: -10px; } } /* -------------------------------------------------------------------------- 4. LES ETIQUETTES RECTANGULAIRES -------------------------------------------------------------------------- Ses coordonnees et ses prix sont poses dans des rectangles pleins, texte en capitales fortement espacees : « 3 RUE CHARLES DE SAINT AUBIN », « 25 EUR LA DEMI-JOURNEE ». C'est son element d'interface le plus reconnaissable, et le socle rend deja des eyebrows : il suffit de les redresser. Le socle les rend en PILULE, on les remet a l'angle droit. -------------------------------------------------------------------------- */ .pmb-eyebrow { border-radius: 0; background: var(--color-highlight); color: var(--color-black); font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; padding: 0.5em 1.05em; } /* Posee sur une image ou une section peinte, l'etiquette abricot disparaitrait. La variante `--glass` du socle est deja prevue pour ce cas : on lui donne le terracotta plein plutot qu'un verre depoli, qui n'existe pas chez elle. */ .pmb-eyebrow--glass { background: var(--color-primary); color: var(--color-on-primary); backdrop-filter: none; } /* Le point anime du hero prend l'encre de l'etiquette qui le porte. */ .pmb-eyebrow__dot { background: currentColor; } /* -------------------------------------------------------------------------- 5. LES PICTOGRAMMES AU TRAIT, A LA PLACE DES EMOJI -------------------------------------------------------------------------- Les emoji disaient CENTRE DE LOISIRS, exactement ce que Caroline proscrit, alors qu'elle a choisi elle-meme « un lieu haut de gamme, rare et precieux ». Ils sont remplaces par des pictogrammes Lucide, servis par le registre `proto_pmb_icone()` (inc/proto-native-blocks.php). DEUX REGLAGES, ET LEUR RAISON CHIFFREE. - La taille du socle (2,6rem) etait calibree pour un GLYPHE, pas pour un trait : un pictogramme de 41px au trait fait tache a cote d'une carte de texte. Ramene a 1,9rem, soit 30px, l'echelle d'une icone de carte. - L'epaisseur est ramenee de 1,8 a 1,3. Le trait rendu vaut alors 1,3 x 30/24 = **1,65px**, la meme valeur que les icones de contact du socle (1,8 a 20px = 1,5px). Sans ce reglage, le trait montait a 3,1px et le pictogramme paraissait gras et bon marche. La couleur passe par `--text-heading`, pas par une teinte en dur : elle rend le bleu petrole sur fond clair, du blanc en section sombre et l'encre de marque en section peinte. Une seule regle, aucune variante a maintenir. -------------------------------------------------------------------------- */ .pmb-features { --pmb-features-icon-size: 1.9rem; } .pmb-ico { display: block; color: var(--text-heading); stroke-width: 1.3; } .pmb-feature__icon, .pmb-timeline__icon { margin-bottom: 0.55rem; } /* -------------------------------------------------------------------------- 6. LES FORMES QUI SE BALADENT -------------------------------------------------------------------------- Injectees par `inc/fork.php` (filtre `render_block`), animees par `assets/fork/deco.js`. Elles cassent la grille : c'est ce qui empeche une page de blocs empiles de ressembler a un gabarit. TROIS PRECAUTIONS, chacune pour un defaut precis : - `overflow: hidden` sur la section qui en porte : les formes DEBORDENT volontairement des bords (elles sont coupees, comme sur l'affiche). Sans cette regle, elles creeraient un defilement horizontal, qui est le defaut le plus vite reproche a une page. - `z-index: 0` sur la forme et `position: relative` sur le contenu : un ornement ne doit jamais passer DEVANT un texte ni intercepter un clic. `pointer-events: none` s'en charge aussi, ceinture et bretelles. - des opacites basses : ses documents laissent respirer, et les travaux des enfants sont deja tres colores. Une forme qui se remarque a egalite avec le texte est une forme ratee. -------------------------------------------------------------------------- */ .pmb:has(.mms-deco) { position: relative; overflow: hidden; isolation: isolate; } .pmb:has(.mms-deco) > .pmb-inner { position: relative; z-index: 1; } .mms-deco { position: absolute; inset: 0; pointer-events: none; display: block; /* NEGATIF, MAIS SEULEMENT PARCE QUE LA SECTION EST ISOLEE (2026-08-07). Trois etats mesures, dans cet ordre : `z-index: 0` -- la forme passait PAR-DESSUS le contenu des que celui-ci n'etait pas lui-meme positionne. Mesure : le triangle de la bande des oeuvres recouvrait les planches des eleves. La regle qui protegeait le contenu (`.pmb:has(.mms-deco) > .pmb-inner { z-index: 1 }`) ne vise que les blocs du socle, dont l'accueil n'emploie AUCUN : elle ne s'appliquait nulle part ici. `z-index: -1` -- toutes les formes ont DISPARU. Une `section` en `position: relative` SANS z-index ne cree pas de contexte d'empilement : l'enfant negatif remonte au contexte du dessus et se fait peindre DERRIERE le fond opaque de la section. `-1` + section ISOLEE -- le bon etat. `isolation: isolate` fait de la section un contexte d'empilement, donc la forme est peinte apres le fond de CETTE section et avant son contenu, sans qu'on ait a positionner quoi que ce soit d'autre -- ce qui aurait casse des mises en page qu'on ne controle pas. */ z-index: -1; } .mms-deco__i { position: absolute; display: block; will-change: transform; } .mms-deco__i svg { display: block; width: 100%; height: 100%; } /* Les positions vivent ICI et pas dans le PHP : une coordonnee est un choix de design, elle se retouche avec le reste du design. */ /* Les opacites ont ete MONTEES apres capture : a .12, les formes etaient si discretes qu'elles ne cassaient plus rien -- elles ne se voyaient qu'en sachant qu'elles etaient la, ce qui est le pire des deux mondes (du poids, aucun effet). Sur l'affiche de reference, elles sont franches. */ .mms-deco__i--1 { top: -5%; right: -4%; width: clamp(150px, 20vw, 300px); aspect-ratio: 1; color: var(--color-primary); opacity: 0.3; } .mms-deco__i--2 { bottom: -7%; left: -5%; width: clamp(170px, 24vw, 360px); aspect-ratio: 1; color: var(--color-accent); opacity: 0.26; } /* DEUX PLACEMENTS DE PLUS, parce que quatre formes sur treize sections ne font pas un decor : elles font trois accidents. Les rangs 3 et 4 tiennent les FLANCS a mi-hauteur, la ou 1 et 2 tiennent les coins -- sans quoi toute forme ajoutee se serait empilee dans le meme angle que la precedente. */ .mms-deco__i--3 { top: 28%; left: -6%; width: clamp(120px, 16vw, 250px); aspect-ratio: 1; color: var(--color-highlight); opacity: 0.38; } .mms-deco__i--4 { bottom: 12%; right: -5%; width: clamp(135px, 18vw, 285px); aspect-ratio: 1; color: var(--color-secondary); opacity: 0.22; } /* Une section du fork qui accueille un ornement doit lui donner un REFERENT : `.mms-deco` est en `position: absolute; inset: 0`, donc sans cela il se calerait sur le premier ancetre positionne -- souvent la page entiere. Le socle ne pose la regle que pour ses blocs `.pmb`, et l'accueil n'en emploie aucun. Pas d'`overflow` ici : `.mms-accueil` porte deja `overflow-x: clip`, et les debordements verticaux sont VOULUS -- c'est eux qui cousent les sections. */ /* `isolation: isolate` EST INDISPENSABLE, pas decoratif : sans lui, le `z-index: -1` de `.mms-deco` sort de la section et la forme se fait peindre derriere son fond. Voir la note sur `.mms-deco`. */ :is(.mms-accueil, .mms-page) section:has(> .mms-deco) { position: relative; isolation: isolate; } /* Le carre reprend le cadrage pivote de ses photos : jamais parfaitement d'aplomb. La rotation est portee par une CUSTOM PROPERTY parce que le parallaxe ecrit dans `transform` : si la rotation y etait ecrite en dur, la premiere image du tween l'ecraserait. */ .mms-deco__i--carre { --mms-rot: -12deg; } .mms-deco__i--arc { --mms-rot: 8deg; opacity: 0.5; } .mms-deco__i--zigzag { --mms-rot: -6deg; opacity: 0.75; color: var(--color-highlight); } .mms-deco__i--anneau { --mms-rot: 0deg; opacity: 0.4; } .mms-deco__i svg { transform: rotate(var(--mms-rot, 0deg)); } /* Une section peinte ou sombre : l'ornement passe a l'encre claire, sinon il disparait dans le fond. */ .pmb--scheme-brand .mms-deco__i, .pmb--has-bg .mms-deco__i { color: var(--color-on-primary); opacity: 0.16; } @media (prefers-reduced-motion: reduce) { .mms-deco__i { will-change: auto; } } /* Sur un ecran etroit, les ornements mangent la place du texte sans rien apporter : ils sont reduits, pas seulement rapetisses. */ @media (max-width: 782px) { .mms-deco__i--2 { display: none; } .mms-deco__i--1 { opacity: 0.09; } } /* -------------------------------------------------------------------------- LES FORMES SEMEES (2026-08-07) -------------------------------------------------------------------------- Le semeur de `assets/fork/deco.js` porte la taille, la position, la couleur et l'opacite EN INLINE : ce sont des valeurs calculees par forme, elles n'ont pas d'equivalent en feuille. Le SCSS ne garde ici que ce qui vaut pour TOUTES -- et le sprite, qui n'a rien a montrer. Pourquoi une nuee et non quatre ornements : mesure du 2026-08-07 sur l'accueil, huit formes sur 10,9 ecrans, toutes entre 218 et 377px. Ni densite, ni contraste d'echelle. Ses affiches, elles, superposent des elements « de tailles franchement differentes ». La densite se tient par la PROFONDEUR (trois couches d'opacite et de vitesse), jamais par la saturation : « motifs trop charges » est une de ses anti-references. -------------------------------------------------------------------------- */ /* Le sprite des traces : emis une fois par `mms_deco_sprite()`, jamais visible. `position: absolute` en plus des dimensions nulles, sinon il occupe une ligne dans le flux et decale le premier bloc de la page d'une hauteur de texte. */ .mms-deco-sprite { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; } /* Le recentrage (`margin` a moitie du cote) est pose EN INLINE par le semeur : il depend de la taille de chaque forme, qu'une feuille ne connait pas. On ne peut pas non plus le faire par `translate(-50%, -50%)`, puisque le parallaxe ecrit dans `transform` et l'ecraserait a la premiere image. */ /* Une section peinte recoit deja son encre claire par le JS (un style inline bat la feuille, donc la couleur ne peut pas etre posee ici). Il reste le TRAIT : sur fond sombre, un filet de 7 unites disparait avant un aplat. */ .mms-deco__i--semee.is-sur-sombre svg [stroke], .mms-deco__i--semee.is-sur-sombre svg use { stroke-width: 9; } /* Aucun z-index par couche : c'est le CONTENEUR `.mms-deco` qui passe derriere le contenu, d'un seul coup et pour toutes les formes. Les empiler entre elles n'a pas de sens -- un collage se lit par l'opacite et l'echelle, pas par l'ordre. */ /* Sur un ecran etroit, le semeur reduit deja le nombre de formes. Les plus grandes restent, mais retenues : sur 390px de large, une forme de 600px n'est plus un ornement, c'est un fond. */ @media (max-width: 782px) { .mms-deco__i--semee.mms-deco__i--c0 { opacity: 0.06 !important; } .mms-deco__i--semee.mms-deco__i--c2 { opacity: 0.45 !important; } } /* On retire l'animation, jamais le decor : les formes semees restent en place et visibles, simplement immobiles. Le JS ne pose alors aucun ScrollTrigger. */ @media (prefers-reduced-motion: reduce) { .mms-deco__i--semee { will-change: auto; } } /* -------------------------------------------------------------------------- 7. L'EMPHASE DANS LES PARAGRAPHES -------------------------------------------------------------------------- Constat du 2026-08-05 : AUCUN texte du site ne portait de gras. Un paragraphe entierement en 400 n'offre aucun point d'accroche -- l'oeil n'y trouve rien ou se poser, et pose sur une image il passe carrement au travers. GRAS SEUL, PAS DE COULEUR, et c'est un arbitrage explicite de Jonathan : les paragraphes porteront bientot des LIENS et des definitions de lexique, qui ont chacun leur signal visuel. Une troisieme teinte dans la meme phrase rendrait l'ensemble indigeste. L'emphase se distingue donc par la GRAISSE, et elle seule. Montserrat est variable 300..700 : le 700 existe reellement, il n'est pas synthetise -- ce que le theme interdit de toute facon (`font-synthesis: none`). -------------------------------------------------------------------------- */ .mms-accueil :is(p, li, dd, figcaption) :is(strong, b), .pmb-prose :is(strong, b), .pmb-feature__text :is(strong, b), .mms-footer :is(p, li) :is(strong, b) { font-weight: 700; color: inherit; } /* -------------------------------------------------------------------------- AJUSTEMENTS DE TON -------------------------------------------------------------------------- Fraunces est une serif a fort contraste : aux grandes tailles, son interlignage par defaut est trop lache et ses titres se delitent. -------------------------------------------------------------------------- */ .pmb-hero__title, .pmb-cover__title { line-height: 1.02; letter-spacing: -0.012em; } .pmb-h2 { line-height: 1.08; letter-spacing: -0.008em; } /* Les sous-titres de cartes reprennent le magenta de ses categories d'atelier, deja pose en token de scheme (`heading-sub`). Le prix, lui, garde le terracotta : sur son programme, le tarif n'est jamais de la meme couleur que le titre qu'il accompagne. */ .pmb-feature__sub { color: var(--color-primary); font-weight: 700; letter-spacing: 0.01em; } /* -------------------------------------------------------------------------- LES PAGES EN COMPOSITION LIBRE -------------------------------------------------------------------------- Importees ICI, et pas dans `app.scss`, pour une raison de fork : `app.scss` appartient au template et evolue avec lui. Un fork qui l'edite se met a conflicter au merge sur le fichier le plus central du socle. Ce fichier-ci est LE hook prevu pour le fork, et il est charge en dernier : c'est donc le bon point d'entree. -------------------------------------------------------------------------- */ /* ========================================================================== ACCUEIL -- COMPOSITION LIBRE. Les Ateliers Maison Maria Stella. Patron : `front-page.php`. Aucun bloc `pm-*` n'intervient ici. POURQUOI UNE FEUILLE A PART : ce n'est pas un « skin » pose sur des modules, c'est la mise en page elle-meme. Elle emploie une grille de 12 colonnes, des debordements et des chevauchements -- tout ce que la grammaire des blocs (section > conteneur centre > en-tete > grille reguliere) rend impossible. ELLE NE REDEFINIT AUCUN JETON. Couleurs, polices, rayons et espaces viennent tous de `vars/_client.scss`, mesures sur son logo et ses documents. ========================================================================== */ /* UNE SEULE SOURCE DE VERITE POUR LE RYTHME VERTICAL. Les sections de cette page etendent `.inner_spacer_y` (commons/_utilities.scss), le helper que le socle prevoit pour l'espacement interne en Y. Il tire sa valeur de `--space-xxxl`, le cran le plus haut de l'echelle d'espacement. DEUX ERREURS FAITES ICI, ET CORRIGEES : cette page a d'abord pose son propre `--mms-air` en `clamp(4rem, 10vw, 9.5rem)`, puis un `--mms-section-y` en `clamp(5rem, 11vw, 11.5rem)`. Or `--space-xxxl` vaut `clamp(5rem, 3rem + 9vw, 12rem)` : je reecrivais, a un cheveu pres, une echelle qui existait deja. Un second systeme d'espacement a cote du premier, c'est deux valeurs a changer a chaque reglage, et un fork qui cesse de repondre au reglage global. Regle qui vaut pour tout ce fichier : ce qui existe dans le socle se CONSOMME, jamais ne se recopie. */ /* La gouttiere et la colonne sont posees sur `:root` et non sur la page : le chrome (header, pied de page) s'aligne sur la MEME gouttiere que le contenu, sinon le logo et le titre ne tombent pas sur la meme verticale. Une seule declaration, consommee partout. */ :root { --mms-marge: var(--space-l); --mms-colonne: minmax(0, 1fr); /* UNE COULEUR PAR CATEGORIE D'ATELIER -- son systeme, releve sur son programme d'ete. Ce n'est pas decoratif, c'est un REPERAGE : la meme formule porte la meme couleur partout ou elle apparait. Les valeurs vivent ici et non sur les classes, parce qu'elles sont desormais lues par DEUX pages (l'apercu de l'accueil et le detail de `page-les-formules.php`). Posees sur les classes, il aurait fallu les maintenir aux deux endroits -- et le jour ou l'une derive, le reperage ne repere plus rien. */ --mms-cat-annee: var(--color-accent); --mms-cat-duo: var(--color-accent-soft); --mms-cat-stage: var(--color-accent-warm); --mms-cat-anniv: var(--color-highlight); /* LES COLLAB' AVAIENT LA MEME COULEUR QUE LES ANNIVERSAIRES (2026-08-08). Les deux valaient `--color-highlight` : le code couleur comptait donc cinq categories pour quatre teintes, et deux offres qui n'ont rien a voir se repondaient sur toute la longueur du site. Personne ne l'avait releve, parce qu'un reperage par couleur ne se lit jamais categorie par categorie. Le vert-de-gris arrive precisement la : c'est la seule teinte FROIDE de la palette hors du bleu petrole, et les Collab' sont ce que l'atelier a de plus a part -- un artiste invite, une fois. */ --mms-cat-collab: var(--color-tertiary); } .mms-accueil { overflow-x: clip; background: var(--color-white); color: var(--color-text); font-family: "Montserrat", system-ui, sans-serif; } /* La grille de reference. Douze colonnes, pas six : c'est ce qui autorise les placements a 5/12 ou 7/12, donc l'asymetrie. Une grille a 2 ou 3 colonnes ne sait produire que des moities et des tiers, et toute page finit centree. */ .mms-grille { display: grid; grid-template-columns: repeat(12, var(--mms-colonne)); gap: clamp(1.5rem, 3vw, 3rem); max-width: 1560px; margin-inline: auto; padding-inline: var(--mms-marge); } .mms-titre { margin: 0; } /* --- Les briques communes ------------------------------------------------- */ /* L'ETIQUETTE N'EST PLUS UN APLAT : ELLE EST UN LIBELLE AU FILET. Elle etait un rectangle plein a encre claire -- exactement ce qu'est une ligne de titre `.mms-aff__l`. Deux objets de meme nature a deux tailles : l'oeil les lit comme un seul systeme repete, et le titre perd son rang puisque son voisin minuscule emploie le meme procede que lui. SUR SES AFFICHES, LES DEUX SONT DISTINCTS : le mot d'impact (« MANGA ») est en COULEUR PLEINE, sans fond ; seul le petit libellé de role porte un aplat. Le titre du site ayant fait le choix inverse -- l'aplat, valide en session 3 -- c'est a l'etiquette de changer de nature pour que la hierarchie revienne. Le filet + les capitales espacees gardent son vocabulaire (elle espace ses capitales partout) sans lui reprendre son procede de titre. */ /* CE QUI LA DISTINGUE DU TITRE N'EST PAS L'APLAT, C'EST SA POLARITE. Elle etait un rectangle plein a encre CLAIRE, et sa variante `--bleu` employait meme le couple exact d'une ligne de titre (fond bleu petrole + encre rose pale). Deux objets de meme nature a deux tailles : l'oeil les lit comme un seul systeme repete, et le titre perd son rang. SES AFFICHES TRANCHENT, ET ELLES SONT CONSTANTES SUR LES TROIS : le mot d'impact est en couleur saturee a encre claire, tandis que le libelle de role est TOUJOURS abricot a encre SOMBRE. Ce n'est pas la forme qui separe les deux, c'est l'inversion de polarite -- et le fait que l'etiquette ne change jamais de couleur quand le titre, lui, tourne (terracotta, petrole, magenta). D'OU UNE SEULE ETIQUETTE, ABRICOT PARTOUT. Une premiere tentative l'avait privee d'aplat pour la distinguer : mesure du 2026-08-06, elle ressortait a 1:1 sur la section inscription (terracotta sur terracotta) et a 2,42:1 sur la section des Collab'. Retirer un aplat, c'est rendre le texte dependant d'un fond qu'on n'a pas choisi -- exactement ce qui rendait les icones du pied invisibles. Un aplat opaque, lui, emporte son contraste : 8,24:1, sur n'importe quelle section. */ .mms-etiq { display: inline-block; background: var(--color-highlight); color: var(--color-secondary); font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: clamp(0.68rem, 0.8vw, 0.78rem); text-transform: uppercase; letter-spacing: 0.18em; padding: 0.55em 1.1em; border-radius: 0; /* Les deux variantes de couleur SURVIVENT DANS LE HTML mais ne colorent plus : l'etiquette est desormais un objet unique. Elles sont conservees inertes plutot que retirees de dix appels PHP, ou un oubli aurait laisse une classe morte sans que rien ne le signale. */ } .mms-etiq--bleu, .mms-etiq--abricot { background: var(--color-highlight); color: var(--color-secondary); } .mms-etiq { /* Le prix n'a jamais ete une etiquette : c'est un CHIFFRE, et il n'a donc ni aplat ni capitales espacees a la meme mesure. */ } .mms-etiq--prix { background: transparent; color: var(--color-primary-ink); padding-inline: 0; letter-spacing: 0.1em; } .mms-btn { display: inline-block; background: var(--color-primary-ink); color: var(--color-on-primary); font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; padding: 1.05em 2.4em; border-radius: 999px; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .mms-btn:hover, .mms-btn:focus-visible { background: var(--color-secondary); color: var(--color-surface); } .mms-btn--clair { background: var(--color-surface); color: var(--color-primary-ink); } .mms-btn--clair:hover, .mms-btn--clair:focus-visible { background: var(--color-white); color: var(--color-secondary); } .mms-btn--fantome { background: transparent; color: var(--color-on-primary); box-shadow: inset 0 0 0 1.5px currentColor; } .mms-btn--fantome:hover, .mms-btn--fantome:focus-visible { background: var(--color-on-primary); color: var(--color-primary-ink); box-shadow: none; } /* UN BOUTON NE SE SOULIGNE PAS, ET IL FALLAIT ALLER LE CHERCHER (2026-08-07). `.mms-btn` declare pourtant `text-decoration: none`. Le soulignage venait du socle : `p a:not(.proto-term):not(.pmb-btn) { text-decoration: underline }`. Cette regle a prevu une exception pour SES boutons (`.pmb-btn`) et ignore ceux du fork, et sa specificite -- deux elements plus deux classes portees par les `:not()`, soit (0,2,2) -- ecrase le (0,1,0) de `.mms-btn`. Tous les boutons poses dans un `

` etaient donc soulignes : ceux du hero, ceux de la section inscription. Mesure par `CSS.getMatchedStylesForNode`, parce que relire le SCSS du fork ne pouvait pas le montrer. On egale sa specificite et on passe apres : deux classes, deux elements. A remonter au socle -- l'exception devrait viser tout bouton, pas seulement les siens. */ :is(.mms-accueil, .mms-page) p a.mms-btn { text-decoration: none; } .mms-lien { font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; font-size: 0.92rem; color: inherit; text-underline-offset: 0.35em; text-decoration-thickness: 1.5px; /* LE TRAIT PREND LA COULEUR DE SA SECTION (2026-08-08, demande de Jonathan). Il valait `currentColor` partout : tous les liens du site portaient donc le meme filet brun-gris, quelle que soit la section qui les accueillait. UNE VARIABLE PLUTOT QU'UNE COULEUR PAR ENDROIT. Chaque section surcharge `--mms-lien-trait` sur son conteneur, et l'heritage fait le reste : un lien ajoute demain dans l'une d'elles prend la bonne couleur sans que personne y pense. Ecrire la couleur sur chaque `.mms-lien` aurait produit autant de regles a maintenir que de sections. Le repli `currentColor` garde le comportement actuel partout ou aucune section ne se prononce : rien ne change tant qu'on ne le demande pas. CONTRASTE : un soulignage est un composant graphique (WCAG 1.4.11), donc le seuil est 3:1, pas 4,5. Les trois teintes employees ici valent 5,4:1 (accent), 4,23:1 (tertiary) et 3,44:1 (primary) sur le rose pale. Le TEXTE, lui, garde sa propre couleur et son propre contraste. */ text-decoration-color: var(--mms-lien-trait, currentColor); } /* ET IL FAUT EGALER LE SOCLE, SINON RIEN NE SE VOIT. Premiere ecriture : la regle ci-dessus, seule. Mesure sur les trois pages : **les neuf liens rendaient `currentColor`**, pas une couleur de section. SOURCE CONFIRMEE, `dist/app.css` : `p a:not(.proto-term):not(.pmb-btn) { text-decoration: underline }` du socle. C'est le RACCOURCI, et un raccourci REINITIALISE ses longhands -- `text-decoration-color` y repasse a `currentColor`. Sa specificite (0,2,2 : deux elements plus les deux classes des `:not()`) ecrase le (0,1,0) de `.mms-lien`. Le fork avait deja rencontre CETTE regle, pour ses boutons soulignes, et avait du l'egaler de la meme facon. La lecon ne perime pas : une longhand du fork ne survit pas a un raccourci du socle plus specifique. On egale donc (0,2,2) et on passe apres. Les `.mms-lien` qui ne vivent pas dans un `

` gardent la regle generale ci-dessus, qui leur suffit. */ :is(.mms-accueil, .mms-page) p a.mms-lien { text-decoration-color: var(--mms-lien-trait, currentColor); } /* La couleur du trait suit la CATEGORIE de la section, jamais le hasard. MAIS ELLE SUIT AUSSI LE FOND, et c'est une mesure qui l'a impose : le vert-de-gris pose sur les DEUX sections Collab' rendait **2,65:1 sur l'accueil**, sous le seuil de 3:1 des composants graphiques. La section Collab' de l'accueil est peinte en BLEU PETROLE, celle de la page des formules est sur fond clair -- je les avais traitees ensemble en supposant le meme fond, sans le lire. Sur fond sombre, la palette a deja son jeton : l'abricot, que le scheme sombre du socle emploie pour ses etiquettes. Le vert-de-gris reste sur les fonds clairs, ou il vaut 4,23:1 (rose) et 5,00:1 (blanc). ET LA MEME SUPPOSITION M'A EU DEUX FOIS : j'ai corrige l'accueil en croyant que la section Collab' de la page des formules, elle, etait claire. Mesure : **fond bleu petrole egalement**, meme 2,65:1. Les DEUX sections Collab' du site sont sombres. Le vert-de-gris n'y a donc aucune place en trait -- il vit dans le code couleur des categories, qui se rend sur fond clair. */ .mms-collab { --mms-lien-trait: var(--color-highlight); } /* fond bleu petrole */ .mms-fx-collab { --mms-lien-trait: var(--color-highlight); } /* fond bleu petrole, mesure */ .mms-hebdo { --mms-lien-trait: var(--color-highlight); } /* fond bleu petrole */ .mms-fx-tete { --mms-lien-trait: var(--color-accent); } .mms-ag { --mms-lien-trait: var(--color-accent-warm); } /* Un focus VISIBLE partout, en abricot : sur ses trois fonds (rose pale, bleu petrole, terracotta) l'abricot reste detache. Un anneau bleu par defaut disparaitrait sur la section bleue. LE SELECTEUR PORTE LES DEUX RACINES, et ce n'est pas cosmetique : tant qu'il ne visait que `.mms-accueil`, toute page composee ensuite retombait sur l'anneau par defaut du navigateur -- invisible sur la section bleu petrole, sans qu'aucune erreur ne le dise. Une regle d'accessibilite attachee a UNE page est une regle qui se perd a la page suivante. */ :is(.mms-accueil, .mms-page) :is(a, button, summary):focus-visible { outline: 3px solid var(--color-highlight); outline-offset: 3px; } /* -------------------------------------------------------------------------- 1. LE HERO -------------------------------------------------------------------------- */ /* LE HERO N'EST PLUS UNE PHOTO PLEIN ECRAN. Arbitrage du 2026-08-05, apres comparaison avec le remix valide : une photo plein cadre sous un voile sombre eteint la marque. Elle a une palette tres claire, et son fond rose pale EST son identite -- c'est le fond de ses deux documents imprimes. Le hero le reprend, et la photo devient un OBJET pose dessus, sur sa carte de couleur decalee. La couleur revient alors la ou elle compte : dans les aplats du titre. */ /* SA SALLE PASSE SOUS LE FOND (2026-08-07, demande de Jonathan). L'arbitrage ci-dessus tient toujours : ce n'est PAS une photo plein cadre sous un voile sombre. Le voile est son rose pale a 90%, donc la photo ne se lit pas -- elle se devine. Elle apporte une MATIERE la ou il n'y avait qu'un aplat : les carreaux de ciment, le bois de la table, la lumiere de la fenetre. Le fond de marque reste le fond de marque. Le voile est un `::before` et non un `background-blend-mode` : le blend melangerait les deux couches au lieu d'en poser une SUR l'autre, et le rose virerait avec chaque zone de la photo. Une couche opaque a 90% se comporte partout pareil -- c'est le meme principe que l'aplat qui porte son contraste. L'image est prise dans le THEME et non en mediatheque : un fond CSS n'a pas de `srcset` a gagner, et le fichier suit le depot au lieu de dependre d'une base a migrer. LE CHEMIN EST RELATIF A `dist/`, PAS A CE FICHIER. Laravel Mix ne reecrit pas les `url()` de ce projet : elles sont recopiees telles quelles dans `dist/app.css`. Ecrire `../fork/...` -- juste depuis `assets/scss/vars/` -- compile en un chemin qui pointe sur `/fork/`, et rend 404. Mesure du 2026-08-07 : 404 sur le chemin compile, 200 sur le fichier reel. C'est la convention des fontes du socle (`url('fonts/...')`, relatif a `dist/`). */ /* `cover`, ET LE CALCUL A PERIME LA REGLE PRECEDENTE (2026-08-08). ------------------------------------------------------------------------- Ce fond etait en `auto 135%` pour menager du jeu vertical au parallaxe : `cover` sur une image 1600x1200 dans un cadre de 1440x1043 ne laissait que 37px a deplacer. C'etait juste a l'epoque, avec CETTE image et CE cadre. Deux choses ont change depuis, et personne n'a refait le calcul : le hero est passe a `min-height: 80vh`, et la photo est devenue plus panoramique (2048x1436, ratio 1,426 contre 1,333). Or, en `auto 135%`, la largeur rendue vaut hauteur_cadre x 1,35 x 1,426, soit hauteur_cadre x 1,925 : le fond ne couvre donc que si le cadre est MOINS large que 1,925 fois sa hauteur. A 80vh, aucun ecran courant ne tient cette condition -- mesure : 1440 x 900 ratio 2,00 -> 53px de bord nu (cover : 289px de jeu) 1920 x 1080 ratio 2,22 -> 256px de bord nu (cover : 482px) 3840 x 2160 ratio 2,22 -> 512px de bord nu (cover : 964px) 3440 x 1440 ratio 2,99 -> 1221px de bord nu (cover : 1260px) Le bord etait donc visible PARTOUT, pas seulement en 4K -- Jonathan l'a vu sur le sien. Et `cover` ne coute rien au parallaxe : il en donne plus, parce que l'image y est calee sur la largeur et deborde d'autant en hauteur. **La regle n'etait pas fausse, elle avait cesse d'etre vraie.** */ .mms-hero { position: relative; background: var(--color-surface) url("../assets/fork/atelier.webp") center 0/cover no-repeat; } .mms-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--color-surface); opacity: 0.9; pointer-events: none; } .mms-hero { /* Le contenu repasse au-dessus du voile. Sans cela, la grille du hero se retrouverait derriere lui et la page paraitrait delavee. */ } .mms-hero > * { position: relative; z-index: 1; } .mms-hero { overflow: hidden; /* UN HERO PLUS HAUT, A 80vh COMME LA REFERENCE. La version precedente plafonnait a 880px (`min(88svh, 880px)`) : sur un grand ecran le plafond gagnait toujours, et la demande d'un hero plus haut restait sans effet visible. Le plafond est retire, la mesure est celle du remix. */ min-height: 80vh; display: grid; align-items: center; } .mms-hero__grille { align-items: center; row-gap: clamp(2.5rem, 5vw, 4rem); width: 100%; } .mms-hero__contenu { grid-column: 1/span 6; display: grid; gap: clamp(0.9rem, 1.6vw, 1.5rem); justify-items: start; } .mms-hero { /* L'echelle du titre de PAGE, mesuree sur la reference : 96px a 1440. 6.6vw les redonne exactement, et le clamp tient les deux extremes. */ } .mms-hero__titre { --mms-aff-taille: clamp(2.35rem, 6.6vw, 6rem); } .mms-hero { /* L'accroche est SA phrase, choisie par elle a la question du positionnement. En Fraunces italique : c'est la voix de la maison, pas une ligne d'interface. */ } .mms-hero__accroche { margin: 0.5rem 0 0; font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(1.15rem, 1.9vw, 1.7rem); line-height: 1.35; color: var(--color-secondary); max-width: 26ch; } .mms-hero__intro { margin: 0; color: #4A3F44; font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.7; max-width: 40ch; } .mms-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2vw, 2rem); margin: 0.5rem 0 0; } .mms-hero { /* L'adresse RESPIRE sous les boutons (2026-08-07). A .3rem elle leur etait collee et se lisait comme une troisieme action. */ } .mms-hero__adresse { margin: clamp(1.1rem, 2vw, 1.8rem) 0 0; } .mms-hero__media { grid-column: 8/span 5; position: relative; margin: 0; z-index: 0; /* Sa carte de couleur decalee, en terracotta, poussee vers le bas a droite comme sur le remix. Aplat franc, aucune ombre. */ } .mms-hero__media::before { content: ""; position: absolute; z-index: -1; inset: 26px -26px -26px auto; width: 100%; background: var(--color-primary); } .mms-hero { /* LE CADRE. Il portait auparavant une seule photo, extraite de son A3, et un agrandissement charge de sortir du champ la bande magenta restee dans le fichier. Cette rustine n'a plus lieu d'etre : le cadre accueille desormais le carrousel de ses oeuvres, dont les fichiers sont propres. Il ne lui reste que son role de fenetre -- rapport fixe et debordement masque, pour que les six vues aient exactement la meme boite. */ } .mms-hero__cadre { display: block; position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--color-secondary); } /* -------------------------------------------------------------------------- LE CARROUSEL DES OEUVRES (dans le cadre du hero) -------------------------------------------------------------------------- Fondu enchaine, pas de glissement lateral : ces planches ne se lisent pas comme une sequence, elles se REMPLACENT. Un glissement suggererait un ordre et inviterait a chercher les fleches ; le fondu laisse le cadre tranquille et garde toute l'attention sur le titre, qui est le sujet du hero. -------------------------------------------------------------------------- */ .mms-carrousel__vues { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; } .mms-carrousel__vue { position: absolute; inset: 0; opacity: 0; /* `visibility` en plus de l'opacite : une vue a opacite nulle reste focusable et lisible par les technologies d'assistance. */ visibility: hidden; transition: opacity 0.85s ease, visibility 0s linear 0.85s; } .mms-carrousel__vue.est-active { opacity: 1; visibility: visible; transition: opacity 0.85s ease, visibility 0s; } .mms-carrousel__img { display: block; width: 100%; height: 100%; object-fit: cover; } .mms-carrousel { /* Le lent rapproche : 4% sur toute la duree d'affichage. Assez pour que le cadre ne soit jamais fige, assez peu pour ne pas amputer la planche. */ } .mms-carrousel__vue.est-active .mms-carrousel__img { animation: mms-rapproche 6.4s ease-out both; } .mms-carrousel { /* LES COMMANDES : pause et fleches partagent le meme dessin, decrit UNE fois. Un aplat plein, comme tout ce qui se pose sur une image chez elle, et 44px de cote -- la cible tactile minimale, jamais moins. Aucune ne se cache au survol : une commande qu'il faut chercher ne remplit pas son office, et sur telephone il n'y a pas de survol du tout. */ } .mms-carrousel .mms-carrousel__fleche, .mms-carrousel .mms-carrousel__pause { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--color-secondary); color: var(--color-highlight); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .mms-carrousel .mms-carrousel__fleche:hover, .mms-carrousel .mms-carrousel__pause:hover, .mms-carrousel .mms-carrousel__fleche:focus-visible, .mms-carrousel .mms-carrousel__pause:focus-visible { background: var(--color-highlight); color: var(--color-secondary); } .mms-carrousel__pause { position: absolute; z-index: 3; top: clamp(0.7rem, 1.4vw, 1.1rem); right: clamp(0.7rem, 1.4vw, 1.1rem); } .mms-carrousel__pause svg { width: 17px; height: 17px; fill: currentColor; } .mms-carrousel__fleches { position: absolute; z-index: 3; right: clamp(0.7rem, 1.4vw, 1.1rem); bottom: clamp(1rem, 1.8vw, 1.4rem); display: flex; gap: 0.5rem; } .mms-carrousel__fleche { /* Les chevrons sont traces, pas remplis : un `fill` en ferait deux triangles pleins, qui pesent trop a cote de l'icone de pause. */ } .mms-carrousel__fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mms-carrousel { /* Le libelle est lu, jamais vu : il change avec l'etat du bouton, ce qui est le seul moyen d'annoncer « pause » puis « reprendre ». */ } .mms-carrousel__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mms-carrousel__ico-lecture { display: none; } .mms-carrousel__pause[aria-pressed=true] .mms-carrousel__ico-pause { display: none; } .mms-carrousel__pause[aria-pressed=true] .mms-carrousel__ico-lecture { display: block; } .mms-carrousel { /* LA REGLETTE plutot que des pastilles rondes : la pastille tournante de l'enseigne occupe deja le coin bas gauche du cadre, et six petits ronds de plus auraient fait doublon a trois centimetres d'elle. */ } .mms-carrousel__reglette { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; gap: 2px; } .mms-carrousel__segment { flex: 1 1 0; height: 3px; background: rgba(253, 231, 232, 0.35); overflow: hidden; } .mms-carrousel__segment::after { content: ""; display: block; height: 100%; width: 0; background: var(--color-highlight); } .mms-carrousel__segment.est-active::after { animation: mms-avance 5.4s linear forwards; } .mms-carrousel__segment.est-passe::after { width: 100%; } .mms-carrousel { /* A l'arret, l'avancement se fige la ou il en est plutot que de repartir. */ } .mms-carrousel.est-en-pause .mms-carrousel__vue.est-active .mms-carrousel__img, .mms-carrousel.est-en-pause .mms-carrousel__segment.est-active::after { animation-play-state: paused; } @keyframes mms-rapproche { from { transform: scale(1); } to { transform: scale(1.04); } } @keyframes mms-avance { from { width: 0; } to { width: 100%; } } /* La pastille ronde a texte curviligne, detail repris de l'affiche de reference. Elle tourne lentement : c'est le seul mouvement autonome de la page, et il s'arrete sous `prefers-reduced-motion`. */ /* La pastille CHEVAUCHE le bord gauche de la photo : elle fait le lien entre la colonne de texte et l'image, et empeche les deux moities du hero de se lire comme deux blocs juxtaposes. */ .mms-pastille { position: absolute; z-index: 2; left: clamp(-2.5rem, -3vw, -1.5rem); bottom: clamp(1.5rem, 4vw, 3rem); width: clamp(90px, 10vw, 142px); aspect-ratio: 1; display: grid; place-items: center; /* UN DISQUE PLEIN, PAS UN TEXTE POSE SUR LA PHOTO. Premiere version : texte abricot directement sur l'image. Illisible -- une photo n'offre aucun fond stable, le contraste change a chaque pixel. Le disque en bleu petrole donne un fond constant, et l'abricot dessus tient 8,4:1. C'est la meme logique que ses etiquettes rectangulaires : chez elle, un texte pose sur une image est TOUJOURS sur un aplat. */ background: var(--color-secondary); border-radius: 50%; } .mms-pastille svg { width: 100%; height: 100%; animation: mms-tourne 26s linear infinite; } .mms-pastille { /* LE CORPS SE CALCULE SUR LA LONGUEUR DU TEXTE, il ne se choisit pas. Le cercle developpe 2 x pi x 44 = 276 unites, et `textPath` NE TRONQUE PAS : au-dela, il repart par-dessus son debut et les lettres se chevauchent. « Quelques oeuvres d'eleves . » fait 28 signes, dont 3 espaces. En capitales de Montserrat Bold, une lettre occupe ~0,62em et un espace ~0,28em, plus 0,1em d'approche dans les deux cas. A 13,6 : 25 signes x 13,6 x 0,72 = 245 3 espaces x 13,6 x 0,38 = 16 soit ~261 unites sur 276 disponibles. Ca tient, avec peu de marge. Verifie en capture a 14 : le texte fait le tour sans se recouvrir. Le texte precedent (« Les Ateliers Creatifs Maison Maria Stella », 43 signes) imposait 9px. Ce libelle-ci, plus court, autorise un corps nettement plus lisible. TOUTE mention ajoutee ici impose de refaire ce calcul, et de VERIFIER EN CAPTURE : le calcul donne un ordre de grandeur, la police tranche. */ } .mms-pastille text { fill: var(--color-highlight); font-family: "Montserrat", system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .mms-pastille__coeur { position: absolute; width: 34%; color: var(--color-highlight); } .mms-pastille__coeur svg { width: 100%; height: auto; animation: none; stroke-width: 1.4; } @keyframes mms-tourne { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 2. LE BANDEAU DES MATIERES -------------------------------------------------------------------------- */ .mms-bandeau { background: var(--color-secondary); color: var(--color-surface); padding: clamp(0.9rem, 1.6vw, 1.35rem) 0; overflow: hidden; } .mms-bandeau__piste { display: flex; width: max-content; animation: mms-defile 38s linear infinite; } .mms-bandeau__suite { display: flex; align-items: center; } .mms-bandeau__mot { font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; font-size: clamp(0.78rem, 1vw, 0.95rem); text-transform: uppercase; letter-spacing: 0.22em; padding-inline: clamp(1rem, 2vw, 2rem); white-space: nowrap; } .mms-bandeau__sep { color: var(--color-highlight); font-size: 0.6em; } @keyframes mms-defile { to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 3. LE MANIFESTE -------------------------------------------------------------------------- */ .mms-manifeste { position: relative; background: var(--color-surface); } .mms-manifeste .mms-grille { align-items: start; } .mms-manifeste__chiffre { grid-column: 1/span 4; display: grid; justify-items: start; gap: 0.6rem; /* Le chiffre REMONTE dans la section : il mord sur l'air du dessus au lieu de s'aligner sagement avec le texte. Deux elements qui ne partent pas de la meme ligne, c'est ce qui fait la composition. */ margin-top: clamp(-3.5rem, -3vw, -1rem); } .mms-manifeste__propos { grid-column: 6/span 7; display: grid; gap: 1.4rem; justify-items: start; margin-top: clamp(2rem, 6vw, 5.5rem); } .mms-manifeste__propos p { margin: 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.72; max-width: 46ch; } /* `.mms-chiffre` a ete RETIRE le 2026-08-07 avec le « 10 » qu'il habillait : son logo occupe desormais cette place. Mesure faite avant de supprimer -- `grep -rn "mms-chiffre" --include=*.php` ne rend plus rien. Un style orphelin se relit comme un composant existant, et la session suivante le cherche. */ /* -------------------------------------------------------------------------- SON LOGO QUI S'ECRIT (3. LE MANIFESTE) -------------------------------------------------------------------------- Trois etats, et l'ordre dans lequel ils sont ecrits compte : 1. AU REPOS -- lettres pleines, aucun filet. C'est l'etat par DEFAUT, donc celui qu'on voit si le JS ne tourne pas, s'il echoue, ou sous `prefers-reduced-motion`. Un logo dont la panne serait l'invisibilite serait un mauvais logo. 2. `.is-trace` -- lettres vides, filet apparent. Pose par le JS, et seulement par lui. 3. `.is-fini` -- retour a l'etat 1, une fois le geste accompli. `vector-effect: non-scaling-stroke` N'EST PAS UN DETAIL : le viewBox fait 1437 unites de large pour environ 400px affiches. Sans lui, un `stroke-width` de 2 serait divise par 3,5 a l'ecran et le trace serait un cheveu. -------------------------------------------------------------------------- */ .mms-logo-trace { width: 100%; max-width: clamp(240px, 32vw, 430px); line-height: 0; } .mms-logo-trace__svg { display: block; width: 100%; height: auto; } .mms-logo-trace { /* UNE SEULE ENCRE, ET IL A FALLU LA MESURER POUR LE SAVOIR. Le fichier source repartissait ses 56 traces en DEUX classes, `.cls-1` (53) et `.cls-2` (3), ce qui laissait croire a un logo bicolore -- des points ou un ornement. Releve des boites englobantes : les trois traces de `.cls-2` sont en HAUT du dessin (y de 0 a 110), ce sont les lettres du mot « Les ». Son logo est monochrome, comme le montre `proto/design-refs/logo.png`. Les deux classes ont donc ete fusionnees dans le fichier. Les couleurs vivent ici et non dans le SVG : son `