/* ══ « LE PAPIER, ET DEUX FOIS LE FOUR » — peau de l'atelier farine (v5) ════ La feuille ORCHESTRE : les sept blocs propres du monde portent déjà leur forme, ici on pose la lumière, le rythme des fonds, et les gestes qui n'ont de sens que dans CE récit. LA RÈGLE QUI TIENT TOUT LE RESTE (retour PO 2026-08-19, « plusieurs soucis de contrastes avec les textes ») : AUCUN TEXTE NE SE POSE SUR UNE IMAGE. La v4 empilait halos, ombres portées et voiles pour rattraper un texte blanc sur une vidéo blanche — c'était traiter le symptôme. La vidéo quitte donc le fond de page et prend SA COLONNE (librairie du whaou §2) ; le texte vit sur le papier nu, à côté. Toutes les béquilles de la v4 sont retirées avec elle. ═════════════════════════════════════════════════════════════════════════ */ ::selection { background: #171310; color: #f7f3ec; } /* Le monde est ENCRE SUR FARINE : le défaut moteur est un texte blanc, pensé pour les vidéos sombres. */ .scenario-beat, .scenario-world { color: #171310; } /* LE PAPIER DE FOND. Il est posé en couche FIXE derrière la vidéo (z-index -2) plutôt qu'en fond de `.scenario-page` : un fond sur la page passerait DEVANT la vidéo, qui vit en indice négatif, et la ferait disparaître. */ .scenario-page::before { content: ''; position: fixed; inset: 0; z-index: -3; background: #f7f3ec; pointer-events: none; } /* ── LA COLONNE VIDÉO (whaou §2) ────────────────────────────────────────── Elle occupe la moitié droite et ne bouge plus : le scrub se lit dedans, les mots se lisent dehors. La coupure entre les deux actes — un plan large en plongée, puis un macro collé à la croûte — se voit alors vraiment, ce qui était tout le reproche fait au défilement latéral de la v4. */ @media (min-width:1025px) { [data-scenario-video] { left: 47%; width: 53%; border-left: 1px solid rgba(23, 19, 16, 0.14); } .scenario-scrim { left: 47%; width: 53%; background: linear-gradient(to right, rgba(247, 243, 236, 0.34) 0%, transparent 22%), linear-gradient(to bottom, rgba(23, 19, 16, 0.14) 0%, transparent 20%, transparent 80%, rgba(23, 19, 16, 0.16) 100%); } } /* MOBILE : la colonne devient une bande HAUTE, et surtout elle cesse d'être FIXE. Une bande fixe sur 390 px de large est un piège : la colonne de texte du hero fait 800 px de haut (titre, sous-titre, bouton, carte produit), elle ne tient pas dans le tiers d'écran qui reste, et tout ce qui déborde repasse sur l'image — c'est-à-dire exactement le défaut qu'on corrige. En `absolute`, la bande appartient à la page : elle coiffe le hero, défile avec lui, et le texte se déroule dessous sur le papier, aussi long qu'il veut. La règle « jamais un mot sur une image » tient sans contorsion. */ @media (max-width: 720px) { [data-scenario-video] { position: absolute; top: 0; left: 0; width: 100%; height: 46svh; border-bottom: 1px solid rgba(23, 19, 16, 0.14); } .scenario-scrim { position: absolute; top: 0; left: 0; width: 100%; height: 46svh; background: linear-gradient(to bottom, rgba(23, 19, 16, 0.22) 0%, transparent 24%); } } /* Plus aucun texte n'est sur l'image : les ombres portées du moteur n'ont plus d'objet, et elles salissaient l'encre sur le papier. */ .scenario-scrim-text { text-shadow: none; } /* Étalonnage de la vidéo scrubée — aucun ré-export (whaou §8). */ [data-scenario-video] { filter: saturate(1.06) contrast(1.05); } /* ── LE RYTHME DES FONDS (whaou §14) ────────────────────────────────────── Chaque section change de papier, du plus clair au plus sombre : la page descend dans l'atelier au fur et à mesure qu'on avance. Ce sont des fonds OPAQUES — sans eux la vidéo fixe du hero traverse tout le récit. Deux d'entre eux sont NOIRS, et c'est la respiration du récit (whaou §14) : les ingrédients suspendus ouvrent le récit de fabrication, le four le ferme. Ils ENCADRENT donc la partie « atelier » (la trace, les 48 heures), et le second débouche directement sur la carte : on a faim, la carte arrive. */ .blk-farine-souffle { background: #f7f3ec; } .blk-atelier-constellation { background: #0d0b0a; } .blk-farine-empreinte { background: #f2ece1; } .blk-atelier-rail { background: #ece4d5; } .blk-atelier-rail-punaise { background: #ece4d5; } .blk-farine-releve { background: #f7f3ec; } .blk-atelier-appetit { background: #0d0b0a; } .loc { background: #f2ece1; } .blk-farine-cachet { background: #e7ddcb; } .sc-pied { background: #171310; } /* Le GRAIN de farine (whaou §5c) — bruit fractal SVG à 5 %, aucun asset. Il empêche les grands aplats clairs de « bander » et donne le poudré. */ .blk-farine-souffle, .blk-farine-releve, .blk-farine-cachet { background-image: url("data:image/svg+xml;utf8,"); } /* ── LE LOGOTYPE ET LES MOTS DU CHROME ───────────────────────────────────── */ /* LA NAV EST UNE BARRE DE PAPIER, opaque, toujours. Elle est `fixed` : elle survole donc successivement la colonne vidéo, deux salles d'encre et cinq fonds clairs. Une encre transparente y devient illisible une section sur trois (constaté en recette sur la salle noire). Un bandeau opaque est le seul réglage qui tienne sur TOUTE la page — et un bandeau de papier reste dans la matière du monde. */ .scenario-nav { background: #f7f3ec; border-bottom: 1px solid rgba(23, 19, 16, 0.1); } .scenario-nav-logo { color: #171310; font-family: 'Instrument Serif', 'Georgia', serif; letter-spacing: 0; } .scenario-nav-links a:not(.scenario-nav-cta) { color: #171310; } .scenario-nav-links a:not(.scenario-nav-cta):hover { color: #a83c0b; } /* Le bouton de la nav était en ENCRE sur la braise pleine : 3,4:1, sous le seuil AA. Sur un aplat de couleur, c'est le papier qui doit écrire. */ /* Classe doublée : le bouton vit DANS « .scenario-nav-links », dont la règle de couleur (0,1,1) l'emportait sur une classe seule et lui rendait l'encre. */ .scenario-nav-cta.scenario-nav-cta { background: #a83c0b; color: #fdf9f2; border-radius: 0; } .scenario-nav-cta.scenario-nav-cta:hover { background: #8f3309; color: #fdf9f2; } /* Le sur-titre de la frise vit sur le beige le plus soutenu de la page : la braise claire n'y tenait que 4,3:1 pour un texte de 11 px. */ .blk-atelier-rail-eyebrow { color: #8f3309; } .scenario-it { font-style: italic; font-weight: 400; color: #b8430e; } .scenario-eyebrow { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase; color: #b8430e; } .scenario-hint { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.4em; color: #7a2b06; } /* L'invite se recale sous la COLONNE DE TEXTE : centrée sur la page, elle tombait au milieu de la vidéo, où elle n'invite plus personne. On déplace son ANCRE (24vw = le milieu de la colonne), jamais son `transform` : celui-ci porte le petit balancement animé par le moteur, et le neutraliser laissait l'invite décalée d'une demi-largeur hors de l'écran. Elle remonte aussi au-dessus du compteur de mouture, qui occupe le coin. */ @media (min-width:1025px) { .scenario-hint { left: 24vw; right: auto; bottom: 74px; } } .scenario-h1, .scenario-h2 { font-weight: 400; letter-spacing: -0.01em; color: #171310; } .scenario-copy, .scenario-subtitle { color: #4a4237; } /* CTA fantôme mono ; la braise pleine est gardée pour la décision. */ .scenario-cta.scenario-cta { background: none; color: #171310; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.8rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em; border: 1px solid #171310; border-radius: 0; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .scenario-cta.scenario-cta:hover { background: #171310; color: #f7f3ec; transform: translateY(-2px); } [data-compo='gauche-cta'] .scenario-cta.scenario-cta { background: #b8430e; color: #fdf9f2; border-color: #b8430e; } [data-compo='gauche-cta'] .scenario-cta.scenario-cta:hover { background: #8f3309; border-color: #8f3309; } /* BARRE DE MOUTURE + relevé chiffré du scroll. */ .scenario-prog { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 59; background: rgba(23, 19, 16, 0.08); } .scenario-prog i { display: block; height: 100%; background: #b8430e; transform: scaleX(var(--scenario-page-progress, 0)); transform-origin: left; } .scenario-pct { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.3em; color: #7a2b06; } .scenario-pct::after { counter-reset: sc-pct calc(var(--scenario-page-progress, 0) * 100); content: 'MOUTURE — ' counter(sc-pct) '%'; } /* ── LE RÉCIT DANS LA COLONNE DE GAUCHE ─────────────────────────────────── Le texte se lit à gauche sur le papier, la vidéo se regarde à droite dans sa colonne : c'est la même règle pour les trois beats, pas seulement le hero. */ @media (min-width:1025px) { .scenario-beat { align-items: flex-start; text-align: left; padding-left: 8vw; padding-right: 57vw; } .scenario-beat .scenario-copy { align-items: flex-start; text-align: left; } .scenario-chips { justify-content: flex-start; } } /* MOBILE : le hero commence SOUS la bande, et il a le droit de dépasser d'un écran — c'est une page, pas une diapositive. Les beats suivants reprennent leur plein écran, sur le papier nu. */ @media (max-width: 720px) { /* Le bas réserve la place de l'INVITE (#483) : elle est ancrée au bas du hero (4vh + deux lignes), et 3,5rem ne suffisaient pas — « scrollez, la farine retombe » s'écrivait par-dessus le bouton de la carte (8 px de recouvrement mesurés à 390 × 844). */ [data-compo='hero-minimal-tiers'] { min-height: 0; justify-content: flex-start; padding: calc(46svh + 34px) 1.25rem 5.25rem; } .scenario-beat { justify-content: center; } /* La pastille arrondie du sous-titre est un reste du moteur : elle est aplatie sur desktop et l'était restée sur mobile — un cartouche à coins ronds au milieu d'une page qui n'en a aucun. */ .scenario-subtitle { background: none; border: 0; border-radius: 0; padding: 0; color: #2c261f; } } /* ── LE HERO : L'ACCROCHE SEULE, CENTRÉE DANS SA COLONNE ───────────────── Retour PO 2026-08-19 : la carte-produit vitrée « cassait trop l'ensemble ». Elle est retirée des slots du beat (cf. fiche) et la colonne se recentre autour de la seule chose à faire ici : lire la promesse. Le texte est donc CENTRÉ dans la moitié gauche — aligné à gauche, il laissait un vide béant entre lui et le bord de la vidéo. */ @media (min-width:1025px) { [data-compo='hero-minimal-tiers'] { align-items: center; justify-content: center; text-align: center; padding: 76px 51vw 52px 4vw; gap: 14px; } [data-compo='hero-minimal-tiers'] .scenario-copy { align-items: center; text-align: center; } [data-compo='hero-minimal-tiers'] .scenario-h1 { font-size: clamp(2.6rem, min(5.2vw, 9vh), 4.2rem); line-height: 1.04; max-width: 15ch; margin: 0.1em 0; transform: none; } /* Le halo de papier de la v4 est retiré : le sous-titre ne tombe plus sur la pièce, il est sur le papier. Un halo sur un fond uni ne fait que baver. */ [data-compo='hero-minimal-tiers'] .scenario-subtitle { background: none; border: 0; border-radius: 0; padding: 0; max-width: 34ch; line-height: 1.6; margin: 0 0 10px; color: #2c261f; text-shadow: none; } [data-compo='hero-minimal-tiers'] .scenario-chips { justify-content: center; } } /* Aucun beat ne porte plus de carte, mais la règle reste : si un commerçant en ajoutait une par l'éditeur, elle ne reviendrait pas en cartouche vitré. */ .scenario-carte.scenario-glass { background: rgba(251, 248, 242, 0.96); border: 1px solid rgba(23, 19, 16, 0.16); border-radius: 0; backdrop-filter: none; } .scenario-carte-note { color: #b8430e; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.12em; } .scenario-carte-prix { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; color: #171310; } /* ── LE BEAT MANIFESTE S'ENCRE AU SCROLL (whaou §17) ────────────────────── Deux défauts corrigés le 2026-08-19 (retour PO : « la nuance de couleur sur le texte n'est pas bonne ») : 1. LA HORLOGE ÉTAIT LA MAUVAISE. Le remplissage suivait `--scenario-page-progress`, la course de TOUTE la page. Depuis que la page est matérialisée (récit + neuf blocs), ce beat vit entre 8 % et 17 % de cette course : la phrase n'était encrée qu'à 10 % quand on la lisait, et n'achevait de se remplir qu'au trentième pour cent, très loin derrière. Elle se remplit désormais sur SON PROPRE passage (`view()`), donc exactement pendant qu'on la lit, quelle que soit la longueur de la page. 2. LE GRIS D'ATTENTE ÉTAIT UN GRIS EFFACÉ. À 16 % d'opacité, la partie non encore encrée n'était pas « en attente », elle était illisible. Le gris de mouture (#8d8478) tient 3,3:1 sur le papier — au-dessus du seuil AA des grands textes, donc lisible AVANT même de s'encrer. Le dégradé est joué en `background-position` (interpolable partout) plutôt qu'en pourcentage calculé : pas besoin d'enregistrer une propriété personnalisée, et sans timeline de scroll la phrase est simplement ENCRÉE d'emblée — jamais grise. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { [data-compo='centre-xxl'] .scenario-h2 { font-size: clamp(2.2rem, 3.6vw, 3.8rem); line-height: 1.06; max-width: 15ch; color: transparent; -webkit-background-clip: text; background-clip: text; text-shadow: none; background-image: linear-gradient(100deg, #171310 0 50%, #8d8478 50% 100%); background-size: 220% 100%; background-position: 0 0; background-repeat: no-repeat; } [data-compo='centre-xxl'] .scenario-h2 .scenario-it { color: #a83c0b; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { /* La fenêtre court de la fin de l'entrée au début de la sortie : un beat fait exactement un écran de haut, sa phase « contain » est donc un POINT, et une plage qui s'y arrête finissait le remplissage avant même que le beat ait fini d'apparaître (il ne se dévoile qu'à 88 % de couverture, seuil gelé). On lit maintenant la phrase pendant qu'elle s'encre, pas après. */ [data-compo='centre-xxl'] .scenario-h2 { animation: farine-encrage linear both; animation-timeline: view(); animation-range: entry 72% exit 28%; } } } } @keyframes farine-encrage { from { background-position: 100% 0; } to { background-position: 0 0; } } /* APPARITION « poussière-farine » : la poussière RETOMBE, lentement. */ .scenario-motion-on [data-scenario-apparition='poussiere-farine'] [data-scenario-beat] { filter: blur(10px); transform: translateY(26px); transition-duration: 800ms; transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); } .scenario-motion-on [data-scenario-apparition='poussiere-farine'] [data-scenario-beat].in { filter: none; transform: none; } @media (prefers-reduced-motion: no-preference) { [data-scenario-apparition='poussiere-farine'] [data-scenario-beat][data-scenario-hero] { animation: farine-hero 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } } @keyframes farine-hero { from { filter: blur(10px); transform: translateY(26px); } to { filter: none; transform: none; } } /* ── LES SEPT FORMES PROPRES, réglées pour CE récit ──────────────────────── */ /* L'EMPREINTE : la pièce et son creux doivent faire la MÊME taille — c'est le même objet, l'un est le négatif de l'autre. La v4 y arrivait par un `scale(1.34)` qui compensait la marge transparente du détouré : agrandi dans une boîte qui ne bougeait pas, il DÉBORDAIT et se faisait couper (rejet PO : « l'image de la pizza est coupée »). Le détouré est maintenant rogné à la source (`piece-nette-v5`), donc aucune échelle. */ .blk-farine-empreinte-piece img { transform: none; } /* Le creux prend EXACTEMENT les proportions de la pièce : c'est sa trace, pas une forme décorative. La pièce est maintenant vue de dessus (1,08 — mesuré sur le détouré), le creux est donc quasi circulaire ; il était en ellipse 1,42 tant que la pièce était photographiée de trois quarts. Les 90 % rendent au creux la largeur VISIBLE de la pièce (le détouré porte 5 % de marge transparente de chaque côté pour son ombre). */ .blk-farine-empreinte-creux { width: 90%; aspect-ratio: 1.08; justify-self: center; } /* LE MANIFESTE : le voile emprunte le papier de SA section, sinon on verrait un rectangle d'une autre teinte se promener sur le titre. */ .blk-farine-souffle-voile { background-color: #f7f3ec; } /* LA CONSTELLATION — première salle d'encre. Les ingrédients sont la SEULE couleur du cadre : c'est la discipline de motion13, et c'est elle qui fait que l'œil ne va nulle part ailleurs. */ /* Le titre est descendu SOUS le centre : il croise alors le bas de la pièce au lieu d'être coupé en deux par elle (whaou §7 — le volume qui traverse le titre géant), et les deux mots restent lisibles de part et d'autre. */ /* Le titre est PLUS LARGE que la pièce, volontairement : c'est ce qui laisse dépasser assez de lettres de chaque côté pour que l'œil reconstitue le mot. À 9vw il faisait 700 px pour une pièce de 416 — la pièce en mangeait 60 %, et « Rien de plus. » se lisait « Ri…us. ». */ /* 30 % et pas moins : c'est la première valeur où le sommet des capitales passe SOUS la barre de nav sans s'y faire trancher (mesuré, +7 px de marge, section centrée). À 26 % la phrase se lit en entier mais la nav — un bandeau de papier opaque — coupe net le haut du R, du d et du l. */ .blk-atelier-constellation-title { top: 30%; font-size: clamp(3rem, 12.5vw, 10rem); } /* En scène carrée, la pièce occupe 58 % de la largeur et couvre le titre presque entièrement : on le descend sous elle. */ @media (max-width: 720px) { .blk-atelier-constellation-title { top: 88%; font-size: clamp(2.6rem, 15vw, 4.6rem); } } .blk-atelier-constellation-eyebrow { color: #f08049; } .blk-atelier-constellation-body { color: rgba(247, 243, 236, 0.72); } /* LA FRISE — le chiffre en contour est l'ossature graphique du monde : on le retrouve tracé, jamais rempli, du rail jusqu'aux plaques. */ /* Le chiffre en contour est, depuis qu'on a retiré son doublon en braise, le SEUL endroit où le repère de temps est écrit : il doit se lire, pas seulement se deviner. Trait plus épais et plus dense — il reste creux, il n'est plus fantôme. */ .blk-atelier-rail-heure { -webkit-text-stroke: 1.6px rgba(23, 19, 16, 0.62); } .blk-atelier-rail-vue { border: 1px solid rgba(23, 19, 16, 0.16); } .blk-atelier-rail-plaque { background: #f7f3ec; } /* LE FOUR — seconde salle d'encre, et la seule page où le prix est en braise pleine : c'est le moment de la décision. */ .blk-atelier-appetit-eyebrow, .blk-atelier-appetit-prix { color: #f08049; } /* Mention d'atelier : 44 % d'opacité tombait à 4,0:1 sur l'encre — sous le seuil AA d'un texte de 11 px. Mesuré, pas estimé. */ .blk-atelier-appetit-note { color: rgba(247, 243, 236, 0.66); } .blk-atelier-appetit-cta { border-color: rgba(247, 243, 236, 0.5); } /* LE RELEVÉ : au survol, la ligne s'encre en pleine page — le coup de tampon. C'est le seul aplat sombre du corps de page, gardé pour le moment du choix. */ .blk-farine-releve-item { padding: 1.1rem 1.2rem; transition: background 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); } .blk-farine-releve-item:hover { background: #171310; } .blk-farine-releve-item:hover .blk-farine-releve-nom { color: #f7f3ec; font-style: italic; } .blk-farine-releve-item:hover .blk-farine-releve-composition { color: rgba(247, 243, 236, 0.72); } .blk-farine-releve-item:hover .blk-farine-releve-prix { color: #f08049; } .blk-farine-releve-item:hover .blk-farine-releve-anneau { stroke: #f7f3ec; opacity: 0.7; } .blk-farine-releve-item:hover .blk-farine-releve-creux { background: radial-gradient(circle at 50% 46%, #241d18 0%, #241d18 60%, rgba(0, 0, 0, 0.4) 100%); box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.45); } /* LE CACHET : le sceau est le dernier mot — on lui laisse de l'air. */ .blk-farine-cachet { padding-block: clamp(4.5rem, 12vw, 9rem); } /* ── LE PIED : ORDINAIRE, et c'est le but (retour PO 2026-08-19 : « le footer peut être un footer plus conventionnel »). La v4 en faisait une carte flottante à bordure et ombre portée — une pièce de design de plus, au moment précis où le visiteur cherche une adresse et un horaire. Ici : un bandeau pleine largeur, la phrase de clôture en tête, trois colonnes alignées à gauche, le colophon sous un filet. La disposition `colonnes` est FIGÉE par la fiche pour que cette mise en page soit toujours celle-là (cf. `agencement.footerDna`). ── */ .sc-pied { padding-inline: 8vw; text-align: left; } .sc-pied-panneau { max-width: 1180px; gap: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .sc-pied-baseline { font-family: 'Instrument Serif', 'Georgia', serif; color: #f7f3ec; max-width: 18ch; margin-bottom: 2.6rem; } .sc-pied .sc-pied-baseline .scenario-it { color: #f08049; } .sc-pied, .sc-pied p, .sc-pied h2, .sc-pied h3, .sc-pied li { color: rgba(247, 243, 236, 0.72); } /* « auto-fit » plutôt que les trois colonnes fixes de la disposition : la maquette n'a pas de liens légaux, et une troisième colonne vide laissait un tiers de pied béant. Les colonnes présentes se partagent la largeur ; sur un vrai site, qui en a trois, le rendu est identique. */ .sc-pied-grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2.5rem 3rem; padding-top: 2.2rem; border-top: 1px solid rgba(247, 243, 236, 0.18); } .sc-pied-col h2, .sc-pied-col h3 { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.66rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(247, 243, 236, 0.66); margin-bottom: 1em; } .sc-pied-col .sc-pied-nom { font-family: 'Instrument Serif', 'Georgia', serif; font-size: 1.4rem; letter-spacing: 0; text-transform: none; color: #f7f3ec; } .sc-pied-col p { line-height: 1.7; } .sc-pied a { color: #f7f3ec; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; } .sc-pied a:hover { border-bottom-color: #f08049; } .sc-pied-col nav a { display: block; margin: 0 0 0.5em; } .sc-pied-cta.sc-pied-cta { align-self: flex-start; margin-top: 2.4rem; padding: 0.9em 2.2em; background: #b8430e; color: #fdf9f2; border: 0; border-radius: 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.74rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; } .sc-pied-cta.sc-pied-cta:hover { background: #d2551a; } .sc-pied-colophon { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(247, 243, 236, 0.12); font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.28em; color: rgba(247, 243, 236, 0.4); opacity: 1; } @media (max-width: 720px) { .sc-pied { padding-inline: 1.25rem; } } /* ── LES RUBANS : filet pointillé tamis, jamais un damier de comptoir. ───── */ .sc-ruban { height: 8px; background: repeating-linear-gradient(90deg, rgba(184, 67, 14, 0.5) 0 3px, transparent 3px 12px) 50% 50% / 100% 2px no-repeat; } /* ── LA BANDE : le ruban des pièces, en serif, sur papier. ───────────────── */ .sc-bande { background-color: #f1ebe0; border-top: 1px solid rgba(23, 19, 16, 0.14); border-bottom: 1px solid rgba(23, 19, 16, 0.14); } .sc-bande-message, .sc-bande-item { font-family: 'Instrument Serif', 'Georgia', serif; color: #171310; } .sc-bande-piste { color: #171310; } /* ── MENU CERCLE : la nuit du fournil s'ouvre depuis le burger. AUCUNE lamelle (les lignes « stores » sont bannies, consigne PO 2026-08-19). Vaut implémentation de la signature « cercle ». ── */ /* L'ÉPICENTRE EST CELUI DU BURGER, calculé et non approché. Il était posé à « 58px / 46px » — le bouton, lui, est au croisement du rembourrage de la nav et de son propre rayon : 4vw + 23px depuis la droite, 12px + 23px depuis le haut. L'écart mesuré était de 23 px en X et 11 en Y, et l'onde partait visiblement à côté du bouton qu'on venait de cliquer. Écrit en vw et en env(), il reste juste à toutes les largeurs et sous l'encoche — un réglage en pixels ne l'aurait été qu'à 1440. */ .scenario-menu { --jrs-burger-x: calc(100% - 4vw - env(safe-area-inset-right) - 23px); --jrs-burger-y: calc(12px + env(safe-area-inset-top) + 23px); background: rgba(23, 19, 16, 0.97); clip-path: circle(0px at var(--jrs-burger-x) var(--jrs-burger-y)); transition: clip-path 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); } .scenario-menu.is-open { clip-path: circle(165% at var(--jrs-burger-x) var(--jrs-burger-y)); } .scenario-menu-burn { display: none; } .scenario-menu-in a { color: #f7f3ec; font-family: 'Instrument Serif', 'Georgia', serif; font-weight: 400; letter-spacing: 0; transition: color 0.2s, transform 0.3s; } .scenario-menu-in a:hover { color: #f08049; font-style: italic; transform: translateX(12px); } .scenario-menu-quick a { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.14em; color: rgba(247, 243, 236, 0.55); } .scenario-menu-quick a:hover { color: #f08049; } /* LA CROIX DE FERMETURE. Le moteur donne au bouton d'ouverture ET à celui de fermeture le même habillage : fond « --ds-fond », encre « --ds-ink ». C'est juste pour le burger, qui vit sur la barre de papier — et faux pour la croix, qui vit sur l'encre du menu : crème sur crème, elle était strictement invisible (recette 2026-08-20, le ✕ était bien dans le DOM, à 46×46, opacité 1). Ici elle prend le vocabulaire inverse : cerne clair, glyphe clair, aucun aplat — et le relief du monde est retiré, il serait de l'encre sur l'encre. */ .scenario-menu-close { background: none; border: 1px solid rgba(247, 243, 236, 0.4); color: #f7f3ec; box-shadow: none; transition: background 0.2s, border-color 0.2s; } .scenario-menu-close:hover, .scenario-menu-close:focus-visible { background: rgba(247, 243, 236, 0.12); border-color: #f7f3ec; } @media (prefers-reduced-motion: reduce) { .scenario-menu { clip-path: none; transition: none; } } /* ── LE PLAN TAMIS : la géométrie pointillée, saupoudrée. ────────────────── */ .loc-plan { color: #b8430e; } .loc-plan-lbl, .loc-plan-releve { fill: #7a2b06; } .loc { --blk-accent: #b8430e; } /* Le monde ne pose PLUS de bloc clip : la boucle de cinq secondes est remplacée par `atelier-appetit`, au même endroit du rythme. Ses règles de peau sont retirées avec elle — une feuille qui habille un bloc absent est du CSS mort, et `diff` le signale. Le RIDEAU (whaou §22) qu'elle portait, lui, est trop bon pour disparaître : il découvre maintenant la photo du four. */ @supports (animation-timeline: view()) { .blk-atelier-appetit-vue { clip-path: inset(0 100% 0 0); animation: rideau-farine linear both; animation-timeline: view(); animation-range: entry 12% entry 62%; } } @media (prefers-reduced-motion: reduce) { .blk-atelier-appetit-vue { animation: none; clip-path: none; } } @keyframes rideau-farine { to { clip-path: inset(0 0 0 0); } }