/* ═══════════════════════════════════════════════════════════════════════════
   DISCIA — habillage PrestaShop 9
   Écrit du mobile vers le bureau : les règles de base valent partout,
   les media queries n'ajoutent que ce qui change sur grand écran.
   Une seule règle par élément — aucune contradiction interne.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Les polices sont chargées par le module, et seulement si l'option
   « Charger les polices Google » est cochée. Aucun @import ici : il
   contournerait ce réglage et appellerait Google à chaque visite. */

:root{
  --ds-bleu:#1D4ED8;   --ds-bleu-f:#1E3A8A;  --ds-bleu-c:#EFF6FF;
  --ds-turq:#06B6D4;   --ds-turq-f:#0891B2;
  --ds-nuit:#0F172A;   --ds-ardoise:#475569;
  --ds-gris:#F1F5F9;   --ds-bord:#E2E8F0;    --ds-ambre:#F59E0B;
  --ds-r:14px;         --ds-r-s:10px;
  --ds-large:1600px;   --ds-marge:16px;
  --ds-ombre:0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --ds-ombre-f:0 12px 40px rgba(29,78,216,.16);
}

/* ═══ 1. BASE ═══════════════════════════════════════════════════════════ */

body{ font-family:Inter,system-ui,sans-serif; color:var(--ds-nuit);
  font-size:16px; line-height:1.65; max-width:100% }
h1,h2,h3,h4,.h1,.h2,.h3{ font-family:Poppins,system-ui,sans-serif;
  letter-spacing:-.02em; line-height:1.2; color:var(--ds-nuit);
  overflow-wrap:break-word }
h1,.h1{ font-size:28px; font-weight:800 }
h2,.h2{ font-size:24px; font-weight:700 }
h3,.h3{ font-size:19px; font-weight:600 }
a{ color:var(--ds-bleu); text-decoration:none }
a:hover{ color:var(--ds-bleu-f) }
img,svg,video,iframe,table{ max-width:100%; height:auto }
:focus-visible{ outline:3px solid var(--ds-turq); outline-offset:3px; border-radius:4px }

/* Aucun élément ne dépasse l'écran.
   Le débordement d'un seul bloc décale toute la page vers la gauche. */
*,*::before,*::after{ box-sizing:border-box }
#wrapper,#main,#content,#content-wrapper,
#header,#footer,section,article,.container,.row{
  max-width:100%; overflow-x:clip }
.row{ margin-left:0; margin-right:0 }
[class*="col-"]{ padding-left:0; padding-right:0 }

/* ═══ 2. BOUTONS ════════════════════════════════════════════════════════ */

.btn{ font-family:Poppins,sans-serif; font-weight:600; border-radius:var(--ds-r-s);
  padding:13px 24px; font-size:15px; border:2px solid transparent;
  transition:.18s; text-transform:none; letter-spacing:0 }
.btn-primary,.btn-primary:not(:disabled):not(.disabled){
  background:var(--ds-bleu); border-color:var(--ds-bleu); color:#fff }
.btn-primary:hover,.btn-primary:focus{ background:var(--ds-bleu-f);
  border-color:var(--ds-bleu-f); box-shadow:var(--ds-ombre-f) }
.btn-secondary,.btn-outline-primary{ background:#fff; color:var(--ds-bleu);
  border-color:var(--ds-bord) }
.btn-secondary:hover,.btn-outline-primary:hover{ background:var(--ds-bleu-c);
  border-color:var(--ds-bleu); color:var(--ds-bleu) }
.btn-lg{ padding:16px 30px; font-size:16.5px }

/* ═══ 3. EN-TÊTE — MOBILE (base) ════════════════════════════════════════ */

#header{ background:#fff; border-bottom:1px solid var(--ds-bord);
  position:relative; z-index:60 }
#header .header-nav{ display:none }               /* barre du haut : doublon */
#header .header-top{ padding:0; background:#fff }
#header .header-top > .container{
  max-width:100%; width:100%; padding:0 var(--ds-marge); margin:0 }
#header .header-top .row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 0; margin:0; width:100% }

/* Logo — la colonne porte hidden-sm-down, que Bootstrap masque sous 992px.
   On rétablit son affichage, sinon aucun logo n'apparaît en mobile. */
#header #_desktop_logo,
#header #_desktop_logo.hidden-sm-down{
  display:block; order:1; flex:0 0 auto; width:auto; max-width:58%;
  padding:0; margin:0 }
#_desktop_logo h1{ margin:0; padding:0; line-height:0 }
#_desktop_logo img,#header .logo img{ max-height:44px; width:auto; height:auto }

/* Menu bureau : masqué en mobile, le burger prend le relais */
#header #_desktop_top_menu{ display:none }
#header .header-top-right:empty{ display:none }

/* Bouton burger */
#menu-icon,.menu-icon{ order:2; display:flex; align-items:center;
  color:var(--ds-bleu); padding:4px; cursor:pointer }
#menu-icon .material-icons{ font-size:30px }

/* Contact, compte, panier */
.ds-header-right{ order:3; display:flex; flex-direction:row; flex-wrap:nowrap;
  align-items:center; gap:2px; margin-left:auto; flex:0 0 auto }
.ds-header-right > *{ margin:0; padding:0 }
.ds-header-right a{ display:inline-flex; align-items:center; gap:4px;
  font-size:12px; padding:7px 6px; white-space:nowrap; color:var(--ds-ardoise);
  border-radius:var(--ds-r-s) }
.ds-header-right a:hover{ background:var(--ds-gris); color:var(--ds-bleu) }
.ds-header-right a span:not(.cart-products-count){ display:none }
#_desktop_cart a{ background:var(--ds-bleu-c); color:var(--ds-bleu); font-weight:600 }
.cart-products-count{ background:var(--ds-ambre); color:#78350F;
  border-radius:99px; padding:1px 7px; font-size:11px; font-weight:700 }

/* Recherche : ligne dédiée en mobile */
#search_widget{ order:99; flex:1 1 100%; width:100%; margin:6px 0 0;
  box-sizing:border-box }
#search_widget form{ position:relative; width:100%; margin:0 }
#search_widget input[type=text]{
  width:100%; box-sizing:border-box; height:44px; padding:0 14px 0 42px;
  font-size:15px; border:1.5px solid var(--ds-bord); border-radius:22px;
  background:var(--ds-gris); color:var(--ds-nuit) }
#search_widget input[type=text]:focus{ border-color:var(--ds-bleu); outline:0 }
#search_widget i.search{ position:absolute; left:14px; top:50%;
  transform:translateY(-50%); color:var(--ds-ardoise); pointer-events:none }
#search_widget i.clear{ right:12px; left:auto }

/* Panneau du burger */
#mobile_top_menu_wrapper{ width:100%; background:#fff; padding:12px var(--ds-marge) }
#mobile_top_menu_wrapper .top-menu a{ display:block; padding:13px 2px;
  font-size:16px; font-family:Poppins,sans-serif; color:var(--ds-nuit);
  border-bottom:1px solid var(--ds-bord) }
#mobile_top_menu_wrapper .top-menu a:hover{ color:var(--ds-bleu) }

/* « Nous contacter » retiré du menu mobile */
#mobile_top_menu_wrapper #_mobile_contact_link,
#mobile_top_menu_wrapper .ds-cache-mob{ display:none !important }

/* ═══ 4. EN-TÊTE — BUREAU (à partir de 992px) ═══════════════════════════ */

@media (min-width:992px){
  :root{ --ds-marge:40px }

  #header .header-top > .container{
    max-width:none; padding:0 var(--ds-marge) 0 0 }
  #header .header-top .row{
    flex-wrap:nowrap; justify-content:flex-start; gap:24px;
    min-height:92px; padding:0 }

  /* Logo à gauche, collé au bord */
  #header #_desktop_logo{ max-width:none; margin:0 }
  #_desktop_logo img,#header .logo img{ max-height:78px; max-width:300px }

  /* Menu visible, juste après le logo */
  #header #_desktop_top_menu{
    order:2; display:flex; align-items:center; justify-content:flex-start;
    flex:1 1 auto; width:auto; margin:0 0 0 34px; padding:0;
    background:none; border:0; box-shadow:none }
  #header #_desktop_top_menu .clearfix{ display:none }
  #top-menu{ display:flex; flex-wrap:nowrap; align-items:center; gap:4px;
    margin:0; padding:0; list-style:none }
  #top-menu > li{ float:none; display:block; background:none; border:0 }
  #top-menu > li > a{ display:block; padding:11px 14px; white-space:nowrap;
    font-family:Poppins,sans-serif; font-weight:600; font-size:14.5px;
    text-transform:uppercase; letter-spacing:.6px; color:var(--ds-nuit);
    border-radius:var(--ds-r-s); background:none; border:0 }
  #top-menu > li > a:hover,#top-menu > li.current > a{
    background:var(--ds-bleu-c); color:var(--ds-bleu) }
  #top-menu .sub-menu{ top:100%; margin-top:4px; background:#fff;
    border:1px solid var(--ds-bord); border-radius:var(--ds-r-s);
    box-shadow:var(--ds-ombre) }

  /* Le burger disparaît */
  #menu-icon,.menu-icon{ display:none }

  /* Outils à droite */
  .ds-header-right{ order:3; gap:6px }
  .ds-header-right a{ font-size:14.5px; padding:9px 11px; gap:6px }
  .ds-header-right a span:not(.cart-products-count){ display:inline }

  /* Recherche : sur la même ligne, à droite */
  #search_widget{ order:4; flex:0 0 200px; width:200px; margin:0 }
  #search_widget input[type=text]{ height:42px; font-size:14px }
}

/* ═══ 5. CONTENU DE LA PAGE D'ACCUEIL ═══════════════════════════════════ */

.ds-hero{ padding:38px 0 44px; width:100%;
  background:radial-gradient(circle at 88% 8%, rgba(6,182,212,.10), transparent 45%),
             radial-gradient(circle at 4% 90%, rgba(29,78,216,.07), transparent 42%) }
.ds-sec{ padding:46px 0; width:100% }
.ds-sec-clair{ background:var(--ds-gris) }
.ds-sec-sombre{ background:var(--ds-nuit); color:#fff }
.ds-sec-sombre h2{ color:#fff }

.ds-hero > .container,.ds-sec > .container{
  max-width:var(--ds-large); width:100%; margin:0 auto;
  padding:0 var(--ds-marge); box-sizing:border-box }

.ds-hero-grid{ display:grid; grid-template-columns:1fr; gap:20px; align-items:center }
.ds-eyebrow{ display:inline-flex; align-items:center; gap:8px;
  background:var(--ds-bleu-c); color:var(--ds-bleu); font-size:13px;
  font-weight:600; padding:7px 14px; border-radius:99px; margin-bottom:18px }
.ds-souligne{ position:relative; color:var(--ds-bleu) }
.ds-souligne::after{ content:""; position:absolute; left:0; right:0; bottom:3px;
  height:10px; background:rgba(6,182,212,.28); z-index:-1; border-radius:3px }
.ds-lead{ font-size:16px; color:var(--ds-ardoise); margin-bottom:24px; max-width:100% }
.ds-cta{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; width:100% }
.ds-cta .btn{ width:100%; justify-content:center; box-sizing:border-box }
.ds-rassure{ display:flex; flex-direction:column; gap:8px; list-style:none;
  padding:0; margin:0; font-size:13.5px; color:var(--ds-ardoise) }
.ds-rassure li{ display:flex; align-items:center; gap:7px }
.ds-rassure li::before{ content:"✓"; color:var(--ds-turq-f); font-weight:700 }

.ds-tag{ font-size:12px; font-weight:700; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--ds-turq-f); margin-bottom:10px }
.ds-sec-sombre .ds-tag{ color:var(--ds-turq) }
.ds-sec-lead{ font-size:16px; color:var(--ds-ardoise); max-width:620px;
  margin-bottom:30px }
.ds-sec-sombre .ds-sec-lead{ color:#94A3B8 }

.ds-cards{ display:grid; grid-template-columns:1fr; gap:16px }
.ds-card{ background:#fff; border:1px solid var(--ds-bord);
  border-radius:var(--ds-r); padding:22px; transition:.2s }
.ds-card:hover{ border-color:var(--ds-bleu); box-shadow:var(--ds-ombre) }
.ds-ico{ width:44px; height:44px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; font-size:20px;
  margin-bottom:14px; background:var(--ds-bleu-c) }
.ds-card h3{ font-size:17px; margin-bottom:8px }
.ds-card p{ font-size:14.5px; color:var(--ds-ardoise); margin:0 }

/* Les trois clés USB — élément signature, disposées en éventail */
.ds-cle-scene{ display:flex; align-items:center; justify-content:center;
  min-height:215px; overflow:visible }
.ds-cles{ position:relative; width:360px; height:262px;
  transform:scale(.62); transform-origin:center }
.ds-cle{ position:absolute; top:0; left:24px; display:block;
  text-decoration:none; --r:0deg;
  transform:rotate(var(--r));
  filter:drop-shadow(0 16px 32px rgba(15,23,42,.20));
  transition:transform .3s cubic-bezier(.2,.7,.3,1), filter .3s ease }
.ds-cle-1{ --r:-11deg; top:0; left:30px }
.ds-cle-2{ --r:-3deg; top:76px; left:48px }
.ds-cle-3{ --r:5deg; top:152px; left:18px }
/* La clé survolée se redresse et passe devant les autres */
.ds-cle:hover,.ds-cle:focus-visible{
  z-index:6; outline:0;
  transform:rotate(var(--r)) translate(-6px,-9px) scale(1.045);
  filter:drop-shadow(0 26px 46px rgba(15,23,42,.32)) }
.ds-cle:focus-visible .ds-cle-corps{ box-shadow:0 0 0 3px var(--ds-turq) }
.ds-cle-corps{ width:250px; height:96px; border-radius:20px; display:flex;
  align-items:center; padding:0 22px; position:relative;
  background:linear-gradient(145deg,var(--ds-bleu-f),var(--ds-bleu) 55%,#2563EB) }
.ds-cle-anneau{ position:absolute; left:-15px; top:34px; width:28px; height:28px;
  border:5px solid #94A3B8; border-radius:50% }
.ds-cle-txt{ color:#fff }
.ds-cle-txt b{ font-family:Poppins,sans-serif; font-weight:700; font-size:17px;
  display:block; letter-spacing:.4px }
.ds-cle-txt em{ font-style:normal; font-size:11px; color:#93C5FD;
  letter-spacing:2.4px; font-weight:600 }
.ds-cle-metal{ position:absolute; right:-56px; top:26px; width:60px; height:44px;
  border-radius:5px; background:linear-gradient(180deg,#E2E8F0,#94A3B8 50%,#CBD5E1) }
.ds-cle-metal::after{ content:""; position:absolute; inset:9px 8px;
  border-radius:2px; background:linear-gradient(180deg,#475569,#334155) }
/* Prix unique : une seule étiquette pour les trois modèles */
.ds-badge{ position:absolute; right:-6px; top:202px; z-index:7;
  background:var(--ds-ambre);
  color:#78350F; font-family:Poppins,sans-serif; font-weight:800; font-size:22px;
  padding:13px 22px; border-radius:14px; transform:rotate(5deg);
  box-shadow:0 10px 26px rgba(245,158,11,.4); pointer-events:none }
.ds-badge small{ display:block; font-size:10.5px; font-weight:600; opacity:.85 }

/* Démonstration du correcteur */
.ds-demo-grid{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start }
.ds-demo{ background:#fff; border-radius:var(--ds-r); padding:20px;
  border:1px solid var(--ds-bord); font-size:16px; line-height:2.1;
  color:var(--ds-nuit) }
/* Faute : surlignée comme dans l'application — fond ambré et vaguelette */
.ds-faute{ border-bottom:2.5px wavy var(--ds-ambre); padding:1px 3px;
  background:rgba(245,158,11,.16); border-radius:4px;
  box-shadow:0 0 0 1px rgba(245,158,11,.22);
  transition:background .15s ease, box-shadow .15s ease }
.ds-faute[data-t]{ cursor:help }
/* Mot pas encore écrit : aucun surlignage visible */
.ds-faute.ds-vide{ background:none; box-shadow:none; border-bottom:0; padding:0 }
.ds-faute[data-t]:hover,.ds-faute[data-t]:focus{
  background:rgba(245,158,11,.32); box-shadow:0 0 0 1px rgba(245,158,11,.5);
  outline:0 }
.ds-faute-r{ border-color:#EF4444; background:rgba(239,68,68,.16);
  box-shadow:0 0 0 1px rgba(239,68,68,.22) }

/* Bulle d'explication au survol d'une faute */
.ds-pop{ position:fixed; z-index:1200; max-width:310px; box-sizing:border-box;
  background:#1E293B; color:#fff; border:1px solid #334155; border-radius:12px;
  padding:13px 16px; font-size:14px; line-height:1.55;
  box-shadow:0 18px 44px rgba(2,6,23,.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(5px); transition:opacity .15s ease, transform .15s ease }
.ds-pop.ds-pop-on{ opacity:1; visibility:visible; transform:none }
.ds-pop-t{ font-family:Poppins,sans-serif; font-weight:600;
  color:var(--ds-turq); font-size:14.5px; margin-bottom:6px }
.ds-pop-e{ color:#CBD5E1; font-size:13px; margin-top:5px }
.ds-pop-e b{ color:#fff }
.ds-pop-fl{ position:absolute; bottom:-7px; width:12px; height:12px;
  background:#1E293B; border-right:1px solid #334155;
  border-bottom:1px solid #334155; transform:rotate(45deg) }
.ds-pop-bas .ds-pop-fl{ bottom:auto; top:-7px;
  border:0; border-left:1px solid #334155; border-top:1px solid #334155 }

/* Curseur de frappe : les textes non encore écrits sont vides, il se place
   donc naturellement juste après le dernier caractère affiché. */
.ds-demo.ds-tape::after{
  content:''; display:inline-block; width:2px; height:1.05em;
  background:var(--ds-bleu); vertical-align:-.18em; margin-left:2px;
  animation:ds-clign .85s steps(1) infinite }
@keyframes ds-clign{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
.ds-bulle{ background:#1E293B; color:#fff; border-radius:12px; padding:15px 18px;
  margin-bottom:12px; font-size:14px; line-height:1.6 }
.ds-bulle-t{ font-family:Poppins,sans-serif; font-weight:600; color:var(--ds-turq);
  margin-bottom:6px; font-size:14.5px }
.ds-bulle-r{ color:#CBD5E1; font-size:13px; margin-top:4px }
.ds-bulle-r b{ color:#fff }

@media (min-width:992px){
  .ds-hero{ padding:70px 0 84px }
  .ds-sec{ padding:78px 0 }
  .ds-hero-grid{ grid-template-columns:1.06fr .94fr; gap:56px }
  h1,.h1{ font-size:clamp(34px,4vw,52px) }
  h2,.h2{ font-size:clamp(26px,3vw,36px) }
  .ds-lead{ font-size:18.5px; max-width:530px; margin-bottom:30px }
  .ds-cta{ flex-direction:row; flex-wrap:wrap; width:auto }
  .ds-cta .btn{ width:auto }
  .ds-rassure{ flex-direction:row; gap:22px; font-size:14px }
  .ds-cards{ grid-template-columns:repeat(3,1fr); gap:22px }
  .ds-demo-grid{ grid-template-columns:repeat(2,1fr); gap:22px }
  .ds-demo{ font-size:19px; line-height:2.4; padding:30px }
  .ds-cle-scene{ min-height:330px }
  .ds-cles{ transform:scale(.92) }
}

/* ═══ 6. PAGES BOUTIQUE ═════════════════════════════════════════════════ */

#wrapper > .container{ max-width:var(--ds-large); width:100%;
  padding:0 var(--ds-marge); margin:0 auto; box-sizing:border-box }
#index #wrapper{ padding:0 }
#index #wrapper > .container{ max-width:none; padding:0 }
#index #content-wrapper{ max-width:none; padding:0; width:100% }
#index .breadcrumb{ display:none }

/* Fiche produit */
.product-price,.price,
#product .product-prices .current-price span[itemprop=price]{
  font-family:Poppins,sans-serif; font-weight:800; color:var(--ds-bleu);
  font-size:32px; letter-spacing:-.02em }
.product-add-to-cart{ border-top:1px solid var(--ds-bord);
  padding-top:22px; margin-top:22px }
.product-add-to-cart .product-quantity{ display:flex; align-items:flex-end;
  gap:12px; flex-wrap:wrap; margin:0 }
.product-add-to-cart .qty{ flex:0 0 auto; margin:0 }
.product-add-to-cart .qty .input-group{ width:110px }
.product-add-to-cart .qty input.form-control{ height:54px; text-align:center;
  font-size:16px; font-weight:600 }
.product-add-to-cart .add{ flex:1 1 240px; margin:0; display:flex }
#product .add-to-cart{ width:100%; height:54px; padding:0 24px; font-size:17px;
  display:inline-flex; align-items:center; justify-content:center;
  margin:0; line-height:1 }
#product .add-to-cart i{ margin-right:9px; font-size:21px }
.product-cover img{ border-radius:var(--ds-r); border:1px solid var(--ds-bord) }

/* Onglets, déplacés sous les colonnes par le script */
#product .tabs.ds-tabs-full{ clear:both; width:100%; max-width:var(--ds-large);
  margin:36px auto 0; padding:10px 20px 24px; float:none;
  border:1px solid var(--ds-bord); border-radius:var(--ds-r); background:#fff }
.tabs .nav-tabs{ border-bottom:1px solid var(--ds-bord); flex-wrap:wrap }
.tabs .nav-tabs .nav-link{ font-family:Poppins,sans-serif; font-weight:600;
  color:var(--ds-ardoise); border:0; border-bottom:3px solid transparent;
  padding:12px 4px; margin-right:24px }
.tabs .nav-tabs .nav-link.active{ color:var(--ds-bleu); border-bottom-color:var(--ds-bleu) }
.tabs .tab-content{ padding-top:20px }

/* Vignettes */
.product-miniature .thumbnail-container{ background:#fff;
  border:1px solid var(--ds-bord); border-radius:var(--ds-r);
  box-shadow:none; transition:.2s; height:auto }
.product-miniature .thumbnail-container:hover{ border-color:var(--ds-bleu);
  box-shadow:var(--ds-ombre) }
.product-miniature .product-title a{ font-family:Poppins,sans-serif;
  font-weight:600; color:var(--ds-nuit); font-size:16px }
.product-miniature .product-price-and-shipping{ font-family:Poppins,sans-serif;
  font-weight:700; color:var(--ds-bleu); font-size:20px }
.product-flags li.product-flag{ background:var(--ds-ambre); color:#78350F;
  font-family:Poppins,sans-serif; font-weight:700; font-size:12px;
  border-radius:99px; padding:5px 12px }
.product-flags li.product-flag.new{ background:var(--ds-turq); color:#fff }

/* Formulaires */
.form-control,input[type=text],input[type=email],input[type=password],
textarea,select{ border:1.5px solid var(--ds-bord); border-radius:var(--ds-r-s);
  padding:12px 15px; font-family:Inter,sans-serif; font-size:15px;
  color:var(--ds-nuit); background:#fff }
.form-control:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--ds-bleu); box-shadow:0 0 0 3px rgba(29,78,216,.1); outline:0 }

/* Alertes */
.alert{ border:0; border-left:4px solid;
  border-radius:0 var(--ds-r-s) var(--ds-r-s) 0; padding:15px 19px; font-size:15px }
.alert-success{ background:#ECFDF5; border-color:#10B981; color:#065F46 }
.alert-danger{ background:#FEF2F2; border-color:#EF4444; color:#991B1B }
.alert-warning{ background:#FFFBEB; border-color:var(--ds-ambre); color:#92400E }
.alert-info{ background:var(--ds-bleu-c); border-color:var(--ds-bleu); color:var(--ds-bleu-f) }

/* Tunnel de commande */
#checkout .checkout-step{ border:1px solid var(--ds-bord);
  border-radius:var(--ds-r); margin-bottom:16px; box-shadow:none }
#checkout .step-title{ font-family:Poppins,sans-serif; font-weight:600;
  font-size:18px; padding:20px 22px }
#checkout .step-number{ background:var(--ds-bleu); color:#fff; border-radius:50%;
  width:30px; height:30px; display:inline-flex; align-items:center;
  justify-content:center; font-family:Poppins,sans-serif; font-weight:700;
  font-size:15px; margin-right:12px }
.cart-total .value{ font-family:Poppins,sans-serif; font-weight:800;
  color:var(--ds-bleu); font-size:22px }

@media (min-width:1400px){
  #category #js-product-list .products{
    display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
  #category #js-product-list .products > article{
    width:100%; max-width:none; flex:none; padding:0 }
}

/* ═══ 7. RÉASSURANCE ════════════════════════════════════════════════════ */

.block-reassurance{ background:var(--ds-gris); border-top:1px solid var(--ds-bord);
  border-bottom:1px solid var(--ds-bord); border-radius:0; padding:18px 0;
  margin:0; width:100% }
.block-reassurance ul{ display:flex; flex-wrap:wrap; justify-content:center;
  align-items:stretch; gap:4px 0; max-width:var(--ds-large); margin:0 auto;
  padding:0 var(--ds-marge); list-style:none; width:100%; box-sizing:border-box }
.block-reassurance li{ border:0; flex:1 1 50%; min-width:0; margin:0; padding:0;
  display:flex; justify-content:center }
.block-reassurance-item{ display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:8px; padding:12px 8px; width:100% }
.block-reassurance-item img,.block-reassurance-item svg{
  width:30px; height:30px; margin:0; flex:0 0 auto }
.block-reassurance-item span{ font-size:12.5px; font-weight:600;
  color:var(--ds-nuit); line-height:1.4 }

@media (min-width:768px){
  .block-reassurance{ padding:26px 0 }
  .block-reassurance li{ flex:1 1 0; min-width:170px }
  .block-reassurance li + li{ border-left:1px solid var(--ds-bord) }
  .block-reassurance-item img,.block-reassurance-item svg{ width:38px; height:38px }
  .block-reassurance-item span{ font-size:14px }
}

/* ═══ 8. PIED DE PAGE ═══════════════════════════════════════════════════ */

#footer{ background:var(--ds-nuit); color:#94A3B8; padding:0 }
#footer .footer-container{ background:transparent; box-shadow:none;
  padding:36px 0 0; margin:0 }
#footer .footer-container > .container{ max-width:var(--ds-large);
  padding:0 var(--ds-marge); margin:0 auto; box-sizing:border-box }
#footer ::selection{ background:rgba(6,182,212,.35); color:#fff }
#footer .ds-cache{ display:none }


/* La rangée : colonnes de liens + lettre d'information */
.ds-ft-row{ display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:26px; margin:0; width:100%; text-align:left }
.ds-ft-row > .links,
.ds-ft-row > .wrapper,
.ds-ft-row > #block_myaccount_infos{
  flex:1 1 100%; width:auto; padding:0; margin:0; text-align:left;
  border-top:0; padding-top:0; margin-top:0 }
.ds-ft-row > .ds-ft-nl{ flex:1 1 100%; padding:0; margin:0;
  background:transparent; border:0; text-align:left }
.ds-ft-row > [class*="wishlist-"]{ display:none }

/* Titres : blancs, sur une ligne, même hauteur partout */
#footer .h3,#footer .title,#footer .myaccount-title,
#footer .h3 *,#footer .title *,#footer .myaccount-title *,
.ds-ft-nl .h3,.ds-ft-nl p:first-child{
  font-family:Poppins,sans-serif; font-size:15.5px; font-weight:600;
  color:#FFFFFF; text-transform:none; letter-spacing:0;
  margin:0 0 16px; padding:0; line-height:22px; white-space:nowrap; opacity:1 }
/* Doublon de titre masqué par le script */
#footer .ds-titre-double{ display:none }
#footer .material-icons{ display:none }

/* Liens */
#footer ul,#footer .account-list{ margin:0; padding:0; list-style:none }
#footer li{ margin:0; padding:0; border:0 }
#footer li a{ color:#94A3B8; font-size:14.5px; padding:6px 0; display:block }
#footer li a:hover{ color:var(--ds-turq) }

/* Titre de la lettre d'information : le thème lui applique une couleur
   sombre, illisible sur le fond nuit du pied de page. On force le blanc,
   quel que soit l'emballage utilisé (h3, .h3, .title). */
#footer .block_newsletter .h3,#footer .block_newsletter .h3 *,
#footer .block_newsletter h3,#footer .block_newsletter h3 *,
#footer .block_newsletter .title,#footer .block_newsletter .title *,
#footer .block_newsletter p:first-child,
.ds-ft-nl .h3,.ds-ft-nl .h3 *,.ds-ft-nl h3,.ds-ft-nl h3 *,
.ds-ft-nl .title,.ds-ft-nl .title *,
.ds-ft-nl > .row > [class*="col-"] > p:first-child{
  color:#FFFFFF !important; opacity:1 !important }

/* Lettre d'information */
.ds-ft-nl .row{ display:block; margin:0; padding:0; max-width:none }
.ds-ft-nl [class*="col-"]{ width:100%; max-width:none; flex:none; padding:0 }
.ds-ft-nl form{ display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:center; gap:10px; margin:0 0 10px; width:100% }
.ds-ft-nl input[type=email],.ds-ft-nl input[type=text]{
  order:1; flex:1 1 200px; min-width:0; height:48px; box-sizing:border-box;
  background:#1E293B; border:1px solid #334155; color:#fff;
  border-radius:var(--ds-r-s); padding:0 16px; font-size:15px }
.ds-ft-nl input::placeholder{ color:#64748B }
.ds-ft-nl input:focus{ border-color:var(--ds-bleu); outline:0 }
.ds-ft-nl button[type=submit],.ds-ft-nl .btn-primary{
  order:2; flex:0 0 auto; white-space:nowrap; height:48px; margin:0;
  background:var(--ds-bleu); border:0; color:#fff;
  border-radius:var(--ds-r-s); padding:0 26px;
  font-family:Poppins,sans-serif; font-weight:600; font-size:15px; cursor:pointer }
.ds-ft-nl button[type=submit]:hover{ background:var(--ds-turq-f) }
.ds-ft-nl form button + button,.ds-ft-nl form .btn + .btn{ display:none }
.ds-ft-nl em,.ds-ft-nl p:last-child,.ds-ft-nl .newsletter-conditions{
  order:9; display:block; width:100%; margin:0; font-weight:400;
  font-size:12px; line-height:1.5; color:#64748B; white-space:normal }

/* Mention de bas de page */
#footer .ds-copy{ display:block; width:100%; clear:both;
  border-top:1px solid #1E293B; margin:30px 0 0; padding:20px var(--ds-marge);
  text-align:center; font-size:13px; color:#64748B; box-sizing:border-box }

@media (min-width:768px){
  .ds-ft-row > .links,
  .ds-ft-row > .wrapper,
  .ds-ft-row > #block_myaccount_infos{ flex:1 1 45% }
}
@media (min-width:992px){
  #footer .footer-container{ padding:46px 0 0 }
  .ds-ft-row{ flex-wrap:nowrap; gap:40px }
  .ds-ft-row > .links,
  .ds-ft-row > .wrapper,
  .ds-ft-row > #block_myaccount_infos{
    flex:0 0 auto; width:auto; min-width:210px; max-width:280px }
  .ds-ft-row > .ds-ft-nl{ flex:1 1 auto; margin-left:auto; max-width:520px }
  #footer li a{ white-space:nowrap }
  .ds-ft-nl form{ flex-wrap:nowrap }
}

/* ═══ 9. ACCESSIBILITÉ ══════════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto }
}

/* ═══ 10. GARDE-FOU MOBILE ═══════════════════════════════════════════════
   Dernière barrière contre le débordement horizontal : la page d'accueil
   utilise des sections pleine largeur qui, combinées aux marges du thème,
   dépassaient la fenêtre.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:991px){
  html,body{ width:100%; max-width:100%; height:auto;
    margin:0; padding:0 }
  #index #wrapper > .container,
  #index #content-wrapper,
  #index #main{ margin:0; padding:0; width:100%; max-width:100% }
  .ds-hero,.ds-sec{ margin:0; width:100%; max-width:100% }
  .ds-hero > .container,.ds-sec > .container{
    width:100%; max-width:100%; margin:0;
    padding-left:16px; padding-right:16px }
  /* Le texte long ne pousse plus la mise en page */
  .ds-hero h1,.ds-sec h2,.ds-lead,.ds-sec-lead,.ds-card p{
    max-width:100%; overflow-wrap:break-word; word-break:normal; hyphens:auto }
}

/* ═══ 11. CORRECTIFS CIBLÉS ══════════════════════════════════════════════
   Diagnostic : .row mesurait 460px sur un écran de 430px, positionné à
   -15px. C'est la marge négative de Bootstrap (margin:0 -15px), que les
   colonnes compensent normalement par leur padding. Sur la page d'accueil
   où le padding est retiré, elle fait déborder toute la page.
   ═══════════════════════════════════════════════════════════════════════ */

/* La marge négative est neutralisée des DEUX côtés */
#wrapper .row,
#index .row,
.js-content-wrapper,
#content-wrapper > .row{
  margin-left:0; margin-right:0; max-width:100%; width:100% }

/* Le logo : Bootstrap applique hidden-sm-down avec display:none !important,
   il faut donc la même arme pour le rétablir. */
@media (max-width:991px){
  #header .header-top #_desktop_logo,
  #header .header-top #_desktop_logo.hidden-sm-down,
  #header #_desktop_logo.col-md-2{ display:block !important }
  #_desktop_logo img,#_desktop_logo .logo{ display:block; max-height:44px;
    width:auto; height:auto }
}

/* ═══ 12. BOUTON BURGER ══════════════════════════════════════════════════
   Le thème ne place aucun bouton visible dans l'en-tête mobile : le module
   remonte le sien, ou en crée un si nécessaire.
   ═══════════════════════════════════════════════════════════════════════ */
.ds-burger{
  order:2; display:flex; flex-direction:column; justify-content:center;
  gap:5px; width:44px; height:44px; padding:10px 8px; margin:0;
  background:none; border:0; cursor:pointer; flex:0 0 auto }
.ds-burger span{
  display:block; height:2.5px; width:100%; background:var(--ds-bleu);
  border-radius:2px; transition:transform .2s, opacity .2s }
.ds-burger-on span:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
.ds-burger-on span:nth-child(2){ opacity:0 }
.ds-burger-on span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }
.ds-burger:hover span{ background:var(--ds-bleu-f) }

/* Bouton fourni par le thème : même position, même taille */
#menu-icon.ds-burger,.menu-icon.ds-burger{
  align-items:center; justify-content:center; color:var(--ds-bleu) }
#menu-icon.ds-burger .material-icons{ display:block; font-size:30px }

@media (min-width:992px){
  .ds-burger{ display:none !important }
}

/* ═══ 13. MENU DU COMPTE CLIENT ══════════════════════════════════════════
   Une fois connecté, le nom devient un bouton qui ouvre un petit menu.
   La déconnexion reste accessible sans encombrer la barre.
   ═══════════════════════════════════════════════════════════════════════ */
.ds-compte{ position:relative; display:inline-block }
.ds-compte-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; cursor:pointer; padding:9px 11px;
  border-radius:var(--ds-r-s); font-family:Inter,sans-serif;
  font-size:14.5px; font-weight:500; color:var(--ds-ardoise) }
.ds-compte-btn:hover{ background:var(--ds-gris); color:var(--ds-bleu) }
.ds-compte-ico{
  width:26px; height:26px; border-radius:50%; background:var(--ds-bleu-c);
  color:var(--ds-bleu); display:inline-flex; align-items:center;
  justify-content:center; font-size:11px; flex-shrink:0 }
.ds-compte-nom{ white-space:nowrap; max-width:150px;
  overflow:hidden; text-overflow:ellipsis }
.ds-compte-fl{ font-size:10px; transition:transform .18s }
.ds-compte-on .ds-compte-fl{ transform:rotate(180deg) }

.ds-compte-menu{
  display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:200;
  min-width:190px; background:#fff; border:1px solid var(--ds-bord);
  border-radius:var(--ds-r-s); box-shadow:var(--ds-ombre); padding:6px }
.ds-compte-on .ds-compte-menu{ display:block }
.ds-compte-menu a{
  display:block; padding:10px 13px; font-size:14.5px; color:var(--ds-nuit);
  border-radius:7px; white-space:nowrap }
.ds-compte-menu a:hover{ background:var(--ds-bleu-c); color:var(--ds-bleu) }
.ds-compte-sortie{ color:var(--ds-ardoise) !important;
  border-top:1px solid var(--ds-bord); margin-top:4px; padding-top:11px }
.ds-compte-sortie:hover{ background:#FEF2F2 !important; color:#DC2626 !important }

/* Le lien de contact est retiré de la barre */
.ds-header-right #_desktop_contact_link{ display:none }

@media (max-width:991px){
  .ds-compte-nom,.ds-compte-fl{ display:none }
  .ds-compte-btn{ padding:7px 6px }
  .ds-compte-menu{ right:0; min-width:170px }
}

/* ═══ 14. TITRE DU PIED DE PAGE — CLIENT CONNECTÉ ════════════════════════
   Une fois connecté, le thème remplace le bloc compte et applique une
   autre couleur au titre : il devenait illisible sur le fond nuit.
   ═══════════════════════════════════════════════════════════════════════ */
#footer #block_myaccount_infos .h3,
#footer #block_myaccount_infos .h3 a,
#footer #block_myaccount_infos .h3 span,
#footer #block_myaccount_infos .myaccount-title,
#footer #block_myaccount_infos .myaccount-title a,
#footer .account-list .h3,
#footer .ds-ft-row > * > .h3,
#footer .ds-ft-row > * > .h3 *{
  color:#FFFFFF !important; opacity:1 !important;
  font-family:Poppins,sans-serif; font-size:15.5px; font-weight:600;
  text-transform:none; letter-spacing:0 }

/* ═══ 15. EN-TÊTE COLLANT ════════════════════════════════════════════════
   La barre reste accessible au défilement : le bouton d'achat et le
   panier restent à portée sans devoir remonter.
   ═══════════════════════════════════════════════════════════════════════ */

/* Une ombre apparaît dès qu'on quitte le haut de page */
#header.ds-colle{ box-shadow:0 2px 16px rgba(15,23,42,.10) }

@media (min-width:992px){
  /* La barre se compacte au défilement pour libérer de la place */
  #header.ds-colle .header-top .row{ min-height:68px }
  #header.ds-colle #_desktop_logo img{ max-height:52px; transition:max-height .2s }
  #_desktop_logo img{ transition:max-height .2s }
}
@media (max-width:991px){
  #header.ds-colle .header-top .row{ padding:8px 0 }
  /* Sur petit écran, la recherche se replie au défilement */
  #header.ds-colle #search_widget{ display:none }
}
/* Le mode admin de PrestaShop décale la page : on en tient compte */
body.ds-barre-admin #header{ top:0 }

/* ═══ 16. LOGO — CENTRAGE VERTICAL ═══════════════════════════════════════
   Le h1 qui entoure le logo a une hauteur de ligne nulle : l'image se
   calait en haut de la barre au lieu d'être centrée.
   ═══════════════════════════════════════════════════════════════════════ */
#header .header-top .row{ align-items:center }
#header #_desktop_logo{
  display:flex; align-items:center; align-self:center }
#_desktop_logo h1{
  display:flex; align-items:center; margin:0; padding:0; line-height:1 }
#_desktop_logo a{ display:flex; align-items:center; line-height:0 }
#_desktop_logo img{ display:block; margin:0 }

/* ═══ 17. LOGO — CENTRAGE RÉEL ═══════════════════════════════════════════
   Le logo (78px) dépassait la hauteur utile de la barre : il apparaissait
   décalé vers le bas. On borne sa hauteur et on centre à chaque niveau.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
  #header .header-top .row{
    display:flex; align-items:center; min-height:92px }
  #header #_desktop_logo{
    display:flex; align-items:center; justify-content:center;
    height:92px; padding:0; margin:0 }
  #_desktop_logo h1,#_desktop_logo a{
    display:flex; align-items:center; justify-content:center;
    height:100%; margin:0; padding:0; line-height:1 }
  #_desktop_logo img{
    display:block; margin:0; max-height:56px; width:auto; object-fit:contain }

  /* Barre compactée au défilement : le logo suit */
  #header.ds-colle .header-top .row{ min-height:68px }
  #header.ds-colle #_desktop_logo{ height:68px }
  #header.ds-colle #_desktop_logo img{ max-height:44px }
}

/* ═══ 18. LOGO CENTRÉ SUR LA PAGE ════════════════════════════════════════
   Jusqu'ici la position du logo dépendait de la largeur du menu et du
   bloc de droite : il se décalait selon leur contenu. On le sort du flux
   pour le centrer sur la page, quelles que soient ses voisines.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
  #header .header-top .row{ position:relative }

  #header #_desktop_logo{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%, -50%);
    display:flex; align-items:center; justify-content:center;
    height:auto; width:auto; margin:0; padding:0; z-index:5 }
  #_desktop_logo h1,#_desktop_logo a{
    display:flex; align-items:center; justify-content:center;
    margin:0; padding:0; line-height:1; height:auto }
  #_desktop_logo img{ display:block; margin:0; max-height:56px;
    width:auto; object-fit:contain }

  /* Le menu et les outils occupent chacun leur moitié, sans se chevaucher */
  #header #_desktop_top_menu{ flex:1 1 0; margin:0; padding-right:170px }
  .ds-header-right{ flex:1 1 0; justify-content:flex-end; padding-left:170px }

  /* Au défilement, le logo se réduit avec la barre */
  #header.ds-colle #_desktop_logo img{ max-height:44px }
}

/* ═══ 19. BARRE RÉDUITE AU DÉFILEMENT ════════════════════════════════════
   Au repos : menu | logo centré | contact, panier, recherche
   Au défilement : burger | logo réduit | recherche
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:992px){

  /* Le burger n'existe qu'une fois la barre réduite */
  .ds-mini-btn{
    display:none; order:1; flex-direction:column; justify-content:center;
    gap:5px; width:42px; height:42px; padding:9px 7px; margin:0;
    background:none; border:0; cursor:pointer; flex:0 0 auto; z-index:6 }
  .ds-mini-btn span{
    display:block; height:2.5px; width:100%; background:var(--ds-bleu);
    border-radius:2px; transition:transform .2s, opacity .2s }
  .ds-mini-btn-on span:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
  .ds-mini-btn-on span:nth-child(2){ opacity:0 }
  .ds-mini-btn-on span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }

  /* Panneau déroulant du burger */
  .ds-mini-menu{
    display:none; position:absolute; left:var(--ds-marge); top:100%;
    min-width:230px; background:#fff; border:1px solid var(--ds-bord);
    border-radius:var(--ds-r-s); box-shadow:var(--ds-ombre);
    padding:8px; margin-top:6px; z-index:120 }
  .ds-mini-menu.ds-mini-on{ display:block }
  .ds-mini-menu ul{ display:block; margin:0; padding:0; list-style:none }
  .ds-mini-menu li{ display:block; float:none }
  .ds-mini-menu a{
    display:block; padding:11px 14px; border-radius:7px; white-space:nowrap;
    font-family:Poppins,sans-serif; font-weight:500; font-size:15px;
    text-transform:none; letter-spacing:0; color:var(--ds-nuit) }
  .ds-mini-menu a:hover{ background:var(--ds-bleu-c); color:var(--ds-bleu) }
  .ds-mini-menu .sub-menu{ position:static; display:none; box-shadow:none;
    border:0; margin:0; padding-left:12px }

  /* ── Une fois la barre réduite ── */
  #header.ds-colle .header-top .row{ min-height:58px }

  /* Le burger apparaît, le menu horizontal disparaît */
  #header.ds-colle .ds-mini-btn{ display:flex }
  #header.ds-colle #_desktop_top_menu{ display:none }

  /* Logo réduit, toujours centré */
  #header.ds-colle #_desktop_logo img{ max-height:34px }

  /* Contact et panier se replient : seule la recherche reste */
  #header.ds-colle .ds-header-right{
    padding-left:0; flex:1 1 auto; justify-content:flex-end }
  #header.ds-colle .ds-header-right #_desktop_contact_link,
  #header.ds-colle .ds-header-right #_desktop_user_info,
  #header.ds-colle .ds-header-right .ds-compte{ display:none }
  #header.ds-colle .ds-header-right #_desktop_cart a{ padding:6px 9px }
  #header.ds-colle #search_widget{ flex:0 0 190px; width:190px }
  #header.ds-colle #search_widget input[type=text]{ height:36px; font-size:13.5px }
}

/* ═══ 20. EN-TÊTE COLLANT — CONDITIONS REQUISES ══════════════════════════
   position:sticky ne fonctionne que si AUCUN ancêtre n'a overflow autre
   que visible. Or nous avons posé overflow-x:hidden sur html, body et
   #wrapper pour empêcher le débordement mobile — ce qui neutralisait
   l'effet collant. On utilise clip, qui n'a pas cet inconvénient.
   ═══════════════════════════════════════════════════════════════════════ */
/* clip doit être borné à l'axe horizontal, sinon il tronque aussi la
   hauteur : la page mesurait exactement l'écran et ne défilait plus. */
/* AUCUN overflow sur html/body : position:sticky cesse de fonctionner
   dès qu'un ancêtre en possède un. Le débordement horizontal est
   contenu au niveau des sections, pas de la racine. */
html,body{ height:auto; margin:0; padding:0 }
#wrapper,#main,#content,#content-wrapper,
#footer,section,article{ overflow-x:clip; overflow-y:visible; height:auto }

/* Aucun ancêtre de l'en-tête ne doit créer de contexte de défilement */
#page,#wrapper,.js-content-wrapper{ overflow:visible }



/* L'en-tête laisse dépasser ses menus déroulants */
#header{ overflow:visible }

/* ═══ 21. EN-TÊTE — HAUTEUR ET ADHÉRENCE ═════════════════════════════════
   Le logo étant positionné en absolu, il ne participe plus à la hauteur
   de la rangée : celle-ci s'était effondrée et coupait le logo.
   ═══════════════════════════════════════════════════════════════════════ */

/* L'en-tête colle vraiment, et rien ne le rogne */

#header.ds-colle{ box-shadow:0 2px 16px rgba(15,23,42,.10) }

@media (min-width:992px){
  /* Hauteur imposée : le logo en absolu ne la fournit plus */
  #header .header-top .row{
    position:relative; min-height:92px; height:92px;
    display:flex; align-items:center; transition:height .2s }
  #header.ds-colle .header-top .row{ min-height:58px; height:58px }

  /* Le logo reste centré et complet */
  #header #_desktop_logo{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    display:flex; align-items:center; justify-content:center;
    height:auto; width:auto; margin:0; padding:0; z-index:5;
    max-width:280px }
  #_desktop_logo img{ display:block; max-height:56px; width:auto;
    height:auto; transition:max-height .2s }
  #header.ds-colle #_desktop_logo img{ max-height:34px }
}

@media (max-width:991px){
  #header .header-top .row{ min-height:0; height:auto; padding:12px 0 }
}

/* ═══ 22. EN-TÊTE COLLANT — RÈGLE UNIQUE ═════════════════════════════════
   Déclaré une seule fois, en fin de fichier. Aucun ancêtre ne doit
   porter d'overflow, sinon l'adhérence est annulée.
   ═══════════════════════════════════════════════════════════════════════ */
#header{
  position:-webkit-sticky; position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.97); overflow:visible;
  border-bottom:1px solid var(--ds-bord);
  transition:box-shadow .2s }
#header.ds-colle{ box-shadow:0 2px 16px rgba(15,23,42,.10) }

/* Le débordement horizontal est contenu ici, pas sur html/body */
.ds-hero,.ds-sec,#footer,#wrapper,#content-wrapper{
  overflow-x:clip; overflow-y:visible; max-width:100% }

/* ═══ 23. BARRE RÉDUITE — BURGER À GAUCHE ════════════════════════════════
   Le burger était inséré en début de rangée mais l'ordre flex le renvoyait
   à droite, contre le panier. On fixe explicitement les trois positions :
   burger tout à gauche · logo centré · panier et recherche à droite.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
  #header.ds-colle .header-top .row{
    display:flex; align-items:center; justify-content:flex-start;
    padding-left:var(--ds-marge) }

  /* Burger : tout à gauche */
  #header.ds-colle .ds-mini-btn{
    display:flex; order:0 !important;
    margin:0 auto 0 0; flex:0 0 auto }

  /* Panneau du menu aligné sous le burger */
  #header.ds-colle .ds-mini-menu{ left:var(--ds-marge); right:auto }

  /* Outils : tout à droite */
  #header.ds-colle .ds-header-right{
    order:5; margin-left:auto; padding-left:0; flex:0 0 auto }
}

/* ═══ 24. TUNNEL DE COMMANDE — EN-TÊTE ═══════════════════════════════════
   PrestaShop masque l'en-tête complet pendant le paiement, pour limiter
   les distractions. Mais sans logo, le client ne peut plus revenir au
   site ni vérifier où il se trouve — ce qui inquiète au moment de payer.
   ═══════════════════════════════════════════════════════════════════════ */
#checkout #header,
#order #header,
#order-opc #header{
  display:block !important; position:static;
  border-bottom:1px solid var(--ds-bord); background:#fff; padding:0 }

#checkout #header .header-top,
#order #header .header-top{ padding:0 }

#checkout #header .header-top .row,
#order #header .header-top .row{
  display:flex !important; align-items:center; justify-content:center;
  min-height:88px; height:88px; position:relative;
  max-width:var(--ds-large); margin:0 auto; padding:0 var(--ds-marge) }

/* Sur le tunnel, le logo n'existe que dans .header-nav — masquée partout
   ailleurs comme doublon (règle plus haut). L'autre barre, .header-top,
   est le bloc mobile : vide sur grand écran, elle ne produisait qu'une
   bande blanche. On inverse donc les deux ici. */
body#checkout #header .header-nav,
body#order #header .header-nav{ display:block !important; padding:0 }
body#checkout #header .header-nav .row,
body#order #header .header-nav .row{
  display:flex !important; align-items:center; justify-content:center;
  min-height:88px; margin:0; max-width:var(--ds-large); padding:0 var(--ds-marge) }
/* Dans cette barre, seul le logo reste : ni lien contact, ni bloc mobile */
body#checkout #header .header-nav .row > *:not(#_desktop_logo),
body#order #header .header-nav .row > *:not(#_desktop_logo){
  display:none !important }
/* Le logo porte hidden-sm-down : il faut le rendre visible à toute largeur */
body#checkout #header .header-nav #_desktop_logo,
body#order #header .header-nav #_desktop_logo{
  display:flex !important; align-items:center; justify-content:center;
  float:none !important; margin:0 auto; padding:0; max-width:none;
  flex:0 1 auto; width:auto }
body#checkout #header .header-top,
body#order #header .header-top{ display:none !important }

/* Le logo reprend sa place normale, centré et cliquable */
#checkout #header #_desktop_logo,
#order #header #_desktop_logo{
  position:static !important; transform:none !important;
  display:flex !important; align-items:center; justify-content:center;
  margin:0 auto; max-width:none }
#checkout #_desktop_logo img,
#order #_desktop_logo img{ max-height:56px; width:auto }

/* Tout le reste disparaît : pas de menu, pas de panier, pas de recherche */
#checkout #header .ds-header-right,
#checkout #header #_desktop_top_menu,
#checkout #header .ds-mini-btn,
#checkout #header #search_widget,
#order #header .ds-header-right,
#order #header #_desktop_top_menu,
#order #header .ds-mini-btn,
#order #header #search_widget{ display:none !important }

/* Un rappel discret sous le logo */
#checkout #header .header-top .row::after,
#order #header .header-top .row::after{
  content:"🔒 Commande sécurisée";
  position:absolute; right:var(--ds-marge); top:50%;
  transform:translateY(-50%);
  font-size:13px; color:var(--ds-ardoise); white-space:nowrap }

@media (max-width:767px){
  #checkout #header .header-top .row,
  #order #header .header-top .row{ min-height:64px; height:64px }
  #checkout #_desktop_logo img,#order #_desktop_logo img{ max-height:40px }
  #checkout #header .header-top .row::after,
  #order #header .header-top .row::after{ display:none }
}

/* ═══ 25. TUNNEL — LOGO VISIBLE (règle finale) ═══════════════════════════
   Le body porte id="checkout". Le logo étant positionné en absolu pour
   le centrage sur les autres pages, il devenait invisible ici : la rangée
   du tunnel n'a pas de hauteur pour le porter.
   ═══════════════════════════════════════════════════════════════════════ */
body#checkout #header{
  display:block !important; position:static !important;
  background:#fff; border-bottom:1px solid var(--ds-bord);
  padding:0; margin:0 0 24px; box-shadow:none }

body#checkout #header .header-top{ padding:0; background:#fff }
body#checkout #header .header-top > .container{
  max-width:var(--ds-large); padding:0 var(--ds-marge); margin:0 auto }

body#checkout #header .header-top .row{
  display:flex !important; align-items:center; justify-content:center;
  position:relative; min-height:84px !important; height:84px !important;
  margin:0; padding:0; flex-wrap:nowrap }

/* Le logo redevient un élément normal, centré */
body#checkout #_desktop_logo{
  display:flex !important; position:static !important;
  transform:none !important; left:auto !important; top:auto !important;
  align-items:center; justify-content:center;
  margin:0 auto !important; padding:0; max-width:none; height:auto }
body#checkout #_desktop_logo h1,
body#checkout #_desktop_logo a{
  display:flex !important; align-items:center; margin:0; padding:0;
  line-height:1; height:auto }
body#checkout #_desktop_logo img{
  display:block !important; max-height:54px !important; max-width:280px;
  width:auto !important; height:auto !important }

/* Tout le reste est masqué pendant le paiement */
body#checkout #header .ds-header-right,
body#checkout #header #_desktop_top_menu,
body#checkout #header .ds-mini-btn,
body#checkout #header .ds-mini-menu,
body#checkout #header #search_widget,
body#checkout #header #menu-icon,
body#checkout #header .header-top-right{ display:none !important }

/* Mention rassurante à droite */
body#checkout #header .header-top .row::after{
  content:"🔒 Commande sécurisée";
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:13.5px; color:var(--ds-ardoise); white-space:nowrap }

@media (max-width:767px){
  body#checkout #header .header-top .row{
    min-height:60px !important; height:60px !important }
  body#checkout #_desktop_logo img{ max-height:38px !important }
  body#checkout #header .header-top .row::after{ display:none }
}

/* ═══ 9. FOIRE AUX QUESTIONS ════════════════════════════════════════════ */

/* Accordéon natif : <details> fonctionne sans script, reste ouvrable au
   clavier et se déplie tout seul à l'impression ou quand le navigateur
   cherche un mot dans la page. */
.ds-faq{ max-width:820px; margin:0 auto }
.ds-faq-item{ background:#fff; border:1px solid var(--ds-bord);
  border-radius:var(--ds-r); margin-bottom:12px; overflow:hidden }
.ds-faq-item[open]{ border-color:var(--ds-bleu);
  box-shadow:0 6px 22px rgba(29,78,216,.09) }
.ds-faq-item summary{ cursor:pointer; list-style:none; padding:18px 52px 18px 20px;
  font-family:Poppins,sans-serif; font-weight:600; font-size:16.5px;
  color:var(--ds-nuit); position:relative }
.ds-faq-item summary::-webkit-details-marker{ display:none }
.ds-faq-item summary::after{ content:"+"; position:absolute; right:20px; top:50%;
  transform:translateY(-50%); font-size:24px; font-weight:400; line-height:1;
  color:var(--ds-bleu) }
.ds-faq-item[open] summary::after{ content:"−" }
.ds-faq-item summary:hover{ color:var(--ds-bleu) }
.ds-faq-r{ padding:0 20px 18px; color:var(--ds-ardoise); font-size:15.5px }

/* Mention de réassurance sous les boutons du bandeau */
.ds-note{ font-size:14px; color:var(--ds-ardoise); margin:14px 0 0; max-width:520px }
/* Bouton en pied de section */
.ds-sec-cta{ margin:26px 0 0 }

/* ═══ 10. CONFORT DE LECTURE ═══════════════════════════════════════════ */

/* Réglages destinés aux lecteurs dyslexiques : chacun est indépendant,
   activable seul, et mémorisé d'une visite à l'autre. */

/* Police à empattements nets, lettres bien différenciées. Luciole est
   conçue pour les déficients visuels ; à défaut, on retombe sur des
   polices présentes partout et déjà plus lisibles qu'une grotesque fine. */
html.ds-c-police body,
html.ds-c-police h1,html.ds-c-police h2,html.ds-c-police h3,
html.ds-c-police .h1,html.ds-c-police .h2,html.ds-c-police .h3,
html.ds-c-police input,html.ds-c-police textarea,html.ds-c-police button,
html.ds-c-police select{
  font-family:Luciole,"OpenDyslexic",Verdana,Tahoma,sans-serif !important;
  letter-spacing:.02em }
html.ds-c-police h1,html.ds-c-police h2,html.ds-c-police .h1,html.ds-c-police .h2{
  letter-spacing:0 }

/* Aération : interlignage, mots et paragraphes plus espacés. Les valeurs
   suivent les recommandations WCAG 1.4.12 sur l'espacement du texte. */
html.ds-c-espace body{ line-height:1.9 !important; word-spacing:.16em }
html.ds-c-espace p,html.ds-c-espace li,html.ds-c-espace .ds-lead,
html.ds-c-espace .ds-sec-lead,html.ds-c-espace .ds-faq-r{
  line-height:1.9 !important; margin-bottom:1.1em }
html.ds-c-espace h1,html.ds-c-espace h2,html.ds-c-espace h3{ line-height:1.45 !important }

/* Contraste renforcé : les gris secondaires passent au bleu nuit. */
html.ds-c-contraste{ --ds-ardoise:#1E293B; --ds-bord:#94A3B8 }
html.ds-c-contraste .ds-sec-sombre .ds-sec-lead,
html.ds-c-contraste .ds-bulle,
html.ds-c-contraste .ds-pop-e{ color:#E2E8F0 }
html.ds-c-contraste a{ text-decoration:underline }
html.ds-c-contraste .btn,html.ds-c-contraste .ds-cle,
html.ds-c-contraste .ds-faq-item summary{ text-decoration:none }

/* Le bouton et son panneau, posés dans la barre d'en-tête */
.ds-confort{ position:relative; display:inline-flex }
.ds-confort-b{ display:inline-flex; align-items:center; gap:7px;
  background:var(--ds-bleu-c); color:var(--ds-bleu-f); border:1px solid transparent;
  font-family:Poppins,sans-serif; font-weight:600; font-size:13.5px;
  padding:8px 13px; border-radius:999px; cursor:pointer; white-space:nowrap }
.ds-confort-b:hover{ background:#DBEAFE }
.ds-confort-b b{ font-size:15px; line-height:1 }
.ds-confort-p{ position:absolute; right:0; top:calc(100% + 10px); z-index:1300;
  width:270px; background:#fff; border:1px solid var(--ds-bord);
  border-radius:var(--ds-r); padding:14px; box-shadow:0 18px 44px rgba(15,23,42,.18);
  display:none }
.ds-confort.ds-ouvert .ds-confort-p{ display:block }
.ds-confort-t{ font-family:Poppins,sans-serif; font-weight:600; font-size:13px;
  color:var(--ds-ardoise); margin:0 0 10px; text-transform:uppercase;
  letter-spacing:.06em }
.ds-confort-p label{ display:flex; align-items:flex-start; gap:10px;
  padding:8px 0; font-size:14.5px; cursor:pointer; color:var(--ds-nuit) }
.ds-confort-p input{ margin:3px 0 0; width:17px; height:17px; flex:none;
  accent-color:var(--ds-bleu) }
.ds-confort-p small{ display:block; color:var(--ds-ardoise); font-size:12.5px }
.ds-confort-r{ margin-top:8px; width:100%; background:none; border:0;
  color:var(--ds-bleu); font-size:13px; cursor:pointer; text-align:left; padding:6px 0 }
.ds-confort-r:hover{ text-decoration:underline }

/* Sur mobile : pastille ronde sans libellé, posée près du burger.
   Le texte prenait toute la largeur et repoussait le logo. */
.ds-confort-mini .ds-confort-b{ width:40px; height:40px; padding:0;
  justify-content:center; border-radius:50%; gap:0 }
.ds-confort-mini .ds-confort-b span{ display:none }
.ds-confort-mini .ds-confort-b b{ font-size:16px }
.ds-confort-mini{ margin-right:8px; flex:none }
/* Le panneau reste dans l'écran : il est ancré sur la pastille, donc sa
   largeur doit tenir compte de ce qui reste à gauche de celle-ci. */
.ds-confort-mini .ds-confort-p{ right:-6px;
  width:min(268px, calc(100vw - 40px)) }

/* ═══ 11. AGRANDISSEMENT D'UNE IMAGE PRODUIT ═══════════════════════════ */

/* PrestaShop pose les vignettes en colonne à droite de l'image, ce qui
   ampute la largeur disponible. On repasse la fenêtre en une seule
   colonne : image large en 16/9, vignettes dessous, description ensuite.

   Les !important sont ici volontaires. Le balisage de cette fenêtre varie
   d'un thème à l'autre — classes différentes, colonnes Bootstrap, flex
   posé en ligne — et les règles du thème sont chargées après les nôtres.
   Sans forçage, une seule déclaration résiduelle suffit à tout défaire.

   La description est déplacée en fin de fenêtre par le script : elle est
   enfermée dans le même <figure> que l'image, et aucune règle CSS ne peut
   l'en extraire sans dissoudre le <figure> — ce qui fait disparaître
   l'image. */

#product-modal .modal-dialog{ max-width:1120px !important;
  width:min(1120px, 94vw) !important; margin:24px auto }
#product-modal .modal-content{ border-radius:var(--ds-r); height:auto }

/* Aucun conteneur intermédiaire ne doit ranger ses enfants en ligne */
#product-modal .modal-body,
#product-modal .modal-body > .row,
#product-modal .modal-body > div:not(.thumbnails){
  display:block !important; float:none !important; width:auto }
#product-modal .modal-body{ padding:18px }

/* Le cadre de l'image : pleine largeur, quelle que soit sa classe */
#product-modal figure,
#product-modal .modal-body > figure,
#product-modal .product-cover-modal{
  display:block !important; width:100% !important; max-width:none !important;
  min-width:0; margin:0; padding:0; float:none !important; flex:none !important }

/* L'image elle-même — les thèmes la nomment diversement */
#product-modal img.product-cover-modal,
#product-modal img.js-modal-product-cover,
#product-modal .product-cover-modal img,
#product-modal figure > img{
  display:block !important; width:100% !important; max-width:100% !important;
  height:auto !important; max-height:none !important;
  aspect-ratio:16/9; object-fit:contain; object-position:center;
  background:#fff; border-radius:var(--ds-r-s); margin:0 auto }

/* Vignettes : une bande horizontale, défilante si elles sont nombreuses.
   min-width:0 est indispensable, sinon la bande élargit la fenêtre au
   lieu de défiler. */
#product-modal .thumbnails,
#product-modal aside#thumbnails,
#product-modal .js-thumbnails{
  display:block !important; width:100% !important; max-width:none !important;
  min-width:0; position:static !important; float:none !important;
  flex:none !important; margin:16px 0 0 !important; padding:0 }
#product-modal .js-modal-mask,#product-modal .thumbnails .mask{
  max-height:none !important; height:auto !important; overflow:visible;
  width:auto; min-width:0 }
#product-modal .product-images{ display:flex !important; flex-wrap:nowrap;
  flex-direction:row !important; justify-content:center; gap:10px;
  margin:0; padding:2px;
  list-style:none; overflow-x:auto; scrollbar-width:thin; min-width:0 }
#product-modal .product-images li{ flex:0 0 auto !important; margin:0;
  width:auto !important; padding:0; float:none !important }
#product-modal .product-images .thumb,
#product-modal .product-images img{ display:block; width:104px !important;
  height:auto !important; border-radius:8px; border:2px solid transparent;
  cursor:pointer; transition:border-color .15s ease }
#product-modal .product-images .thumb:hover{ border-color:var(--ds-bord) }
#product-modal .product-images .thumb.selected,
#product-modal .product-images img.selected{ border-color:var(--ds-bleu) }

/* Les flèches servaient au défilement vertical : sans objet désormais */
#product-modal .arrows,#product-modal .js-modal-arrows{ display:none !important }

/* La description est masquée : elle figure déjà sur la fiche produit,
   juste derrière la fenêtre. */
#product-modal .image-caption,
#product-modal figcaption{ display:none !important }

@media (max-width:767px){
  #product-modal .modal-dialog{ width:96vw !important; margin:12px auto }
  #product-modal .modal-body{ padding:12px }
  #product-modal .product-images .thumb,
  #product-modal .product-images img{ width:78px !important }
}


/* ═══ 10. BANDEAU IMMO — trois durées au lieu de trois clés ═════════════
   Le module d'origine dessine trois clés USB en éventail, avec anneau et
   partie métallique. Ici la structure du gabarit est conservée — mêmes
   balises, mêmes variables — mais le décor est neutralisé et remplacé par
   trois cartes droites. Reprendre le même moteur évite de maintenir deux
   gabarits qui divergeraient à la première correction.
   ══════════════════════════════════════════════════════════════════════ */

.ds-cles{ display:flex; gap:14px; align-items:stretch; justify-content:center;
          flex-wrap:wrap; perspective:none }

/* Les ornements de la clé n'ont plus d'objet */
.ds-cle-anneau, .ds-cle-metal{ display:none }

.ds-cle{ position:static; transform:none !important; flex:1 1 150px; max-width:190px }
.ds-cle:hover{ transform:translateY(-4px) !important; z-index:auto }

.ds-cle-corps{ display:flex; flex-direction:column; justify-content:center;
  align-items:center; gap:4px; width:100%; min-height:132px; padding:22px 16px;
  background:#fff; border:1px solid var(--ds-bord); border-radius:var(--ds-r);
  box-shadow:0 2px 10px rgba(15,23,42,.05); transition:border-color .18s, box-shadow .18s }

.ds-cle:hover .ds-cle-corps{ border-color:var(--ds-bleu);
  box-shadow:0 10px 28px rgba(29,78,216,.14) }

.ds-cle-txt{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center }
.ds-cle-txt b{ font-family:Poppins,sans-serif; font-size:15px; font-weight:600;
               color:var(--ds-nuit); letter-spacing:.01em }
.ds-cle-txt em{ font-style:normal; font-family:Poppins,sans-serif; font-size:26px;
                font-weight:700; color:var(--ds-bleu); line-height:1.15 }

/* La deuxième carte est mise en avant : c'est la durée qu'on veut vendre. */
.ds-cle-2 .ds-cle-corps{ border-color:var(--ds-bleu); border-width:2px }

/* L'étiquette de prix devient une mention sous les cartes */
.ds-badge{ position:static; transform:none; margin:16px auto 0; display:block;
  width:fit-content; background:transparent; color:var(--ds-nuit);
  font-family:Poppins,sans-serif; font-size:13px; font-weight:600; box-shadow:none;
  padding:0; font-size:0 }
.ds-badge small{ display:block; font-size:13px; font-weight:500; color:var(--ds-gris);
                 margin:0; opacity:1 }

@media (max-width:575px){
  .ds-cle{ max-width:none; flex:1 1 100% }
  .ds-cle-corps{ min-height:0; padding:16px; flex-direction:row; justify-content:space-between }
  .ds-cle-txt{ flex-direction:row; align-items:baseline; gap:10px }
}