/**
 * Réservation de salles : mise en page de la liste, des fiches et du formulaire de demande
 *
 * Toujours chargée avec les gabarits de l'extension, quel que soit le thème. Les couleurs reprennent par défaut
 * celles du thème (couleur du texte, palette theme.json) ; un thème les règle par les variables --reservation-*
 * déclarées sur :root. Boutons : ceux du thème (filtre sba_reservation_display), ou assets/reservation-habillage.css.
 */

:where(:root) {
  --reservation-ink: currentColor;
  --reservation-soft: color-mix(in srgb, currentColor 72%, transparent);
  --reservation-line: color-mix(in srgb, currentColor 18%, transparent);
  --reservation-surface: transparent;
  --reservation-surface-alt: color-mix(in srgb, currentColor 5%, transparent);
  --reservation-brand: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, currentColor));
  --reservation-brand-soft: color-mix(in srgb, var(--reservation-brand) 10%, transparent);
  --reservation-on-brand: var(--wp--preset--color--base, #fff);
  --reservation-focus: var(--reservation-brand);
  --reservation-danger: #b3261e;
  --reservation-field-border: 1px solid var(--reservation-soft);
  --reservation-field-background: var(--reservation-surface);
  --reservation-radius: 0.375rem;
  --reservation-panel-radius: 0.75rem;
  --reservation-panel-border: 1px solid var(--reservation-line);
  --reservation-gap: clamp(1.5rem, 3vw, 2.5rem);
  --reservation-heading-font: inherit;
  --reservation-sticky-offset: 0px; /* Hauteur d'un en-tête collant, pour l'encadré « Réserver » */
}

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

.reservation-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reservation-precision {
  display: block;
  font-size: 0.875em;
  font-weight: 400;
  color: var(--reservation-soft);
}

/* Page de suivi : rappel discret sous les coordonnées de la mairie */
.reservation-suivi-prive {
  font-size: 0.8125rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Page (thèmes classiques sans gabarit sba-reservation-salle/page.php)
   -------------------------------------------------------------------------- */

.reservation-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding: 2rem 1rem 4rem;
}

.reservation-page-title {
  margin: 0;
}

.reservation-page-intro {
  max-width: 65ch;
  margin: 0.75rem 0 2rem;
}

/* --------------------------------------------------------------------------
   Liste des salles
   -------------------------------------------------------------------------- */

.reservation-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--reservation-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reservation-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.reservation-carte:focus-within {
  outline: 3px solid var(--reservation-focus);
  outline-offset: 6px;
  border-radius: var(--reservation-panel-radius);
}

.reservation-carte-media {
  order: -1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--reservation-brand-soft);
  border-radius: var(--reservation-panel-radius);
}

.reservation-carte-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reservation-carte-title {
  margin: 0;
  font-family: var(--reservation-heading-font);
  font-size: 1.375rem;
  line-height: 1.2;
}

.reservation-carte-link {
  color: var(--reservation-ink);
  text-decoration: none;
}

/* Toute la vignette est cliquable ; le focus est reporté sur la vignette */
.reservation-carte-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.reservation-carte-link:focus-visible {
  outline: none;
}

.reservation-carte:hover .reservation-carte-link {
  text-decoration: underline;
}

.reservation-carte-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--reservation-soft);
}

.reservation-vide {
  margin: 0;
  color: var(--reservation-soft);
}

.reservation-carte-disponibilite {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Liste des salles avec ses filtres : colonne collante à gauche sur grand écran, au-dessus sinon
   (repliés sur petit écran tant qu'aucun n'est appliqué)
   -------------------------------------------------------------------------- */

@media (min-width: 64em) {
  .reservation-recherche-page {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: var(--reservation-gap);
    align-items: start;
  }

  .reservation-recherche-filtres {
    position: sticky;
    top: calc(var(--reservation-sticky-offset) + 1.5rem);
    max-height: calc(100vh - var(--reservation-sticky-offset) - 3rem);
    overflow-y: auto;
  }

  .reservation-recherche-filtres .reservation-filtres {
    margin: 0;
    padding: 1.25rem;
  }

  /* Critères toujours visibles dans la colonne : leur nombre ne sert qu'au panneau replié, sur petit écran */
  .reservation-recherche-filtres .reservation-filtres-compte {
    display: none;
  }
}

/* Liste en cours de mise à jour (assets/filtres.js) */
.reservation-resultats [data-reservation-liste] {
  transition: opacity 0.2s ease;
}

.reservation-resultats[aria-busy="true"] [data-reservation-liste] {
  opacity: 0.5;
}

.reservation-filtres {
  margin: 0 0 var(--reservation-gap);
  padding: 1.25rem clamp(1rem, 3vw, 1.75rem);
  background: var(--reservation-surface-alt);
  border: var(--reservation-panel-border);
  border-radius: var(--reservation-panel-radius);
}

.reservation-filtres-titre {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-family: var(--reservation-heading-font);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.reservation-filtres-titre::-webkit-details-marker {
  display: none;
}

/* Chevron : vers le bas replié, vers le haut ouvert */
.reservation-filtres-titre::after {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0.25rem 0 auto;
  content: "";
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.reservation-filtres[open] > .reservation-filtres-titre::after {
  margin-top: 0.25rem;
  transform: rotate(-135deg);
}

.reservation-filtres-titre:focus-visible {
  outline: 3px solid var(--reservation-focus);
  outline-offset: 4px;
  border-radius: var(--reservation-radius);
}

.reservation-filtres-compte {
  flex: none;
  white-space: nowrap;
  padding: 0.125rem 0.625rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--reservation-on-brand);
  background: var(--reservation-brand);
  border-radius: var(--reservation-radius);
}

.reservation-filtres-form {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

/* Type d'évènement, date, nombre de personnes : côte à côte dès que la largeur le permet */
.reservation-filtres-principaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem 1.5rem;
  align-items: end;
}

.reservation-filtres-principaux > .reservation-field {
  grid-column: auto;
  height: 100%;
}

/* Champs alignés en bas, même si l'un d'eux affiche une erreur */
.reservation-filtres-principaux .reservation-input {
  margin-top: auto;
}

p.reservation-filtres-resultat {
  margin: 0 0 1.5rem;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .reservation-filtres-titre::after,
  .reservation-resultats [data-reservation-liste] {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   Fiche d'une salle
   -------------------------------------------------------------------------- */

.reservation-salle-image {
  margin-bottom: var(--reservation-gap);
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--reservation-panel-radius);
}

.reservation-salle-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reservation-salle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* Sans quoi la largeur minimale du tableau des tarifs élargit la page */
  gap: var(--reservation-gap);
  align-items: start;
}

@media (min-width: 64em) {
  .reservation-salle-layout {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  }

  .reservation-salle-aside {
    position: sticky;
    top: calc(var(--reservation-sticky-offset) + 1.5rem);
  }
}

.reservation-salle-description > :first-child {
  margin-top: 0;
}

.reservation-section + .reservation-section,
.reservation-salle-description + .reservation-section {
  margin-top: var(--reservation-gap);
}

.reservation-section h2,
.reservation-panel h2 {
  margin: 0 0 1rem;
  font-family: var(--reservation-heading-font);
  font-size: 1.5rem;
  line-height: 1.2;
}

.reservation-section h3 {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--reservation-heading-font);
  font-size: 1.125rem;
  line-height: 1.3;
}

.reservation-section p {
  margin: 0 0 0.75rem;
}

/* Spécificité renforcée : les remises à zéro des thèmes (ul[class]) retirent les puces */
.reservation .reservation-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.reservation .reservation-list li + li {
  margin-top: 0.25rem;
}

/* Pictogrammes décoratifs */
.reservation-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

/* Caractéristiques : pictogramme dans une pastille, intitulé discret au-dessus de la valeur */
.reservation-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.25rem 1.5rem;
  margin: 0;
}

.reservation-fact {
  position: relative;
  min-height: 2.75rem;
  padding-left: 3.5rem;
}

.reservation-fact dt {
  font-size: 0.875rem;
  color: var(--reservation-soft);
}

.reservation-fact dt .reservation-icon {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: content-box;
  padding: 0.625rem;
  color: var(--reservation-brand);
  background: var(--reservation-brand-soft);
  border-radius: var(--reservation-radius);
}

.reservation-fact dd {
  margin: 0.125rem 0 0;
  font-weight: 600;
}

/* Horaires d'ouverture : une ligne par groupe de jours */
.reservation .reservation-horaires {
  margin: 0;
  padding: 0;
  list-style: none;
}

.reservation .reservation-horaires li {
  margin: 0;
}

/* Équipements : pictogramme devant chaque libellé, sur deux colonnes quand la place le permet */
.reservation .reservation-equipements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reservation-equipements li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.reservation-equipements .reservation-icon {
  margin-top: 0.125rem;
  color: var(--reservation-brand);
}

/* Tarifs : tableau sur grand écran, une carte par durée sur petit écran (l'autre présentation est masquée) */
.reservation-table-scroll {
  overflow-x: auto;
}

.reservation .reservation-tarifs-cartes {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reservation-tarif-carte {
  padding: 1rem 1.25rem;
  border: var(--reservation-panel-border);
  border-radius: var(--reservation-panel-radius);
}

.reservation-section .reservation-tarif-carte h3 {
  margin: 0;
}

.reservation-section .reservation-tarif-carte > .reservation-precision {
  margin: 0.125rem 0 0.75rem;
}

.reservation-tarif-carte dl {
  margin: 0;
}

.reservation-tarif-carte dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid var(--reservation-line);
}

.reservation-tarif-carte dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.reservation-tarif-carte dd .reservation-precision {
  display: inline;
}

@media (max-width: 39.99em) {
  .reservation-table-scroll {
    display: none;
  }
}

@media (min-width: 40em) {
  .reservation .reservation-tarifs-cartes {
    display: none;
  }
}

.reservation-table-scroll:focus-visible {
  outline: 3px solid var(--reservation-focus);
  outline-offset: 2px;
}

.reservation-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
}

.reservation-table th,
.reservation-table td {
  padding: 0.75rem 1rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--reservation-line);
}

.reservation-table thead th {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--reservation-soft);
}

.reservation-table tbody th {
  font-weight: 600;
}

.reservation-table td {
  white-space: nowrap;
}

/* Options : libellé et tarif sur une ligne */
.reservation-options {
  margin: 0;
  padding: 0;
  list-style: none;
}

.reservation-options li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--reservation-line);
}

.reservation-option-tarif {
  font-weight: 600;
  text-align: right;
}

/* Encadré « Réserver la salle » */
.reservation-panel {
  padding: 1.5rem;
  background: var(--reservation-surface);
  border: var(--reservation-panel-border);
  border-radius: var(--reservation-panel-radius);
}

.reservation-panel p {
  margin: 0 0 0.75rem;
}

.reservation-panel > :last-child {
  margin-bottom: 0;
}

/* Recherche faite dans la liste des salles, rappelée au-dessus du bouton de demande */
.reservation-recherche {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--reservation-brand-soft);
  border-radius: var(--reservation-radius);
}

.reservation-panel .reservation-recherche p {
  margin: 0;
}

.reservation-panel .reservation-recherche p + p {
  margin-top: 0.5rem;
}

.reservation-recherche-titre,
.reservation-recherche-alerte {
  font-weight: 700;
}

.reservation-recherche-alerte {
  color: var(--reservation-danger);
}

/* --------------------------------------------------------------------------
   Formulaire de demande
   -------------------------------------------------------------------------- */

.reservation-demande {
  display: grid;
  gap: 2rem;
}

.reservation-form {
  display: grid;
  gap: 2rem;
}

/* Grand écran : estimation à droite, visible pendant la saisie */
@media (min-width: 64em) {
  .reservation-form {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    column-gap: var(--reservation-gap);
    align-items: start;
  }

  .reservation-form-main,
  .reservation-form-end {
    grid-column: 1;
  }

  .reservation-estimation {
    position: sticky;
    top: calc(var(--reservation-sticky-offset) + 1.5rem);
    grid-row: 1 / span 2;
    grid-column: 2;
  }
}

.reservation-form-main,
.reservation-form-end {
  display: grid;
  gap: 2rem;
  min-width: 0;
}

.reservation-form-end {
  gap: 1.5rem;
}

.reservation-form p {
  margin: 0;
}

.reservation-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.reservation-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.reservation .reservation-legend {
  padding: 0;
  font-family: var(--reservation-heading-font);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.reservation-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.reservation-field {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.reservation-field[hidden] {
  display: none;
}

@media (min-width: 40em) {
  .reservation-field--half {
    grid-column: auto;
  }

  /* Champs côte à côte alignés, même si leurs aides n'ont pas la même longueur */
  .reservation-field--half > .reservation-input {
    margin-top: auto;
  }
}

.reservation-field--pair > .reservation-fields {
  margin-top: 0;
}

.reservation .reservation-label {
  padding: 0;
  font-weight: 700;
  line-height: 1.3;
}

.reservation-required {
  color: var(--reservation-danger);
}

.reservation-help {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--reservation-soft);
}

.reservation-error {
  font-weight: 700;
  color: var(--reservation-danger);
}

/* Zone de dépôt des pièces à fournir (assets/file-drop.js) : cadre pointillé avec l'indication, le bouton
   et le fichier choisi, activée par JavaScript (sans lui, le champ fichier reste seul) */
.reservation-drop.is-enhanced {
  position: relative;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  /* Contour contrasté (RGAA 3.3) : couleur des textes secondaires, en pointillé pour rester léger */
  border: 2px dashed var(--reservation-soft);
  border-radius: var(--reservation-radius);
  transition: background-color 0.15s, border-color 0.15s;
}

.reservation-drop.is-enhanced:hover,
.reservation-drop.is-dragover {
  background: var(--reservation-brand-soft);
  border-color: var(--reservation-brand);
}

.reservation-drop.is-enhanced:has(input:focus-visible) {
  border-color: var(--reservation-brand);
  outline: 3px solid var(--reservation-brand);
  outline-offset: 2px;
}

/* Champ masqué à l'écran mais toujours atteint au clavier et annoncé par les lecteurs d'écran : le bouton
   .reservation-drop-button et le fichier choisi le remplacent (le focus s'affiche sur la zone) */
.reservation-drop.is-enhanced input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.reservation-drop-hint {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  margin: 0;
  color: var(--reservation-soft);
}

.reservation-drop-hint .reservation-icon {
  width: 2rem;
  height: 2rem;
  color: var(--reservation-brand);
}

.reservation-drop-hint strong {
  color: var(--reservation-ink);
}

/* Glisser-déposer : seulement avec une souris */
@media not ((hover: hover) and (pointer: fine)) {
  .reservation-drop-hint {
    display: none;
  }
}

.reservation-drop-button {
  padding: 0.25rem 1rem;
  font-weight: 700;
  color: var(--reservation-brand);
  background: var(--reservation-brand-soft);
  border: 2px solid var(--reservation-brand);
  border-radius: var(--reservation-radius);
}

.reservation-drop-hint[hidden],
.reservation-drop-button[hidden],
.reservation-drop .reservation-error:empty {
  display: none;
}

/* Fichier choisi : vignette (ou icône), nom, poids, retrait */
.reservation .file-drop-list {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  list-style: none;
}

.reservation .file-drop-list[hidden] {
  display: none;
}

.reservation .file-drop-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  cursor: default;
  background: var(--reservation-surface-alt);
  border-radius: var(--reservation-radius);
}

.reservation .file-drop-thumb {
  flex: none;
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: max(0.25rem, calc(var(--reservation-radius) - 0.5rem));
}

.reservation svg.file-drop-thumb {
  padding: 0.75rem;
  color: var(--reservation-brand);
  background: var(--reservation-brand-soft);
}

.reservation .file-drop-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.reservation .file-drop-name {
  overflow: hidden;
  font-weight: 700;
  color: var(--reservation-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reservation .file-drop-size {
  font-size: 0.875rem;
  color: var(--reservation-soft);
}

.reservation .file-drop-remove {
  flex: none;
  padding: 0.25rem 0.5rem;
  font: inherit;
  font-weight: 700;
  color: var(--reservation-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0.25rem;
}

.reservation .file-drop-remove:hover {
  color: var(--reservation-danger);
}

.reservation .file-drop-remove:focus-visible {
  outline: 3px solid var(--reservation-brand);
  outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reservation-drop.is-enhanced {
    transition: none;
  }
}

.reservation-input {
  width: 100%;
  max-width: 100%;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--reservation-ink);
  background: var(--reservation-field-background);
  border: var(--reservation-field-border);
  border-radius: var(--reservation-radius);
}

/* Liste déroulante : flèche dessinée, la même dans tous les navigateurs */
select.reservation-input {
  padding-right: 2.75rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: right 1.25rem center, right 0.9375rem center;
  background-size: 0.3125rem 0.3125rem;
  cursor: pointer;
}

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

.has-error .reservation-input {
  border-color: var(--reservation-danger);
  box-shadow: inset 0 0 0 1px var(--reservation-danger);
}

textarea.reservation-input {
  min-height: 7rem;
  line-height: 1.5;
  resize: vertical;
}

.reservation-choices {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.reservation-choice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.reservation-choice input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.125rem 0 0;
  accent-color: var(--reservation-brand);
}

.reservation-choice label {
  cursor: pointer;
}

.reservation-choice:has(:focus-visible) label {
  text-decoration: underline;
}

/* Confirmation et récapitulatif des erreurs */
.reservation-notice,
.reservation-errors {
  padding: 1rem 1.25rem;
  border: 2px solid currentColor;
  border-radius: var(--reservation-radius);
}

.reservation-notice:focus-visible,
.reservation-errors:focus-visible {
  outline-offset: 4px;
}

.reservation-notice {
  display: grid;
  gap: 0.5rem;
  color: var(--reservation-ink);
  background: var(--reservation-brand-soft);
  border-color: var(--reservation-brand);
}

.reservation-notice p {
  margin: 0;
}

.reservation-notice-title {
  font-weight: 700;
}

.reservation-errors {
  color: var(--reservation-danger);
}

.reservation .reservation-errors-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  color: inherit;
}

.reservation .reservation-errors ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.reservation-errors li + li {
  margin-top: 0.375rem;
}

.reservation-errors a {
  font-weight: 700;
  color: inherit;
}

/* Estimation du montant */
.reservation-estimation {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--reservation-surface);
  border: var(--reservation-panel-border);
  border-radius: var(--reservation-panel-radius);
}

.reservation-estimation[hidden] {
  display: none;
}

.reservation .reservation-estimation-title {
  margin: 0;
  font-family: var(--reservation-heading-font);
  font-size: 1.25rem;
  line-height: 1.3;
}

.reservation-estimation-lines {
  margin: 0;
}

.reservation-estimation-lines div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--reservation-line);
}

.reservation-estimation-lines dt {
  font-weight: 400;
}

.reservation-estimation-lines dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.reservation-form .reservation-estimation-total {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  font-size: 1.125rem;
}

.reservation-estimation-total[hidden] {
  display: none;
}

.reservation-actions,
.reservation-demande-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
}

.reservation-demande-links {
  margin: 0;
}

/* Compte connecté (espace partenaires) : coordonnées remplies */
.reservation .reservation-compte {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--reservation-surface-alt);
  border-radius: var(--reservation-radius);
}

/* Disponibilité de la période choisie, annoncée pendant la saisie */
.reservation-field--disponibilite:has(> .reservation-disponibilite:empty) {
  margin-top: -1.5rem; /* Message vide : pas d'espace en plus entre les champs */
}

.reservation-disponibilite:not(:empty) {
  padding: 0.75rem 1rem;
  font-weight: 600;
  background: var(--reservation-surface-alt);
  border-radius: var(--reservation-radius);
}

.reservation-disponibilite[data-statut="pris"],
.reservation-disponibilite[data-statut="fermee"] {
  color: var(--reservation-danger);
}

/* --------------------------------------------------------------------------
   Calendrier des disponibilités
   -------------------------------------------------------------------------- */

.reservation-calendrier {
  scroll-margin-top: calc(var(--reservation-sticky-offset) + 1rem);
}

.reservation-calendrier-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  margin: 1.5rem 0 1rem;
}

.reservation-calendrier-nav a {
  font-weight: 600;
  white-space: nowrap;
}

.reservation-calendrier-precedent {
  grid-column: 1;
  justify-self: start;
}

.reservation .reservation-calendrier-mois {
  grid-column: 2;
  margin: 0;
  font-family: var(--reservation-heading-font);
  font-size: 1.25rem;
  font-weight: 700;
}

.reservation-calendrier-suivant {
  grid-column: 3;
  justify-self: end;
}

.reservation-calendrier-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.reservation-calendrier-table th {
  padding: 0.5rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--reservation-soft);
  text-align: left;
}

.reservation-calendrier-table abbr {
  text-decoration: none;
}

.reservation-jour {
  position: relative;
  height: 5rem;
  padding: 0.375rem 0.5rem;
  vertical-align: top;
  border: 1px solid var(--reservation-line);
}

.reservation-jour-numero {
  display: block;
  font-weight: 700;
}

/* Jour qu'on peut demander : toute la case mène au formulaire */
a.reservation-jour-numero {
  color: var(--reservation-brand);
}

a.reservation-jour-numero::after {
  position: absolute;
  inset: 0;
  content: "";
}

.reservation-jour:has(a:hover) {
  background: var(--reservation-brand-soft);
}

a.reservation-jour-numero:focus-visible {
  outline: none;
}

a.reservation-jour-numero:focus-visible::after {
  outline: 3px solid var(--reservation-focus);
  outline-offset: -3px;
}

.reservation-jour-etat {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.reservation-jour--partielle {
  background: repeating-linear-gradient(135deg, var(--reservation-surface-alt) 0 0.5rem, transparent 0.5rem 1rem);
}

.reservation-jour--reservee,
.reservation-jour--fermee {
  background: var(--reservation-surface-alt);
}

.reservation-jour--reservee .reservation-jour-etat,
.reservation-jour--fermee .reservation-jour-etat {
  font-weight: 600;
}

.reservation-jour--passe,
.reservation-jour--hors-delai,
.reservation-jour--hors-mois {
  color: var(--reservation-soft);
}

.reservation-jour--hors-mois {
  border-color: transparent;
}

.reservation-calendrier-liste h3 {
  margin-top: 0;
}

@media (max-width: 39.99em) {
  /* Petit écran : le mois est le titre de la liste qui suit */
  .reservation-calendrier-grille,
  .reservation .reservation-calendrier-mois {
    display: none;
  }
}

@media (min-width: 40em) {
  .reservation-calendrier-liste {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Page de suivi d'une demande (Gestion complète)
   -------------------------------------------------------------------------- */

.reservation-suivi {
  display: grid;
  gap: 2rem;
}

/* Statut en toutes lettres ; la couleur ne fait que le souligner */
.reservation .reservation-statut {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  font-weight: 700;
  background: var(--reservation-surface-alt);
  border-radius: var(--reservation-radius);
}

.reservation .reservation-statut--confirmee {
  background: var(--reservation-brand-soft);
}

.reservation-recapitulatif {
  margin: 0;
}

.reservation-recapitulatif div {
  display: grid;
  gap: 0.125rem 1.5rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--reservation-line);
}

@media (min-width: 40em) {
  .reservation-recapitulatif div {
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  }
}

.reservation-recapitulatif dt {
  font-weight: 700;
}

.reservation-recapitulatif dd {
  margin: 0;
}

.reservation-suivi-form .reservation-form-main {
  margin-top: 1.5rem;
}

.reservation-input[type="file"] {
  padding: 0.5rem;
}

.reservation .reservation-historique {
  margin: 0;
  padding: 0;
  list-style: none;
}

.reservation-historique li {
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--reservation-line);
}

.reservation-historique-date {
  font-size: 0.875rem;
  color: var(--reservation-soft);
}

.reservation .reservation-historique-message {
  margin: 0.375rem 0 0;
  padding: 0 0 0 1rem;
  font-style: normal;
  border-left: 3px solid var(--reservation-line);
}