/* ==========================================================================
   Theme enfant DE WITTE-VERMEEREN : couleurs reprises du logo et de la facade
   Couleurs mesurees sur les images de l'ancien site :
     - bleu nuit du logo : #26225a
     - rouge de la facade (photo d'accueil) : #973a41
   Ce fichier n'est pas dans un @layer : il passe donc avant les styles du theme
   (les styles hors @layer l'emportent sur ceux des @layer, comportement prevu par Hummingbird).
   ========================================================================== */

:root {
  /* Couleurs de la marque, reutilisables ailleurs avec var(--dwv-bleu) */
  --dwv-bleu: #26225a;          /* bleu nuit du logo */
  --dwv-bleu-hover: #1d1a47;    /* bleu un peu plus fonce, au survol */
  --dwv-bleu-actif: #161437;    /* bleu encore plus fonce, bouton presse */
  --dwv-bleu-pale: #eceaf5;     /* fond tres clair derive du bleu, pour les blocs */
  --dwv-rouge: #973a41;         /* rouge de la facade, utilise en accent */

  /* Variables Bootstrap 5.3 : couleur principale et liens */
  --bs-primary: #26225a;                 /* couleur principale */
  --bs-primary-rgb: 38, 34, 90;          /* meme couleur en RVB (utilise pour les transparences) */
  --bs-link-color: #26225a;              /* liens */
  --bs-link-color-rgb: 38, 34, 90;       /* liens en RVB */
  --bs-link-hover-color: #1d1a47;        /* liens au survol */
  --bs-link-hover-color-rgb: 29, 26, 71; /* liens au survol en RVB */
}

/* Boutons principaux : on definit les variables propres aux boutons Bootstrap 5.3 */
.btn-primary {
  --bs-btn-bg: #26225a;                   /* fond */
  --bs-btn-border-color: #26225a;         /* bordure */
  --bs-btn-color: #fff;                   /* texte */
  --bs-btn-hover-bg: #1d1a47;             /* fond au survol */
  --bs-btn-hover-border-color: #1d1a47;   /* bordure au survol */
  --bs-btn-hover-color: #fff;             /* texte au survol */
  --bs-btn-active-bg: #161437;            /* fond quand on clique */
  --bs-btn-active-border-color: #161437;  /* bordure quand on clique */
  --bs-btn-active-color: #fff;            /* texte quand on clique */
  --bs-btn-focus-shadow-rgb: 38, 34, 90;  /* halo de focus au clavier */
}

/* Boutons a contour : meme logique avec le bleu du logo */
.btn-outline-primary {
  --bs-btn-color: #26225a;                /* texte et bordure */
  --bs-btn-border-color: #26225a;         /* bordure */
  --bs-btn-hover-bg: #26225a;             /* fond au survol */
  --bs-btn-hover-border-color: #26225a;   /* bordure au survol */
  --bs-btn-hover-color: #fff;             /* texte au survol */
  --bs-btn-active-bg: #161437;            /* fond quand on clique */
  --bs-btn-active-border-color: #161437;  /* bordure quand on clique */
  --bs-btn-active-color: #fff;            /* texte quand on clique */
}

/* Titres : bleu nuit du logo pour les titres de page et de section */
h1, h2, h3 {
  color: var(--dwv-bleu);
}

/* Accent rouge : trait sous les titres de section, repris de la facade */
h2 {
  border-bottom: 2px solid var(--dwv-rouge);  /* filet rouge sous le titre */
  padding-bottom: .35rem;                       /* espace entre le titre et le filet */
}

/* ==========================================================================
   EN-TETE : logo a sa taille d'origine, menu sur sa propre ligne sous le logo
   (structure lue sur le site : .header-bottom__row contient le logo, le menu
   et les autres blocs comme autant de colonnes d'une meme ligne)
   ========================================================================== */

:root {
  /* Largeur du logo : 273 px = taille reelle du fichier. Au-dela, il devient flou. */
  --dwv-logo-largeur: 273px;
}

/* Le logo ne se laisse plus ecraser par les autres colonnes de la ligne */
.header-bottom__logo {
  flex: 0 0 auto;              /* ni agrandi ni reduit : garde la largeur de son contenu */
}
.header-bottom__logo .logo {
  width: var(--dwv-logo-largeur);  /* largeur fixe, reglable plus haut */
  max-width: none;                 /* supprime la limite de .img-fluid qui rapetissait l'image */
  height: auto !important;         /* hauteur calculee d'apres la largeur : le logo garde ses proportions */
  max-height: none !important;     /* supprime toute limite de hauteur du theme, cause de l'ecrasement */
  aspect-ratio: 273 / 142;         /* proportions reelles du fichier logo (largeur / hauteur) */
  object-fit: contain;             /* quoi qu'il arrive, l'image n'est jamais deformee */
}

/* Ecrans larges seulement (menu complet visible, a partir de 1200 px) :
   ligne 1 = logo (+ recherche et autres blocs a droite), ligne 2 = menu pleine largeur */
@media (min-width: 1200px) {
  .header-bottom__row > * {
    order: 2;                  /* tous les blocs apres le logo, sur la premiere ligne */
  }
  .header-bottom__row > .header-bottom__logo {
    order: 1;                  /* le logo reste en premier */
    margin-right: auto;        /* pousse les autres blocs vers la droite */
  }
  .header-bottom__row > .ps-mainmenu--desktop {
    order: 3;                  /* le menu passe apres tout le reste */
    flex: 0 0 100%;            /* il prend toute la largeur, donc une ligne a lui */
    width: 100%;
    max-width: 100%;
    position: relative;        /* le menu reste dans le flux de la page, il ne flotte plus sur le logo */
    margin-top: .5rem;         /* petit espace entre le logo et le menu */
  }

  /* Plus aucune hauteur imposee a l'en-tete : il grandit avec le logo au lieu de le laisser deborder */
  .header-bottom,
  .header-bottom__container,
  .header-bottom__row,
  .header-bottom__h1 {
    height: auto !important;       /* hauteur = celle du contenu */
    min-height: 0 !important;      /* supprime une hauteur minimale prevue pour l'ancien petit logo */
    max-height: none !important;   /* supprime une hauteur maximale eventuelle */
  }
  .header-bottom__row {
    row-gap: .5rem;                /* espace regulier entre la ligne du logo et celle du menu */
    align-items: center !important; /* logo et recherche alignes verticalement sur leur ligne */
  }
}

/* ==========================================================================
   CORRECTIF v2 : en-tete NON collant + espacement logo / menu
   Cause de la grande zone blanche : le script "js-sticky-header" du theme
   fige l'en-tete (position fixe) et reserve en dessous une place calculee pour
   l'ancien en-tete plus petit. On le desactive : l'en-tete reste dans le flux.
   ========================================================================== */
.header,
.header.js-sticky-header,
.header.is-sticky,
.header.sticky {
  position: relative !important;   /* plus de position fixe : le contenu ne passe plus dessous */
  top: auto !important;            /* annule le decalage pose par le script */
  transform: none !important;      /* annule un eventuel deplacement anime */
  height: auto !important;         /* annule la hauteur figee en ligne par le script */
  min-height: 0 !important;        /* supprime toute hauteur minimale reservee */
}
body {
  padding-top: 0 !important;       /* supprime la marge haute reservee pour un en-tete fixe */
}
/* Cale (spacer) eventuelle inseree par le script sous l'en-tete : on la masque */
.header + .header-spacer,
.header-placeholder {
  display: none !important;
}

/* Espacement : plus d'air autour du logo et entre logo et menu */
.header-bottom__container {
  padding-top: 1rem;               /* air au-dessus du logo */
  padding-bottom: 1rem;            /* air sous le menu */
}
@media (min-width: 1200px) {
  .header-bottom__row {
    row-gap: 1.25rem;              /* distance entre la ligne du logo et celle du menu */
  }
  .header-bottom__row > .ps-mainmenu--desktop {
    margin-top: 0;                 /* l'espace vient desormais de row-gap */
    padding-top: .5rem;            /* petit air au-dessus du menu (filet supprime) */
  }
}

/* ==========================================================================
   CORRECTIF v3
   - Le menu mobile (panneau coulissant) n'est plus touche par les regles du menu bureau
   - Le conteneur du logo reserve toute la hauteur du logo (142 px pour 273 px de large),
     sinon le menu remonte sur le bas de l'image
   ========================================================================== */
.ps-mainmenu--mobile.offcanvas {
  position: fixed !important;      /* panneau flottant hors flux, comme prevu par le theme */
  flex: none !important;           /* annule le flex 100% herite de la regle precedente */
  width: auto !important;          /* la largeur est geree par .offcanvas */
  margin-top: 0 !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}
.header-bottom__logo {
  min-height: calc(var(--dwv-logo-largeur) * 142 / 273) !important; /* hauteur = largeur x 142/273 */
}
.header-bottom__logo a,
.header-bottom__logo img {
  display: block;                  /* supprime l'espace parasite sous l'image */
}

/* ==========================================================================
   ACCUEIL : slider moins grand, comme sur l'ancien site (environ 780 px de large)
   Les selecteurs visent tout element dont la classe contient "imageslider",
   car le nom exact des classes du module peut varier selon la version.
   ========================================================================== */
[class*="imageslider"] {
  max-width: 1000px;               /* largeur maximale du slider (reglable) */
  margin-left: auto;               /* centre le slider dans la page */
  margin-right: auto;
  margin-bottom: 1.5rem;           /* espace avant le bloc suivant */
}
[class*="imageslider"] img {
  width: 100%;                     /* l'image remplit la largeur du slider */
  height: auto;                    /* hauteur proportionnelle, pas de deformation */
  max-height: 480px;               /* plafond de hauteur pour ne pas envahir l'ecran */
  object-fit: cover;               /* recadre proprement si l'image depasse le plafond */
}

/* Masque le bloc de legende (titre + description) pose par-dessus l'image du slider :
   l'ancien site affichait la photo seule */
[class*="imageslider"] [class*="caption"],
[class*="imageslider"] .carousel-caption {
  display: none !important;        /* le bloc "Bienvenue" disparait, la photo reste */
}

/* ==========================================================================
   SLIDER D'ACCUEIL v2 : noms de classes reels releves sur le site
   (figure.ps-imageslider__figure > figcaption.ps-imageslider__figcaption)
   ========================================================================== */

/* Legende "Bienvenue" posee sur la photo : masquee */
.ps-imageslider__figcaption,
.carousel-caption {
  display: none !important;        /* seule la photo reste visible */
}

/* Largeur du slider : le conteneur .carousel qui contient les images du module */
.carousel:has(.ps-imageslider__figure) {
  max-width: 1000px;               /* largeur maximale (reglable) */
  margin: 0 auto 1.5rem;           /* centre horizontalement, espace sous le slider */
}
.ps-imageslider__figure img {
  width: 100%;                     /* l'image remplit le slider */
  height: auto;                    /* proportions respectees */
  max-height: 480px;               /* plafond de hauteur */
  object-fit: cover;               /* recadrage propre au-dela du plafond */
}

/* ==========================================================================
   PIED DE PAGE : suppression de la ligne "(c) 2026 - Logiciel e-commerce par PrestaShop"
   (element releve sur le site : footer > div.container > div.copyright)
   ========================================================================== */
.footer .copyright,
.footer__main .copyright {
  display: none !important;        /* la ligne de copyright disparait */
}

/* ==========================================================================
   PIED DE PAGE : bloc d'adresse en premier + titre renomme
   Structure relevee : div.footer__main-top.row contient section.ps-contactinfo
   (adresse) et nav.ps-linklist (liens), chacun avec p.footer-block__title
   ========================================================================== */

/* 1) L'adresse passe avant la liste de liens (les colonnes sont des elements flex) */
.footer__main-top > .ps-contactinfo {
  order: -1;                       /* valeur negative : placee avant tous les autres blocs */
}

/* 2) Titre du bloc d'adresse : "Informations" devient "Informations sur votre boutique".
   Le texte d'origine est rendu invisible (taille 0) et remplace par du texte genere. */
.ps-contactinfo .footer-block__title {
  font-size: 0;                    /* cache le texte d'origine "Informations" */
}
.ps-contactinfo .footer-block__title::before {
  content: "Informations sur votre boutique"; /* nouveau titre affiche */
  font-size: 1rem;                 /* taille normale du titre (ajustable) */
  font-weight: 600;                /* meme graisse que les autres titres du pied de page */
}

/* ==========================================================================
   FICHE PRODUIT : pastilles "Neuf" et "Rupture de stock" masquees
   (l'etat "Neuf" est affiche en texte sous le titre, comme sur l'ancien site)
   ========================================================================== */
/* Le theme force "display" sur ces elements via des classes utilitaires (couche CSS @layer),
   donc display:none ne suffit pas. On les rend invisibles et sans encombrement avec d'autres proprietes. */
.product-flags,
.product-flags .badge,
.product-flags li {
  visibility: hidden !important;   /* invisible : pas touche par les regles "display" du theme */
  height: 0 !important;            /* ne prend plus de place en hauteur */
  width: 0 !important;             /* ni en largeur */
  min-height: 0 !important;        /* annule toute hauteur minimale */
  margin: 0 !important;            /* supprime les marges */
  padding: 0 !important;           /* supprime les espaces internes */
  border: 0 !important;            /* supprime les bordures */
  overflow: hidden !important;     /* rien ne depasse */
  position: absolute !important;   /* sort du flux de la page, ne decale plus l'image */
}

/* ==========================================================================
   FICHE PRODUIT : photo moins envahissante
   Le theme reserve 48 a 55 % de la largeur a la photo (grid-template-columns).
   On limite la colonne de la photo a 380 px maximum ; le texte prend le reste.
   ========================================================================== */
@media (min-width: 768px) {
  .product__container {
    /* colonne 1 (photo) : entre 280 et 380 px ; colonne 2 (texte) : tout le reste */
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 2rem;                     /* espace entre la photo et le texte */
  }
}

/* ==========================================================================
   LISTES DE PRODUITS : presentation en LISTE comme sur l'ancien site
   une ligne par produit : photo a gauche, nom + texte court, bouton "Voir details" a droite
   (structure : .products > article.product-miniature > .__inner > .__top (photo) + .__bottom)
   ========================================================================== */

/* Une seule colonne au lieu de la grille de 2 a 4 colonnes */
.products {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;                                  /* l'espace est gere par chaque ligne */
}

/* Chaque produit : photo et texte cote a cote, filet fin sous chaque ligne */
.product-miniature__inner {
  flex-direction: row;                     /* photo | texte */
  align-items: flex-start;                 /* tout aligne en haut */
  gap: 1.5rem;                             /* espace entre la photo et le texte */
  height: auto;                            /* hauteur = celle du contenu */
  padding: 1rem 0;                         /* air au-dessus et en dessous */
  border-bottom: 1px solid #e3e1ee;        /* filet de separation entre produits */
}

/* Photo : colonne de 200 px */
.product-miniature__top {
  flex: 0 0 200px;                         /* largeur fixe, ne s'etire pas */
  max-width: 200px;
}

/* Texte + bouton : nom a gauche, bouton a droite */
.product-miniature__bottom {
  flex-direction: row;                     /* infos | bouton */
  align-items: flex-start;
  justify-content: space-between;          /* bouton repousse a droite */
  gap: 1.5rem;
  padding: 0;                              /* le padding est deja gere par la ligne */
}
.product-miniature__infos {
  flex: 1 1 auto;                          /* le nom prend toute la largeur disponible */
}
.product-miniature__actions {
  margin-top: 0;                           /* le bouton est aligne en haut, pas repousse en bas */
  flex: 0 0 auto;                          /* le bouton garde sa taille */
}

/* Texte court (Poids / Portion) sous le nom */
.product-miniature__short {
  font-size: .875rem;                      /* un cran plus petit que le nom */
  color: #6c757d;                          /* gris discret */
}

/* Petits ecrans : on empile photo puis texte */
@media (max-width: 575.98px) {
  .product-miniature__inner,
  .product-miniature__bottom {
    flex-direction: column;                /* photo au-dessus, texte en dessous */
  }
  .product-miniature__top {
    flex-basis: auto;
    max-width: 100%;
  }
}

/* ==========================================================================
   COLONNE DE GAUCHE : blocs "Information" et "Nos magasins" (comme l'ancien site)
   ========================================================================== */
.dwv-bloc {
  margin-top: 1.5rem;                        /* espace entre deux blocs */
  border-top: 4px solid #333;                /* filet sombre en haut, comme avant */
}
.dwv-bloc__titre {
  margin: 0;
  padding: .85rem 1rem;                      /* aere le titre */
  background: #f6f6f6;                       /* fond gris clair du titre */
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;                 /* titres en majuscules comme avant */
  color: var(--dwv-bleu);                    /* bleu de la charte */
  border-bottom: 0;                          /* annule le filet rouge des titres h2 du theme */
}
.dwv-bloc__liste li {
  border-bottom: 1px solid #e3e1ee;          /* filet fin entre les liens */
}
.dwv-bloc__liste a {
  display: block;
  padding: .55rem 1rem;                      /* zone cliquable confortable */
  font-size: .9rem;
  text-decoration: none;
}
.dwv-bloc__liste a:hover {
  background: var(--dwv-bleu-pale);               /* survol : fond bleu tres pale */
}
.dwv-bloc__logo {
  padding: 1rem;                             /* air autour du logo */
}

/* Texte et bouton du bloc "Nos magasins" */
.dwv-bloc__texte {
  margin: 0 1rem .75rem;                     /* aligne le texte avec les liens du bloc */
  font-size: .85rem;
  color: #6c757d;                            /* gris discret comme l'ancien site */
}
.dwv-bloc__bouton {
  margin: 0 1rem 1rem;                       /* alignement et espace sous le bouton */
}

/* ==========================================================================
   COLONNE DE GAUCHE : bloc "Deja vus" compact, meme style que "Information" / "Nos magasins"
   (structure : section.ps-viewedproduct > .module-products > h2.section-title + liste de vignettes)
   ========================================================================== */

/* Cadre du bloc : filet sombre en haut, comme les autres blocs */
.ps-viewedproduct {
  margin-top: 1.5rem;                        /* espace avec le bloc precedent */
  border-top: 4px solid #333;                /* meme filet que .dwv-bloc */
}
.ps-viewedproduct .module-products {
  padding: 0;                                /* supprime les marges internes du theme */
}

/* Titre : meme apparence que les autres blocs (fond gris, majuscules, bleu) */
.ps-viewedproduct .section-title {
  margin: 0;
  padding: .85rem 1rem;
  background: #f6f6f6;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--dwv-bleu);
  border-bottom: 0;                          /* annule le filet rouge des titres h2 */
}

/* Seulement les 3 premiers articles : les suivants sont masques */
.ps-viewedproduct .product-miniature:nth-child(n+4) {
  display: none;
}

/* Vignettes compactes : petite photo a gauche, nom a droite, sans bouton */
#left-column .products {
  gap: 0;
}
#left-column .product-miniature__inner {
  flex-direction: row;                       /* photo | texte */
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid #e3e1ee;          /* filet fin entre les articles */
}
#left-column .product-miniature__top {
  flex: 0 0 72px;                            /* photo de 72 px */
  max-width: 72px;
}
#left-column .product-miniature__bottom {
  flex-direction: column;
  gap: .25rem;
}
#left-column .product-miniature__actions {
  display: none;                             /* pas de bouton "Voir details" dans la colonne */
}
#left-column .product-miniature__title {
  font-size: .85rem;                         /* nom plus petit */
}
#left-column .product-miniature__short {
  font-size: .75rem;                         /* texte court plus petit */
}

/* ==========================================================================
   COLONNE DE GAUCHE : ordre des blocs
   Ordre voulu : arbre des categories, filtres, Information, Nos magasins, puis Deja vus.
   La colonne devient une pile verticale ; "order" fixe la place de chaque bloc
   (les blocs sans "order" valent 0 et restent en haut, dans leur ordre d'origine).
   ========================================================================== */
#left-column {
  display: flex;                             /* empile les blocs et autorise "order" */
  flex-direction: column;                    /* de haut en bas */
}
#left-column .dwv-bloc {
  order: 5;                                  /* "Information" et "Nos magasins" apres les modules */
}
#left-column .ps-viewedproduct {
  order: 10;                                 /* "Deja vus" tout en bas, apres "Nos magasins" */
}