:root {
	--primary-color: #2D1312;
    --secondary-color: #FF3D02;
    --tertiary-color: #d1e5c5;
    --black-color: #1B1B1B;
    --white-color: #fefefe;
    --gray-color: #999;
}

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


/* Communs 
****************************************/
html {
	scroll-behavior: smooth; 
}

body  {
	font-size: 16px;
	background: #F7F8F9;
}

img {
	width: 100%;
	height: auto;
}

ul {
	list-style: none inside none;
}
h1 {
    display: none;
}
h2 {
    color: var(--secondary-color);
    margin:3rem 0rem 1.5rem 0rem;
   border-bottom:1px solid white;
   border-top:1px solid white;
   border-radius: .8rem;
    font-weight: normal;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
}


h2 + p {
    text-align: center;
    max-width: 30rem;
    width: 100%;
}

h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 1rem 0;
}
p {
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    font-family: 'Poppins', sans-serif;
}
a {
	color: black;
	text-decoration: none;
	transition: all .2s;
    font-family: 'Poppins', sans-serif;
}
a:before,
a:after {
	transition: all .2s;
}

a:hover {
	color: var(--black-color);
}

.button {
    color: var(--white-color);
    background-color: var(--secondary-color);
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: .8rem;
    font-size: .8rem;
    cursor:pointer;
}

.button:hover {
    color: var(--secondary-color);
    background-color: #fff;
}
.button:hover:before{
    transform: translateX(.25rem) scale(1.5);
}

input{
    border:none;
}
.bold{
    font-weight: bolder;
}
/* Structure 
****************************************/
.row {
    display: flex;
    align-items: center;
    max-width: 75rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
   /* border:1px solid red;*/
}

.column {
  max-width: 50%;
  flex-grow: 1;
  flex-shrink: 0;
  padding:1rem;
  display: flex;
    justify-content: center;
}

.nowrap{
    flex-wrap: nowrap;
}
.align-center {
    align-items: center;
} 
.justify-center {
    justify-content: center;
}  
.justify-end {
    justify-content: flex-end;
}  
 
/* Header
****************************************/
header{
    background-image:url(../images/pizza-header.png);
    background-repeat: no-repeat;
    background-size: 65%;
    background-position: 15rem -10rem;
    background-attachment: fixed;
    background-color: #FEFDFC;
}

@media screen and (max-width: 64rem) {
header{
    background-size: 60%;
    background-position: center;
}
}
@media screen and (max-width: 38rem) {
header{
   background-position: bottom;
   background-size: 100%;
}
}
#header-top-line{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: transparent;
}

.name-logo{
    display: flex;
    align-items: center;
}
.name-logo p{
    margin-top: 1rem;
    margin-left: 1rem;
    font-size: 2rem;
    color: orange;
    font-family: 'Vibur', cursive;
}
.header-logo {
    width: 3rem;
    margin-left:1rem;
}
#hero-header{
    height: 70vh;
}
@media screen and (max-width: 64rem) {
.name-logo p{
    margin-top: .5rem;
    margin-left: .5rem;
    font-size: 1.5rem;

}
    .section-header-link{
        display: none;
    }
    #header-top-line{
    justify-content: space-between;

}
}


/* Main nav
****************************************/
#main-nav {
  max-width: 45rem;
  width: 100%;
}
.main-nav-list{
    display: flex;
}

.main-nav-item {
    flex: 1 1 25%;
}
@media screen and (max-width: 64rem) {
    .main-nav-item{
        flex-basis: 10%;
    }
}
.main-nav-link{
    height: 100%;
    padding: .5rem 1.25rem;
    color: var(--black-color);
    font-size: .8rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    text-align: center;
}
.main-nav-link:hover {
    color: var(--black-color);
    border: 2px dotted orange;
    border-radius: .8rem;
    transition: none;
}

.main-nav-button {
    display: none;
}

@media screen and (max-width: 38rem) {
    #main-nav {
      position: fixed;
      top: 0;
      right: -150%;
      width: 100%;
      height: 100%;
      background-color: white;
      transition:right 0.3s;
      z-index: 4;
  }
  #main-nav.is-open {
      right: 0;
  }
  #main-nav.is-open .main-nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-nav-item{
    margin-top: 3.5rem;
    margin-left: 3rem;
}
.main-nav-link{
    font-size: 1.5rem;
}

.js-main-nav-button {
    display: block;
}

}

.js-main-nav-button {
  cursor: pointer;
}

.main-nav-button{
  width: 4rem;
  height: auto;
  margin-top: .8rem;
  margin-right: .8rem;
}
#main-nav img{
    float: right;
    margin-right: 1.5rem;
    width: 3rem;
}

/* Section Our story
****************************************/
.our-story{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: #FFE9C1;
}

.column img{
    max-width: 65%;
    height: auto;
    border-radius: .8rem;
}

.column p{
    text-align: center;
}

@media screen and (max-width: 38rem) {
    .our-story .row{
        flex-direction: column;
    }

    .column{
        max-width: 100%;
        flex-basis: 100%;
    }
    .column p {
        max-width: 85%;
        text-align: justify;
    }
}

/* Section Menu (tabs)
****************************************/
.section-menu{
    /*border: 1px dashed blueviolet;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section-menu h2{
    width: 100%;
    max-width: 100%;
}
 .tab-container{
    margin: 0% 10%;
   /*border: 1px dashed orange;*/
   max-width: 75%;
   width: 100%;
  padding:2rem;
}

.tab-menu span{
    font-family: 'Poppins', sans-serif;
}
.tab-menu ul{
    margin: 0;
    padding: 0;
  display:flex;
  justify-content:center;
}
.tab-menu ul li{
    list-style-type: none;
  margin-left:2rem;
  cursor: pointer;
}
.tab-menu ul li span{
    text-decoration: none;
    color: black;
    padding: 0.5rem 1.25rem;
    border-radius: .8rem;
}
.tab-menu ul li span.active-a{
    border: 2px dotted orange;
}
.tab{
    display: none;
}
.tab-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.5rem;
}
.tab-item{
    flex: 0 1 25%;
    margin-left: 1rem;
    margin-top: 2rem;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tab-item-photo{
    max-width: 60%;
}

.tab p{
    color: rgba(0,0,0,0.6);
    text-align: center;
}
.tab-active{
    display: block;
}

@media screen and (max-width: 64rem){
    .tab-item{
    margin-top: .5rem;
    justify-content: space-between;
    }
}

@media screen and (max-width: 38rem) {
    .tab-content{
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .tab-item{
        margin-left: 0rem;
    flex-direction: row;
    }
    .tab-item-photo{
        max-width: 25%;
    }
    .tab-menu ul li {
        margin: .2rem;
    }
    .section-menu h2+p{
        text-align: justify;
        max-width: 85%;
    }
}

/* Section reservation
****************************************/
.section-reservation{
    background-color:#FFE9C1 ;
    padding: 2rem 0rem;
}
.reservation-form {
    margin-top: 1rem;
    max-width: 75rem;
    background: var(--white-color);
    max-width: 65%;
    width: 100%;
    border-radius: .8rem;
    padding-left: .25rem;
    padding-right: .25rem;
    padding-top: 2rem;
} 
.reservation-form-fieldset {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-width: 0;    
}

.reservation-form-legend {
    display: none;
}
.reservation-form-item {
    margin: .5rem.25rem;
    padding: .25rem 1rem;
    border-radius: .8rem;
    flex: 1 1 25%;
    display: flex;
    flex-direction: column;
}
.section-reservation input, select, textarea{
    border:1px solid var(--primary-color);
    border-radius: .8rem;
}

.reservation-form-submit{
    background-color: var(--secondary-color);
    border:1px solid var(--secondary-color);
}
@media screen and (max-width: 64rem) {
    .reservation-form-item {
        flex-basis: 100%;
    }
}

/* Section media
****************************************/
.media-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
@media screen and (max-width: 38rem) {
    .media-container{
        flex-direction: column;
    }
    .media-item{
        width: 60%;
        max-width: 100%;
    }
}

.media-item {
    flex: 0 0 calc(25% - 2rem); /* divise l'espace en 4 colonnes */
    margin: 1rem;
    position: relative;
}

.video-circle {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Crée un conteneur carré */
    border-radius: 50%; /* Crée un cercle */
    overflow: hidden;
}

iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Section team
****************************************/
.section-team {
background-color:#FFE9C1 ;
padding-top: 1rem;
}

.team-item {
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width: 64rem) {
    .team-item {
        flex-direction: column;
    }
}
.team-content {
    flex: 1;
    padding: 1rem;
    text-align: center;
}

.team-content img {
    max-width: 100%;
}
.team-content p {
    margin-top: 1rem;
}

@media screen and (max-width: 64rem) {
    .team-content {
        display: flex;
        flex-direction: column;
        align-items: center;
}
    .team-content img {
    max-width: 40%;
}
.team-content p {
    text-align: justify;
    max-width: 85%;
}
}

/* Section events
****************************************/
.section-events {
    padding-top: 1rem;
  }

.events-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.events-item {
   flex-basis: 35%;
    margin: 1rem;
    position: relative; /* Pour positionner le texte à l'intérieur de l'élément */
    overflow: hidden;
     border-radius: .8rem;
}

.events-img {
    max-width: 100%;
    width: 100%;
    border-radius: .8rem;
    transition: transform 0.3s, opacity 0.3s; /* Ajoute une transition pour l'effet de zoom et d'opacité */
}

.events-item:hover .events-img {
    transform: scale(1.1); /* Applique un effet de zoom au survol */
    opacity: 0.5;

}

.events-text {
    position: absolute;
    text-align: center;
    top: 50%; /* Positionne le texte au centre verticalement */
    left: 50%; /* Positionne le texte au centre horizontalement */
    transform: translate(-50%, -50%); /* Centre le texte */
    background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent pour le texte */
    color: var(--white-color);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    z-index: 1; /* Positionne le texte au-dessus de l'image */
    display: none;
}

.events-item:hover .events-text {
    display: block; /* Affiche le texte au survol */
}
.events-text:hover{
    color:var(--secondary-color);
    background-color: white;
}
@media screen and (max-width: 38rem) {
    .events-container{
        display: flex;
        flex-direction: column;
    }
    .events-item{
    max-width: 85%;
}
}
/* Section footer
****************************************/
#footer{
    background-color: #F0E9DD;
}
#footer-top-line{
    max-width: 50%;
    margin-bottom:2rem;
    display: flex;
    justify-content:space-between;
    align-items: center;
}
@media screen and (max-width: 64rem) {
#footer-top-line{
    max-width: 90%;
}
}
#footer-nav{
    flex: 1 1 20%;
}
#footer-nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-top-line .name-logo {
    flex: 1 1 20%;
}

.newsletter {
 flex: 1 1 20%;
padding-left: 1rem;
}
.newsletter-form-item{
display: flex;
flex-direction: column;
padding-left: .5rem;
}
.newsletter-form-submit{
    margin-top: .5rem;
}
.newsletter-form-input{
    border:1px solid black;
    max-height: 5vh;
    border-radius: .8rem;
}

.newsletter label, .newsletter legend {
    display: none;
}
fieldset{
    border: none;
}

footer .name-logo p{
    margin: initial;
}

.footer-social {
    text-align: center;
    padding-bottom: .5rem;
}
.fab{
    color: #FF3D02;
}
.footer-mentions {
    text-align: center;
}

@media screen and (max-width: 38rem) {
    .footer-top-line{
        flex-wrap: wrap;
        flex-direction: column;
    }
}