/* Atelier Projet G : le téléphone au centre, le panneau à côté (ou en tiroir sur iPhone).
   Les couleurs de l'atelier suivent le thème de l'appli (clair ou sombre) avec ses valeurs d'origine. */
:root {
  --a-fond: #DCDCD6;
  --a-panneau: #F2F2EE;
  --a-surface: #FBFBF9;
  --a-ink: #0E0F10;
  --a-ink2: #56585B;
  --a-hair: #D0D0CA;
  --a-cadre: #111214;
  --a-ok: #3B7A16;
  --a-attente: #9A5A00;
  --a-accent: #C6F11B;
  --f-ui: 'Sofia Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-chiffre: 'Fragment Mono', ui-monospace, monospace;
  color-scheme: light;
}
:root[data-mode="sombre"] {
  --a-fond: #060914;
  --a-panneau: #0D1328;
  --a-surface: #131A33;
  --a-ink: #EEF0F8;
  --a-ink2: #9CA3C2;
  --a-hair: #253055;
  --a-cadre: #000000;
  --a-ok: #8FD14F;
  --a-attente: #F2B04A;
  color-scheme: dark;
}
html, body { height: 100%; }
body { background: var(--a-fond); color: var(--a-ink); font-family: var(--f-ui); overflow: hidden; }
#atelier { height: 100%; }
button { font-family: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }

.atelier { height: 100%; }
.atelier.large { display: grid; grid-template-columns: minmax(0, 1fr) 400px; }
.atelier.etroit { display: flex; flex-direction: column; }
.scene { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.atelier.etroit .scene { flex: 1; height: auto; }

/* Barre du haut */
.barre { flex: none; display: flex; align-items: center; gap: 14px; padding-block: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); min-width: 0; }
.atelier.etroit .barre { padding-block: 8px; gap: 10px; }
.marque { display: flex; flex-direction: column; line-height: 1; flex: none; }
.marque-nom { font-family: 'Sofia Sans Extra Condensed', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: 0.01em; text-transform: uppercase; }
.marque-sous { margin-top: 3px; font-family: var(--f-chiffre); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--a-ink2); }
.onglets { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
.onglets::-webkit-scrollbar { display: none; }
.onglets button { flex: none; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 600; color: var(--a-ink2); }
.onglets button:hover { color: var(--a-ink); }
.onglets button.on { background: var(--a-ink); color: var(--a-fond); }
.btn-reglages { flex: none; height: 36px; padding: 0 12px 0 10px; border-radius: 999px; border: 0; background: var(--a-ink); color: var(--a-fond); display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }

/* Statut de la sauvegarde */
.statut { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--a-ink2); margin: 0; }
.statut.mini { flex: none; width: 12px; height: 12px; justify-content: center; }
.statut.court { flex: none; font-size: 12px; white-space: nowrap; }
.scene { position: relative; }
/* Sur iPhone : le bouton des réglages se pose là où serait la barre d'état, sans rien cacher de l'écran */
.btn-reglages.flottant { position: absolute; z-index: 5; left: 50%; top: calc(8px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); height: 34px; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5); }
.pastille-statut { width: 8px; height: 8px; border-radius: 50%; background: var(--a-ink2); flex: none; }
.statut.partage .pastille-statut { background: var(--a-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-ok) 25%, transparent); }
.statut.local .pastille-statut, .statut.lecture .pastille-statut { background: var(--a-attente); }
.statut.connexion .pastille-statut { animation: clignote 1s ease-in-out infinite alternate; }
@keyframes clignote { from { opacity: 0.3; } to { opacity: 1; } }

/* Téléphone */
.tel-zone { flex: 1; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tel-boite { position: relative; flex: none; }
.tel { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-sizing: border-box; }
.tel.cadre { background: var(--a-cadre); border-radius: 64px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.45), inset 0 0 0 1.5px #2B2C30; }
.tel-ecran { position: relative; overflow: hidden; contain: layout paint; }
.tel.cadre .tel-ecran { border-radius: 50px; }
.tel-defile { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; animation: arrivee 260ms cubic-bezier(.2, .8, .2, 1) both; }
.tel-defile::-webkit-scrollbar { display: none; }
@keyframes arrivee { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Panneau */
.panneau { min-height: 0; height: 100%; overflow-y: auto; background: var(--a-panneau); border-left: 1px solid var(--a-hair); overscroll-behavior: contain; }
.atelier.etroit .panneau { height: 58%; flex: none; border-left: 0; border-top: 1px solid var(--a-hair); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.35); padding-bottom: env(safe-area-inset-bottom, 0px); }
.panneau-tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 10px; padding-block: 16px 10px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); background: var(--a-panneau); border-bottom: 1px solid var(--a-hair); }
.panneau-tete h1 { margin: 0; font-family: 'Sofia Sans Extra Condensed', sans-serif; font-weight: 900; font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; }
.btn-fermer { flex: none; align-self: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--a-hair); background: var(--a-surface); display: flex; align-items: center; justify-content: center; padding: 0; }
.panneau-ecran { margin-left: auto; font-family: var(--f-chiffre); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--a-ink2); }

.sec { border-bottom: 1px solid var(--a-hair); }
.sec h2 { margin: 0; }
.sec h2 button { width: 100%; display: flex; align-items: center; gap: 10px; padding-block: 15px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); border: 0; background: transparent; text-align: left; }
.sec-titre { font-size: 15px; font-weight: 700; }
.sec-resume { margin-left: auto; font-family: var(--f-chiffre); font-size: 11px; color: var(--a-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.sec-chev { display: flex; color: var(--a-ink2); transition: transform 0.2s; }
.sec.ouvert .sec-chev { transform: rotate(180deg); }
.sec-corps { display: flex; flex-direction: column; gap: 16px; padding-block: 2px 22px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.sec-corps[hidden] { display: none; }
.sec-corps h3, .sous h3 { margin: 6px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--a-ink2); display: flex; align-items: baseline; gap: 8px; }
.sous { display: flex; flex-direction: column; gap: 16px; padding-top: 14px; border-top: 1px dashed var(--a-hair); }
.sous h3 { color: var(--a-ink); font-size: 13px; }
.jp { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; letter-spacing: 0; }

.ctl { display: flex; flex-direction: column; gap: 8px; border-radius: 10px; transition: background 0.4s, box-shadow 0.4s; }
.ctl.recent { background: color-mix(in srgb, var(--a-accent) 22%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--a-accent) 22%, transparent); }
.ctl-tete { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.ctl-tete label { font-size: 13.5px; font-weight: 600; }
.ctl-tete output { margin-left: auto; font-family: var(--f-chiffre); font-size: 12px; color: var(--a-ink2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.ctl-reset { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--a-hair); background: var(--a-surface); display: flex; align-items: center; justify-content: center; padding: 0; color: var(--a-ink2); }
.ctl-reset:hover { color: var(--a-ink); border-color: var(--a-ink2); }
.ctl-reset[hidden] { display: none; }
.ctl-tete output + .ctl-reset[hidden] { display: none; }

input[type="range"] { width: 100%; margin: 0; height: 28px; background: transparent; -webkit-appearance: none; appearance: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--a-hair); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--a-hair); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--a-ink); border: 3px solid var(--a-panneau); box-shadow: 0 0 0 1px var(--a-ink); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--a-ink); border: 3px solid var(--a-panneau); }

.segments { display: flex; flex-wrap: wrap; gap: 6px; }
.segments button { height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--a-hair); background: var(--a-surface); font-size: 13px; font-weight: 600; }
.segments button.on { background: var(--a-ink); border-color: var(--a-ink); color: var(--a-panneau); }

.couleur { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.couleur input[type="color"] { width: 44px; height: 34px; padding: 3px; border: 1px solid var(--a-hair); border-radius: 10px; background: var(--a-surface); }
.couleur input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.couleur input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.champ, .hex { height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--a-hair); border-radius: 10px; background: var(--a-surface); color: var(--a-ink); font-size: 13px; min-width: 0; }
.hex { width: 96px; font-family: var(--f-chiffre); font-size: 12.5px; text-transform: uppercase; }
.champ { width: 100%; font-family: var(--f-ui); }
.nuances { display: flex; gap: 6px; margin-left: 4px; }
.nuance { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); padding: 0; }
.nuance.on { box-shadow: 0 0 0 2px var(--a-panneau), 0 0 0 4px var(--a-ink); }

.switch { align-self: flex-start; height: 34px; padding: 0 14px 0 5px; border-radius: 999px; border: 1px solid var(--a-hair); background: var(--a-surface); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.switch span { width: 24px; height: 24px; border-radius: 50%; background: var(--a-hair); transition: background 0.2s; }
.switch.on span { background: var(--a-ink); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bouton { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--a-hair); background: var(--a-surface); font-size: 13px; font-weight: 650; text-align: left; }
.bouton:hover { border-color: var(--a-ink2); }
.bouton.plein { background: var(--a-ink); border-color: var(--a-ink); color: var(--a-panneau); }
.bouton.petit { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }
.bouton:disabled { opacity: 0.45; cursor: default; }
.lien { border: 0; background: none; padding: 4px 2px; font-size: 12.5px; font-weight: 600; color: var(--a-ink2); text-decoration: underline; text-underline-offset: 3px; }
.aide { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--a-ink2); max-width: 60ch; }
.version { margin: 0; font-size: 13px; line-height: 1.5; }

.preset-form { display: flex; gap: 8px; }
.presets, .histo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.presets li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--a-hair); }
.preset-nom { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.preset-nom small { font-family: var(--f-chiffre); font-size: 10.5px; font-weight: 400; color: var(--a-ink2); }
.preset-actions, .confirm { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex: none; }
.histo li { font-size: 12.5px; line-height: 1.45; color: var(--a-ink2); padding: 6px 0; border-top: 1px solid var(--a-hair); }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 20; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 999px; background: var(--a-ink); color: var(--a-fond); font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45); animation: arrivee 220ms ease both; }
.atelier.etroit.tiroir-ouvert .toast { bottom: calc(58% + 12px); }

@media (prefers-reduced-motion: reduce) {
  .tel-defile, .toast { animation: none; }
}

/* Message dans l'appli (« Noté : … »), en haut de l'écran du téléphone */
.msg-app { position: absolute; z-index: 40; left: 50%; top: 52px; transform: translateX(-50%); max-width: calc(100% - 40px); padding: 11px 18px; border-radius: 999px; font-family: 'Sofia Sans', sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45); animation: msgApp 2600ms cubic-bezier(.2, .8, .2, 1) both; pointer-events: none; }
/* Champs de l'appli : le cadre arrondi s'allume, pas de second cadre dedans */
/* Cibles tactiles : quand un bouton est dessiné petit, la zone que le doigt touche dépasse un peu le dessin (au moins 44 px) */
.tel-ecran .pg-cible, .tel-ecran .pg-cible-v { position: relative; }
.tel-ecran .pg-cible::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: -3px; right: -3px; }
.tel-ecran .pg-cible-v::after { content: ''; position: absolute; top: -11px; bottom: -11px; left: 0; right: 0; }
.tel-ecran .pg-champ:focus-within { border-color: currentColor !important; }
.tel-ecran .pg-champ input:focus { outline: none; }
.tel-ecran input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* Séance : l'exercice suivant arrive de la droite, le précédent de la gauche ; le bouton devient le minuteur */
@keyframes sgSlideR { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes sgSlideL { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
@keyframes sgMorph { from { opacity: .3; transform: scaleX(.96); } to { opacity: 1; transform: none; } }
@keyframes msgApp { 0% { opacity: 0; transform: translate(-50%, -14px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
/* ---------- Corps dessiné (dessin de Shihane) : pièces aimantées, respiration, lueurs, reflet, demi-tour ---------- */
.tel-ecran .cd-scene { position: relative; height: 540px; margin-top: 4px; perspective: 1400px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.tel-ecran .cd-halo { position: absolute; left: 50%; top: 47%; width: 380px; height: 470px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--halo), transparent); pointer-events: none; opacity: 0; will-change: opacity; }
.tel-ecran .cd-sol { position: absolute; left: 50%; bottom: 4px; width: 210px; height: 28px; margin-left: -105px; border-radius: 50%; background: radial-gradient(closest-side, var(--sol), transparent); pointer-events: none; transition: transform .2s cubic-bezier(.55, 0, .85, .3); }
.tel-ecran .cd-sol.sort { transform: scaleX(.3); }
.tel-ecran .cd-sol.entre { animation: cdSolEntre .52s cubic-bezier(.2, .9, .3, 1.15) both; }
.tel-ecran .cd-tourne { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.2, .9, .3, 1.25); will-change: transform; }
.tel-ecran .cd-tourne.sort { transition: transform .2s cubic-bezier(.55, 0, .85, .3); transform: rotateY(calc(var(--sens) * 90deg)); }
.tel-ecran .cd-tourne.entre { animation: cdEntre .52s cubic-bezier(.2, .9, .3, 1.15) both; }
.tel-ecran .cd-souffle { position: absolute; inset: 0; transform-origin: 50% 100%; animation: cdSouffle 4.8s ease-in-out infinite; will-change: transform; }
.tel-ecran .cd-figure, .tel-ecran .cd-pouls { position: absolute; inset: 0; }
.tel-ecran .cd-figure svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.tel-ecran .cd-reflets, .tel-ecran .cd-eclairage, .tel-ecran .cd-ombre { pointer-events: none; }
.tel-ecran .cd-pouls { pointer-events: none; animation: cdPouls 3.4s ease-in-out 2s infinite alternate; will-change: opacity; }
.tel-ecran .cd-lueurs { opacity: var(--lueur); animation: cdLueurArrive 1.1s ease .95s backwards; }
.tel-ecran .cd-m { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; }
.tel-ecran .cd-svg.arrivee-aimant .cd-m { animation: cdAimant .66s cubic-bezier(.2, 1.25, .35, 1) var(--d) backwards; }
.tel-ecran .cd-svg.arrivee-pluie .cd-m { animation: cdPluie .8s cubic-bezier(.3, 1.3, .4, 1) var(--d) backwards; }
.tel-ecran .cd-svg.arrivee-fondu .cd-m { animation: pgFade .5s ease var(--d) backwards; }
.tel-ecran .cd-svg.vite .cd-m { animation-duration: .42s; }
.tel-ecran .cd-plaque { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.2, 1.6, .35, 1); }
.tel-ecran .cd-dessus { cursor: pointer; }
.tel-ecran .cd-dessus-p { transform-box: fill-box; transform-origin: center; animation: cdLeve .55s cubic-bezier(.2, 1.6, .35, 1) both; }
@keyframes cdLeve { from { transform: none; } to { transform: scale(1.07) translateY(-2px); } }
.tel-ecran .cd-m:active .cd-plaque { transform: scale(.95); transition-duration: .12s; }
.tel-ecran .cd-chair { fill: var(--c); transition: fill .35s ease; animation: cdRemplit .7s ease calc(var(--d) + .38s) backwards; }
.tel-ecran .cd-svg.choix .cd-m:not(.on) .cd-chair { fill: var(--c0); }
.tel-ecran .cd-bande { animation: cdReflet 6.5s cubic-bezier(.45, 0, .25, 1) 2.2s infinite; }
.tel-ecran .cd-fiche { animation: pgRise .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cdAimant { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.55) rotate(var(--r)); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes cdPluie { from { opacity: 0; transform: translateY(-120px) scale(.92); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes cdRemplit { from { fill: var(--c0); } to { fill: var(--c); } }
@keyframes cdReflet { 0% { transform: translateX(0); } 24%, 100% { transform: translateX(860px); } }
@keyframes cdSouffle { 0%, 100% { transform: none; } 50% { transform: translateY(calc(-3px * var(--souffle))) scale(calc(1 + .008 * var(--souffle)), calc(1 + .012 * var(--souffle))); } }
@keyframes cdPouls { from { opacity: 1; } to { opacity: .55; } }
@keyframes cdLueurArrive { from { opacity: 0; } }
@keyframes cdEntre { from { transform: rotateY(calc(var(--sens) * -90deg)); } to { transform: none; } }
@keyframes cdSolEntre { from { transform: scaleX(.3); } to { transform: none; } }
/* ---------- Finition (v10) : chiffres qui roulent, séance au doigt, feuilles qui glissent, série validée qui vole ---------- */
.tel-ecran .rl { display: inline-block; white-space: pre; }
.tel-ecran .rl-c { position: relative; display: inline-block; }
.tel-ecran .rl-sort { position: absolute; left: 0; top: 0; }
.tel-ecran .rl-entre.rl-haut { animation: rlMonteEntre .34s cubic-bezier(.2, .9, .25, 1) both; }
.tel-ecran .rl-sort.rl-haut { animation: rlMonteSort .3s cubic-bezier(.4, 0, .6, 1) both; }
.tel-ecran .rl-entre.rl-bas { animation: rlDescendEntre .34s cubic-bezier(.2, .9, .25, 1) both; }
.tel-ecran .rl-sort.rl-bas { animation: rlDescendSort .3s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes rlMonteEntre { from { transform: translateY(45%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rlMonteSort { from { transform: none; opacity: 1; } to { transform: translateY(-45%); opacity: 0; } }
@keyframes rlDescendEntre { from { transform: translateY(-45%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rlDescendSort { from { transform: none; opacity: 1; } to { transform: translateY(45%); opacity: 0; } }
@keyframes sgSuitR { from { opacity: 0; transform: translateX(55%); } to { opacity: 1; transform: none; } }
@keyframes sgSuitL { from { opacity: 0; transform: translateX(-55%); } to { opacity: 1; transform: none; } }
.tel-ecran .sg-apercu { position: absolute; top: 330px; z-index: 3; display: flex; flex-direction: column; gap: 4px; max-width: 150px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.tel-ecran .sg-vol { position: absolute; z-index: 40; box-sizing: border-box; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12.5px; pointer-events: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.tel-ecran .sg-pop { animation: sgPop .44s cubic-bezier(.2, 1.4, .35, 1) .38s both; }
.tel-ecran .sg-pop path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: sgCoche .32s ease-out .6s forwards; }
.tel-ecran .sg-suivante { animation: sgSuivante .4s cubic-bezier(.2, .8, .2, 1) .48s both; }
@keyframes sgPop { 0% { opacity: 0; transform: scale(.7); } 55% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: none; } }
@keyframes sgCoche { to { stroke-dashoffset: 0; } }
@keyframes sgSuivante { from { opacity: 0; transform: translateX(-10px) scale(.92); } to { opacity: 1; transform: none; } }
.tel-ecran .ft-sortie { pointer-events: none; }
.tel-ecran .ft-sortie [role="dialog"]:not([data-parti]) { animation: ftDescend .22s cubic-bezier(.4, 0, 1, 1) both !important; }
.tel-ecran .ft-sortie > div > button:first-child { animation: ftVoile .22s ease both !important; }
@keyframes ftDescend { from { transform: none; opacity: 1; } to { transform: translateY(65%); opacity: 0; } }
@keyframes ftVoile { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tel-ecran .rl-entre, .tel-ecran .rl-sort, .tel-ecran .sg-pop, .tel-ecran .sg-pop path, .tel-ecran .sg-suivante { animation: none !important; }
  .tel-ecran .rl-sort { display: none; }
}
/* ---------- Corps dessiné, la scène (v8) : kanji géant, projecteur, ombre, lumière sur le corps, magnésie, relief, annotations, vapeur ---------- */
.tel-ecran .cd-decor { position: absolute; pointer-events: none; }
.tel-ecran .cd-decor-kanji { position: absolute; inset: 0; will-change: transform; }
.tel-ecran .cd-kanji-pos { position: absolute; left: 64%; top: 42%; transform: translate(-50%, -50%); }
.tel-ecran .cd-kanji-pos.fr { transform: translate(-50%, -50%) rotate(180deg); }
.tel-ecran .cd-kanji { position: relative; display: block; font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif; font-weight: 900; font-size: calc(430px * var(--k-fantome)); line-height: 1; color: var(--kanji-c); white-space: nowrap; }
.tel-ecran .cd-kanji.fr { writing-mode: vertical-rl; font-family: var(--f-display); font-size: calc(300px * var(--k-fantome)); line-height: 0.8; letter-spacing: -0.01em; }
.tel-ecran .cd-kanji::after { content: attr(data-t); position: absolute; left: 0; top: 0; color: transparent; -webkit-text-stroke: 1.2px var(--kanji-trait); transform: translate(9px, -7px); opacity: var(--contour); pointer-events: none; }
.tel-ecran .cd-kanji.arrivee { animation: cdKanjiArrive 1.15s cubic-bezier(.2, .8, .2, 1) .42s both; }
.tel-ecran .cd-kanji.entre { animation: cdKanjiEntre .5s cubic-bezier(.2, .8, .2, 1) both; }
.tel-ecran .cd-kanji.sort { animation: cdKanjiSort .3s ease both; }
@keyframes cdKanjiArrive { from { opacity: 0; -webkit-clip-path: inset(-24px -24px 100% -24px); clip-path: inset(-24px -24px 100% -24px); transform: scale(1.05); } 25% { opacity: 1; } to { opacity: 1; -webkit-clip-path: inset(-24px); clip-path: inset(-24px); transform: none; } }
@keyframes cdKanjiEntre { from { opacity: 0; -webkit-clip-path: inset(-24px -24px 100% -24px); clip-path: inset(-24px -24px 100% -24px); transform: translateY(-14px) scale(1.03); } to { opacity: 1; -webkit-clip-path: inset(-24px); clip-path: inset(-24px); transform: none; } }
@keyframes cdKanjiSort { to { opacity: 0; transform: scale(.96); } }
.tel-ecran .cd-air, .tel-ecran .cd-vapeur, .tel-ecran .cd-meches { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.tel-ecran .cd-meches canvas { position: absolute; display: block; }
.tel-ecran .cd-penche { position: absolute; inset: 0; perspective: 1400px; will-change: transform; }
.tel-ecran .cd-ombre { animation: cdOmbre .6s ease .35s both; }
@keyframes cdOmbre { from { opacity: 0; } }
.tel-ecran .cd-lumiere-corps { transform: translateX(calc(var(--glisse, 0) * var(--lw) * -0.55px)); }
.tel-ecran .cd-scene.sort .cd-lumiere-corps { transform: translateX(calc(var(--sens) * var(--lw) * -0.9px)); transition: transform .2s cubic-bezier(.55, 0, .85, .3); }
.tel-ecran .cd-scene.entre .cd-lumiere-corps { animation: cdLumiereEntre .55s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes cdLumiereEntre { from { transform: translateX(calc(var(--sens) * var(--lw) * 0.9px)); } to { transform: translateX(0); } }
.tel-ecran .cd-notes { position: absolute; inset: 0; pointer-events: none; transition: opacity .15s ease; }
.tel-ecran .cd-scene.sort .cd-notes { opacity: 0; }
.tel-ecran .cd-trait-note { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cdTrace .55s cubic-bezier(.4, 0, .2, 1) var(--d) forwards; }
.tel-ecran .cd-point-note { transform-box: fill-box; transform-origin: center; animation: cdPoint .45s cubic-bezier(.2, 1.6, .35, 1) var(--d) both; }
.tel-ecran .cd-note { position: absolute; display: flex; flex-direction: column; gap: 2px; animation: cdNote .4s ease var(--d) both; }
@keyframes cdTrace { to { stroke-dashoffset: 0; } }
@keyframes cdPoint { from { transform: scale(0); } to { transform: none; } }
@keyframes cdNote { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tel-ecran .cd-reperes { position: absolute; inset: 0; pointer-events: none; animation: cdReperes .8s ease 1s both; }
@keyframes cdReperes { from { opacity: 0; } }
.tel-ecran .cd-reperes svg { position: absolute; left: 0; top: 0; overflow: visible; opacity: .75; }
.tel-ecran .cd-etiquette { position: absolute; left: 24px; top: 3px; white-space: nowrap; animation: cdReperes .4s ease both; }
@media (prefers-reduced-motion: reduce) {
  .tel-ecran .cd-souffle, .tel-ecran .cd-bande, .tel-ecran .cd-pouls { animation: none; }
  .tel-ecran .cd-svg .cd-m { animation: pgFade .3s ease both !important; }
  .tel-ecran .cd-kanji, .tel-ecran .cd-point-note, .tel-ecran .cd-note, .tel-ecran .cd-reperes, .tel-ecran .cd-etiquette, .tel-ecran .cd-ombre { animation: none !important; }
  .tel-ecran .cd-trait-note { animation: none !important; stroke-dashoffset: 0; }
  .tel-ecran .cd-lumiere-corps { transition: none !important; animation: none !important; }
}