/* ==========================================================
   Secret Love Suites — feuille de style
   Mobile d'abord : les règles de base visent le téléphone,
   les @media plus bas adaptent aux écrans plus grands.
   ========================================================== */

/* ---------- Polices (hébergées sur le site, aucun appel externe) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Couleurs et réglages généraux ---------- */
:root {
  --noir: #0c0a0b;
  --fond-2: #171314;
  --fond-3: #211b1c;
  --bordeaux: #7a1f2b;
  --bordeaux-vif: #9e2a3a;
  --or: #c9a86a;
  --or-clair: #e2c992;
  --creme: #f3ece1;
  --creme-doux: #b9ae9f;
  --ligne: rgba(201, 168, 106, 0.22);

  --titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --texte: "Jost", "Helvetica Neue", Arial, sans-serif;

  --marge: 20px;
  --largeur: 1180px;
  --barre: 76px; /* hauteur de la barre « Réserver » fixe sur mobile */
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--creme);
  font-family: var(--texte);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--barre);
}

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

/* Texte lu par les lecteurs d'écran, invisible à l'écran */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--marge);
}
.conteneur--etroit { max-width: 780px; }

.icone {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Petit texte en capitales espacées, au-dessus des titres */
.surtitre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--texte);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 14px;
}
.surtitre .icone { width: 20px; height: 20px; }

.titre-section {
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  margin-bottom: 18px;
}
.titre-section em { font-style: italic; color: var(--or-clair); }

.intro-section {
  color: var(--creme-doux);
  max-width: 36em;
}

/* Clé dorée entre deux filets : le motif de la maison */
.motif-cle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--or);
  margin: 0 auto;
}
.motif-cle::before,
.motif-cle::after {
  content: "";
  width: 64px;
  height: 1px;
  background: var(--ligne);
}
.motif-cle .icone { width: 28px; height: 28px; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border: 1px solid var(--or);
  border-radius: 999px;
  font-family: var(--texte);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--creme);
  background: rgba(12, 10, 11, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  cursor: pointer;
}
.bouton:hover,
.bouton:focus-visible {
  background: var(--or);
  color: var(--noir);
}
.bouton--plein {
  background: var(--bordeaux);
  border-color: var(--bordeaux);
}
.bouton--plein:hover,
.bouton--plein:focus-visible {
  background: var(--bordeaux-vif);
  border-color: var(--bordeaux-vif);
  color: var(--creme);
}
.bouton--petit {
  min-height: 40px;
  padding: 8px 20px;
  font-size: 0.6875rem;
}

:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* ---------- En-tête ---------- */
.entete {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--titre);
  font-size: clamp(1.05rem, 4.4vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.logo__nom { line-height: 1; }
.logo__embleme { width: 40px; height: 40px; flex: none; }
.logo em { font-style: italic; font-weight: 500; color: var(--or-clair); }
.entete nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.entete nav .lien-nav {
  display: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--creme-doux);
  transition: color 0.3s;
}
.entete nav .lien-nav:hover { color: var(--or-clair); }

/* ---------- Barre « Réserver » fixe en bas (mobile) ---------- */
.barre-resa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--barre);
  padding: 12px var(--marge) calc(12px + env(safe-area-inset-bottom));
  background: rgba(12, 10, 11, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--ligne);
}
.barre-resa__info {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--creme-doux);
}
.barre-resa__info strong {
  display: block;
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--or-clair);
}
.barre-resa__info { min-width: 0; margin: 0; }
.barre-resa .bouton {
  min-height: 46px;
  padding: 10px 18px;
  flex: none;
  letter-spacing: 0.12em;
}

/* Très petits téléphones (iPhone SE de 1re génération, 320 px) :
   l'en-tête dépassait de quelques pixels et créait un défilement latéral. */
@media (max-width: 359px) {
  .logo { gap: 8px; font-size: 1rem; }
  .logo__embleme { width: 34px; height: 34px; }
  .entete .bouton--petit { padding-left: 14px; padding-right: 14px; letter-spacing: 0.08em; }
  .barre-resa__info strong { font-size: 1.1rem; white-space: nowrap; }
  .barre-resa .bouton { padding: 10px 14px; letter-spacing: 0.08em; }
}

/* Cibles tactiles : 44 px minimum dans l'en-tête (recommandation mobile) */
.entete .logo,
.entete .bouton--petit { min-height: 44px; }
.entete .bouton--petit { display: inline-flex; align-items: center; }

/* ---------- Héro de l'accueil ---------- */
.hero {
  position: relative;
  /* on retire la hauteur de la barre « Réserver » fixe, sinon elle recouvre le bouton */
  min-height: calc(100vh - var(--barre));
  min-height: calc(100svh - var(--barre));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% center;
}
/* Voile sombre pour garder le texte lisible sur la photo */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(12,10,11,0.7) 0%, rgba(12,10,11,0.05) 28%, rgba(12,10,11,0.35) 42%, rgba(12,10,11,0.85) 64%, rgba(12,10,11,0.96) 88%, var(--noir) 100%);
}
.hero__contenu {
  padding-bottom: 56px;
  padding-top: 120px;
}
.hero h1 {
  font-size: clamp(3.1rem, 13vw, 6.5rem);
  font-weight: 500;
  line-height: 0.95;
  margin-bottom: 22px;
}
.hero h1 em { display: block; font-style: italic; color: var(--or-clair); }
.hero__accroche {
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(1.45rem, 5vw, 1.9rem);
  line-height: 1.3;
  max-width: 20em;
  color: var(--creme);
  margin-bottom: 10px;
}
.hero__sous-titre {
  max-width: 28em;
  color: var(--creme-doux);
  margin-bottom: 30px;
}
.hero__sous-titre strong { font-weight: 400; color: var(--or-clair); }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section--sombre { background: var(--fond-2); }
.section__entete { margin-bottom: 44px; }
.section__entete--centre { text-align: center; }
.section__entete--centre .surtitre { justify-content: center; }
.section__entete--centre .intro-section { margin: 0 auto; }

/* ---------- Vignettes des suites ---------- */
.suites {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.suites > li { display: flex; }
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  background: var(--fond-2);
  border-radius: 4px;
  overflow: hidden;
}
.section--sombre .carte { background: var(--fond-3); }
.carte__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fond-3);
}
.carte__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.carte:hover .carte__photo img { transform: scale(1.05); }
.carte__texte {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
}
.carte__nom {
  font-size: 2rem;
  margin-bottom: 6px;
}
.carte__question {
  font-family: var(--titre);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--or-clair);
  margin-bottom: 18px;
}
.carte__bas {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ligne);
}
.carte__prix {
  font-size: 0.875rem;
  color: var(--creme-doux);
}
.carte__prix strong {
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--or-clair);
}
.carte__lien {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
  white-space: nowrap;
}
.pastille {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--creme);
  background: rgba(122, 31, 43, 0.88);
  border-radius: 999px;
}

/* Petites vignettes (bas des pages chambres) */
.suites--compactes { grid-template-columns: 1fr 1fr; gap: 16px; }
.suites--compactes .carte__texte { padding: 14px 14px 16px; }
.suites--compactes .carte__nom { font-size: 1.3rem; margin-bottom: 4px; }
.suites--compactes .carte__question { display: none; }
.suites--compactes .carte__bas { padding-top: 10px; }
.suites--compactes .carte__lien { display: none; }
.suites--compactes .carte__prix strong { font-size: 1.2rem; }
.suites--compactes .pastille { top: 10px; left: 10px; font-size: 0.625rem; padding: 4px 9px; }

/* ---------- Votre nuit en 3 temps ---------- */
.etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.etape {
  position: relative;
  padding: 30px 0 30px 64px;
  border-top: 1px solid var(--ligne);
}
.etape__icone {
  position: absolute;
  left: 0;
  top: 30px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  color: var(--or);
}
.etape__icone .icone { width: 22px; height: 22px; }
.etape__moment {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 6px;
}
.etape h3 { font-size: 1.9rem; margin-bottom: 8px; }
.etape p { color: var(--creme-doux); margin: 0; }

/* ---------- Atouts (L'expérience) ---------- */
.atouts {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: atout;
}
.atout {
  padding: 28px 0;
  border-top: 1px solid var(--ligne);
  counter-increment: atout;
}
.atout::before {
  content: "0" counter(atout);
  display: block;
  font-family: var(--titre);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--or);
  margin-bottom: 8px;
}
.atout h3 { font-size: 1.75rem; margin-bottom: 8px; }
.atout p { color: var(--creme-doux); margin: 0; }

/* ---------- Grille d'icônes (inclus / équipements) ---------- */
.icones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.icones li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  font-size: 0.9375rem;
  line-height: 1.35;
  background: var(--fond-2);
  border: 1px solid var(--ligne);
  border-radius: 4px;
}
.section--sombre .icones li { background: var(--fond-3); }
.icones .icone { color: var(--or); width: 26px; height: 26px; }

/* ---------- Comparatif ---------- */
.tableau-defile {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--marge) * -1);
  padding: 0 var(--marge);
}
.comparatif {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.comparatif caption {
  text-align: left;
  font-size: 0.8125rem;
  color: var(--creme-doux);
  caption-side: bottom;
  padding-top: 14px;
}
.comparatif th,
.comparatif td {
  padding: 16px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--ligne);
}
.comparatif thead th {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
}
.comparatif tbody th {
  font-family: var(--titre);
  font-size: 1.35rem;
  font-weight: 500;
  white-space: nowrap;
}
.comparatif tbody th a { color: var(--creme); font-size: inherit; letter-spacing: 0; text-decoration: none; }
.comparatif tbody th a:hover { color: var(--or-clair); }
.comparatif td { color: var(--creme-doux); }
.comparatif .prix { font-family: var(--titre); font-size: 1.3rem; font-weight: 600; color: var(--or-clair); white-space: nowrap; }
.comparatif .oui { color: var(--or-clair); }

@media (max-width: 699px) {
  /* Sur téléphone, « Ambiance » et « Le petit plus » disparaissent : sans cela
     le prix et le lien Airbnb sortent de l'écran sans que rien ne l'indique. */
  .comparatif .col-detail { display: none; }
  .comparatif { min-width: 0; }
  .comparatif th,
  .comparatif td { padding: 14px 7px; }
  .comparatif th:first-child,
  .comparatif td:first-child { padding-left: 0; }
  .comparatif th:last-child,
  .comparatif td:last-child { padding-right: 0; text-align: right; }
  .comparatif tbody th { font-size: 1.2rem; }
}

.comparatif td a { color: var(--or); font-size: 0.8125rem; letter-spacing: 0.08em; white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  font-family: var(--titre);
  font-size: 1.45rem;
  line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--texte);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--or);
  transition: transform 0.3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--creme-doux); padding: 0 0 22px; margin: 0; max-width: 42em; }
.faq details a { color: var(--or); }

/* ---------- Où sommes-nous ---------- */
.acces {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.acces__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.acces__liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ligne);
}
.acces__liste li:first-child { border-top: 1px solid var(--ligne); }
.acces__ville {
  font-family: var(--titre);
  font-size: 1.6rem;
  text-decoration: none;
}
a.acces__ville:hover { color: var(--or-clair); }
.acces__duree {
  font-size: 0.9375rem;
  color: var(--creme-doux);
  text-align: right;
}
.acces__note {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: var(--creme-doux);
  opacity: 0.8;
}
.acces__train {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--ligne);
  border-radius: 4px;
  color: var(--creme-doux);
}
.acces__train strong { color: var(--creme); font-weight: 400; }
.lien-or {
  display: inline-block;
  color: var(--or);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

/* ---------- Liens vers les autres pages (occasions, alentours) ---------- */
.tuiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tuile {
  display: block;
  height: 100%;
  padding: 26px 24px;
  text-decoration: none;
  border: 1px solid var(--ligne);
  border-radius: 4px;
  transition: border-color 0.3s, background 0.3s;
}
.tuile:hover { border-color: var(--or); background: var(--fond-2); }
.tuile h3 { font-size: 1.7rem; margin-bottom: 6px; }
.tuile p { color: var(--creme-doux); margin: 0 0 14px; font-size: 0.9375rem; }
.tuile span { color: var(--or); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }

/* ---------- Pages chambres ---------- */
.hero-suite {
  position: relative;
  min-height: 78vh;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}
.hero-suite .hero__photo img { object-position: center; }
.hero-suite::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(12,10,11,0.65) 0%, rgba(12,10,11,0) 30%, rgba(12,10,11,0.3) 55%, rgba(12,10,11,0.95) 90%, var(--noir) 100%);
}
.hero-suite .conteneur { padding-top: 110px; padding-bottom: 44px; }
.hero-suite h1 { font-size: clamp(2.8rem, 11vw, 5.5rem); margin-bottom: 12px; }
.hero-suite .pastille { position: static; display: inline-block; margin-bottom: 16px; }
.fil {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--creme-doux);
  margin-bottom: 14px;
}
.fil a { text-decoration: none; color: var(--or); }

.suite-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.suite-intro__texte p:first-child::first-letter {
  float: left;
  font-family: var(--titre);
  font-size: 4.2rem;
  line-height: 0.8;
  padding: 6px 10px 0 0;
  color: var(--or-clair);
}
.suite-intro__texte p { font-size: 1.125rem; }
.encart {
  padding: 28px 24px;
  border: 1px solid var(--ligne);
  border-radius: 4px;
  background: var(--fond-2);
  align-self: start;
}
.encart__prix { font-size: 0.9375rem; color: var(--creme-doux); margin-bottom: 18px; }
.encart__prix strong {
  font-family: var(--titre);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--or-clair);
}
.encart .bouton { width: 100%; }
.encart ul { list-style: none; margin: 22px 0 0; padding: 0; font-size: 0.9375rem; color: var(--creme-doux); }
.encart li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.encart .icone { color: var(--or); width: 20px; height: 20px; }
.encart__note { margin: 14px 0 0; font-size: 0.8125rem; color: var(--creme-doux); text-align: center; }

.galerie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.galerie li:first-child { grid-column: 1 / -1; }
.galerie a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: var(--fond-3);
}
.galerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.galerie a:hover img { transform: scale(1.04); }

/* Visionneuse photo plein écran */
.visionneuse {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 6, 7, 0.97);
  color: var(--creme);
}
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse::backdrop { background: rgba(8, 6, 7, 0.97); }
.visionneuse img {
  max-width: 100vw;
  max-height: 86vh;
  max-height: 86dvh;
  object-fit: contain;
}
.visionneuse button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  background: rgba(12, 10, 11, 0.6);
  color: var(--creme);
  font-family: var(--texte);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.visionneuse button:hover { border-color: var(--or); color: var(--or-clair); }
.v-fermer { top: 16px; right: 16px; }
.v-prec { left: 12px; top: 50%; transform: translateY(-50%); }
.v-suiv { right: 12px; top: 50%; transform: translateY(-50%); }
.v-compteur {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--creme-doux);
}

.appel {
  text-align: center;
  padding: 96px 0;
  background:
    radial-gradient(ellipse at center, rgba(122,31,43,0.35) 0%, rgba(12,10,11,0) 70%),
    var(--noir);
}
.appel h2 { font-size: clamp(2.2rem, 7vw, 3.4rem); margin: 22px 0 14px; }
.appel h2 em { font-style: italic; color: var(--or-clair); }
.appel p { color: var(--creme-doux); margin: 0 auto 30px; max-width: 30em; }

/* ---------- Pages de contenu (occasions, villes, alentours, mentions) ---------- */
.page-titre {
  padding: 140px 0 56px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(122,31,43,0.4) 0%, rgba(12,10,11,0) 60%),
    var(--noir);
}
.page-titre h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); margin-bottom: 18px; }
.page-titre h1 em { font-style: italic; color: var(--or-clair); }
.page-titre .intro-section { font-size: 1.125rem; }

.texte { font-size: 1.0625rem; }
.texte h2 { font-size: clamp(1.9rem, 6vw, 2.6rem); margin: 56px 0 16px; }
.texte h2:first-child { margin-top: 0; }
.texte h2 em { font-style: italic; color: var(--or-clair); }
.texte h3 { font-size: 1.6rem; margin: 32px 0 10px; }
.texte p, .texte li { color: var(--creme-doux); }
.texte strong { color: var(--creme); font-weight: 400; }
.texte ul { padding-left: 1.2em; }
.texte li { margin-bottom: 8px; }
.texte a { color: var(--or); }

.chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 0 40px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  border-radius: 4px;
  overflow: hidden;
}
.chiffres div { background: var(--noir); padding: 20px 12px; text-align: center; }
.chiffres strong {
  display: block;
  font-family: var(--titre);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--or-clair);
  line-height: 1.1;
}
.chiffres span { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--creme-doux); }

.lieux { list-style: none; margin: 0; padding: 0; }
.lieu { padding: 30px 0; border-top: 1px solid var(--ligne); }
.lieu__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.lieu h2 { font-size: 1.9rem; margin: 0; }
.lieu__distance { font-size: 0.875rem; color: var(--or); white-space: nowrap; }
.lieu p { color: var(--creme-doux); margin: 0; }

.a-completer {
  color: var(--or-clair);
  background: rgba(201, 168, 106, 0.12);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ---------- Pied de page ---------- */
.pied {
  padding: 64px 0 40px;
  border-top: 1px solid var(--ligne);
  color: var(--creme-doux);
  font-size: 0.875rem;
}
.pied__haut { text-align: center; margin-bottom: 44px; }
.pied__haut .logo {
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  font-size: 1.7rem;
  color: var(--creme);
  margin: 0 0 10px;
}
.pied__haut .logo__embleme { width: 88px; height: 88px; }
.pied__haut p { margin: 0; }
.pied__liens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 20px;
  margin-bottom: 44px;
}
.pied__liens h2 {
  font-family: var(--texte);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 12px;
}
.pied__liens ul { list-style: none; margin: 0; padding: 0; }
.pied__liens li { margin-bottom: 8px; }
.pied a { color: var(--creme-doux); text-decoration: none; }
.pied a:hover { color: var(--or-clair); }
.pied__bas { text-align: center; padding-top: 24px; border-top: 1px solid var(--ligne); font-size: 0.8125rem; }
.pied__bas a { text-decoration: underline; }

/* ==========================================================
   Écrans plus grands
   ========================================================== */
@media (min-width: 640px) {
  :root { --marge: 32px; }
  .suites { grid-template-columns: repeat(2, 1fr); }
  .suites--compactes { grid-template-columns: repeat(3, 1fr); }
  .atouts { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
  .icones { grid-template-columns: repeat(3, 1fr); }
  .tuiles { grid-template-columns: repeat(3, 1fr); }
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .galerie li:first-child { grid-column: span 2; grid-row: span 2; }
  .galerie li:first-child a { aspect-ratio: auto; height: 100%; }
  .pied__liens { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 960px) {
  :root { --marge: 48px; --barre: 0px; }
  .barre-resa { display: none; }
  .entete nav .lien-nav { display: inline; }
  .section { padding: 120px 0; }
  .hero { align-items: center; }
  .hero__contenu { padding-bottom: 0; padding-top: 0; }
  .hero::after {
    background:
      linear-gradient(to right, rgba(12,10,11,0.9) 0%, rgba(12,10,11,0.5) 45%, rgba(12,10,11,0.05) 75%),
      linear-gradient(to bottom, rgba(12,10,11,0.5) 0%, rgba(12,10,11,0) 25%, rgba(12,10,11,0) 80%, var(--noir) 100%);
  }
  .suites { grid-template-columns: repeat(3, 1fr); }
  .suites--compactes { grid-template-columns: repeat(5, 1fr); }
  .etapes { grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
  .etape { padding: 30px 0 0; }
  .etape__icone { position: static; margin-bottom: 20px; }
  .atouts { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
  .acces { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .suite-intro { grid-template-columns: 1.6fr 1fr; gap: 72px; }
  .encart { position: sticky; top: 32px; }
  .hero-suite .conteneur { padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}