/* Page publique d'un site de secours : sombre, aux couleurs du vendeur (--c1 accent, --c2 fond) */
:root{--c1:#f5b400;--c2:#0b0a08;--txt:#f4efe2;--mute:#b8b0a0;--carte:rgba(255,255,255,.055);--trait:rgba(255,255,255,.1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--c2);color:var(--txt);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(120% 60% at 50% -10%,color-mix(in srgb,var(--c1) 22%,transparent),transparent 65%),var(--c2);background-attachment:fixed}
main{max-width:520px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
.attente{height:60vh;display:grid;place-items:center}
.attente:after{content:"";width:34px;height:34px;border-radius:50%;border:3px solid var(--trait);border-top-color:var(--c1);animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(1turn)}}
/* apparition en cascade */
.ap{animation:monte .55s cubic-bezier(.2,1,.3,1) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes monte{from{opacity:0;transform:translateY(14px)}}

/* bandeau « Nouveau canal » : tout en haut, impossible à rater */
.bandeau{display:flex;align-items:center;gap:12px;padding:14px 14px;margin:0 0 16px;border-radius:18px;background:linear-gradient(135deg,var(--c1),color-mix(in srgb,var(--c1) 70%,#fff));color:#140e00;box-shadow:0 10px 30px color-mix(in srgb,var(--c1) 45%,transparent);animation:monte .5s cubic-bezier(.2,1,.3,1) both,pulse 2.4s ease-in-out .6s infinite}
@keyframes pulse{50%{box-shadow:0 10px 44px color-mix(in srgb,var(--c1) 75%,transparent)}}
.bandeau .b-ico{font-size:26px}
.bandeau .b-txt{flex:1;min-width:0}
.bandeau b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.bandeau small{display:block;font-size:14.5px;font-weight:600}
.bandeau .b-go{flex:none;padding:8px 12px;border-radius:99px;background:#140e00;color:var(--c1);font-weight:800;font-size:13px}

/* en-tête */
header{text-align:center;padding:18px 0 20px}
.logo{width:96px;height:96px;margin:0 auto 12px;border-radius:26px;object-fit:cover;background:var(--carte);border:1px solid var(--trait);box-shadow:0 12px 30px #0008}
.initiale{display:grid;place-items:center;font-size:42px;font-weight:800;color:var(--c2);background:var(--c1)}
h1{font-size:24px;line-height:1.15;font-weight:800;word-break:break-word}
header p{margin-top:6px;color:var(--mute)}
.maj{display:block;margin-top:8px;font-size:11.5px;color:var(--mute);opacity:.8}

/* liens */
.liens{display:grid;gap:10px;margin-bottom:22px}
.lien{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--carte);border:1px solid var(--trait);transition:transform .15s,border-color .2s}
.lien:active{transform:scale(.98)}
.lien .ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:rgba(255,255,255,.07)}
.lien .txt{flex:1;min-width:0}
.lien b{display:block;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lien small{display:block;color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lien .fl{color:var(--c1);font-size:22px}
.lien.avant{padding:18px 16px;border-color:color-mix(in srgb,var(--c1) 60%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 18%,transparent),var(--carte))}
.lien.avant b{font-size:17px}

h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 10px 4px}
.bloc{margin-bottom:22px}
.contacts{display:grid;gap:8px}
.contact{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--carte);border:1px solid var(--trait);word-break:break-word}
.info{padding:12px 14px;border-radius:14px;background:var(--carte);border:1px solid var(--trait);margin-bottom:8px}
.info b{display:block;margin-bottom:3px}
.info p{color:var(--mute);white-space:pre-line}

/* installer + QR */
.installer{display:grid;gap:12px;padding:16px;border-radius:18px;border:1px dashed color-mix(in srgb,var(--c1) 55%,transparent);margin-bottom:22px;text-align:center}
.installer p{color:var(--mute);font-size:13.5px}
.bouton{display:block;width:100%;padding:13px;border:0;border-radius:14px;background:var(--c1);color:#140e00;font:800 15px system-ui,sans-serif;cursor:pointer}
.bouton.second{background:transparent;color:var(--txt);border:1px solid var(--trait)}
.aide{display:none;text-align:left;font-size:13.5px;line-height:1.6}
.aide.on{display:block}
.qr{display:grid;place-items:center;gap:8px}
.qr svg{width:170px;height:170px;border-radius:12px;background:#fff;padding:6px}
footer{text-align:center;color:var(--mute);font-size:11.5px;opacity:.75;line-height:1.6}
@media (prefers-reduced-motion:reduce){.ap,.bandeau{animation:none}}