/* Clearseen — feuille maison (base Northstar v1, 08/2026 ; adaptée 07/10/2026) */
:root {
  --acc:#1F5BFF; --acc-dark:#1646D1; --acc2:#5B8DFF; --acc-soft:#EEF3FF;
  --ink:#0B1220; --ink2:#5B6472; --line:rgba(11,18,32,.09);
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:#FFFFFF; color:#0B1220; overflow-x:hidden;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img, svg, video { max-width:100%; height:auto; }
h1,h2,h3,h4 { letter-spacing:-0.03em; }

/* ---------- surfaces ---------- */
.card {
  background:#fff; border:1px solid var(--line); border-radius:1rem;
  box-shadow:0 1px 2px rgba(11,18,32,.06);
  transition:box-shadow .22s ease-out, transform .22s ease-out, border-color .22s ease-out;
}
.card-hover:hover { box-shadow:0 16px 40px -16px rgba(11,18,32,.18); transform:translateY(-3px); border-color:rgba(11,18,32,.14); }
.shot {
  border:1px solid var(--line); border-radius:1rem; background:#fff; overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(11,18,32,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
.shot-bar { display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); background:#FAFBFC; }
.shot-bar i { width:10px; height:10px; border-radius:50%; background:#E3E8EF; display:block; }
.shot-url { margin-left:.5rem; font-size:.75rem; color:var(--ink2); background:#fff; border:1px solid var(--line); border-radius:.5rem; padding:.2rem .6rem; }
.phone { position:absolute; right:-6px; bottom:-18px; width:28%; border-radius:1.2rem; border:4px solid #0B1220; background:#0B1220; overflow:hidden;
  box-shadow:0 24px 50px -20px rgba(11,18,32,.45); }
.phone img { display:block; width:100%; }

/* ---------- boutons ---------- */
:where(.btn) { display:inline-flex; align-items:center; justify-content:center; }
.btn { gap:.5rem; border-radius:.75rem; font-weight:600; transition:all .2s ease-out; white-space:nowrap; }
.btn-primary { background:var(--acc); color:#fff; box-shadow:0 8px 24px -8px rgba(31,91,255,.5); }
.btn-primary:hover { background:var(--acc-dark); transform:translateY(-1px); box-shadow:0 12px 28px -8px rgba(31,91,255,.55); }
.btn-secondary { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-secondary:hover { border-color:rgba(11,18,32,.22); background:#FAFBFC; }
.btn-white { background:#fff; color:var(--ink); }
.btn-white:hover { background:#F4F5F7; transform:translateY(-1px); }

/* ---------- divers ---------- */
.eyebrow { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--acc); }
.pill { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line);
  background:#fff; border-radius:999px; padding:.35rem .9rem .35rem .4rem; font-size:.8rem; color:var(--ink2);
  box-shadow:0 1px 2px rgba(11,18,32,.05); transition:border-color .2s; }
.pill:hover { border-color:rgba(11,18,32,.2); }
.pill b { background:var(--acc); color:#fff; border-radius:999px; padding:.15rem .55rem; font-size:.7rem; font-weight:700; }
.hero-glow { background:radial-gradient(60% 55% at 50% 0%, rgba(31,91,255,.10), rgba(255,255,255,0) 70%); }
.logo-mark { background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; }
.wordmark { font-weight:800; letter-spacing:-0.02em; }
.wordmark em { font-style:normal; color:var(--acc); }
.link-arrow { color:var(--acc); font-weight:600; display:inline-flex; align-items:center; gap:.35rem; transition:gap .2s; }
.link-arrow:hover { gap:.6rem; }
.check { color:var(--acc); flex:none; }
.num { width:2.25rem; height:2.25rem; border-radius:.7rem; background:var(--acc-soft); color:var(--acc); font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.kpi { font-weight:800; letter-spacing:-0.04em; color:var(--ink); }
.soft { background:#F6F7F9; }
.tag { display:inline-flex; align-items:center; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); background:#F2F4F7; border-radius:999px; padding:.25rem .65rem; }
.price { font-weight:800; letter-spacing:-0.04em; }

/* ---------- vignettes de créations ---------- */
.site-card { display:block; overflow:hidden; }
.site-card .thumb { aspect-ratio:16/10; overflow:hidden; background:#F2F4F7; }
.site-card .thumb img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s ease-out; }
.site-card:hover .thumb img { transform:scale(1.03); }

/* ---------- apparition (avec filet de sécurité : jamais invisible plus de 900 ms) ---------- */
/* 13/10 : cascade. main.js pose --d (0, 90, 180 ms…) sur chaque .reveal selon son rang parmi ses frères. */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms), transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms); }
.reveal.in, html.no-js .reveal { opacity:1; transform:none; }

/* ---------- 13/10 : le site vivant ---------- */
/* titre : mot par mot, le bleu en dernier */
.mots i { font-style:normal; display:inline-block; opacity:0; transform:translateY(.45em) rotate(1.5deg); filter:blur(4px);
  animation:mot .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(.15s + var(--i,0) * .09s); }
html.no-js .mots i { animation:none; opacity:1; transform:none; filter:none; }
@keyframes mot { to { opacity:1; transform:none; filter:blur(0); } }
/* halo qui respire derrière le haut de page */
.aurora::before { animation:respire 18s ease-in-out infinite alternate; transform-origin:50% 30%; }
@keyframes respire { from { transform:translate3d(-2%,0,0) scale(1); opacity:.9; } to { transform:translate3d(2%,-3%,0) scale(1.08); opacity:1; } }
/* bouton principal du haut : une pulsation discrète, toutes les 3 s */
.btn-pulse { animation:pulse 3.2s ease-out 1.6s infinite; }
@keyframes pulse { 0% { box-shadow:0 8px 24px -8px rgba(31,91,255,.5), 0 0 0 0 rgba(31,91,255,.45); } 45%, 100% { box-shadow:0 8px 24px -8px rgba(31,91,255,.5), 0 0 0 14px rgba(31,91,255,0); } }
.btn-pulse:hover { animation:none; }
/* vignettes : au survol, on parcourt le site de haut en bas */
@media (hover:hover) {
  .site-card .thumb img { transition:object-position 4.5s cubic-bezier(.25,.1,.25,1), transform .5s ease-out; }
  .site-card:hover .thumb img { object-position:bottom; transform:scale(1.02); }
}
/* numéros des étapes : petit rebond à l'apparition */
.reveal.in .num { animation:pop .5s cubic-bezier(.2,.9,.3,1.4) both; animation-delay:calc(var(--d,0ms) + .25s); }
@keyframes pop { from { transform:scale(.6); opacity:0; } to { transform:none; opacity:1; } }
/* FAQ : ouverture fluide (grille 0fr -> 1fr) */
[data-faq-panel] { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
[data-faq-panel] > div { overflow:hidden; min-height:0; }
[data-faq-panel].open { grid-template-rows:1fr; }
html.no-js [data-faq-panel] { grid-template-rows:1fr; }
/* en-tête : le logo tourne un quart de tour au survol du nom */
#hdr a[aria-label] svg, #hdr a[aria-label] .logo-img { transition:transform .5s cubic-bezier(.2,.7,.2,1); }
#hdr a[aria-label]:hover svg, #hdr a[aria-label]:hover .logo-img { transform:rotate(-8deg) scale(1.06); }
/* liens de navigation : soulignement qui glisse */
#hdr nav a { position:relative; }
#hdr nav a::after { content:''; position:absolute; left:.75rem; right:.75rem; bottom:.35rem; height:2px; border-radius:2px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .25s ease-out; }
#hdr nav a:hover::after, #hdr nav a[aria-current]::after { transform:scaleX(1); }

/* ---------- navigation ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--acc); outline-offset:2px; border-radius:.4rem;
}
#hdr.scrolled { background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }

/* ---------- formulaires ---------- */
input, select, textarea {
  box-sizing:border-box; max-width:100%; width:100%; background:#fff;
  border:1px solid var(--line); border-radius:.7rem; padding:.7rem .9rem;
  color:var(--ink); font-size:1rem; font-family:inherit; transition:border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color:#9AA3AF; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(31,91,255,.14); }
label { display:block; font-size:.85rem; font-weight:500; color:var(--ink2); margin-bottom:.4rem; }
input[type=checkbox] { width:1rem; height:1rem; accent-color:var(--acc); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- FAQ ---------- */
[data-faq] button { width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 1.25rem; font-weight:600; background:none; border:0; font-family:inherit; font-size:1rem; color:var(--ink); cursor:pointer; }
[data-faq-icon] { transition:transform .2s; color:var(--acc); flex:none; }

/* ---------- prose ---------- */
.prose-fr p { color:var(--ink2); line-height:1.75; margin-bottom:1.15rem; }
.prose-fr h2 { font-size:1.45rem; font-weight:700; color:var(--ink); margin:2.4rem 0 .9rem; }
.prose-fr h3 { font-size:1.15rem; font-weight:700; color:var(--ink); margin:1.9rem 0 .7rem; }
.prose-fr li { color:var(--ink2); line-height:1.7; padding-left:1.4rem; position:relative; margin-bottom:.5rem; }
.prose-fr li::before { content:''; position:absolute; left:.35rem; top:.65rem; width:5px; height:5px; border-radius:50%; background:var(--acc); }
.prose-fr strong { color:var(--ink); font-weight:600; }
.prose-fr a { color:var(--acc); text-decoration:underline; text-underline-offset:3px; }
.trou { background:#FFF4D6; color:#7A5200; border-radius:.3rem; padding:0 .3rem; font-weight:600; }

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
  .mots i { opacity:1; transform:none; filter:none; }
  .reveal.in .num { opacity:1; transform:none; }
}

/* ---------- mobile ---------- */
#barre-mobile.on { transform:none; }
@media (max-width: 639px) {
  body.has-barre { padding-bottom:4.5rem; }
  .shot-url { max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ---------- frise A → Z (page Méthode) ---------- */
.az { display:flex; align-items:center; gap:.75rem; }
.az-letter { font-weight:800; font-size:2.2rem; letter-spacing:-0.04em; color:var(--acc); flex:none; width:2.6rem; text-align:center; }
.az-track { flex:1; display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; position:relative; }
.az-track::before { content:''; position:absolute; left:1.5rem; right:1.5rem; top:1.6rem; height:2px; background:linear-gradient(90deg,var(--acc),var(--acc2)); opacity:.35; }
.az-step { display:flex; flex-direction:column; align-items:center; gap:.5rem; position:relative; }
.az-ico { width:3.2rem; height:3.2rem; border-radius:50%; background:#fff; border:2px solid var(--acc); color:var(--acc); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -10px rgba(31,91,255,.5); }
.az-lbl { font-size:.78rem; font-weight:600; color:var(--ink2); text-align:center; line-height:1.2; }
@media (max-width: 767px) {
  .az { flex-direction:column; align-items:stretch; }
  .az-letter { width:auto; }
  .az-track { grid-template-columns:repeat(4,1fr); row-gap:1rem; }
  .az-track::before { display:none; }
  .az-ico { width:2.8rem; height:2.8rem; }
}
section[id] { scroll-margin-top:5rem; }

/* ---------- Génération en direct (composant animé) ---------- */
.gen { background:#0B1220; color:#E6EAF2; border-radius:1.1rem; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 90px -40px rgba(11,18,32,.6), 0 0 0 1px rgba(31,91,255,.15), 0 0 80px -30px rgba(31,91,255,.55); text-align:left; position:relative; }
.gen::before { content:''; position:absolute; inset:0; background:
  radial-gradient(60% 50% at 80% 0%, rgba(31,91,255,.22), transparent 60%),
  radial-gradient(40% 40% at 10% 100%, rgba(91,141,255,.14), transparent 60%); pointer-events:none; }
.gen-bar { display:flex; align-items:center; gap:.45rem; padding:.7rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); font-size:.75rem; color:#9AA3AF; position:relative; }
.gen-bar i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14); display:block; }
.gen-title { margin-left:.5rem; }
.gen-live { margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:#8DB0FF; letter-spacing:.06em; text-transform:uppercase; font-size:.65rem; }
.gen-live b { width:7px; height:7px; border-radius:50%; background:#3B82F6; box-shadow:0 0 0 0 rgba(59,130,246,.6); animation:gen-pulse 1.6s infinite; }
@keyframes gen-pulse { 0%{box-shadow:0 0 0 0 rgba(59,130,246,.6)} 70%{box-shadow:0 0 0 8px rgba(59,130,246,0)} 100%{box-shadow:0 0 0 0 rgba(59,130,246,0)} }
.gen-body { display:grid; grid-template-columns:1.05fr 1fr; gap:1.25rem; padding:1.25rem; position:relative; }
.gen-input { display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:.7rem; padding:.7rem .9rem; font-size:.95rem; min-height:2.9rem; transition:border-color .3s, box-shadow .3s; }
.gen.p1 .gen-input { border-color:rgba(91,141,255,.7); box-shadow:0 0 0 3px rgba(31,91,255,.18); }
.gen-prompt { color:#5B8DFF; font-weight:700; }
.gen-typed { white-space:nowrap; overflow:hidden; }
.gen-caret { width:2px; height:1.1em; background:#8DB0FF; display:inline-block; animation:gen-blink 1s steps(2) infinite; }
.gen.p2 .gen-caret, .gen.p3 .gen-caret, .gen.p4 .gen-caret { display:none; }
@keyframes gen-blink { to { opacity:0 } }
.gen-btn { margin-top:.7rem; width:100%; border:0; border-radius:.7rem; padding:.75rem 1rem; font:inherit; font-weight:700; font-size:.95rem; color:#fff; cursor:default;
  background:linear-gradient(135deg,#1F5BFF,#5B8DFF); box-shadow:0 10px 30px -10px rgba(31,91,255,.8); transition:transform .15s, filter .3s; }
.gen.p1b .gen-btn { transform:scale(.97); filter:brightness(1.15); }
.gen.p2 .gen-btn, .gen.p3 .gen-btn, .gen.p4 .gen-btn { opacity:.45; }
.gen-log { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.45rem; font-size:.84rem; color:#C7CEDB; min-height:11.5rem; }
.gen-log li { display:flex; align-items:center; gap:.55rem; opacity:0; transform:translateX(-8px); transition:opacity .4s, transform .4s; }
.gen-log li.on { opacity:1; transform:none; }
.gen-log b { color:#fff; }
.gen-dot { width:7px; height:7px; border-radius:50%; background:#5B8DFF; flex:none; box-shadow:0 0 10px rgba(91,141,255,.8); }
.gen-ok { color:#4ADE80; }
.gen-swatch { display:inline-block; width:12px; height:12px; border-radius:3px; margin:0 .25rem; vertical-align:-1px; border:1px solid rgba(255,255,255,.3); }
.gen-screen { position:relative; aspect-ratio:16/10; border-radius:.7rem; overflow:hidden; background:#121a2b; border:1px solid rgba(255,255,255,.1); }
.gen-wire { position:absolute; inset:0; padding:6%; }
.gen-wire .w { position:absolute; background:rgba(255,255,255,.1); border-radius:4px; transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.8,.2,1), background .5s; }
.w-nav { left:6%; top:6%; width:88%; height:5%; }
.w-h1 { left:6%; top:17%; width:38%; height:7%; }
.w-h2 { left:6%; top:26%; width:30%; height:7%; background:rgba(91,141,255,.45) !important; }
.w-p { left:6%; top:37%; width:40%; height:3.5%; }
.w-p2 { left:6%; top:42.5%; width:34%; height:3.5%; }
.w-btn { left:6%; top:51%; width:18%; height:7%; background:rgba(31,91,255,.9) !important; border-radius:999px !important; }
.w-img { left:52%; top:17%; width:42%; height:41%; background:rgba(255,255,255,.14) !important; }
.w-c1, .w-c2, .w-c3 { top:68%; width:27%; height:24%; }
.w-c1 { left:6%; } .w-c2 { left:36.5%; } .w-c3 { left:67%; }
.gen.p3 .w-nav { transform:scaleX(1); transition-delay:.0s }
.gen.p3 .w-h1 { transform:scaleX(1); transition-delay:.15s }
.gen.p3 .w-h2 { transform:scaleX(1); transition-delay:.3s }
.gen.p3 .w-p { transform:scaleX(1); transition-delay:.45s }
.gen.p3 .w-p2 { transform:scaleX(1); transition-delay:.55s }
.gen.p3 .w-btn { transform:scaleX(1); transition-delay:.7s }
.gen.p3 .w-img { transform:scaleX(1); transition-delay:.85s }
.gen.p3 .w-c1 { transform:scaleX(1); transition-delay:1.1s }
.gen.p3 .w-c2 { transform:scaleX(1); transition-delay:1.25s }
.gen.p3 .w-c3 { transform:scaleX(1); transition-delay:1.4s }
.gen-scan { position:absolute; left:0; right:0; height:2px; top:-2px; background:linear-gradient(90deg,transparent,#8DB0FF,transparent); box-shadow:0 0 18px 4px rgba(91,141,255,.45); opacity:0; }
.gen.p3 .gen-scan { opacity:1; animation:gen-scan 2.6s linear 1 forwards; }
@keyframes gen-scan { from { top:0 } to { top:100% } }
.gen-final { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transform:scale(1.03); transition:opacity .9s ease, transform 1.2s ease; }
.gen.p4 .gen-final { opacity:1; transform:none; }
.gen.p4 .gen-wire { opacity:0; transition:opacity .6s; }
.gen-badge { position:absolute; right:.6rem; top:.6rem; background:#4ADE80; color:#052e16; font-weight:800; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:.3rem .65rem; opacity:0; transform:translateY(-6px); transition:opacity .4s .5s, transform .4s .5s; }
.gen.p4 .gen-badge { opacity:1; transform:none; }
.gen-steps { display:flex; justify-content:space-between; gap:.4rem; margin-top:.8rem; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5B6472; }
.gen-steps span { position:relative; padding-top:.6rem; flex:1; text-align:center; transition:color .3s; }
.gen-steps span::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; border-radius:2px; background:rgba(255,255,255,.1); transition:background .3s; }
.gen[data-s="1"] [data-s="1"], .gen[data-s="2"] [data-s="2"], .gen[data-s="3"] [data-s="3"], .gen[data-s="4"] [data-s="4"] { color:#fff; }
.gen[data-s="1"] [data-s="1"]::before, .gen[data-s="2"] [data-s="1"]::before, .gen[data-s="2"] [data-s="2"]::before,
.gen[data-s="3"] [data-s="1"]::before, .gen[data-s="3"] [data-s="2"]::before, .gen[data-s="3"] [data-s="3"]::before,
.gen[data-s="4"] span::before { background:linear-gradient(90deg,#1F5BFF,#8DB0FF); }
@media (max-width: 767px) {
  .gen-body { grid-template-columns:1fr; gap:1rem; padding:1rem; }
  .gen-log { min-height:0; font-size:.8rem; }
  .gen-log li[data-step="3"] { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .gen .gen-final { opacity:1 !important; transform:none !important; }
  .gen .gen-wire, .gen-caret { display:none !important; }
  .gen-log li { opacity:1 !important; transform:none !important; }
  .gen-badge { opacity:1 !important; transform:none !important; }
}

/* ---------- ambiance : halos, reflets, bordures lumineuses ---------- */
.aurora { position:relative; }
.aurora::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:
  radial-gradient(42% 38% at 18% 18%, rgba(31,91,255,.16), transparent 70%),
  radial-gradient(36% 34% at 82% 12%, rgba(125,211,252,.22), transparent 70%),
  radial-gradient(40% 40% at 60% 90%, rgba(167,139,250,.14), transparent 70%); filter:blur(10px); }
.aurora::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(11,18,32,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(11,18,32,.045) 1px, transparent 1px); background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent); mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent); }
.btn-primary { background:linear-gradient(135deg,#1F5BFF 0%,#3B74FF 60%,#5B8DFF 100%); position:relative; overflow:hidden; }
.btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform:translateX(-120%); transition:transform .6s; }
.btn-primary:hover::after { transform:translateX(120%); }
.card-glow { position:relative; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg, rgba(31,91,255,.55), rgba(125,211,252,.35), rgba(167,139,250,.35)) border-box; border:1px solid transparent; }
.eyebrow::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--acc); margin-right:.5rem; vertical-align:middle; box-shadow:0 0 0 3px rgba(31,91,255,.15); }

/* génération : attente et sources trouvées (phases 1 et 2) */
.gen-wait { position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#5B6472; letter-spacing:.04em;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size:18px 18px; transition:opacity .4s; }
.gen.p2 .gen-wait, .gen.p3 .gen-wait, .gen.p4 .gen-wait { opacity:0; }
.gen-sources { position:absolute; inset:0; padding:7%; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; align-content:center; opacity:0; transition:opacity .4s; pointer-events:none; }
.gen.p2 .gen-sources { opacity:1; }
.gen.p3 .gen-sources, .gen.p4 .gen-sources { opacity:0; }
.gs { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:.6rem; padding:.55rem .7rem; font-size:.72rem; color:#C7CEDB; display:flex; align-items:center; gap:.5rem; opacity:0; transform:translateY(8px) scale(.98); transition:opacity .4s, transform .4s; }
.gen.p2 .gs { opacity:1; transform:none; }
.gen.p2 .gs-google { transition-delay:.25s } .gen.p2 .gs-photos { transition-delay:.75s } .gen.p2 .gs-fb { transition-delay:1.25s } .gen.p2 .gs-color { transition-delay:1.75s }
.gs b { color:#fff; }
.gs-google { grid-column:1 / -1; }
.gs-g { width:26px; height:26px; border-radius:50%; background:#fff; color:#0B1220; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:.9rem; }
.gs-stars { color:#FBBF24; letter-spacing:-.05em; }
.gs-photos img { width:34px; height:34px; object-fit:cover; border-radius:.35rem; border:1px solid rgba(255,255,255,.15); }
.gs-photos span { font-weight:700; color:#8DB0FF; }
.gs-f { width:22px; height:22px; border-radius:.35rem; background:#1877F2; color:#fff; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:.85rem; }
@media (max-width: 767px) { .gen-sources { padding:5%; gap:.45rem; } .gs { font-size:.68rem; padding:.45rem .55rem; } }

.gs-ig { background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF); position:relative; }
.gs-ig::before { content:''; position:absolute; inset:5px; border:1.6px solid #fff; border-radius:5px; }
.gs-ig::after { content:''; position:absolute; width:6px; height:6px; border:1.6px solid #fff; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.quote { border-left:3px solid var(--acc); background:var(--acc-soft); border-radius:0 .8rem .8rem 0; padding:1rem 1.25rem; margin:1.75rem 0; color:var(--ink); font-size:1.05rem; font-weight:600; line-height:1.55; }

/* Page Essayer : préparation puis site dans la page */
#ess-etapes li { display:flex; align-items:center; gap:.6rem; opacity:.35; transition:opacity .4s; }
#ess-etapes li .dot { width:8px; height:8px; border-radius:50%; background:var(--line); flex:none; transition:background .3s, box-shadow .3s; }
#ess-etapes li.on { opacity:1; }
#ess-etapes li.on .dot { background:var(--acc); box-shadow:0 0 10px rgba(31,91,255,.6); }
[data-ess-vue][aria-pressed="true"] { background:var(--acc-soft); border-color:var(--acc); color:var(--acc); }
#ess-resultat, #ess-vue { scroll-margin-top: 5.5rem; }
#ess-barre .btn { font-size:.85rem; }
.gs-cp { background:#16A34A; }