/* --- MISE EN PAGE GLOBALE NOUVELLE ARCHITECTURE --- */
:root {
    --primary-color: #882E19; /* Rouge Weetable */
    --secondary-color: #333;
    --background-color: #fafafa;
    --card-shadow: 0 4px 12px rgba(0,0,0,0.05);
    --border-radius: 8px;
    --header-height: 60px;
    --hero-min-height: 50vh; /* Nouvelle variable pour le minimum de hauteur (Full-screen) */
    --filter-bar-height: 60px;
}
/* Ajustement du padding-top pour l'espace total Header */
body { margin:0; font-family:'Poppins',sans-serif; background:var(--background-color); display:flex; flex-direction:column; min-height:100vh; padding-top: var(--header-height); }
a { color: var(--primary-color); text-decoration: none; }
a:hover { text-decoration: none; }

/* --- EN-TÊTE ÉPURÉ (FIXE) --- */
header {
    background: white;
    box-shadow: 0 0 4px rgba(0,0,0,0.05);
    border-bottom: 1px solid #eee;
    padding: 0 30px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1050;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height: var(--header-height);
}
header .logo {
    font-size: 1.6em;
    font-weight: 800;
    color: var(--primary-color);
}
/* Le bouton Partenaires a été retiré du header pour un affichage fixe au-dessus du footer */


/* --- SECTION DE PRÉSENTATION (FULLSCREEN HERO) --- */
#hero-presentation {
    background: var(--primary-color);
    padding: 50px 30px;
    border-bottom: 1px solid #eee;
    text-align: center;
    position: relative; /* Devient un bloc normal */
    min-height: var(--hero-min-height); /* Nouvelle hauteur minimale */
    width: 100%;
    z-index: 1045;
    box-sizing: border-box;
    display: flex; /* Centrage vertical */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}
#hero-presentation h1 {
    font-size: 2.5em; /* Taille de police plus grande */
    margin: 0 0 10px 0;
    color: white;
    font-weight: 700;
}
#hero-presentation p {
    font-size: 1.1em;
    max-width: 900px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.9);
}


/* --- BARRE DE FILTRES STICKY --- */
#filter-bar {
    background: white;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: var(--header-height); /* Se place juste sous le header fixe */
    width: 100%;
    z-index: 1040;
    box-sizing: border-box;
    display: flex;
    gap: 15px;
    align-items: center;
    height: var(--filter-bar-height);
}
.filter-main-controls {
    display: flex;
    gap: 10px;
    flex: 1;
    max-width: 600px;
}
#filter-bar select, #filter-bar input[type="text"] {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    flex: 1;
    font-size: 0.95em;
    transition: box-shadow 0.2s;
}
#filter-bar input[type="text"]:focus, #filter-bar select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(227, 24, 55, 0.2);
    outline: none;
}
.filter-bar-btn {
    padding: 10px 15px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    transition: background 0.2s, border-color 0.2s;
}
.filter-bar-btn:hover { background: #e0e0e0; }
.filter-bar-btn i { color: #555; margin-right: 5px; }
.time-filter button.active i {
    color: #fff;
}
/* --- CONTENEUR PRINCIPAL --- */
#content {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 20px;
    padding-top: 15px;
    margin-top: 0;
    box-sizing: border-box;
}

/* --- CARTE (Map) : Reste Sticky sur Desktop --- */
#map {
    width: 45%;
    min-height: 400px;
    /* Hauteur dynamique calculée en fonction des éléments fixes */
    height: calc(100vh - var(--header-height) - var(--filter-bar-height) - 40px);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-right: 20px;
    position: sticky;
    /* Se positionne sous la barre de filtre (60px) + Header (60px) + Padding (20px) */
    top: calc(var(--header-height) + var(--filter-bar-height) + 20px);
    box-shadow: var(--card-shadow);
    flex-shrink: 0;
}

/* --- SIDEBAR (Liste des résultats) --- */
#sidebar {
    flex: 1;
    padding: 0;
    box-sizing: border-box;
}
.count {
    color: var(--secondary-color);
    font-weight: 600;
    padding-bottom: 10px;
    font-size: 1.1em;
}

/* --- CARTE RESTAURANT (Design épuré) --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 15px;
}
.card {
    background: #fff;
    /* border-radius: var(--border-radius); */
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    border: 1px solid #eee;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.card img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}
.card-content {
    padding: 15px;
}
.card-content h2 {
    margin: 0 0 5px 0;
    font-size: 1.3em;
    color: var(--primary-color);
}
.card-content p {
    margin: 0 0 5px 0;
    font-size: 1em;
    color: #555;
}
.card-rating {
    margin-top: 10px;
    font-weight: 600;
}
.card-rating i {
    font-size: 1em;
    color: var(--primary-color);
}

/* --- MODALE FILTRES (Reste inchangée) --- */
#filters-modal, #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100060;
}
#overlay {
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}
/* Style standard pour les modales de contenu */


.modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: white;
}
.modal-header h3 {
    margin: 0;
    font-size: 1.5em;
    color: var(--primary-color);
}
.modal-header .close-btn {
    font-size: 2em;
    cursor: pointer;
    color: #aaa;
}

/* Style spécifique Modale Filtres */
#filters-modal {
    background: white;
    width: 90%;
    max-width: 450px;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    /* LIGNES CLÉS POUR LE CENTRAGE : */
    position: fixed; /* Maintenir la position fixe */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);

    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    overflow-y: auto;
    max-height: 90vh;
}
#filters-modal.visible, #overlay.visible {
    opacity: 1;
    visibility: visible;
}
#filters-modal.visible {
    /* Mettre le scale à 1 pour l'animation */
    transform: translate(-50%, -50%) scale(1);
}
#filters-modal h3 {
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid #eee;
    font-size: 1.5em;
    color: var(--primary-color);
}
#filters-modal-content {
    padding: 20px;
}
.modal-group {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.modal-group:last-child { border-bottom: none; }
.rating-filter {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.rating-filter input[type="radio"] { display: none; }
.rating-filter label { cursor: pointer; color: #ccc; font-size: 1.5em; transition: color 0.2s; }
.rating-filter label i { pointer-events: none; }
.rating-filter input:checked ~ label { color: var(--primary-color); }
.rating-filter input:checked + label { color: var(--primary-color); }
.rating-filter input[value="0"]:checked + label.reset-rating { color: var(--primary-color); }
.rating-filter label.reset-rating { color: #aaa; font-size: 1em; margin-left: 10px; }


/* Styles pour les boutons Midi/Soir */
.time-filter {
    display: flex;
    gap: 10px;
}
.time-filter button {
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}
.time-filter button.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.time-filter button i { margin-right: 5px; }

/* Styles pour les Paiements */
.payment-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.payment-filter input[type="checkbox"] {
    display: none;
}
.payment-filter label {
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9em;
}
.payment-filter input[type="checkbox"]:checked + label {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* --- Boutons d'action dans la modale de filtres --- */
#modal-actions {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background: #fff;
    position: sticky;
    bottom: 0;
    z-index: 1070;
}
#modal-actions button {
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
#modal-actions #reset-filters {
    background: white;
    color: var(--secondary-color);
    border: 1px solid #ccc;
}
#modal-actions #apply-filters {
    background: var(--primary-color);
    color: white;
    border: none;
}

/* --- SECTION PARTENAIRES (AU-DESSUS DU FOOTER) --- */
#partners-section {
    width: 100%;
    /* max-width: 1200px; */
    margin: 30px auto 0 auto;
    padding: 0 20px 30px 20px;
    box-sizing: border-box;
}
#partners-section h2 {
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 25px;
    font-size: 1.8em;
}
#partners-list-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.partner-card-inline {
    flex: 1 1 300px; /* Base pour 3 cartes par ligne sur desktop */
    max-width: 350px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--card-shadow);
    background: white;
}
.partner-card-inline img {
    max-height: 80px;
    max-width: 100%;
    margin-bottom: 15px;
    object-fit: contain;
}
.partner-card-inline h4 {
    color: var(--secondary-color);
    margin: 5px 0 10px 0;
    font-size: 1.2em;
}
.partner-contact-links {
    margin-top: 15px;
}
.partner-contact-links a {
    font-weight: 500;
    display: block;
    margin: 5px 0;
    font-size: 0.9em;
    text-decoration: none;
}
.partner-contact-links a:hover {
    text-decoration: underline;
}


/* --- PANEL DE DÉTAILS (Épuré) --- */
#panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 95%; /* Mobile-first */
    max-width: 850px;
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 20px rgba(0,0,0,0.3);
    overflow-y: auto;
    transition: right 0.4s ease;
    z-index: 991200;
}
#panel.open { right: 0; }
.close-btn {
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    margin: 10px;
    font-size: 2em;
    font-weight: 100;
    cursor: pointer;
    z-index: 1210;
    color: var(--primary-color);
    /* text-shadow: 0 0 5px rgba(0,0,0,0.5); */
}
#panel-content { padding: 0; }
.panel-header-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.panel-details-body { padding: 20px; }
.panel-details-body h1 { color: var(--primary-color); font-size: 2em; margin: 0 0 10px 0; }
.panel-details-body p { margin-bottom: 5px; }
.panel-details-body h4 { color: var(--secondary-color); border-bottom: 1px solid #eee; padding-bottom: 5px; margin-top: 25px; }

/* Horaires */
.panel-schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 450px;
      margin-left: auto;
      margin-right: auto;
}
.panel-schedule-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.95em;
    border-bottom: 1px dotted #eee;
}
.panel-schedule-list li.highlight-day {
    background-color: #f7f7f7;
    font-weight: bold;
}
.panel-schedule-list li:last-child { border-bottom: none; }
.panel-schedule-list strong { font-weight: 500; }
.panel-schedule-list span { color: #555; text-align: right; }
.panel-schedule-list span .separator {
    color: #999;
    margin: 0 5px;
}
.closed { color: var(--primary-color) !important; font-weight: 600; font-style: normal !important; }

.panel-payment-tags { margin-top: 15px; }
.panel-payment-tags span {
    background: #f0f0f0;
    padding: 5px 10px;
    border-radius: 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 0.8em;
    display: inline-block;
}

.panel-cta {
    display: block;
    text-align: center;
    padding: 12px;
    margin-top: 20px;
    background: var(--primary-color);
    color: white;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: opacity 0.2s;
}
.panel-cta:hover { opacity: 0.9; text-decoration: none; }

/* --- FOOTER AMÉLIORÉ --- */
footer {
    background: var(--secondary-color);
    color: white;
    padding: 30px 20px;
    text-align: center;
    margin-top: 30px;
    font-size: 0.9em;
}
footer p {
    margin: 5px 0;
}
footer a {
    color: #f0f0f0;
    margin: 0 10px;
    transition: color 0.2s;
}
footer a:hover {
    color: var(--primary-color);
    text-decoration: none;
}
.footer-links {
    margin-bottom: 15px;
}
.footer-links a i {
    margin-right: 5px;
}


/* --- MEDIA QUERIES (ADAPTATION MOBILE) --- */
@media (max-width: 900px) {
    /* Le padding du body est réduit à la hauteur du header */
    body { padding-top: var(--header-height); }
    header { padding: 10px 15px; font-size: 1.2em; height: var(--header-height); }
    header .logo { font-size: 1.4em; }

    #hero-presentation {
        position: relative; /* Devient un bloc normal */
        min-height: 250px; /* Hauteur plus raisonnable sur mobile */
        padding: 30px 15px;
    }
    #hero-presentation h1 { font-size: 1.8em; }
    #hero-presentation p { font-size: 0.9em; }

    #filter-bar {
        position: static; /* La barre de filtre défile sur mobile */
        top: auto;
        padding: 10px 15px;
        flex-wrap: wrap;
        height: auto;
    }
    .filter-main-controls {
        flex-direction: column;
        width: 100%;
        max-width: none;
    }
    .filter-bar-btn {
        width: 100%;
        text-align: center;
    }

    #content {
        flex-direction: column;
        padding: 10px;
        margin-top: 0;
    }

    /* La carte remonte en haut de la liste sur mobile */
    #map {
        width: 100%;
        height: 200px;
        margin: 0 0 15px 0;
        position: static;
        top: auto;
        order: 1;
    }

    #sidebar {
        width: 100%;
        order: 2;
    }

    .card-grid {
        grid-template-columns: 1fr; /* Une seule colonne */
    }

    /* Section Partenaires sur mobile */
    #partners-section {
        padding: 0 10px 20px 10px;
    }
    .partner-card-inline {
        flex-basis: 100%;
        max-width: 100%;
    }
}
/* --- Styles pour le Logo OT en surimpression --- */
.card-image-container {
    position: relative; /* Point de référence pour le logo absolument positionné */
    width: 100%;
    height: 350px; /* Reprend la hauteur de l'image */
    overflow: hidden;
}

.card img {
    /* Laisse la hauteur et l'objet-fit comme avant */
    width: 100%;
    height: 100%; /* Prend la hauteur du conteneur */
    object-fit: cover;
}

.card .logo_ot {
    position: absolute;
    top: 10px; /* Marge en haut */
    right: 10px; /* Marge à droite */
    z-index: 10; /* Assurez-vous qu'il soit au-dessus de l'image */
    max-width: 80px; /* Taille maximale pour le logo */
    height: auto;
    background: rgba(255, 255, 255, 0.8); /* Fond léger pour le faire ressortir */
    padding: 5px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Mise à jour de .card pour qu'elle n'ait plus de hauteur fixe d'image */
/* Note: Il se peut que vous deviez ajuster les propriétés du .card si la nouvelle structure cause des problèmes. */
.card {
    /* ... vos styles existants ... */
    overflow: hidden;
    /* Retirez la hauteur de 350px si elle était appliquée à .card si ce n'est pas le cas pour vous */
}