/* ═══ Le Corps Émotionnel — nacre rosée, aurore vivante, pétales. Trois ambiances : rose · aurore · or ═══ */
@font-face { font-family: 'EB Garamond'; src: url('fonts/EBGaramond12-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('fonts/EBGaramond12-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root, :root[data-theme="rose"] {
  --fond: #fbf1ef; --nacre: #fffaf8; --sable: #f5e3df; --filet: #ecd3cf; --filet-fort: #d9aaa6;
  --accent: #b5606f; --accent-clair: #e5aaa9; --accent-sombre: #8c3f4f; --accent-doux: #f8e2e1;
  --encre: #2e1a1f; --encre-douce: #4a2e34; --encre-pale: #6e4f56;
  --cta: #9e4a5a; --cta-haut: #b25d6d; --cta-texte: #fff8f6; --lueur: rgba(196,98,118,.30);
  --texture: url('img/marbre-rose.webp'); --texture-op: .42;
  --aurore-1: rgba(244,170,184,.55); --aurore-2: rgba(252,206,186,.50); --aurore-3: rgba(221,190,232,.42);
  --petale-1: #f4c2c8; --petale-2: #e9a3ad; --petale-bord: rgba(255,255,255,.85);
  --ombre: 0 2px 6px rgba(120,52,68,.06), 0 18px 44px rgba(120,52,68,.11);
}
:root[data-theme="aurore"] {
  --fond: #fdf3ec; --nacre: #fffaf6; --sable: #f8e4d6; --filet: #efd5c4; --filet-fort: #deae93;
  --accent: #bf6a4f; --accent-clair: #ecb39a; --accent-sombre: #8f4632; --accent-doux: #fbe6da;
  --encre: #2f1d16; --encre-douce: #4d3125; --encre-pale: #71513f;
  --cta: #a8543d; --cta-haut: #bf6a4f; --cta-texte: #fff8f3; --lueur: rgba(200,110,80,.30);
  --texture: url('img/quartz.webp'); --texture-op: .35;
  --aurore-1: rgba(252,190,160,.55); --aurore-2: rgba(248,210,150,.45); --aurore-3: rgba(244,170,184,.40);
  --petale-1: #f8cdb6; --petale-2: #eea98d;
}
:root[data-theme="or"] {
  --fond: #fbf6ea; --nacre: #fffdf8; --sable: #f4ecda; --filet: #e6d7ae; --filet-fort: #cdb172;
  --accent: #a7801f; --accent-clair: #dcc07a; --accent-sombre: #7a5a10; --accent-doux: #f7eed5;
  --encre: #2a2118; --encre-douce: #45361f; --encre-pale: #6b5636;
  --cta: #85631a; --cta-haut: #a07a24; --cta-texte: #fffbef; --lueur: rgba(168,128,40,.28);
  --texture: url('img/marbre-doux.webp'); --texture-op: .6;
  --aurore-1: rgba(244,213,138,.45); --aurore-2: rgba(252,226,190,.45); --aurore-3: rgba(240,200,190,.32);
  --petale-1: #f2dfa8; --petale-2: #dcc07a;
}
:root {
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --barre-h: 66px; --rayon: 22px; --ressort: cubic-bezier(.2,.9,.25,1.12); --doux: cubic-bezier(.4,0,.2,1);
  --carte-fond: linear-gradient(160deg, rgba(255,251,250,.95), rgba(253,245,244,.93));
  font-size: 16px;
}
html[data-taille="2"] { font-size: 17.5px; } html[data-taille="3"] { font-size: 19px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-x: none; }
body {
  margin: 0; font-family: var(--sans); font-size: 1.25rem; line-height: 1.65; color: var(--encre); background: var(--fond);
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; transition: background .6s var(--doux), color .4s;
  padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom)); min-height: 100vh; overflow-x: hidden;
}
/* la matière réelle (photo de marbre ou de quartz), puis l'aurore qui respire, puis les pétales */
body::before { content: ''; position: fixed; inset: 0; z-index: -3; background: var(--texture) center / cover; opacity: var(--texture-op); transition: opacity .6s; }
.aurore { position: fixed; inset: -20vmax; z-index: -2; pointer-events: none; }
.aurore i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
.aurore i:nth-child(1) { left: 0; top: 0; background: radial-gradient(closest-side, var(--aurore-1), transparent); animation: derive1 28s ease-in-out infinite alternate; }
.aurore i:nth-child(2) { right: 0; top: 20vmax; background: radial-gradient(closest-side, var(--aurore-2), transparent); animation: derive2 34s ease-in-out infinite alternate; }
.aurore i:nth-child(3) { left: 20vmax; bottom: 0; background: radial-gradient(closest-side, var(--aurore-3), transparent); animation: derive3 40s ease-in-out infinite alternate; }
@keyframes derive1 { to { transform: translate(18vmax, 14vmax) scale(1.15); } }
@keyframes derive2 { to { transform: translate(-16vmax, 10vmax) scale(.9); } }
@keyframes derive3 { to { transform: translate(10vmax, -16vmax) scale(1.2); } }
.petales { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.petales svg, .pluie svg { position: absolute; top: -40px; width: 22px; height: 22px; opacity: 0; will-change: transform; }
.petales svg { animation: flotte linear infinite; }
@keyframes flotte { 0% { opacity: 0; transform: translate3d(0,-5vh,0) rotate(0); } 10% { opacity: .55; } 90% { opacity: .45; } 100% { opacity: 0; transform: translate3d(var(--dx, 60px), 108vh, 0) rotate(var(--r, 340deg)); } }
.petale-forme { fill: url(#g-petale); stroke: var(--petale-bord); stroke-width: .6; }

.entete, .vue, .barre, .toast { position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; color: var(--encre); line-height: 1.12; text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: clamp(2.4rem, 9vw, 3.6rem); } h2 { font-size: clamp(1.9rem, 6.4vw, 2.4rem); } h3 { font-size: 1.5rem; }
p { margin: 0 0 .8em; }
a { color: var(--accent-sombre); }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; color: inherit; }
.saut { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px; }
.saut:focus { left: 8px; z-index: 60; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ── en-tête ── */
.entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(251,241,239,.55); background: color-mix(in srgb, var(--fond) 60%, transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid transparent; transition: background .3s, box-shadow .3s, border-color .3s; }
.entete.voilee { background: color-mix(in srgb, var(--fond) 88%, transparent); border-bottom-color: var(--filet); box-shadow: 0 8px 24px rgba(120,52,68,.06); }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); min-width: 0; }
.marque img { width: 32px; height: 32px; flex: none; border-radius: 9px; filter: drop-shadow(0 2px 4px rgba(120,52,68,.25)); }
.marque-t { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.marque-giri { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-sombre); font-weight: 600; white-space: nowrap; }
.marque-titre { font-family: var(--serif); font-size: 1.32rem; white-space: nowrap; }
.entete-droite { display: flex; gap: 6px; flex: none; }
.entete-btn { min-width: 46px; height: 46px; border-radius: 23px; border: 1px solid var(--filet); background: rgba(255,250,248,.8); color: var(--accent-sombre); display: inline-grid; place-items: center; text-decoration: none; padding: 0; }
.souffle-btn { display: inline-flex; gap: 7px; align-items: center; padding: 0 14px; font-size: .9rem; font-weight: 600; }
.souffle-btn i { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-clair); box-shadow: 0 0 0 0 var(--lueur); animation: pouls 4s ease-in-out infinite; }
@keyframes pouls { 0%,100% { transform: scale(.85); box-shadow: 0 0 0 0 var(--lueur); } 50% { transform: scale(1.1); box-shadow: 0 0 0 7px transparent; } }
@media (max-width: 440px) { .souffle-btn span { display: none; } .souffle-btn { padding: 0; width: 46px; justify-content: center; } }

/* ── la vue ── */
.vue { max-width: 780px; margin: 0 auto; padding: 14px 16px 36px; }
@media (min-width: 780px) { .vue { padding: 30px 24px 56px; } }
.chargement { text-align: center; padding: 60px 0; color: var(--encre-pale); }
.sur-titre { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-sombre); font-weight: 600; margin-bottom: 8px; }
.intro { font-family: var(--serif); font-size: 1.5rem; line-height: 1.45; color: var(--encre-douce); }
.intro-petite { font-size: 1.06rem; color: var(--encre-douce); margin: 6px 0 14px; }
.section { margin-top: 40px; }
.section > h2 { margin-bottom: 10px; }

/* ── les boutons : un aplat franc, une lumière qui passe ── */
.lingot { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 14px 28px; border-radius: 18px; border: 0;
  font-family: var(--serif); font-size: 1.32rem; letter-spacing: .01em; color: var(--cta-texte); text-decoration: none; background: var(--cta);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 4px rgba(90,30,44,.14), 0 14px 30px var(--lueur); transition: transform .2s var(--ressort), box-shadow .2s, background .3s; -webkit-tap-highlight-color: transparent; }
.lingot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%); pointer-events: none; }
.lingot.respire::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 48%, transparent 66%); transform: translateX(-130%); animation: reflet 5s ease-in-out 1.4s infinite; pointer-events: none; }
@keyframes reflet { 0% { transform: translateX(-130%); } 38%, 100% { transform: translateX(130%); } }
.lingot:hover { background: var(--cta-haut); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 8px rgba(90,30,44,.16), 0 20px 40px var(--lueur); }
.lingot:active { transform: scale(.98); }
.lingot[disabled] { opacity: .55; box-shadow: none; }
.lingot.large, .creux.large { width: 100%; }
.creux { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 12px 20px; border-radius: 18px; border: 1px solid var(--filet-fort);
  background: rgba(255,251,250,.85); color: var(--encre-douce); font-size: 1.08rem; text-decoration: none; transition: transform .2s var(--ressort), border-color .2s, background .2s; }
.creux:hover { border-color: var(--accent); background: var(--nacre); }
.creux:active { transform: scale(.98); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.nu { border: 0; background: transparent; color: var(--encre-pale); font-size: 1.02rem; padding: 10px; min-height: 46px; text-decoration: underline; text-underline-offset: 3px; }
.onde { position: absolute; border-radius: 50%; width: 12px; height: 12px; background: var(--accent-clair); opacity: .55; transform: translate(-50%,-50%) scale(0); animation: onde .7s var(--doux) forwards; pointer-events: none; }
@keyframes onde { to { transform: translate(-50%,-50%) scale(36); opacity: 0; } }

/* ── les cartes : de la nacre translucide ── */
.carte { position: relative; background: var(--carte-fond); border: 1px solid rgba(255,255,255,.7); outline: 1px solid var(--filet); outline-offset: -1px; border-radius: var(--rayon);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--ombre); overflow: hidden; backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
.rev { opacity: 0; transform: translateY(18px) scale(.985); }
.rev.vu { opacity: 1; transform: none; transition: opacity .7s var(--doux), transform .8s var(--ressort); }

/* ── le héros ── */
.hero { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px rgba(120,52,68,.18); aspect-ratio: 4 / 5; background: var(--sable); }
@media (min-width: 640px) { .hero { aspect-ratio: 16 / 10; } }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; animation: ken 26s ease-out forwards; }
@keyframes ken { from { transform: scale(1.04); } to { transform: scale(1.14) translateY(-1.5%); } }
.hero .voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,241,239,0) 30%, color-mix(in srgb, var(--fond) 70%, transparent) 64%, var(--fond) 100%); }
.hero .texte { position: absolute; left: 20px; right: 20px; bottom: 22px; text-align: center; animation: lever .9s var(--ressort) .2s both; }
.hero h1 { font-size: clamp(2.8rem, 12vw, 4.4rem); line-height: 1.02; }
.hero .sous { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--accent-sombre); margin: 8px 0 0; }
.hero .sur-titre { margin-bottom: 10px; }
@keyframes lever { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.preuve { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 0; font-size: 1rem; color: var(--encre-douce); }
.preuve b { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; color: var(--accent-sombre); }

/* ── citation de Maha ── */
.citation { position: relative; margin: 20px 0 0; padding: 20px 20px 16px 26px; border-radius: 0 20px 20px 0; text-align: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-doux) 92%, transparent), rgba(255,251,250,.85)); border-left: 3px solid var(--accent-clair); }
.citation p { font-family: var(--serif); font-style: italic; font-size: 1.32rem; line-height: 1.5; margin: 0 0 8px; color: var(--encre); }
.citation cite { font-style: normal; font-size: .9rem; color: var(--accent-sombre); letter-spacing: .02em; }

/* ── l'arbre et les vignettes ── */
.comment { padding: 6px 20px 12px; margin-top: 28px; }
.comment h3 { padding-top: 16px; font-size: 1.7rem; }
.comment ul { list-style: none; margin: 8px 0 0; padding: 0; }
.comment li { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid color-mix(in srgb, var(--filet) 70%, transparent); }
.comment li:first-child { border-top: 0; }
.comment li::before { content: ''; position: absolute; left: 2px; top: 18px; width: 24px; height: 24px; background: url(img/quartz.webp) center / cover; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 2px 5px rgba(120,52,68,.25); }
.comment li b { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; display: block; color: var(--encre); line-height: 1.2; }
.comment li small { font-size: 1.05rem; color: var(--encre-douce); }
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 640px) { .grille { grid-template-columns: repeat(3, 1fr); } }
.vignette { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--carte-fond); outline: 1px solid var(--filet); outline-offset: -1px; box-shadow: var(--ombre); }
.vignette:first-child { grid-column: 1 / -1; }
.vignette:first-child .ph { aspect-ratio: 16 / 8; }
.vignette .ph { aspect-ratio: 1; overflow: hidden; background: var(--sable); }
.vignette .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--doux); }
.vignette:hover .ph img { transform: scale(1.06); }
.vignette .t { padding: 12px 14px 14px; }
.vignette h3 { font-size: 1.3rem; line-height: 1.15; }
.vignette .meta { font-size: .86rem; color: var(--accent-sombre); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-top: 4px; }

/* ── l'avancée, l'anneau ── */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.anneau { --p: 0; position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--serif); font-size: 1.7rem; color: var(--accent-sombre);
  background: conic-gradient(var(--accent), var(--accent-clair) calc(var(--p) * 1%), var(--filet) 0); transition: --p 1.4s var(--doux); }
.anneau::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--nacre); }
.anneau span { position: relative; }
.avance { display: flex; align-items: center; gap: 16px; padding: 18px; margin-top: 16px; text-decoration: none; color: inherit; }
.avance .t { flex: 1; min-width: 0; }
.avance b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.15; }
.avance small { display: block; font-size: 1rem; color: var(--encre-douce); margin-top: 4px; }
.carte-tete { text-align: center; padding: 10px 0 6px; }
.carte-tete .date { font-size: .95rem; color: var(--encre-pale); margin-top: 8px; }
.medaillon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: block; object-fit: cover; box-shadow: 0 0 0 3px var(--nacre), 0 0 0 4px var(--filet-fort), 0 10px 24px rgba(120,52,68,.2); }
.medaillon.logo { border-radius: 16px; }

/* ── le Miroir : une scène plein écran ── */
.pas-vue { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); background: var(--fond); isolation: isolate; }
.pas-vue::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--texture) center / cover; opacity: var(--texture-op); }
.pas-vue .aurore { position: absolute; z-index: -1; }
.pas-vue[hidden] { display: none; }
.pas-vue .haut { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 12px 14px; }
.pas-vue .haut .titre { font-family: var(--serif); font-size: 1.3rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.retour, .fermer { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--filet); background: rgba(255,250,248,.85); color: var(--encre-douce); font-size: 1.6rem; line-height: 1; flex: none; display: grid; place-items: center; }
.retour[disabled] { visibility: hidden; }
.compte { font-size: .95rem; color: var(--encre-pale); font-weight: 600; letter-spacing: .06em; }
.fil { height: 3px; margin: 0 16px; border-radius: 3px; background: color-mix(in srgb, var(--filet) 80%, transparent); overflow: visible; position: relative; }
.fil i { position: relative; display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent-clair), var(--accent)); transition: width .6s var(--ressort); }
.fil i::after { content: ''; position: absolute; right: -5px; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translateY(-50%); background: var(--nacre); box-shadow: 0 0 0 2px var(--accent), 0 0 14px 4px var(--lueur); }
.pas-vue .corps { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 26px 22px 20px; overflow-y: auto; }
.pas-vue .corps.haut-aligne { justify-content: flex-start; }
.pas-vue .corps.entre { animation: emerge .55s var(--ressort) both; }
.pas-vue .corps.recule { animation: emerge-r .45s var(--ressort) both; }
@keyframes emerge { from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes emerge-r { from { opacity: 0; transform: translateY(-20px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.pas-vue .bas { display: grid; gap: 12px; padding: 14px 16px 18px; }
.pas-vue .bas .lingot { min-height: 66px; font-size: 1.45rem; }
.consigne { font-size: .84rem; color: var(--accent-sombre); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.question { font-family: var(--serif); font-size: clamp(1.75rem, 7vw, 2.3rem); line-height: 1.28; color: var(--encre); margin: 0 0 24px; text-wrap: pretty; }
.choix { display: grid; gap: 10px; }
.choix button { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 12px 16px; text-align: left; border-radius: 18px;
  border: 1px solid var(--filet); background: rgba(255,251,250,.9); font-size: 1.2rem; line-height: 1.3; color: var(--encre);
  box-shadow: 0 1px 2px rgba(120,52,68,.05); transition: transform .25s var(--ressort), border-color .25s, box-shadow .25s, background .25s; animation: lever .5s var(--ressort) both; }
.choix button:nth-child(2) { animation-delay: .04s; } .choix button:nth-child(3) { animation-delay: .08s; } .choix button:nth-child(4) { animation-delay: .12s; } .choix button:nth-child(5) { animation-delay: .16s; }
.choix button:nth-child(6) { animation-delay: .2s; } .choix button:nth-child(7) { animation-delay: .24s; } .choix button:nth-child(8) { animation-delay: .28s; }
.choix button > i { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--accent-clair); position: relative; transition: background .25s, border-color .25s; }
.choix button > i::after { content: ''; position: absolute; left: 8px; top: 4px; width: 7px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--ressort); }
.choix button:hover { border-color: var(--accent-clair); }
.choix button:active { transform: scale(.985); }
.choix button[aria-pressed="true"] { border-color: var(--accent); background: linear-gradient(160deg, var(--nacre), var(--accent-doux)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-clair) 45%, transparent), var(--ombre); }
.choix button[aria-pressed="true"] > i { background: var(--accent); border-color: var(--accent); }
.choix button[aria-pressed="true"] > i::after { transform: rotate(45deg) scale(1); }
.jauge { margin-left: auto; display: flex; gap: 3px; align-items: flex-end; }
.jauge b { width: 6px; border-radius: 3px; background: color-mix(in srgb, var(--filet) 85%, #fff); }
.jauge b:nth-child(1) { height: 8px; } .jauge b:nth-child(2) { height: 12px; } .jauge b:nth-child(3) { height: 16px; } .jauge b:nth-child(4) { height: 20px; }
.jauge b.on { background: linear-gradient(var(--accent-clair), var(--accent)); }
.meteo { grid-template-columns: 1fr 1fr; }
.meteo button { flex-direction: column; justify-content: center; text-align: center; gap: 6px; min-height: 100px; font-family: var(--serif); font-size: 1.4rem; }
.meteo button:last-child { grid-column: 1 / -1; }
.meteo button .ciel { width: 40px; height: 40px; color: var(--accent); }
.meteo button > i { display: none; }
.zones { grid-template-columns: 1fr 1fr; }
.zones button { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 84px; padding-right: 40px; }
.zones button > i { position: absolute; right: 12px; top: 12px; width: 22px; height: 22px; }
.zones button b { font-weight: 400; font-family: var(--serif); font-size: 1.35rem; }
.zones button small { font-size: .95rem; color: var(--encre-pale); line-height: 1.3; }
.aide { font-size: 1.05rem; color: var(--encre-douce); margin: -10px 0 18px; }
.interlude { text-align: center; }
.douce { font-size: 1.1rem; color: var(--encre-douce); margin-top: 14px; }
.orbe { position: relative; width: 120px; height: 120px; margin: 6px auto 22px; }
.orbe::before { content: ''; position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(closest-side, var(--lueur), transparent); animation: halo 5s ease-in-out infinite; }
.orbe img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; animation: respire 5s ease-in-out infinite; filter: drop-shadow(0 12px 20px rgba(120,52,68,.28)); }
.orbe.petite { width: 74px; height: 74px; margin-bottom: 16px; }
@keyframes respire { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.06); } }
@keyframes halo { 0%, 100% { opacity: .5; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.12); } }
.fin-texte .question { font-size: clamp(2rem, 8vw, 2.8rem); }

/* ── la rose intérieure (le moment signature) ── */
.rose-carte { padding: 18px 14px 16px; margin-top: 18px; text-align: center; }
.rose { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.rose .p { transform-box: view-box; transform-origin: 210px 200px; transform: scale(0) rotate(-30deg); animation: eclot 1.4s var(--ressort) forwards; }
.rose .p path.lame { fill: url(#g-rose); stroke: rgba(255,255,255,.9); stroke-width: 1.2; filter: drop-shadow(0 6px 10px rgba(120,52,68,.16)); }
.rose .p path.nervure { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1; }
.rose .p.vive path.lame { stroke: var(--accent); stroke-dasharray: 4 4; stroke-width: 1.4; }
.rose .ombre-p path { fill: none; stroke: color-mix(in srgb, var(--filet-fort) 70%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
@keyframes eclot { to { transform: scale(1) rotate(0); } }
.rose text { font-family: var(--serif); font-size: 30px; fill: var(--encre); }
.rose text.v { font-family: var(--sans); font-size: 19px; fill: var(--accent-sombre); font-weight: 600; letter-spacing: .04em; }
.rose .coeur { opacity: 0; animation: lever .8s var(--doux) 1.3s forwards; }
.legende { font-size: 1.02rem; color: var(--encre-douce); margin: 10px auto 0; max-width: 30em; }
.legende b { color: var(--accent-sombre); font-weight: 600; }

/* ── la blessure ── */
.blessure { margin-top: 20px; }
.blessure .ph { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.blessure .ph img { width: 100%; height: 100%; object-fit: cover; }
.blessure .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(255,251,250,.97) 100%); }
.blessure .etiquette { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1; }
.blessure .etiquette h2 { font-size: clamp(2.2rem, 9vw, 2.9rem); }
.blessure .t { padding: 6px 20px 22px; }
.blessure .masque { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.pastille { display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: .95rem; border: 1px solid var(--filet); background: var(--nacre); color: var(--encre-douce); }
.pastille.forte { border-color: var(--accent-clair); background: var(--accent-doux); color: var(--accent-sombre); font-weight: 600; }
.blessure .phrase { font-family: var(--serif); font-size: 1.55rem; line-height: 1.38; margin: 0 0 12px; }
.blessure ul { list-style: none; padding: 0; margin: 0 0 12px; }
.blessure li { position: relative; padding: 10px 0 10px 28px; font-size: 1.12rem; line-height: 1.55; color: var(--encre-douce); border-top: 1px solid color-mix(in srgb, var(--filet) 70%, transparent); }
.blessure li:first-child { border-top: 0; }
.blessure li::before { content: ''; position: absolute; left: 2px; top: 19px; width: 11px; height: 11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent-clair); }
.blessure .message { font-size: 1.12rem; margin: 10px 0 0; }
.blessure .message b { color: var(--accent-sombre); font-weight: 600; }
.seconde { display: flex; gap: 14px; align-items: center; padding: 14px; margin-top: 14px; }
.seconde img { width: 92px; height: 92px; border-radius: 16px; object-fit: cover; flex: none; }
.seconde b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.15; }
.seconde small { font-size: 1rem; color: var(--encre-douce); display: block; margin-top: 4px; line-height: 1.45; }
.racine-carte { position: relative; margin-top: 20px; overflow: hidden; color: #fff8f6; }
.racine-carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.racine-carte::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,20,26,.5), rgba(40,20,26,.8)); z-index: 1; }
.racine-carte .t { position: relative; z-index: 2; padding: 26px 22px; }
.racine-carte .sur-titre { color: #f6c9cf; }
.racine-carte h3 { color: #fff8f6; font-size: 1.7rem; margin-bottom: 12px; }
.racine-carte p { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.5; margin: 0 0 10px; }
.racine-carte cite { font-style: normal; font-size: .9rem; color: #f6c9cf; }

/* ── les sept marches ── */
.marches7 { padding: 20px 18px 18px; margin-top: 20px; }
.indice { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.indice .anneau { width: 96px; height: 96px; font-size: 2rem; }
.indice b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.8rem; line-height: 1.1; }
.indice small { display: block; font-size: 1.02rem; color: var(--encre-douce); margin-top: 4px; }
.echelle7 { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.echelle7 li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; font-size: 1.05rem; color: var(--encre-pale); border: 1px solid transparent; }
.echelle7 li span { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--filet-fort); font-family: var(--serif); font-size: 1.1rem; background: var(--nacre); }
.echelle7 li.passee { color: var(--encre-douce); }
.echelle7 li.passee span { border-color: var(--accent-clair); background: var(--accent-clair); color: #fff; }
.echelle7 li.ici { background: linear-gradient(90deg, var(--accent-doux), transparent); color: var(--encre); border-color: var(--accent-clair); }
.echelle7 li.ici span { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-clair) 40%, transparent); animation: pouls 3s ease-in-out infinite; }
.echelle7 li.ici b { font-weight: 600; }
.suite { margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(180deg, var(--nacre), var(--accent-doux)); border: 1px dashed var(--accent-clair); font-size: 1.12rem; }
.suite b { display: block; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-sombre); margin-bottom: 4px; font-weight: 600; }

/* ── les clés ── */
.cles { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 680px) { .cles { grid-template-columns: 1fr 1fr 1fr; } }
.cle { padding: 18px 18px 20px; }
.cle .ic { width: 44px; height: 44px; margin-bottom: 8px; color: var(--accent); }
.cle h3 { font-size: 1.45rem; margin-bottom: 8px; }
.cle p { font-size: 1.08rem; color: var(--encre-douce); margin: 0; line-height: 1.6; }

/* ── le rituel ── */
.jours { display: grid; gap: 10px; margin-top: 16px; }
.jour { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; border-radius: 18px; border: 1px solid var(--filet); background: var(--carte-fond); color: var(--encre); font: inherit; box-shadow: var(--ombre); }
.jour .n { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1.35rem; color: var(--accent-sombre); border: 1.5px solid var(--accent-clair); }
.jour.fait .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.jour.ici { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-clair) 35%, transparent), var(--ombre); }
.jour.ferme { opacity: .62; box-shadow: none; }
.jour .t { flex: 1; min-width: 0; }
.jour h3 { font-size: 1.35rem; }
.jour small { display: block; font-size: .98rem; color: var(--encre-pale); margin-top: 2px; }
.verrou { width: 22px; height: 22px; flex: none; color: var(--encre-pale); }
.numero { font-family: var(--serif); font-size: 1.4rem; color: var(--accent); margin-bottom: 10px; }
.ingr-rappel { margin-top: 20px; font-size: 1.15rem; line-height: 1.6; color: var(--encre-douce); padding: 16px 18px; border-radius: 16px; background: rgba(255,251,250,.9); border: 1px solid var(--filet); }
.ingr-rappel b { color: var(--accent-sombre); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; display: block; margin-bottom: 6px; }
.ecrire label { display: block; font-family: var(--serif); font-size: 1.55rem; line-height: 1.3; margin: 0 0 10px; }
.ecrire textarea { width: 100%; min-height: 150px; resize: vertical; padding: 14px 16px; border: 1px solid var(--filet); border-radius: 16px; background: var(--nacre); color: var(--encre); font: inherit; font-size: 1.2rem; line-height: 1.55; }
.ecrire textarea:focus, .formulaire input:focus, .formulaire textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-clair) 35%, transparent); }
.note { font-size: 1rem; color: var(--encre-pale); margin: 12px 0 0; }

/* ── l'accompagnement ── */
.offre { margin-top: 18px; }
.offre .ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.offre .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--doux); }
.offre:hover .ph img { transform: scale(1.05); }
.offre .t { padding: 18px 20px 20px; }
.offre h3 { font-size: 1.75rem; margin-bottom: 8px; }
.offre p { font-size: 1.1rem; color: var(--encre-douce); }
.offre .lingot, .offre .creux { width: 100%; margin-top: 8px; }
.offre.mise-en-avant { outline: 2px solid var(--accent-clair); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-clair) 22%, transparent), 0 30px 60px rgba(120,52,68,.16); }
.offre.mise-en-avant h3 { font-size: 2rem; }
.offre.discret .ph { display: none; }
.offre.discret h3 { font-size: 1.45rem; }
.ruban { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 7px 14px; border-radius: 20px; background: rgba(255,251,250,.95); font-size: .85rem; font-weight: 600; letter-spacing: .08em; color: var(--accent-sombre); box-shadow: 0 6px 16px rgba(120,52,68,.15); }
.prix { display: inline-block; margin: 2px 0 10px; padding: 6px 14px; border-radius: 12px; background: var(--accent-doux); color: var(--accent-sombre); font-family: var(--serif); font-size: 1.3rem; }
.place { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--nacre); border: 1px solid var(--filet); font-size: 1.02rem; color: var(--encre-douce); }
.place i { width: 10px; height: 10px; border-radius: 50%; background: #5aa67a; box-shadow: 0 0 0 4px rgba(90,166,122,.18); flex: none; }
.praticiens { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 640px) { .praticiens { grid-template-columns: 1fr 1fr; } }
.praticien { display: flex; gap: 14px; align-items: center; padding: 14px; text-decoration: none; color: var(--encre); }
.praticien img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--nacre), 0 0 0 3.5px var(--accent-clair); background: var(--sable); }
.praticien .t { flex: 1; min-width: 0; }
.praticien b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.praticien small { display: block; font-size: .98rem; color: var(--encre-douce); margin-top: 3px; line-height: 1.35; }
.praticien .lieu { color: var(--accent-sombre); font-size: .9rem; margin-top: 4px; }
.praticien .fl { color: var(--accent); font-size: 1.6rem; flex: none; }
.formulaire { padding: 20px; margin-top: 18px; }
.formulaire h3 { font-size: 1.6rem; margin-bottom: 6px; }
.formulaire label { display: block; font-size: 1rem; font-weight: 600; color: var(--encre-douce); margin: 14px 0 6px; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel], .formulaire textarea { width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid var(--filet-fort); border-radius: 14px; background: var(--nacre); color: var(--encre); font: inherit; font-size: 1.15rem; }
.formulaire textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.case { display: flex !important; gap: 12px; align-items: flex-start; font-weight: 400 !important; font-size: .98rem !important; line-height: 1.5; cursor: pointer; }
.case input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--accent); }
.formulaire .lingot { width: 100%; margin-top: 18px; }
.formulaire .erreur { color: #a1291c; font-size: 1rem; margin: 10px 0 0; }
.formulaire.envoye { text-align: center; }
.soutien { padding: 22px 20px; margin-top: 18px; outline: 2px solid var(--accent-clair); }
.soutien h2 { font-size: 1.9rem; margin-bottom: 10px; }
.soutien p { font-size: 1.15rem; }
.soutien .tel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-top: 10px; border-radius: 16px; border: 1px solid var(--filet); background: var(--nacre); text-decoration: none; color: var(--encre); }
.soutien .tel b, .soutien .tel small { display: block; }
.soutien .tel b { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: var(--accent-sombre); }
.soutien .tel small { font-size: 1rem; color: var(--encre-douce); }
.soutien .tel span { flex: none; padding: 9px 16px; border-radius: 12px; background: var(--cta); color: var(--cta-texte); font-weight: 600; font-size: 1rem; }
.progres { padding: 16px 18px; margin-top: 16px; display: flex; gap: 14px; align-items: center; }
.progres .delta { font-family: var(--serif); font-size: 2.4rem; color: var(--accent-sombre); flex: none; }
.progres p { margin: 0; font-size: 1.05rem; color: var(--encre-douce); }
.prudence { font-size: .95rem; color: var(--encre-pale); line-height: 1.6; margin: 34px auto 0; text-align: center; max-width: 34em; }
.effacer { display: block; margin: 16px auto 0; font-size: .95rem; color: var(--encre-pale); background: none; border: 0; text-decoration: underline; min-height: 44px; }
.vide { text-align: center; padding: 48px 16px; color: var(--encre-pale); font-family: var(--serif); font-size: 1.4rem; }
.install { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-top: 16px; }
.install .ic { width: 54px; height: 54px; border-radius: 14px; flex: none; }
.install p { margin: 0; font-size: 1rem; color: var(--encre-douce); flex: 1; }
.install b { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--encre); }
.install .lingot { min-height: 50px; padding: 8px 18px; font-size: 1.1rem; }

/* ── la clé d'urgence ── */
.urgence { text-align: center; }
.urgence .orbe { width: 150px; height: 150px; margin-top: 18px; }
.urgence.inspire .orbe img { animation: none; transform: scale(1.22); transition: transform 4s ease-in-out; }
.urgence.retiens .orbe img { animation: none; transform: scale(1.22); }
.urgence.expire .orbe img { animation: none; transform: scale(.84); transition: transform 6s ease-in-out; }
.consigne-souffle { font-family: var(--serif); font-size: 2.3rem; color: var(--accent-sombre); min-height: 52px; margin-top: 10px; }
.urgence .parole { font-family: var(--serif); font-size: 1.4rem; color: var(--encre-douce); line-height: 1.5; }

/* ── la feuille du bas : offres, ambiance, garder ── */
.feuille { position: fixed; inset: 0; z-index: 50; }
.feuille[hidden] { display: none; }
.feuille .fond { position: absolute; inset: 0; background: rgba(46,26,31,.38); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fondu .35s var(--doux) both; }
@keyframes fondu { from { opacity: 0; } }
.feuille .panneau { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 92vh; overflow-y: auto; background: var(--carte-fond), var(--fond);
  border-radius: 28px 28px 0 0; box-shadow: 0 -20px 60px rgba(70,26,38,.28); padding: 0 0 calc(20px + env(safe-area-inset-bottom)); animation: monte .6s var(--ressort) both; }
@media (min-width: 640px) { .feuille .panneau { bottom: 50%; transform: translateY(50%); border-radius: 28px; animation: apparait .6s var(--ressort) both; } }
@keyframes monte { from { transform: translateY(100%); } }
@keyframes apparait { from { opacity: 0; transform: translateY(54%) scale(.96); } }
.feuille .poignee { width: 46px; height: 5px; border-radius: 3px; background: var(--filet-fort); margin: 10px auto 0; position: relative; z-index: 2; }
.feuille .visuel { position: relative; height: 190px; margin-top: -15px; overflow: hidden; }
.feuille .visuel img { width: 100%; height: 100%; object-fit: cover; animation: ken 18s ease-out forwards; }
.feuille .visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, var(--nacre) 100%); }
.feuille .portrait { position: relative; z-index: 2; width: 84px; height: 84px; margin: -54px auto 6px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--nacre), 0 0 0 5.5px var(--accent-clair), 0 12px 26px rgba(120,52,68,.28); background: #fff; }
.feuille .contenu { padding: 8px 22px 0; text-align: center; }
.feuille h2 { font-size: 2rem; margin: 4px 0 10px; }
.feuille p { font-size: 1.12rem; color: var(--encre-douce); margin: 0 0 14px; }
.feuille .lingot { width: 100%; margin-top: 4px; }
.feuille .fermer { position: absolute; right: 14px; top: 14px; z-index: 3; width: 44px; height: 44px; font-size: 1.4rem; }
.feuille .plus-tard { display: block; margin: 8px auto 0; }
.feuille .pluie { z-index: 4; }
.ambiances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 18px; }
.ambiance { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 18px; border: 1px solid var(--filet); background: var(--nacre); font-size: .98rem; }
.ambiance i { width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 4px 10px rgba(0,0,0,.12); }
.ambiance[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-clair) 40%, transparent); }
.tailles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.tailles button { min-height: 56px; border-radius: 16px; border: 1px solid var(--filet); background: var(--nacre); font-family: var(--serif); }
.tailles button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-doux); }

/* ── la barre du bas, le toast, la pluie de pétales ── */
.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; background: color-mix(in srgb, var(--fond) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-top: 1px solid var(--filet); padding-bottom: env(safe-area-inset-bottom); }
.barre a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; min-height: var(--barre-h); text-decoration: none; color: var(--encre-pale); font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.barre a svg { width: 26px; height: 26px; transition: transform .3s var(--ressort); }
.barre a.actif { color: var(--accent-sombre); }
.barre a.actif svg { color: var(--accent); transform: translateY(-2px); }
.barre a.actif::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.toast { position: fixed; left: 50%; bottom: calc(var(--barre-h) + 18px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--encre); color: #fff6f4; padding: 12px 20px; border-radius: 16px; font-size: 1rem;
  box-shadow: 0 14px 34px rgba(46,26,31,.3); z-index: 55; max-width: calc(100% - 32px); text-align: center; animation: lever .45s var(--ressort) both; }
.toast[hidden] { display: none; }
.pluie { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pluie svg { animation: tombe 2.6s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes tombe { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(0) scale(.8); } 12% { opacity: .95; } 100% { opacity: 0; transform: translate3d(var(--dx, 40px), 92vh, 0) rotate(var(--r, 400deg)) scale(1); } }
.pas-vue > .pluie { z-index: 3; }

/* ── transitions de vue, squelettes, ouverture ── */
.vue.entree { animation: emerge .5s var(--ressort) both; }
.sq { border-radius: var(--rayon); background: linear-gradient(100deg, var(--sable) 35%, var(--nacre) 50%, var(--sable) 65%) 0 0 / 220% 100%; animation: miroiter 1.5s linear infinite; margin: 0 auto 16px; }
@keyframes miroiter { to { background-position: -120% 0; } }
.chargement .sq.logo { width: 120px; height: 120px; border-radius: 50%; } .chargement .sq.hero { aspect-ratio: 4 / 5; } .chargement .sq.btn { height: 60px; }
#ouverture { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--fond); pointer-events: none; animation: ouv-sort .6s var(--doux) 1.05s forwards; }
#ouverture img { width: 112px; height: 112px; border-radius: 26px; animation: ouv-bat 1.1s var(--ressort) both; filter: drop-shadow(0 14px 24px rgba(120,52,68,.3)); }
@keyframes ouv-bat { 0% { opacity: 0; transform: scale(.8); } 55% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ouv-sort { to { opacity: 0; visibility: hidden; } }
.bat { animation: battre .7s var(--ressort); }
@keyframes battre { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition: none !important; animation: none !important; }
  .rev { opacity: 1; transform: none; } #ouverture, .petales, .aurore { display: none; } .rose .p { transform: none; } .rose .coeur { opacity: 1; }
}
@media print {
  body::before, .aurore, .petales, .entete, .barre, .pas-vue, .feuille, .toast, .saut, #ouverture, .actions, .install, .effacer, .offre, .formulaire { display: none !important; }
  .carte { box-shadow: none; break-inside: avoid; }
}

/* ── passe de L'Œil (15/10) ── */
.rose-carte { background: none; box-shadow: none; outline: 0; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 6px 0 0; }
.rose { width: min(94vw, 520px); }
.rose-fin .rose { width: min(84vw, 420px); margin: -10px auto 4px; }
.fin-texte .question { margin-bottom: 8px; }
.ambiance i { width: 64px; height: 64px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.racine-carte::before { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-sombre) 82%, transparent), color-mix(in srgb, var(--accent-sombre) 90%, #000)); }
.racine-carte p { font-family: var(--sans); font-style: normal; font-size: 1.2rem; line-height: 1.6; }
.intro { font-family: var(--sans); font-size: 1.25rem; line-height: 1.6; }
.legende, .blessure li, .blessure .message, .seconde small, .comment li small, .aide, .echelle7 li, .avance small, .indice small, .cle p, .intro-petite, .offre p, .feuille p, .douce { font-size: 1.2rem; }
body[data-maison="sophroconnect"] .marque img, body[data-maison="sophroconnect"] #ouverture img { background: var(--nacre); padding: 3px; box-shadow: 0 0 0 1px var(--filet); }
.lingot.respire::after { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 48%, transparent 66%); }
.souffle-btn i { animation: none; box-shadow: none; background: var(--accent-clair); }
@media (min-width: 900px) { .barre { left: 50%; right: auto; transform: translateX(-50%); width: 560px; bottom: 16px; border-radius: 22px; border: 1px solid var(--filet); box-shadow: var(--ombre); padding-bottom: 0; } body { padding-bottom: 110px; } }