/* ============================================================
   common.css — Pr_OverView
   Styles partagés : reset, layout, header, navbar, footer
   À inclure sur TOUTES les pages via :
     <link rel="stylesheet" href="css/common.css">
   ============================================================ */


/* ── 1. RESET ─────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6, p {
    margin:  0;
    padding: 0;
}

p {
    padding-top:    3px;
    margin:         0 0 1em 0;
    font-size:      93%;
    line-height:    1.5em;
    margin-top:     7px;
    margin-bottom:  3px;
}

img {
    max-width: 100%;
    height:    auto;
    margin:    0 0 10px 0;
}


/* ── 2. BASE ───────────────────────────────────────────────── */

body {
    font-family:      Helvetica, Arial, sans-serif;
    padding:          0;
    margin:           0;
    background-color: #3f3f3f;
}


/* ── 3. TYPOGRAPHIE UTILITAIRE ─────────────────────────────── */

#h4Titre {
    margin:        0;
    padding:       0;
    text-align:    center;
    margin-bottom: 10px;
}

.h4Titre2 {
    margin:        0;
    padding:       0;
    text-align:    center;
    margin-bottom: 6px;
}

.h4SousTitre {
    margin:          0;
    padding:         1px;
    font-size:       14px;
    font-weight:     bold;
    color:           black;
    text-decoration: underline;
}

.h2soustitre {
    margin:    0;
    padding:   5px;
    color:     green;
    font-size: 15px;
}


/* ── 4. MISE EN PAGE (layout) ──────────────────────────────── */

div.section-inner {
    max-width: 1100px;
    margin:    0 auto;
    width:     100%;
}

div.section-innerSlogan {
    max-width:        1100px;
    margin:           0 auto;
    margin-bottom:    15px;
    background-color: #9bdaef;
}

div.section-innerSlogan2 {
    max-width:        1100px;
    padding:          0 5px;
    margin:           0 auto;
    margin-top:       10px;
    background-color: #9bdaef;
}

div.body-content {
    padding:          20px 0;
    background-color: #fff;
}

div.thirds {
    padding-bottom: 5px;
}

div.one-third {
    width:        45%;
    float:        left;
    margin-right: 0;
}

div.one-thirdImageGif {
    width:        55%;
    float:        left;
    margin-right: 0;
}

div.info-box-a {
    background-color: #9bdaef;
    padding:          6.5px;
    font-size:        14px;
    margin:           0 0 9.5px 0;
}

div.info-box-b {
    background-color: #efdb7f;
    padding:          20px;
    font-size:        13px;
    margin:           0 0 15px 0;
}

.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix       { *zoom: 1; }


/* ── 5. HEADER ─────────────────────────────────────────────── */

div.header {
    display:          flex;
    align-items:      center;
    background-color: #E9E9E9;
    min-height:       70px;
    padding:          0;
}

/* Logo */
#Imageicone {
    width: 90px;
}

/* Bloc icône dans le header */
div.one-thirdfooter4 {
    display:      flex;
    align-items:  center;
    float:        none;
    padding:      8px 0 8px 10px;
}

/* Bloc texte (nom + slogan) dans le header */
div.one-thirdfooter5 {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    float:          none;
    padding:        0 5px;
}

div.one-thirdfooter5 h4 {
    margin:      0;
    padding:     0;
    line-height: 1.5;
}


/* ── 6. NAVBAR ─────────────────────────────────────────────── */

#toggle {
    display: none;           /* checkbox cachée (hamburger CSS pur) */
}

.togglearea {
    display: none;           /* visible uniquement en mobile */
}

.navbar {
    display:          flex;
    justify-content:  center;
    flex-wrap:        wrap;
    background-color: #63b0e3;
}

.navbar a {
    color:           white;
    font-weight:     bold;
    text-align:      center;
    text-decoration: none;
    text-transform:  uppercase;
    padding:         14px 28px;
}

.navbar a:hover {
    background-color: white;
    color:            black;
}

/* Bouton hamburger */
.togglearea {
    background-color: #63b0e3;
    border-bottom:    2px solid white;
    color:            white;
    padding:          10px;
    display:          flex;
    justify-content:  flex-start;
}

.togglearea label {
    background-color: white;
    height:           45px;
    width:            50px;
    border-radius:    6px;
    cursor:           pointer;
    display:          flex;
    justify-content:  center;
    align-items:      center;
    flex-direction:   column;
}

.togglearea label span {
    background-color: #63b0e3;
    height:           4px;
    width:            70%;
    margin:           2px 0;
}


/* ── 7. FOOTER ─────────────────────────────────────────────── */

div.footer {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background-color: #63b0e3;
    color:            black;
    padding:          0;
    text-align:       center;
    min-height:       120px;
}

div.one-thirdfooter1 {
    width:        20%;
    float:        left;
    margin-right: 0;
    height:       120px;
}

div.one-thirdfooter2 {
    width:        60%;
    float:        left;
    margin-right: 0;
    height:       120px;
}

div.one-thirdfooter3 {
    width:        10%;
    float:        left;
    margin-right: 0;
}


/* ── 8. RESPONSIVE ─────────────────────────────────────────── */

/* Tablette / mobile large */
@media screen and (max-width: 768px) {

    /* Navbar : menu vertical masqué, révélé par la checkbox */
    .togglearea {
        display: flex;
    }

    .navbar {
        flex-direction: column;
        display:        none;
    }

    #toggle:checked ~ .navbar {
        display: flex;
    }

    .navbar a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        text-align:    left;
    }

    .navbar a:last-child {
        border-bottom: none;
    }

    /* Colonnes : passage en pleine largeur */
    div.one-third,
    div.one-thirdImageGif {
        width:        100%;
        float:        none;
        padding-right: 0;
    }
}

/* Petit mobile */
@media screen and (max-width: 500px) {

    div.header {
        flex-wrap: wrap;
    }

    #Imageicone {
        width: 55px;
    }

    div.mobile-collapse {
        width:        auto;
        float:        none;
        margin-right: 0;
    }

    .hide-mobile {
        display: none;
    }
}