/* Hauteur du menu sticky : ajuste la valeur si besoin 
Nomination des couleurs : https://www.color-name.com/hex/

*/
:root {
    --sticky-offset: 105px;
    --gueb-color-primary: #0B6D5D;
    --gueb-color-secondary: #760131;
    --gueb-color-text: #14010A;
    --gueb-color-accent: #F9C1BB;
    --gueb-color-pourpre800: #760131;
    --gueb-color-primary800: #0B6D5D;
    --gueb-color-primary500: #1C8170;
    --gueb-color-primary300: #8ABCB3;
    --gueb-color-primary200: #CDE0DC;
    --gueb-color-primary100: #EBF3F1;
    --gueb-color-accent500: #F9C1BB;
    --gueb-color-accent300: #F6D3D1;
    --gueb-color-accent100: #F3EAEB;
    --gueb-color-secondary500: #F2C063;
    --gueb-color-secondary300: #F5D292;
    --gueb-color-secondary200: #F8E7CB;
    --gueb-color-secondary100: #FCF5EA;
    --gueb-color-white100: #FFFFFF;
    --gueb-color-white200: #F9F8F6;
    --gueb-color-noir: #14010A;
    --gueb-color-textmuted: #5C5561;
    --gueb-color-mauve: #C899AD;
    --font-main: Roboto, sans-serif;
    --font-stylise: "Literata", serif;
}

/* Lisse le scroll natif */
html { scroll-behavior: smooth; }

/* Ajoute une marge de scroll à TOUT élément ciblé par un #id */
[id] { scroll-margin-top: var(--sticky-offset); }

html,body{overflow-x:hidden;}
.elementor-widget-text-editor p:last-child{margin-bottom:0;    margin-block-end: 0 !important;}
.elementor-widget-text-editor ul{margin-bottom:15px;}
h2.elementor-heading-title big{background-color:var(--middle-green-yellow) ; color:var(--white) ; border-radius:100px; padding:5px 10px;font-size: 25px;position: relative;
    top: -4px; font-weight: 600}

/* Header */
.entete.menu-open{background-color:var(--gueb-color-white200) ;}

/* Design UIKIT */
.uk-dotnav>*>*{width:6px !important; height:6px !important;border:none !important; background-color:var(--cookies-and-cream) !important}
.uk-dotnav>.uk-active>*{background-color:var(--middle-green-yellow) !important}
[type=button], [type=submit], button{border-color:var(--middle-green-yellow) ; color:var(--middle-green-yellow) ; border-radius:100px;}
[type=button]:hover, [type=submit]:hover, button:hover{color:var(--white) ;background-color:var(--middle-green-yellow)  }

/* ==========================================================================
   OT GUEBWILLER — Moteur SIT Bridge / Liste / Cartes
   Intégration du design Figma « Guebwiller - Refonte Web » (node 4092-17814)
   sur le markup réel du plugin BridgeWP (UIkit) :
   https://tourisme-guebwiller.dev.dnconsultants.fr/preparer-son-sejour/hebergements/

   Pré-requis : les variables :root du thème (--gueb-color-*, --font-main,
   --font-stylise, --sticky-offset) doivent être chargées avant ce fichier.

   NB : la maquette Figma utilise Nunito en police de labeur ; ici on mappe
   sur --font-main (Roboto) et --font-stylise (Literata) du thème.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens locaux (radius / espacements issus de Figma, non présents en :root)
   -------------------------------------------------------------------------- */
#ListeBridge {
  --gueb-radius-s: 24px;      /* radius/radius-s   */
  --gueb-radius-m: 32px;      /* radius/radius-m   */
  --gueb-radius-xl: 80px;     /* radius/radius-xl — angle haut-droit des cartes */
  --gueb-radius-pill: 999px;  /* radius/radius-100 */
  --gueb-sp-3xs: 4px;
  --gueb-sp-2xs: 8px;
  --gueb-sp-xs: 12px;
  --gueb-sp-s: 16px;
  --gueb-sp-m: 24px;
  --gueb-tracking-label: 0.4px;

  /* Icônes du design (exports Figma inlinés) */
  --gueb-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 2.5C13.2217 2.5 15.8333 5.11167 15.8333 8.33333C15.8333 10.2493 14.7863 11.7103 13.3569 13.1991C13.003 13.5677 12.6356 13.929 12.26 14.2985C11.8868 14.6655 11.503 15.0432 11.1401 15.4256C10.7394 15.848 10.3495 16.2928 10 16.7651C9.65047 16.2928 9.26064 15.848 8.85986 15.4256C8.49697 15.0432 8.11566 14.668 7.74251 14.3009C7.36686 13.9315 6.99701 13.5677 6.64307 13.1991C5.21374 11.7103 4.16667 10.2493 4.16667 8.33333C4.16667 5.11167 6.77834 2.5 10 2.5ZM14.5597 14.3538C16.047 12.8047 17.5 10.9325 17.5 8.33333C17.5 4.1912 14.1421 0.833333 10 0.833333C5.85786 0.833333 2.5 4.1912 2.5 8.33333C2.5 10.9325 3.95297 12.8047 5.44027 14.3538C5.79284 14.7211 6.15652 15.0787 6.50849 15.4248C6.53034 15.4463 6.55214 15.4677 6.57389 15.4891C6.94936 15.8584 7.31039 16.2146 7.65055 16.5731C8.33444 17.2938 8.8929 17.9827 9.25456 18.7061C9.39572 18.9884 9.68436 19.1667 10 19.1667C10.3156 19.1667 10.6043 18.9884 10.7454 18.7061C11.1071 17.9827 11.6656 17.2938 12.3494 16.5731C12.6896 16.2146 13.0506 15.8584 13.4261 15.4891C13.4479 15.4677 13.4697 15.4463 13.4915 15.4248C13.8435 15.0787 14.2072 14.7211 14.5597 14.3538Z' fill='%231C8170'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 2.5C13.2217 2.5 15.8333 5.11167 15.8333 8.33333C15.8333 10.2493 14.7863 11.7103 13.3569 13.1991C13.003 13.5677 12.6356 13.929 12.26 14.2985C11.8868 14.6655 11.503 15.0432 11.1401 15.4256C10.7394 15.848 10.3495 16.2928 10 16.7651C9.65047 16.2928 9.26064 15.848 8.85986 15.4256C8.49697 15.0432 8.11566 14.668 7.74251 14.3009C7.36686 13.9315 6.99701 13.5677 6.64307 13.1991C5.21374 11.7103 4.16667 10.2493 4.16667 8.33333C4.16667 5.11167 6.77834 2.5 10 2.5ZM13.3333 7.91667C13.3333 9.75761 11.8409 11.25 10 11.25C8.15905 11.25 6.66667 9.75761 6.66667 7.91667C6.66667 6.07572 8.15905 4.58333 10 4.58333C11.8409 4.58333 13.3333 6.07572 13.3333 7.91667Z' fill='%231C8170'/%3E%3C/svg%3E");
  --gueb-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8.33333L8.95243 12.0878C9.53099 12.6374 10.469 12.6374 11.0476 12.0878L15 8.33333' stroke='%23760131' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Fond général de la zone liste (white-200 dans la maquette).
   À activer si la section Elementor n'a pas déjà ce fond :
#ListeBridge { background: var(--gueb-color-white200); }
*/

/* --------------------------------------------------------------------------
   1. SIDEBAR MOTEUR — carte blanche arrondie
   -------------------------------------------------------------------------- */

/* Compteur de résultats (au-dessus du moteur) */
#ListeBridge .totals.bridge-totals-side {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--gueb-tracking-label);
  color: var(--gueb-color-pourpre800);
  margin-bottom: var(--gueb-sp-xs);
}

/* La tuile UIkit devient la carte blanche du design */
#ListeBridge .bridge-zone-moteur {
  background: var(--gueb-color-white100);
  box-shadow: none;
  border-radius: var(--gueb-radius-m);
  padding: var(--gueb-sp-m);
}

/* Titre du moteur (« Rechercher » / « Des préférences ? ») */
#ListeBridge .bridge-moteur-titre {
  font-family: var(--font-stylise);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gueb-color-primary800);
  margin: 0 0 var(--gueb-sp-m);
  padding-bottom: var(--gueb-sp-m);
  border-bottom: 1px dashed var(--gueb-color-primary300); /* séparateur pointillé Figma */
}

/* Labels de section (« FILTRES RAPIDES », « CLASSEMENT »…) :
   Literata Medium Italic, uppercase, pourpre */
#ListeBridge .moteur-section-label {
  font-family: var(--font-stylise);
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: var(--gueb-tracking-label);
  text-transform: uppercase;
  color: var(--gueb-color-pourpre800);
  margin: 0 0 var(--gueb-sp-xs);
}

/* Sous-labels : on neutralise la ligne UIkit (uk-heading-line) */
#ListeBridge .moteur-subsection-label.uk-heading-line > :first-child {
  font-size: 12px;
}
#ListeBridge .moteur-subsection-label.uk-heading-line > ::before,
#ListeBridge .moteur-subsection-label.uk-heading-line > ::after {
  border-color: var(--gueb-color-primary200);
}

#ListeBridge .bridge-moteur-section {
  margin-top: var(--gueb-sp-m);
}

/* --------------------------------------------------------------------------
   2. FILTRES CHECKBOX → pastilles (tags) cliquables
   -------------------------------------------------------------------------- */

#ListeBridge .bridge-filter-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gueb-sp-2xs);
}

/* La checkbox native est masquée mais reste accessible (focus visible) */
#ListeBridge .bridge-filter-checkbox .uk-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Le label devient la pastille — état par défaut : crème (secondary-100) */
#ListeBridge .bridge-filter-checkbox label {
  display: inline-flex !important;   /* écrase uk-display-block */
  width: auto !important;            /* écrase uk-width-1-1 */
  align-items: center;
  gap: var(--gueb-sp-3xs);
  min-height: 32px;
  padding: var(--gueb-sp-3xs) var(--gueb-sp-s);
  border-radius: var(--gueb-radius-pill);
  background: var(--gueb-color-secondary100);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--gueb-tracking-label);
  color: var(--gueb-color-pourpre800);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin: 0;
}
#ListeBridge .bridge-filter-checkbox label:hover {
  background: var(--gueb-color-secondary200);
}
#ListeBridge .bridge-filter-checkbox label:focus-within {
  outline: 2px solid var(--gueb-color-primary500);
  outline-offset: 2px;
}

/* État actif (classe posée par bridge-moteur.js) */
#ListeBridge .bridge-filter-checkbox label.bridge-active {
  background: var(--gueb-color-pourpre800);
  color: var(--gueb-color-white100);
}

#ListeBridge .bridge-filter-checkbox .bridge-label {
  white-space: nowrap;
}

/* Variante « filtres rapides » (pastilles vertes du design) —
   appliquée ici à la section Prestations (id 121), à ajuster selon config */
#ListeBridge .moteur-section-121 .bridge-filter-checkbox label {
  background: var(--gueb-color-primary100);
  color: var(--gueb-color-primary800);
}
#ListeBridge .moteur-section-121 .bridge-filter-checkbox label:hover {
  background: var(--gueb-color-primary200);
}
#ListeBridge .moteur-section-121 .bridge-filter-checkbox label.bridge-active {
  background: var(--gueb-color-primary800);
  color: var(--gueb-color-white100);
}

/* --------------------------------------------------------------------------
   3. DATES DE SÉJOUR (calendriers) + BUDGET (range)
   -------------------------------------------------------------------------- */

#ListeBridge .bridge-calendar input[type="text"] {
  width: 100%;
  min-height: 42px;
  padding: var(--gueb-sp-2xs) var(--gueb-sp-s);
  border: 1px solid var(--gueb-color-primary200);
  border-radius: var(--gueb-radius-pill);
  background: var(--gueb-color-white100);
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--gueb-color-text);
}
#ListeBridge .bridge-calendar input[type="text"]::placeholder {
  color: var(--gueb-color-textmuted);
}
#ListeBridge .bridge-calendar input[type="text"]:focus {
  outline: none;
  border-color: var(--gueb-color-primary500);
}

/* Sliders de budget (uk-range) */
#ListeBridge .uk-range::-webkit-slider-runnable-track {
  background: var(--gueb-color-primary200);
}
#ListeBridge .uk-range::-moz-range-track {
  background: var(--gueb-color-primary200);
}
#ListeBridge .uk-range::-webkit-slider-thumb {
  background: var(--gueb-color-primary800);
  border: none;
}
#ListeBridge .uk-range::-moz-range-thumb {
  background: var(--gueb-color-primary800);
  border: none;
}
#ListeBridge .range_min,
#ListeBridge .range_max {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  color: var(--gueb-color-pourpre800);
}

/* --------------------------------------------------------------------------
   4. BARRE D'OUTILS — tris + bascule Liste / Carte
   -------------------------------------------------------------------------- */

#ListeBridge .bridge-toolbar {
  margin-bottom: var(--gueb-sp-m);
}

/* Libellé « Trier » */
#ListeBridge .bridge-sort-bar h5 {
  font-family: var(--font-stylise);
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: var(--gueb-tracking-label);
  text-transform: uppercase;
  color: var(--gueb-color-pourpre800);
  margin: 0;
  line-height: 32px;
}

/* Boutons de tri : pastilles roses clair (accent-100) avec chevron */
#ListeBridge .bridge-sort-bar .bridge-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gueb-sp-3xs);
  padding: var(--gueb-sp-3xs) var(--gueb-sp-2xs) var(--gueb-sp-3xs) var(--gueb-sp-xs);
  border-radius: var(--gueb-radius-pill);
  background: var(--gueb-color-accent100);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--gueb-color-pourpre800);
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#ListeBridge .bridge-sort-bar .bridge-sort-btn::after {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--gueb-icon-chevron) no-repeat center / contain;
  transition: transform 0.2s ease;
}
#ListeBridge .bridge-sort-bar .bridge-sort-btn:hover {
  background: var(--gueb-color-accent300);
}
#ListeBridge .bridge-sort-bar .bridge-sort-btn.active {
  background: var(--gueb-color-pourpre800);
  color: var(--gueb-color-white100);
  font-weight: 700;
}
#ListeBridge .bridge-sort-bar .bridge-sort-btn.active::after {
  filter: brightness(0) invert(1); /* chevron blanc sur fond pourpre */
}
#ListeBridge .bridge-sort-bar .bridge-sort-btn[data-sort-direction="asc"]::after {
  transform: rotate(180deg);
}
/* Le chevron FontAwesome injecté par le plugin est remplacé par le nôtre */
#ListeBridge .bridge-sort-bar .bridge-sort-direction {
  display: none !important;
}

/* Bascule Liste / Carte : conteneur pilule + option active pourpre */
#ListeBridge .bridgeListMapSwitcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: var(--gueb-sp-3xs);
  border-radius: var(--gueb-radius-pill);
  background: var(--gueb-color-accent100);
  float: none;
}
#ListeBridge .switcher {
  display: flex;
  justify-content: flex-end;
}
#ListeBridge .bridgeListMapSwitcher > * {
  padding-left: 0; /* neutralise la gouttière uk-subnav */
}
#ListeBridge .bridgeListMapSwitcher > li > a {
  display: block;
  padding: var(--gueb-sp-2xs) var(--gueb-sp-s);
  border-radius: var(--gueb-radius-pill);
  background: transparent;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--gueb-tracking-label);
  text-transform: none;
  color: var(--gueb-color-pourpre800);
  transition: background-color 0.2s ease, color 0.2s ease;
}
#ListeBridge .bridgeListMapSwitcher > li.uk-active > a {
  background: var(--gueb-color-pourpre800);
  color: var(--gueb-color-white100);
}

/* Chips de filtres actifs (injectés par le plugin) */
#ListeBridge .bridgeActiveFiltersDiv:not(:empty) {
  margin-top: var(--gueb-sp-xs);
}
#ListeBridge .bridgeActiveFiltersDiv span,
#ListeBridge .bridgeActiveFiltersDivSection span {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  color: var(--gueb-color-pourpre800);
}

/* --------------------------------------------------------------------------
   5. GRILLE DE CARTES (listeSIT) — gouttière 24px
   -------------------------------------------------------------------------- */

#ListeBridge .listeSIT {
  margin-left: -24px;
}
#ListeBridge .listeSIT > * {
  padding-left: 24px;
}
#ListeBridge .listeSIT > .uk-grid-margin {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   6. CARTE PRODUIT (ficheproduit / cards1)
   Image plein format + dégradé + tag commune + bandeau titre
   -------------------------------------------------------------------------- */

#ListeBridge .ficheproduit .uk-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: 320px;
  border-radius: var(--gueb-radius-s) var(--gueb-radius-xl) var(--gueb-radius-s) var(--gueb-radius-s);
  overflow: hidden;
  background: var(--gueb-color-primary100);
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#ListeBridge .ficheproduit:hover .uk-card {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(20, 1, 10, 0.15);
}

/* Le média (background-cover UIkit) devient le fond plein format */
#ListeBridge .ficheproduit .card-media {
  position: absolute !important; /* écrase uk-position-relative */
  inset: 0;
  height: 100%;
  min-height: 0;
  background-position: center;
  background-size: cover;
}

/* Dégradé de lisibilité (Figma : transparent 40% → noir 80%) */
#ListeBridge .ficheproduit .card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 1, 10, 0) 40%, rgba(20, 1, 10, 0.8) 100%);
  pointer-events: none;
}

/* Tag commune en haut à gauche : pastille blanche + pin vert */
#ListeBridge .ficheproduit .info.info-1 {
  position: absolute;
  top: var(--gueb-sp-s);
  left: var(--gueb-sp-s);
  right: var(--gueb-sp-s);
  z-index: 2;
  background: transparent; /* écrase le fond gris #666 du thème existant */
  padding: 0;
  height: auto;
}
#ListeBridge .ficheproduit .info.info-1 .containerblockSection {
  width: auto !important; /* écrase uk-width-1-1@* pour que la pastille épouse son contenu */
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--gueb-sp-3xs);
  min-height: 32px;
  padding: var(--gueb-sp-3xs) var(--gueb-sp-s) var(--gueb-sp-3xs) var(--gueb-sp-xs);
  border-radius: var(--gueb-radius-pill);
  background: var(--gueb-color-white200);
}
#ListeBridge .ficheproduit .info.info-1 .containerblockSection::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--gueb-icon-pin) no-repeat center / contain;
}
/* On neutralise la grille UIkit interne du bloc */
#ListeBridge .ficheproduit .info.info-1 .blockSection {
  display: inline;
  margin: 0;
}
#ListeBridge .ficheproduit .info.info-1 .itemTextValue {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--gueb-tracking-label);
  color: var(--gueb-color-primary800);
  white-space: nowrap;
}

/* Bandeau titre en bas de carte : fond primary-200, angle haut-droit arrondi */
#ListeBridge .ficheproduit .bridge-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: var(--gueb-sp-s) !important; /* écrase uk-padding-small */
  border-radius: 0 var(--gueb-radius-s) 0 0;
  background: var(--gueb-color-primary200);
  transition: background-color 0.25s ease;
}
#ListeBridge .ficheproduit:hover .bridge-body {
  background: var(--gueb-color-primary100);
}
#ListeBridge .ficheproduit .titre-de-la-fiche h2 {
  margin: 0;
}
#ListeBridge .ficheproduit .titre-de-la-fiche .blockSection {
  margin: 0;
}
#ListeBridge .ficheproduit .titre-de-la-fiche .itemTextValue {
  font-family: var(--font-stylise);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gueb-color-primary800);
}

/* Le lien couvrant reste au-dessus de tout */
#ListeBridge .ficheproduit .bridge_link_fiche {
  z-index: 3;
}

/* --------------------------------------------------------------------------
   7. PAGINATION — cercles 32px
   -------------------------------------------------------------------------- */

#ListeBridge .bridge-pagination {
  gap: var(--gueb-sp-2xs);
  align-items: center;
  padding: 20px var(--gueb-sp-2xs);
  margin: 0;
}
#ListeBridge .bridge-pagination > * {
  padding-left: 0;
}
#ListeBridge .bridge-pagination > li > a,
#ListeBridge .bridge-pagination > li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--gueb-radius-pill);
  background: var(--gueb-color-accent100);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--gueb-tracking-label);
  color: var(--gueb-color-pourpre800);
  transition: background-color 0.2s ease, color 0.2s ease;
}
#ListeBridge .bridge-pagination > li > a:hover {
  background: var(--gueb-color-accent300);
  color: var(--gueb-color-pourpre800);
}
#ListeBridge .bridge-pagination > li.uk-active > a {
  background: var(--gueb-color-pourpre800);
  color: var(--gueb-color-accent100);
}
/* Points de suspension et chevrons prev/next : sans fond */
#ListeBridge .bridge-pagination > li.nolink > span,
#ListeBridge .bridge-pagination > li > a.bridge-prev,
#ListeBridge .bridge-pagination > li > a.bridge-next,
#ListeBridge .bridge-pagination > li > a.bridge-next-ajax {
  background: transparent;
}
#ListeBridge .bridge-pagination > li.uk-disabled > a {
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   8. LOADER
   -------------------------------------------------------------------------- */

#ListeBridge .lds-ring div {
  border-color: var(--gueb-color-primary800) transparent transparent transparent;
}

/* --------------------------------------------------------------------------
   9. MOBILE — barre Carte / Trier / Filtrer + off-canvas
   -------------------------------------------------------------------------- */

#ListeBridge .moteur-mobile .uk-button-default {
  border: none;
  border-radius: var(--gueb-radius-pill);
  background: var(--gueb-color-accent100);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--gueb-tracking-label);
  text-transform: none;
  color: var(--gueb-color-pourpre800);
}
#ListeBridge .moteur-mobile .uk-button-default:hover,
#ListeBridge .moteur-mobile .uk-button-default:active {
  background: var(--gueb-color-accent300);
  color: var(--gueb-color-pourpre800);
}

/* Off-canvas moteur mobile : mêmes codes que la sidebar desktop */
.off-canvas-moteur-mobile .uk-offcanvas-bar {
  background: var(--gueb-color-white200);
  color: var(--gueb-color-text);
}
.off-canvas-moteur-mobile .uk-offcanvas-close {
  color: var(--gueb-color-pourpre800);
}

/* Sur mobile, cartes un peu moins hautes */
@media (max-width: 639px) {
  #ListeBridge .ficheproduit .uk-card {
    height: 280px;
    border-radius: var(--gueb-radius-s) 64px var(--gueb-radius-s) var(--gueb-radius-s);
  }
  #ListeBridge .ficheproduit .titre-de-la-fiche .itemTextValue {
    font-size: 16px;
  }
}


.bridge-fiche {
  --gueb-radius-xs: 16px;     /* radius/radius-xs */
  --gueb-radius-s: 24px;      /* radius/radius-s  */
  --gueb-radius-m: 32px;      /* radius/radius-m  */
  --gueb-radius-l: 64px;      /* radius/radius-l — angle haut-droit des images */
  --gueb-radius-pill: 999px;
  --gueb-sp-3xs: 4px;
  --gueb-sp-2xs: 8px;
  --gueb-sp-xs: 12px;
  --gueb-sp-s: 16px;
  --gueb-sp-m: 24px;
  --gueb-sp-l: 32px;
  --gueb-tracking-label: 0.4px;

  /* Icônes du design (exports Figma) */
  --gueb-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 14.5833H10.0083M6.83333 18.3333H13.1667C14.1001 18.3333 14.5668 18.3333 14.9233 18.1517C15.2369 17.9919 15.4919 17.7369 15.6517 17.4233C15.8333 17.0668 15.8333 16.6001 15.8333 15.6667V4.33333C15.8333 3.39991 15.8333 2.9332 15.6517 2.57668C15.4919 2.26308 15.2369 2.00811 14.9233 1.84832C14.5668 1.66667 14.1001 1.66667 13.1667 1.66667H6.83333C5.89991 1.66667 5.4332 1.66667 5.07668 1.84832C4.76308 2.00811 4.50811 2.26308 4.34832 2.57668C4.16667 2.9332 4.16667 3.39991 4.16667 4.33333V15.6667C4.16667 16.6001 4.16667 17.0668 4.34832 17.4233C4.50811 17.7369 4.76308 17.9919 5.07668 18.1517C5.4332 18.3333 5.89991 18.3333 6.83333 18.3333ZM10.4167 14.5833C10.4167 14.8135 10.2301 15 10 15C9.76988 15 9.58333 14.8135 9.58333 14.5833C9.58333 14.3532 9.76988 14.1667 10 14.1667C10.2301 14.1667 10.4167 14.3532 10.4167 14.5833Z' stroke='%230B6D5D' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --gueb-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 1.66667C12.0844 3.94863 13.269 6.91003 13.3333 10C13.269 13.09 12.0844 16.0514 10 18.3333M10 1.66667C7.9156 3.94863 6.73104 6.91003 6.66667 10C6.73104 13.09 7.9156 16.0514 10 18.3333M10 1.66667C5.39763 1.66667 1.66667 5.39763 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333M10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333M2.08335 7.5H17.9167M2.08333 12.5H17.9167' stroke='%230B6D5D' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --gueb-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2.81641 12H20.6465M14.9507 19L20.2362 13.4666C21.0098 12.6566 21.0098 11.3434 20.2362 10.5334L14.9507 5' stroke='%23760131' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1. EN-TÊTE DE FICHE — titre + pictogrammes
   -------------------------------------------------------------------------- */

.bridge-fiche .bridge-titre-fiche {
  font-family: var(--font-stylise);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gueb-color-primary500);
  margin: 0 0 var(--gueb-sp-xs);
}
.bridge-fiche .bridge-titre-fiche .blockSection {
  margin: 0;
}
/* Le span générique .itemTextValue (16px) ne doit pas écraser le H1 */
.bridge-fiche .bridge-titre-fiche .itemTextValue {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* Pictogrammes (langues, labels…) : bulles blanches rondes */
.bridge-fiche .pictogrammes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gueb-sp-s);
  margin: var(--gueb-sp-s) 0 0;
}
.bridge-fiche .pictogrammes .containerblockSection {
  width: auto !important;
  display: inline-flex;
  gap: var(--gueb-sp-s);
}
.bridge-fiche .pictogrammes .blockItem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gueb-color-white100);
  overflow: hidden;
}
.bridge-fiche .pictogrammes img {
  height: 26px !important;
  width: auto;
  border-radius: 50%;
}

/* Bloc « infos supplémentaires » (grille de vignettes au-dessus du titre).
   Il duplique la galerie #galerie — décommenter pour le masquer :
.bridge-fiche .infos-supplementaires-1 { display: none; }
*/
.bridge-fiche .infos-supplementaires-1 .uk-cover-container {
  border-radius: var(--gueb-radius-xs);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. GALERIE — grande image + 2 vignettes, angles Figma
   -------------------------------------------------------------------------- */

.bridge-fiche #galerie > [uk-grid] {
  margin-left: -16px; /* gouttière 16px (Figma) au lieu de uk-grid-medium */
}
.bridge-fiche #galerie > [uk-grid] > * {
  padding-left: 16px;
}
.bridge-fiche #galerie a {
  display: block;
  overflow: hidden;
  border-radius: var(--gueb-radius-xs) var(--gueb-radius-l) var(--gueb-radius-xs) var(--gueb-radius-xs);
}
.bridge-fiche #galerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.bridge-fiche #galerie a:hover img {
  transform: scale(1.03);
}
/* Hauteurs : 400px au total, vignettes empilées à droite */
.bridge-fiche #galerie .uk-width-2-3 a {
  height: 400px;
}
.bridge-fiche #galerie .uk-width-1-3 {
  gap: var(--gueb-sp-s);
}
.bridge-fiche #galerie .uk-width-1-3 a {
  height: 192px;
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   3. DESCRIPTIF + séparateurs
   -------------------------------------------------------------------------- */

.bridge-fiche #descriptif .itemTextValue {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.3;
  color: var(--gueb-color-noir);
}

/* Tous les séparateurs UIkit deviennent la ligne pointillée du design */
.bridge-fiche .uk-divider-icon {
  background-image: none;
  height: 0;
  border: none;
  border-top: 1px dashed var(--gueb-color-primary300);
  margin: var(--gueb-sp-m) 0;
}

/* --------------------------------------------------------------------------
   4. SOMMAIRE (ancres sticky) → barre d'onglets du design
   -------------------------------------------------------------------------- */

.bridge-fiche .sommaire.uk-navbar-container {
  background: var(--gueb-color-white200);
  border-bottom: 2px solid var(--gueb-color-primary200);
}
.bridge-fiche .sommaire .uk-navbar-nav {
  gap: var(--gueb-sp-m);
}
.bridge-fiche .sommaire .uk-navbar-nav > li > a {
  min-height: 0;
  padding: var(--gueb-sp-xs) 0 var(--gueb-sp-2xs);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--gueb-tracking-label);
  text-transform: none;
  color: var(--gueb-color-pourpre800);
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.bridge-fiche .sommaire .uk-navbar-nav > li > a:hover {
  color: var(--gueb-color-primary800);
}
/* Onglet actif (uk-scrollspy-nav pose .uk-text-bold sur le <li>) */
.bridge-fiche .sommaire .uk-navbar-nav > li.uk-text-bold > a {
  color: var(--gueb-color-primary800);
  border-bottom-color: var(--gueb-color-primary500);
}
/* Le design n'a pas d'icônes dans les onglets */
.bridge-fiche .sommaire .itemIcon {
  display: none;
}

/* --------------------------------------------------------------------------
   5. BLOCS DE CONTENU (custom-block) — titres, listes, tags
   -------------------------------------------------------------------------- */

.bridge-fiche .custom-block {
  margin-top: var(--gueb-sp-l);
}

/* Titres de bloc (Informations pratiques, Prestations, Tarifs…) */
.bridge-fiche .block-label,
.bridge-fiche .block-group-label {
  font-family: var(--font-stylise);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gueb-color-primary800);
  margin: 0 0 var(--gueb-sp-s);
}
.bridge-fiche .block-label .itemIcon,
.bridge-fiche .block-group-label .itemIcon {
  display: none; /* pas d'icônes dans le design */
}

/* Sous-titres (Confort des chambres, Services pratiques…) : H4 Figma */
.bridge-fiche .containerblockSection h4 {
  font-family: var(--font-stylise);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gueb-color-primary800);
  margin: var(--gueb-sp-s) 0 var(--gueb-sp-xs);
}

/* Texte courant + libellés */
.bridge-fiche .itemTextValue {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.3;
  color: var(--gueb-color-noir);
}
.bridge-fiche .itemLabel {
  font-weight: 700;
}

/* Tuiles UIkit → tags crème arrondis du design */
.bridge-fiche .blockSection .uk-tile {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  max-width: 320px;
  padding: var(--gueb-sp-3xs) var(--gueb-sp-s) !important; /* écrase uk-padding-small */
  border-radius: var(--gueb-radius-pill);
  background: var(--gueb-color-secondary100);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--gueb-tracking-label);
  color: var(--gueb-color-pourpre800);
  margin-right: var(--gueb-sp-2xs);
  margin-bottom: var(--gueb-sp-2xs);
}

/* Séparateurs entre blocs */
.bridge-fiche .block-separator {
  margin: var(--gueb-sp-l) 0 0;
}

/* --------------------------------------------------------------------------
   6. TABLEAU DES TARIFS
   -------------------------------------------------------------------------- */

.bridge-fiche .jlei_tarifs {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--gueb-radius-xs);
  overflow: hidden;
  border: 1px solid var(--gueb-color-primary200);
}
.bridge-fiche .jlei_tarifs th[scope="col"] {
  font-family: var(--font-stylise);
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: var(--gueb-tracking-label);
  text-transform: uppercase;
  color: var(--gueb-color-white100);
  background: var(--gueb-color-primary800);
  padding: var(--gueb-sp-xs) var(--gueb-sp-s);
}
.bridge-fiche .jlei_tarifs td,
.bridge-fiche .jlei_tarifs .jlei_tarifs_intit {
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--gueb-color-noir);
  padding: var(--gueb-sp-xs) var(--gueb-sp-s);
  border: none;
}
.bridge-fiche .jlei_tarifs .jlei_tarifs_intit {
  font-weight: 700;
  color: var(--gueb-color-pourpre800);
  text-transform: none;
  font-size: 14px;
}
.bridge-fiche .jlei_tarifs.uk-table-striped tbody tr:nth-of-type(odd) {
  background: var(--gueb-color-secondary100);
  border: none;
}

/* --------------------------------------------------------------------------
   7. ASIDE — carte contact (map + adresse + boutons)
   -------------------------------------------------------------------------- */

.bridge-fiche .bridge-fiche-aside .uk-card {
  border-radius: var(--gueb-radius-m);
  overflow: hidden;
  background: var(--gueb-color-white100);
  box-shadow: none;
}
.bridge-fiche .bridge-fiche-aside .uk-card-body {
  padding: var(--gueb-sp-m);
  text-align: left;
}

/* Titre de la carte */
.bridge-fiche .bridge-fiche-aside .uk-card-body h3 {
  font-family: var(--font-stylise);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gueb-color-primary800);
  margin: 0 0 var(--gueb-sp-xs);
}

/* Adresse : label uppercase du design via ::before */
.bridge-fiche .coordonnees {
  text-align: left;
}
.bridge-fiche .coordonnees::before {
  content: "Adresse";
  display: block;
  font-family: var(--font-stylise);
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: var(--gueb-tracking-label);
  text-transform: uppercase;
  color: var(--gueb-color-primary800);
  margin-bottom: var(--gueb-sp-3xs);
}
.bridge-fiche .coordonnees .itemTextValue {
  font-size: 16px;
}
/* Code postal + ville en gras (dernier bloc de l'adresse) */
.bridge-fiche .coordonnees .containerblockSection:last-child .itemTextValue {
  font-size: 14px;
  font-weight: 700;
}

/* Boutons Téléphone / Site web : pilules vertes claires avec icône */
.bridge-fiche .bridge-fiche-aside .uk-button-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gueb-sp-2xs);
  min-height: 42px;
  padding: var(--gueb-sp-3xs) var(--gueb-sp-s);
  border: none;
  border-radius: var(--gueb-radius-pill);
  background: var(--gueb-color-primary100);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--gueb-tracking-label);
  text-transform: none;
  line-height: 1;
  color: var(--gueb-color-primary800);
  transition: background-color 0.2s ease;
}
.bridge-fiche .bridge-fiche-aside .uk-button-default:hover {
  background: var(--gueb-color-primary200);
  color: var(--gueb-color-primary800);
}
.bridge-fiche .bridge-fiche-aside .uk-button-default::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--gueb-icon-phone) no-repeat center / contain;
}
.bridge-fiche .bridge-fiche-aside .site-s-web::before {
  background-image: var(--gueb-icon-globe);
}

/* Bouton Contact : CTA principal du design (rose accent + flèche) */
.bridge-fiche .bridge-fiche-aside .email-de-contact {
  justify-content: flex-start;
  position: relative;
  min-height: 56px;
  padding: var(--gueb-sp-3xs) 64px var(--gueb-sp-3xs) var(--gueb-sp-m);
  background: var(--gueb-color-accent300);
  font-family: var(--font-stylise);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  color: var(--gueb-color-pourpre800);
}
.bridge-fiche .bridge-fiche-aside .email-de-contact:hover {
  background: var(--gueb-color-accent500);
  color: var(--gueb-color-pourpre800);
}
.bridge-fiche .bridge-fiche-aside .email-de-contact::before {
  display: none; /* pas d'icône à gauche */
}
.bridge-fiche .bridge-fiche-aside .email-de-contact::after {
  content: "";
  position: absolute;
  right: var(--gueb-sp-3xs);
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gueb-color-accent300) var(--gueb-icon-arrow) no-repeat center / 24px;
  transition: transform 0.2s ease;
}
.bridge-fiche .bridge-fiche-aside .email-de-contact:hover::after {
  transform: translateY(-50%) translateX(2px);
}

/* --------------------------------------------------------------------------
   8. MODALE DE CONTACT
   -------------------------------------------------------------------------- */

.bridge-fiche .uk-modal-dialog {
  border-radius: var(--gueb-radius-s);
}
.bridge-fiche .uk-modal-dialog .uk-input,
.bridge-fiche .uk-modal-dialog .uk-textarea {
  border: 1px solid var(--gueb-color-primary200);
  border-radius: var(--gueb-radius-xs);
  font-family: var(--font-main);
}
.bridge-fiche .uk-modal-dialog .uk-input:focus,
.bridge-fiche .uk-modal-dialog .uk-textarea:focus {
  border-color: var(--gueb-color-primary500);
}
.bridge-fiche .uk-button-primary {
  border-radius: var(--gueb-radius-pill);
  background: var(--gueb-color-primary800);
  font-family: var(--font-main);
  font-weight: 700;
  text-transform: none;
}
.bridge-fiche .uk-button-primary:hover {
  background: var(--gueb-color-primary500);
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  .bridge-fiche .bridge-titre-fiche {
    font-size: 32px;
  }
  .bridge-fiche #galerie .uk-width-2-3 a {
    height: 280px;
  }
  .bridge-fiche #galerie .uk-width-1-3 a {
    height: 132px;
  }
}
@media (max-width: 639px) {
  .bridge-fiche .bridge-titre-fiche {
    font-size: 28px;
  }
  .bridge-fiche .block-label,
  .bridge-fiche .block-group-label {
    font-size: 20px;
  }
  .bridge-fiche .containerblockSection h4 {
    font-size: 18px;
  }
}