/*
COULEURS
    #EBAC01 GOLD
    #FED257 JAUNE
    #0d0c09 NOIR
*/

html {
    --s: 150px; /* control the size */
    --c1: #edb315;
    --c2: #EBAC01;
  
    --_g: 
       var(--c1) 0%  5% ,var(--c2) 6%  15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,
       var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,
       #0000 96%;
  }
  


body {background:#0d0c09;color:#FFF;margin:0;font-size:18px;line-height:1.8em;font-family: 'Prata', serif;}
img {max-width:100%;}
h1 {font-size:60px;font-family: 'Great Vibes', cursive;color:#EBAC01;transform: rotate(355deg) skew(-15deg, 0deg);margin-bottom:130px;text-align:center;}
h2 {font-size:60px;font-family: 'Great Vibes', cursive;text-align:center;}
.titres {margin-bottom:50px;}
.imgsoustitre img {max-width:200px;}

.container {max-width:1000px;padding:20px;margin:90px auto;position:relative;}

.grille1 {display: grid;grid-template-columns: repeat(1, 1fr);}
.grille1 > div {padding:40px;}
.grille2 {display: grid;grid-template-columns: repeat(2, 1fr);}
.grille2 > div {padding:40px;}
.grille3 {display: grid;grid-template-columns: repeat(3, 1fr);}
.grille3 > div {padding:40px;}
.grille4 {display: grid;grid-template-columns: repeat(4, 1fr);}
.grille4 > div {padding:40px;}




@media screen and (max-width: 800px) {
    .grille2, .grille3, .grille4 {grid-template-columns: repeat(1, 1fr);}
}

#header {background:#0d0c09;text-align:center;height:100vh;display:grid;place-items:center;}
#header lord-icon {transform:rotate(90deg);position:absolute;bottom:50px;}

#frise {height:200px;overflow:hidden;width:100%;background:#0d0c09;border-bottom:10px solid #EBAC01;}
#frise div {height:200px;width:7000px;background:url('images/frise.jpg');animation: 160s linear infinite reverse friseanimation;opacity:0.4;transition: all 0.5s ease;}
#frise div:hover {opacity:0.9;}
@keyframes friseanimation {from { margin-left:0; } to { margin-left:-5000px; }}

#compte_a_rebours {
    max-width:660px;
    height:40px;
    margin:0 auto;
    text-align:center;
    line-height:2.2rem;
    font-size:18px;
    padding:30px 50px;
}

#compte_a_rebours strong {
    color:#EBAC01;
    font-size:1.5em;
    margin-left:10px;
    margin-right:1px;
    font-family: 'Great Vibes', cursive;
}



#apropos {text-align:center;background:url("images/fond-apropos.png") no-repeat center center fixed #EBAC01;padding:10px;}
#image-couple {background:#FFF;margin:20px;}
#image-couple img {position:relative;bottom:10px;left:10px;}


#histoire {padding:10px;background:#0d0c09;}
#histoire h2 {color:#EBAC01;margin-bottom:100px;}
#histoire .histoire_item {max-width:500px;padding:20px 10px;margin:100px auto;text-align:center;background:#0d0c09;z-index:20;position:relative;}
#histoire .histoire_titre {margin:0;font-size:24px;color:#EBAC01;text-transform:uppercase;}
#histoire .histoire_date {margin:0;text-transform:uppercase;font-family: arial;font-size:12px;color:#868684;line-height:16px;margin-bottom:25px;margin-top:2px;}
#histoire .histoire_texte {margin:0;text-align:justify;}
#ligne {width:0px;position:absolute;top:150px;bottom:50px;left:50%;border-left:1px dashed #EBAC01;z-index:10;}
#bague {text-align:center;background:#0d0c09;z-index:20;position:relative;}
#bague img {height:40px;}


#programme {padding:10px;text-align:center;
    background:
      radial-gradient(50% 50% at 100% 0,var(--_g)),
      radial-gradient(50% 50% at 0 100%,var(--_g)),
      radial-gradient(50% 50%,var(--_g)),
      radial-gradient(50% 50%,var(--_g)) calc(var(--s)/2) calc(var(--s)/2)
      var(--c1);
    background-size: var(--s) var(--s);
}
#programme h2 {color:#FFF;}
#programme h3 {margin-bottom:50px;font-style:italic;color:#0d0c09;}
#programme .prog_heure {font-size:13px;font-weight:bold;color:#0d0c09;margin:0;text-transform:uppercase;}
#programme .prog_item {margin:0;font-size:24px;color:#FFF;text-transform:uppercase;}
#programme .prog_infos {font-size:12px;font-weight:bold;color:#0d0c09;margin:0;margin-bottom:60px;text-transform:uppercase;letter-spacing:0.1em;}









#temoins {padding:100px 30px;text-align:center;}
#temoins h2 {font-size:40px;}
#temoins h2 span {font-family: 'Prata', serif;font-size:14px;display:inline-block;margin-top:10px;}
#temoins .temoin img {opacity:0.5;transition: all 0.5s ease;border-radius:100%;border:3px solid #000;}
#temoins .temoin:hover h2 {color:#EBAC01;}
#temoins .temoin:hover img {opacity:1;border:3px solid #EBAC01;border-radius:100%;}
#temoins a {display:inline-block;padding:5px 15px;background:#FFF;border-radius:4px;color:#EBAC01;text-decoration:none;}


#partenaires {max-width:1000px;margin:0 auto;padding:170px 40px;text-align:center;}
#partenaires .showhover {opacity:0.5;transition: all 0.5s ease;}
#partenaires .showhover:hover {opacity:1;}




#reponse {
    background:
      radial-gradient(50% 50% at 100% 0,var(--_g)),
      radial-gradient(50% 50% at 0 100%,var(--_g)),
      radial-gradient(50% 50%,var(--_g)),
      radial-gradient(50% 50%,var(--_g)) calc(var(--s)/2) calc(var(--s)/2)
      var(--c1);
    background-size: var(--s) var(--s);
    text-align:center;
    padding-bottom:10px;
    padding-top:30px;
    color:#0d0c09;
}
#reponse h2 {color:#FFF;}
#reponse a {color:#0d0c09;}
#reponse-couple {background:#FFF;margin:20px;}
#reponse-couple img {position:relative;bottom:10px;left:10px;}



#lieux {text-align:center;background:url("images/fond-lieu.png") no-repeat center center fixed #EBAC01;padding:10px;}
#lieux h3 {margin-bottom:50px;font-style:italic;color:#0d0c09;}
#lieux a {background:#FFF;color:#0d0c09;text-decoration:none;display:inline-block;padding:5px 15px;border-radius:4px;}
#lieux a:hover {background:#0d0c09;color:#FFF;}


#hebergement {text-align:center;background:url("images/fond-hebergement.png") no-repeat center center fixed #8491A3;padding:10px;}
#hebergement h3 {color:#0d0c09;font-family: 'Prata', serif;text-transform:uppercase;font-size:18px;}
#hebergement p {font-size:14px;}



#off {display:none;}