body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column; /* Empile les éléments (titre, conteneur) verticalement */
    align-items: center;   /* Centre ces éléments horizontalement */
    min-height: 50vh;
    background-color: #f0f2f5;
    margin: 0;
    padding: 25px 20px; /* Espace en haut/bas et sur les côtés */
    box-sizing: border-box;
}

/* Titre principal (H1) qui est maintenant hors du conteneur */
h1 {
    color: #1c1e21;
    font-size: clamp(1.8rem, 7vw, 2.8rem);
    text-align: center;
    margin-top: 0; /* AJOUT : supprime la marge du haut */
    margin-bottom: 5px; /* RÉDUIT de 10px à 5px l'espace avant le conteneur blanc*/
}

/* Conteneur principal (la boîte blanche qui groupe les modules) */
/*.container {
    text-align: center;
    background-color: #ffffff;
    padding: 2px 2px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-width: 600px;
    width: 100%;
}
/* Conteneur principal (rendu invisible) */
.container {
    /* On garde uniquement ce qui est nécessaire pour la structure et la taille */
    max-width: 600px;
    width: 100%;

    /* On neutralise tout ce qui est visuel */
    background-color: transparent; /* Le fond devient transparent */
    box-shadow: none;              /* On supprime l'ombre portée */
    padding: 0;                    /* On supprime le padding intérieur */
    border-radius: 0;              /* Plus besoin de coins arrondis */
}


/* ==========================================================================
   2. STYLES DES MODULES
   ========================================================================== */

/* Style DE BASE pour TOUS les modules. On ne met que ce qui est commun. */
.section-dynamique {
    margin-top: 15px; /* Espace entre chaque module */
    border-radius: 6px; /* Bordures arrondies pour tous */
}

/* --- STYLES SPÉCIFIQUES PAR TYPE DE MODULE (votre zone de création) --- */

/* Style pour le module "Message d'Accueil" */
.module-message_accueil {
    padding: 5px;
    text-align: center;
}
.module-message_accueil h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.2em;
    font-weight: 900;
}
.module-message_accueil p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.1em;
    line-height: 1.6;
    font-weight: 700;
}


/* Style pour le module "Plat du Jour" */
.module-plat_du_jour {
    padding: 15px;
    border: 1px solid #f0f0f0;
    background-image: url("photos/Table_2.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    text-align: center; /* Texte centré, comme vous le vouliez */
}

.module-plat_du_jour::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
}

.module-plat_du_jour h2 {
    position: relative;
    z-index: 2;
    font-family: "Georgia", serif;
    color: #333;
    margin-top: 0;
    font-weight: 600;
}
.module-plat_du_jour p {
    position: relative;
    z-index: 2;
    margin-bottom: 0.5rem;
    font-weight: 600;
}


/* --- MODIFICATEURS DE STYLE (ce que le client choisit) --- */
/* Ces classes s'ajoutent aux styles spécifiques ci-dessus */

.style-defaut {
    border: 1px solid #eee;
    background-color: #f9f9f9;
}
.style-info {
    background-color: #e7f3fe;
    border: 1px solid #d0eaff;
    color: #0c5460;
}
.style-info h4 { color: #0c5460; }

.style-succes {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.style-succes h4 { color: #155724; }

.style-alerte {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}
.style-alerte h4 { color: #856404; }

/* AJOUT D'UN STYLE POUR LES MODULES TRANSPARENTS */
.style-transparent {
    background-color: transparent;
    border: none; /* On enlève aussi la bordure */
    box-shadow: none; /* Et l'ombre s'il y en a une */
}


/* Ajout dans style.css - Adaptation responsive du module message d'accueil */

/* Style pour le module "Message d'Accueil" avec image prédéfinie */
.module-message_accueil.style-image-accueil {
    background-image: url("photos/Accueil.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    min-height: 120px; /* Hauteur par défaut pour desktop */
}

/* NOUVEAU : Adaptation pour mobile */
@media (max-width: 768px) {
    .module-message_accueil.style-image-accueil {
        min-height: 80px; /* Plus petit sur mobile */
    }
}

/* NOUVEAU : Adaptation pour très petits écrans */
@media (max-width: 480px) {
    .module-message_accueil.style-image-accueil {
        min-height: 60px; /* Encore plus petit sur très petits écrans */
    }
}


/* Voile d'opacité pour le style image-accueil */
.module-message_accueil.style-image-accueil::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6); /* Voile blanc à 80% d'opacité */
    border-radius: 6px;
    z-index: 1;
}

/* S'assurer que le contenu reste au-dessus du voile */
.module-message_accueil.style-image-accueil h4,
.module-message_accueil.style-image-accueil p {
    position: relative;
    z-index: 2;
    color: #333 !important;
    font-weight: 800;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}



/* ==========================================================================
   3. IMAGE DE FOND ET VOILE
   ========================================================================== */

body.has-background {
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Voile blanc pour améliorer la lisibilité du texte */
body.has-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: -1;
}

/* Style pour un bouton d'action principal, optimisé pour le tactile */
.cta-button {
    display: inline-block; /* Très important pour que le padding s'applique bien */
    padding: 12px 20px;   /* C'est ça qui donne de la "chair" au bouton */
    font-size: 1.1rem;      /* Une taille de police lisible */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    
    /* Tes couleurs */
    background-color: #007bff; /* Un bleu exemple */
    color: white;

    /* On s'assure une taille minimale pour le confort du doigt */
    min-height: 44px;
    box-sizing: border-box; /* S'assure que le padding est inclus dans la taille totale */
}


@media (max-width: 600px) {
    body {
        /* On réduit le padding vertical sur les petits écrans */
        padding-top: 13px;
        padding-bottom: 13px;
    }

    h1 {
        /* On peut aussi ajuster la marge si besoin */
        margin-bottom: 2px;
    }

    /* On peut aussi imaginer des styles spécifiques pour les modules sur mobile */
    .module-plat_du_jour {
        padding: 15px;
    }
}


/* /style.css - AMÉLIORATION DU WIDGET MÉTEO POUR MOBILE */

.weather-widget-mobile {
    /*background: linear-gradient(135deg, #5eace0, #4a88c7); /* Dégradé de bleu moderne */
    background-image: url(photos/meteo_fond_2.webp);
    background-size: cover;
    background-position: center;
    position: relative;
    color: white;
    padding: 12px 18px; /* Padding ajusté pour un look plus compact */
    border-radius: 6px; /* Bords un peu plus arrondis */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex; /* La clé : on utilise Flexbox pour aligner les colonnes */
    align-items: center;
    justify-content: space-between; /* Espace automatiquement les deux colonnes */
    /*border: 3px solid rgba(255, 255, 255, 0.3); /* Ajoute une bordure subtile */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Effet au survol (ou au tap sur mobile) */
.weather-widget-mobile:hover {
    transform: scale(1.03) translateY(-2px); /* Se soulève un peu */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Ombre plus forte */
    border-color: rgba(255, 255, 255, 0.7);
}

/* Colonne de gauche (texte) */
.weather-info {
    text-align: left;
    flex-grow: 1; /* Permet à cette colonne de prendre l'espace disponible */
}

.weather-info h4 {
    margin: 0;
    font-size: 1.1em; /* Titre plus adapté au mobile */
    font-weight: 600;
}

/* Style pour le texte "Détails >" */
.weather-info h4 span {
    display: block; /* Passe à la ligne */
    font-size: 0.7em; /* Plus petit */
    font-weight: 400; /* Moins gras */
    color: #fff;
    opacity: 0.8;
    margin-top: 4px;
}

.weather-info .weather-desc {
    margin: 2px 0 0 0;
    font-size: 0.9em; /* Description plus discrète */
    font-style: italic;
    opacity: 0.9;
    text-transform: capitalize;
}

/* Colonne de droite (visuel) */
.weather-visual {
    display: flex;
    align-items: center;
    gap: 8px; /* Espace entre l'icône et la température */
    padding-left: 15px; /* On s'assure qu'il y a de l'espace avec le texte */
}

.weather-visual img {
    width: 50px;  /* Icône de taille raisonnable */
    height: 50px;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
}

.weather-visual .weather-temp {
    font-size: 1.5em; /* Température bien lisible mais pas énorme */
    font-weight: 600;
    line-height: 1;
    margin: 0;
}


/* /style.css - Styles pour la fenêtre modale météo */
/* /style.css - Styles AMÉLIORÉS pour la fenêtre modale météo */

.modal-overlay {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Fond plus opaque pour mieux se concentrer sur le pop-up */
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Transition douce pour l'apparition */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Classe ajoutée par JS pour afficher la modale */
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    /* Pour changer la couleur de fond du pop-up, modifiez ici */
    background-color: #ffffff;
    padding: 15px;
    border-radius: 12px;
    width: 90%;
    max-width: 380px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.visible .modal-content {
    transform: scale(1);
}

/* /style.css - Styles pour le CONTENU de la fenêtre modale météo */

#modal-forecast-content h3 {
    margin-top: 0;
    text-align: center;
    color: #333;
    font-size: 1.3em;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.forecast-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5px;
    border-bottom: 1px solid #eee;
}

.forecast-day:last-child {
    border-bottom: none;
}

.forecast-day-name {
    font-weight: bold;
    color: #555;
    font-size: 1.1em;
}

.forecast-day-visual {
    display: flex;
    align-items: center;
    gap: 10px;
}

.forecast-day-visual img {
    /* C'EST ICI ! Modifiez la taille de vos nouvelles icônes */
    width: 35px;
    height: 35px;
}

.forecast-day-temp {
    font-size: 1.2em;
    font-weight: 500;
    color: #005a8d;
    min-width: 50px; /* Assure un alignement correct */
    text-align: right;
}


/*--------------------------------------------*/
/* --- Styles pour le bouton Live Scoring --- */
/*--------------------------------------------*/
/* Alternative : Appliquer z-index directement au bouton */
.btn-live-scoring { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    padding: 30px 10px; 
    font-size: 1.5em; 
    font-weight: 900; 
    color: rgb(0, 0, 0); 
    background-image: url(photos/golf_2.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    border: none; 
    border-radius: 10px; 
    cursor: pointer; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    transition: all 0.2s ease-in-out;
}


.btn-live-scoring:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5); }
.btn-live-scoring .live-indicator { width: 15px; height: 15px; background-color: rgb(255, 0, 0); border-radius: 50%; margin-right: 17px; animation: pulse-live 1.5s infinite; }
@keyframes pulse-live { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }


/* --- Styles pour les annonces de compétition avec images de fond --- */
.event-pending-notice { 
    text-align: center; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    position: relative; 
    overflow: hidden;
}

/* Version avec image de fond - UTILISER UN PSEUDO-ÉLÉMENT POUR LE VOILE */
.event-pending-notice.with-background {
    background-image: url("photos/Part_1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /*min-height: 70px; /* Réduit de 80px à 70px */
}

/* NOUVEAU : Voile complet avec pseudo-élément ::before */
.event-pending-notice.with-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 1;
}

/* Le contenu doit être au-dessus du voile */
.event-pending-notice .content-overlay {
    position: relative;
    z-index: 2;
    padding: 8px 10px; /* Réduit encore un peu : de 12px à 10px */
    display: flex; /* Ajout pour le centrage vertical */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    /*min-height: 70px; /* Assure une hauteur minimale pour le centrage */
    /* Plus besoin de background-color ici, c'est le ::before qui s'en charge */
}

/* Le texte au-dessus */
.event-pending-notice .event-text {
    color: #333;
    font-weight: 600;
    position: relative;
    z-index: 10;
}

.combined-notice-link { 
    display: block; 
    text-decoration: none; 
    color: inherit; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
}

.combined-notice-link:hover { 
    transform: scale(1.02); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}

.combined-notice-link .event-pending-notice { 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
    border-bottom: none; 
}

.results-link-secondary { 
    text-align: center; 
    font-weight: bold; 
    font-size: 0.9em; 
    border: 1px solid #e0e0e0; 
    border-top: 1px dashed #ccc; 
    color: #005a8d; 
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px;
    position: relative;
    overflow: hidden;
}

/* Version avec image de fond */
.results-link-secondary.with-background {
    background-image: url("photos/Part_2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /*min-height: 45px; /* Encore plus compact */
}

/* NOUVEAU : Voile complet pour results-link-secondary aussi */
.results-link-secondary.with-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 1;
}

/* Le wrapper pour le contenu */
.results-link-secondary .content-overlay {
    position: relative;
    z-index: 2;
    padding: 5px 10px; /* Encore plus réduit : de 8px à 5px */
    display: flex; /* Ajout pour le centrage vertical */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    /*min-height: 50px; /* Assure une hauteur minimale pour le centrage */
}

/* Le texte au-dessus */
.results-link-secondary .results-text {
    color: #005a8d;
    font-weight: bold;
    position: relative;
    z-index: 10;
}




/* --- Styles pour la Modale (Générique) --- */
.modal-overlay { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.modal-overlay.visible { opacity: 1; visibility: visible; }
.modal-content { background-color: #ffffff; padding: 20px; border-radius: 12px; width: 90%; max-width: 400px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transform: scale(0.9); transition: transform 0.3s ease; }
.modal-overlay.visible .modal-content { transform: scale(1); }
.modal-close { color: #888; position: absolute; top: 0px; right: 0px; font-size: 2.5rem; line-height: 1; font-weight: 300; padding: 5px 15px; cursor: pointer; z-index: 999; transition: color 0.2s ease; }
.modal-close:hover { color: #000; }

/* --- Styles pour le Leaderboard --- */
.leaderboard-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.leaderboard-table th, .leaderboard-table td { padding: 10px 8px; text-align: center; border-bottom: 1px solid #eee; }
.leaderboard-table th { font-size: 0.9em; color: #666; text-transform: uppercase; }
.leaderboard-table td:nth-child(2) { text-align: left; font-weight: bold; }
.leaderboard-table td[class^="score-"] { font-weight: bold; font-size: 1.2em; }
.score-even { color: #333; }
.score-under { color: #c00; }
.score-over { color: #005a8d; }



.video-responsive-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 6px; /* Pour avoir des coins arrondis comme les autres modules */
}

.video-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-responsive-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* Voile blanc à 20% */
    border-radius: 6px;
    z-index: 1;
    pointer-events: none; /* Important : permet de cliquer à travers le voile */
}



/* Style pour le module "Document PDF" - VERSION CORRIGÉE */
.module-document_pdf {
    padding: 15px;
    background-image: url("photos/Papirus.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative; /* AJOUT CRUCIAL pour que le ::before fonctionne */
    cursor: pointer; /* NOUVEAU : indique que c'est cliquable */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* NOUVEAU : effet au survol */
}

/* CORRECTION : Le voile d'opacité */
.module-document_pdf::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    border-radius: 6px; /* Assure que le voile suit les bordures arrondies */
}

/* NOUVEAU : Effet au survol de toute la carte */
.module-document_pdf:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.pdf-header {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 0; /* MODIFIÉ : suppression de la marge du bas */
}

.pdf-header h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 8px 0;
    color: #333;
    font-size: 1.4em;
    font-weight: 800;
}

.pdf-description {
    position: relative;
    z-index: 2;
    color: #666;
    font-size: 0.95em;
    margin: 0; /* MODIFIÉ : suppression des marges */
    line-height: 1.4;
    font-weight: 800;
}


/* Responsive design */
@media (max-width: 768px) {
    .module-document_pdf {
        padding: 15px;
    }
    
    .pdf-header h3 {
        font-size: 1.2em;
    }
}




/* ==========================================================================
   MODULE PUBLICITÉ - VERSION SIMPLE ET STABLE
   ========================================================================== */

/* Conteneur principal de la publicité */
.module-publicite {
    width: 100%;
    margin-bottom: 0; /* Pas d'espacement supplémentaire pour éviter les "sauts" */
    transition: none; /* On supprime les transitions qui peuvent causer des saccades */
}

/* Bannière publicitaire */
.publicite-banniere {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    background-color: #f8f9fa; /* Couleur de fond pendant le chargement */
}

/* Image de la bannière */
.publicite-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Pas d'animations sur l'image pour éviter les saccades lors des refresh */
    transition: none;
}

/* Effet hover léger pour les bannières cliquables */
.publicite-banniere[style*="cursor: pointer"]:hover {
    opacity: 0.95;
    /* Transition très courte pour éviter les conflits avec les rafraîchissements */
    transition: opacity 0.1s ease;
}

/* VARIANTE : Publicité flottante (optionnel) */
.module-publicite.publicite-flottante {
    position: sticky;
    top: 20px;
    z-index: 10;
    margin: 15px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.publicite-flottante .publicite-banniere {
    border-radius: 8px;
    /* border: 2px solid rgba(255,255,255,0.8); */
}

/* Responsive : adaptation mobile */
@media (max-width: 768px) {
    .module-publicite {
        margin-bottom: 0;
    }
    
    .publicite-flottante {
        position: relative; /* Sur mobile, on désactive le sticky */
        top: auto;
        margin: 10px 0;
    }
}

/* IMPORTANT : Styles pour éviter les "sauts" lors des rafraîchissements */
.module-publicite[data-module="publicite"] {
    /* On force une hauteur minimum pour éviter le layout shift */
    min-height: 50px;
}

/* Style de chargement pendant que l'image se charge */
.publicite-image {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.publicite-image[src] {
    /* Une fois l'image chargée, on supprime l'animation */
    background: none;
    animation: none;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Style spécial pour la cohérence avec vos autres modules */
/* .module-publicite .publicite-banniere {
    border: 1px solid rgba(0,0,0,0.1);
} */



/* ==========================================================================
   MODULE Start - Mockup
   ========================================================================== */
/* ==========================================================================
   MODULE START - BASÉ SUR LA STRUCTURE QUI FONCTIONNE
   ========================================================================== */

/* ✅ GARDER LE CSS DU MODULE BOUTON (inchangé) */
.module-start {
    padding: 15px;
    background-image: url("photos/Depart.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.module-start::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    border-radius: 6px;
}

.module-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.start-content h4 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 1.3em;
}

.start-content p {
    color: white;
    margin: 0;
    opacity: 0.9;
    font-size: 1.1em;
    font-weight: 600;
}

/* ==========================================================================
   MODALE START - STRUCTURE IDENTIQUE À PROSHOP/COMPÉTITIONS
   ========================================================================== */

/* Structure générale - COPIÉE DE PROSHOP */
.start-modal .modal-content {
    max-width: 420px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* HEADER FIXE - MÊME PRINCIPE QUE PROSHOP */
.start-modal-header {
    text-align: center;
    padding: 20px 20px 15px 20px;
    border-bottom: 3px solid #2c5530;
    /* background: linear-gradient(135deg, #f8f9fa, #e9ecef); */
    flex-shrink: 0;
}

.start-modal-header h3 {
    margin: 0 0 5px 0;
    color: #2c5530;
    font-size: 1.4em;
    font-weight: bold;
}

.start-modal-subtitle {
    margin: 0;
    color: #666;
    font-size: 0.9em;
    font-style: italic;
}

/* CONTENU SCROLLABLE - MÊME PRINCIPE QUE COMPÉTITIONS */
.start-scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

/* ACTIONS FIXES EN BAS - MÊME PRINCIPE QUE PROSHOP */
.start-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px 20px 0px 20px;
    background: white;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

/* ==========================================================================
   STYLES DES CRÉNEAUX - VERSION FLUIDE ET AÉRÉE
   ========================================================================== */

.departs-list-clean {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Créneaux individuels - Style épuré */
.creneaux-item-clean {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 18px;
    transition: all 0.3s ease;
    position: relative;
    border-left: 4px solid #dee2e6;
}

.creneaux-item-clean:hover {
    background: #e9ecef;
    border-color: #ced4da;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Header du créneau */
.creneaux-header-clean {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.creneaux-time-clean {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.1em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.creneaux-status-clean {
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Corps du créneau */
.creneaux-players-clean {
    color: #333;
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 10px;
}

.creneaux-players-clean strong {
    color: #2c5530;
    font-weight: 600;
}

/* Footer du créneau */
.creneaux-footer-clean {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    color: #666;
    margin-top: 8px;
}

.creneaux-course-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.creneaux-players-count {
    background: #e9ecef;
    padding: 4px 8px;
    border-radius: 8px;
    color: #495057;
    font-weight: 500;
}

/* États des créneaux - Couleurs harmonieuses */
.creneaux-item-clean.status-late {
    border-left-color: #dc3545;
    background: linear-gradient(135deg, #fff5f5, #f8f9fa);
}

.creneaux-item-clean.status-late .creneaux-time-clean {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.creneaux-item-clean.status-late .creneaux-status-clean {
    background: #f8d7da;
    color: #721c24;
}

.creneaux-item-clean.status-current {
    border-left-color: #ffc107;
    background: linear-gradient(135deg, #fffdf5, #f8f9fa);
    animation: pulse-current 2s infinite;
}

.creneaux-item-clean.status-current .creneaux-time-clean {
    background: linear-gradient(135deg, #ffc107, #e0a800);
}

.creneaux-item-clean.status-current .creneaux-status-clean {
    background: #fff3cd;
    color: #856404;
}

.creneaux-item-clean.status-next {
    border-left-color: #28a745;
    background: linear-gradient(135deg, #f8fff8, #f8f9fa);
}

.creneaux-item-clean.status-next .creneaux-time-clean {
    background: linear-gradient(135deg, #28a745, #1e7e34);
}

.creneaux-item-clean.status-next .creneaux-status-clean {
    background: #d4edda;
    color: #155724;
}

/* Bouton d'action principal */
.start-action-title {
    text-align: center;
    margin: 0;
    color: #2c5530;
    font-size: 1.1em;
    font-weight: bold;
}

.btn-start-game-clean {
    background: linear-gradient(135deg, #2c5530, #27ae60);
    color: white;
    border: none;
    padding: 16px 25px;
    border-radius: 25px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(44, 85, 48, 0.3);
    /* text-transform: uppercase;
    letter-spacing: 0.5px; */
}

.btn-start-game-clean:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(44, 85, 48, 0.4);
}

.start-fidelity-note {
    text-align: center;
    margin: 8px 0 0 0;
    font-size: 0.9em;
    color: #666;
    /* font-style: italic; */
}


/* Animation pour le créneau en cours */
@keyframes pulse-current {
    0%, 100% { 
        box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2); 
    }
    50% { 
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4); 
    }
}

/* Responsive design */
@media (max-width: 480px) {
    .start-modal .modal-content {
        max-width: 95%;
        max-height: 90vh;
    }
    
    .start-modal-header {
        padding: 15px;
    }
    
    .start-scrollable-content {
        padding: 15px;
    }
    
    .creneaux-item-clean {
        padding: 15px;
    }
    
    .creneaux-header-clean {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    
    .creneaux-footer-clean {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    
    .start-actions {
        padding-top: 15px;
    }
}



/* ==========================================================================
   Notifications - Mockup
   ========================================================================== */

/* Notification overlay */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9000; /* Au-dessus des autres modals */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.notification-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Notification card */
.notification-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    max-width: 320px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.notification-overlay.show .notification-card {
    transform: scale(1);
}

/* Icône de notification */
.notification-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
}

.notification-icon.warning { color: #ff9800; }
.notification-icon.info { color: #2196f3; }
.notification-icon.success { color: #4caf50; }
.notification-icon.error { color: #f44336; }
.notification-icon.membersOnly { color: #e74c3c; }


/* Titre notification */
.notification-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/* Message notification */
.notification-message {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.4;
    margin-bottom: 20px;
}

/* Bouton notification */
.notification-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}

.notification-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.notification-btn.warning {
    background: linear-gradient(135deg, #ff9800, #f57c00);
}

.notification-btn.success {
    background: linear-gradient(135deg, #4caf50, #388e3c);
}



.notification-btn.membersOnly {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.notification-btn.membersOnly:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}


/* ==========================================================================
   MODULE COMPETITIONS - Deux boutons côte à côte
   ========================================================================== */

.module-competitions {
    padding: 0;
    background: transparent;
    border: none;
}

.competitions-buttons-container {
    display: flex;
    gap: 12px !important; /* Petit espace entre les boutons */
    height: 150px !important; /* Hauteur fixe pour les deux boutons */
}

.competition-button {
    flex: 1; /* Chaque bouton prend la moitié de la largeur */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Images de fond spécifiques (tu les remplaceras par tes vraies images) */
.competition-button-left {
    background-image: url("photos/golf_competitions_list.jpg"); /* À remplacer */
    background-color: #4a90e2; /* Fallback bleu */
    background-position: center top;
}

.competition-button-right {
    background-image: url("photos/golf_my_competition.jpg"); /* À remplacer */
    background-color: #27ae60; /* Fallback vert */
    background-position: center top;
}

/* Voile d'opacité pour la lisibilité */
.competition-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: rgba(0, 0, 0, 0.3); /* Voile sombre pour contraster avec le texte blanc */
    border-radius: 8px;
    z-index: 1;
}

/* Effet hover */
.competition-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* .competition-button:hover::before {
    background-color: rgba(0, 0, 0, 0.4);  Voile plus foncé au hover 
} */

/* Contenu texte des boutons */
.competition-button-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.competition-button-content h4 {
    margin: 2px 0;
    font-size: 1.1em;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    line-height: 1.2;
}

/* Responsive design */
@media (max-width: 480px) {
    .competitions-buttons-container {
        height: 100px;
        gap: 6px;
    }
    
    .competition-button-content h4 {
        font-size: 0.95em;
    }
}

/* ==========================================================================
   MODALES COMPETITIONS
   ========================================================================== */

/* Modal Liste des compétitions */
/* .competitions-list-modal .modal-content {
    max-width: 400px;
    max-height: 80vh;
} */

.competitions-list-modal .modal-content {
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

/* .competitions-list-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
} */

.competitions-list-header {
    text-align: center;
    margin-bottom: 20px;
    padding: 15px 20px 10px 20px; /* Ajout padding latéral */
    border-bottom: 2px solid #f0f0f0;
    flex-shrink: 0; /* ← Empêche le header de se compresser */
}

.competitions-list-header h3 {
    margin: 0;
    color: #2c5530;
    font-size: 1.3em;
}

/* ZONE SCROLLABLE - C'est ici qu'il faut appliquer le scroll ! */
.competitions-list-content {
    flex: 1; /* ← Prend tout l'espace disponible */
    overflow-y: auto; /* ← LE FIX PRINCIPAL ! */
    padding: 0 20px 20px 20px;
    -webkit-overflow-scrolling: touch; /* ← Scroll fluide sur iOS */
}

.competition-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.competition-item:hover {
    background: #e9ecef;
    border-color: #ced4da;
}

.competition-title {
    font-weight: bold;
    color: #2c5530;
    margin-bottom: 5px;
    font-size: 1.1em;
}

.competition-date {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 8px;
}

.competition-details {
    font-size: 0.85em;
    color: #555;
    line-height: 1.3;
}

.competition-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    margin-top: 8px;
}

.status-open {
    background-color: #d4edda;
    color: #155724;
}

.status-full {
    background-color: #f8d7da;
    color: #721c24;
}

.status-upcoming {
    background-color: #fff3cd;
    color: #856404;
}

.btn-competition-register {
    background: linear-gradient(135deg, #2c5530, #27ae60);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 15px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    transition: all 0.3s ease;
}

.btn-competition-register:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(44, 85, 48, 0.3);
}

.btn-competition-register.disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Modal Ma Compétition */
.my-competition-modal .modal-content {
    max-width: 380px;
}

.my-competition-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #2c5530;
    font-size: 0.95em;
}

.form-group input,
.form-group textarea {
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1em;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.btn-start-competition {
    background: linear-gradient(135deg, #2c5530, #27ae60);
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 25px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(44, 85, 48, 0.3);
}

.btn-start-competition:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(44, 85, 48, 0.4);
}

.form-help-text {
    font-size: 0.85em;
    color: #666;
    font-style: italic;
    margin-top: 5px;
}



/* ==========================================================================
   MODULE PARCOURS - Mockup
   ========================================================================== */
.module-parcours {
    width: 166px;
    height: 100px;

    /* width: 100px;
    height: 100px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); */

    /* width: 100px;
    height: 100px;
    border-radius: 50%; */

    margin: 15px auto;

    background-image: url("photos/parcours_fond.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Couleur de fond provisoire si l'image n'est pas disponible */
    background-color: #2e7d32; /* Vert golf */
}

/* Voile d'opacité */
.module-parcours::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    /* border-radius: 6px; */
    border-radius: 50%;
}

/* Effet au survol */
.module-parcours:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.parcours-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.parcours-content h4 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 1.3em;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.parcours-content p {
    color: white;
    margin: 0;
    opacity: 0.9;
    font-size: 1.1em;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ==========================================================================
   MODALE PARCOURS
   ========================================================================== */

.parcours-modal .modal-content {
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
}

.parcours-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.parcours-header h3 {
    margin: 0 0 5px 0;
    color: #2e7d32;
    font-size: 1.4em;
}

.parcours-subtitle {
    margin: 0;
    color: #666;
    font-size: 0.9em;
    font-style: italic;
}

/* Grille des trous */
.trous-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 10px 0;
}

.trou-vignette {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.trou-vignette:hover {
    transform: translateY(-3px);
    border-color: #2e7d32;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.trou-number {
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    color: white;
    text-align: center;
    padding: 8px;
    font-weight: bold;
    font-size: 1.1em;
}

.trou-preview {
    height: 80px;
    position: relative;
    overflow: hidden;
}

.trou-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.trou-vignette:hover .trou-preview img {
    transform: scale(1.1);
}

.trou-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #f8f9fa;
    color: #666;
}

.trou-placeholder span {
    font-size: 2em;
    margin-bottom: 5px;
}

.trou-placeholder small {
    font-size: 0.8em;
}

/* ==========================================================================
   CORRECTION - MODALE DÉTAIL TROU pour nouvelle hauteur mobile
   ========================================================================== */

/* Modale générale - hauteur ajustée */
.trou-detail-modal {
    z-index: 2001;
}

.trou-detail-content {
    max-width: 450px;
    max-height: 85vh; /* ✅ RÉDUIT de 90vh à 85vh */
    max-height: 85dvh; /* ✅ AJOUT version mobile moderne */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* ✅ AJOUT pour contrôler le scroll */
}

.trou-detail-header {
    text-align: center;
    margin-bottom: 15px;
    padding: 15px 20px 10px 20px; /* ✅ AJOUT padding latéral */
    border-bottom: 1px solid #eee;
    flex-shrink: 0; /* ✅ AJOUT - empêche la compression */
}

.trou-detail-header h3 {
    margin: 0 0 5px 0;
    color: #2e7d32;
    font-size: 1.3em;
}

.trou-detail-header p {
    margin: 0;
    color: #666;
    font-size: 0.9em;
}

/* ✅ ZONE SCROLLABLE - Le fix principal */
.trou-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

/* ✅ IMAGE REDIMENSIONNÉE - Juste milieu pour laisser de la place aux boutons */
.trou-detail-image {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    flex-shrink: 0; /* ✅ Empêche la compression de l'image */
    
    /* ✅ JUSTE MILIEU - Plus grande que 250px mais pas trop */
    max-height: 350px; /* Taille raisonnable */
    height: 350px; /* Hauteur fixe */
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.trou-detail-image img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain; /* ✅ Garde les proportions */
}

.trou-error {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.trou-error-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

.trou-error h4 {
    margin: 0 0 10px 0;
    color: #333;
}

.trou-error p {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    font-weight: bold;
    color: #2e7d32;
}

/* ✅ ACTIONS FIXES EN BAS */
.trou-actions {
    display: flex;
    gap: 10px;
    padding: 15px 20px 20px 20px; /* ✅ AJOUT padding */
    background: white;
    border-top: 1px solid #eee; /* ✅ AJOUT séparateur */
    flex-shrink: 0; /* ✅ Empêche la compression */
}

.btn-trou-action {
    flex: 1;
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    color: white;
    border: none;
    padding: 12px 8px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-trou-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
}

/* ✅ RESPONSIVE AMÉLIORÉ */
@media (max-width: 480px) {
    .trou-detail-content {
        max-width: 95%;
        max-height: 90vh; /* Un peu plus d'espace sur mobile */
        max-height: 90dvh;
        padding: 0; /* Supprime le padding global */
    }
    
    .trou-detail-header {
        padding: 10px 15px;
    }
    
    .trou-detail-body {
        padding: 0 15px;
    }
    
    /* ✅ IMAGE un peu plus grande sur mobile */
    .trou-detail-image {
        max-height: 320px; /* Au lieu de 200px */
        height: 3200px;
        margin-bottom: 15px;
    }
    
    .trou-actions {
        flex-direction: column;
        padding: 10px 15px 15px 15px;
    }
    
    .btn-trou-action {
        font-size: 0.85em;
        padding: 10px;
    }
}

/* ✅ MEDIA QUERY SPÉCIALE pour écrans très petits */
@media (max-height: 600px) {
    .trou-detail-content {
        max-height: 95vh;
        max-height: 95dvh;
    }
    
    .trou-detail-image {
        max-height: 240px; /* Encore raisonnable */
        height: 240px;
    }
    
    .trou-actions {
        padding: 8px 15px 12px 15px;
    }
    
    .btn-trou-action {
        padding: 8px;
        font-size: 0.8em;
    }
}



/* ==========================================================================
   MODULE RESTAURATION - Deux boutons côte à côte
   ========================================================================== */

.module-restauration {
    padding: 0;
    background: transparent;
    border: none;
}

.restauration-buttons-container {
    display: flex;
    gap: 12px !important; /* Petit espace entre les boutons */
    height: 150px !important; /* Hauteur fixe pour les deux boutons */
}

.restauration-button {
    flex: 1; /* Chaque bouton prend la moitié de la largeur */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Couleurs de fond temporaires (en attendant les vraies images) */
.restauration-button-left {
    background-image: url("photos/golf_my_restaurant.jpg");
    background-color: #411D4B; 
}

.restauration-button-right {
    background-image: url("photos/golf_my_snack.png");
    /* background-color: #FF6B35; */
}

/* Voile d'opacité pour la lisibilité (optionnel pour les couleurs unies) */
.restauration-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(0, 0, 0, 0.1); */
    border-radius: 8px;
    z-index: 1;
}

/* Effet hover */
.restauration-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.restauration-button:hover::before {
    background-color: rgba(0, 0, 0, 0.2); /* Voile plus foncé au hover */
}

/* Contenu texte des boutons */
.restauration-button-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.restauration-button-content h4 {
    margin: 2px 0;
    font-size: 1.3em;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    line-height: 1.2;
}

/* Responsive design */
@media (max-width: 480px) {
    .restauration-buttons-container {
        height: 120px;
        gap: 8px;
    }
    
    .restauration-button-content h4 {
        font-size: 1.1em;
    }
}

/* ==========================================================================
   MODALES RESTAURATION
   ========================================================================== */

/* Modales spécifiques Restaurant et Snack */
.restaurant-modal .modal-content,
.snack-modal .modal-content {
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
}

.restauration-modal-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.restauration-modal-header h3 {
    margin: 0 0 5px 0;
    font-size: 1.4em;
    color: #333;
}

.restauration-modal-subtitle {
    margin: 0;
    color: #666;
    font-size: 0.9em;
    font-style: italic;
}

/* Container pour l'image du menu */
.menu-image-container {
    margin-bottom: 25px;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.menu-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background-color: white;
}

/* Placeholder si l'image n'est pas disponible */
.menu-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #f8f9fa;
    color: #666;
    text-align: center;
    padding: 20px;
}

.menu-placeholder-icon {
    font-size: 4em;
    margin-bottom: 15px;
}

.menu-placeholder h4 {
    margin: 0 0 10px 0;
    color: #333;
}

.menu-placeholder p {
    margin: 0;
    font-size: 0.9em;
}

/* Actions de la modale */
.restauration-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-restauration-action {
    flex: 1;
    border: none;
    padding: 15px 8px;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Bouton Réserver (Restaurant) */
.btn-restaurant-reserve {
    background: linear-gradient(135deg, #411D4B, #BD7CBD);
    color: white;
    box-shadow: 0 4px 8px rgba(139, 69, 19, 0.3);
}

.btn-restaurant-reserve:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(139, 69, 19, 0.4);
}

/* Bouton Commander (Snack) */
.btn-snack-order {
    background: linear-gradient(135deg, #411D4B, #BD7CBD);
    color: white;
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}

.btn-snack-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 107, 53, 0.4);
}

/* Responsive pour les actions */
@media (max-width: 480px) {
    .restauration-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-restauration-action {
        font-size: 1em;
        padding: 12px;
    }
    
    .menu-image-container {
        margin-bottom: 20px;
    }
    
    .menu-placeholder {
        min-height: 250px;
        padding: 15px;
    }
    
    .menu-placeholder-icon {
        font-size: 3em;
    }
}



/* ==========================================================================
   MODULE PROSHOP - VERSION MISE À JOUR
   ========================================================================== */

/* ✅ GARDER CET ANCIEN CSS (module bouton) - NE PAS TOUCHER */
.module-proshop {
    padding: 15px;
    background-color: #1B5E20;
    background-image: linear-gradient(135deg, #1B5E20, #2E7D32);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.module-proshop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    border-radius: 6px;
}

.module-proshop:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border-color: rgba(255, 215, 0, 0.6);
}

.proshop-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.proshop-content h4 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 1.3em;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.proshop-content p {
    color: #FFD700;
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ==========================================================================
   MODALE PROSHOP - VERSION AVEC SCROLL PROPRE
   ========================================================================== */

/* REMPLACER CETTE PARTIE (tout ce qui suit) */
.proshop-modal .modal-content {
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.proshop-modal-header {
    text-align: center;
    padding: 20px 20px 15px 20px;
    border-bottom: 3px solid #1B5E20;
    /* background: linear-gradient(135deg, #f8f9fa, #e9ecef); */
    flex-shrink: 0;
}

.proshop-modal-header h3 {
    margin: 0 0 5px 0;
    color: #1B5E20;
    font-size: 1.5em;
    font-weight: bold;
}

.proshop-modal-subtitle {
    margin: 0;
    color: #666;
    font-size: 0.95em;
    font-style: italic;
}

/* CONTENU SCROLLABLE */
.proshop-scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

/* Sections de la modale */
.proshop-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid #1B5E20;
}

.proshop-section:last-child {
    margin-bottom: 0;
}

.proshop-section-title {
    margin: 0 0 15px 0;
    color: #1B5E20;
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Grille de la vitrine */
.vitrine-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.vitrine-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.vitrine-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.vitrine-image {
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: #f0f0f0;
}

.vitrine-info {
    padding: 12px;
    text-align: center;
}

.vitrine-name {
    font-weight: bold;
    color: #333;
    font-size: 0.9em;
    margin-bottom: 5px;
}

.vitrine-price {
    color: #1B5E20;
    font-weight: bold;
    font-size: 1.1em;
}

/* Placeholder pour les images manquantes */
.vitrine-placeholder {
    width: 100%;
    height: 120px;
    background: #e9ecef;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 0.8em;
}

.vitrine-placeholder-icon {
    font-size: 2em;
    margin-bottom: 5px;
}

/* Section Loterie */
.loterie-container {
    text-align: center;
}

.loterie-article {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #333;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

.loterie-article h4 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
}

.loterie-article p {
    margin: 0;
    font-size: 0.9em;
    opacity: 0.8;
}

/* La roue de la chance */
.wheel-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 20px auto;
}

.wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 8px solid #FFD700;
    position: relative;
    background: conic-gradient(
        #FF6B6B 0deg 60deg,
        #4ECDC4 60deg 120deg,
        #45B7D1 120deg 180deg,
        #96CEB4 180deg 240deg,
        #FFEAA7 240deg 300deg,
        #DDA0DD 300deg 360deg
    );
    transition: transform 3s cubic-bezier(0.2, 0.8, 0.7, 0.99);
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.wheel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #333;
    border-radius: 50%;
    z-index: 2;
}

.wheel-pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid #333;
    z-index: 1;
}

.wheel.spinning {
    transition: transform 3s cubic-bezier(0.2, 0.8, 0.7, 0.99);
}

/* ACTIONS FIXES EN BAS */
.proshop-actions {
    display: flex;
    gap: 15px;
    padding: 15px 20px 20px 20px;
    background: white;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

.btn-proshop-action {
    flex: 1;
    border: none;
    padding: 15px 8px;
    border-radius: 12px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-voir-boutique {
    background: linear-gradient(135deg, #1B5E20, #2E7D32);
    color: white;
    box-shadow: 0 4px 8px rgba(27, 94, 32, 0.3);
}

.btn-voir-boutique:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(27, 94, 32, 0.4);
}

.btn-tenter-chance {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #333;
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

.btn-tenter-chance:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 215, 0, 0.4);
}

.btn-tenter-chance:disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Responsive design */
@media (max-width: 480px) {
    .proshop-modal .modal-content {
        max-width: 95%;
        max-height: 85vh;
    }
    
    .proshop-modal-header {
        padding: 15px 15px 10px 15px;
    }
    
    .proshop-scrollable-content {
        padding: 15px;
    }
    
    .vitrine-grid {
        grid-template-columns: 1fr;
    }
    
    .wheel-container {
        width: 160px;
        height: 160px;
    }
    
    .proshop-actions {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }
    
    .btn-proshop-action {
        font-size: 0.9em;
        padding: 12px;
    }
}



/* ==========================================================================
   MODULE AVIS - Mockup
   ========================================================================== */
.module-avis {
    width: 166px;
    height: 100px;

    /* width: 100px;
    height: 100px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); */

    /* width: 100px;
    height: 100px;
    border-radius: 50%; */

    margin: 15px auto;

    /* padding: 15px; */
    background-image: url("photos/votre_avis.png");
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Couleur de fond de secours si l'image n'est pas disponible */
    /* background-color: #4CAF50; */
}

/* Voile d'opacité */
/* .module-avis::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.15);
    pointer-events: none;
    border-radius: 6px;
} */

/* Effet au survol */
.module-avis:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.avis-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.avis-content h4 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 1.3em;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.avis-content p {
    color: white;
    margin: 0;
    opacity: 0.9;
    font-size: 1em;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ==========================================================================
   MODALE AVIS
   ========================================================================== */

.avis-modal .modal-content {
    max-width: 450px;
    max-height: 90vh;
}

.avis-modal-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #4CAF50;
}

.avis-modal-header h3 {
    margin: 0 0 5px 0;
    color: #2E7D32;
    font-size: 1.1em;
    font-weight: bold;
}

.avis-modal-subtitle {
    margin: 0;
    color: #666;
    font-size: 0.9em;
    font-style: italic;
}

/* Formulaire d'avis */
.avis-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.avis-form-group {
    display: flex;
    flex-direction: column;
}

.avis-form-group label {
    font-weight: bold;
    margin-bottom: 8px;
    color: #2E7D32;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.avis-form-group textarea {
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.avis-form-group textarea:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.avis-form-group textarea::placeholder {
    color: #999;
    font-style: italic;
}

/* Compteur de caractères */
.char-counter {
    text-align: right;
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
}

.char-counter.warning {
    color: #ff9800;
}

.char-counter.error {
    color: #f44336;
}

/* Mention optionnel/obligatoire */
.field-required {
    color: #f44336;
    font-weight: normal;
    font-size: 0.9em;
}

.field-optional {
    color: #666;
    font-weight: normal;
    font-size: 0.9em;
}

/* Note d'information */
.avis-info {
    background: #e8f5e8;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 12px;
    font-size: 0.9em;
    color: #2e7d32;
    text-align: center;
    margin-top: 15px;
}

.avis-info-icon {
    font-size: 1.2em;
    margin-right: 5px;
}

/* Bouton d'envoi */
.btn-submit-avis {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 25px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-submit-avis:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
}

.btn-submit-avis:disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Responsive design */
@media (max-width: 480px) {
    .avis-modal .modal-content {
        max-width: 95%;
        padding: 15px;
    }
    
    .avis-form {
        gap: 15px;
    }
    
    .avis-form-group textarea {
        min-height: 80px;
        padding: 10px;
    }
    
    .btn-submit-avis {
        font-size: 1em;
        padding: 12px 20px;
    }
}