/* ===== Atlas Pro TV 4K — Page de sélection régionale ===== */
:root{
  --navy:#1B1651; --navy-2:#231c6b; --mid:#4a1870;
  --berry:#9D2050; --berry-hi:#b8275f; --berry-lo:#7a1840;
  --grad:linear-gradient(135deg,#1B1651 0%,#4a1870 50%,#9D2050 100%);
  --bg:#FFFFFF; --bg-2:#F7F5FF; --bg-3:#FFF0F5;
  --text:#1a1228; --text-2:#4a4468; --text-3:#9290AA;
  --border:#E8E4F4; --border-hi:#C9C2E8;
  --shadow:0 4px 20px rgba(27,22,81,.09);
  --shadow-lg:0 12px 48px rgba(27,22,81,.15);
  --shadow-pink:0 8px 32px rgba(157,32,80,.20);
  --r-md:14px; --r-lg:22px; --r-xl:36px;
  --ff-h:'Unbounded',system-ui,sans-serif;
  --ff-b:'Outfit',system-ui,sans-serif;
  --tr:.25s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-b);color:var(--text);background:var(--bg);
  min-height:100svh;display:flex;flex-direction:column;align-items:center;
  padding:40px 20px;position:relative;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* --- décor : halos animés + grille --- */
.bg-decor{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-decor::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 62% 54% at 50% 46%,#fff 0%,rgba(255,255,255,.88) 42%,rgba(255,255,255,0) 76%);
}
.bg-decor::after{
  content:'';position:absolute;inset:0;z-index:2;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;opacity:.45;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 45%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 45%,#000 20%,transparent 78%);
}
.blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.34}
.blob-1{width:46vmax;height:46vmax;top:-24vmax;left:-18vmax;background:var(--navy);animation:float1 22s ease-in-out infinite}
.blob-2{width:42vmax;height:42vmax;bottom:-22vmax;right:-18vmax;background:var(--berry);animation:float2 26s ease-in-out infinite}
.blob-3{width:30vmax;height:30vmax;top:88%;left:22%;background:var(--mid);opacity:.16;animation:float3 30s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,5vmax) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vmax,-4vmax) scale(1.08)}}
@keyframes float3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-58%,-42%) scale(1.2)}}

/* --- contenu --- */
.gate{width:100%;max-width:760px;margin:auto 0;text-align:center;animation:rise .8s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.logo-wrap{display:inline-block;position:relative;margin-bottom:34px}
.logo-wrap::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:130%;height:190%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(157,32,80,.16),rgba(27,22,81,.10) 45%,transparent 70%);
  filter:blur(18px);z-index:-1;animation:pulse 5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.logo{width:min(340px,72vw);height:auto;display:block}

.gate h1{
  font-family:var(--ff-h);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.45rem,4.6vw,2.4rem);line-height:1.22;margin-bottom:14px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.gate .sub{
  font-size:clamp(.98rem,2.4vw,1.12rem);color:var(--text-2);
  max-width:460px;margin:0 auto 42px;line-height:1.65;
}
.eyebrow{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:fit-content;margin:0 auto 22px;
  padding:7px 16px;border-radius:100px;border:1px solid var(--border-hi);
  background:rgba(255,255,255,.7);backdrop-filter:blur(10px);
  font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:beat 2s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 9px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* --- boutons pays --- */
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:38px}
.choice{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:34px 22px 28px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.78);backdrop-filter:blur(16px);
  border:1.5px solid var(--border);box-shadow:var(--shadow);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);
}
.choice::before{
  content:'';position:absolute;inset:0;background:var(--grad);opacity:0;
  transition:opacity var(--tr);z-index:0;
}
.choice::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transition:left .7s ease;z-index:2;pointer-events:none;
}
.choice:hover,.choice:focus-visible{
  transform:translateY(-8px);box-shadow:var(--shadow-lg),var(--shadow-pink);
  border-color:transparent;outline:none;
}
.choice:hover::before,.choice:focus-visible::before{opacity:1}
.choice:hover::after,.choice:focus-visible::after{left:130%}
.choice:active{transform:translateY(-3px) scale(.99)}
.choice>*{position:relative;z-index:1}

.flag{
  width:78px;height:auto;border-radius:10px;display:block;
  box-shadow:0 6px 20px rgba(27,22,81,.22);
  transition:transform var(--tr);
}
.choice:hover .flag{transform:scale(1.08) rotate(-2deg)}
.choice .txt{display:flex;flex-direction:column;align-items:center;gap:4px}
.choice .name{
  font-family:var(--ff-h);font-weight:700;font-size:clamp(1.05rem,3vw,1.35rem);
  letter-spacing:-.01em;transition:color var(--tr);
}
.choice .meta{
  font-size:.82rem;font-weight:500;color:var(--text-3);letter-spacing:.02em;
  transition:color var(--tr);
}
.choice .go{
  display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-size:.86rem;font-weight:600;color:var(--berry);transition:color var(--tr);
}
.choice .go svg{transition:transform var(--tr)}
.choice:hover .name,.choice:hover .meta,.choice:hover .go{color:#fff}
.choice:hover .meta{opacity:.85}
.choice:hover .go svg{transform:translateX(5px)}

.note{font-size:.84rem;color:var(--text-3);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.note svg{flex:none}
.gate footer{margin-top:34px;font-size:.78rem;color:var(--text-3);letter-spacing:.02em}
.gate footer a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--border-hi)}
.gate footer a:hover{color:var(--berry)}

@media (max-width:600px){
  .choices{grid-template-columns:1fr;gap:16px}
  .choice{flex-direction:row;justify-content:flex-start;text-align:left;padding:22px 24px;gap:18px;border-radius:var(--r-lg)}
  .choice .flag{width:60px}
  .choice .txt{align-items:flex-start;gap:3px}
  .choice .go{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== Section « Rejoignez plus de 20 000 abonnés » ===== */
.join{
  margin-top:34px;padding:30px 30px 26px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.72);backdrop-filter:blur(16px);
  border:1.5px solid var(--border);box-shadow:var(--shadow);
  text-align:left;position:relative;overflow:hidden;
}
.join::before{
  content:'';position:absolute;inset:0;background:var(--grad);opacity:.045;pointer-events:none;
}
.join > *{position:relative}
.join-head{display:flex;align-items:center;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.join-head h2{
  font-family:var(--ff-h);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.02rem,2.7vw,1.24rem);line-height:1.3;margin-bottom:5px;color:var(--navy);
}
.join-head h2 strong{
  font-weight:800;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.join-head p{font-size:.92rem;color:var(--text-2);line-height:1.5}

.avatars{display:flex;flex:none}
.avatars i{
  width:38px;height:38px;border-radius:50%;margin-left:-11px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-h);font-style:normal;font-weight:700;font-size:.82rem;color:#fff;
  background:var(--grad);border:2.5px solid #fff;box-shadow:0 3px 10px rgba(27,22,81,.18);
}
.avatars i:first-child{margin-left:0}
.avatars i:nth-child(2){background:linear-gradient(135deg,#4a1870,#9D2050)}
.avatars i:nth-child(3){background:linear-gradient(135deg,#231c6b,#4a1870)}
.avatars i:nth-child(4){background:linear-gradient(135deg,#9D2050,#b8275f)}
.avatars i.more{background:#fff;color:var(--berry);border-color:var(--border-hi)}

.join-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.join-form .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.join-form label{
  font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);
}
.join-form input{
  width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:var(--r-md);
  font-family:var(--ff-b);font-size:.94rem;color:var(--text);background:#fff;
  transition:border-color var(--tr),box-shadow var(--tr);
}
.join-form input::placeholder{color:var(--text-3)}
.join-form input:focus{
  outline:none;border-color:var(--berry);box-shadow:0 0 0 4px rgba(157,32,80,.12);
}
.join-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border:none;border-radius:var(--r-md);cursor:pointer;white-space:nowrap;
  font-family:var(--ff-b);font-weight:600;font-size:.95rem;color:#fff;
  background:var(--grad);background-size:200% 200%;box-shadow:var(--shadow-pink);
  transition:transform var(--tr),box-shadow var(--tr),background-position var(--tr);
}
.join-btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(157,32,80,.34);background-position:100% 0}
.join-btn:active{transform:translateY(0)}
.join-btn svg{transition:transform var(--tr)}
.join-btn:hover svg{transform:translateX(4px)}

.join-note{grid-column:1/-1;margin-top:4px;font-size:.8rem;color:var(--text-3)}
.join-note.ok{color:#0f9d6b;font-weight:600}
.join-note.err{color:var(--berry);font-weight:600}

@media (max-width:760px){
  .join{padding:26px 22px 24px;border-radius:var(--r-lg)}
  .join-form{grid-template-columns:1fr}
  .join-btn{width:100%;padding:15px 26px}
}
@media (max-width:480px){
  .join-head{gap:14px}
  .avatars i{width:34px;height:34px;font-size:.76rem}
}

/* état de chargement du bouton d'inscription */
.join-btn .spin{display:none}
.join-btn.loading{pointer-events:none;opacity:.8}
.join-btn.loading .arw{display:none}
.join-btn.loading .spin{display:block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}