/* Outil déboguage */
/* body , body *
{
    border:solid 1px black;
} */

/* Définition de la Police Raleway */
@font-face 
{
    font-family: 'raleway';
    src: url('Police/raleway-light-webfont.woff2') format('woff2'),
    url('Police/raleway-light-webfont.woff') format('woff'),
    url('Police/Raleway-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

/* Définition de la Police Raleway-Semibold */
@font-face 
{
    font-family: 'raleway-bold';
    src: url('Police/raleway-bold-webfont.woff2') format('woff2'),
    url('Police/raleway-bold-webfont.woff') format('woff'),
    url('Police/Raleway-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

body
{
    font-family:'raleway', 'open-sans', Arial, Helvetica, sans-serif;
}
#conteneur_princip
{
    width:100%;
    margin:auto;
}
h1, h2, h3
{
    font-family: 'raleway-bold';
}
.conteneur
{
    max-width: 1340px;
    margin:auto;
}

/* Désactivation des styles par défauts pour les listes et liens */
a
{
    text-decoration:none;
    color:black;
}
li
{
    list-style-type:none;
}

/********* DEBUT DE L'ENTÊTE (HEADER) *********/
header
{
    margin-bottom:35px;
}
header .conteneur
{
    display: flex;
    justify-content:space-between;
    padding-left:1%;
    padding-right:1%;
}
header img
{
    width:94px;
}
header .conteneur #volet_droit
{
    display: flex;
    align-items: center;
    font-size:0.9em;
    margin:0px;
    padding:0px;
    /* width:33.4%; */
    width:345px;
}
        /* Les menus principaux */
        nav
        {
            margin:0px;
            padding:0px;
            height:100%;
            flex:2;
        }
        /* Regroupement de la liste*/
        nav ul
        {
            margin:0px;
            padding:0px;
            height:100%;
            display: flex;
        }
        /*Chaque liste*/
        nav li
        {
            flex:1;
            margin:0px;
            padding:0px;
            height:100%;
            display:flex;
        }
        /* Liens de la liste */
        nav a
        {
            margin:0px;
            width:100%;
            display:flex;
            justify-content: center;
            align-items: center;
        }
        /* Survol des menus */
        nav a:hover
        {
            color:#0065FC;
            border-top:solid 2px #0065FC;
        }
        
        /* inscription: lien_s'inscrire */
        header p
        {
            flex:1;
            height:100%;
            display: flex;
            align-items:center;
            justify-content:center;
        }
        header p a
        {
            font-family:'raleway-bold';
            color:#0065FC;
        }
/********* FIN DE L'ENTÊTE (HEADER) *********/


/********* DEBUT DU VOLET DE LA BARRE DE RECHERCHE - DES FILTRES ET DE LA PHRASE INFORMATIVE *********/
/* Le bloc de la partie*/
header + .conteneur 
{
    margin-bottom:36px;
    padding-left:1%;
    padding-right:1%;
}
/* Titre de la partie */
header + .conteneur h1
{
    margin:0px;
    padding:0px;
    font-size:1.4em;
    font-weight:bold;
}
/* Paragraphe en dessous du titre */
header + .conteneur h1 + p
{
    margin:0px;
    margin-top:10px;
    padding:0px;
    font-size:0.98em;
}
/*Formulaire barre de recherche*/
form
{
    margin-top:19px;
    margin-bottom:30px;
    display:flex;
    height:50px;
    width:418px;
    border-radius:15px;
    overflow:hidden;
    font-size:1.4em;
}
    /*  L'image */
    form span
    {
        display:flex;
        justify-content:center;
        align-items:center;
        background-color:#F2F2F2;

        /* flex:1; */
        width:51px;
    }
    form input + span
    {
        height:50px;
        border-radius:15px;
    }
    /*Le champs de saisie*/
    #champ_de_saisie
    {
        /* flex:4.5; */
        text-align:left;
        padding-left:16px;
        font-weight:bold;
        border:solid 1px #F2F2F2;

        font-size:0.8em;
    }
    /* Le bouton de recherche */
    #bouton_recherche
    {
        color:white;
        background-color:#0065FC;
        /* flex:2.5; */
        font-weight:bold;
        font-size:0.8em;
        border:0px;
    }
/* Bannière des filtres */
#filtres
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:938px;
    font-family: 'raleway-bold';
}
    /* Mot introduisant les filtres */
    #filtres p
    {
        margin:0px;
        margin-left:10px;
        font-size:1.15em;
    }
    /* Regroupement des listes de filtres */
    #filtres ul
    {
        margin:0px;
        padding:0px;
        display:flex;
        justify-content:space-between;
        width:88%;
        height:50px;
        font-size:1.2em;
    }
    /* Chaque liste ---- Chaque filtre */
    #filtres li
    {
        display:flex;
        justify-content:space-between;
        align-items:center;
        border-radius:25px;
        padding-right:2%;
        border:solid 3px #F2F2F2;
        text-transform:capitalize;
        margin-right:8px;
    }
    /*Au survol des filtres*/
    #filtres li:hover
    {
        border:solid 3px #DEEBFF;
        background-color:#DEEBFF;
        color:#0065FC;
        cursor:pointer;
    }
    /*Icone des filtres*/
    li span
    {
        width:50px;
        height:50px;
        border-radius:50px;
        color:#0065FC;
        background-color:#DEEBFF;
        display:flex;
        justify-content:center;
        align-items:center;
        position:relative;
        left:-10px;
    }
/* Bloc d'information sur le nombre de logements dans la ville */
#nb_logments_ville
{
    margin:0px;
    margin-top:36px;
    margin-left:6px;
    display:flex;
    align-items:flex-start;
    font-size: 0.9em;
}
    /* L'icône d'information */
    #nb_logments_ville span
    {
        height:20px;
        position: relative;
        top:-3px;
        min-width:20px;
        display:flex;
        justify-content: center;
        align-items:center;
        color:#0065FC;
        border-radius:20px;
        margin-right:1%;
        border: solid 2px #F2F2F2;
        font-size:0.75em;
    }
/********* FIN DU VOLET DE LA BARRE DE RECHERCHE - DES FILTRES ET DE LA PHRASE INFORMATIVE *********/


/********* DEBUT DES SECTIONS HEBERGEMENTS A MARSEILLE - ET - LES PLUS POPULAIRES *********/
header + .conteneur + .conteneur
{
    display:flex;
    align-items:stretch;
    justify-content: space-between;
    margin-bottom:66px;
    padding-left:1%;
    padding-right:1%;
}
/* Le bloc des hébergements disponibles */
#hebergements_marseille
{
    flex:2.09524;
    margin-right:2.98%;
    border-radius:18px;
    background-color:#F2F2F2;
    /* min-height:625px; */
    padding:2%;
}
    /* Titre du bloc des hébergements à Marseille */
    #hebergements_marseille h2, #populaires h2, header + .conteneur + .conteneur +.conteneur h2
    {
        margin:0px;
        margin-top:25px;
        margin-bottom:25px;
        font-size:1.4em;
        font-weight:bold;
    }
    /* Bloc des hébergements disponibles dans la ville*/
    #herg_dispo
    {
        display:flex;
        justify-content:space-around;
        flex-wrap:wrap;
        align-content:space-around;
        align-items:center;
        min-height:450px;
    }
        /* Spécification pour l'ensemble des logements */
        #herg_dispo a
        {
            min-width:235px;
            height:190px;
            border:5px white solid;
            overflow:hidden;
            border-radius:18px;
            display:flex;
            flex-direction:column;
            justify-content: flex-end;
            margin-bottom:20px;
        }
        /*Les bannières de dexcription pour les logements dans n'importe quelle section*/
        .description
        {
            background-color:white;
            padding:5px;
        }
        /*Les étoiles*/
        .description i
        {
            font-size:0.7em;
            margin:0px;
        }
        .fullstar {color:#0065FC;}
        .emptystar {color:#F2F2F2;}
        /*Titre de chaque logement*/
        .description h3
        {
            font-size:0.9em;
            margin:0px;
            margin-bottom:8px;
        }
        /*Petite phrase sur le prix*/
        .description p
        {
            font-size:0.75em;
            margin:0px;
        }
        /*Style du prix*/
        .chiffre
        {
            font-family:'raleway-bold';
        }
        /*Les bannières de dexcription pour les logements dans cette section*/
        #hebergements_marseille .description
        {
            background-color:white;
            height:75px;
        }
        /*Les images d'hebergement*/
        .im_herg
        {
            /* display:flex; */
            height:100%;
            background: no-repeat center/100% ;
        }
            /*Etoiles de cette partie*/
            #hebergements_marseille .description i
            {
                margin-top:10px;
            }
        /* Images du Premier logement au sixième logement*/
        #la_cannebiere .im_herg
        {
            background-image:url("../img/hosting/small/marcus-loke-WQJvWU_HZFo-unsplash.jpg");
        }
        #port .im_herg
        {
            background-image:url("../img/hosting/small/fred-kleber-gTbaxaVLvsg-unsplash.jpg");
        }
        #mouettes .im_herg
        {
            background-image:url("../img/hosting/small/reisetopia-B8WIgxA_PFU-unsplash.jpg");
        }
        #mer .im_herg
        {
            background-image:url("../img/hosting/small/annie-spratt-Eg1qcIitAuA-unsplash.jpg");
        }
        #panier .im_herg
        {
            background-image:url("../img/hosting/small/nicate-lee-kT-ZyaiwBe0-unsplash.jpg");
        }
        #amina .im_herg
        {
            background-image:url("../img/hosting/small/febrian-zakaria-M6S1WvfW68A-unsplash.jpg");
        }
    /*Le texte: Afficher plus*/
    #herg_dispo + p
    {
        font-weight:bold;
        font-size:0.9em;
    }


    
/* Bloc des logements populaires */
#populaires
{
    flex:1;
    padding:2%;
    border-radius:18px;
    background-color:#F2F2F2;
}
/*Titre de la section*/
#populaires_titre
{
    display:flex;
    justify-content:space-between;
    align-items: center;
}
    /*L'icône de stats*/
    #populaires_titre i
    {
        font-size:1.4em;
        font-weight:bold;
    }
/*L'ensemble des logements populaires*/
#herg_popu
{
    display:flex;
    flex-direction:column;
    justify-content: space-around;
    align-items:center;
    /* height:100%; */
    margin-top:2px;
}
#herg_popu a
{
    width:100%;
    height:145px;
    border:5px solid white; border-radius: 18px;
    display:flex;justify-content: flex-end;
    overflow: hidden;
    margin-bottom:20px;
}
#herg_popu .description
{
    width:63%; /*45*/
    padding:20px;
}

    /*Les images de cette section*/
    .im_popu
        {
            width:100%;
            /* height:100%; */
            background: no-repeat center/130% ;
        }
        /*Les couleurs de chaque logements*/
        #matin .im_popu
        {
            background-image:url('../img/hosting/small/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg');
        }
        #hotes .im_popu
        {
            background-image:url('../img/hosting/small/aw-creative-VGs8z60yT2c-unsplash.jpg');
        }
        #blanc .im_popu
        {
            background-image:url('../img/hosting/small/febrian-zakaria-sjvU0THccQA-unsplash.jpg');
        }


/********* FIN DES SECTIONS HEBERGEMENTS A MARSEILLE - ET - LES PLUS POPULAIRES *********/

    /* --------Ombrage pour les logements---------------- */
    section a, #activites_h a {box-shadow:  0 0 0.4em grey;}


/********* DEBUT DU VOLET ACTIVITES A MARSEILLE *********/
header + .conteneur + .conteneur +.conteneur
{
    display:flex; flex-direction:column;
    align-items:stretch;
    justify-content: space-between;
    min-height:500px;
    margin-bottom:62px;
    padding-left:1%;
    padding-right:1%;
}
/*Les différentes activités*/
#activites
{
    display:flex;
    justify-content: space-between;
    align-items: stretch;
    height:450px;
}
/*Sous bloc du bloc des activités*/
    #vieux_port,#parc_calanques,#volet_vertic_deux,#volet_vertic_quatre
    {
        width:22.5%;
    }
    #vieux_port,#parc_calanques
    {
        width:22.5%;
        display:flex;
        flex-direction: column;
        justify-content: flex-end;
        border-radius:18px;
        overflow:hidden;
    }
    /*Les deux sous-divisions*/
    #volet_vertic_deux,#volet_vertic_quatre
    {
        display:flex;
        flex-direction:column;
        justify-content: space-between;
    }
    /*Les quatres sous-divisions*/
    #pomegues,#frioul,#garde,#longchamp
    {
        width:100%;
        height:45%;
        display:flex;
        flex-direction: column;
        justify-content: flex-end;
        border-radius:18px;
        overflow:hidden;
    }
    /*Nom des lieux*/
    #activites h3
    {
        font-weight:bold;
        font-size:0.9em;
        max-height:56px;
        background-color:white;
        margin:0px;
        padding:6.5%;
    }
    /*Les images des lieux d'activités pour les longs div*/
    .im_act
    {
        height:100%;
        background: no-repeat center/210% ;
    }
    /*Les images des lieux d'activités pour les sous-divisions*/
    #volet_vertic_deux .im_act,#volet_vertic_quatre .im_act
    {
        height:100%;
        background: no-repeat center/127% ;
    }
    /*Placement des images de chaque lieux*/
    #vieux_port .im_act
    {
        background-image:url('../img/activity/medium/reno-laithienne-QUgJhdY5Fyk-unsplash.jpg');
    }
    #parc_calanques .im_act
    {
        background-image:url('../img/activity/medium/kilyan-sockalingum-NR8-cBCN3aI-unsplash.jpg');
    }
    #pomegues .im_act
    {
        background-image:url('../img/activity/medium/paul-hermann-QFTrLdQIRhI-unsplash.jpg');
    }
    #frioul .im_act
    {
        background-image:url('../img/activity/medium/kevin-hikari-rV_Qd1l-VXg-unsplash.jpg');
    }
    #garde .im_act
    {
        background-image:url('../img/activity/medium/florian-wehde-xW9e8gdotxI-unsplash.jpg');
    }
    #longchamp .im_act
    {
        background-image:url('../img/activity/medium/lena-paulin-wH2-EJoDcV0-unsplash.jpg');
    }

/********* FIN DU VOLET ACTIVITES A MARSEILLE *********/



/********* DEBUT DU PIED DE PAGE *********/
footer
{
    background-color: #F2F2F2;
    padding-left:2%;
    padding-right:2%;
    font-size:0.9em;
    padding-top:2.3%;
    padding-bottom:1%;
    position:absolute;
    left:0px;
    right:0px;
}
footer .conteneur
{
    display:flex;
    margin:auto;
    max-width: 1350px;
    justify-content:space-between;
}
/* Différentes sections du pied de page */
#a_propos,#hebergements,#assistance
{
    flex:1;
}
/* Nom de chaque sections */
footer h2
{
    font-weight:bold;
    font-size:1em;
    margin:0px;
    margin-bottom:15px;
}
footer p
{
    margin-bottom:10px;
    font-size:0.9em;
}

/********* FIN DU PIED DE PAGE *********/






/********* DEBUT DES MEDIAS-QUERIES *********/


/*---------------- Pour les smartphones ------------------*/
@media all and (max-width:607px)
{
    /*Le conteneur après le body*/
    #conteneur_princip
    {
        width:100%;
        padding:0px;
        position:relative;
        margin:auto;
    }

    /*Je souhaite déplacer les menus de navigation et
    donc je mets en relative le header pour pouvoir mettre les deux menus en absolute*/
    header
    {
        margin-bottom: 90px;
        justify-content:space-between;
    }
    header .conteneur
    {
        padding-left:2%;
        padding-right:2%;
    }
    header p
    {
        position:relative;
    }
    header p a
    {
        position:absolute;
        right:0px;
    }
    nav
    {
        position:absolute;
        top:60px;
        height:60px;
        left:0px;
        width:100%;
    }
    nav a
    {
        border-bottom:solid 2px #F2F2F2;
    }
    /* Survol des menus */
    nav a:hover
    {
        color:#0065FC;
        border-top:0px;
        border-bottom:solid 2px #0065FC;
    }


    /*Pour me faciliter la tâche, j'ai dû mettre la partie du
    formulaire de recherhe et des filtres avec du flex*/
    header + .conteneur
    {
        display:flex;
        flex-direction:column;
        margin:auto;
        margin-bottom:40px;
        padding-left:2%;
        padding-right:2%;
    }

    /* Je mets le formulaire de recherche au centre*/
    form
    {
        margin:auto;
        width:auto;
        margin-top:19px;
        margin-bottom:30px;
    }

    /*Faire disparaître le mot recherche*/
    #bouton_recherche
    {
        display:none;
    }
    /*Diminuer la police du champ de saisie*/
    #champ_de_saisie
    {
        font-size:0.68em;
    }

    /*  la loupe de recherche */
    form input + span
    {
        display:flex;
        justify-content:center;
        align-items:center;
        background-color:#0065FC;
        position:relative;
        left:-10px;

        /* flex:1; */
        width:50px;
    }
    form input + span i
    {
        color:white;
    }

    /*Le volet des filtres*/
    #filtres
    {
        flex-direction:column;
        align-items:flex-start;
        width:auto;
        margin-bottom:0px;
    }
    #filtres p
    {
        margin-left:0px;
        margin-bottom:10px;
    }
    /*je modifie l'affichage des filtres*/
    #filtres ul
    {
        width:auto;
        height:auto;
        flex-wrap:wrap;
        margin-left:6px;
        align-content:space-between;
    }
    #filtres li
    {
        margin-bottom:10px;
        height:50px;
        position:relative;
        padding-left:52px;
    }
    /*Je modifie l'affichage des icônes*/
    #filtres span
    {
        height:54px;
        width:54px;
        border-radius:54px;
        position:absolute;
    }

    /*Le bloc des hebergements les plus populaires à marseille*/
    header + .conteneur + .conteneur
    {
        flex-direction:column-reverse;
        position:relative;
        padding:0px;
        width:100%;
    }
    #populaires
    {
        border-radius:0px;
        /* left:0px;
        right:0px; */
        width:auto;
        padding-left:5.85%;
        padding-right:5.85%;
    }
    #herg_popu a
    {
        max-width:430px;
    }
    /*Blocs des hébergements généraux à marseille*/
    #hebergements_marseille
    {
        border-radius:0px;
        position: relative;
        background-color:white;
        margin-right:0px;
        padding-left:5.85%;
        padding-right:5.85%;
    }
    #herg_dispo a
    {
        max-width:400px;
        /* min-width:324px; */
        height:235px;
        width:100%;
    }
    .description
    {
        padding:10px;
    }
    /*Régler la marge du bas par rapport aux activités de marseille*/
    header + .conteneur + .conteneur
    {
        margin-bottom:2px;
    }

    /*Je veux maintenant adapter la partie des activites à marseille*/
    header + .conteneur + .conteneur +.conteneur
    {
        padding-left:2%;
        padding-right:2%;
        width:auto;
        margin-bottom:15px;
    }
    #activites
    {
        flex-direction:column;
        width:100%;
        align-items:center;
        height:auto;
    }
    /*Je modifie la hauteur des activités de marseille*/
    #vieux_port,#parc_calanques,#pomegues,#frioul,#garde,#longchamp
    {
        height:300px;
        width:100%;
        margin-bottom:20px;
    }
    #volet_vertic_deux, #volet_vertic_quatre
    {
        width:100%;
    }
    

    /*Je veux m'attaquer au pied de page*/
    footer .conteneur
    {
        flex-direction:column;
        padding-left:3%;
        padding-right:3%;
    }
    footer div
    {
        margin-bottom:25px;
    }
}


    /*Les appareils comme iPhone 5/SE*/
    @media all and (max-width:325px)
    {
        /*J'adapte le formulaire de recherche*/
        #champ_de_saisie
        {
            font-size:0.6em;
        }
        form i
        {
            font-size:0.7em;
        }

        /*je modifie l'affichage des icones des filtres*/
        #filtres span
        {
            height:52px;
            width:52px;
            border-radius:52px;
            left:-5px;
        }
        /*Je modifie les images d'arrière plan*/
        .im_popu {
            width: 100%;
            /* height: 100%; */
            background: no-repeat center/160%;
        }

        .im_herg {
            /* display: flex; */
            height: 100%;
            background: no-repeat center/110%;
        }
        /*J'adapte la hauteur des activités de marseille*/
        #vieux_port, #parc_calanques, #pomegues, #frioul, #garde, #longchamp {
            height: 280px;
            width: 100%;
            margin-bottom: 20px;
        }
    }


    /*Peite pensée pour les utilisateurs de Galaxy Fold*/
    @media all and (max-width:295px)
    {
        /*J'adapte le formulaire de recherche*/
        form
        {
            height:40px;
            border-radius:10px;
        }
        #champ_de_saisie
        {
            font-size:0.548em;
        }
        form i
        {
            font-size:0.55em;
        }
        form span
        {
            width:40px;
            height: 40px;
        }
        form input + span
        {
            border-radius:10px;
            height:40px;
            width:40px;
        }

        /*Je m'attaque aux logements populaires et mmodifie la disposition de la description*/
        #herg_popu a {
            min-width: 235px;
            height: 190px;
            border: 5px white solid;
            overflow: hidden;
            border-radius: 18px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            /* margin-bottom: 20px; */
        }
        #herg_popu .description {
            height: 75px;
            width:100%;
            padding:10px;
        }

        .im_herg ,.im_popu
        {
            /* display: flex; */
            height: 100%;
            background: no-repeat center/120%;
        }
        /*Je modifie la taille de chaque bloc présentant les activités de marseille*/
        #vieux_port, #parc_calanques, #pomegues, #frioul, #garde, #longchamp {
            height: 250px;
            width: 100%;
            margin-bottom: 20px;
        }
    }


/*---------------- Fin d'aptation pour les smartphones ------------------*/






@media all and (min-width:608px)
{
    /*Faire disparaître la loupe de recherche*/
    form input + span
    {
        display:none;
    }
}








/*---------------- Adaptation pour les Petits ordis et Tablettes------------------*/

@media all and (max-width:1290px) and (min-width:608px)
{
    /*Le conteneur principale*/
    #conteneur_princip
    {
        padding:0px;
    }
    /*Tout juste après le header*/
    header + .conteneur
    {
        padding-left:1%;
        padding-right:1%;
    }

    /*Réglage du bloc hébergement et du bloc des logements les plus populaires dans la ville*/
    header +.conteneur +.conteneur
    {
        flex-direction:column-reverse;
        padding-left:1%;
        padding-right:1%;
    }
    #hebergements_marseille
    {
        margin-right:0px;
    }
    #populaires
    {
        margin-bottom:20px;
    }
    #herg_popu
    {
        flex-direction:row;
    }
    #herg_popu a
    {
        width:30%;
    }
    .im_popu
        {
            width:100%;
            /* height:100%; */
            background: no-repeat center/170% ;
        }
    


    /*Le volet des filtres*/
    #filtres
    {
        align-items:flex-start;
        justify-content: flex-start;
        width:auto;
        max-width:938px;
        margin-bottom:0px;
    }
    /*Le mot Filtre*/
    #filtres p
    {
        margin-left:0px;
        margin-top:20px;
    }
    /*je modifie l'affichage des filtres*/
    #filtres ul
    {
        /* width:100%; */
        height:auto;
        flex-wrap:wrap;
        margin-left:25px;
        align-content:space-between;
    }
    #filtres li
    {
        margin-bottom:10px;
        height:50px;
        position:relative;
        padding-left:52px;
        margin-right:10px;
    }
    /*Je modifie l'affichage des icônes*/
    #filtres span
    {
        height:54px;
        width:54px;
        border-radius:54px;
        position:absolute;
    }

    /*La phrase informative sur le nombre de logements*/
    #nb_logments_ville
    {
        margin-top:25px;
    }

    /*Les images des lieux d'activités pour les longs div*/
    .im_act
    {
        height:100%;
        background: no-repeat center/450% ;
    }
    /*Le grand bloc concernant les activités à marseille*/
    #activites_h
    {
        padding-left:1%;
        padding-right:1%;
    }
}


    /*---------------- Uniquement pour les Tablettes ------------------*/

@media all and (max-width:903px) and (min-width:608px)
{
    
    /* Bloc des hébergements populaires*/
    #herg_popu
    {
        flex-wrap:wrap;
    }
    /* Changement pour les logements populaires */
    #herg_popu a
    {
        max-width:235px;
        height:190px;
        border:5px white solid;
        overflow:hidden;
        border-radius:18px;
        display:flex;
        flex-direction:column;
        justify-content: flex-end;
        margin-bottom:20px;
    }


    /*Les bannières de dexcription pour les logements dans cette section*/
    #herg_popu .description
    {
        background-color:white;
        height:75px;
        width:100%;
        padding:5px;
    }

    /*Modification du bloc des activités*/
    .im_popu
    {
        height:100%;
        background: no-repeat center/110% ;
    }

    #vieux_port,#parc_calanques,#volet_vertic_deux,#volet_vertic_quatre
    {
        width:45%;
        height:450px;
    }

    #activites
    {
        flex-wrap:wrap;
        height:940px;
        align-content: space-between;
    }

    /*modification du pied de page*/
    footer div div
    {
        width:25%;
    }
}

/*---------------- Fin d'adaptation pour les Petits ordis et Tablettes ------------------*/


/********* FIN DES MEDIAS-QUERIES *********/