/* ==========================================================================
   Fêtez-Moi — couche d'interface
   --------------------------------------------------------------------------
   Chargée en dernier, après fm-header.css et fm-front.css.

   Ce fichier ne redessine pas le site : il en corrige la géométrie. Le thème
   Ginza1 date de 2018 et suit les conventions de son époque — angles vifs,
   filets gris de 1px pour séparer les blocs, aucune ombre. Tout est ici ramené
   à un vocabulaire commun : un jeu de rayons, trois profondeurs d'ombre, une
   courbe d'animation unique.

   Ordre des sections :
     1. Jetons (rayons, ombres, transitions)
     2. Rayons appliqués aux composants du thème
     3. En-tête
     4. Page d'accueil
     5. Catalogue
     6. Formulaires et boutons
     7. Pied de page
     8. Mobile
     9. Accessibilité

   Les !important reprennent la main sur theme.css (200 Ko) et custom.css
   (392 Ko), fichiers d'origine qu'on ne modifie pas — ils repartent à chaque
   mise à jour du thème.
   ========================================================================== */

:root {
  /* Rayons — une échelle, six barreaux. Un composant ne choisit pas une valeur
     libre : il prend le barreau qui correspond à sa taille. */
  --fm-r-xs:   8px;    /* pastilles, badges, petits médias */
  --fm-r-sm:   12px;   /* champs, boutons carrés, vignettes */
  --fm-r-md:   18px;   /* cartes produit, encarts */
  --fm-r-lg:   26px;   /* tuiles, panneaux, sections internes */
  --fm-r-xl:   36px;   /* grands blocs pleine largeur */
  --fm-r-pill: 999px;  /* boutons d'action, champs de recherche */

  /* Ombres — portée large et très diffuse, teintée du brun du texte plutôt
     que du noir : sur un fond crème, une ombre noire tire vers le gris sale. */
  --fm-sh-1: 0 1px 2px rgba(41,35,30,.04), 0 4px 12px -6px rgba(41,35,30,.10);
  --fm-sh-2: 0 2px 6px rgba(41,35,30,.05), 0 16px 32px -20px rgba(41,35,30,.22);
  --fm-sh-3: 0 4px 12px rgba(41,35,30,.06), 0 30px 60px -32px rgba(41,35,30,.32);

  --fm-ease: cubic-bezier(.22, .61, .36, 1);
  --fm-dur:  .28s;
}

/* ==========================================================================
   2. Rayons appliqués aux composants du thème
   --------------------------------------------------------------------------
   Une passe large : le thème pose des angles vifs sur à peu près tout ce qui
   a un fond ou une bordure. Plutôt que de lister chaque sélecteur, on cible
   les familles de composants Bootstrap/PrestaShop que le thème réutilise.
   ========================================================================== */

.card, .alert, .modal-content, .dropdown-menu, .popover,
.custom-select, .form-control, .input-group, .btn,
.block-categories, .block_newsletter, .search_widget,
.product-miniature, .thumbnail-container, .quickview,
#search_filters, #search_filters_wrapper, .facet,
.page-content, .page-header, .page-footer,
.js-product-miniature .img_block, .cart-summary, .cart-item,
.address, .order-confirmation-table, .table-bordered,
#notifications article, .toast {
  border-radius: var(--fm-r-sm);
}

/* Les images posées dans un conteneur arrondi doivent l'être aussi, sinon les
   coins de la photo dépassent du cadre. */
.product-miniature img, .thumbnail-container img,
.card img, .block-categories img {
  border-radius: inherit;
}

/* ==========================================================================
   3. En-tête
   ========================================================================== */

/* La barre de recherche est déjà en pilule dans fm-header.css. On lui ajoute
   la profondeur qui lui manquait : posée sur le fond, pas dessinée dessus. */
#header .fm-bar__search #search_widget form {
  border-color: #ece7e0 !important;
  box-shadow: var(--fm-sh-1) !important;
}
#header .fm-bar__search #search_widget form:focus-within {
  box-shadow: 0 0 0 3px rgba(226, 1, 123, .10), var(--fm-sh-2) !important;
}

/* Bouton « Se connecter » : c'est l'action qui débloque les prix. */
.fm-cta {
  box-shadow: var(--fm-sh-1);
  transition: background var(--fm-dur) var(--fm-ease),
              transform var(--fm-dur) var(--fm-ease),
              box-shadow var(--fm-dur) var(--fm-ease) !important;
}
.fm-cta:hover { transform: translateY(-1px); box-shadow: var(--fm-sh-2); }

/* Sous-menus : fm-header.css les laissait à angles vifs avec un liseré rose
   en haut, la signature visuelle des menus déroulants de 2010. On passe à un
   panneau flottant arrondi. */
#header .fm-bar__nav .sub-menu,
#header .fm-bar__nav .popover.sub-menu {
  margin-top: 8px !important;
  padding: 10px !important;
  border: 1px solid rgba(41,35,30,.07) !important;
  border-top: 1px solid rgba(41,35,30,.07) !important;
  border-radius: var(--fm-r-md) !important;
  box-shadow: var(--fm-sh-3) !important;
}
#header .fm-bar__nav .sub-menu a {
  border-radius: var(--fm-r-xs);
  padding: 9px 14px !important;
}
#header .fm-bar__nav .sub-menu a:hover { background: #fdf2f8 !important; }
#header .fm-bar__nav .sub-menu .sub-menu a { padding-left: 26px !important; }

/* Le panier déroulant flottait sans profondeur */
.fm-cart .popup_cart,
#header .popup_cart {
  border-radius: var(--fm-r-md) !important;
  box-shadow: var(--fm-sh-3) !important;
  overflow: hidden;
}

/* ==========================================================================
   4. Page d'accueil
   ========================================================================== */

/* -- 4.1 Diaporama --------------------------------------------------------
   Le bandeau touchait les bords de l'écran et démarrait au ras du menu. On le
   détache : marges latérales, grand rayon, ombre portée. Le visuel devient un
   objet posé sur la page au lieu d'un fond collé en haut. */
/* Le module rend le diaporama en enfant direct de <main>, avant #content :
   il n'est donc PAS descendant de .page-home. Le point d'accroche est la
   classe que PrestaShop pose sur <body>. */
body.page-index .pos_bannerslide {
  max-width: 1488px;
  margin: 24px auto 0 !important;
  padding: 0 24px;
}
body.page-index .pos_bannerslide .slideshow_container,
body.page-index .pos_bannerslide .pos-slideshow,
body.page-index .pos_bannerslide .ma-nivoslider,
body.page-index .pos_bannerslide .nivoSlider {
  border-radius: var(--fm-r-xl) !important;
  overflow: hidden !important;
}
body.page-index .pos_bannerslide .slideshow_container { box-shadow: var(--fm-sh-2); }

/* Nivo calcule la hauteur du diaporama d'après l'image qu'il charge, et la pose
   en style inline sur .nivoSlider. Plafonner ce seul niveau laissait le parent
   à sa hauteur d'origine : d'où le liseré blanc sous l'image. La hauteur est
   donc imposée à tous les niveaux à la fois, et les images la remplissent. */
body.page-index .pos_bannerslide .slideshow_container,
body.page-index .pos_bannerslide .pos-slideshow,
body.page-index .pos_bannerslide .ma-nivoslider,
body.page-index .pos_bannerslide .nivoSlider {
  height: clamp(320px, 36vw, 520px) !important;
  max-height: none !important;
}
body.page-index .pos_bannerslide .nivoSlider img,
body.page-index .pos_bannerslide .nivo-main-image,
body.page-index .pos_bannerslide .slides img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  /* LIMITE CONNUE, héritée de fm-front.css et confirmée en comparant les quatre
     visuels du diaporama : le texte est incrusté dans l'image, et pas à la même
     hauteur d'un visuel à l'autre — « ASSIETTE JETABLE » est en haut, « VERRE »
     est en bas. Aucun point de cadrage ne les sert tous les quatre. 20 % est le
     compromis retenu : il garde en entier le texte des visuels qui le portent en
     haut, ce qui est le cas de trois d'entre eux, et laisse voir le produit.
     Le correctif de fond est de ré-exporter les visuels en bandeau ~3:1 avec le
     texte sorti de l'image — c'est un travail de visuel, côté client. */
  object-position: center 20% !important;
}

/* Les puces de navigation du diaporama : des carrés gris chez Nivo. */
body.page-index .nivo-controlNav {
  position: absolute; bottom: 18px; left: 0; right: 0;
  z-index: 9; text-align: center; padding: 0;
}
body.page-index .nivo-controlNav a {
  display: inline-block; width: 8px; height: 8px; margin: 0 4px;
  border-radius: var(--fm-r-pill) !important;
  background: rgba(255,255,255,.55) !important;
  text-indent: -9999px; overflow: hidden;
  border: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: width var(--fm-dur) var(--fm-ease), background var(--fm-dur) var(--fm-ease);
}
body.page-index .nivo-controlNav a.active { width: 24px; background: #fff !important; }

/* La barre de progression que le module dessine en haut du visuel */
body.page-index .timethai { display: none !important; }

/* -- 4.2 Bandeau de réassurance -------------------------------------------
   C'était une grille de quatre cellules séparées par des filets d'un pixel,
   enfermée dans un cadre. Les filets disparaissent : quatre cartes posées
   côte à côte, qui respirent. */
.fm-reassure {
  background: transparent !important;
  border: 0 !important;
  padding: 40px 0 4px;
}
.fm-reassure__grid {
  gap: 14px !important;
  background: transparent !important;
  border: 0 !important;
}
.fm-reassure__item {
  background: var(--fm-ivory-2, #f6f1e9) !important;
  border: 1px solid rgba(41,35,30,.05);
  border-radius: var(--fm-r-lg);
  padding: 28px 20px !important;
  transition: transform var(--fm-dur) var(--fm-ease),
              box-shadow var(--fm-dur) var(--fm-ease);
}
.fm-reassure__item:hover { transform: translateY(-3px); box-shadow: var(--fm-sh-2); }

/* L'icône reçoit son propre disque : elle se lit comme un objet, pas comme un
   trait perdu au-dessus du texte. */
.fm-reassure__item .fm-ico {
  width: 44px; height: 44px; padding: 10px;
  background: #fff; border-radius: var(--fm-r-pill);
  box-shadow: var(--fm-sh-1);
  box-sizing: border-box;
  margin-bottom: 4px;
}

/* -- 4.3 Tuiles « Nos univers » -------------------------------------------
   Le voile ivoire délavait les photos pour garder un titre sombre lisible.
   On inverse : dégradé sombre par le bas, titre blanc. Les photos retrouvent
   leurs couleurs et les tuiles gagnent le contraste qui leur manquait. */
.fm-tiles { gap: 20px !important; }

.fm-tile__link {
  min-height: 300px !important;
  padding: 28px !important;
  border: 0 !important;
  border-radius: var(--fm-r-lg) !important;
  box-shadow: var(--fm-sh-1);
  transition: transform var(--fm-dur) var(--fm-ease),
              box-shadow var(--fm-dur) var(--fm-ease) !important;
}
.fm-tile__link:hover, .fm-tile__link:focus {
  transform: translateY(-5px) !important;
  box-shadow: var(--fm-sh-3) !important;
}

.fm-tile__veil {
  background: linear-gradient(to top,
    rgba(24,20,17,.90) 0%,
    rgba(24,20,17,.74) 30%,
    rgba(24,20,17,.36) 62%,
    rgba(24,20,17,.10) 100%) !important;
}
/* Au survol, le voile se densifie légèrement au lieu de s'éclaircir : le titre
   blanc reste lisible même sur les photos les plus claires du lot. */
.fm-tile__link:hover .fm-tile__veil,
.fm-tile__link:focus .fm-tile__veil { opacity: 1 !important; }
.fm-tile__link:hover .fm-tile__veil::after,
.fm-tile__link:focus .fm-tile__veil::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(24,20,17,.28) 0%, rgba(24,20,17,0) 70%);
}

.fm-tile__link:hover .fm-tile__img,
.fm-tile__link:focus .fm-tile__img { transform: scale(1.06); }

.fm-tile__name {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.4) !important;
  font-size: 1.42rem !important;
}
.fm-tile__go { color: #fff !important; opacity: .92; }

/* Le filet champagne collé au coin supérieur gauche appartenait au cadre carré.
   Sans cadre, il n'a plus rien à souligner. */
.fm-tile__rule { display: none !important; }

/* -- 4.4 Espace professionnel ---------------------------------------------
   Un rectangle noir pleine largeur. On le détache en panneau arrondi et on lui
   donne une photo de fond : c'est le seul endroit de la page où l'on parle aux
   traiteurs, il mérite d'être regardé. */
.fm-pro {
  background: transparent !important;
  padding: 20px 0 64px !important;
}
.fm-pro > .fm-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--fm-r-xl);
  padding: 56px 48px !important;
  /* Le voile reste dense jusqu'au bord droit : les deux boutons s'y détachent,
     y compris celui qui n'a qu'un contour. La photo transparaît sans jamais
     descendre sous le contraste nécessaire au texte blanc. */
  background:
    linear-gradient(100deg, rgba(22,18,15,.95) 0%, rgba(22,18,15,.90) 46%, rgba(22,18,15,.78) 74%, rgba(22,18,15,.72) 100%),
    var(--fm-pro-photo, none) center/cover no-repeat;
  box-shadow: var(--fm-sh-2);
}
.fm-pro__lead { color: rgba(255,255,255,.82) !important; }

.fm-btn {
  box-shadow: var(--fm-sh-1);
  transition: background-color var(--fm-dur) var(--fm-ease),
              color var(--fm-dur) var(--fm-ease),
              border-color var(--fm-dur) var(--fm-ease),
              transform var(--fm-dur) var(--fm-ease),
              box-shadow var(--fm-dur) var(--fm-ease) !important;
}
.fm-btn:hover, .fm-btn:focus { transform: translateY(-2px); box-shadow: var(--fm-sh-2); }
.fm-btn--ghost {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.42) !important;
}
.fm-btn--ghost:hover, .fm-btn--ghost:focus { background: rgba(255,255,255,.20) !important; }

/* -- 4.5 Section « Depuis 1955 » ------------------------------------------
   Ajoutée par index.tpl. Deux colonnes : une photo, un texte. Elle donne à la
   page d'accueil le temps de respirer entre le catalogue et l'appel pro, et
   installe l'ancienneté de la maison — le seul argument que les concurrents
   ne peuvent pas copier. */
.fm-story { background: var(--fm-ivory, #fdfaf6); padding: 76px 0 !important; }
.fm-story__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}
.fm-story__media {
  position: relative;
  border-radius: var(--fm-r-xl);
  overflow: hidden;
  box-shadow: var(--fm-sh-2);
  aspect-ratio: 4 / 3;
}
.fm-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pastille d'ancienneté posée en débord sur la photo */
.fm-story__badge {
  position: absolute; right: 22px; bottom: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 108px; height: 108px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-radius: var(--fm-r-pill);
  box-shadow: var(--fm-sh-2);
  text-align: center;
}
.fm-story__badge b {
  font-family: var(--fm-serif, Georgia, serif);
  font-size: 1.7rem; line-height: 1; color: var(--fm-ink, #292929);
}
.fm-story__badge span {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fm-gold, #b08d57); margin-top: 5px; font-weight: 600;
}

.fm-story__text .fm-section__title { text-align: left; }
.fm-story__body { color: var(--fm-ink-2, #57534e); font-size: 15.5px; line-height: 1.7; margin: 0 0 26px; }
.fm-story__body p { margin: 0 0 14px; }
.fm-story__body p:last-child { margin: 0; }

/* Trois chiffres alignés sous le texte */
.fm-story__facts {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.fm-story__facts li {
  background: #fff;
  border-radius: var(--fm-r-md);
  padding: 16px 14px;
  box-shadow: var(--fm-sh-1);
}
.fm-story__facts b {
  display: block;
  font-family: var(--fm-serif, Georgia, serif);
  font-size: 1.32rem; color: var(--fm-ink, #292929); line-height: 1;
}
.fm-story__facts span {
  display: block; margin-top: 6px;
  font-size: 11.5px; color: var(--fm-muted, #8b8b8b); line-height: 1.35;
}

.fm-story__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  color: var(--fm-accent, #e2017b); text-decoration: none;
}
.fm-story__link svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--fm-dur) var(--fm-ease);
}
.fm-story__link:hover svg { transform: translateX(4px); }

/* -- 4.6 Newsletter --------------------------------------------------------
   Le module rend un champ et un bouton rectangulaires collés l'un à l'autre.
   On en fait une pilule unique posée sur le fond crème. */
.ft_newsletter {
  border-radius: var(--fm-r-xl);
  max-width: 1232px;
  margin: 0 auto 64px !important;
  padding: 52px 24px !important;
}
/* Le formulaire lui-même devient la pilule : le module rend le bouton comme
   frère du champ, pas dans un conteneur commun. Habiller un div intermédiaire
   laissait un liseré blanc sous le champ (le .clearfix du module). */
.ft_newsletter form {
  display: flex; align-items: center; gap: 8px;
  max-width: 540px; margin: 0 auto;
  background: #fff;
  border-radius: var(--fm-r-pill);
  padding: 6px 6px 6px 12px;
  box-shadow: var(--fm-sh-1);
}
.ft_newsletter form > .clearfix { display: none !important; }
.ft_newsletter .input-wrapper {
  flex: 1 1 auto; min-width: 0;
  background: none !important; border: 0 !important;
  box-shadow: none !important; padding: 0 !important; margin: 0 !important;
}
.ft_newsletter input[type="email"],
.ft_newsletter input[name="email"] {
  width: 100% !important;
  height: 44px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 12px 0 4px !important;
  font-size: 14px;
  border-radius: var(--fm-r-pill) !important;
}
.ft_newsletter input[type="email"]:focus {
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
.ft_newsletter input[type="submit"],
.ft_newsletter .btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 26px !important;
  border: 0 !important;
  border-radius: var(--fm-r-pill) !important;
  background: var(--fm-accent, #e2017b) !important;
  color: #fff !important;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--fm-dur) var(--fm-ease), transform var(--fm-dur) var(--fm-ease);
}
.ft_newsletter input[type="submit"]:hover,
.ft_newsletter .btn:hover { background: #c00169 !important; transform: translateY(-1px); }

/* Le message de confirmation ou d'erreur sort de la pilule */
.ft_newsletter form .alert { flex: 1 1 100%; margin: 8px 0 0; border-radius: var(--fm-r-sm); }

.fm-nl__sub {
  font-size: 13.5px; color: var(--fm-ink-2, #57534e);
  margin: -8px 0 22px !important; text-align: center;
}

/* ==========================================================================
   5. Catalogue
   ========================================================================== */

/* -- 5.1 Bandeau de titre de catégorie ------------------------------------ */
.breadcrumb_container {
  border-bottom: 0 !important;
  padding: 32px 0 24px !important;
}

/* -- 5.1 bis Bannière de catégorie ----------------------------------------
   Certaines catégories ont un visuel de couverture chargé au back-office. Il
   n'y en a aucun dans la base locale, mais la production en a : ils sortaient
   à angles vifs, seul élément carré d'une page devenue arrondie. */
.block-category .category-cover,
.category_img .category-cover {
  border-radius: var(--fm-r-lg);
  overflow: hidden;
  box-shadow: var(--fm-sh-1);
  margin-bottom: 26px;
  line-height: 0;
}
.block-category .category-cover img,
.category_img .category-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}
@media (max-width: 767px) {
  .block-category .category-cover { border-radius: var(--fm-r-md); margin-bottom: 18px; }
}

/* -- 5.2 Tuiles de sous-catégories ---------------------------------------- */
.fm-subcat__link {
  border: 1px solid rgba(41,35,30,.06) !important;
  border-radius: var(--fm-r-md) !important;
  padding: 14px 16px !important;
  box-shadow: var(--fm-sh-1);
  transition: transform var(--fm-dur) var(--fm-ease),
              box-shadow var(--fm-dur) var(--fm-ease),
              border-color var(--fm-dur) var(--fm-ease) !important;
}
.fm-subcat__link:hover, .fm-subcat__link:focus {
  transform: translateY(-3px) !important;
  box-shadow: var(--fm-sh-2);
}
.fm-subcat__media { border-radius: var(--fm-r-sm) !important; }
.fm-subcats__title { border-bottom: 0 !important; padding-bottom: 4px !important; }

/* -- 5.3 Colonne de gauche ------------------------------------------------ */
#left-column .block-categories {
  border: 1px solid rgba(41,35,30,.06) !important;
  border-radius: var(--fm-r-lg) !important;
  padding: 24px 22px !important;
  box-shadow: var(--fm-sh-1);
}
#left-column .category-sub-menu a,
#left-column .category-top-menu a {
  border-radius: var(--fm-r-xs);
  transition: color .18s var(--fm-ease), background .18s var(--fm-ease);
}

.fm-aside {
  border-radius: var(--fm-r-lg) !important;
  padding: 26px 24px !important;
  box-shadow: var(--fm-sh-2);
}

/* -- 5.4 Cartes produit ---------------------------------------------------
   Bordure d'un pixel et rayon de 2px : la carte était un cadre. On la pose sur
   la page — pas de bordure, une ombre qui se lève au survol. */
#js-product-list .product_content.grid { gap: 26px !important; }

#js-product-list .product_content.grid > .item-product > .product-miniature,
#js-product-list .product_content.grid > .item-product > article {
  border: 0 !important;
  border-radius: var(--fm-r-md) !important;
  box-shadow: var(--fm-sh-1) !important;
  transition: transform var(--fm-dur) var(--fm-ease),
              box-shadow var(--fm-dur) var(--fm-ease) !important;
}
#js-product-list .product_content.grid > .item-product > article:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--fm-sh-3) !important;
}

/* Le visuel garde un fond crème très clair : les packshots du catalogue sont
   détourés sur blanc, un fond blanc les faisait flotter sans limite. */
#js-product-list .product-miniature .img_block {
  border-bottom: 0 !important;
  background: #fbf8f4 !important;
  border-radius: var(--fm-r-md) var(--fm-r-md) 0 0;
  overflow: hidden;
}
#js-product-list .product-miniature .img_block .product-thumbnail img {
  transition: transform .55s var(--fm-ease);
}
#js-product-list .product_content.grid > .item-product > article:hover .product-thumbnail img {
  transform: scale(1.04);
}

.fm-proprice { border-top-style: solid !important; border-top-color: rgba(41,35,30,.07) !important; }
.fm-proprice__link {
  display: inline-flex; align-items: center; gap: 5px;
  transition: gap .18s var(--fm-ease);
}
.fm-proprice__link:hover { gap: 9px; text-decoration: none !important; }

/* Étiquettes promo / nouveauté posées sur le visuel */
#js-product-list .product-flags li,
.product-flags .product-flag {
  border-radius: var(--fm-r-pill) !important;
  padding: 5px 12px !important;
  font-size: 10.5px !important;
  letter-spacing: .04em;
  box-shadow: var(--fm-sh-1);
}

/* -- 5.5 Pagination -------------------------------------------------------- */
#js-product-list .pagination { border-top: 0 !important; }
#js-product-list .pagination a,
#js-product-list .pagination .current a,
.pagination .page-list li a {
  border-radius: var(--fm-r-pill) !important;
  min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s var(--fm-ease), color .18s var(--fm-ease);
}

/* -- 5.6 Fiche produit -----------------------------------------------------
   La page la plus datée du site : titre en corps de texte, fiche technique en
   tableau gris à angles vifs juste sous le titre, miniature active cerclée de
   rose vif, message « réservé aux professionnels » en alerte Bootstrap bleue.
   ------------------------------------------------------------------------- */

/* Titre : il sortait à 24px, plus petit que certains libellés de la page. */
body.page-product .content_info h1.namne_details,
body.page-product h1.namne_details {
  font-family: var(--fm-serif, Georgia, serif) !important;
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  letter-spacing: -.015em !important;
  color: var(--fm-ink, #292929) !important;
  margin: 0 0 22px !important;
}

/* Visuel principal et miniatures */
body.page-product .product-cover,
body.page-product .easyzoom,
body.page-product .images-container .product-cover img {
  border-radius: var(--fm-r-lg) !important;
  overflow: hidden;
}
body.page-product .product-cover {
  background: #fbf8f4;
  box-shadow: var(--fm-sh-1);
}
body.page-product .thumb-container,
body.page-product .thumb-container img,
body.page-product .product-images .thumb {
  border-radius: var(--fm-r-sm) !important;
}
/* La miniature active portait un cadre rose de 2px, à angles vifs. */
body.page-product .product-images .thumb.selected,
body.page-product .product-images li.selected img,
body.page-product .product-images .thumb-container.selected img,
body.page-product .js-thumb.selected {
  border: 1px solid rgba(226,1,123,.55) !important;
  box-shadow: 0 0 0 2px rgba(226,1,123,.10) !important;
  outline: 0 !important;
}
body.page-product .product-images .thumb-container { padding: 3px; }

/* Fiche technique : le thème alterne deux colonnes de fond gris, sans rayon.
   On la reprend en liste : libellé à gauche, valeur à droite, filet fin. */
body.page-product .product-features > dl.data-sheet {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 !important;
  margin: 0 0 26px !important;
  padding: 4px 20px !important;
  background: var(--fm-ivory, #fdfaf6) !important;
  border: 1px solid rgba(41,35,30,.06);
  border-radius: var(--fm-r-md);
}
body.page-product .product-features > dl.data-sheet dt.name,
body.page-product .product-features > dl.data-sheet dd.value {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(41,35,30,.07) !important;
  margin: 0 !important;
  padding: 13px 0 !important;
  font-size: 13.5px !important;
  line-height: 1.4;
  min-height: 0 !important;
}
body.page-product .product-features > dl.data-sheet dt.name {
  color: var(--fm-muted, #8b8b8b) !important;
  font-weight: 400 !important;
}
body.page-product .product-features > dl.data-sheet dd.value {
  color: var(--fm-ink, #292929) !important;
  font-weight: 600 !important;
  text-align: right;
}
/* Les deux dernières cellules ferment la liste sans filet */
body.page-product .product-features > dl.data-sheet dt.name:nth-last-of-type(1),
body.page-product .product-features > dl.data-sheet dd.value:nth-last-of-type(1) {
  border-bottom: 0 !important;
}

/* Sélecteur de déclinaison */
body.page-product .product-variants .form-control,
body.page-product .product-variants select {
  border-radius: var(--fm-r-sm) !important;
  height: 46px;
}
body.page-product .product-variants .control-label {
  font-size: 12px; letter-spacing: .06em; color: var(--fm-muted, #8b8b8b);
}

/* Message « réservé aux professionnels » : c'est l'information qui décide de la
   suite du parcours sur ce site B2B. En alerte Bootstrap bleue, elle passait
   pour une notification technique. On la repasse aux couleurs de la maison. */
body.page-product .alert-info,
body.page-product .product-actions .alert-info {
  background: var(--fm-ivory-2, #f6f1e9) !important;
  border: 1px solid var(--fm-gold-soft, #e3d5bd) !important;
  border-left: 3px solid var(--fm-gold, #b08d57) !important;
  border-radius: var(--fm-r-md) !important;
  color: var(--fm-ink, #292929) !important;
  padding: 16px 20px !important;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: none !important;
}

body.page-product .product-actions .btn,
body.page-product .add-to-cart,
body.page-product #add-to-cart-or-refresh .btn {
  border-radius: var(--fm-r-pill) !important;
}

/* Boutons de partage : trois disques gris posés sans lien avec le reste. */
body.page-product .social-sharing li,
body.page-product .social-sharing a {
  border-radius: var(--fm-r-pill) !important;
  transition: transform var(--fm-dur) var(--fm-ease), background var(--fm-dur) var(--fm-ease);
}
body.page-product .social-sharing li:hover { transform: translateY(-2px); }

/* Onglets : le thème les rend même quand ils n'ont pas de contenu, ce qui
   laissait une centaine de pixels de filets vides au milieu de la page. */
body.page-product .tabs { border-radius: var(--fm-r-lg); box-shadow: none; }
body.page-product .tabs .nav-tabs { border-bottom: 1px solid rgba(41,35,30,.08) !important; }
body.page-product .tabs .nav-tabs .nav-link {
  border: 0 !important;
  border-radius: var(--fm-r-pill) !important;
  padding: 10px 20px !important;
  transition: background .18s var(--fm-ease), color .18s var(--fm-ease);
}
body.page-product .tabs .nav-tabs .nav-link.active { background: var(--fm-ivory-2, #f6f1e9) !important; }

/* Carrousel « autres produits » : les cartes de la page catégorie sont posées
   sur un fond blanc avec ombre ; ici les mêmes miniatures flottaient nues. */
body.page-product .owl-item .product-miniature,
body.page-product .slick-slide .product-miniature,
body.page-product .products .product-miniature {
  background: #fff;
  border-radius: var(--fm-r-md);
  box-shadow: var(--fm-sh-1);
  overflow: hidden;
  transition: transform var(--fm-dur) var(--fm-ease), box-shadow var(--fm-dur) var(--fm-ease);
}
body.page-product .owl-item .product-miniature:hover,
body.page-product .slick-slide .product-miniature:hover {
  transform: translateY(-4px);
  box-shadow: var(--fm-sh-3);
}
body.page-product .owl-item .product-miniature .img_block,
body.page-product .slick-slide .product-miniature .img_block {
  background: #fbf8f4;
  border-radius: var(--fm-r-md) var(--fm-r-md) 0 0;
}
body.page-product .owl-item .product-miniature .product_desc,
body.page-product .slick-slide .product-miniature .product_desc {
  padding: 14px 15px 16px !important;
}
/* Les flèches du carrousel */
body.page-product .owl-nav button,
body.page-product .owl-prev, body.page-product .owl-next,
body.page-product .slick-arrow {
  border-radius: var(--fm-r-pill) !important;
  box-shadow: var(--fm-sh-1);
}

@media (max-width: 767px) {
  body.page-product .product-features > dl.data-sheet {
    grid-template-columns: 1fr;
    padding: 4px 16px !important;
  }
  body.page-product .product-features > dl.data-sheet dt.name {
    padding: 12px 0 2px !important;
    border-bottom: 0 !important;
    font-size: 12px !important;
  }
  body.page-product .product-features > dl.data-sheet dd.value {
    text-align: left;
    padding: 0 0 12px !important;
  }
  body.page-product .product-cover { border-radius: var(--fm-r-md) !important; }
}

/* ==========================================================================
   5 bis. Page « Nous contacter »
   --------------------------------------------------------------------------
   Structure posée par templates/contact.tpl.
   ========================================================================== */

.page-contact { padding-bottom: 72px; }

/* PrestaShop garde le gabarit « colonne de gauche » sur cette page : même avec
   le bloc left_column vidé, le conteneur de contenu reste en col-md-9 et la
   page n'occupe que les trois quarts de la largeur. On lui rend la totalité. */
body.page-contact #content-wrapper,
body.page-contact .left-column,
body.page-contact #wrapper > .container > .row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Retirer le padding des colonnes sans neutraliser les marges négatives que
   Bootstrap pose sur .row laisse dépasser 15px de chaque côté : sur mobile, la
   page gagnait un défilement horizontal. */
body.page-contact #wrapper > .container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.page-contact #left-column,
body.page-contact #right-column { display: none !important; }
/* Le thème remonte le contenu de 80px pour qu'il chevauche un bandeau de titre
   qui n'existe pas sur cette page. */
body.page-contact #wrapper > .container { margin-top: 0 !important; max-width: 100% !important; padding: 0 !important; }

/* -- Bandeau --------------------------------------------------------------- */
/* Le bandeau reste dans la largeur du conteneur et s'arrondit sur ses quatre
   coins : une carte posée sur la page, comme le diaporama de l'accueil. Le
   sortir en pleine largeur demanderait un calc() en 100vw, qui ajoute la
   largeur de la barre de défilement et provoque un défilement horizontal. */
.fm-chero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 340px;
  margin: 18px 0 -78px;
  overflow: hidden;
  border-radius: var(--fm-r-xl);
}
.fm-chero__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}
.fm-chero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(22,18,15,.86) 0%, rgba(22,18,15,.62) 42%, rgba(22,18,15,.30) 100%);
}
.fm-chero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-top: 56px; padding-bottom: 96px;
}
.fm-chero__title {
  font-family: var(--fm-serif, Georgia, serif);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -.015em;
  color: #fff; margin: 0 0 12px;
}
.fm-chero__lead {
  color: rgba(255,255,255,.84);
  font-size: 15.5px; max-width: 54ch; margin: 0;
}

/* -- Deux colonnes --------------------------------------------------------- */
.fm-contact { position: relative; z-index: 3; }
.fm-contact__grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.fm-contact__card {
  background: #fff;
  border-radius: var(--fm-r-lg);
  padding: 30px 28px;
  box-shadow: var(--fm-sh-2);
}
.fm-contact__side { display: flex; flex-direction: column; gap: 16px; }

.fm-contact__h {
  font-family: var(--fm-serif, Georgia, serif);
  font-size: 1.18rem !important; font-weight: 600;
  color: var(--fm-ink, #292929); margin: 0 0 18px !important;
  letter-spacing: -.005em;
}
.fm-contact__h--light { color: #fff; }

/* Le widget ps_contactinfo rend son propre titre « Informations » : le nôtre
   le remplace, sinon la carte en affiche deux. */
.fm-contact__card--info #block_contact_infos > h4,
.fm-contact__card--info .block-contact-title,
.fm-contact__card--info h4 { display: none !important; }

.fm-contact__card--info ul { list-style: none; margin: 0; padding: 0; }
.fm-contact__card--info li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(41,35,30,.07);
  font-size: 13.5px; line-height: 1.5;
  color: var(--fm-ink-2, #57534e);
}
.fm-contact__card--info li:last-child { border-bottom: 0; padding-bottom: 0; }
.fm-contact__card--info li:first-child { padding-top: 0; }
.fm-contact__card--info li a { color: var(--fm-ink-2, #57534e); text-decoration: none; }
.fm-contact__card--info li a:hover { color: var(--fm-accent, #e2017b); }

/* Les pictogrammes du widget sont des <i> de police d'icônes, alignés en bloc
   par le thème : on leur donne une pastille pour les poser dans la ligne. */
.fm-contact__card--info li i,
.fm-contact__card--info li .material-icons {
  flex: 0 0 34px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fm-ivory-2, #f6f1e9);
  border-radius: var(--fm-r-pill);
  color: var(--fm-gold, #b08d57);
  font-size: 17px !important;
  margin: 0 !important;
}

.fm-contact__card--rdv {
  background: #211d1a;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.fm-contact__rdvtext {
  color: rgba(255,255,255,.74); font-size: 13.5px; line-height: 1.55; margin: 0;
}

/* -- Formulaire ------------------------------------------------------------ *
   Le module rend chaque ligne en grille Bootstrap : label sur 3 colonnes,
   champ sur 6, et 3 colonnes vides à droite. Sur une carte de 700px, le champ
   tombait à 350px. On passe le label au-dessus et le champ sur toute la
   largeur — la disposition attendue d'un formulaire aujourd'hui. */
.fm-contact__main .form-group.row {
  display: block !important;
  margin-left: 0 !important; margin-right: 0 !important;
  margin-bottom: 20px !important;
}
.fm-contact__main .form-group.row > [class*="col-md"] {
  width: 100% !important; max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.fm-contact__main .form-control-label {
  display: block !important;
  text-align: left !important;
  padding: 0 0 7px !important;
}
.fm-contact__main .form-control,
.fm-contact__main input[type="text"],
.fm-contact__main input[type="email"],
.fm-contact__main select,
.fm-contact__main textarea { width: 100% !important; }

/* Champ pièce jointe : le thème charge bootstrap-filestyle, qui masque l'input
   réel (clip: rect(0,0,0,0)) et rend à la place un champ texte grisé suivi d'un
   bouton. Les deux flottaient l'un à côté de l'autre sans former un ensemble. */
.fm-contact__main .bootstrap-filestyle {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 6px 6px 8px;
  background: #fbf8f4;
  border: 1px dashed #ddd5cb;
  border-radius: var(--fm-r-sm);
}
.fm-contact__main .bootstrap-filestyle input[type="text"] {
  flex: 1 1 auto; min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 36px !important;
  padding: 0 8px !important;
  font-size: 13px;
}
/* L'intermédiaire que pose le plugin : un .input-group-btn Bootstrap, que le
   thème sort du flux. Sans lui rendre sa place, le bouton se posait à côté du
   champ au lieu d'être dedans. */
.fm-contact__main .bootstrap-filestyle .group-span-filestyle,
.fm-contact__main .bootstrap-filestyle .input-group-btn {
  position: static !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
  top: auto !important; right: auto !important; bottom: auto !important;
}
.fm-contact__main .bootstrap-filestyle .icon-span-filestyle { display: none; }
.fm-contact__main .bootstrap-filestyle label,
.fm-contact__main .bootstrap-filestyle .btn {
  flex: 0 0 auto;
  margin: 0 !important;
  height: 36px;
  padding: 0 18px !important;
  display: inline-flex; align-items: center;
  border-radius: var(--fm-r-pill) !important;
  font-size: 11.5px; letter-spacing: .03em;
  cursor: pointer;
}
/* « optionnel » : le module l'affiche sous le champ, sans style. */
.fm-contact__main .form-group .form-control-comment {
  font-size: 12px; color: var(--fm-muted, #8b8b8b); padding-top: 6px;
}
/* Le bouton « Choisir un fichier » sortait en rose plein et « Envoyer » en noir :
   l'action secondaire attirait l'œil avant l'action principale. On inverse. */
.fm-contact__main .bootstrap-filestyle label.btn,
.fm-contact__main .bootstrap-filestyle .btn {
  background: #fff !important;
  color: var(--fm-ink, #292929) !important;
  border: 1px solid #e6e0d8 !important;
  box-shadow: var(--fm-sh-1);
  font-weight: 600;
}
.fm-contact__main .bootstrap-filestyle label.btn:hover {
  border-color: var(--fm-accent, #e2017b) !important;
  color: var(--fm-accent, #e2017b) !important;
}

.fm-contact__main .form-footer { display: flex; justify-content: flex-end; margin-top: 4px; }
.fm-contact__main .form-footer .btn,
.fm-contact__main input[type="submit"] {
  background: var(--fm-accent, #e2017b) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 13px 34px !important;
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
}
.fm-contact__main .form-footer .btn:hover { background: #c00169 !important; }

.fm-contact__main .page-content,
.fm-contact__main #content { padding: 0 !important; box-shadow: none !important; }
.fm-contact__main .form-control-label {
  font-size: 13px; font-weight: 600; color: var(--fm-ink, #292929);
}
.fm-contact__main textarea { min-height: 160px; }

/* Le bouton « Choisir un fichier » du champ pièce jointe */
.fm-contact__main .custom-file, .fm-contact__main .form-control-file {
  border-radius: var(--fm-r-sm) !important;
}

@media (max-width: 991px) {
  .fm-contact__grid { grid-template-columns: 1fr; }
  .fm-chero { min-height: 260px; margin-bottom: -60px; border-radius: 0 0 var(--fm-r-lg) var(--fm-r-lg); }
  .fm-chero__inner { padding-top: 40px; padding-bottom: 78px; }
}
@media (max-width: 767px) {
  .fm-chero { min-height: 220px; }
  .fm-contact__card { padding: 24px 20px; border-radius: var(--fm-r-md); }
  .fm-contact__card--rdv .fm-btn { width: 100%; }
  .page-contact { padding-bottom: 48px; }
}

/* ==========================================================================
   6. Formulaires et boutons
   ========================================================================== */

.btn, button.btn, input[type="submit"], .btn-primary, .btn-secondary, .btn-outline {
  border-radius: var(--fm-r-pill) !important;
  transition: background var(--fm-dur) var(--fm-ease),
              color var(--fm-dur) var(--fm-ease),
              transform var(--fm-dur) var(--fm-ease),
              box-shadow var(--fm-dur) var(--fm-ease) !important;
}
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--fm-sh-2); }

.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="search"], select, textarea, .custom-select {
  border-radius: var(--fm-r-sm) !important;
  border: 1px solid #e6e0d8 !important;
  transition: border-color .18s var(--fm-ease), box-shadow .18s var(--fm-ease) !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--fm-accent, #e2017b) !important;
  box-shadow: 0 0 0 3px rgba(226,1,123,.10) !important;
  outline: 0 !important;
}
textarea, textarea.form-control { border-radius: var(--fm-r-md) !important; }

/* Cases à cocher et boutons radio du thème : des carrés gris */
.custom-checkbox input[type="checkbox"] + span { border-radius: 5px !important; }
.custom-radio { border-radius: var(--fm-r-pill) !important; }

/* ==========================================================================
   6 bis. Pages de compte : connexion, inscription, adresses
   --------------------------------------------------------------------------
   Sur ce site les prix sont masqués tant que le visiteur n'a pas de compte
   professionnel : l'inscription est l'étape qui décide de tout le reste. Elle
   était rendue par _partials/form-fields.tpl en grille Bootstrap — libellé sur
   3 colonnes, champ sur 6 — sans cadre, sur fond blanc.
   ========================================================================== */

body.page-authentication #content-wrapper,
body.page-registration #content-wrapper,
body.page-password #content-wrapper,
body.page-address #content-wrapper { padding-top: 8px; }

/* Le formulaire prend place dans une carte, comme sur la page contact. */
body.page-authentication #content.page-content,
body.page-registration #content.page-content,
body.page-password #content.page-content,
body.page-address #content.page-content,
body.page-authentication .login-form,
body.page-registration .register-form {
  background: #fff;
  border-radius: var(--fm-r-lg);
  padding: 34px 36px;
  box-shadow: var(--fm-sh-2);
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}

/* Libellé au-dessus du champ */
body.page-authentication .form-group.row,
body.page-registration .form-group.row,
body.page-password .form-group.row,
body.page-address .form-group.row {
  display: block !important;
  margin-left: 0 !important; margin-right: 0 !important;
  margin-bottom: 20px !important;
}
body.page-authentication .form-group.row > [class*="col-md"],
body.page-registration .form-group.row > [class*="col-md"],
body.page-password .form-group.row > [class*="col-md"],
body.page-address .form-group.row > [class*="col-md"] {
  width: 100% !important; max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
body.page-authentication .form-control-label,
body.page-registration .form-control-label,
body.page-password .form-control-label,
body.page-address .form-control-label {
  display: block !important;
  text-align: left !important;
  padding: 0 0 7px !important;
  font-size: 13px; font-weight: 600;
  color: var(--fm-ink, #292929);
}
/* Les champs requis : le thème n'affiche aucun repère. */
body.page-registration .form-control-label.required::after,
body.page-address .form-control-label.required::after {
  content: " *";
  color: var(--fm-accent, #e2017b);
}
/* Le message d'aide sous le champ (« Seules les lettres… ») était en col-md-3
   à droite, donc rejeté sous le champ sans style. */
body.page-registration .form-control-comment,
body.page-address .form-control-comment,
body.page-authentication .form-control-comment {
  display: block;
  padding: 6px 2px 0 !important;
  font-size: 12px;
  color: var(--fm-muted, #8b8b8b);
}

/* Civilité : les ronds et leurs libellés étaient séparés par un blanc de 20px,
   au point qu'on lisait le libellé comme appartenant au rond suivant. */
body.page-registration .form-control-valign,
body.page-address .form-control-valign {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 2px;
}
body.page-registration .form-control-valign label,
body.page-address .form-control-valign label {
  display: inline-flex !important; align-items: center; gap: 8px;
  margin: 0 !important;
  padding: 9px 16px 9px 12px;
  border: 1px solid #e6e0d8;
  border-radius: var(--fm-r-pill);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s var(--fm-ease), background .18s var(--fm-ease);
}
body.page-registration .form-control-valign label:hover { border-color: var(--fm-gold-soft, #e3d5bd); }

/* Cases à cocher : de gros carrés noirs de 20px, alignés sur la ligne de base. */
body.page-registration .custom-checkbox,
body.page-address .custom-checkbox,
body.page-authentication .custom-checkbox,
.form-group .custom-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fm-ink-2, #57534e);
}
.form-group .custom-checkbox input[type="checkbox"] + span {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  margin: 1px 0 0 !important;
  border: 1px solid #ccc4b8 !important;
  border-radius: 5px !important;
}
.form-group .custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--fm-accent, #e2017b) !important;
  border-color: var(--fm-accent, #e2017b) !important;
}

/* Bouton « Montrer » du mot de passe : un bloc gris foncé collé au champ. */
body .input-group .input-group-btn .btn,
body [data-action="show-password"] {
  background: transparent !important;
  color: var(--fm-muted, #8b8b8b) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 0 16px !important;
}
body [data-action="show-password"]:hover { color: var(--fm-accent, #e2017b) !important; }

/* Le champ mot de passe et son bouton « Montrer » : le thème pose le bouton
   dans un .input-group-btn qui sortait à droite du champ au lieu d'être dedans.
   On accroche sur .js-parent-focus, la classe que PrestaShop met sur ce groupe. */
body .input-group.js-parent-focus {
  display: flex !important;
  align-items: center;
  width: 100%;
  border: 1px solid #e6e0d8;
  border-radius: var(--fm-r-sm);
  background: #fff;
  overflow: hidden;
}
body .input-group.js-parent-focus:focus-within {
  border-color: var(--fm-accent, #e2017b);
  box-shadow: 0 0 0 3px rgba(226,1,123,.10);
}
body .input-group.js-parent-focus .form-control {
  flex: 1 1 auto; min-width: 0;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body .input-group.js-parent-focus .form-control:focus {
  border: 0 !important; box-shadow: none !important;
}
body .input-group.js-parent-focus .input-group-btn {
  flex: 0 0 auto;
  position: static !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
}

/* Le repère de champ requis rendu seul dans sa cellule, sans libellé : sur la
   page d'inscription il produisait un astérisque rose flottant au milieu du
   formulaire, au-dessus de la case RGPD. */
.form-group .form-control-comment:empty { display: none !important; }

/* Le pied du formulaire */
body.page-authentication .form-footer,
body.page-registration .form-footer,
body.page-address .form-footer {
  display: flex; justify-content: flex-end;
  margin-top: 8px; padding-top: 20px;
  border-top: 1px solid rgba(41,35,30,.07);
}
body.page-authentication .form-footer .btn,
body.page-registration .form-footer .btn,
body.page-address .form-footer .btn {
  background: var(--fm-accent, #e2017b) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 14px 38px !important;
  font-size: 13px; font-weight: 600;
}
body.page-authentication .form-footer .btn:hover,
body.page-registration .form-footer .btn:hover { background: #c00169 !important; }

/* Le lien « Vous avez déjà un compte ? » */
body.page-registration .no-account,
body.page-authentication .no-account,
body.page-registration #content .no-account {
  display: block;
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(41,35,30,.07);
  font-size: 13.5px;
}

@media (max-width: 767px) {
  body.page-authentication #content.page-content,
  body.page-registration #content.page-content,
  body.page-password #content.page-content,
  body.page-address #content.page-content {
    padding: 24px 20px;
    border-radius: var(--fm-r-md);
  }
  body.page-registration .form-footer .btn,
  body.page-authentication .form-footer .btn { width: 100%; }
  body.page-registration .form-footer,
  body.page-authentication .form-footer { justify-content: stretch; }
}

/* ==========================================================================
   7. Pied de page
   ========================================================================== */

#footer .footer-container {
  border-radius: var(--fm-r-xl) var(--fm-r-xl) 0 0;
  margin-top: 8px;
}
#footer .footer_block h3 { letter-spacing: .01em; }
#footer .footer_list > li a,
#footer .footer_block .footer_list > ul > li a {
  border-radius: var(--fm-r-xs);
  transition: color .18s var(--fm-ease), padding-left .18s var(--fm-ease);
}
#footer .footer_list > li a:hover { padding-left: 4px; color: var(--fm-accent, #e2017b) !important; }

/* Icônes sociales : des carrés dans le thème */
#footer .social-sharing li, .social-sharing li,
#footer .block-social li {
  border-radius: var(--fm-r-pill) !important;
  transition: transform var(--fm-dur) var(--fm-ease), background var(--fm-dur) var(--fm-ease);
}
#footer .social-sharing li:hover { transform: translateY(-2px); }

/* ==========================================================================
   8. Mobile
   --------------------------------------------------------------------------
   Les rayons se resserrent : un rayon de 36px sur une carte de 320px de large
   mange le contenu. On descend d'un barreau à chaque palier.
   ========================================================================== */

@media (max-width: 991px) {
  .fm-story__inner { grid-template-columns: 1fr; gap: 32px; }
  .fm-story { padding: 56px 0 !important; }
  .fm-story__media { aspect-ratio: 16 / 10; }
  .fm-pro > .fm-wrap { padding: 44px 32px !important; border-radius: var(--fm-r-lg); }
  .page-home .pos_bannerslide,
  .page-home .pos-slideshow,
  .page-home .slideshow_container { padding: 0 16px; margin-top: 18px !important; }
  .page-home .pos_bannerslide .nivoSlider,
  .page-home .pos-slideshow .nivoSlider,
  .page-home .slideshow_container .nivoSlider { border-radius: var(--fm-r-lg) !important; }
  .fm-tile__link { min-height: 250px !important; }
}

@media (max-width: 767px) {
  .fm-reassure { padding: 28px 0 0; }
  .fm-reassure__grid { gap: 10px !important; }
  .fm-reassure__item { padding: 20px 14px !important; border-radius: var(--fm-r-md); }
  .fm-reassure__item .fm-ico { width: 38px; height: 38px; padding: 8px; }

  .fm-tiles { gap: 14px !important; }
  .fm-tile__link { min-height: 210px !important; padding: 22px !important; border-radius: var(--fm-r-md) !important; }
  .fm-tile__name { font-size: 1.24rem !important; }

  .fm-pro { padding: 8px 0 44px !important; }
  .fm-pro > .fm-wrap { padding: 34px 24px !important; border-radius: var(--fm-r-md); }

  .fm-story { padding: 44px 0 !important; }
  .fm-story__media { border-radius: var(--fm-r-md); }
  .fm-story__badge { width: 84px; height: 84px; right: 14px; bottom: 14px; }
  .fm-story__badge b { font-size: 1.3rem; }
  .fm-story__facts { grid-template-columns: 1fr; gap: 8px; }
  .fm-story__facts li { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; }
  .fm-story__facts b { font-size: 1.15rem; }
  .fm-story__facts span { margin-top: 0; }

  .ft_newsletter { border-radius: var(--fm-r-md); margin-bottom: 40px !important; padding: 36px 18px !important; }
  /* Le champ et le bouton côte à côte descendent sous 360px : on empile. */
  .ft_newsletter .input-wrapper,
  .ft_newsletter .newsletter-input-group,
  .ft_newsletter form > div { flex-wrap: wrap; border-radius: var(--fm-r-md); padding: 8px; }
  .ft_newsletter input[type="email"] { flex: 1 1 100%; }
  .ft_newsletter input[type="submit"], .ft_newsletter .btn { flex: 1 1 100%; }

  #footer .footer-container { border-radius: var(--fm-r-lg) var(--fm-r-lg) 0 0; }

  #js-product-list .product_content.grid { gap: 12px !important; }
  #js-product-list .product_content.grid > .item-product > .product-miniature,
  #js-product-list .product_content.grid > .item-product > article { border-radius: var(--fm-r-sm) !important; }
  #js-product-list .product-miniature .img_block { border-radius: var(--fm-r-sm) var(--fm-r-sm) 0 0; }
}

/* ==========================================================================
   8 bis. Menu mobile
   --------------------------------------------------------------------------
   Le panneau du thème : un bandeau noir « menu » à angles vifs, puis une liste
   de catégories séparées par des filets gris pleine largeur. On le reprend en
   panneau flottant, et on lui ajoute en pied les actions de compte (rendues
   par _partials/header.tpl).
   ========================================================================== */

#mobile_top_menu_wrapper {
  width: min(340px, 88vw) !important;
  border-radius: 0 var(--fm-r-xl) var(--fm-r-xl) 0;
  box-shadow: var(--fm-sh-3);
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex !important;
  flex-direction: column;
}
#mobile_top_menu_wrapper[style*="display:none"],
#mobile_top_menu_wrapper[style*="display: none"] { display: none !important; }

/* Le liseré décoratif que le thème pose au-dessus du panneau */
#mobile_top_menu_wrapper .top-header-mobile { display: none !important; }

/* En-tête : bandeau noir pleine largeur, texte en minuscules. */
#mobile_top_menu_wrapper .menu-close {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  background: #fff !important;
  color: var(--fm-ink, #292929) !important;
  border-bottom: 1px solid rgba(41,35,30,.08);
  padding: 20px 22px !important;
  font-family: var(--fm-serif, Georgia, serif);
  font-size: 1.1rem !important;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0;
  cursor: pointer;
}
#mobile_top_menu_wrapper .menu-close i {
  float: none !important;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fm-ivory-2, #f6f1e9);
  border-radius: var(--fm-r-pill);
  font-size: 19px !important;
  color: var(--fm-ink, #292929);
}

#mobile_top_menu_wrapper .menu-tabs {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 10px 12px 18px;
}
#mobile_top_menu_wrapper .js-top-menu-bottom { flex: 1 1 auto; }

/* Entrées : les filets pleine largeur deviennent des lignes espacées.
   Le thème pose une marge verticale sur chaque <li> pour compenser l'absence
   de padding sur les liens ; avec le padding rendu aux liens, elle creusait un
   blanc de 40px entre deux catégories. */
#mobile_top_menu_wrapper .top-menu li {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* ps_mainmenu place le chevron d'accordéon DANS le lien, avant le libellé, et
   compte sur un float pour le renvoyer à droite. Le lien passé en flex annule
   le float : le chevron restait collé à gauche du texte. On le repositionne
   explicitement. */
#mobile_top_menu_wrapper .top-menu > li > a > .float-xs-right,
#mobile_top_menu_wrapper .top-menu a > .float-xs-right {
  order: 2;
  margin-left: auto;
  float: none !important;
}
#mobile_top_menu_wrapper .top-menu > li > a,
#mobile_top_menu_wrapper #_mobile_top_menu > ul > li > a {
  display: flex !important; align-items: center;
  padding: 14px 14px !important;
  border: 0 !important;
  border-radius: var(--fm-r-sm);
  font-size: 13.5px !important;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--fm-ink, #292929) !important;
  text-transform: none !important;
}
#mobile_top_menu_wrapper .top-menu > li > a:active,
#mobile_top_menu_wrapper .top-menu > li > a:hover { background: var(--fm-ivory-2, #f6f1e9) !important; }
#mobile_top_menu_wrapper .sub-menu a,
#mobile_top_menu_wrapper .top-menu ul a {
  padding: 11px 14px 11px 26px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--fm-ink-2, #57534e) !important;
  border: 0 !important;
  border-radius: var(--fm-r-xs);
}
/* Les chevrons d'accordéon */
#mobile_top_menu_wrapper .navbar-toggler,
#mobile_top_menu_wrapper .collapse-icons {
  width: 34px; height: 34px;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: var(--fm-r-pill);
  color: var(--fm-muted, #8b8b8b);
}

/* Pied : les actions de compte */
.fm-mobmenu__foot {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 18px; padding: 18px 14px 4px;
  border-top: 1px solid rgba(41,35,30,.08);
}
.fm-mobmenu__cta {
  display: flex; align-items: center; justify-content: center;
  padding: 13px 20px;
  background: var(--fm-ink, #292929);
  color: #fff !important;
  border-radius: var(--fm-r-pill);
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  text-decoration: none;
}
.fm-mobmenu__cta:active { background: var(--fm-accent, #e2017b); }
.fm-mobmenu__link {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 20px;
  border: 1px solid rgba(41,35,30,.12);
  border-radius: var(--fm-r-pill);
  font-size: 12.5px; font-weight: 600;
  color: var(--fm-ink, #292929) !important;
  text-decoration: none;
}
.fm-mobmenu__link:active { border-color: var(--fm-accent, #e2017b); color: var(--fm-accent, #e2017b) !important; }

/* ==========================================================================
   9. Accessibilité
   ========================================================================== */

/* Le thème n'affiche aucun anneau de focus : au clavier, on navigue à l'aveugle.
   :focus-visible ne se déclenche pas au clic de souris. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--fm-accent, #e2017b) !important;
  outline-offset: 3px !important;
  border-radius: var(--fm-r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .fm-tile__link:hover, .fm-btn:hover, .fm-cta:hover,
  #js-product-list .product_content.grid > .item-product > article:hover,
  .fm-reassure__item:hover, .fm-subcat__link:hover { transform: none !important; }
}