/*
Theme Name: HumAIze
Theme URI: https://humaize.io
Description: Thème HumAIze - Architecte d'expériences d'apprentissage. Identité visuelle complète avec palette anthracite, vert sauge et crème.
Author: Stéphanie Daragon
Author URI: https://humaize.io
Template: kadence
Version: 1.0.0
Text Domain: humaize
*/

/* ============================================================
   VARIABLES HUMAIZE
   ============================================================ */
:root {
  --humaize-ink:          #2D3142;
  --humaize-paper:        #F5F0E8;
  --humaize-accent:       #7B9E87;
  --humaize-accent-dark:  #5a7d68;
  --humaize-accent-light: #E8F0EA;
  --humaize-muted:        #666666;
  --humaize-border:       #C8C4BC;
  --humaize-text:         #1C1C1C;
  --humaize-white:        #FFFFFF;

  /* Override Kadence / Elementor variables */
  --global-palette1: #2D3142;
  --global-palette2: #7B9E87;
  --global-palette3: #F5F0E8;
  --global-palette4: #5a7d68;
  --global-palette5: #E8F0EA;
  --global-palette6: #C8C4BC;
  --global-palette7: #1C1C1C;
  --global-palette8: #666666;
  --global-palette9: #FFFFFF;

  /* Elementor variables */
  --e-global-color-primary:    #2D3142;
  --e-global-color-secondary:  #7B9E87;
  --e-global-color-text:       #1C1C1C;
  --e-global-color-accent:     #5a7d68;

  /* Typographie */
  --global-body-font-family:    'Inter', sans-serif;
  --global-heading-font-family: 'Cormorant Garamond', serif;
}

/* ============================================================
   IMPORT POLICES GOOGLE
   ============================================================ */
/* Google Fonts chargées via functions.php wp_enqueue_style - ne pas utiliser @import */

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }

/* Skip-to-content (accessibilite) */
.skip-to-content {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  z-index: 99999 !important;
  background: var(--humaize-accent) !important;
  color: var(--humaize-white) !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 0 0 8px 0 !important;
}
.skip-to-content:focus {
  left: 0 !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
}
body {
  font-family: 'Inter', sans-serif !important;
  color: var(--humaize-text) !important;
  background-color: var(--humaize-white) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500 !important;
  color: var(--humaize-ink) !important;
  line-height: 1.15 !important;
}

p, li, td, th, label, input, textarea, select, button {
  font-family: 'Inter', sans-serif !important;
}

a {
  color: var(--humaize-accent) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
a:hover { color: var(--humaize-accent-dark) !important; }

/* Focus-visible (accessibilite clavier) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--humaize-accent) !important;
  outline-offset: 2px !important;
}

/* Active/pressed state sur les boutons */
.humaize-btn-primary:active,
.humaize-nav-cta:active,
.etab-hero-cta:active,
.etab-cta-btn:active,
.etab-form-submit:active,
button:active,
input[type="submit"]:active {
  transform: scale(0.98) !important;
}

/* Grain subtil sur les fonds plats */
.humaize-hero::after,
.etab-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header,
#masthead,
.main-navigation,
.kadence-header,
header.site-header {
  background: rgba(245,240,232,0.96) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--humaize-border) !important;
}

.site-title a,
.site-branding .site-title a {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--humaize-ink) !important;
  letter-spacing: 0.02em !important;
}

.main-navigation a,
.nav-links a,
.kadence-header-row a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--humaize-ink) !important;
  letter-spacing: 0.04em !important;
}

.main-navigation a:hover,
.nav-links a:hover {
  color: var(--humaize-accent) !important;
}

/* Bouton CTA nav */
.nav-cta,
.header-cta,
.button-primary-nav {
  background: var(--humaize-ink) !important;
  color: var(--humaize-white) !important;
  padding: 10px 22px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}
.nav-cta:hover { background: var(--humaize-accent) !important; }

/* ============================================================
   BOUTONS
   ============================================================ */
.wp-block-button__link,
.button, button,
input[type="submit"],
.btn, .btn-primary,
.elementor-button {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.wp-block-button__link,
.button-primary,
.elementor-button-primary {
  background: var(--humaize-ink) !important;
  color: var(--humaize-white) !important;
  border: none !important;
  padding: 14px 32px !important;
}
.wp-block-button__link:hover,
.button-primary:hover {
  background: var(--humaize-accent) !important;
  color: var(--humaize-white) !important;
  transform: translateY(-2px) !important;
}

.button-accent,
input[type="submit"] {
  background: var(--humaize-accent) !important;
  color: var(--humaize-white) !important;
  border: none !important;
}
.button-accent:hover,
input[type="submit"]:hover {
  background: var(--humaize-accent-dark) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   CONTENU PAGES
   ============================================================ */
.entry-content,
.page-content,
.post-content {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--humaize-text) !important;
  max-width: 100% !important;
}

/* Blocs Gutenberg */
.wp-block-group,
.wp-block-cover {
  width: 100% !important;
}

/* ============================================================
   SECTIONS HUMAIZE (classes personnalisées)
   ============================================================ */

/* Hero sombre */
.humaize-hero,
.section-dark {
  background: var(--humaize-ink) !important;
  color: var(--humaize-paper) !important;
}
.humaize-hero h1,
.humaize-hero h2,
.humaize-hero h3,
.humaize-hero h4,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: var(--humaize-paper) !important;
}

/* Titres sur fond sombre (ink) - templates custom */
.humaize-hero-path h3,
.humaize-quote-block blockquote,
.humaize-diag-cta h2,
.humaize-preuve-align h3,
.humaize-card-dark .humaize-card-title,
.etab-hero h1,
.etab-hero h2,
.etab-solution-card h3,
.etab-solution-card-list,
.etab-diff-card--archi h3,
.etab-form-info h3 {
  color: var(--humaize-paper) !important;
}

/* Titres CTA sur fond accent (vert sauge) */
.etab-cta h2 {
  color: var(--humaize-white) !important;
}

/* Renfort spécificité - titres sur fond sombre (contourne h1-h6 global) */
.etab-diff-card.etab-diff-card--archi h3 {
  color: var(--humaize-paper) !important;
}
.etab-solution-card h3 {
  color: var(--humaize-paper) !important;
}
.etab-form .etab-form-info h3 {
  color: var(--humaize-paper) !important;
}
section.etab-hero h1 {
  color: var(--humaize-paper) !important;
}

/* Section crème */
.humaize-paper,
.section-paper {
  background: var(--humaize-paper) !important;
}

/* Section accent */
.humaize-accent-bg,
.section-accent {
  background: var(--humaize-accent) !important;
  color: var(--humaize-white) !important;
}

/* Cartes offres */
.humaize-card {
  border: 1.5px solid var(--humaize-border) !important;
  border-radius: 16px !important;
  padding: 40px 32px !important;
  transition: all 0.3s ease !important;
  background: var(--humaize-white) !important;
}
.humaize-card:hover {
  border-color: var(--humaize-accent) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(45,49,66,0.08) !important;
}
.humaize-card-dark {
  background: var(--humaize-ink) !important;
  border-color: var(--humaize-ink) !important;
}

/* Labels / badges */
.humaize-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--humaize-accent) !important;
}
.humaize-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--humaize-accent) !important;
  background: var(--humaize-accent-light) !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
}

/* Citations */
.humaize-quote {
  background: var(--humaize-ink) !important;
  border-radius: 16px !important;
  padding: 48px 40px !important;
}
.humaize-quote blockquote {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.4rem !important;
  font-style: italic !important;
  color: var(--humaize-paper) !important;
  line-height: 1.6 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon,
footer.site-footer {
  background: var(--humaize-ink) !important;
  color: rgba(245,240,232,0.55) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 60px 0 40px !important;
}

.site-footer a,
#colophon a {
  color: rgba(245,240,232,0.55) !important;
}
.site-footer a:hover,
#colophon a:hover {
  color: var(--humaize-paper) !important;
}

.site-footer h4,
.site-footer .widget-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(245,240,232,0.35) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Copyright */
.site-info,
.copyright {
  font-size: 12px !important;
  color: rgba(245,240,232,0.25) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding-top: 24px !important;
  margin-top: 40px !important;
}

/* ============================================================
   FORMULAIRES
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  border: 1.5px solid var(--humaize-border) !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  transition: border-color 0.2s !important;
  outline: none !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--humaize-accent) !important;
}

/* WPForms */
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  border: 1.5px solid var(--humaize-border) !important;
  border-radius: 8px !important;
}
.wpforms-submit {
  background: var(--humaize-accent) !important;
  color: var(--humaize-white) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}
.wpforms-submit:hover {
  background: var(--humaize-accent-dark) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   ELEMENTOR OVERRIDES
   ============================================================ */
.elementor-section,
.e-container {
  width: 100% !important;
}

.elementor-heading-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500 !important;
}

.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-family: 'Inter', sans-serif !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .main-navigation { display: none !important; }
  h1 { font-size: 2.2rem !important; }
  h2 { font-size: 1.8rem !important; }
}

/* ============================================================
   HAMBURGER MENU MOBILE (templates custom)
   ============================================================ */
.humaize-nav-toggle {
  display: none !important;
  flex-direction: column;
  gap: 5px;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 8px !important;
}
.humaize-nav-toggle span {
  width: 22px !important;
  height: 2px !important;
  background: var(--humaize-ink, #2D3142) !important;
  transition: all 0.3s !important;
  display: block !important;
}
/* Animation hamburger ouvert */
.humaize-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px) !important;
}
.humaize-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0 !important;
}
.humaize-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px) !important;
}

@media (max-width: 768px) {
  .humaize-nav-toggle {
    display: flex !important;
  }
  .humaize-nav-links.open {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(245,240,232,0.98) !important;
    flex-direction: column !important;
    padding: 20px 32px !important;
    gap: 16px !important;
    border-bottom: 1px solid var(--humaize-border, #C8C4BC) !important;
    box-shadow: 0 8px 24px rgba(45,49,66,0.08) !important;
  }
  .humaize-nav-links.open .humaize-nav-cta {
    text-align: center !important;
  }
}

/* ============================================================
   OVERRIDES TITRES SUR FOND SOMBRE - correctif global
   La regle globale `h1-h6 { color: var(--humaize-ink) !important }`
   rendait invisibles tous les titres sur fond anthracite.
   Ce bloc restaure la couleur creme sur toutes les sections dark connues.
   ============================================================ */

/* Hero et sections dark de l'accueil */
.humaize-hero h1,
.humaize-hero h2,
.humaize-hero h3,
.humaize-diag-cta h1,
.humaize-diag-cta h2,
.humaize-diag-cta h3,
.humaize-preuve-align h1,
.humaize-preuve-align h2,
.humaize-preuve-align h3,
.humaize-quote-block h1,
.humaize-quote-block h2,
.humaize-quote-block h3,
/* Page methode */
.h-piliers h1,
.h-piliers h2,
.h-piliers h3,
.h-piliers .h-pilier-title,
.h-cta-final h1,
.h-cta-final h2,
.h-cta-final h3,
.h-offre-visual h1,
.h-offre-visual h2,
.h-offre-visual h3,
.h-offre-visual .h-offre-visual-title,
/* Page studio */
.s-hero h1,
.s-hero h2,
.s-hero h3,
.s-vs h1,
.s-vs h2,
.s-vs h3,
/* Page ia-formation */
.i-cta h1,
.i-cta h2,
.i-cta h3,
/* Page a-propos */
.a-cta h1,
.a-cta h2,
.a-cta h3,
/* Page faq */
.f-cta h1,
.f-cta h2,
.f-cta h3,
/* Page ressources */
.r-featured h1,
.r-featured h2,
.r-featured h3,
/* Single article (blog) */
.article-cta-inner h1,
.article-cta-inner h2,
.article-cta-inner h3 {
  color: var(--humaize-paper) !important;
}

/* Italique d'emphase dans les titres sombres : vert sauge */
.humaize-hero h1 em,
.humaize-hero h2 em,
.humaize-diag-cta h2 em,
.humaize-preuve-align h3 em,
.h-piliers h2 em,
.h-cta-final h2 em,
.s-hero h1 em,
.s-vs h2 em,
.i-cta h2 em,
.a-cta h2 em,
.f-cta h2 em,
.r-featured h3 em,
.article-cta-inner h3 em {
  color: var(--humaize-accent) !important;
  font-style: italic !important;
}

/* Footer HumAIze : h4 des colonnes en gris clair (pas anthracite) */
.humaize-footer h1,
.humaize-footer h2,
.humaize-footer h3,
.humaize-footer h4,
.humaize-footer h5,
.humaize-footer h6,
.humaize-footer-col h4 {
  color: rgba(245,240,232,0.4) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* Reset de la regle globale `h1-h6 font-family: Cormorant Garamond`
   qui s'applique au footer - on force Inter pour les h4 du footer */
.humaize-footer-col h4 {
  font-family: 'Inter', sans-serif !important;
  line-height: 1.4 !important;
}

/* ============================================================
   LOGO HUMAIZE - AI en vert sauge
   ============================================================ */

/* Ciblage du titre du site (Kadence header par defaut) */
.site-title a,
.site-branding .site-title a,
.kadence-header .site-title a {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--humaize-ink) !important;
  text-decoration: none !important;
}

/* Le "AI" en vert - via ::before/::after impossible sur liens,
   on utilise une approche CSS text-decoration + classe */
.site-title .ai-accent,
.logo-ai {
  color: var(--humaize-accent) !important;
}

/* ============================================================
   NAV CUSTOM HUMAIZE - overrides specifiques pour la nav.php partial
   (contre la regle globale `a { color: var(--humaize-accent) !important }`)
   ============================================================ */

/* Logo HumAIze : Hum + ze en anthracite, AI en vert sauge */
.humaize-nav-logo,
.humaize-nav-logo:visited,
.humaize-nav-logo:link {
  color: var(--humaize-ink) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  flex-shrink: 0 !important;
}
.humaize-nav-logo:hover {
  color: var(--humaize-ink) !important;
}
.humaize-nav-logo span {
  color: var(--humaize-accent) !important;
}

/* Items de navigation : anthracite par defaut, vert sauge au hover */
.humaize-nav-links a {
  color: var(--humaize-ink) !important;
}
.humaize-nav-links a:hover {
  color: var(--humaize-accent) !important;
}

/* CTA Diagnostic : reste blanc sur fond anthracite */
.humaize-nav-cta,
.humaize-nav-cta:visited {
  color: var(--humaize-white) !important;
}
.humaize-nav-cta:hover {
  color: var(--humaize-white) !important;
}

/* ============================================================
   NAV CUSTOM HUMAIZE - layout robuste pour 8 items
   ============================================================ */

@media (min-width: 769px) {
  .humaize-nav-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    align-items: center !important;
  }
  .humaize-nav-links a {
    font-size: 13px !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
  }
  .humaize-nav-inner {
    max-width: 1240px !important;
    padding: 0 32px !important;
    gap: 24px !important;
  }
}

/* Sur tres grands ecrans, on peut respirer un peu plus */
@media (min-width: 1280px) {
  .humaize-nav-links { gap: 28px !important; }
}

/* Footer nettoyé */
.site-info {
  font-size: 12px !important;
  color: rgba(245,240,232,0.25) !important;
}
.site-info a[href*="kadence"],
.site-info a[href*="wordpress.org"] {
  display: none !important;
}