/* ══════════════════════════════════════════════════════════════
   rb-net v5 — Design System
   Syne (titres H1/H2) + Inter (body, nav, UI) · Dark/Light
   v5 : Inter body pour lisibilité pro, trial-cards alignées
══════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg:      #080e1d;
  --bg2:     #0d1526;
  --bg3:     #111d35;
  --surface: rgba(255,255,255,.055);
  --border:  rgba(255,255,255,.10);
  --text:    #eaf0ff;
  --muted:   #7a93c0;
  --brand:   #2af5d0;
  --brand2:  #2563ff;
  --orange:  #f97316;
  --green:   #10b981;
  --red:     #ef4444;
  --radius:  14px;
  --shadow:  0 8px 32px rgba(0,0,0,.4);
  /* v5 : Inter pour le body, Syne uniquement pour les gros titres */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Courier New', monospace;
  --max: 1100px;
  --nav-h: 62px;
}
[data-theme="light"] {
  --bg:      #f1f5fb;
  --bg2:     #ffffff;
  --bg3:     #e8eef8;
  --surface: rgba(0,0,0,.035);
  --border:  rgba(0,0,0,.10);
  --text:    #0d1526;
  --muted:   #526280;
  --shadow:  0 8px 32px rgba(0,0,0,.10);
}

/* ── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body {
  font-family:var(--font-body);
  background:var(--bg); color:var(--text);
  /* Inter : taille et interligne légèrement ajustés */
  font-size:15px; line-height:1.65;
  overflow-x:hidden; transition:background .3s,color .3s;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none }
img { max-width:100% }
ul { list-style:none }
button { cursor:pointer; font-family:var(--font-body) }
.container { max-width:var(--max); margin:0 auto; padding:0 1.25rem }
section { padding:5rem 1.25rem }

/* ── TYPOGRAPHY ────────────────────────────────────────────── */
/* H1 / H2 restent en Syne pour l'impact visuel */
h1 {
  font-family:var(--font-display);
  font-size:clamp(2.2rem,5vw,3.8rem);
  font-weight:800; line-height:1.08; letter-spacing:-.03em;
}
h2 {
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:700; letter-spacing:-.02em;
}
/* H3 et en dessous : Inter, plus lisible */
h3 { font-family:var(--font-body); font-size:1.05rem; font-weight:600; letter-spacing:-.01em }
h4 { font-family:var(--font-body); font-size:.95rem; font-weight:600 }
p  { font-size:.9375rem; line-height:1.7 }

em.grad {
  font-style:normal;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.5rem; border-radius:9px;
  font-family:var(--font-body); font-weight:600; font-size:.9rem;
  letter-spacing:-.01em;
  border:none; transition:all .18s; white-space:nowrap; text-decoration:none;
}
.btn-primary  { background:var(--brand2); color:#fff; box-shadow:0 4px 18px rgba(37,99,255,.35) }
.btn-primary:hover { background:#1d4fd8; transform:translateY(-1px) }
.btn-outline  { background:transparent; color:var(--text); border:1.5px solid var(--border) }
.btn-outline:hover { border-color:var(--brand); color:var(--brand) }
.btn-brand    { background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#080e1d; font-weight:700 }
.btn-brand:hover { filter:brightness(1.08); transform:translateY(-1px) }
.btn-sm { padding:.5rem 1rem; font-size:.83rem }

/* ── SECTION HEADER ────────────────────────────────────────── */
.sec-header { text-align:center; margin-bottom:2.75rem }
.sec-tag,.section-tag {
  display:block; font-size:.69rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--brand); margin-bottom:.5rem;
}
.sec-sub,.section-subtitle {
  color:var(--muted); font-size:.9375rem;
  max-width:560px; margin:.5rem auto 0; line-height:1.7;
}
.section-title { margin-bottom:.5rem }

/* ── CARD BASE ─────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; transition:border-color .2s }
.card:hover { border-color:rgba(42,245,208,.3) }

/* ── FADE-IN ────────────────────────────────────────────────── */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease }
.fade-in.visible { opacity:1; transform:none }

/* ════════════ NAV ════════════ */
nav { position:sticky; top:0; z-index:200; background:rgba(8,14,29,.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); transition:background .3s }
[data-theme="light"] nav { background:rgba(241,245,251,.94) }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); max-width:var(--max); margin:0 auto; padding:0 1.25rem; gap:1rem }
/* Logo : garde Syne */
.nav-logo { font-family:var(--font-display); font-size:1.3rem; font-weight:800 }
.nav-logo span { color:var(--brand) }
.nav-links { display:none; list-style:none; gap:1.2rem }
.nav-links a { color:var(--muted); font-size:.84rem; font-weight:500; transition:color .15s }
.nav-links a:hover { color:var(--text) }
.nav-right { display:flex; gap:.6rem; align-items:center }
#themeToggle { background:none; border:1.5px solid var(--border); color:var(--text); border-radius:8px; padding:.3rem .6rem; font-size:.95rem; transition:border-color .2s }
#themeToggle:hover { border-color:var(--brand) }
.nav-burger { display:block; background:none; border:none; color:var(--text); font-size:1.4rem }

/* ════════════ HERO ════════════ */
#hero { padding:6rem 1.25rem 4rem; background:radial-gradient(ellipse 80% 50% at 50% -5%,rgba(37,99,255,.28),transparent),radial-gradient(ellipse 50% 40% at 90% 60%,rgba(42,245,208,.13),transparent),var(--bg); text-align:center }
.hero-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem 1rem; background:rgba(37,99,255,.15); border:1px solid rgba(37,99,255,.3); color:var(--brand); font-size:.69rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; border-radius:100px; margin-bottom:1.5rem }
#hero h1 { max-width:800px; margin:0 auto 1.25rem }
#hero .lead { color:var(--muted); font-size:1.05rem; max-width:580px; margin:0 auto 2rem; font-weight:400; line-height:1.75 }
.hero-ctas { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.5rem }
.hero-trust { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; font-size:.8rem; color:var(--muted) }
.trust-item::before { content:'✓ '; color:var(--green); font-weight:700 }
/* Comparatif Wix */
.hero-vs { margin:3rem auto 0; max-width:720px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center }
.vs-col { font-size:.855rem; color:var(--muted) }
.vs-col h4 { font-size:.9rem; font-weight:600; margin-bottom:.6rem }
.vs-col.bad h4 { color:var(--red) }
.vs-col.good h4 { color:var(--brand) }
.vs-col li { padding:.22rem 0; display:flex; gap:.4rem }
.vs-sep { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--muted); text-align:center }

/* ════════════ PROBLÈMES ════════════ */
#problems { background:var(--bg2) }
.problems-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem; margin-top:2rem }
.problem-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; transition:border-color .2s,transform .2s }
.problem-card:hover { border-color:rgba(239,68,68,.35); transform:translateY(-2px) }
.problem-icon { font-size:2rem; margin-bottom:.75rem }
.problem-card h3 { font-size:1rem; margin-bottom:.35rem }
.problem-card p { font-size:.875rem; color:var(--muted); margin-top:.35rem }
.problem-arrow { background:linear-gradient(135deg,rgba(37,99,255,.14),rgba(42,245,208,.07)); border:1.5px solid rgba(42,245,208,.22); border-radius:var(--radius); padding:1.6rem }
.problem-arrow h3 { color:var(--brand); margin-bottom:.5rem }
.problem-arrow p { font-size:.875rem; color:var(--muted); margin-bottom:1rem }

/* ════════════ OFFRES ════════════ */
#offres { background:var(--bg2) }
.offers-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.1rem; margin-bottom:1.5rem;
  align-items:stretch;
}
.offer-card {
  display:flex; flex-direction:column;
  border:1.5px solid var(--border); border-radius:var(--radius);
  padding:1.6rem 1.35rem; position:relative;
  background:var(--surface); transition:transform .2s,box-shadow .2s;
  min-width:0;
}
.offer-card:hover { transform:translateY(-3px); box-shadow:var(--shadow) }
.offer-card.featured { border-color:var(--orange); box-shadow:0 4px 20px rgba(249,115,22,.15) }
.pricing-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--orange); color:#fff; font-size:.67rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  padding:.22rem .75rem; border-radius:100px; white-space:nowrap;
}
.offer-icon { font-size:1.5rem; margin-bottom:.4rem }
.offer-name { font-family:var(--font-body); font-weight:700; font-size:1rem; margin-bottom:.4rem }
.offer-price { font-family:var(--font-display); font-size:clamp(1.6rem,2.5vw,2.2rem); font-weight:800; color:var(--orange); line-height:1.1 }
.offer-period { font-size:.77rem; color:var(--muted); margin-bottom:.35rem }
.offer-desc { font-size:.855rem; color:var(--muted); margin-bottom:.9rem; line-height:1.55 }
.offer-features { font-size:.855rem; color:var(--muted); margin-bottom:1.1rem; flex:1 }
.offer-features li { padding:.28rem 0; border-bottom:1px solid var(--surface); display:flex; gap:.45rem; align-items:flex-start }
.offer-features li:last-child { border:none }
.feat-yes { color:var(--green); font-weight:700; flex-shrink:0 }
.feat-no  { color:var(--red); font-weight:700; flex-shrink:0 }
.offer-card .btn { margin-top:auto; width:100%; justify-content:center }
.offer-note { font-size:.69rem; color:var(--muted); text-align:center; margin-top:.5rem }
/* Comparatif */
.compare-table { width:100%; border-collapse:collapse; font-size:.84rem; margin-top:1.5rem }
.compare-table th { padding:.7rem 1rem; font-weight:600; border-bottom:2px solid var(--border); text-align:center }
.compare-table th:first-child { text-align:left }
.compare-table td { padding:.58rem 1rem; border-bottom:1px solid var(--surface); text-align:center; color:var(--muted) }
.compare-table td:first-child { text-align:left; color:var(--text) }
.compare-table tr:last-child td { border:none }
.ok { color:var(--green); font-weight:700 }
.no { color:var(--red); opacity:.45 }
.table-wrap { overflow-x:auto }

/* ════════════ MÉTIERS ════════════ */
#metiers { background:var(--bg) }
.metiers-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:.8rem; margin-top:1.5rem }
.metier-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); padding:1rem .75rem; text-align:center; cursor:pointer; transition:all .2s }
.metier-card:hover,.metier-card.active { border-color:var(--mc,var(--brand2)); background:rgba(37,99,255,.08); transform:translateY(-2px) }
.metier-emoji { font-size:1.8rem; margin-bottom:.3rem }
.metier-label { font-size:.82rem; font-weight:600 }
.metier-sub { font-size:.68rem; color:var(--muted); margin-top:.15rem }
/* Détail métier */
#metier-detail { display:none; margin-top:1.4rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem }
.metier-detail-header { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem; flex-wrap:wrap }
.metier-detail-header img { width:120px; height:80px; object-fit:cover; border-radius:8px; border:1px solid var(--border); flex-shrink:0 }
.metier-detail-info { flex:1; min-width:200px }
.metier-detail-info h3 { margin-bottom:.3rem }
.metier-modules { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.3rem; margin:.75rem 0; font-size:.855rem; color:var(--muted) }
.metier-modules li::before { content:'✓ '; color:var(--brand); font-weight:700 }
.plugin-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem }
.plugin-tag { padding:.22rem .6rem; background:rgba(37,99,255,.13); border:1px solid rgba(37,99,255,.28); color:#7cb9ff; font-size:.72rem; border-radius:100px }
/* wp-cli snippet */
.wpcli-block { margin-top:1rem; background:rgba(0,0,0,.45); border:1px solid rgba(42,245,208,.18); border-radius:8px; overflow:hidden }
.wpcli-header { display:flex; align-items:center; justify-content:space-between; padding:.4rem .9rem; background:rgba(42,245,208,.07); font-size:.72rem; font-weight:600; color:var(--brand); text-transform:uppercase; letter-spacing:.07em }
.wpcli-copy { background:none; border:none; color:var(--brand); font-size:.8rem; cursor:pointer; padding:0 }
.wpcli-body { padding:.85rem .9rem; font-family:var(--font-mono); font-size:.78rem; color:#a5f3d4; line-height:1.9 }
.wpcli-body span { display:block; padding:.1rem 0 }
.wpcli-body span::before { content:'$ '; color:var(--muted) }

/* ════════════ TÉMOIGNAGES SLIDER ════════════ */
#avis { background:var(--bg2) }
.testimonials-slider { min-height:160px; position:relative }
.testimonial { display:none; text-align:center; animation:fadeSlide .4s ease; padding:.5rem 0 }
.testimonial.active { display:block }
.testimonial blockquote { font-size:1.05rem; font-style:italic; font-weight:400; max-width:640px; margin:0 auto .75rem; line-height:1.8; color:var(--text) }
.testimonial blockquote::before,.testimonial blockquote::after { font-size:1.8rem; line-height:0; vertical-align:-.45em; color:var(--brand) }
.testimonial blockquote::before { content:'\201C' }
.testimonial blockquote::after  { content:'\201D' }
.testimonial cite { color:var(--muted); font-size:.875rem; font-style:normal; font-weight:600 }
.slider-controls { display:flex; gap:.6rem; justify-content:center; margin-top:1.5rem }
.slider-dot { width:8px; height:8px; border-radius:50%; background:var(--border); border:none; transition:background .2s,transform .2s }
.slider-dot.active { background:var(--brand); transform:scale(1.3) }
@keyframes fadeSlide { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.stats-row { display:flex; gap:2.5rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border) }
.stat-item { text-align:center }
.stat-num { font-family:var(--font-display); font-size:2.1rem; font-weight:800; color:var(--brand2) }
.stat-label { font-size:.82rem; color:var(--muted) }

/* ════════════ MAINTENANCE ════════════ */
#maintenance { background:var(--bg) }
.packs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; align-items:stretch }
.pack-card {
  display:flex; flex-direction:column;
  border:1.5px solid var(--border); border-radius:var(--radius);
  padding:1.8rem 1.6rem; background:var(--surface); transition:all .2s;
}
.pack-card.popular-pack { border-color:rgba(42,245,208,.35); background:rgba(42,245,208,.03) }
.pack-badges { display:flex; gap:.4rem; margin-bottom:.6rem; flex-wrap:wrap }
.pack-badge { display:inline-flex; padding:.22rem .7rem; border-radius:100px; font-size:.7rem; font-weight:600; background:rgba(42,245,208,.1); border:1px solid rgba(42,245,208,.2); color:var(--brand) }
.pack-badge.warn { background:rgba(249,115,22,.1); border-color:rgba(249,115,22,.25); color:var(--orange) }
.pack-price { font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--text); margin:.6rem 0 }
.pack-price span { font-size:.95rem; color:var(--muted); font-weight:400 }
.pack-features { font-size:.855rem; color:var(--muted); margin:.75rem 0 1.1rem; flex:1 }
.pack-features li { padding:.28rem 0; border-bottom:1px solid rgba(255,255,255,.04); display:flex; gap:.45rem; align-items:flex-start }
.pack-features li:last-child { border:none }
.pack-features li::before { content:'✓'; color:var(--brand); font-weight:700; flex-shrink:0 }
.pack-card .btn { margin-top:auto; width:100%; justify-content:center }
.antiabuse-notice { margin-top:1.25rem; background:rgba(239,68,68,.07); border:1px dashed rgba(239,68,68,.28); border-radius:10px; padding:.85rem 1rem; font-size:.8rem; color:var(--muted) }

/* ════════════ SÉCURITÉ ════════════ */
#securite { background:var(--bg2) }
.security-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem }
.sec-list { margin-top:.65rem; font-size:.855rem; color:var(--muted) }
.sec-list li { padding:.22rem 0 }
.sec-list li::before { content:'✓ '; color:var(--brand); font-weight:700 }

/* ════════════ DÉPLOIEMENT ════════════ */
#deploiement { background:var(--bg) }
.deploy-steps { display:flex; flex-direction:column; gap:.85rem; margin-top:2rem }
.deploy-step { display:flex; gap:1.1rem; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; transition:border-color .2s }
.deploy-step:hover { border-color:rgba(42,245,208,.28) }
.step-num { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--brand2),var(--brand)); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.95rem }
.step-content h4 { font-size:.95rem; font-weight:600; margin-bottom:.25rem }
.step-content p { font-size:.855rem; color:var(--muted); margin-bottom:.45rem }
.step-badge { display:inline-block; font-family:var(--font-mono); font-size:.72rem; background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:6px; padding:.15rem .55rem; color:var(--brand) }

/* ════════════ ESSAI ════════════ */
#essai { background:linear-gradient(135deg,rgba(37,99,255,.13),rgba(42,245,208,.07)),var(--bg2); text-align:center }

/* ── CORRECTION v5 : trial-cards avec boutons alignés en bas ── */
.trial-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);   /* 3 colonnes fixes sur desktop */
  gap:1.25rem;
  max-width:960px; margin:2rem auto 1.5rem;
  text-align:left; align-items:stretch;
}
.trial-card {
  display:flex; flex-direction:column;   /* ← colonne flex */
  background:rgba(255,255,255,.055);
  border:1.5px solid rgba(255,255,255,.11);
  border-radius:var(--radius); padding:1.6rem;
}
.trial-card h4 {
  font-family:var(--font-body); font-size:.95rem; font-weight:600;
  margin-bottom:.55rem; letter-spacing:-.01em;
}
.trial-card ul {
  font-size:.855rem; color:var(--muted); margin-bottom:.9rem;
  flex:1;  /* ← pousse le bouton vers le bas */
}
.trial-card li { padding:.2rem 0; display:flex; gap:.4rem }
.trial-cta {
  /* margin-top:auto implicite via flex:1 sur ul */
  width:100%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#080e1d; font-family:var(--font-body);
  font-weight:700; font-size:.9rem;
  padding:.8rem 1.25rem; border:none; border-radius:9px;
  cursor:pointer; transition:filter .2s, transform .18s;
  letter-spacing:-.01em;
}
.trial-cta:hover { filter:brightness(1.08); transform:translateY(-1px) }

/* ════════════ FORMULAIRE CRÉATION ════════════ */
#creer { background:var(--bg) }
.form-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; max-width:780px; margin:0 auto }
.form-section-title {
  font-family:var(--font-body); font-size:.78rem; font-weight:700;
  color:var(--brand); text-transform:uppercase; letter-spacing:.07em;
  margin:1.5rem 0 .65rem; padding-bottom:.4rem; border-bottom:1px solid var(--border);
}
.form-section-title:first-child { margin-top:0 }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.9rem }
.form-group { margin-bottom:.85rem }
label { display:block; font-size:.77rem; font-weight:600; color:var(--text); margin-bottom:.3rem }
.form-control,
input[type=text],input[type=email],input[type=password],input[type=url],input[type=tel],input[type=color],select,textarea {
  width:100%; padding:.62rem .82rem;
  background:rgba(0,0,0,.28); border:1px solid var(--border);
  border-radius:8px; color:var(--text);
  font-family:var(--font-body); font-size:.88rem;
  transition:border-color .2s;
}
[data-theme="light"] .form-control,
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea { background:#fff }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--brand2) }
input[type=color] { height:42px; padding:.2rem .4rem; cursor:pointer }
select option { background:#0d1526 }
[data-theme="light"] select option { background:#fff }
textarea { resize:vertical; min-height:90px }
.form-note { font-size:.7rem; color:var(--muted); margin-top:.3rem }
.payment-methods { background:rgba(0,0,0,.18); border:1px solid var(--border); border-radius:10px; padding:.9rem; margin-bottom:.85rem; display:none }
.template-preview { width:100%; border-radius:8px; border:1px solid var(--border); margin-top:.5rem; display:block; max-height:120px; object-fit:cover }
#preview-box { background:rgba(37,99,255,.07); border:1px solid rgba(37,99,255,.18); border-radius:10px; padding:1.1rem; text-align:center; margin:1.1rem 0; transition:all .3s }
.hp-field { display:none !important }
.form-feedback { font-size:.84rem; font-weight:600; padding:.55rem .8rem; border-radius:8px; margin-top:.65rem; display:none }
.form-feedback.success { background:rgba(16,185,129,.12); color:#6ee7b7; display:block }
.form-feedback.error   { background:rgba(239,68,68,.1); color:#fca5a5; display:block }
#order-recap { background:rgba(37,99,255,.07); border:1px solid rgba(37,99,255,.2); border-radius:10px; padding:1rem 1.2rem; margin-bottom:.85rem; display:none; font-size:.84rem }
#order-recap strong { color:var(--text) }
#order-recap span { color:var(--muted) }

/* ════════════ FAQ ════════════ */
#faq { background:var(--bg2) }
.faq-list { max-width:700px; margin:0 auto }
.faq-item { border-bottom:1px solid var(--border) }
.faq-q { width:100%; background:none; border:none; display:flex; justify-content:space-between; align-items:center; padding:1.05rem 0; font-size:.9rem; font-weight:600; color:var(--text); text-align:left; transition:color .2s; cursor:pointer }
.faq-q:hover { color:var(--brand) }
.faq-arrow { font-size:1.1rem; transition:transform .3s; color:var(--muted); flex-shrink:0 }
.faq-item.open .faq-arrow { transform:rotate(45deg) }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease }
.faq-a p { font-size:.875rem; color:var(--muted); padding-bottom:.9rem; line-height:1.75 }

/* ════════════ CONTACT ════════════ */
#contact { background:var(--bg) }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; align-items:start }
.contact-info p { font-size:.9rem; color:var(--muted); margin-bottom:1.5rem }
.contact-badges { display:flex; flex-direction:column; gap:.75rem }
.contact-badge { display:flex; gap:.85rem; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.85rem 1rem }
.contact-badge span { font-size:1.3rem; flex-shrink:0 }
.contact-badge strong { font-size:.85rem; display:block; margin-bottom:.1rem }
.contact-badge a { color:var(--brand2); font-size:.84rem }
.contact-form-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem }
.form-submit { display:block; width:100%; padding:.85rem; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#080e1d; font-family:var(--font-body); font-weight:700; font-size:.9rem; border:none; border-radius:9px; cursor:pointer; transition:filter .2s }
.form-submit:hover { filter:brightness(1.08) }

/* ════════════ LÉGAL ════════════ */
#legal { background:var(--bg2) }
.legal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.85rem }
.legal-block { background:rgba(255,255,255,.03); border:1px dashed var(--border); border-radius:10px; padding:.9rem; font-size:.78rem; color:var(--muted); line-height:1.6 }
.legal-block strong { color:var(--text); display:block; margin-bottom:.25rem }

/* ════════════ FOOTER ════════════ */
footer { background:var(--bg); border-top:1px solid var(--border); padding:2.5rem 1.25rem }
.footer-inner { max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem }
.footer-col h5 { font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:.55rem; letter-spacing:-.01em }
.footer-col a,.footer-col p { color:var(--muted); font-size:.78rem; display:block; margin-bottom:.28rem; transition:color .15s }
.footer-col a:hover { color:var(--text) }
.footer-brand p { max-width:220px; font-size:.78rem; color:var(--muted); margin-top:.4rem }
.footer-bottom { max-width:var(--max); margin:1.5rem auto 0; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.73rem; color:var(--muted) }

/* ════════════ MODALS ════════════ */
.modal-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.72); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s }
.modal-overlay.open { opacity:1; pointer-events:all }
.modal { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; max-width:480px; width:calc(100% - 2rem); transform:translateY(16px); transition:transform .25s; max-height:90vh; overflow-y:auto }
.modal-overlay.open .modal { transform:none }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem }
.modal-header h3 { font-size:1.1rem; font-weight:700 }
.modal-close { background:none; border:none; font-size:1.35rem; color:var(--muted); cursor:pointer }
.modal-feedback { font-size:.82rem; font-weight:600; padding:.5rem .75rem; border-radius:8px; margin-top:.65rem; display:none }
.modal-feedback.success { background:rgba(16,185,129,.12); color:#6ee7b7; display:block }
.modal-feedback.error   { background:rgba(239,68,68,.1); color:#fca5a5; display:block }

/* ════════════ DOMAIN CHECKER ════════════ */
.domain-checker { margin-top:.65rem }
.offer-card .domain-checker { min-height:0 }
.domain-result { font-size:.78rem; margin-top:.3rem; min-height:1em }
.domain-result.available { color:var(--green) }
.domain-result.taken     { color:var(--red) }
.subdomain-preview { font-size:.72rem; color:var(--muted); display:block; margin-top:.25rem }

/* ════════════ COOKIE & TOAST ════════════ */
.cookie-banner { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); z-index:1000; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1.25rem; max-width:640px; width:calc(100% - 2rem); display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; font-size:.78rem; color:var(--muted); box-shadow:var(--shadow) }
.cookie-banner a { color:var(--brand) }
.cookie-btn { padding:.4rem .9rem; border-radius:7px; font-size:.78rem; font-weight:600; border:none; background:var(--brand2); color:#fff; cursor:pointer }
.cookie-btn.secondary { background:transparent; border:1px solid var(--border); color:var(--muted) }
.toast { position:fixed; bottom:1.75rem; right:1.75rem; z-index:2000; background:var(--bg2); color:var(--text); border:1px solid var(--border); padding:.7rem 1.1rem; border-radius:10px; font-size:.855rem; font-weight:500; transform:translateY(70px); opacity:0; transition:all .3s; box-shadow:var(--shadow) }
.toast.show { transform:none; opacity:1 }

/* ════════════ RESPONSIVE ════════════ */
@media(min-width:768px){ .nav-links{display:flex} .nav-burger{display:none} }
@media(max-width:1024px){
  .offers-grid { grid-template-columns:repeat(2,1fr) }
  .trial-options { grid-template-columns:repeat(3,1fr) }  /* garde 3 col tablette */
}
@media(max-width:767px){
  .nav-links{display:none;flex-direction:column;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--border);padding:1rem 1.25rem;gap:.65rem}
  .nav-links.open{display:flex}
  .offers-grid{grid-template-columns:1fr}
  .trial-options{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero-vs{grid-template-columns:1fr;gap:.5rem}
  .vs-sep{display:none}
  .compare-table{font-size:.75rem}
  .metier-detail-header{flex-direction:column}
}
@media(max-width:480px){
  section{padding:3.5rem 1rem}
  .metiers-grid{grid-template-columns:repeat(3,1fr)}
  .hero-ctas{flex-direction:column;align-items:center}
}