/* site.css — deborah-s-liporf-soins · direction « Constat » Éditorial nocturne à surimpression manuscrite : chemin de fer 01→08, grille brisée, profondeur en Z. AUCUN hex dans ce fichier : toutes les couleurs passent par les jetons de tokens.css (lint L3). Aucune famille monospace nulle part (garde-fou 15) — les chiffres sont rendus en chiffres tabulaires du corps. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--nuit); color: var(--papier); font-family: var(--font-body); font-size: var(--pas-corps); line-height: var(--interligne-corps); font-weight: 400; /* `overflow-x: clip` et non `hidden` : `hidden` sur body crée un conteneur de défilement qui casserait les ancrages, et il ne retient de toute façon pas WebKit tout seul (gotcha 2026-08-11). Le vrai garde-fou est plus bas, sur les objets qui débordent. */ overflow-x: clip; } img, svg, canvas { max-width: 100%; height: auto; display: block; } ::selection { background-color: var(--or-sourd); color: var(--papier); } /* ══ LES DEUX REGISTRES ═══════════════════════════════════════════════════════════════ Garde-fou 5 : les registres sont STRUCTURELS, pas surveillés. `--accent-texte` est redéclaré une fois par portée ; aucune classe de texte n'utilise `--or` ou `--rose` en dur. Un jeton hors de son registre n'est donc pas « à éviter » : il n'est pas atteignable. · sombre → l'accent de texte est --or (7,17:1 sur --nuit) ; · clair → l'accent de texte est --or-sourd (6,72:1 sur --papier) ou --rose (7,21:1). --or sur du clair mesure 2,32:1 et --rose sur du sombre 2,31:1 : ni l'un ni l'autre n'apparaît dans la portée où il serait illisible. */ [data-registre="sombre"] { --fond: var(--nuit); --fond-2: var(--nuit-2); --texte: var(--papier); --texte-second: var(--papier-rose); --accent-texte: var(--or); --accent-fort: var(--or-clair); --trait: var(--filet-nuit); --grain-ici: var(--grain-opacity); --rayon-ici: var(--radius-carte); /* L'appel à l'action et l'anneau de focus sont eux aussi portés par la portée : c'est ce qui rend la règle d'usage STRUCTURELLE. Un survol qui irait chercher --or-clair en dur poserait 2,5:1 sur du papier dès qu'on passerait dans le registre clair. */ --cta-fond: var(--or); --cta-fond-survol: var(--or-clair); --cta-texte: var(--nuit); --anneau: var(--or-clair); } [data-registre="clair"] { --fond: var(--papier); --fond-2: var(--dragee); --texte: var(--encre); --texte-second: var(--encre-2); --accent-texte: var(--or-sourd); --accent-fort: var(--rose); --trait: var(--filet); /* Garde-fou 7 : le blanc d'ACTE est posé à plat — sans grain, arête vive. C'est le drap d'examen lisse et jetable, jamais adouci. Le blanc d'ACCUEIL (--dragee) reprend le grain et le rayon, plus bas. */ --grain-ici: 0; --rayon-ici: 0; --cta-fond: var(--rose); --cta-fond-survol: var(--rose-fonce); --cta-texte: var(--papier); --anneau: var(--rose-fonce); } /* ══ GRILLE BRISÉE ════════════════════════════════════════════════════════════════════ 12 colonnes, jamais centrée : le corps alterne 2→7 et 6→12 d'un chapitre à l'autre. La symétrie centrée est le premier signe d'une page produite en série. */ .chap { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); max-width: var(--colonne-max); margin-inline: auto; padding: var(--v-chapitre) var(--gouttiere); color: var(--texte); isolation: isolate; } /* Les chapitres SOMBRES sont transparents : c'est le qui porte la couleur, et son palier change de chapitre en chapitre (famille de gestes « couleur »). Sans ça, chaque section peignait un aplat opaque PAR-DESSUS le halo et la vapeur, qui sont en position fixe derrière — les deux respirations existaient, tournaient, et étaient recouvertes. Mesuré : 0 % de surface changée à l'arrêt sur le premier écran, halo compris. Les chapitres CLAIRS, eux, restent opaques : leur fond est le geste (le papier d'examen qu'on POSE), et les deux blancs ne se touchent qu'en arête franche. */ .chap[data-registre="sombre"] { background-color: transparent; } .chap[data-registre="clair"] { background-color: var(--fond); } .chap__corps { grid-column: 2 / 8; } .chap__titre, .chap__sousligne { grid-column: auto; } .chap:nth-of-type(even) .chap__corps { grid-column: 6 / 13; } /* Le numéral de chapitre — le SEUL objet plein cadre du site. Il déborde du côté opposé au corps et il est COUPÉ NET par le bord de section : une découpe, jamais un fondu. */ .chap__num { position: absolute; top: calc(var(--v-chapitre) * 0.35); right: calc(var(--gouttiere) * -1); margin: 0; font-family: var(--font-display); font-size: 22vw; line-height: .78; font-weight: 400; /* --fond-2 donnait 1,28:1 sur le palier le plus sombre : un numéral décoratif reste du TEXTE pour l'audit d'accessibilité. À 297 px il relève du « grand texte », dont le seuil est 3,0 et non 4,5 — --filet le franchit sur les trois paliers (3,37 à 4,49 mesurés), là où --filet-nuit échouait sur --nuit à 2,93. Le défaut n'existait pas tant que les sections peignaient leur propre fond ; il est apparu en les rendant transparentes pour laisser voir le halo. Un correctif en découvre un autre — c'est pour ça qu'on remesure. */ color: var(--filet); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; pointer-events: none; user-select: none; z-index: 0; clip-path: inset(0 0 0 0); } .chap:nth-of-type(even) .chap__num { right: auto; left: calc(var(--gouttiere) * -1); } .chap > :not(.chap__num) { position: relative; z-index: 1; } /* ══ TYPOGRAPHIE ══════════════════════════════════════════════════════════════════════ */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--interligne-display); letter-spacing: -.012em; margin: 0 0 var(--v-groupe); text-wrap: balance; } h1 { font-size: var(--pas-chapitre); } h2 { font-size: var(--pas-chapitre); } h3 { font-size: var(--pas-titre); margin-bottom: var(--v-donnee); } p { margin: 0 0 var(--v-groupe); max-width: var(--mesure); } .chap__chapo { font-size: var(--pas-chapo); color: var(--texte-second); } .chap__note { font-size: var(--pas-note); color: var(--texte-second); } /* La largeur de la colonne de texte CHANGE d'un chapitre à l'autre : c'est le rythme de lecture qui fait la respiration, pas des marges vides. */ #c2 p, #c2 li { max-width: 46ch; } #c3 p, #c3 li { max-width: 52ch; } #c4 p, #c4 li { max-width: 38ch; } #c5 p, #c5 li { max-width: 50ch; } #c6 p, #c6 li { max-width: 44ch; } #c7 p, #c7 li { max-width: 56ch; } em { font-style: italic; } strong { font-weight: 600; } a { color: var(--accent-texte); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { color: var(--accent-fort); } /* Tous les chiffres du site, sans exception, en chiffres tabulaires du CORPS. Zéro caractère monospace (garde-fou 15) : le grief « ADN de planche technique » du juge E8 en v2 tenait à 27 % de mono, il est supprimé et pas plafonné. */ .nb, time, .fer__case, .chap__num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } /* ══ CHEMIN DE FER ════════════════════════════════════════════════════════════════════ L'ours de magazine : 8 cases numérotées, DANS le flux, répétées en tête de chaque chapitre. Pas de header collant, pas de burger — un `position: fixed` est aplati par la capture pleine page et se lit alors comme un défaut (gotcha 2026-07-29). */ .fer { grid-column: 2 / 13; display: flex; flex-wrap: wrap; gap: var(--v-donnee); margin-bottom: var(--v-bloc); padding-bottom: var(--v-donnee); border-bottom: 1px solid var(--trait); } .chap:nth-of-type(even) .fer { grid-column: 1 / 12; } .fer__case { font-size: var(--pas-note); color: var(--texte-second); text-decoration: none; padding: .5rem .6rem; min-width: 2.75rem; min-height: 2.75rem; /* ≥44 px : cible tactile, y compris sur 8 cases serrées */ display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-ui); transition: color var(--t-court) var(--courbe-entree), border-color var(--t-court) var(--courbe-entree); } .fer__case.est-ici { color: var(--accent-fort); border-color: var(--trait); } /* ══ LE SEUIL — chapitre 1, profondeur perçue ═════════════════════════════════════════ ⚠️ Le plein écran vise la SECTION (#c1), pas la div du seuil : `id="seuil"` est porté par la div. Combiné à `aspect-ratio: 16/9`, un `min-height: 100svh` posé sur elle lui donnait 1 445 px de large dans une colonne de 552 — c'était l'unique source du débordement horizontal aux trois viewports. */ #c1 { min-height: 100svh; align-content: center; } /* Le premier écran se compose EN LARGEUR, pas en pile. Empilé, le titre passait sous la ligne de flottaison : on entrait dans un site dont on ne lisait pas la phrase. Le corps du chapitre 1 devient donc une grille à deux colonnes — la parole à gauche, le seuil à droite, alignés sur la même ligne médiane. La scène y gagne aussi la largeur qui lui manquait pour que ses quatre ouvertures se lisent. */ #c1 .chap__corps { grid-column: 2 / 13; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: calc(var(--gouttiere) * 2); align-items: center; } #c1 .seuil { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-block: 0; } #c1 .chap__titre, #c1 .chap__sousligne, #c1 .constat, #c1 .chap__chapo, #c1 .lien-rdv { grid-column: 1; } #c1 .constat { margin-block: var(--v-groupe); } /* Le titre du seuil est une PHRASE, pas un mot d'accroche : soixante caractères composés à 96 px dans une demi-colonne, ce sont cinq lignes et un premier écran qui déborde. On ne raccourcit pas la phrase — c'est le différenciateur du brief, « le nombre de séances est fixé avant que le gel touche la peau » — on la compose à sa taille. Le LCP reste ce titre, à son état final dès la première frame. */ #c1 .chap__titre { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.5rem); margin-bottom: var(--v-groupe); max-width: 18ch; } #c1 .chap__sousligne { margin-bottom: var(--v-donnee); } #c1 .chap__chapo { display: none; } /* le chapô redit la sous-ligne : un seul des deux */ #c1 .fer { margin-bottom: var(--v-groupe); } .seuil { position: relative; aspect-ratio: 16 / 9; margin-block: var(--v-bloc); perspective: 1100px; transform-style: preserve-3d; /* Les calques débordent en Z : sans clip ici, ils fabriquent un débordement horizontal que la sonde de la gate E8 relèverait à 390 px. */ overflow: clip; border-radius: var(--rayon-ici); } .seuil__calque { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon-ici); will-change: transform; transform-origin: 50% 50%; } /* Deux réglages viennent du juge, qui a lu le premier écran comme « un collage de rectangles gris arrondis » : les ouvertures étaient trop PETITES pour que leur contenu se lise (à inset 23% 34% dans une colonne de 600 px, le couloir tenait dans 200 × 150 px, et `object-fit: cover` y recadrait un fragment sans repère). Elles sont élargies, la colonne du seuil passe de 6/11 à 7/11 de la largeur, et chaque calque reçoit un `object-position` qui vise ce qu'il doit montrer plutôt que le centre géométrique de sa photo. Quatre images OPAQUES empilées à `inset: 0` n'en montrent qu'une : celle du dessus. La profondeur ne vient pas de leur ordre en Z, elle vient de ce que chacune LAISSE VOIR de celle d'avant. Elles sont donc emboîtées comme des ouvertures successives — la rue en plein cadre, la porte au milieu, le couloir dans la porte — et le rideau n'est pas un plan mais une bande, coupée par le bord droit, exactement ce que décrit la direction. Les `scale` compensent la perspective, (1100 − z) / 1100, pour qu'aucun calque ne change de taille apparente au repos. */ .seuil__calque[data-z="1"] { /* la rue, au fond : plein cadre, floue */ transform: translateZ(-420px) scale(1.382); filter: blur(2px) brightness(.8); object-position: 50% 55%; } .seuil__calque[data-z="2"] { /* la porte vitrée, l'ouverture centrale */ inset: 7% 15%; width: auto; height: auto; object-position: 50% 60%; /* la porte, pas le ciel au-dessus */ transform: translateZ(-293px) scale(1.266); filter: blur(1.5px) brightness(.86); box-shadow: 0 0 0 1px var(--voile-fort), 0 30px 60px -20px var(--voile-fort); } .seuil__calque[data-z="3"] { /* le couloir, dans la porte : net */ inset: 17% 27%; width: auto; height: auto; object-position: 50% 45%; /* la fuite du couloir, pas le sol */ transform: translateZ(-166px) scale(1.151); box-shadow: 0 0 0 1px var(--voile-fort); } .seuil__calque[data-z="4"] { /* le rideau de cabine, coupé par le bord droit */ inset: 0 0 0 auto; width: 27%; height: 100%; transform: translateZ(-40px) scale(1.036); transform-origin: 100% 50%; box-shadow: -34px 0 60px -18px var(--voile-fort); } /* Garde-fou 2 : le h1 vit HORS de la scène. Il n'est descendant d'aucun élément dont le Z varie, il ne porte aucun `will-change`, et son opacité est pleine dans la feuille servie — sans garde `.has-js`. C'est le LCP, il est à sa place dès la première frame. */ /* ══ LE CALQUE DE CONSTAT — le dispositif signature ═══════════════════════════════════ Ce qui a été réellement CONSTATÉ sur quelqu'un flotte DEVANT la page et pose son ombre dessus. Garde-fou 8 : il est lisible À L'ARRÊT — translateZ ≥ +24 px et ombre portée visible, sans qu'aucune animation ne soit en cours. Le juge E8 lit des PNG. */ .constat { position: relative; max-width: 46ch; margin: var(--v-bloc) 0; padding: var(--v-groupe); background-color: var(--papier); color: var(--encre); border-radius: 0; /* le blanc d'ACTE : arête vive, jamais adouci */ font-family: var(--font-display); font-size: var(--pas-titre); line-height: 1.18; transform: translateZ(24px) rotate(-.35deg); box-shadow: 0 18px 42px -12px var(--voile-fort), 0 3px 10px -4px var(--voile); will-change: transform; } .constat::after { /* Le liseré du calque : un filet qui souligne, jamais une équerre. */ content: ''; position: absolute; inset: auto var(--v-groupe) calc(var(--v-groupe) * .55) var(--v-groupe); height: 1px; background-color: var(--filet); } .constat time, .constat .nb { color: var(--rose-fonce); } /* ══ LE TRI — chapitre 2, quatre bandes de hauteur INÉGALE ════════════════════════════ Proportionnelles au nombre d'actes (6 / 2 / 3 / 2), jamais quatre cartes identiques. */ .familles { display: grid; gap: var(--v-donnee); margin-block: var(--v-bloc); } .carte-famille { display: block; padding: var(--v-groupe); border: 1px solid var(--trait); border-radius: var(--rayon-ici); background-color: var(--fond-2); color: var(--texte); text-decoration: none; will-change: transform, opacity; } /* Les min-height ne suffisaient PAS : une vignette en aspect-ratio 3/2 fixe donne la même hauteur d'image aux quatre cartes, et cette hauteur écrase la contrainte. Mesuré deux fois par le juge, aux mêmes quatre nombres : 762 / 762 / 762 / 813 px. C'est donc le RATIO de l'image qui doit varier — la proportion d'actes se lit alors dans la forme de la vignette elle-même, avant tout chiffre : 6 actes = un portrait, 2 actes = une bande. Vérifié après coup, pas supposé (voir le journal). */ .carte-famille[data-actes="6"] .carte-famille__media { aspect-ratio: 4 / 5; } .carte-famille[data-actes="3"] .carte-famille__media { aspect-ratio: 1 / 1; } .carte-famille[data-actes="2"] .carte-famille__media { aspect-ratio: 16 / 7; } .carte-famille[data-actes="6"] { min-height: 30rem; } .carte-famille[data-actes="3"] { min-height: 24rem; } .carte-famille[data-actes="2"] { min-height: 20rem; } .carte-famille h3 { color: var(--accent-texte); margin-bottom: 0; } /* ══ LES ACTES, LES SÉQUENCES ═════════════════════════════════════════════════════════ */ .actes, .sequence { list-style: none; margin: 0 0 var(--v-bloc); padding: 0; } .acte, .sequence > li { padding: var(--v-groupe) 0 var(--v-groupe) var(--v-groupe); border-left: 2px solid transparent; border-top: 1px solid var(--trait); } .acte { transition: background-color var(--t-moyen) var(--courbe-entree), border-left-color var(--t-moyen) var(--courbe-entree); } .acte:hover, .acte:active { border-left-color: var(--accent-texte); } .acte__nom { font-family: var(--font-display); font-size: var(--pas-titre); margin: 0 0 var(--v-donnee); } .acte__texte { margin: 0 0 var(--v-donnee); } .acte__cote { margin: 0; font-size: var(--pas-note); color: var(--texte-second); } /* L'escalier typographique du chapitre 3 : les six actes descendent. */ #c3 .acte:nth-child(1) { margin-left: 0; } #c3 .acte:nth-child(2) { margin-left: 1.5rem; } #c3 .acte:nth-child(3) { margin-left: 3rem; } #c3 .acte:nth-child(4) { margin-left: 4.5rem; } #c3 .acte:nth-child(5) { margin-left: 6rem; } #c3 .acte:nth-child(6) { margin-left: 7.5rem; } /* ══ LA SCÈNE DU TURNTABLE — chapitre 4 ═══════════════════════════════════════════════ */ .turntable { position: relative; aspect-ratio: 1 / 1; /* réservé : zéro CLS */ align-self: start; } .turntable canvas, .turntable__poster { position: absolute; inset: 0; width: 100%; height: 100%; } .turntable__legende { position: absolute; inset: auto 0 -2.4rem 0; font-size: var(--pas-note); color: var(--texte-second); } .lien-rdv { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .85rem 1.4rem; background-color: var(--cta-fond); color: var(--cta-texte); text-decoration: none; font-weight: 600; border-radius: var(--radius-ui); will-change: transform; transition: transform var(--t-court) var(--courbe-entree), background-color var(--t-court) var(--courbe-entree); } .pastille { display: inline-block; padding: .35rem .7rem; border: 1px solid var(--trait); border-radius: var(--radius-badge); font-size: var(--pas-note); color: var(--texte-second); will-change: transform; transition: transform var(--t-court) var(--courbe-entree), color var(--t-court) var(--courbe-entree); } .carte-famille__media { will-change: transform, filter; transition: transform var(--t-moyen) var(--courbe-entree), filter var(--t-moyen) var(--courbe-entree); } /* ══ AMBIANCE ═════════════════════════════════════════════════════════════════════════ Deux objets, deux respirations. Elles sont ancrées : le halo est le plafonnier, la dérive est la vapeur. Elles ne portent AUCUNE information — le garde-fou 12 l'exige. */ .halo { position: fixed; inset: auto 0 0 0; height: 38vh; background-image: radial-gradient(58% 100% at 50% 100%, var(--or-sourd), transparent 72%); opacity: .3; pointer-events: none; z-index: 0; } /* La vapeur était peinte en --voile — un noir translucide sur un fond noir. Elle bougeait parfaitement, et ne se voyait pas : mesuré 0 % de surface changée au premier écran, à l'arrêt. Une teinte qui n'a aucun contraste avec son fond n'est pas discrète, elle est absente. Elle passe donc sur --filet-nuit, la seule valeur claire assez sourde pour rester une buée. */ .vapeur { position: fixed; top: 16vh; left: 6vw; width: 190px; height: 190px; border-radius: 50%; background-image: radial-gradient(circle at 50% 50%, var(--filet-nuit), transparent 68%); opacity: .3; filter: blur(26px); pointer-events: none; z-index: 0; } [data-registre="clair"] ~ .vapeur, body[data-palier="clair"] .vapeur { opacity: 0; } /* Dans les deux chapitres clairs, le halo doré n'a plus lieu d'être : c'est le palier de lumière porté par qui le pilote, pas un sélecteur frère (qui ne matchait rien). */ body[data-palier="clair"] .halo { opacity: 0; } /* ══ PIED DE PAGE ═════════════════════════════════════════════════════════════════════ */ .pied { background-color: var(--encre); color: var(--papier-rose); padding: var(--v-bloc) var(--gouttiere); font-size: var(--pas-note); } .pied a { color: var(--or); } /* La mention légale est le seul texte que la loi impose d'afficher : elle passe le seuil de TEXTE (4,5:1), pas celui d'un filet. --filet-nuit mesure 3,09:1 — c'est un jeton « ui ». */ .pied__mention { max-width: 62ch; color: var(--papier-rose); } /* ══ ACCESSIBILITÉ ════════════════════════════════════════════════════════════════════ */ .skip-link { position: absolute; left: -9999px; background-color: var(--papier); color: var(--encre); padding: .75rem 1rem; z-index: 100; } .skip-link:focus { left: var(--gouttiere); top: var(--gouttiere); } :focus-visible { outline: 2px solid var(--anneau); outline-offset: 3px; } /* ══ MOBILE ═══════════════════════════════════════════════════════════════════════════ La grille brisée devient un décalage d'une demi-colonne, le numéral passe en fond de section, la profondeur en Z est CONSERVÉE (motion.js réduit son amplitude à 60 %). */ @media (max-width: 767px) { .chap { grid-template-columns: repeat(6, minmax(0, 1fr)); } .chap__corps, .chap:nth-of-type(even) .chap__corps { grid-column: 1 / 7; } .fer, .chap:nth-of-type(even) .fer { grid-column: 1 / 7; } .seuil, .turntable { grid-column: auto; } .turntable { margin-top: var(--v-bloc); } .chap__num { font-size: 34vw; right: auto; left: 0; /* Sous le chemin de fer, pas derrière. Le décalage précédent avait été calculé pour un fer sur UNE ligne : à 390 px, huit cases de 2,75 rem passent sur DEUX lignes, et le numéral leur rentrait dedans (« 02 » sur la hampe du 1, « 07 » dans la panse du 0). La valeur couvre désormais les deux lignes plus le filet et sa marge. */ top: calc(var(--v-chapitre) * 0.2 + 9.5rem); opacity: .7; } .chap:nth-of-type(even) .chap__num { left: 0; } .seuil { aspect-ratio: 4 / 5; } /* En dessous de 768 px, la composition en largeur n'a plus de place : on repile, et le seuil passe AVANT le titre — on entre, puis on lit. ⚠️ `grid-column: 2 / 13` doit être repris ici : la grille mobile n'a que 6 colonnes, et une ligne 13 qui n'existe pas fait CRÉER des colonnes implicites — le corps sortait de la section, et avec lui la scène. Un sélecteur d'id ne se laisse pas écraser par la règle de classe qui suit. */ #c1 .chap__corps { grid-column: 1 / 7; grid-template-columns: minmax(0, 1fr); } #c1 .seuil { grid-column: 1; grid-row: 1; margin-bottom: var(--v-bloc); } #c1 .chap__titre, #c1 .chap__sousligne, #c1 .constat, #c1 .chap__chapo, #c1 .lien-rdv { grid-column: 1; } /* En mobile, les ouvertures se resserrent : la même lecture, moins de marge perdue. */ .seuil__calque[data-z="2"] { inset: 8% 14%; } .seuil__calque[data-z="3"] { inset: 18% 24%; } .seuil__calque[data-z="4"] { width: 34%; } #c3 .acte { margin-left: 0 !important; } .constat { max-width: none; font-size: var(--pas-chapo); } .vapeur { display: none; } /* 150 px de flou sur 390 px de large, ce n'est plus un fond */ } @media (min-width: 768px) and (max-width: 1023px) { .chap__corps, .chap:nth-of-type(even) .chap__corps { grid-column: 2 / 12; } /* Entre 768 et 1023 px, la section touche les bords : le numéral débordait de la valeur exacte de sa gouttière négative (mesuré 795 px de bord droit pour 768 de viewport). Au-delà de 1024, la largeur maximale de 76rem ménage la marge qui l'absorbe. */ .chap__num { right: 0; } .chap:nth-of-type(even) .chap__num { left: 0; } } /* ══ COMPLÉMENTS — écrits APRÈS lecture du markup réellement servi ════════════════════ Le contrat de classes a bougé à l'écriture (`.familles`/`.carte-famille`, `.temps`, `.question`, `.canal`) : c'est le CSS qui s'aligne sur le HTML, jamais l'inverse. */ .chap__titre { font-size: var(--pas-chapitre); } .chap__sousligne { font-size: var(--pas-chapo); color: var(--texte-second); max-width: 46ch; } .chap__visuel { width: 100%; border-radius: var(--rayon-ici); margin-block: var(--v-bloc); } /* Les quatre familles : des bandes de hauteur INÉGALE, proportionnelles au nombre d'actes réels (6 / 2 / 3 / 2). Quatre cartes identiques diraient que les quatre familles se valent — c'est précisément ce que le chapitre du tri doit défaire. */ .carte-famille { position: relative; display: grid; gap: var(--v-donnee); } .carte-famille__num { margin: 0; font-family: var(--font-display); font-size: var(--pas-titre); color: var(--trait); } .carte-famille__media { width: 100%; object-fit: cover; border-radius: var(--rayon-ici); /* Plus de background-color ici : quand la vignette était une div vide peinte de la couleur de sa carte, elle ajoutait ~433 px de néant par famille — ce vide égalisait les hauteurs (762/762/762/813 px mesurés par le juge) et annulait la différenciation 6/2/3/2 que le CSS revendiquait juste en dessous. Une image la rend, et rend du même coup visibles le reveal `data-net` et le survol, qui ne s'appliquaient à rien. */ } .carte-famille__separe { margin: 0 0 var(--v-groupe); color: var(--texte-second); font-size: var(--pas-note); max-width: 44ch; } /* Les séquences de temps — l'ordre est ce qui compte, il est donc numéroté et aligné. */ .sequence { counter-reset: temps; } .temps { display: grid; grid-template-columns: auto 1fr; column-gap: var(--v-groupe); align-items: baseline; } .temps__pastille { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; color: var(--accent-texte); font-size: var(--pas-note); } .temps__titre { grid-column: 2; margin: 0 0 var(--v-donnee); font-family: var(--font-display); font-size: var(--pas-titre); } .temps__detail { grid-column: 2; margin: 0; color: var(--texte-second); } /* Les questions posées en cabine, y compris celles qui dérangent. */ .question { padding: var(--v-groupe) 0; border-top: 1px solid var(--trait); max-width: 56ch; } .question > :first-child { font-family: var(--font-display); font-size: var(--pas-titre); margin: 0 0 var(--v-donnee); } .question > :last-child { margin: 0; color: var(--texte-second); } .liste-franche { list-style: none; padding: 0; margin: 0 0 var(--v-bloc); max-width: 56ch; } .liste-franche li { padding: var(--v-donnee) 0; border-bottom: 1px solid var(--trait); } /* Les trois voies de contact, en hauteurs décroissantes : une seule action primaire. */ .canaux { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v-groupe); } .canal { border-bottom: 1px solid var(--trait); padding-bottom: var(--v-groupe); } .canal a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--texte); } .canaux > li:nth-child(1) a { font-size: var(--pas-titre); } .canaux > li:nth-child(2) a { font-size: var(--pas-chapo); } .canaux > li:nth-child(3) a { font-size: var(--pas-corps); } .canal a:hover { color: var(--accent-fort); } .canal a:active { transform: scale(.985); } /* Le « −4 cm » manuscrit — la seule chose du site qui imite un geste humain. Il vit DANS le calque de constat, donc sur du --papier : sa couleur est celle du texte constaté. */ .ecrit { color: var(--rose-fonce); margin-top: var(--v-donnee); max-width: 190px; height: auto; } /* Le rideau de la bascule de registre : le papier d'examen est POSÉ, arête franche. */ #c7 .chap__corps, #c8 .chap__corps { background-color: var(--fond); padding: var(--v-bloc); border-radius: 0; } /* Le filet vivant — un trait sous le bord haut des pages annexes. */ .filet-vivant { position: fixed; inset: 0 0 auto 0; height: 2px; background-image: linear-gradient(90deg, transparent, var(--or-sourd) 22%, var(--or-sourd) 78%, transparent); opacity: .35; pointer-events: none; z-index: 2; }