/*
 Theme Name:   Artanaé — Hello Elementor Child
 Theme URI:    https://artanae.fr
 Description:  Thème enfant Hello Elementor pour le site Artanaé — Architecture Intérieure B2B
 Author:       Indiana MARIADASSOU
 Author URI:   https://artanae.fr
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  artanae-child
*/

/* ============================================================
   ARTANAÉ — CSS GLOBAL
   ============================================================ */

/* ------------------------------------------------------------
   VARIABLES CSS — Design System
   ------------------------------------------------------------ */
:root {
  --color-primary:             #974323;
  --color-primary-container:   #b65a39;
  --color-primary-accent:      #ffb59c;
  --color-background:          #fcf9f4;
  --color-surface-low:         #f6f3ee;
  --color-surface-container:   #f0ede8;
  --color-surface-highest:     #e5e2dd;
  --color-text:                #1c1c19;
  --color-text-variant:        #55433c;
  --color-text-muted:          #78716c;
  --color-outline-variant:     #dbc1b9;
  --color-inverse-surface:     #31302d;
  --color-footer:              #000000;
  --color-accent-nav:          #C36442;

  --font-headline:             'Noto Serif', Georgia, serif;
  --font-body:                 'Manrope', system-ui, sans-serif;
  --font-label:                'Manrope', system-ui, sans-serif;

  --section-padding-y:         8rem;
  --section-padding-x:         3rem;

  --radius-btn:                8px;
  --radius-card:               4px;

  --transition-fast:           150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-std:            300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:           700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--color-primary-container);
  color: #ffffff;
}

/* Forcer les polices Artanaé sur tous les éléments */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--font-headline) !important;
}

p, span, a, li, label, input, textarea, select, button,
.elementor-widget-text-editor,
.elementor-widget-text-editor * {
  font-family: var(--font-body);
}

/* ------------------------------------------------------------
   NAVIGATION GLASSMORPHISM
   ------------------------------------------------------------ */
.elementor-location-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid rgba(219, 193, 185, 0.3);
  transition: background var(--transition-std);
}

/* Logo Artanaé */
.artanae-logo {
  font-family: var(--font-headline) !important;
  font-style: italic !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
}

/* Nav links */
.elementor-nav-menu a {
  font-family: var(--font-label) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #57534e !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

.elementor-nav-menu a:hover,
.elementor-nav-menu .current-menu-item > a {
  color: var(--color-accent-nav) !important;
}

.elementor-nav-menu .current-menu-item > a {
  border-bottom: 2px solid var(--color-accent-nav) !important;
  padding-bottom: 4px !important;
}

/* Bouton CTA nav */
.artanae-btn-nav.elementor-button,
.artanae-btn-nav .elementor-button {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  font-family: var(--font-label) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: var(--radius-btn) !important;
  border: none !important;
  transition: background-color var(--transition-fast) !important;
}

.artanae-btn-nav.elementor-button:hover,
.artanae-btn-nav .elementor-button:hover {
  background-color: var(--color-primary-container) !important;
}

/* Compensation header fixe */
.elementor-location-header ~ * {
  /* géré page par page avec padding-top */
}

/* ------------------------------------------------------------
   BOUTONS GLOBAUX
   ------------------------------------------------------------ */
.artanae-btn-primary,
.artanae-btn-primary.elementor-button {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  font-family: var(--font-label) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 1.25rem 3rem !important;
  border-radius: var(--radius-btn) !important;
  border: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background-color var(--transition-fast), transform var(--transition-fast) !important;
  cursor: pointer !important;
}

.artanae-btn-primary:hover,
.artanae-btn-primary.elementor-button:hover {
  background-color: var(--color-primary-container) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.artanae-btn-outline,
.artanae-btn-outline.elementor-button {
  background: transparent !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-outline-variant) !important;
  font-family: var(--font-label) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 1.25rem 3rem !important;
  border-radius: var(--radius-btn) !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background-color var(--transition-fast) !important;
  cursor: pointer !important;
}

.artanae-btn-outline:hover {
  background-color: #ebe8e3 !important;
  text-decoration: none !important;
  color: var(--color-text) !important;
}

/* ------------------------------------------------------------
   SECTIONS — FONDS
   ------------------------------------------------------------ */
.artanae-section-light    { background-color: var(--color-background) !important; }
.artanae-section-subtle   { background-color: var(--color-surface-low) !important; }
.artanae-section-container{ background-color: var(--color-surface-container) !important; }
.artanae-section-dark     { background-color: var(--color-inverse-surface) !important; color: #fff !important; }
.artanae-section-black    { background-color: var(--color-footer) !important; color: #fff !important; }

/* ------------------------------------------------------------
   MATERIAL SYMBOLS
   ------------------------------------------------------------ */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 1.5rem;
  line-height: 1;
  vertical-align: middle;
}

/* ------------------------------------------------------------
   IMAGES — Style architectural (pas d'arrondi)
   ------------------------------------------------------------ */
img,
.elementor-image img,
.elementor-widget-image img {
  border-radius: 0 !important;
}

/* Grayscale → couleur au hover */
.artanae-img-bw img {
  filter: grayscale(100%);
  transition: filter var(--transition-slow);
}
.artanae-img-bw:hover img {
  filter: grayscale(0%);
}

/* ------------------------------------------------------------
   FORMULAIRES — Style Artanaé (WPForms)
   ------------------------------------------------------------ */
.wpforms-form .wpforms-field-label {
  font-family: var(--font-label) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: var(--color-text-variant) !important;
  margin-bottom: 8px !important;
}

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="number"],
.wpforms-form select,
.wpforms-form textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--color-outline-variant) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast) !important;
}

.wpforms-form input:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus {
  border-bottom-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

.wpforms-form .wpforms-submit-container button {
  background: var(--color-text) !important;
  color: #ffffff !important;
  font-family: var(--font-label) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3em !important;
  padding: 1.25rem 3rem !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background-color var(--transition-std) !important;
}

.wpforms-form .wpforms-submit-container button:hover {
  background: var(--color-primary) !important;
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.artanae-footer {
  background-color: var(--color-footer);
  border-top: 1px solid rgba(219, 193, 185, 0.10);
}

.artanae-footer a {
  color: #a8a29e;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.artanae-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-nav);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ------------------------------------------------------------
   UTILITAIRES
   ------------------------------------------------------------ */
.artanae-serif   { font-family: var(--font-headline) !important; }
.artanae-sans    { font-family: var(--font-body) !important; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}