/* =========================
   RESET & BASE
   ========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  background: #0f172a; color: #e5e7eb; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: #6366f1; text-decoration: none; transition: color .18s ease, opacity .18s ease; }
a:hover { text-decoration: underline; }
img, video { max-width: 100%; height: auto; display: block; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; text-align: center; }

/* =========================
   HEADER
   ========================= */
.header { position: sticky; top: 0; background: rgba(15,23,42,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06); z-index: 50; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-weight: 700; color: #fff; font-size: clamp(18px, 2.5vw, 22px); letter-spacing: .2px; }
.burger { display: inline-flex; gap: 4px; flex-direction: column; background: transparent; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: #fff; transition: .2s; }
.nav { display: flex; gap: 16px; justify-content: center; align-items: center; }
.nav a { color: #fff; opacity: .9; font-size: clamp(14px, 2.5vw, 16px); transition: opacity .2s, transform .2s; }
.nav a:hover { opacity: 1; transform: translateY(-1px); }
@media (max-width: 860px) {
  .nav { position: fixed; inset: 64px 0 0 0; background: rgba(17,24,39,.98); flex-direction: column; padding: 24px 16px;
         opacity: 0; pointer-events: none; transition: .25s; text-align: center; }
  .nav.open { opacity: 1; pointer-events: auto; }
}

/* =========================
   BOUTONS
   ========================= */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.15);
  color: #fff; background: rgba(255,255,255,.02);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  text-align: center; font-size: clamp(14px, 2.8vw, 16px); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.25); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(125,211,252,.35), 0 0 0 1px rgba(255,255,255,.25); }
.btn-primary { background: linear-gradient(135deg, #6366f1, #22d3ee); border: 0; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.btn-primary:hover { box-shadow: 0 18px 50px rgba(0,0,0,.35); transform: translateY(-3px); }
.btn-ghost { background: rgba(255,255,255,.06); }

/* =========================
   HERO vidéo
   ========================= */
.hero { position: relative; padding: 0; border-bottom: 1px solid rgba(255,255,255,.06); overflow: hidden; min-height: 78vh; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(.42) saturate(1.05); }
.hero .container { display: flex !important; flex-direction: column; align-items: center; justify-content: center; min-height: 78vh; text-align: center; gap: 16px; }
.hero h1 { font-size: clamp(32px, 6vw, 56px); line-height: 1.1; margin-bottom: 12px; letter-spacing: .2px; }
.hero p { color: #e5e7eb; opacity: .9; margin: 0 auto 18px; max-width: 820px; }
.hero .cta-row { justify-content: center; }
.hero .hero-text { position: relative; z-index: 1; text-shadow: 0 2px 18px rgba(0,0,0,.35); }

/* =========================
   Sections – dissociation
   ========================= */
section { position: relative; padding: clamp(44px, 6vw, 72px) 0; text-align: center; }
section + section { border-top: 1px solid rgba(255,255,255,.06); }
section + section::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 42px;
  background: linear-gradient(to bottom, rgba(255,255,255,.04), transparent 60%); pointer-events: none; }
section:nth-of-type(even) {
  background: radial-gradient(1200px 500px at 50% -150px, rgba(99,102,241,.08), transparent 60%), rgba(255,255,255,.015);
}
.intro p { max-width: 850px; margin: 0 auto 12px auto; }
.intro .bullets { display: inline-block; text-align: left; max-width: 850px; margin-top: 12px; }

/* =========================
   Tableau
   ========================= */
.table-wrap { overflow-x: auto; overflow-y: visible; margin: 0 auto; max-width: 100%; }
.table { width: 100%; border-collapse: collapse; min-width: 720px; margin: 0 auto; text-align: center;
  background: rgba(11,18,36,.35); backdrop-filter: blur(6px); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.table th, .table td { border-bottom: 1px solid rgba(255,255,255,.08); padding: 12px; }
.table thead th { background: #0f172a; }
.table tbody tr:nth-child(odd) { background: rgba(255,255,255,.012); }
.table tbody td:first-child { text-align: left; }
@media (max-width: 860px) { .table thead th { position: sticky; top: 0; background: #0f172a; z-index: 1; } }

/* =========================
   Grilles & cartes
   ========================= */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; justify-content: center; }
@media (max-width: 1100px){ .grid { grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .grid { grid-template-columns: 1fr;} }

.card {
  position: relative; background: rgba(17,24,39,.60);
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); text-align: center; backdrop-filter: blur(6px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card::before {
  content:""; position:absolute; inset:-1px; border-radius: 18px; z-index:-1;
  background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(34,211,238,.25)); opacity: .25; filter: blur(10px);
}
.card:hover { transform: translateY(-4px) scale(1.005); box-shadow: 0 18px 50px rgba(0,0,0,.35); border-color: rgba(255,255,255,.18); }
.card h3 { margin: 8px 0; letter-spacing: .2px; }
.bullets { margin: 8px auto 16px auto; padding-left: 18px; display: inline-block; text-align: left; max-width: 820px; }
.bullets li { margin: 6px 0; }

.video-slot { margin: 12px auto 10px auto; width: 100%; max-width: 720px; }
.video-wrapper { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25); background: #0b1224; }
.video-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =========================
   Guide & newsletter
   ========================= */
.guide-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; justify-content: center; }
@media (max-width: 980px){ .guide-grid { grid-template-columns: 1fr; } }
.guide-card { background: linear-gradient(180deg, rgba(99,102,241,.1), rgba(34,211,238,.07));
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.newsletter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.newsletter input { flex: 1; min-width: 240px; max-width: 380px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15);
  background: #0b1224; color: #fff; padding: 10px; text-align: center; }

/* =========================
   Footer
   ========================= */
.footer { padding: 40px 0; border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01) 40%, transparent); }
.footer .container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.footer nav { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.footer a { color: #cbd5e1; font-size: clamp(13px, 2.5vw, 14px); }
.footer a:hover { color: #e2e8f0; }

/* =========================
   Cookie banner
   ========================= */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; background: rgba(17,24,39,.96);
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: center;
  justify-content: center; flex-wrap: wrap; z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,.25); text-align: center; }
.cookie-banner .btn-row { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.gtranslate { min-width: 160px; }
.cookie-banner.hidden { display: none; }

/* =========================
   Accessibilité & transitions
   ========================= */
:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(125,211,252,.35) !important; border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .btn, .card, .nav a { transition: transform .22s ease, box-shadow .22s ease, background .22s ease, opacity .22s ease, border-color .22s ease; }
}

/* ===== FAQ premium (badges + accordéon ARIA) ===== */
.faq { text-align: left; }
.faq > .container { max-width: 1000px; }
.faq h2{
  text-align:center; margin-bottom: 20px;
  font-size: clamp(22px,3.2vw,28px); letter-spacing:.2px;
  background: linear-gradient(135deg, #6366f1, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.faq-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; margin-top: 8px; }
@media (max-width: 860px){ .faq-grid{ grid-template-columns: 1fr; } }

.faq-item{
  background: rgba(17,24,39,.66); border:1px solid rgba(255,255,255,.10);
  border-radius:16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); backdrop-filter: blur(6px); overflow:hidden;
  transition:border-color .22s, box-shadow .22s, transform .22s;
}
.faq-item:hover{ border-color: rgba(255,255,255,.18); box-shadow: 0 18px 50px rgba(0,0,0,.35); transform: translateY(-2px); }

.faq-q{
  width:100%; display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:12px;
  background: rgba(99,102,241,.14); color:#e5e7eb; border:0; padding:14px 16px; text-align:left;
  cursor:pointer; font-weight:600; font-size: clamp(14px,2.6vw,16px);
}
.faq-q:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(125,211,252,.35); }
.faq-q .badge{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px;
  background: linear-gradient(135deg,#6366f1,#22d3ee); color:#fff; font-weight:700; font-size:14px;
  box-shadow: 0 6px 18px rgba(34,211,238,.25);
}
.faq-q .label{ color:#e5e7eb; opacity:.95; }
.faq-q .chev{ transition: transform .24s ease; opacity:.9; }
.faq-q[aria-expanded="true"] .chev{ transform: rotate(180deg); }

.faq-a{
  max-height:0; overflow:hidden; background: rgba(11,18,36,.35);
  border-top:1px solid rgba(255,255,255,.08);
  transition:max-height .30s ease;
}
.faq-a[aria-hidden="false"]{ max-height: 600px; } /* hauteur max suffisante pour une réponse longue */
.faq-content{ padding: 0 16px 16px; }
.faq-a[aria-hidden="true"] .faq-content{ padding: 0 16px; }
.faq-a p{ color:#e5e7eb; line-height:1.6; }

/* FAQ : 1 question par ligne sur tous les écrans */
.faq-grid{
  grid-template-columns: 1fr !important;  /* force 1 colonne */
  max-width: 900px;                        /* largeur confortable */
  margin: 8px auto 0;                      /* centrage */
  gap: 14px;                               /* espacement entre items */
}
.faq-item{ width:100%; }

/* === Outils : lisibilité + largeur de cartes === */
.tools .container{
  max-width: 1280px;            /* élargit uniquement cette section */
}

/* Grille : 3 colonnes maxi sur desktop, 2 en moyen, 1 en mobile */
.tools .grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1200px){
  .tools .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .tools .grid{ grid-template-columns: 1fr; }
}

/* Cartes : texte plus lisible */
.tools .card{
  text-align: left;             /* meilleur confort de lecture */
  padding: 22px 22px 20px;
}
.tools .card h3{
  margin-top: 6px;
  margin-bottom: 10px;
}
.tools .card p,
.tools .card li{
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.7;
}
.tools .bullets{
  max-width: none;              /* pas de contrainte inutile */
  padding-left: 18px;
}
.tools .bullets li{ margin: 8px 0; }

/* Vidéos intégrées : léger espace supplémentaire */
.tools .video-slot{ margin-top: 14px; }

/* ===== Outils : 4 cartes sur la même ligne (desktop), lisibilité ++ ===== */
.tools .container{
  max-width: 1500px;                 /* plus large que le container global */
  width: calc(100% - 32px);
}

/* 4 colonnes confortables sur desktop */
.tools .grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: 20px;
}

/* Garde la responsivité quand l’écran rétrécit */
@media (max-width: 1100px){
  .tools .grid{ grid-template-columns: repeat(3, minmax(260px, 1fr)); }
}
@media (max-width: 840px){
  .tools .grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 560px){
  .tools .grid{ grid-template-columns: 1fr; }
}

/* Lisibilité des cartes (si pas déjà appliqué) */
.tools .card{ text-align:left; padding: 22px 22px 20px; }
.tools .card h3{ margin: 6px 0 10px; }
.tools .card p,
.tools .card li{ font-size: clamp(14px, 1.7vw, 16px); line-height: 1.7; }
.tools .bullets{ max-width: none; padding-left: 18px; }
.tools .bullets li{ margin: 8px 0; }
.tools .video-slot{ margin-top: 14px; }

/* ==== RYTHME VERTICAL GLOBAL — ESPACES + LISIBILITÉ ==== */
:root{
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
}

/* Titres & textes */
:where(h1,h2,h3,h4){ line-height:1.2; }
h1{ margin-bottom: var(--s-4); }
h2{ margin: 0 0 var(--s-4); }
h3{ margin: var(--s-3) 0 var(--s-3); }
h4{ margin: var(--s-3) 0 var(--s-2); }

p{ margin-bottom: var(--s-3); }
:where(ul,ol){ margin: var(--s-2) auto var(--s-4) auto; }
.bullets{
  margin: var(--s-2) auto var(--s-4) auto !important;
  padding-left: 22px !important;
}
.bullets li{ margin: 10px 0 !important; }

/* Espacement naturel des éléments dans chaque section */
section .container > * + *{ margin-top: var(--s-4); }

/* Hero : un peu plus d’air sous le paragraphe & boutons */
.hero p{ margin: 0 auto var(--s-4) !important; }
.cta-row{ gap: 14px !important; margin-top: var(--s-3); }

/* Cartes (outils, etc.) */
.card{ padding: 24px !important; }
.card h3{ margin: 12px 0 !important; }
.card h4{ margin: 16px 0 8px !important; }
.card .video-slot{ margin-top: var(--s-3) !important; }

/* Grilles : inter-cartes un peu plus large */
.grid{ gap: 24px !important; }
.tools .grid{ gap: 24px !important; }

/* Tableau comparatif : cellules un peu plus spacieuses */
.table th, .table td{ padding: 16px !important; }

/* Guide & newsletter */
.guide-grid{ gap: 20px !important; }
.newsletter{ gap: 12px !important; }
.newsletter + .hint{ margin-top: var(--s-2); }

/* FAQ : plus d’espace entre items et dans les panneaux */
.faq-grid{ gap: 18px !important; }
.faq-q{ padding: 16px !important; }
.faq-a .faq-content{ padding: 0 16px 18px !important; }

/* Footer : respirations */
.footer .container{ gap: 16px !important; }
.footer nav{ gap: 18px !important; }

/* Sections : padding vertical légèrement accru partout */
section{ padding: clamp(52px, 7vw, 84px) 0 !important; }