:root{
  color-scheme: light;
  --night:#0E2433;
  --faience:#1F8A8A;
  --faience-d:#146A6C;
  --sand:#EBD3A0;
  --papyrus:#F6ECD6;
  --papyrus2:#EFE1C2;
  --card:#FFFBF1;
  --rule:#E3D0A6;
  --ink:#2B1D12;
  --ink2:#6A5540;
  --gold:#C9962E;
  --gold-l:#E8C878;
  --gres:#B0512F;
  --ok:#2F7D4F;
  --display:"Limelight","Didot",Georgia,serif;
  --ui:"Jost","Futura","Century Gothic","Trebuchet MS",sans-serif;
  --type:"Courier Prime","Courier New",monospace;
  --map:"IM Fell English",Georgia,"Times New Roman",serif;
  --hiero:"Noto Sans Egyptian Hieroglyphs","Segoe UI Historic","Apple Symbols",serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:#0B1C28;color:var(--papyrus);font-family:var(--ui);font-size:15px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- stage ---------- */
.stage{position:relative;height:100%;display:grid;place-items:center;padding:20px 16px;
  background:
    repeating-conic-gradient(from -90deg at 50% 118%, rgba(201,150,46,.09) 0deg 3deg, transparent 3deg 9deg),
    radial-gradient(ellipse 80% 70% at 50% 110%, #1F4B5F 0%, #0B1C28 70%)}
.caption{position:absolute;left:clamp(24px,5vw,80px);top:50%;transform:translateY(-50%);max-width:250px;display:grid;gap:12px;color:var(--papyrus)}
.caption .c1{font-family:var(--display);font-size:40px;line-height:1;color:var(--gold-l)}
.caption .c2{font-size:15px;line-height:1.5;color:#D9CBAE}
.caption .c3{font-family:var(--type);font-size:13px;color:#A99A7E}
@media (max-width:1000px){.caption{display:none}}

/* ---------- phone ---------- */
.phone{position:relative;height:min(860px,100%);aspect-ratio:390/844;max-width:100%;padding:11px;border-radius:60px;
  background:linear-gradient(150deg,#F3D993 0%,#B8862B 22%,#F0D38A 45%,#94661C 70%,#E2BF6E 100%);
  box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.4)}
/* Sur ordinateur, le téléphone est toujours mis en page à sa vraie taille (écran 390×844)
   puis agrandi ou réduit d'un bloc pour tenir dans la fenêtre : le contenu garde les proportions
   d'un vrai iPhone au lieu d'être tassé ou coupé. tan(atan2(a,b)) donne le rapport a/b sans unité. */
@supports (width:calc(1px * tan(atan2(1px,1px)))){
  .phone{
    --s:min(1.2, tan(atan2(calc(100vh - 40px),866px)), tan(atan2(calc(100vw - 32px),412px)));
    position:absolute;left:50%;top:50%;width:412px;height:866px;max-width:none;aspect-ratio:auto;
    transform:translate(-50%,-50%) scale(var(--s));transform-origin:center}
  @supports (height:100dvh){
    .phone{--s:min(1.2, tan(atan2(calc(100dvh - 40px),866px)), tan(atan2(calc(100vw - 32px),412px)))}
  }
}
.screen{position:relative;width:100%;height:100%;border-radius:49px;overflow:hidden;background:#10273D;isolation:isolate}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:112px;height:32px;border-radius:20px;background:#050505;z-index:70;pointer-events:none}
.wall{position:absolute;inset:0;z-index:0}
.wall svg,.wall img{display:block;width:100%;height:100%;object-fit:cover}

/* status bar */
.sbar{position:absolute;top:0;left:0;right:0;height:52px;padding:16px 26px 0 30px;display:flex;justify-content:space-between;align-items:center;z-index:75;color:#fff;font-weight:600;font-size:15px;pointer-events:none;font-variant-numeric:tabular-nums;transition:color .2s}
.sbar .r{display:flex;align-items:center;gap:6px;font-size:13px}
.sbar svg{width:18px;height:12px}
.snd{pointer-events:auto;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px 0 8px;margin-right:4px;border:0;border-radius:14px;background:var(--gold-l);color:#2B1D12;font-size:12px;font-weight:700;letter-spacing:.04em;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.snd svg{width:18px;height:15px}
.snd.off{background:rgba(255,255,255,.22);color:#fff}
.screen[data-app] .sbar{color:var(--ink)}
.screen[data-app] .snd.off{background:rgba(43,29,18,.12);color:var(--ink)}
.screen[data-app="meteo"] .sbar{color:#fff}

.layer{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;padding:58px 16px 26px}
.glass{background:rgba(9,24,36,.55);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.14);border-radius:22px}

/* ---------- entrée ---------- */
#lock{overflow:auto;gap:10px}
.lock-top{text-align:center;color:#fff;display:grid;gap:2px;justify-items:center;margin-top:4px}
.lock-top svg{width:12px;height:15px;opacity:.9}
.lock-date{font-size:15px;font-weight:500}
.lock-time{font-family:var(--display);font-size:clamp(40px,7.5vh,56px);line-height:1;color:#FBE6B6;text-shadow:0 2px 18px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.lock-tz{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.msg{position:relative;margin-top:24px;padding:11px 12px;display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;color:#fff}
.msg .env{width:38px;height:38px;border-radius:10px;overflow:hidden}
.msg .who{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#D9CBAE}
.msg h2{margin:2px 0 0;font-size:15px;font-weight:600;line-height:1.25;color:#fff}
.msg p{margin:2px 0 0;font-size:13px;line-height:1.35;color:#E7DAC0}
.peek{position:absolute;top:-42px;right:14px;width:50px;height:50px;animation:bob 2.6s ease-in-out infinite;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.unlock{padding:12px 14px;display:grid;gap:8px;color:#fff;text-align:center}
.unlock .ask{margin:0;font-size:14px;line-height:1.35;color:#F3E6C8}
.unlock input{width:100%;font:500 17px var(--ui);text-align:center;padding:9px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:rgba(246,236,214,.96);color:var(--ink)}
.unlock input::placeholder{color:#A08E70}
.unlock button{padding:11px;border:0;border-radius:14px;background:linear-gradient(180deg,#F0D48A,#C9962E);color:#2B1D12;font-weight:600;font-size:16px}
.unlock .alt{background:rgba(246,236,214,.14);color:#F3E6C8;font-weight:500;font-size:14px;padding:9px}
.err{margin:0;font-size:13px;line-height:1.35;color:#FFC7B8}
.err:empty{display:none}
.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.loading{margin-top:24px;padding:20px 16px 16px;display:grid;gap:12px;text-align:center;color:#fff}
.load-name{margin:0;font-family:var(--display);font-size:28px;color:var(--gold-l)}
.load-msg{margin:0;min-height:2.8em;font-size:14px;line-height:1.4;color:#E7DAC0}
.nile{position:relative;height:46px;margin:0 4px}
.nile-line{position:absolute;left:0;right:0;bottom:6px;height:8px;border-radius:4px;background:rgba(46,134,144,.35)}
.nile-fill{position:absolute;left:0;bottom:6px;height:8px;width:0;border-radius:4px;background:linear-gradient(90deg,#2E8690,#7CC3C0)}
.nile-boat{position:absolute;left:0;bottom:9px;width:52px;height:36px}
.loading.go .nile-fill{width:100%;transition:width 2s cubic-bezier(.4,0,.3,1)}
.loading.go .nile-boat{left:calc(100% - 52px);transition:left 2s cubic-bezier(.4,0,.3,1)}
/* révélation du prénom */
.reveal{position:relative;margin:6px 4px 8px;padding:18px 14px 14px;border-radius:8px;color:var(--ink);display:grid;gap:6px;text-align:center;
  background:repeating-linear-gradient(0deg,rgba(120,86,40,.07) 0 2px,transparent 2px 7px),repeating-linear-gradient(90deg,rgba(120,86,40,.05) 0 1px,transparent 1px 11px),linear-gradient(180deg,#F4E6C2,#E8D09A);
  box-shadow:0 18px 40px rgba(0,0,0,.45);animation:unroll .6s cubic-bezier(.2,.8,.2,1)}
@keyframes unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.reveal::before,.reveal::after{content:"";position:absolute;left:-8px;right:-8px;height:12px;border-radius:6px;background:linear-gradient(180deg,#D7AC62,#8C6424 55%,#C79A52)}
.reveal::before{top:-6px}
.reveal::after{bottom:-6px}
.reveal .k{color:var(--gres)}
.reveal .legend{margin:6px auto 4px;padding:0;list-style:none;display:grid;grid-template-columns:auto;gap:2px;text-align:left;width:fit-content;max-width:100%}
.reveal .legend li{display:grid;grid-template-columns:26px 26px 1fr;gap:6px;align-items:center;font-size:13.5px;line-height:1.3;color:#4A3A28;animation:ink .5s both}
@keyframes ink{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.reveal .legend .g{font-family:var(--hiero);font-size:20px;line-height:1.1;color:#2B1D12;text-align:center}
.reveal .legend .snd{font-family:var(--type);font-weight:700;font-size:13.5px;color:var(--gres);text-transform:uppercase}
.rv-lead{margin:2px 0 0;font-size:15.5px;color:#4A3A28}
.rv-lead b{font-weight:600;color:var(--ink)}
.rv-mean{margin:0;font-family:var(--map);font-style:italic;font-size:19.5px;line-height:1.25;color:var(--night);text-wrap:balance}
.rv-note{margin:0;font-size:13px;color:#7A6446}
.reveal button{margin-top:4px;padding:11px;border:0;border-radius:14px;background:var(--night);color:var(--gold-l);font-weight:600;font-size:16px}

/* ---------- accueil ---------- */
.home-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 6px 0;color:#fff;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.logout{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.3);background:rgba(9,24,36,.45);color:#fff;font-size:12px;text-shadow:none}
.logout svg{width:13px;height:13px}
.home-top b{font-weight:600}
.widget{margin-top:10px;padding:16px 18px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;color:#fff}
.w-k{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#E7DAC0}
.w-big{display:block;font-family:var(--display);font-size:54px;line-height:.95;color:var(--gold-l);font-variant-numeric:tabular-nums;margin-top:4px}
.w-r{display:grid;gap:3px;border-left:1px solid rgba(255,255,255,.18);padding-left:14px}
.w-line{font-size:16px;font-weight:500;line-height:1.25}
.w-when{font-size:13px;color:#D9CBAE}
.w-tick{font-family:var(--type);font-size:13px;color:#fff;font-variant-numeric:tabular-nums;margin-top:4px}
.player{margin-top:10px;padding:10px 12px;display:grid;grid-template-columns:30px 1fr 40px;gap:10px;align-items:center;color:#fff;border-radius:18px}
.eq{display:flex;align-items:flex-end;gap:3px;height:20px}
.eq i{display:block;width:4px;height:6px;border-radius:2px;background:var(--gold-l)}
.player.on .eq i{animation:eq .9s ease-in-out infinite alternate}
.player.on .eq i:nth-child(2){animation-duration:.7s}
.player.on .eq i:nth-child(3){animation-duration:1.1s}
.player.on .eq i:nth-child(4){animation-duration:.8s}
@keyframes eq{from{height:4px}to{height:20px}}
.pt b{display:block;font-size:14px;font-weight:600}
.pt small{display:block;font-size:12px;color:#D9CBAE}
.pbtn{width:40px;height:40px;border-radius:50%;border:0;background:var(--gold-l);color:var(--ink);display:grid;place-items:center;padding:0}
.pbtn svg{width:16px;height:16px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 6px;margin-top:18px;justify-items:center}
.ic{display:grid;justify-items:center;gap:6px;background:none;border:0;padding:0;color:#fff;width:100%;-webkit-tap-highlight-color:transparent}
.ic:active .sq{transform:scale(.92)}
.sq{position:relative;width:60px;height:60px;border-radius:15px;box-shadow:0 5px 12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .15s}
.sq svg{display:block;width:100%;height:100%;border-radius:15px}
.lbl{font-size:12px;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap}
.badge{position:absolute;top:-6px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#D8412E;color:#fff;font-size:13px;font-weight:600;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.spacer{flex:1}
.dock{padding:12px 8px 10px;display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;background:rgba(246,236,214,.2);border-color:rgba(255,255,255,.22);border-radius:30px}

/* toast */
.toast{position:absolute;top:56px;left:10px;right:10px;z-index:85;display:grid;grid-template-columns:38px 1fr;gap:10px;padding:12px 14px;border-radius:20px;background:rgba(246,236,214,.96);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateY(-170%);transition:transform .45s cubic-bezier(.2,1.2,.3,1)}
.toast.show{transform:none}
.toast .av{width:38px;height:38px;border-radius:10px;overflow:hidden}
.av svg{display:block;width:100%;height:100%}
.toast .av img{display:block;width:300%;max-width:none;margin:-68% 0 0 -103%}
.toast .who{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.toast p{margin:2px 0 0;font-size:14px;line-height:1.4}

/* ---------- applications ---------- */
.app{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--papyrus);color:var(--ink);opacity:0;transform:translateY(34px) scale(.97);transition:opacity .26s ease,transform .34s cubic-bezier(.2,.8,.2,1)}
.app.open{opacity:1;transform:none}
.app-head{padding:56px 20px 10px;flex:none}
.back{background:none;border:0;padding:4px 0;color:var(--faience-d);font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.back svg{width:10px;height:16px}
.app-head h1{margin:6px 0 2px;font-family:var(--display);font-weight:400;font-size:31px;line-height:1.05;color:var(--night);text-wrap:balance}
.app-head .sub{margin:0;font-size:14px;color:var(--ink2);line-height:1.4}
.app-body{flex:1;overflow:auto;padding:6px 20px 48px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lead{margin:4px 0 0;font-size:15px;line-height:1.55}
.k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
h2.sec{margin:26px 0 8px;font-family:var(--display);font-weight:400;font-size:22px;color:var(--night);text-wrap:balance}
.hbar{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:190px;height:26px;border:0;background:none;padding:0;z-index:80}
.hbar::after{content:"";position:absolute;left:28px;right:28px;bottom:8px;height:5px;border-radius:3px;background:rgba(255,255,255,.9)}
.screen[data-app] .hbar::after{background:rgba(43,29,18,.8)}
.screen[data-app="meteo"] .hbar::after{background:rgba(255,255,255,.9)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-size:12px;padding:3px 9px;border-radius:12px;background:var(--papyrus2);color:var(--ink)}
.note{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--ink2)}

/* vols */
.tix{position:relative;margin-top:14px;padding:14px 16px 16px;border-radius:18px;background:var(--card);border:1px solid #E6D5B0;box-shadow:0 6px 16px rgba(43,29,18,.07)}
.tix-top{display:flex;justify-content:space-between;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.tix-top b{color:var(--gres);font-weight:600}
.tix-route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:12px 0 6px}
.tix-route b{display:block;font-family:var(--display);font-weight:400;font-size:34px;line-height:1;color:var(--night)}
.tix-route i{display:block;font-style:normal;font-weight:600;font-size:17px;color:var(--gres);margin-top:4px}
.tix-route .r{text-align:right}
.tix-ap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:-2px 0 10px}
.tix-ap small{font-size:12px;line-height:1.3;color:var(--ink2)}
.tix-ap .r{text-align:right}
.path{position:relative;height:18px}
.path::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed #CDB685}
.path svg{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%) rotate(90deg);background:var(--card);padding:1px}
.tix-meta{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin:0;padding-top:10px;border-top:1px dashed #D9C59B}
.tix-meta dt{font-size:12px;color:var(--ink2)}
.tix-meta dd{margin:2px 0 0;font-size:14px;font-weight:500;line-height:1.3}
.stamp{display:inline-block;margin-top:12px;padding:3px 9px;border:2px solid currentColor;border-radius:6px;font-family:var(--type);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-3deg)}
.stamp.ok{color:var(--ok)}
.stamp.own{color:#9A6A1E}
.with{margin:10px 0 0}
.pnr{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--papyrus2);display:grid;gap:2px}
.pnr b{font-family:var(--type);font-weight:700;font-size:22px;letter-spacing:.14em;color:var(--night)}
.pnr small{font-size:12.5px;color:var(--ink2)}
.pnr em{font-style:normal;font-size:14px;color:var(--ink2)}
.bags{margin-top:12px}
.bags ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.bag{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:8px 12px 8px 8px;border-radius:12px;border:1px solid #E6D5B0;background:#fff}
.bag svg{width:44px;height:44px;padding:6px;border-radius:10px;background:#E4F1EE;color:var(--faience-d)}
.bag-hold svg{background:#F5E6CF;color:var(--gres)}
.bag b{display:block;font-size:15px;font-weight:600;color:var(--night)}
.bag small{display:block;font-size:12.5px;line-height:1.35;color:var(--ink2)}
.bag-tip{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--ink2)}

/* carnet */
.rythme{margin-top:14px;padding:16px;border-radius:18px;background:var(--night);color:var(--papyrus);display:grid;gap:8px}
.rythme h2{margin:0;font-family:var(--display);font-weight:400;font-size:23px;line-height:1.1;color:var(--gold-l)}
.rythme p{margin:0;font-size:14px;line-height:1.55;color:#E7DAC0}
.rythme ul{margin:4px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rythme li{padding:10px;border-radius:12px;background:rgba(246,236,214,.08);font-size:13px;line-height:1.4;color:#E7DAC0}
.rythme li b{display:block;color:#fff;font-weight:600;font-size:14px;margin-bottom:2px}
.rythme li.wide{grid-column:1 / -1}
.map-wrap{margin:16px -4px 0;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(43,29,18,.18)}
.map{display:block;width:100%;height:auto}
.m-t{font-family:var(--map);font-size:13.5px;fill:#3B2A18}
.m-s{font-family:var(--map);font-style:italic;font-size:12px;fill:#5B4428}
.m-big{font-family:var(--map);font-size:13px;letter-spacing:.32em;fill:#8C6C3E}
.m-red{font-family:var(--map);font-style:italic;font-size:12.5px;fill:#8E2F22}
.m-blue{font-family:var(--map);font-style:italic;font-size:12.5px;fill:#2F6D78}
.m-n{font-family:var(--ui);font-weight:600;font-size:12px;fill:#F6ECD6}
.m-cairo{font-family:var(--map);font-size:19px;fill:#3B2A18}
.day{padding:18px 0;border-top:1px solid var(--rule)}
.day:first-of-type{border-top:0}
.day-h{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:end}
.day-n{font-family:var(--display);font-size:30px;line-height:1;color:var(--gres);text-align:center}
.day-n small{display:block;margin-top:4px;font-family:var(--ui);font-size:12px;color:var(--ink2);letter-spacing:.08em;text-transform:uppercase}
.day .date{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.day h3{margin:2px 0 0;font-size:17px;font-weight:600;line-height:1.3;text-wrap:balance}
.art{margin-top:12px;border-radius:14px;overflow:hidden;box-shadow:0 4px 12px rgba(43,29,18,.12)}
.art svg{display:block;width:100%;height:auto}
.tag{display:inline-block;margin-left:4px;padding:0 7px;border-radius:8px;font-size:11px;font-weight:500;line-height:1.6;background:#DDEDE8;color:var(--faience-d);white-space:nowrap;vertical-align:1px}
/* Code couleur du programme : visite (turquoise), en route (or), soirée (nuit) */
.legend{margin-top:4px;display:flex;flex-wrap:wrap;gap:8px}
.lg{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:20px;font-size:13px;font-weight:600}
.lg svg{width:17px;height:17px;flex:none}
.lg-visite{background:#DDEDE8;color:var(--faience-d)}
.lg-trajet{background:#F3E2B8;color:#7A5413}
.lg-soir{background:var(--night);color:var(--gold-l)}
.steps{position:relative;margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.steps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:var(--rule)}
.st{position:relative;display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:start}
.st-i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--papyrus)}
.st-i svg{width:18px;height:18px}
.st-visite .st-i{background:#DDEDE8;color:var(--faience-d)}
.st-trajet .st-i{background:#F3E2B8;color:#7A5413}
.st-soir .st-i{background:var(--night);color:var(--gold-l)}
.st>div{padding:8px 12px;border-radius:12px;background:var(--card);border:1px solid #E6D5B0;border-left:4px solid var(--faience)}
.st-trajet>div{border-left-color:var(--gold)}
.st-soir>div{background:#16344A;border-color:var(--night);color:#D9CBAE}
.st-k{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faience-d)}
.st-trajet .st-k{color:#7A5413}
.st-soir .st-k{color:var(--gold-l)}
.st b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.st-soir b{color:#F3D99A}
.st.big b{font-family:var(--display);font-weight:400;font-size:19px}
.st small{display:block;margin-top:1px;font-size:13px;line-height:1.4;color:var(--ink2)}
.st-soir small{color:#D9CBAE}
.st.surprise>div{background:var(--card);border:1.5px dashed var(--gold);color:inherit}
.st.surprise b{color:var(--gres)}
.st.surprise small{color:var(--ink2)}

/* banque */
.bank-card{margin-top:12px;padding:18px;border-radius:20px;color:var(--papyrus);
  background:repeating-radial-gradient(circle at 110% -10%, rgba(232,200,120,.13) 0 1px, transparent 1px 7px),linear-gradient(140deg,#16384F,#0B1C28);
  box-shadow:0 10px 24px rgba(14,36,51,.3)}
.bank-card .k{color:#D9CBAE}
.amount{display:block;margin:6px 0 4px;font-family:var(--display);font-size:44px;line-height:1;color:var(--gold-l);font-variant-numeric:tabular-nums}
.bank-card p{margin:8px 0 0;font-size:14px;line-height:1.5;color:#E7DAC0}
.bank-card .split{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(232,200,120,.13);border:1px solid rgba(232,200,120,.3);color:#F3E6C8}
.lines{margin-top:12px;border-radius:16px;background:var(--card);border:1px solid #E6D5B0;overflow:hidden}
.line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;border-top:1px solid var(--papyrus2);font-size:14px;line-height:1.35}
.line:first-child{border-top:0}
.line .v{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.line small{display:block;font-size:12px;color:var(--ink2)}
.line.tot{background:#F7EDD4;font-weight:600}
.revolut{display:grid;gap:2px;margin-top:4px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,#1F8A8A,#146A6C);color:#fff;text-decoration:none;font-weight:600;font-size:17px;box-shadow:0 6px 14px rgba(20,106,108,.3)}
.revolut small{font-family:var(--type);font-weight:400;font-size:13px;opacity:.9}
.pay{margin-top:12px;padding:14px;border-radius:16px;background:var(--card);border:1px solid #E6D5B0;display:grid;gap:6px}
.pay .ttl{font-weight:600;font-size:15px}
.pay .val{font-family:var(--type);font-size:17px;letter-spacing:.02em;word-break:break-word;-webkit-user-select:text;user-select:text}
.copy{justify-self:start;margin-top:4px;padding:6px 14px;border-radius:10px;border:1.5px solid var(--faience);background:none;color:var(--faience-d);font-size:13px;font-weight:600}
.copy.done{background:var(--faience);color:#fff}
.onsite{margin-top:22px;padding:16px;border-radius:18px;background:#F3E2B8;display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start}
.onsite svg{width:56px;height:56px}
.onsite h3{margin:2px 0 4px;font-size:16px;font-weight:600}
.onsite p{margin:0;font-size:14px;line-height:1.5;color:#4A3A28}

/* valise */
.prog{margin-top:14px;display:grid;gap:6px}
.prog-bar{height:8px;border-radius:4px;background:var(--papyrus2);overflow:hidden}
.prog-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--faience),#48A7A0);transition:width .3s}
.prog span{font-size:13px;color:var(--ink2)}
.vsec{margin-top:22px}
.vsec h2{margin:0 0 6px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gres);font-weight:600}
.chk{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--papyrus2);cursor:pointer}
.chk:first-of-type{border-top:0}
.chk input{position:absolute;opacity:0;pointer-events:none}
.box{width:22px;height:22px;border-radius:7px;border:2px solid #C9B283;background:var(--card);display:grid;place-items:center;margin-top:1px;transition:background .15s,border-color .15s}
.box svg{width:13px;height:13px;opacity:0}
.chk input:checked + .box{background:var(--faience);border-color:var(--faience)}
.chk input:checked + .box svg{opacity:1}
.chk input:focus-visible + .box{outline:2px solid var(--gold);outline-offset:2px}
.chk b{display:block;font-weight:500;font-size:15px;line-height:1.35}
.chk small{display:block;font-size:13px;line-height:1.45;color:var(--ink2);margin-top:2px}
.chk mark{background:linear-gradient(transparent 12%,#F6D365 12%,#F6D365 88%,transparent 88%);color:var(--ink);padding:0 3px;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.chk input:checked ~ span b{text-decoration:line-through;text-decoration-color:rgba(43,29,18,.4)}
.good{margin-top:8px;padding:10px 12px;border-radius:12px;background:#DDEDE8;color:var(--faience-d);font-size:14px;line-height:1.45}
.good b{font-weight:600}
.books{margin-top:14px;padding:14px;border-radius:16px;background:var(--card);border:1px solid #E6D5B0}
.books-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.book{position:relative;min-height:138px;padding:12px 9px 10px 14px;border-radius:3px 8px 8px 3px;color:#F6ECD6;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 5px 0 0 rgba(0,0,0,.22),0 4px 10px rgba(43,29,18,.2)}
.book::after{content:"";position:absolute;left:10px;right:8px;top:8px;bottom:8px;border:1px solid rgba(232,200,120,.45);border-radius:2px;pointer-events:none}
.book b{font-family:var(--display);font-weight:400;font-size:14px;line-height:1.15}
.book span{font-size:12px;line-height:1.3;opacity:.9}
.soiree{margin-top:26px;padding:18px 16px 16px;border-radius:20px;color:var(--papyrus);
  background:repeating-linear-gradient(90deg,rgba(232,200,120,.06) 0 1px,transparent 1px 14px),linear-gradient(170deg,#132F43,#0B1C28)}
.soiree .k{color:var(--gold-l)}
.soiree h2{margin:6px 0 8px;font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1;color:#F3D99A;text-wrap:balance}
.soiree > p{margin:0;font-size:14px;line-height:1.6;color:#E7DAC0}
.deco{height:14px;margin:14px 0 4px;background:
  linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent) center/100% 1px no-repeat,
  radial-gradient(circle,var(--gold) 3px,transparent 3.5px) center/14px 14px no-repeat}
.look{margin-top:14px;display:grid;grid-template-columns:80px 1fr;gap:12px;padding:12px;border-radius:14px;background:rgba(246,236,214,.05);border:1px solid rgba(232,200,120,.3)}
.look svg{width:80px;height:150px}
.look h3{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:19px;color:var(--gold-l)}
.look ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.look li{font-size:13px;line-height:1.45;color:#EFE3CB}
.swatches{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.sw{display:grid;justify-items:center;gap:4px;font-size:12px;color:#D9CBAE}
.sw i{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}
.soiree .avoid{margin:12px 0 0;font-size:13px;line-height:1.5;color:#E9B7A8}

/* météo */
.app.meteo{background:linear-gradient(180deg,#245F86 0%,#4E8BA9 38%,#C8A27A 78%,#E8B677 100%);color:#fff}
.app.meteo .back{color:#fff}
.now{text-align:center;margin-top:4px}
.now .city{font-size:22px;font-weight:500}
.now .t{font-family:var(--display);font-size:88px;line-height:1;margin-top:4px}
.now .d{font-size:16px}
.now .hl{font-size:15px;opacity:.9}
.wcard{margin-top:14px;padding:12px 14px;border-radius:18px;background:rgba(10,36,54,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18)}
.wcard .k{color:#E8F0F2;display:block;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.2)}
.wrow{display:grid;grid-template-columns:1.2fr 24px 30px 1fr 30px;align-items:center;gap:8px;padding:10px 0;border-top:1px solid rgba(255,255,255,.14);font-size:14px}
.wrow:first-of-type{border-top:0}
.wrow .dd{display:block;font-weight:600}
.wrow .pl{display:block;font-size:12px;opacity:.9;line-height:1.3}
.wrow svg{width:24px;height:24px}
.wrow .lo{opacity:.8;text-align:right;font-variant-numeric:tabular-nums}
.wrow .hi{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.range{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.22)}
.range i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#9ED6C9,#F6D365,#F19A4C)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.tile{padding:12px 14px;border-radius:18px;background:rgba(10,36,54,.28);border:1px solid rgba(255,255,255,.18)}
.tile .k{color:#E8F0F2}
.tile b{display:block;font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1;margin-top:6px}
.tile small{display:block;font-size:12px;line-height:1.4;opacity:.9;margin-top:4px}
.mnote{margin:14px 2px 0;font-size:12px;line-height:1.5;opacity:.95}

/* menu */
.menu-card{margin-top:10px;padding:22px 18px 18px;border-radius:6px;background:#FFFBF1;text-align:center;position:relative;
  box-shadow:0 8px 20px rgba(43,29,18,.12),inset 0 0 0 6px #FFFBF1,inset 0 0 0 7px var(--gold),inset 0 0 0 10px #FFFBF1,inset 0 0 0 11px rgba(201,150,46,.5)}
.menu-card .k{color:var(--gres)}
.menu-card h2{margin:6px 0 4px;font-family:var(--display);font-weight:400;font-size:28px;color:var(--night)}
.menu-card p{margin:0 auto;max-width:28em;font-size:14px;line-height:1.5;color:var(--ink2)}
.courses{margin:16px 6px 4px;padding:0;list-style:none;display:grid;gap:10px;text-align:left}
.courses li{display:flex;align-items:baseline;gap:8px;font-size:15px}
.courses li::after{content:"";flex:1;order:1;border-bottom:1.5px dotted #C9B283;transform:translateY(-4px)}
.courses li span{order:2;font-family:var(--type);font-size:13px;color:var(--gres)}
.bar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.drink{padding:14px 8px 12px;border-radius:16px;background:var(--night);color:var(--papyrus);display:grid;justify-items:center;gap:6px;text-align:center}
.drink svg{width:48px;height:48px}
.drink b{font-weight:600;font-size:14px}
.drink small{font-size:12px;color:#D9CBAE;line-height:1.3}

/* cabine */
.plaque{margin-top:12px;padding:16px;border-radius:14px;text-align:center;color:#3B2608;
  background:linear-gradient(160deg,#F2D68E 0%,#C9962E 45%,#F0D48A 70%,#A8781F 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),inset 0 0 0 6px rgba(120,80,20,.25),0 8px 18px rgba(43,29,18,.2)}
.plaque .n{display:block;font-family:var(--display);font-size:40px;line-height:1}
.plaque .t{display:block;margin-top:6px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.view{margin-top:14px;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(43,29,18,.15)}
.view svg{display:block;width:100%;height:auto}
.perks{margin-top:12px;display:grid;gap:8px}
.perk{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid #E6D5B0}
.perk svg{width:40px;height:40px}
.perk b{display:block;font-size:15px;font-weight:600}
.perk span{display:block;font-size:13px;line-height:1.45;color:var(--ink2)}
.mates{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 12px;margin-top:14px}
.mates .xc{width:calc(50% - 6px)}


/* équipage : cartes d'explorateur */
.xc{container-type:inline-size;min-width:0;display:flex}
.xcard{position:relative;display:flex;flex-direction:column;width:100%;margin:0;padding:4cqw 4cqw 3.6cqw;border:1px solid #D9BE84;border-radius:5.5cqw;text-align:left;color:var(--ink);font:inherit;cursor:pointer;
  background:radial-gradient(130% 70% at 50% 0%,rgba(255,255,255,.6),transparent 60%),repeating-linear-gradient(0deg,rgba(120,86,40,.045) 0 1px,transparent 1px 5px),linear-gradient(170deg,#FBF3DF,#EDD9AC);
  box-shadow:0 8px 18px rgba(43,29,18,.16);-webkit-tap-highlight-color:transparent;transition:transform .18s}
div.xcard{cursor:default}
button.xcard:active{transform:scale(.97)}
.xcard::before{content:"";position:absolute;inset:1.8cqw;border:1px solid rgba(176,125,40,.5);border-radius:4cqw;pointer-events:none}
.xc-top{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 1.4cqw 3cqw;font:600 max(12px,5cqw)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gres)}
.xc-top i{font-style:normal;font-family:var(--type);font-weight:700;letter-spacing:.02em;color:var(--ink2)}
.xc-ph{position:relative;aspect-ratio:3/4;border-radius:3.2cqw;overflow:hidden;background:linear-gradient(180deg,#9FD0E0,#F6E1B0);box-shadow:0 0 0 1px rgba(122,90,48,.45)}
.xc-ph > img,.xc-ph > .ill{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.xc-ph .hat{position:absolute;overflow:visible;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(25,12,0,.28))}
.xc-ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);pointer-events:none}
.xc-soon{position:absolute;left:50%;bottom:5cqw;transform:translateX(-50%);padding:1cqw 3.4cqw;border-radius:6cqw;background:rgba(14,36,51,.72);color:#F6ECD6;font-size:max(12px,4.4cqw);white-space:nowrap}
.xc-id{position:relative;flex:1;min-height:19cqw;padding:3.6cqw 25cqw 0 1.4cqw}
.xc-med{position:absolute;right:.8cqw;top:-10.5cqw;width:21cqw;height:21cqw;border-radius:50%;display:grid;place-items:center;color:var(--gold-l);background:radial-gradient(circle at 35% 30%,#23577A,#0E2433 72%);box-shadow:0 0 0 1.3cqw #FBF3DF,0 0 0 1.9cqw var(--gold),0 5px 10px rgba(14,36,51,.35)}
.xc-med svg{width:60%;height:60%}
.xc-name{display:block;font-family:var(--display);font-weight:400;font-size:max(15px,9.6cqw);line-height:1.05;color:var(--night)}
.xc-role{display:block;margin-top:1.4cqw;font-family:var(--map);font-style:italic;font-size:max(12px,5.8cqw);line-height:1.2;color:var(--gres);text-wrap:balance}
.xc-foot{position:relative;display:flex;justify-content:center;align-items:center;min-height:calc(max(13px,6.4cqw) * 1.3 + 2.6cqw);margin-top:3.2cqw;padding:2.6cqw 1cqw 0;border-top:1px dashed rgba(122,90,48,.4);font-family:var(--type);font-size:max(12px,4.6cqw);letter-spacing:.04em;color:var(--ink2);white-space:nowrap;overflow:hidden}
.xc-gl{font-family:var(--hiero);font-size:max(12px,5.6cqw);line-height:1.3;color:var(--ink)}
.xc.me .xcard{border-color:var(--gold)}
.xc.me .xcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,248,222,.5) 50%,transparent 62%) no-repeat;background-size:260% 100%;animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,60%{background-position:120% 0}100%{background-position:-20% 0}}
.crew-k{display:block;margin-top:18px;text-align:center}
.crew-me{width:min(250px,76%);margin:10px auto 0}
.crew{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-top:14px}
.xmodal{position:absolute;inset:0;z-index:88;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 24px 30px;background:rgba(8,18,26,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadein .2s ease}
.xmodal .xc{width:min(300px,100%);animation:popin .32s cubic-bezier(.2,1.2,.3,1)}
/* Marges automatiques plutôt que « center » : si le contenu dépasse, il défile sans couper le haut de la carte */
.xmodal.has-mean{justify-content:flex-start;overflow-y:auto;gap:14px}
.xmodal.has-mean .xc{width:min(230px,70%);flex:none;margin-top:auto}
.xmodal.has-mean .xm-close{margin-bottom:auto}
.xm-mean{flex:none;width:min(330px,100%);padding:14px 16px 16px;border:1px solid #D9BE84;border-radius:16px;background:#FBF3E2;text-align:center;animation:popin .32s cubic-bezier(.2,1.2,.3,1)}
.xm-mean .rv-lead{font-size:16.5px}
.xm-mean .rv-mean{margin-top:6px;font-size:19.5px;line-height:1.3}
.xm-close{flex:none;padding:11px 26px;border:0;border-radius:14px;background:var(--gold-l);color:var(--ink);font-weight:600;font-size:15px}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes popin{from{opacity:0;transform:scale(.9) translateY(12px)}to{opacity:1;transform:none}}

/* corbeille */
.trash-head{display:flex;justify-content:space-between;align-items:center}
.trash-head button{background:none;border:0;color:#B0412F;font-weight:600;font-size:15px;padding:4px 0}
.file{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;width:100%;margin-top:12px;padding:12px;border-radius:16px;background:var(--card);border:1px solid #E6D5B0;text-align:left}
.file svg{width:52px;height:44px}
.file b{display:block;font-size:16px;font-weight:600}
.file small{display:block;font-size:12px;color:var(--ink2);line-height:1.4}
.file .chev{color:var(--ink2);font-size:20px}
.trash-empty{margin-top:28px;text-align:center;font-size:13px;color:var(--ink2);line-height:1.5}
.dlg{position:absolute;inset:0;z-index:90;display:grid;place-items:center;padding:28px;background:rgba(8,18,26,.45)}
.dlg-box{width:100%;max-width:290px;border-radius:20px;overflow:hidden;background:rgba(246,236,214,.98);color:var(--ink);text-align:center;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.dlg-box .in{padding:20px 18px 16px;display:grid;gap:8px;justify-items:center}
.dlg-box svg{width:44px;height:44px}
.dlg-box h3{margin:0;font-size:17px;font-weight:600;line-height:1.3}
.dlg-box p{margin:0;font-size:14px;line-height:1.45;color:var(--ink2)}
.dlg-btns{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #DCCBA6}
.dlg-btns button{padding:13px;border:0;background:none;font-size:15px;color:var(--faience-d);font-weight:500}
.dlg-btns button + button{border-left:1px solid #DCCBA6;font-weight:600}

@media (max-width:520px){
  .stage{padding:0;background:#10273D}
  .phone{position:relative;left:auto;top:auto;transform:none;height:100%;width:100%;aspect-ratio:auto;padding:0;border-radius:0;background:none;box-shadow:none}
  .screen{border-radius:0}
  .island{display:none}
  .sbar{height:36px;padding:6px 14px 0 18px;font-size:13px}
  .layer{padding-top:42px}
  .app-head{padding-top:42px}
  .toast{top:42px}
}
/* ---------- poste du nil (messagerie) ---------- */
.poste{background:#EFE1C2 radial-gradient(120% 70% at 50% 0%,#F8EED8 0,rgba(248,238,216,0) 70%)}
.poste .app-head{padding-bottom:8px;border-bottom:1px dashed #C9AE78}
.poste .app-body{padding:4px 16px 18px;background-image:repeating-linear-gradient(0deg,rgba(122,90,48,.035) 0 1px,transparent 1px 26px)}
.tg-day{display:flex;align-items:center;gap:10px;margin:20px 4px 6px;font-family:var(--map);font-style:italic;font-size:14px;color:#7A5A30}
.tg-day::before,.tg-day::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#B89458,transparent)}
.tg-day span::before,.tg-day span::after{content:" \2766 ";font-style:normal;color:var(--gold)}
.tg{position:relative;margin:12px 34px 0 0;padding:10px 14px 12px;background:#FBF3DF;border:1px solid #D9C194;border-radius:3px;box-shadow:0 1px 0 #fff inset,0 5px 12px rgba(43,29,18,.10);transform:rotate(-.4deg)}
.tg::before{content:"";position:absolute;inset:4px;border:1px solid rgba(176,81,47,.22);border-radius:2px;pointer-events:none}
.tg.me{margin:12px 0 0 34px;background:#F2F0DC;border-color:#BFCBB0;transform:rotate(.4deg)}
.tg.me::before{border-color:rgba(31,138,138,.25)}
.tg-h{display:flex;align-items:center;gap:10px;padding-bottom:7px;margin-bottom:7px;border-bottom:1px dashed #D2B98A}
.tg-av{flex:none;width:36px;height:44px;border-radius:50%;overflow:hidden;border:2px solid #C9962E;box-shadow:0 0 0 2px #FBF3DF,0 0 0 3px #B89458;background:#D8C49A}
.tg-av img{width:100%;height:100%;object-fit:cover;filter:sepia(.55) contrast(1.05) saturate(.85)}
.tg-who{flex:1;min-width:0;line-height:1.15}
.tg-who b{display:block;font-family:var(--display);font-weight:400;font-size:16px;line-height:1.15;color:var(--night);text-wrap:balance}
.tg-who small{display:block;font-family:var(--map);font-style:italic;font-size:12.5px;color:#7A5A30;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-pm{flex:none;display:grid;place-items:center;width:50px;height:50px;margin:-4px -4px -4px 0;border:1.5px solid rgba(142,47,34,.55);border-radius:50%;color:rgba(142,47,34,.8);font-family:var(--type);font-weight:700;font-size:11px;line-height:1.05;text-align:center;letter-spacing:.04em;transform:rotate(-14deg)}
.tg.me .tg-pm{border-color:rgba(20,106,108,.55);color:rgba(20,106,108,.85)}
.tg-pm i{display:block;font-style:normal;font-weight:400;font-size:8px;letter-spacing:.12em}
.tg-b{margin:0;font-family:var(--type);font-size:15px;line-height:1.45;color:#2B1D12;white-space:pre-wrap;overflow-wrap:anywhere}
.tg-b .stop{font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--gres)}
.tg.sending{opacity:.6}
.tg-empty{margin:36px 10px 0;text-align:center;font-family:var(--map);font-style:italic;font-size:17px;line-height:1.4;color:#7A5A30}
.tg-empty svg{display:block;width:78px;height:78px;margin:0 auto 12px;opacity:.85}
.tg-err{margin:10px 4px 0;font-family:var(--type);font-size:13px;color:#8E2F22;text-align:center}
.tg-form{flex:none;display:flex;align-items:flex-end;gap:10px;padding:10px 14px 34px;background:#E6D3A8;border-top:1px solid #C9AE78;box-shadow:0 -6px 14px rgba(43,29,18,.08)}
.tg-paper{flex:1;display:block;padding:7px 12px 6px;background:#FBF3DF;border:1px solid #CDB27E;border-radius:4px;box-shadow:inset 0 1px 3px rgba(43,29,18,.1)}
.tg-paper:focus-within{border-color:var(--faience);box-shadow:0 0 0 2px rgba(31,138,138,.2)}
.tg-k{display:block;font-family:var(--type);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8C6C3E}
.tg-k b{color:var(--gres)}
.tg-paper textarea{display:block;width:100%;max-height:120px;margin:2px 0 0;padding:0;border:0;outline:0;resize:none;background:none;font-family:var(--type);font-size:16px;line-height:1.35;color:var(--ink)}
.tg-paper textarea::placeholder{color:#A8916A}
.tg-send{flex:none;position:relative;width:62px;height:62px;border:0;border-radius:50%;padding:0;background:radial-gradient(circle at 35% 30%,#C24A36,#8E2F22 60%,#6A1F16);color:#F3D99A;font-family:var(--display);font-size:11px;letter-spacing:.02em;box-shadow:0 3px 8px rgba(60,16,10,.45),inset 0 -3px 6px rgba(0,0,0,.25),inset 0 2px 3px rgba(255,255,255,.2);transition:transform .12s;-webkit-tap-highlight-color:transparent}
.tg-send::before{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(243,217,154,.55);border-radius:50%}
.tg-send:active{transform:scale(.92) rotate(-8deg)}
.tg-send:disabled{filter:grayscale(.6);opacity:.7}

@media (max-height:720px){
  .lock-time{font-size:40px}
  .msg{margin-top:22px}
  .unlock .ask{font-size:13px}
  .rv-mean{font-size:17px}
  .reveal .legend li{font-size:13px}
  .widget{padding:12px 16px}
  .w-big{font-size:44px}
  .grid{margin-top:12px}
}
@media (max-height:600px){
  .lock-date{font-size:13px}
  .lock-time{font-size:34px}
  .lock-tz{display:none}
  .msg{margin-top:16px}
  .peek{display:none}
  .reveal{padding:14px 12px 12px}
  .reveal .legend{margin:2px auto}
  .rv-mean{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- installation sur iPhone ---------- */
@media (display-mode:standalone){html,body{background:#10273D}}
.a2hs{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:200;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 12px 12px 14px;border-radius:18px;background:rgba(246,236,214,.97);color:var(--ink);box-shadow:0 12px 34px rgba(0,0,0,.45);font-size:14px;line-height:1.4;animation:a2hs-in .4s cubic-bezier(.2,.8,.2,1)}
.a2hs img{width:44px;height:44px;border-radius:10px}
.a2hs b{font-weight:600}
.a2hs svg{width:14px;height:17px;vertical-align:-3px;margin:0 1px}
.a2hs button{align-self:start;width:28px;height:28px;border:0;border-radius:14px;background:rgba(43,29,18,.1);color:var(--ink);font-size:16px;line-height:1}
@keyframes a2hs-in{from{transform:translateY(30px);opacity:0}}