/*  ======================  page Login =============================*/
@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');
@import url( 'https://use.typekit.net/alx2yem.css' );
@import url(" https://use.typekit.net/hbn7bzv.css ");
body {
  font-family: "owners-text";

}

* {
  /* Pour Chrome, Safari, Opera */
  ::-webkit-scrollbar {
      display: none;
  }

  /* Pour Firefox */
  scrollbar-width: none;
  
  /* Pour IE, Edge */
  -ms-overflow-style: none;
}



@media screen and (min-width:1000px){
  .iframe-container2{
    margin-top:-20px;
  }
  
}

/* Assurez-vous que le défilement est toujours possible */

.button-container{
  margin-top:15px;
}

/* Aligne les 2 colonnes horizontalement */
.button-container .btn-row {
  display: flex;
  align-items: center;   /* vertical: centre image + texte */
  gap: 16px;  
  width:100%;
          /* espace entre les colonnes */
}

/* Colonne image (gauche) */
.button-container .btn-col-image {
  flex: 0 0 auto;        /* largeur auto selon l'image */
  display: flex;
  align-items: center;    /* centre l'image dans sa colonne */
}
.button-container .btn-col-image img {
  width: 56px;           /* ajuste si besoin */
  height: auto;
  display: block;
}

/* Colonne texte (droite) */
.button-container .btn-col-text {
  flex: 1 1 auto;        /* prend toute la place restante */
  min-width: 0;          /* évite les débordements */
}
.button-container .btn-col-text .menuc {
  margin: 0 0 6px;
  line-height:0.8!important;
}
.button-container .btn-col-text .menup {
  margin: 0;
}

/* Option : si tu préfères aligner en haut plutôt qu'au centre */
/* .button-container .btn-row { align-items: flex-start; } */


@media screen and (max-width:1900px){

  .iframe-container {
    width: 425px;

    margin-top:15px;
    overflow: hidden; /* Masque tout débordement, y compris les barres de défilement */
  margin-top:-50px;
  }
  .pdf-img{
    width:auto;
height:360px!important;

  }
  .overlay-image {
    position: absolute;
    width:65%;
    left:0;
    top:10px;
  /* ajustez selon vos besoins */
    z-index: 2;
    pointer-events: none; /* permet à l'iframe de capturer les clics */
  }
  
  .iframe-mobile {
    border-radius:35px;
  /* Ajuste l'origine de la transformation */
  /* Ajuster la largeur pour compenser la réduction de l'échelle */
 margin-bottom:-100px;
    border: 4px solid black; 
    transform: scale(0.6);

    width: 375px; /* Largeur intérieure (comme un iPhone 6/7/8) */
    height: 667px; /* Hauteur intérieure */

  }
  .iframe-mobile2 {
    border-radius:35px;
  /* Ajuste l'origine de la transformation */
  /* Ajuster la largeur pour compenser la réduction de l'échelle */
    border: 4px solid black; 
    transform: scale(0.8);
margin-top:-0px;
width: 375px; /* Largeur intérieure (comme un iPhone 6/7/8) */
height: 667px; 
    margin-bottom: -50px;
  }
  .iframe-mobile3 {
    border-radius:35px;
  /* Ajuste l'origine de la transformation */
  /* Ajuster la largeur pour compenser la réduction de l'échelle */
    border: 4px solid black; 
    transform: scale(0.8);
margin-top:-0px;
width: 375px; /* Largeur intérieure (comme un iPhone 6/7/8) */
height: 667px; 
    margin-bottom: -50px;
  }
}


  @media screen and (min-width: 1900px) {

    .iframe-container {
    
  
      margin-top:15px;
      overflow: hidden; /* Masque tout débordement, y compris les barres de défilement */
    
    }
.pdf-img{
  width:auto;
height:393px;

}
.overlay-image {
  position: absolute;
  width:75%;
  left:0;
  top:30px;
/* ajustez selon vos besoins */
  z-index: 2;
  pointer-events: none; /* permet à l'iframe de capturer les clics */
}

.iframe-mobile {
  border-radius:35px;
  margin-bottom:-120px;
  margin-top:-100px;
  width: 375px; /* Largeur intérieure (comme un iPhone 6/7/8) */
  height: 667px; /* Hauteur intérieure */
  border: 4px solid black; 
}
.iframe-mobile2 {
  border-radius:35px;
  
 /* Ajuste l'origine de la transformation */
  /* Ajuster la largeur pour compenser la réduction de l'échelle */
  width: 375px; /* Largeur intérieure (comme un iPhone 6/7/8) */
  height: 667px; 
    border: 4px solid black; 
}
  }



.ordi{
  display:flex!important;
  flex-wrap: wrap;
  align-items: flex-start;
}
.box {
  flex: 1 1 50%; /* Prend la moitié de l'espace disponible par défaut */
  box-sizing: border-box;
  padding: 20px;
}
.plat-list{
  display:none;
}
@media (min-width: 1000px) {

  .top-desktop{
    margin-top:150px;
  }
  .side-panel {
      left:0!important;
 margin-bottom:30px;
      padding-top:0px!important;
      background-color:#0F393E!important; /* Prend tout l'espace disponible sur petits écrans */
  }
  .plat-title {
    user-select: none;
    white-space: nowrap; /* Empêche le texte de passer à la ligne suivante */
    overflow: hidden; /* Cache le texte qui déborde */
    text-overflow: ellipsis; /* Ajoute des points de suspension */
    max-width: 80%; 
    /* Styles pour le titre du plat */
  }
  .container{
    

    max-width:unset!important;
    padding: 0!important;
  }
  .plat-list{
  /*  display:block!important;*/
  }
  .testbtn{
    display:none!important;
  }
  .image-text-container{
    position:fixed;
    padding-left:30px;
    top:0px;
    padding-top:30px;
    z-index:1000!important;
    background-color:white;
  height:80px;
    width: 100%;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
  }

  .image-text-container img{
    
  }
  .button-container{
    display:none!important;
  }
  .titreFoot{
    display:none!important;
  }
  .button-foot{
    display:none!important;
  }
  .mention{
    position:fixed!important;
    width:unset!important;
    bottom:10px!important;
    right:10px!important;
    left:unset!important;
    z-index:-1;
    transform:unset!important;
    display:unset!important;
  }
  .mention2{
position:fixed!important;
bottom:1px!important;
width:unset!important;
right:10px!important;
left:unset!important;
transform:unset!important;
display:unset!important;
  }
 /* .image-container::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 28%!important;
    transform: rotate(3deg);
    width: 50%!important;
    height: 90%!important;
    background-color: #0F393E;
    border-radius: 20px;
    z-index: -1;
    margin-top:50px!important;
}*/
  .image-style{
    width:60px!important;
    height:60px!important;
  }
  .image-style2{
    width:60px!important;
    height:60px!important;
  }
.pdf-img{


  margin-top:15px!important;
}
.box {
  margin-top:80px;
    width: 50%; /* Ajustez selon la largeur désirée */
    box-sizing: border-box;
    padding: 20px;
}
  .fixed-box {
    position: sticky;
    top: 70px;
    width:100%;
     /* Hauteur de la fenêtre de visualisation pour démonstration */
   
}
}

/* Media query pour les écrans inférieurs à 600px */
@media (max-width: 600px) {
  .box {
      flex: 1 1 100%; /* Prend tout l'espace disponible sur petits écrans */
  }
}


.form-post{

    width: 70%;      /* ou une largeur fixe en pixels */
    margin: 0 auto; 
}

@media screen and (max-width: 1200px){
  .background-image{
    background-image: url("../../images/login/home.jpg");
    background-color: #ACCB43;
    background-size: cover; /* L'image couvre toute la div */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat; /* L'image ne se répète pas */
    width: 100%; /* La div prend toute la largeur */
    min-height: calc(100vh - 56px); /* Hauteur de la div prend toute la hauteur de l'écran (ou ajustez selon vos besoins) */
    border-bottom-right-radius: 50px; /* Ajout d'un arrondi en bas à droite */
    overflow: hidden;
    border-bottom-right-radius: 250px;
}
.form-home{

  position:absolute;
  bottom:30px;
  background-color: #000000d9;
  width:80%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding-top:50px;
  padding-bottom:50px;
  border-radius: 50px;
}
.background-login{
  background-color:#ACCB43;
      width: 100%; /* La div prend toute la largeur */
      min-height: calc(100vh - 56px);
}
.btn-login{
  width:100%;
  margin-top:20px;
  padding:5px 0px 8px 0px;
  border-radius: 36px;
  border:0px;
  color:white;
background-color:#025864;
}

.textdesk {
  display:none!important;
}
}
@media screen and (min-width: 1200px){
.background-image{
    background-image: url("../../images/login/homedesk.png");
    background-color: #ACCB43;
    background-size: cover; /* L'image couvre toute la div */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat; 
    
   
    position: absolute;
    top: 50%; /* Centrer verticalement */
    left: 100%; /* Centrer horizontalement */
    transform: translate(-100%, -50%); /* Alignement précis */
    min-width: 800px; /* Couvrir au moins toute la largeur */
    min-height: 100%; /* Couvrir au moins toute la hauteur */
    object-fit: cover;
    overflow: hidden;
}

.form-home{

  position:absolute;
  bottom:25%;
  background-color: #000000d9;
  width:400px;
  left: 35%;

  text-align: center;
  padding-top:50px;
  padding-bottom:50px;
  border-radius: 50px;
}

.btn-login{
  width:100%;
  margin-top:20px;
  padding:5px 0px 8px 0px;
  border-radius: 36px;
  border:0px;
  color:white;
background-color:#ACCB43;
}

.textdesk {
width:calc(100% - 800px); /* Centre le texte */
position:absolute;
top:40%;
font-family:"kepler-std-condensed-subhead",serif;
text-align:center;
color:white;

}

.textdesk h1 {
  margin-bottom: 20px; 
  font-size: 69px;
font-style: italic;
font-weight: 400;
line-height: 62px; /* 89.855% */
letter-spacing: -3.45px;/* Ajoute un espace en dessous du titre */
}

.textdesk img {
 /* Limite la taille de l'image si nécessaire */
  height: auto;
}



}


.carteClic{
    color:white;
}







/*===============================  Footer ===========================*/



/* Structure de base */
.footer {
  background-color: #0F393E; /* Couleur de fond similaire à l'image */
  color: #fff;
  padding: 4px 10%;
  text-align: center;
}

.footer-content {

  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.footer-logo {
  max-width: 180px;
  margin: 0 10px;
}
@media screen and (max-width: 800px){
  .newsletter-signup p{
margin-top:20px!important;
  }
}



.legal-links {
  display: flex;
  justify-content: flex-start;
  gap: 30px;

  margin-top: -10px;
}

.legal-links a {
  color: white;
  text-decoration: none;
  font-weight:500;
  font-size: 16px;
}

.legal-links a:hover {
  text-decoration: underline;
  color: #ccc;
}

@media (max-width: 600px) {
  .legal-links {
    flex-direction: column;
    align-items: flex-start;
    margin-left:20px;
    padding-bottom:20px;
    margin-top:20px;
    gap: 10px; /* un peu moins d’espace en mobile */
  }
}
.footer-links {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
}

.footer-column h4 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

.footer-column {
text-align:left;
}

.text-container{
  margin-top:20px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column li {
  margin-bottom: 10px;
}

.footer-column a {
  color: #fff;
  text-decoration: none;
}

.social-newsletter {

  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
}

.social-icons a {
  margin: 0 10px;

}
.social-icons a img {
  width:30px;
}
.social-icons {
  margin-bottom: 20px;
}


.newsletter-signup input {
  padding: 0px;
width:75%;
  border-radius: 25px;
  border: none;
  outline: none;
}

.inputnews{
  padding-left:20px!important;
}

.newsletter-signup button {
  background-color: #f8a5c2; /* Bouton rose */
  border: none;
margin-left:-50px;
width:30%;
  border-radius: 25px;
  color: #fff;
  cursor: pointer;
}



.newsletter-signup p {
  margin-top: -10px;
  color: #fff;
  font-size: 14px;
}

.newsletter-signup {
display:flex;
}

.footer-bottom {
  border-top: 1px solid #fff;
  padding-top: 20px;
  margin-top: 20px;
  text-align:left;
}

.footer-bottom p {
  margin-bottom: 10px;
}

.footer-bottom ul {
  list-style: none;
  padding: 0;
  display: flex;

  gap: 30px;
}

.footer-bottom ul li a {
  color: #fff;
  text-decoration: none;
}




/*=============================== header ===========================*/


.side-panel {
    position: fixed;
    left: -250px; /* Caché à gauche initialement */
    top: 0;
    height: 100%;
    width: 250px; /* Largeur du panneau */
    background-color: #111;
    transition: 0.5s;
    overflow-x: hidden;
    padding-top: 60px;
    color: white;
  }
  
  /* Bouton Burger */
  nav button {
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
    color: black;
    margin-top:10px;
    margin-left:5px;
    
  }
  
  /* Bouton Croix */
  .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    text-decoration: none;
    color: white;
  }
  
  /* Lorsque le panneau est ouvert */
  .side-panel.open {
    left: 0;
  }
.navtyle{
    background-color:white;
    display:flex;
   
    
  }

.titreNav{
    
    position:absolute;
    margin-top:20px;
  left: 50%;
  transform: translateX(-50%);
  
    
}

.sep{
    
    width:70%;
    margin:auto;
    margin-top:15px;
    height:1px;
    background-color:#F0C6C2;
}


/*==================================page accueil ===============================*/



.button-container {
    margin-top:15px;
    display: flex; /* Utilise Flexbox */
/* Centre les boutons horizontalement */
    align-items: center; /* Centre les boutons verticalement */
    gap: 10px; /* Espace entre les boutons */
}

.button-container button {
    width:110px;
    font-size:13px;

     /* Ajuste la taille du bouton */
    /* Autres styles pour le bouton (couleur, bordure, etc.) */
}
.btnNum{
    border-radius: 6px;
background: #0F393E;
color:white;
border:0px;
padding:5px 2px;

}

.btnNum img{
    
    width:12px;
   margin-top: -3px;
    margin-right:5px
}


.btnPhy{
    border-radius: 6px;
background: #F0C6C2;
color:white;
border:0px;
padding:5px 2px;

}

.btnPhy img{
    
    width:12px;
   margin-top: -3px;
    margin-right:5px
}

.btnpro{
    border-radius: 6px;
background: white;
color:#0F393E;
border:1px #0F393E solid;
padding:4px 1px;


}
.btnpro2{
  border-radius: 6px;
background: white;
color:#0F393E;
border:1px #0F393E solid;
padding:3px 1px;


}
.btnpro2 img{
  margin-right: 5px;
  width:10px;
 margin-top: -3px;
  
}
.btnpro img{
    margin-right: 5px;
    width:10px;
   margin-top: -3px;
    
}

.jour{
    margin-top:30px;
}

.jour p{
    margin-top:-10px;
}

.platdujour{
    background-image: url('../../images/home/jour.png');
    height:127px;
    width:100%;
    background-size: cover;
    background-repeat: no-repeat; /* Empêcher la répétition de l'image */
  background-position: center center;
    margin-top:-10px;
    display: flex; /* Utilise Flexbox */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */

}
.platnum{
    background-image: url('../../images/home/num.png');
    height:127px;
    width:100%;
    background-size: cover;
    background-repeat: no-repeat; /* Empêcher la répétition de l'image */
  background-position: center center;
    margin-top:-10px;
    display: flex; /* Utilise Flexbox */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */

}
.platphy{
    background-image: url('../../images/home/phy.png');
    height:127px;
    width:100%;
    background-size: cover;
    background-repeat: no-repeat; /* Empêcher la répétition de l'image */
  background-position: center center;
    margin-top:-10px;
    display: flex; /* Utilise Flexbox */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */

}


.plusContainer {
    position: relative; /* Positionnement relatif pour le conteneur */
    /* Autres styles pour le conteneur (taille, couleur, etc.) */
    bottom:-9vh;
    left:30vw;


}


.bottom-right-image {
    margin: 0;
    position: absolute; /* Positionnement absolu pour l'image */
    bottom: 0; /* Aligner en bas */
    right: 0; /* Aligner à droite */
    /* Autres styles pour l'image si nécessaire */
}

/*==================================footer=====================================*/


.button-foot {
    margin-top:20px;
/* Ajustez en fonction de vos besoins */
}

.button-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.button-foot button {
    flex: 1 1 calc(33.33% - 10px); /* Ajustement pour 3 boutons par ligne */
    margin: 5px;
    display: flex;
    background-color: white;
    border:0px;
    align-items: center;
    margin-bottom:10px;
    justify-content: center;
    position: relative; /* Pour positionner l'icône */
}

.button-icon {
    position: absolute;
    left: 5px; /* Ajustez la marge à gauche */
    width: 18px; /* Ajustez selon la taille souhaitée pour vos icônes */
    height: auto;
}

.button-text {
    font-size:13px;
    line-height:1;
    /* Ajustements pour centrer le texte, si nécessaire */
}

.titreFoot{
    position: relative;
    
    margin-top:20px;
  text-align:center;
  
    
}

.mention{
    display:flex;
    width:100%;
    flex-wrap: wrap;
    margin-top:-5px;
    position: relative;
    bottom:10px;
    
  left: 50%;
  transform: translateX(-50%);


}
.mention2{
    display:flex;
    width:100%;
    flex-wrap: wrap;
    
    position: relative;
    bottom:5px;
  
  left: 50%;
  transform: translateX(-50%);


}
.mention a{
    margin-left:10px;
    font-size:10px;
    flex: 1 1 calc(33.33% - 10px);
}
.mention2 a{
    text-align:center;
    font-size:8px;
    flex: 1 1 calc(33.33% - 10px);
}

.sectionCat {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 87%; 
    position: relative;
  
    
}
@media screen and (min-width:1000px){
  .sectionCat {
    display: block;
    margin-left: 0px!important;
    margin-right: auto;
    width: 87%; 
    position: relative;
  
    
}
}


.plat-itemgrub {
    width: 100%;
    padding: 10px 10px; /* padding à gauche et à droite */
 /* centrage de l'élément plat-item */
    display: flex; /* utilisation de flexbox pour aligner les éléments intérieurs */
    justify-content: space-between; /* place le titre à gauche et le prix à droite */
    align-items: center; /* alignement vertical des éléments */
    border-radius: 11px;
    color: black;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid #0F393E;
    user-select: none;
    margin-bottom: 10px;
    transition: border 0s ease, transform 0.3s ease;
  }
  
  .plat-itemgrub:hover {
    width: 100%;
    padding: 10px 10px; /* padding à gauche et à droite */
 /* centrage de l'élément plat-item */
    display: flex; /* utilisation de flexbox pour aligner les éléments intérieurs */
    justify-content: space-between; /* place le titre à gauche et le prix à droite */
    align-items: center; /* alignement vertical des éléments */
    border-radius: 11px;
    color: black;
    font-size: 15px;
    font-weight: 500;
    border-top: 1.25px solid var(--Color---Grub-Kit-Nuit---900, #0F393E);
border-right: 1.25px solid var(--Color---Grub-Kit-Nuit---900, #0F393E);
border-bottom: 2.25px solid var(--Color---Grub-Kit-Nuit---900, #0F393E);
border-left: 1.25px solid var(--Color---Grub-Kit-Nuit---900, #0F393E);
transform: scale(1.01);
    user-select: none;
    margin-bottom: 10px;
  }


  .category-titlegrub, .subcategory-titlegrub {
    cursor: pointer;
    background-color: #f0f0f0;
    
    padding: 3px;
    width:100%;
    text-align: center;
     /* ajustez la largeur selon vos besoins */
    margin: 10px 0 10px 0; /* centrage horizontal */
    display: block; /* rend le bouton comme un bloc pour permettre le centrage */
    /* autres styles si nécessaire */
  }
  .category-titlegrub{
    
    background-color: white;
    border-radius: 11px;
    border:2px solid black;
    color:black;
    font-size:20px;
    font-weight:500;
    user-select: none;
    
    
  }
   .subcategory-titlegrub{
    margin: 10px auto;
    background-color: white;
    border-radius: 11px;
    border:2px solid black;
    color:black;
    padding:0px 10px 0px 10px;
    width:80%;
    margin-top:0px;
    font-size:18px;
    font-weight:500;
    user-select: none;
    
    
  }

  .centered-div {
    width: 100%;

    margin: 0 auto; /* Centre horizontalement */
    /* Vous pouvez également ajouter d'autres styles selon vos besoins */
 /* Facultatif : juste pour voir la div */
    padding: 20px; /* Facultatif : ajouter du padding */
    margin-top:-50px;
}

  .plat-itempro {
    width: 100%;
    padding: 10px 10px; /* padding à gauche et à droite */
 /* centrage de l'élément plat-item */
    display: flex; /* utilisation de flexbox pour aligner les éléments intérieurs */
    justify-content: space-between; /* place le titre à gauche et le prix à droite */
    align-items: center; /* alignement vertical des éléments */
    border-radius: 15px;
    color: black;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid black;
    user-select: none;
    margin-bottom: 10px;
  }
  


  .category-titlepro, .subcategory-titlepro {
    cursor: pointer;
    background-color: #f0f0f0;
    
    padding: 3px;
    width:100%;
    text-align: center;
     /* ajustez la largeur selon vos besoins */
    margin: 10px auto; /* centrage horizontal */
    display: block; /* rend le bouton comme un bloc pour permettre le centrage */
    /* autres styles si nécessaire */
  }
  .category-titlepro{
    
    background-color: white;
    border-radius: 11px;
    border:2px solid black;
    color:black;
    font-size:20px;
    font-weight:500;
    user-select: none;
    
    
  }
   .subcategory-titlepro{
    
    background-color: white;
    border-radius: 11px;
    border:2px solid black;
    color:black;
    padding:0px 10px 0px 10px;
    width:80%;
    margin-top:0px;
    font-size:18px;
    font-weight:500;
    user-select: none;
    
    
  }



  .plat-price {
    user-select: none;
  
    /* Styles pour le prix du plat */
  }

  .sous-cat-list, .plat-list {
    text-align: left; /* Alignement du texte à gauche pour les listes de plats */
  }

  .btnTemplate{
    background-color:#0F393E;
    display: inline-block; /* ou 'inline-flex' si vous utilisez Flexbox */
    padding: 2px 20px 5px 20px;
    border-radius:10px;
    color:white;
    font-size:24px;
    margin-top:10px;

  }

  .btnTemplate2{
    background-color:white;
    display: inline-block; /* ou 'inline-flex' si vous utilisez Flexbox */
    padding: 2px 20px 5px 20px;
    border-radius:10px;
    color:#0F393E;
    font-size:24px;
    margin-top:10px;
    border:solid 2px #0F393E;

  }

  .test {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    
  }
  .teste {
    display: flex;
    align-items: center;
    

   
    
  }
  
  .plat-item {
    /* Styles pour plat-item */
  

  }
  .prix-container {
    display: flex;
    width: 100%;
}
.prix-container > div {
    flex: 1; /* Chaque div prendra une portion égale de la largeur disponible */
    margin: 5px; /* Optionnel : Ajoute un peu d'espace entre les divs */
}
.prix-container label, .prix-container input {
    display: block; /* Pour que les labels et les inputs soient sur des lignes distinctes */
    width: 100%; /* Pour que les inputs prennent toute la largeur disponible dans leurs divs */
}

.button-containerers {
  display: flex;
  width: 100%;
  margin-bottom:50px;
  margin-top:10px;
}
.button-containerers button {
  flex: 1; /* Chaque bouton prendra une portion égale de la largeur disponible */
  margin: 5px; /* Optionnel : Ajoute un peu d'espace entre les boutons */
}

  .menu-kebab {
    position:absolute!important;
right:1vw;
    cursor: pointer;
margin-right:-35px;
margin-top:-10px;
  
    /* autres styles si nécessaires */
  }
  .menu-kebab2 {
    position:absolute!important;
right:1vw;
    cursor: pointer;
    margin-top:5px;
margin-right:-35px;
  
    /* autres styles si nécessaires */
  }
  @media screen and (min-width:1000px){
    .menu-kebab {
      position:absolute!important;
  right:0vw;
      cursor: pointer;
  margin-right:-35px;
  margin-top:-10px;
    
      /* autres styles si nécessaires */
    }
    .plat-itemgrub {

      min-width:78%;
    }
  }
  .popup-content {
   
    position: fixed; /* Positionne le pop-up par rapport à la fenêtre du navigateur */
    bottom: -30px; /* Place le pop-up en bas de la fenêtre */
    left: 0; /* Aligné à gauche de la fenêtre */
    width: 100vw; /* Largeur complète de la fenêtre */
    background-color: #0b1f26; /* Couleur de fond du pop-up */
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2); /* Ombre pour le pop-up */
    z-index: 100; 
   
    border-radius:20px;  
    /* S'assurer qu'il est au-dessus des autres éléments */
    /* Ajoutez des styles supplémentaires si nécessaire (padding, border, etc.) */
  }

  
  .category-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom:10px;
    margin-top:5px;
  }
  
  .category-name {
    flex-grow: 1; /* Permet au texte de prendre toute la largeur disponible */
    text-align: center;
   
  }
  
  .category-icon {
    position:absolute!important;
right:5px;
    cursor: pointer;
margin-right:3px;
    margin-top:0px;
   /* Espace entre le texte et l'icône */
  }

  .add-plat-button {
    display: flex;
    
    justify-content: space-between;
    align-items: center;
    color:white;
    text-align:center;
    padding: 3px 10px 3px 10px ;
    margin-bottom:15px;
    width:50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px; /* Ajustez en fonction de votre mise en page */
    background-color: rgba(27, 98, 106, 0.83); /* Couleur de fond du bouton */
    border-radius: 50px;
    cursor: pointer;
    height: 30px;
  }
  
  .add-plat-button img {
    margin-right:-45px;
    height: 30px; /* Ajustez en fonction de la taille souhaitée de l'icône */
  }

  .image-text-container {
    display: flex;
    padding: 10px 10px 10px 30px;

        align-items: center; /* Centre verticalement le contenu */
        gap:30px;


}

.image-style {
    width: 100px; /* ou toute autre taille appropriée */
    height: 100px; /* pour conserver les proportions de l'image */
    margin-right: 0px; 
    border-radius: 15px;
    padding: 15px;
    background-color: #0F393E;/* Espace entre l'image et le texte */
}
.image-style2 {
  width: 100px; /* ou toute autre taille appropriée */
  height: 100px; /* pour conserver les proportions de l'image */
  margin-right: 0px; 
  border-radius: 15px;
  padding: 15px;
  background-color: #F6BBD4;/* Espace entre l'image et le texte */
}

.text-container {
margin-top:0;
}
.menuh{
  font-size: 28px;
  line-height: 0.5;
  margin-bottom:0.5rem;
  margin-top:0;
color: #0F393E;
}
.menuc{
  font-size: 20px;
  line-height: 0.5;
  margin-bottom:0.5rem;
  margin-top:0;
color: #0F393E;
}
.menup{
  font-size:15px;
  max-width:80%;
  line-height: 1em;
  margin-bottom:0;
  color: #0F393E;
}

.close-icon {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
  color: #ffffff; /* Ou la couleur de votre choix */
}


.close-edit-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  /* Autres styles si nécessaire (taille, etc.) */
}

.button-container-princ {
  display: flex;
  flex-direction: column;
  margin-bottom:60px;
  align-items: center; /* Centrage horizontal des boutons */
}
.param{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:30px;
  margin-bottom:20px;
}
.custom-button {
  background-color: transparent; /* Enlève le fond du bouton */
  border: 1px solid white; /* Style de la bordure du bouton */
  border-radius: 15px; /* Arrondir les coins du bouton */
  width: 250px;
  height:40px; /* Largeur fixe pour chaque bouton */
  cursor: pointer; /* Change le curseur en pointeur */
  margin: 5px 0; /* Espacement au-dessus et en dessous du bouton */
  padding: 5px 10px; /* Espacement intérieur pour le bouton */
  color: white; /* Couleur du texte */
  display: flex; /* Utilise flexbox pour l'alignement */
  align-items: center; /* Alignement vertical des éléments à l'intérieur du bouton */
  justify-content: center; /* Centre le contenu dans le bouton */
  position: relative; /* Positionnement relatif */
}

.button-icon {
  margin-right: 10px; /* Espacement entre l'icône et le texte */
  width: 20px; /* Largeur de l'icône */
  height: auto; /* Hauteur automatique pour maintenir le ratio */
  position: absolute; /* Positionnement absolu */
  left: 10px; /* Espacement depuis le bord gauche du bouton */
}

.button-text {
  text-align: center; /* Centre le texte horizontalement */
  flex-grow: 1; /* Permet au texte de prendre tout l'espace disponible */
}



.newsletter{
  font-family:"kepler-std-condensed-subhead",serif;
}

.laStatdeMichou{
  font-family:"kepler-std-condensed-subhead",serif;
  font-size: 50px;
font-style: italic;
font-weight: 400;
color: #0F393E;
line-height: 53px;
}


.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
}

.categorie{
  margin-bottom:50px;
}

.pop-upplat{
  overflow-y: auto; /* Permet le défilement vertical si le contenu dépasse */
  max-height: 80vh; /* Hauteur maximale du pop-up */
}


.plat-item .active {
  /* Style pour plat actif */
}

.inactive {
  /* Style pour plat inactif */
  color: grey!important;
  opacity: 0.5;
}

.button-text{
  font-size:17px;
}

.gestion{
  font-size:16px;
  color:lightgrey;

  margin-bottom:30px;
  margin-left:20px;
  margin-right:40px;
}
button{
  font-size:17px;
}
.gestionNom{
  color:white;
  text-align: center;
   font-size:25px;
   margin-top:-10px;
   margin-bottom:0px;
}

.gestionDescription{
  color:white;
  text-align: center;
   font-size:18px;
}
.btn-categorie{

  margin-left: auto;
  margin-right: auto;
margin-bottom:10px;
  background-color: transparent; /* Enlève le fond du bouton */
  border: 1px solid white; /* Style de la bordure du bouton */
  border-radius: 15px; /* Arrondir les coins du bouton */
  width: 250px;
  height:40px; /* Largeur fixe pour chaque bouton */
  cursor: pointer; /* Change le curseur en pointeur */
/* Espacement au-dessus et en dessous du bouton */
  padding: 5px 10px; /* Espacement intérieur pour le bouton */
  color: white; /* Couleur du texte */
  display: flex; /* Utilise flexbox pour l'alignement */
  align-items: center; /* Alignement vertical des éléments à l'intérieur du bouton */
  justify-content: center; /* Centre le contenu dans le bouton */
  position: relative;
}
.btn-ajout{
  background-color: transparent; /* Enlève le fond du bouton */
  border: 1px solid white; /* Style de la bordure du bouton */
  border-radius: 15px; /* Arrondir les coins du bouton */
  width: 250px;
  height:40px; /* Largeur fixe pour chaque bouton */
  cursor: pointer; /* Change le curseur en pointeur */
/* Espacement au-dessus et en dessous du bouton */
  padding: 5px 10px; /* Espacement intérieur pour le bouton */
  color: white; /* Couleur du texte */
  display: flex; /* Utilise flexbox pour l'alignement */
  align-items: center; /* Alignement vertical des éléments à l'intérieur du bouton */
  justify-content: center; /* Centre le contenu dans le bouton */
  position: relative;
  margin-left: auto;
  margin-right: auto;
  
  margin-bottom:10px;
}
.btn-template{
  background-color: transparent; /* Enlève le fond du bouton */
  border: 1px solid white; /* Style de la bordure du bouton */
  border-radius: 15px; /* Arrondir les coins du bouton */
  width: 250px;
  height:40px; /* Largeur fixe pour chaque bouton */
  cursor: pointer; /* Change le curseur en pointeur */
/* Espacement au-dessus et en dessous du bouton */
  padding: 5px 10px; /* Espacement intérieur pour le bouton */
  color: white; /* Couleur du texte */
  display: flex; /* Utilise flexbox pour l'alignement */
  align-items: center; /* Alignement vertical des éléments à l'intérieur du bouton */
  justify-content: center; /* Centre le contenu dans le bouton */
  position: relative;
  margin-left: auto;
  margin-right: auto;
  
  margin-bottom:10px;
}

.form-pop-cate{
padding: 20px;
}
.btn-save-cate{
  margin-bottom:50px;
}

.form-cate-nom{
  border-radius: 10px;
  padding: 7px 10px 7px 10px;
  width:100%;
  margin-bottom:1px;
  border:0px;
  background-color:lightgray;}

  .form-cate-description{
    border-radius: 5px;
    padding: 7px 10px 7px 10px;
    width:100%;
    margin-bottom:1px;
    border:0px;
    background-color:lightgrey;}
    


.form-group-cate{
width:100%;
}

.form-group{
  margin-bottom:0px!important;
}

.modifier-formulaire{
  width:100%!important;
  margin-top:0px;
}


#closePopupButton{
  background-color:unset;
  border:0px;
  position: absolute;
  right: 5px;
  margin-top: -10px;
}

.control-cate-nom{
  color:white;
  font-size:17px;
  font-weight:bold;
}

.control-cate-description{
  color:white;
  font-size:17px;
  font-weight:bold;
}

.btn-save-cate{
  background-color:white;
  border-radius: 50px;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:100%;
  margin-top:30px;
  padding-top:3px;
  padding-bottom:3px;
  font-weight:600;
}
input:focus {
  outline: none; /* Supprime la bordure lorsqu'en état de focus */
  background-color:white;
}

form {
  width:80%;
}

#plat_step1_id_categorie{
  display:none;
}

#plat_step1_id_template{
  display:none;
}

label[for="plat_step1_id_template"],
label[for="plat_step1_id_categorie"],
label[for="plat_step1_sous_categories"] {
    display: none;
}

label[for="plat_step1_sous_categorie"]{
  margin-top:50px;
}

#closePop{
  background-color:unset;
  border:0px;
  position: absolute;
  right:5px;
  top:10px;
}

.checkbox-custom {
  display: none;
}

.hidden {
  display: none;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* Alignement des conteneurs enfants au début */
  gap: 10px; /* Espacement entre les éléments */
}

.checkbox-container {
   /* Ajuste pour 3 par ligne, en tenant compte de l'espacement */
  display: inline-block;
   /* Empile le widget et le label verticalement */
  align-items: center; /* Centre les éléments dans le conteneur */
}

.checkbox-custom + label {
  margin: 2px 2px; /* Retire l'espacement par défaut entre les boutons */
  background-color: rgba(27, 98, 106, 0.096)!important;
  color: rgba(255, 255, 255, 0.55)!important;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.55)!important;;
  border-radius: 5px;
  cursor: pointer;
  font-size:17px;
  border-radius: 20px;
  padding-left:20px;
  padding-right:20px;
  transition: background-color 0.3s ease;
  /* Assure que le label utilise toute la largeur du conteneur */
  text-align: center; /* Centre le texte dans le label */
}

.checkbox-custom:checked + label {
  background-color: rgba(27, 98, 106, 0.83)!important;
  border:#ffffff 1px solid!important;
  color: rgb(255, 255, 255)!important;
  border-radius: 25px;
  padding-left:20px;
  padding-right:20px;
  color: #fff;
}

.description-container div{
  width:100%;
}

.pdf-img{
  display: block;

  margin-bottom:10px;
  margin-top:5px;
  border-radius:20px;
  transform: rotate(-2deg);
}

/*
.image-container::before {
  content: '';
  position: absolute;
bottom:5px;
  left: 15%;
  transform: rotate(3deg);
  width: 100%; 
  height: 100%; 
  background-color: #0F393E; 
  border-radius: 20px; 
  z-index: -1; 
}*/















.custom-label-class {
  font-weight: 400;
  font-size:16px;
  color: #ffffff!important;



}

.custom-input-class {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 3px;
}

.custom-button-class {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.checkbox-custom {
  margin-right: 10px;
}

.checkbox-container {
  display: inline-block;
  align-items: center;
  margin-bottom: 10px;
}

#montrer-plus{
  width:100%;
  border:1px solid white;
  color:white;
  border-radius: 50px;
  margin-top:10px;
  margin-bottom:10px;
  padding:3px;
}
#montrer-plus-decli{
  width:100%;
  border:1px solid white;
  color:white;
  border-radius: 50px;
  margin-top:10px;
  margin-bottom:10px;
  padding:3px;
}

.btn-ajout-plat{
  background-color:white;
  border-radius:10px;
  color:#0F393E;
  width:100%;
  margin-top:10px;
  font-weight:600;
  border:0px;
}
.btn:hover{
  color:#0f2931!important;
  background: #e1e6ea!important;
  border:0!important;

}

#afficher-allergenes{
  width:100%;
  margin-top:10px;
  margin-bottom:10px;
  border:solid 1px white;
  background-color:#0F393E;
  color: white;

  border-radius:10px;
}

.descri-plat{
  margin-bottom:-5px;
  font-size:18px;
}

.descri-nom-plat{
  margin-bottom:-5px;
  font-weight:600;
  font-size:22px;
}

/* Styles globaux pour les inputs */
.form-container input,
.form-container select,
.form-container textarea {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 7px 10px 7px 10px;
    width: 100%;
    margin-bottom:10px;

}

/* Styles globaux pour les labels */
.form-container label {
    font-weight: bold;
  
 font-size:17px;
    color:white;
}

/* Style pour les boutons */
.btn-primar {
  font-weight:700!important;
    background-color: white!important;
    border-color: white;
    border: solid 1px white!important;
    border-radius: 10px;
    color: #0F393E!important;
    width:100%;
    margin-top:20px;
    margin-bottom:50px;
}
.btn-secondary {
  font-weight:700!important;
    background-color: rgb(189, 189, 189)!important;
    border-color: rgb(189, 189, 189)!important;
    border: solid 1px rgb(189, 189, 189)!important;
    border-radius: 10px!important;
    color: #0F393E!important;
    width:100%;
    margin-top:20px;
    margin-bottom:50px;
}

.btn-secondares {
  font-weight:700!important;
    background-color: rgb(255, 255, 255)!important;
    border-color: #0F393E!important;
    border: solid 1px #0F393E!important;
    border-radius: 10px;
    color: #0F393E!important;
    width:100%;
    margin-top:20px;
    margin-bottom:50px;
}

#allergene-section{
  margin-top:10px;

}


.input-group {
  text-align: center;
  margin-bottom: 10px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

label{
  margin-bottom:0px!important;
}
.input-etablissement {
  text-align: center;
  padding: 8px;
  border: 1px solid #0F393E;
  border-radius: 50px; /* Bords arrondis */
  background-color: #f0f0f0; /* Couleur de fond pour l'état inactif */

  transition: background-color 0.3s ease; /* Transition douce pour le changement de couleur */
}

.input-etablissement:read-only {
  background-color: #ffffff; /* Grisé en inactif */
  color:#0f393e92;
  font-weight:700;
}

.input-etablissement:not(:read-only) {
  background-color: #ffffff; /* Blanc en actif */
  color:#0F393E;
  font-weight:700;
}

/* Optionnel: Changer le style lors du focus */
.input-etablissement:focus {
  border-color: #0F393E; /* Change la couleur de bordure lors du focus */
  outline: none; /* Retire l'outline par défaut pour le focus */
}

.label-commun {

 width:100%;
 font-size: 16.92px;
 font-weight: 500;
  text-align: center;
  margin-bottom: 0px!important;
}



.etablissement{

  width:80%;
  

  margin:0 auto;
}


.btn-edit, .btn-save {
  display: block;
  border:0px;
 
  width:150px;
  border-radius: 25px;
  background-color: #0F393E;
  padding:3px 20px;
  color:white;
  margin: 30px auto; /* Centrer les boutons */

}

.label-commun{

  text-align:left;
}

.input-group .input-etablissement {
  border-radius: 10px !important; /* Forcer les coins arrondis sur tous les côtés */
  margin-left: 0 !important; /* Annuler la marge négative si nécessaire */
}

.vosinfo{
  margin-top:0px;
  font-size:23px;
  margin-bottom:20px;
}
.titreinfo{
  font-style: italic;
font-weight: 400;
  font-family:"kepler-std-condensed-subhead",serif;
  font-size:66px;
  margin-top:30px;
  margin-bottom:10px;
  line-height:0.8em;
}


.styled-checkbox {
  display: none;
}

.styled-checkbox-label {
  display: inline-block;
  background-color: #f0f0f0; /* Couleur de fond initiale */
  padding: 2px 10px; /* Ajustez selon vos besoins */
  border-radius: 5px; /* Bords arrondis pour le label */
  cursor: pointer;
  position: relative;
  margin-right: 5px;
  margin-bottom: 5px!important;
  transition: background-color 0.3s; /* Transition douce pour le changement de couleur */
}

.styled-checkbox:checked + .styled-checkbox-label {
  background-color: #0F393E; /* Couleur de fond quand c'est coché */
  color: white; /* Couleur du texte quand c'est coché */
}

.styled-checkbox:checked + .styled-checkbox-label:before {
 /* Caractère Unicode pour une coche */
  position: absolute;
  left: 5px; /* Ajustez selon vos besoins */
  top: 50%;
  transform: translateY(-50%);
  color: white; /* Couleur de la coche */
  font-size: 20px; /* Taille de la coche */
}


.form-cate-nom, .form-cate-declinaison {
  width: 100%; /* Force les champs à prendre toute la largeur du conteneur */
  padding: 8px;
  border-radius: 5px; /* Bords arrondis pour les champs */
  border: 1px solid #ccc; /* Bordure légère pour les champs */
}

.btn {
  /* Styles pour les boutons */
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background:#e1e6ea!important;
  color: #0f2931!important;
  font-weight:700!important;
  border-radius:10px!important;
}

.btn-delete-declinaison {
  margin-left: 10px; /* Espacement entre le champ et le bouton de suppression */
}

/* Style spécifique pour le bouton Ajouter une déclinaison */
#ajouterDeclinaison,.btn-declinaison-cate {
  background-color: #0f2931; /* Couleur de fond */
  color: white; 

  width:100%;/* Couleur du texte */
/* Espacement au-dessus du bouton */
}

.btn-delete-declinaison {
  position: relative;
  top:-30px;
  text-align:right;

  right: -10px;
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  font-weight:700;
}

.declinaison-field {
  margin-bottom: -20px;
  margin-top:10px;

}

#ajouterDeclinaison, .btn-declinaison-cate{
  margin-bottom:20px;
}
.control-cate-declinaison{
  font-weight: bold;
}

.form-cate-declinaison {
  flex-grow: 1; /* L'input prend toute la largeur disponible, moins l'espace pour le bouton */
}

.popup-content3 {
   
  position: fixed; /* Positionne le pop-up par rapport à la fenêtre du navigateur */
  bottom: -30px; /* Place le pop-up en bas de la fenêtre */
  left: 0; /* Aligné à gauche de la fenêtre */
  width: 100vw; /* Largeur complète de la fenêtre */
  background-color: #0b1f26; /* Couleur de fond du pop-up */
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2); /* Ombre pour le pop-up */
  z-index: 100; 
  padding: 20px;
 
  border-radius:20px;  
  /* S'assurer qu'il est au-dessus des autres éléments */
  /* Ajoutez des styles supplémentaires si nécessaire (padding, border, etc.) */
}
.btndate{
  margin-bottom:50px;
}

.hiden {
  display: none;
}

.futur-plat{
  background-color:#98aaaf9a;
  border-radius: 50px;
  padding: 0px 20px 0px;
  text-align: center;
  margin-top:-5px;
  margin-bottom: 10px;
}


.carteteam{

display:flex;
  padding:10px 20px;
  background-color: #0F393E;
  color:white;
  border-radius:11px;
  margin-bottom:20px;
  margin-right:20px;
}


.newsletter-signup{
  padding:20px;
}
.category-icon2 {
  position:absolute!important;
right:3.6vw;
  cursor: pointer;
margin-right:3px;
  margin-top:-10px;
  width:22px;
 /* Espace entre le texte et l'icône */
}

/*footer*/

@media screen and (max-width:1000px){
  .newsletter-signup{
    display:block;

  }
  .plat-title {
    user-select: none;
    white-space: nowrap; /* Empêche le texte de passer à la ligne suivante */
    overflow: hidden; /* Cache le texte qui déborde */
    text-overflow: ellipsis; /* Ajoute des points de suspension */
    max-width: 140px; 
    /* Styles pour le titre du plat */
  }
  .category-icon2 {
    position:absolute!important;
right:9.5vw;
    cursor: pointer;
margin-right:3px;
    margin-top:-10px;
    width:22px;
   /* Espace entre le texte et l'icône */
  }
  .container{
    padding:0;
    padding-right:0!important;
    padding-left:0!important;
    margin:0;
  }
  .newsletter-signup{
    padding-right:20px;
    padding-left:20px;

  }
  .newsletter-signup input{

    width:100%!important;
  }
  .footer{
    padding:0;
    margin:0;
  }
  .footer-links{
    display:block;
    padding-left:30px;

  }
  .footer-column{
    margin-bottom:20px;
  }
  .footer-bottom ul{
    margin-bottom:0px;
  }
  .footer-bottom{
    margin: 20px 20px 0px 20px;
  }
  .mentionleg a{

    font-size:16px;
    color:white;
  }
  .mentionleg{
    display:block;
    margin-top:20px;

  }
  .logo-section{
    padding-top:20px;
  }
  .vector{
    margin-bottom:-5px;
  }
/*home*/
.button-container{
  gap:5px;
  padding:0 20px;
}
.iframe-container{
  width:unset!important;
}
form{
  width:80%!important;

}
}
.mentionleg a{


  color:white;
}
.textmenu{
  display: flex;
    margin-right: 30px;
    align-items: center;
}
.text-container{
  margin-left:30px;
}
.traitbleu{
  height:95%;
}
@media (max-width:900px) {
  .image-style{
    width:60px;
    height:60px;
  }
  .image-style2{
    width:60px;
    height:60px;
  }
  .traitbleu{
    display:none;
  }
  .textmenu{

      display:flex;
    }
  .text-container{
    margin-top:30px;
  }
  .image-text-container{
    width:unset;
    display:none;
  }
  .qr-row{
    display:block!important;
  }
  .qr-description{
    margin:0 auto!important;
  }
  .titreqr{
    margin-top:50px!important;
  }
}


@media screen and (max-width:1000px){
  .etablissement{
    width:100%;
    padding:0 20px;
  }
  .titreinfo{
    font-family: 'kepler-std-condensed-subhead', serif; font-size:50px; font-weight:500; 
  }
  
}


/* Surélévation universelle des popups */
.gk-elevated {
  position: fixed !important;
  inset: 0 !important;               /* top/right/bottom/left */
  z-index: 300000 !important;        /* > à tes autres modales */
  display: flex !important;          /* garde ton layout flex */
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.45);       /* backdrop (peut être retiré) */
}

/* Assure un scroll interne propre du contenu */
.gk-elevated .popup-content {
  max-height: 90vh;
  overflow: auto;
}







.test{
  display:flex;              /* s'il ne l’était pas déjà */
  align-items:center;
}

.plat-itemgrub{
  flex:1 1 auto;             /* peut grandir/rétrécir */
  min-width:0;               /* indispensable pour ellipsis */
  margin-right:auto;         /* <<< TRUC CLÉ : absorbe tout l’espace restant */
}

.plat-itemgrub .plat-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ====== Template: rangées de champs dates/heures ====== */
.gk-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .gk-grid-2 { grid-template-columns: 1fr; }
}
/* évite tout débordement des champs internes */
.gk-grid-2 .form-group-cate,
.gk-grid-2 .form-group-cate * { min-width: 0; }
.form-group-cate input,
.form-group-cate select,
.form-group-cate textarea { width: 100%; box-sizing: border-box; }

/* ====== Jours visibles (pills) ====== */
.gk-day-pills{
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.gk-day-label{
  display: inline-block; text-align: center; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: .9rem;
  background: rgba(27,98,106,.096); color: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.35);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gk-day-label:hover{ background:#eaeaea; color:#0b1220; border-color:#bbb; }

/* input masqué réutilisé */
.hidden-checkbox{ display:none; }
/* état actif → rose (même logique que allergènes/switchs) */
.hidden-checkbox:checked + .gk-day-label{
  background: #EABCCD; color:#10242D; border-color:#EABCCD;
}

/* Petites améliorations UX sur mobiles */
@media (max-width: 360px) {
  .gk-day-label{ padding: 6px 10px; font-size: .86rem; }
}

/* Harmonise les inputs type date/time si le thème impose des largeurs fixes */
input[type="date"], input[type="time"], input[type="datetime-local"]{
  max-width: 100%;
}


/* =========================
   GRUBKIT UI — CSS unifié
   ========================= */
label{
font-weight:700!important;
}
/* ---------- Utilitaires / Layout prix ---------- */
.prix-ligne { display:flex; justify-content:space-between; }
.prix-ligne > div { flex-grow:1; }

/* ---------- Boutons génériques ---------- */
.btn {
  background:#e1e6ea; color:#0f2931; border:0; border-radius:10px;
  padding:10px 14px; font-weight:700; cursor:pointer;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.btn-primar, .btn-save-cate { background:#EABCCD !important; color:#10242D !important; }
.btn-secondary { background:#e1e6ea; color:#0f2931; }

/* ---------- Bouton d’ajout de déclinaison : ne jamais disparaître ---------- */
#ajouterDeclinaison[disabled],
[id^="ajouterDeclinaisonCat-"][disabled],
.btn-declinaison-cate[disabled]{
  display:inline-block !important; visibility:visible !important;
  opacity:.6; pointer-events:none; cursor:not-allowed;
}
#ajouterDeclinaison[data-state="max"],
[id^="ajouterDeclinaisonCat-"][data-state="max"],
.btn-declinaison-cate[data-state="max"]{
  opacity:.6; pointer-events:none; cursor:not-allowed;
}

/* ---------- Popup / Overlays ---------- */
.popup, .popup-container, .gk-popup { background:rgba(0,0,0,.85) !important; }
.popup-content2, .popup-content3 {
  background:#0b1f26 !important; border:1px solid #20323a !important;
  color:#EAEFF3; border-radius:14px;
}

/* ---------- Form containers ---------- */
.centered-div,
.form-container {
  max-width:480px; margin:0 auto; background:#0b1f26; padding:14px 14px 12px;
  border-radius:14px;
}
.form-group, .form-group-cate { margin-bottom:10px !important; }
.form-group label, .form-group-cate label {
  display:block; margin-bottom:4px; font-weight:600; font-size:.93rem; color:#EAEFF3;
}
.form-group input, .form-group textarea, .form-group select,
.form-group-cate input, .form-group-cate textarea, .form-group-cate select {
  width:100%; padding:10px 12px; font-size:.95rem; background:#fff; color:#0f2931;
  border:1px solid #cad5dc; border-radius:10px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus,
.form-group-cate input:focus, .form-group-cate textarea:focus, .form-group-cate select:focus {
  border-color:#EABCCD; box-shadow:0 0 0 3px rgba(234,188,205,.25);
}
form { width:100% !important; }

/* ---------- Déclinaisons (grille + croix alignée à droite) ---------- */
.declinaison-field {
  background:#0e2730; border:1px solid #1c2e35; border-radius:10px; padding:8px;
  display:grid; grid-template-columns:1fr 0px; grid-template-rows:auto auto;
  grid-template-areas:"label btn" "input btn"; gap:0px; margin-bottom:6px;
}
.declinaison-field > label { grid-area:label; margin:0; color:#dbe6ec; font-weight:600; }
.declinaison-field > input,
.declinaison-field > textarea,
.declinaison-field > select { grid-area:input; }
.declinaison-field .btn-delete-declinaison {
  grid-area:btn; align-self:center; justify-self:end;
  width:34px; height:34px; display:inline-grid; place-items:center;
  background:transparent; color:#e06b6b; border-radius:10px; font-size:16px; cursor:pointer; transition:.2s;
}
.declinaison-field .btn-delete-declinaison:hover { background:#e06b6b; color:#fff; }

/* ---------- Descriptions supplémentaires (même logique que déclinaisons) ---------- */
.description-row {
  display:grid; grid-template-columns:1fr 0px; align-items:start; gap:0px; margin-bottom:6px;
}
.description-container {
  display:grid; grid-template-columns:1fr 0px; align-items:center; gap:0px; width:100%;
}
.description-container .custom-input-class { flex-grow:1; }

/* Croix × harmonisée (deux variantes gardées si tu utilises les deux classes) */
.remove-btn,
.remove-btn2 {
  width:34px; height:34px; display:inline-grid; place-items:center!important;
  padding:0; font-size:18px; line-height:1;
  color:#e06b6b!important; background:transparent!important; border-radius:10px;
  margin:0; cursor:pointer; transition:.2s;
}
.remove-btn:hover, .remove-btn2:hover { background:#e06b6b; color:#fff; }
/* Positionnement spécifique si tu utilises encore .remove-btn2 */
.remove-btn2 { position:relative; top:-25px; right:30px; }

/* ---------- Allergènes ---------- */
.btn-allergene {
  width:100%; margin:10px 0; border:1px solid #0F393E;
  background-color:#0F393E; color:#fff; border-radius:10px; padding:.375rem;
}
.hidden-checkbox { display:none; }
.allergene-label {
  display:inline-block; margin:10px 3px; text-align:center;
  background:rgba(27,98,106,.096) !important; color:rgba(255,255,255,.55) !important;
  padding:1px 5px; border:1px solid rgba(255,255,255,.55) !important;
  border-radius:20px; padding-left:20px; padding-right:20px; cursor:pointer; font-size:17px;
  transition:background-color .3s ease;
}
.hidden-checkbox:checked + .allergene-label {
  background:rgba(27,98,106,.83) !important; border:#fff 1px solid !important; color:#fff !important;
  border-radius:25px; padding-left:20px; padding-right:20px;
}
.allergene-label:hover { background:#eaeaea; border-color:#bbb; }

/* ---------- Upload image + preview ---------- */
.gk-upload { border:1px dashed #3a5561; border-radius:12px; padding:10px; background:#0f2931; }
.gk-upload input[type="file"] { background:#0f2931; color:#d7e2e8; border:1px solid #2a3a42; }
.gk-preview {
  margin-top:8px; border:1px solid #2a3a42; border-radius:12px; overflow:hidden;
  background:#0d2128; display:flex; align-items:center; justify-content:center; min-height:120px;
}
.gk-preview img { max-width:100%; max-height:260px; display:block; cursor:zoom-in; }
.gk-preview-empty { color:#9BB0BC; font-size:.9rem; padding:16px; text-align:center; width:100%; }

/* ---------- Visualiseur plein écran ---------- */
.gk-viewer {
  position:fixed; inset:0; z-index:10050; display:none;
  background:rgba(0,0,0,.85); align-items:center; justify-content:center;
}
.gk-viewer img { max-width:92vw; max-height:90vh; border-radius:10px; }
.gk-viewer-close {
  position:absolute; top:16px; right:16px; width:40px; height:40px; display:grid; place-items:center;
  background:#EABCCD; color:#10242D; border:0; border-radius:10px; font-size:20px; cursor:pointer;
}

/* ---------- Switch "Visible" (rose quand actif) ---------- */
.gk-switch-input { position:absolute !important; opacity:0 !important; pointer-events:none; }
.gk-switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.gk-switch-track {
  width:48px; height:28px; border-radius:999px; background:#2a2f37; border:1px solid #343a44;
  display:inline-flex; align-items:center; padding:2px; transition:.2s;
}
.gk-switch-thumb {
  width:22px; height:22px; border-radius:50%; background:#98a2b3; transform:translateX(0); transition:.2s;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.gk-switch-text { color:#e8eaed; font-weight:600; font-size:.95rem; }
.gk-switch-input:checked + label.gk-switch .gk-switch-track { background:#EABCCD; border-color:#EABCCD; }
.gk-switch-input:checked + label.gk-switch .gk-switch-thumb { transform:translateX(20px); background:#10242D; }