:root{
  --bg:#12141F; --line:#2C3045; --champ:#E7D6B0; --pink:#E9B8C0;
  --t1:#EDE6DA; --t2:#C9CBDA; --t3:#A9ABBE; --title:#F4EEE2;
  --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom);
  --serif:'Playfair Display',Georgia,serif; --sans:'Jost',-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--t1);font-family:var(--sans);font-weight:300;overscroll-behavior:none}
[hidden]{display:none!important}
button,select{font:inherit;color:inherit}
em{font-family:var(--serif);font-style:italic}

#facade{position:relative;max-width:560px;margin:0 auto;min-height:100%;
  padding:calc(var(--safe-t) + 12px) 28px calc(var(--safe-b) + 96px)}
.top{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px}
.logo{display:flex;align-items:center;gap:10px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;padding:6px 8px 6px 0}
.logo span{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--champ);font-weight:400}
.date{font-size:12px;color:var(--t3);letter-spacing:.04em;text-transform:capitalize}

.label{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--champ);font-weight:400;margin:0}
.label.pink{color:var(--pink)}
.h1{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.12;color:var(--title);margin:10px 0 24px}
.h1 em{color:var(--champ)}

/* Aujourd'hui */
.home{text-align:center;padding-top:20px}
.home .name{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1.05;color:var(--title);margin:14px 0 6px}
.home .dates{font-size:13px;color:var(--t3);letter-spacing:.06em}
.home .const{margin:26px auto 22px;opacity:.95}
.poem{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;color:var(--t1);margin:0 auto 30px;max-width:30ch}
.lines{border-top:1px solid var(--line);text-align:left}
.lines .ln{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.lines .ln .label{flex:0 0 78px;padding-top:3px}
.lines .ln p{margin:0;flex:1;font-size:15px;line-height:1.55;color:var(--t2)}

/* Page d'un signe */
.back{background:none;border:0;color:var(--t3);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:14px 0 6px}
.sp{text-align:center}
.sp .ringc{width:176px;height:176px;margin:18px auto 20px;display:flex;align-items:center;justify-content:center}
.sp .name{font-family:var(--serif);font-weight:400;font-size:46px;color:var(--title);margin:0 0 8px}
.sp .meta{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink)}
.info3{display:flex;margin:28px 0 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.info3>div{flex:1;padding:16px 4px}
.info3>div+div{border-left:1px solid var(--line)}
.info3 .label{font-size:10px;margin-bottom:8px;color:var(--t3)}
.info3 b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--title)}
.sp .body{font-size:15px;line-height:1.7;color:var(--t2);text-align:left}
.sp .body p{margin:0 0 14px}
.sp .body p.poem{text-align:center;margin:0 auto 20px;font-size:17px;max-width:none}
.setmine{margin:14px 0 0;background:none;border:1px solid var(--line);border-radius:99px;color:var(--champ);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:11px 20px}

/* Les signes */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:6px}
.cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 4px 14px;text-align:center;background:none;border-top:0;border-left:0;cursor:pointer}
.cell svg{display:block;margin:0 auto 8px}
.cell .nm{font-family:var(--serif);font-size:15px;color:var(--title)}
.cell.on .nm{color:var(--champ)}
.cell .dt{display:block;font-size:10px;color:var(--t3);margin-top:3px}

/* Compatibilité */
.pair{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.pair .plus{font-family:var(--serif);font-style:italic;color:var(--pink);font-size:20px}
select{flex:1;min-width:0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 2px;
  font-family:var(--serif);font-size:18px;color:var(--title);appearance:none;-webkit-appearance:none}
select option{color:#000}
.score{text-align:center;margin:34px 0 8px}
.score b{font-family:var(--serif);font-weight:400;font-size:64px;color:var(--champ)}
.score small{font-size:20px;color:var(--champ)}
.cx{text-align:center;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--t1);margin:0 auto 26px;max-width:30ch}
.bars{border-top:1px solid var(--line)}
.bars .b{padding:16px 0;border-bottom:1px solid var(--line)}
.bars .row{display:flex;justify-content:space-between;margin-bottom:10px}
.bars .row span:last-child{font-size:13px;color:var(--t2)}
.bars .tr{height:1px;background:var(--line);position:relative}
.bars .tr i{position:absolute;left:0;top:-1px;height:3px;background:var(--champ)}

/* Barre d'onglets */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:0;background:var(--bg);border-top:1px solid var(--line);
  padding:0 8px calc(var(--safe-b) + 2px)}
.tabbar button{flex:1;max-width:190px;background:none;border:0;padding:16px 4px 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t3);position:relative;font-weight:400}
.tabbar button.on{color:var(--champ)}
.tabbar button.on::after{content:'';position:absolute;left:22%;right:22%;bottom:8px;height:1px;background:var(--champ)}

/* PIN */
#pin{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;align-items:center;justify-content:center}
.pin-box{width:min(300px,84vw);text-align:center}
.pin-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px;color:var(--champ);margin:14px 0 30px}
.dots{display:flex;gap:20px;justify-content:center;margin-bottom:38px;height:12px}
.dots i{width:11px;height:11px;border-radius:50%;border:1px solid var(--pink)}
.dots i.f{background:var(--pink)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 18px}
.pad button{aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:none;font-family:var(--serif);font-size:26px;color:var(--title);touch-action:manipulation}
.pad button:active{background:#2C3045}
.pad .ghost{border:0;pointer-events:none}
.pad .del{font-family:var(--sans);font-size:18px;color:var(--t3)}


/* Installation */
.install{text-align:center;margin-top:34px}
.install[hidden]{display:none}
.install button{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--champ);font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:8px 2px;font-weight:400}
.imodal{position:fixed;inset:0;z-index:40;background:rgba(18,20,31,.88);display:flex;align-items:center;justify-content:center;padding:24px}
.ibox{width:min(340px,100%);background:var(--bg);border:1px solid var(--line);padding:28px 24px 20px;text-align:center}
.ititle{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;color:var(--champ);margin:0 0 18px}
.ibody{font-size:15px;line-height:1.6;color:var(--t2);text-align:left}
.ibody ol{margin:0;padding:0;list-style:none;counter-reset:s}
.ibody li{counter-increment:s;padding:12px 0;border-top:1px solid var(--line);display:flex;gap:14px}
.ibody li:last-child{border-bottom:1px solid var(--line)}
.ibody li::before{content:counter(s);font-family:var(--serif);color:var(--pink);font-size:18px;line-height:1.3}
.ibody p{margin:0;text-align:center}
.iclose{margin-top:20px;background:none;border:1px solid var(--line);border-radius:99px;color:var(--champ);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:11px 24px}