/* =============================================================
   ✦ MALIKA — PASSE ESTHÉTIQUE (03/08/2026)
   Chargée EN DERNIER. Ne corrige que du visuel : contrastes,
   couleurs hors charte, grilles cassées, confort mobile.
   Sélecteurs préfixés `html` pour passer devant les <style> du body.
   ============================================================= */

/* Note : `lining-nums` a été essayé sur les titres (le « 4 » de « 4 axes »
   descend sous la ligne) — la police display n'expose pas la variante,
   la règle n'avait aucun effet, elle a donc été retirée. */

/* ---- 1. Devise de marque du header : elle était quasi invisible
        (or profond #6B5328 sur aubergine nuit) ---- */
html .nav-brand .nav-words {
  color: var(--or-glow, #E8C988) !important;
  opacity: 0.5 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
html .nav.scrolled .nav-brand .nav-words { opacity: 0.6 !important; }

/* ---- 2. Hero, 2e bouton : il était ivoire 50 % sur fond prune,
        donc gris sale + texte encre = aspect « désactivé ».
        Devient un verre de nuit cerclé d'or. ---- */
html .hero .btn-outline,
html .hero-cta .btn-outline {
  background: rgba(31, 20, 38, 0.42) !important;
  border: 1px solid rgba(232, 201, 136, 0.55) !important;
  color: var(--or-glow, #E8C988) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html .hero .btn-outline:hover,
html .hero-cta .btn-outline:hover {
  background: rgba(232, 201, 136, 0.16) !important;
  border-color: var(--or-glow, #E8C988) !important;
  color: #FFF8E6 !important;
}

/* ---- 3. Le 4e médaillon paraissait ARGENTÉ (dégradé blanc pur → or)
        alors que I·II·III sont dorés. Il redevient or, en plus riche. ---- */
html .axe-divine-final .axe-orb,
html body[data-theme="foret-or"] .methode .axe-divine-final .axe-orb {
  background: radial-gradient(circle at 32% 28%, #FBEFC7 0%, var(--or-vif, #D4B16A) 48%, var(--or-profond, #6B5328) 100%) !important;
  border: 2px solid var(--or-profond, #6B5328) !important;
  box-shadow:
    0 18px 54px rgba(184, 153, 104, 0.5),
    inset 0 -5px 16px rgba(0, 0, 0, 0.18),
    inset 0 5px 16px rgba(255, 255, 255, 0.4) !important;
}

/* ---- 4. Les 4 axes sur mobile : la carte était coincée dans 190 px
        (grille 90px + 1fr) → 2 mots par ligne, bande verticale de 1 400 px.
        Elle reprend toute la largeur, le médaillon passe au-dessus. ---- */
@media (max-width: 720px) {
  html .axes-divine .axe-divine,
  html body[data-theme="foret-or"] .methode .axes-divine .axe-divine {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 44px !important;
  }
  html .axes-divine .axe-divine:nth-child(odd) .axe-orb,
  html .axes-divine .axe-divine:nth-child(even) .axe-orb,
  html body[data-theme="foret-or"] .methode .axes-divine .axe-divine:nth-child(odd) .axe-orb,
  html body[data-theme="foret-or"] .methode .axes-divine .axe-divine:nth-child(even) .axe-orb {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: 74px !important;
    height: 74px !important;
    margin: 0 0 0 6px !important;
  }
  html .axes-divine .axe-divine .axe-roman { font-size: 2rem !important; }
  html .axes-divine .axe-divine:nth-child(odd) .axe-body,
  html .axes-divine .axe-divine:nth-child(even) .axe-body,
  html body[data-theme="foret-or"] .methode .axes-divine .axe-divine:nth-child(odd) .axe-body,
  html body[data-theme="foret-or"] .methode .axes-divine .axe-divine:nth-child(even) .axe-body {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 26px 24px !important;
    text-align: left !important;
  }
  html .axes-divine .axe-divine p,
  html .axes-divine .axe-divine:nth-child(odd) p,
  html .axes-divine .axe-divine:nth-child(even) p { text-align: left !important; }
  html .axes-divine .axes-line { left: 43px !important; opacity: 0.3 !important; }
}

/* ---- 5. Footer : 4 blocs pour 3 colonnes → la newsletter retombait
        seule sur une 2e ligne et laissait un trou béant à droite. ---- */
@media (min-width: 801px) {
  html footer .footer-grid {
    grid-template-columns: 1.7fr 1fr 1.15fr 1.25fr !important;
    gap: 44px !important;
    align-items: start;
  }
}
/* Mention légale du bas : elle se lisait à peine ---- */
html .footer-bottom .footer-disclaimer {
  color: rgba(242, 237, 223, 0.72) !important;
  opacity: 1 !important;
}

/* ---- 6. Témoignages déposés : `auto-fill` laissait une carte seule
        dans 280 px avec un vide sur toute la droite. ---- */
html .mt-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  justify-content: center;
}
html .mt-host:has(.mt-grid > :only-child) .mt-grid { max-width: 640px; margin-inline: auto; }

/* ---- 7. FAQ : cartes blanches sur crème = quasi invisibles,
        et le « + » se perdait. ---- */
html .faq-item {
  box-shadow: 0 4px 18px rgba(107, 83, 40, 0.07) !important;
  border-color: rgba(184, 153, 104, 0.3) !important;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}
html .faq-item:hover {
  border-color: rgba(184, 153, 104, 0.55) !important;
  box-shadow: 0 8px 26px rgba(107, 83, 40, 0.12) !important;
}
html .faq-item .faq-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(184, 153, 104, 0.42);
  background: rgba(232, 201, 136, 0.15);
  color: var(--or-profond, #6B5328) !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 300 !important;
  font-size: 1.35rem !important;
  line-height: 1;
  padding-bottom: 2px;
}
html .faq-item[open] .faq-icon {
  background: var(--or-mat, #B89968);
  border-color: var(--or-mat, #B89968);
  color: #FBF7EE !important;
}

/* ---- 8. Flèches du carrousel de témoignages : trop effacées ---- */
html .testi-nav button {
  width: 50px !important; height: 50px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  border-color: rgba(184, 153, 104, 0.5) !important;
  color: var(--or-profond, #6B5328) !important;
  box-shadow: 0 3px 12px rgba(107, 83, 40, 0.08);
}

/* ---- 9. Bulle d'aide : son halo (48 px de débord, respiration ×1,25)
        recouvrait les titres et le texte sur mobile. ---- */
/* ⚠️ Ne JAMAIS toucher à `#companion-fab .glyph` : c'est LUI qui dessine
   la sphère dorée (la DA rend le bouton transparent). Ici on ne règle que
   la place occupée et l'ampleur du halo. */
@media (max-width: 700px) {
  html #companion-fab {
    right: 16px !important;
    bottom: 16px !important;
    width: 54px !important;
    height: 54px !important;
  }
  html #companion-fab .glyph { width: 48px !important; height: 48px !important; }
  html #companion-fab .glyph::after { font-size: 26px !important; }
  html #companion-fab::before {
    inset: -8px !important;
    animation-duration: 6.5s !important;
  }
  html #companion-fab::after { inset: -5px !important; }
  html .music-toggle-malika { bottom: 80px !important; }
}
/* Le halo respirait jusqu'à +25 % de sa taille et débordait sur le texte. */
html #companion-fab::before { animation-name: fabHaloDoux !important; }
@keyframes fabHaloDoux {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50%      { opacity: 0.85; transform: scale(1.1); }
}

/* ---- 10. Ancres : les titres passaient sous le header fixe ---- */
html section[id], html div[id="temoignages"] { scroll-margin-top: 104px; }

/* ---- 11. Section « Message Guidé » : la ligne de réassurance
        (Gratuit · Sans engagement…) tombait à 0,75 d'opacité
        sur fond aubergine — sous le seuil de lisibilité. ---- */
html #tirage .section-sub em { opacity: 0.92 !important; color: #F3E4C0 !important; }

/* ---- 12. Témoignages déposés : l'étiquette technique « TEXT »
        (en anglais) n'apporte rien — audio et vidéo se voient seuls. ---- */
html .mt-card .mt-kind { display: none !important; }

/* ---- 13. La pastille « Recommandé » porte la promesse la plus forte :
        elle doit dominer les deux autres, pas s'effacer. ---- */
html .soin-card > div[style*="top:-12px"] {
  top: -13px !important;
  padding: 7px 15px !important;
}
html .soin-card > div[style*="--gold-light"] {
  font-size: 0.7rem !important;
  padding: 8px 19px !important;
  box-shadow: 0 8px 24px rgba(184, 153, 104, 0.55) !important;
}

/* ---- 14. Ligne de consentement du formulaire de contact : le texte était
        peint en var(--muted) = #6b6457, un gris terreux posé sur le prune
        du bloc — illisible. Le style était EN LIGNE : seule une règle
        !important pouvait le reprendre. ---- */
html .form-consent { color: rgba(251, 247, 238, 0.78) !important; }
html .form-consent a { color: var(--gold-light) !important; text-decoration: underline; }
html .form-consent a:hover { color: #F3E4C0 !important; }
html .form-consent input[type="checkbox"] { width: 17px; height: 17px; }

/* ---- 15. Bloc contact : Cormorant Garamond sort ses chiffres en bas de
        casse (chiffres « elzéviriens »). Le numéro de téléphone devenait
        « o6 63 87 43 85 » et « 100 % » se lisait « ıoo % ». On demande
        explicitement les chiffres alignés. (Sans effet sur la note en
        italique du formulaire : Cormorant italique n exposé pas lnum.) ---- */
html .contact-block .val,
html .contact-block a,
html .contact-block .val span {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1, "onum" 0 !important;
}

/* ---- 16. Pied de page : « Séances 100 % visio » sortait en chiffres
        elzéviriens (« ıoo % »). Sur le romain la variante alignée existe. ---- */
html .footer-about p,
html .footer-brand p {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1, "onum" 0 !important;
}
/* ---- 17. PRIX ILLISIBLES — « 111 € » sortait « III € », « 70 € » → « 7o € ».
        Cormorant Garamond rend ses chiffres en bas de casse (elzéviriens) :
        le 1 devient un I, le 0 un o. Sur un PRIX c'est rédhibitoire. ---- */
html .soin-card .price,
html .soin-card .price .amount,
html .soin-card .price .label,
html .soin-card-cta,
html .soins .section-sub,
html .soins .section-sub span,
html .malika-anim-strip,
html .malika-anim-strip p,
html .malika-anim-strip strong,
html .promesses .section-sub,
html .promesses p,
html .ss-price,
html .ss-price small {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1, "onum" 0 !important;
}
/* Le « € » n'existe pas dans Cormorant : le navigateur retombe sur une police
   de secours qui le peint bien plus gros que les chiffres. On le rétablit. */
html .soin-card .price .amount {
  font-family: 'Cormorant Garamond', 'Marcellus', Georgia, serif !important;
  letter-spacing: 0.01em;
}

/* ---- 18. Grille des séances : 5 cartes + la Capsule (qui occupe 2 colonnes)
        sur 3 colonnes = deux trous. La 2e rangée laissait un vide béant à
        droite, et la Capsule se retrouvait calée à GAUCHE, décalée de tout
        le reste de la page. Passage en flex centré : chaque rangée
        incomplète se recentre d'elle-même. ---- */
@media (min-width: 880px) {
  html .soins-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
  }
  html .soins-grid > .soin-card {
    flex: 0 1 calc((100% - 56px) / 3) !important;
    max-width: calc((100% - 56px) / 3) !important;
  }
  html .soins-grid > .capsule-feature {
    flex: 0 1 782px !important;
    max-width: 100% !important;
    align-self: center !important;
  }
}

/* ---- 19. Titres à reflet d'or : le balayage montait jusqu'à #F5E8B8, un or
        quasi blanc — sur les sections crème, la fin des mots DISPARAISSAIT
        (« gui·de », « 4 a·xes »). Le reflet reste, mais il ne s'efface plus.
        Sur fond aubergine (Message Guidé, contact) l'or clair est juste :
        on ne touche qu'aux sections claires. ---- */
html .about .section-title em,
html .about .section-title em.gold,
html .methode .section-title em,
html .methode .section-title em.gold,
html .soins .section-title em,
html .soins .section-title em.gold,
html .soins .section-title em.rainbow-word,
html .promesses .section-title em,
html .promesses .section-title em.gold,
html .faq .section-title em,
html .faq .section-title em.gold,
html .testimonials .section-title em,
html .testimonials .section-title em.gold {
  background-image: linear-gradient(90deg,
    #6B4E18 0%,
    #96742A 20%,
    #B4903C 40%,
    #C9A24A 50%,
    #B4903C 60%,
    #96742A 80%,
    #6B4E18 100%
  ) !important;
  filter: drop-shadow(0 1px 1px rgba(90, 68, 22, 0.18)) !important;
}

/* Chiffres écrits en Marcellus : cette police est une CAPITALE ROMAINE,
   son 1 est un I et son 0 un O — « 100 % » se lisait « IOO % » et
   « 10h – 20h » « IOH – 2OH ». Aucune variante `lnum` n'existe pour elle :
   seuls les chiffres passent en Cormorant, qui, lui, sait les aligner. */
html .chf {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- 20. Le grand guillemet de la citation était un `"` droit ASCII :
        la serif italique le dessine en DEUX BARRES OBLIQUES (« // »).
        On pose le vrai guillemet typographique. ---- */
html .quote-mark { font-size: 0 !important; opacity: 0.62 !important; }
html .quote-mark::before {
  content: '\201C';
  font-size: 11rem;
  line-height: 1;
  display: block;
  color: var(--gold-deep, #8B6E2A);
}

/* ---- 21. Un témoignage déposé peut faire 2 500 signes : il s'affichait en
        entier et fabriquait un mur de 1 400 px qui cassait le rythme de
        toute la page. Le texte reste intégralement lisible, dans sa carte. ---- */
html .mt-card .mt-content {
  max-height: 22em;
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 153, 104, 0.55) transparent;
}
html .mt-card .mt-content::-webkit-scrollbar { width: 6px; }
html .mt-card .mt-content::-webkit-scrollbar-thumb {
  background: rgba(184, 153, 104, 0.5); border-radius: 99px;
}
/* Un fondu en bas de carte dit qu'il reste du texte à dérouler. */
html .mt-card { position: relative; }
html .mt-card::after {
  content: '';
  position: absolute;
  left: 1px; right: 1px; bottom: 1px;
  height: 26px;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 88%);
  pointer-events: none;
}

/* ---- 22. Devise de marque du hero : or pâle à 0,82 d'opacité sur aubergine,
        elle se devinait plus qu'elle ne se lisait. Et en mobile elle se
        cassait en trois lignes avec un « · » orphelin en bout de ligne. ---- */
html .hero .hero-words {
  color: #E9CE93 !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  text-wrap: balance;
}
html .scroll-hint, html .hero .scroll-hint { opacity: 0.85 !important; }

/* ---- 23. Pied de page : la devise retombait « BEAUTÉ » toute seule
        sur une 2e ligne. ---- */
html .footer-about > div:first-of-type,
html .footer-brand .footer-words,
html footer .footer-about p:first-of-type { text-wrap: balance; }

/* ---- 24. Bloc contact : les lignes d'appoint (« Via le formulaire… »,
        « Pour les questions courtes… ») étaient peintes en or profond
        sur l'aubergine — sous le seuil de lisibilité. ---- */
html .contact-block .hint,
html .contact-block small,
html .contact-block .sub { color: rgba(240, 226, 196, 0.72) !important; }

/* ---- 25. Flèches du carrousel : les chevrons de la serif sont deux virgules
        posées de biais. Rendues nettes, en sans-serif. ---- */
html .testi-nav button {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  padding-bottom: 2px;
}

/* ---- 26. Respirations démesurées : jusqu'à 700 px de vide entre deux
        blocs (après « Découvrir mes séances », autour de « Démarrer mon
        chemin », sous la Capsule). La page perdait son fil. ---- */
@media (min-width: 880px) {
  html .about { padding-bottom: 60px !important; }
  html .methode .methode-cta,
  html .methode > .container > *:last-child { margin-top: 34px !important; }
  html .malika-anim-strip { margin-top: 34px !important; }
  html #temoignages-visiteurs { padding-top: 24px !important; }
}

/* ---- 27. Ajustements après relecture à l'écran ---- */
/* Le guillemet ouvrant dessiné en ITALIQUE ressemble à un guillemet fermant
   (boule en haut, queue en bas). En romain il retrouve son sens. */
html .quote-mark::before { font-style: normal; }

/* Pied de page : la devise laissait « BEAUTÉ » seule sur une 2e ligne.
   Le bloc n'a pas de classe — on le vise par son style en ligne. */
html footer p[style*="0.24em"] { text-wrap: balance; }

/* Le guillemet double anglais reste dessiné comme un FERMANT dans cette serif.
   La page cite partout en guillemets FRANÇAIS (« … ») : on aligne. */
html .quote-mark::before { content: '\00AB'; font-size: 8rem; font-style: normal; }