/* Riad Jasmine, maison d'hôtes, médina de Rabat
   Design system. Every colour comes from the riad itself:
   Crème #F0E4D2 and Brun #3E2418 are the two tones of their logo,
   Bois #2A140C is the carved cedar of their doors, Bleu #1B3A8A is the
   cobalt of their zellige, curtains and washbasin (used as a whisper only).
   EB Garamond is the closest web face to the lettering of their logo
   (titles, nav, quotes); Jost carries the text, labels and buttons.
   Motifs: the pointed arch of their front door, which is also their logo,
   drawn in three places only (hero, closing band, booking modal), and the
   jasmine sprig of the logo as a small ornament.
   Nothing on this site is hidden on load: no opacity:0, no scroll reveal.
   Animations only move what is already visible.                         */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* the riad */
  --creme: #F0E4D2;
  --brun: #3E2418;
  --bois: #2A140C;
  --bleu: #1B3A8A;
  /* derived, contrast measured */
  --papier: #F8F2E8;          /* main paper, a lighter cream */
  --sable: #E8D9C2;           /* deeper sand for offset blocks */
  --texte: #3E2418;           /* body text on papier: 12.4:1 */
  --meta: #6B5141;            /* small text: 6.0:1 on papier, 5.3:1 on creme */
  --creme-clair: #F7EFE3;     /* text on bois and on photos */
  --creme-doux: rgba(247, 239, 227, .82);
  --filet: rgba(62, 36, 24, .16);
  --filet-fort: rgba(62, 36, 24, .55);
  --filet-clair: rgba(247, 239, 227, .26);

  --display: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --gout: clamp(20px, 5vw, 60px);
  --section: clamp(80px, 9vw, 136px);
  --t: .35s cubic-bezier(.2, .7, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gout); }
.section { padding: var(--section) 0; }
.section--creme { background: var(--creme); }
.section--bois { background: var(--bois); color: var(--creme-clair); }

/* ------------------------------------------------------------ typography -- */
.h1, .h2, .h3 { font-family: var(--display); font-weight: 400; color: var(--brun); margin: 0; letter-spacing: -.005em; }
.h1 { font-size: clamp(2.5rem, 5.2vw, 4.6rem); line-height: 1.04; text-wrap: balance; }
.h2 { font-size: clamp(2.05rem, 3.6vw, 3.25rem); line-height: 1.08; text-wrap: balance; }
.h3 { font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.15; }
.h1 em, .h2 em { font-style: italic; }

/* the small caps label between two hairlines: the logo's lettering, spaced */
.lbl {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--meta);
}
.lbl::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }
.lead { margin: 22px 0 0; font-size: 1.12rem; line-height: 1.7; color: var(--texte); max-width: 34em; }
.p { margin: 16px 0 0; max-width: 36em; }
.section--bois .h2, .section--bois .h3 { color: var(--creme-clair); }
.section--bois .lbl, .section--bois .lead, .section--bois .p, .section--bois p { color: var(--creme-doux); }

.tete-sec { max-width: 760px; margin: 0 0 clamp(44px, 5vw, 70px); }
.tete-sec--centre { margin-left: auto; margin-right: auto; text-align: center; }
.tete-sec--centre .lbl { justify-content: center; }
.tete-sec--centre .lbl::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }
.tete-sec--centre .lead { margin-left: auto; margin-right: auto; }

/* the jasmine sprig of the logo, as an ornament above a title */
.brin { display: block; width: 74px; height: auto; margin: 0 0 18px; color: var(--brun); }
.tete-sec--centre .brin { margin-left: auto; margin-right: auto; }
.section--bois .brin { color: var(--creme-clair); }

/* ---------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 14px 28px;
  font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid var(--brun); border-radius: 0;
  background: var(--brun); color: var(--creme-clair);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.btn:hover { background: var(--bois); border-color: var(--bois); }
.btn--ligne { background: transparent; color: var(--brun); }
.btn--ligne:hover { background: var(--brun); color: var(--creme-clair); border-color: var(--brun); }
.btn--clair { background: var(--creme-clair); border-color: var(--creme-clair); color: var(--brun); }
.btn--clair:hover { background: var(--creme); border-color: var(--creme); color: var(--bois); }
.btn--ligne-clair { background: transparent; border-color: rgba(247, 239, 227, .7); color: var(--creme-clair); }
.btn--ligne-clair:hover { background: var(--creme-clair); color: var(--brun); border-color: var(--creme-clair); }
.btn svg { width: 18px; height: 18px; flex: none; }

.lienfleche {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding-bottom: 5px;
  font-size: .76rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  color: var(--brun); border-bottom: 1px solid var(--filet-fort); transition: border-color var(--t);
}
.lienfleche svg { width: 22px; height: 10px; transition: transform var(--t); }
.lienfleche:hover { border-color: var(--bleu); }
.lienfleche:hover svg { transform: translateX(6px); }

/* ------------------------------------------------------------------- nav -- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 36px;
  padding: 18px var(--gout);
  transition: background-color var(--t), box-shadow var(--t), padding var(--t);
}
/* a top-down shade of its own, so the light links read on any photo */
.nav::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(26, 12, 6, .62), rgba(26, 12, 6, .22) 62%, rgba(26, 12, 6, 0));
  transition: opacity var(--t);
}
.nav.scrolled { background: var(--papier); box-shadow: 0 1px 0 var(--filet); padding-top: 12px; padding-bottom: 12px; }
.nav.scrolled::before, .nav.menu-open::before { opacity: 0; }

.nav__brand { position: relative; z-index: 120; justify-self: start; display: block; line-height: 0; }
/* the lockup is 5380 x 1313: the height is set, the width follows, never both */
.nav__logo { width: auto; height: 46px; max-width: none; transition: height var(--t); }
.nav.scrolled .nav__logo { height: 40px; }
.nav__logo--fonce { display: none; }
.nav__logo--clair { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .35)); }
.nav.scrolled .nav__logo--clair, .nav.menu-open .nav__logo--clair { display: none; }
.nav.scrolled .nav__logo--fonce, .nav.menu-open .nav__logo--fonce { display: block; }

.nav__links { display: flex; align-items: center; gap: clamp(24px, 2.6vw, 42px); }
.nav__links a {
  font-family: var(--display); font-size: 1.12rem; color: var(--brun); text-decoration: none;
  padding: 3px 0; border-bottom: 1px solid transparent; transition: border-color var(--t), color var(--t);
}
.nav__links a:hover, .nav__links a.active { border-bottom-color: var(--bleu); }
.nav__langue--menu { display: none; }

.nav__end { position: relative; z-index: 120; justify-self: end; display: flex; align-items: center; gap: 18px; }
.nav__langue {
  font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-decoration: none; color: var(--brun);
  padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color var(--t);
}
.nav__langue:hover { border-bottom-color: var(--bleu); }
.nav__cta { min-height: 46px; padding: 12px 24px; font-size: .7rem; }
.nav__cta--menu { display: none; }

.nav__burger {
  display: none; width: 46px; height: 46px; padding: 0; background: transparent;
  border: 1px solid rgba(247, 239, 227, .65); border-radius: 0; cursor: pointer;
}
.nav__burger span { display: block; width: 18px; height: 1.5px; margin: 4px auto; background: var(--creme-clair); transition: transform var(--t), opacity var(--t); }
.nav.scrolled .nav__burger, .nav.menu-open .nav__burger { border-color: var(--filet-fort); }
.nav.scrolled .nav__burger span, .nav.menu-open .nav__burger span { background: var(--brun); }
.nav.menu-open .nav__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (min-width: 1081px) {
  .nav:not(.scrolled) .nav__links a, .nav:not(.scrolled) .nav__langue { color: var(--creme-clair); }
  .nav:not(.scrolled) .nav__links a.active, .nav:not(.scrolled) .nav__links a:hover { border-bottom-color: var(--creme-clair); }
  .nav:not(.scrolled) .nav__cta--bar { background: var(--creme-clair); border-color: var(--creme-clair); color: var(--brun); }
  .nav:not(.scrolled) .nav__cta--bar:hover { background: var(--creme); border-color: var(--creme); }
}

/* ------------------------------------------------------------- the arch --- */
/* the outer frame of their door and logo: straight sides, a pointed top.
   Revealed top to bottom on the <svg> itself (a clip on the path is dropped by Chrome). */
.arche { display: block; overflow: visible; }
.arche path { fill: none; stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.arche--trace { animation: arche-trace 2s .2s cubic-bezier(.6, .1, .2, 1) both; }
@keyframes arche-trace { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 100vh; min-height: 100svh;
  background: var(--bois);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; animation: lent 18s ease-out both; }
@keyframes lent { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(30, 14, 7, .86) 0%, rgba(30, 14, 7, .66) 30%, rgba(30, 14, 7, .22) 58%, rgba(30, 14, 7, 0) 78%),
    linear-gradient(to top, rgba(30, 14, 7, .55), rgba(30, 14, 7, 0) 42%);
}
.hero__in { width: 100%; padding-top: 140px; padding-bottom: clamp(110px, 12vh, 150px); }
/* the text stands inside the arch of their door */
.hero__cadre {
  position: relative; width: clamp(340px, 41vw, 600px); aspect-ratio: 100 / 124;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(26px, 3.4vw, 54px) clamp(30px, 3.4vw, 54px);
  color: var(--creme-clair);
}
.hero__cadre .arche { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(247, 239, 227, .78); }
.hero__titre { color: var(--creme-clair); font-size: clamp(2.3rem, 3.7vw, 3.55rem); line-height: 1.06; text-shadow: 0 2px 22px rgba(0, 0, 0, .25); }
.hero__titre em { display: block; }
.hero__sub { margin: 20px 0 0; font-size: 1.06rem; font-weight: 400; line-height: 1.65; color: var(--creme-clair); max-width: 27em; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero__cta .btn { padding: 14px 22px; letter-spacing: .16em; }
.monte { animation: monte 1s cubic-bezier(.2, .7, .2, 1) both; }
.monte--2 { animation-delay: .14s; }
.monte--3 { animation-delay: .28s; }
@keyframes monte { from { transform: translateY(18px); } to { transform: none; } }

/* ----------------------------------------------------------- booking bar -- */
.barre { position: relative; z-index: 5; margin-top: -58px; }
.barre__form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 0;
  background: var(--papier); box-shadow: 0 24px 70px rgba(42, 20, 12, .18); border: 1px solid var(--filet);
}
.barre__champ { padding: 18px 24px 16px; border-right: 1px solid var(--filet); }
.barre__champ label { display: block; margin: 0 0 6px; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--meta); }
.barre__champ input, .barre__champ select {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: 40px; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--brun);
  font-family: var(--display); font-size: 1.22rem; line-height: 1.2; cursor: pointer;
}
.barre__champ input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.barre__champ input::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.barre__champ select { background-image: linear-gradient(45deg, transparent 50%, var(--brun) 50%), linear-gradient(135deg, var(--brun) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
.barre__btn { align-self: stretch; min-height: 84px; padding: 0 34px; }
.barre__note { margin: 14px 2px 0; font-size: .86rem; color: var(--meta); }

/* ------------------------------------------------------------ facts row --- */
.faits { padding: clamp(40px, 5vw, 60px) 0 0; }
.faits__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.fait { display: flex; gap: 16px; align-items: flex-start; padding: 26px 26px 24px 0; }
.fait + .fait { padding-left: 26px; border-left: 1px solid var(--filet); }
.fait svg { flex: none; width: 26px; height: 26px; margin-top: 3px; color: var(--brun); }
.fait__k { margin: 0; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--meta); }
.fait__v { margin: 4px 0 0; font-family: var(--display); font-size: 1.24rem; line-height: 1.3; color: var(--brun); }
.fait__v a { text-decoration: none; border-bottom: 1px solid var(--filet-fort); }

/* -------------------------------------------- photo + text, side by side -- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.duo--inverse .duo__media { order: 2; }
.duo__media { position: relative; }
/* the sand block offset behind the photo */
.duo__media::before { content: ""; position: absolute; inset: 34px -26px -26px 34px; z-index: 0; background: var(--sable); }
.duo--inverse .duo__media::before { inset: 34px 34px -26px -26px; }
.duo__media img { position: relative; z-index: 1; width: 100%; height: clamp(380px, 44vw, 600px); object-fit: cover; }
/* the photo cut in the shape of their door, used twice on the site */
.duo__media--arche::before { display: none; }
.duo__media--arche img {
  -webkit-mask: url("assets/motifs/arche-masque.svg") center / 100% 100% no-repeat;
  mask: url("assets/motifs/arche-masque.svg") center / 100% 100% no-repeat;
  height: auto; aspect-ratio: 100 / 132;
}
.duo__petite { position: absolute; z-index: 2; right: -6%; bottom: -9%; width: 42%; border: 8px solid var(--papier); }
.duo__petite img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.section--creme .duo__petite { border-color: var(--creme); }

/* ------------------------------------------------------------ room cards -- */
.chambres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.carte { display: flex; flex-direction: column; background: var(--papier); }
.carte__media { overflow: hidden; display: block; }
.carte__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.carte:hover .carte__media img { transform: scale(1.05); }
.carte__corps { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 22px 26px; }
.carte__nom { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.42rem; line-height: 1.15; color: var(--brun); }
.carte__faits { margin: 10px 0 0; font-size: .92rem; color: var(--meta); }
.carte__prix { margin: 6px 0 0; font-size: .92rem; color: var(--meta); }
.carte__prix b { font-family: var(--display); font-weight: 500; font-size: 1.18rem; color: var(--brun); }
.carte__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: auto; padding-top: 20px; }
.carte__actions .lienfleche { margin-top: 0; }
.carte__lien { font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brun); background: none; border: 0; padding: 0 0 5px; border-bottom: 1px solid var(--filet-fort); cursor: pointer; text-decoration: none; }
.carte__lien:hover { border-color: var(--bleu); }

/* --------------------------------------------------------------- quotes --- */
.avis { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.avis__liste { position: relative; }
.avis__item { margin: 0; }
.avis__item blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.4; font-style: italic; color: var(--creme-clair); }
.avis__item figcaption { margin-top: 26px; font-size: .76rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--creme-doux); }
.avis__nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 40px; }
.avis__fl { width: 48px; height: 48px; display: inline-grid; place-items: center; border: 1px solid var(--filet-clair); background: transparent; color: var(--creme-clair); cursor: pointer; transition: border-color var(--t), background-color var(--t); }
.avis__fl:hover { border-color: var(--creme-clair); }
.avis__fl svg { width: 20px; height: 10px; }
.avis__points { display: flex; gap: 10px; }
.avis__points button { width: 9px; height: 9px; padding: 0; border: 1px solid var(--creme-doux); border-radius: 50%; background: transparent; cursor: pointer; }
.avis__points button[aria-current="true"] { background: var(--creme-clair); border-color: var(--creme-clair); }
.avis__ouv { display: block; width: 46px; height: auto; margin: 0 auto 26px; color: var(--creme-doux); }

/* ---------------------------------------------------------- photo tiles --- */
.tuiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tuile { position: relative; display: block; overflow: hidden; background: var(--sable); }
.tuile img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.tuile:hover img { transform: scale(1.06); }
.tuile__ig { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; display: grid; place-items: center; background: rgba(247, 239, 227, .9); color: var(--brun); }
.tuile__ig svg { width: 16px; height: 16px; }
.tuiles__pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; }

/* ------------------------------------------------------- closing band --- */
.fin { position: relative; isolation: isolate; overflow: hidden; text-align: center; background: var(--brun); }
.fin__in { position: relative; max-width: 680px; margin: 0 auto; padding: clamp(64px, 7vw, 96px) clamp(30px, 5vw, 64px) clamp(40px, 5vw, 70px); }
.fin__arche { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: rgba(247, 239, 227, .4); }
.fin .h2 { color: var(--creme-clair); }
.fin p { margin: 20px auto 0; max-width: 30em; font-weight: 400; color: var(--creme-clair); }
.fin__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* --------------------------------------------------------- page heads ---- */
/* one big photo per page, carrying its title (standing rule) */
.tete {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 62vh; min-height: 62svh; background: var(--bois);
}
.tete img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; animation: lent 16s ease-out both; }
.tete::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(30, 14, 7, .72), rgba(30, 14, 7, .32) 50%, rgba(30, 14, 7, .08)), linear-gradient(to top, rgba(30, 14, 7, .5), rgba(30, 14, 7, 0) 50%); }
.tete__in { width: 100%; padding-top: 150px; padding-bottom: clamp(54px, 7vw, 90px); }
.tete .lbl { color: var(--creme-doux); }
.tete .h1 { color: var(--creme-clair); }
.tete p.tete__p { margin: 18px 0 0; max-width: 32em; font-size: 1.08rem; font-weight: 400; color: var(--creme-clair); text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }

/* ----------------------------------------------------- rooms page blocks -- */
.ch { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: start; scroll-margin-top: 100px; }
.ch + .ch { margin-top: clamp(80px, 9vw, 130px); padding-top: clamp(80px, 9vw, 130px); border-top: 1px solid var(--filet); }
.ch--inverse .ch__media { order: 2; }
.ch__grand { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--sable); }
.ch__vignettes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ch__vignettes button { padding: 0; border: 0; background: var(--sable); cursor: pointer; position: relative; }
.ch__vignettes img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: opacity var(--t); }
.ch__vignettes button[aria-pressed="false"] img { opacity: .62; }
.ch__vignettes button:hover img { opacity: 1; }
.ch__vignettes button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--brun); }
.ch__info .h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.ch__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 14px 0 0; }
.ch__prix span { font-size: .92rem; color: var(--meta); }
.ch__prix b { font-family: var(--display); font-weight: 500; font-size: 1.7rem; line-height: 1.1; color: var(--brun); }
.ch__note { max-width: 44em; margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; font-size: .92rem; color: var(--meta); }
.ch__liste { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--filet); }
.ch__liste li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--filet); font-size: .98rem; }
.ch__liste li span:first-child { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--meta); padding-top: 4px; }
.ch__info .btn { margin-top: 30px; }

.equip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--filet); }
.equip li { list-style: none; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 30px 0; border-bottom: 1px solid var(--filet); }
.equip li + li { padding-left: 24px; border-left: 1px solid var(--filet); }
.equip li:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.equip svg { width: 30px; height: 30px; color: var(--brun); }
.equip b { font-family: var(--display); font-weight: 400; font-size: 1.24rem; line-height: 1.2; color: var(--brun); }
.equip span { font-size: .92rem; color: var(--meta); line-height: 1.55; }
.equip ul, ul.equip { margin: 0; padding: 0; }

/* --------------------------------------------------------- good to know --- */
.savoir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--filet); margin: 0; }
.savoir div { padding: 24px 24px 26px 0; border-bottom: 1px solid var(--filet); }
.savoir div:not(:nth-child(3n+1)) { padding-left: 24px; border-left: 1px solid var(--filet); }
.savoir dt { font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--meta); }
.savoir dd { margin: 6px 0 0; font-family: var(--display); font-size: 1.28rem; line-height: 1.35; color: var(--brun); }

/* ------------------------------------------------------ the riad, mosaic -- */
.mosaique { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 19vw, 280px); grid-auto-flow: row dense; gap: 12px; }
.mosaique figure { margin: 0; overflow: hidden; position: relative; }
.mosaique img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.mosaique figure:hover img { transform: scale(1.05); }
.mosaique .haut { grid-row: span 2; }
.mosaique .large { grid-column: span 2; }
.citation { margin: 34px 0 0; padding-left: 22px; border-left: 1px solid var(--brun); }
.citation p { margin: 0; font-family: var(--display); font-style: italic; font-size: 1.3rem; line-height: 1.45; color: var(--brun); }
.citation cite { display: block; margin-top: 10px; font-style: normal; font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--meta); }

/* -------------------------------------------------------------- gallery --- */
.galerie { columns: 3 320px; column-gap: 14px; }
.galerie button { display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: var(--sable); cursor: zoom-in; break-inside: avoid; overflow: hidden; }
.galerie img { width: 100%; height: auto; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.galerie button:hover img { transform: scale(1.04); }

.visio { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 60px 70px; background: rgba(20, 9, 4, .94); }
.visio img { max-width: 100%; max-height: 100%; max-height: calc(100dvh - 120px); width: auto; height: auto; object-fit: contain; }
.visio__btn { position: absolute; width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(247, 239, 227, .4); background: transparent; color: var(--creme-clair); cursor: pointer; }
.visio__btn:hover { border-color: var(--creme-clair); }
.visio__btn svg { width: 20px; height: 20px; }
.visio__fermer { top: 18px; right: 18px; font-size: 1.8rem; line-height: 1; }
.visio__prec { left: 14px; top: 50%; translate: 0 -50%; }
.visio__suiv { right: 14px; top: 50%; translate: 0 -50%; }

/* -------------------------------------------------------------- contact --- */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.contact__lignes { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.contact__lignes li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.contact__lignes li span:first-child { font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--meta); padding-top: 5px; }
.contact__lignes a { text-decoration: none; border-bottom: 1px solid var(--filet-fort); }
.contact__lignes a:hover { border-color: var(--bleu); }
.contact__val { font-family: var(--display); font-size: 1.22rem; line-height: 1.4; color: var(--brun); overflow-wrap: anywhere; }
.contact__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.carte-map { position: relative; min-height: 460px; height: 100%; background: var(--sable); }
.carte-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: sepia(.18) saturate(.9); }
/* getting here: four ways in, then the last metres with the street and the door */
.venir { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 40px); }
.venir li { padding: 22px 0 0; border-top: 1px solid var(--filet-fort); }
.venir__k { margin: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.2; color: var(--brun); }
.venir__v { margin: 10px 0 0; font-size: .98rem; line-height: 1.65; color: var(--texte); }
.arrivee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(16px, 2vw, 28px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.arrivee figure { margin: 0; }
.arrivee figure img { width: 100%; height: clamp(300px, 30vw, 440px); object-fit: cover; }
.arrivee figcaption { margin-top: 12px; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--meta); }
.arrivee__txt { padding-left: clamp(0px, 2vw, 28px); }
.arrivee__txt .contact__cta { margin-top: 26px; }
.acces { margin: 0; padding: 0; list-style: none; columns: 2 280px; column-gap: 40px; }
.acces li { break-inside: avoid; display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.acces li b { font-weight: 400; font-family: var(--display); font-size: 1.16rem; color: var(--brun); }
.acces li span { color: var(--meta); white-space: nowrap; }

/* --------------------------------------------------------------- footer --- */
.pied { background: var(--bois); color: var(--creme-doux); padding: clamp(70px, 8vw, 110px) 0 34px; }
.pied__haut { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 54px; border-bottom: 1px solid var(--filet-clair); }
.pied__logo { width: auto; height: 150px; max-width: none; }
.pied h2 { margin: 0 0 16px; font-family: var(--sans); font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--creme-clair); }
.pied p, .pied li { margin: 0; font-size: .95rem; line-height: 1.85; color: var(--creme-doux); }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied a { color: var(--creme-doux); text-decoration: none; transition: color var(--t); }
.pied a:hover { color: var(--creme-clair); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-top: 26px; font-size: .78rem; color: rgba(247, 239, 227, .62); }
.pied__credit a { color: rgba(247, 239, 227, .74); text-transform: uppercase; letter-spacing: .2em; text-decoration: none; font-size: .7rem; }
.pied__credit a:hover { color: var(--creme-clair); }

/* ------------------------------------------------------- booking modal ---
   Scroll architecture from .claude/rules/booking-modal.md §1, verbatim. Only
   the colours, radius and fonts belong to this site.                       */
.rsv { position: fixed; inset: 0; z-index: 140; display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  visibility: hidden; transition: visibility .25s ease; }
.rsv.is-open { visibility: visible; }
.rsv__backdrop { position: fixed; inset: 0; background: rgba(24, 11, 5, .7); }
.rsv__card { position: relative; display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: minmax(0, 1fr);
  width: min(980px, calc(100vw - 40px)); margin: auto;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow: hidden; background: var(--papier); border-radius: 0; box-shadow: 0 30px 90px rgba(0, 0, 0, .38); }
.rsv__aside { min-height: 0; overflow-y: auto; position: relative; isolation: isolate; background: var(--bois); color: var(--creme-clair); padding: 40px 36px; display: flex; flex-direction: column; }
.rsv__aside-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.rsv__aside::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(24, 11, 5, .92), rgba(24, 11, 5, .55) 55%, rgba(24, 11, 5, .3)); }
.rsv__body { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; padding: 40px 38px 32px; }
.rsv__body > * { flex-shrink: 0; }
.rsv__close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 44px; height: 44px; border: 1px solid var(--filet); background: var(--papier); font-size: 1.7rem; line-height: 1; color: var(--brun); cursor: pointer; border-radius: 0; }
.rsv__close:hover { background: var(--creme); }
.rsv__mark { width: 74px; height: auto; align-self: flex-start; margin: 0 0 auto; }
.rsv__h { margin: 30px 0 12px; font-family: var(--display); font-weight: 400; font-style: italic; font-size: 2.6rem; line-height: 1.05; color: var(--creme-clair); }
.rsv__aside p { margin: 0 0 18px; font-size: .95rem; line-height: 1.6; color: rgba(247, 239, 227, .9); }
.rsv__steps { display: flex; gap: 8px; }
.rsv__steps i { display: block; width: 38px; height: 2px; background: rgba(247, 239, 227, .3); transition: background var(--t); }
.rsv__steps i.on { background: var(--creme-clair); }

.rsv__bloc { margin: 0 0 26px; }
.rsv__lbl { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; color: var(--meta); font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.rsv__lbl b { font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--brun); }
.rsv__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.rsv__field label { display: block; margin: 0 0 8px; color: var(--meta); font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.rsv__field input[type="date"] { -webkit-appearance: none; appearance: none; width: 100%;
  min-height: 50px; line-height: 1.3; padding: 0 14px; background: #fff; border: 1px solid var(--filet-fort); border-radius: 0;
  font-family: var(--display); font-size: 17px; color: var(--brun); }
.rsv__field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.rsv__field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.rsv__nuits { margin: 10px 0 0; font-size: .9rem; color: var(--meta); }
.rsv__cpt { min-height: 52px; background: #fff; border: 1px solid var(--filet-fort); }
.rsv__cpt-btns { display: flex; align-items: center; width: 100%; }
.rsv__cpt button { flex: none; width: 52px; height: 50px; border: 0; background: transparent; font-size: 1.35rem; color: var(--brun); cursor: pointer; }
.rsv__cpt button:first-child { border-right: 1px solid var(--filet); }
.rsv__cpt button:last-child { border-left: 1px solid var(--filet); }
.rsv__cpt output { flex: 1 1 auto; }
.rsv__cpt button:disabled { color: rgba(62, 36, 24, .3); cursor: default; }
.rsv__cpt output { min-width: 30px; text-align: center; font-family: var(--display); font-size: 1.25rem; color: var(--brun); }

.rsv__packs { display: block; border-top: 1px solid var(--filet-fort); }
.rsv__pack { display: grid; grid-template-columns: 20px 64px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%;
  padding: 11px 8px 11px 4px; background: transparent; border: 0; border-bottom: 1px solid var(--filet); cursor: pointer; text-align: left; color: var(--brun); transition: background-color var(--t); }
.rsv__pack:hover, .rsv__pack[aria-pressed="true"] { background: var(--creme); }
.rsv__box { display: block; position: relative; width: 18px; height: 18px; border: 1px solid rgba(62, 36, 24, .5); transition: background-color var(--t), border-color var(--t); }
.rsv__pack[aria-pressed="true"] .rsv__box { background: var(--brun); border-color: var(--brun); }
.rsv__pack[aria-pressed="true"] .rsv__box::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--creme-clair); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.rsv__pack img { width: 64px; height: 48px; object-fit: cover; }
.rsv__pack-n { font-family: var(--display); font-size: 1.1rem; line-height: 1.25; }
.rsv__pack-n small { display: block; margin-top: 2px; font-family: var(--sans); font-size: .82rem; color: var(--meta); }
.rsv__pack-n .rsv__pack-prix { margin-top: 4px; font-weight: 500; color: var(--brun); }
.rsv__pack--libre { grid-template-columns: 20px minmax(0, 1fr); }
.rsv__compte { margin: 10px 0 0; font-size: .88rem; color: var(--meta); }
.rsv__msg { width: 100%; min-height: 84px; padding: 12px 14px; background: #fff; border: 1px solid var(--filet-fort); border-radius: 0; resize: vertical; font-family: var(--sans); font-size: 16px; font-weight: 300; color: var(--brun); }

.rsv__recap { margin: 0 0 16px; padding: 16px 18px; background: var(--creme); border-left: 2px solid var(--brun); font-size: .94rem; line-height: 1.6; }
.rsv__recap b { font-family: var(--display); font-weight: 400; font-size: 1.06rem; }
.rsv__hint { margin: 0 0 14px; font-size: .9rem; color: var(--meta); }
.rsv__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rsv__actions .btn { flex: 1 1 200px; min-width: 0; }
.rsv__actions .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.rsv__note { margin: 16px 0 0; font-size: .84rem; color: var(--meta); }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1180px) {
  .chambres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte__media img { aspect-ratio: 3 / 2; }
  .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tuiles .tuile:nth-child(n+4) { display: none; }
}

@media (max-width: 1080px) {
  .venir { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; }
  .arrivee { grid-template-columns: 1fr 1fr; }
  .arrivee__txt { grid-column: 1 / -1; padding-left: 0; }
  /* two tracks once the links leave the flow, or the burger lands mid-bar */
  .nav { grid-template-columns: 1fr auto; }
  .nav::before { inset: 0; }
  .nav__cta--bar, .nav__end .nav__langue { display: none; }
  .nav__cta--menu { display: inline-flex; margin-top: 14px; }
  .nav__langue--menu { display: inline-block; }
  .nav__burger { display: block; }
  .nav__links {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
    flex-direction: column; justify-content: center; gap: 22px;
    background: var(--papier);
    transform: translateX(100%); visibility: hidden;
    transition: transform .35s ease, visibility 0s linear .35s; z-index: 100;
  }
  .nav__links.nav-open { transform: translateX(0); visibility: visible; transition: transform .35s ease, visibility 0s; }
  .nav .nav__links a { font-size: 1.75rem; color: var(--brun); }
  .nav .nav__links .nav__langue--menu { font-family: var(--sans); font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; }
  .nav.menu-open { background: var(--papier); box-shadow: none; }

  .duo { grid-template-columns: 1fr; }
  .duo--inverse .duo__media { order: 0; }
  .duo__media { max-width: 680px; }
  .duo__media--arche { max-width: 460px; }
  .ch { grid-template-columns: 1fr; }
  .ch--inverse .ch__media { order: 0; }
  .contact { grid-template-columns: 1fr; }
  .carte-map { min-height: 380px; }
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .equip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equip li:nth-child(4n+1) { padding-left: 24px; border-left: 1px solid var(--filet); }
  .equip li:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 46vw; }
  .mosaique .large { grid-column: span 2; }
}

@media (max-width: 1020px) {
  .rsv__card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .rsv__aside { padding: 16px 62px 14px 24px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 16px; overflow: visible; }
  .rsv__aside p, .rsv__aside-img, .rsv__mark { display: none; }
  .rsv__h { margin: 0; font-size: 1.9rem; }
  .rsv__steps { width: 100%; margin-top: 4px; }
  .rsv__body { padding: 24px 24px 26px; }
}

@media (max-width: 860px) {
  .barre { margin-top: 0; padding: 0; }
  .barre__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); box-shadow: none; border-left: 0; border-right: 0; }
  .barre__champ { border-bottom: 1px solid var(--filet); }
  .barre__champ:nth-child(2) { border-right: 0; }
  .barre__champ--voy { border-right: 0; }
  .barre__btn { grid-column: 2; min-height: 76px; }
  .barre__note { padding: 0 var(--gout); }
  .faits__row { grid-template-columns: 1fr; }
  .fait, .fait + .fait { padding: 20px 0; border-left: 0; }
  .fait + .fait { border-top: 1px solid var(--filet); }
  .savoir { grid-template-columns: 1fr 1fr; }
  .savoir div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .savoir div:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--filet); }
}

@media (max-width: 680px) {
  .venir { grid-template-columns: 1fr; gap: 24px; }
  .arrivee figure img { height: 56vw; }
  body { font-size: 15.5px; }
  .nav { padding: 12px var(--gout); }
  .nav__logo, .nav.scrolled .nav__logo { height: 36px; }
  .hero { align-items: flex-end; }
  .hero__media img { object-position: 50% 50%; }
  .hero__voile { background: linear-gradient(to top, rgba(30, 14, 7, .86), rgba(30, 14, 7, .45) 55%, rgba(30, 14, 7, .25)); }
  .hero__in { padding-top: 110px; padding-bottom: 46px; }
  .hero__cadre { width: 100%; aspect-ratio: auto; min-height: 118vw; padding: 0 22px 30px; }
  .hero__titre { font-size: clamp(2.1rem, 9.4vw, 2.7rem); }
  .hero__sub { font-size: .98rem; }
  .hero__cta .btn { flex: 1 1 100%; }
  .duo__media img { height: 420px; }
  .duo__media--arche img { height: auto; }
  .duo__media::before { inset: 22px -12px -12px 22px; }
  .duo--inverse .duo__media::before { inset: 22px 22px -12px -12px; }
  .duo__petite { width: 46%; right: -2%; bottom: -12%; border-width: 6px; }
  .chambres { grid-template-columns: 1fr; }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuiles .tuile:nth-child(n+4) { display: block; }
  .tuiles .tuile:nth-child(5) { display: none; }
  .pied__haut { grid-template-columns: 1fr; }
  .pied__logo { height: 130px; }
  .ch__liste li { grid-template-columns: 1fr; gap: 2px; }
  .ch__vignettes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ch__vignettes button:nth-child(5) { display: none; }
  .equip { grid-template-columns: 1fr; }
  .equip li, .equip li + li, .equip li:nth-child(4n+1), .equip li:nth-child(2n+1) { padding: 22px 0; border-left: 0; }
  .savoir { grid-template-columns: 1fr; }
  .savoir div, .savoir div:nth-child(2n) { padding: 18px 0; border-left: 0; }
  .mosaique { grid-auto-rows: 52vw; gap: 8px; }
  .contact__lignes li { grid-template-columns: 1fr; gap: 0; }
  .visio { padding: 70px 10px; }
  .visio__prec, .visio__suiv { top: auto; bottom: 14px; translate: none; }
  .avis__item blockquote { font-size: 1.35rem; }

  .rsv { padding: 0; }
  .rsv__card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); width: 100vw; margin: 0;
    height: 100vh; max-height: 100vh; height: 100dvh; max-height: 100dvh; }
  .rsv__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rsv__actions { flex-direction: column; }
  .rsv__actions .btn { flex: 0 0 auto; width: 100%; }
  .rsv__body { padding: 20px 20px 28px; }
  .rsv__pack { grid-template-columns: 20px 54px minmax(0, 1fr); }
  .rsv__pack img { width: 54px; height: 42px; }
}

@media (max-width: 420px) {
  .rsv__grid { grid-template-columns: 1fr; }
  .barre__champ { padding: 14px 16px 12px; }
  .barre__champ input, .barre__champ select { font-size: 1.08rem; }
}

/* ------------------------------------------------- hero, doorway + slides -- */
/* Chosen by Jad on 2026-10-07 (option C): the arch centred like the riad's
   door, the photo kept bright, four of the riad's own photos crossfading
   slowly, and the booking bar docked in the first screen. The base photo
   stays underneath: if the slides never load, the hero is still complete. */
.hero__diapo { position: absolute; inset: 0; z-index: -2; }
.hero__diapo picture { position: absolute; inset: 0; opacity: 0; }
.hero__diapo img { width: 100%; height: 100%; object-fit: cover; }
.hero__diapo.is-on picture { animation: diapo 24s linear infinite; }
.hero__diapo.is-on picture:nth-child(1) { animation-delay: 4.5s; }
.hero__diapo.is-on picture:nth-child(2) { animation-delay: 10.5s; }
.hero__diapo.is-on picture:nth-child(3) { animation-delay: 16.5s; }
@keyframes diapo {
  0% { opacity: 0; transform: scale(1.07); }
  6.25% { opacity: 1; }
  25% { opacity: 1; }
  31.25% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .hero__diapo { display: none !important; } }

.hero .hero__in { display: flex; justify-content: center; padding-top: 118px; padding-bottom: 168px; }
.hero .hero__cadre {
  width: min(780px, 88vw); height: min(calc(100svh - 300px), 640px); aspect-ratio: auto;
  align-items: center; text-align: center;
}
.hero .hero__titre { font-size: clamp(2.5rem, 4.2vw, 4rem); }
.hero .hero__sub { margin-left: auto; margin-right: auto; }
.hero .hero__cta { justify-content: center; }
.hero .hero__voile {
  background:
    linear-gradient(to bottom, rgba(30, 14, 7, .42), rgba(30, 14, 7, 0) 22%),
    radial-gradient(ellipse 50% 46% at 50% 60%, rgba(30, 14, 7, .64), rgba(30, 14, 7, .26) 60%, rgba(30, 14, 7, 0) 100%),
    linear-gradient(to top, rgba(30, 14, 7, .36), rgba(30, 14, 7, 0) 26%);
}
.hero ~ .barre { margin-top: -140px; }

@media (max-width: 860px) {
  .hero .hero__in { padding-bottom: 196px; }
  .hero ~ .barre { margin-top: -178px; padding: 0 14px; }
  .hero ~ .barre .barre__form { box-shadow: 0 18px 50px rgba(42, 20, 12, .3); border: 1px solid var(--filet); }
  .hero ~ .barre .barre__champ { padding: 12px 16px 10px; }
  .hero ~ .barre .barre__champ input, .hero ~ .barre .barre__champ select { min-height: 34px; font-size: 1.05rem; }
  .hero ~ .barre .barre__btn { min-height: 64px; }
}
@media (max-width: 680px) {
  .hero .hero__in { padding-top: 96px; }
  .hero .hero__cadre { width: 100%; height: auto; min-height: 0; aspect-ratio: auto; padding: 74px 22px 26px; }
  .hero .hero__cta { display: none; }
  .hero .hero__titre { font-size: clamp(2.1rem, 9.4vw, 2.7rem); }
  .hero .hero__voile {
    background:
      linear-gradient(to top, rgba(30, 14, 7, .82) 0%, rgba(30, 14, 7, .5) 42%, rgba(30, 14, 7, .1) 72%),
      linear-gradient(to bottom, rgba(30, 14, 7, .42), rgba(30, 14, 7, 0) 18%);
  }
}