/* ============================================================
   ESCOM — Accueil : Hero variants + Cards variants
   Variant chosen via body[data-hero="1|2|3"] / body[data-cards="1|2|3"]
   ============================================================ */

/* ---- shared hero shell ---- */
.heroes { position: relative; }
.hero { display: none; }
body[data-hero="1"] .hero.h1,
body[data-hero="2"] .hero.h2,
body[data-hero="3"] .hero.h3 { display: block; }

/* ============= HERO 1 — Classique centré ============= */
.h1 {
  background: var(--violet-deep);
  color: #fff; text-align: center;
  padding: 112px 0 120px;
  position: relative; overflow: hidden;
}
.h1::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 70% at 78% 8%, rgba(107,67,148,.55), transparent 60%),
    radial-gradient(42% 70% at 14% 92%, rgba(87,165,219,.40), transparent 60%);
}
.h1 .wrap { position: relative; z-index: 1; }
.h1 h1 { font-size: clamp(40px, 6.4vw, 86px); letter-spacing: -0.03em; }
.h1 .sub { font-size: clamp(17px, 1.5vw, 20px); color: #D9CFEA; max-width: 620px; margin: 26px auto 36px; }
.h1 .cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.h1 .bars { width:max-content; margin: 0 auto 28px; }

/* ============= HERO 2 — Split éditorial ============= */
.h2 {
  background:
    linear-gradient(180deg, var(--violet-deep), var(--violet-deep-2));
  color: #fff; padding: 96px 0;
}
.h2 .grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.h2 h1 { font-size: clamp(38px, 4.8vw, 68px); }
.h2 .sub { font-size: 19px; color: #D9CFEA; margin: 24px 0 34px; max-width: 520px; }
.h2 .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.h2 .trust { display:flex; gap:22px; margin-top: 34px; flex-wrap: wrap; }
.h2 .trust div { font-size: 13.5px; color: var(--bleu-clair); display:flex; gap:8px; align-items:center; }
.h2 .trust svg { width:16px; height:16px; color: var(--bleu); }
/* visual panel */
.h2-visual {
  position: relative; aspect-ratio: 1/1; border-radius: var(--r-lg);
  background: var(--grad); overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
}
.h2-visual::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.h2-visual .mark { width: 58%; opacity: .96; filter: drop-shadow(0 20px 40px rgba(0,0,0,.3)); position: relative; }
.h2-chip {
  position: absolute; background: rgba(255,255,255,.96); color: var(--violet-deep);
  border-radius: 14px; padding: 12px 16px; font-weight: 700; font-size: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25); display:flex; align-items:center; gap:9px;
}
.h2-chip small { display:block; font-weight:600; color: var(--muted); font-size:11.5px; }
.h2-chip.c1 { top: 22px; left: 14px; }
.h2-chip.c2 { bottom: 26px; right: 10px; }
.h2-chip .dot { width:9px; height:9px; border-radius:50%; background: var(--bleu); }
.h2-chip .dot.v { background: var(--violet); }

/* ============= HERO 3 — Créatif full gradient ============= */
.h3 {
  position: relative; overflow: hidden; color:#fff;
  background: linear-gradient(125deg, #57A5DB 0%, #6B4394 55%, #2A1540 100%);
  padding: 120px 0 128px; text-align: center;
}
.h3::before {
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(30% 40% at 20% 30%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(34% 44% at 82% 24%, rgba(158,203,233,.35), transparent 60%),
    radial-gradient(40% 50% at 60% 90%, rgba(42,21,64,.55), transparent 60%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
.h3 .ghost {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: 58%; opacity: .12; pointer-events:none; mix-blend-mode: overlay;
}
.h3 .wrap { position: relative; z-index: 2; }
.h3 .eyebrow { color:#EAF4FB; letter-spacing:.28em; }
.h3 h1 { font-size: clamp(44px, 7vw, 100px); letter-spacing: -0.035em; text-shadow: 0 8px 40px rgba(0,0,0,.18); }
.h3 .sub { font-size: clamp(17px,1.6vw,21px); color: #F0EAF7; max-width: 600px; margin: 24px auto 36px; }
.h3 .cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.h3 .stats { display:flex; gap:40px; justify-content:center; margin-top:54px; flex-wrap:wrap; }
.h3 .stats b { font-family: var(--font-display); font-size: 30px; display:block; }
.h3 .stats span { font-size: 13px; color:#EAF4FB; letter-spacing:.04em; }

@media (max-width: 900px) {
  .h2 .grid { grid-template-columns: 1fr; gap: 40px; }
  .h2-visual { max-width: 420px; margin: 0 auto; }
}

/* ============================================================
   CARDS — Boutique (gauche) / Print (droite)
   ============================================================ */
.choice { background: var(--paper-2); }
.choice .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.pick {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  min-height: 460px; display: flex; flex-direction: column;
  justify-content: flex-end; text-align: center;
  padding: 44px 38px; color: #fff; isolation: isolate;
  border: 1px solid rgba(42,21,64,.06);
  box-shadow: var(--shadow-md);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.pick:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

/* background image layer (generative, low opacity) */
.pick .bg { position: absolute; inset: 0; z-index: -2; }
.pick .bg::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(27,18,38,.30) 0%, rgba(27,18,38,.78) 100%);
}
.pick.boutique .bg {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 30px),
    linear-gradient(150deg, #6B4394 0%, #2A1540 75%);
}
.pick.print .bg {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1.4px, transparent 1.6px) 0 0/22px 22px,
    linear-gradient(150deg, #57A5DB 0%, #2A1540 78%);
}
.pick .bg .ph-tag {
  position:absolute; top:16px; left:16px; z-index:1;
  font-family: var(--font-display); font-size:11px; letter-spacing:.12em;
  color: rgba(255,255,255,.5); border:1px dashed rgba(255,255,255,.3);
  padding:5px 9px; border-radius:6px; text-transform:uppercase;
}

.pick .label {
  align-self: center;
  font-family: var(--font-display); font-weight:600; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; white-space: nowrap;
  padding: 7px 15px; border-radius: 999px; margin-bottom: auto;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(4px);
}
.pick .picon {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 18px;
  display: grid; place-items: center; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(4px);
}
.pick .picon svg { width: 32px; height: 32px; color: #fff; }
.pick h3 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 12px; }
.pick p { font-size: 16px; color: #EFE9F6; max-width: 380px; margin: 0 auto 26px; }
.pick .domain { font-size: 13px; color: var(--bleu-clair); margin-bottom: 22px; font-weight:600; letter-spacing:.02em; }
.pick .btn { align-self: center; }

/* divider hint between cards */
.choice .vs {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index: 3; width: 56px; height: 56px; border-radius:50%;
  background:#fff; color:var(--violet); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; box-shadow: var(--shadow-md);
}
.choice .grid { position: relative; }

/* ---- Cards variant 2 : SPLIT (image top, content bottom solid) ---- */
body[data-cards="2"] .pick { justify-content: flex-start; text-align: left; padding: 0; background:#fff; color: var(--ink); }
body[data-cards="2"] .pick .bg { position: relative; inset:auto; height: 220px; z-index:0; }
body[data-cards="2"] .pick .bg::after { background: linear-gradient(180deg, transparent 40%, rgba(27,18,38,.25)); }
body[data-cards="2"] .pick .label { position:absolute; top:18px; left:18px; align-self:flex-start; margin:0; }
body[data-cards="2"] .pick .picon { position:absolute; top: 184px; left: 32px; margin:0; background: var(--grad); border:3px solid #fff; }
body[data-cards="2"] .pick .inner2 { padding: 44px 34px 36px; }
body[data-cards="2"] .pick h3 { color: var(--ink); }
body[data-cards="2"] .pick p { color: var(--muted); margin:0 0 22px; max-width:none; }
body[data-cards="2"] .pick .domain { color: var(--violet); }
body[data-cards="2"] .pick .btn { align-self:flex-start; }
.pick .inner2 { display: none; }
body[data-cards="2"] .pick .inner2 { display:block; }
body[data-cards="2"] .pick > .label,
body[data-cards="2"] .pick > .picon,
body[data-cards="2"] .pick > h3,
body[data-cards="2"] .pick > p,
body[data-cards="2"] .pick > .domain,
body[data-cards="2"] .pick > .btn { display:none; }

/* ---- Cards variant 3 : HOVER reveal zoom ---- */
body[data-cards="3"] .pick .bg { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
body[data-cards="3"] .pick:hover .bg { transform: scale(1.08); }
body[data-cards="3"] .pick .reveal {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s ease, opacity .35s ease, margin .45s ease;
  margin-bottom: 0;
}
body[data-cards="3"] .pick:hover .reveal { max-height: 120px; opacity: 1; margin-bottom: 22px; }
.pick .reveal { /* default (variant1) keep visible via p */ }
body:not([data-cards="3"]) .pick .reveal { max-height:none; opacity:1; }

@media (max-width: 820px) {
  .choice .grid { grid-template-columns: 1fr; }
  .choice .vs { display: none; }
  .pick { min-height: 380px; }
}

/* ============================================================
   COMMENT ÇA MARCHE (steps)  + features
   ============================================================ */
.how { background: var(--violet-deep); color:#fff; }
.how .steps { display:grid; grid-template-columns: repeat(4,1fr); gap: 26px; }
.step { text-align:center; padding: 8px; }
.step .num {
  font-family: var(--font-display); font-weight:700; font-size: 30px;
  width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 22px;
  display:grid; place-items:center; color:#fff;
}
.step:nth-child(1) .num { background: var(--bleu); }
.step:nth-child(2) .num { background: var(--violet); }
.step:nth-child(3) .num { background: var(--bleu); }
.step:nth-child(4) .num { background: var(--violet); }
.step h3 { font-size: 20px; margin-bottom: 10px; }
.step p { font-size: 15px; color: var(--violet-clair); margin:0; }
.how .section-head h2 { color:#fff; }
.how .section-head p { color: var(--violet-clair); }

.features { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.feature {
  background:#fff; border:1px solid var(--line); border-radius: var(--r-md);
  padding: 30px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature .fic { width:50px; height:50px; border-radius:14px; background: var(--grad);
  display:grid; place-items:center; margin-bottom:18px; }
.feature .fic svg { width:24px; height:24px; color:#fff; }
.feature h3 { font-size: 19px; margin-bottom: 9px; }
.feature p { font-size: 15px; color: var(--muted); margin:0; }

@media (max-width: 820px) {
  .how .steps { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: 1fr; }
}