/* ═══════════════════════════════════════════════════════
   EASY CLAW — COMPOSANTS
   Composants réutilisables : iPhone, Wizard, Boutons,
   Cookie banner, Consent checkbox
   ═══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   REVEAL — Scroll animations
────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1) }
.reveal.visible { opacity:1; transform:translateY(0) }
.reveal-delay-1 { transition-delay:.1s }
.reveal-delay-2 { transition-delay:.2s }
.reveal-delay-3 { transition-delay:.3s }
.reveal-delay-4 { transition-delay:.4s }

/* ──────────────────────────────────────────
   BOUTONS
────────────────────────────────────────── */
.btn-main {
  font-weight:700; font-size:.9rem; padding:.9rem 2.2rem;
  background:var(--gradient); color:#fff; border:none;
  border-radius:50px; cursor:pointer; text-decoration:none;
  transition:all .3s; display:inline-flex; align-items:center;
  gap:.5rem; box-shadow:0 4px 30px var(--cyan-glow)
}
.btn-main:hover { box-shadow:0 8px 50px var(--cyan-glow-strong); transform:translateY(-2px) }

.btn-ghost {
  font-weight:500; font-size:.88rem; padding:.85rem 1.8rem;
  background:transparent; color:var(--text-dim);
  border:1px solid rgba(255,255,255,.12); border-radius:50px;
  cursor:pointer; text-decoration:none; transition:all .25s;
  display:inline-flex; align-items:center; gap:.5rem
}
.btn-ghost:hover { border-color:var(--cyan); color:var(--text); box-shadow:0 0 20px var(--cyan-glow) }

/* ──────────────────────────────────────────
   iPHONE MOCKUP — Telegram Dark Authentic
────────────────────────────────────────── */
.ip-wrap {
  display:flex; justify-content:center; align-items:flex-start;
  flex-shrink:0; position:relative
}

/* Glow ring rotatif */
.ip-wrap::before {
  content:'';
  position:absolute; top:50%; left:50%;
  width:340px; height:340px; border-radius:50%;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--cyan) 60deg,
    transparent 120deg,
    var(--purple) 200deg,
    transparent 270deg
  );
  filter:blur(18px); opacity:0.18; z-index:-1;
  animation:glowRotate 8s linear infinite;
  pointer-events:none
}

.ip-device {
  width:300px;
  background:linear-gradient(145deg,#3a3a3c,#1c1c1e 40%,#2c2c2e);
  border-radius:46px; padding:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1.5px #555,0 0 0 3px #1a1a1a,inset 0 1px 0 rgba(255,255,255,.06);
  position:relative; overflow:hidden;
  animation:deviceFloat 6s ease-in-out infinite;
  will-change:transform
}

.ip-di {
  position:absolute; top:4px; left:50%;
  transform:translateX(-50%); width:95px; height:25px;
  background:#000; border-radius:20px; z-index:20
}

.ip-sb {
  position:absolute; top:10px; left:18px; right:18px;
  display:flex; justify-content:space-between; align-items:center;
  z-index:19; font-size:.56rem; font-weight:800; color:#fff
}
.ip-sbr { display:flex; gap:3px; align-items:center }

.ip-screen {
  border-radius:42px; overflow:hidden; background:#0e1621;
  display:flex; flex-direction:column; height:580px;
  position:relative
}

/* Vidéo hero dans l'iPhone */
.ip-video {
  width:100%; height:100%;
  object-fit:cover; display:block;
  border-radius:42px; flex-shrink:0
}

/* TG Header */
.ip-hdr { background:#213040; padding:38px 10px 8px; display:flex; align-items:center; gap:5px; flex-shrink:0 }
.ip-hdr-back { flex-shrink:0; display:flex; align-items:center; gap:2px }
.ip-hdr-back .ip-unread { width:17px; height:17px; border-radius:50%; background:#2AABEE; display:flex; align-items:center; justify-content:center; font-size:.38rem; font-weight:700; color:#fff }
.ip-hdr-center { display:flex; align-items:center; gap:7px; flex:1; min-width:0 }
.ip-hdr-right { width:30px; height:30px; border-radius:50%; overflow:hidden; flex-shrink:0 }
.ip-hdr-av { width:30px; height:30px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:.5rem; color:#fff; font-weight:800; flex-shrink:0 }
.ip-hdr-av.bf { background:linear-gradient(135deg,#6c7fd8,#9b6dca) }
.ip-hdr-av.ec { background:var(--gradient) }
.ip-hdr-info { min-width:0; flex:1 }
.ip-hdr-name { font-size:.65rem; font-weight:700; color:#fff; line-height:1.15; display:flex; align-items:center; gap:3px; white-space:nowrap }
.ip-hdr-name .vf { display:inline-block; width:13px; height:13px; background:#2AABEE; border-radius:50%; position:relative }
.ip-hdr-name .vf::after { content:'\2713'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.4rem; color:#fff }
.ip-hdr-sub { font-size:.42rem; color:#7e919e }
.ip-hdr-sub.online { color:#4fce5d }

/* Chat */
.ip-chat { flex:1; padding:6px 7px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; scrollbar-width:none; position:relative; background:#0e1621 }
.ip-chat::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%237661C2'%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Ccircle cx='90' cy='10' r='4'/%3E%3Ccircle cx='155' cy='25' r='5'/%3E%3Ccircle cx='45' cy='75' r='3'/%3E%3Ccircle cx='120' cy='60' r='7'/%3E%3Ccircle cx='165' cy='80' r='4'/%3E%3Ccircle cx='15' cy='130' r='5'/%3E%3Ccircle cx='80' cy='120' r='3'/%3E%3Ccircle cx='140' cy='140' r='6'/%3E%3Ccircle cx='55' cy='160' r='4'/%3E%3Ccircle cx='115' cy='170' r='5'/%3E%3Cpath d='M60 35l4 7h-8z'/%3E%3Cpath d='M25 100l3 5h-6z'/%3E%3Cpath d='M150 110l4 7h-8z'/%3E%3Cpath d='M100 90l3 5h-6z'/%3E%3Crect x='170' y='40' width='6' height='6' rx='1'/%3E%3Crect x='70' y='55' width='5' height='5' rx='1'/%3E%3Crect x='35' y='45' width='4' height='4' rx='1'/%3E%3Crect x='130' y='95' width='5' height='5' rx='1'/%3E%3Cpath d='M10 65c3-2 6 0 6 3s-3 5-6 3z'/%3E%3Cpath d='M95 40c3-2 6 0 6 3s-3 5-6 3z'/%3E%3Cpath d='M50 115c3-2 6 0 6 3s-3 5-6 3z'/%3E%3Cpath d='M160 155c3-2 6 0 6 3s-3 5-6 3z'/%3E%3C/g%3E%3C/svg%3E")
}
.ip-chat > * { position:relative; z-index:1 }
.ip-chat::-webkit-scrollbar { display:none }

/* Messages */
.ip-msg { padding:5px 8px; border-radius:8px; font-size:.57rem; line-height:1.42; max-width:82%; word-break:break-word; opacity:0; transform:translateY(6px); animation:ipIn .3s ease-out forwards }
.ip-msg.bot { background:#182533; color:#e0e4ea; align-self:flex-start; border-bottom-left-radius:2px }
.ip-msg.user { background:#8b5cf6; color:#fff; align-self:flex-end; border-bottom-right-radius:2px }
.ip-msg .ip-time { font-size:.35rem; color:rgba(255,255,255,.3); text-align:right; margin-top:1px; display:flex; align-items:center; justify-content:flex-end; gap:2px }
.ip-msg.user .ip-time { color:rgba(255,255,255,.5) }
.ip-msg.user .ip-time::after { content:'\2713\2713'; font-size:.32rem; color:rgba(255,255,255,.5) }
.ip-msg .ip-cmd { color:#6bb3f0; font-weight:600 }
.ip-msg b, .ip-msg strong { font-weight:700; color:#e8ecf0 }

/* Typing dots */
.ip-dots { padding:5px 10px; border-radius:8px; background:#182533; align-self:flex-start; border-bottom-left-radius:2px; display:flex; gap:3px; align-items:center; transition:opacity .15s,transform .15s }
.ip-dots span { width:4px; height:4px; border-radius:50%; background:#6bb3f0; animation:ipDot .8s ease-in-out infinite }
.ip-dots span:nth-child(2) { animation-delay:.15s }
.ip-dots span:nth-child(3) { animation-delay:.3s }

/* Cursor */
.ip-cursor { display:inline-block; width:1.5px; height:1em; background:#6bb3f0; margin-left:1px; vertical-align:text-bottom; animation:ipBlink .6s step-end infinite }

/* Input bar */
.ip-input-area { padding:4px 6px; display:flex; align-items:center; gap:4px; flex-shrink:0; background:#17212b }
.ip-input-icon { flex-shrink:0; opacity:.5; display:flex; align-items:center }
.ip-input-icon.tg-open { background:#2AABEE; border-radius:12px; padding:3px 6px; opacity:1 }
.ip-input-box { flex:1; font-size:.52rem; color:#6b8199; padding:4px 8px; min-height:18px; word-break:break-all }
.ip-input-box.typing { color:#dce2e8 }
.ip-send { width:24px; height:24px; border-radius:50%; background:#2AABEE; display:flex; align-items:center; justify-content:center; flex-shrink:0; opacity:0; transition:all .2s; transform:scale(.5) }
.ip-send.active { opacity:1; transform:scale(1) }
.ip-send svg { width:11px; height:11px }
.ip-emobar { padding:2px 10px 3px; background:#17212b; display:flex; justify-content:space-between; align-items:center }
.ip-emobar svg { opacity:.4 }

/* Keyboard */
.ip-keyboard { background:#1c1c1e; padding:0; flex-shrink:0; display:flex; flex-direction:column }
.ip-autocomplete { display:flex; gap:0; padding:6px 3px; background:#2c2c2e }
.ip-autocomplete span { flex:1; text-align:center; font-size:.5rem; color:#aeaeb2; padding:2px 0; border-right:1px solid rgba(255,255,255,.08) }
.ip-autocomplete span:last-child { border-right:none }
.ip-keys-wrap { padding:4px 3px 0; display:flex; flex-direction:column; gap:6px }
.ip-krow { display:flex; justify-content:center; gap:3px }
.ip-krow span { width:24px; height:33px; background:#4a4a4c; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:400; color:#fff; transition:all .04s; box-shadow:0 1px 0 rgba(0,0,0,.5) }
.ip-krow span.pressed { background:#6c6c6e; transform:scale(1.22) translateY(-4px); box-shadow:0 5px 15px rgba(0,0,0,.6); z-index:5; border-radius:7px }
.ip-kw { width:32px!important; background:#363638!important; font-size:.5rem!important; color:#fff!important }
.ip-kspace { width:110px!important; background:#4a4a4c!important; font-size:.45rem!important; color:#fff!important }
.ip-bottom-bar { height:5px; width:120px; margin:8px auto 5px; background:rgba(255,255,255,.25); border-radius:5px }

/* Hero iPhone overrides */
.ip-hero .ip-device { width:280px }
.ip-hero .ip-screen { height:540px }

/* Fallback chat (visible si vidéo absente) */
#hero-chat-fallback { display:flex; flex-direction:column; height:100% }

@media(max-width:768px) { .tg-layout { grid-template-columns:1fr } .ip-wrap { margin-top:1.5rem } }

/* ──────────────────────────────────────────
   ONBOARDING WIZARD
────────────────────────────────────────── */
.ob-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.85); backdrop-filter:blur(12px); display:none; align-items:center; justify-content:center; padding:1.5rem; opacity:0; transition:opacity .4s ease }
.ob-overlay.ob-show { display:flex; opacity:1 }
.ob-modal { position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:24px; max-width:620px; width:100%; max-height:90vh; overflow-y:auto; padding:0; box-shadow:0 0 80px rgba(0,229,255,.08),0 0 40px rgba(168,85,247,.06); transition:max-width .35s cubic-bezier(.16,1,.3,1) }
.ob-modal.ob-wide { max-width:900px; overflow:hidden; display:flex; flex-direction:column }

/* Header modal — progress + steps toujours visibles */
.ob-modal-header { padding:2.5rem 2.5rem 0 }

/* Steps non-2col : padding normal */
.ob-step:not(.ob-step-tg):not(.ob-step-p1) { padding:0 2.5rem 1.5rem }
.ob-modal::-webkit-scrollbar { width:5px }
.ob-modal::-webkit-scrollbar-track { background:transparent }
.ob-modal::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px }
.ob-close { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--text-muted); font-size:1.4rem; width:36px; height:36px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s; z-index:2 }
.ob-close:hover { background:rgba(255,255,255,.1); color:#fff; border-color:var(--cyan) }

/* Vidéo onboarding */
.ob-video-wrap {
  width:100%; border-radius:12px; overflow:hidden;
  margin-bottom:1.5rem; border:1px solid var(--border);
  background:#000; aspect-ratio:16/9
}
.ob-video {
  width:100%; height:100%;
  object-fit:cover; display:block
}

/* Progress */
.ob-progress { height:3px; background:rgba(255,255,255,.04); border-radius:3px; margin-bottom:1.2rem; overflow:hidden }
.ob-progress-bar { height:100%; background:var(--gradient); border-radius:3px; transition:width .5s cubic-bezier(.22,1,.36,1) }
.ob-steps-nav { display:flex; justify-content:center; gap:2rem; margin-bottom:2rem }
.ob-step-dot { display:flex; flex-direction:column; align-items:center; gap:.3rem; opacity:.35; transition:all .4s; cursor:default }
.ob-step-dot.active { opacity:1 }
.ob-step-dot.done { opacity:.7 }
.ob-step-dot span { width:28px; height:28px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.7rem; font-weight:700; color:var(--text-muted); transition:all .4s }
.ob-step-dot.active span { border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 20px var(--cyan-glow) }
.ob-step-dot.done span { border-color:var(--accent-green); color:var(--accent-green); background:rgba(0,255,136,.08) }
.ob-step-dot small { font-size:.6rem; font-family:var(--mono); color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em }
.ob-step-dot.active small { color:var(--text-dim) }

/* Steps */
.ob-step { display:none; animation:obFadeIn .4s ease }
.ob-step.ob-active { display:block }

.ob-step-header { text-align:center; margin-bottom:1.8rem }
.ob-step-header h3 { font-size:1.3rem; font-weight:800; margin:.6rem 0 .3rem }
.ob-step-header p { font-size:.88rem; color:var(--text-dim); max-width:420px; margin:0 auto; line-height:1.55 }
.ob-step-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto }
.ob-step-icon svg { width:22px; height:22px }
.ob-step-icon.cyan { background:rgba(0,229,255,.1); color:var(--cyan); border:1px solid rgba(0,229,255,.25) }
.ob-step-icon.purple { background:rgba(168,85,247,.1); color:var(--purple); border:1px solid rgba(168,85,247,.25) }
.ob-step-icon.green { background:rgba(0,255,136,.1); color:var(--accent-green); border:1px solid rgba(0,255,136,.25) }
.ob-step-icon.gradient { background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(168,85,247,.12)); color:var(--cyan); border:1px solid rgba(0,229,255,.2) }

/* Fields */
.ob-fields { display:flex; flex-direction:column; gap:1.2rem }
.ob-field label { display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; color:var(--text) }
.ob-optional { color:var(--text-muted); font-weight:400 }
.ob-field input, .ob-field textarea { width:100%; padding:.7rem 1rem; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:var(--font); font-size:.88rem; transition:all .3s; outline:none; resize:vertical }
.ob-field input:focus, .ob-field textarea:focus { border-color:var(--cyan); box-shadow:0 0 20px var(--cyan-glow); background:rgba(0,229,255,.03) }
.ob-field input::placeholder, .ob-field textarea::placeholder { color:var(--text-muted) }
.ob-field-hint { display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--text-muted); margin-top:.3rem }
.ob-char-count { text-align:right; font-size:.68rem; font-family:var(--mono); color:var(--text-muted); margin-top:.2rem }
.ob-link { color:var(--cyan); text-decoration:underline; text-underline-offset:2px }

/* Tone chips */
.ob-tone-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem }
.ob-tone-chip { display:flex; align-items:center; gap:.6rem; padding:.65rem .9rem; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:10px; color:var(--text-dim); font-size:.82rem; font-weight:500; cursor:pointer; transition:all .3s; font-family:var(--font); text-align:left }
.ob-tone-chip:hover { border-color:rgba(0,229,255,.3); background:rgba(0,229,255,.04) }
.ob-tone-chip.active { border-color:var(--cyan); background:rgba(0,229,255,.08); color:var(--text); box-shadow:0 0 20px var(--cyan-glow) }
.ob-tone-emoji { font-size:1.1rem }

/* Provider grid */
.ob-provider-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem }
.ob-provider { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.8rem .5rem; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:all .3s; font-family:var(--font); color:var(--text-dim) }
.ob-provider:hover { border-color:rgba(168,85,247,.3); background:rgba(168,85,247,.04) }
.ob-provider.active { border-color:var(--purple); background:rgba(168,85,247,.08); color:var(--text); box-shadow:0 0 20px var(--purple-glow) }
.ob-provider span { font-size:.82rem; font-weight:600 }
.ob-provider small { font-size:.65rem; color:var(--text-muted); font-family:var(--mono) }
.ob-prov-logo { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; background:rgba(255,255,255,.06); border:1px solid var(--border) }

/* Input with eye/status */
.ob-input-wrap { display:flex; align-items:center; position:relative }
.ob-input-wrap input { padding-right:3rem }
.ob-eye { position:absolute; right:.6rem; background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.2rem; transition:color .2s }
.ob-eye:hover { color:var(--text) }
.ob-eye svg { width:18px; height:18px }
.ob-input-status { position:absolute; right:.6rem; width:18px; height:18px }

/* API help */
.ob-api-help { background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:10px; padding:.8rem 1rem }
.ob-help-title { font-size:.72rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.4rem }
.ob-help-link { display:inline-flex; align-items:center; gap:.3rem; font-family:var(--mono); font-size:.78rem; color:var(--cyan); text-decoration:none; padding:.3rem .6rem; background:rgba(0,229,255,.06); border:1px solid rgba(0,229,255,.15); border-radius:6px; transition:all .3s }
.ob-help-link:hover { background:rgba(0,229,255,.12); border-color:rgba(0,229,255,.3) }

/* TG Guide steps */
.ob-tg-guide { background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px; padding:1rem 1.2rem; display:flex; flex-direction:column; gap:.6rem }
.ob-tg-step { display:flex; align-items:flex-start; gap:.7rem; font-size:.85rem; color:var(--text-dim); line-height:1.5 }
.ob-tg-step code { font-family:var(--mono); font-size:.78rem; padding:.1rem .45rem; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:5px; color:var(--text) }
.ob-tg-num { width:22px; height:22px; border-radius:50%; background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.25); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.65rem; font-weight:700; color:var(--cyan); flex-shrink:0; margin-top:.1rem }

/* Future channels */
.ob-channels-future { margin-top:.5rem }
.ob-future-label { font-size:.68rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.5rem }
.ob-future-row { display:flex; gap:.5rem; flex-wrap:wrap }
.ob-future-chip { display:flex; align-items:center; gap:.35rem; font-size:.72rem; color:var(--text-muted); padding:.3rem .7rem; background:rgba(255,255,255,.02); border:1px dashed var(--border); border-radius:50px }

/* Recap */
.ob-recap { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.2rem }
.ob-recap-card { background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px; padding:1rem 1.2rem }
.ob-recap-label { font-family:var(--mono); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); margin-bottom:.6rem; padding-bottom:.4rem; border-bottom:1px solid var(--border) }
.ob-recap-row { display:flex; justify-content:space-between; align-items:flex-start; padding:.3rem 0; gap:.5rem }
.ob-recap-key { font-size:.78rem; color:var(--text-muted); flex-shrink:0 }
.ob-recap-val { font-size:.78rem; color:var(--text); font-weight:600; text-align:right }
.ob-recap-val.mono { font-family:var(--mono); font-size:.72rem }
.ob-recap-trunc { max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Deploy info */
.ob-deploy-info { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.5rem }
.ob-deploy-row { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--text-dim) }

/* Nav buttons */
.ob-nav { display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--border) }
.ob-btn-next, .ob-btn-deploy { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.85rem; padding:.7rem 1.5rem; background:var(--gradient); color:#fff; border:none; border-radius:50px; cursor:pointer; transition:all .3s; font-family:var(--font); box-shadow:0 4px 20px var(--cyan-glow) }
.ob-btn-next:hover, .ob-btn-deploy:hover { box-shadow:0 8px 40px var(--cyan-glow-strong); transform:translateY(-1px) }
.ob-btn-next svg, .ob-btn-back svg, .ob-btn-deploy svg { width:16px; height:16px }
.ob-btn-back { display:inline-flex; align-items:center; gap:.3rem; font-weight:500; font-size:.82rem; padding:.6rem 1rem; background:transparent; color:var(--text-dim); border:1px solid var(--border); border-radius:50px; cursor:pointer; transition:all .25s; font-family:var(--font) }
.ob-btn-back:hover { border-color:var(--cyan); color:var(--text) }
.ob-btn-deploy { font-size:.9rem; padding:.8rem 2rem }

/* Shake + error */
.ob-shake { animation:obShake .4s ease }
.ob-field-error input, .ob-field-error textarea { border-color:var(--danger)!important; box-shadow:0 0 15px var(--danger-bg)!important }

/* ── Consent checkbox (step 4) ── */
.ob-consent {
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.9rem 1rem;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border); border-radius:10px;
  margin-bottom:1rem; cursor:pointer; transition:border-color .25s
}
.ob-consent:hover { border-color:rgba(0,229,255,.2) }
.ob-consent input[type="checkbox"] {
  width:16px; height:16px; accent-color:var(--cyan);
  cursor:pointer; flex-shrink:0; margin-top:.15rem
}
.ob-consent-text { font-size:.82rem; color:var(--text-dim); line-height:1.5 }
.ob-consent-text a { color:var(--cyan); text-underline-offset:2px }
.ob-consent.ob-consent-error {
  border-color:var(--danger);
  background:var(--danger-bg);
  animation:obShake .4s ease
}

@media(max-width:768px) {
  .ob-modal { padding:1.5rem 1.2rem 1rem; border-radius:16px; max-width:95vw }
  .ob-steps-nav { gap:1rem }
  .ob-step-dot small { display:none }
  .ob-tone-grid { grid-template-columns:1fr }
  .ob-provider-grid { grid-template-columns:1fr }
  .ob-recap { grid-template-columns:1fr }
  .ob-step-header h3 { font-size:1.1rem }
}

/* ──────────────────────────────────────────
   COOKIE BANNER — RGPD
────────────────────────────────────────── */
#cookie-banner {
  position:fixed; bottom:1.5rem; left:50%;
  transform:translateX(-50%) translateY(120%);
  z-index:900;
  max-width:640px; width:calc(100% - 3rem);
  background:var(--bg-card);
  border:1px solid var(--border); border-radius:16px;
  padding:1.2rem 1.5rem;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px var(--border);
  opacity:0;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s ease;
  pointer-events:none
}
#cookie-banner.cookie-show {
  transform:translateX(-50%) translateY(0);
  opacity:1; pointer-events:auto
}
.cookie-inner {
  display:flex; align-items:center;
  gap:1.5rem; flex-wrap:wrap
}
.cookie-text strong {
  font-size:.9rem; font-weight:700;
  display:block; margin-bottom:.25rem
}
.cookie-text p {
  font-size:.78rem; color:var(--text-dim);
  line-height:1.5; margin:0
}
.cookie-actions { display:flex; gap:.6rem; flex-shrink:0 }
.cookie-btn-main {
  font-size:.82rem; font-weight:700; padding:.55rem 1.2rem;
  background:var(--gradient); color:#fff; border:none;
  border-radius:50px; cursor:pointer;
  transition:box-shadow .25s,transform .2s
}
.cookie-btn-main:hover { box-shadow:0 4px 20px var(--cyan-glow); transform:translateY(-1px) }
.cookie-btn-ghost {
  font-size:.82rem; font-weight:500; padding:.55rem 1.1rem;
  background:transparent; color:var(--text-dim);
  border:1px solid var(--border); border-radius:50px;
  cursor:pointer; transition:border-color .25s,color .2s
}
.cookie-btn-ghost:hover { border-color:var(--cyan); color:var(--text) }

@media(max-width:600px) {
  #cookie-banner { bottom:.75rem }
  .cookie-inner { flex-direction:column; gap:.8rem }
  .cookie-actions { width:100%; justify-content:flex-end }
}

/* ──────────────────────────────────────────
   WIZARD STEP 3 — TELEGRAM LAYOUT 2 colonnes
────────────────────────────────────────── */
.ob-step-tg { padding:0 }
.ob-step-p1 { padding:0 }
.ob-step-p1.ob-active { display:flex; flex-direction:column }

.ob-tg-layout {
  display:grid;
  grid-template-columns:55% 45%;
  min-height:520px;
  flex:1;
  overflow:hidden;
}

/* Colonne gauche */
.ob-tg-left {
  padding:2rem 2rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  overflow-y:auto;
}

.ob-tg-title {
  display:flex;
  align-items:center;
  gap:.7rem;
}
.ob-tg-title h3 {
  margin:0;
  font-size:1.15rem;
  font-weight:700;
  color:var(--text);
}
.ob-tg-title svg { flex-shrink:0 }

.ob-tg-subtitle {
  margin:0;
  font-size:.95rem;
  color:var(--text);
}

.ob-tg-ol {
  margin:0;
  padding-left:1.3rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.ob-tg-ol li {
  font-size:.88rem;
  color:var(--text-dim);
  line-height:1.55;
}
.ob-tg-ol a { color:var(--cyan); text-decoration:none }
.ob-tg-ol a:hover { text-decoration:underline }
.ob-tg-ol code {
  background:rgba(255,255,255,.07);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.1em .4em;
  font-family:'JetBrains Mono',monospace;
  font-size:.85em;
}

.ob-tg-field { margin-top:auto }
.ob-tg-field label {
  font-size:.9rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.4rem;
  display:block;
}

.ob-nav-tg {
  margin-top:.75rem;
  padding-top:.75rem;
  border-top:1px solid var(--border);
}

/* Bouton save Telegram — style plein large */
.ob-btn-tg-save {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.4rem;
  border-radius:50px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:var(--text);
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s, border-color .2s;
  white-space:nowrap;
}
.ob-btn-tg-save:hover {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.35);
}

/* Colonne droite — iPhone mockup */
.ob-tg-right {
  background:linear-gradient(135deg, #080f1e 0%, #0d1628 100%);
  border-left:1px solid var(--border);
  border-radius:0 16px 16px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  overflow:hidden;
  position:relative;
}

/* Halo décoratif derrière l'iPhone */
.ob-tg-right::before {
  content:'';
  position:absolute;
  width:280px; height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(42,171,238,.15) 0%, transparent 70%);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.ob-tg-phone {
  width:min(260px, 90%);
  aspect-ratio:9/19.5;
  border-radius:40px;
  overflow:hidden;
  border:2.5px solid rgba(255,255,255,.15);
  box-shadow:
    0 30px 80px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 40px rgba(42,171,238,.08);
  position:relative;
  background:#000;
  flex-shrink:0;
}

.ob-tg-phone-inner {
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:38px;
}

.ob-tg-video {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Responsive — empiler sur mobile */
@media(max-width:720px) {
  .ob-tg-layout { grid-template-columns:1fr }
  .ob-tg-right { display:none }
  .ob-step-tg { padding:0 }
  .ob-tg-left { padding:1.5rem 1.25rem }
}