@charset "utf-8";
/* CSS Document */
/*Div qui contient toute la météo*/
#la-meteo .gallery-full-css .carte-item {
    width: 100%;
    margin: 20px 0 20px 0;
    padding: 0;
    height: auto;
    overflow: hidden;
    text-align: center;
    background-color: #FFF
    }
/*La div qui contient les div Matin / Aprem / Soir*/
figure .krea3meteo_jour {
    margin: 40px 0 20px 0;
    text-align: center;
    clear: both
    }
/*Les 3 div Matin / Aprem / Soir*/
figure .krea3meteo_matin, figure .krea3meteo_apres-midi, figure .krea3meteo_soir {
    display: inline-block;
    width: 30%;
    height: 200px;
    margin: 10px 10px 10px 10px;
    background-color: #CCC;
    padding-top: 20px;
    color: #FFF;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.3em;
    /*text-shadow: 1px 1px 2px #25211e;*/
    }
figure .krea3meteo_matin {
    background: url(../images/fond-meteo-matin.jpg) no-repeat top left
    }
figure .krea3meteo_apres-midi {
    background: url(../images/fond-meteo-apres-midi.jpg) no-repeat top left
    }
figure .krea3meteo_soir {
    background: url(../images/fond-meteo-soir.jpg) no-repeat top left
    }
figure .krea3meteo_matin img, figure .krea3meteo_apres-midi img, figure .krea3meteo_soir img {
    margin-top: 10px
    }
/*Pour la météo d'Aujourd'hui qui a besoin d'un petit ajustement*/
#krea3meteogen .carte-item:first-of-type {
    position: relative;
    top: 15px
    }
/*Aujourd'hui / Demain / Lundi / etc.*/
#krea3meteogen .carte-item, #krea3meteogen .controls {
    left: 0;
    background: #FFF;
    width: 100%;
    margin: 20px auto 0 auto;
    padding: 0;
    display: block;
    max-width: none;
    text-align: center
    }
/*La couleur d'un lien Aujourd'hui / Demain*/
#la-meteo .gallery-full-css .control-button {
    color: #666;
    font-size: 1.7em;
    display: inline-block;
    margin: 0 10px 20px 10px
    }
#la-meteo .gallery-full-css .control-button:hover {
    color: #333 !important
    }
/*Pour que le lien Aujourd'hui soit de la même couleur que les autres quand il n'est pas sélectionnée*/
#la-meteo .gallery-full-css .control-operator:target ~ .controls .control-button {
    color: #666;
    border-bottom: none
    }
#la-meteo .gallery-full-css .control-operator:target ~ .controls .control-button {
    color: rgba(0, 0, 0, 0.6);
    border-left: none;
    border-bottom: none;
    padding-left: 0;
    margin: 0 5px 0 5px
    }
/*La période sélectionnée (Aujourd'hui, demain, etc)*/
#la-meteo .gallery-full-css .control-button:first-of-type, #la-meteo .gallery-full-css .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1), #la-meteo .gallery-full-css .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2), #la-meteo .gallery-full-css .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3), #la-meteo .gallery-full-css .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4), #la-meteo .gallery-full-css .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) {
    color: #000;
    border-bottom: 5px solid #5DD9F6;
    border-left: none;
    padding-left: 0;
    padding-bottom: 5px
    }
#la-meteo .gallery-full-css .control-button {
    border-left: none;
    padding-left: 0
    }
/*La partie des Marées*/
#la-maree {
    margin: 0;
    padding: 0;
    background-color: #F3F3F3;
    padding: 10px 5% 10px 5%
    }
#la-maree h3 {
    color: #196282
    }
#la-maree h3 span {
    color: #001923
    }
#la-maree h3 a {
    color: #001923
    }
/*Fin de la partie des Marées*/
/*LE RESPONSIVE*/
@media screen and (max-width: 737px) {
    figure .krea3meteo_matin, figure .krea3meteo_apres-midi, figure .krea3meteo_soir {
        margin: 10px 5px 10px 5px
        }
    }
@media screen and (max-width: 700px) {
    /*La div qui contient les div Matin / Aprem / Soir*/
    /*Besoin d'un margin plus grand quand Aujourd'hui / DEmain / LUndi / etc. est sur 2 lignes*/
    figure .krea3meteo_jour {
        margin: 80px 0 20px 0
        }
    }
@media screen and (max-width: 440px) {
    #la-meteo {
        height: 700px;
        /*Sinon la météo recouvre le pied de page*/
        }
    /*La div qui contient les div Matin / Aprem / Soir*/
    figure .krea3meteo_jour {
        margin: 80px 0 20px 0
        }
    figure .krea3meteo_matin, figure .krea3meteo_apres-midi, figure .krea3meteo_soir {
        display: block;
        width: 100%;
        height: 180px;
        margin: 10px 0 10px 0
        }
    }