/* Apply a custom focus outline to all elements */
   /* Focus telecommande : avant, un voile noir 30 % + ombre noire, invisibles
      sur une photo de fond sombre. Anneau clair bien visible a la place. */
   *:focus {
     outline: none;
     background-color: rgba(255, 255, 255, 0.12);
     box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 18px 4px rgba(79, 195, 247, 0.55);
   }

   /* to be corrected */
   .focusNotification {
     border: #3498db;
     background-color: rgba(67, 23, 138, 0.662);
     box-shadow: 0px 0px 6px 3.5px rgba(67, 23, 138, 0.662);
   }

   /* Agrandissement au focus par transform (et non width/height) : la rangee
      ne se decale plus a chaque deplacement de la telecommande. */
   .vignette:focus {
     transform: scale(1.08);
     z-index: 2;
   }


   /* Style de base */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   html {
     overflow: hidden;
     height: 100%;
     background: white;
   }

   body {
     overflow: hidden;
     height: 100vh;
     display: flex;
     flex-direction: column;
     font-family: Arial, Helvetica, sans-serif;
     background-color: #1a1a2e;
     background-size: cover;
     background-position: center;
   }

   /* Voile sombre derriere le portail, par-dessus la photo de fond de l'hotel
      (meme principe que tvhome.html cote hospiphone : densite plus forte en
      haut/bas pour la lisibilite du titre et des badges, legere au centre). */
   body.has-bg {
     background-image:
       linear-gradient(180deg, rgba(8,20,31,0.65) 0%, rgba(8,20,31,0.20) 35%,
                        rgba(8,20,31,0.20) 65%, rgba(8,20,31,0.70) 100%),
       var(--hotel-bg-url);
   }

   *::-webkit-scrollbar {
     display: none;
   }


   /* Hide scrollbar for IE, Edge and Firefox */
   * {
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
   }

   #main {

     overflow-x: hidden;
     overflow-y: auto;
     flex: 1;
     width: 100%;

     padding: 20px;


   }


   .row {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     position: relative;
     overflow: hidden;
     padding: 10px;
   }

   .row>* {
     flex-shrink: 0;
   }


   /* Par defaut les images ne sont pas recadrees -- seules les vignettes de
      contenu (photos/rubriques) doivent remplir leur cadre en etant
      recadrees (cf. .vignette img plus bas qui le redefinit explicitement).
      Avant, cette regle globale en "cover" rognait aussi les logos/icones
      (logo hotel, icones TV/Telephone/Messagerie...) qui doivent au
      contraire rester entiers, non coupes. */
   img {
     object-fit: contain;
   }

   .vignette {
     position: relative;
   }

   .vignette img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     /* Ici seulement : les photos de rubriques (restaurant, chambres...)
        doivent remplir tout le cadre de la vignette, recadrees si besoin. */
     object-fit: cover;

   }


   .vignette p {
     margin: 0;
     position: absolute;
     line-height: 30px;
     width: 100%;
     bottom: 0;
     text-align: center;
     background-color: rgba(0, 0, 0, 0.3);
     color: white;
   }

   /* nouveau style de vignette pour les applications  */
   .vignetteApp {
     position: relative;
   }

   .vignetteApp img {
     /* Boite carree et centree, cantonnee au-dessus de la bande de texte
        (qui occupe line-height:20px en bas, cf. .vignetteApp p) pour ne
        jamais chevaucher le libelle HTML en dessous. */
     position: absolute;
     top: 5%;
     left: 15%;
     width: 70%;
     height: 55%;
   }

   .vignetteApp p {
     margin: 0;
     position: absolute;
     line-height: 20px;
     width: 100%;
     bottom: 0;
     text-align: center;
     background-color: rgba(0, 0, 0, 0.3);
     color: white;
   }

   /* Define the variable for header width */
   :root {
     --header-height: 18%;
   }


   /* gestion header */
   header {
     display: flex;
     /* flex-direction: row; */
     justify-content: space-between;
     /* border: 2px solid black; */
     background-color: rgba(0, 0, 0, 0.5);
     color: white;
     padding: 0px 15px;
     height: var(--header-height);
     width: 100%;
     z-index: 90;

   }

   header #location {
     display: flex;
     flex-direction: column;
     justify-content: center;
     font-size: larger;
     gap: 8px;
   }

   header #location div {
     display: flex;
     align-items: center;
   }

   header #location img {
     height: 30px;
   }

   /* doit s adpater a la taille de l ecran  */
   header #logo {
     height: 85%;
     width: auto;
     align-self: center;
   }

   header span {
     font-size: 30px;
   }



   header #info {
     display: flex;
     flex-direction: column;
     text-align: end;
     justify-content: center;
     font-size: larger;
     gap: 8px;
   }

   header #info #infoHD {
     display: flex;
     flex-direction: row-reverse;
     align-items: center;

   }

   header #info img {
     height: 20px;
     margin-right: 20px;
   }



   #nameHotel {
     text-align: right;
     font-size: 50px;
     color: #f2f2f2;
     margin: 20px;


   }


   /* loading component css */
   #loading-container {

     position: fixed;
     bottom: 0;
     /* Align at the bottom */
     left: 0;
     width: 100%;
     height: 100%;
     display: none;
     flex-direction: column;
     /* Arrange elements vertically */
     justify-content: center;
     /* Align items at the bottom */
     align-items: center;
     background: rgb(63, 83, 143);
     background: linear-gradient(163deg, rgba(63, 83, 143, 1) 26%, rgba(50, 182, 134, 1) 89%);
     /* semi-transparent background */
     z-index: 9999;

     /* ensure the loading indicator is on top of other elements */
   }

   .loading-indicator {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: 4px solid #f3f3f3;
     border-top: 4px solid #3498db;
     animation: spin 2s linear infinite;
   }

   @keyframes spin {
     0% {
       transform: rotate(0deg);
     }

     100% {
       transform: rotate(360deg);
     }
   }

   /* Styles for the login page */
   .modal {
     display: none;
     position: fixed;
     z-index: 9999;  /* must be above header (90), settings (92), animationDiv (888) */
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(8, 10, 12, 0.72);
     backdrop-filter: blur(3px);
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .modal-content {
     background-color: rgba(18, 20, 22, 0.92);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 14px;
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
     margin: 0 auto;
     padding: 32px 28px;
     width: 320px;
     display: flex;
     flex-direction: column;
   }

   .modal-content h2 {
     color: white;
     margin: 0 0 20px 0;
     background-image: linear-gradient(to left, #007bff, #3d3d3d);
     padding: 10px;
     border-radius: 5px;
     text-align: center;
   }

   .modal-content label {
     color: #ccc;
     font-size: 14px;
     margin-top: 10px;
     margin-bottom: 4px;
   }

   .login-error {
     color: #ff6b6b;
     font-size: 14px;
     min-height: 18px;
     margin: 0 0 6px 0;
     text-align: center;
   }

   #loginButton {
     margin-top: 20px;
     padding: 12px 20px;
     border: none;
     border-radius: 6px;
     background-image: linear-gradient(to right, #007bff, #005fcc);
     color: white;
     font-size: 16px;
     cursor: pointer;
   }

   #loginButton:hover,
   #loginButton:focus {
     background-image: linear-gradient(to right, #3395ff, #007bff);
     outline: none;
   }

   /* Other styles */
   input[type=email],
   input[type=password] {
     width: 100%;
     padding: 12px 16px;
     margin: 0 0 8px 0;
     display: inline-block;
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 6px;
     background-color: rgba(255, 255, 255, 0.06);
     color: white;
     box-sizing: border-box;
   }

   input[type=email]:focus,
   input[type=password]:focus {
     outline: none;
     border-color: #007bff;
     background-color: rgba(255, 255, 255, 0.1);
   }

   input[type=email]::placeholder,
   input[type=password]::placeholder {
     color: rgba(255, 255, 255, 0.4);
   }

   /* css of the main apps */
   #approw {
     display: flex;
     /* Use flexbox layout */
     justify-content: flex-start;
     /* Align items to the start of the container */
     align-items: center;
     /* Center items vertically */

   }

   #approw>div {
     margin-right: 10px;
     /* Add some spacing between elements */
     left: "20px";
   }


   /* css pour le panier  */
   #cart-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: none;
     flex-direction: column;
     /*justify-content: flex-start;*/
     align-items: horizon;
     height: 50vh;
     width: 50%;
     background-color: rgb(255, 255, 255);
   }

   #cartHead {
     background-color: #000000;
     display: flex;
     justify-content: space-between;
     width: 100%;
     height: 40px;
     color: white;
     left: -10px;
     font-weight: bold;
     padding: 5px;

   }

   .cart {
     text-align: left;
     padding: 10px;
     width: 100%;
     height: 90%;

   }

   #cart-items {
     overflow: hidden !important;
     width: 100%;
     height: 82%;


   }

   #cart-items li {
     justify-items: space-between;
     height: 50px;

   }

   .delete-button {
     background: none;
     border: none;
     padding: 0;


     position: absolute;
     bottom: 30px;
     right: 10px;
   }

   .delete-button img {
     width: 30px;
     /* Adjust the width and height as needed */
     height: 30px;

   }

   #cart-total-text {
     font-weight: bold;
     position: absolute;
     bottom: 10px;
     right: 20px;
   }

   #my-btn {
     position: absolute;
     bottom: 10px;
     left: 10px;
   }

   #continue-btn {
     height: 50px;
     width: 100px;
   }

   #checkout-btn {
     height: 50px;
     width: 100px;
   }


   /* settings menu css */
   #settings-container {
     position: fixed;
     bottom: 0;
     right: 0;
     background-color: rgba(18, 20, 22, 0.842);
     padding: 10px;
     border-top-left-radius: 10px;
     height: 100%;
     width: 50%;
     max-height: 100vh;
     max-width: 50vh;
     overflow-y: auto;
     display: none;   /* hidden until explicitly opened */
     z-index: 92;


   }

   #settings-container p {
     font-weight: bold;

   }


   #settings-title {
     color: white;
     background-image: linear-gradient(to left, #007bff, #3d3d3d);
     padding: 10px;
     margin: 0;
     border-radius: 5px;
   }

   #options-container {
     margin-top: 20px;
     font-size: 30px;
   }

   .option {
     margin-bottom: 10px;
     color: white;
   }

   label {
     display: block;
     font-weight: bold;
   }

   select,
   input[type="checkbox"] {
     margin-top: 5px;

     /* styling the select */
     height: 30px;
     width: 20%;

   }

   /* creating sliding checkbox */

   switch {
     display: inline-block;
     height: 34px;
     position: relative;
     width: 60px;
   }

   .switch input {
     display: none;
   }

   .slider {
     background-color: #ccc;

     cursor: pointer;
     height: 30px;
     width: 52px;

     transition: .4s;
   }

   .slider:before {
     background-color: #fff;

     content: "";
     height: 26px;

     display: inline-block;
     transition: .4s;
     width: 26px;
   }

   input:checked+.slider {
     background-color: #66bb6a;
   }

   input:checked+.slider:before {
     transform: translateX(26px);
   }

   .slider.round {
     border-radius: 34px;
   }

   .slider.round:before {
     border-radius: 50%;
   }











   /* css of the info page  */
   #info-container {
     display: none;
   }

   #full-image {
     top: 0;
     background-image: url('e.jpg');
     background-size: cover;
     background-position: center;
     height: 100%;
     width: 100%;

     position: fixed;
     z-index: 91;
   }

   #blackrectangle {
     background-color: black;
     height: 50%;
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     z-index: 92;
   }

   #minirectangle {
     background-color: grey;
     height: 10%;
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     z-index: 92;
   }

   #imagest {
     background-image: url('e.jpg');
     background-size: cover;
     background-position: center;
     background-color: grey;
     height: 150px;
     width: 250px;
     position: absolute;
     top: 37%;
     left: 10%;
     z-index: 92;
   }

   #button-info {
     background-color: black;
     height: 30px;
     width: 70px;
     border-color: rgb(28, 27, 27);
     color: white;
     position: absolute;
     top: 35%;
     left: 30%;
   }

   #description {
     color: blanchedalmond;
     text-align: left;
     position: absolute;
     top: 35%;
     left: 30%;
   }

   #title {
     font-size: 30px;
   }

   #infodescription {
     width: 500px;
   }

   .highlighted {
     background-color: yellow;
   }

   /* confirm emptying cart modal  */
   .modalconfirm {
     display: none;
     position: fixed;
     z-index: 1;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.5);
   }

   .modalconfirm-content {
     background-color: #fefefe;
     margin: 15% auto;
     padding: 20px;
     border: 1px solid #888;
     width: 300px;
     height: 100px;
   }

   .modalconfirm-buttons {
     display: flex;
     justify-content: flex-end;
   }

   button {
     margin-right: 10px;
   }

   /* css of the messages  */

   #containerMsg {
     /* overflow: hidden; */

     background-color: #495459;
     /* Transparent blue background */
     margin: 0;
     padding: 0;
     height: 100vh;
     width: 100%;
     display: none;
     position: absolute;
     top: 0;
     z-index: 91;

   }

   .rectangleMsg {
     --retangleMsg-width: 25%;
     background-color: #384247;

     /* Light blue color for the rectangle */
     width: var(--retangleMsg-width);

     /* elements alignment */
     display: flex;
     flex-direction: column;
     align-items: left;

   }

   .messageTitle {

     height: 60px;
     width: var(--retangleMsg-width);

     display: flex;
     flex-direction: row;
     align-items: center;
   }


   .messageTitle img {

     height: 60px;

   }


   .messageTitle span {

     font-size: 30px;
     color: white;

   }


   /* Remove default list styles */
   #messages,
   #unreadmessages {
     list-style: none;
     padding: 10px;

     overflow: hidden;
   }

   /* Style list items */
   #messages li,
   #unreadmessages li {
     display: flex;
     align-items: bottom;
     margin-bottom: 10px;
     margin-left: 10px;
   }

   /* Style image */
   #messages li img,
   #unreadmessages li img {
     height: 20px;
     width: 20px;
     margin-right: 5px;
   }

   /* Style span */
   #messages li span {
     font-size: 90px;
     /* align-self: start; */
     /* align-items: center; */
     white-space: nowrap;
     width: 50%;
     overflow: hidden;


   }

   /* style text msg */

   #dateMsg {
     font-size: 30px;
     position: relative;
     left: 10px;
     color: #fefefe
   }

   #MsgContent {

     position: relative;
     left: 10px;
     width: 300px;

   }

   :root {
     --retangleMsg-width: 25%;
     /* Initial width of retangleMsg */
   }

   #textMsgContainer {
     position: absolute;
     left: calc(var(--retangleMsg-width));

     height: 100vh;
     width: 100vh;




   }


   #MsgContainer {


     max-width: fit-content;

     padding: 20px;
   }

   .bubbleImgContainer {
     position: absolute;
     left: calc(var(--retangleMsg-width));
     top: 60%;
   }



   /* billing info management  css*/
   #orderHistory {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: none;
     justify-content: flex-start;
     align-items: flex-start;
     height: 50vh;
     width: 70%;
     background-color: rgb(255, 255, 255);
     border: 1px solid;
   }

   #historyHead {
     display: flex;
     /* Added this line */
     align-items: flex-start;
     justify-content: flex-start;
     /* Added this line */
     margin-top: 5px;
     justify-content: space-between;
   }

   #historyHead p {

     margin-right: 10px;
     margin-left: 10px;
     font-size: 25px;
     font-weight: bold;
     /* Added this line for spacing between elements */
   }


   #orderHistoryList {
     border: 1px solid;
     height: 60%;
     overflow: hidden;
   }

   #orderHistoryList li {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #ccc;
     /* Optional: add a bottom border between items */
     padding: 5px 10px;
     /* Optional: add some padding around each item */
   }

   #orderHistoryList span {
     display: grid;
     /* Use grid layout for better alignment */
     grid-template-columns: 3fr 1fr 1fr 1fr;
     /* Adjust the column widths as needed */
     justify-items: flex-start;
     /* Align grid items to the left */
     align-items: center;
     /* Vertically center the grid items */

     padding: 5px 10px;
   }

   #orderHistoryList span:last-child {
     flex-grow: 0;
     margin-left: 10px;
     /* Optional: add some space between the last span and the edge */
   }

   /* Optional: Adjust the styling of the historyTitle */
   .historyTitle {
     background-color: black;
     color: white;
     display: flex;
     justify-content: space-between;
     padding: 5px 10px;
   }

   .historyTitle span {
     display: grid;
     /* Use grid layout for better alignment */
     grid-template-columns: 3fr 1fr -2fr 1fr;
     /* Adjust the column widths as needed */
     justify-items: flex-start;
     /* Align grid items to the left */
     align-items: center;
     /* Vertically center the grid items */

     padding: 5px 10px;
   }

   #historyTitle p {
     margin: 0;
   }

   #billingTotal {
     font-weight: bold;
     position: absolute;
     bottom: -1px;
     right: 60px;
   }

   #close {
     position: absolute;
     bottom: -60px;
     left: 0;
     height: 50px;
     width: 100px;
   }


   /*message notifaction circle css */
   #circleIN {
     height: 12px;
     width: 12px;
     background-color: #e02a2a;
     border-radius: 50%;
     display: inline-block;

     /* position relative to the image  */
     position: absolute;
     top: -5px;
     right: 15px;

     /* Center the content (number) in the circle */
     display: none;
     align-items: center;
     justify-content: center;

     /* Text styles */
     color: white;
     font-size: 7px !important;
   }

   #messageNotif {
     position: relative;
     display: inline-block;
   }

   #imgC {

     width: auto;
   }


   /* CartNotif css      */

   #yellowCircleIN {
     height: 12px;
     width: 12px;
     background-color: #efff0b;
     border-radius: 50%;
     display: inline-block;

     /* position relative to the image  */
     position: absolute;
     top: 3px;
     right: 29px;

     /* Center the content (number) in the circle */
     display: none;
     align-items: center;
     justify-content: center;

     /* Text styles */
     color: rgb(0, 0, 0);
     font-size: 7px !important;
   }

   #CartNotif {
     position: relative;
     display: inline-block;
   }

   #imgcart {
     height: 30px !important;
     width: auto;
   }

   /*css of the anmination  */

   .container {
     width: 200px;
     height: 200px;
     position: relative;
     -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
   }

   #cube {
     width: 100%;
     height: 100%;
     position: absolute;


   }



   #cube div {
     width: 200px;
     height: 200px;
     display: block;
     position: absolute;
     border: none;
     line-height: 150px;
     text-align: center;
     font-size: 50px;
     font-weight: bold;


   }

   #cube {
     position: relative;
     right: -1500px;
   }

   @-webkit-keyframes rotatecube {

     /* sliding then rotate */
     0% {
       right: -1500px;
     }

     50% {
       right: -1000px;
     }

     100% {
       right: -1500px;
     }

     0% {
       -webkit-transform: rotateY(0deg);
     }


     100% {
       -webkit-transform: rotateY(360deg);
     }
   }

   @-moz-keyframes rotatecube {

     /* sliding then roatet */
     0% {
       right: -1500px;
     }


     50% {
       right: -800px;
     }

     100% {
       right: -1500px;
     }


     0% {
       -moz-transform: rotateY(0deg);
     }


     100% {
       -moz-transform: rotateY(360deg);
     }
   }

   .front {
     background: rgba(37, 36, 36, 0.811);
   }

   .back {
     background: rgba(0, 0, 0, 0.615);
   }

   .right {
     background: rgba(37, 36, 36, 0.811);
   }

   .left {
     background: rgba(37, 36, 36, 0.811);
   }

   .top {
     background: rgba(37, 36, 36, 0.811);
   }

   .bottom {
     background: rgba(0, 0, 0, 0.615);
   }

   #cube .front {
     -webkit-transform: rotateY(30deg) rotateX(20deg) translateZ(100px);
     -moz-transform: rotateY(30deg) rotateX(20deg) translateZ(100px);



   }

   #cube .back {
     -webkit-transform: rotateY(30deg) rotateX(20deg) translateZ(-100px);
     -moz-transform: rotateY(30deg) rotateX(20deg) translateZ(-100px);


   }

   #cube .right {
     -webkit-transform: rotateY(30deg) rotateX(20deg) rotateY(90deg) translateZ(100px);
     -moz-transform: rotateY(30deg) rotateX(20deg) rotateY(90deg) translateZ(100px);


   }

   #cube .left {
     -webkit-transform: rotateY(30deg) rotateX(20deg) rotateY(-90deg) translateZ(100px);
     -moz-transform: rotateY(30deg) rotateX(20deg) rotateY(-90deg) translateZ(100px);

   }

   #cube .top {
     -webkit-transform: rotateY(30deg) rotateX(20deg) rotateX(90deg) translateZ(100px);
     -moz-transform: rotateY(30deg) rotateX(20deg) rotateX(90deg) translateZ(100px);


   }

   #cube .bottom {
     -webkit-transform: rotateY(30deg) rotateX(20deg) rotateX(-90deg) translateZ(100px);
     ;
     -moz-transform: rotateYrotateY(30deg) rotateX(20deg) rotateX(-90deg) translateZ(100px);
     ;


   }

   #cube.slide-in {
     -webkit-animation: slideInFromRightCube 5s ease forwards;
   }

   #cube.rotate {
     -webkit-transform-style: preserve-3d;
     -webkit-animation: rotatecube 10s;


     -moz-transform-style: preserve-3d;
     -moz-animation: rotatecube 10s;
   }


   #cube img {
     width: 100%;
     height: 100%;
     object-fit: cover;

   }

   /* gestion du glissemnt vers la  droite */
   @keyframes slideInFromRight {
     0% {

       right: -100%;
     }

     100% {
       right: 20px;
     }
   }


   /* New animation to slide out to the left */
   @keyframes slideOutToLeft {
     0% {
       right: 20px;
     }

     100% {
       right: -100%;
       visibility: hidden;
     }
   }


   #messageInNotifContainer {
     border-radius: 20px;
     color: white;
     background-color: rgba(37, 36, 36, 0.811);
     display: flex;
     align-content: space-between;
     /* Avant : vh (hauteur d'ecran) utilise pour une LARGEUR -- la taille du
        popup variait de facon incoherente selon le ratio de l'ecran. */
     max-width: 60vw;
     min-width: 40vw;
     word-wrap: break-word;
     /* Allow long words to wrap */
     overflow-wrap: break-word;
     /* Ensure long words near the border break */

     position: fixed;

     right: -100%;
     /* Avant : top fixe a 20px, qui passait sous le header (18% de la
        hauteur d'ecran) selon la resolution -- le popup pouvait apparaitre
        partiellement cache derriere le header. */
     top: calc(var(--header-height) + 20px);


   }


   #messageInNotifContainer.slide-in {
     -webkit-animation: slideInFromRight 5s ease forwards;
   }


   #messageInNotifContainer.slide-out {
     -webkit-animation: slideOutToLeft 5s ease forwards;
   }


   #hotelLogoNotif {
     height: 50px;
     width: 50px;
   }

   #ligne {
     position: relative;
     width: 85%;
     height: 5px;
     border-radius: 5px;
     background-color: aliceblue;


   }

   #notifButton {
     position: absolute !important;
     bottom: -70px;
     right: 5px;
     height: 70px;
     width: 70px;

   }


   #animationDiv {
     position: absolute;
     top: 60px;

     width: 100%;
     height: 100%;

     display: none;   /* hidden until a notification arrives */
     z-index: 888;

   }

   /* =====================================================================
      Refonte graphique 2026-10-21 -- harmonisee avec hospitv / hospiphone.
      Bloc place en fin de fichier : il surcharge les anciens styles, et le
      retirer suffit a revenir a l'ancien rendu.
      ===================================================================== */
   :root {
     --accent: #4fc3f7;
     --panel: rgba(14, 22, 32, 0.97);
     --panel-border: rgba(255, 255, 255, 0.08);
     --text-dim: rgba(255, 255, 255, 0.65);
   }

   body,
   button,
   select,
   input {
     font-family: 'Roboto', Arial, Helvetica, sans-serif;
   }

   /* --- En-tete : degrade vers le transparent au lieu du bandeau noir --- */
   header {
     background-color: transparent;
     background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0) 100%);
     padding: 0 40px;
     text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
   }
   header span {
     font-size: 26px;
     font-weight: 400;
   }
   header #city {
     font-size: 30px;
     font-weight: 500;
     letter-spacing: 0.04em;
   }
   header #time {
     font-size: 34px;
     font-weight: 500;
   }
   header #date,
   header #client {
     color: var(--text-dim);
   }

   /* --- Nom de l'hotel : sobre, aligne avec les rangees --- */
   #nameHotel {
     text-align: left;
     font-size: 40px;
     font-weight: 300;
     letter-spacing: 0.06em;
     color: #fff;
     margin: 12px 50px 0;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
   }

   /* --- Titres de rubrique --- */
   .row-title {
     color: #fff;
     font-size: 26px;
     font-weight: 500;
     margin: 18px 0 0 30px;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
   }
   .row-title::first-letter {
     text-transform: uppercase;
   }

   /* --- Vignettes de contenu --- */
   .vignette {
     border-radius: 12px;
     overflow: hidden;
     background-color: rgba(255, 255, 255, 0.06);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
     transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
   }
   .vignette img,
   .vignette video {
     border-radius: 0;
   }
   .vignette p {
     line-height: normal;
     padding: 28px 12px 10px;
     text-align: left;
     font-size: 17px;
     font-weight: 500;
     background-color: transparent;
     background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .vignette:focus {
     background-color: rgba(255, 255, 255, 0.06);
     box-shadow: 0 0 0 3px #fff, 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 22px 4px rgba(79, 195, 247, 0.5);
   }

   /* Pastille lecture des videos */
   .vignette .play-badge {
     position: absolute;
     right: 10px;
     bottom: 10px;
     width: 30px;
     height: 30px;
     line-height: 30px;
     text-align: center;
     font-size: 13px;
     color: #fff;
     border-radius: 50%;
     background-color: rgba(0, 0, 0, 0.55);
     border: 1px solid rgba(255, 255, 255, 0.6);
   }

   /* --- Rangee d'applications (TV, Telephone, Messagerie...) --- */
   .child.application {
     border-radius: 14px;
     margin-right: 6px;
     transition: transform 0.18s ease-out;
   }
   .vignetteApp {
     border-radius: 14px;
     background-color: rgba(255, 255, 255, 0.12);
     border: 1px solid rgba(255, 255, 255, 0.15);
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
   }
   .vignetteApp img {
     top: 14%;
     left: 30%;
     width: 40%;
     height: 46%;
   }
   .vignetteApp p {
     line-height: 26px;
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.06em;
     background-color: transparent;
   }
   .child.application:focus {
     background-color: transparent;
     box-shadow: none;
     transform: scale(1.08);
   }
   .child.application:focus .vignetteApp {
     background-color: rgba(255, 255, 255, 0.28);
     box-shadow: 0 0 0 3px #fff, 0 0 20px 4px rgba(79, 195, 247, 0.5);
   }

   /* --- Ecran de chargement --- */
   #loading-container {
     background: #0e1620;
     background-image: radial-gradient(ellipse at center, #1b2a3a 0%, #0b1119 75%);
   }
   .loading-indicator {
     border: 4px solid rgba(255, 255, 255, 0.15);
     border-top-color: var(--accent);
   }

   /* --- Panneau Parametres --- */
   #settings-container {
     background-color: var(--panel);
     border-left: 1px solid var(--panel-border);
     border-radius: 0;
     padding: 30px;
     box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
   }
   #settings-title,
   .modal-content h2 {
     background-image: none;
     background-color: transparent;
     padding: 0 0 14px;
     border-radius: 0;
     border-bottom: 1px solid var(--panel-border);
     font-weight: 500;
   }
   #options-container {
     font-size: 24px;
   }
   .option {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 0;
     margin: 0;
     border-bottom: 1px solid var(--panel-border);
   }
   #settings-container .option p,
   .option > label:not(.switch) {
     font-weight: 400;
     margin: 0;
   }
   #settings-container select {
     width: auto;
     min-width: 160px;
     height: 40px;
     padding: 0 10px;
     font-size: 18px;
     color: #fff;
     background-color: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
   }
   #settings-container select option {
     color: #000;
   }
   .switch {
     margin: 0;
     border-radius: 34px;
   }
   .slider {
     background-color: rgba(255, 255, 255, 0.25);
   }
   input:checked + .slider {
     background-color: #2e9d5a;
   }

   /* --- Panier, historique et confirmation : cartes sombres --- */
   #cart-container,
   #orderHistory {
     background-color: var(--panel);
     color: #fff;
     border: 1px solid var(--panel-border);
     border-radius: 16px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
     overflow: hidden;
   }
   #cartHead,
   .historyTitle {
     background-color: rgba(255, 255, 255, 0.06);
     border-radius: 8px;
     height: auto;
     padding: 10px 14px;
   }
   #cartHead h2 {
     font-size: 18px;
     font-weight: 500;
     color: var(--text-dim);
   }
   #cart-items li,
   #orderHistoryList li {
     border-bottom: 1px solid var(--panel-border);
     padding: 0 14px;
     align-items: center;
   }
   #orderHistoryList {
     border: none;
   }
   #cart-total-text,
   #billingTotal {
     font-size: 22px;
     font-weight: 700;
   }
   .delete-button img {
     -webkit-filter: brightness(0) invert(1);
     filter: brightness(0) invert(1);
     opacity: 0.8;
   }
   #continue-btn,
   #checkout-btn,
   #close,
   .modalconfirm-buttons button {
     height: 46px;
     width: auto;
     min-width: 130px;
     padding: 0 20px;
     font-size: 16px;
     font-weight: 500;
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.25);
     border-radius: 8px;
     background-color: rgba(255, 255, 255, 0.08);
     cursor: pointer;
   }
   #checkout-btn,
   #confirmBtn {
     border-color: transparent;
     background-color: #1e88e5;
   }
   .modalconfirm-content {
     background-color: var(--panel);
     color: #fff;
     border: 1px solid var(--panel-border);
     border-radius: 14px;
     height: auto;
     width: 380px;
     padding: 24px;
     font-size: 18px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
   }
   .modalconfirm-buttons {
     margin-top: 20px;
   }

   /* --- Menu cache technique (js/secretMenu.js) --- */
   #secret-menu {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     align-items: center;
     justify-content: center;
     background-color: rgba(5, 10, 16, 0.7);
     z-index: 10000;
   }
   .secret-panel {
     width: 620px;
     max-height: 90vh;
     overflow-y: auto;
     padding: 28px 30px 20px;
     color: #fff;
     background-color: var(--panel);
     border: 1px solid var(--panel-border);
     border-radius: 16px;
     box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
   }
   .secret-title {
     margin: 0 0 16px;
     padding-bottom: 12px;
     font-size: 26px;
     font-weight: 500;
     border-bottom: 1px solid var(--panel-border);
   }
   .secret-item {
     display: flex;
     align-items: center;
     width: 100%;
     margin: 0 0 6px;
     padding: 12px 16px;
     font-size: 20px;
     text-align: left;
     color: #fff;
     background-color: transparent;
     border: none;
     border-radius: 10px;
     cursor: pointer;
   }
   .secret-item:focus {
     background-color: rgba(255, 255, 255, 0.14);
     box-shadow: 0 0 0 3px #fff, 0 0 18px 4px rgba(79, 195, 247, 0.45);
   }
   .secret-icon {
     width: 34px;
     font-size: 20px;
     text-align: center;
     margin-right: 12px;
     color: var(--accent);
   }
   .secret-value {
     margin-left: auto;
     padding: 2px 10px;
     font-size: 15px;
     color: var(--text-dim);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 20px;
   }
   .secret-current .secret-value {
     color: #fff;
     background-color: #2e9d5a;
     border-color: transparent;
   }
   .secret-info-row {
     display: flex;
     padding: 8px 4px;
     font-size: 17px;
     border-bottom: 1px solid var(--panel-border);
   }
   .secret-info-row span:first-child {
     flex: 0 0 210px;
     color: var(--text-dim);
   }
   .secret-info-row span:last-child {
     flex: 1;
     word-break: break-all;
   }
   .secret-status {
     min-height: 22px;
     margin: 10px 4px 0;
     font-size: 16px;
     color: #8fd19e;
   }
   .secret-hint {
     margin: 8px 4px 0;
     font-size: 14px;
     color: var(--text-dim);
   }
   #log_area.secret-log-visible {
     display: block;
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     max-height: 35vh;
     overflow-y: auto;
     padding: 10px 16px;
     font: 13px/1.4 monospace;
     color: #b9f6ca;
     background-color: rgba(0, 0, 0, 0.85);
     z-index: 9998;
   }

   /* --- Fiche contenu (#info-container, js/info.js) ---
      Disposition d'origine (grande image en haut, miniature a gauche, texte en bas),
      seulement rendue plus lisible : degrade au lieu de la coupure image / bande grise /
      noir, texte blanc plus grand (au lieu de beige 16 px), vrais boutons. */
   #info-container {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 91;
     background-color: #0b1119;
   }
   #info-container #full-image {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 62%;
     background-size: cover;
     background-position: center;
     z-index: 91;
   }
   #info-container #full-image::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 45%;
     background-image: linear-gradient(180deg, rgba(11, 17, 25, 0) 0%, #0b1119 100%);
   }
   #info-container #blackrectangle {
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     height: 50%;
     background-color: transparent;
     z-index: 92;
   }
   #info-container #description {
     position: absolute;
     top: 8%;
     left: calc(6% + 360px);
     right: 6%;
     color: #fff;
     text-align: left;
   }
   .info-kicker {
     margin: 0 0 8px;
     font-size: 16px;
     font-weight: 500;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--accent);
   }
   #info-title {
     margin: 0;
     font-size: 48px;
     font-weight: 500;
     line-height: 1.15;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
   }
   #info-title::first-letter {
     text-transform: uppercase;
   }
   .info-price {
     margin: 12px 0 0;
     font-size: 38px;
     font-weight: 300;
   }
   #info-container #infodescription {
     width: auto;
     max-width: 1000px;
     margin: 14px 0 0;
     font-size: 24px;
     line-height: 1.5;
     color: rgba(255, 255, 255, 0.85);
     max-height: 150px;
     overflow: hidden;
   }
   #info-container #minirectangle {
     position: absolute;
     top: auto;
     bottom: 20%;
     left: calc(6% + 360px);
     width: auto;
     height: auto;
     background-color: transparent;
     z-index: 92;
   }
   #info-container #imagest {
     position: absolute;
     top: 44%;
     left: 6%;
     width: 330px;
     height: 220px;
     background-color: #111;
     background-size: cover;
     background-position: center;
     border: 3px solid rgba(255, 255, 255, 0.9);
     border-radius: 14px;
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
     cursor: zoom-in;
     z-index: 93;
   }
   #info-container #minirectangle button {
     position: static;
     height: 58px;
     min-width: 210px;
     width: auto;
     margin: 0 14px 0 0;
     padding: 0 28px;
     font-size: 20px;
     font-weight: 500;
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 10px;
     background-color: rgba(255, 255, 255, 0.1);
     cursor: pointer;
   }
   #info-container #minirectangle #button-info {
     border-color: transparent;
     background-color: #1e88e5;
   }
   #info-container #minirectangle button:focus {
     background-color: rgba(255, 255, 255, 0.22);
     box-shadow: 0 0 0 3px #fff, 0 0 18px 4px rgba(79, 195, 247, 0.5);
   }
   #info-container #minirectangle #button-info:focus {
     background-color: #42a5f5;
   }

   /* --- Messagerie (#containerMsg, js/manageMessage.js) --- */
   #containerMsg {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     z-index: 91;
     background-color: #0d141d;
     background-image: radial-gradient(ellipse at top right, #1b2a3a 0%, #0b1119 70%);
   }
   #containerMsg .rectangleMsg {
     display: flex;
     flex-direction: column;
     width: 560px;
     flex: 0 0 560px;
     height: 100vh;
     background-color: rgba(255, 255, 255, 0.04);
     border-right: 1px solid var(--panel-border);
   }
   #containerMsg .messageTitle {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     width: auto;
     height: auto;
     padding: 40px 32px 20px;
   }
   #containerMsg #titlespan {
     font-size: 34px;
     font-weight: 500;
     color: #fff;
     background: none;
     box-shadow: none;
   }
   #containerMsg #msg-count {
     font-size: 16px;
     font-weight: 500;
     color: var(--accent);
   }
   #containerMsg #messages {
     flex: 1;
     overflow-y: auto;
     margin: 0;
     padding: 6px 18px 24px;
   }
   #containerMsg #messages li.msg-item {
     display: flex;
     align-items: flex-start;
     height: auto;
     margin: 0 0 8px;
     padding: 16px 18px;
     border-radius: 12px;
     cursor: pointer;
     overflow: hidden;
   }
   #containerMsg #messages li.msg-item:focus {
     background-color: rgba(255, 255, 255, 0.12);
     box-shadow: 0 0 0 3px #fff, 0 0 18px 4px rgba(79, 195, 247, 0.4);
   }
   .msg-dot {
     flex: 0 0 10px;
     width: 10px;
     height: 10px;
     margin: 9px 14px 0 0;
     border-radius: 50%;
     background-color: transparent;
   }
   .msg-item.unread .msg-dot {
     background-color: var(--accent);
   }
   .msg-item-body {
     flex: 1;
     min-width: 0;
   }
   #containerMsg .msg-preview {
     margin: 0;
     font-size: 20px;
     line-height: 1.35;
     color: rgba(255, 255, 255, 0.75);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     white-space: normal;
   }
   #containerMsg .msg-item.unread .msg-preview {
     color: #fff;
     font-weight: 500;
   }
   #containerMsg .msg-meta {
     margin: 6px 0 0;
     font-size: 15px;
     color: var(--text-dim);
   }
   #msg-empty {
     display: none;
     padding: 20px 36px;
     font-size: 20px;
     color: var(--text-dim);
   }
   #containerMsg #MsgContainer {
     flex: 1;
     display: flex;
     flex-direction: column;
     max-width: none;
     min-width: 0;
     padding: 48px 64px 32px;
     color: #fff;
   }
   .msg-reader-head {
     display: flex;
     align-items: center;
     padding-bottom: 22px;
     border-bottom: 1px solid var(--panel-border);
   }
   #msg-hotel-logo {
     width: 64px;
     height: 64px;
     margin-right: 18px;
     padding: 6px;
     border-radius: 14px;
     background-color: #fff;
     object-fit: contain;
   }
   #msg-hotel-name {
     margin: 0;
     font-size: 24px;
     font-weight: 500;
   }
   #containerMsg #dateMsg {
     position: static;
     margin: 4px 0 0;
     font-size: 17px;
     color: var(--text-dim);
   }
   #containerMsg #textMsgContainer {
     position: static;
     flex: 1;
     width: auto;
     height: auto;
     overflow-y: auto;
     padding-top: 30px;
   }
   #containerMsg .bubbleContainer {
     display: inline-block;
     max-width: 900px;
     padding: 22px 28px;
     border-radius: 6px 20px 20px 20px;
     background-color: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.08);
   }
   #containerMsg .bubbleContainer p {
     margin: 0;
     font-size: 26px;
     line-height: 1.5;
     white-space: pre-wrap;
   }
   .msg-images {
     display: flex;
     flex-wrap: wrap;
     margin-top: 22px;
   }
   .msg-images img {
     width: 220px;
     height: 150px;
     margin: 0 14px 14px 0;
     object-fit: cover;
     border-radius: 12px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
     cursor: zoom-in;
   }
   .msg-hint {
     margin: 16px 0 0;
     font-size: 15px;
     color: var(--text-dim);
   }

   /* --- Visionneuse plein ecran (#image-viewer, js/imageViewer.js) --- */
   #image-viewer {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 9990;
     align-items: center;
     justify-content: center;
     background-color: rgba(0, 0, 0, 0.94);
   }
   #image-viewer-img {
     max-width: 92vw;
     max-height: 86vh;
     object-fit: contain;
     border-radius: 6px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
   }
   #image-viewer-prev,
   #image-viewer-next {
     position: absolute;
     top: 50%;
     width: 70px;
     height: 70px;
     margin: -35px 0 0;
     font-size: 46px;
     line-height: 60px;
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.25);
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.1);
     cursor: pointer;
   }
   #image-viewer-prev { left: 40px; }
   #image-viewer-next { right: 40px; }
   #image-viewer-count {
     position: absolute;
     top: 30px;
     right: 44px;
     margin: 0;
     font-size: 20px;
     color: rgba(255, 255, 255, 0.8);
   }
   .image-viewer-hint {
     position: absolute;
     bottom: 26px;
     left: 0;
     right: 0;
     margin: 0;
     text-align: center;
     font-size: 16px;
     color: rgba(255, 255, 255, 0.6);
   }