:root {
  --dark: #000;
  --pink: #FFB0EA;
  --darkpink: #9F7193;
  --blue: #8FB5FC;
  --darkblue: #6888C4;
}

@font-face {
  font-family: 'Build';
  src: url('/fonts/Build-Regular.woff2') format('woff2'),
       url('/fonts/Build-Regular.woff2') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{margin: 0; padding: 0; box-sizing: border-box;}

html, body {
  height: 100%;
  margin: 0;
}

body{min-height: 100vh;
  background-color: white;
  background: linear-gradient(167deg, #FFA4E7 0%, #7B9CF1 30%, #FFF 80%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--dark); font-family: "Open Sans", sans-serif; line-height: 140%;
}
.main{position: relative;}
h1, h2, h3{font-weight: normal; line-height: 100%; letter-spacing: -3%; font-family: "Build", sans-serif; }
h1{margin-top: 40px; text-align: center;}
h2{margin: 40px 0 20px; text-align: center; text-transform: uppercase;}
h3{margin: 20px 0 10px; }

figure{width: 100%; text-align: center;}
img{width: 100%; max-width: 640px;}
img.home{margin-top: 40px}

p{margin-bottom: 10px;}
p.title{margin-bottom: 0;}
ol, ul{list-style-position: inside;}
ul{list-style-type: "→ ";}
li{margin-bottom: 10px;}
em{font-style: normal; font-weight: bold;}



.details{margin-top: 50px; font-size: 70%; }


/* MEDIA QUERIES */

/* 📱 Spéciale dédicace pour QUENTIN */
@media screen and (max-width: 374px) {
  body{font-size: 16px; line-height: 140%;}
  header{height: 20px;}
  .main{padding: 0px 20px 20px;}
  footer{padding:20px;}
  h1{font-size: 40px; text-transform: uppercase;}
  h2{font-size: 36px; line-height: 120%;}
  h3{font-size: 28px; line-height: 120%;}
  br.desktop{display: none;}

  .cta{position: sticky; top:20px; font-family: "Build", sans-serif; }
  .cta p { padding:10px 20px 7px; margin: 30px auto; width: max-content;  border-radius:5px; font-size:20px; letter-spacing:-4%;}
  .cta a{ text-decoration: none; color: var(--dark);}
  .cta p.first{background-color: var(--pink); border:1px solid var(--darkpink);}
  .cta p.second{background-color: var(--blue); border:1px solid var(--darkblue);}

  footer{margin-top: 100px; height: 200px;  font-size: 90%; line-height:140%}

  #datelieu{display: none;}

}


/* HANDHELD */
    @media screen and (min-width:375px) and (max-width: 919px) {
      body{font-size: 20px; line-height: 140%;}
      header{height: 20px;}
      .main{padding: 0px 20px 20px;}
      footer{padding:20px;}
      h1{font-size: 50px; text-transform: uppercase;}
      h2{font-size: 36px; line-height: 120%;}
      h3{font-size: 28px; line-height: 120%;}
      br.desktop{display: none;}

      .cta{position: sticky; top:20px; font-family: "Build", sans-serif; }
      .cta p { padding:10px 20px 7px; margin: 30px auto; width: max-content;  border-radius:5px; font-size:26px; letter-spacing:-4%;}
      .cta a{ text-decoration: none; color: var(--dark);}
      .cta p.first{background-color: var(--pink); border:1px solid var(--darkpink);}
      .cta p.second{background-color: var(--blue); border:1px solid var(--darkblue);}

      footer{margin-top: 100px; height: 200px;  font-size: 90%; line-height:140%}


      #datelieu{position: absolute; top:300px; right: 20px;
        font-family: "Build", sans-serif;
  padding: 20px;
  border: 1px solid var(--dark);
  display: inline-block;
  border-radius: 50%;
  font-size: 16px; line-height: 100%;
  text-align: center;
  transform: rotate(10deg);
  background-color: #BACEFF;}

    }
/* DESKTOP */
    @media screen and (min-width: 920px) {
      body{font-size: 30px; line-height: 140%;}
      header{height: 70px;}
      .main, footer{margin: 0 auto; max-width: 920px; }
      h1{font-size: 70px; text-transform: uppercase;}
      h2{font-size: 50px; line-height: 120%;}
      h3{font-size: 40px; line-height: 120%;}

      .cta{position: sticky; top:20px; font-family: "Build", sans-serif; }
      .cta p { padding:10px 20px 7px; margin: 30px auto; width: max-content;  border-radius:5px; font-size:26px; letter-spacing:-4%;}
      .cta a{ text-decoration: none; color: var(--dark);}
      .cta p.first{background-color: var(--pink); border:1px solid var(--darkpink);}
      .cta p.second{background-color: var(--blue); border:1px solid var(--darkblue);}

      footer{margin-top: 100px; height: 600px;  font-size: 70%; line-height:140%}

      #datelieu{position: absolute; top:220px; right: 0;
        font-family: "Build", sans-serif;
  padding: 30px 30px 20px;
  border: 1px solid var(--dark);
  display: inline-block;
  border-radius: 50%;
  font-size: 24px; line-height: 120%;
  text-align: center;
  transform: rotate(10deg);
background-color: #BACEFF;}
    }