/* anti-aliasing for smoother fonts */
body,
input,
textarea,
select {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "DM Sans", sans-serif;
  line-height: 1.2;
}
/* Système de design AROK - Variables et composants */
:root {
  /* === VARIABLES PERSONNALISÉES AROK === */

  /* Couleurs principales */
  --arok-primary: #ff8a3d;
  --arok-primary-hover: #d47333;
  --arok-primary-selected: #ffd8be;

  /* Couleurs fonctionnelles */
  --arok-positive: #258750;
  --arok-positive-hover: #007038;
  --arok-positive-selected: #bbdbc9;

  --arok-negative: #d83a52;
  --arok-negative-hover: #b63546;
  --arok-negative-selected: #f4c3cb;

  --arok-warning: #ffcb00;
  --arok-warning-hover: #eaaa15;
  --arok-warning-selected: #fceba1;

  /* Couleurs de fond */
  --arok-bg-primary: #f1f1f1;
  --arok-bg-secondary: #fafafa;
  --arok-bg-inverted: #1d1d1d;

  /* Couleurs de texte */
  --arok-text-primary: #1d1d1d;
  --arok-text-secondary: #505050;
  --arok-text-inverted: #ffffff;

  /* Couleurs d'icônes et liens */
  --arok-icon-color: #1d1d1d;
  --arok-link-color: #ff8a3d;
  --arok-link-hover: #d47333;

  /* Couleurs des backgrounds */
  --arok-bg-primary: #f1f1f1;
  --arok-bg-secondary: #fafafa;
  --arok-bg-inverted: #1d1d1d;

  /* Variables RGB pour les ombres */
  --arok-primary-rgb: 255, 138, 61;
  --arok-positive-rgb: 37, 135, 80;
  --arok-negative-rgb: 216, 58, 82;
  --arok-warning-rgb: 255, 203, 0;

  /* === TYPOGRAPHIE - FONT SIZES === */

  /* Body et textes de base */
  --arok-body-font-size: clamp(
    16px,
    calc(14px + 4 * ((100vw - 320px) / 480)),
    18px
  );
  --arok-small-font-size: clamp(
    14px,
    calc(12px + 2 * ((100vw - 320px) / 480)),
    16px
  );
  --arok-xsmall-font-size: clamp(
    12px,
    calc(12px + 2 * ((100vw - 320px) / 480)),
    14px
  );

  /* Titres DM Sans */
  --arok-h1-font-size: clamp(
    44px,
    calc(44px + 28 * ((100vw - 320px) / 480)),
    72px
  );
  --arok-h2-font-size: clamp(
    32px,
    calc(32px + 16 * ((100vw - 320px) / 480)),
    48px
  );
  --arok-h3-font-size: clamp(
    26px,
    calc(26px + 14 * ((100vw - 320px) / 480)),
    40px
  );
  --arok-h4-font-size: clamp(
    20px,
    calc(20px + 12 * ((100vw - 320px) / 480)),
    24px
  );
  --arok-h5-font-size: clamp(
    16px,
    calc(16px + 4 * ((100vw - 320px) / 480)),
    18px
  );
  --arok-h6-font-size: clamp(
    14px,
    calc(14px + 2 * ((100vw - 320px) / 480)),
    16px
  );

  /* Titres Arapey */
  --arok-h1-arapey-font-size: clamp(
    48px,
    calc(48px + (80 - 48) * ((100vw - 320px) / 480)),
    80px
  );
  --arok-h2-arapey-font-size: clamp(
    38px,
    calc(38px + (54 - 38) * ((100vw - 320px) / 480)),
    54px
  );
  --arok-h3-arapey-font-size: 32px;
  --arok-h4-arapey-font-size: clamp(
    22px,
    calc(22px + (28 - 22) * ((100vw - 320px) / 480)),
    28px
  );
  --arok-body-arapey-font-size: 18px;

  /* Navigation mobile */
  --arok-nav-mobile-font-size: 26px;
}
/* === SYSTÈME DE BOUTONS AROK (sans Bootstrap) === */

/* Base commune pour tous les boutons */
.btn,
input[type="submit"].search-submit,
.wp-block-button .wp-block-button__link {
  display: inline-block;
  padding: 10px 15px;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 2px solid transparent;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--arok-bg-inverted);
  color: var(--arok-text-inverted);
}
.btn:visited,
input[type="submit"].search-submit:visited,
.wp-block-button .wp-block-button__link:visited {
  color: var(--arok-text-inverted);
}
.btn:hover,
.btn:focus,
.btn:active,
input[type="submit"].search-submit:hover,
input[type="submit"].search-submit:focus,
input[type="submit"].search-submit:active,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:active {
  color: var(--arok-text-primary);
  background-color: var(--arok-link-color);
}

.btn:focus,
input[type="submit"].search-submit:focus,
.wp-block-button .wp-block-button__link:focus {
  outline: none;
}

.btn:disabled,
input[type="submit"].search-submit:disabled,
.wp-block-button .wp-block-button__link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
input[type="search"],
.error-404 select {
  padding: 11px 15px;
  outline: 1px solid;
  border: 0 solid var(--arok-text-secondary);
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--arok-bg-primary);
  color: var(--arok-text-primary);
}

/* S'assurer que toutes les options sont accessibles */
select option {
  display: block;
  visibility: visible;
}

/* Bouton principal */
.btn-primary,
.btn-primary:visited {
  color: var(--arok-text-primary);
  background-color: var(--arok-primary);
  border-color: var(--arok-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: var(--arok-text-primary);
  background-color: var(--arok-primary-hover);
  border-color: var(--arok-primary-hover);
  text-decoration: none;
}

.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(var(--arok-primary-rgb), 0.25);
}

/* Bouton succès */
.btn-success {
  color: var(--arok-text-inverted);
  background-color: var(--arok-positive);
  border-color: var(--arok-positive);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  color: var(--arok-text-inverted);
  background-color: var(--arok-positive-hover);
  border-color: var(--arok-positive-hover);
  text-decoration: none;
}

.btn-success:focus {
  box-shadow: 0 0 0 3px rgba(var(--arok-positive-rgb), 0.25);
}

/* Bouton danger */
.btn-danger {
  color: var(--arok-text-inverted);
  background-color: var(--arok-negative);
  border-color: var(--arok-negative);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  color: var(--arok-text-inverted);
  background-color: var(--arok-negative-hover);
  border-color: var(--arok-negative-hover);
  text-decoration: none;
}

.btn-danger:focus {
  box-shadow: 0 0 0 3px rgba(var(--arok-negative-rgb), 0.25);
}

/* Bouton warning */
.btn-warning {
  color: var(--arok-text-primary);
  background-color: var(--arok-warning);
  border-color: var(--arok-warning);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  color: var(--arok-text-primary);
  background-color: var(--arok-warning-hover);
  border-color: var(--arok-warning-hover);
  text-decoration: none;
}

.btn-warning:focus {
  box-shadow: 0 0 0 3px rgba(var(--arok-warning-rgb), 0.25);
}

/* Bouton secondaire (outline) */
.btn-secondary {
  color: var(--arok-text-primary);
  background-color: transparent;
  border-color: var(--arok-text-primary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  color: var(--arok-text-inverted);
  background-color: var(--arok-text-primary);
  border-color: var(--arok-text-primary);
  text-decoration: none;
}

.btn-secondary:focus {
  box-shadow: 0 0 0 3px rgba(29, 29, 29, 0.25);
}

/* Variantes de taille */
.btn-sm {
  padding: 8px 16px;
  font-size: var(--arok-small-font-size);
}

.btn-lg {
  padding: 16px 32px;
  font-size: var(--arok-h5-font-size);
}

/* Bouton pleine largeur */
.btn-block {
  display: block;
  width: 100%;
}

body {
  font-weight: 400;
  font-size: var(--arok-body-font-size);
  font-family: "DM Sans", sans-serif;
  color: var(--arok-text-primary);
  background-color: var(--arok-bg-secondary);
}
h1,
.h1 {
  font-weight: 400; /* regular */
  font-size: var(--arok-h1-font-size);
}

h1 em,
.h1 em {
  font-family: "Arapey", serif;
  font-style: italic;
  font-weight: 400;
}
h2,
.h2 {
  font-weight: 400; /* regular */
  font-size: var(--arok-h2-font-size);
}
h2 em,
.h2 em {
  font-family: "Arapey", serif;
  font-style: italic;
  font-weight: 400;
}

h3,
.h3 {
  font-weight: 400; /* regular */
  font-size: var(--arok-h3-font-size);
}

h4,
.h4 {
  font-weight: 400; /* regular */
  font-size: var(--arok-h4-font-size);
}

h5,
.h5 {
  font-weight: 400; /* regular */
  font-size: var(--arok-h5-font-size);
}

h6,
.h6 {
  font-weight: 400; /* regular */
  font-size: var(--arok-h6-font-size);
}

/* Petit texte */
small,
.small {
  font-weight: 400;
  font-size: var(--arok-small-font-size);
}
.h1-arapey {
  font-family: "Arapey", serif;
  font-style: italic;
  font-weight: 400; /* Italic dans Arapey */
  font-size: var(--arok-h1-arapey-font-size);
  line-height: 120%;
}

.h2-arapey {
  font-family: "Arapey", serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--arok-h2-arapey-font-size);
  line-height: 120%;
}

.h3-arapey {
  font-family: "Arapey", serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--arok-h3-arapey-font-size);
  line-height: 120%;
}

.h4-arapey {
  font-family: "Arapey", serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--arok-h4-arapey-font-size);
  line-height: 120%;
}

.body-arapey {
  font-family: "Arapey", serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--arok-body-arapey-font-size);
  line-height: 120%;
}
.site-main {
  overflow: hidden;
}

/* Override pour permettre le sticky - approche plus compatible */
@media (min-width: 769px) {
  .site-main {
    overflow: visible;
  }
}
.bg-gris-clair {
  background-color: var(--arok-bg-primary);
}

.site-header {
  padding: 15px 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* dégradé du noir vers transparent */
  background: var(--arok-bg-inverted);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  display: flex;
  align-items: center;
}
.custom-logo-link img {
  min-width: 92px;
}
.main-navigation {
  display: block;
  /* width: 100%; */
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  /* float: left; */
  top: 100%;
  left: -999em;
  z-index: 99999;
  display: none;
  min-width: 200px;
  background: var(--arok-bg-inverted);
  padding: 10px 0;
}

@media screen and (min-width: 1140px) {
  .main-navigation ul ul {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    display: block; /* Toujours dans le DOM pour les animations */
    left: 0; /* Position par défaut */
  }

  /* Animation d'apparition des sous-menus sur desktop - HOVER ET FOCUS */
  .main-navigation ul li:hover > ul,
  .main-navigation ul li.focus > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Sous-menus de 3e niveau sur desktop - HOVER ET FOCUS */
  .main-navigation ul ul li:hover > ul,
  .main-navigation ul ul li.focus > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    left: 100%; /* Apparaît à droite du parent */
    top: 0;
  }
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

/* Affichage des sous-menus pour MOBILE/TABLETTE */
@media screen and (max-width: 1139px) {
  /* FOCUS ET HOVER pour mobile/tablette */
  .main-navigation ul li.focus > ul,
  .main-navigation ul li:hover > ul {
    display: block;
    left: auto;
  }

  /* Sous-menus de 3e niveau et plus sur mobile */
  .main-navigation ul ul li.focus > ul,
  .main-navigation ul ul li:hover > ul {
    display: block;
    left: auto;
  }
}

.main-navigation ul ul a {
  font-size: var(--arok-body-font-size);
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
.main-navigation ul ul li:last-child a {
  border-bottom: none;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
  color: var(--arok-primary);
  /* color: var(--arok-text-primary); */
}

/* Ajustements pour mobile */
@media screen and (max-width: 1139px) {
  .main-navigation ul ul a {
    font-size: var(--arok-h4-font-size);
    padding: 18px 0;
    border-bottom: none;
  }
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}
.custom-logo-link {
  padding-top: 5px;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled #primary-menu {
  display: block;
}

/* === MENU BURGER PERSONNALISÉ === */
.menu-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.menu-toggle:hover {
  transform: scale(1.05);
}

.menu-toggle:focus {
  outline: 2px solid var(--arok-primary);
  outline-offset: 2px;
}

.burger-icon {
  width: 46px;
  height: 46px;
  transition: transform 0.3s ease;
}

.burger-line {
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Animation vers croix quand le menu est ouvert */
.main-navigation.toggled .burger-line-1 {
  transform: translate(-5px, 5px) rotate(45deg);
}

.main-navigation.toggled .burger-line-2 {
  opacity: 0;
}

.main-navigation.toggled .burger-line-3 {
  transform: translate(-5px, -5px) rotate(-45deg);
}
.header-contact {
  display: block;
}
.header-reservation {
  display: none;
}
.header-reservation a {
  /* pas de passage de ligne */
  white-space: nowrap;
  font-weight: 500;
}
.caps-menu {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}
.main-navigation a {
  color: var(--arok-bg-secondary);
  text-decoration: none;
}
.main-navigation li {
  margin-left: 20px;
  margin-right: 20px;
}
/* Background crossfade layers for caps-form-accueil */
.caps-form-accueil {
  position: relative;
  /* overflow: hidden; */
}
.caps-form-accueil::before,
.caps-form-accueil::after {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity var(--bg-fade-duration, 1.2s) ease-in-out;
  will-change: opacity, background-image;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.caps-form-accueil::before {
  /* visible layer */
  opacity: 1;
}
.caps-form-accueil .hero-content {
  position: relative;
  z-index: 2; /* above background layers */
}

/* DOM-based bg layers used by the simpler slideshow (safer than pseudo-element swaps) */
.caps-form-accueil > .bg-layer {
  position: absolute;
  inset: 0 0 0 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--bg-fade-duration, 1s) ease-in-out;
  z-index: 0;
  pointer-events: none;
}
.caps-form-accueil > .bg-layer.visible {
  opacity: 1;
}

/* when the JS toggles the 'bg-fade-next' class, swap opacities */
.caps-form-accueil.bg-fade-next::before {
  opacity: 0;
}
.caps-form-accueil.bg-fade-next::after {
  opacity: 1;
}

/* Small performance hint: ensure the background layers are rendered on GPU */
.caps-form-accueil::before,
.caps-form-accueil::after {
  transform: translateZ(0);
}

.main-navigation li a {
  padding: 8px;
  white-space: nowrap;
}
.menu-menu-principal-container > ul > li > a:hover,
.menu-menu-principal-de-container > ul > li > a:hover,
.menu-menu-principal-en-container > ul > li > a:hover {
  color: var(--arok-primary);
}
.menu-item-type-custom {
  margin-top: 40px;
  display: block;
  margin-right: 12px;
}
.menu-item-type-custom a {
  color: var(--arok-text-primary);
  font-size: var(--arok-body-font-size) !important;
  text-transform: uppercase;
  padding: 8px !important;
  font-weight: 500;
}
.menu-item-type-custom a span {
  color: var(--arok-bg-secondary);
}

@media screen and (max-width: 1139px) {
  .main-navigation li {
    margin-bottom: 6px;
  }
  .main-navigation li a {
    font-size: var(--arok-nav-mobile-font-size);
    padding: 1px 0px;
  }
  .site-branding {
    position: fixed;
    z-index: 9999;
  }
}
@media screen and (min-width: 1140px) {
  .site-header {
    padding: 30px 40px;
  }
  .caps-menu {
    display: flex;
    flex-direction: row-reverse;
  }
  .main-navigation {
    flex: 1;
  }
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
    margin-left: 3%;
  }
  .header-contact {
    display: none;
  }
  .header-reservation {
    display: block;
    margin-left: 20px;
  }
  .menu-item-type-custom {
    display: none;
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

/* === POLYLANG SWITCHER AVEC FLÈCHE === */
.polylang-switcher {
  position: relative;
  display: inline-block;
}

/* Style du wrapper pour la flèche */
.polylang-switcher::after {
  content: "";
  border: solid var(--arok-bg-secondary);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  position: absolute;
  right: 8px;
  top: 40%;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  transition: transform 0.2s ease;
  opacity: 0.6;
}

/* Style du select */
.polylang-switcher select {
  background: transparent;
  border: none;
  color: var(--arok-bg-secondary);
  cursor: pointer;
  opacity: 0.6;
  font-weight: 600;
  outline: none;
  box-shadow: none;
  /* enlever le style par défaut du select */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* padding pour faire de la place à la flèche */
  padding-right: 25px;
  padding-left: 0;
  position: relative;
}

.polylang-switcher:hover select {
  opacity: 1;
}

.polylang-switcher:hover::after {
  opacity: 1;
}

.polylang-switcher select:focus {
  outline: 2px solid var(--arok-primary);
  outline-offset: 2px;
}

/* ajout d'un symbole de flèche vers le bas */
.menu-item-has-children > a {
  position: relative;
  padding-right: 20px; /* espace pour la flèche */
}
.menu-item-has-children > a::after {
  content: "";
  border: solid var(--arok-bg-secondary);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg) translateX(-50%) translateY(-50%);
  margin-left: 13px;
  transform-origin: 0% 50%;
  transition: transform 0.1s ease;
}

/* Rotation de la flèche quand le sous-menu est ouvert */
.menu-item-has-children.focus > a::after,
.menu-item-has-children:hover > a::after {
  transform: rotate(-135deg) translateX(-50%);
}

/* Amélioration de l'état focus pour l'accessibilité */
.menu-item-has-children > a:focus {
  outline: 2px solid var(--arok-primary);
  outline-offset: 2px;
}
.sub-menu {
  background-color: var(--arok-bg-inverted);
}

/* === CONTACT DANS LE MENU === */
/* Contact dans le menu mobile */
.menu-item-contact {
  padding-top: 10px;
}

.menu-item-contact .header-contact {
  color: var(--arok-bg-secondary);
  font-style: normal;
}

.menu-item-contact .header-contact p {
  margin-bottom: 10px;
  font-size: var(--arok-h4-font-size);
}

.menu-item-contact .header-contact a {
  color: var(--arok-bg-secondary);
  text-decoration: none;
  font-size: var(--arok-body-font-size);
}

.menu-item-contact .header-contact a:hover {
  opacity: 1;
  color: var(--arok-primary);
}

.toggled .menu-menu-principal-container,
.toggled .menu-menu-principal-de-container,
.toggled .menu-menu-principal-en-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background: var(--arok-bg-inverted);
  padding-top: 90px;
  overflow: scroll;
  animation: slideIn 0.3s ease-out;
}

/* Animation d'ouverture du menu */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Amélioration de l'état focus du menu burger */
.menu-toggle:focus-visible {
  outline: 2px solid var(--arok-primary);
  outline-offset: 3px;
  border-radius: 5px;
}
.toggled .menu-toggle {
  position: relative;
  z-index: 99999;
}
/* ===================================
   HOMEPAGE HERO & RESERVATION FORM
   =================================== */

.home .site-header {
  /* background: transparent; */
}

.caps-form-accueil {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 2rem;
  padding-top: 4rem;
}

.caps-form-accueil::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
@media screen and (min-width: 800px) {
  .hero-content {
    justify-content: center;
  }
}

.hero-content h1 {
  color: var(--arok-bg-secondary);
  text-align: left;
  text-shadow: 0px 3px 14px rgba(0, 0, 0, 0.4);
  line-height: 0.95;
}
@media screen and (min-width: 800px) {
  .hero-content h1 {
    text-align: center;
  }
}

.reservation-form-container {
  margin-top: 2rem;
  padding-bottom: 4rem;
}

.reservation-form {
  /* max-width: 600px; */
  margin: 0 auto;
}

.caps-form-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colonnes en mobile */
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  align-items: start;
}

/* s'assurer que les enfants remplissent leur cellule */
.caps-form-groups > * {
  width: 100%;
  min-width: 0;
}

/* Desktop : 4 colonnes */
@media screen and (min-width: 800px) {
  .caps-form-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--arok-text-primary);
  font-size: 0.95rem;
}

.label-text {
  margin-right: 0.25rem;
}

.required {
  color: var(--arok-negative);
  font-weight: bold;
}

.form-input {
  padding: 0.875rem 1rem;
  /* border: 2px solid #e1e5e9; */
  border-radius: 5px;
  font-size: 1rem;
  font-family: inherit;
  background: white;
  transition: all 0.3s ease;
  color: var(--arok-text-primary);
  -webkit-appearance: none;
  appearance: none;
  height: 48px;
}
.caps-select {
  position: relative;
}
.caps-select::after {
  content: "";
  border: solid var(--arok-bg-inverted);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  position: absolute;
  right: 16px;
  top: 45%;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  transition: transform 0.2s ease;
  opacity: 0.6;
}
.caps-select select {
  padding-right: 40px;
}

.form-input:focus {
  outline: none;
  border-color: var(--arok-primary);
  box-shadow: 0 0 0 3px rgba(var(--arok-primary-rgb), 0.1);
}

.form-input:invalid {
  border-color: var(--arok-negative);
}

.form-input:invalid:focus {
  box-shadow: 0 0 0 3px rgba(var(--arok-negative-rgb), 0.1);
}
.duet-date__toggle {
  background: var(--arok-bg-secondary);
  box-shadow: none;
}
.duet-date__input {
  border-radius: 5px;
  border: none;
}
duet-date-picker .duet-date__input {
  padding: 0.875rem 1rem;
  /* padding-left: 60px; */
}
duet-date-picker[name="checkin-date"] .duet-date__input {
  padding: 0.875rem 1rem;
  /* padding-right: 60px; */
  text-align: right;
}
duet-date-picker[name="checkin-date"] .duet-date__toggle {
  right: auto;
  left: 1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.reservation-submit {
  font-size: var(--arok-body-font-size);
  width: 100%;
  position: relative;
  margin-top: 20px;
}
@media screen and (min-width: 800px) {
  .reservation-submit {
    width: auto;
  }
}
.reduction-badge {
  position: absolute;
  top: -30px;
  right: -35px;
}
.reduction-amount {
  color: var(--arok-bg-secondary);
}
/* ==============================
   SECTION CONCEPT - GRID CSS
   ============================== */

.caps-home-concept {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background-color: var(--arok-bg-secondary);
}
.home-concept {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1140px) {
  .home-concept {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-column-gap: 0px;
    grid-row-gap: 1rem;
  }

  .home-concept__titre {
    grid-area: 1 / 1 / 2 / 3;
  }
  .home-concept__description {
    grid-area: 1 / 3 / 3 / 5;
    padding-left: 22%;
  }
  .home-concept__cta {
    grid-area: 2 / 1 / 3 / 3;
  }
  .home-concept__slider {
    grid-area: 3 / 1 / 5 / 5;
  }
}
.container-content {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1440px;
  margin: 0 auto;
}
@media screen and (min-width: 1140px) {
  .container-content {
    padding-left: 120px;
    padding-right: 120px;
  }
}
.container-content p,
.container-content ul,
.container-content ol {
  color: var(--arok-text-secondary);
}

/* ===== Swiper / Slider adjustments ===== */
.home-concept-swiper {
  width: 100%;
  position: relative;
  margin-bottom: 1rem;
}

.home-concept-swiper .swiper-wrapper {
  align-items: center; /* centrer verticalement les slides */
}
.home-concept-swiper .swiper-slide {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 90vw;
}
@media screen and (min-width: 1140px) {
  .home-concept-swiper .swiper-slide {
    height: 40vw;
  }
}
.home-concept-swiper img,
.home-concept-swiper video,
.home-concept-swiper iframe {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* cover la zone */
}
.home-concept-swiper video {
  max-height: none;
}
.home-concept-swiper .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  z-index: 10;
}

/* Swiper navigation arrows styling */
.home-chambres__slider .swiper-button-prev,
.home-chambres__slider .swiper-button-next,
.home-concept-swiper .swiper-button-prev,
.home-concept-swiper .swiper-button-next {
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--arok-bg-secondary);
  z-index: 20;
}
.home-chambres__slider .swiper-button-prev::after,
.home-chambres__slider .swiper-button-next::after,
.home-concept-swiper .swiper-button-prev::after,
.home-concept-swiper .swiper-button-next::after {
  font-size: 18px;
  color: var(--arok-bg-secondary);
}
.home-concept-swiper .swiper-button-prev {
  left: 12px;
}
.home-concept-swiper .swiper-button-next {
  right: 12px;
}
.video-overlay-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.video-overlay-wrapper video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.video-play-icon {
  position: absolute;
  inset: 0; /* top/right/bottom/left = 0 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* bouton interactif */
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  z-index: 15;
  opacity: 0.95;
  cursor: pointer;
}
.video-play-icon:focus {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 4px;
}
.video-play-icon svg {
  display: block;
}

/* defensive: if wrapper gets an is-playing class, hide the decorative icon */
.video-overlay-wrapper.is-playing .video-play-icon {
  display: none !important;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  top: 20px;
  bottom: auto;
}
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  margin: 0 4px;
  opacity: 1;
  transition: background 0.3s ease;
}
.swiper-pagination-bullet-active {
  background: var(--arok-bg-secondary);
}
.home-concept__titre h2 {
  margin-top: 0;
}

@media screen and (min-width: 1140px) {
  .home-concept__titre h2 {
    margin-bottom: 0;
  }
}

/* === Styles pour les cartes 'Nos Chambres' === */
.chambre-card {
  position: relative;
  background: #f6f6f6;
  display: block;
  /* Desktop ratio 506/431 */
  aspect-ratio: 506 / 431;
}

/* Mobile ratio override */
@media (max-width: 899px) {
  .chambre-card {
    aspect-ratio: 305 / 260;
  }
}

.chambre-card__link::after {
  /* decorative SVG arrow via data URI */
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2048%2048%27%20fill=%27none%27%3E%3Cpath%20d=%27M32.9629%2023.8819C33.2558%2023.589%2033.2558%2023.1141%2032.9629%2022.8212L28.19%2018.0483C27.8971%2017.7554%2027.4222%2017.7554%2027.1293%2018.0483C26.8364%2018.3412%2026.8364%2018.816%2027.1293%2019.1089L31.3719%2023.3516L27.1293%2027.5942C26.8364%2027.8871%2026.8364%2028.362%2027.1293%2028.6549C27.4222%2028.9478%2027.8971%2028.9478%2028.19%2028.6549L32.9629%2023.8819ZM12.9731%2023.3516L12.9731%2024.1016L32.4326%2024.1016L32.4326%2023.3516L32.4326%2022.6016L12.9731%2022.6016L12.9731%2023.3516Z%27%20fill=%27white%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px 48px;
  border-radius: 50%;
  transition: transform 200ms ease, background-color 200ms ease;
  pointer-events: none; /* visual only */
}
.chambre-card__link:hover::after {
  transform: translateX(-6px);
}

/* Overlay body that contains the title, positioned at bottom */
.chambre-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 16px;
  z-index: 2;
  /* gradient that fades into the image */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.45) 70%
  );
  pointer-events: none; /* allow the link to capture clicks */
  display: flex;
  align-items: flex-end;
}

.chambre-card__title {
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: auto; /* title itself shouldn't block link */
}
.chambre-card__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ==============================
   SECTION CHAMBRES - GRID CSS
   ============================== */
.home-chambres {
  display: flex;
  flex-direction: column;
  padding-top: 5rem;
  padding-bottom: 5rem;
  overflow: visible;
  background-color: var(--arok-bg-primary);
}

@media screen and (min-width: 1140px) {
  .home-chambres {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-column-gap: 0px;
    grid-row-gap: 1rem;
    padding-bottom: 7rem;
  }

  .home-chambres__titre {
    grid-area: 1 / 1 / 2 / 3;
  }
  .home-chambres__description {
    grid-area: 1 / 3 / 3 / 5;
    padding-left: 22%;
  }
  .home-chambres__cta {
    grid-area: 2 / 1 / 3 / 3;
  }
  .home-chambres__slider {
    grid-area: 3 / 1 / 5 / 5;
  }
}

.home-chambres__titre h2 {
  margin-top: 0;
  margin-bottom: 0;
}

@media screen and (min-width: 1140px) {
  .home-chambres__titre h2 {
    margin-bottom: 0;
  }
}
.home-chambres__description p {
  /* margin-bottom: 0; */
}

/* ==============================
   Home Services Swiper
   ============================== */

.home-services {
  padding: 2rem 20px 5rem;
  background-color: var(--arok-bg-secondary);
  display: flex;
  flex-direction: column;
}
.home-services__titre {
  margin-bottom: 2rem;
  white-space: nowrap;
}

.home-services__liste {
  width: 100%;
  padding-bottom: 1rem;
}
@media screen and (min-width: 1140px) {
  .home-services {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .home-services__titre {
    width: 33%;
    margin-bottom: 0;
    padding-left: 100px;
    padding-right: 60px;
  }
  .home-services__liste {
    width: 67%;
  }
}

.home-services-swiper .swiper-wrapper {
  /* S'assurer que le grid fonctionne correctement */
  height: auto;
}

.home-services-swiper .swiper-slide {
  height: auto;
  display: flex;
  align-items: stretch;
}

.service-card {
  border-radius: 8px;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  /* min-height: 120px; */
  width: 100%;
}

.service-card .service-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  object-fit: contain;
}

.service-card__title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.3;
}

/* Desktop adaptations */
@media screen and (min-width: 1140px) {
  .home-services {
    padding: 3rem 2rem;
    padding-right: 0;
  }

  .service-card {
    padding: 0 1.5rem;
    padding-top: 2.5rem;
    min-height: 140px;
  }

  .service-card .service-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 1.25rem;
  }

  .service-card__title {
    font-size: 1rem;
  }
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: linear;
}

.lien,
.lien:visited,
.lienArok a,
.lienArok a:visited {
  text-decoration: none;
  text-transform: uppercase;
  color: var(--arok-text-primary);
  font-size: var(--arok-small-font-size) !important;
  border-bottom: 1px solid var(--arok-text-primary);
  transition: all 0.2s ease;
  position: relative;
}

.lien:hover,
.lienArok a:hover,
.lien:focus,
.lienArok a:focus {
  color: var(--arok-primary);
  border-bottom-color: var(--arok-primary);
}

/* SVG flèche en CSS avec pseudo-élément */
.lien::after,
.lienArok a::after {
  content: "";
  display: inline-block;

  width: 24px;
  height: 8px;
  margin-left: 10px;

  vertical-align: 1px;
  background-image: url("data:image/svg+xml,%3csvg width='17' height='6' viewBox='0 0 17 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 2.65C0.8067 2.65 0.65 2.8067 0.65 3C0.65 3.1933 0.8067 3.35 1 3.35L1 2.65ZM16.2475 3.24749C16.3842 3.1108 16.3842 2.8892 16.2475 2.75251L14.0201 0.525126C13.8834 0.388443 13.6618 0.388443 13.5251 0.525126C13.3884 0.66181 13.3884 0.883418 13.5251 1.0201L15.505 3L13.5251 4.9799C13.3884 5.11658 13.3884 5.33819 13.5251 5.47487C13.6618 5.61156 13.8834 5.61156 14.0201 5.47487L16.2475 3.24749ZM1 3V3.35L16 3.35V3V2.65L1 2.65L1 3Z' fill='%231D1D1D'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.2s ease;
}

/* Changement de couleur au hover/focus */
.lien:hover::after,
.lienArok a:hover::after,
.lien:focus::after,
.lienArok a:focus::after {
  background-image: url("data:image/svg+xml,%3csvg width='17' height='6' viewBox='0 0 17 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 2.65C0.8067 2.65 0.65 2.8067 0.65 3C0.65 3.1933 0.8067 3.35 1 3.35L1 2.65ZM16.2475 3.24749C16.3842 3.1108 16.3842 2.8892 16.2475 2.75251L14.0201 0.525126C13.8834 0.388443 13.6618 0.388443 13.5251 0.525126C13.3884 0.66181 13.3884 0.883418 13.5251 1.0201L15.505 3L13.5251 4.9799C13.3884 5.11658 13.3884 5.33819 13.5251 5.47487C13.6618 5.61156 13.8834 5.61156 14.0201 5.47487L16.2475 3.24749ZM1 3V3.35L16 3.35V3V2.65L1 2.65L1 3Z' fill='%23ff8a3d'/%3e%3c/svg%3e");
}
.home-services__cta {
  margin: 0;
  margin-top: 30px;
}
@media screen and (min-width: 1140px) {
  .home-services__cta {
    margin: 0 100px;
    margin-top: 0;
  }
}

/* ==============================
   Home Carte Section
   ============================== */

.home-carte {
  position: relative;
  padding-top: 34%;
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
}
.home-carte__overlay {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 310px;
  background-color: var(--arok-bg-secondary);
}

@media screen and (min-width: 1140px) {
  .home-carte {
    position: relative;
    padding-top: 46%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .home-carte__overlay {
    position: absolute;
    top: 44%;
    left: 12%;
    width: 340px;
  }
}

.home-carte__content {
  text-align: center;
  padding: 2rem;
}

.home-carte__titre {
  margin-top: 0;
}

.home-carte__description {
  margin-bottom: 2rem;
}

.home-carte__description p {
}

.home-carte__cta {
  margin-top: 2rem;
}

.home-carte__cta p {
  margin-bottom: 0;
}
.home-situation {
  padding-top: 5rem;
  padding-bottom: 1rem;
  background-color: var(--arok-bg-primary);
}
.home-situation p {
  max-width: 790px;
  margin-left: auto;
  margin-right: auto;
}

/* Styles pour sliderArok avec overlay texte */

/* Structure mobile : caché par défaut */
.slider-arok-mobile {
  position: relative;
  display: none;
}

/* Mobile : afficher le slider et cacher les colonnes originales */
@media (max-width: 768px) {
  .wp-block-columns.sliderArok .slider-arok-mobile {
    display: block;
    width: 100%;
    max-width: 100vw;
  }

  /* Cacher les colonnes originales sur mobile */
  .wp-block-columns.sliderArok .wp-block-column {
    display: none !important;
  }

  .slider-arok-swiper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    min-height: 200px;
  }

  .slider-arok-pagination {
    text-align: center;
    margin-bottom: 20px;
    position: absolute;
    top: 0;
    z-index: 3;
  }

  .slider-arok-pagination .swiper-pagination-bullet {
    background: #333;
    opacity: 0.3;
    margin: 0 8px;
    width: 12px;
    height: 12px;
  }

  .slider-arok-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--arok-bg-primary);
  }

  .slider-arok-swiper .swiper-slide {
    height: auto;
    width: 100% !important;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .slider-arok-swiper .swiper-wrapper {
    display: flex;
    width: 100%;
    height: auto;
  }

  /* Forcer les dimensions correctes pour les images dans les slides */
  .slider-arok-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
  }

  .slider-arok-swiper .swiper-slide figure {
    margin: 0;
    width: 100%;
    height: 100%;
  }
  .slider-arok-swiper .swiper-slide figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Overlay texte par-dessus le slider */
  .texte-sliderArok.overlay-texte {
    position: absolute;
    top: auto;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0 auto;
    z-index: 2;
    color: var(--arok-text-inverted);
    padding: 20px;
    padding-bottom: 0;
    border-radius: 8px;
    backdrop-filter: blur(1px);
    text-align: center;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.6) 100%
    );
  }
  .texte-sliderArok.overlay-texte * {
    color: var(--arok-text-inverted) !important;
    font-family: "DM Sans", sans-serif !important;
    text-align: left !important;
    font-style: normal !important;
    text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.9);
    border-color: var(--arok-text-inverted) !important;
  }
  .texte-sliderArok.overlay-texte a::after {
    filter: invert(1);
  }
}

/* Desktop : cacher le slider mobile et afficher les colonnes normalement */
@media (min-width: 769px) {
  .wp-block-columns.sliderArok .slider-arok-mobile {
    display: none;
  }

  /* S'assurer que les colonnes originales sont visibles sur desktop */
  .wp-block-columns.sliderArok {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .wp-block-columns.sliderArok .wp-block-column {
    display: block;
  }

  /* Images sticky uniquement avec la classe "sticky" dans les colonnes sliderArok sur desktop */
  .wp-block-image.sticky {
    position: sticky !important;
    top: 2rem !important;
    z-index: 1 !important;
  }

  /* S'assurer que le conteneur de l'image a la bonne hauteur */
  .wp-block-image.sticky img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  /* Pour que le sticky fonctionne, le conteneur parent ne doit pas avoir overflow hidden */
  .wp-block-columns.sliderArok {
    overflow: visible !important;
  }

  /* S'assurer que les parents directs n'ont pas d'overflow caché */
  .wp-block-columns.sliderArok .wp-block-column {
    overflow: visible !important;
  }

  /* Espacer les colonnes pour un meilleur effet sticky */
  .wp-block-columns.sliderArok .wp-block-column {
    margin-bottom: 2rem;
  }

  /* Afficher le texte original sur desktop */
  .wp-block-columns.sliderArok .texte-sliderArok:not(.overlay-texte) {
    display: block !important;
  }
}

/* ==============================
   Home Actualités Section
   ============================== */

.home-actus {
  padding: 5rem 0;
  background-color: var(--arok-bg-secondary);
}

.home-actus__titre {
  margin-bottom: 3rem;
}

.home-actus__titre h2 {
  margin: 0;
}

/* Grille responsive pour les articles actualités */
.home-actus__liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
}

/* 2 colonnes à partir de 400px */
@media (min-width: 400px) {
  .home-actus__liste {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Styles pour les cartes d'actualités */
.home-actus-article {
  background: var(--arok-bg-secondary);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.home-actus-article__link {
  text-decoration: none;
  color: inherit;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.home-actus-article__thumbnail {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.home-actus-article__thumbnail--placeholder {
  background: var(--arok-bg-tertiary, #f0f0f0);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-actus-article__title {
  margin: 1rem 0 0;
  color: var(--arok-text-primary);
  line-height: 1.3;
}

.home-actus-article__excerpt {
  padding: 0 0 1.5rem;
  color: var(--arok-text-secondary);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.home-actus-article__readmore {
  width: auto;
  display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 399px) {
  .home-actus {
    padding: 3rem 0;
  }

  .home-actus__titre {
    margin-bottom: 2rem;
  }
}

@media (min-width: 1140px) {
  .home-actus {
    padding: 6rem 0;
  }

  .home-actus__titre {
    margin-bottom: 4rem;
  }
}
.home-social {
  padding-top: 5rem;
  padding-bottom: 10rem;
  background-color: var(--arok-bg-primary);
}

.home-social__titre {
  text-align: center;
}
.home-social__icons {
  text-align: center;
  padding-top: 2rem;
}
.home-social__icons a {
  display: inline-block;
  margin: 0 5px;
  transition: opacity 0.2s ease;
}
.home-social__icons a:hover {
  opacity: 0.7;
}
/* ==============================
   FOOTER STYLES
   ============================== */
.site-footer {
  background: var(--arok-bg-inverted);
  color: var(--arok-text-inverted);
  padding-top: 3rem;
}
@media screen and (min-width: 800px) {
  .site-footer {
    padding-top: 6rem;
  }
}
.site-footer a,
.site-footer a:visited {
  color: var(--arok-text-inverted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer a:hover,
.site-footer a:focus {
  color: var(--arok-primary);
}
.footer-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* En deux colonnes */
  column-count: 2;
  column-gap: 3rem;
  font-size: var(--arok-small-font-size);
}
.footer-navigation ul li {
  margin-bottom: 1rem;
}

.site-footer .container-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
}
.site-footer .container-content > *:not(:last-child) {
  border-bottom: 1px solid var(--arok-text-secondary);
  padding-bottom: 1.5rem;
}
@media screen and (min-width: 800px) {
  .site-footer .container-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .site-footer .container-content > *:not(:last-child) {
    border-bottom: none;
    padding-bottom: 0;
  }
}
.logo-footer {
  text-align: center;
}
.logo-footer img {
  width: 143px;
}
@media screen and (min-width: 800px) {
  .logo-footer img {
    width: 274px;
    max-width: 80%;
  }
}

.footer-contact {
  color: var(--arok-bg-secondary);
  font-style: normal;
  padding-bottom: 0 !important;
  margin-bottom: 0;
}
@media screen and (min-width: 800px) {
  .footer-contact {
    padding-bottom: 12rem !important;
  }
}

.footer-contact p {
  margin-top: 0;
  color: var(--arok-bg-secondary);
  font-size: var(--arok-small-font-size);
}

.footer-contact a {
  color: var(--arok-bg-secondary);
  text-decoration: none;
}

.footer-contact a:hover {
  opacity: 1;
  color: var(--arok-primary);
}
.ligne-bas {
  font-size: var(--arok-xsmall-font-size);
}
.footer-navigation-bas {
  border-bottom: none !important;
  padding-bottom: 3.5rem !important;
}
.footer-navigation-bas ul {
  list-style: none;
  padding: 0;
  padding-top: 1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media screen and (min-width: 800px) {
  .footer-navigation-bas {
    padding-bottom: 0 !important;
  }
  .footer-navigation-bas ul {
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1.5rem;
    padding-top: 0;
  }
}
.footer-navigation-bas a {
  display: inline-block;
  padding: 5px;
}
.post,
.page {
  margin: 0;
}
.site-info-bas a {
  vertical-align: middle;
  margin-left: 10px;
  display: inline-block;
}
.ligne-bas {
  padding-bottom: 10px;
}
.social-footer {
  line-height: 1;
}

.social-footer a {
  transition: opacity 0.2s ease;
}
.social-footer a:hover {
  opacity: 0.8;
}
.logo-footer {
  order: 0;
}
.footer-contact {
  order: 1;
}
.site-info {
  order: 2;
  padding-bottom: 0.5rem !important;
}
.social-footer {
  order: 4;
  display: flex;
  justify-content: center;
  gap: 5px;
  border-bottom: 1px solid var(--arok-text-secondary);
  padding-bottom: 1.5rem;
}
@media screen and (min-width: 800px) {
  .logo-footer,
  .footer-contact,
  .site-info,
  .social-footer {
    order: unset;
  }
  .social-footer {
    flex-direction: column;
    border-bottom: none;
  }
}
.bouton-flottant-reservation {
  position: fixed;
  bottom: 50px;
  right: 20px;
  left: 20px;
  z-index: 999;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  transform: translateY(200%);
  pointer-events: none;
}
.bouton-flottant-reservation.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.bouton-flottant-reservation a {
  display: block;
  width: 100%;
}
@media screen and (min-width: 800px) {
  .bouton-flottant-reservation {
    display: none;
  }
}
header.container-content {
  padding-top: 4rem;
}
.entry-header h1 {
  margin-bottom: 0;
}
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-bottom: 0.5rem;
}

/* ==============================
   CHAMBRE GALLERY SLIDER
   ============================== */

.chambre-gallery-slider {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 300px;
}
/* 
@media screen and (min-width: 600px) {
  .chambre-gallery-slider {
    height: 400px;
  }
}

@media screen and (min-width: 900px) {
  .chambre-gallery-slider {
    height: 80vh;
  }
} */

.chambre-gallery-slider .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chambre-gallery-slider .swiper-slide a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.chambre-gallery-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

@media screen and (min-width: 1140px) {
  .chambre-gallery-slider .swiper-slide:hover img {
    transform: scale(1.05);
  }
}

/* Icône zoom */
.gallery-zoom-icon {
  position: absolute;
  top: 25px;
  right: 15px;
  width: 48px;
  height: 48px;
  background: var(--arok-bg-secondary);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
  transition: background 0.3s ease;
}
.chambre-gallery-slider .swiper-slide:hover .gallery-zoom-icon {
  background: var(--arok-primary);
}
.swiper-slide:focus {
  outline: none !important;
}

/* Navigation personnalisée */
.chambre-gallery-prev,
.chambre-gallery-next {
  position: absolute;
  top: auto;
  bottom: 25px;
  right: 15px;
  left: auto;
  width: 48px;
  height: 48px;
  background: var(--arok-bg-secondary);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;
}

.chambre-gallery-slider .chambre-gallery-prev:hover {
  background-color: var(--arok-primary);
}
.chambre-gallery-slider .chambre-gallery-next:hover {
  background-color: var(--arok-primary);
}

.chambre-gallery-next {
  bottom: 85px;
}

.chambre-gallery-prev::after,
.chambre-gallery-next::after {
  content: "";
}

/* Pagination */
.chambre-gallery-pagination {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 10;
}

.chambre-gallery-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.chambre-gallery-pagination .swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.2);
}

/* Fallback sans images */
.no-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: #f5f5f5;
  border-radius: 8px;
  color: #666;
}

/* Responsive adjustments */
@media screen and (max-width: 599px) {
  .chambre-gallery-prev {
    left: 15px;
  }

  .chambre-gallery-next {
    right: 15px;
    bottom: 25px;
  }
}
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background-color: var(--arok-bg-secondary);
  color: var(--arok-bg-inverted);
}
.glightbox-clean .gclose path,
.glightbox-clean .gnext path,
.glightbox-clean .gprev path {
  fill: var(--arok-bg-inverted);
}
.gclose,
.gnext,
.gprev {
  background-color: var(--arok-bg-secondary);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: var(--arok-bg-secondary);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;
}
.gclose:hover,
.gnext:hover,
.gprev:hover {
  background-color: var(--arok-primary);
}
.gclose {
  top: 25px;
  right: 25px;
  transform: none;
}
.gnext {
  right: 25px;
}
.gprev {
  left: 25px;
}
.gslide-description.description-bottom,
.gslide-description.description-top {
  background: var(--arok-bg-secondary) !important;
  color: var(--arok-text-primary) !important;
  text-align: center;
  max-width: none !important;
  padding: 0px 20px !important;
}
.gslide-description.description-bottom em,
.gslide-description.description-top em {
  display: block;
  font-family: "Arapey", serif;
  font-size: var(--arok-small-font-size);
}
.glightbox-mobile .glightbox-container .gslide-title {
  color: var(--arok-text-primary) !important;
}
.gslide-title {
  margin: 1rem 0;
}
.site-main {
  overflow-x: hidden;
  overflow-x: clip;
}
.liste-chambres-arok {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.liste-chambres-arok::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background-color: var(--arok-bg-primary);
}
.caps-chambres {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.colG-chambres {
  width: 100%;
}
@media screen and (min-width: 1140px) {
  .caps-chambres {
    flex-direction: row;
  }
  .liste-chambres-arok article:nth-child(even) .caps-chambres {
    flex-direction: row-reverse;
  }
  .colG-chambres {
    flex: 1;
    width: 50%;
  }
  .colD-chambres {
    flex: 1;
    padding: 0 50px;
    width: 50%;
  }
}
.titre-chambre {
  text-align: center;
  margin-bottom: 0 !important;
}
.sous-titre-chambre {
  margin-top: 0;
  text-align: center;
  color: var(--arok-text-secondary);
}
ul.caps-caracteristiques-chambres {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10px 20px;
}
.caracteristique-chambre {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  flex: 1;
}
.caracteristique-chambre p {
  margin: 0;
  font-size: var(--arok-xsmall-font-size);
}
.caps-liens-chambre {
  margin-top: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
}
.alignfull {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}
.alignfull > div {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 1140px) {
  .alignfull > div {
    padding-left: 120px;
    padding-right: 120px;
    max-width: 1440px;
    margin: auto;
  }
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* Add a custom transition when opening/closing. */
.wp-block-details {
  transition: all 0.3s ease-in-out;
  margin-bottom: 15px;
}

/* Add horizontal margin to nested blocks/elements. */
.wp-block-details > :where(:not(summary)) {
  padding: 0 2rem;
  background-color: var(--arok-bg-primary);
  transition: all 0.6s ease-in-out;
  margin: 0;
  color: var(--arok-text-secondary);
}

/* If open, add some bottom padding to avoid content butting against the bottom. */
.wp-block-details[open] > :where(:not(summary)) {
  padding: 2rem;
}

/* Base `summary` element styling. */
.wp-block-details summary {
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  padding: 1rem;
  padding-right: 3rem;
  background-color: var(--arok-bg-primary);
  appearance: none;
  position: relative;
}

/* Change the background of the `summary` element based on state. */
.wp-block-details[open] summary,
.wp-block-details summary:hover,
.wp-block-details summary:focus {
  background-color: var(--arok-bg-inverted);
  color: var(--arok-text-inverted);
}
.wp-block-details summary::marker {
  content: none;
}

.wp-block-details summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease-in-out;
  font-size: 1.5rem;
}

.wp-block-details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.wp-block-cover h2 {
  color: var(--arok-text-inverted);
  font-family: "Arapey", serif;
  font-style: italic;
  font-size: var(--arok-h2-font-size) !important;
}
.wp-block-cover p {
  color: var(--arok-text-inverted);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 780px) {
  .empilement-desktop {
    flex-direction: column;
  }
}
@media screen and (min-width: 601px) {
  .wp-block-media-text.reverse > .wp-block-media-text__content {
    grid-column: 1;
  }
  .wp-block-media-text.reverse > .wp-block-media-text__media {
    grid-column: 2;
  }
  .wp-block-media-text.reverse {
    grid-template-columns: 1fr 40%;
  }
  .wp-block-media-text {
    grid-template-columns: 40% 1fr;
  }
  .wp-block-media-text.reverse > .wp-block-media-text__content {
    padding-right: 35%;
    padding-left: 0;
  }
  .wp-block-media-text > .wp-block-media-text__content {
    padding-right: 0;
    padding-left: 35%;
  }
}
.wp-block-cover,
.wp-block-cover-image {
  min-height: 540px;
}
.post a,
.error-404 a {
  color: var(--arok-text-primary);
}
.wp-block-table table {
  width: auto !important;
  min-width: 30% !important;
}
.wp-block-table th,
.wp-block-table td {
  border: 0px solid var(--arok-text-secondary);
  padding: 6px;
  padding-left: 0;
  padding-right: 50px;
}
.single-chambre .site-main .container-content {
  padding-top: 6rem;
  padding-bottom: 0;
  display: block;
}
@media screen and (min-width: 1140px) {
  .single-chambre .site-main .container-content {
    padding-top: 8rem;
  }
}
.single-chambre .site-main .container-content.home-chambres {
  padding-bottom: 6rem;
}
.arok-breadcrumb {
  text-transform: uppercase;
  font-size: var(--arok-xsmall-font-size);
  color: var(--arok-text-secondary);
  margin-bottom: 0.75rem;
}
.arok-breadcrumb a {
  color: var(--arok-text-secondary);
  text-decoration: none;
}
.arok-breadcrumb span {
  color: var(--arok-text-primary);
}
.single-chambre .titre-chambre,
.single-chambre .sous-titre-chambre {
  text-align: left;
}
.single-chambre .caps-chambres {
  align-items: flex-start;
}
.content-chambre {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.single-chambre .caps-liens-chambre {
  justify-content: flex-start;
}
ul,
ol {
  margin: 0 0 1.5em 0em;
}
.single-chambre .bg-gris-clair {
  margin-top: 5rem;
}
.single-chambre .home-chambres h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}
.grille-des-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 5rem;
}
@media (min-width: 600px) {
  .grille-des-articles {
    grid-template-columns: repeat(2, 1fr);
  }
}
.grille-des-articles h2 {
  font-size: var(--arok-h3-font-size);
  margin: 0;
}
.grille-des-articles h2 a {
  color: var(--arok-text-primary);
  text-decoration: none;
}
.post-navigation,
.posts-navigation {
  padding-bottom: 8rem;
  padding-top: 2rem;
  border-top: 1px solid var(--arok-text-secondary);
  margin-top: 4rem;
}
.post-navigation a,
.posts-navigation a {
  color: var(--arok-text-primary);
  text-decoration: none;
}
.post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}
.single-post .entry-content {
  margin-top: 3rem;
  margin-bottom: 5rem;
}
.post-thumbnail img {
  /* ratio 16:9 */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.nav-previous a::before {
  content: "← ";
}
.nav-next a::after {
  content: " →";
}
.home-chambres__slider {
  position: relative;
}

.home-chambres__slider .swiper-button-prev,
.home-chambres__slider .swiper-button-next {
  background-color: #fff;
  width: 54px;
  height: 54px;
}
.home-chambres__slider .swiper-pagination {
  bottom: -60px;
  top: auto;
  display: none;
}
@media screen and (min-width: 1140px) {
  .home-chambres__slider .swiper-button-prev {
    left: -27px;
  }
  .home-chambres__slider .swiper-button-next {
    right: -27px;
  }
  .home-chambres__slider .swiper-pagination {
    display: block;
  }
}
.home-chambres__slider .swiper-button-next::after {
  content: url(data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2217%22%20viewBox%3D%220%200%2022%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0.5%208.5H21.5M21.5%208.5L13.625%200.5M21.5%208.5L13.625%2016.5%22%20stroke%3D%22%231D1D1D%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
}
.home-chambres__slider .swiper-button-prev::after {
  content: url(data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2217%22%20viewBox%3D%220%200%2022%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21.5%208.5H0.5M0.5%208.5L8.375%200.5M0.5%208.5L8.375%2016.5%22%20stroke%3D%22%231D1D1D%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
}
.home-chambres__slider .swiper-pagination-bullet {
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0.35;
}
.home-chambres__slider .swiper-pagination-bullet-active {
  opacity: 1;
}