/* =========================================================
   EL BALADI — Countdown de lancement
   ========================================================= */

:root{
    --green-950:#08150F;
    --green-900:#0C1F1A;
    --green-800:#122A22;
    --gold:#C9A227;
    --gold-light:#E8C767;
    --clay:#B4552F;
    --cream:#F4EDE0;
    --muted:rgba(244,237,224,.62);
    --line:rgba(201,162,39,.22);
    --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    --font-body:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
    --radius:16px;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
    margin:0;
    min-height:100vh;
    min-height:100svh;
    font-family:var(--font-body);
    font-weight:300;
    color:var(--cream);
    background:var(--green-900);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

/* ---------- Décor de fond ---------- */
.bg-glow{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
            radial-gradient(58% 46% at 50% 8%, rgba(201,162,39,.16), transparent 62%),
            radial-gradient(46% 42% at 12% 92%, rgba(180,85,47,.16), transparent 66%),
            radial-gradient(50% 50% at 92% 74%, rgba(201,162,39,.08), transparent 68%),
            linear-gradient(180deg,#08150F 0%,#0C1F1A 46%,#0A1B14 100%);
}

.bg-pattern{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.16;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1'%3E%3Cpath d='M60 14l11 24 24 11-24 11-11 24-11-24-24-11 24-11z'/%3E%3Ccircle cx='60' cy='60' r='3.2'/%3E%3Cpath d='M0 60h14M106 60h14M60 0v14M60 106v14'/%3E%3C/g%3E%3C/svg%3E");
    background-size:120px 120px;
    mask-image:radial-gradient(circle at 50% 34%, #000 0%, transparent 76%);
    -webkit-mask-image:radial-gradient(circle at 50% 34%, #000 0%, transparent 76%);
}

/* ---------- Structure ---------- */
.page{
    position:relative;
    z-index:1;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    padding:clamp(20px,4vw,42px) clamp(20px,5vw,64px) clamp(24px,4vw,36px);
}

.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Header ---------- */
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:inherit;
}

.brand-mark{
    width:46px;
    height:46px;
    color:var(--gold);
    flex:none;
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.06);}

.brand-text{display:flex;flex-direction:column;line-height:1.12;}

.brand-name{
    font-family:var(--font-display);
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:.005em;
    background:linear-gradient(96deg,var(--gold-light),var(--gold) 55%,#A8851B);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.brand-sub{
    font-size:.6rem;
    letter-spacing:.36em;
    text-transform:uppercase;
    color:var(--muted);
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:.66rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--gold-light);
    background:rgba(201,162,39,.06);
    backdrop-filter:blur(8px);
    white-space:nowrap;
}

/* ---------- Hero ---------- */
.hero{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:clamp(18px,2.4vw,26px);
    padding:clamp(40px,7vh,80px) 0;
    max-width:940px;
    margin:0 auto;
    width:100%;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:0;
    font-size:.7rem;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:var(--gold-light);
    padding:8px 18px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(201,162,39,.05);
}

.pulse{
    width:7px;height:7px;border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 0 rgba(201,162,39,.7);
    animation:pulse 2.2s infinite;
}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(201,162,39,.6);}
    70%{box-shadow:0 0 0 11px rgba(201,162,39,0);}
    100%{box-shadow:0 0 0 0 rgba(201,162,39,0);}
}

h1{
    margin:0;
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(2.3rem,7.2vw,4.6rem);
    line-height:1.04;
    letter-spacing:-.015em;
    text-wrap:balance;
}

h1 em{
    font-style:italic;
    font-weight:600;
    background:linear-gradient(100deg,var(--gold-light),var(--gold) 60%,#A8851B);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.lead{
    margin:0;
    max-width:640px;
    font-size:clamp(.95rem,1.6vw,1.08rem);
    color:var(--muted);
    text-wrap:pretty;
}

/* ---------- Countdown ---------- */
.countdown{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(10px,1.6vw,18px);
    width:100%;
    max-width:660px;
    margin-top:clamp(8px,1.6vh,18px);
    perspective:900px;
}

.unit{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:clamp(16px,2.6vw,26px) 8px clamp(12px,2vw,18px);
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(168deg,rgba(201,162,39,.10),rgba(12,31,26,.55));
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    overflow:hidden;
    box-shadow:0 18px 40px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(244,237,224,.06);
}

.unit::before{
    content:"";
    position:absolute;
    top:0;left:22%;right:22%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    opacity:.7;
}

.num{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.1rem,8.4vw,3.7rem);
    line-height:1;
    color:var(--cream);
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
    text-shadow:0 0 26px rgba(201,162,39,.28);
}

.num.flip{
    animation:flip .55s cubic-bezier(.2,.75,.25,1);
}
@keyframes flip{
    0%{transform:rotateX(-88deg);opacity:0;filter:blur(2px);}
    100%{transform:rotateX(0);opacity:1;filter:blur(0);}
}

.label{
    font-size:.6rem;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--muted);
}

/* Message de fin */
.countdown.done{
    display:block;
    max-width:560px;
    padding:clamp(22px,4vw,34px);
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(168deg,rgba(201,162,39,.14),rgba(12,31,26,.6));
    font-family:var(--font-display);
    font-size:clamp(1.3rem,3.4vw,1.9rem);
    color:var(--gold-light);
}

/* ---------- Formulaire ---------- */
.notify{
    display:flex;
    gap:10px;
    width:100%;
    max-width:470px;
    margin-top:4px;
    padding:7px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(8,21,15,.5);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:border-color .3s, box-shadow .3s;
}

.notify:focus-within{
    border-color:rgba(201,162,39,.55);
    box-shadow:0 0 0 4px rgba(201,162,39,.10);
}

.notify input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    padding:12px 10px 12px 18px;
    font-family:inherit;
    font-size:.95rem;
    font-weight:300;
    color:var(--cream);
}
.notify input::placeholder{color:rgba(244,237,224,.4);}

.notify button{
    flex:none;
    border:0;
    border-radius:999px;
    padding:13px 26px;
    font-family:inherit;
    font-size:.78rem;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--green-950);
    background:linear-gradient(100deg,var(--gold-light),var(--gold));
    cursor:pointer;
    transition:transform .25s, filter .25s, box-shadow .25s;
    box-shadow:0 10px 26px -12px rgba(201,162,39,.9);
}
.notify button:hover{transform:translateY(-2px);filter:brightness(1.06);}
.notify button:active{transform:translateY(0);}
.notify button:disabled{cursor:default;opacity:.85;transform:none;}

.notify.error{border-color:rgba(232,138,106,.6);}
.notify.error input{animation:shake .4s;}
@keyframes shake{
    0%,100%{transform:translateX(0);}
    25%{transform:translateX(-6px);}
    75%{transform:translateX(6px);}
}

/* ---------- Message ---------- */
.msg{
    margin:0;
    min-height:1.3em;
    font-size:.85rem;
    letter-spacing:.02em;
    opacity:0;
    transition:opacity .35s;
}
.msg.show{opacity:1;}
.msg.success{color:var(--gold-light);}
.msg.error{color:#E88A6A;}

/* ---------- Footer ---------- */
.footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    padding-top:clamp(20px,3vh,30px);
    border-top:1px solid rgba(201,162,39,.14);
}

.footer-note{
    margin:0;
    font-size:.75rem;
    letter-spacing:.06em;
    color:rgba(244,237,224,.42);
}
.footer-note span{color:var(--gold);}

.socials{
    display:flex;
    gap:8px;
    list-style:none;
    margin:0;
    padding:0;
}

.socials a{
    display:grid;
    place-items:center;
    width:40px;height:40px;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--gold-light);
    background:rgba(201,162,39,.04);
    transition:background .3s, transform .3s, border-color .3s;
}
.socials a:hover{
    background:rgba(201,162,39,.14);
    border-color:rgba(201,162,39,.5);
    transform:translateY(-3px);
}
.socials svg{width:18px;height:18px;}

/* ---------- Animations d'entrée ---------- */
.reveal{
    opacity:0;
    transform:translateY(20px);
    animation:rise .95s cubic-bezier(.2,.75,.25,1) forwards;
    animation-delay:var(--d,0s);
}
@keyframes rise{
    to{opacity:1;transform:translateY(0);}
}

/* ---------- Responsive ---------- */
@media (max-width:760px){
    .topbar{justify-content:center;text-align:center;}
    .hero{padding:32px 0 40px;}
}

@media (max-width:480px){
    .countdown{grid-template-columns:repeat(2,1fr);max-width:340px;}
    .notify{flex-direction:column;border-radius:22px;padding:10px;}
    .notify input{padding:12px 14px;text-align:center;}
    .notify button{width:100%;}
    .brand-mark{width:40px;height:40px;}
    .badge{font-size:.6rem;padding:7px 13px;}
    .footer{justify-content:center;text-align:center;}
}

/* ---------- Accessibilité ---------- */
:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
    border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
    .reveal{opacity:1;transform:none;}
}