/* ===========================================================
   AFEBAS – Noyau layout propre
   Fichier : css/afebas-clean.css
   Rôle    : Corriger et unifier le layout sans changer le HTML
   =========================================================== */

/* -------------------------------
   1. Base page
   ------------------------------- */

body {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, FreeSans, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #1f2933;
    background: #f3f5f9; /* on sort du fond "photo" Joomla */
}

/* On neutralise l’ancien système de fond (#body_bg) */
#body_bg {
    background: none !important;
    background-attachment: scroll !important;
}

/* -------------------------------
   2. Conteneurs principaux
   ------------------------------- */

/* Ancien couple #wrapper / #outside_wrapper : on les modernise */
#wrapper,
#outside_wrapper,
#content_wrapper,
.content_wrapper {
    width: 100% !important;
    max-width: 1200px;      /* largeur max cohérente PC */
    margin: 0 auto !important;
    float: none !important;
    display: block;
    clear: both;
}

/* On évite le display: table hérité */
#outside_wrapper {
    display: block !important;
    height: auto !important;
}

/* Top, header, zones supérieures */
#top,
#header {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    float: none;
}

/* -------------------------------
   3. Zones de contenu 80 / 100
   (on garde les IDs, on change juste la logique)
   ------------------------------- */

#content80,
#content100 {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    float: none !important;
    padding: 0 16px;
    box-sizing: border-box;
    overflow: visible; /* on enlève le "hidden" bloquant */
}

/* Si certaines pages utilisent #content80 + colonne latérale,
   la colonne prendra sa largeur, mais le flux reste propre. */

/* -------------------------------
   4. Typo de base (scopée léger)
   ------------------------------- */

.componentheading,
.contentheading,
h1, h2, h3 {
    color: #111827;
    font-weight: 600;
    margin-top: 0;
}

/* Anciennes couleurs de liens unifiées */
a {
    color: #1f6fd6;
    text-decoration: none;
}
a:hover {
    color: #1554a4;
    text-decoration: underline;
}

/* -------------------------------
   5. Blocs spécifiques déjà existants
   ------------------------------- */

/* #banniere (déjà défini dans style.css, on harmonise) */
#banniere {
    background-color: #000;
    text-align: center;
}
#banniere img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* .list_insc (typo.css) : mise au propre responsive */
.list_insc {
    display: block;
    float: right;
    width: 310px;
    text-align: center;
    margin-right: 10px;
    padding-bottom: 25px;
}
.list_insc a {
    font-size: 1.05em;
    font-weight: bold;
    color: #1f6fd6;
    text-decoration: underline;
}

/* Icônes et cartes déjà utilisés (style3.css) */
.cont_icon {
    float: left;
    margin: 0 10px 10px 0;
}
.carte_lieu {
    float: right;
    margin: 0 0 10px 10px;
}

/* -------------------------------
   6. Tables génériques
   ------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
}
table th,
table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.95em;
}
table th {
    background: #0f172a;
    color: #e5e7eb;
    font-weight: 600;
}

/* -------------------------------
   7. Responsive
   ------------------------------- */

@media (max-width: 1024px) {

    #wrapper,
    #outside_wrapper,
    #content_wrapper,
    .content_wrapper {
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #content80,
    #content100 {
        padding: 0 10px;
    }

    .list_insc {
        float: none;
        width: 100%;
        margin: 0 0 15px 0;
    }

    .cont_icon,
    .carte_lieu {
        float: none;
        margin: 5px auto;
    }
}

@media (max-width: 640px) {

    body {
        font-size: 13px;
    }

    table th,
    table td {
        font-size: 0.85em;
    }
}
/* ============================================================
   1. PC – Nettoyage du bloc central hérité du template
   ============================================================ */

/* On enlève le gros fond "tube" et on maitrise la largeur */
#content_wrapper {
    width: 100% !important;
    max-width: 1200px;              /* largeur max raisonnable sur PC */
    margin: 0 auto;
    padding: 0 20px 40px;
    box-sizing: border-box;

    background-image: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
}

/* L’enveloppe interne ne doit plus être figée à 930px */
.content_wrapper {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Le composant principal suit la même logique */
#component_wrapper,
#component {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    float: none;
}

/* Le contenu principal (80/100) reste fluide et centré */
#content80,
#content100 {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px 30px;
    float: none !important;
    box-sizing: border-box;
}
/* ============================================================
   DESKTOP – Menu à gauche, contenu à droite
   ============================================================ */

@media screen and (min-width: 1025px) {

    /* On garde le wrapper fluide et centré */
    #wrapper,
    #outside_wrapper,
    #content_wrapper,
    .content_wrapper,
    #component_wrapper {
        width: 100% !important;
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* Colonne de gauche : menu */
    #sidecol {
        float: left;
        width: 230px;                  /* largeur fixe de la colonne menu */
        padding: 0 10px 0 18px;
        box-sizing: border-box;
    }

    /* Colonne de droite : contenu principal */
    #content80,
    #content100 {
        float: left !important;        /* on le fait flotter à côté du menu */
        overflow: visible !important;
        margin: 0;
        padding: 0 20px 40px 15px;
        box-sizing: border-box;

        /* largeur = 100% – largeur colonne gauche – un peu de marge */
        width: calc(100% - 260px);
        max-width: none;
    }
}

/* ============================================================
   TABLETTE / MOBILE – empilement vertical
   (sécurité, même si mobile.css masque déjà #sidecol)
   ============================================================ */

@media screen and (max-width: 1024px) {

    #sidecol,
    #content80,
    #content100 {
        float: none !important;
        width: 100% !important;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }
}
/* ============================================================
   Layout desktop : menu (.main-module) à gauche, contenu à droite
   ============================================================ */

/* Colonne MENU : .main-module (et #sidecol si présent) */
#sidecol,
.main-module {
    float: left !important;
    width: 230px !important;      /* largeur de la colonne de gauche */
    padding: 0 10px 0 18px;
    box-sizing: border-box;
}

/* Colonne CONTENU : #content80 / #content100 */
#content80,
#content100 {
    float: left !important;       /* se place à côté du menu */
    width: calc(100% - 260px) !important;  /* 100% - largeur menu - marge */
    margin: 0 !important;
    padding: 0 20px 40px 10px;
    box-sizing: border-box;
}

/* Wrapper global centré */
#content_wrapper,
.content_wrapper,
#component_wrapper {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
    box-sizing: border-box;
}
/* ============================================================
   MOBILE – on restaure le fond et le layout propres
   ============================================================ */
@media screen and (max-width: 1024px) {

    /* Fond général (on redonne la main à la version mobile) */
    body {
        line-height: normal;
        background-color: #3d3f4e;
        background-image: url("../img/bg.jpg");
        background-position: 50% 0;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /* Bande supérieure / image de header */
    #body_bg {
        background-image: url("../img/header.jpg");
        background-repeat: no-repeat;
        background-position: 50% 0;
        background-size: cover;
        background-attachment: scroll !important;
        min-height: 100vh;
    }

    /* Couloir central (fond gris/clair que tu avais avant) */
    #content_wrapper {
        background-image: url("../img/content_bg.png");
        background-repeat: repeat-y;
        background-position: 50% 0;
        background-color: transparent;
    }

    /* Layout : sur mobile on empile proprement menu + contenu */
    .main-module,
    #sidecol,
    #content80,
    #content100 {
        float: none !important;
        width: 100% !important;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }
}