/*! 
 * Framework CSS Universel 
 */

:root {
    --primary: #3aa4c0;          
    --secondary: #b91d47;         
    --bg-light: #ffffff;          
    --text-dark: #333333;
    --text-light: #ffffff;
    --text-on-primary: #ffffff;   
    --font-family: 'Open Sans', "Segoe UI", Arial, sans-serif; 
}

html, body {
    margin: 0; padding: 0; width: 100%;
    overflow-x: hidden;
    font-family: var(--font-family);
    background-color: var(--bg-light);
    color: var(--text-dark);
    font-size: 16px; line-height: 1.6;
}

* { box-sizing: border-box; }

.container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px; }

main.page-content { padding-top: 100px; padding-bottom: 100px; background: #ffffff; }

/* ==================================================================== */
/* NAVIGATION & FOOTER                                                  */
/* ==================================================================== */
.app-bar {
    background-color: var(--primary); color: var(--text-on-primary);
    min-height: 60px; position: fixed; left: 0; right: 0; z-index: 1000;
}
.app-bar.fixed-top { top: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.app-bar.fixed-bottom { bottom: 0; box-shadow: 0 -2px 4px rgba(0,0,0,0.1); }

.app-bar-content, .footer-content {
    display: flex; justify-content: space-between; align-items: center;
    min-height: 60px; flex-wrap: wrap; 
}

.branding {
    display: flex; align-items: center; font-size: 1.4rem;
    font-weight: bold; text-decoration: none; color: var(--text-on-primary);
}
.branding img { height: 28px; margin-right: 10px; }
.footer-content .branding { font-size: 0.95rem; font-weight: normal; }

/* AJOUT DU MARGIN: 0 POUR SUPPRIMER LE CADRE INVISIBLE */
.app-bar-menu { list-style: none; display: flex; gap: 15px; padding: 0; margin: 0; }
.app-bar-menu.menu-right { margin-left: auto; }
.app-bar-menu li a { color: var(--text-on-primary); text-decoration: none; font-size: 0.95rem; }
.app-bar-menu li a:hover { text-decoration: underline; }

#heure { font-size: 0.95rem; font-weight: normal; color: #ffffff; opacity: 0.9; }

/* ==================================================================== */
/* UTILITAIRES & STRUCTURE                                              */
/* ==================================================================== */
.align-center { text-align: center; }
.padding20 { padding: 20px; }
.padding30 { padding: 30px; }
.no-margin-top { display: inline-block; margin: 0; }
.back-link { text-decoration: none; color: inherit; }

#page-index { padding-top: 0px; }

.main-title { font-size: 4.5rem; font-weight: bold; color: var(--primary); line-height: 1; margin-bottom: 15px; }
.section-title { font-size: 1.8rem; color: var(--text-dark); margin-bottom: 20px; display: inline-block; }

.main-divider { border: 0; height: 2px; background-color: var(--secondary); margin: 20px 0; }

.grid .row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 20px;}
.grid .cells3 .cell { flex: 1; min-width: 300px; }

/* ==================================================================== */
/* LISTE HISTOIRE & EMOJIS                                              */
/* ==================================================================== */
.history-list { list-style: none; padding: 0; text-align: left; margin: 0 auto; max-width: 600px; }
.history-divider { border: 0; height: 2px; background-color: #00aff0; margin: 5px 0 15px 0; width: 100%; }

.emoji-number { display: inline-block; margin-right: 8px; }
.emoji-icon { display: inline-block; font-size: 1.5rem; color: #647687; }

/* ==================================================================== */
/* MENTIONS LEGALES                                                     */
/* ==================================================================== */
.mentions-legales {
    text-align: justify;
    color: #444;
    background: #f9f9f9;
    padding: 25px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.mentions-legales a { color: var(--primary); }
.mentions-date { margin-top: 20px; font-size: 0.9em; color: #777; }

/* ==================================================================== */
/* PANNEAUX & OMBRES                                                    */
/* ==================================================================== */
.text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,.4); }

.panel {
    background-color: #ffffff;
    border-radius: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.panel .heading {
    padding: 15px;
    color: #ffffff;
    background-color: var(--primary);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 4px 4px 0 0;
}
.panel .heading .icon { font-size: 1.5rem; }
.panel .content { padding: 15px; font-size: 0.9rem; text-align: justify; }

.block-shadow-danger { box-shadow: 0 0 25px 0 rgba(128,0,0,.7); }
.block-shadow-warning { box-shadow: 0 0 25px 0 rgba(255,165,0,.7); }
.block-shadow-success { box-shadow: 0 0 25px 0 rgba(0,128,0,.7); }
.block-shadow-info { box-shadow: 0 0 25px 0 rgba(89,205,226,.7); }
.block-shadow-impact { box-shadow: 0 0 20px 0 rgba(0,0,0,.7); }

/* ==================================================================== */
/* ANIMATIONS                                                           */
/* ==================================================================== */
@keyframes ani-heartbeat {
    0%, 100% { transform: scale(1.1); }
    50% { transform: scale(0.8); }
}
.ani-heartbeat { animation: ani-heartbeat 2s linear infinite; display: inline-block; }

@keyframes ani-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}
.ani-flash { animation: ani-flash 2s ease infinite; display: inline-block; }

@keyframes ani-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}
.ani-bounce { animation: ani-bounce 2s ease infinite; }

/* ==================================================================== */
/* RESPONSIVE (PETITS ECRANS)                                           */
/* ==================================================================== */
@media screen and (max-width: 768px) {
    .main-title { font-size: 2.5rem; }
    .grid .cells3 .cell { min-width: 100%; }
    
    /* En-tête : masquer la date et l'heure */
    .app-bar-content .menu-right { display: none; }
    .app-bar-content { justify-content: center; }
    
    /* Pied de page : réduction maximale sans contrainte de hauteur */
    .app-bar.fixed-bottom { min-height: auto; }
    .footer-content { 
        flex-direction: column; 
        justify-content: center; 
        padding: 5px 0; 
        gap: 0; 
        min-height: auto; 
    }
    .footer-content .branding { font-size: 0.75rem; line-height: 1; }
    .footer-content .app-bar-menu li a { font-size: 0.75rem; line-height: 1; }
    
    /* Ajustement de l'espace central */
    main.page-content { padding-top: 100px; padding-bottom: 50px; }
}