/* LOCLIGHT — calendrier fiche produit (style validé, scopé sous .ll-cal) */
.ll-cal{
    --y:#ffc600; --y-deep:#e0ad00; --y-soft:#fff3cc;
    --ink:#1a1a1a; --line:#ececea; --muted:#9a9a92; --go:#1f9d55; --go-d:#157a42;
    --period:#d4f0dd; --period-edge:#1f9d55; --period-edge-d:#157a42;
  }.ll-cal *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}.ll-cal{background:transparent;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);position:relative;z-index:1;clear:both;display:block;width:100%;padding:10px 0 20px}.ll-cal .wrap{max-width:460px;margin:0 auto;padding:16px;position:relative}.ll-cal .screen{position:relative;background:#fff;border-radius:18px;padding:18px 16px 20px;box-shadow:0 6px 24px rgba(0,0,0,.10);border:1px solid #e5e5e2}/* badge "bon plan week-end" animé, 2 lignes, dans le coin haut-droit */
  .ll-cal .badge-promo{position:absolute;top:-12px;right:10px;z-index:20;background:var(--go);color:#fff;padding:8px 13px;border-radius:14px;box-shadow:0 4px 12px rgba(31,157,85,.4);text-align:center;animation:wiggle 2.5s ease-in-out infinite;transform-origin:center;display:flex;flex-direction:column;line-height:1.15}@keyframes wiggle{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg) scale(1.06)}}.ll-cal .badge-promo .bp-l1{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.ll-cal .badge-promo .bp-l2{font-size:13px;font-weight:800}.ll-cal .badge-promo .star{font-size:14px}/* mention explicative sous le bouton */
  .ll-cal .promo-detail{margin-top:12px;background:#eafaf1;border:1px solid #c6ecd5;border-radius:10px;padding:11px 13px;font-size:11.5px;color:var(--go-d);line-height:1.5;text-align:center}.ll-cal .promo-detail .pd-title{display:block;font-weight:800;font-size:13px;margin-bottom:3px}.ll-cal .title-bar{background:var(--y);color:#fff;text-align:center;padding:14px;border-radius:14px;font-size:22px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px;text-shadow:0 1px 2px rgba(0,0,0,.12)}.ll-cal .instr{border-radius:12px;padding:13px 15px;margin-bottom:16px;text-align:center;line-height:1.5;transition:.3s}.ll-cal .instr.step0{background:#f6f6f3;color:#444;font-size:13.5px;font-weight:600}.ll-cal .instr.step1{background:var(--y);color:var(--ink)}.ll-cal .instr.step2{background:#eafaf1;color:var(--go-d)}.ll-cal .instr .lead{font-size:14px;font-weight:800;display:block;margin-bottom:3px}.ll-cal .instr .sub{font-size:13px;font-weight:600}.ll-cal .instr .arrow{display:inline-block;animation:point 1s ease-in-out infinite;font-weight:900}@keyframes point{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}.ll-cal .changebtn{display:none;margin:0 auto 16px;background:var(--y);color:var(--ink);border:none;border-radius:11px;padding:11px 20px;font-weight:800;font-size:13px;cursor:pointer;text-transform:uppercase;letter-spacing:.03em}.ll-cal .changebtn.show{display:block}.ll-cal .nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}.ll-cal .nav button{border:none;cursor:pointer;font-weight:700;font-size:11.5px;padding:9px 12px;border-radius:9px;background:var(--y-soft);color:var(--y-deep);transition:.2s}.ll-cal .nav button:hover{background:var(--y);color:var(--ink)}.ll-cal .nav .mlabel{font-size:14px;font-weight:800;min-width:110px;text-align:center}.ll-cal .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px}.ll-cal .dow span{text-align:center;font-size:9px;text-transform:uppercase;font-weight:700;color:var(--muted)}.ll-cal .grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;width:100%;position:relative}.ll-cal .cell{position:relative;border-radius:11px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;cursor:pointer;user-select:none;aspect-ratio:3/4;background:#fff;border:1.5px solid var(--line);transition:transform .18s,box-shadow .18s,border-color .18s,opacity .3s,filter .3s;min-width:0;overflow:hidden}.ll-cal .cell .cell-top{flex:1 1 70%;display:flex;align-items:center;justify-content:center;min-height:0}.ll-cal .cell .dnum{font-size:13px;font-weight:700;line-height:1.1}.ll-cal .cell .dmon{font-size:7px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:1px}.ll-cal .cell .pill{flex:0 0 30%;min-height:16px;display:none;align-items:center;justify-content:center;background:var(--go);color:#fff;font-size:10px;font-weight:800;line-height:1;letter-spacing:.01em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.ll-cal .cell.empty{visibility:hidden;cursor:default}.ll-cal .cell.closed{background:repeating-linear-gradient(45deg,#f1f1ef,#f1f1ef 5px,#e8e8e5 5px,#e8e8e5 10px);border-color:#eee;cursor:not-allowed;opacity:.7}.ll-cal .cell.closed .dnum, .ll-cal .cell.closed .dmon{color:#b4b4ae}@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,198,0,0)}50%{box-shadow:0 0 0 2px rgba(255,198,0,.22)}}.ll-cal .cell.free{background:#fffdf5;border-color:#f3ead0}.ll-cal .idle .cell.free{animation:breathe 3.6s ease-in-out infinite}.ll-cal .cell.free:hover{transform:scale(1.07);border-color:var(--y);box-shadow:0 0 12px rgba(255,198,0,.4);z-index:5}.ll-cal .cell.range, .ll-cal .cell.start, .ll-cal .cell.end{overflow:hidden}/* ===== ZONE SÉLECTIONNÉE : contour vert autour du bloc ===== */
  /* on RÉINITIALISE d'abord toutes les bordures (sinon le jaune de .free ressort) */
  .ll-cal .cell.range, .ll-cal .cell.start, .ll-cal .cell.end{
    background:transparent;
    border:1.5px solid transparent;
    border-radius:0;
    z-index:2;
    animation:none;
  }.ll-cal .cell.range .dnum, .ll-cal .cell.start .dnum, .ll-cal .cell.end .dnum{color:var(--ink)}.ll-cal .cell.range .dmon, .ll-cal .cell.start .dmon, .ll-cal .cell.end .dmon{color:var(--muted)}/* contour vert : haut + bas sur TOUTES les cases de la période
     (.cell.range etc. + on double les classes pour battre .cell.free en spécificité) */
  .ll-cal .cell.range, .ll-cal .cell.start, .ll-cal .cell.end, .ll-cal .cell.free.range, .ll-cal .cell.free.start, .ll-cal .cell.free.end{
    border-color:transparent !important;
  }/* le contour est dessiné par un cadre overlay continu (.ll-selframe) */
  .ll-cal .cell.start, .ll-cal .cell.free.start{ }
  .ll-cal .cell.end, .ll-cal .cell.free.end{ }.ll-cal .cell.start.end{}/* connecteurs : comblent le gap, avec bord haut+bas vert pour un contour continu */
  /* connecteurs : comblent le gap entre cases avec fond vert + bordures haut/bas vertes.
     (Version retenue — contour propre.) */
  .ll-cal .cell.link-right::after,.ll-cal .cell.link-left::before{display:none}/* halo cible sur les retours possibles (mode awaiting, variante 2) */
  .ll-cal .awaiting .cell.start{box-shadow:0 0 0 3px var(--y),0 4px 14px rgba(255,198,0,.55)}/* en attente du retour : la case départ n'a QUE le halo jaune, pas le contour vert
     (sinon double cadre). Le vert revient quand la période est complète. */
  .ll-cal .awaiting .cell.start{
    border-color:var(--y-deep) !important;
    border-width:1.5px !important;
    border-radius:11px !important;
    background:var(--y-soft);
  }.ll-cal .awaiting .cell.start::after, .ll-cal .awaiting .cell.start::before{display:none}@keyframes ring2{0%{box-shadow:0 0 0 0 rgba(31,157,85,.5)}100%{box-shadow:0 0 0 7px rgba(31,157,85,0)}}.ll-cal .awaiting .cell.free.canreturn{border-color:var(--go);animation:ring2 1.6s ease-out infinite}.ll-cal .awaiting .cell.free.canreturn .pill{display:flex}.ll-cal .awaiting .cell.free.dim{opacity:.3;filter:saturate(.4);animation:none}.ll-cal .awaiting .cell.free.dim .pill{display:none}/* ===== Bouton-récap progressif (porte tout le résumé) ===== */
  .ll-cal .cta{position:relative;margin:16px 0 0;width:100%;border:none;border-radius:13px;padding:0;overflow:hidden;cursor:pointer;transition:.25s;display:block;text-align:center;line-height:1.3}
  /* corps : texte (3 lignes) + stepper à droite */
  .ll-cal .cta-body{display:flex;align-items:center;justify-content:center;gap:12px;padding:13px 14px}
  .ll-cal .cta-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
  /* stepper jaune (quantité) — ne déclenche pas l'ajout */
  .ll-cal .ll-stepper{display:flex;align-items:center;gap:6px;background:var(--y);border-radius:11px;padding:5px 6px;flex-shrink:0}
  .ll-cal .ll-step{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;color:var(--ink);border-radius:8px;background:rgba(0,0,0,.07);user-select:none;cursor:pointer;line-height:1;transition:background .15s,opacity .15s}
  .ll-cal .ll-step:hover{background:rgba(0,0,0,.14)}
  .ll-cal .ll-step:active{transform:scale(.92)}
  .ll-cal .ll-step.off{opacity:.32;pointer-events:none}
  .ll-cal .ll-step-val{min-width:22px;text-align:center;font-size:20px;font-weight:800;color:var(--ink)}
  /* bande disponibilité en bas du bouton */
  .ll-cal .cta-dispo{display:none;align-items:center;justify-content:space-between;gap:8px;background:rgba(0,0,0,.12);font-size:11.5px;font-weight:600;padding:6px 14px;color:rgba(255,255,255,.92);min-height:30px}
  .ll-cal .cta.ready .cta-dispo{display:flex}
  .ll-cal .cta-dispo-txt{margin-left:auto;text-align:right}
  /* badge "Forfait week-end" jaune, intégré à gauche de la bande dispo (masqué par défaut) */
  .ll-cal .badge-we{display:none;background:var(--y);color:var(--ink);font-size:10px;font-weight:800;padding:3px 10px;border-radius:12px;box-shadow:0 2px 7px rgba(255,198,0,.45);text-transform:uppercase;letter-spacing:.03em;transform:rotate(-1.5deg);white-space:nowrap;flex-shrink:0}.ll-cal .cta.ready .badge-we.show{display:inline-block}
  .ll-cal .cta-l1{font-weight:500;font-size:13px}
  .ll-cal .cta-l2{font-weight:800;font-size:18px;margin-top:2px;text-transform:uppercase;letter-spacing:.02em}
  .ll-cal .cta-l3{font-weight:700;font-size:13px;margin-top:2px;opacity:.92}
  .ll-cal .cta-l3:empty{display:none}
  /* palier de remise quantitative, dans la ligne prix du CTA.
     Acquis : plein, il se lit comme un gain. Pas encore atteint : en creux,
     c'est une invitation a monter la quantite, pas une promesse deja tenue. */
  .ll-cal .cta-pal{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:99px;
    background:rgba(255,255,255,.22);font-size:11px;font-weight:800;letter-spacing:.02em;
    text-transform:uppercase;vertical-align:1px;white-space:nowrap}
  .ll-cal .cta-pal-off{background:transparent;border:1px dashed rgba(255,255,255,.5);opacity:.85}/* état "en cours" (étapes 1 et 2) : estompé, sert de consigne */
  .ll-cal .cta.waiting{background:#f2f2ef;color:#9a9a92;cursor:default;border:2px dashed #dcdcd6}.ll-cal .cta.waiting .cta-body{padding:15px 16px}.ll-cal .cta.waiting .cta-l1{font-weight:600;font-size:14px}/* état "prêt" (période complète) : VERT plein, actionnable, avec pulsation */
  @keyframes ctaPulse{
    0%{box-shadow:0 4px 14px rgba(31,157,85,.25),0 0 0 0 rgba(31,157,85,.45)}
    70%{box-shadow:0 4px 14px rgba(31,157,85,.25),0 0 0 12px rgba(31,157,85,0)}
    100%{box-shadow:0 4px 14px rgba(31,157,85,.25),0 0 0 0 rgba(31,157,85,0)}
  }.ll-cal .cta.ready{background:var(--go);color:#fff;animation:ctaPulse 1.8s ease-out infinite}.ll-cal .cta.ready .cta-l1{color:rgba(255,255,255,.82);font-size:13px;font-weight:500}.ll-cal .cta.ready .cta-l2{color:#fff}.ll-cal .cta.ready .cta-l3{color:rgba(255,255,255,.92)}@media (hover:hover) and (pointer:fine){.ll-cal .cta.ready:hover{background:var(--go-d);transform:translateY(-1px);animation:none}}.ll-cal .cta.ready:active{transform:translateY(0)}.ll-cal .legend{margin-top:14px;font-size:11px;color:#999;line-height:1.5;font-style:italic;text-align:center}

/* ============================================================
   INTÉGRATION DANS LA FICHE PRODUIT
   Le calendrier est injecté via displayFooterProduct. On force
   un comportement de bloc normal pour éviter tout flottement /
   superposition avec les sections voisines (avis, etc.).
   ============================================================ */
.ll-cal,
.ll-cal * { float:none !important; }
.ll-cal { position:relative !important; z-index:1 !important; overflow:visible; }
/* le conteneur direct du hook (selon le thème) ne doit pas flotter */
#ll-cal-root { display:block; width:100%; clear:both; margin:20px 0; }

/* ============================================================
   ADAPTATION DESKTOP — le calendrier s'étend comme MOR
   Sur mobile : carte étroite centrée (réglages d'origine).
   Sur écran large : occupe toute la largeur du bloc Réservation.
   ============================================================ */
@media (min-width: 768px) {
  /* la carte occupe toute la largeur disponible (plus de bride 460px) */
  .ll-cal .wrap { max-width: 100%; padding: 0; }
  .ll-cal .screen { padding: 28px 32px 30px; border-radius: 16px; }

  /* bouton pleine largeur (la bande dispo doit s'étendre bord à bord) */
  .ll-cal .cta { width: 100%; padding: 0; }
  .ll-cal .cta-body { padding: 14px 28px; }

  /* cases plus larges et un peu moins hautes pour rester harmonieuses */
  .ll-cal .cell { aspect-ratio: 4 / 3; border-radius: 10px; }
  .ll-cal .grid { gap: 8px; }
  .ll-cal .dow { gap: 8px; }

  /* (connecteurs désactivés : le cadre overlay .ll-selframe dessine le contour) */
  /* cadre de sélection plus épais sur desktop */
  .ll-cal .grid .ll-selframe { border-width: 5px; border-radius: 14px; }

  /* --- TAILLES DE TEXTE agrandies pour desktop --- */
  /* en-tête jours + numéros */
  .ll-cal .dow span { font-size: 13px; }
  .ll-cal .cell .dnum { font-size: 20px; }
  /* bandeau prix en bas (plus grand sur desktop) */
  .ll-cal .cell .pill { font-size: 13px; min-height: 22px; }

  /* titre + badge week-end */
  .ll-cal .title-bar { font-size: 26px; padding: 16px; }
  .ll-cal .badge-promo .bp-l1 { font-size: 14px; }
  .ll-cal .badge-promo .bp-l2 { font-size: 15px; }
  .ll-cal .badge-promo .star { font-size: 16px; }

  /* instructions */
  .ll-cal .instr.step0 { font-size: 16px; }
  .ll-cal .instr .lead { font-size: 17px; }
  .ll-cal .instr .sub { font-size: 15px; }
  .ll-cal .changebtn { font-size: 15px; padding: 13px 24px; }

  /* navigation mois */
  .ll-cal .nav button { font-size: 14px; padding: 11px 16px; }
  .ll-cal .nav .mlabel { font-size: 18px; min-width: 150px; }

  /* bouton ajouter au panier (tailles gérées plus bas dans la section responsive 3-lignes) */
  .ll-cal .badge-we { font-size: 12px; }

  /* encarts explicatifs (week-end + jours hachurés) */
  .ll-cal .promo-detail { font-size: 14px; padding: 14px 18px; }
  .ll-cal .promo-detail .pd-title { font-size: 16px; }
  .ll-cal .legend { font-size: 13px; margin-top: 18px; }
}

/* très grands écrans : on évite que les cases deviennent géantes */
@media (min-width: 1100px) {
  .ll-cal .cell { aspect-ratio: 16 / 10; }
  .ll-cal .cell .dnum { font-size: 22px; }
  .ll-cal .cell .pill { font-size: 14px; }
}

/* ============================================================
   CADRE DE SÉLECTION CONTINU (overlay)
   Un seul rectangle par segment de ligne, dessiné par-dessus les
   cases sélectionnées. Aucune jonction → aucun décalage.
   Pour épaissir le bord : augmenter la valeur de border (ex: 3px).
   ============================================================ */
.ll-cal .grid .ll-selframe{
  position:absolute;
  pointer-events:none;          /* laisse cliquer les cases dessous */
  box-sizing:border-box;
  border-radius:14px;
}
/* fond : DERRIÈRE les cases, comble les bandes blanches (jaune clair) */
.ll-cal .grid .ll-selfill{
  background:var(--y-soft);
  z-index:0;
}
/* cadre : DEVANT, juste le contour arrondi */
.ll-cal .grid .ll-selborder{
  border:4px solid var(--period-edge);
  z-index:6;
  box-shadow:0 2px 8px rgba(31,157,85,.18);
}

/* partie "dates" en gras dans le bouton (ex: Jeudi 29 Mai au Samedi 27 Juin 2026) */
.ll-cal .cta.ready .cta-l1 strong{
  font-weight:800;
  color:#ffffff;
}

/* effet de surbrillance quand on arrive sur le calendrier (clic "Choisir mes dates") */
@keyframes llFlash {
  0%   { box-shadow:0 0 0 0 rgba(255,198,0,0); }
  25%  { box-shadow:0 0 0 5px rgba(255,198,0,.55), 0 8px 30px rgba(255,198,0,.4); }
  100% { box-shadow:0 0 0 0 rgba(255,198,0,0); }
}
.ll-cal .screen.ll-flash {
  animation: llFlash 1.4s ease-out;
}

/* ============================================================
   PASTILLE EN CHARGEMENT (shimmer) — pendant le calcul des prix
   Taille fixe ≈ celle d'un prix ("139€") pour éviter tout saut,
   avec un reflet lumineux qui balaie en boucle.
   ============================================================ */
.ll-cal .cell .pill.is-loading{
  display:flex !important;
  color:transparent !important;          /* pas de texte pendant le chargement */
  flex:0 0 30%;
  min-height:16px;
  border-radius:0;
  background:linear-gradient(100deg,
      #1f9d55 0%,
      #1f9d55 38%,
      #5cc985 50%,
      #1f9d55 62%,
      #1f9d55 100%);
  background-size:220% 100%;
  animation:llShimmer 1.15s ease-in-out infinite;
}
@keyframes llShimmer{
  0%   { background-position:120% 0; }
  100% { background-position:-120% 0; }
}

/* ============================================================
   BANDEAU TOTAL — quand la période complète est sélectionnée
   Le bandeau vert remplace les prix individuels et se remplit
   de gauche à droite ("le temps qui passe"), puis le total apparaît.
   ============================================================ */

/* masquer les prix individuels des cases de la période (le TOTAL les remplace) */
.ll-cal .cell.range .pill,
.ll-cal .cell.start .pill,
.ll-cal .cell.end .pill{ display:none !important; }

/* le bandeau TOTAL (overlay positionné par JS sur les 30% bas du dernier segment) */
.ll-cal .grid .ll-seltotal{
  z-index:7;
  overflow:hidden;
  border-top-left-radius:0;
  border-top-right-radius:0;
  border-bottom-left-radius:11px;
  border-bottom-right-radius:11px;
  background:#e9f6ec;                 /* fond clair sous le remplissage vert */
  display:flex;
  align-items:center;
  justify-content:center;
}
/* la barre verte qui se déploie de gauche à droite */
.ll-cal .grid .ll-seltotal .ll-seltotal-fill{
  position:absolute;
  top:0; left:0; bottom:0; width:100%;
  background:var(--period-edge);
  transform-origin:left center;
  transform:scaleX(0);
}
.ll-cal .grid .ll-seltotal.go .ll-seltotal-fill{
  animation:llTotalFill .9s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes llTotalFill{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}
/* le texte du total, apparait en fondu une fois la barre bien avancée */
.ll-cal .grid .ll-seltotal .ll-seltotal-label{
  position:relative;
  z-index:2;
  color:#fff;
  font-weight:800;
  font-size:12px;
  letter-spacing:.02em;
  white-space:nowrap;
  opacity:0;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.ll-cal .grid .ll-seltotal.go .ll-seltotal-label{
  animation:llTotalLabel .5s ease-out .55s forwards;
}
@keyframes llTotalLabel{
  from{ opacity:0; transform:translateY(3px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (min-width:768px){
  .ll-cal .grid .ll-seltotal .ll-seltotal-label{ font-size:16px; }
  .ll-cal .grid .ll-seltotal{ border-top-left-radius:0; border-top-right-radius:0; border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
}

/* petite animation d'appel sur "Ajouter au panier" (zoom doux périodique) */
.ll-cal .cta.ready .cta-l2{
  display:inline-block;
  animation:llCtaZoom 2.4s ease-in-out infinite;
  transform-origin:center;
}
@keyframes llCtaZoom{
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(1.06); }
}
/* au survol, on stoppe le zoom (l'utilisateur est déjà engagé) */
.ll-cal .cta.ready:hover .cta-l2{ animation:none; }

/* avertissement de stock insuffisant sur le bouton */
.ll-cal .cta.cta-stock-warn{
  animation:llStockShake .4s ease-in-out;
}
.ll-cal .cta.ready.cta-stock-warn .cta-l2{
  color:#ffe0e0;
}
@keyframes llStockShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-5px); }
  40%{ transform:translateX(5px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}

/* ============================================================
   QUANTITÉ INTÉGRÉE AU BOUTON — responsive
   La ligne dates / "Ajouter au panier" / prix tient sur 3 lignes.
   Sur mobile : année masquée + polices réduites pour tenir.
   ============================================================ */
/* Mobile (par défaut, < 768px) : 3 lignes serrées, année masquée */
.ll-cal .cta.ready .cta-l1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ll-cal .ll-annee{display:none}              /* année masquée sur mobile */
.ll-cal .cta-text{align-items:flex-start;text-align:left}
@media (max-width:767px){
  .ll-cal .cta-body{gap:10px;padding:11px 11px 11px 15px}
  .ll-cal .cta.ready .cta-l1{font-size:10.5px}
  .ll-cal .cta.ready .cta-l2{font-size:14px;margin-top:1px}
  .ll-cal .cta.ready .cta-l3{font-size:12px;margin-top:1px}
  .ll-cal .ll-step{width:32px;height:32px;font-size:22px;border-radius:7px}
  .ll-cal .ll-stepper{gap:4px;padding:4px 5px;border-radius:10px}
  .ll-cal .cta-dispo{font-size:10.5px;padding:5px 15px}
}
/* Desktop (≥ 768px) : 3 lignes centrées, année visible, polices pleines */
@media (min-width:768px){
  .ll-cal .ll-annee{display:inline}
  .ll-cal .cta-text{align-items:center;text-align:center}
  .ll-cal .cta.ready .cta-l1{font-size:13px;white-space:normal}
  .ll-cal .cta.ready .cta-l2{font-size:18px}
  .ll-cal .cta.ready .cta-l3{font-size:13px}
}

/* ============================================================
   BOUTON DU HAUT (hors .ll-cal) — remplace le bouton natif sur
   les fiches en location. Style "entête Réservation" jaune + pulse.
   ÉTAT 1 : "Choisir mes dates de location" (+ flèche, scroll)
   ÉTAT 2 : "Réserver du xx au xx" (+ stepper quantité)
   ============================================================ */
@keyframes llTopPulse{
  0%   { box-shadow:0 4px 14px rgba(255,198,0,.30), 0 0 0 0 rgba(255,198,0,.50); }
  70%  { box-shadow:0 4px 14px rgba(255,198,0,.30), 0 0 0 12px rgba(255,198,0,0); }
  100% { box-shadow:0 4px 14px rgba(255,198,0,.30), 0 0 0 0 rgba(255,198,0,0); }
}
@keyframes llTopArrow{
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(4px); }
}
button.ll-top-btn, .ll-top-btn{
  background:#ffc600 !important;
  color:#fff !important;
  border:none !important;
  border-radius:14px !important;
  padding:12px 16px !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;
  text-shadow:0 1px 2px rgba(0,0,0,.16);
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  line-height:1.2 !important;
  animation:llTopPulse 1.8s ease-out infinite;
  transition:background .2s;
}
/* SURVOL — uniquement là où un survol existe vraiment.
   Sur iOS, l'état :hover reste COLLÉ après un appui, jusqu'à ce qu'on touche
   ailleurs. Le bouton gardait donc son jaune de survol #f5bd0a, plus terne
   que le #ffc600 du cadre : les deux jaunes ne s'accordaient plus alors que
   le code disait la même couleur. La requête (hover:hover) réserve ces règles
   à la souris ; sur ordinateur, rien ne change. */
@media (hover: hover) and (pointer: fine) {
  /* Le fond ne bouge plus : ce bouton et le cadre de réservation doivent
     porter EXACTEMENT le même jaune, quoi qu'il arrive. Le survol joue donc
     sur le texte — l'ombre se creuse et les lettres respirent un peu plus.

     Ce n'est pas seulement un choix esthétique : du blanc sur #ffc600 tient
     à 1,9:1 de contraste, c'est l'ombre portée qui le rend lisible. La
     renforcer au survol répond au geste ET améliore la lecture, là où
     assombrir le fond ne faisait ni l'un ni l'autre. */
  .ll-top-btn:hover{
    text-shadow:0 1px 3px rgba(0,0,0,.38) !important;
    letter-spacing:.05em !important;
    animation:none;
  }
}
.ll-top-btn:active{ transform:translateY(1px); }
.ll-top-btn .ll-top-main{ display:inline-flex; align-items:center; gap:9px; min-width:0; }
.ll-top-btn .ll-top-lbl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ll-top-btn .material-icons{ font-size:18px; line-height:1; flex-shrink:0; }
/* flèche (état 1) : descend doucement pour inviter au scroll */
.ll-top-btn .ll-top-arrow{ animation:llTopArrow 1.2s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) {
  .ll-top-btn:hover .ll-top-arrow{ animation:none; }
}

/* stepper (état 2) — design épuré : séparateur fin, pas de fond, +/- en blanc */
.ll-top-btn .ll-top-stepper{
  display:inline-flex; align-items:center; gap:11px; flex-shrink:0;
  padding-left:14px; position:relative;
}
/* trait de séparation fin AVEC ombre portée (uniquement sur le trait) */
.ll-top-btn .ll-top-stepper::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1.5px; height:70%;
  background:rgba(255,255,255,.55);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.ll-top-btn .ll-top-step{
  width:auto; height:auto; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:400; color:#fff; background:none;
  border-radius:0; cursor:pointer; user-select:none; line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.18); transition:opacity .15s;
}
.ll-top-btn .ll-top-step:hover{ background:none; opacity:.7; }
.ll-top-btn .ll-top-step:active{ transform:scale(.9); }
.ll-top-btn .ll-top-step.off{ opacity:.35; pointer-events:none; }
.ll-top-btn .ll-top-val{
  min-width:14px; text-align:center; font-size:16px; font-weight:800;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.18);
}

/* sélecteur de quantité natif masqué sur les fiches en location */
.product-quantity.ll-qty-hidden .qty,
.product-quantity.ll-qty-hidden .input-group,
.product-quantity.ll-qty-hidden label[for="quantity_wanted"]{ display:none !important; }

/* mobile : on resserre, l'année est déjà absente des libellés du haut */
@media (max-width:767px){
  button.ll-top-btn, .ll-top-btn{
    font-size:12.5px !important; padding:11px 12px !important; gap:7px !important;
    flex-wrap:nowrap !important; overflow:visible !important;
  }
  .ll-top-btn .material-icons{ font-size:16px; }
  .ll-top-btn .ll-top-main{
    flex:1 1 auto; min-width:0; width:100%;
    display:flex !important; align-items:center !important;
    justify-content:center !important; text-align:center !important;
  }
  /* le libellé peut passer sur 2 lignes au lieu d'être coupé */
  .ll-top-btn .ll-top-lbl{
    white-space:normal; overflow:visible; text-overflow:clip;
    line-height:1.2; text-align:center !important;
  }
  .ll-top-btn .ll-top-step{ width:auto; height:auto; font-size:18px; }
  .ll-top-btn .ll-top-val{ font-size:14px; }
  .ll-top-btn .ll-top-stepper{ gap:8px; padding-left:10px; }
}

/* ============================================================
   ENCART "PÉRIODE DÉJÀ AU PANIER" — remplace le planning quand
   le panier contient déjà une période de location.
   ============================================================ */
.ll-cal .ll-cart-period{ padding:18px 16px 20px; }
.ll-cal .ll-cp-card{
  background:var(--y-soft);
  border:1.5px solid #ffe08a;
  border-radius:14px;
  padding:22px 18px;
  text-align:center;
  margin-bottom:16px;
}
.ll-cal .ll-cp-icon{
  width:52px;height:52px;border-radius:50%;background:var(--y);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.ll-cal .ll-cp-title{
  font-size:17px;font-weight:800;color:var(--ink);margin-bottom:6px;
}
.ll-cal .ll-cp-text{
  font-size:13.5px;color:#5a5a52;line-height:1.55;
}
.ll-cal .ll-cp-text strong{ color:var(--ink); }
/* Le message nominatif porte des noms d'articles, parfois longs et avec
   leur déclinaison. Sans césure, « Projecteur PAR64-LED-RGBW — Couleur :
   Noir » débordait du cadre jaune sur un téléphone étroit. */
.ll-cal .ll-cp-deja{ overflow-wrap:anywhere; }
/* le bouton de l'encart hérite de .cta.ready (vert + stepper + pulse) */
.ll-cal .ll-cp-cta{ margin-top:0; }
.ll-cal .ll-cp-cta.cta-out{
  background:#b8b8b2 !important; animation:none; cursor:not-allowed;
}
.ll-cal .ll-cp-cta.cta-out .ll-stepper{ display:none !important; }

/* Zone "pack/produit indisponible" dans l'encart location en cours */
.ll-cal .ll-cp-indispo{ margin-top:14px; text-align:left; }
.ll-cal .ll-cp-indispo .ll-pinfo-panel{ margin:0; box-shadow:0 4px 16px rgba(0,0,0,.08); }
/* produit simple indisponible : encart gris clair, centré */
.ll-cal .ll-cp-indispo-simple{
  background:#f1f1ef; border:1px solid #e4e4e0; border-radius:14px;
  padding:18px 16px; text-align:center;
}
.ll-cal .ll-cp-indispo-ic{ font-size:26px; line-height:1; margin-bottom:8px; }
.ll-cal .ll-cp-indispo-txt{
  font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:.4px;
  color:#8a8a85;
}
.ll-cal .ll-cp-indispo-sub{
  margin-top:6px; font-size:12.5px; font-weight:600; color:#9a9a95; line-height:1.45;
}
@media (min-width:768px){
  .ll-cal .ll-cp-indispo-txt{ font-size:17px; }
  .ll-cal .ll-cp-indispo-sub{ font-size:13.5px; }
}
/* lien "Voir mon panier" */
.ll-cal .ll-cp-cart-link{
  display:block;text-align:center;margin-top:14px;
  font-size:13.5px;font-weight:700;color:var(--go-d);
  text-decoration:none;transition:color .15s;
}
.ll-cal .ll-cp-cart-link:hover{ color:var(--go); text-decoration:underline; }
@media (min-width:768px){
  .ll-cal .ll-cp-title{ font-size:19px; }
  .ll-cal .ll-cp-text{ font-size:14.5px; }
}

/* ===== ⓘ « pourquoi ce pack est complet » sur les cases grisées ===== */
.ll-cal .cell .ll-pinfo{
  position:absolute; top:3px; right:3px; z-index:6;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--y); color:var(--ink);
  font-size:11px; font-weight:800; font-style:italic;
  line-height:1; cursor:pointer; opacity:1; filter:none;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  font-family:Georgia,'Times New Roman',serif;
}
.ll-cal .cell.closed .ll-pinfo{ opacity:1; }   /* le ⓘ reste vif même sur case grisée */
.ll-cal .cell .ll-pinfo:hover{ transform:scale(1.12); }
.ll-cal .cell .ll-pinfo.open{ background:var(--ink); color:var(--y); }  /* ⓘ actif */

/* ===== Panneau d'info pack sous le calendrier (remplace l'ancien pop-up).
   Affiché dans le flux, sous la grille → aucun calcul de position, identique
   desktop et mobile, pas de débordement. ===== */
/* ===== Panneau "pourquoi ce pack n'est pas dispo" sous la grille =====
   Identité LOCLIGHT : bandeau jaune en tête, noir d'encre, vert dispo, typo titrée. */
.ll-pinfo-panel{
  position:relative;
  margin:6px 2px 16px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 8px 26px rgba(0,0,0,.12);
  overflow:hidden; text-align:left;
  animation:llPanelIn .2s ease;
}
@keyframes llPanelIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }

/* bandeau jaune de tête (jaune plat, sans dégradé ni bordure sombre) */
.ll-pinfo-bar{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--y);
  color:#fff; padding:14px 14px 13px 16px;
}
.ll-pinfo-bar-txt{ flex:1 1 auto; min-width:0; }
.ll-pinfo-h{
  font-size:16px; font-weight:900; letter-spacing:.3px;
  text-transform:uppercase; line-height:1.15; color:#fff;
}
.ll-pinfo-sub{
  margin-top:5px; font-size:12.5px; line-height:1.45; font-weight:600;
  color:#fff;
}
/* desktop : titre et sous-titre plus grands (mobile inchangé) */
@media (min-width:769px){
  .ll-pinfo-h{ font-size:20px; }
  .ll-pinfo-sub{ font-size:14.5px; }
}
.ll-pinfo-x{
  flex:0 0 auto;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1; font-weight:700;
  color:#fff; background:rgba(255,255,255,.22); cursor:pointer;
  border:none; padding:0; transition:background .12s;
}
.ll-pinfo-x:hover{ background:rgba(255,255,255,.38); }

/* corps : liste des composants */
.ll-pinfo-body{ padding:14px 16px 15px; }
.ll-pinfo-ul{ list-style:none; margin:0; padding:0; }
.ll-pinfo-ul li{
  display:flex; align-items:center; gap:9px;
  font-size:14px; line-height:1.5; padding:5px 0;
  border-bottom:1px solid #f4f4f0;
}
.ll-pinfo-ul li:last-child{ border-bottom:none; }
.ll-pinfo-m{ flex:0 0 auto; width:20px; text-align:center; font-size:14px; line-height:1; }
.ll-pinfo-ul li.ko{ color:#d33; }
.ll-pinfo-ul li.ok{ color:var(--go); }
.ll-pinfo-lnk{
  color:inherit; font-weight:800; text-decoration:none;
  text-transform:uppercase; letter-spacing:.2px;
}
.ll-pinfo-lnk:hover{ text-decoration:underline; }
.ll-pinfo-foot{
  margin-top:11px; padding-top:9px; border-top:1px solid #f0f0ec;
  font-size:12px; line-height:1.45; color:var(--muted);
}



/* ===== MASQUAGE MOR EN MODE PREVIEW =====
   Ce CSS n'est chargé QUE lorsque l'aperçu LOCLIGHT est actif (hookDisplayHeader).
   On masque le(s) bouton(s) MOR natif(s) "ajouter au panier / même réservation"
   qui font doublon avec notre calendrier. Ciblage précis par classe MOR pour
   ne RIEN masquer d'autre. */
.same_resa_to_cart_button,
button.same_resa_to_cart_button,
.exclusive.same_resa_to_cart_button{
  display:none !important;
}

/* bouton du haut en état "indisponible aux dates du panier" : design option D
   (fond clair, bordure jaune, titre + sous-texte) */
.ll-top-btn.ll-top-out{
  background:#ffc600 !important;
  border:2px solid #ffc600 !important;
  cursor:not-allowed;
  opacity:1;
  filter:none;
  padding:14px 16px !important;
  display:block !important;
  text-align:center;
}
.ll-top-btn.ll-top-out .ll-out-box{
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.ll-top-btn.ll-top-out .ll-out-title{
  font-size:15px; font-weight:800; color:#ffffff; line-height:1.25;
  letter-spacing:.02em;
  display:flex; align-items:center; gap:8px;
}
.ll-top-btn.ll-top-out .ll-out-emo{ font-size:16px; }
.ll-top-btn.ll-top-out .ll-out-sub{
  font-size:12.5px; font-weight:500; color:#ffffff; line-height:1.4;
}
/* ============================================================
 *  LOCLIGHT — Fenêtre « Ajouté à votre panier » (remplacement complet)
 *  Classes llm-* · générées par crosssell.js (mode remplacement total)
 *  ⚠ Incrémenter le ?v= de calendar.css dans hookDisplayHeader (loclightplanning.php)
 *  06/10/2026 : refaite sur le modèle du panier v5 (maquette
 *  ajout-tiroir-dates.html). Charte : noir, blanc, gris, jaune #ffc600.
 *  Polices (06/10 soir, Big Shoulders retirée) : Avenir Bold (montants), Avenir Bold Cn (titres), Avenir
 *  Bold (nom), Montserrat (texte). Téléphone : feuille basse.
 * ============================================================ */
/* le thème impose 1140 px sur #blockcart-modal .modal-dialog : sélecteur plus fort ; voile sombre que le thème ne pose pas */
#blockcart-modal.llm-modal{background:rgba(20,20,20,.55)}
#blockcart-modal.llm-modal .modal-dialog{max-width:600px;width:calc(100% - 32px);margin:64px auto}
.modal-content.llm-content{
  --m-noir:#141414;--m-txt:#1a1a1a;--m-g2:#5c5c5c;--m-g3:#8f8f8f;--m-g4:#c4c4c4;--m-filet:#ebebeb;--m-fond:#f7f7f6;--m-j:#ffc600;
  --m-titre:'AVENIRNEXTLTPRO-BOLD','Avenir Next',Montserrat,sans-serif;   /* 06/10 soir : montants en Avenir Bold */
  --m-cn:'AVENIRNEXTLTPRO-BOLDCN','Avenir Next Condensed',sans-serif;
  --m-av:'AVENIRNEXTLTPRO-BOLD','Avenir Next',Montserrat,sans-serif;
  padding:0 !important;border:none !important;border-radius:16px !important;overflow:hidden !important;
  background:#fff;color:var(--m-txt);
  font-family:Montserrat,system-ui,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.modal-content.llm-content *{box-sizing:border-box}
.modal-content.llm-content [hidden]{display:none !important}
.modal-content.llm-content .modal-header,
.modal-content.llm-content .modal-body{padding:0 !important;border:none !important}

.llm-grip{display:none}
.llm-head{display:flex;align-items:center;gap:12px;padding:18px 20px 16px 24px;border-bottom:1px solid var(--m-filet)}
.llm-check{flex:none;width:26px;height:26px;border-radius:50%;background:var(--m-j);display:flex;align-items:center;justify-content:center}
.llm-check svg{width:13px;height:13px;fill:none;stroke:var(--m-noir);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.llm-head-t{flex:1;min-width:0}
.llm-content .llm-head h2{margin:0;padding:0;font-family:var(--m-cn);font-weight:700;font-size:21px;line-height:1.15;letter-spacing:0;text-transform:none;color:var(--m-txt)}
.llm-close{flex:none;width:34px;height:34px;border-radius:8px;border:1px solid var(--m-filet);background:#fff;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.llm-close svg{width:14px;height:14px;fill:none;stroke:var(--m-txt);stroke-width:2;stroke-linecap:round}
.llm-close:hover{border-color:var(--m-txt)}

/* l'article ajouté */
.llm-product{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 24px}
.llm-thumb{width:96px;height:76px;border-radius:8px;overflow:hidden;background:var(--m-fond)}
.llm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.llm-vente .llm-thumb img{object-fit:contain}
.llm-noimg{display:block;width:100%;height:100%;background:var(--m-fond)}
.llm-name{font-family:var(--m-av);font-weight:700;font-size:15px;line-height:1.25;color:var(--m-txt)}
.llm-meta{margin-top:5px;font-size:13px;color:var(--m-g2);line-height:1.4}
.llm-dates{display:block;margin-top:3px;font-size:13px;line-height:1.35;color:var(--m-g2)}
.llm-dates:empty,.llm-qte:empty{display:none}
.llm-qte:not(:empty){margin-right:8px}
.llm-pro{display:inline-block;margin:0;font-style:normal;font-size:11px;font-weight:700;line-height:1.4;
  background:var(--m-noir);color:var(--m-j);border-radius:5px;padding:1px 7px;vertical-align:1px}
.llm-price{text-align:right;white-space:nowrap}
.llm-price s{display:block;font-size:12px;color:var(--m-g3)}
.llm-price b{display:block;font-family:var(--m-titre);font-weight:700;font-size:21px;line-height:1.1;letter-spacing:-.01em}
.llm-price small{font-size:11px;color:var(--m-g3)}

/* le panier */
.llm-recap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 24px;padding:12px 0;
  border-top:1px solid var(--m-filet);font-size:13px;color:var(--m-g2)}
.llm-recap b{font-family:var(--m-titre);font-weight:700;font-size:17px;color:var(--m-txt);letter-spacing:-.01em}
.llm-recap small{font-size:11px;color:var(--m-g3)}

/* « Complétez votre location » */
.llm-xsell{background:var(--m-fond);border-top:1px solid var(--m-filet)}
.llm-xsell-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:16px 24px 10px}
.llm-content .llm-xsell-head h3{margin:0;padding:0;font-family:var(--m-cn);font-weight:700;font-size:17px;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--m-txt)}
.llm-xsell-sub{font-size:12px;color:var(--m-g3)}
.llm-vente .llm-xsell-sub{display:none}
.llm-xsell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 24px 18px}
.llm-xsell-card{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--m-filet);border-radius:10px;padding:10px;min-width:0}
.llm-xsell-img{display:block;height:78px}
.llm-xsell-img img{width:100%;height:100%;object-fit:contain;display:block}
.llm-content a.llm-xsell-name{display:block;min-height:31px;font-size:12px;font-weight:600;line-height:1.3;color:var(--m-txt);text-decoration:none;text-transform:none}
.llm-content a.llm-xsell-name:hover{color:var(--m-txt);text-decoration:underline}
.llm-xsell-bas{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto}
.llm-xsell-bas b{font-family:var(--m-titre);font-weight:700;font-size:14px;white-space:nowrap}
.llm-xsell-add{flex:none;width:30px;height:30px;border:0;border-radius:50%;padding:0;background:var(--m-noir);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.llm-xsell-add svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.llm-xsell-add:hover{background:#000}
.llm-xsell-add.is-added{background:var(--m-j);color:var(--m-noir);cursor:default}
.llm-xsell-add.is-added svg{stroke-width:3}
.llm-xsell-add.is-erreur{background:var(--m-g4)}
.llm-spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:llm-spin .7s linear infinite}
@keyframes llm-spin{to{transform:rotate(360deg)}}
.llm-dots{display:none}

/* actions */
.llm-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--m-filet)}
.llm-lien{background:none;border:0;padding:2px 0;font-family:inherit;font-size:13px;font-weight:600;color:var(--m-txt);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.llm-btn{flex:none;min-width:240px;height:48px;padding:0 22px;border:0;border-radius:10px;background:var(--m-j);color:var(--m-noir);
  font-family:var(--m-cn);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.llm-btn:hover{background:#ffd23f}
.llm-btn:focus-visible,.llm-lien:focus-visible,.llm-close:focus-visible{outline:2px solid var(--m-noir);outline-offset:2px}

/* téléphone : feuille basse */
@media (max-width:767px){
  #blockcart-modal.llm-modal .modal-dialog{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;margin:0;transform:none !important}
  .modal-content.llm-content{border-radius:18px 18px 0 0 !important;max-height:88vh;overflow-y:auto !important;
    box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:llm-monte .26s cubic-bezier(.2,.8,.3,1)}
  .llm-grip{display:block;width:40px;height:4px;border-radius:2px;background:var(--m-g4);margin:8px auto 0}
  .llm-head{padding:12px 16px 12px 18px}
  .llm-content .llm-head h2{font-size:19px}
  .llm-dates{font-size:12.5px}
  .llm-product{grid-template-columns:72px minmax(0,1fr) auto;gap:12px;padding:14px 18px}
  .llm-thumb{width:72px;height:58px}
  .llm-name{font-size:14px}
  .llm-meta{font-size:12px}
  .llm-price b{font-size:19px}
  .llm-price small{display:none}
  .llm-recap{margin:0 18px}
  .llm-recap-l{display:none}
  .llm-recap small{display:none}
  .llm-xsell-head{padding:14px 18px 8px}
  .llm-xsell-sub{display:none}
  .llm-xsell-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:0 18px 6px;scroll-padding:0 18px}
  .llm-xsell-grid::-webkit-scrollbar{display:none}
  .llm-xsell-card{flex:0 0 46%;scroll-snap-align:start}
  .llm-dots{display:flex;justify-content:center;gap:5px;padding:4px 0 12px}
  .llm-dots[hidden]{display:none}
  .llm-dots i{width:5px;height:5px;border-radius:3px;background:var(--m-g4);transition:width .2s ease}
  .llm-dots i.on{width:14px;background:var(--m-noir)}
  .llm-actions{flex-direction:column-reverse;align-items:stretch;gap:10px;padding:12px 18px calc(18px + env(safe-area-inset-bottom))}
  .llm-btn{min-width:0;width:100%;height:46px}
  .llm-lien{align-self:center}
}
@keyframes llm-monte{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.modal-content.llm-content{animation:none}}

/* ============================================================
   FENÊTRE « produit du pack indisponible » (01/10/2026)
   Posée sur le document (hors .ll-cal) : couleurs écrites en dur.
   ⚠ Incrémenter le ?v= de calendar.css dans loclightplanning.php.
   ============================================================ */
html.ll-m-ouverte, html.ll-m-ouverte body{ overflow:hidden; }
.ll-m-fond{
  position:fixed; inset:0; z-index:10000;
  background:rgba(17,17,17,.55);
  display:flex; align-items:center; justify-content:center;
  padding:16px; box-sizing:border-box;
  animation:llMFond .18s ease-out;
}
@keyframes llMFond{ from{ opacity:0; } to{ opacity:1; } }
.ll-m{
  position:relative; width:100%; max-width:520px; max-height:calc(100vh - 32px); overflow:auto;
  background:#fff; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.28);
  padding:28px 24px 22px; box-sizing:border-box; text-align:center;
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#1a1a1a;
  animation:llMBoite .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes llMBoite{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.ll-m svg{ fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.ll-m-x{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  border:0; background:#f1f1ef; color:#1a1a1a; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.ll-m-x:hover{ background:#e6e6e3; }
.ll-m-x svg{ width:16px; height:16px; stroke-width:2.4; }
.ll-m-halo{ width:76px; height:76px; border-radius:50%; background:#fff6d6; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.ll-m-alerte{ width:46px; height:46px; border-radius:50%; background:#ffc600; color:#fff; display:flex; align-items:center; justify-content:center; }
.ll-m-alerte svg{ width:26px; height:26px; stroke-width:3; }
.ll-m .ll-m-titre{ font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-transform:none; margin:0 0 10px; font-size:24px; line-height:1.2; font-weight:800; color:#1a1a1a; letter-spacing:-.01em; }
.ll-m-sous{ margin:0 auto 18px; max-width:440px; font-size:15px; line-height:1.5; color:#5a5a57; }
.ll-m-table{ border:1px solid #e6e6e3; border-radius:14px; overflow:hidden; text-align:left; margin:0 0 14px; }
.ll-m-table-h{ background:#f4f4f2; padding:12px 16px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#5a5a57; }
.ll-m-table ul{ list-style:none; margin:0; padding:0 16px; }
.ll-m-table li{ border-top:1px solid #ececea; }
.ll-m-table li:first-child{ border-top:0; }
.ll-m-ligne{ display:flex; align-items:center; gap:12px; padding:12px 0; color:#1a1a1a; text-decoration:none; }
.ll-m a.ll-m-lien, .ll-m a.ll-m-lien:hover, .ll-m a.ll-m-lien:focus, .ll-m a.ll-m-lien:visited{ color:#1a1a1a; text-decoration:none; }
.ll-m a.ll-m-lien:hover .ll-m-nom{ text-decoration:underline; }
.ll-m a.ll-m-lien:focus-visible{ outline:2px solid #ffc600; outline-offset:2px; border-radius:6px; }
.ll-m-rond{ width:26px; height:26px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; }
.ll-m-rond svg{ width:15px; height:15px; stroke-width:2.8; }
.ll-m-ko{ background:#d64545; }
.ll-m-ok{ background:#3a9a5b; }
.ll-m-nom{ flex:1; min-width:0; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:1.3; overflow-wrap:anywhere; }
.ll-m-etat{ flex:0 0 auto; min-width:6.4em; text-align:left; font-size:14px; font-weight:600; }
.ll-m-etat-ko{ color:#d64545; }
.ll-m-etat-ok{ color:#3a9a5b; }
.ll-m-chev{ flex:0 0 auto; display:flex; width:16px; color:#8a8a86; margin-left:-4px; }
.ll-m-chev svg{ width:16px; height:16px; stroke-width:2.2; }
.ll-m-info{ display:flex; gap:12px; align-items:flex-start; text-align:left; background:#fff8e7; border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.45; font-weight:600; color:#1a1a1a; }
.ll-m-info-ic{ width:24px; height:24px; border-radius:50%; background:#b98a1b; color:#fff; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.ll-m-info-ic svg{ width:14px; height:14px; stroke-width:2.8; }
@media (max-width:560px){
  .ll-m{ padding:24px 16px 16px; border-radius:16px; }
  .ll-m .ll-m-titre{ font-size:20px; }
  .ll-m-sous{ font-size:14px; }
  .ll-m-halo{ width:64px; height:64px; } .ll-m-alerte{ width:40px; height:40px; }
  .ll-m-nom, .ll-m-etat{ font-size:12.5px; }
  .ll-m-info{ font-size:13px; }
}
/* Bouton de la carte v2 quand le pack est indisponible sur la période du
   panier : même gabarit que l'état d'attente, mais cliquable (ouvre la fenêtre). */
#main.ll2 .ll2-cta.ll2-cta-detail{
  background:#fff; color:#1a1a1a; box-shadow:inset 0 0 0 1.5px #1a1a1a;
  text-transform:none; letter-spacing:0; font-weight:700; font-size:13px; min-height:44px; cursor:pointer;
}
#main.ll2 .ll2-cta.ll2-cta-detail:hover{ background:#f4f4f2; }

/* ===== 09/10/2026 : jours fermés cliquables (calendar.js, bloc JF) =====
   Couleurs et animations des cases : thème (product-3.css). Ici la bulle
   noire et l'infobulle « Indisponible ». */
@keyframes llJfBulle{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.ll-cal .grid .cell[data-tip]{ overflow:visible; }
.ll-cal .grid .cell[data-tip]:hover::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:#141414; color:#fff; font-size:11.5px; font-weight:600; white-space:nowrap; padding:5px 9px; border-radius:7px; z-index:10; pointer-events:none; display:block; }
.ll-cal .grid .ll-jf-bulle{ grid-column:1/-1; position:relative; margin:4px 0 2px; background:radial-gradient(circle 110px at 92% 0%,rgba(255,198,0,.26),rgba(255,198,0,0) 100%),#141414; color:#fff; border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.5; text-align:left; animation:llJfBulle .28s ease-out; }
.ll-cal .grid .ll-jf-bulle::before{ content:""; position:absolute; top:-7px; left:var(--ll-jf-fleche,50%); margin-left:-8px; border:8px solid transparent; border-top:0; border-bottom-color:#141414; }
.ll-cal .grid .ll-jf-bulle.ll-jf-sans-fleche::before{ display:none; }
.ll-cal .grid .ll-jf-bulle p{ margin:0; padding-right:18px; color:#fff; font-size:13px; }
.ll-cal .grid .ll-jf-bulle b{ color:#ffc600; font-weight:700; }
.ll-cal .grid .ll-jf-x{ position:absolute; top:6px; right:6px; width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:#bdbdb8; display:grid; place-items:center; cursor:pointer; padding:0; }
.ll-cal .grid .ll-jf-x:hover{ color:#fff; background:rgba(255,255,255,.12); }
.ll-cal .grid .ll-jf-x svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
@media (prefers-reduced-motion:reduce){ .ll-cal .grid .ll-jf-bulle{ animation:none; } }