:root {
/*  in order of the background gradiant  */
--dark: #000;
--white: #fff;
--salmon: #ec6467;

}

@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-image: url("/images/fond_01.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--dark); font-family: "Open Sans", sans-serif; line-height: 140%;
}

header{font-family: "Build", sans-serif; position:relative; display:flex; justify-content: space-between; }
header a{position: relative; color:var(--dark); text-decoration:none; z-index: 2000;}

.header_fixe{
  position: fixed;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}

#smmrbtn{   background: url("/images/kraken_01.png") center / contain no-repeat;   border: none;   background-color: transparent;   cursor: pointer;}

nav{ padding-top: 100px; width:100%; height: 100%;  background-color: var(--salmon); text-align:center;}
nav ul{list-style-type:none; }
nav a, nav a:visited{color: var(--dark); font-family: "Build", sans-serif; font-weight: normal;}

#clsbtn{position: fixed; top: 10px; right:20px;  border: none; font-size: 42px; background-color:  var(--salmon); cursor: pointer;}

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{margin-bottom: 30px; width: 100%; text-align: center;}

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 640px;   /* limite la taille */
  margin: 40px auto;     /* centre horizontalement */
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

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%; }


#trombi{
  margin:30px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  align-items: flex-start;
}

  #trombi .trombi{
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

#trombi figcaption{font-size: 14px; line-height: 20px;}

/* MEDIA QUERIES */

/* 📱 Spéciale dédicace pour QUENTIN */
@media screen and (max-width: 374px) {
  body{font-size: 16px; line-height: 140%;}

  .main{padding: 0px 20px 20px;}
  .header_fixe { left:0; width:100%;}

  header{height: 50px; margin-top: 10px; font-family: "Build", sans-serif; font-size:16px; line-height:100%; text-transform: uppercase;}

  .menu_fleche{margin-right: 50px; height:50px; width: 50px;}
  #smmrbtn{ margin-right: 20px; height:50px; width:50px;}
  nav{font-size:20px; line-height: 40px;}

  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{font-weight: bold;}
  .cta p { padding:25px 10px 30px; margin: 30px auto; width: 180px; border-radius:50px; font-size:20px; letter-spacing:-4%; text-transform: uppercase; font-style: italic;   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);}
  .cta a{ text-decoration: none; color: var(--white);}
  .cta p.first{background-color: var(--salmon); border:10px solid white; text-align:center;}

  #trombi .trombi{
    flex: 0 1 90px;
  }

  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%;}
      .main  {padding: 0px 20px 20px; }

      header{font-family: "Build", sans-serif; font-size:20px; line-height:100%; text-transform: uppercase; }
      header p{margin-top:10px;}
      .header_fixe {left:0; width:100%;}
      .menu_fleche{margin-right: 40px; height:60px; width: 60px;}

      #smmrbtn{ height:60px; width:60px;}
      nav{font-size:24px; line-height: 48px;}

      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{font-weight: bold; }
      .cta p { padding:25px 10px 30px; margin: 30px auto; width: 180px; border-radius:50px; font-size:26px; letter-spacing:-4%; text-transform: uppercase; font-style: italic;   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);}
      .cta a{ text-decoration: none; color: var(--white);}
      .cta p.first{background-color: var(--salmon); border:10px solid white; text-align:center;}

      #trombi .trombi{
        flex: 0 1 90px;
      }

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

    }

/* DESKTOP */
    @media screen and (min-width: 920px) {
      body{font-size: 25px; line-height: 140%;}
      .main, footer{margin: 0 auto; max-width: 920px; }

      header{font-family: "Build", sans-serif; font-size:30px; line-height:100%; text-transform: uppercase;}
      header p{margin-top: 20px;}
      .header_fixe {width:920px;}

      .menu_fleche{margin-right: 100px; height:100px; width: 100px;}
      #smmrbtn{ height:100px; width:100px;}
      nav{font-size:32px; line-height: 64px;}


      h1{font-size: 65px; text-transform: uppercase;}
      h2{font-size: 45px; line-height: 120%;}
      h3{font-size: 35px; line-height: 120%;}
      br.handheld{display: none;}


      .cta{font-weight: bold;}
      .cta p {  padding:25px 10px 30px; margin: 30px auto; width: 180px; height:180px; border-radius:50px; font-size:26px; letter-spacing:-4%; text-transform: uppercase; font-style: italic; box-shadow: 5px 5px 5px rgba(0,0,0,0.5);}
      .cta a{ text-decoration: none; color: var(--white);}
      .cta p.first{background-color: var(--salmon); border:10px solid white; text-align:center;}
      .cta p.second{}

      #trombi .trombi{
        flex: 0 1 128px;
      }

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

      #datelieu{display: none;}

    }