/*pour certain element utilisation de class="nom" dans la balise html puis .nom{} en selecteur en CSS
avec id="nom"  on aura #nom{}  */

/*
.dancing-script-<uniquifier> {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} pour la citation

.dm-serif-display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}  pour les titres
*/

*{  /*reinitialisation des marges pas defaut de navigateurs*/
    margin:0;
}
/*MISE EN PAGE DU HEADER*/

header{
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    padding: 1em 3em 1em 3em;
    margin: 16px ;
    margin-bottom : 30px;
    background-color: white;
    box-shadow: 10px 10px 15px black ;
    /*image a cote du nav en ligne*/
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
}
header img{
    width: 5em;
}
nav{
    height: 5em; 
}
a{
    text-decoration: none ;
    font-weight: 500;
    color:darkgoldenrod;
}
header a{
    margin-left: 10px;
    margin-right: 10px;
}
a:hover{
    font-weight: 800;
}
nav a:hover{
    text-shadow: 4px 4px 15px grey;
}  
nav #toggle {
    display:none;
}
ul, li{
    display:block;
}
.menu{
    padding:0;
    height: 5em;
    display: grid;
    grid-template-columns:1fr 3.1fr 3.2fr 1fr 1fr;
    position: relative;
    top:1.5em;
}
header h1{
    display: none;
}

.li1{grid-area: 1/1/2/2;} .li2{grid-area: 1/2/2/3;} .li3{grid-area: 1/3/2/4;} .li4{grid-area: 1/4/2/5;} .li5{grid-area: 1/5/2/6;}
.menu li{
    text-align: center;
}
.ssmenu li{
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 2.5em;
    text-align:unset ;
}
.ssmenu{
    display: none;
}
.menu li:hover .ssmenu{
    display: block;
    background-color: white;
    box-shadow: 10px 10px 15px rgb(62, 62, 62) ;
}
        
/* MISE EN PAGE DU FOOTER*/

footer{
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin : 16px;
    padding: 1em 3em 1em 3em;
    box-shadow: 10px 10px 15px black ;
    display: flex;
    background-color: rgb(77, 65, 65);
    margin-top: 0;
    flex-direction: column;
}
footer p {
    text-align: center;
    color:rgba(241, 224, 179, 0.66);
    width: 80%;
    margin: auto;
    padding: 3%;
    border:none;
}
footer div{
    display: flex;
    border-bottom: solid;
}
footer img{
    width: 5em;
    position:relative;
    top:1em;
    border: solid;
}
footer img:hover{
    top:0.8em;
    box-shadow: 5px 5px 5px black ; 
}
.al{
    display: flex;
    margin:0;
    padding:0;
    font-size: x-small;
    color: black;
}

/*MISE EN PAGE DU MAIN*/

body,input, select, textarea{/*application de la police de caracteres*/
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

main{
  /*couleur du fond de la page*/
    background-color: white;
  /*mise en plance d'une image de fond*/
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-size: contain ;
    background-attachment : fixed;
    background-position: center;
    padding-top: 3em;
}
section{
    box-shadow: 10px 10px 15px black ;
    display: flex;
    text-align: center;
    margin: 2%;
    margin-top: 5em;
    margin-bottom: 5em;
    padding:1em;
    padding-top: 2em; 
    background-color: rgb(57, 56, 56);
}
.citation{
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    text-align: center;
    font-size: 1.3em;
  }
h1{
    font-size:xx-large;
}
h2{
    font-size: x-large;
}
h1,h2,h3, .signature {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}
a{
    text-decoration: none ;
    font-weight: 500;
}
h1,h2,h3,a{
    color:darkgoldenrod; /*couleur de texte*/
}
img{
    width: 10em;
    margin: auto;
}
p{
    display:flex;
    flex-direction: column;
    align-items: center;
}

/*Mise en page : page ACCUEIL*/
.entre{
    padding: 6em;
    background-image: url('images/intro.JPG');
    background-size: cover;
    background-position: center;
    flex-direction: column;
}
.entre h1 {
    color:white ;
    font-size: 4em;
    text-shadow: 2px 2px 0px rgb(52, 32, 3);
}
.entre h2 {
    color:white ;
    font-size: 2em;
    text-shadow: 2px 2px 0px rgb(52, 32, 3) 
}
.liv{
    padding-bottom: 2em;
}
p, .liv div {
    text-align: center;
    color:rgba(241, 224, 179, 0.66);
    border-top: solid;
    border-bottom: solid;
    width: 80%;
    margin: auto;
    padding: 3%;
}

.liv div p, .carte{
    border: none;
}
.liv img{
    width: 50% ;
}

.photos {
    display:flex;
    flex-wrap: wrap;
}
.contact{
    border: solid 2px;
    border-radius: 10% 0% 10% 0% / 50% 0% 50% 0%  ;
    box-shadow: 2px 2px 2px black;
    background-color: rgb(247, 245, 228);
    border-top: none;
    border-left: none;
    color:darkgoldenrod;
    display: block;
    width: 10em;
    padding: 0.5em;
    margin:auto;
    margin-top: 2em;
    margin-bottom: 0em;
}
.contact:hover{
    font-weight: 800;
    box-shadow: 5px 5px 5px black;
}
/*agencement flexbox pour le sylvaner, le pinot blanc, le muscat, le sgn et le hatschbourg et stingrubler*/
div[class*="im_text"], .rmq, .titres{
    display: flex;
    
}
.intro_GC, .intro, .intro_sy, .intro_pb, .intro_mu, .intro_sgn, .intro_hatsb, .passez, .horaires, .adresse {
    flex-direction: column;
    padding-bottom: 2em;
}
.citation, .intro_stein, .intro_stein, .rmq, .rmq h2{
    flex-direction: column;
    padding-bottom: 1em;
    padding-top:1em;
}
.intro_sgn p{
    margin-bottom: 2em;
}
.intro_cr h2,.intro_GC h1, .intro h1, .intro_stein h1, .intro_sgn h1, .im_text_stein h2, .intro_hatsb h1, .passez h1, .horaires h2, .adresse h2  {
    padding-bottom: 1em;
}
.citation p {
    padding:0.5em;
}
.im_text_pb img{
    order:1;
}
.im_text_pb p{
    order:2;
}
.im_text_stein{
    padding-top: 2em;
}
.im_text_hatsb p{
    width: 15em;
}
.rmq{
    align-items: center;
}
.im_text_stein img,.im_text_pb img{
    margin-left: 2em;
}
.im_text_sy img, .im_text_mu img{
    margin-right: 2em;
}
.carte{
    color:black;
    width: 6em;
    height: 6em;
    margin: auto;
    margin-top: 2em;
    padding: 0.5em;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}

.carte:hover{
    top:0.8em;
    box-shadow: 5px 5px 5px black ;
}
.horaires img{
    width:20em;
}
.photo_entree{
    display:flex;
    margin:2em;
    flex-wrap: wrap;
}

.formulaire{
    flex-direction: column;
}
.formulaire p{
    margin-top: 2em;
    margin-bottom: 2em;
}
fieldset{
    color: rgba(241, 224, 179, 0.66);
    border-color: rgba(241, 224, 179, 0.66);
    border-radius: 5px;
    padding: 1em;
    margin: 1em;
}
input, select, textarea{
    background-color: antiquewhite;
    border-radius: 5px;
    margin:auto;
    font-weight: 700;
}
textarea{
    min-height: 10em;
}
input {
    width: 30%;
}
::placeholder{
    color:rgb(107, 75, 75);
    font-weight: 700;
}
textarea {
    width: 50%;
}
input:focus{
    background-color: rgb(241, 210, 187);
}
.envoyer{
    margin-top: 1em;
    background-color: antiquewhite;
    border-top-color: rgb(251, 249, 246) ;
    border-left-color: rgb(251, 249, 246);
    border-right-color: rgba(196, 182, 144, 0.66) ;
    border-bottom-color: rgba(196, 182, 144, 0.66)  ;
    font-weight: 700;
    width:10em;
    color :rgb(57, 56, 56);
}
.Message_dEnvoi{
    display:none;
}
.envoyer:active .Message_dEnvoi{
    display: flex;
}
.salle_rec{
    flex-direction: column;
}
.salle_rec h2{
    margin-bottom: 1em;
}
.im_salle {
    display:flex;
    margin-top: 2em;
    margin-bottom: 2em;
    flex-wrap: wrap;
    justify-content: space-around;
}
.im_salle img{
    width: 15em;
}

/*grid pour le Riesling et l'edelzwicker et PG sans CV*/
.grid_ri, .grid_ed, .grid_pg{
    display:grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
}
/*Placement dans la grille*/
.tpg,.tri, .ted{ grid-column:1/3;grid-row:1/2;} 
.intro_pg,.intro_ri{grid-column:1/3;grid-row:2/3;margin-bottom: 2em;}
.titre_pgcp,.titre_rt, .titre_el{grid-column:1/2;grid-row:3/4;}
.titre_pgs,.titre_rs, .titre_lu{grid-column:2/3;grid-row:3/4;}
.im_pgcp,.im_rt, .im_el{grid-column:1/2;grid-row:4/5;}
.im_pgs,.im_rs, .im_lu{grid-column:2/3;grid-row:4/5;}
.par_pgcp,.par_rt, .par_el{grid-column:1/2;grid-row:5/6;}
.par_pgs,.par_rs, .par_lu{grid-column:2/3;grid-row:5/6;}
/*fin des placement dans la grille*/

/*grid pour le Pinot Gris avec CV, le Gewurztraminer, le Pinot Noir, le crémant, le GC Zinnkoepflé et les VT */
.grid_gw, .grid_pn, .grid_cr, .grid_zinn, .grid_vt{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 20px;
}
/*Placement dans la grille*/
/*.tpg,*/ .tgw, .tpn, .tcr, .tzinn, .tvt{grid-column:1/4;grid-row:1/2;}
/*.intro_pg,*/ .intro_gw, .intro_pn, .intro_cr, .intro_zinn, .intro_vt{grid-column:1/4;grid-row:2/3;}
/*.titre_pgcp,*/ .titre_gwvv, .titre_pnr, .titre_crcp, .titre_rz, .titre_rvt{grid-column:1/2;grid-row:3/4;}
/*.titre_pgs,*/ .titre_gws, .titre_pnt, .titre_crr, .titre_pgz, .titre_pgvt{grid-column:2/3;grid-row:3/4;}
/*.titre_pgcv,*/ .titre_gwcv, .titre_pnb, .titre_crb, .titre_gwz, .titre_gwvt{grid-column:3/4;grid-row:3/4;}
/*.im_pgcp,*/ .im_gwvv, .im_pnr, .im_crcp, .im_rz, .im_rvt{grid-column:1/2;grid-row:4/5;}
/*.im_pgs,*/ .im_gws, .im_pnt, .im_crr, .im_pgz, .im_pgvt{grid-column:2/3;grid-row:4/5;}
/*.im_pgcv,*/ .im_gwcv, .im_pnb, .im_crb, .im_gwz, .im_gwvt{grid-column:3/4;grid-row:4/5;}
/*.par_pgcp,*/ .par_gwvv, .par_pnr, .par_crcp, .par_rz, .par_rvt{grid-column:1/2;grid-row:5/6;}
/*.par_pgs,*/ .par_gws, .par_pnt, .par_crr, .par_pgz, .par_pgvt{grid-column-start:2/3;grid-row-start:5/6;}
/*.par_pgcv,*/ .par_gwcv, .par_pnb, .par_crb, .par_gwz, .par_gwvt{grid-column:3/4;grid-row:5/6;}
/*fin des placement dans la grille*/

.im_text_sy p, .im_text_pb p, .im_text_mu p {
    margin-left: 2em;
    margin-right: 2em;
}
.im_text_sy , .im_text_pb , .im_text_mu {
    margin-top: 1em;
} 

p[class*="par"] {
    border-top:none;
    border-right:solid;
    margin: 2em;
}
.voeux p, .vendanges p {
    background-color: antiquewhite;
    color: brown;
 }
 .vendanges h2 {
    text-align: center ;
    padding-bottom: 1em;
 }
 .vendanges {
    display : flex;
    flex-direction :column;
 }


/* MISE EN PAGE 768PX <  < 1023PX
/* breack point :max1023 tablette portrait
                max1280 tablette paysage et ordi moyen
                480px portable en portrait*/


 @media screen and (max-width : 1023px){
    /*main{
        background-color: rgb(75, 42, 165);
        }*/
    /*MISE EN PAGE HEADER*/
    .menu{
        grid-template-columns:1fr 2.5fr 3.8fr 1fr 1fr;
    }
    .menu span {display: none;} 
       
    /*MISE EN PAGE FOOTER*/
    .mes_fb {
        display: none;   
    }    
    /*MISE EN PAGE DU MAIN*/
    /*ACCEUIL*/
    .entre{
        margin-top: 2em;
    }
    /*VINS & CREMANTS*/
    .grid_ri{
        margin-top: 2em;
    }
 }

/* MISE EN PAGE < 767PX ENV.portable paysage/portrait*/

@media screen and (max-width : 767px) {
    /*VERIF*/
    /*main{
        background-color: brown;
    }*/
    /*MISE EN PAGE HEADER*/
    body {
        position: relative;
    }
    header {
        justify-content: space-between;
        align-items: center;
    }
    header h1{
        display: inline;
    }
    .menu {
        position:absolute; 
        background-color:rgba(255, 255, 255, 0.833);
        top: -20px;
        left:-1500px;
        width: 100%;
        height: 100vh; 
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        backdrop-filter: blur(5px);
    }
    .menu li{
        padding:10px;
    }
    .button {
        width: 50px;
        height: 50px;
        position:relative;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor:pointer;
        z-index: 100;
    }
    .button::after{
        content: "";
        position: absolute;
        width: 35px;
        height: 2px;
        background-color: darkgoldenrod ;
        box-shadow: 0 10px 0 darkgoldenrod;
        transform: translateY(-10px);
    }
    .button::before{
        content: "";
        position: absolute;
        width: 35px;
        height: 2px;
        background-color: darkgoldenrod ;
        transform: translateY(10px);
    }
    #toggle:checked + .menu {
        left:0px;
    }
    .menu li:hover .ssmenu{
        display: none;
    }

    /*MISE EN PAGE FOOTER*/
    footer div {
        display:grid;
        grid-template-columns: 3fr 1fr;
        justify-items: center;
    }
    .ad{
        grid-column:1/2;
        grid-row:1/2;
    }
    .tel{
        grid-column:1/2;
        grid-row:2/3;
        padding-top: 0;
    }
    footer img{
        position: relative;
        grid-column:2/3;
        grid-row:1/3;
        top: 2em;
    }
    footer img:hover{
        top:1.4em;
    }

    /*MISE EN PAGE MAIN*/

    section{
        margin-top: 3em;
        margin-bottom: 3em;
    }
    /*ACCEUIL*/
    .entre{
        margin-top: 0em;
    }
    .entre h1 {
        font-size: 3em;
    }
    .entre h2 {
        font-size: 1.5em;
    }
    .liv{
        flex-direction: column;
    }
    .liv img{
        width:55%;
    }
    /*VINS & CREMANT*/
    .grid_ri{
        margin-top: 0em;
    }

    /*grid à trois colones à passer en deux*/
    /*.grid_pg,*/ .grid_gw, .grid_pn, .grid_cr, .grid_zinn, .grid_vt{
        display:grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 20px;
    }
    /*Placement dans la grille*/
    /*.tpg,*/ .tgw, .tpn, .tcr, .tzinn, .tvt{grid-column:1/3;grid-row:1/2;}
    /*.intro_pg,*/ .intro_gw, .intro_pn, .intro_cr, .intro_zinn, .intro_vt{grid-column:1/3;grid-row:2/3;}
    /*.titre_pgcp,*/ .titre_gwvv, .titre_pnr, .titre_crcp, .titre_rz, .titre_rvt{grid-column:1/3;grid-row:3/4;}
    /*.titre_pgs,*/ .titre_gws, .titre_pnt, .titre_crr, .titre_pgz, .titre_pgvt{grid-column:1/3;grid-row:5/6;}
    /*.titre_pgcv,*/ .titre_gwcv, .titre_pnb, .titre_crb, .titre_gwz, .titre_gwvt{grid-column:1/3;grid-row:7/8;}
    /*.im_pgcp,*/ .im_gwvv, .im_pnr, .im_crcp, .im_rz, .im_rvt{grid-column:1/2;grid-row:4/5;}
    /*.im_pgs,*/ .im_gws, .im_pnt, .im_crr, .im_pgz, .im_pgvt{grid-column:2/3;grid-row:6/7;}
    /*.im_pgcv,*/ .im_gwcv, .im_pnb, .im_crb, .im_gwz, .im_gwvt{grid-column:1/2;grid-row:8/9;}
    /*.par_pgcp,*/ .par_gwvv, .par_pnr, .par_crcp, .par_rz, .par_rvt{grid-column:2/3;grid-row:4/5;}
    /*.par_pgs,*/ .par_gws, .par_pnt, .par_crr, .par_pgz, .par_pgvt{grid-column:1/2;grid-row:6/7;}
    /*.par_pgcv,*/ .par_gwcv, .par_pnb, .par_crb, .par_gwz, .par_gwvt{grid-column:2/3;grid-row:8/9;}
    /*fin des placement dans la grille*/
    section[class*="grid"] p{
        border:none;
        border-bottom: solid;
        border-top: solid;
        display: flex;
        justify-content: center;
    }

    /* grid lu et el en colone flexbox*/
    .grid_ed{
        display:flex;
        flex-direction: column;
    }
    .im_el{order:3;}.titre_el{order:2;} .par_el{order:4;}.im_lu{order:6;}.titre_lu{order:5;}.par_lu{order:7;}
 }

/* MISE EN PAGE < 480PX ENV.portable portrait*/
@media screen and (max-width : 480px){
    /*main{
        background-color: rgb(165, 165, 42);
    }*/
    /* flexbox passage en colone*/
    div[class*="im_text"]{
        flex-direction: column-reverse;
        gap: 1em;
        padding-top: 1em;
    }
    div[class="im_text_pb"], div[class="im_text_hatsb"], div[class="im_text_stein"]{
        flex-direction: column;
    }
    .im_text_pb img, .im_text_mu img, .im_text_sy img{
        margin:auto;
    }
     /*MISE EN PAGE HEADER*/
    header h1{
        display: none;
    }
    /*MISE EN PAGE FOOTER*/
    footer{
        padding: 1em;
    }
    footer div {
        display:grid;
        grid-template-columns: 3fr 1fr;
    }
    .ad{
        grid-column:1/3;
        grid-row:1/2;
    }
    .tel{
        grid-column:1/2;
        grid-row:2/3;
    }
    footer img{
        width: 3em;
        top:-0px;
        grid-column:2/3;
        grid-row:2/3;
    }
    footer img:hover{
        top:-0.6em;
    }
    .tel span{
        display: none;
    }
    
    /*MISE EN PAGE MAIN*/
    /*ACCEUIL*/
    .entre{
        padding: 3em;
    }
    .entre h1 {
        font-size: 2.7em;
    }
    .entre h2 {
        font-size: 1.3em;
    }
    .photos img{
        margin-bottom:10px;
    }
    /*VINS & CREMANT*/
    div[class*="im_text"] img, img[class*="im"]{
        width: 10em;
    }
    /*grid à trois colones et/puis deux passé en flex*/
    section[class*="grid"], .intro_stein, .im_text_stein{
        display: flex;
        flex-direction: column;
    }
    .im_text_stein img{
        margin:auto;
    }
    .im_text_stein div h2 {
        padding-bottom: 0;
       
    }

    /*Placement dans le flex*/
    .tpg, .tgw, .tpn, .tcr, .tzinn, .tvt, .tri, .intro_stein h1{order: 1;}
    .intro_pg, .intro_gw, .intro_pn, .intro_cr, .intro_zinn, .intro_vt, .intro_ri, .intro_stein p{order:2;}
    .titre_pgcp, .titre_gwvv, .titre_pnr, .titre_crcp, .titre_rz, .titre_rvt, .titre_rt, .im_text_stein{order:3;}
    .titre_pgs, .titre_gws, .titre_pnt, .titre_crr, .titre_pgz, .titre_pgvt, .titre_rs{order:6;}
    .titre_pgcv, .titre_gwcv, .titre_pnb, .titre_crb, .titre_gwz, .titre_gwvt{order:9;}
    .im_pgcp, .im_gwvv, .im_pnr, .im_crcp, .im_rz, .im_rvt, .im_rt{order:4;}
    .im_pgs, .im_gws, .im_pnt, .im_crr, .im_pgz, .im_pgvt, .im_rs{order:7;}
    .im_pgcv, .im_gwcv, .im_pnb, .im_crb, .im_gwz, .im_gwvt{order:10;}
    .par_pgcp, .par_gwvv, .par_pnr, .par_crcp, .par_rz, .par_rvt, .par_rt{order:5;}
    .par_pgs, .par_gws, .par_pnt, .par_crr, .par_pgz, .par_pgvt, .par_rs{order:8;}
    .par_pgcv, .par_gwcv, .par_pnb, .par_crb, .par_gwz, .par_gwvt{order:11;}
    /*fin des placement dans la grille*/
     
    /*SALLE*/
    .im_salle img, .photo_entree img {
        margin: 10px
    }
    
   

}