@charset "UTF-8";
@import url(main.css);
.switch-container { display: flex; gap: 15px; background-color: #354459; justify-content: center; padding: 100px 0; }

#section-vins, #differentes-bieres, #famille-de-bieres, .div-beer { display: none; }

#section-vins { text-align: center; background-color: #354459; }

.spacer { display: none; }

/*------------Bloc actu------------------------------*/
#news-posts-bloc { margin-top: 150px !important; margin-bottom: 150px !important; }

/*-----------------------------------------------------------Bloc SEO-----------------------------------------------*/
div.first-activity-div.mx-auto.col-lg-11.shadow-lg.bg-primaryColor.position-relative, div.second-activity-div.mx-auto.col-lg-11.shadow-lg.bg-primaryColor.position-relative, div.third-activity-div.mx-auto.col-lg-11.shadow-lg.bg-primaryColor.position-relative { background-color: black; padding: 2rem !important; }

div.first-activity-div.mx-auto.col-lg-11.shadow-lg.bg-primaryColor.position-relative { padding-top: 100px !important; }

div.third-activity-div.mx-auto.col-lg-11.shadow-lg.bg-primaryColor.position-relative { padding-bottom: 100px !important; }

/* -------------Bloc Espacement-----------------*/
.b-bloc-divider { height: 100px !important; border: none !important; box-shadow: none !important; }

#la-carte, #pizzas { background-color: black; }

#cave-des-potes, #biere-des-potes { background-color: #354459; }

/*---------------------------------------------------Barre de navigation---------------------------------------------------*/
.animated-border-button:after { background-color: black !important; }

a.button_header { padding: 0.4em 1.3em !important; background-color: #000; border: 3px solid #fff353; border-radius: 1em !important; color: #fff; transition: all 0.4s ease; box-shadow: -5px 5px 0px 0px #fff353; }

a.button_header:hover { background-color: #354459; }

nav { z-index: 10000 !important; }

nav.navbar { box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; }

nav a { text-decoration: none; }

.logo-popotes, .logo-lacave { transition: all 0.5s ease; }

.logo-popotes:hover, .logo-lacave:hover { transform: scale(1.2); }

/*--------------------------------------------------Paragraphes---------------------------------------------------------*/
img.d-block.mx-lg-auto.img-fluid { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; max-height: 700px; display: block; border: 7px solid #fff353; border-radius: 1em !important; box-shadow: -8px 5px 0px 0px #fff353; }

.mx-auto.col-lg-11.shadow-lg.bg-primaryColor.position-relative { margin: 0 !important; width: 100%; box-shadow: none !important; color: white !important; border-radius: 0 !important; padding: 10rem !important; }

@media screen and (max-width: 1300px) { .mx-auto.col-lg-11.shadow-lg.bg-primaryColor.position-relative { padding: 5rem !important; } }

@media screen and (max-width: 1000px) { .mx-auto.col-lg-11.shadow-lg.bg-primaryColor.position-relative { padding: 2rem !important; } }

/*---------------------Paragraphes page Cave----------------------*/
#amoureux-de-vins, #differentes-bieres, #famille-de-bieres, #partenaires-cave, #reservation, #potes-vins, #regions-vins, #types-vins, #methode-vins, #conclusion-vins { background-color: #354459; }

#amoureux-de-vins img.d-block.mx-lg-auto.img-fluid { aspect-ratio: 1 / 2.5; max-height: 800px; }

#amoureux-de-vins { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fc9FA7YUDNce7vBkWMegK3G5W46u2%2Fimages%2FDesign_sans_titre_tc3v.webp) !important; }

#partenaires-cave { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fc9FA7YUDNce7vBkWMegK3G5W46u2%2Fimages%2FVotre_texte_de_paragraphe_fvcp.webp) !important; }

#droit-de-bouchon { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fc9FA7YUDNce7vBkWMegK3G5W46u2%2Fimages%2FVotre_texte_de_paragraphe_4_hc0n.webp) !important; }

/*-----------------------------------Paragraphes page pizzas----------------------------*/
#amoureux-de-pizzas img.d-block.mx-lg-auto.img-fluid { aspect-ratio: 1 / 2.5; max-height: 800px; }

#amoureux-de-pizzas { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fc9FA7YUDNce7vBkWMegK3G5W46u2%2Fimages%2FDesign_sans_titre_tc3v.webp) !important; }

#equipe { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fc9FA7YUDNce7vBkWMegK3G5W46u2%2Fimages%2FVotre_texte_de_paragraphe_fvcp.webp) !important; }

#ingredients { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fc9FA7YUDNce7vBkWMegK3G5W46u2%2Fimages%2F3_6woo.webp) !important; }

#partenaires { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fc9FA7YUDNce7vBkWMegK3G5W46u2%2Fimages%2FVotre_texte_de_paragraphe_2_iw3a.webp) !important; }

#equipe { position: relative; overflow: hidden; /* évite les débordements moches */ }

#equipe::after { content: ""; position: absolute; top: 50px; right: 10rem; width: clamp(120px, 18vw, 260px); height: clamp(120px, 18vw, 260px); background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fc9FA7YUDNce7vBkWMegK3G5W46u2%2Fimages%2Fcropped_image_hho2.webp"); background-size: cover; background-repeat: no-repeat; background-position: center; border: 7px solid #fff353; border-radius: 1em !important; box-shadow: -8px 5px 0px 0px #fff353; }

@media screen and (max-width: 1000px) { #equipe::after { top: 30px; right: 50px; } }

/*--------------------------------------Paragraphes Infos--------------------------------------*/
#reservation img.d-block.mx-lg-auto.img-fluid { aspect-ratio: 1.7 / 1; }

#reservation, #partenaires-cave { padding-bottom: 150px !important; }

#yollty, #reservation, #pizza-xxl { position: relative; background: #000; overflow: hidden; }

/* Halo dynamique */
#yollty::before, #reservation::before, #pizza-xxl::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), #354459 0%, rgba(53, 68, 89, 0.85) 25%, rgba(0, 0, 0, 0.95) 55%, #000 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 0; }

/* Contenu au-dessus du halo */
#yollty > *, #reservation > *, #pizza-xxl > * { position: relative; z-index: 1; }

/* Desktop : halo au survol */
@media (hover: hover) { #yollty:hover::before, #reservation:hover::before, #pizza-xxl:hover::before { opacity: 1; } }

/* Mobile : halo toujours visible */
@media (hover: none) { #yollty::before, #reservation::before, #pizza-xxl::before { opacity: 1; } }

/*-------------------------------------------------------------------------------Galerie Carte pizzas---------------------*/
/* ------------------- Galerie Custom -------------------------- */
#custom-gallery { padding-bottom: 100px; background-color: black; }

#custom-gallery .row { justify-content: center !important; }

#custom-gallery .image { height: 600px !important; margin: 20px 0; width: 33% !important; }

/* Image vignette */
.img-wrapper { position: relative; height: 100%; margin-top: 15px; }

.img-wrapper img { width: 100%; height: 100% !important; object-fit: cover !important; border-radius: 15px; }

/* Overlay icône + */
.img-overlay { background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; opacity: 0; }

.img-overlay i { color: #fff; font-size: 3em; }

/* ------------------- LIGHTBOX -------------------------- */
#overlay { background: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: flex-start; /* démarre en haut */ overflow-y: auto; /* 🔥 scroll vertical */ padding: 40px 0; z-index: 999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Image en grand */
#overlay img { width: auto; max-width: 90%; height: auto; object-fit: contain; margin-bottom: 40px; border-radius: 10px; }

/* ------------------- BOUTONS NAVIGATION -------------------------- */
#prevButton, #nextButton { position: fixed; top: 50%; transform: translateY(-50%); color: #fff; font-size: 3em; z-index: 1001; cursor: pointer; transition: opacity 0.3s; }

#prevButton { left: 25px; }

#nextButton { right: 25px; }

#prevButton:hover, #nextButton:hover { opacity: 0.6; }

/* Bouton fermer */
#exitButton { position: fixed; top: 20px; right: 25px; color: #fff; font-size: 2.5em; z-index: 1001; cursor: pointer; transition: opacity 0.3s; }

#exitButton:hover { opacity: 0.6; }

/* ------------------- RESPONSIVE -------------------------- */
@media screen and (max-width: 991px) { #custom-gallery .image { width: 50% !important; height: 450px !important; } }

@media screen and (max-width: 600px) { #custom-gallery .image { width: 100% !important; height: 350px !important; } #prevButton, #nextButton { font-size: 2em; } }

/*---------------------------------------------Bannières pages secondaires-------------------------------------------*/
.pizzas-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; }

.pizzas-hero-bg { position: absolute; inset: 0; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fc9FA7YUDNce7vBkWMegK3G5W46u2%2Fimages%2FDesign_sans_titre_1_e3le.webp"); background-size: cover; background-position: center; transform: scale(1.05); }

.cave-hero-bg { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fc9FA7YUDNce7vBkWMegK3G5W46u2%2Fimages%2FDesign_sans_titre_uakm.webp") !important; background-position: top; }

.pizzas-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, #000000bd, #312b06d1); }

.cave-hero-overlay { background: linear-gradient(to right, #010305b0, #223652b5) !important; }

.pizzas-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: auto 2px 1fr; align-items: center; gap: 2.5rem; padding: 2rem; max-width: 1200px; width: 100%; }

.pizzas-hero-logo { background: #000; padding: 1.2rem; border-radius: 0.75rem; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6); animation: pizzasFadeLeft 0.9s ease forwards; }

.cave-hero-logo { background: #354459; }

.pizzas-hero-logo img { display: block; max-width: 130px; height: auto; }

.pizzas-hero-divider { width: 2px; height: 120px; background: #F4EA4E; box-shadow: 0 0 12px rgba(244, 234, 78, 0.8); animation: pizzasDividerPulse 3s ease-in-out infinite; }

.pizzas-hero-text { animation: pizzasFadeRight 0.9s ease forwards; }

.pizzas-hero-text h1 { font-size: 3rem !important; text-shadow: 0 3px 15px rgba(0, 0, 0, 0.6); }

@keyframes pizzasFadeLeft { from { opacity: 0;
    transform: translateX(-30px); }
  to { opacity: 1;
    transform: translateX(0); } }

@keyframes pizzasFadeRight { from { opacity: 0;
    transform: translateX(30px); }
  to { opacity: 1;
    transform: translateX(0); } }

@keyframes pizzasDividerPulse { 0%, 100% { opacity: 0.6; }
  50% { opacity: 1; } }

@media (max-width: 768px) { .pizzas-hero-inner { grid-template-columns: 1fr; text-align: center; } .pizzas-hero-logo { width: fit-content; margin: auto; } .pizzas-hero-divider { width: 80px; height: 2px; margin: 1.5rem auto; } .pizzas-hero-text h1 { font-size: 2rem !important; } }

/*----------------------------------------------------Formulaire de contact--------------------------------------------------------*/
#contact { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fc9FA7YUDNce7vBkWMegK3G5W46u2%2Fimages%2FDesign_sans_titre_2_5scp.webp"); background-size: cover; background-position: center; }

#contact div.col-lg-6.text-center.text-color-sixth { display: none; }

#contact div.col-md-10.d-flex.justify-content-center.col-lg-6 { width: 80% !important; margin: auto; padding: 100px 0; }

/*------------------------------------------------------------Boutons---------------------------------------------------*/
/*------------------------------------Style Pizzas-------------------------------------*/
#amoureux-de-pizzas a.button_homepageScreen, #equipe a.button_homepageScreen, .pm__card a.button_homepageScreen, #ingredients a.button_homepageScreen, #yollty a.button_homepageScreen { font-size: 1.3rem; padding: 0.4em 1.3em !important; background-color: #000; border: 3px solid #f4ea4e; border-radius: 1em !important; color: #fff; transition: all 0.4s ease; box-shadow: -5px 5px 0px 0px #f4ea4e; }

#amoureux-de-pizzas a.button_homepageScreen:hover, #equipe a.button_homepageScreen:hover, .pm__card a.button_homepageScreen:hover, #ingredients a.button_homepageScreen:hover, #yollty a.button_homepageScreen:hover { background-color: #f4ea4e !important; color: black !important; }

/*---------------------------------Style cave------------------------------------*/
#amoureux-de-vins a.button_homepageScreen, #partenaires-cave a.button_homepageScreen, .switch-container a.button_homepageScreen, #reservation a.button_homepageScreen, #droit-de-bouchon a.button_homepageScreen { font-size: 1.3rem; padding: 0.4em 1.3em !important; background-color: #354459; border: 3px solid #f3e212; border-radius: 1em !important; color: #fff; transition: all 0.4s ease; box-shadow: -5px 5px 0px 0px #f3e212; }

#amoureux-de-vins a.button_homepageScreen:hover, #partenaires-cave a.button_homepageScreen:hover, .switch-container a.button_homepageScreen:hover, #reservation a.button_homepageScreen:hover, #droit-de-bouchon a.button_homepageScreen:hover { background-color: #f3e212 !important; color: #354459 !important; }

/*-----------------------------------------------Style transparent------------*/
#yollty a.button_homepageScreen, #reservation a.button_homepageScreen { background-color: transparent !important; }

/*----------------------------------------------------------- Bannière d'accueil ----------------------------------------------------*/
.halfScreen1 a.button_homepageScreen { font-size: 1.3rem; padding: 0.4em 1.3em !important; background-color: #000; border: 3px solid #f4ea4e; border-radius: 1em !important; color: #fff; transition: all 0.4s ease; box-shadow: -5px 5px 0px 0px #f4ea4e; }

.halfScreen1 a.button_homepageScreen:hover { background-color: #f4ea4e; color: black !important; }

.halfScreen2 a.button_homepageScreen { font-size: 1.3rem; padding: 0.4em 1.3em !important; background-color: #354459; border: 3px solid #f3e212; border-radius: 1em !important; color: #fff; transition: all 0.4s ease; box-shadow: -5px 5px 0px 0px #f3e212; }

.halfScreen2 a.button_homepageScreen:hover { background-color: #f3e212; color: #354459 !important; }

/* =============================== CONTAINER GLOBAL ================================ */
.homepage-double-screen { display: flex; width: 100%; height: 100vh; overflow: hidden; }

/* =============================== DEMI ÉCRANS ================================ */
.halfScreen { position: relative; flex: 1; overflow: hidden; transition: flex 0.8s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }

/* Agrandissement dynamique */
.homepage-double-screen:hover .halfScreen { flex: 0.85; }

.homepage-double-screen .halfScreen:hover { flex: 1.15; }

/* =============================== IMAGES DE FOND ================================ */
.halfScreen .background-image-div-opacity { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1); transition: transform 1s ease; will-change: transform; }

/* Zoom interne */
.halfScreen:hover .background-image-div-opacity { transform: scale(1.1); }

/* =============================== SÉPARATION NON DROITE ================================ */
/* Partie gauche */
.halfScreen1 { z-index: 1; clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); }

/* Partie droite */
.halfScreen2 { z-index: 2; margin-left: -3%; clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%); }

/* =============================== CONTENU ================================ */
.content-container { position: relative; z-index: 2; transition: transform 0.6s ease; }

.halfScreen:hover .content-container { transform: scale(1.03); }

/* =============================== LOGO ================================ */
.logoDoubleScreen { transition: transform 0.6s ease; filter: drop-shadow(2px 4px 20px #00000066); }

.logoContainer { width: 350px !important; height: 250px !important; }

@media (max-width: 768px) { .logoContainer { width: 250px !important; height: 150px !important; } }

.halfScreen:hover .logoDoubleScreen { transform: scale(1.2); }

.halfScreen1 div.logoContainer.d-flex.justify-content-center.mx-auto > img { border-radius: 10px; }

/* =============================== BOUTON (optionnel) ================================ */
.button_homepageScreen { transition: transform 0.3s ease; }

.halfScreen:hover .button_homepageScreen { transform: translateY(-2px); }

/* =============================== RESPONSIVE (MOBILE) ================================ */
@media (max-width: 768px) { .homepage-double-screen { flex-direction: column; height: auto; } .halfScreen { flex: none; height: 50vh; clip-path: none; } .homepage-double-screen:hover .halfScreen, .homepage-double-screen .halfScreen:hover { flex: none; } }

/* =============================== BULLES DE CONVERSATION CARTOON ================================ */
.speech-bubble { position: relative; display: inline-block; margin-top: 18px; padding: 14px 20px; border-radius: 22px; font-size: 1.05rem; line-height: 1.4; font-weight: 500 !important; max-width: 320px; text-align: center; font-family: 'Lexend Deca', 'Arial !important'; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.25); animation: bubbleFloat 4s ease-in-out infinite; }

@media (max-width: 1000px) { .speech-bubble { display: none; } #section-vins .speech-bubble { display: block; } }

/* Pointe de la bulle */
.speech-bubble::after { content: ""; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; }

/* Animation légère */
@keyframes bubbleFloat { 0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); } }

.pizza-bubble { background: #F4EA4E; color: #000; }

.pizza-bubble::after { border-top: 14px solid #F4EA4E; }

.cave-bubble { background: #f3e212; color: #354459; }

.cave-bubble::after { border-top: 14px solid #f3e212; }

/* Bulle cachée par défaut */
.speech-bubble { opacity: 0; transform: scale(0.9) translateY(10px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }

/* Visible quand la moitié est hover */
.halfScreen.show-bubble .speech-bubble { opacity: 1; transform: scale(1) translateY(0); }

/*# sourceMappingURL=custom.css.map */