/* On force le comportement pour les icônes déjà chargées par le CDN */
/* 1. Pour les icônes de marques (Facebook, etc.) */
@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-display:swap;;
    src: local('Font Awesome 6 Brands'); 
    font-weight: 400 900;
}

/* 2. Pour les icônes classiques (Flèches, menu, etc.) */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-display:swap;;
    src: local('Font Awesome 6 Free');
}

/* --- CSS variables for the graphic charter --- */
:root {
   /* --- SEMANTIC VARIABLES (CORE DESIGN SYSTEM) --- */
   /* 1. Couleurs définies par la cliente (via PHP/Customizer)
      These are the minimal tokens clients set; PHP/JS derive semantic roles from them. */

   /* --- ACCENT PILLARS (defaults used when PHP/Customizer hasn't injected values) --- */
   --accent-main: #E0457B;
   --accent-text: #E0457B;
   --accent-soft: rgba(224, 69, 123, 0.15);
   --accent-contrast: #ffffff;

   /* --- ACCENT BORDER TOKENS (defaults/fallbacks) --- */
   --accent-border-subtle: rgba(224, 69, 123, 0.06);
   --accent-border-medium: rgba(224, 69, 123, 0.15);
   --accent-border-strong: rgba(224, 69, 123, 0.30);

   /* --- SECONDARY ACCENT (defaults) --- */
   --accent-secondary-main: #8986CA;
   --accent-secondary-text: #8986CA;
   --accent-secondary-soft: rgba(137, 134, 202, 0.15);
   --accent-secondary-contrast: #ffffff;

   /* Legacy client token now aliased to semantic accent token */
   --site-color-accent-primary: var(--accent-main, #E0457B); /* Primary Brand Color (fallback) */
   --site-color-accent-secondary: #8986CA; /* Secondary Brand Color (fallback) */
   --site-color-background: #ffffff; /* Main Background Color (fallback) */
   --site-color-text-dark-safe: #333333; /* For text on light backgrounds (fallback) */
   --site-color-text-light-safe: #ffffff; /* For text on dark backgrounds (fallback) */
   /* Hover variant: fallback to primary if PHP/Customizer didn't inject a computed hover */
   --site-color-accent-primary-hover: var(--accent-hover, var(--accent-main));

   /* 2. Semantic role variables (preferred names used across the theme)
      These are injected by `sandco_theme_inline_styles()` server-side and
      mirrored by `js/customizer.js` for the live preview. */

   /* PHP-computed semantic roles (fallbacks here; PHP will inject actual computed values)
      - Couleur du texte principal (résultat du contraste sur --site-color-background)
      - Couleur des titres (option cliente + contraste)
      - Couleur de fond/texte des actions (boutons)
      - Couleur de la description du site */
   --site-color-text: var(--site-color-text, var(--site-color-text-dark-safe));
   --site-color-title: var(--site-color-title, var(--site-color-text-dark-safe));
   --site-color-action-bg: var(--site-color-action-bg, var(--accent-main));
   --site-color-action-text: var(--site-color-action-text, var(--site-color-text-light-safe));
   --site-description-color: var(--site-description-color, var(--site-color-text));

   /* --- RGB fallbacks for use with rgba() when JS/PHP injects RGB variants --- */
   --site-color-accent-primary-rgb: var(--accent-main-rgb, 224, 69, 123);
   --site-color-accent-secondary-rgb: var(--site-color-accent-secondary-rgb, 137, 134, 202);
   --site-color-text-dark-safe-rgb: var(--site-color-text-dark-safe-rgb, 51, 51, 51);
   --site-color-text-light-safe-rgb: var(--site-color-text-light-safe-rgb, 255, 255, 255);


   /* New explicit semantic tokens to replace legacy aliases */
   --site-color-border-light: #eee;
   --site-color-background-dark: #191919;
   --site-color-background-light: #f5f5f5;
   --site-color-border-medium: #8a8a8a;
   --site-color-text-medium: #555555;
   --site-color-border-dark: #333333;
   --site-color-text-soft: #777777;
   --site-color-tertiary: #faf6fb;

   /* Fonts */
   --font-primary: 'Montserrat', sans-serif;
   --font-body: var(--font-primary);
   --font-site-title: 'Montserrat', monospace;
   --font-site-description: 'Montserrat', sans-serif;

   /* Button defaults using semantic variables */
   /* Secondary buttons now mapped to accent-secondary tokens */

   --button-secondary-text-color: var(--accent-secondary-text);
   --button-secondary-bg-color: var(--accent-secondary-soft);
   --button-secondary-border-color: var(--accent-secondary-main);
   --button-secondary-text-hover-color: var(--accent-secondary-contrast);
   --button-secondary-bg-hover-color: var(--accent-secondary-main);

   /* Box shadows (use semantic RGB token for primary shadow) */
   /* --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05); */
   /* --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.1); */

   /* Ensure minimal shadow fallbacks early to avoid console warnings
      in environments where later CSS may be rejected or delayed. */
   /* --card-shadow: 0 8px 25px rgba(0,0,0,0.12); */
   /* --card-shadow-hover: 0 15px 40px rgba(0,0,0,0.16); */

   /* Layout variables */
   --content-width: 1200px;

   /* Header height token: default fallback. JS (`navigation.js`) updates
      this at runtime when the header is fixed/compacted so CSS can
      compensate hero positioning. Keep a sensible default for
      environments without JS. */
   --header-height: 180px;

   /* Global image border radius (customizable via Customizer) */
   --site-image-border-radius: 5px;

   /* List / bullet variables */
   --list-bullet-char: "•"; /* default bullet character (U+2022) */
   --list-bullet-color: var(--accent-main);
   --list-bullet-size: 1em;
   --list-bullet-left-offset: -0.5em;

   /* -----------------------------------------------------------------
      Swiper / Hero carousel variables (theme-aware)
      These variables reuse semantic theme tokens so arrows/bullets
      follow the site's active/brand colors. The Customizer/PHP
      may still override specific tokens at runtime.
   ----------------------------------------------------------------- */
   --swiper-navigation-color: var(--accent-main);
   --swiper-navigation-hover-color: var(--accent-hover, var(--accent-main));
   --swiper-navigation-bg: transparent;
   --swiper-navigation-sides-offset: 16px; /* horizontal offset from edges */
   --swiper-navigation-top-offset: 50%; /* vertical alignment for nav arrows */

   --swiper-pagination-color: var(--accent-main);
   /* Inactive pagination bullets: use a very faint variant of the primary brand color
      so they remain visible on light backgrounds when the active color is customized. */
   --swiper-pagination-bullet-inactive-color: var(--accent-border-medium);
   --swiper-pagination-bottom: 16px; /* distance from bottom */
   --swiper-pagination-top: auto;
   --swiper-pagination-bullet-horizontal-gap: 6px;
   /* --- Hero specific defaults (used by hero dispositions CSS) --- */
   --hero-centered-max-width: 1500px; 
   /* --hero-centered-text-color: var(--site-color-action-text, #fff); */
   /* --hero-color-on-image: var(--site-color-action-text, #fff); */
   --hero-split-gap: 40px;
   --hero-split-padding: 40px;
   /* Zoom mode defaults */
   --hero-zoom-duration: 18s;
   --hero-zoom-scale: 1.06;

   /* -----------------------------------------------------------------
      Dynamic shadow system
      - --shadow-percent-{light,dark}: base mixes for light vs dark backgrounds
      - --card-shadow-color / --card-shadow-color-hover: color-mixed shadows
      - --card-bg: slightly lightened background when bg is pure black so shadow remains visible
      - --card-shadow and --card-shadow-hover: keep your original coordinates
   ----------------------------------------------------------------- */

   /* Tunable mix percentages */
   --shadow-percent-light: 18%; /* on light backgrounds use a subtle mix */
   --shadow-percent-dark: 25%;  /* réduit : halo gris discret sur fond sombre */
   --shadow-percent-hover-light: 25%;
   --shadow-percent-hover-dark: 35%; /* hover : halo discret */

   /* A tiny card background lift to keep shadows visible on pure black backgrounds */
   --card-bg-lift: 6%; /* mix amount of white into pure-black backgrounds */
   --card-bg: color-mix(in srgb, white var(--card-bg-lift), var(--site-color-background));

   /* Prepare two candidate shadow colors (dark and light modes) by mixing black into the background.
      The idea: shadow becomes a very darkened version of the background color, not plain black. */
   /* For dark backgrounds we create a subtle gray 'halo' by mixing a neutral gray
      into the background so the shadow remains visible even when the page background
      is very dark. For light backgrounds we keep a darker shadow. */
   --shadow-color-candidate-dark: color-mix(in srgb, #888888 var(--shadow-percent-dark, 50%), var(--site-color-background));
   --shadow-color-candidate-light: color-mix(in srgb, black var(--shadow-percent-light, 18%), var(--site-color-background));
   --shadow-color-candidate-dark-hover: color-mix(in srgb, #888888 var(--shadow-percent-hover-dark, 70%), var(--site-color-background));
   --shadow-color-candidate-light-hover: color-mix(in srgb, black var(--shadow-percent-hover-light, 25%), var(--site-color-background));
   
   /* Valeurs par défaut (Thème clair) */
   --card-shadow-color: var(--shadow-color-candidate-light);
   --card-shadow-color-hover: var(--shadow-color-candidate-light-hover);
   /* Dark mode: use darker, subtler shadows (no white halo) to separate cards
      from dark backgrounds while avoiding visible white tints. */
   --card-shadow: 0 6px 18px rgba(0,0,0,0.48), 0 10px 30px rgba(0,0,0,0.28);
   --card-shadow-hover: 0 8px 26px rgba(0,0,0,0.56), 0 14px 36px rgba(0,0,0,0.36);
   /* border kept extremely subtle */
   --card-border: none;
      
   /* Layered shadows: outer halo (tinted by --card-shadow-color) + inner darker shadow */
   --shadow-md: 0 8px 25px color-mix(in srgb, var(--card-shadow-color, rgba(136,136,136,0.16)) 20%, transparent), 0 6px 18px rgba(0,0,0,0.60);
   --shadow-lg: 0 12px 30px color-mix(in srgb, var(--card-shadow-color-hover, rgba(136,136,136,0.18)) 30%, transparent), 0 8px 22px rgba(0,0,0,0.58);

   /* Keep legacy `--card-shadow` aliases for compatibility with existing CSS */
   --card-shadow: var(--shadow-md);
   --card-shadow-hover: var(--shadow-lg);

}

/* Note: accent utility classes removed. Theme uses explicit --accent-* tokens only. */


/* Valeurs injectées par le script JS via l'attribut data-theme (appliqué sur <html>) */
:root[data-theme="dark"] {
   --card-shadow-color: var(--shadow-color-candidate-dark);
   --card-shadow-color-hover: var(--shadow-color-candidate-dark-hover);
   /* Stronger, layered fallback for dark mode: a subtle gray halo + darker inner shadow */
   --card-shadow: 0 10px 30px color-mix(in srgb, var(--card-shadow-color, rgba(136,136,136,0.16)) 25%, transparent), 0 6px 18px rgba(0,0,0,0.60);
   --card-shadow-hover: 0 14px 36px color-mix(in srgb, var(--card-shadow-color-hover, rgba(136,136,136,0.18)) 30%, transparent), 0 8px 22px rgba(0,0,0,0.68);
   /* no border in dark mode */
   --card-border: none;
}

/* Apply subtle border + ensure cards use the layered shadow in dark mode (no !important). */
:root[data-theme="dark"] .service-item {
   box-shadow: var(--card-shadow);
}
:root[data-theme="dark"] .service-item:hover {
   box-shadow: var(--card-shadow-hover);
}

/* Fallbacks for older browsers that don't support color-mix / color-contrast
   We use the RGB tokens (if available) to build rgba shadows similar to your reference. */
@supports not (color-mix(in srgb, black 50%, white)) {
  :root {
    /* If theme provides an RGB token, use it; otherwise fallback to pure black with alpha. */
    --card-shadow-color: rgba(var(--site-color-text-dark-safe-rgb, 0,0,0), 0.5);
    --card-shadow-color-hover: rgba(var(--site-color-text-dark-safe-rgb, 0,0,0), 0.5);
   /* Fallback for card background when color-mix is unsupported: use background directly. */
   --card-bg: var(--site-color-background);
   --shadow-sm: 0 4px 12px rgba(var(--site-color-text-dark-safe-rgb, 0,0,0), 0.12);
   --shadow-md: 0 8px 25px rgba(var(--site-color-text-dark-safe-rgb, 0,0,0), 0.5);
   --shadow-lg: 0 15px 40px rgba(var(--site-color-text-dark-safe-rgb, 0,0,0), 0.5);
   --card-shadow: var(--shadow-md);
   --card-shadow-hover: var(--shadow-lg);
  }
}

/* Usage examples (drop-in):
   - Use `background: var(--card-bg)` to ensure contrast on pure black backgrounds
   - Use `box-shadow: var(--card-shadow)` and `:hover { box-shadow: var(--card-shadow-hover) }`
*/
.card,
.panel,
.site-card {
   background: var(--card-bg);
   box-shadow: var(--card-shadow);
}
.card:hover,
.panel:hover,
.site-card:hover {
   box-shadow: var(--card-shadow-hover);
}

/* Optional small helper for very-dark backgrounds where the card background should be lighter
   Use class `.card--lifted` to force a slightly lighter card background. */
.card--lifted { background: color-mix(in srgb, white 6%, var(--site-color-background)); }

/* Small elevation for theme buttons */
.btn-theme {
   box-shadow: var(--shadow-sm);
   transition: box-shadow 180ms ease;
}
.btn-theme:active,
.btn-theme:focus {
   box-shadow: var(--shadow-md);
}