body{
    background: image-set(url('images/body_back.png') 1x, url('images/body_back@x2.png') 2x) repeat-x top center #263652;
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#container{
    width: 930px;
    margin: 0 auto;
    background: image-set(url('images/container_back.png') 1x, url('images/container_back@x2.png') 2x) repeat-y 170px 0 transparent;
}

#container > header{
    height: 250px;
    background: image-set(url('images/page_back.png') 1x, url('images/page_back@x2.png') 2x) repeat-x top left transparent;
}

    #container > header h1{
        position: absolute;
        font-size: 2.4375rem;
        letter-spacing: -3px;
        margin: 40px 0 0 170px;
        z-index: 10;
        width: 300px;
        line-height: 34px;
    }
        #container h1 a{
            color: #1a4051;
            text-shadow: 2px 2px 0 #fff;
        }

#mobile-menu-toggle,
#mobile-menu-panel {
    display: none;
}

#menu{
    width: 593px; height: 32px;
    padding: 0 0 23px;
    margin: -70px 0 0 169px;
    background: image-set(url('images/menu_top.png') 1x, url('images/menu_top@x2.png') 2x) no-repeat bottom left transparent;
}
    #menu h3 {
        display: none;
    }
    
    #menu .placeholder {
        height: 32px;
    }
    
    #menu-top-wrapper {
        display: flex;
        height: 28px;
        overflow: hidden;
    }
    
    #menu ul {
        display: flex;
    }
    
    #menu li{
        font-size: 0.6875rem;
        background: #5f899c;
        border-radius: 6px 6px 0 0;
        margin: 0 0 0 7px;
    }
        #menu a{
            display: block;
            padding: 7px;
            color: #fff; text-shadow: 1px 1px 0 #27414d;
            border-radius: 6px 6px 0 0;
        }
        #menu a:hover, #menu a.active{ background: #7198aa }


#header-image{
    width: 592px; height: 130px;
    position: absolute;
    margin: 0 0 0 170px;
    top: 345px;
}

#content{
    position: relative;
    margin: 0 0 0 0;
    font-size: 0.6875rem;
}

#content .inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 25px;
}
    
article{
    order: 1;
    width: 592px;
    color: #3a3c3f;
    text-align: justify;
    font-size: 0.6875rem;
}

    header{
        font-size: 1.8125rem;
        letter-spacing: -1px;
        font-size: 2.5rem;
        color: #d15490;
    }
    
    article section header{
        margin: 0 0 170px 0;
        background: image-set(url('images/page_title.png') 1x, url('images/page_title@x2.png') 2x) no-repeat bottom left transparent;
    }
    
    article section header hgroup h1{
        font-size: 1.8125rem;
        color: #263652;
        border: none;
        padding: 8px 10px 50px;
        text-align: right;
    }
    
    article section h1, article section h2{
        font-size: 1.1875rem;
        color: #d15490;
        padding: 12px 4px;
        border-bottom: 1px solid #f8d7e8;
        margin: 0 0 10px 0;
    }

    article h3{
        font-size: 0.875rem;
        font-weight: bold;
        padding: 5px;
        border-bottom: 1px dotted #602741;
        color: #602741;
    }

    article p, article > div{
        line-height: 1.50;
        padding: 10px 15px;
    }
    
    article a{
        color: #1f2327;
        border-bottom: 1px solid #f8d7e8;
    }
    
    article table{
        border: 1px solid #d15490;
        width: 100%;
        border-width: 1px 0 0 1px;
        margin: 0 0 15px 0;
    }
        article table td{
            padding: 4px;
            border: 1px solid #d15490;
            border-width: 0 1px 1px 0;
        }

    article ul, article ol{
        padding: 5px 0 5px 20px;
    }
        article ul li{ padding: 2px 0; list-style-type: disc; }
        article ol li{ padding: 1px 0; list-style-type: decimal; }
    
    article dl{
        line-height: 1.50;
    }   
        article dt{ color: #d15490; }
        article dd{ padding: 5px 0 5px 20px; }
    
    article blockquote{
        border: 1px solid #d15490;
        border-width: 1px 1px 1px 5px;
        line-height: 1.50;
        padding: 10px;
        margin: 10px 0;
    }
    
    article hr {
        background-color: #f8d7e8;
    }
    
#content aside{
    margin-top: 50px;
    padding: 70px 0 0 0;
    max-width: 145px;
    background: image-set(url('images/bubbles.png') 1x, url('images/bubbles@x2.png') 2x) no-repeat top left transparent;
}
    aside .placeholder {
        width: 145px;
    }

    nav > div{
        padding: 0 0 15px 0; margin: 0 0 15px 0;
        background: image-set(url('images/menu_bottom.png') 1x, url('images/menu_bottom@x2.png') 2x) no-repeat bottom left transparent;
    }
    #content aside h3{
        width: 135px; height: 24px;
        color: #2b3c58; text-shadow: 1px 1px 0 #fff;
        font-size: 0.6875rem;
        padding: 10px 0 4px 10px;
        background: image-set(url('images/menu_title.png') 1x, url('images/menu_title@x2.png') 2x) no-repeat top left #edf0f4;
    }
    
    #content aside .menu-content, #content aside .block > ul{
        background: image-set(url('images/menu_back.png') 1x, url('images/menu_back@x2.png') 2x) repeat-y bottom left transparent;
    }
        aside .block > ul{ width: 145px; }
        .menu-content{ width: 125px; padding: 15px 10px; color: #8a9cb5; }
        .menu-content input[type="text"],
        .menu-content input[type="email"]{
            width: 85px;
        }
    #content aside .block > ul > li{
        background: image-set(url('images/menu_item.png') 1x, url('images/menu_item@x2.png') 2x) no-repeat 0 6px transparent;
        padding: 3px 15px 10px 25px;
        margin: 0 0 0 -6px;
    }
    
    #content aside a{ color: #8a9cb5; }

#navigation-main{
    order: 0;
}
    
#navigation-sec{
    order: 2;
}

#footer{
    width: 730px;
    padding: 120px 0 50px 150px;
    font-size: 0.625rem;
    line-height: 1.25;
    margin: 0 auto;
    background: image-set(url('images/footer_back.png') 1x, url('images/footer_back@x2.png') 2x) no-repeat -17px 0 transparent;
}
    #footer, #footer a{
        color: #7392ba
    }

/* Editor debugs */
#header-icon-edit {
    margin: 370px 0 0 190px;
}

/* --- Styles Mobile (Breakpoint) --- */
@media (max-width: 950px) {
    body {
        /* Simplifie le fond pour éviter les problèmes d'affichage/performance sur mobile */
        background: #263652; 
    }

    #container {
        width: 100%;
        margin: 0;
        padding: 0;
        background: none; /* Supprime l'image de fond verticale */
    }

    #container > header {
        height: auto;
        padding: 20px 0;
        background: none; /* Supprime l'image de fond d'en-tête */
    }

	#container h1 a {
		color: #fff;
  		text-shadow: 2px 2px 0 #666;
	}

    #container > header h1 {
        position: relative;
        font-size: 1.8rem;
        letter-spacing: normal;
        margin: 0;
        width: 100%;
        text-align: center;
        line-height: 1.2;
    }
    
    #header-image {
        width: 100%;
        position: relative;
        margin: 10px 0;
        top: auto;
    }
    
    #menu,
    #navigation-main,
    #navigation-sec {
        display: none;
    }

	#content{
		background: #b1c2d9;
	}

	article p, article > div {
		padding: 10px 0;
	}

    /* Mobile Menu Toggle Button */
    #mobile-menu-toggle {
        display: block;
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 1001;
        width: 40px;
        height: 40px;
        background: #5f899c; /* Couleur du menu principal */
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }

    #mobile-menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: #fff;
        margin: 5px auto;
        transition: transform 0.3s, opacity 0.3s;
    }

    body.nav-open #mobile-menu-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    body.nav-open #mobile-menu-toggle span:nth-child(2) {
        opacity: 0;
    }
    body.nav-open #mobile-menu-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile Menu Panel */
    #mobile-menu-panel {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #e3e6e9; /* Fond clair pour le menu */
        z-index: 1000;
        overflow-y: auto;
        padding: 70px 0 20px;
        box-sizing: border-box;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    body.nav-open #mobile-menu-panel {
        transform: translateX(0);
    }

    body.nav-open {
        overflow: hidden;
    }

    #content .inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 10px;
    }

    article {
        width: auto !important;
        padding: 10px;
        order: 0; 
        text-align: left;
    }
    
    article section header{
        margin: 0 0 20px 0;
        background: none; /* Supprime l'image de fond */
    }
    
    article section header hgroup h1{
        padding: 8px 0;
        text-align: left;
    }
    
    /* Styles pour le menu mobile (réorganisation des blocs) */
    #mobile-menu-panel .block { margin-bottom: 20px; width: auto; padding: 0; }
    #mobile-menu-panel .block h3 {
        width: auto; height: auto; padding: 10px; margin: 0;
        font-size: 1rem;
        color: #fff;
        background: #263652; /* Couleur de fond du body/header */
        text-shadow: none;
    }
    #mobile-menu-panel .block > ul { padding: 0; width: auto; background: #fff; }
    #mobile-menu-panel .block > ul > li {
        padding: 10px;
        margin: 0;
        background: none;
        border-bottom: 1px solid #ccc;
    }
    #mobile-menu-panel a {
        color: #1a4051;
        display: block;
    }

    #footer {
        width: 100%;
        padding: 20px 0;
        margin: 0;
        background: none;
        text-align: center;
    }
}