/* =============================================================
   HOTEL MIGNY — FEUILLE DE STYLE PRINCIPALE
   =============================================================
   Ce fichier est organisé pour être facile à modifier :
   1. VARIABLES (couleurs, polices, espacements) — change tout ici
   2. RESET & BASE
   3. MISE EN PAGE GÉNÉRALE (conteneurs, grilles)
   4. EN-TÊTE / NAVIGATION
   5. BOUTONS & ÉLÉMENTS RÉUTILISABLES
   6. HÉRO (grande image d'intro sur chaque page)
   7. SECTIONS DE CONTENU
   8. CHAMBRES (cartes)
   9. GALERIE PHOTOS
   10. QUARTIER / LISTES D'ATTRACTIONS
   11. CONTACT / FORMULAIRE
   12. PIED DE PAGE
   13. RESPONSIVE (mobile)
   ============================================================= */

/* -------------------------------------------------------------
   1. VARIABLES — C'est ICI que tu changes les couleurs et polices
      de tout le site en une seule fois.
   ------------------------------------------------------------- */
:root {
  /* Couleurs principales */
  --color-bg: #faf7f2;             /* fond général, blanc cassé */
  --color-bg-alt: #f1ece3;         /* fond de sections alternées */
  --color-ink: #241f1a;            /* texte principal, presque noir */
  --color-ink-soft: #6b6259;       /* texte secondaire, gris chaud */
  --color-dark: #1b1714;           /* fonds sombres (header, footer, hero overlay) */
  --color-accent: #b08948;         /* doré / laiton — couleur signature */
  --color-accent-dark: #8a6a34;    /* doré plus foncé, hover */
  --color-burgundy: #7c2634;       /* rouge bordeaux — touches déco */
  --color-line: #e4dcd0;           /* lignes / séparateurs discrets */
  --color-white: #ffffff;

  /* Typographie */
  --font-display: "Playfair Display", Georgia, serif;   /* titres */
  --font-body: "Jost", "Segoe UI", sans-serif;           /* texte courant */

  /* Mise en page */
  --container: 1180px;
  --radius: 3px;
  --shadow-soft: 0 10px 30px rgba(27, 23, 20, 0.08);
  --transition: 0.25s ease;
}

/* -------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 16px;
}

img { max-width: 100%; display: block; }

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

/* Liens à l'intérieur des textes : ils doivent SE VOIR (soulignés +
   couleur signature), sinon le visiteur ne sait pas qu'il peut cliquer
   pour aller vers la page Parkings, Chambres, Restaurants, etc.
   Les liens de navigation (menu, pied de page, cartes, boutons) ne sont
   pas concernés : ils sont déjà identifiables. */
.section p a,
.faq-item p a,
.legal-block p a,
.legal-block li a,
.room-card-body p a,
.category-card p a,
.split p a,
.quote-block a {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

.section p a:hover,
.faq-item p a:hover,
.legal-block p a:hover,
.legal-block li a:hover,
.room-card-body p a:hover,
.category-card p a:hover,
.split p a:hover {
  color: var(--color-accent);
}

/* Exceptions : les mentions discrètes (sources, notes de bas de section)
   gardent la couleur du texte pour ne pas surcharger la page. */
.section p[style*="0.8rem"] a,
.section p[style*="0.78rem"] a,
.compare-legal a { color: inherit; }

ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { color: var(--color-ink-soft); }

/* -------------------------------------------------------------
   3. MISE EN PAGE GÉNÉRALE
   ------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 88px 0;
}

.section--alt {
  background: var(--color-bg-alt);
}

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.section-head h2 { margin-bottom: 14px; }

.grid {
  display: grid;
  gap: 32px;
}

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

/* -------------------------------------------------------------
   4. EN-TÊTE / NAVIGATION
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 18px 24px;
  max-width: var(--container);
  margin: 0 auto;
}

.header-inner > .logo { flex: 0 0 auto; }

.logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  line-height: 1;
}

.logo span:not(.sr-only):not(.logo-since) {
  color: var(--color-accent);
}

.logo img {
  height: 48px;
  width: auto;
  display: block;
}

.logo .logo-since {
  display: block;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  white-space: nowrap;
  margin-top: 1px;
  line-height: 1.2;
}
.footer-grid .logo-since {
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.16em;
}


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

.footer-grid .logo img {
  height: 56px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

.main-nav {
  display: flex;
  gap: 22px;
}

.main-nav a {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-ink);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.phone-link {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

/* Sous 1180 px le téléphone disparaît ; sous 1024 px le menu
   passe en hamburger (voir media query plus bas). */
.main-nav { gap: 16px; }
.main-nav a { font-size: 0.78rem; letter-spacing: 0.04em; }
.header-cta { gap: 12px; }
.phone-link { font-size: 0.78rem; }
.header-cta .btn { padding: 12px 20px; font-size: 0.74rem; }
.lang-switcher select { font-size: 0.74rem; padding: 6px 8px; }

@media (max-width: 1180px) {
  .phone-link { display: none; }
  .main-nav { gap: 13px; }
  .main-nav a { font-size: 0.74rem; }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--color-ink);
}

/* Sélecteur de langue (menu déroulant dans l'en-tête) */
.lang-switcher select {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 7px 10px;
  cursor: pointer;
}

.lang-switcher select:hover { border-color: var(--color-accent); }

/* -------------------------------------------------------------
   5. BOUTONS & ÉLÉMENTS RÉUTILISABLES
   ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-accent-dark); }

.btn--outline {
  border-color: var(--color-white);
  color: var(--color-white);
}
.btn--outline:hover {
  background: var(--color-white);
  color: var(--color-ink);
}

.btn--dark {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn--dark:hover { background: var(--color-accent-dark); }

.tag-stars {
  color: var(--color-accent);
  letter-spacing: 3px;
  font-size: 0.9rem;
}

/* -------------------------------------------------------------
   6. HÉRO
   ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,23,20,0.55) 0%, rgba(27,23,20,0.35) 45%, rgba(27,23,20,0.75) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding: 0 24px;
}

.hero-content .eyebrow { color: var(--color-white); opacity: 0.85; }

.hero-content h1 {
  color: var(--color-white);
  margin: 10px 0 18px;
}

.hero-content p {
  color: rgba(255,255,255,0.88);
  font-size: 1.05rem;
  margin-bottom: 26px;
}


/* acces-hero-focus */
.hero--acces {
  background-position: left center;
  background-size: cover;
}

.hero--small {
  min-height: 46vh;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------
   7. SECTIONS DE CONTENU
   ------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.split h2 { margin-bottom: 18px; }
.split p { margin-bottom: 16px; }

.stat-row {
  display: flex;
  gap: 40px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.stat-row .stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-accent);
}

.stat-row .stat span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
}

.quote-block {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 24px;
}

.quote-block p {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--color-ink);
}

.quote-block cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* -------------------------------------------------------------
   8. CHAMBRES
   ------------------------------------------------------------- */
.room-card {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.room-card:nth-child(even) .room-card-media { order: 2; }

.room-card-media {
  min-height: 340px;
  background-size: cover;
  background-position: center;
}

.room-card-body {
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.room-card-body h3 { margin-bottom: 6px; }

.room-meta {
  display: flex;
  gap: 18px;
  margin: 10px 0 16px;
  font-size: 0.82rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.room-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 18px 0 22px;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.room-amenities li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.room-amenities li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.amenity-ac::before      { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%223%22%20x2%3D%2212%22%20y2%3D%2221%22/%3E%3Cline%20x1%3D%224.5%22%20y1%3D%227%22%20x2%3D%2219.5%22%20y2%3D%2217%22/%3E%3Cline%20x1%3D%2219.5%22%20y1%3D%227%22%20x2%3D%224.5%22%20y2%3D%2217%22/%3E%3C/g%3E%3C/svg%3E"); }
.amenity-wifi::before    { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%209c4.5-4.5%2011.5-4.5%2016%200%22/%3E%3Cpath%20d%3D%22M7%2012.5c2.8-2.8%207.2-2.8%2010%200%22/%3E%3Cpath%20d%3D%22M10%2016c1.2-1.2%202.8-1.2%204%200%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2219.3%22%20r%3D%221.1%22%20fill%3D%22%23b08948%22/%3E%3C/svg%3E"); }
.amenity-tv::before      { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%221.5%22%20fill%3D%22none%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22/%3E%3Cline%20x1%3D%229%22%20y1%3D%2220%22%20x2%3D%2215%22%20y2%3D%2220%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212%22%20y2%3D%2220%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22/%3E%3C/svg%3E"); }
.amenity-fridge::before  { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%226%22%20y%3D%222.5%22%20width%3D%2212%22%20height%3D%2219%22%20rx%3D%221.5%22%20fill%3D%22none%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22/%3E%3Cline%20x1%3D%226%22%20y1%3D%229%22%20x2%3D%2218%22%20y2%3D%229%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22/%3E%3Cline%20x1%3D%2215%22%20y1%3D%224.5%22%20x2%3D%2215%22%20y2%3D%226.5%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cline%20x1%3D%2215%22%20y1%3D%2211%22%20x2%3D%2215%22%20y2%3D%2213%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); }
.amenity-safe::before    { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%221.5%22%20fill%3D%22none%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22none%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.6%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2212%22%20x2%3D%2212%22%20y2%3D%229%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2212%22%20x2%3D%2214.3%22%20y2%3D%2213%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); }
.amenity-shower::before  { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cline%20x1%3D%224%22%20y1%3D%226%22%20x2%3D%2219%22%20y2%3D%226%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2220.3%22%20cy%3D%226%22%20r%3D%221.3%22%20fill%3D%22%23b08948%22/%3E%3Cg%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%227%22%20y1%3D%2210%22%20x2%3D%226%22%20y2%3D%2213.5%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2210%22%20x2%3D%2211%22%20y2%3D%2214.5%22/%3E%3Cline%20x1%3D%2217%22%20y1%3D%2210%22%20x2%3D%2216%22%20y2%3D%2213.5%22/%3E%3C/g%3E%3C/svg%3E"); }
.amenity-dryer::before   { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2010%20L14%206%20A5%205%200%200%201%2014%2016%20L4%2010%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%2211%22%20x2%3D%226%22%20y2%3D%2219%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Cg%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2216%22%20y1%3D%228.5%22%20x2%3D%2220%22%20y2%3D%227.5%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%2211%22%20x2%3D%2220.5%22%20y2%3D%2211%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%2213.5%22%20x2%3D%2220%22%20y2%3D%2214.5%22/%3E%3C/g%3E%3C/svg%3E"); }
.amenity-kettle::before  { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cellipse%20cx%3D%2211%22%20cy%3D%2214%22%20rx%3D%227%22%20ry%3D%225%22%20fill%3D%22none%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.7%22/%3E%3Cpath%20d%3D%22M18%2012l4-2%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M4%2012a3%203%200%200%200%200%206%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22/%3E%3Cline%20x1%3D%2211%22%20y1%3D%229%22%20x2%3D%2211%22%20y2%3D%226%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%225%22%20r%3D%221.1%22%20fill%3D%22%23b08948%22/%3E%3C/svg%3E"); }
.amenity-carafe::before  { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%203h4v3.5l2.5%204.5a4%204%200%200%201%20.5%202V19a2%202%200%200%201-2%202h-6a2%202%200%200%201-2-2v-6a4%204%200%200%201%20.5-2L9.5%206.5V3Z%22%20fill%3D%22none%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22/%3E%3Cline%20x1%3D%229.5%22%20y1%3D%226.5%22%20x2%3D%2214.5%22%20y2%3D%226.5%22%20stroke%3D%22%23b08948%22%20stroke-width%3D%221.6%22/%3E%3C/svg%3E"); }

.room-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* -------------------------------------------------------------
   9. GALERIE PHOTOS
   ------------------------------------------------------------- */
/* Galerie en SECTIONS titrees, tuiles au format fixe :
   l'ordre du code est celui qu'on lit a l'ecran, et le recadrage
   `cover` supprime les blancs qu'on avait avec les colonnes CSS. */
.gallery-cat + .gallery-cat { margin-top: 56px; }

.gallery-cat-title {
  font-size: 1.5rem;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
}

.gallery-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery-tile { aspect-ratio: 4 / 3; }
.gallery-tile picture { display: block; width: 100%; height: 100%; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; }

/* la premiere image de chaque section occupe deux colonnes */
.gallery-tiles > .gallery-tile:first-child { grid-column: span 2; aspect-ratio: 8 / 3; }

@media (max-width: 900px) {
  .gallery-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gallery-tiles > .gallery-tile:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  .gallery-cat + .gallery-cat { margin-top: 40px; }
  .gallery-cat-title { font-size: 1.25rem; }
}

@media (max-width: 560px) {
  .gallery-tiles { grid-template-columns: 1fr; }
  .gallery-tile, .gallery-tiles > .gallery-tile:first-child { aspect-ratio: 4 / 3; grid-column: auto; }
}

.gallery-grid {
  column-count: 3;
  column-gap: 16px;
}

.gallery-grid > a {
  break-inside: avoid;
  margin-bottom: 16px;
}

.gallery-grid a, .gallery-tile {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(27,23,20,0.06);
}

.gallery-grid img, .gallery-tile img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-grid a:hover img, .gallery-tile:hover img { transform: scale(1.06); }

@media (max-width: 900px) { .gallery-grid { column-count: 2; } }
@media (max-width: 560px) { .gallery-grid { column-count: 1; } }

/* -------------------------------------------------------------
   10. QUARTIER / LISTES D'ATTRACTIONS
   ------------------------------------------------------------- */
.poi-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
}

.poi-list li {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: 0.95rem;
}

.poi-list li span {
  color: var(--color-ink-soft);
  font-size: 0.85rem;
}

.category-card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-soft);
}

.category-card .eyebrow { margin-bottom: 10px; }

/* Cartes chambres (accueil) avec photo en haut */
a.category-card--photo {
  display: block;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
a.category-card--photo:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(27, 23, 20, 0.12);
}
.category-card-media {
  height: 200px;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.category-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.category-card-body {
  padding: 22px 24px 26px;
}
.category-card--photo .category-card-body .eyebrow { margin-bottom: 8px; }
.category-card--photo h3 { margin-bottom: 8px; }
@media (max-width: 560px) {
  .category-card-media { height: 180px; }
}

/* Sous-navigation des pages "Le quartier" (Restaurants, Shopping, etc.) */
.quartier-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--color-line);
}

.quartier-subnav a {
  font-size: 0.85rem;
  padding: 8px 16px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-soft);
  transition: var(--transition);
}

.quartier-subnav a:first-child {
  color: var(--color-accent);
  border-color: var(--color-accent);
  font-family: var(--font-display);
}

.quartier-subnav a:hover {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

/* Cartes "Découvrir le quartier" sur quartier.html, liens vers les sous-pages */
.quartier-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.quartier-card {
  display: block;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}

.quartier-card:hover { transform: translateY(-4px); }

/* mobile : les cartes du quartier passaient hors de l'ecran */
@media (max-width: 900px) { .quartier-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 620px) { .quartier-cards { grid-template-columns: 1fr; } }

.quartier-card h3 { margin: 6px 0 8px; font-size: 1.1rem; }

.quartier-card p { font-size: 0.88rem; margin: 0; }

.quartier-card .arrow {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Plan schématique du quartier (bas de la page "Le quartier") */
.schema-map {
  max-width: 760px;
  margin: 0 auto;
  display: block;
}

.schema-map text { font-family: var(--font-body); }

.schema-map .place-label { fill: var(--color-ink); font-size: 12.5px; }
.schema-map .place-time { fill: var(--color-ink-soft); font-size: 10.5px; }
.schema-map .hotel-label { fill: var(--color-white); font-family: var(--font-display); font-size: 11px; }

/* Liste FAQ (page questions fréquentes) */
.faq-list { margin-top: 30px; }

.faq-item {
  border-bottom: 1px solid var(--color-line);
  padding: 18px 0;
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: var(--transition);
}

.faq-item[open] summary::after { content: "\2212"; }

.faq-item p { margin-top: 12px; }

/* -------------------------------------------------------------
   11. CONTACT / FORMULAIRE / ACCÈS
   ------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.info-card {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line);
}

.info-card .icon {
  color: var(--color-accent);
  font-size: 1.2rem;
}

.info-card h4 { margin-bottom: 4px; font-family: var(--font-body); font-weight: 600; }

.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  color: var(--color-ink-soft);
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-white);
}

.form-field textarea { min-height: 130px; resize: vertical; }

.map-frame {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* -------------------------------------------------------------
   12. PIED DE PAGE
   ------------------------------------------------------------- */
.site-footer {
  background: var(--color-dark);
  color: rgba(255,255,255,0.75);
  padding: 70px 0 26px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer-grid h4 {
  color: var(--color-white);
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.footer-grid .logo { color: var(--color-white); margin-bottom: 14px; }

.footer-grid ul li { margin-bottom: 10px; font-size: 0.9rem; }

.footer-grid ul li a:hover { color: var(--color-accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 0.8rem;
  flex-wrap: wrap;
  gap: 10px;
}

/* -------------------------------------------------------------
   13. RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 900px) {
  .split,
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .room-card { grid-template-columns: 1fr; }
  .room-card:nth-child(even) .room-card-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .poi-list { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   BOUTON FLOTTANT WHATSAPP
   Injecté automatiquement sur toutes les pages par js/script.js
   (voir section correspondante dans ce fichier JS). Pour changer
   le numéro, modifie-le dans js/script.js, pas ici.
   ------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform var(--transition), box-shadow var(--transition);
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.32);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
}

@media (max-width: 720px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
}

/* ---------------------------------------------------------------
   BANDEAU PARKING (haut de page)
   Injecté automatiquement sur toutes les pages par js/script.js.
   Met en avant l'offre de réservation de parking (-10% Onepark).
   ------------------------------------------------------------- */
.parking-banner {
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  padding: 10px 44px 10px 16px;
  position: relative;
}

.parking-banner a.parking-banner-link {
  color: var(--color-white);
  text-decoration: underline;
  font-weight: 600;
  margin-left: 6px;
}

.parking-banner .parking-banner-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  padding: 4px;
}

.parking-banner .parking-banner-close:hover { opacity: 1; }

@media (max-width: 640px) {
  .parking-banner { font-size: 0.76rem; padding: 9px 40px 9px 12px; }
}

/* ---------------------------------------------------------------
   COMPARATIF DE TARIFS — section de page (accueil).
   Remplace l'ancien bandeau flottant : plus lisible, plus élégant,
   et il ne recouvre plus rien.
   Les MONTANTS se modifient directement dans index.html.
   ------------------------------------------------------------- */
.compare-section { background: var(--color-bg-alt); }

.compare-card {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
}

.compare-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.compare-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 34px 14px 30px;
  text-align: center;
  border-right: 1px solid var(--color-line);
}
.compare-price:last-child { border-right: none; }

.compare-source {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.compare-amount {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* la colonne « site officiel » : c'est elle qu'on doit voir en premier */
.compare-price.is-best {
  background: #fdfaf4;
  box-shadow: inset 0 3px 0 var(--color-accent);
}
.compare-price.is-best .compare-source { color: var(--color-ink); font-weight: 600; }
.compare-price.is-best .compare-amount { color: var(--color-ink); font-size: 2.6rem; }

.compare-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 999px;
  padding: 3px 12px;
}

.compare-note {
  font-size: 0.74rem;
  color: var(--color-ink-soft);
  line-height: 1.4;
  max-width: 190px;
}

/* le chiffre-clé : l'économie */
.compare-saving {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 30px 26px;
  background: var(--color-dark);
  color: var(--color-white);
}

.compare-saving-figure {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.compare-saving-label {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

.compare-saving-sub {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.45;
  margin-bottom: 14px;
}

.compare-saving .btn { width: 100%; }

.compare-snapshot {
  max-width: 720px;
  margin: 22px auto 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-ink);
  text-align: center;
  font-weight: 500;
}

.compare-legal {
  max-width: 980px;
  margin: 12px auto 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  text-align: center;
  padding: 12px 16px;
  background: rgba(176, 137, 72, 0.08);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

@media (max-width: 860px) {
  .compare-card { grid-template-columns: 1fr; }
  .compare-prices { grid-template-columns: 1fr; }
  .compare-price {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 16px 20px;
    border-right: none;
    border-bottom: 1px solid var(--color-line);
  }
  .compare-price.is-best { box-shadow: inset 3px 0 0 var(--color-accent); }
  .compare-amount { font-size: 1.5rem; }
  .compare-price.is-best .compare-amount { font-size: 1.8rem; }
  .compare-badge { flex-basis: 100%; text-align: center; }
  .compare-note { flex-basis: 100%; max-width: none; }
  .compare-saving-figure { font-size: 2.6rem; }
}

/* -------------------------------------------------------------
   LIGHTBOX (visionneuse plein écran pour la galerie photo)
   ------------------------------------------------------------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 40px;
}

.lightbox-overlay.visible { display: flex; }

.lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: var(--radius);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 34px;
  color: var(--color-white);
  font-size: 2.2rem;
  cursor: pointer;
  line-height: 1;
}

/* Menu hamburger dès ~tablette : 7 liens + langue + Réserver
   ne tiennent plus confortablement sous ~1024 px. */
@media (max-width: 1024px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    padding: 18px 24px;
    gap: 16px;
    border-bottom: 1px solid var(--color-line);
    display: none;
  }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
  .phone-link { display: none; }
  .logo img { height: 42px; }
  .header-inner { position: relative; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
}

/* Note sous chaque categorie de chambre (lit d'appoint) */
.room-note {
  display: block;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  margin: 14px 0 18px;
  padding: 9px 12px;
  background: var(--color-bg-alt);
  border-left: 2px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.45;
}

/* Avertissement de traduction en haut des pages légales */
.legal-notice {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  background: var(--color-bg-alt);
  border-left: 2px solid var(--color-accent);
  padding: 10px 14px;
  margin-bottom: 32px;
}

/* ---------------------------------------------------------------
   MOTEUR DE RÉSERVATION (barre de recherche sous le héro)
   C'est l'élément le plus important du site pour la conversion :
   il évite au visiteur de ressaisir ses dates sur le moteur.
   ------------------------------------------------------------- */
.booking-bar-wrap {
  max-width: 1040px;
  margin: -52px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 20;
}

.booking-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: 14px;
  align-items: end;
  background: var(--color-white);
  padding: 20px 22px;
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(27,23,20,0.16);
  border-top: 3px solid var(--color-accent);
}

.booking-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.booking-field label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.booking-field input,
.booking-field select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 11px 12px;
  width: 100%;
}

.booking-field input:focus,
.booking-field select:focus { outline: none; border-color: var(--color-accent); }

.booking-submit { white-space: nowrap; padding: 14px 26px; }

.booking-reassure {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  margin-top: 12px;
}

@media (max-width: 980px) {
  .booking-bar-wrap { margin-top: -26px; padding: 0 16px; }
  .booking-bar { grid-template-columns: 1fr 1fr; padding: 16px; }
  .booking-field:nth-child(3) { grid-column: span 2; }
  .booking-submit { grid-column: span 2; width: 100%; }
}

/* ---------------------------------------------------------------
   BANDEAU DE PREUVE SOCIALE (notes réelles des plateformes)
   ------------------------------------------------------------- */
.trust-bar {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
  padding: 26px 0;
  margin-top: 34px;
}

.trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 34px;
}

.trust-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.trust-item { display: flex; align-items: baseline; gap: 8px; }

.trust-item strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-ink);
  line-height: 1;
}

.trust-item strong span { font-size: 0.85rem; color: var(--color-ink-soft); }

.trust-item em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--color-ink-soft);
}

.trust-item:hover strong,
.trust-item:hover em { color: var(--color-accent-dark); }

.trust-awards { font-size: 0.78rem; color: var(--color-ink-soft); font-style: italic; }

.trust-item--text {
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-accent);
  font-style: normal;
  align-self: center;
}
.trust-item--text:hover { color: var(--color-accent-dark); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}
.form-actions .btn { border: none; }
.form-note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
}

@media (max-width: 780px) {
  .trust-inner { gap: 10px 20px; }
  .trust-item strong { font-size: 1.2rem; }
  .trust-awards { width: 100%; text-align: center; }
}

/* Bloc « pourquoi réserver en direct » */
.direct-grid { gap: 26px 40px; }

.direct-item {
  border-left: 2px solid var(--color-accent);
  padding: 4px 0 4px 20px;
}

.direct-item h3 { font-size: 1.1rem; margin-bottom: 8px; }
.direct-item p { font-size: 0.94rem; }

@media (max-width: 900px) { .direct-grid { gap: 22px; } }

/* ---------------------------------------------------------------
   CONSENTEMENT COOKIES (RGPD) + carte Google chargée seulement
   après acceptation. Le choix est mémorisé dans le navigateur.
   ------------------------------------------------------------- */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  background: var(--color-white);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 -8px 30px rgba(27,23,20,0.18);
  padding: 14px 24px;
}

.cookie-consent p { font-size: 0.82rem; margin: 0; flex: 1 1 340px; }
.cookie-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cookie-consent .btn { padding: 10px 20px; font-size: 0.74rem; }
.cookie-consent a { font-size: 0.78rem; text-decoration: underline; color: var(--color-ink-soft); }

/* tant que le visiteur n'a pas répondu, le comparateur laisse la place */

@media (max-width: 700px) {
  .cookie-consent { padding: 12px 16px; }
  .cookie-consent p { font-size: 0.76rem; }
}

.map-consent {
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 44px 24px;
  text-align: center;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.map-consent-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-ink); margin-bottom: 6px; }
.map-consent-text { font-size: 0.88rem; max-width: 420px; margin-bottom: 18px; }

/* -------------------------------------------------------------
   TRANSFERT AÉROPORT — bloc d'appel à l'action
   ------------------------------------------------------------- */
.transfer-section { padding: 64px 0; }

.transfer-cta {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 26px;
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: 32px 36px;
  box-shadow: var(--shadow-soft);
}

.transfer-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(176, 137, 72, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.transfer-icon svg { width: 30px; height: 30px; fill: var(--color-accent); }

.transfer-text .eyebrow { color: var(--color-accent); margin-bottom: 6px; }
.transfer-text h2 { color: var(--color-white); font-size: 1.6rem; margin-bottom: 8px; }
.transfer-text p { color: rgba(255,255,255,0.78); font-size: 0.94rem; margin: 0; }
.transfer-note { font-size: 0.76rem !important; color: rgba(255,255,255,0.5) !important; margin-top: 8px !important; }

.transfer-btn { white-space: nowrap; }

@media (max-width: 860px) {
  .transfer-section { padding: 44px 0; }
  .transfer-cta { grid-template-columns: 1fr; gap: 16px; padding: 26px 22px; text-align: left; }
  .transfer-text h2 { font-size: 1.3rem; }
  .transfer-btn { width: 100%; text-align: center; }
}



/* -------------------------------------------------------------
   WIDGET TARIFS — carte fixe à gauche, repliable
   ------------------------------------------------------------- */
.rate-widget {
  position: fixed;
  left: 0;
  top: 38%;
  z-index: 90;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.28s ease;
}
.rate-widget.is-collapsed {
  transform: translateX(calc(-100% + 28px));
}
.rate-widget__panel {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
}
.rate-widget__inner {
  pointer-events: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-soft);
  padding: 14px 14px 12px;
  width: 168px;
  font-size: 0.72rem;
}
.rate-widget__toggle {
  pointer-events: auto;
  align-self: center;
  width: 28px;
  min-height: 72px;
  margin: 0;
  padding: 8px 0;
  border: 1px solid var(--color-line);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--color-accent);
  color: var(--color-white);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  box-shadow: var(--shadow-soft);
}
.rate-widget__toggle:hover { background: var(--color-accent-dark); }
.rate-widget__date {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  display: block;
  margin-bottom: 8px;
}
.rate-widget__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  color: var(--color-ink-soft);
}
.rate-widget__row span {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rate-widget__row b {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.rate-widget__best {
  background: #fdfaf4;
  margin: 0 -6px;
  padding: 6px 6px;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
}
.rate-widget__best span { font-weight: 600; color: var(--color-ink); }
.rate-widget__best b {
  color: var(--color-accent-dark);
  font-size: 1.15rem;
  font-weight: 600;
}
.rate-widget__cta {
  display: block;
  text-align: center;
  background: var(--color-accent);
  color: var(--color-white);
  text-decoration: none;
  padding: 9px 8px;
  margin-top: 10px;
  border-radius: var(--radius);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.rate-widget__cta:hover { background: var(--color-accent-dark); color: var(--color-white); }
.rate-widget__foot {
  font-size: 0.58rem;
  line-height: 1.35;
  color: var(--color-ink-soft);
  margin: 8px 0 0;
}
@media (max-width: 780px) {
  .rate-widget { display: none; }
}


/* -------------------------------------------------------------
   AVIS CLIENTS — scores sobres (Google + TripAdvisor + Booking)
   ------------------------------------------------------------- */
.reviews-scores {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.reviews-score-card {
  display: block;
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 28px 22px 22px;
  text-align: center;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.reviews-score-card:hover {
  box-shadow: var(--shadow-soft);
  border-color: var(--color-accent);
}
.reviews-score-card h3 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  margin: 8px 0 10px;
  color: var(--color-ink);
}
.reviews-score-card p {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin: 0;
}
.reviews-booking-muted {
  text-align: center;
  font-size: 0.78rem;
  color: #9a9a9a;
  margin: 22px 0 0;
}
.reviews-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.review-quote {
  margin: 0;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-quote .review-text {
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0;
}
.review-quote .review-meta {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}
@media (max-width: 640px) {
  .reviews-scores { grid-template-columns: 1fr; }
  .reviews-quotes { grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------
   AVIS CLIENTS — grille de témoignages (remplace l'ancien
   carrousel : plusieurs avis visibles d'un coup, aucune flèche).
   ------------------------------------------------------------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.review-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review-rating {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 999px;
  padding: 3px 11px;
}

.review-text {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-ink);
  margin: 0;
  flex: 1 1 auto;
}

.review-meta {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  border-top: 1px solid var(--color-line);
  padding-top: 12px;
}
.review-source { display: block; font-size: 0.74rem; margin-top: 2px; }
.review-meta a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 980px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .reviews-grid { grid-template-columns: 1fr; gap: 16px; } }

/* grille à 4 colonnes (notes Google / Booking / TripAdvisor / Kayak) */
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid--4 { grid-template-columns: 1fr; } }

/* la barre de confiance passe à 4 notes : on serre un peu */
@media (max-width: 1180px) {
  .trust-inner { gap: 14px 20px; }
}

/* -------------------------------------------------------------
   TRES PETITS ECRANS (iPhone SE et assimiles, 320-400 px)
   L'en-tete debordait : le selecteur de langue et le bouton
   « Réserver » sont resserres, jamais supprimes.
   ------------------------------------------------------------- */
@media (max-width: 400px) {
  .header-inner { padding-left: 12px; padding-right: 12px; }
  .header-cta { gap: 7px; }
  .header-cta .btn { padding: 10px 11px; font-size: 0.64rem; letter-spacing: 0.02em; }
  .lang-switcher select { font-size: 0.66rem; padding: 5px 4px; max-width: 92px; }
  .logo img { max-height: 42px; }
  .nav-toggle { font-size: 1.3rem; padding: 0 2px; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* les distinctions de la barre de confiance sont des liens : ça doit se voir */
.trust-awards a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-accent);
}
.trust-awards a:hover { color: var(--color-accent-dark); }