/* ═══════════════════════════════════════════════════════════════════
   DISCIA — habillage PrestaShop 8.x / 9.x
   À placer dans : themes/VOTRE-THEME-ENFANT/assets/css/custom.css
   Basé sur le thème Classic. Aucune modification du cœur.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  /* Charte Discia */
  --ds-bleu:#1D4ED8;  --ds-bleu-f:#1E3A8A;  --ds-bleu-c:#EFF6FF;
  --ds-turq:#06B6D4;  --ds-turq-f:#0891B2;
  --ds-nuit:#0F172A;  --ds-ardoise:#64748B;
  --ds-gris:#F1F5F9;  --ds-bord:#E2E8F0;   --ds-ambre:#F59E0B;
  --ds-r:14px; --ds-r-s:10px;
  --ds-large:1600px;   /* largeur maximale du contenu */
  --ds-marge:40px;     /* marge latérale sur grand écran */
  --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);
}

/* ── Base ─────────────────────────────────────────────── */
body, #wrapper{ font-family:Inter, system-ui, sans-serif; color:var(--ds-nuit);
  font-size:16px; line-height:1.65; background:#fff; }
h1,h2,h3,h4,h5,.h1,.h2,.h3{ font-family:Poppins, system-ui, sans-serif;
  letter-spacing:-.02em; line-height:1.18; color:var(--ds-nuit); }
h1,.h1{ font-size:clamp(30px,4vw,46px); font-weight:800 }
h2,.h2{ font-size:clamp(24px,3vw,34px); font-weight:700 }
h3,.h3{ font-size:20px; font-weight:600 }
a{ color:var(--ds-bleu); text-decoration:none }
a:hover{ color:var(--ds-bleu-f) }
:focus-visible{ outline:3px solid var(--ds-turq); outline-offset:3px; border-radius:4px }

/* ── En-tête ──────────────────────────────────────────── */
#header{ background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ds-bord); box-shadow:none; }
#header .header-nav{ border:0; padding:0 }
#header .header-top{ padding:14px 0 }
#header a{ color:var(--ds-ardoise) }
#header a:hover{ color:var(--ds-bleu) }
.header-banner{ background:var(--ds-nuit); color:#fff; text-align:center;
  padding:9px 16px; font-size:14px; font-weight:500 }
.header-banner a{ color:var(--ds-turq) }

/* Menu principal */
#top-menu .sub-menu{ border:1px solid var(--ds-bord); border-radius:var(--ds-r-s);
  box-shadow:var(--ds-ombre); margin-top:6px }
#top-menu a.dropdown-item, #top-menu li a{ font-weight:500; font-size:15px }
#top-menu li.current a{ color:var(--ds-bleu); border-bottom:2px solid var(--ds-bleu) }

/* Recherche */
#search_widget form input[type=text]{ border:1.5px solid var(--ds-bord);
  border-radius:99px; padding:10px 42px 10px 18px; font-family:Inter; font-size:15px }
#search_widget form input[type=text]:focus{ border-color:var(--ds-bleu); box-shadow:0 0 0 3px rgba(29,78,216,.1) }
#search_widget form button[type=submit] .search{ color:var(--ds-bleu) }

/* Panier */
.blockcart{ background:var(--ds-bleu-c); border-radius:var(--ds-r-s) }
.blockcart a{ color:var(--ds-bleu); font-weight:600 }
.cart-products-count{ background:var(--ds-ambre); color:#78350F; border-radius:99px;
  padding:1px 8px; font-size:12px; font-weight:700 }

/* ── Boutons ──────────────────────────────────────────── */
.btn{ font-family:Poppins; font-weight:600; border-radius:var(--ds-r-s);
  padding:13px 26px; 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); transform:translateY(-1px); 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-tertiary{ background:var(--ds-gris); color:var(--ds-nuit); border-color:var(--ds-bord) }
.btn-lg{ padding:16px 34px; font-size:16.5px }

/* ── Fiche produit ────────────────────────────────────── */
#product .product-prices .current-price span[itemprop=price],
.product-price, .price{ font-family:Poppins; font-weight:800; color:var(--ds-bleu);
  font-size:34px; letter-spacing:-.02em }
.product-discount .regular-price{ color:var(--ds-ardoise) }
#product .product-information{ font-size:16px }
.product-add-to-cart{ border-top:1px solid var(--ds-bord); padding-top:22px; margin-top:22px }
/* La quantité et le bouton sont dans une rangée flex : sans ces règles,
   le bouton se décale au lieu de s'aligner sur le champ. */
.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 }
/* Hauteur identique au champ quantité, texte centré sur les deux axes */
#product .add-to-cart{ width:100%; height:54px; padding:0 24px; font-size:17px;
  display:inline-flex; justify-content:center; align-items:center; margin:0; line-height:1 }
#product .add-to-cart i, #product .add-to-cart .material-icons{
  margin-right:9px; font-size:21px; line-height:1 }
/* Bouton favori aligné lui aussi */
.product-add-to-cart .wishlist-button-add, #product .wishlist-button-add{
  height:54px; width:54px; display:inline-flex; align-items:center; justify-content:center;
  margin:0; flex:0 0 auto }
#product .add-to-cart i, #product .add-to-cart .material-icons{ margin-right:8px }
.product-quantity .qty input{ border:1.5px solid var(--ds-bord); border-radius:var(--ds-r-s) }
.product-cover img{ border-radius:var(--ds-r); border:1px solid var(--ds-bord) }
.images-container .product-images>li.thumb-container>.thumb{ border-radius:var(--ds-r-s);
  border:2px solid transparent }
.images-container .product-images>li.thumb-container>.thumb.selected,
.images-container .product-images>li.thumb-container>.thumb:hover{ border-color:var(--ds-bleu) }
.product-features, .product-description{ font-size:16px; line-height:1.7 }
/* Mise en forme commune des onglets (le déplacement se fait en JS) */
.tabs .tab-content{ padding-top:22px }
.tabs .nav-tabs{ border-bottom:1px solid var(--ds-bord); flex-wrap:wrap }
.tabs .nav-tabs .nav-link{ font-family:Poppins; font-weight:600; color:var(--ds-ardoise);
  border:0; border-bottom:3px solid transparent; padding:12px 4px; margin-right:26px }
.tabs .nav-tabs .nav-link.active{ color:var(--ds-bleu); border-bottom-color:var(--ds-bleu) }

/* Bloc réassurance : sans abonnement / hors ligne / RGPD */
/* ── Bloc de réassurance ──
   Déplacé en bas de page par le script du module, et affiché en rangée :
   en colonne dans la fiche produit, il écrasait la mise en page. */
.block-reassurance{
  background:var(--ds-gris); border-top:1px solid var(--ds-bord);
  border-bottom:1px solid var(--ds-bord); border-radius:0;
  padding:26px 0; margin:0; width:100% }
.block-reassurance > ul, .block-reassurance ul{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:10px 0; max-width:var(--ds-large); margin:0 auto;
  padding:0 var(--ds-marge); list-style:none; width:100% }
.block-reassurance li{
  border:0; flex:1 1 0; min-width:180px; margin:0; padding:0;
  display:flex; justify-content:center }
.block-reassurance-item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:9px; padding:6px 14px; width:100% }
.block-reassurance-item img,
.block-reassurance-item svg{ width:38px; height:38px; margin:0; flex:0 0 auto }
.block-reassurance-item span{
  font-size:14px; font-weight:600; color:var(--ds-nuit); line-height:1.45 }
/* Séparateurs discrets entre les entrées */
.block-reassurance li + li{ border-left:1px solid var(--ds-bord) }

@media (max-width:767px){
  .block-reassurance{ padding:18px 0 }
  .block-reassurance > ul, .block-reassurance ul{ gap:4px 0 }
  .block-reassurance li{ flex:1 1 50%; min-width:0 }
  .block-reassurance li + li{ border-left:0 }
  .block-reassurance li:nth-child(odd){ border-right:1px solid var(--ds-bord) }
  .block-reassurance-item{ padding:12px 8px }
  .block-reassurance-item img, .block-reassurance-item svg{ width:30px; height:30px }
  .block-reassurance-item span{ font-size:12.5px }
}

/* ── Vignettes produit ────────────────────────────────── */
.product-miniature .thumbnail-container{ background:#fff; border:1px solid var(--ds-bord);
  border-radius:var(--ds-r); box-shadow:none; transition:.2s; overflow:hidden; height:auto }
.product-miniature .thumbnail-container:hover{ border-color:var(--ds-bleu);
  box-shadow:var(--ds-ombre); transform:translateY(-3px) }
.product-miniature .product-title a{ font-family:Poppins; font-weight:600;
  color:var(--ds-nuit); font-size:16px }
.product-miniature .product-price-and-shipping{ font-family:Poppins; font-weight:700;
  color:var(--ds-bleu); font-size:20px }
.product-flags li.product-flag{ background:var(--ds-ambre); color:#78350F;
  font-family:Poppins; 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, .form-control-select, 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; 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 }
.form-control-label{ font-weight:600; font-size:14.5px; color:var(--ds-nuit) }

/* ── 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; font-weight:600; font-size:18px; padding:20px 24px }
#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; font-weight:700; font-size:15px; margin-right:12px }
.card{ border:1px solid var(--ds-bord); border-radius:var(--ds-r); box-shadow:none }
#order-summary-content .step-edit{ color:var(--ds-bleu) }
.cart-summary-line .value{ font-weight:600 }
.cart-total .value, .cart-summary-line.cart-total{ font-family:Poppins; font-weight:800;
  color:var(--ds-bleu); font-size:22px }

/* ── Pied de page ─────────────────────────────────────── */
#footer{ background:var(--ds-nuit); color:#94A3B8; padding-top:52px }
#footer a, .footer-container a{ color:#94A3B8 }
#footer a:hover, .footer-container a:hover{ color:var(--ds-turq) }
.footer-container{ background:transparent; box-shadow:none; margin-top:0; padding-top:0 }
#footer .h3, #footer h3, .block-contact .h3{ color:#fff; font-family:Poppins;
  font-size:15px; font-weight:600; text-transform:none; letter-spacing:0 }
#footer .block_newsletter input[type=email]{ background:#1E293B; border-color:#334155;
  color:#fff }
#footer .block_newsletter input[type=email]::placeholder{ color:#64748B }
.block-social li{ background:#1E293B; border-radius:var(--ds-r-s) }
.block-social li:hover{ background:var(--ds-bleu) }
#footer .copyright, .footer-container .row:last-child{ border-top:1px solid #1E293B;
  padding-top:20px; font-size:13.5px }

/* ── Bandeau d'accroche (page d'accueil, module HTML libre) ── */
.ds-hero{ padding:70px 0 84px; 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-hero h1{ margin-bottom:18px }
.ds-hero .lead{ font-size:18.5px; color:var(--ds-ardoise); max-width:530px; margin-bottom:30px }
.ds-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:var(--ds-bleu-c);
  color:var(--ds-bleu); font-size:13.5px; font-weight:600; padding:7px 15px;
  border-radius:99px; margin-bottom:20px }
.ds-souligne{ position:relative; color:var(--ds-bleu); white-space:nowrap }
.ds-souligne::after{ content:""; position:absolute; left:0; right:0; bottom:3px; height:11px;
  background:rgba(6,182,212,.28); z-index:-1; border-radius:3px }

/* Cartes de fonctionnalités */
.ds-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.ds-card{ background:#fff; border:1px solid var(--ds-bord); border-radius:var(--ds-r);
  padding:28px; transition:.2s }
.ds-card:hover{ border-color:var(--ds-bleu); box-shadow:var(--ds-ombre); transform:translateY(-3px) }
.ds-card .ds-ico{ width:46px; height:46px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; font-size:21px; margin-bottom:15px;
  background:var(--ds-bleu-c) }
.ds-card h3{ font-size:18px; margin-bottom:8px }
.ds-card p{ font-size:15px; color:var(--ds-ardoise); margin:0 }

/* Section sombre */
.ds-sombre{ background:var(--ds-nuit); color:#fff; padding:78px 0 }
.ds-sombre h2{ color:#fff }
.ds-sombre p{ color:#94A3B8 }
.ds-tag{ font-size:12.5px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--ds-turq-f); margin-bottom:11px }
.ds-sombre .ds-tag{ color:var(--ds-turq) }

@media(max-width:991px){ .ds-cards{ grid-template-columns:1fr } .ds-hero{ padding:48px 0 60px } }
@media(prefers-reduced-motion:reduce){ *{ transition:none !important } }

/* ═══════════════════════════════════════════════════════════════════
   BLOCS DE LA PAGE D'ACCUEIL (template du module)
   ═══════════════════════════════════════════════════════════════════ */
.ds-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.ds-lead{font-size:18.5px;color:var(--ds-ardoise);max-width:530px;margin-bottom:30px}
.ds-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:22px}
.ds-rassure{display:flex;gap:22px;flex-wrap:wrap;list-style:none;padding:0;margin:0;
  font-size:14px;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}

/* La clé USB : élément signature */
.ds-cle-scene{display:flex;align-items:center;justify-content:center;min-height:340px}
.ds-cle{position:relative;transform:rotate(-7deg);filter:drop-shadow(0 22px 44px rgba(15,23,42,.22))}
.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;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);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.6)}
.ds-cle-metal::after{content:"";position:absolute;inset:9px 8px;border-radius:2px;
  background:linear-gradient(180deg,#475569,#334155)}
.ds-badge{position:absolute;right:-6px;bottom:-24px;background:var(--ds-ambre);color:#78350F;
  font-family:Poppins;font-weight:800;font-size:22px;padding:13px 22px;border-radius:14px;
  box-shadow:0 10px 26px rgba(245,158,11,.4);transform:rotate(5deg)}
.ds-badge small{display:block;font-size:10.5px;font-weight:600;opacity:.85}

/* Sections */
.ds-sec{padding:78px 0}
.ds-sec-clair{background:var(--ds-gris)}
.ds-sec-sombre{background:var(--ds-nuit);color:#fff}
.ds-sec-sombre h2{color:#fff}
.ds-sec-lead{font-size:17px;color:var(--ds-ardoise);max-width:620px;margin-bottom:42px}
.ds-sec-sombre .ds-sec-lead{color:#94A3B8}

/* Démonstration du correcteur */
.ds-demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:start}
.ds-demo{background:#fff;border-radius:var(--ds-r);padding:30px;border:1px solid var(--ds-bord);
  font-size:19px;line-height:2.4;color:var(--ds-nuit)}
.ds-faute{border-bottom:2.5px wavy var(--ds-ambre);padding:0 1px}
.ds-faute-r{border-color:#EF4444}
.ds-bulle{background:#1E293B;color:#fff;border-radius:12px;padding:16px 19px;margin-bottom:14px;
  font-size:14.5px;line-height:1.6}
.ds-bulle-t{font-family:Poppins;font-weight:600;color:var(--ds-turq);margin-bottom:6px;font-size:15px}
.ds-bulle-r{color:#CBD5E1;font-size:13.5px;margin-top:4px}
.ds-bulle-r b{color:#fff}

@media(max-width:991px){
  .ds-hero-grid,.ds-demo-grid{grid-template-columns:1fr}
  .ds-cle-scene{min-height:250px;margin-top:24px}
  .ds-sec{padding:52px 0}
}

/* ═══════════════════════════════════════════════════════════════════
   CORRECTIFS D'INTÉGRATION — PrestaShop 9 / thème Classic
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Les sections d'accueil occupent toute la largeur ──
   Le thème enferme le contenu dans #wrapper .container : on neutralise
   cette contrainte pour les blocs du module, sans toucher au reste. */
/* Uniquement sur l'accueil : ailleurs, la mise en page du thème est correcte */
#index #wrapper{ padding:0; background:transparent }
#index #wrapper > .container{ max-width:none; width:100%; padding:0 }
/* Les sections d'accueil portent elles-mêmes la marge : si le module HTML
   n'est pas utilisé, le contenu collerait au bord. Filet de sécurité : */
#index #content-wrapper > *:not(.ds-hero):not(.ds-sec){
  max-width:var(--ds-large); margin-left:auto; margin-right:auto;
  padding-left:var(--ds-marge); padding-right:var(--ds-marge) }
#index #content-wrapper{ max-width:none; padding:0; flex:0 0 100%; width:100% }
#index #main .page-home{ padding:0 }
/* Les sections gèrent elles-mêmes leur largeur intérieure */
.ds-hero, .ds-sec{ width:100%; margin:0 }
.ds-hero > .container, .ds-sec > .container{
  max-width:var(--ds-large); margin:0 auto; padding:0 var(--ds-marge); width:100% }
/* Le fil d'Ariane n'a pas lieu d'être sur l'accueil */
#index .breadcrumb{ display:none }

/* ── 2. En-tête ───────────────────────────────────────────────────── */
#header{ position:relative; z-index:60; margin-bottom:0; padding-bottom:0 }
#header .header-nav{ display:none }          /* barre du haut : doublon */
#header .header-top{ padding:0 0 0; background:#fff }
#header .header-top > .container{ max-width:var(--ds-large); padding:0 var(--ds-marge) }

/* Apparence des entrées de menu, toutes tailles */
#top-menu > li > a{
  font-family:Poppins; font-weight:500; font-size:15.5px; color:var(--ds-nuit);
  text-transform:none; letter-spacing:0;
  border-radius:var(--ds-r-s); border:0 }
#top-menu > li > a:hover{ background:var(--ds-bleu-c); color:var(--ds-bleu) }
#top-menu > li.current > a{ color:var(--ds-bleu); background:var(--ds-bleu-c) }
#top-menu .sub-menu{ border:1px solid var(--ds-bord); border-radius:var(--ds-r-s);
  box-shadow:var(--ds-ombre) }
.cart-products-count{ background:var(--ds-ambre); color:#78350F }

/* ══ BUREAU uniquement : rangée horizontale ══
   Ces règles ne doivent JAMAIS s'appliquer en mobile, sinon elles
   écrasent le menu déroulant et la barre burger du thème. */
@media (min-width:992px){
  /* Trois zones : logo à gauche, menu au centre, outils à droite */
  #header .header-top .row{
    display:flex; align-items:center; flex-wrap:nowrap;
    gap:24px; min-height:92px; margin:0; width:100% }
  #header .header-top .row > div{ padding:0 }

  /* 1. Logo, calé à gauche.
     Pas de margin auto ici : c'est le menu (flex:1) qui occupe l'espace
     et se centre dedans. Deux marges auto s'annuleraient. */
  #header .header-top #_desktop_logo{
    flex:0 0 auto; width:auto; max-width:none; margin:0 }
  /* Le fichier logo mesure 2250 px de large : sans plafond, il écraserait
     le menu. On borne la hauteur ET la largeur. */
  #_desktop_logo img, #header .logo img{
    max-height:78px; max-width:300px;
    width:auto !important; height:auto !important; object-fit:contain }
  #_desktop_logo h1{ margin:0; padding:0; line-height:0 }

  /* 2. Menu, centré dans l'espace restant.
     Le bloc menu peut être absent (aucune catégorie affichée) : dans ce cas
     rien ne pousserait les outils à droite. On ajoute donc un séparateur
     souple qui joue ce rôle en toutes circonstances. */
  #header .header-top .position-static,
  #header .header-top #_desktop_top_menu{
    flex:1 1 auto; width:auto; max-width:none;
    display:flex; justify-content:center }
  /* Séparateur de secours : occupe l'espace si le menu est vide */
  .ds-header-right{ margin-left:auto !important }
  #header #_desktop_top_menu{ width:auto; margin-bottom:0 }
  #top-menu{ display:flex; flex-wrap:nowrap; align-items:center; gap:4px;
    margin:0; padding:0; list-style:none; justify-content:center }
  #top-menu > li{ float:none; display:block }
  #top-menu > li > a{ display:block; padding:11px 14px; white-space:nowrap; margin:0 }
  #top-menu .sub-menu{ top:100%; margin-top:4px }

  /* 3. Contact, compte, panier, recherche — collés à droite */
  .ds-header-right{
    display:flex; flex-direction:row; flex-wrap:nowrap;
    align-items:center; justify-content:flex-end; gap:6px; flex:0 0 auto }
  .ds-header-right > *{ margin:0; float:none; width:auto; max-width:none;
    padding:0; display:flex; align-items:center }
  .ds-header-right a{ display:inline-flex; align-items:center; gap:6px;
    white-space:nowrap; font-size:14.5px; font-weight:500; color:var(--ds-ardoise);
    padding:9px 11px; border-radius:var(--ds-r-s) }
  .ds-header-right a:hover{ background:var(--ds-gris); color:var(--ds-bleu) }
  .ds-header-right #_desktop_cart a{ background:var(--ds-bleu-c);
    color:var(--ds-bleu); font-weight:600 }
  .ds-header-right #_desktop_cart a:hover{ background:var(--ds-bleu); color:#fff }
  /* La recherche ferme la marche, tout à droite */
  .ds-header-right #search_widget{ flex:0 0 220px; min-width:170px; order:99 }
  .ds-header-right #search_widget form{ margin:0 }
  .ds-header-right #search_widget input[type=text]{
    width:100%; padding:10px 36px 10px 15px; font-size:14px; height:auto }
}

/* ══ MOBILE ET TABLETTE (jusqu'à 991px) ══
   On laisse le thème gérer son menu burger : on ne fait qu'ajuster
   les tailles et les couleurs. */
@media (max-width:991px){
  #header .header-top{ padding:10px 0 }
  #header .header-top > .container{ padding:0 16px }

  /* Logo : grand mais sans écraser la barre */
  #_desktop_logo img, #header .logo img, #header img.logo{
    max-height:52px; width:auto; height:auto }

  /* Le bloc regroupé se réorganise sur deux lignes */
  .ds-header-right{ display:flex; flex-wrap:wrap; align-items:center;
    justify-content:flex-end; gap:4px; width:100%; margin-top:8px }
  .ds-header-right a{ display:inline-flex; align-items:center; gap:5px;
    font-size:13.5px; padding:8px 9px; border-radius:var(--ds-r-s);
    color:var(--ds-ardoise) }
  .ds-header-right #_desktop_cart a{ background:var(--ds-bleu-c); color:var(--ds-bleu) }
  /* Recherche sur toute la largeur, en dessous */
  .ds-header-right #search_widget{ order:10; width:100%; flex:1 1 100%; margin-top:6px }
  .ds-header-right #search_widget input[type=text]{ width:100%; font-size:15px;
    padding:11px 38px 11px 15px }

  /* Menu burger du thème : on ne touche qu'à l'apparence */
  #mobile_top_menu_wrapper{ background:#fff; padding:14px 16px }
  #mobile_top_menu_wrapper .top-menu li{ border-bottom:1px solid var(--ds-bord) }
  #mobile_top_menu_wrapper .top-menu a{
    font-family:Poppins; font-weight:500; font-size:16px;
    color:var(--ds-nuit); padding:13px 4px; display:block }
  #mobile_top_menu_wrapper .top-menu a:hover,
  #mobile_top_menu_wrapper .top-menu li.current > a{ color:var(--ds-bleu) }
  #menu-icon, .menu-icon{ color:var(--ds-bleu) }
  #menu-icon .material-icons{ font-size:32px }

  /* Contenu */
  .ds-hero{ padding:38px 0 46px }
  .ds-hero > .container, .ds-sec > .container{ padding:0 16px }
  .ds-sec{ padding:46px 0 }
  .ds-cle-scene{ min-height:230px; margin-top:20px }
  .ds-cle{ transform:rotate(-5deg) scale(.86) }
  #wrapper{ padding-top:10px }
}

@media (max-width:575px){
  #_desktop_logo img, #header .logo img, #header img.logo{ max-height:44px }
  .ds-header-right a{ font-size:12.5px; padding:7px 7px; gap:4px }
  .ds-header-right a span, .ds-header-right .expand-more{ display:none }
  .ds-cta{ flex-direction:column; align-items:stretch }
  .ds-cta .btn{ width:100%; justify-content:center }
  .ds-rassure{ gap:10px; font-size:12.5px; flex-direction:column }
  .ds-cle{ transform:rotate(-4deg) scale(.72) }
  .ds-cle-scene{ min-height:190px }
  h1, .ds-hero h1{ font-size:29px }
  .ds-demo{ font-size:16px; line-height:2.1; padding:20px }
  /* Bouton panier pleine largeur sur la fiche produit */
  .product-add-to-cart .product-quantity{ flex-direction:column }
  .product-add-to-cart .qty .input-group{ width:100% }
}

/* Liens produits ajoutés au menu : légèrement mis en avant */
/* Liens produits ajoutés par le module : même apparence que les entrées
   du menu PrestaShop, pour que les deux sources se ressemblent. */
#top-menu > li.ds-menu-produit > a{ font-weight:500; color:var(--ds-nuit) }
#top-menu > li.ds-menu-produit > a:hover{
  background:var(--ds-bleu-c); color:var(--ds-bleu) }

/* ── Espace sous l'en-tête : le thème réserve une hauteur excessive ── */
#header{ margin-bottom:0; padding-bottom:0 }
#header .header-top{ padding-bottom:0 }
#wrapper{ padding-top:16px }
#index #wrapper{ padding-top:0 }
/* Le fil d'Ariane collait au bord : on l'aère juste ce qu'il faut */
#wrapper .breadcrumb{ margin:0 0 18px; padding:0 }
/* Certaines versions ajoutent une marge sur le conteneur principal */
#main{ margin-top:0 }
#product #main .row:first-child{ margin-top:0 }
/* Le menu déroulant du thème réserve parfois une bande vide */
#header .header-top #_desktop_top_menu{ margin-bottom:0 }
#top-menu > li > a{ margin:0 }

/* ── Onglets produit : sortis de la colonne par le script du module ── */
#product .tabs.ds-tabs-full{
  clear:both; width:100%; max-width:var(--ds-large); margin:40px auto 0;
  padding:10px 30px 30px; float:none;
  border:1px solid var(--ds-bord); border-radius:var(--ds-r); background:#fff }
#product .tabs.ds-tabs-full .tab-content{ max-width:none; column-count:1 }
#product .tabs.ds-tabs-full .ds-fiche{ max-width:900px }
@media (max-width:991px){
  #product .tabs.ds-tabs-full{ padding:8px 18px 22px; margin-top:28px }
}

/* ═══════════════════════════════════════════════════════════════════
   PLEINE LARGEUR — toutes les pages
   ═══════════════════════════════════════════════════════════════════ */

/* La grille Bootstrap du thème bride encore certains conteneurs */
#wrapper .container, #wrapper .container-fluid{ max-width:var(--ds-large) }
#main, #content-wrapper, #content{ max-width:none; width:100% }

/* Page produit : les colonnes profitent de la largeur gagnée */
@media (min-width:992px){
  #product #content-wrapper .row{ margin-left:-15px; margin-right:-15px }
  #product .product-cover img{ width:100%; height:auto }
  /* La description reste lisible : au-delà de 900px, la ligne est trop longue */
  #product .tabs.ds-tabs-full .ds-fiche,
  #product .tabs.ds-tabs-full .tab-content > div{ max-width:1000px; margin:0 auto }
}

/* Listes de produits : plus de colonnes sur grand écran */
@media (min-width:1400px){
  #category #js-product-list .products,
  .products.row{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
  #category #js-product-list .products > article,
  .products.row > article{ width:100%; max-width:none; flex:none; padding:0 }
}

/* Marges latérales adaptées à la taille de l'écran */
@media (max-width:1400px){ :root{ --ds-marge:28px } }
@media (max-width:991px){  :root{ --ds-marge:18px } }
@media (max-width:575px){  :root{ --ds-marge:14px } }

/* Sections d'accueil : le fond s'étend, le contenu reste centré */
.ds-hero, .ds-sec{ width:100%; max-width:none }

/* ═══════════════════════════════════════════════════════════════════
   EN-TÊTE — mise en page pilotée par les classes posées par le module
   Ces classes sont ajoutées en JavaScript, ce qui rend le CSS
   indépendant des identifiants variables du thème.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
  .ds-header-row{
    display:flex !important; align-items:center; flex-wrap:nowrap;
    gap:24px; min-height:92px; width:100%; margin:0 }
  .ds-header-row > *{ padding:0; margin:0 }

  /* Logo à gauche */
  .ds-header-row .ds-logo{ flex:0 0 auto; width:auto; max-width:none; order:1 }
  .ds-header-row .ds-logo img{ max-height:78px; width:auto; height:auto }

  /* Menu au centre : il occupe l'espace libre et se centre dedans */
  .ds-header-row .ds-menu-wrap,
  .ds-header-row #_desktop_top_menu{
    flex:1 1 auto !important; width:auto !important; max-width:none !important;
    order:2; display:flex; justify-content:center; align-items:center;
    margin:0 !important; padding:0 !important }
  .ds-header-row #_desktop_top_menu .clearfix{ display:none }
  .ds-header-row .ds-menu-wrap ul{
    display:flex; flex-wrap:nowrap; align-items:center; gap:4px;
    margin:0; padding:0; list-style:none }
  .ds-header-row .ds-menu-wrap li{ float:none; display:block }

  /* Outils à droite */
  .ds-header-row .ds-header-right{
    flex:0 0 auto; order:3; margin-left:auto;
    display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:6px }
}

/* ═══════════════════════════════════════════════════════════════════
   EN-TÊTE — neutralisation de la grille Bootstrap
   Structure réelle du thème :
     #_desktop_logo .col-md-2      → logo comprimé sur 2 colonnes
     .header-top-right .col-md-10  → tout le reste sur 10 colonnes
   Ces largeurs figées empêchent la répartition logo / menu / outils.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
  #header .header-top .row{
    display:flex; align-items:center; flex-wrap:nowrap; gap:24px;
    min-height:92px; margin:0; width:100% }

  /* Logo : largeur naturelle, à gauche */
  #header .header-top #_desktop_logo,
  #header .header-top .col-md-2{
    flex:0 0 auto !important; width:auto !important; max-width:none !important;
    padding:0 !important; margin:0; order:1 }
  #_desktop_logo img, #header .logo img{ max-height:78px; width:auto; height:auto }

  /* .header-top-right est VIDE dans ce thème mais garde ses 10 colonnes :
     elle décalait tout vers la droite. On la neutralise complètement. */
  #header .header-top .header-top-right{
    display:none !important }
  /* Si une version future y remet du contenu, elle reprend sa place */
  #header .header-top .header-top-right:not(:empty){
    display:flex !important; flex:0 0 auto !important; width:auto !important;
    max-width:none !important; padding:0 !important; margin:0; order:2;
    align-items:center; gap:8px }
  /* Le menu, s'il existe, se centre dedans */
  #header .header-top .header-top-right > *{ margin:0 }
  #header .header-top .header-top-right ul.top-menu,
  #header .header-top .header-top-right #top-menu{
    display:flex; flex-wrap:nowrap; align-items:center; gap:4px;
    margin:0; padding:0; list-style:none }

  /* Outils : à droite, toujours */
  #header .header-top .ds-header-right{
    flex:0 0 auto !important; order:3; margin-left:auto !important;
    display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:6px }
}

/* Menu créé par le module quand le thème n'en affiche aucun */
.ds-menu-propre{
  display:flex; flex-wrap:nowrap; align-items:center; gap:4px;
  margin:0; padding:0; list-style:none }
.ds-menu-propre li{ display:block; float:none }
.ds-menu-propre a{
  display:block; padding:11px 14px; white-space:nowrap;
  font-family:Poppins,sans-serif; font-weight:500; font-size:15.5px;
  color:var(--ds-nuit); border-radius:var(--ds-r-s); text-decoration:none }
.ds-menu-propre a:hover{ background:var(--ds-bleu-c); color:var(--ds-bleu) }
@media (max-width:991px){
  .ds-menu-propre{ flex-wrap:wrap; justify-content:center; width:100% }
  .ds-menu-propre a{ padding:9px 12px; font-size:14px }
}


/* ═══════════════════════════════════════════════════════════════════
   AJUSTEMENTS FINS DE L'EN-TÊTE
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
  /* La recherche débordait : largeur bornée et texte décalé sous la loupe */
  .ds-header-right #search_widget{
    flex:0 0 200px !important; max-width:200px; min-width:160px }
  .ds-header-right #search_widget form{ position:relative; margin:0 }
  .ds-header-right #search_widget input[type=text]{
    width:100%; padding:10px 14px 10px 38px !important;
    font-size:14px; height:42px; box-sizing:border-box }
  .ds-header-right #search_widget i.search{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    font-size:19px; color:var(--ds-ardoise); pointer-events:none }
  .ds-header-right #search_widget i.clear{ right:10px; left:auto }
}

/* Le contenu s'aligne sur le logo : même marge que l'en-tête */
#header .header-top > .container,
.ds-hero > .container, .ds-sec > .container,
#footer .footer-container > .container{
  max-width:var(--ds-large); margin:0 auto;
  padding-left:var(--ds-marge); padding-right:var(--ds-marge) }

/* ═══════════════════════════════════════════════════════════════════
   EN-TÊTE — mise en page retenue
   Logo tout à gauche · menu juste après · outils tout à droite
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
  /* Le menu ne doit porter ni fond, ni bordure, ni ombre :
     le thème lui en donne, ce qui dessinait un bloc mal découpé. */
  #header .header-top #_desktop_top_menu,
  #header .header-top .menu,
  #header .header-top .js-top-menu{
    background:transparent !important; border:0 !important;
    box-shadow:none !important; border-radius:0 !important }
  #top-menu, #top-menu > li{ background:transparent !important; border:0 !important }
  #top-menu > li > a{
    background:transparent; border:0; text-transform:uppercase;
    font-size:14.5px; font-weight:600; letter-spacing:.6px;
    color:var(--ds-nuit); padding:11px 16px }
  #top-menu > li > a:hover,
  #top-menu > li.current > a, #top-menu > li.sfHoverForce > a{
    background:var(--ds-bleu-c); color:var(--ds-bleu) }
  /* Le sous-menu, lui, garde son cadre */
  #top-menu .sub-menu{
    background:#fff !important; border:1px solid var(--ds-bord) !important;
    box-shadow:var(--ds-ombre) !important; border-radius:var(--ds-r-s) !important }

  /* Le menu se colle au logo plutôt que de se centrer */
  .ds-header-row #_desktop_top_menu,
  .ds-header-row .ds-menu-wrap{
    justify-content:flex-start !important; margin-left:14px !important }

  /* Trait de séparation sous l'en-tête, net et unique */
  #header{ border-bottom:1px solid var(--ds-bord) }
  #header .header-top{ border:0; box-shadow:none }
}

/* ═══════════════════════════════════════════════════════════════════
   EN-TÊTE — logo collé au bord gauche de l'écran
   Le conteneur du thème impose une marge latérale : on l'annule pour
   l'en-tête seul, afin que le logo touche le bord.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
  #header .header-top > .container{
    max-width:none !important; width:100% !important;
    padding-left:0 !important; padding-right:var(--ds-marge) !important;
    margin:0 !important }
  .ds-header-row{ padding-left:0 !important }
  #header .header-top #_desktop_logo,
  .ds-header-row .ds-logo{ padding-left:0 !important; margin-left:0 !important }
  /* Un peu d'air entre le logo et la première entrée du menu */
  .ds-header-row #_desktop_top_menu,
  .ds-header-row .ds-menu-wrap{ margin-left:34px !important }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — remise en ordre
   Les règles de pleine largeur provoquaient un débordement horizontal
   et le logo disparaissait sous les styles hérités du bureau.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:991px){
  /* Aucun élément ne doit dépasser la largeur de l'écran */
  html, body{ overflow-x:hidden; max-width:100% }
  #wrapper, #main, #content-wrapper, .ds-hero, .ds-sec{
    max-width:100% !important; overflow-x:hidden }

  /* L'en-tête retrouve la mise en page du thème */
  #header .header-top > .container{
    max-width:100% !important; width:100% !important;
    padding:0 var(--ds-marge) !important; margin:0 auto !important }
  #header .header-top .row{
    display:flex !important; flex-wrap:wrap; align-items:center;
    justify-content:space-between; gap:10px; min-height:0; padding:12px 0; margin:0 }

  /* Logo visible et bien dimensionné */
  #header .header-top #_desktop_logo,
  #header .header-top .col-md-2,
  #header .header-top .hidden-sm-down{
    display:block !important; flex:0 0 auto !important;
    width:auto !important; max-width:none !important; padding:0 !important; margin:0 }
  #_desktop_logo img, #header .logo img, #header img.logo{
    max-height:46px !important; max-width:190px !important;
    width:auto !important; height:auto !important }
  #_desktop_logo h1{ margin:0; padding:0; line-height:0 }

  /* Bouton burger bien visible à droite du logo */
  #menu-icon, .menu-icon{ display:flex !important; align-items:center;
    color:var(--ds-bleu); order:2 }
  #menu-icon .material-icons{ font-size:32px }

  /* Outils : compacts, sur la même ligne */
  .ds-header-right{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap;
    align-items:center; justify-content:flex-end; gap:2px;
    width:auto !important; margin:0 !important; order:3 }
  .ds-header-right a{ font-size:12.5px; padding:7px 6px; gap:4px }
  .ds-header-right a span:not(.cart-products-count){ display:none }
  /* La recherche prend toute la largeur, en dessous */
  .ds-header-right #search_widget{
    flex:1 1 100% !important; width:100% !important; max-width:none !important;
    order:10; margin-top:8px !important }
  .ds-header-right #search_widget form{ position:relative; width:100% }
  .ds-header-right #search_widget input[type=text]{
    width:100% !important; box-sizing:border-box;
    padding:11px 14px 11px 40px !important; font-size:15px; height:44px }
  .ds-header-right #search_widget i.search{
    position:absolute; left:13px; top:50%; transform:translateY(-50%) }

  /* Le menu du thème redevient masqué : c'est le burger qui l'ouvre */
  #header .header-top #_desktop_top_menu{ display:none !important }
  .header-top-right{ display:none !important }
}

/* ═══════════════════════════════════════════════════════════════════
   PIED DE PAGE — lettre d'information et colonnes
   ═══════════════════════════════════════════════════════════════════ */

/* Le fond blanc du thème tranchait sur le fond nuit : on le supprime
   à tous les niveaux d'imbrication. */
#footer .block_newsletter,
#footer .block_newsletter > div,
#footer .block_newsletter .row,
#footer .block_newsletter .col-md-6,
#footer .block_newsletter .col-xs-12,
.block_newsletter, .block_newsletter *{
  background:transparent !important; border:0 !important; box-shadow:none !important }

#footer .block_newsletter{
  padding:34px 0 30px !important;
  border-bottom:1px solid #1E293B !important; margin-bottom:34px !important }
#footer .block_newsletter .row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 22px; max-width:var(--ds-large); margin:0 auto;
  padding:0 var(--ds-marge) }

/* Titre */
#footer .block_newsletter p:first-child,
#footer .block_newsletter .h3, #footer .block_newsletter h3{
  font-family:Poppins,sans-serif; font-size:19px; font-weight:600;
  color:#fff !important; margin:0; text-transform:none; letter-spacing:0 }

/* Champ et bouton, même hauteur */
#footer .block_newsletter form{ display:flex; gap:10px; flex-wrap:wrap; margin:0 }
#footer .block_newsletter input[type=email],
#footer .block_newsletter input[type=text]{
  background:#1E293B !important; border:1px solid #334155 !important;
  color:#fff !important; height:48px; border-radius:var(--ds-r-s) !important;
  padding:0 16px; font-size:15px; min-width:260px; flex:1 1 260px }
#footer .block_newsletter input::placeholder{ color:#64748B !important }
#footer .block_newsletter input:focus{
  border-color:var(--ds-bleu) !important; outline:0;
  box-shadow:0 0 0 3px rgba(29,78,216,.25) !important }
#footer .block_newsletter button,
#footer .block_newsletter input[type=submit],
#footer .block_newsletter .btn{
  background:var(--ds-bleu) !important; border:0 !important; color:#fff !important;
  height:48px; padding:0 26px; border-radius:var(--ds-r-s) !important;
  font-family:Poppins,sans-serif; font-weight:600; font-size:15px; cursor:pointer }
#footer .block_newsletter button:hover,
#footer .block_newsletter .btn:hover{ background:var(--ds-turq-f) !important }

/* Mention de désinscription : discrète, sur sa propre ligne */
#footer .block_newsletter em,
#footer .block_newsletter .newsletter-conditions,
#footer .block_newsletter p:last-child{
  color:#64748B !important; font-size:12px; font-style:normal;
  flex:1 1 100%; text-align:center; margin:4px 0 0 }

/* ── Colonne masquée par le script (classe ds-cache) ── */
#footer .ds-cache{ display:none !important }

/* Le surlignage bleu des liens venait d'une sélection restée active */
#footer a::selection, #footer *::selection{ background:rgba(6,182,212,.35); color:#fff }
#footer a{ -webkit-tap-highlight-color:transparent }

/* Colonnes du pied de page, alignées et aérées */
#footer .footer-container .row{
  display:flex; flex-wrap:wrap; gap:30px; justify-content:flex-start }
#footer .links .h3, #footer .h3, #footer .title .h3{
  font-family:Poppins,sans-serif; font-size:15px; font-weight:600; color:#fff !important;
  text-transform:none; letter-spacing:0; margin-bottom:12px }
#footer .links li a, #footer .account-list a{
  color:#94A3B8 !important; padding:5px 0; display:block; font-size:14.5px }
#footer .links li a:hover, #footer .account-list a:hover{ color:var(--ds-turq) !important }

@media (max-width:767px){
  #footer .block_newsletter .row{ flex-direction:column; text-align:center }
  #footer .block_newsletter form{ width:100%; flex-direction:column }
  #footer .block_newsletter input[type=email]{ min-width:0; width:100% }
  #footer .block_newsletter button{ width:100% }
}

/* ═══════════════════════════════════════════════════════════════════
   PIED DE PAGE — trois colonnes sur une ligne
   Our company · Votre compte · Lettre d'information (double largeur)
   ═══════════════════════════════════════════════════════════════════ */

/* La newsletter rejoint la rangée des colonnes au lieu d'être au-dessus */
#footer .block_newsletter{
  padding:0 !important; border:0 !important; margin:0 !important;
  order:3; flex:2 1 380px !important; min-width:300px }
#footer .block_newsletter .row{
  display:block !important; padding:0 !important; margin:0 !important;
  max-width:none !important; text-align:left }

/* Rangée principale : les trois blocs côte à côte */
#footer .footer-container{ padding:44px 0 0 !important }
#footer .footer-container > .container{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:34px 44px; max-width:var(--ds-large);
  padding:0 var(--ds-marge); margin:0 auto }
#footer .footer-container > .container > .row{
  display:contents }                       /* on efface la rangée intermédiaire */
#footer .links, #footer #block_myaccount_infos,
#footer .block_myaccount_infos{
  flex:1 1 190px; min-width:170px; max-width:none; padding:0; margin:0 }
#footer .links{ order:1 }
#footer #block_myaccount_infos, #footer .block_myaccount_infos{ order:2 }

/* ── Titres de section : ils étaient quasi invisibles ── */
#footer .h3, #footer h3, #footer .links .h3,
#footer .block_newsletter .h3, #footer .myaccount-title,
#footer .block_myaccount_infos .h3, #footer .title .h3, #footer .title span{
  font-family:Poppins,sans-serif !important; font-size:15.5px !important;
  font-weight:600 !important; color:#FFFFFF !important;
  text-transform:none !important; letter-spacing:0 !important;
  margin:0 0 14px !important; opacity:1 !important }

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

/* Champ et bouton de la newsletter, alignés */
#footer .block_newsletter form{
  display:flex !important; gap:10px; flex-wrap:nowrap; margin:0 0 12px }
#footer .block_newsletter input[type=email]{
  flex:1 1 auto !important; min-width:0 !important; width:auto !important }
#footer .block_newsletter button, #footer .block_newsletter .btn{
  flex:0 0 auto !important; white-space:nowrap }
#footer .block_newsletter em,
#footer .block_newsletter .newsletter-conditions,
#footer .block_newsletter p:last-child{
  text-align:left !important; font-weight:400 !important;
  font-size:12px !important; line-height:1.5; margin:0 !important; max-width:420px }

/* Bas de page */
#footer .copyright, #footer .footer-container > .container:last-child{
  border-top:1px solid #1E293B; margin-top:36px; padding:20px 0;
  text-align:center; font-size:13px; color:#64748B }

@media (max-width:900px){
  #footer .footer-container > .container{ gap:28px }
  #footer .links, #footer #block_myaccount_infos{ flex:1 1 45%; min-width:150px }
  #footer .block_newsletter{ flex:1 1 100% !important; order:0; margin-bottom:8px !important;
    padding-bottom:26px !important; border-bottom:1px solid #1E293B !important }
}
@media (max-width:575px){
  #footer .links, #footer #block_myaccount_infos{ flex:1 1 100% }
  #footer .block_newsletter form{ flex-wrap:wrap }
  #footer .block_newsletter button{ width:100% }
}