/*
Theme Name: Semperia by Sempervirens
Template: hello-elementor
Description: Child theme for Semperia - AI Impact Analysis Services by Sempervirens Consulting
Author: Sempervirens
Author URI: https://www.sempervirens.fr
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: semperia-child
Domain Path: /languages

Semperia Theme - Premium AI Analysis Services Theme
Built on Hello Elementor, optimized for digital products and SaaS.
*/

/* ============================================================================
   PALETTE & TOKENS SEMPERIA — Variables globales
   À placer en tête de style.css, après l'en-tête WordPress du theme
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     COULEURS PRINCIPALES
     ------------------------------------------------------------------ */
  --color-primary-dark:    #1B4D3E;   /* Vert forêt foncé — couleur principale */
  --color-primary-med:     #2D6A52;   /* Vert intermédiaire — hover, accents */
  --color-accent-gold:     #C5A258;   /* Or — accents décoratifs, underlines */

  /* ------------------------------------------------------------------
     FONDS & SURFACES
     ------------------------------------------------------------------ */
  --color-white:           #FFFFFF;
  --color-light-bg:        #F7F5F0;   /* Fond légèrement chaud — sections alternées */

  /* ------------------------------------------------------------------
     TEXTE
     ------------------------------------------------------------------ */
  --color-text-dark:       #2C2C2C;   /* Corps de texte principal */
  --color-text-light:      #5A5A5A;   /* Texte secondaire, légendes */

  /* ------------------------------------------------------------------
     NEUTRES & BORDURES
     ------------------------------------------------------------------ */
  --color-gray-light:      #E8E6E1;   /* Bordures légères, séparateurs */
  --color-gray-medium:     #CCCCCC;   /* Bordures standard */
  --color-gray-dark:       #888888;   /* Texte désactivé, placeholders */

  /* ------------------------------------------------------------------
     ÉTATS FONCTIONNELS
     ------------------------------------------------------------------ */
  --color-success:         #27AE60;
  --color-warning:         #F39C12;
  --color-error:           #E74C3C;
  --color-info:            #3498DB;

  /* ------------------------------------------------------------------
     TYPOGRAPHIE — Familles
     ------------------------------------------------------------------ */
  --font-system:           -apple-system, BlinkMacSystemFont, "Segoe UI",
                           Roboto, Oxygen-Sans, Ubuntu, Cantarell,
                           "Helvetica Neue", sans-serif;
  --font-serif:            "Playfair Display", Georgia, serif;

  /* ------------------------------------------------------------------
     TYPOGRAPHIE — Tailles (rem pour l'accessibilité)
     ------------------------------------------------------------------ */
  --font-size-xs:          0.75rem;   /* 12px — labels, badges */
  --font-size-sm:          0.875rem;  /* 14px — boutons, nav */
  --font-size-base:        1rem;      /* 16px — corps de texte */
  --font-size-large:       1.125rem;  /* 18px — texte mis en avant */
  --font-size-xl:          1.5rem;    /* 24px — titres de section */
  --font-size-2xl:         2rem;      /* 32px — grands titres */
  --font-size-3xl:         2.5rem;    /* 40px — titres hero */

  /* ------------------------------------------------------------------
     TYPOGRAPHIE — Hauteurs de ligne
     ------------------------------------------------------------------ */
  --line-height-tight:     1.3;
  --line-height-base:      1.6;
  --line-height-relaxed:   1.8;

  /* ------------------------------------------------------------------
     ESPACEMENT — Base 4px
     ------------------------------------------------------------------ */
  --space-1:               0.25rem;   /*  4px */
  --space-2:               0.5rem;    /*  8px */
  --space-3:               0.75rem;   /* 12px */
  --space-4:               1rem;      /* 16px */
  --space-6:               1.5rem;    /* 24px */
  --space-8:               2rem;      /* 32px */
  --space-12:              3rem;      /* 48px */
  --space-16:              4rem;      /* 64px */

  /* ------------------------------------------------------------------
     BORDURES & RAYONS
     ------------------------------------------------------------------ */
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             12px;
  --radius-full:           9999px;

  /* ------------------------------------------------------------------
     OMBRES
     ------------------------------------------------------------------ */
  --shadow-sm:             0 1px 3px rgba(27, 77, 62, 0.08);
  --shadow-md:             0 4px 12px rgba(27, 77, 62, 0.10);
  --shadow-lg:             0 12px 32px rgba(27, 77, 62, 0.14);

  /* ------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------ */
  --transition-base:       0.3s ease;
  --transition-fast:       0.15s ease;
}

/* ============================================================================
   RÉINITIALISATION ET STYLE DE BASE
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-system);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-dark);
  background-color: var(--color-white);
}

/* ============================================================================
   TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-tight);
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: var(--color-primary-dark);
}

h1 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  letter-spacing: -0.5px;
}

h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: -0.25px;
}

h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
}

h4, h5, h6 {
  font-size: var(--font-size-large);
  font-weight: 600;
}

p {
  margin-bottom: 1rem;
  color: var(--color-text-dark);
}

a {
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.3s ease;
}

a:hover {
  /*color: var(--color-accent-gold);*/
  text-decoration: none;
}

/* ============================================================================
   BOUTONS GÉNÉRIQUES
   ========================================================================== */

.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button__link {
  display: inline-block;
  padding: 12px 28px;
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  border: 2px solid var(--color-primary-dark);
  border-radius: 4px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  font-family: var(--font-system);
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover {
  background-color: transparent;
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Bouton secondaire (accent or) */
.button.button-secondary,
.button.secondary {
  background-color: transparent;
  color: var(--color-accent-gold);
  border-color: var(--color-accent-gold);
}

.button.button-secondary:hover,
.button.secondary:hover {
  background-color: var(--color-accent-gold);
  color: var(--color-white);
}

/* ============================================================================
   FORMULAIRES
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="tel"],
textarea,
select {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-light);
  border-radius: 4px;
  font-family: var(--font-system);
  font-size: var(--font-size-base);
  background-color: var(--color-white);
  color: var(--color-text-dark);
  transition: border-color 0.3s ease;
  appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 3px rgba(27, 77, 62, 0.1);
}

textarea {
  resize: vertical;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--color-text-dark);
}

/* ============================================================================
   SECTIONS ELEMENTOR
   ========================================================================== */

.elementor-section {
  padding: 2rem 0;
}

.elementor-section.elementor-section-full_width {
  padding: 0;
}

/* Section avec fond clair */
.elementor-section.light-background {
  background-color: var(--color-light-bg);
}

/* Section avec fond primaire */
.elementor-section.dark-background {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.elementor-section.dark-background h1,
.elementor-section.dark-background h2,
.elementor-section.dark-background h3,
.elementor-section.dark-background h4,
.elementor-section.dark-background h5,
.elementor-section.dark-background h6 {
  color: var(--color-white);
}

.elementor-section.dark-background a {
  color: var(--color-accent-gold);
}

.elementor-section.dark-background a:hover {
  color: var(--color-white);
}

/* ============================================================================
   CONTENEUR ET LAYOUT
   ========================================================================== */

.elementor-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.elementor-column {
  margin-bottom: 2rem;
}

/* ============================================================================
   WOOCOMMERCE - PAGE DE PAIEMENT
   ========================================================================== */

.woocommerce.woocommerce-checkout {
  background-color: var(--color-white);
}

.woocommerce .woocommerce-checkout h1 {
  color: var(--color-primary-dark);
  margin-bottom: 2rem;
}

.woocommerce form.checkout {
  background-color: var(--color-white);
}

.woocommerce .woocommerce-checkout-review-order,
.woocommerce form.checkout #customer_details {
  background-color: transparent;
}

.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
  }
}

.woocommerce form .form-row {
  margin-bottom: 1.5rem;
}

.woocommerce form .form-row label {
  font-weight: 500;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}

.woocommerce form .form-row input,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  border: 1px solid var(--color-gray-light);
  padding: 10px 12px;
  border-radius: 4px;
  font-family: var(--font-system);
  font-size: var(--font-size-base);
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 3px rgba(27, 77, 62, 0.1);
  outline: none;
}

.woocommerce .woocommerce-checkout-payment h3,
.woocommerce .woocommerce-checkout-review-order h3,
.woocommerce-checkout-review-order h3 {
  color: var(--color-primary-dark);
  font-size: var(--font-size-xl);
  font-weight: 700;
  border-bottom: 2px solid var(--color-accent-gold);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-gray-light);
  border-radius: 4px;
  overflow: hidden;
}

.woocommerce table.shop_table thead {
  background-color: var(--color-light-bg);
}

.woocommerce table.shop_table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-primary-dark);
  border-bottom: 2px solid var(--color-gray-light);
}

.woocommerce table.shop_table td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-gray-light);
}

.woocommerce table.shop_table tbody tr:last-child td {
  border-bottom: none;
}

.woocommerce-checkout .order-review .order-total {
  background-color: var(--color-light-bg);
  padding: 1.5rem;
  border-radius: 4px;
  border-left: 4px solid var(--color-accent-gold);
}

.woocommerce-checkout .order-review .order-total strong {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.woocommerce #payment {
  background-color: transparent;
  padding: 0;
}

.woocommerce #place_order {
  width: 100%;
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  border: 2px solid var(--color-primary-dark);
  padding: 14px 28px;
  font-size: var(--font-size-large);
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 2rem;
}

.woocommerce #place_order:hover {
  background-color: transparent;
  color: var(--color-primary-dark);
}

.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  border-left: 4px solid var(--color-error);
  background-color: #FEE;
  color: #8B0000;
}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  border-left-color: var(--color-info);
  background-color: #EEF;
  color: #003;
}

.woocommerce-shipping-fields {
  display: none;
}

/* ============================================================================
   WOOCOMMERCE - PAGES GÉNÉRALES
   ========================================================================== */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.woocommerce ul.products li.product {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: 4px;
  padding: 1rem;
  transition: all 0.3s ease;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--color-accent-gold);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.woocommerce .price {
  color: var(--color-accent-gold);
  font-weight: 700;
}

/* ============================================================================
   HEADER ET NAVIGATION
   ========================================================================== */

.site-header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-light);
  padding: 1rem 0;
}

.site-logo a {
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: var(--font-size-xl);
}

.site-navigation a {
  color: var(--color-text-dark);
  font-weight: 500;
  margin: 0 1rem;
  transition: color 0.3s ease;
}

.site-navigation a:hover {
  color: var(--color-primary-dark);
}

/* ============================================================================
   SÉLECTEUR DE LANGUE (LANG-SWITCHER)
   Compatible WPML — le switcher natif WPML reçoit ces classes via functions.php
   ========================================================================== */

.lang-switcher {
  position: relative;
  display: inline-block;
}

.lang-btn {
  background: transparent;
  border: 1.5px solid var(--color-gray-light);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-dark);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  font-family: var(--font-system);
  letter-spacing: 0.04em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-btn:hover {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

/* Chevron indicateur */
.lang-btn::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.2s;
}

.lang-switcher:focus-within .lang-btn::after,
.lang-switcher:hover .lang-btn::after {
  transform: rotate(180deg);
}

/* Menu déroulant */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 80px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 1000;
  overflow: hidden;
}

.lang-switcher:focus-within .lang-dropdown,
.lang-switcher:hover .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown a {
  display: block;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-light);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.lang-dropdown a:hover {
  background-color: var(--color-light-bg);
  color: var(--color-primary-dark);
}

.lang-dropdown a.active,
.lang-dropdown a.current-language {
  color: var(--color-primary-dark);
  font-weight: 700;
  background-color: var(--color-light-bg);
}

/* Compatibilité WPML : le switcher natif WPML utilise des <ul>/<li> */
.wpml-ls-statics-shortcode_actions {
  position: relative;
}

.wpml-ls-statics-shortcode_actions .wpml-ls-item {
  list-style: none;
}

.wpml-ls-statics-shortcode_actions .wpml-ls-item a {
  display: block;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-light);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.wpml-ls-statics-shortcode_actions .wpml-ls-item a:hover {
  background-color: var(--color-light-bg);
  color: var(--color-primary-dark);
}

.wpml-ls-statics-shortcode_actions .wpml-ls-current-language a {
  color: var(--color-primary-dark);
  font-weight: 700;
}

/* ======================================

/* ============================================================================
   WOOCOMMERCE - FICHE PRODUIT SIMPLE
   ========================================================================== */

.woocommerce div.product .product_title {
  color: var(--color-primary-dark);
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: 1rem;
}

.woocommerce div.product .price {
  color: var(--color-accent-gold);
  font-size: var(--font-size-large);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--color-text-dark);
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.woocommerce div.product form.cart .button {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  border: 2px solid var(--color-primary-dark);
  padding: 12px 28px;
  font-size: var(--font-size-base);
  font-weight: 700;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.woocommerce div.product form.cart .button:hover {
  background-color: transparent;
  color: var(--color-primary-dark);
}


/* ============================================================================
   WOOCOMMERCE - PANIER
   ========================================================================== */

.woocommerce-cart .woocommerce-cart-form table.cart {
  border: 1px solid var(--color-gray-light);
  border-radius: 4px;
  overflow: hidden;
}

.woocommerce-cart .woocommerce-cart-form table.cart th {
  background-color: var(--color-light-bg);
  color: var(--color-primary-dark);
  font-weight: 600;
  padding: 1rem;
  border-bottom: 2px solid var(--color-gray-light);
}

.woocommerce-cart .woocommerce-cart-form table.cart td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-gray-light);
  vertical-align: middle;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  background-color: var(--color-light-bg);
  border: 1px solid var(--color-gray-light);
  border-radius: 4px;
  padding: 1.5rem;
}

.woocommerce-cart .cart_totals h2 {
  color: var(--color-primary-dark);
  font-size: var(--font-size-xl);
  font-weight: 700;
  border-bottom: 2px solid var(--color-accent-gold);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  border: 2px solid var(--color-primary-dark);
  padding: 14px 28px;
  font-size: var(--font-size-large);
  font-weight: 700;
  border-radius: 4px;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button:hover {
  background-color: transparent;
  color: var(--color-primary-dark);
}


/* ============================================================================
   WOOCOMMERCE - BOUTIQUE (ARCHIVE PRODUITS)
   ========================================================================== */

.woocommerce-shop .woocommerce-products-header__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.woocommerce ul.products li.product a.button {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  border: 2px solid var(--color-primary-dark);
  padding: 8px 16px;
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.woocommerce ul.products li.product a.button:hover {
  background-color: transparent;
  color: var(--color-primary-dark);
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  color: var(--color-primary-dark);
  border-color: var(--color-gray-light);
}

.woocommerce nav.woocommerce-pagination ul li .current {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  border-color: var(--color-primary-dark);
}


/* ============================================================================
   WOOCOMMERCE - MON COMPTE
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-gray-light);
  border-radius: 4px;
  overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 16px;
  color: var(--color-text-dark);
  font-weight: 500;
  border-bottom: 1px solid var(--color-gray-light);
  transition: all 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background-color: var(--color-light-bg);
  color: var(--color-primary-dark);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content h2 {
  color: var(--color-primary-dark);
  font-size: var(--font-size-xl);
  font-weight: 700;
  border-bottom: 2px solid var(--color-accent-gold);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* ============================================================================
   TEMPLATES GÉNÉRIQUES — page.php / 404.php / thankyou.php
   ========================================================================== */

.semperia-page-wrapper {
  min-height: 60vh;
  background-color: var(--color-white);
}

.semperia-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* En-tête de page */
.semperia-page-header {
  background-color: var(--color-light-bg);
  border-bottom: 3px solid var(--color-accent-gold);
  padding: 3rem 0 2rem;
}

.semperia-page-title {
  color: var(--color-primary-dark);
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin: 0;
}

/* Contenu prose (CGV, mentions légales…) */
.semperia-page-content {
  padding: 3rem 0 4rem;
}

.semperia-prose h2 {
  color: var(--color-primary-dark);
  font-size: var(--font-size-large);
  font-weight: 700;
  border-bottom: 2px solid var(--color-accent-gold);
  padding-bottom: 0.5rem;
  margin: 2.5rem 0 1rem;
}

.semperia-prose p,
.semperia-prose li {
  color: var(--color-text-dark);
  font-size: var(--font-size-base);
  line-height: 1.7;
}

/* 404 */
.semperia-404-hero,
.semperia-thankyou-hero {
  padding: 5rem 0;
  text-align: center;
}

.semperia-404-badge {
  font-size: 6rem;
  font-weight: 900;
  color: var(--color-accent-gold);
  line-height: 1;
  margin-bottom: 1.5rem;
}

.semperia-404-title,
.semperia-thankyou-title {
  color: var(--color-primary-dark);
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: 1rem;
}

.semperia-404-desc,
.semperia-thankyou-desc {
  color: var(--color-text-dark);
  font-size: var(--font-size-base);
  max-width: 540px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

/* Thank you — détails commande */
.semperia-thankyou-icon {
  width: 64px;
  height: 64px;
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
}

.semperia-thankyou-order-details {
  background-color: var(--color-light-bg);
  border-left: 4px solid var(--color-accent-gold);
  border-radius: 4px;
  padding: 1.5rem 2rem;
  text-align: left;
  max-width: 480px;
  margin: 2rem auto;
}

.semperia-thankyou-order-details p {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: var(--color-text-dark);
}

.semperia-thankyou-order-details .label {
  font-weight: 500;
}

.semperia-thankyou-note {
  color: var(--color-text-light);
  font-size: 0.85rem;
  margin-bottom: 2.5rem;
}

/* Boutons */
.semperia-btn {
  display: inline-block;
  padding: 12px 28px;
  font-weight: 700;
  font-size: var(--font-size-base);
  border-radius: 4px;
  border: 2px solid var(--color-primary-dark);
  text-decoration: none;
  transition: all 0.3s ease;
}

.semperia-btn-primary {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.semperia-btn-primary:hover {
  background-color: transparent;
  color: var(--color-primary-dark);
}

.semperia-btn-secondary {
  background-color: transparent;
  color: var(--color-primary-dark);
}

.semperia-btn-secondary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

/* ============================================================================
   WOOCOMMERCE - SINGLE PRODUCT
   ========================================================================== */

.semperia-product-header {
  background-color: var(--color-light-bg);
  border-bottom: 1px solid var(--color-gray-light);
  padding: 1rem 0;
}

/* Layout 2 colonnes image / résumé */
.semperia-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 3rem 0;
}

@media (max-width: 768px) {
  .semperia-product-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.semperia-product-gallery img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--color-gray-light);
}

.semperia-product-summary .product_title {
  color: var(--color-primary-dark);
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: 1rem;
}

.semperia-product-summary .price {
  color: var(--color-accent-gold);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  display: block;
}

.semperia-product-summary .woocommerce-product-details__short-description {
  color: var(--color-text-dark);
  line-height: 1.7;
  margin-bottom: 2rem;
}


/* ============================================================================
   WOOCOMMERCE - ARCHIVE PRODUITS (BOUTIQUE)
   ========================================================================== */

.semperia-archive-content {
  padding: 3rem 0 4rem;
}

.semperia-archive-title {
  margin-bottom: 0.5rem;
}

.semperia-archive-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-light);
}

.semperia-archive-toolbar .woocommerce-result-count {
  color: var(--color-text-light);
  font-size: var(--font-size-base);
  margin: 0;
}

.semperia-archive-toolbar .woocommerce-ordering select {
  border: 1px solid var(--color-gray-light);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--font-system);
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
}

.semperia-archive-pagination {
  margin-top: 3rem;
  text-align: center;
}

/* ============================================================================
   SINGLE POST
   ========================================================================== */

.semperia-post-header {
  padding-bottom: 2rem;
}

.semperia-breadcrumb {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.semperia-breadcrumb a {
  color: var(--color-primary-dark);
  text-decoration: none;
}

.semperia-breadcrumb a:hover {
  text-decoration: underline;
}

.semperia-post-title {
  color: var(--color-primary-dark);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-bottom: 1rem;
}

.semperia-post-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.semperia-post-sep {
  opacity: 0.4;
}

.semperia-post-thumbnail {
  padding: 1.5rem 0;
}

.semperia-post-thumbnail-img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-light);
}

/* Tags */
.semperia-post-tags {
  padding: 2rem 0;
  border-top: 1px solid var(--color-gray-light);
}

.semperia-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.semperia-tags-list a {
  display: inline-block;
  padding: 4px 12px;
  background-color: var(--color-light-bg);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.semperia-tags-list a:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  border-color: var(--color-primary-dark);
}

/* Navigation entre articles */
.semperia-post-nav {
  background-color: var(--color-light-bg);
  border-top: 1px solid var(--color-gray-light);
  padding: 2rem 0;
}

.semperia-post-nav-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .semperia-post-nav-inner {
    grid-template-columns: 1fr;
  }
}

.semperia-post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  padding: 1rem;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  transition: all var(--transition-base);
}

.semperia-post-nav-item:hover {
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

.semperia-post-nav-next {
  text-align: right;
}

.semperia-post-nav-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.semperia-post-nav-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-primary-dark);
  line-height: var(--line-height-tight);
}


/* ============================================================================
   ARCHIVE POSTS
   ========================================================================== */

.semperia-archive-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-gold);
  margin-bottom: 0.5rem;
}

.semperia-archive-desc {
  color: var(--color-text-light);
  font-size: var(--font-size-base);
  margin-top: 0.75rem;
  max-width: 600px;
}

/* Grille de cards */
.semperia-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.semperia-post-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
}

.semperia-post-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-gold);
  transform: translateY(-2px);
}

.semperia-post-card-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.semperia-post-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.semperia-post-card-cat {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-gold);
  margin-bottom: 0.5rem;
}

.semperia-post-card-title {
  font-size: var(--font-size-large);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-bottom: 0.75rem;
}

.semperia-post-card-title a {
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.semperia-post-card-title a:hover {
  color: var(--color-primary-med);
}

.semperia-post-card-excerpt {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  line-height: var(--line-height-base);
  flex: 1;
  margin-bottom: 1rem;
}

.semperia-post-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-light);
}

.semperia-post-card-link {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.semperia-post-card-link:hover {
  color: var(--color-primary-med);
}

/* Hack  css */
#cmplz-document {
    max-width: max-content!important;
}

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    width: 100%!important;
}

.wc-tabs-wrapper .wc-tabs {
	display:none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    position: relative;
    padding-left: 3.5em!important; /* réserve la place pour l'icône */
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    position: absolute;
    left: 1.2em;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}