/* BeHundred, waitlist : écrans mobiles (/i/, /v/, /retrouver/, /stop/, écran « Regarde tes mails »).
   Valeurs reprises des maquettes 390 × 844 (_maquette-waitlist/ecrans/), en flux normal
   pour tenir de 320 à 430 px ; sur ordinateur, colonne centrée de 480 px.
   Toutes les classes commencent par wl- (la feuille est aussi chargée par l'accueil). */

@font-face{font-family:Inter;src:url(/assets/fonts/inter-latin-wght.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@property --wlp{syntax:'<percentage>';inherits:false;initial-value:100%}

html.wl-html{background:#000000;color-scheme:dark;-webkit-text-size-adjust:100%}
body.wl-body{margin:0;background:#000000}
.wl-page{position:relative;box-sizing:border-box;width:100%;max-width:480px;min-height:100vh;min-height:100svh;margin:0 auto;padding:env(safe-area-inset-top) 0 calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Inter,'Segoe UI',sans-serif;color:#FFFFFF;font-size:18px;line-height:25.2px;font-weight:500;letter-spacing:0.17px;-webkit-font-smoothing:antialiased;text-align:left}
.wl-page a{color:#FFFFFF}
.wl-page [hidden]{display:none !important}
.wl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Panneau dégradé, lueur jaune et anneau lumineux ---------- */
.wl-panel{position:relative;isolation:isolate;margin:8px 8px 0;padding-bottom:16px;border-radius:24px;background:linear-gradient(180deg,#0B0B0C 0%,#0B0A05 42%,#2B2205 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box}
.wl-glow{position:absolute;z-index:-2;left:50%;bottom:var(--gb,-30%);width:var(--gw,150%);height:var(--gh,70%);transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(252,209,32,var(--ga,0.45)),rgba(252,209,32,var(--gc,0.14)) 50%,rgba(252,209,32,0) 100%);filter:blur(var(--gf,32px));pointer-events:none}
.wl-halo{position:absolute;z-index:-1;left:50%;top:50%;width:var(--s,292px);height:var(--s,292px);transform:translate(-50%,-50%);pointer-events:none}
.wl-halo-a,.wl-halo-b,.wl-halo-a>i,.wl-halo-b>i,.wl-halo-c{position:absolute;border-radius:50%}
.wl-halo-a{inset:-6%;filter:blur(var(--fa,20px));opacity:var(--oa,0.3)}
.wl-halo-b{inset:0;filter:blur(var(--fb,8px));opacity:var(--ob,0.5)}
.wl-halo-a>i,.wl-halo-b>i{inset:0}
.wl-halo-a>i{background:conic-gradient(from 160deg,rgba(252,209,32,0),#F5A800 18%,#FCD120 38%,#FFF1B3 52%,#FCD120 66%,#F5A800 84%,rgba(252,209,32,0));-webkit-mask:radial-gradient(farthest-side,transparent 70%,#000 82%,#000 92%,transparent 100%);mask:radial-gradient(farthest-side,transparent 70%,#000 82%,#000 92%,transparent 100%)}
.wl-halo-b>i{background:conic-gradient(from 160deg,rgba(252,209,32,0),#F5A800 20%,#FCD120 40%,#FFE98A 52%,#FCD120 64%,#F5A800 82%,rgba(252,209,32,0));-webkit-mask:radial-gradient(farthest-side,transparent 80%,#000 87%,#000 93%,transparent 99%);mask:radial-gradient(farthest-side,transparent 80%,#000 87%,#000 93%,transparent 99%)}
.wl-halo-c{inset:8%;background:radial-gradient(closest-side,rgba(11,10,5,0.92),rgba(11,10,5,0.4) 70%,rgba(11,10,5,0) 100%)}
/* Écran 1 : anneau plus intense, centré sur le bas du panneau */
.wl-halo--deep{--oa:0.42;--ob:0.7}
.wl-halo--deep .wl-halo-c{background:radial-gradient(closest-side,rgba(4,4,2,0.97),rgba(4,4,2,0.72) 70%,rgba(4,4,2,0) 100%)}
/* Écran 8 : anneau fermé */
.wl-halo--full{--fa:22px}
.wl-halo--full .wl-halo-b>i{background:conic-gradient(from 160deg,#FCD120,#F5A800 20%,#FCD120 40%,#FFE98A 52%,#FCD120 64%,#F5A800 82%,#FCD120)}

/* ---------- Effet verre (maquettes : fonds rgba(28,28,30,0.6) et boutons #1C1C1E) ---------- */
.wl-glass{position:relative;background:linear-gradient(135deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.03) 40%,rgba(255,255,255,0.02) 60%,rgba(255,255,255,0.05) 100%);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),inset 0 -1px 0 rgba(255,255,255,0.05),0 8px 24px rgba(0,0,0,0.3)}
.wl-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,0.38),rgba(255,255,255,0.07) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,0.05) 70%,rgba(255,255,255,0.22));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ---------- Barre de navigation ---------- */
.wl-navwrap{position:relative;z-index:3;padding:8px 8px 0}
.wl-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border-radius:16px;background:rgba(28,28,30,0.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.wl-brand{display:flex;align-items:center;gap:10px;padding:6px 8px;text-decoration:none;color:#FFFFFF;flex-shrink:0}
.wl-brand img{display:block;width:24px;height:24px;border-radius:22%;box-shadow:0 0 0 1px rgba(255,255,255,0.16)}
.wl-brand span{font-size:18px;font-weight:600;letter-spacing:-0.01em;line-height:1}
.wl-brand b{font-weight:600;color:#FCD120}
.wl-chip{min-width:0;overflow:hidden;text-overflow:ellipsis;padding:6px 12px;border-radius:128px;background:rgba(255,255,255,0.06);font-size:13px;line-height:18px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,0.7);font-variant-numeric:tabular-nums;white-space:nowrap}
.wl-chip--yellow{background:rgba(252,209,32,0.12);color:#FCD120}
.wl-chip--open{background:rgba(252,209,32,0.14);color:#FCD120;font-weight:600}

/* ---------- Titres ---------- */
.wl-head{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--pt,36px) 16px 0}
.wl-h1{margin:0;font-size:clamp(36px,11.8vw,46px);line-height:1;letter-spacing:-0.03em;font-weight:600;color:#FFFFFF;overflow-wrap:anywhere}
.wl-h1:focus{outline:none}
.wl-lead{margin:14px 0 0;max-width:320px;font-size:18px;line-height:1.3;font-weight:400;letter-spacing:0;color:rgba(255,255,255,0.6)}
.wl-lead strong{color:#FFFFFF;font-weight:500;overflow-wrap:anywhere}
.wl-note{position:relative;z-index:2;margin:18px 24px 0;text-align:center;font-size:14px;line-height:19px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,0.6)}

/* ---------- Compteur de places (écran 1) ---------- */
.wl-ring1{position:absolute;z-index:-1;left:50%;bottom:-172px;width:340px;height:340px;transform:translateX(-50%)}
.wl-ring1 .wl-halo{z-index:auto;width:100%;height:100%}
.wl-counter{position:absolute;left:0;right:0;top:70px;display:flex;flex-direction:column;align-items:center;text-align:center}
.wl-counter-n{font-size:52px;line-height:1;font-weight:600;letter-spacing:-0.04em;font-variant-numeric:tabular-nums;color:#FFFFFF}
.wl-counter-l{margin-top:6px;font-size:15px;line-height:20px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,0.6)}
[data-wl-counter]:not(.is-ready){visibility:hidden}
/* Liste complète (accueil et écran 1) : pas de nombre, juste le libellé */
.is-full [data-wl-remaining]{display:none !important}
.is-full [data-wl-remaining-label]{margin-top:16px !important;font-size:22px !important;line-height:1.1 !important;font-weight:600 !important;letter-spacing:-0.02em !important;color:#FFFFFF !important}

/* ---------- Avatars ---------- */
.wl-av{position:relative;flex-shrink:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(#FCD120 0 var(--wlp),#2C2C2E var(--wlp) 100%)}
.wl-av>span{position:absolute;inset:7%;border-radius:50%;background:#2C2C2E;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;font-weight:600;letter-spacing:0;color:#FFFFFF}
.wl-av--empty{background:#000000;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center}
.wl-av--glow{box-shadow:0 0 24px rgba(252,209,32,0.45)}
.wl-av--fill{transition:--wlp 900ms cubic-bezier(0,0,0.2,1)}
.wl-bigav-wrap{position:relative;isolation:isolate;align-self:center;margin-top:var(--mt,58px)}
.wl-bigav{position:relative;width:120px;height:120px;border-radius:50%;background:#FCD120;box-shadow:0 10px 30px rgba(190,190,190,0.16)}
.wl-bigav>span{position:absolute;inset:3%;border-radius:50%;background:#000000;display:flex;align-items:center;justify-content:center;font-size:44px;line-height:1;font-weight:600;letter-spacing:-0.02em;color:#FFFFFF}

/* ---------- Pastilles ---------- */
.wl-tag{position:relative;z-index:3;align-self:center;display:flex;align-items:center;gap:8px;margin-top:20px;padding:10px 16px;border-radius:128px;transform:rotate(2deg);white-space:nowrap;font-size:14px;line-height:18px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,0.85)}
.wl-tag strong{font-weight:600;color:#FCD120;font-variant-numeric:tabular-nums}
.wl-pills{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-start;gap:12px;margin-top:20px;letter-spacing:0}
.wl-pill{display:flex;flex-direction:column;align-items:center;padding:12px 20px;border-radius:24px}
.wl-pill small{font-size:13px;line-height:18px;font-weight:400;color:rgba(255,255,255,0.6)}
.wl-pill strong{font-size:30px;line-height:1.1;font-weight:600;letter-spacing:-0.03em;color:#FFFFFF;font-variant-numeric:tabular-nums;white-space:nowrap}
.wl-pill strong.wl-y{color:#FCD120}
.wl-rot-l{transform:rotate(-4deg)}
.wl-rot-r{transform:rotate(4deg);margin-top:10px}

/* ---------- Bandeau « vient de te rejoindre » (écran 5) ---------- */
.wl-toast{position:relative;z-index:3;margin:20px 16px 0;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:24px;transform:rotate(-3deg);letter-spacing:0}
.wl-toast img{display:block;width:40px;height:40px;border-radius:22%;flex-shrink:0}
.wl-toast-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wl-toast-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.wl-toast-title{font-size:15px;line-height:20px;font-weight:600;color:#FFFFFF;min-width:0;overflow-wrap:anywhere}
.wl-toast-time{font-size:13px;line-height:20px;font-weight:400;color:rgba(255,255,255,0.5);flex-shrink:0}
.wl-toast-text{font-size:15px;line-height:20px;font-weight:400;color:rgba(255,255,255,0.85)}

/* ---------- Carte « Tes amis » (écrans 4 et 5) ---------- */
.wl-friends{position:relative;z-index:2;margin:12px 8px 0;padding:22px 20px 20px;border-radius:24px;background-color:#1C1C1E;background-image:linear-gradient(rgba(28,28,30,0) 40%,rgba(255,255,255,0.03) 90%,rgba(255,255,255,0.06));letter-spacing:0}
.wl-friends.wl-has{background-image:linear-gradient(rgba(28,28,30,0) 40%,rgba(252,209,32,0.10) 90%,rgba(252,209,32,0.18))}
.wl-friends-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wl-friends h2{margin:0;font-size:28px;line-height:1;letter-spacing:-0.03em;font-weight:600}
.wl-friends-count{font-size:15px;line-height:20px;font-weight:500;color:rgba(255,255,255,0.5);white-space:nowrap}
.wl-has .wl-friends-count{color:#FCD120}
.wl-slots{display:flex;justify-content:space-between;gap:4px;margin-top:20px}
.wl-slot{flex:0 1 70px;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:8px}
.wl-slot-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:16px;font-weight:500;color:rgba(255,255,255,0.6)}
.wl-slot-name--friend{font-weight:600;color:#FFFFFF}
.wl-slot-name--empty{font-weight:400;color:rgba(255,255,255,0.35)}
.wl-friends p{margin:18px 0 0;font-size:16px;line-height:1.35;font-weight:400;color:rgba(255,255,255,0.6)}

/* ---------- Écran 6 : amis au complet ---------- */
.wl-stack-wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:51px;letter-spacing:0}
.wl-stack{display:flex;align-items:center}
.wl-stack .wl-av{width:68px;height:68px;box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.wl-stack .wl-av>span{inset:3%;font-size:24px}
.wl-stack .wl-av+.wl-av{margin-left:-14px}
.wl-stack .wl-av--more{background:#2C2C2E;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:#FFFFFF;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.12),0 10px 30px rgba(0,0,0,0.5)}
.wl-stack-names{padding:0 16px;text-align:center;font-size:15px;line-height:20px;font-weight:500;color:rgba(255,255,255,0.75)}
.wl-pills6{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-top:34px;padding:0 16px;letter-spacing:0}
.wl-pills6 .wl-pill{padding:12px 18px}
.wl-pills6 .wl-pill strong{font-size:26px}
.wl-pills6 .wl-rot-l{transform:rotate(-5deg)}
.wl-pills6 .wl-rot-r{transform:rotate(5deg);margin-top:10px;gap:10px;padding:14px 18px}
.wl-checks-row{display:flex;align-items:center;gap:10px}
.wl-checks{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:999px;background:#0A0A0A}
.wl-checks span{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#FCD120}
.wl-checks svg{display:block;width:10px;height:10px}
.wl-checks-n{font-size:18px;line-height:1;font-weight:600}
.wl-checks-l{font-size:14px;line-height:18px;font-weight:600;white-space:nowrap}

/* ---------- Écran 8 : jour J ---------- */
.wl-panel--full{flex:1;margin-bottom:-6px;padding-bottom:8px}
.wl-appicon-wrap{position:relative;isolation:isolate;align-self:center;margin-top:152px}
.wl-appicon{display:block;width:104px;height:104px;border-radius:22%;box-shadow:0 0 0 1.5px rgba(255,255,255,0.16),0 24px 48px rgba(0,0,0,0.5)}
.wl-open-actions{position:relative;z-index:2;margin-top:auto;padding:32px 16px 0;display:flex;flex-direction:column;align-items:center;gap:10px;letter-spacing:0}
.wl-open-actions small{font-size:13px;line-height:18px;font-weight:400;color:rgba(255,255,255,0.5)}

/* ---------- Boutons ---------- */
.wl-btn{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:100%;height:52px;padding:0 16px;border:0;border-radius:128px;font-family:inherit;font-size:17px;line-height:1.2;font-weight:600;letter-spacing:0;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .6s cubic-bezier(0.19,1,0.22,1),box-shadow .3s,opacity .2s,color .2s}
.wl-btn--y{background:#FCD120;color:#000000 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),inset 0 -1px 3px rgba(140,95,0,0.2),0 8px 20px rgba(252,209,32,0.16)}
.wl-btn>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-btn--y img{display:block;height:20px;width:auto;margin-top:-2px}
.wl-btn--glass{height:46px;font-size:15px;font-weight:500;color:#FFFFFF;background:#1C1C1E}
.wl-btn--resend{height:52px;font-size:17px;font-weight:500;color:#FFFFFF}
.wl-btn--resend:disabled{color:rgba(255,255,255,0.45)}
.wl-btn--resend span{font-variant-numeric:tabular-nums}
.wl-btn--ghost{height:46px;background:transparent;color:rgba(255,255,255,0.75) !important;font-size:15px;font-weight:500}
.wl-btn--ghost svg{flex-shrink:0}
.wl-btn--quiet{height:48px;background:transparent;color:rgba(255,255,255,0.6) !important;font-size:16px;font-weight:500}
.wl-btn:hover:not(:disabled){transform:scale(1.025);box-shadow:inset 0 0 .25rem #ffffff80}
.wl-btn--ghost:hover,.wl-btn--quiet:hover{box-shadow:none !important}
.wl-btn:disabled{cursor:default}
.wl-btn--y:disabled{opacity:.5}
.wl-btn:focus-visible,.wl-brand:focus-visible,.wl-consent input:focus-visible{outline:2px solid #FCD120;outline-offset:3px}
.wl-share{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wl-actions{position:relative;z-index:2;margin-top:auto;padding:24px 16px 0;display:flex;flex-direction:column;gap:8px;letter-spacing:0}
.wl-actions-note{margin:0 8px 8px;text-align:center;font-size:14px;line-height:19px;font-weight:400;color:rgba(255,255,255,0.6)}

/* ---------- Formulaires ---------- */
.wl-form{position:relative;z-index:2;margin:16px 8px 0;padding:16px 16px 14px;border-radius:24px;background-color:#1C1C1E;background-image:linear-gradient(rgba(28,28,30,0) 40%,rgba(252,209,32,0.06) 90%,rgba(252,209,32,0.12));display:flex;flex-direction:column;gap:8px;box-sizing:border-box;letter-spacing:0}
.wl-form .wl-btn--y{margin-top:4px}
.wl-input{width:100%;height:52px;box-sizing:border-box;padding:0 18px;border:0;border-radius:16px;background:#000000;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);color:#FFFFFF;font-family:inherit;font-size:17px;font-weight:500;letter-spacing:0;outline:none;-webkit-appearance:none;appearance:none}
.wl-tel{display:flex;align-items:center;height:52px;border-radius:16px;background:#000000;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08)}
.wl-tel>span{padding:0 12px 0 18px;font-size:17px;color:rgba(255,255,255,0.6);border-right:1px solid rgba(255,255,255,0.08)}
.wl-tel input{flex:1;min-width:0;height:52px;box-sizing:border-box;padding:0 14px;border:0;border-radius:0 16px 16px 0;background:transparent;color:#FFFFFF;font-family:inherit;font-size:17px;font-weight:500;letter-spacing:0;outline:none;-webkit-appearance:none;appearance:none}
.wl-input::placeholder,.wl-tel input::placeholder{color:rgba(255,255,255,0.4)}
.wl-input:focus,.wl-tel:focus-within{box-shadow:inset 0 0 0 1px rgba(252,209,32,0.55)}
.wl-input[aria-invalid="true"],.wl-tel:has(input[aria-invalid="true"]){box-shadow:inset 0 0 0 1px rgba(255,69,58,0.7)}
.wl-tel.wl-glass{background:linear-gradient(135deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.03) 40%,rgba(255,255,255,0.02) 60%,rgba(255,255,255,0.05) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),inset 0 -1px 0 rgba(255,255,255,0.05),0 8px 24px rgba(0,0,0,0.3)}
.wl-tel.wl-glass:focus-within{box-shadow:inset 0 0 0 1px rgba(252,209,32,0.55),0 8px 24px rgba(0,0,0,0.3)}
.wl-tel.wl-glass:has(input[aria-invalid="true"]){box-shadow:inset 0 0 0 1px rgba(255,69,58,0.7),0 8px 24px rgba(0,0,0,0.3)}
.wl-tel--glass>span,.wl-tel--glass input{position:relative;z-index:1}
.wl-consent{display:flex;align-items:flex-start;gap:10px;margin:2px 4px 0;text-align:left;font-size:12px;line-height:16px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,0.55);cursor:pointer}
.wl-consent input{flex-shrink:0;width:18px;height:18px;margin:0;accent-color:#FCD120;cursor:pointer}
.wl-consent a{color:rgba(255,255,255,0.75)}
.wl-consent.wl-attn{color:rgba(255,255,255,0.85)}
.wl-ts{display:flex;justify-content:center;max-width:100%;overflow:hidden}
.wl-ts:empty{display:none}

/* ---------- Messages (ton de la maquette 7) ---------- */
.wl-msg{display:flex;gap:12px;align-items:flex-start;text-align:left;font-size:15px;line-height:21px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,0.85)}
.wl-msg[hidden]{display:none}
.wl-msg>i{flex-shrink:0;margin-top:1px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08)}
.wl-msg--error>i{background:rgba(255,69,58,0.15)}
[data-wl-form] .wl-msg{margin:4px 4px 0;font-size:14px;line-height:19px}
[data-wl-form] [type=submit]:disabled{opacity:.5;cursor:default;transform:none}
[data-wl-form] [type=submit][aria-busy="true"]{opacity:.7}
.wl-actions .wl-msg{margin:0 8px 4px}
.wl-card{position:relative;z-index:2;margin:auto 8px 0;padding:20px;border-radius:24px;background:#1C1C1E;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;letter-spacing:0}
.wl-card h2{margin:0 0 4px;font-size:15px;line-height:20px;font-weight:600;color:rgba(255,255,255,0.5)}

/* ---------- Aperçu du mail (écran 3) ---------- */
.wl-mail{position:relative;z-index:2;margin:32px 20px 0;transform:rotate(-2deg);padding:16px;border-radius:24px;display:flex;flex-direction:column;gap:10px;letter-spacing:0}
.wl-mail-top{display:flex;align-items:center;gap:10px}
.wl-mail-top img{display:block;width:32px;height:32px;border-radius:22%}
.wl-mail-from{flex:1;font-size:15px;line-height:20px;font-weight:600}
.wl-mail-time{font-size:13px;line-height:20px;font-weight:400;color:rgba(255,255,255,0.5)}
.wl-mail-body{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;border-radius:16px;background:#000000;text-align:left}
.wl-mail-body strong{font-size:15px;line-height:20px;font-weight:600;color:#FFFFFF}
.wl-mail-body span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:20px;font-weight:400;color:rgba(255,255,255,0.55)}

/* ---------- Feuille « agenda » (page perso) ---------- */
.wl-sheet-wrap{position:fixed;inset:0;z-index:110;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0.5)}
.wl-sheet{position:relative;box-sizing:border-box;width:100%;max-width:480px;padding:10px 16px calc(16px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:rgba(28,28,30,0.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 -12px 40px rgba(0,0,0,0.45);font-family:-apple-system,BlinkMacSystemFont,Inter,'Segoe UI',sans-serif;color:#FFFFFF;letter-spacing:0;-webkit-font-smoothing:antialiased;touch-action:none}
.wl-sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px 1px 0;background:linear-gradient(135deg,rgba(255,255,255,0.38),rgba(255,255,255,0.07) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,0.05) 70%,rgba(255,255,255,0.22));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.wl-sheet-grab{width:36px;height:5px;margin:0 auto 20px;border-radius:3px;background:rgba(255,255,255,0.25)}
.wl-sheet h2{margin:0;text-align:center;font-size:28px;line-height:1.05;letter-spacing:-0.03em;font-weight:600}
.wl-sheet h2:focus{outline:none}
.wl-sheet p{margin:10px 8px 22px;text-align:center;font-size:16px;line-height:1.35;font-weight:400;color:rgba(255,255,255,0.6)}
.wl-sheet .wl-btn+.wl-btn{margin-top:8px}
.wl-sheet .wl-btn--glass{height:52px;font-size:17px}
@keyframes wlSheetUp{from{transform:translateY(100%)}to{transform:none}}
.wl-sheet-in{animation:wlSheetUp 380ms cubic-bezier(0.22,0.61,0.36,1) both}
.wl-sheet-wrap.wl-fade{animation-duration:200ms}
@media (prefers-reduced-motion: reduce){.wl-sheet-in{animation:none}}

/* ---------- Écran « Regarde tes mails » par-dessus la page (accueil, /i/) ---------- */
.wl-overlay{position:fixed;inset:0;z-index:100;background:#000000;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
html.wl-locked,html.wl-locked body{overflow:hidden}

/* ---------- Chargement ---------- */
.wl-loading .wl-hide-loading{visibility:hidden}
.wl-spinner{align-self:center;margin:64px 0;width:28px;height:28px;border-radius:50%;border:2.5px solid rgba(255,255,255,0.12);border-top-color:#FCD120;animation:wlSpin .8s linear infinite}

/* ---------- Animations (sobres, coupées si l'utilisateur réduit les animations) ---------- */
@keyframes wlSpin{to{transform:rotate(360deg)}}
@keyframes wlToastIn{from{opacity:0;transform:translateY(-12px) rotate(-3deg)}to{opacity:1;transform:translateY(0) rotate(-3deg)}}
@keyframes wlPop{0%{transform:scale(0.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes wlRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes wlFade{from{opacity:0}to{opacity:1}}
.wl-toast-in{animation:wlToastIn 500ms cubic-bezier(0.22,0.61,0.36,1) both}
.wl-pop{animation:wlPop 600ms cubic-bezier(0.22,0.61,0.36,1) 250ms both}
.wl-rise{animation:wlRise 500ms cubic-bezier(0.22,0.61,0.36,1) both}
.wl-rise-2{animation:wlRise 500ms cubic-bezier(0.22,0.61,0.36,1) 150ms both}
.wl-fade{animation:wlFade 250ms ease-out both}
@media (prefers-reduced-motion: reduce){
.wl-btn,.wl-av--fill{transition:none}
.wl-toast-in,.wl-pop,.wl-rise,.wl-rise-2,.wl-fade{animation:none}
.wl-spinner{animation-duration:2.4s}
}

/* ---------- Écrans très étroits (320 px) ---------- */
@media (max-width: 359px){
.wl-brand span{font-size:16px}
.wl-chip{padding:6px 10px;font-size:12px}
.wl-lead{font-size:17px}
.wl-pill{padding:10px 14px}
.wl-pill strong{font-size:26px}
.wl-pills6{padding:0 8px}
.wl-pills6 .wl-pill{padding:10px 12px}
.wl-stack .wl-av{width:58px;height:58px}
.wl-share .wl-btn{font-size:14px;padding:0 8px}
}