/*
Theme Name:  Dreamolab Mystic (Astra Child)
Theme URI:   https://dreamolab.fr
Description: Thème enfant Astra pour Dreamolab — design "Mystic" aligné sur les rapports PDF Jyotish (ink #1a1d3a, parchemin #f4ead5, or #c8a25a). Patterns Spectra/Gutenberg : Hero, Technologie, Tarifs, FAQ, CTA.
Author:      Dreamolab
Template:    astra
Version:     1.6.9
Text Domain: dreamolab-mystic
*/

/* =============================================================================
   DREAMOLAB MYSTIC — style.css
   -----------------------------------------------------------------------------
   Version : 1.6.9
   Changelog :
     1.6.9 (2026-09-25) — En-tête transparent sur toutes les pages à hero étoilé :
       quand Astra pose body.ast-theme-transparent-header, le hero (.dml-hero) reçoit
       100 px de padding supplémentaire en haut pour passer sous le menu (remplace le
       wp:spacer de 100 px de l'accueil, retiré en 3.0.10 ; même règle pour les dix pages).
     1.6.8 (2026-09-24) — Témoignages : citation 1,2 rem → 19 px (valeur du design) et
       text-wrap: pretty (plus de guillemet fermant orphelin en fin de citation).
     1.6.7 (2026-09-24) — Témoignages : marge basse de la section 4,5 → 6,5 rem (air avant la FAQ).
     1.6.6 (2026-09-24) — Témoignages : cartes sur fond crème (parchemin) même dans la
       section encre, comme le design — texte encre/anthracite ; padding 1,6 → 2 rem.
     1.6.5 (2026-09-24) — Témoignages : cartes .dml-quote (étoiles dorées, citation
       Cormorant italique, pastille-initiale dégradé or, nom en petites capitales, ville),
       d'après le bloc « Témoignages » du design ; posées sur la section encre existante.
     1.6.4 (2026-09-24) — Tarifs v2 : montant 3 → 3,15 rem ; note sous les boutons
       (« ✦ Aucune inscription requise » / « ✦ Paiement unique… ») espacée de 1,5 rem —
       correction : sa marge était annulée par « .wp-block-column > * + * » (spécificité),
       d'où l'effet « collé » ; règle dédiée de spécificité supérieure.
     1.6.3 (2026-09-23) — Tarifs v2 : mention à droite du prix légèrement réduite
       (0,8 → 0,72 rem) et montant 3,2 → 3 rem, pour que « paiement unique · livré par
       email en quelques minutes » tienne sur la ligne du prix dans la carte premium.
     1.6.2 (2026-09-23) — Tarifs v2 : le ruban « ★ Le rapport complet » de la carte
       premium est posé à cheval sur le bord supérieur de la carte (pastille dorée
       centrée, comme le .ptag du design de référence), au lieu d'être en tête du
       contenu.
     1.6.1 (2026-09-23) — Recette Lif sur la page 279 :
       - Chapitres I–IV : chiffres romains dorés et sous-titre sur la même ligne,
         texte dessous sans espace (spécificité relevée face aux marges de flux
         Gutenberg « body .is-layout-flow > * + * »).
       - .dml-lead-sanskrit doré, stats en Cormorant (mêmes règles, spécificité
         relevée) ; les stats passent à 5 badges (Swiss Ephemeris, Whole Sign).
       - Tarifs : variante .dml-pricing-v2 — coche ✔ dorée, prix et mention sur
         une ligne (flex baseline), un seul filet sous le prix, plus de filets
         entre items, bouton fantôme lisible sur parchemin (encre + bord doré),
         boutons alignés en bas de carte et légèrement plus grands.
     1.6.0 (2026-09-22) — Accueil v3 : classes des sections « Le rapport »,
       « La méthode » et « Deux façons de commencer » (design Claude « Vedic
       Jyotisa Astro (Remix Feuilles) », transposé sur les tokens Mystic).
       - .dml-chapters / .dml-chapter : liste de chapitres numérotés (I–IV).
       - .dml-stats / .dml-stat : trois repères chiffrés sous un texte.
       - .dml-lead-sanskrit : sous-titre serif italique doré.
       - .dml-parch-2 : variante parchemin plus soutenue (sections adjacentes).
       - Tarifs : .dml-plan-name, .dml-plan-tagline, .dml-note, boutons pleine
         largeur, item .is-muted ; .dml-price inchangé.
       - Aucune règle existante modifiée. Les composants livre feuilletable et
         pipeline vivent dans le plugin dreamolab-accueil (shortcodes).
     1.5.0 (2026-06-12) — Placement naturel des étoiles ("blue noise").
       - Remplacement du motif régulier (tuiles 240/320px, 7+4 étoiles) qui
         créait des lignes d'étoiles alignées défilant en bloc ("train de
         satellites"), par un placement Poisson-disk torique : 26 étoiles
         (lointain) + 16 (proche), dispersées sans alignement ni amas.
       - Multi-tuiles superposées : lointain 600/300/200px (boucle 600px),
         proche 640/320px (boucle 640px). Les périodes 600 vs 640 ne se
         resynchronisent qu'à 9600px → aucune répétition perceptible.
       - Translations keyframes ajustées (600/640px) ; durées portées à
         400s/180s pour conserver EXACTEMENT la vitesse de dérive v1.4.2.
     1.4.2 (2026-06-12) — Scintillement adouci et ralenti : cycle 5s → 9s,
       opacité minimale 0.55 → 0.80 (le battement synchronisé de la couche
       proche était perçu comme un clignotement).
     1.4.1 (2026-06-12) — Étoile filante A : délai initial 2s → 3s pour un
       premier passage visible ~3 s après le chargement, avant scroll.
     1.4.0 (2026-06-12) — Ciel étoilé animé sur les sections sombres.
       - .dml-dark.dml-stars::before converti en tuile répétée 240px
         (teintes chaudes conservées) avec dérive lente 160s (GPU).
       - Ajout ::after : 2e couche 320px plus rapide (90s, parallaxe),
         étoiles dorées du cover + scintillement 5s.
       - isolation:isolate sur .dml-dark + z-index:-1 sur les couches :
         étoiles sous le contenu, au-dessus du fond radial ink.
       - Étoiles filantes optionnelles (.dml-shooting--a/--b, cycles
         12s/17s ; requiert le snippet HTML dml-shooting.html).
       - prefers-reduced-motion : étoiles statiques, filantes masquées.
       - Fix typo : suppression du sélecteur ".dml-dml-dark h3".
     1.3.0 (2026-06-04) — Produit synastrie : patterns synastrie (page dédiée +
       formulaire [dreamolab_synastrie_form]) et synastrie-promo (section accueil).
     1.2.0 (2026-06-04) — 8 patterns de pages : mentions légales, confidentialité,
       CGV, merci, produit (Grand Livre), comment-ça-marche, à-propos, glossaire.
     1.0.1 (2026-06-02) — Pattern CTA : placeholder remplacé par le shortcode
       [dreamolab_birth_form] (plugin Dreamolab — Formulaire de naissance).
     1.0.0 (2026-06-01) — Création initiale.
       - Tokens design repris du rapport PDF (Jyotish_Report.html :root).
       - Import Google Fonts (Cormorant Garamond/SC, Inter, JetBrains Mono).
       - Styles : sections claire/sombre, hero étoilé, gold-rule, eyebrow,
         cartes, table de tarifs (gratuit vs premium 29€), accordéon FAQ.
   Dépendance : thème parent "astra" actif.
   ========================================================================== */

/* --- Design tokens (source : Jyotish_Report.html) ------------------------- */
:root {
  --dml-ink:        #1a1d3a;
  --dml-ink-2:      #262a52;
  --dml-ink-soft:   #3a3f6b;
  --dml-parch:      #f4ead5;
  --dml-parch-2:    #ede0c2;
  --dml-parch-3:    #e3d2ad;
  --dml-gold:       #c8a25a;
  --dml-gold-deep:  #a07a3a;
  --dml-saffron:    #b56a2a;
  --dml-char:       #2a2520;
  --dml-char-soft:  #4a4238;
  --dml-rule:       rgba(42, 37, 32, 0.25);
  --dml-rule-soft:  rgba(42, 37, 32, 0.12);
  --dml-rule-gold:  rgba(200, 162, 90, 0.30);

  --dml-font-serif: 'Cormorant Garamond', Georgia, serif;
  --dml-font-sc:    'Cormorant SC', Georgia, serif;
  --dml-font-body:  'Inter', system-ui, -apple-system, sans-serif;
  --dml-font-mono:  'JetBrains Mono', ui-monospace, monospace;
}

/* --- Base typographie ----------------------------------------------------- */
body {
  font-family: var(--dml-font-body);
  color: var(--dml-char);
}
h1, h2, h3, h4,
.entry-title,
.ast-archive-title {
  font-family: var(--dml-font-serif);
  font-weight: 500;
  color: var(--dml-ink);
  letter-spacing: -0.005em;
}

/* =============================================================================
   UTILITAIRES (à appliquer via "Classe(s) CSS additionnelle(s)" dans l'éditeur)
   ========================================================================== */

/* Eyebrow : petit sur-titre en petites capitales dorées */
.dml-eyebrow {
  font-family: var(--dml-font-sc);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--dml-gold-deep);
}

/* Mono / Sanskrit */
.dml-mono     { font-family: var(--dml-font-mono); letter-spacing: 0.04em; font-size: 0.78rem; }
.dml-sanskrit { font-family: var(--dml-font-serif); font-style: italic; color: var(--dml-ink); }

/* Filet doré décoré d'un losange central */
.dml-gold-rule {
  position: relative;
  height: 1px;
  margin: 1.4rem auto;
  width: 100%;
  max-width: 240px;
  background: linear-gradient(90deg, transparent, var(--dml-gold) 20%, var(--dml-gold) 80%, transparent);
}
.dml-gold-rule::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px;
  background: var(--dml-gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* --- Sections sombres (hero, bannières) ----------------------------------- */
.dml-dark {
  background: var(--dml-ink);
  background-image: radial-gradient(ellipse at 50% 8%, #2c3170 0%, var(--dml-ink) 55%, #0e1028 100%);
  color: var(--dml-parch);
  position: relative;
  overflow: hidden;
  isolation: isolate; /* confine le z-index:-1 des couches d'étoiles */
}
.dml-dark h1, .dml-dark h2, .dml-dark h3, .dml-dark h4 { color: var(--dml-parch); }
.dml-dark p { color: rgba(244, 234, 213, 0.82); }
.dml-dark .dml-eyebrow { color: var(--dml-gold); }

/* Champ d'étoiles animé — placement "blue noise" (v1.5.0) -------------------
   Couche lointaine : 3 sous-motifs superposés (tuiles 600/300/200px, qui
   divisent toutes 600) → étoiles dispersées comme une vraie voûte, sans
   alignement perceptible. La translation finale (600px) est un multiple de
   chaque tuile → boucle invisible. */
.dml-dark.dml-stars::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: calc(100% + 600px);
  height: calc(100% + 600px);
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(0.9px 0.9px at 271.4px 335.9px, rgba(255,250,230,0.38) 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 554.5px 279.4px, rgba(255,250,230,0.43) 50%, transparent 51%),
    radial-gradient(0.6px 0.6px at 110.8px 307.1px, rgba(255,250,230,0.39) 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 377.9px 475.8px, rgba(255,250,230,0.41) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 56.5px 182.0px,  rgba(255,250,230,0.51) 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 54.4px 485.8px,  rgba(255,250,230,0.40) 50%, transparent 51%),
    radial-gradient(1.0px 1.0px at 416.1px 25.1px,  rgba(255,250,230,0.47) 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 589.3px 578.9px, rgba(255,250,230,0.58) 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 392.4px 369.3px, rgba(255,250,230,0.41) 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 94.5px 9.0px,    rgba(255,250,230,0.44) 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 317.0px 35.7px,  rgba(255,250,230,0.43) 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 264.3px 505.5px, rgba(255,250,230,0.50) 50%, transparent 51%),
    radial-gradient(1.0px 1.0px at 274.4px 166.9px, rgba(255,250,230,0.62) 50%, transparent 51%),
    radial-gradient(0.6px 0.6px at 504.1px 424.7px, rgba(255,250,230,0.61) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 189.2px 137.8px, rgba(255,250,230,0.46) 50%, transparent 51%),
    radial-gradient(0.6px 0.6px at 459.8px 240.2px, rgba(255,250,230,0.47) 50%, transparent 51%),
    radial-gradient(0.6px 0.6px at 277.5px 284.6px, rgba(255,250,230,0.53) 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 177.6px 127.1px, rgba(255,250,230,0.42) 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 159.0px 39.1px,  rgba(255,250,230,0.37) 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 57.6px 133.4px,  rgba(255,250,230,0.41) 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 153.8px 220.3px, rgba(255,250,230,0.32) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 244.8px 58.7px,  rgba(255,250,230,0.49) 50%, transparent 51%),
    radial-gradient(0.6px 0.6px at 136.4px 18.3px,  rgba(255,250,230,0.49) 50%, transparent 51%),
    radial-gradient(0.6px 0.6px at 166.9px 103.0px, rgba(255,250,230,0.43) 50%, transparent 51%),
    radial-gradient(0.6px 0.6px at 56.4px 75.7px,   rgba(255,250,230,0.37) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 191.9px 194.3px, rgba(255,250,230,0.30) 50%, transparent 51%);
  background-size: 600px 600px, 300px 300px, 200px 200px;
  animation: dml-drift-far 400s linear infinite;
  will-change: transform;
}

/* Couche proche : 2 sous-motifs (tuiles 640/320px, qui divisent 640),
   étoiles plus grosses + dorées, dérive plus rapide (parallaxe) +
   scintillement. Translation 640px → boucle invisible. Les périodes des
   deux couches (600 vs 640) ne se resynchronisent qu'à 9600px → le ciel
   complet ne se répète jamais à l'œil. */
.dml-dark.dml-stars::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: calc(100% + 640px);
  height: calc(100% + 640px);
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.8px 1.8px at 155.9px 321.4px, rgba(255,240,200,0.71) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 103.6px 525.6px, rgba(255,240,200,0.70) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 592.9px 254.3px, rgba(255,240,200,0.82) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 619.4px 468.1px, rgba(255,240,200,0.85) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 350.8px 402.5px, rgba(255,240,200,0.80) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 375.1px 230.5px, rgba(255,240,200,0.76) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 305.8px 521.3px, rgba(255,240,200,0.90) 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 265.6px 128.6px, rgba(255,250,230,0.77) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 614.6px 71.7px,  rgba(255,240,200,0.87) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 488.3px 417.0px, rgba(255,250,230,0.82) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 503.0px 638.0px, rgba(255,240,200,0.71) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 23.9px 245.1px,  rgba(255,240,200,0.69) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 311.1px 132.9px, rgba(255,250,230,0.76) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 198.9px 294.2px, rgba(255,250,230,0.77) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 65.2px 12.7px,   rgba(255,240,200,0.61) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 258.7px 208.2px, rgba(255,240,200,0.62) 50%, transparent 51%);
  background-size: 640px 640px, 320px 320px;
  animation:
    dml-drift-near 180s linear infinite,
    dml-twinkle 9s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Étoiles filantes (optionnel : snippet HTML dml-shooting.html à placer
   dans la section .dml-dark.dml-stars) */
.dml-shooting {
  position: absolute;
  display: block;
  width: 110px;
  height: 2px;
  border-radius: 2px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,250,230,0), rgba(255,250,230,0.95));
  opacity: 0;
}
.dml-shooting--a { top: 14%; left: 4%;  animation: dml-shoot-a 12s linear infinite 3s; }
.dml-shooting--b { top: 45%; left: 38%; animation: dml-shoot-b 17s linear infinite 8s; }

/* Keyframes du ciel étoilé */
@keyframes dml-drift-far  { to { transform: translate3d(-600px, -600px, 0); } }
@keyframes dml-drift-near { to { transform: translate3d(-640px, -640px, 0); } }
@keyframes dml-twinkle { from { opacity: 1; } to { opacity: 0.80; } }
/* Visible ~6-7% du cycle (≈0,8 s), invisible le reste du temps */
@keyframes dml-shoot-a {
  0%   { transform: translate3d(0, 0, 0) rotate(16deg); opacity: 0; }
  1%   { opacity: 1; }
  7%   { transform: translate3d(55vw, 16vw, 0) rotate(16deg); opacity: 0; }
  100% { transform: translate3d(55vw, 16vw, 0) rotate(16deg); opacity: 0; }
}
@keyframes dml-shoot-b {
  0%   { transform: translate3d(0, 0, 0) rotate(24deg); opacity: 0; }
  1%   { opacity: 1; }
  6%   { transform: translate3d(38vw, 17vw, 0) rotate(24deg); opacity: 0; }
  100% { transform: translate3d(38vw, 17vw, 0) rotate(24deg); opacity: 0; }
}

/* Accessibilité : mouvement réduit → étoiles statiques, pas de filantes */
@media (prefers-reduced-motion: reduce) {
  .dml-dark.dml-stars::before,
  .dml-dark.dml-stars::after { animation: none; }
  .dml-shooting { display: none; }
}

/* --- Sections parchemin (corps de page) ----------------------------------- */
.dml-parch {
  background: var(--dml-parch);
  background-image:
    radial-gradient(ellipse at top left, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(165,130,80,0.08), transparent 60%);
  color: var(--dml-char);
}

/* --- Boutons (override Astra/Spectra core button) ------------------------- */
.wp-block-button.dml-btn-gold .wp-block-button__link {
  background: var(--dml-gold);
  color: var(--dml-ink);
  border-radius: 2px;
  font-family: var(--dml-font-sc);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 0.85em 1.8em;
  box-shadow: 0 6px 18px rgba(160,122,58,0.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.wp-block-button.dml-btn-gold .wp-block-button__link:hover {
  background: var(--dml-gold-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(160,122,58,0.45);
}
.wp-block-button.dml-btn-ghost .wp-block-button__link {
  background: transparent;
  color: var(--dml-parch);
  border: 1px solid var(--dml-rule-gold);
  border-radius: 2px;
  font-family: var(--dml-font-sc);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 0.85em 1.8em;
}
.wp-block-button.dml-btn-ghost .wp-block-button__link:hover {
  border-color: var(--dml-gold);
  color: var(--dml-gold);
}

/* --- Cartes (Technologie) ------------------------------------------------- */
.dml-card {
  background: rgba(255,255,255,0.45);
  border: 1px solid var(--dml-rule-soft);
  border-radius: 2px;
  padding: 1.6rem 1.5rem;
  height: 100%;
}
.dml-dark .dml-card {
  background: rgba(255,255,255,0.04);
  border-color: var(--dml-rule-gold);
}
.dml-card h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }

/* --- Table de tarifs ------------------------------------------------------ */
.dml-pricing { position: relative; }
.dml-pricing .wp-block-column {
  background: rgba(255,255,255,0.45);
  border: 1px solid var(--dml-rule-soft);
  border-radius: 3px;
  padding: 2rem 1.8rem;
}
.dml-pricing .dml-plan-premium {
  background: var(--dml-ink);
  background-image: radial-gradient(ellipse at 50% 0%, #2c3170 0%, var(--dml-ink) 70%);
  border: 1px solid var(--dml-gold);
  color: var(--dml-parch);
  box-shadow: 0 20px 50px rgba(26,29,58,0.35);
}
.dml-plan-premium h2, .dml-plan-premium h3, .dml-plan-premium p,
.dml-plan-premium li { color: var(--dml-parch); }
.dml-plan-premium .dml-eyebrow { color: var(--dml-gold); }
.dml-price {
  font-family: var(--dml-font-serif);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--dml-ink);
  font-weight: 500;
}
.dml-plan-premium .dml-price { color: var(--dml-gold); }
.dml-price small { font-size: 1rem; color: var(--dml-char-soft); font-style: italic; }
.dml-plan-premium .dml-price small { color: rgba(244,234,213,0.7); }

/* Listes de fonctionnalités à coche dorée */
.dml-features { list-style: none; padding: 0; margin: 1.2rem 0; }
.dml-features li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.7rem;
  border-bottom: 1px solid var(--dml-rule-soft);
  font-size: 0.95rem;
}
.dml-plan-premium .dml-features li { border-bottom-color: var(--dml-rule-gold); }
.dml-features li::before {
  content: "◆";
  position: absolute; left: 0; top: 0.5rem;
  color: var(--dml-gold);
  font-size: 0.7rem;
}

/* Ruban "Recommandé" */
.dml-ribbon {
  display: inline-block;
  font-family: var(--dml-font-sc);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: var(--dml-ink);
  background: var(--dml-gold);
  padding: 0.3em 1em;
  border-radius: 2px;
  margin-bottom: 0.8rem;
}

/* --- FAQ (bloc core "details") -------------------------------------------- */
.dml-faq .wp-block-details {
  border-bottom: 1px solid var(--dml-rule);
  padding: 0.6rem 0;
}
.dml-faq summary {
  font-family: var(--dml-font-serif);
  font-size: 1.25rem;
  color: var(--dml-ink);
  cursor: pointer;
  list-style: none;
  padding: 0.4rem 0;
}
.dml-faq summary::-webkit-details-marker { display: none; }
.dml-faq summary::after { content: "+"; float: right; color: var(--dml-gold); font-size: 1.4rem; line-height: 1; }
.dml-faq details[open] summary::after { content: "–"; }
.dml-faq .wp-block-details p { font-size: 0.95rem; color: var(--dml-char-soft); }

/* =============================================================================
   MISE EN PAGE (largeurs + espacements portés par classe, pas en inline)
   ========================================================================== */
.dml-wrap   { max-width: 820px; margin-left: auto; margin-right: auto; }
.dml-section{ padding: 4.5rem 1.5rem; }
.dml-hero   { padding: 6.5rem 1.5rem 5rem; text-align: center; }
/* 1.6.9 — en-tête transparent (réglage Astra par page) : le hero passe sous le menu */
body.ast-theme-transparent-header .dml-hero { padding-top: calc(6.5rem + 75px); }
.dml-hero h1{ font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; margin-bottom: 0.4rem; }
.dml-hero .dml-lead {
  font-family: var(--dml-font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: rgba(244,234,213,0.9);
  max-width: 620px;
  margin: 0.6rem auto 1.8rem;
}
.dml-section-head { text-align: center; margin-bottom: 2.5rem; }
.dml-section-head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }

/* =============================================================================
   ACCUEIL v3 — « Le rapport » · « La méthode » · « Deux façons de commencer »
   (1.6.0, revu 1.6.1 — les composants [dreamolab_livre] et [dreamolab_pipeline]
   ont leur CSS dans le plugin dreamolab-accueil)
   Note : les groupes Gutenberg reçoivent « body .is-layout-flow > * + *
   { margin-block-start } » (spécificité 0,1,1) ; toutes les règles de mise en
   page ci-dessous sont donc écrites en 0,2,0 au moins.
   ========================================================================== */

/* Variante parchemin plus soutenue, pour deux sections claires qui se suivent */
.dml-parch-2 {
  background: var(--dml-parch-2);
  background-image: radial-gradient(ellipse at top right, rgba(255,255,255,0.35), transparent 60%);
  color: var(--dml-char);
}

/* Sous-titre serif italique doré (« Une science millénaire, une intelligence nouvelle ») */
.dml-section p.dml-lead-sanskrit {
  font-family: var(--dml-font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--dml-gold-deep);
  margin: 0 0 1.2rem;
}
.dml-dark p.dml-lead-sanskrit { color: var(--dml-gold); }

/* Liste de chapitres numérotés (I, II, III, IV) : numéro + titre sur la même
   ligne, texte dessous, aucun espace de flux ajouté par Gutenberg */
.dml-section .dml-chapters { display: grid; gap: 1.25rem; margin-top: 0.9rem; }
.dml-section .dml-chapters > * + * { margin-block-start: 0; }
.dml-section .dml-chapter { display: flex; gap: 1rem; align-items: flex-start; }
.dml-section .dml-chapter > * + *,
.dml-section .dml-chapter .wp-block-group > * + * { margin-block-start: 0; }
.dml-section .dml-chapter .wp-block-group { min-width: 0; }

.dml-section .dml-chapter h4 {
  font-family: var(--dml-font-serif);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0 0 0.2rem;
}
.dml-section .dml-chapter p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--dml-char-soft);
  margin: 0;
}
.dml-dark .dml-chapter p { color: rgba(244,234,213,0.72); }
/* Numéro (déclaré après les règles « p » de même spécificité pour l'emporter) */
.dml-section .dml-chapter p.dml-chapter__n {
  font-family: var(--dml-font-serif);
  font-style: italic;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--dml-gold-deep);
  flex: 0 0 2.2rem;
  margin: 0.1rem 0 0;
  padding: 0;
}
.dml-dark .dml-chapter p.dml-chapter__n { color: var(--dml-gold); }

/* Badges chiffrés (Corpus entier · Swiss Ephemeris · Lahirī · Whole Sign · Quelques min) */
.dml-section .dml-stats { display: flex; gap: 2.2rem 2.4rem; flex-wrap: wrap; margin-top: 1.8rem; }
.dml-section .dml-stats > * + * { margin-block-start: 0; }
.dml-section .dml-stat > * + * { margin-block-start: 0; }
.dml-section p.dml-stat__k {
  font-family: var(--dml-font-serif);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  color: var(--dml-gold-deep);
  margin: 0;
}
.dml-dark p.dml-stat__k { color: var(--dml-gold); }
.dml-section p.dml-stat__l { font-size: 0.62rem; margin: 0.4rem 0 0; }

/* Tarifs v2 — s'ajoute à .dml-pricing / .dml-plan-premium (cartes inchangées) */
.dml-pricing.dml-pricing-v2 .wp-block-column {
  display: flex;
  flex-direction: column;
}
.dml-pricing.dml-pricing-v2 .wp-block-column > * + * { margin-block-start: 0; }
/* Ruban premium : pastille dorée à cheval sur le bord supérieur de la carte (1.6.2) */
.dml-pricing-v2 .dml-plan-premium { position: relative; overflow: visible; }
.dml-pricing-v2 .dml-plan-premium .dml-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  white-space: nowrap;
  background: linear-gradient(135deg, #dcb96e, var(--dml-gold-deep));
  color: var(--dml-ink);
  border-radius: 999px;
  padding: 0.45em 1.4em;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  box-shadow: 0 6px 18px rgba(160,122,58,0.35);
  z-index: 2;
}
.dml-pricing-v2 .dml-plan-name {
  font-family: var(--dml-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--dml-ink);
  margin: 0.2rem 0 0;
}
.dml-plan-premium .dml-plan-name { color: var(--dml-parch); }
.dml-pricing-v2 p.dml-plan-tagline {
  font-size: 0.85rem;
  color: var(--dml-char-soft);
  margin: 0.35rem 0 1.1rem;
  min-height: 2.5em;
}
.dml-plan-premium p.dml-plan-tagline { color: rgba(244,234,213,0.62); }

/* Prix : montant et mention sur une ligne, un seul filet dessous */
.dml-pricing-v2 .dml-price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0 0 1.3rem;
  margin: 0 0 1.3rem;
  border-bottom: 1px solid var(--dml-rule-gold);
}
.dml-pricing-v2 .dml-price__amt { font-size: 3.15rem; line-height: 1; white-space: nowrap; }
.dml-pricing-v2 .dml-price__per {
  font-family: var(--dml-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  font-style: normal;
  color: var(--dml-char-soft);
}
.dml-plan-premium .dml-price__per { color: rgba(244,234,213,0.6); }

/* Liste : coche dorée, sans filets entre les items, pousse les boutons en bas */
.dml-pricing-v2 ul.dml-features { flex: 1 1 auto; margin: 0 0 1.4rem; }
.dml-pricing-v2 .dml-features li {
  border-bottom: 0;
  padding: 0.4rem 0 0.4rem 1.7rem;
  font-size: 0.9rem;
  line-height: 1.45;
}
.dml-pricing-v2 .dml-features li::before {
  content: "\2714";           /* ✔ */
  font-size: 0.85rem;
  top: 0.45rem;
  color: var(--dml-gold);
}
.dml-pricing-v2 .dml-features li.is-muted { opacity: 0.6; }

/* Boutons : alignés sur la même ligne (bas de carte), pleine largeur, un peu plus grands */
.dml-pricing-v2 .wp-block-buttons { margin-top: auto; }
.dml-pricing-v2 .wp-block-button { width: 100%; }
.dml-pricing-v2 .wp-block-button .wp-block-button__link {
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  padding: 1em 2em;
}
/* Fantôme lisible sur parchemin : encre + bord doré */
.dml-pricing-v2 .wp-block-column:not(.dml-plan-premium) .wp-block-button.dml-btn-ghost .wp-block-button__link {
  color: var(--dml-ink);
  border-color: var(--dml-gold);
  background: rgba(200,162,90,0.10);
}
.dml-pricing-v2 .wp-block-column:not(.dml-plan-premium) .wp-block-button.dml-btn-ghost .wp-block-button__link:hover {
  background: rgba(200,162,90,0.22);
  color: var(--dml-ink);
}
.dml-pricing-v2 p.dml-note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--dml-char-soft);
  margin: 0;
}
/* Spécificité 0,4,1 : doit battre le « .wp-block-column > * + * { margin-block-start:0 } » ci-dessus */
.dml-pricing.dml-pricing-v2 .wp-block-column > p.dml-note { margin-block-start: 1.5rem; }
.dml-plan-premium p.dml-note { color: rgba(244,234,213,0.5); }

/* -----------------------------------------------------------------------------
   TÉMOIGNAGES v3 (1.6.5) — cartes citation
   Balisage : columns.dml-cards.dml-quotes > column > group.dml-card.dml-quote
     p.dml-quote__stars · wp:quote > p · group.dml-quote__who > p.dml-quote__av + group > p.dml-quote__nm, p.dml-quote__lc
   -------------------------------------------------------------------------- */
.dml-section .dml-quote {
  display: flex; flex-direction: column;
  padding: 2rem;
  background: var(--dml-parch);
  border: 1px solid var(--dml-rule-soft);
}
/* Un peu plus d'air sous les cartes avant la section suivante (padding section = 4,5 rem) */
.dml-section#temoignages { padding-bottom: 6.5rem; }
/* Sur l'encre, la carte reste crème (lisibilité) — la règle .dml-dark .dml-card est neutralisée */
.dml-dark .dml-card.dml-quote { background: var(--dml-parch); border-color: rgba(200,162,90,0.45); }
.dml-section .dml-quote > * + * { margin-block-start: 0; }
.dml-section p.dml-quote__stars {
  color: var(--dml-gold);
  letter-spacing: 3px;
  font-size: 0.9rem;
  line-height: 1;
  margin: 0 0 0.9rem;
}
.dml-section .dml-quote blockquote.wp-block-quote {
  border: 0; padding: 0; margin: 0 0 1.2rem;
  background: none; box-shadow: none; quotes: none;
  flex: 1 1 auto;
}
.dml-section .dml-quote blockquote.wp-block-quote::before,
.dml-section .dml-quote blockquote.wp-block-quote::after { content: none; }
.dml-section .dml-quote blockquote.wp-block-quote p {
  font-family: var(--dml-font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  text-wrap: pretty;
  margin: 0;
  color: var(--dml-ink);
}
.dml-dark .dml-quote blockquote.wp-block-quote p { color: var(--dml-ink); }
.dml-section .dml-quote .dml-quote__who {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; max-width: none; margin-left: 0; margin-right: 0; /* jamais centré par un layout contraint */
}
.dml-section .dml-quote .dml-quote__who > .wp-block-group { flex: 1 1 auto; max-width: none; margin: 0; }
.dml-section .dml-quote .dml-quote__who > * + * { margin-block-start: 0; }
.dml-section .dml-quote .dml-quote__who > .wp-block-group > * + * { margin-block-start: 0; }
.dml-section .dml-quote p.dml-quote__av {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dml-gold), var(--dml-gold-deep));
  display: grid; place-items: center;
  font-family: var(--dml-font-serif); font-style: normal;
  font-size: 1.05rem; line-height: 1;
  color: #0e1028;
  margin: 0;
}
.dml-section .dml-quote p.dml-quote__nm {
  font-family: var(--dml-font-sc);
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--dml-char);
}
.dml-dark .dml-quote p.dml-quote__nm { color: var(--dml-char); }
.dml-section .dml-quote p.dml-quote__lc {
  font-size: 0.72rem;
  line-height: 1.3;
  margin: 0;
  color: var(--dml-char-soft);
}
.dml-dark .dml-quote p.dml-quote__lc { color: var(--dml-char-soft); }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .dml-price { font-size: 2.6rem; }
  .dml-gold-rule { max-width: 160px; }
  .dml-section .dml-stats { gap: 1.4rem 1.8rem; }
  .dml-section p.dml-stat__k { font-size: 1.7rem; }
  .dml-pricing-v2 .dml-price__amt { font-size: 2.6rem; }
}
