/* Définir le fond général du body avec la couleur ivoire */
body {
    background-color: #FFFFF0; /* Couleur ivoire */
    font-family: Arial, sans-serif; /* Police de caractères par défaut */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les espacements par défaut */
}

/* ============================
   STYLES NBREPLACE ou COMPLET
============================ */

.complet-slot {
    background-color: #f8d7da; /* rouge clair */
    color: #721c24 !important; /* rouge foncé */
}

.complet-slot .inscrit-name {
    font-weight: bold;
}

.texte-complet {
    color: #721c24;
    font-weight: bold;
}

/* ============================
   STYLES GÉNÉRAUX DES BOUTONS
============================ */

/* Bouton de base */
.button {
    display: block;
    width: 100%; /* Prend toute la largeur disponible */
    padding: 10px; /* Espacement interne */
    font-size: 14px; /* Taille de la police */
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.button-back {
    background-color: #007bff;
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-back:hover {
    background-color: #0056b3;
}

/* Boutons spécifiques et Conteneur pour le bouton et la pastille */
/* Conteneur des pastilles */
.pastille-container {
    display: flex; /* Active Flexbox pour organiser les éléments */
    justify-content: space-between; /* Sépare les éléments (nom et pastille) */
    align-items: center; /* Centre verticalement */
    gap: 8px; /* Espacement entre le texte et la pastille */
    width: 100%; /* Prend toute la largeur disponible */
}

/* Nom aligné à gauche */
.inscrit-name {
    flex-grow: 1; /* Le nom prend tout l'espace restant */
    text-align: left; /* Aligne le texte à gauche */
}

/* Pastille alignée à droite */
.pastille {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #007bff;
}

/* Espacement pour lignes intermédiaires */
.places-1 td,
.places-2 td,
.places-3 td,
.places-4 td,
.places-5 td,
.places-6 td {
    padding: 12px;
    vertical-align: middle;
}


.button_reserver,
.button-effacer {
    display: block;
    width: fit-content; /* Ajuste la largeur au contenu */
    padding: 6px 8px; /* Espacement interne */
    font-size: 12px; /* Taille de la police */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* Marges verticales minimales par défaut */
    margin: 4px 0; /* 4px au-dessus et en dessous */
}


.button_reserverJW {
    display: block;
    width: fit-content; /* Ajuste la largeur au contenu */
    padding: 6px 8px; /* Espacement interne */
    font-size: 12px; /* Taille de la police */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* Marges verticales minimales par défaut */
    margin: 2px 0; /* 4px au-dessus et en dessous */
}
.button_reserverJW {
    position: relative; /* Nécessaire pour positionner la pastille */
}

.button_reserverJW::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 10px;
    height: 12px;
    background-color: #007bff;
    border-radius: 50%; /* Forme circulaire */
}

/* Bouton Annuler (toujours visible) */
/* Bouton Annuler aligné à gauche */
.button-effacer {
    display: block; /* Toujours affiché */
    visibility: visible; /* Forcer la visibilité */
    opacity: 1; /* Complètement opaque */
    width: auto /* Adapte la largeur au contenu (texte) */
    min-width: 100px; /* Largeur minimale pour garantir lisibilité */
    max-width: 200px; /* Largeur maximale pour éviter débordements */
    height: 80px; /* Hauteur équivalente à deux boutons empilés */
    padding: 6px 12px; /* Espacement interne */
    font-size: 14px; /* Taille de police pour lisibilité */
    margin: 4px 0; /* Réduction de l'espace au-dessus et en dessous */
    background-color: #dc3545; /* Rouge clair par défaut */
    color: white; /* Contraste du texte */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    text-align: left; /* Texte aligné à gauche à l'intérieur du bouton */
    cursor: pointer; /* Curseur interactif */
    transition: background-color 0.3s ease; /* Transition douce pour hover */
}

/* Survol du bouton Annuler */
.button-effacer:hover {
    background-color: #c82333; /* Rouge plus foncé au survol */
}

/* Conteneur aligné à gauche */
.button-pastille-container {
    display: flex;
    flex-direction: column; /* Empile les boutons verticalement */
    align-items: flex-start; /* Aligne les boutons à gauche */
    gap: 4px; /* Réduction de l'espace entre les boutons */
    width: 100%; /* Prend toute la largeur disponible du parent */
}



/* ============================
   COULEURS DES BOUTONS
============================ */

/* Couleur verte (par défaut) */
.button.green,
.button_reserver,
.button_reserverJW {
    background-color: #28a745;
    color: white;
}

.button.green:hover,
.button_reserver:hover,
.button_reserverJW:hover {
    background-color: #218838;
}

/* Couleur rouge */
.button.red {
    background-color: #dc3545;
    color: white;
}

.button.red:hover {
    background-color: #c82333;
}

/* Couleur bleue */
.button.blue {
    background-color: #007bff;
    color: white;
}

.button.blue:hover {
    background-color: #0056b3;
}

.button.blue:active {
    background-color: #004494;
}

/* Couleur jaune */
.button.yellow {
    background-color: #ffc107;
    color: black;
}

.button.yellow:hover {
    background-color: #e0a800;
}

/* Couleur grise */
.button.gray {
    background-color: #6c757d;
    color: white;
}

.button.gray:hover {
    background-color: #5a6268;
}

/* Couleur noire */
.button.black {
    background-color: black;
    color: white;
}

.button.black:hover {
    background-color: #333;
}

.button.black:active {
    background-color: #1a1a1a;
}

/* Couleur orange */
.button.orange {
    background-color: orange;
    color: white;
}

.button.orange:hover {
    background-color: #e69500;
}

.button.orange:active {
    background-color: #cc7a00;
}

/* Couleur violette */
.button.purple {
    background-color: purple;
    color: white;
}

.button.purple:hover {
    background-color: #5b005b;
}

.button.purple:active {
    background-color: #3d003d;
}

/* Couleur rose */
.button.pink {
    background-color: pink;
    color: black;
}

.button.pink:hover {
    background-color: #ff66b2;
}

.button.pink:active {
    background-color: #e6008c;
}

/* Couleur blanche */
.button.white {
    background-color: white;
    color: black;
    border: 1px solid #ddd;
}

.button.white:hover {
    background-color: #f8f9fa;
}

.button.white:active {
    background-color: #e9ecef;
}

/* ============================
   NAVIGATION
============================ */

/* Conteneur des boutons de navigation */
.button-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.button-container {
    display: flex; /* Utiliser Flexbox */
    flex-direction: column; /* Aligner les boutons en colonne */
    gap: 15px; /* Espacement vertical entre les boutons */
    align-items: flex-start; /* Aligner les boutons à gauche (ou center selon besoin) */
}

/* Boutons spécifiques pour la navigation */
.button-nav {
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Bleu */
.button-blue-nav {
    background-color: #007bff;
    color: white;
}

.button-blue-nav:hover {
    background-color: #0056b3;
}

/* Jaune */
.button-yellow-nav {
    background-color: #ffc107;
    color: black;
}

.button-yellow-nav:hover {
    background-color: #e0a800;
}

/* Gris */
.button-gray-nav {
    background-color: #6c757d;
    color: white;
}

.button-gray-nav:hover {
    background-color: #5a6268;
}

/* Vert */
.button-green-nav {
    background-color: #28a745;
    color: white;
}

.button-green-nav:hover {
    background-color: #218838;
    transform: scale(1.03);
}

.button-green-nav:active {
    background-color: #19692c;
    transform: scale(0.97);
}

/* Magenta */
.button-magenta-nav {
    background-color: #e83e8c;
    color: white;
}

.button-magenta-nav:hover {
    background-color: #c73275;
}

/* Marron */
.button-brown-nav {
    background-color: #795548;
    color: white;
}

.button-brown-nav:hover {
    background-color: #5d4037;
}

/* Rouge */
.button-red-nav {
    background-color: #dc3545;
    color: white;
}

.button-red-nav:hover {
    background-color: #c82333;
}

/* Rose */
.button-pink-nav {
    background-color: #f8bbd0;
    color: black;
}

.button-pink-nav:hover {
    background-color: #f48fb1;
}

/* Noir */
.button-black-nav {
    background-color: #343a40;
    color: white;
}

.button-black-nav:hover {
    background-color: #23272b;
}

/* Blanc */
.button-white-nav {
    background-color: #ffffff;
    color: black;
    border: 1px solid #dee2e6; /* Ajout d'une bordure pour contraste */
}

.button-white-nav:hover {
    background-color: #e9ecef;
    color: black;
}

/* ============================================
   Boutons uniformisés avec styles spécifiques
=============================================== */

/* Style de base pour tous les boutons */
button.button-nav {
    all: unset; /* Réinitialise les styles natifs */
    display: inline-block; /* Le bouton se comporte comme un lien */
    padding: 8px 10px; /* Espacement interne */
    font-size: 12px; /* Taille de la police */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur interactif */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transition fluide */
    text-align: center; /* Centre le texte */
    text-decoration: none; /* Supprime tout soulignement */
}

/* Boutons verts */
button.button-green-nav {
    background-color: #28a745; /* Vert vif */
    color: white; /* Texte blanc */
}

button.button-green-nav:hover {
    background-color: #218838; /* Vert plus foncé au survol */
}

button.button-green-nav:active {
    background-color: #19692c; /* Vert encore plus foncé lors du clic */
    transform: scale(0.97); /* Effet de clic */
}

/* Boutons jaunes */
button.button-yellow-nav {
    background-color: #ffc107; /* Jaune vif */
    color: black; /* Texte noir */
}

button.button-yellow-nav:hover {
    background-color: #e0a800; /* Jaune légèrement plus foncé au survol */
}

button.button-yellow-nav:active {
    background-color: #d39e00; /* Jaune encore plus foncé lors du clic */
    transform: scale(0.97); /* Effet de clic */
}

/* Boutons bleus */
button.button-blue-nav {
    background-color: #007bff; /* Bleu vif */
    color: white; /* Texte blanc */
}

button.button-blue-nav:hover {
    background-color: #0056b3; /* Bleu plus foncé au survol */
}

button.button-blue-nav:active {
    background-color: #004494; /* Bleu encore plus foncé lors du clic */
    transform: scale(0.97); /* Effet de clic */
}

/* Boutons rouges */
button.button-red-nav {
    background-color: #dc3545; /* Rouge vif */
    color: white; /* Texte blanc */
}

button.button-red-nav:hover {
    background-color: #c82333; /* Rouge plus foncé au survol */
}

button.button-red-nav:active {
    background-color: #a71d2a; /* Rouge encore plus foncé lors du clic */
    transform: scale(0.97); /* Effet de clic */
}

/* Boutons gris */
button.button-gray-nav {
    background-color: #6c757d; /* Gris neutre */
    color: white; /* Texte blanc */
}

button.button-gray-nav:hover {
    background-color: #5a6268; /* Gris plus foncé au survol */
}

button.button-gray-nav:active {
    background-color: #495057; /* Gris encore plus foncé lors du clic */
    transform: scale(0.97); /* Effet de clic */
}

/* Boutons noirs */
button.button-black-nav {
    background-color: #343a40; /* Noir neutre */
    color: white; /* Texte blanc */
}

button.button-black-nav:hover {
    background-color: #23272b; /* Noir légèrement plus clair au survol */
}

button.button-black-nav:active {
    background-color: #1d2124; /* Noir encore plus foncé lors du clic */
    transform: scale(0.97); /* Effet de clic */
}




/* ============================
   FORMULAIRES ET CHAMPS
============================ */

/* Boutons dans les formulaires */
.rounded-container .button {
    max-width: 180px;
    margin: 10px auto;
}

/* Champ de sélection de fichier */
.custom-file-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    background-color: #28a745;
    color: white;
    border: 1px solid #28a745;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-file-input:hover {
    background-color: #218838;
}

.custom-file-input:active {
    background-color: #19692c;
}


/* ============================
   IMAGES / PHOTOS - INFORMER
============================ */
.image-box {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    max-width: 500px;
    margin: 20px auto;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.image-box img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

textarea {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: block;
}


/* Style commun à toutes les images */
.featured-photo {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    border: 1px solid #ccc;
    padding: 5px;
    background-color: white;
}


.image,
.photo,
.photo-thumbnail,
.image-combinee {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    padding: 4px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}


/* Style spécifique aux vignettes miniatures */
.photo-thumbnail {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
}

/* Image combinée (centrée) */
.featured-image {
    text-align: center;
    margin: 20px auto;
}


.photo-box {
    width: 160px;
    height: auto;
    text-align: center;
    border: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.photo-box img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 4px;
}

/* Conteneur d'affichage galerie */
.featured-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 20px auto;
    max-width: 1000px;
}

/* Nom d'image */
.photo-name {
    margin-top: 8px;
    font-weight: bold;
}

/* Formulaires et boutons */
.inline-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.button-container {
    margin-top: 6px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.image-combinee {
    max-width: 300px;
    height: auto;
    display: inline-block;
    border: 1px solid #ccc;
    padding: 4px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

/* ============================
   INSCRITS ET PASTILLES
============================ */
.pastille-container {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
}

.inscrit-name {
    font-size: 14px;
    font-weight: normal;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inscrit-name.operator {
    font-weight: bold; /* Gras pour l'op̩rateur */
    color: #000; /* Couleur l̩g̬rement plus fonc̩e */
}

.pastille {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: transparent;
}

.pastille.checked {
    background-color: #007bff;
}


.icon-star {
    color: #ffc107; /* Jaune */
    font-size: 24px; /* Taille de l'étoile */
    cursor: pointer; /* Curseur en main */
}
.icon-star:hover {
    color: #e0a800; /* Jaune légèrement plus foncé au survol */
}

.reservation-header {
          display: flex;
          justify-content: center; /* Centrage horizontal */
          align-items: center; /* Centrage vertical */
          gap: 20px; /* Espacement entre les éléments */
          margin-bottom: 20px;
      }
      .reservation-header .icon-reset,
      .reservation-header .icon-star {
          font-size: 24px; /* Taille des icônes */
          cursor: pointer; /* Curseur en main sur hover */
      }

.reservation-title {
    font-size: 20px;
    font-weight: bold;
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* ============================
 Centrer le contenu principal
============================ */
.button-containerH {
    display: flex;
    justify-content: center; /* Centre les éléments horizontalement */
    gap: 10px; /* Espace entre les boutons */
}

.center-container {
    display: flex;
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical si nécessaire */
    flex-direction: column; /* Aligner les éléments verticalement */
    margin: 0 auto; /* Centrage automatique sur la largeur */
    text-align: center; /* Centrer le texte à l'intérieur */
    width: 80%; /* Largeur maximale pour limiter la taille */
}

.center {
    margin: 10px 0; /* Espacement vertical entre les sections */
    text-align: center; /* Centrer le texte à l'intérieur */
    padding: 20px;
}


.centred-left {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}

.centred-right {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: right;
}

.message-output {
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.message-output img {
    max-width: 100px;
    height: auto;
    display: block;
    margin: 10px auto 5px auto;
}


/* Limiter la taille des images à 100% de la largeur disponible */
img.responsive-image {
    max-width: 100%; /* Limiter à 100% de la largeur de l'écran */
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

.message-output img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

/* ============================
 Photographie
============================ */
.photo-container {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    overflow: hidden; /* Évite les débordements */
    max-width: 800px; /* Limite la largeur globale */
    margin: 0 auto; /* Centre le conteneur */
}

.featured-container { display: flex; justify-content: space-around; margin: 20px 0; }

.featured-box {
    text-align: center;
    border: 2px solid #ccc;
    padding: 10px;
    width: 45%;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.page-container {
    max-width: 600px; /* Limite la largeur globale */
    margin: 20px auto; /* Centre le contenu horizontalement */
    padding: 10px;
    background-color: #fffaf0; /* Couleur ivoire */
    border: 1px solid #ddd;
    border-radius: 5px;
}

.centred-content {
    margin: 0 auto;
    text-align: center;
}

.photo-table img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}


/* Style de l'icône d'imprimante */
.print-button,
.excel-button  {
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    font-size: 30px;
    color: #333;
}

.print-button:hover {
    color: #007BFF;
}

/* ============================
   ANIMATION
============================ */
.highlight {
    background-color: yellow !important;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes hide {
    to {
        opacity: 0;
        visibility: hidden;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

.success-message {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    color: #218838;
    margin-top: 10px;
    animation:
        blink 0.5s ease-in-out 6,  /* 6 cycles → 3s */
        hide 0s 3s forwards;       /* Disparaît après 3s */
}


.success-message2 {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    color: #218838;
    margin-top: 10px;
    animation: hide 0s 7s forwards;
}




/.icon-play {
    width: 60px; /* Taille de l'icône */
    height: 60px;
    margin-right: 8px; /* Espacement entre l'icône et le texte */
    vertical-align: middle; /* Aligner verticalement avec le texte */
}

video {
    display: none; /* La vidéo est masquée par défaut */
    margin: 20px auto;
    max-width: 100%;
    height: auto;
}

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 10px;
}

.show-button {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
    display: inline-flex; /* Utilisation de flexbox */
    align-items: center; /* Aligner verticalement */
    justify-content: center; /* Centrer horizontalement */
}

.chart-container {
    width: 100%; /* S'adapte à la largeur de l'écran */
    max-width: 600px; /* Largeur maximale sur les écrans larges */
    margin: 0 auto; /* Centrer horizontalement */
    height: auto; /* Hauteur adaptative */
    overflow: hidden; /* Empêche le dépassement en cas de bug */
}

.chart-container canvas {
    max-width: 100%; /* Ne dépasse pas la largeur du conteneur */
    height: 300px; /* Fixe une hauteur par défaut */
}

/* Ajout de styles spécifiques pour les petits écrans (smartphones) */
@media screen and (max-width: 600px) {
    .show-button {
        font-size: 14px; /* Réduit la taille du texte sur les petits écrans */
        flex-direction: column; /* Aligne l'icône et le texte verticalement sur les petits écrans */
        text-align: center; /* Centre le texte et l'icône */
    }

    .icon-play {
        margin-bottom: 5px; /* Ajoute un espacement sous l'icône sur les petits écrans */
    }
}


/* ============================ FORMULAIRES ============================ */

.form-connexion {
    display: flex;
    flex-direction: column;
    gap: 1.5em; /* Espacement plus grand entre les champs et bouton */
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px; /* Espacement entre chaque champ */
}

.form-group label {
    margin-bottom: 0.3em;
    font-weight: bold;
}

.form-group input {
    padding: 12px;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;  /* Prendre toute la largeur de .form-group */
    box-sizing: border-box;
}

.editable-name {
    width: 100%;
    min-height: 2.2em;
    max-height: 4.4em;
    resize: vertical;
    font-size: 1em;
    padding: 4px;
    line-height: 1.2;
    box-sizing: border-box;
}

//Astuce UI : Hauteur fixe
.col-inscrits {
    min-height: calc(28px * 3); /* ou * $NbrePlace si tu veux dynamiquement via JS */
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.pastille-container {
    height: 28px;
    min-height: 28px;
}

.inscrit-name, .pastille {
    line-height: 28px;
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px auto;
    max-width: 600px;
}

.form-section {
    margin-top: 20px; /* Ajoute un espace avant le formulaire */
}

.form-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
}

.form-row label {
    font-weight: bold;
    white-space: nowrap;
    margin-bottom: 5px; /* Espacement sous le label */
}

.form-row input,
.form-row select {
    width: 20ch;
    max-width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
}

form input[type="text"],
form input[type="date"] {
    flex: 1;
}

form input[type="number"] {
    width: 50px; /* Ajuste la largeur pour afficher 3 caract�res */
    text-align: center; /* Centre les chiffres */
}

/* Uniformise les styles des <input type="submit"> avec les <button> */
input[type="submit"].button-nav {
    all: unset; /* R�initialise les styles natifs */
    display: inline-block; /* Comportement similaire � un lien */
    padding: 8px 10px; /* Espacement interne */
    font-size: 12px; /* Taille de la police */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur interactif */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transitions fluides */
    text-align: center; /* Centre le texte */
    text-decoration: none; /* Supprime les soulignements par d�faut */
}

/* Couleur grise */
input[type="submit"].button-gray-nav {
    background-color: #6c757d; /* Gris neutre */
    color: white; /* Texte blanc */
}

input[type="submit"].button-gray-nav:hover {
    background-color: #5a6268; /* Gris plus fonc� au survol */
}

input[type="submit"].button-gray-nav:active {
    background-color: #495057; /* Gris encore plus fonc� lors du clic */
    transform: scale(0.97); /* Effet de clic */
}

/* Couleur bleue */
input[type="submit"].button-blue-nav {
    background-color: #007bff; /* Bleu vif */
    color: white; /* Texte blanc */
}

input[type="submit"].button-blue-nav:hover {
    background-color: #0056b3; /* Bleu plus fonc� au survol */
}

input[type="submit"].button-blue-nav:active {
    background-color: #004494; /* Bleu encore plus fonc� lors du clic */
    transform: scale(0.97); /* Effet de clic */
}

/* Couleur jaune */
input[type="submit"].button-yellow-nav {
    background-color: #ffc107; /* Jaune vif */
    color: black; /* Texte noir */
}

input[type="submit"].button-yellow-nav:hover {
    background-color: #e0a800; /* Jaune l�g�rement plus fonc� au survol */
}

input[type="submit"].button-yellow-nav:active {
    background-color: #d39e00; /* Jaune encore plus fonc� lors du clic */
    transform: scale(0.97); /* Effet de clic */
}

/* Couleur rouge */
input[type="submit"].button-red-nav {
    background-color: #dc3545; /* Rouge vif */
    color: white; /* Texte blanc */
}

input[type="submit"].button-red-nav:hover {
    background-color: #c82333; /* Rouge plus fonc� au survol */
}

input[type="submit"].button-red-nav:active {
    background-color: #a71d2a; /* Rouge encore plus fonc� lors du clic */
    transform: scale(0.97); /* Effet de clic */
}

input[type="text"],
input[type="password"] {
    width: 100%;                /* largeur maximale du conteneur */
    font-size: 1em;           /* augmente la taille du texte */
    padding: 12px;              /* un peu plus de padding pour le confort */
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}



/* ============================
   Centrer uniquement le formulaire
============================ */
.centered-form {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

/* ============================
   Form pour reservation groupe
============================ */
.button-group-form {
    display: flex; /* Change la direction pour ce formulaire sp�cifique */
    flex-direction: row; /* Aligne les boutons horizontalement */
    justify-content: center; /* Centre les boutons horizontalement */
    gap: 10px; /* Ajoute de l'espace entre les boutons */
}

/* ============================
   S�LECTEURS SP�CIFIQUES
============================ */
#user {
    /* Taille et espacement */
    padding: 5px;               /* Espacement int�rieur autour du texte */
    margin: 0px;               /* Espacement ext�rieur autour du s�lecteur */
    width: 230px;               /* Largeur du s�lecteur */
    height: auto;               /* Hauteur automatique (peut �tre ajust�e) */

    /* Police et texte */
    font-size: 18px;            /* Taille du texte */
    font-family: Arial, sans-serif; /* Police utilis�e */
    color: #333;                /* Couleur du texte */
    text-align: left;           /* Alignement du texte */
    text-indent: 5px;           /* D�calage du texte par rapport au bord gauche */

    /* Apparence et bordures */
    background-color: #f9f9f9;  /* Couleur de fond */
    border: 1px solid #ccc;     /* Bordure fine et grise */
    border-radius: 5px;         /* Coins arrondis */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* L�g�re ombre port�e */

    /* Comportement */
    cursor: pointer;            /* Curseur de souris lors du survol */
    outline: none;              /* D�sactive le contour bleu par d�faut au focus */

    /* Transition pour un effet visuel fluide */
    transition: all 0.3s ease;  /* Transition fluide pour les changements de style */

    /* Ajustements en cas de d�passement de texte */
    overflow: hidden;           /* Masque tout contenu d�passant */
    white-space: nowrap;        /* Emp�che le retour � la ligne */
}

#user2 {
    /* Taille et espacement */
    padding: 5px;               /* Espacement int�rieur autour du texte */
    margin: 0px;               /* Espacement ext�rieur autour du s�lecteur */
    width: 130px;               /* Largeur du s�lecteur */
    height: auto;               /* Hauteur automatique (peut �tre ajust�e) */
    gap: 2px;
    /* Police et texte */
    font-size: 12px;            /* Taille du texte */
    font-family: Arial, sans-serif; /* Police utilis�e */
    color: #333;                /* Couleur du texte */
    text-align: left;           /* Alignement du texte */
    text-indent: 5px;           /* D�calage du texte par rapport au bord gauche */

    /* Apparence et bordures */
    background-color: #f9f9f9;  /* Couleur de fond */
    border: 1px solid #ccc;     /* Bordure fine et grise */
    border-radius: 5px;         /* Coins arrondis */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* L�g�re ombre port�e */

    /* Comportement */
    cursor: pointer;            /* Curseur de souris lors du survol */
    outline: none;              /* D�sactive le contour bleu par d�faut au focus */

    /* Transition pour un effet visuel fluide */
    transition: all 0.3s ease;  /* Transition fluide pour les changements de style */

    /* Ajustements en cas de d�passement de texte */
    overflow: hidden;           /* Masque tout contenu d�passant */
    white-space: nowrap;        /* Emp�che le retour � la ligne */
}

#time {
    /* Taille et espacement */
    padding: 5px;               /* Espacement int�rieur autour du texte */
    margin: 0px;               /* Espacement ext�rieur autour du s�lecteur */
    width: 130px;               /* Largeur du s�lecteur */
    height: auto;               /* Hauteur automatique (peut �tre ajust�e) */

    /* Police et texte */
    font-size: 18px;            /* Taille du texte */
    font-family: Arial, sans-serif; /* Police utilis�e */
    color: #333;                /* Couleur du texte */
    text-align: left;           /* Alignement du texte */
    text-indent: 5px;           /* D�calage du texte par rapport au bord gauche */

    /* Apparence et bordures */
    background-color: #f9f9f9;  /* Couleur de fond */
    border: 1px solid #ccc;     /* Bordure fine et grise */
    border-radius: 5px;         /* Coins arrondis */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* L�g�re ombre port�e */

    /* Comportement */
    cursor: pointer;            /* Curseur de souris lors du survol */
    outline: none;              /* D�sactive le contour bleu par d�faut au focus */

    /* Transition pour un effet visuel fluide */
    transition: all 0.3s ease;  /* Transition fluide pour les changements de style */

    /* Ajustements en cas de d�passement de texte */
    overflow: hidden;           /* Masque tout contenu d�passant */
    white-space: nowrap;        /* Emp�che le retour � la ligne */
}

.center-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px; /* Espace entre les �l�ments */
    padding: 20px; /* Ajoute un peu d'espace autour */
}

.center-form select {
    margin-top: 10px;
}

/* ============================
   BOUTONS
============================ */
form button {
    all: unset; /* R�initialise les styles par d�faut */
    display: inline-block;
    padding: 8px 12px;
    font-size: 14px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

form button:active {
    transform: scale(0.97); /* Effet de clic */
}

/* Variantes de boutons */
.button-primary {
    background-color: #007bff;
    color: white;
}

.button-primary:hover {
    background-color: #0056b3;
}

.button-warning {
    background-color: #ffc107;
    color: black;
}

.button-warning:hover {
    background-color: #e0a800;
}

.button-success {
    background-color: #28a745;
    color: white;
}

.button-success:hover {
    background-color: #218838;
}

.button-danger {
    background-color: #dc3545;
    color: white;
}

.button-danger:hover {
    background-color: #c82333;
}

/* ============================
   UTILITAIRES
============================ */
.hidden {
    display: none;
}

.text-center {
    text-align: center;
}

.mt-10 {
    margin-top: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}


/* ============================
   FORMULAIRES ET CHAMPS
============================ */

/* Champ de s�lection de fichier */
.custom-file-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    background-color: #28a745;
    color: white;
    border: 1px solid #28a745;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-file-input:hover {
    background-color: #218838;
}

.custom-file-input:active {
    background-color: #19692c;
}

/* CSS/layout.css */

/* ============================
   Gestion des liens
============================ */
/* Style de la carte */
td.label-col {
    width: 35%;
    min-width: 300px;
}

.card {
    max-width: 530px;  /* Limite la largeur de chaque carte à 800px */
    width: 100%;       /* La carte utilise toute la largeur disponible, jusqu'à 800px */
    margin: 0 auto;    /* Centre la carte dans l'espace disponible */
}

/* Pour les champs URL et Label */
.card .form-control-sm {
    max-width: 100%; /* Assure que ces champs n'excèdent pas leur espace */
}



/* ============================
   BANDEAU UTILISATEUR
============================ */
.user-info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #004085;
    color: white;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

/* ============================
   INDICATEURS DE NIVEAU
============================ */
/* Conteneur avec bordures arrondies */
.rounded-container {
    border: 2px solid;
    border-radius: 15px;
    padding: 20px;
    margin: 20px auto;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    max-width: 300px;
}

/* Niveau 1 pour super administrateur, Niveau 2 pour administrateur, etc. */
.niveau-1 {
    border-color: red;
}

.niveau-2 {
    border-color: blue;
}

.niveau-3 {
    border-color: #8b4513; /* Marron foncé */
}

.niveau-4 {
    border-color: black;
}

.niveau-4 {
    border-color: gray;
}

.niveau-5 {
    border-color: green;
}

/* Texte en haut à droite pour indiquer le niveau */
.niveau-1::before,
.niveau-2::before,
.niveau-3::before,
.niveau-4::before,
.niveau-5::before {
    content: attr(data-niveau);
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 14px;
    font-weight: bold;
}

.niveau-1::before {
    color: red;
}

.niveau-2::before {
    color: blue;
}

.niveau-3::before {
    color: #8b4513; /* Marron foncé */
}

.niveau-4::before {
    color: black;
}

.niveau-5::before {
    color: gray;
}

/* ============================
   FORMULAIRES ET TITRES
============================ */
h1.title {
    margin-top: 40px;
}

h2.title {
    margin-top: 40px;
}

h3.title {
    margin-top: 40px;
}

h1 {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-align: center;
}

h2 {
    font-size: 1 em;
    margin-bottom: 10px;
    text-align: center;
}

h3 {
    font-size: 0.9em;
    margin-bottom: 10px;
    text-align: center;
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
}

.separator {
    border: none;
    border-top: 2px solid #ccc;
    width: 20%;
    margin: 20px auto;
}

.spacer {
    margin-bottom: 20px;
}

.spacer2 {
    height: 2em; 
}

/* ============================
   Simulateurs
============================ */
.simu-niveau-container {
    margin: 50px auto;
    text-align: center;
    padding: 10px 15px;
    border: 2px solid #dc3545; /* rouge */
    border-radius: 8px;
    max-width: 150px;
    font-size: 0.95em;
    color: black; /* texte noir */
}

.simu-niveau-form select {
    padding: 5px 5px;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-left: 10px;
    color: black; /* texte noir */
}

.simu-niveau-info {
    text-align: center;
    margin: 10px auto;
    padding: 8px 12px;
    background-color: #fff3cd; /* jaune clair */
    color: black; /* texte noir */
    border: 2px solid #dc3545; /* rouge */
    border-radius: 5px;
    max-width: 300px;
    font-weight: bold;
}



/* CSS/reset.css */
/* ============================
   STYLES GENERAUX
============================ */
body {
    background-color: #fffaf0;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

strong {
    font-weight: bold !important;
}

.error {
    color: red;
    margin-bottom: 15px;
    text-align: center;
}

.error-message {
    color: red;
    font-size: 20px;
    text-align: center;
    margin-top: 100px;
    white-space: pre-line; /* Permet le retour à la ligne dans le texte */
}

.spinner-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 40px auto;
}

.spinner-circle {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 6px solid #e0e0e0;
    border-top: 6px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    color: #333;
    pointer-events: none;
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================
   STYLES POUR MAX-WIDTH 600px
============================ */
@media (max-width: 600px) {
    .table-publications {
        width: 100%;
        font-size: 14px;
    }

    th, td {
        padding: 10px;
    }

    .pastille-container {
        flex-direction: row;
        justify-content: space-between;
    }

    .inscrit-name {
        font-size: 12px;
    }

    form button.button-rounded {
        font-size: 14px;
        padding: 12px 20px;
        border-radius: 30px;
        background-color: #007bff;
        color: white;
        border: 1px solid #0056b3;
    }

    form button.button-rounded:hover {
        background-color: #0056b3;
    }

    .photo-box {
        width: 45%;
        padding: 8px;
    }

    .photo-box img {
        height: 100px;
        object-fit: cover;
    }

    .rename-form input[type="text"] {
        width: 90%;
        font-size: 14px;
    }

    /* === CONTRÔLE DES IMAGES === */
    img,
    .responsive-image,
    .message-output img,
    .featured-photo,
    .image,
    .photo,
    .photo-thumbnail,
    .image-combinee {
        max-width: 100%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .message-output {
        overflow-x: hidden;
        padding: 10px;
        box-sizing: border-box;
    }

    .center-container {
        width: 80%;
    }
}

/* ============================
   STYLES POUR MAX-WIDTH 580px
============================ */
@media (max-width: 580px) {
    body {
        width: 100%;
    }

    .header-container {
        width: 97%;
        font-size: 18px;
        padding: 8px 10px;
    }

    table {
        font-size: 12px;
        margin: 0 auto;
    }

    th, td {
        padding: 5px;
        text-align: left;
    }

    form button.button-rounded {
        font-size: 14px;
        padding: 12px 20px;
        border-radius: 30px;
        background-color: #007bff;
        color: white;
        border: 1px solid #0056b3;
    }

    form button.button-rounded:hover {
        background-color: #0056b3;
    }
}

/* ============================
   GRAPHIQUES RESPONSIVES
============================ */
@media (max-width: 768px) {
    .chart-container canvas {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .chart-container canvas {
        height: 200px;
    }
}

/* ============================
   IMPRESSION
============================ */
@media print {
    body {
        background-color: white;
        color: black;
        font-size: 12px;
    }

    .navigation,
    .print-button,
    .rounded-container {
        display: none;
    }

    .printable-area {
        display: block;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid #000;
        padding: 5px;
        text-align: left;
    }

    th {
        background-color: #ccc;
        -webkit-print-color-adjust: exact;
    }

    tr:nth-child(odd) {
        background-color: #eee;
        -webkit-print-color-adjust: exact;
    }

    tr:nth-child(even) {
        background-color: white;
    }
}
.diagnostic-box {
    background-color: #f9f9f9;
    padding: 16px 20px;
    font-family: monospace;
    font-size: 15px;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 10px;
    line-height: 1.5;
    max-width: 700px;
    margin: 30px auto;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

@media (max-width: 500px) {
    .diagnostic-box {
        font-size: 13px;
        padding: 12px 14px;
        margin: 20px auto;
    }
}

/* CSS/table.css */PLACEMENTS

/* ============================
   TABLEAUX - STYLES SP�CIFIQUES POUR LES CR�NEAUX
============================ */
.centered-date {
    text-align: center;
    font-weight: bold;
}

/* ============================
   TABLEAU - PUBLICATIONS
============================ */
html body table.table-publications th {
    background-color: #f4f4f4; /* Couleur de fond clair */
    color: #000; /* Texte noir */
    font-weight: bold; /* Texte en gras */
}

/* Ajustement pour r�duire les colonnes */
.table-publications {
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
    border-collapse: collapse;
    text-align: center;
    table-layout: fixed; /* Fixe les colonnes � une largeur �gale */
}

/* Colonnes - Limiter la largeur */
.table-publications th,
.table-publications td {
    padding: 8px;
    white-space: nowrap;
    border-bottom: 1px solid #ddd;
    font-size: 12px; /* Taille de police r�duite pour les titres */
    white-space: normal; /* Permet les retours � la ligne */
    max-width: 600px; /* Limite maximale des colonnes */
    width: 1%; /* Force les colonnes � �tre aussi �troites que possible */
    overflow: hidden;
    text-overflow: ellipsis; /* Ajoute "..." si le texte d�passe */
}

/* Alternance des couleurs */
.table-publications tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.table-publications tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* Ligne de s�paration des jours */
.day-row {
    border-top: 3px solid black;
    background-color: #f9f9f9;
    font-weight: bold;
    text-align: center;
}

/* Colonne "Intitul�" : occupe l'espace disponible */
.table-publications .table-intitule {
    white-space: normal; /* Permet les retours � la ligne */
    word-wrap: break-word; /* Coupe les mots trop longs */
    font-size: 14px;
    line-height: 1.4;
    width: 100%; /* Permet � cette colonne de prendre l'espace restant */
}

/* Colonne "S�lectionner" : largeur minimale */
.table-publications .table-select {
    width: 20px; /* R�duit au minimum pour un bouton radio */
    text-align: center; /* Aligne le contenu au centre */
}

/* Colonne "Quantit�" : largeur minimale */
.table-publications .table-quantity {
    width: 20px; /* R�duit au minimum pour un menu d�roulant */
    text-align: center; /* Aligne le contenu au centre */
}

.col-inscrits {
    width: 150px; /* Ajuste la largeur selon tes besoins */
    min-width: 120px; /* Largeur minimale */
    max-width: 200px; /* Largeur maximale */
    word-wrap: break-word; /* Coupe les mots si besoin */
    text-align: center; /* Centre le texte */
}

/* Ajustement des cellules "Action" pour �viter les d�bordements */
.table-publications th:last-child,
.table-publications td:last-child {
    width: 100px; /* Augmentez cette valeur si n�cessaire */
    max-width: 150px; /* Largeur maximale pour �viter un d�passement trop important */
    text-align: left; /* Alignement du contenu � gauche */
}


/* ============================
   TABLEAU - GROUPES
============================ */
.table-groupe {
    margin: 0 auto; /* Centre le tableau horizontalement */
    width: auto; /* La largeur du tableau s'adapte au contenu */
    max-width: 600px; /* Largeur maximale des tables de groupe */
    border-collapse: collapse; /* Fusionne les bordures des cellules */
    text-align: center; /* Centre tout le contenu dans les cellules */
    table-layout: auto; /* Permet aux colonnes de se redimensionner en fonction du contenu */
}

/* Colonnes pour table-groupe */
.table-groupe th,
.table-groupe td {
    padding: 10px;
    border: 1px solid #28a745; /* Bordures vertes pour les tables de groupe */
    font-size: 14px;
    font-weight: bold;
    text-align: center; /* Centre horizontalement le contenu des cellules */
    vertical-align: middle; /* Centre verticalement le contenu des cellules */
}

/* Colonne de gauche (r�duire la largeur) */
.table-groupe th:first-child,
.table-groupe td:first-child {
    width: 30%; /* La premi�re colonne prendra 30% de la largeur */
}

/* Colonne de droite (prend plus de place) */
.table-groupe th:last-child,
.table-groupe td:last-child {
    width: 70%; /* La deuxi�me colonne prendra 70% de la largeur */
}

/* Style des en-t�tes */
.table-groupe th {
    background-color: #28a745; /* Fond vert pour les en-t�tes */
    color: white; /* Texte blanc */
    font-weight: bold;
    text-align: center; /* Aligne le texte des en-t�tes au centre */
    vertical-align: middle; /* Centre verticalement le texte des en-t�tes */
}

/* Alternance des couleurs */
.table-groupe tbody tr:nth-child(odd) {
    background-color: #e8f5e9; /* Vert tr�s clair */
}

.table-groupe tbody tr:nth-child(even) {
    background-color: #ffffff; /* Blanc */
}

/* Ajout pour aligner les �l�ments de la colonne de droite � gauche */
.right-column {
    text-align: left; /* Aligne les �l�ments � gauche dans la colonne */
}

/* Si n�cessaire, vous pouvez aussi ajuster les champs d'entr�e */
.right-column input,
.right-column select {
    text-align: left; /* Aligne le texte dans les champs d'entr�e � gauche */
}

/* ============================
   TABLEAUX G�N�RAUX
============================ */
table {
    width: 90%; /* La largeur globale du tableau s'ajuste au contenu */
    margin: 20px auto;
    border-collapse: collapse;
    background-color: #fff;
    text-align: center;
    table-layout: auto; /* Les colonnes s'ajustent dynamiquement au contenu */
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    white-space: normal; /* Permet le retour � la ligne */
    word-wrap: break-word; /* Coupe les mots trop longs pour s'adapter � la largeur */
    text-align: left; /* (Optionnel) Aligne le texte � gauche pour une meilleure lisibilit� */
}

th {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
}

tr:nth-child(odd) {
    background-color: #f9f9f9;
}

tr:nth-child(even) {
    background-color: #ffffff;
}
.slot-form input[type="text"],
.slot-form input[type="checkbox"] {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 18px !important;
}

.slot-form input[type="text"] {
    height: 18px !important;
}

.slot-form input[type="checkbox"] {
    transform: scale(1);
    margin-top: 1px;
}
/* Harmonisation avec le style utilis� pour slot-form */

.names-column {
    font-size: 18px;
    line-height: 1.2;
}

.pastille-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.inscrit-name {
    margin: 0;
    padding: 0;
}

.pastille.checked {
    width: 14px;
    height: 14px;
    background-color: #007BFF;
    border-radius: 50%;
    display: inline-block;
}

/* R�duction de la largeur du tableau des cr�neaux */
table.table {
    width: 90%; /* Ajuste � 90% ou moins si tu veux plus �troit */
    max-width: 600px; /* Largeur maximale */
    margin: 0 auto; /* Centre horizontalement */
    table-layout: auto; /* Fixe les largeurs des colonnes */
}

/* R�duction des colonnes et meilleure r�partition */
table.table th,
table.table td {
    padding: 6px 8px;
    font-size: 13px;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* R�duire la taille des champs de saisie */
.input-small {
    width: 100px; /* Ajuste la largeur selon tes besoins */
    padding: 5px;
    font-size: 14px;
}

/* Ajuster la taille des cases � cocher */
.checkbox-small {
    width: 20px;
    height: 20px;
}

/* Optionnel : styliser les div contenant les inputs pour am�liorer l'apparence */
.slot-wrapper {
    margin-bottom: 5px;
}

.slot-row {
    display: flex;
    align-items: center;
}

.slot-row input[type="text"] {
    margin-right: 10px; /* Espacement entre le champ de texte et la case � cocher */
}

/* ============================
   ADAPTATION MOBILE
============================ */
@media (max-width: 600px) {
    .table-publications,
    .table-groupe {
        font-size: 12px; /* R�duction de la taille de police */
    }
    .table-publications th,
    .table-publications td,
    .table-groupe th,
    .table-groupe td {
        max-width: 100px; /* R�duction de la largeur maximale */
    }
}

/* ============================
   TABLEAU - Assitance
============================ */
.table-assistance {
    margin: 0 auto; /* Centre le tableau horizontalement */
    width: auto; /* Laisse la largeur s'ajuster au contenu */
    border-collapse: collapse;
    text-align: center; /* Centre tout le contenu dans les cellules */
    background-color: #f9f9f9; /* Fond gris clair pour distinguer */
    table-layout: auto; /* Permet aux colonnes de s'adapter au contenu */
}


/* Colonnes pour table-groupe */
.table-assistance th,
.table-assistance td {
    margin: 0 auto; /* Centre le tableau horizontalement */s
    width auto;
    table-layout: auto;
    padding: 5px;
    border: 1px solid #28a745; /* Bordures vertes pour les tables de groupe */
    font-size: 14px;
    font-weight: bold;
    text-align: center; /* Centre horizontalement le contenu des cellules */
    vertical-align: middle; /* Centre verticalement le contenu des cellules */
    min-width: 20px; /* Optionnel : Emp�che les colonnes de devenir trop �troites */
}

/* Style des en-t�tes */
.table-assistance th {
    background-color: #28a745; /* Fond vert pour les en-t�tes */
    color: white; /* Texte blanc */
    font-weight: bold;
    text-align: center; /* Aligne le texte des en-t�tes au centre */
    vertical-align: middle; /* Centre verticalement le texte des en-t�tes */
}

/* Alternance des couleurs */
.table-assistance tbody tr:nth-child(odd) {
    background-color: #e8f5e9; /* Vert tr�s clair */
}

.table-assistance tbody tr:nth-child(even) {
    background-color: #ffffff; /* Blanc */
}

.table-container {
    display: flex; /* Utilisation de flexbox */
    justify-content: center; /* Centre horizontalement */
    margin: 20px 0; /* Ajoute de l'espace autour des tableaux */
}

.table-container table {
    margin: 0 auto; /* Centre le tableau � l'int�rieur du conteneur */
    border-collapse: collapse; /* Bordures fusionn�es */
    width: auto; /* Laisse le tableau s'adapter au contenu */
}

/* ============================
   STYLES G�N�RAUX DES BOUTONS
============================ */

/* Bouton de base */
.button {
    display: block;
    width: 100%; /* Prend toute la largeur disponible */
    padding: 10px; /* Espacement interne */
    font-size: 14px; /* Taille de la police */
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Enlever les marges et le padding de tout le body */
body {
    margin: 0;
    padding: 0;
}
/* ============================
   TABLEAU COMPACT ET RÉACTIF
============================ */

.table-container {
    overflow-x: auto;                /* Scroll horizontal sur petit écran */
    -webkit-overflow-scrolling: touch;
    margin: 20px auto;
}

.table2 {
    width: auto;                     /* Ajuste la largeur au contenu */
    max-width: 100%;                 /* Ne déborde pas de l'écran */
    table-layout: auto;
    border-collapse: collapse;
    font-size: clamp(12px, 2.5vw, 13px); /* Taille fluide */
}

/* En-têtes */
.table2 th {
    background-color: #28a745;
    color: white;
    font-weight: bold;
    padding: 6px 10px;
    white-space: nowrap;
    text-align: left;
}

/* Cellules */
.table2 td {
    padding: 6px 10px;
    white-space: nowrap;
    text-align: left;
    border: 1px solid #ccc;
    vertical-align: middle;
}

/* Alternance des lignes */
.table2 tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.table2 tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* Responsive : ajustements mobiles */
@media (max-width: 600px) {
    .table2 th,
    .table2 td {
        padding: 4px 6px;
        white-space: normal;        /* Autorise le retour à la ligne */
    }
}



/* simulation.css (cache-busted) */
/* ============================
   Simulation des niveaux
============================ */
.simu-niveau-container {
    margin: 10px auto;
    margin-top: 3em;
    padding: 8px 12px;
    background-color: #fff3cd;
    color: black;
    border: 2px solid #dc3545;
    border-radius: 5px;
    max-width: 300px;
    font-weight: bold;

    /* Flexbox pour aligner les éléments sur la même ligne */
    display: flex;
    justify-content: flex-start;
    gap: 10px; /* Espacement entre le texte et le sélecteur */
}

.simu-niveau-form .form-line {
    display: flex;
    align-items: center;
}


.simu-niveau-form select {
    padding: 2px 6px;
    font-size: 0.85em;
    width: auto; /* Sélecteur ne dépasse pas sa largeur naturelle */
}

.simu-niveau-form span {
    font-weight: bold;
    margin-right: 10px; /* Espacement entre le texte et le sélecteur */
}