/*
============================================================

CSS App Réservations
	
============================================================
*/

/* Tout ce qui est spécifique à la version PWA */
body.pwa-mode .et-l--header,
body.pwa-mode .et-l--footer {
    display: none !important; /* Cache le header et footer en PWA */
}

/* Optionnel : ajuste la marge du contenu pour utiliser tout l'espace */
body.pwa-mode .app-reservations {
    margin: 0;
    padding: 20px; /* ou comme tu veux */
}

/* Exemple : titre ou boutons plus visibles en PWA */
body.pwa-mode h1, 
body.pwa-mode h2, 
body.pwa-mode h3 {
    font-size: 1.2em; /* ajustement selon besoin */
}

/*
============================================================

FOOTER
	
============================================================
*/

#app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px; /* ajustable */
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    border-top: 1px solid #ccc;
    z-index: 9999;
}

.footer-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2em;
    color: #b0b0b0;
    color: #888888;
    cursor: pointer;
    transition: color 0.3s ease;
}
.footer-btn:hover,
.footer-btn.active {
    color: #000000;
}
.footer-btn:not(.active):hover {
    color: #888888; /* hover seulement si pas actif */
}
.footer-btn span {
    font-size: 0.6em;
}

/*
============================================================

CONNEXION
	
============================================================
*/

.page-template-espace-pro-reservations-app #et-main-area {
    height: calc(100vh - 70px);
}
.page-template-espace-pro-reservations-app #et-main-area #login-screen {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding-top: 20%!important;
}
.page-template-espace-pro-reservations-app #et-main-area #login-screen #spectacle {
    margin-top: 20px;
    max-width: 100%;
}
.page-template-espace-pro-reservations-app #et-main-area #login-screen * {
    margin-top: 20px;
}

.page-template-espace-pro-reservations-app #et-main-area #login-screen select {
	font-size: 16px;
    height: 40px;
}
.page-template-espace-pro-reservations-app #et-main-area #login-screen input[type=password] {
	-webkit-appearance: none;
	padding: 10px 5% !important;
	font-size: 16px;
	color: #666;
	background-color: rgba(0,0,0,0.03);
	width: 100%;
	font-weight: 400;
	border-width: 0;
	border-radius: 3px;
}
.page-template-espace-pro-reservations-app #et-main-area #login-screen button {
    padding: 10px 5%;
    font-size: 16px;
	color:#FFFFFF;
	border:1px solid #dd2c1a;
	cursor:pointer;
    background-color: #dd2c1a;
}
.page-template-espace-pro-reservations-app #et-main-area #login-screen button:hover {
	color:#dd1c1a;
	border-color:#dd1c1a;
    background-color: #FFFFFF;
}

/*
============================================================

ACCUEIL SPECTACLE   
	
============================================================
*/

.page-template-espace-pro-reservations-app #home-screen #spectacle-hero-infos {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* espace entre la partie photo et la partie infos */
    height: calc(100vh - 70px); /* toute la hauteur sauf le footer */
    box-sizing: border-box;
}
.spectacle-hero {
    position: relative;
    flex-shrink: 0; /* reste à sa taille naturelle (ne se fait pas écraser par un long titre) */
}
/* Photo principale : pleine largeur */
.page-template-espace-pro-reservations-app #home-screen .spectacle-hero img.photo {
    width: 100%;
    height: auto;
    display: block;
}

/* Affiche plus petite, sur le côté droit, mord sur la photo */
.page-template-espace-pro-reservations-app #home-screen .spectacle-hero img.affiche {
    display: block;
    width: 33%;
    max-width: 200px;
    margin-left: auto;
    margin-right: 2rem;
    transform: translateY(-33%); /* remonte d'un tiers de sa propre hauteur */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.spectacle-infos {
    flex: 1; /* prend l’espace restant */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* titre en haut */
    overflow-y: auto; /* si vraiment titre + bouton dépassent */
    padding: 0 2rem 2rem;
}
/* Titre */
.page-template-espace-pro-reservations-app #home-screen .spectacle-infos h1 {
    margin-top: 1rem;
    font-size: 1.8rem;
    line-height: 1.4em;
    word-wrap: break-word;
    text-align: center;
}

/* Bouton */
.page-template-espace-pro-reservations-app #home-screen .spectacle-infos #btn-gerer-reservations {
    display: block;
    margin: auto auto 0;
    padding: 10px 5%;
    font-size: 16px;
    color: #FFFFFF;
    border: 1px solid #dd2c1a;
    cursor: pointer;
    background-color: #dd2c1a;
    transition: background 0.3s;
}

.page-template-espace-pro-reservations-app #home-screen .spectacle-infos #btn-gerer-reservations:hover {
    color: #dd1c1a;
    border-color: #dd1c1a;
    background-color: #FFFFFF;}

/*
============================================================

RÉSERVATIONS (LECTURE)
	
============================================================
*/

/* Suppressios (avigation, séparateurs) */
.page-template-espace-pro-reservations-app .salle-jauge,
.page-template-espace-pro-reservations-app .nav-tab-wrapper,
.page-template-espace-pro-reservations-app .onglets-jours,
.page-template-espace-pro-reservations-app .separateur.dateheure-reservations,
.page-template-espace-pro-reservations-app .liste-reservations .en-tete,
.page-template-espace-pro-reservations-app .liste-reservations tbody .column-prix-unitaire,
.page-template-espace-pro-reservations-app .liste-reservations tbody .column-prix-total,
.page-template-espace-pro-reservations-app .liste-reservations tbody .column-date-achat,
.page-template-espace-pro-reservations-app .liste-reservations.theatre tbody .column-normal,
.page-template-espace-pro-reservations-app .liste-reservations.theatre tbody .column-reduit,
.page-template-espace-pro-reservations-app .liste-reservations.theatre tbody .column-invitation,
.page-template-espace-pro-reservations-app .liste-reservations.theatre tbody .column-commentaire,
.page-template-espace-pro-reservations-app .liste-reservations.compagnie tbody .column-normal,
.page-template-espace-pro-reservations-app .liste-reservations.compagnie tbody .column-reduit,
.page-template-espace-pro-reservations-app .liste-reservations.compagnie tbody .column-invitation,
.page-template-espace-pro-reservations-app .liste-reservations.compagnie tbody .column-demandeur,
.page-template-espace-pro-reservations-app .liste-reservations.compagnie tbody .column-commentaire,
.page-template-espace-pro-reservations-app .retour-haut{
    display: none;
}

/* Titres */
.page-template-espace-pro-reservations-app #app-screen h1 {
    text-align: center;
    margin: 30px 0 10px;
}
.page-template-espace-pro-reservations-app #app-screen h2 {
    text-align: center;
    margin: 10px 0;
    display: none;
}
.page-template-espace-pro-reservations-app #app-screen h3.periode {
    text-align: center;
    padding: 0px 0 30px;
    font-size: 20px;
}

/* Semaines */
.page-template-espace-pro-reservations-app .tab-pane {
  background: #fafafa;
  border-top: 1px solid #eee;
  border-radius: 8px;
}
.page-template-espace-pro-reservations-app .tab-pane:nth-child(even) .date-representation h3 {
  /* background: #fafafa; */
  background:#ededed;
}
.page-template-espace-pro-reservations-app .tab-pane:nth-child(odd) .date-representation h3 {
  background: #fff;
}

/* Jours */
.page-template-espace-pro-reservations-app .date-representation h3 {
  font-size: 18px;
  padding: 12px;
  /* background: #f5f5f5; */
  margin: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-template-espace-pro-reservations-app .date-representation h3:hover {
  background: #f5f5f5;
}
.page-template-espace-pro-reservations-app .date-representation.open h3 {
  background: #000000!important;
  color:#FFFFFF;
}

/* Badge PWA */
.page-template-espace-pro-reservations-app .total-general-reservations,
.page-template-espace-pro-reservations-app .total-final-reservations {
    display: none;
}
.page-template-espace-pro-reservations-app .pwa-badge {
    display: inline-block!important;
}
.page-template-espace-pro-reservations-app .pwa-badge::before {
    content: attr(data-count);
    display: inline-flex;
    justify-content: center; /* ou flex-end si tu veux aligner à droite */
    align-items: center;
    min-width: 20px;
    padding: 2px 8px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    border-radius: 12px;
    color: #fff;
}
.page-template-espace-pro-reservations-app .pwa-badge.badge-jour::before {
    background: red;
}
.page-template-espace-pro-reservations-app .pwa-badge.badge-revendeur::before {
    background: #000000;
}

/* Contenu des 3 tableaux (accordion) */
.page-template-espace-pro-reservations-app .reservations-content {
  display: none;
  padding: 20px 0 20px 5%;
  border: 1px solid #ddd;
  border-top: none;
}
.page-template-espace-pro-reservations-app .date-representation.open .reservations-content {
  display: block;
}

/* Tableaux */
.page-template-espace-pro-reservations-app .liste-reservations {
    width: 100%;
}
.page-template-espace-pro-reservations-app .entete-revendeur,
.page-template-espace-pro-reservations-app .titre-tableau {
    text-align: left;
}
.page-template-espace-pro-reservations-app .liste-reservations {
   margin: 0 0 20px 0;
}
.page-template-espace-pro-reservations-app .date-representation h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 12px;
}
.page-template-espace-pro-reservations-app .liste-reservations thead .ajouter-reservation {
    padding-bottom: 5px;
}
.page-template-espace-pro-reservations-app .liste-reservations tbody .no-reservation {
    text-align: left;
    font-weight: bold;
}
.page-template-espace-pro-reservations-app .liste-reservations tbody .column-quantite,
.page-template-espace-pro-reservations-app .liste-reservations tbody .column-nb-places-nri {
    text-align: right;
    padding-right: 26px;
}

/* Icônes */
.page-template-espace-pro-reservations-app .liste-reservations tbody .icon-consulter,
.page-template-espace-pro-reservations-app .liste-reservations tbody .icon-modifier,
.page-template-espace-pro-reservations-app .liste-reservations tbody .icon-supprimer {
  width: 16px;
  height: 16px;
  vertical-align: middle; /* pour bien aligner avec le texte */
}
.page-template-espace-pro-reservations-app .liste-reservations tbody .column-modifier a {
    padding: 0 5px 0 10px;
}
/*
============================================================

RÉSERVATIONS (AJOUTER/MODFIER UNE RÉSERVATION)
	
============================================================
*/

/* Panel PWA uniquement */
.page-template-espace-pro-reservations-app .side-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.page-template-espace-pro-reservations-app .side-panel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1; /* overlay derrière */
}

.page-template-espace-pro-reservations-app .side-panel-inner {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: #fff;
    box-shadow: -8px 0 20px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    z-index: 2; /* contenu au-dessus */
}

.page-template-espace-pro-reservations-app .side-panel.open { display: block; }
.page-template-espace-pro-reservations-app .side-panel.open .side-panel-inner { right: 0; }

.page-template-espace-pro-reservations-app .side-panel-header {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.page-template-espace-pro-reservations-app .side-panel-header .side-panel-close {
    color:#000000;
}
.page-template-espace-pro-reservations-app .side-panel-header h3 {
    margin-right: 5%;
    letter-spacing: 0;
    padding: 0;
}
.page-template-espace-pro-reservations-app .side-panel-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth iOS */
  padding: 16px 5%;
  flex: 1; /* prend toute la hauteur restante */
}
/* verrouillage du scroll du body quand panel ouvert */
body.side-panel-open {
  position: fixed;
  width: 100%;
  top: -var(--scroll-top,0); /* stocké via JS */
}

.page-template-espace-pro-reservations-app .side-panel-close {
  margin-right: auto;
  background: none;
  border: 0;
  font-size: 20px;
  cursor: pointer;
}

/* Ajouter une réservation */
.page-template-espace-pro-reservations-app .form-ajouter-modifier-reservation {
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.page-template-espace-pro-reservations-app .form-ajouter-modifier-reservation div {
    display: flex;
    flex-direction: column;
}
.page-template-espace-pro-reservations-app .form-ajouter-modifier-reservation label {
    margin-bottom: 5px;
	font-size:13px;
}
.page-template-espace-pro-reservations-app .form-ajouter-modifier-reservation .checkbox label {
    margin-bottom: 0;
}
.page-template-espace-pro-reservations-app input[type="text"],
.page-template-espace-pro-reservations-app input[type="number"],
.page-template-espace-pro-reservations-app input[type="email"] {
	min-height: 30px;
	padding: 0 8px;
	font-size: 13px;
	background-color: #fff;
	color:#000000;
	border: 1px solid #bbb;
}
.page-template-espace-pro-reservations-app select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 0 8px;
	min-height: 30px;
	font-size:13px;
	color:#000000;
    background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
	background-size: 13px 13px;
}
.page-template-espace-pro-reservations-app .form-ajouter-modifier-reservation input[type="submit"] {
    grid-column: span 4;
    justify-self: start;
	cursor: pointer;
	width: initial;
	border-radius: 3px;
	border: 1px solid #dd1c1a;
	color: #FFFFFF;
	background-color: #dd1c1a;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 500;
    margin: 15px 0 20px;
}
.site-avignon .page-template-espace-pro-reservations-app .form-ajouter-modifier-reservation input[type="submit"] {
	border: 1px solid #336699;
	background-color: #336699;
}
.page-template-espace-pro-reservations-app .form-ajouter-modifier-reservation input[type="submit"]:hover {
	background-color: #FFFFFF;
	border-color: #dd1c1a;
	color: #dd1c1a;
	padding: .3em 0.7em .3em 0.7em;
}
.site-avignon .page-template-espace-pro-reservations-app .form-ajouter-modifier-reservation input[type="submit"]:hover {
	border-color: #336699;
	color: #336699;
}

/*
============================================================

RÉSERVATIONS (CONSULTER UNE RÉSERVATION)
	
============================================================
*/

/* Panel details table */
.side-panel-body table.details-table {
    width: 100%;              /* prend toute la largeur du panel */
    border-collapse: collapse; /* pour éviter les doubles bordures */
    margin: 0;
    font-size: 14px;
}

/* Toutes les cellules */
.side-panel-body table.details-table td {
    padding: 6px 10px;       /* un peu d’air autour du texte */
    vertical-align: top;      /* aligner en haut pour les textes plus longs */
    border-bottom: 1px solid #eee; /* séparation légère des lignes */
}

/* Les labels (td à gauche) */
.side-panel-body table.details-table td:first-child {
    font-weight: 600;
    width: 40%;               /* largeur fixe pour les labels */
    color: #333;
}

/* Les valeurs (td à droite) */
.side-panel-body table.details-table td:last-child {
    width: 60%;
    color: #555;
}

/* Espacement global au-dessus et au-dessous du tableau */
.side-panel-body table.details-table tbody tr:first-child td {
    padding-top: 10px;
}
.side-panel-body table.details-table tbody tr:last-child td {
    padding-bottom: 10px;
}

/* Optionnel : texte qui peut revenir à la ligne */
.side-panel-body table.details-table td {
    word-break: break-word;
}

/* Séparateurs */
.side-panel-body table.details-table tbody .separateur {
    display: block;
    visibility: hidden;
    height: 0;
}

















/*
============================================================

CSS Espace Pro Réservations
	
============================================================
*/

.app-reservations h1 {
    margin: 20px 0 20px;
    letter-spacing: 0;
}
.app-reservations h2 {
    letter-spacing: 0;
}
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 767px) {
	.app-reservations h1 {
		font-size: 7vw;
	}
	.app-reservations h2 {
		font-size: 6vw;
	}
}

/* TABLEAU DES RÉSERVATIONS */

/* Date & heure - Total Réservations */
.app-reservations .est-non-reservable {
    padding: 5px 10px;
    color:#FFFFFF;
}
.app-reservations .est-non-reservable.date-relache {
    background-color: #666666;
}
.app-reservations .est-non-reservable.date-annulee {
    background-color: #333333;
}

/* Lien Ajouter une réservation */
.app-reservations .ajouter-reservation {
    margin-top: 10px;
}
.app-reservations .ajouter-reservation .toggle-form-link {
    background-color: #dd1c1a;
    color: #FFFFFF;
    border: 1px solid #dd1c1a;
    padding: 0.3rem 0.5rem;
}
.app-reservations .ajouter-reservation .toggle-form-link:hover {
    background-color: #FFFFFF;
    color: #dd1c1a;
    padding: 0.4rem 0.5rem;
}
.app-reservations .lien-inactif {
    color: #DDDDDD; /* couleur grise */
    cursor: default; /* curseur standard, pas la main */
    text-decoration: none; /* enlève le soulignement */
    pointer-events: none; /* ignore tous les événements souris */
}