/*******************************************************
                      GLOBAL
*******************************************************/
/* ======= Déclaration de variables CSS =========*/
:root {
    --navHover-h1-btn: #deb245;
    --nav-h2-border-legend-hr: #8e6d78;
    --bg-header-section-footer: #fff;
}
/* ======= Fin de déclaration de variables CSS ===*/

* {
    box-sizing: border-box;
    /*outline: none;*/
}

html {
    font-size: 62.5%;
}

body {
    background-color: #f2f2f2;
    color: #666;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.8;
    letter-spacing: 1px;
    font-size: 1.6rem;
    text-align: center;
}

a {
    text-decoration: none;
}

a:hover {
    transition: all .2s ease 0s;
}

.container {
    margin: 25px auto;
    max-width: 95%;
}

h1 {
    color: var(--navHover-h1-btn);
    font-family: 'Lobster Two', cursive, arial, sans-serif;
    font-size: 3.5rem;
    padding-top: 15px;
    padding-bottom: 30px;
}

h2 {
    color: var(--nav-h2-border-legend-hr);
    font-size: 2.5rem;
    padding-bottom: 8px;
}

h3 {
    font-size: 2rem;
    padding-bottom: 3px;
}

.lien {
    color: var(--navHover-h1-btn);
    font-weight: bold;
    letter-spacing: 0.1em;
}

span {
    color: var(--nav-h2-border-legend-hr);
    font-weight: bold;
    letter-spacing: 0.1em;
}

hr {
	background-color: var(--nav-h2-border-legend-hr);
	border: 0;
	height: 1px;
	margin: 50px;
}


/*******************************************************
                      HEADER
*******************************************************/
header {
    font-family: 'Warnes', cursive, arial, sans-serif;
    background-color: var(--bg-header-section-footer);
    border-radius: 8px; 
}

header li {
    list-style-type: none;
}

header li:not(.sub) {
    margin: 15px;
    padding : 5px;
}

header ul.navFlex {
    padding : 20px
}

.menu-domaine,
.menu-hebergement,
 nav a {
    color: var(--nav-h2-border-legend-hr);
    font-size: 2.3rem;
}

header nav a:hover {
    color: var(--navHover-h1-btn);
}

.submenu {
    display: none;
    padding: 0px;
    background-color: var(--bg-header-section-footer);
}

.submenu li {
	margin-bottom: 5px;
    padding: 5px;
}

.submenu li a {
	font-size: 1.9rem;
}

nav li:hover .submenu {
    display: inline-block;
    display: flex;  
    flex-direction: column;
}


/*******************************************************
                      MAIN
*******************************************************/
/* ============ GLOBAL ===================*/
section{
    background-color: var(--bg-header-section-footer);
    border-radius: 8px; 
}

/************Style tableau*****************************/
table {
	border-collapse: collapse;
	margin: 0 auto;
    width: 60%;

}

caption {
    padding: 15px;
}

table thead {
	font-weight: normal;
	background-color: var(--nav-h2-border-legend-hr);
	border: 1px solid var(--nav-h2-border-legend-hr);
	color: white;
	padding: 5px;
}

table tbody tr:nth-child(even) { /*Pour un background une ligne sur deux*/
	background-color: #fff4e0;
}

table tbody tr:nth-child(odd) {
	background-color: #f3ecee;
}
table th {
	text-align: left;
    padding: 5px;
    text-align: center;
}

table tr td {
	padding: 5px 10px;
	border: 1px solid var(--nav-h2-border-legend-hr);
	text-align: justify;
}


/************Style bouton******************************/
.btn {
    display: inline-block;
    padding: 5px 20px;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    font-weight: bold; 
    line-height: 1.5em; 
}

.button-cancel {
    background-color: var(--nav-h2-border-legend-hr);
    color: var(--navHover-h1-btn);
    margin: 20px 10;
}

.button-cancel:hover {
    background-color: #f3ecee;
}

.button-primary {
    background-color: var(--navHover-h1-btn);
    color: var(--nav-h2-border-legend-hr);
    margin: 20px 10px;
}

.button-primary:hover {
    background-color: #fff4e0;
}

.button {
    background-color: var(--navHover-h1-btn);
    color: var(--nav-h2-border-legend-hr);
    
}
.button:hover {
    background-color: #fff4e0;
}

/*On personnalise le label en bouton (Choisissez une photo)*/
.label-file {
    cursor: pointer;
    font-weight: bold;
}
.label-file:hover {
    color: #25a5c4;
}

/*On masque le input*/
.input-file {
    display: none;
}


/************Style formulaire**************************/
/*Dim. form*/
.generic-form {
    margin: 0 auto;
    width: 60%;
    padding-bottom: 15px;
}

/*Bordure*/
.generic-form fieldset {
    border-color: var(--nav-h2-border-legend-hr);
}

/*Petit titre*/
.generic-form fieldset legend {
    color: var(--nav-h2-border-legend-hr);
    font-weight: bold;
    letter-spacing: 0.1rem;
}

/*Dim. int. et bordure champs*/ /*Sélecteur d'attribut qui vise uniquement les inputs de type text et password*/
.generic-form input[type="password"],
.generic-form input[type="text"],
.generic-form select,
.generic-form textarea {
    
     /*Structure */
    padding: 5px 10px 5px;
    margin: 5px 0 10px;

     /*Presentation */
    border: 1px solid grey;
    transition: background-color 0.33s;
    
     /*Espacement de la police*/
    letter-spacing: 0.1rem;
}

/*Couleur de fond à saisi du texte*/
.generic-form input[type="password"]:focus,
.generic-form input[type="text"]:focus,
.generic-form select:focus,
.generic-form textarea:focus {
    background-color: #fff4e0;
}

/*Pas de redim. possible du champs par l'util. */
.generic-form textarea {
    resize: none;
}

/*Pas de puce*/
.generic-form ul {
    list-style-type: none;
    padding: 5px 0 5px;
}

/*Aligne les champs et met les titres en gras*/
.generic-form ul li label {
     /*presentation */
    color: #2F2933;
    font-weight: bold;
    
    /*Espacement de la police*/
    letter-spacing: 0.05rem;
}

/*Place le titre en haut du champs*/
.generic-form ul li label.textarea {
    vertical-align: top;
}

.generic-form ul li label {
     /*Structure */
    display: block;
}

/* Erreur et succes formulaire */
.error {
    color : #991d4d;
    font-weight : 700;
}

.succes {
    color : #0b633d;
    font-weight : 700;
}


/************Section index / slider********************/
.toolbar {
    text-align:center;
}

figure {
    display: none;
}
.active {
    display: block;
}

.slider img {
    width: 70vw;
    height: 15vh;
    
}


/************Section index*****************************/
.index > p {
    margin: auto; 
    max-width: 90%;
    padding: 15px;
    font-size: 2rem;
    
}

.index ul {
    padding: 5px;
}

.index li {
    list-style-type: none;
    border: 2px solid var(--nav-h2-border-legend-hr);
    border-radius: 8px; 
    padding: 15px;
    margin: 15px;
}

.index h2 i {
    color: var(--navHover-h1-btn);
}

.index h2 a {
    color: var(--nav-h2-border-legend-hr);
}

.post-list em {
    color: var(--nav-h2-border-legend-hr);
    font-size: 1.8rem;
    padding: 0px 10px;
}


/************Section montrer_article*******************/
.montrer_article img {
    width: 250px;
    height: 185px;
    border: solid 2px var(--nav-h2-border-legend-hr);
    border-radius: 4px;
}

.montrer_article article {
    padding: 15px;
}

.montrer_article article ~ p {
    color: var(--nav-h2-border-legend-hr);
    text-align: center;
    padding: 15px;
}

.post em {
    color: var(--nav-h2-border-legend-hr);
    font-size: 1.8rem;
}


/************Section bastide et jardins****************/
/* ============ FLEX IMG===bast et jar=====*/
.domaineFlex img {
    width: 250px;
    height: 175px;
    margin: 0px 10px 20px 10px;
    border: solid 2px #999;
}

.jardins div,
.bastide div {
    padding-bottom: 30px;
}

.jardins p,
.bastide p {
    padding: 15px;
    margin: 15px;
}


/************Section proprietaires*********************/

/* ============ GRID =====================*/
.proprietaires img {
    max-width: 100%;
    border-radius: 3px;
}

.wrapper {
    width: 285px;
    margin: 8px auto;
    padding-bottom :10px;
    box-sizing: border-box;
}

.box {
    border-radius: 3px;
    background-color: #999;
    box-shadow: 0 1px 3px 0 rbba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.boxColor {
    background-color: var(--bg-header-section-footer);
}   
    
.row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: 55px;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.tallDiv {
    grid-row: span 2;
}


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

.wrapper {
    width: 395px;

}

.row {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: 65px;

}
}


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

.wrapper {
    width: 720px;
}

.row {
    grid-auto-rows: 130px;
}
}


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

.wrapper {
    width: 900px;

}

.row {
    grid-auto-rows: 165px;

}
}


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

.wrapper {
    width: 1170px;
}

.row {
    grid-auto-rows: 202px;

}
}
/* ============ FIN DU GRID ==============*/


/************Section chambres**************************/
.chambres > p {
    padding: 10px;
    margin: 0 auto 50px;
    max-width: 80%;
}

.chambres img {
    width: 230px;
    height: 170px;
    border: solid 2px var(--nav-h2-border-legend-hr);
    border-radius: 4px;
}

.chambres img:hover {
        opacity: 0.5;
}

.chambres div {
    padding: 5px;
}

.chambres article {
    border: 2px solid var(--nav-h2-border-legend-hr);
    border-radius: 8px; 
    padding: 10px;
    margin: 20px 10px;
}


/************Section chambres : indépendante***********/
.andrea img,
.jacques img, 
.jumeaux img, 
.lolotte img,
.octavie img,
.justin img {
    width: 250px;
    height: 185px;
    border: solid 2px #999;
    margin: 25px;
    border-radius: 4px;
}

.octavie .imgHaut img {
    width: 250px;
    height: 400px;
}

.andrea li,
.jacques li, 
.jumeaux li, 
.lolotte li, 
.octavie li,
.justin li {
    list-style-type: none;
    font-size : 1.8rem;
    margin: 5px auto  ;
    max-width: 70%;
}

.andrea ul,
.jacques ul, 
.jumeaux ul, 
.lolotte ul, 
.octavie ul,
.justin ul {
    padding: 5px 15px 15px;
}

.andrea p.descrip,
.jacques p.descrip, 
.jumeaux p.descrip, 
.lolotte p.descrip, 
.octavie p.descrip,
.justin p.descrip {
    font-size : 2rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    border: 1px dashed #999;
    border-bottom: 0;
}

.andrea p,
.jacques p, 
.jumeaux p, 
.lolotte p, 
.octavie p,
.justin p {
    padding: 10px;
    margin: 35px auto 0 ;
    max-width: 70%;
}

.andrea .action:hover,
.jacques .action:hover, 
.jumeaux .action:hover, 
.lolotte .action:hover, 
.octavie .action:hover,
.justin .action:hover {
    color: var(--navHover-h1-btn);
}

.andrea a,
.jacques a, 
.jumeaux a, 
.lolotte a, 
.octavie a,
.justin a {
    color: var(--nav-h2-border-legend-hr);
    font-size: 2.5rem;
}

.andrea .action i,
.jacques .action i, 
.jumeaux .action i, 
.lolotte .action i, 
.octavie .action i,
.justin .action i {
    color: var(--navHover-h1-btn);
}


/************Section salles communes*******************/
.sallesCo img {
    width: 250px;
    height: 175px;
    margin: 0px 10px 20px 10px;
    border: solid 2px #999;
}

.sallesCo article {
    margin: 0 auto 80px;
}

.sallesCo aside {
    margin: 0 auto;
}

.sallesCo p {
    padding: 15px;
    margin: 15px;
}

.sallesCo aside p{
    padding-bottom: 15px;
}
.salon p{
    padding-top: 35px;
}


/************Section autour de nous********************/
.stMarc .aix {
    padding: 15px;
    margin-bottom: 25px;
}

.autourDeNous img {
    width: 205px;
    height: 150px;
    border: solid 2px #999;
}

.autourDeNous article {
    padding: 15px;
    margin: 15px 35px;
}

.autourDeNous h3 {
    text-decoration: underline;
}


/************Section accés ****************************/
iframe {
	border: 0;
	display: block;
	height: 450px;
	width: 100%;
}
.acces p {
    padding: 15px;
    margin: 15px;
}


/************Section contact***************************/
.contact div {
    padding: 10px 10px 35px 10px;
    margin: 10px;
}

.contact i {
    display: block;
    border-bottom: 1px dashed var(--navHover-h1-btn);
    color: var(--nav-h2-border-legend-hr);
    font-size: 4.8rem;
    padding-bottom: 25px;
}

.contact a {
    color: var(--nav-h2-border-legend-hr);
}

.contact address {
    margin-top: 16px;
}


/************Section tarifs et services*****************/
.tarifsEtServ ul {
    padding: 20px;
}

.tarifsEtServ li {
    list-style-type: none;
}

.tarifsEtServ h2 {
    padding: 20px 40px 0;
}

.tarifs li {
    text-align : justify;
    padding: 0 5px;
    margin: 15px 5px;
}


/************Section avis******************************/
.commentaires a {
    color: var(--nav-h2-border-legend-hr);
    font-weight: bold;
    letter-spacing: 0.1em;
    font-size: 3rem;
}

    /*
     * Styles des commentaires
     */
     
#result ul {
    padding: 20px;
}

.comment-list {
    list-style-type: none;
}

.commentaires .action:hover {
    color: var(--navHover-h1-btn);
}

.commentaires h2 {
    margin-top: 45px;
    border-bottom: solid;
    border-bottom-width: thin;
}


/************Section se connecter et s'enregistrer*****/
.register > p,
.login > p {
    margin: auto; 
    max-width: 90%;
    padding: 50px;
    font-size: 2rem;
    letter-spacing: 0.1em;
    font-weight: bold;
    color: var(--nav-h2-border-legend-hr);
}

.register a:hover,
.login a:hover {
    opacity: 0.5;
}


/************Section admin*****************************/
.administration .action i {
    color: var(--navHover-h1-btn);
}

.administration .action:hover {
    color: var(--navHover-h1-btn);
}
.administration .edit i {
    color: var(--navHover-h1-btn);

}

.administration a:not(.action) {
    color: var(--nav-h2-border-legend-hr);
    font-size: 2rem;

}

.administration i {
    color: var(--nav-h2-border-legend-hr);
    font-size: 2.5rem;
    padding: 0px 10px;
}

.table-responsive {
    padding: 15px;
}

/*Dim int. et bordure champs*/
.administration .generic-form input[type="text"],
.administration .generic-form select {
    /*volume du champs*/
    margin-right: 15px;
}

/*Nom du user*/
.generic-form p {
    font-weight: bold;
    letter-spacing: 0.1rem;
    font-size:  1.8rem;
}


/************Section mentions legales******************/
.mentionLegal article {
    max-width:80%;
    margin: 0 auto;
    padding-bottom: 30px;
}

 li {
    list-style-type: none;
}

.mentionLegal ul {
    padding: 20px;
}


/************Section 404*******************************/
p.erreur {
    color: var(--nav-h2-border-legend-hr);
    font-weight: bold;
    letter-spacing: 0.1em;
}

svg.desk {
    display: none
}


/****************************************************
                    FOOTER
*****************************************************/
footer {
    background-color: var(--bg-header-section-footer);
    border-radius: 8px; 
}

footer img {
    width: 185px;
}

footer div {
    padding-top: 40px;
    padding-bottom: 20px;
}

footer p {
    padding: 0 10px;
}

footer a {
    color: var(--nav-h2-border-legend-hr);
    font-family: 'Warnes', cursive, arial, sans-serif;
    font-size: 2.5rem;
}

footer a:hover {
    color: var(--navHover-h1-btn);
}


/*======================================================
                    MEDIA QUERIES
======================================================*/

/*======================= MOBILE =====================*/

/********section administration tableau responsive*****/
/* ============ Associée à : main.tabResp.js =========*/

@media screen and (max-width: 575px) { /*s'applique jusqu'à 575px*/
    
.table-responsive table, 
.table-responsive thead, 
.table-responsive tbody, 
.table-responsive tr, 
.table-responsive th, 
.table-responsive td {
    display: block;
}

.table-responsive thead {
    display: none;
}

.table-responsive td {
    padding-left: 60px;
    position: relative;
    margin-top: -1px;

}

.table-responsive td::before {
    padding: 5px;
    content: attr(data-label);
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    bottom: 0;
    background-color: var(--nav-h2-border-legend-hr);
    color: #fff;
    display: flex;
    align-items: center;
    font-weight: bold;
}

.table-responsive tr {
    margin-bottom: 1rem;
}

.table-responsive th + td {
    padding-left: 10px;
}

table {
    width: 75%;
}
 
tr.desk {
    display : none;
}  
  
  
/********section administration formulaire responsive**/  
.generic-form input[type="password"], 
.generic-form input[type="text"], 
.generic-form select, 
.generic-form textarea {
    width: 140px;
}
  
.generic-form p {
    font-size: 1.2rem;
}
  
/*Aligne les champs et met les titre en gras*/
.generic-form ul li label {
     /*structure */
    display: inline-block;
}

/*Permet l'alignement des champs*/
.generic-form ul li label {
    width: 150px;
}
  

}


/*======================= TABLETTE ===================*/

@media screen and (min-width: 768px){ /*s'applique à partir de 768px et au-delà*/

/* ============ HEADER ===================*/
header nav {
    max-width: 95%;
    margin: 0 auto;
}

.menu-domaine,
.menu-hebergement,
 nav a {
    color: var(--nav-h2-border-legend-hr);
    font-size: 2.5rem;
}

.submenu li a {
	font-size: 2rem;
}


/************Section slider****************************/
.index > p {
    padding: 50px;
}


/************Section index / slider********************/
.slider img {
    width: 80vw;
    height: 30vh;
}


/************Section index / événements****************/
.post-list {
    padding : 20px;
}


/************Section montrer_article*******************/
.montrer_article article {
    margin: 0 auto;
    max-width: 70%;
}

.montrer_article p {
    text-align : justify;
}

.montrer_article h2 {
    text-align: left;
}

.montrer_article img {
    width: 475px;
    height: 325px;
}


/************Section bastide et jardins****************/
.jardins p,
.bastide p {
    text-align : justify;
    padding: 50px;
}

.jardins h2,
.bastide h2 {
    text-align: left;
    padding-left: 50px;
}


/************Section chambres**************************/
.chambres article {
    margin: 25px auto 15px;
    max-width: 60%;
    padding: 0px 30px 20px;
}

.chambres h2 {
    text-align: left;
}


/* ============ FLOAT ===================*/
/* ===montrer_art===chambres===sallesCo===autourDeN===*/
.img-left {
	float: left;
	margin-right: 25px;
}

.overflow-h {
	overflow: hidden;
}
/* ============ FIN FLOAT ================*/


.chambres p {
    text-align : justify;
    margin-bottom: 35px;
}

.chambres .btn {
    margin-top: 20px;
}


/************Section chambres : indépendante***********/
.andrea img,
.jacques img, 
.jumeaux img, 
.lolotte img, 
.octavie img, 
.justin img {
    width: 475px;
    height: 325px;
    margin: 75px;
}

.octavie .imgHaut img {
    width: 475px;
    height: 750px;
}

.andrea ul,
.jacques ul, 
.jumeaux ul, 
.lolotte ul, 
.octavie ul,
.justin ul {
    text-align : justify;
}

.andrea p,
.jacques p, 
.jumeaux p, 
.lolotte p, 
.octavie p,
.justin p {
    text-align : justify;
}


/************Section salles communes*******************/
.sallesCo article, aside {
    max-width: 85%;
    text-align : justify;
}

.salon img {
    margin: 15px 30px;
}


/* ============ FLEX ====================*/
/* ==index===bastide===jardins===chambres===sallesCo===*/
.domaineFlex {
    display : flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap : wrap;
    align-items: center;
    width: 100%;
}


/************Section accés********************/
.acces p {
    text-align : justify;
    padding: 25px;
    margin: 25px;
}


/************Section autour de nous********************/
/* ============ FLOAT ===================*/
/* ===montrer_art===chambres===sallesCo===autourDeN===*/
.img-right {
	float: right;
	margin-left: 25px;
}

.autourDeNous p {
    text-align : justify;
}

.autourDeNous h3 {
    text-align : left;
}

.autourDeNous img {
    width: 300px;
    height: 225px;
}


/************Section tarifs et services*****************/
.tarifs h3 {
    text-align : left;
}

.tarifs li {
    text-align : justify;
    padding: 0 50px;
    margin : 10px 10px;
}


/************Section avis******************************/

    /*
     * Styles des commentaires
     */
 
.commentaires h2 {
    text-align: left;
    padding : 5px 5px 5px 115px;
}

#result li {
    text-align: left;
    padding : 5px 95px;
}


/************Style Formulaire**************************/
.generic-form input[type="password"], 
.generic-form input[type="text"], 
.generic-form select, 
.generic-form textarea {
    /*Volume du champs*/
    width: 170px;
}

.modifier_evenements .generic-form input[type="password"],
.modifier_evenements .generic-form input[type="text"],
.modifier_evenements .generic-form select,
.modifier_evenements .generic-form textarea,
.creer_evenements .generic-form input[type="password"],
.creer_evenements .generic-form input[type="text"],
.creer_evenements .generic-form select,
.creer_evenements .generic-form textarea {
    /*Volume du champs*/
    width: 305px;
}

/*Décalage entre le champs (li) etant le dernier enfant de son parent*/
.generic-form ul li:last-child {
    margin-left: 116px;
}

/*Décalage entre le champs (li)*/
.generic-form ul li {
    margin: 1rem 0;
}

/*Pour aligner avec les boutons*/
.generic-form ul li:last-child {
    margin-left: 116px;  
    margin: auto;
    margin-top: 3rem;
}

/*Aligne les champs et met les titres en gras*/
.generic-form ul li label {
     /*Structure */
    display: inline-block;
}

/*Permet l'alignement des champs*/
.generic-form ul li label {
    width: 150px;
}


/************Section administration tableau************/
tr.mobil {
    display : none;
}


/************Section mentions legales******************/
.mentionLegal article {
    text-align : justify;
}


/************Section 404*******************************/
svg.mobil {
    display : none;
}
svg.desk {
    display : inline-block;
}


}


/*======================= DESKTOP ====================*/

@media screen and (min-width: 1025px) { /*s'applique à partir de 1025px et au-delà*/

/* ============ HEADER ===================*/
/* ============ FLEX ====================*/
.navFlex {
    display : flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap : wrap;
    align-items: center;
    width: 100%;
}

.menu-domaine,
.menu-hebergement {
    position: relative;
}

.submenu {
    position: absolute;
    left: -10%;
    right: -10%;
}


/************Section slider****************************/
.slider img {
    width: 88vw;
    height: 40vh;
    
}


/************Section bastide et jardins****************/
.jardins,
.bastide {
    max-width: 100%;
    margin: 0 auto;
}


/* ============ FLEX IMG===bast et jar=====*/
.domaineFlex img {
    width: 300px;
    height: 200px;
}


/************Section salles communes*******************/
.sallesCo img {
    width: 300px;
    height: 200px;
}


/************Style formulaire**************************/
.creer_evenements .generic-form ul li label {
    width: 222px;
}

.modifier_evenements .generic-form ul li label {
    width: 208px;
}

.generic-form input[type="password"],
.generic-form input[type="text"],
.generic-form select,
.generic-form textarea {
    /*Volume du champs*/
    width: 350px;
}

.modifier_evenements .generic-form input[type="password"],
.modifier_evenements .generic-form input[type="text"],
.modifier_evenements .generic-form select,
.modifier_evenements .generic-form textarea,
.creer_evenements .generic-form input[type="password"],
.creer_evenements .generic-form input[type="text"],
.creer_evenements .generic-form select,
.creer_evenements .generic-form textarea {
    /*Volume du champs*/
    width: 450px;
}


/************Section contact***************************/
/* ============ FLEX ====================*/
.contact .flex {
    display : flex;
    justify-content: space-around;
    flex-basis: 32%;
}
 
 
/************Section tarifs et services****************/
.tarifsEtServ article.tarifs {

    max-width:70%;
    margin: 0 auto;
}

.tarifsEtServ article.services {

    max-width:80%;
    margin: 0 auto;
}


/* ============ FLEX ====================*/
.tarifsEtServFlex {
    display : flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap : wrap;
    align-items: flex-start;
    width: 100%;
}


}