@font-face {
font-family: "vintage";
src:
  url("../fonts/StreetCred.woff2") format("woff2"),
  url("../fonts/StreetCred.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "typewriter";
src:
  url("../fonts/momt___-webfont.woff2") format("woff2"),
  url("../fonts/momt___-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
body { margin:0; padding:0; background-color: darkolivegreen; }
.container { width: 100%; max-width: 100%; margin: auto; }

a { color:darkgreen; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }
a:hover { color:darkolivegreen; }

header { width:100%;  height:75vh; top:0; margin: 0 auto; text-align:center; }
header h1 { margin: 0 auto; padding:0; position:relative; top:32%; transform: translate(0%, -50%); font: 19vh "vintage"; z-index:2;
            text-shadow: 5px 5px 10px palegreen; color:forestgreen; }
header h1 img { position:relative; top: 2vh; height:16vh; z-index:3; }
#photoBackground { width:86%; height:60vh; background-color: #000000; top:7vh; left:7%; border-radius: 10em; position:absolute;
                    box-shadow: 0px 0px 20px darkslategrey; } /* no-repeat contain  */
#photo { width:86%; height:60vh; background: url("../images/intro.jpg"); background-position-y: center; background-size: cover; background-repeat: no-repeat;
          top:7vh; left:7%; border-radius: 10em; position:absolute; opacity: 0.5; } /* no-repeat contain  */
header .slogan { position:relative; top:22%; z-index:2; font: 6vh "typewriter", monospace; color:forestgreen; transform: translate(0%, -50%);
          text-shadow: 2px 2px 5px palegreen; }

.logomobile { left:-50px; height:80px; font: 8vh "vintage"; position:relative; color:forestgreen; text-shadow: 3px 3px 5px palegreen; display:none; }
.logomobile img { height:80px; }

.degrade { width:96%; margin: auto; height:15vh; margin-top:-5vh; margin-left:0; background: linear-gradient(darkolivegreen, honeydew); }

main { width:70%; margin-left:15%; margin-top:-8%; background-color:honeydew; font-family:Arial, Verdana, sans-serif; box-shadow: 0px 20px 20px palegreen; }
main h2 { font:2em "typewriter"; text-align:center; color:darkgreen; }
main h3 { margin-top:0; font: 1.5em "typewriter"; margin-left:2%; color:darkgreen; }
/* main p { padding-left:2%; padding-right:2%; font-size:1.2em; color:darkgreen; } */
main div { padding-left:2%; padding-right:2%; font-size:1.2em; line-height:1.3; text-align:justify; color:darkgreen; }
.separateur { width:60%; margin-left:20%; margin-top:5vh; margin-bottom:2vh; border-top:1px green solid; }
.separateur img { position:relative; top:-17px; left:calc(50% - 15px); }
.accroche { width:90%; margin-top:-15vh; margin-left:5%; margin-bottom:5vh; display:grid; grid-template-columns: repeat(3, 1fr); gap: 10%;
            text-align:center; z-index:4; position:relative; }
.accroche span { padding:2vh; border:1px darkgreen solid; color:honeydew; background-color:forestgreen; border-radius:2vh; font-size:1.2em; line-height:2.5vh;
                box-shadow:5px 5px 10px darkolivegreen; }

.article { width:90%; margin-left:5%; text-align:left; }

.right { text-align:right; }
.center { text-align:center; }

.contactForm { display:grid; grid-template-columns: 1fr 1fr; gap:20px; font-size:1em; }
.contactForm div input[type="text"], .formCheckout div input[type="tel"] { width:80%; padding:5px; font-family:Arial, Verdana, sans-serif; border-radius:10px; border:1px #aaf1aa solid; margin-top:5px; font-size:1em; }
.contactForm div input[type="checkbox"] { border-color:#aaf1aa; }
.contactForm div textarea { width:80%; padding:5px; font-family:Arial, Verdana, sans-serif; border-radius:10px; border:1px #aaf1aa solid; margin-top:5px; font-size:1em; }
.contactForm label[for="newsletter"] { font-size:0.9em; }
.humain { font-size:0.9em; margin-bottom:20px; }
.human { position: absolute; visibility: hidden; left: -5000; top : -5000; }
.rotate { transform: rotate(45deg); display:inline-block; }
.coords iframe { width:80%; height:170px; border:none; filter: drop-shadow(5px 5px 5px silver); }

.formCheckout { display:grid; grid-template-columns: 1fr 1fr; gap:20px; font-size:1em; }
.formCheckout div input[type="text"], .formCheckout div input[type="tel"] { width:80%; padding:5px; font-family:Arial, Verdana, sans-serif; border-radius:10px; border:1px #aaf1aa solid; margin-top:5px; font-size:1em; }
.formCheckout div select { width:80%; padding:5px; font-family:Arial, Verdana, sans-serif; background-color: white; border-radius:10px; border:1px #aaf1aa solid; margin-top:5px; font-size:1em; }
.formCheckout div input[type="checkbox"] { border-color:#aaf1aa; }
.formCheckout div textarea { width:80%; padding:5px; font-family:Arial, Verdana, sans-serif; border-radius:10px; border:1px #aaf1aa solid; margin-top:5px; font-size:1em; }
.preformat { color:#333; font-size:0.9em; margin-top:5px; }
.formCheckout label[for="newsletter"] { font-size:0.9em; }
.vEtape1 { background-color: #353432; color: #eee; padding: 10px 20px; border-radius: 20px; border: none; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }
.adresexp { display:none; font-size:1em; }
@keyframes fadein {
	from { opacity:0; }
  50% { opacity:100%; }
	to { opacity:0; } } /*animation-name: fadein; animation-delay: 1.5s; animation-duration: 1.5s; opacity:0; */
.popupmessage { width:450px; height:70px; position:fixed; top:50%; left:50%; z-index:15; transform: translate(-50%, -50%); background-color: rgba(255,255,255,.9);
                border-radius:30px; filter: drop-shadow(10px 10px 15px darkolivegreen); animation-name: fadein; animation-delay: .2s; animation-duration: 3s; opacity:0; display:none; }
.popupmessage .popillustration { width:250px; margin-top:-105px; margin-left:-130px; transform: rotate(300deg); }
.popupmessage .popillustration img { width:100%; filter: drop-shadow(5px 5px 5px white); }
.popupmessage .message { width:300px; top:-130px; left:120px; position:relative; font-family:Arial, Verdana, sans-serif; font-weight:bold; color:darkgreen; }

footer { width:70%; margin-left:15%; margin-top:-2vh; border-top:2px darkolivegreen solid; background:url("../images/footerBackground.png");
  font-family:Arial, Verdana, sans-serif; font-size:1.2em; color:honeydew; text-shadow:1px 1px 2px #1C3244; display:grid;
  grid-template-columns: 20% 20% 50% 1fr; gap: 5%; border-radius: 0 0 5vh 5vh; background-position-y: bottom -75px; background-position-x: right; }
footer address { padding-left:25px; }
footer address svg { margin-left:-25px; }
footer .colonne { margin-top: 3vh; margin-bottom: 3vh;}
footer .gauche { padding-left:2vh; }
footer .titre { font-weight:bold; margin-bottom:1vh; opacity:1.5; font: 1.1em "typewriter", monospace; color:palegreen; }
footer .text { font-size: 0.8em; }
.end { text-align:center; font-family:Arial, Verdana, sans-serif; font-size:0.9em; color:palegreen; margin-top:1vh; margin-bottom:2vh; }
.end a { color:palegreen; text-decoration:none; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }
.end a:hover { color:honeydew; }
.email { margin-top:1vh; }
.reseaux { width:60%; margin-top:1vh; display:grid; grid-template-columns: repeat(2, 1fr); }
.reseaux a { color:honeydew; text-align:center; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }
.reseaux img { height:48px; }
.form { display:grid; grid-template-columns: repeat(2, 1fr); gap:2%; }
.form input { margin-top:1vh; width:90%; height:3vh; opacity:0.7; }
.condition { margin-top:1vh; font-size: 0.8em; }
.condition input[type="checkbox"] { opacity:0.7; }
.sendButton { width:90%; margin-top:2vh; text-align:right; opacity:0.6;  }
.sendButton a { font-size:0.8em; color:darkgreen; background-color:honeydew; padding:1vh; border-radius:1vh; text-decoration: none;
                text-shadow:none; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }


@media screen and (max-width: 1080px) {
  #photoBackground { width:94%; height:60vh; left:3%; border-radius: 3em; } /* no-repeat contain  */
  #photo { width:94%; height:60vh; left:3%; border-radius: 3em; }
  .accroche { margin-top:-25vh; }
  main { width:94%; margin-left:3%; }
  footer { width:94%; margin-left:3%; background-position-y: center; background-position-x: center; }
  footer .titre { font-size: 1em; }
}

@media screen and (max-width: 992px) {
  .logomobile { display:block; }
  header h1 { top:10%; font: 19vh "vintage"; z-index:2; }
  header .slogan { top:-2%; }
  .accroche { width:96%; margin-left:0; gap:3%; }
  .accroche span { padding:1vh; font-size:0.9em; }
}

@media screen and (max-width: 768px) {
  .formCheckout { grid-template-columns: 1fr; font-size:0.9em; }
  .contactForm { grid-template-columns: 1fr; }
  .coords { text-align:center; }
  nav { top:1vh; left:-15%; }
  header h1 { top:28%; font: 19vh "vintage"; z-index:2; }
  header h1 img { top:6vh; height:18vh; }
  header .slogan { top:-5%; font: 4vh "typewriter", monospace; }
  main h2 { font:1.5em "typewriter"; }
  main h3 { font: 1.2em "typewriter"; }
  footer { width:94%; margin-left:3%; display:block; background-position-y: center; background-position-x: center; }
  footer .gauche { padding-left: 0; }
  footer .colonne { margin-top: 0; margin-bottom: 0; padding: 2vh;}
  main { width:94%; margin-left:3%; }
  .titrevide { height: 0px; }
  .end { width:80%; margin-left:10%; }
}