/* La page publique de Nimzou — voir index.html et maquettes/DECISIONS-SITE-BETA.md. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
src: url(vendor/dm-sans@5.3.0/dm-sans-latin-wght-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
src: url(vendor/dm-sans@5.3.0/dm-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
unicode-range: U+0100-02BA,U+1E00-1E9F,U+20A0-20C0; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100 1000; font-display: swap;
src: url(vendor/dm-sans@5.3.0/dm-sans-latin-wght-italic.woff2) format("woff2-variations"); }
/* ── Les jetons : la page est en Aube, d'un bout à l'autre, et le pied en Braise — le jour
puis le soir, comme la vidéo (Adam, 05/10 : la Sauge « trop sombre et morte » ici).
Rien ne glisse au défilement (écarté le 04/10) : voir PALETTE_FIXE dans page.js. ── */
:root {
color-scheme: light;
--bg: #f2eee8; --panel: #ffffff; --panel2: #e9e4db; --text: #1b1d24; --muted: #616672;
--accent: #2f56c9; --line: #ded8ce; --on: #ffffff; --halo: #ffd6b0; --glow: #b9c9ea;
--ombre-a: .14;
--etat-bon: #5CC48C; --etat-att: #E0A83C;
--plaque-dos1: #A9BCCB; --plaque-dos2: #3B4756;
--police: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--gout: clamp(16px, 4vw, 48px); --r: 22px; --r-petit: 12px;
--sortie: cubic-bezier(.2,.7,.2,1); --rapide: 240ms; --moyen: 420ms; --lent: 760ms;
--entete: 4.25rem;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--entete) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.6 var(--police);
-webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; } button { font: inherit; cursor: pointer; } img, svg { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
/* ── Entrées : une fois, calmes. Les titres s'ouvrent par un balayage. ─── */
.rev { opacity: 0; transform: translateY(14px); transition: opacity var(--lent) var(--sortie), transform var(--lent) var(--sortie); transition-delay: calc(var(--i, 0) * 70ms); }
.rev.vu { opacity: 1; transform: none; }
/* Le balayage est porté par le span INTÉRIEUR, jamais par le titre observé : un élément
entièrement rogné par son propre clip-path a une surface visible nulle pour
IntersectionObserver, qui ne le voit donc jamais entrer (les titres restaient invisibles,
relevé le 05/10 ; gardé par test_site_public.py). */
.wipe > span { display: block; clip-path: inset(0 100% 0 0); transition: clip-path 1000ms var(--sortie); }
.wipe.vu > span { clip-path: inset(0 0 0 0); }
/* ── En-tête ─────────────────────────────────────────────────────────── */
.entete { position: sticky; top: 0; z-index: 30; min-height: var(--entete); display: flex; align-items: center;
backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 76%, transparent); border-bottom: 1px solid transparent; transition: border-color var(--moyen); }
.entete.pose { border-bottom-color: var(--line); }
.entete .cadre { width: min(1280px, 100% - var(--gout) * 2); margin-inline: auto; display: flex; align-items: center; gap: 1.25rem; }
.marque { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 650; font-size: 1.2rem; letter-spacing: -0.02em; }
.marque img { width: 2.1rem; height: 2.1rem; object-fit: contain; }
.nav { margin-left: auto; display: flex; gap: 1.4rem; }
/* La page d'attente n'a plus de navigation (13/10) : le bouton se range seul à droite. */
.entete .bouton { margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font-size: .95rem; padding: .4rem 0; position: relative; transition: color var(--rapide); }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--accent); transition: right var(--rapide) var(--sortie); }
.nav a:hover, .nav a.ici { color: var(--text); } .nav a:hover::after, .nav a.ici::after { right: 0; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.9rem; padding: .7rem 1.2rem; border-radius: 999px;
border: 1px solid var(--line); text-decoration: none; font-weight: 550; font-size: .97rem; line-height: 1.2;
transition: transform var(--rapide) var(--sortie), background var(--rapide), border-color var(--rapide), color var(--rapide), box-shadow var(--rapide); }
.bouton:hover { transform: translateY(-1px); }
.bouton.plein { background: var(--accent); color: var(--on); border-color: var(--accent); }
.bouton.plein:hover { box-shadow: 0 10px 24px -12px var(--accent); }
.bouton.creux { color: var(--text); background: transparent; }
.bouton.creux:hover { background: var(--panel); border-color: var(--muted); }
.bouton .fl { transition: transform var(--rapide) var(--sortie); } .bouton:hover .fl { transform: translateX(3px); }
/* ── La page : une colonne qui défile, une scène épinglée ───────────── */
.page { width: min(1280px, 100% - var(--gout) * 2); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 40%); column-gap: clamp(2rem, 5vw, 5rem); }
.colonne { min-width: 0; }
.scene { position: relative; }
.stage { position: sticky; top: var(--entete); height: calc(100vh - var(--entete)); display: grid; align-content: center; justify-items: center; gap: 1.1rem; }
.ambiance { position: absolute; inset: 10% 0 10% 0; margin: auto; aspect-ratio: 1; width: min(520px, 100%); border-radius: 50%; filter: blur(70px); opacity: .75; pointer-events: none;
background: radial-gradient(circle at 50% 40%, var(--glow), color-mix(in srgb, var(--halo) 70%, transparent) 45%, transparent 70%); transition: opacity var(--lent); }
/* Le visage en couches : .pose porte l'humeur, .tourne suit le pointeur, .corps respire. */
.visage { position: relative; width: min(340px, 26vw); aspect-ratio: 768 / 845; transform-origin: 50% 72%; opacity: 0; transform: scale(.94) translateY(8px); animation: reveil var(--lent) var(--sortie) .1s forwards; }
@keyframes reveil { to { opacity: 1; transform: none; } }
.visage .pose, .visage .tourne, .visage .corps { position: absolute; inset: 0; }
.visage .pose { transition: transform 900ms var(--sortie); transform-origin: 50% 80%; }
.visage[data-humeur="somnole"] .pose { transform: translateY(2%) rotate(2.5deg); }
.visage[data-humeur="attentif"] .pose { transform: translateY(-1%); }
.visage.penche .pose { transform: rotate(-4deg); }
.visage .tourne { transition: transform 300ms ease-out; transform-origin: 50% 70%; }
.visage .corps { animation: respire 7s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes respire { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-.6%) scale(1.008); } }
.visage .ombre { position: absolute; left: 12%; right: 12%; bottom: -3%; height: 9%; border-radius: 50%; filter: blur(8px); background: radial-gradient(ellipse at center, rgba(0,0,0,var(--ombre-a)), transparent 70%); }
.visage .couche { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform 300ms ease-out; will-change: transform; }
/* Changement d'état SANS creux : l'état précédent reste opaque dessous (.avant) pendant que
le nouveau arrive dessus. Un fondu croisé laissait voir le fond au milieu, et le visage
changeait de teinte à chaque clignement (Adam, 04/10 : « on dirait des bugs »). */
.visage .etat { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.visage .etat.avant { opacity: 1; z-index: 1; }
.visage .etat.on { opacity: 1; z-index: 2; }
/* Les pupilles n'apparaissent qu'une fois leur masque posé par le script (en données, jamais un fichier : un masque chargé depuis un fichier local échoue en silence et laisse les pupilles pleines). */
.visage .yeux { opacity: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.visage .yeux.pret { opacity: 1; }
.visage .yeux img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 220ms var(--sortie); }
.bulle-scene { position: relative; width: min(360px, 100%); padding: .95rem 1.1rem 1rem; border-radius: 18px; background: var(--panel); border: 1px solid var(--line);
box-shadow: 0 30px 60px -32px rgba(0,0,0,var(--ombre-a)); font-size: 1.02rem; line-height: 1.5; opacity: 0; transform: translateY(8px);
transition: opacity var(--moyen) var(--sortie), transform var(--moyen) var(--sortie), background var(--rapide), border-color var(--rapide); }
.bulle-scene.on { opacity: 1; transform: none; }
.bulle-scene::before { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: var(--panel); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.bulle-tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; font-size: .82rem; color: var(--muted); }
/* Rien ne clignote près du visage (Adam, 04/10) : les points sont fixes, ils s'allument doucement quand il parle. */
.onde { display: inline-flex; align-items: center; gap: 3px; height: 14px; }
.onde i { width: 4px; height: 4px; border-radius: 2px; background: var(--muted); opacity: .5; transition: opacity 600ms ease, background 600ms ease; }
.parle-on .onde i { background: var(--accent); opacity: 1; }
.bulle-scene .ex { margin-left: auto; font-style: italic; }
.curseur { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; opacity: .6; }
.moment-nom { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity var(--moyen); }
.moment-nom.on { opacity: 1; }
/* ── Les moments ─────────────────────────────────────────────────────── */
.moment { padding: 16vh 0 10vh; min-height: 88vh; }
.moment.hero { padding-top: 7vh; min-height: calc(100vh - var(--entete)); display: grid; align-content: center; justify-items: start; }
.quand { display: flex; align-items: center; gap: 1rem; color: var(--accent); font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.quand::after { content: ""; flex: 1; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1000ms var(--sortie) 150ms; }
.quand.vu::after { transform: scaleX(1); }
.h2 { margin-top: .9rem; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.08; max-width: 22ch; }
.intro { margin-top: 1rem; max-width: 52ch; color: var(--muted); font-size: 1.08rem; }
.pastille { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: .86rem; font-weight: 500; }
.pastille i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--etat-att); }
.titre { margin-top: 1.3rem; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 600; max-width: 16ch; }
.titre em { font-style: normal; color: var(--accent); }
.chapo { margin-top: 1.5rem; max-width: 50ch; font-size: 1.14rem; line-height: 1.6; color: var(--muted); }
.chapo strong { color: var(--text); font-weight: 550; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.note { margin-top: 1.1rem; color: var(--muted); font-size: .9rem; max-width: 52ch; }
.legende { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.2rem; font-size: .86rem; color: var(--muted); }
.etat { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; }
.etat::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c); }
.etat.ok { --c: var(--etat-bon); } .etat.chantier { --c: var(--etat-att); } .etat.plus-tard { --c: transparent; } .etat.plus-tard::before { border: 1.5px solid var(--muted); }
.spacer-visage { display: none; }
/* Les cartes : elles s'inclinent sous le pointeur, un reflet suit la main. */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; margin-top: 2rem; }
.tuile { position: relative; padding: 1.1rem 1.1rem 1rem; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); overflow: hidden;
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 160ms ease-out, border-color var(--rapide), background var(--rapide), box-shadow var(--rapide); will-change: transform; }
.tuile:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 24px 50px -30px rgba(0,0,0,var(--ombre-a)); }
.tuile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--rapide);
background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.tuile:hover::after { opacity: 1; }
.tuile h3 { font-size: 1.05rem; font-weight: 600; margin-top: .55rem; }
.tuile p { margin-top: .35rem; color: var(--muted); font-size: .93rem; line-height: 1.5; }
.tuile .etat { font-size: .8rem; color: var(--muted); }
.tuile[data-etat="chantier"] { border-style: dashed; }
.date-etat { margin-top: 1.2rem; color: var(--muted); font-size: .86rem; }
/* Les lieux : onglets avec un indicateur qui glisse. */
.onglets { position: relative; display: inline-grid; grid-auto-flow: column; gap: .25rem; padding: .3rem; border-radius: 999px; background: var(--panel2); margin-top: 1.6rem; }
.onglets button { position: relative; z-index: 1; padding: .55rem 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 550; font-size: .95rem; transition: color var(--rapide); }
.onglets button[aria-selected="true"] { color: var(--on); }
.onglets .glisse { position: absolute; top: .3rem; bottom: .3rem; left: 0; width: 0; border-radius: 999px; background: var(--accent); transition: transform var(--moyen) var(--sortie), width var(--moyen) var(--sortie); }
.lieu-panneau { margin-top: 1rem; padding: 1.3rem; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); min-height: 15rem; }
.lieu-panneau[hidden] { display: none; }
.lieu-panneau h3 { font-size: 1.25rem; } .lieu-panneau p { margin-top: .5rem; color: var(--muted); }
.outils { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.outils span { padding: .3rem .7rem; border-radius: 999px; background: var(--panel2); font-size: .88rem; font-weight: 500; opacity: 0; transform: translateY(6px); animation: monte var(--moyen) var(--sortie) forwards; animation-delay: calc(var(--i) * 50ms); }
.outils span.bientot { background: transparent; border: 1px dashed var(--muted); color: var(--muted); }
@keyframes monte { to { opacity: 1; transform: none; } }
.lieu-panneau.change { animation: fondu var(--moyen) var(--sortie); }
@keyframes fondu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lieu-regle { margin-top: 1rem; padding: .85rem 1rem; border-left: 3px solid var(--accent); background: var(--panel2); border-radius: 0 var(--r-petit) var(--r-petit) 0; font-size: .95rem; }
/* La nuit : le sanctuaire. */
.porte { position: relative; aspect-ratio: 1; max-width: 30rem; margin: 2rem 0 0; width: 100%; }
.anneau { position: absolute; inset: 22%; border-radius: 50%; border: 1px solid var(--accent); opacity: .55; }
.porte.vu .anneau { animation: onde-anneau 1.4s var(--sortie) .9s 1; }
@keyframes onde-anneau { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 26px transparent; } }
.coeur { position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 1rem; background: radial-gradient(circle at 50% 40%, var(--panel2), var(--panel)); border: 1px solid var(--line); font-size: .95rem; line-height: 1.35; }
.coeur strong { display: block; font-size: 1.02rem; } .coeur small { color: var(--muted); font-size: .82rem; }
.role { position: absolute; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: .86rem; white-space: nowrap; opacity: 0;
transform: translate(var(--dx), var(--dy)); transition: transform 900ms cubic-bezier(.2,.9,.3,1.15), opacity var(--moyen) ease-out; transition-delay: calc(var(--i) * 180ms + 300ms); }
.porte.vu .role { opacity: 1; transform: none; }
.role.r1 { top: 4%; left: 0; --dx: -40px; --dy: -40px; } .role.r2 { top: 15%; right: 0; --dx: 40px; --dy: -40px; }
.role.r3 { bottom: 15%; left: 0; --dx: -40px; --dy: 40px; } .role.r4 { bottom: 4%; right: 0; --dx: 40px; --dy: 40px; }
.verites { display: grid; gap: .9rem; margin-top: 2rem; }
.verite { padding: 1rem 1.1rem; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.verite h3 { font-size: 1.02rem; } .verite p { margin-top: .35rem; color: var(--muted); font-size: .94rem; line-height: 1.5; } .verite a { color: var(--accent); }
/* En vrai : la vidéo de l'application, au format de la colonne. */
.ecran-film { margin: 2rem 0 0; }
.ecran-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r); background: var(--panel2);
border: 1px solid var(--line); box-shadow: 0 40px 80px -44px rgba(40,30,20,.5); }
.ecran-film figcaption { margin-top: .75rem; color: var(--muted); font-size: .86rem; }
/* La bêta */
.beta-bloc { margin-top: 2rem; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 28px; background: linear-gradient(135deg, var(--panel), var(--panel2)); border: 1px solid var(--line); }
.beta-bloc p { margin-top: .9rem; color: var(--muted); }
.voies { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.4rem; }
.voie { padding: 1.1rem 1.2rem; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.voie h3 { font-size: 1.02rem; } .voie p { margin-top: .3rem; font-size: .92rem; } .voie .bouton { margin-top: .8rem; } .voie a.lien { color: var(--accent); font-weight: 550; text-decoration: none; }
@media (max-width: 40rem) { .voies { grid-template-columns: 1fr; } }
/* Le pied : le soir tombe, en Braise (les jetons de l'app), avec la lueur chaude du couchant. */
.pied { --bg: #17120e; --text: #f2e9df; --muted: #ad9d8b; --accent: #ff9a52; --line: #3a2e23;
padding: 2.5rem 0 3rem; color: var(--muted); font-size: .9rem;
background: radial-gradient(1100px 260px at 50% 0%, rgba(163, 82, 31, .38), transparent 75%), var(--bg); }
.pied .cadre { width: min(1280px, 100% - var(--gout) * 2); margin-inline: auto; display: grid; gap: 1.2rem; }
.pied .liens { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; } .pied a { color: var(--muted); } .pied a:hover { color: var(--text); } .pied .marque { color: var(--text); font-size: 1.05rem; }
/* Les mentions légales (13/10) : une page de texte, dans les mêmes jetons, sans visage. */
.legal { width: min(46rem, 100% - var(--gout) * 2); margin: 0 auto; padding: 3rem 0 4rem; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; }
.legal-chapo { margin-top: 1rem; color: var(--muted); font-size: 1.08rem; }
.legal section { margin-top: 1.4rem; padding: 1.1rem 1.2rem; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.legal h2 { font-size: 1.1rem; margin-bottom: .3rem; }
.legal section p { margin-top: .25rem; color: var(--muted); }
.legal strong { color: var(--text); font-weight: 600; } .legal a { color: var(--accent); }
.legal-date { margin-top: 1.4rem; color: var(--muted); font-size: .86rem; }
/* ── Téléphone : Nimzou se range dans un coin et suit la lecture ───────── */
@media (max-width: 60rem) {
.nav { display: none; } .entete .bouton { margin-left: auto; }
.page { display: block; }
.spacer-visage { display: block; height: 400px; }
.stage { position: fixed; z-index: 25; top: calc(var(--entete) + 1.2rem); left: calc(50% - 110px); width: 220px; height: auto; display: grid; gap: .8rem; justify-items: center; }
.ambiance { display: none; } .moment-nom { display: none; }
.visage { width: 220px; }
/* La bulle est plus large que la piste de 220 px : sans ces marges négatives elle débordait
à droite, coupée par le bord de l'écran (relevé le 05/10). Elle se centre sous le visage. */
.bulle-scene { width: min(320px, 88vw); font-size: .98rem; justify-self: start; margin-inline: calc((220px - min(320px, 88vw)) / 2); }
.stage.coin { top: auto; left: auto; right: 14px; bottom: 14px; width: 84px; gap: 0; }
.stage.coin .visage { width: 84px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.stage.coin .bulle-scene { position: absolute; right: calc(100% + 10px); bottom: 2px; width: min(240px, 64vw); margin: 0; font-size: .9rem; padding: .75rem .85rem; }
.stage.coin .bulle-scene::before { left: auto; right: -7px; top: auto; bottom: 16px; transform: rotate(135deg); }
.stage.coin .bulle-scene.cache { opacity: 0; transform: translateX(8px); pointer-events: none; }
.moment { padding: 10vh 0 6vh; min-height: 0; }
.moment.hero { min-height: 0; display: block; }
.h2 { max-width: none; }
.porte { max-width: 100%; }
.onglets { display: flex; width: 100%; } .onglets button { flex: 1; padding: .55rem .4rem; font-size: .86rem; white-space: nowrap; }
.role { flex-direction: column; align-items: flex-start; gap: 0; max-width: 42%; white-space: normal; font-size: .8rem; line-height: 1.25; padding: .4rem .65rem; }
.role.r2, .role.r4 { align-items: flex-end; text-align: right; }
.role.r1, .role.r2 { top: 2%; } .role.r3, .role.r4 { bottom: 4%; }
/* Au téléphone, les garanties arrivent par le haut et le bas seulement : décalées de côté
avant leur entrée, celles de droite élargissaient la page à 414 px sur un écran de 390
(mesuré le 05/10), et le navigateur dézoomait toute la page pour la faire tenir. */
.role.r1, .role.r2, .role.r3, .role.r4 { --dx: 0px; }
/* Le cœur, plus large au téléphone : à 136 px de diamètre, son texte débordait du rond de
30 px (42 px sur un écran de 360 ; mesuré le 05/10). L'anneau s'écarte d'autant. */
.anneau { inset: 17%; }
.coeur { inset: 23%; padding: .6rem; }
.coeur strong { font-size: .95rem; } .coeur small { display: block; margin-top: .15rem; font-size: .76rem; line-height: 1.3; }
}
/* Mouvement réduit : rien ne bouge, et chaque chose est posée dans son état final. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.rev, .role, .visage, .outils span, .moment-nom { opacity: 1 !important; transform: none !important; }
.wipe > span { clip-path: none !important; } .quand::after { transform: none !important; }
.visage .pose, .visage .couche, .visage .etat, .visage .yeux img { transition: none !important; }
}
.moment.fin { min-height: 0; padding-bottom: 4rem; }