@import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap');

:root {
    --adib-green: #2C674B;
    --adib-orange: #FF653F;
    --adib-gold: #f0bc77;
    --adib-black: #161716;
    --offblack: #0f0f0f;
}
body{
    background-color: var(--adib-green);
    color:white;
    font-family: 'Ibarra Real Nova', serif;
    line-height: .9;
}

body.yas{
    line-height: 1.1;
}

section{
    overflow: hidden;
}

.text-gold{
    color: var(--adib-gold)!important;
}

.text-adib-orange{
    color: var(--adib-orange);
}

.text-adib-green{
    color: var(--adib-green);
}

.hero-background-1{
    background-image: url(./img/hero-site.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

h1{
    font-size: 6rem;
    letter-spacing: -.67rem;
    line-height: .5;
}

.h1-gold{
    font-size: 4rem;
    letter-spacing:0rem;
    line-height: 1;
    color: var(--adib-gold);
}

h2{
    font-size: 2rem;
    letter-spacing: -2px;
    line-height: .7; 
    font-style: italic;  
}

span.logo{
    font-size: 3rem;
    letter-spacing: -4px;
    line-height: .6;
}

span.logo-gold{
    font-size: 1.5rem;
    letter-spacing: -1px;
    line-height: .6;
    color:var(--adib-gold);
    font-weight: light;


}

.hero-cover{
    width:100%;
    height:369px;
    object-fit: cover;
    box-shadow:
    box-shadow:
    3.6px 3px 3.6px rgba(0, 0, 0, 0.024),
    10px 8.4px 10px rgba(0, 0, 0, 0.035),
    24.1px 20.2px 24.1px rgba(0, 0, 0, 0.046),
    80px 67px 80px rgba(0, 0, 0, 0.07)
  ;80px rgba(0, 0, 0, 0.07)
;
}

.hero-cover-gold{
    width:100%;
    height:469px;
    object-fit: cover;
    object-position: top;
}
@media (max-width: 768px) {
    .hero-cover-gold{
        width:100%;
    }  
}

.shadow-special{
    box-shadow:
    box-shadow:
    3.6px 3px 3.6px rgba(0, 0, 0, 0.024),
    10px 8.4px 10px rgba(0, 0, 0, 0.035),
    24.1px 20.2px 24.1px rgba(0, 0, 0, 0.046),
    80px 67px 80px rgba(0, 0, 0, 0.07)
  ;
}

.album-cover{
    width:100%;
    height:300px;
    object-fit: cover;
}

.album-cover-title{
    font-size: 4rem;
    letter-spacing: -7px;
    line-height: .4;
}

.bg-green{
    background-color: var(--adib-green);
}

.bg-off-black{
    background-color: var(--offblack);
}

.image-feature{
    width:100%;
    height:569px;
    object-fit: cover;

}

.quebecois{
    background-color: var(--offblack);
    color:var(--offwhite);
    background-image: url(./img/background-black-grain.png);
    background-repeat: repeat;
    background-size: 25%;
    padding:1rem;
}

.border-thin{
    background-image: url(./img/border-x.png), url(./img/border-x.png), url(./img/border-y.png), url(./img/border-y.png);
    background-repeat: repeat-x, repeat-x,repeat-y, repeat-y;
    background-size: 100% 3px, 100% 3px, 3px 100%, 3px 100%;
    background-position: 0% 0%, 0 100%, 0%, 100%;
}

.trophy-wrapper{
    top:50px;
    right:50px;
    animation: pulse 1s infinite;
}


.des-putes{
    background-color: var(--offblack);
    color:var(--offwhite);
    background-image: url(./img/des-putes-et-des-voleurs.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    padding-top:200px;
    padding-bottom:200px;
}

@keyframes pulse {
	0% {
		transform: scale(0.95) rotateZ(15deg);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1)rotateZ(15deg);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95)rotateZ(15deg);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

.trophy{
    width:20px;
}

.grid-projets{
    display: grid;
   grid-template-areas:
    "item-a item-a item-a item-b"
    "item-c item-c item-d item-d";
    gap: 20px;
}




@media (max-width: 768px) {
    .image-feature{
        height:320px;
        object-fit: cover;
    }
    .trophy-wrapper{
        top:20px;
        right:20px;
        transform: rotateZ(15deg);
    }
    .trophy{
        width:12px
    }
    .des-putes{
        padding-top:100px;
        padding-bottom:100px;
    }
    .grid-projets{
    }

}

.logo-sponsor{
    object-fit: contain;
    width:200px;
    height:100px;
    padding:15px;
}

footer{
    line-height: 1.1;
    letter-spacing: 0;
}