/**
 * 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 picture {
  display: contents;
}

.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,
  .card-superdeal--moment[role="link"]:hover .card-superdeal__cta,
  a.card-superdeal:hover .card-superdeal__cta,
  .card-superdeal[role="link"]:hover .card-superdeal__cta,
  .superdeal-bloc-section--second a.card-superdeal--superlight:hover .card-superdeal__superlight-cta,
  .superdeal-bloc-section--second .card-superdeal--superlight[role="link"]: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,
.card-superdeal--moment[role="link"]:hover .card-superdeal__cta,
a.card-superdeal--moment:focus-visible .card-superdeal__cta,
.card-superdeal--moment[role="link"]:focus-visible .card-superdeal__cta,
a.card-superdeal:hover .card-superdeal__cta,
.card-superdeal[role="link"]:hover .card-superdeal__cta,
a.card-superdeal:focus-visible .card-superdeal__cta,
.card-superdeal[role="link"]:focus-visible .card-superdeal__cta,
.superdeal-bloc-section--second a.card-superdeal--superlight:hover .card-superdeal__superlight-cta,
.superdeal-bloc-section--second .card-superdeal--superlight[role="link"]:hover .card-superdeal__superlight-cta,
.superdeal-bloc-section--second a.card-superdeal--superlight:focus-visible .card-superdeal__superlight-cta,
.superdeal-bloc-section--second .card-superdeal--superlight[role="link"]: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;
}

/* Cartes superdeal et top campings rendues sans lien (formulaire + gotToUrl) */
.card-superdeal[role="link"],
.card-superdeal__cta[role="link"],
.card-superdeal__superlight-cta[role="link"],
.guide-top-push-card-link[role="link"] {
  cursor: pointer;
}


/* /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 {
  position: relative;
  pointer-events: auto;
  filter: drop-shadow(0 0 12px rgba(173, 181, 189, 0.65));
}

/* Croix de fermeture : l'accroche Piaf doit pouvoir etre ecartee. Posee sur le
   bord haut-droit de la pastille, hors du bouton d'ouverture pour que le clic
   ne declenche pas le chatbot. */
.page-home .home-piaf-sticky__close {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: 50%;
  background: #fff;
  color: var(--color-secondary, #240046);
  cursor: pointer;
  box-sizing: border-box;
}

.page-home .home-piaf-sticky__close:hover,
.page-home .home-piaf-sticky__close:focus-visible {
  border-color: var(--color-secondary, #240046);
  background: var(--color-secondary, #240046);
  color: #fff;
  outline: none;
}

.page-home .home-piaf-sticky.is-dismissed {
  display: none;
}

.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 n'est posee qu'en mobile par chat-widget.js ; .is-chat-open
   est posee par home-v3-ui.js des que #chat-popup s'ouvre, mobile comme desktop. */
body.chatbot-opened .page-home .home-piaf-sticky,
.page-home .home-piaf-sticky.is-chat-open {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.page-home #chat-bubble {
  display: none !important;
}

/* Recette home : halo violet derrière le sous-titre du bandeau principal.
   Le sous-titre était en blanc sur une photo claire par endroits (ciel, eau),
   donc peu lisible. Un voile violet flouté le détache sans poser de bloc
   opaque sur l'image.

   `inline-block` pour que le halo épouse la largeur du texte et non celle de
   la colonne ; le centrage reste assuré par le `text-align: center` de
   `.hero__headline`. Le voile est un pseudo-élément en `z-index: -1`, donc
   sous le texte et sans effet sur le flux.

   Opacité à 0,45 : à 0,30 le violet ne se voyait quasiment pas sur la photo.
   C'est le seul réglage à bouger si le rendu doit être éclairci ou renforcé. */
.page-home .hero .hero__subtitle {
  position: relative;
  display: inline-block;
  padding: 8px 24px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.page-home .hero .hero__subtitle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112%;
  height: 145%;
  transform: translate(-50%, -50%);
  background: rgba(48, 13, 83, 0.45);
  filter: blur(20px);
  border-radius: 999px;
  z-index: -1;
}


/* /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;
  /* Quand la pastille est un <button> (vidéo lisible au clic) : aucun style
     de bouton natif. Déclarations dans CETTE règle, déjà dans le CSS
     critique des pages SEO : pas de bouton gris pendant le chargement. */
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Cartes camping : lecture de la vidéo au clic sur le poster
   (v3-listing-gallery.js crée le <video> seulement à ce moment-là). */
.guide-camping-gallery__play[data-video-src] {
  pointer-events: auto;
  cursor: pointer;
}

/* Le bouton couvre tout le poster : la règle générale des boutons
   (button:hover / [type=button]:focus → fond orange plein, CSS legacy)
   le masquait au survol. */
.guide-camping-gallery__play[data-video-src]:hover,
.guide-camping-gallery__play[data-video-src]:focus,
.guide-camping-gallery__play[data-video-src]:active {
  border: 0;
  background: none;
}

.guide-camping-gallery__play[data-video-src]:focus-visible svg {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 50%;
}

.guide-camping-gallery__slide-inner.is-playing .guide-camping-gallery__play {
  display: none;
}

.guide-camping-gallery__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* 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 {
  /* 20 + gap 10 = 30px sous l'accroche (50 laissait un saut de ligne en trop). */
  margin-top: var(--space-20);
  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;
}

/* Numéro révélé : le lien tel: garde l'habillage du bouton. */
.camping-detail-reserver__actions .btn.phone.done a {
  color: inherit;
  text-decoration: none;
}

.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);
}

/* Mise en relation : formulaires vides (identifiant seul) soumis par gotToUrl, et
   <span role="link"> à la place des liens pour ne pas écrire l'URL de mise en relation dans la page. */
.comparateur-mer-form {
  display: none;
}

.comparateur-offer__media-link[role="link"],
.comparateur-offer__title-link--mer,
.comparateur-offer__location-link[role="link"],
.comparateur-hebergement-card__location-link[role="link"],
.comparateur-offer__no-offer-cta[role="link"] {
  cursor: pointer;
}

.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,
.comparateur-offer__strip[role="link"] {
  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,
.comparateur-hebergement-card__camping-name--mer {
  cursor: pointer;
}

a.comparateur-hebergement-card__camping-name:hover,
.comparateur-hebergement-card__camping-name--mer: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,
.comparateur-hebergement-card__price-booking[role="link"] {
  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);
}

/* Promo des cartes Meilleur prix / Top promo : même pastille et même prix
   barré que les cartes hébergement. */
.camping-detail-card__offer-discount {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-5);
  padding: 0 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);
  /* marges négatives : la pastille ne doit pas grandir la ligne « 7 nuits »,
     qui reste alignée sur celle de la carte voisine */
  margin-top: -3px;
  margin-bottom: -3px;
}

.camping-detail-card__offer-nuits {
  display: inline-flex;
  align-items: center;
}

/* Pastille promo : à droite du prix barré sur desktop, à droite de
   « 7 nuits » sur mobile (les deux sont rendues, une seule est visible). */
.camping-detail-card__offer-discount--nuits {
  display: none;
}

@media (max-width: 767px) {
  .camping-detail-card__offer-discount--prix {
    display: none;
  }

  .camping-detail-card__offer-discount--nuits {
    display: inline-flex;
  }
}

.camping-detail-card__offer-strike {
  margin-left: var(--space-5);
  font-size: var(--font-size-14);
  line-height: 1;
  font-weight: var(--font-weight-regular);
  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);
}

/* #337 : toute la carte est cliquable, sans bouton — le lien enveloppe le
   visuel et le texte, et ne doit donc pas se comporter comme un lien inline. */
.camping-detail-nouveautes-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.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%;
  box-sizing: border-box;
  /* Recette 2026-10-02 : un peu d'air autour du titre et du texte, sous le
     visuel bord à bord de la carte. */
  padding: var(--space-5, 4px) var(--space-10) var(--space-10);
}

.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.
   Egalement servie sur l'annuaire (.page-search-by-name), ou les onglets
   « Campings »/« Hebergements » sont des liens vers le comparateur et « Carte »
   defile jusqu'a la carte de la page : meme barre, memes mesures. */
.comparateur-sticky-bar {
  display: none;
}

@media (max-width: 767px), (min-width: 992px) {
  :is(.page-comparateur, .page-search-by-name) .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;
  }

  :is(.page-comparateur, .page-search-by-name) .comparateur-sticky-bar__inner {
    display: flex;
    align-items: center;
    height: 49px;
    pointer-events: auto;
    filter: drop-shadow(0 0 7.5px #adb5bd);
  }

  :is(.page-comparateur, .page-search-by-name) .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;
  }

  :is(.page-comparateur, .page-search-by-name) .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;
  }

  :is(.page-comparateur, .page-search-by-name) .comparateur-sticky-bar__tab.is-active {
    background: var(--color-surface);
    color: var(--color-primary);
  }

  :is(.page-comparateur, .page-search-by-name) .comparateur-sticky-bar__tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  :is(.page-comparateur, .page-search-by-name) .comparateur-sticky-bar__tab-icon svg {
    display: block;
    width: 15px;
    height: 15px;
  }

  :is(.page-comparateur, .page-search-by-name) .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 */
  :is(.page-comparateur, .page-search-by-name) .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;
  }

  :is(.page-comparateur, .page-search-by-name) .comparateur-sticky-bar__tabs .comparateur-sticky-bar__question:hover,
  :is(.page-comparateur, .page-search-by-name) .comparateur-sticky-bar__tabs .comparateur-sticky-bar__question:focus-visible {
    background: var(--color-primary-gradient-end, #ff9e00);
    color: var(--color-text-inverse);
  }

  :is(.page-comparateur, .page-search-by-name) .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;
  }

  :is(.page-comparateur, .page-search-by-name) .comparateur-sticky-bar__action-ia {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
  }

  :is(.page-comparateur, .page-search-by-name) .comparateur-sticky-bar__action-ia img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  :is(.page-comparateur, .page-search-by-name) .comparateur-sticky-bar__tabs .comparateur-sticky-bar__action:hover,
  :is(.page-comparateur, .page-search-by-name) .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) {
  :is(.page-comparateur, .page-search-by-name) .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 */
  :is(.page-comparateur, .page-search-by-name) .comparateur-sticky-bar__tabs .comparateur-sticky-bar__question {
    display: none;
  }

  :is(.page-comparateur, .page-search-by-name) .comparateur-sticky-bar__tab {
    padding: 4px 6px;
  }

  :is(.page-comparateur, .page-search-by-name) .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) {
  :is(.page-comparateur, .page-search-by-name) .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: 5 / 4;
  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: 26px;
  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;
}

/* Hébergement sans offre : pas d'onglets, le détail s'affiche directement
   sous les pictos, dans un bloc de hauteur fixe qui défile. */
.camping-accommodation-card__pane--details-direct {
  position: static;
  display: flex;
  height: 200px;
  padding-right: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.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%;
}

/* Bloc prix : structure de la bande hébergement des listes
   (guide-hosting-strip en mobile) — le bloc gris empile deux lignes
   (dates | promo, puis nuits / prix par nuit | prix) et le bouton
   « Voir l'offre » pleine largeur le termine, bord à bord. */
.camping-accommodation-card__price-block {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background: var(--color-surface-muted);
  border-radius: var(--radius-card);
}

.camping-accommodation-card__price-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  min-width: 0;
  padding: var(--space-15);
}

.camping-accommodation-card__price-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  min-width: 0;
}

.camping-accommodation-card__price-row--prix {
  align-items: flex-end;
}

/* Tags (personnes, m², chambres) en tête du bloc gris, comme sur la bande
   des listes : pastilles blanches pour se détacher du fond. */
.camping-accommodation-card__tags-row--prix {
  justify-content: flex-start;
}

.camping-accommodation-card__price-inner .camping-accommodation-card__tags {
  gap: 4px;
}

/* Pastilles resserrées (12px, marges 6px, jamais rétrécies) : les trois
   tiennent sur une ligne dès 360px d'écran (253px utiles) ; en dessous,
   la troisième passe à la ligne plutôt que d'être rognée. */
.camping-accommodation-card__price-inner .camping-accommodation-card__tag {
  flex-shrink: 0;
  padding: 0 6px;
  font-size: var(--font-size-12, 12px);
  white-space: nowrap;
  background: var(--color-surface);
  border-color: var(--color-border);
}

.camping-accommodation-card--details-active .camping-accommodation-card__tags-row--prix {
  display: none;
}

/* Dates et prix : mêmes tailles que la bande des listes de résultats. */
.camping-accommodation-card__dates {
  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);
  text-align: left;
  color: #343a40;
}

.camping-accommodation-card__price-line {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 2px;
}

.camping-accommodation-card__amount {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-27);
  color: var(--color-secondary);
  white-space: nowrap;
}

.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;
  flex-shrink: 0;
  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: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  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-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-items: center;
  justify-content: center;
  gap: var(--space-10);
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: var(--space-10) var(--space-15);
  background: var(--color-primary);
  color: var(--color-text-inverse, #fff);
  text-decoration: none;
  border-radius: 0;
  transition: background-color var(--transition-primary-cta, 1s ease);
}

.camping-accommodation-card__cta-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-inverse, #fff);
}

.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: right;
  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) var(--space-15);
}

/* Les deux lignes du bloc s'effacent : dates, promo et prix se suivent. */
.camping-accommodation-card--details-active .camping-accommodation-card__price-row {
  display: contents;
}

.camping-accommodation-card--details-active .camping-accommodation-card__cta {
  min-height: 36px;
  padding: var(--space-5) var(--space-15);
}

.camping-accommodation-card--details-active .camping-accommodation-card__cta-text {
  font-size: var(--font-size-14);
  line-height: var(--line-height-21);
}

.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);
  }
}

/* ===== Page description (bloc éditorial seo_by_uri en bas de liste) =====
   Le bloc était rendu sans aucune règle v3 : titres et paragraphes
   tombaient sur les styles par défaut du navigateur (Times, tailles
   user-agent). On reprend ici la typographie des pages SEO
   (toocamp.v3.seo.layout.css, section « .seo-body .contenu ») pour que
   les deux gabarits soient identiques. */
.page-description {
  background-color: var(--color-surface, #ffffff);
  width: 100%;
  padding: var(--space-30) 0 var(--space-50);
}

.page-description h2 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  line-height: 1.2;
  margin: var(--space-30) 0 var(--space-15);
  padding: 0;
  text-align: left;
}

.page-description h2:first-child {
  margin-top: 0;
}

.page-description h3 {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  line-height: var(--line-height-27);
  margin: var(--space-20) 0 var(--space-10);
}

.page-description p,
.page-description li {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-18);
  line-height: var(--line-height-27);
  color: var(--color-text-body);
}

.page-description p {
  margin: 0 0 var(--space-15);
}

.page-description ul,
.page-description ol {
  margin: 0 0 var(--space-15);
  padding-left: var(--space-20);
}

.page-description a {
  color: var(--color-secondary-light);
  font-weight: normal;
  text-decoration: none;
  text-underline-offset: 3px;
}

.page-description a:visited {
  text-decoration: underline;
  text-decoration-color: currentColor;
}


/* /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;
}

/* Vidéo lancée : scroll.js ajoute .hide au bouton play ET à l'affiche (img.video-play),
   qui couvre toute la vignette. Sans cette règle l'affiche reste devant la vidéo
   (on entend le son, l'image ne bouge pas). Même règle que seo/inline.css (body.main). */
.page-mag .mag-contents__block.contenu .galerie .swiper-slide.video .video-play.hide,
.page-mag .mag-contents__block.contenu .swiper-container-gallerie .swiper-slide.video .video-play.hide {
  display: none !important;
}

/* 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;
}

/* Base Swiper des galeries de cartes : sur les pages SEO elle vient des
   feuilles legacy (seo-legacy, page.search-results), que le mag ne charge
   pas → les photos 2..n s'empilaient sous la 1re et le défilement montrait
   une case vide. Le chargement différé (v3-listing-gallery.js, slide
   active + suivante) est inchangé. */
.page-mag .guide-camping-gallery__swiper {
  position: relative;
  overflow: hidden;
}

.page-mag .guide-camping-gallery__swiper .swiper-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: content-box;
  transition-property: transform;
}

.page-mag .guide-camping-gallery__swiper .swiper-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  transition-property: transform;
}

.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;
    }
    /* Fiche camping : la section porte déjà l'espacement entre blocs ; la
       marge haute des pages SEO y ajoutait un saut de ligne en trop. */
    body.seo.v3 .camping-detail-infos-moment-section section.mags-linkings {
      margin-top: 0 !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;
    }
    /* Mag : pas de voile blanc à droite du carrousel desktop (il masquait
       le bord de la 3e carte). Le carrousel mobile n'est pas concerné. */
    body.seo.v3.page-mag .guide-top-moment-swiper-wrap--desktop .guide-top-moment-swiper::after {
      content: none;
    }
    /* 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;
      }
      /* Netlinking du hub en mobile : grille de 2 colonnes, comme les pages SEO.
         Le carrousel ne montrait qu'une carte à la fois et, quand il n'était
         pas initialisé, les cartes suivantes restaient inaccessibles. */
      body.page-hub .hub-thematic-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        justify-items: stretch;
        margin-top: 15px !important;
      }
      body.page-hub .hub-thematic-swiper-wrap,
      body.page-hub .hub-swiper-pagination {
        display: none !important;
      }
      body.page-hub .hub-thematic-grid .hub-thematic-card,
      body.page-hub .hub-thematic-grid .hub-thematic-card__image-wrap {
        width: 100% !important;
      }
    }
  /* 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;
    }
  }