/**
 * TooCamp Main Stylesheet (v3 migrated)
 * Load order: reset → tokens → base → layout → utilities → components → pages
 */

/* /v3-css/reset.v3.css */
/**
 * CSS Reset
 * Modern minimal reset for consistent cross-browser styling
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  line-height: inherit;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* /v3-css/tokens.v3.css */
/**
 * TooCamp Design Tokens
 * Extracted from Figma: gMxHO5GeJ3QlW4Kl1FxJar
 * Desktop: node-id=157-9047 | Mobile: node-id=157-9483
 */

:root {
  /* ===== Colors (from Figma) ===== */
  --color-primary: #ff6d00;
  --color-primary-gradient-end: #ff9e00;
  --transition-primary-cta: 1s ease;
  --color-secondary: #240046;
  --color-secondary-light: #9d4edd;
  --surface-alpha-secondary-alpha-secondary-80: rgba(36, 0, 70, 0.8);

  --color-text: #240046;
  --color-text-muted: #adb5bd;
  --color-text-body: #495057;
  --color-text-inverse: #ffffff;

  --color-surface: #ffffff;
  --color-surface-alt: #f8f9fa;
  --color-surface-muted: #e9ecef;

  --color-border: #dee2e6;
  --color-border-light: #e9ecef;
  --color-border-strong: #ced4da;

  --color-overlay-dark: rgba(36, 0, 70, 0.7);
  --color-overlay-light: rgba(36, 0, 70, 0.2);
  --color-overlay-white: rgba(255, 255, 255, 0.4);
  /* Overlay photo : transparent sur 2/3 haut, violet renforcé sur le 1/3 bas (~×2) */
  --gradient-photo-overlay: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 66.67%,
    rgba(36, 0, 70, 0.55) 83%,
    rgba(36, 0, 70, 1) 100%
  );
  --gradient-photo-overlay-hover: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 66.67%,
    rgba(36, 0, 70, 0.65) 83%,
    rgba(36, 0, 70, 1) 100%
  );

  /* ===== Typography ===== */
  --font-family-primary: 'Outfit', system-ui, sans-serif;
  --font-family-secondary: 'Nunito', system-ui, sans-serif;

  --font-size-14: 14px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-42: 42px;

  --line-height-21: 21px;
  --line-height-27: 27px;
  --line-height-30: 30px;
  --line-height-32: 32px;
  --line-height-36: 36px;
  --line-height-63: 63px;

  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Alias Figma (body 18 labels, etc.) */
  --text-secondary-secondary-100: #240046;
  --secondary-font: var(--font-family-secondary);
  --font-size-alias-size-18: var(--font-size-18);
  --font-weight-alias-weight-regular: var(--font-weight-regular);
  --font-line-height-alias-line-height-27: var(--line-height-27);

  /* ===== Spacing ===== */
  --space-0: 0;
  --space-5: 5px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-50: 50px;

  /* ===== Border Radius ===== */
  --radius-label: 5px;
  --radius-card: 20px;
  --radius-image: 20px;
  --radius-cta: 100px;

  /* ===== Shadows ===== */
  --shadow-card: 0 0 15px 0 #e9ecef;
  --shadow-strong: 0 0 15px 0 #adb5bd;

  /* ===== Layout (Figma node 120-4046) ===== */
  --container-max: 1200px;
  --container-padding: 24px;
  --header-height: 60px;
  /* Header desktop */
  --header-height-desktop: 75px;
  --header-inner-height: 45px;
  --header-padding-vertical: 15px;
  --header-padding-horizontal: 24px;
  --header-logo-wrap-width: 181px;
  --header-logo-wrap-height: 45px;
  --header-burger-size: 45px;
  --header-logo-height: 26px;
  --header-search-form-width: 470px;
  --header-search-form-height: 45px;
  --header-search-submit-width: 45px;
  --header-search-submit-height: 35px;
  --header-filter-width: 113px;
  --header-filter-height: 45px;
  --header-search-gap: 15px;
  /* Header complete (Figma 1469:26874) */
  --header-height-complete: 90px;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 50px;
  }
}

@media (min-width: 992px) {
  :root {
    --header-padding-horizontal: 50px;
    /* Figma (node 600:13358) : écart moteur ↔ filtre */
    --header-search-gap: 25px;
  }
}


/* /v3-css/base.v3.css */
/**
 * Base Styles
 * Typography, body - Figma fonts: Outfit, Nunito
 * (chargées via <link> dans meta.ejs — évite @import invalide dans le bundle inline)
 */

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


/* /v3-css/layout.v3.css */
/**
 * Layout Utilities
 */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.stack { display: flex; flex-direction: column; }
.stack-15 > * + * { margin-top: var(--space-15); }
.stack-20 > * + * { margin-top: var(--space-20); }
.stack-25 > * + * { margin-top: var(--space-25); }
.stack-30 > * + * { margin-top: var(--space-30); }
.stack-50 > * + * { margin-top: var(--space-50); }

.row { display: flex; flex-wrap: wrap; gap: var(--space-20); }
.grid { display: grid; gap: var(--space-20); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 991px) {
  .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
}

.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-15 { gap: var(--space-15); }
.gap-20 { gap: var(--space-20); }
.gap-25 { gap: var(--space-25); }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.w-100 { width: 100%; }


/* /v3-css/utilities.v3.css */
/**
 * Utility Classes
 * Bootstrap-like naming
 */

.m-0 { margin: 0; }
.mt-15 { margin-top: var(--space-15); }
.mt-30 { margin-top: var(--space-30); }
.mt-50 { margin-top: var(--space-50); }
.mb-15 { margin-bottom: var(--space-15); }
.mb-50 { margin-bottom: var(--space-50); }

.p-0 { padding: 0; }
.p-15 { padding: var(--space-15); }
.p-20 { padding: var(--space-20); }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.w-100 { width: 100%; }
.overflow-hidden { overflow: hidden; }

/* Faux liens : éléments rendus cliquables par un onclick JS
   (gotToUrlByIdForm / gotToUrl) au lieu d'un <a href>. La classe vient de la
   v2, où la règle vit dans stylesheets/main/seo/inline.css — feuille que les
   pages v3 ne chargent pas, d'où des éléments cliquables sans curseur
   (fiches : nom et ville des campings proches, ville et région du héros ;
   listings v3 et blocs mag). */
.cursor { cursor: pointer; }

@media (max-width: 767px) {
  .d-none-mobile { display: none; }
}

@media (min-width: 768px) {
  .d-none-desktop { display: none; }
}


/* /v3-css/components/components.v3.css */
/**
 * TooCamp Components
 * From Figma: node-id=157-9047 (desktop), node-id=157-9483 (mobile)
 */

/* ===== Header (Figma node 120-4046 – header/complete) =====
 * Fond secondary opaque (#240046) partout.
 * Opacité (alpha-80) uniquement sur la home, au-dessus du hero.
 */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: var(--header-height);
  padding: 0;
  background: var(--color-secondary, #240046);
  border-bottom: none;
}

.header .container {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 1728px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--header-padding-horizontal);
}

.header__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  gap: 0;
}

/* left side header – bloc logo + burger */
.header__logo-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 15px;
  width: auto;
  min-height: var(--header-logo-wrap-height);
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.header__logo-wrap a {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--header-burger-size);
  height: var(--header-burger-size);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-cta);
}

.header__icon img {
  width: 18px;
  height: 12px;
  object-fit: contain;
}

/* Bouton burger – Figma 45×45 */
.header__burger-trigger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--header-burger-size);
  height: var(--header-burger-size);
  min-width: var(--header-burger-size);
  min-height: var(--header-burger-size);
  padding: 0;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-cta);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Neutralise le legacy `button:hover { background:none; border:none }`
   qui faisait disparaître le cercle du burger au survol desktop. */
.header__burger-trigger:hover,
.header__burger-trigger:focus,
.header__burger-trigger:active,
.header__burger-trigger:focus-visible {
  background: #fff;
  border: 1px solid var(--color-secondary, #240046);
  padding: 0;
  color: inherit;
  opacity: 1;
  text-decoration: none;
  outline: none;
}

.header__burger-trigger:hover,
.header__burger-trigger:focus-visible {
  background: #f8f9fa;
  border-color: var(--color-primary, #ff6d00);
  box-shadow: 0 0 0 3px rgba(255, 109, 0, 0.18);
}

.header__burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  margin: 0 auto;
  transition:
    transform 0.2s,
    opacity 0.2s,
    background-color 0.2s ease;
}

.header__burger-trigger:hover .header__burger-bar,
.header__burger-trigger:focus-visible .header__burger-bar {
  background: var(--color-secondary, #240046);
}

/* Logo – Figma height 26px */
.header__logo {
  height: var(--header-logo-height);
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
}

/* Div search bar + bouton filtres – gap 15px, height 45px */
.header__search {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: var(--header-search-gap);
  flex: 1;
  min-width: 0;
  margin: 0 var(--space-20);
  height: var(--header-inner-height);
  /* Centrer le bloc moteur + filtre dans la bandeau header (comme le logo) */
  align-self: center;
}

.header--with-search .header__inner {
  flex-wrap: wrap;
  gap: var(--space-10);
}

.header--with-search .header__search {
  order: 3;
  flex-basis: 100%;
  margin: 0;
}

/* search field – Figma 470×45, padding 10 10 10 20, gap 30 */
/* .search-form a min-height:68px global — sans ça, la pill dépasse le header et n’est plus centrée verticalement */
.header--with-search .header__search .search-form {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 10px 10px 20px;
  gap: 30px;
  width: var(--header-search-form-width);
  height: var(--header-search-form-height);
  min-height: var(--header-search-form-height);
  max-height: var(--header-search-form-height);
  flex: none;
  order: 0;
  flex-grow: 0;
  background: #ffffff;
  border: 1px solid #dee2e6;
  box-shadow: 0 0 15px #adb5bd;
  border-radius: 100px;
  margin-bottom: 0;
}

.header--with-search .header__search .search-form--classic {
  overflow: visible;
}

.header--with-search .header__search .search-form--classic .search-form__fields {
  overflow: visible;
}

.header--with-search .header__search .search-form__fields {
  align-items: center;
  min-height: 0;
  flex: 1;
}

.header--with-search .header__search .search-form__item {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  justify-content: center;
}

.header--with-search .header__search .search-form__item--text,
.header--with-search .header__search .search-form__item:first-child {
  max-width: 100px;
}

.header--with-search .header__search .search-form__item:first-child .search-form__input {
  max-width: 100%;
}

.header--with-search .header__search .search-form__submit {
  width: var(--header-search-submit-width);
  height: var(--header-search-submit-height);
  min-width: var(--header-search-submit-width);
  min-height: var(--header-search-submit-height);
  padding: 0;
  flex-shrink: 0;
  border-radius: var(--radius-cta);
}

.header--with-search .header__search .search-form__submit img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.header--with-search .header__search .search-form__submit.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  opacity: 1;
  transition:
    background-color var(--transition-primary-cta, 1s ease),
    background var(--transition-primary-cta, 1s ease);
}

@media (hover: hover) {
  .header--with-search .header__search .search-form__submit.btn--primary:hover,
  .header--with-search .header__search .search-form__submit.btn--primary:focus-visible {
    background: var(--color-primary-gradient-end, #ff9e00);
    background-color: var(--color-primary-gradient-end, #ff9e00);
    opacity: 1;
    filter: none;
    color: var(--color-text-inverse);
  }
}

/*
 * Loupe mobile (pill condensé header) — composant transverse.
 * Le CSS legacy (`button { margin: 0 0 0.5rem }`) ajoute 8px sous la loupe
 * et fait passer la pill de 57px → 65px sur les pages qui chargent style-dist.
 */
.guide-search-header-mobile__field .guide-search-card__submit {
  margin: 0;
  transition:
    background-color var(--transition-primary-cta, 1s ease),
    background var(--transition-primary-cta, 1s ease);
}

/* Même correctif legacy sur le bouton filtre (aussi un <button>). */
button.guide-search-header-mobile__filter {
  margin-top: 0;
  margin-bottom: 0;
}

/* Largeur unique du pill destination mobile (réf. liste résultats @390). */
@media (max-width: 767px) {
  .header__search .guide-search-header-mobile__field,
  .guide-search-header-mobile__field {
    width: 242px !important;
    flex: 0 0 242px !important;
    max-width: 242px !important;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
}

@media (hover: hover) {
  .guide-search-header-mobile__field .guide-search-card__submit:hover,
  .guide-search-header-mobile__field .guide-search-card__submit:focus-visible {
    background: var(--color-primary-gradient-end, #ff9e00) !important;
    background-color: var(--color-primary-gradient-end, #ff9e00) !important;
  }
}

/* "Personnes" (label + select) : éviter le décalage vertical du texte */
.header--with-search .header__search .search-form__select-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 0;
}

.header--with-search .header__search .search-form__label--with-chevron {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  line-height: 1.2;
}

.header--with-search .header__search .search-form__select--label-only {
  margin-top: 2px;
  line-height: 1.2;
}

/* Filter – Figma 113×45, padding 5px 15px, gap 10px */
.header--with-search .header__search .search-results-bar__filter {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px 15px;
  gap: 10px;
  width: var(--header-filter-width);
  height: var(--header-filter-height);
  flex: none;
  order: 1;
  align-self: center;
  flex-grow: 0;
  background: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 100px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text);
}

.header--with-search .header__search .search-results-bar__filter svg {
  width: 18px;
  height: 16px;
  flex-shrink: 0;
}

/* Barre pill + Filtrer : même ligne, centrés verticalement entre eux */
.header--with-search .header__search .search-results-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 0;
}

/* Autocomplete : liste alignée sur la largeur du moteur (form), pas seulement le champ destination */
.header--with-search .header__search .search-form {
  position: relative;
}

.header--with-search .header__search .search-form__item--text {
  position: static;
}

/* Le plugin pose souvent position:relative sur le wrapper — on neutralise pour ancrer la liste au form */
.header--with-search .header__search .search-form__item--text .autoComplete_wrapper {
  position: static;
}

.header--with-search .header__search .search-form .autoComplete_wrapper > ul {
  left: 0;
  right: auto;
  width: 100%;
  min-width: var(--header-search-form-width, 470px);
  max-width: min(100vw - 2rem, 640px);
  box-sizing: border-box;
}

/* Mobile header : bandeau destination — suggestions plus lisibles */
.header--with-search .header__search .guide-search-header-mobile .autoComplete_wrapper > ul {
  left: 0;
  right: auto;
  min-width: min(100vw - 2rem, 420px);
  width: max(100%, 320px);
  max-width: min(100vw - 2rem, 520px);
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .header {
    height: var(--header-height-desktop);
  }

  .header--complete {
    height: var(--header-height-complete);
  }

  .header .container {
    max-width: 1728px;
    margin: 0 auto;
    padding: var(--header-padding-vertical) var(--header-padding-horizontal);
  }

  .header__inner {
    height: var(--header-inner-height);
  }

  .header--complete .header__inner {
    height: auto;
    min-height: var(--header-inner-height);
  }

  .header__logo-wrap {
    width: var(--header-logo-wrap-width);
    height: var(--header-logo-wrap-height);
  }

  .header--complete .header__logo-wrap {
    width: auto;
    height: auto;
  }

  .header__search {
    height: var(--header-inner-height);
    margin: 0 var(--space-20);
  }

  .header--with-search .header__inner {
    flex-wrap: nowrap;
  }

  .header--with-search .header__search {
    order: 0;
    flex-basis: auto;
    margin: 0 var(--space-20);
  }

  .header--with-search .header__search .search-form.search-form--expanded {
    /* Figma (node 600:13358) : barre pill = 45px (tokens.v3.css) */
    height: var(--header-search-form-height);
    min-height: var(--header-search-form-height);
    max-height: var(--header-search-form-height);
  }
}

/* ===== Header complete – Figma 1469:26874 (desktop + mobile) =====
 * Opaque par défaut (#240046). Sur la home uniquement : alpha-80
 * pour laisser voir le hero (voir home.v3.css).
 */
.header--complete {
  height: var(--header-height-complete);
  background: var(--color-secondary, #240046);
  border-bottom: none;
}

.header--complete .container {
  max-width: 1728px;
}

.header--complete .header__inner {
  gap: var(--space-50);
  justify-content: space-between;
}

.header--complete .header__logo-wrap {
  width: auto;
  height: auto;
  min-height: 0;
  align-self: center;
  flex-shrink: 0;
}

.header--complete .header__burger-trigger {
  background: #ffffff;
  border-color: #dee2e6;
}

.header--complete .header__burger-trigger:hover,
.header--complete .header__burger-trigger:focus,
.header--complete .header__burger-trigger:active,
.header--complete .header__burger-trigger:focus-visible {
  background: #fff;
  border: 1px solid #dee2e6;
  padding: 0;
  opacity: 1;
}

.header--complete .header__burger-trigger:hover,
.header--complete .header__burger-trigger:focus-visible {
  border-color: var(--color-primary, #ff6d00);
  background: #f8f9fa;
  box-shadow: 0 0 0 3px rgba(255, 109, 0, 0.18);
}

.header--complete .header__burger-bar {
  background: var(--color-secondary, #240046);
}

.header--complete .header__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.header--complete .header__brand-link {
  display: flex;
  align-items: center;
}

.header--complete .header__tagline {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12, 12px);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-18, 18px);
  color: #ffffff;
  white-space: nowrap;
}

/* Figma 1469:26874 — CTA Espace Pro (outline orange) — visible desktop + mobile (home) */
.header--complete .header__espace-pro {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: var(--space-5) var(--space-15);
  box-sizing: border-box;
  border: 1px solid var(--color-primary, #ff6d00);
  border-radius: var(--radius-cta);
  background: transparent;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-primary, #ff6d00);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.header--complete .header__espace-pro:hover,
.header--complete .header__espace-pro:focus-visible {
  opacity: 0.9;
  outline: none;
}

@media (min-width: 768px) {
  .header--complete {
    height: var(--header-height-complete);
  }

  .header--complete .container {
    padding: var(--space-15) var(--header-padding-horizontal);
  }
}

@media (max-width: 767px) {
  .header--complete .header__inner {
    gap: var(--space-15);
  }

  .header--complete .header__logo-wrap {
    flex: 1 1 auto;
    justify-content: flex-start;
    min-width: 0;
  }

  .header--complete .header__brand {
    align-items: flex-start;
  }

  .header--complete .header__espace-pro {
    height: 36px;
    padding: var(--space-5) var(--space-10);
    font-size: var(--font-size-14);
    line-height: var(--line-height-18, 18px);
  }

  /* Mobile avec moteur – Figma 36:1639 */
  .header--complete.header--with-search {
    height: auto;
    padding-bottom: var(--space-20);
  }

  .header--complete.header--with-search .header__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
    height: auto;
    padding-top: var(--space-20);
    position: relative;
  }

  .header--complete.header--with-search .header__logo-wrap {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
    position: relative;
  }

  .header--complete.header--with-search .header__burger-trigger {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Miroir du burger : CTA ancré en haut à droite de la rangée logo */
  .header--complete.header--with-search .header__espace-pro {
    position: absolute;
    right: 0;
    top: var(--space-20);
    z-index: 1;
  }

  .header--complete.header--with-search .header__brand {
    align-items: center;
    margin: 0 auto;
  }

  .header--complete.header--with-search .header__social {
    display: none;
  }

  .header--complete.header--with-search .header__search {
    order: 3;
    width: 100%;
    flex: 0 0 auto;
  }
}

/* Header complete + moteur de recherche – Figma 1469:26274 */
.header--complete.header--with-search .header__inner {
  flex-wrap: nowrap;
  gap: var(--space-20);
}

.header--complete.header--with-search .header__entries {
  flex: 0 0 auto;
}

.header--complete.header--with-search .header__search {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  justify-content: flex-end;
}

.header--complete.header--with-search .header__social {
  margin-left: 0;
}

@media (min-width: 992px) {
  .header--complete.header--with-search .header__inner {
    gap: var(--space-50);
  }
}

@media (max-width: 1199px) {
  .header--complete.header--with-search .header__entries {
    display: none;
  }
}

@media (min-width: 768px) {
  .header--complete.header--with-search .header__search .search-results-bar {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Moteur header : mobile = bandeau condensé ; desktop = barre pill (.page-guide / .page-comparateur ont des surcharges dans guide.v3.css). */
@media (max-width: 767px) {
  .header--with-search .header__search .search-results-bar {
    display: none;
  }

  .header--with-search .header__search .guide-search-header-mobile {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    width: 100%;
  }
}

@media (min-width: 768px) {
  .header--with-search .header__search .guide-search-header-mobile {
    display: none;
  }
}

/* ===== Navigation ===== */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-30);
}

.nav-toggle {
  display: none;
  padding: var(--space-10);
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  margin: 4px 0;
}

@media (max-width: 767px) {
  .nav--desktop {
    display: none;
  }
}

/* ===== Menu burger : panneau latéral 1/3 largeur, slide gauche → droite ===== */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* header/modal menu desktop – Figma 958:291 */
.menu-content {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 500px;
  max-width: 100vw;
  z-index: 200;
  background: var(--surface-grayscale-white, #fff);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-20, 20px);
  padding: 50px;
}

.menu-content.is-open {
  transform: translateX(0);
}

.menu-content__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

/* Titre Toocamp : dégradé orange → violet (Figma logo) */
.menu-content__brand {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18, 18px);
  font-weight: var(--font-weight-black);
  margin: 0;
  line-height: 1.2;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

a.menu-content__brand {
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

/* 3 boutons – Figma: alpha backgrounds, 80px height, 5px radius, 20px SemiBold */
.menu-content__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-content__action {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 80px;
  padding: 10px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20, 20px);
  font-weight: 600;
  line-height: 21px;
  text-decoration: none;
  border-radius: var(--radius-label, 5px);
  border: none;
  transition: opacity 0.2s;
}

.menu-content__action:hover {
  opacity: 0.9;
}

/* Comparateur – surface/alpha-secondary/alpha-secondary-20 */
.menu-content__action--purple {
  background: rgba(36, 0, 70, 0.2);
  color: #240046;
}

/* Bons plans – rgba(234,34,100,0.1), text #ea2264 */
.menu-content__action--pink {
  background: rgba(234, 34, 100, 0.1);
  color: #9d4edd;
}

/* Mag camping – surface/alpha-primary/alpha-primary-20 */
.menu-content__action--orange {
  background: rgba(255, 109, 0, 0.2);
  color: #240046;
}

/* Icônes Figma (img) : 24×24, couleurs déjà dans l’asset */
.menu-content__action-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.menu-content__action-icon--inline {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-content__action-icon--inline svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* PNG annuaire : 20×20 desktop ; légèrement réduit en mobile (artwork plein cadre) */
.menu-content__action-icon.menu-content__action-icon--annuaire {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .menu-content__action-icon.menu-content__action-icon--annuaire {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
  }
}

/* Séparateur – separator/grayscale-200 */
.menu-content__separator {
  height: 1px;
  width: 100%;
  background: #e9ecef;
}

/* Bloc nav – surface/grayscale-100, rounded card, 20px regular */
.menu-content-list {
  list-style: none;
  margin: 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: var(--radius-card, 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-content-list__item {
  margin: 0;
}

.menu-content-list__link {
  display: block;
  padding: 10px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20, 20px);
  font-weight: 400;
  line-height: 21px;
  color: #240046;
  text-decoration: none;
  border-radius: var(--radius-label, 5px);
  transition:
    background 0.2s,
    color 0.2s;
}

.menu-content-list__link:hover {
  background: rgba(36, 0, 70, 0.06);
  color: #240046;
}

/* Close – absolute top right, 34px, bg grayscale-100 */
.menu-content__close {
  position: absolute;
  top: 42px;
  right: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: #f8f9fa;
  border: none;
  cursor: pointer;
  border-radius: 50%;
}

.menu-content__close:hover {
  background: #e9ecef;
}

/* Croix X : un seul élément avec deux traits en ::before et ::after, centrés et croisés */
.menu-content__close-x {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}

.menu-content__close-x::before,
.menu-content__close-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  background: var(--color-text, #240046);
  transform-origin: center;
}

.menu-content__close-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-content__close-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Mobile : menu pleine largeur, ne dépasse pas l’écran, fermeture toujours visible */
@media (max-width: 767px) {
  .menu-content {
    width: 100%;
    max-width: 100vw;
    padding: var(--space-20);
    gap: var(--space-15);
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .menu-content__close {
    position: fixed;
    top: var(--space-20);
    right: var(--space-20);
    z-index: 201;
  }

  /* Libellés (ex. « Recherche camping par destination ») en saut de ligne à
     20px sur la largeur dispo en mobile — resserré pour tenir sur une ligne. */
  .menu-content-list__link {
    font-size: var(--font-size-16, 16px);
  }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-15);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  border-radius: var(--radius-cta);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  transition:
    background-color var(--transition-primary-cta, 1s ease),
    background var(--transition-primary-cta, 1s ease),
    opacity var(--transition-primary-cta, 1s ease);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-primary-gradient-end, #ff9e00);
  background-color: var(--color-primary-gradient-end, #ff9e00);
  opacity: 1;
  color: var(--color-text-inverse);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn--outline:hover {
  opacity: 0.9;
}

.btn--lg {
  height: 45px;
  padding: var(--space-5) var(--space-15);
}

.btn--md {
  height: 35px;
}

.btn img {
  width: 24px;
  height: 25px;
  object-fit: contain;
}

/* ===== Hero — Figma 157:9386 : photo pleine largeur 1728×650, sans radius ===== */
.hero {
  position: relative;
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 650px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Figma (Inspect) : radial ~49.94%, noir au centre → transparent vers les bords (pas une vignette inversée) */
  background: radial-gradient(
    ellipse 49.94% 46% at 50% 44%,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.18) 52%,
    rgba(0, 0, 0, 0) 100%
  );
  border-radius: 0;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 650px;
  padding: var(--space-30);
}

.hero__headline {
  text-align: center;
  padding: var(--space-30) var(--space-50);
  max-width: 100%;
  box-sizing: border-box;
  /* Le halo lisibilité = .hero__overlay (radial Figma) ; pas de 2e calque pour éviter double tache / bords durs */
  background: none;
  box-shadow: none;
}

.hero__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-63);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-15);
}

.hero__subtitle {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-30);
  color: var(--color-text-inverse);
  margin: 0;
}

@media (max-width: 767px) {
  /* Figma 1480:10635 / Image 1582:13236 — hero mobile 393×650 */
  .hero {
    min-height: 650px;
    padding: 0;
  }
  .hero__inner {
    min-height: 650px;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hero__bg img,
  .hero__overlay {
    border-radius: 0;
  }
  .hero__content {
    min-height: 650px;
  }
  .hero__headline {
    padding: 12px var(--space-20) 0;
  }
  .hero__title {
    font-size: var(--font-size-28);
    line-height: 1.2;
    margin: 0 0 8px;
  }
  .hero__subtitle {
    font-size: var(--font-size-16);
    line-height: 22px;
    margin: 0;
  }
}

/* ===== Search Box ===== */
.search-box {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-30);
  box-shadow: var(--shadow-strong);
  width: 80%;
}

.search-field,
.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-30);
  height: 68px;
  padding: var(--space-10) var(--space-10) var(--space-10) var(--space-20);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cta);
  box-shadow: var(--shadow-strong);
  margin-bottom: var(--space-15);
}

.search-form {
  height: auto;
  min-height: 68px;
  position: relative;
}

.search-form__fields {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-15);
}

.search-form__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* body 18-regular — Figma : text/secondary/secondary-100 */
.search-form__label {
  color: var(--text-secondary-secondary-100, var(--color-text, #240046));
  font-family: var(--secondary-font, var(--font-family-secondary));
  font-size: var(--font-size-alias-size-18, var(--font-size-18));
  font-style: normal;
  font-weight: var(--font-weight-alias-weight-regular, var(--font-weight-regular));
  line-height: var(--font-line-height-alias-line-height-27, var(--line-height-27));
  margin-bottom: 2px;
}

.search-form__input {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text);
  background: none;
  border: none;
  padding: 0;
  outline: none;
}

/* Figma body 14 placeholder : text/grayscale-500 (#adb5bd) */
.search-form__input::placeholder {
  color: var(--color-text-muted, #adb5bd);
  opacity: 1;
}
.search-form__input::-moz-placeholder {
  opacity: 1;
}

.search-form__date-trigger {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text-muted, #adb5bd);
  background: none;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.search-form__date-trigger.date-trigger--has-value {
  color: var(--color-text);
}
.search-form__date-trigger:hover {
  color: var(--color-primary);
}
.search-form__date-trigger.date-trigger--has-value:hover {
  color: var(--color-primary);
}
.search-form__select {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text);
  background: none;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
  width: 100%;
  min-width: 0;
}

.search-form__separator {
  width: 1px;
  height: 40px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* Moteur classique — listes custom (ouverture vers le bas, 1ère option en gras) */
.search-form__list-field {
  position: relative;
}

.search-form__list-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  color: var(--color-text-muted, #adb5bd);
  text-align: left;
  cursor: pointer;
}

.search-form__list-trigger--has-value,
.search-form__list-trigger--has-value .search-form__list-value {
  color: var(--color-text);
  font-weight: var(--font-weight-bold, 700);
}

.search-form__list-trigger--placeholder .search-form__list-value {
  color: var(--color-text-muted, #adb5bd);
  font-weight: var(--font-weight-regular);
}

.search-form__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  z-index: 100;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  max-height: 226px;
  overflow-x: visible;
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 0.6rem;
  background-color: #fff;
  border: 1px solid rgba(33, 33, 33, 0.07);
  box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
}

.search-form__list.inactive {
  display: none;
}

.search-form__list-option {
  margin: 0.3rem;
  padding: 0.3rem 0.75rem;
  font-size: var(--font-size-14);
  color: var(--color-text);
  border-radius: 0.35rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.search-form__list-option.is-selected {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold, 700);
}

.search-form__list-option:hover {
  background-color: rgba(255, 102, 0, 0.12);
}

.search-form--classic-header .search-form__list-trigger {
  text-align: center;
}

.search-form--classic-header .search-form__list-trigger--has-value,
.search-form--classic-header .search-form__list-trigger--has-value .search-form__list-value {
  color: var(--color-text-muted, #adb5bd);
  font-weight: var(--font-weight-regular);
}

.search-form--classic-header .search-form__list-field {
  width: 100%;
}

.search-form--classic-header .search-form__list {
  left: 0;
  right: auto;
  transform: none;
}

.search-form__submit {
  flex-shrink: 0;
}

/* Search form compact (navbar) */
.search-form--compact {
  height: 44px;
  min-height: 44px;
  padding: var(--space-5) var(--space-10) var(--space-5) var(--space-15);
  gap: var(--space-15);
}

.search-form--compact .search-form__fields {
  gap: var(--space-10);
}

.search-form--compact .search-form__item {
  min-width: 0;
}

.search-form--compact .search-form__input {
  font-size: var(--font-size-14);
}

.search-form--compact .search-form__separator {
  height: 24px;
}

.search-form--compact .search-form__submit {
  padding: var(--space-5) var(--space-15);
}

.search-form--compact .search-form__submit img {
  width: 18px;
  height: 19px;
}

.search-field {
  display: flex;
  align-items: center;
  gap: var(--space-30);
  height: 68px;
  padding: var(--space-10) var(--space-10) var(--space-10) var(--space-20);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cta);
  box-shadow: var(--shadow-strong);
  margin-bottom: var(--space-15);
}

.search-field__inputs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-15);
}

.search-field__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.search-field__label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
}

.search-field__placeholder {
  font-size: var(--font-size-14);
  color: var(--color-text-muted);
}

.search-field__separator {
  width: 1px;
  height: 100%;
  background: var(--color-border);
}

.search-shortcuts__title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  margin-bottom: var(--space-15);
}

.search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-15);
  width: 100%;
}

.chip {
  flex: 1 1 0;
  min-width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-10);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-label);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text);
  cursor: pointer;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  /* Anneau inset réservé dès l’état repos : évite le décalage au survol (pas d’ombre externe) */
  box-shadow: inset 0 0 0 0 transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.chip.is-selected {
  border-color: var(--color-secondary, #240046);
  background: rgba(36, 0, 70, 0.08);
  box-shadow: inset 0 0 0 1px var(--color-secondary, #240046);
}

.search-chips .chip:hover {
  background: rgba(36, 0, 70, 0.12);
  border-color: var(--color-secondary, #240046);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-secondary, #240046);
}

.search-chips .chip.is-selected:hover {
  background: rgba(36, 0, 70, 0.16);
  border-color: var(--color-secondary, #240046);
  box-shadow: inset 0 0 0 1px var(--color-secondary, #240046);
}

.chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.chip__label {
  display: inline;
}
.chip__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

@media (max-width: 767px) {
  .search-field,
  .search-form {
    flex-direction: column;
    height: auto;
    min-height: auto;
    padding: var(--space-15);
  }
  .search-field__inputs,
  .search-form__fields {
    flex-direction: column;
    width: 100%;
  }
  .search-field__separator,
  .search-form__separator {
    width: 100%;
    height: 1px;
  }
  .search-box {
    width: 90%;
  }
}

/* ===== Modale Destination (Figma 394-13165) ===== */
.search-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.search-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Modale destination : header au-dessus du contexte search-section (z-index 10) — masquer + remonter le stack */
body.search-modal-open .header {
  visibility: hidden;
  pointer-events: none;
}

body.search-modal-open .search-section {
  z-index: 200;
}

body.search-modal-open .search-modal-backdrop {
  z-index: 299;
}

body.search-modal-open .search-modal {
  z-index: 300;
}

/* Comparateur / recherche mobile : masquer la barre sticky (Guide | Camping | Carte) sous la modale */
body.search-modal-open .comparateur-sticky-bar {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

body.search-modal-open .home-piaf-sticky {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

body.search-modal-open .sticky-site-officiel {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow-y: auto;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.search-modal.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.search-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-15, 15px);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-card, 20px);
  padding: var(--space-12, 12px) var(--space-16, 16px) var(--space-20, 20px);
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Calendrier déplacé dans le panneau (JS, après le bloc dates, viewport ≤991px + modale ouverte) */
.search-modal__panel > .search-modal__calendar {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin-top: var(--space-10, 10px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 1;
}

@media (min-width: 768px) {
  .search-modal__panel {
    max-width: 800px;
  }
}

.search-modal__close {
  position: absolute;
  top: var(--space-8, 8px);
  right: var(--space-6, 6px);
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  flex-shrink: 0;
}
.search-modal__close:hover {
  background: #e9ecef;
}

.search-modal__close-x {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}
.search-modal__close-x::before,
.search-modal__close-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--color-text, #240046);
  transform-origin: center;
}
.search-modal__close-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.search-modal__close-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Mobile / tablette : panneau scrollable, croix sticky (évite qu’elle sorte de l’écran quand le contenu est long) */
@media (max-width: 1024px) {
  .search-modal {
    align-items: flex-start;
    justify-content: center;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }

  .search-modal__panel {
    max-height: calc(
      100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
    );
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--space-8, 8px);
  }

  .search-modal__close {
    position: sticky;
    top: var(--space-6, 6px);
    right: var(--space-4, 4px);
    z-index: 30;
    margin: 0 0 0 auto;
    align-self: flex-end;
    flex-shrink: 0;
  }

  .search-modal__panel > .search-modal__block:first-of-type {
    padding-top: var(--space-12, 12px);
    padding-right: 44px;
  }
}

.search-modal__block {
  background: var(--surface-grayscale-white, #fff);
  border-radius: var(--radius-card, 20px);
  padding: var(--space-16, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-15, 15px);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}

.search-modal__panel > .search-modal__block:first-of-type {
  padding-top: var(--space-12, 12px);
  padding-right: 44px;
}

.search-modal__field-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: var(--radius-card, 20px);
  padding: var(--space-8, 8px) var(--space-10) var(--space-8, 8px)
    var(--space-15);
  min-height: 44px;
  box-shadow: 0 0 15px rgba(173, 181, 189, 0.3);
  min-width: 0;
  max-width: 100%;
  position: relative;
}

/* Suggestions autocomplete : tronquer ville/département/région/pays */
.autoComplete_wrapper {
  min-width: 0;
  max-width: 100%;
}
.autoComplete_wrapper > ul {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.autoComplete_wrapper > ul > li {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0.3rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1.3;
}
.autoComplete_wrapper > ul > li[role="option"] {
  margin: 0.3rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1.3;
  cursor: pointer;
}
.autoComplete_wrapper > ul > li > .autocomplete-suggestion__text,
.autoComplete_wrapper > ul > li > span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.autocomplete-suggestion__meta {
  color: #bdbdbd;
}

/* Séparateurs Destinations / Campings — même style desktop (police + gradient + soulignement) */
.autoComplete_wrapper > ul > .autocomplete-separator,
.search-modal .autoComplete_wrapper > ul > .autocomplete-separator {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 6px;
  box-sizing: border-box;
  pointer-events: none !important;
  cursor: default;
  margin: 0;
  border-bottom: none !important;
  /* Ne pas styler le texte ici : le gradient est sur __label (sinon ::after disparaît) */
  color: inherit;
  -webkit-text-fill-color: initial;
  background: none;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
}
.autoComplete_wrapper > ul > .autocomplete-separator--campings,
.search-modal .autoComplete_wrapper > ul > .autocomplete-separator--campings {
  margin-top: 10px;
}
.autoComplete_wrapper > ul > .autocomplete-separator > .autocomplete-separator__label,
.search-modal .autoComplete_wrapper > ul > .autocomplete-separator > .autocomplete-separator__label,
.page-home .autocomplete-separator > .autocomplete-separator__label,
.page-home .search-modal .autocomplete-separator > .autocomplete-separator__label {
  display: inline-block;
  font-family: var(--font-family-primary, Georgia, "Times New Roman", serif) !important;
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  background-image: linear-gradient(
    180deg,
    var(--color-primary-gradient-end, #ff9e00),
    var(--color-secondary-light, #9d4edd)
  ) !important;
  background-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #9d4edd !important; /* fallback si clip non supporté */
}
.autoComplete_wrapper > ul > .autocomplete-separator::after,
.search-modal .autoComplete_wrapper > ul > .autocomplete-separator::after {
  content: "";
  flex: 1 0 100%;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background-image: linear-gradient(
    90deg,
    var(--color-primary-gradient-end, #ff9e00),
    var(--color-secondary-light, #9d4edd)
  );
  background-color: var(--color-primary-gradient-end, #ff9e00);
}

@media (max-width: 767px) {
  .search-modal .autoComplete_wrapper > ul,
  .search-modal__field-wrap .autoComplete_wrapper > ul {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}
.search-modal__input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-text, #240046);
  border: none;
  outline: none;
  background: transparent;
}
.search-modal__input::placeholder {
  color: var(--color-text-muted, #adb5bd);
}
.search-modal__field-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-modal__field-icon img {
  width: 20px;
  height: 21px;
  display: block;
}

.search-modal__suggestion-title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14, 14px);
  font-weight: 400;
  line-height: 21px;
  color: var(--color-text);
  margin: 0;
}

.search-modal__suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-15, 15px);
}

.search-modal__suggestion {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: var(--space-10);
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: var(--radius-card, 20px);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18, 18px);
  font-weight: 400;
  line-height: var(--line-height-27, 27px);
  color: var(--color-text, #240046);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}
.search-modal__suggestion:hover {
  background: #e9ecef;
}
.search-modal__suggestion--macro {
  font-weight: 900;
}
.search-modal__suggestion-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.search-modal__block--date,
.search-modal__block--persons {
  flex-direction: column;
  gap: 0;
  min-height: 88px;
  justify-content: center;
}
.search-modal__date-trigger {
  display: block;
  width: 100%;
  margin-top: var(--space-10, 10px);
  padding: var(--space-10, 10px) var(--space-15, 15px);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14, 14px);
  line-height: 21px;
  color: var(--color-text-muted, #adb5bd);
  text-align: left;
  background: #fff;
  border: 1px solid var(--color-border-light, #dee2e6);
  border-radius: var(--radius-card, 20px);
  cursor: pointer;
}
.search-modal__date-trigger:hover {
  border-color: var(--color-primary, #ff6d00);
  color: var(--color-text, #240046);
}
.search-modal__date-trigger.date-trigger--has-value {
  color: var(--color-text, #240046);
}
.search-modal__date-trigger.date-trigger--has-value:hover {
  color: var(--color-primary, #ff6d00);
}
.search-modal__date-value {
  display: block;
}
.search-modal__calendar {
  margin-top: var(--space-10, 10px);
  padding: var(--space-15, 15px);
  background: #fff;
  border: 1px solid var(--color-border-light, #dee2e6);
  border-radius: var(--radius-card, 20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
/* Calendrier partagé — desktop : centré sous la pill (.search-form) */
.search-calendar-popover {
  position: relative;
}

@media (min-width: 768px) {
  .search-form > .search-calendar-popover {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: var(--space-10, 10px);
    width: max-content;
    max-width: min(100vw - 2rem, 640px);
    z-index: 310;
    pointer-events: none;
  }

  .search-form > .search-calendar-popover .search-modal__calendar {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-top: 0;
    pointer-events: auto;
  }
}

.search-modal__calendar-grid {
  display: block;
}
.search-modal__calendar-grid-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-20, 20px);
  justify-content: center;
  align-items: flex-start;
}
.search-modal__calendar-grid-inner .search-modal__calendar-table {
  flex: 1 1 0;
  min-width: 140px;
}
@media (max-width: 767px) {
  .search-modal__calendar-grid-inner {
    flex-direction: column;
  }
}
.search-modal__calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-15, 15px);
}
.search-modal__calendar-prev,
.search-modal__calendar-next {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--color-text, #240046);
  background: #f1f3f5;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.search-modal__calendar-prev:hover,
.search-modal__calendar-next:hover {
  background: var(--color-primary, #ff6d00);
  color: #fff;
}
.search-modal__calendar-month {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18, 18px);
  font-weight: 700;
  color: var(--color-text, #240046);
}
.search-modal__calendar-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14, 14px);
}
.search-modal__calendar-table th {
  padding: var(--space-5, 5px);
  font-weight: 600;
  color: var(--color-text, #240046);
  text-align: center;
}
.search-modal__calendar-day {
  width: 100%;
  min-width: 36px;
  height: 36px;
  padding: 0;
  font-size: var(--font-size-14, 14px);
  color: var(--color-text, #240046);
  background: transparent;
  border: none;
  border-radius: var(--radius-image, 8px);
  cursor: pointer;
}
.search-modal__calendar-day:hover:not([disabled]) {
  background: var(--color-primary, #ff6d00);
  color: #fff;
}
.search-modal__calendar-day.is-past {
  color: #adb5bd;
  cursor: default;
}
.search-modal__calendar-day.is-from,
.search-modal__calendar-day.is-to {
  background: var(--color-primary, #ff6d00);
  color: #fff;
}
.search-modal__calendar-day.is-between {
  background: rgba(255, 109, 0, 0.2);
}
.search-modal__block-title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18, 18px);
  font-weight: 400;
  line-height: var(--line-height-27, 27px);
  color: var(--color-text, #240046);
  margin: 0;
}
.search-modal__block-placeholder {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14, 14px);
  line-height: 21px;
  color: #adb5bd;
  margin: 0;
}
.search-modal__select {
  display: block;
  width: 100%;
  margin-top: var(--space-10, 10px);
  padding: var(--space-10, 10px) var(--space-15, 15px);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  line-height: 1.35;
  color: var(--color-text, #240046);
  background: #fff;
  border: 1px solid var(--color-border-light, #dee2e6);
  border-radius: var(--radius-card, 20px);
  cursor: pointer;
}

.search-modal__submit {
  width: 100%;
  margin-top: calc(-1 * var(--space-15, 15px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10, 10px);
  box-sizing: border-box;
}

/* ===== Filters Modal (Figma node 312:23851) ===== */
.filters-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 319;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.filters-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.filters-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.filters-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.filters-modal__panel {
  width: min(600px, 100%);
  height: min(620px, calc(100vh - 40px));
  background: var(--color-surface-alt);
  border-radius: var(--radius-card);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.filters-modal__close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-family-primary);
  font-size: 50px;
  line-height: 28px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  padding: 0;
}

.filters-modal__content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.filters-modal__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  line-height: var(--line-height-27);
  font-weight: var(--font-weight-black);
  color: var(--color-secondary);
}

.filters-modal__popular {
  display: grid;
  gap: 10px;
  margin-bottom: var(--space-20);
}

.filters-modal__quick {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  margin-bottom: var(--space-20);
}

.filters-modal__popular-pill--size {
  justify-content: center;
}

.filters-modal__section--chambres .filters-modal__popular-pill--size {
  min-width: 44px;
}

.filters-modal__popular-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filters-modal__popular-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--color-border-light, #e9ecef);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
  cursor: pointer;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 0 transparent;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.filters-modal__popular-pill:hover,
.filters-modal__popular-pill:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  box-shadow: inset 0 0 0 1px var(--color-secondary);
}

.filters-modal__popular-pill.is-active {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: #fff;
}

.filters-modal__popular-pill.is-active:hover,
.filters-modal__popular-pill.is-active:focus-visible {
  background: var(--color-secondary);
  color: #fff;
  opacity: 0.92;
  box-shadow: none;
}

.filters-modal__popular-pill.is-active .filters-modal__popular-count {
  color: rgba(255, 255, 255, 0.85);
}

.filters-modal__popular-label {
  white-space: nowrap;
}

.filters-modal__popular-count {
  font-size: var(--font-size-12);
  line-height: 18px;
  color: var(--color-text-muted);
}

.filters-modal__section {
  display: grid;
  gap: 5px;
}

.filters-modal__section--pills {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.filters-modal__popular-pill--hidden,
.filters-modal__popular-pill[hidden] {
  display: none !important;
}

.filters-modal__section-title {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  line-height: var(--line-height-27);
  font-weight: var(--font-weight-black);
  color: var(--color-secondary);
}

.filters-modal__checkbox {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  cursor: pointer;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  line-height: var(--line-height-27);
  font-weight: var(--font-weight-regular);
  color: #000;
}

.filters-modal__checkbox-box {
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 2px solid var(--color-primary);
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}

.filters-modal__checkbox.is-checked .filters-modal__checkbox-box::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.filters-modal__checkbox-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}

.filters-modal__count {
  color: var(--color-text-muted, #adb5bd);
  font-size: var(--font-size-14, 14px);
  font-variant-numeric: tabular-nums;
  min-width: 1.5em;
}

.filters-modal__checkbox--hidden {
  display: none !important;
}

.filters-modal__apply:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Filtre par prix — sliders double */
.filters-modal__section--price {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.filters-modal__price-range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

.filters-modal__price-sep {
  color: var(--color-text-muted);
}

.filters-modal__price-histos {
  position: relative;
  height: 60px;
  width: 100%;
}

.filters-modal__price-histo {
  position: absolute;
  bottom: 0;
  background: var(--color-primary, #FF7500);
  opacity: 0.35;
  border-radius: 2px 2px 0 0;
  min-height: 4px;
}

.filters-modal__price-sliders {
  position: relative;
  height: 24px;
  width: 100%;
}

.filters-modal__price-slider {
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  outline: none;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  top: 50%;
  transform: translateY(-50%);
}

.filters-modal__price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: all;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary, #FF7500);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  cursor: pointer;
}

.filters-modal__price-slider::-moz-range-thumb {
  pointer-events: all;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary, #FF7500);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  cursor: pointer;
}

#filters-modal-from-slider {
  z-index: 2;
  background: transparent;
}

#filters-modal-to-slider {
  z-index: 3;
  border-radius: 2px;
}

.filters-modal__actions {
  display: flex;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding-top: 5px;
  background: var(--color-surface-alt);
}

.filters-modal__clear,
.filters-modal__apply {
  border-radius: var(--radius-cta);
  height: 35px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  line-height: var(--line-height-27);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}

.filters-modal__clear {
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  background: transparent;
  padding: 5px 15px;
}

.filters-modal__apply {
  border: 0;
  width: 300px;
  max-width: 100%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  transition:
    background-color var(--transition-primary-cta, 1s ease),
    background var(--transition-primary-cta, 1s ease),
    opacity var(--transition-primary-cta, 1s ease);
}

.filters-modal__apply:hover,
.filters-modal__apply:focus-visible {
  background: var(--color-primary-gradient-end, #ff9e00);
  background-color: var(--color-primary-gradient-end, #ff9e00);
  color: var(--color-text-inverse);
  opacity: 1;
}

@media (max-width: 767px) {
  .filters-modal {
    padding: 10px;
  }

  .filters-modal__panel {
    height: min(620px, calc(100vh - 20px));
  }

  .filters-modal__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .filters-modal__apply {
    width: 100%;
  }
}

/* ===== Sort Modal (aligné modale Filtrer v3) ===== */
.sort-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 319;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sort-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sort-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sort-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sort-modal__panel {
  width: min(480px, 100%);
  max-height: min(520px, calc(100vh - 40px));
  background: var(--color-surface-alt);
  border-radius: var(--radius-card);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sort-modal__close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-family-primary);
  font-size: 50px;
  line-height: 28px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  padding: 0;
}

.sort-modal__content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sort-modal__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  line-height: var(--line-height-27);
  font-weight: var(--font-weight-black);
  color: var(--color-secondary);
}

.sort-modal__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sort-modal__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  line-height: var(--line-height-27);
  color: #000;
}

.sort-modal__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sort-modal__radio-ui {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid var(--color-border-strong, #adb5bd);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
}

.sort-modal__radio:checked + .sort-modal__radio-ui {
  border-color: var(--color-primary);
}

.sort-modal__radio:checked + .sort-modal__radio-ui::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-primary);
}

.sort-modal__option-label {
  flex: 1;
}

.sort-modal__info {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: 1.4;
  color: var(--color-text-muted, #878787);
  text-align: center;
}

.sort-modal__info-link {
  color: inherit;
  text-decoration: none;
}

.sort-modal__info-link:hover,
.sort-modal__info-link:focus-visible {
  text-decoration: underline;
}

.header--with-search .header__search .search-results-bar__sort {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px 15px;
  gap: 10px;
  height: var(--header-filter-height);
  flex: none;
  background: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 100px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text);
}

.header--with-search .header__search .search-results-bar__sort svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Filtrer / Trier — hover bordure grise (Figma guide / comparateur, pas orange) */
:is(
  .header--with-search .header__search .search-results-bar__filter,
  .header--with-search .header__search .search-results-bar__sort,
  .guide-search-header-mobile__filter,
  .page-comparateur .guide-head--has-intro-actions .guide-head__action-btn,
  .page-guide .guide-head--has-intro-actions .guide-head__action-btn,
  .v3-listing-filter
) {
  transition:
    background 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

@media (hover: hover) {
  :is(
    .header--with-search .header__search .search-results-bar__filter,
    .header--with-search .header__search .search-results-bar__sort,
    .guide-search-header-mobile__filter,
    .page-comparateur .guide-head--has-intro-actions .guide-head__action-btn,
    .page-guide .guide-head--has-intro-actions .guide-head__action-btn,
    .v3-listing-filter
  ):hover,
  :is(
    .header--with-search .header__search .search-results-bar__filter,
    .header--with-search .header__search .search-results-bar__sort,
    .guide-search-header-mobile__filter,
    .page-comparateur .guide-head--has-intro-actions .guide-head__action-btn,
    .page-guide .guide-head--has-intro-actions .guide-head__action-btn,
    .v3-listing-filter
  ):focus-visible {
    background: var(--color-border, #dee2e6);
    background-color: var(--color-border, #dee2e6);
    border: 1px solid var(--color-border-strong, #ced4da);
    border-color: var(--color-border-strong, #ced4da);
    color: var(--color-text, #240046);
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .sort-modal {
    padding: 10px;
  }
}

/* ===== Section ===== */
.section {
  padding: var(--space-50) 0;
}

.section__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-63);
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-15);
}

.section__subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-15);
  margin-bottom: var(--space-50);
}

.section__badge {
  padding: var(--space-10);
  background: var(--color-surface-muted);
  border-radius: var(--radius-label);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  color: var(--color-text);
}

/* ===== Cards ===== */
.card-destination {
  position: relative;
  height: 411px;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-10);
}

.card-destination__bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: lightgray;
}

.card-destination__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-card);
  display: block;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  transform: scale(1);
  transform-origin: center center;
}

.card-destination__image--hover {
  opacity: 0;
}

.card-destination__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-card);
  pointer-events: none;
  /* Violet uniquement sur le 1/3 bas */
  background: var(--gradient-photo-overlay);
  opacity: 1;
  transition:
    background 0.5s ease,
    opacity 0.5s ease;
}

.card-destination__content {
  position: relative;
  z-index: 2;
}

.card-destination__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  margin: 0;
  display: inline-block;
  max-width: 100%;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  transition:
    color 0.5s ease,
    background 0.5s ease,
    -webkit-text-fill-color 0.5s ease,
    text-shadow 0.5s ease;
}

.card-destination__count {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  color: var(--color-text-inverse);
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

/* Figma card/edito/article standard — node 55:2883 (Variant2 = hover) */
.card-destination-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 0 rgba(173, 181, 189, 0);
  transition: box-shadow 0.5s ease;
}

.card-destination-link:hover,
.card-destination-link:focus-visible {
  box-shadow: 0 0 15px #adb5bd;
}

.card-destination-link:hover .card-destination__overlay,
.card-destination-link:focus-visible .card-destination__overlay {
  background: var(--gradient-photo-overlay-hover);
}

.card-destination-link:hover .card-destination__bg--has-hover .card-destination__image--default,
.card-destination-link:focus-visible .card-destination__bg--has-hover .card-destination__image--default {
  opacity: 0;
  transform: scale(1);
}

.card-destination-link:hover .card-destination__bg--has-hover .card-destination__image--hover,
.card-destination-link:focus-visible .card-destination__bg--has-hover .card-destination__image--hover {
  opacity: 1;
  transform: scale(1);
}

/* Pas de 2e photo : zoom léger sur la même image */
.card-destination-link:hover .card-destination__bg:not(.card-destination__bg--has-hover) .card-destination__image--default,
.card-destination-link:focus-visible .card-destination__bg:not(.card-destination__bg--has-hover) .card-destination__image--default {
  transform: scale(1.08);
}

.card-destination-link:hover .card-destination__title,
.card-destination-link:focus-visible .card-destination__title,
.card-destination-link:hover .card-destination__count,
.card-destination-link:focus-visible .card-destination__count {
  color: transparent;
  text-shadow: none;
  background: linear-gradient(
    90deg,
    var(--color-primary, #ff6d00) 0%,
    var(--color-secondary-light, #9d4edd) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-article {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-article-card-bg, #1a0033);
  border: 1px solid var(--color-border-light);
}

.card-article__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: var(--space-15);
}

a.card-article__inner {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

a.card-article__inner:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Carte avec métas cliquables : pas d’enveloppe <a> (liens imbriqués).
   Un stretch-link enfant direct couvre toute la photo ; body laisse passer
   les clics ; catégorie / hashtag / destination restent au-dessus. */
.card-article__inner--has-links {
  position: relative;
}

.card-article__stretch-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.card-article__stretch-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.card-article__inner--has-links .card-article__media {
  z-index: 0;
}

.card-article__inner--has-links .card-article__body {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.card-article__meta-link {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
}

.card-article__meta-link:hover,
.card-article__meta-link:focus-visible {
  text-decoration: underline;
}

/* Badge destination sans lien : le clic traverse vers l’article.
   S’il est un <a>, il reste cliquable au-dessus du stretch-link. */
.card-article__inner--has-links .card-article__location:not(a) {
  pointer-events: none;
}

.card-article__inner--has-links a.card-article__location {
  pointer-events: auto;
  z-index: 3;
}

.card-article__media {
  position: relative;
  flex-shrink: 0;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--color-article-card-bg, #1a0033);
}

.card-article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-image);
}

/* Violet uniquement sur le 1/3 bas */
.card-article__overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-image);
  pointer-events: none;
  background: var(--gradient-photo-overlay);
}

.card-article--large .card-article__overlay {
  background: var(--gradient-photo-overlay);
}

.card-article--large .card-article__media {
  aspect-ratio: 1200 / 531;
  max-height: 380px;
}

.card-article:not(.card-article--large) .card-article__media {
  aspect-ratio: 1;
}

.card-article__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-top: var(--space-15);
}

.card-article__title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  color: var(--color-text-inverse);
  margin: 0;
  line-height: var(--line-height-27);
}

.card-article--large .card-article__title {
  font-size: var(--font-size-24);
  line-height: 1.2;
}

.card-camping {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-15);
  box-shadow: var(--shadow-card);
}

.card-camping--with-dispo {
  border-color: var(--color-primary);
}

.card-camping__image-wrap {
  position: relative;
  margin-bottom: var(--space-20);
  border-radius: var(--radius-image);
  overflow: hidden;
}

.card-camping__image {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-image);
  object-fit: cover;
  display: block;
}

.card-camping__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.card-camping__play svg {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.card-camping__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-10);
}

.card-camping__star {
  color: var(--color-primary);
  font-size: 20px;
  line-height: 1;
}

.card-camping__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.card-camping__location {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text);
  margin-bottom: var(--space-15);
}

.card-camping__desc {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text-body);
  line-height: var(--line-height-21);
  margin-bottom: var(--space-15);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-camping__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-15);
}

.card-camping__tag {
  display: inline-block;
  padding: 2px var(--space-10);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-label);
  font-family: var(--font-family-secondary);
  font-size: 12px;
  color: var(--color-text);
}

.card-camping__tag--link {
  color: var(--color-primary);
  text-decoration: none;
}

.card-camping__tag--link:hover {
  text-decoration: underline;
}

.card-camping__dispo-wrap {
  margin-top: var(--space-15);
}

.card-camping__cta-booking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  margin-left: calc(-1 * var(--space-15));
  margin-right: calc(-1 * var(--space-15));
  margin-bottom: calc(-1 * var(--space-15));
  width: calc(100% + 2 * var(--space-15));
}

.card-camping__seller {
  font-family: var(--font-family-secondary);
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  margin: var(--space-5) 0 0 0;
}

/* ===== Card Camping Dispo (availability block) ===== */
.card-camping-dispo {
  background: var(--color-surface-muted);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 0;
}

.card-camping-dispo__header {
  padding: var(--space-15);
  padding-bottom: var(--space-10);
}

.card-camping-dispo__title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  margin: 0 0 var(--space-10) 0;
}

.card-camping-dispo__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.card-camping-dispo__spec {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-label);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text);
}

.card-camping-dispo__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-10);
  padding: 0 var(--space-15) var(--space-15);
}

.card-camping-dispo__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.card-camping-dispo__dates,
.card-camping-dispo__details {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text-body);
}

.card-camping-dispo__pricing {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
}

.card-camping-dispo__discount {
  padding: var(--space-5);
  background: var(--color-secondary-light);
  color: var(--color-text-inverse);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  border-radius: var(--radius-label);
}

.card-camping-dispo__amount {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
}

.card-camping-dispo__old-price {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text-body);
  text-decoration: line-through;
}

.card-value {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-20);
}

.card-value__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-black);
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-15);
}

.card-value__text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  color: var(--color-text);
  line-height: var(--line-height-27);
}

.card-find-camping {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-15);
  height: 100%;
  min-height: 230px;
  padding: var(--space-15);
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: 0 0 7.5px var(--color-border-light, #e9ecef);
  box-sizing: border-box;
}

.card-find-camping__title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  background: linear-gradient(
    90deg,
    var(--color-primary, #ff6d00),
    var(--color-secondary-light, #9d4edd)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-find-camping__text {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-secondary, #240046);
}

/* Figma 1366:12234 — CTA plein primary (#ff6d00), hover opacity comme .btn--primary */
.card-find-camping__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  height: 35px;
  min-height: 35px;
  padding: var(--space-5) var(--space-15);
  box-sizing: border-box;
  border: none;
  border-radius: var(--radius-cta);
  background: var(--color-primary, #ff6d00);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse, #fff);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-primary-cta, 1s ease),
    background var(--transition-primary-cta, 1s ease),
    opacity var(--transition-primary-cta, 1s ease);
}

.card-find-camping__cta:hover,
.card-find-camping__cta:focus,
.card-find-camping__cta:active,
.card-find-camping__cta:focus-visible {
  /* Neutralise le legacy `button:hover { background:none }` (CTA PIAF = <button>) */
  background: var(--color-primary-gradient-end, #ff9e00);
  background-color: var(--color-primary-gradient-end, #ff9e00);
  border: none;
  color: var(--color-text-inverse, #fff);
  opacity: 1;
  outline: none;
}

/* ===== Featured Region Card (Figma card/edito/camping top — 1417:16752) ===== */
.card-region {
  position: relative;
  display: block;
  width: 100%;
  height: 500px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid transparent;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

@media (hover: hover) {
  .card-region:hover,
  .card-region:focus-visible {
    border-color: rgba(157, 78, 221, 0.55);
    box-shadow:
      0 0 20px rgba(157, 78, 221, 0.42),
      0 8px 28px rgba(36, 0, 70, 0.2);
  }
}

.card-region:focus-visible {
  outline: 2px solid var(--color-secondary-light, #9d4edd);
  outline-offset: 3px;
}

.card-region__bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.card-region__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-region__overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  /* Figma 1417:16725 — dégradé violet haut→bas */
  background: linear-gradient(
    180deg,
    rgba(36, 0, 70, 0) 0%,
    rgba(36, 0, 70, 0.12) 28%,
    rgba(36, 0, 70, 0.55) 46%,
    rgba(36, 0, 70, 0.92) 62%,
    #240046 78%,
    #240046 100%
  );
  pointer-events: none;
}

.card-region__badge {
  position: absolute;
  top: 25px;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-10);
  border-radius: 0 100px 100px 0;
  background: linear-gradient(
    90deg,
    var(--color-primary, #ff6d00),
    var(--color-secondary-light, #9d4edd)
  );
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  white-space: nowrap;
}

.card-region__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-15);
  /* Réserve la zone badge en haut pour ne pas chevaucher le titre */
  padding: 70px var(--space-15) var(--space-15);
  box-sizing: border-box;
}

.card-region__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
  width: 100%;
}

.card-region__stars {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px var(--space-5);
  border-radius: 5px;
  background: #f7dac4;
}

.card-region__star {
  color: var(--color-primary, #ff6d00);
  font-size: 15px;
  line-height: 1;
}

.card-region__title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24, 24px);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27, 27px);
  color: var(--color-text-inverse);
}

.card-region__location {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
}

.card-region__location-icon {
  flex-shrink: 0;
  color: var(--color-text-inverse);
}

.card-region__desc {
  width: 100%;
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 80px;
}

.card-region__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  align-self: center;
  min-height: 35px;
  padding: var(--space-5) var(--space-15);
  border-radius: var(--radius-cta);
  background: var(--color-primary, #ff6d00);
  color: var(--color-text-inverse);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  white-space: nowrap;
  pointer-events: none;
  transition:
    background-color var(--transition-primary-cta, 1s ease),
    background var(--transition-primary-cta, 1s ease);
}

@media (hover: hover) {
  .card-region:hover .card-region__cta {
    background: var(--color-primary-gradient-end, #ff9e00);
    background-color: var(--color-primary-gradient-end, #ff9e00);
    color: var(--color-text-inverse);
  }
}

.card-region:focus-visible .card-region__cta {
  background: var(--color-primary-gradient-end, #ff9e00);
  background-color: var(--color-primary-gradient-end, #ff9e00);
  color: var(--color-text-inverse);
}

.card-region__cta-arrow {
  margin-left: var(--space-5);
}

/* ===== Footer ===== */
.footer {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  padding: var(--space-25) var(--container-padding);
}

.footer__top {
  margin-bottom: var(--space-30);
}

.footer__logo {
  height: 26px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
  margin-bottom: var(--space-15);
}

.logo-text {
  width: auto;
  max-width: 330px;
  object-fit: contain;
  display: block;
}

.footer__grid {
  display: flex;
  gap: var(--space-30);
  flex-wrap: wrap;
}

.footer__separator {
  display: none;
  width: 100%;
  height: 1px;
  border: 0;
  background: rgba(255, 255, 255, 0.6);
  margin: var(--space-20) 0;
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer__heading {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  padding: var(--space-5) var(--space-10);
}

.footer__link {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  color: var(--color-text-inverse);
  padding: var(--space-5) var(--space-10);
  transition: opacity 0.2s;
}

.footer__link:hover {
  opacity: 0.8;
}

.footer__copyright {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  text-align: center;
  padding-top: var(--space-30);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__copyright-text {
  margin: 0;
}

@media (max-width: 767px) {
  .footer__separator {
    display: block;
  }
}

/* ========== iPad Mini (768px–834px) – même conf que mobile (composants) ========== */
@media (min-width: 768px) and (max-width: 834px) {
  .nav--desktop {
    display: none;
  }
  .menu-content {
    width: 100%;
    max-width: 100vw;
    padding: var(--space-20);
    gap: var(--space-30);
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .menu-content__close {
    position: fixed;
    top: var(--space-20);
    right: var(--space-20);
    z-index: 201;
  }
  .hero {
    min-height: 650px;
    padding: 0;
  }
  .hero__inner {
    min-height: 650px;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hero__bg img,
  .hero__overlay {
    border-radius: 0;
  }
  .hero__content {
    min-height: 650px;
  }
  .hero__headline {
    padding: 12px var(--space-20) 0;
  }
  .hero__title {
    font-size: var(--font-size-28);
    line-height: 1.2;
    margin: 0 0 8px;
  }
  .hero__subtitle {
    font-size: var(--font-size-16);
    line-height: 22px;
    margin: 0;
  }
  .search-field,
  .search-form {
    flex-direction: column;
    height: auto;
    min-height: auto;
    padding: var(--space-15);
  }
  .search-field__inputs,
  .search-form__fields {
    flex-direction: column;
    width: 100%;
  }
  .search-field__separator,
  .search-form__separator {
    width: 100%;
    height: 1px;
  }
  .search-box {
    width: 90%;
  }
  .search-modal__calendar-grid-inner {
    flex-direction: column;
  }
}

/* ===== Pagination carousel — flèche blanche sur fond violet (Figma, global) ===== */
.pagination-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-15);
}

.pagination-carousel__prev,
.pagination-carousel__next,
.guide-list-pagination--figma .pagination__prev,
.guide-list-pagination--figma .pagination__next,
.guide-list-pagination:not(.guide-list-pagination--figma) .pagination__prev,
.guide-list-pagination:not(.guide-list-pagination--figma) .pagination__next,
.guide-camping-gallery__arrow,
.camping-detail-nearby__pag-btn {
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  padding: 0;
  border: none;
  border-radius: var(--radius-cta);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  transition:
    opacity 0.2s ease,
    background 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.pagination-carousel__prev:not(.is-disabled):not(:disabled),
.pagination-carousel__next:not(.is-disabled):not(:disabled),
.guide-list-pagination--figma .pagination__prev:not(:disabled),
.guide-list-pagination--figma .pagination__next:not(:disabled),
.guide-list-pagination:not(.guide-list-pagination--figma) .pagination__prev:not(:disabled),
.guide-list-pagination:not(.guide-list-pagination--figma) .pagination__next:not(:disabled),
.guide-camping-gallery__arrow:not(:disabled):not(.is-disabled):not(.swiper-button-disabled),
.camping-detail-nearby__pag-btn:not(:disabled) {
  background: rgba(36, 0, 70, 0.8);
  color: #ffffff;
}

.pagination-carousel__prev:hover:not(.is-disabled):not(:disabled),
.pagination-carousel__next:hover:not(.is-disabled):not(:disabled),
.pagination-carousel__prev:focus-visible:not(.is-disabled):not(:disabled),
.pagination-carousel__next:focus-visible:not(.is-disabled):not(:disabled),
.guide-list-pagination--figma .pagination__prev:not(:disabled):hover,
.guide-list-pagination--figma .pagination__next:not(:disabled):hover,
.guide-list-pagination--figma .pagination__prev:not(:disabled):focus-visible,
.guide-list-pagination--figma .pagination__next:not(:disabled):focus-visible,
.guide-list-pagination:not(.guide-list-pagination--figma) .pagination__prev:not(:disabled):hover,
.guide-list-pagination:not(.guide-list-pagination--figma) .pagination__next:not(:disabled):hover,
.guide-list-pagination:not(.guide-list-pagination--figma) .pagination__prev:not(:disabled):focus-visible,
.guide-list-pagination:not(.guide-list-pagination--figma) .pagination__next:not(:disabled):focus-visible,
.guide-camping-gallery__arrow:hover:not(.is-disabled):not(:disabled):not(.swiper-button-disabled),
.guide-camping-gallery__arrow:focus-visible:not(.is-disabled):not(:disabled):not(.swiper-button-disabled),
.camping-detail-nearby__pag-btn:hover:not(:disabled),
.camping-detail-nearby__pag-btn:focus-visible:not(:disabled) {
  opacity: 1;
  background: var(--color-secondary, #240046);
  background-color: var(--color-secondary, #240046);
  border: none;
  color: #ffffff;
  box-shadow:
    0 0 0 2px rgba(157, 78, 221, 0.35),
    0 0 16px rgba(157, 78, 221, 0.55);
}

.pagination-carousel__prev.is-disabled,
.pagination-carousel__prev:disabled,
.pagination-carousel__next.is-disabled,
.pagination-carousel__next:disabled,
.guide-list-pagination--figma .pagination__prev:disabled,
.guide-list-pagination--figma .pagination__next:disabled,
.guide-list-pagination:not(.guide-list-pagination--figma) .pagination__prev:disabled,
.guide-list-pagination:not(.guide-list-pagination--figma) .pagination__next:disabled,
.guide-camping-gallery__arrow.is-disabled,
.guide-camping-gallery__arrow:disabled,
.guide-camping-gallery__arrow.swiper-button-disabled,
.camping-detail-nearby__pag-btn:disabled {
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  cursor: not-allowed;
  color: var(--color-border-strong, #ced4da);
  box-shadow: none;
}

.pagination-carousel__indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pagination-carousel__arrow,
.pagination-carousel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.pagination-carousel__arrow img,
.pagination-carousel__icon img,
.pagination-carousel__arrow-svg {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.guide-camping-gallery__arrow:not(:disabled):not(.is-disabled):not(.swiper-button-disabled) .guide-camping-gallery__arrow-icon img,
.camping-detail-nearby__pag-btn:not(:disabled) img {
  filter: brightness(0) invert(1);
}

.guide-camping-gallery__arrow.is-disabled,
.guide-camping-gallery__arrow:disabled,
.guide-camping-gallery__arrow.swiper-button-disabled {
  pointer-events: none;
}

/* Figma — CTA orange : hover #ff9e00, transition 1s (site-wide) */
:is(
  .card-superdeal__cta,
  .card-superdeal__superlight-cta,
  .superdeal-bloc__cta,
  .search-form__submit.btn--primary,
  .search-modal__submit.btn--primary,
  .guide-hosting-strip__cta,
  .camping-detail-reserver__btn--plein,
  .comparateur-offer__no-offer-cta,
  .comparateur-offer__strip-cta,
  .comparateur-hebergement-card__cta,
  .camping-accommodation-card__reserver,
  .camping-accommodation-card__cta,
  .camping-detail-card__offer-cta,
  .camping-detail-practical__map-cta,
  .camping-detail-nearby-card__push-cta,
  .sticky-site-officiel__cta--site,
  .camping-detail-proches-card__voir,
  .camping-detail-avis__depot-btn,
  .card-camping__cta-booking,
  .card-camping > .btn.btn--primary,
  a.card-superdeal--moment:hover .card-superdeal__cta,
  a.card-superdeal:hover .card-superdeal__cta,
  .superdeal-bloc-section--second a.card-superdeal--superlight:hover .card-superdeal__superlight-cta
) {
  transition:
    background-color var(--transition-primary-cta, 1s ease),
    background var(--transition-primary-cta, 1s ease),
    opacity var(--transition-primary-cta, 1s ease),
    filter var(--transition-primary-cta, 1s ease);
}

:is(
  .card-superdeal__cta,
  .card-superdeal__superlight-cta,
  .superdeal-bloc__cta,
  .search-form__submit.btn--primary,
  .search-modal__submit.btn--primary,
  .guide-hosting-strip__cta,
  .camping-detail-reserver__btn--plein,
  .comparateur-offer__no-offer-cta,
  .comparateur-offer__strip-cta,
  .comparateur-hebergement-card__cta,
  .camping-accommodation-card__reserver,
  .camping-accommodation-card__cta,
  .camping-detail-card__offer-cta,
  .camping-detail-practical__map-cta,
  .camping-detail-nearby-card__push-cta,
  .sticky-site-officiel__cta--site,
  .camping-detail-proches-card__voir,
  .camping-detail-avis__depot-btn,
  .card-camping__cta-booking,
  .card-camping > .btn.btn--primary
):hover,
:is(
  .card-superdeal__cta,
  .card-superdeal__superlight-cta,
  .superdeal-bloc__cta,
  .search-form__submit.btn--primary,
  .search-modal__submit.btn--primary,
  .guide-hosting-strip__cta,
  .camping-detail-reserver__btn--plein,
  .comparateur-offer__no-offer-cta,
  .comparateur-offer__strip-cta,
  .comparateur-hebergement-card__cta,
  .camping-accommodation-card__reserver,
  .camping-accommodation-card__cta,
  .camping-detail-card__offer-cta,
  .camping-detail-practical__map-cta,
  .camping-detail-nearby-card__push-cta,
  .sticky-site-officiel__cta--site,
  .camping-detail-proches-card__voir,
  .camping-detail-avis__depot-btn,
  .card-camping__cta-booking,
  .card-camping > .btn.btn--primary
):focus-visible,
a.card-superdeal--moment:hover .card-superdeal__cta,
a.card-superdeal--moment:focus-visible .card-superdeal__cta,
a.card-superdeal:hover .card-superdeal__cta,
a.card-superdeal:focus-visible .card-superdeal__cta,
.superdeal-bloc-section--second a.card-superdeal--superlight:hover .card-superdeal__superlight-cta,
.superdeal-bloc-section--second a.card-superdeal--superlight:focus-visible .card-superdeal__superlight-cta,
.guide-top-push-card-link:hover .guide-top-push-card__cta:hover,
.guide-top-push-card-wrap:hover .guide-top-push-card__cta:hover,
.guide-top-push-card-link:focus-visible .guide-top-push-card__cta:focus-visible,
.comparateur-offer__strip:hover .comparateur-offer__strip-cta,
.comparateur-offer__strip:focus-visible .comparateur-offer__strip-cta,
.comparateur-hebergement-card__price-booking:hover .comparateur-hebergement-card__cta,
.comparateur-hebergement-card__price-booking:focus-visible .comparateur-hebergement-card__cta {
  background: var(--color-primary-gradient-end, #ff9e00);
  background-color: var(--color-primary-gradient-end, #ff9e00);
  opacity: 1;
  filter: none;
  color: var(--color-text-inverse, #fff);
  -webkit-text-fill-color: currentColor;
}


/* /v3-css/pages/home.v3.css */
/**
 * Home Page - Figma Desktop & Mobile
 */

/*
 * Header complete (Figma 1469:26874) : fond alpha-secondary-80
 * rgba(36, 0, 70, 0.8) — uniquement sur la home (image hero derrière).
 * Autres pages : fond secondary opaque (voir components.v3.css).
 */
.page-home #main > .header.header--complete {
  background: var(
    --surface-alpha-secondary-alpha-secondary-80,
    rgba(36, 0, 70, 0.8)
  );
  border-bottom: none;
}

.page-home #main > main > .hero {
  margin-top: calc(-1 * var(--header-height-complete, 90px));
}

.page-home .hero {
  margin-bottom: 0;
  /* Figma 157:9386 — photo principale pleine largeur (1728×650), sans radius */
  padding: 0;
}

.page-home .hero .hero__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.page-home .hero .hero__bg img,
.page-home .hero .hero__overlay {
  border-radius: 0;
}

/* Desktop — Figma 1417:16752 (banner) + 1417:16725 (coup de cœur 350×500) */
@media (min-width: 992px) {
  .page-home .region-swiper .swiper-slide,
  .page-home .region-featured,
  .page-home .region-featured__layout {
    min-height: 670px;
    height: 670px;
  }

  .page-home .region-featured {
    border-radius: 20px;
    overflow: hidden;
  }

  .page-home .region-featured__overlay {
    background: linear-gradient(
      0deg,
      rgba(36, 0, 70, 0.6) 0%,
      rgba(36, 0, 70, 0) 100%
    );
  }

  /* Layout Figma : items-end + padding 30px — position absolute pour coller bas-gauche / bas-droite */
  .page-home .region-featured__layout {
    position: relative;
    display: block;
    padding: 30px;
    box-sizing: border-box;
  }

  /* Texte + CTA : bas à gauche, largeur 500px */
  .page-home .region-featured__info {
    position: absolute;
    left: 30px;
    bottom: 30px;
    top: auto;
    right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 500px;
    max-width: calc(100% - 350px - 90px);
    margin: 0;
    flex: none;
    z-index: 2;
  }

  .page-home .region-featured__region-name {
    font-size: 62px;
    line-height: 63px;
    text-align: left;
  }

  .page-home .region-featured__desc {
    text-align: left;
  }

  /* CTA : largeur = texte (pas full width) */
  .page-home .region-featured__cta-region {
    display: inline-flex;
    width: auto;
    max-width: max-content;
    align-self: flex-start;
    flex: 0 0 auto;
  }

  /* Carte coup de cœur : 350×500, bas-droite, inset 30px */
  .page-home .region-featured__card {
    position: absolute;
    right: 30px;
    bottom: 30px;
    top: auto;
    left: auto;
    flex: none;
    width: 350px;
    height: 500px;
    max-width: 350px;
    margin: 0;
    z-index: 3;
    transform: none;
  }

  .page-home .region-featured__card .card-region {
    width: 350px;
    height: 500px;
    border-radius: 20px;
  }

  .page-home .region-featured__card .card-region__bg,
  .page-home .region-featured__card .card-region__image,
  .page-home .region-featured__card .card-region__overlay {
    border-radius: 20px;
  }

  .page-home .region-featured__card .card-region__overlay {
    background: linear-gradient(
      180deg,
      rgba(36, 0, 70, 0) 0%,
      rgba(36, 0, 70, 0.12) 28%,
      rgba(36, 0, 70, 0.55) 46%,
      rgba(36, 0, 70, 0.92) 62%,
      #240046 78%,
      #240046 100%
    );
  }

  /* Contenu camping ancré en bas de la carte */
  .page-home .region-featured__card .card-region__content {
    inset: 0;
    top: 0;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 15px;
    padding: 70px 15px 15px;
  }

  .page-home .region-featured__card .card-region__header,
  .page-home .region-featured__card .card-region__title,
  .page-home .region-featured__card .card-region__location,
  .page-home .region-featured__card .card-region__desc {
    width: 100%;
    text-align: left;
  }

  .page-home .region-featured__card .card-region__stars {
    display: inline-flex;
  }

  .page-home .region-featured__card .card-region__cta {
    align-self: center;
    margin-top: 0;
  }
}

/* Desktop/tablette : ajustements recette (page 1) */
@media (min-width: 768px) {
  /* Titre hero un peu plus haut (Figma) */
  .page-home .hero .hero__headline {
    transform: translateY(calc(-1 * var(--space-15)));
    /* Figma 157:9482 / 157:9440 — bloc texte 840px → titre sur 2 lignes */
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .page-home .hero .hero__title {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Forcer le retour ligne avant "prochaines vacances" (Figma desktop) */
  .page-home .hero .hero__title-br--desktop {
    display: block;
  }

  /* Forcer le retour ligne sur "prochaines vacances" uniquement en desktop/tablette */
  .page-home .hero .hero__subtitle-br--desktop {
    display: block;
    height: 0;
  }

  /* Alignement “Nb de personnes” / placeholder (desktop+tablette uniquement) */
  .page-home .search-box .search-form__select {
    line-height: var(--line-height-21);
    padding: 0 0 0 var(--space-10);
    margin: 0;
  }
  .page-home .search-box .search-form__select:has(option[value=""]:checked) {
    color: var(--color-text-muted, #adb5bd);
    height: 27px;
  }
}

/* Desktop: empêcher la coupure "prochaines vacances" */
@media (min-width: 835px) {
  .page-home .hero__nowrap-desktop {
    white-space: nowrap;
  }
}

/* Mobile : ne pas forcer le retour ligne du titre / sous-titre */
@media (max-width: 767px) {
  .page-home .hero .hero__title-br--desktop,
  .page-home .hero .hero__subtitle-br--desktop {
    display: none;
  }
}

.page-home .search-chips .chip {
  /* Recette : libellés (ex: "Famille") alignés à gauche */
  justify-content: flex-start;
}

@media (min-width: 835px) {
  .page-home .search-section {
    margin-top: -105px;
  }

  /* Figma 347:7392 — search block desktop 900×210 */
  .page-home .search-box {
    width: 100%;
    max-width: 900px;
    height: 210px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-30);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
  }

  .page-home .search-box .search-form {
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    margin-bottom: 0;
    align-items: center;
    flex-shrink: 0;
  }

  .page-home .search-box .search-shortcuts__title {
    margin-bottom: 0;
    line-height: var(--line-height-21);
    flex-shrink: 0;
  }

  .page-home .search-chips {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  .page-home .search-chips .chip {
    height: 31px;
    box-sizing: border-box;
  }

  .page-home .search-chips .chip__icon {
    width: 15px;
    height: 15px;
  }

  .page-home .search-box .search-form--classic .search-form__item {
    justify-content: center;
  }

  .page-home .search-box .search-form--classic .search-form__label {
    font-size: var(--font-size-18);
    line-height: var(--line-height-27);
    margin-bottom: 0;
  }

  .page-home .search-box .search-form--classic .search-form__list-value,
  .page-home .search-box .search-form--classic .search-form__input {
    font-size: var(--font-size-14);
    line-height: var(--line-height-21);
  }
}

/* Zone recherche — Figma 157:9464 : search field = token CTA (pilule / 100px) */
.page-home .search-box .search-form {
  border-radius: var(--radius-cta);
  height: auto;
  min-height: 68px;
  padding-left: 20px;
  position: relative;
  overflow: visible;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 835px) {
  .page-home .search-box .search-form {
    height: 68px;
    min-height: 68px;
    max-height: 68px;
  }
}

@media (min-width: 768px) {
  .page-home .search-box .search-form > .search-calendar-popover {
    z-index: 60;
  }
}
/* Après choix d’une suggestion : même encadrement orange que les chips inspirations */
.page-home .search-box .search-form.search-form--picked-from-suggestions {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-strong), 0 0 0 1px var(--color-primary);
}
.page-home .search-box .search-form__submit {
  border-radius: var(--radius-cta);
  padding: var(--space-12) var(--space-18);
  width: auto;
  min-width: min-content;
  height: 35px;
  gap: var(--space-5);
  position: relative;
  z-index: 2;
  isolation: isolate;
}
/* Fond toujours opaque : évite la disparition au survol des suggestions (stacking / opacity) */
.page-home .search-box .search-form__submit.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  opacity: 1;
  transition:
    background-color var(--transition-primary-cta, 1s ease),
    background var(--transition-primary-cta, 1s ease);
}
.page-home .search-box .search-form__submit.btn--primary:hover,
.page-home .search-box .search-form__submit.btn--primary:focus-visible {
  background: var(--color-primary-gradient-end, #ff9e00);
  background-color: var(--color-primary-gradient-end, #ff9e00);
  opacity: 1;
  filter: none;
  color: var(--color-text-inverse);
}
.page-home .search-box .search-form__submit img {
  margin: 0;
}

/* Desktop : bouton Rechercher 150×48px */
@media (min-width: 835px) {
  .page-home .search-box .search-form__submit {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    min-height: 48px;
    height: 48px;
    box-sizing: border-box;
    justify-content: center;
    padding: var(--space-10) var(--space-15);
  }
}

/* Select nombre de personnes : sans flèche native (Figma) */
.page-home .search-box .search-form__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  padding-left: var(--space-10);
  padding-right: 0;
}
/* Placeholder (option vide) : même gris que Destination / dates — pas :valid (champ non required) */
.page-home .search-box .search-form__select:has(option[value=""]:checked) {
  color: var(--color-text-muted, #adb5bd);
}

/* Options : même couleur que le champ rempli (pas gris placeholder) */
.page-home .search-box .search-form__select option {
  color: var(--color-text);
  padding-left: var(--space-10);
}

/* Moteur home : destination, date, durée, personnes — même typo (14px regular, pas de gras) */
.page-home .search-box .search-form__input,
.page-home .search-box .search-form__select {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  font-weight: var(--font-weight-regular);
}

.page-home .search-box .search-form__input::placeholder {
  color: var(--color-text-muted, #adb5bd);
  opacity: 1;
}

.page-home .search-box .search-form--classic .search-form__item--departure-select .search-form__list-trigger,
.page-home .search-box .search-form--classic .search-form__item--duration-select .search-form__list-trigger,
.page-home .search-box .search-form--classic .search-form__item--select .search-form__list-trigger,
.page-home .search-box .search-form--classic .search-form__item--departure-select .search-form__list-value,
.page-home .search-box .search-form--classic .search-form__item--duration-select .search-form__list-value,
.page-home .search-box .search-form--classic .search-form__item--select .search-form__list-value,
.page-home .search-box .search-form--classic .search-form__list-trigger--has-value,
.page-home .search-box .search-form--classic .search-form__list-trigger--has-value .search-form__list-value,
.page-home .search-box .search-form--classic .search-form__list-trigger--placeholder,
.page-home .search-box .search-form--classic .search-form__list-trigger--placeholder .search-form__list-value {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted, #adb5bd);
}

.page-home .search-box .search-form__select {
  text-align: left;
  color: var(--color-text-muted, #adb5bd);
}

/* Moteur classique (date de départ + durée) — listes déroulantes vers le bas */
.search-form--classic {
  overflow: visible;
}

.search-form--classic .search-form__fields,
.search-form--classic .search-form__item--departure-select,
.search-form--classic .search-form__item--duration-select,
.search-form--classic .search-form__item--select {
  overflow: visible;
}

.page-home .search-box .search-form--classic {
  flex-wrap: nowrap;
  max-height: none;
  align-items: center;
}

@media (min-width: 835px) {
  .page-home .search-box .search-form--classic {
    height: 68px;
    min-height: 68px;
    max-height: 68px;
  }
}

.search-form--classic-header .search-form__item--departure-select,
.search-form--classic-header .search-form__item--duration-select {
  justify-content: center;
}

.search-form--classic-header .search-form__select--departure,
.search-form--classic-header .search-form__select--duration {
  text-align: center;
  text-align-last: center;
}

.search-form--classic-header .search-form__select--placeholder {
  color: var(--text-secondary-secondary-100, #240046);
}

.search-form__label--sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-home .search-box .search-form--classic .search-form__item--departure-select,
.page-home .search-box .search-form--classic .search-form__item--duration-select {
  flex: 0 1 auto;
  min-width: 0;
}

.page-home .search-box .search-form--classic .search-form__list-trigger {
  min-width: 0;
  max-width: 100%;
}

.page-home .search-box .search-form__list {
  z-index: 80;
}

@media (min-width: 835px) {
  /* Destination un peu plus étroite pour laisser « Nb de personnes » sur 1 ligne */
  .page-home .search-box .search-form--classic .search-form__item--text {
    flex: 1 1 0;
    min-width: 0;
    max-width: 180px;
  }

  .page-home .search-box .search-form--classic .search-form__item--departure-select {
    min-width: 130px;
    max-width: 150px;
  }

  .page-home .search-box .search-form--classic .search-form__item--duration-select {
    min-width: 90px;
    max-width: 110px;
  }

  .page-home .search-box .search-form--classic .search-form__item--select {
    flex: 0 0 auto;
    min-width: 145px;
  }

  .page-home .search-box .search-form--classic .search-form__item--select .search-form__label {
    white-space: nowrap;
  }
}

/* Mobile / tablette : libellé masqué, icône seule (desktop : Rechercher + icône) */
@media (max-width: 834px) {
  .page-home .search-box .search-form__submit .search-form__submit-text {
    display: none;
  }
  .page-home .search-box .search-form__submit {
    width: auto;
    min-width: min-content;
    max-width: none;
  }
}

/* Autocomplete destination (/engine/search) — liste sous le champ */
.page-home .search-form__item--text {
  position: relative;
}
.page-home .search-box .search-form__item--text {
  position: static;
}
.page-home .search-box .autoComplete_wrapper,
.page-home .search-modal .autoComplete_wrapper,
.page-home .guide-search-card .autoComplete_wrapper,
.page-home .guide-search-header-mobile .autoComplete_wrapper {
  width: 100%;
}
.page-home .search-box .autoComplete_wrapper > ul,
.page-home .search-modal .autoComplete_wrapper > ul,
.page-home .guide-search-card .autoComplete_wrapper > ul,
.page-home .guide-search-header-mobile .autoComplete_wrapper > ul {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-card, 12px);
  background: #fff;
}
.page-home .search-box .autoComplete_wrapper > ul > li,
.page-home .search-modal .autoComplete_wrapper > ul > li,
.page-home .guide-search-card .autoComplete_wrapper > ul > li,
.page-home .guide-search-header-mobile .autoComplete_wrapper > ul > li {
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.page-home .search-box .autoComplete_wrapper > ul > li[role="option"],
.page-home .search-modal .autoComplete_wrapper > ul > li[role="option"],
.page-home .guide-search-card .autoComplete_wrapper > ul > li[role="option"],
.page-home .guide-search-header-mobile .autoComplete_wrapper > ul > li[role="option"] {
  cursor: pointer;
}
.page-home .search-box .autoComplete_wrapper > ul > li > .autocomplete-suggestion__text,
.page-home .search-modal .autoComplete_wrapper > ul > li > .autocomplete-suggestion__text,
.page-home .guide-search-card .autoComplete_wrapper > ul > li > .autocomplete-suggestion__text,
.page-home .guide-search-header-mobile .autoComplete_wrapper > ul > li > .autocomplete-suggestion__text,
.page-home .search-box .autoComplete_wrapper > ul > li > span,
.page-home .search-modal .autoComplete_wrapper > ul > li > span,
.page-home .guide-search-card .autoComplete_wrapper > ul > li > span,
.page-home .guide-search-header-mobile .autoComplete_wrapper > ul > li > span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Suggestions : pas d’effet de survol (fond inchangé) */
.page-home .search-box .autoComplete_wrapper > ul > li[role="option"]:hover {
  background-color: #fff;
}
.page-home .search-box .autoComplete_wrapper > ul > li[role="option"] {
  transition: none;
}
/* Ligne active clavier : bordure inspiration, sans fond gris */
.page-home .search-box .autoComplete_wrapper > ul > li.autocomplete__option--active,
.page-home .search-box .autoComplete_wrapper > ul > li[role="option"][aria-selected="true"] {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.page-home .search-box .autoComplete_wrapper > ul {
  /* sur la home, on veut la largeur du moteur (form), pas juste l’input */
  top: 100%;
  left: 0;
  right: 0;
}
.page-home .search-modal .search-modal__field-wrap {
  position: relative;
}
.page-home .autocomplete-separator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 6px;
  box-sizing: border-box;
}
.page-home .autocomplete-separator--campings {
  margin-top: 10px;
}
.page-home .autocomplete-separator__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.page-home .autocomplete-separator__label {
  font-family: var(--font-family-primary, inherit);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
  background: linear-gradient(
    180deg,
    var(--color-primary-gradient-end, #ff9e00),
    var(--color-secondary-light, #9d4edd)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Dans la modale mobile : même style séparateur que desktop (pas la couleur des résultats) */
.page-home .search-modal .autocomplete-separator,
.page-home .search-modal .autocomplete-separator .autocomplete-separator__label {
  pointer-events: none;
  cursor: default;
}
.page-home .search-modal .autocomplete-separator .autocomplete-separator__label {
  font-family: var(--font-family-primary, inherit);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
  background: linear-gradient(
    180deg,
    var(--color-primary-gradient-end, #ff9e00),
    var(--color-secondary-light, #9d4edd)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Soulignement sous icône + titre (pleine largeur) */
.page-home .autocomplete-separator::after {
  content: "";
  flex: 1 0 100%;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--color-primary-gradient-end, #ff9e00),
    var(--color-secondary-light, #9d4edd)
  );
}

.page-home .explore-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
}

.page-home .explore-cards .card-destination-link--featured {
  width: 100%;
  display: block;
}

.page-home .section-destinations .card-destination-link {
  display: block;
}

.page-home .section-destinations .card-destination-link .card-destination {
  width: 100%;
  box-sizing: border-box;
}

.page-home .explore-destinations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
  width: 100%;
}

.page-home .explore-destinations-swiper-wrap {
  display: none;
}

.page-home .explore-destinations .card-destination {
  height: 250px;
  min-height: 250px;
  padding: var(--space-15);
  box-sizing: border-box;
}

.page-home .explore-destinations .card-destination-link {
  width: 100%;
  height: auto;
}

.page-home section.section-destinations {
  width: 100%;
  max-width: var(--container-max);
  margin: var(--space-50) auto 0;
  padding: 0;
  box-sizing: border-box;
}

.page-home section.section-destinations > .container {
  padding: 0;
}

.page-home .section-destinations__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  max-width: 800px;
  margin: 0 auto var(--space-50);
  text-align: center;
}

.page-home .section-destinations__title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-63);
  color: var(--color-secondary, #240046);
}

.page-home .section-destinations__badge {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-36);
  color: var(--color-primary, #ff6d00);
  text-transform: none;
}

.page-home .section-destinations__subtitle {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-secondary, #240046);
}

.page-home .section-destinations .card-destination--large {
  height: 500px;
  min-height: 500px;
  padding: var(--space-30);
  box-sizing: border-box;
}

.page-home .section-destinations .card-destination--large .card-destination__title {
  font-size: var(--font-size-28);
  line-height: var(--line-height-30);
}

.page-home .section-destinations__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-50);
}

/* Blocs de netlinking additionnels de la section destinations (gabarit "rectangle",
   sheet "liens HP à ajouter") — espacement par rapport aux cartes images au-dessus. */
.page-home .section-destinations__extra-netlinking {
  margin-top: var(--space-30);
}

/* Desktop / tablet : grille, mêmes classes visuelles que le bloc netlinking bas de page. */
.page-home .section-destinations__extra-links {
  margin-top: 0;
}

/* Mobile — un seul slide visible à la fois, largeur 100% du conteneur : contrairement au bloc
   bas de page, pas de "peek" du slide suivant (son calcul de débordement est calibré sur un
   padding de conteneur différent de celui de la section destinations). */
.page-home .section-destinations__extra-netlinking-swiper-wrap {
  display: none;
}

@media (max-width: 767px) {
  .page-home .section-destinations__extra-links {
    display: none;
  }

  .page-home .section-destinations__extra-netlinking-swiper-wrap {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .page-home .section-destinations__extra-netlinking-swiper {
    width: 100%;
    overflow: hidden;
  }

  .page-home .section-destinations__extra-netlinking-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
  }

  .page-home .section-destinations__extra-netlinking-swiper .swiper-slide {
    width: 100%;
    flex-shrink: 0;
    height: auto;
    box-sizing: border-box;
  }

  /* Points de pagination : seul repère visuel indiquant qu'il y a plus d'une slide,
     puisque ce carrousel n'a volontairement pas de "peek" du slide suivant. */
  .page-home .section-destinations__extra-netlinking-swiper-wrap .pagination-carousel {
    margin-top: var(--space-15);
  }
}

.page-home .section-destinations__cta {
  min-height: 45px;
  padding: var(--space-5) var(--space-15);
  border-radius: var(--radius-cta);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
}

.page-home section.section-destinations .section__subtitle {
  flex-direction: column;
  gap: var(--space-15);
}

.page-home .home-piaf-section {
  width: 100%;
  max-width: var(--container-max);
  margin: var(--space-50) auto 0;
  padding: 0;
  box-sizing: border-box;
}

.page-home .home-piaf-section .container {
  padding: 0;
}

.page-home .home-piaf-section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  max-width: 800px;
  margin: 0 auto var(--space-30);
  text-align: center;
}

.page-home .home-piaf-section__title.section__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-63);
  color: var(--color-secondary, #240046);
}

.page-home .home-piaf-section__text {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-secondary, #240046);
}

.page-home .home-piaf-section__content {
  display: flex;
  align-items: stretch;
  gap: var(--space-20);
  width: 100%;
}

.page-home .home-piaf-section__avatar {
  flex: 0 0 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
  border-radius: var(--radius-image, 20px);
  background: linear-gradient(
    90deg,
    rgba(255, 109, 0, 0.2),
    rgba(157, 78, 221, 0.2)
  );
  box-sizing: border-box;
}

.page-home .home-piaf-section__avatar-img {
  width: 100%;
  max-width: 112px;
  height: auto;
  aspect-ratio: 152 / 125;
  object-fit: contain;
  display: block;
}

.page-home .home-piaf-section__panel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-15);
  background: var(--color-surface, #fff);
  border-radius: var(--radius-card);
  box-shadow: 0 0 7.5px var(--color-border-light, #e9ecef);
  box-sizing: border-box;
}

.page-home .home-piaf-section__panel::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid var(--color-surface, #fff);
  filter: drop-shadow(-1px 0 1px rgba(233, 236, 239, 0.9));
}

.page-home .home-piaf-section__input-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: var(--space-5) var(--space-10);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: var(--radius-label, 5px);
  background: var(--color-surface, #fff);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.page-home .home-piaf-section__input-field:hover,
.page-home .home-piaf-section__input-field:focus-visible {
  border-color: var(--color-primary, #ff6d00);
  box-shadow: 0 0 0 1px rgba(255, 109, 0, 0.15);
  outline: none;
}

.page-home .home-piaf-section__input-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.page-home .home-piaf-section__input-icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.page-home .home-piaf-section__input-placeholder {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: 300;
  line-height: var(--line-height-27);
  color: var(--color-text-muted, #6c757d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-home .home-piaf-section__suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.page-home .home-piaf-section__suggestions-label {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-21);
  color: var(--color-text, #000);
  text-align: left;
}

.page-home .home-piaf-section__suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  width: 100%;
}

.page-home .home-piaf-section__suggestion {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-5) var(--space-10);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: var(--radius-label, 5px);
  /* Figma 1480:12084 — fond grayscale #f8f9fa (pas surface-muted #e9ecef) */
  background: var(--color-surface-alt, #f8f9fa);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: 300;
  line-height: var(--line-height-27);
  color: var(--color-secondary, #240046);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.page-home .home-piaf-section__suggestion:hover,
.page-home .home-piaf-section__suggestion:focus-visible {
  border-color: var(--color-primary, #ff6d00);
  background: rgba(255, 109, 0, 0.08);
  outline: none;
}

.page-home .articles-section {
  position: relative;
  padding: var(--space-50) 0;
  /* Fond crème tronqué via ::before (Figma Mag 1426:17868 / mobile 1480:12832) */
  background: transparent;
}

/* Fond crème s’arrête au-dessus des titres des cartes + CTA
   (portion image des cards immersives 269px / 411px) */
.page-home .articles-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(
    var(--space-50) /* padding-bottom section */
    + var(--space-25) /* marge CTA */
    + 45px /* hauteur bouton CTA */
    + (411px - 269px) /* zone titres des cartes */
  );
  background: rgba(255, 109, 0, 0.2);
  z-index: 0;
  pointer-events: none;
}

/* Mobile : + pagination carousel entre cartes et CTA */
@media (max-width: 767px) {
  .page-home .articles-section::before {
    bottom: calc(
      var(--space-50)
      + var(--space-25)
      + 45px
      + var(--space-15) /* margin-top pagination */
      + 10px /* hauteur dots */
      + (411px - 269px)
    );
  }
}

/* Aligner la largeur sur la section Destinations (même zone de contenu) */
.page-home .articles-section .container {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.page-home .articles-section__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  margin-bottom: var(--space-50);
}

.page-home .articles-section__title-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-15);
  border-radius: var(--radius-label, 5px);
  background: var(--color-secondary, #240046);
}

.page-home .articles-section__title.section__title {
  margin: 0;
  color: #fff;
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-63);
  text-align: center;
}

.page-home .articles-section__subtitle {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-36);
  color: var(--color-secondary, #240046);
  text-align: center;
}

.page-home .articles-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
}

.page-home .articles-section__main {
  width: 100%;
}

.page-home .articles-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
}

.page-home .articles-section .card-article--large.card-article--immersive {
  height: 500px;
}

.page-home .articles-section .articles-cards .card-article--immersive {
  height: 300px;
}

.page-home .articles-section .articles-cards .card-article--immersive .card-article__inner {
  padding: var(--space-15);
}

.page-home .articles-section .card-article--immersive {
  border: none;
  background: transparent;
  height: 100%;
}

.page-home .articles-section .card-article--immersive .card-article__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
  padding: var(--space-20);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-sizing: border-box;
}

.page-home .articles-section .card-article--immersive .card-article__media {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  aspect-ratio: unset;
  max-height: none;
  background: transparent;
}

.page-home .articles-section .card-article--immersive .card-article__image {
  border-radius: var(--radius-card);
}

.page-home .articles-section .card-article--immersive .card-article__overlay {
  border-radius: var(--radius-card);
  /* Violet uniquement sur le 1/3 bas */
  background: var(--gradient-photo-overlay);
}

.page-home .articles-section .card-article--immersive .card-article__body {
  position: relative;
  z-index: 1;
  padding: 0;
  gap: var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-home .articles-section .card-article--immersive .card-article__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  min-width: 0;
}

.page-home .articles-section .card-article--large.card-article--immersive .card-article__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  color: #fff;
  margin: 0;
  max-width: none;
  padding: 0;
}

.page-home .articles-section .card-article--immersive:not(.card-article--large) .card-article__title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: #fff;
  margin: 0;
  max-height: 55px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (hover: hover) {
  .page-home .articles-section .card-article--immersive .card-article__inner:hover .card-article__title,
  .page-home .articles-section .card-article--immersive .card-article__inner:focus-visible .card-article__title {
    background: linear-gradient(
      90deg,
      var(--color-primary) 0%,
      var(--color-primary-gradient-end) 45%,
      var(--color-secondary-light) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: 0.1em;
  }
}

.page-home .articles-section .card-article__hashtag {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-home .articles-section .card-article__category {
  display: inline-flex;
  align-items: center;
  padding: var(--space-5) var(--space-10);
  border-radius: var(--radius-label, 5px);
  border: 1px solid var(--color-border-strong, #ced4da);
  background: rgba(36, 0, 70, 0.8);
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
}

.page-home .articles-section .card-article__location {
  position: absolute;
  top: var(--space-20);
  left: var(--space-20);
  z-index: 2;
  padding: var(--space-5) var(--space-10);
  border-radius: var(--radius-label, 5px);
  background: var(--color-primary, #ff6d00);
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
}

.page-home .articles-section__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-25);
}

.page-home .articles-section__cta.btn {
  min-height: 45px;
  padding: var(--space-5) var(--space-15);
  border-radius: var(--radius-cta, 100px);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  line-height: var(--line-height-21);
}

.page-home .articles-section__carousel {
  display: none;
}

/* Bloc mobile « tops campings » : caché sur desktop, uniquement les 3 cartes + carousel */
.page-home .top-campings-swiper-wrap--mobile {
  display: none;
}
@media (min-width: 768px) {
  .page-home .top-campings-swiper-wrap--mobile {
    display: none !important;
  }
}

/* Même rythme vertical que la section Super Deal — Figma 1417:16720 */
.page-home .region-section {
  position: relative;
  padding: var(--space-50) 0;
  margin-top: 0;
}

.page-home .region-section__heading {
  margin-bottom: var(--space-50);
  text-align: center;
}

@media (min-width: 768px) {
  /* Figma 1417:16720 – section pleine largeur 1200px (sans padding container) */
  .page-home .region-section > .container,
  .page-home .region-section .region-swiper-wrap.container {
    padding-left: 0;
    padding-right: 0;
    max-width: var(--container-max);
  }
}

.page-home .region-section .region-swiper-wrap.container {
  padding-left: 0;
  padding-right: 0;
}

.page-home .region-swiper-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-50);
  align-items: center;
}

.page-home .region-swiper {
  overflow: hidden;
  border-radius: var(--radius-card);
  width: 100%;
}

.page-home .region-swiper .swiper-wrapper {
  display: flex;
  transition-property: transform;
  align-items: stretch;
}

.page-home .region-swiper .swiper-slide {
  flex-shrink: 0;
  width: 100% !important;
  height: auto;
  min-height: 670px;
  box-sizing: border-box;
}

.page-home .region-featured {
  position: relative;
  width: 100%;
  min-height: 670px;
  height: 670px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-sizing: border-box;
}

.page-home .region-featured__bg {
  position: absolute;
  inset: 0;
}

.page-home .region-featured__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-home .region-featured__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(36, 0, 70, 0.6) 0%, rgba(36, 0, 70, 0) 100%);
  pointer-events: none;
}

.page-home .region-featured__layout {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 670px;
  padding: 30px;
  box-sizing: border-box;
}

.page-home .region-featured__info {
  position: absolute;
  left: 30px;
  bottom: 30px;
  top: auto;
  right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  width: 500px;
  max-width: calc(100% - 350px - 90px);
  margin: 0;
  z-index: 2;
}

.page-home .region-featured__region-name {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: 62px;
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-63);
  color: var(--color-text-inverse);
  word-break: break-word;
  text-align: left;
}

.page-home .region-featured__region-name:empty {
  display: none;
}

.page-home .region-featured__desc {
  margin: 0;
  max-height: 80px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

.page-home .region-featured__cta-region {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: max-content;
  align-self: flex-start;
  flex: 0 0 auto;
  min-height: 65px;
  padding: var(--space-5) var(--space-15);
  border-radius: var(--radius-cta);
  background: var(--color-secondary, #240046);
  color: var(--color-text-inverse);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold); /* row 311 : label CTA région en gras */
  line-height: var(--line-height-27);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    transform 0.2s ease;
}

.page-home .region-featured__cta-region:hover,
.page-home .region-featured__cta-region:focus-visible {
  background: var(--color-secondary-light, #9d4edd);
  transform: translateX(4px);
}

.region-featured__cta-arrow {
  margin-left: var(--space-5);
}

.page-home .region-featured__card {
  position: absolute;
  right: 30px;
  bottom: 30px;
  top: auto;
  left: auto;
  width: 350px;
  height: 500px;
  max-width: 350px;
  margin: 0;
  z-index: 3;
}

.page-home .region-featured__card .card-region {
  width: 350px;
  height: 500px;
}

.page-home .region-section .pagination-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-15);
  width: auto;
  max-width: none;
  margin-top: var(--space-20);
  visibility: visible;
  opacity: 1;
}

.page-home .region-section .pagination-carousel__prev.is-disabled,
.page-home .region-section .pagination-carousel__prev:disabled {
  background: rgba(255, 255, 255, 0.4);
  color: var(--color-border-strong, #ced4da);
}

.page-home .region-section .pagination-carousel__next:not(.is-disabled):not(:disabled),
.page-home .region-section .pagination-carousel__prev:not(.is-disabled):not(:disabled) {
  background: rgba(36, 0, 70, 0.8);
  color: #ffffff;
}

.page-home .region-section .pagination-carousel__bullet {
  background: rgba(36, 0, 70, 0.2);
  border-color: #fff;
}

.page-home .region-section .pagination-carousel__bullet--active {
  background: var(--color-secondary, #240046);
  border-color: var(--color-secondary, #240046);
}

/* Pagination carousel: three dashes (bullets) + arrows */
.page-home .guide-top-moment-pagination .pagination-carousel__prev:not(.is-disabled):not(:disabled),
.page-home .guide-top-moment-pagination .pagination-carousel__next:not(.is-disabled):not(:disabled) {
  background: rgba(36, 0, 70, 0.8);
  color: #ffffff;
}

.page-home .guide-top-moment-pagination .pagination-carousel__prev.is-disabled,
.page-home .guide-top-moment-pagination .pagination-carousel__prev:disabled,
.page-home .guide-top-moment-pagination .pagination-carousel__next.is-disabled,
.page-home .guide-top-moment-pagination .pagination-carousel__next:disabled {
  background: rgba(255, 255, 255, 0.4);
  color: var(--color-border-strong, #ced4da);
  cursor: not-allowed;
}

.page-home .pagination-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-15);
}

.page-home .pagination-carousel__prev,
.page-home .pagination-carousel__next {
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  border-radius: var(--radius-cta);
  border: none;
  color: var(--color-text-inverse);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    opacity 0.2s,
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}

.page-home .pagination-carousel__prev {
  background: rgba(36, 0, 70, 0.8);
  color: #ffffff;
}

.page-home .pagination-carousel__next {
  background: rgba(36, 0, 70, 0.8);
  color: #ffffff;
}

.page-home .pagination-carousel__prev:hover:not(.is-disabled):not(:disabled),
.page-home .pagination-carousel__next:hover:not(.is-disabled):not(:disabled) {
  opacity: 1;
  background: var(--color-secondary, #240046);
  box-shadow:
    0 0 0 2px rgba(157, 78, 221, 0.35),
    0 0 16px rgba(157, 78, 221, 0.55);
}

.page-home .pagination-carousel__prev.is-disabled,
.page-home .pagination-carousel__prev:disabled {
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  cursor: not-allowed;
  color: var(--color-border-strong, #ced4da);
}

.page-home .pagination-carousel__next.is-disabled,
.page-home .pagination-carousel__next:disabled {
  background: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  opacity: 1;
  color: var(--color-border-strong, #ced4da);
}

.page-home .pagination-carousel__indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Traits inactifs : gris clair (comme maquette) */
.page-home .pagination-carousel__bullet {
  width: 50px;
  height: 5px;
  border-radius: 100px;
  background: var(--color-surface-muted, #e9ecef);
  border: 1px solid var(--color-border, #dee2e6);
  cursor: pointer;
  transition: background 0.2s;
  box-sizing: border-box;
}

.page-home .pagination-carousel__bullet:hover {
  background: var(--color-border-strong, #ced4da);
}

.page-home .pagination-carousel__bullet--active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  height: 6px;
}

/* Flèches (pas chevrons) - centrées verticalement */
.page-home .pagination-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.page-home .pagination-carousel__arrow img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.page-home .pagination-carousel__arrow-svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Meilleurs campings du moment : swiper 3 cartes pleine largeur + pagination */
.page-home .top-campings-section .container {
  padding-left: 0;
  padding-right: 0;
}

.page-home .top-campings-swiper-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
}

.page-home .top-campings-swiper {
  overflow: hidden;
  width: 100%;
  /* Empêche le navigateur de traiter le swipe comme un scroll page horizontal,
     laisse Swiper gérer le déplacement des cartes. */
  touch-action: pan-y;
}

.page-home .top-campings-swiper .swiper-wrapper {
  display: flex;
  transition-property: transform;
  align-items: stretch;
  touch-action: pan-y;
}

/* Une seule slide (une ligne de 3 cartes) visible : 100 % du viewport — uniquement sur le carousel desktop */
.page-home
  .top-campings-swiper-wrap--desktop
  .top-campings-swiper
  .swiper-slide {
  flex-shrink: 0;
  width: 100% !important;
  height: auto;
  box-sizing: border-box;
}

.page-home .top-campings-swiper__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

.page-home .top-camping-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

/* Affinez votre recherche par région — Figma 1588:15698 */
.page-home .home-netlinking-section {
  padding: var(--space-50) 0;
  background: #ffffff;
}

.page-home .home-netlinking-section .container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

.page-home .home-netlinking-section__title {
  margin: 0 0 var(--space-50);
  text-align: center;
  color: var(--color-secondary, #240046);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-42, 42px);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-63, 63px);
}

.page-home .home-netlinking__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: var(--space-10);
  width: 100%;
}

.page-home .home-netlinking__link {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
  padding: var(--space-10) var(--space-15);
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  text-decoration: none;
  color: #000000;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-home .home-netlinking__link:hover,
.page-home .home-netlinking__link:focus-visible {
  border-color: var(--color-primary, #ff6d00);
  box-shadow: 0 1px 4px rgba(36, 0, 70, 0.08);
}

.page-home .home-netlinking__label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18, 18px);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27, 27px);
}

.page-home .home-netlinking__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-primary, #ff6d00);
}

.page-home .home-netlinking__arrow svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Desktop only — swipe mobile masqué */
.page-home .home-netlinking-swiper-wrap {
  display: none;
}

@media (max-width: 991px) {
  .page-home .home-netlinking__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-15);
  }
}

/* Mobile — swipe 5 liens / slide + peek (Figma 1588:15699) */
@media (max-width: 767px) {
  .page-home .home-netlinking-section {
    padding: var(--space-50) 0;
  }

  .page-home .home-netlinking-section .container {
    padding-left: var(--space-20, 20px);
    padding-right: var(--space-20, 20px);
    box-sizing: border-box;
  }

  .page-home .home-netlinking-section__title {
    font-size: var(--font-size-32, 32px);
    line-height: var(--line-height-36, 36px);
    margin: 0 0 var(--space-50);
  }

  .page-home .home-netlinking__grid {
    display: none;
  }

  .page-home .home-netlinking-swiper-wrap {
    display: block;
    /* Déborde à droite pour le peek ; clip à gauche pour cacher le slide précédent */
    width: calc(100% + var(--space-20, 20px));
    max-width: none;
    margin-right: calc(-1 * var(--space-20, 20px));
    overflow: hidden;
  }

  .page-home .home-netlinking-swiper {
    /* Largeur = colonne contenu (pas le peek) → 1 slide exact, pas de flèches à gauche */
    width: calc(100% - var(--space-20, 20px));
    max-width: 310px;
    overflow: visible;
  }

  .page-home .home-netlinking-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
  }

  .page-home .home-netlinking-swiper .swiper-slide {
    width: 100%;
    flex-shrink: 0;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
  }

  .page-home .home-netlinking__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
    width: 100%;
  }

  .page-home .home-netlinking__link {
    min-height: 60px;
    height: 60px;
  }
}

/* Pourquoi choisir Toocamp — panneau gris contient le titre + cartes
   Desktop Figma 1464:19668 (1200, radius 20) ; mobile pleine largeur radius 0 */
.page-home .why-toocamp-section {
  padding: var(--space-50) 0;
  background: #ffffff;
}

.page-home .why-toocamp-section .container,
.page-home #why-toocamp .container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  box-sizing: border-box;
}

.page-home .why-toocamp-section__panel {
  /* Fond gris 1200 ; contenu inset 72px L/R (1056 dans 1200) */
  padding: var(--space-50) 72px;
  background: var(--color-surface-alt, #f8f9fa);
  border-radius: var(--radius-card, 20px);
  box-sizing: border-box;
}

.page-home .why-toocamp-section__title {
  max-width: 500px;
  margin: 0 auto var(--space-25);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: clamp(32px, 5vw, 62px);
  font-weight: var(--font-weight-black);
  line-height: 1.02;
  color: var(--color-secondary, #240046);
}

.page-home .why-toocamp-section__title-accent {
  display: block;
  background: linear-gradient(90deg, #ff9e00 0%, #9d4edd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-home .why-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
  max-width: none;
  margin: 0;
}

.page-home .why-cards__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
  align-items: stretch;
}

.page-home .why-cards .card-value {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  height: 100%;
  margin: 0;
  padding: var(--space-20);
  background: #ffffff;
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: var(--radius-card, 20px);
  box-sizing: border-box;
}

.page-home .why-cards .card-value__title {
  margin: 0;
  font-size: var(--font-size-24);
  line-height: var(--line-height-27);
  background: linear-gradient(90deg, var(--color-primary, #ff6d00) 0%, #9d4edd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-home .why-cards .card-value__title--featured {
  font-size: var(--font-size-32);
  line-height: var(--line-height-36);
}

.page-home .why-cards .card-value__text {
  margin: 0;
  color: var(--color-secondary, #240046);
}

/* Carousel valeurs: uniquement mobile (desktop/tablette = grille) */
.page-home .why-cards-swiper-wrap {
  display: none;
}

/* Histoires de Campings — Figma 1442:17955 */
.page-home .home-camping-stories-section {
  position: relative;
  padding: var(--space-50) 0;
  overflow: hidden;
}

.page-home .home-camping-stories-section__bg {
  position: absolute;
  inset: 0;
  background: #111191;
  pointer-events: none;
}

.page-home .home-camping-stories-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/v3/histoires-camping-dots.svg") center / cover no-repeat;
  opacity: 1;
}

.page-home .home-camping-stories-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-50);
  max-width: calc(var(--container-max) + 300px);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  box-sizing: border-box;
}

.page-home .home-camping-stories-section__intro {
  flex: 0 0 425px;
  max-width: 425px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-25);
  text-align: center;
}

.page-home .home-camping-stories-section__logo {
  display: block;
  width: 100%;
  max-width: 425px;
  height: auto;
}

.page-home .home-camping-stories-section__text {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-36);
  color: #88e1c8;
}

.page-home .home-camping-stories__reels {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 328px));
  gap: var(--space-20);
  justify-content: flex-end;
}

.page-home .home-camping-stories-swiper-wrap {
  display: none;
}

.page-home .card-camping-story {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 328px;
  min-height: 713px;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  overflow: hidden;
  box-sizing: border-box;
}

.page-home .card-camping-story__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-height: 54px;
  box-sizing: border-box;
}

.page-home .card-camping-story__profile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.page-home .card-camping-story__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6d00, #9d4edd, #ff6d00);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #dbdbdb;
}

.page-home .card-camping-story__profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-home .card-camping-story__username {
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-home .card-camping-story__audio {
  font-family: var(--font-family-secondary);
  font-size: 12px;
  line-height: 14px;
  color: #737373;
}

.page-home .card-camping-story__view-profile {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 3px;
  background: #0095f6;
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
}

.page-home .card-camping-story__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 326 / 407.5;
  background: #000;
  overflow: hidden;
  text-decoration: none;
}

.page-home .card-camping-story__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-home .card-camping-story__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.page-home .card-camping-story__view-more {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 13px 0;
  background: rgba(255, 255, 255, 0.95);
  color: #0095f6;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.page-home .card-camping-story__media:hover .card-camping-story__view-more,
.page-home .card-camping-story__media:focus-visible .card-camping-story__view-more {
  opacity: 1;
}

.page-home .card-camping-story__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px 8px;
  border-top: 1px solid #dbdbdb;
}

.page-home .card-camping-story__action {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  opacity: 0.85;
}

.page-home .card-camping-story__action--like {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23262626' stroke-width='1.8' d='M12 20.5s-7-4.35-7-10.2C5 7.35 7.35 5 10.2 5c1.66 0 3.16.84 4.05 2.12C15.14 5.84 16.64 5 18.3 5 21.15 5 23.5 7.35 23.5 10.3c0 5.85-7 10.2-7 10.2Z'/%3E%3C/svg%3E");
}

.page-home .card-camping-story__action--comment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23262626' stroke-width='1.8' d='M4 5.5h16v11H8l-4 3.5V5.5Z'/%3E%3C/svg%3E");
}

.page-home .card-camping-story__action--share {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23262626' stroke-width='1.8' d='m8 12 8-4v8l-8-4Zm0 0v5'/%3E%3C/svg%3E");
}

.page-home .card-camping-story__action--save {
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23262626' stroke-width='1.8' d='M6 4.5h12v16l-6-4-6 4v-16Z'/%3E%3C/svg%3E");
}

.page-home .card-camping-story__meta {
  padding: 0 10px 10px;
}

.page-home .card-camping-story__likes {
  margin: 0 0 8px;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: #000;
}

.page-home .card-camping-story__caption {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  line-height: 18px;
  color: #1c1e21;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-home .card-camping-story__caption-user {
  font-weight: 700;
  margin-right: 4px;
}

.page-home .card-camping-story__comments {
  margin: 8px 0 0;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  line-height: 18px;
  color: #737373;
}

.page-home .card-camping-story__comment-bar {
  margin-top: auto;
  padding: 14px 10px;
  border-top: 1px solid #dbdbdb;
}

.page-home .card-camping-story__comment-placeholder {
  font-family: var(--font-family-secondary);
  font-size: 14px;
  line-height: 17px;
  color: #737373;
}

@media (max-width: 1199px) {
  .page-home .home-camping-stories-section__inner {
    flex-direction: column;
    align-items: center;
    max-width: var(--container-max);
  }

  .page-home .home-camping-stories-section__intro {
    flex: 0 0 auto;
    max-width: 425px;
    width: 100%;
  }

  .page-home .home-camping-stories__reels {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
  }

  .page-home .card-camping-story {
    max-width: none;
    min-height: 640px;
  }
}

/* Bloc mobile « tops campings » : caché sur desktop, uniquement les 3 cartes + carousel */
.page-home .top-campings-swiper-wrap--mobile {
  display: none;
}
@media (min-width: 768px) {
  .page-home .top-campings-swiper-wrap--mobile {
    display: none !important;
  }
}

/* Même rythme vertical que la section Super Deal — Figma 1417:16720 */
.page-home .region-section {
  position: relative;
  padding: var(--space-50) 0;
  margin-top: 0;
}

.page-home .region-section__heading {
  margin-bottom: var(--space-50);
  text-align: center;
}

@media (min-width: 768px) {
  /* Figma 1417:16720 – section pleine largeur 1200px (sans padding container) */
  .page-home .region-section > .container,
  .page-home .region-section .region-swiper-wrap.container {
    padding-left: 0;
    padding-right: 0;
    max-width: var(--container-max);
  }
}

.page-home .region-section .region-swiper-wrap.container {
  padding-left: 0;
  padding-right: 0;
}

.page-home .region-swiper-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-50);
  align-items: center;
}

.page-home .region-swiper {
  overflow: hidden;
  border-radius: var(--radius-card);
  width: 100%;
}

.page-home .region-swiper .swiper-wrapper {
  display: flex;
  transition-property: transform;
  align-items: stretch;
}

.page-home .region-swiper .swiper-slide {
  flex-shrink: 0;
  width: 100% !important;
  height: auto;
  min-height: 670px;
  box-sizing: border-box;
}

.page-home .region-featured {
  position: relative;
  width: 100%;
  min-height: 670px;
  height: 670px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-sizing: border-box;
}

.page-home .region-featured__bg {
  position: absolute;
  inset: 0;
}

.page-home .region-featured__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-home .region-featured__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(36, 0, 70, 0.6) 0%, rgba(36, 0, 70, 0) 100%);
  pointer-events: none;
}

.page-home .region-featured__layout {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 670px;
  padding: 30px;
  box-sizing: border-box;
}

.page-home .region-featured__info {
  position: absolute;
  left: 30px;
  bottom: 30px;
  top: auto;
  right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  width: 500px;
  max-width: calc(100% - 350px - 90px);
  margin: 0;
  z-index: 2;
}

.page-home .region-featured__region-name {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: 62px;
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-63);
  color: var(--color-text-inverse);
  word-break: break-word;
  text-align: left;
}

.page-home .region-featured__region-name:empty {
  display: none;
}

.page-home .region-featured__desc {
  margin: 0;
  max-height: 80px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

.page-home .region-featured__cta-region {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: max-content;
  align-self: flex-start;
  flex: 0 0 auto;
  min-height: 65px;
  padding: var(--space-5) var(--space-15);
  border-radius: var(--radius-cta);
  background: var(--color-secondary, #240046);
  color: var(--color-text-inverse);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold); /* row 311 : label CTA région en gras */
  line-height: var(--line-height-27);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    transform 0.2s ease;
}

.page-home .region-featured__cta-region:hover,
.page-home .region-featured__cta-region:focus-visible {
  background: var(--color-secondary-light, #9d4edd);
  transform: translateX(4px);
}

.region-featured__cta-arrow {
  margin-left: var(--space-5);
}

.page-home .region-featured__card {
  position: absolute;
  right: 30px;
  bottom: 30px;
  top: auto;
  left: auto;
  width: 350px;
  height: 500px;
  max-width: 350px;
  margin: 0;
  z-index: 3;
}

.page-home .region-featured__card .card-region {
  width: 350px;
  height: 500px;
}

.page-home .region-section .pagination-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-15);
  width: auto;
  max-width: none;
  margin-top: var(--space-20);
  visibility: visible;
  opacity: 1;
}

.page-home .region-section .pagination-carousel__prev.is-disabled,
.page-home .region-section .pagination-carousel__prev:disabled {
  background: rgba(255, 255, 255, 0.4);
  color: var(--color-border-strong, #ced4da);
}

.page-home .region-section .pagination-carousel__next:not(.is-disabled):not(:disabled),
.page-home .region-section .pagination-carousel__prev:not(.is-disabled):not(:disabled) {
  background: rgba(36, 0, 70, 0.8);
  color: #ffffff;
}

.page-home .region-section .pagination-carousel__bullet {
  background: rgba(36, 0, 70, 0.2);
  border-color: #fff;
}

.page-home .region-section .pagination-carousel__bullet--active {
  background: var(--color-secondary, #240046);
  border-color: var(--color-secondary, #240046);
}

/* Pagination carousel: three dashes (bullets) + arrows */
.page-home .guide-top-moment-pagination .pagination-carousel__prev:not(.is-disabled):not(:disabled),
.page-home .guide-top-moment-pagination .pagination-carousel__next:not(.is-disabled):not(:disabled) {
  background: rgba(36, 0, 70, 0.8);
  color: #ffffff;
}

.page-home .guide-top-moment-pagination .pagination-carousel__prev.is-disabled,
.page-home .guide-top-moment-pagination .pagination-carousel__prev:disabled,
.page-home .guide-top-moment-pagination .pagination-carousel__next.is-disabled,
.page-home .guide-top-moment-pagination .pagination-carousel__next:disabled {
  background: rgba(255, 255, 255, 0.4);
  color: var(--color-border-strong, #ced4da);
  cursor: not-allowed;
}

.page-home .pagination-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-15);
}

.page-home .pagination-carousel__prev,
.page-home .pagination-carousel__next {
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  border-radius: var(--radius-cta);
  border: none;
  color: var(--color-text-inverse);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    opacity 0.2s,
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}

.page-home .pagination-carousel__prev {
  background: rgba(36, 0, 70, 0.8);
  color: #ffffff;
}

.page-home .pagination-carousel__next {
  background: rgba(36, 0, 70, 0.8);
  color: #ffffff;
}

.page-home .pagination-carousel__prev:hover:not(.is-disabled):not(:disabled),
.page-home .pagination-carousel__next:hover:not(.is-disabled):not(:disabled) {
  opacity: 1;
  background: var(--color-secondary, #240046);
  box-shadow:
    0 0 0 2px rgba(157, 78, 221, 0.35),
    0 0 16px rgba(157, 78, 221, 0.55);
}

.page-home .pagination-carousel__prev.is-disabled,
.page-home .pagination-carousel__prev:disabled {
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  cursor: not-allowed;
  color: var(--color-border-strong, #ced4da);
}

.page-home .pagination-carousel__next.is-disabled,
.page-home .pagination-carousel__next:disabled {
  background: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  opacity: 1;
  color: var(--color-border-strong, #ced4da);
}

.page-home .pagination-carousel__indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Traits inactifs : gris clair (comme maquette) */
.page-home .pagination-carousel__bullet {
  width: 50px;
  height: 5px;
  border-radius: 100px;
  background: var(--color-surface-muted, #e9ecef);
  border: 1px solid var(--color-border, #dee2e6);
  cursor: pointer;
  transition: background 0.2s;
  box-sizing: border-box;
}

.page-home .pagination-carousel__bullet:hover {
  background: var(--color-border-strong, #ced4da);
}

.page-home .pagination-carousel__bullet--active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  height: 6px;
}

/* Flèches (pas chevrons) - centrées verticalement */
.page-home .pagination-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.page-home .pagination-carousel__arrow img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.page-home .pagination-carousel__arrow-svg {
  display: block;
  width: 24px;
  height: 24px;
}

.page-home .guide-top-moment-section {
  padding-top: var(--space-50);
  padding-bottom: var(--space-50);
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: rgba(36, 0, 70, 0.2);
  box-sizing: border-box;
}

.page-home .guide-top-moment-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.page-home .guide-top-moment-section .section__title.guide-top-moment-section__title {
  text-align: center;
  width: 100%;
  margin-bottom: var(--space-50);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-63);
  color: var(--color-secondary, #240046);
}

.page-home .guide-top-moment-section .top-camping-container-guide {
  width: 100%;
  max-width: 100%;
}

.page-home .guide-top-moment-swiper-wrap--desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-25);
  width: 100%;
}

.page-home .guide-top-moment-swiper-wrap--desktop .guide-top-moment-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.page-home .guide-top-moment__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-20);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.page-home .guide-top-moment-swiper-wrap--mobile {
  display: none;
}

/* Figma 1366:12403 — pagination sous les cartes, centrée */
.page-home .guide-top-moment-swiper-wrap--desktop .guide-top-moment-pagination {
  order: 2;
  justify-content: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.page-home .guide-top-moment-swiper-wrap--desktop .guide-top-moment-swiper {
  order: 1;
  width: 100%;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .page-home .guide-top-moment-swiper-wrap--desktop .guide-top-moment-swiper .swiper-slide {
    width: 100% !important;
    max-width: 100%;
  }

  .page-home .guide-top-moment__row {
    width: 100%;
    max-width: 100%;
  }

  .page-home
    .guide-top-moment-section
    .guide-top-push-card-wrap:not(.guide-top-push-card-wrap--mobile) {
    width: calc((100% - 3 * var(--space-20)) / 4);
    height: auto;
    aspect-ratio: 286 / 433;
    flex: 0 0 calc((100% - 3 * var(--space-20)) / 4);
  }
}

@media (max-width: 991px) {
  .page-home .guide-top-moment-section {
    max-width: 100%;
  }

  .page-home .guide-top-moment-section .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  .page-home .guide-top-moment-swiper-wrap--mobile {
    width: 100%;
    overflow: hidden;
  }
}

/* FAQ home — Figma 1464:19870 · balisage FAQPage */
.page-home .home-faq-section {
  padding: var(--space-50) 0;
  background: #ffffff;
}

.page-home .home-faq-section .container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.page-home .home-faq-section__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-15);
  margin-bottom: var(--space-25);
}

.page-home .home-faq-section__title {
  margin: 0;
  text-align: left;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-36);
  color: var(--color-secondary, #240046);
}

.page-home .home-faq-section__accent {
  display: block;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-primary, #ff6d00);
}

.page-home .home-faq {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.page-home .home-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.page-home .home-faq__item {
  border: none;
  border-bottom: 1px solid #dee2e6;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.page-home .home-faq__item[open] {
  border-color: #dee2e6;
}

.page-home .home-faq__question {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-15) 0;
  cursor: pointer;
  color: #111827;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.4;
}

.page-home .home-faq__question-text {
  flex: 1;
  min-width: 0;
}

.page-home .home-faq__question::-webkit-details-marker {
  display: none;
}

.page-home .home-faq__question::marker {
  content: '';
}

.page-home .home-faq__icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  /* Figma icons generics expand down/up — chevron dans un cercle orange */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23ff6d00' stroke-width='1.5'/%3E%3Cpath stroke='%23ff6d00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M8.5 10.5 12 14l3.5-3.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  transition: transform 0.2s ease;
}

.page-home .home-faq__item[open] .home-faq__icon {
  transform: rotate(180deg);
}

.page-home .home-faq__answer {
  padding: 0 0 var(--space-15);
  color: #4b5563;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

.page-home .home-faq__answer p {
  margin: 0;
}

.page-home .home-faq__footer {
  margin: var(--space-25) 0 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: #343a40;
}

.page-home .home-faq__footer-link {
  color: var(--color-primary, #ff6d00);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-home .home-faq__footer-link:hover,
.page-home .home-faq__footer-link:focus-visible {
  color: var(--color-primary-dark, #e66200);
}

.page-home .find-camping-section {
  padding: var(--space-50) 0;
}

.page-home .find-camping-section .container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.page-home .find-camping-section__title {
  margin-bottom: var(--space-50);
  color: var(--color-secondary, #240046);
}

.page-home .find-camping-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
}

.page-home .find-camping-cards .card-find-camping {
  min-height: 230px;
}

.page-home .find-camping-cards-swiper-wrap {
  display: none;
}

/* ========== Super Deal bloc Home Page – Figma 157-9047 (TooCamp 10-03) ========== */
/* Alignement vertical identique à la section Régions */
.page-home .superdeal-bloc-section {
  padding: var(--space-50) 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* 2e bloc Super Deal : marge en bas pour ne pas empiéter sur la section Régions */
.page-home .superdeal-bloc-section--second {
  margin-bottom: var(--space-50);
}

/* 2e bloc Super Deal (variant "superlight") : frame 900×385 centré */
.page-home .superdeal-bloc-section--second .superdeal-bloc {
  justify-content: center;
}

/* 2e bloc : carte superlight directement sur le dégradé — pas de fond blanc sur le wrap, padding 50px, carte en haut sous le padding */
.page-home .superdeal-bloc-section--second .superdeal-bloc__gradient {
  min-height: 385px;
  height: auto;
  max-height: none;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-25);
  padding: 50px;
  box-sizing: border-box;
}

.page-home .superdeal-bloc-section--second .superdeal-bloc__card-wrap {
  flex: 0 0 353px;
  width: 353px;
  max-width: 353px;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  align-self: flex-start;
}

.page-home .superdeal-bloc-section--second .superdeal-bloc-card {
  width: 353px;
  max-width: 353px;
  display: flex;
  justify-content: center;
}

/* Card superdeal "superlight" (Figma 834:12639) — uniquement sur le 2e bloc */
.page-home .superdeal-bloc-section--second .superdeal-bloc__card-label {
  display: none;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight {
  height: 285px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: none;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__head {
  background: #9d4edd;
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
  text-align: center;
  padding: var(--space-10);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-body {
  background: #fff;
  border: 2px solid var(--color-border, #dee2e6);
  border-top: none;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  flex: 1 1 auto;
  min-height: 0;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-top {
  display: flex;
  gap: var(--space-10);
  align-items: flex-start;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-thumb {
  position: relative;
  width: 121px;
  height: 121px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-img {
  width: 121px;
  height: 121px;
  object-fit: cover;
  display: block;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-discount {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 31px;
  padding: var(--space-5);
  border-radius: 5px;
  background: var(--color-secondary-light, #9d4edd);
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-discount-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-content {
  flex: 1 1 auto;
  min-width: 0;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-title {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--color-secondary, #240046);
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-stars .card-superdeal__star {
  color: var(--color-secondary, #240046);
  font-size: 14px;
  line-height: 1;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-pricebar {
  background: var(--color-border-light, #e9ecef);
  border-radius: var(--radius-card);
  display: flex;
  overflow: hidden;
  min-height: 65px;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-price {
  flex: 1 1 0;
  padding: 15px 0 15px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-price-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__price {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
  color: var(--color-secondary, #240046);
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__old-price {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary, #240046);
  text-decoration: line-through;
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-price-detail {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-21);
  color: var(--color-secondary, #240046);
}

.page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-cta {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--color-primary, #ff6d00);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

/* Desktop home: 2e carte (superlight) bouton CTA = 144px */
@media (min-width: 835px) {
  .page-home .superdeal-bloc-section--second .card-superdeal--superlight .card-superdeal__superlight-cta {
    flex: 0 0 144px;
    width: 144px;
    min-width: 144px;
  }
}


.page-home a.card-superdeal {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.page-home a.card-superdeal:focus-visible {
  outline: 2px solid var(--color-primary, #ff6d00);
  outline-offset: 2px;
}


.page-home .superdeal-bloc {
  display: flex;
  align-items: flex-start;
  gap: var(--space-50);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Gradient : hauteur pour contenir tout le contenu gauche dont le bouton "Tous les Super Deals" (Figma 157-9047) */
.page-home .superdeal-bloc__gradient {
  flex: 1 1 0;
  min-width: 0;
  min-height: 420px;
  height: 420px;
  max-height: 420px;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    var(--color-primary-gradient-end, #ff9e00),
    var(--color-secondary-light, #9d4edd)
  );
  border-radius: var(--radius-card);
  padding: var(--space-50);
  display: flex;
  align-items: flex-start;
  overflow: visible;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__gradient {
  align-items: center;
}

.page-home .superdeal-bloc__content {
  max-width: 664px;
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
}

.page-home .superdeal-bloc__title {
  font-family: var(--font-family-primary);
  font-size: 42px;
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-63);
  color: var(--color-text-inverse);
  margin: 0;
}

.page-home .superdeal-bloc__subtitle {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  color: var(--color-text-inverse);
  margin: 0;
  line-height: var(--line-height-21);
}

.page-home .superdeal-bloc__list {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-inverse);
  margin: 0 0 0 1.2em;
  padding: 0;
  line-height: var(--line-height-27);
  list-style: disc;
}

.page-home .superdeal-bloc__list li {
  margin-bottom: 0.25em;
}

/* CTA : orange #ff6d00, 45px height, rounded 100px (Figma) */
.page-home .superdeal-bloc__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 45px;
  padding: var(--space-5) var(--space-15);
  background: var(--color-primary, #ff6d00);
  color: var(--color-text-inverse);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  text-decoration: none;
  border: none;
  border-radius: var(--radius-cta);
  cursor: pointer;
  align-self: flex-start;
}

/* Par défaut (desktop/tablette): on n'affiche que le CTA desktop */
.page-home .superdeal-bloc__cta--mobile {
  display: none;
}
.page-home .superdeal-bloc__cta--desktop {
  display: inline-flex;
}


/* ========== 1re carte Super Deal (Figma 157-9047) – desktop : cadre blanc — uniquement hors 2e bloc */
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc__card-wrap {
  position: relative;
  z-index: 1;
  flex: 0 0 424px;
  width: 424px;
  margin-left: 13%;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
  background: #ffffff;
  padding: var(--space-10);
  border-radius: var(--radius-card);
  box-shadow: 0 0 15px 0 var(--color-border-light, #e9ecef);
}

/* "Super Deal du moment" : dégradé orange→violet sur le texte (Figma 832:11914) — 1er bloc seulement */
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc__card-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-black);
  line-height: 1.1;
  color: var(--color-primary, #ff6d00);
  background: linear-gradient(
    90deg,
    var(--color-primary, #ff6d00),
    var(--color-secondary-light, #9d4edd)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  padding: 0 var(--space-5);
  text-align: center;
  flex-shrink: 0;
  display: block;
}

.page-home .superdeal-bloc:not(.superdeal-bloc--narrow) .superdeal-bloc-card {
  width: 100%;
  max-width: 353px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

/* 1er bloc Super Deal uniquement : carte un peu plus large */
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card {
  max-width: 424px;
}

/* 1er bloc Super Deal (Super Deal du moment) : Figma 832:11913 — cadre 424×565, titre + gap 25 + carte */
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-25);
  width: 424px;
  max-width: 424px;
  height: 565px;
  padding: var(--space-15);
  box-sizing: border-box;
  align-self: center;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-label {
  flex-shrink: 0;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-wrap--carousel {
  height: 565px;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-column {
  position: relative;
  z-index: 1;
  flex: 0 0 424px;
  width: 424px;
  margin-left: 13%;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-column
  .superdeal-bloc__card-wrap {
  margin: 0;
  width: 100%;
  max-width: 100%;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc-carousel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc-swiper {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  transition-property: transform;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc-swiper .swiper-slide {
  flex-shrink: 0;
  width: 100% !important;
  height: auto;
  box-sizing: border-box;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  flex-shrink: 0;
  width: 100%;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-header
  .superdeal-bloc__card-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-header
  .pagination-carousel__prev,
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-header
  .pagination-carousel__next {
  flex-shrink: 0;
  background: rgba(36, 0, 70, 0.85);
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    background 0.2s ease;
}

@media (hover: hover) {
  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc__card-wrap--carousel:hover
    .superdeal-bloc__card-header
    .pagination-carousel__prev,
  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc__card-wrap--carousel:hover
    .superdeal-bloc__card-header
    .pagination-carousel__next,
  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc__card-wrap--carousel:focus-within
    .superdeal-bloc__card-header
    .pagination-carousel__prev,
  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc__card-wrap--carousel:focus-within
    .superdeal-bloc__card-header
    .pagination-carousel__next {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (hover: none) {
  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc__card-header
    .pagination-carousel__prev,
  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc__card-header
    .pagination-carousel__next {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-header
  .pagination-carousel__prev:hover:not(.is-disabled):not(:disabled),
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-header
  .pagination-carousel__next:hover:not(.is-disabled):not(:disabled) {
  opacity: 1;
  background: var(--color-secondary, #240046);
  box-shadow:
    0 0 0 2px rgba(157, 78, 221, 0.35),
    0 0 16px rgba(157, 78, 221, 0.55);
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-header
  .pagination-carousel__prev.is-disabled,
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-header
  .pagination-carousel__prev:disabled,
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-header
  .pagination-carousel__next.is-disabled,
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc__card-header
  .pagination-carousel__next:disabled {
  background: rgba(255, 255, 255, 0.4);
  color: var(--color-border-strong, #ced4da);
  cursor: not-allowed;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .card-superdeal--moment
  .card-superdeal__merchant {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary, #240046);
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc-card {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 1er bloc — carte "Super Deal du moment" (Figma 832:11913) : occupe le reste du cadre 565px sous le titre */
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc-card
  .card-superdeal--moment {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding-bottom: var(--space-15);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .card-superdeal--moment
  .card-superdeal__media {
  height: 200px;
}

.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .card-superdeal--moment
  .card-superdeal__bottom {
  padding-left: var(--space-15);
  padding-right: var(--space-15);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  flex: 1 1 auto;
  min-height: 0;
}

/* On colle le bloc prix/cta en bas */
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .card-superdeal--moment
  .card-superdeal__price-cta {
  margin-top: auto;
  width: 100%;
}
/* Carte pleine (moment) : fond blanc — pas le 2e bloc superlight (carte sur dégradé) */
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal {
  margin: 0;
  width: 100%;
  background: #ffffff;
  border: 2px solid var(--color-border, #dee2e6);
  border-radius: var(--radius-card);
  box-shadow: 0 0 15px 0 var(--color-border-light, #e9ecef);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: 0 0 var(--space-10) 0;
}

.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__top {
  gap: 0;
}

.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__bandeau {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__media {
  height: 150px;
}

/* 1er bloc : media à 200px (Figma 832:11913) */
.page-home
  .superdeal-bloc-section:not(.superdeal-bloc-section--second)
  .superdeal-bloc-card
  .card-superdeal__media {
  height: 200px;
}

.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__bottom {
  padding: 0 var(--space-10);
  gap: 6px;
}

.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__verbatim {
  padding: 6px var(--space-10);
}

/* Hauteur carte maquette : line-height resserrés */
.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__title {
  line-height: 1.1;
  font-size: var(--font-size-18);
}
.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__location,
.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__detail {
  line-height: 1.25;
  font-size: var(--font-size-14);
}
.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__verbatim-label,
.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__verbatim-desc {
  line-height: 1.25;
  font-size: var(--font-size-14);
}
.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__price,
.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__old-price,
.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__price-detail {
  line-height: 1.15;
  font-size: var(--font-size-18);
}
.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__bandeau {
  padding: var(--space-5) var(--space-10);
}

.page-home
  .superdeal-bloc:not(.superdeal-bloc--narrow)
  .superdeal-bloc-card
  .card-superdeal__read-more {
  display: none;
}

@media (max-width: 1024px) {
  .page-home .superdeal-bloc {
    flex-direction: column;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  .page-home .superdeal-bloc__gradient {
    width: 100%;
    min-height: 320px;
    height: auto;
  }
  .page-home .superdeal-bloc__card-wrap {
    flex: 0 0 auto;
    width: 100%;
    max-width: 424px;
  }
}

/* Superdeal section - Figma CardBusinessSuperdeal */
.page-home .superdeal-section {
  padding: var(--space-50) 0;
}

.page-home .superdeal-section__subtitle {
  margin-top: 0;
  margin-bottom: var(--space-30);
}

:is(.page-home, .page-superdeals) .superdeal-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-bottom: var(--space-50);
  /* Une carte dépliée ne doit pas étirer sa voisine */
  align-items: start;
}

:is(.page-home, .page-superdeals) .card-superdeal {
  background: var(--color-surface, #fff);
  border: 2px solid #dee2e6;
  border-radius: 20px;
  box-shadow: 0 0 15px #e9ecef;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Description dépliée : la carte grandit, plus de coupe du texte / bouton.
   Garder overflow:hidden pour que le border-radius clippe toujours les coins. */
:is(.page-home, .page-superdeals) .card-superdeal.is-expanded {
  overflow: hidden;
  height: auto;
  max-height: none;
}

:is(.page-home, .page-superdeals) .card-superdeal__top {
  display: flex;
  flex-direction: column;
  gap: 0;
}

:is(.page-home, .page-superdeals) .card-superdeal__bandeau {
  background: #9d4edd;
  color: #fff;
  padding: var(--space-10);
  display: flex;
  /* Par défaut (superdeals notamment): comportement inchangé */
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
  border-radius: 20px 20px 0 0;
}

@media (min-width: 1025px) {
  .page-superdeals .card-superdeal__bandeau {
    min-height: 75px;
    height: auto;
    align-items: center;
  }
}

/* Superdeals: étoiles inline juste après le titre, dans le bandeau */
.page-superdeals .card-superdeal__bandeau {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}

.page-superdeals .card-superdeal__bandeau-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.page-superdeals .card-superdeal__bandeau-text .card-superdeal__stars {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  gap: 1px;
  margin-left: 0.35em;
  width: max-content;
}

.page-superdeals .card-superdeal__bandeau-text .card-superdeal__star {
  display: inline-block;
  line-height: 1;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}

:is(.page-home, .page-superdeals) .card-superdeal__bandeau-text {
  font-family: var(--font-family-secondary, inherit);
  font-size: var(--font-size-18, 18px);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.5;
}

/* Home (desktop seulement): bandeau 47px, titre centré */
@media (min-width: 835px) {
  .page-home .card-superdeal__bandeau {
    height: 47px;
    align-items: center;
    justify-content: center;
  }
  .page-home .card-superdeal__bandeau-text {
    text-align: center;
  }
}

:is(.page-home, .page-superdeals) .card-superdeal__stars,
:is(.page-home, .page-superdeals) .card-superdeal__stars-inline {
  display: inline-flex;
  gap: 2px;
}

/* Desktop: allow bandeau title to wrap instead of overflowing */
.page-superdeals .card-superdeal__bandeau-text {
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

:is(.page-home, .page-superdeals) .card-superdeal__star {
  color: #fff;
  font-size: 14px;
}

:is(.page-home, .page-superdeals) .card-superdeal__media {
  position: relative;
  height: 200px;
  overflow: hidden;
}

:is(.page-home, .page-superdeals) .card-superdeal__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

:is(.page-home, .page-superdeals) .card-superdeal__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  background: #9d4edd;
  color: #fff;
  padding: var(--space-5);
  border-radius: 5px;
  font-size: var(--font-size-14, 14px);
  font-weight: var(--font-weight-black, 900);
}

:is(.page-home, .page-superdeals) .card-superdeal__bottom {
  padding: var(--space-15);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  flex: 1;
}

:is(.page-home, .page-superdeals) .card-superdeal__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  margin-top: 20px;
}

:is(.page-home, .page-superdeals) .card-superdeal__title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  justify-content: space-between;
}

:is(.page-home, .page-superdeals) .card-superdeal__title {
  font-family: var(--font-family-secondary, inherit);
  font-size: 20px;
  font-weight: var(--font-weight-black, 900);
  line-height: 1.05;
  color: #240046;
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* Page Super Deals : réserver 2 lignes pour le titre camping (alignement des cartes) */
.page-superdeals .card-superdeal__title {
  min-height: calc(1.05em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Page Super Deals : moins d’air entre « Lire la suite » et la barre prix / CTA */
.page-superdeals .card-superdeal__bottom {
  gap: var(--space-10);
}

.page-superdeals .card-superdeal__content {
  margin-top: 0;
  gap: var(--space-10);
}

:is(.page-home, .page-superdeals) .card-superdeal__location {
  font-size: var(--font-size-14, 14px);
  color: #240046;
  margin: 0;
}

:is(.page-home, .page-superdeals) .card-superdeal__detail {
  font-size: var(--font-size-14, 14px);
  color: #240046;
  margin: 0;
}

:is(.page-home, .page-superdeals) .card-superdeal__merchant {
  margin: 0;
  font-family: var(--font-family-secondary, inherit);
  font-size: var(--font-size-14, 14px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  color: #240046;
}

:is(.page-home, .page-superdeals) .card-superdeal__verbatim {
  background: #f8f9fa;
  border-radius: 20px;
  padding: var(--space-15);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

:is(.page-home, .page-superdeals) .card-superdeal__verbatim-top {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

:is(.page-home, .page-superdeals) .card-superdeal__verbatim-icon {
  color: #9d4edd;
  font-size: 12px;
}

:is(.page-home, .page-superdeals) .card-superdeal__verbatim-avatar {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  flex-shrink: 0;
  display: block;
}

:is(.page-home, .page-superdeals) .card-superdeal__verbatim-label {
  font-size: var(--font-size-14, 14px);
  color: #9d4edd;
}

:is(.page-home, .page-superdeals) .card-superdeal__verbatim-desc {
  font-size: var(--font-size-14, 14px);
  color: #240046;
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Design Quentin : descriptif du deal en gras sur la page Super Deals */
.page-superdeals .card-superdeal__verbatim-desc {
  font-weight: var(--font-weight-bold, 700);
}

:is(.page-home, .page-superdeals) .card-superdeal__verbatim-desc.is-expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
  text-overflow: unset;
}

:is(.page-home, .page-superdeals) .card-superdeal__read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  color: #240046;
  padding: var(--space-5) var(--space-10);
  border: none;
  border-radius: 100px;
  font-size: var(--font-size-14, 14px);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  align-self: flex-start;
}

:is(.page-home, .page-superdeals) .card-superdeal__read-more:hover {
  background: #dee2e6;
}

:is(.page-home, .page-superdeals) .card-superdeal__read-more[hidden] {
  display: none;
}

:is(.page-home, .page-superdeals) .card-superdeal__price-cta {
  display: flex;
  align-items: stretch;
  background: #e9ecef;
  border-radius: 20px;
  overflow: hidden;
}

:is(.page-home, .page-superdeals) .card-superdeal__price-block {
  padding: var(--space-15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex: 1;
}

:is(.page-home, .page-superdeals) .card-superdeal__price-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

:is(.page-home, .page-superdeals) .card-superdeal__price {
  font-size: 20px;
  font-weight: var(--font-weight-black, 900);
  color: #240046;
}

:is(.page-home, .page-superdeals) .card-superdeal__old-price {
  font-size: var(--font-size-14, 14px);
  color: #240046;
  text-decoration: line-through;
}

:is(.page-home, .page-superdeals) .card-superdeal__price-detail {
  font-size: var(--font-size-14, 14px);
  font-weight: var(--font-weight-bold, 700);
  color: #240046;
  margin: 0;
}

:is(.page-home, .page-superdeals) .card-superdeal__cta {
  background: var(--color-primary, #ff6d00);
  color: #fff;
  padding: var(--space-5) var(--space-15);
  font-size: var(--font-size-18, 18px);
  border-radius: 0 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

:is(.page-superdeals) .card-superdeal__cta {
  flex: 0 0 180px;
  width: 180px;
  min-width: 180px;
}

/* Desktop home: bouton "Voir le deal" = 160px */
@media (min-width: 835px) {
  .page-home .card-superdeal__cta {
    flex: 0 0 160px;
    width: 160px;
    min-width: 160px;
  }
}

/* Desktop home: footer padding gauche en % (Figma) */
@media (min-width: 835px) {
  .page-home .footer {
    padding-left: 13%;
  }

  /* Desktop home: footer container full width (pas de max-width) */
  .page-home .footer > .container {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .page-home .footer__copyright {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
    padding-left: var(--container-padding, 20px);
    padding-right: var(--container-padding, 20px);
    min-height: 0;
  }

  .page-home .footer__copyright-text {
    margin: 0;
    text-align: center;
  }
}

/* Tous les Super Deal du moment - capsules (home + page superdeals : même bloc EJS) */
.superdeal-capsules {
  margin-top: var(--space-50);
}

.superdeal-capsules__title {
  font-family: var(--font-family-primary, inherit);
  font-size: 28px;
  font-weight: var(--font-weight-black, 900);
  line-height: 1.07;
  color: #240046;
  margin: 0 0 var(--space-25);
}

.superdeal-capsules__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.superdeal-capsules__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
}

.superdeal-capsule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  padding: var(--space-15);
  border-radius: 20px;
  font-size: var(--font-size-18, 18px);
  color: #240046;
  text-decoration: none;
}

.superdeal-capsule:hover {
  background: #e9ecef;
}

.superdeal-capsule__arrow {
  flex-shrink: 0;
}

/* Superdeals page tweaks (section 6 instructions) */
.page-superdeals .superdeal-section .container {
  max-width: 900px;
}

.page-superdeals .superdeal-bloc,
.page-superdeals .superdeal-cards,
.page-superdeals .superdeal-capsules,
.page-superdeals .superdeal-pagination {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-superdeals .superdeal-capsule__arrow {
  color: var(--color-primary);
}

.page-superdeals .superdeal-pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin-left: 0;
  margin-right: 0;
  margin-top: var(--space-20);
  margin-bottom: var(--space-30);
  padding: 0;
  box-sizing: border-box;
}

.page-superdeals .superdeal-team-head,
.page-superdeals .superdeal-cards,
.page-superdeals .superdeal-capsules,
.page-superdeals .superdeal-pagination {
  width: 100%;
}

@media (min-width: 1200px) {
  .page-superdeals .superdeal-section .container {
    width: 900px;
    max-width: 900px;
    padding-left: 0;
    padding-right: 0;
  }

  .page-superdeals .superdeal-team-head {
    width: 900px;
    max-width: 900px;
  }

  .page-superdeals .superdeal-cards {
    display: grid;
    grid-template-columns: repeat(2, 438px);
    justify-content: space-between;
    column-gap: 24px;
    row-gap: 25px;
    align-items: start;
  }

  .page-superdeals .card-superdeal {
    box-sizing: border-box;
    width: 438px;
    /* Hauteur mini pour l’alignement grille ; s’étire si « Lire la suite » */
    height: auto;
    min-height: 734px;
    max-height: none;
    /* overflow:hidden = coins arrondis (border-radius) visibles */
    overflow: hidden;
    align-self: start;
  }

  .page-superdeals .card-superdeal__bottom {
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-10);
    overflow: hidden;
  }

  .page-superdeals .card-superdeal__content {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    gap: var(--space-10);
    overflow: hidden;
  }

  .page-superdeals .card-superdeal__verbatim {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .page-superdeals .card-superdeal.is-expanded {
    height: auto;
    max-height: none;
    overflow: hidden;
  }

  .page-superdeals .card-superdeal.is-expanded .card-superdeal__verbatim,
  .page-superdeals .card-superdeal.is-expanded .card-superdeal__content,
  .page-superdeals .card-superdeal.is-expanded .card-superdeal__bottom {
    overflow: visible;
    flex: 0 0 auto;
  }

  .page-superdeals .card-superdeal__price-cta {
    flex-shrink: 0;
  }

  .page-superdeals .card-superdeal__read-more {
    flex-shrink: 0;
    margin-top: var(--space-5);
  }
}

/* iPad mini/air/pro: cartes en pleine largeur (1 colonne) */
@media (min-width: 768px) and (max-width: 1199px) {
  .page-superdeals .superdeal-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .page-superdeals .card-superdeal {
    width: 100%;
    min-height: 0;
  }
}

/* iPad mini/air : même moteur que iPad Pro (barre complète) */
@media (min-width: 768px) and (max-width: 991px) {
  :is(.page-superdeals, .page-comparateur, .page-camping-brand) #main > .header .container,
  :is(.page-superdeals, .page-comparateur, .page-camping-brand) #main > .header .header__inner {
    height: 100%;
    min-height: 0;
    align-items: center;
  }

  :is(.page-superdeals, .page-comparateur, .page-camping-brand) .header .header__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: var(--space-10);
  }

  :is(.page-superdeals, .page-comparateur, .page-camping-brand) .header__logo-wrap {
    width: auto !important;
    min-height: 0;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center;
    align-self: center;
    height: auto;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  :is(.page-superdeals, .page-comparateur, .page-camping-brand) .header__logo-wrap a,
  :is(.page-superdeals, .page-comparateur, .page-camping-brand) .header__logo-wrap .header__burger-trigger {
    grid-column: unset !important;
    grid-row: unset !important;
    justify-self: unset;
    align-self: center;
  }

  :is(.page-superdeals, .page-camping-brand) .header__search {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 var(--space-20);
    justify-content: center;
  }

  :is(.page-superdeals, .page-camping-brand, .page-static-legal) .header__search .guide-search-header-mobile {
    display: none !important;
  }

  :is(.page-superdeals, .page-camping-brand, .page-static-legal) .header__search .search-results-bar {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: var(--header-search-gap, 10px);
    width: auto;
  }
}

.page-superdeals .header .nav--desktop {
  display: none;
}

:is(.page-superdeals, .page-camping-brand, .page-static-legal) .header__search {
  position: relative;
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  :is(.page-superdeals, .page-camping-brand, .page-static-legal) .header__search .search-results-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--header-search-gap, 10px);
    width: auto;
  }
}

@media (min-width: 992px) {
  :is(.page-superdeals, .page-camping-brand, .page-static-legal) .header__search .search-results-bar {
    margin: auto 0;
    align-items: unset;
  }
}

/* Autocomplete (#search-destination) dans le header superdeals / comparateur — même logique que la home */
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__item--text {
  position: static;
}
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form {
  position: relative;
}
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .autoComplete_wrapper {
  width: 100%;
}
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .autoComplete_wrapper > ul {
  position: absolute;
  z-index: 60;
  left: 0;
  right: auto;
  width: 100%;
  min-width: var(--header-search-form-width, 470px);
  max-width: min(100vw - 2rem, 640px);
  top: 100%;
  margin-top: 4px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-card, 12px);
  background: #fff;
  box-sizing: border-box;
}
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .autoComplete_wrapper > ul > li {
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand)
  .header__search
  .autoComplete_wrapper
  > ul
  > li[role="option"] {
  cursor: pointer;
}
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand)
  .header__search
  .autoComplete_wrapper
  > ul
  > li
  > .autocomplete-suggestion__text,
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand)
  .header__search
  .autoComplete_wrapper
  > ul
  > li
  > span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .autocomplete-separator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 6px;
  box-sizing: border-box;
}
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .autocomplete-separator--campings {
  margin-top: 10px;
}
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .autocomplete-separator__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .autocomplete-separator__label {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
  background: linear-gradient(
    180deg,
    var(--color-primary-gradient-end, #ff9e00),
    var(--color-secondary-light, #9d4edd)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .autocomplete-separator::after {
  content: "";
  flex: 1 0 100%;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--color-primary-gradient-end, #ff9e00),
    var(--color-secondary-light, #9d4edd)
  );
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form.search-form--expanded {
  height: 45px;
  min-height: 45px;
  max-height: 45px;
  width: var(--header-search-form-width, 470px);
  min-width: var(--header-search-form-width, 470px);
  max-width: var(--header-search-form-width, 470px);
  box-sizing: border-box;
  margin-bottom: 0;
  padding: var(--space-10);
  gap: var(--space-10);
  overflow: hidden;
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic.search-form--expanded {
  --header-search-form-width: 560px;
  width: var(--header-search-form-width);
  min-width: var(--header-search-form-width);
  max-width: var(--header-search-form-width);
  overflow: visible;
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__fields {
  gap: var(--space-10);
  min-width: 0;
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__item--text .search-form__input {
  padding-right: 1px;
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__separator {
  height: 25px;
}

@media (min-width: 992px) {
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form.search-form--expanded {
    height: var(--header-search-form-height);
    min-height: var(--header-search-form-height);
    max-height: var(--header-search-form-height);
  }
}

@media (min-width: 768px) {
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form.search-form--expanded {
    overflow: visible;
  }
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__label {
  font-size: var(--font-size-14);
  line-height: 21px;
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__item--text .search-form__label,
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__item--date-trigger .search-form__label,
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__label--sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header moteur : destination, date, durée, personnes — même typo gris clair (placeholder destination) */
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__input::placeholder,
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__date-trigger,
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__date-trigger .search-form__date-value,
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__list-trigger,
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__list-value,
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__list-trigger--has-value,
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__list-trigger--has-value .search-form__list-value,
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__list-trigger--placeholder,
:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__list-trigger--placeholder .search-form__list-value {
  color: var(--color-text-muted, #adb5bd);
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  font-weight: var(--font-weight-regular);
}

/* Figma 600:13358 — Date de départ +30px (15px/gauche+droite), Personnes −30px */
@media (min-width: 768px) {
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__item--date-trigger,
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__item--departure-select {
    min-width: 110px;
    width: 110px;
    max-width: 110px;
    flex: 0 0 110px;
    align-items: center;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__date-trigger,
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__list-trigger {
    text-align: center;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__item--duration-select {
    min-width: 72px;
    width: 72px;
    max-width: 72px;
    flex: 0 0 72px;
    align-items: center;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__list-field {
    position: relative;
    overflow: visible;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form--classic .search-form__list {
    left: 0;
    right: auto;
    transform: none;
    z-index: 120;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__item--select.search-form__list-field {
    min-width: 88px;
    max-width: 88px;
    width: 88px;
    flex: 0 0 88px;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__select-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: var(--space-10);
    box-sizing: border-box;
  }
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__label--with-chevron .search-form__chevron {
  margin-left: 2px;
  font-size: 0.85em;
  vertical-align: middle;
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__label--with-chevron .search-form__chevron {
  display: none;
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__select {
  appearance: none;
  background-image: none;
  padding-right: 0;
  font-size: var(--font-size-14);
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__select-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  cursor: pointer;
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__select--label-only {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  color: transparent;
  background: transparent;
  border: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  text-align: left;
  text-align-last: left;
  padding-left: var(--space-10);
  padding-right: 0;
}

:is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__select--label-only option {
  color: var(--color-text);
  background: #fff;
  text-align: left;
  direction: ltr;
  padding-left: var(--space-10);
  padding-right: var(--space-10);
}

@media (min-width: 768px) {
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__submit {
    width: var(--header-search-submit-width, 45px);
    min-width: var(--header-search-submit-width, 45px);
    max-width: var(--header-search-submit-width, 45px);
    height: var(--header-search-submit-height, 35px);
    min-height: var(--header-search-submit-height, 35px);
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    --fill-0: #fff;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__submit.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    opacity: 1;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__submit.btn--primary:hover,
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__submit.btn--primary:focus-visible {
    background: var(--color-primary-gradient-end, #ff9e00);
    background-color: var(--color-primary-gradient-end, #ff9e00);
    opacity: 1;
    filter: none;
    color: var(--color-text-inverse);
    --fill-0: #fff;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-form__submit img {
    margin: 0;
    width: 24px;
    height: 25px;
    max-width: none;
    max-height: none;
    opacity: 1;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search {
    display: flex !important;
  }
}


/* Mobile superdeals / comparateur / pages légales : header condensé (pill + filtre) */
@media (max-width: 767px) {
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header {
    height: auto;
    padding-bottom: 25px;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header .header__inner {
    height: 155px;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__inner {
    display: grid;
    grid-template-columns: var(--header-burger-size) 1fr;
    grid-template-rows: auto var(--header-inner-height);
    align-items: center;
    height: 155px;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__logo-wrap {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: var(--header-burger-size) 1fr;
    grid-template-rows: auto var(--header-inner-height);
    align-items: center;
    column-gap: var(--space-10);
    margin-top: 20px;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__logo-wrap a {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__logo-wrap .header__burger-trigger {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: center;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    margin-left: var(--space-10);
    margin-right: 0;
    justify-content: center;
    display: flex;
    min-width: 0;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .search-results-bar {
    display: none !important;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .guide-search-header-mobile {
    display: flex !important;
    align-items: center;
    width: 100%;
    gap: 10px;
    min-width: 0;
    justify-content: space-between;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .guide-search-header-mobile__form {
    flex: 1 1 auto;
    min-width: 0;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .guide-search-header-mobile__field {
    width: 242px;
    flex: 0 0 242px;
    max-width: 242px;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    align-items: center;
    position: relative;
    gap: var(--space-15);
    background: var(--color-surface-grayscale-white, #ffffff);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-cta);
    box-shadow: var(--shadow-strong);
    padding: var(--space-10) var(--space-10) var(--space-10) var(--space-20);
    min-height: 45px;
    box-sizing: border-box;
  }

  /* Hide label text (only placeholder visible) */
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .guide-search-header-mobile__field .guide-search-card__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .guide-search-header-mobile__field .guide-search-card__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .guide-search-header-mobile__field .guide-search-card__input::placeholder {
    color: var(--color-text);
  }

  /* Search submit (loupe) — match v3 mobile pill styling */
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .guide-search-header-mobile__field .guide-search-card__submit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 35px;
    /* pas de padding horizontal : il ecrasait la loupe de 24px a 20px */
    padding: 0;
    margin: 0;
    background: var(--color-primary) !important;
    border: none;
    border-radius: var(--radius-cta);
    cursor: pointer;
    transition:
      background-color var(--transition-primary-cta, 1s ease),
      background var(--transition-primary-cta, 1s ease);
  }

  @media (hover: hover) {
    :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand)
      .header__search
      .guide-search-header-mobile__field
      .guide-search-card__submit:hover,
    :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand)
      .header__search
      .guide-search-header-mobile__field
      .guide-search-card__submit:focus-visible {
      background: var(--color-primary-gradient-end, #ff9e00) !important;
      background-color: var(--color-primary-gradient-end, #ff9e00) !important;
    }
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .guide-search-header-mobile__field .guide-search-card__submit img {
    flex: 0 0 auto;
    width: 24px;
    height: 25px;
    filter: brightness(0) invert(1) !important;
  }

  /* Pill mobile: engine-v3 wraps input in .autoComplete_wrapper after first render */
  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .guide-search-header-mobile__field .autoComplete_wrapper {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: none;
    position: relative;
    box-sizing: border-box;
  }

  :is(.page-superdeals, .page-comparateur, .page-static-legal, .page-camping-brand) .header__search .guide-search-header-mobile__filter {
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    padding: 0;
    border-radius: var(--radius-cta);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 0;
  }
}

.page-superdeals .superdeal-team-head {
  background: linear-gradient(
    180deg,
    var(--color-primary-gradient-end, #ff9e00) 0%,
    var(--color-secondary-light, #9d4edd) 100%
  );
  border-radius: var(--radius-card);
  padding: var(--space-15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  margin-bottom: var(--space-25);
}

.page-superdeals .section__title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-black);
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-superdeals .superdeal-team-head__title {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: 21px;
  color: #fff;
  text-align: center;
}

.page-superdeals .superdeal-team-head__list {
  margin: 0;
  padding-left: 27px;
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 27px;
}

.page-superdeals .superdeal-team-head__badge {
  margin: 0;
  background: #5a189a;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  line-height: 27px;
}

.page-superdeals .superdeal-team-head__badge-regular {
  font-style: italic;
  font-weight: var(--font-weight-regular);
}

.page-superdeals .superdeal-team-head__badge-strong {
  font-style: italic;
  font-weight: var(--font-weight-black);
}

/* Pagination comparateur réutilisée sur superdeals */
.page-superdeals .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.page-superdeals .pagination.guide-list-pagination--figma.guide-list-pagination--number-pills {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin-left: 0;
  margin-right: 0;
  margin-top: var(--space-20);
  margin-bottom: var(--space-30);
  padding: 0;
  box-sizing: border-box;
}

.page-superdeals .pagination.guide-list-pagination--figma.guide-list-pagination--number-pills .guide-list-pagination__icon {
  display: block;
  width: 24px;
  height: 24px;
}

.page-superdeals .pagination.guide-list-pagination--figma.guide-list-pagination--number-pills .guide-list-pagination__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-superdeals .pagination.guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__prev,
.page-superdeals .pagination.guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__next {
  color: var(--color-secondary);
}

/* Disabled (1ère/dernière page) : même rendu v3 (grayscale + opacity) */
.page-superdeals .pagination.guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__prev:disabled img,
.page-superdeals .pagination.guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__next:disabled img {
  filter: grayscale(1) opacity(0.55);
}

.page-superdeals .pagination__numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.page-superdeals .pagination__prev,
.page-superdeals .pagination__next {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Centrage parfait des chiffres dans les pills */
.page-superdeals .pagination__number.guide-list-pagination__bullet {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-superdeals .guide-list-pagination__bullet-inner {
  display: block;
  line-height: 1;
}

.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__prev,
.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__next {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  background: transparent;
  color: var(--color-secondary, #240046);
}

.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__prev:not(:disabled):hover,
.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__next:not(:disabled):hover,
.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__prev:not(:disabled):focus-visible,
.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__next:not(:disabled):focus-visible {
  background: var(--color-secondary, #240046);
  background-color: var(--color-secondary, #240046);
  color: #ffffff;
  opacity: 1;
}

.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__prev:not(:disabled):hover img,
.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__next:not(:disabled):hover img,
.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__prev:not(:disabled):focus-visible img,
.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__next:not(:disabled):focus-visible img {
  filter: brightness(0) invert(1);
}

.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .guide-list-pagination__indicators {
  gap: 15px;
}

.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .guide-list-pagination__bullet {
  width: 50px;
  height: 30px;
  min-width: 50px;
  min-height: 30px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 100px;
  border: 1px solid #ced4da;
  background: #f8f9fa;
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: var(--color-secondary);
}

.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .guide-list-pagination__bullet--active,
.page-superdeals .guide-list-pagination--figma.guide-list-pagination--number-pills .pagination__number--active.guide-list-pagination__bullet {
  background: transparent;
  border-color: var(--color-secondary);
}

@media (max-width: 991px) {
  .page-home .explore-destinations {
    grid-template-columns: 1fr;
    display: grid;
    width: 100%;
  }

  .page-home .explore-destinations .card-destination-link,
  .page-home .explore-cards .card-destination-link {
    width: 100%;
  }

  .page-home .section-destinations .card-destination--large {
    height: 411px;
    min-height: 411px;
  }

  .page-home .section-destinations .explore-destinations .card-destination {
    height: 250px;
    min-height: 250px;
  }

  .page-home .section-destinations .explore-destinations {
    gap: var(--space-20);
  }
}

@media (max-width: 767px) {
  /* Destinations mobile — Figma 1480:11471 : carousel sous la 1ʳᵉ image + dots */
  .page-home .explore-destinations {
    display: none;
  }

  .page-home .explore-destinations-swiper-wrap {
    display: block;
    width: calc(100% + var(--container-padding));
    max-width: none;
    margin-left: 0;
    margin-right: calc(-1 * var(--container-padding));
    overflow: hidden;
    box-sizing: border-box;
  }

  .page-home .explore-destinations-swiper {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
  }

  .page-home .explore-destinations-swiper .swiper-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .page-home .explore-destinations-swiper .swiper-slide {
    width: 200px;
    flex-shrink: 0;
  }

  .page-home .explore-destinations-swiper .card-destination-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  .page-home .explore-destinations-swiper .card-destination {
    width: 100%;
    height: 250px;
    min-height: 250px;
    box-sizing: border-box;
  }

  .page-home .explore-destinations-swiper-wrap .pagination-carousel {
    display: flex;
    justify-content: center;
    gap: var(--space-10);
    margin-top: var(--space-15);
    width: calc(100% - var(--container-padding));
  }

  .page-home .explore-destinations-swiper-wrap .pagination-carousel__prev,
  .page-home .explore-destinations-swiper-wrap .pagination-carousel__next {
    display: none;
  }

  .page-home .explore-destinations-swiper-wrap .pagination-carousel__indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .page-home .explore-destinations-swiper-wrap .pagination-carousel__bullet {
    background: rgba(36, 0, 70, 0.2);
    border: 1px solid #fff;
    width: 8px;
    height: 8px;
    border-radius: 100px;
    padding: 0;
    cursor: pointer;
  }

  .page-home .explore-destinations-swiper-wrap .pagination-carousel__bullet--active {
    background: var(--color-secondary, #240046);
    border: none;
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 1199px) {
  .page-home .superdeal-bloc__gradient {
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-home .articles-cards {
    grid-template-columns: 1fr;
  }
}

/* Tablette / mobile large — pas le layout Figma desktop 1417:16752 */
@media (max-width: 991px) {
  .page-home .region-swiper .swiper-slide {
    min-height: auto;
  }
  .page-home .region-featured {
    min-height: 725px;
    height: auto;
  }
  .page-home .region-featured__layout {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    display: flex;
    min-height: 725px;
    height: 100%;
    padding: var(--space-15);
    gap: var(--space-15);
  }
  .page-home .region-featured__info {
    position: relative;
    left: auto;
    bottom: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: none;
    align-items: flex-start;
    text-align: left;
    order: 1;
    padding-top: var(--space-30);
  }
  .page-home .region-featured__region-name {
    font-size: 32px;
    line-height: 36px;
    color: var(--color-text-inverse);
  }
  .page-home .region-featured__desc {
    max-height: none;
    -webkit-line-clamp: 4;
  }
  .page-home .region-featured__cta-region {
    width: auto;
    max-width: max-content;
  }
  .page-home .region-featured__card {
    order: 2;
    position: relative;
    right: auto;
    bottom: auto;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
  }
  .page-home .region-featured__card .card-region {
    width: 100%;
    height: 500px;
  }
  .page-home .region-featured__card .card-region__content {
    top: 0;
    inset: 0;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 70px var(--space-15) var(--space-15);
  }
}

@media (max-width: 1199px) {
  /* Ne pas passer en 1 colonne : le carousel desktop garde 3 cartes côte à côte ; le bloc mobile (767px) gère l’affichage 1 carte */
  .page-home .top-camping-cards {
    grid-template-columns: 1fr;
  }

  :is(.page-home, .page-superdeals) .superdeal-cards {
    grid-template-columns: 1fr;
  }
  .superdeal-capsules__grid {
    grid-template-columns: 1fr;
  }
  .page-home .superdeal-bloc-section--narrow .superdeal-bloc--narrow {
    width: 100%;
    max-width: 960px;
  }
  .page-home .superdeal-bloc__gradient {
    flex-direction: column;
    align-items: stretch;
    width: 353px;
    max-width: 353px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    min-height: 923px;
    max-height: none;
    padding: var(--space-30) 15px;
  }
  /* 2e bloc : pas la min-height 923px du 1er ; padding 50px conservé */
  .page-home .superdeal-bloc-section--second .superdeal-bloc__gradient {
    min-height: 0;
    padding: 50px;
  }
  .page-home .superdeal-bloc__content {
    max-width: none;
    max-height: 280px;
  }
  .page-home .superdeal-bloc__card-wrap {
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* 1er bloc : hors desktop la hauteur 565px ne s'applique pas (contenu naturel + titre visible) */
  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc__card-wrap {
    width: 100%;
    max-width: 424px;
    height: auto;
    min-height: 0;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    align-self: stretch;
  }
  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc-card {
    flex: none;
  }
  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc-card
    .card-superdeal--moment {
    flex: none;
  }
}

/* ========== Mobile – Figma 157-9483 / 1480:10635 (ne modifie pas le desktop) ========== */
@media (max-width: 767px) {
  /* Padding contenu unifié 20px (sauf sections pleine largeur : hero, régions, articles…) */
  .page-home {
    --container-padding: 20px;
  }

  .page-home .search-section {
    /* Figma 1480:10635 — search y=500 sur image 650 → chevauchement 150px */
    margin-top: -150px;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Mobile home: typographie commune des titres de section (H2 .section__title) */
  .page-home .section__title {
    color: var(--text-secondary-secondary-100, #240046);
    text-align: center;
    font-size: var(--font-size-alias-size-32, 32px);
    font-style: normal;
    font-weight: var(--font-weight-alias-weight-black, 900);
    line-height: var(--font-line-height-alias-line-height-36, 36px);
  }

  .page-home .home-faq-section {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  .page-home .home-faq-section__title {
    font-size: var(--font-size-32, 32px);
    line-height: var(--line-height-36, 36px);
  }

  .page-home .home-faq__question {
    font-size: var(--font-size-16, 16px);
    padding: var(--space-12) 0;
  }

  .page-home .home-faq__answer {
    padding: 0 0 var(--space-12);
    font-size: var(--font-size-14, 14px);
  }

  .page-home .home-faq__footer {
    font-size: var(--font-size-14, 14px);
    line-height: var(--line-height-21, 21px);
  }

  /* Mobile: contenu superdeal en flex par défaut (1er bloc), override en block uniquement sur le 2e bloc */
  .page-home .superdeal-bloc-section--second .superdeal-bloc__content {
    max-width: 664px;
    display: block;
  }

  /* Mobile : n'afficher que le champ Destination (date, durée et personnes dans la modale) */
  .page-home .search-box .search-form__item--date-trigger,
  .page-home .search-box .search-form__item--departure-select,
  .page-home .search-box .search-form__item--duration-select,
  .page-home .search-box .search-form__item--select {
    display: none !important;
  }
  .page-home .search-box .search-form__separator {
    display: none;
  }
  .page-home .search-box .search-form__label {
    display: none;
  }

  /* Card moteur (Figma 1480:10657) — pleine largeur du padding, alignée avec les sections dessous */
  .page-home .search-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    /* Gap égal form ↔ titre ↔ chips → « Quelques inspirations… » centré verticalement */
    gap: 15px;
    align-items: stretch;
    box-shadow: 0 0 15px var(--color-text-muted, #adb5bd);
  }

  .page-home .search-box .search-form {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .page-home .search-box .search-shortcuts__title {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    flex-shrink: 0;
  }

  /* Figma chips : 3 premiers sur la 1re ligne (Bord de mer, Famille, Nature), Premium en dessous */
  .page-home .search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }

  .page-home .search-chips .chip {
    flex: 0 0 auto;
    min-width: 0;
    height: 31px;
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 14px;
    white-space: nowrap;
  }

  .page-home .search-chips .chip__icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  /* Input Destination + loupe sur la MÊME LIGNE dans un seul bloc arrondi */
  .page-home .search-box .search-form {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    height: auto;
    min-height: auto;
    padding: 10px 10px 10px 20px;
    gap: 15px;
    border-radius: var(--radius-cta);
  }
  .page-home .search-box .search-form__fields {
    flex-direction: row;
    flex: 1;
    min-width: 0;
    width: auto;
  }
  .page-home .search-box .search-form__item {
    flex: 1;
    min-width: 0;
  }
  .page-home .search-box .search-form__input {
    min-width: 0;
    font-size: 18px;
    line-height: 27px;
    color: var(--text-secondary-secondary-100, #240046);
  }
  .page-home .search-box .search-form__input::placeholder {
    color: var(--color-text-muted, #adb5bd);
    opacity: 1;
  }
  .page-home .search-box .search-form__submit {
    flex-shrink: 0;
    height: 35px;
    min-height: 35px;
    padding: 5px 15px;
  }
  .page-home .search-box .search-form__submit img {
    width: 20px;
    height: 21px;
  }

  .page-home .search-chips {
    gap: 10px;
  }
  .page-home .search-chips .chip {
    flex: 0 0 auto;
    min-width: auto;
  }

  .page-home .why-cards {
    grid-template-columns: 1fr;
  }
  .superdeal-capsules__title {
    font-size: 22px;
  }

  /* Hero mobile — Figma 1480:10635 Image 1582:13236 (393×650) */
  .page-home .hero {
    padding: 0;
  }
  .page-home .hero,
  .page-home .hero .hero__content,
  .page-home .hero .hero__inner {
    min-height: 650px;
  }
  .page-home .hero .hero__content {
    padding: 0;
    align-items: center;
  }
  .page-home .hero .hero__inner {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .page-home .hero .hero__bg img,
  .page-home .hero .hero__overlay {
    border-radius: 0;
  }
  .page-home .hero .hero__title {
    color: var(--text-grayscale-grayscale-white, #fff);
    text-align: center;
    font-size: var(--font-size-32, 32px);
    font-style: normal;
    font-weight: var(--font-weight-alias-weight-black, 900);
    line-height: var(--line-height-36, 36px);
    margin: 0 0 8px;
  }
  .page-home .hero .hero__subtitle {
    font-size: var(--font-size-16, 16px);
    line-height: 22px;
    margin: 0;
  }
  .page-home .hero .hero__headline {
    max-width: 313px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 0 0;
  }
  .page-home .hero .hero__title,
  .page-home .hero .hero__subtitle {
    max-width: 313px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Moteur chevauche le bas du hero (Figma : search y=500 / image 650) */
  .page-home .search-section {
    margin-top: -150px;
  }

  .page-home .search-box {
    padding: 15px;
    gap: 15px;
  }

  .page-home .search-box .search-form {
    padding: 8px 8px 8px 16px;
    gap: 10px;
    min-height: 48px;
    margin-bottom: 0;
  }

  .page-home .search-box .search-shortcuts__title {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
  }

  .page-home .search-chips {
    gap: 10px;
  }

  .page-home .search-chips .chip {
    flex: 0 0 auto;
    min-width: 0;
  }

  /* Sections : pleine largeur avec padding horizontal */
  .page-home section.section-destinations {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
  }

  /* Mobile: rythme vertical régions (espace avant titre + avant carte) */
  .page-home .region-section {
    padding-top: var(--space-50);
    padding-bottom: var(--space-50);
  }

  .page-home .region-section__heading {
    margin-bottom: var(--space-50);
  }

  /* (mobile) le titre régions hérite de .page-home .section__title */
  .page-home section.section-destinations > .container {
    padding-left: 0;
    padding-right: 0;
  }
  .page-home .articles-section .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  .page-home .home-camping-stories-section__inner {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  .page-home .home-camping-stories__reels {
    display: none;
  }

  .page-home .home-camping-stories-swiper-wrap {
    display: block;
    width: calc(100% + 2 * var(--container-padding));
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    padding-left: var(--container-padding);
    overflow: hidden;
  }

  .page-home .home-camping-stories-swiper-wrap .home-camping-stories-swiper {
    overflow: visible;
  }

  .page-home .home-camping-stories-swiper-wrap .swiper-wrapper {
    display: flex;
    align-items: stretch;
  }

  .page-home .home-camping-stories-swiper-wrap .swiper-slide {
    width: 280px;
    flex-shrink: 0;
    height: auto;
  }

  .page-home .home-camping-stories-swiper-wrap .card-camping-story {
    max-width: 280px;
    min-height: 620px;
  }

  /* Articles mobile — Figma 1480:12832 : grande carte + carousel 300×411 gap 20 + dots */
  .page-home .articles-section__main .articles-cards {
    display: none;
  }
  .page-home .articles-section__carousel {
    display: block;
    width: calc(100% + var(--container-padding));
    max-width: none;
    margin-left: 0;
    margin-right: calc(-1 * var(--container-padding));
    margin-top: var(--space-20);
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  .page-home .articles-section__carousel .articles-swiper {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    padding-right: 0;
    box-sizing: border-box;
  }
  .page-home .articles-section__carousel .swiper-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    padding-right: 0;
  }
  .page-home .articles-section__carousel .swiper-slide {
    width: 300px !important;
    min-width: 300px !important;
    flex-shrink: 0;
    height: auto;
  }
  .page-home .articles-section__carousel .card-article--immersive {
    height: 411px;
    width: 100% !important;
  }
  .page-home .articles-section__carousel > .pagination-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-10);
    margin-top: var(--space-15);
    width: calc(100% - var(--container-padding));
  }
  .page-home .articles-section__carousel > .pagination-carousel .pagination-carousel__prev,
  .page-home .articles-section__carousel > .pagination-carousel .pagination-carousel__next {
    display: none;
  }
  .page-home .articles-section__carousel > .pagination-carousel .pagination-carousel__indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .page-home .articles-section__carousel > .pagination-carousel .pagination-carousel__bullet {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: rgba(36, 0, 70, 0.2);
    border: 1px solid #fff;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
  }
  .page-home .articles-section__carousel > .pagination-carousel .pagination-carousel__bullet--active {
    width: 10px;
    height: 10px;
    background: var(--color-secondary, #240046);
    border: none;
  }
  /* Grande carte : hauteur 411px (Figma mobile) */
  .page-home .articles-section__main .card-article--large.card-article--immersive {
    width: 100% !important;
    max-width: none !important;
    height: 411px;
    margin-left: 0;
    margin-right: 0;
    align-self: stretch;
  }
  .page-home .articles-section__main .stack-20 {
    gap: var(--space-20);
  }

  /* Top campings mobile : carousel 1 carte (<768px uniquement) — Figma 1480:11367 */
  .page-home .top-campings-swiper-wrap--desktop {
    display: none;
  }
  .page-home .top-campings-swiper-wrap--mobile {
    display: block;
    overflow: hidden;
    width: 100%;
    padding-right: 0;
  }
  .page-home .guide-top-moment-swiper-wrap--desktop {
    display: none;
  }
  .page-home .guide-top-moment-section .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    align-items: stretch;
  }
  .page-home .guide-top-moment-swiper-wrap--mobile {
    display: block;
    /* déborde à droite pour le peek, 1ʳᵉ carte alignée au padding 20px */
    width: calc(100% + var(--container-padding));
    max-width: none;
    margin-left: 0;
    margin-right: calc(-1 * var(--container-padding));
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  .page-home .top-campings-swiper-wrap--mobile .swiper-slide,
  .page-home .guide-top-moment-swiper-wrap--mobile .swiper-slide {
    width: 300px;
    flex-shrink: 0;
  }

  /* Sur mobile aussi : forcer le swipe horizontal côté Swiper */
  .page-home .top-campings-swiper-wrap--mobile .top-campings-swiper,
  .page-home .guide-top-moment-swiper-wrap--mobile .guide-top-moment-swiper {
    touch-action: pan-y;
    overflow: hidden;
  }
  .page-home .guide-top-moment-swiper-wrap--mobile .swiper-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  /* Ne pas centrer la carte dans le slide — alignement gauche = padding section */
  .page-home .guide-top-moment-swiper-wrap--mobile .guide-top-push-card-wrap--mobile {
    width: 100%;
    max-width: 300px;
    height: 400px;
    aspect-ratio: auto;
    margin: 0;
  }
  .page-home .top-campings-swiper-wrap--mobile .card-camping {
    width: 100%;
    height: 511px;
    display: flex;
    flex-direction: column;
  }

  .page-home .top-campings-swiper-wrap--mobile .card-camping > .btn.btn--primary {
    margin-top: auto;
    margin-bottom: 15px;
  }

  /* Top campings mobile: pagination dots (comme Figma) */
  .page-home .top-campings-swiper-wrap--mobile .pagination-carousel,
  .page-home .guide-top-moment-swiper-wrap--mobile .pagination-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-10);
    margin-top: var(--space-15);
    width: calc(100% - var(--container-padding));
  }
  .page-home .top-campings-swiper-wrap--mobile .pagination-carousel__prev,
  .page-home .top-campings-swiper-wrap--mobile .pagination-carousel__next,
  .page-home .guide-top-moment-swiper-wrap--mobile .pagination-carousel__prev,
  .page-home .guide-top-moment-swiper-wrap--mobile .pagination-carousel__next {
    display: none;
  }
  .page-home .top-campings-swiper-wrap--mobile .pagination-carousel__indicators,
  .page-home .guide-top-moment-swiper-wrap--mobile .pagination-carousel__indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .page-home .top-campings-swiper-wrap--mobile .pagination-carousel__bullet,
  .page-home .guide-top-moment-swiper-wrap--mobile .pagination-carousel__bullet {
    background: rgba(36, 0, 70, 0.2);
    border: 1px solid #fff;
    width: 8px;
    height: 8px;
    border-radius: 100px;
    padding: 0;
    cursor: pointer;
  }
  .page-home .top-campings-swiper-wrap--mobile .pagination-carousel__bullet--active,
  .page-home .guide-top-moment-swiper-wrap--mobile .pagination-carousel__bullet--active {
    background: var(--color-secondary, #240046);
    border: none;
    width: 10px;
    height: 10px;
  }

  /* Pourquoi choisir Toocamp — gris pleine largeur, titre dans le panneau */
  .page-home .why-toocamp-section {
    padding-left: 0;
    padding-right: 0;
  }
  .page-home .why-toocamp-section .container,
  .page-home #why-toocamp .container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .page-home .why-toocamp-section__panel {
    border-radius: 0;
    padding: var(--space-50) var(--space-20) var(--space-30);
  }
  .page-home .why-cards {
    display: none;
  }
  .page-home .why-cards-swiper-wrap {
    display: block;
    width: calc(100% + var(--space-20));
    max-width: none;
    margin-left: 0;
    margin-right: calc(-1 * var(--space-20));
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  .page-home .why-cards-swiper-wrap .why-cards-swiper {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    box-sizing: border-box;
  }
  .page-home .why-cards-swiper-wrap .swiper-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .page-home .why-cards-swiper-wrap .swiper-slide {
    width: 300px !important;
    min-width: 300px !important;
    flex-shrink: 0;
  }
  .page-home .why-cards-swiper-wrap .card-value {
    min-height: 280px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
    padding: var(--space-20);
    background: #ffffff;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-card, 20px);
  }

  .page-home .why-cards-swiper-wrap .card-value__title {
    margin: 0;
    font-size: var(--font-size-24);
    line-height: var(--line-height-27);
    background: linear-gradient(90deg, var(--color-primary, #ff6d00) 0%, #9d4edd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .page-home .why-cards-swiper-wrap .card-value__title--featured {
    font-size: var(--font-size-32);
    line-height: var(--line-height-36);
  }

  .page-home .why-cards-swiper-wrap .card-value__text {
    margin: 0;
    color: var(--color-secondary, #240046);
  }
  .page-home .why-cards-swiper-wrap .pagination-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-10);
    margin-top: var(--space-15);
    width: calc(100% - var(--container-padding));
  }
  .page-home .why-cards-swiper-wrap .pagination-carousel__prev,
  .page-home .why-cards-swiper-wrap .pagination-carousel__next {
    display: none;
  }
  .page-home .why-cards-swiper-wrap .pagination-carousel__indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .page-home .why-cards-swiper-wrap .pagination-carousel__bullet {
    background: rgba(36, 0, 70, 0.2);
    border: 1px solid #fff;
    width: 8px;
    height: 8px;
    border-radius: 100px;
  }
  .page-home .why-cards-swiper-wrap .pagination-carousel__bullet--active {
    background: var(--color-secondary, #240046);
    border: none;
    width: 10px;
    height: 10px;
  }

  .page-home .find-camping-cards {
    display: none;
  }

  /* Figma 1480:11150 — même padding G/D que le moteur, swipe qui déborde à droite */
  .page-home .find-camping-section .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
  }

  .page-home .find-camping-cards-swiper-wrap {
    display: block;
    width: calc(100% + var(--container-padding));
    max-width: none;
    margin-left: 0;
    margin-right: calc(-1 * var(--container-padding));
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .page-home .find-camping-cards-swiper-wrap .find-camping-cards-swiper {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    padding-right: 0;
    box-sizing: border-box;
  }

  .page-home .find-camping-cards-swiper-wrap .swiper-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .page-home .find-camping-cards-swiper-wrap .swiper-slide {
    width: 310px;
    flex-shrink: 0;
  }

  .page-home .find-camping-cards-swiper-wrap .card-find-camping {
    min-height: 230px;
    height: 230px;
  }

  .page-home .find-camping-cards-swiper-wrap .pagination-carousel {
    display: flex;
    justify-content: center;
    gap: var(--space-10);
    margin-top: var(--space-15);
  }

  .page-home .find-camping-cards-swiper-wrap .pagination-carousel__prev,
  .page-home .find-camping-cards-swiper-wrap .pagination-carousel__next {
    display: none;
  }

  .page-home .find-camping-cards-swiper-wrap .pagination-carousel__indicators {
    display: flex;
    justify-content: center;
    gap: var(--space-10);
  }

  .page-home .find-camping-cards-swiper-wrap .pagination-carousel__bullet {
    width: 10px;
    height: 10px;
    border-radius: 100px;
  }

  .page-home .find-camping-cards-swiper-wrap .pagination-carousel__bullet--active {
    background: var(--color-secondary, #240046);
    border: none;
    width: 10px;
    height: 10px;
  }

  /* Premier bloc Super Deal mobile – Figma 834-12249 (TooCamp Copy) */
  .page-home .superdeal-bloc-section {
    padding-top: 0;
    padding-bottom: 0;
  }
  .page-home .superdeal-bloc__title {
    line-height: 42px;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  /* Hauteur du fond orange pour que la carte « Super Deal du moment » rentre entièrement dedans */
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__gradient {
    flex-direction: column;
    align-items: center;
    width: 353px;
    max-width: 353px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: var(--space-15);
    padding-bottom: var(--space-15);
    gap: var(--space-25);
    min-height: 0;
    height: auto;
    max-height: none;
    border-radius: var(--radius-card);
    box-sizing: border-box;
  }
  /* Ordre mobile: contenu -> carte -> bouton (CTA) */
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__content {
    order: 1;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__card-wrap {
    order: 2;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__card-column {
    order: 2;
    width: 323px;
    max-width: 323px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    flex-shrink: 0;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__card-column .superdeal-bloc__card-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .page-home .superdeal-bloc__cta--mobile.first-button {
    order: 3;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 353px;
    gap: var(--space-15);
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__card-wrap {
    width: 323px;
    max-width: 323px;
    margin-left: auto;
    margin-right: auto;
    flex-shrink: 0;
  }

  /* 2e bloc Super Deal mobile : respecter 353×625 et empêcher l'overlap de la section suivante */
  .page-home .superdeal-bloc-section--second {
    margin-bottom: var(--space-50);
  }
  /* 2e bloc uniquement : typo mobile (maquette) */
  .page-home .superdeal-bloc-section--second .superdeal-bloc__title {
    font-size: 32px;
    line-height: 36px;
  }
  .page-home .superdeal-bloc-section--second .superdeal-bloc__subtitle {
    font-size: 20px;
    line-height: 21px;
    margin-top: 15px;
  }
  .page-home .superdeal-bloc-section--second .superdeal-bloc__list {
    font-size: 18px;
    line-height: 27px;
    margin-top: 15px;
  }
  .page-home .superdeal-bloc-section--second .superdeal-bloc {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    margin-bottom: 0;
  }
  .page-home .superdeal-bloc-section--second .superdeal-bloc__gradient {
    flex-direction: column;
    align-items: center;
    width: 353px;
    max-width: 353px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: var(--space-15);
    padding-bottom: var(--space-15);
    height: auto;
    min-height: 625px;
    max-height: none;
    box-sizing: border-box;
  }
  .page-home .superdeal-bloc-section--second .superdeal-bloc__card-wrap {
    width: 100%;
    max-width: 353px;
    margin: 0 auto;
    align-self: auto;
    flex: 0 0 auto;
  }

  /* Mobile : pas de "carte dans la carte" sur le wrapper */
  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc:not(.superdeal-bloc--narrow)
    .superdeal-bloc__card-wrap {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-15);
    margin-top: 7%;
    margin-left: 0px;
    width: 353px;
    max-width: 323px;
    margin-bottom: var(--space-15);
    position: relative;
    z-index: 0;
  }

  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__cta {
    margin: 0 auto;
    position: relative;
    top: 12%;
    z-index: 1;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__cta--desktop {
    display: none;
  }
  /* Mobile: on n'affiche jamais le CTA desktop (dégradé), seulement le CTA mobile */
  .page-home .superdeal-bloc__cta--desktop {
    display: none;
  }
  .page-home .superdeal-bloc__cta--mobile.first-button {
    display: inline-flex;
    position: relative;
    top: 12%;
    z-index: 1;
  }
  .page-home .superdeal-bloc__cta--mobile.second-button {
    display: inline-flex;
    position: relative;
    top: -2%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .page-home .superdeal-bloc__cta--mobile.first-button {
    width: auto;
    margin: 0 auto;
    height: 45px;
    border-radius: var(--radius-cta);
    justify-content: center;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__title {
    font-size: var(--font-size-32, 32px);
    line-height: 42px;
    order: 1;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__subtitle {
    font-size: var(--font-size-20, 20px);
    line-height: var(--line-height-21, 21px);
    order: 2;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__list {
    margin-left: 27px;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__card-label {
    color: var(--text-grayscale-grayscale-white, #fff);
    text-align: center;
    font-size: var(--font-size-alias-size-24, 24px);
    font-style: normal;
    font-weight: var(--font-weight-alias-weight-black, 900);
    line-height: var(--font-line-height-alias-line-height-27, 27px);
    text-align: center;
    margin-bottom: 0;
  }

  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc:not(.superdeal-bloc--narrow)
    .superdeal-bloc__card-label {
    color: var(--text-grayscale-grayscale-white, #fff);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    text-align: center;
    font-size: var(--font-size-alias-size-24, 24px);
    font-style: normal;
    font-weight: var(--font-weight-alias-weight-black, 900);
    line-height: var(--font-line-height-alias-line-height-27, 27px);
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc-card {
    width: 100%;
    max-width: none;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal {
    width: 100%;
    max-width: none;
    border: 2px solid var(--color-border-light, #dee2e6);
    border-radius: var(--radius-card);
    box-shadow: 0 0 15px 0 var(--color-border-light, #e9ecef);
    gap: var(--space-20);
    padding-bottom: var(--space-15);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__bandeau {
    background: #9d4edd;
    padding: var(--space-10);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__media {
    height: 200px;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__badge {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 31px;
    padding: var(--space-5);
    background: var(--color-secondary, #9d4edd);
    border-radius: 5px;
    font-size: var(--font-size-14, 14px);
    font-weight: var(--font-weight-black, 900);
    line-height: var(--line-height-21, 21px);
    color: var(--color-text-inverse);
    display: inline-flex;
    align-items: center;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__bottom {
    padding: 0 var(--space-15);
    gap: var(--space-20);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__title {
    font-size: 20px;
    line-height: 21px;
    color: var(--color-secondary-dark, #240046);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__location,
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__detail {
    font-size: var(--font-size-14, 14px);
    line-height: var(--line-height-21, 21px);
    color: var(--color-secondary-dark, #240046);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__verbatim {
    display: none;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__price-cta {
    flex-direction: row;
    background: #e9ecef;
    border-radius: var(--radius-card);
    padding: 0;
    overflow: hidden;
    gap: 0;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__price-block {
    flex: 1;
    padding: var(--space-15);
    background: transparent;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__price {
    font-size: var(--font-size-20, 20px);
    color: var(--color-secondary-dark, #240046);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__old-price {
    font-size: var(--font-size-14, 14px);
    color: var(--color-secondary-dark, #240046);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__price-detail {
    font-size: var(--font-size-14, 14px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-secondary-dark, #240046);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__cta {
    flex: 1;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    margin: 0;
    min-height: 44px;
  }

  .page-home .superdeal-bloc-section .superdeal-bloc {
    margin-bottom: 50px;
    margin-left: 0;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Région mobile — Figma 1480:12549 card edito region */
  .page-home .region-section {
    padding-top: var(--space-50);
    padding-bottom: var(--space-50);
  }

  .page-home .region-section__heading {
    margin-top: 0;
    margin-bottom: var(--space-50);
  }

  .page-home .region-section > .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  .page-home .region-section .region-swiper-wrap.container {
    padding-left: 0;
    padding-right: 0;
  }

  .page-home .region-swiper {
    border-radius: 0;
  }

  .page-home .region-swiper .swiper-slide {
    min-height: 677px;
  }

  .page-home .region-featured {
    min-height: 677px;
    height: auto;
    border-radius: 0;
  }

  .page-home .region-featured__layout {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    min-height: 677px;
    height: 100%;
    padding: var(--space-20);
    gap: var(--space-50);
    box-sizing: border-box;
  }

  .page-home .region-featured__info {
    order: 1;
    position: relative;
    left: auto;
    bottom: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding-top: 0;
  }

  .page-home .region-featured__region-name {
    width: 100%;
    font-size: var(--font-size-34, 34px);
    line-height: var(--line-height-36, 36px);
    font-weight: var(--font-weight-black);
    color: var(--color-text-inverse);
    text-align: center;
  }

  .page-home .region-featured__desc {
    width: 100%;
    max-height: 80px;
    height: 80px;
    margin: 0;
    font-size: var(--font-size-18, 18px);
    line-height: var(--line-height-27, 27px);
    color: var(--color-text-inverse);
    text-align: center;
    -webkit-line-clamp: 3;
  }

  .page-home .region-featured__cta-region {
    width: auto;
    max-width: max-content;
    height: 65px;
    min-height: 65px;
    box-sizing: border-box;
  }

  .page-home .region-featured__card {
    order: 2;
    position: relative;
    right: auto;
    bottom: auto;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: 353px;
    height: auto;
    margin: 0 auto;
  }

  .page-home .region-featured__card .card-region {
    width: 100%;
    height: 350px;
  }

  .page-home .region-featured__card .card-region__content {
    top: 0;
    inset: 0;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 70px var(--space-15) var(--space-15);
  }

  /* Figma mobile — dots ronds (comme Mag / vidéos), flèches masquées */
  .page-home .region-swiper-wrap {
    gap: var(--space-20);
    padding-bottom: var(--space-20);
  }

  .page-home .region-section .pagination-carousel,
  .page-home .region-section .pagination-carousel.swiper-pagination-lock {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    width: 100%;
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 2;
  }
  .page-home .region-section .pagination-carousel__prev,
  .page-home .region-section .pagination-carousel__next {
    display: none !important;
  }
  .page-home .region-section .pagination-carousel__indicators {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 0;
  }
  .page-home .region-section .pagination-carousel__bullet {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: rgba(36, 0, 70, 0.2);
    border: 1px solid #fff;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
  }
  .page-home .region-section .pagination-carousel__bullet--active {
    width: 10px;
    height: 10px;
    background: var(--color-secondary, #240046);
    border: none;
  }

  .page-home .top-campings-section .container,
  .page-home .section.top-campings-section .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  .page-home .home-piaf-section {
    width: 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
  }

  .page-home .home-piaf-section__content {
    flex-direction: column;
    align-items: stretch;
  }

  .page-home .home-piaf-section__avatar {
    flex: 0 0 auto;
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
  }

  .page-home .home-piaf-section__panel::before {
    display: none;
  }

  .page-home .home-piaf-section__suggestion {
    width: 100%;
    white-space: normal;
  }
}

@media (min-width: 992px) {
  /*
   * Figma 1417:16752 — card edito region (desktop exact)
   * - layout: items-end, padding 30px
   * - texte bas-gauche 500px
   * - CTA shrink-to-text (pas full width)
   * - carte camping 350×500 absolute bottom/right 30px
   */
  .page-home .region-swiper .swiper-slide,
  .page-home .region-featured,
  .page-home .region-featured__layout {
    min-height: 670px;
    height: 670px;
  }

  .page-home .region-featured {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
  }

  .page-home .region-featured__overlay {
    background: linear-gradient(
      0deg,
      rgba(36, 0, 70, 0.6) 0%,
      rgba(36, 0, 70, 0) 100%
    );
  }

  .page-home .region-featured__layout {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
  }

  .page-home .region-featured__info {
    position: absolute;
    left: 30px;
    bottom: 30px;
    top: auto;
    right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 500px;
    max-width: calc(100% - 350px - 90px);
    margin: 0;
    padding: 0;
    text-align: left;
    z-index: 2;
  }

  .page-home .region-featured__region-name {
    margin: 0;
    width: auto;
    max-width: 100%;
    font-size: 62px;
    line-height: 63px;
    font-weight: 900;
    color: #fff;
    text-align: left;
  }

  .page-home .region-featured__desc {
    margin: 0;
    width: 100%;
    max-height: 80px;
    font-size: 18px;
    line-height: 27px;
    color: #fff;
    text-align: left;
    -webkit-line-clamp: 3;
  }

  .page-home .region-featured__cta-region {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: max-content;
    min-width: 0;
    height: 65px;
    min-height: 65px;
    padding: 5px 15px;
    margin: 0;
    align-self: flex-start;
    flex: 0 0 auto;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .page-home .region-featured__card {
    position: absolute;
    right: 30px;
    bottom: 30px;
    top: auto;
    left: auto;
    width: 350px;
    height: 500px;
    max-width: 350px;
    margin: 0;
    z-index: 3;
    transform: none;
  }

  .page-home .region-featured__card .card-region {
    width: 350px;
    height: 500px;
    border-radius: 20px;
  }

  .page-home .region-featured__card .card-region__bg,
  .page-home .region-featured__card .card-region__image,
  .page-home .region-featured__card .card-region__overlay {
    border-radius: 20px;
  }

  .page-home .region-featured__card .card-region__overlay {
    background: linear-gradient(
      180deg,
      rgba(36, 0, 70, 0) 0%,
      #240046 100%
    );
  }

  .page-home .region-featured__card .card-region__content {
    inset: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    box-sizing: border-box;
  }
}

/* ========== Super Deals carousel (Figma 1424:17556) ========== */
.page-home .home-superdeals-section {
  padding: var(--space-50) 0;
  overflow: visible;
}

@media (min-width: 768px) {
  /* Figma 1424:17556 – section pleine largeur 1200px */
  .page-home .home-superdeals-section > .container {
    padding-left: 0;
    padding-right: 0;
    max-width: var(--container-max);
  }
}

.page-home .home-superdeals-section .container {
  overflow: visible;
}

.page-home .home-superdeals-section__title {
  text-align: center;
  margin: 0 auto var(--space-50);
  max-width: 800px;
  background: linear-gradient(
    90deg,
    var(--color-primary, #ff6d00) 0%,
    var(--color-secondary-light, #9d4edd) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-home .home-superdeals-carousel-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-25);
}

.page-home .home-superdeals-light-swiper {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
}

.page-home .home-superdeals-light-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  transition-property: transform;
}

.page-home .home-superdeals-light-swiper .swiper-slide {
  flex-shrink: 0;
  width: 350px !important;
  max-width: 85vw;
  height: auto;
  box-sizing: border-box;
}

.page-home .home-superdeals-light-swiper .card-superdeal--moment {
  width: 350px;
  max-width: 100%;
  height: 560px;
  box-sizing: border-box;
  box-shadow: 0 0 7.5px #e9ecef;
  gap: var(--space-20);
}

/* Figma 1424:17556 — bandeau rose hauteur fixe (2 lignes), centrage vertical si 1 ligne */
.page-home .home-superdeals-light-swiper .card-superdeal--moment .card-superdeal__bandeau {
  box-sizing: border-box;
  height: 74px;
  min-height: 74px;
  max-height: 74px;
  padding: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  overflow: hidden;
}

.page-home .home-superdeals-light-swiper .card-superdeal--moment .card-superdeal__bandeau-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: center;
  white-space: normal;
  line-height: var(--line-height-27, 27px);
  max-width: 100%;
}

.page-home .home-superdeals-light-swiper .card-superdeal--moment .card-superdeal__media {
  height: 200px;
  flex-shrink: 0;
}

.page-home .home-superdeals-light-swiper .card-superdeal--moment .card-superdeal__bottom {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 var(--space-15) var(--space-15);
  gap: var(--space-20);
  justify-content: flex-start;
}

.page-home .home-superdeals-light-swiper .card-superdeal--moment .card-superdeal__content {
  margin-top: 0;
  gap: var(--space-15);
  /* ne pas absorber tout l’espace : laisse le gap + margin-top auto au-dessus du prix */
  flex: 0 1 auto;
  min-height: 0;
}

.page-home .home-superdeals-light-swiper .card-superdeal--moment .card-superdeal__price-cta {
  margin-top: auto;
  flex-shrink: 0;
}

.page-home .home-superdeals-light-swiper .card-superdeal--moment .card-superdeal__cta {
  min-height: 35px;
}

/* Pagination sous le carousel (Figma 1424:17556) */
.page-home .home-superdeals-carousel-wrap > .pagination-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-15);
  width: auto;
  max-width: none;
  margin: 0;
  position: relative;
  z-index: 3;
}

.page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__prev:not(.is-disabled):not(:disabled),
.page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__next:not(.is-disabled):not(:disabled) {
  background: rgba(36, 0, 70, 0.8);
  color: #ffffff;
}

.page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__prev:hover:not(.is-disabled):not(:disabled),
.page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__next:hover:not(.is-disabled):not(:disabled) {
  opacity: 1;
  background: var(--color-secondary, #240046);
  box-shadow:
    0 0 0 2px rgba(157, 78, 221, 0.35),
    0 0 16px rgba(157, 78, 221, 0.55);
}

.page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__prev.is-disabled,
.page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__prev:disabled,
.page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__next.is-disabled,
.page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__next:disabled {
  background: rgba(255, 255, 255, 0.4);
  color: var(--color-border-strong, #ced4da);
}

.page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__indicators {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__bullet--bar {
  width: 50px;
  height: 5px;
  border-radius: 100px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(36, 0, 70, 0.2);
}

.page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__bullet--bar.pagination-carousel__bullet--active {
  background: var(--color-secondary, #240046);
}

.page-home .home-superdeals-carousel__fade {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 560px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  z-index: 2;
}

:is(.page-home, .page-superdeals) .card-superdeal__meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

:is(.page-home, .page-superdeals) .card-superdeal__stay-label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
  color: var(--color-secondary, #240046);
}

:is(.page-home, .page-superdeals) .card-superdeal__stars-pill {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px var(--space-5);
  border-radius: 5px;
  background: #f7dac4;
}

:is(.page-home, .page-superdeals) .card-superdeal__stars-pill-icon {
  color: var(--color-primary, #ff6d00);
  font-size: 15px;
  line-height: 1;
}

/* ========== Style camping (Figma 1425:17586) ========== */
.page-home .home-style-camping-section {
  padding: var(--space-50) 0;
  overflow: visible;
}

.page-home .home-style-camping-section .container {
  overflow: visible;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.page-home .home-style-camping-section__title {
  text-align: center;
  margin: 0 auto var(--space-50);
}

.page-home .home-style-camping__desktop {
  display: block;
}

.page-home .home-style-camping__mobile {
  display: none;
}

.page-home .home-style-camping-carousel-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-25);
}

.page-home .home-style-camping__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-15);
  margin-bottom: 0;
}

.page-home .home-style-camping__nav .pagination-carousel__prev:not(.is-disabled):not(:disabled),
.page-home .home-style-camping__nav .pagination-carousel__next:not(.is-disabled):not(:disabled) {
  background: rgba(36, 0, 70, 0.8);
  color: #ffffff;
}

.page-home .home-style-camping__nav .pagination-carousel__prev.is-disabled,
.page-home .home-style-camping__nav .pagination-carousel__prev:disabled {
  background: rgba(255, 255, 255, 0.4);
  color: var(--color-border-strong, #ced4da);
}

.page-home .home-style-camping-swiper {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
}

.page-home .home-style-camping-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  transition-property: transform;
}

.page-home .home-style-camping-swiper .swiper-slide {
  flex-shrink: 0;
  width: 100% !important;
  max-width: none;
  height: auto;
  box-sizing: border-box;
}

.page-home .home-style-camping__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
  width: 100%;
}

.page-home .home-style-camping__grid .card-destination-link {
  display: block;
  height: 400px;
  min-width: 0;
}

.page-home .home-style-camping-swiper .card-destination {
  height: 100%;
  padding: var(--space-15);
  box-sizing: border-box;
}

/* Violet uniquement sur le 1/3 bas (lisibilité titre) */
.page-home .home-style-camping-section .card-destination__overlay,
.page-home .section-destinations .card-destination__overlay {
  background: var(--gradient-photo-overlay);
  opacity: 1;
}

.page-home .home-style-camping-section .card-destination-link:hover .card-destination__overlay,
.page-home .home-style-camping-section .card-destination-link:focus-visible .card-destination__overlay,
.page-home .section-destinations .card-destination-link:hover .card-destination__overlay,
.page-home .section-destinations .card-destination-link:focus-visible .card-destination__overlay {
  background: var(--gradient-photo-overlay-hover);
}

.page-home .home-style-camping-swiper .card-destination__title {
  font-size: var(--font-size-24);
  line-height: var(--line-height-27);
}

.page-home .home-style-camping-swiper .card-destination__count {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
}

.page-home .home-style-camping-swiper .card-destination__count:empty {
  display: none;
}

.page-home .home-style-camping-swiper-wrap.home-style-camping__mobile .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

@media (max-width: 991px) {
  .page-home .home-style-camping__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ========== Videos (Figma 1441:17937) ========== */
.page-home .home-videos-section {
  padding: var(--space-50) 0;
}

.page-home .home-videos-section .container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.page-home .home-videos-section__title {
  text-align: center;
  margin-bottom: var(--space-50);
}

.page-home .home-videos__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.page-home .home-videos__secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

.page-home .home-videos-section__carousel {
  display: none;
}

.page-home .card-video {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.page-home .card-video__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.page-home .card-video--large .card-video__media {
  min-height: 500px;
}

.page-home .card-video__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.35s ease;
}

.page-home .card-video__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}

.page-home .card-video__gradient {
  position: absolute;
  inset: 0;
  /* Violet uniquement sur le 1/3 bas */
  background: var(--gradient-photo-overlay);
}

.page-home .card-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 56px;
  height: 56px;
  padding: var(--space-5);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-sizing: border-box;
  pointer-events: none;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.page-home .card-video__play-icon {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.3s ease;
}

/* Figma 1441:17937 — titre + étoiles + ville en bas à gauche */
.page-home .card-video__content {
  position: absolute;
  left: var(--space-20);
  right: var(--space-20);
  bottom: var(--space-20);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  max-width: calc(100% - 2 * var(--space-20));
}

.page-home .card-video__title {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0;
  max-width: 100%;
  color: #fff;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.page-home .card-video:not(.card-video--large) .card-video__title {
  font-size: var(--font-size-28);
  line-height: var(--line-height-30);
}

.page-home .card-video--large .card-video__title {
  max-width: 500px;
}

/* Hover play + zoom (hors media query pour fiabilité desktop/local) */
.page-home .card-video:hover .card-video__image,
.page-home .card-video:focus-visible .card-video__image,
.page-home .home-videos-section .card-video:hover .card-video__image {
  transform: scale(1.08);
}

.page-home .card-video:hover .card-video__play,
.page-home .card-video:focus-visible .card-video__play,
.page-home .home-videos-section .card-video:hover .card-video__play {
  transform: translate(-50%, -50%) scale(1.28);
  background: #ff6d00;
  box-shadow: 0 8px 24px rgba(255, 109, 0, 0.45);
}

.page-home .card-video:hover .card-video__play-icon circle,
.page-home .card-video:focus-visible .card-video__play-icon circle,
.page-home .home-videos-section .card-video:hover .card-video__play-icon circle {
  stroke: #fff;
}

.page-home .card-video:hover .card-video__play-icon path,
.page-home .card-video:focus-visible .card-video__play-icon path,
.page-home .home-videos-section .card-video:hover .card-video__play-icon path {
  fill: #fff;
  stroke: #fff;
}

@media (hover: hover) {
  .page-home .card-video:hover .card-video__title,
  .page-home .card-video:focus-visible .card-video__title {
    background: linear-gradient(
      90deg,
      var(--color-primary) 0%,
      var(--color-primary-gradient-end) 45%,
      var(--color-secondary-light) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    padding-bottom: 0.1em;
  }
}

.page-home .card-video__stars {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px var(--space-5);
  border-radius: 5px;
  background: #f7dac4;
}

.page-home .card-video__star {
  font-size: 15px;
  line-height: 1;
  color: #ff6d00;
}

.page-home .card-video__city {
  margin: 0;
  max-width: 100%;
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
  .page-home .home-style-camping__desktop {
    display: none;
  }

  .page-home .home-style-camping__mobile {
    display: block;
  }

  /* Figma 1480:12808 — cartes 300×400, gap 20, peek de la suivante */
  .page-home .home-style-camping-section .container {
    padding-left: var(--container-padding, 20px);
    padding-right: var(--container-padding, 20px);
  }

  .page-home .home-style-camping-section__title {
    margin-bottom: var(--space-25);
    text-align: left;
  }

  .page-home .home-style-camping-swiper-wrap.home-style-camping__mobile {
    width: calc(100% + var(--container-padding, 20px));
    max-width: none;
    margin-left: 0;
    margin-right: calc(-1 * var(--container-padding, 20px));
    overflow: hidden;
    box-sizing: border-box;
  }

  .page-home .home-style-camping-swiper-wrap .home-style-camping-swiper--mobile {
    width: 100%;
    overflow: visible;
    touch-action: pan-y;
  }

  .page-home .home-style-camping-swiper-wrap .swiper-wrapper {
    display: flex;
    align-items: stretch;
  }

  .page-home .home-style-camping-swiper-wrap .home-style-camping-swiper--mobile .swiper-slide {
    width: 300px !important;
    max-width: 300px;
    height: 400px;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .page-home .home-style-camping-swiper-wrap .home-style-camping-swiper--mobile .card-destination-link {
    display: block;
    width: 300px;
    height: 400px;
    min-height: 0;
  }

  .page-home .home-style-camping-swiper-wrap .home-style-camping-swiper--mobile .card-destination {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-15, 15px);
  }

  .page-home .home-style-camping-swiper-wrap > .pagination-carousel {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: var(--space-15);
    width: 100%;
  }

  .page-home .home-style-camping-swiper-wrap > .pagination-carousel .pagination-carousel__prev,
  .page-home .home-style-camping-swiper-wrap > .pagination-carousel .pagination-carousel__next {
    display: none !important;
  }

  .page-home .home-style-camping-swiper-wrap > .pagination-carousel .pagination-carousel__indicators {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .page-home .home-style-camping-swiper-wrap > .pagination-carousel .pagination-carousel__bullet {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: rgba(36, 0, 70, 0.2);
    border: 1px solid #fff;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
  }

  .page-home .home-style-camping-swiper-wrap > .pagination-carousel .pagination-carousel__bullet--active {
    width: 10px;
    height: 10px;
    background: var(--color-secondary, #240046);
    border: none;
  }

  /* Vidéos mobile — même principe que Mag : 1 featured + carousel gap 20 + dots */
  .page-home .home-videos-section .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  .page-home .home-videos__secondary {
    display: none;
  }
  .page-home .home-videos-section__carousel {
    display: block;
    width: calc(100% + var(--container-padding));
    max-width: none;
    margin-left: 0;
    margin-right: calc(-1 * var(--container-padding));
    margin-top: 0;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  .page-home .home-videos-section__carousel .home-videos-swiper {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    box-sizing: border-box;
  }
  .page-home .home-videos-section__carousel .swiper-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .page-home .home-videos-section__carousel .swiper-slide {
    width: 300px !important;
    min-width: 300px !important;
    flex-shrink: 0;
    height: auto;
  }
  .page-home .home-videos-section__carousel .card-video {
    width: 100%;
    height: 411px;
  }
  .page-home .home-videos-section__carousel .card-video__media {
    min-height: 411px;
    height: 411px;
  }
  .page-home .home-videos-section .card-video--large {
    width: 100%;
  }
  .page-home .home-videos-section .card-video--large .card-video__media {
    min-height: 411px;
    height: 411px;
  }
  .page-home .home-videos-section__carousel > .pagination-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-10);
    margin-top: var(--space-15);
    width: calc(100% - var(--container-padding));
  }
  .page-home .home-videos-section__carousel > .pagination-carousel .pagination-carousel__prev,
  .page-home .home-videos-section__carousel > .pagination-carousel .pagination-carousel__next {
    display: none;
  }
  .page-home .home-videos-section__carousel > .pagination-carousel .pagination-carousel__indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .page-home .home-videos-section__carousel > .pagination-carousel .pagination-carousel__bullet {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: rgba(36, 0, 70, 0.2);
    border: 1px solid #fff;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
  }
  .page-home .home-videos-section__carousel > .pagination-carousel .pagination-carousel__bullet--active {
    width: 10px;
    height: 10px;
    background: var(--color-secondary, #240046);
    border: none;
  }

  .page-home .home-superdeals-carousel__fade {
    display: none;
  }
}

/* Figma 157:9047 – colonne contenu unique 1200px centrée (desktop / tablette large) */
@media (min-width: 768px) {
  .page-home main :is(
    .find-camping-section,
    .guide-top-moment-section,
    .home-piaf-section,
    .region-section,
    .home-superdeals-section,
    .home-style-camping-section,
    .articles-section,
    .home-videos-section,
    .home-netlinking-section,
    .why-toocamp-section,
    .home-faq-section
  ) > .container,
  .page-home main .region-section .region-swiper-wrap.container,
  .page-home section.section-destinations > .container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .page-home section.section-destinations,
  .page-home .home-piaf-section {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
}

/* Régions mobile/tablette : dots only + swipe (pas de flèches) */
@media (max-width: 1199px) {
  .page-home .region-section .pagination-carousel__prev,
  .page-home .region-section .pagination-carousel__next {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .page-home .region-section .pagination-carousel,
  .page-home .region-section .pagination-carousel.swiper-pagination-lock {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .page-home .region-section .pagination-carousel__indicators {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  .page-home .region-swiper,
  .page-home .region-swiper .swiper-wrapper {
    touch-action: pan-y !important;
  }
}

/* Super Deals mobile/tablette : carte centrée + dots + swipe */
@media (max-width: 1199px) {
  .page-home .home-superdeals-section > .container {
    padding-left: var(--container-padding, 20px);
    padding-right: var(--container-padding, 20px);
  }

  .page-home .home-superdeals-carousel-wrap {
    width: 100%;
    align-items: center;
  }

  .page-home .home-superdeals-light-swiper {
    width: 100%;
    overflow: hidden;
  }

  /* Largeur carte + marges égales via centeredSlides */
  .page-home .home-superdeals-light-swiper .swiper-slide {
    width: min(350px, calc(100% - 40px)) !important;
    max-width: none;
    box-sizing: border-box;
  }

  .page-home .home-superdeals-light-swiper .card-superdeal--moment {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .page-home .home-superdeals-carousel-wrap > .pagination-carousel__prev,
  .page-home .home-superdeals-carousel-wrap > .pagination-carousel__next,
  .page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__prev,
  .page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__next {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .page-home .home-superdeals-carousel-wrap > .pagination-carousel {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__indicators {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  .page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__bullet {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: rgba(36, 0, 70, 0.2);
    border: 1px solid #fff;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
  }

  .page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__bullet--active {
    width: 10px;
    height: 10px;
    background: var(--color-secondary, #240046);
    border: none;
  }

  .page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__bullet--bar {
    width: 8px;
    height: 8px;
  }

  .page-home .home-superdeals-carousel-wrap > .pagination-carousel .pagination-carousel__bullet--bar.pagination-carousel__bullet--active {
    width: 10px;
    height: 10px;
  }

  .page-home .home-superdeals-light-swiper,
  .page-home .home-superdeals-light-swiper .swiper-wrapper {
    touch-action: pan-y !important;
  }

  .page-home .home-superdeals-carousel__fade {
    display: none;
  }
}

/* Sticky PIAF — barre fixe en bas à droite (largeur = phrase la plus longue) */
.page-home .home-piaf-sticky {
  position: fixed;
  right: max(var(--space-20), env(safe-area-inset-right, 0px));
  left: auto;
  bottom: max(var(--space-15), env(safe-area-inset-bottom, 0px));
  transform: none;
  z-index: 250;
  width: max-content;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

.page-home .home-piaf-sticky__inner {
  pointer-events: auto;
  filter: drop-shadow(0 0 12px rgba(173, 181, 189, 0.65));
}

.page-home .home-piaf-sticky__field {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  width: max-content;
  max-width: 100%;
  min-height: 64px;
  padding: var(--space-15) var(--space-20);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: var(--radius-cta, 999px);
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
}

.page-home .home-piaf-sticky__field:hover,
.page-home .home-piaf-sticky__field:focus-visible {
  border-color: var(--color-secondary, #240046);
  outline: none;
}

.page-home .home-piaf-sticky__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 40px;
}

.page-home .home-piaf-sticky__icon img {
  display: block;
  width: 48px;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}

.page-home .home-piaf-sticky__placeholder-wrap {
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  height: 27px;
  overflow: hidden;
}

.page-home .home-piaf-sticky .home-piaf-section__input-placeholder-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  transition: transform 0.45s ease;
}

.page-home .home-piaf-sticky .home-piaf-section__input-placeholder-line {
  flex-shrink: 0;
  width: max-content;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  font-weight: 300;
  line-height: 27px;
  color: var(--color-text-muted, #6c757d);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .page-home .home-piaf-sticky {
    right: max(var(--space-10), env(safe-area-inset-right, 0px));
    left: max(var(--space-10), env(safe-area-inset-left, 0px));
    width: auto;
    max-width: none;
  }

  .page-home .home-piaf-sticky__field {
    width: 100%;
    max-width: none;
  }

  .page-home .home-piaf-sticky__placeholder-wrap {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .page-home .home-piaf-sticky .home-piaf-section__input-placeholder-track,
  .page-home .home-piaf-sticky .home-piaf-section__input-placeholder-line {
    width: 100%;
    max-width: 100%;
  }

  .page-home .home-piaf-sticky .home-piaf-section__input-placeholder-line {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

body.chatbot-opened .page-home .home-piaf-sticky {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.page-home #chat-bubble {
  display: none !important;
}


/* /v3-css/pages/home-tablet.v3.css */
/**
 * Home – breakpoints tablette (iPad Mini, iPad Air, iPad Pro)
 * Ne modifie pas le code mobile (767px) ni desktop.
 */

/* iPad Mini (768px–834px) – même conf que mobile */
@media (min-width: 768px) and (max-width: 834px) {
  .page-home .search-section {
    margin-top: -40px;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  .page-home .search-box .search-form__item--date-trigger,
  .page-home .search-box .search-form__item--departure-select,
  .page-home .search-box .search-form__item--duration-select,
  .page-home .search-box .search-form__item--select {
    display: none !important;
  }
  .page-home .search-box .search-form__separator {
    display: none;
  }
  .page-home .search-box .search-form__label {
    display: none;
  }

  /* Input Destination + loupe sur la MÊME LIGNE dans un seul bloc arrondi */
  .page-home .search-box .search-form {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 48px;
    height: 48px;
    padding: 0 var(--space-10) 0 var(--space-15);
    gap: var(--space-10);
    border-radius: var(--radius-cta);
  }
  .page-home .search-box .search-form__fields {
    flex-direction: row;
    flex: 1;
    min-width: 0;
    width: auto;
  }
  .page-home .search-box .search-form__item {
    flex: 1;
    min-width: 0;
  }
  .page-home .search-box .search-form__input {
    min-width: 0;
  }
  .page-home .search-box .search-form__submit {
    flex-shrink: 0;
    padding: var(--space-12) var(--space-16);
  }
  .page-home .search-box .search-form__submit img {
    width: 20px;
    height: 21px;
  }

  .page-home .why-cards {
    grid-template-columns: 1fr;
  }
  .superdeal-capsules__title {
    font-size: 22px;
  }

  /* Hero mobile/iPad Mini — Figma 1582:13236 : photo pleine largeur */
  .page-home .hero {
    padding: 0;
  }
  .page-home .hero .hero__inner {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .page-home .hero .hero__bg img,
  .page-home .hero .hero__overlay {
    border-radius: 0;
  }
  .page-home .hero .hero__title {
    font-size: var(--font-size-32, 32px);
    line-height: var(--line-height-36, 36px);
  }
  .page-home .hero .hero__subtitle {
    font-size: var(--font-size-18, 18px);
    line-height: var(--line-height-27, 27px);
  }
  .page-home .hero .hero__headline {
    padding: var(--space-20) var(--space-15);
  }

  /* Sections : pleine largeur avec padding horizontal */
  .page-home section.section-destinations {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
  }
  .page-home section.section-destinations > .container {
    padding-left: 0;
    padding-right: 0;
  }
  .page-home .articles-section .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Articles mobile – Figma 157-9483 / 347-8182 : titre + photo 411px + carousel 330×400px, gap 15px, pl 20px, sans pagination */
  .page-home .articles-section__main .articles-cards {
    display: none;
  }
  .page-home .articles-section__carousel {
    display: block;
    padding-left: 20px;
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    margin-top: 25px;
    width: calc(100% + 2 * var(--container-padding));
    overflow: hidden;
    box-sizing: content-box;
  }
  .page-home .articles-section__carousel .articles-swiper {
    width: 100%;
    overflow: hidden;
  }
  /* Force layout horizontal : wrapper en ligne pour éviter l’empilement des slides (maquette Figma 157-9483) */
  .page-home .articles-section__carousel .swiper-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    padding-right: var(--container-padding);
  }
  .page-home .articles-section__carousel .swiper-slide {
    width: 330px;
    min-width: 330px;
    flex-shrink: 0;
    height: auto;
  }
  .page-home .articles-section__carousel .card-article--immersive {
    height: 400px;
    width: 330px;
  }
  /* Grande carte : hauteur 411px, image en pleine hauteur, titre en overlay dans l’image (maquette Figma 157-9483) */
  .page-home .articles-section__main .card-article--large.card-article--immersive {
    height: 411px;
  }
  .page-home .articles-section__main .stack-20 {
    gap: var(--space-20);
  }

  /* Top campings tablette : garder le carousel desktop (4 cartes + pagination) */
  .page-home .top-campings-swiper-wrap--desktop {
    display: none;
  }
  .page-home .top-campings-swiper-wrap--mobile {
    display: block;
    overflow: hidden;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .page-home .top-campings-swiper-wrap--mobile .swiper-slide {
    width: 300px;
    flex-shrink: 0;
  }
  .page-home .top-campings-swiper-wrap--mobile .card-camping {
    width: 100%;
  }

  /* Premier bloc Super Deal mobile – Figma 834-12249 (TooCamp Copy) */
  .page-home .superdeal-bloc-section {
    padding-top: 0;
    padding-bottom: 0;
  }
  .page-home .superdeal-bloc__title {
    line-height: 42px;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  /* Hauteur du fond orange pour que la carte « Super Deal du moment » rentre entièrement dedans */
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__gradient {
    flex-direction: column;
    align-items: center;
    padding: var(--space-15);
    gap: var(--space-25);
    min-height: 920px;
    height: auto;
    max-height: none;
    border-radius: var(--radius-card);
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__content {
    display: contents;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__card-wrap {
    order: 4;
    width: 100%;
    max-width: none;
    margin-left: 13%;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Style carte (card-wrap) – fond blanc — 1er bloc ; 2e superdeal sans cadre blanc */
  .page-home
    .superdeal-bloc-section:not(.superdeal-bloc-section--second)
    .superdeal-bloc:not(.superdeal-bloc--narrow)
    .superdeal-bloc__card-wrap {
    flex: 0 0 424px;
    width: 100%;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: -6px;
    background: #ffffff;
    padding: var(--space-10);
    border-radius: var(--radius-card);
    box-shadow: 0 0 15px 0 var(--color-border-light, #e9ecef);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12, 12px);
  }

  .page-home .superdeal-bloc__cta {
    position: relative;
    top: 195%;
    margin: 0 auto;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__cta {
    order: 5;
    width: 100%;
    max-width: 353px;
    height: 45px;
    border-radius: var(--radius-cta);
    justify-content: center;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__title {
    font-size: var(--font-size-32, 32px);
    line-height: 42px;
    order: 1;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__subtitle {
    font-size: var(--font-size-20, 20px);
    line-height: var(--line-height-21, 21px);
    order: 2;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__list {
    order: 3;
    margin-left: 27px;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc__card-label {
    font-size: var(--font-size-24, 24px);
    text-align: center;
    margin-bottom: 0;
  }
  .page-home .superdeal-bloc-section:first-of-type .superdeal-bloc-card {
    width: 100%;
    max-width: none;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal {
    width: 100%;
    max-width: none;
    border: 2px solid var(--color-border-light, #dee2e6);
    border-radius: var(--radius-card);
    box-shadow: 0 0 15px 0 var(--color-border-light, #e9ecef);
    gap: var(--space-20);
    padding-bottom: var(--space-15);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__bandeau {
    background: #9d4edd;
    color: #fff;
    padding: var(--space-10);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__media {
    height: 200px;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__badge {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 31px;
    padding: var(--space-5);
    background: var(--color-secondary, #9d4edd);
    border-radius: 5px;
    font-size: var(--font-size-14, 14px);
    font-weight: var(--font-weight-black, 900);
    line-height: var(--line-height-21, 21px);
    color: var(--color-text-inverse);
    display: inline-flex;
    align-items: center;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__bottom {
    padding: 0 var(--space-15);
    gap: var(--space-20);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__title {
    font-size: 20px;
    line-height: 21px;
    color: var(--color-secondary-dark, #240046);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__location,
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__detail {
    font-size: var(--font-size-14, 14px);
    line-height: var(--line-height-21, 21px);
    color: var(--color-secondary-dark, #240046);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__verbatim {
    display: none;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__price-cta {
    flex-direction: row;
    background: #e9ecef;
    border-radius: var(--radius-card);
    padding: 0;
    overflow: hidden;
    gap: 0;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__price-block {
    flex: 1;
    padding: var(--space-15);
    background: transparent;
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__price {
    font-size: var(--font-size-20, 20px);
    color: var(--color-secondary-dark, #240046);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__old-price {
    font-size: var(--font-size-14, 14px);
    color: var(--color-secondary-dark, #240046);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__price-detail {
    font-size: var(--font-size-14, 14px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-secondary-dark, #240046);
  }
  .page-home
    .superdeal-bloc-section:first-of-type
    .superdeal-bloc-card
    .card-superdeal__cta {
    flex: 1;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    margin: 0;
    min-height: 44px;
  }

  .page-home .superdeal-bloc-section .superdeal-bloc {
    margin-bottom: 50px;
    margin-left: 0;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Région iPad Mini — même esprit Figma 1480:12549 */
  .page-home .region-section .region-featured {
    border-radius: 0;
  }
  .page-home .region-section .region-featured__layout {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    padding: var(--space-20);
    gap: var(--space-50);
  }
  .page-home .region-section .region-featured__info {
    position: relative;
    left: auto;
    bottom: auto;
    right: auto;
    top: auto;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: none;
  }
  .page-home .region-section .region-featured__region-name {
    font-size: var(--font-size-34, 34px);
    line-height: var(--line-height-36, 36px);
  }
  .page-home .region-section .region-featured__cta-region {
    width: auto;
    max-width: max-content;
    height: 65px;
    min-height: 65px;
  }
  .page-home .region-section .region-featured__card {
    position: relative;
    right: auto;
    bottom: auto;
    top: auto;
    left: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 353px;
    width: 100%;
    height: auto;
  }
  .page-home .region-section .region-featured__card .card-region {
    width: 100%;
    height: 350px;
  }
  .page-home .region-section .region-featured__card .card-region__content {
    top: 0;
    inset: 0;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 70px var(--space-15) var(--space-15);
  }
  .page-home .region-section .pagination-carousel,
  .page-home .region-section .pagination-carousel.swiper-pagination-lock {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-15);
    width: auto;
    max-width: none;
    margin-top: var(--space-15);
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Mobile / iPad Mini : dots only, pas de flèches */
  .page-home .region-section .pagination-carousel__prev,
  .page-home .region-section .pagination-carousel__next {
    display: none !important;
  }

  .page-home .region-section > .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  .page-home .region-section .region-swiper-wrap.container {
    padding-left: 0;
    padding-right: 0;
  }
  .page-home .top-campings-section .container,
  .page-home .section.top-campings-section .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  .page-home .why-toocamp-section > .container,
  .page-home #why-toocamp .container {
    padding: 0;
    box-sizing: border-box;
  }
  .page-home .why-toocamp-section__panel {
    padding: var(--space-30) var(--space-20);
  }

  .page-home .home-netlinking-section > .container {
    padding-left: var(--space-20, 20px);
    padding-right: var(--space-20, 20px);
  }
}

/* iPad Air / iPad Pro (835px–1366px) – esprit desktop (layout comme desktop) */
@media (min-width: 835px) and (max-width: 1366px) {
  /* Figma 157:9047 – même colonne 1200px que le desktop */
  .page-home main :is(
    .find-camping-section,
    .guide-top-moment-section,
    .home-piaf-section,
    .region-section,
    .home-superdeals-section,
    .home-style-camping-section,
    .articles-section,
    .home-videos-section,
    .home-netlinking-section,
    .why-toocamp-section,
    .home-faq-section
  ) > .container,
  .page-home main .region-section .region-swiper-wrap.container,
  .page-home section.section-destinations > .container,
  .page-home .guide-top-moment-section .container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .page-home section.section-destinations,
  .page-home .home-piaf-section {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/*
 * Desktop ≥992px — Figma 1417:16752 (card edito region)
 * Placé ici (après home.v3.css dans le bundle) pour gagner la cascade.
 * Texte bas-gauche + CTA shrink-to-text + carte 350×500 bas-droite.
 */
@media (min-width: 992px) {
  .page-home .region-section .region-swiper .swiper-slide,
  .page-home .region-section .region-featured,
  .page-home .region-section .region-featured__layout {
    min-height: 670px !important;
    height: 670px !important;
  }

  .page-home .region-section .region-featured {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .page-home .region-section .region-featured__layout {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 30px !important;
    box-sizing: border-box !important;
  }

  .page-home .region-section .region-featured__info {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 500px !important;
    max-width: calc(100% - 350px - 70px) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    order: 0 !important;
    z-index: 2 !important;
  }

  .page-home .region-section .region-featured__region-name {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 62px !important;
    line-height: 63px !important;
    font-weight: 900 !important;
    color: #fff !important;
    text-align: left !important;
  }

  .page-home .region-section .region-featured__desc {
    width: 100% !important;
    max-height: 80px !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 27px !important;
    color: #fff !important;
    text-align: left !important;
  }

  .page-home .region-section .region-featured__cta-region {
    display: inline-flex !important;
    width: max-content !important;
    max-width: max-content !important;
    min-width: 0 !important;
    height: 65px !important;
    min-height: 65px !important;
    padding: 5px 15px !important;
    margin: 0 !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .page-home .region-section .region-featured__card {
    position: absolute !important;
    right: 30px !important;
    bottom: 30px !important;
    top: auto !important;
    left: auto !important;
    width: 350px !important;
    height: 500px !important;
    max-width: 350px !important;
    margin: 0 !important;
    flex: none !important;
    order: 0 !important;
    z-index: 3 !important;
    transform: none !important;
  }

  .page-home .region-section .region-featured__card .card-region {
    width: 350px !important;
    height: 500px !important;
    border-radius: 20px !important;
  }
}


/* /v3-css/pages/guide.v3.css */
/**
 * Guide Page Styles
 * From Figma: node-id=120-4044 (desktop), node-id=236-5579 (mobile)
 */

/* Étape 0 : main 900px centré ; pas de marge/padding latéraux sur le contenu (sections alignées pleine largeur utile) */
.page-guide main {
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.page-guide main > section {
  margin-left: 0;
  margin-right: 0;
}

.page-guide section > .container {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

/* Mobile : gouttière 20px pour ne pas coller au bord de l’écran (desktop inchangé) */
@media (max-width: 767px) {
  .page-guide main {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Section « Tous les campings à Saint-Malo » : conteneur sans padding horizontal */
.page-guide .all-campings-guide-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* ===== Guide Head ===== */
.guide-head {
  padding: var(--space-50) 0;
}

.guide-head__eyebrow {
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
  line-height: var(--line-height-27);
  margin: 0 0 var(--space-10);
}

.guide-head__titles {
  text-align: center;
  margin-bottom: var(--space-15);
  overflow: visible;
}

/* Pages SEO : leur gabarit pose `page-comparateur` sur le body pour
   reprendre les styles du comparateur, et la regle
   `.page-comparateur .guide-head__titles { margin-bottom: 0 }` plus bas
   collait alors le paragraphe d'intro au sous-titre. On degage le bloc,
   avec un selecteur plus specifique pour rester independant de l'ordre. */
body.seo .guide-head__titles {
  margin-bottom: var(--space-15);
}

.guide-head__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-black);
  line-height: 1.35;
  padding-bottom: 0.15em;
  overflow: visible;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-5);
}

.guide-head__title--with-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: var(--space-10);
  row-gap: var(--space-5);
  background: none;
  -webkit-text-fill-color: unset;
  color: inherit;
}

.guide-head__title-destination {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-black);
  line-height: 1.35;
  padding-bottom: 0.15em;
  overflow: visible;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.guide-head__title-sep {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
  -webkit-text-fill-color: currentColor;
  background: none;
  padding: 0 var(--space-5);
}

.guide-head__title-count {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
  -webkit-text-fill-color: currentColor;
  background: none;
}

/* Comparateur — espacements verticaux homogènes entre blocs haut de page (Figma) */
.page-comparateur .guide-head {
  padding: var(--space-15) 0;
}

/* Mobile / tablette : titre + compteur, puis Trier en dessous (comme avant) */
.page-comparateur .guide-head__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-15);
  margin-bottom: var(--space-15);
  width: 100%;
  box-sizing: border-box;
}

.page-comparateur .guide-head__titles {
  margin-bottom: 0;
  width: 100%;
  text-align: center;
}

.page-comparateur .guide-head__title {
  margin-bottom: 0;
}

.page-comparateur .guide-head__title--with-count {
  column-gap: var(--space-15);
  justify-content: center;
  flex-wrap: wrap;
}

/* Desktop : destination + nb locations + Trier sur la même ligne, centrés */
@media (min-width: 992px) {
  .page-comparateur .guide-head__headline {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    column-gap: var(--space-15);
    row-gap: var(--space-10);
  }

  .page-comparateur .guide-head__titles {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    text-align: left;
  }

  .page-comparateur .guide-head__title--with-count {
    justify-content: flex-start;
    flex-wrap: nowrap;
    min-width: 0;
    width: auto;
  }
}

.guide-head__subtitle {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.guide-head__text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  color: var(--color-text-body);
  line-height: var(--line-height-27);
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--space-30);
}

/* Ancre « > Lire + » en fin d'accroche : renvoie au bloc Information. */
.guide-head__text a.court {
  font-weight: var(--font-weight-bold, 700);
}

/* ===== Guide Head — marque / label (seo.v2/index.ejs) =====
   Logo + titre + intro. Reprend la composition du site actuel
   (`.intoduction.marque` de seo/inline.css + reponsive.css) : en mobile le
   logo est centré au-dessus du titre (max 300px), en desktop il passe à
   gauche et le texte s'aligne à gauche. */
.guide-head--marque .guide-head__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
  max-width: 1024px;
  margin: 0 auto;
}

.guide-head--marque .guide-head__logo {
  flex: 0 0 auto;
  width: 100%;
  max-width: 300px;
  /* la <img> reste dans son cadre, quel que soit le format du logo */
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-head--marque .guide-head__logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  border-radius: var(--radius-image, 12px);
}

.guide-head--marque .guide-head__brand-body {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* Le <p> intro garde ses 900px max mais se cale sur la largeur du bloc texte. */
.guide-head--marque .guide-head__text {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .guide-head--marque .guide-head__brand {
    flex-direction: row;
    align-items: center;
    gap: var(--space-30);
    text-align: left;
  }

  .guide-head--marque .guide-head__logo {
    flex: 0 0 300px;
    max-width: 300px;
  }

  .guide-head--marque .guide-head__titles,
  .guide-head--marque .guide-head__text {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Boutons intro (Filtrer / voir sur la carte) — desktop uniquement, Figma guide camping */
.guide-head__actions {
  display: none;
}

@media (min-width: 992px) {
  .guide-head--has-intro-actions .guide-head__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-15);
    margin: 0 auto var(--space-10);
    max-width: 900px;
  }

  .guide-head--has-intro-actions .guide-head__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    padding: var(--space-10) var(--space-20);
    min-height: 45px;
    box-sizing: border-box;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-regular);
    line-height: 1.2;
    color: var(--color-text);
    text-decoration: none;
  }

  .guide-head--has-intro-actions .guide-head__action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    color: var(--color-text);
  }

  .guide-head--has-intro-actions .guide-head__action-icon svg {
    display: block;
    width: 25px;
    height: 25px;
  }
}

/* Comparateur : Trier toujours visible ; même ligne que le titre seulement en desktop */
.page-comparateur .guide-head--has-intro-actions .guide-head__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-15);
  margin: 0;
  max-width: 900px;
  flex: 0 0 auto;
}

@media (min-width: 992px) {
  .page-comparateur .guide-head--has-intro-actions .guide-head__actions {
    flex-wrap: nowrap;
    max-width: none;
  }
}

.page-comparateur .guide-head--has-intro-actions .guide-head__action-btn {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: var(--header-filter-width, 113px);
  height: var(--header-filter-height, 45px);
  min-height: var(--header-filter-height, 45px);
  padding: 5px 15px;
  background: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 100px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-text);
  text-decoration: none;
  flex: none;
}

.page-comparateur .guide-head--has-intro-actions .guide-head__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-text);
}

.page-comparateur .guide-head--has-intro-actions .guide-head__action-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Comparateur — Trier : hover bordure grise visible (Figma), après styles de base */
.page-guide.page-comparateur .guide-head--has-intro-actions .guide-head__action-btn {
  cursor: pointer;
  transition:
    background 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

@media (hover: hover) {
  .page-guide.page-comparateur .guide-head--has-intro-actions .guide-head__action-btn:hover,
  .page-guide.page-comparateur .guide-head--has-intro-actions .guide-head__action-btn:focus-visible {
    background: var(--color-border, #dee2e6);
    background-color: var(--color-border, #dee2e6);
    border: 1px solid var(--color-border-strong, #ced4da);
    border-color: var(--color-border-strong, #ced4da);
    color: var(--color-text, #240046);
    opacity: 1;
  }

  .page-guide.page-comparateur .guide-head--has-intro-actions .guide-head__action-btn:hover .guide-head__action-icon,
  .page-guide.page-comparateur .guide-head--has-intro-actions .guide-head__action-btn:focus-visible .guide-head__action-icon {
    color: var(--color-text, #240046);
  }
}

.page-comparateur .guide-head__text {
  font-size: var(--font-size-14);
  line-height: 1.5;
  color: var(--color-text-body);
  margin-bottom: var(--space-20);
}

/* Comparateur — encart critères de sélection (Figma 312:18000) */
.page-comparateur .guide-head__criteria-bar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  max-width: 900px;
  margin: 0 auto var(--space-15);
  padding: var(--space-15);
  border-radius: var(--radius-card, 20px);
  background: var(--surface-grayscale-grayscale-100, #f8f9fa);
  box-sizing: border-box;
}

.page-comparateur .guide-head__criteria-bar.is-hidden,
html.comparateur-criteria-bar-dismissed .page-comparateur .guide-head__criteria-bar {
  /* Retire l’espace pour remonter la liste de résultats */
  display: none;
}

.page-comparateur .guide-head__criteria-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.page-comparateur .guide-head__criteria-close-x {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

.page-comparateur .guide-head__criteria-close-x::before,
.page-comparateur .guide-head__criteria-close-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--color-text-body, #343a40);
  border-radius: 1px;
}

.page-comparateur .guide-head__criteria-close-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.page-comparateur .guide-head__criteria-close-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.page-comparateur .guide-head__criteria-close:hover .guide-head__criteria-close-x::before,
.page-comparateur .guide-head__criteria-close:hover .guide-head__criteria-close-x::after,
.page-comparateur .guide-head__criteria-close:focus-visible .guide-head__criteria-close-x::before,
.page-comparateur .guide-head__criteria-close:focus-visible .guide-head__criteria-close-x::after {
  background: var(--color-secondary);
}

.page-comparateur .guide-head__criteria-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-text-body);
  text-align: left;
}

.page-comparateur .guide-head__criteria-body {
  display: inline;
}

.page-comparateur .guide-head__criteria-link {
  display: inline;
  margin: 0 0 0 0.5em;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--font-weight-bold);
  line-height: inherit;
  color: var(--color-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.page-comparateur .guide-head__criteria-link:hover {
  color: var(--color-primary);
}

.page-comparateur .comparateur-results .section {
  padding-top: 0;
  padding-bottom: var(--space-15);
}

/* Modale critères de tri (réutilise #sort-criteria legacy) */
.page-comparateur #sort-criteria {
  display: none;
  position: fixed;
  z-index: 10050;
  max-width: min(320px, calc(100vw - 32px));
  padding: var(--space-15);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-strong);
}

.page-comparateur #sort-criteria.opened {
  display: block;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(320px, calc(100vw - 32px));
  height: auto;
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  .page-comparateur #sort-criteria.opened {
    top: var(--sort-criteria-top, 50%);
    transform: translateX(-50%);
  }
}

.page-comparateur #sort-criteria .legal-container {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  color: var(--color-text-body);
}

.page-comparateur #sort-criteria #close-criteria-modal-button {
  margin-top: var(--space-10);
  width: 100%;
  min-height: 40px;
  padding: var(--space-10) var(--space-15);
  border: 0;
  border-radius: var(--radius-cta);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.page-comparateur #sort-modal-triangle,
.page-comparateur #sort-criteria.opened::after {
  display: none;
}

.page-comparateur #sort-criteria .sort-criteria-modal-infos {
  display: block;
}

@media (min-width: 992px) {
  .page-comparateur #sort-criteria,
  .page-comparateur #sort-criteria.opened {
    width: min(480px, calc(100vw - 80px));
    max-width: 480px;
    padding: var(--space-25) var(--space-30);
  }

  .page-comparateur #sort-criteria .legal-container {
    font-size: var(--font-size-14);
    line-height: var(--line-height-21);
    text-align: center;
  }

  .page-comparateur #sort-criteria .sort-criteria-modal-infos strong,
  .page-comparateur #sort-criteria #criteria-info-p strong {
    font-size: var(--font-size-14);
    line-height: var(--line-height-21);
  }

  .page-comparateur #sort-criteria #criteria-info-p {
    margin: var(--space-10) 0 0;
  }

  .page-comparateur #sort-criteria #close-criteria-modal-button {
    margin-top: var(--space-15);
    min-height: 45px;
    font-size: var(--font-size-18);
    line-height: var(--line-height-27);
    border-radius: var(--radius-cta);
  }
}

/* Carte comparateur (overlay, même logique que search-results) */
.page-comparateur {
  --comparateur-map-overlay-top: var(--header-height-desktop, 75px);
}

.page-comparateur .map-wrapper {
  position: fixed;
  top: var(--comparateur-map-overlay-top);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: none;
  flex-flow: column nowrap;
  background: var(--color-surface);
  overflow: hidden;
}

.page-comparateur.map-opened #main > .header {
  position: fixed;
  z-index: 210;
}

.page-comparateur .map-wrapper.open {
  display: flex;
}

.page-comparateur .map-wrapper #map {
  flex: 1;
  min-height: 0;
  position: relative;
}

.page-comparateur .map-wrapper #map .maplibregl-map,
.page-comparateur .map-wrapper #map .maplibregl-canvas-container {
  width: 100%;
  height: 100%;
}

.page-comparateur .search-map-marker {
  width: 0;
  height: 0;
  cursor: pointer;
  position: relative;
  line-height: 0;
}

.page-comparateur .search-map-marker__body {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* Sans badge prix: evite collapse avec img max-width 100% */
  width: 40px;
  min-width: 40px;
}

.page-comparateur .search-map-marker__icon {
  display: block;
  width: 40px !important;
  height: 40px !important;
  max-width: none !important;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

.page-comparateur .search-map-marker__price {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 5px;
  white-space: nowrap;
  font-family: Arial, sans-serif;
  background: var(--color-primary, #ff7500);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.page-comparateur .map-wrapper #card-map-main {
  position: absolute;
  z-index: 220;
  pointer-events: auto;
}

.page-comparateur .comparateur-main.map-opened {
  visibility: hidden;
  pointer-events: none;
}

.page-comparateur .map-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 56px;
  flex-shrink: 0;
  box-sizing: border-box;
  gap: 12px;
}

.page-comparateur .map-carte-mode {
  display: flex;
  flex-shrink: 0;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  z-index: 2;
}

.page-comparateur .map-carte-mode__btn {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  color: var(--color-text-muted, #666);
}

.page-comparateur .map-carte-mode__btn.is-active {
  background: var(--color-primary, #ff7500);
  color: #fff;
}

.page-comparateur .map-carte-mode {
  position: relative;
}

.page-comparateur .map-carte-mode__btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.page-comparateur .map-carte-mode__hourglass {
  display: none;
}

.page-comparateur .map-carte-mode--loading .map-carte-mode__hourglass {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}

.page-comparateur .search-map-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-secondary, #7b2cbf);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  border: 2px solid #fff;
  transition: transform 0.15s ease;
}

.page-comparateur .search-map-cluster:hover {
  transform: scale(1.08);
}

.page-comparateur .search-map-cluster--sm {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.page-comparateur .search-map-cluster--md {
  width: 42px;
  height: 42px;
  font-size: 13px;
}

.page-comparateur .search-map-cluster--lg {
  width: 48px;
  height: 48px;
  font-size: 14px;
}

.page-comparateur .search-map-marker--nodispo .search-map-marker__icon {
  opacity: 0.95;
}

.page-comparateur .map-header .map-desktop {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0;
  width: 100%;
}

.page-comparateur .map-header .map-desktop > p {
  margin: 0;
  text-align: center;
  font-weight: 700;
}

.page-comparateur .map-header .map-desktop .search-map-search-input {
  font-weight: bolder;
  font-size: 15px;
}

.page-comparateur .map-container-button {
  position: absolute;
  right: var(--space-15);
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary, #ff6d00);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  box-shadow: 0 2px 8px rgba(255, 109, 0, 0.35);
}

.page-comparateur .map-container-button__icon {
  color: #fff;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.page-comparateur .map-wrapper.open .map-header {
  position: relative;
  z-index: 205;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border-light, #e9ecef);
}

/* Marqueurs carte : pastilles prix (comme l’ancienne version), sans épingle */
.page-comparateur .marker-label {
  background-color: var(--color-primary, #ff7500) !important;
  color: #fff !important;
  border-radius: 5px;
  padding: 5px 8px;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.page-comparateur .card-map-main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: absolute;
  top: 42%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(420px, 95%);
  max-width: 440px;
  min-height: 118px;
  height: auto;
  padding: 5px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  z-index: 210;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s linear, visibility 0.2s linear;
  overflow: hidden;
  pointer-events: auto;
}

.page-comparateur .card-map-main.is-at-marker {
  transform: none;
}

.page-comparateur .card-map-main.show {
  opacity: 1;
  visibility: visible;
}

.page-comparateur .card-map-main .card-map-media {
  position: relative;
  width: 35%;
  flex-shrink: 0;
  min-height: 0;
}

.page-comparateur .card-map-main .card-map-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.page-comparateur .card-map-main .card-map-header {
  flex: 1;
  min-width: 0;
  padding-left: 8px;
  display: flex;
  flex-direction: column;
}

.page-comparateur .card-map-main .title-cross-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.page-comparateur .card-map-main .map-header-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.page-comparateur .card-map-main .close-popup-cross {
  flex-shrink: 0;
  cursor: pointer;
  line-height: 1;
  opacity: 0.55;
}

.page-comparateur .card-map-main .close-popup-cross:hover {
  opacity: 1;
}

.page-comparateur .card-map-main .map-header-infos {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
}

.page-comparateur .card-map-main .map-header-stars-description {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--color-text-muted, #666);
}

.page-comparateur .card-map-main .map-header-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
  min-height: 14px;
}

.page-comparateur .card-map-main .map-header-stars:empty {
  display: none;
  margin: 0;
  min-height: 0;
}

.page-comparateur .card-map-main .map-header-star {
  color: #ffc107;
  font-size: 14px;
  line-height: 1;
}

.page-comparateur .card-map-main .map-header-description {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #2e2e2e;
}

.page-comparateur .card-map-main .map-header-capacity {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text-muted, #666);
}

.page-comparateur .card-map-main .map-header-capacity:empty {
  display: none;
}

.page-comparateur .card-map-main .map-header-voir-link {
  display: inline-block;
  margin-top: 8px;
  text-decoration: none;
}

.page-comparateur .card-map-main .map-middle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 6px 22px;
  border: 0;
  border-radius: 100px;
  background: var(--color-primary, #ff7500);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-sizing: border-box;
}

.page-comparateur .card-map-main .map-header-price-promo {
  flex-shrink: 0;
  text-align: right;
  align-self: flex-start;
}

.page-comparateur .card-map-main .map-header-price-promo .price-item {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text, #1a1a1a);
}

.page-comparateur .card-map-main .map-header-price-promo .duration-item {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-text-muted, #666);
}

.page-comparateur .card-map-main .map-header-price-promo .promo-item {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary, #ff7500);
}

/* ===== Table of Contents — Figma nav/table of contents (node 120:4075) ===== */
.table-of-contents {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-card);
  padding: var(--space-15);
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}

.table-of-contents__title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--text-secondary-secondary-100, #240046);
  margin: 0;
}

.table-of-contents__list {
  list-style: disc;
  margin: 0;
  padding-left: 21px;
}

.table-of-contents__item::marker {
  color: var(--color-primary);
}

.table-of-contents__item {
  margin-bottom: var(--space-5);
}

.table-of-contents__item:last-child {
  margin-bottom: 0;
}

.table-of-contents__link {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  font-weight: var(--font-weight-regular);
  color: var(--color-primary);
  text-decoration: none;
}

.table-of-contents__link:hover {
  text-decoration: underline;
}

.table-of-contents__chatbot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: var(--space-10);
  background: var(--color-surface-muted);
  border-radius: var(--radius-card);
  width: 100%;
  box-sizing: border-box;
}

.table-of-contents__chatbot-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  line-height: 0;
}

.table-of-contents__chatbot-icon img {
  display: block;
  width: 25px;
  height: 25px;
}

.table-of-contents__chatbot-text,
.table-of-contents__chatbot-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  font-weight: var(--font-weight-regular);
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.table-of-contents__chatbot-input {
  border: 0;
  padding: 0;
  outline: none;
  color: var(--color-primary);
}

.table-of-contents__chatbot-input::placeholder {
  -webkit-text-fill-color: transparent;
  color: var(--color-primary);
  opacity: 1;
}

.table-of-contents__chatbot-go {
  position: relative;
  top: 3px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-cta);
  cursor: pointer;
  color: var(--color-surface);
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  transition: opacity 0.15s ease;
}

.table-of-contents__chatbot-go:hover {
  opacity: 0.85;
}

.table-of-contents__chatbot-go svg {
  display: block;
}

/* ===== Guide Section ===== */
.guide-section__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  margin-bottom: var(--space-15);
}

.guide-section__text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  color: var(--color-text-body);
  line-height: var(--line-height-27);
  margin-bottom: var(--space-20);
}

/* guide.html : texte liste / paragraphes — aligné search-form (text/secondary/secondary-100) */
.page-guide .guide-head__eyebrow,
.page-guide .guide-head__subtitle,
.page-guide .guide-head__text {
  color: var(--text-secondary-secondary-100, #240046);
}

.page-guide .guide-head--has-intro-actions .guide-head__action-btn,
.page-guide .guide-head--has-intro-actions .guide-head__action-icon {
  color: var(--text-secondary-secondary-100, #240046);
}

.page-guide .guide-section__title,
.page-guide .guide-section__text {
  color: var(--text-secondary-secondary-100, #240046);
}

.page-guide .card-camping-horizontal__title,
.page-guide .card-camping-horizontal__tag,
.page-guide .card-camping-horizontal__price,
.page-guide .guide-camping-ad__link,
.page-guide .card-camping__title,
.page-guide .card-camping__location,
.page-guide .card-camping__desc,
.page-guide .card-camping__tag,
.page-guide .card-camping-dispo__title,
.page-guide .card-camping-dispo__spec,
.page-guide .card-camping-dispo__dates,
.page-guide .card-camping-dispo__details {
  color: var(--text-secondary-secondary-100, #240046);
}

/* Paragraphe descriptif — grayscale-700 ; région alignée sur la ligne hébergement (secondary-100) */
.page-guide .card-camping-horizontal__desc {
  color: var(--text-grayscale-grayscale-700, #495057);
}

.page-guide .card-camping-horizontal__location {
  color: var(--text-secondary-secondary-100, #240046);
}

.page-guide .card-camping-horizontal__price strong {
  color: var(--color-secondary-light);
}

.page-guide .guide-table__row {
  color: var(--text-secondary-secondary-100, #240046);
}

.page-guide .guide-graph__label {
  color: var(--text-secondary-secondary-100, #240046);
}

.page-guide .guide-table-mention {
  color: var(--text-secondary-secondary-100, #240046);
}

.page-guide .pagination__number:not(.pagination__number--active),
.page-guide .pagination__ellipsis {
  color: var(--text-secondary-secondary-100, #240046);
}

.guide-section__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-15);
}

/* Descriptif complet — Figma 253:16421 (sous les offres : Lire la suite + Déposez un avis + nb avis) */
.page-camping-detail .camping-detail-description .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
}

.page-camping-detail .camping-detail-description .guide-section__text {
  margin-bottom: 0;
}

/* Descriptif : un titre de paragraphe (h3) puis le paragraphe en dessous */
.page-camping-detail .camping-detail-description__full h3 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
  margin: var(--space-20) 0 var(--space-5);
}

.page-camping-detail .camping-detail-description__full h3:first-child {
  margin-top: 0;
}

.page-camping-detail .camping-detail-description__full p {
  margin: 0 0 var(--space-10);
}

.page-camping-detail .camping-detail-description__full p:last-child {
  margin-bottom: 0;
}

.page-camping-detail .camping-detail-description__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
  width: 100%;
}

/* Descriptif replié : le même HTML mis en forme (titres h3 compris), tronqué
   en hauteur avec un fondu vers le fond de page — le texte brut coupé à
   N caractères faisait disparaître les titres de paragraphe. 175px ≈ un
   titre + 5 lignes de 27px. */
.page-camping-detail .camping-detail-description__full.is-collapsed {
  position: relative;
  max-height: 175px;
  overflow: hidden;
}

.page-camping-detail .camping-detail-description__full.is-collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-surface, #fff));
  pointer-events: none;
}

.camping-detail-description__highlight {
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary-light);
}

.camping-detail-description__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-15);
  width: 100%;
  max-width: 100%;
}

.camping-detail-description__avis-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.page-camping-detail .camping-detail-description__avis-meta:hover,
.page-camping-detail .camping-detail-description__avis-meta:focus-visible {
  opacity: 0.85;
}

.camping-detail-description__avis-count {
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: var(--font-weight-bold);
}

.camping-detail-description__avis-score {
  color: var(--color-primary, #ff6d00);
  font-weight: var(--font-weight-bold);
}

.camping-detail-description__btn {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  padding: var(--space-5) var(--space-15);
  border-radius: var(--radius-cta);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Les deux boutons (Lire la suite / Réduire) coexistent dans le DOM, l'un
   des deux porte `hidden` : sans ce !important le display de la classe
   l'emporterait sur celui de l'attribut. */
.camping-detail-description__btn[hidden] {
  display: none !important;
}

.camping-detail-description__btn--filled {
  border: 1px solid var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-text-inverse);
}

.page-camping-detail .camping-detail-description__btn--filled:hover,
.page-camping-detail .camping-detail-description__btn--filled:focus-visible {
  background: var(--color-secondary, #240046);
  border-color: var(--color-secondary, #240046);
  color: var(--color-text-inverse);
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}

.camping-detail-description__btn--outline {
  background: var(--color-secondary, #240046);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-secondary, #240046);
}

.page-camping-detail .camping-detail-description__btn--outline:hover,
.page-camping-detail .camping-detail-description__btn--outline:focus-visible {
  background: var(--color-secondary, #240046);
  border-color: var(--color-secondary, #240046);
  color: var(--color-text-inverse);
  opacity: 0.92;
  -webkit-text-fill-color: currentColor;
}


/* ===== Card Camping Horizontal ===== */
.card-camping-horizontal {
  position: relative; /* ancre de la pastille « Pub » */
  display: flex;
  gap: var(--space-20);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-15);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-20);
  box-sizing: border-box;
}

/* Forfait « top » : camping sponsorisé forcé en tête du listing SEO — badge
   « publicité » identique à celui du comparateur
   (.comparateur-offer__badge-publicite) : icône + mot complet traduit, fond
   sombre, en haut à gauche de la photo (guide-campings-list.ejs). */
.card-camping-horizontal__media-stack {
  position: relative;
}

.card-camping-horizontal__pub {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  background: rgba(36, 0, 70, 0.8);
  pointer-events: none;
}

.card-camping-horizontal__pub-icon {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.card-camping-horizontal__pub-text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: #fff;
  white-space: nowrap;
}

/* Marqueur « PUB » des espaces réellement publicitaires : cartes pub du
   carrousel « Top campings du moment » (guide-top-campings.ejs) et ads du
   listing SEO (app-search/views/ads). Pastille sombre, en haut à droite du
   visuel. À ne pas confondre avec .card-camping-horizontal__pub (camping
   sponsorisé par forfait top, design « Promo »). */
.pub-marker {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-cta, 100px);
  background: rgba(36, 0, 70, 0.85);
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* Cartes pub du carrousel « Top campings du moment » uniquement : fond noir
   à 50 % (les ads du listing gardent le violet sombre). */
.guide-top-push-card .pub-marker {
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.5);
}

/* Ads du listing SEO (.sda-main) : le marqueur « Pub » (.pub-marker, posé
   dans ad-media.ejs) est ancré sur la carte, avec un décalage plus grand que
   la pastille standard pour tomber dans le visuel, en retrait dans la carte.
   Les libellés « Pub » de l'en-tête et du pied du gabarit legacy sont masqués. */
.sda-main .card-sponso {
  position: relative;
}

.sda-main .card-sponso .card-medias {
  position: static; /* le conteneur positionné est la carte */
}

.sda-main .card-sponso .pub-marker {
  top: 25px;
  right: 25px;
}

.sda-main .card-sponso .tag-text {
  display: none !important;
}

/* Guide liste : carte ~900px max, fond blanc — média min 258px, étiré avec la colonne droite */
.page-guide
  .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) {
  align-items: stretch;
  max-width: 900px;
  min-height: 0;
  width: 100%;
  background: var(--color-surface);
  border-radius: var(--card, var(--radius-card));
  border: 1px solid var(--color-border);
  box-shadow: none;
}

/* Guide liste : carte avec bandeau hébergement (desktop) — Figma ~900×386 ; fond carte blanc, gris uniquement sur .guide-hosting-strip__card */
@media (min-width: 768px) {
  .page-guide .card-camping-horizontal--hosting-strip {
    max-width: 900px;
    min-height: 386px;
    width: 100%;
    background: var(--color-surface);
    border-radius: var(--card, var(--radius-card));
    border: 1px solid var(--color-border);
    box-shadow: none;
    box-sizing: border-box;
  }

  /* Galerie liste : hauteur ≥ 258px, alignée haut/bas avec le texte (colonne droite) */
  .page-guide
    .card-camping-horizontal--hosting-strip
    .card-camping-horizontal__top-row {
    align-items: stretch;
  }

  .page-guide .card-camping-horizontal__media-stack {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 258px;
  }

  .page-guide .guide-camping-gallery {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 258px;
    height: 100%;
  }

  .page-guide .guide-camping-gallery__viewport {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 258px;
    height: 100%;
  }

  .page-guide .guide-camping-gallery__swiper {
    flex: 1 1 auto;
    width: 100%;
    min-height: 258px;
    height: 100%;
  }

  .page-guide .guide-camping-gallery__swiper .swiper-wrapper,
  .page-guide .guide-camping-gallery__swiper .swiper-slide {
    height: 100%;
  }

  .page-guide
    .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip)
    .card-camping-horizontal__image-wrap {
    flex: 1 1 auto;
    min-height: 258px;
    height: auto;
  }

  /* Sans bandeau hébergement : titre aligné en haut avec la photo, bouton en bas aligné avec le bas de la galerie */
  .page-guide
    .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip)
    .card-camping-horizontal__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .page-guide
    .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip)
    .card-camping-horizontal__title {
    margin-top: 0;
  }

  .page-guide
    .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip)
    .card-camping-horizontal__body
    > a.btn.btn--primary.btn--md {
    margin-top: auto;
    align-self: flex-start;
  }

  .page-guide
    .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip)
    .card-camping-horizontal__body
    > .card-camping-horizontal__dispo-wrap {
    margin-top: auto;
    align-self: stretch;
  }
}

.card-camping-horizontal__media-stack {
  flex-shrink: 0;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.card-camping-horizontal__image-wrap {
  position: relative;
  flex-shrink: 0;
  width: 350px;
  height: 200px;
  border-radius: var(--radius-image);
  overflow: hidden;
}

.card-camping-horizontal__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-camping-horizontal__rating {
  position: absolute;
  top: var(--space-10);
  left: var(--space-10);
  padding: 2px var(--space-10);
  background: var(--color-overlay-dark);
  color: var(--color-text-inverse);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: 700;
  border-radius: var(--radius-label);
}

.card-camping-horizontal__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.card-camping-horizontal__play svg {
  width: 45px;
  height: 45px;
  filter: drop-shadow(0 0 15px rgba(173, 181, 189, 0.85));
}

/* Lecteur galerie guide — Figma card/media/image : bouton 45px, picto blanc sur fond secondary-80 */
.guide-camping-gallery__play svg {
  width: 45px;
  height: 45px;
  filter: drop-shadow(0 0 15px rgba(173, 181, 189, 0.85));
}

.card-camping-horizontal__body {
  flex: 1;
  min-width: 0;
}

.card-camping-horizontal__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  /* de l'air avant les etoiles / la localisation, qui collaient au nom */
  margin-bottom: var(--space-10);
}

.card-camping-horizontal__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.card-camping-horizontal__stars {
  display: flex;
  gap: 2px;
}

.card-camping-horizontal__star {
  color: var(--color-primary);
  font-size: 12px;
  line-height: 1;
}

.card-camping-horizontal__location {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  /* interligne explicite : hérité à 27px du legacy, trop aéré quand le
     sous-titre passe sur deux lignes en mobile */
  line-height: var(--line-height-21);
  color: var(--text-secondary-secondary-100, #240046);
  margin: 0;
}

.card-camping-horizontal__desc {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--text-grayscale-grayscale-700, #495057);
  line-height: var(--line-height-21);
  margin-bottom: var(--space-10);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pages SEO en mobile : le descriptif court tient sur 4 lignes au lieu de 2. */
@media (max-width: 767px) {
  body.seo.v3 .card-camping-horizontal__desc {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

.card-camping-horizontal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  /* les options passent au-dessus du descriptif : on les en separe */
  margin-bottom: var(--space-15);
}

/* Ligne d'actions (design corrigé) : « Voir le camping » à GAUCHE en
   rectangle discret, « Lire la suite » à DROITE en lien texte, avec le
   chevron « > » devant chacun (maquette). */
.card-camping-horizontal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-15);
  margin-bottom: var(--space-5);
}

/* Mobile : la ligne d'actions colle au descriptif clampé — un peu d'air. */
@media (max-width: 767px) {
  .card-camping-horizontal__actions {
    margin-top: var(--space-10);
  }
}

/* « Lire la suite » : lien texte nu, poussé à droite. Neutralise le
   positionnement absolu + fondu blanc prévus quand le bouton vivait dans
   la ligne d'options (règles du layout SEO). */
.card-camping-horizontal__actions .card-camping-horizontal__more {
  position: static !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  color: var(--color-text, #240046);
  cursor: pointer;
  white-space: nowrap;
}

.card-camping-horizontal__actions .card-camping-horizontal__more::before {
  content: '> ' !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
}

/* « Voir le camping » : rectangle à petit rayon, largeur au contenu,
   chevron devant le libellé. Orange par défaut (pas de dispo)… */
.card-camping-horizontal__fiche-btn {
  width: fit-content;
  align-self: flex-start;
  padding: var(--space-5) var(--space-15) !important;
  border-radius: var(--radius-label, 5px) !important;
  font-family: var(--font-family-secondary) !important;
  font-size: var(--font-size-18) !important;
  font-weight: var(--font-weight-regular) !important;
  white-space: nowrap;
}

.card-camping-horizontal__fiche-btn::before {
  content: '> ';
}

/* … et gris clair / texte foncé quand la carte porte déjà une offre (le
   CTA principal est alors « Voir l'offre », celui-ci s'efface). */
.card-camping-horizontal__fiche-btn--doux {
  background: var(--color-surface-muted, #e9ecef) !important;
  color: var(--color-text, #240046) !important;
  border: none !important;
}

.card-camping-horizontal__fiche-btn--doux:hover,
.card-camping-horizontal__fiche-btn--doux:focus-visible {
  background: #dee2e6 !important;
  color: var(--color-text, #240046) !important;
}

.card-camping-horizontal__tag {
  display: inline-block;
  padding: 2px var(--space-10);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-label);
  font-family: var(--font-family-secondary);
  font-size: 12px;
  color: var(--color-text);
}

.card-camping-horizontal__price {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text-body);
  margin-bottom: var(--space-15);
}

.card-camping-horizontal__price strong {
  color: var(--color-secondary-light);
}

.card-camping-horizontal__dispo-wrap {
  margin-bottom: var(--space-15);
}

.card-camping-horizontal__seller {
  font-family: var(--font-family-secondary);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--space-5);
}

.guide-camping-list {
  margin-bottom: var(--space-30);
}

.guide-map-cta {
  margin: var(--space-20) 0 var(--space-15);
}

.guide-camping-ad {
  width: 100%;
  margin: var(--space-20) 0;
  border-radius: 20px;
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-border-strong);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-20);
}

.guide-camping-ad__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
}

.guide-camping-ad__img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Bannière image : plus d’encart gris / pointillés ; coins 20px partout (desktop + mobile) */
.guide-camping-ad--has-image {
  background: transparent;
  border: none;
  padding: 0;
  min-height: 0;
  display: block;
  text-align: initial;
  border-radius: 20px;
  overflow: hidden;
}

.guide-camping-ad--has-image .guide-camping-ad__link {
  display: block;
  width: 100%;
  line-height: 0;
  border-radius: 20px;
  overflow: hidden;
}

/* guide-hebergement & guide-camping : même bannière (composant guide-campings-list) — desktop 180px de haut */
:is(.page-guide-hebergement, .page-guide-camping)
  .guide-camping-ad--has-image
  .guide-camping-ad__img {
  width: 100%;
  max-width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 20px;
}

/* idem — mobile 353×70 (ratio 353/70), image mobile via <picture> */
@media (max-width: 767px) {
  :is(.page-guide-hebergement, .page-guide-camping)
    .guide-camping-ad--has-image
    .guide-camping-ad__link {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  :is(.page-guide-hebergement, .page-guide-camping)
    .guide-camping-ad--has-image
    picture {
    display: block;
    width: min(353px, 100%);
    max-width: 100%;
    line-height: 0;
    border-radius: 20px;
    overflow: hidden;
  }

  :is(.page-guide-hebergement, .page-guide-camping)
    .guide-camping-ad--has-image
    .guide-camping-ad__img {
    width: min(353px, 100%);
    height: auto;
    aspect-ratio: 353 / 70;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
  }
}

.guide-camping-gallery {
  position: relative;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--color-surface-muted);
}

.guide-camping-gallery__viewport {
  position: relative;
}

.guide-camping-gallery__swiper {
  width: 100%;
  height: 200px;
}

.guide-camping-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 35px;
  height: 35px;
  border-radius: var(--radius-cta);
  border: none;
  background: rgba(36, 0, 70, 0.8);
  color: var(--color-text-inverse);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.guide-camping-gallery__arrow--prev {
  left: var(--space-15);
  background: rgba(255, 255, 255, 0.4);
  color: var(--color-border-strong, #ced4da);
}

.guide-camping-gallery__arrow--next {
  right: var(--space-15);
}

/* Même logique que pagination-carousel : components.v3.css (.guide-camping-gallery__arrow) */

.guide-camping-gallery__arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  line-height: 0;
}

.guide-camping-gallery__arrow-icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.guide-camping-gallery__slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.guide-camping-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.guide-camping-gallery__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Figma node 394-10590 : nav/pagination — Top campings du moment */
.page-guide.pagination-carousel,
.page-guide .pagination-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-15, 15px);
}

.page-guide .pagination-carousel__prev,
.page-guide .pagination-carousel__next {
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  padding: 5px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* États actif / hover / disabled : components.v3.css (.pagination-carousel__*) */

.page-guide .pagination-carousel__icon,
.page-guide .pagination-carousel__arrow {
  display: block;
  width: 24px;
  height: 24px;
}

.page-guide .pagination-carousel__icon img,
.page-guide .pagination-carousel__arrow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-guide .pagination-carousel__indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.page-guide .pagination-carousel__bullet {
  display: inline-block;
  width: 50px;
  height: 5px;
  border-radius: 100px;
  background: rgba(36, 0, 70, 0.2);
  border: 1px solid rgba(255, 255, 255, 1);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
  box-sizing: border-box;
}

.page-guide .pagination-carousel__bullet--active {
  background: #240046;
  border-color: #240046;
}

.guide-hosting-card {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-15);
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.guide-hosting-card__badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-label);
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  opacity: 0.9;
}

.guide-hosting-card__line {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-21);
}

/* 2e carte liste — barre hébergement Figma (pleine largeur sous galerie + texte) */
.card-camping-horizontal--hosting-strip {
  flex-direction: column;
  align-items: stretch;
}

.card-camping-horizontal--hosting-strip .card-camping-horizontal__top-row {
  display: flex;
  flex-direction: row;
  gap: var(--space-20);
  width: 100%;
  align-items: flex-start;
}

.card-camping-horizontal--hosting-strip .card-camping-horizontal__media-stack {
  width: 300px;
  flex-shrink: 0;
}

.guide-hosting-strip {
  width: 100%;
  margin-top: var(--space-10);
  margin-bottom: 0;
}

.guide-hosting-strip__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: var(--surface-grayscale-grayscale-200, #e9ecef);
  border-radius: var(--card, var(--radius-card));
  overflow: hidden;
  border: 1px solid var(--color-border);
  /* Inset maquette : image et contenu non collés aux bords */
  padding: 12px 0 12px 14px;
  gap: 10px;
  min-height: 0;
}

/* Vignette Figma node 312-17205 (MCP) : 110 × 70 */
.guide-hosting-strip__thumb {
  flex-shrink: 0;
  width: 110px;
  height: 70px;
  align-self: center;
  border-radius: 12px;
  overflow: hidden;
}

.guide-hosting-strip__thumb img {
  width: 110px;
  height: 70px;
  object-fit: cover;
  display: block;
}

.guide-hosting-strip__info {
  flex: 1;
  min-width: 0;
  padding: 4px 8px 4px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.guide-hosting-strip__title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  color: var(--text-secondary-secondary-100, #240046);
}

.guide-hosting-strip__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guide-hosting-strip__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-family-secondary);
  font-size: 11px;
  color: var(--text-secondary-secondary-100, #240046);
}

.guide-hosting-strip__tag-icon {
  flex-shrink: 0;
  color: var(--text-secondary-secondary-100, #240046);
  width: 14px;
  height: 14px;
}

.guide-hosting-strip__sep {
  width: 1px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 58px;
  background: var(--color-border);
  margin: 4px 0;
}

.guide-hosting-strip__pricing {
  flex-shrink: 0;
  padding: 4px 12px 4px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 148px;
}

.guide-hosting-strip__dates {
  margin: 0;
  color: var(--text-grayscale-grayscale-800, #343a40);
  text-align: right;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
}

.guide-hosting-strip__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.guide-hosting-strip__amount {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: 1;
  color: var(--text-secondary-secondary-100, #240046);
}

.guide-hosting-strip__strike {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text-muted);
}

.guide-hosting-strip__discount {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-secondary-light);
  color: var(--color-text-inverse);
  border-radius: var(--radius-label);
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.guide-hosting-strip__nights {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 11px;
  color: var(--text-grayscale-grayscale-700, #495057);
  line-height: 1.2;
}

.guide-hosting-strip__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  align-self: stretch;
  min-height: 70px;
  margin-top: -12px;
  margin-bottom: -12px;
  margin-right: -1px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-decoration: none;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

/* Toute la carte est cliquable (guide-hosting-strip.ejs) : curseur, léger
   assombrissement au survol, bouton orange plus vif, focus clavier visible. */
.guide-hosting-strip__card--clickable {
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.guide-hosting-strip__card--clickable:hover {
  background: var(--surface-grayscale-grayscale-300, #dee2e6);
}

.guide-hosting-strip__card--clickable:hover .guide-hosting-strip__cta {
  background: var(--color-primary-gradient-end, #ff9e00);
}

.guide-hosting-strip__card--clickable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.guide-hosting-strip__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.guide-hosting-strip__cta-arrow-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .card-camping-horizontal--hosting-strip .card-camping-horizontal__top-row {
    flex-direction: column;
  }

  .card-camping-horizontal--hosting-strip
    .card-camping-horizontal__media-stack {
    width: 100%;
  }

  .guide-hosting-strip__card {
    flex-wrap: wrap;
    padding: 12px;
  }

  .guide-hosting-strip__sep {
    display: none;
  }

  .guide-hosting-strip__pricing {
    width: 100%;
    min-width: 0;
    border-top: 1px solid var(--color-border-strong, #ced4da);
    box-sizing: border-box;
    padding: 10px 0 4px;
  }

  .guide-hosting-strip__dates {
    font-weight: var(--font-weight-regular);
    text-align: left;
  }

  .guide-hosting-strip__cta {
    width: 100%;
    min-height: 48px;
    margin: 0;
    border-radius: 12px;
  }
}

/* Figma node 394-10590 : nav/pagination — flèches + indicateurs type dots */
.guide-list-pagination--figma {
  gap: var(--space-15, 15px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-list-pagination--figma .pagination__prev,
.guide-list-pagination--figma .pagination__next {
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  padding: 5px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* États actif / hover / disabled : components.v3.css (.guide-list-pagination--figma .pagination__*) */

.guide-list-pagination__icon {
  display: block;
  width: 24px;
  height: 24px;
}

.guide-list-pagination__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guide-list-pagination--figma .guide-list-pagination__indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.guide-list-pagination--figma .guide-list-pagination__bullet {
  width: 50px;
  height: 5px;
  min-width: 50px;
  padding: 0;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 1);
  background: rgba(36, 0, 70, 0.2);
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.guide-list-pagination--figma .guide-list-pagination__bullet--active,
.guide-list-pagination--figma
  .pagination__number--active.guide-list-pagination__bullet {
  background: #240046;
  border-color: #240046;
}

/* Figma 312-21874 : pilules numérotées 50×30, gap 15 (nav/pagination) */
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__prev,
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__next {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  background: transparent;
  color: var(--color-secondary, #240046);
}

/* Hover / focus : même fond violet pour prev et next, flèche blanche (img SVG) */
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__prev:not(:disabled):hover,
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__next:not(:disabled):hover,
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__prev:not(:disabled):focus-visible,
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__next:not(:disabled):focus-visible {
  background: var(--color-secondary, #240046);
  background-color: var(--color-secondary, #240046);
  color: #ffffff;
  opacity: 1;
}

.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__prev:not(:disabled):hover
  img,
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__next:not(:disabled):hover
  img,
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__prev:not(:disabled):focus-visible
  img,
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__next:not(:disabled):focus-visible
  img {
  filter: brightness(0) invert(1);
}

.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__next:disabled,
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__prev:disabled {
  cursor: not-allowed;
  opacity: 1;
}

/* Figma 312:19704 — flèche disabled visible en gris (pas "invisible") */
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__prev:disabled
  img,
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__next:disabled
  img {
  filter: grayscale(1) opacity(0.55);
}

.guide-list-pagination--figma.guide-list-pagination--number-pills
  .guide-list-pagination__indicators {
  gap: 15px;
}

.guide-list-pagination--figma.guide-list-pagination--number-pills
  .guide-list-pagination__bullet {
  width: 50px;
  height: 30px;
  min-width: 50px;
  min-height: 30px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 100px;
  border: 1px solid #ced4da;
  background: #f8f9fa;
  cursor: pointer;
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: var(--color-secondary);
  overflow: visible;
}

.guide-list-pagination--figma.guide-list-pagination--number-pills
  .guide-list-pagination__bullet-inner {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Figma nav/pagination — node 253:10135 : pilule active fond grayscale-200, bord secondary-100 */
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .guide-list-pagination__bullet--active,
.guide-list-pagination--figma.guide-list-pagination--number-pills
  .pagination__number--active.guide-list-pagination__bullet {
  background: var(--surface-grayscale-grayscale-200, #e9ecef);
  border-color: var(--text-secondary-secondary-100, #240046);
  color: var(--text-secondary-secondary-100, #240046);
}

.guide-list-pagination-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin-left: 0;
  margin-right: 0;
  margin-top: var(--space-20);
  margin-bottom: var(--space-30);
  padding: 0;
  box-sizing: border-box;
}

.guide-list-pagination-wrap .guide-list-pagination--figma {
  max-width: 355px;
  width: 100%;
}

.comparateur-pagination-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin: var(--space-20) auto var(--space-30);
  padding: 0;
  box-sizing: border-box;
}

.comparateur-pagination-wrap .pagination.guide-list-pagination--figma {
  width: 100%;
  max-width: 900px;
}

/* Base (sans --figma) : conservé pour compat — états dans components.v3.css */

.guide-list-pagination .pagination__number {
  font-family: inherit;
  cursor: pointer;
}

.guide-graph-footnote {
  font-size: var(--font-size-14);
  color: var(--color-text-muted);
}

/* Conteneur dédié section Top campings — Figma 394-10602 : 900px de largeur utile pour 3 cartes 286.66px + gap 20px */
.page-guide .top-camping-container-guide,
.page-home .top-camping-container-guide {
  width: 900px;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.guide-top-moment-section__title {
  text-align: left;
  width: 100%;
}

.guide-top-moment-swiper-wrap--desktop {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.guide-top-moment-swiper-wrap--mobile {
  display: none;
}

.guide-top-moment-swiper {
  overflow: hidden;
  margin-bottom: var(--space-20);
  width: 100%;
}

/* Swiper : sans height:auto sur les slides, hauteur = 0 → bloc « Top campings » invisible */
.guide-top-moment-swiper-wrap--desktop
  .guide-top-moment-swiper
  .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.guide-top-moment-swiper-wrap--desktop .guide-top-moment-swiper .swiper-slide {
  flex-shrink: 0;
  width: 900px !important;
  max-width: 100%;
  height: auto;
  min-height: 433px;
  box-sizing: border-box;
}

.guide-top-moment__row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-20);
  width: 900px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Carte totale 286.66×433 px (bordure dégradée 3px incluse) */
.guide-top-push-card-wrap {
  width: 275px;
  height: 433px;
  flex-shrink: 0;
  border-radius: var(--radius-card);
  padding: 3px;
  background: linear-gradient(
    165deg,
    var(--color-primary) 0%,
    var(--color-primary-gradient-end) 35%,
    var(--color-secondary-light) 65%,
    var(--color-secondary) 100%
  );
  box-sizing: border-box;
}

.guide-top-push-card-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.guide-top-push-card-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-card);
}

.guide-top-push-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-card) - 3px);
  overflow: hidden;
  background: var(--color-surface-muted);
}

.guide-top-push-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Figma 1366:12489 — badge région (label secondary) */
.guide-top-push-card__region {
  position: absolute;
  left: 17px;
  top: 17px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(230px, calc(100% - 34px));
  padding: var(--space-5) var(--space-15);
  box-sizing: border-box;
  border-radius: var(--radius-label, 5px);
  background: var(--color-secondary, #240046);
  pointer-events: none;
}

.guide-top-push-card__region-label {
  display: block;
  overflow: hidden;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse, #fff);
  text-transform: none;
  letter-spacing: 0;
  text-shadow: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.guide-top-push-card__region-line {
  display: none;
}

.guide-top-push-card__panel {
  position: absolute;
  left: var(--space-10);
  right: var(--space-10);
  bottom: var(--space-10);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-15);
  padding: var(--space-15);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(36, 0, 70, 0.12);
  transition: transform 0.28s ease;
  min-height: calc(var(--space-15) * 2 + var(--space-15) + var(--line-height-21) * 3);
  box-sizing: border-box;
}

/* Figma 1366:12406 — nom puis badge étoiles (après le camping) */
.guide-top-push-card__title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  width: 100%;
  text-align: left;
}

.guide-top-push-card__name {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
  color: var(--color-text);
  transition: color 0.28s ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.guide-top-push-card__logements {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-secondary, #240046);
}

.guide-top-push-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  padding: 2px var(--space-5);
  border-radius: 5px;
  background: #f7dac4;
}

.guide-top-push-card__star {
  color: var(--color-primary, #ff6d00);
  font-size: 15px;
  line-height: 1;
}

.guide-top-push-card__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-5);
  width: 100%;
}

.guide-top-push-card__des {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-text);
}

.guide-top-push-card__amount {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
  color: var(--color-text);
}

.guide-top-push-card__discount-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.guide-top-push-card__sem {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-text);
}

.guide-top-push-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: var(--space-5);
  border-radius: var(--radius-label);
  background: var(--color-primary);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
  color: var(--color-text-inverse);
}

.guide-top-push-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  padding: 0 var(--space-15);
  border: none;
  border-radius: var(--radius-cta);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  transform: translateY(8px);
  transition:
    max-height 0.28s ease,
    min-height 0.28s ease,
    opacity 0.28s ease,
    transform 0.28s ease,
    margin-top 0.28s ease,
    background-color var(--transition-primary-cta, 1s ease),
    background var(--transition-primary-cta, 1s ease);
}

@media (hover: hover) {
  .guide-top-push-card-link:hover .guide-top-push-card__panel,
  .guide-top-push-card-wrap:hover .guide-top-push-card__panel {
    transform: translateY(-12px);
  }

  .guide-top-push-card-link:hover .guide-top-push-card__name,
  .guide-top-push-card-wrap:hover .guide-top-push-card__name {
    background: linear-gradient(
      90deg,
      var(--color-primary) 0%,
      var(--color-primary-gradient-end) 45%,
      var(--color-secondary-light) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .guide-top-push-card-link:hover .guide-top-push-card__cta,
  .guide-top-push-card-wrap:hover .guide-top-push-card__cta,
  .guide-top-push-card-link:focus-visible .guide-top-push-card__cta {
    min-height: 35px;
    max-height: 35px;
    opacity: 1;
    margin-top: var(--space-10);
    transform: translateY(0);
  }

  .guide-top-push-card-link:hover .guide-top-push-card__cta:hover,
  .guide-top-push-card-wrap:hover .guide-top-push-card__cta:hover,
  .guide-top-push-card-link:focus-visible .guide-top-push-card__cta:focus-visible {
    background: var(--color-primary-gradient-end, #ff9e00);
    background-color: var(--color-primary-gradient-end, #ff9e00);
  }

  .guide-top-push-card-link:focus-visible .guide-top-push-card__panel {
    transform: translateY(-12px);
  }

  .guide-top-push-card-link:focus-visible .guide-top-push-card__name {
    background: linear-gradient(
      90deg,
      var(--color-primary) 0%,
      var(--color-primary-gradient-end) 45%,
      var(--color-secondary-light) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.guide-top-push-card-wrap--mobile {
  width: min(286px, calc(100vw - 48px));
  aspect-ratio: 286 / 433;
  height: auto;
  margin: 0 auto;
}

/* Pagination « Top campings » centrée (détail style = 3.b) */
.guide-top-moment-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: var(--space-15);
}

.guide-top-moment-pagination__inner {
  flex-shrink: 0;
}

.guide-top-moment-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.guide-top-moment-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.guide-top-moment-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.guide-top-moment-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.guide-top-moment-card__body {
  padding: var(--space-15);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1;
}

.guide-top-moment-card__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  margin: 0;
}

.guide-top-moment-card__loc {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text-muted);
  margin: 0;
}

.guide-top-moment-card__stars {
  display: flex;
  gap: 2px;
  color: var(--color-primary);
  font-size: 12px;
}

.guide-top-moment-card__price {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  margin: var(--space-5) 0 0;
}

.guide-top-moment-card__old {
  color: var(--color-text-muted);
  margin-left: var(--space-5);
}

.guide-top-moment-card__badge {
  display: inline-block;
  margin-left: var(--space-5);
  padding: 2px 6px;
  background: var(--color-secondary-light);
  color: var(--color-text-inverse);
  border-radius: var(--radius-label);
  font-size: 12px;
  font-weight: 700;
}

.guide-top-moment-card__cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.guide-top-moment-swiper--mobile .swiper-slide {
  width: 300px;
  max-width: 85vw;
  height: auto;
  min-height: 200px;
}

/* Section 8 — Meilleurs campings bord de mer : cartes édito (Figma 253-10736) */
.guide-top-camping-edito__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  margin: 0 0 20px 0;
  padding: 0;
  text-align: left;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary-light) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.guide-top-camping-edito__text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text);
  margin: 0 0 var(--space-15) 0;
}

.guide-top-camping-edito__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.guide-top-camping-edito-card {
  display: flex;
  gap: var(--space-20);
  align-items: stretch;
  padding: var(--space-15);
  background: var(--color-secondary);
  border-radius: var(--radius-card);
  overflow: hidden;
  width: 100%;
  max-width: 900px;
  box-sizing: border-box;
}

.guide-top-camping-edito-card__img-wrap {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.guide-top-camping-edito-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.guide-top-camping-edito-card__content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  min-width: 0;
  min-height: 0;
}

.guide-top-camping-edito-card__label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary-light) 100%
  );
  padding: var(--space-5) var(--space-10);
  border-radius: 5px;
  color: var(--color-text-inverse);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
  white-space: nowrap;
}

.guide-top-camping-edito-card__city-note {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
}

.guide-top-camping-edito-card__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  margin: 0;
  padding: 0;
  text-align: left;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary-light) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
  max-width: 100%;
}

.guide-top-camping-edito-card__stars {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  color: var(--color-primary);
}

.guide-top-camping-edito-card__star {
  font-size: 22px;
  line-height: 1;
}

.guide-top-camping-edito-card__desc {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-top-camping-edito-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 var(--space-15);
  border-radius: var(--radius-cta);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-decoration: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  width: fit-content;
  white-space: nowrap;
  gap: var(--space-5);
  flex-shrink: 0;
}

.guide-top-camping-edito-card__cta-arrow {
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 767px) {
  .guide-top-camping-edito-card {
    flex-direction: column;
  }

  .guide-top-camping-edito-card__img-wrap {
    min-height: 200px;
  }

  .guide-top-camping-edito-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
}

/* Bord de mer (grille alternative) */
.guide-bord-mer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

.guide-bord-mer-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.guide-bord-mer-card__media {
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

.guide-bord-mer-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-bord-mer-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.guide-bord-mer-card__body {
  padding: var(--space-15);
}

.guide-bord-mer-card__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  margin: 0 0 var(--space-5);
}

.guide-bord-mer-card__sub {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text-body);
  margin: 0 0 var(--space-10);
}

.guide-bord-mer-card__stars {
  color: var(--color-primary);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: var(--space-15);
}

.guide-bord-mer-card__cta {
  width: 100%;
  justify-content: center;
}

/* Section 8 — Meilleurs campings bord de mer (Swiper mobile) */
.guide-bord-mer-swiper-wrap--mobile {
  display: none;
}

@media (max-width: 767px) {
  .guide-bord-mer-section .guide-top-camping-edito__list {
    display: none;
  }

  .guide-bord-mer-swiper-wrap--mobile {
    display: block;
  }

  /* Mobile : carte 300 × 570 px (slide = largeur utile, jamais plus large que le conteneur) */
  .guide-bord-mer-swiper--mobile .swiper-slide {
    width: min(300px, 100%);
    box-sizing: border-box;
  }

  .guide-bord-mer-swiper--mobile .swiper-wrapper {
    align-items: stretch;
  }

  .guide-bord-mer-card-mobile {
    background: var(--color-secondary);
    border-radius: var(--radius-card);
    padding: var(--space-15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 570px;
    min-height: 570px;
    max-height: 570px;
    text-align: left;
  }

  .guide-bord-mer-card-mobile__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-5);
  }

  .guide-bord-mer-card-mobile__header .guide-top-camping-edito-card__title {
    text-align: center;
    margin: 0 auto;
    width: fit-content;
  }

  .guide-bord-mer-card-mobile__header .guide-top-camping-edito-card__stars {
    justify-content: center;
  }

  .guide-bord-mer-card-mobile__img-wrap {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .guide-bord-mer-card-mobile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .guide-bord-mer-card-mobile .guide-top-camping-edito-card__desc {
    flex-shrink: 0;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    text-align: left;
    width: 100%;
  }

  .guide-bord-mer-card-mobile .guide-top-camping-edito-card__cta {
    margin: 0 auto;
  }
}

/* Section 9 — L'actualité du camping (Figma 253-10866, card/edito/article standard) */
.page-guide .guide-actu-section > .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.guide-actu-section__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  color: var(--color-text);
  margin: 0;
}

.guide-actu-grid {
  display: flex;
  gap: var(--space-20);
  overflow: hidden;
  width: 100%;
}

.guide-actu-swiper-wrap--mobile {
  display: none;
}

.guide-actu-swiper {
  width: 100%;
  overflow: hidden;
}

.guide-actu-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.guide-actu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
  gap: var(--space-15);
  padding: var(--space-15);
  height: 280px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text-inverse);
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.guide-actu-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-strong);
}

/* Fond carte : image + overlay (Figma aria-hidden layer) */
.guide-actu-card__bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  pointer-events: none;
}

.guide-actu-card__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.guide-actu-card__bg-overlay {
  position: absolute;
  inset: 0;
  background: var(
    --gradient-photo-overlay,
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 66.67%,
      rgba(36, 0, 70, 0.55) 83%,
      rgba(36, 0, 70, 1) 100%
    )
  );
  border-radius: var(--radius-card);
}

/* Bloc image (flex 1) + titre 55px en bas */
.guide-actu-card__img-wrap {
  position: relative;
  flex: 1 0 0;
  min-height: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.guide-actu-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.guide-actu-card__title {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  min-height: 44px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-weight: var(--font-weight-black);
  line-height: 1.3;
  color: var(--color-text-inverse);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section 10 — Nouvelles destinations (Figma 253-10881, card/edito/destination) */
.page-guide .guide-nouvelles-dest-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
  align-items: flex-start;
  width: 900px;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.guide-nouvelles-dest-section__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  color: var(--color-secondary, #240046);
  margin: 0;
}

.guide-nouvelles-dest-grid {
  display: flex;
  gap: var(--space-15);
  width: 100%;
  overflow: hidden;
}

.guide-nouvelle-dest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
  height: 300px;
  padding: 10px;
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text-inverse);
  align-items: flex-start;
  justify-content: flex-end;
  box-sizing: border-box;
}

.guide-nouvelle-dest-card__bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  pointer-events: none;
}

.guide-nouvelle-dest-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.guide-nouvelle-dest-card__overlay {
  position: absolute;
  inset: 0;
  background: var(
    --gradient-photo-overlay,
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 66.67%,
      rgba(36, 0, 70, 0.55) 83%,
      rgba(36, 0, 70, 1) 100%
    )
  );
  border-radius: var(--radius-card);
  pointer-events: none;
}

.guide-nouvelle-dest-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 0;
  margin-top: auto;
}

.guide-nouvelle-dest-card__title {
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  margin: 0;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.guide-nouvelle-dest-card__count {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  margin: 0;
}

@media (max-width: 991px) {
  .guide-top-moment-swiper-wrap--desktop {
    display: none;
  }

  .guide-top-moment-swiper-wrap--mobile {
    display: block;
  }

  .guide-top-moment-swiper--mobile .swiper-slide {
    width: min(300px, 88vw);
  }

  .guide-top-push-card-wrap--mobile {
    width: min(286px, calc(100vw - 40px));
  }
}

@media (max-width: 767px) {
  .card-camping-horizontal {
    flex-direction: column;
  }

  .page-guide
    .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) {
    min-height: 0;
    align-items: stretch;
  }

  .page-guide .card-camping-horizontal--hosting-strip {
    min-height: 0;
  }

  /* Mobile: CTA principal "Voir le camping" doit être plein écran dans le body
     (on cible uniquement le lien direct enfant du body, pas celui dans __dispo-wrap). */
  .card-camping-horizontal__body > a.btn.btn--primary.btn--md {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .card-camping-horizontal__media-stack {
    width: 100%;
    /* la carte passe en colonne : un peu d'air entre la photo et le nom du
       camping, qui se touchaient */
    margin-bottom: var(--space-10);
  }

  /* Les cartes avec dispo empilent media + body dans __top-row, dont le
     gap de 20px s'ajoutait a la marge ci-dessus : 35px entre la photo et
     le nom, deux fois plus que sur les cartes sans dispo. La marge seule
     fait foi (10px partout). */
  .card-camping-horizontal--hosting-strip .card-camping-horizontal__top-row {
    gap: 0;
  }

  .guide-camping-gallery__swiper {
    height: 180px;
  }

  .card-camping-horizontal__image-wrap {
    width: 100%;
    height: 180px;
  }

  .guide-bord-mer-grid {
    grid-template-columns: 1fr;
  }

  .guide-actu-grid {
    display: none;
  }

  .guide-actu-swiper-wrap--mobile {
    display: block;
  }

  .guide-actu-swiper--mobile .swiper-slide {
    width: min(330px, 88vw);
  }

  .guide-actu-swiper--mobile .guide-actu-card {
    height: 334px;
  }

  .guide-actu-swiper--mobile .guide-actu-card__title {
    min-height: 55px;
    font-size: 18px;
    line-height: 27px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .guide-actu-card {
    min-width: 0;
    height: 280px;
  }

  /* Dernière section destinations : éviter flex: 1 0 0 en colonne (réduit les cartes ~138px au lieu de 220px) */
  .page-guide .guide-nouvelles-dest-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .page-guide .guide-nouvelle-dest-card {
    flex: 0 0 auto;
    width: 100%;
    min-height: 220px;
    height: 220px;
  }
}

.guide-top-camping-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-20);
}

/* ===== Pagination ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-15);
}

.pagination__prev,
.pagination__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-cta);
}

.pagination__prev:hover,
.pagination__next:hover {
  background: var(--color-surface-muted);
}

.pagination__numbers {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.pagination__number {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 30px;
  padding: 0 var(--space-10);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-cta);
}

.pagination__number:hover {
  background: var(--color-surface-muted);
}

.pagination__number--active {
  background: var(--color-surface-muted);
  border-color: var(--color-secondary);
}

.pagination__ellipsis {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12);
  color: var(--color-text-muted);
}

/* ===== Guide Table ===== */
.guide-table {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-15);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.guide-table__header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-20);
  padding: var(--space-10);
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  color: var(--color-text-inverse);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: 700;
  border-radius: var(--radius-card);
  margin-bottom: 0;
}

.guide-table__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-20);
  padding: var(--space-10);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.guide-table__row:last-child {
  border-bottom: none;
}

.guide-table__cell {
  min-width: 0;
}

.guide-table__cell:not(.guide-table__cell--first) {
  text-align: center;
  min-width: 80px;
}

.guide-table-wrap {
  max-width: 900px;
}

/* ===== Guide Graph ===== */
.guide-graph {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-15);
  box-shadow: var(--shadow-card);
}

.guide-graph__chart {
  min-height: 200px;
}

.guide-graph__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-15);
  height: 200px;
  padding-top: var(--space-20);
}

.guide-graph__bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.guide-graph__bar {
  width: 100%;
  max-width: 40px;
  min-height: 20px;
  background: linear-gradient(
    180deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  border-radius: var(--radius-label) var(--radius-label) 0 0;
}

.guide-graph__label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12);
  color: var(--color-text-body);
}

.guide-graph-wrap {
  max-width: 900px;
}

/* ===== Guide Articles ===== */
.guide-articles-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-20);
}

/* ===== Explorez par destination (après guide-head, comme Figma / home) ===== */
.page-guide .section-destinations {
  margin: var(--space-50) auto;
  padding: 0;
  max-width: var(--container-max);
}

.page-guide .section-destinations .section__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary-secondary-100, #240046);
  margin-bottom: var(--space-20);
  text-align: center;
}

.page-guide .section-destinations .explore-destinations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-20);
}

/* ===== Guide legacy header search (guide.html) ===== */
.page-guide .search-field {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  flex: 1;
  min-width: 0;
  padding: var(--space-10) var(--space-20);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cta);
  box-shadow: var(--shadow-strong);
}

.page-guide .search-field__label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  color: var(--text-secondary-secondary-100, #240046);
}

.page-guide .search-field__placeholder {
  color: var(--text-secondary-secondary-100, #240046);
}

.guide-table-mention {
  font-size: var(--font-size-14);
  color: var(--color-text-muted);
  margin-top: var(--space-10);
}

/* ===== Guide page header – surcharge layout (Figma node 120-4046) ===== */
.page-guide .header__search {
  position: relative;
}

/* ===== Mobile guide: carte Figma 356:7888 (Destination + inspirations) ===== */
.guide-search-card {
  display: none;
}

.page-guide .guide-search-card {
  display: none;
}

/* Mobile guide: version condensée (Destination + loupe + filtre icon) */
.guide-search-header-mobile {
  display: none;
}

/* Desktop : moteur dans le main masqué, tout reste dans le header */
.page-guide .guide-moteur-wrap {
  display: none;
}

@media (max-width: 991px) {
  /* Mobile : image (hero) en haut, moteur en bas. Header = burger + logo uniquement. */
  .page-guide .header {
    height: var(--header-height);
    flex-direction: row;
  }

  .page-guide .header .container,
  .page-guide .header .header__inner {
    height: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .page-guide .header__logo-wrap {
    order: 0;
    flex: 0 0 auto;
    width: auto;
    min-height: var(--header-logo-wrap-height);
    padding: 0;
  }

  /* Cacher le moteur dans le header : il est affiché plus bas sous le hero */
  .page-guide .header__search {
    display: none;
    margin-left: 0;
  }

  /* Comparateur: garder le moteur dans le header (iPad/iPhone) */
  .page-comparateur.header,
  .page-comparateur .header {
    height: auto;
  }

  /* Comparateur: ne PAS appliquer la grille header "page-guide" (sinon iPad Air/mini cassés) */
  .page-comparateur .header .header__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    height: auto;
    gap: var(--space-10, 10px);
  }

  .page-comparateur .header__logo-wrap {
    order: 0;
    flex: 0 0 auto;
    min-height: var(--header-logo-wrap-height);
    padding: 0;
  }

  .page-comparateur .header__search {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* (Breakpoints spécifiques comparateur déclarés plus bas — pas de @media imbriqués) */

  /* Moteur sous le hero (dans le main) */
  .page-guide .guide-moteur-wrap {
    display: block;
    padding: 0 var(--container-padding) var(--space-20);
    position: relative;
  }

  .page-guide .guide-moteur-wrap .guide-search-card,
  .page-guide .guide-moteur-wrap .guide-search-card--below-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
    background: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-strong);
    padding: var(--space-15);
    width: 100%;
    box-sizing: border-box;
  }

  /* Ligne Destination : pill + bouton orange (Figma 356:7889) */
  .page-guide .guide-search-card__form {
    margin: 0;
  }

  /* Scoped au moteur sous-hero uniquement — ne pas styler le pill header mobile
     (même BEM guide-search-card__* / composant transverse header). */
  .page-guide .guide-moteur-wrap .guide-search-card__field {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-cta);
    box-shadow: var(--shadow-strong);
    padding: var(--space-10) var(--space-10) var(--space-10) var(--space-20);
    min-height: 45px;
    width: 190px;
  }

  .page-guide .guide-moteur-wrap .guide-search-card__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .page-guide .guide-moteur-wrap .guide-search-card__input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-27);
    color: var(--color-text);
    background: transparent;
    border: none;
    outline: none;
  }

  .page-guide .guide-moteur-wrap .guide-search-card__input::placeholder {
    color: var(--color-text);
  }

  .page-guide .guide-moteur-wrap .guide-search-card__input[readonly] {
    cursor: pointer;
  }

  .page-guide .guide-moteur-wrap .guide-search-card__submit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    /* pas de padding horizontal : il ne laissait que 5px de large a une
       loupe de 24px, ecrasee par le flex du bouton */
    padding: 0;
    margin: 0;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-cta);
    cursor: pointer;
  }

  .page-guide .guide-moteur-wrap .guide-search-card__submit img {
    flex: 0 0 auto;
    width: 24px;
    height: 25px;
    filter: brightness(0) invert(1);
  }

  /* Section « Quelques inspirations… » (Figma 356:7890–356:7896) */
  .page-guide .guide-search-card__inspirations {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }

  .page-guide .guide-search-card__inspirations-title {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-21);
    color: var(--color-text);
    margin: 0;
  }

  .page-guide .guide-search-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-10);
  }

  .page-guide .guide-search-card__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-10);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-label);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-21);
    color: var(--color-text);
    text-decoration: none;
  }

  .page-guide .guide-search-card__chip:hover {
    background: var(--color-border-light);
  }

  .page-guide .guide-search-card__chip-icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    object-fit: contain;
  }

  .page-guide .guide-search-card__chip-text {
    white-space: nowrap;
  }

  .page-guide .guide-search-card__actions {
    display: flex;
    align-items: center;
  }

  .page-guide .guide-search-card__filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-5);
  }

  .page-guide .guide-search-card__filter svg {
    width: 18px;
    height: 16px;
  }
}

.page-guide .header__search .search-form.search-form--expanded {
  height: 45px;
  min-height: 45px;
  /* Figma (node 600:13358) : desktop short = 470px */
  width: var(--header-search-form-width);
  min-width: var(--header-search-form-width);
  max-width: var(--header-search-form-width);
}

@media (min-width: 992px) {
  .page-guide .header__search {
    justify-content: center;
  }

  .page-guide .header__search .search-form.search-form--expanded {
    overflow: visible;
  }

  .page-guide .header__search .search-results-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--header-search-gap);
    width: auto;
  }

  .page-guide .header__search .search-form__label {
    font-size: var(--font-size-14);
  }

  /* Un seul texte : masquer le label pour Destination et Date de départ (garder placeholder / bouton en bleu-violet) */
  .page-guide .header__search .search-form__item--text .search-form__label,
  .page-guide
    .header__search
    .search-form__item--date-trigger
    .search-form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .page-guide .header__search .search-form__input::placeholder {
    color: var(--color-text-muted, #adb5bd);
  }

  .page-guide .header__search .search-form__date-trigger,
  .page-guide .header__search .search-form__date-value,
  .page-guide .header__search .search-form--classic .search-form__list-trigger,
  .page-guide .header__search .search-form--classic .search-form__list-value,
  .page-guide .header__search .search-form--classic .search-form__list-trigger--has-value,
  .page-guide .header__search .search-form--classic .search-form__list-trigger--has-value .search-form__list-value {
    color: var(--color-text-muted, #adb5bd);
    font-weight: var(--font-weight-regular);
  }

  /* Date de départ : largeur 100px (guides — pas les pages statiques légales, alignées superdeals) */
  .page-guide:not(.page-static-legal) .header__search .search-form__item--date-trigger {
    min-width: 100px;
    width: 100px;
  }

  /* Loupe : padding gauche et droite +5px (10px total) */
  .page-guide:not(.page-static-legal) .header__search .search-form__submit {
    padding-left: 10px;
    padding-right: 10px;
  }

  .page-guide:not(.page-static-legal) .header__search .search-form__submit img {
    margin: 0;
  }

  /* Chevron sur le libellé Personnes, pas sur le select */
  .page-guide:not(.page-static-legal)
    .header__search
    .search-form__label--with-chevron
    .search-form__chevron {
    margin-left: 2px;
    font-size: 0.85em;
    vertical-align: middle;
  }

  .page-guide:not(.page-static-legal) .header__search .search-form__select {
    appearance: none;
    background-image: none;
    padding-right: 8px;
  }

  /* Personnes : n'afficher que le libellé + chevron ; bloc élargi de 20px */
  .page-guide:not(.page-static-legal) .header__search .search-form__item--select {
    min-width: 120px;
  }

  .page-guide:not(.page-static-legal) .header__search .search-form__select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    min-width: 120px;
  }

  .page-guide:not(.page-static-legal) .header__search .search-form__select--label-only {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: transparent;
    background: transparent;
    border: none;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-14);
  }

  .page-guide:not(.page-static-legal) .header__search .search-form__select--label-only option {
    color: var(--color-text);
    background: #fff;
    padding-left: 5px;
  }
}

@media (max-width: 991px) {
  .guide-search-header-mobile__field {
    width: 242px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ================================
   Comparateur — breakpoints header
   iPhone: moteur condensé
   iPad mini/air: même moteur desktop que iPad Pro
   ================================ */

@media (max-width: 767px) {
  /* Moteur mobile comparateur / superdeals = grille 2 lignes (comme guide / confidentialité — Figma 312:18000) */
  :is(.page-comparateur, .page-superdeals) {
    /* header__inner 155px + padding-bottom 25px */
    --comparateur-map-overlay-top: calc(155px + 25px);
  }

  .page-comparateur.header,
  .page-comparateur .header {
    height: auto;
    padding-bottom: 25px;
  }

  .page-comparateur .header .header__inner {
    display: grid !important;
    grid-template-columns: var(--header-burger-size) 1fr;
    grid-template-rows: auto var(--header-inner-height);
    align-items: center;
    height: 155px !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    gap: 0;
  }

  .page-comparateur .header__logo-wrap {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    display: grid !important;
    grid-template-columns: var(--header-burger-size) 1fr;
    grid-template-rows: auto var(--header-inner-height);
    align-items: center;
    column-gap: var(--space-10);
    margin-top: 20px;
    width: 100%;
    min-height: 0;
  }

  .page-comparateur .header__logo-wrap a {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
  }

  .page-comparateur .header__logo-wrap .header__burger-trigger {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: center;
  }

  /* Moteur pill mobile : home.v3.css (:is superdeals, comparateur) + override .page-guide ci-dessous */

  .page-comparateur .map-header {
    min-height: 48px;
    /* Droite : laisse de l’air entre « Avec dispos / Tous » et le (×) absolute */
    padding: 0 64px 0 var(--space-10);
  }

  .page-comparateur .map-header .map-carte-mode {
    margin-right: 12px;
  }

  .page-comparateur .map-header .map-desktop {
    max-width: calc(100% - 40px);
    font-size: 13px;
  }

  .page-comparateur .map-header .map-desktop > p {
    font-size: 13px;
    line-height: 1.3;
  }

  .page-comparateur .map-wrapper #map {
    flex: 1;
    min-height: 200px;
    width: 100%;
  }

  .page-comparateur .card-map-main {
    width: min(360px, calc(100% - 16px));
    max-width: calc(100% - 16px);
    min-height: 100px;
  }

  .page-comparateur .card-map-main.is-at-marker {
    max-width: calc(100vw - 24px);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Neutraliser les règles "page-guide tablet" sur comparateur */
  .page-comparateur .header .header__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: auto !important;
  }

  .page-comparateur .header__search {
    display: flex !important;
    justify-content: center;
    width: 100%;
  }

  .page-comparateur .header__search .guide-search-header-mobile {
    display: none !important;
  }

  .page-comparateur .header__search .search-results-bar {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: min(900px, 100%);
    flex-wrap: nowrap;
  }

  .page-comparateur .header__search .search-results-bar .search-form {
    flex: 0 0 auto;
  }

  .page-comparateur .header__search .search-results-bar__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }

  .page-comparateur .header__search .search-form.search-form--expanded {
    min-width: 0;
    width: auto;
  }
}

@media (max-width: 767px) {
  /* Mobile guide : on montre le moteur condensé dans le header */
  /* 2 lignes sans chevauchement (Figma node 70:3898) */
  .page-guide .header {
    height: auto;
    padding-bottom: 25px;
  }

  /* Override (spécificité plus forte) : à cause du @media max-width 991px */
  .page-guide .header .header__inner {
    height: 155px;
  }

  .page-guide .header__inner {
    display: grid;
    grid-template-columns: var(--header-burger-size) 1fr;
    grid-template-rows: auto var(--header-inner-height);
    align-items: center;
    height: 155px;
  }

  /* 2 lignes : logo centré (row1) puis burger à gauche (row2) */
  .page-guide .header__logo-wrap {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: var(--header-burger-size) 1fr;
    grid-template-rows: auto var(--header-inner-height);
    align-items: center;
    margin-top: 20px;
  }

  .page-guide .header__logo-wrap a {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
  }

  .page-guide .header__logo-wrap .header__burger-trigger {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: center;
  }

  .page-guide .header__search {
    grid-column: 2;
    grid-row: 2;
    width: 230px;
    margin-left: 20px;
    margin-right: 10px;
    justify-content: center;
  }

  .page-guide .header__search {
    display: flex;
    justify-content: center;
  }

  .page-guide .header__search .search-results-bar {
    display: none;
  }

  /* On retire la grosse carte moteur sous le hero */
  .page-guide .guide-moteur-wrap {
    display: none;
  }

  .guide-search-header-mobile {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    width: 100%;
  }

  /* Pill Destination (Figma 70:3898 / SearchField) — 242px partout (mobile). */
  .guide-search-header-mobile__field {
    width: 242px;
    flex: 0 0 242px;
    max-width: 242px;
    display: flex;
    align-items: center;
    position: relative;
    gap: var(--space-15);
    background: var(--color-surface-grayscale-white, #ffffff);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-cta);
    box-shadow: var(--shadow-strong);
    padding: var(--space-10) var(--space-10) var(--space-10) var(--space-20);
    min-height: 45px;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  /* On masque le label (le texte "Destination" vient du placeholder) */
  .guide-search-header-mobile__field .guide-search-card__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .guide-search-header-mobile__field .guide-search-card__input {
    flex: 1;
    min-width: 0;
    width: 100%;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-27);
    color: var(--color-text);
    background: transparent;
    border: none;
    outline: none;
  }

  .guide-search-header-mobile__field .guide-search-card__input::placeholder {
    color: var(--color-text);
  }

  .guide-search-header-mobile__field .guide-search-card__submit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 35px;
    /* pas de padding horizontal : il ne laissait que 20px de large a une
       loupe de 24px, ecrasee par le flex du bouton */
    padding: 0;
    /* Annule button { margin-bottom: 0.5rem } du CSS legacy (sinon pill à 65px). */
    margin: 0;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-cta);
    cursor: pointer;
  }

  .guide-search-header-mobile__field .guide-search-card__submit img {
    flex: 0 0 auto;
    width: 24px;
    height: 25px;
    filter: brightness(0) invert(1);
  }

  /*
   * Pill mobile : engine-v3 enveloppe l'input dans .autoComplete_wrapper après le 1er rendu.
   * width:100% sur ce wrapper (home.v3.css header) → loupe collée à « Destination ».
   */
  .guide-search-header-mobile__field .autoComplete_wrapper {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: none;
    position: relative;
    box-sizing: border-box;
  }

  /* Bouton filtre icon circle */
  .guide-search-header-mobile__filter {
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    margin-left: -10px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border-radius: var(--radius-cta);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    cursor: pointer;
  }

  .guide-search-header-mobile__filter svg {
    display: block;
  }

  /* Comparateur / SEO / superdeals (page-guide) : annule le slot fixe 230px
     → même layout flex que la liste de résultats (pill ~242px @390). */
  :is(.page-comparateur, .page-superdeals, .seo).page-guide .header__search {
    width: 100% !important;
    max-width: 100%;
    margin-left: var(--space-10) !important;
    margin-right: 0 !important;
    min-width: 0;
    display: flex !important;
    grid-column: 2;
    grid-row: 2;
    justify-content: center;
  }

  :is(.page-superdeals, .page-comparateur) .header__search .guide-search-header-mobile__field {
    width: 242px !important;
    flex: 0 0 242px;
    max-width: 242px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* SEO mobile : même largeur 242px que le reste du site. */
  .seo .header__search .guide-search-header-mobile__field {
    width: 242px !important;
    flex: 0 0 242px;
    max-width: 242px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :is(.page-superdeals, .page-comparateur, .seo)
    .header__search
    .guide-search-header-mobile__field
    .guide-search-card__submit {
    width: 50px !important;
    height: 35px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--color-primary) !important;
    border: none !important;
    border-radius: var(--radius-cta) !important;
  }

  :is(.page-superdeals, .page-comparateur, .seo)
    .header__search
    .guide-search-header-mobile__field
    .guide-search-card__submit
    img {
    flex: 0 0 auto !important;
    filter: brightness(0) invert(1) !important;
  }

  :is(.page-superdeals, .page-comparateur, .seo) .header__search .guide-search-header-mobile__filter {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }
}

/*
 * Guide camping / hébergement / hub thématique – tablette (iPad mini, iPad Air, etc., 768–991px) :
 * moteur = barre complète dans le header (même principe qu’iPad Pro / desktop ≥992px),
 * pas la carte sous le hero ni le pill header mobile.
 * Contre-attaque aussi le empilement colonne de components.css (768–834px).
 */
@media (min-width: 768px) and (max-width: 991px) {
  :is(.page-guide-camping, .page-guide-hebergement, .page-hub) .header {
    height: var(--header-height-desktop);
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub) .header .container,
  :is(.page-guide-camping, .page-guide-hebergement, .page-hub) .header .header__inner {
    height: var(--header-inner-height);
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header--with-search
    .header__inner {
    flex-wrap: nowrap;
    gap: var(--space-10);
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub) .header__logo-wrap {
    order: 0;
    flex: 0 0 auto;
    width: auto;
    min-height: var(--header-logo-wrap-height);
    padding: 0;
    display: flex;
    align-items: center;
    grid-template-columns: unset;
    grid-template-rows: unset;
    grid-column: unset;
    grid-row: unset;
    margin-top: 0;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub) .header__logo-wrap a {
    grid-column: unset;
    grid-row: unset;
    justify-self: unset;
    align-self: unset;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__logo-wrap
    .header__burger-trigger {
    grid-column: unset;
    grid-row: unset;
    justify-self: unset;
    align-self: unset;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub) .header__search {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 var(--space-20);
    height: var(--header-inner-height);
    width: auto;
    grid-column: unset;
    grid-row: unset;
    justify-content: center;
    order: 0;
    flex-basis: auto;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header--with-search
    .header__search {
    order: 0;
    flex-basis: auto;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-results-bar {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--header-search-gap);
    width: auto;
    min-width: 0;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-results-bar
    .search-form,
  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form.search-form--expanded {
    flex-direction: row !important;
    align-items: center;
    height: var(--header-search-form-height);
    min-height: var(--header-search-form-height);
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    padding: 10px 10px 10px 20px;
    gap: 30px;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__fields {
    flex-direction: row !important;
    width: auto;
    align-items: center;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__separator {
    width: 1px !important;
    height: auto !important;
    min-height: 24px;
    align-self: stretch;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .guide-search-header-mobile {
    display: none !important;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub) .guide-moteur-wrap {
    display: none !important;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub) .header__search {
    justify-content: center;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form.search-form--expanded {
    overflow: visible;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__label {
    font-size: var(--font-size-14);
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__item--text
    .search-form__label,
  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__item--date-trigger
    .search-form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__input::placeholder {
    color: var(--text-secondary-secondary-100, #240046);
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__date-trigger,
  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__date-value {
    color: var(--text-secondary-secondary-100, #240046);
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__item--date-trigger {
    min-width: 100px;
    width: 100px;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__submit {
    padding-left: 10px;
    padding-right: 10px;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__submit
    img {
    margin: 0;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__label--with-chevron
    .search-form__chevron {
    margin-left: 2px;
    font-size: 0.85em;
    vertical-align: middle;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__select {
    appearance: none;
    background-image: none;
    padding-right: 8px;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__item--select {
    min-width: 120px;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    min-width: 120px;
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__select--label-only {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: transparent;
    background: transparent;
    border: none;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-14);
  }

  :is(.page-guide-camping, .page-guide-hebergement, .page-hub)
    .header__search
    .search-form__select--label-only
    option {
    color: var(--text-secondary-secondary-100, #240046);
    background: #fff;
    padding-left: 5px;
  }
}

/* (mobile spécifique header/hero rollbacké : on laisse le comportement par défaut) */

/* ===== Footer pleine largeur (Figma 120-5106) — même structure que la home (container + copyright) ===== */
.page-guide .footer {
  width: 100%;
  min-height: 425px;
  height: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
  align-items: stretch;
  box-sizing: border-box;
}

.page-guide .footer > .container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-25) var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

.page-guide .footer__copyright {
  margin-top: auto;
  padding-top: var(--space-30);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-inverse);
  flex-shrink: 0;
}

.camping-detail-main,
.comparateur-main,
.hub-main,
.conf-main {
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px 40px;
  box-sizing: border-box;
}

.page-camping-detail .camping-detail-main > .section > .container {
  width: 900px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Fiche camping — espacement vertical : le rythme vient du gap de la colonne.
   Le padding global `.section { padding: var(--space-50) 0 }` (components.v3)
   n'est annulé par le layout seo.v3 qu'en mobile → on le neutralise aussi ici,
   sinon chaque bloc cumule gap 50px + paddings 50px et crée des trous. */
.page-camping-detail .camping-detail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-top: var(--space-10);
}

.page-camping-detail .camping-detail-main > .section {
  padding-top: 0;
  padding-bottom: 0;
}

/* Rythme vertical uniforme : chaque bloc de la fiche est espacé du gap de la
   colonne — pas de marge spécifique, sommaire compris. */

/* Type de camping — boutons (pastilles violettes, fond blanc) */
.page-camping-detail .camping-detail-types__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Bloc « Type de camping » : pastilles centrées, et de l'air au-dessus comme
   en dessous. Ciblé sur la section pour ne pas déplacer les autres listes qui
   réutilisent la même classe (modes de paiement du bloc « Comment réserver »). */
.page-camping-detail .camping-detail-main > .camping-detail-types {
  margin-top: var(--space-10);
}

.page-camping-detail .camping-detail-types .camping-detail-types__list,
.page-camping-detail .camping-detail-types__list--hero {
  justify-content: center;
}

/* Rendu dans le hero, entre le GEO et la galerie, sur la même ligne que la
   note moyenne / le bouton « Déposez un avis » (.camping-detail-hero__meta,
   ci-dessous). La liste ne porte plus ni largeur ni marges : c'est la ligne
   parente qui centre et espace. */
.page-camping-detail .camping-detail-types__list--hero {
  width: auto;
  max-width: none;
  margin: 0;
}

/* Ligne « note + types » du hero. Le conteneur du hero est un flex column
   avec gap 15px : on le rattrape verticalement pour ne garder qu'un filet
   d'air (5px). */
.page-camping-detail .camping-detail-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 900px;
  margin: calc(var(--space-5) - var(--space-15)) auto calc(var(--space-10) - var(--space-15));
}

.page-camping-detail .camping-detail-types__chip {
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-cta);
  color: var(--color-primary);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
}

/* Sommaire (composant table-of-contents des pages SEO) : largeur alignée
   sur la colonne de contenu de la fiche, et respiration verticale marquée
   (les marges s'ajoutent au gap de la colonne). */
.page-camping-detail .camping-detail-main > .camping-detail-sommaire {
  margin-top: var(--space-50);
  margin-bottom: var(--space-50);
}

/* Descriptif complet : même respiration avant la première section thématique. */
.page-camping-detail .camping-detail-main > .camping-detail-description {
  margin-bottom: var(--space-50);
}

/* Sections thématiques (cartes violettes) : les séparer nettement les unes
   des autres, le gap de la colonne étant trop serré pour des blocs pleins. */
.page-camping-detail .camping-detail-main > .camping-detail-theme-section + .camping-detail-theme-section {
  margin-top: var(--space-30);
}

/* Réseaux sociaux : boutons icône + nom (CSV ligne 186). */
.page-camping-detail .camping-detail-main > .camping-detail-social-section {
  margin-bottom: var(--space-50);
}

.camping-detail-social {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.camping-detail-social__title {
  margin: 0 0 var(--space-15);
}

.camping-detail-social__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.camping-detail-social__btn {
  --rs-couleur: var(--color-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--rs-couleur);
  border-radius: var(--radius-cta);
  color: var(--rs-couleur);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  text-decoration: none;
}

/* couleurs de marque de chaque réseau */
.camping-detail-social__btn--instagram { --rs-couleur: #e4405f; }
.camping-detail-social__btn--facebook  { --rs-couleur: #1877f2; }
.camping-detail-social__btn--tiktok    { --rs-couleur: #010101; }
.camping-detail-social__btn--youtube   { --rs-couleur: #ff0000; }
.camping-detail-social__btn--twitch    { --rs-couleur: #9146ff; }
.camping-detail-social__btn--x         { --rs-couleur: #0f1419; }

.camping-detail-social__btn:hover {
  background: var(--rs-couleur);
  color: #fff;
}

.camping-detail-social__btn:hover .camping-detail-social__icone {
  background: #fff;
}

/* icône monochrome teintée via mask (l'image sert de pochoir) */
.camping-detail-social__icone {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--rs-couleur);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ── Fil d'Ariane + netlinking bas de page (CSV ligne 203) ─────────────── */
.page-camping-detail .camping-detail-main > .camping-detail-ariane-section {
  margin-top: var(--space-25);
}

/* marge basse uniquement en mobile (le sticky bas de page recouvre la fin
   de la page sur petit écran) */
@media (max-width: 767px) {
  .page-camping-detail .camping-detail-main > .camping-detail-ariane-section {
    margin-bottom: var(--space-50);
  }
}

.camping-detail-ariane {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.camping-detail-ariane__fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-secondary);
}

.camping-detail-ariane__lien {
  color: var(--color-primary);
  font-weight: var(--font-weight-black);
  text-decoration: none;
}

.camping-detail-ariane__lien:hover {
  text-decoration: underline;
}

.camping-detail-ariane__etape {
  font-weight: var(--font-weight-regular);
}

.camping-detail-ariane__sep {
  color: var(--color-secondary);
  opacity: 0.5;
}

.camping-detail-ariane__groupe {
  position: relative;
  margin-top: var(--space-15);
  padding: var(--space-10) 44px var(--space-10) var(--space-15);
  background: var(--color-surface-muted, #f4f1f8);
  border-radius: var(--radius-card);
}

.camping-detail-ariane__groupe-titre {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  color: var(--color-secondary);
  cursor: pointer;
}

.camping-detail-ariane__groupe .controle {
  position: absolute;
  top: var(--space-10);
  right: var(--space-15);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
  cursor: pointer;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.camping-detail-ariane__groupe.closed .controle {
  transform: rotate(180deg);
}

.camping-detail-ariane__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-15);
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
}

.camping-detail-ariane__groupe.closed .camping-detail-ariane__liens {
  display: none;
}

.camping-detail-ariane__liens a {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: var(--color-secondary);
  text-decoration: none;
}

.camping-detail-ariane__liens a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ── FAQs (CSV ligne 197) : blob HTML v2 (.question/.reponse/.controle),
   accordéon restylé v3 — repli piloté par la classe `closed` (faqs.js). ── */
.page-camping-detail .camping-detail-main > .camping-detail-faqs-section {
  margin-bottom: var(--space-50);
}

.camping-detail-faqs {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.camping-detail-faqs__title {
  margin: 0 0 var(--space-15);
}

.camping-detail-faqs__liste ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Chaque question = une pilule gris clair pleine largeur (design repris du
   sommaire), la flèche coudée à droite. Repliée : pilule ; dépliée : la
   carte s'ouvre (rayon de carte) et se souligne d'un liseré violet.
   `!important` sur la typo de la question : sur les pages SEO, des règles
   legacy ciblant la balise h3 passent devant (question rendue à 22px). */
.camping-detail-faqs__liste li {
  position: relative;
  padding: var(--space-15) 56px var(--space-15) var(--space-25);
  background: var(--color-surface-muted, #e9ecef);
  border: 2px solid transparent;
  /* arrondi de carte, pas de pilule : en mobile la question passe souvent
     sur deux lignes et un rayon plein (100px) devenait démesuré. */
  border-radius: var(--radius-card, 20px);
  transition: border-color 0.2s ease;
}

.camping-detail-faqs__liste li:hover {
  border-color: var(--color-secondary);
}

/* dépliée : la réponse apparaît sous le bandeau de question */
.camping-detail-faqs__liste li:not(.closed) {
  border-color: var(--color-secondary);
  overflow: hidden;
}

.camping-detail-faqs__liste .question {
  margin: 0 !important;
  font-family: var(--font-family-secondary) !important;
  font-size: var(--font-size-18) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 1.4 !important;
  color: var(--color-secondary) !important;
  cursor: pointer;
}

/* dépliée : la barre de question passe en fond sombre / texte clair. Les
   marges négatives annulent le padding du <li> pour que le fond file d'un
   bord à l'autre de la carte, le padding est rétabli sur la question. */
.camping-detail-faqs__liste li:not(.closed) .question {
  margin: calc(-1 * var(--space-15)) -56px 0 calc(-1 * var(--space-25)) !important;
  padding: var(--space-15) 56px var(--space-15) var(--space-25);
  background: var(--color-secondary);
  color: var(--color-text-inverse, #fff) !important;
}

/* Flèche coudée (↳) dessinée en masque : elle prend la couleur du texte et
   pivote quand la question s'ouvre. Le « < » du blob legacy est masqué. */
.camping-detail-faqs__liste .controle {
  position: absolute;
  /* alignée sur la PREMIÈRE ligne de la question (pas au milieu du bloc) :
     une fois déplié, le milieu du <li> tomberait dans la réponse. */
  top: 17px;
  right: var(--space-25);
  z-index: 1;                         /* au-dessus du fond sombre du titre */
  width: 22px;
  height: 22px;
  font-size: 0;
  color: transparent;
  background-color: var(--color-secondary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v7a4 4 0 0 0 4 4h5'/%3E%3Cpath d='m14 11 4 4-4 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v7a4 4 0 0 0 4 4h5'/%3E%3Cpath d='m14 11 4 4-4 4'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  cursor: pointer;
  transform: none;
  transition: transform 0.2s ease;
}

/* dépliée : la flèche bascule vers la réponse et passe en clair (fond sombre) */
.camping-detail-faqs__liste li:not(.closed) .controle {
  transform: rotate(90deg);
  background-color: var(--color-text-inverse, #fff);
}

.camping-detail-faqs__liste .reponse {
  margin-top: var(--space-10);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
}

.camping-detail-faqs__liste .reponse p {
  margin: 0 0 var(--space-10);
}

/* Liens des réponses : même traitement que ceux du descriptif — violet clair,
   sans soulignement au repos, souligné au survol et une fois visité (repère
   de lecture). `!important` : sur les pages SEO la cascade legacy `.seo a`
   repasse devant. */
.camping-detail-faqs__liste .reponse a {
  color: var(--color-secondary-light, #9d4edd) !important;
  font-weight: var(--font-weight-regular) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-underline-offset: 3px;
}

.camping-detail-faqs__liste .reponse a:hover,
.camping-detail-faqs__liste .reponse a:visited {
  text-decoration: underline !important;
}

/* Mobile : questions souvent sur deux lignes, arrondi encore resserré et
   respiration latérale réduite pour gagner de la largeur de texte. */
@media (max-width: 767px) {
  .camping-detail-faqs__liste li {
    padding: var(--space-15) 46px var(--space-15) var(--space-15);
    border-radius: 16px;
  }

  .camping-detail-faqs__liste li:not(.closed) .question {
    margin: calc(-1 * var(--space-15)) -46px 0 calc(-1 * var(--space-15)) !important;
    padding: var(--space-15) 46px var(--space-15) var(--space-15);
  }

  .camping-detail-faqs__liste .controle {
    right: var(--space-15);
  }
}

.camping-detail-faqs__liste .reponse p:last-child {
  margin-bottom: 0;
}

.camping-detail-faqs__liste li.closed .reponse {
  display: none;
}

/* ── Comment réserver sur le camping ? (CSV ligne 191) ─────────────────── */
.page-camping-detail .camping-detail-main > .camping-detail-reserver-section {
  margin-bottom: var(--space-50);
}

.camping-detail-reserver {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.camping-detail-reserver__title {
  margin: 0 0 var(--space-15);
}

.camping-detail-reserver__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
}

/* Injections forfait v2 (.btn.web / .btn.phone) restylées façon v3 :
   site officiel en plein, téléphone en contour. */
.camping-detail-reserver__actions .btn {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 10px 20px;
  border-radius: var(--radius-cta);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  cursor: pointer;
  box-shadow: none;
}

.camping-detail-reserver__actions .btn.web {
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
}

.camping-detail-reserver__actions .btn.phone {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.camping-detail-reserver__actions .btn.web:hover,
.camping-detail-reserver__actions .btn.phone:hover {
  opacity: 0.88;
}

.camping-detail-reserver__actions .btn .s {
  display: none;
}

.camping-detail-reserver__btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-cta);
  color: var(--color-primary);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  text-decoration: none;
  cursor: pointer;
}

.camping-detail-reserver__btn--plein {
  background: var(--color-primary);
  color: #fff;
}

/* ré-affirmation contre le legacy button:hover { background:none } */
.camping-detail-reserver__btn:hover,
.camping-detail-reserver__btn:focus {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  opacity: 0.88;
}

.camping-detail-reserver__btn--plein:hover,
.camping-detail-reserver__btn--plein:focus {
  border-color: var(--color-primary-gradient-end, #ff9e00);
}

.camping-detail-reserver__paiements {
  margin-top: var(--space-20);
}

.camping-detail-reserver__sous-titre {
  margin: 0 0 var(--space-10);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-black);
  color: var(--color-secondary);
}

/* Layer du formulaire de demande */
.camping-detail-reserver__layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-15);
}

.camping-detail-reserver__layer[hidden] {
  display: none;
}

.camping-detail-reserver__layer-fond {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.camping-detail-reserver__layer-boite {
  position: relative;
  width: 560px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-25);
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: 0 8px 32px rgba(36, 0, 70, 0.3);
}

.camping-detail-reserver__layer-croix {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 0;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--color-secondary);
  cursor: pointer;
}

.camping-detail-reserver__layer-titre {
  margin: 0 0 var(--space-15);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-black);
  color: var(--color-secondary);
}

.camping-detail-reserver__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10) var(--space-15);
}

.camping-detail-reserver__layer-boite label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  color: var(--color-secondary);
}

/* Champs du formulaire : styles complets et ré-affirmés, le CSS legacy du
   site pose ses propres règles globales sur input/textarea. */
.camping-detail-reserver__layer-boite input,
.camping-detail-reserver__layer-boite textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: none;
  outline: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  color: var(--color-secondary);
  appearance: none;
  -webkit-appearance: none;
}

.camping-detail-reserver__layer-boite input:focus,
.camping-detail-reserver__layer-boite textarea:focus {
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(255, 109, 0, 0.15);
}

.camping-detail-reserver__layer-boite textarea {
  resize: vertical;
  min-height: 110px;
}

.camping-detail-reserver__message {
  margin-top: var(--space-10);
}

.camping-detail-reserver__layer-boite [type="submit"] {
  margin-top: var(--space-15);
}

.camping-detail-reserver__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.camping-detail-reserver__erreur {
  margin: var(--space-10) 0 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  color: #c1121f;
}

.camping-detail-reserver__succes {
  margin: var(--space-10) 0 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  color: var(--color-secondary);
}

@media (max-width: 767px) {
  .camping-detail-reserver__grille {
    grid-template-columns: 1fr;
  }
}

/* Informations pratiques : respiration sous le bloc + compléments
   (propriétaire, labels-liens). */
.page-camping-detail .camping-detail-main > .camping-detail-practical-section {
  margin-bottom: var(--space-50);
}

.camping-detail-practical__marchand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.camping-detail-practical__marchand-logo {
  max-width: 120px;
  max-height: 60px;
  object-fit: contain;
}

.camping-detail-practical__marchand-nom {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  color: var(--color-secondary);
  text-decoration: none;
}

a.camping-detail-practical__marchand-nom:hover {
  text-decoration: underline;
}

/* Plan du camping : image crawlée, pleine largeur du bloc, coins arrondis. */
.camping-detail-practical__plan {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card, 20px);
}

.camping-detail-practical__labels {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  list-style: none;
  padding: 0;
}

.camping-detail-practical__labels li {
  display: inline-flex;
}

/* Label du camping : nom en gras violet, fond blanc, encart arrondi avec
   petit liseré violet (CSV ligne 181). */
.camping-detail-practical__label-chip {
  display: inline-block;
  padding: 6px 16px;
  background: #fff;
  color: var(--color-secondary-light, #9d4edd);
  border: 1px solid var(--color-secondary-light, #9d4edd);
  border-radius: var(--radius-cta);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  text-decoration: none;
}

a.camping-detail-practical__label-chip:hover,
a.camping-detail-practical__label-chip:focus {
  background: var(--color-secondary-light, #9d4edd);
  color: #fff;
  border-color: var(--color-secondary-light, #9d4edd);
}

a.camping-detail-types__chip {
  text-decoration: none;
  display: inline-block;
}

a.camping-detail-types__chip:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ── Section Avis : bloc clair qui casse le rythme des sections violettes,
   cartes au style « points forts » (liseré dégradé). ─────────────────────── */
.page-camping-detail .camping-detail-main > .camping-detail-avis-section {
  margin-top: var(--space-50);
  margin-bottom: var(--space-50);
}

.camping-detail-avis {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.camping-detail-avis__head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-15);
}

/* le titre partage la ligne avec le bouton de dépôt : on annule le
   width:100% posé sur les guide-section__title (qui le faisait passer
   à la ligne) et on le laisse absorber l'espace restant */
.page-camping-detail .camping-detail-main .camping-detail-avis__head .camping-detail-avis__title {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  /* le titre ne se coupe jamais (« Avis sur le / camping ») : si la place
     manque, c'est le bouton qui passe dessous (flex-wrap ci-dessous) */
  white-space: nowrap;
}

@media (max-width: 767px) {
  .camping-detail-avis__head {
    flex-wrap: wrap;
    row-gap: var(--space-10);
  }

  .page-camping-detail .camping-detail-main .camping-detail-avis__head .camping-detail-avis__title {
    flex: 0 0 auto;
    font-size: 1.6rem;
  }
}

.camping-detail-avis__head .camping-detail-avis__depot-btn {
  flex-shrink: 0;
}

.camping-detail-avis__depot-btn {
  padding: 8px 18px;
  background: var(--color-primary);
  color: var(--color-text-inverse, #fff);
  border: none;
  border-radius: var(--radius-cta);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  cursor: pointer;
}

/* Neutralise le legacy `button:hover { background:none; border:none }` :
   on ré-affirme fond et bordure au survol. */
.camping-detail-avis__depot-btn:hover,
.camping-detail-avis__depot-btn:focus,
.camping-detail-avis__depot-btn:active {
  background: var(--color-primary);
  color: var(--color-text-inverse, #fff);
  border: none;
  opacity: 0.9;
}

.camping-detail-avis__tabs {
  display: flex;
  gap: var(--space-10);
  margin-top: var(--space-20);
}

.camping-detail-avis__tab {
  padding: 8px 18px;
  background: #fff;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-cta);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  cursor: pointer;
}

.camping-detail-avis__tab:hover,
.camping-detail-avis__tab:focus {
  background: #fff;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

.camping-detail-avis__tab.is-active,
.camping-detail-avis__tab.is-active:hover,
.camping-detail-avis__tab.is-active:focus {
  background: var(--color-secondary);
  color: #fff;
  border: 1px solid var(--color-secondary);
}

.camping-detail-avis__panel {
  margin-top: var(--space-20);
}

.camping-detail-avis__resume {
  display: flex;
  align-items: baseline;
  gap: var(--space-15);
}

.camping-detail-avis__note {
  margin: 0;
  font-family: var(--font-family-primary);
  color: var(--color-secondary);
}

/* Résumé des avis : note moyenne, « /10 » et nombre d'avis au MÊME corps que
   la synthèse et les sous-notes (16px) — seule la graisse distingue la note.
   Auparavant le bloc empilait quatre tailles (32 / 18 / 16 / 14). */
.camping-detail-avis__note strong {
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-black);
}

.camping-detail-avis__note span {
  font-size: var(--font-size-16, 16px);
}

.camping-detail-avis__nb {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  color: var(--color-secondary);
}

.camping-detail-avis__sous-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-25);
  margin: var(--space-15) 0 0;
  padding: 0;
  list-style: none;
  max-width: 480px;
}

.camping-detail-avis__sous-notes li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-10);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  color: var(--color-secondary);
}

.camping-detail-avis__synthese {
  margin: var(--space-15) 0 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  line-height: 1.5;
  color: var(--color-secondary);
}

.camping-detail-avis__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-15);
  margin-top: var(--space-20);
  align-items: start;
}

/* Carte avis : reprend le liseré dégradé des cartes points forts, en pleine
   largeur de colonne. */
.camping-review-card {
  display: flex;
  width: 100%;
  gap: var(--space-5);
}

/* display:flex ci-dessus écraserait le display:none de l'attribut hidden */
.camping-review-card[hidden] {
  display: none;
}

.camping-review-card__titre {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  color: var(--color-secondary);
}

.camping-review-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  width: 100%;
}

.camping-review-card__auteur {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
}

.camping-review-card__badge {
  flex-shrink: 0;
  padding: 2px 10px;
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius-cta);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12, 12px);
  font-weight: var(--font-weight-black);
}

.camping-review-card__date {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12, 12px);
  color: var(--color-secondary);
  opacity: 0.7;
}

.camping-review-card__texte {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
  white-space: normal;
}

.camping-review-card__texte--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.camping-review-card__suite,
.camping-detail-avis__voir-tous {
  align-self: flex-start;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
  cursor: pointer;
}

.camping-detail-avis__voir-tous {
  margin-top: var(--space-15);
  padding: 8px 18px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-cta);
}

.camping-detail-avis__voir-tous:hover,
.camping-detail-avis__voir-tous:focus {
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
}

.camping-detail-avis__vide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-15);
  margin-top: var(--space-15);
}

.camping-detail-avis__vide p {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  color: var(--color-secondary);
}

@media (max-width: 767px) {
  .camping-detail-avis__grid,
  .camping-detail-avis__sous-notes {
    grid-template-columns: 1fr;
  }
}

/* Section touristique : carte insérée sous le H2 du gabarit commun. */
.camping-detail-tourisme__map-wrap {
  width: 100%;
  border-radius: var(--radius-image);
  overflow: hidden;
}

.camping-detail-tourisme__map {
  width: 100%;
  height: 360px;
  background: var(--color-surface-muted, #e9ecef);
}

@media (max-width: 767px) {
  .camping-detail-tourisme__map {
    /* assez haut pour contenir un popup complet (photo 120px + titre +
       descriptif clampé) avec la marge de recadrage de 12px */
    height: 400px;
  }
}

/* Repères : le camping = pastille ronde orange, les lieux = épingle. */
/* Le camping sur la carte tourisme : icône « camping avec dispo » (styles
   posés en ligne dans fiche.v3/tourisme.ejs) ; ici seulement le z-index pour
   rester au-dessus des épingles des lieux. */
.camping-detail-tourisme__camping-pin {
  z-index: 10;
  cursor: pointer;
}

/* Les épingles des lieux (.camping-detail-tourisme__pin) sont entièrement
   stylées en ligne dans fiche.v3/tourisme.ejs — image inline en data-URI,
   aucune dépendance à ce fichier CSS ni à un asset servi. */

/* Popups des lieux : bords arrondis + ombre douce. */
.camping-detail-tourisme__map .maplibregl-popup-content {
  border-radius: var(--radius-card, 15px);
  padding: var(--space-15);
  box-shadow: 0 4px 18px rgba(36, 0, 70, 0.22);
  overflow: hidden;
}

/* Croix de fermeture des popups : la CSS globale des boutons lui donne une
   bordure/fond, on la neutralise (bouton injecté par maplibre). */
.camping-detail-tourisme__map .maplibregl-popup-close-button {
  border: none;
  background: transparent;
  padding: 0 4px;
  line-height: 1;
  font-size: 18px;
  color: var(--color-secondary);
  cursor: pointer;
  box-shadow: none;
  outline: none;
}

.camping-detail-tourisme__map .maplibregl-popup-close-button:hover,
.camping-detail-tourisme__map .maplibregl-popup-close-button:focus {
  border: none;
  background: transparent;
  box-shadow: none;
  opacity: 0.7;
}

.camping-detail-tourisme__popup-img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-image);
  margin-bottom: var(--space-5);
}

.camping-detail-tourisme__popup-title {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  color: var(--color-secondary);
}

.camping-detail-tourisme__popup-meta {
  margin: 2px 0 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12, 12px);
  color: var(--color-primary);
}

.camping-detail-tourisme__popup-text {
  margin: var(--space-5) 0 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12, 12px);
  line-height: 1.4;
  color: var(--color-secondary);
  /* descriptif borné : sans ça un lieu bavard rend le popup plus haut que
     la carte, et le recadrage ne peut plus rien pour lui */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Autres équipements et services : détaché des sections thématiques qui le
   précèdent et du bloc région qui le suit. */
.page-camping-detail .camping-detail-main > .camping-detail-equipment-section {
  margin-top: var(--space-50);
  margin-bottom: var(--space-50);
}

.page-camping-detail .camping-detail-sommaire .table-of-contents {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-camping-detail .camping-detail-hero .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-15);
}

.page-camping-detail .camping-detail-hero__anchors {
  margin-top: 0;
}

.page-camping-detail .guide-nav-table-anchors {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* Fiche camping : le moteur est dans le header / modale ; masquer la carte dupliquée sous le hero */
.page-camping-detail .guide-moteur-wrap .guide-search-card--below-hero {
  display: none !important;
}

/* Comparateur — cartes (Figma 312:20614, CardBusinessCampingHoriz + push price) */
.comparateur-offer-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Pubs inline (forfait 4) — fréquence v2, gabarit ads/ad-main dans la liste v3 */
.comparateur-offer-list .comparateur-inline-ad,
.comparateur-offer-list .sda-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  height: auto;
}

.comparateur-offer-list .sda-main,
.comparateur-offer-list .sda-main .card-sponso {
  cursor: pointer;
}

.comparateur-offer-list .sda-main .card-sponso {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
  border-radius: var(--radius-card, 16px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e8e8e8);
}

.comparateur-offer-list .sda-main .card-sponso.listing {
  gap: 12px;
}

@media (min-width: 768px) {
  .comparateur-offer-list .sda-main,
  .comparateur-offer-list .sda-main.sda-main-banniere {
    height: 201px;
  }

  /* Bannière GIF complète (ex. campings.com) : ne pas forcer 201px / cover */
  .comparateur-offer-list .sda-main.sda-main-banniere,
  .comparateur-offer-list .sda-main.sda-main-editorial {
    height: auto;
  }

  .comparateur-offer-list .sda-main .card-sponso.listing {
    flex-direction: row;
    align-items: stretch;
    height: 201px;
    overflow: hidden;
  }
}

.comparateur-offer-list .sda-main .card-medias {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: var(--radius-image, 12px);
  background: #f3f3f3;
}

@media (min-width: 768px) {
  .comparateur-offer-list .sda-main .card-sponso.listing .card-medias {
    width: 240px;
    height: 100%;
  }
}

.comparateur-offer-list .sda-main .card-medias img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparateur-offer-list .sda-main .ad-header-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comparateur-offer-list .sda-main .card-header .card-title p {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text, #1b1236);
}

.comparateur-offer-list .sda-main .card-body-ads {
  margin: 0;
  padding: 0;
}

.comparateur-offer-list .sda-main .card-body-ads p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #5c5670;
  max-height: 4.2em;
  overflow: hidden;
}

.comparateur-offer-list .sda-main .card-footer .tag-text,
.comparateur-offer-list .sda-main .card-footer .ads-item-url {
  display: none;
}

.comparateur-offer-list .sda-main .card-sponso.listing .card-footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.comparateur-offer-list .sda-main .card-sponso.listing .comparateur-offer__strip-cta.comparateur-ad-cta {
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.comparateur-offer-list .sda-main .card-sponso.listing:hover .comparateur-offer__strip-cta.comparateur-ad-cta,
.comparateur-offer-list .sda-main .card-sponso.listing .comparateur-offer__strip-cta.comparateur-ad-cta:hover,
.comparateur-offer-list .sda-main .card-sponso.listing .comparateur-offer__strip-cta.comparateur-ad-cta:focus-visible {
  background: var(--color-primary-gradient-end, #ff9e00);
  background-color: var(--color-primary-gradient-end, #ff9e00);
  color: #fff;
  border-color: transparent;
  opacity: 1;
  filter: none;
}

@media (min-width: 768px) {
  .comparateur-offer-list .sda-main .card-sponso.listing .card-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin-left: auto;
    align-self: center;
  }

  .comparateur-offer-list .sda-main .card-sponso.listing .comparateur-offer__strip-cta.comparateur-ad-cta {
    width: auto;
    height: auto;
    min-height: 48px;
    min-width: auto;
    padding: 8px 16px;
    border-radius: 999px;
    margin: 8px 8px 8px 0;
    align-self: auto;
    flex-shrink: 0;
    gap: 0;
  }
}

.comparateur-offer-list .sda-main .card-sponso.banniere .card-footer,
.comparateur-offer-list .sda-main .card-sponso.editorial .card-footer,
.comparateur-offer-list .sda-main .card-sponso.banniere .ad-mer-button,
.comparateur-offer-list .sda-main .card-sponso.editorial .ad-mer-button {
  display: none !important;
}

.comparateur-offer-list .sda-main .card-sponso.banniere,
.comparateur-offer-list .sda-main .card-sponso.editorial {
  /* .card legacy : padding 10px + align-items flex-start → bandeau blanc mobile */
  padding: 0 !important;
  margin: 0;
  overflow: hidden; /* clip coins arrondis */
  height: auto;
  border: none !important; /* annule border 1px #e8e8e8 de .card-sponso */
  background: transparent;
  border-radius: var(--radius-card, 16px);
  align-items: stretch;
  box-shadow: none;
}

.comparateur-offer-list .sda-main .card-sponso.banniere .card-body,
.comparateur-offer-list .sda-main .card-sponso.editorial .card-body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

/* GIF / image bannière entière — pas de crop object-fit:cover */
.comparateur-offer-list .sda-main .card-sponso.banniere img,
.comparateur-offer-list .sda-main .card-sponso.editorial img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: var(--radius-card, 16px);
}

.comparateur-offer-list .adup-inline-block:empty {
  display: none;
}

/*
 * AdUp inline : créa ~970px souvent tronquée dans le main 900px.
 * Ne pas forcer width:100% sur les enfants (ça empêche le scale JS).
 * Le scale est appliqué par fitAdupInlineToContainer (didomi.ejs).
 */
.comparateur-offer-list .adup-inline-block.adjust-inline-adup-add,
.comparateur-offer-list .comparateur-inline-ad--adup.adjust-inline-adup-add,
.adup-inline-block.adjust-inline-adup-add {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  line-height: 0;
  position: relative;
}

.comparateur-offer {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 15px;
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(
      90deg,
      var(--color-primary, #ff6d00),
      var(--color-secondary-light, #9d4edd)
    )
      border-box;
  background-origin: border-box;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

/* Superdeal Box (SEO / admin) : bordure plus marquée */
.comparateur-offer.superdeal {
  border-width: 4px;
  box-shadow: 0 0 0 1px rgba(157, 78, 221, 0.25), 0 6px 18px rgba(235, 112, 57, 0.18);
}

.comparateur-offer__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
}

.comparateur-offer__media {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  margin: 0 auto;
  height: 234px;
  border-radius: var(--radius-image);
  overflow: hidden;
  touch-action: pan-y;
}

.comparateur-offer__media-track {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  width: 100%;
  transform: translateX(0);
  transition: transform 220ms ease;
  will-change: transform;
}

.comparateur-offer__media-img {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-image);
}

.comparateur-offer__media-link {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
}

.comparateur-offer__media-link .comparateur-offer__media-img {
  flex: none;
  width: 100%;
  height: 100%;
}

.comparateur-offer__media-slide--video {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.comparateur-offer__media-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-image);
  background: #240046;
  cursor: pointer;
}

/* Bouton play Figma (player 45×45 + icons player.svg) — même pattern que camping-accommodation-card__play */
.comparateur-offer__media-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  padding: 5px;
  margin: 0;
  border: 0;
  border-radius: 100px;
  background: #240046;
  box-shadow: 0 0 15px 0 rgba(173, 181, 189, 0.9);
  transform: translate(-50%, -50%) scale(1);
  cursor: pointer;
  transition:
    transform 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

@media (hover: hover) {
  .comparateur-offer__media-video-play:hover,
  .comparateur-offer__media:hover .comparateur-offer__media-video-play,
  .comparateur-offer__media-slide--video:hover .comparateur-offer__media-video-play {
    transform: translate(-50%, -50%) scale(1.12);
    background: #3a0a6e;
    box-shadow: 0 4px 18px rgba(36, 0, 70, 0.45);
  }
}

.comparateur-offer__media-video-play:focus-visible {
  outline: 2px solid var(--color-primary, #ff6d00);
  outline-offset: 2px;
}

.comparateur-offer__media-video-play img {
  display: block;
  width: 35px;
  height: 35px;
  object-fit: contain;
  pointer-events: none;
}

.comparateur-offer__media-slide--video.is-playing .comparateur-offer__media-video-play {
  display: none;
}

.comparateur-offer__media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  border-radius: 999px;
  border: 0;
  background: rgba(36, 0, 70, 0.8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.comparateur-offer__media-nav:hover,
.comparateur-offer__media-nav:focus-visible {
  background: rgba(36, 0, 70, 0.95);
  box-shadow: 0 2px 10px rgba(36, 0, 70, 0.4);
  transform: translateY(-50%) scale(1.08);
}

.comparateur-offer__media-nav:active {
  background: rgba(36, 0, 70, 1);
  transform: translateY(-50%) scale(0.96);
}

.comparateur-offer__media-nav[hidden] {
  display: none !important;
}

/* Comparateur mobile / tablette : pagination par points (Figma mobile) */
.page-comparateur .comparateur-offer__media-nav {
  display: none;
}

.page-comparateur .comparateur-offer__media-dots {
  display: flex;
}

.comparateur-offer__media-nav--prev {
  left: 15px;
}

.comparateur-offer__media-nav--next {
  right: 15px;
}

.comparateur-offer__media-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  line-height: 0;
  color: #fff;
}

.comparateur-offer__media-nav-svg {
  display: block;
  width: 24px;
  height: 24px;
}

.comparateur-offer__media-dots {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 162px;
}

.comparateur-offer__media-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  box-sizing: border-box;
  border: 1px solid #fff;
  background: rgba(36, 0, 70, 0.2);
}

.comparateur-offer__media-dot.is-active {
  width: 10px;
  height: 10px;
  border: 0;
  background: #fff;
}

.comparateur-offer__badge-publicite {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  background: rgba(36, 0, 70, 0.8);
  z-index: 2;
}

.comparateur-offer__badge-publicite-icon {
  display: block;
  flex-shrink: 0;
}

.comparateur-offer__badge-publicite-text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: #fff;
  white-space: nowrap;
}

/* Pastille Promo sur la galerie (design Quentin) — haut gauche */
.comparateur-offer__badge-promo {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 10px;
  border-radius: 5px;
  background: #9d4edd;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  line-height: 21px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

.comparateur-offer__badge-publicite ~ .comparateur-offer__badge-promo {
  top: 48px;
  left: 10px;
  right: auto;
}

/* Pastille SUPER DEAL — même gradient orange→violet que les cards SEO */
.comparateur-offer__badge-superdeal {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 4px 14px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--color-primary, #eb7039),
    var(--color-secondary-light, #9d4edd)
  );
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.02em;
  line-height: 18px;
  color: #fff;
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
}

.comparateur-offer__badge-publicite ~ .comparateur-offer__badge-superdeal {
  top: 48px;
}

.comparateur-offer__column {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comparateur-offer__header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  width: 100%;
}

.comparateur-offer__title-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  max-width: 100%;
}

.comparateur-offer__title {
  margin: 0;
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-black);
  line-height: 27px;
  color: var(--color-secondary);
}

.comparateur-offer__title-link {
  color: inherit;
  text-decoration: none;
}

.comparateur-offer__title-link:hover {
  text-decoration: underline;
}

.comparateur-offer__stars {
  display: flex;
  gap: 2px;
  align-items: center;
  flex: 0 0 auto;
  color: var(--color-primary);
}

.comparateur-offer__star {
  font-size: 15px;
  line-height: 1;
  color: var(--color-primary);
}

.comparateur-offer__location {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
}

.comparateur-offer__location-link {
  color: inherit;
  text-decoration: none;
}

.comparateur-offer__location-link:hover {
  text-decoration: underline;
}

.comparateur-offer__tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.comparateur-offer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  align-content: flex-start;
  min-width: 0;
  flex: 1 1 auto;
  max-height: 49px;
  overflow: hidden;
}

.comparateur-offer__tag,
.comparateur-offer__acc-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 5px;
}

/* Comparateur : fond gris clair sur les critères camping */
.comparateur-offer__tag {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

/* Comparateur : fond gris clair conservé uniquement pour l'hébergement */
.comparateur-offer__acc-tag {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

.comparateur-offer__tag-icon {
  flex-shrink: 0;
  display: block;
}

.comparateur-offer__tag-label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
  white-space: nowrap;
}

.comparateur-offer__description {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  margin: 0;
}

.comparateur-offer__description-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comparateur-offer.is-description-expanded .comparateur-offer__description-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.comparateur-offer__description-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  padding: 0;
  border: 1px solid #878787;
  border-radius: 50%;
  background: transparent;
  color: #878787;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  cursor: pointer;
}

.comparateur-offer__description-toggle:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.comparateur-offer__description-toggle[hidden] {
  display: none !important;
}

.comparateur-offer__bottom {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: auto;
  min-height: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* Camping sans offre aux dates : laius + CTA fiche (pas d’encart hébergement) */
.comparateur-offer__no-offer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.comparateur-offer__no-offer-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.comparateur-offer__no-offer-message {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 15px;
  font-weight: var(--font-weight-black, 700);
  line-height: 18px;
  color: var(--color-secondary, #212529);
}

.comparateur-offer__no-offer-description {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 20px;
  color: #495057;
}

.comparateur-offer__no-offer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  min-height: 40px;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--color-primary, #ff6b00);
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
}

.comparateur-offer__no-offer-cta:hover {
  color: #fff;
}

.comparateur-offer__merchant {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 18px;
  color: #adb5bd;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.superdeal .comparateur-offer__superdeal-admin {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 20px;
  margin: 8px 0 0;
  padding: 8px 0 0;
  font-family: var(--font-family-secondary);
  font-size: 12px;
  color: #212529;
  text-align: right;
}

body.superdeal .comparateur-offer__superdeal-admin-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

body:not(.superdeal) .comparateur-offer__superdeal-admin {
  display: none;
}

/* Bandeau tarif Figma : gris, séparateur, prix, CTA orange droite */
a.comparateur-offer__strip {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.comparateur-offer__strip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  background: #e9ecef;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.comparateur-offer__strip-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
  padding: 15px;
}

.comparateur-offer__strip-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 0;
  min-width: 0;
  justify-content: flex-start;
  align-items: flex-start;
}

.comparateur-offer__accommodation-title {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: 21px;
  color: var(--color-secondary);
}

.comparateur-offer__accommodation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.comparateur-offer__strip-sep {
  display: none;
}

.comparateur-offer__strip-price {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "dates price"
    "nights nights";
  align-items: start;
  justify-content: stretch;
  gap: 5px 10px;
  padding-right: 0;
  min-width: 0;
}

.comparateur-offer__dates,
.comparateur-hebergement-card__dates {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-alias-size-18, 18px);
  font-style: normal;
  font-weight: var(--font-weight-alias-weight-bold, 700);
  line-height: var(--font-line-height-alias-line-height-27, 27px);
  color: var(--text-grayscale-grayscale-800, #343a40);
  white-space: nowrap;
}

.comparateur-offer__dates {
  text-align: right;
}

.comparateur-hebergement-card__dates {
  text-align: left;
}

.comparateur-offer__dates {
  grid-area: dates;
}

.comparateur-offer__price-line {
  grid-area: price;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.comparateur-offer__amount {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: 21px;
  color: var(--color-secondary);
}

.comparateur-offer__strike-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.comparateur-offer__strike {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
  text-decoration: line-through;
}

.comparateur-offer__discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 5px;
  border-radius: 5px;
  background: #9d4edd;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  line-height: 21px;
  color: #fff;
}

.comparateur-offer__nights-line {
  grid-area: nights;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: 21px;
  color: var(--color-secondary);
  text-align: left;
  white-space: nowrap;
}

.comparateur-offer__nights-bold {
  font-weight: var(--font-weight-bold);
}

.comparateur-offer__nights-sep,
.comparateur-offer__per-night {
  font-weight: var(--font-weight-regular);
}

.comparateur-offer__strip-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 35px;
  padding: 5px 15px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  flex-shrink: 0;
  gap: 5px;
  text-decoration: none;
}

.comparateur-offer__strip-cta-text--desktop {
  display: none;
}

.comparateur-offer__strip-cta-text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 27px;
  color: #fff;
  white-space: nowrap;
}

.comparateur-offer__strip-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.comparateur-offer__strip-cta-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

@media (min-width: 992px) {
  /* Hauteur carte : rangée 235px (image) + ligne marchand sous la zone grise */
  .comparateur-offer {
    height: 290px;
    max-height: 290px;
    overflow: hidden;
    gap: 5px;
  }

  /* Admin Superdeal : laisser de la place pour les checkboxes sous le marchand */
  body.superdeal .comparateur-offer {
    height: auto;
    max-height: none;
    overflow: visible;
    padding-bottom: 12px;
  }

  body.superdeal .comparateur-offer__superdeal-admin {
    flex-shrink: 0;
    margin-top: 4px;
  }

  .comparateur-offer__row {
    flex: 0 0 235px;
    flex-direction: row;
    align-items: stretch;
    gap: 15px;
    height: 235px;
    min-height: 235px;
    max-height: 235px;
  }

  .comparateur-offer__media {
    margin: 0;
    width: 240px;
    max-width: 240px;
    height: 235px;
    min-height: 235px;
    max-height: 235px;
    flex-shrink: 0;
    align-self: stretch;
  }

  /* Comparateur desktop : flèches (Figma), pas de points */
  .page-comparateur .comparateur-offer__media-nav {
    display: flex;
  }

  .page-comparateur .comparateur-offer__media-dots {
    display: none;
  }

  .comparateur-offer__column {
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    height: 235px;
    min-height: 235px;
    max-height: 235px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .comparateur-offer__header {
    gap: 4px;
    flex-shrink: 0;
  }

  .comparateur-offer__tags-row {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .comparateur-offer__description {
    flex-shrink: 0;
  }

  /* Bandeau gris calé en bas de la colonne (= bas de l’image) */
  .comparateur-offer__bottom {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: auto;
    justify-content: flex-end;
  }

  .comparateur-offer__no-offer {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }

  .comparateur-offer__no-offer-copy {
    flex: 1 1 auto;
    min-width: 0;
  }

  .comparateur-offer__no-offer-cta {
    flex: 0 0 auto;
    align-self: flex-end;
  }

  .comparateur-offer__strip {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0 0 0 15px;
    margin-top: 0;
    min-height: 78px;
    box-sizing: border-box;
  }

  .comparateur-offer__strip-content {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
    padding: 0;
    min-width: 0;
    min-height: 78px;
    align-self: stretch;
  }

  /* Marchand sous la rangée image, aligné colonne droite (Figma) */
  .comparateur-offer__merchant {
    flex: 0 0 auto;
    margin: 0;
    margin-left: 255px;
    padding: 0;
    text-align: right;
  }

  .comparateur-offer__strip-cta {
    width: auto;
    min-height: 48px;
    min-width: auto;
    padding: 8px 16px;
    border-radius: 999px;
    margin: 8px 8px 8px 0;
    align-self: center;
    flex-shrink: 0;
    gap: 0;
  }

  .comparateur-offer__strip-cta-text--mobile {
    display: none;
  }

  .comparateur-offer__strip-cta-text--desktop {
    display: inline;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-bold);
    line-height: 18px;
    white-space: nowrap;
  }

  .comparateur-offer__strip-cta-icon {
    display: none;
  }

  .comparateur-offer__strip-left {
    flex: 1 1 auto;
    padding: 8px 0;
    min-width: 0;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
  }

  .comparateur-offer__strip-sep {
    display: block;
    flex-shrink: 0;
    width: 1px;
    align-self: flex-start;
    height: 72px;
    margin-top: 8px;
    border-radius: 100px;
    background: #adb5bd;
  }

  /* Bloc prix : centré H+V dans la zone (avec ou sans promo) */
  .comparateur-offer__strip-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 1 auto;
    padding: 8px 15px;
    min-width: 0;
    align-self: stretch;
    grid-template-columns: unset;
    grid-template-areas: unset;
  }

  .comparateur-offer__dates {
    display: none;
  }

  .comparateur-offer__price-line {
    display: flex;
    grid-area: unset;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .comparateur-offer__nights-line {
    grid-area: unset;
    justify-content: center;
    text-align: center;
    width: auto;
    font-size: 12px;
    line-height: 18px;
  }

  .comparateur-offer.is-description-expanded {
    height: auto;
    max-height: none;
    overflow: visible;
    gap: 8px;
  }

  .comparateur-offer.is-description-expanded .comparateur-offer__row {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
  }

  .comparateur-offer.is-description-expanded .comparateur-offer__column {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .comparateur-offer.is-description-expanded .comparateur-offer__merchant {
    margin-left: 0;
  }
}

/* Comparateur — bascule Guide (hébergement) / Camping */
.comparateur-results__panel--hidden {
  display: none !important;
}

html[data-comparateur-initial-view='guide'] .comparateur-results__panel[data-comparateur-panel='camping'] {
  display: none !important;
}

html[data-comparateur-initial-view='guide'] .comparateur-results__panel[data-comparateur-panel='guide'] {
  display: block !important;
}

html[data-comparateur-initial-view='guide'] .comparateur-sticky-bar__tab[data-comparateur-sticky-tab='camping'] {
  background: transparent;
  color: var(--color-text-inverse);
}

html[data-comparateur-initial-view='guide'] .comparateur-sticky-bar__tab[data-comparateur-sticky-tab='guide'] {
  background: var(--color-surface);
  color: var(--color-primary);
}

/* Comparateur — cartes hébergement (Figma 458:14387) */
.comparateur-hebergement-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.comparateur-hebergement-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 15px;
  background: var(--color-surface);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-card);
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.comparateur-hebergement-card__row {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.comparateur-hebergement-card__media {
  position: relative;
  width: 100%;
  height: 234px;
  border-radius: var(--radius-image);
  overflow: hidden;
  flex-shrink: 0;
  touch-action: pan-y;
}

.comparateur-hebergement-card__media-track {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  width: 100%;
  transform: translateX(0);
  transition: transform 220ms ease;
}

.comparateur-hebergement-card__media-img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparateur-hebergement-card__media--single .comparateur-hebergement-card__media-nav,
.comparateur-hebergement-card__media--single .comparateur-hebergement-card__media-dots,
.comparateur-media-slider--single .comparateur-hebergement-card__media-nav,
.comparateur-media-slider--single .comparateur-hebergement-card__media-dots,
.comparateur-media-slider--single .comparateur-offer__media-nav,
.comparateur-media-slider--single .comparateur-offer__media-dots {
  display: none;
}

.comparateur-hebergement-card__media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 999px;
  background: rgba(36, 0, 70, 0.8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.comparateur-hebergement-card__media-nav:hover,
.comparateur-hebergement-card__media-nav:focus-visible {
  background: rgba(36, 0, 70, 0.95);
  box-shadow: 0 2px 10px rgba(36, 0, 70, 0.4);
  transform: translateY(-50%) scale(1.08);
}

.comparateur-hebergement-card__media-nav:active {
  background: rgba(36, 0, 70, 1);
  transform: translateY(-50%) scale(0.96);
}

.comparateur-hebergement-card__media-nav[hidden] {
  display: none !important;
}

.comparateur-hebergement-card__media-nav--prev {
  left: 15px;
}

.comparateur-hebergement-card__media-nav--next {
  right: 15px;
}

.comparateur-hebergement-card__media-dots {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  align-items: center;
}

.comparateur-hebergement-card__media-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid #fff;
  background: rgba(36, 0, 70, 0.2);
}

.comparateur-hebergement-card__media-dot.is-active {
  width: 10px;
  height: 10px;
  border: 0;
  background: #fff;
}

.comparateur-hebergement-card__badge-publicite {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  background: rgba(36, 0, 70, 0.8);
}

.comparateur-hebergement-card__badge-publicite-text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: 21px;
  color: #fff;
}

.comparateur-hebergement-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.comparateur-hebergement-card__head {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.comparateur-hebergement-card__title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-black);
  line-height: 27px;
  color: var(--color-secondary);
}

.comparateur-hebergement-card__camping-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.comparateur-hebergement-card__camping-name {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  line-height: 27px;
  color: var(--color-secondary);
  text-decoration: none;
}

a.comparateur-hebergement-card__camping-name {
  cursor: pointer;
}

a.comparateur-hebergement-card__camping-name:hover {
  text-decoration: underline;
}

.comparateur-hebergement-card__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-primary);
}

.comparateur-hebergement-card__star {
  font-size: 15px;
  line-height: 1;
}

.comparateur-hebergement-card__location {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: 21px;
  color: var(--color-secondary);
}

.comparateur-hebergement-card__location-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.comparateur-hebergement-card__location-link:hover {
  text-decoration: underline;
}

.comparateur-hebergement-card__tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.comparateur-hebergement-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}

.comparateur-hebergement-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  min-height: 27px;
  border: 1px solid var(--color-border-light);
  border-radius: 5px;
  background: var(--color-surface-alt);
}

.comparateur-hebergement-card__tag-label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: 21px;
  color: var(--color-secondary);
  white-space: nowrap;
}

.comparateur-hebergement-card__tag-icon {
  display: block;
  flex-shrink: 0;
}

.comparateur-hebergement-card__specs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.comparateur-hebergement-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.comparateur-hebergement-card__spec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  min-height: 27px;
  border: 1px solid var(--color-border-light);
  border-radius: 5px;
  background: var(--color-surface-alt);
}

.comparateur-hebergement-card__spec-label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: 21px;
  color: var(--color-secondary);
}

.comparateur-hebergement-card__read-more {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: 21px;
  color: var(--color-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.comparateur-hebergement-card__read-more:hover {
  text-decoration: underline;
}

.comparateur-hebergement-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.comparateur-hebergement-card__price-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  background: #e9ecef;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.comparateur-hebergement-card__price-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 15px;
  min-width: 0;
}

.comparateur-hebergement-card__price-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
}

.comparateur-hebergement-card__price-specs--extra[hidden] {
  display: none !important;
}

.comparateur-hebergement-card__price-specs--extra-tags {
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
}

.comparateur-hebergement-card__price-specs--extra-tags .comparateur-hebergement-card__spec {
  flex: 0 0 auto;
  max-width: 100%;
}

.comparateur-hebergement-card:not(.is-hebergement-details-expanded)
  .comparateur-hebergement-card__price-specs--extra-tags {
  display: none;
}

.comparateur-hebergement-card.is-hebergement-details-expanded
  .comparateur-hebergement-card__price-specs--extra-tags {
  display: flex;
}

.comparateur-hebergement-card__description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
}

.comparateur-hebergement-card__description-text {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comparateur-hebergement-card.is-hebergement-description-expanded .comparateur-hebergement-card__description-text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.comparateur-hebergement-card__description-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.comparateur-hebergement-card__description-actions .comparateur-hebergement-card__read-more-btn {
  line-height: 18px;
}

.comparateur-hebergement-card__description-actions[hidden] {
  display: none !important;
}

.comparateur-hebergement-card__read-more-btn {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.comparateur-hebergement-card__read-more-btn:hover {
  color: var(--color-primary);
}

.comparateur-hebergement-card__read-more-btn[hidden] {
  display: none !important;
}

a.comparateur-hebergement-card__price-booking {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.comparateur-hebergement-card__price-booking {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.comparateur-hebergement-card__price-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 0 15px 15px;
  box-sizing: border-box;
}

.comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__price-content {
  padding-top: 10px;
}

.comparateur-hebergement-card__price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.comparateur-hebergement-card__amount {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: 21px;
  color: var(--color-secondary);
}

.comparateur-hebergement-card__strike-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.comparateur-hebergement-card__strike {
  font-size: var(--font-size-14);
  line-height: 21px;
  color: var(--color-secondary);
  text-decoration: line-through;
}

.comparateur-hebergement-card__discount {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 5px;
  border-radius: 5px;
  background: #9d4edd;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  line-height: 21px;
  color: #fff;
}

.comparateur-hebergement-card__nights-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  font-size: var(--font-size-14);
  line-height: 21px;
  color: var(--color-secondary);
}

.comparateur-hebergement-card__stay-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 10px;
  width: 100%;
}

.comparateur-hebergement-card__nights-bold {
  font-weight: var(--font-weight-bold);
}

.comparateur-hebergement-card__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
}

.comparateur-hebergement-card__cta-text {
  display: none;
}

.comparateur-hebergement-card__merchant {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 18px;
  color: #adb5bd;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .comparateur-hebergement-card {
    height: 310px;
    max-height: 310px;
    overflow: hidden;
    gap: 5px;
  }

  .comparateur-hebergement-card__row {
    flex: 0 0 255px;
    flex-direction: row;
    align-items: flex-start;
    height: 255px;
    min-height: 255px;
    max-height: 255px;
  }

  .comparateur-hebergement-card__media {
    width: 240px;
    max-width: 240px;
    height: 255px;
    min-height: 255px;
    max-height: 255px;
    flex-shrink: 0;
    align-self: flex-start;
  }

  .page-comparateur .comparateur-hebergement-card__media-nav {
    display: flex;
  }

  .page-comparateur .comparateur-hebergement-card__media-dots {
    display: none;
  }

  .comparateur-hebergement-card__body {
    align-self: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 255px;
    max-height: 255px;
    height: 255px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: hidden;
  }

  .comparateur-hebergement-card__main {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    flex-shrink: 0;
    overflow: visible;
  }

  .comparateur-hebergement-card__head {
    gap: 2px;
    flex-shrink: 0;
  }

  .comparateur-hebergement-card__location {
    flex-shrink: 0;
  }

  .comparateur-hebergement-card__title {
    font-size: var(--font-size-22);
    line-height: 27px;
  }

  .comparateur-hebergement-card__tags-row {
    margin-bottom: 0;
    flex-shrink: 0;
    gap: 5px;
  }

  .comparateur-hebergement-card__specs-row {
    flex-shrink: 0;
    gap: 5px;
  }

  .comparateur-hebergement-card__bottom {
    margin-top: 0;
    flex: 1 1 0;
    min-height: 0;
    flex-shrink: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  .comparateur-hebergement-card__price-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "details cta"
      "price cta";
    align-items: stretch;
  }

  .comparateur-hebergement-card__price-details {
    grid-area: details;
    padding: 8px 15px 0;
    gap: 4px;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
  }

  .comparateur-hebergement-card:not(.is-hebergement-details-expanded) .comparateur-hebergement-card__price-shell {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    align-items: stretch;
    grid-template-rows: 1fr auto;
  }

  .comparateur-hebergement-card:not(.is-hebergement-details-expanded) .comparateur-hebergement-card__price-details {
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
  }

  .comparateur-hebergement-card:not(.is-hebergement-details-expanded) .comparateur-hebergement-card__description {
    flex: 0 0 auto;
    min-height: 0;
  }

  .comparateur-hebergement-card:not(.is-hebergement-details-expanded) .comparateur-hebergement-card__description-actions {
    margin-bottom: 21px;
  }

  .comparateur-hebergement-card:not(.is-hebergement-details-expanded).is-description-clamped
    .comparateur-hebergement-card__description-text {
    min-height: 21px;
  }

  .comparateur-hebergement-card:not(.is-hebergement-details-expanded) .comparateur-hebergement-card__cta {
    align-self: center;
  }

  .comparateur-hebergement-card__price-booking {
    display: contents;
  }

  .comparateur-hebergement-card__price-content {
    grid-area: price;
    flex: unset;
    min-width: 0;
    padding: 8px 15px;
    justify-content: flex-start;
    gap: 4px;
    align-self: end;
  }

  .comparateur-hebergement-card:not(.is-hebergement-details-expanded) .comparateur-hebergement-card__price-content {
    align-self: end;
    padding: 0 15px 8px;
  }

  .comparateur-hebergement-card__cta {
    grid-area: cta;
    width: auto;
    min-width: auto;
    min-height: 48px;
    height: auto;
    align-self: center;
    padding: 8px 16px;
    gap: 0;
    margin: 8px 8px 8px 0;
    border-radius: 999px;
  }

  .comparateur-hebergement-card__stay-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 10px;
  }

  .comparateur-hebergement-card__stay-row .comparateur-hebergement-card__dates {
    display: none;
  }

  .comparateur-hebergement-card__stay-row .comparateur-hebergement-card__nights-line {
    font-size: var(--font-size-14);
    line-height: 21px;
  }

  .comparateur-hebergement-card__merchant {
    flex: 0 0 auto;
    margin: 0;
    margin-left: 255px;
    padding: 0;
    text-align: right;
  }

  .comparateur-hebergement-card.is-hebergement-details-expanded {
    height: auto;
    max-height: none;
    overflow: visible;
    gap: 8px;
  }

  .comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__row {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    min-height: 255px;
    overflow: visible;
    align-items: flex-start;
  }

  .comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__media {
    height: 255px;
    min-height: 255px;
    max-height: 255px;
    align-self: flex-start;
  }

  .comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__body {
    height: auto;
    max-height: none;
    min-height: 255px;
    align-self: flex-start;
    overflow: visible;
  }

  .comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__bottom {
    overflow: visible;
    flex: 0 0 auto;
    min-height: auto;
  }

  .comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__price-shell {
    overflow: visible;
    flex: 0 0 auto;
    min-height: auto;
    height: auto;
    grid-template-rows: auto auto;
  }

  .comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__price-details {
    overflow: visible;
    min-height: auto;
    height: auto;
  }

  .comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__description-text {
    min-height: 0;
    max-height: none;
  }

  .comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__price-content {
    align-self: stretch;
    flex-shrink: 0;
    padding-top: 10px;
  }

  .comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__merchant {
    margin-left: 255px;
  }
}

@media (max-width: 991px) {
  .page-comparateur .comparateur-hebergement-card__media-nav {
    display: none;
  }

  .page-comparateur .comparateur-hebergement-card__media-dots {
    display: flex;
  }

  /* Cartes hébergement mobile — Figma 312:18000 */
  .comparateur-hebergement-card {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .comparateur-hebergement-card__row {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .comparateur-hebergement-card__body {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .comparateur-hebergement-card__bottom {
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);
  }

  .comparateur-hebergement-card__price-shell {
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .comparateur-hebergement-card__price-booking {
    flex-direction: column;
  }

  .comparateur-hebergement-card__price-content {
    padding: 15px;
  }

  .comparateur-hebergement-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 45px;
    padding: 10px 15px;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-sizing: border-box;
  }

  .comparateur-hebergement-card__cta-text {
    display: inline;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-regular);
    line-height: 27px;
    color: #fff;
    white-space: nowrap;
  }

  .comparateur-hebergement-card__cta-icon {
    display: flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
}

/* Cartes camping mobile (onglet Camping) — Figma 394:11338 (vertical) */
@media (max-width: 767px) {
  .page-comparateur .comparateur-offer {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 20px;
    box-shadow: 0 0 7.5px #e9ecef;
    box-sizing: border-box;
  }

  .page-comparateur .comparateur-offer__row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 15px;
  }

  .page-comparateur .comparateur-offer__media {
    flex: none;
    width: 100%;
    max-width: 100%;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    margin: 0;
    align-self: stretch;
  }

  .page-comparateur .comparateur-offer__column {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    gap: 15px;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  .page-comparateur .comparateur-offer__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    flex-shrink: 0;
  }

  .page-comparateur .comparateur-offer__title-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    max-width: 100%;
  }

  .page-comparateur .comparateur-offer__title {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    font-size: var(--font-size-20);
    line-height: 21px;
  }

  .page-comparateur .comparateur-offer__stars {
    flex: 0 0 auto;
  }

  .page-comparateur .comparateur-offer__location {
    width: 100%;
    font-size: var(--font-size-14);
    line-height: 21px;
    color: var(--color-text-muted, #6c757d);
  }

  .page-comparateur .comparateur-offer__tags-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    flex-shrink: 0;
    margin-top: calc(-1 * var(--space-10));
  }

  .page-comparateur .comparateur-offer__tags {
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: hidden;
    gap: 5px;
    max-height: 49px;
  }

  .page-comparateur .comparateur-offer__tags::after {
    content: none;
  }

  .page-comparateur .comparateur-offer__strip {
    flex-shrink: 0;
    margin-top: 0;
    overflow: visible;
  }

  .page-comparateur .comparateur-offer__accommodation-title {
    font-size: var(--font-size-18);
    line-height: 21px;
  }

  /* Prix mobile — Figma : dates + nuits à gauche, promo + prix à droite */
  .page-comparateur .comparateur-offer__dates {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: 21px;
    text-align: left;
  }

  .page-comparateur .comparateur-offer__strip-price {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "dates price"
      "nights price";
    gap: 5px 10px;
  }

  .page-comparateur .comparateur-offer__price-line {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 5px;
    grid-area: price;
  }

  .page-comparateur .comparateur-offer__strike-wrap {
    display: contents;
  }

  .page-comparateur .comparateur-offer__discount {
    order: -1;
  }

  .page-comparateur .comparateur-offer__amount {
    font-size: 22px;
    line-height: 27px;
  }

  .page-comparateur .comparateur-offer__nights-line {
    grid-area: nights;
    justify-content: flex-start;
    text-align: left;
    width: auto;
  }

  .page-comparateur .comparateur-offer__strip-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 15px;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    gap: 10px;
  }

  .page-comparateur .comparateur-offer__strip-cta-text--mobile {
    display: inline;
  }

  .page-comparateur .comparateur-offer__strip-cta-text--desktop {
    display: none;
  }

  .page-comparateur .comparateur-offer__strip-cta-icon {
    display: flex;
  }

  .page-comparateur .comparateur-offer__merchant {
    margin: 0;
    padding: 0;
    text-align: right;
    color: #adb5bd;
  }

  /* Cartes hébergement (onglet Hébergements) — mêmes règles mobile que camping (Figma 312:18000) */
  .page-comparateur .comparateur-hebergement-card {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 20px;
    box-shadow: 0 0 7.5px #e9ecef;
    box-sizing: border-box;
  }

  .page-comparateur .comparateur-hebergement-card__row {
    flex: none;
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 15px;
  }

  .page-comparateur .comparateur-hebergement-card__media {
    height: 200px;
    max-height: 200px;
    flex-shrink: 0;
  }

  .page-comparateur .comparateur-hebergement-card__body {
    flex: none;
    width: 100%;
    min-height: 0;
    max-height: none;
    gap: 15px;
    overflow: visible;
  }

  .page-comparateur .comparateur-hebergement-card__main {
    flex-shrink: 0;
    min-height: 0;
    overflow: visible;
  }

  .page-comparateur .comparateur-hebergement-card__head {
    flex-shrink: 0;
  }

  .page-comparateur .comparateur-hebergement-card__tags-row {
    display: none;
  }

  .page-comparateur .comparateur-hebergement-card__bottom {
    flex-shrink: 0;
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .page-comparateur .comparateur-hebergement-card__price-shell {
    flex-direction: column;
    align-items: stretch;
    background: #e9ecef;
    border-radius: var(--radius-card);
    overflow: hidden;
    gap: 0;
  }

  .page-comparateur .comparateur-hebergement-card__price-details {
    padding: 15px;
    gap: 15px;
  }

  .page-comparateur .comparateur-hebergement-card__price-booking {
    flex-direction: column;
    align-items: stretch;
  }

  .page-comparateur .comparateur-hebergement-card__price-content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "price price"
      "stay stay";
    gap: 5px 10px;
    padding: 0 15px 15px;
  }

  .page-comparateur .comparateur-hebergement-card__stay-row {
    grid-area: stay;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
  }

  .page-comparateur .comparateur-hebergement-card__stay-row .comparateur-hebergement-card__dates {
    margin: 0;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: 21px;
    text-align: left;
  }

  .page-comparateur .comparateur-hebergement-card__price-line {
    grid-area: price;
    justify-content: flex-start;
    justify-self: start;
  }

  .page-comparateur .comparateur-hebergement-card__stay-row .comparateur-hebergement-card__nights-line {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    margin-left: 0;
  }

  .page-comparateur .comparateur-hebergement-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 15px;
    gap: 10px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-sizing: border-box;
  }

  .page-comparateur .comparateur-hebergement-card__cta-text {
    display: inline;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-regular);
    line-height: 27px;
    color: #fff;
    white-space: nowrap;
  }

  .page-comparateur .comparateur-hebergement-card__cta-icon {
    display: flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .page-comparateur .comparateur-hebergement-card.is-hebergement-details-expanded {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .page-comparateur .comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__row,
  .page-comparateur .comparateur-hebergement-card.is-hebergement-details-expanded .comparateur-hebergement-card__body {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .page-comparateur .comparateur-hebergement-card__merchant {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    text-align: right;
    color: #adb5bd;
  }
}

/* Desktop hébergement : même CTA « Voir l’offre » que le mode camping */
@media (min-width: 992px) {
  .comparateur-hebergement-card__cta-text {
    display: inline;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-bold);
    line-height: 18px;
    color: #fff;
    white-space: nowrap;
  }

  .comparateur-hebergement-card__cta-icon {
    display: none;
  }
}

/* Comparateur tablette (iPad mini/air): même moteur que iPad Pro, sans bouton filtre en haut */
@media (min-width: 768px) and (max-width: 991px) {
  .page-comparateur .header {
    height: var(--header-height-desktop);
  }

  .page-comparateur .header .container,
  .page-comparateur .header .header__inner {
    height: 100%;
    min-height: 0;
    align-items: center;
  }

  .page-comparateur .header .header__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: var(--space-10);
  }

  .page-comparateur .header__logo-wrap {
    display: flex;
    align-items: center;
    align-self: center;
    height: auto;
    min-height: 0;
    margin-top: 0;
    grid-template-columns: unset;
    grid-template-rows: unset;
  }

  .page-comparateur .header__logo-wrap a,
  .page-comparateur .header__logo-wrap .header__burger-trigger {
    grid-column: unset;
    grid-row: unset;
    justify-self: unset;
    align-self: center;
  }

  .page-comparateur .header__search {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0 var(--space-20);
    justify-content: center;
  }

  .page-comparateur .header__search .guide-search-header-mobile {
    display: none !important;
  }

  .page-comparateur .header__search .search-results-bar {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: var(--header-search-gap);
    width: auto;
    max-width: 100%;
  }

  .page-comparateur
    .header__search
    .search-results-bar
    .search-form.search-form--expanded {
    min-width: var(--header-search-form-width);
    width: auto;
  }

  .page-comparateur .header__search .search-results-bar__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }
}

/* Comparateur / superdeals : header fixe au scroll (sticky cassé par overflow-x:hidden sur html/body) */
@media (max-width: 767px) {
  :is(.page-comparateur, .page-superdeals) #main {
    position: relative;
    padding-top: var(--comparateur-map-overlay-top);
  }

  :is(.page-comparateur, .page-superdeals) #main > .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 200;
    background: var(--color-secondary, #240046);
    border-bottom: none;
    box-sizing: border-box;
    transition: transform 0.28s ease-in-out;
    will-change: transform;
  }

  :is(.page-comparateur, .page-superdeals) #main > .header.header--scroll-hidden {
    transform: translateY(-100%);
  }

  /* Scroll up mobile : logo hors écran, seul le moteur (burger + destination + filtre) reste visible.
     Fallback 85px ≈ 110px (haut moteur) − 25px (= padding-bottom) pour équilibrer haut/bas. */
  :is(.page-comparateur, .page-superdeals) #main > .header.header--scroll-compact:not(.header--scroll-hidden) {
    transform: translateY(calc(-1 * var(--header-scroll-compact-offset, 85px)));
  }

  :is(.page-comparateur, .page-superdeals) #main > .header.header--scroll-compact:not(.header--scroll-hidden) .header__logo-wrap > a {
    pointer-events: none;
    visibility: hidden;
  }

  /* Layout SEO (ville/région, fiche, hub, mag…) : header frère de #main */
  :is(.page-camping-detail, .page-hub, .page-mag, .seo) > .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 200;
    background: var(--color-secondary, #240046);
    border-bottom: none;
    box-sizing: border-box;
    transition: transform 0.28s ease-in-out;
    will-change: transform;
  }

  :is(.page-camping-detail, .page-hub, .page-mag, .seo) > .header.header--scroll-hidden {
    transform: translateY(-100%);
  }

  /* Scroll up : bandeau compact (moteur seul) */
  :is(.page-camping-detail, .page-hub, .page-mag, .seo) > .header.header--scroll-compact:not(.header--scroll-hidden) {
    transform: translateY(calc(-1 * var(--header-scroll-compact-offset, 85px)));
  }

  :is(.page-camping-detail, .page-hub, .page-mag, .seo) > .header.header--scroll-compact:not(.header--scroll-hidden) .header__logo-wrap > a {
    pointer-events: none;
    visibility: hidden;
  }

  /* Compense le header fixe ; !important pour gagner sur body.seo.v3 #main { padding-top: 0 } et mag padding:0 */
  :is(body.seo.v3, body.page-hub, body.page-mag) #main {
    padding-top: var(--comparateur-map-overlay-top) !important;
  }
}

@media (min-width: 768px) {
  :is(.page-comparateur, .page-superdeals) #main {
    position: relative;
    padding-top: var(--header-height-desktop);
  }

  :is(.page-comparateur, .page-superdeals) #main > .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 200;
    background: var(--color-secondary, #240046);
    height: var(--header-height-desktop);
    border-bottom: none;
    box-sizing: border-box;
    transition: transform 0.28s ease-in-out;
    will-change: transform;
  }

  /* Recherche + Super Deals desktop : header disparaît au scroll bas / réapparaît au scroll haut */
  :is(.page-comparateur, .page-superdeals) #main > .header.header--scroll-hidden {
    transform: translateY(-100%);
  }

  /* Layout SEO (ville/région, fiche, hub, mag…) : header fixe + hide au scroll bas */
  :is(.page-camping-detail, .page-hub, .page-mag, .seo) > .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 200;
    background: var(--color-secondary, #240046);
    height: var(--header-height-desktop);
    border-bottom: none;
    box-sizing: border-box;
    transition: transform 0.28s ease-in-out;
    will-change: transform;
  }

  :is(.page-camping-detail, .page-hub, .page-mag, .seo) > .header.header--scroll-hidden {
    transform: translateY(-100%);
  }

  :is(body.seo.v3, body.page-hub, body.page-mag) #main {
    padding-top: var(--header-height-desktop) !important;
  }

  :is(.page-comparateur, .page-superdeals) #main > .header .container,
  :is(.page-comparateur, .page-superdeals) #main > .header .header__inner {
    height: 100%;
    min-height: 0;
    align-items: center;
  }

  :is(.page-comparateur, .page-superdeals) #main > .header .header__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: var(--space-10);
  }

  :is(.page-comparateur, .page-superdeals) #main > .header .header__logo-wrap {
    display: flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    margin-top: 0;
    grid-template-columns: unset;
    grid-template-rows: unset;
    grid-column: unset;
    grid-row: unset;
  }

  :is(.page-comparateur, .page-superdeals) #main > .header .header__logo-wrap a,
  :is(.page-comparateur, .page-superdeals) #main > .header .header__logo-wrap .header__burger-trigger {
    grid-column: unset;
    grid-row: unset;
    justify-self: unset;
    align-self: center;
  }

  :is(.page-comparateur, .page-superdeals) #main > .header .header__search {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0 var(--space-20);
    justify-content: center;
    order: 0;
    flex-basis: auto;
  }

  :is(.page-comparateur, .page-superdeals) #main > .header .header__search .guide-search-header-mobile {
    display: none !important;
  }

  :is(.page-comparateur, .page-superdeals) #main > .header .header__search .search-results-bar {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--header-search-gap);
    width: auto;
    max-width: none;
  }

  :is(.page-comparateur, .page-superdeals)
    #main
    > .header
    .header__search
    .search-results-bar
    .search-form.search-form--expanded {
    min-width: var(--header-search-form-width);
    width: auto;
  }

  :is(.page-comparateur, .page-superdeals, .page-static-legal) #main > .header .header__search .search-results-bar__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }
}

/* Superdeals / marques camping / pages légales : pas de tri ni carte dans le header */
:is(.page-superdeals, .page-camping-brand, .page-static-legal) .header__search .search-results-bar__sort,
:is(.page-superdeals, .page-camping-brand, .page-static-legal) .header__search .search-results-bar__map {
  display: none !important;
}

@media (min-width: 768px) {
  .page-superdeals #main > .header .header__search .search-results-bar {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--header-search-gap);
    width: 100%;
    max-width: min(900px, 100%);
  }

  .page-superdeals #main > .header .header__search .search-results-bar .search-form,
  .page-superdeals #main > .header .header__search .search-results-bar .search-form--classic {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
  }
}

.hebergement-card {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: 1.5;
  font-weight: var(--font-weight-normal);
  color: var(--color-secondary);
}

.camping-detail-hero__location,
.comparateur-title,
.conf-title {
  text-align: center;
}

.camping-detail-hero__title,
.comparateur-title,
.conf-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-black);
  line-height: 1.35;
  padding-bottom: 0.15em;
  overflow: visible;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-camping-detail .camping-detail-hero__title {
  display: inline-block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Camping définitivement fermé : bandeau rouge à la place de l'accroche.
   Pastille pleine, police par défaut du design (primaire), centrée comme
   l'accroche qu'elle remplace. */
.page-camping-detail .camping-detail-ferme {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-10) var(--space-25);
  border-radius: var(--radius-cta, 100px);
  background: #d92d20;
  color: #fff;
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
}

/* body 18 / black — texte sous le titre (fiche camping), interligne 35px */
.page-camping-detail .camping-detail-hero__intro {
  color: var(--text-secondary-secondary-100, #240046);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-style: normal;
  font-weight: var(--font-weight-black);
  line-height: 35px;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

.page-camping-detail .camping-detail-hero__reviews {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  width: 100%;
  max-width: 900px;
  margin: 12px auto 0;
}

.page-camping-detail .camping-detail-hero__reviews-summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary, #240046);
}

.page-camping-detail .camping-detail-hero__reviews-score {
  color: var(--color-primary, #eb7039);
}

.page-camping-detail .camping-detail-hero__reviews-btn {
  margin: 0;
}

.page-camping-detail .camping-detail-hero__stars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  color: var(--color-primary);
}

.camping-detail-hero__gallery img,
.comparateur-block__hero {
  width: 100%;
  border-radius: var(--radius-image);
  object-fit: cover;
}

/* Camping page — image principale Figma 120:7617 : 900 × 537 */
.page-camping-detail .camping-detail-hero__gallery {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-camping-detail .camping-detail-hero__gallery-inner .guide-camping-gallery__viewport {
  position: relative;
}

.page-camping-detail .camping-detail-hero__gallery .guide-camping-gallery__arrow {
  z-index: 5;
}

.page-camping-detail .camping-detail-hero__swiper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 537px;
}

/* Swiper base CSS is not bundled in main.v3.css — keep hero slides horizontal */
.page-camping-detail .camping-detail-hero__swiper .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  box-sizing: content-box;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition-property: transform;
}

.page-camping-detail .camping-detail-hero__swiper .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.page-camping-detail .camping-detail-hero__slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-surface-muted, #e9ecef);
  border-radius: var(--radius-image);
  overflow: hidden;
}

.page-camping-detail .swiper-slide.video .camping-detail-hero__slide-inner {
  background: #000;
}

.page-camping-detail .camping-detail-hero__gallery img,
.page-camping-detail .camping-detail-hero__image,
.page-camping-detail .camping-detail-hero__poster {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-image);
}

.page-camping-detail .camping-detail-hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-image);
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* La vidéo devient visible quand la lecture démarre. Deux déclencheurs :
   - .is-playing sur la slide (mécanique du comparateur) ;
   - .hide posé sur le bouton play par le JS legacy (inline/scroll.js,
     on_play_video_click), qui gère aussi le retour (pause / fin / autre
     vidéo lancée → .hide retiré → la vidéo se re-masque, le poster
     réapparaît). Personne ne pose is-playing sur la fiche : sans le cas
     :has(), la vidéo jouait invisible derrière son poster. */
.page-camping-detail .swiper-slide.video.is-playing .camping-detail-hero__video,
.page-camping-detail .swiper-slide.video:has(.camping-detail-hero__play.hide) .camping-detail-hero__video {
  z-index: 4;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page-camping-detail .camping-detail-hero__play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.page-camping-detail .camping-detail-hero__play.hide,
.page-camping-detail .camping-detail-hero__poster.hide {
  display: none;
}

.page-camping-detail .camping-detail-hero__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 15px rgba(173, 181, 189, 0.85));
}

.page-camping-detail .swiper-slide.video.is-playing .camping-detail-hero__poster,
.page-camping-detail .swiper-slide.video.is-playing .camping-detail-hero__play {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .page-camping-detail .camping-detail-hero__swiper {
    height: auto;
    aspect-ratio: 900 / 537;
  }
}

/* Fiche camping mobile — Figma 146:11636 (393px) */
.camping-detail-hero__slide-counter {
  display: none;
}

@media (max-width: 767px) {
  .page-camping-detail .camping-detail-main {
    padding-left: var(--space-20);
    padding-right: var(--space-20);
    padding-bottom: calc(var(--space-40) + 72px);
  }

  /* Titres de section — alignés à gauche, comme en desktop (le centrage
     mobile des maquettes d'origine rendait mal). */
  .page-camping-detail .camping-detail-main .guide-section__title,
  .page-camping-detail .camping-detail-main .camping-detail-card__title,
  .page-camping-detail .camping-detail-main .camping-detail-region__title,
  .page-camping-detail .camping-detail-main .camping-detail-infos-moment__title,
  .page-camping-detail .camping-detail-main .camping-detail-nearby__title,
  .page-camping-detail .camping-detail-main .camping-detail-accommodations__title,
  .page-camping-detail .camping-detail-main .camping-detail-practical__title,
  .page-camping-detail .camping-detail-main .camping-detail-equipment__main-title,
  .page-camping-detail .camping-detail-main .camping-detail-water-park__title,
  .page-camping-detail .camping-detail-main .camping-detail-beaches__title,
  .page-camping-detail .camping-detail-main .camping-detail-animations__title {
    text-align: left;
  }

  .page-camping-detail .camping-detail-water-park__head,
  .page-camping-detail .camping-detail-beaches__head,
  .page-camping-detail .camping-detail-animations__head {
    justify-content: flex-start;
  }

  .page-camping-detail .camping-detail-accommodations__head,
  .page-camping-detail .camping-detail-practical__head {
    align-items: center;
  }

  .page-camping-detail .camping-detail-main > .section > .container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .page-camping-detail .camping-detail-hero.section {
    padding-top: 0;
  }

  /* card/media/slideshow — Figma 146:11648 */
  .page-camping-detail .camping-detail-hero__gallery {
    max-width: none;
  }

  .page-camping-detail .camping-detail-hero__swiper {
    aspect-ratio: 353 / 230;
    height: auto;
    min-height: 0;
  }

  .page-camping-detail .camping-detail-hero__gallery-inner.guide-camping-gallery,
  .page-camping-detail .camping-detail-hero__gallery-inner .guide-camping-gallery__viewport {
    display: block;
  }

  .page-camping-detail .camping-detail-hero__gallery .guide-camping-gallery__arrow {
    width: 30px;
    height: 30px;
  }

  .page-camping-detail .camping-detail-hero__gallery .guide-camping-gallery__arrow--prev {
    left: 15px;
  }

  .page-camping-detail .camping-detail-hero__gallery .guide-camping-gallery__arrow--next {
    right: 15px;
  }

  .page-camping-detail .camping-detail-hero__gallery .guide-camping-gallery__arrow-icon {
    width: 18px;
    height: 18px;
  }

  .page-camping-detail .camping-detail-hero__gallery .guide-camping-gallery__arrow-icon img {
    width: 18px;
    height: 18px;
  }

  .page-camping-detail .camping-detail-hero__play-icon svg {
    width: 56px;
    height: 56px;
  }

  .camping-detail-hero__slide-counter {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 100px;
    background: #343a40;
    color: #fff;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-21);
    pointer-events: none;
  }

  .camping-detail-hero__slide-counter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 0;
  }

  .camping-detail-hero__slide-counter-text {
    white-space: nowrap;
  }

  /* Galeries horizontales — Figma 253:16261 (250×249, gap 10) */
  .camping-detail-water-park__gallery,
  .camping-detail-beaches__gallery,
  .camping-detail-animations__gallery {
    gap: var(--space-10);
  }

  .camping-detail-water-park__photo,
  .camping-detail-beaches__photo,
  .camping-detail-animations__photo {
    flex: 0 0 250px;
    width: 250px;
    height: 249px;
  }

  .camping-detail-water-park__photo > img,
  .camping-detail-beaches__photo > img,
  .camping-detail-animations__photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Carrousels hébergements / actus — cartes 330px */
  .camping-detail-accommodations__slide,
  .camping-detail-nearby__cards > .camping-detail-nearby-card__cell {
    flex: 0 0 min(330px, calc(100vw - 40px));
    width: min(330px, calc(100vw - 40px));
  }

  .page-camping-detail .camping-detail-nearby__cards {
    gap: 0;
    min-height: 0;
  }

  /* Proximité fiche camping — 1 carte pleine largeur + espacement */
  .page-camping-detail .camping-detail-nearby__cards > .camping-detail-nearby-card__cell {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .page-camping-detail .camping-detail-nearby__gallery {
    gap: var(--space-10);
  }

  .page-camping-detail .camping-detail-nearby__viewport {
    margin-bottom: 0;
  }

  .page-camping-detail .camping-detail-nearby-card {
    height: auto;
    min-height: 0;
    padding-top: 0;
    padding-bottom: var(--space-15);
  }

  .page-camping-detail .camping-detail-nearby-card__bottom {
    margin-top: 0;
  }

  .page-camping-detail .camping-detail-nearby__pagination--mobile {
    padding-top: var(--space-5);
    padding-bottom: var(--space-10);
  }

  .camping-detail-infos-moment__item {
    flex: 0 0 min(330px, calc(100vw - 40px));
    width: min(330px, calc(100vw - 40px));
  }

  .camping-detail-nearby__cards {
    min-height: 0;
  }
}

.page-hub .hub-hero-image {
  height: 250px;
  margin-bottom: 15px;
}

.page-hub .hub-block-text {
  margin-bottom: 15px;
}

.camping-detail-hero__status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 15px;
}

/* Figma 157:5135 — nav / table anchors (barres empilées sous le hero camping) */
.page-camping-detail .camping-detail-hero__anchors {
  margin-top: 15px;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.guide-nav-table-anchors {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.guide-nav-table-anchors__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  min-height: 35px;
  padding: 10px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cta);
  text-decoration: none;
  color: var(--color-secondary);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  transition: opacity 0.2s ease;
}

.guide-nav-table-anchors__row:hover {
  opacity: 0.92;
}

.guide-nav-table-anchors__label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.guide-nav-table-anchors__chevron {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.guide-nav-table-anchors__chevron img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.camping-detail-hero__status span,
.conf-updated {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cta);
  padding: 6px 10px;
  font-size: var(--font-size-14);
  text-align: center;
}

.conf-head {
  text-align: center;
  padding-bottom: 0;
}

.conf-head .conf-updated {
  width: 260px;
  margin: 0 auto;
}

/* Pages légales statiques — titre dégagé du header, pastille date sur une ligne, espacement contenu réduit */
.page-static-legal .conf-title {
  margin-top: var(--space-20);
}

.page-static-legal .conf-head .conf-updated {
  width: auto;
  max-width: min(100%, 560px);
  margin: var(--space-15) auto var(--space-50);
  padding: 8px 18px;
  display: inline-block;
  box-sizing: border-box;
  white-space: nowrap;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-cta);
  text-align: center;
}

.page-static-legal .conf-main > .section:first-of-type {
  padding-bottom: 0;
}

.page-static-legal .conf-main > .section:nth-of-type(2) {
  padding-top: 0;
}

/* Même espace date → contenu, que le texte commence par un titre (h2) ou un paragraphe */
.page-static-legal .conf-content > :first-child {
  margin-top: 0;
}

@media (max-width: 767px) {
  .page-static-legal .conf-head .conf-updated {
    margin-bottom: var(--space-30);
  }
}

/* Pages statiques : titres de contenu en bleu foncé (écrase les styles inline legacy orange) */
.page-static-legal .conf-content :is(h1, h2, h3, h4),
.page-static-legal .conf-content :is(h1, h2, h3, h4) strong,
.page-static-legal .conf-content--engagement p.conf-concernant strong {
  color: var(--color-secondary) !important;
}

.page-static-legal .conf-content a,
.page-static-legal .conf-content a strong {
  color: var(--color-primary) !important;
}

.page-static-legal .conf-content h1.conf-garanties-title {
  margin-top: 25px;
  margin-bottom: 25px;
}

.page-static-legal .conf-content p.conf-concernant {
  margin-top: 15px;
  margin-bottom: 15px;
}

/* CGU / glossaires : paragraphes de définition commençant par un terme en gras */
.page-static-legal .conf-content p:has(> strong:first-child) {
  margin-top: 15px;
  margin-bottom: 15px;
}

.page-static-legal .conf-content h1:not(.conf-garanties-title) {
  font-family: var(--secondary-font, Nunito);
  font-size: var(--font-size-alias-size-20, 20px);
  font-weight: var(--font-weight-alias-weight-black, 900);
  line-height: var(--font-line-height-alias-line-height-21, 21px);
  margin-top: 25px;
  margin-bottom: 25px;
}

.page-static-legal .conf-content h3 {
  font-family: var(--secondary-font, Nunito);
  font-size: var(--font-size-alias-size-20, 20px);
  font-weight: var(--font-weight-alias-weight-black, 900);
  line-height: var(--font-line-height-alias-line-height-21, 21px);
  margin-top: 25px;
  margin-bottom: 25px;
}

.page-static-legal .conf-content h4 {
  font-family: var(--secondary-font, Nunito);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-alias-weight-black, 900);
  line-height: var(--line-height-21);
  margin-top: 15px;
  margin-bottom: 15px;
}

/* Mobile pages statiques : header condensé (évite la barre desktop en bandes grises) */
@media (max-width: 767px) {
  .page-static-legal .header__search .search-results-bar {
    display: none !important;
  }

  .page-static-legal .header__search .guide-search-header-mobile {
    display: flex !important;
  }
}

/* Confidentialité — Figma : titre centré (couleur = .conf-title / dégradé inchangé) + pastille grise phrase complète */
.page-confidentialite .conf-head .conf-updated {
  width: auto;
  max-width: min(100%, 560px);
  margin: var(--space-15) auto 0;
  padding: 8px 18px;
  display: inline-block;
  box-sizing: border-box;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-cta);
  text-align: center;
}

.camping-detail-duo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* Une seule offre (pas de top promo, ou promo = meilleur prix) : la carte
   garde la largeur d'une colonne. Elle occupait les deux auparavant, ce
   qui donnait un bloc deux fois plus large selon les campings. */
.camping-detail-duo__grid > .camping-detail-card:only-child {
  grid-column: auto;
}

.camping-detail-card,
.comparateur-block {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  padding: 15px;
}

.page-comparateur .comparateur-block {
  border: none;
  padding: 0;
}

.camping-detail-card--best {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.camping-detail-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.camping-detail-card__badge-icon {
  display: block;
  width: 35px;
  height: 35px;
}

.camping-detail-card__title,
.comparateur-block__title,
.conf-content h2,
.conf-faq h2 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  color: var(--color-secondary);
  margin-bottom: 10px;
}

.camping-detail-card--best .camping-detail-card__title {
  margin: 0;
  text-align: center;
  color: var(--color-secondary);
  /* Figma 253:16363 — heading 28 / black */
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
}

.camping-detail-card__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
}

.camping-detail-card__seller {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 18px;
  color: var(--color-text-muted, #adb5bd);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.camping-detail-card__offer {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-primary);
  border-right-color: var(--color-secondary-light);
  border-radius: var(--radius-card);
  padding: 15px;
  box-sizing: border-box;
}

.camping-detail-card__offer-bundle {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.camping-detail-card__offer-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.camping-detail-card__offer-title {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
}

.camping-detail-card__offer-date {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
  color: #343a40;
}

.camping-detail-card__offer-price {
  margin: 0;
  min-height: 22px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
}

.camping-detail-card__offer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
}

.camping-detail-card__offer-meta-strong {
  font-weight: var(--font-weight-bold);
}

.camping-detail-card__offer-meta-dash,
.camping-detail-card__offer-meta-rest {
  font-weight: var(--font-weight-regular);
}

.camping-detail-card__offer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 35px;
  border-radius: var(--radius-cta);
  background: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  box-sizing: border-box;
  transition: background-color var(--transition-primary-cta, 1s ease);
}

.page-camping-detail .camping-detail-card__offer-cta:hover,
.page-camping-detail .camping-detail-card__offer-cta:focus-visible {
  background: var(--color-primary-gradient-end, #ff9e00);
  color: var(--color-text-inverse);
  opacity: 1;
  text-decoration: none;
  -webkit-text-fill-color: currentColor;
}

.camping-detail-card__offer-cta-icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.conf-content h2,
.conf-faq h2 {
  color: var(--text-secondary-secondary-100, #240046);
  font-family: var(--secondary-font, Nunito);
  font-size: var(--font-size-alias-size-20, 20px);
  font-style: normal;
  font-weight: var(--font-weight-alias-weight-black, 900);
  line-height: var(--font-line-height-alias-line-height-21, 21px);
  margin-top: 25px;
  margin-bottom: 25px;
}

.conf-content h2.conf-title-no-top {
  margin-top: 0;
}

.conf-faq h2.conf-title-no-margin {
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 992px) {
  :is(body.page-confidentialite, body[class*="page--static-"]) .conf-faq h2.conf-title-no-margin {
    font-size: var(--font-size-28);
    margin-bottom: var(--space-20);
  }
}

@media (max-width: 767px) {
  :is(body.page-confidentialite, body[class*="page--static-"]) .conf-faq h2.conf-title-no-margin {
    margin-bottom: var(--space-15);
  }
}

/* Points forts — Figma 157:5183 : rangée 443×121 (214 + 15 + 214), Feature 157:5186 bordure primary */
.camping-detail-features {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-start;
  width: 100%;
  max-width: 900px;
}

/* Points forts — gabarit v2 (icône + titre, puis le texte) dans un encart
   unique, comme la maquette 2026. */
.camping-detail-points-forts__liste {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  padding: var(--space-20);
  margin: 0;
  list-style: none;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-card);
}

.camping-detail-points-forts__item + .camping-detail-points-forts__item {
  margin-top: var(--space-15);
}

.camping-detail-points-forts__titre {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-10);
  align-items: center;
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-black);
  /* interligne resserré : le 27px hérité laissait trop d'air sous le titre */
  line-height: 1.2;
  color: var(--color-secondary);
}

/* Même dégradé que le H1 de la fiche. Porté par le <span> : le dégradé se
   découpe sur le texte, pas sur la ligne entière (l'icône reste intacte). */
.camping-detail-points-forts__titre > span {
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.camping-detail-points-forts__icone {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.camping-detail-points-forts__texte {
  margin: 2px 0 0;
  font-size: var(--font-size-14);
  line-height: 1.35;
  color: var(--color-text);
}

.camping-feature-card {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  height: auto;
  align-self: flex-start;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(90deg, var(--color-primary), var(--color-secondary-light))
      border-box;
  background-origin: border-box;
}

.camping-feature-card__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
}

.camping-feature-card__icon {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.camping-feature-card__title {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
  white-space: nowrap;
}

.camping-feature-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}

.camping-feature-card__item {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .camping-detail-features {
    flex-direction: column;
    align-items: flex-start;
  }

  .camping-feature-card {
    width: fit-content;
    max-width: 100%;
    min-height: 0;
  }

  .camping-feature-card__title,
  .camping-feature-card__item {
    white-space: normal;
  }
}

/* Espace aquatique — Figma 255:5862 (bloc violet, titre dégradé, carrousel photos + pastilles) */
.camping-detail-water-park {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding: var(--space-20);
  background: var(--color-secondary);
  border-radius: var(--radius-card);
}

/* Fond des blocs thématiques : alternance stricte pilotée par le compteur
   d'index.ejs — pair = secondary (base), impair = secondary-300 Figma. */
.camping-detail-water-park--light {
  background: #5a189a;
}

.camping-detail-water-park__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-15);
  width: 100%;
}

.camping-detail-water-park__icon-wrap {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

/* Même dégradé que le titre — masque SVG local (évite #240046 sur fond violet) */
.camping-detail-water-park__title-icon {
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: linear-gradient(
    90deg,
    var(--color-secondary-light) 0%,
    var(--color-primary-gradient-end) 100%
  );
  -webkit-mask-image: url("/images/icon-swimming.svg");
  mask-image: url("/images/icon-swimming.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

@supports not ((-webkit-mask-image: url("/images/icon-swimming.svg")) or (mask-image: url("/images/icon-swimming.svg"))) {
  .camping-detail-water-park__title-icon {
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    background-image: url("/images/icon-swimming.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

.camping-detail-water-park__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  background: linear-gradient(
    90deg,
    var(--color-secondary-light) 0%,
    var(--color-primary-gradient-end) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.camping-detail-water-park__intro {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
}

.camping-detail-water-park__list {
  margin: 0;
  padding-left: 1.35em;
  list-style: disc;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
}

/* Programme d'animations (CSV ligne 109) — sous-bloc de la section
   animations, entre l'éditorial et la galerie. Texte clair sur la carte
   violette, comme le reste de la section. */
.camping-detail-programme {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-image);
  color: var(--color-text-inverse);
}

.camping-detail-programme__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
}

.camping-detail-programme__titre {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-20, 20px);
  font-weight: var(--font-weight-black);
  color: var(--color-text-inverse);
}

.camping-detail-programme__periode {
  padding: 2px var(--space-10);
  border-radius: var(--radius-cta, 100px);
  background: rgba(255, 255, 255, 0.15);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
}

.camping-detail-programme__synthese,
.camping-detail-programme__semaine {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
}

.camping-detail-programme__evenements {
  margin: 0;
  padding-left: 1.35em;
  list-style: disc;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
}

.camping-detail-programme__evenements li::marker {
  color: var(--color-text-inverse);
}

.camping-detail-programme__evenement-nom {
  font-weight: var(--font-weight-bold);
}

.camping-detail-programme__evenement-details {
  opacity: 0.85;
}

.camping-detail-programme__evenement-details::before {
  content: ' — ';
}

/* Regroupement par mois : titre du mois + lignes datées « Dim. 5 » (la date
   remplace la puce). Les événements sans date gardent la liste à puces. */
.camping-detail-programme__mois {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.camping-detail-programme__mois-titre {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  text-transform: capitalize;
}

.camping-detail-programme__evenements--dates {
  padding-left: 0;
  list-style: none;
}

.camping-detail-programme__evenement-date {
  display: inline-block;
  min-width: 4.5em;
  font-weight: var(--font-weight-bold);
  opacity: 0.85;
}

/* Repli par mois : au-delà de 5 lignes, les suivantes portent `hidden` et le
   bouton « Lire + (n) » du mois les révèle (fiche.v3/programme-animations.ejs). */
.camping-detail-programme__evenement--masque[hidden] {
  display: none;
}

.camping-detail-programme__toggle {
  align-self: flex-start;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  line-height: 21px;
  color: var(--color-text-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.camping-detail-programme__toggle:hover {
  opacity: 0.85;
}

.camping-detail-programme__toggle-compte {
  font-weight: var(--font-weight-regular);
  opacity: 0.85;
}

.camping-detail-programme__pdf {
  width: fit-content;
  padding: var(--space-10) var(--space-25);
  border-radius: var(--radius-cta, 100px);
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-bold);
}

.camping-detail-programme__pdf:hover {
  opacity: 0.9;
}

.camping-detail-water-park__list li::marker {
  color: var(--color-text-inverse);
}

.camping-detail-water-park__gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-20);
  width: 100%;
  min-width: 0;
}

.camping-detail-water-park__nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: var(--color-text-inverse);
  background: rgba(36, 0, 70, 0.8);
  border: none;
  border-radius: var(--radius-cta);
  cursor: pointer;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.camping-detail-water-park__nav:hover {
  opacity: 1;
  background: rgba(36, 0, 70, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 10px rgba(255, 255, 255, 0.35);
}

.camping-detail-water-park__nav:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.camping-detail-water-park__nav-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.camping-detail-water-park__nav--next .camping-detail-water-park__nav-icon,
.camping-detail-beaches__nav--next .camping-detail-beaches__nav-icon {
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .camping-detail-water-park__nav {
    display: none;
  }
}

.camping-detail-water-park__strip-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  outline: none;
  /* pan-y : le navigateur garde le scroll VERTICAL de la page quand le doigt
     part de la bande — Swiper gère lui-même le glissement horizontal en JS.
     (pan-x bloquait toute remontée/descente de page depuis ces zones.) */
  touch-action: pan-y pinch-zoom;
}

/* Swiper base CSS n'est pas bundlée dans main.v3.css (cf. règle équivalente
   sur .camping-detail-hero__swiper) : sans ce display:flex explicite, les
   slides s'empilent en colonne (comportement par défaut d'une div). */
.camping-detail-water-park__strip-viewport .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  transition-property: transform;
}

.camping-detail-water-park__strip-viewport .swiper-slide {
  flex-shrink: 0;
}

.camping-detail-water-park__strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-15);
  align-items: stretch;
  width: 100%;
  transition: transform 240ms ease;
  will-change: transform;
}

/* Nom du site touristique sur la photo (galerie tourisme) : haut gauche,
   blanc sur le voile violet sombre du design (même fond que les flèches
   de navigation). */
.camping-detail-water-park__photo-nom {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: var(--space-5) var(--space-10);
  overflow: hidden;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12, 12px);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-18, 18px);
  color: var(--color-text-inverse, #fff);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(36, 0, 70, 0.8);
  border-radius: var(--radius-label, 8px);
}

.camping-detail-water-park__photo {
  position: relative;
  width: 200px;
      min-width: 200px;
  height: 249px;
  overflow: hidden;
  border-radius: var(--radius-image);
}

.camping-detail-water-park__photo > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Badge « Piscine » — Figma 255:5870 label (grayscale-200, border grayscale-400, px 10 py 5, gap 5, icône 15) */
.camping-detail-water-park__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  min-height: 31px;
  padding: 5px 10px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: 5px;
}

.camping-detail-water-park__badge-icon-wrap {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  overflow: hidden;
}

.camping-detail-water-park__badge-icon {
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.camping-detail-water-park__badge-text {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* icône et titre toujours sur la même ligne */
  .camping-detail-water-park__head {
    flex-wrap: nowrap;
  }

  .camping-detail-water-park__gallery {
    gap: var(--space-10);
  }

  .camping-detail-water-park__photo {
    flex: 0 0 250px;
    width: 250px;
    height: 249px;
  }
}

/* Animations — Figma 256:9445 (fond #3c096c, grille 3 photos, gap 10px) */
.camping-detail-animations {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding: var(--space-20);
  /* Figma surface/secondary/secondary-200 */
  background: #3c096c;
  border-radius: var(--radius-card);
}

.camping-detail-animations__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-15);
  width: 100%;
}

.camping-detail-animations__icon-wrap {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.camping-detail-animations__title-icon {
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: linear-gradient(
    90deg,
    var(--color-secondary-light) 0%,
    var(--color-primary-gradient-end) 100%
  );
  -webkit-mask-image: url("/images/icon-party.svg");
  mask-image: url("/images/icon-party.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

@supports not ((-webkit-mask-image: url("/images/icon-party.svg")) or (mask-image: url("/images/icon-party.svg"))) {
  .camping-detail-animations__title-icon {
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    background-image: url("/images/icon-party.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

.camping-detail-animations__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  background: linear-gradient(
    90deg,
    var(--color-secondary-light) 0%,
    var(--color-primary-gradient-end) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.camping-detail-animations__intro {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
}

.camping-detail-animations__list {
  margin: 0;
  padding-left: 1.35em;
  list-style: disc outside;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
}

.camping-detail-animations__list li::marker {
  color: var(--color-text-inverse);
}

.camping-detail-animations__gallery {
  width: 100%;
}

.camping-detail-animations__strip-viewport {
  overflow: hidden;
  outline: none;
  /* pan-y : le navigateur garde le scroll VERTICAL de la page quand le doigt
     part de la bande — Swiper gère lui-même le glissement horizontal en JS.
     (pan-x bloquait toute remontée/descente de page depuis ces zones.) */
  touch-action: pan-y pinch-zoom;
}

.camping-detail-animations__strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-10);
  align-items: stretch;
  width: max-content;
  transition: transform 240ms ease;
  will-change: transform;
}

.camping-detail-animations__photo {
  position: relative;
  flex: 0 0 auto;
  width: min(250px, 72vw);
  height: 249px;
  overflow: hidden;
  border-radius: var(--radius-image);
}

@media (min-width: 768px) {
  .camping-detail-animations__strip-viewport {
    overflow: visible;
  }

  .camping-detail-animations__strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10);
    width: 100%;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  .camping-detail-animations__photo {
    width: auto;
    height: 249px;
  }
}

.camping-detail-animations__photo > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.camping-detail-animations__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-10);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-label);
}

.camping-detail-animations__badge-icon {
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .camping-detail-animations__head {
    flex-wrap: wrap;
  }

  .camping-detail-animations__title {
    font-size: var(--font-size-24);
    line-height: var(--line-height-32);
  }

  .camping-detail-animations__photo {
    height: min(249px, 55vh);
  }
}

/* Plages — Figma 256:9483 (fond secondary-300 #5a189a, carrousel + pastilles) */
.camping-detail-beaches {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding: var(--space-20);
  /* Figma surface/secondary/secondary-300 */
  background: #5a189a;
  border-radius: var(--radius-card);
}

.camping-detail-beaches__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-15);
  width: 100%;
}

.camping-detail-beaches__icon-wrap {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.camping-detail-beaches__title-icon {
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: linear-gradient(
    90deg,
    var(--color-secondary-light) 0%,
    var(--color-primary-gradient-end) 100%
  );
  -webkit-mask-image: url("/images/icon-see-beaches-page-camping.svg");
  mask-image: url("/images/icon-see-beaches-page-camping.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

@supports not ((-webkit-mask-image: url("/images/icon-see-beaches-page-camping.svg")) or (mask-image: url("/images/icon-see-beaches-page-camping.svg"))) {
  .camping-detail-beaches__title-icon {
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    background-image: url("/images/icon-see-beaches-page-camping.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

.camping-detail-beaches__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  background: linear-gradient(
    90deg,
    var(--color-secondary-light) 0%,
    var(--color-primary-gradient-end) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.camping-detail-beaches__intro {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
}

.camping-detail-beaches__list {
  margin: 0;
  padding-left: 1.35em;
  list-style: disc outside;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
}

.camping-detail-beaches__list li::marker {
  color: var(--color-text-inverse);
}

.camping-detail-beaches__gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-20);
  width: 100%;
  min-width: 0;
}

.camping-detail-beaches__nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: var(--color-text-inverse);
  background: rgba(36, 0, 70, 0.8);
  border: none;
  border-radius: var(--radius-cta);
  cursor: pointer;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.camping-detail-beaches__nav:hover {
  opacity: 1;
  background: rgba(36, 0, 70, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 10px rgba(255, 255, 255, 0.35);
}

.camping-detail-beaches__nav:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.camping-detail-beaches__nav-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .camping-detail-beaches__nav {
    display: none;
  }
}

.camping-detail-beaches__strip-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  outline: none;
  /* pan-y : le navigateur garde le scroll VERTICAL de la page quand le doigt
     part de la bande — Swiper gère lui-même le glissement horizontal en JS.
     (pan-x bloquait toute remontée/descente de page depuis ces zones.) */
  touch-action: pan-y pinch-zoom;
}

.camping-detail-beaches__strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-15);
  align-items: stretch;
  width: max-content;
  transition: transform 240ms ease;
  will-change: transform;
}

.camping-detail-beaches__photo {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  height: 249px;
  overflow: hidden;
  border-radius: var(--radius-image);
}

.camping-detail-beaches__photo > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.camping-detail-beaches__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-10);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-label);
}

.camping-detail-beaches__badge-icon {
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .camping-detail-beaches__head {
    flex-wrap: wrap;
  }

  .camping-detail-beaches__title {
    font-size: var(--font-size-24);
    line-height: var(--line-height-32);
  }

  .camping-detail-beaches__gallery {
    gap: var(--space-10);
  }

  .camping-detail-beaches__photo {
    flex: 0 0 250px;
    width: 250px;
    height: 249px;
  }
}

/* Région — Figma 157:5276 (titre bicolore + image 400px + texte) */
.camping-detail-region {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.camping-detail-region__title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
}

.camping-detail-region__title-plain {
  color: var(--color-secondary);
}

.camping-detail-region__title-accent {
  background: linear-gradient(
    90deg,
    var(--gradient-secondary-secondary-500, #9D4EDD) 0%,
    var(--gradient-primary-primary-500, #FF9E00) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* heading 28/heading 28-black */
  font-family: var(--primary-font, Outfit);
  font-size: var(--font-size-alias-size-28, 28px);
  font-style: normal;
  font-weight: var(--font-weight-alias-weight-black, 900);
  line-height: var(--font-line-height-alias-line-height-30, 30px);
}

.camping-detail-region__media {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: var(--radius-image);
}

.camping-detail-region__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.camping-detail-region__text {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
}

/* Équipements — Figma 157:5203 (2 colonnes, tags icône + libellé) */
.camping-detail-equipment {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.camping-detail-equipment__main-title {
  margin: 0 0 var(--space-25) 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  color: var(--color-secondary);
}

/* Colonnes en flux (multi-column) plutôt qu'une grille en lignes : les
   sous-sections « autres équipements » ont des tailles très inégales (2 à 10
   items), une grille laisserait de grands trous sous les colonnes courtes. */
.camping-detail-equipment__grid {
  columns: 2;
  column-gap: var(--space-15);
}

.camping-detail-equipment__grid > .camping-detail-equipment__column {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: var(--space-25);
}

.camping-detail-equipment__subtitle {
  margin: 0 0 var(--space-15) 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
}

.camping-detail-equipment__tags {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.camping-detail-equipment__tag {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  padding: 0 var(--space-10);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-label);
}

.camping-detail-equipment__tag-icon {
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.camping-detail-equipment__tag-label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .camping-detail-region__media {
    height: min(400px, 50vh);
  }

  .camping-detail-region__title {
    font-size: var(--font-size-24);
    line-height: var(--line-height-32);
  }

  .camping-detail-equipment__grid {
    columns: 1;
  }

  .camping-detail-equipment__tag-label {
    white-space: normal;
  }
}

/* Nouveautés — Figma 275:9008 + carte card/edito/activity 275:9010 */
.camping-detail-nouveautes {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.camping-detail-nouveautes__section-title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  color: var(--color-secondary);
}

.camping-detail-nouveautes-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-20);
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-20);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.camping-detail-nouveautes-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 335 / 150;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.camping-detail-nouveautes-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.camping-detail-nouveautes-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  align-items: flex-start;
  width: 100%;
}

.camping-detail-nouveautes-card__title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
}

.camping-detail-nouveautes-card__excerpt {
  margin: 0;
  max-height: 63px;
  overflow: hidden;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
}

@media (max-width: 767px) {
  .camping-detail-nouveautes__section-title {
    font-size: var(--font-size-24);
    line-height: var(--line-height-32);
  }

  .camping-detail-nouveautes-card {
    padding: var(--space-15);
  }
}

/* Infos camping du moment — Figma 157:6401 + CardEditoArticleStandard 55:2879 */
.camping-detail-infos-moment {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.camping-detail-infos-moment__title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  color: var(--color-secondary);
}

.camping-detail-infos-moment__viewport {
  overflow: hidden;
  outline: none;
  /* pan-y : le navigateur garde le scroll VERTICAL de la page quand le doigt
     part de la bande — Swiper gère lui-même le glissement horizontal en JS.
     (pan-x bloquait toute remontée/descente de page depuis ces zones.) */
  touch-action: pan-y pinch-zoom;
}

.camping-detail-infos-moment__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-15);
  align-items: stretch;
  margin: 0;
  padding: var(--space-15) 0;
  list-style: none;
}

.camping-detail-infos-moment__item {
  flex: 1 1 280px;
  min-width: 0;
}

@media (min-width: 768px) {
  .camping-detail-infos-moment__viewport {
    overflow: visible;
  }

  .camping-detail-infos-moment__list {
    flex-wrap: wrap;
    width: 100%;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  .camping-detail-infos-moment__item {
    flex: 1 1 280px;
  }
}

.camping-detail-infos-moment-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  box-sizing: border-box;
  height: 411px;
  padding: var(--space-15);
  background: var(--color-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card);
}

.camping-detail-infos-moment-card__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.camping-detail-infos-moment-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.camping-detail-infos-moment-card__caption {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-height: 55px;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .camping-detail-infos-moment__title {
    font-size: var(--font-size-24);
    line-height: var(--line-height-32);
  }

  .camping-detail-infos-moment__list {
    flex-wrap: nowrap;
    padding: var(--space-15) 0;
    width: max-content;
    transition: transform 240ms ease;
    will-change: transform;
  }

  .camping-detail-infos-moment__item {
    flex: 0 0 min(330px, 88vw);
  }

  .camping-detail-infos-moment-card {
    height: auto;
    min-height: 360px;
  }
}

/* Campings à proximité — Figma 287:6660 + CardBusinessCampingVert 310:8704 */
.camping-detail-nearby {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.camping-detail-nearby__title {
  align-self: stretch;
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  color: var(--color-secondary);
}

.camping-detail-nearby__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  align-self: stretch;
  width: 100%;
}

.camping-detail-nearby__viewport {
  overflow: hidden;
  outline: none;
  /* pan-y : le navigateur garde le scroll VERTICAL de la page quand le doigt
     part de la bande — Swiper gère lui-même le glissement horizontal en JS.
     (pan-x bloquait toute remontée/descente de page depuis ces zones.) */
  touch-action: pan-y pinch-zoom;
}

.page-camping-detail .camping-detail-nearby__viewport {
  transition: height 240ms ease;
}

.camping-detail-nearby__cards {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-15);
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .camping-detail-nearby__cards {
    flex-wrap: nowrap;
    width: max-content;
    transition: transform 240ms ease;
    will-change: transform;
  }
}

@media (max-width: 767px) {
  .camping-detail-nearby__cards {
    flex-wrap: nowrap;
    width: max-content;
    min-height: 0;
    transition: transform 240ms ease;
    will-change: transform;
  }

  .page-camping-detail .camping-detail-nearby__cards > .camping-detail-nearby-card__cell {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .camping-detail-nearby__cards > .camping-detail-nearby-card__cell {
    flex: 0 0 min(330px, 88vw);
    max-width: none;
  }
}

.camping-detail-nearby-card__cell {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  min-width: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .page-camping-detail .camping-detail-nearby-card__cell {
    flex: 0 0 calc((100% - var(--space-15)) / 2);
    width: calc((100% - var(--space-15)) / 2);
    max-width: calc((100% - var(--space-15)) / 2);
  }

  .page-camping-detail .camping-detail-nearby-card {
    height: 655px;
    min-height: 655px;
    padding-top: 0;
    padding-right: var(--space-15);
    padding-bottom: calc(var(--space-15) + var(--space-15) / 2);
    padding-left: var(--space-15);
  }

  .page-camping-detail .camping-detail-nearby-card__body {
    flex: 0 0 auto;
  }

  .page-camping-detail .camping-detail-nearby-card__bottom {
    margin-top: auto;
    width: 100%;
  }
}

.camping-detail-nearby-card {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--space-15);
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(
      90deg,
      var(--color-primary, #ff6d00),
      var(--color-secondary-light, #9d4edd)
    )
      border-box;
  background-origin: border-box;
  box-shadow: 0 0 7.5px 0 var(--color-border-light);
}

.camping-detail-nearby-card__media {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-image);
}

.camping-detail-nearby-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.camping-detail-nearby-card__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.camping-detail-nearby-card__badge-pub {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-10);
  border-radius: 5px;
  background: rgba(36, 0, 70, 0.8);
}

.camping-detail-nearby-card__badge-pub-text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-text-inverse);
  white-space: nowrap;
}

.camping-detail-nearby-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  padding: var(--space-5);
  border: 0;
  border-radius: 999px;
  background: rgba(36, 0, 70, 0.8);
  box-shadow: 0 0 15px 0 var(--color-text-muted);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.camping-detail-nearby-card__play img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.camping-detail-nearby-card__dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 162px;
  transform: translateX(-50%);
}

.camping-detail-nearby-card__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: rgba(36, 0, 70, 0.2);
  box-sizing: border-box;
}

.camping-detail-nearby-card__dot--active {
  width: 10px;
  height: 10px;
  border: 0;
  background: #fff;
}

.camping-detail-nearby-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  width: 100%;
}

.camping-detail-nearby-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
  width: 100%;
}

.camping-detail-nearby-card__name {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-32);
  color: var(--color-secondary);
}

.camping-detail-nearby-card__stars {
  display: flex;
  gap: 0;
  align-items: center;
}

.camping-detail-nearby-card__location {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
}

.camping-detail-nearby-card__tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-15);
  align-items: center;
  width: 100%;
}

.camping-detail-nearby-card__tags-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.camping-detail-nearby-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}

.camping-detail-nearby-card__tags-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 23px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    var(--color-surface)
  );
}

.camping-detail-nearby-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  height: 22px;
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border-light);
  border-radius: 5px;
  background: var(--color-surface-alt);
  box-sizing: border-box;
}

.camping-detail-nearby-card__tag-icon {
  display: block;
  flex-shrink: 0;
}

.camping-detail-nearby-card__tag-label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
  white-space: nowrap;
}

.camping-detail-nearby-card__read-more {
  flex-shrink: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
  text-decoration: none;
}

.camping-detail-nearby-card__read-more:hover {
  text-decoration: underline;
}

.camping-detail-nearby-card__push {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  width: 100%;
  overflow: hidden;
  background: var(--color-surface-muted);
  border-radius: var(--radius-card);
}

.camping-detail-nearby-card__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.camping-detail-nearby-card__seller {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  line-height: 18px;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.camping-detail-nearby-card__push-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  padding: var(--space-15) var(--space-15) 0;
}

.camping-detail-nearby-card__push-title {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: 21px;
  color: var(--color-secondary);
}

.camping-detail-nearby-card__push-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.camping-detail-nearby-card__push-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  height: 22px;
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border-light);
  border-radius: 5px;
  background: var(--color-surface-alt);
  box-sizing: border-box;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
}

.camping-detail-nearby-card__push-sep {
  width: calc(100% - 30px);
  height: 1px;
  margin: 0 auto;
  background: var(--color-text-muted);
  border-radius: 100px;
}

.camping-detail-nearby-card__push-price {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 var(--space-15) var(--space-15);
}

.camping-detail-nearby-card__push-dates {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-27);
  color: #343a40;
}

/* Comparateur sticky bottom bar — desktop Figma 458:21109, mobile Figma 458:21145 */
.comparateur-sticky-bar {
  display: none;
}

@media (max-width: 767px), (min-width: 992px) {
  .page-comparateur .comparateur-sticky-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: block;
    /* même gabarit que la barre sticky des pages SEO / fiche (49px) */
    width: max-content;
    min-width: min(247px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    pointer-events: none;
  }

  .page-comparateur .comparateur-sticky-bar__inner {
    display: flex;
    align-items: center;
    height: 49px;
    pointer-events: auto;
    filter: drop-shadow(0 0 7.5px #adb5bd);
  }

  .page-comparateur .comparateur-sticky-bar__tabs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 49px;
    padding: 8px 7px 8px 10px;
    border-radius: var(--radius-cta);
    background: rgba(36, 0, 70, 0.8);
    box-sizing: border-box;
  }

  .page-comparateur .comparateur-sticky-bar__tab {
    flex: 0 0 auto;
    min-width: 0;
    height: 25px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    border: 0;
    border-radius: var(--radius-cta);
    background: transparent;
    color: var(--color-text-inverse);
    font-family: var(--font-family-secondary);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .page-comparateur .comparateur-sticky-bar__tab.is-active {
    background: var(--color-surface);
    color: var(--color-primary);
  }

  .page-comparateur .comparateur-sticky-bar__tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  .page-comparateur .comparateur-sticky-bar__tab-icon svg {
    display: block;
    width: 15px;
    height: 15px;
  }

  .page-comparateur .comparateur-sticky-bar__tab-label {
    font-family: var(--font-family-secondary);
    font-size: 13px;
    font-weight: var(--font-weight-regular);
    line-height: 19px;
    white-space: nowrap;
  }

  /* « Posez une question » : même pastille orange que la fiche camping */
  .page-comparateur .comparateur-sticky-bar__tabs .comparateur-sticky-bar__question {
    flex: 0 0 auto;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border: 0;
    border-radius: var(--radius-cta);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-family: var(--font-family-secondary);
    font-size: 13px;
    line-height: 19px;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.25s ease;
  }

  .page-comparateur .comparateur-sticky-bar__tabs .comparateur-sticky-bar__question:hover,
  .page-comparateur .comparateur-sticky-bar__tabs .comparateur-sticky-bar__question:focus-visible {
    background: var(--color-primary-gradient-end, #ff9e00);
    color: var(--color-text-inverse);
  }

  .page-comparateur .comparateur-sticky-bar__tabs .comparateur-sticky-bar__action {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-inverse);
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .page-comparateur .comparateur-sticky-bar__action-ia {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
  }

  .page-comparateur .comparateur-sticky-bar__action-ia img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .page-comparateur .comparateur-sticky-bar__tabs .comparateur-sticky-bar__action:hover,
  .page-comparateur .comparateur-sticky-bar__tabs .comparateur-sticky-bar__action:focus-visible {
    opacity: 1;
    transform: scale(1.05);
    background: transparent;
    color: var(--color-text-inverse);
  }

  .page-comparateur.filters-modal-open .comparateur-sticky-bar {
    visibility: hidden;
    pointer-events: none;
  }

  .page-comparateur #chat-bubble {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .page-comparateur .comparateur-sticky-bar {
    bottom: max(0px, env(safe-area-inset-bottom, 0px));
  }

  /* mobile : pas la place pour la pastille texte, le bouton IA rond suffit */
  .page-comparateur .comparateur-sticky-bar__tabs .comparateur-sticky-bar__question {
    display: none;
  }

  .page-comparateur .comparateur-sticky-bar__tab {
    padding: 4px 6px;
  }

  .page-comparateur .comparateur-sticky-bar__tab-label {
    font-size: 12px;
  }

  .page-comparateur .comparateur-main {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

}

@media (min-width: 992px) {
  .page-comparateur .comparateur-sticky-bar {
    bottom: 24px;
  }

  .page-comparateur .comparateur-main {
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  }
}

/* Sticky bottom bar — Figma 458:21451 (barre 353px avec IA intégrée),
   réduite de 30 % (247px / 49px) : la barre d'origine était jugée trop haute. */
.sticky-site-officiel {
  display: none;
}

@media (max-width: 767px), (min-width: 992px) {
  .page-camping-detail .sticky-site-officiel {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: block;
    padding: 0;
    height: 49px;
    /* largeur figée à 247px, mais la barre peut s'élargir quand le numéro
       de téléphone remplace « Appeler » sur desktop (voir --call ci-dessous) */
    width: max-content;
    min-width: min(247px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    pointer-events: auto;
    box-sizing: border-box;
  }

  .page-camping-detail .sticky-site-officiel__bar {
    width: 100%;
    height: 49px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 7px 8px 10px;
    border-radius: var(--radius-cta);
    background: rgba(36, 0, 70, 0.8);
    box-shadow: 0 0 7.5px 0 #adb5bd;
    box-sizing: border-box;
  }

  .page-camping-detail .sticky-site-officiel__cta {
    flex: 1 1 0;
    min-width: 0;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-cta);
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color var(--transition-primary-cta, 1s ease), opacity var(--transition-primary-cta, 1s ease);
  }

  .page-camping-detail .sticky-site-officiel__cta--site {
    background: var(--color-primary);
    color: var(--color-text-inverse);
  }

  .page-camping-detail .sticky-site-officiel__cta--site:hover,
  .page-camping-detail .sticky-site-officiel__cta--site:focus-visible {
    background: var(--color-primary-gradient-end, #ff9e00);
    color: var(--color-text-inverse);
    opacity: 1;
  }

  .page-camping-detail .sticky-site-officiel__cta--site.sticky-site-officiel__cta--disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
  }

  .page-camping-detail .sticky-site-officiel__cta--call {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
  }

  .page-camping-detail .sticky-site-officiel__cta--call:hover,
  .page-camping-detail .sticky-site-officiel__cta--call:focus-visible {
    background: var(--color-secondary-light);
    color: var(--color-text-inverse);
    opacity: 1;
  }

  /* numéro révélé (desktop) : la pastille prend la largeur du numéro au lieu
     de le laisser déborder sur le bouton IA */
  .page-camping-detail .sticky-site-officiel__cta--call[data-tel-affiche="1"] {
    flex: 0 0 auto;
  }

  /* camping sans forfait commercial : un seul CTA qui ouvre Piaf */
  .page-camping-detail .sticky-site-officiel__cta--piaf {
    background: var(--color-primary);
    color: var(--color-text-inverse);
  }

  .page-camping-detail .sticky-site-officiel__cta--piaf:hover,
  .page-camping-detail .sticky-site-officiel__cta--piaf:focus-visible {
    background: var(--color-primary-gradient-end, #ff9e00);
    color: var(--color-text-inverse);
    opacity: 1;
  }

  .page-camping-detail .sticky-site-officiel__cta-text {
    font-family: var(--font-family-secondary);
    font-size: 13px;
    font-weight: var(--font-weight-regular);
    line-height: 19px;
    white-space: nowrap;
  }

  .page-camping-detail .sticky-site-officiel__cta-icon {
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .page-camping-detail .sticky-site-officiel__cta-icon svg {
    width: 100%;
    height: 100%;
  }

  .page-camping-detail .sticky-site-officiel__ai {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-left: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .page-camping-detail .sticky-site-officiel__ai:hover,
  .page-camping-detail .sticky-site-officiel__ai:focus-visible {
    transform: scale(1.05);
    opacity: 1;
  }

  .page-camping-detail .sticky-site-officiel__ai img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .page-camping-detail #chat-bubble {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .page-camping-detail .sticky-site-officiel {
    bottom: max(0px, env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 992px) {
  .page-camping-detail .sticky-site-officiel {
    bottom: 24px;
  }

  .page-camping-detail .camping-detail-main {
    padding-bottom: 73px;
  }
}

/* Texte des pastilles des barres sticky (fiche + SEO) : blanc pur, quel que
   soit l'héritage des liens legacy — il paraissait gris sur l'orange/violet. */
.sticky-site-officiel__cta,
.sticky-site-officiel__cta:link,
.sticky-site-officiel__cta:visited,
.sticky-site-officiel__cta:hover,
.sticky-site-officiel__cta:focus-visible,
.sticky-site-officiel__cta-text,
.sticky-site-officiel__cta-icon {
  color: #fff !important;
}

/* ── Barre d'accès sticky des pages SEO (seo.v2/sticky-acces.ejs) ────────
   Même gabarit que la barre de la fiche camping, mais celle-ci est scopée
   `.page-camping-detail` : le modificateur `--seo` reprend les mêmes règles
   pour les pages SEO. Trois accès de largeur égale + le bouton IA rond.
   Réduite de 30 % comme la barre de la fiche (301px / 49px). */
.sticky-site-officiel--seo {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(0px, env(safe-area-inset-bottom, 0px));
  z-index: 300;
  display: block;
  height: 49px;
  /* plus large que la barre de la fiche : « Tous les campings » ne tient
     pas dans les 247px prévus pour « Site officiel » / « Appeler ». */
  width: 301px;
  max-width: min(301px, calc(100vw - 30px));
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .sticky-site-officiel--seo {
    bottom: 24px;
  }
}

.sticky-site-officiel--seo .sticky-site-officiel__bar {
  width: 100%;
  height: 49px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 7px 8px 10px;
  border-radius: var(--radius-cta);
  background: rgba(36, 0, 70, 0.8);
  box-shadow: 0 0 7.5px 0 #adb5bd;
  box-sizing: border-box;
}

.sticky-site-officiel--seo .sticky-site-officiel__cta {
  flex: 1 1 0;
  min-width: 0;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border-radius: var(--radius-cta);
  text-decoration: none;
  box-sizing: border-box;
  /* fondu court : la couleur suit le defilement, la seconde des CTA
     classiques donnerait une pastille toujours en transition */
  transition: background-color 0.25s ease, opacity 0.25s ease;
}

/* La couleur ne depend plus du bouton mais de la section lue : l'orange
   marque l'acces actif, le violet les autres. Le script de
   seo.v2/sticky-acces.ejs deplace `--actif` au fil du defilement. */
.sticky-site-officiel--seo .sticky-site-officiel__cta--site,
.sticky-site-officiel--seo .sticky-site-officiel__cta--call {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
}

.sticky-site-officiel--seo .sticky-site-officiel__cta--site:hover,
.sticky-site-officiel--seo .sticky-site-officiel__cta--site:focus-visible,
.sticky-site-officiel--seo .sticky-site-officiel__cta--call:hover,
.sticky-site-officiel--seo .sticky-site-officiel__cta--call:focus-visible {
  background: var(--color-secondary-light);
  color: var(--color-text-inverse);
}

.sticky-site-officiel--seo .sticky-site-officiel__cta--actif {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.sticky-site-officiel--seo .sticky-site-officiel__cta--actif:hover,
.sticky-site-officiel--seo .sticky-site-officiel__cta--actif:focus-visible {
  background: var(--color-primary-gradient-end, #ff9e00);
  color: var(--color-text-inverse);
}

.sticky-site-officiel--seo .sticky-site-officiel__cta-text {
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-site-officiel--seo .sticky-site-officiel__ai {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-left: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.sticky-site-officiel--seo .sticky-site-officiel__ai:hover,
.sticky-site-officiel--seo .sticky-site-officiel__ai:focus-visible {
  transform: scale(1.05);
}

.sticky-site-officiel--seo .sticky-site-officiel__ai img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* la bulle de chat par défaut ferait doublon avec le bouton IA de la barre */
body:has(.sticky-site-officiel--seo) #chat-bubble {
  display: none !important;
}

.camping-detail-nearby-card__push-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-5);
}

.camping-detail-nearby-card__push-amount {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: 21px;
  color: var(--color-secondary);
}

.camping-detail-nearby-card__push-discount-line {
  display: inline-flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  min-width: 0;
}

.camping-detail-nearby-card__push-old {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
  text-decoration: line-through;
}

.camping-detail-nearby-card__push-sale {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 22px;
  padding: 0 var(--space-5);
  border-radius: 5px;
  background: var(--color-secondary-light);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  line-height: 21px;
  color: var(--color-text-inverse);
}

.camping-detail-nearby-card__push-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
}

.camping-detail-nearby-card__push-meta-strong {
  font-weight: var(--font-weight-bold);
}

.camping-detail-nearby-card__push-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  min-height: 35px;
  padding: var(--space-5) var(--space-15);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--color-primary);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: background-color var(--transition-primary-cta, 1s ease);
}

.camping-detail-nearby-card__push-cta:not(:last-child) {
  border-radius: 0;
}

.camping-detail-nearby-card__push-merchant {
  display: none;
}

.page-camping-detail .camping-detail-nearby-card__push-cta:hover,
.page-camping-detail .camping-detail-nearby-card__push-cta:focus-visible {
  background: var(--color-primary-gradient-end, #ff9e00);
  color: var(--color-text-inverse);
  opacity: 1;
  text-decoration: none;
  -webkit-text-fill-color: currentColor;
}

.camping-detail-nearby-card__push-merchant {
  margin: 0;
  padding: var(--space-10) var(--space-15) var(--space-15);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.camping-detail-nearby__pagination {
  display: none;
}

.camping-detail-nearby__pagination--mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.camping-detail-nearby__pagination--desktop {
  display: none;
}

@media (min-width: 768px) {
  .camping-detail-nearby__pagination--mobile {
    display: none;
  }

  .camping-detail-nearby__pagination--desktop {
    display: flex;
    gap: var(--space-15);
    align-items: center;
    justify-content: center;
  }
}

.camping-detail-nearby__pag-btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: var(--space-5);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

/* États actif / hover / disabled : components.v3.css (.camping-detail-nearby__pag-btn) */

.camping-detail-nearby__pag-btn:disabled {
  pointer-events: none;
}

.camping-detail-nearby__pag-btn:disabled img {
  filter: none;
}

.camping-detail-nearby__pag-bars {
  display: flex;
  gap: 6px;
  align-items: center;
}

.camping-detail-nearby__pag-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.camping-detail-nearby__pag-round-dots {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  justify-content: center;
}

.camping-detail-nearby__pag-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(36, 0, 70, 0.2);
  border-radius: 999px;
  background: rgba(36, 0, 70, 0.2);
  cursor: pointer;
  box-sizing: border-box;
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.camping-detail-nearby__pag-dot--active {
  width: 10px;
  height: 10px;
  border: 0;
  background: var(--color-secondary);
}

.camping-detail-nearby__pag-bar {
  flex-shrink: 0;
  width: 50px;
  height: 5px;
  border: 1px solid rgba(36, 0, 70, 0.2);
  border-radius: 100px;
  background: rgba(36, 0, 70, 0.08);
  box-sizing: border-box;
}

.camping-detail-nearby__pag-bar--active {
  border: 0;
  background: var(--color-secondary);
}

/* Fiche camping — flèches pagination (hébergements, proximité) : 24×12 en desktop */
@media (min-width: 768px) {
  .camping-detail-nearby__pag-btn img,
  .camping-detail-accommodations__page-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
}

@media (max-width: 767px) {
  .camping-detail-nearby__title {
    font-size: var(--font-size-24);
    line-height: var(--line-height-32);
  }
}

/* Hébergements — Figma 157:5669 + grille 287:7436 */
.camping-detail-accommodations {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.camping-detail-accommodations__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

.camping-detail-accommodations__title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-30);
  color: var(--color-secondary);
}

/* Ni hébergement ni tarif : la phrase puis un bouton vers la recherche sur la
   ville. La marge basse de .guide-section__text est neutralisée — l'écart vient
   du gap de la section (25px), sinon il s'y ajoutait une ligne blanche. */
.camping-detail-accommodations__vide {
  margin: 0;
}

/* Même gabarit que « Déposez un avis » (.camping-detail-avis__depot-btn).
   Rendu final : un <a> (concierge.js remplace le span), d'où le
   text-decoration et le align-self dans la section en flex colonne. */
.camping-detail-accommodations__dispo-btn {
  align-self: flex-start;
  display: inline-block;
  /* Équilibre haut/bas : 25px au-dessus (gap de la section), et en dessous
     15px qui s'ajoutent aux 10px du gap de .camping-detail-main. */
  margin-bottom: var(--space-15);
  padding: 8px 18px;
  background: var(--color-primary);
  color: var(--color-text-inverse, #fff);
  border: none;
  border-radius: var(--radius-cta);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  text-decoration: none;
  cursor: pointer;
}

.camping-detail-accommodations__dispo-btn:hover,
.camping-detail-accommodations__dispo-btn:focus,
.camping-detail-accommodations__dispo-btn:active {
  background: var(--color-primary);
  color: var(--color-text-inverse, #fff);
  border: none;
  text-decoration: none;
  opacity: 0.9;
}

.camping-detail-accommodations__camping-line {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary-light) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Galerie standard v3 (Swiper via data-v3-swiper, comme les sections
   thématiques) : flèches sur les côtés, bande qui glisse au centre. */
.camping-detail-accommodations__gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-20);
  width: 100%;
  min-width: 0;
}

.camping-detail-accommodations__strip-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  outline: none;
  /* pan-y : le navigateur garde le scroll VERTICAL de la page quand le doigt
     part de la bande — Swiper gère lui-même le glissement horizontal en JS.
     (pan-x bloquait toute remontée/descente de page depuis ces zones.) */
  touch-action: pan-y pinch-zoom;
}

/* Swiper base CSS n'est pas bundlée dans main.v3.css : chaque galerie doit
   poser elle-même le layout de son wrapper (cf. règle équivalente des
   sections thématiques). */
.camping-detail-accommodations__strip-viewport .swiper-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  padding: var(--space-15) 0;
}

@media (max-width: 767px) {
  .camping-detail-accommodations__gallery .camping-detail-accommodations__page-btn {
    display: none;
  }
}

.camping-detail-accommodations__slide {
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
}

.page-camping-detail .camping-detail-accommodations__slide {
  display: flex;
  flex-direction: column;
}

.page-camping-detail .camping-detail-accommodations__slide .camping-accommodation-card {
  flex: 1;
  height: 100%;
}

.page-camping-detail .camping-accommodation-card__body {
  flex: 1;
}

.page-camping-detail .camping-accommodation-card__main {
  flex: 1;
}

.page-camping-detail .camping-accommodation-card__tags {
  min-height: calc(var(--line-height-21) + 2px);
}

.page-camping-detail .camping-accommodation-card__tags--empty {
  visibility: hidden;
}

@media (min-width: 768px) {
  .page-camping-detail .camping-detail-accommodations__slide {
    flex: 0 0 calc((100% - var(--space-15)) / 2);
    width: calc((100% - var(--space-15)) / 2);
    max-width: calc((100% - var(--space-15)) / 2);
  }

  .page-camping-detail .camping-detail-accommodations__slide .camping-accommodation-card {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .camping-detail-accommodations__viewport {
    overflow: hidden;
  }
}

@media (max-width: 767px) {
  .camping-detail-accommodations__slide {
    flex: 0 0 min(330px, 88vw);
    width: min(330px, 88vw);
  }

  .camping-accommodation-card__tags-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.camping-accommodation-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  box-sizing: border-box;
  padding: var(--space-15);
  background: var(--color-surface);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-card);
  box-shadow: 0 0 7.5px 0 var(--color-border-light);
}

.camping-accommodation-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-image);
}

/* Galerie photos de la carte : Swiper standard v3 (data-v3-swiper), une
   photo plein cadre par vue. Swiper base CSS n'est pas bundlée : le layout
   du wrapper est posé ici, comme pour les autres galeries v3. */
.camping-accommodation-card__media-swiper {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.camping-accommodation-card__media-swiper .swiper-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
}

.camping-accommodation-card__media-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

/* Puces du Swiper : même look que les dots historiques de la carte. */
.camping-accommodation-card__dots .pagination-carousel__bullet {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  border-radius: 50%;
}

.camping-accommodation-card__dots .pagination-carousel__bullet--active {
  width: 10px;
  height: 10px;
  background: var(--color-surface);
}

/* Les puces Swiper respirent : un peu plus hautes que le bord bas. */
.camping-accommodation-card__dots.pagination-carousel__indicators {
  bottom: var(--space-25, 25px);
}

/* Carte sans prix (logement sourcé sans dispo) : bouton « Réserver » qui
   ouvre le lien tracké du forfait « site officiel ». */
.camping-accommodation-card__bottom--reserver {
  display: flex;
  justify-content: center;
  padding: var(--space-10) 0 0;
}

.camping-accommodation-card__reserver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 20px;
  margin: 0;
  background: var(--color-primary);
  color: var(--color-text-inverse, #fff);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-cta);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  cursor: pointer;
  box-shadow: none;
}

/* Neutralise le legacy `button:hover { background:none; border:none }`. */
.camping-accommodation-card__reserver:hover,
.camping-accommodation-card__reserver:focus,
.camping-accommodation-card__reserver:active {
  border-color: var(--color-primary-gradient-end, #ff9e00);
  opacity: 1;
}

.camping-accommodation-card__media-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.camping-accommodation-card__badge-pub {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-10);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-text-inverse);
  background: rgba(36, 0, 70, 0.8);
  border-radius: var(--radius-label);
}

.camping-accommodation-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  padding: var(--space-5);
  margin: 0;
  background: rgba(36, 0, 70, 0.8);
  border: none;
  border-radius: var(--radius-cta);
  box-shadow: 0 0 15px 0 var(--color-border-strong);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.camping-accommodation-card__play:hover {
  opacity: 0.85;
}

.camping-accommodation-card__play:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.camping-accommodation-card__play img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.camping-accommodation-card__dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: row;
  gap: var(--space-5);
  align-items: center;
  justify-content: center;
  width: 162px;
  transform: translateX(-50%);
}

.camping-accommodation-card__dot {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  background: rgba(36, 0, 70, 0.2);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-cta);
  cursor: pointer;
}

.camping-accommodation-card__dot--active {
  width: 10px;
  height: 10px;
  background: var(--color-surface);
  border: none;
}

.camping-accommodation-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  width: 100%;
}

.camping-accommodation-card__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.camping-accommodation-card__housing-title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-32);
  color: var(--color-secondary);
}

.camping-accommodation-card__camping-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}

.camping-accommodation-card__camping-name {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
}

.camping-accommodation-card__rating {
  display: inline-flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
}

.camping-accommodation-card__rating-num {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: #000;
}

.camping-accommodation-card__star {
  display: block;
}

.camping-accommodation-card__location {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
}

.camping-accommodation-card__tags-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-15);
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.camping-accommodation-card__tags {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  min-width: 0;
}

.camping-accommodation-card__tag {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  padding: 0 var(--space-10);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-label);
}

.camping-accommodation-card__more {
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

/* Onglets Prix / Détails, sous le nom de l'hébergement. */
.camping-accommodation-card__tabs {
  display: flex;
  flex-direction: row;
  gap: var(--space-15);
  width: 100%;
  margin-top: var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.camping-accommodation-card__tab {
  padding: 0 0 6px;
  margin: 0 0 -1px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

/* Neutralise le legacy `button:hover { background:none; border:none }`
   et marque l'onglet actif. */
.camping-accommodation-card__tab:hover,
.camping-accommodation-card__tab:focus,
.camping-accommodation-card__tab:active {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-primary);
}

.camping-accommodation-card__tab--active,
.camping-accommodation-card__tab--active:hover,
.camping-accommodation-card__tab--active:focus,
.camping-accommodation-card__tab--active:active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

/* Zone des panneaux : le panneau Prix (contenu habituel de la carte) reste
   dans le flux et fixe le gabarit ; le panneau Détails se superpose dans la
   même zone avec son propre défilement. La galerie et la hauteur de la carte
   ne bougent jamais, chaque carte bascule indépendamment. */
.camping-accommodation-card__panes {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
}

.camping-accommodation-card__pane--prix {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.camping-accommodation-card__pane--details {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  gap: var(--space-10);
  overflow-y: auto;
  background: var(--color-surface);
}

.camping-accommodation-card__panes--details-active > .camping-accommodation-card__pane--prix {
  visibility: hidden;
}

.camping-accommodation-card__panes--details-active > .camping-accommodation-card__pane--details {
  display: flex;
}

.camping-accommodation-card__description-text {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
  white-space: pre-line;
}

/* Détails des pièces (panneau « voir plus ») : une ligne compacte par
   section, mêmes jetons typographiques que la description. */
.camping-accommodation-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.camping-accommodation-card__details-line {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
}

.camping-accommodation-card__details-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.camping-accommodation-card__more:hover {
  text-decoration: underline;
}

.camping-accommodation-card__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.camping-accommodation-card__price-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-30);
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 0 var(--space-15);
  overflow: hidden;
  background: var(--color-surface-muted);
  border-radius: var(--radius-card);
}

.camping-accommodation-card__price-inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-5);
  justify-content: center;
  min-width: 0;
  padding: var(--space-15) 0;
}

.camping-accommodation-card__dates {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-27);
  color: #343a40;
}

.camping-accommodation-card__price-line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}

.camping-accommodation-card__amount {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
}

.camping-accommodation-card__strike {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
}

.camping-accommodation-card__discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: var(--space-5);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-21);
  color: var(--color-text-inverse);
  background: var(--color-secondary-light);
  border-radius: var(--radius-label);
}

.camping-accommodation-card__meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-21);
  color: var(--color-secondary);
}

.camping-accommodation-card__meta-strong {
  font-weight: var(--font-weight-bold);
}

.camping-accommodation-card__meta-sep {
  font-weight: var(--font-weight-regular);
}

.camping-accommodation-card__cta {
  display: flex;
  flex-shrink: 0;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: var(--space-5);
  background: var(--color-primary);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  transition: background-color var(--transition-primary-cta, 1s ease);
}

.page-camping-detail .camping-accommodation-card__cta:hover,
.page-camping-detail .camping-accommodation-card__cta:focus-visible {
  background: var(--color-primary-gradient-end, #ff9e00);
  filter: none;
  opacity: 1;
}

.camping-accommodation-card__cta img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.camping-accommodation-card__seller {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-muted, #adb5bd);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Onglet Détails actif (classe posée par camping-detail-carousel.js) : la
   carte prix se compacte sur UNE ligne — dates + prix + promo, infos
   secondaires (nuits, prix/nuit, vendeur) masquées — pour rendre un
   maximum de hauteur au panneau Détails. Onglet Prix : mise en page
   normale. */
.camping-accommodation-card--details-active .camping-accommodation-card__price-inner {
  flex-flow: row wrap;
  gap: var(--space-5) var(--space-10);
  align-items: center;
  padding: var(--space-5) 0;
}

.camping-accommodation-card--details-active .camping-accommodation-card__dates {
  font-size: var(--font-size-12, 12px);
  line-height: var(--line-height-18, 18px);
}

.camping-accommodation-card--details-active .camping-accommodation-card__amount {
  font-size: var(--font-size-16);
  line-height: var(--line-height-18, 18px);
}

.camping-accommodation-card--details-active .camping-accommodation-card__discount {
  font-size: var(--font-size-12, 12px);
  line-height: var(--line-height-18, 18px);
}

.camping-accommodation-card--details-active .camping-accommodation-card__discount {
  min-height: 16px;
  padding: 2px var(--space-5);
}

/* Nuits / prix par nuit / vendeur / prix barré : masqués le temps de la
   consultation des détails — dates, prix et promo restent, sur une seule
   ligne (le prix barré faisait passer le bloc sur deux). */
.camping-accommodation-card--details-active .camping-accommodation-card__meta,
.camping-accommodation-card--details-active .camping-accommodation-card__seller,
.camping-accommodation-card--details-active .camping-accommodation-card__strike {
  display: none;
}

/* Le panneau Détails se resserre aussi pour en montrer plus. */
.camping-accommodation-card--details-active .camping-accommodation-card__description-text,
.camping-accommodation-card--details-active .camping-accommodation-card__details-line {
  font-size: var(--font-size-12, 12px);
  line-height: var(--line-height-18, 18px);
}

.camping-accommodation-card--details-active .camping-accommodation-card__details {
  gap: 2px;
  margin-top: var(--space-5);
}

.camping-detail-accommodations__pagination {
  display: none;
}

@media (min-width: 768px) {
  .camping-detail-accommodations__pagination {
    display: flex;
    flex-direction: row;
    gap: var(--space-15);
    align-items: center;
    justify-content: center;
  }
}

/* Tous les carrousels v3 sont horizontaux : pan-y laisse au navigateur le
   scroll VERTICAL de la page quand le doigt part d'un swiper — sans quoi la
   page ne remonte/descend plus depuis ces zones. Les viewports historiques
   portent déjà la règle un par un ; celle-ci couvre aussi les swipers
   imbriqués (galerie photos des cartes hébergement) et les futurs. */
.swiper[data-v3-swiper] {
  touch-action: pan-y pinch-zoom;
}

/* cssMode (écrans tactiles, posé par v3-listing-gallery.js) : Swiper délègue
   le défilement au navigateur — wrapper en scroll natif + snap. La base CSS
   Swiper n'étant pas bundlée, ses règles css-mode sont reprises ici. */
.swiper[data-v3-swiper].swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.swiper[data-v3-swiper].swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper[data-v3-swiper].swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

/* Galerie photos imbriquée d'une carte : son défilement horizontal ne doit
   pas entraîner la bande parente en bout de course. */
.camping-accommodation-card__media-swiper.swiper-container-css-mode > .swiper-wrapper {
  overscroll-behavior-x: contain;
}

/* Flèches d'un carrousel v3 sans défilement possible (tout tient dans la
   fenêtre) : masquées par le binder générique (v3-listing-gallery.js).
   Swiper pose lui-même swiper-pagination-lock sur la pagination. */
.v3-nav-locked,
.pagination-carousel__indicators.swiper-pagination-lock {
  display: none !important;
}

/* Barre de navigation mobile de la bande hébergements : flèches + points,
   sous la bande. En desktop les flèches latérales suffisent — masquée. */
.camping-detail-accommodations__nav-mobile {
  display: none;
}

@media (max-width: 767px) {
  .camping-detail-accommodations__nav-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-15);
    /* Le conteneur (flex column) espace déjà ses enfants de 25px : la marge
       négative ramène l'écart bande → barre à 10px. */
    margin-top: calc(-1 * var(--space-15));
    margin-bottom: var(--space-15);
  }
}

/* Points de pagination de la bande : posés dans le flux de la barre (la
   variante des cartes est en absolu sur la photo) et lisibles sur fond
   clair — la pastille blanche des cartes serait invisible ici. */
.camping-detail-accommodations__strip-dots.pagination-carousel__indicators {
  position: static;
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.camping-detail-accommodations__strip-dots .pagination-carousel__bullet {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(36, 0, 70, 0.2);
  border: none;
  border-radius: 50%;
}

.camping-detail-accommodations__strip-dots .pagination-carousel__bullet--active {
  width: 10px;
  height: 10px;
  background: var(--color-secondary);
}

.camping-detail-accommodations__page-btn {
  display: flex;
  flex-shrink: 0; /* flex item de la galerie : sans ça la bande le comprime */
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 35px;
  padding: var(--space-5);
  margin: 0;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-cta);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.camping-detail-accommodations__page-btn:hover:not(:disabled) {
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 10px rgba(255, 255, 255, 0.35);
}

/* Même style pour les deux flèches (le fond blanc translucide historique de
   la gauche était invisible sur page blanche) : fond violet, flèche blanche. */
.camping-detail-accommodations__page-btn--prev:hover:not(:disabled),
.camping-detail-accommodations__page-btn--next:hover:not(:disabled) {
  background: rgba(36, 0, 70, 0.92);
}

.camping-detail-accommodations__page-btn--prev,
.camping-detail-accommodations__page-btn--next {
  background: rgba(36, 0, 70, 0.8);
}

.camping-detail-accommodations__page-btn img {
  filter: brightness(0) invert(1);
}

.camping-detail-accommodations__page-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.camping-detail-accommodations__page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.camping-detail-accommodations__page-bars {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}

.camping-detail-accommodations__page-bar {
  width: 50px;
  height: 5px;
  background: var(--color-border-light);
  border-radius: 100px;
}

.camping-detail-accommodations__page-bar.is-active {
  background: var(--color-secondary);
}

/* Infos pratiques — Figma Info Card 157:6375 (dans head guide page 120:8133) */
.camping-detail-practical {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.camping-detail-practical__card {
  box-sizing: border-box;
  padding: var(--space-20);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.camping-detail-practical__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
}

.camping-detail-practical__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-15);
}

.camping-detail-practical__head-icon {
  display: block;
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.camping-detail-practical__title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
}

/* Nom du camping en sous-titre du bloc : exactement le dégradé du H1
   (.camping-detail-hero__title). `width: fit-content` + `align-self` : le
   dégradé doit se déployer sur la largeur du TEXTE, pas sur celle du bloc —
   sinon un nom court ne prend que le début de la rampe (tout orange). */
.camping-detail-practical__nom {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Carte d'emplacement du camping (CSV ligne 187) — même gabarit que la carte
   des sites touristiques. */
.camping-detail-practical__map-wrap {
  position: relative;
  width: 100%;
}

.camping-detail-practical__map-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.camping-detail-practical__map-loading.is-visible {
  opacity: 1;
  visibility: visible;
}

.camping-detail-practical__map-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 109, 0, 0.2);
  border-top-color: var(--color-primary, #ff6d00);
  border-radius: 50%;
  animation: camping-map-spin 0.7s linear infinite;
}

@keyframes camping-map-spin {
  to {
    transform: rotate(360deg);
  }
}

.camping-detail-practical__carte {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--color-surface-muted, #e9ecef);
}

.camping-detail-practical__carte .maplibregl-map,
.camping-detail-practical__carte .maplibregl-canvas-container {
  width: 100%;
  height: 100%;
}

/* Images enveloppées dans <picture> (partial img-deferred, galerie héro :
   source WebP + repli JPEG). <picture> est en ligne et sans hauteur : les
   <img> en height:100% ne remplissaient plus leur cadre (bande noire sous le
   poster vidéo du héro). Le <picture> prend tout le cadre. */
.camping-detail-hero__slide-inner picture,
.guide-camping-gallery__slide-inner picture,
.camping-detail-water-park__photo picture,
.camping-detail-proches-card__media picture,
.camping-accommodation-card__media-slide picture,
.guide-top-push-card__img-link picture,
.guide-top-push-card picture,
.medias picture,
.media picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Cartes MapLibre chargées à la demande (/javascripts/lazy-map.js) : cadre
   cliquable rendu côté serveur dans le conteneur de la carte (infos
   pratiques, tourisme), même gabarit que la carte → CLS nul. Retiré du DOM
   quand la bibliothèque est prête. */
.lazy-map {
  position: relative;
}

.lazy-map__placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
  font: inherit;
  color: var(--color-text, #240046);
  background-color: #eef1ee;
  background-image:
    linear-gradient(rgba(36, 0, 70, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 0, 70, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

.lazy-map__pin {
  width: 44px;
  height: 44px;
  display: block;
}

.lazy-map__label {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(36, 0, 70, 0.15);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.lazy-map__placeholder:hover .lazy-map__label,
.lazy-map__placeholder:focus-visible .lazy-map__label {
  border-color: var(--color-primary, #ff6d00);
}

.lazy-map__placeholder:disabled {
  cursor: progress;
}

.lazy-map--ready > .lazy-map__placeholder {
  display: none;
}

/* Pins / clusters : même rendu que le comparateur, scoped fiche. */
.page-camping-detail .search-map-marker {
  width: 0;
  height: 0;
  cursor: pointer;
  position: relative;
  line-height: 0;
}

.page-camping-detail .search-map-marker__body {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 40px;
  min-width: 40px;
}

.page-camping-detail .search-map-marker__icon {
  display: block;
  width: 40px !important;
  height: 40px !important;
  max-width: none !important;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

.page-camping-detail .search-map-marker__price {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 5px;
  white-space: nowrap;
  font-family: Arial, sans-serif;
  background: var(--color-primary, #ff7500);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.page-camping-detail .search-map-marker--nodispo .search-map-marker__icon {
  opacity: 0.95;
}

.page-camping-detail .search-map-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-secondary, #7b2cbf);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  border: 2px solid #fff;
}

.page-camping-detail .search-map-cluster--sm {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.page-camping-detail .search-map-cluster--md {
  width: 42px;
  height: 42px;
  font-size: 13px;
}

.page-camping-detail .search-map-cluster--lg {
  width: 48px;
  height: 48px;
  font-size: 14px;
}

.camping-detail-practical__popup-price {
  margin: 4px 0 0;
  font-weight: 700;
  color: var(--color-primary, #ff7500);
}

.camping-detail-practical__pin {
  width: 36px;
  height: 36px;
  cursor: pointer;
  line-height: 0;
}

.camping-detail-practical__pin img {
  display: block;
  width: 36px;
  height: 36px;
}

@media (max-width: 767px) {
  .camping-detail-practical__carte {
    height: 240px;
  }
}

.camping-detail-practical__address-cluster {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.camping-detail-practical__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
  width: 100%;
}

.camping-detail-practical__label {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
}

.camping-detail-practical__text {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
}

.camping-detail-practical__text--multiline {
  white-space: pre-wrap;
}

.camping-detail-practical__map {
  position: relative;
  width: 100%;
  height: 282px;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: var(--color-surface-muted);
}

.camping-detail-practical__map-live {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.camping-detail-practical__map.is-open .camping-detail-practical__map-live {
  pointer-events: auto;
}

.camping-detail-practical__map-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(36, 0, 70, 0.2);
  border-radius: inherit;
  pointer-events: none;
}

.camping-detail-practical__map.is-open .camping-detail-practical__map-overlay,
.camping-detail-practical__map.is-open .camping-detail-practical__map-pin,
.camping-detail-practical__map.is-open .camping-detail-practical__map-cta {
  display: none;
}

.camping-detail-practical__map-live .maplibregl-map,
.camping-detail-practical__map-live .maplibregl-canvas-container,
.camping-detail-practical__map-live canvas {
  width: 100% !important;
  height: 100% !important;
}

.camping-detail-practical__map-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.camping-detail-practical__map-pin {
  position: absolute;
  top: 34%;
  left: 23.7%;
  z-index: 2;
  display: block;
  width: 45px;
  height: 45px;
  object-fit: contain;
  pointer-events: none;
}

.camping-detail-practical__map:not(.is-open) .maplibregl-ctrl-top-right,
.camping-detail-practical__map:not(.is-open) .maplibregl-ctrl-bottom-right {
  opacity: 0;
  pointer-events: none;
}

.camping-detail-practical__map-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 182px;
  min-height: 45px;
  padding: var(--space-5) var(--space-15);
  margin: 0;
  border: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-27);
  color: var(--color-text-inverse);
  text-decoration: none;
  background: var(--color-primary);
  border-radius: var(--radius-cta);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color var(--transition-primary-cta, 1s ease);
}

.page-camping-detail .camping-detail-practical__map-cta:hover,
.page-camping-detail .camping-detail-practical__map-cta:focus-visible {
  background: var(--color-primary-gradient-end, #ff9e00);
  filter: none;
  opacity: 1;
}

.camping-detail-practical__map-cta:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .camping-detail-practical__map {
    height: min(282px, 45vh);
  }

  .camping-detail-practical__map-pin {
    left: 18%;
  }
}

.comparateur-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.comparateur-card img {
  width: 100%;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.comparateur-card {
  position: relative;
}

.comparateur-card span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
}

.comparateur-fact {
  margin-top: 15px;
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-card);
  padding: 15px;
}

.page-hub .hub-fact {
  text-align: center;
}

.page-hub .hub-fact__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  margin-top: 0;
  margin-bottom: 10px;
}

.page-hub .hub-fact__body {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  line-height: var(--line-height-27);
}

.page-hub .hub-fact__link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.page-hub .hub-fact__link p,
.page-hub .hub-fact__text p {
  margin: 0;
  display: inline;
}

.page-hub .hub-fact__link a {
  color: inherit;
  text-decoration: none;
}

.page-hub .hub-fact__link:hover,
.page-hub .hub-fact__link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.page-hub .hub-block-title {
  text-align: center;
}

.page-hub .hub-thematic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.page-hub .hub-thematic-card {
  position: relative;
  border-radius: var(--card, 20px);
  overflow: hidden;
}

.page-hub .hub-thematic-card__image-wrap {
  position: relative;
  height: 250px;
  border-radius: var(--card, 20px);
}

.page-hub .hub-thematic-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-hub .hub-thematic-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(
    --gradient-photo-overlay,
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 66.67%,
      rgba(36, 0, 70, 0.55) 83%,
      rgba(36, 0, 70, 1) 100%
    )
  );
}

/* Note: overlay unified for both grids (12 thumbnails) */

.page-hub .hub-thematic-card__label {
  position: absolute;
  left: 15px;
  bottom: 15px;
  transform: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.page-hub .comparateur-block {
  background: var(--surface-grayscale-grayscale-100, #f8f9fa);
}

@media (max-width: 767px) {
  /* Eau: 2 cartes par ligne (3 lignes pour 6 cartes) */
  .page-hub .hub-thematic-grid--water {
    display: none;
  }

  /* Gamme: swiper en mobile */
  .page-hub .hub-thematic-grid--gamme {
    display: none;
  }

  .page-hub .hub-thematic-swiper-wrap {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 15px;
    box-sizing: border-box;
  }

  .page-hub .hub-thematic-swiper {
    display: block;
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
    /* pan-y : Swiper gère l'horizontal, le navigateur garde le scroll de page */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .page-hub .hub-thematic-swiper .swiper-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  .page-hub .hub-thematic-swiper .swiper-slide {
    flex-shrink: 0;
    width: 154px;
    height: auto;
    box-sizing: border-box;
  }

  .page-hub .hub-thematic-swiper.swiper-container-initialized .swiper-wrapper {
    gap: 0;
  }

  .page-hub .hub-thematic-swiper:not(.swiper-container-initialized) .swiper-wrapper {
    gap: 15px;
  }

  .page-hub .hub-thematic-card__image-wrap img {
    -webkit-user-drag: none;
    user-select: none;
  }

  .page-hub .hub-saviez-swiper .swiper-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  .page-hub .hub-saviez-swiper .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: auto;
  }

  .page-hub .hub-swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    padding: 0 15px;
  }

  .page-hub .hub-swiper-pagination .pagination-carousel__bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(36, 0, 70, 0.2);
    border: none;
  }

  .page-hub .hub-swiper-pagination .pagination-carousel__bullet--active {
    width: 10px;
    height: 10px;
    background: #240046;
  }
}

@media (min-width: 768px) {
  .page-hub section > .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-hub .hub-thematic-grid {
    justify-items: center;
  }

  .page-hub .hub-block-text-wrap + .hub-thematic-grid {
    margin-top: 20px;
  }

  .page-hub .hub-thematic-card {
    width: 280px;
    max-width: 100%;
  }

  .page-hub .hub-thematic-card__image-wrap {
    width: 280px;
    height: 190px;
    border-radius: var(--card, 20px);
    /* img + overlay CSS (1/3 bas) — plus de fond --hub-thumb teinté */
    background: none;
  }

  .page-hub .hub-thematic-card__image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--card, 20px);
  }

  .page-hub .hub-thematic-card__overlay {
    display: block;
    background: var(
      --gradient-photo-overlay,
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 66.67%,
        rgba(36, 0, 70, 0.55) 83%,
        rgba(36, 0, 70, 1) 100%
      )
    );
  }

  .page-hub .hub-gamme-swiper {
    display: none;
  }

  .page-hub .hub-water-swiper {
    display: none;
  }
}

.conf-content,
.conf-faq {
  color: var(--color-secondary);
}

.conf-content a {
  color: var(--color-primary);
}

.conf-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 10px 15px;
  margin-bottom: 10px;
}

/* FAQ boxes (static pages + confidentialité) */
:is(body.page-confidentialite, body[class*="page--static-"]) .conf-faq__item {
  border-radius: var(--card, 20px);
  border: 2px solid var(--border-grayscale-grayscale-200, #e9ecef);
  background: var(--surface-grayscale-grayscale-100, #f8f9fa);
}

:is(body.page-confidentialite, body[class*="page--static-"]) .conf-faq__item[open] {
  border-color: var(--border-secondary-secondary-100, #240046);
}

:is(body.page-confidentialite, body[class*="page--static-"]) .conf-faq__item > summary {
  color: var(--text-secondary-secondary-100, #240046);
  font-size: var(--font-size-alias-size-18, 18px);
  font-style: normal;
  font-weight: var(--font-weight-alias-weight-black, 900);
  line-height: var(--font-line-height-alias-line-height-27, 27px);
}

/* FAQ disclosure arrow: right side (hide native left marker) */
:is(body.page-confidentialite, body[class*="page--static-"]) .conf-faq__item > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

:is(body.page-confidentialite, body[class*="page--static-"]) .conf-faq__item > summary::-webkit-details-marker {
  display: none;
}

:is(body.page-confidentialite, body[class*="page--static-"]) .conf-faq__item > summary::marker {
  content: "";
}

:is(body.page-confidentialite, body[class*="page--static-"]) .conf-faq__item > summary::after {
  content: "▾";
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-secondary-secondary-100, #240046);
  border-radius: 999px;
  line-height: 1;
}

:is(body.page-confidentialite, body[class*="page--static-"]) .conf-faq__item[open] > summary::after {
  content: "▴";
}

.page-comparateur .comparateur-alert-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 310;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.page-comparateur .comparateur-alert-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.page-comparateur .comparateur-alert-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, calc(100vw - 40px));
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: 0 0 15px 0 var(--shadow-grayscale-grayscale-500, #adb5bd);
  z-index: 311;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.page-comparateur .comparateur-alert-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.page-comparateur .comparateur-alert-modal__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
}

.page-comparateur .comparateur-alert-modal__head-title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: 28px;
  font-weight: var(--font-weight-black);
  line-height: 30px;
  color: var(--color-text-inverse);
  text-align: center;
}

.page-comparateur .comparateur-alert-modal__close {
  position: absolute;
  right: 20px;
  top: 20px;
  box-sizing: border-box;
  width: 55px;
  height: 35px;
  padding: 5px 15px;
  border: 0;
  border-radius: 100px;
  background: var(--color-secondary, #240046);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-comparateur .comparateur-alert-modal__close-x {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.page-comparateur .comparateur-alert-modal__close-x::before,
.page-comparateur .comparateur-alert-modal__close-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  background: var(--color-text-inverse, #fff);
  transform-origin: center;
}

.page-comparateur .comparateur-alert-modal__close-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.page-comparateur .comparateur-alert-modal__close-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.page-comparateur .comparateur-alert-modal__body {
  background: var(--color-surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-comparateur .comparateur-alert-modal__form-wrap {
  width: 400px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-comparateur .comparateur-alert-modal__lead {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: 24px;
  font-weight: var(--font-weight-regular);
  line-height: 27px;
  color: var(--color-secondary);
}

.page-comparateur .comparateur-alert-modal__lead strong {
  font-weight: var(--font-weight-black);
}

.page-comparateur .comparateur-alert-modal__form {
  display: grid;
  gap: 15px;
}

.page-comparateur .comparateur-alert-modal__input,
.page-comparateur .comparateur-alert-modal__selectlike {
  height: 35px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 0 10px;
  box-sizing: border-box;
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 27px;
  color: var(--color-secondary);
  background: var(--color-surface);
}

.page-comparateur .comparateur-alert-modal__input--placeholder,
.page-comparateur .comparateur-alert-modal__input::placeholder,
.page-comparateur
  .comparateur-alert-modal__selectlike.comparateur-alert-modal__input--placeholder {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-light);
}

.page-comparateur .comparateur-alert-modal__selectlike {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* vrais <select> : même rendu que la maquette, chevron en fond */
.page-comparateur select.comparateur-alert-modal__selectlike {
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%23240046' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.page-comparateur .comparateur-alert-modal__input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.page-comparateur .comparateur-alert-modal__input.is-invalid,
.page-comparateur .comparateur-alert-modal__selectlike.is-invalid {
  border-color: #d32f2f;
}

.page-comparateur .comparateur-alert-modal__error {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  line-height: 20px;
  color: #d32f2f;
}

.page-comparateur .comparateur-alert-modal__success {
  margin: 0;
  padding: 15px;
  border-radius: 5px;
  background: var(--color-surface-muted);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-secondary);
}

.page-comparateur .comparateur-alert-modal__submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}

.page-comparateur .comparateur-alert-modal__chevron {
  color: var(--color-secondary);
  font-size: 20px;
  line-height: 1;
  font-weight: var(--font-weight-black);
}

.page-comparateur .comparateur-alert-budget {
  background: var(--color-surface-muted);
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-comparateur .comparateur-alert-budget__title {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 27px;
  color: #000;
}

.page-comparateur .comparateur-alert-budget__toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-comparateur .comparateur-alert-budget__toggle {
  width: 45px;
  height: 30px;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
  display: block;
}

.page-comparateur .comparateur-alert-budget__toggle::after {
  content: "";
  position: absolute;
  inset: 26.67% 0 23.33% 10.94%;
  border-radius: 100px;
  background: var(--color-border, #dee2e6);
  transition: background-color var(--transition-primary-cta, 1s ease);
}

.page-comparateur .comparateur-alert-budget__toggle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--color-secondary, #240046);
  z-index: 1;
  transition: left 0.2s ease, background-color 0.2s ease;
}

.page-comparateur .comparateur-alert-budget__toggle.is-on::after {
  background: var(--color-secondary, #240046);
}

.page-comparateur .comparateur-alert-budget__toggle.is-on::before {
  left: calc(100% - 21px);
  background: var(--color-surface, #fff);
}

.page-comparateur .comparateur-alert-budget__toggle-label {
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 18px;
  color: var(--color-secondary);
}

.page-comparateur .comparateur-alert-budget__range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.page-comparateur .comparateur-alert-budget__col {
  display: grid;
  gap: 5px;
}

.page-comparateur .comparateur-alert-budget__label {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 18px;
  color: var(--color-secondary);
}

.page-comparateur .comparateur-alert-budget__field {
  height: 35px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-weight: var(--font-weight-light);
  line-height: 27px;
  color: var(--color-secondary);
}

.page-comparateur .comparateur-alert-budget__field input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.page-comparateur .comparateur-alert-budget__field input::-webkit-outer-spin-button,
.page-comparateur .comparateur-alert-budget__field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* budget illimité : les montants sont grisés et ignorés */
.page-comparateur .comparateur-alert-budget__range-row.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.page-comparateur .comparateur-alert-modal__submit {
  height: 45px;
  border: 0;
  border-radius: 100px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 27px;
  cursor: pointer;
}

.page-comparateur .comparateur-alert-modal__note {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-secondary);
  text-align: center;
}

.page-comparateur .comparateur-alert-modal__footer-note {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-text-muted);
  text-align: center;
}

/* Neutralise padding top/bottom générique de `.section` (50px) */
:is(.page-confidentialite, .page-static-legal) .section--conf-faq {
  padding-top: var(--space-25);
  padding-bottom: var(--space-25);
}

:is(.page-confidentialite, .page-static-legal) .conf-main > .section:nth-of-type(2):has(+ .section--conf-faq) {
  padding-bottom: var(--space-25);
}

:is(.page-confidentialite, .page-static-legal) .conf-main > .section.section--conf-faq + .section {
  padding-top: var(--space-25);
}

/* Bloc titre (.conf-head) : la section garde 50px de bas par défaut — retiré en mobile */
@media (max-width: 767px) {
  .page-confidentialite .conf-main > .section:first-of-type {
    padding-bottom: 0;
  }
}

/* Confidentialité desktop: réduire l'espace entre la date et le premier H2 */
@media (min-width: 992px) {
  .page-confidentialite .conf-main > .section:first-of-type {
    padding-bottom: var(--space-20);
  }

  .page-confidentialite .conf-main > .section:nth-of-type(2) {
    padding-top: var(--space-20);
  }
}

/*
 * Confidentialité : le header et le <main> sont frères dans #main — sans z-index explicite sur
 * la liste autocomplete, le contenu recouvre le dropdown (fond transparent). Alignement sur
 * home / comparateur / superdeals (home.v3.css + séparateurs).
 */
.page-confidentialite #main {
  position: relative;
}

.page-confidentialite #main > .header {
  z-index: 200;
}

.page-confidentialite main.conf-main {
  position: relative;
  z-index: 0;
}

.page-confidentialite .header__search .search-form__item--text {
  position: static;
}

.page-confidentialite .header__search .search-form {
  position: relative;
}

/* Barre desktop (search-results-bar) : wrapper = largeur du champ texte */
.page-confidentialite .header__search .search-results-bar .autoComplete_wrapper {
  width: 100%;
}

/*
 * Pill mobile : engine-v3 enveloppe l’input dans .autoComplete_wrapper après le 1er rendu.
 * width:100% sur ce wrapper le faisait occuper toute la ligne flex → loupe par-dessus « Destination » puis saut au reflow.
 * Même logique que .guide-search-card__input { flex: 1; min-width: 0 } avant wrap.
 */
.page-confidentialite .header__search .guide-search-header-mobile__field .autoComplete_wrapper {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  position: relative;
  box-sizing: border-box;
}

.page-confidentialite .header__search .autoComplete_wrapper > ul {
  position: absolute;
  z-index: 210;
  left: 0;
  right: auto;
  width: 100%;
  min-width: var(--header-search-form-width, 470px);
  max-width: min(100vw - 2rem, 640px);
  top: 100%;
  margin-top: 4px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-card, 12px);
  background: #fff;
  box-sizing: border-box;
}

.page-confidentialite .header__search .autoComplete_wrapper > ul > li {
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}
.page-confidentialite .header__search .autoComplete_wrapper > ul > li[role="option"] {
  cursor: pointer;
}

.page-confidentialite .header__search .autocomplete-separator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 6px;
  box-sizing: border-box;
}

.page-confidentialite .header__search .autocomplete-separator--campings {
  margin-top: 10px;
}

.page-confidentialite .header__search .autocomplete-separator__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.page-confidentialite .header__search .autocomplete-separator__label {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
  background: linear-gradient(
    180deg,
    var(--color-primary-gradient-end, #ff9e00),
    var(--color-secondary-light, #9d4edd)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-confidentialite .header__search .autocomplete-separator::after {
  content: "";
  flex: 1 0 100%;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--color-primary-gradient-end, #ff9e00),
    var(--color-secondary-light, #9d4edd)
  );
}

/* Pas de hero / guide-moteur sous le header : garder le moteur visible (sinon display:none page-guide mobile) */
@media (max-width: 991px) {
  .page-confidentialite .header__search {
    display: flex !important;
    justify-content: center;
    width: 100%;
    margin-left: 0;
  }

  .page-confidentialite .header--with-search .header__inner {
    align-items: stretch;
  }

  /* Neutralise marges legacy du pill (largeur transverse 242px). */
  .page-confidentialite .guide-search-header-mobile__field {
    width: 242px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Confidentialité ≤767px : flex comme comparateur (formulaire + pill flexibles, filtre non chevauché). */
@media (max-width: 767px) {
  .page-confidentialite.page-guide .header__search {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0;
  }

  .page-confidentialite.page-guide .header__search .guide-search-header-mobile {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }

  .page-confidentialite.page-guide .header__search .guide-search-header-mobile__form {
    flex: 1 1 auto;
    min-width: 0;
  }

  .page-confidentialite.page-guide .header__search .guide-search-header-mobile__field {
    width: 242px !important;
    flex: 0 0 242px;
    max-width: 242px;
    min-width: 0;
  }

  .page-confidentialite.page-guide .header__search .guide-search-header-mobile__filter {
    flex-shrink: 0;
    margin-left: 0;
  }

  .page-guide .header__search {
    margin-left: 0;
  }

  .comparateur-cards {
    grid-template-columns: 1fr;
  }

  /* Meilleur prix / meilleure promo : les cartes tiennent sur une seule ligne
     en mobile — elles s'empilaient auparavant, chacune sur toute la largeur.
     Les tailles internes sont resserrées pour entrer dans une colonne de
     ~160px. Cette largeur ne dépend pas du nombre de cartes : une carte seule
     garde exactement le même gabarit, simplement centrée. */
  .camping-detail-duo__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .camping-detail-duo__grid > .camping-detail-card {
    grid-column: auto;
  }

  /* Une seule offre : meme largeur qu'en deux colonnes (la carte ne doit pas
     s'elargir parce que l'autre manque), centree sur la grille. */
  .camping-detail-duo__grid > .camping-detail-card:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 10px) / 2);
  }

  .camping-detail-duo__grid > .camping-detail-card {
    padding: 10px;
    gap: 10px;
  }

  .camping-detail-duo__grid > .camping-detail-card .camping-detail-card__badge-icon {
    width: 26px;
    height: 26px;
  }

  .camping-detail-duo__grid > .camping-detail-card .camping-detail-card__title {
    font-size: 16px;
    line-height: 20px;
  }

  .camping-detail-duo__grid > .camping-detail-card .camping-detail-card__offer {
    gap: 10px;
    padding: 8px;
  }

  .camping-detail-duo__grid > .camping-detail-card .camping-detail-card__offer-bundle {
    gap: 10px;
  }

  .camping-detail-duo__grid > .camping-detail-card .camping-detail-card__offer-title {
    font-size: 14px;
    line-height: 18px;
  }

  .camping-detail-duo__grid > .camping-detail-card .camping-detail-card__offer-date {
    font-size: 12px;
    line-height: 18px;
  }

  .camping-detail-duo__grid > .camping-detail-card .camping-detail-card__offer-price {
    font-size: 18px;
    line-height: 20px;
  }

  /* « 7 nuits - Soit X€/nuit » passe sur deux lignes : a cette largeur la ligne
     se couperait n'importe ou et le tiret se retrouverait seul en bout. */
  .camping-detail-duo__grid > .camping-detail-card .camping-detail-card__offer-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-size: 11px;
    line-height: 16px;
  }

  .camping-detail-duo__grid > .camping-detail-card .camping-detail-card__offer-meta-dash {
    display: none;
  }

  .camping-detail-duo__grid > .camping-detail-card .camping-detail-card__offer-cta {
    height: 32px;
    gap: 3px;
    font-size: 13px;
  }

  .camping-detail-duo__grid > .camping-detail-card .camping-detail-card__offer-cta-icon {
    width: 16px;
    height: 16px;
  }
}

/* ===== Page marques camping (/marques-camping.html) + pages légales statiques ===== */
:is(.page-camping-brand, .page-static-legal) .header__search {
  position: relative;
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  :is(.page-camping-brand, .page-static-legal) .header__search .search-results-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--header-search-gap, 10px);
    width: auto;
  }

  :is(.page-camping-brand, .page-static-legal) #main > .header .container,
  :is(.page-camping-brand, .page-static-legal) #main > .header .header__inner {
    height: 100%;
    min-height: 0;
    align-items: center;
  }

  :is(.page-camping-brand, .page-static-legal) #main > .header .header__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: var(--space-10);
  }

  :is(.page-camping-brand, .page-static-legal) #main > .header .header__logo-wrap {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    margin-top: 0;
    grid-template-columns: unset;
    grid-template-rows: unset;
    grid-column: unset;
    grid-row: unset;
  }

  :is(.page-camping-brand, .page-static-legal) #main > .header .header__logo-wrap a,
  :is(.page-camping-brand, .page-static-legal) #main > .header .header__logo-wrap .header__burger-trigger {
    grid-column: unset;
    grid-row: unset;
    justify-self: unset;
    align-self: center;
  }

  :is(.page-camping-brand, .page-static-legal) #main > .header .header__search {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0 var(--space-20);
    justify-content: center;
    order: 0;
    flex-basis: auto;
  }

  :is(.page-camping-brand, .page-static-legal) #main > .header .header__search .guide-search-header-mobile {
    display: none !important;
  }

  :is(.page-camping-brand, .page-static-legal) #main > .header .header__search .search-results-bar {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--header-search-gap, 10px);
    width: 100%;
    max-width: min(900px, 100%);
  }

  :is(.page-camping-brand, .page-static-legal) #main > .header .header__search .search-results-bar .search-form,
  :is(.page-camping-brand, .page-static-legal) #main > .header .header__search .search-results-bar .search-form--classic {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
  }
}

.page-camping-brand .camping-brand-main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px 60px;
  box-sizing: border-box;
}

.page-camping-brand .camping-brand-wrap {
  width: 100%;
}

.page-camping-brand .camping-brand-section {
  color: var(--text-secondary-secondary-100, #240046);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  line-height: var(--line-height-27);
}

.page-camping-brand .camping-brand-h1-title {
  margin: 0 0 24px;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-black);
  line-height: 1.2;
  text-align: center;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-camping-brand .camping-brand-section > p {
  margin: 0 0 16px;
}

.page-camping-brand .camping-brand-section h2 {
  margin: 36px 0 16px;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  text-align: center;
  color: var(--color-secondary);
}

.page-camping-brand .camping-brand-section table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 16px;
  margin: 20px 0 0;
}

.page-camping-brand .camping-brand-section table td {
  vertical-align: top;
  padding: 16px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: var(--radius-card, 20px);
  box-shadow: 0 0 12px 0 var(--color-border-light, #e9ecef);
}

.page-camping-brand .camping-brand-section table tr td:first-child {
  width: 220px;
  text-align: center;
}

.page-camping-brand .camping-brand-section table img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-image, 12px);
}

.page-camping-brand .camping-brand-section table p {
  margin: 0 0 10px;
}

.page-camping-brand .camping-brand-section table a {
  color: var(--color-secondary-light, #9d4edd);
  font-weight: var(--font-weight-bold, 700);
  text-decoration: none;
}

.page-camping-brand .camping-brand-section table a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .page-camping-brand .camping-brand-main {
    padding: 20px 16px 40px;
  }

  .page-camping-brand .camping-brand-section table,
  .page-camping-brand .camping-brand-section table tbody,
  .page-camping-brand .camping-brand-section table tr,
  .page-camping-brand .camping-brand-section table td {
    display: block;
    width: 100%;
  }

  .page-camping-brand .camping-brand-section table tr {
    margin-bottom: 16px;
  }

  .page-camping-brand .camping-brand-section table tr td:first-child {
    width: 100%;
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   Pages SEO — titres alignés sur la fiche camping
   ==========================================================================
   Les pages SEO héritaient encore de la typographie legacy
   (stylesheets/main/seo/inline.css) : h1 en 1.4rem sans dégradé, h2/h3 en
   « Raleway ExtraBold » codé en dur, à 1.3rem / 1.1rem — sans rapport avec la
   fiche camping (32 / 28 / 22 px, police primaire, #240046, H1 en dégradé).
   On réaligne ici, scopé aux pages SEO du gabarit v3 : `page-guide` est posé
   sur toutes ces pages, `page-camping-detail` uniquement sur la fiche, qui
   garde donc ses propres règles.
   Spécificité (0,2,2) > `.seo main h1` (0,1,2) : pas de !important. */
body.page-guide:not(.page-camping-detail) main h1 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-black);
  line-height: 1.35;
  padding-bottom: 0.15em;
  overflow: visible;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-light)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.page-guide:not(.page-camping-detail) main h2,
/* Barre d'outils du listing SEO : le bouton Filtrer (emplacement v2,
   design des pages de resultats) sous le titre du listing. */
.v3-listing-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin: 0 0 var(--space-15);
}

/* Le CSS legacy colle un margin-bottom de 8px aux <button> : la barre
   prenait 43px de haut et le centrage flex decalait le lien Carte de 4px
   sous le bouton Filtrer. */
.v3-listing-toolbar > .btn {
  margin: 0;
}

.v3-listing-filter,
.v3-listing-map {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  width: fit-content;
}

/* Bouton Carte : meme outline que Filtrer, sans soulignement de lien. */
.v3-listing-map,
.v3-listing-map:hover,
.v3-listing-map:focus {
  text-decoration: none;
}

body.page-guide:not(.page-camping-detail) main .v3-listing-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  color: var(--text-secondary-secondary-100, #240046);
}

body.page-guide:not(.page-camping-detail) main h3 {
  font-family: var(--font-family-primary);
  font-size: 1.2rem;
  font-weight: var(--font-weight-black);
  color: var(--text-secondary-secondary-100, #240046);
}

/* Les titres des cartes camping du listing gardent leur propre échelle : ce
   sont des éléments de carte, pas des titres de section. */
body.page-guide:not(.page-camping-detail) main h3.card-camping-horizontal__title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
}

/* ==========================================================================
   Fiche camping — « Les campings les plus proches » (gabarit v2 au design v3)
   ==========================================================================
   Cartes horizontales en grille : photo | nom + étoiles + ville + distance |
   offre (prix, durée, promo, bouton Voir) quand une dispo existe. */
.camping-detail-proches {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.camping-detail-proches__title {
  margin-bottom: var(--space-20);
}

.camping-detail-proches__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
}

/* Les <form> porte-action (gotToUrl/gotToUrlByIdForm) ne doivent pas occuper
   de cellule de la grille. */
.camping-detail-proches-card > form {
  display: none;
}

.camping-detail-proches-card {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border, #ececec);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 14px rgba(36, 0, 70, 0.08);
}

.camping-detail-proches-card__media {
  display: block;
  height: 100%;
  min-height: 130px;
}

.camping-detail-proches-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camping-detail-proches-card__infos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 0;
  padding: var(--space-15);
}

.camping-detail-proches-card__nom {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  color: var(--color-secondary);
}

.camping-detail-proches-card__etoiles {
  margin: 0;
  font-size: var(--font-size-14);
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: 2px;
}

.camping-detail-proches-card__ville {
  font-size: var(--font-size-14);
  color: var(--color-text-muted, #6d6a75);
  text-decoration: none;
}

a.camping-detail-proches-card__ville:hover {
  text-decoration: underline;
}

.camping-detail-proches-card__distance {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 0;
  font-size: var(--font-size-14);
  color: var(--color-text-muted, #6d6a75);
}

/* colonne offre : liseré à gauche, prix, promo et bouton Voir */
.camping-detail-proches-card__offre {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-15);
  border-left: 1px solid var(--color-border, #ececec);
}

.camping-detail-proches-card__prix {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-black);
  line-height: 1;
  color: var(--color-secondary);
}

.camping-detail-proches-card__duree {
  margin: 0;
  font-size: var(--font-size-12, 12px);
  color: var(--color-text-muted, #6d6a75);
}

.camping-detail-proches-card__promo {
  padding: 2px 8px;
  background: var(--color-secondary-light);
  border-radius: var(--radius-cta);
  font-size: var(--font-size-12, 12px);
  font-weight: var(--font-weight-black);
  color: #fff;
}

/* Bande orange pleine hauteur avec la flèche (CTA v2) : collée au bord
   droit, l'arrondi vient de l'overflow hidden de la carte. */
.camping-detail-proches-card__voir {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 100%;
  padding: 0;
  margin: 0;
  background: var(--color-primary);
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.camping-detail-proches-card__voir img {
  filter: brightness(0) invert(1);
}

/* Neutralise le legacy `button:hover { background:none; border:none }`. */
.camping-detail-proches-card__voir:hover,
.camping-detail-proches-card__voir:focus,
.camping-detail-proches-card__voir:active {
  background: var(--color-primary);
  border: none;
  opacity: 0.88;
}

@media (max-width: 767px) {
  .camping-detail-proches__grille {
    grid-template-columns: 1fr;
    gap: var(--space-15);
  }

  /* Liste bornée à 3 cartes ½ (la pile de 8 mangeait trop de hauteur) en
     DÉFILEMENT NATIF — pas de Swiper vertical : il capturait les gestes
     verticaux et bloquait le scroll de la page. Le scroll natif rend la
     main à la page en bout de liste (chaînage navigateur standard). */
  .camping-detail-proches-card {
    grid-template-columns: 110px minmax(0, 1fr) auto auto;
  }

  .camping-detail-proches-card__infos {
    padding: var(--space-10);
  }

  .camping-detail-proches-card__offre {
    padding: var(--space-10);
  }
}

/* ──────────────────────────────────────────────────────────────────
   Fiche camping — note moyenne en haut de page

   Rappel de la reputation sous la localisation : la note mene a la
   section Avis, et sans aucun avis c'est le bouton de depot qui prend
   sa place (voir fiche.v3/hero.ejs).
   ────────────────────────────────────────────────────────────────── */
.camping-detail-hero__avis {
  display: flex;
  justify-content: center;
  /* Pas de marge haute : le flux du hero espace déjà ses blocs, la marge
     ajoutait un double espacement au-dessus de la note. */
  margin: 0;
}

.camping-detail-hero__note-lien {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-5);
  /* même gabarit que les puces « Type de camping » (6px 14px, 14/21) ;
     la bordure transparente aligne la hauteur (35px) sur celle des puces */
  padding: 6px 14px;
  border: 1px solid transparent;
  line-height: var(--line-height-21);
  border-radius: var(--radius-cta);
  background: var(--color-surface-alt);
  font-family: var(--font-family-secondary);
  text-decoration: none;
  transition: background 0.2s;
}

.camping-detail-hero__note-lien:hover,
.camping-detail-hero__note-lien:focus-visible {
  background: var(--color-surface-muted);
}

/* Une seule taille, 14/21 comme les puces « Type de camping » avec
   lesquelles la pastille partage la ligne — la graisse seule distingue la
   note. */
.camping-detail-hero__note-label {
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
}

.camping-detail-hero__note {
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
}

.camping-detail-hero__note-sur {
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
}

.camping-detail-hero__nb-avis {
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
}

/* Sans avis : bouton discret, il ne doit pas concurrencer les CTA de
   reservation places juste en dessous. */
.camping-detail-hero__depose-avis {
  /* même gabarit que les puces « Type de camping » */
  padding: 6px 14px;
  border: 1px solid var(--color-border, #e9ecef);
  border-radius: var(--radius-cta);
  background: transparent;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
  color: var(--color-text-body);
  cursor: pointer;
}

.camping-detail-hero__depose-avis:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ==========================================================================
   Page recherche camping par nom
   ========================================================================== */
.page-search-by-name .search-by-name-main {
  background: var(--color-bg, #f8f9fa);
  padding-bottom: var(--space-60);
}

.page-search-by-name .search-by-name-main > .footer {
  margin-top: var(--space-40);
}

.page-search-by-name .search-by-name-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-30) var(--space-20) 0;
}

.page-search-by-name .search-by-name-h1 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  text-align: center;
  margin: 0 0 var(--space-30);
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-search-by-name .search-by-name-hero {
  position: relative;
  z-index: 10;
}

.page-search-by-name .search-by-name-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  margin-bottom: var(--space-30);
  overflow: visible;
  position: relative;
  z-index: 5;
}

.page-search-by-name .search-by-name-label {
  display: block;
  margin: 0 0 var(--space-15);
  color: var(--text-secondary-secondary-100, var(--color-text, #240046));
  font-family: var(--secondary-font, var(--font-family-secondary));
  font-size: var(--font-size-alias-size-18, var(--font-size-18));
  font-weight: var(--font-weight-alias-weight-regular, var(--font-weight-regular));
  line-height: var(--font-line-height-alias-line-height-27, var(--line-height-27));
}

.page-search-by-name .search-by-name-box.search-box {
  width: 100%;
  max-width: 100%;
  /* Un seul chrome visible : le formulaire (évite la boîte dans la boîte) */
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.page-search-by-name .search-by-name-form {
  margin-bottom: 0;
}

.page-search-by-name .search-by-name-box {
  position: relative;
  overflow: visible;
}

.page-search-by-name .search-by-name-form.search-form {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: var(--space-10);
  align-items: center;
  width: 100%;
}

.page-search-by-name .search-by-name-form .search-form__fields {
  min-width: 0;
  width: 100%;
  max-width: none;
  flex: none;
}

.page-search-by-name .search-by-name-form .search-form__item--text {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: none;
  flex: none;
}

.page-search-by-name .search-by-name-form .autoComplete_wrapper {
  width: 100%;
  max-width: none;
  position: relative;
}

.page-search-by-name .search-by-name-form .autoComplete_wrapper > input,
.page-search-by-name .search-by-name-form .search-form__input {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;
  white-space: nowrap;
  scrollbar-width: thin;
}

.page-search-by-name .search-by-name-form .search-form__submit {
  flex: 0 0 auto;
  justify-self: end;
  align-self: center;
  margin-left: 0;
  min-width: max-content;
}

.page-search-by-name .search-by-name-form .autoComplete_wrapper > ul {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-card, 12px);
  background: #fff;
  border: 1px solid var(--color-border, #dee2e6);
  list-style: none;
  padding: 4px 0;
}

.page-search-by-name .search-by-name-form .autoComplete_wrapper > ul:empty {
  display: none;
}

.page-search-by-name .search-by-name-form .autoComplete_wrapper > ul > li.autocomplete-suggestion--empty {
  color: #6c757d;
  cursor: default;
  pointer-events: none;
}

.page-search-by-name .search-by-name-form .autoComplete_wrapper > ul > li {
  padding: 10px 12px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
}

.page-search-by-name .search-by-name-form .autoComplete_wrapper > ul > li[role="option"]:hover {
  background-color: #fff;
}

.page-search-by-name .search-by-name-form .autoComplete_wrapper > ul > li.autocomplete__option--active,
.page-search-by-name .search-by-name-form .autoComplete_wrapper > ul > li[role="option"][aria-selected="true"] {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.page-search-by-name .search-by-name-form .autoComplete_wrapper > ul > li > .autocomplete-suggestion__text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-14);
  color: var(--color-text-heading, #240046);
}

.page-search-by-name .search-by-name-form .autocomplete-suggestion__meta {
  color: #bdbdbd;
}

.page-search-by-name .search-by-name-edito {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  line-height: 1.6;
  color: var(--color-text-body);
  margin-bottom: var(--space-40);
}

.page-search-by-name .search-by-name-edito p {
  margin: 0 0 var(--space-20);
}

.page-search-by-name .search-by-name-map-section {
  margin-bottom: var(--space-60);
  padding-bottom: var(--space-20);
}

.page-search-by-name .search-by-name-h2 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  color: var(--color-text-heading, #240046);
  margin: 0 0 var(--space-20);
  text-align: center;
}

.page-search-by-name .search-by-name-map {
  width: 100%;
  height: 480px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  background: #e9ecef;
}

.page-search-by-name .search-by-name-map .maplibregl-map,
.page-search-by-name .search-by-name-map .maplibregl-canvas-container {
  width: 100%;
  height: 100%;
}

.page-search-by-name .search-by-name-map .maplibregl-map {
  position: relative;
  overflow: hidden;
}

.page-search-by-name .search-by-name-map .maplibregl-canvas {
  position: absolute;
  left: 0;
  top: 0;
}

.page-search-by-name .search-by-name-map .maplibregl-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  will-change: transform;
}

.page-search-by-name .search-by-name-map__pin {
  width: 28px;
  height: 28px;
  line-height: 0;
  pointer-events: auto;
  cursor: pointer;
}

.page-search-by-name .search-by-name-map__pin img,
.page-search-by-name .search-map-marker__icon {
  display: block;
  width: 28px;
  height: 28px;
  max-width: none;
}

.page-search-by-name .search-map-marker {
  cursor: pointer;
  line-height: 0;
}

.page-search-by-name .search-map-marker__body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-search-by-name .search-map-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  padding: 0;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--color-secondary, #7b2cbf);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  border: 2px solid #fff;
  overflow: hidden;
}

.page-search-by-name .search-map-cluster:hover {
  filter: brightness(1.08);
}

.page-search-by-name .search-map-cluster--sm {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  font-size: 12px;
}

.page-search-by-name .search-map-cluster--md {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  font-size: 13px;
}

.page-search-by-name .search-map-cluster--lg {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  font-size: 14px;
}

.page-search-by-name .search-by-name-map__popup-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  margin: 0 0 4px;
  color: var(--color-text-heading, #240046);
}

.page-search-by-name .search-by-name-map__popup {
  min-width: 200px;
}

.page-search-by-name .search-by-name-map__popup-media {
  margin: -4px -4px 8px;
  border-radius: 8px;
  overflow: hidden;
  background: #e9ecef;
}

.page-search-by-name .search-by-name-map__popup-media img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.page-search-by-name .search-by-name-map__popup-ville {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--color-text-muted, #6c757d);
  line-height: 1.3;
}

.page-search-by-name .search-by-name-map__popup-link {
  font-size: var(--font-size-14);
  color: var(--color-primary);
  text-decoration: none;
}

.page-search-by-name .search-by-name-map__popup-link:hover {
  text-decoration: underline;
}

.page-search-by-name .autoComplete_wrapper > ul {
  z-index: 20;
}

@media (max-width: 767px) {
  .page-search-by-name .search-by-name-wrap {
    padding-top: var(--space-20);
  }

  .page-search-by-name .search-by-name-h1 {
    font-size: var(--font-size-24);
    margin: 0 0 var(--space-25);
  }

  .page-search-by-name .search-by-name-map {
    height: 360px;
  }

  .page-search-by-name .search-by-name-section {
    margin-bottom: var(--space-30);
  }

  .page-search-by-name .search-by-name-label {
    font-size: var(--font-size-16);
    line-height: 1.35;
    margin: 0 0 var(--space-15);
  }

  .page-search-by-name .search-by-name-box.search-box {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .page-search-by-name .search-by-name-form.search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 6px 6px 6px 14px;
    margin: 0 0 var(--space-25);
    box-sizing: border-box;
    position: relative;
  }

  .page-search-by-name .search-by-name-form .search-form__fields {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: stretch;
    position: static;
  }

  .page-search-by-name .search-by-name-form .search-form__item--text {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* laisse le form comme containing block des suggestions */
    position: static;
  }

  .page-search-by-name .search-by-name-form .autoComplete_wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: static;
  }

  .page-search-by-name .search-by-name-form .autoComplete_wrapper > input,
  .page-search-by-name .search-by-name-form .search-form__input {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    font-size: 16px;
    line-height: 1.3;
    padding: 8px 0;
  }

  /* Suggestions = largeur input + loupe (ancré sur le form) */
  .page-search-by-name .search-by-name-form .autoComplete_wrapper > ul {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
    margin-top: 8px;
  }

  .page-search-by-name .search-by-name-form .search-form__submit-text {
    display: none;
  }

  .page-search-by-name .search-by-name-form .search-form__submit {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    justify-self: end;
    align-self: center;
  }

  .page-search-by-name .search-by-name-form .search-form__submit img {
    width: 22px;
    height: 22px;
  }
}

/* ===== Annuaire : Top campings (fond mauve, comme homepage) ===== */
.page-search-by-name .guide-top-moment-section {
  padding-top: var(--space-50);
  padding-bottom: var(--space-50);
  width: 100%;
  max-width: none;
  margin: 0;
  background: rgba(36, 0, 70, 0.2);
  box-sizing: border-box;
}

.page-search-by-name .guide-top-moment-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--container-max, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-20);
  padding-right: var(--space-20);
  box-sizing: border-box;
}

.page-search-by-name .guide-top-moment-section .section__title.guide-top-moment-section__title {
  text-align: center;
  width: 100%;
  margin-bottom: var(--space-30);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  color: var(--color-secondary, #240046);
}

.page-search-by-name .guide-top-moment-section .top-camping-container-guide {
  width: 100%;
  max-width: 100%;
}

.page-search-by-name .guide-top-moment__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-20);
  width: 100%;
  box-sizing: border-box;
}

.page-search-by-name .guide-top-moment-swiper-wrap--desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-25);
  width: 100%;
}

.page-search-by-name .guide-top-moment-swiper-wrap--desktop .guide-top-moment-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.page-search-by-name .guide-top-moment-swiper-wrap--desktop .guide-top-moment-pagination {
  order: 2;
  justify-content: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.page-search-by-name .guide-top-moment-swiper-wrap--desktop .guide-top-moment-swiper {
  order: 1;
  width: 100%;
  margin-bottom: 0;
}

/* Traits entre flèches (comme homepage) */
.page-search-by-name .guide-top-moment-pagination .pagination-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-15);
}

.page-search-by-name .guide-top-moment-pagination .pagination-carousel__indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.page-search-by-name .guide-top-moment-pagination .pagination-carousel__bullet {
  width: 50px;
  height: 5px;
  padding: 0;
  border-radius: 100px;
  background: var(--color-surface-muted, #e9ecef);
  border: 1px solid var(--color-border, #dee2e6);
  cursor: pointer;
  transition: background 0.2s;
  box-sizing: border-box;
}

.page-search-by-name .guide-top-moment-pagination .pagination-carousel__bullet:hover {
  background: var(--color-border-strong, #ced4da);
}

.page-search-by-name .guide-top-moment-pagination .pagination-carousel__bullet--active {
  background: var(--color-secondary, #240046);
  border-color: var(--color-secondary, #240046);
  height: 6px;
}

.page-search-by-name .guide-top-moment-swiper-wrap--mobile {
  display: none;
}

@media (min-width: 768px) {
  .page-search-by-name .guide-top-moment-swiper-wrap--desktop .guide-top-moment-swiper .swiper-slide {
    width: 100% !important;
    max-width: 100%;
  }

  .page-search-by-name .guide-top-moment__row {
    width: 100%;
    max-width: 100%;
  }

  .page-search-by-name
    .guide-top-moment-section
    .guide-top-push-card-wrap:not(.guide-top-push-card-wrap--mobile) {
    width: calc((100% - 3 * var(--space-20)) / 4);
    height: auto;
    aspect-ratio: 286 / 433;
    flex: 0 0 calc((100% - 3 * var(--space-20)) / 4);
  }
}

/* ===== Annuaire : guides populaires (grille 7×4) ===== */
.page-search-by-name .search-by-name-guides-section {
  padding: var(--space-50) 0;
}

.page-search-by-name .search-by-name-guides-section .container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding-left: var(--space-20);
  padding-right: var(--space-20);
}

.page-search-by-name .search-by-name-guides-section__title {
  margin: 0 0 var(--space-30);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  color: var(--color-secondary, #240046);
}

.page-search-by-name .search-by-name-guides__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
}

.page-search-by-name .search-by-name-guides__link {
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.page-search-by-name .search-by-name-guides__link .card-destination {
  height: 220px;
}

@media (max-width: 1024px) {
  .page-search-by-name .search-by-name-guides__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .page-search-by-name .guide-top-moment-section .section__title.guide-top-moment-section__title,
  .page-search-by-name .search-by-name-guides-section__title {
    font-size: var(--font-size-24);
  }

  .page-search-by-name .guide-top-moment-section .container {
    align-items: stretch;
  }

  .page-search-by-name .guide-top-moment-swiper-wrap--desktop {
    display: none;
  }

  .page-search-by-name .guide-top-moment-swiper-wrap--mobile {
    display: block;
    width: calc(100% + var(--space-20));
    max-width: none;
    margin-left: 0;
    margin-right: calc(-1 * var(--space-20));
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .page-search-by-name .guide-top-moment-swiper-wrap--mobile .swiper-slide {
    width: 300px;
    flex-shrink: 0;
  }

  .page-search-by-name .guide-top-moment-swiper-wrap--mobile .guide-top-moment-swiper {
    touch-action: pan-y;
    overflow: hidden;
  }

  .page-search-by-name .guide-top-moment-swiper-wrap--mobile .swiper-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .page-search-by-name .guide-top-moment-swiper-wrap--mobile .guide-top-push-card-wrap--mobile {
    width: 100%;
    max-width: 300px;
    height: 400px;
    aspect-ratio: auto;
    margin: 0;
  }

  .page-search-by-name .guide-top-moment-swiper-wrap--mobile .pagination-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-10);
    margin-top: var(--space-15);
    width: calc(100% - var(--space-20));
  }

  .page-search-by-name .guide-top-moment-swiper-wrap--mobile .pagination-carousel__prev,
  .page-search-by-name .guide-top-moment-swiper-wrap--mobile .pagination-carousel__next {
    display: none;
  }

  .page-search-by-name .guide-top-moment-swiper-wrap--mobile .pagination-carousel__indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .page-search-by-name .guide-top-moment-swiper-wrap--mobile .pagination-carousel__bullet {
    background: rgba(36, 0, 70, 0.2);
    border: 1px solid #fff;
    width: 8px;
    height: 8px;
    border-radius: 100px;
    padding: 0;
    cursor: pointer;
  }

  .page-search-by-name .guide-top-moment-swiper-wrap--mobile .pagination-carousel__bullet--active {
    background: var(--color-secondary, #240046);
    border: none;
    width: 10px;
    height: 10px;
  }

  .page-search-by-name .search-by-name-guides__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-15);
  }

  .page-search-by-name .search-by-name-guides__link .card-destination {
    height: 180px;
  }
}


/* /v3-css/pages/search-results.v3.css */
/**
 * Search Results Page Styles
 * From Figma: node-id=312-18000 (desktop), node-id=120-5168 (mobile)
 */

/* ===== Search Results Bar (in header or standalone) ===== */
.search-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
}

.search-results-bar .search-form {
  flex: 1;
  min-width: 200px;
}

.header__search .search-results-bar {
  padding: 0;
}

.header__search .search-results-bar .search-form {
  margin-bottom: 0;
}

.search-results-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-shrink: 0;
}

.search-results-bar__filter,
.search-results-bar__sort,
.search-results-bar__map {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
}

.header__search .search-results-bar__filter,
.header__search .search-results-bar__sort,
.header__search .search-results-bar__map {
  padding: var(--space-5) var(--space-10);
  font-size: var(--font-size-14);
}

/* ===== Search Results Hero ===== */
.search-results-hero {
  padding: var(--space-20) 0 var(--space-30);
}

.search-results-hero__content {
  margin-top: var(--space-20);
}

.search-results-hero__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-10);
  margin-bottom: var(--space-15);
}

.search-results-hero__label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.search-results-hero__location {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.search-results-hero__text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  color: var(--color-text-body);
  line-height: var(--line-height-27);
  max-width: 900px;
}

/* ===== Search Results List ===== */
.search-results-list {
  padding-top: 0;
}

/* ===== Search Results Zones ===== */
.search-results-zones {
  background: var(--color-surface-alt);
}

.search-results-zones__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  margin-bottom: var(--space-20);
}

.search-results-zones__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-20);
}

@media (max-width: 767px) {
  .search-results-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-results-bar .search-form {
    min-width: 100%;
  }

  .search-results-bar__actions {
    justify-content: flex-start;
  }

  .search-results-hero__title {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-results-hero__label,
  .search-results-hero__location {
    font-size: var(--font-size-22);
  }
}


/* /v3-css/pages/design.v3.css */
/**
 * Design System Preview Page
 */

.design-page {
  padding: var(--space-30) 0 var(--space-50);
}

.design-page__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  margin-bottom: var(--space-10);
}

.design-page__intro {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  color: var(--color-text-body);
  margin-bottom: var(--space-50);
}

.design-section {
  margin-bottom: var(--space-50);
  padding-bottom: var(--space-50);
  border-bottom: 1px solid var(--color-border);
}

.design-section:last-child {
  border-bottom: none;
}

.design-section__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  margin-bottom: var(--space-20);
}

.design-section__subtitle {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-body);
  margin-bottom: var(--space-15);
}

.design-section__content {
  margin-bottom: var(--space-30);
}

.design-section__content:last-child {
  margin-bottom: 0;
}

.design-section__content--flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-15);
}

.design-section__content--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-20);
}

.design-section__content--grid-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-20);
}

@media (min-width: 768px) {
  .design-section__content--grid-articles {
    grid-template-columns: 1fr repeat(2, minmax(200px, 1fr));
  }
}

.design-section__content--grid-dest {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-20);
}

.design-section__content--grid-values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-20);
}

/* Home region desktop — Figma 1417:16752 (dernier fichier du bundle CSS home) */
@media (min-width: 992px) {
  .page-home .region-section .region-featured__layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 30px !important;
    min-height: 670px !important;
    height: 670px !important;
  }

  .page-home .region-section .region-featured__info {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    right: auto !important;
    width: 500px !important;
    max-width: calc(100% - 420px) !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
  }

  .page-home .region-section .region-featured__region-name {
    font-size: 62px !important;
    line-height: 63px !important;
    text-align: left !important;
    color: #fff !important;
  }

  .page-home .region-section .region-featured__cta-region {
    width: max-content !important;
    max-width: max-content !important;
    height: 65px !important;
    padding: 5px 15px !important;
    white-space: nowrap !important;
  }

  .page-home .region-section .region-featured__card {
    position: absolute !important;
    right: 30px !important;
    bottom: 30px !important;
    top: auto !important;
    left: auto !important;
    width: 350px !important;
    height: 500px !important;
    max-width: 350px !important;
    margin: 0 !important;
  }

  .page-home .region-section .region-featured__card .card-region {
    width: 350px !important;
    height: 500px !important;
  }
}


/* /v3-css/pages/mag.v3.css */
/* Mag camping — pages v3 (accueil + article) */

body.page-mag main.v3-shell {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

body.page-mag main.v3-shell > .container {
  width: 100%;
  max-width: none;
  padding: 0 !important;
}

.page-mag .mag-main {
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 15px 40px;
  box-sizing: border-box;
}

/* Hero — titre + accroche centrés, sans encart */
.page-mag .mag-hero {
  margin-bottom: 25px;
  padding: 0 10px;
  background: transparent;
}

.page-mag .mag-hero__title {
  margin: 0 0 15px;
  font-family: var(--font-family-primary);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: var(--font-weight-black, 900);
  line-height: 1.2;
  color: var(--color-secondary, #240046);
  text-align: center;
}

.page-mag .mag-hero__accroche {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  line-height: 1.6;
  color: var(--color-text, #212529);
  text-align: center;
}

.page-mag .mag-hero__accroche p {
  margin: 0 0 10px;
}

/* À la une — 1 grande + 2 petites cartes immersives */
.page-mag .mag-featured {
  margin-bottom: 30px;
}

.page-mag .mag-featured__main {
  margin-bottom: 15px;
}

.page-mag .mag-featured__main .card-article--large.card-article--immersive {
  height: 380px;
}

.page-mag .mag-featured__secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.page-mag .mag-featured__carousel {
  display: none;
}

.page-mag .mag-featured .card-article--immersive {
  border: none;
  background: transparent;
  height: 100%;
}

/* Plus spécifique que height:100% ci-dessus */
.page-mag .mag-featured__secondary .card-article.card-article--immersive {
  height: 280px;
  min-height: 280px;
}

.page-mag .mag-featured__secondary .card-article.card-article--immersive .card-article__inner {
  height: 280px;
  min-height: 280px;
}

.page-mag .mag-featured .card-article--immersive .card-article__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
  padding: 20px;
  border-radius: var(--radius-card, 20px);
  overflow: hidden;
  box-sizing: border-box;
}

.page-mag .mag-featured .card-article--immersive .card-article__media {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card, 20px);
  aspect-ratio: unset;
  max-height: none;
}

.page-mag .mag-featured .card-article--immersive .card-article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card, 20px);
}

.page-mag .mag-featured .card-article--immersive .card-article__overlay {
  border-radius: var(--radius-card, 20px);
  background: var(--gradient-photo-overlay);
}

.page-mag .mag-featured .card-article--immersive .card-article__body {
  position: relative;
  z-index: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-mag .mag-featured .card-article--large .card-article__title {
  font-size: 1.2rem;
  font-weight: var(--font-weight-black, 900);
  color: #fff;
  margin: 0;
  line-height: 1.25;
}

.page-mag .mag-featured .card-article--immersive:not(.card-article--large) .card-article__title {
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-bold, 700);
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.page-mag .mag-featured .card-article__meta,
.page-mag .mag-section--immersive .card-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-mag .mag-featured .card-article__category,
.page-mag .mag-section--immersive .card-article__category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-14, 14px);
  color: #fff;
}

.page-mag .mag-featured .card-article__dot,
.page-mag .mag-section--immersive .card-article__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary, #ff6d00);
  flex-shrink: 0;
}

.page-mag .mag-featured .card-article__hashtag,
.page-mag .mag-section--immersive .card-article__hashtag {
  color: #fff;
  font-size: var(--font-size-14, 14px);
  margin: 0;
}

/* Sections (actualités, catégories…) */
.page-mag .mag-section {
  margin-bottom: 30px;
  padding: 25px 15px;
  border-radius: var(--radius-card, 20px);
  background: var(--surface-grayscale-grayscale-100, #f3f3f3);
  box-sizing: border-box;
}

.page-mag .mag-section__heading {
  margin-bottom: 15px;
  text-align: center;
}

/* Titre de section : il annonce un bloc, il ne rivalise pas avec le H1.
   D'ou une graisse bold plutot que black et une taille en retrait. */
.page-mag .mag-section__title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.25;
  color: var(--color-secondary, #240046);
}

.page-mag .mag-section__title a {
  color: inherit;
  text-decoration: none;
}

.page-mag .mag-section__title a:hover {
  text-decoration: underline;
}

/* Dernières actualités — liste horizontale 2 colonnes */
.page-mag .mag-articles-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 25px;
}

.page-mag .mag-article-row {
  min-width: 0;
}

.page-mag .mag-article-row__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* Le titre porte le lien de l'article, étendu à toute la ligne par ::after ;
   catégorie et hashtag sont des liens posés au-dessus. */
.page-mag .mag-article-row {
  position: relative;
}

.page-mag .mag-article-row__title-link {
  color: inherit;
  text-decoration: none;
}

.page-mag .mag-article-row__title-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-mag .mag-article-row__title-link:focus-visible {
  outline: 2px solid var(--color-primary, #ff6d00);
  outline-offset: 2px;
}

.page-mag .mag-article-row__meta-link {
  position: relative;
  z-index: 2;
  color: inherit;
  text-decoration: none;
}

.page-mag .mag-article-row__meta-link:hover,
.page-mag .mag-article-row__meta-link:focus-visible {
  text-decoration: underline;
}

.page-mag .mag-article-row__media {
  flex: 0 0 30%;
  max-width: 120px;
  border-radius: var(--radius-card, 20px);
  overflow: hidden;
}

.page-mag .mag-article-row__image {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-card, 20px);
}

.page-mag .mag-article-row__body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.page-mag .mag-article-row__title {
  margin: 0 0 8px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.25;
  color: var(--color-text, #212529);
}

.page-mag .mag-article-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-mag .mag-article-row__category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-14, 14px);
  color: var(--color-text-muted, #6c757d);
}

.page-mag .mag-article-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary, #ff6d00);
  flex-shrink: 0;
}

.page-mag .mag-article-row__hashtag {
  font-size: var(--font-size-14, 14px);
  color: var(--color-text-muted, #6c757d);
}

/* Incontournables — cartes immersives 2 colonnes */
.page-mag .mag-articles-immersive {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.page-mag .mag-articles-immersive--solo {
  grid-template-columns: 1fr;
}

.page-mag .mag-section--immersive .card-article--immersive {
  height: 260px;
  border: none;
  background: transparent;
}

.page-mag .mag-articles-immersive--solo .card-article--immersive {
  height: 320px;
}

.page-mag .mag-section--immersive .card-article--immersive .card-article__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 15px;
  border-radius: var(--radius-card, 20px);
  overflow: hidden;
}

.page-mag .mag-section--immersive .card-article--immersive .card-article__media {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card, 20px);
  aspect-ratio: unset;
  max-height: none;
}

.page-mag .mag-section--immersive .card-article--immersive .card-article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card, 20px);
}

.page-mag .mag-section--immersive .card-article--immersive .card-article__overlay {
  border-radius: var(--radius-card, 20px);
  /*
   * Dégradé violet depuis le bas : remonte ~40 % de la vignette (titre + hashtags)
   * sans recouvrir toute l’image comme --gradient-photo-overlay.
   */
  background: linear-gradient(
    180deg,
    rgba(36, 0, 70, 0) 0%,
    rgba(36, 0, 70, 0) 58%,
    rgba(36, 0, 70, 0.55) 75%,
    rgba(36, 0, 70, 0.9) 90%,
    rgba(36, 0, 70, 1) 100%
  );
}

.page-mag .mag-section--immersive .card-article--immersive .card-article__body {
  position: relative;
  z-index: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-mag .mag-section--immersive .card-article__title {
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-bold, 700);
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.page-mag .mag-section--immersive .card-article__location,
.page-mag .mag-featured .card-article__location {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: var(--radius-label, 5px);
  background: var(--color-primary, #ff6d00);
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.3;
  text-decoration: none;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-mag .mag-section--immersive a.card-article__location:hover,
.page-mag .mag-section--immersive a.card-article__location:focus-visible,
.page-mag .mag-featured a.card-article__location:hover,
.page-mag .mag-featured a.card-article__location:focus-visible {
  text-decoration: underline;
}


.page-mag .mag-section__carousel {
  display: none;
}

.page-mag .mag-featured__cta-wrap,
.page-mag .mag-section__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.page-mag .mag-featured__cta.btn,
.page-mag .mag-section__cta.btn {
  min-height: 45px;
  padding: var(--space-5, 5px) var(--space-15, 15px);
  border-radius: var(--radius-cta, 100px);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18, 18px);
  line-height: var(--line-height-21, 21px);
  text-decoration: none;
  transition:
    background-color var(--transition-primary-cta, 1s ease),
    background var(--transition-primary-cta, 1s ease);
}

@media (hover: hover) {
  .page-mag .mag-featured__cta.btn:hover,
  .page-mag .mag-section__cta.btn:hover,
  .page-mag .mag-featured__cta.btn:focus-visible,
  .page-mag .mag-section__cta.btn:focus-visible {
    background: var(--color-primary-gradient-end, #ff9e00);
    background-color: var(--color-primary-gradient-end, #ff9e00);
    color: var(--color-text-inverse, #fff);
  }
}

/* Contenus éditoriaux */
.page-mag .mag-bloc--contents {
  margin-bottom: 30px;
  padding: 20px 15px;
  border-radius: var(--radius-card, 20px);
  background: #fff;
}

.page-mag .mag-contents__title {
  margin: 20px 0 10px;
  font-size: var(--font-size-22, 22px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-secondary, #240046);
}

.page-mag .mag-contents__block.contenu {
  font-size: var(--font-size-16, 16px);
  line-height: 1.6;
}

.page-mag .mag-contents__block.contenu h3,
.page-mag .mag-contents__block.contenu h4 {
  margin: 1.4em 0 0.75em;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-secondary, #240046);
  line-height: 1.35;
}

.page-mag .mag-contents__block.contenu h3 + p,
.page-mag .mag-contents__block.contenu h4 + p {
  margin-top: 0.85em;
}

.page-mag .mag-contents__block.contenu p {
  margin: 0 0 0.85em;
}

/* Médias contenu article — pleine largeur, même hauteur que le hero (420px) */
.page-mag .mag-contents__block.contenu img,
.page-mag .mag-contents__block.contenu picture,
.page-mag .mag-contents__block.contenu video,
.page-mag .mag-contents__block.contenu .balise {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 420px !important;
  margin: 15px auto;
  border-radius: var(--radius-card, 20px);
}

.page-mag .mag-contents__block.contenu img,
.page-mag .mag-contents__block.contenu picture img {
  object-fit: cover;
}

.page-mag .mag-contents__block.contenu video {
  object-fit: cover;
  margin-bottom: 1.5rem;
}

.page-mag .mag-contents__block.contenu video:focus {
  outline: none;
  box-shadow: none;
}

.page-mag .mag-contents__block.contenu iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  margin: 15px auto;
  border: 0;
  border-radius: var(--radius-card, 20px);
}

.page-mag .mag-contents__block.contenu .iframe,
.page-mag .mag-contents__block.contenu ins.iframe {
  position: relative;
  display: block;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 56.25%;
  margin: 15px auto;
  overflow: hidden;
  border-radius: var(--radius-card, 20px);
}

.page-mag .mag-contents__block.contenu ins.iframe iframe,
.page-mag .mag-contents__block.contenu .iframe iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  border-radius: var(--radius-card, 20px);
}

.page-mag .mag-contents__block.contenu .tiktok-embed,
.page-mag .mag-contents__block.contenu .instagram-media {
  width: 100% !important;
  max-width: 100% !important;
  margin: 15px auto !important;
}

.page-mag .mag-contents__block.contenu .tiktok-embed .iframe {
  height: auto !important;
  padding-bottom: 0;
}

/* Galeries / sliders (images & vidéos) — scroll horizontal type SEO */
.page-mag .mag-contents__block.contenu.slider {
  width: 100%;
  margin: 15px 0;
}

.page-mag .mag-contents__block.contenu .galerie,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie {
  background-color: transparent;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: relative;
  margin: 15px 0 0;
  overflow: hidden;
  border-radius: var(--radius-card, 20px);
  z-index: 1;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-wrapper,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-wrapper::-webkit-scrollbar,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-slide,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide {
  width: auto;
  min-width: 100%;
  height: 100%;
  margin-right: 1rem;
  position: relative;
  flex-shrink: 0;
  border-radius: var(--radius-card, 20px);
  overflow: hidden;
  background: transparent;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-slide img,
.page-mag .mag-contents__block.contenu .galerie .swiper-slide video,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide img,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card, 20px);
}

.page-mag .mag-contents__block.contenu .galerie .swiper-slide.video,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide.video {
  position: relative;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-button-next,
.page-mag .mag-contents__block.contenu .galerie .swiper-button-prev,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-button-next,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-button-prev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.85);
  margin: auto;
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  padding: 0;
  height: 3.5rem;
  width: 2rem;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-primary, #ff6d00);
  font-size: 1.5rem;
  line-height: 1;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-button-next,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-button-next {
  right: 0.5rem;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-button-prev,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-button-prev {
  left: 0.5rem;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-button-next.hide,
.page-mag .mag-contents__block.contenu .galerie .swiper-button-prev.hide,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-button-next.hide,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-button-prev.hide {
  display: none !important;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-button-next:after,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-button-next:after {
  content: "›";
}

.page-mag .mag-contents__block.contenu .galerie .swiper-button-prev:after,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-button-prev:after {
  content: "‹";
}

.page-mag .mag-contents__block.contenu .galerie .swiper-slide.video .video-play,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide.video .video-play {
  z-index: 2;
}

/* Légende galerie slider (medias.ejs) — blanc, bas gauche, sur l'image */
.page-mag .mag-contents__block.contenu .galerie .swiper-slide.with-description img,
.page-mag .mag-contents__block.contenu .galerie .swiper-slide.with-description video,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide.with-description img,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide.with-description video {
  z-index: 0;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-slide.with-description .mask,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide.with-description .mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(36, 0, 70, 0.7) 0%, transparent 45%);
  border-radius: inherit;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-slide.with-description .description,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide.with-description .description {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 16px;
  color: #fff;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14, 14px);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-slide.with-description .description p,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide.with-description .description p {
  margin: 0;
  color: #fff;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-slide.with-description .description p:empty,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide.with-description .description p:empty {
  display: none;
}

.page-mag .mag-contents__block.contenu .galerie .swiper-slide.with-description .description p + p,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide.with-description .description p + p {
  margin-top: 4px;
  font-size: var(--font-size-12, 12px);
  font-weight: var(--font-weight-regular, 400);
  opacity: 0.9;
}

/* Carte fiche camping — même composant que listing Biscarrosse, sans bandeau offre */
.page-mag .mag-contents__block.listing {
  margin: 24px 0;
}

.page-mag .mag-article-camping-card .card-camping-horizontal {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-20, 20px);
  max-width: 900px;
  width: 100%;
  padding: var(--space-15, 15px);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, var(--color-primary, #eb7039), var(--color-secondary-light, #9d4edd)) border-box;
  border: 2px solid transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.page-mag .mag-article-camping-card .card-camping-horizontal__media-stack {
  flex: 0 0 300px;
  width: 300px;
  max-width: 300px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

.page-mag .mag-article-camping-card .guide-camping-gallery,
.page-mag .mag-article-camping-card .guide-camping-gallery__viewport,
.page-mag .mag-article-camping-card .guide-camping-gallery__swiper {
  width: 100%;
  height: 100%;
  min-height: 220px;
  flex: 1 1 auto;
}

.page-mag .mag-article-camping-card .guide-camping-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-image, 12px);
}

.page-mag .mag-article-camping-card .card-camping-horizontal__body {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-mag .mag-article-camping-card .card-camping-horizontal__desc.is-expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}

.page-mag .mag-article-camping-card .card-camping-horizontal__body > .btn.btn--primary {
  margin-top: auto;
  align-self: flex-start;
}

.page-mag .mag-article-camping-card .section,
.page-mag .mag-article-camping-card .all-campings-guide-container {
  margin: 0;
  padding: 0;
  max-width: 900px;
}

.page-mag .mag-article-camping-card .guide-section__title:empty {
  display: none;
}

.page-mag .mag-contents__block.listing article.card-camping-horizontal--superdeal,
.page-mag .mag-contents__block.listing article.card-camping-horizontal--hosting-strip {
  display: block !important;
  max-width: 900px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, var(--color-primary, #eb7039), var(--color-secondary-light, #9d4edd)) border-box !important;
  border: 3px solid transparent !important;
  border-radius: var(--radius-card, 20px) !important;
  box-shadow: none !important;
}

.page-mag .mag-contents__block.listing article.superdeal .guide-camping-gallery__slide-inner {
  position: relative;
}

.page-mag .mag-contents__block.listing article.superdeal .boxe {
  position: absolute;
  background: linear-gradient(90deg, var(--color-primary, #eb7039), var(--color-secondary-light, #9d4edd)) !important;
  color: #fff !important;
  font-family: var(--font-family-secondary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 4px 14px !important;
  border-radius: 8px !important;
  top: 15px !important;
  left: 15px !important;
  z-index: 11;
}

.page-mag .card-camping-horizontal--superdeal .card-camping-horizontal__body .description {
  background-color: #fae9e3 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
  color: var(--color-text, #240046) !important;
  line-height: 1.4 !important;
  max-height: 15rem;
  overflow: hidden;
  font-family: var(--font-family-secondary) !important;
  font-size: 14px !important;
}

@media (max-width: 767px) {
  .page-mag .mag-article-camping-card .card-camping-horizontal {
    flex-direction: column;
  }

  .page-mag .mag-article-camping-card .card-camping-horizontal__media-stack {
    flex: none;
    width: 100%;
    max-width: none;
    min-height: 180px;
  }

  .page-mag .mag-article-camping-card .guide-camping-gallery__swiper {
    width: 100%;
    height: 180px;
    min-height: 180px;
  }

  .page-mag .mag-article-camping-card .card-camping-horizontal__body > .btn.btn--primary {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* Destinations */
.page-mag .mag-bloc--destinations {
  margin-bottom: 30px;
  padding: 25px 15px;
  border-radius: var(--radius-card, 20px);
  background: var(--surface-grayscale-grayscale-100, #f3f3f3);
}

.page-mag .mag-bloc__title {
  margin: 0 0 15px;
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: var(--font-weight-black, 900);
  color: var(--color-secondary, #240046);
  text-align: center;
}

.page-mag .hub-thematic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.page-mag .hub-thematic-card {
  position: relative;
  border-radius: var(--radius-card, 20px);
  overflow: hidden;
}

.page-mag .hub-thematic-card__image-wrap {
  position: relative;
  height: 200px;
}

.page-mag .hub-thematic-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-mag .hub-thematic-card__overlay {
  position: absolute;
  inset: 0;
  background: var(
    --gradient-photo-overlay,
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 66.67%,
      rgba(36, 0, 70, 0.55) 83%,
      rgba(36, 0, 70, 1) 100%
    )
  );
}

.page-mag .hub-thematic-card__label {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  color: #fff;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-16, 16px);
}

.page-mag .hub-thematic-swiper-wrap {
  display: none;
}

.page-mag a.hub-thematic-card--linked {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Page article */
.page-mag.article .mag-article-header {
  margin-bottom: 25px;
}

.page-mag .mag-article-header__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 15px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14, 14px);
  line-height: 1.4;
}

.page-mag .mag-article-header__breadcrumb a {
  color: var(--color-primary, #ff6d00);
  text-decoration: none;
}

.page-mag .mag-article-header__breadcrumb a:hover {
  text-decoration: underline;
}

.page-mag .mag-article-header__breadcrumb-sep {
  color: var(--color-text-muted, #6c757d);
}

.page-mag .mag-article-header__breadcrumb-current {
  color: var(--color-text, #212529);
}

.page-mag .mag-article-header__hero {
  position: relative;
  height: 420px;
  min-height: 420px;
  border-radius: var(--radius-card, 20px);
  overflow: hidden;
  margin-bottom: 20px;
}

.page-mag .mag-article-header__hero--no-image {
  height: auto;
  min-height: 0;
  background: var(--surface-grayscale-grayscale-100, #f3f3f3);
}

.page-mag .mag-article-header__hero--no-image .mag-article-header__hero-body {
  position: relative;
  padding: 25px 20px;
}

.page-mag .mag-article-header__hero--no-image .mag-article-header__title {
  color: var(--color-secondary, #240046);
}

.page-mag .mag-article-header__hero--no-image .mag-article-header__tag {
  border-color: rgba(36, 0, 70, 0.2);
  background: rgba(36, 0, 70, 0.08);
  color: var(--color-secondary, #240046);
}

.page-mag .mag-article-header__media,
.page-mag .mag-article-header__image {
  display: block;
  width: 100%;
  height: 420px;
  min-height: 420px;
  object-fit: cover;
}

.page-mag .mag-article-header__overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-photo-overlay);
  pointer-events: none;
}

.page-mag .mag-article-header__location {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--radius-label, 5px);
  background: var(--color-primary, #ff6d00);
  color: #fff;
  font-size: var(--font-size-14, 14px);
  text-decoration: none;
}

.page-mag .mag-article-header__hero-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px;
}

.page-mag .mag-article-header__title {
  margin: 0 0 10px;
  font-family: var(--font-family-primary);
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: var(--font-weight-black, 900);
  line-height: 1.25;
  color: #fff;
}

/* guide.v3.css applique un dégradé sur main h1 (page-guide) — annuler sur le hero Mag */
body.page-mag main h1.mag-article-header__title {
  font-size: 1.4rem;
  color: #fff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
}

/* Sans photo, le titre repose sur le fond gris clair : même spécificité que
   la règle ci-dessus, sinon le blanc l'emporte. */
body.page-mag main .mag-article-header__hero--no-image h1.mag-article-header__title {
  color: var(--color-secondary, #240046);
  -webkit-text-fill-color: var(--color-secondary, #240046);
}

/* Mobile : les titres longs doivent pouvoir se couper (la taille, elle, est
   fixee a 1.4rem plus bas, avec la specificite qui bat guide.v3.css). */
@media (max-width: 767px) {
  .page-mag .mag-article-header__title,
  .page-mag .mag-hub-listing-header__title {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* Occurrences dedoublonnees d'une URL : meme balise <a>, mais sans href — le
   navigateur ne leur donne donc plus ni curseur ni focus, on les retablit.
   Les couleurs et styles viennent des classes d'origine, inchangees. */
.page-mag a[data-uniq-link] {
  cursor: pointer;
}

.page-mag a[data-uniq-link]:focus-visible {
  outline: 2px solid var(--color-primary, #ff6d00);
  outline-offset: 2px;
}

/* Mobile : le titre de section prend toute la largeur pour peu de mots. */
@media (max-width: 767px) {
  .page-mag .mag-section__heading {
    margin-bottom: 12px;
  }

  .page-mag .mag-section__title {
    font-size: var(--font-size-18, 18px);
  }
}

.page-mag .mag-article-header__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-mag .mag-article-header__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-label, 5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(36, 0, 70, 0.75);
  color: #fff;
  font-size: var(--font-size-14, 14px);
  text-decoration: none;
}

.page-mag .mag-article-header__tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary, #ff6d00);
  flex-shrink: 0;
}

.page-mag .mag-article-header__intro {
  padding: 0 5px;
}

.page-mag .mag-article-header__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 15px;
}

.page-mag .mag-article-header__date {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14, 14px);
  color: var(--color-text-muted, #6c757d);
}

.page-mag .mag-article-header__accroche {
  margin-bottom: 20px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18, 18px);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.5;
  color: var(--color-text, #212529);
}

.page-mag .mag-article-header__accroche p {
  margin: 0 0 10px;
}

.page-mag .mag-article-header__sommaire {
  padding: 20px;
  border-radius: var(--radius-card, 20px);
  background: var(--surface-grayscale-grayscale-100, #f3f3f3);
}

.page-mag .mag-article-header__sommaire-title {
  margin: 0 0 12px;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-20, 20px);
  font-weight: var(--font-weight-black, 900);
  color: var(--color-secondary, #240046);
}

.page-mag .mag-article-header__sommaire-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text, #212529);
}

.page-mag .mag-article-header__sommaire-list li {
  margin-bottom: 6px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  line-height: 1.4;
}

.page-mag .mag-article-header__sommaire-list a {
  color: var(--color-primary, #ff6d00);
  text-decoration: none;
}

.page-mag .mag-article-header__sommaire-list a:hover {
  text-decoration: underline;
}

.page-mag .mag-article-header__sommaire-list--cols {
  columns: 2;
  column-gap: 24px;
}

@media (max-width: 640px) {
  .page-mag .mag-article-header__sommaire-list--cols {
    columns: 1;
  }
}

/* Dispos — carousel sous le sommaire (guide-top-campings v3 + pagination) */
.page-mag .mag-article-top-dispos {
  margin-top: 20px;
}

.page-mag .mag-article-top-dispos .guide-top-moment-section {
  margin: 0;
  padding: 0;
}

.page-mag .mag-article-top-dispos .top-camping-container-guide {
  width: 100%;
}

.page-mag .mag-article-top-dispos .guide-top-moment-pagination {
  margin-top: 12px;
}

/* Mobile : carrousel horizontal (1 carte visible, swipe) — pas de pile verticale */
@media (max-width: 991px) {
  .page-mag .mag-article-top-dispos .guide-top-moment-swiper-wrap--desktop {
    display: none !important;
  }

  .page-mag .mag-article-top-dispos .guide-top-moment-swiper-wrap--mobile {
    display: block !important;
    overflow: hidden;
    width: 100%;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .page-mag .mag-article-top-dispos .guide-top-moment-swiper--mobile {
    overflow: hidden;
    width: 100%;
    margin-bottom: 0;
    touch-action: pan-y;
  }

  .page-mag .mag-article-top-dispos .guide-top-moment-swiper--mobile .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    box-sizing: border-box;
  }

  .page-mag .mag-article-top-dispos .guide-top-moment-swiper--mobile .swiper-slide {
    flex-shrink: 0 !important;
    width: min(286px, 85vw) !important;
    height: auto;
    box-sizing: border-box;
  }

  .page-mag .mag-article-top-dispos .guide-top-push-card-wrap {
    width: min(286px, 85vw);
    max-width: 100%;
  }
}

.page-mag .mag-article-author {
  margin-bottom: 30px;
  padding: 25px 15px;
  border-radius: var(--radius-card, 20px);
  background: var(--surface-grayscale-grayscale-100, #f3f3f3);
}

.page-mag .mag-article-author__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.page-mag .mag-article-author__profile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  text-decoration: none;
  color: inherit;
}

.page-mag .mag-article-author__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-mag .mag-article-author__name {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary, #ff6d00);
}

.page-mag .mag-article-author__bio {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  line-height: 1.6;
  color: var(--color-text, #212529);
  text-align: left;
}

.page-mag .mag-article-author__bio p {
  margin: 0 0 10px;
}

.page-mag .mag-section--seo {
  margin-bottom: 30px;
}

.page-mag .mag-section--seo-main .mag-seo-links--featured {
  display: block;
  max-width: none;
  margin: 0;
}

.page-mag .mag-seo-link--featured .mag-seo-link__card {
  display: block;
  width: 100%;
}

.page-mag .mag-seo-link--featured .mag-seo-link__media {
  height: 280px;
}

.page-mag .mag-seo-link--featured .mag-seo-link__title {
  font-size: var(--font-size-18, 18px);
}

.page-mag .mag-section--seo-themes .mag-seo-links--themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 15px;
  max-width: none;
  margin: 0;
}

.page-mag .mag-section__heading--sub {
  margin-top: 24px;
}

.page-mag .mag-section--info {
  margin-bottom: 30px;
}

.page-mag .mag-section__info {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  line-height: 1.5;
  color: var(--color-text, #212529);
}

.page-mag .mag-seo-link__card {
  display: block;
  border-radius: var(--radius-card, 20px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.page-mag .mag-seo-link__media {
  position: relative;
  height: 180px;
}

.page-mag .mag-seo-link__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-mag .mag-seo-link__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 66.67%,
    rgba(36, 0, 70, 0.35) 100%
  );
}

.page-mag .mag-seo-link__body {
  padding: 15px;
  text-align: center;
}

.page-mag .mag-seo-link__title {
  margin: 0 0 8px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-secondary, #240046);
}

.page-mag .mag-seo-link__stats {
  margin: 0;
  font-size: var(--font-size-14, 14px);
  color: var(--color-primary, #ff6d00);
}

.page-mag .mag-contents__block.contenu a {
  color: inherit;
  box-shadow: inset 0 -5px 0 0 var(--color-highlight, #fcff00);
  text-decoration: none;
}

.page-mag .mag-contents__block.contenu a:hover {
  box-shadow: inset 0 -8px 0 0 var(--color-highlight, #fcff00);
}

.page-mag .mag-contents__block.conseil-redaction {
  padding: 20px;
  border-radius: var(--radius-card, 20px);
  border: 1px solid #e0e0e0;
  background: #fff;
}

.page-mag .mag-contents__block.conseil-redaction h3 {
  margin: 0 0 10px;
  font-size: var(--font-size-18, 18px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-secondary, #240046);
}

.page-mag .mag-contents__block.listing,
.page-mag .mag-contents__block.slider {
  margin-top: 15px;
}

@media (max-width: 991px) {
  .page-mag .mag-featured__carousel,
  .page-mag .mag-section__carousel,
  .page-mag .hub-thematic-swiper-wrap {
    display: none;
  }

  .page-mag .mag-featured__main {
    margin-bottom: 15px;
  }

  .page-mag .mag-featured__main .card-article--large.card-article--immersive {
    height: 300px;
  }

  .page-mag .mag-featured__secondary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .page-mag .mag-featured__secondary .card-article.card-article--immersive {
    height: 260px;
    min-height: 260px;
  }

  .page-mag .mag-featured__secondary .card-article.card-article--immersive .card-article__inner {
    height: 260px;
    min-height: 260px;
  }

  .page-mag .mag-articles-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .page-mag .mag-articles-immersive {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .page-mag .mag-section--immersive .card-article--immersive {
    height: 260px;
  }

  .page-mag .hub-thematic-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .page-mag .hub-thematic-card__image-wrap {
    height: 200px;
  }
}

@media (max-width: 767px) {
  .page-mag .mag-main {
    padding: 15px 10px 30px;
  }

  .page-mag .mag-article-header__hero {
    height: 260px;
    min-height: 260px;
  }

  .page-mag .mag-article-header__media,
  .page-mag .mag-article-header__image {
    height: 260px;
    min-height: 260px;
  }

  .page-mag .mag-contents__block.contenu img,
  .page-mag .mag-contents__block.contenu picture img {
    height: auto;
  }

  .page-mag .mag-contents__block.contenu .galerie,
  .page-mag .mag-contents__block.contenu .swiper-container-gallerie {
    padding-top: 62%;
  }

  .page-mag .mag-contents__block.contenu .galerie .swiper-slide img,
  .page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide img {
    height: 100% !important;
  }

  .page-mag .mag-article-header__hero-body {
    padding: 15px;
  }
}

/* Auteur — page profil */
.page-mag .mag-auteur-header__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 30px 15px 10px;
}

.page-mag .mag-auteur-header__avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(36, 0, 70, 0.12);
}

.page-mag .mag-auteur-header__title {
  margin: 0;
  color: var(--color-secondary, #240046);
}

/* Le hero article force le H1 en blanc (body.page-mag main h1.mag-article-header__title) :
   sur la page auteur le fond est clair, on reprend la même spécificité pour rester lisible. */
body.page-mag main h1.mag-auteur-header__title {
  color: var(--color-secondary, #240046);
  -webkit-text-fill-color: var(--color-secondary, #240046);
}

.page-mag .mag-auteur-header__fonction {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  color: var(--color-primary, #ff6d00);
  font-weight: var(--font-weight-bold, 700);
}

.page-mag .mag-auteur-header__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.page-mag .mag-auteur-header__social-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 14px;
  border-radius: var(--radius-cta, 100px);
  background: var(--color-secondary, #240046);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14, 14px);
  font-weight: 700;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.page-mag .mag-auteur-header__social-link:hover {
  background: var(--color-primary, #ff6d00);
}

/* Listing articles */
.page-mag .mag-article-row__link {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.page-mag .mag-article-row__link:hover {
  opacity: 0.85;
}

.page-mag .mag-article-row__link:hover .mag-article-row__title {
  color: var(--color-primary, #ff6d00);
}

.page-mag .mag-listing-filters {
  margin-top: 10px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-mag .mag-listing-header .mag-article-header__intro {
  padding-bottom: 40px;
}

/* En-tete des pages paginees (…?page=N) : pas de photo, donc pas de hero —
   juste le fil d'ariane et le titre, sans fond ni carte. */
.page-mag .mag-hub-listing-header__body {
  padding: var(--space-20, 20px) 0 0;
}

.page-mag .mag-hub-listing-header__title {
  margin: 0 0 var(--space-20, 20px);
  font-family: var(--font-family-primary);
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: var(--font-weight-black, 900);
  line-height: 1.25;
}

/* Meme specificite (0,2,3) que la regle qui force le blanc sur les titres de
   hero, pour que la couleur de texte normale l'emporte ici. */
body.page-mag main h1.mag-hub-listing-header__title {
  font-size: 1.4rem;
  color: var(--color-secondary, #240046);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--color-secondary, #240046);
}

/* Mobile : 22px en graisse black tient rarement en moins de 4 lignes sur un
   titre de hub. On descend d'un cran et on autorise la coupure des mots longs
   (noms de destinations composes) pour ne pas deborder. */
@media (max-width: 767px) {
  .page-mag .mag-hub-listing-header__body {
    padding-top: var(--space-15, 15px);
  }

  .page-mag .mag-hub-listing-header__title {
    font-size: var(--font-size-20, 20px);
    margin-bottom: var(--space-15, 15px);
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

.page-mag.listing #mag-listing-articles {
  margin-top: 8px;
}

.page-mag .mag-listing-filters__tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.page-mag .mag-listing-filters__tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 18px;
  border-radius: var(--radius-cta, 100px);
  background: #fff;
  color: var(--color-secondary, #240046);
  border: 1px solid var(--color-secondary, #240046);
  text-decoration: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16, 16px);
  font-weight: 700;
  transition:
    background-color var(--transition-primary-cta, 1s ease),
    background var(--transition-primary-cta, 1s ease),
    border-color var(--transition-primary-cta, 1s ease),
    color 0.3s ease;
}

.page-mag .mag-listing-filters__tab.is-active {
  background: var(--color-primary, #ff6d00);
  border-color: var(--color-primary, #ff6d00);
  color: #fff;
}

@media (hover: hover) {
  .page-mag .mag-listing-filters__tab:hover,
  .page-mag .mag-listing-filters__tab:focus-visible {
    background: var(--color-primary-gradient-end, #ff9e00);
    background-color: var(--color-primary-gradient-end, #ff9e00);
    border-color: var(--color-primary-gradient-end, #ff9e00);
    color: #fff;
  }
}

.page-mag .mag-listing-filters__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-mag .mag-listing-filters__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page-mag .mag-listing-filters__label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-12, 12px);
  font-weight: 700;
  color: var(--color-text-muted, #6c757d);
}

.page-mag .mag-listing-filters__select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong, #ddd);
  border-radius: var(--radius-card, 12px);
  background: #fff;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14, 14px);
  color: var(--color-text, #212529);
  cursor: pointer;
}

.page-mag .mag-listing-filters__select:focus {
  outline: 2px solid var(--color-primary, #ff6d00);
  outline-offset: 1px;
}

.page-mag .mag-listing-pagination-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0 10px;
}

.page-mag .mag-listing-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.page-mag .mag-listing-pagination .pagination__prev,
.page-mag .mag-listing-pagination .pagination__next {
  width: 35px;
  height: 35px;
  border-radius: var(--radius-cta, 100px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: rgba(36, 0, 70, 0.8);
  color: #fff;
  font-weight: 700;
  transition: background-color 0.3s ease;
}

.page-mag .mag-listing-pagination .pagination__prev:hover,
.page-mag .mag-listing-pagination .pagination__next:hover {
  background: var(--color-primary, #ff6d00);
}

.page-mag .mag-listing-pagination .pagination__prev.is-disabled,
.page-mag .mag-listing-pagination .pagination__next.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 991px) {
  .page-mag .mag-listing-filters__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .page-mag .mag-auteur-header__avatar {
    width: 110px;
    height: 110px;
  }

  .page-mag .mag-listing-filters__row {
    grid-template-columns: 1fr;
  }
}



/* /views/layout/toocamp.v3.seo.layout.css */
/*
 * Surcharges v3 du gabarit views/layout/toocamp.v3.seo.html.ejs
 * (pages SEO, fiches camping, mag, hubs).
 *
 * Ce bloc était écrit en <style> dans le <head> du gabarit (≈ 125 Ko
 * renvoyés dans chaque page). Il est maintenant servi dans le fichier
 * regroupé « v3 » (lib/cssBundles.js), juste APRÈS main.v3.css et ses
 * @import : même position dans la cascade qu'avant, donc mêmes règles
 * gagnantes. Le fichier regroupé est versionné par empreinte : après un
 * déploiement l'URL change, il n'y a plus de copie périmée en cache, et
 * plus besoin de « miroirs » de guide.v3.css ici pour contourner le CDN.
 *
 * Modifier ce fichier comme on modifiait le bloc : pris en compte au
 * redémarrage pm2 (immédiatement en développement).
 */
    /* The legacy stylesheets define a full visual styling for .menu-content
       (orange background, display:none, top:-100vh, border-radius:50px,
       .menu-content-list background, etc.) that completely break the V3
       drawer. Reset the few properties V3 relies on. */
    body.v3 .menu-content {
      top: 0 !important;
      background: #fff !important;
      background-color: #fff !important;
      border-radius: 0 !important;
      display: flex !important;
      height: 100% !important;
      width: 500px !important;
      max-width: 100vw !important;
      transform: translateX(-100%);
    }
    body.v3 .menu-content.is-open { transform: translateX(0) !important; }
    body.v3 .menu-content .menu-content-list {
      background: #f8f9fa !important;
      background-color: #f8f9fa !important;
      margin: 0 !important;
      padding: 15px !important;
    }
    body.v3 .menu-content-list__link {
      color: #240046 !important;
    }
    /* Same family of legacy SEO overrides for the destination modal. */
    body.v3 .search-modal { top: 0 !important; }
    body.v3 .search-modal-backdrop { top: 0 !important; }
    /* Legacy `.seo .seo-body-docker { background: var(--listing-bg); padding: 1rem }`
       paints a grey background behind the V3 listing. Keep the 1rem
       padding (we want a small gutter around the cards), only reset
       the background. */
    body.v3 .seo-body-docker { background: transparent !important; padding: 1rem !important; }
    body.v3 .seo-body { background: transparent !important; }
    /* Legacy `.seo section.listing article` has higher specificity (0,2,2)
       than `.card-camping-horizontal` (0,1,0) so it wins on box-shadow /
       margin and on its own padding/background that don't match the V3
       intent. We restore the V3 values explicitly here (do NOT zero them
       out — that would collapse the inner padding and remove the white
       card background). */
    body.v3 .listing article.card-camping-horizontal {
      box-shadow: none !important;
      margin-bottom: var(--space-20, 20px) !important;
      padding: var(--space-15, 15px) !important;
      background-color: var(--color-surface, #fff) !important;
      border-radius: var(--radius-card, 20px) !important;
    }
    /* The hosting-strip variant has its own min-height (386px) but the
       inner padding still applies — leave the body padding alone so the
       title is not glued to the gallery. */
    /* The V3 base `.card-camping-horizontal { display: flex }` is meant
       for the simple "image | body" layout. On the hosting-strip variant
       the children are `__top-row` (already flex) and `guide-hosting-strip`
       which must stack vertically — using flex on the parent triggers
       cross-axis alignment that pushes the content down (large empty
       space above the title). Switch to block here so the two children
       behave as normal stacked blocks. */
    body.v3 .card-camping-horizontal--hosting-strip {
      display: block !important;
    }
    /* The V3 base sets `.card-camping-horizontal { gap: var(--space-20) }`
       which shifts the swiper-wrapper inside the media-stack and offsets
       the body to the right. Remove the gap and replace it with explicit
       margins on the children so the spacing is predictable. Scoped to
       body.seo so it only applies to the SEO listing pages (the .seo
       class is added by controller.body_class()). */
    body.seo.v3 .card-camping-horizontal { gap: 0 !important; }
    body.seo.v3 .card-camping-horizontal .card-camping-horizontal__body { width: 100%; }
    /* Gap remplacé par une marge explicite entre l'image et le bloc de droite
       (desktop uniquement — en mobile l'image passe au-dessus du body).
       UNIQUEMENT sur les cards SANS offre d'hébergement : les cards
       hosting-strip ont déjà leur propre espacement (sinon marge doublée). */
    @media (min-width: 768px) {
      body.seo.v3 .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) .card-camping-horizontal__media-stack {
        margin-right: var(--space-20, 20px);
      }
    }
    body.seo.v3 .card-camping-horizontal .guide-hosting-strip { margin-top: var(--space-10, 10px); }
    body.seo.v3 .guide-hosting-strip__card {
      gap: 0 !important;
      /* Padding haut/bas réduit de 50% (12px → 6px). */
      padding-top: 6px !important;
      padding-bottom: 6px !important;
    }
    /* gap:0 colle la vignette au bloc infos → on redonne un espace à droite. */
    body.seo.v3 .guide-hosting-strip__thumb {
      margin-right: 12px;
    }
    /* Séparateur vertical : var(--color-border) est trop clair sur le fond gris
       de la carte → on le rend plus contrasté pour qu'il soit visible. */
    body.seo.v3 .guide-hosting-strip__sep {
      background: var(--color-border-strong, #adb5bd) !important;
    }
    /* Encart hébergement : date et prix réduits (design). */
    body.seo.v3 .guide-hosting-strip__dates { font-size: var(--font-size-14); }
    body.seo.v3 .guide-hosting-strip__amount { font-size: var(--font-size-18); }
    /* Nuités : « 7 nuits » en gras + ligne à 0.9rem.
       Le <strong> est régi par la règle globale
       `.seo section.listing article strong { font-size: 1.2rem }` → on
       l'override avec une spécificité supérieure (classe __nights en plus). */
    body.seo.v3 .guide-hosting-strip__nights { font-size: 0.9rem; }
    .seo section.listing article .guide-hosting-strip__nights strong { font-size: 0.9rem; }
    /* Fil d'ariane : mis au goût V3 — même recette que celui de la fiche
       camping (.camping-detail-ariane__fil : 14px Nunito, liens orange en
       gras, étapes violettes, chevrons estompés). Le style v2 (Raleway Black
       19px, fond blanc, padding-left 1rem qui désalignait le fil des autres
       blocs) est entièrement écrasé, marge gauche comprise. */
    body.seo.v3 .breadcrumb {
      display: flex !important;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 8px;
      margin: 0 !important;
      padding: var(--space-15, 15px) 0 !important;
      background: transparent !important;
    }
    body.seo.v3 .breadcrumb .ariane,
    body.seo.v3 .breadcrumb .ariane span {
      font-family: var(--font-family-secondary) !important;
      font-size: var(--font-size-18, 18px) !important;
      font-weight: var(--font-weight-regular, 400) !important;
      color: var(--color-secondary, #240046) !important;
      line-height: 1.4 !important;
    }
    /* Etapes cliquables : orange, PAS en gras. */
    body.seo.v3 .breadcrumb .ariane a,
    body.seo.v3 .breadcrumb .ariane a span {
      font-family: var(--font-family-secondary) !important;
      font-size: var(--font-size-18, 18px) !important;
      font-weight: var(--font-weight-regular, 400) !important;
      color: var(--color-primary, #ff6d00) !important;
      text-decoration: none !important;
    }
    /* Page courante : seul element en gras. C'est le seul segment dont le
       libelle est un <span> DIRECT (les etapes cliquables enveloppent le
       leur dans un <a>) — pas besoin de :has() ni de :last-child. */
    body.seo.v3 .breadcrumb .ariane > span {
      font-weight: var(--font-weight-black, 900) !important;
      color: var(--color-secondary, #240046) !important;
    }
    body.seo.v3 .breadcrumb .ariane a:hover span,
    body.seo.v3 .breadcrumb .ariane a:hover {
      text-decoration: underline !important;
    }
    /* Mobile : le fil deborde souvent sur 2-3 lignes. On garde la 1re ligne
       calee a gauche comme les autres blocs, et on DECALE les lignes
       suivantes (indentation pendante) pour qu'on lise le fil d'un coup
       d'oeil. text-indent n'agit pas sur un conteneur flex : le fil repasse
       en flux texte, ses segments en inline. */
    @media (max-width: 767px) {
      body.seo.v3 .breadcrumb {
        display: block !important;
        padding: var(--space-15, 15px) 0 var(--space-15, 15px) 22px !important;
        text-indent: -22px !important;
      }
      body.seo.v3 .breadcrumb .ariane {
        display: inline !important;
      }
    }
    /* Carrousel mags : de l'air à gauche au repos, MAIS via un inset qui fait
       partie du contenu défilable (margin sur la 1ʳᵉ carte) → il se scrolle
       away, pas de marge blanche fixe. + snap sur les cartes. */
    body.seo.v3 section.mags-linkings .mags.in-line {
      scroll-padding-left: 1rem;
      scroll-snap-type: x mandatory;
    }
    body.seo.v3 section.mags-linkings .mags.in-line > article {
      scroll-snap-align: start;
    }
    body.seo.v3 section.mags-linkings .mags.in-line > article:first-child {
      margin-left: 1rem;
    }
    /* Card with a hosting strip (price/availability shown): gradient
       border using the orange→purple brand gradient. Uses the classic
       padding-box / border-box double-background trick so the gradient
       renders as a 2px border that respects the card's border-radius.
       Note: the shorthand `background:` is set with !important so it
       wins over the earlier `background-color: var(--color-surface)
       !important` (the shorthand also resets background-color). */
    body.seo.v3 .listing article.card-camping-horizontal.card-camping-horizontal--hosting-strip {
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, var(--color-primary, #eb7039), var(--color-secondary-light, #9d4edd)) border-box !important;
      border: 2px solid transparent !important;
      box-shadow: none !important;
    }
    /* Card WITHOUT a hosting strip: drop-shadow + bordure marquee. Le
       1px a 6% d'opacite du reglage Figma etait invisible sur le fond
       clair du listing ; 2px a 22% donne le meme poids visuel que la
       bordure degradee des cartes avec hosting-strip. */
    body.seo.v3 .listing article.card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) {
      border: 2px solid rgba(36, 0, 70, 0.22) !important;
      box-shadow: 0 4px 18px rgba(36, 0, 70, 0.12) !important;
    }
    /* Guide head: neutralize the user-agent margins on h1/h2 + the
       legacy `.seo main h1 { padding: 2rem; line-height: 1.8rem }`
       rule that were inflating the vertical gap between the orange
       title and the violet subtitle. Keep the V3 spacing (5px between
       title and subtitle, matching the Figma reference). */
    body.seo.v3 .guide-head__titles h1.guide-head__title,
    body.seo.v3 .guide-head__titles h2.guide-head__subtitle {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      /* Une regle du bundle legacy passe ces titres en `display: flex` :
         `text-align: center` (pose par .guide-head__titles) n'aligne alors
         plus le texte, qui se colle a gauche. On les remet en bloc et on
         centre explicitement — justify-content en filet si un flex revient. */
      display: block !important;
      text-align: center !important;
      justify-content: center !important;
    }
    /* H1 degrade : conserver de l'espace sous les descendantes (p, g, y)
       — background-clip:text les coupe si line-height/padding trop serrés. */
    body.seo.v3 .guide-head__titles h1.guide-head__title {
      padding: 0 0 0.15em !important;
      line-height: 1.35 !important;
      overflow: visible !important;
      margin-bottom: var(--space-5, 5px) !important;
    }
    body.seo.v3 .guide-head__titles h2.guide-head__subtitle {
      padding: 0 !important;
      line-height: 1.2 !important;
    }
    /* Le gabarit pose `page-comparateur` sur le body : la regle
       `.page-comparateur .guide-head__titles { margin-bottom: 0 }` de
       guide.v3.css collait le paragraphe d'intro au sous-titre. */
    body.seo.v3 .guide-head__titles {
      margin-bottom: var(--space-15, 15px) !important;
    }
    /* V3 .guide-head ships `padding: var(--space-50) 0` (50px top &
       bottom). On SEO pages the head sits right above the top-campings
       section which already has its own top spacing, so the bottom
       padding piles up. Zero it. */
    body.seo.v3 .guide-head.guide-head--has-intro-actions {
      padding-bottom: 0 !important;
    }
    /* V3 base `.section { padding: var(--space-50) 0 }` adds 50px top
       padding above the top-campings carousel which doubles up with
       the guide-head spacing right above. Drop the top padding here. */
    body.seo.v3 .section.guide-top-moment-section {
      padding-top: 0 !important;
    }
    /* Guide head intro: legacy `.seo main p.intro` (kept under .seo .seo
       body) was overriding the V3 .guide-head__text font and spacing
       even though the class name changed (the `.seo main p` selectors
       still match). Restore the V3 typography explicitly. */
    body.seo.v3 .guide-head p.guide-head__text {
      font-family: var(--font-family-secondary) !important;
      font-size: var(--font-size-18, 18px) !important;
      line-height: var(--line-height-27, 27px) !important;
      padding: 0 !important;
      margin: 0 auto var(--space-30, 30px) !important;
      max-width: 900px !important;
      text-align: center !important;
    }
    /* Ancre « > Lire + » en fin d'accroche : en gras.
       Miroir de guide.v3.css (cache CDN). */
    body.seo.v3 .guide-head p.guide-head__text a.court {
      font-weight: var(--font-weight-bold, 700) !important;
    }
    /* Pages marque / label (guide-head--marque, seo.v2/index.ejs) : en
       desktop le logo est à gauche et titre + intro s'alignent à gauche,
       comme sur le site actuel (.intoduction.marque). Les deux règles
       ci-dessus centrent en !important : on les surcharge ici, au même
       niveau de priorité, uniquement à partir de 992px. */
    @media (min-width: 992px) {
      body.seo.v3 .guide-head--marque .guide-head__titles h1.guide-head__title,
      body.seo.v3 .guide-head--marque .guide-head__titles h2.guide-head__subtitle,
      body.seo.v3 .guide-head--marque .guide-head__titles {
        text-align: left !important;
      }
      body.seo.v3 .guide-head--marque p.guide-head__text {
        text-align: left !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
      }
    }
    /* Table of contents (Sommaire): two issues vs Figma reference.
       (1) V3 border is plain orange (border: 2px solid var(--color-primary)).
           Figma shows a horizontal orange→violet gradient. Use a double
           background trick (background-clip: padding + border-box) so
           the gradient sits on the border ring. */
    body.seo.v3 .table-of-contents {
      border: 2px solid transparent !important;
      background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(90deg, var(--color-primary, #eb7039), var(--color-secondary-light, #9d4edd)) !important;
      background-origin: border-box !important;
      background-clip: padding-box, border-box !important;
    }
    /* (2) Items had ~50px vertical gap (legacy `.seo` font / line-height
        inherited from Raleway Medium). Force a compact rhythm matching
        the V3 spec. */
    body.seo.v3 .table-of-contents__item {
      margin-bottom: 0 !important;
      line-height: 1.4 !important;
    }
    body.seo.v3 .table-of-contents__link {
      line-height: 1.4 !important;
    }
    body.seo.v3 h3.table-of-contents__title {
      margin-bottom: 0 !important;
    }
    /* ===== Content section (.seo .contenu) — V3 typography & tables.
       Reproduces the Figma reference: dark bold h2/h3, comfortable
       paragraph rhythm with violet links, and table cards with an
       orange → violet gradient header. ===== */
    body.seo.v3 .seo-body .contenu h2,
    body.seo.v3 .seo-body .contenu section > h2 {
      font-family: var(--font-family-primary) !important;
      font-size: 28px !important;
      font-weight: var(--font-weight-black, 900) !important;
      color: var(--color-text, #240046) !important;
      line-height: 1.2 !important;
      margin: var(--space-30, 30px) 0 var(--space-15, 15px) !important;
      padding: 0 !important;
      text-align: left !important;
    }
    /* h3 / h4 / p : MÊMES corps que la fiche camping (h3 18px Nunito black,
       p 18px Nunito, interligne 27px) — le contenu SEO avait sa propre
       échelle (h3 22px Outfit, p 16px) et la typo sautait d'une page à
       l'autre. h1/h2 étaient déjà alignés (32 / 28px Outfit black). */
    body.seo.v3 .seo-body .contenu h1,
    body.seo.v3 .seo-body h1 {
      font-family: var(--font-family-primary) !important;
      font-size: var(--font-size-32, 32px) !important;
      font-weight: var(--font-weight-black, 900) !important;
      line-height: 1.2 !important;
    }
    body.seo.v3 .seo-body .contenu h3 {
      font-family: var(--font-family-secondary) !important;
      font-size: var(--font-size-18, 18px) !important;
      font-weight: var(--font-weight-black, 900) !important;
      color: var(--color-text, #240046) !important;
      line-height: var(--line-height-27, 27px) !important;
      margin: var(--space-20, 20px) 0 var(--space-10, 10px) !important;
    }
    body.seo.v3 .seo-body .contenu h4 {
      font-family: var(--font-family-secondary) !important;
      font-size: var(--font-size-16, 16px) !important;
      font-weight: var(--font-weight-black, 900) !important;
      color: var(--color-text, #240046) !important;
      line-height: var(--line-height-27, 27px) !important;
      margin: var(--space-15, 15px) 0 var(--space-10, 10px) !important;
    }
    body.seo.v3 .seo-body .contenu p,
    body.seo.v3 .seo-body .contenu li {
      font-family: var(--font-family-secondary) !important;
      font-size: var(--font-size-18, 18px) !important;
      line-height: var(--line-height-27, 27px) !important;
      color: var(--color-text-body, #495057) !important;
    }
    body.seo.v3 .seo-body .contenu p {
      margin: 0 0 var(--space-15, 15px) !important;
    }
    /* Inline content links: violet + bold, no underline at rest.
       Show the underline ONLY for visited links so users can track
       what they've already opened (browsers limit `:visited` to color
       props, hence the transparent → currentColor underline trick). */
    /* Inline content links — must beat the legacy .seo cascade. Cover
       both .contenu and the nested .contenu-thematique subsections.
       Use `text-decoration-line: none` at rest (more reliable than
       transparent color across browsers) and toggle the line back on
       only when :visited. */
    body.seo.v3 .contenu a:not(.btn):not(.table-of-contents__link),
    body.seo.v3 .contenu-thematique a:not(.btn):not(.table-of-contents__link) {
      color: var(--color-secondary-light, #9d4edd) !important;
      font-weight: normal !important;
      text-decoration: none !important;
      text-decoration-line: none !important;
      /* Legacy `.seo` links draw their underline with a box-shadow
         (inset bottom border trick). Neutralize it at rest. */
      box-shadow: none !important;
      text-underline-offset: 3px;
    }
    body.seo.v3 .contenu a:not(.btn):not(.table-of-contents__link):visited,
    body.seo.v3 .contenu-thematique a:not(.btn):not(.table-of-contents__link):visited {
      text-decoration: underline !important;
      text-decoration-line: underline !important;
      text-decoration-color: currentColor !important;
      -webkit-text-decoration-color: currentColor !important;
    }
    /* Table card: rounded container, gradient header, no harsh borders.
       Applies to both the .table-wrapper variant AND bare <table>s
       (e.g. table.atouts-camping that ships without a wrapper). */
    body.seo.v3 .seo-body .contenu .table-wrapper,
    body.seo.v3 .seo-body .contenu > table,
    body.seo.v3 .seo-body .contenu section > table {
      background: #fff !important;
      border: 1px solid var(--color-border, #dee2e6) !important;
      border-radius: var(--radius-card, 20px) !important;
      padding: var(--space-10, 10px) var(--space-15, 15px) !important;
      box-shadow: 0 4px 16px rgba(36, 0, 70, 0.06) !important;
      margin: var(--space-15, 15px) 0 var(--space-20, 20px) !important;
      overflow-x: auto;
    }
    /* Bloc pricing : les mentions <p> sous le tableau (sources / composition
       du prix) s'affichent en encadré gris clair arrondi (maquette). */
    body.seo.v3 .seo-body .contenu section.pricing > p,
    body.seo.v3 section.ville.pricing > p {
      background: var(--color-surface-muted, #e9ecef);
      border-radius: var(--radius-card, 20px);
      padding: 14px 24px !important;
      margin: var(--space-10, 10px) 0 0 !important;
      color: var(--color-text, #240046) !important;
      font-family: var(--font-family-secondary) !important;
      font-size: 16px !important;
      line-height: 1.5 !important;
    }
    /* Les mentions vont par paire : on les fusionne en UN seul encadré.
       1er <p> (suivi d'un <p>) : on colle son bas (pas de radius/padding bas). */
    body.seo.v3 .seo-body .contenu section.pricing > p:has(+ p),
    body.seo.v3 section.ville.pricing > p:has(+ p) {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
    }
    /* 2e <p> (précédé d'un <p>) : on colle son haut. */
    body.seo.v3 .seo-body .contenu section.pricing > p + p,
    body.seo.v3 section.ville.pricing > p + p {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      padding-top: 0 !important;
      margin-top: 0 !important;
    }
    body.seo.v3 .seo-body .contenu table {
      width: 100%;
      max-width: 100% !important;
      table-layout: auto !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
    }
    /* Responsive : certains modules IA posent des largeurs fixes en attribut
       sur les cellules (<td width="228">…) qui forcent une largeur totale
       (~780px) et font déborder le tableau sur mobile. On les neutralise pour
       que le tableau redevienne fluide comme table.atouts-camping. */
    body.seo.v3 .seo-body .contenu table td,
    body.seo.v3 .seo-body .contenu table th {
      width: auto !important;
    }
    /* Mobile : le padding horizontal (20px × 2 par cellule) suffit à faire
       déborder un tableau à 4 colonnes sur les petits écrans. On le resserre
       pour que le tableau tienne dans la largeur (pas de scroll, comme la
       référence à 2 colonnes). */
    @media (max-width: 767px) {
      body.seo.v3 .seo-body .contenu table td,
      body.seo.v3 .seo-body .contenu table th,
      body.seo.v3 .seo-body .contenu table tr:has(> th) > th,
      body.seo.v3 .seo-body .contenu table tr:has(> th) > td,
      body.seo.v3 .seo-body .contenu table:not(:has(th)) > tbody > tr:first-child > td,
      body.seo.v3 .seo-body .contenu table:not(:has(th)) > tr:first-child > td {
        padding-left: 8px !important;
        padding-right: 8px !important;
      }
    }
    /* ===== En-tête de tableau CMS — dégradé généralisé (design de réf.) =====
       Les tableaux du contenu SEO sont produits par différents modules IA,
       avec des structures HTML différentes :
       · module A : vraie ligne <th> (ex: table.atouts-camping) ;
       · module B : 1ʳᵉ ligne en <td bgcolor="#fcdcc4"> (fond pêche inline,
         AUCUN <th>).
       On cible la ligne d'en-tête dans les DEUX cas, sans jamais risquer de
       dégrader une ligne de données :
       · `tr:has(> th)`          → la (les) ligne(s) qui contiennent des <th> ;
       · `table:not(:has(th))`   → tableaux SANS aucun <th> : la 1ʳᵉ ligne
         (ces modules ne génèrent pas de <thead>) fait office d'en-tête. */
    body.seo.v3 .seo-body .contenu table tr:has(> th),
    body.seo.v3 .seo-body .contenu table:not(:has(th)) > tbody > tr:first-child,
    body.seo.v3 .seo-body .contenu table:not(:has(th)) > tr:first-child {
      background: linear-gradient(90deg, var(--color-primary, #eb7039), var(--color-secondary-light, #9d4edd)) !important;
    }
    /* Cellules d'en-tête (th ET td) : neutralise le bgcolor="#fcdcc4" inline
       (background:transparent laisse voir le dégradé de la ligne) + texte
       blanc. text-align volontairement non forcé : les styles inline / règles
       par-colonne gardent l'alignement (1ʳᵉ col à gauche, autres centrées). */
    body.seo.v3 .seo-body .contenu table tr:has(> th) > th,
    body.seo.v3 .seo-body .contenu table tr:has(> th) > td,
    body.seo.v3 .seo-body .contenu table:not(:has(th)) > tbody > tr:first-child > td,
    body.seo.v3 .seo-body .contenu table:not(:has(th)) > tr:first-child > td {
      /* Dégradé porté PAR LES CELLULES (le <tr> n'est pas peint par iOS en
         border-collapse:separate). Chaque cellule peint sa tranche ; elles se
         raccordent sur la couleur médiane #c45f8b (= milieu exact orange↔violet)
         → aucun saut, quel que soit le nombre de colonnes. Base = médian solide
         (pour les colonnes du milieu) ; 1ʳᵉ/dernière cellule = demi-dégradés. */
      background: #c45f8b !important;
      color: #fff !important;
      font-family: var(--font-family-secondary) !important;
      font-weight: var(--font-weight-bold, 700) !important;
      font-size: 14px !important;
      padding: 6px var(--space-20, 20px) !important;
      line-height: 1.2 !important;
      border: none !important;
    }
    /* Le <strong> dans les cellules d'en-tête doit aussi passer en blanc. */
    body.seo.v3 .seo-body .contenu table tr:has(> th) strong,
    body.seo.v3 .seo-body .contenu table:not(:has(th)) > tbody > tr:first-child strong,
    body.seo.v3 .seo-body .contenu table:not(:has(th)) > tr:first-child strong {
      color: #fff !important;
    }
    /* Coins arrondis (pill) sur la 1ʳᵉ et la dernière cellule de l'en-tête. */
    body.seo.v3 .seo-body .contenu table tr:has(> th) > :first-child,
    body.seo.v3 .seo-body .contenu table:not(:has(th)) > tbody > tr:first-child > :first-child,
    body.seo.v3 .seo-body .contenu table:not(:has(th)) > tr:first-child > :first-child {
      border-top-left-radius: 999px;
      border-bottom-left-radius: 999px;
      background: linear-gradient(90deg, var(--color-primary, #eb7039), #c45f8b) !important;
    }
    body.seo.v3 .seo-body .contenu table tr:has(> th) > :last-child,
    body.seo.v3 .seo-body .contenu table:not(:has(th)) > tbody > tr:first-child > :last-child,
    body.seo.v3 .seo-body .contenu table:not(:has(th)) > tr:first-child > :last-child {
      border-top-right-radius: 999px;
      border-bottom-right-radius: 999px;
      background: linear-gradient(90deg, #c45f8b, var(--color-secondary-light, #9d4edd)) !important;
    }
    body.seo.v3 .seo-body .contenu table td {
      padding: var(--space-15, 15px) var(--space-20, 20px) !important;
      border: none !important;
      border-bottom: 1px solid var(--color-border-light, #f1f3f5) !important;
      font-family: var(--font-family-secondary) !important;
      font-weight: normal !important;
      font-size: 15px !important;
      color: var(--color-text, #240046) !important;
      /* text-align owned by the per-column rules below — same logic as
         the header <th>. */
    }
    body.seo.v3 .seo-body .contenu table td:first-child,
    body.seo.v3 .seo-body .contenu table th:first-child {
      text-align: left !important;
    }
    body.seo.v3 .seo-body .contenu table th:not(:first-child),
    body.seo.v3 .seo-body .contenu table td:not(:first-child) {
      text-align: center !important;
    }
    body.seo.v3 .seo-body .contenu table tr:last-child td {
      border-bottom: none !important;
    }
    /* .prix span: plain weight, just keep the V3 typography. */
    body.seo.v3 .seo-body .contenu table td .prix {
      font-family: var(--font-family-secondary) !important;
      font-weight: normal !important;
      font-size: 15px !important;
      color: var(--color-text, #240046) !important;
    }
    /* ===== Thematic cards (.contenu-thematique > ul.campings) =====
       Restyle the legacy thematic camping list as V3 dark cards with
       gradient TOP badge, orange title, white description, and an
       orange pill CTA at the bottom. Markup stays untouched (it's
       generated from CMS-managed HTML). */
    body.seo.v3 .contenu-thematique {
      counter-reset: thematic-card;
      margin: var(--space-30, 30px) 0;
    }
    body.seo.v3 .contenu-thematique > p {
      margin-bottom: var(--space-20, 20px) !important;
    }
    body.seo.v3 .contenu ul.campings {
      list-style: none !important;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column;
      gap: var(--space-20, 20px);
      background: transparent !important;
    }
    /* Mobile: horizontal scroll with snap, one card per viewport. */
    @media (max-width: 767px) {
      body.seo.v3 .contenu ul.campings {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: var(--space-10, 10px) var(--space-15, 15px) var(--space-20, 20px) 0 !important;
        scroll-padding-left: var(--space-15, 15px);
        /* Full-bleed : pleine largeur écran quel que soit le padding/max-width
           du parent (.contenu) → plus de coupe à droite. */
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        gap: var(--space-15, 15px);
        scrollbar-width: none;
      }
      body.seo.v3 .contenu ul.campings::-webkit-scrollbar {
        display: none;
      }
      body.seo.v3 .contenu ul.campings > li {
        flex: 0 0 85% !important;
        scroll-snap-align: start;
      }
      /* Inset gauche scrollable (comme les mags) : la 1ʳᵉ carte porte la marge,
         qui fait partie du contenu défilable → air à gauche au repos, qui file
         au scroll. Le padding-left du conteneur est à 0 pour ne pas doubler. */
      body.seo.v3 .contenu ul.campings > li:first-child {
        margin-left: var(--space-15, 15px) !important;
      }
    }
    /* Horizontal card layout (desktop): image left (280px) + body
       column (TOP badge / camping-body / description / CTA) on the
       right. CSS Grid places the (single) image into the left column
       and the 4 right-column rows hold the ::before badge + the legacy
       children. Card has an 8px inset so the image is not flush
       with the card border (matches the Figma reference). */
    body.seo.v3 .contenu ul.campings > li {
      counter-increment: thematic-card;
      position: relative;
      display: grid;
      grid-template-columns: 340px 1fr;
      /* Default: 3 rows (badge / title / description) — covers the
         LLM-generated structure which has no <a.go> CTA. The full V2
         structure (with .camping-body + a.go) overrides below to add
         a 90px CTA row. */
      grid-template-rows: auto auto 1fr;
      gap: 0 var(--space-20, 20px);
      background: var(--color-text, #240046);
      color: #fff;
      border-radius: var(--radius-card, 20px);
      overflow: hidden;
      padding: 8px !important;
      list-style: none;
      /* Legacy reset. */
      max-width: none !important;
      margin: 0 !important;
      border-top: none !important;
    }
    /* Place the image (or its wrapper) into the full-height left
       column. CMS content varies — sometimes the image is wrapped in
       `<a class="medias">`, sometimes `<div class="medias">`, and
       sometimes it's a bare `<img>` direct child in any position
       (e.g. between `.camping-body` and `.description`). We use a
       broad selector list with no `:first-child` constraint so the
       image is found wherever the LLM-generated markup places it. */
    body.seo.v3 .contenu ul.campings > li > a.medias,
    body.seo.v3 .contenu ul.campings > li > .medias,
    body.seo.v3 .contenu ul.campings > li > picture,
    body.seo.v3 .contenu ul.campings > li > img {
      grid-column: 1;
      grid-row: 1 / -1;
      border-radius: calc(var(--radius-card, 20px) - 6px);
    }
    /* ::before holds the TOP badge — put it INSIDE the body column
       (grid-column: 2, grid-row: 1) above the camping name instead
       of overlaying the image.
       Two HTML structures are supported (both rendered by free CMS):
         (a) Full V2  : <li class="camping"><div .camping-body><h3 .camping-nom>…</h3><div .geo>…</div></div><a .medias>…</a><div .description>…</div><a .go>…</a></li>
         (b) LLM short: <li><h3><a .camping-link>…</a></h3><a .medias>…</a><div .description>…</div></li>
       For (b) the <h3> is a direct child (no .camping-body wrapper)
       so it needs its own grid placement in row 2 column 2. */
    body.seo.v3 .contenu ul.campings > li > .camping-body,
    body.seo.v3 .contenu ul.campings > li > h3 {
      grid-column: 2;
      grid-row: 2;
    }
    body.seo.v3 .contenu ul.campings > li > .description {
      grid-column: 2;
      grid-row: 3;
    }
    body.seo.v3 .contenu ul.campings > li > a.go {
      grid-column: 2;
      grid-row: 4;
    }
    /* Add the 4th 90px CTA row only when the card actually has a
       <a.go> button (V2 full structure). LLM short structure stays
       on the 3-row template. */
    body.seo.v3 .contenu ul.campings > li:has(> a.go) {
      grid-template-rows: auto auto 1fr 80px;
    }
    /* Mobile: single column (image on top, body below). */
    @media (max-width: 767px) {
      body.seo.v3 .contenu ul.campings > li {
        grid-template-columns: 1fr;
        /* image / titre / description / CTA — le badge est superposé (absolu). */
        grid-template-rows: auto auto 1fr auto;
        gap: 0;
        /* Pas de padding en haut ni sur les côtés → l'image colle aux bords.
           On garde un padding en bas ; le texte reçoit son propre retrait. */
        padding: 0 0 var(--space-15, 15px) 0 !important;
      }
      /* Image TOUT EN HAUT et BORD À BORD (width:100% = largeur du li, aucun
         padding autour). Le li (overflow:hidden + radius 20px) clippe les coins
         arrondis. Vaut pour <a class="medias">, <div class="medias">,
         <picture> ET <img> nue. */
      body.seo.v3 .contenu ul.campings > li > a.medias,
      body.seo.v3 .contenu ul.campings > li > .medias,
      body.seo.v3 .contenu ul.campings > li > picture,
      body.seo.v3 .contenu ul.campings > li > img {
        grid-column: 1;
        grid-row: 1;
        width: 100% !important;
        height: 200px !important;
        margin: 0;
        /* Coins hauts arrondis DIRECTEMENT sur l'image : sous Safari iOS,
           overflow:hidden + border-radius du <li> ne clippe pas l'image
           bord-à-bord (coin carré). On arrondit donc l'image elle-même. */
        border-radius: var(--radius-card, 20px) var(--radius-card, 20px) 0 0;
        object-fit: cover;
        aspect-ratio: auto !important;
      }
      /* <img> NUE : hauteur fixe + object-fit:cover, comme l'image dans
         <a class="medias">. On abandonne height:auto : sous Safari iOS, une
         <img> item-grid en height:auto (avec ses attributs width/height HTML)
         garde son ratio et ne se cale pas à droite (espace résiduel). Une
         hauteur fixe + cover remplit toute la largeur, bord à bord, partout. */
      body.seo.v3 .contenu ul.campings > li > img {
        height: 200px !important;
        object-fit: cover !important;
      }
      /* Coins hauts arrondis aussi sur l'<img> à l'intérieur du wrapper
         (<a class="medias"> / <span class="medias">) — pour Safari iOS. */
      body.seo.v3 .contenu ul.campings > li .medias > img,
      body.seo.v3 .contenu ul.campings > li a.medias > img {
        border-radius: var(--radius-card, 20px) var(--radius-card, 20px) 0 0 !important;
      }
      /* Badge « TOP » superposé sur l'image (ne prend plus de ligne). */
      body.seo.v3 .contenu ul.campings > li::before {
        position: absolute;
        top: 8px;
        left: 8px;
        margin: 0;
        z-index: 3;
      }
      /* Le li n'a plus de padding latéral : on le redonne au texte. */
      body.seo.v3 .contenu ul.campings > li > .camping-body,
      body.seo.v3 .contenu ul.campings > li > h3 {
        grid-column: 1;
        grid-row: 2;
        padding-left: var(--space-15, 15px) !important;
        padding-right: var(--space-15, 15px) !important;
        margin-top: var(--space-10, 10px);
      }
      body.seo.v3 .contenu ul.campings > li > .description {
        grid-column: 1;
        grid-row: 3;
        padding-left: var(--space-15, 15px) !important;
        padding-right: var(--space-15, 15px) !important;
      }
      body.seo.v3 .contenu ul.campings > li > a.go {
        grid-column: 1;
        grid-row: 4;
        margin-left: var(--space-15, 15px) !important;
        margin-right: var(--space-15, 15px) !important;
      }
    }
    /* Mobile: stack image on top, body below (classic vertical card). */
    @media (max-width: 767px) {
      body.seo.v3 .contenu ul.campings > li {
        flex-direction: column;
      }
    }
    /* TOP badge generated via counter (no markup change needed).
       Placed as a grid item in column 2 (body column) above the camping
       name — matches the Figma reference. On desktop and mobile the
       badge lives in row 1 of the grid. */
    /* Ancien badge ::before (mono-style « TOP N ») désactivé : remplacé par un
       vrai badge HTML .guide-thematic-badge (injecté en JS), qui porte le
       libellé « Coup de cœur » en gras. */
    body.seo.v3 .contenu ul.campings > li::before {
      content: none !important;
    }
    /* Cartouche « Coup de cœur » superposé en haut-gauche de l'image. */
    body.seo.v3 .contenu ul.campings > li > .guide-thematic-badge {
      position: absolute;
      top: 2rem;
      left: 0;
      z-index: 4;
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      padding: 7px 16px;
      /* Collé au bord gauche : côté gauche droit (pas de radius), seul le
         côté droit est arrondi. */
      border-radius: 0 999px 999px 0;
      background: linear-gradient(90deg, var(--color-primary, #ff6d00), var(--color-secondary-light, #9d4edd));
      color: #fff;
      font-family: var(--font-family-secondary);
      line-height: 1.1;
      box-shadow: 0 2px 10px rgba(36, 0, 70, 0.28);
      white-space: nowrap;
    }
    body.seo.v3 .contenu ul.campings > li > .guide-thematic-badge > strong {
      font-weight: var(--font-weight-black, 900);
      font-size: 15px;
    }
    @media (max-width: 767px) {
      body.seo.v3 .contenu ul.campings > li::before {
        grid-column: 1;
        grid-row: 1;
        margin: var(--space-15, 15px) 0 0 var(--space-15, 15px);
      }
    }
    /* Image: left column on desktop (fills full card height), top
       row on mobile (4:3 ratio for consistent height).

       Three legacy constraints we must neutralize so the image fills
       the full grid cell:
         1. `.seo main .contenu ul.campings li a` has `max-height: 13rem`
            (inline.css) and `max-height: 19rem` at min-width:1025px
            (reponsive.css) — caps <a> at ~208/304px tall.
         2. `.seo main .contenu ul.campings li a { margin-bottom: 1rem }`
            pushes things down.
         3. `.seo main .contenu ul.campings li a img` has
            `height: 200px !important` at min-width:1025px (reponsive.css)
            — locks the <img> to 200px even if the parent is taller.

       We target both `a.medias` AND `.medias` AND a bare first <a>
       since the CMS HTML structure varies between cards. */
    body.seo.v3 .contenu ul.campings > li > a.medias,
    body.seo.v3 .contenu ul.campings > li > .medias {
      display: block;
      width: 100%;
      height: 100%;
      max-height: none !important;
      margin-bottom: 0 !important;
      overflow: hidden;
      box-shadow: none !important;
    }
    @media (max-width: 767px) {
      body.seo.v3 .contenu ul.campings > li > a.medias,
      body.seo.v3 .contenu ul.campings > li > .medias {
        height: auto;
        aspect-ratio: 4 / 3;
      }
      /* Bare <img> direct child (no wrapper) needs the same mobile
         aspect-ratio treatment so it doesn't render at its natural
         800×533 pixel size. */
      body.seo.v3 .contenu ul.campings > li > img {
        height: auto;
        aspect-ratio: 4 / 3;
      }
    }
    /* Override the legacy fixed-height image rule across ALL <img>
       inside a thematic card, regardless of wrapper. */
    body.seo.v3 .contenu ul.campings > li img {
      width: 100% !important;
      height: 100% !important;
      max-height: none !important;
      object-fit: cover;
      display: block;
    }
    body.seo.v3 .contenu ul.campings > li .camping-body {
      padding: 0 var(--space-20, 20px) 0 var(--space-20, 20px) !important;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    @media (max-width: 767px) {
      body.seo.v3 .contenu ul.campings > li .camping-body {
        padding: 0 var(--space-15, 15px) 0 var(--space-15, 15px) !important;
      }
    }
    body.seo.v3 .contenu ul.campings > li .geo,
    body.seo.v3 .contenu ul.campings > li .geo .ville {
      color: rgba(255, 255, 255, 0.75) !important;
      font-family: var(--font-family-secondary);
      font-size: 13px;
      font-weight: normal !important;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
    }
    /* Camping name — orange title.
       Covers both V2 (`h3.camping-nom`) and LLM (`h3` with no class
       containing `<a class="camping-link">`). The inner <a> in the
       LLM form gets its own colour rule below since legacy `.seo a`
       rules paint it a different colour with high specificity. */
    body.seo.v3 .contenu ul.campings > li h3.camping-nom,
    body.seo.v3 .contenu ul.campings > li > h3 {
      color: var(--color-primary, #eb7039) !important;
      font-family: var(--font-family-primary);
      font-size: 20px !important;
      font-weight: var(--font-weight-black, 900) !important;
      line-height: 1.25 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    body.seo.v3 .contenu ul.campings > li > h3 a,
    body.seo.v3 .contenu ul.campings > li > h3 a.camping-link {
      color: var(--color-primary, #eb7039) !important;
      font: inherit !important;
      text-decoration: none !important;
      box-shadow: none !important;
    }
    body.seo.v3 .contenu ul.campings > li > h3 a:hover,
    body.seo.v3 .contenu ul.campings > li > h3 a.camping-link:hover {
      color: var(--color-primary-dark, #d4602a) !important;
      text-decoration: none !important;
    }
    /* Description.
       The full V2 HTML wraps the text directly in <div class="description">
       but the LLM-short and the manual HTML wrap it in
       <div class="description"><p>…</p></div>. The wider rule earlier
       (body.seo.v3 .seo-body .contenu p { color: #495057 !important }
       at line ~216) paints every <p> in .contenu grey — including the
       one inside our dark card. Apply the white colour AND the V3 typo
       to BOTH the .description div and any <p> inside it so the inner
       <p> wins against the grey rule. */
    body.seo.v3 .contenu ul.campings > li .description,
    body.seo.v3 .contenu ul.campings > li .description p {
      color: rgba(255, 255, 255, 0.92) !important;
      font-family: var(--font-family-secondary) !important;
      font-size: 14px !important;
      line-height: 1.55 !important;
    }
    body.seo.v3 .contenu ul.campings > li .description {
      padding: var(--space-10, 10px) var(--space-20, 20px) var(--space-15, 15px) !important;
    }
    body.seo.v3 .contenu ul.campings > li .description p {
      margin: 0 !important;
    }
    @media (max-width: 767px) {
      body.seo.v3 .contenu ul.campings > li .description {
        padding: var(--space-10, 10px) var(--space-15, 15px) var(--space-15, 15px) !important;
      }
    }
    body.seo.v3 .contenu ul.campings > li .description strong,
    body.seo.v3 .contenu ul.campings > li .description p strong {
      color: #fff !important;
      font-weight: var(--font-weight-bold, 700) !important;
    }
    /* Voir le camping CTA: orange pill, natural width, aligned at the
       bottom-left of the card body. Uses grid alignment (justify-self)
       instead of flex's align-self since the parent is a grid. */
    body.seo.v3 .contenu ul.campings > li a.go {
      justify-self: center;
      align-self: end;
      margin: var(--space-10, 10px) var(--space-20, 20px) var(--space-20, 20px) !important;
      padding: 10px 22px !important;
      background: var(--color-primary, #eb7039) !important;
      color: #fff !important;
      font-family: var(--font-family-secondary);
      font-weight: var(--font-weight-bold, 700) !important;
      font-size: 14px;
      border-radius: 999px !important;
      text-decoration: none !important;
      text-align: center;
      box-shadow: none !important;
      transition: background 0.2s ease;
    }
    body.seo.v3 .contenu ul.campings > li a.go::after {
      content: " \2192"; /* arrow → */
    }
    body.seo.v3 .contenu ul.campings > li a.go:hover {
      background: var(--color-primary-dark, #d4602a) !important;
    }
    /* Atouts touristiques table: 2 textual columns — left-align every
       cell. The double `.atouts-camping.atouts-camping` selector bumps
       specificity above every other `.contenu table` rule above so
       text-align: left wins even on header-row <th>. */
    body.seo.v3 .seo-body .contenu table.atouts-camping.atouts-camping th,
    body.seo.v3 .seo-body .contenu table.atouts-camping.atouts-camping td,
    body.seo.v3 .seo-body .contenu table.atouts-camping.atouts-camping tr:first-child th,
    body.seo.v3 .seo-body .contenu table.atouts-camping.atouts-camping th:first-child,
    body.seo.v3 .seo-body .contenu table.atouts-camping.atouts-camping th:not(:first-child) {
      text-align: left !important;
    }
    /* ────────────────────────────────────────────────────────────────
       Mag links section (rendered by seo.v2/mag_links.ejs):
         <section class="mags-linkings">
           <h2>L'actualité du camping</h2>
           <div class="mags in-line">
             <article>
               <form/>
               <a class="media">
                 <div class="gradient"></div>
                 <img loading="lazy" src=… />
               </a>
               <p class="url"><span class="cursor link">…</span></p>
             </article>
             …
           </div>
         </section>
       Default V2 = horizontally-scrollable strip with image full-bleed
       + label overlay. V3 design = grid of portrait cards (5:8) with
       a dark violet background, image at the top in its own rounded
       container, and the label below in white. Hover paints the label
       with the orange→purple gradient. */
    body.seo.v3 section.mags-linkings {
      padding: 0 !important;
      margin: var(--space-30, 30px) 0 !important;
      background: transparent !important;
    }
    body.seo.v3 section.mags-linkings > h2 {
      color: var(--color-text, #240046) !important;
      font-family: var(--font-family-primary) !important;
      font-size: 24px !important;
      font-weight: var(--font-weight-black, 900) !important;
      line-height: 1.2 !important;
      margin: 0 0 var(--space-20, 20px) 0 !important;
      padding: 0 !important;
    }
    @media (min-width: 768px) {
      body.seo.v3 section.mags-linkings > h2 { font-size: 28px !important; }
    }
    /* Single-row horizontal scroll-snap strip on every breakpoint —
       cards never wrap to a 2nd line; users scroll to see more.
       Visible count per viewport:
         desktop ≥1024px : ~4 cards (flex-basis 22%)
         tablet 768-1023 : ~3 cards (flex-basis 30%)
         mobile <768px   : ~1.3 cards (flex-basis 75%, see below) */
    body.seo.v3 section.mags-linkings .mags {
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: var(--space-20, 20px) !important;
      padding-bottom: 8px !important;
      background: transparent !important;
      scrollbar-width: none;
    }
    body.seo.v3 section.mags-linkings .mags::-webkit-scrollbar {
      display: none;
    }
    body.seo.v3 section.mags-linkings .mags article {
      flex: 0 0 280px !important;
      width: 280px !important;
      max-width: 280px !important;
      scroll-snap-align: start;
    }
    /* Portrait card: dark violet, padding inset, image on top + label
       below in a column flex. Height is driven by the image (fixed
       260px) + the label (auto, can grow to any number of lines).
       No `aspect-ratio` and no `overflow: hidden` on the article so
       longer titles don't get clipped at the bottom. */
    body.seo.v3 section.mags-linkings .mags article {
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      background: var(--color-text, #240046) !important;
      border-radius: var(--radius-card, 20px) !important;
      padding: 10px !important;
      min-width: 0 !important;
      min-height: 0 !important;
      max-width: none !important;
      margin: 0 !important;
      border: none !important;
    }
    /* Image wrapper: fixed-height rounded box at the top of the card.
       overflow: hidden is on the wrapper so the photo can't spill
       past the rounded corners, but the article itself stays unclipped. */
    body.seo.v3 section.mags-linkings .mags article > .media,
    body.seo.v3 section.mags-linkings .mags article > a.media,
    body.seo.v3 section.mags-linkings .mags article > span.media {
      position: relative !important;
      display: block !important;
      flex: 0 0 auto !important;
      width: 100% !important;
      height: 260px !important;
      max-height: none !important;
      margin: 0 0 var(--space-15, 15px) 0 !important;
      padding: 0 !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      box-shadow: none !important;
      z-index: 1 !important;
    }
    body.seo.v3 section.mags-linkings .mags article > .media img {
      width: 100% !important;
      height: 100% !important;
      max-height: none !important;
      object-fit: cover !important;
      display: block !important;
      border-radius: 0 !important;
    }
    /* Hide the legacy `<div class="gradient">` overlay — V3 has the
       label OUTSIDE the image so no overlay is needed. */
    body.seo.v3 section.mags-linkings .mags article > .media > .gradient {
      display: none !important;
    }
    /* Label block — bottom 38% of the card, white bold V3 typo.
       Strip the legacy absolute positioning. */
    body.seo.v3 section.mags-linkings .mags article > p.url,
    body.seo.v3 section.mags-linkings .mags article > .url {
      position: static !important;
      flex: 1 1 auto !important;
      width: auto !important;
      bottom: auto !important;
      padding: 0 var(--space-10, 10px) var(--space-10, 10px) !important;
      margin: 0 !important;
      line-height: 1.3 !important;
      z-index: 2 !important;
    }
    body.seo.v3 section.mags-linkings .mags article > p.url > .link,
    body.seo.v3 section.mags-linkings .mags article > p.url > span {
      color: #fff !important;
      font-family: var(--font-family-primary) !important;
      font-size: 18px !important;
      font-weight: var(--font-weight-black, 900) !important;
      line-height: 1.3 !important;
    }
    /* Hover: title gets the orange→purple gradient via background-clip
       (Figma "Que faire à Perros Guirec" card). */
    body.seo.v3 section.mags-linkings .mags article:hover > p.url > .link,
    body.seo.v3 section.mags-linkings .mags article:hover > p.url > span {
      background: linear-gradient(90deg, var(--color-primary, #eb7039), var(--color-secondary-light, #9d4edd)) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      color: transparent !important;
    }
    /* Categorie de l'article : pastille orange posee sur la photo, en
       haut a gauche — meme traitement que la pastille region des cartes
       « Top campings ». Le <p> est un frere de .media : on le sort du
       flux pour qu'il ne pousse pas le titre vers le bas. */
    body.seo.v3 section.mags-linkings .mags article > p.categorie {
      position: absolute !important;
      top: 20px !important;
      left: 20px !important;
      right: auto !important;
      max-width: calc(100% - 40px) !important;
      margin: 0 !important;
      padding: 4px 10px !important;
      border-radius: var(--radius-label, 5px) !important;
      background: var(--color-primary, #eb7039) !important;
      z-index: 3 !important;
      pointer-events: none;
    }
    body.seo.v3 section.mags-linkings .mags article > p.categorie > span {
      color: #fff !important;
      font-family: var(--font-family-secondary) !important;
      font-size: 13px !important;
      font-weight: var(--font-weight-bold, 700) !important;
      line-height: 1.2 !important;
    }
    /* Hashtags : sous le titre, en bas de carte (le titre garde le
       flex: 1 et pousse cette ligne vers le bas). */
    body.seo.v3 section.mags-linkings .mags article > p.htags {
      display: flex !important;
      flex: 0 0 auto !important;
      flex-wrap: wrap !important;
      gap: 5px 8px !important;
      margin: 0 !important;
      padding: 0 var(--space-10, 10px) var(--space-10, 10px) !important;
      z-index: 2 !important;
    }
    body.seo.v3 section.mags-linkings .mags article > p.htags > .htag {
      color: rgba(255, 255, 255, 0.75) !important;
      font-family: var(--font-family-secondary) !important;
      font-size: 13px !important;
      font-weight: var(--font-weight-regular, 400) !important;
      line-height: 1.2 !important;
    }
    /* Mobile: same scroll-snap strip, just tighter spacing + slightly
       smaller card so two peek into the viewport. Edge-to-edge bleed
       via negative margin matches the rest of the V3 carousels. */
    @media (max-width: 767px) {
      body.seo.v3 section.mags-linkings .mags {
        gap: var(--space-15, 15px) !important;
        margin: 0 -15px !important;
        padding: 0 15px 10px !important;
      }
      body.seo.v3 section.mags-linkings .mags article {
        flex: 0 0 240px !important;
        width: 240px !important;
        max-width: 240px !important;
      }
      body.seo.v3 section.mags-linkings .mags article > .media,
      body.seo.v3 section.mags-linkings .mags article > a.media,
      body.seo.v3 section.mags-linkings .mags article > span.media {
        height: 220px !important;
      }
      body.seo.v3 section.mags-linkings .mags article > p.url > .link,
      body.seo.v3 section.mags-linkings .mags article > p.url > span {
        font-size: 15px !important;
      }
    }
    /* ────────────────────────────────────────────────────────────────
       Average pricing chart (seo.v3/avg_pricing.ejs).
       Layout: one global SVG (curve + orange→transparent area
       gradient) + absolute-positioned price pills above each data
       point + a row of month labels below. */
    body.seo.v3 section.prix-moyen {
      margin: var(--space-30, 30px) 0 !important;
      background: transparent !important;
      padding: 0 !important;
    }
    body.seo.v3 section.prix-moyen > h2 {
      color: var(--color-text, #240046) !important;
      font-family: var(--font-family-primary) !important;
      font-size: 24px !important;
      font-weight: var(--font-weight-black, 900) !important;
      line-height: 1.2 !important;
      margin: 0 0 var(--space-10, 10px) 0 !important;
      padding: 0 !important;
    }
    @media (min-width: 768px) {
      body.seo.v3 section.prix-moyen > h2 { font-size: 28px !important; }
    }
    body.seo.v3 .avg-pricing-chart__sub {
      color: var(--color-text-body, #495057) !important;
      font-family: var(--font-family-secondary) !important;
      font-size: 14px !important;
      margin: 0 0 var(--space-20, 20px) 0 !important;
    }
    body.seo.v3 .avg-pricing-chart {
      background: #fff !important;
      border-radius: var(--radius-card, 20px) !important;
      /* Meme bordure que les cartes du listing : sans elle le bloc se
         confondait avec le fond, l'ombre seule ne le detachait pas. */
      border: 2px solid rgba(36, 0, 70, 0.22) !important;
      box-shadow: 0 4px 18px rgba(36, 0, 70, 0.12);
      padding: var(--space-20, 20px) var(--space-20, 20px) var(--space-15, 15px) !important;
    }
    /* Inner plot wrapper — position: relative + NO padding so the
       pills' left/top % map exactly to the SVG's viewBox coordinates
       (otherwise the parent padding offsets pill anchors at the edges). */
    body.seo.v3 .avg-pricing-chart__plot {
      position: relative;
      width: 100%;
      height: 240px;
      overflow: visible;
    }
    /* SVG is absolutely positioned to fill the plot exactly. `width: 100%`
       on an inline <svg> with only a viewBox can fall back to the
       intrinsic 300×150 in some browsers, which is what was making the
       curve render at the wrong scale + offset. inset: 0 nails it down. */
    body.seo.v3 .avg-pricing-chart__svg {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
      z-index: 10;
    }
    /* Price pill — anchored at (left%, top%) inside the plot wrapper
       then centered on its data point with translate(-50%, -50%).
       Figma shows the pills sitting ON the curve peaks (centered),
       not floating above — the pill straddles the curve point.
       Drop-shadow + isolated stacking context guarantee the pill
       reads clearly over the orange area gradient below it. */
    body.seo.v3 .avg-pricing-chart__pill {
      position: absolute;
      /* translate(-50%, -150%): centre horizontally on the data point,
         then lift the pill up by 100% of its own height so its BOTTOM
         sits where the data point is — i.e. one full pill height above
         the previous "centred on point" placement. */
      transform: translate(-50%, -150%);
      background: var(--color-primary, #eb7039);
      color: #fff;
      padding: 5px 12px;
      border-radius: 999px;
      font-family: var(--font-family-secondary);
      font-size: 13px;
      font-weight: var(--font-weight-bold, 700);
      white-space: nowrap;
      line-height: 1.2;
      pointer-events: none;
      z-index: 11;
      isolation: isolate;
      /* Soft warm drop shadow only — no white ring (user-requested). */
      box-shadow: 0 2px 8px rgba(235, 112, 57, 0.35);
    }
    body.seo.v3 .avg-pricing-chart__pill--cursor {
      cursor: pointer;
      pointer-events: auto;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    body.seo.v3 .avg-pricing-chart__pill--cursor:hover,
    body.seo.v3 .avg-pricing-chart__pill--cursor:focus {
      transform: translate(-50%, -150%) scale(1.06);
      box-shadow: 0 4px 12px rgba(235, 112, 57, 0.4);
      outline: none;
    }
    /* Months row under the curve. */
    body.seo.v3 .avg-pricing-chart__months {
      display: flex;
      justify-content: space-between;
      margin-top: var(--space-10, 10px);
      color: var(--color-text-body, #495057);
      font-family: var(--font-family-secondary);
      font-size: 14px;
    }
    body.seo.v3 .avg-pricing-chart__month {
      flex: 1;
      text-align: center;
    }
    @media (max-width: 767px) {
      body.seo.v3 .avg-pricing-chart {
        padding: var(--space-15, 15px) !important;
      }
      body.seo.v3 .avg-pricing-chart__plot { height: 200px; }
      body.seo.v3 .avg-pricing-chart__pill {
        font-size: 11px;
        padding: 4px 10px;
      }
      body.seo.v3 .avg-pricing-chart__months { font-size: 12px; }
    }
    /* ────────────────────────────────────────────────────────────────
       Superdeal card frame: replace the legacy flat orange border
       (`.seo section.listing article.superdeal { border: 3px solid
       var(--primary) }` in listing.css) with the same orange→purple
       gradient border used on the listing cards with hosting-strip,
       via the padding-box / border-box double-bg trick so the radius
       is respected. */
    body.seo.v3 .seo section.listing article.superdeal {
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, var(--color-primary, #eb7039), var(--color-secondary-light, #9d4edd)) border-box !important;
      border: 3px solid transparent !important;
      border-radius: var(--radius-card, 20px) !important;
      box-shadow: none !important;
    }
    /* The new V3 superdeal markup uses .
       (not the legacy .camping-body), so the legacy pink-box rule
       `.seo section.listing article.superdeal .camping-body .description`
       doesn't match. Re-apply the same pink highlight to the V3 inner
       description so the slogan reads on a soft background. */
    body.seo.v3 .card-camping-horizontal--superdeal .card-camping-horizontal__body .description {
      background-color: #fae9e3 !important;
      border-radius: 12px !important;
      padding: 12px 16px !important;
      margin: 12px 0 !important;
      color: var(--color-text, #240046) !important;
      line-height: 1.4 !important;
      max-height: 15rem;
      overflow: hidden;
      font-family: var(--font-family-secondary) !important;
      font-size: 14px !important;
    }
    body.seo.v3 .card-camping-horizontal--superdeal .card-camping-horizontal__body .description p {
      margin: 0 !important;
      color: inherit !important;
      font: inherit !important;
    }
    body.seo.v3 .card-camping-horizontal--superdeal .card-camping-horizontal__body .description strong {
      color: var(--color-text, #240046) !important;
      font-weight: var(--font-weight-bold, 700) !important;
    }
    /* Camping sponsorisé par forfait « top » dans le listing : badge
       « publicité » du comparateur (icône + mot traduit, fond sombre) en haut
       à gauche de la photo. Miroir de guide.v3.css (cache CDN). */
    body.seo.v3 .card-camping-horizontal__media-stack { position: relative; }
    body.seo.v3 .card-camping-horizontal__pub {
      position: absolute; top: 10px; left: 10px; z-index: 12; display: flex; align-items: center; gap: 5px;
      padding: 5px 10px; border-radius: 5px; background: rgba(36, 0, 70, 0.8); pointer-events: none;
    }
    body.seo.v3 .card-camping-horizontal__pub-icon { display: block; flex-shrink: 0; width: 18px; height: 18px; }
    body.seo.v3 .card-camping-horizontal__pub-text {
      font-family: var(--font-family-secondary); font-size: 14px; font-weight: 400; line-height: 21px; color: #fff; white-space: nowrap;
    }
    /* Espaces réellement publicitaires (cartes pub du carrousel « Top campings
       du moment », ads du listing) : marqueur « PUB » sombre en haut à droite
       du visuel. Miroir de guide.v3.css. */
    body.seo.v3 .pub-marker {
      position: absolute; top: 10px; right: 10px; z-index: 12;
      display: inline-flex; align-items: center; margin: 0; padding: 3px 10px; border-radius: 100px;
      background: rgba(36, 0, 70, 0.85); color: #fff;
      font-family: var(--font-family-secondary); font-size: 11px; font-weight: 700; line-height: 16px;
      letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
    }
    body.seo.v3 .guide-top-push-card .pub-marker { top: 12px; right: 12px; background: rgba(0, 0, 0, 0.5); }
    /* ads : marqueur (ad-media.ejs) ancré sur la carte, décalage élargi pour tomber dans le
       visuel ; libellés « Pub » du gabarit masqués */
    body.seo.v3 .sda-main .card-sponso { position: relative; }
    body.seo.v3 .sda-main .card-sponso .card-medias { position: static; }
    body.seo.v3 .sda-main .card-sponso .pub-marker { top: 25px; right: 25px; }
    body.seo.v3 .sda-main .card-sponso .tag-text { display: none !important; }
    /* Sous-titre des cartes (superdeal : « Super Deal Morbihan : … ») :
       interligne 21px au lieu des 27px hérités du legacy, trop aérés sur
       deux lignes en mobile. Miroir de guide.v3.css (cache CDN). */
    body.seo.v3 .card-camping-horizontal__location {
      line-height: var(--line-height-21, 21px) !important;
    }
    /* Bloc hébergement / tarif entièrement cliquable (guide-hosting-strip.ejs) */
    body.seo.v3 .guide-hosting-strip__card--clickable { cursor: pointer; transition: background-color 0.2s ease; }
    body.seo.v3 .guide-hosting-strip__card--clickable:hover { background: var(--surface-grayscale-grayscale-300, #dee2e6); }
    body.seo.v3 .guide-hosting-strip__card--clickable:hover .guide-hosting-strip__cta { background: var(--color-primary-gradient-end, #ff9e00); }
    /* The V3 superdeal doesn't ship a hosting title — hide the empty
       <h4> so it doesn't leave a blank line above the dates. */
    body.seo.v3 .card-camping-horizontal--superdeal .guide-hosting-strip__title:empty {
      display: none !important;
    }
    /* ────────────────────────────────────────────────────────────────
       Superdeal badge (<div class="boxe">SUPER DEAL</div> in
       seo.v2/medias.ejs). Legacy renders a flat orange rectangle —
       restyle to match the "TOP 1/2/3" pill used in the thematic
       cards (same orange→purple gradient, rounded pill, V3 typo). */
    body.seo.v3 section.listing article.superdeal .boxe {
      background: linear-gradient(90deg, var(--color-primary, #eb7039), var(--color-secondary-light, #9d4edd)) !important;
      background-color: transparent !important;
      color: #fff !important;
      font-family: var(--font-family-secondary) !important;
      font-size: 12px !important;
      font-weight: var(--font-weight-bold, 700) !important;
      letter-spacing: 0.02em !important;
      padding: 4px 14px !important;
      border-radius: 8px !important;
      top: var(--space-15, 15px) !important;
      left: var(--space-15, 15px) !important;
      z-index: 11;
    }
    /* ────────────────────────────────────────────────────────────────
       Netlinking sections (rendered by seo.v2/links_url_name_img.ejs):
         <section class="linking">
           <h2>…titre…</h2>
           <div class="simple-links in-line">
             <article>
               <form>…</form>
               <a class="media" or <span class="cursor media"…>
                 <img class="lazy" data-src=…>
               </…>
               <div class="linking">
                 <p class="url"><span>Espagne</span></p>
                 <p class="stats"><span>26 campings</span></p>
               </div>
             </article>
             …
           </div>
         </section>
       Default V2 rendering = white landscape cards. V3 design (Figma) =
       portrait cards (5/7) with the image full-bleed, a dark gradient
       overlay, and the label + camping count pinned to the bottom-left
       in white. Done purely via CSS so the legacy partial is untouched. */
    body.seo.v3 section.linking {
      margin: var(--space-30, 30px) 0 !important;
      padding: 0 !important;
      background: transparent !important;
    }
    body.seo.v3 section.linking > h2 {
      color: var(--color-text, #240046) !important;
      font-family: var(--font-family-primary) !important;
      font-size: 24px !important;
      font-weight: var(--font-weight-black, 900) !important;
      line-height: 1.2 !important;
      margin: 0 0 var(--space-20, 20px) 0 !important;
      padding: 0 !important;
    }
    @media (min-width: 768px) {
      body.seo.v3 section.linking > h2 { font-size: 28px !important; }
    }
    /* Colonnes de LARGEUR FIXE (220px) : une carte de netlinking garde la
       même taille quel que soit le nombre de blocs de la section — avec
       auto-fit + 1fr, trois blocs s'étiraient sur toute la largeur alors
       que cinq restaient étroits. En desktop, la regle plus bas passe a
       3 colonnes egales pour combler la ligne. */
    body.seo.v3 section.linking .simple-links {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, 220px) !important;
      justify-content: start !important;
      gap: var(--space-20, 20px) !important;
      padding: 0 !important;
      margin: 0 !important;
      list-style: none !important;
    }
    /* Portrait card: full-bleed image + bottom-anchored label.
       position: relative so the absolute children anchor to it. */
    body.seo.v3 section.linking .simple-links article {
      position: relative !important;
      aspect-ratio: 5 / 7;
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      border-radius: var(--radius-card, 20px) !important;
      overflow: hidden !important;
      background: var(--color-text, #240046) !important;
      box-shadow: 0 4px 16px rgba(36, 0, 70, 0.08);
    }
    /* The media wrapper (<a> when uniq_link, <span> when obfuscated)
       fills the whole article. z-index: 0 explicitly keeps it behind
       the label without creating a new stacking context. */
    body.seo.v3 section.linking .simple-links article > .media,
    body.seo.v3 section.linking .simple-links article > a.media,
    body.seo.v3 section.linking .simple-links article > span.media {
      position: absolute !important;
      inset: 0 !important;
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 0 !important;
      max-height: none !important;
      box-shadow: none !important;
      z-index: 0 !important;
    }
    body.seo.v3 section.linking .simple-links article > .media img {
      width: 100% !important;
      height: 100% !important;
      max-height: none !important;
      object-fit: cover !important;
      display: block !important;
    }
    /* Voile dégradé VIOLET (le noir v2 est remplacé par le violet du design,
       #240046) : plein en bas, transparent au premier tiers — le label blanc
       reste lisible sur n'importe quelle image, sans assombrir le haut de la
       carte. ::after sur le wrapper media, SOUS le label .linking (z-index
       supérieur). */
    body.seo.v3 section.linking .simple-links article > .media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(36, 0, 70, 0.6) 0%, rgba(36, 0, 70, 0) 50%);
      pointer-events: none;
      /* 11 : le CSS v2 embarqué (seo/inline.css) monte l'img des cartes à
         z-index 10 — à 1 le voile passait derrière l'image et devenait
         invisible. Le label .linking (z-index 10, hors du contexte .media)
         reste au-dessus. */
      z-index: 11;
    }
    /* Label block — pinned to the bottom-left of the article. The
       inner .linking class has the same name as the outer <section>
       so we scope by parent .simple-links to disambiguate.
       z-index: 10 + isolation: isolate keeps the label reliably on
       top of the media wrapper and the gradient overlay regardless
       of any legacy stacking context that might apply to .media. */
    body.seo.v3 section.linking .simple-links article > .linking {
      position: absolute !important;
      inset: auto 0 0 0 !important;
      padding: var(--space-20, 20px) !important;
      z-index: 10 !important;
      isolation: isolate;
      color: #fff !important;
      background: transparent !important;
      margin: 0 !important;
    }
    body.seo.v3 section.linking .simple-links article > .linking .url,
    body.seo.v3 section.linking .simple-links article > .linking p.url {
      color: #fff !important;
      font-family: var(--font-family-primary) !important;
      font-size: 22px !important;
      font-weight: var(--font-weight-black, 900) !important;
      line-height: 1.2 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    body.seo.v3 section.linking .simple-links article > .linking .url span,
    body.seo.v3 section.linking .simple-links article > .linking p.url span {
      color: inherit !important;
      font: inherit !important;
    }
    body.seo.v3 section.linking .simple-links article > .linking .stats,
    body.seo.v3 section.linking .simple-links article > .linking p.stats {
      color: rgba(255, 255, 255, 0.88) !important;
      font-family: var(--font-family-secondary) !important;
      font-size: 14px !important;
      font-weight: var(--font-weight-bold, 700) !important;
      line-height: 1.3 !important;
      margin: 4px 0 0 0 !important;
      padding: 0 !important;
    }
    body.seo.v3 section.linking .simple-links article > .linking .stats span,
    body.seo.v3 section.linking .simple-links article > .linking p.stats span {
      color: inherit !important;
      font: inherit !important;
    }
    /* Mobile: 2 cards per row, slightly shorter ratio for usability. */
    @media (max-width: 767px) {
      body.seo.v3 section.linking .simple-links {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-15, 15px) !important;
      }
      body.seo.v3 section.linking .simple-links article > .linking {
        padding: var(--space-15, 15px) !important;
      }
      body.seo.v3 section.linking .simple-links article > .linking .url,
      body.seo.v3 section.linking .simple-links article > .linking p.url {
        font-size: 18px !important;
      }
    }
    /* Desktop uniquement : 3 colonnes egales pour que les cartes comblent
       toute la largeur. Le nombre de colonnes ne depend pas du nombre de
       blocs : une section de deux cartes laisse la 3e colonne vide au lieu
       de s'etirer. */
    @media (min-width: 1024px) {
      body.seo.v3 section.linking .simple-links {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }
    /* Bloc « linking white » (markup v2 : le dernier bloc de netlinking,
       rendu en cartes blanches PAYSAGE par listing.css/reponsive.css v2).
       En v3 il doit se comporter exactement comme les autres blocs — on
       neutralise les règles v2 spécifiques à .white qui passaient encore :
       fond blanc, simple-links à 110%, article en flex 50%, label à 60%. */
    body.seo.v3 section.linking.white,
    body.seo.v3 section .linking.white {
      background: transparent !important;
      overflow: visible !important;
    }
    body.seo.v3 section.linking.white .simple-links,
    body.seo.v3 section .linking.white .simple-links {
      width: 100% !important;
    }
    body.seo.v3 section.linking.white .simple-links article,
    body.seo.v3 section .linking.white .simple-links article {
      display: block !important;
    }
    body.seo.v3 section.linking.white .simple-links article > .linking,
    body.seo.v3 section .linking.white .simple-links article > .linking {
      width: auto !important;
    }
    /* Desktop only: bump TOC link font size (mobile keeps the V3 14px). */
    @media (min-width: 768px) {
      body.seo.v3 .table-of-contents__link {
        font-size: 16px !important;
      }
    }
    /* V3 page-guide pins .top-camping-container-guide and the
       hosting-strip card variant to a max-width of 900px (Figma desktop
       canvas). Inside the SEO body the available space is wider, so
       the fixed cap crops content/padding on the right. Let both fill
       100% of the available width. */
    /* Camping cards: stretch full-width on SEO pages. */
    body.seo.v3 .card-camping-horizontal--hosting-strip,
    body.seo.v3 .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) {
      width: 100% !important;
      max-width: 100% !important;
    }
    /* Non-hosting-strip cards have `flex: 1 1 auto; min-height: 258px`
       on the gallery. When the body is short (e.g. only one tag), the
       gallery still inflates to the intrinsic image height (~600-700px
       for big shots) because there's no max cap. Pin the visible image
       area to 258px so the card stays a sane height. */
    /* === Listing camping — corrections gabarit (design de référence) === */
    /* Titre : le <h3> hérite d'une marge legacy qui crée un vide autour du nom
       et avant les étoiles. On la neutralise (marge serrée). */
    body.seo.v3 .card-camping-horizontal__title {
      /* de l'air avant les etoiles / la localisation, qui collaient au nom */
      margin: 0 0 var(--space-10, 10px) !important;
    }
    body.seo.v3 .card-camping-horizontal__meta {
      margin-bottom: var(--space-5) !important;
    }
    /* Étoiles : en pastille orange clair (le design ne montre pas des étoiles
       nues), étoiles orange à l'intérieur. */
    body.seo.v3 .card-camping-horizontal__stars {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 3px;
      padding: 4px 10px;
      background: #ffe8d9;
      border-radius: 8px;
    }
    body.seo.v3 .card-camping-horizontal__star {
      font-size: 14px;
      color: var(--color-primary, #ff6d00);
    }
    /* Libellé du CTA hébergement (« Réserver ce logement ») : caché par défaut
       (desktop = bouton flèche 48px), révélé uniquement en mobile. */
    body.seo.v3 .guide-hosting-strip__cta-text { display: none; }
    /* ===== Listing camping — ajustements MOBILE (design de référence) ===== */
    @media (max-width: 767px) {
      /* 1) Options sur UNE seule ligne, coupées par un fondu blanc à droite.
         2) « Lire la suite » : lien texte (comme desktop, sans fond), calé à
            droite de la même ligne, posé au-dessus du fondu. */
      body.seo.v3 .card-camping-horizontal__tags {
        flex-wrap: nowrap !important;
        overflow: hidden;
        position: relative;
        padding-right: 128px;
        align-items: center;
        /* options au-dessus du descriptif : marge basse, plus haute */
        margin-top: 0;
        margin-bottom: var(--space-15, 15px);
      }
      body.seo.v3 .card-camping-horizontal__tag {
        flex-shrink: 0;
        color: #240046;
        font-weight: var(--font-weight-regular, 400);
      }
      /* CTA « Lire la suite » / « Réduire le texte » : calé à droite, sur du
         blanc plein (donc net), au-dessus des options. Sa largeur s'adapte
         au libellé et le fondu (::before) le suit automatiquement. */
      body.seo.v3 .card-camping-horizontal__more {
        position: absolute;
        right: 0;
        top: -2px;
        bottom: -2px;
        display: flex;
        align-items: center;
        z-index: 2;
        margin: 0;
        padding: 0 0 0 1rem;
        border: 0;
        background: #fff;
        font-family: var(--font-family-secondary);
        font-size: var(--font-size-14);
        font-weight: var(--font-weight-regular, 400);
        color: #240046;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
      }
      /* Fondu transparent → blanc juste à gauche du CTA : il se fond dans le
         blanc du CTA (aucune arête de boîte visible) et estompe la dernière
         option avant « Lire la suite ». */
      body.seo.v3 .card-camping-horizontal__more::before {
        content: '';
        position: absolute;
        right: 100%;
        top: 0;
        width: 56px;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
        pointer-events: none;
      }
      /* Descriptif court : 4 lignes en mobile (guide.v3.css n'en donne que 2). */
      body.seo.v3 .card-camping-horizontal__desc {
        -webkit-line-clamp: 4;
        line-clamp: 4;
      }
      /* Le clic « Lire la suite » déplie aussi la description en mobile. */
      body.seo.v3 .card-camping-horizontal__desc.is-expanded {
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        display: block !important;
        overflow: visible !important;
      }
      /* 3) Pas de vignette de logement dans la bande dispo (design mobile). */
      body.seo.v3 .guide-hosting-strip__thumb { display: none !important; }
      /* Séparateur vertical masqué en mobile (repris de guide.v3.css, mais
         non buildé côté served CSS → forcé ici pour effet immédiat). */
      body.seo.v3 .guide-hosting-strip__sep { display: none !important; }
      /* La vraie ligne de séparation en mobile = le border-top de __pricing
         (guide.v3.css). On l'enlève. */
      body.seo.v3 .guide-hosting-strip__pricing { border-top: none !important; }
      /* CTA « Réserver ce logement » : termine la carte grise, bord à bord
         (flush). La carte n'a plus de padding en bas ; le bouton déborde de
         12px à gauche/droite pour toucher les bords, et l'overflow:hidden de
         la carte arrondit ses coins bas. */
      body.seo.v3 .guide-hosting-strip__card { padding: 12px 12px 0 !important; }
      body.seo.v3 .guide-hosting-strip__cta {
        width: calc(100% + 24px) !important;
        margin: 12px -12px 0 !important;
        min-height: 48px !important;
        border-radius: 0 !important;
      }
      /* 4) Afficher le libellé « Réserver ce logement » sur le bouton pleine
         largeur (le bouton passe déjà en 100% en mobile). */
      body.seo.v3 .guide-hosting-strip__cta-text {
        display: inline-block !important;
        color: #fff !important;
        font-family: var(--font-family-secondary) !important;
        /* #5 CTA : non gras + plus grand (design). */
        font-weight: var(--font-weight-regular, 400) !important;
        font-size: var(--font-size-18) !important;
        margin-right: 8px;
      }
      /* ===== Mise en conformité design du bloc hébergement (mobile) ===== */
      /* #1 Pills options + infos hébergement : hauteur réduite (~-20%). */
      body.seo.v3 .card-camping-horizontal__tag,
      body.seo.v3 .guide-hosting-strip__tag {
        padding-top: 1px;
        padding-bottom: 1px;
        line-height: 1.15;
      }
      /* #2 Nom de l'hébergement : police primaire (Outfit) + plus grand. */
      body.seo.v3 .guide-hosting-strip__title {
        font-family: var(--font-family-primary) !important;
        font-size: var(--font-size-18);
      }
      /* #4 Date en gras (le mobile la passait en regular). */
      body.seo.v3 .guide-hosting-strip__dates {
        font-weight: var(--font-weight-bold) !important;
      }
    }
    @media (min-width: 768px) {
      body.seo.v3 .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) .card-camping-horizontal__media-stack,
      body.seo.v3 .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) .guide-camping-gallery,
      body.seo.v3 .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) .guide-camping-gallery__viewport,
      body.seo.v3 .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) .guide-camping-gallery__swiper {
        max-height: 258px !important;
        height: 258px !important;
      }
      body.seo.v3 .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) {
        align-items: stretch !important;
      }
      /* Stretch the body to the full card height + flex column so we can
         push the CTA to the bottom. V3 has a similar rule but targets
         only `> a.btn`; our CTA is a <span> (for gotToUrlByIdForm), so
         widen the selector. */
      body.seo.v3 .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) .card-camping-horizontal__body {
        display: flex !important;
        flex-direction: column !important;
        min-height: 258px;
      }
      body.seo.v3 .card-camping-horizontal:not(.card-camping-horizontal--hosting-strip) .card-camping-horizontal__body > .btn.btn--primary {
        /* Plus de margin-top:auto (la description flex:1 absorbe l'espace),
           mais un margin fixe pour aérer entre la liste d'options et le bouton. */
        margin-top: var(--space-15) !important;
        align-self: flex-start;
      }
      /* Description : occupe le maximum d'espace disponible (et montre plus de
         texte), ce qui pousse la liste de tags/options tout en bas du gabarit,
         collée au-dessus du bouton « Voir le camping » / de la bande dispo. */
      body.seo.v3 .card-camping-horizontal__desc {
        flex: 1 1 auto;
        -webkit-line-clamp: 6 !important;
        line-clamp: 6 !important;
        margin-bottom: var(--space-10);
      }
      body.seo.v3 .card-camping-horizontal__tags {
        /* les options sont desormais AU-DESSUS du descriptif : on les en
           separe (la regle datait de l'ordre inverse, marge a zero) */
        margin-bottom: var(--space-15, 15px);
        align-items: center;
      }
      /* « Lire la suite » : pas une pilule d'option — lien texte poussé à
         droite de la ligne d'options. Déplie toute la description au clic. */
      body.seo.v3 .card-camping-horizontal__more {
        margin-left: auto;
        padding: 0;
        border: 0;
        background: none;
        font-family: var(--font-family-secondary);
        font-size: var(--font-size-14);
        font-weight: var(--font-weight-regular, 400);
        color: #240046;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
      }
      body.seo.v3 .card-camping-horizontal__more:hover {
        text-decoration: underline;
      }
      /* Options : même couleur #240046, texte non gras (design). */
      body.seo.v3 .card-camping-horizontal__tag {
        color: #240046;
        font-weight: var(--font-weight-regular, 400);
      }
      /* Description dépliée (après clic sur « Lire la suite »). */
      body.seo.v3 .card-camping-horizontal__desc.is-expanded {
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        display: block !important;
        overflow: visible !important;
        flex: 0 0 auto;
      }
      /* Cards avec dispo (hosting-strip) : body en colonne pleine hauteur pour
         que la description pousse aussi les tags en bas, au-dessus de la bande
         prix. */
      body.seo.v3 .card-camping-horizontal--hosting-strip .card-camping-horizontal__body {
        display: flex !important;
        flex-direction: column !important;
        min-height: 258px;
      }
      /* Hosting-strip cards: the gallery has NO height cap of its own
         in the SEO context (only the base 200px swiper height, which
         doesn't hold when the image fails to load or the media-stack
         is stretched by the flex row). Pin the image area to the same
         258px as the non-hosting cards so both card variants show a
         consistent image size, and anchor it to the top so it never
         stretches to the body height. */
      body.seo.v3 .card-camping-horizontal--hosting-strip .card-camping-horizontal__media-stack,
      body.seo.v3 .card-camping-horizontal--hosting-strip .guide-camping-gallery,
      body.seo.v3 .card-camping-horizontal--hosting-strip .guide-camping-gallery__viewport,
      body.seo.v3 .card-camping-horizontal--hosting-strip .guide-camping-gallery__swiper {
        height: 258px !important;
        max-height: 258px !important;
        min-height: 258px !important;
      }
      body.seo.v3 .card-camping-horizontal--hosting-strip .card-camping-horizontal__media-stack {
        align-self: flex-start !important;
      }
      /* The gallery <img> already uses object-fit: cover (base CSS);
         make sure it fills the 258px box even when lazy-swapped. */
      body.seo.v3 .card-camping-horizontal--hosting-strip .guide-camping-gallery__img {
        height: 258px !important;
        object-fit: cover !important;
      }
    }
    /* Top-campings: center the 900px container under the H1 via plain
       margin auto. Do NOT add flex on the parent — Swiper builds its
       own slide widths and a flex+justify-content:center on the
       section breaks the slide positioning (huge gaps appear between
       cards when the viewport resizes). */
    body.seo.v3 .top-camping-container-guide {
      margin-left: auto !important;
      margin-right: auto !important;
    }
    /* V3 page-guide caps main at 900px (Figma desktop canvas). On the
       SEO pages we want a slightly roomier 1024px. */
    body.seo.v3 main {
      width: 1024px !important;
    }
    /* Pubs bannieres (.sda-main, servies par ads.js) : le CSS legacy
       (_card-ads.scss) force des boites fixes (1009x201 desktop,
       343x330 mobile) et etire le visuel dedans (deformation desktop,
       rognage mobile). Ici la boite epouse le visuel : l'image garde
       son ratio natif, reduite si elle depasse la colonne, jamais
       agrandie, centree sinon. */
    body.seo.v3 .sda-main,
    body.seo.v3 .sda-main.sda-main-banniere {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
    }
    body.seo.v3 .sda-main .card-sponso.banniere,
    body.seo.v3 .sda-main .card-sponso.editorial {
      width: 100% !important;
      height: auto !important;
      /* .card pose padding:10px → bandeau blanc + coins GIF carrés */
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      border: none !important; /* sinon trait gris #e8e8e8 a droite du GIF */
      border-radius: var(--radius-card, 20px) !important;
      align-items: stretch !important;
      box-shadow: none !important;
      background: transparent !important;
    }
    /* .card est en display:flex : un card-body en width:auto se retracte
       sur la largeur naturelle du visuel et laisse un bandeau blanc a
       droite de la carte — il doit remplir la carte. */
    body.seo.v3 .sda-main .card-sponso.banniere .card-body,
    body.seo.v3 .sda-main .card-sponso.editorial .card-body {
      width: 100% !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    /* Desktop : taille naturelle, centree, jamais agrandie — les creas
       bannieres vont du 300x250 au 1900x200, etirer les petites a la
       largeur de la colonne (892px) les pixeliserait. Trop large : reduite,
       ratio conserve. */
    body.seo.v3 .sda-main .card-sponso.banniere .card-body img,
    body.seo.v3 .sda-main .card-sponso.editorial .card-body img {
      display: block;
      width: auto !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: none !important;
      object-fit: initial !important;
      margin: 0 auto;
      border-radius: var(--radius-card, 20px);
    }
    /* Mobile : pleine largeur, ratio natif, coins arrondis (pas de crop 1:1). */
    @media (max-width: 767px) {
      body.seo.v3 .sda-main,
      body.seo.v3 .sda-main.sda-main-banniere {
        width: 90% !important;
        max-width: 90% !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      body.seo.v3 .sda-main .card-sponso.banniere,
      body.seo.v3 .sda-main .card-sponso.editorial {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: var(--radius-card, 20px) !important;
      }
      body.seo.v3 .sda-main .card-sponso.banniere .card-body,
      body.seo.v3 .sda-main .card-sponso.editorial .card-body {
        width: 100% !important;
        height: auto !important;
      }
      body.seo.v3 .sda-main .card-sponso.banniere .card-body img,
      body.seo.v3 .sda-main .card-sponso.editorial .card-body img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        border-radius: var(--radius-card, 20px) !important;
      }
    }
    /* Pubs « inline » du listing (.sda-main-listing, gabarit ads/ad-main).
       Toute la mise en page de ces cartes est ecrite dans guide.v3.css sous
       `.comparateur-offer-list`, un conteneur qui n'existe que sur le
       comparateur : sur les pages SEO les pubs tombent dans
       `.guide-camping-list`, aucune de ces regles ne s'applique et la carte
       se disloque. On reprend ici la meme mise en page, avec trois
       garde-fous contre le CSS legacy servi en inline sur ces pages :
         - `.card-medias { flex: 1 0 100% }` etirait le visuel sur toute la
           largeur et renvoyait le CTA a la ligne suivante, hors de la carte
           (invisible, celle-ci etant en overflow:hidden) ;
         - `.card` est en `flex-wrap: wrap` ;
         - `.ad-header-body { max-height: 75px }` tronquait le descriptif en
           mobile, le texte passant sous le pied de carte. */
    body.seo.v3 .sda-main.sda-main-listing,
    body.seo.v3 .sda-main.sda-main-listing .card-sponso.listing {
      cursor: pointer;
    }
    body.seo.v3 .sda-main .card-sponso.listing {
      position: relative;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      box-sizing: border-box;
      width: 100%;
      padding: 15px;
      gap: 12px;
      border-radius: var(--radius-card, 16px);
      background: var(--color-surface, #fff);
      border: 1px solid var(--color-border, #e8e8e8);
    }
    body.seo.v3 .sda-main .card-sponso.listing .card-medias {
      position: relative;
      flex: 0 0 auto;
      width: 100%;
      height: 180px;
      overflow: hidden;
      border-radius: var(--radius-image, 12px);
      background: #f3f3f3;
    }
    body.seo.v3 .sda-main .card-sponso.listing .card-medias img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    body.seo.v3 .sda-main .card-sponso.listing .ad-header-body {
      flex: 1 1 auto;
      min-width: 0;
      max-height: none;
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      border: 0;
    }
    body.seo.v3 .sda-main .card-sponso.listing .card-header .card-title p {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: var(--color-text, #1b1236);
    }
    body.seo.v3 .sda-main .card-sponso.listing .card-body-ads {
      margin: 0;
      padding: 0;
    }
    body.seo.v3 .sda-main .card-sponso.listing .card-body-ads p {
      margin: 0;
      font-size: 14px;
      line-height: 1.4;
      color: #5c5670;
      max-height: 4.2em;
      overflow: hidden;
    }
    body.seo.v3 .sda-main .card-sponso.listing .card-footer .tag-text,
    body.seo.v3 .sda-main .card-sponso.listing .card-footer .ads-item-url {
      display: none;
    }
    body.seo.v3 .sda-main .card-sponso.listing .card-footer {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: stretch;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    body.seo.v3 .sda-main .card-sponso.listing .comparateur-offer__strip-cta.comparateur-ad-cta {
      border: 0;
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
    }
    @media (min-width: 768px) {
      body.seo.v3 .sda-main.sda-main-listing {
        height: 201px !important;
      }
      body.seo.v3 .sda-main .card-sponso.listing {
        flex-direction: row;
        align-items: stretch;
        height: 201px;
        overflow: hidden;
      }
      body.seo.v3 .sda-main .card-sponso.listing .card-medias {
        flex: 0 0 240px;
        width: 240px;
        height: 100%;
      }
      body.seo.v3 .sda-main .card-sponso.listing .card-footer {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        margin-left: auto;
        align-self: center;
      }
      body.seo.v3 .sda-main .card-sponso.listing .comparateur-offer__strip-cta.comparateur-ad-cta {
        width: auto;
        height: auto;
        min-height: 48px;
        min-width: auto;
        padding: 8px 16px;
        border-radius: 999px;
        margin: 8px 8px 8px 0;
        align-self: auto;
        flex-shrink: 0;
        gap: 0;
      }
    }
    /* Soft fade-out on the right edge of the desktop swiper itself
       (not the outer wrap) so the gradient sits flush against the
       last visible card no matter how narrow the viewport gets. */
    body.seo.v3 .guide-top-moment-swiper-wrap--desktop .guide-top-moment-swiper {
      position: relative;
    }
    body.seo.v3 .guide-top-moment-swiper-wrap--desktop .guide-top-moment-swiper::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 100%;
      pointer-events: none;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
      z-index: 2;
    }
    /* V3 page-guide adds 20px left/right padding on <main> below 768px,
       and .container has its own left/right padding. Drop both on
       mobile SEO pages so cards / sections can fill the viewport.
       The TOC keeps its own 1rem padding so its gradient border ring
       isn't flush with the screen edges. */
    @media (max-width: 767px) {
      body.seo.v3 main,
      body.seo.v3 .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      body.seo.v3 .table-of-contents {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
      }
      /* Fiche camping : la colonne (.camping-detail-main) garde son padding
         latéral de 20px — la marge SEO ci-dessus s'ajoute au width:100% du
         sommaire et le fait déborder à droite. On la retire ici. */
      body.seo.v3 .camping-detail-sommaire .table-of-contents {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      /* The V3 page-guide adds its own padding on .section blocks.
         Strip it on mobile SEO so each section can use the full
         viewport width consistently with main/.container. */
      body.seo.v3 .section {
        padding: 0 !important;
      }
      /* Search header mobile : même gutter 24px que la liste de résultats
         (sinon le pill destination passe à ~258px au lieu de 242px).
         Le .container du header est remis en padding malgré le reset
         body.seo.v3 .container { padding: 0 } plus haut. */
      body.seo.v3 header.header--with-search,
      body.seo.v3 header .header--with-search {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      body.seo.v3 header.header--with-search .container,
      body.seo.v3 header.header--with-search .header__inner {
        padding-left: var(--container-padding, 24px) !important;
        padding-right: var(--container-padding, 24px) !important;
      }
      /* Guide head with intro-actions on mobile: same 1rem gutter so
         the H1/intro/CTA block isn't flush with the screen. Covers the
         BEM-style combined classes and the descendant form. */
      body.seo.v3 .guide-head.guide-head--has-intro-actions,
      body.seo.v3 .guide-head .guide-head--has-intro-actions {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }
      /* Re-introduce a 1rem horizontal padding on the section title and
         the body docker on mobile so the text doesn't hit the viewport
         edges (the parent container padding was just zeroed out). */
      body.seo.v3 .top-camping-container-guide > h2,
      body.seo.v3 .seo-body-docker {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }
    /* The V3 top-campings swiper swaps desktop ↔ mobile at 991px, NOT
       at 767px. Match the same breakpoint here so the mobile swiper
       always gets its 1rem left gutter when active, even between
       768-991px (where the desktop swiper is already hidden). */
    @media (max-width: 991px) {
      body.seo.v3 .guide-top-moment-swiper-wrap--mobile {
        padding-left: 1rem;
      }
    }
    /* Sous-ligne ville/logements : c'est un <p>, donc le legacy lui colle
       un `margin-bottom: 24px` + `font-size: 18px` qui gonfle et déséquilibre
       le panneau. On neutralise pour un rendu compact (design de référence). */
    /* Le CSS legacy colle un margin-bottom aux <p> : on le neutralise pour
       que la carte rende comme sur la home. Rien d autre n est surcharge —
       le composant partage guide.v3.css avec la home. */
    body.seo.v3 .guide-top-push-card__logements {
      margin: 0 !important;
      padding: 0 !important;
    }
    /* Carousel arrows: V3 page-guide ships .__prev with a permanent
       transparent background (rgba 255 255 255 / .4) as if always at
       the beginning. Make .__prev follow the same active/disabled
       logic as .__next so it shows the violet bg when there's a
       previous slide to go to. Also covers Swiper's own
       .swiper-button-disabled class. */
    body.seo.v3 .pagination-carousel__prev {
      background: rgba(36, 0, 70, 0.8) !important;
    }
    body.seo.v3 .pagination-carousel__prev:disabled,
    body.seo.v3 .pagination-carousel__prev.is-disabled,
    body.seo.v3 .pagination-carousel__prev.swiper-button-disabled,
    body.seo.v3 .pagination-carousel__next:disabled,
    body.seo.v3 .pagination-carousel__next.is-disabled,
    body.seo.v3 .pagination-carousel__next.swiper-button-disabled {
      background: rgba(255, 255, 255, 0.4) !important;
    }
    /* Mobile (≤ 991px = breakpoint du swiper mobile) : pas de :hover.
       On GARDE l'état par défaut de la card (contenu aligné à gauche, titre
       foncé, panneau au repos) et on se contente d'AFFICHER le bouton
       « Découvrir » (sinon il resterait replié faute de survol). */
    @media (max-width: 991px) {
      /* Taille générale de la card +15% en mobile (275→316, 433→498). La card
         SEO ne porte pas la classe --mobile : on fixe donc ses dimensions ici,
         et on colle la largeur du slide à celle de la card (pas d'espace mort). */
      body.seo.v3 .guide-top-push-card-wrap {
        width: min(316px, 92vw) !important;
        height: 498px !important;
      }
      body.seo.v3 .guide-top-moment-swiper--mobile .swiper-slide {
        width: min(316px, 92vw) !important;
      }
    }
    /* Pages SEO : header fixe (frère de #main) — compenser la hauteur du header.
       Avant : padding-top:0 car le header était sticky (dans le flux) et le padding
       comparateur doublait l’espace. Avec le header fixe + hide/compact au scroll,
       le padding est nécessaire. */
    @media (max-width: 767px) {
      body.seo.v3 {
        --comparateur-map-overlay-top: calc(155px + 25px);
      }
      body.seo.v3 #main {
        padding-top: var(--comparateur-map-overlay-top) !important;
      }
      body.seo.v3 > .header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 200;
        transition: transform 0.28s ease-in-out;
        will-change: transform;
      }
      body.seo.v3 > .header.header--scroll-hidden {
        transform: translateY(-100%) !important;
      }
      body.seo.v3 > .header.header--scroll-compact:not(.header--scroll-hidden) {
        transform: translateY(calc(-1 * var(--header-scroll-compact-offset, 85px))) !important;
      }
      body.seo.v3 > .header.header--scroll-compact:not(.header--scroll-hidden) .header__logo-wrap > a {
        pointer-events: none;
        visibility: hidden;
      }
    }
    @media (min-width: 768px) {
      body.seo.v3 #main { padding-top: var(--header-height-desktop, 75px) !important; }
      body.seo.v3 > .header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 200;
        height: var(--header-height-desktop, 75px);
        transition: transform 0.28s ease-in-out;
        will-change: transform;
      }
      body.seo.v3 > .header.header--scroll-hidden {
        transform: translateY(-100%) !important;
      }
      /* .section a un `padding: var(--space-50) 0` (50px haut/bas) global qui
         fait trop d'espace vertical entre sections en desktop SEO → 0. */
      body.seo.v3 .section { padding: 0 !important; }
    }
    /* Filters overlay (legacy filters.min.js, opened by the top
       search-header filter button via loadFiltres). On ville/camping
       (v/c) context pages, filters.min.js adds .hide-filter-label to
       every filter whose aggregation count is 0 — and the SEO filter
       aggregation (render_filtres → get_aggregation) returns 0 for all
       buckets, so EVERY filter gets hidden (empty modal). Region/zone
       pages don't hide, so they already show the full list. Force the
       filters to stay visible on SEO so all page types match the
       intended layout (no count badges, like the region pages).
       Scoped to body.seo.v3 so the comparateur (app-search) is
       untouched. */
    body.seo.v3 .filters-body .filter .filter-inputs label.hide-filter-label {
      display: table !important;
    }
    /* Filters whose aggregation count is 0 are kept visible but marked
       inactive (filters.min.js adds .filter-count-zero + sets the input
       disabled when myApp.disableZeroCountFilters is on). Grey them out
       and block interaction. */
    body.seo.v3 .filters-body .filter .filter-inputs label.filter-count-zero {
      opacity: 0.4 !important;
      pointer-events: none !important;
      cursor: not-allowed !important;
    }
    /* Filter overlay close button (#filters-close): the legacy CSS makes
       it the orange circle (position: absolute; right:30px; top:10px;
       border-radius:50%; bg #EB7039; 30px). Its <i class="icon-close">
       is an icomoon glyph not loaded on V3 SEO pages → stray "x".
       Keep the button's legacy absolute position untouched; just
       flex-centre its content, hide the icomoon glyph and draw a clean
       white ✕ at 12px. (Do NOT set position:relative here — that breaks
       the absolute placement and the circle flies into the body.) */
    /* #filters-close is already position:absolute (legacy), so it is the
       containing block. Position the .icon-close itself absolutely with
       a small top inset (the button's `height: 60%` doesn't resolve to a
       usable height for vertical flex/% centering, but a fixed top: 0.5rem
       lands the glyph correctly). Centre horizontally with left/translateX. */
    body.seo.v3 #filters-close .icon-close {
      position: absolute !important;
      top: 0.5rem !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      font-size: 0 !important; /* hide the (unloaded) icomoon glyph */
      margin: 0 !important;
    }
    body.seo.v3 #filters-close .icon-close::before {
      content: "\2715" !important; /* ✕ */
      font-family: Arial, Helvetica, sans-serif !important;
      font-size: 12px !important;
      line-height: 1 !important;
      font-weight: 700 !important;
      color: #fff !important;
    }
    /* Hub sémantique (page-hub) — layout compact sans espaces blancs */
    body.page-hub main.v3-shell {
      width: 100% !important;
      max-width: none !important;
      padding: 0 !important;
    }
    body.page-hub main.v3-shell > .container {
      width: 100%;
      max-width: none;
      padding: 0 !important;
    }
    body.page-hub .hub-main {
      width: 900px;
      max-width: 100%;
      margin: 0 auto;
      padding: 15px 10px 30px !important;
      box-sizing: border-box;
    }
    body.page-hub .hub-main__title {
      margin: 0 0 15px !important;
      padding: 0 !important;
    }
    body.page-hub .hub-bloc {
      margin: 0 0 15px !important;
      padding: 15px !important;
      border: none !important;
      border-radius: var(--radius-card, 20px);
      background: var(--surface-grayscale-grayscale-100, #f8f9fa);
    }
    body.page-hub .hub-bloc:last-child {
      margin-bottom: 0 !important;
    }
    body.page-hub .hub-block-text,
    body.page-hub .comparateur-block__text {
      margin: 0 0 15px !important;
    }
    body.page-hub .hub-thematic-grid {
      margin-top: 0 !important;
    }
    body.page-hub .hub-block-title--mobile,
    body.page-hub .hub-thematic-swiper,
    body.page-hub .hub-saviez-swiper,
    body.page-hub .hub-swiper-pagination {
      display: none;
    }
    body.page-hub .hub-read-more {
      display: none;
    }
    body.page-hub .hub-fact,
    body.page-hub .comparateur-fact {
      margin-top: 15px !important;
      margin-bottom: 0 !important;
    }
    /* Swiper CSS non chargé sur page-hub : forcer le layout horizontal */
    body.page-hub .hub-thematic-swiper .swiper-wrapper,
    body.page-hub .hub-saviez-swiper .swiper-wrapper {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      box-sizing: border-box;
    }
    body.page-hub .hub-thematic-swiper .swiper-slide,
    body.page-hub .hub-saviez-swiper .swiper-slide {
      flex-shrink: 0;
      height: auto;
    }
    body.page-hub a.hub-thematic-card--linked {
      display: block;
      text-decoration: none;
      color: inherit;
    }
    body.page-hub .hub-fact__link {
      color: inherit;
      text-decoration: none !important;
    }
    body.page-hub .hub-fact__link:hover,
    body.page-hub .hub-fact__link:focus-visible {
      color: inherit;
      text-decoration: none !important;
    }
    /* « Le saviez-vous ? » : on garde le bloc foncé V3 (fond secondary, texte
       blanc) mais on réintroduit le gros « ? » orange + barre séparatrice de la
       V2, à gauche du texte. Le bloc passe en alignement gauche pour l'accueillir. */
    body.page-hub .comparateur-fact.hub-fact--single {
      text-align: left;
    }
    body.page-hub .comparateur-fact.hub-fact--single .hub-fact__title {
      text-align: left;
    }
    body.page-hub .comparateur-fact.hub-fact--single .hub-fact__body {
      display: flex;
      align-items: stretch;
      gap: 18px;
      text-align: left;
    }
    body.page-hub .comparateur-fact.hub-fact--single .hub-fact__body::before {
      content: "?";
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      padding-right: 18px;
      border-right: 2px solid var(--color-primary, #ff6d00);
      font-family: var(--font-family-primary);
      font-size: 56px;
      font-weight: var(--font-weight-black, 900);
      line-height: 1;
      color: var(--color-primary, #ff6d00);
    }
    body.page-hub .comparateur-fact.hub-fact--single .hub-fact__link {
      align-self: center;
    }
    /* Page auteur du Mag : le H1 hérite du blanc du hero article
       (body.page-mag main h1.mag-article-header__title) sur fond clair.
       Miroir de pages/mag.v3.css (cache CDN). */
    body.page-mag main h1.mag-auteur-header__title {
      color: var(--color-secondary, #240046);
      -webkit-text-fill-color: var(--color-secondary, #240046);
    }
    /* Mag camping (page-mag) — même shell compact que page-hub */
    body.page-mag main.v3-shell {
      width: 100% !important;
      max-width: none !important;
      padding: 0 !important;
    }
    body.page-mag main.v3-shell > .container {
      width: 100%;
      max-width: none;
      padding: 0 !important;
    }
    body.page-mag .mag-main {
      width: 900px;
      max-width: 100%;
      margin: 0 auto;
      padding: 15px 10px 30px !important;
      box-sizing: border-box;
    }
    body.page-hub .hub-hero-wrap {
      position: relative;
      width: 100%;
      border-radius: var(--radius-image, 20px);
      overflow: hidden;
      margin: 0 0 15px !important;
    }
    body.page-hub .hub-hero-wrap::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 60%;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
    }
    /* Titres posés SUR la photo des blocs : blanc + ombre violette — le
       violet foncé hérité (--text-secondary-secondary-100) était illisible
       sur les images. !important : des règles h2 génériques (guide.v3) et
       des variantes mobile/desktop plus bas se disputent la couleur. */
    body.page-hub .hub-hero-wrap__title,
    body.page-hub .hub-hero-wrap .hub-block-title--mobile {
      color: #fff !important;
      text-shadow: 0 1px 6px rgba(36, 0, 70, 0.6) !important;
    }
    /* h3 « Le saviez-vous ? » : le bloc est violet foncé (texte courant déjà
       blanc), mais le titre héritait du même violet — invisible. Le blanc
       n'était posé que dans le bloc mobile. */
    body.page-hub .hub-fact .hub-fact__title,
    body.page-hub .comparateur-fact .hub-fact__title {
      color: #fff !important;
    }
    body.page-hub .hub-hero-wrap__title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
      margin: 0;
      padding: 2rem;
      color: #fff;
      text-align: left;
      font-family: var(--font-family-primary, Outfit, sans-serif);
      font-size: var(--font-size-28, 28px);
      font-weight: var(--font-weight-bold, 700);
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }
    body.page-hub .hub-hero-wrap .hub-hero-image {
      display: block;
      width: 100%;
      height: 250px !important;
      min-height: 0;
      max-height: 250px;
      aspect-ratio: auto;
      object-fit: cover;
      margin-bottom: 0;
      border-radius: var(--radius-image, 20px);
    }
    @media (min-width: 768px) {
      /* Tablette + desktop : même UX que desktop (pas le mobile) */
      body.page-hub .hub-hero-wrap .hub-hero-image {
        height: 250px !important;
        max-height: 250px !important;
        aspect-ratio: auto !important;
      }
      body.page-hub .hub-hero-wrap::before {
        display: block !important;
      }
      body.page-hub .hub-hero-wrap__title--desktop {
        display: block !important;
      }
      body.page-hub .hub-block-title--mobile,
      body.page-hub .hub-read-more {
        display: none !important;
      }
      body.page-hub .hub-block-text--clamped {
        max-height: none !important;
        overflow: visible !important;
      }
      body.page-hub .hub-thematic-grid {
        display: grid !important;
        justify-items: stretch;
      }
      body.page-hub .hub-thematic-swiper {
        display: none !important;
      }
      body.page-hub .hub-thematic-card__image-wrap {
        height: 190px !important;
        background: none !important;
      }
      body.page-hub .hub-thematic-card__image-wrap img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
      }
      body.page-hub .hub-thematic-card__overlay {
        display: block !important;
        background: var(
          --gradient-photo-overlay,
          linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 66.67%,
            rgba(36, 0, 70, 0.55) 83%,
            rgba(36, 0, 70, 1) 100%
          )
        ) !important;
      }
      body.page-hub .hub-saviez-swiper {
        display: block !important;
      }
      body.page-hub .hub-main {
        padding-top: 40px !important;
      }
      body.page-hub .hub-main__title {
        margin: 0 0 40px !important;
      }
      body.page-hub .hub-block-text-wrap + .hub-thematic-grid {
        margin-top: 20px !important;
      }
    }
    /* Tablette : desktop visuel, grille 2 colonnes pour tenir dans la largeur */
    @media (min-width: 768px) and (max-width: 991px) {
      body.page-hub .hub-main {
        width: 100% !important;
        max-width: 900px;
        padding: 40px 20px 30px !important;
      }
      body.page-hub .hub-thematic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px !important;
      }
      body.page-hub .hub-thematic-card {
        width: 100% !important;
        max-width: none !important;
      }
      body.page-hub .hub-thematic-card__image-wrap {
        width: 100% !important;
      }
    }
    /* Desktop large : grille 3 colonnes Figma */
    @media (min-width: 992px) {
      body.page-hub .hub-thematic-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        justify-items: center;
      }
      body.page-hub .hub-thematic-card {
        width: 280px !important;
        max-width: 100%;
      }
      body.page-hub .hub-thematic-card__image-wrap {
        width: 280px !important;
      }
    }
    @media (max-width: 767px) {
      body.page-hub.page-guide main.v3-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      body.page-hub .hub-main {
        width: 100% !important;
        padding: 0 20px 30px !important;
        box-sizing: border-box;
      }
      body.page-hub .hub-main__title {
        font-size: 32px !important;
        line-height: 36px !important;
        margin: 15px 0 25px !important;
        padding: 0 !important;
      }
      body.page-hub .hub-bloc {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin-bottom: 25px !important;
        padding: 15px !important;
      }
      body.page-hub .hub-block-title--mobile {
        display: block !important;
        margin: 0 !important;
        text-align: center;
        font-family: var(--font-family-primary, Outfit, sans-serif);
        font-size: 28px;
        font-weight: 900;
        line-height: 30px;
        color: var(--color-secondary, #240046);
      }
      body.page-hub .hub-hero-wrap__title--desktop,
      body.page-hub .hub-block-title--desktop-only {
        display: none !important;
      }
      body.page-hub .hub-hero-wrap::before {
        display: none !important;
      }
      body.page-hub .hub-hero-wrap {
        margin: 0 !important;
      }
      body.page-hub .hub-hero-wrap .hub-hero-image {
        height: 250px !important;
        max-height: 250px !important;
        aspect-ratio: auto !important;
        border-radius: 20px !important;
      }
      body.page-hub .hub-block-text-wrap {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
      }
      body.page-hub .hub-block-text,
      body.page-hub .comparateur-block__text {
        margin: 0 !important;
        font-size: 18px;
        line-height: 27px;
        color: #000;
      }
      body.page-hub .hub-block-text--clamped {
        max-height: 135px;
        overflow: hidden;
      }
      body.page-hub .hub-block-text-wrap.is-expanded .hub-block-text--clamped {
        max-height: none;
      }
      body.page-hub .hub-read-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 25px;
        padding: 5px 10px;
        border: 0;
        border-radius: 100px;
        background: #e9ecef;
        color: #240046;
        font-family: var(--font-family-secondary, Nunito, sans-serif);
        font-size: 14px;
        line-height: 21px;
        cursor: pointer;
      }
      body.page-hub .hub-read-more[hidden] {
        display: none !important;
      }
      body.page-hub .hub-thematic-grid {
        display: none !important;
      }
      body.page-hub .hub-thematic-swiper-wrap {
        width: calc(100% + 30px) !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding: 0 15px !important;
        box-sizing: border-box;
      }
      body.page-hub .hub-thematic-swiper {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        /* pan-y : Swiper gère l'horizontal, le navigateur garde le scroll de page */
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
      }
      /* Avant init Swiper : espacement visible sans flash */
      body.page-hub .hub-thematic-swiper.swiper-container-initialized .swiper-wrapper {
        gap: 0 !important;
      }
      body.page-hub .hub-thematic-swiper:not(.swiper-container-initialized) .swiper-wrapper {
        gap: 15px;
      }
      body.page-hub .hub-thematic-swiper__slide {
        width: 154px !important;
      }
      body.page-hub .hub-thematic-card {
        width: 154px !important;
      }
      body.page-hub .hub-thematic-card__image-wrap {
        width: 154px !important;
        height: 190px !important;
      }
      body.page-hub .hub-thematic-card__image-wrap img,
      body.page-hub .hub-thematic-card__overlay {
        display: block !important;
      }
      body.page-hub .hub-thematic-card__label {
        font-size: 18px;
        font-weight: 900;
        left: 10px;
        bottom: 10px;
        right: 10px;
      }
      body.page-hub .hub-swiper-pagination {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-top: 10px;
        padding: 0 15px;
      }
      body.page-hub .hub-swiper-pagination .pagination-carousel__bullet {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(36, 0, 70, 0.2);
        cursor: pointer;
        opacity: 1;
        transition: background 0.2s, transform 0.2s;
        box-sizing: border-box;
      }
      body.page-hub .hub-swiper-pagination .pagination-carousel__bullet--active {
        width: 10px;
        height: 10px;
        background: #240046;
      }
      body.page-hub .hub-fact,
      body.page-hub .comparateur-fact {
        margin-top: 0 !important;
        padding: 15px !important;
        background: #240046 !important;
        color: #f8f9fa !important;
        border-radius: 20px;
      }
      body.page-hub .hub-fact__title {
        color: #fff !important;
        font-size: 28px;
        line-height: 30px;
        margin-bottom: 15px !important;
      }
      body.page-hub .hub-fact__body {
        color: #f8f9fa !important;
        font-size: 18px;
        line-height: 27px;
      }
      body.page-hub .hub-fact__link {
        color: #f8f9fa !important;
      }
      body.page-hub .hub-saviez-swiper {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden;
      }
      body.page-hub .hub-saviez-swiper__slide {
        width: 100% !important;
        box-sizing: border-box;
      }
    }
  /* Fiche camping — titres degrades : eviter la coupure des descendantes (p, g, y) */
  body.page-camping-detail .camping-detail-hero__title {
    line-height: 1.35 !important;
    padding-bottom: 0.15em !important;
    overflow: visible !important;
    display: inline-block !important;
  }
  body.page-camping-detail .camping-detail-hero__gallery .guide-camping-gallery__arrow--prev:not(:disabled):not(.is-disabled):not(.swiper-button-disabled),
  body.page-camping-detail .camping-detail-hero__gallery .guide-camping-gallery__arrow--next:not(:disabled):not(.is-disabled):not(.swiper-button-disabled) {
    background: rgba(36, 0, 70, 0.8) !important;
    opacity: 1 !important;
  }
  body.page-camping-detail .camping-detail-hero__gallery .guide-camping-gallery__arrow:disabled,
  body.page-camping-detail .camping-detail-hero__gallery .guide-camping-gallery__arrow.is-disabled,
  body.page-camping-detail .camping-detail-hero__gallery .guide-camping-gallery__arrow.swiper-button-disabled {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  /* Dupliqué depuis guide.v3.css (cache CDN). */
  /* Images enveloppées dans <picture> (partial img-deferred, galerie héro :
     source WebP + repli JPEG). <picture> est en ligne et sans hauteur : les
     <img> en height:100% ne remplissaient plus leur cadre (bande noire sous le
     poster vidéo du héro). Le <picture> prend tout le cadre. */
  .camping-detail-hero__slide-inner picture,
  .guide-camping-gallery__slide-inner picture,
  .camping-detail-water-park__photo picture,
  .camping-detail-proches-card__media picture,
  .camping-accommodation-card__media-slide picture,
  .guide-top-push-card__img-link picture,
  .guide-top-push-card picture,
  .medias picture,
  .media picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  /* Cartes MapLibre chargées à la demande (lazy-map.js) : cadre cliquable
     rendu côté serveur, même gabarit que la carte pour un CLS nul.
     Dupliqué depuis guide.v3.css (cache CDN). */
  .lazy-map { position: relative; }
  .lazy-map__placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    cursor: pointer;
    font: inherit;
    color: var(--color-text, #240046);
    background-color: #eef1ee;
    background-image:
      linear-gradient(rgba(36, 0, 70, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(36, 0, 70, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .lazy-map__pin { width: 44px; height: 44px; display: block; }
  .lazy-map__label {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(36, 0, 70, 0.15);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  .lazy-map__placeholder:hover .lazy-map__label,
  .lazy-map__placeholder:focus-visible .lazy-map__label {
    border-color: var(--color-primary, #ff6d00);
  }
  .lazy-map__placeholder:disabled { cursor: progress; }
  .lazy-map--ready > .lazy-map__placeholder { display: none; }
  /* Fiche camping — le shell SEO ne doit pas contraindre la largeur du main */
  body.page-camping-detail main.v3-shell {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }
  body.page-camping-detail main.v3-shell > .container {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  @media (max-width: 767px) {
    body.page-camping-detail main.v3-shell,
    body.page-camping-detail main.v3-shell > .container {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }