/* =================================================== */
/* styles.css (v24.3 - Final) - Refonte Complète et Optimisée  */
/* =================================================== */

/* Variables globales du thème sombre */
:root {
  --bg: #0f1020;
  --card: #16172b;
  --text: #f3f4f6;
  --muted: #c9cbe1;
  --primary: #6A5ACD; /* Lavande/Violet principal */
  --primary-2: #8b7cf6; /* Survol/secondaire */
  --outline: #2c2e46;
  --header-bg: rgba(15, 16, 32, 0.92);
  --header-h: 80px; /* Sera calculé par JS, mais valeur par défaut */
}

/* Variables du thème clair du GUIDE (Utilisées uniquement dans les sections claires) */
:root, .guide-content {
  --guide-bg: #F1F4F9; /* Gris très clair bleuté (Blanc cassé) */
  --guide-card-bg: #ffffff; /* Garde le fond des petites cartes en blanc pur */
  --guide-text: #1b1b1f; /* Texte sombre sur fond clair */
  --guide-muted: #5c5c64; /* Texte muet sur fond clair */
  --guide-border: #e0e0e0;
}

/* =================================================== */
/* GLOBAL RESET & TYPOGRAPHY                             */
/* =================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  /* Correction générale anti-débordement sur l'axe X */
  overflow-x: hidden;
}
h1, h2, h3 { line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw + 1rem, 3.5rem); } /* Responsive font size */
h2 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); margin-bottom: 1.5rem; }
h3 { font-size: clamp(1.25rem, 3vw + 1rem, 1.75rem); }
a { color: inherit; text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-2); }

/* UTILITAIRES */
.container { max-width: 1120px; margin: 0 auto; padding: 16px; }
.flex { display: flex; gap: 16px; }
.between { justify-content: space-between; }
.center { align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.mt-24 { margin-top: 24px; }
.text-center { text-align: center; }

/* BOUTONS (Button Base) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-2);
}
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--outline);
}
.btn-secondary:hover {
  border-color: var(--primary-2);
  color: var(--primary-2);
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--outline);
}
.btn-outline:hover {
  background: var(--outline);
  color: var(--text);
}
.btn.lg { padding: 14px 24px; font-size: 1rem; }

/* =================================================== */
/* HEADER & FOOTER                                     */
/* =================================================== */
.site-header {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--outline);
}
main {
  /* Le JS va définir --header-h, mais on utilise la valeur par défaut pour éviter le flash */
  margin-top: calc(var(--header-h, 80px) + env(safe-area-inset-top, 0)); 
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.25rem; }
.top-cta { display: flex; gap: 10px; }

/* --------------------------------------------------- */
/* OPTIMISATION MOBILE DU HEADER (Media Query - V24.3) */
/* --------------------------------------------------- */
@media (max-width: 768px) {
  /* 1. MISE EN PAGE SUR DEUX LIGNES (Flex-Direction Column) */
  .site-header .container { 
    /* Le conteneur entier passe en colonne */
    flex-direction: column; 
    /* Aligne tous les éléments au centre */
    align-items: center; 
    padding-top: 10px; 
    padding-bottom: 10px;
    gap: 10px; /* Espace entre la marque et les boutons */
  }
  
  /* 2. COMPACTAGE ET CENTRAGE DE LA MARQUE */
  .brand {
    width: 100%;
    justify-content: center; /* Centre la marque */
    font-size: 1.2rem; 
    gap: 8px;
    line-height: 1.2; 
  }
  .brand img {
    width: 28px;
    height: 28px;
  }
  
  /* 3. ALIGNEMENT HORIZONTAL DES BOUTONS (RANGÉE 2) */
  .top-cta { 
    width: 100%; /* Prend toute la largeur disponible */
    justify-content: center; /* Centre les boutons */
    gap: 10px; /* Espacement standard entre les boutons */
  }

  /* FIX 1 : Masque le bouton Chemin de Vie de manière absolue sur mobile */
  .top-cta .btn.btn-secondary { 
    display: none !important;  
  }
  
  /* FIX 2 : Ajuste la marge supérieure du contenu principal pour la page guide (contenu caché) */
  body.guide-2026 main { 
    margin-top: 150px !important; 
  }
  
  /* FIX 3 : Correction du débordement horizontal (sections claires/sombres) */
  .section-part-light .container,
  .section-part-dark .container {
    padding-left: 0;
    padding-right: 0;
  }
  .guide-content .calc-form,
  .guide-content .signup2026,
  .guide-content .meaning-grid,
  .guide-content .meanings-box {
    padding-left: 16px; 
    padding-right: 16px; 
  }
  
  /* FIX 4 : Empêche l'image Hero de déborder (problème visuel) */
  .hero-media-wrapper { 
      max-width: 100%;
      overflow-x: hidden; 
  }
  .hero-media-img img {
      width: 100%;
      max-width: 100%; /* Retire la contrainte desktop de 320px */
  }
  
  /* STYLES DES BOUTONS DE LA RANGÉE 2 */
  .top-cta .btn {
    flex-grow: 0; 
    flex-shrink: 1; 
    min-width: 0; 
    padding: 10px 12px; 
    text-align: center;
    line-height: 1.1;
  }
  
  /* Bouton d'appel */
  .btn.btn-call {
    font-size: 0.75rem; 
    padding: 8px 10px;
    white-space: nowrap; 
  }

  /* Boutons primaire (Consulter) */
  .btn-primary {
    font-size: 0.8rem; 
  }
}
/* FIN OPTIMISATION MOBILE DU HEADER */


.site-footer { padding: 20px 0; background: #0c0d1a; border-top: 1px solid var(--outline); }
.footer-content { 
  font-size: 0.8rem; 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  text-align: center; 
}

/* DÉBUT FOOTER RESPONSIVE */
.footer-line2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-line2 a { 
  margin: 0; 
  color: var(--muted); 
  white-space: nowrap; 
}
.footer-line2 a:hover { color: var(--text); }

.footer-links-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

@media (max-width: 700px) {
  .footer-line2 {
    flex-direction: column; 
    gap: 5px; 
  }
  .footer-links-group {
    flex-direction: column; 
    gap: 5px;
  }
}
/* FIN FOOTER RESPONSIVE */


/* =================================================== */
/* INDEX PAGE LAYOUT (Thème Sombre)                      */
/* =================================================== */
.hero { padding: 40px 0 60px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 800px) { 
  .grid2 { 
    grid-template-columns: 1fr; 
    text-align: center; 
  }
  
  /* CORRECTION XUI : Retire l'inversion d'ordre pour que le texte arrive avant l'image sur mobile */
  .hero-media-wrapper { 
    order: 0; /* Ordre par défaut, défini par le HTML (Image après le Texte) */
    margin-top: 20px;
  } 
  
} /* FIN DE LA MEDIA QUERY 800PX */

.hero-text .highlight { color: var(--primary-2); }
.hero-text .subtitle { font-size: 1.15rem; color: var(--muted); margin-top: 10px; }

.hero-media-wrapper { 
  margin: 0; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  position: relative;
}
.hero-media-img img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}


/* Formulaires de Lead Index */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  padding-right: 15%; /* Espace pour l'image */
}
@media (max-width: 800px) { .lead-form { padding-right: 0; max-width: 400px; margin: 20px auto; } }

.lead-form input[type="email"] {
  height: 54px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #0c0d1a;
  color: #fff;
  border: 1px solid var(--outline);
  font-size: 1rem;
}
.lead-form input[type="email"]:focus { border-color: var(--primary); outline: none; }
.lead-form .consent { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--muted); }
.success { padding: 12px; background: #1f3d1f; border-radius: 8px; color: #a8dadc; margin-top: 15px; }
.hide { display: none !important; }

/* Cartes (Features et Related) */
.features, .related-articles { padding: 30px 0; }
.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.card {
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
.card h3 { margin-top: 0; }
.card p { flex-grow: 1; color: var(--muted); }
.card .btn { margin-top: 15px; align-self: flex-start; }
@media (max-width: 800px) { 
  .card { text-align: center; } 
  .card .btn { align-self: center; }
}

/* =================================================== */
/* GUIDE PAGE LAYOUT (body.guide-2026)                 */
/* =================================================== */
body.guide-2026 { background: var(--bg); color: var(--text); }
body.guide-2026 main { margin-top: calc(var(--header-h, 80px)); } /* Le JS va ajuster */

.breadcrumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; }
.breadcrumbs a { color: var(--primary-2); }

.hero-guide { padding: 30px 0 20px; position: relative; }
.grid2-guide { 
  display: grid; 
  grid-template-columns: 2fr 1fr;
  gap: 40px; 
  align-items: center;
}
@media (max-width: 900px) { .grid2-guide { grid-template-columns: 1fr; } }

/* CALCULATRICE */
.calc-box {
  background: var(--card);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid var(--outline);
}
.calc-box h2 { 
  margin-top: 0; 
  font-size: 1.5rem; 
  color: var(--primary-2); 
  text-align: center;
  margin-bottom: 15px;
}
.calc-form { display: flex; gap: 12px; align-items: center; }
.calc-form label { font-weight: 600; color: var(--text); }
.calc-form input[type="date"] {
  height: 48px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #0c0d1a;
  color: #fff;
  border: 1px solid var(--outline);
  font-size: 1rem;
}
.calc-form input[type="date"]:focus { border-color: var(--primary); outline: none; }
.calc-form .btn { 
  flex-shrink: 0;
}
.calc-result { 
  margin-top: 15px; 
  padding: 10px;
  background: #1f3d1f; 
  border-radius: 8px; 
  color: #a8dadc; 
  font-weight: 600;
  text-align: center;
}
/* Styles spécifiques pour le résultat du calcul */
.calc-result .badge {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 6px;
  margin-left: 5px;
}
@media (max-width: 600px) {
  .calc-form { flex-direction: column; gap: 15px; align-items: stretch; }
  .calc-form label { text-align: left; }
}

/* FORMULAIRE TÉLÉCHARGEMENT PDF */
.download-box { margin-top: 30px; }
.download-box h2 { font-size: 1.5rem; color: var(--text); margin-top: 0; }
.signup2026 { display: flex; gap: 10px; }
.signup2026 input {
  flex-grow: 1;
  height: 50px;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid var(--outline);
  background: #0c0d1a;
  color: #fff;
}
.signup2026 input:focus { border-color: var(--primary); outline: none; }
.signup2026 .btn { flex-shrink: 0; }
#downloadSuccess { margin-top: 10px; }
@media (max-width: 600px) { .signup2026 { flex-direction: column; align-items: stretch; } }

/* =================================================== */
/* CONTENU DU GUIDE (Structure et Transition Douce)    */
/* =================================================== */

/* 1. GUIDE CONTENT : Le conteneur principal utilise le FOND SOMBRE de la page */
.guide-content { 
  background: var(--bg); 
  color: var(--text); 
  padding: 50px 0; 
}

/* 2. SECTION CLAIRE : Crée un bloc "flottant" clair sur le fond sombre */
.section-part-light {
  background: var(--guide-bg); /* Gris bleuté doux */
  color: var(--guide-text); 
  padding: 40px 0;
  border-radius: 16px; 
  /* Ombre diffuse et subtile */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), 0 0 10px rgba(106, 90, 205, 0.05);
  /* Marge/Centrage par défaut (Desktop et Mobile - 16px de marge latérale) */
  margin: 30px 16px; 
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* 3. SECTION SOMBRE : Crée un bloc "flottant" sombre (Amour/Carrière) */
.section-part-dark {
  background: var(--card); /* Utilise la couleur sombre des cartes */
  color: var(--text);
  padding: 40px 0;
  border-radius: 12px;
  margin: 30px 16px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* --- CORRECTIONS COULEURS / HÉRITAGE --- */

/* Titres */
.section-part-light h2, 
.section-part-light h3 { 
  color: var(--guide-text); 
}
.section-part-dark h2, 
.section-part-dark h3 { 
  color: var(--text); 
}

/* Paragraphes sur Fond Clair */
.section-part-light p {
    color: var(--guide-text);
}
.meaning-item p { 
    color: var(--guide-muted); 
}


/* GRID SIGNIFICATIONS */
.meaning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.meaning-item {
  background: var(--guide-card-bg); /* Blanc pur */
  border: 1px solid var(--guide-border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.meaning-item h3 { 
  color: var(--primary); 
  margin-top: 0; 
  font-size: 1.35rem; 
}


/* MEANINGS BOXES (Amour/Carrière) */
.meanings-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.meanings-box article {
  background: var(--card); /* Utilise la couleur sombre des cartes */
  border: 1px solid var(--outline);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
}
.meanings-box h3 { color: var(--primary-2); margin-top: 0; }
@media (max-width: 700px) { .meanings-box { grid-template-columns: 1fr; } }

/* FAQ */
.faq-list { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  margin-top: 20px; 
}
.faq-list details {
  background: var(--guide-card-bg); /* Blanc pur */
  border: 1px solid var(--guide-border);
  border-radius: 12px;
  padding: 10px 15px;
}
.faq-list summary { 
  font-weight: 600; 
  cursor: pointer;
  padding: 5px 0;
  list-style: none;
  position: relative;
  color: var(--guide-text); 
}
.faq-list summary::before {
  content: "▶";
  display: inline-block;
  transform: rotate(0);
  transition: transform 0.2s;
  margin-right: 10px;
  color: var(--primary-2);
  font-size: 0.8em;
}
.faq-list details[open] summary::before {
  transform: rotate(90deg);
}
.faq-list details > div { 
  padding: 10px 0 5px 25px; 
  color: var(--guide-muted); 
}


/* ===== PATCH VC 2026 — START ===== */

/* Accent doux sur le titre "Voyance & Consultation" */
.brand span{
  background: linear-gradient(90deg, #E9E2FF 0%, #BCA8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* Bouton d'appel dans le header */
.btn.btn-call{
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(2px);
}
.btn.btn-call:hover{
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.12);
}

/* Icône calendrier claire sur fond sombre */
input[type="date"]{
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.4);
  opacity: 0.9;
}

/* Saut de ligne contrôlé (desktop uniquement) */
.br-md{ display:none; }
@media (min-width: 768px){
  .br-md{ display:inline; }
}

/* ===== PATCH VC 2026 — END ===== */
.error{background:#3b0d0d;color:#ffd7d7;padding:.75rem 1rem;border-radius:.5rem;margin-top:.5rem;}
.success{background:#0d2f1a;color:#d0ffe2;padding:.75rem 1rem;border-radius:.5rem;margin-top:.5rem;}
.hero-guide-media-wrapper img{max-width:380px;width:100%;height:auto;display:block;margin:0 auto;}

main .related, .related{ text-align:center !important; }
.related p{ margin:.35rem 0; }

/* =================================================== */
/* CORRECTIF VISIBILITÉ LIENS (.related) */
/* =================================================== */
.related a {
    color: var(--primary-2); /* Utilise la couleur d'accentuation (violet clair) */
    text-decoration: underline; /* Souligne le lien pour le rendre évident */
}

.related a:hover {
    color: var(--primary); /* Revenir à la couleur principale au survol */
    text-decoration: none; /* Enlève le soulignement au survol pour un effet visuel */
}
}
/* === HEADER TOUJOURS VISIBLE + OFFSET AUTO (safe final) === */
.site-header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* Espace réservé pour que le contenu ne passe pas sous le header */
:root { --header-h: 80px; }          /* valeur par défaut si JS pas encore chargé */
main { margin-top: calc(var(--header-h, 80px) + env(safe-area-inset-top, 0)); }

/* Ombre légère quand on scrolle (déjà gérée par app.js avec .scrolled) */
header.site-header.scrolled { box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
/* ================== MOBILE POLISH (21/10/2025) ================== */

/* 0) Règles globales anti-coupures */
h1, h2 { overflow-wrap: anywhere; word-break: break-word; }

/* 1) HERO — titre & sous-titre plus fluides sur mobile */
@media (max-width: 480px) {
  .hero .container { padding-left: 16px; padding-right: 16px; }
  .hero .hero-text h1{
    /* Taille qui s’adapte très bien entre 320–480px */
    font-size: clamp(1.9rem, 4.5vw + 1rem, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.2px;
    margin: 0.5rem 0 0.9rem;
    text-align: center;
  }
  .hero .subtitle{
    max-width: 36ch;
    margin: 0 auto 1.2rem;
    font-size: 1rem;
    line-height: 1.55;
    text-align: center;
  }
  .lead-form { gap: 10px; }
  .btn.lg { font-size: 1rem; padding: 0.95rem 1rem; }
}

/* 2) Grilles qui passent à 1 colonne proprement */
@media (max-width: 768px) {
  .grid3{ grid-template-columns: 1fr !important; gap: 18px; }
  .grid2{ grid-template-columns: 1fr !important; gap: 24px; }
  .hero-media-wrapper{ order: 2; margin-top: 12px; }
  .hero-text{ order: 1; }
}

/* 3) Sections larges → on les “resserre” sur mobile
   (Signification, Les 9 vibrations, FAQ sur Guide & Chemin de Vie) */
@media (max-width: 480px) {
  /* On vise les blocs au fond clair/arrondi habituels + nos conteneurs */
  .seo-content,
  .faq, .faq.container,
  .related-articles,
  .vibrations, .vibrations-section,
  .signification, .significations,
  .panel, .info-box {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Les cartes/accordéons ont un peu plus de respiration */
  .faq details, .card { margin-left: 0; margin-right: 0; }
}

/* 4) Texte “avant footer” — centrage & respiration (toutes pages) */
.related{
  text-align: center !important;
  margin: 0 auto 24px;
  padding: 0 16px;
  max-width: 700px;
  line-height: 1.55;
}
.related p{ margin: .4rem 0; }
/* === MOBILE POLISH #2 — 21/10/2025 ============================= */

/* 1) Texte avant footer : espace entre les 2 phrases */
.related p + p { margin-top: 0.9rem; }

/* 2) Réduction largeur + padding latéral des blocs clairs (FAQ / Significations / 9 Vibrations)
      sur les pages GUIDE & CHEMIN DE VIE */
@media (max-width: 480px) {
  /* FAQ */
  body.guide-2026 section.faq.container,
  body.chemin-de-vie section.faq.container,
  body.guide-2026 section.faq,
  body.chemin-de-vie section.faq {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Signification des Chemins de Vie / Les 9 vibrations */
  body.chemin-de-vie section.significations,
  body.chemin-de-vie section.signification,
  body.guide-2026 section.vibrations,
  body.guide-2026 section.vibrations-section {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Headers de ces sections un peu moins “massifs” sur petit écran */
  body.chemin-de-vie section.significations h2,
  body.chemin-de-vie section.signification h2,
  body.guide-2026 section.vibrations h2,
  body.guide-2026 section.vibrations-section h2,
  body.chemin-de-vie section.faq h2,
  body.guide-2026 section.faq h2 {
    font-size: clamp(1.3rem, 3.8vw + 0.6rem, 1.6rem);
    line-height: 1.2;
  }
}
/* === RESPONSIVE — SECTIONS TROP LARGES (FINAL) ================== */
/* Cible les sections au fond clair : Significations, Vibrations, FAQ
   des pages Guide & Chemin de Vie, et les resserre sur mobile/tablette. */

@media (max-width: 768px) {
  /* conteneur commun (large tablette) */
  body.guide-2026 section.faq,
  body.guide-2026 section.faq.container,
  body.guide-2026 section.vibrations,
  body.guide-2026 section.vibrations-section,
  body.chemin-de-vie section.faq,
  body.chemin-de-vie section.faq.container,
  body.chemin-de-vie section.signification,
  body.chemin-de-vie section.significations,
  body.chemin-de-vie section.vibrations,
  body.chemin-de-vie section.vibrations-section {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 18px;
    padding-right: 18px;
  }
  /* titre un peu moins massif sur tablette */
  body.guide-2026 section.faq h2,
  body.guide-2026 section.vibrations h2,
  body.guide-2026 section.vibrations-section h2,
  body.chemin-de-vie section.faq h2,
  body.chemin-de-vie section.signification h2,
  body.chemin-de-vie section.significations h2 {
    font-size: clamp(1.4rem, 2.5vw + 0.8rem, 1.8rem);
    line-height: 1.22;
  }
}

@media (max-width: 480px) {
  /* conteneur serré (mobile) */
  body.guide-2026 section.faq,
  body.guide-2026 section.faq.container,
  body.guide-2026 section.vibrations,
  body.guide-2026 section.vibrations-section,
  body.chemin-de-vie section.faq,
  body.chemin-de-vie section.faq.container,
  body.chemin-de-vie section.signification,
  body.chemin-de-vie section.significations,
  body.chemin-de-vie section.vibrations,
  body.chemin-de-vie section.vibrations-section,
  /* filets de sécurité si les classes sont légèrement différentes */
  body.guide-2026 section[class*="vibr"],
  body.chemin-de-vie section[class*="signif"],
  body.chemin-de-vie section[class*="faq"] {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* accordéons/cartes : respiration verticale */
  body.guide-2026 .faq details,
  body.chemin-de-vie .faq details,
  body.chemin-de-vie .card,
  body.guide-2026 .card {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 12px;
  }

  /* titres mobile encore plus doux */
  body.guide-2026 section.faq h2,
  body.guide-2026 section.vibrations h2,
  body.guide-2026 section.vibrations-section h2,
  body.chemin-de-vie section.faq h2,
  body.chemin-de-vie section.signification h2,
  body.chemin-de-vie section.significations h2 {
    font-size: clamp(1.25rem, 3.6vw + 0.6rem, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.2px;
  }
}

/* Texte avant footer : garder l’aération ajoutée */
.related p + p { margin-top: 0.9rem; }
.related { max-width: 700px; margin: 0 auto 24px; padding: 0 16px; text-align: center; line-height: 1.55; }
/* === RESPONSIVE FINAL – NARROW SECTIONS (catch-all) ============== */
/* Resserre TOUTES les sections (sauf le hero & les blocs "related") sur mobile,
   même si les classes diffèrent. Aucun changement côté desktop. */

@media (max-width: 480px) {
  /* GUIDE 2026 */
  body.guide-2026 main > section:not(.hero):not(.related):not(.related-articles) > * {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* CHEMIN DE VIE */
  body.chemin-de-vie main > section:not(.hero):not(.related):not(.related-articles) > * {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Titres un poil plus doux (toutes sections non-hero) */
  body.guide-2026 main > section:not(.hero) h2,
  body.chemin-de-vie main > section:not(.hero) h2 {
    font-size: clamp(1.25rem, 3.6vw + 0.6rem, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.2px;
  }

  /* Accordéons FAQ & cartes → respiration verticale */
  body.guide-2026 .faq details,
  body.chemin-de-vie .faq details,
  body.guide-2026 .card,
  body.chemin-de-vie .card {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 12px;
  }
}

/* Aération du texte avant footer (déjà ok, on confirme) */
.related { max-width: 700px; margin: 0 auto 24px; padding: 0 16px; text-align: center; line-height: 1.55; }
.related p + p { margin-top: 0.9rem; }
/* === FIX FAQ (GUIDE) — narrow section + children (mobile) ======= */
@media (max-width: 480px) {

  /* 1) Resserre toutes les sections du GUIDE sauf hero & related */
  body.guide-2026 main > section:not(.hero):not(.related):not(.related-articles) {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 2) Si la FAQ a un wrapper interne, on resserre aussi ses enfants directs */
  body.guide-2026 main > section:not(.hero):not(.related):not(.related-articles) > * {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 3) Titres moins massifs dans ces sections (dont la FAQ) */
  body.guide-2026 main > section:not(.hero) h2 {
    font-size: clamp(1.25rem, 3.6vw + 0.6rem, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.2px;
  }

  /* 4) Accordéons mieux aérés */
  body.guide-2026 .faq details {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 12px;
  }
}
/* === FIX FAQ (GUIDE & CDV) — section-part-light ================== */
@media (max-width: 480px) {
  /* Resserre le container interne de la section claire */
  body.guide-2026  .section-part-light > .container,
  body.chemin-de-vie .section-part-light > .container{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* H2 moins massif dans ces sections */
  body.guide-2026  .section-part-light h2,
  body.chemin-de-vie .section-part-light h2{
    font-size: clamp(1.25rem, 3.6vw + 0.6rem, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.2px;
  }

  /* Si la liste FAQ est en flex horizontal, on force la colonne */
  body.guide-2026  .section-part-light .faq-list,
  body.chemin-de-vie .section-part-light .faq-list{
    flex-direction: column;
    gap: 12px;
  }
}
/* === FIX #1 — Chemin de Vie : centrage parfait de la section claire === */
@media (max-width: 480px) {
  /* On centre le container interne de TOUTE section claire et on égalise les paddings */
  body.chemin-de-vie .section-part-light { 
    padding-left: 0 !important; 
    padding-right: 0 !important; 
  }
  body.chemin-de-vie .section-part-light > .container{
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 700px;
  }
  /* Au cas où la liste des cartes ajoute un décalage latéral */
  body.chemin-de-vie .significations,
  body.chemin-de-vie .signification,
  body.chemin-de-vie .significations .card{
    margin-left: auto;
    margin-right: auto;
  }
}

/* === FIX #2 — Guide 2026 : espace avant la section FAQ = trop grand === */
@media (max-width: 480px) {
  /* On réduit le bottom margin de la section précédente (vibrations) */
  body.guide-2026 section[class*="vibr"]{
    margin-bottom: 18px !important;
  }
  /* Et on réduit le top de la section FAQ (section-part-light) */
  body.guide-2026 .section-part-light{
    margin-top: 12px !important;
    padding-top: 18px;              /* doux avec le bord arrondi */
  }
  body.guide-2026 .section-part-light > .container{
    max-width: 700px;
    margin-inline: auto;
    padding-inline: 16px;
  }
}
.seo-link {
  color: #a98af5;
  font-weight: 600;
  text-decoration: underline;
}
.cookie-banner{
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  z-index: 99999;
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(12,13,26,0.96); /* ton sombre du site */
  color: var(--text, #f3f4f6);
  border: 1px solid var(--outline, #2c2e46);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.cookie-banner p{ margin:0; font-size:.95rem; line-height:1.45; }
.cookie-banner a{ color: var(--primary-2, #8b7cf6); text-decoration: underline; }
.cookie-actions{ display: flex; gap: 10px; }
.cookie-actions .btn{ padding: 8px 14px; font-size:.85rem; }
@media (max-width:560px){
  .cookie-banner{ grid-template-columns: 1fr; }
  .cookie-actions{ justify-content: end; }
}
/* ==== Compatibilité amoureuse : lisibilité des résultats ==== */

#compat-result-section .card {
    color: #f0f0f0 !important;
}

#compat-result-section .card h3 {
    color: #ffffff !important;
}

#compat-result-section .card p,
#compat-result-section .card span,
#compat-result-section .card .mini-text {
    color: #e6e6e6 !important;
}
/* ==== Compatibilité amoureuse : espacement des deux profils ==== */
.compat-results-grid {
    display: flex;
    gap: 32px !important; /* espace horizontal entre les deux cartes */
}

@media (max-width: 768px) {
    .compat-results-grid {
        flex-direction: column;
        gap: 20px !important;
    }
}
/* ==== Compatibilité amoureuse : espace entre les cartes du haut et la carte du bas ==== */
#compat-result-section .compat-results-grid {
    margin-bottom: 32px; /* espace entre la rangée du haut et la carte du bas */
}

@media (max-width: 768px) {
    #compat-result-section .compat-results-grid {
        margin-bottom: 24px;
    }
}