/* --- Styles de base --- */
body { font-family: Arial, sans-serif; margin: 0; padding-top: 140px; background: #f4f4f4; }

header {
    position: fixed; top: 0; left: 0; width: 100%;
    background: white;
    display: flex;
    flex-direction: column; /* Empilement des 3 lignes */
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Ligne 1 : Fond blanc, blocs bleus espacés de 3px */
#ligne-info {
    display: flex;
    justify-content: center; 
    flex-wrap: wrap;       /* Permet de passer à la ligne si trop large */
    background: white;       
    padding: 5px;
    gap: 3px;                
}

.entete {
    background-color: #00779e; 
    color: white;
    padding: 5px 10px;      /* Un peu moins de rembourrage sur mobile */
    font-size: 11px;        /* Texte un peu plus petit sur mobile */
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;    /* Empêche le texte de se couper à l'intérieur d'un bloc */
    text-align: center;
}

/* Ligne 2 : Logo centré */
#ligne-logo {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee; /* Optionnel : fine séparation */
	background: #f9f9f9;
}
.logo img { height: 80px; }

/* Ligne 3 : Menu centré */
#ligne-menu {
    display: flex;
    justify-content: center;
align-items: center;
    background: #f9f9f9; 
    padding: 10px 0;
}


nav a {
    color: #333;
    text-decoration: none;
    margin: 0 15px;
    font-size: 15px;
    font-weight: bold;
}
nav a:hover { color: #00779e; }





/* --- Conteneur Central --- */
.container { max-width: 900px; margin: 20px auto; padding: 0 15px; }

/* --- Intro avec Mode Edition --- */
.intro-section { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; position: relative; }
#intro-text { line-height: 1.2; font-size:2em;text-align:center;}

#Ligne_christine_bertin {
    display: flex;
    flex-direction: row;      /* Côte à côte par défaut */
    flex-wrap: wrap;          /* Passe à la ligne si pas assez de place */
    align-items: center;      /* Aligne verticalement les centres des 3 blocs */
    justify-content: center;  /* Centre l'ensemble horizontalement */
    gap: 20px;                /* Espace entre les blocs */
    padding: 20px;
    background: white;
}

#bloc_bertin1 {
    color: #00779e;
    font-size: 1.2em;
    font-weight: bold;
    /* Empêche le texte de se couper sur deux lignes trop vite */
    white-space: nowrap; 
}

#bloc_bertin2 {
    display: flex;
    justify-content: center;
    /* Le bloc ne prend que la largeur de l'image */
    flex: 0 1 auto; 
}

#bloc_bertin2 img {
    max-width: 180px; /* Taille adaptée pour tenir côte à côte */
    height: auto;
}

#bloc_bertin3 {
    display: flex;
    justify-content: center;
    flex: 0 1 auto;
}

#bloc_bertin3 img {
    max-width: 200px; /* Ajustez la taille de la photo pour l'alignement */
    height: auto;
    border-radius: 8px;
}

#admin-login i {
    font-size: 1.2em; /* Rend l'engrenage légèrement plus grand */
    vertical-align: middle;
}

#ligne-menu a:hover #admin-login i {
    color: #00779e; /* Change la couleur de l'engrenage au survol */
}

/* Optionnel : Ajustement pour les petits mobiles */
@media (max-width: 600px) {
    #Ligne_christine_bertin {
        flex-direction: column; /* On repasse en colonne sur petit écran */
        text-align: center;
    }
}





.edit-btn { cursor: pointer; color: #3498db; font-size: 12px; text-decoration: underline; }

.bleu {
    color: #00779e;
    font-weight: bold;
}
.verte{color:green;font-weight: bold;}
.gros {
    font-size: 1.5em; /* 2em était peut-être trop grand pour tenir sur une ligne */
    display: inline-block;
}
.bloc_action {
    display: block !important;
    margin-bottom: 30px !important; /* Augmenté pour voir la différence */
    padding-bottom: 5px;
    line-height: 1.6; /* Améliore la lisibilité */
    clear: both;
}





/* --- Blocs de contenu (Les Flashcards / News) --- */
.card { background: white; border-radius: 8px; overflow: hidden; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.card-content { padding: 20px; }
.card img { width: 100%; height: auto; display: block; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.card h2 { margin-top: 0; color: #2c3e50; }
.links { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
.btn-link { 
	display: inline-block; padding: 8px 15px; background: #3498db; 
	color: white; text-decoration: none; border-radius: 4px; margin-right: 10px; font-size: 13px;
}


article.action {
    /* Dégradé orange : du haut vers le bas */
    background: linear-gradient(135deg, #ff9a44 0%, #ff6a00 100%);
    
    /* On arrondit les angles pour un look moderne */
    border-radius: 12px;
    
    /* Marges internes pour que le texte ne touche pas les bords */
    padding: 20px;
    
    /* Ombre légère pour donner de la profondeur */
    box-shadow: 0 4px 15px rgba(255, 106, 0, 0.3);
    
    /* Couleur du texte (blanc pour contraster avec l'orange) */
    color: white;
    
    /* Transition fluide si vous ajoutez un effet au survol */
    transition: transform 0.3s ease;
    
    /* Pour s'assurer qu'il se comporte comme un bloc */
    display: block;
    margin-bottom: 20px;
}

/* Effet au survol (optionnel) */
article.action:hover {
    transform: translateY(-5px);
    background: linear-gradient(135deg, #ff8c2d 0%, #e65c00 100%);
}


article.info {
    /* Dégradé orange : du haut vers le bas */
    background: linear-gradient(135deg, #0099cc 0%, #00779e 100%);
    
    /* On arrondit les angles pour un look moderne */
    border-radius: 12px;
    
    /* Marges internes pour que le texte ne touche pas les bords */
    padding: 20px;
    
    /* Ombre légère pour donner de la profondeur */
    box-shadow: 0 4px 15px rgba(255, 106, 0, 0.3);
    
    /* Couleur du texte (blanc pour contraster avec l'orange) */
    color: white;
    
    /* Transition fluide si vous ajoutez un effet au survol */
    transition: transform 0.3s ease;
    
    /* Pour s'assurer qu'il se comporte comme un bloc */
    display: block;
    margin-bottom: 20px;
}

/* Effet au survol adapté au bleu */
article.info:hover {
    /* On décale légèrement vers le haut */
    transform: translateY(-5px);
    
    /* On utilise un bleu légèrement plus clair ou plus saturé pour l'effet "éclairé" */
    background: linear-gradient(135deg, #00aff0 0%, #00779e 100%);
    
    /* On renforce un peu l'ombre pour accentuer l'effet de lévitation */
    box-shadow: 0 8px 20px rgba(0, 119, 158, 0.4);
    
    /* Transition fluide (assurez-vous de l'avoir aussi sur l'élément de base) */
    transition: all 0.3s ease;
}



article.card {
    position: relative !important; /* Indispensable pour le placement du bouton */
}

.admin-delete-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999; /* Force le bouton à passer devant les images/vidéos */
}

.delete-block-btn {
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    /*display: flex;*/
    align-items: center;
    justify-content: center;
}

/* Si le corps de la page contient le bandeau admin, on décale tout vers le bas */
body.admin-logged {
    /* Ajustez la valeur (50px, 60px...) selon la hauteur réelle de votre bandeau */
    padding-top: 220px; 
}

/* On s'assure que les cartes ne soient pas masquées par d'autres éléments fixes */
article.card {
    scroll-margin-top: 80px; /* Utile si vous utilisez des ancres */
}

.fa-copy, .fa-trash, .fa-check {
    transition: all 0.2s ease;
    transform: scale(1);
}

.fa-copy:active {
    transform: scale(1.3); /* Effet de pulsation au clic */
}

#toolbar-admin button {
    background: white; border: 1px solid #ccc; padding: 5px 10px; 
    cursor: pointer; border-radius: 3px; font-size: 13px;
}
#toolbar-admin button:hover { background: #e8e8e8; }


b.verte  { color: #27ae60; }
b.bleu   { color: #3498db; }
b.rouge  { color: #e74c3c; }
b.orange { color: #f39c12; }

/* Optionnel : style pour la toolbar mobile */
#toolbar-admin button {
    min-width: 30px;
    height: 30px;
    padding: 2px 8px;
    font-family: serif;
    font-size: 16px;
}

.beer-slider {
    margin: 20px auto;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.beer-slider img {
    width: 100%;
    height: auto;
    display: block;
}

.beer-slider, .beer-slider * {
    /* Empêche le comportement de scroll par défaut du navigateur sur le slider */
    touch-action: none; 
    /* Empêche la sélection de texte pendant qu'on glisse */
    user-select: none;
    -webkit-user-drag: none;
}

/* On s'assure que le bouton du curseur est assez gros pour un doigt */
.beer-handle {
    width: 44px !important; /* Taille minimale recommandée pour le tactile */
    height: 44px !important;
    z-index: 10;
}




/* Style global de l'accordéon */
details.mon-accordeon {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fdfdfd;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

/* Style du titre (la partie cliquable) */
details.mon-accordeon summary {
    padding: 12px 15px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    color: #2c3e50;
    list-style: none; /* Cache la flèche par défaut sur certains navigateurs */
}

/* On ajoute une petite flèche personnalisée avant le titre */
details.mon-accordeon summary::-webkit-details-marker {
    display: none;
}

details.mon-accordeon summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 10px;
    transition: transform 0.2s;
    font-size: 0.8rem;
    color: #3498db;
}

/* Rotation de la flèche quand l'accordéon est ouvert */
details[open].mon-accordeon summary::before {
    transform: rotate(90deg);
}

/* Style du contenu caché */
.accordeon-content {
    padding: 3px 15px 3px 15px;
    border-top: 1px solid #eee;
    background: #fff;
    line-height: 1.6;
}

/* Effet au survol */
details.mon-accordeon:hover {
    border-color: #3498db;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.accordeon-content p{margin-top:3px;}


/* S'assurer que la lightbox est visible et au-dessus de tout */
.lum-lightbox {
    z-index: 99999 !important;
}

/* Forcer l'affichage du bouton de fermeture */
.lum-close-button {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 32px;
    height: 32px;
    opacity: 0.6;
    background-color: #000; /* Fond noir pour bien voir la croix */
    border-radius: 50%;
    z-index: 100000 !important;
}

.lum-close-button:hover {
    opacity: 1;
}

/* Si la croix SVG ne s'affiche toujours pas, on en dessine une en CSS */
.lum-close-button::after, .lum-close-button::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 2px;
    background-color: #fff;
    left: 15px;
    top: 8px;
}
.lum-close-button::after { transform: rotate(45deg); }
.lum-close-button::before { transform: rotate(-45deg); }








.compteur-box {
    background: #fff;
    border-radius: 8px;
    margin: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.compteur-box:hover {
    transform: translateY(-5px);
}

.compteur-chiffre, .compteur-symbole {
    display: inline-block;
}







.slideshow-container {
    position: relative;
    margin: 20px auto; /* Centre le carrousel sur la page */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.my-slide img {
    display: block;
    height: auto;
    object-fit: cover; /* Garantit que les images remplissent bien la largeur imposée */
}

.prev-slide, .next-slide {
    z-index: 10; /* Toujours au-dessus des images */
}

.my-slide { display: none; }

/* Flèches gauche et droite */
.prev-slide, .next-slide {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.3);
}

.next-slide { right: 0; border-radius: 3px 0 0 3px; }
.prev-slide:hover, .next-slide:hover { background-color: rgba(0,0,0,0.8); }

/* Animation de fondu */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}








.tabs-container {
    margin: 20px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.tabs-menu {
    display: flex;
    background: #f1f1f1;
    border-bottom: 1px solid #ddd;
}

.tab-link {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px 20px;
    transition: 0.3s;
    font-weight: bold;
    color: #666;
}

.tab-link:hover {
    background-color: #e2e2e2;
}

.tab-link.active {
    background-color: #fff;
    color: #3498db;
    border-bottom: 2px solid #3498db;
}

.tabs-main-content {
    padding: 20px;
    background: #fff;
    min-height: 100px;
}

.tab-pane {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


.tabs-container {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tab-link {
    flex: 1; /* Les onglets se partagent équitablement la largeur */
    min-width: 120px; /* Mais ne deviennent pas trop petits */
    padding: 15px;
    border: none;
    background: #f8f9fa;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.tab-link.active {
    background: #fff;
    color: #3498db;
    border-bottom: 2px solid #3498db;
}

.tab-pane {
    line-height: 1.6;
    color: #333;
}





/* Conteneur de la grille : colonnes */
.row-grid {
    display: flex;
    flex-wrap: wrap; /* Permet le passage à la ligne */
}

/* Comportement sur mobile (écrans < 768px) */
@media (max-width: 768px) {
    .col-item {
        flex: 0 0 100% !important; /* On force chaque colonne à prendre toute la largeur */
        max-width: 100% !important;
    }
}





/* BOUTONS */
.custom-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
    filter: brightness(1.1); /* Éclaircit légèrement la couleur choisie */
    color: #ffffff !important;
}

.custom-btn:active {
    transform: translateY(0px);
}


/* TABLEAU */
/* Style pour alterner les couleurs de lignes (Zebra effect) */
table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

table tbody tr:hover {
    background-color: #f9f9f9;
}

th {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: #333;
}

/* Optimisation mobile */
.table-responsive {
    display: block;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}



.hl-yellow { background-color: yellow; padding: 2px 4px; border-radius: 4px; color: black;}
.hl-green { background-color: green; padding: 2px 4px; border-radius: 4px; color: black;}
.hl-blue { background-color: blue; padding: 2px 4px; border-radius: 4px; color: white;}
.hl-red { background-color: red; padding: 2px 4px; border-radius: 4px; color: white;}
.hl-black { background-color: black; padding: 2px 4px; border-radius: 4px; color: white;}
.hl-white { background-color: white; padding: 2px 4px; border-radius: 4px; color: black;}
.hl-purple { background-color: purple; padding: 2px 6px; border-radius: 4px;font-weight: bold; color: white; }


.txt-black { color: #000000; }
.txt-white { color: #ffffff; } 
.txt-yellow { color: #f1c40f; }
.txt-red { color: #e74c3c; }
.txt-orange { color: #e67e22; }
.txt-green { color: #2ecc71; }
.txt-blue { color: #3498db; }
.txt-purple { color: #9b59b6; }


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


.pdf-container iframe {
    max-width: 100%;
}




/* Style du bouton burger */
.burger-menu-btn {
    background-color: #333;
    color: white;
    padding: 1px 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
}

/* Conteneur du menu */
.burger-menu-container {
    position: relative;
    display: inline-block;
    text-align: left;
    margin: 10px 0;
}

/* Le menu lui-même (caché par défaut) */
.burger-menu-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 4px;
    padding: 10px 0;
}

/* Liens dans le menu */
.burger-menu-content a {
    color: black;
    padding: 5px 15px;
    text-decoration: none;
    display: block;
}

.burger-menu-content a:hover {
    background-color: #f1f1f1;
}

/* Gestion de l'indentation pour les sous-menus (parents) */
.menu-item-level-0 { font-weight: bold; }
.menu-item-level-1 { padding-left: 30px !important; font-size: 0.95rem; }
.menu-item-level-2 { padding-left: 50px !important; font-size: 0.9rem; }










.admin-top-nav {
    font-family: sans-serif;
    font-size: 0.9rem;
}

.btn-nav {
    display: inline-block;
    padding: 6px 15px;
    margin-left: 10px;
    background: #34495e;
    color: #ecf0f1;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
    border: 1px solid #5d6d7e;
}

.btn-nav:hover {
    background: #4e6a85;
    color: white;
}

.btn-new {
    background: #27ae60;
    border-color: #2ecc71;
}

.btn-new:hover {
    background: #219150;
}

.current-page-info i {
    margin-right: 8px;
    color: #3498db;
}






/* Adaptation Responsive pour la bannière */
@media (max-width: 768px) {
    .custom-banner {
        height: auto !important; /* La hauteur s'adapte au contenu sur mobile */
        padding: 40px 20px !important; /* On augmente le padding pour compenser */
    }

    .custom-banner h1 {
        font-size: 1.8rem !important; /* On réduit la taille du titre */
    }
}




.flex-container {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Empêche la modale elle-même de scroller */
}


#modal-value {
    /* Force la textarea à remplir le container flex */
    flex-grow: 1;
    min-height: 0;
    /* Important pour ne pas dépasser du conteneur */
    box-sizing: border-box; 
}


#container-input input, 
#container-input textarea {
    width: 100%!important;           /* Prend toute la largeur disponible */
/*height: 100%!important;*/
flex-grow: 1!important;
display: block;
    resize: both; /* Permet de redimensionner le textarea */
    min-height: 150px;
    box-sizing: border-box; /* Évite que les bordures ne fassent déborder l'élément */
    padding: 10px;         /* Espace interne pour plus de confort */
    margin-top: 10px;      /* Espace avec le titre */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;       /* Évite le zoom auto sur smartphone */
}


/* --- Responsive --- */
@media (max-width: 600px) {
	header { flex-direction: column; height: auto; padding: 10px; }
	body { padding-top: 100px; }
	nav { margin-top: 10px; }
}


/* En mode admin, on empêche l'interaction avec l'iframe pour autoriser le clic de modification */
.admin-active .video-container iframe {
    pointer-events: none; 
    cursor: pointer;
}

.video-container {
    cursor: pointer;
    border: 2px solid transparent;
}

.video-container:hover {
    border-color: #3498db;
}

/* Ajustement pour mobile uniquement (écran inférieur à 768px) */
@media (max-width: 768px) {
    body { 
        /* On augmente le padding pour pousser le texte sous le menu */
        padding-top: 180px !important; 
    }
	#intro-text { 
			font-size: 1.3em; /* On réduit la taille sur mobile */
			padding: 0 10px;  /* On ajoute une marge sur les côtés */
		}
}

/* Optimisation spécifique mobile pour la ligne 1 */
@media (max-width: 480px) {
    .entete {
        font-size: 10px;    /* Encore plus petit pour les mini écrans */
        padding: 4px 6px;
    }
}


/* Styles appliqués uniquement sur smartphone pour la modal sur smartphone*/
@media (max-width: 600px) {
    #toolbar-admin {
        max-height: 20vh; /* Limite la hauteur à 20% de l'écran */
        overflow-y: auto; /* Active le défilement vertical */
        flex-wrap: wrap;  /* Permet aux boutons de passer à la ligne */
        display: flex;    /* Assure le flexbox */
        align-content: flex-start; /* Aligne les lignes en haut */
        padding: 5px;
        box-sizing: border-box;
    }

    /* Optionnel : Ajuster légèrement la taille des boutons pour mieux les voir 
       quand il y a du défilement */
    #toolbar-admin button,
    #toolbar-admin select {
        padding: 6px 8px !important;
        font-size: 14px !important;
    }
}


/* 1. La Vidéo en arrière-plan fixe */
#flixel_player {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Important : pour que la vidéo remplisse l'écran sans se déformer */
    z-index: -1; /* Place la vidéo derrière tout le reste */
}

/* 2. Le Header au-dessus */
#main-header {
    position: fixed; /* Vous vouliez qu'il soit fixe */
    top: 0;
    width: 100%;
    z-index: 100; /* Plus haut que la vidéo */
    background: rgba(255, 255, 255, 0.1); /* Optionnel : fond semi-transparent pour la lisibilité */
    backdrop-filter: blur(5px); /* Optionnel : effet de flou sous le header */
}

/* 3. Le Container au-dessus */
.container {
    position: relative; /* Permet d'utiliser z-index */
    z-index: 10;
    /* Le padding sera géré par votre script JS pour ne pas être caché par le header */
}