:root {
  --pe-black: #0d0d0d;
  --pe-black-soft: #17181c;
  --pe-red: #c1272d;
  --pe-red-dark: #8f1c21;
  --pe-gray: #6c757d;
  --pe-radius: 14px;
}

body {
  font-family: 'Poppins', system-ui, sans-serif;
  color: #212529;
  background: #fff;
}

.font-script {
  font-family: 'Caveat', cursive;
}

h1, h2, h3, h4, .navbar-brand {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
}

a {
  text-decoration: none;
}

/* ---------- Navbar ---------- */
.pe-navbar {
  background-color: transparent;
  padding: 1.1rem 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}

.pe-navbar.pe-navbar-scrolled {
  background-color: var(--pe-black);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
  padding: .6rem 0;
}

.pe-navbar .navbar-brand {
  color: #fff;
  font-size: 1.25rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

.pe-navbar .navbar-brand span {
  color: var(--pe-red);
}

/* Le logo a un fond transparent avec du texte noir : sur la navbar sombre, on l'affiche
   dans un encart blanc arrondi pour qu'il reste lisible. */
.pe-logo-chip {
  display: inline-flex !important;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: .35rem .6rem;
}

.pe-logo-chip img {
  height: 32px;
  width: auto;
  display: block;
}

.pe-navbar .nav-link {
  position: relative;
  color: #e9e9e9 !important;
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem .65rem !important;
  white-space: nowrap;
}

.pe-navbar .nav-link:hover,
.pe-navbar .nav-link.active {
  color: #fff !important;
}

.pe-navbar .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--pe-red);
  transition: left .25s ease, right .25s ease;
}

.pe-navbar .nav-link:hover::after,
.pe-navbar .nav-link.active::after {
  left: .65rem;
  right: .65rem;
}

.pe-navbar .nav-link.dropdown-toggle::after {
  content: none;
}

/* ---------- Menu mobile ---------- */
@media (max-width: 991.98px) {
  .pe-navbar .navbar-collapse {
    background: var(--pe-black);
    margin-top: 1rem;
    padding: 1rem 1.25rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pe-navbar .nav-link::after { display: none; }
  .pe-navbar .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .pe-navbar .nav-item:last-child { border-bottom: 0; }
  .pe-navbar .nav-link { padding: .75rem .1rem !important; }
}

/* ---------- Dropdown "Nos services" ---------- */
.pe-services-dropdown {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
  padding: .6rem;
  min-width: 260px;
}

.pe-services-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .6rem;
  border-radius: 8px;
}

.pe-services-dropdown .dropdown-item:hover {
  background: #f7f7f8;
}

.pe-services-dropdown-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .9rem;
}

.pe-services-dropdown-name {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  color: #212529;
}

.pe-services-dropdown-count {
  display: block;
  font-size: .76rem;
  color: #888;
}

.btn-pe-devis {
  background: var(--pe-red);
  border: none;
  color: #fff !important;
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem 1.1rem;
  border-radius: 50px;
  white-space: nowrap;
  transition: background .2s ease;
}

.btn-pe-devis:hover {
  background: var(--pe-red-dark);
  color: #fff !important;
}

/* ---------- Hero ---------- */
.pe-hero {
  position: relative;
  background: radial-gradient(circle at 80% 20%, rgba(193, 39, 45, .35), transparent 55%),
              linear-gradient(135deg, var(--pe-black) 0%, #1a1a1a 100%);
  color: #fff;
  padding: 7rem 0 6rem;
  overflow: hidden;
}

.pe-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 1rem;
}

.pe-hero .lead {
  font-size: 1.5rem;
  color: #f1c40f00;
}

.pe-hero .tagline {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: #fff;
  margin-top: 1rem;
}

/* ---------- Hero vidéo plein écran (accueil + pages catégorie) ---------- */
.pe-hero-video {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: var(--pe-black);
}

.pe-hero-video.pe-hero-video-page {
  min-height: 55vh;
}

.pe-hero-bg-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  animation: peHeroKenBurns 16s ease-in-out infinite alternate;
}

@keyframes peHeroKenBurns {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .pe-hero-bg-img { animation: none; }
}

.pe-hero-video video,
.pe-hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  border: 0;
}

.pe-hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Astuce classique pour qu'une iframe YouTube 16:9 couvre tout l'écran sans bandes noires */
.pe-hero-video iframe {
  width: 100vw;
  height: 56.25vw; /* 100vw * 9/16 */
  min-height: 100%;
  min-width: 177.78vh; /* 100vh * 16/9 */
}

.pe-hero-video .pe-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, .55), rgba(13, 13, 13, .7));
  z-index: 1;
}

.pe-hero-video .container {
  position: relative;
  z-index: 2;
}

.pe-hero-video .container h1 {
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(18px);
  animation: peHeroTitleIn .9s ease .15s forwards;
}

@keyframes peHeroTitleIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pe-hero-video .container h1 { animation: none; opacity: 1; transform: none; }
}

/* Le titre s'efface après quelques secondes pour laisser la vidéo bien visible
   (toutes les pages hero vidéo : accueil + toutes les pages catégories) */
.pe-hero-text-fade {
  animation: peHeroTextFade 1s ease 4s forwards;
}

@keyframes peHeroTextFade {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-14px); pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-hero-text-fade { animation: none; }
}

/* ---------- Bouton "Découvrir" (défiler vers le bas) ---------- */
.pe-hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  animation: peHeroScrollBounce 2s ease-in-out infinite;
}

.pe-hero-scroll span {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.pe-hero-scroll i {
  font-size: 1.1rem;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}

.pe-hero-scroll:hover i {
  background: var(--pe-red);
  border-color: var(--pe-red);
}

@keyframes peHeroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .pe-hero-scroll { animation: none; }
}

/* ---------- Page header (banner, sans vidéo) ---------- */
.pe-page-header {
  padding: 6.5rem 0 2.5rem;
  color: #fff;
  background-color: var(--pe-black);
}

.pe-page-header-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Category cards ---------- */
.pe-category-card {
  display: block;
  border-radius: var(--pe-radius);
  padding: 2rem 1.5rem;
  color: #fff !important;
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.pe-category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
  color: #fff !important;
}

.pe-category-card i {
  font-size: 2.2rem;
  display: block;
  margin-bottom: .75rem;
}

/* ---------- Service cards ---------- */
.pe-service-card {
  border: none;
  border-radius: var(--pe-radius);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}

.pe-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .14);
}

.pe-service-card .pe-service-cover {
  height: 190px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.5rem;
}

.pe-service-card .card-body {
  padding: 1.4rem;
}

/* ---------- Feature pills ---------- */
.pe-feature-pill {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 50px;
  padding: .35rem 1rem;
  margin: 0 .4rem .4rem 0;
  font-size: .9rem;
  font-weight: 500;
}

/* ---------- Gallery ---------- */
.pe-gallery img {
  border-radius: 10px;
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}

.pe-gallery-video-trigger {
  cursor: pointer;
}

.pe-gallery-cover {
  height: 260px;
}

.pe-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition: background .2s ease, transform .2s ease;
  pointer-events: none;
}

.pe-gallery-video-trigger:hover .pe-play-badge {
  background: var(--pe-red);
  transform: translate(-50%, -50%) scale(1.1);
}

/* ---------- Sections ---------- */
.pe-section {
  padding: 4.5rem 0;
}

.pe-section-alt {
  background: #f7f7f8;
}

/* ---------- CTA réseaux sociaux ---------- */
.pe-social-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  text-decoration: none;
  padding: .8rem 1.8rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .95rem;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pe-social-cta-btn:hover {
  color: #fff;
  transform: translateY(-2px);
}

.pe-social-cta-fb {
  background: #1877f2;
  box-shadow: 0 6px 18px rgba(24, 119, 242, .3);
}

.pe-social-cta-ig {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  box-shadow: 0 6px 18px rgba(220, 39, 67, .3);
}

/* ---------- Navigation catégorie précédente/suivante (swipe) ---------- */
.pe-cat-nav {
  padding: 1.5rem 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.pe-cat-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: #212529;
  text-decoration: none;
  font-weight: 700;
  transition: color .2s ease;
}

.pe-cat-nav-link:hover { color: var(--pe-red); }

.pe-cat-nav-link small {
  display: block;
  font-weight: 500;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .72rem;
}

.pe-cat-nav-next { text-align: right; margin-left: auto; }
.pe-cat-nav-link i { font-size: 1.1rem; }

/* ---------- Section vidéos "format moyen" (galerie + section partenaire) ---------- */
.pe-videos-wrap { margin-top: 4.5rem; padding-top: 3.5rem; border-top: 1px solid #eee; }
.pe-video-item { max-width: 800px; margin: 0 auto 3rem; }
.pe-video-item:last-child { margin-bottom: 0; }
.pe-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
  background: #000;
}
.pe-video-frame iframe, .pe-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.pe-video-title { text-align: center; margin-top: .9rem; font-weight: 700; color: #212529; }

/* ---------- Carte partenaire (Randomania) ---------- */
.pe-partner-card {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  background: #fff;
  border-radius: var(--pe-radius);
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.pe-partner-logo {
  flex-shrink: 0;
  width: 220px;
  max-width: 40%;
  height: auto;
}

@media (max-width: 767px) {
  .pe-partner-card {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .pe-partner-logo {
    width: 160px;
    max-width: 60%;
  }
}

/* ---------- Transition douce entre les pages ----------
   Appliquée à un wrapper dédié (#pePageTransition), jamais à <body> :
   un `transform` sur <body> casserait position:fixed pour tous ses
   descendants (lightbox, bouton WhatsApp...), qui se positionneraient
   par rapport à <body> au lieu du viewport.
   L'entrée est une @keyframes pure CSS (pas de classe ajoutée par JS) :
   si le JS est lent, bloqué ou en erreur, la page reste quand même
   visible normalement au lieu de rester bloquée en opacité 0. */
#pePageTransition {
  animation: pePageEnter .4s ease both;
}

@keyframes pePageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#pePageTransition.pe-page-leave {
  animation: pePageLeave .18s ease forwards;
}

@keyframes pePageLeave {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  #pePageTransition { animation: none; opacity: 1; transform: none; }
}

.pe-eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: .85rem;
}

/* ---------- Forms ---------- */
.pe-form-card {
  border-radius: var(--pe-radius);
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.pe-form-card .form-control,
.pe-form-card .form-select {
  border-radius: 8px;
  padding: .65rem .9rem;
}

.pe-form-card .btn-submit {
  background: var(--pe-red);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: .7rem 1.5rem;
  border-radius: 50px;
}

.pe-form-card .btn-submit:hover {
  background: var(--pe-red-dark);
}

/* ---------- Footer ---------- */
.pe-footer {
  background: var(--pe-black);
  color: #cfcfcf;
  padding: 2.2rem 0 1rem;
  font-size: .88rem;
}

.pe-footer h5 {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .8rem;
}

.pe-footer a {
  color: #cfcfcf;
}

.pe-footer a:hover {
  color: var(--pe-red);
}

.pe-footer .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  margin-right: .5rem;
}

.pe-footer .social-icons a:hover {
  background: var(--pe-red);
}

.pe-footer .copyright {
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 1.2rem;
  padding-top: .8rem;
  font-size: .78rem;
}

.pe-newsletter {
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 1.5rem;
  padding-top: 1.2rem;
}

.pe-newsletter h5 {
  margin-bottom: 1rem;
}

/* ---------- Bouton flottant WhatsApp ---------- */
.pe-whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  z-index: 1000;
  transition: transform .2s ease;
}

.pe-whatsapp-float:hover {
  transform: scale(1.08);
  color: #fff;
}

@media (max-width: 576px) {
  .pe-whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    bottom: 16px;
    right: 16px;
  }
}

/* ---------- Révélation au scroll ---------- */
.pe-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}

.pe-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pe-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Effet 3D au survol ---------- */
.pe-tilt {
  transition: transform .15s ease-out, box-shadow .15s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- Section statistiques ---------- */
.pe-stats {
  background: var(--pe-black);
  color: #fff;
  padding: 4rem 0;
}

.pe-stat-number {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--pe-red);
  line-height: 1;
}

.pe-stat-label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .85rem;
  color: #cfcfcf;
  margin-top: .5rem;
}

/* ---------- Section "Comment ça marche" ---------- */
.pe-step {
  text-align: center;
  padding: 0 1rem;
}

.pe-step-number {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: var(--pe-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}

/* ---------- Utilities ---------- */
.text-pe-red { color: var(--pe-red) !important; }
.bg-pe-black { background: var(--pe-black) !important; }