/*
Theme Name:   Astra Child — Litrimarché
Theme URI:    https://litrimarche.fr
Description:  Thème enfant d'Astra pour le site Litrimarché. Développé par Adweb Conseil.
Author:       Adweb Conseil
Author URI:   https://adweb-conseil.fr
Template:     astra
Version:      2.23.10
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
*/

/* -------------------------------------------------------------------------
 * Charte Litrimarché
 *
 * Valeurs relevées dans le kit de l'intégrateur :
 * demo-integrateur/assets/css/style.css (https://www.litrimarche.fr/demo/)
 * Les couleurs sont aussi déclarées en couleurs globales Elementor ; ces
 * variables servent aux styles écrits à la main.
 * ---------------------------------------------------------------------- */

:root {
  --lmk-blue: #0c3183; /* --c-cerulean-blue */
  --lmk-navy: #010658; /* --c-navy-blue */
  --lmk-yellow: #ffed00; /* --c-yellow */
  --lmk-red: #d00814; /* --c-red */
  --lmk-green: #80ba26; /* --c-green */
  --lmk-blue-light: #eaf0ff; /* --c-alice-blue */
  --lmk-blue-link: #1f88ff; /* --c-dodger-blue */
  --lmk-white: #fff;
  --lmk-grey-50: #fafafa; /* --c-alabaster */
  --lmk-grey-100: #f0f0f0; /* --c-concrete */
  --lmk-grey-200: #ebebeb; /* --c-gallery */
  --lmk-grey-300: #e6e6e6; /* --c-mercury */
  --lmk-grey-400: #d8d8d8; /* --c-gainsboro */
  --lmk-grey-500: #dadada; /* --c-alto */
  --lmk-grey-600: #a0a0a0; /* --c-silver-chalice */
  --lmk-grey-700: #707070; /* --c-dove-gray */
  --lmk-black: #000;

  /* Étoile de notation, utilisée en masque par le widget « Avis clients ». */
  --lmk-star: url("assets/img/picto/rating.svg");
}

/* -------------------------------------------------------------------------
 * Ruban de titre de section (.section-ribbon du kit)
 *
 * Bloc jaune en L ancré en bas à gauche du titre et posé derrière lui :
 *   ::before  20 × 55 (montant vertical)
 *   ::after  130 × 20 (base horizontale)
 * À poser en classe CSS « lm-ribbon » sur un widget Titre.
 * ---------------------------------------------------------------------- */

/*
 * Deux porteurs possibles : le titre d'un widget Elementor, ou un `<span>` dans
 * une page rendue en PHP (bas des fiches article). Une seule définition du
 * ruban, deux sélecteurs — plutôt que deux blocs qui divergeraient.
 */
.lmk-ribbon .elementor-heading-title,
.lmk-ribbon .lmk-ribbon__texte {
  position: relative;
  z-index: 1;
  display: inline-block;
  min-width: 130px;
  padding-top: 15px;
  padding-inline: 10px;
}

.lmk-ribbon .elementor-heading-title::before,
.lmk-ribbon .elementor-heading-title::after,
.lmk-ribbon .lmk-ribbon__texte::before,
.lmk-ribbon .lmk-ribbon__texte::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-color: var(--lmk-yellow);
}

.lmk-ribbon .elementor-heading-title::before,
.lmk-ribbon .lmk-ribbon__texte::before {
  width: 20px;
  height: 55px;
}

.lmk-ribbon .elementor-heading-title::after,
.lmk-ribbon .lmk-ribbon__texte::after {
  width: 130px;
  height: 20px;
}

/* -------------------------------------------------------------------------
 * Picto de tête de section (.section-icon du kit)
 *
 * Le kit pose un SVG du sprite au-dessus du titre, centré, à sa taille
 * native, suivi de 40px de blanc. Les deux conteneurs sont vides : c'est
 * d'ici qu'ils sont peints.
 *
 *   .lmk-picto      la boîte, et le ruban jaune sur ses pseudo-éléments
 *   .lmk-picto__i   le picto, en masque (couleur pilotée par la charte)
 *
 * Deux boîtes et non une : un masque clippe ses propres pseudo-éléments, le
 * picto et le ruban ne peuvent pas cohabiter sur le même élément.
 *
 * Tout est peint en `background-color`, jamais en `background-image` :
 * Elementor neutralise les images de fond de tout ce qui descend d'un
 * `.e-con.e-parent` pas encore chargé (chargement différé), et le ruban
 * disparaîtrait tant que la section n'est pas entrée dans l'écran.
 *
 * Largeur, hauteur et marges passent par les variables que le conteneur
 * Elementor lit lui-même (`--width`, `--min-height`, `--margin-*`). Les régler
 * côté Elementor produirait une règle par élément, plus spécifique, qui
 * gagnerait sur celle-ci.
 * ---------------------------------------------------------------------- */

.lmk-picto {
  --width: var(--lmk-picto-w);
  --min-height: var(--lmk-picto-h);
  --margin-left: auto;
  --margin-right: auto;
  --margin-bottom: 40px;
  position: relative;
  max-width: 100%;
  pointer-events: none;
}

.lmk-picto .lmk-picto__i {
  --width: auto;
  position: absolute;
  inset: 0;
  /*
	 * Au-dessus du ruban. À plan égal, un `::after` se peint APRÈS les enfants
	 * réels : sans ce z-index, la barre jaune horizontale passerait devant le
	 * picto. Le kit obtient le même ordre en mettant son ruban en `z-index: -1`
	 * — on le relève plutôt que de l'enfoncer, pour ne pas dépendre du plan de
	 * la section qui l'accueille.
	 */
  z-index: 1;
  background-color: var(--lmk-blue);
  -webkit-mask: var(--lmk-picto-src) no-repeat center / contain;
  mask: var(--lmk-picto-src) no-repeat center / contain;
}

/*
 * Variante ruban : la boîte s'élargit pour laisser passer le L jaune et le
 * picto se replie d'autant. Le décalage n'est PAS le même d'une section à
 * l'autre du kit — chaque picto donne donc ses trois valeurs :
 *   --lmk-picto-pl  retrait à gauche        (.section-product 10, offer 32, quiz 20)
 *   --lmk-picto-pb  retrait en bas          (10, 0, 8)
 *   --lmk-picto-rb  fond du L depuis le bas (0, 20, 0)
 * Ci-dessous les valeurs de .section-product ; les classes par picto, plus bas
 * dans le fichier, les redéfinissent au besoin.
 */
.lmk-picto--ruban {
  --lmk-picto-pl: 10px;
  --lmk-picto-pb: 10px;
  --lmk-picto-rb: 0px;
  --width: calc(var(--lmk-picto-w) + var(--lmk-picto-pl));
  --min-height: calc(var(--lmk-picto-h) + var(--lmk-picto-pb));
}

.lmk-picto--ruban .lmk-picto__i {
  inset: 0 0 var(--lmk-picto-pb) var(--lmk-picto-pl);
}

/*
 * Le L jaune, derrière le picto. Elementor pose déjà `inset: 0` sur
 * `.e-con::before` / `::after` : il faut remettre à zéro les côtés inutilisés,
 * sinon le `left: 0` hérité l'emporte et les barres se décalent.
 */
.lmk-picto--ruban::before,
.lmk-picto--ruban::after {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  bottom: var(--lmk-picto-rb);
  left: 0;
  background-color: var(--lmk-yellow);
}

.lmk-picto--ruban::before {
  width: 20px;
  height: 55px;
}

.lmk-picto--ruban::after {
  width: 130px;
  height: 20px;
}

/* Le « zzZZ » du sommeil — sprite #sleep, 200 × 84 dans le kit. */
.lmk-picto--sleep {
  --lmk-picto-w: 200px;
  --lmk-picto-h: 84px;
  --lmk-picto-src: url("assets/img/picto/sleep.svg");
}

/* Le sourire du « coup de pouce » — 118 × 118, ruban remonté de 20px. */
.lmk-picto--smiley {
  --lmk-picto-w: 118px;
  --lmk-picto-h: 118px;
  --lmk-picto-pl: 32px;
  --lmk-picto-pb: 0px;
  --lmk-picto-rb: 20px;
  --margin-bottom: 26px;
  --lmk-picto-src: url("assets/img/picto/smiley.svg");
}

/* Le lit du quiz — 150 × 112, posé dans une rangée, donc sans marge. */
.lmk-picto--bed {
  --lmk-picto-w: 150px;
  --lmk-picto-h: 112px;
  --lmk-picto-pl: 20px;
  --lmk-picto-pb: 8px;
  --lmk-picto-rb: 0px;
  --margin-left: 0;
  --margin-right: 0;
  --margin-bottom: 0px;
  --lmk-picto-src: url("assets/img/picto/bed.svg");
}

/*
 * Pictos des avantages — mêmes sprites, aux tailles exactes du kit. Le nom
 * porte la largeur : un même sprite sert à plusieurs tailles selon la section
 * (`bed` fait 150 × 112 sur le quiz et 48 × 36 ici).
 */
.lmk-picto--building-62,
.lmk-picto--vehicle-48,
.lmk-picto--badge-38,
.lmk-picto--bed-48,
.lmk-picto--card-42,
.lmk-picto--star-40 {
  /* Kit : le bloc du picto fait au moins 46px de haut, puis 16px de blanc. */
  --min-height: 46px;
  --margin-bottom: 16px;
}

.lmk-picto--building-62 {
  --lmk-picto-w: 62px;
  --lmk-picto-h: 36px;
  --lmk-picto-src: url("assets/img/picto/building.svg");
}

.lmk-picto--vehicle-48 {
  --lmk-picto-w: 48px;
  --lmk-picto-h: 36px;
  --lmk-picto-src: url("assets/img/picto/vehicle.svg");
}

.lmk-picto--badge-38 {
  --lmk-picto-w: 38px;
  --lmk-picto-h: 46px;
  --lmk-picto-src: url("assets/img/picto/badge.svg");
}

.lmk-picto--bed-48 {
  --lmk-picto-w: 48px;
  --lmk-picto-h: 36px;
  --lmk-picto-src: url("assets/img/picto/bed.svg");
}

.lmk-picto--card-42 {
  --lmk-picto-w: 42px;
  --lmk-picto-h: 40px;
  --lmk-picto-src: url("assets/img/picto/card.svg");
}

.lmk-picto--star-40 {
  --lmk-picto-w: 40px;
  --lmk-picto-h: 38px;
  --lmk-picto-src: url("assets/img/picto/star.svg");
}

/* Le magasin — sprite #building. Jaune et 32px de blanc en pied de page. */
.lmk-picto--building {
  --lmk-picto-w: 84px;
  --lmk-picto-h: 48px;
  --margin-bottom: 32px;
  --lmk-picto-src: url("assets/img/picto/building.svg");
}

.lmk-picto--building .lmk-picto__i {
  background-color: var(--lmk-yellow);
}

/*
 * Faux bouton de la carte guide : l'allure d'un bouton blanc, sans en être un.
 * La carte entière porte déjà le lien — un vrai bouton ferait un `<a>` dans un
 * `<a>`, et le navigateur démonterait la carte.
 */
.lmk-guide .lmk-guide__cta .elementor-heading-title {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 30px;
  background-color: var(--lmk-white);
}

/* -------------------------------------------------------------------------
 * Carte « offre » — .section-offer--card
 *
 * Le visuel remplit la carte sous un voile de couleur à 75 %, et les deux
 * lignes de texte sont posées dessus. Au survol : voile bleu → jaune, texte
 * blanc → bleu, image à 1.1.
 *
 * LE VOILE ET SON SURVOL SONT RÉGLÉS CÔTÉ ELEMENTOR (superposition
 * d'arrière-plan du conteneur, avec son état de survol) : ils se modifient
 * dans l'éditeur. Il ne reste ici que ce qu'Elementor n'expose pas — l'image
 * posée en fond de carte, son zoom, et la couleur du texte quand c'est le
 * PARENT qui est survolé.
 * ---------------------------------------------------------------------- */

.lmk-offre {
  --lmk-offre-texte: var(--lmk-white);
  --lmk-offre-zoom: 1;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.lmk-offre:hover {
  --lmk-offre-texte: var(--lmk-blue);
  --lmk-offre-zoom: 1.1;
}

/*
 * Ordre des couches : l'image au fond, le voile d'Elementor par-dessus, le
 * texte au-dessus de tout. La superposition d'arrière-plan est un `::before`
 * sans plan déclaré — sans ces z-index, l'image posée en absolu passerait
 * devant elle et le voile disparaîtrait.
 */
.lmk-offre .lmk-offre__img,
.lmk-offre .lmk-offre__img .elementor-widget-container,
.lmk-offre .lmk-offre__img figure {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.lmk-offre::before {
  z-index: 1;
}

.lmk-offre .lmk-offre__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scale: var(--lmk-offre-zoom);
  transition: scale 0.5s ease;
}

.lmk-offre .lmk-offre__l1,
.lmk-offre .lmk-offre__l2 {
  position: relative;
  z-index: 3;
}

.lmk-offre .lmk-offre__l1 .elementor-heading-title,
.lmk-offre .lmk-offre__l2 .elementor-heading-title {
  color: var(--lmk-offre-texte);
  transition: color 0.25s ease;
}

/* -------------------------------------------------------------------------
 * Avis de nos clients — .section-review
 *
 * Visuel large à gauche (310 de haut), carte de 382 à droite au filet gris,
 * dans laquelle les avis défilent en fondu. Les flèches débordent de part et
 * d'autre de la carte.
 * ---------------------------------------------------------------------- */

/* Le widget rend des `div` ordinaires : la mise en page se fait donc ici. */
.lmk-review {
  display: flex;
  align-items: stretch;
  gap: 48px;
}

.lmk-review .lmk-review__banner {
  position: relative;
  overflow: hidden;
  /* 382 de la carte + 48 de gouttière. */
  width: calc(100% - 430px);
  height: 310px;
  border-radius: 10px;
  background-color: var(--lmk-grey-50);
}

.lmk-review .lmk-review__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le filet du kit est un ombrage intérieur : il ne mange pas la largeur. */
.lmk-review .lmk-review__carousel {
  position: relative;
  flex: 0 0 auto;
  width: 382px;
  border-radius: 10px;
  background-color: var(--lmk-grey-50);
  box-shadow: inset 0 0 0 1px var(--lmk-grey-200);
}

.lmk-review .lmk-review__item {
  padding: 40px;
}

/* Le texte de l'avis est tronqué à six lignes, comme `.line-clamp-6`. */
.lmk-review .lmk-review__texte p {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/*
 * Flèches du carrousel en fondu — pastille JAUNE de 36 et chevron bleu, à
 * cheval sur les bords de la carte. Le chevron est un masque sur le
 * pseudo-élément : la pastille garde ainsi sa propre couleur de fond.
 */
.lmk-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--lmk-yellow);
  color: var(--lmk-blue);
  transition: color 0.25s ease;
}

.lmk-carousel__arrow:hover {
  background-color: var(--lmk-navy);
}

.lmk-carousel__arrow::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: currentColor;
}

.lmk-carousel__arrow--prev {
  left: 0;
  translate: -50% -50%;
}

.lmk-carousel__arrow--prev::before {
  -webkit-mask: url("assets/img/picto/prev.svg") no-repeat center / contain;
  mask: url("assets/img/picto/prev.svg") no-repeat center / contain;
}

.lmk-carousel__arrow--next {
  right: 0;
  translate: 50% -50%;
}

.lmk-carousel__arrow--next::before {
  -webkit-mask: url("assets/img/picto/next.svg") no-repeat center / contain;
  mask: url("assets/img/picto/next.svg") no-repeat center / contain;
}

@media (max-width: 900px) {
  .lmk-review {
    flex-wrap: wrap;
    gap: 40px;
  }

  .lmk-review .lmk-review__banner,
  .lmk-review .lmk-review__carousel {
    width: 100%;
  }

  .lmk-review .lmk-review__banner {
    height: 220px;
  }
}

/* -------------------------------------------------------------------------
 * FAQ — .section-faq
 *
 * Visuel de 382 × 334 à gauche, accordéon sur le reste, 68px entre les deux.
 * Les items du kit ne sont pas des blocs : une flèche `toggle` de 12 × 22 à
 * GAUCHE du titre, qui pivote de 90° à l'ouverture, et un filet bleu nuit sous
 * chaque question. Elementor pose son icône +/− à droite : on la masque et on
 * peint la flèche du kit sur le résumé.
 * ---------------------------------------------------------------------- */

.lmk-faq .lmk-faq__banner {
  position: relative;
  overflow: hidden;
  background-color: var(--lmk-grey-50);
}

.lmk-faq .lmk-faq__img,
.lmk-faq .lmk-faq__img .elementor-widget-container,
.lmk-faq .lmk-faq__img figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.lmk-faq .lmk-faq__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 382 du visuel + 68 de gouttière. */
.lmk-faq .lmk-faq__content {
  --width: calc(100% - 450px);
}

/* L'icône +/− d'Elementor n'existe pas dans le kit. */
.lmk-faq .e-n-accordion-item-title-icon {
  display: none;
}

.lmk-faq .e-n-accordion-item {
  border-bottom: 1px solid var(--lmk-navy);
}

.lmk-faq .e-n-accordion-item-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 20px;
  padding-inline: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--lmk-navy);
  transition:
    gap 0.25s ease,
    color 0.25s ease;
}

/* La flèche du kit, en masque pour qu'elle suive la couleur du texte. */
.lmk-faq .e-n-accordion-item-title::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("assets/img/picto/toggle.svg") no-repeat center / contain;
  mask: url("assets/img/picto/toggle.svg") no-repeat center / contain;
  transition:
    rotate 0.25s ease,
    translate 0.25s ease;
}

.lmk-faq .e-n-accordion-item[open] > .e-n-accordion-item-title {
  gap: 24px;
  color: var(--lmk-blue);
}

.lmk-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::before {
  rotate: 90deg;
  translate: 0 6px;
  transform-origin: 12px 11px;
}

/*
 * Le titre reste en 500 : Astra met les h3 en gras et l'emporte sur la graisse
 * réglée dans le widget.
 */
.lmk-faq .e-n-accordion-item-title-text {
  margin: 0;
  font-weight: 500;
}

/*
 * Chapô en lignes serrées (`.section-summary` du kit) : ses paragraphes se
 * suivent sans blanc, contrairement au texte courant.
 */
/*
 * Le sélecteur double la classe du widget pour passer devant le rythme du
 * texte riche (`.elementor-widget-text-editor p:not(:first-child)`, plus bas
 * dans ce fichier), qui pose les 20px entre blocs.
 */
.lmk-summary.elementor-widget-text-editor p,
.lmk-summary.elementor-widget-text-editor p:not(:first-child) {
  margin: 0;
}

/* !important : les réglages Elementor du bloc (nowrap, largeurs fixes) sont
   plus précis et gardaient photo et questions côte à côte en mobile. */
@media (max-width: 900px) {
  .lmk-faq {
    --flex-wrap: wrap !important;
    gap: 32px !important;
  }

  .lmk-faq .lmk-faq__banner,
  .lmk-faq .lmk-faq__content {
    --width: 100% !important;
  }

  /* L'image est posée en absolu dans le bandeau : sans hauteur, il
     s'écraserait une fois sur toute la largeur. */
  .lmk-faq .lmk-faq__banner {
    height: 220px !important;
    min-height: 0 !important;
  }
}

/* -------------------------------------------------------------------------
 * Un magasin est-il choisi ? — la bascule de l'accueil
 *
 * La maquette livre deux pages d'accueil ; le site n'en a qu'une, qui change
 * d'état. Deux blocs s'échangent selon la classe posée sur le <body> par
 * `inc/magasin-choisi.php` : l'invitation à trouver un magasin, et le pavé du
 * magasin choisi. Deux règles, pas deux pages.
 * ---------------------------------------------------------------------- */

body:not(.lm-magasin-choisi) .lmk-branch {
  display: none;
}

.lm-magasin-choisi .lmk-banner--conseillers {
  display: none;
}

/* -------------------------------------------------------------------------
 * Bloc « mon magasin » — .branch
 *
 * Pavé bleu borné à 1238 qui saigne à gauche jusqu'au bord de l'écran, et plan
 * qui déborde à droite. Les deux débordements sont rognés par la section
 * (`overflow: hidden`), réglé côté Elementor.
 *
 * La saignée est un `::before` plutôt qu'un conteneur, comme la bande grise
 * des sélections spéciales.
 * ---------------------------------------------------------------------- */

.lmk-branch {
  position: relative;
}

/*
 * Le pavé est un conteneur PLEINE LARGEUR borné ici, et non un conteneur
 * « boxed » : sur un boxed, Elementor peint le fond et pose les repères de
 * position sur l'élément EXTERNE, qui reste pleine largeur — le bleu couvrait
 * alors l'écran entier, et la carte, calée sur son bord droit, sortait du
 * champ. Même idiome que `.lmk-selection__body`.
 */
.lmk-branch .lmk-branch__inner {
  --width: 1238px;
  --margin-left: auto;
  --margin-right: auto;
  max-width: 100%;
  position: relative;
  /* Place réservée au plan, qui vient se poser par-dessus la droite. */
  padding-right: 480px;
}

/*
 * Sans coordonnées GPS sur la fiche, pas de plan — et alors la place qu'on lui
 * réservait ne serait qu'un grand vide à droite du texte. Le pavé la reprend.
 * Les 97 fiches n'ont aujourd'hui ni GPS ni horaires : c'est le cas courant,
 * pas l'exception, et il durera jusqu'à ce que le client fournisse ces données.
 */
.lmk-branch .lmk-branch__inner:not(:has(.lmk-branch__map)) {
  padding-right: 20px;
}

.lmk-branch .lmk-branch__inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* `left: auto` est indispensable : Elementor pose `inset: 0` sur ses
	   pseudo-éléments, et `left` l'emporterait sur `right` en LTR. */
  left: auto;
  right: 100%;
  width: 100vw;
  background-color: var(--lmk-blue);
}

/*
 * Le corps du pavé vient du widget « Mon magasin » — du HTML simple, pas des
 * conteneurs Elementor : c'est donc ici qu'il prend la forme du kit. Le pavé
 * qui l'entoure, lui, reste réglable dans l'éditeur.
 */
.lmk-branch .lmk-branch__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 88px;
  padding-bottom: 40px;
  /* Le corps s'arrête au-dessus du plan : filet blanc en pied, comme le kit. */
  border-bottom: 1px solid #fff;
  color: var(--lmk-white);
}

.lmk-branch .lmk-branch__summary {
  flex: 1 1 300px;
  font-size: 18px;
  font-weight: 500;
}

.lmk-branch .lmk-branch__aside {
  flex: 0 0 218px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Capitales sur pastille jaune — `.branch-subtitle` du kit. */
.lmk-branch .lmk-branch__name {
  display: inline-block;
  margin: 0;
  padding: 4px 8px;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--lmk-navy);
  background-color: var(--lmk-yellow);
}

.lmk-branch .lmk-branch__summary address,
.lmk-branch .lmk-branch__summary p {
  margin: 14px 0 0;
  font-style: normal;
}

.lmk-branch .lmk-branch__summary a {
  color: inherit;
}

.lmk-branch .lmk-branch__horaires {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

/* Jour et créneau sur une ligne, la colonne des jours alignée. */
.lmk-branch .lmk-branch__horaires li {
  display: flex;
  gap: 26px;
  font-weight: 400;
}

.lmk-branch .lmk-branch__horaires li span:first-child {
  flex: 0 0 88px;
}

/* Boutons du kit en pilule, pleine largeur de la colonne étroite. */
.lmk-branch .lmk-branch__btn {
  display: block;
  padding: 15px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.lmk-branch .lmk-branch__btn--i1 {
  background-color: var(--lmk-yellow);
  color: var(--lmk-blue);
}

.lmk-branch .lmk-branch__btn--i3 {
  background-color: var(--lmk-white);
  color: var(--lmk-blue);
}

.lmk-branch .lmk-branch__btn:hover,
.lmk-branch .lmk-branch__btn:focus-visible {
  background-color: var(--lmk-navy);
  color: var(--lmk-yellow);
}

/* Le plan est celui du magasin (OpenStreetMap), pas l'image de la démo. */
.lmk-branch .lmk-branch__map {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: auto;
  right: -302px;
  width: 694px;
  z-index: 1;
  overflow: hidden;
  border-radius: 10px;
}

.lmk-branch .lmk-branch__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Les boutons de la colonne étroite prennent toute sa largeur. */
.lmk-branch .lmk-branch__aside .elementor-widget-button .elementor-button {
  display: block;
  width: 100%;
}

/*
 * Sous 1200px, la carte n'a plus la place de déborder : elle repasse dans le
 * flux, sous les coordonnées. Le kit n'a aucune media query — tout le
 * responsive est à produire ici.
 */
@media (max-width: 1200px) {
  .lmk-branch .lmk-branch__inner {
    padding-right: 20px;
  }

  .lmk-branch .lmk-branch__map {
    position: static;
    width: auto;
    height: 260px;
    margin-top: 24px;
  }
}

/* -------------------------------------------------------------------------
 * Sélections spéciales — .section-selection
 *
 * Le corps est borné à 872 (et non 1238), et la section repose sur une bande
 * grise de 150px ancrée en bas, que le pavé VIP chevauche.
 * ---------------------------------------------------------------------- */

.lmk-selection {
  position: relative;
}

.lmk-selection::before {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  /*
	 * La bande file jusqu'aux bords de l'écran alors que la section est bornée
	 * à 1238 : d'où le 100vw recentré, et non un `left/right: 0` qui
	 * s'arrêterait au conteneur.
	 */
  left: 50%;
  width: 100vw;
  translate: -50% 0;
  height: 150px;
  z-index: 0;
  background-color: var(--lmk-grey-50);
}

.lmk-selection > .e-con-inner > * {
  position: relative;
  z-index: 2;
}

.lmk-selection__body {
  --width: 872px;
  --margin-left: auto;
  --margin-right: auto;
  max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Pavé VIP Club — .section-benefit
 *
 * Contenu bleu à gauche, visuel de 280 à droite avec l'accroche « jusqu'à
 * -40 % » posée en haut à droite du visuel.
 * ---------------------------------------------------------------------- */

.lmk-vip {
  overflow: hidden;
  background-color: var(--lmk-grey-50);
}

.lmk-vip .lmk-vip__content {
  --width: calc(100% - 280px);
}

.lmk-vip .lmk-vip__aside {
  position: relative;
  overflow: hidden;
  background-color: var(--lmk-grey-100);
}

.lmk-vip .lmk-vip__img,
.lmk-vip .lmk-vip__img .elementor-widget-container,
.lmk-vip .lmk-vip__img figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.lmk-vip .lmk-vip__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lmk-vip .lmk-vip__badge {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
  margin: 0;
}

/* Le « -40% » du kit : 30px non gras, sur la MÊME ligne que « jusqu'à ». */
.lmk-vip .lmk-vip__badge em {
  font-size: 30px;
  font-weight: 400;
  font-style: normal;
}

/* Les deux phrases du pavé se suivent sans blanc, comme dans le kit. */
.lmk-vip .lmk-vip__content .elementor-widget-text-editor p {
  margin: 0;
}

@media (max-width: 700px) {
  .lmk-vip {
    --flex-wrap: wrap;
  }

  .lmk-vip .lmk-vip__content,
  .lmk-vip .lmk-vip__aside {
    --width: 100%;
  }
}

/* -------------------------------------------------------------------------
 * Pavé Alma — .section-bank
 *
 * Picto composite en haut à droite : bulle #chat bleue en fond, pictogramme
 * euro blanc devant. Deux masques, comme les icônes des brèves.
 * ---------------------------------------------------------------------- */

.lmk-bank {
  position: relative;
}

.lmk-bank::before,
.lmk-bank::after {
  content: "";
  position: absolute;
  top: 40px;
  right: 40px;
  bottom: auto;
  left: auto;
  pointer-events: none;
}

.lmk-bank::before {
  width: 50px;
  height: 50px;
  background-color: var(--lmk-blue);
  -webkit-mask: url("assets/img/picto/chat.svg") no-repeat center / contain;
  mask: url("assets/img/picto/chat.svg") no-repeat center / contain;
}

.lmk-bank::after {
  width: 22px;
  height: 22px;
  margin: 14px;
  background-color: var(--lmk-white);
  -webkit-mask: url("assets/img/picto/euro.svg") no-repeat center / contain;
  mask: url("assets/img/picto/euro.svg") no-repeat center / contain;
}

.lmk-bank .lmk-bank__logo img {
  width: 140px;
  height: auto;
}

/* -------------------------------------------------------------------------
 * Quiz — .section-quiz
 *
 * Une rangée : picto, titre 46/58 qui prend la place restante, bouton.
 * ---------------------------------------------------------------------- */

.lmk-quiz__grid > .elementor-widget-heading .elementor-heading-title {
  font-size: 46px;
  line-height: 58px;
}

@media (max-width: 900px) {
  .lmk-quiz__grid {
    --flex-wrap: wrap;
    --justify-content: center;
    gap: 32px;
  }

  .lmk-quiz__grid > .elementor-widget-heading .elementor-heading-title {
    font-size: 32px;
    line-height: 40px;
  }
}

/* -------------------------------------------------------------------------
 * 100 % satisfaction client — .section-priority
 *
 * Le texte tient la moitié gauche, le bandeau file jusqu'au bord de l'écran à
 * droite, et le slogan est un pavé jaune posé À CHEVAL sur le bord haut de la
 * bande grise. C'est ce débordement qui impose le positionnement absolu :
 * aucune colonne ne peut sortir de son conteneur.
 * ---------------------------------------------------------------------- */

.lmk-priority > .e-con-inner {
  display: block;
  position: relative;
  min-height: 480px;
  padding-top: 80px;
  padding-bottom: 50px;
}

/*
 * Le texte tient la moitié gauche, moins la gouttière de 88px.
 *
 * La contrainte est portée par le CONTENU, pas par un `padding-right` sur
 * `.e-con-inner` : un pourcentage de padding se calcule sur le bloc conteneur,
 * ici la section PLEINE LARGEUR, et non sur les 1238 du conteneur borné. À
 * 1920px il valait plus de 1000px et réduisait le texte à une colonne de 200.
 */
.lmk-priority .lmk-priority__content {
  max-width: calc(50% - 88px);
}

.lmk-priority .lmk-priority__slogan,
.lmk-priority .lmk-priority__banner {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

/*
 * Le pavé se serre sur son texte : Elementor donne 100 % de large à tout
 * widget, il faut lui rendre le retrait au contenu qu'un bloc absolu aurait
 * naturellement.
 */
.lmk-priority .lmk-priority__slogan {
  z-index: 2;
  translate: 0 -50%;
  padding: 26px 40px;
  background-color: var(--lmk-yellow);
  width: fit-content;
  max-width: 100%;
}

/* Le kit met « notre priorité c'est vous ! » en gras dans la même ligne. */
.lmk-priority .lmk-priority__slogan strong {
  font-weight: 700;
}

/* Bandeau : une image simple, calée sur la moitié droite jusqu'au bord. */
.lmk-priority .lmk-priority__banner {
  right: auto;
  bottom: auto;
  height: 480px;
  left: 50%;
  z-index: 1;
  width: calc(50vw - 20px);
}

.lmk-priority .lmk-priority__banner img {
  width: 100%;
  height: 480px;
  max-width: none;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.lmk-priority .lmk-priority__content {
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  /* Le texte reprend toute la largeur, le bandeau passe dessous. */
  .lmk-priority .lmk-priority__content {
    max-width: none;
  }

  .lmk-priority > .e-con-inner {
    padding-right: 0;
    padding-bottom: 0;
  }

  /* Sous 900px le bandeau repasse dans le flux, sous le texte. */
  .lmk-priority .lmk-priority__banner {
    position: static;
    width: auto;
    height: auto;
    margin-top: 40px;
  }

  .lmk-priority .lmk-priority__banner img {
    width: 100%;
    height: 320px;
  }

  .lmk-priority .lmk-priority__slogan {
    padding: 20px 24px;
  }
}

/* -------------------------------------------------------------------------
 * Véritable spécialiste de la literie — .section-about
 * ---------------------------------------------------------------------- */

.lmk-about__banner img {
  width: 100%;
  height: 252px;
  object-fit: cover;
  display: block;
}

/* Sous 900px, les deux colonnes repassent l'une sous l'autre. */
@media (max-width: 900px) {
  .lmk-about__grid {
    --flex-wrap: wrap;
    gap: 40px;
  }

  .lmk-about__grid > .lmk-about__col {
    --width: 100%;
  }
}

/* -------------------------------------------------------------------------
 * Carte catégorie — .section-category.i1
 *
 * 280 × 220, libellé DANS la carte : bandeau ancré en bas, 28px de marge
 * latérale, coins 14px en haut. Au survol, l'image zoome à 1.1 et le
 * bandeau passe au jaune.
 * ---------------------------------------------------------------------- */

.lmk-cat {
  flex: 0 0 auto;
  width: 280px;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--lmk-grey-50);
}

/*
 * L'image occupe toute la carte et zoome au survol — c'est l'effet du kit
 * (`scale` sur l'img, 0,5 s). On agrandit l'image et non le fond du
 * conteneur : le recadrage `cover` est préservé, aucune déformation.
 */
.lmk-cat .lmk-cat__img,
.lmk-cat .lmk-cat__img .elementor-widget-container,
.lmk-cat .lmk-cat__img figure,
.lmk-cat .lmk-cat__img a {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 1;
}

.lmk-cat .lmk-cat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
  transition: transform 0.5s ease;
  will-change: transform;
}

.lmk-cat:hover .lmk-cat__img img {
  transform: scale(1.1);
}

.lmk-cat .lmk-cat__label {
  position: absolute;
  right: 28px;
  bottom: 0;
  left: 28px;
  z-index: 2;
  padding: 8px 28px;
  background-color: var(--lmk-grey-50);
  border-radius: 14px 14px 0 0;
  line-height: 1.25;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.lmk-cat:hover .lmk-cat__label {
  background-color: var(--lmk-yellow);
}

/* « Un coup de pouce… » (accueil) : deux phrases en 40 px, soit 7 lignes
   sur un téléphone, plus gros que tous les autres titres de section. */
@media (max-width: 767px) {
  .lmk-offer h2.elementor-heading-title {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
}

/* -------------------------------------------------------------------------
 * Avantages Litrimarché (accueil)
 *
 * Elementor ne fixe leur largeur (120 px) qu'à partir de 768 px : en
 * dessous, chaque avantage — une icône, deux mots — prenait toute la ligne.
 * Deux par ligne, comme sur la fiche produit. !important : la largeur
 * Elementor du conteneur passe devant sinon.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
  .e-con:has(> .lmk-avantage) {
    --gap: 28px 16px !important;
    gap: 28px 16px !important;
  }

  /* 50 % - 12 px et non (100 % - 16 px) / 2 : au demi-pixel près, l'arrondi
     faisait dépasser la paire et renvoyait le 2e avantage à la ligne. */
  .e-con.lmk-avantage {
    --width: calc(50% - 12px) !important;
  }
}

/* -------------------------------------------------------------------------
 * Carte guide — .section-support
 *
 * 382 × 370, dégradé noir vers le bas (opacité 0.6), contenu blanc en pied.
 * ---------------------------------------------------------------------- */

.lmk-guide {
  flex: 0 0 auto;
  width: 382px;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--lmk-grey-50);
}

.lmk-guide:hover .lmk-guide__cta .elementor-heading-title {
  background-color: var(--lmk-yellow);
}

/* Même zoom que la carte catégorie : c'est l'image qui grandit. */
.lmk-guide .lmk-guide__img,
.lmk-guide .lmk-guide__img .elementor-widget-container,
.lmk-guide .lmk-guide__img figure,
.lmk-guide .lmk-guide__img a {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 1;
}

.lmk-guide .lmk-guide__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
  transition: transform 0.5s ease;
  will-change: transform;
}

.lmk-guide:hover .lmk-guide__img img {
  transform: scale(1.1);
}

/* Dégradé du kit, posé entre l'image et le contenu. */
.lmk-guide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    var(--lmk-black) 100%
  );
}

.lmk-guide > *:not(.lmk-guide__img) {
  position: relative;
  z-index: 3;
}

.lmk-guide .elementor-widget-text-editor p {
  color: var(--lmk-white);
}

/* Le bouton du kit est un rectangle blanc, pas une pilule. */
.lmk-guide .elementor-button {
  border-radius: 0;
  padding: 10px 25px;
}

/* -------------------------------------------------------------------------
 * Cartes du widget « Articles Litrimarché »
 *
 * Elles reprennent le cadre `.lmk-guide` du kit — visuel en fond, dégradé,
 * zoom au survol — mais leur contenu est du HTML simple et non des widgets
 * Elementor : d'où ces quelques règles pour le titre, le chapô et le lien.
 * ---------------------------------------------------------------------- */

.lmk-articles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.lmk-articles__vide {
  text-align: center;
}

/* -------------------------------------------------------------------------
 * Bas des fiches article — `blog-detail.html`
 *
 * La maquette enchaîne sur « Articles qui pourraient vous intéresser » puis sur
 * le pavé éditorial. Ces deux blocs sont rendus en PHP (le gabarit vient du
 * plugin, pas d'Elementor), d'où ces règles : ailleurs, ce sont des conteneurs
 * Elementor qui portent la largeur et les marges.
 * ---------------------------------------------------------------------- */

/*
 * ⚠️ Le conteneur d'Astra est un FLEX EN LIGNE, prévu pour « contenu + colonne
 * latérale ». Nos deux sections y devenaient des colonnes posées À CÔTÉ de
 * l'article — trois blocs en trois colonnes, chacun écrasé au tiers de la
 * largeur. Elles doivent SUIVRE l'article, pas l'accompagner.
 *
 * Réglé sur la seule fiche article, pas globalement : le conteneur d'Astra sert
 * partout ailleurs.
 */
.single-lm_actualite .ast-container {
  flex-wrap: wrap;
}

.single-lm_actualite .ast-container > * {
  flex: 1 1 100%;
  min-width: 0;
}

.lmk-suite,
.lmk-final {
  box-sizing: border-box;
  width: 100%;
  max-width: 1238px;
  margin-inline: auto;
  padding-inline: 20px;
}

.lmk-suite {
  margin-top: 112px;
}

.lmk-final {
  margin-top: 112px;
  padding-bottom: 112px;
  text-align: center;
}

.lmk-suite .lmk-articles {
  margin-top: 64px;
}

/*
 * `.lmk-picto` pose ses dimensions dans `--width` / `--min-height`, que seuls
 * les conteneurs d'Elementor consomment. Hors Elementor, personne ne les lit :
 * le picto sortait à 0 de haut et sur toute la largeur. On les applique donc
 * directement, à partir des mêmes variables.
 */
.lmk-final .lmk-picto {
  width: var(--lmk-picto-w);
  height: var(--lmk-picto-h);
  margin: 0 auto 32px;
}

.lmk-final .lmk-picto .lmk-picto__i {
  width: 100%;
  height: 100%;
}

.lmk-final .lmk-final__titre {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lmk-blue);
}

.lmk-final .lmk-final__resume {
  margin-top: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.lmk-final .lmk-final__resume p {
  margin: 0;
}

/* Filtres du blog : de simples liens, comme les boutons p2 du kit. */
.lmk-filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}

.lmk-filtres .lmk-filtre {
  padding: 10px 28px;
  border: 1px solid var(--lmk-blue);
  border-radius: 30px;
  background-color: var(--lmk-white);
  color: var(--lmk-blue);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.lmk-filtres .lmk-filtre.est-actif,
.lmk-filtres .lmk-filtre:hover,
.lmk-filtres .lmk-filtre:focus-visible {
  background-color: var(--lmk-blue);
  color: var(--lmk-white);
}

.lmk-guide.lmk-article {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 28px;
  border-radius: 10px;
  text-decoration: none;
}

/*
 * Cartes d'articles : voile uniforme à la place du dégradé du kit. Date et
 * titre sont en haut de carte, là où le dégradé est transparent ; avec une
 * image claire (visuel de magasin, affiche), le texte blanc devenait illisible.
 */
.lmk-guide.lmk-article::after {
  opacity: 0.6;
  background-image: none;
  background-color: var(--lmk-black);
}

.lmk-guide.lmk-article > span:not(.lmk-guide__img):not(.lmk-article__cta) {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.lmk-guide.lmk-article > span:not(.lmk-guide__img) {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--lmk-white);
}

.lmk-article .lmk-article__date {
  font-size: 14px;
  font-weight: 500;
}

.lmk-article .lmk-article__titre {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  text-transform: uppercase;
}

.lmk-article .lmk-article__chapo {
  font-size: 14px;
  line-height: 18px;
}

.lmk-article .lmk-article__cta {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: underline;
}

.lmk-guide:hover .elementor-button {
  background-color: var(--lmk-yellow);
  color: var(--lmk-blue);
}

/* -------------------------------------------------------------------------
 * Le blog du sommeil — .section-sleep
 *
 * Bande bleue de 326px en décor derrière le haut de la section, avec le picto
 * « zzZZ » du sprite (extrait en picto-sleep.svg) à 430px et 20 % d'opacité.
 * Le visuel sert de fond au bloc de titre ; deux brèves en dessous, séparées
 * d'un filet bleu, chacune avec une icône composite en haut à droite.
 * ---------------------------------------------------------------------- */

.lmk-sleep {
  position: relative;
  /* Retient le zzZZ qui déborde à gauche, sans barre de défilement. */
  overflow: hidden;
}

/* La bande bleue : 326px depuis le haut de la section. */
.lmk-sleep::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 326px;
  z-index: 0;
  background-color: #000000;
}

/*
 * Le picto « zzZZ » (sprite #sleep), décalé à gauche du centre comme le kit.
 * Posé en masque pour prendre la couleur blanche depuis la feuille de style.
 */
.lmk-sleep::after {
  content: "";
  position: absolute;
  top: 16px;
  /*
	 * Kit : `left: 50%; translate: calc(-50% - 448px)`, soit un bord gauche à
	 * 50% − 663px. On garde cette valeur telle quelle, y compris négative :
	 * c'est ce débordement à gauche qui met les GRANDS Z dans le champ. Le
	 * coller au bord (`max(0px, …)`) ne laissait voir que les petits z, presque
	 * invisibles. Le débordement est absorbé par l'`overflow` de la section.
	 */
  left: calc(50% - 663px);
  width: 430px;
  /* viewBox 200×84 : la hauteur suit la largeur. */
  height: 181px;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
  background-color: var(--lmk-white);
  -webkit-mask: url("assets/img/picto/sleep.svg") no-repeat center / contain;
  mask: url("assets/img/picto/sleep.svg") no-repeat center / contain;
}

.lmk-sleep > .e-con-inner > * {
  position: relative;
  z-index: 2;
}

.lmk-sleep__header {
  overflow: hidden;
}

/* Les deux brèves : filet bleu entre les colonnes. */
.lmk-briefs .lmk-brief {
  position: relative;
}

.lmk-briefs .lmk-brief:nth-child(2) {
  border-left: 1px solid var(--lmk-blue);
}

/*
 * Icône composite des brèves — .section-article--icon du kit.
 *
 * Deux couches, toutes deux issues du sprite de l'intégrateur découpé en
 * fichiers (assets/img/picto/) :
 *   ::before  bulle #chat, 80 × 80, jaune
 *   ::after   picto de tête, 48 × 48, bleu — varie selon la brève
 * Le masque CSS permet de colorer les SVG depuis la feuille de style, ce
 * qu'une image de fond ne permettrait pas.
 */
/*
 * `left: auto; bottom: auto` est indispensable : Elementor définit déjà un
 * ::before/::after sur ses conteneurs (.e-con) avec `inset: 0`. Sans ces
 * remises à zéro, l'élément hérite de `left: 0` et, `left` l'emportant sur
 * `right` en LTR, la bulle part se coller au bord gauche de la carte.
 */
.lmk-brief::before,
.lmk-brief::after {
  content: "";
  position: absolute;
  left: auto;
  bottom: auto;
  pointer-events: none;
}

.lmk-brief::before {
  top: 30px;
  right: 30px;
  width: 80px;
  height: 80px;
  z-index: 1;
  background-color: var(--lmk-yellow);
  -webkit-mask: url("assets/img/picto/chat.svg") no-repeat center / contain;
  mask: url("assets/img/picto/chat.svg") no-repeat center / contain;
}

/*
 * Le picto de tête est CENTRÉ dans la bulle : le disque de `chat.svg` occupe
 * tout le viewBox 80×80 (centre 40,40), la petite pointe en bas à gauche ne
 * décale pas le centre optique. D'où 30 + (80 − 48) / 2 = 46 sur les deux axes.
 */
.lmk-brief::after {
  top: 46px;
  right: 46px;
  width: 48px;
  height: 48px;
  z-index: 2;
  background-color: var(--lmk-blue);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Un modificateur par picto : le nom reprend l'id du symbole d'origine. */
.lmk-brief--advice::after {
  -webkit-mask-image: url("assets/img/picto/advice.svg");
  mask-image: url("assets/img/picto/advice.svg");
}

.lmk-brief--health::after {
  -webkit-mask-image: url("assets/img/picto/health.svg");
  mask-image: url("assets/img/picto/health.svg");
}

.lmk-brief--bed::after {
  -webkit-mask-image: url("assets/img/picto/bed.svg");
  mask-image: url("assets/img/picto/bed.svg");
}

.lmk-brief--sleep::after {
  -webkit-mask-image: url("assets/img/picto/sleep.svg");
  mask-image: url("assets/img/picto/sleep.svg");
}

.lmk-brief .lmk-brief__link .elementor-heading-title a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .lmk-briefs .lmk-brief {
    width: 100%;
    padding-right: 120px;
  }

  .lmk-briefs .lmk-brief:nth-child(2) {
    border-left: 0;
    border-top: 1px solid var(--lmk-blue);
  }

  /*
	 * Le picto « zzZZ » reste affiché : sa position est bornée par le `max()`,
	 * il ne sort plus de l'écran. On le réduit simplement pour qu'il ne
	 * déborde pas sur le bloc de titre.
	 */
  .lmk-sleep::after {
    width: 260px;
    height: 109px;
  }
}

/* -------------------------------------------------------------------------
 * Carte produit — .product-card
 *
 * Carte blanche : visuel sur fond gris clair, badge bleu en haut à droite,
 * texte aligné à gauche, bandeau jaune de disponibilité en pied.
 * ---------------------------------------------------------------------- */

.lmk-pcard {
  flex: 0 0 auto;
  width: 280px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

.lmk-pcard .lmk-pcard__badge {
  position: absolute;
  top: 12px;
  right: 0;
  z-index: 2;
  padding: 5px 12px;
  background-color: var(--lmk-blue);
  /*
	 * Le blanc est indispensable, pas décoratif : le texte courant du site est
	 * bleu, donc sans lui le libellé sort bleu sur bleu — illisible. La
	 * maquette statique le tenait d'un widget Titre ; le widget « Produits »
	 * n'a pas de réglage de couleur, la règle doit donc être ici.
	 */
  color: var(--lmk-white);
  border-radius: 5px 0 0 5px;
}

.lmk-pcard .lmk-pcard__image {
  background-color: var(--lmk-grey-50);
}

.lmk-pcard .lmk-pcard__image img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  display: block;
}

.lmk-pcard .lmk-pcard__body {
  padding: 16px 20px 12px;
}

/*
 * Deux origines pour la même carte : les `p` viennent de `lm_card_produit()`
 * (maquettes statiques encore utilisées sur les fiches produit), les `span` du
 * widget « Produits Litrimarché », qui lit le vrai catalogue.
 */
.lmk-pcard .lmk-pcard__body p,
.lmk-pcard .lmk-pcard__body span {
  display: block;
  margin: 0;
  line-height: 1.3;
  color: var(--lmk-blue);
}

.lmk-pcard .lmk-pcard__brand {
  font-size: 16px;
  font-weight: 600;
}

.lmk-pcard .lmk-pcard__name {
  font-size: 16px;
  font-weight: 700;
}

.lmk-pcard .lmk-pcard__detail {
  font-size: 14px;
  margin-top: 4px !important;
}

.lmk-pcard .lmk-pcard__size {
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px !important;
}

/* Bandeau de disponibilité : pleine largeur, deux lignes, pas une pilule. */
.lmk-pcard .elementor-widget-button .elementor-button {
  display: flex;
  width: 100%;
  border-radius: 0;
  padding: 10px 16px;
  font-size: 12px;
  line-height: 1.25;
  text-transform: none;
  text-align: left;
}

/* -------------------------------------------------------------------------
 * Widget « Bannière Litrimarché »
 *
 * Mise en page du hero du kit : visuel en fond, contenu à gauche sur 640,
 * min-height 510, padding 124/76.
 * ---------------------------------------------------------------------- */

.lmk-hero__slide {
  min-height: 510px;
  padding: 124px 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
}

.lmk-hero__contenu {
  max-width: 640px;
}

.lmk-hero__titre {
  margin: 0;
  font-size: 54px;
  line-height: 58px;
  font-weight: 600;
  color: var(--lmk-blue);
}

.lmk-hero__accroche {
  margin-top: 16px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--lmk-blue);
}

.lmk-hero__bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 15px 28px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  background-color: var(--lmk-yellow);
  color: var(--lmk-blue);
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.lmk-hero__bouton:hover,
.lmk-hero__bouton:focus {
  background-color: var(--lmk-navy);
  color: var(--lmk-yellow);
}

@media (max-width: 900px) {
  .lmk-hero__slide {
    min-height: 380px;
    padding: 64px 32px;
  }

  .lmk-hero__titre {
    font-size: 34px;
    line-height: 1.15;
  }

  .lmk-hero__accroche {
    font-size: 20px;
  }
}

/* Mobile : le texte bleu posé sur la photo devenait illisible dès qu'il
   tombait sur le matelas, et il masquait le produit. Visuel en bandeau de
   220 px en haut, texte sur fond blanc en dessous. */
@media (max-width: 600px) {
  .lmk-hero__slide {
    min-height: 0;
    padding: 244px 20px 32px;
    align-items: stretch;
    background-color: var(--lmk-white);
    background-size: auto 220px;
    background-position: right top;
  }

  .lmk-hero__titre {
    font-size: 28px;
  }

  .lmk-hero__accroche {
    margin-top: 10px;
    font-size: 18px;
  }

  .lmk-hero__bouton {
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }

  /* Points blancs : gardés sur le visuel, pas sur le fond blanc. */
  .lmk-hero .lmk-carousel__dots {
    top: 196px;
    bottom: auto;
  }
}

/* -------------------------------------------------------------------------
 * Widget « Avis clients Litrimarché »
 *
 * Les étoiles sont peintes À LA NOTE : cinq masques côte à côte sur un dégradé
 * jaune coupé au pourcentage porté par `--lmk-stars-pct`. Une seule valeur
 * saisie dans l'éditeur alimente donc le libellé ET les étoiles.
 * ---------------------------------------------------------------------- */

.lmk-review__rating {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.lmk-review__score {
  font-size: 18px;
  font-weight: 500;
  color: var(--lmk-blue);
}

.lmk-review .lmk-stars {
  flex: 0 0 auto;
  width: 157px;
  height: 24px;
  background-image: linear-gradient(
    90deg,
    var(--lmk-yellow) 0 var(--lmk-stars-pct, 100%),
    var(--lmk-grey-100) var(--lmk-stars-pct, 100%)
  );
  -webkit-mask-image:
    var(--lmk-star), var(--lmk-star), var(--lmk-star), var(--lmk-star),
    var(--lmk-star);
  mask-image:
    var(--lmk-star), var(--lmk-star), var(--lmk-star), var(--lmk-star),
    var(--lmk-star);
  -webkit-mask-position:
    0 0,
    33px 0,
    66px 0,
    99px 0,
    132px 0;
  mask-position:
    0 0,
    33px 0,
    66px 0,
    99px 0,
    132px 0;
  -webkit-mask-size: 25px 24px;
  mask-size: 25px 24px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.lmk-review__nom {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--lmk-blue);
}

.lmk-review .lmk-review__texte {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--lmk-blue);
}

.lmk-review__date {
  margin-top: 16px;
  font-size: 14px;
  text-align: right;
  color: var(--lmk-blue);
}

/* -------------------------------------------------------------------------
 * Widget « Produits Litrimarché »
 *
 * Même carte que la maquette, mais alimentée par le catalogue. Le conteneur
 * porte les classes du carrousel quand l'option est cochée dans l'éditeur ;
 * sinon les fiches se rangent en grille.
 * ---------------------------------------------------------------------- */

.lmk-produits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

/* En carrousel, c'est le rail qui porte l'écartement. */
.lmk-produits.lmk-carousel--ready {
  display: block;
  flex-wrap: nowrap;
}

.lmk-produits.lmk-carousel--ready .lmk-carousel__rail {
  gap: 26px;
  /* Toutes les fiches à la même hauteur, quel que soit leur contenu. */
  align-items: stretch;
}

/*
 * Cartes du plugin Litrimarché (`.lm-pcard`) — celles qui portent les prix du
 * magasin. Le plugin les range d'ordinaire dans une grille, qui leur donne
 * leur largeur ; notre rail est en flex avec `flex: 0 0 auto`, où une carte
 * sans largeur se réduit à son contenu. 280px est la mesure du kit, la même
 * que nos propres fiches.
 */
.lmk-produits .lm-pcard {
  width: 280px;
  max-width: 100%;
}

/*
 * Colonne, et le pied poussé en bas : toutes les fiches n'ont pas de marque ni
 * de dimension, et sans ça le bandeau jaune flotterait au milieu de certaines.
 */
.lmk-produits .lmk-pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background-color: var(--lmk-white);
  border: 1px solid var(--lmk-grey-200);
  border-radius: 10px;
}

.lmk-produits .lmk-pcard__body {
  flex: 1 1 auto;
}

.lmk-produits .lmk-pcard__cta {
  margin-top: auto;
}

/*
 * Flèches du rail produits : à l'intérieur du cadre, centrées sur la hauteur
 * des visuels. Le rail est en `overflow: hidden` — posées à cheval sur les
 * bords comme celles des avis, elles seraient coupées.
 */
.lmk-produits .lmk-carousel__arrow {
  top: 90px;
  translate: 0 -50%;
}

.lmk-produits .lmk-carousel__arrow--prev {
  left: 10px;
}

.lmk-produits .lmk-carousel__arrow--next {
  right: 10px;
}

/* Pied de carte jaune, sur deux lignes, avec le picto « magasin ». */
.lmk-produits .lmk-pcard__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  background-color: var(--lmk-yellow);
  color: var(--lmk-blue);
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.lmk-produits .lmk-pcard__cta::before {
  content: "";
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  background-color: currentColor;
  -webkit-mask: url("assets/img/picto/location.svg") no-repeat center / contain;
  mask: url("assets/img/picto/location.svg") no-repeat center / contain;
}

.lmk-produits .lmk-pcard:hover .lmk-pcard__cta {
  background-color: var(--lmk-navy);
  color: var(--lmk-yellow);
}

/* Les cartes « avantage » se répartissent sur une ligne. */
.elementor-widget-icon-box {
  flex: 0 0 auto;
}

/*
 * Avis clients en widget « Témoignage » : cartes de largeur fixe.
 * Ne sert plus qu'aux fiches produit (build-produits.php). L'accueil utilise
 * le vrai bloc du kit, `.lmk-review` — à ne pas confondre : c'est cette règle
 * qui bridait la rangée des avis à 380 quand les deux portaient le même nom.
 */
.lmk-avis {
  flex: 0 0 auto;
  width: 380px;
  max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Rythme du texte riche
 *
 * Reproduit `.text-editor` du kit sur le widget Éditeur de texte d'Elementor,
 * pour ne pas avoir à régler les marges widget par widget :
 *   .text-editor *:not(:first-child) { margin-top: 20px }
 *   .text-editor h2 { 32px / semibold }
 *   .text-editor h3 { 18px / 24px / bold }
 * ---------------------------------------------------------------------- */

/* Une URL ou une adresse email écrite en clair ne se coupe pas d'elle-même :
   sur mobile, elle élargissait la page (CGV). break-word plutôt
   qu'anywhere, qui rétrécirait aussi les colonnes flex autour du texte. */
.elementor-widget-text-editor {
  overflow-wrap: break-word;
}

.elementor-widget-text-editor h2:not(:first-child),
.elementor-widget-text-editor h3:not(:first-child),
.elementor-widget-text-editor h4:not(:first-child),
.elementor-widget-text-editor h5:not(:first-child),
.elementor-widget-text-editor p:not(:first-child),
.elementor-widget-text-editor ul:not(:first-child),
.elementor-widget-text-editor ol:not(:first-child) {
  margin-top: 20px;
}

.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5 {
  color: var(--lmk-blue);
  margin-bottom: 0;
}

.elementor-widget-text-editor h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}

.elementor-widget-text-editor h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5 {
  font-weight: 700;
}

.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* Listes du texte riche : puces bleues, comme le kit. */
.elementor-widget-text-editor ul {
  list-style: none;
  padding-left: 0;
}

.elementor-widget-text-editor ul > li {
  position: relative;
  padding-left: 18px;
}

.elementor-widget-text-editor ul > li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--lmk-blue);
}

/* -------------------------------------------------------------------------
 * Vidéo intégrée : coins arrondis du kit (.text-embed radius-10)
 * ---------------------------------------------------------------------- */

.elementor-widget-video .elementor-wrapper {
  overflow: hidden;
  border-radius: 10px;
}

/* -------------------------------------------------------------------------
 * Boutons — les 5 variantes du kit
 *
 * Elementor 4.x n'expose plus de contrôle « couleur du texte » sur le widget
 * Bouton : la couleur vient du thème. On reproduit donc les variantes du kit
 * en classes, à poser dans le champ « Classes CSS » du widget (Avancé).
 *
 *   lm-btn-i1  jaune, texte bleu          (bouton principal)
 *   lm-btn-i2  bleu, texte blanc
 *   lm-btn-i3  blanc, texte bleu
 *   lm-btn-i4  bleu, texte jaune
 *   lm-btn-i5  blanc bordé bleu 2px
 *
 * Tailles : lm-btn-p1 (15/28) · lm-btn-p2 (10/28)
 * Survol commun du kit : fond bleu nuit, texte jaune.
 * ---------------------------------------------------------------------- */

.elementor-widget-button .elementor-button {
  border-radius: 30px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.lmk-btn-p1 .elementor-button {
  padding: 15px 28px;
  font-weight: 700;
}

.lmk-btn-p2 .elementor-button {
  padding: 10px 28px;
  font-weight: 600;
}

/* Kit : `.button-p3` — même hauteur que p1, mais serré en largeur, pour les
   boutons pleine largeur d'une colonne étroite (bloc « mon magasin »). */
.lmk-btn-p3 .elementor-button {
  padding: 15px 16px;
  font-weight: 600;
}

/*
 * Les COULEURS des cinq variantes ne sont plus ici : `lm_button()` les règle
 * côté Elementor (fond, texte, et leurs états de survol), ce qui les rend
 * modifiables dans l'éditeur. Surtout, une règle de thème perdait la main au
 * chargement face au CSS EN LIGNE d'Astra — notre feuille étant un fichier
 * externe, elle arrive après — et le libellé sortait bleu sur bleu pendant ce
 * laps de temps. Ne pas les réintroduire ici.
 *
 * Seul le contour de la variante i5 reste : c'est une bordure, pas une
 * couleur de texte, et aucun réglage du widget ne la porte à l'identique.
 */
.lmk-btn-i5 .elementor-button {
  border: 2px solid var(--lmk-blue);
}

/* L'icône du bouton suit la couleur du texte. */
.elementor-widget-button .elementor-button-icon svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
}

/* -------------------------------------------------------------------------
 * Header (modèle HFE « Header Litrimarché »)
 *
 * Kit : bandeau bleu, ombre 0 5px 30px rgba(0,0,0,.15), padding vertical 30px.
 * Nav à gauche, logo centré (h 60px), outils à droite.
 * ---------------------------------------------------------------------- */

/* Le kit centre le logo dans le flux et pose la nav et les outils en absolu
   de part et d'autre (.header-nav / .header-toolbox, top 50% translate -50%),
   ce qui colle la pastille « Nos produits » et le bouton magasin aux deux bords
   de la fenêtre.

   Ce que ça coûte : le logo étant centré sur la FENÊTRE, chaque côté doit tenir
   dans (fenêtre − logo) / 2. Mesuré ici : nav 544, logo 327, outils 487 — il
   faut donc 2 × 544 + 327 + 40 ≈ 1455px. En dessous, deux boîtes en absolu ne
   se poussent pas : la nav passe SOUS le logo, sans rien signaler. La maquette
   le fait d'ailleurs elle-même dès qu'on rétrécit la fenêtre.

   D'où deux régimes :
   - au-dessus de 1500px, deux colonnes de même base ⇒ le logo retombe
     exactement au centre de la fenêtre, comme le kit, mais elles se compriment
     au lieu de se superposer si ça déborde ;
   - en dessous, les colonnes reprennent leur largeur naturelle et le logo est
     centré ENTRE elles. Il n'est plus au centre exact de la fenêtre, mais rien
     ne se chevauche et les quatre entrées restent lisibles.

   `width: auto` n'est pas décoratif : un conteneur Elementor porte
   `width: var(--width)` avec `--width: 100%`. Sans le neutraliser, la colonne
   du logo réclame toute la ligne, les deux colonnes latérales tombent à 0 et
   les outils partent hors écran — 160px de débord horizontal, sans erreur. */
.lmk-header .lmk-hdr-col-nav,
.lmk-header .lmk-hdr-col-tools {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
}

/* Les outils ne se compriment jamais : un rond de 40px écrasé à 31 ne se lit
   plus comme un rond, et c'est la loupe qui prenait tout, faute d'être la plus
   étroite. En cas de manque de place c'est le logo qui cède, lui seul. */
.lmk-header .lmk-hdr-col-tools {
  flex-wrap: nowrap;
}

.lmk-header .lmk-hdr-col-tools > * {
  flex: 0 0 auto;
}

.lmk-header .lmk-hdr-col-brand {
  flex: 1 1 auto;
  width: auto;
}

/* Seuil MESURÉ, pas choisi : à base égale, chaque colonne latérale reçoit
   (fenêtre − logo − marges − gouttières) / 2, et la nav en réclame 632. Il faut
   donc 2 × 632 + 327 + 80 = 1671px pour qu'elle tienne.

   Il valait 1500 tant que la nav faisait 544px, avec quatre entrées. L'ajout
   d'« Accueil » l'a portée à 632 sans que le seuil suive : entre 1500 et 1671
   les deux colonnes restaient bornées à leur moitié, la nav débordait de
   jusqu'à 93px et « Nos magasins » passait sous le logo. Rien ne le signalait —
   c'est `min-width: 0` sur la colonne qui autorise ce débord silencieux.

   À retenir : toute entrée ajoutée ou retirée du menu principal déplace ce
   seuil. Le vérifier en mesurant le `scrollWidth` de `.lmk-hdr-col-nav`. */
@media (min-width: 1690px) {
  .lmk-header .lmk-hdr-col-nav,
  .lmk-header .lmk-hdr-col-tools {
    flex: 1 1 0;
  }

  .lmk-header .lmk-hdr-col-brand {
    flex: 0 0 auto;
  }
}

/* Le kit donne 60px de haut au logo, soit 327px de large (image 981×180).
   C'est la LARGEUR qui est pilotée ici, pas la hauteur : le widget Image
   d'Elementor impose la sienne, et une consigne de hauteur seule met le logo en
   boîte à lettres — il rétrécit à l'œil sans libérer le moindre pixel
   horizontal, qui est pourtant la ressource rare dans ce bandeau. */
.lmk-header .lmk-hdr-logo img {
  width: 327px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.lmk-header .lmk-hdr-col-tools{
  align-items:center;
  --lmk-icon-size:40px;
}
@media (max-width:640px){
  .lmk-header .lmk-hdr-col-tools{--lmk-icon-size:36px;}
}
 
/* --------------------------------------------------------------------------
   Boutons « Rechercher » & « Mon compte » (widgets Bouton Elementor)
   Le texte est saisi dans le champ Contenu > Texte du widget.
   -------------------------------------------------------------------------- */
.lmk-header .lmk-hdr-col-tools .lmk-btn a.elementor-button{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  padding:0!important;
  background:transparent!important;
  background-color:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
 
.lmk-header .lmk-hdr-col-tools .lmk-btn a.elementor-button .elementor-button-content-wrapper{
  display:flex!important;
  flex-direction:column!important;   /* <- doit battre la règle Elementor "flex-direction:row" */
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;                 /* <- doit battre le gap:10px du widget */
}
 
/* le cercle blanc passe sur l'icône */
.lmk-header .lmk-hdr-col-tools .lmk-btn a.elementor-button .elementor-button-icon{
  width:var(--lmk-icon-size,40px);
  height:var(--lmk-icon-size,40px);
  flex:0 0 var(--lmk-icon-size,40px);
  margin:0!important;
  border-radius:50%;
  background:#FFFFFF;
  color:#0C3183;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color .2s ease,color .2s ease;
}
.lmk-header .lmk-hdr-col-tools .lmk-btn a.elementor-button:hover .elementor-button-icon{
  background:#010658;
  color:#FFED00;
}
 
.lmk-header .lmk-hdr-col-tools .lmk-btn a.elementor-button .elementor-button-text{
  color:#FFFFFF;
  font-size:10px;
  line-height:1;
  font-weight:600;
  letter-spacing:0;
  white-space:nowrap;
  transition:color .2s ease;
}
.lmk-header .lmk-hdr-col-tools .lmk-btn a.elementor-button:hover .elementor-button-text{
  color:#FFED00;
}
 
/* --------------------------------------------------------------------------
   Panier (widget HFE Cart : aucun champ texte -> libellé en ::after)
   -------------------------------------------------------------------------- */
.lmk-header .lmk-hdr-col-tools .lmk-hdr-icon a.hfe-cart-container{
  width:auto!important;
  height:auto!important;
  padding:0!important;
  background:transparent!important;
  background-color:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  border:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
}
 
.lmk-header .lmk-hdr-col-tools .lmk-hdr-icon .hfe-subtotal{display:none!important;}
 
.lmk-header .lmk-hdr-col-tools .lmk-hdr-icon a.hfe-cart-container .elementor-button-icon{
  width:var(--lmk-icon-size,40px);
  height:var(--lmk-icon-size,40px);
  flex:0 0 var(--lmk-icon-size,40px);
  margin:0!important;
  order:0!important;            /* HFE met order:15 sur l'icône -> à remettre à 0 */
  border-radius:50%;
  background:#FFFFFF;
  color:#0C3183;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;            /* ancre la pastille du compteur (::before) */
  transition:background-color .2s ease,color .2s ease;
}
.lmk-header .lmk-hdr-col-tools .lmk-hdr-icon a.hfe-cart-container:hover .elementor-button-icon{
  background:#010658;
  color:#FFED00;
}
 
.lmk-header .lmk-hdr-col-tools .lmk-hdr-icon a.hfe-cart-container::after{
  content:"Mon panier";
  order:1;
  color:#FFFFFF;
  font-size:10px;
  line-height:1;
  font-weight:600;
  letter-spacing:0;
  white-space:nowrap;
  transition:color .2s ease;
}
.lmk-header .lmk-hdr-col-tools .lmk-hdr-icon a.hfe-cart-container:hover::after{
  color:#FFED00;
}
 
/* --------------------------------------------------------------------------
   Mobile : libellés masqués pour ne pas serrer le header
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  .lmk-header .lmk-hdr-col-tools .lmk-btn a.elementor-button .elementor-button-text{display:none!important;}
  .lmk-header .lmk-hdr-col-tools .lmk-hdr-icon a.hfe-cart-container::after{display:none!important;}
}

/* -------------------------------------------------------------------------
 * Header collant
 *
 * Elementor gratuit n'a pas d'effets de mouvement et HFE n'a pas d'option
 * « sticky » : le collage se fait ici, sur le `<header id="masthead">` qu'écrit
 * HFE. C'est un enfant direct du `#page` d'Astra, donc `position: sticky` colle
 * bien au défilement de toute la page.
 *
 * Le bandeau du kit fait 120px (30 + logo 60 + 30) : le laisser tel quel en
 * permanence prendrait un sixième d'un portable en 768 de haut. D'où l'état
 * compact, posé sur <html> par sticky-header.js dès 40px de défilement.
 * ---------------------------------------------------------------------- */

/*
 * `overflow-x: hidden` sur <body> fait de lui une boîte de défilement. Un
 * élément collant s'accroche alors à CETTE boîte, qui ne défile jamais — il ne
 * colle donc nulle part, sans que rien ne le signale. `clip` coupe pareil le
 * débord horizontal mais ne crée pas de boîte de défilement : c'est la seule
 * ligne qui rend le collage possible. `html body` pour passer devant la règle
 * du parent, qui peut être chargée après.
 */
html body {
  overflow-x: clip;
}

/* HFE pose `.ehf-header #masthead { position: relative }` — un sélecteur de plus
   que `#masthead` seul, d'où le préfixe repris ici. */
.ehf-header #masthead,
#masthead {
  position: sticky;
  top: 0;
  z-index: 99;
}

/* Barre d'admin de WordPress : fixée au-dessus de 782px, dans le flux en
   dessous de 600 — le décalage change donc trois fois. */
.admin-bar #masthead {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar #masthead {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  .admin-bar #masthead {
    top: 0;
  }
}

/* Déconnecté : on masque "Mon compte" et on injecte "Se connecter" */
body:not(.logged-in) .lmk-header .lmk-hdr-col-tools .lmk-btn-account
  a.elementor-button .elementor-button-text{
  display:none!important;
}
body:not(.logged-in) .lmk-header .lmk-hdr-col-tools .lmk-btn-account
  a.elementor-button .elementor-button-content-wrapper::after{
  content:"Se connecter";
  color:#FFFFFF;font-size:10px;line-height:1;font-weight:600;
  letter-spacing:0;white-space:nowrap;transition:color .2s ease;
}
body:not(.logged-in) .lmk-header .lmk-hdr-col-tools .lmk-btn-account
  a.elementor-button:hover .elementor-button-content-wrapper::after{
  color:#FFED00;
}
/* Mobile : même règle que les autres libellés (masqués), sinon « Se connecter »
   reste seul sous son icône et décale la rangée. */
@media (max-width:767px){
  body:not(.logged-in) .lmk-header .lmk-hdr-col-tools .lmk-btn-account
    a.elementor-button .elementor-button-content-wrapper::after{display:none!important;}
}

/*
 * Le bandeau est un conteneur PLEINE LARGEUR : Elementor n'écrit alors pas de
 * `.e-con-inner`, les colonnes sont enfants directs de `.lmk-header`. Toute
 * règle visant `.lmk-header > .e-con-inner` est donc lettre morte — et muette.
 * Les marges passent par les variables que le conteneur lit lui-même, comme
 * pour `.lmk-picto` plus haut : les régler en dur ici perdrait contre la règle
 * par élément qu'engendre Elementor.
 */
/* Le passage en compact est adouci, sinon le bandeau claque d'un coup.
   Court à dessein : le bandeau étant dans le flux, le document remonte pendant
   toute la durée de l'animation et le navigateur rattrape le défilement image
   par image — au-delà de ~0.3s le défilement se met à traîner sous le doigt.
   `height: auto` sur le logo fait suivre la hauteur toute seule, il n'y a que
   la largeur à animer. */
.lmk-header,
.lmk-header .lmk-hdr-logo img {
  transition:
    padding 0.2s ease-out,
    width 0.2s ease-out;
}

/*
 * Les réglages compacts sont scindés par palier À DESSEIN : `.lmk-sticky-compact
 * .lmk-header …` compte une classe de plus que les règles des paliers, et une
 * media query n'ajoute aucune spécificité. Une valeur unique imposerait donc sa
 * largeur de logo à TOUTES les tailles, y compris aux 140px du téléphone.
 */
@media (min-width: 1025px) {
  .lmk-sticky-compact .lmk-header {
    --padding-block-start: 12px;
    --padding-block-end: 12px;
  }

  /* .lmk-sticky-compact .lmk-header .lmk-hdr-logo img {
    width: 220px;
  } */
}

@media (max-width: 1024px) {
  .lmk-sticky-compact .lmk-header {
    --padding-block-start: 10px;
    --padding-block-end: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lmk-header,
  .lmk-header .lmk-hdr-logo img {
    transition: none;
  }
}

/* Entrées de menu : liens blancs, jaune au survol (.header-button.i2).
   La classe est doublée pour passer devant le CSS inline d'Elementor,
   qui cible `.elementor-element-<id> … a.hfe-menu-item` et se charge après. */
.lmk-hdr-nav.lmk-hdr-nav .hfe-nav-menu .menu-item a.hfe-menu-item {
  color: var(--lmk-white);
  padding: 10px 0;
  white-space: nowrap;
}

.lmk-hdr-nav.lmk-hdr-nav .hfe-nav-menu .menu-item a.hfe-menu-item:hover {
  color: var(--lmk-yellow);
}

/* Le menu reste sur une ligne : le kit ne prévoit pas de retour. */
.lmk-hdr-nav .hfe-nav-menu {
  flex-wrap: nowrap;
}

/* Toutes les entrées sur la MÊME ligne de texte. Le `stretch` par défaut du flex
   étire chaque <li> à la hauteur de la pastille, mais le <a> qu'il contient reste
   collé EN HAUT : chaque texte tombe alors à sa propre marge du haut, 10px pour
   les entrées nues contre 20px pour la pastille, d'où 10px d'écart. `center` rend
   à chaque <li> sa hauteur naturelle et les centre entre eux ; les marges hautes
   et basses étant symétriques de part et d'autre, les textes retombent sur une
   même ligne quelle que soit l'épaisseur de la pastille.
   Classe doublée : HFE pose son propre alignement sur `.hfe-nav-menu`.
   Sans effet sur le déroulant de ≤1024px, où les entrées sont déjà en 100%. */
.lmk-hdr-nav.lmk-hdr-nav .hfe-nav-menu {
  align-items: center;
}

/*
 * « Nos produits » : pastille blanche demi-arrondie, collée au bord gauche.
 *
 * Visée par sa CLASSE (posée dans menus.php) et non par sa position : elle était
 * en `:first-child`, et l'ajout d'une entrée « Accueil » devant elle a fait
 * porter la pastille à la mauvaise entrée. Une pastille n'appartient pas au
 * premier venu, elle appartient aux produits.
 */
/*
 * Classe doublée : la règle de couleur d'Elementor pèse exactement le même
 * poids, et passe après dans la page. Le `:first-child` d'avant gagnait par sa
 * pseudo-classe ; en le remplaçant par une simple classe on perdait l'égalité —
 * la pastille sortait en texte blanc sur fond blanc, donc illisible.
 */
.lmk-hdr-nav.lmk-hdr-nav
  .hfe-nav-menu
  > .lmk-nav-produits.lmk-nav-produits
  > a.hfe-menu-item,
.lmk-hdr-nav.lmk-hdr-nav
  .hfe-nav-menu
  > .lmk-nav-produits.lmk-nav-produits.current-menu-item
  > a.hfe-menu-item {
  background-color: var(--lmk-white);
  color: var(--lmk-blue);
  border-radius: 0 30px 30px 0;
  padding: 20px 28px 20px 20px;
}

.lmk-hdr-nav.lmk-hdr-nav
  .hfe-nav-menu
  > .lmk-nav-produits.lmk-nav-produits
  > a.hfe-menu-item:hover {
  background-color: var(--lmk-yellow);
  color: var(--lmk-navy);
}

/* Elle ne mord sur le bord que si elle est la première à l'écran. */
.lmk-hdr-nav.lmk-hdr-nav
  .hfe-nav-menu
  > .lmk-nav-produits:first-child
  > a.hfe-menu-item {
  margin-left: -20px;
}

li#menu-item-9386 a.hfe-menu-item {
  background-color: var(--lmk-white) !important;
  color: var(--lmk-blue) !important;
  border-radius: 0 30px 30px 0 !important;
  padding: 20px 28px 20px 20px !important;
  margin-left: -20px !important;
}

li#menu-item-9386 a.hfe-menu-item:hover {
  background-color: var(--lmk-yellow) !important;
  color: var(--lmk-navy) !important;
}

/*
 * « Accueil » ne figure pas dans le header du kit — le logo y mène déjà. Ajouté
 * à la demande, il coûte ~76px à une barre déjà pleine : entre 1025 et 1199px il
 * s'efface, et la pastille des produits retrouve le bord gauche toute seule par
 * `:first-child`.
 *
 * La borne basse compte : sous 1025px la même liste sert de menu déroulant, où
 * la place ne manque pas — « Accueil » doit y rester.
 */
@media (min-width: 1025px) and (max-width: 1199px) {
  .lmk-hdr-nav.lmk-hdr-nav .hfe-nav-menu > .lmk-nav-accueil {
    display: none;
  }
}

/* Recherche, panier, compte : ronds blancs 40px (.header-button.i5). */
.lmk-hdr-icon .hfe-search-icon-toggle,
.lmk-hdr-icon .hfe-cart-container {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--lmk-white);
  color: var(--lmk-blue);
}

.lmk-hdr-icon .hfe-search-icon-toggle:hover,
.lmk-hdr-icon .hfe-cart-container:hover {
  background-color: var(--lmk-yellow);
  color: var(--lmk-navy);
}

/* HFE donne à la loupe ses propres 20px de large et 10px de marge intérieure
   (`.hfe-search-icon-toggle i.fa-search`). Ajoutés aux 8px du rond, le bouton
   de recherche sortait à 51px quand ses voisins font 40 : c'est lui, et lui
   seul, qui n'était pas aligné. */
.lmk-hdr-icon .hfe-search-icon-toggle i {
  width: auto;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

/*
 * La largeur du rond de recherche se pose sur le FORMULAIRE, pas sur le bouton :
 * HFE écrit `.hfe-search-icon-toggle { width: 100% !important }`, qu'aucune
 * spécificité ne dépasse. Le bouton suit donc son parent — et c'est ce qui le
 * laissait à 31px quand ses voisins font 40, faute de largeur au parent.
 * (Le contrôle « taille d'icône » du widget n'aide pas : il écrit lui aussi une
 * largeur, préfixée `.elementor-element-<id>`, et Elementor rend même les
 * valeurs par défaut — la retirer du script ne l'efface pas.)
 */
.lmk-hdr-icon .hfe-search-button-wrapper {
  width: 40px;
}

@media (max-width: 640px) {
  .lmk-hdr-icon .hfe-search-button-wrapper {
    width: 36px;
  }
}

/* Le panier « custom » de HFE est bâti comme un bouton Elementor : bordure et
   fond du thème à neutraliser, sous-total masqué — le kit ne montre que
   l'icône.

   ATTENTION : c'est ce fond blanc qui mangeait le survol du panier. La règle
   générale plus haut vise `.hfe-cart-container:hover` — deux classes et une
   pseudo-classe, soit exactement le poids de la règle ci-dessous, écrite après
   elle. À poids égal, c'est la dernière qui gagne : le bouton restait blanc au
   survol quand ses trois voisins passaient au jaune. Le survol est donc repris
   ici, au même niveau. */
.lmk-hdr-icon .hfe-menu-cart__toggle .elementor-button {
  border: 0;
  background-color: var(--lmk-white);
  color: var(--lmk-blue);
}

.lmk-hdr-icon .hfe-menu-cart__toggle .elementor-button:hover,
.lmk-hdr-icon .hfe-menu-cart__toggle .elementor-button:focus {
  background-color: var(--lmk-yellow);
  color: var(--lmk-navy);
}

.lmk-hdr-icon .hfe-subtotal {
  display: none;
}

.lmk-hdr-icon .hfe-menu-cart__toggle .elementor-button-icon {
  font-size: 20px;
  line-height: 1;
  margin: 0;
}

/* Bouton compte : rond blanc, pas de libellé. */
.lmk-header .lmk-btn-i3 .elementor-button {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}

.lmk-header .lmk-btn-i3 .elementor-button-text:empty {
  display: none;
}

/*
 * Centrage des boutons de la barre d'outils. Un bouton Elementor est un
 * `inline-block` : son contenu se pose sur la ligne de base, pas au milieu de la
 * boîte. Sur un rond de 40px sans marge intérieure, l'icône se retrouvait 13px
 * trop haut — visible surtout sur le compte et le sélecteur de magasin.
 */
.lmk-header .lmk-hdr-col-tools .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lmk-header .lmk-hdr-col-tools .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* gouttière du kit entre picto et libellé */
}

.lmk-header .lmk-hdr-col-tools .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
}

/* Sélecteur de magasin : pastille jaune demi-arrondie.
   Kit : .header-button.i4 = fond JAUNE, texte bleu — à ne pas confondre avec
   .button-i4 (fond bleu, texte jaune), qui serait invisible sur le bandeau.

   Le bouton n'est plus un widget Bouton mais le rendu du shortcode
   `[litrimarche_selecteur_magasin]` (build-header.php) : c'est ce qui donne les
   DEUX formes du kit, celle sans magasin choisi et la `.header-button.i4` une
   fois l'enseigne connue, sans les écrire en dur dans `_elementor_data`.

   ⚠️ Le balisage appartient au plugin, et sa feuille (`store-selector.css`)
   déclare TOUT en `!important` — y compris un `border-radius: 10px` et un
   `padding: 8px 16px` qui ne sont pas ceux du kit. Une règle du thème enfant
   sans `!important` ne passe pas, quelle que soit sa spécificité. On repasse
   donc devant en cumulant les deux : `!important` de part et d'autre, et une
   spécificité supérieure (`.lmk-header .lmk-hdr-store .lm-store-trigger`, 0-3-0,
   contre `.lm-store-trigger`, 0-1-0). C'est l'ordre de chargement qui devient
   sans effet — utile, le thème enfant n'ayant aucune garantie de passer après
   une feuille d'extension. */
.lmk-header .lmk-hdr-store .lm-store-trigger {
  border-radius: 30px 0 0 30px !important;
  padding: 15px 30px 15px 28px !important;
  margin-right: -20px !important;
  background: var(--lmk-yellow) !important;
  color: var(--lmk-blue) !important;
  /* Sur deux lignes, le bouton fait grandir tout le bandeau : jamais de retour
	   à la ligne, c'est le palier qui raccourcit le libellé. */
  white-space: nowrap !important;
}

.lmk-header .lmk-hdr-store .lm-store-trigger:hover,
.lmk-header .lmk-hdr-store .lm-store-trigger:focus {
  background: var(--lmk-white) !important;
  color: var(--lmk-blue) !important;
}

/* Le widget « Code court » est un bloc : sans ça il réclamerait toute la ligne
   et pousserait les trois ronds hors du bandeau. */
.lmk-header .lmk-hdr-store .elementor-widget-container,
.lmk-header .lmk-hdr-store .elementor-shortcode {
  display: flex;
  align-items: center;
}

/* Forme SANS magasin choisi : le kit ne met pas de pastille bleue autour du
   marker dans le bandeau — elle est réservée à la modale, sur fond blanc. */
.lmk-header .lmk-hdr-store .lm-store-trigger__pin {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  color: var(--lmk-blue) !important;
}

/* Forme AVEC magasin choisi (`.header-button.i4`) : surtitre discret au-dessus
   de l'enseigne, chevron en bout. Les tailles viennent du kit. */
.lmk-header .lmk-hdr-store .lm-store-trigger__label {
  font-size: 12px !important;
  font-weight: 500 !important;
}

.lmk-header .lmk-hdr-store .lm-store-trigger__name {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Compteur du panier : pastille rouge du kit. */
.lmk-hdr-icon .hfe-site-header-cart-li {
  position: relative;
}

.lmk-hdr-icon .hfe-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background-color: var(--lmk-red);
  color: var(--lmk-white);
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* -------------------------------------------------------------------------
 * Carrousel (assets/js/carousel.js)
 *
 * Reproduit le comportement Splide du kit : slides superposées en fondu,
 * pagination en points jaunes. Tant que le script n'a pas tourné, seule la
 * première slide est visible — pas d'empilement au chargement.
 * ---------------------------------------------------------------------- */

.lmk-carousel {
  position: relative;

  /* Courbe douce : départ franc, arrivée qui se pose. */
  --lmk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lmk-fade: 900ms;
  --lmk-rise: 700ms;
}

.lmk-carousel > .lmk-carousel__slide {
  grid-area: 1 / 1;
}

.lmk-carousel--ready {
  display: grid;
}

/* La slide sortante reste au-dessous : le fondu se fait sans à-coup. */
.lmk-carousel--ready > .lmk-carousel__slide {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition:
    opacity var(--lmk-fade) var(--lmk-ease),
    visibility 0s linear var(--lmk-fade),
    background-position var(--lmk-fade) var(--lmk-ease);
}

.lmk-carousel--ready > .lmk-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition:
    opacity var(--lmk-fade) var(--lmk-ease),
    visibility 0s,
    background-position var(--lmk-pan, 8s) linear;
}

/*
 * Panoramique lent sur le visuel actif : la position de fond dérive pendant
 * toute la durée d'affichage. `background-size: cover` n'étant pas
 * interpolable, on anime la position plutôt que l'échelle — même effet de
 * respiration, sans déformer l'image.
 */
.lmk-carousel--ready > .lmk-carousel__slide {
  background-position: 50% center;
}

.lmk-carousel--ready > .lmk-carousel__slide.is-active {
  background-position: 58% center;
}

/*
 * Contenu de la slide : montée douce et apparition décalée, titre puis
 * accroche puis bouton. Le décalage donne le rythme, pas la vitesse.
 */
.lmk-carousel--ready > .lmk-carousel__slide > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--lmk-rise) var(--lmk-ease),
    transform var(--lmk-rise) var(--lmk-ease);
}

.lmk-carousel--ready > .lmk-carousel__slide.is-active > * {
  opacity: 1;
  transform: none;
}

.lmk-carousel--ready > .lmk-carousel__slide.is-active > *:nth-child(1) {
  transition-delay: 180ms;
}

.lmk-carousel--ready > .lmk-carousel__slide.is-active > *:nth-child(2) {
  transition-delay: 300ms;
}

.lmk-carousel--ready > .lmk-carousel__slide.is-active > *:nth-child(3) {
  transition-delay: 420ms;
}

/*
 * Avant l'exécution du script : on ne montre que la première slide.
 *
 * Dans l'éditeur, on ne replie QUE les carrousels en fondu rendus par nos
 * widgets (bannière, avis) : leurs slides se superposent, en montrer une seule
 * correspond au résultat, et leur contenu se modifie dans le panneau.
 *
 * Surtout PAS les rails horizontaux (`--track`, produits, marques) : leurs
 * cartes sont côte à côte, n'en montrer qu'une donnerait un aperçu faux. Ils
 * gardent leur repli en rangée, juste en dessous.
 */
body:not(.elementor-editor-active)
  .lmk-carousel:not(.lmk-carousel--ready)
  > *:not(:first-child),
body.elementor-editor-active
  .lmk-carousel--widget:not(.lmk-carousel--track):not(.lmk-carousel--ready)
  > *:not(:first-child) {
  display: none;
}

/* Les carrousels à slides Elementor s'empilent dans l'éditeur. */
body.elementor-editor-active
  .lmk-carousel:not(.lmk-carousel--widget)
  > .lmk-carousel__slide,
body.elementor-editor-active .lmk-carousel:not(.lmk-carousel--widget) > * {
  position: static;
  opacity: 1;
  visibility: visible;
}

/* -------------------------------------------------------------------------
 * Mode rail (.splide-brand du kit)
 *
 * Plusieurs cartes visibles, le rail se translate d'un cran toutes les 3s et
 * centre la carte active. Le rail déborde volontairement de part et d'autre :
 * c'est ce débordement, masqué par la section, qui donne les cartes coupées
 * aux deux bords comme dans la maquette.
 * ---------------------------------------------------------------------- */

.lmk-carousel--track {
  overflow: hidden;
}

/* Sans le script, les cartes restent une simple rangée centrée. */
.lmk-carousel--track:not(.lmk-carousel--ready) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.lmk-carousel--track:not(.lmk-carousel--ready) > *:not(:first-child) {
  display: flex;
}

.lmk-carousel__rail {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: max-content;
  will-change: transform;
  transition: transform 1s ease;
}

.lmk-carousel__rail > * {
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .lmk-carousel__rail {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
 * Carte marque — .section-brand
 *
 * 280 × 126, logo contenu sans déformation. Le widget « Marques » rend des
 * `div` (ou des `a` quand un lien est donné), d'où les dimensions et le
 * cadrage portés ici plutôt que par des réglages Elementor.
 * ---------------------------------------------------------------------- */

.lmk-marques {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.lmk-marques.lmk-carousel--ready {
  display: block;
  overflow: hidden;
}

.lmk-marques.lmk-carousel--ready .lmk-carousel__rail {
  gap: 16px;
  align-items: stretch;
}

.lmk-marque {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  max-width: 100%;
  min-height: 126px;
  padding: 20px;
  overflow: hidden;
  text-decoration: none;
  background-color: var(--lmk-white);
  border: 1px solid var(--lmk-grey-200);
  border-radius: 10px;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

/* Seule une carte cliquable réagit au survol. */
a.lmk-marque:hover {
  background-color: var(--lmk-grey-50);
  border-color: var(--lmk-blue);
}

/*
 * `contain` et non `cover` : les logos vont de 100 à 468px de large dans la
 * maquette, il faut les loger en entier, pas les recadrer.
 */
.lmk-marque .lmk-marque__logo {
  max-width: 100%;
  max-height: 86px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lmk-carousel__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  translate: -50% 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Le point actif s'étire en pastille, plutôt que de changer de couleur sec. */
.lmk-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background-color: var(--lmk-white);
  opacity: 0.55;
  cursor: pointer;
  transition:
    width 450ms var(--lmk-ease),
    background-color 450ms var(--lmk-ease),
    opacity 450ms var(--lmk-ease);
}

.lmk-carousel__dot:hover {
  opacity: 0.85;
}

.lmk-carousel__dot.is-active {
  width: 28px;
  background-color: var(--lmk-yellow);
  opacity: 1;
}

/* Préférence système « moins d'animations » : on coupe tout mouvement. */
@media (prefers-reduced-motion: reduce) {
  .lmk-carousel--ready > .lmk-carousel__slide,
  .lmk-carousel--ready > .lmk-carousel__slide > *,
  .lmk-carousel__dot {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .lmk-carousel--ready > .lmk-carousel__slide.is-active {
    background-position: 50% center;
  }

  .lmk-carousel--ready > .lmk-carousel__slide > * {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * Header — paliers responsive
 *
 * Le kit de l'intégrateur n'a AUCUNE media query : tout ce qui suit est une
 * adaptation, pas un relevé. Principe retenu : garder l'ordre visuel de la
 * maquette (navigation à gauche, logo au centre, outils à droite) et dégraisser
 * le contenu palier par palier, du poste le plus large au plus étroit.
 *
 * Largeurs relevées sur le site : nav 544, logo 327, outils 487, marges 2×20.
 * D'où les seuils :
 *
 *   ≥ 1680px    disposition du kit, logo centré sur la fenêtre
 *   1460-1679   colonnes à leur largeur naturelle, logo centré entre les deux ;
 *               le bouton magasin garde sa forme complète (enseigne + chevron)
 *   1400-1459   le bouton magasin passe au libellé court (366px → ~205px) :
 *               « Mon magasin » dans les deux formes, sans l'enseigne
 *   1025-1399   le bouton magasin devient un rond, le logo descend à 250px et
 *               les entrées de menu se resserrent. Sans ça, à 1100, la nav mord
 *               sur le logo.
 *   ≤ 1024px    la nav passe sous le hamburger ; le bouton magasin reste un
 *               rond de 40px comme les autres outils
 *   ≤ 640px     logo 140px, outils en ronds de 36px, le bouton magasin disparaît
 *
 * Les trois premiers seuils sont MESURÉS, chacun documenté à sa media query :
 * ils dépendent de la largeur de la nav (632px avec cinq entrées) et de celle
 * du bouton magasin. Ajouter une entrée au menu ou allonger le bouton les
 * déplace tous. Le débord ne se voit pas dans la console : la nav passe
 * simplement sous le logo. Se mesure par le `scrollWidth` de la colonne.
 *
 * Le seuil de 1024px n'est pas négociable côté CSS : il vient du réglage
 * « Breakpoint » du widget Navigation de HFE (`'dropdown' => 'tablet'` dans
 * build-header.php). Changer l'un sans l'autre laisse un palier incohérent.
 * ---------------------------------------------------------------------- */

/* Le libellé du bouton magasin est le premier poste à dégraisser : à lui seul
   il pèse 366px des 487px de la colonne d'outils. Le texte vient du plugin,
   impossible de poser deux libellés dans le balisage : on masque le texte au
   profit d'un pseudo-élément.

   Les deux formes du bouton maigrissent, différemment ET PAS AU MÊME SEUIL :
   sans magasin choisi le bouton fait 405px, avec magasin 281px. Un seuil unique
   ferait forcément fausse route pour l'une des deux — soit la nav déborde en
   état « sans magasin », soit l'enseigne disparaît trop tôt en état « choisi ».

   Le sélecteur d'adjacence les distingue sans `:has()` : c'est uniquement dans
   la forme SANS magasin que le nom suit la pastille, l'autre l'imbriquant dans
   `.lm-store-trigger__text`. */

/* Sans magasin choisi : « Trouver mon magasin le plus proche » → « Mon magasin ».
   Seuil mesuré : 632 (nav) + 327 (logo) + 555 (outils avec le libellé long) + 80
   = 1594px. C'est le plus haut des deux, le libellé long étant le plus large. */
@media (max-width: 1599px) {
  .lmk-header .lmk-hdr-store .lm-store-trigger__pin + .lm-store-trigger__name {
    font-size: 0 !important;
  }

  .lmk-header
    .lmk-hdr-store
    .lm-store-trigger__pin
    + .lm-store-trigger__name::after {
    content: "Mon magasin";
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
}

@media (max-width: 1469px) {
  /* Avec magasin choisi : c'est la PLUS LARGE des deux formes — surtitre,
	   enseigne et chevron, 229px — et elle ne maigrissait pas du tout, la règle
	   ci-dessus ne visant que l'autre. Mesuré à 1330 : la nav réclame 632px et
	   n'en obtient que 592, donc « Nos magasins » passait sous le logo. L'écart
	   vient de là — l'ancien bouton tenait en ~190px.

	   On rend ces 40px en ne gardant ici que le surtitre. C'est déjà le texte du
	   kit, il dit la même chose que le libellé court de l'autre forme, et le
	   picto `building` suffit à marquer qu'un magasin est choisi. L'enseigne
	   revient dès 1470px, la largeur pour laquelle le kit l'a dessinée : la
	   tronquer pour la garder ici ne donnerait que « LITRIMARC… », qui n'apprend
	   rien de plus. */
  .lmk-header .lmk-hdr-store .lm-store-trigger__text .lm-store-trigger__name,
  .lmk-header .lmk-hdr-store .lm-store-trigger__chevron {
    display: none !important;
  }

  .lmk-header .lmk-hdr-store .lm-store-trigger__label {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
  }
}

/* Le libellé, même court, ne rentre plus : le bouton magasin rejoint les trois
   ronds de la barre d'outils. Le picto de localisation suffit à le désigner.

   Seuil MESURÉ : avec le libellé court la colonne d'outils pèse 335px, et il
   faut 632 (nav) + 327 (logo) + 335 + 80 = 1374px pour que tout tienne. Il
   valait 1319 quand le bouton était un widget Bouton, plus étroit de 40px que
   le rendu du plugin — d'où un débord de 4 à 24px entre 1320 et 1399, réapparu
   avec l'adoption du shortcode. */
@media (max-width: 1399px) {
  .lmk-header .lmk-hdr-logo img {
    width: 250px; /* ≈ 46px de haut */
  }

  /* La gouttière entre entrées ne se reprend PAS d'ici : Elementor engendre
	   `body:not(.rtl) .elementor-<page> .elementor-element-<id> … li:not(:last-child)`,
	   que même une classe doublée ne dépasse pas. Si elle devait bouger un jour,
	   ce serait par le contrôle responsive « Espace entre » du widget.
	   Le levier utilisé ici est donc la pastille, qui rend 12px à elle seule. */
  .lmk-hdr-nav.lmk-hdr-nav .hfe-nav-menu > .lmk-nav-produits > a.hfe-menu-item {
    padding-right: 20px;
    padding-left: 16px;
  }

  .lmk-header .lmk-hdr-store .lm-store-trigger {
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin-right: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
  }

  /* Ne reste que le picto : le nom dans les deux formes, plus le surtitre et
	   le chevron de la forme « magasin choisi ». */
  .lmk-header .lmk-hdr-store .lm-store-trigger__pin + .lm-store-trigger__name,
  .lmk-header
    .lmk-hdr-store
    .lm-store-trigger__pin
    + .lm-store-trigger__name::after,
  .lmk-header .lmk-hdr-store .lm-store-trigger__text,
  .lmk-header .lmk-hdr-store .lm-store-trigger__chevron {
    display: none !important;
    content: none;
  }
}

/* Dernier cran avant le hamburger. Même avec les entrées resserrées, la nav
   réclame encore 544px, et à 1040 elle n'en obtenait que 522 : les quatre
   dernières entrées passaient sous le logo sur toute la bande 1025-1060.
   Débord pré-existant, sans rapport avec le bouton magasin — c'est simplement
   la bande la plus tendue de tout le bandeau, juste avant que le hamburger ne
   libère la colonne. Le logo cède les 30px qui manquent, comme partout ailleurs
   dans ce header : il est la seule variable d'ajustement sans perte de fonction.
   Il remonte à 240px sous 1025px, où la nav n'est plus qu'un bouton. */
@media (max-width: 1100px) {
  /* Les marges du bandeau passent par les VARIABLES du conteneur : une valeur
	   en dur perdrait contre la règle par élément qu'engendre Elementor. */
  .lmk-header {
    --padding-left: 12px;
    --padding-right: 12px;
  }

  .lmk-header .lmk-hdr-logo img {
    width: 195px; /* ≈ 36px de haut */
  }
}

@media (max-width: 1024px) {
  .lmk-header {
    --flex-wrap: nowrap;
    --row-gap: 16px;
    --column-gap: 16px;
  }

  /* Replié, le menu de HFE garde `height: 0` mais reste DANS le flux : il
	   continue de réclamer la largeur de ses quatre entrées, soit 430px pour une
	   colonne qui n'affiche qu'un hamburger de 40px. Le sortir du flux rend cette
	   largeur — HFE le passe déjà en absolu quand le menu s'ouvre, on ne fait
	   qu'appliquer la même règle à l'état fermé. */
  .lmk-hdr-nav .hfe-nav-menu__layout-horizontal {
    position: absolute;
  }

  /* La nav n'est plus qu'un bouton : les deux colonnes latérales reprennent une
	   base commune et le logo retrouve le centre exact de la fenêtre.
	   `min-width: max-content` est le garde-fou : quand la place vient à manquer,
	   les colonnes ne descendent pas sous leur contenu — c'est le logo qui cède.
	   Sans lui, à 685px, les 190px d'outils ne tenaient pas dans leur part de
	   186px et le bouton magasin partait à la ligne. */
  .lmk-header .lmk-hdr-col-nav,
  .lmk-header .lmk-hdr-col-tools {
    flex: 1 1 0;
    width: auto;
    min-width: max-content;
  }

  .lmk-header .lmk-hdr-col-brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .lmk-header .lmk-hdr-logo img {
    width: 240px; /* ≈ 44px de haut */
  }

  /* Le calage à gauche du hamburger ne se fait PAS ici mais par le contrôle
	   `resp_align` du widget (build-header.php) : HFE le centre avec des marges
	   automatiques via une règle engendrée par Elementor, hors de portée de
	   cette feuille. */

  /* La pastille « Nos produits » redevient un lien simple : le menu passe sous
	   le hamburger, la pastille n'a plus de sens. Sa remise à plat est faite
	   avec le reste du panneau déroulant, plus bas dans cette feuille. */

  /* Le sélecteur de magasin garde son icône et perd son libellé : c'est déjà
	   ce que fait le palier 1319, dont ce palier-ci est un sous-ensemble. Les
	   règles étaient recopiées à l'identique ici — retirées, elles s'appliquent
	   toujours. */
}

/* Bouton hamburger de HFE : blanc, aligné sur les icônes du kit. */
.lmk-hdr-nav .hfe-nav-menu__toggle {
  color: var(--lmk-white);
  padding: 0;
}

/* Menu ouvert : HFE bascule sur `far fa-window-close`, un glyphe de la fonte
   « regular » de Font Awesome 5 — qu'Elementor ne charge pas, d'où un carré
   vide à la place de la croix. On repasse sur la croix simple de la « solid ».
   Même famille de piège que FA6 vs FA5, plus haut dans ce fichier. */
.lmk-hdr-nav .hfe-nav-menu__toggle .fa-window-close::before {
  content: "\f00d";
  font-weight: 900;
}

.lmk-hdr-nav .hfe-nav-menu__toggle .hfe-nav-menu-icon {
  color: var(--lmk-white);
  font-size: 24px;
}

/* -------------------------------------------------------------------------
 * Panneau déroulant du menu (sous 1025px)
 *
 * Le kit n'en propose aucun : sans media query, il n'a pas d'état replié. Tout
 * ce qui suit est une adaptation, calée sur la charte — panneau blanc pleine
 * largeur sous le bandeau, entrées bleues empilées, jaune au survol comme dans
 * le bandeau.
 *
 * HFE ne pose RIEN de tout ça : sous 1025px son script se contente d'ouvrir et
 * de fermer le panneau, la géométrie est laissée au thème. Sans ces règles, les
 * quatre entrées restaient sur UNE seule ligne — à cause du `nowrap` du
 * bandeau, qui n'a plus lieu d'être une fois le menu replié — et débordaient
 * hors écran sur un fond transparent.
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /*
	 * Le panneau s'ancre sur le BANDEAU, pas sur la colonne de navigation qui ne
	 * fait que 40px de large. Les conteneurs Elementor étant `relative` par
	 * défaut, il faut désamorcer les intermédiaires pour que `top/left/width`
	 * visent bien `.lmk-header`.
	 */
  .lmk-header .lmk-hdr-col-nav,
  .lmk-header .lmk-hdr-col-nav .elementor-widget {
    position: static;
  }

  .lmk-hdr-nav .hfe-nav-menu__layout-horizontal {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--lmk-white);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  }

  .lmk-hdr-nav .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
  }

  .lmk-hdr-nav .hfe-nav-menu__layout-horizontal .menu-item {
    width: 100%;
  }

  .lmk-hdr-nav .hfe-nav-menu__layout-horizontal .menu-item + .menu-item {
    border-top: 1px solid var(--lmk-grey-200);
  }

  /*
	 * Les deux sélecteurs disent la même chose, mais le second vise nommément
	 * la pastille : sans lui elle garderait le texte blanc du bandeau, invisible
	 * sur le fond blanc du panneau.
	 */
  .lmk-hdr-nav.lmk-hdr-nav .hfe-nav-menu > .menu-item > a.hfe-menu-item,
  .lmk-hdr-nav.lmk-hdr-nav .hfe-nav-menu > .lmk-nav-produits > a.hfe-menu-item {
    display: block;
    width: 100%;
    margin-left: 0;
    padding: 14px 20px;
    border-radius: 0;
    background-color: transparent;
    color: var(--lmk-blue);
    white-space: normal;
  }

  .lmk-hdr-nav.lmk-hdr-nav .hfe-nav-menu > .menu-item > a.hfe-menu-item:hover,
  .lmk-hdr-nav.lmk-hdr-nav .hfe-nav-menu > .menu-item > a.hfe-menu-item:focus,
  .lmk-hdr-nav.lmk-hdr-nav
    .hfe-nav-menu
    > .lmk-nav-produits
    > a.hfe-menu-item:hover,
  .lmk-hdr-nav.lmk-hdr-nav
    .hfe-nav-menu
    > .lmk-nav-produits
    > a.hfe-menu-item:focus {
    background-color: var(--lmk-yellow);
    color: var(--lmk-navy);
  }
}

/* Téléphone. Le compte des largeurs ne passe plus en colonnes égales : à 375px,
   chaque côté n'aurait que 89px pour 124px d'outils. Les colonnes reprennent
   donc leur largeur naturelle, le logo est centré ENTRE hamburger et outils —
   à quelques pixels près du centre de la fenêtre, ce qui ne se voit pas.
   Compte à 375 : 40 (hamburger) + 140 (logo) + 124 (3 ronds de 36) + 32 de
   marges + 24 de gouttières = 360. */
@media (max-width: 640px) {
  .lmk-header {
    --padding-block-start: 16px;
    --padding-block-end: 16px;
    --padding-left: 16px;
    --padding-right: 16px;
    --row-gap: 12px;
    --column-gap: 12px;
  }

  /* `0 0 auto` et pas `0 1 auto` : à 390px les colonnes latérales se laissaient
	   comprimer, la barre d'outils repassait sur deux lignes et le logo tombait
	   à 65px. Ici c'est le logo qui absorbe le manque de place, jamais elles. */
  .lmk-header .lmk-hdr-col-nav,
  .lmk-header .lmk-hdr-col-tools {
    flex: 0 0 auto;
  }

  .lmk-header .lmk-hdr-col-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .lmk-header .lmk-hdr-logo img {
    width: 140px; /* ≈ 26px de haut */
  }

  .lmk-header .lmk-hdr-col-tools {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .lmk-hdr-icon .hfe-search-icon-toggle,
  .lmk-hdr-icon .hfe-cart-container,
  .lmk-header .lmk-btn-i3 .elementor-button {
    width: 36px;
    height: 36px;
  }

  /* Le sélecteur de magasin sort de la barre : il reste accessible par le menu
	   et par le bandeau des fiches produit. */
  .lmk-header .lmk-hdr-col-tools > .lmk-hdr-store {
    display: none;
  }
}

/* -------------------------------------------------------------------------
 * Footer (modèle HFE « Footer Litrimarché »)
 * ---------------------------------------------------------------------- */

/* Le kit donne 284px au logo du footer — la largeur de sa colonne. Le plafond
   compte : sous 1180px les colonnes deviennent élastiques et un logo en 100%
   partirait à 400px, deux fois celui du header. */
.lmk-footer .lmk-ftr-logo img {
  width: 100%;
  max-width: 284px;
  height: auto;
}

/* Kit : .footer { margin-top: 112px } — le footer ne colle jamais au contenu. */
.lmk-footer {
  margin-top: 112px;
}

/* Paliers du footer.
   Le kit pose 4 colonnes fixes (284 + 264 + 264 + 284, gouttière 40) : il en
   faut 1136 plus les marges, soit ~1180px. En dessous, on passe à deux colonnes
   puis à une seule, en laissant les largeurs fixes devenir des maximums —
   sinon une colonne de 284px reste à 284px dans un écran de 360. */
@media (max-width: 1179px) {
  .lmk-footer .lmk-ftr-col {
    width: auto;
    max-width: 100%;
    flex: 1 1 264px;
  }
}

@media (max-width: 767px) {
  .lmk-footer .lmk-ftr-col {
    flex: 1 1 100%;
  }

  /* Les colonnes de liens restent alignées à gauche, titres et entrées sur la
	   même verticale. Les centrer donnait un bloc centré aux entrées ferrées à
	   gauche : les liens partaient à 85px du bord quand leur titre restait à 20.
	   Seule la colonne de marque garde son centrage, comme dans le kit. */
  .lmk-footer .lmk-ftr-logo img {
    max-width: 240px;
    margin-inline: auto;
  }

  /* La bande basse repasse en colonne, mentions puis copyright. */
  .lmk-footer .lmk-ftr-bottom > .e-con-inner,
  .lmk-footer .lmk-ftr-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* Listes de liens : 14px, bleu, souligné au survol. */
.lmk-ftr-links .hfe-nav-menu .menu-item a.hfe-menu-item,
.lmk-ftr-legal .hfe-nav-menu .menu-item a.hfe-menu-item {
  color: var(--lmk-blue);
  padding-left: 0;
  padding-right: 0;
}

.lmk-ftr-links .hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.lmk-ftr-legal .hfe-nav-menu .menu-item a.hfe-menu-item:hover {
  color: var(--lmk-navy);
  text-decoration: underline;
}

/* Mentions en mobile : le menu est horizontal, ses liens passent à la ligne
   collés (22 px de haut, sans écart) ; l'espacement vertical réglé dans
   Elementor ne vaut que pour un menu vertical. Zone tactile portée à ~44 px. */
@media (max-width: 767px) {
  .lmk-ftr-legal .hfe-nav-menu .menu-item a.hfe-menu-item {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}

/* CTA magasin du footer. Kit (.footer-branch a) : pastille jaune 16/28, coins
   40px, 50px de marge haute — et le pictogramme de localisation posé EN DEHORS
   du bouton, à cheval sur son bord haut (svg absolu, top -30, 30×40). */
.lmk-footer .lmk-btn-i1 .elementor-button {
  position: relative;
  display: block;
  margin-top: 30px; /* + les 20px de gouttière de la colonne = 50px du kit */
  padding: 16px 28px;
  text-align: center;
  border-radius: 40px;
}

.lmk-footer .lmk-btn-i1 .elementor-button-content-wrapper {
  display: block;
}

.lmk-footer .lmk-btn-i1 .elementor-button-icon {
  position: absolute;
  top: -30px;
  left: 50%;
  translate: -50% 0;
  margin: 0;
  font-size: 34px;
  line-height: 1;
  color: var(--lmk-blue);
}

/* -------------------------------------------------------------------------
 * Outils flottants — panier et retour en haut (bas à droite de la page)
 *
 * Ajout hors kit : la maquette de l'intégrateur n'a ni l'un ni l'autre.
 * Couleurs reprises de la charte : le panier en jaune, comme les appels à
 * l'action du kit ; le retour en haut en blanc bordé de bleu, en retrait.
 *
 * Le bloc passe AU-DESSUS du header collant (z-index 99) sans jamais le
 * masquer : il vit en bas d'écran.
 * ---------------------------------------------------------------------- */

.lmk-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* `padding: 0` et `box-sizing` ne sont pas décoratifs : Astra habille tous les
   `<button>` avec une marge intérieure horizontale plus large que la verticale.
   Ajoutée à une largeur et une hauteur égales, elle rendait les deux boutons
   ovales — le rayon de 50 % suivait la boîte, pas le cercle voulu. */
.lmk-float__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* `display: flex` sur une classe l'emporte sur le `display: none` que le
   navigateur attache à `[hidden]` : sans cette ligne, le retour en haut reste
   visible dès le chargement, avant tout défilement. */
.lmk-float__btn[hidden] {
  display: none;
}

.lmk-float__btn--cart {
  width: 56px;
  height: 56px;
  background-color: var(--lmk-yellow);
  color: var(--lmk-blue);
  font-size: 22px;
}

.lmk-float__btn--cart:hover,
.lmk-float__btn--cart:focus {
  background-color: var(--lmk-blue);
  color: var(--lmk-yellow);
}

/* Retour en haut : la flèche seule, sans pastille — elle ne dispute pas la
   vedette au panier, qui est l'action. */
.lmk-float__btn--top {
  width: 44px;
  height: 44px;
  background-color: transparent;
  color: var(--lmk-blue);
  font-size: 22px;
  box-shadow: none;
}

.lmk-float__btn--top:hover,
.lmk-float__btn--top:focus {
  background-color: transparent;
  color: var(--lmk-navy);
}

/* Au survol, la flèche monte et redescend : le geste dit où mène le bouton. */
@keyframes lmk-float-monte {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.lmk-float__btn--top i {
  transition: transform 0.2s ease;
}

.lmk-float__btn--top:hover i,
.lmk-float__btn--top:focus-visible i {
  animation: lmk-float-monte 0.7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lmk-float__btn--top i {
    transition: none;
  }

  .lmk-float__btn--top:hover i,
  .lmk-float__btn--top:focus-visible i {
    animation: none;
    transform: translateY(-3px);
  }
}

/* Compteur d'articles : même pastille rouge que dans le header. */
.lmk-float__count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background-color: var(--lmk-red);
  color: var(--lmk-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* Panier vide : la pastille n'apprend rien, elle disparaît. */
.lmk-float__count--vide {
  display: none;
}

/* ---------- Le tiroir ---------- */

/*
 * Fermeture par `visibility` et non par `display` : une boîte en `display: none`
 * ne s'anime pas, le glissement se perdrait. `visibility: hidden` sort tout de
 * même le tiroir de l'ordre de tabulation et de l'arbre d'accessibilité.
 *
 * Le délai est asymétrique À DESSEIN. Fermeture : la visibilité attend 0,3s que
 * le panneau soit sorti par la droite, sinon il disparaîtrait d'un coup.
 * Ouverture : aucun délai, sinon le tiroir reste invisible pendant toute
 * l'animation — et le script ne peut pas y placer le focus, un élément invisible
 * ne le prenant pas. La croix ne recevait donc jamais le focus à l'ouverture.
 */
.lmk-drawer {
  position: fixed;
  inset: 0;
  z-index: 110;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}

.lmk-drawer--ouvert {
  visibility: visible;
  transition-delay: 0s;
}

/* Comme le header collant, le tiroir passe sous la barre d'admin de WordPress :
   sans ce décalage, son titre est mangé par la barre en session connectée. */
.admin-bar .lmk-drawer {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .lmk-drawer {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  .admin-bar .lmk-drawer {
    top: 0;
  }
}

.lmk-drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(1, 6, 88, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lmk-drawer--ouvert .lmk-drawer__overlay {
  opacity: 1;
}

.lmk-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(400px, 100vw);
  height: 100%;
  padding: 24px;
  background-color: var(--lmk-white);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.25);
  color: var(--lmk-blue);
  text-align: left;
  translate: 100% 0;
  transition: translate 0.3s ease;
}

.lmk-drawer--ouvert .lmk-drawer__panel {
  translate: 0 0;
}

.lmk-drawer__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lmk-grey-200);
}

.lmk-drawer__title {
  font-size: 20px;
  font-weight: 700;
}

.lmk-drawer__close {
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--lmk-blue);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.lmk-drawer__close:hover,
.lmk-drawer__close:focus {
  color: var(--lmk-red);
  background-color: transparent !important;
}

/* La liste défile, le total et les boutons restent en vue. */
.lmk-drawer .lmk-float__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.lmk-drawer .woocommerce-mini-cart {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lmk-drawer,
  .lmk-drawer__overlay,
  .lmk-drawer__panel {
    transition: none;
  }
}

/* Rappel de magasin : sans magasin choisi, le plugin interdit l'achat et le
   panier est forcément vide — « Votre panier est vide » seul ferait croire à
   un oubli du visiteur plutôt qu'à une étape qui lui manque. */
.lmk-float__store-notice {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background-color: var(--lmk-blue-light);
  font-size: 14px;
  line-height: 1.4;
}

.lmk-float__store-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lmk-blue);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Le mini-panier de WooCommerce ---------- */

.lmk-float__content .woocommerce-mini-cart {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Le gabarit de WooCommerce met l'image DANS le lien du produit, avec le nom :
 * ordonner les enfants de la ligne ne suffit donc pas. La ligne passe en
 * position relative, le lien devient la rangée « vignette + nom », la quantité
 * se pose dessous à l'aplomb du nom, et la croix de retrait se cale en haut à
 * droite — là où on la cherche.
 */
.lmk-float__content .woocommerce-mini-cart-item {
  position: relative;
  padding: 12px 28px 12px 0;
  border-bottom: 1px solid var(--lmk-grey-200);
  font-size: 14px;
  line-height: 1.4;
}

.lmk-float__content .woocommerce-mini-cart-item > a:not(.remove) {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--lmk-blue);
  font-weight: 600;
  text-decoration: none;
}

.lmk-float__content .woocommerce-mini-cart-item > a:not(.remove):hover {
  text-decoration: underline;
}

.lmk-float__content .woocommerce-mini-cart-item img {
  width: 56px;
  height: auto;
  flex: 0 0 auto;
  border-radius: 8px;
}

.lmk-float__content .quantity {
  display: block;
  margin-top: 4px;
  margin-left: 68px; /* 56 de vignette + 12 de gouttière */
  color: var(--lmk-grey-700);
}

.lmk-float__content .woocommerce-mini-cart-item .remove {
  position: absolute;
  top: 12px;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--lmk-grey-700);
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
}

.lmk-float__content .woocommerce-mini-cart-item .remove:hover {
  background-color: var(--lmk-red);
  color: var(--lmk-white);
}

/*
 * Panier vide : le plugin Litrimarché remplace le gabarit `cart/cart-empty.php`
 * par son propre « Votre panier est vide. », qui s'ajoutait à celui de
 * WooCommerce — deux phrases pour dire la même chose. On masque celle de
 * WooCommerce, mais seulement quand l'autre est là : plugin désactivé, elle
 * reprend son rôle.
 */
.lmk-float__content:has(.lm-cart__empty-text)
  .woocommerce-mini-cart__empty-message {
  display: none;
}

.lmk-float__content .woocommerce-mini-cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.lmk-float__content .woocommerce-mini-cart__empty-message {
  margin: 0;
  font-size: 14px;
}

/* Les deux boutons du mini-panier reprennent les variantes du kit :
   « Voir le panier » en blanc bordé, « Commander » en jaune plein. */
.lmk-float__content .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.lmk-float__content .woocommerce-mini-cart__buttons .button {
  display: block;
  padding: 13px 24px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--lmk-blue);
  background-color: var(--lmk-white);
  color: var(--lmk-blue);
}

.lmk-float__content .woocommerce-mini-cart__buttons .checkout {
  border-color: var(--lmk-yellow);
  background-color: var(--lmk-yellow);
  color: var(--lmk-blue);
}

.lmk-float__content .woocommerce-mini-cart__buttons .button:hover,
.lmk-float__content .woocommerce-mini-cart__buttons .button:focus {
  border-color: var(--lmk-navy);
  background-color: var(--lmk-navy);
  color: var(--lmk-yellow);
}

@media (max-width: 640px) {
  .lmk-float {
    right: 16px;
    bottom: 16px;
  }

  .lmk-float__btn--cart {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  /* Sur téléphone le tiroir prend toute la largeur, moins un liseré qui laisse
	   voir la page derrière — on sait ainsi qu'on n'a pas changé d'écran. */
  .lmk-drawer__panel {
    width: calc(100vw - 40px);
    padding: 20px;
  }
}

@media print {
  .lmk-float,
  .lmk-drawer {
    display: none;
  }
}

.lm-fp-bandeau .lm-btn:hover {
  background-color: var(--lmk-yellow);
  color: var(--lmk-navy);
}

.woocommerce-MyAccount-content .lm-account__btn:hover {
  background-color: var(--lmk-navy) !important;
  color: var(--lmk-yellow) !important;
}

.woocommerce-account
  .woocommerce-MyAccount-content
  button.woocommerce-Button:hover,
.lm-account__btn:hover {
  background-color: var(--lmk-yellow) !important;
  color: var(--lmk-navy) !important;
}

.woocommerce-account .woocommerce-MyAccount-content button.woocommerce-Button,
.lm-account__btn {
  color: var(--lmk-navy) !important;
}

.password-input {
  display: block !important;
  position: relative !important;
}

.show-password-input {
  position: absolute !important;
  right: 0.9em !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
}

.show-password-input::after {
  font-family: "WooCommerce";
  content: "\e010";
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  color: var(--lmk-navy, #010658);
}

.show-password-input.display-password::after {
  opacity: 0.6;
}

/* 1. état par défaut : tous les boutons en contour */
.lmk-account-nav .elementor-button {
  background-color: #fff !important;
  color: var(--lmk-blue) !important;
  border: 2px solid var(--lmk-blue) !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* 2. état actif : le bouton correspondant au sous-onglet courant */
body.woocommerce-dashboard
  .lmk-account-nav
  a.elementor-button[href$="/mon-compte/"],
body.woocommerce-orders .lmk-account-nav a.elementor-button[href*="/orders"],
body.woocommerce-view-order
  .lmk-account-nav
  a.elementor-button[href*="/orders"],
body.woocommerce-edit-account
  .lmk-account-nav
  a.elementor-button[href*="/edit-account"],
body.woocommerce-fidelite-vip
  .lmk-account-nav
  a.elementor-button[href*="/fidelite-vip"] {
  background-color: var(--lmk-blue) !important;
  color: #fff !important;
  border-color: var(--lmk-blue) !important;
}

/* 3. survol sur les boutons inactifs */
.lmk-account-nav .elementor-button:hover {
  background-color: var(--lmk-navy) !important;
  color: #fff !important;
  border-color: var(--lmk-navy) !important;
}

/* neutralise l'état actif forcé en PHP sur "Nos produits" */
.lmk-hdr-nav.lmk-hdr-nav
  .hfe-nav-menu.hfe-nav-menu
  > #menu-item-2712
  > a.hfe-menu-item {
  color: var(--lmk-white);
}
.lmk-hdr-nav.lmk-hdr-nav
  .hfe-nav-menu.hfe-nav-menu
  > .lmk-nav-produits.lmk-nav-produits.current-menu-item
  > a.hfe-menu-item {
  background-color: var(--lmk-white);
  color: var(--lmk-blue);
}

/* vrai état actif, piloté par le JS */
.lmk-hdr-nav.lmk-hdr-nav
  .hfe-nav-menu.hfe-nav-menu
  > .menu-item.is-current
  > a.hfe-menu-item {
  color: var(--lmk-yellow);
}
.lmk-hdr-nav.lmk-hdr-nav
  .hfe-nav-menu.hfe-nav-menu
  > .lmk-nav-produits.lmk-nav-produits.is-current
  > a.hfe-menu-item {
  background-color: var(--lmk-navy);
  color: var(--lmk-yellow);
}

.lmk-guide.lmk-article > span.lmk-article__cta {
  align-self: center;
  margin-top: 4px;
  padding: 10px 28px;
  border-radius: 30px;
  background-color: var(--lmk-white);
  color: var(--lmk-blue);
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.lmk-guide.lmk-article:hover > span.lmk-article__cta {
  background-color: var(--lmk-yellow);
  color: var(--lmk-navy);
}

.woocommerce-product-gallery .flex-direction-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-product-gallery .flex-direction-nav a {
  position: absolute;
  top: calc(
    (100% - 107px) / 2
  ); /* centré sur l'image, pas sur les miniatures */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--lmk-yellow);
  color: var(--lmk-blue);
  font-size: 0; /* masque le texte "Previous" / "Next" */
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.woocommerce-product-gallery .flex-direction-nav a::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: currentcolor;
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev {
  left: 12px;
  translate: 0 -50%;
}
.woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
  mask: url("assets/img/picto/prev.svg") center / contain no-repeat;
}

.woocommerce-product-gallery .flex-direction-nav .flex-next {
  right: 12px;
  translate: 0 -50%;
}
.woocommerce-product-gallery .flex-direction-nav .flex-next::before {
  mask: url("assets/img/picto/next.svg") center / contain no-repeat;
}

.woocommerce-product-gallery .flex-direction-nav a:hover {
  background-color: var(--lmk-navy);
  color: var(--lmk-yellow);
}

li#menu-item-2711 a.hfe-menu-item:focus {
  color: var(--lmk-blue);
}

/* --- Actualités : hover des boutons Modifier / Supprimer --- */

.lm-dash__actu-edit,
.lm-dash__actu-delete {
  transition:
    background-color var(--lm-transition),
    border-color var(--lm-transition),
    color var(--lm-transition);
}

/* Modifier → bleu plein, texte jaune (couple maison, 9,7:1) */
.lm-dash__actu-edit:hover,
.lm-dash__actu-edit:focus-visible {
  background: var(--lm-blue) !important;
  border-color: var(--lm-blue) !important;
  color: var(--lmk-yellow) !important;
}

.lm-dash__actu-edit:active {
  background: var(--lm-blue-deep) !important;
  border-color: var(--lm-blue-deep) !important;
}

/* Supprimer → rouge plein, texte blanc */
.lm-dash__actu-delete:hover,
.lm-dash__actu-delete:focus-visible {
  background: var(--lm-danger) !important;
  border-color: var(--lm-danger) !important;
  color: #fff !important;
}

.lm-dash__actu-delete:active {
  background: #a80610 !important;
  border-color: #a80610 !important;
}

/* Focus clavier distinct du survol */
.lm-dash__actu-edit:focus-visible,
.lm-dash__actu-delete:focus-visible {
  outline: 2px solid var(--lm-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lm-dash__actu-edit,
  .lm-dash__actu-delete {
    transition: none;
  }
}

.lm-field-error {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--lm-danger);
}

.lm-field-error[hidden] {
  display: none;
}

.lm-dash__field--day {
  flex-wrap: wrap;
}

.lm-dash__field--day .lm-field-error {
  flex-basis: 100%;
  margin-left: 100px;
}

.lm-dash__field input[aria-invalid="true"],
.lm-dash__field select[aria-invalid="true"] {
  border-color: var(--lm-danger);
}

.lm-dash__field input[aria-invalid="true"]:focus,
.lm-dash__field select[aria-invalid="true"]:focus {
  border-color: var(--lm-danger);
  box-shadow: 0 0 0 3px rgba(208, 8, 20, 0.15);
}

.lm-form-errors {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--lm-danger);
  border-left-width: 4px;
  border-radius: var(--lm-radius-s);
  background: var(--lm-danger-bg);
  color: var(--lm-ink);
}

.lm-form-errors[hidden] {
  display: none;
}

.lm-form-errors p {
  margin: 0 0 8px;
  font-weight: 600;
}

.lm-form-errors ul {
  margin: 0;
  padding-left: 20px;
}

.lm-form-errors li + li {
  margin-top: 4px;
}

.lm-form-errors a {
  color: var(--lm-danger);
  text-decoration: underline;
}

.lm-dash__hint code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--lm-bg-soft);
  font-size: 0.95em;
  white-space: nowrap;
}

.lm-dash .lm-dash__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 26px 20px;
  border: 1px dashed var(--lm-line-strong);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-soft);
  text-align: center;
}

.lm-dash .lm-dash__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lm-blue-tint-2);
  color: var(--lm-blue);
}

.lm-dash .lm-dash__empty-title {
  margin: 4px 0 0;
  color: var(--lm-blue-deep);
  font-size: 16px;
  font-weight: 700;
}

.lm-dash .lm-dash__empty-text {
  max-width: 46ch;
  margin: 0;
  color: var(--lm-muted);
  font-size: 14px;
  line-height: 1.45;
}

.lm-dash .lm-dash__empty-cta {
  margin-top: 6px;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--lm-blue);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--lm-transition);
}

.lm-dash .lm-dash__empty-cta:hover,
.lm-dash .lm-dash__empty-cta:focus-visible {
  background: var(--lm-blue-hover);
  color: #fff;
  text-decoration: none;
}

.lm-dash .lm-dash__empty-cta:focus-visible {
  outline: 2px solid var(--lm-blue-deep);
  outline-offset: 2px;
}

.lm-dash .lm-dash__picks-hint {
  margin: -4px 0 12px;
  font-size: 13.5px;
}

#lm-dash .lm-dash__pick-result {
  color: var(--lm-ink) !important;
}

#lm-dash .lm-dash__pick-result > * {
  color: inherit !important;
}

#lm-dash .lm-dash__pick-result:hover,
#lm-dash .lm-dash__pick-result:focus-visible,
#lm-dash .lm-dash__pick-result.is-active,
#lm-dash .lm-dash__pick-result[aria-selected="true"] {
  background: var(--lm-blue-tint) !important;
  color: var(--lm-blue) !important;
}

#lm-dash .lm-dash__pick-result:focus-visible {
  outline: 2px solid var(--lm-blue);
  outline-offset: -2px;
}

#lm-dash .lm-dash__pick-empty {
  padding: 10px;
  color: var(--lm-muted);
  font-size: 14px;
}

#lm-dash .lm-dash__pick img,
#lm-dash .lm-dash__pick-result img {
  object-fit: contain !important;
  background: var(--lm-bg-soft) !important;
  border: 1px solid var(--lm-line) !important;
  box-sizing: border-box !important;
}

.lm-dash .lm-dash__save:disabled,
.lm-dash .lm-dash__save.is-disabled {
  background: var(--lm-line) !important;
  color: var(--lm-muted) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.lm-dash .lm-dash__save:disabled:hover,
.lm-dash .lm-dash__save.is-disabled:hover {
  background: var(--lm-line) !important;
  color: var(--lm-muted) !important;
}

.lm-dash .lm-dash__save:hover {
  color: var(--lmk-yellow) !important;
}

.lm-dash .lm-dash__pick-remove,
.lm-dash .lm-dash__photo-remove {
  transition:
    background var(--lm-transition),
    color var(--lm-transition),
    border-color var(--lm-transition);
}

.lm-dash .lm-dash__pick-remove:hover,
.lm-dash .lm-dash__pick-remove:focus-visible,
.lm-dash .lm-dash__photo-remove:hover,
.lm-dash .lm-dash__photo-remove:focus-visible {
  background: var(--lm-danger) !important;
  border-color: var(--lm-danger) !important;
  color: #fff !important;
}

.lm-dash .lm-dash__pick-remove:active,
.lm-dash .lm-dash__photo-remove:active {
  background: color-mix(in srgb, var(--lm-danger) 85%, #000) !important;
  border-color: color-mix(in srgb, var(--lm-danger) 85%, #000) !important;
}

.lm-dash .lm-dash__pick-remove svg,
.lm-dash .lm-dash__photo-remove svg {
  fill: currentColor;
  stroke: currentColor;
}

.lm-dash .lm-dash__pick-remove:focus-visible,
.lm-dash .lm-dash__photo-remove:focus-visible {
  outline: 2px solid var(--lm-blue);
  outline-offset: 2px;
}

@media (max-width: 782px) {
  .lm-dash .lm-dash__pick-remove,
  .lm-dash .lm-dash__photo-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lm-dash .lm-dash__pick-remove,
  .lm-dash .lm-dash__photo-remove,
  .lm-dash .lm-dash__empty-cta {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
 * Espace adhérent — survols des boutons, selects et pagination
 * ---------------------------------------------------------------------- */

/* ----- Cause racine : la règle globale d'Astra sur TOUS les <button> -----
 *
 * themes/astra/assets/css/minified/frontend.min.css impose
 *   .ast-button:focus, …, button:hover, …, input[type=submit]:hover
 *   { color: #fff; border-color: var(--ast-border-color) }
 * en (0,1,1) et sans !important. Les boutons du dashboard déclarent leur
 * couleur via une simple classe — (0,1,0) — et leurs règles :hover ne
 * définissaient que `background` : au survol, Astra gagnait et le libellé
 * passait en blanc sur fond blanc ou très clair, donc invisible.
 *
 * Filet de sécurité scopé au dashboard, (0,2,1) : il couvre les boutons qu'on
 * n'énumère pas (« Annuler » de la confirmation groupée, par exemple). Règle
 * d'or pour la suite : tout :hover de bouton du dashboard DOIT déclarer color. */

.lm-dash button:hover,
.lm-dash button:focus,
.lm-dash button:focus-visible {
  color: inherit;
}

/* Contrepartie indispensable : les boutons qui veulent LÉGITIMEMENT du blanc
 * sur fond foncé perdraient leur couleur avec le filet ci-dessus (color:
 * inherit leur donnerait l'encre du conteneur sur un fond bleu). Recensés :
 * .lm-dash__confirm-yes et .lm-dash__product-toggle.is-open (ce dernier traité
 * plus bas avec son survol propre). .lm-dash__save est déjà protégé par un
 * !important dans le CSS du plugin. */

.lm-dash .lm-dash__confirm-yes:hover,
.lm-dash .lm-dash__confirm-yes:focus-visible {
  background: var(--lm-blue-hover);
  border-color: var(--lm-blue-hover);
  color: #fff;
}

/* ----- Ticket 1 : les <select> doivent se lire comme des menus déroulants ---
 *
 * Cause réelle : adherent-dashboard.css habille au même endroit
 * `input[type=text|email|tel|password|date|search]` ET `select` avec les mêmes
 * déclarations (pilule 999px, padding 10px 18px, même bordure, texte bleu, fond
 * blanc). Les selects sont donc le sosie du champ de recherche voisin ; seule
 * une petite flèche système les distingue, discrète et variable selon l'OS.
 *
 * On reprend la main : appearance: none supprime la flèche native (sinon on en
 * aurait deux), et le chevron est redessiné. Il est fait de DEUX DÉGRADÉS et
 * non d'un SVG en data-URI : un data-URI ne peut pas lire var(--lm-blue), il
 * aurait fallu y coder la couleur en dur. Le chevron suit donc le token.
 *
 * Fond laissé blanc (le chevron suffit à différencier) : le teinter aurait
 * imposé un !important pour battre le `background-color: #fff !important` du
 * plugin, sans bénéfice de lisibilité.
 *
 * Portée : tous les selects du dashboard — familles, sous-familles, marques,
 * proposés, nombre par page, statut et période des commandes, sélecteur de
 * magasin de l'en-tête. #lm-dash porte l'id de la racine, (1,0,1) : aucune
 * ambiguïté avec la règle du plugin, quel que soit l'ordre de chargement. */

#lm-dash select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  /* Deux carrés de 6px, diagonale colorée, accolés : un chevron plein. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--lm-blue) 50%),
    linear-gradient(135deg, var(--lm-blue) 50%, transparent 50%);
  background-position:
    right 22px center,
    right 16px center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  /* Bat le `padding: 10px 18px !important` du plugin : sans ça le libellé
	   passe sous le chevron. Seul !important de ce bloc, et il est vérifié. */
  padding-right: 40px !important;
}

#lm-dash select:hover {
  border-color: var(--lm-blue);
}

#lm-dash select:focus-visible {
  border-color: var(--lm-blue);
  box-shadow: 0 0 0 3px rgba(12, 49, 131, 0.15);
  outline: none;
}

/* Un select désactivé (sous-familles avant le choix d'une famille) ne doit pas
   se présenter comme cliquable. */
#lm-dash select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Selects compacts (tableau de prix, modificateur) : même chevron, resserré. */
#lm-dash table select,
#lm-dash .lm-dash__pricing-modifier select {
  background-position:
    right 16px center,
    right 10px center;
  background-size: 5px 5px;
  padding-right: 28px !important;
}

/* ----- Ticket 2 : survols pleins sur la page produits ----- */

.lm-dash .lm-dash__product-toggle,
.lm-dash .lm-dash__bulk-btn {
  transition:
    background var(--lm-transition),
    border-color var(--lm-transition),
    color var(--lm-transition);
}

.lm-dash .lm-dash__product-toggle:hover,
.lm-dash .lm-dash__product-toggle:focus-visible {
  background: var(--lm-blue);
  border-color: var(--lm-blue);
  color: var(--lmk-yellow);
}

/* L'état ouvert est DÉJÀ bleu plein : son survol doit donc être plus sombre,
   sinon ouvert et fermé se confondent au passage de la souris. */
.lm-dash .lm-dash__product-toggle.is-open:hover,
.lm-dash .lm-dash__product-toggle.is-open:focus-visible {
  background: var(--lm-blue-deep);
  border-color: var(--lm-blue-deep);
  color: var(--lmk-yellow);
}

.lm-dash .lm-dash__bulk-btn:hover:not(:disabled),
.lm-dash .lm-dash__bulk-btn:focus-visible:not(:disabled) {
  background: var(--lm-blue);
  border-color: var(--lm-blue);
  color: var(--lmk-yellow);
}

.lm-dash .lm-dash__bulk-btn--remove:hover:not(:disabled),
.lm-dash .lm-dash__bulk-btn--remove:focus-visible:not(:disabled) {
  background: var(--lm-danger);
  border-color: var(--lm-danger);
  color: #fff;
}

/* Désactivés pendant une action groupée : aucun effet de survol. */
.lm-dash .lm-dash__bulk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lm-dash .lm-dash__bulk-btn:disabled:hover {
  background: #fff;
  border-color: var(--lm-blue);
  color: var(--lm-blue);
}

.lm-dash .lm-dash__bulk-btn--remove:disabled:hover {
  border-color: var(--lm-danger);
  color: var(--lm-danger);
}

/* Focus clavier : anneau à l'extérieur, distinct du fond plein du survol. */
.lm-dash .lm-dash__product-toggle:focus-visible,
.lm-dash .lm-dash__bulk-btn:focus-visible,
.lm-dash .lm-dash__confirm-yes:focus-visible,
.lm-dash .lm-dash__confirm-no:focus-visible {
  outline: 2px solid var(--lm-ink);
  outline-offset: 2px;
}

/* ----- Ticket 3 : pagination étendue (ellipses, extrémités, saut direct) --- */

.lm-dash .lm-pagination {
  flex-wrap: wrap;
}

.lm-dash .lm-pagination__gap {
  min-width: 20px;
  color: var(--lm-muted);
  font-weight: 700;
  text-align: center;
  user-select: none;
}

.lm-dash .lm-pagination__jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  color: var(--lm-muted);
  font-size: 14px;
}

.lm-dash .lm-pagination__jump label {
  font-weight: 600;
}

.lm-dash .lm-pagination__jump-input {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--lm-line-strong);
  border-radius: var(--lm-radius-s);
  background: #fff;
  color: var(--lm-blue);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.lm-dash .lm-pagination__jump-input:focus-visible {
  border-color: var(--lm-blue);
  box-shadow: 0 0 0 3px rgba(12, 49, 131, 0.15);
  outline: none;
}

/* Compteur de contexte sous la liste (« Produits 281–300 sur 671 »). */
.lm-dash .lm-dash__range {
  margin: 14px 0 0;
  color: var(--lm-muted);
  font-size: 14px;
  text-align: center;
}

.lm-dash .lm-dash__range:empty {
  display: none;
}

/* Le survol des numéros ne posait pas de couleur : même bug qu'ailleurs. */
.lm-dash .lm-pagination__btn:hover:not(:disabled):not(.is-current) {
  background: var(--lm-blue-tint) !important;
  color: var(--lm-blue) !important;
}

.lm-dash .lm-pagination__btn:focus-visible {
  outline: 2px solid var(--lm-blue) !important;
  outline-offset: 2px !important;
}

/* Cible tactile de 44x44 px sur mobile (les pastilles font 36px au bureau). */
@media (max-width: 782px) {
  .lm-dash .lm-pagination .lm-pagination__btn {
    min-width: 44px !important;
    height: 44px !important;
  }

  .lm-dash .lm-pagination__jump {
    flex-basis: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lm-dash .lm-dash__product-toggle,
  .lm-dash .lm-dash__bulk-btn {
    transition: none;
  }
}

.lm-dash__export:hover {
  color: var(--lmk-yellow) !important;
}

.lm-dash__password p:has(> .lm-dash__save) {
  margin-top: 20px;
}

/* =========================================================
   Bloc magasin — "Profitez des conseils de nos spécialistes"
   ========================================================= */

.lmk-branch .lmk-branch__body {
  gap: 40px 72px;
  padding-bottom: 48px;
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* Mise en page 2 colonnes (contact / horaires) — uniquement sans carte */
.lmk-branch
  .lmk-branch__inner:not(:has(.lmk-branch__map))
  .lmk-branch__summary {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(240px, 400px);
  grid-template-rows: auto auto auto 1fr;
  justify-content: space-between;
  column-gap: 40px;
  row-gap: 0;
  align-items: start;
}
.lmk-branch .lmk-branch__summary > * {
  grid-column: 1;
}
.lmk-branch .lmk-branch__summary > .lmk-branch__horaires {
  grid-column: 2;
  grid-row: 2 / 5;
}

/* Nom du magasin */
.lmk-branch .lmk-branch__name {
  grid-column: 1 / -1;
  justify-self: start;
  margin-bottom: 20px;
  padding: 6px 12px;
  border-radius: 4px;
}

/* Adresse */
.lmk-branch .lmk-branch__summary address {
  margin: 0 0 20px;
  font-size: inherit;
  line-height: 1.55;
}

/* --- Téléphone : bouton --- */
.lmk-branch .lmk-branch__summary p:has(a[href^="tel:"]) {
  margin: 0;
  font-size: 0; /* masque le libellé "Tél :" */
}
.lmk-branch .lmk-branch__summary a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 30px;
  background-color: var(--lmk-yellow);
  color: var(--lmk-blue);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.lmk-branch .lmk-branch__summary a[href^="tel:"]:hover,
.lmk-branch .lmk-branch__summary a[href^="tel:"]:focus-visible {
  background-color: var(--lmk-navy);
  color: var(--lmk-yellow);
}
.lmk-branch .lmk-branch__summary a[href^="tel:"]::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z"/></svg>')
    no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z"/></svg>')
    no-repeat center/contain;
}

/* --- Horaires --- */
.lmk-branch .lmk-branch__horaires {
  margin: 0;
}
.lmk-branch .lmk-branch__horaires li {
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  font-size: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.lmk-branch .lmk-branch__horaires li:last-child {
  border-bottom: 0;
}
.lmk-branch .lmk-branch__horaires li span:first-child {
  flex: 0 0 auto;
}
.lmk-branch .lmk-branch__horaires li span:last-child {
  text-align: right;
}

/* --- Bouton "Voir la fiche" : police agrandie --- */
.lmk-branch .lmk-branch__btn {
  font-size: 16px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .lmk-branch
    .lmk-branch__inner:not(:has(.lmk-branch__map))
    .lmk-branch__summary {
    display: block;
  }
  .lmk-branch .lmk-branch__horaires {
    margin-top: 24px;
    max-width: 400px;
  }
}
@media (max-width: 600px) {
  .lmk-branch .lmk-branch__body {
    gap: 28px;
  }
  .lmk-branch .lmk-branch__summary a[href^="tel:"] {
    display: flex;
  }
  .lmk-branch .lmk-branch__aside {
    flex: 1 1 100%;
  }
}

.lm-dash__product-detail {
  padding: 0;
  margin: 0 12px 12px;
  background: #fff;
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-radius);
  overflow: hidden;
}
.lm-dash__order-line {
  margin: 0;
  padding: 9px 14px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--lm-ink);
}
.lm-dash__order-line + .lm-dash__order-line {
  border-top: 1px solid var(--lm-line);
}
/* lignes produits = toutes sauf les 3 dernières */
.lm-dash__order-line:not(:nth-last-child(-n + 3)) {
  font-weight: 600;
}
/* bloc infos = Mode / Adresse / Contact */
.lm-dash__order-line:nth-last-child(-n + 3) {
  background: var(--lm-bg-soft);
  color: var(--lm-ink);
  border-left: 3px solid var(--lm-blue);
}
.lm-dash__order-line:nth-last-child(3) {
  border-top: 1px solid var(--lm-line-strong);
}

/* ===== Espace adhérent — Commandes : lisibilité du bloc « Détail » ===== */

/* Ligne de commande */
.lm-dash__product-row {
  gap: 12px;
  padding-left: 14px;
}
.lm-dash__order-head {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--lm-ink);
  line-height: 1.4;
}
.lm-dash__product-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--lm-ink);
}

/* Bloc dépliable */
.lm-dash__product-detail {
  margin: 0 12px 14px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-radius);
  overflow: hidden;
}

/* Toutes les lignes du détail */
.lm-dash__order-line {
  margin: 0;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--lm-ink);
  overflow-wrap: anywhere;
}
.lm-dash__order-line + .lm-dash__order-line {
  border-top: 1px solid var(--lm-line);
}

/* Lignes produits = toutes sauf les 3 dernières */
.lm-dash__order-line:not(:nth-last-child(-n + 3)) {
  position: relative;
  padding-left: 32px;
  font-weight: 600;
  background: #fff;
}
.lm-dash__order-line:not(:nth-last-child(-n + 3))::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 1.15em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lm-blue);
}

/* Mode / Adresse / Contact = les 3 dernières lignes */
.lm-dash__order-line:nth-last-child(-n + 3) {
  background: var(--lm-bg-soft);
  color: var(--lm-muted);
  font-size: 13.5px;
  border-left: 0;
}
.lm-dash__order-line:nth-last-child(3) {
  border-top: 1px solid var(--lm-line-strong);
}

/* Mobile */
@media (max-width: 600px) {
  .lm-dash__product-detail {
    margin: 0 8px 12px;
  }
  .lm-dash__order-line {
    padding: 10px 12px;
  }
  .lm-dash__order-line:not(:nth-last-child(-n + 3)) {
    padding-left: 28px;
  }
  .lm-dash__order-line:not(:nth-last-child(-n + 3))::before {
    left: 12px;
  }
}

.lm-dash__order-label {
  font-weight: 700;
  color: var(--lm-ink);
}

.lmk-marques.lmk-marques--grille{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:var(--lmk-marques-ecart,30px)!important;
}
.lmk-marques.lmk-marques--grille > .lmk-marque{
  flex:0 0 calc(
    (100% - (var(--lmk-marques-colonnes,4) - 1) * var(--lmk-marques-ecart,30px))
    / var(--lmk-marques-colonnes,4)
  )!important;
  width:auto!important;
  max-width:100%;
}

.lmk-account-nav .lmk-btn .elementor-button-wrapper{
  width:100%;
}
.lmk-account-nav .lmk-btn a.elementor-button{
  display:flex;
  width:100%;
  min-height:62px;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.lmk-account-nav .lmk-btn a.elementor-button .elementor-button-content-wrapper{
  justify-content:center;
}