/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* =========================================================
   CARCALOCA — REFONTE V2 (avril 2026)
   Maquette : carcaloca_maquette_v2.html
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --cl-navy:      #1A3D52;
  --cl-navy-deep: #0E2535;
  --cl-navy-mid:  #234D65;
  --cl-gold:      #D4961A;
  --cl-gold-lt:   #F0B93A;
  --cl-gold-pale: #FDF4E0;
  --cl-cream:     #FAF7F2;
  --cl-cream-dk:  #F1EBE0;
  --cl-sand:      #E8DFD0;
  --cl-text:      #1C2B35;
  --cl-text-mid:  #4A5E6A;
  --cl-text-lt:   #5C7585;
  --cl-white:     #FFFFFF;
  --cl-green:     #2A6E45;
  --cl-green-bg:  #EAF5EF;
  --cl-border:    rgba(28,43,53,0.10);
  --cl-serif:     'Cormorant Garamond', Georgia, serif;
  --cl-sans:      'Outfit', system-ui, -apple-system, sans-serif;
  --cl-r:         10px;
  --cl-r-lg:      18px;
  --cl-shadow:    0 2px 20px rgba(14,37,53,0.08);
  --cl-shadow-lg: 0 8px 48px rgba(14,37,53,0.14);
}

/* ====================================================
   1. TYPOGRAPHIE GLOBALE
   ==================================================== */

body,
.entry-content,
.elementor-widget-container,
.elementor-text-editor,
.elementor-widget-text-editor {
  font-family: var(--cl-sans);
  color: var(--cl-text);
}

body {
  background: var(--cl-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title,
.ct-page-title {
  font-family: var(--cl-serif);
  color: var(--cl-text);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

h1, .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(36px, 5vw, 58px); line-height: 1.08; }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(28px, 4vw, 44px); }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(20px, 2.5vw, 26px); }

p { font-weight: 400; line-height: 1.65; }
em { color: var(--cl-gold); font-style: italic; }
a { color: var(--cl-navy); transition: color .2s ease; }
a:hover { color: var(--cl-gold); }

/* ====================================================
   2. BOUTONS UTILITAIRES
   ==================================================== */

.cl-btn-gold,
a.cl-btn-gold,
.elementor-button.cl-btn-gold {
  display: inline-block;
  background: var(--cl-gold);
  color: var(--cl-navy-deep);
  font-family: var(--cl-sans);
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 28px;
  border-radius: 99px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 20px rgba(212,150,26,0.4);
}
.cl-btn-gold:hover { background: var(--cl-gold-lt); color: var(--cl-navy-deep); transform: translateY(-2px); box-shadow: 0 6px 28px rgba(212,150,26,0.5); }

.cl-btn-ghost, a.cl-btn-ghost {
  display: inline-block; background: transparent; color: var(--cl-white);
  font-family: var(--cl-sans); font-weight: 400; font-size: 14.5px;
  padding: 12px 27px; border-radius: 99px; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.22); transition: all .2s ease;
}
.cl-btn-ghost:hover { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.05); color: var(--cl-white); }

.cl-btn-navy, a.cl-btn-navy {
  display: inline-block; background: var(--cl-navy); color: var(--cl-white);
  font-family: var(--cl-sans); font-weight: 600; font-size: 13px;
  padding: 11px 24px; border-radius: 99px; text-decoration: none; transition: opacity .2s ease;
}
.cl-btn-navy:hover { opacity: 0.85; color: var(--cl-white); }

.cl-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 4px 13px; border-radius: 99px;
  background: rgba(212,150,26,0.12); color: var(--cl-gold);
  font-family: var(--cl-sans);
}

/* ====================================================
   3. HEADER (Blocksy type-1) — override variables CSS
   ==================================================== */

/* Couleurs de fond du header (Initial / Transparent / Épinglé) gérées via
   Customizer Blocksy → Constructeur d'en-tête → Rangée principale → Design
   → Arrière-plan. Plus d'override CSS ici. */

/* Override des variables Blocksy pour le menu — items lisibles sur fond navy */
[data-header*="type-1"] .ct-header [data-id="menu"],
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a,
[data-header*="type-1"] .ct-header .header-menu-1 .menu > li > .ct-menu-link,
header#header.ct-header .header-menu-1 .menu > li > .ct-menu-link,
header#header.ct-header .ct-menu-link {
  color: rgba(255,255,255,0.78) !important;
  --theme-link-initial-color: rgba(255,255,255,0.78) !important;
  --theme-link-hover-color: var(--cl-gold-lt) !important;
  --theme-text-color: rgba(255,255,255,0.78) !important;
  font-family: var(--cl-sans);
  font-size: 14px;
  font-weight: 500;
}

[data-header*="type-1"] .ct-header .header-menu-1 .menu > li > .ct-menu-link:hover,
[data-header*="type-1"] .ct-header .header-menu-1 .menu > li.current-menu-item > .ct-menu-link,
[data-header*="type-1"] .ct-header .header-menu-1 .menu > li.current_page_item > .ct-menu-link,
[data-header*="type-1"] .ct-header .header-menu-1 .menu > li.current-menu-ancestor > .ct-menu-link,
header#header.ct-header .header-menu-1 .menu > li > .ct-menu-link:hover,
header#header.ct-header .header-menu-1 .menu > li.current-menu-item > .ct-menu-link {
  color: var(--cl-gold-lt) !important;
}

/* FIX header-text widget : line-height uniforme + min-height identique sur tous
   les enfants pour que le centrage flex les aligne pixel-perfect */
header#header.ct-header .ct-header-text,
header#header.ct-header .ct-header-text .entry-content,
header#header.ct-header .ct-header-text .entry-content > * {
  line-height: 1 !important;
}
header#header.ct-header .ct-header-text {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
}
header#header.ct-header .ct-header-text .entry-content {
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
  align-self: center !important;
}
header#header.ct-header .ct-header-text .entry-content > *,
header#header.ct-header .ct-header-text > a {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  height: 40px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Kill l'indicateur natif Blocksy (::before en absolute pleine largeur) */
header#header.ct-header .header-menu-1 .menu > li > .ct-menu-link {
  text-decoration: none !important;
  border-bottom: none !important;
  overflow: visible !important;
  --menu-indicator-y-position: auto !important;
}
header#header.ct-header .header-menu-1 .menu > li > .ct-menu-link::before,
header#header.ct-header .header-menu-1 .menu > li > .ct-menu-link::after {
  display: none !important;
}

/* Underline natif sous le texte uniquement (pas pleine largeur du link) */
header#header.ct-header .header-menu-1 .menu > li.current-menu-item > .ct-menu-link,
header#header.ct-header .header-menu-1 .menu > li.current_page_item > .ct-menu-link {
  text-decoration: underline !important;
  text-decoration-color: var(--cl-gold) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 10px !important;
}

/* Sub-menus */
header#header.ct-header .header-menu-1 .sub-menu {
  background: var(--cl-navy) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--cl-r) !important;
  padding: 8px 0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
  --theme-background-color: var(--cl-navy) !important;
}

header#header.ct-header .header-menu-1 .sub-menu .ct-menu-link {
  color: rgba(255,255,255,0.85) !important;
  --theme-link-initial-color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
}

header#header.ct-header .header-menu-1 .sub-menu .ct-menu-link:hover {
  color: var(--cl-gold-lt) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* Flèche déroulante */
header#header.ct-header .ct-toggle-dropdown-desktop svg,
header#header.ct-header .ct-toggle-dropdown-desktop-ghost {
  fill: rgba(255,255,255,0.5) !important;
}

/* Logo placeholder texte */
header#header.ct-header .site-branding,
header#header.ct-header .site-logo-container {
  position: relative;
  display: flex !important;
  align-items: center;
  min-height: 40px;
  text-decoration: none !important;
}

header#header.ct-header .site-logo-container::before {
  content: 'Carca';
  font-family: var(--cl-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--cl-white);
  letter-spacing: 0.02em;
  line-height: 1;
}
header#header.ct-header .site-logo-container::after {
  content: 'Loca';
  font-family: var(--cl-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--cl-gold-lt);
  letter-spacing: 0.02em;
  line-height: 1;
}

header#header.ct-header .site-logo-container:has(img)::before,
header#header.ct-header .site-logo-container:has(img)::after {
  display: none;
}

/* Icône panier custom */
header#header.ct-header .clc-header-cart {
  color: rgba(255,255,255,0.78) !important;
  display: inline-flex;
  align-items: center;
  padding: 8px;
  margin-left: 6px;
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  transition: color .2s ease;
}
header#header.ct-header .clc-header-cart:hover { color: var(--cl-gold-lt) !important; }
header#header.ct-header .clc-header-cart svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor;
}

/* Alignement vertical du header — patche le grid parent .ct-container ET les cellules */
header#header.ct-header [data-row*="middle"] .ct-container {
  align-items: center !important;
}
header#header.ct-header [data-row*="middle"] [data-column="start"],
header#header.ct-header [data-row*="middle"] [data-column="end"] {
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
}
header#header.ct-header [data-row*="middle"] [data-column="end"] {
  justify-content: flex-end !important;
}
header#header.ct-header [data-row*="middle"] [data-column="start"] > [data-items],
header#header.ct-header [data-row*="middle"] [data-column="end"] > [data-items] {
  display: flex !important;
  align-items: center !important;
}

/* Header text widget — wrap des items à droite (tel + CTA + panier) alignés sur 1 ligne */
header#header.ct-header .ct-header-text {
  font-family: var(--cl-sans);
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  --theme-text-color: rgba(255,255,255,0.78) !important;
  --theme-link-initial-color: rgba(255,255,255,0.78) !important;
  --theme-link-hover-color: var(--cl-gold-lt) !important;
  display: flex !important;
  align-items: center;
  align-self: center !important;
}
header#header.ct-header .ct-header-text .entry-content {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}
header#header.ct-header .ct-header-text .entry-content > * {
  display: inline-flex;
  align-items: center;
}

header#header.ct-header .ct-header-text a {
  color: rgba(255,255,255,0.78) !important;
  text-decoration: none !important;
}
header#header.ct-header .ct-header-text a:hover { color: var(--cl-gold-lt) !important; }

/* CTA "Je réserve" si ajouté un jour */
header#header.ct-header a.cl-nav-cta {
  display: inline-block;
  background: var(--cl-gold) !important;
  color: var(--cl-navy-deep) !important;
  margin-left: 0 !important;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 22px;
  border-radius: 99px;
  margin-left: 12px;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(212,150,26,0.35);
  transition: all .2s ease;
}
header#header.ct-header a.cl-nav-cta:hover {
  background: var(--cl-gold-lt) !important;
  color: var(--cl-navy-deep) !important;
  transform: translateY(-1px);
}

/* Tel header */
header#header.ct-header a.cl-nav-tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.65) !important;
  font-size: 12.5px;
  margin-right: 0 !important;
}
header#header.ct-header a.cl-nav-tel:hover { color: var(--cl-gold-lt) !important; }
header#header.ct-header a.cl-nav-tel svg { width: 13px; height: 13px; }

/* Mobile trigger / account */
header#header.ct-header .ct-header-trigger {
  color: rgba(255,255,255,0.85) !important;
  --theme-icon-color: rgba(255,255,255,0.85) !important;
}
header#header.ct-header .ct-header-trigger svg rect,
header#header.ct-header .ct-header-trigger svg {
  fill: rgba(255,255,255,0.85) !important;
}

/* Pas de système de comptes côté client → on cache l'icône/lien "Connexion" Blocksy
   sur toutes les vues (desktop, tablet, mobile). Le modal d'account reste dans le DOM
   inerte (no harm) mais inaccessible. */
header#header.ct-header .ct-header-account,
header#header.ct-header [data-id="account"] {
  display: none !important;
}

/* ====================================================
   4. FOOTER
   ==================================================== */

body .ct-footer {
  background: #09202E !important;
  --theme-background-color: #09202E !important;
  color: rgba(255,255,255,0.55);
  /* Padding/spacing géré via Customizer Blocksy (Apparence → Personnaliser → Footer Builder).
     Ne pas remettre de padding ici, ça interférait avec les sliders Customizer. */
}

body .ct-footer .ct-container { max-width: 1200px; }

body .ct-footer [data-row="middle"] {
  background: transparent !important;
}

body .ct-footer .widget-title,
body .ct-footer .ct-widget h3 {
  font-family: var(--cl-serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  margin-bottom: 14px !important;
  letter-spacing: 0.005em;
}

body .ct-footer .ct-widget,
body .ct-footer .textwidget,
body .ct-footer .textwidget p {
  font-family: var(--cl-sans) !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.7;
}

body .ct-footer .textwidget ul { list-style: none; padding: 0; margin: 0; }
body .ct-footer .textwidget li { padding: 4px 0; list-style: none; }
body .ct-footer .textwidget a {
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  font-size: 13px;
  transition: color .2s ease;
}
body .ct-footer .textwidget a:hover { color: var(--cl-gold-lt) !important; }

body .ct-footer .ct-footer-socials a[href="#"] { display: none !important; }
body .ct-footer .ct-footer-socials a {
  color: rgba(255,255,255,0.45) !important;
  --theme-icon-color: rgba(255,255,255,0.45) !important;
  transition: color .2s ease;
}
body .ct-footer .ct-footer-socials a:hover { color: var(--cl-gold-lt) !important; }
body .ct-footer .ct-footer-socials svg { fill: currentColor !important; }

body .ct-footer [data-row="bottom"] {
  font-size: 12px;
  color: rgba(255,255,255,0.32);
  background: transparent !important;
}
body .ct-footer [data-row="bottom"] a {
  color: rgba(255,255,255,0.42) !important;
  text-decoration: none !important;
}
body .ct-footer [data-row="bottom"] a:hover { color: rgba(255,255,255,0.65) !important; }

/* ====================================================
   5. CATALOGUE VikRentItems  — STRUCTURE CORRIGÉE
   .vri-list-item-block > .vri-list-item-inner (haut) + .vri-list-item-cont (bas)
   ==================================================== */

.vri-page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Titre page plugin "CarcaLoca" — masqué (pollue inutilement) */
.vri-page-head-title {
  display: none !important;
}

/* Grille des items */
.vrilistcontainer {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

/* Carte d'un item */
.vri-list-item-block {
  background: var(--cl-white) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: var(--cl-r-lg) !important;
  overflow: visible !important; /* important pour laisser dépasser le badge PACK */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  position: relative;
}

.vri-list-item-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--cl-shadow-lg);
  border-color: var(--cl-gold) !important;
}

/* Haut de la carte (description) */
.vri-list-item-block .vri-list-item-inner {
  padding: 22px 22px 0 !important;
  display: block !important;
  flex: 1 !important;
  height: auto !important;
  background: transparent !important;
  /* Override des règles VikRentItems héritées d'une ancienne mise en page (image|texte|prix horizontale) */
  border-right: none !important;
  border: none !important;
  float: none !important;
  position: static !important;
}

.vri-list-item-block .vri-list-item-descr {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.vri-list-item-block .vrilistitemcat {
  display: inline-block !important;
  font-family: var(--cl-sans) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--cl-gold) !important;
  margin: 0 0 8px 0 !important;
  order: 1 !important;
}

.vri-list-item-block .vrilistitemname {
  display: block !important;
  font-family: var(--cl-serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--cl-text) !important;
  line-height: 1.2 !important;
  margin: 0 0 6px 0 !important;
  order: 2 !important;
}

.vri-list-item-block .vrilistitemdescr {
  font-family: var(--cl-sans) !important;
  font-size: 13px !important;
  color: var(--cl-text-mid) !important;
  line-height: 1.55 !important;
  margin-top: 4px !important;
  order: 3 !important;
}
.vri-list-item-block .vrilistitemdescr:empty { display: none !important; }

/* Bas de la carte (prix + bouton) — fond blanc uniforme, séparateur fin */
.vri-list-item-block .vri-list-item-cont {
  padding: 18px 22px 22px !important;
  margin-top: auto !important;
  background: transparent !important;
  border-top: 1px solid var(--cl-border) !important;
  display: block !important;
  width: auto !important;
}

/* Container interne prix + bouton — empilés et centrés */
.vri-list-item-block .vrilistcostdivcont {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: center !important;
  padding-top: 0 !important;
  border-top: none !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center;
}

/* Bloc prix : "À partir de" / montant / "le week-end" — centré */
.vri-list-item-block .vrilistdivcost {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  width: auto !important;
  text-align: center !important;
}

.vri-list-item-block .vriliststartfrom {
  display: block !important;
  font-family: var(--cl-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--cl-text-lt) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

/* Le vrai prix est dans .item_cost */
.vri-list-item-block .item_cost,
.vri-list-item-block .vrilistdivcost > span:not(.vriliststartfrom):not(.vriliststartfromtext) {
  display: block !important;
  font-family: var(--cl-serif) !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  color: var(--cl-gold) !important;
  line-height: 1 !important;
  margin: 4px 0 !important;
}

.vri-list-item-block .vriliststartfromtext {
  display: block !important;
  font-family: var(--cl-sans) !important;
  font-size: 11px !important;
  color: var(--cl-text-lt) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

/* Bouton "Voir les détails" : .vrilistgoonlist EST UN SPAN, le lien est <a> à l'intérieur */
.vri-list-item-block .vrilistgoonlist {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center !important;
}

.vri-list-item-block .vrilistgoonlist a {
  display: inline-block !important;
  width: auto !important;
  background: var(--cl-navy) !important;
  color: var(--cl-white) !important;
  font-family: var(--cl-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px 32px !important;
  border-radius: 99px !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
  box-sizing: border-box !important;
}

.vri-list-item-block .vrilistgoonlist a:hover {
  background: var(--cl-navy-deep) !important;
  color: var(--cl-white) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14,37,53,0.18);
}

/* Variante PACK (kit) */
.vri-list-item-block.vri-list-item-kit-block {
  border: 2px solid var(--cl-gold) !important;
}
.vri-list-item-block.vri-list-item-kit-block::before {
  content: 'PACK';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cl-gold);
  color: var(--cl-navy-deep);
  font-family: var(--cl-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 3px 12px;
  border-radius: 99px;
  z-index: 2;
}
.vri-list-item-block.vri-list-item-kit-block .vrilistgoonlist a {
  background: var(--cl-gold) !important;
  color: var(--cl-navy-deep) !important;
}
.vri-list-item-block.vri-list-item-kit-block .vrilistgoonlist a:hover {
  background: var(--cl-gold-lt) !important;
}

/* ====================================================
   6. FICHE ARTICLE / PACK VikRentItems
   ==================================================== */

/* === LAYOUT FICHE PACK/ITEM PC : 2 colonnes globales — Produit à gauche, Formulaire à droite === */
/* Le parent VRI est .vri-page-content. On cible uniquement les pages itemdetails
   (présence de .vri-bookform-container) pour ne pas affecter le catalogue/search. */
/* Force la fiche pack à utiliser toute la largeur du container (1200px) plutôt que le
   content-size WP constrained (~740-940px) qui rendrait la fiche étroite.
   Note : .entry-content > .wrap.plugin-container > .vri-page-content (descendant, pas direct). */
.entry-content.is-layout-constrained:has(.vri-bookform-container) {
  max-width: none !important;
}
.entry-content.is-layout-constrained:has(.vri-bookform-container) > * {
  max-width: none !important;
}

/* Layout vertical : form en banner top compact (full width) + produit central */
.vri-page-content:has(> .vri-bookform-container) {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
}
.vri-page-content > .vri-page-head-title { display: none; }
.vri-page-content > .vri-avcals-container:empty,
.vri-page-content > #vri-bookingpart-init:empty {
  display: none;
}

/* Form en banner top — pleine largeur, compact horizontal */
.vri-page-content:has(> .vri-bookform-container) > .vri-bookform-container {
  order: 1;
  width: 100%;
  margin: 0;
  padding: 18px 22px !important;
  position: static;
}

/* Produit centré max-width 900px : image à gauche, info à droite */
.vri-page-content:has(> .vri-bookform-container) > .vri-itemdet-groupblocks {
  order: 2;
  max-width: 900px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) 1.3fr;
  gap: 36px;
  align-items: start;
}
.vri-page-content:has(> .vri-bookform-container) > .vri-itemdet-groupblocks .vri-itemdet-groupleft {
  position: static;
}
.vri-page-content:has(> .vri-bookform-container) .vri-itemdet-imagesblock {
  aspect-ratio: 1/1;
  max-width: none;
}

/* Mobile : produit en 1 col */
@media (max-width: 768px) {
  .vri-page-content:has(> .vri-bookform-container) > .vri-itemdet-groupblocks {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.vri-itemdet-imagesblock {
  background: linear-gradient(135deg, var(--cl-cream-dk) 0%, var(--cl-sand) 100%);
  border-radius: var(--cl-r-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--cl-border);
}
.vri-itemdet-imagesblock img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Placeholder visible quand pas d'image — en attendant Phase 4 photos lifestyle */
.vri-itemdet-imagesblock:not(:has(img))::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 40%, rgba(212,150,26,0.08) 0%, transparent 60%);
}
.vri-itemdet-imagesblock:not(:has(img))::after {
  content: 'Photo à venir';
  position: absolute;
  font-family: var(--cl-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cl-text-lt);
  bottom: 24px;
}
/* Touche ornementale au centre */
.vri-itemdet-imagesblock:not(:has(img)) .vri-itemdet-imagesblock-icon,
.vri-itemdet-imagesblock:not(:has(img))::before {
  background-image:
    radial-gradient(circle at 50% 40%, rgba(212,150,26,0.10) 0%, transparent 60%);
}

.vri-itemdet-groupright { padding: 4px 0; }
.vri-itemdet-infoblock { margin-bottom: 18px; }

.vri-itemdet-infocat,
.vri-itemdet-infocat span {
  display: inline-block !important;
  font-family: var(--cl-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--cl-gold) !important;
  margin-bottom: 10px !important;
}

.vri-itemdet-infoname,
.vri-itemdet-infoname span {
  display: block !important;
  font-family: var(--cl-serif) !important;
  font-size: clamp(32px, 4.5vw, 48px) !important;
  font-weight: 600 !important;
  color: var(--cl-text) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

/* Sous-titre tagline généré dynamiquement après le nom (via JS dans functions.php) */
.cl-itemdet-tagline {
  font-family: var(--cl-sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--cl-text-mid);
  line-height: 1.55;
  margin: 12px 0 20px;
  max-width: 480px;
}

.vri-itemdet-descr {
  font-family: var(--cl-sans);
  font-size: 15px;
  color: var(--cl-text-mid);
  line-height: 1.7;
  margin-bottom: 24px;
}
.vri-itemdet-descr:empty { display: none; }

/* Articles inclus (pour packs) */
.vri-itemdet-kitrelations {
  background: var(--cl-cream-dk);
  border-radius: var(--cl-r);
  padding: 20px 24px;
  margin: 24px 0;
}
.vri-kit-expl {
  display: block !important;
  font-family: var(--cl-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--cl-text-mid) !important;
  margin-bottom: 12px !important;
}
.vri-kitrelations-tbl { width: 100%; border-collapse: collapse; font-family: var(--cl-sans); }
.vri-kitrelations-tbl tr { border-bottom: 1px solid var(--cl-border); }
.vri-kitrelations-tbl tr:last-child { border-bottom: none; }
.vri-kitrelations-tbl td { padding: 10px 0; font-size: 14px; color: var(--cl-text); }
.vri-kitrelations-tbl td:last-child { text-align: right; font-weight: 600; color: var(--cl-gold); font-size: 13px; }
.vri-kitrelations-tbl a {
  color: var(--cl-text);
  text-decoration: none;
  border-bottom: 1px dotted var(--cl-text-lt);
  padding-bottom: 1px;
}
.vri-kitrelations-tbl a:hover { color: var(--cl-gold); border-bottom-color: var(--cl-gold); }

/* Bloc prix fiche */
.vri-itemdet-priceblock {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px 12px !important;
  padding: 20px 0 !important;
  border-top: 1px solid var(--cl-border) !important;
  border-bottom: 1px solid var(--cl-border) !important;
  margin: 24px 0 !important;
}

.vri-itemdet-price-startfrom {
  font-family: var(--cl-sans) !important;
  font-size: 12px !important;
  color: var(--cl-text-lt) !important;
  letter-spacing: 0.04em !important;
  width: 100% !important;
  text-transform: uppercase !important;
}

.vri-itemdet-price-cost {
  font-family: var(--cl-serif) !important;
  font-size: clamp(40px, 6vw, 56px) !important;
  font-weight: 600 !important;
  color: var(--cl-gold) !important;
  line-height: 1 !important;
}

.vri-itemdet-price-fromtext {
  font-family: var(--cl-sans) !important;
  font-size: 13px !important;
  color: var(--cl-text-mid) !important;
  font-weight: 400 !important;
}

/* ---- Mention "TVA non applicable" (obligation auto-entrepreneur, art. 293 B du CGI) ---- */
.cl-tva-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 14px;
  background: rgba(14,37,53,0.04);
  border: 1px solid rgba(14,37,53,0.08);
  border-radius: 8px;
  font-family: var(--cl-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(14,37,53,0.75);
}
.cl-tva-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: rgba(14,37,53,0.5);
}
.cl-tva-notice strong {
  color: var(--cl-navy-deep);
  font-weight: 700;
}
/* Variante compacte (sur fiche produit, sous le prix) */
.cl-tva-notice--compact {
  margin: 8px auto 0;
  padding: 6px 10px;
  background: transparent;
  border: none;
  font-size: 11.5px;
  color: rgba(14,37,53,0.55);
  justify-content: center;
}
.cl-tva-notice--compact svg {
  width: 12px;
  height: 12px;
  margin-top: 1px;
}

/* Mention TVA dans la sticky sidebar (PC) */
.cl-checkout-sticky-tva {
  margin: 6px 0 10px 0;
  padding: 6px 0;
  border-top: 1px dashed rgba(14,37,53,0.12);
  font-size: 10.5px;
  line-height: 1.4;
  color: rgba(14,37,53,0.55);
  text-align: center;
  font-style: italic;
}

.vri-avcals-container { margin: 24px 0; }
.vri-caltrigger {
  display: inline-block;
  background: transparent;
  color: var(--cl-navy);
  font-family: var(--cl-sans);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 20px;
  border: 1px solid var(--cl-navy);
  border-radius: 99px;
  text-decoration: none;
  transition: all .2s ease;
  cursor: pointer;
}
.vri-caltrigger:hover { background: var(--cl-navy); color: var(--cl-white); }

/* ====================================================
   7. FORMULAIRE DE RECHERCHE
   ==================================================== */

.vri-main-search-form,
.vridivsearch {
  background: var(--cl-navy-deep);
  border-radius: var(--cl-r-lg);
  padding: 32px;
  margin: 24px auto 40px;
  max-width: 1100px;
  color: var(--cl-white);
  box-shadow: var(--cl-shadow-lg);
}
.vri-main-search-form *,
.vridivsearch * { color: rgba(255,255,255,0.9); }

.vrisfentry, .vri-sf-entrytime-inner, .vri-sf-input-wrap { margin-bottom: 12px; }

.vripickdroplab,
.vri-main-search-form label {
  font-family: var(--cl-sans);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.vri-main-search-form input[type="text"],
.vri-main-search-form input[type="number"],
.vri-main-search-form select,
.vri-sf-input-pickup,
.vrisfentrytime,
.vridivsearch input,
.vridivsearch select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--cl-r);
  padding: 11px 14px;
  color: var(--cl-white) !important;
  font-family: var(--cl-sans);
  font-size: 14px;
}

.vrisfentrysubmit,
input.vrisfentrysubmit,
input[type="submit"].vrisfentrysubmit {
  background: var(--cl-gold) !important;
  color: var(--cl-navy-deep) !important;
  font-family: var(--cl-sans) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 32px !important;
  border-radius: 99px !important;
  border: none !important;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 20px rgba(212,150,26,0.4);
  margin-top: 8px;
  -webkit-appearance: none;
  appearance: none;
}
.vrisfentrysubmit:hover {
  background: var(--cl-gold-lt) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(212,150,26,0.5);
}

/* ====================================================
   7-bis. PAGE D'ACCUEIL (.cl-* classes)
   ==================================================== */

/* Le widget HTML d'Elementor englobe tout, on retire les styles par défaut */
.elementor-widget-html .elementor-widget-container { padding: 0 !important; }

/* Containers + sections génériques */
.cl-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.cl-section {
  padding: 88px 0;
  background: var(--cl-cream);
}
.cl-section-alt { background: var(--cl-cream-dk); }

/* En-tête de section générique */
.cl-shead {
  text-align: center;
  margin-bottom: 56px;
}
.cl-shead h2 {
  font-family: var(--cl-serif);
  font-size: clamp(28px, 4vw, 44px);
  color: var(--cl-text);
  line-height: 1.15;
  margin: 12px 0 14px;
}
.cl-shead p {
  color: var(--cl-text-mid);
  font-size: 15.5px;
  font-weight: 300;
  max-width: 520px;
  margin: 0 auto;
}

/* HERO */
.cl-hero {
  background: var(--cl-navy-deep);
  min-height: 86vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 130px 24px 80px; /* 130px top pour passer sous le header sticky (~70px) */
}
.cl-hero-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 72% 50%, rgba(212,150,26,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 35% 45% at 15% 75%, rgba(26,61,82,0.9) 0%, transparent 60%);
  pointer-events: none;
}
.cl-hero-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.cl-hero-inner {
  position: relative; z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* PC : pas de décalage — le grid align-items:center centre déjà la carte
   verticalement par rapport à la colonne texte (pills + titre + lead). */

.cl-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 24px;
}
.cl-pill,
a.cl-pill {
  display: inline-block;
  font-family: var(--cl-sans);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 13px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: all .2s ease;
  background: transparent;
  text-decoration: none !important;
}
.cl-pill:hover, .cl-pill-on,
a.cl-pill:hover, a.cl-pill.cl-pill-on {
  border-color: var(--cl-gold);
  color: var(--cl-gold);
  background: rgba(212,150,26,0.10);
}

.cl-hero-title {
  font-family: var(--cl-serif) !important;
  font-size: clamp(38px, 5vw, 62px) !important;
  color: var(--cl-white) !important;
  line-height: 1.08 !important;
  margin: 0 0 18px !important;
  font-weight: 600;
}
.cl-hero-title em {
  color: var(--cl-gold-lt);
  font-style: italic;
}

.cl-hero-lead {
  color: rgba(255,255,255,0.68);
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 460px;
}

/* Widget recherche par dates dans le hero — carte glass = action pure (titre + form) */
.cl-hero-search {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 18px 20px 16px;
  margin-bottom: 10px;
  max-width: 620px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(212,150,26,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
}
.cl-hero-search::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(212,150,26,0.4), rgba(212,150,26,0) 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Titre du formulaire de recherche dates */
.cl-hero-search-title {
  margin: 0 0 10px 0;
  font-family: var(--cl-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--cl-cream);
  letter-spacing: 0.1px;
  line-height: 1.25;
}

/* Liste de règles sous le titre du formulaire — 2 bullets ✓ gold dans la carte */
.cl-hero-search-help {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  font-family: var(--cl-sans);
}
.cl-hero-search-help li {
  position: relative;
  padding-left: 20px;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0.1px;
  margin-bottom: 4px;
}
.cl-hero-search-help li:last-child { margin-bottom: 0; }
.cl-hero-search-help li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9B44B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* Barre USP juste sous le hero — séparation claire avec section dédiée */
.cl-usp-bar {
  background: var(--cl-cream);
  padding: 32px 0;
  border-bottom: 1px solid rgba(14,37,53,0.06);
}
.cl-usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.cl-usp-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cl-usp-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,150,26,0.12);
  border-radius: 12px;
  color: var(--cl-gold);
  flex-shrink: 0;
}
.cl-usp-icon svg {
  width: 22px;
  height: 22px;
}
.cl-usp-text b {
  display: block;
  color: var(--cl-navy-deep);
  font-family: var(--cl-sans);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
}
.cl-usp-text span {
  color: var(--cl-text-mid, #4A5560);
  font-family: var(--cl-sans);
  font-size: 13px;
}
@media (max-width: 768px) {
  .cl-usp-bar { padding: 24px 0; }
  .cl-usp-grid { grid-template-columns: 1fr; gap: 16px; }
  .cl-usp-item { padding-left: 4px; }
}

/* Lien sobre alternatif — sous la carte de recherche */
.cl-hero-altcta {
  margin: 0;
  padding-left: 4px;
  font-family: var(--cl-sans);
  font-size: 13px;
}
.cl-hero-altcta a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color .2s ease;
}
.cl-hero-altcta a:hover {
  color: var(--cl-gold);
}
.cl-hero-search-form {
  display: block;
}
.cl-hero-search-row {
  display: grid;
  /* 2 colonnes : Date (1fr) + Heure (auto). 3 lignes : pickup, release, bouton pleine largeur */
  grid-template-columns: 1fr auto;
  gap: 10px 8px;
  align-items: end;
}
.cl-hero-search-field--time {
  flex-shrink: 0;
}
.cl-hero-search-field--time select {
  background-color: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 10px 28px 10px 12px;
  font-family: var(--cl-sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9B44B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 11px 11px;
  width: auto;
  min-width: 88px;
}
.cl-hero-search-field--time select:hover {
  background-color: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
}
.cl-hero-search-field--time select:focus {
  outline: none;
  border-color: var(--cl-gold);
  background-color: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 2px rgba(212,150,26,0.3);
}
.cl-hero-search-field--time select option {
  background: var(--cl-navy-deep);
  color: #fff;
}
.cl-hero-search-field {
  display: flex;
  flex-direction: column;
  position: relative;
}
.cl-hero-search-field label {
  color: rgba(255,255,255,0.55);
  font-family: var(--cl-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 6px;
}
/* Inputs du form hero — texte + datepicker jQuery UI (avec fallback type="date" si JS échoue) */
.cl-hero-search-field input[type="text"],
.cl-hero-search-field input[type="date"] {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--cl-sans);
  font-size: 13.5px;
  font-weight: 500;
  color-scheme: dark;
  cursor: pointer;
  transition: all .2s ease;
  width: 100%;
}
.cl-hero-search-field input::placeholder {
  color: rgba(255,255,255,0.45);
  font-weight: 400;
}
.cl-hero-search-field input[type="text"]:hover,
.cl-hero-search-field input[type="date"]:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
}
.cl-hero-search-field input[type="text"]:focus,
.cl-hero-search-field input[type="date"]:focus {
  outline: none;
  border-color: var(--cl-gold);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 2px rgba(212,150,26,0.3);
}
.cl-hero-search-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(75%) sepia(50%) saturate(500%) hue-rotate(360deg);
  cursor: pointer;
  opacity: 0.7;
}

/* === Datepicker jQuery UI sur le hero — palette navy/gold === */
/* Cible uniquement les datepickers ouverts depuis le hero (classe ajoutée via beforeShow) */
.ui-datepicker.cl-hero-dp {
  background: var(--cl-navy-deep);
  border: 1px solid rgba(212,150,26,0.35);
  border-radius: 12px;
  padding: 10px;
  font-family: var(--cl-sans);
  font-size: 13px;
  color: var(--cl-cream);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 1000;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-header {
  background: transparent;
  border: none;
  padding: 4px 0 8px;
  position: relative;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-title {
  font-family: var(--cl-serif);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--cl-cream);
  text-align: center;
  line-height: 1.6em;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-prev,
.ui-datepicker.cl-hero-dp .ui-datepicker-next {
  cursor: pointer;
  top: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  transition: all .2s ease;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-prev { left: 4px; }
.ui-datepicker.cl-hero-dp .ui-datepicker-next { right: 4px; }
.ui-datepicker.cl-hero-dp .ui-datepicker-prev:hover,
.ui-datepicker.cl-hero-dp .ui-datepicker-next:hover {
  background: var(--cl-gold);
}
.ui-datepicker.cl-hero-dp .ui-datepicker-prev span,
.ui-datepicker.cl-hero-dp .ui-datepicker-next span {
  filter: invert(100%);
  opacity: 0.85;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-prev:hover span,
.ui-datepicker.cl-hero-dp .ui-datepicker-next:hover span {
  filter: invert(0);
  opacity: 1;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-calendar {
  width: 100%;
  border-collapse: collapse;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-calendar th {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 0 8px;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-calendar td {
  padding: 1px;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-calendar td a,
.ui-datepicker.cl-hero-dp .ui-datepicker-calendar td span {
  display: block;
  text-align: center;
  padding: 7px 0;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cl-cream);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-calendar td a:hover {
  background: rgba(212,150,26,0.18);
  color: var(--cl-gold-lt, #E9B44B);
}
.ui-datepicker.cl-hero-dp .ui-datepicker-calendar td.ui-datepicker-today a {
  border-color: rgba(212,150,26,0.5);
  font-weight: 600;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-calendar td .ui-state-active,
.ui-datepicker.cl-hero-dp .ui-datepicker-calendar td a.ui-state-active {
  background: var(--cl-gold) !important;
  color: var(--cl-navy-deep) !important;
  font-weight: 700;
  border-color: var(--cl-gold);
}
.ui-datepicker.cl-hero-dp .ui-datepicker-calendar td.ui-datepicker-unselectable span,
.ui-datepicker.cl-hero-dp .ui-datepicker-calendar td .ui-state-disabled {
  color: rgba(255,255,255,0.2);
  cursor: not-allowed;
  background: transparent;
}
.ui-datepicker.cl-hero-dp .ui-datepicker-other-month a,
.ui-datepicker.cl-hero-dp .ui-datepicker-other-month span {
  color: rgba(255,255,255,0.25);
}
.cl-hero-search-btn {
  background: var(--cl-gold);
  color: var(--cl-navy-deep);
  padding: 0 28px;
  border-radius: 100px;
  font-family: var(--cl-sans);
  font-size: 14.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
  box-shadow: 0 6px 20px rgba(212,150,26,0.45);
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.2px;
  /* Le bouton occupe les 2 colonnes (Date + Heure) sur sa ligne */
  grid-column: 1 / -1;
  margin-top: 4px;
}
.cl-hero-search-btn:hover {
  background: var(--cl-gold-lt, #e9b44b);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(212,150,26,0.45);
}
.cl-hero-search-btn-arrow {
  transition: transform .2s ease;
}
.cl-hero-search-btn:hover .cl-hero-search-btn-arrow {
  transform: translateX(3px);
}
@media (max-width: 600px) {
  /* Sur très petit écran on garde la grille 1fr auto (Date + Heure) avec espacement plus généreux */
  .cl-hero-search-row { gap: 12px 8px; }
  .cl-hero-search-btn { height: 48px; }
}
.cl-hero-lead-info {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}

.cl-hero-ctas {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.cl-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
}
.cl-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cl-stat-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,150,26,0.15);
  border-radius: 9px;
}
.cl-stat-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--cl-gold-lt);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cl-stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cl-stat b {
  font-family: var(--cl-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--cl-white);
  line-height: 1.2;
  letter-spacing: 0;
}
.cl-stat span {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
  line-height: 1.3;
}

/* Hero cards */
.cl-hero-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cl-hcard {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--cl-r-lg);
  padding: 18px 22px;
  backdrop-filter: blur(12px);
  transition: all .25s ease;
  text-decoration: none;
  display: block;
  color: inherit;
}
.cl-hcard:hover {
  background: rgba(255,255,255,0.10);
  transform: translateX(-5px);
  border-color: rgba(212,150,26,0.3);
}
.cl-hcard-tag {
  font-family: var(--cl-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cl-gold);
  margin-bottom: 7px;
}
.cl-hcard-name {
  font-family: var(--cl-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--cl-white);
  margin-bottom: 3px;
}
.cl-hcard-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 12px;
}
.cl-hcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cl-hcard-price {
  font-family: var(--cl-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--cl-gold-lt);
}
.cl-hcard-price small {
  font-family: var(--cl-sans);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  font-weight: 300;
  margin-left: 3px;
}
.cl-hcard-link {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 1px;
}

/* RÉASSURANCE — grid 4 col égales sur PC, flex+wrap sur mobile */
.cl-reassurance {
  background: var(--cl-navy-mid);
  padding: 18px 24px;
}
.cl-rass-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: center;
}
.cl-rass-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  font-family: var(--cl-sans);
  padding: 0 16px;
  justify-content: flex-start;
  border-right: 1px solid rgba(255,255,255,0.10);
}
.cl-rass-item:last-child { border-right: none; }
.cl-rass-sep { display: none; } /* en grid, les séparateurs sont remplacés par border-right */
.cl-rass-icon {
  width: 30px; height: 30px;
  background: rgba(212,150,26,0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cl-rass-icon svg {
  width: 15px; height: 15px;
  stroke: var(--cl-gold);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cl-rass-sep {
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,0.10);
}

/* OCCASIONS */
.cl-occ-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cl-occ-card {
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-r-lg);
  padding: 30px 18px;
  text-align: center;
  text-decoration: none;
  transition: all .25s ease;
  display: block;
  color: inherit;
}
.cl-occ-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--cl-shadow-lg);
  border-color: var(--cl-gold);
}
.cl-occ-name {
  font-family: var(--cl-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--cl-text);
  margin-bottom: 4px;
}
.cl-occ-sub {
  font-size: 13px;
  color: var(--cl-text-lt);
  font-family: var(--cl-sans);
}

/* PACKS */
.cl-packs-note {
  text-align: center;
  font-size: 13px;
  color: var(--cl-text-mid);
  margin: -36px auto 36px;
  max-width: 800px;
  padding: 0 16px;
}
.cl-packs-note strong { color: var(--cl-text); }

.cl-packs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cl-pack {
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-r-lg);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all .25s ease;
  scroll-margin-top: 100px; /* offset header sticky pour les ancres #pack-* */
}
.cl-pack:hover {
  transform: translateY(-4px);
  box-shadow: var(--cl-shadow-lg);
}
.cl-pack-star {
  border: 2px solid var(--cl-gold);
}
.cl-pack-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cl-gold);
  color: var(--cl-navy-deep);
  font-family: var(--cl-sans);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cl-pack-occ {
  font-family: var(--cl-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cl-gold);
  margin-bottom: 6px;
}
.cl-pack-name {
  font-family: var(--cl-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--cl-text);
  margin-bottom: 3px;
}
.cl-pack-dur {
  font-size: 12px;
  color: var(--cl-text-lt);
  margin-bottom: 14px;
  font-family: var(--cl-sans);
}
.cl-pack-items {
  list-style: none;
  flex: 1;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--cl-sans);
}
.cl-pack-items li {
  font-size: 13px;
  color: var(--cl-text-mid);
  padding: 5px 0;
  border-bottom: 1px solid var(--cl-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cl-pack-items li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cl-gold);
  flex-shrink: 0;
}
.cl-pack-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}
.cl-pack-price {
  font-family: var(--cl-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--cl-navy);
  line-height: 1;
}
.cl-pack-price small {
  font-family: var(--cl-sans);
  font-size: 11.5px;
  color: var(--cl-text-lt);
  font-weight: 300;
  display: block;
}
.cl-pack-saving {
  font-size: 11px;
  color: var(--cl-green);
  font-weight: 600;
  background: var(--cl-green-bg);
  padding: 3px 9px;
  border-radius: 99px;
  font-family: var(--cl-sans);
  white-space: nowrap;
}
.cl-pack-btn {
  display: block;
  text-align: center;
  background: var(--cl-navy);
  color: var(--cl-white) !important;
  font-family: var(--cl-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 11px;
  border-radius: 99px;
  text-decoration: none;
  transition: all .2s ease;
}
.cl-pack-btn:hover {
  background: var(--cl-navy-deep);
  color: var(--cl-white) !important;
  transform: translateY(-1px);
}
.cl-pack-star .cl-pack-btn {
  background: var(--cl-gold);
  color: var(--cl-navy-deep) !important;
}
.cl-pack-star .cl-pack-btn:hover {
  background: var(--cl-gold-lt);
  color: var(--cl-navy-deep) !important;
}

/* COMMENT ÇA MARCHE */
.cl-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
.cl-steps::before {
  content: '';
  position: absolute;
  top: 26px;
  left: calc(16.5% + 16px);
  right: calc(16.5% + 16px);
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--cl-gold) 0, var(--cl-gold) 8px, transparent 8px, transparent 18px);
}
.cl-step {
  text-align: center;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}
.cl-step-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cl-cream-dk);
  border: 2px solid var(--cl-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-family: var(--cl-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--cl-gold);
}
.cl-step h3 {
  font-family: var(--cl-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--cl-text);
  margin-bottom: 8px;
}
.cl-step p {
  font-size: 13.5px;
  color: var(--cl-text-mid);
  font-weight: 300;
  font-family: var(--cl-sans);
  margin: 0;
}

/* FAQ — version <details> */
.cl-faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cl-faq-item {
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-r);
  overflow: hidden;
  transition: border-color .2s ease;
}
.cl-faq-item[open] {
  border-color: var(--cl-gold);
}
.cl-faq-item summary {
  padding: 17px 20px;
  font-family: var(--cl-sans);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--cl-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.cl-faq-item summary::-webkit-details-marker { display: none; }
.cl-faq-item summary::after {
  content: '+';
  font-size: 24px;
  color: var(--cl-gold);
  font-weight: 300;
  line-height: 1;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.cl-faq-item[open] summary::after {
  transform: rotate(45deg);
}
.cl-faq-a {
  padding: 0 20px 16px;
  font-size: 13.5px;
  color: var(--cl-text-mid);
  line-height: 1.65;
  font-weight: 300;
  font-family: var(--cl-sans);
}

/* CTA FINAL */
.cl-cta-final {
  background: var(--cl-navy-deep);
  padding: 96px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cl-cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(212,150,26,0.07) 0%, transparent 65%);
}
.cl-cta-final > * { position: relative; z-index: 1; }
.cl-cta-final h2 {
  font-family: var(--cl-serif) !important;
  font-size: clamp(28px, 4vw, 46px) !important;
  color: var(--cl-white) !important;
  margin: 12px 0 !important;
  line-height: 1.15;
}
.cl-cta-final p {
  color: rgba(255,255,255,0.55);
  font-size: 15.5px;
  font-weight: 300;
  margin-bottom: 36px;
  font-family: var(--cl-sans);
}
.cl-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.cl-btn-large {
  font-size: 15px !important;
  padding: 15px 32px !important;
}
.cl-btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: var(--cl-white) !important;
  font-family: var(--cl-sans);
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 28px;
  border-radius: 99px;
  text-decoration: none !important;
  transition: all .2s ease;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}
.cl-btn-wa:hover {
  background: #1ebe5d;
  color: var(--cl-white) !important;
  transform: translateY(-2px);
}
.cl-btn-wa svg {
  width: 20px; height: 20px;
  fill: currentColor;
}

/* ====================================================
   7-ter. CROSS-SELL & UPSELL (fiches packs VRI + home)
   Injectés via functions.php (hook PHP)
   ==================================================== */

/* Bloc "Pour aller plus loin" sous les fiches packs Apéro/Anniv/EVJF */
.cl-pack-upsell {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 28px 24px;
  background: linear-gradient(180deg, var(--cl-cream) 0%, var(--cl-cream-dk) 100%);
  border-radius: var(--cl-r-lg);
  border: 1px solid var(--cl-border);
}

.cl-pack-upsell-tag {
  display: block;
  font-family: var(--cl-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cl-gold);
  text-align: center;
  margin-bottom: 16px;
}

.cl-pack-upsell-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.cl-pack-upsell-card {
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-r);
  padding: 18px 20px;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all .2s ease;
  position: relative;
}

.cl-pack-upsell-card:hover {
  border-color: var(--cl-gold);
  transform: translateY(-2px);
  box-shadow: var(--cl-shadow);
}

.cl-pack-upsell-card::after {
  content: '+';
  position: absolute;
  top: 14px;
  right: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cl-gold);
  color: var(--cl-navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--cl-sans);
  transition: transform .2s ease;
}

.cl-pack-upsell-card:hover::after {
  transform: scale(1.15);
}

.cl-pack-upsell-name {
  font-family: var(--cl-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--cl-text);
  padding-right: 32px;
}

.cl-pack-upsell-desc {
  font-family: var(--cl-sans);
  font-size: 12.5px;
  color: var(--cl-text-mid);
  line-height: 1.5;
}

.cl-pack-upsell-price {
  font-family: var(--cl-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--cl-gold);
  margin-top: 4px;
}

/* Encart "Pour la totale → Pack Mariage" sur Pack Anniversaire */
.cl-pack-mariage-suggest {
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 22px 26px;
  background: var(--cl-navy-deep);
  border-radius: var(--cl-r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.cl-pack-mariage-suggest::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(212,150,26,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.cl-pack-mariage-suggest > * { position: relative; z-index: 1; }

.cl-pack-mariage-suggest-text {
  flex: 1;
  min-width: 280px;
}

.cl-pack-mariage-suggest-tag {
  font-family: var(--cl-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cl-gold-lt);
}

.cl-pack-mariage-suggest-title {
  font-family: var(--cl-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--cl-white);
  margin: 4px 0 6px;
  line-height: 1.2;
}

.cl-pack-mariage-suggest-desc {
  font-family: var(--cl-sans);
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}

.cl-pack-mariage-suggest-desc strong {
  color: var(--cl-gold-lt);
  font-weight: 600;
}

.cl-pack-mariage-suggest a.cl-btn-gold {
  flex-shrink: 0;
}

/* ====================================================
   7-quater. BANDEAU RÉDUCTIONS VOLUME + SECTION ÉVÉNEMENTS
   ==================================================== */

/* Bandeau "Plus vous prenez, plus vous économisez" */
.cl-volume-banner {
  background: var(--cl-gold-pale);
  padding: 32px 24px;
  border-top: 1px solid rgba(212,150,26,0.2);
  border-bottom: 1px solid rgba(212,150,26,0.2);
}

.cl-volume-banner-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  align-items: center;
}

.cl-volume-banner-text .cl-tag {
  margin-bottom: 6px;
}

.cl-volume-banner-text h3 {
  font-family: var(--cl-serif);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  color: var(--cl-text);
  line-height: 1.25;
  margin: 0;
}

.cl-volume-banner-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cl-volume-tier {
  background: var(--cl-white);
  border: 1px solid rgba(212,150,26,0.3);
  border-radius: var(--cl-r);
  padding: 16px 14px;
  text-align: center;
  transition: all .2s ease;
}

.cl-volume-tier-best {
  background: var(--cl-navy-deep);
  border-color: var(--cl-gold);
}

.cl-volume-tier-pct {
  font-family: var(--cl-serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--cl-gold);
  line-height: 1;
  margin-bottom: 6px;
}

.cl-volume-tier-best .cl-volume-tier-pct {
  color: var(--cl-gold-lt);
}

.cl-volume-tier-label {
  font-family: var(--cl-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--cl-text-mid);
  line-height: 1.3;
}

.cl-volume-tier-best .cl-volume-tier-label {
  color: rgba(255,255,255,0.7);
}

/* Section "Pour quel événement ?" */
.cl-events-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.cl-event-card {
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-r-lg);
  padding: 26px 20px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all .25s ease;
  position: relative;
  scroll-margin-top: 110px; /* offset header sticky pour ancres #event-* */
}

.cl-event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cl-shadow-lg);
  border-color: var(--cl-gold);
}

.cl-event-card-star {
  border: 2px solid var(--cl-gold);
  background: linear-gradient(180deg, var(--cl-gold-pale) 0%, var(--cl-white) 30%);
}

/* Surbrillance quand on clique sur une pill du hero — :target = card cible de l'ancre URL */
.cl-event-card:target {
  border: 2px solid var(--cl-gold) !important;
  box-shadow: 0 0 0 6px rgba(212,150,26,0.18), var(--cl-shadow-lg) !important;
  animation: cl-target-pulse 1.4s ease-out;
}

@keyframes cl-target-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,150,26,0.55), var(--cl-shadow-lg); transform: scale(1); }
  40%  { box-shadow: 0 0 0 14px rgba(212,150,26,0.25), var(--cl-shadow-lg); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 6px rgba(212,150,26,0.18), var(--cl-shadow-lg); transform: scale(1); }
}

.cl-event-emoji {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 4px;
}

.cl-event-title {
  font-family: var(--cl-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--cl-text);
  line-height: 1.2;
  margin-bottom: 2px;
}

.cl-event-suggest {
  font-family: var(--cl-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cl-gold);
  margin-bottom: 8px;
}

.cl-event-desc {
  font-family: var(--cl-sans);
  font-size: 13px;
  color: var(--cl-text-mid);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 12px;
}

.cl-event-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.cl-event-price-orig {
  font-family: var(--cl-sans);
  font-size: 14px;
  color: var(--cl-text-lt);
  text-decoration: line-through;
}

.cl-event-price-final {
  font-family: var(--cl-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--cl-gold);
  line-height: 1;
}

.cl-event-price-tag {
  font-family: var(--cl-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--cl-green);
  background: var(--cl-green-bg);
  padding: 2px 7px;
  border-radius: 99px;
}

.cl-event-link {
  display: inline-block;
  margin-top: auto;
  background: var(--cl-navy);
  color: var(--cl-white) !important;
  font-family: var(--cl-sans);
  font-weight: 600;
  font-size: 12.5px;
  padding: 10px 18px;
  border-radius: 99px;
  text-decoration: none !important;
  transition: opacity .2s ease;
}

.cl-event-card-star .cl-event-link {
  background: var(--cl-gold);
  color: var(--cl-navy-deep) !important;
}

.cl-event-link:hover {
  opacity: 0.85;
}

.cl-events-note,
.cl-packs-note,
.cl-faq-more {
  text-align: center;
  font-family: var(--cl-sans);
  font-size: 13.5px;
  color: var(--cl-text-mid);
  margin-top: 24px;
}

.cl-events-note a,
.cl-packs-note a,
.cl-faq-more a {
  color: var(--cl-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cl-events-note a:hover,
.cl-packs-note a:hover,
.cl-faq-more a:hover {
  color: var(--cl-navy);
}

/* Section "Vous préférez à l'unité ?" en bas de home */
.cl-home-catalog-link {
  background: var(--cl-cream-dk);
  padding: 56px 24px;
  border-top: 1px solid var(--cl-border);
}

.cl-home-catalog-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 0 auto;
}

.cl-home-catalog-text {
  flex: 1;
  min-width: 280px;
}

.cl-home-catalog-text .cl-tag {
  margin-bottom: 8px;
}

.cl-home-catalog-text h3 {
  font-family: var(--cl-serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  color: var(--cl-text);
  line-height: 1.2;
  margin: 0 0 6px;
}

.cl-home-catalog-text p {
  font-family: var(--cl-sans);
  font-size: 14px;
  color: var(--cl-text-mid);
  margin: 0;
}

.cl-home-catalog-link a.cl-btn-navy {
  flex-shrink: 0;
}

/* ====================================================
   8. BOUTON WHATSAPP FLOTTANT
   ==================================================== */

/* ====================================================
   CHAT STICKY EMAIL-RELAY (remplace l'ancienne bulle WhatsApp)
   ==================================================== */

/* === BULLE === Gold plein + icône navy (convention chat-widget, max contraste sur fond crème) */
.cl-chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cl-gold, #c8a04a);
  color: var(--cl-navy-deep, #0E2535);
  border: none;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(200,160,74,0.45), 0 2px 6px rgba(14,37,53,0.10);
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .35s ease, transform .35s ease, background .2s ease, box-shadow .2s ease;
  pointer-events: none;
}
.cl-chat-bubble-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: cl-chat-bubble-pulse 1.2s ease-out 0.3s 1;
}
@keyframes cl-chat-bubble-pulse {
  0%   { box-shadow: 0 4px 20px rgba(200,160,74,0.45), 0 0 0 0 rgba(200,160,74,0.5); }
  60%  { box-shadow: 0 4px 20px rgba(200,160,74,0.45), 0 0 0 14px rgba(200,160,74,0); }
  100% { box-shadow: 0 4px 20px rgba(200,160,74,0.45), 0 2px 6px rgba(14,37,53,0.10); }
}
.cl-chat-bubble:hover {
  background: var(--cl-gold-lt, #e9b44b);
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(200,160,74,0.55), 0 2px 8px rgba(14,37,53,0.15);
}
.cl-chat-bubble-icon { width: 26px; height: 26px; stroke-width: 2.2; }
.cl-chat-bubble-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: var(--cl-navy-deep, #0E2535);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cl-gold, #c8a04a);
  font-family: var(--cl-sans);
  line-height: 1;
}

/* === MODAL === */
.cl-chat-modal {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 130px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(14,37,53,0.20);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  font-family: var(--cl-sans);
  overflow: hidden;
}
.cl-chat-modal-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Header navy */
.cl-chat-modal-header {
  background: linear-gradient(135deg, var(--cl-navy-deep, #0E2535) 0%, #142b3f 100%);
  color: #fff;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.cl-chat-modal-title {
  font-family: var(--cl-serif);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.cl-chat-modal-subtitle {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cl-chat-modal-subtitle::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
  animation: cl-chat-pulse 2s infinite;
}
@keyframes cl-chat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}
.cl-chat-modal-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background .2s ease, color .2s ease;
}
.cl-chat-modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.cl-chat-modal-close svg { width: 18px; height: 18px; }

/* Body scrollable */
.cl-chat-modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
  background: #faf6ef;
}

.cl-chat-greeting {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #333;
  box-shadow: 0 1px 3px rgba(14,37,53,0.05);
}
.cl-chat-greeting p { margin: 0 0 8px 0; }
.cl-chat-greeting p:last-child { margin-bottom: 0; }

/* Form */
.cl-chat-form { display: flex; flex-direction: column; gap: 10px; }
.cl-chat-field { display: flex; flex-direction: column; gap: 4px; }
.cl-chat-field-label {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(14,37,53,0.65);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cl-chat-field-label em { color: var(--cl-gold, #c8a04a); font-style: normal; }
.cl-chat-optional {
  font-weight: 400;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(14,37,53,0.5);
}
.cl-chat-field input,
.cl-chat-field textarea {
  font-family: var(--cl-sans);
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid #e0d8c8;
  border-radius: 8px;
  background: #fff;
  color: #2a3540;
  transition: border-color .2s ease, box-shadow .2s ease;
  resize: vertical;
}
.cl-chat-field input:focus,
.cl-chat-field textarea:focus {
  outline: none;
  border-color: var(--cl-gold, #c8a04a);
  box-shadow: 0 0 0 3px rgba(200,160,74,0.15);
}
.cl-chat-field textarea { min-height: 80px; }

/* Honeypot caché */
.cl-chat-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Submit */
.cl-chat-submit {
  margin-top: 6px;
  padding: 11px 18px;
  background: var(--cl-gold, #c8a04a);
  color: var(--cl-navy-deep, #0E2535);
  border: none;
  border-radius: 999px;
  font-family: var(--cl-serif);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.cl-chat-submit:hover:not(:disabled) {
  background: var(--cl-gold-lt, #e9b44b);
  transform: translateY(-1px);
}
.cl-chat-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.cl-chat-submit-spinner {
  width: 16px;
  height: 16px;
  display: none;
  animation: cl-chat-spin 0.9s linear infinite;
}
.cl-chat-form-loading .cl-chat-submit-label { opacity: 0.6; }
.cl-chat-form-loading .cl-chat-submit-spinner { display: inline-block; }
@keyframes cl-chat-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Success state */
.cl-chat-success {
  text-align: center;
  padding: 20px 10px;
}
.cl-chat-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #4ade80;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-chat-success h3 {
  font-family: var(--cl-serif);
  font-size: 18px;
  color: var(--cl-navy-deep, #0E2535);
  margin: 0 0 8px 0;
}
.cl-chat-success p {
  font-size: 13.5px;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* Error fallback */
.cl-chat-error {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fef0f0;
  border: 1px solid #f0c0c0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #6a1b1b;
}
.cl-chat-error a { color: #b03434; font-weight: 600; text-decoration: underline; }

/* Footer modal */
.cl-chat-modal-footer {
  padding: 10px 16px;
  font-size: 11.5px;
  color: rgba(14,37,53,0.55);
  background: #fff;
  border-top: 1px solid rgba(14,37,53,0.06);
  text-align: center;
  flex-shrink: 0;
}
.cl-chat-modal-footer a {
  color: var(--cl-gold, #c8a04a);
  font-weight: 600;
  text-decoration: none;
}
.cl-chat-modal-footer a:hover { text-decoration: underline; }

/* ====================================================
   9. RESPONSIVE
   ==================================================== */

@media (max-width: 992px) {
  .cl-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .cl-hero-cards { display: none; } /* On cache les hero cards en tablette/mobile */

  .cl-occ-grid { grid-template-columns: repeat(2, 1fr); }
  .cl-packs-grid { grid-template-columns: repeat(2, 1fr); }

  .cl-steps { grid-template-columns: 1fr; gap: 28px; }
  .cl-steps::before { display: none; }
}

@media (max-width: 768px) {
  header#header.ct-header [data-row*="middle"] { --headerRowHeight: 60px; }
  header#header.ct-header .site-logo-container::before,
  header#header.ct-header .site-logo-container::after { font-size: 22px; }

  /* Padding footer mobile géré via Customizer Blocksy (icônes responsive sur les sliders).
     On ne garde ici que le fine-tuning des titres widget — sans margin-top pour ne pas
     créer de blanc en plus de l'espacement Customizer. */
  body .ct-footer .widget-title,
  body .ct-footer .ct-widget h3 { font-size: 17px !important; }

  .vrilistcontainer { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Mobile : on annule le grid 2 cols de la fiche pack — tout empile (image, info, form) */
  .vri-page-content:has(> .vri-bookform-container) { display: block; }
  .vri-page-content:has(> .vri-bookform-container) > .vri-itemdet-groupblocks { display: flex !important; flex-direction: column; gap: 20px; margin-bottom: 28px; }
  .vri-page-content:has(> .vri-bookform-container) > .vri-bookform-container { position: static; margin-top: 28px; }
  .vri-itemdet-groupleft { position: static; }
  .vri-itemdet-imagesblock { aspect-ratio: 1/1; }

  .vri-bookform-container,
  .vri-main-search-form,
  .vridivsearch { padding: 22px 18px; }

  /* Formulaire de réservation mobile : tout en colonne */
  .vri-bookform-container .vrisfentry,
  .vri-bookform-container .vrisfentry:has(input[name="itemquant"]) {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .vri-bookform-container .vrisfentry > label,
  .vri-bookform-container .vrisfentry > .vripickdroplab {
    grid-column: auto;
  }
  .vri-bookform-container .vrisfentrysubmit { width: 100%; }
  .vridetbooksubmit { width: 100% !important; max-width: none !important; }

  .cl-chat-bubble { bottom: 18px; right: 18px; width: 52px; height: 52px; }
  .cl-chat-bubble-icon { width: 24px; height: 24px; }
  .cl-chat-modal {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  /* Home mobile : padding-top suffisant pour passer sous le header sticky,
     gap lead→form réduit pour faire remonter le formulaire dans la fold. */
  .cl-hero { padding: 88px 18px 40px; min-height: auto; }
  .cl-hero-pills { margin-bottom: 16px; gap: 6px; }
  .cl-hero-title { margin-bottom: 12px !important; }
  .cl-hero-lead { margin-bottom: 10px; font-size: 15px; }
  .cl-hero-search { padding: 18px 16px 16px; max-width: none; margin-bottom: 12px; }
  .cl-hero-search-title { font-size: 17px; margin-bottom: 10px; }
  .cl-hero-search-help { margin: 0 0 12px 0; }
  .cl-hero-search-help li { font-size: 11.5px; line-height: 1.45; padding-left: 20px; margin-bottom: 4px; }
  .cl-hero-search-help li::before { top: 4px; width: 11px; height: 11px; }
  .cl-hero-altcta { margin: 8px 0 0 4px; font-size: 12.5px; }

  /* Hero stats : passer en colonne sur mobile (3 USP empilés) — legacy */
  .cl-hero-stats { grid-template-columns: 1fr; gap: 12px; }
  .cl-stat { padding-left: 36px; }
  .cl-stat b { font-size: 14px; }
  .cl-stat span { font-size: 12px; }

  .cl-section { padding: 60px 0; }
  .cl-shead { margin-bottom: 36px; }

  /* Réassurance mobile : flex column compact (au lieu du grid 4 cols) */
  .cl-rass-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
  .cl-rass-item {
    font-size: 13px;
    padding: 0;
    border-right: none;
    width: 100%;
  }

  .cl-occ-grid { gap: 10px; }
  .cl-occ-card { padding: 22px 14px; }
  .cl-occ-name { font-size: 17px; }

  .cl-packs-grid { grid-template-columns: 1fr; gap: 16px; }
  .cl-packs-note { margin-top: -20px; font-size: 12.5px; }

  .cl-cta-final { padding: 60px 18px; }
  .cl-cta-btns { flex-direction: column; align-items: stretch; }
  .cl-cta-btns a { text-align: center; }

  /* Cross-sell mobile */
  .cl-pack-upsell { padding: 22px 18px; margin-top: 24px; }
  .cl-pack-upsell-cards { grid-template-columns: 1fr; }
  .cl-pack-mariage-suggest {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 22px;
  }
  .cl-pack-mariage-suggest a.cl-btn-gold { width: 100%; text-align: center; }

  .cl-home-catalog-link { padding: 40px 18px; }
  .cl-home-catalog-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cl-home-catalog-link a.cl-btn-navy { width: 100%; text-align: center; }

  /* Bandeau réductions volume mobile */
  .cl-volume-banner { padding: 24px 18px; }
  .cl-volume-banner-inner { grid-template-columns: 1fr; gap: 18px; }
  .cl-volume-banner-tiers { grid-template-columns: 1fr; gap: 8px; }
  .cl-volume-tier { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; text-align: left; }
  .cl-volume-tier-pct { margin-bottom: 0; font-size: 22px; }
  .cl-volume-tier-label { text-align: right; }

  /* Section événements mobile */
  .cl-events-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cl-event-card { padding: 20px 14px 18px; }
  .cl-event-emoji { font-size: 28px; }
  .cl-event-title { font-size: 19px; }
  .cl-event-price-final { font-size: 22px; }
}

@media (max-width: 480px) {
  .cl-events-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cl-hero-title { font-size: 36px !important; }
  .cl-hero-pills { gap: 5px; }
  .cl-pill { font-size: 11px; padding: 4px 10px; }
  .cl-hero-ctas { flex-direction: column; align-items: stretch; }
  .cl-hero-ctas a { text-align: center; }

  .cl-occ-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .vri-page-content { padding: 24px 14px 60px; }
  .vri-list-item-block .vri-list-item-inner { padding: 18px 18px 0 !important; }
  .vri-list-item-block .vri-list-item-cont { padding: 14px 18px 18px !important; }
  .vri-list-item-block .vrilistitemname { font-size: 19px !important; }
  .vri-list-item-block .item_cost { font-size: 28px !important; }
}

/* =========================================================
   PAGES À PROPOS + CONTACT (refonte 2026-05-03)
   ========================================================= */

/* Masque le titre WP + breadcrumb au-dessus du hero Elementor sur ces pages
   (le H1 propre est déjà dans le hero Elementor) */
body.page-id-1039 .entry-header,
body.page-id-1290 .entry-header,
body.page-id-2779 .entry-header,
body.page-id-1483 .entry-header,
body.page-id-2639 .entry-header,
body.page-id-1478 .entry-header,
body.page-id-2785 .entry-header,
body.page-id-2549 .entry-header,
body.page-id-2811 .entry-header,
body.page-id-2812 .entry-header,
body.page-id-2813 .entry-header {
  display: none !important;
}

/* =========================================================
   Page /reserver/ (2549) — récap commande VRI v2
   Stylisation des classes natives VRI pour intégrer le branding CarcaLoca.
   ========================================================= */

/* Background page entière en cream */
body.page-id-2549 .vri-page-content {
  background: var(--cl-cream, #faf6ef);
  padding: 50px 24px 80px;
  max-width: 920px;
  margin: 0 auto;
}

/* Cache le H3 titre VRI tronqué et inutile */
body.page-id-2549 h3.vri-ord-details-intro {
  display: none !important;
}

/* Wrapper top container = la card principale blanche */
body.page-id-2549 .vri-ord-top-container {
  background: #fff;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(14,37,53,0.08);
  margin-bottom: 22px;
}

/* Header confirmation : hero navy CarcaLoca */
body.page-id-2549 .vri-ord-details-head,
body.page-id-2549 .vri-ord-details-head-confirmed {
  background: linear-gradient(135deg, var(--cl-navy-deep) 0%, var(--cl-navy) 100%) !important;
  color: #fff !important;
  padding: 36px 30px !important;
  text-align: center;
  font-family: var(--cl-serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  border: none !important;
}

/* Mid container = contenu principal de la card */
body.page-id-2549 .vri-ord-mid-container {
  padding: 24px 30px 30px 30px;
}

/* Médium header (titres de section) */
body.page-id-2549 .vri-medium-header {
  font-family: var(--cl-serif) !important;
  font-size: 17px !important;
  color: var(--cl-navy-deep) !important;
  font-weight: 600 !important;
  margin: 24px 0 14px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--cl-gold) !important;
  display: inline-block !important;
}

/* Détails de la commande : liste FLAT (plus de cards-in-cards) */
body.page-id-2549 .vri-ord-pickdrop-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* Chaque row : label uppercase gris + value navy, pas de bg */
body.page-id-2549 .vri-ord-det-cont {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.page-id-2549 .vri-ord-det-lbl {
  color: rgba(14,37,53,0.55) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: block !important;
}
body.page-id-2549 .vri-ord-det-val {
  color: var(--cl-navy-deep) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}
/* Récupération + Restitution : flat aussi */
body.page-id-2549 .vri-ord-pickleft-block,
body.page-id-2549 .vri-ord-dropright-block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.page-id-2549 .vri-ord-pickdate-inner,
body.page-id-2549 .vri-ord-dropdate-inner,
body.page-id-2549 .vri-ord-picklocation-inner,
body.page-id-2549 .vri-ord-droplocation-inner {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.page-id-2549 .vri-ord-pickupdt-lbl,
body.page-id-2549 .vri-ord-dropoffdt-lbl,
body.page-id-2549 .vri-ord-pickuploc-lbl,
body.page-id-2549 .vri-ord-dropoffloc-lbl {
  color: rgba(14,37,53,0.55) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  display: block !important;
  margin: 0 !important;
}
body.page-id-2549 .vri-ord-pickupdt-val,
body.page-id-2549 .vri-ord-dropoffdt-val,
body.page-id-2549 .vri-ord-pickuploc-val,
body.page-id-2549 .vri-ord-dropoffloc-val {
  color: var(--cl-navy-deep) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}
/* Petit séparateur subtle entre récupération et restitution */
body.page-id-2549 .vri-ord-dropright-block {
  border-top: 1px solid rgba(14,37,53,0.08) !important;
  padding-top: 14px !important;
}

/* Bouton télécharger PDF */
body.page-id-2549 .vri-ord-downpdf,
body.page-id-2549 .vri-ord-downpdf a,
body.page-id-2549 a.vri-ord-downpdf {
  display: inline-block !important;
  margin: 18px 0 8px 0 !important;
  background: var(--cl-gold) !important;
  color: var(--cl-navy-deep) !important;
  padding: 12px 24px !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(212,150,26,0.3);
}
body.page-id-2549 .vri-ord-downpdf:hover,
body.page-id-2549 .vri-ord-downpdf a:hover {
  background: var(--cl-gold-lt, #e9b44b) !important;
  color: var(--cl-navy-deep) !important;
}

/* Container infos client : FLAT (plus de double-card) */
body.page-id-2549 .vri-bookingdet-custdata {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
}
body.page-id-2549 .vri-bookingdet-userdetail {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.page-id-2549 .vri-bookingdet-userdetail-lbl {
  color: rgba(14,37,53,0.55) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
body.page-id-2549 .vri-bookingdet-userdetail-val {
  color: var(--cl-navy-deep) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
}

/* Bloc item (pack) — placé EN DEHORS du wrapper top, donc on le wrappe avec une card propre */
body.page-id-2549 .vri-ord-item-block {
  max-width: 920px !important;
  margin: 0 auto 22px auto !important;
  background: #fff !important;
  border: 1px solid #e8e2d4 !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 4px 16px rgba(14,37,53,0.05);
}
body.page-id-2549 .vri-ord-item-entry-name {
  color: var(--cl-navy-deep) !important;
  font-family: var(--cl-serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}
body.page-id-2549 .vri-ord-item-entry-tariff {
  color: var(--cl-gold) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* Total */
body.page-id-2549 .vri-ord-coststot-container {
  max-width: 920px !important;
  margin: 0 auto 22px auto !important;
  padding: 20px 26px !important;
  background: var(--cl-navy-deep) !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-align: right !important;
  box-shadow: 0 4px 16px rgba(14,37,53,0.15);
}
body.page-id-2549 .vri-ord-coststot-container,
body.page-id-2549 .vri-ord-coststot-container * {
  color: #fff !important;
}

/* Demande annulation (en bas) */
body.page-id-2549 .vri-ord-reqcanc-container {
  max-width: 920px !important;
  margin: 0 auto !important;
  background: #fff !important;
  border: 1px solid #e8e2d4 !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
}

/* Cache l'image logo native VRI (déjà branding CarcaLoca dans le hero) */
body.page-id-2549 .vri-ord-mid-container > img,
body.page-id-2549 .vri-ord-mid-container > a > img,
body.page-id-2549 img[src*="2025/08"] {
  display: none !important;
}

/* =========================================================
   TUNNEL VRI COMPLET (page-id-20) — sweep CSS unifié
   Couvre toutes les vues : catalogue liste, fiche produit, résultats search,
   page intermédiaire showprc, validation oconfirm.
   Branding CarcaLoca (navy/gold/cream) appliqué partout.
   ========================================================= */

/* ---- BUTTONS : tous les CTA VRI en gold pilule ---- */
input.vridetbooksubmit,
.btn.booknow,
button.btn.booknow,
.btn.vricontinue,
.btn.vrirelitemsubmit,
.btn.vrisubmitcoupon,
.btn.vri-pincode-sbmt,
.btn.vrichangedeliveryaddress,
.vrilistgoonlist,
.vri-search-btn,
.vrioconfirmbuttonsdiv .btn,
.vricompleteorderdiv .btn,
.vricontinuerentdiv .btn {
  background: var(--cl-gold) !important;
  background-color: var(--cl-gold) !important;
  color: var(--cl-navy-deep) !important;
  padding: 12px 28px !important;
  border-radius: 100px !important;
  font-family: var(--cl-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  border: none !important;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 3px 12px rgba(212,150,26,0.3);
  text-decoration: none !important;
  letter-spacing: 0.2px;
}
input.vridetbooksubmit:hover,
.btn.booknow:hover,
.btn.vricontinue:hover,
.btn.vrirelitemsubmit:hover,
.vrilistgoonlist:hover {
  background: var(--cl-gold-lt, #e9b44b) !important;
  background-color: var(--cl-gold-lt, #e9b44b) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(212,150,26,0.4);
}

/* ---- HEADERS / TITRES ---- */
.vri-page-head-title,
.vri-medium-header,
.vri-big-header,
.vri-header-attract,
.vri-rental-summary-title {
  font-family: var(--cl-serif) !important;
  color: var(--cl-navy-deep) !important;
  font-weight: 600 !important;
}

/* ---- CARDS LISTE CATALOGUE ---- */
.vri-list-item-block,
.vri-list-item-kit-block,
.vri-search-result-block {
  background: #ffffff !important;
  border: 1px solid #e8e2d4 !important;
  border-radius: 14px !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(14,37,53,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vri-list-item-block:hover,
.vri-search-result-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14,37,53,0.1);
}
.vri-list-item-inner,
.vri-result-item-inner {
  padding: 22px !important;
  background: transparent !important;
}

/* Nom item dans liste */
.vrilistitemname,
.vri-itemdet-infoname {
  font-family: var(--cl-serif) !important;
  font-size: 19px !important;
  color: var(--cl-navy-deep) !important;
  font-weight: 600 !important;
}
/* Catégorie */
.vrilistitemcat,
.vri-itemdet-infocat {
  color: var(--cl-gold) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  margin-bottom: 6px;
}
/* Description */
.vrilistitemdescr,
.vri-list-item-descr,
.vri-itemdet-descr {
  color: var(--cl-text-mid, #4a5560) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* ---- PRIX VRI ---- */
.vrilistdivcost,
.vri-itemdet-price-cost,
.vri-result-divcost,
.item_cost,
.vriprice {
  color: var(--cl-gold) !important;
  font-family: var(--cl-serif) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
}
.vriliststartfrom,
.vriliststartfromtext,
.vri-itemdet-price-startfrom,
.vri-itemdet-price-fromtext {
  color: var(--cl-text-mid, #4a5560) !important;
  font-size: 13px !important;
}

/* ---- FORMULAIRE date picker (fiche produit) ---- */
.vri-bookform-container {
  background: var(--cl-navy-deep) !important;
  padding: 24px !important;
  border-radius: 12px !important;
}
.vri-bookform-container .vri-medium-header {
  color: #ffffff !important;
}
.vridivsearch.vri-main-search-form,
.vricalform {
  background: transparent !important;
}
.vripickdroplab {
  color: rgba(255,255,255,0.85) !important;
  font-size: 12px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Note : les anciennes règles `.vri-bookform-container input/select` (fond blanc)
   héritées du bloc body.page-id-20 ont été supprimées car elles conflictaient
   avec les overrides plus haut dans le fichier (form sur fond navy avec inputs
   glass, selects heure rendu natif). Voir sections 6 plus haut. */

/* ---- Bullets info sous le titre du form fiche pack — calé sur .cl-hero-search-help ---- */
.cl-bookform-info {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  font-family: var(--cl-sans);
}
.cl-bookform-info li {
  position: relative;
  padding-left: 20px;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0.1px;
  margin-bottom: 4px;
}
.cl-bookform-info li:last-child { margin-bottom: 0; }
.cl-bookform-info li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9B44B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* ---- Layout form fiche pack — calé sur .cl-hero-search-row (home) ---- */
.cl-bookform-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 8px;
  align-items: end;
  margin-bottom: 14px;
}
.cl-bookform-field {
  display: flex;
  flex-direction: column;
  position: relative;
}
.cl-bookform-field label {
  color: rgba(255,255,255,0.55);
  font-family: var(--cl-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 6px;
}
/* Date input — le wrapper .vri-sf-input-wrap garde l'input + icône calendrier */
.cl-bookform-field .vri-sf-input-wrap {
  width: 100%;
}
.cl-bookform-field .vri-sf-input-wrap span {
  position: relative;
  display: block;
  width: 100%;
}
.cl-bookform-field .vri-sf-input-wrap input[type="text"] {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 10px 36px 10px 12px;
  font-family: var(--cl-sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  width: 100%;
  box-sizing: border-box;
}
.cl-bookform-field .vri-sf-input-wrap input[type="text"]::placeholder {
  color: rgba(255,255,255,0.45);
  font-weight: 400;
}
.cl-bookform-field .vri-sf-input-wrap input[type="text"]:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
}
.cl-bookform-field .vri-sf-input-wrap input[type="text"]:focus {
  outline: none;
  border-color: var(--cl-gold, #c8a04a);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 2px rgba(212,150,26,0.3);
}
.cl-bookform-field .vri-sf-input-wrap .vri-caltrigger {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cl-gold, #c8a04a);
  pointer-events: none;
}
/* Time select custom — match home */
.cl-bookform-field--time { flex-shrink: 0; }
.cl-bookform-time {
  background-color: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 10px 28px 10px 12px;
  font-family: var(--cl-sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9B44B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 11px 11px;
  min-width: 88px;
}
.cl-bookform-time:hover {
  background-color: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
}
.cl-bookform-time:focus {
  outline: none;
  border-color: var(--cl-gold, #c8a04a);
  background-color: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 2px rgba(212,150,26,0.3);
}
.cl-bookform-time option {
  background: var(--cl-navy-deep);
  color: #fff;
}

/* Bouton submit : pleine largeur sous la grille 2x2 (calé sur la home) */
.cl-bookform-field--submit {
  grid-column: 1 / -1;
  align-self: stretch;
}
.cl-bookform-field--submit .vridetbooksubmit {
  width: 100%;
  padding: 14px 22px;
  white-space: nowrap;
  line-height: 1.2;
}

/* Neutralise les anciennes règles VRI qui forçaient les inputs en glass (conflit avec .cl-bookform-field) */
.vri-bookform-container .cl-bookform-row .vri-sf-input-wrap {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ---- Datepicker contraint fiche pack (jeudi/vendredi only) ---- */
.ui-datepicker td.cl-dp-disabled,
.ui-datepicker td.cl-dp-disabled .ui-state-default {
  opacity: 0.3;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ---- Mode read-only (panier actif) : banner horizontal compact en haut ---- */
.cl-bookform-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cl-bookform-banner-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 240px;
}
.cl-bookform-banner-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: rgba(200,160,74,0.15);
  border-radius: 10px;
  color: var(--cl-gold, #c8a04a);
}
.cl-bookform-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--cl-sans);
}
.cl-bookform-banner-dates {
  font-size: 14px;
  color: white;
  line-height: 1.3;
}
.cl-bookform-banner-dates strong {
  font-weight: 700;
  color: white;
}
.cl-bookform-banner-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.cl-bookform-banner-action {
  display: flex;
  align-items: center;
}
.cl-bookform-banner-action:empty { display: none; }
.cl-bookform-banner-action .cl-bookform-checking {
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.cl-bookform-banner-modify {
  font-family: var(--cl-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-gold, #c8a04a) !important;
  text-decoration: none !important;
  white-space: nowrap;
  padding: 8px 14px;
  border: 1px solid rgba(200,160,74,0.35);
  border-radius: 999px;
  transition: background .2s ease;
}
.cl-bookform-banner-modify:hover {
  background: rgba(200,160,74,0.12);
}

/* ---- Sticky bottom CTA bar (fiche pack) ---- */
.cl-fiche-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 24px;
  background: var(--cl-navy-deep);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
  font-family: var(--cl-sans);
}
.cl-fiche-cta-info {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.cl-fiche-cta-name {
  font-family: var(--cl-serif);
  font-size: 15px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-fiche-cta-price {
  font-family: var(--cl-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--cl-gold, #c8a04a);
  white-space: nowrap;
}
.cl-fiche-cta-btn {
  flex-shrink: 0;
  padding: 9px 22px;
  border: none;
  border-radius: 999px;
  font-family: var(--cl-serif);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.cl-fiche-cta-btn--add {
  background: var(--cl-gold, #c8a04a);
  color: var(--cl-navy-deep);
  box-shadow: 0 4px 14px rgba(200,160,74,0.4);
}
.cl-fiche-cta-btn--modify {
  background: rgba(220,80,80,0.85);
  color: white;
  box-shadow: 0 4px 14px rgba(220,80,80,0.3);
}
.cl-fiche-cta-btn:hover {
  transform: translateY(-1px);
}
/* Lien secondaire "Voir panier (n)" dans la sticky bar */
.cl-fiche-cta-viewcart {
  flex-shrink: 0;
  font-family: var(--cl-sans);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
  white-space: nowrap;
  padding: 8px 4px;
  transition: color .2s ease;
}
.cl-fiche-cta-viewcart:hover {
  color: var(--cl-gold, #c8a04a) !important;
}
@media (max-width: 600px) {
  .cl-fiche-cta-bar { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .cl-fiche-cta-info { flex: 0 0 auto; min-width: 0; }
  .cl-fiche-cta-name { font-size: 14px; }
  .cl-fiche-cta-price { font-size: 18px; }
  .cl-fiche-cta-btn { padding: 11px 16px; font-size: 14px; flex: 1; }
  .cl-fiche-cta-viewcart { font-size: 11.5px; padding: 4px 0; }
}

/* Sur la fiche pack, la sticky cart bar globale est remplacée par .cl-fiche-cta-bar
   (qui inclut déjà un lien "Voir panier"). Évite la double sticky. */
body:has(.cl-fiche-cta-bar) .cl-cart-bar {
  display: none !important;
}

/* Compenser le bottom padding du body quand sticky CTA est présent (pas masquer le contenu) */
body:has(.cl-fiche-cta-bar) {
  padding-bottom: 64px;
}
/* Chat bubble se décale au-dessus de la sticky CTA fiche */
body:has(.cl-fiche-cta-bar) .cl-chat-bubble {
  bottom: calc(64px + env(safe-area-inset-bottom, 0));
}

/* ---- Mode read-only (panier actif) — refonte "pro" plate ---- */

/* Bloc résumé dates : ligne plate, icône + texte à gauche, lien Modifier à droite */
.cl-bookform-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cl-bookform-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.cl-bookform-summary-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  background: rgba(200,160,74,0.12);
  border-radius: 10px;
  color: var(--cl-gold, #c8a04a);
}
.cl-bookform-summary-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--cl-sans);
  min-width: 0;
}
.cl-bookform-summary-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: white;
  line-height: 1.35;
}
.cl-bookform-summary-line > span {
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  min-width: 22px;
}
.cl-bookform-summary-line strong {
  font-weight: 600;
  color: white;
}
.cl-bookform-summary-meta {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.cl-bookform-link-modify {
  flex-shrink: 0;
  font-family: var(--cl-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cl-gold, #c8a04a) !important;
  text-decoration: none !important;
  padding: 2px 0;
  transition: opacity .2s ease;
}
.cl-bookform-link-modify:hover {
  opacity: 0.75;
  text-decoration: underline !important;
}

/* Mini récap "Cet article" */
.cl-bookform-recap-mini {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-family: var(--cl-sans);
}
.cl-bookform-recap-mini-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  margin-bottom: 6px;
}
.cl-bookform-recap-mini-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: white;
  font-size: 14px;
}
.cl-bookform-recap-mini-row strong {
  font-family: var(--cl-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--cl-gold, #c8a04a);
}

/* Trust signals sous le bouton */
.cl-bookform-trust {
  list-style: none;
  margin: 14px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--cl-sans);
}
.cl-bookform-trust li {
  position: relative;
  padding-left: 22px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}
.cl-bookform-trust li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369c78f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.cl-bookform-add-to-cart {
  display: block;
  width: 100%;
  padding: 14px 18px;
  background: var(--cl-gold, #c8a04a);
  color: var(--cl-navy-deep);
  border: none;
  border-radius: 999px;
  font-family: var(--cl-serif);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(200,160,74,0.3);
}
.cl-bookform-add-to-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200,160,74,0.4);
}

/* === Pre-check dispo (mode read-only, panier actif) === */
.cl-bookform-action {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
}

/* État loading "Vérification de la disponibilité..." */
.cl-bookform-checking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 12px;
  color: rgba(255,255,255,0.7);
  font-family: var(--cl-sans);
  font-size: 13px;
}
.cl-bookform-checking-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-gold, #c8a04a);
  animation: cl-pulse 1.2s ease-in-out infinite;
}
@keyframes cl-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Badge dispo/indispo sous le titre produit (col gauche) */
.cl-product-availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--cl-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cl-product-availability-badge--ok {
  background: rgba(107,199,143,0.14);
  border: 1px solid rgba(107,199,143,0.4);
  color: #2f8d57;
}
.cl-product-availability-badge--ok .cl-product-availability-icon {
  color: #2f8d57;
  font-weight: 700;
}
.cl-product-availability-badge--ko {
  background: rgba(220,80,80,0.10);
  border: 1px solid rgba(220,80,80,0.35);
  color: #b53d3d;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 14px;
  border-radius: 12px;
}
.cl-product-availability-badge--ko .cl-product-availability-icon {
  color: #b53d3d;
  font-weight: 700;
}
.cl-product-availability-badge--ko .cl-product-availability-detail {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 11.5px;
  color: rgba(180,60,60,0.85);
  line-height: 1.4;
}

/* État "Indisponible" — bloc rouge clair + CTA Modifier dates en avant */
.cl-bookform-unavailable {
  padding: 16px 18px;
  background: rgba(220,80,80,0.12);
  border: 1px solid rgba(220,80,80,0.35);
  border-radius: 12px;
  text-align: center;
}
.cl-bookform-unavailable-title {
  font-family: var(--cl-sans);
  font-size: 14px;
  font-weight: 700;
  color: #ff9a9a;
  margin-bottom: 6px;
}
.cl-bookform-unavailable-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  background: rgba(220,80,80,0.3);
  color: white;
  font-size: 13px;
  margin-right: 6px;
}
.cl-bookform-unavailable-text {
  margin: 0;
  font-family: var(--cl-sans);
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

/* CTA "Modifier les dates" en bouton plein quand pas dispo (au lieu du lien discret) */
.cl-bookform-cta-modify {
  display: block;
  width: 100%;
  padding: 14px 18px;
  background: var(--cl-gold, #c8a04a);
  color: var(--cl-navy-deep) !important;
  border: none;
  border-radius: 999px;
  font-family: var(--cl-serif);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(200,160,74,0.3);
}
.cl-bookform-cta-modify:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200,160,74,0.4);
}

/* ---- INPUTS GLOBAUX ---- */
.vriinput,
.vritextarea,
.vrismallinput.vri-numbinput,
.vri-numbinput {
  border: 1px solid #e8e2d4 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: var(--cl-sans) !important;
  font-size: 14px !important;
}

/* ---- ITINÉRAIRE (récup/restitution) — header de page résultats ---- */
.vri-itinerary-summary,
.vri-itinerary-confirmation {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  border: 1px solid #e8e2d4 !important;
  margin-bottom: 22px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
.vri-itinerary-pickup,
.vri-itinerary-dropoff {
  background: var(--cl-cream, #faf6ef) !important;
  padding: 14px !important;
  border-radius: 10px !important;
}
.vri-itinerary-pickup-date,
.vri-itinerary-dropoff-date {
  color: var(--cl-navy-deep) !important;
  font-weight: 600 !important;
}
.vri-itinerary-duration {
  color: var(--cl-gold) !important;
  font-weight: 600;
}

/* ---- MESSAGES D'ERREUR (.vrierror, .vrilegwarning, ou inline) ---- */
.vrierror,
.vrilegwarning,
.alert,
.alert-danger,
.vri-no-availability,
[style*="color: red"],
[style*="color:red"] {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  font-size: 14px !important;
  font-family: var(--cl-sans) !important;
  margin-bottom: 22px !important;
}

/* ---- BADGES PROMO ---- */
.vri-promotion-block,
.vri-label-promo-price {
  background: var(--cl-gold) !important;
  color: var(--cl-navy-deep) !important;
  padding: 4px 10px !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- TOGGLE LAYOUT (grid/list) ---- */
.vri-search-results-chlayout {
  background: transparent !important;
  border: 1px solid var(--cl-navy-deep) !important;
  color: var(--cl-navy-deep) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}
.vri-search-results-chlayout-active,
.vri-search-results-set-grid,
.vri-search-results-set-list {
  background: var(--cl-navy-deep) !important;
  color: #ffffff !important;
}

/* =========================================================
   Page /catalogue/ (page-id-20) — page intermédiaire VRI showprc
   Apparaît après sélection produit + dates, avant paiement Stripe.
   Stylisation des classes natives pour matcher le branding CarcaLoca.
   ========================================================= */

.vri-page-content {
  background: var(--cl-cream, #faf6ef);
  padding: 14px 24px 80px;
  max-width: 1200px;
  margin: 0 auto;
}
/* Annule la marge top éventuelle de l'entry-content WP sur la page récap */
body:has(.vri-oconfirm-summary-container) .entry-content,
body:has(.vri-oconfirm-summary-container) .entry-content > .wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Wrapper principal de la page intermédiaire */
.vri-showprc-groupblocks {
  background: #ffffff;
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0 8px 30px rgba(14,37,53,0.08);
  margin-bottom: 22px;
}

/* Titre "Location Pack X pour Y Jours" */
.vri-header-attract,
.vri-medium-header.vri-header-attract {
  font-family: var(--cl-serif) !important;
  font-size: 24px !important;
  color: var(--cl-navy-deep) !important;
  font-weight: 600 !important;
  margin: 0 0 24px 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--cl-gold) !important;
  display: block !important;
}

/* Section image produit (gauche) */
.vri-showprc-groupleft {
  display: inline-block;
  width: 38%;
  vertical-align: top;
  padding-right: 20px;
}
.vri-showprc-mainimage img,
.vri-showprc-imagesblock img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #e8e2d4;
}

/* Section description + articles inclus (droite) */
.vri-showprc-groupright {
  display: inline-block;
  width: 60%;
  vertical-align: top;
}
.vri-showprc-descr {
  font-family: var(--cl-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--cl-text-mid, #4a5560);
  margin-bottom: 20px;
}

/* Section "Articles inclus dans cet ensemble" */
.vri-showprc-kitrelations {
  background: var(--cl-cream, #faf6ef);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}
.vri-kit-expl {
  font-family: var(--cl-sans);
  font-size: 11px !important;
  color: var(--cl-navy-deep) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: block;
  margin-bottom: 12px;
}
.vri-kitrelations-tbl {
  width: 100%;
  background: transparent;
  border: none;
  border-collapse: collapse;
}
.vri-kitrelations-tbl tr {
  border-bottom: 1px solid #e8e2d4;
}
.vri-kitrelations-tbl tr:last-child {
  border-bottom: none;
}
.vri-kitrelations-tbl td {
  padding: 10px 8px !important;
  font-family: var(--cl-sans);
  font-size: 14px;
  color: var(--cl-navy-deep);
  background: transparent !important;
  border: none !important;
}
.vri-kitrelations-tbl td a {
  color: var(--cl-navy-deep) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.vri-kitrelations-tbl td:last-child {
  text-align: right;
  color: var(--cl-gold) !important;
  font-weight: 600;
}

/* Section Prix */
.item_prices {
  background: #ffffff;
  border-radius: 14px;
  padding: 24px 30px;
  box-shadow: 0 4px 16px rgba(14,37,53,0.06);
  margin-bottom: 22px;
}
.item_prices .vri-medium-header {
  font-family: var(--cl-serif) !important;
  font-size: 18px !important;
  color: var(--cl-navy-deep) !important;
  font-weight: 600 !important;
  margin: 0 0 14px 0 !important;
}
.showprc-table-row {
  background: var(--cl-cream, #faf6ef) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 8px !important;
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 16px !important;
  align-items: center !important;
}
.vri-showprc-name label {
  font-family: var(--cl-sans);
  font-size: 14px !important;
  color: var(--cl-navy-deep) !important;
  font-weight: 500 !important;
}
.vri-showprc-cost label {
  font-family: var(--cl-serif);
  font-size: 18px !important;
  color: var(--cl-gold) !important;
  font-weight: 600 !important;
}

/* Boutons "Réserver maintenant" et "Retour" */
.item_buttons_box {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px;
  margin-top: 26px !important;
  padding: 0 !important;
}
.btn.booknow,
button.btn.booknow {
  background: var(--cl-gold) !important;
  color: var(--cl-navy-deep) !important;
  padding: 14px 32px !important;
  border-radius: 100px !important;
  font-family: var(--cl-sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-transform: none !important;
  border: none !important;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 16px rgba(212,150,26,0.3);
}
.btn.booknow:hover {
  background: var(--cl-gold-lt, #e9b44b) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212,150,26,0.4);
}
.goback a {
  display: inline-block;
  background: transparent !important;
  color: var(--cl-navy-deep) !important;
  padding: 12px 24px !important;
  border-radius: 100px !important;
  border: 1px solid var(--cl-navy-deep) !important;
  font-family: var(--cl-sans) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  transition: all .2s ease;
}
.goback a:hover {
  background: var(--cl-navy-deep) !important;
  color: #ffffff !important;
}

/* Responsive */
@media (max-width: 720px) {
  .vri-showprc-groupleft,
  .vri-showprc-groupright {
    width: 100% !important;
    padding-right: 0 !important;
  }
  .item_buttons_box {
    flex-direction: column-reverse;
  }
}

/* Neutralise le fond gris des colonnes Elementor sur cette page */
body.page-id-2549 .elementor-column-wrap,
body.page-id-2549 .elementor-widget-wrap,
body.page-id-2549 .elementor-column .elementor-element-populated,
body.page-id-2549 .e-con-inner,
body.page-id-2549 [class*="elementor-section"]:not(.elementor-section-stretched) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Force toutes les sections Elementor sur la page à avoir le fond cream */
body.page-id-2549 .elementor-section,
body.page-id-2549 .elementor-container {
  background: var(--cl-cream, #faf6ef) !important;
  background-color: var(--cl-cream, #faf6ef) !important;
}

/* Pack + total + annulation : centrer et limiter la largeur */
body.page-id-2549 .vri-ord-item-block,
body.page-id-2549 .vri-ord-coststot-container,
body.page-id-2549 .vri-ord-reqcanc-container {
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Vire le wrapper bizarre autour du bouton PDF qui crée une pilule cream */
body.page-id-2549 .vri-ord-downpdf {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
body.page-id-2549 .vri-ord-downpdf a,
body.page-id-2549 a.vri-ord-downpdf {
  display: inline-block !important;
  background: var(--cl-gold) !important;
  color: var(--cl-navy-deep) !important;
  padding: 12px 24px !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(212,150,26,0.3);
  margin-top: 18px;
}

/* Demande d'annulation : section plus joliment intégrée */
body.page-id-2549 .vri-ord-reqcanc-container {
  background: #fff !important;
  border: 1px solid #e8e2d4 !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-top: 22px !important;
  margin-bottom: 30px !important;
}
body.page-id-2549 .vri-ord-reqcanc-entry {
  margin-bottom: 14px !important;
}
body.page-id-2549 .vri-ord-reqcanc-entry input[type="text"],
body.page-id-2549 .vri-ord-reqcanc-entry input[type="email"],
body.page-id-2549 .vri-ord-reqcanc-entry textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid #e8e2d4 !important;
  border-radius: 8px !important;
  font-family: var(--cl-sans) !important;
  font-size: 14px !important;
  color: var(--cl-navy-deep) !important;
  background: #fff !important;
}
body.page-id-2549 .vri-ord-reqcanc-entry-sbmt button,
body.page-id-2549 .vri-ord-reqcanc-entry-sbmt input[type="submit"] {
  background: var(--cl-navy-deep) !important;
  color: #fff !important;
  padding: 12px 24px !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 720px) {
  body.page-id-2549 .vri-ord-pickdrop-block {
    grid-template-columns: 1fr !important;
  }
}

/* Pages légales (CGV 1483 / Confidentialité 2639 / Mentions Légales 1478) :
   wrapper narrow + typo cohérente avec le branding CarcaLoca */
body.page-id-1483 .elementor-widget-text-editor,
body.page-id-2639 .elementor-widget-text-editor,
body.page-id-1478 .elementor-widget-text-editor {
  max-width: 760px;
  margin: 0 auto;
  padding: 50px 24px 60px;
}
body.page-id-1483 .elementor-widget-text-editor p,
body.page-id-2639 .elementor-widget-text-editor p,
body.page-id-1478 .elementor-widget-text-editor p {
  font-family: var(--cl-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--cl-text-mid, #4a5560);
  margin: 0 0 14px;
}
body.page-id-1483 .elementor-widget-text-editor p:has(> strong:only-child),
body.page-id-2639 .elementor-widget-text-editor p:has(> strong:only-child),
body.page-id-1478 .elementor-widget-text-editor p:has(> strong:only-child) {
  margin-top: 32px;
  margin-bottom: 8px;
}
body.page-id-1483 .elementor-widget-text-editor p > strong:only-child,
body.page-id-2639 .elementor-widget-text-editor p > strong:only-child,
body.page-id-1478 .elementor-widget-text-editor p > strong:only-child {
  font-family: var(--cl-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--cl-navy-deep);
  display: block;
}
body.page-id-1483 .elementor-widget-text-editor ul,
body.page-id-2639 .elementor-widget-text-editor ul,
body.page-id-1478 .elementor-widget-text-editor ul {
  margin: 8px 0 16px 0;
  padding-left: 22px;
}
body.page-id-1483 .elementor-widget-text-editor li,
body.page-id-2639 .elementor-widget-text-editor li,
body.page-id-1478 .elementor-widget-text-editor li {
  font-family: var(--cl-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--cl-text-mid, #4a5560);
  margin-bottom: 4px;
}
body.page-id-1483 .elementor-widget-text-editor a,
body.page-id-2639 .elementor-widget-text-editor a,
body.page-id-1478 .elementor-widget-text-editor a {
  color: var(--cl-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Masque le faux numéro de téléphone du header (numéro placeholder qui appellerait
   une vraie ligne tierce). Le contact se fait via WhatsApp et email. */
header#header.ct-header a.cl-nav-tel {
  display: none !important;
}

/* Masque les liens sociaux Blocksy (tous href="#" en attendant les vrais comptes) */
.ct-header-socials,
.ct-footer-socials {
  display: none !important;
}

/* Page panier (2029) : message "vide" affiché seulement si le JS détecte panier vide.
   Le JS de functions.php applique body.cl-cart-empty quand VRI ne contient rien. */
body.page-id-2029 .elementor-widget-html:has(.cl-cart-empty-msg) {
  display: none;
}
body.page-id-2029.cl-cart-empty .elementor-widget-html:has(.cl-cart-empty-msg) {
  display: block;
}
/* Si panier vide : masque le widget VRI summary et les spacers vides */
body.page-id-2029.cl-cart-empty .elementor-widget-wp-widget-mod_vikrentitems_summary,
body.page-id-2029.cl-cart-empty .elementor-widget-spacer {
  display: none !important;
}
/* Force la couleur du texte des boutons dans le widget HTML panier (l'héritage Elementor casse) */
body.page-id-2029 .cl-cart-empty-msg .cl-btn-gold,
body.page-id-2029 .cl-cart-empty-msg .cl-btn-gold:hover {
  color: var(--cl-navy-deep) !important;
}
body.page-id-2029 .cl-cart-empty-msg .cl-btn-ghost,
body.page-id-2029 .cl-cart-empty-msg .cl-btn-ghost:hover {
  color: var(--cl-navy-deep) !important;
  border: 1px solid var(--cl-navy-deep) !important;
}

/* Hero (réutilise le style hero home en plus compact) */
.cl-about-hero {
  position: relative;
  background: linear-gradient(180deg, var(--cl-navy-deep) 0%, var(--cl-navy) 100%);
  padding: 80px 0 60px;
  overflow: hidden;
}
.cl-about-hero .cl-hero-glow,
.cl-about-hero .cl-hero-dots { pointer-events: none; }

.cl-about-narrow {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.cl-about-title {
  font-family: var(--cl-serif);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 54px);
  line-height: 1.1;
  color: var(--cl-white);
  margin: 14px 0 18px;
  letter-spacing: -0.01em;
}
.cl-about-title em {
  font-style: italic;
  color: var(--cl-gold-lt);
}

.cl-about-lead {
  font-family: var(--cl-sans);
  font-size: 17px;
  color: rgba(255,255,255,0.72);
  font-weight: 300;
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}

/* Sections */
.cl-about-section {
  padding: 70px 0;
}
.cl-about-section h2 {
  font-family: var(--cl-serif);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 600;
  color: var(--cl-navy-deep);
  margin: 14px 0 18px;
  line-height: 1.2;
}
.cl-about-section p {
  font-family: var(--cl-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--cl-text-mid, #4a5560);
  margin: 0 0 16px;
}
.cl-about-section a {
  color: var(--cl-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cl-about-section a:hover { color: var(--cl-navy); }

.cl-about-section--alt {
  background: var(--cl-cream, #faf6ef);
}

/* Liste de "pains" dans la section histoire */
.cl-about-pain {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
}
.cl-about-pain li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-family: var(--cl-sans);
  font-size: 15.5px;
  color: var(--cl-text-mid, #4a5560);
  line-height: 1.5;
}
.cl-about-pain li::before {
  content: '✕';
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--cl-gold);
  font-weight: 700;
  font-size: 14px;
}

/* Grid de 4 cards "Ce qui nous démarque" */
.cl-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 30px;
}
.cl-about-card {
  background: var(--cl-white, #fff);
  border: 1px solid rgba(26,61,82,0.08);
  border-radius: var(--cl-r, 14px);
  padding: 28px 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cl-about-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(26,61,82,0.08);
}
.cl-about-card-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,150,26,0.1);
  border-radius: 12px;
  color: var(--cl-gold);
  margin-bottom: 14px;
}
.cl-about-card-icon svg {
  width: 28px;
  height: 28px;
}
.cl-about-card h3 {
  font-family: var(--cl-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--cl-navy-deep);
  margin: 0 0 10px;
}
.cl-about-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cl-text-mid, #4a5560);
  margin: 0;
}

/* Valeurs numérotées */
.cl-about-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 30px;
}
.cl-value {
  position: relative;
  padding-top: 50px;
}
.cl-value-num {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--cl-serif);
  font-size: 38px;
  font-weight: 600;
  color: var(--cl-gold-lt);
  line-height: 1;
  letter-spacing: 0.02em;
}
.cl-value h3 {
  font-family: var(--cl-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--cl-navy-deep);
  margin: 0 0 12px;
}
.cl-value p {
  font-family: var(--cl-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--cl-text-mid, #4a5560);
  margin: 0;
}

/* CTA section finale */
.cl-cta-section {
  background: linear-gradient(180deg, var(--cl-navy) 0%, var(--cl-navy-deep) 100%);
  padding: 80px 0;
  text-align: center;
}
.cl-cta-section .cl-tag {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78);
}
.cl-cta-section h2 {
  font-family: var(--cl-serif);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 600;
  color: var(--cl-white);
  margin: 14px 0 14px;
}
.cl-cta-section p {
  color: rgba(255,255,255,0.72);
  font-size: 17px;
  font-weight: 300;
  max-width: 520px;
  margin: 0 auto 30px;
}
.cl-cta-section .cl-cta-btns {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* =========================================================
   PAGE CONTACT — cards de coordonnées
   ========================================================= */

.cl-contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.cl-contact-card {
  display: flex;
  flex-direction: column;
  background: var(--cl-white, #fff);
  border: 1px solid rgba(26,61,82,0.08);
  border-radius: var(--cl-r, 14px);
  padding: 32px 28px;
  text-decoration: none !important;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cl-contact-card:hover:not(.cl-contact-card--info) {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(26,61,82,0.1);
  border-color: var(--cl-gold);
}

.cl-contact-card-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,150,26,0.1);
  border-radius: 14px;
  color: var(--cl-gold);
  margin-bottom: 18px;
}
.cl-contact-card-icon svg {
  width: 30px;
  height: 30px;
}

.cl-contact-card--wa .cl-contact-card-icon {
  background: rgba(37,211,102,0.12);
  color: #25D366;
}

.cl-contact-card h3 {
  font-family: var(--cl-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--cl-navy-deep);
  margin: 0 0 10px;
}

.cl-contact-card p {
  font-family: var(--cl-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cl-text-mid, #4a5560);
  margin: 0 0 16px;
  flex-grow: 1;
}

.cl-contact-card-action {
  font-family: var(--cl-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--cl-gold);
  letter-spacing: 0.01em;
  margin-top: auto;
}
.cl-contact-card:hover .cl-contact-card-action {
  color: var(--cl-navy);
}

.cl-contact-card--info {
  background: var(--cl-cream, #faf6ef);
  border-color: rgba(26,61,82,0.04);
  cursor: default;
}

/* Responsive */
@media (max-width: 720px) {
  .cl-about-section { padding: 50px 0; }
  .cl-about-hero { padding: 60px 0 40px; }
  .cl-cta-section { padding: 60px 0; }
  .cl-about-card,
  .cl-contact-card { padding: 22px 20px; }
}

/* ============================================================
   PANIER : icône header + badge compteur + état vide
   ============================================================ */
.clc-header-cart {
  position: relative;
}
.clc-header-cart.cl-cart-empty {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
.clc-header-cart.cl-cart-empty:hover {
  opacity: 0.55 !important;
}
.cl-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--cl-gold);
  color: var(--cl-navy-deep);
  border-radius: 99px;
  font-family: var(--cl-sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(212,150,26,0.5);
  pointer-events: none;
  letter-spacing: 0;
}

/* ============================================================
   STICKY CART BAR — barre fixe en bas, visible PC + mobile
   Affiche : icône + dates + count + total + CTA "Voir le panier"
   Sur mobile : icône + dates cachées pour gain de place (count + total + CTA)
   ============================================================ */
.cl-cart-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 49;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(180deg, var(--cl-navy) 0%, var(--cl-navy-deep) 100%);
  color: var(--cl-cream);
  font-family: var(--cl-sans);
  font-size: 14px;
  text-decoration: none !important;
  border-top: 1px solid rgba(212,150,26,0.3);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
}
.cl-cart-bar-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
  min-width: 0;
}
.cl-cart-bar-icon {
  width: 16px;
  height: 16px;
  color: var(--cl-gold);
  flex-shrink: 0;
}
.cl-cart-bar-dates {
  color: rgba(255,255,255,0.85);
}
.cl-cart-bar-dates strong {
  color: #fff;
  font-weight: 700;
}
/* Format dates : long ("Du 16 Juil au 20 Juil 2026") sur PC, court ("Du 16/07 au 20/07") sur mobile */
.cl-cart-bar-dates-short { display: none; }
.cl-cart-bar-count strong {
  color: #fff;
  font-weight: 700;
}
.cl-cart-bar-sep {
  color: rgba(255,255,255,0.35);
  user-select: none;
}
.cl-cart-bar-total {
  color: var(--cl-gold) !important;
  font-family: var(--cl-serif);
  font-size: 16px;
  font-weight: 700 !important;
}
.cl-cart-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cl-gold);
  color: var(--cl-navy-deep);
  padding: 7px 16px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(212,150,26,0.4);
  flex-shrink: 0;
  transition: all .2s ease;
}
.cl-cart-bar:hover .cl-cart-bar-cta {
  background: var(--cl-gold-lt, #E9B44B);
  transform: translateY(-1px);
}
/* Padding-bottom sur le body pour ne pas masquer le contenu derrière la barre */
body:has(.cl-cart-bar) {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
}
/* Chat bubble se décale au-dessus de la barre (convention e-commerce). */
body:has(.cl-cart-bar) .cl-chat-bubble {
  bottom: calc(72px + env(safe-area-inset-bottom, 0));
}
@media (max-width: 768px) {
  /* Mobile : compact, on bascule sur les dates au format court (16/07).
     L'icône calendrier reste visible mais plus petite. Le séparateur après dates reste. */
  .cl-cart-bar {
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
    gap: 10px;
    font-size: 13px;
  }
  .cl-cart-bar-info { gap: 7px; }
  .cl-cart-bar-icon { width: 14px; height: 14px; }
  .cl-cart-bar-dates-long { display: none; }
  .cl-cart-bar-dates-short { display: inline; }
  .cl-cart-bar-total { font-size: 15px; }
  .cl-cart-bar-cta { padding: 6px 12px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  /* Très petit écran : on cache l'icône et le compte d'articles pour ne garder que dates + total + CTA */
  .cl-cart-bar-icon { display: none; }
  .cl-cart-bar-count, .cl-cart-bar-sep:not(.cl-cart-bar-sep-dates) { display: none; }
}

/* ============================================================
   MINI-LIEN sur fiche en mode session-vals (.vri-search-sessvals)
   Explique que les dates sont fixées par le panier et propose d'aller au récap.
   ============================================================ */
.cl-sessvals-edit {
  display: block;
  margin-top: 10px;
  padding: 6px 0;
  color: rgba(255,255,255,0.55) !important;
  font-family: var(--cl-sans);
  font-size: 12.5px;
  font-style: italic;
  text-decoration: none !important;
  transition: color .2s ease;
}
.cl-sessvals-edit span {
  color: var(--cl-gold) !important;
  font-style: normal;
  font-weight: 600;
  margin-left: 4px;
}
.cl-sessvals-edit:hover span {
  text-decoration: underline;
}

/* Datepicker jQuery UI : z-index élevé pour passer au-dessus de la card sticky */
#ui-datepicker-div,
.ui-datepicker {
  z-index: 99999 !important;
}

/* ============================================================
   RÉCAP PANIER VRI (page oconfirm) — compact, dense, moins de scroll
   VRI génère un .vri-oconfirm-summary-item-head DANS chaque .vri-oconfirm-summary-item-wrapper,
   ce qui duplique "JOURS / PRIX NET / TAXE / PRIX TOTAL" sur chaque item. On garde un seul head en haut.
   ============================================================ */

/* PC : un seul header table-header en haut, masqué pour les items suivants */
@media (min-width: 769px) {
  .vri-oconfirm-summary-item-wrapper:not(:first-of-type) > .vri-oconfirm-summary-item-head {
    display: none !important;
  }
  .vri-oconfirm-summary-item-wrapper:first-of-type > .vri-oconfirm-summary-item-head {
    background: transparent !important;
    border-bottom: 1px solid rgba(14,37,53,0.15) !important;
    padding: 8px 18px !important;
    margin-bottom: 6px !important;
  }
  .vri-oconfirm-summary-item-head-cell {
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    color: rgba(14,37,53,0.55) !important;
    font-weight: 700 !important;
  }
}

/* === REFONTE ITEMS TABLE — style Airbnb-like épuré === */

/* Container global */
body .vri-oconfirm-summary-container {
  background: #fff !important;
  border: 1px solid #e8e2d4 !important;
  border-radius: 12px !important;
  padding: 8px 22px !important;
  margin: 14px 0 !important;
}

/* Wrapper item : flat, juste séparateur fin */
body .vri-oconfirm-summary-container .vri-oconfirm-summary-item-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(14,37,53,0.07) !important;
  border-radius: 0 !important;
}
body .vri-oconfirm-summary-container .vri-oconfirm-summary-item-wrapper:last-of-type {
  border-bottom: none !important;
}

/* Row : flex propre, name + trash + price */
body .vri-oconfirm-summary-container .vri-oconfirm-summary-item-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  gap: 12px;
}

/* Cell descr : prend l'espace, name only */
body .vri-oconfirm-summary-container .vri-oconfirm-summary-item-cell-descr {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
.vri-oconfirm-itemname {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: var(--cl-navy-deep) !important;
  font-family: var(--cl-sans) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.vri-oconfirm-itemname-units {
  font-weight: 600;
  color: rgba(14,37,53,0.7);
}
/* "Prix standard (sans options)" : caché (info inutile) */
.vri-oconfirm-priceinfo {
  display: none !important;
}

/* Bouton trash : tout à droite, APRÈS le prix (convention e-commerce) */
body .vri-oconfirm-summary-container .vri-oconfirm-item-action {
  flex-shrink: 0;
  order: 3;
}
body .vri-oconfirm-summary-container .vri-oconfirm-item-action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: rgba(14,37,53,0.3) !important;
  transition: all .2s ease;
}
body .vri-oconfirm-summary-container .vri-oconfirm-item-action a:hover {
  color: #c0392b !important;
  background: rgba(192,57,43,0.08);
}

/* Cell prix total : à droite (AVANT le trash qu'on déplace via JS), format "25 €"
   (chiffre PUIS symbole). VRI imbrique : .vricurrency > .vri_currency, .vriprice > .vri_price.
   On flex sur .vricurrency / .vriprice (les wrappers directs) avec order swap. */
body .vri-oconfirm-summary-container .vri-oconfirm-summary-item-cell-tot {
  flex-shrink: 0 !important;
  order: 2;
  text-align: right !important;
  padding: 0 !important;
  min-width: 70px;
  display: inline-flex !important;
  justify-content: flex-end;
  align-items: baseline;
  gap: 3px;
  font-size: 0; /* annule le space entre les wrappers HTML */
}
body .vri-oconfirm-summary-container .vri-oconfirm-summary-item-cell-tot .vriprice { order: 1; }
body .vri-oconfirm-summary-container .vri-oconfirm-summary-item-cell-tot .vricurrency { order: 2; }
body .vri-oconfirm-summary-container .vri-oconfirm-summary-item-cell-tot .vri_price,
body .vri-oconfirm-summary-container .vri-oconfirm-summary-item-cell-tot .vri_currency {
  font-family: var(--cl-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--cl-navy-deep) !important;
}
/* Idem pour le total row : ordre swap + même technique */
body .vri-oconfirm-summary-total-wrapper .vri-oconfirm-summary-item-cell-tot {
  display: inline-flex !important;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px;
  font-size: 0;
}
body .vri-oconfirm-summary-total-wrapper .vri-oconfirm-summary-item-cell-tot .vriprice { order: 1; }
body .vri-oconfirm-summary-total-wrapper .vri-oconfirm-summary-item-cell-tot .vricurrency { order: 2; }

/* Cacher TOUS les head-cell labels inline (PRIX TOTAL, PRIX NET, etc.) — ils apparaissent
   imbriqués dans chaque cellule pour le rendu responsive natif VRI. On les vire partout. */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-summary-item-head-cell,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-summary-item-head-cell-responsive {
  display: none !important;
}

/* === TOTAL row : mise en valeur premium === */
body .vri-oconfirm-summary-total-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
body .vri-oconfirm-summary-total-wrapper .vri-oconfirm-summary-total-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 22px 0 12px !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: 2px solid var(--cl-navy-deep) !important;
  border-radius: 0 !important;
  gap: 12px;
}
body .vri-oconfirm-summary-total-wrapper .vri-oconfirm-summary-total-row .vri-oconfirm-summary-item-cell-descr {
  flex: 1 !important;
  font-family: var(--cl-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--cl-navy-deep) !important;
}
body .vri-oconfirm-summary-total-wrapper .vri-oconfirm-summary-total-row .vri-oconfirm-summary-item-cell-tot {
  flex-shrink: 0 !important;
  min-width: 100px;
  text-align: right !important;
}
body .vri-oconfirm-summary-total-wrapper .vri-oconfirm-summary-total-row .vri-oconfirm-summary-item-cell-tot .vri_price,
body .vri-oconfirm-summary-total-wrapper .vri-oconfirm-summary-total-row .vri-oconfirm-summary-item-cell-tot .vri_currency {
  font-family: var(--cl-serif) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--cl-gold, #c8a04a) !important;
  line-height: 1 !important;
}
body .vri-oconfirm-summary-total-wrapper .vri-oconfirm-total-block {
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin: 0 !important;
}

/* Mobile : compact + masque colonne TAXE (toujours 0€, n'apporte rien) */
@media (max-width: 768px) {
  .vri-oconfirm-summary-item-row {
    padding: 12px 14px !important;
    gap: 4px !important;
  }
  .vri-oconfirm-summary-item-cell-tax {
    display: none !important;
  }
  .vri-oconfirm-itemname {
    font-size: 15px !important;
  }
  .vri-oconfirm-summary-item-row .vri_price,
  .vri-oconfirm-summary-item-row .vri_currency {
    font-size: 15px !important;
  }
  .vri-oconfirm-summary-item-cell-tot .vri_price,
  .vri-oconfirm-summary-item-cell-tot .vri_currency {
    font-size: 17px !important;
  }
  .vri-oconfirm-summary-item-head-cell-responsive {
    font-size: 10px !important;
    margin-bottom: 1px !important;
    letter-spacing: 0.03em !important;
    color: rgba(14,37,53,0.55) !important;
  }
}

/* ============================================================
   FOOTER — fine-tuning visuel (paddings/spacing gérés par Blocksy Customizer)
   ============================================================ */
.ct-footer .widget-title {
  font-family: var(--cl-serif);
  letter-spacing: 0.01em;
}
/* Listes propres dans les widgets text */
.ct-footer .textwidget ul {
  padding: 0;
  list-style: none;
}
.ct-footer .textwidget ul li {
  padding: 0;
  list-style: none;
  line-height: 1.5;
}
/* Cache la <li> vide dans "Liens utiles" + le <p>&nbsp;</p> qui crée du blanc inutile */
.ct-footer .textwidget li:empty,
.ct-footer .textwidget li[style*="list-style-type: none"]:empty {
  display: none !important;
}
.ct-footer .textwidget p:empty,
.ct-footer .textwidget p:has(> br:only-child) {
  display: none !important;
}

/* ============================================================
   PAGE RÉCAP COMMANDE (oconfirm) — refonte UX checkout
   Cible la page via :has(.vri-oconfirm-summary-container) — sélecteur natif
   présent uniquement sur cette page, donc les règles ne fuitent pas ailleurs.
   Cf plan : maintenant-je-veux-qu-on-luminous-sparkle.md (Phase 1 declutter)
   ============================================================ */

/* --- Phase 1 : sections cachées (distractions/doublons) --- */
body:has(.vri-oconfirm-summary-container) .vrioconfirmbuttonsdiv .vriemptycartdivcontainer,
body:has(.vri-oconfirm-summary-container) .vrioconfirmbuttonsdiv .vrichangedatesdivcontainer,
body:has(.vri-oconfirm-summary-container) .vrioconfirmbuttonsdiv .vricompleteorderdiv,
body:has(.vri-oconfirm-summary-container) .vri-coupon-outer,
body:has(.vri-oconfirm-summary-container) .vri-enterpin-block,
body:has(.vri-oconfirm-summary-container) .vricontinuerentdiv,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-paym-block > h4.vri-medium-header {
  display: none !important;
}

/* Si .vrioconfirmbuttonsdiv n'a plus aucun enfant visible, on cache le wrapper aussi
   pour éviter un padding/margin orphelin */
body:has(.vri-oconfirm-summary-container) .vrioconfirmbuttonsdiv {
  display: none !important;
}

/* Si .vri-oconfirm-middlep ne contient que coupon + pin (les deux cachés), on cache aussi */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-middlep {
  display: none !important;
}

/* --- Phase 1 : colonne TAXE cachée sur PC aussi (déjà cachée mobile) --- */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-summary-item-cell-tax,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-summary-item-head-cell.vri-oconfirm-summary-item-cell-tax {
  display: none !important;
}

/* --- Phase v2 : virer aussi colonnes "JOURS" (toujours 4) et "PRIX NET" (identique à TOTAL) --- */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-summary-item-cell-days,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-summary-item-head-cell.vri-oconfirm-summary-item-cell-days,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-summary-item-cell-net,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-summary-item-head-cell.vri-oconfirm-summary-item-cell-net {
  display: none !important;
}

/* --- Phase v3 : header colonnes orphelin → caché complètement (table à 1 col PRIX) --- */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-summary-item-head {
  display: none !important;
}

/* --- Phase 1 : restyling bouton "Confirmer la commande" final --- */
body:has(.vri-oconfirm-summary-container) .vri-save-order-block {
  text-align: center;
  margin-top: 20px;
}
body:has(.vri-oconfirm-summary-container) .vri-save-order-block input[name="saveorder"],
body:has(.vri-oconfirm-summary-container) .vri-save-order-block .btn.booknow {
  background: var(--cl-gold) !important;
  color: var(--cl-navy-deep) !important;
  border: none !important;
  padding: 16px 36px !important;
  border-radius: 99px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: var(--cl-sans) !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(212,150,26,0.35) !important;
  transition: all .2s ease !important;
  min-width: 280px !important;
}
body:has(.vri-oconfirm-summary-container) .vri-save-order-block input[name="saveorder"]:hover,
body:has(.vri-oconfirm-summary-container) .vri-save-order-block .btn.booknow:hover {
  background: var(--cl-gold-lt, #E9B44B) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(212,150,26,0.45) !important;
}

/* Mobile : full-width pour le bouton final */
@media (max-width: 768px) {
  body:has(.vri-oconfirm-summary-container) .vri-save-order-block input[name="saveorder"],
  body:has(.vri-oconfirm-summary-container) .vri-save-order-block .btn.booknow {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* --- Phase 1 : astérisques obligatoires plus visibles --- */
body:has(.vri-oconfirm-summary-container) .vridivcustomfield .vri-customfield-label .vri-customfield-mandatory,
body:has(.vri-oconfirm-summary-container) .vridivcustomfield .vri-oconfirm-cfield-label .vri-customfield-mandatory,
body:has(.vri-oconfirm-summary-container) span.required,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-label > span:first-child {
  color: #c0392b !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-right: 2px !important;
}

/* --- Phase 2 : Cross-sell "Articles intéresseraient" — cards horizontales discrètes --- */
body:has(.vri-oconfirm-summary-container) .vri-summary-interested {
  margin: 24px 0 !important;
  padding: 18px !important;
  background: var(--cl-cream, #f8f4ec) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(14,37,53,0.08) !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vriyoumightintp {
  font-family: var(--cl-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--cl-navy-deep) !important;
  margin: 0 0 12px 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Container des items : grid 2 cols max, plus de scroll horizontal */
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vrirelateditemsdivscroll {
  overflow: visible !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vrirelateditems {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vrirelateditems > li:nth-child(n+3) {
  display: none !important; /* on garde uniquement les 2 premières cards */
}
/* Card individuelle horizontale */
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vrirelitemdiv {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  background: #fff !important;
  border-radius: 8px !important;
  border: 1px solid rgba(14,37,53,0.06) !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  width: auto !important;
  list-style: none !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vri-oconfirm-relitem-top {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vrirelitemimgdiv {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vrirelitemimg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vrirelitemname {
  font-family: var(--cl-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--cl-navy-deep) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
/* Bottom : quantité + bouton réserver, compactés */
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vri-oconfirm-relitem-bottom {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
/* Cache la table de discounts par quantité (info trop technique pour cette zone) */
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vridiscsquantsdivsearchrel {
  display: none !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vriselectquantitydivrelmain {
  margin: 0 !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vriselectquantitydivrel {
  display: flex !important;
  align-items: center !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested input[name="itemquant"] {
  width: 44px !important;
  height: 32px !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(14,37,53,0.15) !important;
  font-size: 13px !important;
  text-align: center !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vrirelitemsubmit {
  background: var(--cl-navy-deep) !important;
  color: #fff !important;
  border: none !important;
  padding: 7px 14px !important;
  border-radius: 99px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all .2s ease !important;
}
body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vrirelitemsubmit:hover {
  background: var(--cl-gold) !important;
  color: var(--cl-navy-deep) !important;
}

/* Mobile : 1 colonne, bouton plus large */
@media (max-width: 768px) {
  body:has(.vri-oconfirm-summary-container) .vri-summary-interested .vrirelateditems {
    grid-template-columns: 1fr !important;
  }
}

/* --- Encart Pacte de confiance (injecté juste avant trust signals) --- */
.cl-checkout-pacte {
  margin: 18px auto 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(200,160,74,0.10) 0%, rgba(200,160,74,0.04) 100%);
  border: 1px solid rgba(200,160,74,0.30);
  border-radius: 12px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-family: var(--cl-sans);
}
.cl-checkout-pacte-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.cl-checkout-pacte-title {
  font-family: var(--cl-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--cl-navy-deep, #0E2535);
  margin: 0 0 8px 0;
}
.cl-checkout-pacte-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: #2a3540;
  line-height: 1.5;
}
.cl-checkout-pacte-list li {
  padding-left: 16px;
  position: relative;
}
.cl-checkout-pacte-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cl-gold, #c8a04a);
  font-weight: 700;
}
.cl-checkout-pacte-list strong { color: var(--cl-navy-deep, #0E2535); }
.cl-checkout-pacte-list a {
  color: var(--cl-gold, #c8a04a);
  font-weight: 600;
  text-decoration: underline;
}
.cl-checkout-pacte-link {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cl-gold, #c8a04a);
  text-decoration: none;
  margin-top: 4px;
}
.cl-checkout-pacte-link:hover { text-decoration: underline; }

/* --- Phase 3 : Trust signals + microcopy (injectés par JS via functions.php) --- */
.cl-checkout-trust {
  margin: 18px auto 12px;
  padding: 16px 20px;
  background: var(--cl-cream, #f8f4ec);
  border-radius: 10px;
  border: 1px solid rgba(14,37,53,0.08);
  max-width: 520px;
  text-align: center;
}
.cl-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--cl-navy-deep);
  margin-bottom: 10px;
}
.cl-trust-row svg {
  width: 16px;
  height: 16px;
  color: var(--cl-gold);
  flex-shrink: 0;
}
.cl-trust-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cl-trust-cards svg {
  height: 22px;
  width: auto;
  border-radius: 3px;
}
/* Espacement supplémentaire entre le bloc cartes et la liste de garanties */
.cl-trust-list {
  margin-top: 4px !important;
}
.cl-trust-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left;
  display: inline-block;
}
.cl-trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  font-size: 13px;
  color: rgba(14,37,53,0.75);
  line-height: 1.45;
  list-style: none !important;
}
.cl-trust-list li::before {
  content: "✓";
  color: #2ecc71;
  font-weight: 700;
  flex-shrink: 0;
}
.cl-trust-list li:last-child {
  margin-bottom: 0 !important;
}
.cl-checkout-microcopy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(14,37,53,0.6);
  margin: 4px 0 18px 0;
  font-style: italic;
}
.cl-checkout-microcopy svg {
  flex-shrink: 0;
  color: var(--cl-gold, #c8a04a);
}
.cl-optional-tag {
  font-size: 12px;
  color: rgba(14,37,53,0.5);
  font-weight: 400;
  font-style: italic;
  margin-left: 4px;
}

/* --- Phase 4 : Sticky checkout bar mobile + sticky sidebar PC --- */

/* Sticky bottom bar mobile/tablette (≤ 1023px) */
.cl-checkout-bar { display: none; }
@media (max-width: 1023px) {
  .cl-checkout-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 49;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
    background: linear-gradient(180deg, var(--cl-navy) 0%, var(--cl-navy-deep) 100%);
    color: #fff;
    font-family: var(--cl-sans);
    font-size: 13px;
    border-top: 1px solid rgba(212,150,26,0.3);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
    text-decoration: none !important;
  }
  .cl-checkout-bar-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
  }
  .cl-checkout-bar-info strong {
    color: var(--cl-gold);
    font-family: var(--cl-serif);
    font-size: 17px;
    font-weight: 700;
  }
  .cl-checkout-bar-info small {
    color: rgba(255,255,255,0.7);
    font-size: 11.5px;
    line-height: 1.3;
  }
  .cl-checkout-bar-cta {
    background: var(--cl-gold);
    color: var(--cl-navy-deep) !important;
    border: none;
    padding: 10px 16px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 13px;
    font-family: var(--cl-sans);
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(212,150,26,0.4);
  }
  .cl-checkout-bar-cta:hover {
    background: var(--cl-gold-lt, #E9B44B);
  }
  /* Padding-bottom du body pour ne pas masquer le contenu */
  body:has(.cl-checkout-bar) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
  }
  /* Chat bubble décalé au-dessus de la barre (pareil que .cl-cart-bar).
     Théoriquement masqué par le gating PHP sur la page checkout — sécurité. */
  body:has(.cl-checkout-bar) .cl-chat-bubble {
    bottom: calc(80px + env(safe-area-inset-bottom, 0));
  }
}

/* Sticky sidebar PC (≥ 1280px uniquement, écrans larges où elle ne déborde pas)
   Position fixed simple — n'altère pas le layout VRI.
   top: 200px = descend la sidebar à hauteur du tableau récap (pas du header). */
.cl-checkout-sticky { display: none; }
@media (min-width: 1280px) {
  .cl-checkout-sticky {
    display: block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 24px;
    width: 280px;
    /* Limite la hauteur pour éviter qu'elle dépasse le viewport sur petits écrans verticaux */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(14,37,53,0.10);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 4px 24px rgba(14,37,53,0.10);
    z-index: 30;
    font-family: var(--cl-sans);
  }
  .cl-checkout-sticky-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(14,37,53,0.08);
    margin-bottom: 10px;
    font-size: 13px;
    color: rgba(14,37,53,0.85);
  }
  .cl-checkout-sticky-header svg {
    width: 18px;
    height: 18px;
    color: var(--cl-gold);
    flex-shrink: 0;
  }
  .cl-checkout-sticky-header strong {
    color: var(--cl-navy-deep);
    font-weight: 700;
  }
  .cl-checkout-sticky-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    color: rgba(14,37,53,0.75);
  }
  /* Ligne "N articles" : centrée, simple, sans dialogue label/valeur */
  .cl-checkout-sticky-row.cl-checkout-sticky-articles {
    justify-content: flex-start;
    color: rgba(14,37,53,0.7);
    font-size: 12.5px;
  }
  .cl-checkout-sticky-row strong {
    color: var(--cl-navy-deep);
    font-weight: 700;
  }
  .cl-checkout-sticky-total {
    font-family: var(--cl-serif);
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid rgba(14,37,53,0.10);
    font-size: 15px;
  }
  .cl-checkout-sticky-total strong {
    color: var(--cl-gold);
    font-size: 22px;
    font-weight: 700;
  }
  .cl-checkout-sticky-cta {
    width: 100%;
    margin-top: 14px;
    padding: 12px 18px;
    background: var(--cl-gold);
    color: var(--cl-navy-deep);
    border: none;
    border-radius: 99px;
    font-weight: 700;
    font-size: 14px;
    font-family: var(--cl-sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .2s ease;
    box-shadow: 0 3px 12px rgba(212,150,26,0.35);
  }
  .cl-checkout-sticky-cta:hover {
    background: var(--cl-gold-lt, #E9B44B);
    transform: translateY(-1px);
  }
}

/* --- Phase 5 + 6 : Hiérarchie visuelle (cards) + polissage form facturation --- */

/* Wrapping en card pour les sections form + paiement */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont {
  background: var(--cl-cream, #f8f4ec);
  border: 1px solid rgba(14,37,53,0.08);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 24px 0;
}

body:has(.vri-oconfirm-summary-container) .vri-oconfirm-paym-block {
  background: var(--cl-cream, #f8f4ec);
  border: 1px solid rgba(14,37,53,0.08);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 24px 0 0 0;
}

/* Bloc save-order final : centré, sans wrapping card (le bouton + trust signals ressortent) */
body:has(.vri-oconfirm-summary-container) .vri-save-order-block {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 24px 0 0 0;
}
/* Avec Précédent déplacé dedans : les 2 boutons groupés à droite (cohérent avec step 2)
   Gating step="3" obligatoire sinon ma règle override le display:none des steps 1/2 */
body[data-cl-step="3"]:has(.vri-oconfirm-summary-container) .vri-save-order-block.cl-save-order-with-prev {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  text-align: left !important;
}
body[data-cl-step="3"]:has(.vri-oconfirm-summary-container) .vri-save-order-block.cl-save-order-with-prev .cl-step-prev {
  flex-shrink: 0;
  order: 1;
}
body[data-cl-step="3"]:has(.vri-oconfirm-summary-container) .vri-save-order-block.cl-save-order-with-prev input[name="saveorder"],
body[data-cl-step="3"]:has(.vri-oconfirm-summary-container) .vri-save-order-block.cl-save-order-with-prev .btn.booknow {
  order: 2;
  margin: 0 !important;
}
/* Cacher le wrapper step-actions-3 vidé (Précédent déplacé) sur step 3 uniquement */
body[data-cl-step="3"] .cl-step-actions-3:not(:has(.cl-step-prev)) {
  display: none !important;
}

/* ============================================================
   PAGE COMMANDE CONFIRMÉE (?view=order)
   ============================================================ */

/* État PENDING (status='standby') : banner rouge "erreur/attention" pour clairement
   différencier des boutons gold du site (orange était trop proche de la palette) */
body.cl-ord-state-pending .vri-ord-details-head-pending,
body:has(.vri-ord-details-head-pending) .vri-ord-details-head-pending {
  background: linear-gradient(180deg, #b03434 0%, #8a2424 100%) !important;
  color: #fff;
}
body:has(.vri-ord-details-head-pending) .vri-ord-details-head-pending h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--cl-serif);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  padding: 22px 16px;
}
/* Card instructions rouge clair : MÊME WIDTH (640px) que le summary pour cohérence visuelle */
.cl-pending-instructions {
  max-width: 640px;
  margin: 18px auto;
  padding: 18px 24px;
  background: #fef0f0;
  border: 1px solid #f0c0c0;
  border-radius: 14px;
  font-family: var(--cl-sans);
  font-size: 14px;
  color: var(--cl-navy-deep);
  line-height: 1.55;
}
.cl-pending-instructions p { margin: 0 0 8px 0; }
.cl-pending-instructions p:last-child { margin-bottom: 0; }
.cl-pending-instructions strong { color: #b03434; font-weight: 700; }

/* Titre dans la card rouge (avant le texte explicatif) */
.cl-pending-instructions-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #b03434;
  margin: 0 0 10px 0;
}
.cl-pending-instructions-title svg {
  color: #b03434;
  flex-shrink: 0;
}

/* === Card unifiée pour pending state — style Airbnb/Stripe Checkout === */
.cl-pending-summary {
  max-width: 640px;
  margin: 0 auto 20px;
  background: #fff;
  border: 1px solid #e8e2d4;
  border-radius: 14px;
  font-family: var(--cl-sans);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(14,37,53,0.04);
}
.cl-pending-summary-section {
  padding: 18px 24px;
  border-bottom: 1px solid rgba(14,37,53,0.07);
}
.cl-pending-summary-section:last-child {
  border-bottom: none;
}
.cl-pending-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(14,37,53,0.5);
  font-weight: 600;
  margin: 0 0 10px 0;
}
.cl-pending-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.4;
}
.cl-pending-row-label {
  color: rgba(14,37,53,0.6);
  font-size: 13px;
  flex-shrink: 0;
}
.cl-pending-row-value {
  color: var(--cl-navy-deep);
  font-weight: 600;
  text-align: right;
}

/* Variant "stack" : label à gauche / date + lieu empilés à droite */
.cl-pending-row-stack {
  align-items: flex-start;
  padding: 10px 0;
}
.cl-pending-row-stack .cl-pending-row-label {
  padding-top: 2px;
}
.cl-pending-row-stack .cl-pending-row-value {
  display: block;
  text-align: right;
}
.cl-pending-row-stack .cl-pending-row-sub {
  display: block;
  text-align: right;
  font-size: 12px;
  color: rgba(14,37,53,0.55);
  margin-top: 2px;
  flex-basis: 100%;
}
/* Réorganise pour mettre value et sub à droite, label à gauche */
.cl-pending-row-stack {
  flex-wrap: wrap;
}
.cl-pending-row-stack .cl-pending-row-label {
  flex: 0 0 auto;
}
.cl-pending-row-stack .cl-pending-row-value {
  flex: 1;
  margin-left: auto;
}
.cl-pending-row-stack .cl-pending-row-sub {
  flex-basis: 100%;
  text-align: right;
}
.cl-pending-item-name {
  text-align: left;
  font-family: var(--cl-serif);
  font-size: 15px;
  font-weight: 600;
}
.cl-pending-row-price {
  font-family: var(--cl-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--cl-navy-deep);
  flex-shrink: 0;
}
.cl-pending-summary-total-section {
  background: var(--cl-cream, #faf6ef);
}
.cl-pending-total-row {
  padding: 4px 0 !important;
}
.cl-pending-total-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cl-navy-deep);
}
.cl-pending-total-value {
  font-family: var(--cl-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--cl-gold, #c8a04a);
  line-height: 1;
}
.cl-pending-tva-mention {
  margin-top: 10px;
  font-size: 11.5px;
  color: rgba(14,37,53,0.55);
  font-style: italic;
}

/* Cacher l'ancien récap simple si encore présent */
.cl-pending-resa { display: none !important; }

/* Forcer la disparition du rendu natif VRI sur pending state — classe body sans :has() */
body.cl-ord-state-pending .vri-ord-mid-container,
body.cl-ord-state-pending .vri-ord-item-block,
body.cl-ord-state-pending .vrivordcosts,
body.cl-ord-state-pending .vri-ord-coststot-container,
body.cl-ord-state-pending .vrivordcoststot,
body.cl-ord-state-pending .vri-rental-summary-title,
body.cl-ord-state-pending .vri-ord-details-intro,
body.cl-ord-state-pending .vriordcancbox,
body.cl-ord-state-pending .vrivordpaybutton,
body.cl-ord-state-pending .stripe__payment__form__wrapper {
  display: none !important;
}

/* Notre CTA gold custom pour finaliser le paiement (remplace le btn-primary natif Stripe) */
.cl-pending-pay-cta {
  display: block;
  max-width: 640px;
  margin: 18px auto 28px;
  padding: 16px 32px;
  background: var(--cl-gold, #c8a04a);
  color: var(--cl-navy-deep) !important;
  border: none;
  border-radius: 999px;
  font-family: var(--cl-serif);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(200,160,74,0.30);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.cl-pending-pay-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(200,160,74,0.40);
  background: var(--cl-gold-lt, #e9b44b);
  color: var(--cl-navy-deep) !important;
}

/* ============================================================
   État CONFIRMED (status='confirmed') — bandeau VERT + layout
   miroir du pending : card unifiée récap + CTAs.
   ============================================================ */
body.cl-ord-state-confirmed .vri-ord-details-head,
body.cl-ord-state-confirmed .vri-ord-details-head-confirmed {
  background: linear-gradient(180deg, #1d8a3c 0%, #146c2c 100%) !important;
  color: #fff !important;
  padding: 26px 22px !important;
  text-align: center;
}
body.cl-ord-state-confirmed .vri-ord-details-head h4,
body.cl-ord-state-confirmed .vri-ord-details-head-confirmed h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--cl-serif);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  padding: 0;
}
body.cl-ord-state-confirmed .cl-thanks-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
  font-family: var(--cl-sans);
  font-size: 13px;
  color: rgba(255,255,255,0.92);
}
body.cl-ord-state-confirmed .cl-thanks-email strong { color: #fff; }

/* Card instructions verte clair — pendant du rouge clair pour pending */
.cl-confirmed-instructions {
  max-width: 640px;
  margin: 18px auto;
  padding: 18px 24px;
  background: #ecf8ee;
  border: 1px solid #b8dcc1;
  border-radius: 14px;
  font-family: var(--cl-sans);
  font-size: 14px;
  color: var(--cl-navy-deep);
  line-height: 1.55;
}
.cl-confirmed-instructions p { margin: 0 0 8px 0; }
.cl-confirmed-instructions p:last-child { margin-bottom: 0; }
.cl-confirmed-instructions strong { color: #146c2c; font-weight: 700; }
.cl-confirmed-instructions-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #146c2c;
  margin: 0 0 10px 0;
}
.cl-confirmed-instructions-title svg { color: #146c2c; flex-shrink: 0; }

/* Hide native VRI rendering — on rebuild tout via .cl-pending-summary */
body.cl-ord-state-confirmed .vri-ord-mid-container,
body.cl-ord-state-confirmed .vri-ord-item-block,
body.cl-ord-state-confirmed .vrivordcosts,
body.cl-ord-state-confirmed .vri-ord-coststot-container,
body.cl-ord-state-confirmed .vrivordcoststot,
body.cl-ord-state-confirmed .vri-rental-summary-title,
body.cl-ord-state-confirmed .vri-ord-details-intro,
body.cl-ord-state-confirmed .vriordcancbox {
  display: none !important;
}

/* Total payé en vert (au lieu du gold pour pending) */
body.cl-ord-state-confirmed .cl-pending-total-value {
  color: #1d8a3c;
}

/* État CANCELLED */
body:has(.vri-ord-details-head-cancelled) .vri-ord-details-head-cancelled {
  background: linear-gradient(180deg, #a83333 0%, #862626 100%) !important;
  color: #fff;
}
body:has(.vri-ord-details-head-cancelled) .vri-ord-details-head-cancelled h4 {
  font-family: var(--cl-serif);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  padding: 22px 16px;
  text-align: center;
}
.cl-cancelled-note {
  max-width: 700px;
  margin: 18px auto;
  padding: 16px 22px;
  background: #fef0f0;
  border: 1px solid #f0c0c0;
  border-radius: 12px;
  font-family: var(--cl-sans);
  font-size: 14px;
  color: var(--cl-navy-deep);
  text-align: center;
}
.cl-cancelled-note a {
  color: var(--cl-gold, #c8a04a) !important;
  font-weight: 600;
  text-decoration: underline !important;
}


/* Commande + Référence + PDF intégrés DANS le banner success (compact, cohérent) */
.cl-ord-ref-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.cl-ord-ref-inline-text {
  font-family: var(--cl-sans);
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.3px;
}
.cl-ord-ref-inline-text code {
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 12.5px;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.08);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.2px;
}
.cl-ord-ref-inline-sep {
  color: rgba(255,255,255,0.35);
  font-size: 14px;
  user-select: none;
}
.cl-ord-ref-inline-pdf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .2s ease;
}
.cl-ord-ref-inline-pdf:hover {
  background: rgba(255,255,255,0.22);
  color: #fff !important;
}

/* (Anciennes règles "receipt natif VRI" pour confirmed supprimées —
   le rendu est maintenant entièrement reconstruit dans .cl-pending-summary
   via JS, et le natif VRI est masqué par body.cl-ord-state-confirmed .vrivordcosts { display:none }. */

/* Bouton "Finaliser le paiement" pour le state pending (Stripe Pay Now traduit) */
body:has(.vri-ord-details-head-pending) .cl-payment-cta,
.cl-payment-cta {
  display: inline-block !important;
  max-width: 700px;
  width: calc(100% - 40px);
  margin: 18px auto !important;
  padding: 16px 32px !important;
  background: var(--cl-gold, #c8a04a) !important;
  color: var(--cl-navy-deep) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--cl-serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(200,160,74,0.30) !important;
  transition: transform .15s ease, box-shadow .2s ease !important;
}
.cl-payment-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(200,160,74,0.40) !important;
  background: var(--cl-gold-lt, #e9b44b) !important;
}
/* Centrer le wrap qui contient le bouton (généralement un .vri-ord-payment ou parent) */
body:has(.vri-ord-details-head-pending) .vri-payment-block,
body:has(.vri-ord-details-head-pending) .vri-ord-payment {
  text-align: center;
  margin: 0 auto;
  max-width: 700px;
}

/* Cacher la notice native "The payment has been canceled." (Joomla queueMessage) */
body:has(.vri-ord-details-head-pending) .system-message-container,
body:has(.vri-ord-details-head-pending) #system-message-container {
  display: none !important;
}

/* (Anciennes règles .cl-thanks-email basées sur :has() supprimées —
   remplacées par body.cl-ord-state-confirmed plus haut, pill inline-flex centrée.) */

/* Référence courte (CC-AAAA-XXX) en gold */
body:has(.vri-ord-details-head-confirmed) .vri-ord-det-val.cl-order-ref {
  font-family: var(--cl-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--cl-gold, #c8a04a);
  letter-spacing: 0.5px;
}

/* Bloc "Prochaines étapes" */
.cl-next-steps {
  max-width: 1200px;
  margin: 24px auto;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid #e8e2d4;
  border-radius: 12px;
  font-family: var(--cl-sans);
}
.cl-next-steps-title {
  font-family: var(--cl-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--cl-navy-deep);
  margin: 0 0 14px 0;
  text-align: center;
}
.cl-next-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.cl-next-steps-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cl-cream, #faf6ef);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(14,37,53,0.85);
}
.cl-next-step-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.cl-next-steps-list strong {
  display: block;
  color: var(--cl-navy-deep);
  font-weight: 700;
  margin-bottom: 2px;
}
.cl-next-steps-list small {
  color: rgba(14,37,53,0.6);
  font-size: 12px;
}
.cl-next-steps-list a {
  color: var(--cl-gold, #c8a04a) !important;
  font-weight: 600;
  text-decoration: underline !important;
}

/* Mention TVA sous le total — centrée, propre */
.cl-confirm-tva {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 600px;
  margin: 18px auto 0 !important;
  padding: 10px 16px;
  background: rgba(14,37,53,0.04);
  border: 1px solid rgba(14,37,53,0.08);
  border-radius: 8px;
  font-family: var(--cl-sans);
  font-size: 12.5px;
  color: rgba(14,37,53,0.7);
  text-align: center;
}

/* Cacher la section native VRI "Demande d'annulation/modification" (.vriordcancbox) —
   fait doublon avec WhatsApp dans Prochaines étapes. Kevin gère par message direct. */
body:has(.vri-ord-details-head-confirmed) .vriordcancbox {
  display: none !important;
}
.cl-confirm-tva svg {
  flex-shrink: 0;
  color: rgba(14,37,53,0.5);
}
.cl-confirm-tva strong {
  color: var(--cl-navy-deep);
  font-weight: 700;
}

/* CTAs row : .ics + WhatsApp + Retour accueil — style uniforme outline navy */
.cl-confirm-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 700px;
  margin: 22px auto 16px;
}
.cl-confirm-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid rgba(14,37,53,0.15);
  border-radius: 999px;
  font-family: var(--cl-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-navy-deep) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all .2s ease;
}
.cl-confirm-cta:hover {
  border-color: var(--cl-gold, #c8a04a);
  background: rgba(212,150,26,0.04);
  transform: translateY(-1px);
}
.cl-confirm-cta svg { color: var(--cl-gold, #c8a04a); }
/* CTA principal (PDF) — gold rempli, comme le "Finaliser le paiement" en pending */
.cl-confirm-cta-primary {
  background: var(--cl-gold, #c8a04a) !important;
  border-color: var(--cl-gold, #c8a04a) !important;
  color: var(--cl-navy-deep) !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  box-shadow: 0 3px 12px rgba(200,160,74,0.25);
}
.cl-confirm-cta-primary:hover {
  background: var(--cl-gold-lt, #e9b44b) !important;
  border-color: var(--cl-gold-lt, #e9b44b) !important;
  box-shadow: 0 5px 16px rgba(200,160,74,0.35);
}
.cl-confirm-cta-primary svg { color: var(--cl-navy-deep) !important; }
/* WhatsApp gardé en vert pour reconnaissance brand */
.cl-confirm-cta-wa svg { color: #25D366 !important; }

/* Bloc engagement Instagram — sobre, dans la palette du site */
.cl-confirm-insta {
  max-width: 700px;
  margin: 16px auto 32px;
  padding: 16px 22px;
  background: var(--cl-cream, #faf6ef);
  border: 1px solid #e8e2d4;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--cl-sans);
}
.cl-confirm-insta-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #e8e2d4;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E1306C;
}
.cl-confirm-insta-icon svg { width: 20px; height: 20px; }
.cl-confirm-insta-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cl-navy-deep);
  margin-bottom: 1px;
}
.cl-confirm-insta-text p {
  margin: 0;
  font-size: 12.5px;
  color: rgba(14,37,53,0.7);
  line-height: 1.4;
}
.cl-confirm-insta-text a {
  color: #E1306C !important;
  font-weight: 700;
  text-decoration: none !important;
}
.cl-confirm-insta-text a:hover { text-decoration: underline !important; }

/* Mobile : stack vertical pour le bloc Insta */
@media (max-width: 600px) {
  .cl-confirm-insta {
    flex-direction: column;
    text-align: center;
  }
  .cl-confirm-ctas { flex-direction: column; }
  .cl-confirm-cta { width: 100%; justify-content: center; }
}

/* === Mini récap step 3 (dates + lieu + total) === */
.cl-step3-recap {
  display: none; /* visible uniquement sur step 3 via règle plus loin */
  margin: 14px 0 22px 0;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid #e8e2d4;
  border-radius: 12px;
  font-family: var(--cl-sans);
}
body[data-cl-step="3"] .cl-step3-recap {
  display: block;
}
.cl-step3-recap-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--cl-navy-deep);
  border-bottom: 1px solid rgba(14,37,53,0.06);
}
.cl-step3-recap-row:last-child {
  border-bottom: none;
}
.cl-step3-recap-row svg {
  color: var(--cl-gold, #c8a04a);
  flex-shrink: 0;
}
.cl-step3-recap-row strong {
  font-weight: 700;
  color: var(--cl-navy-deep);
}
.cl-step3-recap-total {
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1.5px solid var(--cl-navy-deep);
}
.cl-step3-recap-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(14,37,53,0.6);
  font-weight: 600;
}
.cl-step3-recap-amount {
  font-family: var(--cl-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--cl-gold, #c8a04a);
}

/* === Mode de paiement simplifié (badge au lieu de radio) === */
body[data-cl-step="3"] .vri-oconfirm-paym-block.cl-paym-simplified {
  text-align: center;
}
.cl-payment-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(14,37,53,0.04);
  border: 1px solid rgba(14,37,53,0.10);
  border-radius: 10px;
  font-family: var(--cl-sans);
  font-size: 14px;
  color: var(--cl-navy-deep);
  margin: 8px auto 18px;
}
.cl-payment-badge svg {
  color: var(--cl-gold, #c8a04a);
  flex-shrink: 0;
}
.cl-payment-badge strong {
  font-weight: 700;
}

/* Bouton "Payer X€ →" enrichi : plus prominent que le natif */
body:has(.vri-oconfirm-summary-container) .vri-save-order-block input[name="saveorder"].cl-confirm-enriched,
body:has(.vri-oconfirm-summary-container) .vri-save-order-block .btn.booknow.cl-confirm-enriched {
  font-size: 17px !important;
  padding: 16px 32px !important;
  letter-spacing: 0.3px;
}

/* Form facturation : labels propres avec hauteur fixe pour alignement parfait
   (sans cette min-height, les labels sans astérisque/sup sont 5-8px plus bas que ceux avec) */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-label,
body:has(.vri-oconfirm-summary-container) .vri-customfield-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cl-navy-deep) !important;
  margin-bottom: 5px !important;
  display: flex !important;
  align-items: baseline;
  gap: 4px;
  min-height: 22px;
  line-height: 1.4 !important;
}
/* Label CGV : flex inline pour placer l'astérisque à la FIN du texte
   (au lieu d'être coincé entre la case et le texte) */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox .vri-customfield-label {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox .vri-customfield-label .vrirequired {
  order: 99;
  margin-left: 4px;
  margin-right: 0 !important;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox .vri-customfield-label > label,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox .vri-customfield-label > a {
  order: 1;
}

/* Form facturation : inputs uniformes */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont input[type="text"],
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont input[type="email"],
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont input[type="tel"],
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont input[type="number"],
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont select,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont textarea {
  height: 42px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(14,37,53,0.18) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: var(--cl-sans) !important;
  background: #fff !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  color: var(--cl-navy-deep) !important;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont textarea {
  height: auto !important;
  min-height: 90px !important;
  padding-top: 10px !important;
  resize: vertical !important;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont input:focus,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont select:focus,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont textarea:focus {
  outline: none !important;
  border-color: var(--cl-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,150,26,0.15) !important;
}

/* Espacement uniforme entre champs */
body:has(.vri-oconfirm-summary-container) .vridivcustomfield,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry {
  margin-bottom: 14px !important;
}
/* CGV checkbox — consolidé en bas (voir bloc CGV refonte plus loin) */

/* Card "Récupération / Restitution" — compactée : 2 colonnes côte-à-côte avec divider */
body:has(.vri-oconfirm-summary-container) .vri-summary-itinerary {
  margin-bottom: 14px !important;
}
body:has(.vri-oconfirm-summary-container) .vri-itinerary-confirmation {
  display: grid !important;
  grid-template-columns: 1fr 1fr auto !important;
  gap: 0 !important;
  padding: 4px !important;
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #e8e2d4 !important;
  align-items: stretch;
}
body:has(.vri-oconfirm-summary-container) .vri-itinerary-pickup,
body:has(.vri-oconfirm-summary-container) .vri-itinerary-dropoff {
  background: transparent !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}
body:has(.vri-oconfirm-summary-container) .vri-itinerary-pickup,
body:has(.vri-oconfirm-summary-container) .vri-itinerary-dropoff {
  border-right: 1px solid #ece5d4;
}
body:has(.vri-oconfirm-summary-container) .vri-itinerary-confirmation .cl-modify-dates-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
body:has(.vri-oconfirm-summary-container) .cl-modify-dates-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--cl-gold, #c8a04a);
  border: 1px solid rgba(200,160,74,0.4);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  font-family: var(--cl-sans);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
body:has(.vri-oconfirm-summary-container) .cl-modify-dates-btn:hover {
  background: rgba(200,160,74,0.1);
  border-color: var(--cl-gold);
}
@media (max-width: 600px) {
  body:has(.vri-oconfirm-summary-container) .vri-itinerary-confirmation {
    grid-template-columns: 1fr !important;
  }
  body:has(.vri-oconfirm-summary-container) .vri-itinerary-confirmation .cl-modify-dates-wrap {
    padding: 8px 16px 12px;
  }
}
body:has(.vri-oconfirm-summary-container) .vri-itinerary-pickup h4,
body:has(.vri-oconfirm-summary-container) .vri-itinerary-dropoff h4 {
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: rgba(14,37,53,0.5) !important;
  margin: 0 !important;
  font-weight: 600 !important;
  font-family: var(--cl-sans) !important;
}
body:has(.vri-oconfirm-summary-container) .vri-itinerary-pickup-location,
body:has(.vri-oconfirm-summary-container) .vri-itinerary-dropoff-location {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--cl-navy-deep) !important;
}
body:has(.vri-oconfirm-summary-container) .vri-itinerary-pickup-date,
body:has(.vri-oconfirm-summary-container) .vri-itinerary-dropoff-date {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cl-navy-deep) !important;
  margin: 0 !important;
}
body:has(.vri-oconfirm-summary-container) .vri-itinerary-pickup-locname,
body:has(.vri-oconfirm-summary-container) .vri-itinerary-dropoff-locname {
  font-weight: 500;
  color: rgba(14,37,53,0.85);
}
body:has(.vri-oconfirm-summary-container) .vri-itinerary-pickup svg,
body:has(.vri-oconfirm-summary-container) .vri-itinerary-dropoff svg {
  width: 14px;
  height: 14px;
  color: var(--cl-gold);
  flex-shrink: 0;
}
/* Cacher le "Location pour 4 Jours" inutile (durée toujours fixe) */
body:has(.vri-oconfirm-summary-container) .vrirentalfor {
  display: none !important;
}
@media (max-width: 600px) {
  body:has(.vri-oconfirm-summary-container) .vri-itinerary-confirmation {
    grid-template-columns: 1fr !important;
  }
  body:has(.vri-oconfirm-summary-container) .vri-itinerary-pickup {
    border-right: none;
    border-bottom: 1px solid #ece5d4;
  }
}
body:has(.vri-oconfirm-summary-container) .vri-rental-summary-title {
  font-family: var(--cl-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--cl-navy-deep) !important;
  margin: 0 0 6px 0 !important;
}
body:has(.vri-oconfirm-summary-container) .vrirentalforone {
  font-family: var(--cl-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(14,37,53,0.7) !important;
  margin: 0 !important;
}

/* Labels checkbox CGV : lien plus visible */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox a {
  color: var(--cl-gold-lt, #E9B44B) !important;
  text-decoration: underline !important;
  font-weight: 500;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox a:hover {
  color: var(--cl-gold) !important;
}

/* Mode de paiement : radio button propre, centré horizontalement */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-paym-block ul.vri-noliststyletype {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 320px;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-paym-block {
  text-align: center;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-paym-block .vri-gpay-licont {
  background: #fff;
  border: 2px solid rgba(14,37,53,0.10);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .2s ease;
  max-width: 320px;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-paym-block .vri-gpay-licont-active {
  border-color: var(--cl-gold) !important;
  background: rgba(212,150,26,0.04) !important;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-paym-block input[type="radio"] {
  accent-color: var(--cl-gold);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* === Form facturation : passage en CSS Grid propre (VRI base utilise inline-block 35%) === */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont .vricustomfields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px 22px !important;
  align-items: start !important;
  width: 100% !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  text-align: left !important;
}
/* Champs normaux : 1 colonne, layout block, alignés top */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont .vridivcustomfield:not(.vri-oconfirm-cfield-entry-checkbox):not(.vri-oconfirm-cfield-entry-textarea),
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont .vri-oconfirm-cfield-entry:not(.vri-oconfirm-cfield-entry-checkbox):not(.vri-oconfirm-cfield-entry-textarea):not(.vri-oconfirm-cfield-entry-separator) {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  align-self: start !important;
  vertical-align: top !important;
}
/* CGV + separators + textarea + microcopy : pleine largeur (2 colonnes) */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont .vri-oconfirm-cfield-entry-checkbox,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont .vri-oconfirm-cfield-entry-separator,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont .vri-oconfirm-cfield-entry-textarea,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont .cl-checkout-microcopy {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
/* Le séparateur (titre "Vos coordonnées") centré */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont .vri-oconfirm-cfield-entry-separator .vri-oconfirm-cfield-separator {
  text-align: center !important;
  margin: 0 0 4px 0;
}

/* === CGV checkbox — refonte propre (case à gauche, label à droite, large clickable) === */

/* Bloc CGV (entry-checkbox) : full-width, fond blanc, padding généreux, hover subtil */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  background: #fff !important;
  border: 1px solid rgba(14,37,53,0.12) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin: 20px 0 4px 0 !important;
  grid-column: 1 / -1 !important;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox:hover {
  border-color: rgba(212,150,26,0.45) !important;
  background: #fffdf7 !important;
}
/* État coché : bordure or */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox:has(input[type="checkbox"]:checked) {
  border-color: var(--cl-gold) !important;
  background: rgba(212,150,26,0.04) !important;
}

/* Case checkbox : à gauche, taille 22x22, accent gold */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox .vri-customfield-input,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox .vri-oconfirm-cfield-input {
  order: 1 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: var(--cl-gold) !important;
  flex-shrink: 0;
}

/* Label texte à droite, lisible */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox .vri-customfield-label,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox .vri-oconfirm-cfield-label {
  order: 2 !important;
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--cl-navy-deep) !important;
  font-weight: 500 !important;
  cursor: pointer;
}

/* Astérisque "obligatoire" sur la CGV : on le garde mais on le style en rouge propre */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox .vrirequired,
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox .vri-customfield-mandatory {
  color: #c0392b !important;
  font-weight: 700;
  margin-right: 4px;
}

/* Lien CGV : gold underline visible */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox a {
  color: var(--cl-gold, #c8a04a) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 600 !important;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-cfield-entry-checkbox a:hover {
  color: var(--cl-navy-deep) !important;
}

/* Téléphone : on cache le sélecteur drapeau intl-tel-input (FR uniquement, drapeau vide moche)
   + reset padding-left pour que le placeholder "06 12..." commence normalement à gauche. */
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont .iti__flag-container {
  display: none !important;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont input[type="tel"],
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont .iti input[type="text"] {
  padding-left: 14px !important;
}
body:has(.vri-oconfirm-summary-container) .vri-oconfirm-mainf-cont .iti {
  width: 100%;
  display: block !important;
}

/* Modal custom "Modifier les dates" — remplacement du confirm() natif */
.cl-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,37,53,0.55);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.cl-confirm-overlay.cl-confirm-open {
  opacity: 1;
  pointer-events: auto;
}
.cl-confirm-modal {
  background: #fff;
  border-radius: 14px;
  padding: 28px 28px 22px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  font-family: var(--cl-sans);
  text-align: center;
  transform: scale(0.96);
  transition: transform .2s ease;
}
.cl-confirm-overlay.cl-confirm-open .cl-confirm-modal {
  transform: scale(1);
}
.cl-confirm-modal-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  background: rgba(212,150,26,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cl-gold);
}
.cl-confirm-modal-icon svg {
  width: 22px;
  height: 22px;
}
.cl-confirm-modal-title {
  font-family: var(--cl-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--cl-navy-deep);
  margin: 0 0 8px 0;
}
.cl-confirm-modal-text {
  font-size: 14px;
  color: rgba(14,37,53,0.75);
  line-height: 1.5;
  margin: 0 0 22px 0;
}
.cl-confirm-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.cl-confirm-btn {
  padding: 10px 22px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--cl-sans);
  border: none;
  cursor: pointer;
  transition: all .15s ease;
}
.cl-confirm-btn-cancel {
  background: rgba(14,37,53,0.08);
  color: var(--cl-navy-deep);
}
.cl-confirm-btn-cancel:hover {
  background: rgba(14,37,53,0.14);
}
.cl-confirm-btn-ok {
  background: var(--cl-gold);
  color: var(--cl-navy-deep);
  box-shadow: 0 3px 10px rgba(212,150,26,0.35);
}
.cl-confirm-btn-ok:hover {
  background: var(--cl-gold-lt, #E9B44B);
  transform: translateY(-1px);
}

/* ============================================================
   VOIE C : choix livraison au panier (pas sur fiche produit)
   Cf plan : Widget livraison custom au panier CarcaLoca
   ============================================================ */

/* Phase 1 — Cache TOUS les éléments choix livraison sur la fiche produit + showprc.
   Le client choisira son mode de livraison UNE SEULE FOIS sur la page récap (oconfirm)
   via notre widget custom Phase 2. */

/* Bloc Service de livraison sur showprc (toggle "J'aimerais faire livrer cet article" + adresse + carte) */
.item_delivery {
  display: none !important;
}

/* Selecteurs Lieu pickup/dropoff sur la fiche produit */
.vri-bookform-container select[name="place"],
.vri-bookform-container select[name="returnplace"] {
  display: none !important;
}

/* Cacher les ENTRÉES COMPLÈTES (label + select) Lieu pickup/return — :has() supporté
   sur 97% des navigateurs en 2026. Structure réelle VRI : <div class="vrisfentry">
   <label>Lieu...</label><span class="vriplacesp"><select name="place"></span></div> */
.vri-bookform-container .vrisfentry:has(select[name="place"]),
.vri-bookform-container .vrisfentry:has(select[name="returnplace"]) {
  display: none !important;
}

/* Span "Service de livraison disponible" parasite — on gère la livraison au panier */
.vri-bookform-container .vrideliveryservicespan {
  display: none !important;
}

/* Bloc "Voir la carte des emplacements" — 1 seul lieu de retrait, info inutile */
.vri-bookform-container .vrilocationsbox,
.vri-bookform-container a[href*="locationsmap"],
.vri-bookform-container a[href*="placesmap"],
.vri-bookform-container .vrimap-link,
.vri-bookform-container a[onclick*="placesmap"] {
  display: none !important;
}

/* ============================================================
   VOIE C — Phase 2 : Widget "Mode de livraison" sur la page récap
   ============================================================ */

.cl-delivery-widget {
  margin: 22px 0 24px 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--cl-sans);
}

.cl-delivery-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cl-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--cl-navy-deep);
  margin: 0 0 16px 0;
}
.cl-delivery-title svg {
  width: 22px;
  height: 22px;
  color: var(--cl-gold);
  flex-shrink: 0;
}

.cl-delivery-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
  align-items: stretch;
}
/* Expansion : seulement quand l'utilisateur a explicitement cliqué (classe ajoutée en JS).
   Au chargement la card par défaut (pickup) est sélectionnée mais NON expansée. */
.cl-delivery-option.cl-delivery-expanded {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .cl-delivery-options { grid-template-columns: 1fr; }
}

.cl-delivery-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px;
  background: #fff;
  border: 2px solid rgba(14,37,53,0.10);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s ease;
  height: 100%;
  box-sizing: border-box;
}
/* Icône à gauche dans un cercle subtle */
.cl-delivery-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(200,160,74,0.10);
  color: var(--cl-gold, #c8a04a);
  transition: all .2s ease;
}
.cl-delivery-option.cl-delivery-active .cl-delivery-option-icon {
  background: var(--cl-gold, #c8a04a);
  color: #fff;
}
.cl-delivery-option:hover {
  border-color: rgba(212,150,26,0.4);
}
.cl-delivery-option input[type="radio"] {
  /* radio caché — la sélection est indiquée par la classe .cl-delivery-active (JS-géré)
     pour éviter les états désynchronisés avec :has(:checked) */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cl-delivery-option.cl-delivery-active {
  border-color: var(--cl-gold) !important;
  background: rgba(212,150,26,0.04);
}
.cl-delivery-option-content {
  flex: 1;
  min-width: 0;
}
.cl-delivery-option-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 3px;
}
.cl-delivery-option-head strong {
  font-size: 15px;
  color: var(--cl-navy-deep);
  font-weight: 700;
}
.cl-delivery-option-price {
  font-family: var(--cl-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--cl-gold);
  white-space: nowrap;
}
.cl-delivery-option-desc {
  display: block;
  font-size: 12.5px;
  color: rgba(14,37,53,0.65);
  line-height: 1.4;
}

/* Pattern accordion :
   - Card non-sélectionnée → affiche juste le summary (1 ligne courte)
   - Card sélectionnée → affiche les details (descriptions, dates, sub-options, adresse) */
.cl-delivery-option-summary {
  display: block;
  font-size: 12.5px;
  color: rgba(14,37,53,0.55);
  line-height: 1.4;
  font-style: italic;
}
.cl-delivery-option-details {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(14,37,53,0.08);
}
/* Au chargement : summary visible, details cachés même si la card est checked */
.cl-delivery-option .cl-delivery-option-summary { display: block; }
.cl-delivery-option .cl-delivery-option-details { display: none; }
/* Expansion via classe JS (sur clic explicite) */
.cl-delivery-option.cl-delivery-expanded .cl-delivery-option-summary { display: none; }
.cl-delivery-option.cl-delivery-expanded .cl-delivery-option-details {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(14,37,53,0.08);
}

/* Le prompt "Précisez le trajet souhaité" au-dessus des sub-radios */
.cl-delivery-prompt {
  display: block;
  font-size: 13px;
  color: var(--cl-navy-deep);
  font-weight: 600;
  font-style: normal;
  margin-bottom: 8px;
}

/* Le slot adresse (où le bloc adresse est inséré dans la card sélectionnée) */
.cl-delivery-address-slot {
  margin-top: 12px;
}
.cl-delivery-address-slot:empty {
  display: none;
}

/* ============================================================
   VOIE C — Phase 7 : Stepper en 3 étapes (refonte UX page récap)
   ============================================================ */

/* Indicateur stepper en haut */
.cl-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 28px 0;
  font-family: var(--cl-sans);
}
.cl-step-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 99px;
  background: rgba(14,37,53,0.06);
  color: rgba(14,37,53,0.55);
  font-size: 14px;
  font-weight: 500;
  transition: all .2s ease;
}
.cl-step-indicator.cl-step-active {
  background: var(--cl-gold);
  color: var(--cl-navy-deep);
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(212,150,26,0.30);
}
.cl-step-indicator.cl-step-completed {
  background: rgba(46,122,61,0.10);
  color: #2c7a3d;
  font-weight: 600;
  cursor: pointer; /* permet le retour en arrière */
}
.cl-step-indicator.cl-step-completed:hover {
  background: rgba(46,122,61,0.18);
}
.cl-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(14,37,53,0.15);
  color: rgba(14,37,53,0.6);
  font-weight: 700;
  font-size: 12.5px;
}
.cl-step-active .cl-step-number {
  background: var(--cl-navy-deep);
  color: var(--cl-gold);
}
.cl-step-completed .cl-step-number {
  background: #2c7a3d;
  color: #fff;
}
.cl-step-arrow {
  color: rgba(14,37,53,0.25);
  flex-shrink: 0;
}

/* Mobile : version compacte */
@media (max-width: 640px) {
  .cl-stepper {
    gap: 4px;
    margin: 14px 0 20px 0;
  }
  .cl-step-indicator {
    padding: 6px 10px;
    font-size: 12.5px;
  }
  .cl-step-label {
    display: none;
  }
  .cl-step-active .cl-step-label {
    display: inline;
  }
  .cl-step-number {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
}

/* Actions par étape (Précédent / Continuer / Confirmer) — sur PC ≥1280px, le CTA
   "Continuer/Confirmer" est délégué à la sticky sidebar pour éviter le double bouton.
   En dessous, on garde le bouton inline visible car pas de sticky. */
.cl-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 24px 0 32px 0;
  flex-wrap: wrap;
}
/* L'inline reste toujours visible. La sticky sidebar (PC ≥1280px) est un complément
   (pattern Airbnb : sticky + bouton de confirmation final visible en bas de page).
   Sur step 1 il n'y a pas de "Précédent" donc le wrapper contient juste le Continuer. */
.cl-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cl-gold);
  color: var(--cl-navy-deep);
  border: none;
  padding: 13px 26px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 15px;
  font-family: var(--cl-sans);
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 14px rgba(212,150,26,0.30);
}
.cl-step-btn:hover {
  background: var(--cl-gold-lt, #E9B44B);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212,150,26,0.40);
}
.cl-step-btn-secondary {
  background: rgba(14,37,53,0.08);
  color: var(--cl-navy-deep);
  box-shadow: none;
}
.cl-step-btn-secondary:hover {
  background: rgba(14,37,53,0.14);
  transform: none;
  box-shadow: none;
}

/* Mobile : full-width pour les boutons d'actions */
@media (max-width: 640px) {
  .cl-step-actions {
    flex-direction: column-reverse;
  }
  .cl-step-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Centrage du titre "Récapitulatif de la commande" en cohérence avec le stepper */
body:has(.cl-stepper) .vri-rental-summary-title,
body:has(.cl-stepper) .vrirentalforone {
  text-align: center;
}

/* ============================================================
   COOKIE BANNER BLOCKSY — restylé aux couleurs CarcaLoca
   Best practice 2026 : banner full-width en bas + 2 boutons équivalents (RGPD)
   ============================================================ */

/* Banner Blocksy : structure réelle = .cookie-notification > .container > [.ct-cookies-content + .ct-button-group]
   On positionne le wrap parent + on met le flex sur le .container interne. */
.cookie-notification {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  background: var(--cl-navy-deep, #0E2535) !important;
  color: var(--cl-cream, #f8f4ec) !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(212,150,26,0.30) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.25) !important;
  padding: 14px 0 !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0)) !important;
  z-index: 9998 !important;
  font-family: var(--cl-sans), sans-serif !important;
  display: block !important;
}

/* Le .container interne contient texte + boutons — c'est lui qu'on flex en ligne */
.cookie-notification > .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
  background: transparent !important;
}

.cookie-notification .ct-cookies-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.cookie-notification .ct-cookies-content a {
  color: var(--cl-gold-lt, #E9B44B) !important;
  text-decoration: underline !important;
}

/* Wrap des boutons à droite (.ct-button-group dans Blocksy) */
.cookie-notification .ct-button-group {
  display: flex !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  background: transparent !important;
}

.cookie-notification .ct-button {
  border-radius: 99px !important;
  padding: 9px 22px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  font-family: var(--cl-sans), sans-serif !important;
  transition: all .2s ease !important;
  cursor: pointer !important;
  border: none !important;
  white-space: nowrap !important;
}
.cookie-notification .ct-cookies-accept-button {
  background: var(--cl-gold, #D4961A) !important;
  color: var(--cl-navy-deep, #0E2535) !important;
  box-shadow: 0 3px 10px rgba(212,150,26,0.35) !important;
}
.cookie-notification .ct-cookies-accept-button:hover {
  background: var(--cl-gold-lt, #E9B44B) !important;
  transform: translateY(-1px) !important;
}
.cookie-notification .ct-cookies-decline-button {
  background: transparent !important;
  color: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  padding: 8px 21px !important;
}
.cookie-notification .ct-cookies-decline-button:hover {
  border-color: rgba(255,255,255,0.55) !important;
  color: #fff !important;
}

/* Mobile : layout vertical, padding réduit, boutons full-width */
@media (max-width: 640px) {
  .cookie-notification {
    padding: 12px 0 !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)) !important;
  }
  .cookie-notification > .container {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 16px !important;
    gap: 10px !important;
  }
  .cookie-notification .ct-cookies-content {
    text-align: center !important;
    font-size: 12.5px !important;
  }
  .cookie-notification .ct-button-group {
    width: 100% !important;
    justify-content: center !important;
  }
  .cookie-notification .ct-button {
    flex: 1 !important;
    text-align: center !important;
    padding: 10px 14px !important;
  }
}

/* Décalage des éléments sticky bottom quand le cookie banner est visible.
   Hauteur banner PC ~60px, sticky cart bar ~56px → WhatsApp doit être au-dessus des deux. */
body:has(.cookie-notification) .cl-cart-bar,
body:has(.cookie-notification) .cl-checkout-bar {
  bottom: 64px !important;
}
/* Cas 1 : banner cookie SEUL (pas de sticky cart bar) → WhatsApp juste au-dessus du banner */
body:has(.cookie-notification):not(:has(.cl-cart-bar)):not(:has(.cl-checkout-bar)) .cl-chat-bubble {
  bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
}
/* Cas 2 : banner cookie ET sticky cart bar (ou checkout) → chat bubble au-dessus des 2 */
body:has(.cookie-notification):has(.cl-cart-bar) .cl-chat-bubble,
body:has(.cookie-notification):has(.cl-checkout-bar) .cl-chat-bubble {
  bottom: calc(140px + env(safe-area-inset-bottom, 0)) !important;
}
@media (max-width: 640px) {
  /* Sur mobile, banner cookie en column (texte + boutons sur 2 lignes) ~120px */
  body:has(.cookie-notification) .cl-cart-bar,
  body:has(.cookie-notification) .cl-checkout-bar {
    bottom: 130px !important;
  }
  body:has(.cookie-notification):not(:has(.cl-cart-bar)):not(:has(.cl-checkout-bar)) .cl-chat-bubble {
    bottom: calc(140px + env(safe-area-inset-bottom, 0)) !important;
  }
  body:has(.cookie-notification):has(.cl-cart-bar) .cl-chat-bubble,
  body:has(.cookie-notification):has(.cl-checkout-bar) .cl-chat-bubble {
    bottom: calc(200px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* Toast d'erreur form facturation (validation step 2 → 3) */
.cl-form-error-toast {
  background: #fdecea;
  color: #c0392b;
  border: 1px solid rgba(192,57,43,0.30);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 18px 0;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--cl-sans);
  animation: cl-toast-in .25s ease-out;
}
@keyframes cl-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cache les sections selon l'étape courante.
   ATTENTION : .vri-oconfirm-paym-block et .vri-save-order-block sont NESTED dans
   .vri-oconfirm-mainf-cont. Donc on ne peut pas display:none le parent en step 3,
   on doit cibler précisément les enfants à cacher/afficher. */

/* STEP 1 : Votre commande — cache form/paiement/trust */
body[data-cl-step="1"] .vri-oconfirm-mainf-cont,
body[data-cl-step="1"] .cl-checkout-trust,
body[data-cl-step="1"] .cl-step-actions-2,
body[data-cl-step="1"] .cl-step-actions-3 {
  display: none !important;
}

/* STEP 2 : Coordonnées — cache récap items / livraison / paiement / trust.
   Garde .vri-oconfirm-mainf-cont VISIBLE mais cache les enfants paym + save + trust dedans */
body[data-cl-step="2"] .vri-summary-itinerary,
body[data-cl-step="2"] .vri-oconfirm-summary-container,
body[data-cl-step="2"] .vri-oconfirm-summary-total-wrapper,
body[data-cl-step="2"] .cl-delivery-widget,
body[data-cl-step="2"] .cl-modify-dates-wrap,
body[data-cl-step="2"] .vri-oconfirm-paym-block,
body[data-cl-step="2"] .vri-save-order-block,
body[data-cl-step="2"] .cl-checkout-trust,
body[data-cl-step="2"] .cl-step-actions-1,
body[data-cl-step="2"] .cl-step-actions-3 {
  display: none !important;
}

/* STEP 3 : Paiement — cache récap items / livraison / form facturation.
   Garde .vri-oconfirm-mainf-cont VISIBLE mais cache les champs (custom fields) dedans.
   .vri-oconfirm-paym-block + .vri-save-order-block + .cl-checkout-trust restent visibles. */
body[data-cl-step="3"] .vri-summary-itinerary,
body[data-cl-step="3"] .vri-oconfirm-summary-container,
body[data-cl-step="3"] .vri-oconfirm-summary-total-wrapper,
body[data-cl-step="3"] .cl-delivery-widget,
body[data-cl-step="3"] .cl-modify-dates-wrap,
body[data-cl-step="3"] .vri-oconfirm-mainf-cont .vricustomfields,
body[data-cl-step="3"] .cl-checkout-microcopy,
body[data-cl-step="3"] .cl-step-actions-1,
body[data-cl-step="3"] .cl-step-actions-2 {
  display: none !important;
}

/* Bloc adresse (apparaît si Livraison sélectionnée) */
.cl-delivery-address-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(14,37,53,0.08);
}
.cl-delivery-address-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-navy-deep);
  margin-bottom: 6px;
}
.cl-delivery-address-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.cl-delivery-address-input {
  flex: 1;
  min-width: 0;
  height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(14,37,53,0.18) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: var(--cl-sans) !important;
  background: #fff !important;
  color: var(--cl-navy-deep) !important;
}
.cl-delivery-address-input:focus {
  outline: none;
  border-color: var(--cl-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,150,26,0.15);
}
.cl-delivery-validate-btn {
  background: var(--cl-navy-deep) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--cl-sans) !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.cl-delivery-validate-btn:hover {
  background: var(--cl-navy) !important;
}
.cl-delivery-feedback {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  min-height: 18px;
}
.cl-delivery-feedback.cl-feedback-loading {
  color: rgba(14,37,53,0.6);
  font-style: italic;
}
.cl-delivery-feedback.cl-feedback-ok {
  color: #2c7a3d;
  font-weight: 500;
}
.cl-delivery-feedback.cl-feedback-error {
  color: #c0392b;
  font-weight: 500;
}

/* Lien Google Maps inline dans la description du retrait */
.cl-delivery-maps-link {
  color: var(--cl-gold) !important;
  text-decoration: underline;
  font-weight: 500;
  white-space: nowrap;
}
.cl-delivery-maps-link:hover {
  color: var(--cl-gold-lt, #E9B44B) !important;
}

/* Ligne dates/heures dans la description (peut être multiligne maintenant) */
.cl-delivery-option-times {
  display: block;
  margin-top: 6px;
  color: rgba(14,37,53,0.7);
  font-weight: 500;
  line-height: 1.6;
}

/* Bandeau zone "20 km autour de Carcassonne" — mis en évidence */
.cl-delivery-option-zone {
  display: block;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(212,150,26,0.10);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--cl-navy-deep);
  line-height: 1.4;
}
.cl-delivery-option-zone strong {
  color: var(--cl-gold);
}

/* Sous-options pour "Je veux 1 trajet" — affichées seulement si oneway sélectionné */
.cl-delivery-suboptions {
  display: none;
  margin-top: 10px;
  padding-left: 8px;
  border-left: 3px solid var(--cl-gold);
}
.cl-delivery-option[data-mode="oneway"].cl-delivery-active .cl-delivery-suboptions {
  display: block;
}
.cl-delivery-suboption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  margin: 6px 0;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s ease;
}
.cl-delivery-suboption:hover {
  background: rgba(14,37,53,0.04);
}
.cl-delivery-suboption input[type="radio"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--cl-gold);
  cursor: pointer;
  flex-shrink: 0;
}
.cl-delivery-suboption-text {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(14,37,53,0.85);
}
.cl-delivery-suboption-text strong {
  color: var(--cl-navy-deep);
}
.cl-delivery-suboption-text small {
  color: rgba(14,37,53,0.55);
  font-size: 12px;
}

/* Mobile : adapter */
@media (max-width: 640px) {
  .cl-delivery-widget {
    padding: 16px 16px;
  }
  .cl-delivery-option {
    padding: 12px 14px;
  }
  .cl-delivery-option-head {
    flex-direction: column;
    gap: 2px;
  }
  .cl-delivery-address-row {
    flex-direction: column;
  }
  .cl-delivery-validate-btn {
    width: 100%;
  }
}

/* ====================================================
   PAGE PACTE DE CONFIANCE (/pacte-confiance/)
   ==================================================== */

/* Container global de la page : toutes les sections en pleine largeur (background),
   contenu interne contraint à 760px centré horizontalement. Pas de "section centrée
   dans son parent" qui créait une impression d'alternance avec les sections --alt. */
body.page .cl-pacte-section,
body.page .cl-pacte-cta {
  max-width: none;
  margin: 0;
  padding: 36px 24px;
  font-family: var(--cl-sans);
}
body.page .cl-pacte-section > *,
body.page .cl-pacte-cta > * {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cl-pacte-hero {
  text-align: center;
  padding-top: 48px !important;
  padding-bottom: 32px !important;
}
.cl-pacte-hero .cl-tag {
  display: inline-block;
  background: rgba(200,160,74,0.12);
  color: var(--cl-gold, #c8a04a);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.cl-pacte-title {
  font-family: var(--cl-serif);
  font-size: 38px;
  font-weight: 700;
  color: var(--cl-navy-deep, #0E2535);
  line-height: 1.15;
  margin: 0 0 14px 0;
}
.cl-pacte-lead {
  font-size: 17px;
  color: rgba(14,37,53,0.75);
  line-height: 1.55;
  margin: 0;
}

.cl-pacte-section {
  padding: 36px 24px;
}
/* Variante --alt : juste un changement de couleur de fond, mais layout identique */
.cl-pacte-section--alt {
  background: var(--cl-cream, #faf6ef);
}
.cl-pacte-section h2 {
  font-family: var(--cl-serif);
  font-size: 26px;
  color: var(--cl-navy-deep, #0E2535);
  margin: 0 0 18px 0;
  font-weight: 700;
}
.cl-pacte-section p {
  font-size: 15.5px;
  line-height: 1.65;
  color: #2a3540;
  margin: 0 0 14px 0;
}
.cl-pacte-section p:last-child { margin-bottom: 0; }
.cl-pacte-section strong { color: var(--cl-navy-deep, #0E2535); }

/* Steps numérotées */
.cl-pacte-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cl-pacte-steps li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.cl-pacte-step-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cl-gold, #c8a04a);
  color: var(--cl-navy-deep, #0E2535);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cl-serif);
  font-size: 18px;
  font-weight: 700;
}
.cl-pacte-steps li > div:last-child {
  flex: 1;
}
.cl-pacte-steps strong {
  display: block;
  font-size: 16px;
  color: var(--cl-navy-deep, #0E2535);
  margin-bottom: 4px;
}
.cl-pacte-steps p {
  margin: 0;
  font-size: 14.5px;
  color: rgba(14,37,53,0.75);
}

/* Citation analogie — encart navy remarquable, mais texte aligné à gauche pour cohérence lecture */
.cl-pacte-analogy {
  padding: 32px 24px !important;
}
.cl-pacte-quote {
  background: linear-gradient(135deg, var(--cl-navy-deep, #0E2535) 0%, #142b3f 100%);
  color: #fff;
  padding: 32px 36px 32px 56px;
  border-radius: 16px;
  position: relative;
  margin: 0;
}
.cl-pacte-quote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 20px;
  font-family: Georgia, serif;
  font-size: 80px;
  color: var(--cl-gold, #c8a04a);
  line-height: 1;
}
.cl-pacte-quote p {
  font-family: var(--cl-serif);
  font-size: 18px;
  color: #fff !important;
  font-style: italic;
  line-height: 1.55;
  margin: 0 !important;
  text-align: left;
}

/* Grille des tarifs — version progressive 3 niveaux */
.cl-damage-grid-wrapper {
  overflow-x: auto;
  margin: 18px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(14,37,53,0.05);
}
.cl-damage-grid {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.cl-damage-grid thead {
  background: var(--cl-navy-deep, #0E2535);
  color: #fff;
}
.cl-damage-grid th {
  padding: 14px 14px;
  text-align: left;
  font-family: var(--cl-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  vertical-align: middle;
}
.cl-damage-grid th.cl-damage-grid-total { text-align: right; }
.cl-damage-grid td {
  padding: 14px 14px;
  border-bottom: 1px solid rgba(14,37,53,0.06);
  font-size: 14px;
  color: #2a3540;
  vertical-align: middle;
}
.cl-damage-grid tr:last-child td { border-bottom: none; }
.cl-damage-grid-item { width: 28%; }
.cl-damage-grid-light, .cl-damage-grid-major { width: 28%; }
.cl-damage-grid-total { width: 16%; text-align: right; }

.cl-damage-grid-amount {
  display: block;
  font-family: var(--cl-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--cl-navy-deep, #0E2535);
}
.cl-damage-grid-total-amount {
  color: #c0392b !important;
  font-size: 17px !important;
}
.cl-damage-grid-label {
  display: block;
  font-size: 12px;
  color: rgba(14,37,53,0.55);
  font-style: italic;
  margin-top: 2px;
  font-weight: 400;
}
.cl-damage-grid-empty-cell {
  color: rgba(14,37,53,0.25);
  font-weight: 400;
}

.cl-damage-grid-legal {
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(14,37,53,0.04);
  border-left: 3px solid var(--cl-gold, #c8a04a);
  border-radius: 6px;
}
.cl-damage-grid-legal p {
  font-size: 12.5px;
  color: rgba(14,37,53,0.7);
  line-height: 1.55;
  margin: 0 0 8px 0;
}
.cl-damage-grid-legal p:last-child { margin-bottom: 0; }
.cl-damage-grid-legal strong { color: var(--cl-navy-deep, #0E2535); }

.cl-damage-grid-empty {
  background: var(--cl-cream, #faf6ef);
  border: 1px dashed rgba(200,160,74,0.4);
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  color: rgba(14,37,53,0.7);
}
.cl-damage-grid-empty a {
  color: var(--cl-gold, #c8a04a);
  font-weight: 700;
}

/* Section "Concrètement, en cas de dégât" — texte explicite */
.cl-pacte-lead-standalone {
  font-size: 19px;
  color: rgba(14,37,53,0.78);
  line-height: 1.55;
  text-align: center;
  font-style: italic;
  margin: 0;
}
.cl-pacte-explicit .cl-pacte-list {
  list-style: disc;
  margin: 0 0 18px 22px;
  padding: 0;
}
.cl-pacte-explicit .cl-pacte-list li {
  font-size: 15px;
  color: #2a3540;
  line-height: 1.6;
  padding: 3px 0;
}
.cl-pacte-h3 {
  font-family: var(--cl-serif);
  font-size: 18px;
  color: var(--cl-navy-deep, #0E2535);
  margin: 22px 0 12px 0;
  font-weight: 600;
}
.cl-pacte-guarantees {
  list-style: none;
  counter-reset: cl-pacte-counter;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cl-pacte-guarantees li {
  counter-increment: cl-pacte-counter;
  background: #fff;
  border: 1px solid rgba(14,37,53,0.08);
  border-radius: 10px;
  padding: 16px 18px 14px 56px;
  position: relative;
}
.cl-pacte-guarantees li::before {
  content: counter(cl-pacte-counter);
  position: absolute;
  left: 18px;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cl-gold, #c8a04a);
  color: var(--cl-navy-deep, #0E2535);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cl-serif);
  font-size: 15px;
  font-weight: 700;
}
.cl-pacte-guarantees strong {
  display: block;
  font-size: 15px;
  color: var(--cl-navy-deep, #0E2535);
  margin-bottom: 4px;
}
.cl-pacte-guarantees p {
  font-size: 14px;
  color: rgba(14,37,53,0.72);
  margin: 0;
  line-height: 1.55;
}
.cl-pacte-contest {
  margin-top: 18px;
  font-size: 14px;
  color: rgba(14,37,53,0.7);
  font-style: italic;
}
.cl-pacte-contest a {
  color: var(--cl-gold, #c8a04a);
  font-weight: 600;
}

/* FAQ accordéon */
.cl-pacte-faq details {
  background: #fff;
  border: 1px solid rgba(14,37,53,0.08);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 10px;
  transition: box-shadow .2s ease;
}
.cl-pacte-faq details[open] {
  box-shadow: 0 2px 8px rgba(14,37,53,0.06);
}
.cl-pacte-faq summary {
  font-family: var(--cl-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--cl-navy-deep, #0E2535);
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 44px;
}
.cl-pacte-faq summary::-webkit-details-marker { display: none; }
.cl-pacte-faq summary::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cl-gold, #c8a04a);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s ease;
}
.cl-pacte-faq details[open] summary::after {
  content: '−';
}
.cl-pacte-faq details > p {
  padding: 0 18px 14px 18px;
  margin: 0 !important;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(14,37,53,0.78);
}

/* CTA final */
.cl-pacte-cta {
  text-align: center;
  padding: 48px 24px 60px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(200,160,74,0.06) 100%);
  max-width: none !important;
}
.cl-pacte-cta h2 {
  font-family: var(--cl-serif);
  font-size: 24px;
  color: var(--cl-navy-deep, #0E2535);
  margin: 0 0 10px 0;
}
.cl-pacte-cta p {
  font-size: 15px;
  color: rgba(14,37,53,0.75);
  margin: 0 0 18px 0;
}

@media (max-width: 600px) {
  .cl-pacte-title { font-size: 30px; }
  .cl-pacte-section h2 { font-size: 22px; }
  .cl-pacte-quote { padding: 24px 22px; }
  .cl-pacte-quote p { font-size: 16px; }
  .cl-damage-grid th, .cl-damage-grid td { padding: 11px 14px; }
  .cl-damage-grid td.cl-damage-grid-price { font-size: 15px; }
  .cl-pacte-step-num { width: 32px; height: 32px; font-size: 15px; }
  .cl-pacte-steps li { gap: 14px; }
}

/* ====================================================
   PAGE /confirm-card/ — Validation CB Setup Intent
   ==================================================== */
.cl-confirm-card-wrap {
  max-width: 520px;
  margin: 40px auto 60px;
  padding: 0 24px;
  font-family: var(--cl-sans);
}
.cl-confirm-card-header {
  text-align: center;
  margin-bottom: 28px;
}
.cl-confirm-card-header h1 {
  font-family: var(--cl-serif);
  font-size: 30px;
  color: var(--cl-navy-deep, #0E2535);
  margin: 0 0 10px 0;
}
.cl-confirm-card-event {
  font-size: 15px;
  color: rgba(14,37,53,0.7);
  margin: 0;
}
.cl-confirm-card-event strong { color: var(--cl-navy-deep, #0E2535); }

/* Reassurance bar */
.cl-confirm-card-reassure {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
  padding: 14px 12px;
  background: rgba(74,222,128,0.06);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 12px;
}
.cl-confirm-card-reassure-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cl-confirm-card-reassure-item strong {
  font-size: 13px;
  color: #0d7a3f;
}
.cl-confirm-card-reassure-item span {
  font-size: 11.5px;
  color: rgba(14,37,53,0.65);
  line-height: 1.35;
}

/* Form */
.cl-confirm-card-form {
  background: #fff;
  border: 1px solid rgba(14,37,53,0.08);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(14,37,53,0.05);
}
.cl-confirm-field {
  display: block;
  margin-bottom: 18px;
}
.cl-confirm-field > span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(14,37,53,0.65);
  margin-bottom: 6px;
}
.cl-confirm-field input[type="text"] {
  width: 100%;
  font-family: var(--cl-sans);
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}
.cl-confirm-field input[type="text"]:focus {
  outline: none;
  border-color: var(--cl-gold, #c8a04a);
  box-shadow: 0 0 0 3px rgba(200,160,74,0.15);
}
.cl-card-element {
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cl-card-element.StripeElement--focus {
  border-color: var(--cl-gold, #c8a04a);
  box-shadow: 0 0 0 3px rgba(200,160,74,0.15);
}
.cl-card-element.StripeElement--invalid { border-color: #c0392b; }
.cl-card-errors {
  margin-top: 8px;
  font-size: 13px;
  color: #c0392b;
  min-height: 16px;
}
.cl-confirm-submit {
  width: 100%;
  padding: 14px 18px;
  background: var(--cl-gold, #c8a04a);
  color: var(--cl-navy-deep, #0E2535);
  border: none;
  border-radius: 999px;
  font-family: var(--cl-serif);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cl-confirm-submit:hover:not(:disabled) {
  background: var(--cl-gold-lt, #e9b44b);
  transform: translateY(-1px);
}
.cl-confirm-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.cl-confirm-submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cl-chat-spin .9s linear infinite;
}
.cl-confirm-submit-loading .cl-confirm-submit-label { opacity: 0.6; }
.cl-confirm-submit-loading .cl-confirm-submit-spinner { display: inline-block; }
.cl-confirm-card-tos {
  margin: 14px 0 0 0;
  font-size: 11.5px;
  color: rgba(14,37,53,0.55);
  text-align: center;
  line-height: 1.5;
}
.cl-confirm-card-tos a {
  color: var(--cl-gold, #c8a04a);
  text-decoration: underline;
}

/* Success state */
.cl-confirm-card-success {
  text-align: center;
  background: #fff;
  border: 1px solid rgba(74,222,128,0.35);
  border-radius: 14px;
  padding: 36px 28px;
  box-shadow: 0 4px 20px rgba(14,37,53,0.05);
}
.cl-confirm-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #4ade80;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-confirm-card-success h2 {
  font-family: var(--cl-serif);
  font-size: 24px;
  color: var(--cl-navy-deep, #0E2535);
  margin: 0 0 12px 0;
}
.cl-confirm-card-success p {
  font-size: 15px;
  color: #444;
  margin: 0 0 8px 0;
  line-height: 1.5;
}

/* Erreur / déjà validé */
.cl-confirm-error,
.cl-confirm-already {
  max-width: 520px;
  margin: 60px auto;
  padding: 28px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(14,37,53,0.08);
  text-align: center;
  font-family: var(--cl-sans);
}
.cl-confirm-already {
  border-color: rgba(74,222,128,0.35);
}
.cl-confirm-error h2,
.cl-confirm-already h2 {
  font-family: var(--cl-serif);
  font-size: 24px;
  color: var(--cl-navy-deep, #0E2535);
  margin: 0 0 12px 0;
}
.cl-confirm-error p,
.cl-confirm-already p {
  color: #555;
  font-size: 14.5px;
  margin: 0;
}
.cl-confirm-error a { color: var(--cl-gold, #c8a04a); font-weight: 600; }

/* Page /merci-validation/ */
.cl-merci-validation {
  max-width: 520px;
  margin: 60px auto;
  padding: 36px 28px;
  text-align: center;
  font-family: var(--cl-sans);
}
.cl-merci-validation h1 {
  font-family: var(--cl-serif);
  font-size: 30px;
  color: var(--cl-navy-deep, #0E2535);
  margin: 0 0 14px 0;
}
.cl-merci-validation p { color: #444; line-height: 1.6; }

@media (max-width: 480px) {
  .cl-confirm-card-reassure { grid-template-columns: 1fr; }
  .cl-confirm-card-reassure-item { text-align: left; flex-direction: row; align-items: baseline; gap: 8px; }
  .cl-confirm-card-reassure-item strong { white-space: nowrap; }
}

/* Responsive mobile pour la page /confirm-card/ — Stripe Elements + form padding */
@media (max-width: 600px) {
  .cl-confirm-card-wrap {
    margin: 24px auto 40px;
    padding: 0 16px;
  }
  .cl-confirm-card-header h1 {
    font-size: 24px;
    line-height: 1.2;
  }
  .cl-confirm-card-event {
    font-size: 14px;
  }
  .cl-confirm-card-reassure {
    padding: 12px 14px;
    gap: 8px;
    margin-bottom: 22px;
  }
  /* Form padding réduit sur mobile pour libérer largeur disponible à Stripe Elements */
  .cl-confirm-card-form {
    padding: 18px 14px;
    border-radius: 12px;
  }
  /* Stripe Elements wrapper : padding interne réduit + iframe full-width */
  .cl-card-element {
    padding: 14px 12px;
  }
  .cl-card-element .__PrivateStripeElement {
    width: 100% !important;
  }
  .cl-card-element iframe {
    width: 100% !important;
  }
  /* Input "Titulaire" — iOS zoom déjà résolu par Mobile Foundation (16px) */
  .cl-confirm-field input[type="text"] {
    padding: 12px 14px;
  }
  /* Submit button : pleine largeur + tap target confortable */
  .cl-confirm-submit {
    padding: 16px 18px;
    font-size: 15px;
  }
}

/* Très petits écrans (< 360px, vieux iPhone SE/5) */
@media (max-width: 360px) {
  .cl-confirm-card-wrap { padding: 0 12px; }
  .cl-confirm-card-form { padding: 16px 12px; }
  .cl-card-element { padding: 12px 10px; }
}

/* ====================================================
   ADMIN — Modal "Signaler dégât" (Étape 4.6)
   ==================================================== */
.cl-admin-damage-btn {
  background: #fff3cd !important;
  border-color: #ffc107 !important;
  color: #856404 !important;
  font-weight: 600 !important;
}
.cl-admin-damage-btn:hover {
  background: #ffe69c !important;
  border-color: #ffb900 !important;
}

.cl-damage-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cl-damage-modal-panel {
  background: #fff;
  border-radius: 12px;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}
.cl-damage-modal-header {
  background: #0E2535;
  color: #fff;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cl-damage-modal-header h2 {
  color: #fff;
  font-size: 17px;
  margin: 0;
  font-family: Georgia, serif;
}
.cl-damage-modal-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.cl-damage-modal-body {
  padding: 20px;
  overflow-y: auto;
}
.cl-damage-modal-ok {
  background: #e8f5e9;
  border: 1px solid #2e7d32;
  color: #2e7d32;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.cl-damage-modal-warn {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
#cl-damage-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 14px;
  color: #0E2535;
}
#cl-damage-form input[type="number"],
#cl-damage-form input[type="file"],
#cl-damage-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 14px;
  box-sizing: border-box;
}
#cl-damage-form textarea { resize: vertical; min-height: 80px; }
#cl-damage-form small {
  display: block;
  color: #666;
  font-size: 12px;
  margin: -10px 0 14px 0;
}
.cl-damage-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.cl-damage-result {
  padding: 16px;
}
.cl-damage-result-ok {
  background: #e8f5e9;
  border-radius: 8px;
  padding: 14px;
  color: #1b5e20;
}
.cl-damage-result-warn {
  background: #fff3cd;
  border-radius: 8px;
  padding: 14px;
  color: #856404;
}
.cl-damage-result-error {
  background: #fdecea;
  border-radius: 8px;
  padding: 14px;
  color: #c0392b;
}
.cl-damage-result h3 { margin: 0 0 8px 0; }
.cl-damage-result code,
.cl-damage-result pre {
  font-family: monospace;
  font-size: 11px;
  word-break: break-all;
  background: rgba(0,0,0,0.05);
  padding: 2px 6px;
  border-radius: 4px;
}
.cl-damage-result a { color: #0E2535; text-decoration: underline; word-break: break-all; }

/* ============================================================
   MOBILE FOUNDATION (best-practices universelles — ajout 14/05)
   Patch global qui couvre les bugs structurels mobile sans toucher au design.
   ============================================================ */

/* 1. PROTECTION OVERFLOW HORIZONTAL
   Empêche un scroll horizontal indésirable si un élément déborde (image, code, etc.).
   Sans masquer le contenu : le viewport mobile est strictement contraint à 100%. */
html, body {
  max-width: 100vw;
  overflow-x: clip; /* clip > hidden : preserve position:sticky des descendants */
}

/* 2. iOS ZOOM PREVENTION
   iOS Safari zoome automatiquement quand un input < 16px est focused.
   On force 16px min sur tous les inputs/textarea/select en viewport mobile.
   Le `font-size: max(16px, 1em)` préserve les tailles plus grandes existantes. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}

/* 3. TAP TARGETS MIN 44×44px (Apple HIG / Material Design)
   Sur mobile, on garantit que tous les boutons cliquables ont au moins 44px de zone tactile.
   On vise les composants custom qui pourraient avoir des paddings serrés. */
@media (max-width: 768px) {
  .cl-btn-gold,
  .cl-btn-navy,
  .cl-btn-ghost,
  .cl-cta-btns a,
  .cl-confirm-cta,
  .cl-pending-pay-cta,
  button.cl-chat-submit,
  .cl-chat-bubble,
  .clc-header-cart,
  .ct-header-trigger {
    min-height: 44px;
  }
  /* Liens du menu mobile : agrandir la zone tactile */
  .mobile-menu .ct-menu-link {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* 4. GRIDS DEFENSIVES
   Pour les grids qui pourraient échapper à la cascade des media queries existantes,
   on force 1 colonne en < 480px. Les sites avec grids 3-4 colonnes sans breakpoint
   spécifique seront ramenés à 1 col. */
@media (max-width: 480px) {
  .cl-occ-grid,
  .cl-packs-grid,
  .cl-about-grid,
  .cl-about-values,
  .cl-confirm-card-reassure,
  .cl-trust-cards {
    grid-template-columns: 1fr !important;
  }
  /* Stack vertical pour les flex rows qui débordent */
  .cl-cta-btns,
  .cl-confirm-ctas {
    flex-direction: column;
  }
  .cl-cta-btns > a,
  .cl-confirm-ctas > a {
    width: 100%;
    text-align: center;
  }
}

/* 5. IMAGES & MÉDIAS responsive par défaut */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* 6. HEADER MOBILE : ajouts d'espacement entre l'icône panier (injectée par JS) et le bouton menu */
@media (max-width: 1023px) {
  header#header.ct-header [data-device="mobile"] [data-column="end"] .clc-header-cart {
    margin-right: 4px;
  }
  header#header.ct-header [data-device="mobile"] [data-column="end"] .ct-header-trigger {
    margin-left: 4px;
  }
}

/* 7. POLICES BODY : 15-16px min pour lecture confortable mobile */
@media (max-width: 480px) {
  body { font-size: 15px; }
  /* h1/h2/h3 restent sur leur clamp() existant */
}

/* 8. SAFE AREA iOS (notch iPhone X+) — sticky bars utilisent déjà env(safe-area-inset-bottom)
   mais on s'assure que le padding-bottom du body inclut une marge si nécessaire */
@supports (padding: env(safe-area-inset-bottom)) {
  /* géré au cas par cas dans les composants stickys */
}

/* 9. WORD-WRAP DEFENSIF
   Empêche les longs mots (URLs, emails) de casser le layout en débordant */
@media (max-width: 480px) {
  p, li, td, dd, dt, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* =====================================================================
   MOBILE UX SPRINT (22/05/2026) — 7 fixes consolidés Kevin
   =====================================================================
   Principe : même contenu que desktop, layout adapté mobile (1 col, full
   bleed, tap targets ≥44px, sticky CTA vs hover).
   ===================================================================== */

/* --- #1 — FOOTER FULL-BLEED ALIGNÉ AVEC HEADER/CONTENT ---
   Cause : --theme-container-edge-spacing: 90vw sur Blocksy laissait 5% de
   crème de chaque côté du header/content mais pas du footer.
   Fix : 100vw sur mobile pour tout aligner sur la même largeur. */
@media (max-width: 768px) {
  :root {
    --theme-container-edge-spacing: 100vw !important;
  }
  header#header.ct-header > .ct-container,
  .ct-footer > .ct-container,
  .ct-footer [data-row] > .ct-container {
    max-width: 100% !important;
    padding-inline: 16px !important;
  }
}

/* --- #2 — CHAT MODAL MOBILE : safe-area iOS + sticky header + croix visible ---
   Le modal est 100vh full-screen (standard Intercom/Crisp pour clavier).
   Le safe-area est appliqué DANS le header (pas sur le modal, sinon
   le header se retrouve au-dessus de la viewport iOS).
   Croix : cercle blanc 44px bien visible. */
@media (max-width: 768px) {
  .cl-chat-modal {
    /* dvh = dynamic viewport height : tient compte de la barre Safari iOS */
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .cl-chat-modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    /* Le header pousse son contenu sous la notch via padding-top safe-area */
    padding-top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
  }
  .cl-chat-modal-close {
    background: rgba(255,255,255,0.18) !important;
    border-radius: 50% !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    color: #fff !important;
  }
  .cl-chat-modal-close svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.5 !important;
  }
}
/* Cache la bulle quand le modal est ouvert (toggle via JS class) */
body.cl-chat-active .cl-chat-bubble {
  display: none !important;
}

/* --- #3 — MENU BURGER : couleur charte + retirer Je réserve/cart redondants ---
   Le panel offcanvas Blocksy était en beige (--theme-palette-color-1 default).
   On force le navy charte + texte blanc. */
#offcanvas,
#offcanvas .ct-panel-inner,
#offcanvas .ct-panel-content,
#offcanvas .ct-panel-content-inner {
  background: var(--cl-navy-deep, #0E2535) !important;
  color: var(--cl-white, #fff) !important;
}
#offcanvas .ct-menu-link,
#offcanvas .ct-toggle-close,
#offcanvas a {
  color: var(--cl-white, #fff) !important;
}
#offcanvas .ct-menu-link:hover,
#offcanvas .ct-menu-link:focus {
  color: var(--cl-gold-lt, #F0B93A) !important;
}
#offcanvas li.menu-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Retire les éléments redondants (cart + CTA Je réserve déjà dans le header sticky) */
#offcanvas .clc-header-cart,
#offcanvas .ct-header-cta,
#offcanvas a.cl-nav-cta,
#offcanvas [data-id="cart"],
#offcanvas [data-id="text"] {
  display: none !important;
}

/* --- #4 — CATALOGUE (/catalogue/, /animations/, etc.) : cards lisibles mobile ---
   STRUCTURE RÉELLE des cards : pas d'image (jamais), juste
   <vrilistitemname> + <vrilistitemcat> + <vrilistdivcost> + <vrilistgoonlist>
   Cause des cartes vides : .vri-list-item-cont (prix + CTA) en position absolute
   desktop, invisible/clippé sur mobile. Fix : tout en flex column. */
@media (max-width: 768px) {
  /* Conteneur principal du listing : empêche overflow horizontal */
  .vrilistcontainer {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    overflow-x: hidden !important;
    padding: 0 4px !important;
  }
  /* Carte : flex column, hauteur auto, padding 18px, contenu complet visible */
  .vri-list-item-block {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px !important;
    margin: 0 !important;
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(14,37,53,0.06) !important;
    border: 1px solid rgba(14,37,53,0.04) !important;
    position: relative !important;
  }
  .vri-list-item-inner,
  .vri-list-item-cont,
  .vri-list-item-descr {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  .vrilistitemcat {
    display: block !important;
    color: var(--cl-gold, #D4961A) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 6px !important;
  }
  .vrilistitemname {
    display: block !important;
    font-family: var(--cl-serif, Georgia, serif) !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    color: var(--cl-text, #1C2B35) !important;
    margin-bottom: 12px !important;
  }
  .vrilistcostdivcont,
  .vrilistdivcost {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin: 10px 0 14px !important;
  }
  .vriliststartfrom {
    color: var(--cl-text-mid, #4A5E6A) !important;
    font-size: 13px !important;
  }
  .item_cost {
    color: var(--cl-gold, #D4961A) !important;
    font-family: var(--cl-serif, Georgia, serif) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
  .vriliststartfromtext {
    color: var(--cl-text-mid, #4A5E6A) !important;
    font-size: 12.5px !important;
  }
  /* CTA "Voir les détails" : bouton gold pleine largeur */
  .vrilistgoonlist {
    display: block !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
  .vrilistgoonlist a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: var(--cl-gold, #D4961A) !important;
    color: var(--cl-navy-deep, #0E2535) !important;
    padding: 12px 18px !important;
    border-radius: 99px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    min-height: 44px !important;
    box-shadow: 0 2px 8px rgba(212,150,26,0.25) !important;
  }
  .vrilistgoonlist a::after {
    content: ' →';
  }
  /* Masque les chevrons carousel éventuels qui débordent à droite */
  .slick-arrow, .slick-prev, .slick-next,
  .swiper-button-prev, .swiper-button-next,
  .vri-carousel-arrow {
    display: none !important;
  }
  /* Conteneur principal de page (sécurité globale anti-overflow) */
  .vri-page-content,
  main, .site-main, #content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* --- #5 — DATEPICKER HERO : retire indicateurs iOS + fix hauteur HEURE ---
   iOS Safari ajoute un petit indicateur sur les inputs readonly (icône
   broken-image apparente) → on retire via appearance:none + custom calendrier.
   "18h00" coupé = select trop petit → hauteur + line-height augmentés. */
@media (max-width: 768px) {
  /* Champs date : retire les artefacts iOS Safari (indicateur readonly) */
  .cl-hero-search-field input[type="text"],
  .cl-hero-search-field input[type="date"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    color: var(--cl-white, #fff) !important;
    -webkit-text-fill-color: var(--cl-white, #fff) !important;
    background: rgba(255,255,255,0.08) !important;
    font-size: 15px !important;
    padding: 14px 40px 14px 14px !important; /* padding-right pour notre icône calendrier */
    min-height: 52px !important;
    height: 52px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    cursor: pointer !important;
    /* Calendrier SVG inline tout encodé %20 (iOS Safari strict sur espaces) */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23F0B93A'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'%20ry='2'/%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='6'/%3E%3Cline%20x1='8'%20y1='2'%20x2='8'%20y2='6'/%3E%3Cline%20x1='3'%20y1='10'%20x2='21'%20y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px 20px !important;
  }
  /* Retire les clear/cancel buttons iOS Safari */
  .cl-hero-search-field input[type="text"]::-webkit-search-cancel-button,
  .cl-hero-search-field input[type="text"]::-webkit-clear-button,
  .cl-hero-search-field input[type="text"]::-webkit-inner-spin-button {
    display: none !important;
    -webkit-appearance: none !important;
  }
  .cl-hero-search-field input::placeholder {
    color: rgba(255,255,255,0.55) !important;
    font-style: italic !important;
  }
  /* HEURE select : hauteur suffisante + texte centré pas coupé */
  .cl-hero-search-field--time select,
  .cl-hero-search-field--time {
    height: 52px !important;
    min-height: 52px !important;
  }
  .cl-hero-search-field--time select {
    padding: 8px 28px 8px 14px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    height: 52px !important;
    min-height: 52px !important;
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    /* Chevron custom blanc (espaces encodés %20) */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.7'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 16px 16px !important;
  }
  /* Labels DU/AU/HEURE bien lisibles */
  .cl-hero-search-field label {
    color: rgba(255,255,255,0.72) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block !important;
  }
}

/* --- #6 — PANIER MOBILE : TOTAL en ligne + icône poubelle dans l'écran ---
   "TOTAL À PAYER" se cassait lettre par lettre car flex-shrink défaut
   sur .cl-pending-total-label + valeur 26px serif dominait l'espace.
   Fix : label nowrap + flex-shrink 0, valeur shrink autorisé. */
@media (max-width: 768px) {
  .cl-pending-total-label {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    flex: 0 1 auto !important;
    min-width: max-content !important;
    font-size: 12px !important;
  }
  .cl-pending-total-value {
    flex: 1 1 auto !important;
    text-align: right !important;
    font-size: 22px !important;
  }
  .cl-pending-total-row {
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  /* Section "RÉCUPÉRATION/RESTITUTION" : padding plus compact mobile */
  .cl-pending-summary-section {
    padding: 14px 16px !important;
  }
  .cl-pending-summary {
    max-width: 100% !important;
    margin: 0 12px 16px !important;
  }
  /* Icône delete/poubelle native VRI : reste dans l'écran, tap target 44px */
  .vri-ord-item-block .vri-ord-item-delete,
  .vri-item-delete,
  .vikrentitemssummarydiv .vri-item-delete,
  a[href*="emptycart"],
  a[onclick*="emptyOrder"],
  a[onclick*="removeFromCart"] {
    position: relative !important;
    right: 8px !important;
    margin-right: 4px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
}

/* --- #7 — "Je réserve" CTA : visible mobile hors burger (déjà géré par #3) ---
   Le bouton Je réserve ne doit pas apparaître DANS le panel offcanvas
   (#3 le masque). S'il existe un CTA dans le header mobile lui-même,
   on le rend visible et stylé. */
@media (max-width: 768px) {
  /* CTA visible dans le header mobile (pas dans offcanvas) */
  header#header.ct-header [data-device="mobile"] a.cl-nav-cta,
  header#header.ct-header [data-device="mobile"] .ct-header-cta {
    display: inline-block !important;
    background: var(--cl-gold, #D4961A) !important;
    color: var(--cl-navy-deep, #0E2535) !important;
    padding: 8px 14px !important;
    border-radius: 99px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-right: 8px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
}