/*
Theme Name: Astra Child
Description: Child theme for Astra. You can now safely customize it and not risk losing your customizations.
Author: WPMarmite
Author URI: https://wpmarmite.com
Template: astra
Version: 1.0
*/

body {background: linear-gradient(to right, rgba(69,15,15,255), rgba(127,34,33,255)) !important;}

.site-content,
.ast-container {
  background: transparent !important;
}

.site-title {
  display: none !important;
}

/* Supprimer la largeur max par défaut d’Astra */
/*
.ast-container,
.site-content,
.site-main,
.content-area.primary,
.entry-content.clear {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
*/

.site-header,
.ast-primary-header,
.ast-primary-header-bar,
.ast-builder-grid-row-container,
.ast-above-header,
.ast-below-header {
  /*background:  linear-gradient(to right, rgba(69,15,15,255), rgba(127,34,33,255)) !important;*/
  background:  white !important;
  border-bottom-color: rgba(208,176,135,255) !important;
  border-bottom-width: 5px;
  box-shadow: none !important; /* supprime l'ombre si présente */
}

/* Header fixé en haut */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999; 
} 

.site-header2 {
  margin-top: 170px;
  }

  @media only screen and (max-width: 800px)  {
    .site-header2 {
      margin-top: 120px;
    }
  }

  @media only screen and (max-width: 800px)  {
    .site-header2  p {
      font-size: 5vw;
    }
  }

  /* Évite que le contenu passe sous le header */
  .site-content {
	  margin-top: 30px; 
  }
  
 /* Deplace le logo dans le header */
  .site-logo-img img {
    position: relative;
    left:10%;
}

@media only screen and (max-width: 800px) {
  .site-logo-img img  {
    width: 160px !important;
    height: auto;
    position: relative;
    left:50%;
  }
}

/* Supprimer les marges autour du logo */
@media only screen and (max-width: 800px) {
.ast-site-identity {
  margin: 0 !important;
  padding: 0 !important;
}
}

@media only screen and (max-width: 800px) {
#ast-scroll-top {
  display: none !important;
}
}


/* ----------------------------------- le menu --------------------------------------*/

.main-header-menu {
  /*position: relative !important;*/
  /*top: -15px !important;*/
	display: flex !important;
	/*gap: 0.001rem !important;*/          /* espace entre les liens */
	font-family: "Saylist" !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
  }

/* Liens du menu */
.main-header-menu a {
	color: rgba(208,176,135,255) !important;         /* couleur du texte */
	text-decoration: none !important;  /* pas de soulignement */
	/*padding: 10px 14px !important;*/     /* espace cliquable */
	border-radius: 8px !important;
	transition: all 0.3s ease !important;
}

/* Effet au survol */
.main-header-menu a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffcc00;         /* change la couleur du texte */
}

/* Élément actif (page en cours) */
.main-header-menu .current-menu-item > a {
	color: #ffcc00;
	/*border-bottom: 2px solid #ffcc00;*/
}

/*---------------------------------------------------------------------------------------*/




/*---------------------------------- Page Accueil ----------------------------------------*/

.head-logos{
    display:flex;
}

.logo{
    width:50%;
}

.logo > a > img {
    width:15%
}

h2,h1,h3,p,ol {
	position: relative;
  text-align: center;
	color: rgba(208,176,135,255);
	font-family:"Saylist";
	font-size: 3vw;
}

.presentation {
  border-top: double 0.3vw rgba(208,176,135,255);
	display: flex;
	margin: auto;
}

.presentation-image {
	margin:auto;
  /*position: relative;*/
  padding-left:5%;
  width: 35%;
}

.texte{
  	padding-left:5%;
  	padding-right:5%;
  	width:70%;
}

.texte > h1, .horaires > h2, .menu > h2 {
  font-size: 2vw;
	color: rgba(208,176,135,255);
}

.texte > h3 {
	font-size: 1.5vw;
	color: rgba(208,176,135,255);
  font-family: 'Segoe Script';
}

.horaires{
    border-top: double 0.3vw rgba(208,176,135,255);
}

.horaires > h2, .menu > h2, .confidentialite > h2{
  color: rgba(208,176,135,255);
}

.horaires-par-jour{
    padding-left:1%;
    padding-right:1%;
    display:flex;
}

.jour{
    width:14%;
}

.jour > h3{
    color: rgba(208,176,135,255);
    font-size:2vw;
}

.jour > p {
    font-size:1.5vw;
}


.menu, .confidentialite, .utilisation, .contact{
    border-top: double 0.3vw rgba(208,176,135,255);
    border-bottom: double 0.3vw rgba(208,176,135,255);
    padding-bottom:3%;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
  padding-left:30%;
  padding-right:30%;
  text-align:center;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (max-width: 800px)  {
  div.presentation  {
      position: relative;
      display: block;
      height: 720px;
  }
}

@media only screen and (max-width: 800px)  {
  div.presentation-image  {
      position: relative;
      left: -3%;
      top: 20px;
      padding-left:0%;
      width: 35%;
  }
}

@media only screen and (max-width: 800px)  {
  div.texte {
      position: relative;
      left: 20px;
      top: 30px;
      width: 90%;
  }
}

@media only screen and (max-width: 800px)  {
  div.texte > h1, div.horaires > h2, div.menu > h2,  h2.footer2 {
    font-size: 5vw;
  }
}

@media only screen and (max-width: 800px)  {
  div.texte > h3 {
    font-size: 4vw;
  }
}

@media only screen and (max-width: 800px)  {
  .logo{
    width:50%;
  }
}

@media only screen and (max-width: 800px)  {
  .logo  a  img {
    width:30%
  }
}

@media only screen and (max-width: 800px)  {
  .prev, .next {
    position: absolute;
    top: 465px;
  }
}

@media only screen and (max-width: 800px)  {
  .next {
    position: absolute;
    right: 50px;
    font-size: 25px;
  }
}

@media only screen and (max-width: 800px)  {
  .prev {
    position: absolute;
    right: 230px;
    font-size: 25px;
  }
}

@media only screen and (max-width: 800px)  {
  .prev:hover, .next:hover {
    background: none;
  }
}

@media only screen and (max-width: 800px)  {
  .slideshow-container{
    display: inline-block;
    height: 500px;
  }
}

@media only screen and (max-width: 800px)  {
  .slideshow-container img{
    position: relative;
    top:110px;
    transform: scale(2);
    width:400px;
    height: auto;
    border : 2px solid black;
  }
}

@media only screen and (max-width: 800px)  {
  .dot {
    margin: 0 13px;
    display: none;
  }
}

/* ----------------------------------------------------------------------------------------------------------- */



/* -------------------------------- Page confidentialite et utilisation -------------------------------------- */

.down-logos {
	display: flex;
	padding-bottom:5%;
	text-align:center;
}

.down_logos_image {
  	width: 16.6%;
}

.down_logos_image p {
    font-size: 1.5vw;
    text-decoration: none;
}

.down_logos_image > a {
    text-decoration: none;
}

.telephone{
  	display:flex;
}

.down-links p {
    font-size: 1vw;
}

.down-links a{
    text-decoration: none;
}

.lien {
    width:40%;
}

.confidentialite{
  padding-left: 30%;
  padding-right: 30%;
}

.confidentialite h2, ol{
  font-size: 1.5vw;
}

.confidentialite p{
  font-size: 1vw;
}

.utilisation{
    padding-left: 30%;
    padding-right: 30%;
    text-align:center;
}

.condition ol, .condition h2 {
    font-size: 1.5vw;
    display: inline-block;
    text-align:left;
    color: rgba(208,176,135,255);
}

.condition p{
    font-size: 1vw;

}

@media only screen and (max-width: 800px)  {
  div.confidentialite > p {
    font-size: 4vw;
  }
}

@media only screen and (max-width: 800px)  {
  div.confidentialite > h2 {
    font-size: 5vw;
  }
}

@media only screen and (max-width: 800px)  {
  div.confidentialite {
    padding-left: 10%;
    padding-right: 10%;
  }
}

@media only screen and (max-width: 800px)  {
  div.condition > ol {
    font-size: 4vw;
  }
}

@media only screen and (max-width: 800px)  {
  div.condition > ol > p {
    font-size: 4vw;
  }
}

@media only screen and (max-width: 800px)  {
  div.condition > ol > li > h2 {
    font-size: 5vw;
  }
}

@media only screen and (max-width: 800px)  {
  .utilisation .condition ol ol {
    font-size: 3vw;
  }
}

@media only screen and (max-width: 800px)  {
  .utilisation .condition ol li p {
    font-size: 3vw;
  }
}

@media only screen and (max-width: 800px)  {
  div.utilisation {
    padding-left: 10%;
    padding-right: 10%;
  }
}

/* ----------------------------------------------------------------------------------------------- */



/* -------------------------------- le formulaire de contact -------------------------------------- */

.contact {
  margin-left:28%;
  margin-right: 28%;
}

.contact > h1 {
  color: rgba(208,176,135,255)
}

.datas{
  position: relative;
  right: -20%;
  display:flex;
  padding-bottom:5%;
  width:80%;
}

.data1, .data2 {
  width:40%;
}

.contact  p{
  font-size: 1.5vw;
  font-weight: bold;
}

.data1, .data2 > h3{
  font-size: 2.5vw;
  color: rgba(208,176,135,255)
}

.reseaux{
  display:flex;
  text-align:center;
}

.image {
  width: 20%;
}

.image > a > img{
  width: 20%;
}

.form form{
  text-align: center;
}

.form  form  input {
  width: 18%;
  color:rgba(208,176,135,255);
  /*background: linear-gradient(to right, rgba(69,15,15,255), rgba(127,34,33,255));*/
  height: 1.8vw;
  border: 0.1vw solid rgba(208,176,135,255);
  border-radius: 4px;
}

/*
.form form button {
  width: 8%;
  color:rgba(208,176,135,255); */
  /*background: linear-gradient(to right, rgba(69,15,15,255), rgba(127,34,33,255));*/
  /*
  background: white;
  border: 0.1vw solid rgba(208,176,135,255);
  border-radius: 4px;
}*/

.form form button {
  /*background: linear-gradient(135deg, #8a2be2, #ff4081);*/ /* Dégradé moderne */
  background: linear-gradient(to right, rgba(69,15,15,255), rgba(127,34,33,255));
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 24px;
  border: none;
  border-radius: 30px; /* Bouton arrondi */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease-in-out;
}


.form form button[type="submit"]:hover {
  /*background: linear-gradient(135deg, #ff4081, #8a2be2);*/
  background: linear-gradient(to right, rgba(127,34,33,255), rgba(69,15,15,255));
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.form form button[type="submit"]:active {
  transform: scale(0.95);
}

.form form textarea {
  width: 30%;
  height: 200px;
  color:rgba(208,176,135,255);
  /*background: linear-gradient(to right, rgba(69,15,15,255), rgba(127,34,33,255));*/
  border: 0.1vw solid rgba(208,176,135,255);
  border-radius: 4px;
}

@media screen and (max-width: 800px) {
  .contact p {
    font-size: 14px;
  }
}

@media screen and (max-width: 800px) {
  .datas {
    width:80%;
    position: relative;
    right: -10%;
  }
}

@media screen and (max-width: 800px) {
  .data1 ,.data2  {
    width: 60%;
  }
}

@media screen and (max-width: 800px) {
  .data1 p {
    margin: 0;
    text-align: center;
  }
}

@media screen and (max-width: 800px) {
  .data2 p {
    text-align: center;
  }
}

@media screen and (max-width: 800px) {
  .reseaux {
    width: 200px;
  }
}

@media screen and (max-width: 800px) {
  .data1 h3, .data2 h3{
    font-size: 4vw;
    color: rgba(208,176,135,255)
  }
}

@media screen and (max-width: 800px) {
  form.formBrasserie button[type="submit"]{
    width: 150px;   /* plus large en mobile */
  }
}

@media screen and (max-width: 800px) {
  form.formBrasserie > input{
    width: 200px;   /* plus large en mobile */
  }
}

@media screen and (max-width: 800px) {
  form.formBrasserie textarea{
    width: 300px;   /* plus large en mobile */
  }
}

/* ---------------------------------------------------------------------------------------- */