/* OWAN onboarding — light premium, Rethink Sans */
@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  /* palette projet */
  --dark:#0E1322;
  --accent:#542DF3;
  --success:#9AD567;
  --warning:#FFC05F;
  --danger:#F86251;

  /* dérivés */
  --ink:#0E1322;
  --muted:rgba(14,19,34,.56);
  --muted-2:rgba(14,19,34,.42);
  --line:rgba(14,19,34,.06);              /* bordure input normale (dark 6%) */
  --focus:rgba(84,45,243,.30);            /* bordure input focus (accent 30%) */
  --focus-ring:rgba(84,45,243,.12);
  --card:#ffffff;
  --unipro:#F5F7FB;
  --radius:10px;
  --radius-lg:30px;
  --font:'Rethink Sans', system-ui, -apple-system, Segoe UI, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font);
  color:var(--ink);
  background:linear-gradient(180deg,#EFF2F8 0%, #ffffff 58%);
  background-attachment:fixed;
  min-height:100dvh;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── Halo gradient derrière le formulaire ───────────────────── */
.bg-top{
  position:fixed; inset:0 0 auto 0;
  width:100%; height:70vh;
  background:url("/static/images/background-light-gradient.webp") center top / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 58%, transparent 100%);
          mask-image:linear-gradient(180deg,#000 58%, transparent 100%);
  pointer-events:none; z-index:0;
}
@media (max-width:700px){
  .bg-top{
    height:90vh; top:50%; bottom:auto; transform:translateY(-50%);
    background-position:center center;
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
            mask-image:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  }
}

.wrap{
  position:relative; z-index:1;
  width:100%; max-width:464px;
  margin:0 auto; padding:29px 18px 72px;
  display:flex; flex-direction:column; min-height:100dvh;
}
.wrap-center{ justify-content:center; }

/* ── Logo ───────────────────────────────────────────────────── */
.brand{ display:flex; justify-content:center; padding:4px 0 10px; }
.brand .logo{ height:64px; width:auto; display:block; }
@media (max-width:700px){ .brand .logo{ height:58px; } }

/* ── Hero (étape 1) ─────────────────────────────────────────── */
.hero h1{
  text-align:center;
  max-width:360px;
  margin:2px auto 16px;
  font-weight:400;
  font-size:24px;
  line-height:1.18;
  letter-spacing:-0.012em;
  color:var(--ink);
  animation:rise .55s .06s cubic-bezier(.2,.7,.2,1) both;
}
/* dégradé répliqué depuis Gradient-square.webp — toutes les couleurs, sans grain */
@property --grad-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:45deg;
}
.grad{
  --grad-angle:45deg;                 /* repli si @property non supporté → dégradé fixe */
  display:inline-block;
  background-image:linear-gradient(var(--grad-angle),
    #8978f9 0%, #8282fc 8%, #838af9 16%, #8b93fa 25%, #ae7ef9 33%,
    #cd69f5 42%, #d264f6 50%, #f87c42 58%, #f88b45 66%, #f99c4e 75%,
    #fbb05c 83%, #fcc16c 92%, #ffdda4 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:gradSpin 18s linear infinite;
}
/* l'angle du dégradé tourne 360° → vraie rotation du dégradé dans le texte */
@keyframes gradSpin{
  to{ --grad-angle:405deg; }
}

/* ── Carte ──────────────────────────────────────────────────── */
.card{
  position:relative; z-index:1;
  background:var(--card);
  border:none;
  border-radius:var(--radius-lg);
  padding:22px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 30px 60px -28px rgba(14,19,34,.16),
    0 8px 24px -16px rgba(14,19,34,.05);
}

/* ── En-tête de progression ─────────────────────────────────── */
.progress-head{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:12px;
}
.step-pill{
  font-size:13px; font-weight:500; color:var(--muted-2);
  background:rgba(14,19,34,.045);
  border-radius:8px; padding:3px 9px; white-space:nowrap;
}
.step-pill b{ color:var(--ink); font-weight:700; }
.step-name{ font-size:14.5px; font-weight:400; color:var(--ink); }
.bars{ display:flex; gap:5px; width:118px; margin:4px auto 22px; }
.bar{ flex:1; height:3px; border-radius:99px; background:rgba(14,19,34,.18); }
.bar.on{ background:var(--ink); }
.bar.current{ position:relative; overflow:hidden; }
.bar.current::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9) 50%, transparent);
  transform:translateX(-110%);
  animation:barShine 5s ease-in-out infinite;
}
@keyframes barShine{
  0%{ transform:translateX(-110%); }
  10%, 100%{ transform:translateX(110%); }
}

/* ── Badge sécurité ─────────────────────────────────────────── */
.secure{
  display:flex; align-items:center; gap:8px;
  width:fit-content; margin:0 auto 22px; padding:7px 10px;
  border-radius:11px;
  background:rgba(154,213,103,.16);
  color:#4d7a27;
  font-size:13px; font-weight:500;
}
.secure svg{ width:18px; height:18px; flex:none; color:#6aab36; }

/* ── Champs + label flottant ────────────────────────────────── */
.field{ position:relative; margin-bottom:13px; }
.field input{
  width:100%;
  font-family:var(--font);
  font-size:15px; font-weight:500;
  color:var(--ink);
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:10px 16px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder{ color:transparent; }
.field label{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  font-size:15px; font-weight:400; color:var(--muted);
  pointer-events:none;
  background:#fff; padding:0 5px; border-radius:5px;
  transition:top .16s ease, transform .16s ease, color .16s ease, font-weight .16s ease;
}
.field input:focus{
  border-color:transparent;
  box-shadow:0 0 0 2px var(--focus-ring);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:0; transform:translateY(-50%) scale(.86);
  font-weight:400; color:var(--muted-2);
}
.field input:focus + label{ color:var(--accent); }
.field input.err{ border-color:var(--danger); box-shadow:0 0 0 4px rgba(248,98,81,.10); }

/* deux colonnes */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }

/* champs avec icône à gauche */
.field-icon input{ padding-left:46px; }
.field-icon label{ left:46px; }
.field-icon input:focus + label,
.field-icon input:not(:placeholder-shown) + label{ left:42px; }
.field-icon .ic{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:var(--muted-2); pointer-events:none; z-index:2;
}
.field-icon .ic svg{ width:20px; height:20px; display:block; }

/* champ mot de passe (place pour l'œil) */
.field-pass input{ padding-right:48px; }
.eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--muted-2); cursor:pointer;
  border-radius:9px; transition:color .15s, background .15s; z-index:3;
}
.eye:hover{ color:var(--ink); background:rgba(14,19,34,.05); }
.eye svg{ width:20px; height:20px; display:block; }

/* ── Téléphone (intl-tel-input) ─────────────────────────────── */
.field-phone{ position:relative; margin-bottom:13px; }
.iti{ width:100%; display:block; }
.field-phone input{
  width:100%; font-family:var(--font);
  font-size:15px; font-weight:400; color:var(--ink);
  background:#fff; border:1.5px solid var(--line);
  border-radius:var(--radius); padding:10px 16px;
  outline:none; transition:border-color .18s ease, box-shadow .18s ease;
}
.field-phone input::placeholder{ color:var(--muted); }
.field-phone input:focus{ border-color:transparent; box-shadow:0 0 0 2px var(--focus-ring); }
.field-phone input.err{ border-color:var(--danger); box-shadow:0 0 0 4px rgba(248,98,81,.10); }
.iti__selected-flag{ background:transparent !important; border-right:1px solid var(--line); border-radius:10px 0 0 10px; padding:0 10px 0 14px; }
.iti__selected-flag:hover, .iti__selected-flag:focus{ background:transparent !important; }
.iti--separate-dial-code .iti__selected-dial-code{ font-family:var(--font); font-size:15px; font-weight:500; color:var(--ink); }
.iti__country-list{
  list-style:none;
  z-index:1000;
  max-height:250px; overflow-y:auto; overscroll-behavior:contain;
  border-radius:14px; border:1px solid var(--line);
  box-shadow:0 16px 40px -10px rgba(14,19,34,.25);
  font-family:var(--font); font-size:14px; padding:0 6px 6px;
}
/* barre de recherche pays (injectée en JS) */
.iti-search-wrap{ position:sticky; top:0; z-index:3; background:#fff; padding:6px 0 8px; }
.iti-search{
  display:block; width:100%; box-sizing:border-box; text-align:left;
  font-family:var(--font); font-size:14px; font-weight:400; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:9px;
  /* !important : intl-tel-input applique son padding aux input dans .iti (52px à gauche) */
  padding:9px 12px !important; outline:none; transition:border-color .15s ease;
}
.iti-search:focus{ border-color:var(--focus); }
.iti-search::placeholder{ color:var(--muted-2); }
.iti-no-result{ padding:12px; text-align:center; color:var(--muted-2); font-size:13px; }
.iti__country-list .iti__country{ display:flex; align-items:center; gap:4px; }
.iti__country-name{ margin-right:4px; }
.iti__dial-code{ color:var(--muted); }
.iti__country{ border-radius:9px; padding:7px 8px; }
.iti__country.iti__highlight{ background:rgba(84,45,243,.08); }

/* ── Encart Unipro ──────────────────────────────────────────── */
.unipro{
  margin-top:22px; padding:0 16px 16px;
  background:var(--unipro);
  border-radius:18px;
  display:flow-root; /* empêche la marge négative du badge de remonter tout l'encart */
}
.unipro-badge{
  width:fit-content; margin:-5px auto 12px;
  padding:0 15px 10px;
  background:#fff;
  border-radius:0 0 18px 18px;
  box-shadow:none;
}
.unipro-logo{ display:block; height:18px; width:auto; }
/* label flottant des champs Unipro : fond = celui de l'encart (pas blanc) */
.unipro .field input:focus + label,
.unipro .field input:not(:placeholder-shown) + label{ background:var(--unipro); }
.unipro .field:last-child{ margin-bottom:0; }

/* ── Bouton (skeuomorphe, accent) ───────────────────────────── */
.cta{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%;
  font-family:var(--font); font-weight:500; font-size:15px;
  color:#fff; text-decoration:none; cursor:pointer;
  border:none; border-radius:15px;
  padding:17px 22px;
  background:linear-gradient(180deg,#6B47F7 0%, #542DF3 52%, #4A27DC 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.38) inset,
    0 -2px 6px rgba(0,0,0,.18) inset,
    0 10px 22px -8px rgba(84,45,243,.55),
    0 3px 8px -4px rgba(84,45,243,.5);
  transition:transform .14s ease, box-shadow .2s ease, filter .2s ease;
}
.cta:hover{
  filter:brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,.42) inset,
    0 -2px 6px rgba(0,0,0,.18) inset,
    0 14px 30px -8px rgba(84,45,243,.62),
    0 3px 8px -4px rgba(84,45,243,.5);
}
.cta:active{
  transform:translateY(1px) scale(.995);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -1px 3px rgba(0,0,0,.22) inset,
    0 6px 14px -8px rgba(84,45,243,.5);
}
.cta:disabled{ filter:saturate(.7) brightness(.97); cursor:wait; transform:none; }
.cta svg{ width:18px; height:18px; transition:transform .2s; }
.cta:hover svg{ transform:translateX(3px); }

#form > .cta{ margin-top:18px; }
#form > .erreur-box{ margin-top:18px; }

.erreur-box{
  display:none;
  padding:12px 15px; border-radius:12px;
  background:rgba(248,98,81,.10); border:1px solid rgba(248,98,81,.30);
  color:#c23b2d; font-size:13.5px; font-weight:500; line-height:1.5;
}
.erreur-box.on{ display:block; }

/* ── Scène (étapes 2 & 3) ───────────────────────────────────── */
.scene{ text-align:center; padding:6px 4px 4px; }
.icone{
  width:74px; height:74px; margin:6px auto 22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:22px;
  background:linear-gradient(160deg, rgba(154,213,103,.28), rgba(154,213,103,.12));
  border:1px solid rgba(154,213,103,.37);
  box-shadow:0 12px 26px -14px rgba(154,213,103,.7), 0 1px 0 rgba(255,255,255,.7) inset;
}
.icone svg{ width:40px; height:40px; }
@media (max-width:700px){
  .icone{ width:63px; height:63px; }
  .icone svg{ width:34px; height:34px; }
}
.scene h1{
  font-weight:400; font-size:clamp(24px,6vw,30px);
  line-height:1.16; letter-spacing:-0.012em;
}
.scene .sous{
  margin:12px auto 26px; max-width:330px;
  color:var(--muted); font-size:15px; line-height:1.6;
}
.scene .sous b{ color:var(--ink); font-weight:600; }
.scene .cta{ margin-top:4px; }
.scene .note{ margin-top:18px; font-size:12.5px; color:var(--muted-2); line-height:1.55; }
.scene .erreur-box{ margin-bottom:18px; text-align:left; }

/* check animé */
.check-ring{ animation:pop .55s .15s cubic-bezier(.3,1.6,.4,1) both; }
.check-trait{ stroke-dasharray:30; stroke-dashoffset:30; animation:draw .5s .5s ease-out forwards; }

/* ── Animations d'entrée ────────────────────────────────────── */
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes pop{ from{ opacity:0; transform:scale(.5); } to{ opacity:1; transform:scale(1); } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.brand{ animation:rise .55s cubic-bezier(.2,.7,.2,1) both; }
.card{ animation:rise .55s .12s cubic-bezier(.2,.7,.2,1) both; }
#form > .cta{ animation:rise .55s .2s cubic-bezier(.2,.7,.2,1) both; }

@media (min-width:700px){ .wrap{ padding-top:46px; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
}

/* ── Lenis smooth scroll ────────────────────────────────────── */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ── Bouton secondaire (ghost) — ex. "étape suivante" sous le CTA principal ── */
.cta-ghost{
  margin-top:10px;
  background:#fff;
  color:var(--accent);
  border:1.5px solid rgba(84,45,243,.22);
  box-shadow:0 4px 14px -8px rgba(84,45,243,.4);
}
.cta-ghost:hover{ filter:none; background:#faf9ff; box-shadow:0 6px 18px -8px rgba(84,45,243,.5); }

/* ── Étape 4 : galerie de templates ── */
.tpl-wrap{ width:100%; max-width:640px; }
.tpl-intro{ text-align:center; color:var(--muted); font-size:14.5px; margin:0 auto 20px; max-width:440px; line-height:1.5; }
.tpl-cat{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:22px 0 10px 2px; }
.tpl-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:15px 16px; margin-bottom:11px; box-shadow:0 18px 40px -30px rgba(14,19,34,.18); }
.tpl-head{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.tpl-head > div:first-child{ flex:1; min-width:0; }
.tpl-head .t{ font-weight:600; font-size:15px; color:var(--ink); }
.tpl-head .d{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.4; }
.tpl-badge{ flex:none; min-width:64px; text-align:center; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; background:rgba(154,213,103,.18); color:#4d7a27; }
.tpl-badge.email{ background:rgba(84,45,243,.1); color:var(--accent); }
.tpl-badge.sms{ background:rgba(255,192,95,.18); color:#8a6212; }
.tpl-chevron{ flex:none; width:22px; height:22px; color:var(--muted-2); transition:transform .2s; }
.tpl-card.open .tpl-chevron{ transform:rotate(180deg); }
.tpl-body{ display:none; margin-top:13px; }
.tpl-card.open .tpl-body{ display:block; animation:rise .3s ease both; }
.tpl-label{ font-size:12px; font-weight:600; color:var(--muted-2); margin:0 0 5px 2px; }
.tpl-body input, .tpl-body textarea{
  width:100%; font-family:var(--font); font-size:14px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:11px 13px;
  outline:none; transition:border-color .18s, box-shadow .18s; resize:vertical;
}
.tpl-body input{ margin-bottom:12px; }
.tpl-body textarea{ min-height:150px; line-height:1.5; }
.tpl-body input:focus, .tpl-body textarea:focus{ border-color:transparent; box-shadow:0 0 0 2px var(--focus-ring); }
.tpl-vars{ font-size:11.5px; color:var(--muted-2); margin:8px 2px 12px; line-height:1.5; }
.tpl-vars code{ background:rgba(84,45,243,.08); color:var(--accent); border-radius:4px; padding:1px 5px; font-size:11px; }
.tpl-save{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font); font-weight:600; font-size:13.5px; color:#fff; background:var(--accent); border:none; border-radius:10px; padding:9px 18px; cursor:pointer; transition:filter .15s; }
.tpl-save:hover{ filter:brightness(1.06); }
.tpl-save.saved{ background:#5d9a32; }
.tpl-badge.social{ background:rgba(219,39,119,.12); color:#be185d; }