* { margin: 0; padding: 0; box-sizing: border-box; }
            body {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 13px;
                color: #00109d;
                background: #fff8dc;
                line-height: 1.6;
            }
            a { text-decoration: none; color: inherit; }
            ul { list-style: none; }

            /* ===== HEADER STICKY AVEC LOGO ===== */
            #en_tete {
                width: 100%;
                height: 70px;
                background: linear-gradient(135deg, #00109d 0%, #204D9B 60%, #4a7fd4 100%);
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 25px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.25);
                position: sticky;
                top: 0;
                z-index: 101;
                overflow: hidden;
            }
            #en_tete::after {
                content: "";
                position: absolute;
                right: -50px;
                top: -20px;
                width: 300px;
                height: 120px;
                background: rgba(248, 241, 120, 0.15);
                transform: rotate(-15deg);
                border-radius: 20px;
            }
            .logo-header {
                display: flex;
                align-items: center;
                gap: 12px;
                z-index: 1;
            }
            .logo-header img {
                height: 50px;
                width: auto;
                border-radius: 8px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            }
            .logo-site {
                font-family: "Arial Black", Arial, sans-serif;
                font-size: 24px;
                color: #F8F178;
                text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
                letter-spacing: 2px;
            }
            .sous-titre {
                font-size: 11px;
                color: #ffc74f;
                font-weight: normal;
                letter-spacing: 1px;
            }

            /* ===== MENU PRINCIPAL STICKY SOUS LE HEADER ===== */
            #menu_principal {
                background: #F8F178;
                border-bottom: 3px solid #DBB10D;
                border-top: 1px solid #DBB10D;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                position: sticky;
                top: 70px;
                z-index: 100;
            }

            /* ===== BOUTON HAMBURGER PRINCIPAL ===== */
            .menu-toggle {
                display: none;
                background: transparent;
                border: 2px solid #00109d;
                border-radius: 4px;
                color: #00109d;
                font-size: 22px;
                line-height: 1;
                cursor: pointer;
                padding: 4px 10px;
                position: absolute;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
                z-index: 2;
                transition: all 0.25s ease;
            }
            .menu-toggle:hover {
                background: #00109d;
                color: #F8F178;
            }
            .menu-toggle.active {
                background: #00109d;
                color: #F8F178;
                transform: translateY(-50%) rotate(90deg);
            }
            #menu_principal ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                max-width: 1100px;
                margin: 0 auto;
            }
            #menu_principal li { position: relative; }
            #menu_principal li a {
                display: block;
                padding: 14px 16px;
                color: #00109d;
                font-weight: bold;
                font-size: 12px;
                border-right: 1px dotted #CCCACA;
                transition: all 0.25s ease;
                white-space: nowrap;
            }
            #menu_principal li:last-child a { border-right: none; }
            #menu_principal li a:hover {
                background-color: #ffc74f;
                color: #000;
            }
            #menu_principal li a.active {
                background-color: #EDFA8F;
                color: #676A38;
                border-bottom: 3px solid #AE2604;
            }

            /* ===== LAYOUT ===== */
            #conteneur_global {
                display: flex;
                max-width: 1100px;
                margin: 25px auto;
                gap: 25px;
                padding: 0 20px;
                min-height: 500px;
            }

            /* ===== MENU GAUCHE ===== */
            #menu_gauche {
                width: 220px;
                flex-shrink: 0;
            }
            .bloc_menu {
                background: #F8F178;
                border: 2px solid #DBB10D;
                border-radius: 10px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.15);
                overflow: hidden;
                margin-bottom: 20px;
            }
            .bloc_menu h2 {
                background: linear-gradient(180deg, #DBB10D 0%, #F8F178 100%);
                color: #00109d;
                font-family: Arial, "Arial Black", sans-serif;
                font-size: 15px;
                padding: 12px 15px;
                text-align: left;
                border-bottom: 2px solid #DBB10D;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            /* ===== BOUTON HAMBURGER RUBRIQUES ===== */
            .menu-toggle-rubrique {
                display: none;
                background: transparent;
                border: 2px solid #00109d;
                border-radius: 4px;
                color: #00109d;
                font-size: 18px;
                line-height: 1;
                cursor: pointer;
                padding: 2px 8px;
                transition: all 0.25s ease;
            }
            .menu-toggle-rubrique:hover {
                background: #00109d;
                color: #F8F178;
            }
            .menu-toggle-rubrique.active {
                background: #00109d;
                color: #F8F178;
                transform: rotate(90deg);
            }
            .bloc_menu ul { padding: 8px 0; }
            .bloc_menu li a {
                display: block;
                padding: 10px 18px;
                color: #535252;
                font-size: 12px;
                border-bottom: 1px dotted #CCCACA;
                transition: all 0.2s ease;
                position: relative;
                padding-left: 32px;
            }
            .bloc_menu li a::before {
                content: "\25B8";
                position: absolute;
                left: 14px;
                color: #DBB10D;
                font-size: 10px;
            }
            .bloc_menu li a:hover {
                background-color: #ffc74f;
                color: #000;
                padding-left: 36px;
            }
            .bloc_menu li:last-child a { border-bottom: none; }

            /* ===== ZONE CONTENU ===== */
            #corps {
                flex: 1;
                background: #fff;
                border: 1px solid #e0d5a8;
                border-radius: 10px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                padding: 30px;
                min-height: 400px;
            }
            #corps h1 {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 22px;
                font-weight: normal;
                color: #204D9B;
                font-style: italic;
                margin-bottom: 25px;
                padding-bottom: 12px;
                border-bottom: 2px solid #F8F178;
            }
            #corps h2 {
                font-size: 16px;
                color: #00109d;
                margin: 20px 0 12px 0;
                font-weight: bold;
            }
            #corps p {
                text-align: justify;
                margin-bottom: 15px;
                color: #333;
                line-height: 1.7;
            }
            #corps ul {
                list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><circle cx="4" cy="4" r="3" fill="%23DBB10D"/></svg>');
                padding-left: 25px;
                margin-bottom: 15px;
            }
            #corps li { margin-bottom: 8px; color: #333; }

            /* ===== BOUTONS ===== */
            .btn {
                display: inline-block;
                padding: 8px 20px;
                border-radius: 6px;
                font-weight: bold;
                font-size: 12px;
                cursor: pointer;
                border: none;
                transition: all 0.2s;
                text-align: center;
                margin: 5px 5px 5px 0;
            }
            .btn-jaune {
                color: #00109d;
                border: solid 1px #DBB10D;
                background: linear-gradient(180deg, #F8F178, #DBB10D);
            }
            .btn-jaune:hover {
                background: linear-gradient(180deg, #ffc74f, #DBB10D);
                transform: translateY(-1px);
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            }
            .btn-bleu {
                color: #fff;
                border: solid 1px #0076a3;
                background: linear-gradient(180deg, #00adee, #0078a5);
            }
            .btn-bleu:hover {
                background: linear-gradient(180deg, #0095cc, #00678e);
                transform: translateY(-1px);
            }

            /* ===== CARTES ===== */
            .carte-info {
                background: linear-gradient(135deg, #fffbeb 0%, #F8F178 100%);
                border: 1px solid #DBB10D;
                border-radius: 8px;
                padding: 18px;
                margin-bottom: 20px;
                box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            }
            .carte-info h3 {
                color: #00109d;
                font-size: 14px;
                margin-bottom: 10px;
                border-bottom: 1px dotted #DBB10D;
                padding-bottom: 6px;
            }

            /* ===== PIED DE PAGE ===== */
            #pied_de_page {
                background: linear-gradient(180deg, #00109d, #0a1a5e);
                color: #F8F178;
                text-align: center;
                padding: 20px;
                margin-top: 40px;
                font-size: 11px;
                border-top: 3px solid #DBB10D;
            }
            #pied_de_page a { color: #ffc74f; text-decoration: underline; }

            /* ===== RESPONSIVE ===== */
            @media (max-width: 768px) {
                #conteneur_global {
                    flex-direction: column;
                    padding: 0 10px;
                    gap: 15px;
                }
                #menu_gauche { width: 100%; }
                #menu_principal {
                    display: flex;
                    flex-direction: column;
                    min-height: 48px;
                }
                .menu-toggle {
                    display: block;
                    align-self: flex-end;
                    margin: 10px 15px;
                    position: static;
                    transform: none;
                }
                .menu-toggle.active {
                    transform: rotate(90deg);
                }
                #menu_principal ul {
                    flex-direction: column;
                    width: 100%;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.35s ease-out, padding 0.35s ease;
                    padding: 0;
                }
                #menu_principal ul.active {
                    max-height: 600px;
                    padding: 8px 0;
                }
                #menu_principal li a {
                    border-right: none;
                    border-bottom: 1px dotted #CCCACA;
                    text-align: center;
                }
                .menu-toggle-rubrique { display: block; }
                .bloc_menu ul {
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.35s ease-out, padding 0.35s ease;
                    padding: 0;
                }
                .bloc_menu ul.active {
                    max-height: 800px;
                    padding: 8px 0;
                }
                #en_tete {
                    height: auto;
                    padding: 10px 15px;
                }
                .logo-header img { height: 40px; }
                .logo-site { font-size: 18px; }
                #corps { padding: 20px; }
            }

            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            #corps { animation: fadeIn 0.4s ease-out; }
            .bloc_menu { animation: fadeIn 0.3s ease-out; }