/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* =====================================================================
   LeaderBox — Modernisation du tunnel de réservation (CSS uniquement)
   ALIGNÉ SUR LA CHARTE IMPREZA (couleurs + style de boutons du thème)
   ---------------------------------------------------------------------
   OÙ COLLER : WordPress → Apparence → Personnaliser → CSS additionnel
   puis « Publier », et PURGER le cache LiteSpeed (sinon rien ne change).

   Ce CSS utilise les variables de couleur d'Impreza :
     --color-content-primary    #2c462d  (vert foncé)
     --color-content-secondary  #f5ca02  (jaune)
     --color-content-heading    #12301d  (vert quasi-noir, titres)
     --color-content-text       #12301d
     --color-content-link       #2f7f5f  (vert lien)
     --color-content-bg         #f3eee0  (crème)
     --color-content-bg-alt     #bcdea4  (vert clair)
   → Si tu modifies ta charte Impreza un jour, le tunnel suivra tout seul.

   N'affecte QUE l'apparence : aucune modification du fonctionnement.
   Réversible : supprime ce bloc pour revenir en arrière.
   ===================================================================== */

/* === 1. POLICES : Figtree (texte) + Gloock (titres), comme le site === */
/* Le plugin impose « Poppins » sur TOUT son conteneur et sur la plupart  */
/* de ses éléments → on force Figtree sur l'ensemble du mini-store,       */
/* sinon des bouts de texte restent en Poppins un peu partout.           */
.storegister-mini-store,
.storegister-mini-store * {
  font-family: "Figtree", sans-serif !important;
}
/* …puis on rétablit Gloock UNIQUEMENT sur les vrais titres (spécificité  */
/* plus forte que la règle large ci-dessus, donc ils gagnent).           */
.booking-item-main-container .booking-item-header-container h2,
.booking-item-main-container .booking-item-header-container h3,
.booking-item-main-container .booking-item-header-container h4,
.storegister-property-detail-container .storegister-header-container h1 {
  font-family: "Gloock", serif !important;
  font-weight: 400 !important;
  color: var(--color-content-heading, #12301d) !important;
  letter-spacing: .2px;
}
/* Titre du box (« Box de 1 m² ») en GRAS (Figtree possède un vrai gras). */
.storage-size-header-container h1 {
  font-weight: 700 !important;
}
/* IMPORTANT : on EXCLUT les icônes de la règle Figtree ci-dessus.        */
/* Les pictos (✓, épingle d'adresse, flèches…) sont dessinés avec la      */
/* police d'icônes « Material Symbols Outlined » ; si on leur met Figtree */
/* ils disparaissent. On rétablit donc leur police, en plus fort.        */
.storegister-mini-store .material-symbols-outlined,
.storegister-mini-store .material-symbols-outlined::before,
.storegister-mini-store .material-symbols-outlined::after,
.storegister-mini-store [class*="material-symbols"] {
  font-family: "Material Symbols Outlined" !important;
}

/* === 2. BOUTONS = style bouton Impreza (jaune, coins ~6px, Figtree 600) */
/* 3 contextes : liste des box, actions du tunnel, storage-size-price.   */
.action-btn,
.booking-item-main-container .booking-item-action-container
  .booking-item-btn-container a.action-btn,
.booking-item-main-container .booking-item-action-container
  .booking-item-btn-container button.action-btn,
.storegister-property-detail-container .storegister-property-box-container
  .property-box-data-container .property-box-data-info-container
  .property-box-container a.action-btn,
.storage-size-price-action-container .storage-size-price-btn-container .action-btn {
  background: #F0D122 !important;            /* jaune bouton du thème */
  color: var(--color-content-heading, #12301d) !important;
  border: none !important;
  border-radius: 6px !important;             /* coins Impreza */
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  box-shadow: 0 4px 14px rgba(240, 209, 34, .40) !important;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease !important;
}
/* Survol : doré du thème (#ccaf0e) + léger soulèvement */
.action-btn:hover,
.booking-item-main-container .booking-item-action-container
  .booking-item-btn-container a.action-btn:hover,
.booking-item-main-container .booking-item-action-container
  .booking-item-btn-container button.action-btn:hover,
.storage-size-price-action-container .storage-size-price-btn-container .action-btn:hover {
  background: #ccaf0e !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(204, 175, 14, .45) !important;
  animation: none !important;
}

/* === 3. CARTE PRINCIPALE DU TUNNEL : douce, arrondie, aérée ========= */
.booking-item-main-container {
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(18, 48, 29, .10) !important;
  overflow: hidden;
  width: 64%;
}
@media only screen and (max-width: 991px) {
  .booking-item-main-container { width: 92%; }
}
/* En-tête d'étape : bandeau beige clair de la charte (sur page blanche) */
.booking-item-main-container .booking-item-header-container {
  background: var(--color-content-bg, #f3eee0) !important;
  border-bottom: none !important;
  padding: 1.4rem 1.6rem !important;
}
/* (Le texte du titre reste foncé — parfaitement lisible sur le beige.)  */

/* === 4. CHAMPS DE FORMULAIRE : coins doux + focus vert du thème ===== */
.booking-item-main-container .booking-item-content-container .form-container
  .booking-item-form-container .booking-item-form-control-container
  .booking-item-form-control input,
.booking-item-main-container .booking-item-content-container .form-container
  .booking-item-form-container .booking-item-form-control-container
  .booking-item-form-control select {
  font-family: "Figtree", sans-serif !important;
  border: 1.5px solid #e7e2d4 !important;
  border-radius: 10px !important;
  background-color: #fafafa !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.booking-item-main-container .booking-item-content-container .form-container
  .booking-item-form-container .booking-item-form-control-container
  .booking-item-form-control input:hover,
.booking-item-main-container .booking-item-content-container .form-container
  .booking-item-form-container .booking-item-form-control-container
  .booking-item-form-control select:hover,
.booking-item-main-container .booking-item-content-container .form-container
  .booking-item-form-container .booking-item-form-control-container
  .booking-item-form-control input:focus,
.booking-item-main-container .booking-item-content-container .form-container
  .booking-item-form-container .booking-item-form-control-container
  .booking-item-form-control select:focus {
  border-color: var(--color-content-link, #2f7f5f) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(47, 127, 95, .15) !important;
}

/* === 5. CARTES DE BOX (liste) : ombres douces, survol réactif ======= */
.storegister-property-detail-container .storegister-property-box-container
  .property-box-data-container .property-box-data-info-container
  .property-box-container {
  border: 1px solid rgba(18, 48, 29, .08) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(18, 48, 29, .05) !important;
  transition: transform .15s ease, box-shadow .2s ease !important;
}
.storegister-property-detail-container .storegister-property-box-container
  .property-box-data-container .property-box-data-info-container
  .property-box-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(18, 48, 29, .10) !important;
  background-color: #fff !important;
}

/* === 6. CALENDRIER : couleurs de la charte (fini marron / bleu) ===== */
/* Pastille des jours : carré parfait -> cercle (fini les ovales).       */
/* Chaque jour épousait la largeur du chiffre (1 chiffre = étroit,        */
/* 2 chiffres = large), d'où des cercles déformés. On force une pastille  */
/* carrée centrée, peu importe le nombre de chiffres.                     */
.calendar-dates .calendar-box .calendar-item {
  width: 2.4rem !important;
  height: 2.4rem !important;
  min-width: 2.4rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  margin: 2px auto !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: background-color .15s ease !important;
}
/* Jour survolé → vert clair de la charte (au lieu du jaune, qui jurait   */
/* avec le vert du jour sélectionné). On ne survole pas les jours         */
/* désactivés ni le jour déjà sélectionné.                                */
.calendar-dates .calendar-box
  .calendar-item:not(.disabled):not(.current-day):hover {
  background-color: var(--color-content-bg-alt, #bcdea4) !important;
  color: var(--color-content-heading, #12301d) !important;
}
/* Jour du jour → vert lien du thème (au lieu du bleu) */
.booking-item-main-container .booking-item-content-container
  .booking-item-calendar-container .calendar-box .current-day,
.booking-item-main-container .booking-item-content-container form
  .booking-item-calendar-container .calendar-box .current-day {
  background-color: var(--color-content-link, #2f7f5f) !important;
  color: #fff !important;
}
/* Jour « heures de pointe » → doré du thème (au lieu du marron) */
.booking-item-main-container .booking-item-content-container
  .booking-item-calendar-container .calendar-box .hot-hours,
.booking-item-main-container .booking-item-content-container form
  .booking-item-calendar-container .calendar-box .hot-hours {
  background-color: #ccaf0e !important;
  color: var(--color-content-heading, #12301d) !important;
}
.booking-item-main-container .booking-item-content-container
  .booking-item-calendar-container .calendar-header,
.booking-item-main-container .booking-item-content-container form
  .booking-item-calendar-container .calendar-header {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--color-content-heading, #12301d) !important;
}

/* === 7. ÉTATS SÉLECTIONNÉS + FIL DES ÉTAPES ======================== */
/* Option / marchandise sélectionnée → bord vert du thème */
.booking-item-main-container .booking-item-content-container
  .booking-item-data-container .booking-merchandise-container
  .booking-merchandise-item-container.selected {
  border: 2px solid var(--color-content-link, #2f7f5f) !important;
  box-shadow: 0 4px 14px rgba(47, 127, 95, .18) !important;
}
/* Étape terminée du stepper → vert du thème */
.storage-booking-stepper .step-title.completed,
.step-title.completed { color: var(--color-content-link, #2f7f5f) !important; }

/* === 8. BANDEAUX D'INFO (« Informations techniques », récap) ======== */
/* Fond VERT FONCÉ de la charte + texte blanc : bien lisible, et fait   */
/* ressortir ces blocs d'info sur la page blanche (les titres d'étape,   */
/* eux, restent en beige clair — cf. section 3).                        */
.storage-size-box-information-table-header-container {
  background: var(--color-content-primary, #2c462d) !important;
}
/* En-tête du récap de droite (« Toulouse Centre » + adresse) sur la     */
/* page « Finaliser » : vert foncé, texte blanc.                        */
.booking-price-header-container {
  background: var(--color-content-primary, #2c462d) !important;
}
.booking-price-header-container h3,
.booking-price-header-container address {
  color: #fff !important;
}

/* === 9. CARROUSEL D'IMAGES : photo plus grande, flèches rondes ===== */
/* Avant : petite photo flottant dans un cadre blanc + flèches nues.   */
/* Après : image qui remplit le cadre, arrondie, ombre douce ;         */
/*         flèches en pastilles blanches ; vignettes arrondies.        */
/* Avant : la photo était bridée à 400px de large (max-width figés dans le   */
/* plugin) → petite image perdue dans un grand vide. On retire ces plafonds  */
/* puis on la recadre à une taille équilibrée (480px), centrée dans la       */
/* colonne. 480 = bon compromis (400 = trop petit, pleine colonne = trop     */
/* gros). Pour agrandir/réduire, change les deux « 480px » ci-dessous.       */
.image-carousel-container { flex-direction: column !important; align-items: stretch !important; }
.image-preview-wrapper {
  background: transparent !important;
  width: 100% !important;
  max-width: 480px !important;           /* taille de l'image (était bridée à 400) */
  margin: 0 auto !important;             /* centre le carrousel dans la colonne */
}
.image-preview-slider-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
}
.slider-container {
  width: 100% !important;
  max-width: none !important;            /* on retire le bridage d'origine (400px) */
}
.carousel-container {
  width: 100% !important;
  max-width: 480px !important;
  margin: 14px auto 0 !important;        /* vignettes alignées sous l'image */
}
#mainImage,
.slider-container .main-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(18, 48, 29, .14) !important;
}
/* Flèches précédent / suivant → pastilles blanches superposées */
.image-preview-slider-wrapper .left-arrow,
.image-preview-slider-wrapper .right-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 4px 14px rgba(18, 48, 29, .18) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.image-preview-slider-wrapper .left-arrow  { left: 12px !important; }
.image-preview-slider-wrapper .right-arrow { right: 12px !important; }
.image-preview-slider-wrapper .left-arrow:hover,
.image-preview-slider-wrapper .right-arrow:hover {
  background: #fff !important;
  transform: translateY(-50%) scale(1.08) !important;
}
/* Vignettes : coins arrondis, survol réactif, sélection en vert charte */
.carousel-container { margin-top: 14px !important; }
.carousel .thumbnail {
  border-radius: 9px !important;
  border: 2px solid transparent !important;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease !important;
  cursor: pointer;
}
.carousel .thumbnail:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(18, 48, 29, .14) !important;
}
.carousel .thumbnail.selected {                 /* était bordure turquoise */
  border-color: var(--color-content-link, #2f7f5f) !important;
  box-shadow: 0 4px 12px rgba(47, 127, 95, .22) !important;
}

/* === 10. SÉLECTEUR D'ÉTABLISSEMENT : pilule blanche, texte complet === */
/* Avant : Arial gris dans un conteneur figé à 300px → nom tronqué      */
/*         (surtout sur mobile, où la colonne est plus étroite).        */
/* Correctif clé : on libère le CONTENEUR parent (largeur souple) et    */
/* non plus seulement le <select>. Le select remplit alors toute la     */
/* largeur disponible de la colonne → le nom complet s'affiche partout, */
/* y compris sur téléphone. L'ellipsis (…) reste un filet de sécurité.  */
.storage-property-selector-box {
  width: 100% !important;       /* était figé à 300px → ne s'adaptait pas */
  max-width: 400px !important;  /* garde une taille raisonnable sur grand écran */
}
/* On vise les DEUX selects : desktop (#storegister-property) ET mobile     */
/* (#mobile-storegister-property), pour un rendu strictement identique.     */
#storegister-property,
#mobile-storegister-property {
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  color: var(--color-content-heading, #12301d) !important;
  background-color: #fff !important;
  border: 1.5px solid #e7e2d4 !important;
  border-radius: 12px !important;
  width: 100% !important;       /* remplit le conteneur (souple) */
  min-width: 0 !important;      /* ne force plus une largeur fixe */
  max-width: 100% !important;
  height: auto !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: .75rem 2.8rem .75rem 1.1rem !important;
  box-shadow: 0 2px 8px rgba(18, 48, 29, .06) !important;
  /* flèche verte (▼) dessinée en SVG, car appearance:none masque la native */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2312301d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 1.05rem center !important;
  background-size: 14px 14px !important;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#storegister-property:hover,
#storegister-property:focus,
#mobile-storegister-property:hover,
#mobile-storegister-property:focus {
  border-color: var(--color-content-link, #2f7f5f) !important;
  box-shadow: 0 0 0 3px rgba(47, 127, 95, .15) !important;
  outline: none !important;
}
/* Très petits écrans : on réduit un peu pour garantir que tout tienne. */
@media only screen and (max-width: 480px) {
  .storage-property-selector-box { max-width: 100% !important; }
  #storegister-property,
  #mobile-storegister-property {
    font-size: .92rem !important;
    padding-right: 2.4rem !important;
    background-position: right .85rem center !important;
  }
}

/* === 11. FOND DE PAGE DU TUNNEL : blanc (au lieu du crème) ========== */
/* Le fond crème de la charte (#f3eee0) est porté par « .l-canvas ».    */
/* On le passe en blanc sur TOUTES les pages qui contiennent le         */
/* mini-store de réservation (fiche box ET étapes du tunnel :           */
/* coordonnées, options, paiement, finalisation…). Les autres pages du  */
/* site gardent leur fond crème.                                        */
/* Règle universelle via « :has() » → plus besoin de lister les numéros */
/* de page un par un : toute nouvelle page du tunnel devient blanche     */
/* automatiquement. (Repli sûr : si un très vieux navigateur ignore      */
/* « :has() », la page reste simplement crème — aucun bug.)             */
.l-canvas:has(.storegister-mini-store) {
  background: #ffffff !important;
}

/* === 12. BADGE PROMO : pastille à côté de « Disponible » ============ */
/* Avant : un gros cercle vert sur l'image, où le texte débordait.       */
/* Après : on masque ce cercle, et la promo s'affiche en petite pastille */
/* verte juste à côté de « Disponible » (badge ajouté côté code, il      */
/* n'apparaît que s'il y a une vraie réduction → cf. .lb-promo-badge).   */
/* ⚠️ À déployer AVEC la modif de book-storage-shortcode.php : sans elle, */
/* la pastille n'existe pas et le cercle serait masqué sans remplacement.*/
.image-carousel-container .booking-discount { display: none !important; }
.storage-box-status-container {
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}
/* Même pastille sur les DEUX rendus : desktop (.storage-box-status-container) */
/* ET mobile (le bloc .disponible — cf. section 12 bis ci-dessous).           */
.storage-box-status-container .lb-promo-badge,
.storage-size-header-container .disponible .lb-promo-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--color-content-bg-alt, #bcdea4) !important;  /* vert tendre charte */
  color: var(--color-content-text, #12301d) !important;        /* texte vert foncé */
  font-weight: 700 !important;
  font-size: .8rem !important;
  line-height: 1 !important;
  letter-spacing: .2px !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;       /* pastille bien arrondie */
  box-shadow: 0 2px 8px rgba(18, 48, 29, .12) !important;
  white-space: nowrap !important;
}

/* === 12 bis. VERSION MOBILE de l'état « Disponible » =================== */
/* Sur mobile (≤767px) le plugin CACHE le bloc desktop et affiche à la     */
/* place un AUTRE bloc « .disponible » : un bandeau vert pleine largeur    */
/* avec la promo en texte brut → le style ne collait pas. On le réaligne   */
/* sur le rendu desktop : « Disponible » en texte foncé précédé d'une      */
/* pastille verte, suivi du MÊME badge promo beige-vert (cf. ci-dessus).   */
.storage-property-box-container .storage-size-header-container .disponible {
  background: transparent !important;     /* on retire le bandeau vert */
  color: var(--color-content-text, #12301d) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: .8rem !important;        /* petit espace avant le carrousel */
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}
.storage-property-box-container .storage-size-header-container .disponible strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  font-weight: 600 !important;
  color: var(--color-content-text, #12301d) !important;
}
/* Petite pastille verte « état dispo » devant le mot, comme en desktop. */
.storage-property-box-container .storage-size-header-container .disponible strong::before {
  content: "" !important;
  width: .7rem !important;
  height: .7rem !important;
  border-radius: 50% !important;
  background: #56b647 !important;
  flex: 0 0 auto !important;
}

/* === 13. PUCES « avantages » : contour discret (anti-surcharge) ===== */
/* Avant : 3 pastilles vert clair qui concurrençaient la promo et le     */
/* bouton → trop de vert, l'œil ne savait plus où regarder. Après : un   */
/* simple contour neutre avec une coche verte → elles deviennent une     */
/* réassurance secondaire, et le regard va à la promo puis au bouton.    */
.storage-size-price-chips {
  background: transparent !important;
  border: 1px solid #e6e1d3 !important;
  color: #5b5b5b !important;
  box-shadow: none !important;
}
.storage-size-price-chips .material-symbols-outlined {
  color: #2f7f5f !important;             /* coche verte, mais discrète */
}

/* === 14. BORDURES MODERNISÉES (fini le « vieillot ») =============== */
/* Le plugin utilisait des contours durs (noir #333 / gris #ccc, coins   */
/* carrés). On les remplace par des contours doux et arrondis.          */
/* Image du box : on retire le contour gris épais (la photo garde son    */
/* arrondi + son ombre douce, cf. section 9).                           */
#mainImage,
.slider-container .main-image {
  border: none !important;
}
/* Tableau « Informations techniques » : trait noir -> contour doux,     */
/* coins arrondis (overflow:hidden pour que l'en-tête vert suive l'arrondi). */
.storage-size-box-information-container {
  border: 1px solid #ece8db !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
/* Bloc calculateur d'estimation : contour noir -> contour doux arrondi. */
.storage-calculator-container {
  border: 1px solid #ece8db !important;
  border-radius: 14px !important;
}
.estimate-calc-button-container {
  border: none !important;
}
/* FAQ (accordéon) : traits francs -> traits doux. */
.faq-item {
  border-color: #ece8db !important;
}
/* Menus déroulants bruts : contour gris dur -> doux + arrondi. */
.storegister-mini-store select {
  border-color: #e6e1d3 !important;
  border-radius: 10px !important;
}
/* Fin filet au-dessus du prix : adouci. */
.storage-size-box-price-container {
  border-top-color: #ece8db !important;
}

/* === 13. ASSURANCE : pavé de prix jaune -> vert céladon ============== */
/* Les montants d'assurance (.../mois) étaient sur fond jaune vif.        */
/* On passe en vert céladon doux, cohérent avec la charte, texte foncé.  */
.addons-insurance-data-premium-box {
  background: #bcdea4 !important;        /* vert céladon (vert clair de la charte) */
  color: var(--color-content-heading, #12301d) !important;
}
.addons-insurance-data-premium-box .premium-amount,
.addons-insurance-data-premium-box .premium-amount-duration {
  color: var(--color-content-heading, #12301d) !important;
}

/* Petits traits jaunes du récapitulatif de prix (arborescence) -> céladon */
.bulletin {
  border-left-color: #bcdea4 !important;
  border-bottom-color: #bcdea4 !important;
  border-top-color: #bcdea4 !important;
}

/* === 14. TOOLTIPS (bulles d'aide) ================================== */
/* Problème : la carte avait overflow:hidden, ce qui COUPAIT le texte    */
/* de la bulle dès qu'elle dépassait le bord. On laisse déborder + on    */
/* rend la bulle plus lisible (contour doux, ombre, espacement).         */
.booking-item-main-container {
  overflow: visible !important;
}
.tooltip-content {
  border: 1px solid #e6e1d3 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  line-height: 1.45 !important;
  box-shadow: 0 8px 24px rgba(18, 48, 29, .18) !important;
}

/* === 15. MOBILE (≤ 767 px) : assurances + stepper ================== */
@media only screen and (max-width: 767px) {

  /* --- 15a. STEPPER --------------------------------------------------- */
  /* Sur mobile, la barre numérotée (1-2-3) et le titre d'étape           */
  /* s'affichaient EN MÊME TEMPS, d'où l'aspect tassé/illisible.          */
  /* On masque la barre numérotée (trop large pour un téléphone) et on    */
  /* garde uniquement le titre de l'étape en cours, bien lisible.         */
  .storage-booking-stepper-container .storage-booking-stepper {
    display: none !important;
  }
  .storage-booking-stepper-container .mobile-storage-booking-stepper {
    display: block !important;
  }
  .mobile-storage-booking-stepper h2.hide {
    display: none !important;
  }
  .mobile-storage-booking-stepper h2 {
    text-align: center !important;
    margin: 0 0 1.2rem !important;
    padding-bottom: .7rem !important;
    color: var(--color-content-heading, #12301d) !important;
    border-bottom: 2px solid var(--color-content-bg-alt, #bcdea4) !important;
  }

  /* --- 15b. ASSURANCE : lignes empilées ------------------------------- */
  /* La ligne « radio + couverture + prix » était trop large : le texte   */
  /* se cassait et le pavé vert était rogné. On empile verticalement :    */
  /* couverture au-dessus, pavé prix (céladon) pleine largeur en dessous. */
  .tenant-portal-addons-insurance-box .addons-insurance-data-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  .tenant-portal-addons-insurance-box .addons-insurance-data-coverage-box {
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 2px 6px !important;
    font-size: .95rem !important;
    padding: 10px 12px 8px !important;
  }
  .tenant-portal-addons-insurance-box .addons-insurance-data-coverage-box
    .coverage-box {
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
  .tenant-portal-addons-insurance-box .addons-insurance-data-premium-box {
    justify-content: flex-end !important;
    align-items: baseline !important;
    gap: 4px !important;
    padding: 8px 12px !important;
  }

  /* --- 15c. PAIEMENT : carte (Lyra) + virement -----------------------  */
  /* Deux problèmes sur mobile :                                          */
  /*  1) Le formulaire carte Lyra avait une largeur FIXE (300 px) : sur   */
  /*     un téléphone il sortait du cadre vert à droite.                  */
  /*  2) Le cadre vert est en « display:flex » et le formulaire ne        */
  /*     s'étirait pas → tout l'espace libre se mettait à droite, ce qui  */
  /*     décalait les champs (aspect rétréci / pas propre).               */
  /* Solution : on contraint chaque bloc à la largeur de l'écran ET on    */
  /* force le formulaire à occuper toute la largeur, centré proprement.   */
  /* On applique la correction aux DEUX blocs (carte + virement) via      */
  /* leur classe commune pour qu'ils soient identiques et bien alignés.   */
  .booking-item-payment-form-main-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    align-items: stretch !important;
  }
  .booking-item-payment-form-element-container {
    width: 100% !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .booking-item-payment-gateway-container,
  #lyra_payment_container {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  /* Le formulaire Lyra : on remplace sa largeur fixe par 100 %.          */
  #lyra_payment_container .kr-smart-form,
  #lyra_payment_container .kr-embedded {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  #lyra_payment_container .kr-pan,
  #lyra_payment_container .kr-expiry,
  #lyra_payment_container .kr-security-code,
  #lyra_payment_container .kr-field-element,
  #lyra_payment_container .kr-payment-button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Virement : les coordonnées bancaires (IBAN/BIC) ne doivent pas       */
  /* déborder ; on autorise le retour à la ligne des longues chaînes.     */
  .booking-item-offline-pay-container,
  .offline-pay-data,
  .offline-pay-data-item {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* === 16. BOUTON « PAYER » (carte Lyra) ============================== */
/* Par défaut Lyra affiche un bouton bleu nuit carré, hors charte.      */
/* On lui donne EXACTEMENT le style des autres boutons du parcours      */
/* (« Suivant », « Payer par virement ») : jaune charte, texte vert     */
/* foncé, coins arrondis 6 px, police Figtree semi-gras.                */
/* Lyra impose la couleur via sa variable interne                       */
/* « --kr-global-color-primary » (appliquée en inline prioritaire sur   */
/* le bouton). On NE force donc PAS la couleur directement : on         */
/* redéfinit cette variable → le fond ET la bordure suivent tout seuls. */
:root,
.kr-smart-form,
.kr-embedded,
#lyra_payment_container,
.kr-payment-button {
  --kr-global-color-primary: #F0D122 !important;
}
#lyra_payment_container .kr-payment-button {
  color: #12301d !important;            /* texte vert foncé (comme .action-btn) */
  border: 0 !important;
  border-radius: 6px !important;
  font-family: Figtree, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  height: 48px !important;
  transition: background-color .15s ease, transform .05s ease !important;
}
/* Survol : on assombrit légèrement le jaune (même logique de retour    */
/* visuel que tes autres boutons).                                      */
#lyra_payment_container .kr-payment-button:hover {
  --kr-global-color-primary: #e0c20f !important;
}
#lyra_payment_container .kr-payment-button:active {
  transform: translateY(1px) !important;
}

/* === 17. ICÔNES DES CHAMPS DE PAIEMENT ============================== */
/* Par défaut, les petites icônes des champs (carte, calendrier MM/AA,   */
/* « ? » du code de sécurité, bonhomme du titulaire) sont noires : ça    */
/* fait lourd. On les passe en gris-vert doux, discret et dans la        */
/* charte, pour un rendu plus sobre et professionnel.                    */
/* IMPORTANT : on ne touche PAS aux logos de cartes (CB/Visa/Mastercard/ */
/* Amex) — ce sont des logos officiels qui doivent garder leurs couleurs.*/
#lyra_payment_container .kr-icon-wrapper-content svg,
#lyra_payment_container .kr-icon-wrapper-content svg path,
#lyra_payment_container .kr-help-icon svg,
#lyra_payment_container .kr-help-icon svg path,
#lyra_payment_container .kr-help-icon svg circle {
  fill: #6f7d72 !important;
}