/* =====================================================
   TROPICAL URBAN - STYLE.CSS COMPLET OPTIMISÉ
   Mode sombre avec TOUS les fonds noirs
===================================================== */

/* [SECURITY-PREBETA-CONSOLE-PAYMENTS-CLEANUP-01 2026-05-10] Payment badges.
   Remplacement des <img src="images/payments/*.svg"> bloqués par .htaccess
   (LOT UPLOADS-HARDENING-01 — anti-XSS SVG). Badges texte CSS = aucun asset
   externe, aucune dépendance, aucun risque XSS, rendu stable toutes pages. */
.payment-icon.payment-badge, .payment-logo.payment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 6px 12px;
  margin: 2px 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  color: #1a1a1a;
  text-transform: uppercase;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  user-select: none;
  white-space: nowrap;
}
body.dark-mode .payment-icon.payment-badge, .payment-logo.payment-badge,
html.dark .payment-icon.payment-badge, .payment-logo.payment-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* [PAYMENT-BADGES-COLOR-01 2026-05-10] Couleurs de marque par badge.
   Sélecteurs sur [aria-label] déjà présents dans les 42 fichiers HTML
   → aucune modification HTML, aucune classe à ajouter, aucun SVG/PNG/CDN.
   Couleurs sobres, accessibles WCAG AA, lisibles light + dark. */
.payment-icon.payment-badge[aria-label="VISA"],
.payment-logo.payment-badge[aria-label="VISA"] {
  background: #1A1F71;
  border-color: #1A1F71;
  color: #F7B600;
}
.payment-icon.payment-badge[aria-label="Mastercard"],
.payment-logo.payment-badge[aria-label="Mastercard"] {
  background: linear-gradient(90deg, #EB001B 0%, #EB001B 50%, #F79E1B 50%, #F79E1B 100%);
  border-color: #B8001B;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.payment-icon.payment-badge[aria-label="Amex"],
.payment-logo.payment-badge[aria-label="Amex"] {
  background: #006FCF;
  border-color: #005FB3;
  color: #ffffff;
}
.payment-icon.payment-badge[aria-label="Stripe"],
.payment-logo.payment-badge[aria-label="Stripe"] {
  background: #635BFF;
  border-color: #4C44E0;
  color: #ffffff;
}
.payment-icon.payment-badge[aria-label="Apple Pay"],
.payment-logo.payment-badge[aria-label="Apple Pay"] {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}
.payment-icon.payment-badge[aria-label="Google Pay"],
.payment-logo.payment-badge[aria-label="Google Pay"] {
  background: #ffffff;
  border-color: #DADCE0;
  color: #3C4043;
  background-image: linear-gradient(90deg,
    #4285F4 0%, #4285F4 25%,
    #EA4335 25%, #EA4335 50%,
    #FBBC04 50%, #FBBC04 75%,
    #34A853 75%, #34A853 100%);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
}
/* Dark mode : on garde l'identité brand mais on assouplit la bordure
   pour qu'elle ne se confonde pas avec le fond sombre du footer. */
body.dark-mode .payment-icon.payment-badge[aria-label="VISA"],
body.dark-mode .payment-logo.payment-badge[aria-label="VISA"],
html.dark .payment-icon.payment-badge[aria-label="VISA"],
html.dark .payment-logo.payment-badge[aria-label="VISA"] {
  background: #1A1F71;
  border-color: #2D348F;
  color: #F7B600;
}
body.dark-mode .payment-icon.payment-badge[aria-label="Mastercard"],
body.dark-mode .payment-logo.payment-badge[aria-label="Mastercard"],
html.dark .payment-icon.payment-badge[aria-label="Mastercard"],
html.dark .payment-logo.payment-badge[aria-label="Mastercard"] {
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
body.dark-mode .payment-icon.payment-badge[aria-label="Amex"],
body.dark-mode .payment-logo.payment-badge[aria-label="Amex"],
html.dark .payment-icon.payment-badge[aria-label="Amex"],
html.dark .payment-logo.payment-badge[aria-label="Amex"] {
  background: #006FCF;
  border-color: #2D8AD9;
  color: #ffffff;
}
body.dark-mode .payment-icon.payment-badge[aria-label="Stripe"],
body.dark-mode .payment-logo.payment-badge[aria-label="Stripe"],
html.dark .payment-icon.payment-badge[aria-label="Stripe"],
html.dark .payment-logo.payment-badge[aria-label="Stripe"] {
  background: #635BFF;
  border-color: #7B74FF;
  color: #ffffff;
}
body.dark-mode .payment-icon.payment-badge[aria-label="Apple Pay"],
body.dark-mode .payment-logo.payment-badge[aria-label="Apple Pay"],
html.dark .payment-icon.payment-badge[aria-label="Apple Pay"],
html.dark .payment-logo.payment-badge[aria-label="Apple Pay"] {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}
body.dark-mode .payment-icon.payment-badge[aria-label="Google Pay"],
body.dark-mode .payment-logo.payment-badge[aria-label="Google Pay"],
html.dark .payment-icon.payment-badge[aria-label="Google Pay"],
html.dark .payment-logo.payment-badge[aria-label="Google Pay"] {
  background: #1F2937;
  border-color: rgba(255, 255, 255, 0.22);
  color: #E5E7EB;
}


/* [Lot PUBLIC-FREEZE-05 2026-05-09] Police Pacifico — IMPORT GOOGLE FONTS RETIRÉ.
   Cause : la CSP de cart.html (style-src 'self' 'unsafe-inline') bloquait
   le chargement de fonts.googleapis.com → erreur console + FOUT. Le fallback
   'Segoe UI'/'cursive' déjà déclaré dans tous les sélecteurs Pacifico
   (style.css:350,559 / login.css:8 / editorial.css:730 / account-bis.css:1999)
   prend le relais. Pour restaurer Pacifico sans casser la CSP : self-host
   le woff2 dans /css/fonts/Pacifico.woff2 et ajouter @font-face local. */
/* @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); */

/* === VARIABLES CSS === */
:root {
    --primary-color: #2ECC71;
    --secondary-color: #D4A82E;
    --dark-color: #2C3E50;
    --light-bg: #F8F9FA;
    --white: #FFFFFF;
    --gray: #7F8C8D;
    --gray-light: #BDC3C7;
    --error: #E74C3C;
    --success: #27AE60;
    --warning: #F39C12;
    --info: #3498DB;
    --font-main: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: 'Inter', 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-full: 50%;
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* === MODE SOMBRE - Variables ===
   Patch contraste (token-value-only, pas de nouveau sélecteur) :
   --text-muted #808080 → #A8A8A8. Sur #1E1E1E (bg-card) le ratio
   passe de 3.7:1 (échec WCAG AA pour body text) à 6.0:1 (AA ✓).
   --text-secondary #B8B8B8 reste (déjà 7.7:1 AAA sur #1E1E1E).
   Aucun changement de couleur de fond ou structure : seules les valeurs
   de tokens existants sont ajustées pour la lisibilité dark mode. */
body.dark-mode {
    --bg-primary: #0A0A0A;
    --bg-secondary: #121212;
    --bg-card: #1E1E1E;
    --bg-card-hover: #282828;
    --text-primary: #FFFFFF;
    --text-secondary: #B8B8B8;
    --text-muted: #A8A8A8;
    --border-color: #333333;
    --primary-dark: #1E8449;
    --secondary-dark: #B8912A;

    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* =====================================================================
   THEME TOKENS GLOBAUX — --tu-*
   ---------------------------------------------------------------------
   Cause racine des bugs de lisibilité récurrents sur les pages statiques
   (shipping, returns, cgv, privacy, mentions-legales) :
   chaque "premium skin" par page redéfinissait ses propres tokens dans
   son scope, puis les pages sans skin (cgv, privacy) inventaient leurs
   couleurs en inline (#f5f5f5, #2c3e50, #fff). Résultat : textes blancs
   sur fond blanc en light, textes sombres sur fond sombre en dark,
   patches successifs. Ici on pose la VRAIE source de vérité une fois
   pour toutes, dérivée de la palette style.css d'origine.
   Règle : toute page statique peut utiliser var(--tu-fg), var(--tu-bg),
   var(--tu-surface), var(--tu-line), var(--tu-muted), var(--tu-accent-text)
   SANS redéfinir le token. Les skins par page restent valides (ils
   redéfinissent localement si besoin, mais n'ont plus à le faire).
   ===================================================================== */
:root {
    /* Textes / fonds / bordures */
    --tu-bg:           #F8F9FA;          /* light-bg */
    --tu-surface:      #FFFFFF;          /* white */
    --tu-fg:           #2C3E50;          /* dark-color — texte principal */
    --tu-fg-soft:      #34495E;          /* texte secondaire encore lisible */
    --tu-muted:        #5A6C7B;          /* AA sur #F8F9FA (5.6:1) */
    --tu-line:         rgba(44, 62, 80, 0.14);
    --tu-line-strong:  rgba(44, 62, 80, 0.26);
    /* Accents texte — vert sombre en light (AA 4.72:1 sur blanc),
       vert vif en dark. Distinct de --primary-color qui reste dédié
       aux fonds, borders, gradients et icônes. */
    --tu-accent-text:       #1E8449;     /* AA sur #FFFFFF */
    --tu-accent-text-hover: #145F36;     /* AA 5.7:1 */
    /* Couleurs absolues pour texte-sur-fond-coloré (toujours blanc,
       mais via token pour rester cohérent avec les skins existants). */
    --tu-on-accent:    #FFFFFF;
    --tu-on-dark:      #FFFFFF;
    --tu-on-light:     #2C3E50;
}
body.dark-mode {
    --tu-bg:           #0A0A0A;          /* bg-primary */
    --tu-surface:      #1E1E1E;          /* bg-card */
    --tu-fg:           #FFFFFF;          /* text-primary */
    --tu-fg-soft:      #B8B8B8;          /* text-secondary — 7.7:1 AAA sur #1E1E1E */
    --tu-muted:        #A8A8A8;          /* bumped from #808080 — 6.0:1 AA sur #1E1E1E */
    --tu-line:         #333333;          /* border-color */
    --tu-line-strong:  rgba(255, 255, 255, 0.18);
    --tu-accent-text:       #4ADE80;     /* AAA sur #1E1E1E (9.57:1) */
    --tu-accent-text-hover: #86EFAC;     /* AAA lighter */
    --tu-on-light:     #FFFFFF;          /* "sur clair" devient "sur dark card" */
}

/* =====================================================================
   SAFETY-NET GLOBAL POUR PAGES STATIQUES / LÉGALES
   ---------------------------------------------------------------------
   Pour toute page qui n'a PAS son propre skin (cgv, mentions-legales,
   privacy, returns sans .returns-page sur le main, etc.), on garantit
   ici la lisibilité via les tokens. Les skins existants (shipping-
   premium, returns-premium, ...) continuent d'appliquer leurs règles
   plus spécifiques sans conflit.
   On cible uniquement les conteneurs-racines connus. Spécificité faible
   (pas de !important) pour ne pas écraser les skins intentionnels.
   ===================================================================== */
.legal-page,
.legal-container,
.cgv-page,
.cgv-container,
.privacy-page,
.privacy-container,
.mentions-page,
.mentions-container,
.returns-page {
    background: var(--tu-bg);
    color: var(--tu-fg);
    transition: background-color 0.3s, color 0.3s;
}
.legal-page .legal-section,
.cgv-container,
.privacy-container,
.mentions-container,
.legal-container {
    background: var(--tu-surface);
    color: var(--tu-fg);
    border-color: var(--tu-line);
}
/* Hiérarchie de titres — les skins peuvent l'overrider, mais on garantit
   une valeur par défaut correcte dans les deux thèmes. */
.legal-page h1, .legal-page h2, .legal-page h3, .legal-page h4,
.cgv-page h1,  .cgv-page h2,  .cgv-page h3,  .cgv-page h4,
.cgv-container h1,  .cgv-container h2,  .cgv-container h3,  .cgv-container h4,
.privacy-page h1, .privacy-page h2, .privacy-page h3, .privacy-page h4,
.privacy-container h1, .privacy-container h2, .privacy-container h3, .privacy-container h4,
.mentions-page h1, .mentions-page h2, .mentions-page h3, .mentions-page h4,
.mentions-container h1, .mentions-container h2, .mentions-container h3, .mentions-container h4,
.returns-page h1, .returns-page h2, .returns-page h3, .returns-page h4 {
    color: var(--tu-fg);
}
.legal-page p, .legal-page li,
.cgv-page p, .cgv-page li,
.cgv-container p, .cgv-container li,
.privacy-page p, .privacy-page li,
.privacy-container p, .privacy-container li,
.mentions-page p, .mentions-page li,
.mentions-container p, .mentions-container li,
.returns-page p, .returns-page li {
    color: var(--tu-fg-soft);
}
.legal-page a,
.cgv-page a,
.cgv-container a,
.privacy-page a,
.privacy-container a,
.mentions-page a,
.mentions-container a,
.returns-page a {
    color: var(--tu-accent-text);
}
.legal-page a:hover,
.cgv-page a:hover,
.cgv-container a:hover,
.privacy-page a:hover,
.privacy-container a:hover,
.mentions-page a:hover,
.mentions-container a:hover,
.returns-page a:hover {
    color: var(--tu-accent-text-hover);
}
/* Tableaux : même logique */
.legal-page table, .cgv-container table, .privacy-container table, .mentions-container table {
    background: var(--tu-surface);
    color: var(--tu-fg);
    border-color: var(--tu-line);
}
.legal-page table th, .cgv-container table th, .privacy-container table th, .mentions-container table th {
    background: var(--primary-color);
    color: var(--tu-on-accent);
}
.legal-page table td, .cgv-container table td, .privacy-container table td, .mentions-container table td {
    border-color: var(--tu-line);
    color: var(--tu-fg-soft);
}

/* === RESET === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* FIX FLASH BLANC entre pages (Phase 6.1)
       -------------------------------------------------------------------
       Cause racine : html n'avait AUCUN background-color → pendant la nav
       A→B, le navigateur peint son canvas blanc par défaut tant que le
       body de B n'est pas encore peint avec son propre fond.
       Peindre html avec la couleur brand élimine ce flash. */
    background-color: var(--light-bg);
    color-scheme: light;
}

/* FIX FLASH BLANC entre pages (Phase 6.2 — Cross-Document View Transitions)
   -------------------------------------------------------------------
   Active le crossfade natif inter-pages sur Chrome 126+ / Edge 126+ /
   Safari 18+ / Android Chrome 126+. Quand l'utilisateur clique un lien
   interne, le navigateur capture l'état visuel de la page A, charge
   la page B, et anime la transition (~150ms par défaut). Pendant cette
   transition, AUCUN canvas blanc n'est jamais affiché.
   Navigateurs sans support : ignorent silencieusement la règle, fallback
   sur la nav classique (déjà protégée par tu-canvas-boot). */
/* [PUBLIC-FREEZE-07] Désactivé avant pré-bêta.
   Cause : Chrome/Edge génère parfois "AbortError: Transition was skipped"
   avant que global.js puisse installer son filtre unhandledrejection.
   Le gain visuel est mineur, la console clean est prioritaire pré-bêta.
@view-transition {
  navigation: auto;
}
*/
/* Tuning : transition légèrement plus rapide et fade pur (sans slide) */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Reduced motion : pas d'animation, mais le crossfade reste actif
   (instantané = pas de flash blanc visible) */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 1ms;
    }
}
/* Dark-mode auto selon préférence OS (sans attendre body.dark-mode) */
@media (prefers-color-scheme: dark) {
    html {
        background-color: #0A0A0A;
        color-scheme: dark;
    }
}
/* Dark-mode explicite : html.dark (posé par global.js tôt depuis localStorage)
   ET html[data-tu-theme="dark"] (attribut alias). Synchrone avec body.dark-mode
   via MutationObserver dans global.js. Bridge body → couvre le micro-gap entre
   <head> parsé et body.dark-mode posé par DOMContentLoaded. */
html.dark,
html[data-tu-theme="dark"] {
    background-color: #0A0A0A !important;
    color-scheme: dark;
}
html.dark body,
html[data-tu-theme="dark"] body {
    background-color: #0A0A0A;
}

body {
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--dark-color);
    /* [GLOBAL-NATURAL-TRANSITION-FIX-04 2026-05-15] background-color passé de
       var(--white) (#FFFFFF) à #F3EFE7 (beige tropical doux) pour cohérence
       avec le <style data-tu-canvas-boot> early. Évite le flash blanc inter-pages :
       body était blanc en light mode → flash blanc visible pendant la navigation.
       Maintenant body est uniforme #F3EFE7 = aucun changement de couleur perçu. */
    background-color: #F3EFE7;
    transition: background-color 0.3s, color 0.3s;
    /* Crée un stacking context dédié au body. CRITIQUE pour que les
       couches d'ambiance (.tu-bg-layer avec z-index:-1 + pseudos
       html[data-tu-bg] body::before avec z-index:-2) soient peintes
       AU-DESSUS du background-color opaque du body et EN-DESSOUS du
       contenu. Sans cela, z-index:-1 bubble au contexte racine et
       les animations sont masquées par le fond du site. */
    isolation: isolate;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

button {
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
}

ul {
    list-style: none;
}

/* === CONTENEUR === */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ===================================
   HEADER & NAVIGATION
=================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

body.dark-mode header {
    background: var(--bg-card) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.navbar {
    padding: 1rem 0;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Nom de marque — Pacifico + gradient charté Tropical Urban.
       L'image interne n'est PAS affectée par background-clip:text :
       seul le texte rendu au sein de .logo passe en transparent masqué
       par le gradient. Aucune modification HTML requise. */
    font-family: 'Pacifico', 'Segoe UI', cursive;
    font-size: 1.7rem;
    font-weight: 400;           /* Pacifico = cursive, poids natif suffit */
    line-height: 1;
    letter-spacing: .3px;
    text-decoration: none;
    transition: transform 0.3s ease, filter 0.3s ease;

    /* Gradient MODE CLAIR — primary (vert tropical) → secondary (orange)
       Même grammaire que le hero (ligne 285) → cohérence DA totale. */
    background: linear-gradient(135deg, var(--primary-color) 0%, #27AE60 45%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    /* Fallback pour clients qui ignorent background-clip:text (IE, vieux Outlook) */
    -webkit-text-stroke: 0;
}

.logo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    /* Anti-inversion : l'img conserve ses couleurs natives quoi qu'il arrive */
    -webkit-text-fill-color: initial;
            color: initial;
}

.logo:hover {
    transform: scale(1.05);
    filter: brightness(1.08) saturate(1.05);
}

/* Gradient MODE SOMBRE — primary vert tropical → doré TU signature
   Le doré #D4A82E est déjà utilisé comme accent TU en dark mode
   (étoiles reviews, admin reply mark, cluster badges). */
body.dark-mode .logo {
    background: linear-gradient(135deg, #2ECC71 0%, #50E3A4 40%, #D4A82E 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    /* Léger glow subtil pour la lisibilité sur fond très sombre — pas kitsch */
    filter: drop-shadow(0 0 14px rgba(212, 168, 46, .14));
}

body.dark-mode .logo:hover {
    filter: drop-shadow(0 0 18px rgba(212, 168, 46, .28)) brightness(1.08);
}

/* Responsive mobile — garder la lisibilité sur petits écrans */
@media (max-width: 480px) {
    .logo { font-size: 1.4rem; gap: 0.55rem; }
    .logo img { width: 36px; height: 36px; }
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: var(--dark-color);
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    transition: all 0.3s;
    position: relative;
}

body.dark-mode .nav-links a {
    color: var(--text-primary);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-color);
    background: rgba(46, 204, 113, 0.1);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-icon {
    position: relative;
    color: var(--dark-color);
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

body.dark-mode .nav-icon {
    color: var(--text-primary);
}

.nav-icon:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--error);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 50px;
    min-width: 18px;
    text-align: center;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.dark-mode-btn {
    background: var(--light-bg);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--dark-color);
}

body.dark-mode .dark-mode-btn {
    background: var(--secondary-dark);
    color: white;
}

.dark-mode-btn:hover {
    transform: rotate(180deg) scale(1.1);
}

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
}

.burger div {
    width: 25px;
    height: 3px;
    background: var(--dark-color);
    transition: all 0.3s;
    border-radius: 5px;
}

body.dark-mode .burger div {
    background: var(--text-primary);
}

.burger.active div:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.burger.active div:nth-child(2) {
    opacity: 0;
}

.burger.active div:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* ===================================
   HERO SECTION
=================================== */
.hero {
    min-height: 600px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #27AE60 50%, var(--secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 4rem 2rem;
    margin-top: 70px;
}

body.dark-mode .hero {
    background: linear-gradient(135deg, #1E8449 0%, #B8912A 100%);
}

.hero-content {
    max-width: 800px;
}

.hero-title {
    font-family: 'Pacifico', 'Segoe UI', cursive;
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    color: #FFFFFF !important;
}

.hero-subtitle,
.hero-description {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    color: #696666 !important;
}

.btn-hero {
    display: inline-block;
    padding: 1.2rem 3rem;
    background: white;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}

.btn-hero:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* ===================================
   SECTIONS (Features, Collections, etc.)
=================================== */
.features,
.collections,
.products-section,
.featured-products,
.trust-badges {
    padding: 4rem 0;
    background: var(--light-bg);
}

body.dark-mode .features,
body.dark-mode .collections,
body.dark-mode .products-section,
body.dark-mode .featured-products,
body.dark-mode .trust-badges {
    background: var(--bg-secondary) !important;
}

.section-title {
    font-family: var(--font-heading);
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: var(--dark-color);
}

body.dark-mode .section-title {
    color: var(--text-primary) !important;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--primary-color);
    margin: 1rem auto 0;
    border-radius: 2px;
}

/* ===================================
   FEATURE CARDS
=================================== */
.features-grid,
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-card,
.badge {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s;
}

body.dark-mode .feature-card,
body.dark-mode .badge {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color);
}

.feature-card:hover,
.badge:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

body.dark-mode .feature-card:hover,
body.dark-mode .badge:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--primary-dark);
}

.feature-icon,
.badge-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

body.dark-mode .feature-icon,
body.dark-mode .badge-icon {
    color: var(--primary-dark);
}

.feature-card h3,
.badge h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--dark-color);
}

body.dark-mode .feature-card h3,
body.dark-mode .badge h3 {
    color: var(--text-primary) !important;
}

.feature-card p,
.badge p {
    color: var(--gray);
    font-size: 0.95rem;
}

body.dark-mode .feature-card p,
body.dark-mode .badge p {
    color: var(--text-secondary) !important;
}

/* ===================================
   COLLECTIONS
=================================== */
.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 2rem;
}

.collection-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s;
}

body.dark-mode .collection-card {
    border: 1px solid var(--border-color);
}

.collection-card:hover {
    transform: scale(1.03);
}

body.dark-mode .collection-card:hover {
    border-color: var(--primary-dark);
}

.collection-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

.collection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.85) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.5rem;
    color: white;
}

body.dark-mode .collection-overlay {
    background: linear-gradient(to top, rgba(10, 10, 10, 0.95) 0%, transparent 100%);
}

.collection-overlay h3 {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    color: #FFFFFF !important;
}

.collection-overlay p {
    margin-bottom: 1.5rem;
    opacity: 0.95;
    font-size: 1.1rem;
    color: #FFFFFF !important;
}

/* ===================================
   PRODUITS
=================================== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.product-card {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s;
    position: relative;
}

body.dark-mode .product-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

body.dark-mode .product-card:hover {
    background: var(--bg-card-hover) !important;
    box-shadow: 0 8px 25px rgba(30, 132, 73, 0.2);
}

.product-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: transform 0.5s;
}

.product-card:hover .product-image {
    transform: scale(1.1);
}

.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0.4rem 0.8rem;
    background: var(--error);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

body.dark-mode .product-badge {
    background: var(--primary-dark);
    color: #FFFFFF !important;
}

.product-info {
    padding: 1.5rem;
}

.product-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--dark-color);
}

body.dark-mode .product-name {
    color: var(--text-primary) !important;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.current-price {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.4rem;
}

body.dark-mode .current-price {
    color: var(--primary-dark) !important;
}

.original-price {
    color: var(--gray);
    text-decoration: line-through;
    font-size: 1rem;
}

body.dark-mode .original-price {
    color: var(--text-muted) !important;
}

.btn-add-to-cart {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary-color);
    color: white;
    font-weight: 700;
    border-radius: var(--radius-sm);
    transition: all 0.3s;
}

body.dark-mode .btn-add-to-cart {
    background: var(--primary-dark);
}

.btn-add-to-cart:hover {
    background: var(--success);
    transform: translateY(-2px);
}

/* ===================================
   TESTIMONIALS
=================================== */
.testimonials {
    padding: 4rem 0;
    background: var(--white);
}

body.dark-mode .testimonials {
    background: var(--bg-primary) !important;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: var(--light-bg);
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .testimonial-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color);
}

.stars {
    color: var(--warning);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.testimonial-text {
    color: var(--dark-color);
    margin-bottom: 1rem;
    font-style: italic;
}

body.dark-mode .testimonial-text {
    color: var(--text-secondary) !important;
}

.testimonial-author {
    font-weight: 600;
    color: var(--gray);
}

body.dark-mode .testimonial-author {
    color: var(--text-muted) !important;
}

/* ===================================
   NEWSLETTER
=================================== */
.newsletter {
    padding: 4rem 2rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    text-align: center;
}

body.dark-mode .newsletter {
    background: linear-gradient(135deg, #1E8449 0%, #B8912A 100%);
}

.newsletter h2,
.newsletter p {
    color: #FFFFFF !important;
}

.newsletter-form {
    display: flex;
    max-width: 600px;
    margin: 2rem auto 0;
    gap: 1rem;
}

.newsletter-form input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
}

body.dark-mode .newsletter-form input {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
}

body.dark-mode .newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-form button {
    padding: 1rem 2.5rem;
    background: white;
    color: var(--primary-color);
    font-weight: 700;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s;
}

body.dark-mode .newsletter-form button {
    background: #FFFFFF;
    color: var(--primary-dark);
}

.newsletter-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* ===================================
   FOOTER
=================================== */
.footer {
    background: var(--dark-color);
    color: white;
    padding: 3rem 0 1rem;
}

body.dark-mode .footer {
    background: var(--bg-primary) !important;
    border-top: 1px solid var(--border-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.footer-column h3,
.footer-column h4 {
    margin-bottom: 1.25rem;
    font-size: 1.2rem;
    color: white;
}

body.dark-mode .footer-column h3,
body.dark-mode .footer-column h4 {
    color: var(--text-primary) !important;
}

.footer-column p,
.footer-column li {
    color: var(--gray-light);
    margin-bottom: 0.75rem;
}

body.dark-mode .footer-column p,
body.dark-mode .footer-column li {
    color: var(--text-secondary) !important;
}

.footer-column a {
    color: var(--gray-light);
    transition: color 0.3s;
}

body.dark-mode .footer-column a {
    color: var(--text-secondary) !important;
}

.footer-column a:hover {
    color: white;
}

body.dark-mode .footer-column a:hover {
    color: var(--primary-dark) !important;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

body.dark-mode .social-links a {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.social-links a:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
}

body.dark-mode .social-links a:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gray-light);
}

body.dark-mode .footer-bottom {
    border-top: 1px solid var(--border-color);
    color: var(--text-muted) !important;
}

/* ===================================
   FILTRES
=================================== */
.filter-btn {
    padding: 0.8rem 1.5rem;
    background: var(--white);
    color: var(--dark-color);
    border: 2px solid var(--light-bg);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
}

body.dark-mode .filter-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.filter-btn.active {
    background: var(--primary-color);
    color: black;
    border-color: var(--primary-color);
}


body.dark-mode .filter-btn.active {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.filter-btn:hover {
    background: var(--light-bg);
}

body.dark-mode .filter-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary-dark);
}

/* ===================================
   INPUTS & FORMS
=================================== */
input,
textarea,
select {
    background: var(--white);
    color: var(--dark-color);
    border: 1px solid var(--light-bg);
    padding: 1rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all 0.3s;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--bg-card) !important;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(30, 132, 73, 0.1);
}

input::placeholder,
textarea::placeholder {
    color: var(--gray);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-muted);
}

/* ===================================
   BOUTONS
=================================== */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    transition: all 0.3s;
    cursor: pointer;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
}

body.dark-mode .btn-primary {
    background: var(--primary-dark);
    color: var(--white); /* <-- Ajoutez cette ligne */
}

.btn-primary:hover {
    background: var(--success);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: transparent;
    color: var(--dark-color);
    border: 2px solid var(--dark-color);
}

body.dark-mode .btn-secondary {
    color: var(--text-primary);
    border-color: var(--border-color);
}

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

body.dark-mode .btn-secondary:hover {
    border-color: var(--primary-dark);
    color: var(--primary-dark);
}

/* ===================================
   BREADCRUMB
   [BREADCRUMB-GLOBAL-INTEGRATION-01 2026-05-22] killed opaque "bar"
   feel: transparent background + reduced padding + hairline separator
   so the breadcrumb integrates with the page hero / surface instead of
   sitting on a dedicated horizontal band under the header.
=================================== */
.breadcrumb {
    background: transparent !important;
    padding: clamp(0.5rem, 1.2vw, 0.85rem) 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(127, 140, 141, 0.10) !important;
    font-size: 0.85rem;
}

body.dark-mode .breadcrumb {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--primary-dark, #27AE60);
    text-decoration: underline;
}

body.dark-mode .breadcrumb a {
    color: var(--primary-dark);
}

.breadcrumb span {
    color: var(--gray);
    font-weight: 400;
}

.breadcrumb span[aria-current="page"] {
    color: var(--dark-color, #2C3E50);
    font-weight: 600;
}

body.dark-mode .breadcrumb span {
    color: var(--text-muted);
}

body.dark-mode .breadcrumb span[aria-current="page"] {
    color: var(--text-primary, #FFFFFF);
}

/* ===================================
   RESPONSIVE
=================================== */
@media (max-width: 1024px) {
    .nav-links {
        position: fixed;
        top: 70px;
        right: -100%;
        flex-direction: column;
        background: var(--white);
        width: 250px;
        height: calc(100vh - 70px);
        padding: 2rem;
        box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.3s;
    }
    
    body.dark-mode .nav-links {
        background: var(--bg-card) !important;
    }
    
    .nav-links.active {
        right: 0;
    }
    
    .burger {
        display: flex;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .collections-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle,
    .hero-description {
        font-size: 1.2rem;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    
    .newsletter-form {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   SCROLLBAR PERSONNALISÉE
=================================== */
body.dark-mode ::-webkit-scrollbar {
    width: 12px;
    background: var(--bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--bg-card);
    border-radius: 6px;
    border: 2px solid var(--bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* ===================================
   ASSURER QUE TOUT EST NOIR EN MODE SOMBRE
=================================== */
body.dark-mode * {
    border-color: var(--border-color);
}

body.dark-mode hr {
    border-color: var(--border-color);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-primary) !important;
}

body.dark-mode p,
body.dark-mode span:not(.cart-badge):not(.product-badge) {
    color: var(--text-secondary);
}

body.dark-mode a {
   color: #ffffff;
}

body.dark-mode a:hover {
    color: #ffffff;
}
/* ===================================
   NEWSLETTER SECTION MODERNE
=================================== */
.newsletter-section {
    padding: 5rem 2rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, #27AE60 50%, var(--secondary-color) 100%);
    position: relative;
    overflow: hidden;
}

body.dark-mode .newsletter-section {
    background: linear-gradient(135deg, #1E8449 0%, #B8912A 100%);
}

.newsletter-section::before {
    content: '🌴';
    position: absolute;
    font-size: 20rem;
    opacity: 0.05;
    right: -5rem;
    top: -5rem;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.newsletter-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-text h2 {
    font-size: 2.5rem;
    color: #FFFFFF;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.newsletter-text p {
    font-size: 1.2rem;
    color: #FFFFFF;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.newsletter-text strong {
    font-weight: 900;
    text-decoration: underline;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.newsletter-form input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    font-size: 1rem;
    color: var(--dark-color);
    outline: none;
}

body.dark-mode .newsletter-form input {
    background: rgba(255, 255, 255, 0.95);
    color: #000000;
}

.newsletter-form input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.newsletter-form input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.btn-newsletter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    background: white;
    color: var(--primary-color);
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

body.dark-mode .btn-newsletter {
    background: #FFFFFF;
    color: var(--primary-dark);
}

.btn-newsletter:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.newsletter-privacy {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.newsletter-privacy a {
    color: white;
    text-decoration: underline;
    font-weight: 600;
}

.newsletter-privacy a:hover {
    opacity: 0.8;
}

/* ===================================
   FOOTER MODERNE
=================================== */
.footer {
    background: #2C3E50;
    color: white;
    padding: 4rem 0 1.5rem;
}

body.dark-mode .footer {
    background: var(--bg-primary);
    border-top: 2px solid var(--border-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-column h3,
.footer-column h4 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: white;
    font-weight: 700;
    position: relative;
    padding-bottom: 0.5rem;
}

body.dark-mode .footer-column h3,
body.dark-mode .footer-column h4 {
    color: var(--text-primary);
}

.footer-column h3::after,
.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

body.dark-mode .footer-column h3::after,
body.dark-mode .footer-column h4::after {
    background: var(--primary-dark);
}

.footer-column p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

body.dark-mode .footer-column p {
    color: var(--text-secondary);
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 0.75rem;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s;
    display: inline-block;
}

body.dark-mode .footer-column a {
    color: var(--text-secondary);
}

.footer-column a:hover {
    color: var(--primary-color);
    transform: translateX(5px);
}

body.dark-mode .footer-column a:hover {
    color: var(--primary-dark);
}

/* Social Links */
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-links a {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    transition: all 0.3s;
}

body.dark-mode .social-links a {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.social-links a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-5px) rotate(5deg);
    box-shadow: 0 5px 20px rgba(46, 204, 113, 0.4);
}

body.dark-mode .social-links a:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .footer-bottom {
    border-top-color: var(--border-color);
    color: var(--text-muted);
}

.payment-methods {
    display: flex;
    gap: 1rem;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .payment-methods {
    color: var(--text-muted);
}

.payment-methods i:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

body.dark-mode .payment-methods i:hover {
    color: var(--primary-dark);
}

/* ===================================
   RESPONSIVE
=================================== */
@media (max-width: 768px) {
    .newsletter-text h2 {
        font-size: 2rem;
    }
    
    .newsletter-form {
        flex-direction: column;
        border-radius: 15px;
    }
    
    .newsletter-form input,
    .btn-newsletter {
        border-radius: 10px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}
/* ===================================
   SECTION INSTAGRAM
=================================== */
.instagram-section {
    padding: 4rem 0;
    background: var(--light-bg);
}

body.dark-mode .instagram-section {
    background: var(--bg-secondary) !important;
}

.instagram-header {
    text-align: center;
    margin-bottom: 3rem;
}

.instagram-header h2 {
    font-size: 2.5rem;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

body.dark-mode .instagram-header h2 {
    color: var(--text-primary) !important;
}

.instagram-header p {
    font-size: 1.2rem;
    color: var(--gray);
    margin-bottom: 1.5rem;
}

body.dark-mode .instagram-header p {
    color: var(--text-secondary) !important;
}

.btn-instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045);
    color: white;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(131, 58, 180, 0.3);
    transition: all 0.3s;
}

.btn-instagram:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(131, 58, 180, 0.5);
}

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.instagram-post {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s;
}

body.dark-mode .instagram-post {
    border: 1px solid var(--border-color);
}

.instagram-post:hover {
    transform: scale(1.05);
}

.instagram-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.instagram-post:hover img {
    transform: scale(1.1);
}

.instagram-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(131, 58, 180, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.instagram-post:hover .instagram-overlay {
    opacity: 1;
}

.instagram-overlay i {
    font-size: 3rem;
    color: white;
}

/* ===================================
   COOKIE BANNER MODERNE
=================================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: white;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    padding: 1.5rem 2rem;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.cookie-banner.show {
    transform: translateY(0);
}

body.dark-mode .cookie-banner {
    background: var(--bg-card) !important;
    border-top: 2px solid var(--border-color);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.cookie-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.cookie-text i {
    font-size: 2rem;
    color: var(--secondary-color);
}

body.dark-mode .cookie-text i {
    color: var(--secondary-dark);
}

.cookie-text p {
    color: var(--dark-color);
    margin: 0;
}

body.dark-mode .cookie-text p {
    color: var(--text-primary) !important;
}

.cookie-text a {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 600;
}

body.dark-mode .cookie-text a {
    color: var(--primary-dark);
}

.cookie-actions {
    display: flex;
    gap: 1rem;
}

.btn-cookie {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cookie.accept {
    background: var(--primary-color);
    color: white;
}

body.dark-mode .btn-cookie.accept {
    background: var(--primary-dark);
}

.btn-cookie.accept:hover {
    background: var(--success);
    transform: translateY(-2px);
}

.btn-cookie.refuse {
    background: transparent;
    color: var(--dark-color);
    border: 2px solid var(--gray);
}

body.dark-mode .btn-cookie.refuse {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-cookie.refuse:hover {
    background: var(--light-bg);
}

body.dark-mode .btn-cookie.refuse:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary-dark);
}

/* ===================================
   NEWSLETTER POPUP
=================================== */
.newsletter-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.newsletter-popup.show {
    display: flex;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

.popup-content {
    position: relative;
    z-index: 10001;
    background: white;
    border-radius: var(--radius-lg);
    padding: 3rem;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn 0.4s ease;
}

body.dark-mode .popup-content {
    background: var(--bg-card) !important;
    border: 2px solid var(--border-color);
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: var(--light-bg);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--dark-color);
    transition: all 0.3s;
}

body.dark-mode .popup-close {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.popup-close:hover {
    background: var(--error);
    color: white;
    transform: rotate(90deg);
}

.popup-header {
    text-align: center;
    margin-bottom: 2rem;
}

.popup-header h3 {
    font-size: 2rem;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

body.dark-mode .popup-header h3 {
    color: var(--text-primary) !important;
}

.popup-header p {
    color: var(--gray);
    font-size: 1rem;
}

body.dark-mode .popup-header p {
    color: var(--text-secondary) !important;
}

.popup-header strong {
    color: var(--primary-color);
    font-weight: 900;
}

body.dark-mode .popup-header strong {
    color: var(--primary-dark);
}

.popup-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.popup-form input {
    padding: 1rem 1.5rem;
    border: 2px solid var(--light-bg);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all 0.3s;
}

body.dark-mode .popup-form input {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-color);
    color: var(--text-primary);
}

.popup-form input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
}

body.dark-mode .popup-form input:focus {
    border-color: var(--primary-dark);
}

.btn-popup {
    padding: 1rem 2rem;
    background: var(--primary-color);
    color: white;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s;
}

body.dark-mode .btn-popup {
    background: var(--primary-dark);
}

.btn-popup:hover {
    background: var(--success);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(46, 204, 113, 0.3);
}

.popup-disclaimer {
    font-size: 0.85rem;
    color: var(--gray);
    text-align: center;
    line-height: 1.6;
}

body.dark-mode .popup-disclaimer {
    color: var(--text-muted) !important;
}

.popup-disclaimer a {
    color: var(--primary-color);
    text-decoration: underline;
}

body.dark-mode .popup-disclaimer a {
    color: var(--primary-dark);
}

/* ===================================
   RESPONSIVE
=================================== */
@media (max-width: 768px) {
    .instagram-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-text {
        flex-direction: column;
    }
    
    .popup-content {
        padding: 2rem 1.5rem;
    }
    
    .popup-header h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .instagram-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ===================================
   BOUTON RETOUR EN HAUT - PREMIUM
=================================== */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9998;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--success));
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    box-shadow: 0 8px 25px rgba(46, 204, 113, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px) scale(0.5);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
}

body.dark-mode .scroll-to-top {
    background: linear-gradient(135deg, var(--primary-dark), #27AE60);
    box-shadow: 0 8px 25px rgba(30, 132, 73, 0.4);
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-to-top:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 12px 35px rgba(46, 204, 113, 0.5);
}

body.dark-mode .scroll-to-top:hover {
    box-shadow: 0 12px 35px rgba(30, 132, 73, 0.6);
}

.scroll-to-top:active {
    transform: translateY(-2px) scale(1.05);
}

/* Icône avec animation */
.scroll-icon {
    font-size: 1.3rem;
    color: white;
    animation: bounceUp 2s ease-in-out infinite;
}

@keyframes bounceUp {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.scroll-to-top:hover .scroll-icon {
    animation: none;
    transform: translateY(-3px);
}

/* Texte */
.scroll-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Barre de progression circulaire */
.scroll-progress {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: white;
    border-right-color: white;
    transform: rotate(-90deg);
    transition: all 0.3s ease;
    opacity: 0;
}

.scroll-to-top:hover .scroll-progress {
    opacity: 1;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(270deg);
    }
}

/* Animation de pulse au survol */
.scroll-to-top::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease;
}

.scroll-to-top:hover::before {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
}

/* Version alternative : effet ripple */
.scroll-to-top::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.scroll-to-top:active::after {
    width: 200%;
    height: 200%;
    opacity: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-to-top {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    
    .scroll-icon {
        font-size: 1.1rem;
    }
    
    .scroll-text {
        font-size: 0.6rem;
    }
}

/* ===================================
   VARIANTE 2 : BOUTON CARRÉ ARRONDI
=================================== */
.scroll-to-top.square {
    border-radius: 15px;
    width: 55px;
    height: 55px;
}

/* ===================================
   VARIANTE 3 : AVEC EMOJI 🌴
=================================== */
.scroll-to-top.tropical .scroll-icon::before {
    content: '🌴';
    font-size: 1.8rem;
}

.scroll-to-top.tropical .scroll-icon i {
    display: none;
}

/* ===================================
   VARIANTE 4 : AVEC PROGRESSION
=================================== */
.scroll-to-top.with-progress {
    background: conic-gradient(
        var(--primary-color) 0deg,
        var(--primary-color) var(--scroll-progress, 0deg),
        rgba(255, 255, 255, 0.2) var(--scroll-progress, 0deg)
    );
}

body.dark-mode .scroll-to-top.with-progress {
    background: conic-gradient(
        var(--primary-dark) 0deg,
        var(--primary-dark) var(--scroll-progress, 0deg),
        rgba(255, 255, 255, 0.1) var(--scroll-progress, 0deg)
    );
}
/* ===================================
   ANIMATION RÉSEAU - GLOBAL
=================================== */

#networkCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: transparent;
}

/* Opacité selon le mode */
body:not(.dark-mode) #networkCanvas {
    opacity: 0.3;
}

body.dark-mode #networkCanvas {
    opacity: 0.5;
}

/* Assurer que le contenu reste au-dessus */
header,
main,
section,
footer,
.container {
    position: relative;
    z-index: 1;
}
/* ===================================
   CORRECTIONS GLOBALES FINALE
=================================== */

/* === Canvas Réseau === */
#networkCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s;
}

body:not(.dark-mode) #networkCanvas {
    opacity: 0.3 !important;
}

body.dark-mode #networkCanvas {
    opacity: 0.5 !important;
}

/* === Bouton retour en haut === */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9998;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    box-shadow: 0 8px 25px rgba(46, 204, 113, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px) scale(0.5);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

body.dark-mode .scroll-to-top {
    background: linear-gradient(135deg, #1E8449, #27AE60);
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-to-top:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 12px 35px rgba(46, 204, 113, 0.5);
}

.scroll-icon {
    font-size: 1.3rem;
    color: white;
    animation: bounceUp 2s ease-in-out infinite;
}

@keyframes bounceUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.scroll-to-top:hover .scroll-icon {
    animation: none;
}

.scroll-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

/* === Bouton "Voir tous les produits" === */
.btn-view-all,
.btn-voir-tous {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    background: #2ECC71;
    color: white !important;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

body.dark-mode .btn-view-all,
body.dark-mode .btn-voir-tous {
    background: #1E8449;
    color: #FFFFFF !important;
}

.btn-view-all:hover,
.btn-voir-tous:hover {
    background: #27AE60;
    transform: translateY(-3px);
}

.btn-view-all span,
.btn-voir-tous span,
.btn-view-all *,
.btn-voir-tous * {
    color: white !important;
}

/* === Responsive === */
@media (max-width: 768px) {
    .scroll-to-top {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    
    .scroll-icon {
        font-size: 1.1rem;
    }
    
    .scroll-text {
        font-size: 0.6rem;
    }
}
/* ===================================
BURGER DROPDOWN MENU
=================================== */

.burger-dropdown {
    position: fixed;
    top: 70px;
    right: 0;
    width: 300px;
    max-height: calc(100vh - 70px);
    background: var(--white);
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 999;
}

body.dark-mode .burger-dropdown {
    background: var(--bg-card) !important;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
}

.burger-dropdown.active {
    transform: translateX(0);
}

.dropdown-content {
    padding: 2rem 0;
}

.dropdown-section {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #EEE;
}

body.dark-mode .dropdown-section {
    border-bottom-color: var(--border-color);
}

.dropdown-section:last-child {
    border-bottom: none;
}

.section-header {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0.9rem;
    display: block;
}

body.dark-mode .section-header {
    color: var(--primary-dark);
}

.dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dropdown-menu li a {
    display: block;
    padding: 0.65rem 0;
    color: var(--dark-color);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s;
    position: relative;
    padding-left: 1.2rem;
}

body.dark-mode .dropdown-menu li a {
    color: var(--text-secondary);
}

.dropdown-menu li a::before {
    content: '→';
    position: absolute;
    left: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.dropdown-menu li a:hover {
    color: var(--primary-color);
    padding-left: 1.8rem;
}

body.dark-mode .dropdown-menu li a:hover {
    color: var(--primary-dark);
}

.dropdown-menu li a:hover::before {
    opacity: 1;
}

.burger-dropdown::-webkit-scrollbar {
    width: 8px;
}

.burger-dropdown::-webkit-scrollbar-track {
    background: #F0F0F0;
}

body.dark-mode .burger-dropdown::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.burger-dropdown::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 4px;
}

.burger-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

body.dark-mode .burger-dropdown::-webkit-scrollbar-thumb {
    background: var(--primary-dark);
}

@media (max-width: 1024px) {
    .burger-dropdown {
        width: 280px;
    }
}

@media (max-width: 480px) {
    .burger-dropdown {
        width: 100%;
    }
    
    .dropdown-section {
        padding: 1rem 1.5rem;
    }
}
/* ===== Menu burger déroulant à côté du mode sombre ===== */
.dropdown-burger {
    position: relative;
}

.burger-menu-btn {
    background: var(--light-bg);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 1.3rem;
    color: var(--dark-color);
    transition: all 0.3s;
}

body.dark-mode .burger-menu-btn {
    background: var(--secondary-dark); 
    color: var(--text-primary);
}

.burger-menu-btn:hover {
    transform: rotate(90deg);
    color: var(--primary-color);
}

.dropdown-content {
    position: absolute;
    top: 55px;
    right: 0;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    width: 270px;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    z-index: 2000;
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .26s cubic-bezier(.2,.8,.2,1),
                transform .26s cubic-bezier(.2,.8,.2,1),
                visibility 0s linear .26s;
}

body.dark-mode .dropdown-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.dropdown-content.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition: opacity .28s cubic-bezier(.2,.8,.2,1),
                transform .28s cubic-bezier(.2,.8,.2,1),
                visibility 0s linear 0s;
}
/* [ORKYVA-UI-BURGER-ANIM-01] Sections statiques : le panneau s'anime comme un
   seul bloc. Le decalage nth-child (jusqu'a .16s) ajoutait du retard percu et,
   la sous-arborescence etant desormais toujours en flux (voir plus bas), il
   rendait la fermeture asymetrique. Contenu et disposition inchanges. */
.dropdown-content .dropdown-section {
    opacity: 1;
    transform: none;
}

.burger-menu-btn.is-open i { transform: rotate(90deg); }
.burger-menu-btn i { transition: transform .35s cubic-bezier(.2,.8,.2,1); display: inline-block; }

.dropdown-section {
    margin-bottom: 1rem;
}

.dropdown-section h4 {
    font-size: 0.95rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

body.dark-mode .dropdown-section h4 {
    color: var(--primary-dark);
}

.dropdown-section a {
    display: block;
    color: var(--dark-color);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    transition: all 0.3s;
    font-size: 0.9rem;
}

body.dark-mode .dropdown-section a {
    color: var(--text-primary);
}

.dropdown-section a:hover {
    background: rgba(46, 204, 113, 0.1);
    color: var(--primary-color);
    transform: translateX(4px);
}

body.dark-mode .dropdown-section a:hover {
    background: var(--bg-card-hover);
    color: var(--primary-dark);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* === Correction du menu burger déroulant (z-index et clics) === */
.dropdown-burger {
    position: relative;
    z-index: 3000; /* plus haut que le header standard */
}

.dropdown-content {
    position: absolute;
    top: 55px;
    right: 0;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    width: 270px;
    /* [ORKYVA-UI-BURGER-ANIM-01] Rendu en flux des le chargement (fini le
       display:none) : la sous-arborescence est mise en page UNE fois, ce qui
       supprime le reflow/paint du premier open (hitch mesure ~40ms mobile).
       Masquage par opacity+visibility (animables) au lieu de display (non
       animable) => ouverture ET fermeture animees symetriquement. */
    display: flex;
    flex-direction: column;
    padding: 1rem;
    z-index: 5000; /* passe au-dessus de tout le contenu */
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none; /* ferme : ne capte aucun clic (contenu derriere cliquable) */
    transition: opacity .19s cubic-bezier(.2,.8,.2,1),
                transform .19s cubic-bezier(.2,.8,.2,1),
                visibility 0s linear .19s;
}

body.dark-mode .dropdown-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

/* Empêcher le menu de se cacher derrière le header ou le hero */
header, .navbar, .nav-container {
    position: relative;
    z-index: 4000;
}

/* Correction pour les éléments du hero */
.hero, .hero-content {
    position: relative;
    z-index: 1;
}

/* [ORKYVA-UI-BURGER-ANIM-01] Ouverture animee par TRANSITION (interruptible,
   symetrique avec la fermeture) au lieu d'un keyframe fadeIn qui redemarrait
   brutalement a chaque toggle rapide. */
.dropdown-content.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity .19s cubic-bezier(.2,.8,.2,1),
                transform .19s cubic-bezier(.2,.8,.2,1),
                visibility 0s linear 0s;
}
/* [ORKYVA-UI-BURGER-ANIM-01] prefers-reduced-motion : bascule instantanee
   (toujours via opacity/visibility, jamais display) — ni translation ni fondu,
   l'etat ouvert/ferme reste correct. */
@media (prefers-reduced-motion: reduce) {
    .dropdown-content,
    .dropdown-content.show {
        transition: none;
        transform: none;
    }
    .burger-menu-btn i { transition: none; }
}
/* ========================================
   BADGE ET ICÔNE PANIER
   ======================================== */

.cart-icon {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: var(--dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: transform 0.2s;
}

.cart-icon:hover {
    transform: scale(1.1);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    animation: pop 0.3s ease-out;
}

@keyframes pop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

body.dark-mode .cart-icon {
    color: var(--white);
}

/* ========================================
   MINI PANIER - NOUVEAU DESIGN
   ======================================== */

.mini-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.mini-cart-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mini-cart-container {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: #2a2a2a;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease-out;
}

.mini-cart-overlay.open .mini-cart-container {
    right: 0;
}

.mini-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #16a085;
    border-bottom: 1px solid #138570;
}

.mini-cart-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: white;
}

.mini-cart-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
    padding: 5px;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.mini-cart-close:hover {
    transform: rotate(90deg);
}

.mini-cart-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.cart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    text-align: center;
    padding: 20px;
}

/* Articles du panier */
.mini-cart-item {
    display: flex;
    gap: 12px;
    padding: 15px;
    border-bottom: 1px solid #404040;
    align-items: center;
    background: #2a2a2a;
    transition: background 0.2s;
}

.mini-cart-item:hover {
    background: #333;
}

.item-image {
    width: 70px;
    height: 70px;
    background: #404040;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #404040;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-info {
    flex: 1;
    min-width: 0;
}

.item-info h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
}

.item-price {
    margin: 0;
    color: #16a085;
    font-weight: 700;
    font-size: 14px;
}

.item-quantity-control {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #404040;
    border-radius: 6px;
    padding: 5px 8px;
}

.qty-minus,
.qty-plus {
    background: none;
    border: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a085;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s;
    border-radius: 3px;
}

.qty-minus:hover,
.qty-plus:hover {
    background: #505050;
    transform: scale(1.1);
}

.qty-display {
    color: #e0e0e0;
    font-weight: 600;
    font-size: 13px;
    min-width: 15px;
    text-align: center;
}

/* Résumé du panier */
.mini-cart-summary {
    padding: 15px;
    border-top: 1px solid #404040;
    background: #1a1a1a;
}

.cart-summary-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #b0b0b0;
}

.summary-label {
    font-weight: 500;
}

.summary-value {
    font-weight: 600;
    color: #e0e0e0;
}

.summary-total {
    border-top: 1px solid #404040;
    padding-top: 10px;
    font-size: 16px !important;
    color: white !important;
}

.summary-total .summary-label {
    color: #e0e0e0;
    font-weight: 700;
}

.summary-total .summary-value {
    color: #16a085;
    font-weight: 700;
    font-size: 18px;
}

/* Footer du panier */
.mini-cart-footer {
    padding: 15px;
    border-top: 1px solid #404040;
    background: #1a1a1a;
}

.btn-checkout {
    padding: 14px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: #16a085;
    color: white;
    transition: all 0.3s;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-checkout:hover {
    background: #138570;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22, 160, 133, 0.3);
}

/* Light mode */
body:not(.dark-mode) .mini-cart-container {
    background: white;
}

body:not(.dark-mode) .mini-cart-header {
    background: #16a085;
}

body:not(.dark-mode) .mini-cart-item {
    background: white;
    border-bottom-color: #e0e0e0;
}

body:not(.dark-mode) .mini-cart-item:hover {
    background: #f9f9f9;
}

body:not(.dark-mode) .item-image {
    background: #f0f0f0;
    border-color: #e0e0e0;
}

body:not(.dark-mode) .item-info h4 {
    color: #333;
}

body:not(.dark-mode) .item-quantity-control {
    background: #f0f0f0;
}

body:not(.dark-mode) .qty-minus,
body:not(.dark-mode) .qty-plus {
    color: #16a085;
}

body:not(.dark-mode) .qty-minus:hover,
body:not(.dark-mode) .qty-plus:hover {
    background: #e0e0e0;
}

body:not(.dark-mode) .qty-display {
    color: #333;
}

body:not(.dark-mode) .mini-cart-summary {
    background: #f9f9f9;
    border-top-color: #e0e0e0;
}

body:not(.dark-mode) .summary-row {
    color: #666;
}

body:not(.dark-mode) .summary-value {
    color: #333;
}

body:not(.dark-mode) .mini-cart-footer {
    background: #f9f9f9;
    border-top-color: #e0e0e0;
}

/* Responsive */
@media (max-width: 768px) {
    .mini-cart-container {
        width: 100%;
        right: -100%;
    }

    .mini-cart-item {
        padding: 12px;
        gap: 10px;
    }

    .item-image {
        width: 60px;
        height: 60px;
    }

    .item-info h4 {
        font-size: 13px;
    }
}
/* Mini panier déroulant */
.cart-dropdown {
  position: absolute;
  top: 70px;
  right: 20px;
  width: 300px;
  background: var(--bg-color, #fff);
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  padding: 15px;
  z-index: 999;
  transition: all 0.3s ease;
}

.cart-dropdown.hidden {
  display: none;
}

.cart-dropdown h4 {
  margin-top: 0;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

#cart-items {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  max-height: 180px;
  overflow-y: auto;
}

#cart-items li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-top: 10px;
  border-top: 1px solid #ddd;
  padding-top: 8px;
}

.cart-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.btn-cart,
.btn-checkout {
  display: inline-block;
  text-align: center;
  width: 48%;
  background-color: #333;
  color: #fff;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
}

.btn-cart:hover,
.btn-checkout:hover {
  background-color: #555;
}

.footer .payment-methods {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.footer .payment-icon {
    height: 30px;          /* ajuste à la taille souhaitée */
    width: auto;
    display: block;
}

/* Optionnel : léger filtre en mode sombre si besoin */
body.dark-mode .footer .payment-icon {
    filter: brightness(0.9) contrast(1.1);
}


/* =====================================================
   TROPICAL URBAN - THEMES D'ARRIERE-PLAN (PAGE UNIQUEMENT)
   - N'impacte pas les couleurs (boutons/textes/nav)
   - Piloté par body[data-tu-bgtheme]
===================================================== */

body[data-tu-bgtheme] {
  /* laisse la main aux thèmes sans toucher aux variables couleurs */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

body[data-tu-bgtheme="original"] {
  /* conserve le comportement original de ton style.css */
  background-image: none;
}

body[data-tu-bgtheme="tropical-night"] {
  background-image: radial-gradient(1200px 800px at 20% 10%, rgba(46,204,113,0.20), transparent 60%),
                    radial-gradient(900px 700px at 80% 20%, rgba(212,168,46,0.18), transparent 55%),
                    radial-gradient(1100px 900px at 50% 90%, rgba(52,152,219,0.10), transparent 60%),
                    linear-gradient(180deg, rgba(8,10,14,1), rgba(5,6,9,1));
}

body[data-tu-bgtheme="ocean-breeze"] {
  background-image: radial-gradient(1000px 800px at 10% 20%, rgba(52,152,219,0.22), transparent 60%),
                    radial-gradient(900px 700px at 90% 30%, rgba(46,204,113,0.14), transparent 55%),
                    linear-gradient(180deg, rgba(245,251,255,1), rgba(233,244,255,1));
}

body[data-tu-bgtheme="jungle-mist"] {
  background-image: radial-gradient(1200px 900px at 20% 20%, rgba(39,174,96,0.22), transparent 60%),
                    radial-gradient(900px 700px at 85% 35%, rgba(127,140,141,0.14), transparent 55%),
                    linear-gradient(180deg, rgba(250,253,252,1), rgba(236,247,242,1));
}

body[data-tu-bgtheme="sand-palm"] {
  background-image: radial-gradient(1200px 800px at 20% 15%, rgba(212,168,46,0.22), transparent 60%),
                    radial-gradient(900px 700px at 85% 25%, rgba(46,204,113,0.12), transparent 55%),
                    linear-gradient(180deg, rgba(255,252,244,1), rgba(249,244,232,1));
}

body[data-tu-bgtheme="monochrome"] {
  background-image: radial-gradient(1200px 900px at 20% 15%, rgba(0,0,0,0.10), transparent 60%),
                    radial-gradient(900px 700px at 85% 25%, rgba(0,0,0,0.08), transparent 55%),
                    linear-gradient(180deg, rgba(250,250,250,1), rgba(237,237,237,1));
}

/* Mode sombre: garde tes couleurs de dark-mode, on adapte juste le fond */
body.dark-mode[data-tu-bgtheme="ocean-breeze"],
body.dark-mode[data-tu-bgtheme="jungle-mist"],
body.dark-mode[data-tu-bgtheme="sand-palm"],
body.dark-mode[data-tu-bgtheme="monochrome"] {
  background-image: radial-gradient(1200px 800px at 20% 10%, rgba(46,204,113,0.10), transparent 60%),
                    radial-gradient(900px 700px at 85% 25%, rgba(52,152,219,0.08), transparent 55%),
                    linear-gradient(180deg, rgba(10,10,10,1), rgba(6,6,6,1));
}

/* Styles des boutons de sélection (sans contour flashy) */
.tu-bgtheme-btn {
  padding: 12px 14px;
  border: none !important;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  color: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
body.dark-mode .tu-bgtheme-btn { background: rgba(255,255,255,0.06); }
.tu-bgtheme-btn:hover { transform: translateY(-1px); }
.tu-bgtheme-btn.is-active { background: rgba(46,204,113,0.16); }
body.dark-mode .tu-bgtheme-btn.is-active { background: rgba(46,204,113,0.18); }


.tu-scan-zone{
  display:flex;
  gap:14px;
  align-items:center;
}
#tuCardScanQr{
  width:108px;
  height:108px;
  padding:10px;
  background:#fff;
  border-radius:14px;
  box-shadow: var(--shadow-sm);
}
#tuCardScanQr canvas, #tuCardScanQr img{
  display:block;
  width:88px !important;
  height:88px !important;
}
.tu-scan-meta{ line-height:1.25; }
.tu-scan-title{ font-weight:900; font-size:14px; }
.tu-scan-sub{ opacity:.85; font-size:12px; margin:4px 0 8px; }
.tu-scan-row{ font-size:12px; opacity:.95; margin-top:4px; }


/* =========================
   WISHLIST - GLOBAL BUTTONS
   ========================= */
.product-image-wrapper,
.product-image-container,
.product-card-media,
.product-card-thumb {
    position: relative;
}

.product-wishlist,
.btn-wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 8;
    background: rgba(255, 255, 255, 0.96);
    color: #1f2937;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.product-wishlist i,
.btn-wishlist i {
    pointer-events: none;
    font-size: 17px;
}

.product-wishlist:hover,
.btn-wishlist:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.product-wishlist.active,
.btn-wishlist.active {
    background: #ffedf0;
    color: #e11d48;
}

body.dark-mode .product-wishlist,
body.dark-mode .btn-wishlist {
    background: rgba(22, 22, 22, 0.94);
    color: #f3f4f6;
    border: 1px solid rgba(255, 255, 255, 0.09);
}

body.dark-mode .product-wishlist.active,
body.dark-mode .btn-wishlist.active {
    background: rgba(225, 29, 72, 0.16);
    color: #fb7185;
    border-color: rgba(251, 113, 133, 0.45);
}

.wishlist-counter {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   WISHLIST CARDS — CERCLE PARFAIT MOBILE (Phase polish-icons 2026-04-23)
   -----------------------------------------------------------------
   Patch direct dans style.css (chargé via <link> en <head>) pour
   garantir l'application sans dépendre de l'injection JS de
   tu-mobile-polish.css. Spécificité (0,2,1) via `body .product-wishlist`,
   bat les overrides catalogue.css / recherche-premium.css (0,2,0).
   !important sur toutes les propriétés critiques pour blinder la
   cascade quel que soit le contexte de page (catalogue, recherche,
   homepage, account).
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body .product-wishlist,
    body .btn-wishlist,
    body .wishlist-icon,
    body button.product-wishlist,
    body button.btn-wishlist {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }
    body .product-wishlist > i,
    body .btn-wishlist > i,
    body .wishlist-icon > i {
        font-size: 15px !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
@media (max-width: 480px) {
    body .product-wishlist,
    body .btn-wishlist,
    body .wishlist-icon,
    body button.product-wishlist,
    body button.btn-wishlist {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }
    body .product-wishlist > i,
    body .btn-wishlist > i,
    body .wishlist-icon > i {
        font-size: 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ICÔNES-BOUTONS RONDES — MEGA-RULE GLOBAL MOBILE (2026-04-23)
   -----------------------------------------------------------------
   Patch direct dans style.css (chargé via <link> en <head>) pour
   garantir l'application sur TOUTES les pages sans dépendre du JS
   d'injection de tu-mobile-polish.css.

   STRATÉGIE :
     - Liste exhaustive des classes/IDs de "boutons-icônes" connus
       site-wide (header, cards, modales, lightbox, FAB, gallery, qty,
       réassurance, account, etc.)
     - Force aspect-ratio 1/1 + border-radius 50% + flex centering
       + padding 0 + line-height 1
     - PAS de width/height global imposé : chaque contexte a déjà sa
       taille (38, 40, 44, 48...) — on garantit juste la SHAPE
     - Sauf wishlist (38/34 explicit déjà défini ci-dessus, conserve)
     - Spécificité montée à (0,2,X) via préfixe `body` pour battre
       les rules existantes (0,1,X) sans !important

   EXCLUSIONS (réaffirmées explicitement après la mega-rule) :
     - .wishlist-btn-detail dans sticky CTA produit-detail (square 12px)
     - .password-toggle (rectangle 8px input)
     - .quantity-control button du sticky CTA produit (transparent rect)
     - .cart-badge / .product-badge / .badge / .tu-badge (pills compteur)
     - .payment-icon / .payment-logo (logos rectangulaires)
     - .btn / .btn-primary / .btn-secondary / .add-to-cart-btn /
       .login-btn / .btn-checkout / .btn-next (boutons texte avec icône)
     - .tab-button (onglets)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* MEGA-rule : tous conteneurs d'icônes-boutons ronds */
  body .nav-icon,
  body .cart-icon,
  body .dark-mode-btn,
  body .burger-menu-btn,
  body .product-wishlist,
  body .btn-wishlist,
  body .wishlist-icon,
  body .wishlist-btn,
  body .scroll-to-top,
  body .back-to-top,
  body #scroll-top-btn,
  body .tu-fab,
  body .gallery-nav-btn,
  body .zoom-icon,
  body .close-mini-cart,
  body .modal-close,
  body .popup-close,
  body .lightbox-close,
  body .lightbox-prev,
  body .lightbox-next,
  body .tu-modal-close,
  body .qty-btn,
  body .quantity-btn,
  body .icon-btn,
  body .btn-icon,
  body .icon-action,
  body .action-btn,
  body .btn-action,
  body .fab,
  body .icon-circle,
  body .tu-icon-circle,
  body .tu-icon-circle-mobile,
  body .close-btn,
  body .btn-close,
  body .toggle-btn,
  body .icon-toggle,
  body .stat-icon,
  body .feature-icon-circle,
  body .header-icon,
  body button.product-wishlist,
  body button.btn-wishlist,
  body button.close-btn,
  body button.modal-close {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    overflow: hidden;
  }

  /* Lightbox prev/next : taille minimum touch garantie */
  body .lightbox-prev,
  body .lightbox-next {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* === EXCLUSIONS RÉAFFIRMÉES === */
  /* Sticky CTA wishlist produit-detail : reste square pill 12px */
  body main.product-detail-page .product-actions .wishlist-btn-detail {
    aspect-ratio: auto !important;
    border-radius: 12px !important;
  }
  /* Password toggle : reste rectangle 8px */
  body .password-toggle {
    aspect-ratio: auto !important;
    border-radius: 8px !important;
  }
  /* Badges pills : restent ovales (compteur s'étire) */
  body .cart-badge,
  body .product-badge,
  body .badge,
  body .tu-badge,
  body .smart-badge,
  body .shipping-threshold-badge {
    aspect-ratio: auto !important;
    border-radius: 999px !important;
  }
  /* Logos paiement : restent rectangulaires (couvert aussi par §16
     dans tu-mobile-polish.css) */
  body footer .payment-icon,
  body footer .payment-logo,
  body .footer .payment-icon,
  body .footer .payment-logo {
    aspect-ratio: auto !important;
    border-radius: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RÉASSURANCE / AVANTAGES — Icon circle premium (mobile global)
   -----------------------------------------------------------------
   Habille les <i> FontAwesome des blocs avantages (Livraison, Paiement,
   Retours, Service client) d'un cercle vert primary 44×44 cohérent
   avec la DA Tropical Urban. Pattern reconnu site-wide :
     - .reassurance-item > i  (produit-detail.html, contact.php, etc.)
     - .feature-item > i      (homepage, landing pages)
     - .benefit-item > i      (pages CMS, FAQ)
     - .advantage-item > i    (variantes éditoriales)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body .reassurance-item > i,
  body .feature-item > i,
  body .benefit-item > i,
  body .advantage-item > i {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: rgba(46, 204, 113, 0.10) !important;
    border: 1px solid rgba(46, 204, 113, 0.22) !important;
    color: #1E8449 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 auto 6px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  body.dark-mode .reassurance-item > i,
  body.dark-mode .feature-item > i,
  body.dark-mode .benefit-item > i,
  body.dark-mode .advantage-item > i {
    background: rgba(46, 204, 113, 0.16) !important;
    border-color: rgba(46, 204, 113, 0.30) !important;
    color: #5ED480 !important;
  }
}


.payment-failed-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(6px);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
}

.payment-failed-overlay.show{
opacity:1;
pointer-events:auto;
}

.payment-failed-modal{
background:#0B0F14;
color:#fff;
padding:40px;
border-radius:18px;
max-width:420px;
width:90%;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,0.6);
border:1px solid rgba(255,255,255,0.08);
position:relative;
}

.payment-failed-icon{
font-size:48px;
margin-bottom:10px;
}

.payment-failed-modal h2{
font-size:24px;
margin-bottom:10px;
}

.payment-failed-modal p{
color:#cbd5e1;
margin-bottom:20px;
}

.payment-failed-actions{
display:flex;
gap:12px;
justify-content:center;
}

.payment-failed-close{
position:absolute;
top:10px;
right:14px;
background:none;
border:none;
color:#aaa;
font-size:18px;
cursor:pointer;
}


/* ═════════════════════════════════════════════════════════════════
   [FOOTER-PAYMENT-BADGES-POLISH-01 2026-05-15] FOOTER PAIEMENT PREMIUM
   -----------------------------------------------------------------
   Refonte UI des badges paiement footer pour rendu premium, lisible
   en mode clair ET sombre. Corrige les bugs constates :
     1. Apple Pay invisible en dark (blanc sur fond clair-charbon)
     2. Stripe affiche au meme niveau que cartes (confusion)
     3. Badges parfois colles visuellement (gap insuffisant)
     4. Pas de titre clair "Paiement securise"

   Aucune logique paiement modifiee. Patch CSS pur + wrapper HTML
   sur pages publiques NON-sensibles (checkout/paiement/success/cart/
   auth/contact NON TOUCHES).
   ═════════════════════════════════════════════════════════════════ */

/* Wrapper principal : container du bloc paiement */
.tu-footer-payments {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1rem;
  max-width: 100%;
}

.tu-footer-payment-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 0.35rem 0;
  color: var(--dark-color, #2C3E50);
  text-transform: uppercase;
  opacity: 0.85;
}
body.dark-mode .tu-footer-payment-title,
html.dark .tu-footer-payment-title {
  color: var(--text-primary, #FFFFFF);
  opacity: 0.9;
}

.tu-footer-payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tu-payment-note {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray, #7F8C8D);
  margin: 0.4rem 0 0 0;
  letter-spacing: 0.02em;
  line-height: 1.4;
  opacity: 0.85;
}
body.dark-mode .tu-payment-note,
html.dark .tu-payment-note {
  color: rgba(255, 255, 255, 0.65);
  opacity: 0.9;
}

/* Polish des badges existants (.payment-icon.payment-badge, .payment-logo.payment-badge)
   pour ameliorer le rendu sans casser la structure HTML existante.
   Override des regles L10-136 de style.css pour les bugs constates. */

/* Spacing + uniformite */
.payment-methods,
.payment-logos {
  gap: 8px !important;
  row-gap: 8px !important;
  flex-wrap: wrap !important;
  display: flex !important;
  align-items: center !important;
}

/* Apple Pay light : noir avec texte blanc (premium, lisible) */
.payment-icon.payment-badge[aria-label="Apple Pay"],
.payment-logo.payment-badge[aria-label="Apple Pay"] {
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

/* Apple Pay dark : charbon clair avec texte blanc (visible sur footer dark) */
body.dark-mode .payment-icon.payment-badge[aria-label="Apple Pay"],
body.dark-mode .payment-logo.payment-badge[aria-label="Apple Pay"],
html.dark .payment-icon.payment-badge[aria-label="Apple Pay"],
html.dark .payment-logo.payment-badge[aria-label="Apple Pay"] {
  background: #1A1A1A !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

/* Google Pay light : blanc avec texte gris foncé (lisible) */
.payment-icon.payment-badge[aria-label="Google Pay"],
.payment-logo.payment-badge[aria-label="Google Pay"] {
  background: #FFFFFF !important;
  border: 1px solid #DADCE0 !important;
  color: #3C4043 !important;
  background-image: linear-gradient(90deg,
    #4285F4 0%, #4285F4 25%,
    #EA4335 25%, #EA4335 50%,
    #FBBC04 50%, #FBBC04 75%,
    #34A853 75%, #34A853 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 3px !important;
  background-position: 0 100% !important;
}

/* Google Pay dark : charbon premium avec texte blanc + underline conserve */
body.dark-mode .payment-icon.payment-badge[aria-label="Google Pay"],
body.dark-mode .payment-logo.payment-badge[aria-label="Google Pay"],
html.dark .payment-icon.payment-badge[aria-label="Google Pay"],
html.dark .payment-logo.payment-badge[aria-label="Google Pay"] {
  background: #1A1A1A !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #E5E7EB !important;
  background-image: linear-gradient(90deg,
    #4285F4 0%, #4285F4 25%,
    #EA4335 25%, #EA4335 50%,
    #FBBC04 50%, #FBBC04 75%,
    #34A853 75%, #34A853 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 3px !important;
  background-position: 0 100% !important;
}

/* Stripe : style distinctif "mention de securite" plutot que carte bancaire.
   Plus subtil que les autres : badge gris clair / charbon avec texte. */
.payment-icon.payment-badge[aria-label="Stripe"],
.payment-logo.payment-badge[aria-label="Stripe"] {
  background: #F4F4F6 !important;
  border: 1px solid rgba(99, 91, 255, 0.20) !important;
  color: #635BFF !important;
}
body.dark-mode .payment-icon.payment-badge[aria-label="Stripe"],
body.dark-mode .payment-logo.payment-badge[aria-label="Stripe"],
html.dark .payment-icon.payment-badge[aria-label="Stripe"],
html.dark .payment-logo.payment-badge[aria-label="Stripe"] {
  background: rgba(99, 91, 255, 0.12) !important;
  border: 1px solid rgba(99, 91, 255, 0.30) !important;
  color: #A5A1FF !important;
}

/* Responsive : centrage sur mobile pour le wrapper tu-footer-payments */
@media (max-width: 640px) {
  .tu-footer-payments {
    align-items: center;
    text-align: center;
  }
  .tu-footer-payment-badges {
    justify-content: center;
  }
  .tu-payment-note {
    text-align: center;
  }
}


/* ═════════════════════════════════════════════════════════════════
   [FOOTER-PAYMENT-BADGES-POLISH-02 2026-05-15] CHIPS PREMIUM HOMOGENES
   -----------------------------------------------------------------
   Refonte complete des badges paiement footer apres lot 01 insuffisant.
   Lot 01 gardait les anciens badges payment-icon avec faux brand colors :
   - VISA bleu/jaune mal rendu
   - MASTERCARD gradient rouge/orange tape-l'oeil
   - MASTERCARDAMEX visuellement colle a l'oeil (uppercase + letter-spacing)
   - STRIPE affiche au meme niveau que cartes (confusion)
   - APPLE PAY / GOOGLE PAY noir/blanc agressifs

   Lot 02 remplace structurellement par :
   - Chips premium homogenes (meme hauteur, meme bordure, meme fond subtil)
   - Accent couleur subtle par marque (visa or, mastercard orange, amex bleu)
   - Stripe RETIRE des badges, mention uniquement dans la note de securite
   - Apple Pay / Google Pay en chips secondaires (style wallet)
   - Mode clair/sombre maitrise, contrastes AA
   - Responsive flex-wrap + mobile centre

   AUCUNE modification logique paiement. CSS-only.
   ═════════════════════════════════════════════════════════════════ */

/* Wrapper principal : override lot 01 si necessaire */
.tu-footer-payments {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.tu-footer-payment-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* Light footer context : titre fonce */
body:not(.dark-mode) .tu-footer-payments .tu-footer-payment-title {
  color: rgba(31, 41, 55, 0.78);
}

.tu-footer-payment-grid,
.tu-footer-wallet-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

/* CHIPS : base commune cartes + wallets — premium homogene */
.tu-pay-chip,
.tu-wallet-chip {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* Override defensive vs ancien CSS payment-badge */
  text-transform: none;
}

/* Accents subtils par marque carte (DARK mode = couleurs claires) */
.tu-pay-chip--visa {
  color: #F7D046;
}
.tu-pay-chip--mastercard {
  color: #FFB35A;
}
.tu-pay-chip--amex {
  color: #8CCBFF;
}

/* Wallets : style secondaire plus discret */
.tu-wallet-chip {
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.86);
}

/* Note securite Stripe */
.tu-payment-security-note {
  margin: 0;
  max-width: 280px;
  font-size: 0.78rem;
  line-height: 1.55;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
.tu-payment-security-note strong {
  color: #A8A2FF;
  font-weight: 800;
}

/* ─── MODE CLAIR : chips contrastes lisibles ──────────────────── */
body:not(.dark-mode) .tu-pay-chip,
body:not(.dark-mode) .tu-wallet-chip {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(31, 41, 55, 0.12);
  color: #243244;
  box-shadow: 0 6px 18px rgba(31, 41, 55, 0.06);
}
body:not(.dark-mode) .tu-pay-chip--visa {
  color: #B78A00;
}
body:not(.dark-mode) .tu-pay-chip--mastercard {
  color: #B45309;
}
body:not(.dark-mode) .tu-pay-chip--amex {
  color: #006FCF;
}
body:not(.dark-mode) .tu-payment-security-note {
  color: rgba(31, 41, 55, 0.62);
}
body:not(.dark-mode) .tu-payment-security-note strong {
  color: #635BFF;
}

/* ─── RESPONSIVE MOBILE : centrage ─────────────────────────────── */
@media (max-width: 640px) {
  .tu-footer-payments {
    align-items: center;
    text-align: center;
  }
  .tu-footer-payment-grid,
  .tu-footer-wallet-grid {
    justify-content: center;
  }
  .tu-payment-security-note {
    text-align: center;
  }
}

/* Note : les anciennes regles .payment-icon.payment-badge[aria-label="..."]
   du lot 01 restent dans le fichier mais ne s'appliquent plus puisque les
   spans payment-icon ne sont plus presents dans les pages patchees lot 02.
   Sur les pages sensibles non touchees (cart/checkout/paiement/success/
   espace-premium), elles continuent de fonctionner. */



/* ═════════════════════════════════════════════════════════════════
   [FOOTER-PAYMENT-BADGES-POLISH-03-LIGHT-CONTRAST 2026-05-15]
   Correction lisibilité titre + note en mode clair
   -----------------------------------------------------------------
   Cause : le footer .footer L1166-1170 a bg var(--dark-color) ET
   color white en mode clair (footer foncé même en light). Mais le
   lot 02 a posé .tu-footer-payment-title et .tu-payment-security-note
   en couleurs sombres (rgba(31,41,55,0.78) / 0.62) en mode clair pour
   un contexte de footer clair → INVISIBLE sur fond bleu-gris foncé.

   Fix : forcer titre + note en couleurs CLAIRES en mode clair, comme
   en mode dark (puisque le footer est foncé dans les 2 modes).
   Les chips et la note Stripe gardent leur palette du lot 02.
   ═════════════════════════════════════════════════════════════════ */

/* Titre en mode clair : blanc pur sur fond foncé du footer (request user) */
body:not(.dark-mode) .tu-footer-payments .tu-footer-payment-title {
  color: #FFFFFF !important;
  opacity: 1;
}

/* Note Stripe en mode clair : gris clair lisible */
body:not(.dark-mode) .tu-footer-payments .tu-payment-security-note {
  color: rgba(226, 232, 240, 0.78) !important;
  opacity: 1;
}

/* Stripe strong : violet premium lisible (pas trop agressif) */
body:not(.dark-mode) .tu-footer-payments .tu-payment-security-note strong {
  color: #A8A2FF !important;
  font-weight: 800;
}

/* Mode clair : chips conservées du lot 02 (fond blanc cassé sur footer foncé,
   lisibles). Aucun override ici. */


/* ═════════════════════════════════════════════════════════════════
   [FOOTER-PAYMENT-BADGES-POLISH-04-TITLE-FINAL-CONTRAST 2026-05-15]
   Patch final contraste titre "PAIEMENT SECURISE" mode clair
   -----------------------------------------------------------------
   Apres lot 03, le titre etait force a #FFFFFF !important en clair.
   Mais visuellement il reste percu trop sombre sur certains footers
   (bleu-gris foncé) car :
     - Le titre est en font-weight: 800 + uppercase + letter-spacing 0.08em
       → texte fin et compact qui semble moins lumineux
     - Pas de text-shadow → aucun renforcement visuel sur fond foncé

   Fix final : ajouter un text-shadow subtil + selecteur multi-niveau
   (.footer .tu-footer-payments + sans .footer) pour spécificité forte
   qui vainc tout autre override de cascade.
   ═════════════════════════════════════════════════════════════════ */

body:not(.dark-mode) .footer .tu-footer-payments .tu-footer-payment-title,
body:not(.dark-mode) .tu-footer-payments .tu-footer-payment-title {
  color: rgba(255, 255, 255, 0.88) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* ====================================================================
   [THEME-TOGGLE-FLASH-POLISH-01 2026-05-17]
   Désactive temporairement les transitions CSS pendant le switch dark/light
   pour éliminer le flash visuel ("wave" 300ms cascadant sur ~20 règles
   `transition: all 0.3s` ou `transition: background-color 0.3s, color 0.3s`
   présentes dans le fichier).

   Activé par js/global.js MutationObserver setupSync :
     - AJOUT classe `tu-theme-switching` AVANT toggle html.dark/data-tu-theme/style.bg
     - RETRAIT après 2 frames (requestAnimationFrame×2) pour laisser le browser
       repaindre proprement avec le nouveau thème.

   Hors switch : les transitions normales du site (hover, focus, animations
   décoratives) restent disponibles — cette règle n'affecte QUE la fenêtre
   très courte du toggle.

   Préserve : view-transition natif (Chrome 126+/Safari 18+), focus rings,
   accessibility (rien de masqué, rien d'overlay).
   ==================================================================== */
html.tu-theme-switching,
html.tu-theme-switching *,
html.tu-theme-switching *::before,
html.tu-theme-switching *::after {
  transition: none !important;
}

/* ====================================================================
   [PREBETA-MOBILE-FOOTER-MENU-POLISH-01 2026-05-19]
   --------------------------------------------------------------------
   Polish UX pré-bêta — harmonisation visuelle 2 zones :

   1) Footer payment badges  (login.html / cart.html / contact.php)
      Markup identique sur toutes les pages cibles :
        <footer> ... <div class="payment-methods">
          <span class="payment-icon payment-badge" aria-label="VISA">VISA</span>
          ... (Mastercard, Amex, Stripe, Apple Pay, Google Pay)
        </div> ... </footer>
      Divergence visuelle constatée : style.css §[L4055] applique un
      flex-wrap générique sur `.payment-methods`, ce qui ne contraint
      pas la largeur des badges → rendu inégal entre pages.
      Fix : grille 3-col tablet / 6-col desktop / 2-col phone, calquée
      sur le bloc inline `body.checkout-page footer .payment-methods`
      de checkout.php (LOT CHECKOUT-PAYMENT-BADGES-VISIBILITY-02
      2026-05-11). La spécificité de checkout reste supérieure
      (body.checkout-page → 0,2,1) → checkout garde son rendu intact ;
      login/cart/contact adoptent le MÊME rendu visuel.

   2) Account.html burger dropdown harmonisation
      Public pages utilisent `.dropdown-content` (style.css §[L2877] /
      §[L2978]) avec width:270px / border-radius:--radius-md /
      box-shadow:--shadow-lg / padding:1rem / z-index:2000.
      account.html inline §[L1912] utilise `.burger-dropdown-content`
      avec min-width:240px / border-radius:14px / padding:10px /
      shadow:0 14px 32px / z-index:1000.
      Les deux sont right-aligned (top:55px right:0) → différence
      stylistique uniquement.
      Fix : aligne `.burger-dropdown-content` sur les valeurs publiques
      via override !important (l'inline `<style>` d'account.html
      charge APRÈS style.css → besoin de !important malgré spécificité
      identique). Aucune modification HTML / JS account.html.

   Garanties strictes :
     - 0 modif backend / API / paneladmin / DB
     - 0 modif paiement.php / success.php / payment_session_handoff.php
     - 0 modif webhook / Stripe / PaymentIntent / stock
     - 0 modif .htaccess / .env / CSP serveur
     - 0 nouveau CDN / Google Fonts
     - 0 POST / email / token leak
     - HTML, PHP, JS strictement intacts
     - Seul css/style.css est modifié dans ce lot
   ==================================================================== */

/* --- 1) Footer payment-methods : grille unifiée multi-pages ---------- */
footer .payment-methods {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(80px, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  margin-top: 12px !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: 100% !important;
}
footer .payment-methods > .payment-icon,
footer .payment-methods > .payment-badge {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 36px !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 0.65rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}
@media (min-width: 769px) {
  footer .payment-methods {
    grid-template-columns: repeat(6, minmax(80px, 1fr)) !important;
  }
  footer .payment-methods > .payment-icon,
  footer .payment-methods > .payment-badge {
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 0.62rem !important;
  }
}
@media (max-width: 480px) {
  footer .payment-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  footer .payment-methods > .payment-icon,
  footer .payment-methods > .payment-badge {
    font-size: 0.62rem !important;
    padding: 0 8px !important;
    min-height: 34px !important;
  }
}
/* Safe-guard anti-régression : si <img class="payment-logo|payment-icon">
   ressurgit dans le footer (assets bloqués par .htaccess uploads-hardening),
   on le masque pour éviter une icône broken. */
footer .payment-methods img.payment-logo,
footer .payment-methods img.payment-icon {
  display: none !important;
}

/* --- 2) Account burger dropdown : alignement visuel public ----------- */
.burger-dropdown-content {
  width: 270px !important;
  min-width: 270px !important;
  border-radius: var(--radius-md, 10px) !important;
  box-shadow: var(--shadow-lg, 0 8px 20px rgba(0, 0, 0, 0.2)) !important;
  padding: 1rem !important;
  z-index: 2000 !important;
}
/* Sur very-small screens, autorise un shrink propre pour éviter overflow. */
@media (max-width: 360px) {
  .burger-dropdown-content {
    width: calc(100vw - 32px) !important;
    min-width: 0 !important;
  }
}

/* ====================================================================
   [PREBETA-MOBILE-FOOTER-MENU-POLISH-01B 2026-05-19]
   --------------------------------------------------------------------
   RUNTIME VISUAL FIX — root cause = cascade defeat par CSS injecté JS.

   Le lot 01 etait statiquement OK (44/0/0 sentinelle) mais le rendu
   navigateur restait non-unifie. Audit forensique :

     - js/global.js L1041-1061 (injectTuMobilePolish) injecte au runtime
       <link rel="stylesheet" href="css/tu-mobile-polish.css?v=20260502-19">
       sur toutes pages publiques (hors paneladmin), idempotent.
     - tu-mobile-polish.css L1072-1090 pose pour BASE viewport :
         footer.footer .payment-methods,
         .footer .payment-methods,
         ... { display: flex !important; gap: 12px !important; ... }
     - tu-mobile-polish.css L1158-1167 pose pour MOBILE (<=768px) :
         { gap: 14px !important; margin-top: 12px !important; }
     - Specificite : (0,2,1) + !important.
     - Lot 01 utilisait `footer .payment-methods` (0,1,1) + !important.
     - (0,2,1) > (0,1,1) → tu-mobile-polish gagne au runtime, mon 01
       neutralise apres injection JS.

   FIX 01B :
     Selecteur bumpe a `html body footer.footer .payment-methods` (0,2,3)
     pour battre :
       - tu-mobile-polish.css `footer.footer .payment-methods` (0,2,1)
       - checkout.php inline `body.checkout-page footer .payment-methods` (0,2,2)
     Toutes pages cibles (login/cart/checkout/contact/account) adopteront
     le MEME rendu grid (3-col tablet / 6-col desktop / 2-col mobile).

   Garanties strictes :
     - 0 modif backend / API / paneladmin / DB
     - 0 modif paiement.php / success.php / handoff
     - 0 modif Stripe / webhook / stock / PaymentIntent
     - 0 modif .htaccess / .env / CSP serveur
     - 0 modif js/global.js (la regle d'injection reste intacte)
     - 0 modif tu-mobile-polish.css (preserve pour autres pages)
     - Seul css/style.css + 5 link cache-busters (login/cart/checkout/
       contact/account) modifies dans ce lot 01B.
   ==================================================================== */

/* --- 1B) Footer payment-methods : grille unifiee — spec (0,2,3) ----- */
html body footer.footer .payment-methods,
html body footer .payment-methods {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(80px, 1fr)) !important;
  gap: 8px !important;
  row-gap: 8px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
  margin-top: 12px !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: initial !important;
  box-sizing: border-box !important;
}
html body footer.footer .payment-methods > .payment-icon,
html body footer.footer .payment-methods > .payment-badge,
html body footer .payment-methods > .payment-icon,
html body footer .payment-methods > .payment-badge {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 36px !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 0.65rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}
@media (min-width: 769px) {
  html body footer.footer .payment-methods,
  html body footer .payment-methods {
    grid-template-columns: repeat(6, minmax(80px, 1fr)) !important;
    gap: 8px !important;
  }
  html body footer.footer .payment-methods > .payment-icon,
  html body footer.footer .payment-methods > .payment-badge,
  html body footer .payment-methods > .payment-icon,
  html body footer .payment-methods > .payment-badge {
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 0.62rem !important;
  }
}
@media (max-width: 480px) {
  html body footer.footer .payment-methods,
  html body footer .payment-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html body footer.footer .payment-methods > .payment-icon,
  html body footer.footer .payment-methods > .payment-badge,
  html body footer .payment-methods > .payment-icon,
  html body footer .payment-methods > .payment-badge {
    font-size: 0.62rem !important;
    padding: 0 8px !important;
    min-height: 34px !important;
  }
}
/* Safe-guard <img> stray (uploads-hardening anti-XSS SVG bloque assets) */
html body footer.footer .payment-methods img.payment-logo,
html body footer.footer .payment-methods img.payment-icon,
html body footer .payment-methods img.payment-logo,
html body footer .payment-methods img.payment-icon {
  display: none !important;
}

/* --- 2B) Burger dropdown : spec bump defensif (0,1,2) ---------------- */
/* Si un autre CSS pose .burger-dropdown-content a (0,1,1) ou plus, on
   garde l'avantage via tag prefix html. Pas indispensable mais defensif. */
html .burger-dropdown-content {
  width: 270px !important;
  min-width: 270px !important;
  border-radius: var(--radius-md, 10px) !important;
  box-shadow: var(--shadow-lg, 0 8px 20px rgba(0, 0, 0, 0.2)) !important;
  padding: 1rem !important;
  z-index: 2000 !important;
}
@media (max-width: 360px) {
  html .burger-dropdown-content {
    width: calc(100vw - 32px) !important;
    min-width: 0 !important;
  }
}

/* ====================================================================
   [PREBETA-MOBILE-FOOTER-MENU-POLISH-01C 2026-05-19]
   --------------------------------------------------------------------
   BROWSER COMPUTED FIX — visual convergence canon B -> canon A look.

   Lots 01 + 01B etaient runtime-vrais (Playwright audit 2026-05-19 prouve
   display:grid avec grid-template-columns:repeat(2,...) sur 390x844 et
   repeat(3,...) sur 768x1024, marker 01B fetched, html body footer.footer
   .payment-methods selector present). Mais user perception "pas mis a jour"
   provient de la difference visuelle canon B (badges solides couleur
   marque, ex VISA jaune sur bleu) vs canon A produits.html (chips pilule
   translucides avec texte couleur marque).

   01C cible : convertir les badges canon B (.payment-icon.payment-badge)
   pour qu'ils LOOKENT comme les chips canon A (.tu-pay-chip), tout en
   conservant strict no-touch HTML markup canon B.

   Strategie :
     1) Override grid -> flex centre (canon A pattern).
     2) Override solid bg -> translucide blanc.
     3) Garder identite marque via TEXT color (canon A pattern).
     4) Border-radius pilule.
     5) Padding compact.
     6) Plus haute spec que 01B : html body footer.footer + > .child = (0,2,4).
     7) Cache-buster ?v=20260519-01c sur 5 pages pour force refresh.

   Garanties :
     - 0 modif backend / API / paneladmin / DB
     - 0 modif paiement.php / success.php / handoff
     - 0 modif Stripe / webhook / stock
     - 0 modif .htaccess / .env / CSP serveur
     - 0 modif js/global.js / tu-mobile-polish.css
     - Markup HTML strict no-touch (seuls cache-busters bumpes)
   ==================================================================== */

/* --- 1C) Footer payment-methods : flex-centered (canon A pattern) ---- */
html body footer.footer .payment-methods,
html body footer .payment-methods {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  row-gap: 10px !important;
  /* Reset 01B grid */
  grid-template-columns: unset !important;
  /* Layout compact centre */
  max-width: 340px !important;
  margin: 14px auto 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
  box-sizing: border-box !important;
}
@media (max-width: 480px) {
  html body footer.footer .payment-methods,
  html body footer .payment-methods {
    gap: 6px !important;
    row-gap: 8px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
  }
}
@media (min-width: 769px) {
  html body footer.footer .payment-methods,
  html body footer .payment-methods {
    gap: 10px !important;
    row-gap: 10px !important;
    max-width: 420px !important;
  }
}

/* --- 2C) Badge style : translucide pill (canon A inspired) ----------- */
html body footer.footer .payment-methods > .payment-icon.payment-badge,
html body footer.footer .payment-methods > .payment-badge,
html body footer .payment-methods > .payment-icon.payment-badge,
html body footer .payment-methods > .payment-badge {
  /* Reset 01B stretched cell */
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  /* canon A chip shape */
  background: rgba(255, 255, 255, 0.92) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  min-height: 28px !important;
  /* canon A typography */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

/* --- 3C) Brand text colors (canon A pattern: colored text on white) -- */
html body footer.footer .payment-methods > .payment-badge[aria-label="VISA"],
html body footer .payment-methods > .payment-badge[aria-label="VISA"] {
  color: #1A1F71 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border-color: rgba(26, 31, 113, 0.20) !important;
}
html body footer.footer .payment-methods > .payment-badge[aria-label="Mastercard"],
html body footer .payment-methods > .payment-badge[aria-label="Mastercard"] {
  color: #EB001B !important;
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border-color: rgba(235, 0, 27, 0.20) !important;
  text-shadow: none !important;
}
html body footer.footer .payment-methods > .payment-badge[aria-label="Amex"],
html body footer .payment-methods > .payment-badge[aria-label="Amex"] {
  color: #006FCF !important;
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border-color: rgba(0, 111, 207, 0.20) !important;
}
html body footer.footer .payment-methods > .payment-badge[aria-label="Stripe"],
html body footer .payment-methods > .payment-badge[aria-label="Stripe"] {
  color: #635BFF !important;
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border-color: rgba(99, 91, 255, 0.20) !important;
}
html body footer.footer .payment-methods > .payment-badge[aria-label="Apple Pay"],
html body footer .payment-methods > .payment-badge[aria-label="Apple Pay"] {
  color: #000000 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
}
html body footer.footer .payment-methods > .payment-badge[aria-label="Google Pay"],
html body footer .payment-methods > .payment-badge[aria-label="Google Pay"] {
  color: #3C4043 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border-color: rgba(60, 64, 67, 0.20) !important;
}

/* --- 4C) Dark mode adjustments (subtle elevation on dark footer) ----- */
body.dark-mode html body footer.footer .payment-methods > .payment-badge,
html.dark html body footer.footer .payment-methods > .payment-badge,
body.dark-mode html body footer .payment-methods > .payment-badge,
html.dark html body footer .payment-methods > .payment-badge {
  background: rgba(255, 255, 255, 0.88) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32) !important;
}


/* --- TU-PACIFICO-UNIVERSAL-06-START --- */
/* [TROPICALURBAN-APEX-CLOSED-UI-POLISH-06 2026-07-04] Pacifico @font-face UNIVERSAL.
   Cause: pages loading style.css but not tu-fonts-local.css (e.g. about.html) apply
   font-family:'Pacifico' (logo + titles) with NO @font-face source -> fallback.
   CSS-only fix: declare Pacifico here (style.css is loaded site-wide). NO unicode-range
   for max robustness (covers all FR/Latin text, no subset-match quirk on strict engines).
   Self-hosted woff2, 0 CDN. Rollback: remove this START..END block. */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pacifico/pacifico-400-latin.woff2') format('woff2');
}
/* --- TU-PACIFICO-UNIVERSAL-06-END --- */

/* --- ORKYVA-DA01-FONTS-START --- */
/* [ORKYVA-DA-01-TYPO 2026-07-06] Corps -> Poppins, titres -> Inter (poids reels
   100-900). Meme patron que le bloc PACIFICO-UNIVERSAL ci-dessus : @font-face ici
   car style.css est charge site-wide (52 pages) alors que tu-fonts-local.css
   n'est charge que sur 12. Self-hosted woff2, 0 CDN, pas d'unicode-range
   (robustesse FR/Latin). Wordmark (.logo + base .hero-title = "Orkyva") reste
   Pacifico. Rollback : retirer ce bloc + restaurer --font-main. */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/poppins/poppins-300-latin.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/poppins/poppins-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins/poppins-600-latin.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/inter/inter-400-latin.woff2') format('woff2'); }
#about-hero-title { font-family: var(--font-heading); }
/* --- ORKYVA-DA01-FONTS-END --- */

/* ═══ DA-05B — Header wordmark « Orkyva » : Space Grotesk 700, sans monogramme, sans dégradé (2026-07-07) ═══
   .logo = wordmark header uniquement. Charte/thèmes/favicon/monogramme(favicon-PWA) inchangés ; Pacifico reste défini ailleurs. */
.logo img { display: none !important; }
.logo {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  -webkit-text-fill-color: #1C6B4A !important;
          color: #1C6B4A !important;
  filter: none !important;
}
body.dark-mode .logo,
html.dark .logo {
  -webkit-text-fill-color: #EDE7DA !important;
          color: #EDE7DA !important;
}
/* --- ORKYVA-FOOTER-VISUAL-REFINEMENT-02-START --- */
/* [ORKYVA-FOOTER-VISUAL-REFINEMENT-02 2026-07-24] DA footer Orkyva :
   compacite (~400px desktop), palette anthracite/creme/dore (--secondary-color
   = dore canonique #D4A82E, derive rgb local documente), profondeur radiale
   discrete, titres colonnes reduits dores, barre inferieure 3 zones
   (copyright | legal | paiement+climate), separateurs legaux en pseudo-element
   GEOMETRIQUE (le CSS est servi sans charset -> un caractere "middot" litteral
   etait decode windows-1252 => mojibake ; plus AUCUN caractere non-ASCII rendu
   depuis ce fichier). !important UNIQUEMENT contre des !important legacy
   identifies (fond dark 1174/1734, titres dark 1193, liens dark 1214,
   grilles responsive-premium 933/952). Remplace le bloc HARMONIZATION-01.
   Rollback : backup lot + restaurer bloc 01.
   [ORKYVA-FOOTER-ACCENT-COLOR-REFINEMENT-03 2026-07-24] Accent dore
   #D4A82E remplace par VERT LAGON GRISE #78A097 (rgb 120,160,151).
   Aucune variable canonique pertinente : --tu-accent-text dark=#4ADE80
   (vif, ecarte lot 02), light=#1E8449 (2.6:1 sur fond sombre, illisible)
   => secours Variante B du brief, ancree ADN vert Orkyva (#1C6B4A/#1E8449),
   accordee au halo teal rgba(24,78,68) du fond. 6.5:1 sur #101210. */

.footer.tu-footer-v2 {
    --tu-f-accent-rgb: 120, 160, 151; /* lagon grise (secours lot 03) */
    --tu-f-accent: #78A097;
    --tu-f-ink: #EDE7DA;
    --tu-f-text: #C9C3B6;
    --tu-f-muted: #9B9587;
    position: relative;
    background:
        radial-gradient(ellipse 640px 430px at 88% 10%, rgba(120, 160, 151, 0.10), transparent 62%),
        radial-gradient(ellipse 540px 400px at 4% 70%, rgba(24, 78, 68, 0.13), transparent 60%),
        linear-gradient(180deg, #151714 0%, #0E100E 100%);
    color: var(--tu-f-text);
    text-align: left;
    padding: clamp(34px, 4vw, 48px) 0 0;
    border-top: 0;
}
body.dark-mode .footer.tu-footer-v2 {
    background:
        radial-gradient(ellipse 640px 430px at 88% 10%, rgba(120, 160, 151, 0.10), transparent 62%),
        radial-gradient(ellipse 540px 400px at 4% 70%, rgba(24, 78, 68, 0.13), transparent 60%),
        linear-gradient(180deg, #151714 0%, #0E100E 100%) !important;
    border-top: 0;
}
.footer.tu-footer-v2::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120, 160, 151, 0.5) 18%, rgba(120, 160, 151, 0.5) 82%, transparent);
    pointer-events: none;
}
.tu-footer-v2 .container {
    max-width: 1360px;
    padding-inline: clamp(24px, 5vw, 72px);
}

/* Grille principale : identite + 4 colonnes */
.footer-grid.tu-footer-grid {
    grid-template-columns: minmax(220px, 1.25fr) minmax(120px, 0.8fr) minmax(180px, 1fr) minmax(160px, 0.9fr) minmax(220px, 1.15fr);
    grid-template-areas: "brand shop info help contact";
    column-gap: clamp(28px, 3.5vw, 56px);
    row-gap: 28px;
    margin-bottom: clamp(26px, 3vw, 38px);
}
.tu-footer-brand { grid-area: brand; }
.tu-footer-col-shop { grid-area: shop; }
.tu-footer-col-info { grid-area: info; }
.tu-footer-col-help { grid-area: help; }
.tu-footer-contact { grid-area: contact; }

/* Identite */
.tu-footer-brand .tu-footer-wordmark {
    display: inline-block;
    margin: 0 0 14px;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 1.9vw, 27px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--tu-f-ink);
    transition: color 0.25s;
}
.footer .tu-footer-brand a.tu-footer-wordmark:hover,
.footer .tu-footer-brand a.tu-footer-wordmark:focus-visible {
    color: #FFFFFF;
}
.tu-footer-brand .tu-footer-brand-text {
    margin: 0 0 14px;
    max-width: 30ch;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--tu-f-text);
}
.tu-footer-social {
    margin-top: 0;
    gap: 4px;
}
.footer.tu-footer-v2 .tu-footer-social a,
body.dark-mode .footer.tu-footer-v2 .tu-footer-social a {
    justify-content: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    min-height: 34px;
    padding: 4px 8px;
    margin-left: -8px;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--tu-f-text);
    font-size: 13px;
    transition: color 0.25s;
    transform: none;
}
.footer.tu-footer-v2 .tu-footer-social a i {
    font-size: 17px;
    line-height: 1;
}
.footer.tu-footer-v2 .tu-footer-social a:hover,
.footer.tu-footer-v2 .tu-footer-social a:focus-visible,
body.dark-mode .footer.tu-footer-v2 .tu-footer-social a:hover {
    background: none;
    color: var(--tu-f-accent);
    transform: none;
}

/* Titres colonnes : petits, uppercase, dores, trait court */
.tu-footer-grid .footer-column h3 {
    position: relative;
    margin: 0 0 14px;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tu-f-accent);
}
body.dark-mode .tu-footer-grid .footer-column h3 {
    color: var(--tu-f-accent) !important;
}
.tu-footer-grid .footer-column h3::after,
body.dark-mode .tu-footer-grid .footer-column h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 1px;
    background: rgba(120, 160, 151, 0.55);
}

/* Liens colonnes */
.tu-footer-grid .footer-column ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
}
.tu-footer-grid .footer-column ul li {
    margin: 0;
}
.tu-footer-grid .footer-column ul li a,
body.dark-mode .tu-footer-grid .footer-column ul li a {
    display: inline-block;
    padding: 1px 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--tu-f-text) !important;
    transition: color 0.25s;
}
.tu-footer-grid .footer-column ul li a:hover,
.tu-footer-grid .footer-column ul li a:focus-visible,
body.dark-mode .tu-footer-grid .footer-column ul li a:hover,
body.dark-mode .tu-footer-grid .footer-column ul li a:focus-visible {
    color: var(--tu-f-ink) !important;
}
.footer.tu-footer-v2 a:focus-visible {
    outline: 2px solid rgba(120, 160, 151, 0.7);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Colonne contact */
.tu-footer-contact .tu-footer-contact-note {
    margin: 0 0 12px;
    max-width: 30ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tu-f-text);
}
.tu-footer-contact .tu-footer-contact-note strong {
    color: var(--tu-f-ink);
}
.tu-footer-contact .tu-footer-contact-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.tu-footer-contact .tu-footer-contact-list li {
    margin: 0;
}
.tu-footer-contact .tu-footer-contact-list a,
body.dark-mode .tu-footer-contact .tu-footer-contact-list a {
    display: inline-flex;
    align-items: center;
    font-size: 13.5px;
    color: var(--tu-f-text) !important;
    transition: color 0.25s;
}
.tu-footer-contact .tu-footer-contact-list a i {
    margin-right: 8px;
    font-size: 13px;
    color: rgba(120, 160, 151, 0.8);
}
.tu-footer-contact .tu-footer-contact-list a:hover,
.tu-footer-contact .tu-footer-contact-list a:focus-visible,
body.dark-mode .tu-footer-contact .tu-footer-contact-list a:hover {
    color: var(--tu-f-ink) !important;
}

/* CTA Nous ecrire : outline dore compact */
.footer .tu-footer-cta,
body.dark-mode .footer .tu-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    margin-top: 14px;
    padding: 0 20px;
    border: 1px solid rgba(120, 160, 151, 0.55);
    border-radius: var(--radius-md);
    background: rgba(120, 160, 151, 0.035);
    color: var(--tu-f-accent);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.footer .tu-footer-cta i {
    font-size: 13px;
}
.footer .tu-footer-cta:hover,
.footer .tu-footer-cta:focus-visible,
body.dark-mode .footer .tu-footer-cta:hover,
body.dark-mode .footer .tu-footer-cta:focus-visible {
    background: rgba(120, 160, 151, 0.14);
    border-color: rgba(120, 160, 151, 0.85);
    color: var(--tu-f-ink);
}

/* Barre inferieure : copyright | legal | paiement(+climate) */
.footer-bottom.tu-footer-bottom {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "copy legal pay";
    align-items: center;
    column-gap: clamp(18px, 2.6vw, 40px);
    row-gap: 10px;
    padding: 14px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    color: var(--tu-f-muted);
}
body.dark-mode .footer-bottom.tu-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--tu-f-muted) !important;
}
.tu-footer-bottom .tu-footer-copyright {
    grid-area: copy;
    margin: 0;
    font-size: 12.5px;
    color: var(--tu-f-muted);
    white-space: nowrap;
}
.tu-footer-bottom .tu-footer-legal-links {
    grid-area: legal;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 2px;
    margin: 0;
    padding: 0;
}
.tu-footer-bottom .tu-footer-legal-links li {
    display: flex;
    align-items: center;
    margin: 0;
}
.tu-footer-bottom .tu-footer-legal-links li + li::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    margin: 0 10px;
}
.tu-footer-bottom .tu-footer-legal-links a,
body.dark-mode .tu-footer-bottom .tu-footer-legal-links a {
    display: inline-block;
    padding: 6px 2px;
    font-size: 12.5px;
    color: var(--tu-f-muted) !important;
    transition: color 0.25s;
}
.tu-footer-bottom .tu-footer-legal-links a:hover,
.tu-footer-bottom .tu-footer-legal-links a:focus-visible,
body.dark-mode .tu-footer-bottom .tu-footer-legal-links a:hover,
body.dark-mode .tu-footer-bottom .tu-footer-legal-links a:focus-visible {
    color: var(--tu-f-ink) !important;
}
.tu-footer-bottom .tu-footer-payments {
    grid-area: pay;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    margin: 0;
    text-align: right;
}
.tu-footer-bottom .tu-f-payrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Mini-cartes brand : classes PROPRIETAIRES. Les SVG images/payments/*
   sont 403 (anti-XSS uploads-hardening) ET global.js injecte
   tu-mobile-polish.css sur TOUTES les pages au runtime, dont des resets
   !important sur les patterns [class*="payment-..."] : aucune classe
   payment-* ici. Couleurs reprises de PAYMENT-BADGES-COLOR-01. */
.tu-f-paycard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 24px;
    padding: 5px 9px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
.tu-f-paycard--visa {
    background: #1A1F71;
    border: 1px solid #1A1F71;
    color: #F7B600;
}
.tu-f-paycard--mastercard {
    background: linear-gradient(90deg, #EB001B 0%, #EB001B 50%, #F79E1B 50%, #F79E1B 100%);
    border: 1px solid #B8001B;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.tu-footer-bottom .tu-f-paynote {
    margin: 0 4px 0 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tu-f-muted);
    text-align: right;
}
.tu-footer-bottom .tu-f-paynote strong {
    color: var(--tu-f-ink);
    font-weight: 700;
}
.tu-footer-bottom .footer-climate-badge {
    justify-content: flex-end;
    opacity: 0.9;
}
/* Footer sombre en permanence : variante DARK du badge Climate forcee
   (la light — blanc/vert vif — dominait visuellement la barre). */
.tu-footer-bottom .footer-climate-badge__iframe--light {
    display: none !important;
}
.tu-footer-bottom .footer-climate-badge__iframe--dark {
    display: block !important;
}

/* Tablette 768-1199 : identite + contact en tete, 3 colonnes dessous */
@media (max-width: 1199px) and (min-width: 768px) {
    .footer-grid.tu-footer-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-template-areas:
            "brand brand brand contact contact contact"
            "shop shop info info help help";
        row-gap: 30px;
    }
}

/* Barre inferieure : 2 lignes quand la largeur manque */
@media (max-width: 1366px) {
    .footer-bottom.tu-footer-bottom {
        grid-template-columns: auto auto;
        grid-template-areas:
            "legal legal"
            "copy pay";
        justify-content: space-between;
    }
    .tu-footer-bottom .tu-footer-legal-links {
        justify-content: flex-start;
    }
}

/* Mobile <768 : empilement, cibles tactiles */
@media (max-width: 767px) {
    .footer-grid.tu-footer-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas: "brand" "shop" "info" "help" "contact";
        row-gap: 24px;
    }
    .tu-footer-grid .footer-column ul {
        gap: 4px;
    }
    .tu-footer-grid .footer-column ul li a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 2px 0;
    }
    .footer-bottom.tu-footer-bottom {
        grid-template-columns: 1fr;
        grid-template-areas: "legal" "pay" "copy";
        row-gap: 12px;
        text-align: center;
    }
    .tu-footer-bottom .tu-footer-legal-links {
        justify-content: center;
    }
    .tu-footer-bottom .tu-footer-legal-links a {
        padding: 8px 4px;
    }
    .tu-footer-bottom .tu-footer-payments {
        align-items: center;
        text-align: center;
    }
    .tu-footer-bottom .tu-f-payrow {
        flex-wrap: wrap;
        justify-content: center;
    }
    .tu-footer-bottom .tu-f-paynote {
        text-align: center;
    }
    .tu-footer-bottom .footer-climate-badge {
        justify-content: center;
    }
    .tu-footer-bottom .tu-footer-copyright {
        white-space: normal;
    }
}
@media (max-width: 480px) {
    .footer-grid.tu-footer-grid {
        grid-template-columns: 1fr !important;
        row-gap: 20px;
    }
    /* Badge Climate : sous ~420px l'iframe wrappe sur 2 lignes ;
       h38 fixe couperait la 2e (meme pattern que 33C contenu). */
    .tu-footer-bottom .footer-climate-badge__iframe {
        height: 56px;
    }
}
/* --- ORKYVA-FOOTER-VISUAL-REFINEMENT-02-END --- */


/* --- ORKYVA-FOOTER-POLISH-03B-START --- */
/* [ORKYVA-FOOTER-POLISH-03B 2026-07-24] Lot de finition CIBLE (4 zones) :
   A barre juridique, B alignement paiement, C badge Stripe Climate,
   D contraste CTA "Nous ecrire". Additif scope .tu-footer-* charge APRES
   le bloc 02/03 => override par ordre-source (meme specificite ou +).
   0 changement de contenu / lien / palette / grille superieure. */

/* A. BARRE JURIDIQUE + composition basse -----------------------------
   Racine du wrap accidentel a 1440 : l'ancienne grille 3 zones
   (copy|legal|pay) ecrasait la colonne legale centrale => 4+2 lignes
   desequilibrees avec separateur en tete de ligne. On passe a 2 rangees
   des le desktop : legal PLEINE LARGEUR (les 6 liens sur 1 ligne a 1440),
   puis copyright | paiement. */
@media (min-width: 768px) {
    .footer-bottom.tu-footer-bottom {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "legal legal"
            "copy  pay";
        justify-content: normal;
        row-gap: 16px;
    }
}
/* Separateurs : TRAILING (jamais en tete de ligne) au lieu de leading.
   Chaque <li> = [lien][point] atomique (li nowrap) => toute ligne
   commence par un LIEN, jamais par un point. Le point ne s'affiche pas
   apres le dernier item. */
.tu-footer-bottom .tu-footer-legal-links {
    justify-content: center;
    column-gap: 0;
    row-gap: 6px;
}
.tu-footer-bottom .tu-footer-legal-links li + li::before {
    content: none;
}
.tu-footer-bottom .tu-footer-legal-links li:not(:last-child)::after {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    margin: 0 12px;
}

/* B. ALIGNEMENT / RESPIRATION PAIEMENT -------------------------------
   Cartes et badge Climate partagent deja le bord droit (align flex-end).
   On aere : texte <-> cartes, et rangee cartes <-> badge Climate. */
.tu-footer-bottom .tu-footer-payments {
    gap: 11px;
}
.tu-footer-bottom .tu-f-payrow {
    gap: clamp(10px, 1vw, 14px);
}
.tu-footer-bottom .tu-f-paynote {
    margin-right: 2px;
}

/* C. BADGE STRIPE CLIMATE (composant officiel = iframe cross-origin :
   son INTERIEUR n'est PAS restylable). Objectif : secondaire mais LISIBLE,
   aligne sous les cartes, taille NATIVE.
   [RESTORE-03C 2026-07-24] Le lot 03B appliquait transform:scale(.88) +
   opacity:.7 DIRECTEMENT sur l'iframe : une iframe transformee peut se
   repeindre en blanc / rester instable au lazy-load selon le navigateur
   (badge percu absent en prod) ; scale(.88) + opacity .7 la rendaient
   aussi minuscule et faible (texte sombre du badge dark quasi illisible
   sur footer sombre). CORRECTIF : AUCUN transform sur l'iframe ; taille
   native 380x38 conservee ; alignement bord droit via le wrapper
   (justify-content:flex-end, deja pose bloc 02) ; opacite remontee a .85
   (secondaire mais lisible). Aucune autre regle footer touchee. */
.tu-footer-bottom .footer-climate-badge {
    opacity: 0.85;
}
.tu-footer-bottom .footer-climate-badge__iframe--dark {
    transform: none;
}

/* D. CTA "NOUS ECRIRE" : plus lisible, sobre, accent lagon conserve.
   En dark, body.dark-mode .footer-column a (#B8B8B8 !important) ecrasait
   la couleur => texte grisatre "desactive". On force le texte creme
   (!important pour battre ce !important legacy) ; l'icone garde l'accent
   lagon (accent present), bordure plus franche, voile d'accent au hover. */
.footer .tu-footer-cta,
body.dark-mode .footer .tu-footer-cta {
    border-color: rgba(120, 160, 151, 0.85);
    background: rgba(120, 160, 151, 0.06);
    color: var(--tu-f-ink) !important;
}
.footer .tu-footer-cta i,
body.dark-mode .footer .tu-footer-cta i {
    color: var(--tu-f-accent) !important;
    font-size: 13.5px;
}
.footer .tu-footer-cta:hover,
.footer .tu-footer-cta:focus-visible,
body.dark-mode .footer .tu-footer-cta:hover,
body.dark-mode .footer .tu-footer-cta:focus-visible {
    background: rgba(120, 160, 151, 0.16);
    border-color: rgba(120, 160, 151, 1);
    color: #FFFFFF !important;
}
.footer .tu-footer-cta:hover i,
.footer .tu-footer-cta:focus-visible i,
body.dark-mode .footer .tu-footer-cta:hover i,
body.dark-mode .footer .tu-footer-cta:focus-visible i {
    color: var(--tu-f-ink) !important;
}
.footer .tu-footer-cta:focus-visible {
    outline: 2px solid rgba(120, 160, 151, 0.9);
    outline-offset: 3px;
}

/* Mobile <768 : barre juridique — sur mobile elle wrappe toujours ; on RETIRE les
   points (sinon un point "pend" en fin de ligne) et on espace par un
   gap reel => paragraphe centre propre, aucun separateur en tete NI en
   queue de ligne. Desktop conserve les points (ligne unique, sans pendu). */
@media (max-width: 767px) {
    .tu-footer-bottom .tu-footer-legal-links {
        column-gap: 12px;
        row-gap: 2px;
    }
    .tu-footer-bottom .tu-footer-legal-links li:not(:last-child)::after {
        content: none;
    }
    .tu-footer-bottom .tu-footer-legal-links a {
        padding: 8px 2px;
    }
}
/* --- ORKYVA-FOOTER-POLISH-03B-END --- */