/* ============================================================
   TANIA GOMBERT - Direction A "Editorial premium magazine"
   Overrides Zakra + Elementor - charte Anita Marqueze 2024
   Reecrit depuis zero le 29/05/2026 - ne pas patcher, refondre.
   ----------------------------------------------------------------
   Principe cardinal :
   - AUCUNE regle globale color sur body, .zak-content, p, *.
     Toute regle de couleur globale herite et casse les hero a fond
     sombre rendu en crème (incident hero_bio invisible).
   - On cible UNIQUEMENT des selecteurs precis :
       Zakra : .site-branding, .site-title, .site-description,
               .zak-primary-nav, .zak-header, #zak-footer
       Elementor : .elementor-element-hero_*, [data-id="hero_*"],
                   .elementor-widget-heading h1.elementor-heading-title,
                   .elementor-widget-text-editor, .elementor-button,
                   .elementor-widget-divider, .elementor-icon-box-*
   - Les couleurs sur fond sombre sont posees au niveau section
     ([data-id="hero_*"]) et non sur le body.
   ============================================================ */

/* ============================================================
   1. RESET TYPOGRAPHIQUE MINIMAL
   ============================================================
   On declare uniquement la police par defaut sur les wrappers Zakra.
   Pas de color, pas de background. Elementor garde la main par section.
*/
body.tg-da-anita,
body.tg-da-anita .zak-site,
body.tg-da-anita .zak-content,
body.tg-da-anita .zak-content-area {
  font-family: var(--tg-font-sans);
  font-size: var(--tg-fs-body);
  line-height: var(--tg-lh-body);
}

body.tg-da-anita {
  background: var(--tg-creme);
}

/* Selection */
body.tg-da-anita ::selection {
  background: var(--tg-rouge);
  color: var(--tg-creme);
}

/* ============================================================
   2. HEADER ZAKRA - logo, branding, navigation
   ============================================================
   Probleme actuel : la custom-logo (image PNG/WEBP blanche 1500x499)
   occupe pleine largeur et ecrase le menu. On la borne en hauteur
   et on remonte le menu en symetrie.
*/

/* Conteneur header : ligne fine sticky, fond creme blur */
body.tg-da-anita #zak-masthead,
body.tg-da-anita .zak-masthead,
body.tg-da-anita .zak-header {
  background: rgba(250, 243, 232, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(7, 7, 56, 0.08);
  box-shadow: none;
}

body.tg-da-anita .zak-main-header {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Site branding : on contraint le custom-logo image a 48px de haut max,
   on aligne en flex la wordmark + signature a droite du logo */
body.tg-da-anita .site-branding {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

body.tg-da-anita .custom-logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border-bottom: none;
}

body.tg-da-anita .custom-logo-link .custom-logo {
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

body.tg-da-anita .site-info-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-left: 1px solid rgba(7, 7, 56, 0.15);
  padding-left: 18px;
  min-width: 0;
}

/* Wordmark "Tania Gombert" en serif Gloock, calme */
body.tg-da-anita .site-title {
  margin: 0;
  font-family: var(--tg-font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.005em;
}
body.tg-da-anita .site-title a {
  color: var(--tg-marine);
  text-decoration: none;
  border-bottom: none;
}
body.tg-da-anita .site-title a:hover {
  color: var(--tg-rouge);
}

/* Signature #JusteTania en rouge passion, script Sergia, sobre */
body.tg-da-anita .site-description {
  margin: 0;
  font-family: var(--tg-font-accent);
  font-style: italic;
  color: var(--tg-rouge);
  font-size: 0.95rem;
  line-height: 1.1;
  letter-spacing: 0;
  opacity: 1;
}

/* Navigation principale : caps fines letter-spaced editorial */
body.tg-da-anita .zak-primary-nav ul li > a,
body.tg-da-anita .main-navigation ul li > a {
  font-family: var(--tg-font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tg-marine);
  border-bottom: none;
  padding: 10px 12px;
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.78;
}
body.tg-da-anita .zak-primary-nav ul li > a:hover,
body.tg-da-anita .main-navigation ul li > a:hover,
body.tg-da-anita .zak-primary-nav ul li.current-menu-item > a,
body.tg-da-anita .main-navigation ul li.current-menu-item > a {
  color: var(--tg-rouge);
  opacity: 1;
}

/* Dernier item du menu = CTA "Discutons" subtil (ghost) */
body.tg-da-anita .zak-primary-nav > ul > li:last-child > a,
body.tg-da-anita .main-navigation > div > ul > li:last-child > a {
  border: 1px solid var(--tg-marine);
  padding: 8px 16px;
  margin-left: 8px;
  opacity: 1;
}
body.tg-da-anita .zak-primary-nav > ul > li:last-child > a:hover,
body.tg-da-anita .main-navigation > div > ul > li:last-child > a:hover {
  background: var(--tg-marine);
  color: var(--tg-creme);
}

/* ============================================================
   3. HERO HOME (section home_hero_new) - fond bleu nuit
   ============================================================
   Le hero a un fond bleu nuit #070738 pose par Elementor sur la
   section et la colonne photo. Tout le texte de cette zone DOIT
   rester en creme. On scope par data-id pour ne pas leaker.
*/

/* H6 hero_tag = eyebrow "#JusteTania" en rouge passion sur fond bleu nuit */
body.tg-da-anita .elementor-element-hero_tag h6.elementor-heading-title,
body.tg-da-anita .elementor-element-hero_tag h6.elementor-heading-title a {
  font-family: var(--tg-font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tg-rouge);
  border-bottom: none;
  text-decoration: none;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
body.tg-da-anita .elementor-element-hero_tag h6.elementor-heading-title::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--tg-rouge);
}

/* H1 hero_nom = "Tania Gombert" Gloock monumental creme
   Specificite boostee : on chaîne body.tg-da-anita + .elementor-page
   + selecteur hero_nom + !important pour battre le CSS Elementor de la
   page post-222.css qui pose Montserrat / blanc / 58px avec specificite
   .elementor-222 .elementor-element-hero_nom .elementor-heading-title */
body.tg-da-anita.elementor-page .elementor-element.elementor-element-hero_nom h1.elementor-heading-title,
body.tg-da-anita.elementor-page .elementor-element.elementor-element-hero_nom h1.elementor-heading-title a {
  font-family: var(--tg-font-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(48px, 7vw, 108px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.02em !important;
  color: var(--tg-creme) !important;
  border-bottom: none !important;
  text-decoration: none !important;
}
body.tg-da-anita.elementor-page .elementor-element.elementor-element-hero_nom h1.elementor-heading-title a:hover {
  color: var(--tg-rouge) !important;
}

/* Filet rouge passion (divider hero_div) sous le H1 */
body.tg-da-anita .elementor-element-hero_div .elementor-divider-separator {
  border-top-color: var(--tg-rouge);
  border-top-width: 2px;
  width: 80px;
  margin: 18px 0;
  opacity: 1;
}

/* Roles : sous-titre serif italique creme */
body.tg-da-anita .elementor-element-hero_roles p {
  font-family: var(--tg-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--tg-creme);
  opacity: 0.92;
  margin-bottom: 8px;
}

/* Bio : texte editorial serif crème */
body.tg-da-anita .elementor-element-hero_bio p {
  font-family: var(--tg-font-serif);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--tg-creme);
  margin-bottom: 1em;
  max-width: 560px;
}
body.tg-da-anita .elementor-element-hero_bio p strong {
  font-weight: 600;
  color: var(--tg-creme);
  background: linear-gradient(to top,
    rgba(172, 12, 46, 0.55) 0%,
    rgba(172, 12, 46, 0.55) 32%,
    transparent 32%);
  padding: 0 4px;
}

/* CTA hero : laisser le HTML inline du widget mais reforcer pour cohérence */
body.tg-da-anita .elementor-element-hero_cta .tg-btn-red {
  background: var(--tg-rouge);
  color: var(--tg-creme);
  border: 1px solid var(--tg-rouge);
}
body.tg-da-anita .elementor-element-hero_cta .tg-btn-red:hover {
  background: var(--tg-rouge-dark);
  border-color: var(--tg-rouge-dark);
}
body.tg-da-anita .elementor-element-hero_cta .tg-btn-ghost {
  background: transparent;
  color: var(--tg-creme);
  border: 1px solid rgba(250, 243, 232, 0.55);
}
body.tg-da-anita .elementor-element-hero_cta .tg-btn-ghost:hover {
  border-color: var(--tg-creme);
  background: rgba(250, 243, 232, 0.08);
}

/* ============================================================
   4. HEADINGS ELEMENTOR PAR DEFAUT (hors hero)
   ============================================================
   Pour toutes les autres sections, headings en serif Gloock marine.
   On NE cible PAS [data-id^="hero_"] (deja gere ci-dessus).
*/

body.tg-da-anita .elementor-widget-heading h1.elementor-heading-title,
body.tg-da-anita .elementor-widget-heading h2.elementor-heading-title,
body.tg-da-anita .elementor-widget-heading h3.elementor-heading-title,
body.tg-da-anita .elementor-widget-heading h4.elementor-heading-title {
  font-family: var(--tg-font-serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--tg-marine);
}

body.tg-da-anita .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(42px, 5.5vw, 72px);
}
body.tg-da-anita .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(34px, 4.2vw, 56px);
}
body.tg-da-anita .elementor-widget-heading h3.elementor-heading-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
}

/* Eyebrow H5/H6 : caps rouge passion letter-spaced */
body.tg-da-anita .elementor-widget-heading h5.elementor-heading-title,
body.tg-da-anita .elementor-widget-heading h6.elementor-heading-title {
  font-family: var(--tg-font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tg-rouge);
  line-height: 1.4;
}

/* Accent italique dans heading (em / i / .accent) */
body.tg-da-anita .elementor-widget-heading .elementor-heading-title em,
body.tg-da-anita .elementor-widget-heading .elementor-heading-title i,
body.tg-da-anita .elementor-widget-heading .elementor-heading-title .accent {
  font-family: var(--tg-font-serif);
  font-style: italic;
  color: var(--tg-rouge);
  font-weight: 400;
}

/* ============================================================
   5. TEXT-EDITOR ELEMENTOR (hors hero)
   ============================================================
   Le hero_bio / hero_roles sont deja gere. Pour le reste, corps
   editorial marine sur creme. PAS de color forcee globalement,
   on cible le widget.
*/

body.tg-da-anita .elementor-widget-text-editor {
  font-family: var(--tg-font-sans);
  font-size: var(--tg-fs-body);
  line-height: var(--tg-lh-body);
}
body.tg-da-anita .elementor-widget-text-editor p {
  font-family: var(--tg-font-sans);
  font-size: var(--tg-fs-body);
  line-height: var(--tg-lh-body);
  margin-bottom: 1em;
}
body.tg-da-anita .elementor-widget-text-editor a {
  color: var(--tg-rouge);
  text-decoration: none;
  border-bottom: 1px solid rgba(172, 12, 46, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
body.tg-da-anita .elementor-widget-text-editor a:hover {
  color: var(--tg-rouge-dark);
  border-bottom-color: var(--tg-rouge);
}
body.tg-da-anita .elementor-widget-text-editor em,
body.tg-da-anita .elementor-widget-text-editor i {
  font-family: var(--tg-font-serif);
  font-style: italic;
  color: var(--tg-rouge);
}

/* ============================================================
   6. BOUTONS ELEMENTOR (.elementor-button)
   ============================================================
*/
body.tg-da-anita .elementor-button,
body.tg-da-anita .elementor-button-link {
  display: inline-block;
  padding: 14px 26px;
  background: var(--tg-marine);
  color: var(--tg-creme);
  font-family: var(--tg-font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--tg-marine);
  border-radius: 0;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
  line-height: 1.2;
}
body.tg-da-anita .elementor-button:hover,
body.tg-da-anita .elementor-button-link:hover {
  background: var(--tg-rouge);
  border-color: var(--tg-rouge);
  color: var(--tg-creme);
}
body.tg-da-anita .elementor-button .elementor-button-text {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* ============================================================
   7. DIVIDER ELEMENTOR (filet)
   ============================================================
   Hors hero (deja gere), on garde un filet fin marine 0.15.
*/
body.tg-da-anita .elementor-widget-divider:not(.elementor-element-hero_div) .elementor-divider-separator {
  border-top-color: rgba(7, 7, 56, 0.15);
  border-top-width: 1px;
  opacity: 1;
}

/* ============================================================
   8. ICON-BOX / IMAGE-BOX (services, facettes)
   ============================================================
*/
body.tg-da-anita .elementor-image-box-title,
body.tg-da-anita .elementor-icon-box-title {
  font-family: var(--tg-font-serif);
  color: var(--tg-marine);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  margin-bottom: 14px;
}
body.tg-da-anita .elementor-image-box-description,
body.tg-da-anita .elementor-icon-box-description {
  font-family: var(--tg-font-sans);
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--tg-marine);
  opacity: 0.78;
}

/* ============================================================
   9. CLASSES tg-* PRESENTES DANS LE HTML (services, livre, videos)
   ============================================================
   Le HTML home injecte des classes custom dans des widgets html.
   On reste fideles a la grammaire Direction A (table-of-contents).
*/

/* Services - facette table-of-contents (I / II / III / IV) */
body.tg-da-anita .tg-serv-num {
  font-family: var(--tg-font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--tg-rouge);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
body.tg-da-anita .tg-serv-title,
body.tg-da-anita .tg-serv-h {
  font-family: var(--tg-font-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  color: var(--tg-marine);
  margin-bottom: 12px;
}
body.tg-da-anita .tg-serv-main-title,
body.tg-da-anita .tg-serv-section-title {
  font-family: var(--tg-font-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--tg-marine);
}
body.tg-da-anita .tg-serv-card {
  border-top: 1px solid var(--tg-marine);
  padding-top: 22px;
}
body.tg-da-anita .tg-serv-line {
  background: rgba(7, 7, 56, 0.12);
}

/* Livre - mood selection litteraire */
body.tg-da-anita .tg-livre-badge {
  font-family: var(--tg-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tg-rouge);
}

/* Videos */
body.tg-da-anita .tg-vid-main-title {
  font-family: var(--tg-font-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
  color: var(--tg-marine);
  letter-spacing: -0.01em;
}
body.tg-da-anita .tg-vid-title {
  font-family: var(--tg-font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--tg-marine);
}
body.tg-da-anita .tg-vid-tag,
body.tg-da-anita .tg-vid-cat {
  font-family: var(--tg-font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tg-rouge);
  font-weight: 500;
}

/* CTA cross : on respecte .tg-btn-red et .tg-btn-ghost deja inline,
   on ajoute juste la cohérence sur fond crème (hors hero). */
body.tg-da-anita section:not(.elementor-element-home_hero_new) .tg-btn-ghost {
  color: var(--tg-marine);
  border: 1px solid var(--tg-marine);
}
body.tg-da-anita section:not(.elementor-element-home_hero_new) .tg-btn-ghost:hover {
  background: var(--tg-marine);
  color: var(--tg-creme);
}

/* ============================================================
   10. SECTIONS PAGE NATIVES (.entry-title, .entry-content)
   ============================================================
   Pages WP sans Elementor (mentions legales, blog archive...)
*/
body.tg-da-anita .entry-title,
body.tg-da-anita .entry-title a {
  font-family: var(--tg-font-serif);
  font-weight: 400;
  color: var(--tg-marine);
  line-height: 1.1;
  border-bottom: none;
  text-decoration: none;
}
body.tg-da-anita .entry-content {
  font-family: var(--tg-font-sans);
  font-size: var(--tg-fs-body);
  line-height: var(--tg-lh-body);
  color: var(--tg-marine);
}
body.tg-da-anita .entry-content h2 {
  font-family: var(--tg-font-serif);
  font-weight: 500;
  font-size: 1.85rem;
  color: var(--tg-marine);
  margin: 2.5rem 0 1.1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--tg-rouge);
  display: inline-block;
}
body.tg-da-anita .entry-content h3 {
  font-family: var(--tg-font-serif);
  font-size: 1.35rem;
  color: var(--tg-marine);
  font-weight: 500;
}
body.tg-da-anita .entry-content blockquote {
  font-family: var(--tg-font-serif);
  font-style: italic;
  font-size: 1.25rem;
  border-left: 3px solid var(--tg-rouge);
  background: transparent;
  padding: 0.4rem 1.6rem;
  margin: 2rem 0;
  color: var(--tg-marine);
}
body.tg-da-anita .entry-content a {
  color: var(--tg-rouge);
  border-bottom: 1px solid rgba(172, 12, 46, 0.35);
  text-decoration: none;
}
body.tg-da-anita .entry-content a:hover {
  color: var(--tg-rouge-dark);
  border-bottom-color: var(--tg-rouge);
}

/* Page header Zakra */
body.tg-da-anita .zak-page-header,
body.tg-da-anita h1.zak-page-title {
  font-family: var(--tg-font-serif);
  color: var(--tg-marine);
  font-weight: 400;
  background: var(--tg-creme);
}
body.tg-da-anita h1.zak-page-title {
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

/* Breadcrumbs */
body.tg-da-anita .zak-breadcrumbs,
body.tg-da-anita .trail-items {
  font-family: var(--tg-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}
body.tg-da-anita .trail-items a {
  color: var(--tg-marine);
  border-bottom: none;
}
body.tg-da-anita .trail-items a:hover {
  color: var(--tg-rouge);
}
body.tg-da-anita .trail-end {
  color: var(--tg-rouge);
}

/* ============================================================
   11. FOOTER ZAKRA
   ============================================================
   Fond bleu nuit (pas noir, plus chaleureux editorial),
   liens creme, signature #JusteTania rouge passion.
*/
body.tg-da-anita #zak-colophon,
body.tg-da-anita .zak-footer,
body.tg-da-anita #zak-footer {
  background: var(--tg-marine);
  color: var(--tg-creme);
  border-top: none;
  font-family: var(--tg-font-sans);
  padding-top: 64px;
}
body.tg-da-anita .zak-footer a,
body.tg-da-anita #zak-colophon a {
  color: var(--tg-creme);
  border-bottom: none;
  opacity: 0.85;
  transition: color 0.2s ease, opacity 0.2s ease;
}
body.tg-da-anita .zak-footer a:hover,
body.tg-da-anita #zak-colophon a:hover {
  color: var(--tg-rouge);
  opacity: 1;
}
body.tg-da-anita .zak-footer em,
body.tg-da-anita #zak-colophon em {
  font-family: var(--tg-font-accent);
  font-style: italic;
  color: var(--tg-rouge);
  font-size: 1.15rem;
}
body.tg-da-anita .zak-copyright,
body.tg-da-anita .zak-footer-bar {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  border-top: 1px solid rgba(250, 243, 232, 0.15);
  padding-top: 24px;
  margin-top: 48px;
}

/* ============================================================
   12. MOBILE
   ============================================================
*/
@media (max-width: 900px) {
  body.tg-da-anita .custom-logo-link .custom-logo {
    height: 36px;
    max-width: 130px;
  }
  body.tg-da-anita .site-info-wrap {
    display: none; /* En mobile, on garde uniquement le logo image */
  }
  body.tg-da-anita .elementor-element-hero_nom h1.elementor-heading-title {
    font-size: clamp(36px, 9vw, 56px);
  }
  body.tg-da-anita .elementor-element-hero_bio p {
    font-size: 17px;
  }
}

@media (max-width: 600px) {
  body.tg-da-anita .zak-primary-nav ul li > a,
  body.tg-da-anita .main-navigation ul li > a {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
  }
  body.tg-da-anita .elementor-button,
  body.tg-da-anita .tg-btn-red,
  body.tg-da-anita .tg-btn-ghost {
    padding: 12px 22px;
    font-size: 0.7rem;
  }
}

/* ============================================================
   Fin tg-overrides.css - Direction A
   ============================================================ */