 <style> * {
     box-sizing: border-box;
 }


body {
    font-family: Arial, sans-serif; /* ajoute une fallback */
    margin: 0;                      /* utile */
    min-height: 100vh;              /* occupe au moins tout l'écran */
    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    background-color: #f5f5dc;      /* plus explicite que background */
    /* background-image: url('fond.jpg'); */
}



 .intro {
     display: flex;
     max-width: 980px;
     align-items: center;
     margin: 0 auto;
     padding-top: 20px;
     padding-bottom: 20px;
     padding-left: 20px;
     padding-right: 20px;
     border-radius: 10px;


 }

 .textintro {
     width: 70%;
     color: #000000;
     font-family: Arial;


 }

 img {
     width: 40%;
 }

 .response-ribbon {
     padding: 10px;
     background: #ccc;
     border: #bcbcbc 1px solid;
     margin-bottom: 15px;
     border-radius: 3px;
 }

 h1 {
     font-family: Arial;
     color: #FFD700;
     background: #4B5320;
     font-size: 1.6em;
     padding: 20px;
     width: 50%;
     margin: 0 auto;
     text-align: center;
     border-radius: 10px;
     font-weight: 200;
     margin-top: 10px;
     margin-bottom: 10px;
     width: 100%;
     max-width: 1150px;

 }

 h2 {
     font-family: Arial;
     color: #FFA500;
     background: #4B5320;
     font-size: 1.4em;
     padding: 20px;
     margin: 0 auto;
     text-align: center;
     border-radius: 10px;
     font-weight: 200;
     width: 100%;
     max-width: 980px;
 }


        h3 {
            font-family: Arial;
            color: black;
            font-size: 1.4em;
            width: 50%;
            margin: 0 auto;
            text-align: center;
            font-weight: 200;

        }

 p {
     font-family: Arial;
     font-size: 1.2em;
     padding: 20px;
     margin: 0;
     text-align: center;
     border-radius: 5px;
     font-weight: 200;
 }

 b {
     font-family: Arial;
     font-size: 1.0em;
     width: 80%;
     margin: 0 auto;
 }

 /* Utiliser ".prix" au lieu de "<prix>" */
 .prix {
     font-family: Arial;
     font-size: 1.6em;
 }

 table {
     padding: 10px;
     margin: 0 auto;
     border-collapse: collapse;
     word-break: break-word;
 }

        .table-spectacle {
            border-collapse: collapse;
            margin: 10px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

 tr {
     width: 100%;
 }

 input {
     padding: 5px 10px;
     border: 1px solid #ccc;
     border-radius: 20px;
     font-size: 1.6em;
 }

 select {
     font-family: Arial;
     font-size: 1.2em;
     width: 100%;
 }



 .center {
     display: block;
     margin-left: auto;
     margin-right: auto;
     width: 50%;
 }

 .increase {
     width: 20px;
     height: 20px;
 }

 .label {
     display: block;
     font-family: Arial;
     font-size: 1em;
 }

 .send {
     margin-top: 10px;
 }

 .mobile {
     display: none;
 }

 h3 {
     margin: 0 0 10px 0;
 }

 td {
     padding: 10px;
 }

 .table-form {
     table-layout: fixed;
 }

 .table-form tr {
     display: flex;
     align-items: center;
 }

 .table-form td:first-child:last-child {
     width: 100%;
 }

 .table-form input[type="text"] {
     width: 100%;
     max-width: 400px;
 }

 .table-form td {
     width: 100px;
 }

 .table-form td:nth-child(1),
 .table-form td:nth-child(2) {
     width: calc((100% - 400px) / 2);
 }

 .date-section ab {
     display: block;
     padding: 10px;
     font-size: 1.4em;
     text-align: center;
     text-decoration: none;
     border-radius: 5px;
     margin-top: 10px;
 }

 .date-section a {
     width: 80%;
     display: block;
     padding: 10px;
     font-size: 1.4em;
     text-align: center;
     text-decoration: none;
     border-radius: 5px;
     margin-top: 10px;
     transition: background-color 1s ease;
     /* Transition de couleur sur 0.3s en douceur */
     max-width: 950px;
     margin: 0 auto;

 }


 .date-section a:hover {
     background-color: #FFFFFF;
 }

 .footer {
     /* Styles pour votre footer */
     /* Par exemple : */
     color: black;
     text-align: center;
     padding: 5px;
     flex: 1;
 }

 @media only screen and (max-width: 920px) {
     img {
         width: 40%;
     }

     .textintro,
     h1,
     h2 {
         width: 80%;
         margin-top: 0px;
         padding: 20px;
         margin-top: 5px;
     }
 }

 @media only screen and (max-width: 500px) {
     .intro {
         display: block;
     }

     img {
         width: 100%;
     }

 }

 @media only screen and (max-width: 960px) {
     tr {
         display: flex;
         flex-wrap: wrap;
     }

     .bordermobile {
         margin-top: 20px;
         padding-top: 20px;
         border-top: 1px solid;
     }

     table {
         width: 100%;
         margin-left: auto;
         margin-right: auto;
     }

     .table-form td:nth-child(1),
     .table-form td:nth-child(2),
     .table-form td {
         width: 100%;
     }

     thead {
         display: none;
     }

     .mobile {
         display: block;
     }

     .table-form .mobile-half {
         width: 50%;
     }

     .checkboxes {
         font-size: 0.8em;
     }

     input {
         padding: 2px 10px;
     }
 }


        /* Appliquer des coins arrondis à toutes les cases */
        .table-spectacle .siege-libre,
        .table-spectacle .siege-indisponible,
        .table-spectacle .siege-indisponibleVIP,
        .table-spectacle .siege-selectionne,
        .table-spectacle .siege-allée,
        .table-spectacle .siege-VIP {
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            text-align: center;
            font-size: 12px;
            padding: 0;
            cursor: pointer;
            margin: 2px;
            /* Espacement entre les cases pour les empêcher de se toucher */
            display: inline-block;
            /* Assure que les éléments se comportent comme des blocs en ligne avec les coins arrondis */
            box-shadow: 2px 2px 2px rgb(0, 0, 0, 0.4);
            /* effect 3D */
            text-align: center;
            /* Centrer le texte */
            color: white;
            /* Couleur du texte en blanc */
            line-height: 35px;
            /* Centrer le texte verticalement */

        }

/* export pdf des places */
#invoice {
    width: 210mm; /* Largeur d'une page A4 */
    min-height: 297mm; /* Hauteur minimale d'une page A4 */
    padding: 10mm; /* Bordures internes */
    box-sizing: border-box; /* Inclut les bordures et paddings */
}

.page-break {
    page-break-after: always;
    break-after: page;
}

 </style>
