/* ===========================================================
   Simplissite — Feuille de styles principale
   Plan : tokens · base · layout · composants (par section) · responsive
   Couleurs et typo centralisées dans :root pour tout modifier au même endroit.
   =========================================================== */

:root{
  /* Fonds */
  --bg:        #0E0C0A;
  --bg-alt:    #100E0B;
  --bg-deep:   #0B0908;
  --surface:   #16130F;
  --surface-2: #211C18;
  --line:      rgba(255,255,255,.07);
  --line-soft: rgba(255,255,255,.06);

  /* Texte */
  --ink:    #F7F2EA;
  --ink-2:  #F5F0E8;
  --text:   #BDB4A8;
  --text-2: #A89F94;
  --muted:  #9C9488;
  --muted-2:#C7BEB2;

  /* Marque */
  --primary:    #2F7AD1;
  --primary-d:  #1F5FAE;
  --primary-dd: #1A4E8C;
  --blue-soft:  #7FB4E8;
  --accent:     #E8A23D;
  --green:      #7FC8A0;
  --red:        #E2483D;

  /* Typo */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body:    'Hanken Grotesk', sans-serif;

  /* Divers */
  --radius:    14px;
  --radius-lg: 18px;
  --maxw:      1180px;
  --header-h:  68px;
}

/* --- Base --- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; transition:color .18s ease, background .18s ease, filter .18s ease; }
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-family:var(--font-display); }
p{ margin:0; }
[id]{ scroll-margin-top:calc(var(--header-h) + 20px); }

/* --- Layout & helpers --- */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:96px 0; }
.section--alt{ background:var(--bg-alt); border-top:1px solid var(--line-soft); }

.eyebrow{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 56px; }
.section-head h2{ font-size:42px; line-height:1.1; letter-spacing:-.02em; font-weight:700; text-wrap:balance; }

.check{ color:var(--green); margin-right:8px; }
.list-checks{ display:flex; flex-direction:column; gap:9px; }
.list-checks span{ font-size:14px; color:var(--muted-2); }

/* --- Boutons --- */
.btn{ display:inline-block; font-family:var(--font-body); font-weight:600; font-size:15px; border-radius:11px; padding:11px 20px; cursor:pointer; border:none; text-align:center; }
.btn-lg{ font-size:17px; padding:17px 30px; border-radius:13px; }
.btn-primary{ color:#fff; background:linear-gradient(180deg,var(--primary),var(--primary-d)); box-shadow:0 8px 22px rgba(47,122,209,.4); }
.btn-primary.btn-lg{ box-shadow:0 12px 30px rgba(47,122,209,.5); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ color:var(--ink-2); background:rgba(255,255,255,.04); border:1px solid rgba(245,240,232,.22); }
.btn-ghost:hover{ background:rgba(255,255,255,.09); }
.btn-soft{ color:var(--ink-2); background:rgba(255,255,255,.05); border:1px solid rgba(245,240,232,.2); }
.btn-soft:hover{ background:rgba(255,255,255,.1); }
.btn-block{ display:block; width:100%; }

/* --- Marque / logo --- */
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:38px; height:38px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.35); overflow:hidden; }
.brand-mark img{ width:84%; height:84%; object-fit:contain; display:block; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--ink-2); letter-spacing:-.01em; }

/* --- Header --- */
.header{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(14,12,10,.78); border-bottom:1px solid var(--line-soft); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.header__right{ display:flex; align-items:center; gap:30px; }
.nav{ display:flex; gap:30px; font-size:15px; }
.nav a{ color:var(--muted-2); }
.nav a:hover{ color:var(--ink); }
.burger{ display:none; align-items:center; justify-content:center; flex-direction:column; gap:4px; width:42px; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); cursor:pointer; }
.burger span{ width:18px; height:2px; background:var(--ink); border-radius:2px; }

/* --- Menu mobile --- */
.mobile-menu{ position:fixed; inset:0; z-index:60; background:rgba(10,9,7,.96); backdrop-filter:blur(8px); display:none; flex-direction:column; padding:24px; }
.mobile-menu.is-open{ display:flex; }
.mobile-menu__close{ align-self:flex-end; width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--ink); font-size:22px; cursor:pointer; }
.mobile-menu__nav{ display:flex; flex-direction:column; gap:6px; margin-top:24px; font-family:var(--font-display); }
.mobile-menu__nav a{ color:var(--ink); font-size:28px; font-weight:600; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.07); }

/* --- Hero --- */
.hero{ position:relative; overflow:hidden; background:
   radial-gradient(115% 70% at 50% -8%, rgba(47,122,209,.24), transparent 56%),
   radial-gradient(60% 50% at 84% 108%, rgba(232,162,61,.12), transparent 60%); }
.hero__beam{ position:absolute; width:2px; }
.hero__beam--1{ top:0; left:16%; height:42%; background:linear-gradient(180deg, rgba(75,150,235,0), rgba(75,150,235,.5), rgba(75,150,235,0)); animation:glowpulse 5s ease-in-out infinite; }
.hero__beam--2{ bottom:8%; right:13%; height:34%; background:linear-gradient(180deg, rgba(232,162,61,0), rgba(232,162,61,.45), rgba(232,162,61,0)); animation:glowpulse 6s ease-in-out infinite; }
.hero__inner{ position:relative; max-width:980px; margin:0 auto; text-align:center; padding:84px 24px 0; }
.badge{ display:inline-flex; align-items:center; gap:9px; max-width:100%; padding:8px 16px; border-radius:999px; border:1px solid rgba(232,162,61,.32); background:rgba(232,162,61,.08); color:var(--accent); font-size:13px; font-weight:600; letter-spacing:.04em; margin-bottom:26px; animation:fadeUp .6s both; }
.badge__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.hero h1{ font-weight:700; font-size:64px; line-height:1.04; letter-spacing:-.025em; text-wrap:balance; animation:fadeUp .6s .05s both; }
.hero__lead{ font-size:20px; line-height:1.55; color:var(--text); max-width:620px; margin:24px auto 0; text-wrap:pretty; animation:fadeUp .6s .1s both; }
.cta-row{ display:flex; gap:14px; justify-content:center; margin-top:36px; animation:fadeUp .6s .15s both; }
.proofs{ display:flex; flex-wrap:wrap; gap:26px; justify-content:center; margin-top:24px; font-size:14px; color:var(--muted); animation:fadeUp .6s .2s both; }
.proofs span{ display:flex; align-items:center; gap:7px; }

/* Maquette navigateur décorative */
.mockup{ position:relative; z-index:2; width:760px; max-width:calc(100% - 48px); margin:54px auto 0; padding-bottom:80px; animation:floaty 7s ease-in-out infinite; }
.mockup__glow{ position:absolute; inset:-30px -20px 40px; background:radial-gradient(60% 55% at 50% 38%, rgba(47,122,209,.4), transparent 70%); filter:blur(30px); }
.mockup__window{ position:relative; border-radius:14px; overflow:hidden; background:#1A1613; border:1px solid rgba(255,255,255,.1); box-shadow:0 40px 90px rgba(0,0,0,.55); }
.mockup__bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; background:var(--surface-2); border-bottom:1px solid var(--line-soft); }
.dot{ width:11px; height:11px; border-radius:50%; }
.dot--r{ background:#E2483D; } .dot--y{ background:#E8A23D; } .dot--g{ background:#7FC8A0; }
.mockup__url{ margin-left:14px; padding:5px 14px; border-radius:7px; background:rgba(255,255,255,.05); color:#8a8378; font-size:12px; }
.mockup__body{ padding:26px 28px 30px; }
.mockup__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.mockup__cols{ display:flex; gap:22px; }
.skl{ border-radius:5px; background:rgba(245,240,232,.2); }
.mockup__art{ flex:1; height:150px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, rgba(255,255,255,.07) 12px 24px); }
.mockup__art span{ font-family:ui-monospace,Menlo,monospace; font-size:11px; color:rgba(245,240,232,.45); }

/* --- Barre de confiance --- */
.trust{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--bg-alt); }
.trust__grid{ padding:34px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.trust__item{ text-align:center; }
.trust__num{ font-family:var(--font-display); font-size:34px; font-weight:700; line-height:1.2; }
.trust__label{ font-size:14px; color:var(--muted); margin-top:8px; }

/* --- Comparatif problème / promesse --- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.compare__card{ padding:36px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line-soft); }
.compare__card--win{ position:relative; overflow:hidden; background:linear-gradient(180deg, rgba(47,122,209,.12), rgba(47,122,209,.03)); border:1px solid rgba(47,122,209,.3); }
.compare__card--win::before{ content:""; position:absolute; inset:-40% 40% 60% -10%; background:radial-gradient(circle, rgba(47,122,209,.25), transparent 70%); filter:blur(20px); }
.compare__title{ position:relative; font-size:14px; font-weight:700; margin-bottom:22px; color:var(--muted); }
.compare__card--win .compare__title{ color:var(--blue-soft); }
.compare__list{ position:relative; display:flex; flex-direction:column; gap:18px; }
.line{ display:flex; gap:14px; align-items:flex-start; }
.line__icon{ font-size:18px; line-height:1.4; }
.line__icon--no{ color:var(--red); }
.line__icon--yes{ color:var(--green); }
.line strong{ display:block; font-weight:600; color:#E3DACE; }
.compare__card--win .line strong{ color:#F2ECE2; }
.line p{ font-size:15px; color:var(--muted); margin-top:3px; }
.compare__card--win .line p{ color:var(--text); }

/* --- Cartes (services) --- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{ padding:32px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); }
.card--hover{ transition:transform .25s, border-color .25s; }
.card--hover:hover{ transform:translateY(-6px); border-color:rgba(47,122,209,.4); }
.card__icon{ width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.icon-blue{ background:rgba(47,122,209,.14); }
.icon-green{ background:rgba(127,200,160,.14); }
.icon-amber{ background:rgba(232,162,61,.14); }
.card h3{ font-size:23px; font-weight:600; margin-bottom:10px; }
.card__desc{ font-size:15px; line-height:1.55; color:var(--text-2); margin-bottom:18px; }
.card__link{ font-size:15px; font-weight:600; color:var(--blue-soft); }
.card__link:hover{ color:var(--ink); }

/* --- Pourquoi (features) --- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.feature{ display:flex; gap:18px; padding:28px; border-radius:16px; background:var(--surface); border:1px solid var(--line-soft); }
.feature__icon{ flex-shrink:0; width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.feature h3{ font-size:19px; font-weight:600; margin-bottom:7px; }
.feature p{ font-size:15px; line-height:1.55; color:var(--text-2); }

/* --- Étapes --- */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step{ padding:30px; border-radius:16px; background:var(--surface); border:1px solid var(--line-soft); }
.step__num{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--accent); margin-bottom:18px; }
.step h3{ font-size:19px; font-weight:600; margin-bottom:8px; }
.step p{ font-size:14px; line-height:1.55; color:var(--text-2); }

/* --- Tarifs --- */
.pricing-note{ text-align:center; font-size:16px; color:var(--text-2); max-width:600px; margin:0 auto 12px; }
.pricing-flag{ text-align:center; font-family:ui-monospace,Menlo,monospace; font-size:11px; color:rgba(232,162,61,.7); margin:0 0 48px; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{ display:flex; flex-direction:column; padding:34px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); }
.plan--featured{ position:relative; background:linear-gradient(180deg, rgba(47,122,209,.13), rgba(47,122,209,.03)); border:1px solid rgba(47,122,209,.45); box-shadow:0 20px 50px rgba(47,122,209,.15); }
.plan__badge{ position:absolute; top:-12px; left:34px; padding:5px 12px; border-radius:999px; background:var(--primary); color:#fff; font-size:12px; font-weight:700; }
.plan__name{ font-family:var(--font-display); font-size:20px; font-weight:600; }
.plan__desc{ font-size:14px; color:var(--muted); margin:8px 0 20px; }
.plan__price{ display:flex; align-items:baseline; gap:7px; margin-bottom:24px; }
.plan__price small{ font-size:14px; color:var(--muted); }
.plan__price b{ font-family:var(--font-display); font-size:36px; font-weight:700; }
.plan__features{ display:flex; flex-direction:column; gap:11px; margin-bottom:28px; }
.plan__features span{ font-size:14px; color:var(--muted-2); }
.plan--featured .plan__features span{ color:#D7DEE7; }
.plan .btn{ margin-top:auto; }

/* --- FAQ --- */
.faq{ max-width:820px; margin:0 auto; }
.faq__list{ display:flex; flex-direction:column; gap:12px; }
.faq__item{ border-radius:14px; background:var(--surface); border:1px solid var(--line); overflow:hidden; }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; padding:22px 24px; background:none; border:none; cursor:pointer; }
.faq__q span:first-child{ font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--ink); }
.faq__sign{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.06); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; }
.faq__a{ padding:0 24px 24px; font-size:15px; line-height:1.6; color:var(--text-2); }
.faq__item[hidden] .faq__a, .faq__a[hidden]{ display:none; }

/* --- CTA final --- */
.final-cta{ position:relative; overflow:hidden; background:radial-gradient(100% 120% at 50% 0%, rgba(47,122,209,.22), transparent 60%), var(--bg); }
.final-cta__inner{ position:relative; max-width:900px; margin:0 auto; text-align:center; padding:110px 24px; }
.final-cta__inner::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 60% at 50% 50%, rgba(232,162,61,.08), transparent 70%); pointer-events:none; }
.final-cta h2{ position:relative; font-size:48px; line-height:1.08; letter-spacing:-.025em; font-weight:700; text-wrap:balance; }
.final-cta__lead{ position:relative; font-size:19px; color:var(--text); max-width:540px; margin:20px auto 0; }
.final-cta .cta-row{ position:relative; }
.final-cta .proofs{ position:relative; }

/* --- Contact / formulaire --- */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start; }
.contact h2{ font-size:40px; line-height:1.1; letter-spacing:-.02em; font-weight:700; margin-bottom:18px; text-wrap:balance; }
.contact__lead{ font-size:16px; line-height:1.6; color:var(--text-2); margin-bottom:30px; }
.contact__rows{ display:flex; flex-direction:column; gap:16px; }
.contact__row{ display:flex; align-items:center; gap:13px; }
.contact__ico{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.contact__row small{ display:block; font-size:13px; color:var(--muted); }
.contact__row b{ font-size:16px; font-weight:600; color:var(--ink); }
.lpd{ margin-top:30px; padding:16px 18px; border-radius:12px; background:rgba(127,200,160,.06); border:1px solid rgba(127,200,160,.2); display:flex; gap:11px; align-items:flex-start; }
.lpd span{ font-size:13px; line-height:1.5; color:#A9B5A9; }
.lpd a{ color:var(--green); text-decoration:underline; }

.form{ padding:36px; border-radius:20px; background:var(--surface); border:1px solid rgba(255,255,255,.08); }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field > span{ font-size:14px; font-weight:600; color:var(--muted-2); }
.input, .select, .textarea{ padding:14px 16px; border-radius:11px; background:var(--bg); border:1px solid rgba(255,255,255,.12); color:var(--ink); font-family:var(--font-body); font-size:15px; outline:none; transition:border-color .15s ease; }
.select{ color:var(--muted-2); }
.textarea{ resize:vertical; }
.input:focus, .select:focus, .textarea:focus{ border-color:var(--primary); }
.field--full{ margin-top:18px; }
.consent{ display:flex; gap:11px; align-items:flex-start; margin-top:18px; cursor:pointer; }
.consent input{ margin-top:3px; width:16px; height:16px; accent-color:var(--primary); }
.consent span{ font-size:13px; line-height:1.5; color:var(--muted); }
.form__submit{ margin-top:22px; }
.form__hint{ text-align:center; font-size:13px; color:#7C766C; margin-top:14px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }   /* honeypot anti-spam */
.form__status{ margin-top:16px; padding:14px 16px; border-radius:11px; font-size:14px; display:none; }
.form__status.is-ok{ display:block; background:rgba(127,200,160,.1); border:1px solid rgba(127,200,160,.35); color:#BfeAcf; }
.form__status.is-err{ display:block; background:rgba(226,72,61,.1); border:1px solid rgba(226,72,61,.35); color:#F0B7B2; }

/* --- Footer --- */
.footer{ background:var(--bg-deep); border-top:1px solid var(--line); }
.footer__grid{ padding:64px 24px 28px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer__about{ font-size:15px; line-height:1.6; color:#8E867B; max-width:300px; margin:16px 0 18px; }
.footer a{ color:var(--muted-2); }
.footer__col h4{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7C766C; margin:0 0 18px; }
.footer__links{ display:flex; flex-direction:column; gap:12px; font-size:15px; }
.footer__links a{ color:#B5ACA1; }
.footer__links a:hover{ color:var(--ink); }
.footer__bottom{ padding:20px 24px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer__bottom span{ font-size:13px; color:#6E685F; }

/* --- Animations --- */
@keyframes floaty   { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes glowpulse{ 0%,100%{ opacity:.5 } 50%{ opacity:.9 } }
@keyframes fadeUp   { from{ transform:translateY(22px) } to{ transform:translateY(0) } }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* --- Responsive (mobile) --- */
@media (max-width:880px){
  .section{ padding:72px 0; }
  .nav, .header__right > .btn{ display:none; }
  .burger{ display:flex; }
  .grid-2, .grid-3, .grid-4, .compare, .trust__grid, .plans, .contact, .footer__grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:38px; }
  .section-head h2, .final-cta h2{ font-size:30px; }
  .hero__inner{ padding-left:20px; padding-right:20px; }
  .mockup{ width:100%; }
  .cta-row{ flex-direction:column; }
  .cta-row > *{ width:100%; }
  .form__grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   Pages légales (mentions légales, confidentialité)
   =========================================================== */
.legal{ padding:72px 0 96px; }
.legal__wrap{ max-width:760px; margin:0 auto; }
.legal__back{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin-bottom:28px; }
.legal__back:hover{ color:var(--ink); }
.legal h1{ font-family:var(--font-display); font-size:40px; line-height:1.12; letter-spacing:-.02em; font-weight:700; }
.legal__updated{ color:var(--muted); font-size:14px; margin-top:12px; }
.legal h2{ font-family:var(--font-display); font-size:23px; letter-spacing:-.01em; font-weight:700; color:var(--ink); margin:44px 0 14px; }
.legal h3{ font-size:17px; font-weight:600; color:var(--ink-2); margin:26px 0 10px; }
.legal p{ color:var(--text); line-height:1.7; margin:0 0 14px; }
.legal ul{ color:var(--text); line-height:1.7; margin:0 0 14px; padding-left:22px; }
.legal li{ margin-bottom:7px; }
.legal a{ color:var(--blue-soft); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ color:var(--ink); }
.legal strong{ color:var(--ink-2); font-weight:600; }
.legal__card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin:18px 0; }
.legal__card p:last-child{ margin-bottom:0; }
.legal hr{ border:0; border-top:1px solid var(--line); margin:40px 0; }