/* ==========================================================================
   enhance.css — couche de corrections chargée APRÈS le CSS du build React.
   Ne dépend que des classes Tailwind existantes : survit à l'hydratation.
   Sections : 1. Header mobile  2. Lisibilité mobile  3. Pages villes
              4. Slider « Nos réalisations »  5. Lightbox
   ========================================================================== */

/* ---------- 1. Header mobile -------------------------------------------- */
@media (max-width: 1023px) {
  /* surcharge le style inline React ET le correctif « header.fixed.top-0 » du CSS du build */
  header[role="banner"].fixed.top-0 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
  }
  /* État non scrollé : fond sombre plein, plus de bandeau gris sur les pages claires */
  header[role="banner"].bg-dark-950\/60 {
    background-color: rgb(2 6 23 / .94);
    border-bottom: 1px solid rgb(255 255 255 / .06);
  }
  header[role="banner"] nav > div:first-child > a { gap: .625rem; }
  header[role="banner"] nav > div:first-child > a > * + * { margin-left: 0 !important; }
  header[role="banner"] nav > div:first-child > a .p-3 {
    padding: .5rem;
    border-radius: .75rem;
  }
  header[role="banner"] nav > div:first-child > a .p-3 svg { width: 1.25rem; height: 1.25rem; }
  header[role="banner"] nav > div:first-child > a .text-2xl {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
  header[role="banner"] nav > div:first-child > a .text-\[10px\] {
    font-size: .6875rem;
    margin-top: 0;
    letter-spacing: .22em;
  }
  /* Bouton burger : vraie zone tactile 44px, visible sur fond sombre comme clair */
  header[role="banner"] button[aria-label="Menu de navigation"] {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / .14);
    background: rgb(255 255 255 / .06);
  }
  header[role="banner"].bg-white\/95 button[aria-label="Menu de navigation"] {
    border-color: rgb(15 23 42 / .1);
    background: rgb(15 23 42 / .03);
  }
  /* Menu déroulant */
  header[role="banner"] nav > div.lg\:hidden > div {
    margin-top: .625rem;
    padding: .5rem;
  }
  header[role="banner"] nav > div.lg\:hidden a,
  header[role="banner"] nav > div.lg\:hidden button {
    font-size: 1.0625rem;
    padding-top: .8125rem;
    padding-bottom: .8125rem;
  }
}

/* Accueil uniquement : header transparent tant qu'on n'a pas scrollé
   (React passe ensuite en .bg-white/95, qui n'est pas touché).
   :has(#home) agit dès le premier affichage, data-enh-page sert de repli. */
:is(body:has(#home), html[data-enh-page="home"]) header[role="banner"].bg-dark-950\/60 {
  background-color: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- 2. Lisibilité mobile ---------------------------------------- */
@media (max-width: 767px) {
  .text-\[10px\] { font-size: 11px; }
  .text-\[11px\] { font-size: 12.5px; }
  .text-xs { font-size: .8125rem; line-height: 1.2rem; }
  .text-sm { font-size: .9375rem; line-height: 1.45rem; }

  /* Contraste : textes gris trop pâles (WCAG AA ≥ 4.5:1) */
  .text-white\/20, .text-white\/25, .text-white\/30 { color: rgb(255 255 255 / .6); }
  .text-white\/40 { color: rgb(255 255 255 / .68); }
  .text-white\/50 { color: rgb(255 255 255 / .74); }
  .text-white\/60 { color: rgb(255 255 255 / .8); }
  .bg-white .text-gray-300, .bg-gray-50 .text-gray-300,
  section:not([class*="bg-dark"]):not([class*="bg-gray-9"]) .text-gray-400 { color: #6b7280; }
  section:not([class*="bg-dark"]):not([class*="bg-gray-9"]) .text-gray-500 { color: #4b5563; }
}

/* ---------- 3. Pages villes --------------------------------------------- */
@media (max-width: 767px) {
  html[data-enh-page="city"] #app section .p-8 { padding: 1.25rem; }
  html[data-enh-page="city"] #app section .mb-20 { margin-bottom: 3.5rem; }

  /* Tableau comparatif : tient dans l'écran sans défilement caché */
  html[data-enh-page="city"] #app .overflow-x-auto { padding: .75rem; }
  html[data-enh-page="city"] #app .overflow-x-auto table { font-size: .875rem; }
  html[data-enh-page="city"] #app .overflow-x-auto :is(th, td) {
    padding: .75rem .5rem;
    overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
  }
  html[data-enh-page="city"] #app .overflow-x-auto th { font-size: .8125rem; line-height: 1.2; }
}

/* Guides SEO intégrés (ex. .blain-guide) : tableaux et FAQ ne doivent plus élargir la page */
[class$="-guide"] .gwrap, [class$="-guide"] .faq, [class$="-guide"] .faq > div,
[class$="-guide"] .table-wrap, [class$="-guide"] ul, [class$="-guide"] li { min-width: 0; max-width: 100%; }
[class$="-guide"] .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  [class$="-guide"] .gwrap { padding: 0 16px; }
  [class$="-guide"] table { min-width: 0 !important; font-size: 14px; }
  [class$="-guide"] :is(th, td) { padding: 10px 8px; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  /* 1re colonne = libellé de ligne : pas de césure, largeur suffisante pour « Anniversaire » */
  [class$="-guide"] tr > :first-child { padding-left: 12px; width: 7.25rem; hyphens: manual; -webkit-hyphens: manual; }
  [class$="-guide"] tr:first-child th { white-space: normal !important; }
  [class$="-guide"] .faq > div[itemprop="mainEntity"] { padding: 16px; }
  [class$="-guide"] .biz-grid { grid-template-columns: 1fr; }
  [class$="-guide"] .cta-band { padding: 28px 18px; }
}

/* ---------- 4. Slider « Nos réalisations » ------------------------------ */
[data-enh-hide] { display: none !important; }

.enh-gallery { position: relative; max-width: 72rem; margin: 0 auto; }
.enh-gallery__head { text-align: center; margin: 0 auto 2rem; max-width: 42rem; padding: 0 1rem; }
.enh-gallery__head h2 {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.02em; color: #111827;
  font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.15; margin: 0 0 .75rem;
}
.enh-gallery__head p { color: #4b5563; font-size: 1rem; line-height: 1.6; margin: 0; }

.enh-track {
  display: flex; gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 1rem;
  padding: .25rem 1rem 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.enh-track::-webkit-scrollbar { display: none; }

.enh-slide {
  position: relative; flex: 0 0 78%;
  scroll-snap-align: start;
  aspect-ratio: 3 / 4; max-width: 100%;
  border-radius: 1.25rem; overflow: hidden;
  background: #0f172a;
  box-shadow: 0 18px 40px -18px rgb(15 23 42 / .45);
  cursor: zoom-in; border: 0; padding: 0; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
/* Le carrousel déborde jusqu'aux bords de l'écran (conteneur px-4 / sm:px-6) */
@media (max-width: 639px)  { .enh-gallery { margin-inline: -1rem; } }
@media (min-width: 640px) and (max-width: 1023px) {
  .enh-gallery { margin-inline: -1.5rem; }
  .enh-track { padding-inline: 1.5rem; scroll-padding-inline: 1.5rem; }
}
@media (min-width: 640px)  { .enh-slide { flex-basis: calc((100% - 1rem) / 2.2); } }
@media (min-width: 1024px) {
  .enh-track { gap: 1.5rem; padding-inline: 0; scroll-padding-inline: 0; }
  .enh-slide { flex-basis: calc((100% - 3rem) / 3); }
}
.enh-slide img, .enh-slide video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) { .enh-slide:hover img, .enh-slide:hover video { transform: scale(1.05); } }
.enh-slide:focus-visible { outline: 3px solid #ef2c5d; outline-offset: 3px; }

.enh-slide__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 3.5rem 1.125rem 1.125rem;
  background: linear-gradient(to top, rgb(2 6 23 / .88), rgb(2 6 23 / .35) 60%, transparent);
  color: #fff; pointer-events: none;
}
.enh-slide__cat {
  display: inline-block; font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #ff8fab;
}
.enh-slide__title { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.3; margin-top: .125rem; }
.enh-slide__badge {
  position: absolute; top: .875rem; left: .875rem;
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 700; color: #fff;
  background: rgb(2 6 23 / .55); backdrop-filter: blur(6px);
  border: 1px solid rgb(255 255 255 / .18);
  padding: .3rem .625rem; border-radius: 999px; pointer-events: none;
}
.enh-slide__badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #ef2c5d; }

.enh-controls {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: .75rem; padding: 0 1rem;
}
.enh-dots { display: flex; gap: .25rem; }
.enh-dot {
  width: 1.75rem; height: 1.75rem; border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.enh-dot::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: #d1d5db;
  transition: width .3s, background-color .3s;
}
.enh-dot[aria-current="true"]::before { width: 1.5rem; background: #ef2c5d; }
.enh-arrow {
  width: 2.75rem; height: 2.75rem; border-radius: 999px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: #fff; color: #111827; border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px -8px rgb(15 23 42 / .35);
  transition: background-color .2s, color .2s, opacity .2s;
}
.enh-arrow:hover { background: #ef2c5d; color: #fff; border-color: #ef2c5d; }
.enh-arrow:disabled { opacity: .35; cursor: default; background: #fff; color: #111827; border-color: #e5e7eb; }
.enh-arrow svg { width: 1.25rem; height: 1.25rem; }

/* ---------- 5. Lightbox ------------------------------------------------- */
.enh-lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgb(2 6 23 / .94); color: #fff;
}
.enh-lightbox::backdrop { background: rgb(2 6 23 / .94); }
.enh-lightbox__stage {
  position: absolute; inset: 3.5rem .75rem 5rem;
  display: grid; place-items: center;
}
.enh-lightbox__stage :is(img, video) {
  max-width: 100%; max-height: 100%; border-radius: .75rem; object-fit: contain;
}
.enh-lightbox__cap { position: absolute; left: 1rem; right: 1rem; bottom: 1.5rem; text-align: center; font-weight: 600; }
.enh-lightbox__close, .enh-lightbox__nav {
  position: absolute; width: 2.75rem; height: 2.75rem; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / .12); color: #fff; border: 1px solid rgb(255 255 255 / .2);
}
.enh-lightbox__close { top: .75rem; right: .75rem; }
.enh-lightbox__nav { bottom: 1rem; }
.enh-lightbox__nav--prev { left: 1rem; }
.enh-lightbox__nav--next { right: 1rem; }
@media (min-width: 768px) {
  .enh-lightbox__stage { inset: 4rem 5rem; }
  .enh-lightbox__nav { top: 50%; bottom: auto; transform: translateY(-50%); }
}
.enh-lightbox svg { width: 1.25rem; height: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .enh-track { scroll-behavior: auto; }
  .enh-slide img, .enh-slide video { transition: none; }
}

/* ---------- 6. Bannière d'accueil animée -------------------------------- */
/* Tout en transform/opacity (animé par le GPU), pseudo-éléments uniquement :
   aucun nœud ajouté dans le DOM React. Désactivé si « réduire les animations ». */
@media (prefers-reduced-motion: no-preference) {

  /* Lumières de fête : deux couches de particules qui montent à vitesses différentes */
  #home > .pointer-events-none {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 75%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 75%, transparent);
  }
  #home > .pointer-events-none::before,
  #home > .pointer-events-none::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: calc(100% + 1200px);
    will-change: transform;
    /* tailles de motif diviseurs de 1200px : la boucle est parfaitement continue */
    background-repeat: repeat;
  }
  #home > .pointer-events-none::before {
    background-image:
      radial-gradient(circle at 18% 22%, rgb(255 190 32 / .95) 0 1.6px, transparent 3px),
      radial-gradient(circle at 72% 64%, rgb(249 61 104 / .9) 0 2.2px, transparent 3.5px),
      radial-gradient(circle at 44% 88%, rgb(255 255 255 / .75) 0 1.2px, transparent 2.5px),
      radial-gradient(circle at 88% 12%, rgb(255 112 137 / .85) 0 1.8px, transparent 3px);
    background-size: 300px 300px, 400px 400px, 240px 240px, 600px 600px;
    animation: enh-rise 38s linear infinite;
  }
  #home > .pointer-events-none::after {
    background-image:
      radial-gradient(circle at 30% 40%, rgb(255 255 255 / .9) 0 1px, transparent 2px),
      radial-gradient(circle at 80% 75%, rgb(255 190 32 / .8) 0 1.4px, transparent 2.6px),
      radial-gradient(circle at 55% 10%, rgb(249 61 104 / .7) 0 3px, transparent 6px);
    background-size: 200px 200px, 400px 400px, 600px 600px;
    animation: enh-rise 24s linear infinite, enh-twinkle 4.5s ease-in-out infinite;
  }
  @keyframes enh-rise { to { transform: translate3d(0, -1200px, 0); } }
  @keyframes enh-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .75; } }
  #home > .pointer-events-none::before { opacity: .75; }
  /* Mobile : le texte occupe toute la largeur, on allège les particules */
  @media (max-width: 1023px) {
    #home > .pointer-events-none::before { opacity: .5; }
    #home > .pointer-events-none::after { animation-duration: 24s, 4.5s; filter: opacity(.6); }
  }

  /* Halos lumineux qui dérivent */
  #home > .pointer-events-none > div:first-child  { animation: enh-drift-a 16s ease-in-out infinite alternate; will-change: transform; }
  #home > .pointer-events-none > div:nth-child(2) { animation: enh-drift-b 20s ease-in-out infinite alternate; will-change: transform; }
  @keyframes enh-drift-a { to { transform: translate3d(22vw, 18vh, 0) scale(1.25); } }
  @keyframes enh-drift-b { to { transform: translate3d(-18vw, -22vh, 0) scale(1.35); } }

  /* Reflet qui défile sur « Photobooth » */
  #home h1 .text-gradient {
    background-image: linear-gradient(100deg, #f93d68 0%, #ff7089 25%, #ffbe20 45%, #fff3c4 50%, #ffbe20 55%, #ff7089 75%, #f93d68 100%);
    background-size: 250% 100%;
    animation: enh-shine 5s ease-in-out infinite;
  }
  @keyframes enh-shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }

  /* Flash d'appareil photo au chargement, une seule fois, doux (pic à 30 %) */
  #home::after {
    content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
    background: radial-gradient(circle at 70% 40%, #fff 0%, rgb(255 255 255 / .6) 35%, transparent 75%);
    opacity: 0;
    animation: enh-flash 1.2s ease-out 1.1s 1 both;
  }
  @keyframes enh-flash { 0% { opacity: 0; } 8% { opacity: .3; } 100% { opacity: 0; } }

  /* Desktop : la photo flotte et un flash la traverse toutes les 7 s */
  #home .lg\:block > .relative { animation: enh-float 7s ease-in-out infinite; will-change: transform; }
  #home .lg\:block > .relative > div:first-child { animation: enh-tilt 7s ease-in-out infinite; }
  #home .lg\:block .rounded-3xl.overflow-hidden::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 35%, #fff, rgb(255 255 255 / .5) 40%, transparent 70%);
    opacity: 0;
    animation: enh-flash-loop 7s ease-out 2.5s infinite;
  }
  @keyframes enh-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
  @keyframes enh-tilt  { 0%, 100% { transform: rotate(3deg) scale(.97); } 50% { transform: rotate(5deg) scale(.97); } }
  @keyframes enh-flash-loop { 0%, 90%, 100% { opacity: 0; } 91% { opacity: .45; } }
}

/* ---------- 7. Accueil : galerie remontée juste sous la bannière -------- */
/* Réordonnancement visuel en CSS (flex + order) : le DOM React n'est pas déplacé,
   donc aucun risque pour l'hydratation. Les ancres /#gallery restent valides. */
div:has(> #home):has(> #gallery) { display: flex; flex-direction: column; }
div:has(> #home):has(> #gallery) > * { order: 0; }
div:has(> #home):has(> #gallery) > header { order: -3; }
div:has(> #home):has(> #gallery) > #home { order: -2; }
div:has(> #home):has(> #gallery) > #gallery { order: -1; }