/* ============================================================
   styles.css - VERSION RESPONSIVE 2026
   ============================================================ */

@font-face {
    font-family: 'Montserrat';
    src: url('./font/Montserrat-Regular.woff2') format('woff2');
    font-display: swap;
}

/* ── Reset minimal ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background-color: #F4F4F4;
    background-image: url(images/fond.gif);
    font-family: 'Montserrat', sans-serif;
    /* Bloquer l'auto-ajustement de police en landscape mobile */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ── Classes texte ────────────────────────────────────────── */
.small_blanc  { font-family: 'Montserrat'; font-size: 13px; color: #FFFFFF; }
.small_rose   { font-family: arial, 'sans serif'; font-size: 13px; color: #F6CCF0; }
.small_noir   { font-family: 'Montserrat'; font-size: 13px; color: #000000; }
.medium_blanc { font-family: 'Montserrat'; font-size: 15px; color: #FFFFFF; }
.medium_rose  { font-family: arial, 'sans serif'; font-size: 15px; color: #F6CCF0; }
.medium_noir  { font-family: 'Montserrat'; font-size: 15px; color: #000000; }
.big_blanc    { font-family: 'Montserrat'; font-size: 18px; font-weight: bold; color: #FFFFFF; }
.big_rose     { font-family: arial, 'sans serif'; font-size: 18px; font-weight: bold; color: #F6CCF0; }
.big_noir     { font-family: 'Montserrat'; font-size: 18px; font-weight: bold; color: #000000; }

a:link    { color: #95cafb; text-decoration: none; }
a:visited { color: #ADD8EE; text-decoration: none; }
a:hover   { color: #ADD8FF; text-decoration: underline; }
a:active  { color: #ADD8EE; text-decoration: underline; }

/* ── Structure principale (Flexbox) ───────────────────────── */
.page-wrapper {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

/* ── Sidebar (menu gauche) ────────────────────────────────── */
.sidebar {
    width: 290px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sidebar .menu-img  { width: 290px; display: block; }
.sidebar .menu-logo { width: 290px; display: block; }
.sidebar a img      { display: block; }

.menu-comments { width: 290px; text-align: left; padding: 4px 6px; }
.menu-comments table { margin: 0 auto; }

/* Bouton fermer (masqué sur desktop) */
.menu-close { display: none; }

/* Overlay mobile (masqué sur desktop) */
.menu-overlay { display: none; }

/* ── Barre mobile (masquée sur desktop) ───────────────────── */
.mobile-header { display: none; }

/* ── Contenu principal ────────────────────────────────────── */
.content-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.content-header {
    background-color: #044A80;
    position: relative;
}

.content-header-inner {
    display: flex;
    align-items: center;
    padding: 6px 12px 6px 40px;
    gap: 12px;
    min-height: 90px;
}

.content-header-text {
    flex: 1;
}

.banner-fifa {
    /* taille naturelle, collée à droite */
    width: 479px;
    height: 90px;
    display: block;
    flex-shrink: 0;
    margin-left: auto;
}

/* Arrondi décoratif bas-gauche */
.banner-strip {
    position: absolute;
    bottom: -33px;
    left: 0;
    width: 30px;
    height: 33px;
    display: block;
}

.content-inner {
    padding: 36px 8px 8px 12px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Tables de données : fluid ────────────────────────────── */
table {
    max-width: 100%;
}
/* Tables avec width="100%" explicite → vraiment 100% */
table[width="100%"] {
    width: 100%;
}

/* ── Hamburger (masqué sur desktop) ───────────────────────── */
.hamburger {
    display: none;
    background: #044A80;
    color: #fff;
    border: none;
    font-size: 24px;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE — Mobile (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* Barre du haut visible */
    .mobile-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background-color: #044A80;
        position: sticky;
        top: 0;
        z-index: 200;
        width: 100%;
    }

    .mobile-logo {
        height: 44px;
        width: auto;
        flex: 1;
    }

    .mobile-user {
        font-size: 9pt;
        white-space: nowrap;
    }

    .hamburger { display: block; }

    /* Page : colonne au lieu de ligne */
    .page-wrapper {
        flex-direction: column;
    }

    /* Sidebar : panneau latéral coulissant */
    .sidebar {
        position: fixed;
        top: 0;
        left: -315px;
        width: 305px;
        height: 100vh;
        overflow-y: auto;
        z-index: 300;
        background: #000;
        transition: left 0.25s ease;
        /* Aligner les images */
        align-items: flex-start;
    }

    .sidebar.open { left: 0; }

    /* Bouton fermer visible sur mobile */
    .menu-close {
        display: block;
        background: transparent;
        color: #fff;
        border: none;
        font-size: 20px;
        padding: 10px 14px;
        cursor: pointer;
        align-self: flex-end;
    }

    /* Overlay sombre derrière le menu */
    .menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 250;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .menu-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

    /* Bande du haut desktop masquée */
    .content-header { display: none; }

    /* Contenu prend toute la largeur */
    .content-area { width: 100%; }
    .content-inner { padding: 6px; }

    /* Tables : scroll horizontal si trop larges */
    .content-inner { overflow-x: auto; }

    /* Drapeaux plus petits */
    img[width="20"] { width: 16px !important; }
}