/**
 * Design System Adibois
 * Variables CSS pour l'ensemble du site
 *
 * Stratégie:
 * - Light mode par défaut (fond clair)
 * - Dark sections pour les hero sections et fonds sombres
 * - Logo doré uniquement pour le branding (pas dans l'UI)
 */

:root {
  /* === LIGHT MODE (fond clair) === */
  --adibois-brand: #21563B;
  --adibois-heading: #142E20;
  --adibois-text: #475950;
  --adibois-border: #80A691;
  --adibois-border-deco: #E4F0EA;
  --adibois-accent: #8d794e;

  /* === DARK SECTIONS (hero, fonds sombres) === */
  --adibois-dark-brand: #257049;
  --adibois-dark-heading: #FFFFFF;
  --adibois-dark-text: #CED9D3;
  --adibois-dark-border: #95A69D;

  /* === NOTIFICATIONS === */
  --adibois-error: #C73A3A;
  --adibois-warning: #8F6C1A;
  --adibois-success: #067A57;
  --adibois-info: #1A74A8;

  /* === BACKGROUNDS === */
  --adibois-bg-primary: #FFFFFF;
  --adibois-bg-secondary: #F9FAFB;
  --adibois-bg-dark: #121a16;

  /* === TYPOGRAPHIES === */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

/* === UTILITY CLASSES === */

/* Backgrounds */
.bg-adibois-brand { background-color: var(--adibois-brand); }
.bg-adibois-dark { background-color: var(--adibois-bg-dark); }

/* Dark background avec pattern topography à 10% d'opacité */
.bg-adibois-bg-dark {
  position: relative;
  background-color: var(--adibois-bg-dark);
}

.bg-adibois-bg-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/topography.svg');
  background-size: 600px;
  background-repeat: repeat;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

.bg-adibois-bg-dark > * {
  position: relative;
  z-index: 1;
}
.bg-adibois-dark-brand { background-color: var(--adibois-dark-brand); }
.bg-adibois-accent { background-color: var(--adibois-accent); }
.bg-adibois-bg-primary { background-color: var(--adibois-bg-primary); }
.bg-adibois-bg-secondary { background-color: var(--adibois-bg-secondary); }

/* Dialog Search Modal Overlay */
#search-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.2);
}

#search-modal[open] {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Text Colors - Light Mode */
.text-adibois-brand { color: var(--adibois-brand); }
.text-adibois-heading { color: var(--adibois-heading); }
.text-adibois-text { color: var(--adibois-text); }
.text-adibois-accent { color: var(--adibois-accent); }

/* Text Colors - Dark Sections */
.text-adibois-dark-heading { color: var(--adibois-dark-heading); }
.text-adibois-dark-text { color: var(--adibois-dark-text); }

/* Borders */
.border-adibois-border { border-color: var(--adibois-border); }
.border-adibois-border-deco { border-color: var(--adibois-border-deco); }
.border-adibois-dark-border { border-color: var(--adibois-dark-border); }

/* Active States (for interactive elements) */
.text-adibois-active { color: var(--adibois-brand); }
.border-adibois-active { border-color: var(--adibois-brand); }
.bg-adibois-active { background-color: var(--adibois-brand); }

/* Notifications */
.text-adibois-error { color: var(--adibois-error); }
.bg-adibois-error { background-color: var(--adibois-error); }
.border-adibois-error { border-color: var(--adibois-error); }

.text-adibois-warning { color: var(--adibois-warning); }
.bg-adibois-warning { background-color: var(--adibois-warning); }
.border-adibois-warning { border-color: var(--adibois-warning); }

.text-adibois-success { color: var(--adibois-success); }
.bg-adibois-success { background-color: var(--adibois-success); }
.border-adibois-success { border-color: var(--adibois-success); }

.text-adibois-info { color: var(--adibois-info); }
.bg-adibois-info { background-color: var(--adibois-info); }
.border-adibois-info { border-color: var(--adibois-info); }

/* === SECTION CLASSES === */

/* Section avec fond sombre (utilise la palette dark) */
.section-dark {
  background-color: var(--adibois-bg-dark);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
  color: var(--adibois-dark-heading);
}

.section-dark p,
.section-dark span,
.section-dark a {
  color: var(--adibois-dark-text);
}

.section-dark .border {
  border-color: var(--adibois-dark-border);
}

/* Section avec fond clair (utilise la palette light) */
.section-light {
  background-color: var(--adibois-bg-primary);
}

.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4,
.section-light h5,
.section-light h6 {
  color: var(--adibois-heading);
}

.section-light p,
.section-light span {
  color: var(--adibois-text);
}

.section-light a {
  color: var(--adibois-brand);
}

.section-light a:hover {
  color: var(--adibois-accent);
}

.section-light .border {
  border-color: var(--adibois-border-deco);
}

/* === BUTTONS === */

.btn-adibois-primary {
  background-color: var(--adibois-brand);
  color: #FFFFFF;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-adibois-primary:hover {
  background-color: var(--adibois-dark-brand);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 86, 59, 0.2);
}

.btn-adibois-secondary {
  background-color: transparent;
  color: var(--adibois-brand);
  border: 2px solid var(--adibois-brand);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-adibois-secondary:hover {
  background-color: var(--adibois-brand);
  color: #FFFFFF;
}

.btn-adibois-accent {
  background-color: var(--adibois-accent);
  color: #FFFFFF;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-adibois-accent:hover {
  background-color: #C85E1F;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(219, 105, 35, 0.2);
}

/* === FORMS === */

.input-adibois {
  border: 1px solid var(--adibois-border);
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 1rem;
  color: var(--adibois-text);
  transition: all 0.2s ease;
}

.input-adibois:focus {
  outline: none;
  border-color: var(--adibois-brand);
  box-shadow: 0 0 0 3px rgba(33, 86, 59, 0.1);
}

.input-adibois::placeholder {
  color: var(--adibois-border);
}

/* === CARDS === */

.card-adibois {
  background-color: var(--adibois-bg-primary);
  border: 1px solid var(--adibois-border-deco);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.card-adibois:hover {
  box-shadow: 0 8px 24px rgba(20, 46, 32, 0.08);
  transform: translateY(-2px);
}

.card-adibois h3 {
  color: var(--adibois-heading);
  margin-bottom: 0.5rem;
}

.card-adibois p {
  color: var(--adibois-text);
}

/* === ALERTS === */

.alert-adibois {
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.alert-error {
  background-color: #FEF2F2;
  border-left-color: var(--adibois-error);
  color: #7F1D1D;
}

.alert-warning {
  background-color: #FFFBEB;
  border-left-color: var(--adibois-warning);
  color: #78350F;
}

.alert-success {
  background-color: #ECFDF5;
  border-left-color: var(--adibois-success);
  color: #064E3B;
}

.alert-info {
  background-color: #EFF6FF;
  border-left-color: var(--adibois-info);
  color: #1E3A8A;
}

/* === TYPOGRAPHY === */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--adibois-heading);
  font-weight: 700;
}

body {
  font-family: var(--font-body);
  color: var(--adibois-text);
}

.heading-xl {
  font-size: 3.75rem;
  line-height: 1;
  letter-spacing: -0.025em;
}

.heading-lg {
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.025em;
}

.heading-md {
  font-size: 2.25rem;
  line-height: 2.5rem;
  letter-spacing: -0.025em;
}

.heading-sm {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.body-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.body-md {
  font-size: 1rem;
  line-height: 1.5rem;
}

.body-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
  .heading-xl {
    font-size: 2.5rem;
  }

  .heading-lg {
    font-size: 2rem;
  }

  .heading-md {
    font-size: 1.75rem;
  }
}

/* === WOOCOMMERCE FORM FIELDS === */

/* Labels */
.woocommerce-address-fields label,
.woocommerce form .form-row label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--adibois-heading);
  margin-bottom: 0.5rem;
}

/* Required asterisk */
.woocommerce-address-fields .required,
.woocommerce form .form-row .required {
  color: var(--adibois-error);
}

/* Text inputs */
.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields input[type="email"],
.woocommerce-address-fields input[type="tel"],
.woocommerce-address-fields input[type="number"],
.woocommerce form .form-row input.input-text {
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  background-color: #FFFFFF;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--adibois-heading);
  border: 1px solid var(--adibois-border);
}

.woocommerce-address-fields input[type="text"]:focus,
.woocommerce-address-fields input[type="email"]:focus,
.woocommerce-address-fields input[type="tel"]:focus,
.woocommerce-address-fields input[type="number"]:focus,
.woocommerce form .form-row input.input-text:focus {
  outline: none;
  border-color: var(--adibois-brand);
  box-shadow: 0 0 0 3px rgba(33, 86, 59, 0.15);
}

/* Select dropdowns */
.woocommerce-address-fields select,
.woocommerce form .form-row select {
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  background-color: #FFFFFF;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--adibois-heading);
  border: 1px solid var(--adibois-border);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2380A691' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.woocommerce-address-fields select:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--adibois-brand);
  box-shadow: 0 0 0 3px rgba(33, 86, 59, 0.15);
}

/* Form row spacing */
.woocommerce-address-fields .form-row,
.woocommerce form .form-row {
  margin-bottom: 1rem;
}

/* Optional text */
.woocommerce-address-fields .optional,
.woocommerce form .form-row .optional {
  font-size: 0.75rem;
  color: var(--adibois-text);
  font-weight: 400;
}

/* Select2 customization */
.woocommerce-address-fields .select2-container--default .select2-selection--single {
  border: 1px solid var(--adibois-border);
  border-radius: 0.375rem;
  height: auto;
  padding: 0.5rem 0.75rem;
}

.woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--adibois-heading);
  line-height: 1.5;
  padding-left: 0;
}

.woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 8px;
}

.woocommerce-address-fields .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--adibois-brand);
  box-shadow: 0 0 0 3px rgba(33, 86, 59, 0.15);
}

/* Validation errors */
.woocommerce-address-fields .woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid input {
  border-color: var(--adibois-error);
}

.woocommerce-address-fields .woocommerce-invalid input:focus,
.woocommerce form .form-row.woocommerce-invalid input:focus {
  box-shadow: 0 0 0 3px rgba(199, 58, 58, 0.15);
}

/* ===========================================
   PAGE CONFIRMATION DE COMMANDE (ORDER RECEIVED)
   Masquer le contenu WooCommerce par défaut
   =========================================== */
.woocommerce-order > p:not([class]),
.woocommerce-order > section.woocommerce-order-details,
.woocommerce-order > section.woocommerce-customer-details,
.woocommerce-order > ul.woocommerce-thankyou-order-details {
  display: none !important;
}