/* =====================================================================
   WIDGET — pensé pour un iframe étroit dans Wix. Mobile d'abord : la
   majorité des réservations viennent d'un téléphone.

   `--primaire` est posée par widget.js depuis la couleur du tenant, après
   validation. Aucune couleur de marque n'est écrite en dur ici.
===================================================================== */

:root {
  --primaire: #1a3a6b;
  --texte: #1c1c1c;
  --gris: #6b7280;
  --trait: #e5e7eb;
  --fond-doux: #f8f9fb;
  --rouge: #b42318;
}

* { box-sizing: border-box; }

/* `hidden` doit gagner contre un `display:` posé par une classe. La règle du
   navigateur, elle, a une spécificité nulle : `.forcer { display:flex }`
   l'emporterait, et une case à cocher cachée resterait visible. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0.75rem;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
  background: #fff;
}

#widget { max-width: 720px; margin: 0 auto; }

/* --- entête et bandeau d'annonces ------------------------------------ */

#entete { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
#entete img { max-height: 48px; width: auto; }
#entete h1 { font-size: 1.25rem; margin: 0; }

#bandeau {
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--primaire);
  background: var(--fond-doux);
  font-size: 0.9rem;
}

/* --- barre de navigation dans les dates ------------------------------- */

/* Les trois éléments — précédents, date, suivants — tiennent sur UNE ligne,
   y compris sur un téléphone. En `wrap`, « Jours suivants » passait à la
   ligne dès 375 px de large, et la barre se lisait de travers.

   C'est la date qui absorbe la place restante (`flex: 1` + `min-width: 0`,
   sans quoi un `input[type=date]` refuse de rétrécir) ; les deux boutons
   gardent leur largeur et ne coupent jamais leur libellé. */
#barre, .barre {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
#barre button, .barre button {
  flex: 0 0 auto;
  white-space: nowrap;
}
#barre input[type="date"], .barre input[type="date"] {
  flex: 1 1 auto;
  padding: 0.5rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font: inherit;
  min-width: 0;
}

/* Sur un écran étroit, on resserre plutôt que de laisser déborder : une page
   qui défile horizontalement est pire qu'un libellé serré. */
@media (max-width: 560px) {
  #barre, .barre { gap: 0.35rem; }
  #barre button, .barre button { padding: 0.5rem 0.55rem; font-size: 0.85rem; }
  #barre input[type="date"], .barre input[type="date"] { padding: 0.5rem 0.3rem; font-size: 0.85rem; }
}

/* Sous ~440 px — un téléphone, ou le widget encadré dans un site — les trois
   éléments sur une ligne écrasaient le champ de date jusqu'à n'en laisser
   qu'une icône coupée : injouable au doigt, et c'est LE champ qui sert le
   plus. La date passe donc sur sa propre ligne, en pleine largeur, et les
   deux boutons se partagent celle du dessous. */
@media (max-width: 440px) {
  #barre, .barre { flex-wrap: wrap; }
  #barre input[type="date"], .barre input[type="date"] {
    order: -1;
    flex: 1 0 100%;
    font-size: 1rem;      /* 16 px : en dessous, l'iPhone zoome à la sélection */
    padding: 0.6rem 0.5rem;
    text-align: center;
  }
  #barre button, .barre button { flex: 1 1 0; font-size: 0.9rem; }
}

button {
  font: inherit;
  padding: 0.55rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--trait);
  background: #fff;
  color: var(--texte);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--primaire); }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }

button.primaire {
  background: var(--primaire);
  border-color: var(--primaire);
  color: #fff;
  font-weight: 600;
}
button.primaire:hover:not(:disabled) { filter: brightness(1.1); }

/* --- la liste des créneaux, groupée par jour --------------------------- */

/* Un en-tête de journée, dans le widget comme dans la page de gestion. */
.jour h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris);
  border-bottom: 1px solid var(--trait);
  padding-bottom: 0.4rem;
  margin: 1.5rem 0 0.5rem;
}

.jour ul { list-style: none; margin: 0; padding: 0; }

.creneau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--trait);
}

.heure { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.6rem; }

.activite { flex: 1 1 10rem; display: flex; flex-direction: column; }
.activite .nom { font-weight: 600; }
.activite .prix { color: var(--gris); font-size: 0.9rem; }
.activite .places { color: var(--primaire); font-size: 0.85rem; }

.actions { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; }
.complet { color: var(--gris); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }

.description {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  padding: 0.6rem 0.8rem;
  background: var(--fond-doux);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--gris);
}

.etat, .erreur { padding: 2rem 0; text-align: center; color: var(--gris); }
.erreur { color: var(--rouge); }

/* --- page de gestion : la carte de la réservation ---------------------- */

.carte {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--fond-doux);
}
.carte h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.carte .ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.35rem 0;
  font-size: 0.95rem;
}
.carte .etiquette { color: var(--gris); }
.carte .valeur { font-weight: 600; text-align: right; }

/* --- formulaire de réservation ---------------------------------------- */

dialog {
  border: none;
  border-radius: 10px;
  padding: 1.25rem;
  width: min(28rem, 92vw);
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.2);
  color: var(--texte);
  /* Le formulaire defile DANS la boite, pas la page derriere : sans ca, un
     bouton colle en bas n'aurait rien a quoi se coller. */
  max-height: 88vh;
  overflow-y: auto;
}
dialog::backdrop { background: rgb(0 0 0 / 0.45); }
dialog h2 { margin: 0 0 0.25rem; font-size: 1.15rem; }
dialog .rappel { margin: 0 0 1rem; color: var(--gris); font-size: 0.9rem; }

dialog label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; font-weight: 600; }
dialog label .facultatif { font-weight: 400; color: var(--gris); }
dialog input, dialog textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font: inherit;
}
dialog textarea { resize: vertical; min-height: 3.5rem; }

.total {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-top: 1px solid var(--trait);
  font-weight: 700;
}

/* CE QUI VA ETRE PRELEVE MAINTENANT.

   L'acompte etait ecrit en gris clair sous un « Total 90,00 € » en gras :
   le client lisait 90, cliquait, et decouvrait 25 sur la page de Stripe.
   Le seul chiffre qu'il allait reellement payer etait le plus discret de
   l'ecran.

   Il porte maintenant la couleur de l'enseigne et un cran de plus que le
   total — c'est la ligne qui engage, celle que le releve bancaire
   confirmera ce soir. Le total reste juste au-dessus : il doit se
   verifier, mais il est le contexte, plus le titre. */
.total.a-payer {
  border-top: none;
  padding-top: 0;
  color: var(--primaire);
  font-size: 1.1rem;
}
/* Le solde, lui, n'est pas encore du : meme alignement, poids normal. */
.ligne-solde {
  display: flex;
  justify-content: space-between;
  padding: 0 0 0.7rem;
  color: var(--gris);
  font-size: 0.9rem;
}
.mention { margin: 0 0 0.75rem; color: var(--gris); font-size: 0.85rem; }

.boutons { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }
.echec { color: var(--rouge); font-size: 0.9rem; margin: 0 0 0.75rem; }

.succes { text-align: center; padding: 0.5rem 0; }
.succes .reference {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0.5rem 0;
  color: var(--primaire);
}
.succes p { color: var(--gris); font-size: 0.9rem; }

/* Un iPhone fait 375 px : à cette largeur, heure, activité et bouton doivent
   tenir sur une ligne, sinon la liste double de hauteur et on scrolle deux
   fois plus. L'activité rétrécit, elle ne pousse pas le bouton dehors. */
@media (max-width: 420px) {
  body { padding: 0.5rem; }
  .heure { min-width: 3.1rem; }
  .activite { flex-basis: 6rem; }
  button { padding: 0.55rem 0.75rem; }
}

/* En deçà, plus rien ne tient : le bouton passe dessous. */
@media (max-width: 330px) {
  .actions { margin-left: 0; flex-basis: 100%; justify-content: flex-end; }
}

/* --- conditions générales --------------------------------------------- */

/* La case et son libellé sur une ligne, le lien de lecture au bout. La case
   ne doit pas s'étirer avec le texte : d'où `flex: 0 0 auto`. */
.cgv {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
.cgv input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
}
.cgv .lien {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primaire, #1a3a6b);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

/* Les CGV sont un texte brut venu de la base : `pre-wrap` respecte ses
   paragraphes sans qu'on ait à les interpréter — et sans innerHTML. */
.cgv-texte {
  max-height: 22rem;
  overflow-y: auto;
  /* Le defilement du texte ne se propage pas a la page : arrive au bout des
     CGV, le visiteur ne part pas d'un coup en bas du site. */
  overscroll-behavior: contain;
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 1rem;
  margin: .75rem 0;
  background: var(--fond, #fff);
}
.cgv-texte pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font: inherit;
  margin: 0 0 1rem;
}

/* --- chèques cadeaux --------------------------------------------------- */

/* Le champ de code et son bouton « Vérifier » sur une ligne : le bouton
   s'aligne sur le bas du champ, pas sur son étiquette. */
.cadeau-ligne { display: flex; gap: 0.5rem; align-items: flex-end; }
.cadeau-ligne label { flex: 1 1 auto; margin-bottom: 0.75rem; }
.cadeau-ligne button { flex: 0 0 auto; margin-bottom: 0.75rem; white-space: nowrap; }
.cadeau-ligne input { text-transform: uppercase; }

.pied-cadeau { margin: 1.5rem 0 0.5rem; text-align: center; }

/* L'appel au chèque cadeau, EN HAUT : une bande large, colorée de la teinte
   du tenant, impossible à manquer. Sous la liste, il fallait dérouler une
   trentaine de créneaux pour le trouver. */
.appel-cadeau {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid var(--primaire);
  border-radius: 8px;
  background: var(--fond-doux);
  color: var(--primaire);
  font-weight: 600;
  text-decoration: none;
}
.appel-cadeau:hover { background: #fff; }
.appel-cadeau img { flex: 0 0 auto; width: 80px; height: 80px; }
/* Le titre et l'accroche l'un sous l'autre, et c'est le bloc de texte qui
   absorbe la largeur restante — pas l'image, qui garde sa taille. */
.appel-cadeau .cadeau-texte { flex: 1 1 auto; display: flex; flex-direction: column; }
.appel-cadeau .cadeau-texte span { font-weight: 400; color: var(--gris); font-size: 0.85rem; }
.appel-cadeau .cadeau-fleche { flex: 0 0 auto; font-size: 1.3rem; line-height: 1; opacity: 0.6; }

/* Sur un téléphone, l'image passe à 56 px : à 80 elle mangeait la moitié de
   la bande, et l'accroche se serrait sur trois lignes. */
@media (max-width: 420px) {
  .appel-cadeau img { width: 56px; height: 56px; }
}

/* Sur la page dédiée, le visuel tient lieu de titre : centré, plus grand. */
.visuel-cadeau { display: block; margin: 0 auto 0.75rem; width: 160px; height: 160px; }

/* --- planning : les créneaux libres ------------------------------------ */

/* Un créneau libre se lit d'un coup d'œil comme « disponible » : fond clair,
   texte discret. Ce qui doit sauter aux yeux, c'est ce qui est VENDU. */
.creneau-libre { background: transparent; opacity: 0.72; }
.creneau-libre .nom { font-weight: 500; }
.creneau-libre:hover { opacity: 1; }

.badge.hors-grille { background: #fef3c7; color: #92400e; }

/* --- fichier clients ---------------------------------------------------- */

.barre input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font: inherit;
}

/* L'export est un lien déguisé en bouton : le navigateur sait télécharger,
   `fetch` ne le sait pas. */
.bouton-lien {
  flex: 0 0 auto;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: #fff;
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}
.bouton-lien:hover { border-color: var(--primaire); }

/* --- la page du chèque cadeau ------------------------------------------ */

/* Elle n'a ni liste ni calendrier : deux cartes, l'achat puis la
   vérification d'un solde. */
.carte-cadeau {
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
}
.carte-cadeau h2 { margin: 0 0 0.25rem; font-size: 1.15rem; }
.carte-cadeau .rappel { margin: 0 0 1rem; color: var(--gris); font-size: 0.9rem; }
.carte-cadeau label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; font-weight: 600; }
.carte-cadeau label .facultatif { font-weight: 400; color: var(--gris); }
.carte-cadeau input, .carte-cadeau textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font: inherit;
}
.carte-cadeau textarea { resize: vertical; min-height: 3.5rem; }
.carte-cadeau button.primaire { width: 100%; }

/* --- le bon cadeau rempli, à imprimer ---------------------------------- */

/* Le visuel de l'exploitant sert de fond ; les valeurs se posent dessus en
   pourcentages, d'après la position mesurée de ses libellés. Rien n'est
   gravé dans l'image : le texte reste net à l'impression, et le serveur
   n'embarque aucune bibliothèque graphique.

   `container-type` fait de ce bloc une référence de taille : les valeurs
   peuvent alors se dimensionner en `cqw`, donc suivre la largeur du bon,
   qu'il s'affiche sur un téléphone ou sur une feuille A4. */
.bon {
  position: relative;
  container-type: inline-size;
  line-height: 1;
}
.bon img { display: block; width: 100%; height: auto; }

/* Tout est mesuré sur le visuel de l'exploitant, rien n'est choisi à l'oeil :

   - ses libellés ont une capitale de 20 px sur 1200 de large. Georgia porte
     une capitale à 69 % de sa taille, d'où 20 / 0,69 / 1200 = 2,42cqw ;
   - l'or du titre « CHÈQUE CADEAU » vaut #cb9e41 en moyenne — c'est celui-là,
     et non un or inventé ;
   - un serif, parce que les libellés en sont un : une sans-serif à côté se
     verrait au premier coup d'oeil. */
.bon-valeur {
  position: absolute;
  transform: translateY(-50%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.42cqw;
  letter-spacing: 0.04em;
  color: #cb9e41;
  white-space: nowrap;
}
/* Le code est ce qu'on recopie : on l'espace pour qu'il se lise lettre à
   lettre, sans changer sa taille — l'exploitant veut celle des libellés. */
.bon-code { letter-spacing: 0.11em; font-variant-numeric: tabular-nums; }

/* LE LOGO DE L'ENSEIGNE, posé sur le bon comme une valeur — mais c'est une
   image : sa taille est une largeur, en % du visuel, et elle s'ancre par
   son coin haut-gauche plutôt que sur une ligne de texte. */
.bon-logo { position: absolute; height: auto; }

/* LE CHEMIN DU RETOUR — un bouton, comme les autres actions de la page :
   un lien souligné se confond avec le texte, et la flèche du navigateur
   n'est pas une réponse à « comment je reviens aux créneaux ? ». */
.bouton-retour {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--primaire);
  border-radius: 6px;
  /* PLEIN, comme « Réserver » : « c'est pas un bouton, ça. » Un cadre
     blanc sur fond blanc se lit comme du texte encadré ; la couleur de
     l'enseigne, elle, dit tout de suite qu'on peut appuyer. */
  background: var(--primaire);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.bouton-retour:hover { filter: brightness(1.1); }
.bouton-retour:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.bouton-retour::before { content: "← "; }

.mot-cadeau {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--primaire);
  background: var(--fond-doux);
  font-style: italic;
}

/* À l'impression, seul le bon sort : ni entête de site, ni boutons, ni
   formulaire. Et les fonds sont conservés, sinon la feuille sort blanche. */
@media print {
  #entete, #bandeau, .rappel, .boutons, h2 { display: none !important; }
  body { padding: 0; }
  .carte-cadeau { border: none; padding: 0; margin: 0; }
  .bon { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* « Continuer avec Google » : un raccourci au-dessus du nom, pas une etape.
   Centre et espace pour qu'il ne se confonde pas avec les champs. */
.google-connexion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0 1rem;
}
.google-connexion .mention { margin: 0; text-align: center; }

/* Un champ facultatif replié derrière un lien : il ne coûte plus une ligne de
   formulaire à ceux — la plupart — qui ne le remplissent pas. */
.depliable { margin: .25rem 0 .75rem; }
button.lien {
  background: none;
  border: 0;
  padding: .25rem 0;
  color: var(--primaire, #1a3a6b);
  text-decoration: underline;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  width: auto;
}
button.lien:hover { opacity: .75; }

/* Le bouton de confirmation reste sous les yeux : c'est le geste qu'on vient
   faire, il n'a pas à se mériter au défilement. */
/* Le formulaire vit maintenant dans le flux de la page, pas dans une boite :
   son bouton reste colle au bas de la FENETRE, la vraie, celle du visiteur. */
#liste form .boutons {
  position: sticky;
  bottom: 0;
  background: var(--fond, #fff);
  padding: .75rem 0 .25rem;
  margin-top: .5rem;
  box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, .18);
}

/* Le formulaire et l'ecran de confirmation reprennent l'allure d'une carte,
   que la boite leur donnait auparavant. */
#liste > form, #liste > .succes {
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 1.25rem;
  max-width: 32rem;
  margin: 0 auto;
}
#liste > form h2, #liste > .succes h2 { margin: 0 0 .25rem; font-size: 1.15rem; }

/* Le plein tarif barré à côté du prix remisé : un total plus bas que celui
   annoncé sur la liste inquiète, si l'on ne montre pas d'où vient l'écart. */
.prix-barre {
  text-decoration: line-through;
  opacity: .55;
  font-weight: normal;
  margin-right: .35rem;
}

/* =====================================================================
   LE FORMULAIRE DANS LA PAGE

   Il vivait dans une fenetre modale, et `dialog label` / `dialog input`
   l'habillaient. La modale a ete supprimee — a raison : en cadre, elle se
   centrait hors de la vue du visiteur — mais SES STYLES NE L'ONT PAS
   SUIVIE. Depuis, le formulaire que voient les clients affiche
   « Nombre de participants[2] », l'intitule colle a sa case.

   On les rejoue donc ici, sur le formulaire pose dans le flux de la page.
===================================================================== */

/* `:not(.cgv)` n'est PAS une precaution decorative.

   Sans lui, cette regle ecrase le `display: flex` de la ligne des CGV — un
   selecteur plus long l'emporte sur un plus court, et la case se recolle a
   son texte. C'est la meme erreur que j'ai faite le matin meme dans
   l'administration : une regle ecrite plus tard defait la precedente sans
   qu'aucun test ne s'en apercoive. */
#liste form label:not(.cgv) {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
}
#liste form label .facultatif { font-weight: 400; color: var(--gris); }

#liste form input:not([type="checkbox"]),
#liste form select,
#liste form textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font: inherit;
}
#liste form textarea { resize: vertical; min-height: 3.5rem; }

/* =====================================================================
   PLUSIEURS SALLES D'UN COUP

   La case reste discrète : celui qui ne prend qu'une salle garde son
   bouton et ne doit pas avoir à la remarquer. La barre, elle, se pose en
   bas de l'écran — c'est le seul endroit où elle reste visible pendant
   qu'on fait défiler les jours suivants.
===================================================================== */
.creneau-choix {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #6b7686;
  cursor: pointer;
}
.creneau-choix input { cursor: pointer; }

.panier {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  background: #fff;
  border-top: 1px solid var(--bord, #d1d5db);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
.panier[hidden] { display: none; }
/* Place sous la page pour la barre fixe : on doit pouvoir descendre jusqu'a la derniere ligne. */
body.avec-panier { padding-bottom: 5.5rem; }
.panier-compte { font-weight: 600; }

.panier-ligne {
  padding: 0.5rem 0;
  border-top: 1px solid var(--bord, #d1d5db);
}
.panier-ligne:first-of-type { border-top: 0; }
.panier-salle { display: block; font-weight: 600; margin-bottom: 0.2rem; }

/* Le bouton qui ouvre le mode « plusieurs salles » : dans la barre des
   jours, à droite, et reconnaissable sans crier. */
.bouton-groupe { margin-left: auto; }

/* « Réserver plusieurs salles », sur la ligne : une AUTRE couleur que le
   bouton principal, sinon les deux se confondent et on clique au hasard.
   Un vert profond, qui se distingue du bleu sans crier plus fort que lui. */
button.plusieurs {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
button.plusieurs:hover { background: #115e59; border-color: #115e59; }

/* LE MENU « RESERVER » D'UNE LIGNE : une salle, ou plusieurs. */
.reserver-menu { position: relative; display: inline-block; }
.reserver-liste {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 20;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  padding: 0.25rem;
}
.reserver-liste[hidden] { display: none; }
.reserver-choix {
  text-align: left;
  border: 0;
  background: none;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  color: #1c1c1c;
}
.reserver-choix:hover { background: #eef1f6; }

/* LE BOUTON DE SORTIE des pages de retour de paiement : un vrai bouton, bien
   visible, qui est un lien. */
.retour-site { margin-top: 0.8rem; }
a.bouton-retour {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--primaire);
  border-radius: 8px;
  background: var(--primaire);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
a.bouton-retour:hover { filter: brightness(1.1); text-decoration: none; }
a.bouton-retour:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }

.retour-compte { margin-top: 0.6rem; font-size: 0.95rem; color: #55606b; }
.retour-site button.lien { margin-top: 0.2rem; }

/* LE RETOUR DE STRIPE : en haut de page, bien visible, il reste. */
.retour-paiement {
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--primaire, #1f3350);
  border-left-width: 5px;
  border-radius: 8px;
  background: var(--fond-doux, #f3f6fa);
  font-size: 1rem;
  line-height: 1.45;
}
.retour-paiement[hidden] { display: none; }
.retour-paiement p { margin: 0; }
.retour-paiement strong { display: block; margin-bottom: 0.25rem; }
.retour-paiement .mention { margin-top: 0.3rem; font-size: 0.9rem; color: #55606b; }
.retour-ok { border-color: #1d7a46; background: #eef8f1; }