/* ============================================
   Batucada Gringos — 2026 refresh
   Mobile-first • Flexbox • Same visual identity
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    background-color: #5999b5;
}

body {
    width: 100%;
    background: #e5f1f5 url(img/fond.jpg) top center repeat-x;
    font: normal 1em/1.3em Georgia, serif;
    color: #155e81;
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

a { color: #1f8aaf; }
a:hover { text-decoration: none; }

/* --- Layout containers --- */
#conteneur {
    width: 100%;
    background: transparent url(img/fond-logo.png) top center no-repeat;
    background-size: contain;
}

#cont-fp,
#cont-fp1, #cont-fp2, #cont-fp3, #cont-fp4,
#cont-fp5, #cont-fp6, #cont-fp7, #cont-fp8 {
    width: 100%;
    background-position: top center;
    background-repeat: no-repeat;
}
#cont-fp  { background-image: url(img/fp.jpg); }
#cont-fp1 { background-image: url(img/fp1.jpg); }
#cont-fp2 { background-image: url(img/fp2.jpg); }
#cont-fp3 { background-image: url(img/fp3.jpg); }
#cont-fp4 { background-image: url(img/fp4.jpg); }
#cont-fp5 { background-image: url(img/fp5.jpg); }
#cont-fp6 { background-image: url(img/fp6.jpg); }
#cont-fp7 { background-image: url(img/fp7.jpg); }
#cont-fp8 { background-image: url(img/fp8.jpg); }

#cont {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- Header --- */
#haut {
    max-width: 100%;
    margin: 0 auto;
    padding: 35px 0 0 0;
}

#haut #cont {
    min-height: 235px;
}

#titrac, #titre {
    width: 100%;
    max-width: 475px;
    height: 110px;
    margin: 0 0 20px 0;
    cursor: pointer;
}

#titrac a, #titre a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    overflow: hidden;
}

/* --- Navigation --- */
#menu {
    padding: 0;
}

#menu ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#menu ul li a {
    display: block;
    padding: 6px 10px;
    color: #ffd400;
    background-color: #136b94;
    border: 1px #fff dashed;
    text-decoration: none;
    font: normal normal bold 1em Georgia, serif;
    white-space: nowrap;
}

#menu ul li a:hover {
    color: #136b94;
    background-color: #e9d400;
}

/* --- Main content layout --- */
.gen, .contacts {
    margin-bottom: 20px;
}

/* --- Headings --- */
h2 {
    margin: 20px 0;
    padding: 0 0 5px 0;
    font: normal normal normal 2.2em Georgia, serif;
    letter-spacing: -1px;
    color: #ca0;
    border-bottom: 4px #b9d7e2 solid;
}

#gauche h3 {
    margin: 10px 0 15px 0;
    padding: 0 0 5px 0;
    font: normal normal normal 1.4em Georgia, serif;
    letter-spacing: -1px;
    color: #1f8aaf;
    border-bottom: 4px #b9d7e2 solid;
}

/* --- Paragraphs --- */
#gauche p, .gen p {
    font: normal normal normal 1em/1.3em Georgia, serif;
    color: #155e81;
    margin: 20px 0;
    word-spacing: 2px;
    text-align: justify;
}

/* --- Video containers (replaces Flash) --- */
.video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    padding-bottom: 56.25%;
    margin-bottom: 30px;
    border: 5px #7dafc6 solid;
    background: #136b94;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Lists --- */
#gauche ul li {
    list-style-position: inside;
    font: normal normal normal 1.05em/1.2em Georgia, serif;
    color: #ca0;
    padding: 0 0 10px 20px;
    list-style-type: square;
}

#gauche li span {
    color: #155e81;
    padding-left: 5px;
    font-size: 0.95em;
}

/* Tech specs */
#gauche ul.tech {
    margin: 0;
    padding: 20px 0 0 0;
    border-top: 4px #b9d7e2 solid;
}

#gauche ul.tech li {
    padding-bottom: 15px;
    color: #155e81;
    letter-spacing: -1px;
    font-style: italic;
    list-style-type: circle;
}

/* Liens page */
#gauche ul.liens li {
    list-style-type: none;
    font: normal normal normal 1em Georgia, serif;
    color: #155e81;
    padding: 5px 0;
}

#gauche ul.liens li a { color: #ca0; }
#gauche ul.liens li a:hover { text-decoration: none; }
#gauche ul.liens li a:visited { color: #e5a000; }

/* Photo thumbnails */
#gauche ul.splimages {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

#gauche ul.splimages li {
    list-style: none;
    padding: 0;
}

#gauche ul.splimages li a img {
    border: 5px #b9d7e2 solid;
    display: block;
}

#gauche ul.splimages li a:hover img {
    border-color: #7dafc6;
}

/* --- Sidebar (droite) --- */
#droite h3 {
    margin-bottom: 5px;
    font: italic normal normal 1.3em Georgia, serif;
    letter-spacing: -1px;
    color: #136b94;
}

#droite p {
    font: normal normal bold 0.9em Georgia, serif;
    color: #ca0;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
}

#droite p span {
    font-size: 1.25em;
    letter-spacing: 0;
}

#droite p a { color: #1f8aaf; }
#droite p a:hover { text-decoration: none; }

/* --- Reference --- */
#reference { font-size: 0.95em; }

#reference p {
    font: normal normal normal 1.1em/1.25em Georgia, serif;
    border-left: 5px #7dafc6 solid;
    padding: 0 0 5px 10px;
    margin-left: 1px;
    color: #004666;
}

/* --- Homepage (accueil) --- */
#accueil h2 {
    margin: 15px 0 5px 0;
    border-color: #eef5fb;
    letter-spacing: -2px;
}

#accueil h3 {
    margin: -25px 0 15px 0;
    padding: 60px 0 5px 0;
    font: normal normal normal 1.5em Georgia, serif;
    color: #ca0;
    border-bottom: 2px #c0d2d6 dotted;
    text-align: center;
    background: transparent url(img/fond-hac.gif) bottom center no-repeat;
}

#accueil p {
    font: normal normal normal 1em/1.3em Georgia, serif;
    color: #155e81;
    margin: 0 0 15px 0;
    text-align: justify;
}

#accueil p.fstp {
    font: italic normal normal 1.45em/1.35em Georgia, serif;
    color: #1f8aaf;
    letter-spacing: -1px;
    text-align: left;
    margin: 20px 0 0 0;
    word-spacing: 2px;
}

#accueil ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#accueil ul li {
    font: normal normal bold 1em/1.5em Georgia, serif;
    color: #155e81;
    text-align: justify;
    padding: 0 0 15px 0;
}

#accueil ul li a { color: #1f8aaf; }
#accueil ul li a:hover { text-decoration: none; }

#accueil #droite h3 {
    margin: 0 0 10px 0;
    padding: 0;
    text-decoration: underline;
    border-bottom: none;
    background: none;
    text-align: left;
}

/* --- Footer --- */
#widepied {
    width: 100%;
    background: #c3dee6 url(img/fond-pied.gif) top center repeat-x;
    margin-top: 20px;
}

#pied {
    padding: 80px 15px 25px 15px;
    max-width: 760px;
    margin: 0 auto;
    background: transparent url(img/sol.gif) top center no-repeat;
}

#pied p {
    font: normal small-caps bold 0.85em/1.3em Georgia, serif;
    color: #004666;
}

#pied p a { color: #1f8aaf; }
#pied p a:hover { text-decoration: none; }

#widesemelle {
    width: 100%;
    background-color: #5999b5;
    border-top: 5px #7dafc5 solid;
}

#semelle {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding: 0 15px;
}

#semelle ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 20px;
    padding: 3px 0 5px 0;
}

#semelle ul li {
    font: normal small-caps normal 0.8em Georgia, serif;
}

#semelle ul li a {
    color: #e9d400;
    text-decoration: none;
}

#semelle ul li a:hover { color: #046; }

/* --- Contact form --- */
#forcon {
    margin: 10px 0;
    color: #155e81;
}

#forcon .legend {
    font: italic normal normal 1em/1em Georgia, serif;
    padding: 0 0 20px 0;
}

#forcon .form-group {
    margin-bottom: 15px;
}

#forcon label {
    display: block;
    margin-bottom: 5px;
    font: normal normal normal 0.85em/1.2em Georgia, serif;
}

.respect {
    font: italic normal normal 0.75em/1.2em Georgia, serif;
    padding: 1px 0 9px 0;
}

#forcon input,
#forcon textarea {
    margin: 0 0 10px 0;
    padding: 6px 8px;
    border: 1px #136b94 dashed;
    width: 100%;
    max-width: 300px;
    color: #004565;
    background: #c3dee6 url(img/fond-pied.gif) 0 -50px repeat-x;
    font-family: Georgia, serif;
    font-size: 0.85em;
    letter-spacing: 1px;
}

#forcon textarea {
    padding: 8px;
    resize: vertical;
    min-height: 120px;
}

#forcon input.er {
    background: none;
    background-color: #ffc400;
}

#forcon .malert {
    font-family: Georgia, serif;
    display: block;
    color: #136b94;
    border: 1px solid #ca0;
    background-color: #ffc400;
    padding: 10px 10px 8px 15px;
    margin: 0 2px 25px 0;
    font-size: 0.9em;
}

#forcon .malert strong {
    color: #e5f1f5;
    font-size: 1.25em;
}

#forcon .malert em {
    font-size: 1.15em;
    line-height: 1.5em;
}

#forcon button#subbtn {
    width: 100%;
    max-width: 300px;
    font-weight: bold;
    font-size: 0.85em;
    font-variant: small-caps;
    background-color: #7ca4b4;
    color: #e5f1f5;
    border: 3px #e5f1f5 double;
    padding: 8px 10px;
    cursor: pointer;
    word-spacing: 3px;
    font-family: Georgia, serif;
}

#forcon button#subbtn:hover {
    background-color: #136b94;
}

/* --- Utilities --- */
.oust {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.clearbot {
    clear: both;
    height: 0;
}

hr.clearline {
    clear: both;
    width: 100%;
    margin: 0 auto;
    padding: 5px 0 15px 0;
    border: 0;
    border-top: 2px #c0d2d6 dotted;
}

div.aclearline {
    display: block;
    clear: both;
    width: 100%;
    margin: 0 auto -10px auto;
    padding: 5px 0 48px 0;
    border-top: 2px #c0d2d6 dotted;
    background: transparent url(img/fond-bac.gif) top center no-repeat;
}

/* ============================================
   DESKTOP (>= 760px) — two-column layout
   ============================================ */
@media (min-width: 760px) {

    #cont {
        padding: 0;
    }

    #haut #cont {
        height: 235px;
    }

    #menu {
        width: 530px;
        padding: 0 230px 0 0;
        text-align: center;
    }

    /* Two-column pages */
    .gen, .contacts {
        width: 500px;
        float: left;
        padding: 0 20px 0 0;
    }

    #droite {
        width: 220px;
        padding-top: 265px;
        float: right;
    }

    #accueil #droite {
        width: 230px;
        padding-top: 0;
    }

    #gauchacc {
        width: 495px;
        float: left;
        padding: 0 25px 0 0;
    }

    /* Homepage 3-column list */
    #accueil > ul {
        display: flex;
        gap: 35px;
    }

    #accueil > ul li {
        flex: 1;
    }

    #accueil p.fstp {
        max-width: 540px;
    }

    #accueil h2 {
        max-width: 540px;
    }

    /* Footer */
    #pied {
        padding: 80px 0 25px 0;
        display: flex;
        justify-content: space-between;
    }

    #pied p.pg {
        text-align: left;
        flex: 1;
    }

    #pied p.pd {
        text-align: right;
        width: 240px;
    }

    /* Form layout */
    #forcon label {
        display: block;
        float: left;
        width: 215px;
        margin-right: 15px;
    }

    .video-container {
        max-width: 320px;
        padding-bottom: 240px;
    }
}