/*
Theme Name: Psyché Noire
Theme URI: https://psyche-noire.com
Description: Thème enfant de Kadence pour Psyché Noire — média de psychologie de l'ombre (relations toxiques, ombre, attachement, Jung). Palette sombre, typographies Cormorant Garamond + Inter hébergées en local, motifs signature. « Arte sur la psychologie de l'ombre ».
Author: Psyché Noire
Template: kadence
Version: 1.0.10
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: psyche-noire-child
*/

/* ============================================================
   POLICES LOCALES (RGPD + performance — pas de Google Fonts)
   ============================================================ */

/* Cormorant Garamond — titres, citations, logo, cliffhangers */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/CormorantGaramond-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/CormorantGaramond-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/CormorantGaramond-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/CormorantGaramond-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Inter — corps de texte, interface, libellés, sous-titres */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   JETONS DE COULEUR — Direction artistique Psyché Noire
   ============================================================ */
:root {
  --pn-fond:            #0D0B1A; /* noir bleuté profond — fond principal */
  --pn-noir-profond:    #08060F; /* profondeur */
  --pn-ivoire:          #E8DED0; /* texte principal */
  --pn-ivoire-doux:     #C9BFB2; /* texte secondaire, motifs */
  --pn-ivoire-estompe:  #9C9385; /* texte tertiaire */
  --pn-violet-profond:  #4A3A6B; /* violet ardoise profond */
  --pn-violet:          #6E5A9E; /* accents, liserés */
  --pn-gris-brume:      #8E84A0; /* libellés discrets */

  --pn-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --pn-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Chemins motifs (utilisables en background) */
  --pn-motif-arbre: url("assets/img/motif_arbre_PN.svg");
  --pn-motif-lune:  url("assets/img/motif_lune_PN.svg");
}

/* ============================================================
   STYLES DE BASE
   Légers volontairement en Phase 1 : l'intégration fine
   (typographie globale, palette éditeur, sections home) se fait
   en Phase 2 via les Réglages globaux Kadence + ce fichier.
   ============================================================ */

/* Confort de lecture : éviter la fatigue sur fond sombre */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   APPLICATION TYPOGRAPHIQUE — DA Psyché Noire
   Corps & interface : Inter — Titres & citations : Cormorant Garamond.
   !important : surcharge volontaire et assumée de Kadence (police de marque).
   ============================================================ */
body,
button,
input,
select,
textarea,
.entry-content,
.content-bg {
  font-family: var(--pn-sans) !important;
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a,
.site-title, .page-title, .wp-block-heading,
.kadence-blocks-advanced-heading,
blockquote, .wp-block-quote {
  font-family: var(--pn-serif) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Citations en italique (Cormorant brille en italique) */
blockquote,
.wp-block-quote,
cite {
  font-style: italic;
}

/* Survol des liens : violet ardoise lumineux */
a:hover {
  color: var(--pn-violet);
}

/* ============================================================
   MENU MOBILE (tiroir off-canvas Kadence) — CORRECTIF LISIBILITÉ
   Bug : sur mobile, les liens du menu héritaient d'une couleur
   quasi noire sur le fond sombre du tiroir → seul l'item courant
   (violet) restait visible. On force l'ivoire de marque sur tous
   les liens du tiroir, l'item courant/survolé reste en violet.
   Périmètre strict : le tiroir mobile uniquement (desktop intact).
   ============================================================ */
/* Spécificité des liens plafonnée à (1,1,2) pour que la règle
   « item courant » ci-dessous (1,2,1) gagne toujours. */
#mobile-drawer .mobile-navigation li a,
#mobile-drawer .menu li a,
.popup-drawer .mobile-navigation li a,
.mobile-navigation.drawer-navigation li a {
  color: var(--pn-ivoire) !important;
  opacity: 1 !important;
}

/* Item survolé, courant ou ancêtre du courant : violet lumineux
   (specificité 1,2,1 > base) — préserve l'affordance « vous êtes ici ». */
#mobile-drawer .mobile-navigation li a:hover,
#mobile-drawer .mobile-navigation li a:focus,
#mobile-drawer .menu .current-menu-item > a,
#mobile-drawer .mobile-navigation .current-menu-item > a,
#mobile-drawer .mobile-navigation .current-menu-ancestor > a,
.popup-drawer .mobile-navigation .current-menu-item > a {
  color: var(--pn-violet) !important;
}

/* Flèche des sous-menus (chevron) lisible elle aussi */
#mobile-drawer .drawer-sub-toggle,
.popup-drawer .drawer-sub-toggle {
  color: var(--pn-ivoire) !important;
}

/* ============================================================
   NEWSLETTER (#lettre) — formulaire Beehiiv pleine largeur
   Ajouté 2026-06-29 : sur mobile le formulaire restait étroit
   (padding carte + gouttière). On force l'embed à 100 % et on
   réduit le padding horizontal sous 760px. Scopé à #lettre.
   ============================================================ */
#lettre .pn-lettre__form { width: 100%; }
#lettre .pn-lettre__form [data-beehiiv-form],
#lettre .pn-lettre__form iframe {
  width: 100% !important;
  max-width: 100% !important;
}
/* Sous 1024px (mobiles, tablettes, mobile en mode large) : le formulaire
   passe en pleine largeur (1 colonne) au lieu d'être confiné à ~moitié de
   carte, et le padding horizontal est réduit au minimum pour gagner encore
   en largeur. Le 2-colonnes premium reste sur les écrans larges (>1024). */
@media (max-width: 1024px) {
  #lettre .pn-lettre-grid { grid-template-columns: 1fr !important; }
  #lettre .pn-wrap { padding-inline: 8px; }
  #lettre .pn-lettre--feature { padding: 18px 10px; }
}