/* voir comme point de départ : https://developer.mozilla.org/fr/docs/Web/CSS */

html {
    /* initialisation des règles par défaut qui prendront le pas sur les règles propres au navigateur */

    box-sizing: border-box;
    /* voir https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing */

    margin: 0;
    padding: 0;
    font-size: 18px;
}




body {
    margin: 0;
    /* pour ne pas avoir d'ascenseur horizontal et vertical sur la fenêtre du navigateur */

    padding: 0;
    /* pour ne pas avoir d'ascenseur horizontal et vertical sur la fenêtre du navigateur */

    width: 100%;
    /* on occupe toute la largeur de la fenêtre */

    height: 100vh;
    /* et toute la hauteur */

    font-size: calc(0.4rem + 0.5vw);
    /* taille "responsive" des caractères */

    display: grid;
    /* construction de la page en forme de tableau (grille) */

    grid-template-columns: 15% 1fr;
    /* deux colonnes (15% de la largeur et le reste) */

    grid-template-rows: auto 3em 1fr 2em;
    /* 4 lignes (header, nav, main et footer) auto pour que le header s'adapte à l'image */

    grid-auto-rows: auto;

    grid-template-areas:
        "h h"
        "n n"
        "m m"
        "f f";
    /* dénomination de chaque case du tableau (2 colonnes et 4 lignes) */
}

 /* lien contacter toujours présent 
#contacter {
    position: absolute;
    top: 50%;
    right: 0px;
}*/



header {
    grid-area: h;
    /* détermine la ou les cases occupées par le header */

    background-color: #ddd0c8;
    /* couleur d'arrière-plan du header */


}




header img {
    width: 100%;
    /* largeur de l'image contenue dans le header */

    height: 100%;
}




nav {
    /* barre horizontale de menus */
    background-color: rgb(076, 076, 076);
    color: rgb(0, 0, 0);
    grid-area: n;
    text-align: center;
    display: flex;

    justify-content: center;
    /* aligne horizontalement à droite les éléments du "nav" */

    align-items: center;
    /* centre verticalement les éléments contenus dans le "nav"  */
}


.bleu {
    font-style: normal;
    font-size: large;
    font-weight: bolder;
    color: rgb(127, 255, 0);
    /* colorise le texte "Me contacter" dans le "nav"  */
}

 /*
.blink {
    animation: blink 2s infinite;
  }
  @keyframes blink { 
    0% { opacity:0; }
    50% { opacity:1; } 
    100% { opacity:0; }
  }
 fait clignoter le texte "Me contacter" dans le "nav"  */


/*  NAV  nouveau */

nav>ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    /* aligne successivement horizontalement à droite les éléments du "nav" */
    align-items: center;
    /* centre verticalement les éléments contenus dans le "nav"  */
}

.sousMenu {
    position: relative;
    display: inline-block;
}

.sousMenu>button {
    color: white;
    background-color: rgb(076, 076, 076);
    border: solid rgb(152, 200, 233) 1px;
    cursor: pointer;
}

.sousMenu>ul {
    display: none;
    position: fixed;
    right: 0;
}

.sousMenu:hover>ul {
    background-color: rgb(152, 200, 233);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.sousMenu ul a {
    padding: 1em;
    text-decoration: none;
}

.sousMenu ul a:hover {
    background-color: rgb(083, 142, 200);
}

/* Fin NAV nouveau */



nav div {
    /* format du div contenant le logo "menu" lorsque l'écran est celui d'un téléphone portable */
    padding: 0 1em;   
    /* marge intérieure de 0 pour haut/bas et 1em pour droite/gauche */
}

nav div a {
    text-decoration: none;
    font-size: small;
    color: rgb(127, 255, 0);
}

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

    /* fait disparaitre le div contenant le logo "menu" lorsque l'écran fait 400px ou plus */
    nav div {
        display: none;
    }
}

@media screen and (max-width:799px) {

    /* fait disparaitre la liste "ul" des menus lorsque l'écran fait moins de 400px  */
    nav ul {
        display: none;
    }
}

@media screen and (max-width:799px) {

    /* fait disparaitre la liste ">ul" (le menu avec sous-menus) lorsque l'écran fait moins de 400px  */
    nav>ul {
        display: none;
    }
}



@media screen and (max-width:799px) {
    div#index2colonnes div {
        max-width: 100%;
    }

    div#nous2colonnes div {
        max-width: 100%;
    }

    /*sur écran plus petit, chaque texte occupe la pleine largeur*/
}


nav li#actif {
    /* élément actif du menu dans nav */

    background-color: rgb(083, 142, 200);

}


/*aside {
    /* colonne de gauche avec la photo des livres */

/* background-size: cover;
    grid-area: a;
    background-color: rgb(239, 168, 139);
    color: rgb(0, 0, 0);
    text-align: center;
    font-weight: bold;
    font-size: 36px;
    overflow-y: auto;
    /* pour que aside "glisse" sous footer 
}*/


@media screen and (max-width:799px) {
    /* fait disparaitre le block aside lorsque l'écran fait moins de 800px  */

    body {
        width: 100vw;
        /* on occupe toute la largeur de la fenêtre */

        height: 100vh;
        /* et toute la hauteur */

        font-size: calc(0.4rem + 0.5vw);
        /* taille "responsive" des caractères */

        display: grid;
        /* construction de la page en forme de tableau (grille) */

        grid-template-columns: 100vw;
        /* 1 seule colonne */

        grid-template-rows: auto 4em 1fr 2em;
        /* 4 lignes (header, nav, main et footer) auto pour que le header s'adapte à l'image */

        grid-auto-rows: auto;

        grid-template-areas:
            "h"
            "n"
            "m"
            "f";
        /* redessine les cases du grid  (1 seule colonne à présent), le "main" occupe toute la ligne */
    }
}



main {
    /* corps de la page */
    grid-area: m;
    background-image: url("/Images/Background.png");
    background-color: rgb(255, 255, 255);
    color: rgb(076, 076, 076);
    font-style: normal;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: normal;
    text-align: center;
    overflow-y: auto;
    /* pour que main "glisse sous footer */
}

footer {
    /* pied de page */
    grid-area: f;
    color: #ddd0c8;
    font-weight: bold;
    background-color: rgb(076, 076, 076);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer a {
    text-decoration: none;
}

article#a {
    border: solid rgb(50, 50, 50, .3) 2px;
    width: 50%;
    color: rgb(076, 076, 076);
   
    padding: 1em;
    background-color: rgb(221, 208, 200, .3);
    
    text-align: center;
    margin-bottom: 1em;

}


article#b {
    border: solid #323232 2px;
    width: 50%;
    color: #323232;
    padding: 1em;
    background-color: #ddd0c8;
    text-align: center;
}


article#c {
    border: solid rgb(50, 50, 50, .3) 2px;
    width: 50%;
    color: rgb(0, 0, 0);
    padding: 1em;
    background-color: rgb(221, 208, 200, .6);
    text-align: center;
}

article#d {
    height: 1em;
}



/* Partie "main" de la page nous.html */

div#nous2colonnes {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    /* pour mettre sur une colonne si nécessaire */
}


div#nous2colonnes div {
    flex: 1;
    /*les deux colonnes ont la même largeur*/
    max-width: 25%;
    /*Chaque texte prendra la moitié de la largeur par défaut*/
    /*min-height: 100%;
    /*chaque div comprendra 100% du texte*/
}


div#d1 {
    color: rgb(0, 0, 0);
    border: solid #323232 2px;
    padding: 2em;
    height: 100%;
    /*la hauteur du div s'adapte à son contenu*/
    width: 25%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ddd0c8;
    margin-bottom: 1em;

}


div#d2 {
    color: rgb(0, 0, 0);
    border: solid #323232 2px;
    padding: 2em;
    height: 100%;
    /*la hauteur du div s'adapte à son contenu*/
    width: 25%;
    float: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ddd0c8;
    margin-bottom: 1em;

}







/* Partie "main" de la page index.html */

div#index2colonnes {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;

    /* pour mettre sur une colonne si nécessaire */
}

div#index2colonnes div {
    flex: 1;
    /*les deux colonnes ont la même largeur*/
    max-width: 60%;
    /*Chaque texte prendra la moitié de la largeur par défaut*/
    min-height: 100%;
    /*chaque div comprendra 100% du texte*/

}

div#d3 {
    display: flex;

    flex-direction: column;
    /* aligne verticalement les éléments contenus dans le div */

    justify-content: center;
    /* centre verticalement le contenu du div */

    align-items: center;
    background-color: rgb(152, 200, 233);
    color: rgb(0, 0, 0);
    text-align: justify;
    border: solid rgb(239, 168, 139) 2px;
    padding: 2em;
    height: 27em;
    /*width: 30%;*/
    height: 100%;
    /*la hauteur du div s'adapte à son contenu*/
}

div#d4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(152, 200, 233);
    color: rgb(0, 0, 0);
    text-align: center;
    border: solid rgb(239, 168, 139) 2px;
    padding: 2em;
    height: 27em;
    /*width: 30%;*/
    height: 100%;
    /*la hauteur du div s'adapte à son contenu*/
    margin-top: 1em;
}

br {
    text-align: justify;
}

span {
    font-style: italic;
}

ul {
    list-style-type: none;
    margin: 0;

    padding: 1px;
    /* Juste le bon espace autour des sous-menus */

    overflow: hidden;
    background-color: rgb(076, 076, 076);
}


li {
    float: left;
}


li a {
    /* liste des liens de la barre horizontale de navigation */

    display: block;
    /* type de boite */

    color: white;
    /* couleur de police */

    text-align: center;
    /* texte centré dans le block */

    font-weight: bold;
    /* police en gras */

    padding: 5px 15px;
    /* marges intérieures des boutons de liens vers d'autres pages (haut/bas puis droite/gauche) */

    text-decoration: none;
    /* pour enlever le soulignement des liens */
}


a {
    /* couleur des liens vers d'autres pages */
    color: rgb(083, 142, 200);
}

img {
    width: 50%;
}


.contain {
    object-fit: contain;
    /* Pour ne pas que les proportions des photos se déforment sur Ipad*/
}

.o {
    /* largeur de la classe "o" */
    width: 20%;
}

.pasgras {
    font-weight: normal;
}

.z {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #323232;
}

.cgvml {
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
    padding: 2em;
    
}


/* CSSMenu Déroulant */

label {
    font-family: sans-serif;
    font-size: 1rem;
    padding-right: 10px;
}

select {
    font-size: 0.9rem;
    padding: 2px 5px;
}







/*CSS du formulaire de contact*/


ul#formulaire {
    list-style: none;
    padding: 0;
    margin: 0;
    color: rgb(50, 50, 50);
    background-color: rgb(50, 50, 50, .3);
}

label {
    /* Taille et alignement uniformes */
    display: inline-block;
    width: 100%;
    text-align: center;
    color: rgb(255, 255, 255);
}

input,
textarea {
    /* On s'assure que les champs texte ont la même police
     Par défaut, les zones de texte ont une police à chasse
     fixe. */
    font: 1em sans-serif;

    /* Taille uniforme pour des champs */
    width: 75%;
    box-sizing: border-box;
    color: rgb (255, 255, 255);
   
    /* On utilise la même bordure que pour le formulaire */
    border: 1px solid rgb(076, 076, 076);
}

input:focus,
textarea:focus {
    /* On rajoute une mise en avant pour les éléments avec
     le focus. */
    border-color: rgb(076, 076, 076);
}

textarea {
    /* On aligne les textes sur plusieurs lignes avec leur
     libellé. */
    vertical-align: top;

    /* On fournit un peut d'espace pour saisir du texte. */
    height: 8em;

    /* On permet de redimensionner verticalement. */
    resize: vertical;
}

button {
    /* Une marge supplémentaire représentant approximativement
     le même espace qu'entre les libellés et les champs. */
    /*margin-left: 0.5em;*/
    background-color: rgb(208, 201, 189);
    color: rgb(0, 0, 0);
    font-size: large;
}








/* Tableau des tarifs. */
caption {
    caption-side: top;
    /* légende au-dessus du tableau */
    padding: 30px;
    /* marge interne */
    font-weight: bold;
    /* mise en gras */
    font-size: xx-large;
    /* taille de la légende */
}

/* légende du tableau */

table {
    border-collapse: collapse;
    /* type de bordures du tableau */
    border: 2px solid /*rgb(140 140 140)*/ rgb(221, 208, 200, .6);
    /* caractéristiques des bordures */
    font-family: sans-serif;
    /* famille de polices utilisées */
    font-size: 0.7rem;
    /* taille de la police */
    letter-spacing: 1px;
    /* espacement des caractères */
}

th,
td {
    border: 1px solid /*rgb(160 160 160)*/ rgb(221, 208, 200, .6);
    /* quadrillage du tableau */
    padding: 8px 10px;
    /* marges intérieures des cellules */
    font-weight: normal;
    /* Pour enlever le gras de la colonne prestations du tableau tarifs */
}

th {
    background-color: /*rgb(230 230 230)*/ rgb(221, 208, 200, .6);
}

td {
    text-align: center;
}

/* centre le contenu des cellules de la colonne td */

tr:nth-child(even) td {
    background-color: rgb(250, 250, 250, .6);
}

/* colore les lignes paires de la colonne td du tableau */

tr:nth-child(odd) td {
    background-color: rgb(240, 240, 240, .6);
}

/* colore les lignes impaires de la colonne td du tableau */


tr:nth-child(even) th {
    background-color: rgb(250, 250, 250, .6);
}

/* colore les lignes paires de la colonne th du tableau */

tr:nth-child(odd) th {
    background-color: rgb(240, 240, 240, .6);
}

/* colore les lignes impaires de la colonne th du tableau */


.table1 {
    display: flex;
    justify-content: center;
    /* centre le tableau dans le main */
}

.tarifs {
    font: 1.7rem rapscallion;
    /* taille et police des titres des colonnes */
    letter-spacing: 3px;
    /* espacement des caractères */
    text-shadow:
        /* ombre portée */
        1px 1px 0 #fff,
        0 0 9px #000;
}

p#tarifs {
    font-size: medium;
    font-weight: normal;
    /* Pour que le sous-titre du tableau des tarifs soit plus petit que le titre */
}