:root
{
  --rouge: #E6332E;
  --vert: #57B042;
  --noir: #111111;
  --blanc: #FFFFFF;
  --jaune: #FFFF00;
  --or: #db6;
}

@font-face
{
  font-family: 'Bebas Neue Bold';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/BebasNeueBold.woff') format('woff')
     , url('fonts/BebasNeueBold.svg#Bebas-Neue-Bold') format('svg')
     , url('fonts/BebasNeueBold.eot')
     , url('fonts/BebasNeueBold.eot?#iefix') format('embedded-opentype');
}

@font-face
{
  font-family: 'Dragon is Coming';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/DragonIsComing.woff') format('woff')
     , url('fonts/DragonIsComing.svg#Dragon-Is-Coming') format('svg')
     , url('fonts/DragonIsComing.eot')
     , url('fonts/DragonIsComing.eot?#iefix') format('embedded-opentype');
}

* { box-sizing:border-box; }

html { background-color:var(--noir); background-image:url(img/bg-body-desktop.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover; }
body { background-color:#000000AA; color:var(--blanc); font-family:'Bebas Neue Bold',Arial,Sans-Serif; font-size:12pt; margin:0px; padding:0px; overflow-x:hidden; }
body { margin-bottom:40px; }
a { text-decoration:none; }

body { display:flex; width:100vw; min-height:100vh; align-items:center; justify-content:center; margin-bottom:0; }
body.inscription { padding:0 3vw; }

body.jeu-concours { display:block; align-items:unset; justify-content:unset; }
body.jeu-concours .cols { display:flex; align-items:center; justify-content:center; }

.invit { width:800px; max-width:calc(100% - 40px); position:relative; margin-right:15vw; }
body.inscription .invit { margin-right:5vw; }
.invit .bg { display:block; width:100%; height:100%; position:absolute; left:0; top:0; right:0; bottom:0; z-index:1; background-image:url(img/bg-message-desktop.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover; border:5px dotted var(--or); box-shadow:0 0 20px var(--or); transform:rotate(-3deg); }
.invit .bg::before { content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:url(img/ruban-et-ciseaux.png) left top no-repeat; background-size:auto 45%; }
.invit .bg h1 { position:absolute; left:10px; bottom:5px; color:var(--or); font-family:'Dragon is Coming','Bebas Neue Bold'; font-size:120px; font-weight:400; letter-spacing:1px; line-height:120px; margin:0; white-space:nowrap; }
.invit .message { width:45%; height:80vh; max-height:500px; position:relative; z-index:2; margin-left:55%; padding:0 20px 20px 20px; text-align:center; }
.invit .message p { margin:15px 0; }
.invit .message .date span { display:inline-block; background-color:var(--rouge); color:var(--blanc); font-size:30px; line-height:30px; margin-top:5vh; padding:5px 15px; }
.invit .message .heure { color:var(--blanc); font-size:50px; line-height:50px; }
.invit .message .adresse { color:var(--blanc); font-size:20px; line-height:22px; }
.invit .message .stokomani span { display:inline-block; background-color:var(--jaune); color:var(--noir); font-size:20px; line-height:20px; padding:5px 25px; }
.invit .message .logo { display:block; max-width:80%; height:25vh; margin:20px auto 0 auto; filter:drop-shadow(0 0 5px #000); }

.invit.jouer .message .heure { font-size:50px; line-height:50px; margin-top:30px; }
.invit.jouer .message .date span { font-size:50px; line-height:50px; margin-top:0; padding:5px 15px; }
.invit.jouer .message .logo { max-width:70%; height:160px; margin:30px auto; }
.invit.jouer .message .adresse { font-size:40px; line-height:40px; }
.invit.jouer .message .stokomani span { font-size:30px; line-height:30px; padding:5px 25px; }

.inscrip { width:30%; margin-top:30vh; text-align:center; }
.inscrip .rdv h1 { display:inline-block; background-color:var(--rouge); color:var(--blanc); font-size:36px; line-height:36px; margin:0 0 10px 0; padding:5px 15px; }
.inscrip .inscription { color:var(--or); font-size:46px; line-height:46px; margin:10px 0 3px 0; }
.inscrip .confirmation { color:var(--blanc); font-size:20px; line-height:20px; margin:3px 0 0 0; }
.inscrip .confirmation span { color:var(--or); }
.inscrip .col3 { display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:20px; justify-items:center; margin-top:30px; }
.inscrip .col3 > * { width:100%; }
.inscrip a { display:block; color:var(--blanc); font-size:20px; line-height:20px; text-align:center; transition:all 0.3s ease; }
.inscrip a span { display:block; }
.inscrip a img { display:block; width:40px; height:40px; margin:0 auto 10px auto; transition:all 0.3s ease; }
.inscrip a:hover { letter-spacing:2px; }
.inscrip a:hover img { transform:scale(1.2); }

body.jeu .invit { margin-right:5vw; }
.jeu p { font-size:26px; line-height:26px; margin:15px 0; text-align:center; }
.jeu p span { display:block; background-color:var(--rouge); color:var(--blanc); line-height:36px; margin-bottom:10px; padding:0 10px; }
.jeu p i { font-style:normal; }
.jeu p b { color:var(--rouge); font-weight:normal; }
.jeu form { margin:0; }
.jeu form > div { position:relative; margin-bottom:10px; }
.jeu form .radio input { width:24px; height:24px; accent-color:var(--rouge); }
.jeu form .radio label { font-size:24px; line-height:24px; margin-right:10px; }
.jeu form .field input { display:block; width:100%; height:40px; background-color:var(--blanc); color:var(--noir); border:1px solid var(--blanc); border-radius:0; font-size:16px; font-weight:bold; line-height:38px; padding:0 15px; text-align:left; -webkit-appearance:none; transition:all 0.3s; }
.jeu form .field label { display:block; height:0; overflow:hidden; }
.jeu form .field label::before { content:attr(data-placeholder); position:absolute; left:15px; top:3px; background-color:var(--blanc); color:#888; font-size:16px; line-height:34px; padding:0 20px 0 0; transition:all 0.3s; }
.jeu form .field input:focus + label::before, .jeu form input:valid + label::before { left:9px; top:-9px; font-size:12px; line-height:18px; padding:0 6px; }
.jeu form .field input:hover { border-color:var(--rouge); }
.jeu form .field input:focus { border-color:var(--rouge); outline:0; }
.jeu form .field input:valid + label::before { content:attr(data-placeholder); }
.jeu form .field input:focus + label::before { color:var(--rouge); }
.jeu form button { display:block; width:100%; background-color:var(--rouge); border:2px solid var(--rouge); color:var(--blanc); font-family:'Bebas Neue Bold',Arial,Sans-Serif; font-size:20px; letter-spacing:1px; line-height:40px; padding:0 15px; cursor:pointer; transition:all 0.3s; }
.jeu form button:hover { background-color:var(--blanc); color:var(--rouge); letter-spacing:2px; }
.jeu form button { background-color:var(--rouge); border:0px; color:#000; position:relative; }
.jeu form button:before { content:""; display:block; position:absolute; left:0; top:0; right:0; bottom:0; z-index:1; background:-webkit-linear-gradient(-45deg, #DC9E21, #F2CA75, #DC9E21); opacity:1; transition:all 0.3s; }
.jeu form button span { position:relative; z-index:2; }
.jeu form button:hover { background-color:var(--rouge); color:var(--blanc); letter-spacing:2px; }
.jeu form button:hover:before { opacity:0; }
.ml { margin-top:30px; text-align:center; }
.ml p { font-size:18px; line-height:20px; margin:0 0 10px 0; }

body.merci .merci { padding:20px 0; text-align:center; }
body.merci .merci a.logo { display:block; margin:0px auto 20px auto; }
body.merci .merci img { display:block; width:220px; max-width:40%; height:auto; margin:0 auto; }
body.merci .merci h2 { color:var(--or); font-family:'Dragon is Coming','Bebas Neue Bold'; font-size:300px; font-weight:400; line-height:250px; margin:-120px auto 0 auto; }
body.merci .merci p { color:var(--blanc); font-size:20pt; margin:0 auto; }
body.merci .merci p span { color:var(--or); }
body.merci .merci iframe { display:block; width:500px; max-width:80%; height:200px; margin:20px auto 0 auto; background-color:var(--noir); border:0; }

.invit .bg h1, body.merci .merci h2 { background:-webkit-linear-gradient(0deg, #F2CA75, #DC9E21, #F2CA75, #DC9E21); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.inscrip .inscription, .inscrip .confirmation span, body.merci .merci p span, .jeu p i { background:-webkit-linear-gradient(-70deg, #F2CA75 0%, #DC9E21 20%, #F2CA75 40%, #DC9E21 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

@media (max-width: 768px)
{
  html, body { display:block; width:100vw; overflow-x:hidden; }
  body.jeu-concours .cols { display:block; align-items:unset; justify-content:unset; }

  body.invitation { padding-top:5vh; }
  body.invitation .invit { margin:0 auto; }
  body.invitation .invit .bg { background-image:url(img/bg-message-mobile.jpg); }
  body.invitation .invit .bg::before { background-size:auto 30%; }
  body.invitation .invit .bg h1 { font-size:80px; line-height:80px; }
  body.invitation .invit .message { width:65%; height:70vh; margin-left:35%; }
  body.invitation .invit .message .date span { font-size:22px; line-height:22px; margin-top:10vh; padding:3px 5px; }
  body.invitation .invit .message .heure { font-size:40px; line-height:40px; }
  body.invitation .invit .message .adresse { font-size:18px; line-height:18px; }
  body.invitation .invit .message .stokomani span { font-size:18px; line-height:18px; padding:3px 10px; }
  body.invitation .invit .message .logo { max-width:100%; height:15vh; margin-top:10px; }

  body.inscription .invit { margin:3vh auto 0 auto; }
  body.inscription .invit .bg::before { background-size:auto 35%; }
  body.inscription .invit .bg h1 { font-size:80px; line-height:80px; }
  body.inscription .invit .message { width:65%; height:50vh; margin-left:35%; }
  body.inscription .invit .message p { margin:5px 0; }
  body.inscription .invit .message .date span { font-size:20px; line-height:20px; margin-top:2vh; padding:4px 8px; }
  body.inscription .invit .message .heure { font-size:30px; line-height:30px; }
  body.inscription .invit .message .adresse { font-size:16px; line-height:18px; }
  body.inscription .invit .message .stokomani span { font-size:18px; line-height:18px; padding:4px 12px; }
  body.inscription .invit .message .logo { max-width:90%; height:15vh; margin-top:10px; }
  .inscrip { width:100%; margin-top:40px; }
  .inscrip .rdv h1 { font-size:28px; line-height:28px; padding:4px 8px; margin-bottom:6px; }
  .inscrip .inscription { font-size:40px; line-height:40px; margin:6px 0 3px 0; }
  .inscrip .confirmation { font-size:18px; line-height:18px; }
  .inscrip .col3 { margin-top:20px; }
  .inscrip a { font-size:20px; line-height:20px; }
  .inscrip a img { margin-bottom:6px; }

  body.inscription .invit.jouer .message .heure { font-size:30px; line-height:30px; margin-top:0; padding-top:3vh; }
  body.inscription .invit.jouer .message .date span { font-size:30px; line-height:30px; margin-top:0; }
  body.inscription .invit.jouer .message .logo { height:12vh; margin:3vh auto; }
  body.inscription .invit.jouer .message .adresse { font-size:24px; line-height:24px; }
  body.inscription .invit.jouer .message .stokomani span { font-size:20px; line-height:20px; }

  body.merci .merci h2 { font-size:260px; line-height:220px; margin-top:-100px; }
  body.merci .merci p { font-size:18pt; }

  .jeu { margin:50px 20px; }
  .jeu form .field input { height:50px; font-size:18px; line-height:48px; }
  .jeu form .field label::before { left:15px; top:3px; font-size:18px; line-height:44px; }
  .jeu form button { font-size:24px; line-height:50px; }
}

/*
//==============================================================================
// Invitation
//==============================================================================
*/

body.invit .header { margin-top:40px; padding-left:0px; padding-right:0px; }
body.invit .header > .row { margin-left:0px; margin-right:0px; }
body.invit .header > .row > div { padding-left:0px; padding-right:0px; }

body.invit .message { margin-top:60px; }
body.invit .message > .row > div { text-align:center; }
body.invit .message > .row > div h1 { font-size:32pt; font-variant:small-caps; margin:0px 0px 30px 0px; }
body.invit .message > .row > div h1 b { font-size:40pt; font-weight:normal; }
body.invit .message > .row > div p { font-size:14pt; margin:0px 0px 30px 0px; }
body.invit .message > .row > div h2 { font-size:14pt; font-weight:normal; margin:0px; }

body.invit .footer { margin-top:60px; margin-bottom:30px; }

.share { text-align:center; }
.share .links a { display:inline-block; width:60px; height:70px; line-height:70px; }
.share .links a .fa { display:inline-block; width:48px; height:48px; line-height:48px; background-color:var(--noir); color:var(--blanc); border-radius:24px; font-size:24px; text-align:center; transition:all 0.1s; }
.share .links a:hover .fa { width:56px; height:56px; line-height:56px; border-radius:28px; font-size:28px; }
.share h1 { font-size:14pt; margin:0px; }