/* MINDPRINT — apparence iOS */

:root {
  --top: env(safe-area-inset-top, 47px);
  --bottom: env(safe-area-inset-bottom, 34px);
  --wallpaper:
    radial-gradient(120% 70% at 20% 10%, #ff8a5c 0%, transparent 55%),
    radial-gradient(110% 80% at 90% 40%, #7b4dff 0%, transparent 60%),
    radial-gradient(120% 90% at 30% 100%, #1fa2ff 0%, transparent 60%),
    linear-gradient(160deg, #2b1055 0%, #0f2e6b 100%);
  --blue: #007aff;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #000;
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
body { position: fixed; inset: 0; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

#haptic, #haptic-switch {
  position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0;
  opacity: .01; pointer-events: none;
}

#app { position: fixed; inset: 0; overflow: hidden; }

.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  touch-action: none;
}
.screen.active { display: block; }

/* Animations d'ouverture */
.anim-open { animation: appOpen .38s cubic-bezier(.2, .9, .25, 1); transform-origin: 50% 40%; }
@keyframes appOpen { from { transform: scale(.25); opacity: 0; border-radius: 60px; } to { transform: none; opacity: 1; } }
.anim-close { animation: appClose .32s ease-out; }
@keyframes appClose { from { transform: scale(1.12); opacity: .4; } to { transform: none; opacity: 1; } }
.anim-unlock { animation: unlockIn .4s cubic-bezier(.2, .9, .25, 1); }
@keyframes unlockIn { from { transform: scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } }
.anim-wake { animation: wake .45s ease-out; }
@keyframes wake { from { opacity: 0; } to { opacity: 1; } }

.wall { position: absolute; inset: 0; background: var(--wallpaper); }

/* ---------- Captures d'écran (interface identique) ---------- */
.skin-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; display: block;
  pointer-events: none;
}
#calibrate .skin-img { pointer-events: auto; }
.hotspot { position: absolute; border-radius: 22%; }
.hotspot:active { background: rgba(0, 0, 0, .12); }

/* ---------- Écran d'accueil ---------- */
#home { color: #fff; }
.home-grid {
  position: absolute;
  top: calc(var(--top) + 18px);
  left: 0; right: 0;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 26px;
  justify-items: center;
}
.app { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; }
.app-icon {
  width: 62px; height: 62px;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: transform .12s, filter .12s;
}
.app-icon svg { width: 100%; height: 100%; display: block; }
.app:active .app-icon { transform: scale(.9); filter: brightness(.75); }
.app-label {
  font-size: 12px;
  letter-spacing: -.1px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.home-search {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bottom) + 116px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.home-search svg { width: 13px; height: 13px; }
.dock {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(var(--bottom) - 14px);
  height: 96px;
  border-radius: 36px;
  background: rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 10px;
}
.dock .app { width: 62px; }

/* ---------- Écran verrouillé ---------- */
#lock { color: #fff; text-align: center; }
#lock > * { transition: transform .1s; }
#lock .lock-pad, #lock .lock-date, #lock .lock-time, #lock .lock-buttons, #lock .lock-hint {
  transform: translateY(var(--lift, 0px));
}
.lock-pad { position: absolute; top: calc(var(--top) + 6px); left: 0; right: 0; height: 26px; }
.lock-pad svg { width: 22px; height: 22px; transition: transform .3s; }
.lock-pad.open svg { transform: scale(1.08); }
.lock-date {
  position: absolute; top: calc(var(--top) + 40px); left: 0; right: 0;
  font-size: 21px; font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}
.lock-time {
  position: absolute; top: calc(var(--top) + 60px); left: 0; right: 0;
  font-family: var(--font-display);
  font-size: 100px; font-weight: 700; letter-spacing: -2px;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.lock-buttons {
  position: absolute; left: 46px; right: 46px; bottom: calc(var(--bottom) + 26px);
  display: flex; justify-content: space-between;
}
.lock-btn {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.lock-btn svg { width: 22px; height: 22px; }
.lock-hint {
  position: absolute; left: 0; right: 0; bottom: calc(var(--bottom) + 2px);
  font-size: 15px; font-weight: 500; opacity: 0;
  transition: opacity .4s;
}
#lock.unlocked .lock-hint { opacity: .9; }

/* ---------- Écran noir ---------- */
#black { background: #000; cursor: none; }
.code-hint {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--bottom) + 6px);
  text-align: center;
  direction: ltr; unicode-bidi: isolate; /* même en hébreu : « Q♥ » de gauche à droite */
  font-size: 14px; font-weight: 600;
  color: #6a6a6a;
  pointer-events: none;
}

/* ---------- Appareil photo ---------- */
#camera { background: #000; color: #fff; }
.cam-top {
  position: absolute; top: calc(var(--top) + 18px); right: 16px; height: 36px;
  display: flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 18px;
  background: rgba(30, 30, 32, .55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cam-glyph { width: 32px; height: 32px; display: grid; place-items: center; }
.cam-glyph svg { width: 20px; height: 20px; }
.cam-night { color: #ffd60a; }
.cam-flash svg:not(.off) { display: none; }
.cam-flash.on svg:not(.off) { display: block; }
.cam-flash.on svg.off { display: none; }
.cam-view {
  position: absolute;
  top: calc(var(--top) + 65px);
  left: 0; right: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #111;
}
.cam-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-view video.mirror { transform: scaleX(-1); }
.cam-live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cam-blink { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.cam-view.blink .cam-blink { animation: blink .22s ease-out; }
@keyframes blink { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.cam-guide {
  position: absolute; left: 35%; width: 30%;
  aspect-ratio: 63 / 88;
  top: 50%; transform: translateY(-50%);
  border: 1.5px dashed rgba(255, 214, 10, .8);
  border-radius: 8px;
  display: none;
}
.cam-guide.show { display: block; }
.cam-zoom {
  /* Comme sur iOS : le « 1× » est pile au milieu de l'écran (sous le bouton blanc).
     .5 = 38 px + 2 px d'écart, puis la moitié du 1× (19 px) = 59 px avant son centre. */
  position: absolute; bottom: 20px; left: calc(50% - 59px);
  display: flex; align-items: center; gap: 2px;
  direction: ltr;
}
.cam-zoom button {
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 13px; font-weight: 500; color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, .4);
}
.cam-zoom button.on { color: #ffd60a; background: rgba(30, 30, 32, .6); font-weight: 600; }
.cam-error {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 30px;
  text-align: center; font-size: 15px; color: #ddd; pointer-events: none;
}
.cam-error:empty { display: none; }
.cam-shutter {
  position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(var(--bottom) + 84px);
  width: 78px; height: 78px; border-radius: 50%;
  border: 3.5px solid rgba(255, 255, 255, .9);
  display: grid; place-items: center;
}
.cam-shutter span {
  width: 64px; height: 64px; border-radius: 50%; background: #fff;
  transition: transform .1s;
}
.cam-shutter:active span { transform: scale(.88); }
.cam-bottom {
  /* 3 colonnes égales : la capsule VIDÉO | PHOTO reste toujours pile au milieu. */
  position: absolute; left: 34px; right: 34px; bottom: var(--bottom);
  height: 50px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.cam-bottom .cam-thumb { justify-self: start; }
.cam-bottom .cam-flip { justify-self: end; }
.cam-thumb {
  width: 50px; height: 50px; border-radius: 50%;
  background: #222 center / cover no-repeat;
}
.cam-thumb.pop { animation: pop .3s ease-out; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.cam-modes {
  height: 48px; padding: 4px; border-radius: 24px;
  display: flex; align-items: center;
  background: rgba(38, 38, 40, .8);
  font-size: 14px; font-weight: 500; letter-spacing: .5px; white-space: nowrap;
}
.cam-modes span { padding: 0 17px; height: 40px; line-height: 40px; border-radius: 20px; }
.cam-modes .on { color: #ffd60a; background: rgba(70, 70, 50, .55); }
.cam-flip {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(38, 38, 40, .8);
  display: grid; place-items: center;
}
.cam-flip svg { width: 26px; height: 26px; }
.hotspot.cam-shutter { margin: 0; bottom: auto; border: 0; }
.cam-flash.on { color: #ffd60a; }
.cam-view.skin-view { position: absolute; aspect-ratio: auto; right: auto; bottom: auto; background: #000; }
.skin-thumb, .ph-last, .vw-title-patch, .vw-stage[style] { right: auto; bottom: auto; }
.skin-thumb { position: absolute; border-radius: 8px; background-color: transparent; }
.hotspot.cam-flash.on { box-shadow: inset 0 0 0 1.5px rgba(255, 214, 10, .55); border-radius: 50%; }

/* ---------- Grille Photos avec capture ---------- */
.ph-grid-page { position: absolute; inset: 0; }
.ph-last { position: absolute; background: #ddd center / cover no-repeat; }

/* ---------- Réglage des zones ---------- */
#calibrate { background: #000; }
.cal-marks { position: absolute; inset: 0; pointer-events: none; }
.cal-dot {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: rgba(255, 59, 48, .85); border: 2px solid #fff;
}
.cal-rect { position: absolute; border: 2px solid #ff3b30; background: rgba(255, 59, 48, .15); }
.cal-banner {
  position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%);
  padding: 14px 16px; border-radius: 16px;
  background: rgba(0, 0, 0, .78); color: #fff; text-align: center;
  font-size: 16px; font-weight: 600; line-height: 1.35;
  pointer-events: none;
}
.cal-buttons { display: flex; gap: 8px; justify-content: center; margin-top: 10px; pointer-events: auto; }
.cal-buttons button { padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .18); font-size: 15px; }
.cal-buttons .cal-save { background: #0a84ff; }

/* ---------- Photos (copie d'iOS 26, d'après tes captures) ---------- */
#photos { background: #000; color: #fff; }

/* Boutons « verre liquide » d'iOS 26 */
.gl-round, .gl-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; color: #fff;
  background: rgba(38, 38, 40, .55);
  border: .5px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), 0 4px 18px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
.gl-round { width: 44px; border-radius: 50%; }
.gl-pill { border-radius: 22px; padding: 0 16px; }
.gl-round svg { width: 22px; height: 22px; }

/* La grille */
.ph-scroll {
  position: absolute; inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-top: calc(var(--top) + 76px);
  padding-bottom: calc(var(--bottom) + 84px);
}
.ph-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5px; }
.ph-cell { aspect-ratio: 1; background: #1c1c1e center / cover no-repeat; }

.ph-fade-top, .ph-fade-bottom { position: absolute; left: 0; right: 0; pointer-events: none; }
.ph-fade-top {
  top: 0; height: calc(var(--top) + 96px);
  background: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .32) 60%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.ph-fade-bottom {
  bottom: 0; height: calc(var(--bottom) + 110px);
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}
.ph-head {
  position: absolute; left: 0; right: 0; top: calc(var(--top) + 6px);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 16px 0 17px;
}
.ph-head h1 {
  margin: 0; font-family: var(--font-display); font-size: 33px; font-weight: 700; letter-spacing: .1px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.ph-actions { display: flex; gap: 10px; }
.ph-select { font-size: 17px; font-weight: 500; padding: 0 17px; }

.ph-tabs {
  position: absolute; left: 22px; right: 22px; bottom: calc(var(--bottom) - 8px);
  display: flex; justify-content: space-between; align-items: center;
}
.ph-tabbar { height: 62px; border-radius: 31px; padding: 4px; gap: 0; }
.ph-tab {
  width: 104px; height: 54px; border-radius: 27px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; font-weight: 500;
}
.ph-tab svg { width: 28px; height: 24px; }
.ph-tab.on { color: #0a84ff; background: rgba(255, 255, 255, .1); }
.ph-tab small { font-size: 11px; }
.ph-search { width: 62px; height: 62px; }
.ph-search svg { width: 26px; height: 26px; }

/* La photo ouverte */
.viewer {
  position: absolute; inset: 0;
  background: #000;
  display: none;
}
.viewer.open { display: block; animation: wake .2s ease-out; }
.vw-stage {
  position: absolute; left: 0; right: 0;
  top: calc(var(--top) + 64px); bottom: calc(var(--bottom) + 128px);
  touch-action: none; transition: top .25s, bottom .25s;
}
.viewer.bare .vw-stage:not([style]), .viewer.zoomed .vw-stage:not([style]) { top: 0; bottom: 0; }
.vw-zoom { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.vw-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
}
.viewer.skinned .vw-stage img { object-fit: cover; }
.viewer.zoomed .vw-chrome, .viewer.zoomed .vw-ui { opacity: 0; pointer-events: none; }
.vw-chrome, .vw-ui { transition: opacity .2s; }
.viewer.skinned.bare .vw-chrome, .viewer.skinned.bare .vw-ui { opacity: 0; pointer-events: none; }
.vw-title-patch {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15; color: #000;
}
.vw-title-patch b { font-size: 15px; font-weight: 600; }
.vw-title-patch span { font-size: 12px; color: #6c6c70; }
.vw-top { opacity: 0; transition: opacity 1.8s ease-in-out; }
.vw-top.reveal { opacity: 1; }
.vw-top:not([src]) { display: none; }

.vw-head {
  position: absolute; top: calc(var(--top) + 6px); left: 16px; right: 16px; height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  transition: opacity .2s;
}
.vw-title {
  flex-direction: column; min-width: 150px; padding: 0 26px;
  line-height: 1.15;
}
.vw-title b { font-size: 16px; font-weight: 600; }
.vw-title span { font-size: 12px; color: rgba(255, 255, 255, .85); }

.vw-strip {
  position: absolute; left: 0; right: 0; bottom: calc(var(--bottom) + 80px); height: 28px;
  overflow: hidden; transition: opacity .2s;
}
.vw-strip-in { display: flex; gap: 1.5px; height: 100%; transition: transform .25s ease; }
.vw-thumb {
  flex: none; width: 21px; height: 28px; background: #222 center / cover no-repeat;
  transition: width .25s, margin .25s;
}
.vw-thumb.on { width: 30px; margin: 0 9px; }

.vw-bar {
  position: absolute; left: 28px; right: 28px; bottom: calc(var(--bottom) + 10px);
  height: 50px;
  display: flex; justify-content: space-between; align-items: center;
  transition: opacity .2s;
}
.vw-bar .gl-round { width: 50px; height: 50px; }
.vw-tools { height: 50px; border-radius: 25px; padding: 0 12px; gap: 6px; }
.vw-tools button { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; }
.vw-bar svg { width: 24px; height: 24px; }
.vw-heart.on { color: #ff2d55; }
.vw-heart.on path { fill: currentColor; }
.viewer.bare .vw-head, .viewer.bare .vw-bar, .viewer.bare .vw-strip { opacity: 0; pointer-events: none; }

/* ---------- Réglages ---------- */
#settings { background: #f2f2f7; }
.st-scroll {
  position: absolute; inset: 0; overflow-y: auto; touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--top) + 6px) 16px calc(var(--bottom) + 20px);
}
.st-head { display: flex; justify-content: space-between; align-items: center; margin: 6px 4px 14px; }
.st-head h1 { margin: 0; font-family: var(--font-display); font-size: 32px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.st-logo { width: 40px; height: 40px; border-radius: 10px; }
.st-close { color: var(--blue); font-size: 17px; font-weight: 600; padding: 6px; }
.st-welcome { background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; font-size: 15px; line-height: 1.4; }
.st-welcome p { margin: 8px 0 0; color: #3c3c43; }
.st-title { font-size: 13px; color: #6d6d72; text-transform: uppercase; margin: 22px 16px 7px; }
.st-group { background: #fff; border-radius: 12px; overflow: hidden; }
.st-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px; padding: 8px 16px;
  font-size: 17px; text-align: left;
  border-bottom: .5px solid #c6c6c8;
}
.st-group > .st-row:last-child { border-bottom: 0; }
.st-row i { font-style: normal; color: #8e8e93; font-size: 16px; white-space: nowrap; }
.st-row.danger { color: #ff3b30; }
.st-foot { font-size: 13px; color: #6d6d72; line-height: 1.45; margin: 7px 16px 0; }
.st-foot.list { margin-top: 0; }
.st-empty { padding: 14px 16px; color: #8e8e93; font-size: 15px; }
.st-space { height: 30px; }
.st-btn {
  display: block; width: 100%; margin-top: 10px; padding: 13px;
  border-radius: 12px; background: var(--blue); color: #fff; font-size: 17px; font-weight: 600;
}
.seg { display: inline-flex; background: #e3e3e8; border-radius: 9px; padding: 2px; flex-shrink: 0; }
.seg button { padding: 5px 10px; border-radius: 7px; font-size: 13px; font-weight: 500; }
.seg button.on { background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper button { width: 34px; height: 30px; border-radius: 8px; background: #e3e3e8; font-size: 20px; line-height: 1; }
.stepper b { min-width: 34px; text-align: center; font-weight: 500; }
input.switch {
  appearance: none; -webkit-appearance: none;
  width: 51px; height: 31px; border-radius: 16px; background: #e9e9ea;
  position: relative; flex-shrink: 0; transition: background .2s; margin: 0;
}
input.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15); transition: transform .2s;
}
input.switch:checked { background: #34c759; }
input.switch:checked::after { transform: translateX(20px); }
.st-gap { margin-top: 14px; }
.st-row.field input {
  flex: 1; min-width: 0; border: 0; background: transparent; text-align: end;
  font: inherit; font-size: 16px; color: #3c3c43; outline: none;
}
.skin-row { flex-wrap: wrap; }
.skin-row small { display: block; font-size: 13px; color: #8e8e93; }
.skin-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mini {
  padding: 5px 10px; border-radius: 8px; background: #e9e9ee;
  font-size: 13px; font-weight: 500; color: var(--blue); cursor: pointer;
}
.mini.danger { color: #ff3b30; }
.test-pair { display: grid; grid-template-columns: 1fr; width: 70%; margin: 10px auto 0; }
/* Cadre à corriger au doigt (réglages) */
.qe { position: relative; margin: 10px 16px 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.qe > canvas:first-child { width: 100%; height: auto; display: block; border-radius: 8px; }
.qe-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.qe-svg polygon { fill: rgba(52, 199, 89, .15); stroke: #34c759; stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.qe-svg polygon.miss { fill: rgba(255, 149, 0, .12); stroke: #ff9500; }
.qe-dot {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: rgba(52, 199, 89, .35); border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px #34c759, 0 1px 4px rgba(0,0,0,.4);
  pointer-events: none;
}
.qe-loupe {
  display: none; position: absolute; top: 8px; width: 120px; height: 120px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.5); pointer-events: none; z-index: 2;
}
.st-btn.ghost { background: transparent; color: var(--blue); }
.test-pair canvas, .last-out img { width: 100%; height: auto; display: block; border-radius: 8px; }
.last-out { padding: 10px; }
.last-out img { max-height: 320px; object-fit: contain; }

/* ---------- Entraînement ---------- */
#trainer { background: #000; color: #fff; }
.tr-top {
  position: absolute; top: var(--top); left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; padding: 8px 16px;
  pointer-events: none;
}
.tr-step { font-size: 15px; color: #ddd; }
.tr-done { pointer-events: auto; color: #0a84ff; font-size: 17px; font-weight: 600; }
.tr-zone { position: absolute; inset: 0; display: grid; touch-action: none; }
.tr-zone > div {
  display: grid; place-items: center;
  border: .5px solid rgba(255, 255, 255, .18);
  font-size: 34px; color: #eee;
}
.tr-zone.suits { grid-template: 1fr 1fr / 1fr 1fr; font-size: 60px; }
.tr-zone.suits > div { font-size: 64px; }
.tr-zone .red { color: #ff453a; }
.tr-zone.values { grid-template: repeat(4, 1fr) / repeat(3, 1fr); }
.tr-zone.values > div { font-size: 26px; }
.tr-zone.result { place-items: center; }
.tr-zone.result canvas { width: 55%; height: auto; border-radius: 12px; }

/* ---------- Écran de démarrage ---------- */
#splash {
  position: fixed; inset: 0; z-index: 9999; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity .5s ease;
}
#splash.out { opacity: 0; pointer-events: none; }
.sp-logo {
  position: relative; width: 150px; height: 150px; border-radius: 34px; overflow: hidden;
  opacity: 0; transform: scale(.6); filter: blur(12px);
  animation: sp-in .9s cubic-bezier(.2,.9,.25,1.15) .1s forwards, sp-glow 2.4s ease-in-out .9s infinite;
}
.sp-logo img { width: 100%; height: 100%; display: block; }
.sp-shine {
  position: absolute; inset: -20%; transform: translateX(-120%) rotate(20deg);
  background: linear-gradient(90deg, transparent 35%, rgba(255,215,120,.0) 40%, rgba(255,225,150,.75) 50%, rgba(255,215,120,0) 60%, transparent 65%);
  mix-blend-mode: screen; animation: sp-shine 1.1s ease-in-out .75s forwards;
}
.sp-name { display: flex; gap: 3px; font: 700 30px/1 -apple-system, "SF Pro Display", system-ui, sans-serif; letter-spacing: 4px;
  background: linear-gradient(180deg, #ffe7a8, #d9a441 60%, #a8741f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-name span { display: inline-block; opacity: 0; transform: translateY(18px); animation: sp-letter .5s cubic-bezier(.2,.9,.3,1.2) forwards; }
.sp-name span:nth-child(1) { animation-delay: 1.00s } .sp-name span:nth-child(2) { animation-delay: 1.06s }
.sp-name span:nth-child(3) { animation-delay: 1.12s } .sp-name span:nth-child(4) { animation-delay: 1.18s }
.sp-name span:nth-child(5) { animation-delay: 1.24s } .sp-name span:nth-child(6) { animation-delay: 1.30s }
.sp-name span:nth-child(7) { animation-delay: 1.36s } .sp-name span:nth-child(8) { animation-delay: 1.42s }
.sp-name span:nth-child(9) { animation-delay: 1.48s }
.sp-by { color: #b9b9b9; font: 400 15px/1 -apple-system, system-ui, sans-serif; letter-spacing: 1.5px;
  opacity: 0; animation: sp-fade .6s ease 1.75s forwards; }
@keyframes sp-in { to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes sp-glow { 0%,100% { box-shadow: 0 0 24px rgba(230,170,60,.25); } 50% { box-shadow: 0 0 46px rgba(240,185,70,.55); } }
@keyframes sp-shine { to { transform: translateX(120%) rotate(20deg); } }
@keyframes sp-letter { to { opacity: 1; transform: none; } }
@keyframes sp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Activation ---------- */
#activate { background: #000; color: #fff; overflow-y: auto; }
.act-box { max-width: 420px; margin: 0 auto; padding: calc(var(--top) + 30px) 24px 40px; text-align: center; }
.act-logo { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 0 30px rgba(230, 170, 60, .35); }
.act-box h1 { margin: 14px 0 8px; letter-spacing: 4px; color: #e2b24f; font-size: 26px; }
.act-box p { color: #c8c8cc; font-size: 15px; line-height: 1.45; margin: 0 0 22px; }
.act-label { color: #8e8e93; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.act-id { margin-top: 6px; padding: 12px 18px; border-radius: 12px; background: #1c1c1e; font: 600 24px ui-monospace, Menlo, monospace; letter-spacing: 2px; color: #fff; direction: ltr; }
.act-small { color: #8e8e93; font-size: 13px; margin: 6px 0 22px; }
.act-code { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #333; background: #111; color: #fff; font: 14px ui-monospace, Menlo, monospace; resize: none; direction: ltr; }
.act-go { width: 100%; margin-top: 12px; padding: 14px; border-radius: 14px; background: #e2b24f; color: #1a1405; font-weight: 700; font-size: 17px; }
.act-msg { margin-top: 14px; font-size: 15px; }
.act-msg.bad { color: #ff6b6b; }
.act-msg.good { color: #34c759; }

/* ---------- Mode d'emploi ---------- */
#tutorial { background: #000; color: #fff; }
.tu-scroll { position: absolute; inset: 0; bottom: calc(var(--bottom) + 70px); overflow-y: auto; padding: calc(var(--top) + 10px) 22px 20px; }
.tu-top { display: flex; justify-content: space-between; align-items: center; }
.tu-top img { width: 46px; height: 46px; border-radius: 11px; }
.tu-skip { color: #8e8e93; font-size: 16px; padding: 8px; }
.tu-scroll h1 { font-size: 28px; margin: 20px 0 12px; color: #e2b24f; }
.tu-body { font-size: 16px; line-height: 1.5; color: #e5e5ea; }
.tu-body b { color: #fff; }
.tu-body ol { padding-inline-start: 22px; }
.tu-body li { margin-bottom: 10px; }
.tu-phones { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0; direction: ltr; }
.tu-arrow { color: #8e8e93; font-size: 22px; }
.tu-phone { width: 110px; height: 200px; border-radius: 18px; border: 2px solid #3a3a3c; background: #0c0c0e; display: grid; overflow: hidden; }
.tu-phone span { display: grid; place-items: center; border: .5px solid #2c2c2e; font-weight: 700; color: #ddd; }
.tu-phone.q4 { grid-template: 1fr 1fr / 1fr 1fr; font-size: 26px; }
.tu-phone.g12 { grid-template: repeat(4, 1fr) / repeat(3, 1fr); font-size: 15px; }
.tu-phone .r { color: #ff453a; }
.tu-nav { position: absolute; left: 0; right: 0; bottom: calc(var(--bottom) + 12px); height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.tu-nav button { min-width: 96px; height: 44px; border-radius: 22px; font-size: 16px; font-weight: 600; }
.tu-prev { color: #ddd; background: #1c1c1e; }
.tu-prev:disabled { opacity: 0; }
.tu-next { background: #e2b24f; color: #1a1405; }
.tu-dots { display: flex; gap: 7px; }
.tu-dots i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a3c; }
.tu-dots i.on { background: #e2b24f; }

/* ---------- Téléphone à l'horizontale : l'appli reste debout ---------- */
html.rotated {
  /* L'encoche / Dynamic Island est maintenant sur le côté de l'écran = en haut de l'appli debout. */
  --top: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px), 50px);
  --bottom: 34px;
}
#fake-status {
  display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--top); padding: 0 30px 0 52px;
  align-items: center; justify-content: space-between;
  color: #fff; pointer-events: none;
  font: 600 17px/1 -apple-system, "SF Pro Text", system-ui, sans-serif;
}
html.rotated #fake-status { display: flex; }
.fs-icons { display: flex; align-items: center; gap: 6px; }
#app[data-screen="settings"] #fake-status, #app[data-screen="calibrate"] #fake-status { color: #000; }
#app[data-screen="black"] #fake-status, #app[data-screen="activate"] #fake-status { display: none; }

/* ---------- Pages de l'écran d'accueil (on les fait défiler) ---------- */
.home-pages { position: absolute; inset: 0; overflow: hidden; }
.home-strip { display: flex; height: 100%; direction: ltr; will-change: transform; }
.home-page { flex: 0 0 100%; position: relative; height: 100%; }
html[dir="rtl"] .home-grid { direction: rtl; }
.hs-label { display: flex; align-items: center; gap: 5px; }
.hs-dots { display: none; align-items: center; gap: 8px; height: 15px; padding: 0 4px; }
.hs-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.hs-dots i.on { background: #fff; }
.home-search.dots .hs-label { display: none; }
.home-search.dots .hs-dots { display: flex; }

/* Carte choisie à l'avance */
.force-pick { display: flex; align-items: center; gap: 8px; }
.force-pick select { font: inherit; font-size: 16px; padding: 4px 8px; border-radius: 8px; border: 1px solid #d1d1d6; background: #fff; color: #000; }
.force-show { min-width: 40px; text-align: center; font-size: 17px; }
.force-show.red { color: #d0021b; }

/* ---------- Ton vrai écran d'accueil (d'après tes captures) ---------- */
#home { background: #000; }
.rh-wrap { position: absolute; left: 0; top: 0; width: 923px; height: var(--rh-h, 2000px); transform-origin: 0 0; }
.rh-bg, .rh-layer { position: absolute; left: 0; top: 0; width: 923px; height: var(--rh-h, 2000px); display: block; }
.rh-strip { position: absolute; inset: 0; will-change: transform; }
.rh-page { position: absolute; top: 0; width: 923px; height: var(--rh-h, 2000px); }
.rh-icon { position: absolute; border-radius: 36px; background: transparent; transition: background .12s; }
.rh-icon:active { background: rgba(0, 0, 0, .3); }
.rh-pills { position: absolute; pointer-events: none; }
.rh-pill { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .25s; }
.rh-pill.on { opacity: 1; }
.rh-dock { position: absolute; inset: 0; pointer-events: none; }
.rh-dock .rh-icon { pointer-events: auto; }