/* ============================================================
   DENMAR-TECH · Tokens de design pour Elementor Pro
   ------------------------------------------------------------
   Version 1.1 · Classes AUTONOMES compatibles Elementor V4
   Chaque variante contient TOUS les styles nécessaires —
   une seule classe suffit dans le champ "Classes" du widget.
   ============================================================ */

:root {

  /* ---------- COULEURS DE MARQUE ---------- */
  --navy:          #0F4C81;
  --navy-2:        #082A4D;
  --navy-3:        #051A33;
  --navy-light:    #E8F0F9;

  /* ---------- ACCENT / CTA ---------- */
  --orange:        #E76F2C;
  --orange-2:      #C45620;
  --orange-light:  #FDEEE3;
  --yellow:        #FFC857;
  --yellow-light:  #FFF5DC;

  /* ---------- SÉMANTIQUE ---------- */
  --red:           #C8102E;
  --red-light:     #FEE2E2;
  --green:         #16A34A;
  --green-light:   #DCFCE7;
  --info:          #0284C7;
  --info-light:    #E0F2FE;

  /* ---------- NEUTRES ---------- */
  --ink:           #1A2540;
  --steel:         #4A5A72;
  --slate:         #64748B;
  --slate-2:       #94A3B8;
  --border:        #E4E9F2;
  --border-2:      #CFD8E3;
  --bg:            #F7F9FC;
  --bg-2:          #EEF2F7;
  --white:         #FFFFFF;

  /* ---------- ÉCHELLE D'ESPACEMENT (4px) ---------- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-8:  32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;

  /* ---------- RAYONS ---------- */
  --r-sm: 4px;   --r-md: 6px;    --r-lg: 8px;
  --r-xl: 12px;  --r-2xl: 16px;  --r-full: 9999px;

  /* ---------- OMBRES ---------- */
  --shadow-sm: 0 1px 3px rgba(15,76,129,.08);
  --shadow:    0 4px 14px rgba(15,76,129,.10);
  --shadow-lg: 0 14px 40px rgba(15,76,129,.15);

  /* ---------- TYPOGRAPHIE ---------- */
  --font-sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --fs-h1: 48px;  --fs-h2: 36px;  --fs-h3: 24px;  --fs-h4: 18px;
  --fs-body: 15px;  --fs-small: 13px;  --fs-caption: 11.5px;

  --lh-tight: 1.1;  --lh-normal: 1.5;  --lh-relaxed: 1.75;

  --t-fast:    150ms cubic-bezier(.4,0,.2,1);
  --t-normal:  250ms cubic-bezier(.4,0,.2,1);
  --t-slow:    400ms cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   BOUTONS · Classes autonomes — 1 seule classe à appliquer
   ------------------------------------------------------------
   Usage : ajoute UN chip dans "Classes" (Elementor V4)
   OU tape le nom dans "CSS Classes" (Elementor classique).

   Ex : dm-btn-orange     ← bouton CTA orange
        dm-btn-primary    ← bouton navy
        dm-btn-outline    ← bouton bordure navy
   ============================================================ */

.dm-btn-primary,
.dm-btn-orange,
.dm-btn-outline,
.dm-btn-ghost,
.dm-btn-danger,
.dm-btn-primary-lg,
.dm-btn-orange-lg,
.dm-btn-outline-lg,
.dm-btn-primary-sm,
.dm-btn-orange-sm {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-lg) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  line-height: 1 !important;
  border: 2px solid transparent !important;
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none !important;
  white-space: nowrap;
}

.dm-btn-primary,
.dm-btn-primary-lg,
.dm-btn-primary-sm {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}
.dm-btn-primary:hover,
.dm-btn-primary-lg:hover,
.dm-btn-primary-sm:hover {
  background: var(--navy-2) !important;
  border-color: var(--navy-2) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.dm-btn-orange,
.dm-btn-orange-lg,
.dm-btn-orange-sm {
  background: var(--orange) !important;
  color: #fff !important;
  border-color: var(--orange) !important;
}
.dm-btn-orange:hover,
.dm-btn-orange-lg:hover,
.dm-btn-orange-sm:hover {
  background: var(--orange-2) !important;
  border-color: var(--orange-2) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.dm-btn-outline,
.dm-btn-outline-lg {
  background: transparent !important;
  color: var(--navy) !important;
  border-color: var(--navy) !important;
}
.dm-btn-outline:hover,
.dm-btn-outline-lg:hover {
  background: var(--navy) !important;
  color: #fff !important;
}

.dm-btn-ghost {
  background: var(--bg) !important;
  color: var(--navy) !important;
}
.dm-btn-ghost:hover { background: var(--bg-2) !important; }

.dm-btn-danger {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}
.dm-btn-danger:hover { background: #A00E24 !important; }

/* Tailles autonomes (grande / petite) — inclut tous les styles */
.dm-btn-primary-lg,
.dm-btn-orange-lg,
.dm-btn-outline-lg {
  padding: 16px 30px !important;
  font-size: 15px !important;
}
.dm-btn-primary-sm,
.dm-btn-orange-sm {
  padding: 8px 14px !important;
  font-size: 12.5px !important;
}

/* ============================================================
   BADGES · Classes autonomes
   Ex : dm-badge-new  · dm-badge-hot · dm-badge-pro
   ============================================================ */

.dm-badge-new,
.dm-badge-hot,
.dm-badge-promo,
.dm-badge-pro,
.dm-badge-stock,
.dm-badge-info,
.dm-badge-outline {
  display: inline-flex !important;
  align-items: center;
  padding: 4px 10px !important;
  border-radius: var(--r-sm) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-family: var(--font-sans) !important;
  line-height: 1.3 !important;
}

.dm-badge-new    { background: var(--green)       !important; color: #fff !important; }
.dm-badge-hot    { background: var(--orange)      !important; color: #fff !important; }
.dm-badge-promo  { background: var(--red)         !important; color: #fff !important; }
.dm-badge-pro    { background: var(--navy)        !important; color: #fff !important; }
.dm-badge-stock  { background: var(--green-light) !important; color: #166534 !important; }
.dm-badge-info   { background: var(--info-light)  !important; color: var(--info) !important; }
.dm-badge-outline{ background: transparent !important; color: var(--navy) !important; border: 1px solid var(--navy) !important; }

/* ============================================================
   CARTES · Classes autonomes
   Ex : dm-card  · dm-card-pro
   ============================================================ */

.dm-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  padding: 24px !important;
  transition: all var(--t-normal);
}
.dm-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--navy) !important;
}

.dm-card-pro {
  background: linear-gradient(135deg, var(--navy-2), var(--navy)) !important;
  color: #fff !important;
  border-radius: var(--r-xl) !important;
  padding: 24px !important;
  border: 1px solid var(--navy-2) !important;
}
.dm-card-pro h1, .dm-card-pro h2, .dm-card-pro h3,
.dm-card-pro h4, .dm-card-pro h5 { color: #fff !important; }

/* ============================================================
   KICKER · Étiquette orange au-dessus des titres
   Ex : dm-kicker (à appliquer à un widget Heading ou Text)
   ============================================================ */

.dm-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: var(--orange) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2.5px !important;
  font-size: 11.5px !important;
  font-family: var(--font-sans) !important;
  margin-bottom: 14px;
}
.dm-kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

/* ============================================================
   INDICATEUR STOCK
   Ex : dm-stock
   ============================================================ */

.dm-stock {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--green) !important;
  background: var(--green-light) !important;
  padding: 6px 12px !important;
  border-radius: var(--r-md) !important;
}
.dm-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(22,163,74,.2);
  flex-shrink: 0;
}

/* ============================================================
   CODE SKU · Texte monospace pour codes produits
   Ex : dm-sku
   ============================================================ */

.dm-sku {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--slate) !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
}

/* ============================================================
   PRIX PRODUIT
   Ex : dm-price
   ============================================================ */

.dm-price {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1 !important;
  display: inline-block;
}
.dm-price small {
  font-size: 11px;
  color: var(--slate);
  font-weight: 500;
  display: block;
  margin-top: 3px;
}

/* ============================================================
   SECTIONS
   Ex : dm-section-light  ·  dm-section-dark
   ============================================================ */

.dm-section-light {
  background: var(--bg) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.dm-section-dark {
  background: var(--navy-3) !important;
  color: #fff !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.dm-section-dark h1, .dm-section-dark h2, .dm-section-dark h3,
.dm-section-dark h4, .dm-section-dark h5, .dm-section-dark p { color: #fff !important; }

/* ============================================================
   ALERTES
   Ex : dm-alert-info  dm-alert-success  dm-alert-warning  dm-alert-error
   ============================================================ */

.dm-alert-info, .dm-alert-success, .dm-alert-warning, .dm-alert-error {
  padding: 14px 18px !important;
  border-radius: var(--r-lg) !important;
  font-size: 14px !important;
  border-left: 4px solid !important;
  margin-bottom: 12px;
}
.dm-alert-info    { background: var(--info-light)   !important; color: #0C4A6E !important; border-left-color: var(--info) !important; }
.dm-alert-success { background: var(--green-light)  !important; color: #166534 !important; border-left-color: var(--green) !important; }
.dm-alert-warning { background: var(--yellow-light) !important; color: #854D0E !important; border-left-color: var(--yellow) !important; }
.dm-alert-error   { background: var(--red-light)    !important; color: #9B1C1C !important; border-left-color: var(--red) !important; }

/* ============================================================
   HEADER · Classes spécifiques à la construction du header
   ------------------------------------------------------------
   Usage : appliquer 1 classe par container / widget dans
   "Classes CSS" d'Elementor.
   ============================================================ */

/* ---- Barre utilitaire (top navy) ---- */
.dm-header-utility {
  background: var(--navy-3) !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  min-height: 38px;
}
.dm-header-utility, .dm-header-utility p, .dm-header-utility span {
  color: #CBD5E1 !important;
  font-size: 12.5px !important;
  font-family: var(--font-sans);
  margin: 0;
}
.dm-header-utility a { color: #CBD5E1 !important; transition: color .15s; text-decoration: none; }
.dm-header-utility a:hover { color: #fff !important; }
.dm-header-utility b,
.dm-header-utility strong { color: #fff !important; font-weight: 600; }

/* Pastille verte animée · à mettre AVANT le texte "Expédition aujourd'hui" */
.dm-pulse-dot {
  display: inline-block !important;
  width: 8px;
  height: 8px;
  background: var(--green) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 4px rgba(22,163,74,.2);
  animation: dmPulse 2s infinite;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}
@keyframes dmPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(22,163,74,.2); }
  50%      { box-shadow: 0 0 0 8px rgba(22,163,74,.05); }
}

/* ---- Header principal (sticky blanc) ---- */
.dm-header-main {
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ---- Barre de recherche header ---- */
.dm-search-box {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 30px !important;
  padding: 9px 18px !important;
  color: var(--slate) !important;
  font-size: 13px !important;
  min-width: 220px;
  font-family: var(--font-sans);
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  transition: all .15s;
  cursor: text;
}
.dm-search-box:hover {
  border-color: var(--navy) !important;
  color: var(--ink) !important;
}

/* ---- Boutons ronds icônes (compte, favoris, panier) ---- */
.dm-icon-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: var(--bg) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--ink) !important;
  transition: background .15s;
  position: relative;
  border: 0 !important;
  cursor: pointer;
  font-size: 16px !important;
}
.dm-icon-btn:hover { background: var(--bg-2) !important; }

/* Badge orange au coin du panier (à mettre dans un span imbriqué) */
.dm-cart-badge {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  background: var(--orange) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 18px;
  height: 18px;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ---- Nav menu Elementor · look Denmar ---- */
.dm-nav-menu ul.elementor-nav-menu > li > a,
.dm-nav-menu ul li a {
  padding: 10px 16px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  border-radius: 5px !important;
  transition: all .15s;
  font-family: var(--font-sans) !important;
}
.dm-nav-menu ul.elementor-nav-menu > li > a:hover,
.dm-nav-menu ul li a:hover {
  background: var(--bg) !important;
  color: var(--navy) !important;
}

/* ============================================================
   FIX v1.2 · Boutons icônes ronds compatibles widget Icon Elementor
   ------------------------------------------------------------
   Problème corrigé : la classe .dm-icon-btn appliquée au widget
   Icon d'Elementor ne pouvait pas atteindre l'élément .elementor-icon
   imbriqué à 3 niveaux. Ces sélecteurs ciblent maintenant tous les
   cas d'usage.

   Fonctionne pour :
   • Widget HTML avec <a class="dm-icon-btn">...</a>
   • Widget Icon Elementor (Classes CSS = dm-icon-btn)
   • Widget Icon Box Elementor
   ============================================================ */

/* Cas 1 : élément direct (Widget HTML, lien, span) */
.dm-icon-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50% !important;
  background: var(--bg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ink) !important;
  transition: background .15s !important;
  position: relative;
  border: 0 !important;
  cursor: pointer;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* Cas 2 : appliqué au widget Icon Elementor.
   La classe est sur le conteneur externe — on cible l'.elementor-icon
   imbriquée qui est en fait le cercle visible. */
.elementor-widget-icon.dm-icon-btn .elementor-icon-wrapper {
  display: inline-block;
}
.elementor-widget-icon.dm-icon-btn .elementor-icon,
.dm-icon-btn .elementor-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: var(--bg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ink) !important;
  transition: background .15s !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative;
}

/* Taille des SVG et icônes Font Awesome à l'intérieur */
.dm-icon-btn svg,
.dm-icon-btn i,
.dm-icon-btn .elementor-icon svg,
.dm-icon-btn .elementor-icon i {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  fill: var(--ink) !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Hover — sur tous les cas */
.dm-icon-btn:hover,
.dm-icon-btn:hover .elementor-icon,
.dm-icon-btn .elementor-icon:hover,
.elementor-widget-icon.dm-icon-btn:hover .elementor-icon {
  background: var(--bg-2) !important;
}

/* ============================================================
   FIX v1.2 · Search box compatible widget HTML Elementor
   ============================================================ */

.dm-search-box,
.dm-search-box * {
  color: var(--slate) !important;
  font-size: 13px !important;
}
.dm-search-box {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 30px !important;
  padding: 10px 18px !important;
  min-width: 220px;
  font-family: var(--font-sans) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all .15s !important;
  cursor: text;
  line-height: 1 !important;
}
.dm-search-box:hover {
  border-color: var(--navy) !important;
}
.dm-search-box:hover, .dm-search-box:hover * {
  color: var(--ink) !important;
}

/* ============================================================
   FIX v1.3 · Widgets header dynamiques
   ------------------------------------------------------------
   Styles pour les shortcodes [dm_search_box], [dm_cart_button],
   [dm_account_button], [dm_quote_button].
   ============================================================ */

/* Vraie barre de recherche (form + input) */
.dm-search-form {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 30px !important;
  padding: 8px 8px 8px 18px !important;
  min-width: 240px;
  max-width: 320px;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all .15s !important;
  margin: 0 !important;
}
.dm-search-form:hover,
.dm-search-form:focus-within {
  border-color: var(--navy) !important;
  background: #fff !important;
}
.dm-search-icon {
  color: var(--slate) !important;
  font-size: 14px !important;
  flex-shrink: 0;
  line-height: 1;
}
.dm-search-input {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  flex: 1 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  padding: 0 !important;
  min-width: 120px;
  height: auto !important;
}
.dm-search-input::placeholder {
  color: var(--slate) !important;
  opacity: 1 !important;
}
.dm-search-submit {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
}
.dm-search-hint {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  background: #fff !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: 1px solid var(--border) !important;
  color: var(--slate) !important;
  font-weight: 500;
  line-height: 1;
}
.dm-search-form:focus-within .dm-search-hint {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}

/* Cart button (shortcode) — dérive de .dm-icon-btn */
.dm-cart-button,
.dm-quote-button {
  position: relative !important;
  text-decoration: none !important;
}
.dm-cart-button .dm-cart-icon,
.dm-quote-button > span[aria-hidden] {
  font-size: 16px !important;
  line-height: 1;
}

/* ============================================================
   FIX v1.6 · Emojis dans les boutons icônes
   ------------------------------------------------------------
   Utilise "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"
   pour garantir le rendu coloré natif quel que soit l'OS.
   Taille contrôlée à 18px pour ne pas coller aux bords du cercle 42px.
   ============================================================ */

.dm-icon-btn > span[aria-hidden],
.dm-icon-btn .dm-cart-icon,
.dm-icon-btn .dm-search-icon,
.dm-search-form .dm-search-icon {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Twemoji Mozilla", "EmojiSymbols", sans-serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-style: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Search icon spécifique (dans le form) — un peu plus petit */
.dm-search-form .dm-search-icon {
  font-size: 15px !important;
}

/* ============================================================
   FIX v1.7 · Tooltip stylisé pour boutons icônes
   ------------------------------------------------------------
   S'affiche au hover sur tout élément avec attribut data-tooltip.
   ============================================================ */

[data-tooltip] {
  position: relative;
}
[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
  z-index: 999;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: -8px;
  left: 50%;
  transform: translate(-50%, 100%) translateY(-4px);
  background: var(--navy-2);
  color: #fff !important;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  white-space: nowrap;
  line-height: 1.3 !important;
  box-shadow: 0 4px 12px rgba(15,37,66,.2);
}
[data-tooltip]::after {
  content: "";
  bottom: -8px;
  left: 50%;
  transform: translate(-50%, 100%) translateY(-8px);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--navy-2);
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translate(-50%, 100%) translateY(0);
}

/* ============================================================
   FOOTER · Composants de pied de page
   ------------------------------------------------------------
   Extrait de la maquette V3 hybride.
   Chaque classe est autonome — une seule à appliquer par élément
   dans le champ "Classes CSS" d'Elementor.
   ============================================================ */

/* ---- Wrapper Footer (le container principal) ---- */
.dm-footer {
  background: var(--navy-3) !important;
  color: #94A3B8 !important;
  padding-top: 70px !important;
  padding-bottom: 0 !important;
}
/*.dm-footer * { color: #94A3B8; }*/
.dm-footer h1, .dm-footer h2, .dm-footer h3,
.dm-footer h4, .dm-footer h5, .dm-footer h6,
.dm-footer strong, .dm-footer b { color: #fff !important; }

/* ---- Newsletter card (le gros bloc dégradé en haut du footer) ---- */
.dm-footer-newsletter {
  background: linear-gradient(135deg, var(--navy-2), var(--navy)) !important;
  border-radius: var(--r-2xl) !important;
  padding: 32px 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px !important;
  flex-wrap: wrap;
  margin-bottom: 60px !important;
  color: #fff !important;
}
.dm-footer-newsletter h1,
.dm-footer-newsletter h2,
.dm-footer-newsletter h3 {
  color: #fff !important;
  font-size: 24px !important;
  font-family: var(--font-display) !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}
.dm-footer-newsletter p {
  color: rgba(255,255,255,.8) !important;
  font-size: 14px !important;
  margin: 0;
}

/* ---- Formulaire newsletter inline (input + bouton) ---- */
.dm-footer-newsletter-form {
  display: flex !important;
  gap: 8px !important;
  background: #fff !important;
  padding: 6px !important;
  border-radius: var(--r-lg) !important;
  min-width: 380px;
  align-items: center !important;
}
.dm-footer-newsletter-form input[type="email"],
.dm-footer-newsletter-form input[type="text"] {
  flex: 1 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  outline: none !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  color: var(--ink) !important;
  background: transparent !important;
  min-width: 180px;
}
.dm-footer-newsletter-form input::placeholder {
  color: var(--slate) !important;
  opacity: 1 !important;
}
.dm-footer-newsletter-form button[type="submit"],
.dm-footer-newsletter-form .dm-nl-submit {
  padding: 10px 22px !important;
  background: var(--orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  cursor: pointer;
  transition: background var(--t-fast);
  white-space: nowrap;
}
.dm-footer-newsletter-form button[type="submit"]:hover,
.dm-footer-newsletter-form .dm-nl-submit:hover {
  background: var(--orange-2) !important;
}

/* ---- Grille principale 5 colonnes ---- */
.dm-footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
  gap: 40px !important;
  padding-bottom: 40px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* ---- Colonne Brand (première colonne : logo + description + adresse) ---- */
.dm-footer-brand p {
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  margin: 0 0 18px !important;
  max-width: 300px;
  color: #94A3B8 !important;
}
.dm-footer-brand address {
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.7 !important;
  color: #CBD5E1 !important;
}
.dm-footer-brand address b {
  color: #fff !important;
  display: block;
  margin-bottom: 4px;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600 !important;
}

/* ---- Cartouche blanc pour le logo dans le footer sombre ---- */
.dm-footer-logo-block {
  background: #fff !important;
  padding: 10px 15px !important;
  border-radius: var(--r-md) !important;
  display: inline-flex !important;
  align-self: flex-start;
  margin-bottom: 10px !important;
}
.dm-footer-logo-block img {
  height: 62px !important;
  width: auto !important;
  display: block;
}

/* ---- Row de social icons ---- */
.dm-footer-social {
  display: flex !important;
  gap: 8px !important;
  margin-top: 18px !important;
}
.dm-social-ico {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--r-lg) !important;
  background: rgba(255,255,255,.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: background var(--t-fast);
  text-decoration: none !important;
}
.dm-social-ico:hover {
  background: var(--orange) !important;
}

/* ---- Titre de colonne H5 du footer ---- */
.dm-footer-heading {
  color: #fff !important;
  font-size: 12.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin: 0 0 18px !important;
  font-weight: 700 !important;
  font-family: var(--font-sans) !important;
}

/* ---- Liste de liens du footer ---- */
.dm-footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.dm-footer-links li {
  margin-bottom: 10px !important;
  list-style: none !important;
}
.dm-footer-links a {
  color: #94A3B8 !important;
  font-size: 13.5px !important;
  transition: color var(--t-fast);
  text-decoration: none !important;
}
.dm-footer-links li a:hover {
  color: #fff !important;
}

/* ---- Barre du bas (copyright + legal + payment) ---- */
.dm-footer-bottom {
  padding: 22px 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 14px !important;
  font-size: 12.5px !important;
  color: #94A3B8 !important;
}
.dm-footer-bottom span,
.dm-footer-bottom p { color: #94A3B8 !important; margin: 0; }
.dm-footer-legal {
  display: flex !important;
  gap: 22px !important;
  flex-wrap: wrap;
  color: #fff !important;
}
.dm-footer-legal a {
  color: #94A3B8 !important; 
  font-size: 12.5px !important;
  text-decoration: none !important;
  transition: color var(--t-fast);
}
.dm-footer-legal a:hover { color: #fff !important; }

/* ---- Icônes de paiement ---- */
.dm-pay-icons {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap;
}
.dm-pay-ico {
  width: 42px !important;
  height: 28px !important;
  background: #fff !important;
  border-radius: var(--r-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--navy-2) !important;
  letter-spacing: .5px !important;
  font-family: var(--font-sans) !important;
}

/* ---- Responsive Footer ---- */
@media (max-width: 1100px) {
  .dm-footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dm-footer-newsletter { padding: 24px !important; }
  .dm-footer-newsletter-form { min-width: 100%; }
}
@media (max-width: 720px) {
  .dm-footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .dm-footer-bottom { flex-direction: column; text-align: center; }
  .dm-footer { padding-top: 40px !important; }
}

/* ============================================================
   COMPATIBILITÉ · Responsive Visibility Elementor Pro
   ------------------------------------------------------------
   Ce bloc doit toujours rester EN FIN de fichier pour bénéficier
   de la source-order priority.

   Il rétablit la visibilité conditionnelle par device gérée par
   Elementor Pro (« Masquer sur Ordinateur / Tablette / Mobile »)
   qui serait sinon écrasée par nos règles `display: … !important`
   sur les composants (.dm-btn-*, .dm-icon-btn, .dm-badge-*, etc.).

   Règle de style à respecter dorénavant :
   → n'utiliser `!important` sur `display` qu'en absolue nécessité
   → si on doit l'utiliser, penser à ajouter un `:not(.elementor-hidden-*)`
     sur la règle, ou compter sur ce bloc pour rattraper.
   ============================================================ */

/* Elementor Classic (V3) — classes de masquage par breakpoint */
@media (max-width: 767px) {
  .elementor-hidden-mobile,
  .elementor-hidden-phone,
  .e-hidden-mobile,
  .hidden-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 880px) {
  .elementor-hidden-mobile_extra,
  .e-hidden-mobile_extra { display: none !important; }
}
@media (min-width: 881px) and (max-width: 1024px) {
  .elementor-hidden-tablet,
  .e-hidden-tablet { display: none !important; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .elementor-hidden-tablet_extra,
  .e-hidden-tablet_extra,
  .elementor-hidden-laptop { display: none !important; }
}
@media (min-width: 1201px) and (max-width: 2399px) {
  .elementor-hidden-desktop,
  .e-hidden-desktop { display: none !important; }
}
@media (min-width: 2400px) {
  .elementor-hidden-widescreen,
  .e-hidden-widescreen { display: none !important; }
}

/* Filet de sécurité universel — quel que soit le breakpoint,
   ces classes utilitaires forcent la disparition */
.dmt-hide,
.elementor-hidden { display: none !important; }