[hidden]{display:none!important}

/* Concept : la nuit sur l'île. Chaque profil est un fanal (lanterne) suspendu à un fil au-dessus de la crête ; on l'allume ou on le laisse filer. Look nuit assumé (une seule apparence). */
:root{
  --nuit:#120f24; --nuit2:#1c1836; --nuit3:#27214a; --brume:#3a3366;
  --flamme:#ffb347; --braise:#ff7a45; --lune:#f3efe6; --pale:#b9b2d6; --lagon:#5fd3c4; --alerte:#ff5d73;
  --f-titre:"Gloock", Georgia, "Times New Roman", serif;
  --f-texte:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--nuit);color:var(--lune);font-family:var(--f-texte);font-size:16px;line-height:1.45;margin:0;overflow:hidden}
#ciel{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;max-width:560px;margin:0 auto}
header.haut{display:flex;align-items:center;justify-content:space-between;padding-block:12px 6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-titre);font-size:26px;letter-spacing:.5px}
.logo svg{width:28px;height:34px}
.pastille{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--nuit3);color:var(--flamme);border:1px solid var(--brume)}
main{flex:1;overflow-y:auto;padding-block:4px 110px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));-webkit-overflow-scrolling:touch}
h1,h2,h3{font-family:var(--f-titre);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:30px;line-height:1.1}
h2{font-size:23px}
h3{font-size:19px}
.sous{color:var(--pale);font-size:14px}
.pile{display:flex;flex-direction:column;gap:14px}
.ligne{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--flamme);outline-offset:2px}
.btn{padding:13px 18px;border-radius:14px;font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px}
.btn-feu{background:linear-gradient(160deg,var(--flamme),var(--braise));color:#2a1405;box-shadow:0 6px 24px -6px rgba(255,150,60,.6)}
.btn-nuit{background:var(--nuit3);border:1px solid var(--brume);color:var(--lune)}
.btn-lagon{background:var(--lagon);color:#08221f}
.btn-alerte{background:var(--alerte);color:#2a0710}
.btn-plein{width:100%}
.petit{font-size:13px;padding:8px 12px;min-height:36px;border-radius:10px}
.carte{background:color-mix(in srgb,var(--nuit2) 88%,transparent);border:1px solid var(--brume);border-radius:20px;padding:16px;backdrop-filter:blur(6px)}
label{font-weight:600;font-size:14px;display:block;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;color:var(--lune);background:var(--nuit);border:1px solid var(--brume);border-radius:12px;padding:12px;min-height:46px}
textarea{min-height:80px;resize:vertical}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{padding:7px 12px;border-radius:99px;background:var(--nuit3);border:1px solid var(--brume);font-size:14px;font-weight:600}
.puce[aria-pressed="true"]{background:var(--flamme);color:#2a1405;border-color:var(--flamme)}
.puce.commune{border-color:var(--flamme);color:var(--flamme)}
.intention{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:8px}
.i-amour{background:#ff7a4533;color:#ffab8a}.i-amitie{background:#5fd3c433;color:var(--lagon)}.i-leger{background:#b9b2d633;color:#d8d2f5}
.verif{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--lagon)}
/* Barre du bas */
nav.bas{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;padding:8px max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background:linear-gradient(transparent,var(--nuit) 35%)}
nav.bas .onglets{display:flex;gap:4px;background:var(--nuit2);border:1px solid var(--brume);border-radius:22px;padding:6px;width:100%;max-width:520px}
nav.bas button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:16px;font-size:12px;font-weight:700;color:var(--pale);position:relative}
nav.bas button svg{width:24px;height:24px}
nav.bas button[aria-current="page"]{background:var(--nuit3);color:var(--flamme)}
.bulle{position:absolute;top:4px;right:calc(50% - 22px);min-width:18px;height:18px;border-radius:9px;background:var(--braise);color:#2a1405;font-size:11px;display:grid;place-items:center;padding:0 4px}
/* Lovpéi */
.fil{display:flex;justify-content:center}
.fanal-zone{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:6px}
.corde{width:2px;height:28px;background:linear-gradient(var(--brume),var(--pale))}
.fanal{width:min(100%,420px);transform-origin:50% -28px;animation:balance 5s ease-in-out infinite}
@keyframes balance{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.chapeau{width:42%;height:16px;margin:0 auto;background:var(--brume);border-radius:10px 10px 4px 4px}
.lanterne{position:relative;border-radius:46px 46px 30px 30px;padding:14px;background:radial-gradient(120% 90% at 50% 30%,#ffcf8a22,transparent 70%),var(--nuit2);border:2px solid #ffb34766;box-shadow:0 0 60px -10px #ffb34755, inset 0 0 40px #ffb3471a}
.lanterne.allume{box-shadow:0 0 120px 10px #ffb347aa, inset 0 0 60px #ffb34755;border-color:var(--flamme)}
.portrait{position:relative;aspect-ratio:4/4.4;max-width:100%;border-radius:36px 36px 18px 18px;overflow:hidden;display:grid;place-items:center}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .initiale{font-family:var(--f-titre);font-size:110px;color:#fff;opacity:.92;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.portrait .ex{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;background:rgba(0,0,0,.45);padding:4px 8px;border-radius:8px;letter-spacing:.05em}
.portrait .nom{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(10,8,22,.85))}
.portrait .nom h2{font-size:30px}
.reponse{background:var(--nuit);border-radius:16px;padding:12px 14px;border:1px solid var(--brume)}
.reponse small{display:block;color:var(--flamme);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.actions-fanal{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:14px}
.filer{animation:filer .7s ease-in forwards}
@keyframes filer{to{transform:translateY(60px) rotate(8deg);opacity:0}}
.monter{animation:monter .9s ease-in forwards}
@keyframes monter{to{transform:translateY(-260px) scale(.6);opacity:0}}
.compteur{display:flex;gap:6px;justify-content:center;margin:4px 0 0}
.compteur i{width:12px;height:16px;border-radius:6px 6px 4px 4px;background:var(--brume)}
.compteur i.reste{background:var(--flamme);box-shadow:0 0 10px var(--flamme)}
/* Chat */
.liste-match{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.mini{width:62px;height:62px;border-radius:22px 22px 14px 14px;display:grid;place-items:center;font-family:var(--f-titre);font-size:28px;flex:0 0 auto;overflow:hidden;border:2px solid var(--flamme)}
.mini img{width:100%;height:100%;object-fit:cover}
.conv{display:flex;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--nuit2);border:1px solid var(--brume);width:100%;text-align:left}
.conv .txt{flex:1;min-width:0}
.conv .txt p{margin:0;color:var(--pale);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fil-msg{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
.msg{max-width:80%;padding:10px 13px;border-radius:18px;font-size:15px;overflow-wrap:anywhere}
.msg.moi{align-self:flex-end;background:linear-gradient(160deg,var(--flamme),var(--braise));color:#2a1405;border-bottom-right-radius:6px}
.msg.lui{align-self:flex-start;background:var(--nuit3);border-bottom-left-radius:6px}
.alerte-msg{align-self:stretch;background:#ff5d7322;border:1px solid var(--alerte);color:#ffc2cb;border-radius:14px;padding:10px 12px;font-size:14px}
.saisie{position:sticky;bottom:0;display:flex;gap:8px;padding-top:8px;background:var(--nuit)}
.coach{border:1px dashed var(--lagon);border-radius:16px;padding:12px;background:#5fd3c411}
.coach b{color:var(--lagon)}
.idee{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:12px;background:var(--nuit);border:1px solid var(--brume);margin-top:8px;font-size:14px}
/* Ange gardien */
.ange{background:radial-gradient(100% 120% at 100% 0,#5fd3c433,transparent 60%),var(--nuit2)}
.minuteur{font-family:var(--f-titre);font-size:44px;font-variant-numeric:tabular-nums;color:var(--lagon)}
.num{font-variant-numeric:tabular-nums;font-weight:800;font-size:20px;user-select:all}
/* Feuille / modale */
.voile{position:fixed;inset:0;z-index:20;background:rgba(6,4,14,.7);display:flex;align-items:flex-end;justify-content:center}
.feuille{width:100%;max-width:560px;max-height:88%;overflow-y:auto;background:var(--nuit2);border:1px solid var(--brume);border-radius:26px 26px 0 0;padding:20px max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.match-ecran{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#ffb34755,var(--nuit) 70%);text-align:center;padding:24px}
.deux{display:flex;gap:-10px;justify-content:center;margin-bottom:18px}
.deux .mini{width:96px;height:110px;font-size:44px;box-shadow:0 0 50px var(--flamme)}
.deux .mini:first-child{transform:rotate(-8deg) translateX(10px)}
.deux .mini:last-child{transform:rotate(8deg) translateX(-10px)}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:40;background:var(--lune);color:var(--nuit);padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;max-width:90%}
.etapes{display:flex;gap:6px}
.etapes i{flex:1;height:4px;border-radius:2px;background:var(--brume)}
.etapes i.fait{background:var(--flamme)}
.plus{background:linear-gradient(135deg,#ffb34722,#5fd3c422);border:1px solid var(--flamme)}
.verrou{opacity:.55}
.vide{text-align:center;padding:30px 10px}
.vide svg{width:70px;height:84px;margin-bottom:10px}
details{border-top:1px solid var(--brume);padding-top:10px}
summary{cursor:pointer;font-weight:700}
.danger{color:var(--alerte)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Lovpéi 1.0 : ajouts */
.charge{display:grid;place-items:center;padding:60px 0;color:var(--pale)}
.flamme-charge{width:28px;height:36px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 70%,var(--flamme),var(--braise));animation:vacille 1.1s ease-in-out infinite;box-shadow:0 0 30px var(--flamme)}
@keyframes vacille{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(.9) rotate(3deg)}}
.code{letter-spacing:.5em;font-size:26px;text-align:center;font-variant-numeric:tabular-nums}
.photos-edit{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.photos-edit .case{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--nuit);border:1px dashed var(--brume);display:grid;place-items:center;color:var(--pale);font-size:26px}
.photos-edit .case img{width:100%;height:100%;object-fit:cover}
.photos-edit .case button.x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:13px;background:rgba(0,0,0,.6);color:#fff;font-size:14px}
.galerie{display:flex;gap:6px;justify-content:center;position:absolute;top:10px;left:0;right:0}
.galerie i{width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.galerie i.on{background:#fff}
.portrait.tap{cursor:pointer}
.horsligne{background:#ff5d7322;border:1px solid var(--alerte);border-radius:12px;padding:8px 12px;font-size:14px;color:#ffc2cb}
.pied{text-align:center;font-size:12px;color:var(--pale);padding:10px 0}
.pied a{color:var(--pale)}
a{color:var(--flamme)}
.heure{font-size:11px;opacity:.7;display:block;margin-top:2px}