/* --------------------------------------------------------------
   layout.css - Réorganisé avec variables CSS
-------------------------------------------------------------- */


/* Elements principaux
------------------------------------------ */
body { 
    text-align: center; 
    background: var(--bg-body); 
    color: var(--text-main);
}

.page { 
    position: relative; 
    width: 960px; 
    max-width: 95%; 
    margin: 2em auto; 
    text-align: left; 
    background: var(--card-bg); /* Utilisation du blanc pur */
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}
.main { padding: 1.5em 0; }

.footer { 
    clear: both; 
    padding: 1em 0; 
    margin: 1em 0 0 0; 
    border-top: 1px solid var(--footer-border); 
}

.wrapper { clear: both; float: left; width: calc(70% - 2em); overflow: hidden; margin: 1em;}
.wrapper2 {    clear: both;
    float: left;
    width: calc(100% - 2em);
    overflow: hidden;
    margin: 1em;}
.content { min-height: 350px; }
.aside { float: right; width: 23.333%; overflow: hidden; } 
 
/* Entete et barre de navigation
------------------------------------------ */
.header { padding-bottom: 1.5em; }
.header .spip_logo_site { display: block; margin: 0; line-height: 1; font-weight: bold; }
.header .spip_logo_site,
.header .spip_logo_site a,
.header .spip_logo_site a:hover { background: transparent; text-decoration: none; color: var(--text-main); }
.header .spip_logo_site a:hover { color: var(--accent-color); }
.header .spip_logo_site a:hover img { opacity: 0.7; }
.header .spip_logo { margin-bottom: 0; }

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

.nav li { display: inline; }
.nav li a { 
    display: inline-block; 
    padding: 0.25em 0.5em; 
    margin: 0 0.25em 0.5em 0;
    border-radius: 0.25em; 
    text-decoration: none; 
    background: var(--nav-bg); 
    color: var(--primary-bg);
}

.nav li.on a,
.nav li a:focus,
.nav li a:hover,
.nav li a:active { 
    background: var(--primary-bg); 
    color: var(--white);
}

.footer .colophon { float: left; height: 40px; width: 70%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }
.footer .generator a:hover { color: var(--primary-hover); }

/* Gabarit d'impression
------------------------------------------ */
@media print {
    .page, .wrapper, .content { width: auto; }
    .nav, .arbo, .aside, .footer { display: none; }
}

/* Affichage sur petits ecrans 
------------------------------------------ */
@media (max-width: 767px) {
    body { width: 100%; padding: 0 20px; }
    .page { width: 100%; max-width: none; }
}
 
@media (max-width: 640px) {
    .wrapper, .content, .aside { width: calc(100% - 2em); }
    .content, .aside { clear: both; float: none; width: 100%; }
    .nav ul li a { float: none; border: 0; }
    .arbo { display: none; }
    .footer .colophon { width: auto; float: none; }
    .footer .generator { display: none; }
    table.fc-header td { display: block; text-align: left; }
}