/* =========================================================================
   fiche2.css — FICHE PRODUIT V2 (aperçu privé) — v6, 24/09/2026 (maquette v29 : calendrier, pastille, « i », contrastes, cases D, vignettes, options)
   =========================================================================
   Chargée UNIQUEMENT quand Loclightplanning::isFiche2Active() est vrai.
   Habille le gabarit catalog/_partials/fiche2.tpl. Les partiels du thème
   (prix, déclinaisons, remises, bouton, galerie) gardent leur balisage :
   tout est ciblé sous #main.ll2 pour passer devant custom.css / theme.css
   sans les modifier. Palette maquette : gris / jaune / blanc / noir.
   ⚠ INCRÉMENTER ?v= dans loclightplanning.php à chaque modification.
   ========================================================================= */

/* Le bandeau-titre du thème (h1 dans la mise en page) : la v2 porte son
   propre titre au-dessus de l'image. */
#product .category-cover-desc { display: none; }
/* Le fil d'Ariane du thème est positionné en absolu par rapport à ce bandeau :
   en v2 il reprend sa place, discret, au-dessus du titre. */
#product #wrapper .breadcrumb {
  position: static !important; margin: 14px 0 4px !important; padding: 0 !important;
  font-size: 11px !important; line-height: 1.4 !important; display: block !important;
}
#product #wrapper .breadcrumb li a {
  /* #6b6b67 : contraste 5,35 sur blanc (#8a8a86 = 3,47, sous le seuil de 4,5) */
  font-size: 11px !important; line-height: 1.4 !important; text-transform: none; color: #6b6b67;
}
#product #wrapper .breadcrumb li:last-child a { color: #1a1a1a; }
#product #wrapper .breadcrumb li:after { font-size: 11px; margin: 0 6px; }
/* 25/09 : ordinateur, un peu d'air au-dessus et au-dessous du fil d'Ariane. */
@media (min-width: 980px) {
  #product #wrapper .breadcrumb { margin: 24px 0 16px !important; }
}

#main.ll2 {
  --ll2-jaune: #ffc600;
  --ll2-jaune-pale: #fff6cc;
  --ll2-noir: #1a1a1a;
  --ll2-gris-1: #f4f4f2;
  --ll2-gris-2: #e6e6e3;
  --ll2-gris-4: #8a8a86;
  --ll2-gris-5: #5a5a57;
  --ll2-r: 10px;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ll2-noir);
  font-size: 14px;
  line-height: 1.5;
  padding-bottom: 30px;
}
#main.ll2 *, #main.ll2 *::before, #main.ll2 *::after { box-sizing: border-box; }

/* ---------- 1. Titre (maquette v29 : seul, souligné d'un trait) ---------- */
#main.ll2 .ll2-entete { margin: 4px 0 0; padding: 0 0 14px; border-bottom: 1px solid var(--ll2-gris-2); }
#main.ll2 .ll2-h1 {
  font-family: inherit; font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  line-height: 1.15; margin: 0; color: var(--ll2-noir);
}

/* « En bref » : la description courte au-dessus de la carte */
/* 25/09 : le nom sort du bloc gris (grand titre sur fond blanc) ; seule la
   description courte garde le fond gris (.ll2-usage). */
#main.ll2 .ll2-enbref {
  display: block; margin: 0 0 12px; background: none; padding: 0;
  font-size: 14px; line-height: 1.55; color: var(--ll2-gris-5);
}
#main.ll2 .ll2-enbref-pic {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ll2-jaune); color: var(--ll2-noir);
  display: grid; place-items: center;
}
#main.ll2 .ll2-enbref-pic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#main.ll2 .ll2-enbref-x { min-width: 0; }
/* 24/09 : le titre du bloc est le NOM DU PRODUIT, h1 de la page (plus
   l'étiquette « En bref », plus de titre en haut de page). */
#main.ll2 .ll2-enbref-t {
  display: block; font-family: inherit; font-size: 28px; font-weight: 800; letter-spacing: -.01em; text-transform: none; line-height: 1.15;
  color: var(--ll2-noir); margin: 0 0 12px; padding: 0; text-align: left;
}
/* 25/09 : cartouche « Location » (produit louable), au-dessus du nom. */
#main.ll2 .ll2-t-loc {
  display: table; margin: 0 0 9px; background: var(--ll2-jaune); color: var(--ll2-noir); border-radius: 6px;
  padding: 5px 9px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
}
@media (max-width: 640px) { #main.ll2 .ll2-enbref-t { font-size: 24px; } }
/* 25/09 : « Loué xx fois ces 12 derniers mois » (loclightavis, hook
   displayLoclightLoue). Par défaut sous le titre ; fiche2.js le pose à côté
   du cartouche « Location » quand la ligne a la place (.ll2-loue-cote). */
#main.ll2 .ll2-enbref-x { position: relative; }
#main.ll2 .ll2-loue {
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 6px; margin: -4px 0 12px;
  font-size: 12.5px; line-height: 1.2; color: var(--ll2-gris-5); white-space: nowrap;
}
#main.ll2 .ll2-loue svg { flex: none; width: 14px; height: 14px; }
#main.ll2 .ll2-loue b { color: var(--ll2-noir); font-weight: 700; }
#main.ll2 .ll2-loue-cote .ll2-loue { position: absolute; margin: 0; }
#main.ll2 .ll2-enbref-seul .ll2-enbref-t { margin-bottom: 0; }
#main.ll2 .ll2-usage { font-size: 14px; color: var(--ll2-gris-5); line-height: 1.55; background: var(--ll2-gris-1); border-radius: var(--ll2-r); padding: 12px 16px; }
#main.ll2 .ll2-usage p { margin: 0 0 6px; font-size: inherit; line-height: inherit; color: inherit; text-align: left; }
#main.ll2 .ll2-usage p:last-child { margin-bottom: 0; }
#main.ll2 .ll2-usage b, #main.ll2 .ll2-usage strong { color: var(--ll2-noir); font-weight: 600; }
/* Calendrier ouvert (html.ll2-cal-ouvert, fiche2.js) : « En bref » s'efface,
   la carte remonte à sa place. */
html.ll2-cal-ouvert #main.ll2 .ll2-enbref { display: none; }

/* ---------- 2. Image | carte ---------- */
#main.ll2 .ll2-haut {
  /* colonne de gauche = exactement vignettes + image (64 + 12 + 400) ; la
     carte prend le reste. Mesuré le 24/09 : avec deux colonnes égales, 138 px
     vides séparaient l'image de la carte ; ici l'écart est celui de la maquette. */
  display: grid; grid-template-columns: 476px minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: start; padding-top: 22px;
}

/* Galerie : partiel product-cover-thumbnails.tpl (.images-container) —
   image sur toute la largeur de la colonne (476 px), vignettes en rangée
   DESSOUS (choix du 24/09, aperçu avant/après validé). */
#main.ll2 .ll2-galerie .images-container {
  display: grid; grid-template-columns: minmax(0, 476px); gap: 10px; align-items: start; margin: 0;
}
#main.ll2 .ll2-galerie .product-cover {
  grid-column: 1; grid-row: 1; margin: 0; position: relative; background: #fff;
  border-radius: var(--ll2-r); overflow: hidden;
}
#main.ll2 .ll2-galerie .product-cover img { width: 100%; height: auto; display: block; }
#main.ll2 .ll2-galerie .js-qv-mask { grid-column: 1; grid-row: 2; overflow: visible; margin: 0; }
#main.ll2 .ll2-galerie .product-images {
  display: flex; flex-direction: row; gap: 8px; margin: 0; padding: 0 0 4px; list-style: none; position: static; overflow: visible;
}
/* 25/09 (choix B) : vignettes 4 par rangée, sur toute la largeur de l'image ;
   au-delà de 4 photos, la 4e porte « +N » (fiche2.js, .ll2-th-plus) et les
   suivantes sont masquées (.ll2-th-cache) — elles sont dans la visionneuse. */
#main.ll2 .ll2-galerie .product-images .thumb-container { display: block; margin: 0; padding: 0; width: calc((100% - 24px) / 4); flex: 0 0 auto; }
#main.ll2 .ll2-galerie .product-images .thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff;
  border: 2px solid transparent; border-radius: 8px; cursor: pointer; margin: 0; padding: 2px;
  box-shadow: none;
}
#main.ll2 .ll2-galerie .product-images .thumb-container.ll2-th-cache { display: none; }
#main.ll2 .ll2-galerie .product-images .thumb-container.ll2-th-plus { position: relative; }
#main.ll2 .ll2-galerie .product-images .thumb-container.ll2-th-plus::after {
  content: attr(data-plus); position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  background: rgba(26, 26, 26, .72); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
}
#main.ll2 .ll2-galerie .product-cover img { cursor: zoom-in; }
#main.ll2 .ll2-galerie .product-images .thumb.selected { border-color: var(--ll2-jaune); }
#main.ll2 .ll2-galerie .scroll-box-arrows { display: none; }

/* ---------- La carte ---------- */
#main.ll2 .ll2-carte.ll-resa-box,
#main.ll2 .ll2-carte.ll-vente-box {
  border: 2px solid var(--ll2-jaune) !important;
  border-radius: 14px;
  overflow: hidden;
  background: #fff !important;
  animation: none !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .06) !important;
  margin: 0 !important;
}

/* bandeau jaune */
#main.ll2 .ll2-bandeau {
  background: var(--ll2-jaune); display: flex; align-items: center; gap: 10px; padding: 10px 14px;
}
#main.ll2 .ll2-bandeau-titre {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ll2-noir);
}
#main.ll2 .ll2-we {
  margin-left: auto; position: relative; height: 26px; min-width: 176px;
  background: var(--ll2-noir); color: var(--ll2-jaune); border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
#main.ll2 .ll2-we-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s ease; white-space: nowrap; padding: 0 10px;
}
/* fondu enchaîné : l'entrant démarre 0,12 s après le sortant */
#main.ll2 .ll2-we-txt.on { opacity: 1; transition: opacity .45s ease .12s; }
@media (prefers-reduced-motion: reduce) { #main.ll2 .ll2-we-txt, #main.ll2 .ll2-we-txt.on { transition: none; } }
#main.ll2 .ll2-info { position: relative; display: inline-flex; }
/* « i » du bandeau : pictogramme au trait noir sur le jaune, sans pastille
   (maquette v29) — la pastille noire à anneau jaune était illisible. */
#main.ll2 .ll2-info-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; margin: 0;
  background: transparent; color: var(--ll2-noir); display: grid; place-items: center; cursor: pointer;
}
#main.ll2 .ll2-info-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#main.ll2 .ll2-info-btn:hover, #main.ll2 .ll2-info.ouvert .ll2-info-btn { background: rgba(0, 0, 0, .08); }
#main.ll2 .ll2-bulle {
  display: none; position: absolute; right: -6px; top: calc(100% + 10px); width: 300px; max-width: calc(100vw - 40px);
  background: var(--ll2-noir); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.5;
  padding: 12px 14px; border-radius: 10px; z-index: 40; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  text-transform: none; letter-spacing: 0; text-align: left;
}
#main.ll2 .ll2-bulle::before {
  content: ''; position: absolute; top: -6px; right: 12px; width: 12px; height: 12px;
  background: var(--ll2-noir); transform: rotate(45deg);
}
#main.ll2 .ll2-bulle b { display: block; color: var(--ll2-jaune); margin-bottom: 4px; font-weight: 800; }
#main.ll2 .ll2-info.ouvert .ll2-bulle { display: block; }
#main.ll2 .ll2-bandeau-vente .ll2-bandeau-titre { flex: 1; }

/* prix (partiel product-prices.tpl) */
#main.ll2 .ll2-carte .product-prices { margin: 0 !important; padding: 0 !important; background: #fff; }
#main.ll2 .ll2-carte .product-price {
  margin: 0 !important; padding: 18px 16px 10px !important; background: #fff; text-align: center; border: 0;
}
#main.ll2 .ll2-carte .current-price { display: flex; flex-direction: column; align-items: center; gap: 0; }
#main.ll2 .ll2-carte .current-price #ll-price-catalogue,
#main.ll2 .ll2-carte .current-price #ll-price-periode {
  font-size: 32px; font-weight: 800; color: var(--ll2-noir); line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* « TTC » en petit à côté du prix (fiche2.js enveloppe la mention) */
#main.ll2 .ll2-carte .current-price .ll2-ttc {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ll2-gris-5); margin-left: 4px; vertical-align: baseline;
}
/* « POUR UN JOUR OU UN WEEK-END » : retiré (décision maquette). Le même
   élément reçoit les dates choisies (calendar.js, classe ll-baseline-periode) :
   il devient alors la pastille de dates, jaune pâle. */
#main.ll2 .ll2-carte .current-price #ll-price-baseline { display: none !important; }
#main.ll2 .ll2-carte .current-price #ll-price-baseline.ll-baseline-periode {
  display: inline-block !important; margin: 10px 0 0; padding: 6px 14px; border-radius: 20px;
  background: var(--ll2-jaune-pale); color: var(--ll2-noir); font-size: 13px; font-weight: 700; letter-spacing: 0;
}
#main.ll2 .ll2-carte .tax-shipping-delivery-label,
#main.ll2 .ll2-carte .product-discount { display: none !important; }

/* remise PRO */
#main.ll2 .ll2-pro {
  display: flex; justify-content: center; align-items: center; gap: 6px; margin: -4px 16px 6px;
  font-size: 12px; font-weight: 700; color: var(--ll2-noir);
}
#main.ll2 .ll2-pro svg {
  width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--ll2-jaune);
  fill: none; stroke: var(--ll2-noir); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Le tiroir du calendrier ---------- */
/* Écrêté, jamais display:none (largeur toujours mesurable, cf. fiche2.js). */
#main.ll2 .ll2-tiroir {
  max-height: 0; overflow: hidden; opacity: 0;
  margin: 0 !important; padding: 0 !important; border: 0; background: #fff;
  transition: max-height .34s ease, opacity .22s ease;
}
#main.ll2 .ll2-carte.ll2-ouvert .ll2-tiroir {
  max-height: 2600px; opacity: 1; border-top: 1px solid var(--ll2-gris-2);
}
#main.ll2 .ll2-tiroir-fermer {
  display: flex; align-items: center; gap: 6px; margin: 8px auto 0; padding: 6px 10px;
  background: none; border: 0; cursor: pointer; color: var(--ll2-gris-4);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
#main.ll2 .ll2-tiroir-fermer svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
#main.ll2 .ll2-tiroir-fermer:hover { color: var(--ll2-noir); }

/* ---------- Le calendrier dans la carte (v6, 24/09 — maquette v29) ----------
   calendar.css a été dessiné pour un calendrier AUTONOME en grand format
   (police système, cases 16/10 à chiffres de 22 px, fond jaune plein,
   contour vert de 5 px, prix en pastilles vertes, légende en italique).
   Dans la carte v2 il doit parler la langue de la fiche : on redessine ici
   TOUT ce qu'il affiche, sous #main.ll2 .ll2-tiroir (calendar.css et
   calendar.js ne sont pas modifiés ; l'ancienne fiche garde son calendrier).
   Les états viennent de calendar.js : .free (ouvert), .closed (passé, fermé,
   complet), .noreturn (retour seulement), .awaiting (départ choisi, on attend
   le retour), .start / .range / .end (période), .canreturn / .dim (retours
   possibles ou non), .pill (prix total si l'on rend ce jour-là). */
#main.ll2 .ll2-tiroir .ll-cal {
  font-family: inherit; color: var(--ll2-noir); padding: 0 0 4px; margin: 0 !important;
  --y: var(--ll2-jaune); --y-soft: var(--ll2-jaune-pale); --ink: var(--ll2-noir);
  --go: var(--ll2-noir); --go-d: var(--ll2-noir); --period-edge: var(--ll2-jaune);
}
#main.ll2 .ll2-tiroir .ll-cal *, #main.ll2 .ll2-tiroir .ll-cal button { font-family: inherit; }
#main.ll2 .ll2-tiroir .ll-cal .wrap { max-width: 100%; padding: 6px 16px 0; }
#main.ll2 .ll2-tiroir .ll-cal .screen { box-shadow: none; border: 0; padding: 0; border-radius: 0; background: transparent; animation: none; }
#main.ll2 .ll2-tiroir .ll-cal .title-bar, #main.ll2 .ll2-tiroir .ll-cal .badge-promo, #main.ll2 .ll2-tiroir .ll-cal .promo-detail { display: none !important; }

/* Contrastes (24/09) : dans le calendrier, la barre d'action et l'indication
   sous le bouton, le gris moyen passe de #8a8a86 (3,47 sur blanc) à #6b6b67
   (5,35) — légende, jours de la semaine, « Replier le calendrier », bouton en
   attente. Le reste de la page garde son gris. */
#main.ll2 .ll2-tiroir, #main.ll2 .ll2-actions, #main.ll2 .ll2-hint { --ll2-gris-4: #6b6b67; }

/* consigne : une ligne discrète, pas un encadré */
#main.ll2 .ll2-tiroir .ll-cal .instr {
  background: transparent !important; color: var(--ll2-gris-5) !important; border-radius: 0;
  padding: 0; margin: 2px 0 10px; font-size: 12.5px !important; font-weight: 500; line-height: 1.45; text-align: center;
}
#main.ll2 .ll2-tiroir .ll-cal .instr b { color: var(--ll2-noir); font-weight: 700; }
#main.ll2 .ll2-tiroir .ll-cal .instr.step1 {
  background: var(--ll2-jaune-pale) !important; color: var(--ll2-noir) !important; border-radius: 8px; padding: 8px 12px;
}
#main.ll2 .ll2-tiroir .ll-cal .instr .lead { font-size: 13px !important; font-weight: 800; margin-bottom: 1px; }
#main.ll2 .ll2-tiroir .ll-cal .instr .sub { font-size: 12px !important; font-weight: 500; }
#main.ll2 .ll2-tiroir .ll-cal .instr .arrow { animation: none; }
#main.ll2 .ll2-tiroir .ll-cal .changebtn {
  background: #fff; color: var(--ll2-noir); border: 1.5px solid var(--ll2-noir); border-radius: 8px;
  padding: 7px 14px !important; font-size: 11.5px !important; font-weight: 800; letter-spacing: .04em; margin: 0 auto 10px;
}
#main.ll2 .ll2-tiroir .ll-cal .changebtn:hover { background: var(--ll2-jaune); border-color: var(--ll2-jaune); }

/* mois : flèches carrées aux deux bouts, libellé au centre */
#main.ll2 .ll2-tiroir .ll-cal .nav { justify-content: space-between; gap: 8px; margin: 0 0 8px; }
#main.ll2 .ll2-tiroir .ll-cal .nav button {
  background: #fff !important; color: var(--ll2-noir) !important; border: 1px solid var(--ll2-gris-2) !important;
  border-radius: 6px; padding: 6px 10px !important; font-size: 11.5px !important; font-weight: 700; line-height: 1.2;
}
#main.ll2 .ll2-tiroir .ll-cal .nav button:hover { border-color: var(--ll2-noir) !important; }
#main.ll2 .ll2-tiroir .ll-cal .nav .mlabel { font-size: 14px !important; font-weight: 800; min-width: 0; }

/* grille */
#main.ll2 .ll2-tiroir .ll-cal .dow, #main.ll2 .ll2-tiroir .ll-cal .grid { gap: 3px !important; }
#main.ll2 .ll2-tiroir .ll-cal .dow { margin-bottom: 2px; }
#main.ll2 .ll2-tiroir .ll-cal .dow span { font-size: 10px !important; font-weight: 700; color: var(--ll2-gris-4); letter-spacing: .06em; padding: 2px 0; }
#main.ll2 .ll2-tiroir .ll-cal .cell {
  aspect-ratio: auto !important; min-height: 42px; border: 0 !important; border-radius: 6px !important;
  background: transparent; box-shadow: none; animation: none !important; transform: none !important;
  opacity: 1; filter: none; justify-content: center;
}
#main.ll2 .ll2-tiroir .ll-cal .cell .cell-top { flex: 0 0 auto; }
#main.ll2 .ll2-tiroir .ll-cal .cell .dnum { font-size: 13px !important; font-weight: 700; color: var(--ll2-noir); line-height: 1.15; }
/* prix sous le chiffre : texte, plus de pastille verte */
#main.ll2 .ll2-tiroir .ll-cal .cell .pill {
  flex: 0 0 auto; min-height: 0 !important; background: transparent !important; color: var(--ll2-gris-5) !important;
  font-size: 10px !important; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  animation: none; padding: 1px 0 0;
}
#main.ll2 .ll2-tiroir .ll-cal .cell .pill.is-loading {
  display: block !important; width: 70%; height: 8px; margin: 3px auto 0; border-radius: 4px; padding: 0;
  background: linear-gradient(100deg, var(--ll2-gris-2) 0%, var(--ll2-gris-2) 38%, #fafaf8 50%, var(--ll2-gris-2) 62%, var(--ll2-gris-2) 100%) !important;
  background-size: 220% 100% !important; animation: llShimmer 1.15s ease-in-out infinite !important;
}
/* ouvert : voile jaune très pâle + filet doré (proposition D, validée le
   24/09 : « disponible » dans les couleurs LOCLIGHT), jaune pâle au survol */
#main.ll2 .ll2-tiroir .ll-cal .cell.free { background: #fffaeb; box-shadow: inset 0 0 0 1px #f5e7b8; cursor: pointer; }
#main.ll2 .ll2-tiroir .ll-cal .cell.free:hover { background: var(--ll2-jaune-pale); box-shadow: inset 0 0 0 1.5px var(--ll2-jaune); }
/* passé, fermé, complet : gris plat */
#main.ll2 .ll2-tiroir .ll-cal .cell.closed {
  /* hachures très légères : la légende du module parle de « cases hachurées » */
  background: repeating-linear-gradient(45deg, #f4f4f2 0 5px, #eeeeeb 5px 10px); cursor: default;
}
#main.ll2 .ll2-tiroir .ll-cal .cell.closed .dnum { color: #8f8f8a; font-weight: 600; } /* 2,9 : en retrait mais lisible (#c2c2bd = 1,6) */
/* retour seulement : coupé en diagonale, comme le décrit calendar.js —
   moitié BAS-GAUCHE ouverte (blanc : on peut y rendre), moitié HAUT-DROIT
   fermée (hachures des jours fermés : on ne peut pas en partir), donc le
   côté fermé regarde vers les jours qui suivent. */
#main.ll2 .ll2-tiroir .ll-cal .cell.noreturn {
  background:
    linear-gradient(to top right, #fffaeb 0 50%, transparent 50% 100%),
    repeating-linear-gradient(45deg, #f4f4f2 0 5px, #eeeeeb 5px 10px);
  cursor: pointer;
}
#main.ll2 .ll2-tiroir .ll-cal .cell.noreturn .dnum { color: var(--ll2-gris-5); }
/* petit « i » (note ou pack complet) */
#main.ll2 .ll2-tiroir .ll-cal .cell .ll-pinfo {
  top: 2px !important; right: 2px !important; width: 14px !important; height: 14px !important;
  font-family: Georgia, serif; font-size: 9px !important; box-shadow: none !important;
  background: var(--ll2-jaune) !important; color: var(--ll2-noir) !important;
}
#main.ll2 .ll2-tiroir .ll-cal .cell .ll-pinfo.open { background: var(--ll2-noir) !important; color: var(--ll2-jaune) !important; }

/* départ choisi, on attend le retour */
#main.ll2 .ll2-tiroir .ll-cal .awaiting .cell.start {
  background: var(--ll2-jaune) !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important;
}
#main.ll2 .ll2-tiroir .ll-cal .awaiting .cell.free.canreturn,
#main.ll2 .ll2-tiroir .ll-cal .awaiting .cell.noreturn.canreturn {
  background: #fff !important; box-shadow: inset 0 0 0 1.5px var(--ll2-jaune) !important; animation: none !important;
}
#main.ll2 .ll2-tiroir .ll-cal .awaiting .cell.canreturn .dnum { color: var(--ll2-noir) !important; }
#main.ll2 .ll2-tiroir .ll-cal .awaiting .cell.canreturn:hover { background: var(--ll2-jaune-pale) !important; }
#main.ll2 .ll2-tiroir .ll-cal .awaiting .cell.free.dim { opacity: .6 !important; filter: none !important; } /* 4,5 (0,38 = 2,4) */

/* période choisie : départ et retour en jaune plein, jours entre en jaune pâle,
   un contour jaune fin (overlay .ll-selframe de calendar.js) */
#main.ll2 .ll2-tiroir .ll-cal .cell.range { background: transparent !important; }
#main.ll2 .ll2-tiroir .ll-cal .cell.range, #main.ll2 .ll2-tiroir .ll-cal .cell.start, #main.ll2 .ll2-tiroir .ll-cal .cell.end { box-shadow: none !important; }
#main.ll2 .ll2-tiroir .ll-cal .cell.start, #main.ll2 .ll2-tiroir .ll-cal .cell.end { background: var(--ll2-jaune) !important; }
#main.ll2 .ll2-tiroir .ll-cal .grid .ll-selfill { background: var(--ll2-jaune-pale) !important; border-radius: 6px !important; }
#main.ll2 .ll2-tiroir .ll-cal .grid .ll-selborder {
  border: 2px solid var(--ll2-jaune) !important; border-radius: 7px !important; box-shadow: none !important;
}
#main.ll2 .ll2-tiroir .ll-cal .cell.start .dnum, #main.ll2 .ll2-tiroir .ll-cal .cell.end .dnum { font-weight: 800; }
#main.ll2 .ll2-tiroir .ll-cal .cell.start::after, #main.ll2 .ll2-tiroir .ll-cal .cell.end::after { display: none; }
/* bandeau « total » posé par calendar.js sous la période : noir, texte jaune */
#main.ll2 .ll2-tiroir .ll-cal .grid .ll-seltotal { background: var(--ll2-jaune-pale) !important; border-radius: 0 0 6px 6px !important; }
#main.ll2 .ll2-tiroir .ll-cal .grid .ll-seltotal .ll-seltotal-fill { background: var(--ll2-noir) !important; }
#main.ll2 .ll2-tiroir .ll-cal .grid .ll-seltotal .ll-seltotal-label {
  color: var(--ll2-jaune) !important; font-size: 11px !important; font-weight: 800; text-shadow: none !important;
}

/* légende : petite, droite, sans italique */
#main.ll2 .ll2-tiroir .ll-cal .legend {
  font-size: 11px !important; font-style: normal; color: var(--ll2-gris-4); line-height: 1.45;
  text-align: left; margin: 10px 0 6px !important;
}
#main.ll2 .ll2-tiroir .ll-cal .legend b { color: var(--ll2-gris-5); }
#main.ll2 .ll2-tiroir .ll-cal .ll-legend-swatch {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: -1px; margin-right: 2px;
  background:
    linear-gradient(to top right, #fffaeb 0 50%, transparent 50% 100%),
    repeating-linear-gradient(45deg, #efefec 0 2px, #e2e2de 2px 4px);
  box-shadow: inset 0 0 0 1px var(--ll2-gris-2);
}

/* encart « vous avez déjà une période au panier » */
#main.ll2 .ll2-tiroir .ll-cal .ll-cart-period { padding: 6px 0 4px; }
#main.ll2 .ll2-tiroir .ll-cal .ll-cp-card {
  background: var(--ll2-gris-1); border: 0; border-radius: 10px; padding: 14px 14px; margin-bottom: 10px; text-align: left;
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start;
}
#main.ll2 .ll2-tiroir .ll-cal .ll-cp-icon { width: 36px; height: 36px; margin: 0; grid-row: span 2; }
#main.ll2 .ll2-tiroir .ll-cal .ll-cp-icon svg { width: 18px; height: 18px; }
#main.ll2 .ll2-tiroir .ll-cal .ll-cp-title { font-size: 14px !important; font-weight: 800; margin: 0 0 2px; }
#main.ll2 .ll2-tiroir .ll-cal .ll-cp-text { font-size: 12.5px !important; color: var(--ll2-gris-5); line-height: 1.5; }
#main.ll2 .ll2-tiroir .ll-cal .ll-cp-indispo-simple { background: var(--ll2-gris-1); border: 0; border-radius: 10px; padding: 14px; }
#main.ll2 .ll2-tiroir .ll-cal .ll-cp-indispo-txt { font-size: 13px !important; font-weight: 800; color: var(--ll2-gris-5); letter-spacing: .04em; }
#main.ll2 .ll2-tiroir .ll-cal .ll-cp-indispo-sub { font-size: 12px !important; }

/* panneau « pourquoi ce pack est complet ce jour-là » (sous la grille) */
#main.ll2 .ll2-tiroir .ll-cal .ll-pinfo-panel { border-radius: 10px; box-shadow: none; border: 1px solid var(--ll2-gris-2); margin: 8px 0 10px; }
#main.ll2 .ll2-tiroir .ll-cal .ll-pinfo-bar { background: var(--ll2-noir); padding: 10px 12px; }
#main.ll2 .ll2-tiroir .ll-cal .ll-pinfo-h { font-size: 13px !important; font-weight: 800; color: var(--ll2-jaune); letter-spacing: .06em; }
#main.ll2 .ll2-tiroir .ll-cal .ll-pinfo-sub { font-size: 12px !important; font-weight: 500; color: #ddd; }
#main.ll2 .ll2-tiroir .ll-cal .ll-pinfo-x { width: 24px; height: 24px; font-size: 16px; }
#main.ll2 .ll2-tiroir .ll-cal .ll-pinfo-body { padding: 10px 12px; }
#main.ll2 .ll2-tiroir .ll-cal .ll-pinfo-ul li { font-size: 12.5px; padding: 4px 0; }
#main.ll2 .ll2-tiroir .ll-cal .ll-pinfo-ul li.ok { color: var(--ll2-noir); }
#main.ll2 .ll2-tiroir .ll-cal .ll-pinfo-ul li.ko { color: var(--ll2-gris-4); text-decoration: line-through; }
#main.ll2 .ll2-tiroir .ll-cal .ll-pinfo-foot { font-size: 11px; }

/* fiche2.js a pris la main (html.ll2-js) : le bouton du thème — que
   calendar.js transforme en .ll-top-btn — reste dans le DOM mais n'est plus
   affiché : la barre d'action v2 le remplace. Sans JS, il reste visible. */
html.ll2-js #main.ll2 .ll2-carte .product-add-to-cart { display: none !important; }

/* Le CTA du calendrier et le bouton « ajouter à la même période » de
   l'encart panier sont rejoués par la barre d'action v2 : masqués ici,
   toujours actionnés par fiche2.js (click() programmatique). */
html.ll2-js #main.ll2 .ll2-tiroir .ll-cal .cta,
html.ll2-js #main.ll2 .ll2-tiroir .ll-cal .ll-cp-cta,
html.ll2-js #main.ll2 .ll2-tiroir .ll-cal .ll-cp-cart-link { display: none !important; }

/* ---------- Pastille de dates (sous le prix) ---------- */
#main.ll2 .ll2-pastille,
#main.ll2 .ll2-carte .current-price #ll-price-baseline.ll-baseline-periode {
  display: inline-block; margin: 0 auto 10px; padding: 7px 14px; border-radius: 20px; border: 0;
  background: var(--ll2-jaune-pale); color: var(--ll2-noir); font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0; cursor: pointer; line-height: 1.3; text-align: center;
}
#main.ll2 .ll2-pastille[hidden] { display: none; }
/* centrée sous le prix, avec un crayon qui dit « modifier » (le clic rouvre
   le calendrier) */
#main.ll2 .ll2-pastille { display: block; width: fit-content; max-width: calc(100% - 32px); margin: 2px auto 10px; }
#main.ll2 .ll2-pastille::after,
#main.ll2 .ll2-carte .current-price #ll-price-baseline.ll-baseline-periode::after {
  content: ''; display: inline-block; width: 13px; height: 13px; margin-left: 8px; vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
#main.ll2 .ll2-pastille:hover,
#main.ll2 .ll2-carte .current-price #ll-price-baseline.ll-baseline-periode:hover { background: #ffefa8; }
#main.ll2 .ll2-carte .current-price #ll-price-baseline.ll-baseline-periode { margin: 10px 0 0; }

/* ---------- Barre d'action v2 ---------- */
#main.ll2 .ll2-actions {
  display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--ll2-gris-2);
}
#main.ll2 .ll2-actions[hidden] { display: none; }
#main.ll2 .ll2-stepper {
  display: flex; align-items: center; border: 1.5px solid var(--ll2-gris-2); border-radius: 8px; overflow: hidden; flex: none;
}
#main.ll2 .ll2-stepper[hidden] { display: none; }
#main.ll2 .ll2-stepper button {
  width: 36px; height: 100%; min-height: 48px; border: 0; background: #fff; color: var(--ll2-noir);
  font-size: 18px; font-weight: 700; cursor: pointer; padding: 0; font-family: inherit;
}
#main.ll2 .ll2-stepper button:hover { background: var(--ll2-gris-1); }
#main.ll2 .ll2-stepper span { min-width: 28px; text-align: center; font-weight: 800; font-size: 15px; }
#main.ll2 .ll2-cta {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px;
  border: 0; border-radius: 8px; padding: 10px 14px; cursor: pointer; font-family: inherit;
  background: var(--ll2-jaune); color: var(--ll2-noir); font-size: 14px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.2; text-align: center; transition: background .15s, transform .15s;
}
#main.ll2 .ll2-cta:hover { background: #ffd23d; }
#main.ll2 .ll2-cta:disabled { cursor: default; }
#main.ll2 .ll2-cta .ll2-cta-p { padding-left: 12px; border-left: 1px solid rgba(0, 0, 0, .18); white-space: nowrap; font-variant-numeric: tabular-nums; }
#main.ll2 .ll2-cta .ll2-cta-p[hidden] { display: none; }
#main.ll2 .ll2-cta.ll2-cta-attente {
  background: #fff; color: var(--ll2-gris-4); box-shadow: inset 0 0 0 1.5px var(--ll2-gris-2);
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; min-height: 44px;
}
@keyframes ll2Pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 198, 0, .55); }
  70% { box-shadow: 0 0 0 10px rgba(255, 198, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 198, 0, 0); }
}
#main.ll2 .ll2-cta.ll2-cta-pulse { animation: ll2Pulse 2.2s ease-out infinite; }
#main.ll2 .ll2-cta.ll2-cta-pulse:hover { animation: none; }
/* Vert : la seule couleur hors palette, demandée pour « dans votre panier ». */
#main.ll2 .ll2-cta.ll2-cta-vert { background: #1f9d55; color: #fff; }
#main.ll2 .ll2-cta.ll2-cta-vert:hover { background: #177a42; }
#main.ll2 .ll2-cta.ll2-cta-retirer { background: #fff; color: var(--ll2-noir); box-shadow: inset 0 0 0 1.5px var(--ll2-noir); }
#main.ll2 .ll2-cta.ll2-cta-retirer:hover { background: var(--ll2-gris-1); }
#main.ll2 .ll2-hint { text-align: center; font-size: 11.5px; color: var(--ll2-gris-4); padding: 0 14px 12px; margin-top: -6px; }
#main.ll2 .ll2-hint[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { #main.ll2 .ll2-cta.ll2-cta-pulse { animation: none; } }

/* ---------- Déclinaisons / remises / bouton (partiels du thème) ----------
   Options comme sur la maquette (24/09) : une ligne par option, libellé à
   gauche, sélecteur à segments à droite, choix actif en noir, un filet entre
   les lignes. Balisage du thème inchangé (item > ul > li > label >
   input.input-radio + span) : c'est toujours PrestaShop qui change la
   déclinaison. Les règles !important répondent à celles de ll-variants.css
   (fiche actuelle), qui reste chargée. */
#main.ll2 .ll2-carte form,
#main.ll2 .ll2-carte .product-add-to-cart,
#main.ll2 .ll2-carte .product-discounts { margin: 0 !important; padding: 0 !important; }
#main.ll2 .ll2-carte .product-variants { margin: 0 !important; padding: 2px 16px 4px !important; background: transparent !important; }
#main.ll2 .ll2-carte .product-variants > p { display: none !important; }
#main.ll2 .ll2-carte .product-variants > .product-variants-item {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important;
  gap: 8px 12px; margin: 0 !important; padding: 10px 0 !important; border-top: 1px solid var(--ll2-gris-2);
}
#main.ll2 .ll2-carte .product-variants > .product-variants-item:first-of-type { border-top: 0; }
#main.ll2 .ll2-carte .product-variants > .product-variants-item > span.control-label,
#main.ll2 .ll2-carte .product-variants > .product-variants-item > span {
  font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--ll2-noir) !important; text-align: left;
}
#main.ll2 .ll2-carte .product-variants > .product-variants-item ul {
  display: inline-flex !important; flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 0 !important; margin-left: auto !important;
  border: 1.5px solid var(--ll2-gris-2); border-radius: 999px; padding: 3px !important; margin: 0 !important; background: #fff;
}
#main.ll2 .ll2-carte .product-variants ul li label .radio-label,
#main.ll2 .ll2-carte .product-variants ul li label > span:not(.color) {
  padding: 6px 14px !important; background: transparent !important; border: 0 !important; border-radius: 999px !important;
  font-size: 13px !important; font-weight: 600 !important; color: var(--ll2-gris-5) !important; box-shadow: none !important;
  white-space: nowrap !important;
}
#main.ll2 .ll2-carte .product-variants > .product-variants-item > span.control-label { flex: 1 1 120px; min-width: 0; }
#main.ll2 .ll2-carte .product-variants ul li label:hover > span:not(.color) { color: var(--ll2-noir) !important; }
#main.ll2 .ll2-carte .product-variants ul li label input:checked + .radio-label,
#main.ll2 .ll2-carte .product-variants ul li label input:checked + span:not(.color) { background: var(--ll2-noir) !important; color: #fff !important; }
#main.ll2 .ll2-carte .product-variants ul li label input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 198, 0, .6) !important; }
/* option en liste déroulante : même ligne, champ compact */
#main.ll2 .ll2-carte .product-variants .form-control-select {
  width: auto !important; min-width: 140px; max-width: 60%; border: 1.5px solid var(--ll2-gris-2) !important; border-radius: 8px !important;
  font-size: 13px; font-weight: 600; padding: 6px 10px; background-color: #fff;
}
/* option de couleur : pastilles en ligne, sans cadre de segments */
#main.ll2 .ll2-carte .product-variants > .product-variants-item ul:has(.color) { border: 0; padding: 0 !important; gap: 6px !important; }

/* Options enrichies par ll-variants.js (classe .ll-var-cartes, posée quand
   le serveur a donné le prix de chaque combinaison) : ll-variants.css en fait
   des cartes « nom + prix » ; dans la v2 elles redeviennent les segments de
   la maquette. Le prix complet (.ll-var-prix) est masqué : fiche2.js en tire
   le SUPPLÉMENT par rapport à l'option la moins chère (.ll2-supp,
   « + 9 € »), comme sur la maquette. Constaté le 24/09 sur la fiche Trop
   Facile Pro : sans ces règles, les cartes et les segments se mélangeaient. */
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul {
  width: auto !important; align-self: auto !important; align-items: center !important; gap: 0 !important;
}
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li { flex: none !important; min-width: 0; max-width: none !important; } /* le thème bride chaque option à 130 px */
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li label {
  display: inline-flex !important; align-items: baseline; gap: 6px; width: auto !important;
  padding: 6px 14px !important; border-radius: 999px; background: transparent; color: var(--ll2-gris-5); cursor: pointer;
}
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li label:hover { color: var(--ll2-noir); }
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li label:has(input:checked) { background: var(--ll2-noir); color: #fff; }
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li label > span.radio-label,
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li label > span:not(.ll-var-prix) {
  display: inline !important; width: auto !important; padding: 0 !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  line-height: 1.2 !important; text-align: left; white-space: nowrap !important;
  color: inherit !important; font-size: 13px !important; font-weight: 600 !important;
}
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes .ll-var-n, #main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes .ll-var-u {
  display: inline !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  font-size: inherit !important; font-weight: inherit !important; color: inherit !important; line-height: inherit !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes .ll-var-u { margin-left: 3px !important; }
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li label > span.ll-var-prix { display: none !important; }
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li label > span.ll2-supp {
  font-size: 11px !important; font-weight: 700 !important; color: var(--ll2-gris-4) !important; font-variant-numeric: tabular-nums;
}
#main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li label:has(input:checked) > span.ll2-supp { color: var(--ll2-jaune) !important; }

/* Remise quantité : ni tableau ni accroche « Bon plan » dans la v2 (ll-promo.js
   déplace le tableau juste après la carte) ; fiche2.js l'annonce dans une
   cartouche sous la barre (voir « Cartouches » plus bas). */
#main.ll2 .product-discounts { display: none !important; }
#main.ll2 .ll2-qte-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
#main.ll2 .ll2-qte-col[hidden] { display: none; }
#main.ll2 .ll2-qte-col .ll2-stepper { min-height: 48px; }

/* ---------- Cartouches sous la barre (24/09) ----------
   Centrées sur l'axe de la carte (prix, remise PRO, dates).
   jaune : prix par pièce au palier (« Dès 2 pièces : 38,60 € la pièce ») ;
   noir  : palier atteint (« Remise incluse : 38,60 € la pièce ») ;
   vert  : « 7 disponibles » (vert pâle, texte vert foncé : 6,4 de contraste) ;
   noir + point jaune qui pulse : « Dernier disponible ». */
#main.ll2 .ll2-infos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  padding: 0 14px 14px; margin-top: -2px;
}
#main.ll2 .ll2-infos[hidden] { display: none; }
#main.ll2 .ll2-ch {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 5px 9px;
  font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap;
}
#main.ll2 .ll2-ch svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#main.ll2 .ll2-ch-j { background: var(--ll2-jaune); color: var(--ll2-noir); }
#main.ll2 .ll2-ch-n { background: var(--ll2-noir); color: var(--ll2-jaune); }
#main.ll2 .ll2-ch-v { background: #e3f4ea; color: #146c3b; }
#main.ll2 .ll2-ch-u { background: var(--ll2-noir); color: var(--ll2-jaune); }
#main.ll2 .ll2-pt { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ll2-jaune); flex: none; }
#main.ll2 .ll2-pt::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: ll2Pouls 1.4s ease-out infinite;
}
@keyframes ll2Pouls { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #main.ll2 .ll2-pt::after { animation: none; } }
@media (max-width: 380px) { #main.ll2 .ll2-ch { white-space: normal; } }
#main.ll2 .ll2-carte .product-minimal-quantity:empty { display: none; }

/* Le bouton jaune du bas (calendar.js le transforme en .ll-top-btn :
   « Choisir mes dates » → « Ajouter au panier » + stepper). */
#main.ll2 .ll2-carte .product-add-to-cart .add,
#main.ll2 .ll2-carte .product-add-to-cart .product-add-cart { display: block; width: 100%; margin: 0; }
#main.ll2 .ll2-carte .product-add-to-cart .add-to-cart,
#main.ll2 .ll2-carte .product-add-to-cart .ll-top-btn,
#main.ll2 .ll2-carte .product-add-to-cart button.ll-top-btn {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  width: 100% !important; max-width: 100% !important; margin: 0 !important;
  padding: 16px 14px !important; border: 0 !important; border-radius: 0 !important;
  background: var(--ll2-jaune) !important; color: var(--ll2-noir) !important;
  font-family: inherit; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  box-shadow: none !important; cursor: pointer; text-align: center !important;
}
#main.ll2 .ll2-carte .product-add-to-cart .add-to-cart:hover,
#main.ll2 .ll2-carte .product-add-to-cart .ll-top-btn:hover { background: #ffd23d !important; }
#main.ll2 .ll2-carte .ll-top-btn .ll-top-main { justify-content: center; }
#main.ll2 .ll2-carte .ll-top-btn .ll-top-arrow { display: none; }
#main.ll2 .ll2-carte .product-add-to-cart .product-quantity { margin: 0; }
#main.ll2 .ll2-carte .product-add-to-cart .ll-qty-hidden { display: none; }
/* Produit en location : la quantité se règle dans le calendrier (stepper),
   le champ natif du thème n'a rien à faire ici (calendar.js le masque aussi). */
#main.ll2.ll2-location .ll2-carte .product-add-to-cart .product-quantity { display: none !important; }

/* ---------- 3 à 6. Sections pleine largeur ---------- */
#main.ll2 .ll2-section { margin-top: 28px; }
#main.ll2 .ll2-h2 {
  font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 12px; color: var(--ll2-noir); line-height: 1.2;
}
#main.ll2 .ll2-encadre { background: var(--ll2-gris-1); border-radius: var(--ll2-r); padding: 14px 16px 12px; }
#main.ll2 .ll2-encadre .ll2-h2 { margin-bottom: 12px; }
#main.ll2 .ll2-pack-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
/* Défilement automatique (24/09, fiche2.js) : va-et-vient quand les éléments
   débordent ; l'accroche est coupée pendant le mouvement, la barre masquée. */
#main.ll2 .ll2-pack-rail.ll2-defile { scroll-snap-type: none; scrollbar-width: none; }
#main.ll2 .ll2-pack-rail.ll2-defile::-webkit-scrollbar { display: none; }
/* 25/09 : même design que « En vidéo » (cartes blanches fines, nom en gras
   dessous), sans jaune : la quantité passe en pastille gris clair. Vaut
   pour TOUS les packs, classiques et à versions (loclightproduit). */
#main.ll2 .ll2-pack-t {
  flex: 0 0 200px; background: #fff; border-radius: 10px; padding: 8px; color: inherit;
  text-decoration: none; scroll-snap-align: start;
}
#main.ll2 .ll2-pack-t:hover { color: inherit; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .07); }
#main.ll2 .ll2-pack-t img {
  width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: contain; background: #fff;
  border-radius: 6px; margin: 0 0 8px; display: block;
}
#main.ll2 .ll2-pack-n { display: block; font-weight: 700; font-size: 13.5px; line-height: 1.35; margin: 0 2px 2px; }
#main.ll2 .ll2-pack-q {
  display: inline-block; background: var(--ll2-gris-1); color: var(--ll2-noir); font-size: 11.5px; font-weight: 800;
  border-radius: 4px; padding: 1px 6px; margin-right: 6px; vertical-align: 1px;
}
#main.ll2 .ll2-pack-rail[hidden] { display: none !important; }
/* 25/09 : cartes centrées dans l'encadré. Marges automatiques plutôt que
   justify-content:center : quand la bande déborde, elles tombent à 0 et le
   début reste visible (défilement intact). */
#main.ll2 .ll2-pack-rail > .ll2-pack-t:first-child { margin-left: auto; }
#main.ll2 .ll2-pack-rail > .ll2-pack-t:last-child { margin-right: auto; }

/* Ligne « Notice incluse » (loclightblog, notice-fiche.tpl) — design A : une
   ligne noire qui ferme l'encadré « Ce pack contient » */
#main.ll2 .ll2-notice {
  margin-top: 10px; background: var(--ll2-noir); color: #fff; border-radius: 6px; padding: 9px 12px;
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
#main.ll2 .ll2-notice-seule .ll2-encadre { padding: 10px; }
#main.ll2 .ll2-notice-seule .ll2-notice { margin-top: 0; }
/* 25/09 (variante 2) : la ligne notice seule, au-dessus de « Ce pack
   contient » ; le pack suit de près (14 px), comme sur l'aperçu validé. */
#main.ll2 .ll2-notice-bloc .ll2-notice { margin-top: 0; }
#main.ll2 .ll2-notice-bloc + .ll2-section { margin-top: 14px; }
#main.ll2 .ll2-notice-pic {
  flex: none; width: 38px; height: 38px; border-radius: 6px; background: #2c2c2c; color: var(--ll2-jaune);
  display: grid; place-items: center;
}
#main.ll2 .ll2-notice-pic svg { width: 20px; height: 20px; }
/* 24/09 — bande fine : en jaune le titre court de la notice, en blanc son
   petit texte (une phrase, qui passe à la ligne s'il le faut). */
#main.ll2 .ll2-notice-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
#main.ll2 .ll2-notice-sur { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ll2-jaune); line-height: 1.3; }
#main.ll2 .ll2-notice-titre { font-weight: 700; font-size: 13.5px; white-space: normal; }
#main.ll2 .ll2-notice-txt { flex: 1; min-width: 0; font-size: 12px; color: #bbb; padding-left: 14px; border-left: 1px solid #3a3a3a; line-height: 1.35; }
#main.ll2 .ll2-notice-btns { margin-left: auto; display: flex; gap: 6px; flex: none; }
#main.ll2 .ll2-notice-b {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 8px 12px;
  font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .02em;
  background: var(--ll2-jaune); color: var(--ll2-noir) !important; white-space: nowrap; text-decoration: none !important;
}
#main.ll2 .ll2-notice-b:hover { background: #ffd23d; }
#main.ll2 .ll2-notice-b-o { background: transparent; border: 1.5px solid var(--ll2-jaune); color: var(--ll2-jaune) !important; padding: 6px 10px; }
#main.ll2 .ll2-notice-b-o:hover { background: rgba(255, 198, 0, .12); }
#main.ll2 .ll2-notice-b svg { width: 12px; height: 12px; }
@media (max-width: 1000px) { #main.ll2 .ll2-notice-txt { display: none; } }
@media (max-width: 640px) {
  #main.ll2 .ll2-notice { flex-wrap: wrap; gap: 10px 12px; }
  #main.ll2 .ll2-notice-titre { white-space: normal; }
  #main.ll2 .ll2-notice-t { flex: 1 1 0; }   /* reste à côté de l'icône */
  #main.ll2 .ll2-notice-btns { margin-left: 0; width: 100%; }
  #main.ll2 .ll2-notice-b { flex: 1; justify-content: center; }
}

/* L'essentiel : quatre tuiles (loclightproduit, essentiel.tpl) */
#main.ll2 .ll2-ess { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#main.ll2 .ll2-ess-t {
  background: var(--ll2-gris-1); border-radius: var(--ll2-r); padding: 12px 14px;
  display: flex; gap: 10px; align-items: center; min-width: 0;
}
#main.ll2 .ll2-ess-i { flex: none; width: 24px; height: 24px; color: var(--ll2-noir); }
#main.ll2 .ll2-ess-i svg { width: 24px; height: 24px; }
#main.ll2 .ll2-ess-x { min-width: 0; }
#main.ll2 .ll2-ess-x b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: var(--ll2-noir); line-height: 1.2; }
#main.ll2 .ll2-ess-x span { font-size: 11px; color: var(--ll2-gris-5); }
@media (max-width: 979px) {
  #main.ll2 .ll2-ess { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main.ll2 .ll2-ess-t { padding: 10px 12px; }
  #main.ll2 .ll2-ess-x b { font-size: 13px; }
}

/* L'essentiel SOUS LA CARTE (choix A du 24/09) : encadré blanc, 2 × 2,
   icône dans une pastille jaune, libellé AU-DESSUS du chiffre (« Capacité
   conseillée » puis « 50 – 80 pers. », demandé le 24/09 ; ordre inversé en
   CSS, le module garde son balisage). Masqué calendrier ouvert, comme
   « En bref ». 25/09 : sur ordinateur, fiche2.js décide une fois au
   chargement s'il reste ici ou part en pleine largeur (#ll2-ess-large). */
#main.ll2 .ll2-droite { position: relative; }
#main.ll2 .ll2-droite .ll2-essentiel {
  margin: 14px 0 0; border: 1px solid var(--ll2-gris-2); border-radius: var(--ll2-r); padding: 14px 16px; background: #fff;
}
#main.ll2 .ll2-droite .ll2-essentiel .ll2-h2 {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ll2-noir); margin: 0 0 12px; line-height: 1.3;
}
#main.ll2 .ll2-droite .ll2-ess { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
#main.ll2 .ll2-droite .ll2-ess-t { background: none; padding: 0; border-radius: 0; }
#main.ll2 .ll2-droite .ll2-ess-i {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ll2-jaune); color: var(--ll2-noir);
  display: flex; align-items: center; justify-content: center;
}
#main.ll2 .ll2-droite .ll2-ess-i svg { width: 18px; height: 18px; }
#main.ll2 .ll2-droite .ll2-ess-x { display: flex; flex-direction: column-reverse; }
#main.ll2 .ll2-droite .ll2-ess-x span { display: block; font-size: 11px; line-height: 1.3; color: var(--ll2-gris-5); margin-bottom: 2px; }
#main.ll2 .ll2-droite .ll2-ess-x b { font-size: 15px; line-height: 1.25; }
html.ll2-cal-ouvert #main.ll2 .ll2-droite .ll2-essentiel { display: none; }
/* 25/09 : sur ordinateur, invisible (mais à sa place, mesurable) jusqu'à ce
   que fiche2.js ait choisi où il va : pas de clignotement. */
@media (min-width: 980px) {
  #main.ll2 .ll2-droite .ll2-essentiel:not(.ll2-ess-pret) { visibility: hidden; }
}
/* 25/09 : « L'essentiel » en pleine largeur, sous les images (fiche2.js le
   déplace ici quand il ne tient pas sous la carte) : même encadré blanc,
   quatre pictos sur une ligne ; 2 × 2 sur téléphone. */
#main.ll2 .ll2-ess-large:empty { display: none; }
#main.ll2 .ll2-ess-large .ll2-essentiel {
  margin: 20px 0 0; border: 1px solid var(--ll2-gris-2); border-radius: var(--ll2-r); padding: 14px 16px; background: #fff;
}
#main.ll2 .ll2-ess-large .ll2-essentiel .ll2-h2 {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ll2-noir); margin: 0 0 12px; line-height: 1.3;
}
#main.ll2 .ll2-ess-large .ll2-ess { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
#main.ll2 .ll2-ess-large .ll2-ess-t { background: none; padding: 0; border-radius: 0; }
#main.ll2 .ll2-ess-large .ll2-ess-i {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ll2-jaune); color: var(--ll2-noir);
  display: flex; align-items: center; justify-content: center;
}
#main.ll2 .ll2-ess-large .ll2-ess-i svg { width: 18px; height: 18px; }
#main.ll2 .ll2-ess-large .ll2-ess-x { display: flex; flex-direction: column-reverse; }
#main.ll2 .ll2-ess-large .ll2-ess-x span { display: block; font-size: 11px; line-height: 1.3; color: var(--ll2-gris-5); margin-bottom: 2px; }
#main.ll2 .ll2-ess-large .ll2-ess-x b { font-size: 15px; line-height: 1.25; }
#main.ll2 .ll2-ess-large:not(:empty) + .ll2-section { margin-top: 20px; }
@media (max-width: 979px) {
  #main.ll2 .ll2-ess-large .ll2-ess { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #main.ll2 .ll2-ess-large .ll2-ess-i { width: 30px; height: 30px; }
  #main.ll2 .ll2-ess-large .ll2-ess-i svg { width: 16px; height: 16px; }
  #main.ll2 .ll2-ess-large .ll2-ess-x b { font-size: 14px; }
}
@media (max-width: 979px) {
  #main.ll2 .ll2-droite .ll2-ess { gap: 12px 12px; }
  #main.ll2 .ll2-droite .ll2-ess-i { width: 30px; height: 30px; }
  #main.ll2 .ll2-droite .ll2-ess-i svg { width: 16px; height: 16px; }
  #main.ll2 .ll2-droite .ll2-ess-x b { font-size: 14px; }
}

/* « Ce pack contient » sur téléphone (24/09) : trois éléments tiennent sur la
   largeur sans défiler ; au-delà, le défilement automatique prend le relais. */
@media (max-width: 640px) {
  #main.ll2 .ll2-pack-rail { gap: 8px; }
  #main.ll2 .ll2-pack .ll2-pack-t { flex: 0 0 calc((100% - 16px) / 3); padding: 6px; }
  #main.ll2 .ll2-pack .ll2-pack-t img { margin-bottom: 6px; }
  #main.ll2 .ll2-pack .ll2-pack-n { font-size: 11.5px; margin: 0 1px 1px; }
  #main.ll2 .ll2-pack .ll2-pack-q { font-size: 10px; padding: 1px 5px; margin-right: 4px; }
}

/* description longue : un seul bloc */
#main.ll2 .ll2-bloc-desc {
  background: #fff; border: 1px solid var(--ll2-gris-2); border-radius: var(--ll2-r);
  padding: 18px 22px 20px; font-size: 14px; line-height: 1.6; color: var(--ll2-gris-5);
}
#main.ll2 .ll2-bloc-desc h2, #main.ll2 .ll2-bloc-desc h3, #main.ll2 .ll2-bloc-desc h4 {
  font-family: inherit; font-size: 15px; font-weight: 800; color: var(--ll2-noir); margin: 18px 0 6px; line-height: 1.3; text-transform: none; letter-spacing: .01em;
}
#main.ll2 .ll2-bloc-desc > :first-child { margin-top: 0; }
#main.ll2 .ll2-bloc-desc p, #main.ll2 .ll2-bloc-desc li, #main.ll2 .ll2-bloc-desc span {
  font-family: inherit !important; font-size: 14px !important; line-height: 1.6 !important; text-align: left !important;
}
#main.ll2 .ll2-bloc-desc p { margin: 0 0 8px; }
#main.ll2 .ll2-bloc-desc ul { list-style: disc; }
#main.ll2 .ll2-bloc-desc p:last-child { margin-bottom: 0; }
#main.ll2 .ll2-bloc-desc ul, #main.ll2 .ll2-bloc-desc ol { margin: 0 0 8px; padding-left: 18px; }
#main.ll2 .ll2-bloc-desc li { margin-bottom: 4px; }
#main.ll2 .ll2-bloc-desc img, #main.ll2 .ll2-bloc-desc iframe { max-width: 100%; height: auto; }
/* 25/09 — vidéo YouTube / Vimeo collée dans une description ordinaire
   (ex. Mini Derby : <iframe style="float:left">). « height: auto » la
   ramenait à 150 px et le flottant la faisait sortir du cadre blanc, par-
   dessus le pied de page. Elle prend maintenant sa place : pleine largeur
   du cadre (720 px au plus), centrée, au format 16/9. Le cadre englobe
   aussi tout autre élément flottant. */
#main.ll2 .ll2-bloc-desc iframe[src*="youtube"],
#main.ll2 .ll2-bloc-desc iframe[src*="youtu.be"],
#main.ll2 .ll2-bloc-desc iframe[src*="vimeo"] {
  float: none !important; display: block; width: 100% !important; max-width: 720px; height: auto !important;
  aspect-ratio: 16 / 9; margin: 14px auto 0; border: 0; border-radius: 10px;
}
#main.ll2 .ll2-bloc-desc::after { content: ""; display: block; clear: both; }
#main.ll2 .ll2-bloc-desc b, #main.ll2 .ll2-bloc-desc strong { color: var(--ll2-noir); }

/* description Creative Elements : rien n'est retouché, seulement bornée à
   la largeur pour laquelle elle a été dessinée (fiche actuelle : 590 px). */
/* Description Creative Elements (24/09) : SANS cadre, bord à bord sur toute
   la largeur de la page (les fonds des sections CE vont jusqu'aux bords, leur
   contenu reste dans la largeur réglée dans CE). Le cadre blanc reste pour
   une description ordinaire (.ll2-bloc-desc). */
#main.ll2 .ll2-desc-ce { background: none; border: 0; border-radius: 0; padding: 0; }
/* text-align: center : ce que faisait le thème sur la fiche actuelle
   (.product-desc-block) ; les titres et séparateurs CE sans alignement
   propre en héritaient — sans lui, ils partaient à gauche (24/09). */
#main.ll2 .ll2-desc-ce-in { max-width: none; margin: 0; text-align: center; }
/* Largeur de CONTENU commune à toutes les sections (800, 900 ou 1 138 px
   selon les réglages de chaque section) : les titres, textes et séparateurs
   s'alignent d'une section à l'autre ; les fonds restent bord à bord. */
#main.ll2 .ll2-desc-ce .elementor-section.elementor-section-boxed > .elementor-container { max-width: 900px; }
/* Vidéo CE : le cadre a le bon format (16/9) mais l'iframe restait à 150 px
   de haut (hauteur 100 % sans hauteur de référence) : elle le remplit. */
#main.ll2 .ll2-desc-ce .elementor-widget-video .elementor-wrapper { position: relative; }
#main.ll2 .ll2-desc-ce .elementor-widget-video .elementor-wrapper iframe,
#main.ll2 .ll2-desc-ce .elementor-widget-video .elementor-wrapper video { position: absolute; inset: 0; width: 100%; height: 100%; }

#main.ll2 .ll2-comp:empty, #main.ll2 .ll2-avis:empty { display: none; }

/* ---------- 5. Compléments : le bloc cross-sell (.llxs) dans la charte ----------
   Le bloc garde son balisage et ses scripts (ajout en un clic, dates du
   panier) ; seul l'habillage change : plus de pavé jaune à gauche ni de
   carrousel, des cartes en grille sur ordinateur, une liste sur téléphone.
   Le défilement automatique ne démarre que si le rail déborde : en grille,
   il ne déborde pas, donc il ne démarre pas. */
#main.ll2 .llxs {
  display: block; margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
#main.ll2 .llxs-h {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px;
  background: transparent; padding: 0 0 12px; flex: none;
}
#main.ll2 .llxs-t { font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#main.ll2 .llxs-st { font-size: 12px; color: var(--ll2-gris-4); }
#main.ll2 .llxs-dispo { display: none; }
/* 25/09 : une seule ligne qui défile toute seule, comme « Ce pack contient »
   (fiche2.js, même mouvement). 5 cartes visibles sur ordinateur. Le
   carrousel propre au module (translation animée) est neutralisé ici : c'est
   la bande elle-même qui défile, et elle se pousse aussi au doigt. */
#main.ll2 .llxs-rail { padding: 0 0 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#main.ll2 .llxs-rail::-webkit-scrollbar { display: none; }
#main.ll2 .llxs-rail .llxs-cartes { transform: none !important; }
#main.ll2 .llxs-cartes { display: flex; gap: 10px; width: auto; margin: 0; }
#main.ll2 .llxs-cartes > .llxs-c { flex: 0 0 calc((100% - 40px) / 5); }
#main.ll2 .llxs-c {
  flex: none; display: flex; flex-direction: column; gap: 7px; min-width: 0;
  border: 1px solid var(--ll2-gris-2); border-radius: var(--ll2-r); padding: 10px; background: #fff;
}
/* 25/09 : l'image REMPLIT son cadre (avant : 80 % au centre d'un fond gris,
   d'où un liseré gris autour de photos déjà sur fond blanc). */
#main.ll2 .llxs-img {
  position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; border: 0; border-radius: 6px; background: #fff;
  display: block; overflow: hidden;
}
#main.ll2 .llxs-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
#main.ll2 .llxs-img .llxs-noimg { display: block; width: 100%; height: 100%; background: var(--ll2-gris-1); }
#main.ll2 .llxs-duo {
  position: absolute; top: 8px; left: 8px; right: auto; bottom: auto; width: auto; height: auto; display: inline-block;
  line-height: 1.2; transform: none; background: var(--ll2-noir); color: var(--ll2-jaune);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px;
}
#main.ll2 .llxs-n { font-size: 12.5px; font-weight: 700; line-height: 1.3; min-height: 2.6em; }
#main.ll2 .llxs-p { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
#main.ll2 .llxs-p span { font-size: 11px; color: var(--ll2-gris-4); font-weight: 500; }
#main.ll2 .llxs-b {
  width: 100%; margin-top: 4px; background: #fff; color: var(--ll2-noir) !important; border: 1.5px solid var(--ll2-noir);
  border-radius: 20px; padding: 7px 8px; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; white-space: nowrap;
}
#main.ll2 .llxs-b:hover { background: var(--ll2-jaune); border-color: var(--ll2-jaune); }
#main.ll2 .llxs-b-voir { background: #fff; border-color: var(--ll2-gris-2); color: var(--ll2-gris-5) !important; }
#main.ll2 .llxs-b.llxs-ok { background: #1f9d55; border-color: #1f9d55; color: #fff !important; }
@media (max-width: 1100px) {
  #main.ll2 .llxs-cartes > .llxs-c { flex-basis: calc((100% - 30px) / 4); }
}
@media (max-width: 979px) {
  #main.ll2 .llxs-cartes > .llxs-c { flex-basis: calc((100% - 20px) / 3); }
}
/* téléphone (25/09) : la même bande, deux cartes visibles, défilement */
@media (max-width: 640px) {
  #main.ll2 .llxs-cartes { gap: 8px; }
  #main.ll2 .llxs-cartes > .llxs-c { flex-basis: calc((100% - 8px) / 2); padding: 8px; gap: 6px; }
  #main.ll2 .llxs-duo { font-size: 9px; top: 6px; left: 6px; padding: 2px 5px; }
  #main.ll2 .llxs-n { font-size: 12px; }
  #main.ll2 .llxs-p { font-size: 13px; }
  #main.ll2 .llxs-p span { font-size: 10px; }
  #main.ll2 .llxs-b { padding: 6px 6px; font-size: 11px; }
}

/* ---------- Mobile / tablette ---------- */
@media (max-width: 979px) {
  #main.ll2 .ll2-haut { grid-template-columns: 1fr; gap: 18px; padding-top: 14px; }
  #main.ll2 .ll2-h1 { font-size: 20px; }
  #main.ll2 .ll2-galerie .images-container { grid-template-columns: 1fr; gap: 10px; }
  #main.ll2 .ll2-galerie .product-cover { grid-column: 1; grid-row: 1; }
  #main.ll2 .ll2-galerie .js-qv-mask { grid-column: 1; grid-row: 2; }
  #main.ll2 .ll2-galerie .product-images { flex-direction: row; overflow: visible; padding-bottom: 4px; }
  #main.ll2 .ll2-bloc-desc { padding: 14px 16px 16px; }
  #main.ll2 .ll2-we { min-width: 0; flex: 1; }
  #main.ll2 .ll2-bulle { right: -40px; }
}
@media (max-width: 480px) {
  #main.ll2 .ll2-actions { padding: 10px 10px 12px; gap: 6px; }
  #main.ll2 .ll2-cta { font-size: 12px; padding: 10px 8px; gap: 8px; white-space: nowrap; }
  #main.ll2 .ll2-stepper button { width: 30px; }
  #main.ll2 .ll2-bandeau { padding: 9px 12px; gap: 8px; }
  #main.ll2 .ll2-bandeau-titre { font-size: 11px; letter-spacing: .1em; }
  #main.ll2 .ll2-we { font-size: 10px; letter-spacing: .04em; }
  #main.ll2 .ll2-carte .current-price #ll-price-catalogue,
  #main.ll2 .ll2-carte .current-price #ll-price-periode { font-size: 28px; }
  #main.ll2 .ll2-pack-t { flex-basis: 160px; }
  #main.ll2 .ll2-pastille { font-size: 12px; padding: 6px 12px; }
  /* options aux libellés longs (« Machine à brouillard ») : les segments se
     partagent la largeur et passent à la ligne à l'intérieur */
  #main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul { width: 100% !important; border-radius: 14px !important; }
  #main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li { flex: 1 1 0 !important; }
  #main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li label { width: 100% !important; justify-content: center; flex-wrap: wrap; column-gap: 5px; row-gap: 0; border-radius: 11px !important; text-align: center; padding: 7px 8px !important; }
  #main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li label > span.radio-label, #main.ll2 .ll2-carte .product-variants > .product-variants-item.ll-var-cartes ul li label > span:not(.ll-var-prix) { white-space: normal !important; text-align: center; }
  #main.ll2 .ll2-carte .product-variants ul li label .radio-label, #main.ll2 .ll2-carte .product-variants ul li label > span:not(.color) { padding: 6px 11px !important; font-size: 12.5px !important; }
}

/* ÉTATS « EN COURS » (24/09, proposition A) : ajout et mise à jour du panier.
   Bouton jaune, libellé en capitales comme les autres, chariot animé (un
   colis tombe dedans). Le chariot est inséré par fiche2.js. */
#main.ll2 .ll2-cta .ll2-cta-ic { display: none; }
#main.ll2 .ll2-cta.ll2-cta-charge { background: var(--ll2-jaune); color: var(--ll2-noir); cursor: progress; gap: 10px; white-space: nowrap; }
#main.ll2 .ll2-cta.ll2-cta-charge:hover { background: var(--ll2-jaune); }
#main.ll2 .ll2-cta.ll2-cta-charge .ll2-cta-ic { display: inline-flex; flex: none; }
#main.ll2 .ll2-cta-ic svg { width: 22px; height: 22px; overflow: visible; display: block; }
#main.ll2 .ll2-cta-ic .ll2-ic-colis { animation: ll2Colis 1.3s cubic-bezier(.5, 0, .8, .4) infinite; }
#main.ll2 .ll2-cta-ic .ll2-ic-corps { animation: ll2Chariot 1.3s ease-out infinite; }
@keyframes ll2Colis {
  0% { transform: translateY(-12px); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translateY(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}
@keyframes ll2Chariot { 0%, 50% { transform: translateY(0); } 60% { transform: translateY(1.6px); } 75%, 100% { transform: translateY(0); } }
@media (max-width: 480px) { #main.ll2 .ll2-cta-ic svg { width: 19px; height: 19px; } }
@media (prefers-reduced-motion: reduce) {
  #main.ll2 .ll2-cta-ic .ll2-ic-colis, #main.ll2 .ll2-cta-ic .ll2-ic-corps { animation: none; }
}

/* ---------- Panier daté, tiroir ouvert : la question (25/09, choix C) ----------
   fiche2.js pose .ll2-q dans l'encart de calendar.js et la classe ll2-q-actif
   sur la carte. On masque alors l'encart d'origine, le lien « Changer les
   dates », « Voir mon panier », « Replier le calendrier » et la pastille de
   dates sous le prix (elle est répétée dans la question). */
#main.ll2 .ll2-q { display: none; }
#main.ll2 .ll2-carte.ll2-q-actif .ll2-q { display: block; text-align: center; padding: 16px 18px 20px; color: var(--ll2-noir); }
#main.ll2 .ll2-carte.ll2-q-actif .ll2-tiroir-fermer,
#main.ll2 .ll2-carte.ll2-q-actif #llCartPeriod .ll-cp-card,
#main.ll2 .ll2-carte.ll2-q-actif .ll-chg-hote,
#main.ll2 .ll2-carte.ll2-q-actif #ll-chg,
#main.ll2 .ll2-carte.ll2-q-actif #llCpCartLink,
#main.ll2 .ll2-carte.ll2-q-actif .current-price #ll-price-baseline.ll-baseline-periode { display: none !important; }
#main.ll2 .ll2-q-txt { font-size: 14px; line-height: 1.5; color: var(--ll2-gris-5); margin: 0 0 10px; text-align: center; }
#main.ll2 .ll2-q-pil {
  display: inline-block; background: var(--ll2-jaune-pale); color: var(--ll2-noir); border-radius: 20px;
  padding: 8px 16px; font-size: 14px; font-weight: 800; line-height: 1.35;
}
#main.ll2 .ll2-q-q { font-size: 15px; font-weight: 800; color: var(--ll2-noir); margin: 16px 0 0; text-align: center; }
#main.ll2 .ll2-q-bts { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
#main.ll2 .ll2-q-bt {
  flex: 1 1 0; max-width: 210px; border: 0; border-radius: 10px; padding: 13px 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
#main.ll2 .ll2-q-non { background: var(--ll2-jaune); color: var(--ll2-noir); }
#main.ll2 .ll2-q-non:hover { background: #ffd23d; }
#main.ll2 .ll2-q-oui { background: #1f9d55; color: #fff; }
#main.ll2 .ll2-q-oui:hover { background: #177a42; }

/* ---------- Visionneuse photos (25/09) : même style que la vidéo sur place ---------- */
.ll2-visio {
  position: fixed; inset: 0; z-index: 100000; background: rgba(10, 10, 10, .9);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; animation: ll2VisioIn .18s ease-out;
}
.ll2-visio-box { width: min(760px, 100%); display: flex; flex-direction: column; gap: 12px; }
.ll2-visio-top { display: flex; align-items: center; gap: 12px; color: #fff; width: min(62vh, 100%); margin: 0 auto; }
.ll2-visio-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ll2-visio-sur { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffc600; }
.ll2-visio-nom { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll2-visio-x {
  margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  background: #ffc600; color: #1a1a1a; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ll2-visio-x:hover { background: #ffd23d; }
.ll2-visio-x svg { width: 18px; height: 18px; }
.ll2-visio-scene {
  position: relative; background: #fff; border-radius: 12px; overflow: hidden;
  width: min(62vh, 100%); aspect-ratio: 1 / 1; margin: 0 auto; touch-action: pan-y;
}
.ll2-visio-img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.ll2-visio-fl {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(26, 26, 26, .85); color: #ffc600; cursor: pointer; font: 800 24px/1 'Montserrat', system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.ll2-visio-fl:hover { background: #1a1a1a; }
.ll2-visio-g { left: 12px; }
.ll2-visio-d { right: 12px; }
.ll2-visio-cpt {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(26, 26, 26, .85);
  color: #fff; font-size: 12px; font-weight: 700; border-radius: 20px; padding: 4px 12px;
}
.ll2-visio-rang { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.ll2-visio-rang button { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: #fff; cursor: pointer; opacity: .6; }
.ll2-visio-rang button.on { border-color: #ffc600; opacity: 1; }
.ll2-visio-rang img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 6px; }
html.ll2-visio-ouvert, html.ll2-visio-ouvert body { overflow: hidden; }
@keyframes ll2VisioIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .ll2-visio { padding: 0; }
  .ll2-visio-top { padding: 0 12px; width: 100%; }
  .ll2-visio-scene { border-radius: 0; width: 100%; }
  .ll2-visio-rang { justify-content: flex-start; padding: 2px 12px; }
  .ll2-visio-rang button { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) { .ll2-visio { animation: none; } }

/* ---------- En vidéo (25/09) : jusqu'à 4 cartes sous « En détail » ---------- */
#main.ll2 .ll2-vc-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#main.ll2 .ll2-vc { display: block; color: var(--ll2-noir); text-decoration: none; cursor: pointer; }
#main.ll2 .ll2-vc-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111; }
#main.ll2 .ll2-vc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#main.ll2 .ll2-vc-img::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); z-index: 1; transition: background .15s; }
#main.ll2 .ll2-vc:hover .ll2-vc-img::before { background: rgba(0, 0, 0, .12); }
#main.ll2 .ll2-vc-img b {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; z-index: 2;
  background: var(--ll2-jaune); display: flex; align-items: center; justify-content: center; transition: transform .15s;
}
#main.ll2 .ll2-vc:hover .ll2-vc-img b { transform: scale(1.08); }
#main.ll2 .ll2-vc-img svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--ll2-noir); }
#main.ll2 .ll2-vc-t { display: block; margin: 8px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
/* 25/09 (choix B) : encadré gris comme « Ce pack contient », titre dedans,
   chaque vidéo sur une carte blanche. */
/* 25/09 : « Le mot du loueur » (loclightavis, product_loueur.tpl) — encadré
   gris, texte dans une carte blanche à filet jaune, signature LOCLIGHT. */
#main.ll2 .ll2-loueur .ll2-encadre { padding: 14px 16px 16px; }
#main.ll2 .ll2-loueur-in { background: #fff; border-radius: 10px; border-left: 4px solid var(--ll2-jaune); padding: 16px 18px; }
#main.ll2 .ll2-loueur-txt { font-size: 14px; line-height: 1.6; color: var(--ll2-noir); }
#main.ll2 .ll2-loueur-txt p { margin: 0 0 10px; font-size: inherit; line-height: inherit; color: inherit; }
#main.ll2 .ll2-loueur-txt p:last-child { margin-bottom: 0; }
#main.ll2 .ll2-loueur-txt ul, #main.ll2 .ll2-loueur-txt ol { margin: 0 0 10px; padding-left: 20px; }
#main.ll2 .ll2-loueur-txt ul li { list-style: disc; }
#main.ll2 .ll2-loueur-txt ol li { list-style: decimal; }
#main.ll2 .ll2-loueur-txt li { margin: 0 0 3px; font-size: inherit; line-height: 1.5; color: inherit; }
#main.ll2 .ll2-loueur-txt h2, #main.ll2 .ll2-loueur-txt h3, #main.ll2 .ll2-loueur-txt h4 { font-size: 15px; font-weight: 700; margin: 12px 0 6px; text-transform: none; letter-spacing: 0; }
#main.ll2 .ll2-loueur-txt a { color: var(--ll2-noir); text-decoration: underline; }
#main.ll2 .ll2-loueur-txt img { max-width: 100%; height: auto; }
#main.ll2 .ll2-loueur-sign { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12.5px; line-height: 1.35; color: var(--ll2-gris-5); }
#main.ll2 .ll2-loueur-sign b { display: block; font-size: 13px; color: var(--ll2-noir); }
#main.ll2 .ll2-loueur-pic {
  flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ll2-noir); color: var(--ll2-jaune);
  display: grid; place-items: center; font-weight: 900; font-size: 13px;
}
@media (max-width: 640px) {
  #main.ll2 .ll2-loueur .ll2-encadre { padding: 12px; }
  #main.ll2 .ll2-loueur-in { padding: 14px; }
}
/* 25/09 : « Avis clients » (loclightavis, product_reviews.tpl, branche v2).
   Encadré gris ; à gauche la note, la répartition et le compteur ; à droite
   les avis en cartes blanches, 3 par rangée. Ordinateur : 6 visibles ;
   téléphone : 2 ; le reste derrière « Voir tous les avis ». */
#main.ll2 .ll2-av { background: var(--ll2-gris-1); border-radius: var(--ll2-r); padding: 14px 16px 12px; }
#main.ll2 .ll2-av .ll2-h2 { margin-bottom: 12px; }
#main.ll2 .ll2-av-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#main.ll2 .ll2-av-g { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: start; }
#main.ll2 .ll2-av-st { display: inline-flex; gap: 1px; vertical-align: -2px; }
#main.ll2 .ll2-av-e { width: 14px; height: 14px; }
#main.ll2 .ll2-av-st-lg .ll2-av-e { width: 20px; height: 20px; }
#main.ll2 .ll2-av-e.on { fill: var(--ll2-jaune); }
#main.ll2 .ll2-av-e.off { fill: var(--ll2-gris-2); }
#main.ll2 .ll2-av-e.demi { fill: url(#ll2-av-demi); }
#main.ll2 .ll2-av-synth { background: #fff; border-radius: 10px; padding: 16px; }
#main.ll2 .ll2-av-big { font-size: 40px; font-weight: 800; line-height: 1; color: var(--ll2-noir); margin-bottom: 6px; }
#main.ll2 .ll2-av-big small { font-size: 16px; font-weight: 700; color: var(--ll2-gris-4); }
#main.ll2 .ll2-av-nb { font-size: 12.5px; color: var(--ll2-gris-5); margin: 8px 0 10px; }
#main.ll2 .ll2-av-barre { display: grid; grid-template-columns: 12px 1fr 22px; gap: 6px; align-items: center; margin: 3px 0; font-size: 11.5px; line-height: 1.2; color: var(--ll2-gris-5); }
#main.ll2 .ll2-av-barre span:last-child { text-align: right; }
#main.ll2 .ll2-av-barre i { display: block; height: 6px; border-radius: 3px; background: var(--ll2-gris-2); overflow: hidden; }
#main.ll2 .ll2-av-barre s { display: block; height: 100%; background: var(--ll2-jaune); text-decoration: none; }
#main.ll2 .ll2-av-loue { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ll2-gris-2); font-size: 12.5px; line-height: 1.4; color: var(--ll2-gris-5); }
#main.ll2 .ll2-av-loue b { color: var(--ll2-noir); }
#main.ll2 .ll2-av-loue svg, #main.ll2 .ll2-av-verif svg, #main.ll2 .ll2-av-chev { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
#main.ll2 .ll2-av-loue svg { width: 15px; height: 15px; stroke-width: 2.2; margin-top: 1px; }
#main.ll2 .ll2-av-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#main.ll2 .ll2-av-c { background: #fff; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#main.ll2 .ll2-av-ch { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#main.ll2 .ll2-av-verif { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ll2-noir); background: var(--ll2-gris-1); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
#main.ll2 .ll2-av-verif svg { width: 11px; height: 11px; stroke-width: 3; }
#main.ll2 .ll2-av-c p { margin: 0; text-align: left; }
#main.ll2 .ll2-av-txt { font-size: 13.5px; line-height: 1.5; color: var(--ll2-noir); overflow-wrap: anywhere; }
#main.ll2 .ll2-av-orig { font-size: 12px; color: var(--ll2-gris-5); }
#main.ll2 .ll2-av-orig b { color: var(--ll2-noir); }
#main.ll2 .ll2-av-pied { margin-top: auto !important; font-size: 12px; color: var(--ll2-gris-5); }
#main.ll2 .ll2-av-pied b { color: var(--ll2-noir); }
#main.ll2 .ll2-av-d { display: none; }
#main.ll2 .ll2-av-tout, #main.ll2 .ll2-av-herit > summary {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: #fff; border: 0; border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--ll2-noir); text-align: left; cursor: pointer; list-style: none;
}
#main.ll2 .ll2-av-herit > summary::-webkit-details-marker { display: none; }
#main.ll2 .ll2-av-herit > summary span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ll2-gris-5); white-space: nowrap; }
#main.ll2 .ll2-av-chev { width: 14px; height: 14px; stroke-width: 2.5; transition: transform .15s; }
#main.ll2 .ll2-av-herit[open] > summary .ll2-av-chev { transform: rotate(180deg); }
#main.ll2 .ll2-av-tout { display: none; }
#main.ll2 .ll2-av-plus-d .ll2-av-tout { display: flex; }
#main.ll2 .ll2-av-ouvert .ll2-av-c { display: flex; }
#main.ll2 .ll2-av-ouvert .ll2-av-tout { display: none; }
#main.ll2 .ll2-av-herit { grid-column: 1 / -1; }
#main.ll2 .ll2-av-herit-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
#main.ll2 .ll2-av-hnote { font-size: 12px; color: var(--ll2-gris-5); margin: 8px 2px 0; }
#main.ll2 .ll2-av-legal { font-size: 11.5px; line-height: 1.5; color: var(--ll2-gris-4); margin: 10px 2px 0; text-align: left; }
#main.ll2 .ll2-av-legal a { color: var(--ll2-gris-5); text-decoration: underline; }
@media (max-width: 900px) and (min-width: 641px) {
  #main.ll2 .ll2-av-g { grid-template-columns: 200px minmax(0, 1fr); }
  #main.ll2 .ll2-av-liste, #main.ll2 .ll2-av-herit-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #main.ll2 .ll2-av { padding: 12px; }
  #main.ll2 .ll2-av-g { grid-template-columns: minmax(0, 1fr); }
  #main.ll2 .ll2-av-synth { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: center; padding: 14px; }
  #main.ll2 .ll2-av-barres { display: none; }
  #main.ll2 .ll2-av-nb { margin: 0; }
  #main.ll2 .ll2-av-loue { grid-column: 1 / -1; }
  #main.ll2 .ll2-av-liste, #main.ll2 .ll2-av-herit-l { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #main.ll2 .ll2-av-d { display: flex; }
  #main.ll2 .ll2-av-m { display: none; }
  #main.ll2 .ll2-av-plus-d .ll2-av-tout { display: none; }
  #main.ll2 .ll2-av-plus-m .ll2-av-tout { display: flex; }
  #main.ll2 .ll2-av-ouvert .ll2-av-c { display: flex; }
  #main.ll2 .ll2-av-ouvert .ll2-av-tout { display: none; }
}
#main.ll2 .ll2-videos { background: var(--ll2-gris-1); border-radius: var(--ll2-r); padding: 14px 16px 16px; }
#main.ll2 .ll2-videos .ll2-h2 { margin-bottom: 12px; }
#main.ll2 .ll2-videos .ll2-vc { background: #fff; border-radius: 10px; padding: 8px; }
#main.ll2 .ll2-videos .ll2-vc-t { margin: 8px 2px 2px; }
@media (max-width: 640px) { #main.ll2 .ll2-videos { padding: 12px; } #main.ll2 .ll2-vc-liste { gap: 10px; } #main.ll2 .ll2-videos .ll2-vc { padding: 6px; } }
#main.ll2 .ll2-desc .ll2-vid-cache { display: none !important; }
@media (max-width: 979px) { #main.ll2 .ll2-vc-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Fenêtre vidéo (même habillage que la ligne notice, loclightblog
   notice-fiche.tpl) : ici pour les fiches sans notice. Mêmes règles. */
.ll2-vid-ovl{position:fixed;inset:0;z-index:100000;background:rgba(10,10,10,.84);display:flex;align-items:center;justify-content:center;padding:24px;font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;animation:ll2VidIn .18s ease-out}
.ll2-vid-box{width:min(960px,100%)}
.ll2-vid-top{display:flex;align-items:center;gap:12px;color:#fff;margin:0 0 10px}
.ll2-vid-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ll2-vid-sur{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffc600}
.ll2-vid-titre{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll2-vid-x{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;border:0;background:#ffc600;color:#1a1a1a;cursor:pointer;display:grid;place-items:center;padding:0}
.ll2-vid-x:hover{background:#ffd23d}
.ll2-vid-x svg{width:18px;height:18px}
.ll2-vid-cadre{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.ll2-vid-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ll2-vid-pied{display:flex;justify-content:flex-end;margin:10px 0 0}
.ll2-vid-pied a{color:#ffc600 !important;font-size:12px;font-weight:700;text-decoration:none !important}
html.ll2-vid-ouvert,html.ll2-vid-ouvert body{overflow:hidden}
@keyframes ll2VidIn{from{opacity:0}to{opacity:1}}
@media (max-width:640px){.ll2-vid-ovl{padding:0}.ll2-vid-top,.ll2-vid-pied{padding:0 12px}.ll2-vid-cadre{border-radius:0}}
@media (prefers-reduced-motion:reduce){.ll2-vid-ovl{animation:none}}

/* =====================================================================
   Livraison 3b (25/09/2026) : blocs de contenu de Fiche express
   (loclightproduit, hook displayLoclightContenu, contenu.tpl) et bas de
   fiche réordonné : En détail › Caractéristiques + À prévoir › Idéal pour
   (pleine largeur) › En vidéo › Complétez votre location › En clair ›
   FAQ + avis (ou mot du loueur). Deux blocs côte à côte = .ll2-duo ; un
   seul = .ll2-duo-seul.
   ===================================================================== */
#main.ll2 .ll2-duo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
#main.ll2 .ll2-duo-bas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#main.ll2 .ll2-duo.ll2-duo-seul { grid-template-columns: minmax(0, 1fr); }
#main.ll2 .ll2-duo-c { min-width: 0; }
#main.ll2 .ll2-duo-c > section, #main.ll2 .ll2-duo-c > .ll2-av { margin: 0; }
@media (max-width: 979px) {
  #main.ll2 .ll2-duo, #main.ll2 .ll2-duo-bas { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* Caractéristiques : liste libellé / valeur, lignes alternées */
#main.ll2 .ll2-car-t { margin: 0; padding: 8px; }
#main.ll2 .ll2-car-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 10px 14px; border-radius: 6px; font-size: 13.5px; line-height: 1.45; }
#main.ll2 .ll2-car-r.ll2-car-z { background: #fff; }
#main.ll2 .ll2-car-r dt { margin: 0; font-weight: 600; color: var(--ll2-gris-5); }
#main.ll2 .ll2-car-r dd { margin: 0; font-weight: 700; color: var(--ll2-noir); overflow-wrap: anywhere; }
/* Seule sur sa ligne : deux colonnes remplies de haut en bas. */
@media (min-width: 980px) {
  #main.ll2 .ll2-car-large .ll2-car-t { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column;
    grid-template-rows: repeat(var(--ll2-car-l, 1), auto); column-gap: 16px; }
}
/* Case invisible qui ouvre la suite (sans script : page en cache jPresta). */
#main.ll2 .ll2-plus-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
#main.ll2 .ll2-plus { display: none; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin: 8px 0 0;
  border: 1px solid #c9c9c5; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 800; color: var(--ll2-noir); cursor: pointer; }
#main.ll2 .ll2-plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#main.ll2 .ll2-plus-cb:focus-visible ~ .ll2-plus { box-shadow: 0 0 0 3px var(--ll2-jaune-pale); border-color: var(--ll2-noir); }
@media (max-width: 767px) {
  #main.ll2 .ll2-car-t { padding: 6px; }
  #main.ll2 .ll2-car-r { display: flex; justify-content: space-between; padding: 9px 10px; font-size: 13px; }
  #main.ll2 .ll2-car-r dd { text-align: right; }
  #main.ll2 .ll2-car-r.ll2-car-z { background: none; }
  #main.ll2 .ll2-car-r:nth-child(odd) { background: #fff; }
  #main.ll2 .ll2-car-r.ll2-car-m { display: none; }
  #main.ll2 .ll2-plus { display: flex; }
  #main.ll2 .ll2-plus-cb:checked ~ .ll2-car-t .ll2-car-r.ll2-car-m { display: flex; }
  #main.ll2 .ll2-plus-cb:checked ~ .ll2-plus { display: none; }
}

/* À prévoir en plus */
#main.ll2 .ll2-prev-l { list-style: none; margin: 0; padding: 14px 18px; }
#main.ll2 .ll2-prev-l li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--ll2-gris-2);
  font-size: 14px; line-height: 1.45; color: var(--ll2-noir); list-style: none; }
#main.ll2 .ll2-prev-l li:first-child { border-top: 0; padding-top: 2px; }
#main.ll2 .ll2-prev-l li:last-child { padding-bottom: 2px; }
#main.ll2 .ll2-prev-i { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--ll2-noir); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#main.ll2 .ll2-prev-l a { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 12.5px; font-weight: 800;
  color: var(--ll2-noir); text-decoration: underline; text-underline-offset: 3px; }
#main.ll2 .ll2-prev-l a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { #main.ll2 .ll2-prev-l { padding: 12px 14px; } #main.ll2 .ll2-prev-l li { font-size: 13.5px; gap: 10px; } }

/* En clair */
#main.ll2 .ll2-clair-in { background: var(--ll2-jaune-pale); border-radius: var(--ll2-r); padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; }
#main.ll2 .ll2-clair-i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ll2-jaune); display: grid; place-items: center; }
#main.ll2 .ll2-clair-i svg { width: 22px; height: 22px; fill: none; stroke: var(--ll2-noir); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#main.ll2 .ll2-clair-t { min-width: 0; }
#main.ll2 .ll2-clair-t p { margin: 0 0 10px; font-size: 16px; line-height: 1.65; font-weight: 500; color: var(--ll2-noir); }
#main.ll2 .ll2-clair-t p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  #main.ll2 .ll2-clair-in { padding: 16px; }
  #main.ll2 .ll2-clair-i { display: none; }
  #main.ll2 .ll2-clair-t p { font-size: 15px; line-height: 1.6; margin-bottom: 8px; }
}

/* Idéal pour : pastilles cochées */
#main.ll2 .ll2-ideal-l { list-style: none; margin: 0; padding: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
#main.ll2 .ll2-ideal-l li { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 17px; background: #fff;
  font-size: 13px; font-weight: 700; color: var(--ll2-noir); list-style: none; }
#main.ll2 .ll2-ideal-l svg { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--ll2-jaune); fill: none; stroke: var(--ll2-noir);
  stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { #main.ll2 .ll2-ideal-l { padding: 12px 14px; gap: 6px; } #main.ll2 .ll2-ideal-l li { height: 32px; padding: 0 12px; font-size: 12.5px; } }

/* Questions fréquentes : même habillage que « Avis clients » (encadré gris,
   titre dedans, cartes blanches) ; accordéon natif (details), la première
   ouverte. */
#main.ll2 .ll2-faq { background: var(--ll2-gris-1); border-radius: var(--ll2-r); padding: 14px 16px 12px; }
#main.ll2 .ll2-faq .ll2-h2 { margin-bottom: 12px; }
#main.ll2 .ll2-faq-l { background: none; padding: 0; border-radius: 0; display: flex; flex-direction: column; gap: 10px; }
#main.ll2 .ll2-faq-q { background: #fff; border-radius: 10px; }
#main.ll2 .ll2-faq-q > summary { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 14px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ll2-noir); }
#main.ll2 .ll2-faq-q > summary::-webkit-details-marker { display: none; }
#main.ll2 .ll2-faq-q > summary span { flex: 1; min-width: 0; }
#main.ll2 .ll2-faq-q > summary i { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ll2-gris-1); display: grid; place-items: center; }
#main.ll2 .ll2-faq-q > summary svg { width: 14px; height: 14px; fill: none; stroke: var(--ll2-noir); stroke-width: 2.6; stroke-linecap: round; }
#main.ll2 .ll2-faq-q[open] > summary i { background: var(--ll2-jaune); }
#main.ll2 .ll2-faq-q[open] .ll2-faq-v { display: none; }
#main.ll2 .ll2-faq-q > summary:focus-visible { outline: 2px solid var(--ll2-noir); outline-offset: 2px; border-radius: 10px; }
#main.ll2 .ll2-faq-r { padding: 0 56px 14px 14px; margin-top: -4px; }
#main.ll2 .ll2-faq-r p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--ll2-noir); text-align: left; }
#main.ll2 .ll2-faq-r p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  #main.ll2 .ll2-faq { padding: 12px; }
  #main.ll2 .ll2-faq-q > summary { padding: 12px; gap: 12px; }
  #main.ll2 .ll2-faq-q > summary i { width: 26px; height: 26px; }
  #main.ll2 .ll2-faq-r { padding: 0 12px 12px; }
}

/* Avis clients REPLIÉS (25/09, 3b) : note, barres et mention légale
   visibles ; « Voir les avis (N) » ouvre et referme la liste
   (loclightavis, product_reviews.tpl). La note est toujours en tête, la
   liste dessous (plus de colonne de 220 px à gauche). */
#main.ll2 .ll2-av-g { grid-template-columns: minmax(0, 1fr); }
#main.ll2 .ll2-av-synth { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 20px; align-items: center; }
#main.ll2 .ll2-av-loue { grid-column: 1 / -1; }
#main.ll2 .ll2-av:not(.ll2-av-ouvert) .ll2-av-liste,
#main.ll2 .ll2-av:not(.ll2-av-ouvert) .ll2-av-seuls + .ll2-av-hnote { display: none; }
#main.ll2 .ll2-av-tout { display: none !important; }
#main.ll2 .ll2-av-bascule {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px;
  background: #fff; border: 0; border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--ll2-noir); text-align: left; cursor: pointer;
}
#main.ll2 .ll2-av-bascule:focus-visible { outline: 2px solid var(--ll2-noir); outline-offset: 2px; }
#main.ll2 .ll2-av-ouvert .ll2-av-bascule .ll2-av-chev { transform: rotate(180deg); }
#main.ll2 .ll2-av > .ll2-av-bascule + .ll2-av-seuls { margin-top: 12px; }

/* FAQ et avis (ou mot du loueur) côte à côte : même hauteur, et avis sur
   deux colonnes une fois ouverts. */
@media (min-width: 980px) {
  #main.ll2 .ll2-duo-bas:not(.ll2-duo-seul) { align-items: stretch; }
  #main.ll2 .ll2-duo-bas:not(.ll2-duo-seul) > .ll2-duo-c { display: flex; flex-direction: column; }
  #main.ll2 .ll2-duo-bas:not(.ll2-duo-seul) > .ll2-duo-c > section { flex: 1 1 auto; }
  #main.ll2 .ll2-duo-bas:not(.ll2-duo-seul) .ll2-loueur { display: flex; flex-direction: column; }
  #main.ll2 .ll2-duo-bas:not(.ll2-duo-seul) .ll2-loueur > .ll2-encadre { flex: 1 1 auto; }
  #main.ll2 .ll2-duo-bas:not(.ll2-duo-seul) .ll2-av-liste,
  #main.ll2 .ll2-duo-bas:not(.ll2-duo-seul) .ll2-av-herit-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   « En détail » en blocs (25/09, loclightproduit 1.9.0, detail.tpl)
   Neuf modèles empilés : titre + texte, deux colonnes, trois colonnes avec
   icônes, image + texte, bandeau d'accroche, points forts, étapes, encadré
   conseil, galerie. Le design de toutes les fiches se change ici.
   ========================================================================== */
#main.ll2 .ll2-dt { display: flex; flex-direction: column; gap: 44px; }
#main.ll2 .ll2-dt-bloc { margin: 0; }
#main.ll2 .ll2-dt-sur {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ll2-gris-5);
}
#main.ll2 .ll2-dt-sur > span { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--ll2-jaune); }
#main.ll2 .ll2-dt-h3 {
  font-family: inherit; font-size: 26px; font-weight: 800; line-height: 1.25; letter-spacing: 0; text-transform: none;
  color: var(--ll2-noir); margin: 0 0 14px;
}
#main.ll2 .ll2-dt-h4 {
  font-family: inherit; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: 0; text-transform: none;
  color: var(--ll2-noir); margin: 0 0 8px;
}
#main.ll2 .ll2-dt-texte { font-size: 15px; line-height: 1.7; color: var(--ll2-gris-5); }
#main.ll2 .ll2-dt-texte p { margin: 0 0 10px; font-size: inherit; line-height: inherit; color: inherit; }
#main.ll2 .ll2-dt-texte > :last-child { margin-bottom: 0; }
#main.ll2 .ll2-dt-texte ul, #main.ll2 .ll2-dt-texte ol { margin: 0 0 10px; padding-left: 22px; }
#main.ll2 .ll2-dt-texte ul { list-style: disc; }
#main.ll2 .ll2-dt-texte ol { list-style: decimal; }
#main.ll2 .ll2-dt-texte li { margin: 0 0 4px; font-size: inherit; color: inherit; }
#main.ll2 .ll2-dt-texte strong { color: var(--ll2-noir); font-weight: 700; }
#main.ll2 .ll2-dt-texte a { color: var(--ll2-noir); text-decoration: underline; text-decoration-color: var(--ll2-jaune); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* 1. Titre + texte */
#main.ll2 .ll2-dt-titre { max-width: none; } /* 26/09 : toute la largeur, comme les autres blocs (était 760 px) */

/* 2 et 3. Colonnes */
#main.ll2 .ll2-dt-cols { display: grid; gap: 56px; margin-top: 14px; }
#main.ll2 .ll2-dt-deux .ll2-dt-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#main.ll2 .ll2-dt-deux .ll2-dt-col { padding-top: 18px; border-top: 3px solid var(--ll2-jaune); }
#main.ll2 .ll2-dt-trois .ll2-dt-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#main.ll2 .ll2-dt-trois .ll2-dt-col { background: var(--ll2-gris-1); border-radius: 10px; padding: 28px; }
#main.ll2 .ll2-dt-trois .ll2-dt-texte { font-size: 14px; line-height: 1.65; }
#main.ll2 .ll2-dt-ico {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 0 14px;
  border-radius: 50%; background: var(--ll2-jaune); color: var(--ll2-noir);
}
#main.ll2 .ll2-dt-ico svg { width: 24px; height: 24px; }

/* 4. Image + texte */
#main.ll2 .ll2-dt-it { display: flex; align-items: center; gap: 64px; }
#main.ll2 .ll2-dt-it-droite { flex-direction: row-reverse; }
#main.ll2 .ll2-dt-it-img { flex: 0 0 48%; max-width: 540px; }
#main.ll2 .ll2-dt-it-img img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--ll2-gris-2); }
#main.ll2 .ll2-dt-it-txt { flex: 1 1 0; min-width: 0; }
#main.ll2 .ll2-dt-coches, #main.ll2 .ll2-dt-pts { list-style: none; margin: 0; padding: 0; }
#main.ll2 .ll2-dt-coches { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
#main.ll2 .ll2-dt-coches li { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ll2-noir); }
#main.ll2 .ll2-dt-coche {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 4px; background: var(--ll2-jaune);
  display: flex; align-items: center; justify-content: center;
}
#main.ll2 .ll2-dt-coche svg { width: 14px; height: 14px; fill: none; stroke: var(--ll2-noir); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* 5. Bandeau d'accroche */
#main.ll2 .ll2-dt-bandeau {
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
  background: var(--ll2-noir); border-radius: 10px; padding: 44px 56px;
}
#main.ll2 .ll2-dt-bandeau-txt { max-width: 700px; }
#main.ll2 .ll2-dt-bandeau-h {
  font-family: inherit; font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: 0; text-transform: none;
  color: #fff; margin: 0;
}
#main.ll2 .ll2-dt-bandeau-h span { color: var(--ll2-jaune); }
#main.ll2 .ll2-dt-bandeau-txt p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: #c9c9c5; }
#main.ll2 .ll2-dt-bandeau-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border-radius: 6px; background: var(--ll2-jaune); color: var(--ll2-noir); font-size: 14px; font-weight: 800; text-decoration: none;
}
#main.ll2 .ll2-dt-bandeau-btn:hover, #main.ll2 .ll2-dt-bandeau-btn:focus { color: var(--ll2-noir); text-decoration: none; filter: brightness(.95); }
#main.ll2 .ll2-dt-bandeau-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 6. Points forts */
#main.ll2 .ll2-dt-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
#main.ll2 .ll2-dt-pts li { display: flex; gap: 14px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--ll2-gris-2); }
#main.ll2 .ll2-dt-pts li:last-child,
#main.ll2 .ll2-dt-pts li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
#main.ll2 .ll2-dt-pts .ll2-dt-coche { flex-basis: 24px; width: 24px; height: 24px; }
#main.ll2 .ll2-dt-pt-t { display: flex; flex-direction: column; gap: 4px; }
#main.ll2 .ll2-dt-pt-t b { font-size: 15px; font-weight: 800; color: var(--ll2-noir); }
#main.ll2 .ll2-dt-pt-t span { font-size: 14px; line-height: 1.6; color: var(--ll2-gris-5); }

/* 7. Étapes numérotées */
#main.ll2 .ll2-dt-ets { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#main.ll2 .ll2-dt-ets-1 { grid-template-columns: minmax(0, 1fr); }
#main.ll2 .ll2-dt-ets-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#main.ll2 .ll2-dt-ets-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#main.ll2 .ll2-dt-ets li { margin: 0; }
#main.ll2 .ll2-dt-et-n { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
#main.ll2 .ll2-dt-et-n span {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 6px; background: var(--ll2-jaune); color: var(--ll2-noir);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800;
}
#main.ll2 .ll2-dt-et-n i { flex: 1 1 0; height: 2px; background: var(--ll2-gris-2); }
#main.ll2 .ll2-dt-et-der .ll2-dt-et-n span { background: var(--ll2-noir); color: var(--ll2-jaune); }
#main.ll2 .ll2-dt-et-der .ll2-dt-et-n i { display: none; }
#main.ll2 .ll2-dt-ets .ll2-dt-h4 { font-size: 16px; }
#main.ll2 .ll2-dt-ets p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ll2-gris-5); }

/* 8. Encadré conseil */
#main.ll2 .ll2-dt-conseil { display: flex; align-items: flex-start; gap: 24px; background: var(--ll2-jaune-pale); border-radius: 10px; padding: 32px 40px; }
#main.ll2 .ll2-dt-conseil > div { max-width: 820px; }
#main.ll2 .ll2-dt-conseil-ico {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: var(--ll2-noir);
  display: flex; align-items: center; justify-content: center;
}
#main.ll2 .ll2-dt-conseil-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--ll2-jaune); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#main.ll2 .ll2-dt-conseil .ll2-dt-h4 { font-size: 18px; }
#main.ll2 .ll2-dt-conseil .ll2-dt-texte { color: var(--ll2-noir); }

/* 9. Galerie */
#main.ll2 .ll2-dt-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 14px; }
#main.ll2 .ll2-dt-photos figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
#main.ll2 .ll2-dt-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--ll2-gris-2); }
#main.ll2 .ll2-dt-photos figcaption { font-size: 13px; color: var(--ll2-gris-5); }

/* Téléphone : tout passe sur une colonne. */
@media (max-width: 979px) {
  #main.ll2 .ll2-dt-it { gap: 32px; }
  #main.ll2 .ll2-dt-ets, #main.ll2 .ll2-dt-ets-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main.ll2 .ll2-dt-trois .ll2-dt-cols { gap: 16px; }
  #main.ll2 .ll2-dt-trois .ll2-dt-col { padding: 22px; }
}
@media (max-width: 640px) {
  #main.ll2 .ll2-dt { gap: 32px; }
  #main.ll2 .ll2-dt-h3 { font-size: 21px; }
  #main.ll2 .ll2-dt-cols,
  #main.ll2 .ll2-dt-deux .ll2-dt-cols,
  #main.ll2 .ll2-dt-trois .ll2-dt-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #main.ll2 .ll2-dt-trois .ll2-dt-col { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  #main.ll2 .ll2-dt-trois .ll2-dt-ico { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  #main.ll2 .ll2-dt-trois .ll2-dt-ico svg { width: 20px; height: 20px; }
  #main.ll2 .ll2-dt-trois .ll2-dt-h4 { margin-bottom: 4px; }
  #main.ll2 .ll2-dt-it, #main.ll2 .ll2-dt-it-droite { flex-direction: column; align-items: stretch; gap: 18px; }
  #main.ll2 .ll2-dt-it-img { flex: none; max-width: none; }
  #main.ll2 .ll2-dt-bandeau { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px; }
  #main.ll2 .ll2-dt-bandeau-h { font-size: 26px; }
  #main.ll2 .ll2-dt-bandeau-btn { width: 100%; justify-content: center; }
  #main.ll2 .ll2-dt-pts { grid-template-columns: minmax(0, 1fr); }
  #main.ll2 .ll2-dt-pts li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--ll2-gris-2); }
  #main.ll2 .ll2-dt-pts li { padding: 14px 0; }
  #main.ll2 .ll2-dt-ets, #main.ll2 .ll2-dt-ets-2, #main.ll2 .ll2-dt-ets-3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #main.ll2 .ll2-dt-ets li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding-bottom: 18px; position: relative; }
  #main.ll2 .ll2-dt-et-n { grid-row: span 2; margin: 0; flex-direction: column; align-self: stretch; gap: 0; }
  #main.ll2 .ll2-dt-et-n span { flex: 0 0 40px; width: 40px; height: 40px; font-size: 18px; }
  #main.ll2 .ll2-dt-et-n i { width: 2px; height: auto; flex: 1 1 auto; margin: 6px 0 -18px; }
  #main.ll2 .ll2-dt-ets .ll2-dt-h4 { margin: 8px 0 4px; }
  #main.ll2 .ll2-dt-conseil { padding: 22px 20px; gap: 16px; }
  #main.ll2 .ll2-dt-conseil-ico { flex-basis: 40px; width: 40px; height: 40px; }
  #main.ll2 .ll2-dt-conseil-ico svg { width: 20px; height: 20px; }
  #main.ll2 .ll2-dt-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* 26/09 : « En détail » en blocs dans un encadré léger, comme « L'essentiel »
   (fond blanc, bordure gris clair, titre en petites capitales). */
#main.ll2 .ll2-desc-blocs { border: 1px solid var(--ll2-gris-2); border-radius: var(--ll2-r); padding: 22px 28px 30px; background: #fff; }
#main.ll2 .ll2-desc-blocs > .ll2-h2 {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ll2-noir); margin: 0 0 20px; line-height: 1.3;
}
@media (max-width: 767px) {
  #main.ll2 .ll2-desc-blocs { padding: 16px 16px 22px; }
}