/* ==========================================================================
   MÉRA — Page Réserver (reservation.html uniquement)
   Référence : Méra_final_bref/Réserver une table.png
   Mobile-first ; breakpoints identiques à responsive.css (768 / 1024 / 1440).
   ≥ 768px : mêmes conventions que La maison — positions et tailles exprimées
   en fraction de --W, la largeur de composition (cadre desktop de la maquette,
   x 210,5 → 794,5, 584 px), relevées sur la maquette.
   ========================================================================== */

.rsv {
  container-type: inline-size;
  --W: min(100cqw, 105rem);
}

/* ---- Éléments partagés ---------------------------------------------------- */

/* Titres serif en capitales (VOTRE RÉSERVATION, LA SALLE, LE COMPTOIR…) */
.rsv-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Titre suivi d'un filet court (LA SALLE ——) */
.rsv-title--ruled {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.rsv-title--ruled::after {
  content: "";
  flex: none;
  width: 2.5rem;
  height: var(--rule-width);
  background-color: currentColor;
}

.rsv-text {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.35;
}

/* Photographies : chaque fichier porte une fine bande unie sur certains bords
   (capture d'origine). L'image est agrandie de cette bande, qui sort du cadre ;
   le fichier n'est pas retouché. Cadrage : object-fit cover + object-position. */

/* ==========================================================================
   01 — Hero
   ========================================================================== */

.rsv-hero {
  position: relative;
  container-type: inline-size;
  --W: min(100cqw, 105rem);
  --frame-left: calc((100cqw - var(--W)) / 2);
  --split: calc(var(--frame-left) + var(--W) * 0.3604);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height) - var(--rule-width));
  min-height: calc(100svh - var(--header-height) - var(--rule-width));
  background-color: var(--color-ivory);
}

.rsv-hero__visual {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.rsv-hero__media {
  display: block;
  position: relative;
  flex: 1 0 auto;
  min-height: 60cqw;
  overflow: hidden;
}

/* bande : gauche 11 px, haut 8 px sur 1862 × 628 */
.rsv-hero__media img {
  position: absolute;
  top: -1.2903%;
  left: -0.5943%;
  width: 100.5943%;
  max-width: none;
  height: 101.2903%;
  object-fit: cover;
  object-position: var(--rsv-hero-pos, 66% 50%);
}

.rsv-hero__title {
  font-family: var(--font-sans-condensed-temp);
  font-weight: var(--weight-black);
  font-stretch: condensed;
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow: hidden;
}

.rsv-hero__lines {
  display: block;
}

/* Copie ivoire du titre, découpée à l'aplomb du bord de la photographie */
.rsv-hero__lines--over {
  position: absolute;
  inset: 0;
  color: var(--color-ivory);
  clip-path: inset(0 0 0 100%);
}

.rsv-hero__inner {
  position: relative;
}

.rsv-hero__cta {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.rsv-hero__cta-label {
  font-weight: var(--weight-bold);
}

/* Mobile : titre et accroche posés sur la photographie (maquette) */
@media (max-width: 767.98px) {
  .rsv-hero__title,
  .rsv-hero__kicker {
    position: absolute;
    left: var(--grid-gutter);
    right: var(--grid-gutter);
    z-index: 1;
    margin: 0;
    color: var(--color-ivory);
  }

  .rsv-hero__title {
    bottom: 4.5rem;
    font-size: min(4.46rem, 16.4cqw); /* taille commune des titres de hero (mobile) */
    line-height: 0.84;
    letter-spacing: -0.015em;
  }

  .rsv-hero__kicker {
    bottom: var(--space-5);
    font-size: 0.75rem;
  }

  .rsv-hero__lines--over {
    display: none;
  }

  .rsv-hero__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-5);
    padding-block: var(--space-5);
  }

  .rsv-hero__cta-label {
    display: none; /* la maquette ne garde que la pastille en mobile */
  }

  .rsv-hero__cta .btn-round {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* ---- Hero ≥ 768px : composition calée sur la maquette --------------------
     hauteur 55,3 %W, jamais moins que la hauteur visible sous le header
     (même règle que le hero de l'accueil) · photo de 36,04 % à 100 %W
     titre : cap l. 1 7,28 %W · cap l. 2 21,49 %W · accroche cap 36,39 %W
     infos cap 46,15 %W · libellé CTA cap 46,49 %W · centre pastille 48,8 %W
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Hero compact : il tient dans la hauteur de l'écran sous le header.
     Les blocs de gauche et le CTA sont ancrés sur le bas du hero
     (espacements resserrés) ; le titre reste ancré sous le header. */
  .rsv-hero {
    --rsv-bottom: calc(var(--W) * 0.02);
    --rsv-info-h: calc(var(--W) * 0.0564);
    --rsv-gap: calc(var(--W) * 0.0364);
    --rsv-kicker-bottom: calc(var(--rsv-bottom) + var(--rsv-info-h) + var(--rsv-gap));
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  .rsv-hero__visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
  }

  .rsv-hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    left: var(--split);
    min-height: 0;
  }

  .rsv-hero__media img {
    --rsv-hero-pos: 48% 50%;
  }

  .rsv-hero__inner {
    height: max(var(--W) * 0.515, 100vh - var(--header-height) - var(--rule-width));
    height: max(var(--W) * 0.515, 100svh - var(--header-height) - var(--rule-width));
    padding-block: 0;
  }

  .rsv-hero__inner > *,
  .rsv-hero__visual > .rsv-hero__title,
  .rsv-hero__visual > .rsv-hero__kicker {
    position: absolute;
    margin: 0;
  }

  .rsv-hero__title,
  .rsv-hero__title[data-reveal="clip"] {
    top: calc(var(--W) * 0.00825 - 0.2em);
    left: calc(var(--frame-left) + var(--grid-gutter));
    /* taille commune des titres de hero : « UNE TABLE » dépasse la gouttière
       droite, le bloc n'est pas borné à droite pour ne pas la rogner */
    right: 0;
    z-index: 1;
    margin-top: 0;
    padding-top: 0.2em;
    font-size: calc(var(--W) * 0.184);
    line-height: 0.8;
    letter-spacing: -0.015em;
    white-space: nowrap;
  }

  /* Bloc de référence de la copie ivoire (voir La maison) */
  .rsv-hero__title .reveal-line {
    position: relative;
  }

  .rsv-hero__lines:not(.rsv-hero__lines--over) {
    clip-path: inset(0 calc(100% - (var(--split) - var(--frame-left) - var(--grid-gutter))) 0 0);
  }

  .rsv-hero__lines--over {
    clip-path: inset(0 0 0 calc(var(--split) - var(--frame-left) - var(--grid-gutter)));
  }

  .rsv-hero__kicker {
    bottom: var(--rsv-kicker-bottom);
    left: calc(var(--frame-left) + var(--grid-gutter));
    font-size: max(0.75rem, var(--W) * 0.016);
    line-height: calc(var(--W) * 0.0257);
  }

  .rsv-hero__info {
    bottom: var(--rsv-bottom);
    left: var(--grid-gutter);
    font-size: max(0.6875rem, var(--W) * 0.012);
    line-height: calc(var(--W) * 0.0188);
  }

  .rsv-hero__cta {
    /* pastille : diamètre commun aux heroes (référence : Édition) ;
       le centre de la pastille reste à sa place */
    --cta-size: max(2.75rem, var(--W) * 0.0429);
    bottom: calc(var(--W) * 0.065 - var(--cta-size) / 2); /* maquette : centre de la pastille à 6,5 %W du bas du hero */
    right: var(--grid-gutter);
    z-index: 2;
    gap: calc(var(--W) * 0.0224); /* libellé : même système que le CTA du hero Édition */
    color: var(--color-ivory);
    text-align: left; /* maquette : les deux lignes alignées à gauche */
  }

  /* Même système que .hero__cta-label (Édition) : centré sur la pastille */
  .rsv-hero__cta-label {
    font-size: max(0.6875rem, var(--W) * 0.0112);
    line-height: calc(var(--W) * 0.0189);
  }

  .rsv-hero__cta .btn-round {
    width: var(--cta-size);
    height: var(--cta-size);
  }

  .rsv-hero__cta .btn-round svg {
    width: 36%;
    height: 36%;
  }
}

/* ==========================================================================
   02 — Formulaire
   ========================================================================== */

.rsv-form {
  padding: var(--space-6) var(--grid-gutter) var(--space-7);
  background-color: var(--surface-bg);
  color: var(--surface-fg);
}

.rsv-form__form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.rsv-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.rsv-field__label {
  font-weight: var(--weight-bold);
}

.rsv-field__control {
  position: relative;
}

/* Champ : aplat noir légèrement éclairci (filet ivoire dilué, palette seule) */
.rsv-field__input {
  display: block;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0 2.75rem 0 var(--space-4);
  border: var(--rule-width) solid var(--color-rule-on-dark-soft);
  border-radius: var(--radius-none);
  background-color: rgb(242 239 232 / 0.06);
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-size: 1rem; /* ≥ 16px : pas de zoom automatique sur iOS */
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  cursor: pointer;
  transition: border-color var(--duration-fast) linear,
    background-color var(--duration-fast) linear;
}

/* Champs de saisie libre : pas d'icône à droite, donc pas de réserve d'espace */
.rsv-field__input--text {
  padding-right: var(--space-4);
  cursor: text;
}

/* Demande particulière : même langage graphique que les autres champs */
.rsv-field__input--area {
  min-height: 6rem;
  padding: 0.75rem var(--space-4);
  line-height: 1.4;
  resize: vertical;
  cursor: text;
}

.rsv-field__input::placeholder {
  color: var(--color-muted-on-dark);
  opacity: 1;
}

.rsv-field__optional {
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: 0;
}

.rsv-field__help {
  margin-top: var(--space-2);
  color: var(--color-muted-on-dark);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.rsv-field__input option {
  background-color: var(--color-black);
  color: var(--color-ivory);
}

/* Icône native du sélecteur de date masquée : l'icône de la maquette la remplace,
   le champ entier ouvre le calendrier. */
.rsv-field__input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}

.rsv-field__input::-webkit-datetime-edit {
  padding: 0;
}

.rsv-field__icon {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Indicatif du champ date vide (le label reste le libellé du champ) :
   le masque natif jj/mm/aaaa est masqué tant que le champ est vide et sans focus. */
.rsv-field__hint {
  position: absolute;
  top: 50%;
  right: 2.75rem;
  left: calc(var(--space-4) + var(--rule-width));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-muted-on-dark);
  font-family: var(--font-sans);
  font-size: inherit;
  line-height: 1.2;
  transform: translateY(-50%);
  pointer-events: none;
  visibility: hidden;
}

.rsv-field__input.is-empty:not(:focus) {
  color: transparent;
}

.rsv-field__input.is-empty:not(:focus) ~ .rsv-field__hint {
  visibility: visible;
}

/* États */
@media (hover: hover) {
  .rsv-field__input:hover {
    border-color: var(--color-rule-on-dark);
  }
}

.rsv-field__input:focus-visible {
  outline: 2px solid var(--color-ivory);
  outline-offset: 2px;
  border-color: var(--color-ivory);
}

/* Valeur choisie (date renseignée, option changée) : aplat plus franc */
.rsv-field__input.is-filled {
  background-color: rgb(242 239 232 / 0.1);
  border-color: var(--color-rule-on-dark);
}

.rsv-field__input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rsv-field__input[aria-invalid="true"] {
  border-color: var(--color-ivory);
  border-width: 2px;
}

.rsv-field__error {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

.rsv-field__error:empty {
  display: none;
}

.rsv-field__error::before {
  content: "— ";
}

.rsv-form__submit {
  width: 100%;
  min-height: 3.25rem;
}

.rsv-form__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rsv-form__submit:disabled:hover {
  background-color: var(--color-cobalt);
  border-color: var(--color-cobalt);
  color: var(--color-ivory);
}

/* Confirmation / erreur globale : bloc filaire ivoire */
.rsv-form__status:empty {
  display: none;
}

.rsv-form__status {
  padding: var(--space-4);
  border: var(--rule-width) solid var(--color-rule-on-dark);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.35;
}

/* Récapitulatif puis mention de démonstration, sur deux lignes */
.rsv-form__status span {
  display: block;
}

.rsv-form__status span + span {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--color-muted-on-dark);
}

.rsv-form__status strong {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---- Formulaire ≥ 768px ---------------------------------------------------
     bande 32,19 %W · intro à gauche · filet vertical à 41,35 %W
     champs : 2 colonnes de 25,17 %W (43,92 → 69,09 · 71,49 → 96,66 %W),
     hauteur 4,62 %W · bouton 30,66 × 5,31 %W
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .rsv-form {
    display: grid;
    grid-template-columns: calc(var(--W) * 0.4135 - var(--grid-gutter)) minmax(0, 1fr);
    align-items: start;
    min-height: calc(var(--W) * 0.3219);
    /* respiration sous le bouton avant la photo de La salle */
    padding: 0 var(--grid-gutter) calc(var(--W) * 0.039);
  }

  /* Colonne de gauche centrée verticalement dans la bande noire */
  .rsv-form__intro {
    align-self: center;
    padding-top: calc(var(--W) * 0.039);
  }

  .rsv-form .rsv-title {
    font-size: calc(var(--W) * 0.03);
    line-height: 1;
  }

  .rsv-form__text {
    margin-top: calc(var(--W) * 0.0297);
    font-size: max(0.9375rem, var(--W) * 0.0218);
    line-height: calc(var(--W) * 0.0287);
  }

  .rsv-form__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--W) * 0.024);
    row-gap: 0;
    align-content: start;
    margin: calc(var(--W) * 0.0334) 0 0;
    padding-left: calc(var(--W) * 0.0257);
    border-left: var(--rule-width) solid var(--color-rule-on-dark-soft);
    min-height: calc(var(--W) * 0.2483);
  }

  .rsv-field {
    gap: 0;
  }

  .rsv-field__label {
    margin-top: calc(var(--W) * -0.00172);
    font-size: max(0.6875rem, var(--W) * 0.012);
  }

  .rsv-field__control {
    margin-top: calc(var(--W) * 0.00842);
  }

  .rsv-field__input {
    height: max(2.75rem, var(--W) * 0.0462);
    min-height: 0;
    padding: 0 calc(var(--W) * 0.035) 0 calc(var(--W) * 0.0163);
    font-size: max(0.875rem, var(--W) * 0.0135);
  }

  .rsv-field__hint {
    right: calc(var(--W) * 0.035);
    left: calc(var(--W) * 0.0163 + var(--rule-width));
    font-size: max(0.875rem, var(--W) * 0.0135);
  }

  .rsv-field__icon {
    right: calc(var(--W) * 0.0125);
    width: max(0.875rem, var(--W) * 0.0125);
    height: max(0.875rem, var(--W) * 0.0125);
  }

  .rsv-field:nth-of-type(n + 3) {
    margin-top: calc(var(--W) * 0.02571);
  }

  /* Demande particulière : pleine largeur, sous les six champs */
  .rsv-field--full {
    grid-column: 1 / -1;
  }

  .rsv-field__input--text {
    padding-right: calc(var(--W) * 0.0163);
  }

  .rsv-field__input--area {
    height: auto;
    min-height: calc(var(--W) * 0.0924);
    padding: calc(var(--W) * 0.0112) calc(var(--W) * 0.0163);
  }

  .rsv-field__help {
    margin-top: calc(var(--W) * 0.005);
    font-size: max(0.75rem, var(--W) * 0.009);
  }

  .rsv-field__error {
    margin-top: calc(var(--W) * 0.005);
    font-size: max(0.75rem, var(--W) * 0.009);
  }

  .rsv-form__actions {
    grid-column: 1 / -1;
    margin-top: calc(var(--W) * 0.03081);
  }

  .rsv-form__submit {
    width: calc(var(--W) * 0.3066);
    height: max(2.75rem, var(--W) * 0.0531);
    min-height: 0;
    font-size: max(0.75rem, var(--W) * 0.0141);
  }

  .rsv-form__status {
    grid-column: 1 / -1;
    margin: calc(var(--W) * 0.015) 0 calc(var(--W) * 0.02);
    font-size: max(0.9375rem, var(--W) * 0.0125);
  }
}

/* ==========================================================================
   03 — La salle
   ========================================================================== */

.rsv-salle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 45%;
  grid-template-areas:
    "title media"
    "body body";
  column-gap: var(--space-4);
  padding: var(--space-5) 0 var(--space-5) var(--grid-gutter);
  background-color: var(--surface-bg);
}

.rsv-salle__content {
  display: contents;
}

.rsv-salle .rsv-title {
  grid-area: title;
  align-self: center;
}

.rsv-salle .rsv-title--ruled::after {
  display: none; /* le filet n'apparaît qu'en desktop (maquette) */
}

.rsv-salle__media {
  grid-area: media;
  aspect-ratio: 176 / 80;
}

/* bande : gauche 3 px, haut 2 px, bas 6 px sur 926 × 614 */
.rsv-salle__media img {
  position: absolute;
  top: -0.33%;
  left: -0.325%;
  width: 100.325%;
  max-width: none;
  height: 101.32%;
  object-position: var(--rsv-salle-pos, 50% 50%);
}

.rsv-salle .rsv-text,
.rsv-salle .link-arrow {
  grid-column: 1 / -1;
  margin-right: var(--grid-gutter);
}

.rsv-salle .rsv-text {
  margin-top: var(--space-3);
}

.rsv-salle .link-arrow {
  justify-self: start;
  margin-top: var(--space-2);
}

/* ==========================================================================
   04 — Le comptoir (mobile : photo puis texte sur ivoire ; desktop : bloc noir)
   ========================================================================== */

.rsv-comptoir__media {
  aspect-ratio: 390 / 151;
}

/* bande : haut 1 px, droite 6 px, bas 8 px sur 928 × 614 */
.rsv-comptoir__media img {
  position: absolute;
  top: -0.1653%;
  left: 0;
  width: 100.6508%;
  max-width: none;
  height: 101.4876%;
  object-position: var(--rsv-comptoir-pos, 50% 50%);
}

.rsv-comptoir__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--grid-gutter);
  background-color: var(--color-ivory);
  color: var(--color-black);
}

/* ==========================================================================
   05 — Informations pratiques
   ========================================================================== */

.rsv-infos {
  padding: var(--space-5) var(--grid-gutter) var(--space-6);
  border-top: var(--rule-width) solid var(--color-rule-on-light-soft);
  background-color: var(--surface-bg);
}

.rsv-infos .rsv-title {
  font-size: 1.625rem;
}

.rsv-infos__list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  list-style: none;
}

.rsv-info {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--space-4);
  align-items: start;
}

.rsv-info__icon {
  grid-row: 1 / span 2;
  width: 1.5rem;
  height: 1.5rem;
}

.rsv-info__label {
  font-weight: var(--weight-bold);
}

.rsv-info__text {
  color: var(--surface-muted);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.25;
}

/* Horaires détaillés : un jour (ou groupe de jours) par ligne, fermetures
   affichées explicitement. Horaires validés : mardi → samedi, 19 h → 23 h. */
.rsv-hours {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.rsv-hours__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  align-items: baseline;
}

.rsv-hours__day {
  color: var(--surface-fg);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.rsv-hours__time {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.rsv-hours__time--closed {
  color: var(--surface-muted);
}

/* ---- Salle / Comptoir / Infos ≥ 768px -------------------------------------
     La salle : 26,28 %W, texte 0 → 40,15 %W, photo jusqu'au bord
     Le comptoir : 27,74 %W, photo 0 → 58,9 %W, texte sur noir
     Infos : 21,23 %W, trois colonnes à 3,77 / 34,4 / 66,95 %W,
     filets verticaux à 31,0 et 63,7 %W
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .rsv-salle {
    grid-template-columns: calc(var(--W) * 0.4015) minmax(0, 1fr);
    grid-template-areas: none;
    column-gap: 0;
    min-height: calc(var(--W) * 0.2628);
    padding: 0;
  }

  .rsv-salle__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--W) * 0.04092) calc(var(--W) * 0.02) 0 var(--grid-gutter);
  }

  .rsv-salle .rsv-title {
    align-self: auto;
    gap: calc(var(--W) * 0.0462);
    font-size: calc(var(--W) * 0.0355);
  }

  .rsv-salle .rsv-title--ruled::after {
    display: block;
    width: calc(var(--W) * 0.0582);
  }

  .rsv-salle__media {
    grid-area: auto;
    aspect-ratio: auto;
  }

  .rsv-salle .rsv-text,
  .rsv-salle .link-arrow {
    margin-right: 0;
  }

  .rsv-comptoir {
    display: grid;
    grid-template-columns: calc(var(--W) * 0.589) minmax(0, 1fr);
    min-height: calc(var(--W) * 0.2774);
  }

  .rsv-comptoir__media {
    aspect-ratio: auto;
  }

  .rsv-comptoir__content {
    --surface-bg: var(--color-black);
    --surface-fg: var(--color-ivory);
    --surface-muted: var(--color-muted-on-dark);
    --surface-rule: var(--color-rule-on-dark);
    --surface-rule-soft: var(--color-rule-on-dark-soft);
    --focus-color: var(--color-ivory);
    gap: 0;
    padding: calc(var(--W) * 0.03679) calc(var(--W) * 0.02) 0 calc(var(--W) * 0.042);
    background-color: var(--color-black);
    color: var(--color-ivory);
  }

  .rsv-comptoir .rsv-title {
    font-size: calc(var(--W) * 0.03);
  }

  .rsv-salle .rsv-text,
  .rsv-comptoir .rsv-text {
    font-size: max(0.9375rem, var(--W) * 0.0218);
    line-height: calc(var(--W) * 0.0277);
  }

  .rsv-salle .rsv-text {
    margin-top: calc(var(--W) * 0.02938);
  }

  .rsv-salle .link-arrow {
    margin-top: calc(var(--W) * 0.01816);
  }

  .rsv-comptoir .rsv-text {
    margin-top: calc(var(--W) * 0.03041);
  }

  .rsv-comptoir .link-arrow {
    margin-top: calc(var(--W) * 0.01615);
  }

  .rsv-salle .link-arrow,
  .rsv-comptoir .link-arrow {
    font-size: max(0.6875rem, var(--W) * 0.0134);
  }

  .rsv-infos {
    min-height: calc(var(--W) * 0.2123);
    padding: calc(var(--W) * 0.0196) var(--grid-gutter) 0;
    border-top: 0;
  }

  .rsv-infos .rsv-title {
    font-size: calc(var(--W) * 0.03);
  }

  .rsv-infos__list {
    grid-template-columns: calc(var(--W) * 0.31 - var(--grid-gutter)) calc(var(--W) * 0.327) minmax(0, 1fr);
    gap: 0;
    margin-top: calc(var(--W) * 0.01971);
  }

  .rsv-info {
    grid-template-columns: calc(var(--W) * 0.0605) minmax(0, 1fr);
    column-gap: 0;
    min-height: calc(var(--W) * 0.1027);
  }

  .rsv-info + .rsv-info {
    padding-left: calc(var(--W) * 0.03);
    border-left: var(--rule-width) solid var(--color-rule-on-light-soft);
  }

  .rsv-info__icon {
    width: calc(var(--W) * 0.04);
    height: calc(var(--W) * 0.04);
    margin-top: calc(var(--W) * 0.0103);
  }

  .rsv-info__label {
    margin-top: calc(var(--W) * 0.01369);
    font-size: max(0.6875rem, var(--W) * 0.012);
  }

  .rsv-info__text {
    margin-top: calc(var(--W) * 0.00587);
    font-size: max(0.9375rem, var(--W) * 0.016);
    line-height: calc(var(--W) * 0.0238);
  }

  .rsv-hours {
    gap: calc(var(--W) * 0.0042);
  }

  .rsv-hours__day {
    font-size: max(0.6875rem, var(--W) * 0.0105);
  }

  /* Les horaires ne viennent pas toucher le filet de la colonne suivante */
  .rsv-hours__time {
    padding-right: calc(var(--W) * 0.022);
  }
}

/* Tablette : colonnes étroites, les retours à la ligne de la maquette desktop
   sont libérés pour éviter des coupes hachées. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .rsv-info__text br {
    display: none;
  }

  /* Colonnes étroites : le jour passe au-dessus de son horaire */
  .rsv-hours__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .rsv-hours__time {
    text-align: left;
  }

  .rsv-hours__row + .rsv-hours__row {
    margin-top: calc(var(--W) * 0.008);
  }
}