/*!
Theme Name: Pandora
Template: Divi
Description: Un theme créé par Bleuebuzz
Version: 1.2
Author: Bleuebuzz
Author URI: https://www.bleuebuzz.fr
*/

/***************
Header
****************/
header .has_et_pb_sticky .logo-img img{content:url(/wp-content/uploads/2026/06/pandora-logo-2.svg);transition:all .3s}
.et-menu a.is-current,#mobile_menu1 a.is-current,.et_pb_menu a.is-current{color:#e94e9c;font-weight:700}

@media screen and (max-width: 980px) {
	.et_mobile_menu{position:fixed!important;top:0!important;left:5vw!important;right:5vw!important;width:90vw!important;max-width:none!important}
	header .et_pb_button_0_tb_header_wrapper{display:none}
	.et_mobile_menu{background:#000;border-radius:0 0 20px 20px;border-top:none;padding:70px 40px 35px!important;height:calc(100vh - 100px);max-height:560px;display:flex!important;flex-direction:column!important;overflow-y:auto!important;top:-100%}
	.mobile_nav.closed .et_mobile_menu{display:none!important}
	.et_mobile_menu::before{content:"";display:block;width:80px;height:80px;background-image:url(/wp-content/uploads/2026/06/logo-menu-mobile.svg);background-repeat:no-repeat;background-position:left center;background-size:contain;margin-bottom:60px}
	.et_mobile_menu li{border:none!important;padding:0!important}
	.et_mobile_menu li a{color:#fff!important;font-size:18px!important;font-weight:500!important;padding:3px 0!important;opacity:1!important;}
	.et_mobile_menu .cta-mobile-item{margin-top:auto!important;margin-bottom:20px!important;}
	.et_mobile_menu .cta-mobile-item a{display:block;background-color:#fff;color:#000!important;text-align:center;padding:13px!important;border-radius:50px;font-weight:600;font-size:18px}
	.mobile_nav.opened .mobile_menu_bar{position:fixed!important;top:40px!important;right:calc(5vw + 20px)!important;z-index:999999!important;}
	.mobile_nav.opened .mobile_menu_bar::before{content:"\d7"!important;font-family:Arial,sans-serif!important;background-color:#fff;color:#000;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:400;line-height:1;box-shadow:0 2px 8px #00000026;}
}

/***************
Homepage
****************/
.rainbow{background:linear-gradient(to right,#64b1b1,#cd5268,#333787,#f2cb13);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;font-weight:700}
.small{font-size:.8em}
html{scroll-behavior:smooth}
#qui-sommes-nous,
#equipe,
#metiers,
#pepites,
#reactivite-ecologie,
#contact{scroll-margin-top:110px}
.pandora-anim{position:relative}
.pandora-jaune,
.pandora-bleu,
.pandora-turquoise,
.pandora-rouge{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:auto!important}
.pandora-jaune{z-index:1}
.pandora-bleu,
.pandora-turquoise,.pandora-rouge{z-index:99}

@supports (animation-timeline: scroll()) {
	.pandora-hero{view-timeline-name:--pandora-scroll;view-timeline-axis:block}
	body{timeline-scope:--pandora-scroll}
	.pandora-bleu{animation:pandora-bleu-in linear both;animation-timeline:--pandora-scroll;animation-range:contain 0 contain 100%}
	@keyframes pandora-bleu-in {
		from{transform:translateY(-150%)}
		to{transform:translateY(0)}
	}
	.pandora-turquoise{animation:pandora-turquoise-in linear both;animation-timeline:--pandora-scroll;animation-range:contain 0 contain 100%}
	@keyframes pandora-turquoise-in {
		from{transform:translateX(150%)}
		to{transform:translateX(0)}
	}
	.pandora-rouge{animation:pandora-rouge-in linear both;animation-timeline:--pandora-scroll;animation-range:contain 0 contain 100%}
	@keyframes pandora-rouge-in {
		from{transform:translateY(150%)}
		to{transform:translateY(0)}
	}
}

@media (max-width: 980px) {
	.pandora-bleu,.pandora-turquoise,.pandora-rouge{animation:none!important}
}

.cta-equipe{opacity:.6;cursor:pointer;transition:all .3s}
.cta-equipe:hover,.cta-equipe.active{opacity:1;transition:all .3s}
.group-equipe{display:none}
.group-equipe.active{display:block}

/* === TEXTE DEFILLANT === */
.marquee__part{flex-shrink:0;padding:0;font-smooth:always;display:flex;font-weight:700;color:#fff}
.marquee__part span{display:flex;align-items:center}
.marquee{color:#002934;font-size:60px;line-height:60px;padding:0;position:relative;overflow:hidden;font-weight:400}
.marquee__inner{-webkit-font-smoothing:antialiased;width:fit-content;display:flex;flex:auto;flex-direction:row}
.marquee__part img{margin:15px;height:36px;margin:0 10px}

@media screen and (max-width: 980px) {
	.group-equipe{display:block}
	.cta-equipe{opacity:1;pointer-events:none}
}

@media screen and (max-width:768px) {
	.marquee{font-size:38px;line-height:38px}
}

/* === CARD STACKING EFFECT === */
#process{position:relative}
#process,
#process .et_pb_section,
#process .et_pb_row,
#process .et_pb_column{overflow:visible!important;transform:none}
.process__step-container{position:sticky;top:40px;height:100vh;display:flex;align-items:center;justify-content:center}
.card-overlay{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;border-radius:inherit;z-index:3}
.process__sentinel{width:100%;height:1vh}

/* === SCROLL HORIZONTAL REACTIVITE === */
.hscroll-track .hscroll-picto{flex-shrink:0;align-self:flex-start}
.hscroll-row .et_pb_column,.hscroll-row .et_pb_row{overflow:visible!important}
.hscroll-row .et_pb_row{overflow:visible!important;max-width:100%!important}
.hscroll-row.et_pb_section{overflow:hidden!important}
.hscroll-track{display:flex;flex-direction:row;align-items:stretch;gap:30px;will-change:transform;width:max-content;}
.hscroll-card-reactivity,.hscroll-card-local{flex:0 0 680px;width:680px;min-width:680px}
.hscroll-picto{flex:0 0 220px;width:220px}
.hscroll-track{display:flex;flex-direction:row;align-items:stretch;gap:30px;will-change:transform;width:max-content}
.hscroll-row.et_pb_section{overflow:hidden!important;min-height:100vh!important;display:flex!important;align-items:center!important}
.hscroll-row .et_pb_row{overflow:visible!important;max-width:100%!important;width:100%!important}
.hscroll-row .et_pb_column{overflow:visible!important}

@media (max-width: 980px) {
	.hscroll-track{display:flex;flex-direction:column;width:100%;gap:30px;transform:none;will-change:auto}
	.hscroll-card-reactivity,.hscroll-card-local,.hscroll-picto{flex:0 0 auto;width:100%;min-width:0}
	.hscroll-row.et_pb_section{overflow:visible!important;min-height:0!important;display:block!important;align-items:initial!important}
}

/* === FORMULAIRE === */
.pandora-form-grid{display:flex;flex-direction:column;gap:16px}
.pandora-form-grid .wpcf7-form-control-wrap{display:block;width:100%}
.pandora-form-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pandora-form-grid input[type="text"],
.pandora-form-grid input[type="email"],
.pandora-form-grid input[type="tel"],
.pandora-form-grid select,
.pandora-form-grid textarea{width:100%;padding:16px 24px;border:none;border-radius:50px;background:#fff!important;color:#333!important;font-size:15px;font-family:inherit;outline:none;box-sizing:border-box;appearance:none;-webkit-appearance:none;transition:box-shadow .2s}
.pandora-form-grid input::placeholder,.pandora-form-grid textarea::placeholder{color:#999}
.pandora-form-grid input:focus,.pandora-form-grid select:focus,.pandora-form-grid textarea:focus{box-shadow:0 0 0 2px #00000026}
.pandora-form-grid select{padding-right:56px;color:#999!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%23c0566a' stroke-width='1.5'/%3E%3Cpath d='M9 12.5l5 5 5-5' fill='none' stroke='%23c0566a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important}
.pandora-form-grid select:valid{color:#333!important}
.pandora-form-grid select:not([value=""]):valid{color:#333!important}
.pandora-form-grid select option{background:#fff;color:#333}
.pandora-form-grid textarea{border-radius:24px;min-height:160px;resize:vertical}
.pandora-form-rgpd .wpcf7-list-item{margin:0;display:flex;align-items:flex-start;gap:10px}
.pandora-form-rgpd .wpcf7-list-item-label{font-size:13px;color:#ffffffe6}
.pandora-form-rgpd input[type="checkbox"]{flex-shrink:0;width:16px;height:16px;margin-top:2px;cursor:pointer}
.pandora-form-grid input[type="submit"]{align-self:center;margin-top:16px;background:#1a1a2e!important;color:#fff!important;border:none!important;border-radius:50px;padding:16px 36px;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background .2s;width:auto}
.pandora-form-grid input[type="submit"]:hover{background:#000!important}
.pandora-form-grid select option{background:#fff;color:#333}
.pandora-form-grid .wpcf7-not-valid-tip{color:#fff;font-size:12px;margin-top:4px}
.wpcf7-response-output{border-radius:6px;padding:10px 16px;font-size:13px;color:#fff;border-color:#fff6!important}
.pandora-form-rgpd{display:flex;align-items:flex-start;gap:10px;color:#ffffffe6;line-height:1.5}
.pandora-form-rgpd .wpcf7-acceptance label{display:flex}
.pandora-form-rgpd .wpcf7-acceptance label input{margin-right:10px;top:2px;position:relative}
.pandora-form-rgpd .wpcf7-acceptance label span{font-size:16px}

@media (max-width: 767px) {
	.pandora-form-two-col{grid-template-columns:1fr}
	.pandora-form-grid input[type="submit"]{align-self:stretch;text-align:center}
}

/* === SLIDER GALLERY === */

/* La rangée parente : référence de positionnement, laisse déborder les flèches */
.gallery { position: relative; overflow: visible; }

/* Le slider doit redécouper les slides pour défiler correctement */
.swiper-gallery { overflow: hidden; }
.swiper-gallery .swiper-wrapper { overflow: visible; }
.gallery .swiper-pagination{bottom:0;}

/* Flèches : à l'extérieur de l'image, centrées sur sa hauteur */
.gallery .swiper-navigation{position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  margin: 0;
  pointer-events: none; }
.gallery .swiper-prev,
.gallery .swiper-next {
  position: absolute;
  top: calc(var(--gallery-img-h, 100%) / 2);
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%;
  background: rgba(0,0,0,0.5); transition: background .2s ease;
}
.gallery .swiper-prev { left: -60px;pointer-events: auto; }
.gallery .swiper-next { right: -60px;pointer-events: auto; }

.gallery .swiper-prev:hover,
.gallery .swiper-next:hover { background: rgba(0,0,0,0.8); }

/* Icônes (chevrons en bordure) */
.gallery .swiper-prev::before,
.gallery .swiper-next::before {
  content: ""; width: 12px; height: 12px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.gallery .swiper-prev::before { transform: rotate(-135deg); margin-left: 4px; }
.gallery .swiper-next::before { transform: rotate(45deg);  margin-right: 4px; }

/* Flèche désactivée (premier / dernier slide) */
.gallery .swiper-button-disabled { opacity: .35; cursor: default; }
.gallery .swiper-pagination-bullet{height:10px;width:10px;background:#cd5268;}
.gallery .swiper-pagination-bullet-active{background:#cd5268;}

/* ===== TABLETTE : flèches ramenées au bord intérieur de l'image ===== */
@media (max-width: 980px) {
  .gallery .swiper-prev { left: 12px; }
  .gallery .swiper-next { right: 12px; }

  /* fond un peu plus marqué car les flèches sont sur l'image */
  .gallery .swiper-prev,
  .gallery .swiper-next {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.55);
  }
}

/* ===== MOBILE : flèches plus compactes, pagination rapprochée ===== */
@media (max-width: 767px) {
  .gallery .swiper-prev,
  .gallery .swiper-next {
    width: 34px;
    height: 34px;
    left: auto;  
  }
  .gallery .swiper-prev { left: 8px; }
  .gallery .swiper-next { right: 8px; }

  /* chevrons un peu plus petits */
  .gallery .swiper-prev::before,
  .gallery .swiper-next::before {
    width: 9px;
    height: 9px;
  }

  /* la pagination remonte légèrement et reste centrée */
  .gallery .swiper-pagination {
    margin-top: 8px;
  }


.gallery .swiper-pagination-bullet{height:8px;width:8px;}
}

/* ===== TRÈS PETITS ÉCRANS : option masquer les flèches (swipe tactile) ===== */
@media (max-width: 480px) {
  .gallery .swiper-prev,
  .gallery .swiper-next {
    display: none;        /* l'utilisateur fait glisser au doigt */
  }
}