/* ══════════════════════════════════════════════════════════════════════════
   Swybe — Pages légales (CSS partagé)
   CGU · Confidentialité · Mentions · Aide · 404
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #5E33FF;
  --bg: #000;
  --surface: #111;
  --border: rgba(255,255,255,0.08);
  --text: #fff;
  --text2: rgba(255,255,255,0.6);
  --text3: rgba(255,255,255,0.35);
  --red: #FF453A;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--muted, #9b95ad); }

/* ── Navigation ──────────────────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
}
.nav .brand img { height: 44px; width: auto; display: block; }
.back { font-size: 14px; color: var(--text2); }

/* ── Contenu principal ───────────────────────────────────────────────────── */
.wrap { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }

h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 12px; }
.meta { font-size: 14px; color: var(--text3); margin-bottom: 40px; }
h2 { font-size: 18px; font-weight: 600; margin: 36px 0 14px; color: var(--text); }
p { color: var(--text2); margin-bottom: 12px; font-size: 15px; }
ul { color: var(--text2); padding-left: 20px; margin-bottom: 12px; font-size: 15px; }
li { margin-bottom: 6px; }
strong { color: var(--text); }

/* ── Bloc contact / alternatif ───────────────────────────────────────────── */
.contact-box,
.alt-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-top: 40px;
}
.contact-box p,
.alt-box p { margin: 0 0 8px; color: var(--text2); }
.contact-box p:last-child,
.alt-box p:last-child { margin: 0; }
.alt-box h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--text); }

/* ── Bloc highlight (info violet) ───────────────────────────────────────── */
.highlight {
  background: rgba(94,51,255,0.08);
  border: 1px solid rgba(94,51,255,0.2);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 24px 0;
}
.highlight p { margin: 0; color: var(--text2); }

/* ── Bloc avertissement (rouge) ──────────────────────────────────────────── */
.warning {
  background: rgba(255,69,58,0.08);
  border: 1px solid rgba(255,69,58,0.25);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 24px 0;
}
.warning p { color: rgba(255,69,58,0.9); margin: 0; font-size: 14px; }

/* ── Étapes numérotées ───────────────────────────────────────────────────── */
.steps { list-style: none; padding: 0; margin-bottom: 24px; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  color: var(--text2);
  font-size: 15px;
}
.steps li::before {
  content: counter(step);
  min-width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Pills (bases légales RGPD) ──────────────────────────────────────────── */
.pill {
  display: inline-block;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--text);
  border-radius: 100px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 500;
}

/* ── Placeholder (données à compléter) ──────────────────────────────────── */
.placeholder {
  background: rgba(94,51,255,0.1);
  border: 1px dashed rgba(94,51,255,0.4);
  border-radius: 8px;
  padding: 2px 10px;
  display: inline-block;
  font-size: 13px;
  color: var(--primary);
  margin: 2px 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width: 640px) {
  .nav { padding: 12px 20px; }
  .nav .brand img { height: 38px; }
  .wrap { padding: 32px 20px 60px; }
  h1 { font-size: 26px; }
}


/* ── Pied de page légal ───────────────────────────────────────────────────
   Ajouté le 19/08/2026 : les pages légales n'avaient aucun lien entre elles. */
.legal-footer {
  /* ⚠️ IDENTIQUE au pied de page de l'accueil (.footer dans index.html).
     Toute retouche ici doit être reportée là-bas, et inversement. */
  border-top: 1px solid rgba(255,255,255,0.10);
  max-width: 1180px;
  margin: 56px auto 0;
  padding: 30px clamp(20px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px 32px;
  text-align: center;
}
.legal-footer-brand {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.5px;
  color: #fff;
}
.legal-footer nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}
.legal-footer a,
.legal-footer span[aria-current] {
  font-size: 13px;
  color: #8a8a95;
  text-decoration: none;
  transition: color 0.2s ease;
}
.legal-footer a:hover { color: #fff; }
/* La page en cours n'est pas un lien : elle se distingue en blanc. L'accueil
   n'a pas cet etat, il n'est jamais « la page en cours » d'un pied legal. */
.legal-footer span[aria-current] { color: #fff; font-weight: 600; }
.legal-footer-copy {
  margin: 0;
  font-size: 13px;
  color: #62626c;
}

/* ── Page d'aide (FAQ) ──────────────────────────────────────────────────── */
.hero-aide {
  text-align: center;
  margin-bottom: 40px;
}
.hero-aide h1 { margin-bottom: 12px; }
.hero-aide p { color: var(--text2); max-width: 480px; margin: 0 auto; }

.faq { list-style: none; margin-bottom: 40px; }
.faq details {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
}
.faq details[open] { background: rgba(255,255,255,0.05); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  float: right;
  font-size: 20px;
  color: var(--text2);
}
.faq details[open] summary::after { content: '−'; }
.faq .reponse { margin-top: 12px; color: var(--text2); }
.faq .reponse .steps { margin-top: 16px; }

/* ── Pied de page, mobile/tablette (identique a l'accueil, index.html) ────── */
@media (max-width:860px) {
  .legal-footer{flex-direction:column;justify-content:center;text-align:center}
}
@media (max-width:460px) {
  .legal-footer{padding:20px}
  /* Les liens se regroupent naturellement, centres, au lieu d'une colonne
     stricte d'un lien par ligne (moins lineaire, plus range visuellement). */
  .legal-footer nav{justify-content:center;gap:8px 20px}
  /* Force 3 liens sur la premiere ligne, 2 sur la seconde, quelle que soit la
     largeur exacte de l'ecran (sans ca, le nombre par ligne varie au hasard
     selon la longueur des mots et peut laisser un seul lien isole). */
  .footer-break{flex-basis:100%;height:0}
}

/* ── Sections dépliables (CGU, confidentialité, mentions) ────────────────────
   Même matière que la FAQ de /aide/. Un document légal de 30 articles est
   illisible d'un bloc : on n'ouvre que ce qu'on cherche. Le texte reste
   entièrement dans la page — rien n'est chargé après coup, donc il reste
   lisible par les moteurs, les lecteurs d'écran et les examinateurs. */
details.section {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.03);
}
details.section[open] { background: rgba(255,255,255,0.05); }
details.section > summary {
  cursor: pointer;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 48px;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--text2);
}
details.section[open] > summary::after { content: '−'; }
details.section > summary:hover { color: #fff; }
.section-corps { padding: 0 20px 18px; }
.section-corps > *:first-child { margin-top: 4px; }