/* Vidéo Podcast Studio Baden - feuille unique.
   Palette creme / terracotta / vert bouteille, Fraunces + Archivo,
   lumieres de plateau en degrades tres doux, pictogrammes en masque CSS. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --paper: #f7f2ea;
  --paper-2: #efe7da;
  --card: #fffdf8;
  --ink: #211a14;
  --ink-2: #5a4f45;
  --line: #dfd4c3;
  --brick: #a94b26;
  --brick-text: #98421f;
  --forest: #23473a;
  --cream: #f7f2ea;
  --focus: #98421f;

  /* Vert officiel WhatsApp. Le ton fonce sert sur fond clair, le ton vif sur
     fond vert bouteille, pour rester lisible dans les deux contextes. */
  --wa: #128c7e;
  --wa-vif: #25d366;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.81rem + 0.1vw, 0.89rem);
  --step-0: clamp(1rem, 0.96rem + 0.22vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.11rem + 0.45vw, 1.47rem);
  --step-2: clamp(1.44rem, 1.28rem + 0.8vw, 1.91rem);
  --step-3: clamp(1.73rem, 1.45rem + 1.4vw, 2.48rem);
  --step-4: clamp(2.07rem, 1.55rem + 2.6vw, 3.6rem);
  --step-5: clamp(2.4rem, 1.62rem + 3.9vw, 4.6rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius: 3px;
  --radius-lg: 6px;
  --wrap: 72rem;

  --ico-whatsapp: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/></svg>");

  --ico-plus: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --ico-moins: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><path d='M5 12h14'/></svg>");
}

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

/* Sans cette regle, un simple `display: grid/flex` sur un composant suffit a
   annuler l'attribut hidden (booking.js et map.js l'utilisent tous deux pour
   masquer une facade une fois le contenu tiers charge). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--step-0)/1.66 var(--sans);
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3, .h2-like { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--brick-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

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

sup { font-size: 0.58em; vertical-align: super; line-height: 0; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  z-index: 30;
  padding: var(--space-3) var(--space-4);
  background: var(--brick);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { inset-inline-start: var(--space-4); top: var(--space-3); }

/* Pictogrammes

   Chaque icone est un SVG applique en masque : la couleur vient de CSS, donc
   un meme dessin fonctionne sur fond clair comme sur fond vert bouteille
   sans avoir a fournir deux fichiers. */

[data-ico]::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-inline-end: 0.5em;
  vertical-align: -0.16em;
  background: var(--brick-text);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

[data-ico="entreprise"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21V5.5A1.5 1.5 0 0 1 5.5 4h8A1.5 1.5 0 0 1 15 5.5V21M15 11h3.5A1.5 1.5 0 0 1 20 12.5V21M3 21h18M8 8h3M8 12h3M8 16h3'/></svg>"); }
[data-ico="independant"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 11.5a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5ZM4.5 20.5a7.5 7.5 0 0 1 15 0'/></svg>"); }
[data-ico="createur"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 5h15A1.5 1.5 0 0 1 21 6.5v11a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5v-11A1.5 1.5 0 0 1 4.5 5ZM10 9.5l5 2.5-5 2.5Z'/></svg>"); }
[data-ico="camera"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7.5A1.5 1.5 0 0 1 4.5 6h9A1.5 1.5 0 0 1 15 7.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 3 16.5ZM15 11l6-3.5v9L15 13Z'/></svg>"); }
[data-ico="plateau"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11a2.75 2.75 0 1 0 0-5.5A2.75 2.75 0 0 0 9 11ZM3.5 19a5.5 5.5 0 0 1 11 0M16.5 6.4a2.75 2.75 0 0 1 0 5.2M21 19a5.5 5.5 0 0 0-3.2-5'/></svg>"); }
[data-ico="regie"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h4.5M12.5 8H21M3 16h8.5M16.5 16H21M12.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM16.5 16a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z'/></svg>"); }
[data-ico="postprod"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16v11H4ZM4 11h16M8.5 7l1.6 4M14 7l1.6 4'/></svg>"); }
[data-ico="lumiere"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3h10l3 7H4L7 3Z'/><path d='M12 10v8M8 21h8'/></svg>"); }
[data-ico="acoustique"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 11v2M7.5 8v8M11.5 4.5v15M15.5 7v10M19.5 10v4'/></svg>"); }
[data-ico="pin"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21.5s7-6 7-11.5a7 7 0 1 0-14 0c0 5.5 7 11.5 7 11.5ZM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/></svg>"); }
[data-ico="escalier"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20h4.5v-4.5H12V11h4.5V6.5H21'/></svg>"); }
[data-ico="voiture"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 16.5v-4l1.8-4.5h11.4l1.8 4.5v4ZM4.5 16.5h15M7 16.5V19M17 16.5V19M7.5 12.5h2M14.5 12.5h2'/></svg>"); }
[data-ico="horloge"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM12 7.5V12l3 1.8'/></svg>"); }
[data-ico="pack"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12.5 3.5H19a1.5 1.5 0 0 1 1.5 1.5v6.5a1.5 1.5 0 0 1-.44 1.06l-8 8a1.5 1.5 0 0 1-2.12 0l-6.5-6.5a1.5 1.5 0 0 1 0-2.12l8-8A1.5 1.5 0 0 1 12.5 3.5Z'/><circle cx='16' cy='8' r='1.4'/></svg>"); }
[data-ico="check"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12.5l5 5 10-11'/></svg>"); }
[data-ico="cross"] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>"); }
[data-ico="whatsapp"] { --ico: var(--ico-whatsapp); }

[data-ico="check"]::before { background: var(--forest); }
[data-ico="whatsapp"]::before { background: var(--wa); }

/* Entete */

.site-header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: rgba(247, 242, 234, 0.92);
  border-block-end: 1px solid var(--line);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.2s ease;
}

/* Sur mobile, header-scroll.js ajoute cette classe en descendant et la
   retire en remontant ou en haut de page : le menu et le lien de langue se
   rangent, la marque et le bouton Reserver restent affiches. Above 56em
   l'entete tient sur une seule ligne et le script ne touche a rien. */
.site-header.is-condensed {
  box-shadow: 0 2px 10px rgba(33, 26, 20, 0.12);
}
.site-header.is-condensed .site-nav,
.site-header.is-condensed .lang-switch {
  display: none;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Le premier chiffre (l'espace entre les lignes empilees) est reduit sur
     mobile pour gagner de la hauteur ; le second (entre marque, menu, etc.
     sur une meme ligne) ne joue qu'a partir de 56em, ou l'entete tient sur
     une seule ligne. */
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.brand__name {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.brand__name strong { font-weight: 600; color: var(--brick-text); }

/* Selecteur de langue : un <details> natif, sans JavaScript. Partage la
   ligne du bouton Reserver (flex: 0 0 auto le maintient compact), rejoint
   le menu sur desktop. */
.lang-switch { position: relative; flex: 0 0 auto; }

.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--ink-2);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.lang-switch__toggle::-webkit-details-marker { display: none; }
.lang-switch__toggle:hover { border-color: var(--brick); color: var(--brick-text); }

.lang-switch__toggle::after {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-15%);
}
.lang-switch[open] .lang-switch__toggle::after { transform: rotate(-135deg) translateY(15%); }

.lang-switch__full { display: none; }
.lang-switch__short { display: inline; }

.lang-switch__list {
  position: absolute;
  /* Sur mobile le bouton est pres du bord gauche : le panneau s'ouvre vers
     la droite. A 56em+ il rejoint le bord droit de l'entete, pres du
     bouton Reserver : le panneau s'ouvre vers la gauche pour ne pas
     deborder de la fenetre. */
  inset-inline-start: 0;
  top: calc(100% + var(--space-2));
  z-index: 30;
  min-width: 9rem;
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 10px 30px rgba(33, 26, 20, 0.16);
  list-style: none;
}

.lang-switch__list a,
.lang-switch__list span {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.9rem;
  text-decoration: none;
}
.lang-switch__list a:hover { background: var(--paper-2); color: var(--brick-text); }
.lang-switch__list [aria-current="page"] { color: var(--brick-text); font-weight: 600; }

.site-nav { flex: 1 1 100%; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding-block: 0.7rem;
  border-block-end: 2px solid transparent;
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav a:hover { color: var(--brick-text); border-block-end-color: var(--brick); }

/* Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 600 var(--step-0)/1.3 var(--sans);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
}

.btn--primary {
  background-color: var(--brick);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.06));
  color: var(--cream);
}
.btn--primary:hover { background-color: var(--ink); color: var(--cream); }

.btn--ghost { border-color: var(--ink-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--wa); color: var(--ink); }

.btn--sm { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.92rem; }

/* Sur mobile l'entete empile marque, navigation, puis le lien de langue et
   le bouton Reserver partagent une derniere ligne (le bouton s'etire dans
   l'espace restant) : l'ordre visuel reste exactement l'ordre du DOM, donc
   celui du clavier. */
.site-header .btn--sm { flex: 1 1 auto; }

/* Bouton WhatsApp permanent, en bas a droite */

.wa-float {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid #128c7e;
  border-radius: 50%;
  background: var(--wa-vif);
  box-shadow: 0 6px 20px rgba(33, 26, 20, 0.3);
}

.wa-float::before {
  content: "";
  width: 28px;
  height: 28px;
  background: #fff;
  -webkit-mask: var(--ico-whatsapp) center / contain no-repeat;
  mask: var(--ico-whatsapp) center / contain no-repeat;
}

.wa-float:hover { background: #128c7e; }
.wa-float:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Hero */

.hero {
  padding-block: var(--space-16) var(--space-12);
  border-block-end: 1px solid var(--line);
  background-image:
    radial-gradient(58% 70% at 10% -12%, rgba(169, 75, 38, 0.16), rgba(247, 242, 234, 0) 68%),
    radial-gradient(42% 56% at 92% 8%, rgba(35, 71, 58, 0.13), rgba(247, 242, 234, 0) 70%);
}

.hero__inner > .eyebrow,
.hero__inner > p { max-width: 44rem; color: var(--ink-2); }
.hero__inner > h1 { max-width: 18ch; margin-block-end: var(--space-6); }
.hero__inner > .lead { color: var(--ink); font-size: var(--step-1); line-height: 1.5; }
.hero__inner > .hero__note { color: var(--ink-2); font-size: 0.92rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
  color: var(--brick-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 2px;
  background: var(--brick);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block: var(--space-8) var(--space-4);
  max-width: none;
}

.facts {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-12) 0 0;
  padding: var(--space-8) 0;
  border-block: 1px solid var(--line);
  list-style: none;
  color: var(--ink-2);
  font-size: 0.9rem;
}

.facts li { min-width: 0; }

.facts strong {
  display: block;
  margin-block-end: var(--space-1);
  color: var(--brick-text);
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Bandes profondes : la galerie et le bloc de reservation.
   Les jetons sont redefinis, tout le reste s'y adapte sans regle supplementaire. */

.gallery,
main > .band:last-child {
  --paper: #23473a;
  --paper-2: #1d3b30;
  --card: #2b5546;
  --ink: #f4efe6;
  --ink-2: #c3d2cb;
  --line: #3c6455;
  --brick-text: #f5bc96;
  --focus: #f5bc96;
  --wa: var(--wa-vif);
  background-color: var(--paper);
  color: var(--ink);
  background-image:
    radial-gradient(58% 62% at 18% -6%, rgba(245, 188, 150, 0.17), rgba(35, 71, 58, 0) 70%),
    radial-gradient(40% 50% at 95% 96%, rgba(245, 188, 150, 0.1), rgba(35, 71, 58, 0) 70%);
}

/* Galerie */

.gallery { padding-block: var(--space-16); }

.gallery__grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.gallery__grid > li { min-width: 0; }

.shot { margin: 0; }

.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.shot--wide img { aspect-ratio: 16 / 9; }
.shot--portrait img { aspect-ratio: 3 / 4; }

.ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--paper-2);
  background-image:
    radial-gradient(52% 62% at 50% 12%, rgba(245, 188, 150, 0.22), rgba(29, 59, 48, 0) 72%);
}

.ph::after {
  content: attr(data-ph);
  color: var(--ink-2);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shot--wide .ph { aspect-ratio: 16 / 9; }
.shot--portrait .ph { aspect-ratio: 3 / 4; }

figcaption {
  margin-block-start: var(--space-3);
  color: var(--ink-2);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* Bandes */

.band {
  padding-block: var(--space-20);
  background-image:
    radial-gradient(46% 58% at 88% 0%, rgba(169, 75, 38, 0.1), rgba(247, 242, 234, 0) 72%);
}

.band--alt {
  background-color: var(--paper-2);
  background-image:
    radial-gradient(46% 58% at 8% 0%, rgba(35, 71, 58, 0.1), rgba(239, 231, 218, 0) 72%);
}

[id] { scroll-margin-top: 5rem; }

.band h2 {
  max-width: 26ch;
  margin-block-end: var(--space-8);
}

.band h2::before {
  content: "";
  display: block;
  width: 6rem;
  height: 3px;
  margin-block-end: var(--space-6);
  background: linear-gradient(to right, var(--brick-text), rgba(169, 75, 38, 0));
}

.prose { max-width: 46rem; }
.prose p { color: var(--ink-2); }
.prose + .cards { margin-block-start: var(--space-8); }

.center { text-align: center; margin-block-start: var(--space-12); }

.h2-like { margin-block: var(--space-20) var(--space-8); }

/* Cartes */

.cards { display: grid; gap: var(--space-6); }
.cards > * { min-width: 0; }

.card {
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--card);
  background-image:
    radial-gradient(70% 80% at 0% 0%, rgba(169, 75, 38, 0.06), rgba(255, 253, 248, 0) 62%);
}

.card h3, .card h4 { margin-block-end: var(--space-4); }
.card p { color: var(--ink-2); }

/* Compris / Non compris : le titre reprend la couleur de son icone et la
   carte recoit un lavis tres doux dans le meme ton, pour que le positif et
   le negatif se distinguent au premier coup d'oeil, sans toucher au HTML. */
.card:has(> [data-ico="check"]) {
  border-color: rgba(35, 71, 58, 0.28);
  background-image: linear-gradient(rgba(35, 71, 58, 0.09), rgba(35, 71, 58, 0) 65%);
}
.card:has(> [data-ico="check"]) h3 { color: var(--forest); }

.card:has(> [data-ico="cross"]) {
  border-color: rgba(169, 75, 38, 0.28);
  background-image: linear-gradient(rgba(169, 75, 38, 0.09), rgba(169, 75, 38, 0) 65%);
}
.card:has(> [data-ico="cross"]) h3 { color: var(--brick-text); }
.card > h3:not(:first-child) { margin-block-start: var(--space-8); }
.card .h2-like { margin-block: var(--space-8) var(--space-4); }

.card--offer { display: flex; flex-direction: column; }

.card__sub {
  margin-block-start: calc(-1 * var(--space-2));
  color: var(--brick-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.card__price {
  margin-block: auto 0;
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--line);
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.15;
}

.card__price a { color: var(--ink); text-decoration: none; }
.card__price a:hover { color: var(--brick-text); text-decoration: underline; }

/* Listes de definitions */

.defs { margin: 0; }
.defs dt { color: var(--ink); font-weight: 600; }
.defs dd {
  margin: 0 0 var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--line);
  color: var(--ink-2);
}
.defs dd:last-child { margin-block-end: 0; padding-block-end: 0; border-block-end: 0; }

.ticks { margin: 0 0 var(--space-8); padding: 0; list-style: none; color: var(--ink-2); }
.ticks li { padding-block: 0.55rem; border-block-end: 1px solid var(--line); }
.ticks li:last-child { border-block-end: 0; }

/* Etapes */

.steps {
  counter-reset: step;
  max-width: 48rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  position: relative;
  padding: 0 0 var(--space-8) 4rem;
  color: var(--ink-2);
}

.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: -0.1em;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--brick-text);
  border-radius: 50%;
  box-shadow: 0 0 0 0.35rem rgba(169, 75, 38, 0.07);
  color: var(--brick-text);
  font: 600 0.78rem/1 var(--sans);
  letter-spacing: 0.06em;
}

.steps li::after {
  content: "";
  position: absolute;
  inset-inline-start: 1.3rem;
  top: 3rem;
  bottom: 0.4rem;
  width: 1px;
  background: var(--line);
}

.steps li:last-child { padding-block-end: 0; }
.steps li:last-child::after { content: none; }
.steps strong { color: var(--ink); font-weight: 600; }

/* Equipe */

.team { display: grid; gap: var(--space-8); }
.team > * { min-width: 0; }
.team .shot { max-width: 22rem; }

/* Tableaux */

.table-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
}

caption {
  margin-block-end: var(--space-4);
  color: var(--ink-2);
  font-size: 0.84rem;
  text-align: start;
}

th, td {
  padding: var(--space-4);
  border-block-end: 1px solid var(--line);
  text-align: start;
  vertical-align: baseline;
}

thead th {
  border-block-end: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody th { color: var(--ink); font-weight: 400; }
tbody td { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.rates { margin-block-end: var(--space-12); }
.rates tbody th { min-width: 13rem; }
.rates tbody td {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.trips tbody td { color: var(--ink-2); }

/* FAQ */

.faq { max-width: 54rem; border-block-start: 1px solid var(--line); }

.faq details { border-block-end: 1px solid var(--line); }

.faq summary {
  position: relative;
  padding-block: var(--space-4);
  padding-inline-end: 2.5rem;
  cursor: pointer;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  list-style: none;
}

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

.faq summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: calc(var(--space-4) + 0.25em);
  width: 1.15rem;
  height: 1.15rem;
  background: var(--brick-text);
  -webkit-mask: var(--ico-plus) center / contain no-repeat;
  mask: var(--ico-plus) center / contain no-repeat;
}

.faq details[open] summary { color: var(--brick-text); }
.faq details[open] summary::after {
  -webkit-mask-image: var(--ico-moins);
  mask-image: var(--ico-moins);
}
.faq p { max-width: 48rem; padding-block-end: var(--space-6); color: var(--ink-2); }

/* Reservation */

/* .booking partage le meme habillage que .card contact (bordure, fond dans
   le meme ton, rayon) : ce sont deux cartes equivalentes cote a cote. */
.card.booking { display: flex; flex-direction: column; }

.booking__frame {
  display: grid;
  flex: 1;
  gap: var(--space-6);
  place-items: center;
  min-height: 10rem;
  text-align: center;
}

.booking__hint { max-width: 36rem; color: var(--ink-2); }

/* Carte de localisation : meme logique que .booking, la carte Google Maps
   ne se charge qu'au clic (voir map.js), jamais au chargement de la page. */
.map { padding: 0; margin-block-end: var(--space-8); }

.map__iframe {
  display: block;
  width: 100%;
  height: 20rem;
  border: 0;
  border-radius: var(--radius-lg);
}

.contact { max-width: 36rem; }

/* Pied de page */

.site-footer {
  padding-block: var(--space-16);
  border-block-start: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 0.95rem;
}

.footer__brand {
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
}

.site-footer address {
  margin-block-end: var(--space-6);
  font-style: normal;
  line-height: 1.9;
}

.site-footer address a { display: inline-flex; align-items: center; }

.legal details { border-block-end: 1px solid var(--line); }
.legal summary { padding-block: var(--space-4); color: var(--ink); cursor: pointer; font-weight: 600; }
.legal p { padding-block-end: var(--space-4); }

.footer__meta { margin-block-start: var(--space-12); font-size: 0.84rem; }

/* Ecrans plus larges */

@media (min-width: 40em) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid > li:has(.shot--wide) { grid-column: span 2; }
  .cards--2 { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: 20rem 1fr; align-items: center; gap: var(--space-12); }
  .booking__frame { padding-inline: var(--space-12); }
  .card { padding: var(--space-8) var(--space-12); }
  .map { padding: 0; }
  .wa-float { inset-block-end: 1.5rem; inset-inline-end: 1.5rem; width: 60px; height: 60px; }
}

@media (min-width: 56em) {
  .site-header__inner { flex-wrap: nowrap; }
  .brand { flex: 0 1 auto; }
  .brand__name { font-size: 1.05rem; }
  .site-nav { flex: 0 1 auto; margin-inline-start: var(--space-8); }
  .lang-switch { margin-inline-start: auto; }
  .lang-switch__full { display: inline; }
  .lang-switch__short { display: none; }
  .lang-switch__list { inset-inline-start: auto; inset-inline-end: 0; }
  .site-header .btn--sm { flex: none; margin-inline-start: var(--space-3); }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .facts li + li { padding-inline-start: var(--space-6); border-inline-start: 1px solid var(--line); }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .hero { padding-block: var(--space-20) var(--space-16); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}