/* Jawab — page publique, style « verre » (glassmorphism). Chargé APRÈS admin.css : il surcharge seulement l'apparence de .site. */

.site{
  --g-fill:rgba(255,255,255,.52);
  --g-fill-strong:rgba(255,255,255,.72);
  --g-border:rgba(255,255,255,.75);
  --g-shadow:0 10px 40px rgba(60,50,160,.16),inset 0 1px 0 rgba(255,255,255,.85);
  --g-text:#171a33;
  --g-muted:#4b4f70;
  --g-input:rgba(255,255,255,.62);
  --g-base:#eaecff;
  --b1:#7c6cff;--b2:#19c4b0;--b3:#ff8fc2;--b-opacity:.6;
  background:var(--g-base);color:var(--g-text);
  position:relative;isolation:isolate;overflow-x:hidden;
}
:root[data-theme="dark"] .site{
  --g-fill:rgba(255,255,255,.07);
  --g-fill-strong:rgba(255,255,255,.12);
  --g-border:rgba(255,255,255,.16);
  --g-shadow:0 12px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);
  --g-text:#f3f4ff;
  --g-muted:#b6bad9;
  --g-input:rgba(255,255,255,.08);
  --g-base:#090b1d;
  --b1:#5a49e6;--b2:#0fa596;--b3:#c23d8c;--b-opacity:.5;
}

/* ── Arrière-plan : taches de couleur floutées (le « verre » a besoin de quelque chose à flouter) ── */
.glass-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glass-bg span{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--b-opacity);will-change:transform;animation:drift 22s ease-in-out infinite alternate}
.glass-bg .b1{width:52vmax;height:52vmax;background:var(--b1);inset-block-start:-18vmax;inset-inline-start:-14vmax}
.glass-bg .b2{width:46vmax;height:46vmax;background:var(--b2);inset-block-end:-16vmax;inset-inline-end:-12vmax;animation-delay:-8s}
.glass-bg .b3{width:30vmax;height:30vmax;background:var(--b3);inset-block-start:38%;inset-inline-end:8%;opacity:calc(var(--b-opacity) * .7);animation-delay:-14s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vmax,3vmax,0) scale(1.12)}}

/* ── Surfaces en verre ── */
.site .site-head,.site .chat,.site .s-card,.site .s-steps li,.site .plan-card,.site .card,.site .faq details,.site .s-badge,.site .bub-c{
  background:var(--g-fill);
  border:1px solid var(--g-border);
  box-shadow:var(--g-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site .site-head,.site .chat,.site .s-card,.site .s-steps li,.site .plan-card,.site .card,.site .faq details,.site .bub-c{background:var(--g-fill-strong)}
}

/* ── En-tête flottant en forme de pilule ── */
.site .site-head{top:12px;margin:12px auto 0;width:calc(100% - 24px);max-width:1040px;border-radius:99px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--g-border)}
.site .site-brand{color:var(--g-text)}
.site .lang-btn,.site .btn-ghost{background:var(--g-fill);border:1px solid var(--g-border);color:var(--g-text);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:99px}
.site .lang-btn:hover,.site .btn-ghost:hover{background:var(--g-fill-strong)}

/* ── Héros ── */
.site .s-hero{padding:48px 0 32px}
@media(min-width:900px){.site .s-hero{padding:84px 0 56px}}
.site .s-badge{color:var(--g-text);border-radius:99px;padding:6px 16px;font-size:.85rem;letter-spacing:.01em}
.site .s-badge::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#7c6cff,#19c4b0);margin-inline-end:8px;box-shadow:0 0 10px #19c4b0}
.site .s-hero h1{
  background:linear-gradient(120deg,#171a33 10%,#4338ca 55%,#0d9488 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding-bottom:.1em;
}
:root[data-theme="dark"] .site .s-hero h1{background-image:linear-gradient(120deg,#ffffff 5%,#cfcaff 50%,#6ee7d6 95%)}
.site .s-hero p,.site .s-hero small,.site .muted,.site .s-card p,.site .s-steps p,.site .faq p,.site .hint-line,.site .site-foot{color:var(--g-muted)}
.site .s-hero small{font-size:.88rem}

/* ── Boutons : dégradé lumineux ── */
.site .btn-primary{
  background:linear-gradient(135deg,#6a5cf0 0%,#0fb5a2 100%);color:#fff;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 30px rgba(106,92,240,.42),inset 0 1px 0 rgba(255,255,255,.4);
  border-radius:99px;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.site .btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 36px rgba(106,92,240,.55),inset 0 1px 0 rgba(255,255,255,.45)}
.site .btn-lg{min-height:54px;padding:0 28px}

/* ── Carte de conversation ── */
.site .chat{border-radius:28px;padding:22px;position:relative}
.site .chat::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,0) 40%,rgba(25,196,176,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.8}
.site .chat figcaption{color:var(--g-muted);border-bottom-color:var(--g-border)}
.site .chat small{color:var(--g-muted)}
.s-hero .chat .bub{box-shadow:none}
.s-hero .chat .bub-c{color:var(--g-text);border-radius:20px;border-end-start-radius:6px}
.s-hero .chat .bub-a{background:linear-gradient(135deg,#6a5cf0,#0fb5a2);border:1px solid rgba(255,255,255,.3);border-radius:20px;border-end-end-radius:6px;box-shadow:0 8px 22px rgba(106,92,240,.35)}

/* ── Sections ── */
.site .s-sec h2{color:var(--g-text);letter-spacing:-.01em}
.site .s-card,.site .plan-card{border-radius:24px;transition:transform .22s ease,border-color .22s ease}
.site .s-card:hover,.site .plan-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.95)}
:root[data-theme="dark"] .site .s-card:hover,:root[data-theme="dark"] .site .plan-card:hover{border-color:rgba(255,255,255,.34)}
.site .s-card h3,.site .plan-card h3,.site .s-steps strong,.site .faq summary{color:var(--g-text)}
.site .s-ic{background:linear-gradient(135deg,rgba(124,108,255,.28),rgba(25,196,176,.28));color:var(--g-text);border:1px solid var(--g-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.site .s-steps li{border-radius:22px}
.site .how-n{background:linear-gradient(135deg,#6a5cf0,#0fb5a2);color:#fff;box-shadow:0 6px 16px rgba(106,92,240,.4)}
.site .plan-price{color:var(--g-text);background:linear-gradient(120deg,#4338ca,#0d9488);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-theme="dark"] .site .plan-price{background-image:linear-gradient(120deg,#cfcaff,#6ee7d6)}
.site .plan-price .per{-webkit-text-fill-color:var(--g-muted);color:var(--g-muted)}
.site .plan-feats .ic{color:#19c4b0}

/* ── Formulaire en verre ── */
.site .s-join .form-card{border-radius:28px;padding:28px}
.site .s-join h2{color:var(--g-text)}
.site label{color:var(--g-text)}
.site input[type=text],.site input[type=tel],.site input[type=email],.site input[type=password],.site textarea{
  background:var(--g-input);border:1px solid var(--g-border);color:var(--g-text);border-radius:16px;min-height:50px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.site input::placeholder{color:var(--g-muted);opacity:.7}
.site input:focus{border-color:#7c6cff;outline:3px solid rgba(124,108,255,.35)}
.site .field-error{color:#e11d48}
:root[data-theme="dark"] .site .field-error{color:#ff8fa3}
.site .alert-danger{background:rgba(225,29,72,.12);border:1px solid rgba(225,29,72,.35);color:#be123c}
:root[data-theme="dark"] .site .alert-danger{color:#ff9bb0}

/* ── FAQ ── */
.site .faq details{border-radius:20px;transition:background .2s}
.site .faq details[open]{background:var(--g-fill-strong)}
.site .faq summary{list-style:none}
.site .faq summary::-webkit-details-marker{display:none}
.site .faq summary::after{content:"+";margin-inline-start:auto;font-size:1.4rem;font-weight:400;color:var(--g-muted);transition:transform .2s}
.site .faq details[open] summary::after{transform:rotate(45deg)}

/* ── Pied de page ── */
.site .site-foot{border-top-color:var(--g-border)}
.site .link{color:#5b50e6}
:root[data-theme="dark"] .site .link{color:#b7b1ff}

/* ── Page de remerciement (même verre, carte centrée) ── */
.site-center{display:grid;place-items:center;min-height:100vh;padding:20px}
.site-center .auth-card{background:var(--g-fill);border:1px solid var(--g-border);box-shadow:var(--g-shadow);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);border-radius:32px;padding:40px 28px}
.site-center h1,.site-center .muted{color:var(--g-text)}
.site-center .muted{color:var(--g-muted)}

@media(prefers-reduced-motion:reduce){.glass-bg span{animation:none}.site .btn-primary,.site .s-card,.site .plan-card{transition:none}}

/* ── Mode léger pour téléphones : pas de flou GPU ni d'animation (un téléphone modeste peut faire planter l'onglet) ── */
@media (max-width:899px){
  .glass-bg span{filter:none;animation:none;will-change:auto;opacity:.5}
  .glass-bg .b1{background:radial-gradient(closest-side,var(--b1),transparent)}
  .glass-bg .b2{background:radial-gradient(closest-side,var(--b2),transparent)}
  .glass-bg .b3{background:radial-gradient(closest-side,var(--b3),transparent)}
  .site .site-head,.site .chat,.site .s-card,.site .s-steps li,.site .plan-card,.site .card,.site .faq details,.site .s-badge,.site .bub-c,
  .site .lang-btn,.site .btn-ghost,.site input[type=text],.site input[type=tel],.site input[type=email],.site input[type=password],.site textarea,
  .site-center .auth-card{-webkit-backdrop-filter:none;backdrop-filter:none}
  .site .site-head,.site .chat,.site .s-card,.site .s-steps li,.site .plan-card,.site .card,.site .faq details,.site-center .auth-card{background:var(--g-fill-strong)}
  .site .chat::before{display:none}
  .site .btn-primary{box-shadow:0 6px 16px rgba(106,92,240,.35)}
}