/* =================================================================
   DISPROTECH — Intégration maquette (header + homepage)
   Préfixe : dth-
   Calibré au pixel sur la maquette 1536 px de large.
   Chargé APRÈS custom.css → écrase les anciennes règles .dt-*
   ================================================================= */

:root {
  --dth-navy:        #16306B;   /* titres, barre réassurance, cartes sombres */
  --dth-navy-deep:   #0F2450;
  --dth-blue:        #1160D8;   /* accent, boutons, "BONNES SOLUTIONS" */
  --dth-blue-hover:  #0D4FB4;
  --dth-red:         #DA291C;   /* croix suisse */

  --dth-bg:          #F1F4F9;   /* fond de page sous le hero */
  --dth-surface:     #FFFFFF;
  --dth-surface-alt: #EDF2FA;   /* carte "acheteur indépendant" */

  --dth-text:        #22376B;
  --dth-muted:       #6B7A99;
  --dth-muted-2:     #4A5C80;

  --dth-line:        #E3E9F2;
  --dth-line-2:      #C6D0E0;

  --dth-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --dth-r:      3px;
  --dth-r-md:   4px;
  --dth-sh-sm:  0 1px 3px rgba(16, 48, 107, .05);
  --dth-sh:     0 2px 10px rgba(16, 48, 107, .07);
  --dth-sh-lg:  0 10px 40px rgba(16, 48, 107, .13);

  --dth-container: 1536px;
  --dth-gutter:    24px;

  --dth-ease: cubic-bezier(.4, 0, .2, 1);
}

.dth,
.dth-header {
  font-family: var(--dth-font);
  -webkit-font-smoothing: antialiased;
}
.dth *, .dth *::before, .dth *::after,
.dth-header *, .dth-header *::before, .dth-header *::after { box-sizing: border-box; }

.dth-container {
  width: 100%;
  max-width: var(--dth-container);
  margin: 0 auto;
  padding: 0 var(--dth-gutter);
}

.dth-icon { display: block; flex: none; stroke-width: 1.6; }

/* Le wrapper PrestaShop ne doit rien ajouter autour du hero (full-bleed) */
body#index #wrapper {
  padding: 0 !important;
  background: var(--dth-bg);
  max-width: none;
  overflow-x: hidden;   /* la barre réassurance déborde à gauche par design */
}
body#index #wrapper > .container,
body#index #wrapper > .container-md { max-width: none; padding: 0; }
body#index .breadcrumb { display: none !important; }


/* =================================================================
   1. HEADER  (hauteur 100 px)
   ================================================================= */

/* Le header natif Hummingbird reste en place sous 1200px (menu mobile,
   offcanvas recherche, panier) — masqué au-delà au profit du nôtre. */
.dth-header { display: none; }
@media (min-width: 1200px) {
  #header .header-top,
  #header .header-bottom,
  #header .header__banner,
  #header .dth-native-nav { display: none !important; }
  /* #header porte déjà position:sticky (custom.css) — on ne l'imbrique pas */
  #header { padding: 0 !important; }
  .dth-header { display: block; }
}

.dth-header {
  position: relative;   /* ancre le panneau de résultats .dth-so */
  background: var(--dth-surface);
  border-bottom: 1px solid var(--dth-line);
}
.dth-header__inner {
  position: relative;
  z-index: 60;   /* au-dessus du voile de recherche (50), sous le panneau (70) */
  height: 100px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ── Logo (fichier fourni, détouré : assets/img/dt-logo.png) ── */
.dth-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.dth-logo img {
  display: block;
  height: 56px;
  width: auto;
}

/* Drapeau suisse — encore utilisé dans le bandeau « Ils nous font confiance » */
.dth-flag {
  display: inline-grid;
  place-items: center;
  background: var(--dth-red);
  flex: none;
}
.dth-flag svg { fill: #fff; }

/* ── Navigation univers ── */
/* Alignée à gauche juste après le logo (et non centrée) : c'est le calage
   de la maquette — la respiration est laissée entre la nav et les actions. */
.dth-nav {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1 1 auto;
  margin: 0 0 0 22px;
  padding: 0;
  list-style: none;
}
.dth-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  min-width: 84px;
  text-decoration: none;
  border-radius: var(--dth-r-md);
  transition: background var(--dth-ease) 160ms;
}
.dth-nav__link:hover { background: #F4F7FC; }
.dth-nav__link svg { width: 23px; height: 23px; color: var(--dth-navy); }
.dth-nav__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.15;
  color: var(--dth-navy);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.dth-nav__sub {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dth-muted);
  text-transform: none;
  margin-top: 2px;
}

/* ── Barre de recherche desktop ──────────────────────────────────────
   Remplace l'ancien lien « Rechercher » (icône seule) : le widget natif
   ps_searchbar est masqué ≥1200px avec .header-bottom, il fallait donc un
   champ ici. Largeur souple : se comprime avant la nav quand la fenêtre
   descend vers 1200px. */
.dth-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 300px;
  min-width: 168px;
  height: 42px;
  padding: 0 6px 0 14px;
  background: #F4F7FC;
  border: 1px solid var(--dth-line-2);
  border-radius: 999px;
  transition: border-color var(--dth-ease) 160ms, background var(--dth-ease) 160ms;
}
.dth-search:focus-within {
  background: var(--dth-surface);
  border-color: var(--dth-blue);
}
.dth-search__icon {
  width: 19px;
  height: 19px;
  color: var(--dth-muted);
  flex: none;
}
.dth-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--dth-navy);
}
.dth-search__input::placeholder { color: var(--dth-muted); opacity: 1; }
/* Croix native Chrome/Safari : redondante avec le champ arrondi */
.dth-search__input::-webkit-search-decoration,
.dth-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.dth-search__submit {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--dth-blue);
  color: #fff;
  cursor: pointer;
  transition: background var(--dth-ease) 160ms;
}
.dth-search__submit:hover { background: var(--dth-blue-hover); }
.dth-search__submit svg { width: 17px; height: 17px; color: #fff; }

/* ── Panneau de résultats instantanés (plein largeur) ────────────────
   Ancré sous le header, qui est sticky : le panneau le suit au scroll. */
.dth-so {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 100px);
  background: var(--dth-surface);
  border-top: 1px solid var(--dth-line);
  box-shadow: 0 24px 50px rgba(16, 48, 107, .18);
  animation: dth-so-in 180ms var(--dth-ease);
}
.dth-so[hidden] { display: none; }

@keyframes dth-so-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.dth-so__backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(11, 26, 56, .38);
  backdrop-filter: blur(1.5px);
  animation: dth-so-fade 180ms var(--dth-ease);
}
.dth-so__backdrop[hidden] { display: none; }
@keyframes dth-so-fade { from { opacity: 0; } to { opacity: 1; } }

body.dth-so-open { overflow: hidden; }

/* Barre d'outils */
.dth-so__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 11px var(--dth-gutter);
  border-bottom: 1px solid var(--dth-line);
  background: var(--dth-surface);
}
.dth-so__views { display: flex; gap: 4px; }
.dth-so__view {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--dth-r-md);
  background: none;
  color: var(--dth-muted);
  cursor: pointer;
  transition: color var(--dth-ease) 140ms, background var(--dth-ease) 140ms;
}
.dth-so__view svg { width: 17px; height: 17px; }
.dth-so__view:hover { background: #F4F7FC; color: var(--dth-navy); }
.dth-so__view.is-active {
  background: #EAF1FD;
  border-color: #CFE0FA;
  color: var(--dth-blue);
}
.dth-so__count {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dth-navy);
  letter-spacing: .01em;
}
.dth-so__close {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--dth-muted);
  cursor: pointer;
  transition: background var(--dth-ease) 140ms, color var(--dth-ease) 140ms;
}
.dth-so__close svg { width: 19px; height: 19px; }
.dth-so__close:hover { background: #F1F4F9; color: var(--dth-navy); }

/* Corps scrollable */
.dth-so__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--dth-gutter) 22px;
}

/* Grille : cellules jointives séparées par un filet, façon catalogue */
.dth-so__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  border-top: 1px solid var(--dth-line);
  border-left: 1px solid var(--dth-line);
}
.dth-so__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 14px 22px;
  border-right: 1px solid var(--dth-line);
  border-bottom: 1px solid var(--dth-line);
  color: var(--dth-text);
  transition: background var(--dth-ease) 140ms, box-shadow var(--dth-ease) 140ms;
}
.dth-so__cell:hover,
.dth-so__cell:focus-within {
  background: #F7FAFF;
  box-shadow: inset 0 0 0 2px var(--dth-blue);
  z-index: 1;
}
.dth-so__media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 132px;
}
.dth-so__media img {
  max-width: 100%;
  max-height: 132px;
  object-fit: contain;
  mix-blend-mode: multiply;   /* gomme les fonds blancs des packshots */
}
.dth-so__media.is-empty {
  background: #F4F7FC;
  border-radius: var(--dth-r-md);
}
.dth-so__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.dth-so__brand {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dth-blue);
}
/* Lien étiré : toute la cellule est cliquable, le bouton d'ajout passe devant */
.dth-so__link {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dth-navy);
  text-decoration: none;
  outline: none;
}
.dth-so__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.dth-so__link:hover { color: var(--dth-blue); }
.dth-so__mark {
  padding: 0;
  background: #DCEAFE;
  color: inherit;
  border-radius: 2px;
}
.dth-so__ref {
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--dth-muted);
  text-transform: uppercase;
}
.dth-so__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}
/* En grille, une donnée absente ne doit pas laisser d'espace ; en liste, si
   (voir plus bas) : la colonne doit rester alignée d'une ligne à l'autre. */
.dth-so__brand:empty,
.dth-so__ref:empty { display: none; }

/* Ajout rapide : révélé au survol de la cellule, toujours visible au focus */
.dth-so__add {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--dth-navy);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dth-ease) 140ms, transform var(--dth-ease) 140ms, background var(--dth-ease) 140ms;
}
.dth-so__add svg { width: 14px; height: 14px; }
.dth-so__cell:hover .dth-so__add,
.dth-so__cell:focus-within .dth-so__add,
.dth-so__add:focus-visible { opacity: 1; transform: none; }
.dth-so__add:hover { background: var(--dth-blue); }
.dth-so__add.is-busy { opacity: 1; transform: none; background: var(--dth-muted); cursor: wait; }
.dth-so__add.is-done { opacity: 1; transform: none; background: #2E9A63; }
.dth-so__add.is-error { opacity: 1; transform: none; background: var(--dth-red); }

/* Sur écran tactile, pas de survol : le bouton reste visible */
@media (hover: none) {
  .dth-so__add { opacity: 1; transform: none; }
}

/* Vue liste */
.dth-so.is-list .dth-so__grid { grid-template-columns: 1fr; }
.dth-so.is-list .dth-so__cell {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
}
.dth-so.is-list .dth-so__media { width: 56px; height: 56px; flex: none; }
.dth-so.is-list .dth-so__media img { max-height: 56px; }
.dth-so.is-list .dth-so__info {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  text-align: left;
}
/* Colonnes fixes : les prix et références s'alignent d'une ligne à l'autre */
.dth-so.is-list .dth-so__brand {
  flex: none;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dth-so.is-list .dth-so__link { flex: 1 1 auto; }
.dth-so.is-list .dth-so__ref  { flex: none; width: 110px; text-align: right; }
.dth-so.is-list .dth-so__meta { flex: none; width: 150px; margin-top: 0; justify-content: flex-end; }
.dth-so.is-list .dth-so__brand:empty,
.dth-so.is-list .dth-so__ref:empty { display: block; }   /* colonne conservée */
.dth-so.is-list .dth-so__add {
  position: static;
  flex: none;
  opacity: 1;
  transform: none;
}

/* Squelettes de chargement */
.dth-so__cell--skeleton { pointer-events: none; }
.dth-so__sk-img,
.dth-so__sk-line {
  width: 100%;
  border-radius: var(--dth-r-md);
  background: linear-gradient(90deg, #EEF2F8 25%, #F7F9FC 37%, #EEF2F8 63%);
  background-size: 400% 100%;
  animation: dth-so-shimmer 1.3s ease-in-out infinite;
}
.dth-so__sk-img { height: 132px; }
.dth-so__sk-line { height: 10px; }
.dth-so__sk-line--short { width: 55%; }
@keyframes dth-so-shimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}
.dth-so.is-list .dth-so__sk-img { width: 56px; height: 56px; flex: none; }

/* Aucun résultat */
.dth-so__empty {
  margin: 0;
  padding: 46px 0 40px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dth-muted-2);
}
.dth-so__empty[hidden] { display: none; }
.dth-so__empty strong { color: var(--dth-navy); }
.dth-so__empty span { font-size: 13px; color: var(--dth-muted); }

/* Pied : bascule vers la page de résultats complète */
.dth-so__footer {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.dth-so__footer[hidden] { display: none; }
.dth-so__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--dth-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dth-ease) 160ms;
}
.dth-so__all:hover { background: var(--dth-blue); color: #fff; }
.dth-so__all svg { width: 16px; height: 16px; }

/* ── Actions (compte / panier) ── */
.dth-actions {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  flex: none;
}
.dth-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
}
.dth-action svg { width: 23px; height: 23px; color: var(--dth-navy); }
.dth-action__label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--dth-muted);
  white-space: nowrap;
}
.dth-action__icon { position: relative; }
.dth-action__badge {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--dth-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}


/* =================================================================
   2. HERO
   ================================================================= */

.dth-hero-block { position: relative; }

/* ── Hero ─────────────────────────────────────────────────────────────
   Le visuel fourni est en 1.73 (1651 × 953) alors que la bande du hero est
   en ~2.74 : en `cover` on perdait soit le sommet du Cervin, soit la base
   des produits — plus d'un tiers de la hauteur.

   Le fichier livré (2282 × 833) est donc préparé en amont : vide retiré en
   haut et en bas, puis paysage PROLONGÉ vers la gauche par une reprise
   miroir fondue de sa partie gauche. La composition n'est jamais recadrée,
   la zone ajoutée tombe sous le voile blanc du titre, et le CSS reste un
   simple `cover`.

   ⚠ Nouveau visuel = refaire cette préparation (voir le script dans
     l'historique), sinon le cadrage repartira en `cover` destructeur. */
.dth-hero {
  position: relative;
  /* Le plafond suit le ratio du fichier (36.6vw) jusqu'à 730px, soit ~2000px
     de large : au-delà, `cover` recadre par le haut et mange le sommet du
     Cervin. Un plafond plus bas (615px comme avant) le coupait dès 1685px. */
  min-height: clamp(445px, 36.6vw, 730px);
  background-color: #B7D2F0;
  background-image: url('../img/dt-hero-bg.jpg?v=7');
  background-size: cover;
  background-position: center bottom;
  overflow: hidden;
}
/* Voile blanc dégradé côté gauche pour la lisibilité du titre.
   Ramp resserré depuis que les produits sont décalés à gauche (ils démarrent
   à ~32 % de la largeur) : dense jusqu'au bout du chapô, puis chute vite pour
   ne pas laiter le bidon et son étiquette. Toucher aux deux à la fois — un
   voile plus large délave les produits, plus court et le titre devient
   illisible sur les montagnes. */
.dth-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.95) 26%,
    rgba(255,255,255,.80) 33%,
    rgba(255,255,255,.28) 38%,
    rgba(255,255,255,.05) 44%,
    rgba(255,255,255,0)   51%);
}
.dth-hero__container {
  position: relative;
  z-index: 2;
  min-height: 445px;
  display: flex;
  align-items: flex-start;
}

/* ── Colonne texte ── */
.dth-hero__copy {
  padding-top: 28px;
  max-width: 640px;
  flex: none;
}
.dth-hero__eyebrow {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-hero__title {
  margin: 0;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.017em;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-hero__title em {
  font-style: normal;
  color: var(--dth-blue);
  display: block;
}
.dth-hero__lead {
  margin: 18px 0 0;
  max-width: 545px;   /* chapô sur 2 lignes, comme la maquette */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--dth-text);
}

/* ── 3 preuves ── */
.dth-proofs {
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.dth-proof {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-right: 26px;
}
.dth-proof + .dth-proof {
  padding-left: 26px;
  border-left: 1px solid var(--dth-line-2);
}
.dth-proof svg { width: 33px; height: 33px; color: var(--dth-navy); stroke-width: 1.4; }
.dth-proof__title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: .015em;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-proof__text {
  margin: 1px 0 0;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--dth-muted-2);
}

/* ── Barre réassurance navy (moitié gauche, ancrée en bas du hero) ── */
/* La bande saigne jusqu'au bord gauche de l'écran, mais son premier item doit
   s'aligner sur le titre du hero. On recalcule donc ici la marge latérale du
   container : une largeur figée (758px) se décalait dès que le viewport
   dépassait 1536px et que le container commençait à se centrer. */
.dth-reassurance {
  --dth-content: calc(min(var(--dth-container), 100%) - var(--dth-gutter) * 2);
  --dth-side:    calc((100% - var(--dth-content)) / 2);

  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  height: 68px;
  width: calc(var(--dth-side) + max(700px, var(--dth-content) * .493));
  padding-left: var(--dth-side);
  background: var(--dth-navy);
  display: flex;
}
.dth-reassurance__row {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Largeur au contenu (pas 4 colonnes égales) : c'est ce que fait la maquette,
   et ça évite que "PRODUITS DE QUALITÉ" passe sur deux lignes. */
.dth-reassurance__item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  padding: 0 14px;
  min-width: 0;
}
.dth-reassurance__item:first-child { padding-left: 0; }
.dth-reassurance__item + .dth-reassurance__item {
  border-left: 1px solid rgba(255,255,255,.18);
}
.dth-reassurance__item svg { width: 26px; height: 26px; color: #fff; stroke-width: 1.4; }
.dth-reassurance__title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.25;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}
.dth-reassurance__text {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}

/* ── Carte flottante "Vous ne trouvez pas votre produit ?" ──
   Calque absolu ancré sur le HAUT du hero (.dth-hero-block), pas sur le flux
   qui le suit : la carte démarre à y+13 et déborde sous le hero, comme sur la
   maquette. pointer-events:none sur le calque pour ne pas bloquer la barre de
   recherche qui passe dessous. */
.dth-helpcard__wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
}
.dth-helpcard {
  position: absolute;
  pointer-events: auto;
  right: var(--dth-gutter);
  top: 13px;
  width: 316px;
  background: var(--dth-surface);
  border-radius: var(--dth-r-md);
  box-shadow: var(--dth-sh-lg);
  padding: 22px 22px 20px;
}
.dth-helpcard__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.005em;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-helpcard__hook {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--dth-navy);
}
.dth-helpcard__text {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--dth-muted-2);
}
.dth-helpcard__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  min-height: 46px;
  padding: 8px 14px;
  background: var(--dth-blue);
  color: #fff;
  border-radius: var(--dth-r);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background var(--dth-ease) 160ms;
}
.dth-helpcard__cta:hover { background: var(--dth-blue-hover); color: #fff; }
.dth-helpcard__cta svg { width: 17px; height: 17px; flex: none; }

.dth-checks { list-style: none; margin: 16px 0 0; padding: 0; }
.dth-checks li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: #3A4C6E;
}
.dth-checks li + li { margin-top: 7px; }
.dth-checks svg { width: 14px; height: 14px; margin-top: 2px; color: var(--dth-blue); stroke-width: 2.6; flex: none; }

.dth-helpcard__sep {
  height: 1px;
  margin: 16px 0;
  background: var(--dth-line);
  border: 0;
}
.dth-helpcard__phone { display: flex; align-items: center; gap: 12px; }
.dth-helpcard__phone > svg { width: 27px; height: 27px; color: var(--dth-blue); stroke-width: 1.4; flex: none; }
.dth-helpcard__phone p { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--dth-muted-2); }
.dth-helpcard__phone .is-blue { color: var(--dth-blue); }
.dth-helpcard__phone .is-num {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--dth-blue);
  text-decoration: none;
}


/* =================================================================
   3. RECHERCHE RAPIDE
   ================================================================= */

.dth-quicksearch { padding-top: 4px; }
.dth-quicksearch__bar {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 50px;
  padding: 0 20px;
  background: var(--dth-surface);
  border: 1px solid var(--dth-line);
  border-radius: var(--dth-r-md);
  box-shadow: var(--dth-sh-sm);
}
.dth-quicksearch__bar > svg { width: 27px; height: 27px; color: var(--dth-navy); stroke-width: 1.4; flex: none; }
.dth-quicksearch__label { flex: none; }
.dth-quicksearch__label strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-quicksearch__label span {
  display: block;
  font-size: 11.5px;
  color: var(--dth-muted);
}
.dth-quicksearch__input {
  flex: 1 1 auto;
  max-width: 442px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #DDE4EF;
  border-radius: var(--dth-r);
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--dth-text);
}
.dth-quicksearch__input::placeholder { color: #8A97AD; }
.dth-quicksearch__input:focus {
  outline: 0;
  border-color: var(--dth-blue);
  box-shadow: 0 0 0 3px rgba(17, 96, 216, .12);
}
.dth-quicksearch__submit {
  flex: none;
  height: 34px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--dth-r);
  background: var(--dth-blue);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dth-ease) 160ms;
}
.dth-quicksearch__submit:hover { background: var(--dth-blue-hover); }


/* =================================================================
   4. NOS UNIVERS DE PRODUITS
   ================================================================= */

.dth-universes { padding: 30px 0 0; }
.dth-universes__grid {
  display: grid;
  grid-template-columns: 158px repeat(8, 1fr);
  gap: 16px;
  align-items: stretch;      /* cartes de hauteur égale, comme la maquette */
}
.dth-universes__intro { padding-top: 4px; align-self: start; }
.dth-universes__title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-universes__all {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--dth-line-2);
  border-radius: var(--dth-r);
  background: var(--dth-surface);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--dth-navy);
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--dth-ease) 160ms, color var(--dth-ease) 160ms;
}
.dth-universes__all:hover { border-color: var(--dth-blue); color: var(--dth-blue); }
.dth-universes__all svg { width: 15px; height: 15px; flex: none; stroke-width: 2; }

.dth-universe {
  display: block;
  background: var(--dth-surface);
  border: 1px solid var(--dth-line);
  border-radius: var(--dth-r);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow var(--dth-ease) 180ms, transform var(--dth-ease) 180ms;
}
.dth-universe:hover { box-shadow: var(--dth-sh); transform: translateY(-2px); }
.dth-universe__img {
  display: block;
  width: 100%;
  aspect-ratio: 145 / 101;
  object-fit: cover;
  background: linear-gradient(140deg, #C9D8EC, #9FB6D6);
}
.dth-universe__body { padding: 10px 8px 12px; }
.dth-universe__name {
  margin: 0;
  font-size: 10px;   /* "SALLE PROPRE & STÉRILE" doit tenir sur une ligne */
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-universe__desc {
  margin: 3px 0 0;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--dth-muted);
}


/* =================================================================
   5. BANDE — MARQUE DISPROTECH + ACHETEUR INDÉPENDANT
   ================================================================= */

.dth-band { padding-top: 20px; }
.dth-band__grid {
  display: grid;
  grid-template-columns: 510px 1fr;
  gap: 12px;
  align-items: stretch;
}

/* ── Carte sombre "La marque Disprotech" ── */
.dth-brandcard {
  position: relative;
  display: block;
  background: var(--dth-navy);
  border-radius: var(--dth-r);
  padding: 22px 24px 20px;
  overflow: hidden;
  text-decoration: none;
  min-height: 118px;
}
.dth-brandcard__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  text-transform: uppercase;
}
.dth-brandcard__text {
  margin: 8px 0 0;
  max-width: 218px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,.80);
}
.dth-brandcard__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  color: #fff;
  text-transform: uppercase;
}
.dth-brandcard__link svg { width: 16px; height: 16px; stroke-width: 2; transition: transform var(--dth-ease) 180ms; }
.dth-brandcard:hover .dth-brandcard__link svg { transform: translateX(4px); }
.dth-brandcard__img {
  position: absolute;
  right: 16px;
  bottom: 0;
  height: 94px;
  width: auto;
  object-fit: contain;
  object-position: bottom;
}

/* ── Carte claire "Acheteur indépendant" ── */
.dth-buyer {
  background: var(--dth-surface-alt);
  border-radius: var(--dth-r);
  padding: 22px 26px 20px;
}
.dth-buyer__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-buyer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}
.dth-buyer__text {
  margin: 0;
  max-width: 430px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.65;
  color: #3A4C6E;
}
.dth-buyer__stats {
  display: flex;
  align-items: flex-start;
  gap: 34px;
}
.dth-stat { text-align: center; min-width: 76px; }
.dth-stat svg { width: 26px; height: 26px; margin: 0 auto; color: var(--dth-navy); stroke-width: 1.4; }
.dth-stat__value {
  display: block;
  margin-top: 7px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-stat__label {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--dth-muted);
}


/* =================================================================
   6. ILS NOUS FONT CONFIANCE
   ================================================================= */

.dth-trust { padding: 12px 0 32px; }
.dth-trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
  align-items: stretch;
}
.dth-trust__panel {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--dth-surface);
  border-radius: var(--dth-r);
  padding: 18px 24px;
}
.dth-trust__label {
  flex: none;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-trust__logos {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 18px;
  min-width: 0;
}
/* Logos texte — remplaçables par des <img class="dth-trust__logo-img"> */
.dth-trust__logo {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #7A8AA5;
  white-space: nowrap;
  transition: color var(--dth-ease) 180ms;
}
.dth-trust__panel:hover .dth-trust__logo { color: #5E6E8C; }
.dth-trust__logo-img {
  max-height: 26px;
  width: auto;
  filter: grayscale(1);
  opacity: .72;
}
.dth-trust__more {
  flex: none;
  font-size: 12px;
  font-style: italic;
  color: var(--dth-muted);
  white-space: nowrap;
}

.dth-trust__claim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--dth-navy);
  border-radius: var(--dth-r);
  padding: 18px 22px;
}
.dth-trust__claim p {
  margin: 0;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,.90);
}
.dth-trust__claim .dth-flag { width: 42px; height: 30px; border-radius: 2px; flex: none; }
.dth-trust__claim .dth-flag svg { width: 20px; height: 20px; }


/* =================================================================
   7. MODALE — DEMANDE DE RECHERCHE
   Restyle la sortie du module natif `contactform` rendue dans .dth-modal.
   ================================================================= */

.dth-modal { font-family: var(--dth-font); }
.dth-modal .modal-dialog { max-width: 620px; }
.dth-modal .modal-content {
  border: 0;
  border-radius: var(--dth-r-md);
  box-shadow: 0 30px 80px rgba(16, 48, 107, .28);
  overflow: hidden;
}

.dth-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  background: var(--dth-navy);
}
.dth-modal__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.dth-modal__title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  text-transform: uppercase;
}
.dth-modal__close {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--dth-r);
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  transition: background var(--dth-ease) 160ms;
}
.dth-modal__close:hover { background: rgba(255,255,255,.24); }
.dth-modal__close svg { width: 16px; height: 16px; }

.dth-modal__body { padding: 24px 26px 26px; }
.dth-modal__intro {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dth-muted-2);
}

/* ── Champs métier injectés ── */
.dth-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-bottom: 18px;
}
.dth-field:nth-child(4), .dth-field:nth-child(5) { grid-column: 1 / -1; }
.dth-field label,
.dth-modal .contact-form .form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dth-navy);
}
.dth-field label span { color: var(--dth-blue); }

/* ── Contrôles (les nôtres + ceux du module natif) ──
   custom.css:146 impose border-radius:14px + border + background + color en
   !important sur tout `.form-control` → on les repasse ici en !important. */
.dth-modal .form-control,
.dth-modal .form-select {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px !important;
  border: 1px solid #DDE4EF !important;
  border-radius: var(--dth-r) !important;
  background: #fff !important;
  font-family: inherit;
  font-size: 13px;
  color: var(--dth-text) !important;
  box-shadow: none;
}
.dth-modal .form-control::placeholder { color: #8A97AD; }
.dth-modal .form-control:focus,
.dth-modal .form-select:focus {
  outline: 0;
  border-color: var(--dth-blue);
  box-shadow: 0 0 0 3px rgba(17, 96, 216, .12);
}
.dth-modal textarea.form-control { min-height: 108px; resize: vertical; }
.dth-modal .contact-form .mb-3 { margin-bottom: 14px !important; }
.dth-modal .form-text { font-size: 11px; color: var(--dth-muted); }

/* Le titre "Contact us" et le sélecteur de service du module natif n'ont pas
   de sens ici : la modale a déjà son propre titre et un seul destinataire. */
.dth-modal .contact-form h1 { display: none; }
.dth-modal .contact-form select[name="id_contact"] { display: none; }
.dth-modal .contact-form select[name="id_contact"] + * { display: none; }
.dth-modal .contact-form .mb-3:has(select[name="id_contact"]) { display: none; }

.dth-modal .form-footer {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--dth-line);
}
/* custom.css:194 impose `.btn { border-radius:999px; padding; font-weight }`
   en !important — d'où les !important ici, seul moyen de le neutraliser sans
   toucher à custom.css (utilisé par tout le reste du site). */
.dth-modal .form-footer .btn,
.dth-modal input[name="submitMessage"] {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--dth-r) !important;
  padding: 13px 20px !important;
  background: var(--dth-blue) !important;
  color: #fff;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dth-ease) 160ms;
}
.dth-modal .form-footer .btn:hover,
.dth-modal input[name="submitMessage"]:hover { background: var(--dth-blue-hover) !important; }

.dth-modal .alert { border-radius: var(--dth-r); font-size: 13px; }

@media (max-width: 560px) {
  .dth-fields { grid-template-columns: 1fr; }
  .dth-modal__head { padding: 18px 20px; }
  .dth-modal__body { padding: 20px; }
  .dth-modal__title { font-size: 18px; }
}


/* =================================================================
   8. RESPONSIVE
   ================================================================= */

/* ── Grand desktop réduit (1200 → 1440) ── */
@media (max-width: 1440px) {
  /* Le header porte logo + 8 univers + recherche + 2 actions : on resserre
     la nav pour que le champ de recherche garde une largeur utilisable. */
  .dth-header__inner { gap: 16px; }
  .dth-nav { margin-left: 10px; gap: 0; }
  .dth-nav__link { min-width: 0; padding: 6px 6px; }
  .dth-nav__label { font-size: 10.5px; }
  .dth-nav__sub { font-size: 9px; }
  .dth-search { flex-basis: 232px; }
  .dth-actions { gap: 18px; }

  .dth-hero__title  { font-size: 40px; }
  .dth-universes__grid { grid-template-columns: 150px repeat(8, 1fr); gap: 12px; }
  .dth-band__grid { grid-template-columns: 440px 1fr; }
  .dth-buyer__stats { gap: 22px; }
  .dth-trust__grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .dth-trust__logo { font-size: 13px; }
}

/* ── Desktop étroit (1200 → 1320) : le sous-titre des univers saute ── */
@media (max-width: 1320px) {
  .dth-nav__sub { display: none; }
  .dth-nav__link { padding: 6px 5px; }
  .dth-search { flex-basis: 200px; min-width: 150px; }
  .dth-action__label { font-size: 10px; }
}

/* ── Tablette large : le visuel et la carte d'aide passent en flux ── */
@media (max-width: 1199px) {
  /* Le texte passe SOUS le visuel : plus besoin de prolonger le décor vers la
     gauche, l'image reprend un cadrage plein et centré sur les produits. */
  .dth-hero {
    min-height: 0;
    background-image: url('../img/dt-hero-bg.jpg?v=7');
    background-size: cover;
    background-position: center bottom;
  }
  .dth-hero__container { min-height: 0; display: block; padding-bottom: 24px; }
  .dth-hero::before {
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 60%, rgba(255,255,255,.78) 100%);
  }
  .dth-hero__copy { padding-top: 28px; max-width: none; }
  .dth-hero__title { font-size: 36px; }

  /* relative (et non static) : sinon le z-index tombe et le voile ::before
     du hero repeint par-dessus la barre → texte blanc sur fond clair. */
  .dth-reassurance {
    position: relative;
    z-index: 3;
    width: 100%;
    height: auto;
    padding: 16px var(--dth-gutter);
  }
  .dth-reassurance__row { flex-wrap: wrap; gap: 14px 0; }
  .dth-reassurance__item { flex: 1 1 45%; }
  .dth-reassurance__item:nth-child(3) { padding-left: 0; border-left: 0; }

  .dth-helpcard__wrap {
    position: static;
    pointer-events: auto;
    padding: 0 var(--dth-gutter);
  }
  .dth-helpcard {
    position: static;
    width: auto;
    margin: 16px 0 0;
    box-shadow: var(--dth-sh);
    border: 1px solid var(--dth-line);
  }

  .dth-universes__grid { grid-template-columns: repeat(4, 1fr); }
  .dth-universes__intro { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .dth-universes__all { width: auto; margin-top: 0; min-width: 210px; }

  .dth-band__grid { grid-template-columns: 1fr; }
  .dth-buyer__cols { grid-template-columns: 1fr; gap: 22px; }
  .dth-buyer__stats { flex-wrap: wrap; justify-content: space-between; }

  .dth-trust__grid { grid-template-columns: 1fr; }
  .dth-trust__panel { flex-wrap: wrap; }
  .dth-trust__logos { justify-content: flex-start; flex-wrap: wrap; gap: 14px 26px; }
}

/* ── Tablette / mobile ── */
@media (max-width: 860px) {
  .dth-hero__title { font-size: 30px; }
  .dth-hero__eyebrow { font-size: 16px; }
  .dth-proofs { flex-direction: column; align-items: flex-start; gap: 14px; }
  .dth-proof { padding-right: 0; }
  .dth-proof + .dth-proof { padding-left: 0; border-left: 0; }

  .dth-reassurance__item { flex: 1 1 100%; padding-left: 0; border-left: 0 !important; }

  .dth-quicksearch__bar { flex-wrap: wrap; height: auto; padding: 16px 18px; gap: 14px; }
  .dth-quicksearch__input { max-width: none; flex: 1 1 200px; height: 40px; }
  .dth-quicksearch__submit { height: 40px; flex: 1 1 120px; }

  .dth-universes__grid { grid-template-columns: repeat(2, 1fr); }
  .dth-universes__intro { flex-direction: column; align-items: flex-start; }
  .dth-universes__all { width: 100%; }

  .dth-brandcard__text { max-width: none; padding-right: 120px; }
  .dth-brandcard__img { height: 78px; }
  .dth-buyer__stats { gap: 18px 0; }
  .dth-stat { flex: 1 1 44%; }

  .dth-trust__panel { flex-direction: column; align-items: flex-start; gap: 14px; }
  .dth-trust__claim { flex-direction: row; }
}

@media (max-width: 480px) {
  :root { --dth-gutter: 16px; }
  .dth-hero__title { font-size: 26px; }
  .dth-universes__grid { grid-template-columns: 1fr; }
  .dth-brandcard__text { padding-right: 0; }
  .dth-brandcard__img { position: static; display: block; height: 72px; margin-top: 14px; }
}


/* =================================================================
   MODE DEMANDE (pas de prix, pas de paiement)
   Le site n'affiche aucun tarif : le client constitue une demande,
   l'envoie, et Disprotech revient vers lui avec une offre chiffrée.
   Les prix sont retirés des templates (pas seulement masqués) —
   ces règles habillent ce qui les remplace.
   ================================================================= */

/* Mention « Prix sur demande » : partout où un prix s'affichait */
.dth-onrequest {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--dth-blue);
  text-transform: uppercase;
}
.dth-onrequest--lg {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--dth-navy);
}
.dth-onrequest__hint {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dth-muted-2);
}

/* Encart « Réponse sous 24 h » du récapitulatif de demande */
.dth-request-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--dth-r-md);
  background: #EAF1FD;
  color: var(--dth-navy);
}
.dth-request-note svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.dth-request-note p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dth-muted-2);
}
.dth-request-note strong { color: var(--dth-navy); }

.dth-request-legal {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--dth-muted);
}

/* Note de la modale d'ajout (ps_shoppingcart) */
.blockcart-modal__note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--dth-r-md);
  background: #EAF1FD;
  font-size: 13px;
  line-height: 1.55;
  color: var(--dth-muted-2);
}

/* Filet de sécurité : blocs tarifaires rendus par des modules tiers via des
   hooks que le thème ne traverse pas (specials, cross-selling, comparateur…).
   À compléter si un module fait apparaître un montant ailleurs. */
.cart-summary__line--total,
#cart-subtotal-shipping,
.cart-summary__totals,
.product-line__regular,
.product-price,
.product-discount,
.has-discount .discount { display: none !important; }

/* Page /commande neutralisée (pas de paiement en ligne) */
.dth-checkout-off {
  max-width: 560px;
  margin: 64px auto 80px;
  padding: 40px 32px;
  text-align: center;
  background: var(--dth-surface);
  border: 1px solid var(--dth-line);
  border-radius: var(--dth-r-md);
  box-shadow: var(--dth-sh);
}
.dth-checkout-off svg {
  width: 42px;
  height: 42px;
  margin: 0 auto 18px;
  color: var(--dth-blue);
}
.dth-checkout-off h1 { margin: 0 0 10px; color: var(--dth-navy); }
.dth-checkout-off p {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dth-muted-2);
}

/* Confirmation d'envoi (formulaire contactform : demande de commande,
   demande de recherche, contact) */
.dth-request-sent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 24px;
  padding: 18px 20px;
  border-radius: var(--dth-r-md);
  background: #EAF1FD;
  border: 1px solid #CFE0FA;
}
.dth-request-sent svg { width: 26px; height: 26px; flex: none; color: var(--dth-blue); }
.dth-request-sent__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--dth-navy);
}
.dth-request-sent__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dth-muted-2);
}


/* =================================================================
   WIDGET « VOUS NE TROUVEZ PAS VOTRE PRODUIT ? »
   Présent sur toutes les pages (layout). Reprend la carte de l'accueil
   (.dth-helpcard) en version flottante, repliée par défaut.
   ================================================================= */

.dth-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1045;   /* sous les modales Bootstrap (1055), au-dessus du reste */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--dth-font);
}
.dth-fab *, .dth-fab *::before, .dth-fab *::after { box-sizing: border-box; }

/* Pastille repliée */
.dth-fab__pill {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 17px 11px 13px;
  border: 1px solid var(--dth-line-2);
  border-radius: var(--dth-r-md);
  background: var(--dth-surface);
  box-shadow: var(--dth-sh-lg);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dth-ease) 160ms, transform var(--dth-ease) 160ms;
}
.dth-fab__pill:hover { border-color: var(--dth-blue); transform: translateY(-1px); }
.dth-fab__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--dth-r);
  background: var(--dth-blue);
  color: #fff;
}
.dth-fab__icon svg { width: 19px; height: 19px; }
.dth-fab__label {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-fab.is-open .dth-fab__pill { display: none; }

/* Carte dépliée — même composition que .dth-helpcard */
.dth-fab__card {
  position: relative;
  width: 330px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 24px 22px 20px;
  background: var(--dth-surface);
  border: 1px solid var(--dth-line);
  border-radius: var(--dth-r-md);
  box-shadow: var(--dth-sh-lg);
  animation: dth-fab-in 200ms var(--dth-ease);
}
.dth-fab__card[hidden] { display: none; }
@keyframes dth-fab-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.dth-fab__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--dth-r);
  background: none;
  color: var(--dth-muted);
  cursor: pointer;
}
.dth-fab__close svg { width: 16px; height: 16px; }
.dth-fab__close:hover { background: #F1F4F9; color: var(--dth-navy); }

.dth-fab__title {
  margin: 0 32px 0 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.005em;
  color: var(--dth-navy);
  text-transform: uppercase;
}
.dth-fab__hook {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--dth-navy);
}
.dth-fab__text {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dth-muted-2);
}
.dth-fab__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  padding: 13px 14px;
  border-radius: var(--dth-r-md);
  background: var(--dth-blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dth-ease) 160ms;
}
.dth-fab__cta:hover { background: var(--dth-blue-hover); color: #fff; }
.dth-fab__cta svg { width: 17px; height: 17px; flex: none; }

.dth-fab__sep { margin: 16px 0 14px; border: 0; border-top: 1px solid var(--dth-line); }
.dth-fab__phone { display: flex; align-items: center; gap: 12px; }
.dth-fab__phone > svg { width: 27px; height: 27px; color: var(--dth-blue); stroke-width: 1.4; flex: none; }
.dth-fab__phone p { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--dth-muted-2); }
.dth-fab__phone .is-blue { color: var(--dth-blue); }
.dth-fab__phone .is-num { display: block; font-size: 14px; font-weight: 800; color: var(--dth-navy); text-decoration: none; }

/* Mobile : pastille réduite à l'icône, carte plein cadre */
@media (max-width: 767px) {
  .dth-fab { right: 14px; bottom: 14px; }
  .dth-fab__label { display: none; }
  .dth-fab__pill { padding: 9px; }
  .dth-fab__card { width: calc(100vw - 28px); }
}

/* Impression : le widget n'a rien à y faire */
@media print { .dth-fab { display: none !important; } }


/* =================================================================
   DESIGN SYSTEM GLOBAL — le langage de l'accueil appliqué à tout le site
   Angles droits, filets fins, ombres discrètes, palette navy/bleu.

   Méthode : custom.css définit ses arrondis et ses ombres sous forme de
   tokens (--dt-r*, --dt-sh*) ; dt-home.css étant chargé après, il suffit
   de les redéfinir ici pour faire basculer toutes les pages d'un coup —
   catalogue, fiche produit, panier, compte, formulaires. On complète
   ensuite avec les composants dont le rayon est écrit en dur.
   ================================================================= */

:root {
  /* Anciens arrondis 8 → 32px, désormais quasi carrés comme l'accueil */
  --dt-r-sm:  3px;
  --dt-r:     3px;
  --dt-r-md:  4px;
  --dt-r-lg:  4px;
  --dt-r-xl:  4px;
  /* --dt-r-full reste rond : pastilles de compteur, puces, avatars */

  /* Ombres lourdes → ombres de l'accueil */
  --dt-sh-sm: var(--dth-sh-sm);
  --dt-sh:    var(--dth-sh-sm);
  --dt-sh-md: var(--dth-sh);
  --dt-sh-lg: var(--dth-sh);

  --r-lg: 4px;   /* token hérité du premier jet de custom.css */
}

/* ── Composants dont le rayon est écrit en dur dans le thème ────────── */
#wrapper .card,
#wrapper .card-header,
#wrapper .card-footer,
#wrapper .btn,
#wrapper .form-control,
#wrapper .form-select,
#wrapper .input-group-text,
#wrapper .alert,
#wrapper .modal-content,
#wrapper .dropdown-menu,
#wrapper .page-link,
#wrapper .nav-link,
#wrapper .accordion-item,
#wrapper .accordion-button,
#wrapper .list-group-item,
#wrapper .toast,
#wrapper .product-miniature .card,
#wrapper .product-miniature__image-container,
#wrapper .products-sort-order .select-title,
#wrapper .block-category,
#wrapper .category-tree,
#wrapper .search-widgets,
#wrapper #search_widget,
#wrapper .quantity-button .btn,
#wrapper .js-quantity-button .btn,
#wrapper .btn-touchspin,
#wrapper .facet,
#wrapper .breadcrumb,
#footer .btn,
#footer .form-control {
  border-radius: var(--dth-r-md) !important;
}

/* Cartes : filet fin plutôt qu'ombre portée */
#wrapper .card,
#wrapper .product-miniature .card,
#wrapper .block-category,
#wrapper .category-tree {
  border: 1px solid var(--dth-line) !important;
  box-shadow: none !important;
}
#wrapper .product-miniature .card {
  transition: border-color var(--dth-ease) 160ms, box-shadow var(--dth-ease) 160ms;
}
#wrapper .product-miniature .card:hover {
  border-color: var(--dth-blue) !important;
  box-shadow: var(--dth-sh) !important;
  transform: none !important;
}

/* Le cadre intérieur de l'image n'a plus lieu d'être arrondi ni ombré */
#wrapper .product-miniature__image-container {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Boutons : mêmes angles et même bleu que l'accueil */
#wrapper .btn-primary,
#footer .btn-primary {
  background-color: var(--dth-blue) !important;
  border-color: var(--dth-blue) !important;
  font-weight: 700;
}
#wrapper .btn-primary:hover,
#footer .btn-primary:hover {
  background-color: var(--dth-blue-hover) !important;
  border-color: var(--dth-blue-hover) !important;
}
#wrapper .btn-outline-primary {
  color: var(--dth-blue) !important;
  border-color: var(--dth-line-2) !important;
  font-weight: 700;
}
#wrapper .btn-outline-primary:hover {
  background-color: var(--dth-blue) !important;
  border-color: var(--dth-blue) !important;
  color: #fff !important;
}

/* ── Stepper de quantité ─────────────────────────────────────────────
   Trois carrés strictement identiques : même côté (40 px), même filet,
   même rayon, alignés sur la même ligne de base. Bootstrap colle les
   éléments d'un .input-group et neutralise les rayons intérieurs : on
   défait ce groupement pour retrouver trois blocs distincts. */
#wrapper .quantity-button .input-group,
#wrapper .js-quantity-button .input-group,
#wrapper .quantity-button > .input-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  flex-wrap: nowrap;
}
#wrapper .quantity-button .btn,
#wrapper .js-quantity-button .btn,
#wrapper .quantity-button .form-control,
#wrapper .js-quantity-button .form-control,
#wrapper .btn-touchspin {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  padding: 0 !important;
  margin: 0 !important;      /* Bootstrap applique un margin-left négatif */
  border: 1px solid var(--dth-line-2) !important;
  border-radius: var(--dth-r-md) !important;
  background: var(--dth-surface) !important;
  color: var(--dth-navy) !important;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  flex: none;
}
#wrapper .quantity-button .btn,
#wrapper .js-quantity-button .btn,
#wrapper .btn-touchspin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#wrapper .quantity-button .btn:hover,
#wrapper .js-quantity-button .btn:hover {
  border-color: var(--dth-blue) !important;
  color: var(--dth-blue) !important;
}
#wrapper .quantity-button .btn .material-icons,
#wrapper .js-quantity-button .btn .material-icons { font-size: 18px; }
#wrapper .quantity-button .form-control:focus,
#wrapper .js-quantity-button .form-control:focus {
  border-color: var(--dth-blue) !important;
}

/* Titres et fond de page alignés sur l'accueil */
#wrapper h1, #wrapper h2, #wrapper h3,
#wrapper .h1, #wrapper .h2, #wrapper .h3 {
  font-family: var(--dth-font);
  color: var(--dth-navy);
  letter-spacing: -.01em;
}
body:not(#index) #wrapper { background: var(--dth-bg); }

/* Fil d'Ariane : discret, sans fond ni arrondi */
#wrapper .breadcrumb {
  background: none !important;
  padding-left: 0 !important;
  font-size: 12.5px;
}
#wrapper .breadcrumb a { color: var(--dth-muted); text-decoration: none; }
#wrapper .breadcrumb a:hover { color: var(--dth-blue); }

/* Champs de formulaire */
#wrapper .form-control,
#wrapper .form-select {
  border-color: var(--dth-line-2) !important;
  font-family: var(--dth-font);
}
#wrapper .form-control:focus,
#wrapper .form-select:focus {
  border-color: var(--dth-blue) !important;
  box-shadow: 0 0 0 3px rgba(17, 96, 216, .12) !important;
}

/* Éléments volontairement ronds : on les protège du passage au carré */
#wrapper .rounded-circle,
#wrapper .header-block__badge,
#wrapper .dth-action__badge,
#wrapper input[type="radio"],
#wrapper .form-check-input[type="radio"] {
  border-radius: 999px !important;
}


/* =================================================================
   BANDEAU DE DEMANDE EN LIGNE (_partials/dth-request-inline.tpl)
   Occupe la place laissée vide par une recherche sans résultat ou
   une 404 — le moment où le visiteur est le plus près de partir.
   ================================================================= */

.dth-inline-request {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
  margin: 26px 0 8px;
  padding: 30px 32px;
  text-align: left;
  background: var(--dth-surface);
  border: 1px solid var(--dth-line);
  border-left: 3px solid var(--dth-blue);
  border-radius: var(--dth-r-md);
  font-family: var(--dth-font);
}
.dth-inline-request *, .dth-inline-request *::before { box-sizing: border-box; }

.dth-inline-request__eyebrow {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dth-blue);
}
.dth-inline-request__title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--dth-navy);
}
.dth-inline-request__text {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--dth-muted-2);
}
.dth-inline-request__checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 22px;
  margin-top: 16px;
}
.dth-inline-request__checks li + li { margin-top: 0; }

.dth-inline-request__side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 30px;
  border-left: 1px solid var(--dth-line);
}
.dth-inline-request__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--dth-r-md);
  background: var(--dth-blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dth-ease) 160ms;
}
.dth-inline-request__cta:hover { background: var(--dth-blue-hover); color: #fff; }
.dth-inline-request__cta svg { width: 17px; height: 17px; flex: none; }

.dth-inline-request__phone { display: flex; align-items: center; gap: 12px; }
.dth-inline-request__phone > svg { width: 26px; height: 26px; flex: none; color: var(--dth-blue); stroke-width: 1.4; }
.dth-inline-request__phone p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--dth-muted-2); }
.dth-inline-request__phone .is-blue { color: var(--dth-blue); }
.dth-inline-request__phone .is-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--dth-navy);
  text-decoration: none;
}

.dth-noresult-hint {
  margin: 0;
  font-size: 14px;
  color: var(--dth-muted);
}

@media (max-width: 991px) {
  .dth-inline-request {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 22px;
  }
  .dth-inline-request__side { padding-left: 0; border-left: 0; }
  .dth-inline-request__checks { grid-template-columns: 1fr; }
}

/* État « aucun résultat » du panneau de recherche : la demande personnalisée
   est proposée sur place, sans quitter la page. */
.dth-so__empty {
  max-width: 620px;
  margin: 0 auto;
  padding: 48px 20px 44px;
  text-align: center;
}
.dth-so__empty[hidden] { display: none; }
.dth-so__empty-lead {
  margin: 0;
  font-size: 15px;
  color: var(--dth-muted-2);
}
.dth-so__empty-lead strong { color: var(--dth-navy); }
.dth-so__empty-text {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dth-muted);
}
.dth-so__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 13px 24px;
  border-radius: var(--dth-r-md);
  background: var(--dth-blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dth-ease) 160ms;
}
.dth-so__empty-cta:hover { background: var(--dth-blue-hover); color: #fff; }
.dth-so__empty-cta svg { width: 16px; height: 16px; flex: none; }