/* =================  DÉCLINAISONS DANS LE CADRE DE LOCATION  =================
   Le cadre .ll-resa-box a été dessiné pour des produits SANS déclinaison :
   la règle du thème « .ll-resa-box .product-variants { margin:0!important;
   padding:0!important } » laissait le bloc d'options collé au bord jaune,
   le libellé encadré d'un filet blanc et le select flottant à droite.

   PARTI PRIS retenu avec LOCLIGHT : le cadre doit rester STRICTEMENT
   identique à celui d'un produit sans déclinaison. Les options prennent donc
   place DANS la carte blanche, sous la pastille « pour un jour ou un
   week-end », et le bouton « Choisir mes dates » garde son habillage
   d'origine — cette feuille ne le touche pas d'une ligne.

   Chargée UNIQUEMENT sur les fiches louables (hookDisplayHeader). Sans
   déclinaison, .product-variants n'existe pas : aucun effet.
   ⚠ INCRÉMENTER ?v= dans loclightplanning.php à chaque modification.        */

/* --- Le bloc d'options prolonge la carte blanche --- */
.ll-resa-box .product-variants {
  display: block !important;
  background: #ffffff !important;
  /* même gouttière latérale que .product-price (20px) : les deux zones
     blanches ne forment qu'une seule carte à l'œil */
  padding: 0 20px 18px !important;
  margin: 0 !important;
}

/* --- « OPTIONS DU PRODUIT : » retiré : le libellé de l'attribut suffit --- */
.ll-resa-box .product-variants > p {
  display: none !important;
}

/* --- Un groupe d'attributs = une colonne centrée, comme le prix --- */
.ll-resa-box .product-variants > .product-variants-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Libellé de l'attribut : discret face au prix.
       Enfant DIRECT : les libellés des pastilles sont plus profonds
       (item > ul > li > label > span) et ont leur propre habillage. --- */
.ll-resa-box .product-variants > .product-variants-item > span.control-label,
.ll-resa-box .product-variants > .product-variants-item > span {
  float: none !important;
  border: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9a968b !important;
  line-height: 1.2 !important;
}

/* =====================  DÉCLINAISONS EN BOUTONS À COCHER  =====================
   Balisage PrestaShop : item > ul > li > label > (input.input-radio + span).
   Le radio natif est masqué — mais reste focusable — et c'est le span qui
   devient la pastille : pas de :has(), compatible partout.

   Le cadre vit dans une colonne, sa largeur ne suit pas celle de la fenêtre :
   c'est le retour à la ligne du flex qui adapte, pas un point de rupture
   d'écran (1 ligne à 510px, 2 à 300px, 4 à 240px, sans débordement).       */
.ll-resa-box .product-variants > .product-variants-item ul {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 7px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.ll-resa-box .product-variants > .product-variants-item ul li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.ll-resa-box .product-variants > .product-variants-item ul li label {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
.ll-resa-box .product-variants ul li label input.input-radio,
.ll-resa-box .product-variants ul li label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
/* La pastille. Fond beige et non blanc : sur la carte blanche, du blanc sur
   blanc disparaîtrait. */
.ll-resa-box .product-variants ul li label .radio-label,
.ll-resa-box .product-variants ul li label > span {
  display: inline-block;
  margin: 0 !important;
  padding: 7px 15px !important;
  background: #faf9f5;
  border: 1.5px solid #e6e2d7;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  white-space: nowrap;
  transition: all .15s ease;
}
.ll-resa-box .product-variants ul li label:hover > span {
  border-color: #c9c4b8;
}
/* Déclinaison retenue : même couple que le bouton d'action — le jaune
   signale ce qui est actif, sur toute la fiche. */
.ll-resa-box .product-variants ul li label input:checked + .radio-label,
.ll-resa-box .product-variants ul li label input:checked + span {
  background: #ffc600;
  border-color: #ffc600;
  color: #ffffff;
}
/* Parcours au clavier : la pastille visée reste visible. */
.ll-resa-box .product-variants ul li label input:focus-visible + .radio-label,
.ll-resa-box .product-variants ul li label input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(26, 26, 26, .2);
}
/* Pastilles de couleur : on garde la vignette ronde, sans la pilule. */
.ll-resa-box .product-variants ul li label > span.color {
  padding: 0 !important;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

/* --- Déclinaisons en LISTE DÉROULANTE : même zone blanche, centré --- */
.ll-resa-box .product-variants > .product-variants-item select {
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 320px;
  height: auto !important;
  margin: 0 auto !important;
  padding: 9px 36px 9px 13px !important;
  background-color: #fff !important;
  border: 1.5px solid #e6e2d7 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600;
  color: #1a1a1a !important;
  line-height: 1.25;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* chevron dessiné en SVG : aucune image à charger */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 11px 7px !important;
}
.ll-resa-box .product-variants > .product-variants-item select:focus {
  outline: 0;
  border-color: #1a1a1a !important;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, .12) !important;
}

/* --- Cadre en rupture : les options restent lisibles, en retrait --- */
.ll-resa-box.ll-resa-out .product-variants { opacity: .55; }

/* =====================  OPTION B : LES CARTES TARIFÉES  =====================
   Retenue par LOCLIGHT le 31/08/2026 après comparaison de quatre maquettes.

   CE QUI CHANGE, ET POURQUOI. Les pastilles disaient « 5 mètres / 10 mètres /
   20 mètres » et rien d'autre : pour comparer les tarifs, le client devait
   cliquer sur chaque longueur et lire le prix qui changeait plus bas. Trois
   allers-retours pour une question qu'il se pose en une seconde. Chaque option
   porte donc désormais SON prix.

   CE QUE ÇA COÛTE, mesuré à 375 px : le bloc passe de 93 à 138 px, soit 45 px
   de plus. C'est la plus chère des trois pistes proposées, et c'est un choix
   assumé — sur une fiche de location, savoir combien coûte chaque longueur
   vaut mieux que 45 px de défilement.

   LA CLASSE .ll-var-cartes EST POSÉE PAR LE JAVASCRIPT, et seulement quand au
   moins un prix a pu être calculé. Sans ll-variants.js — case décochée, appel
   ajax en échec, produit sans tarif — rien de ce bloc ne s'applique et les
   pastilles d'origine restent en place. Il n'y a donc jamais de carte vide.

   LE CONTRASTE. La pastille retenue écrivait du blanc sur le jaune : 1,58:1,
   quand un texte lisible demande 4,5:1. La carte retenue garde le jaune en
   liseré et en fond pâle, et le texte en encre : 16,5:1. Ce n'était pas une
   affaire de goût.
   ========================================================================== */

.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul {
  gap: 8px;
  align-items: stretch;
  /* LE <ul> DOIT PRENDRE TOUTE LA LARGEUR, et il ne le fait pas tout seul.
     Son parent .product-variants-item est une colonne flex centrée (pour que
     le libellé « LONGUEUR » s'aligne sur le prix) : un enfant y est réduit à
     son contenu. Mesuré : le <ul> faisait 225 px dans un cadre de 347, si bien
     que les cartes, pourtant à parts égales entre elles, laissaient 60 px de
     vide de chaque côté — exactement le défaut qu'on venait corriger. */
  align-self: stretch;
  width: 100%;
}
/* Parts égales. Les libellés n'ont pas la même longueur (« 5 mètres » contre
   « 20 mètres ») : à largeur libre, les cartes étaient bancales alors qu'elles
   jouent le même rôle. min-width:0 autorise le rétrécissement sous 320 px. */
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li {
  flex: 1 1 0;
  min-width: 0;
}
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li label {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
}

/* ---- box-sizing : LA LIGNE SANS LAQUELLE TOUT DÉBORDE ----
   Le module remet box-sizing:border-box sur tout ce qui vit dans .ll-cal ;
   .product-variants, lui, appartient au thème et n'est PAS dans .ll-cal.
   Ses spans sont donc en content-box : « width:100% » y ajoute le padding et
   la bordure PAR-DESSUS la largeur du conteneur. Mesuré : la case faisait
   94 px, la carte 108 et la ligne de prix 126 — les trois cartes sortaient du
   cadre jaune et la troisième était rognée.
   Ce défaut ne s'était pas vu sur le premier banc d'essai, dont la page posait
   « *{box-sizing:border-box} » et masquait le problème. La fixture a été
   refaite à la géométrie exacte du site (.product-variants sur 19..356 px,
   iPhone 375), et le bug est apparu aussitôt. */
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li,
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li label,
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li label > span {
  box-sizing: border-box !important;
}

/* --- La carte remplace la pilule --- */
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li label > span.radio-label,
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li label > span:not(.ll-var-prix) {
  display: block;
  width: 100%;
  padding: 10px 6px 2px !important;
  background: #fff;
  border: 1.5px solid #e6e2d7;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
}
.ll-var-cartes .ll-var-n {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #1a1a1a;
}
/* Un libellé non numérique (« Noir mat ») n'a pas d'unité en dessous : il
   occupe la ligne entière, en plus petit pour qu'il tienne sans césure. */
.ll-var-cartes .ll-var-n-texte { font-size: 13.5px; }
.ll-var-cartes .ll-var-u {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #9a968b;
  margin-top: 1px;
}

/* --- Le prix, bas de carte ---
   SÉLECTEUR LONG, ET C'EST NÉCESSAIRE. La règle des pastilles vise
   « … ul li label > span » : la ligne de prix, qui est elle aussi un span
   enfant direct du label, l'attrapait au passage et repartait en pilule —
   coins arrondis à 999px, padding 7/15, largeur différente de la carte
   au-dessus. On repasse donc par le même chemin, en plus précis. */
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes
  ul li label > span.ll-var-prix {
  display: block;
  width: 100%;
  /* !important obligatoire : la règle des pastilles impose « padding:7px 15px
     !important » et gagnait ici, ce qui élargissait la ligne de prix de 30 px
     de plus que la carte au-dessus. */
  padding: 3px 6px 9px !important;
  /* HAUTEUR RÉSERVÉE, MÊME VIDE. La carte est dessinée dès l'affichage de la
     fiche ; les tarifs arrivent après l'appel serveur. Sans cette réserve, la
     ligne naissait à zéro puis poussait tout le bloc vers le bas au moment où
     les prix tombaient — le contenu sautait sous le doigt du client. */
  min-height: 28px;
  background: #fff;
  border: 1.5px solid #e6e2d7;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: #1f9d55;
  white-space: nowrap;
  line-height: 1.2;
}

/* ============ CE QUE LE THÈME IMPOSE, ET QU'IL FAUT DÉFAIRE ============
   Relevé le 31/08/2026 dans theme-c1d8471334.css, sur la fiche « Câble XLR »,
   Chrome de LOCLIGHT. Deux règles du thème traversaient les cartes :

     .radio-label { box-shadow: 0 0 8px rgba(0,0,0,.2) ... }
        → chaque carte portait une ombre portée grise, décalée de 2 px vers le
          bas et la droite. Sur trois cartes côte à côte, ça faisait sale.

     .product-variants > .product-variants-item span {
        display:inline-block; width:auto; border:1px; margin-right:35px;
        line-height:30px }
        → celle-ci frappe TOUT span du bloc, donc « 5 » et « mètres » à
          l'intérieur de la carte. D'où le nombre et l'unité côte à côte au
          lieu d'être empilés, et 35 px de blanc entre les deux.

   Aucune des deux ne se voyait sur banc d'essai : le thème n'y était pas.
   C'est la mesure sur le site qui les a sorties.

   La spécificité est calculée, pas devinée : la règle du thème vaut (0,2,2),
   les nôtres passent par le chemin long pour la dépasser sans !important. */
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes
  ul li label > span.radio-label,
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes
  ul li label > span.ll-var-prix {
  box-shadow: none;
  margin: 0 !important;
}
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes
  ul li label .ll-var-n,
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes
  ul li label .ll-var-u {
  display: block;
  width: auto;
  border: 0;
  margin: 0;
  line-height: 1.15;
}

/* ---- SUR GRAND ÉCRAN, LES CARTES NE S'ÉTIRENT PAS ----
   Le bloc d'options fait 503 px sur le poste de LOCLIGHT (fenêtre de 2166 px).
   À parts égales, chaque carte y prenait 162 px pour y écrire « 5 / MÈTRES /
   1,50 € » : trois grandes plaques presque vides. Les parts égales servent à
   remplir un écran de téléphone, pas à étirer trois mots sur un moniteur.
   On plafonne donc, et la rangée se centre — ce que le <ul> fait déjà. */
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li {
  max-width: 130px;
}

@media (hover: hover) and (pointer: fine) {
  .ll-resa-box .product-variants > .product-variants-item.ll-var-cartes
    ul li label:hover > span.radio-label,
  .ll-resa-box .product-variants > .product-variants-item.ll-var-cartes
    ul li label:hover > span.ll-var-prix { border-color: #c9c4b8; }
}

/* --- L'option retenue ---
   Fond jaune pâle et liseré jaune plein, texte en ENCRE. On ne reprend pas le
   jaune saturé des anciennes pastilles : sur une carte de trois lignes, il
   noierait le prix. */
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes
  ul li label input:checked + span.radio-label,
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes
  ul li label input:checked + span:not(.ll-var-prix) {
  background: #fff8e1;
  border-color: #ffc600;
  color: #1a1a1a;
}
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes
  ul li label input:checked ~ span.ll-var-prix {
  background: #fff8e1;
  border-color: #ffc600;
  color: #157a42;
}
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes
  ul li label input:focus-visible + span.radio-label {
  box-shadow: 0 0 0 3px rgba(26, 26, 26, .2);
}

/* ==========================================================================
   08/10/2026 — CARTES AVEC PHOTO (packs à versions, loclightproduit)
   La photo de la réponse (hook displayLoclightVarianteImage) coiffe la
   carte : même liseré, la carte retenue passe en jaune. Sans les cartes
   (ll-variants.js absent ou en échec), la photo est masquée : la pastille
   d'origine reste seule, rien à défaire.
   ========================================================================== */
.product-variants-item:not(.ll-var-cartes) .ll-var-img { display: none; }
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li.ll-var-avec-img label > img.ll-var-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  box-sizing: border-box;
  background: #fff;
  padding: 6px 6px 0;
  border: 1.5px solid #e6e2d7;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li.ll-var-avec-img label > span.radio-label,
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li.ll-var-avec-img label > span:not(.ll-var-prix) {
  border-top: 0 !important;
  border-radius: 0 !important;
  padding-top: 6px !important;
}
.ll-resa-box .product-variants > .product-variants-item.ll-var-cartes ul li.ll-var-avec-img label:has(input:checked) > img.ll-var-img {
  border-color: #ffc600;
  background: #fff8e1;
}