/* ============================================================
   Agawa.ai — design premium "IA haut de gamme"
   Dark hero immersif / corps clair / footer dark
   Space Grotesk (titres) + Inter (texte) — mobile-first
   ============================================================ */
/* Polices auto-hébergées (fonts/) — aucun appel externe */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/inter-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/inter-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/inter-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/inter-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/inter-latin-ext-800.woff2") format("woff2");
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/inter-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/spacegrotesk-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/spacegrotesk-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/spacegrotesk-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/spacegrotesk-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/spacegrotesk-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/spacegrotesk-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/spacegrotesk-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/spacegrotesk-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --dark: #0a0a12;
  --dark-2: #101019;
  --bg: #ffffff;
  --bg-soft: #f7f8fc;
  --ink: #101324;
  --ink-soft: #5b6178;
  --line: #e8eaf3;
  --brand: #7c3aed;
  --brand-2: #06b6d4;
  --brand-deep: #5b21b6;
  --gold: #f59e0b;
  --gold-deep: #b45309;
  --green: #16a34a;
  --green-soft: #e9f9ef;
  --red: #e11d48;
  --red-soft: #fdeef2;
  --radius: 18px;
  --radius-s: 12px;
  --shadow: 0 8px 28px rgba(16, 19, 36, .08);
  --shadow-lift: 0 18px 44px rgba(16, 19, 36, .14);
  --glow: 0 0 0 1px rgba(124, 58, 237, .18), 0 8px 32px rgba(124, 58, 237, .28);
  --grad: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
  --max: 1120px;
  --font-t: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-b: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-b); color: var(--ink);
  background: linear-gradient(160deg, #f6efff 0%, #e9f7fe 48%, #fdf4ea 100%);
  background-attachment: fixed; line-height: 1.7; font-size: 17px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .logo { font-family: var(--font-t); letter-spacing: -.02em; line-height: 1.25; }
img { max-width: 100%; height: auto; }
a { color: var(--brand-deep); }
::selection { background: rgba(124, 58, 237, .18); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* ---------- Header : verre fumé ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 18, .78);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header .wrap { display: flex; align-items: center; gap: 16px; padding-top: 11px; padding-bottom: 11px; }
.logo { font-weight: 700; font-size: 1.4rem; text-decoration: none; color: #fff; display: inline-flex; align-items: center; gap: 9px; }
.logo::before {
  content: ""; width: 26px; height: 26px; border-radius: 8px; background: var(--grad);
  box-shadow: 0 0 18px rgba(124, 58, 237, .55); flex: none;
}
.logo span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.nav a {
  text-decoration: none; color: rgba(255, 255, 255, .72); font-weight: 600;
  font-size: .92rem; padding: 8px 13px; border-radius: 999px; transition: all .2s ease;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.nav a.active { color: #fff; background: var(--grad); box-shadow: 0 4px 16px rgba(124, 58, 237, .4); }

/* ---------- Hero : nuit néon ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(124, 58, 237, .38), transparent 60%),
    radial-gradient(760px 380px at 88% 8%, rgba(6, 182, 212, .26), transparent 60%),
    radial-gradient(600px 500px at 50% 115%, rgba(124, 58, 237, .22), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M52 .5H0M.5 0v52' fill='none' stroke='rgba(255,255,255,.055)'/%3E%3C/svg%3E"),
    var(--dark);
  padding: 88px 0 76px;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .6), rgba(6, 182, 212, .6), transparent);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #d9ccff;
  background: rgba(124, 58, 237, .16); border: 1px solid rgba(124, 58, 237, .45);
  padding: 7px 15px; border-radius: 999px; margin: 0 0 22px;
  backdrop-filter: blur(6px);
}
.eyebrow::before { content: "✦"; color: #22d3ee; }
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 700; margin: 0 0 18px; max-width: 820px; }
.hero h1 .grad {
  background: linear-gradient(100deg, #c4b5fd 0%, #67e8f9 60%, #a5f3fc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 1.14rem; color: rgba(255, 255, 255, .78); max-width: 660px; margin: 0 0 30px; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hstat {
  display: inline-flex; align-items: baseline; gap: 8px; font-size: .9rem; color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  padding: 10px 16px; border-radius: 14px; backdrop-filter: blur(8px);
}
.hstat strong { font-family: var(--font-t); font-size: 1.25rem; color: #fff; }
.hstat .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px rgba(6,182,212,.8); align-self: center; }
.hero-note { margin-top: 20px; font-size: .83rem; color: rgba(255, 255, 255, .5); }
.hero-note a { color: rgba(255, 255, 255, .75); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 14px; font-weight: 700; font-size: 1rem;
  text-decoration: none; border: none; cursor: pointer; font-family: var(--font-b);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, filter .22s ease;
}
.btn-brand { background: var(--grad); color: #fff; box-shadow: 0 6px 22px rgba(124, 58, 237, .38); }
.btn-brand:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(124, 58, 237, .5); filter: brightness(1.06); color: #fff; }
.btn-brand:active { transform: translateY(0); }
.btn-primary { background: #fff; color: #1e1b4b; box-shadow: 0 6px 22px rgba(255, 255, 255, .22); }
.btn-primary:hover { transform: translateY(-2px); background: #f1f5ff; color: #1e1b4b; box-shadow: 0 12px 30px rgba(255, 255, 255, .3); }
.btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); color: #fff; }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section-soft { background: rgba(255,255,255,.55); }
.section-soft.section { border-radius: 26px; }
.section h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); font-weight: 700; margin: 0 0 10px; }
.section .sub { color: var(--ink-soft); margin: 0 0 32px; max-width: 720px; font-size: 1.05rem; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 11px;
  position: relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: #c9b8f5; }
.card h3 { margin: 0; font-size: 1.18rem; display: flex; align-items: center; }
.card p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.card .price { font-weight: 800; color: var(--ink); font-size: 1.06rem; font-family: var(--font-t); }
.card .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--line);
}
.badge.top {
  background: linear-gradient(135deg, #fde68a, #fbbf24); border: none; color: #451a03;
  box-shadow: 0 3px 12px rgba(245, 158, 11, .35);
}
.badge.deal { background: var(--red-soft); border: 1px solid #fecdd3; color: #9f1239; }
.badge.free { background: var(--green-soft); border: 1px solid #bbf7d0; color: #166534; }
.card .cta { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.card .cta a:not(.btn) { font-weight: 600; font-size: .93rem; text-decoration: none; }
.card .cta a:not(.btn)::after { content: " →"; transition: margin .2s ease; }
.card .cta a:not(.btn):hover::after { margin-left: 3px; }
.stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; }

/* ---------- Lettermarks : identité visuelle des outils (CSS pur) ---------- */
.lm {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 12px; margin-right: 11px;
  font-family: var(--font-t); font-weight: 700; font-size: 1rem; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-shadow: 0 4px 12px rgba(16, 19, 36, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
  letter-spacing: 0;
}
.lm-sm { width: 30px; height: 30px; border-radius: 9px; font-size: .82rem; margin-right: 9px; }
.lm-lg { width: 58px; height: 58px; border-radius: 17px; font-size: 1.5rem; margin-right: 16px; }
.lm-elevenlabs { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.lm-synthesia { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.lm-heygen { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.lm-pictory { background: linear-gradient(135deg, #f97316, #c2410c); }
.lm-invideo { background: linear-gradient(135deg, #ec4899, #be123c); }
.lm-fliki { background: linear-gradient(135deg, #10b981, #047857); }
.lm-runway { background: linear-gradient(135deg, #84cc16, #4d7c0f); }
.lm-murf { background: linear-gradient(135deg, #f59e0b, #b45309); }
.lm-descript { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.lm-jasper { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.lm-copyai { background: linear-gradient(135deg, #d946ef, #a21caf); }
.lm-writesonic { background: linear-gradient(135deg, #38bdf8, #0369a1); }
.lm-rytr { background: linear-gradient(135deg, #f43f5e, #9f1239); }
.lm-grammarly { background: linear-gradient(135deg, #22c55e, #15803d); }
.lm-notion { background: linear-gradient(135deg, #64748b, #1e293b); }
.lm-motion { background: linear-gradient(135deg, #6366f1, #4338ca); }
.lm-chatgpt { background: linear-gradient(135deg, #10a37f, #0d6e58); }
.lm-claude { background: linear-gradient(135deg, #d97757, #b4532a); }
.lm-gemini { background: linear-gradient(135deg, #4285f4, #7c3aed); }
.lm-copilot { background: linear-gradient(135deg, #0ea5e9, #1d4ed8); }
.lm-perplexity { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.lm-canva { background: linear-gradient(135deg, #00c4cc, #7d2ae8); }
.lm-capcut { background: linear-gradient(135deg, #111827, #4b5563); }

/* Bandeau offre du moment */
.deal-banner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg, #fff7ed, #fef2f2);
  border: 1px solid #fed7aa; border-radius: var(--radius);
  padding: 22px 28px; margin: 36px 0 0; box-shadow: var(--shadow);
}
.deal-banner p { margin: 0; flex: 1; min-width: 240px; color: var(--ink); font-size: 1.02rem; }
.deal-banner .btn { flex: none; }
.lm-clickup { background: linear-gradient(135deg, #fb7185, #e11d48); }
.lm-adobefirefly { background: linear-gradient(135deg, #fb923c, #db2777); }
.lm-kittl { background: linear-gradient(135deg, #eab308, #a16207); }
.lm-fotor { background: linear-gradient(135deg, #0ea5e9, #1e40af); }
.lm-photoroom { background: linear-gradient(135deg, #8b5cf6, #db2777); }
.lm-pixlr { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.lm-midjourney { background: linear-gradient(135deg, #0f172a, #334155); }
.lm-leonardo { background: linear-gradient(135deg, #7c3aed, #06b6d4); }
.lm-ideogram { background: linear-gradient(135deg, #27272a, #71717a); }
.lm-pika { background: linear-gradient(135deg, #c026d3, #701a75); }
.lm-luma { background: linear-gradient(135deg, #6366f1, #a855f7); }
.lm-suno { background: linear-gradient(135deg, #9333ea, #ec4899); }
.lm-gamma { background: linear-gradient(135deg, #fb923c, #ef4444); }
.lm-mistral { background: linear-gradient(135deg, #ff6b00, #d94800); }
.lm-appsumo { background: linear-gradient(135deg, #fbbf24, #d97706); }
.lm-stacksocial { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.lm-dealmirror { background: linear-gradient(135deg, #34d399, #059669); }
.lm-saasmantra { background: linear-gradient(135deg, #c084fc, #9333ea); }
.lm-pitchground { background: linear-gradient(135deg, #fb7185, #be123c); }
.lm-dealify { background: linear-gradient(135deg, #4ade80, #16a34a); }

/* ---------- Podium ---------- */
.podium { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin: 32px 0; align-items: stretch; }
.podium .card.winner {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #f59e0b, #f97316, #ec4899) border-box;
  box-shadow: 0 14px 40px rgba(245, 158, 11, .22);
}
.podium .card.winner::before {
  content: "TOP CHOIX"; position: absolute; top: -13px; left: 22px;
  font-family: var(--font-t); font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: linear-gradient(135deg, #f59e0b, #ea580c);
  padding: 5px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(245, 158, 11, .5);
}
@media (min-width: 900px) { .podium .card.winner { transform: scale(1.03); } .podium .card.winner:hover { transform: scale(1.03) translateY(-6px); } }

/* ---------- Tableaux comparatifs ---------- */
.table-wrap {
  overflow-x: auto; margin: 28px 0; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); background: #fff;
}
table.compare { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 680px; background: #fff; }
table.compare th, table.compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.compare thead th {
  background: var(--dark); color: #fff; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; font-family: var(--font-t); border-bottom: none; white-space: nowrap;
}
table.compare thead th:first-child { border-radius: 0; }
table.compare tbody tr { transition: background .18s ease; }
table.compare tbody tr:hover { background: #fafbff; }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare td:first-child { font-weight: 700; white-space: nowrap; }
table.compare tr.winner td {
  background: linear-gradient(90deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .04));
}
table.compare tr.winner td:first-child { box-shadow: inset 4px 0 0 var(--gold); }
.check { color: var(--green); font-weight: 800; }
.cross { color: var(--red); }

/* ---------- Verdict : carte nuit ---------- */
.verdict {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(500px 200px at 15% 0%, rgba(124, 58, 237, .32), transparent 60%),
    radial-gradient(400px 200px at 90% 100%, rgba(6, 182, 212, .2), transparent 60%),
    var(--dark);
  border: 1px solid rgba(124, 58, 237, .4); border-radius: var(--radius);
  padding: 32px; margin: 40px 0; box-shadow: 0 16px 44px rgba(10, 10, 18, .28);
}
.verdict h3 { margin: 0 0 12px; font-size: 1.35rem; }
.verdict h3::before { content: "✦ "; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.verdict p { color: rgba(255, 255, 255, .85); }
.verdict p:last-child { margin-bottom: 0; }
.verdict strong { color: #fff; }

/* ---------- Fiche outil : prix et sources ---------- */
.price-note { font-size: .92rem; color: var(--ink-soft); margin: 10px 0 26px; }
.price-note a { color: var(--brand-deep); font-weight: 600; }
ul.sources { font-size: .92rem; color: var(--ink-soft); line-height: 1.7; }
ul.sources a { color: var(--brand-deep); }

/* ---------- Fiche outil ---------- */
.tool-hero { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin: 10px 0 26px; }
.tool-hero .info { flex: 1; min-width: 250px; }
h1.page-title .lm-lg { vertical-align: -12px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 22px 0; }
.fact {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 14px 16px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.fact:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.fact .k { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-weight: 700; }
.fact .v { font-weight: 700; margin-top: 3px; font-family: var(--font-t); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
.pros-cons .box { border-radius: var(--radius); padding: 22px; border: 1px solid var(--line); }
.pros-cons .plus { background: linear-gradient(180deg, #f0fdf4, #fff); border-color: #bbf7d0; }
.pros-cons .minus { background: linear-gradient(180deg, #fef2f2, #fff); border-color: #fecaca; }
.pros-cons h4 { margin: 0 0 12px; font-size: 1.05rem; }
.pros-cons .plus h4 { color: #166534; } .pros-cons .plus h4::before { content: "✓ "; color: var(--green); }
.pros-cons .minus h4 { color: #991b1b; } .pros-cons .minus h4::before { content: "✕ "; color: var(--red); }
.pros-cons ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.pros-cons li { margin-bottom: 6px; }
@media (max-width: 640px) { .pros-cons { grid-template-columns: 1fr; } }

/* ---------- Deals ---------- */
.deal-card { border-left: 5px solid transparent; border-image: linear-gradient(180deg, #f43f5e, #f59e0b) 1; }
.deal-expire {
  display: inline-block; font-size: .8rem; font-weight: 700; color: #9f1239;
  background: var(--red-soft); border: 1px solid #fecdd3; padding: 4px 12px; border-radius: 999px;
}
.deal-old-price { text-decoration: line-through; color: var(--ink-soft); }

/* ---------- Contenu : fil d'ariane, sommaire, FAQ ---------- */
.breadcrumb { font-size: .86rem; color: var(--ink-soft); margin: 22px 0 8px; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-deep); }
h1.page-title { font-size: clamp(1.8rem, 4.4vw, 2.7rem); font-weight: 700; line-height: 1.18; margin: 10px 0 14px; }
.updated { font-size: .86rem; color: var(--ink-soft); }
.toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 28px 0; }
.toc p { margin: 0 0 8px; font-weight: 700; font-family: var(--font-t); }
.toc ol { margin: 0; padding-left: 20px; }
.toc a { text-decoration: none; } .toc a:hover { text-decoration: underline; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 16px 20px;
  margin-bottom: 12px; background: #fff; transition: box-shadow .2s ease, border-color .2s ease;
}
.faq details:hover { border-color: #c9b8f5; }
.faq details[open] { box-shadow: var(--shadow); border-color: #c9b8f5; }
.faq summary { font-weight: 700; cursor: pointer; font-family: var(--font-t); }
.faq summary::marker { color: var(--brand); }
.disclosure {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-s);
  padding: 14px 18px; font-size: .87rem; color: #92400e; margin: 24px 0;
}

/* ---------- Alerte deals ---------- */
.alert-box {
  position: relative; overflow: hidden; color: #fff; border-radius: 22px;
  padding: 44px 32px; margin: 48px 0; text-align: center;
  background:
    radial-gradient(600px 240px at 20% 0%, rgba(124, 58, 237, .4), transparent 60%),
    radial-gradient(500px 240px at 85% 100%, rgba(6, 182, 212, .28), transparent 60%),
    var(--dark);
  border: 1px solid rgba(124, 58, 237, .4); box-shadow: 0 18px 50px rgba(10, 10, 18, .3);
}
.alert-box h3 { margin: 0 0 10px; font-size: 1.5rem; }
.alert-box p { color: rgba(255, 255, 255, .8); max-width: 560px; margin: 0 auto; }
.alert-box .btn { margin-top: 20px; }

/* ---------- Footer nuit ---------- */
.site-footer { background: var(--dark); color: rgba(255, 255, 255, .72); margin-top: 56px; position: relative; }
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .7), rgba(6, 182, 212, .7), transparent);
}
.site-footer .wrap { padding-top: 48px; padding-bottom: 40px; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer h4 { margin: 0 0 12px; font-size: .95rem; color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(255, 255, 255, .6); text-decoration: none; font-size: .93rem; transition: color .18s ease; }
.site-footer a:hover { color: #fff; }
.legal { border-top: 1px solid rgba(255, 255, 255, .08); padding: 18px 0; font-size: .82rem; color: rgba(255, 255, 255, .42); }
.legal .wrap { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding-top: 0; padding-bottom: 0; }

/* ---------- Accessibilité & mouvement ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid #22d3ee; outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Navigation mobile : menu plein écran fun et clair ---------- */
.burger { display: none; }
.drawer, .drawer-backdrop { display: none; }

@media (max-width: 860px) {
  /* Header clair */
  .site-header { background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%); border-bottom: 1px solid var(--line); }
  .site-header .wrap { flex-wrap: nowrap; }
  .site-header .nav { display: none; }
  .site-header .logo { color: var(--ink); font-size: 1.25rem; }
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; margin-left: auto; width: 46px; height: 46px; flex: none;
    background: var(--grad); border: none; border-radius: 14px; cursor: pointer; padding: 0;
    box-shadow: 0 6px 18px rgba(124, 58, 237, .35);
  }
  .burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; }
  .burger:active { transform: scale(.95); }

  /* Menu plein écran : fond fun en dégradé pastel, liens en cartes blanches */
  .drawer-backdrop { display: none; }
  .drawer {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 100;
    width: 100%; padding: 14px 20px 32px;
    background:
      radial-gradient(560px 280px at 108% -4%, rgba(124, 58, 237, .16), transparent 62%),
      radial-gradient(480px 260px at -8% 34%, rgba(6, 182, 212, .14), transparent 60%),
      radial-gradient(420px 300px at 50% 108%, rgba(245, 158, 11, .10), transparent 60%),
      linear-gradient(180deg, #fbf8ff 0%, #f2f6ff 55%, #ecfdfa 100%);
    transform: translateY(-102%); transition: transform .38s cubic-bezier(.32, .72, .35, 1);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .drawer.open { transform: translateY(0); }
  .drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .drawer-top .logo { color: var(--ink); }
  .logo-sm { font-size: 1.2rem; }
  .drawer-close {
    width: 44px; height: 44px; border-radius: 14px; cursor: pointer; flex: none;
    background: #fff; border: 1px solid var(--line); color: var(--ink);
    font-size: 1.1rem; line-height: 1; box-shadow: 0 4px 12px rgba(16, 19, 36, .06);
  }
  .drawer-nav { display: flex; flex-direction: column; }
  .drawer-title {
    margin: 20px 0 10px; font-size: .75rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; width: fit-content;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .drawer-title:first-of-type { margin-top: 8px; }
  .drawer-link {
    display: flex; align-items: center; gap: 13px; text-decoration: none;
    color: var(--ink); font-weight: 600; font-size: 1.03rem; padding: 11px 14px 11px 11px;
    background: #fff; border: 1px solid rgba(232, 234, 243, .9); border-radius: 16px;
    margin-bottom: 9px; box-shadow: 0 4px 14px rgba(16, 19, 36, .05);
  }
  .drawer-link .ico {
    font-size: 1.25rem; width: 42px; height: 42px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 13px; background: linear-gradient(135deg, rgba(124, 58, 237, .13), rgba(6, 182, 212, .13));
  }
  .drawer-link::after { content: "\203A"; margin-left: auto; color: #c3c7d8; font-size: 1.5rem; line-height: 1; }
  .drawer-link.active { color: var(--brand-deep); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 4px 14px rgba(124, 58, 237, .18); }
  .drawer-link.active::after { color: var(--brand); }
  .drawer-cta {
    margin-top: 18px; display: block; text-align: center; text-decoration: none;
    color: #fff; font-weight: 700; font-size: 1.02rem; padding: 16px; border-radius: 16px;
    background: var(--grad); box-shadow: 0 10px 26px rgba(124, 58, 237, .35);
  }
  body.menu-open { overflow: hidden; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { padding: 60px 0 52px; }
  .section { padding: 44px 0; }
  .nav a { padding: 7px 10px; font-size: .86rem; }
  .card { padding: 20px; }
  .verdict { padding: 24px; }
  .alert-box { padding: 34px 22px; }
}

.aff-note { font-size: .8rem; color: var(--ink-soft); margin: 10px 0 0; }
.aff-note a { color: var(--ink-soft); text-decoration: underline; }