/* ===============================
   GLOBAL
=============================== */
:root{
  --accent:#007BFF;
  --accent-dark:#0056b3;
  --navy: rgba(10,20,60,0.3);
  --line:#e9e9e9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  color:#111; background:#fff; line-height:1.55;
}

/* ===============================
   HEADER / NAV
=============================== */
header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid #eee;
}
.nav-wrap{max-width:1200px; margin:0 auto; padding:12px 16px;}
#mainNav{display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap;}
#mainNav a{
  display:inline-flex; align-items:center; gap:8px;
  color:#111; text-decoration:none; font-weight:600;
  padding:8px 10px; border-radius:8px; transition:color .25s, background .25s;
}
#mainNav a:hover{color:var(--accent);}
#mainNav a.active{color:var(--accent-dark);}
.cart-link{position:relative;}
.cart-count{
  position:absolute; top:-8px; right:-12px;
  background:var(--accent); color:#fff;
  font-size:.75rem; padding:2px 6px; border-radius:10px;
}

/* ===============================
   HERO (HOME)
=============================== */
.hero{position:relative; height:100vh; overflow:hidden; background:#000;}
.hero video#bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1;}
.hero-text{
  text-align:center; color:#fff;
  margin-top:24vh;               /* plus bas */
  opacity:0; transform: translateY(14px);
  transition: opacity .9s ease, transform .9s ease;
}
.hero-text.visible{opacity:1; transform: translateY(0);}
.hero-text h1{font-size:clamp(1.8rem, 3.2vw, 2.6rem); font-weight:800; margin-bottom:.4em;}
.hero-text p {font-size:clamp(1rem, 1.8vw, 1.15rem); margin-bottom:1.2em; color:#f5f5f5;}
/* CTA cutout with navy 30% fill behind */
.cta-btn{display:inline-block; width:280px; height:52px; cursor:pointer;}
.cta-btn .cta-svg{display:block; width:100%; height:100%;}
.cta-btn:hover .cta-svg rect:last-child{
  filter: drop-shadow(0 4px 14px rgba(10,20,60,.12));
  transform: translateY(-2px); transition: all .25s ease;
}
/* Scroll cue */
.scroll-cue{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); opacity:.9}
.scroll-cue span{display:block; width:22px; height:34px; border:2px solid #fff; border-radius:20px; position:relative}
.scroll-cue span::after{content:""; position:absolute; left:50%; top:6px; width:4px; height:8px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:wheel 1.4s ease-in-out infinite;}
@keyframes wheel{0%{opacity:0; transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0; transform:translate(-50%,12px)}}

/* ===============================
   GALLERY
=============================== */
#gallery{padding:80px 0 90px; background:#fff;}
#gallery .note{color:#444; margin:-6px auto 24px; text-align:center; max-width:760px;}
.grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:22px; padding:0 16px;}
.item{
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.item:hover{transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.06);}
.thumb{display:block; width:100%; height:260px; object-fit:cover; transition: transform .35s ease; cursor:zoom-in;}
.item:hover img.thumb{transform: scale(1.035);}
.meta{padding:12px 12px 14px;}
.meta-line{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.meta .price{font-weight:700;}
.meta .left{color:#222;}
.meta .left.soldout{color:#999;}
.btn-add{
  width:100%; display:inline-block; padding:10px 14px; border-radius:10px;
  background:var(--accent); color:#fff; border:none; cursor:pointer; font-weight:600;
  transition: background .25s ease, transform .04s ease;
}
.btn-add:hover{background:var(--accent-dark);}
.btn-add:active{transform: scale(.98);}
.btn-add:disabled{background:#cfcfcf; cursor:not-allowed}

/* ===============================
   LIGHTBOX
=============================== */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.86); display:none; align-items:center; justify-content:center;
  z-index:1000; padding:24px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(92vw, 1200px); max-height:80vh; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35);}
.lightbox .nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.12); color:#fff; border:none; width:46px; height:46px; border-radius:999px;
  font-size:22px; cursor:pointer; transition:background .2s ease;
}
.lightbox .nav-btn:hover{background:rgba(255,255,255,.22);}
.lightbox .prev{left:24px;} .lightbox .next{right:24px;}
.lightbox .close{
  position:absolute; top:16px; right:16px; background:rgba(255,255,255,.12); color:#fff; border:none;
  width:42px; height:42px; border-radius:999px; font-size:22px; cursor:pointer;
}
.caption{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:#fff; font-weight:600; text-shadow:0 2px 10px rgba(0,0,0,.6);
}

/* ===============================
   ABOUT
=============================== */
#about .about-content{padding:10px 16px 0; text-align:center; margin:0 auto; max-width:800px;}
#about .about-content h1{font-size:clamp(1.4rem, 2.6vw, 1.8rem); font-weight:700; margin-bottom:.6em;}
#about .about-content p{margin:0 auto 1em; color:#333; text-align:center;}

.about-video{position:relative; margin:0; min-height:78vh; overflow:hidden; background:transparent;}
.about-video-el{
  position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px);
  object-fit:cover; object-position:center; z-index:-2; pointer-events:none;
}
.about-video-overlay{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.18) 45%,
    rgba(0,0,0,0.38) 70%,
    rgba(0,0,0,0.70) 100%);
}
.about-video-text{
  position:absolute; top:58%; left:50%; transform:translate(-50%,-50%);
  text-align:center; color:#fff;
  opacity:0; transform-origin:center; transition: opacity 1s ease, transform 1s ease;
}
.about-video-text.visible{opacity:1;}

/* IG counter */
.ig-counter{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:18px 0 10px; color:#222;
}
.ig-link{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#fff; border:1px solid #e8e8e8;}
.ig-link i{ font-size:16px; color:#E1306C;}
.ig-handle{ font-weight:700; color:#111; text-decoration:none;}
.ig-handle:hover{text-decoration:underline;}
.ig-count{ font-weight:800;}
.ig-label{ color:#666;}
@keyframes igBump{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.ig-bump{ animation: igBump .45s ease-out 1; }

/* ===============================
   FOOTER
=============================== */
footer{ font-size:.85rem; color:#999; text-align:center; padding:30px 10px; background:#000;}
footer a{ color:#aaa; text-decoration:none;}
footer a:hover{ color:#fff; }

/* ===============================
   UTILITIES
=============================== */
.container{max-width:1200px; margin:0 auto; padding:0 16px;}
.section{position:relative;}
.reveal{opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform: translateY(0);}
.parallax{will-change: transform;}
.scroll-top{position:fixed; right:18px; bottom:18px; width:40px; height:40px; border-radius:999px; background:#111; color:#fff; display:grid; place-items:center; cursor:pointer; opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; z-index:20;}
.scroll-top.visible{opacity:1; pointer-events:auto;}

/* prevent videos from blocking clicks on gallery */
#bg-video, .about-video-el, .about-video-overlay { pointer-events:none; }
#gallery { position:relative; z-index:1; }

/* Responsive tweaks */
@media (max-width:640px){
  .thumb{height:220px;}
  #mainNav{gap:14px;}
  #mainNav a{padding:6px 8px;}
  .cta-btn{width:240px; height:48px;}
  .hero-text{margin-top:20vh;}
}
/* HOME – texte & bouton plus bas + fondu d’arrivée */
.hero-text{
  margin-top: 30vh;                  /* ↓ plus bas sur desktop */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s ease;
  text-align: center;
  color: #fff;
}
.hero-text.visible{
  opacity: 1;
  transform: translateY(0);
}

/* tailles conservées (compactes) */
.hero-text h1{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.hero-text p { font-size: clamp(1rem, 1.8vw, 1.15rem); }

/* Ajustements responsive */
@media (max-width: 900px){
  .hero-text{ margin-top: 26vh; }    /* tablettes */
}
@media (max-width: 640px){
  .hero-text{ margin-top: 22vh; }    /* mobiles */
}
/* --- HERO visibility fix --- */
.hero { position: relative; background:#000; }
#bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;                 /* was -1 → makes it hidden */
}
.hero-text, .scroll-cue { position: relative; z-index: 1; }

/* keep clicks unaffected */
#bg-video { pointer-events: none; }
/* === HERO full-bleed poster + layers + text visible === */
.hero{
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* Poster et vidéo couvrent TOTALEMENT le hero */
.hero-poster,
#bg-video{
  position: absolute;
  inset: 0;              /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;     /* remplissage plein cadre */
  object-position: center;
}

/* Ordre des couches : vidéo en 0, poster en 1, texte en 2 */
#bg-video{ z-index: 0; pointer-events: none; background:#000; }
.hero-poster{ z-index: 1; transition: opacity .5s ease; }

/* Quand la vidéo est prête, on fond le poster */
.hero.video-ready .hero-poster{ opacity: 0; }

/* Texte + bouton : TOUJOURS par-dessus et visibles */
.hero-text{
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  margin-top: 30vh;                 /* plus bas comme souhaité */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s ease;
}
.hero-text.visible{ opacity: 1; transform: translateY(0); }

/* Bouton : pas touché, juste pour s'assurer qu'il s'affiche */
.cta-btn{ display:inline-block; width:280px; height:52px; }
.cta-btn .cta-svg{ display:block; width:100%; height:100%; }
/* HERO: keep poster visible until video is truly playing */
#bg-video{
  opacity: 0;                 /* start hidden */
  transition: opacity .5s ease;
}
.hero.video-playing #bg-video{
  opacity: 1;                 /* show only once playing */
}
.hero.video-playing .hero-poster{
  opacity: 0;                 /* fade poster only when video is visible */
}
/* === HERO — V01 OVERRIDE (paste at end) === */
.hero{
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* video sits behind content */
#bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;             /* <-- critical: behind text */
  opacity: 1 !important;   /* cancel any earlier opacity=0 */
}

/* ensure any poster IMG (if left by mistake) is hidden */
.hero .hero-poster{ display:none !important; }

/* text lower + fade-in */
.hero-text{
  text-align: center;
  color: #fff;
  margin-top: 30vh;        /* V01 position */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s ease;
}
.hero-text.visible{
  opacity: 1;
  transform: translateY(0);
}

/* compact sizes kept */
.hero-text h1{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.hero-text p { font-size: clamp(1rem, 1.8vw, 1.15rem); }

/* remove any later “video-ready / video-playing” logic effects */
.hero.video-ready .hero-poster,
.hero.video-playing .hero-poster { opacity: 0 !important; }
.hero.video-ready #bg-video,
.hero.video-playing #bg-video { opacity: 1 !important; }

@media (max-width: 640px){
  .hero-text{ margin-top: 22vh; }
}
/* HOME – reposition text/button lower (validated version) */
.hero-text,
#home > div[style*="text-align:center"] {
  margin-top: 40vh !important; /* plus bas qu'avant */
}

@media (max-width: 640px){
  .hero-text,
  #home > div[style*="text-align:center"] {
    margin-top: 32vh !important;
  }
}
/* === HOME — deeper text/button position (final validated layout) === */

/* Desktop */
#home .hero-text,
#home > div[style*="text-align:center"] {
  margin-top: 48vh !important;   /* était 40vh → descend encore */
}

/* Tablettes */
@media (max-width: 900px) {
  #home .hero-text,
  #home > div[style*="text-align:center"] {
    margin-top: 42vh !important;
  }
}

/* Mobiles */
@media (max-width: 640px) {
  #home .hero-text,
  #home > div[style*="text-align:center"] {
    margin-top: 36vh !important;
  }
}
/* === HOME — smaller & lower (override inline too) === */

/* position (desktop) */
#home .hero-text,
#home > div[style*="text-align:center"]{
  margin-top: 55vh !important;   /* lower than before */
}

/* tablet */
@media (max-width: 900px){
  #home .hero-text,
  #home > div[style*="text-align:center"]{
    margin-top: 48vh !important;
  }
}

/* mobile */
@media (max-width: 640px){
  #home .hero-text,
  #home > div[style*="text-align:center"]{
    margin-top: 44vh !important;
  }
}

/* type sizes (smaller) */
#home .hero-text h1,
#home > div[style*="text-align:center"] h1{
  font-size: clamp(1.4rem, 2.4vw, 2.1rem) !important;
  font-weight: 800;
}
#home .hero-text p,
#home > div[style*="text-align:center"] p{
  font-size: clamp(0.9rem, 1.6vw, 1.05rem) !important;
}

/* make CTA a bit smaller */
#home .cta-btn,
#home > div[style*="text-align:center"] .cta-btn{
  transform: scale(.88);
  transform-origin: center;
}
@media (max-width: 640px){
  #home .cta-btn,
  #home > div[style*="text-align:center"] .cta-btn{
    transform: scale(.85);
  }
}
/* --- Remove any remaining video controls overlay --- */
#bg-video::-webkit-media-controls,
#bg-video::-webkit-media-controls-enclosure,
#bg-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* === HOME video 1080x800 — keep full width, natural height ratio === */
#home {
  position: relative;
  background: #000;
  overflow: hidden;
}

/* vidéo responsive panoramique */
#home #bg-video {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;             /* conserve le ratio original */
  object-fit: contain;      /* pas de rognage */
  max-height: 90vh;         /* optionnel : limite la hauteur pour garder de l’équilibre */
}

/* pour que le texte reste visible au bon endroit malgré la moindre hauteur */
#home .hero-text,
#home > div[style*="text-align:center"] {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  margin-top: 65vh; /* ajuste la position du texte selon ta vidéo */
}

@media (max-width: 768px){
  #home .hero-text,
  #home > div[style*="text-align:center"] {
    margin-top: 50vh;
  }
}
/* === HERO — vidéo 1080x800 plein-largeur, centrée, hauteur auto === */
#home.hero{
  position: relative;
  height: auto !important;        /* la hauteur suit la vidéo */
  overflow: hidden;
  background: #000;
}

/* La vidéo devient un bloc classique, largeur 100%, centrée */
#home #bg-video{
  position: relative !important;
  display: block !important;
  width: 100% !important;         /* remplit toute la largeur */
  height: auto !important;        /* conserve le ratio 1080x800 */
  left: auto !important;
  top: auto !important;
  transform: none !important;
  object-fit: contain !important; /* pas de recadrage */
  background: #000;
}

/* Texte + bouton: overlay centré, plus bas sur la vidéo */
#home .hero-text,
#home > div[style*="text-align:center"]{
  position: absolute !important;
  left: 50%;
  top: 74%;                       /* plus bas (ajuste 70–78% si besoin) */
  transform: translate(-50%, -50%);
  margin-top: 0 !important;       /* on ignore l'ancien margin-top */
  text-align: center;
  color: #fff;
  z-index: 2;
}

/* Tailles plus compactes comme validé */
#home .hero-text h1,
#home > div[style*="text-align:center"] h1{
  font-size: clamp(1.4rem, 2.4vw, 2.1rem) !important;
  font-weight: 800;
}
#home .hero-text p,
#home > div[style*="text-align:center"] p{
  font-size: clamp(0.9rem, 1.6vw, 1.05rem) !important;
}

/* CTA un peu plus petit */
#home .cta-btn,
#home > div[style*="text-align:center"] .cta-btn{
  transform: scale(.88);
  transform-origin: center;
}

/* Mobile: remonter légèrement s'il y a très peu de hauteur */
@media (max-width: 640px){
  #home .hero-text,
  #home > div[style*="text-align:center"]{
    top: 70%;
  }
}
/* === HERO — texte + bouton collés au bas de la vidéo === */
#home .hero-text,
#home > div[style*="text-align:center"]{
  position: absolute !important;
  left: 50%;
  bottom: 6%;               /* Espace entre le bas de la vidéo et le texte */
  top: auto !important;     /* On ignore la position précédente */
  transform: translateX(-50%);
  margin: 0 !important;
  text-align: center;
  color: #fff;
  z-index: 2;
}

/* Version mobile : un peu plus haut pour garder de la marge */
@media (max-width: 640px){
  #home .hero-text,
  #home > div[style*="text-align:center"]{
    bottom: 10%;
  }
}
/* === HERO — remove black band under video & stick text on video === */

/* The section should shrink to video height and have no black bg */
#home.hero{
  background: transparent !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0;                 /* removes any stray line box under media */
  overflow: hidden;
}

/* Video fully controls the height; no background color */
#home #bg-video{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;        /* keep 1080×800 aspect */
  object-fit: contain !important; /* no crop */
  background: transparent !important;
}

/* Nudge next section up a hair to hide sub-pixel gaps on some browsers */
#gallery{ margin-top: -2px; }

/* Put the text over the bottom of the video (not below it) */
#home .hero-text,
#home > div[style*="text-align:center"]{
  position: absolute !important;
  left: 50%;
  bottom: 4%;                     /* adjust 2–8% to taste */
  transform: translateX(-50%);
  margin: 0 !important;
  text-align: center;
  color: #fff;
  z-index: 2;
}

/* Slightly smaller type as you liked */
#home .hero-text h1,
#home > div[style*="text-align:center"] h1{
  font-size: clamp(1.4rem, 2.4vw, 2.1rem) !important;
  font-weight: 800;
}
#home .hero-text p,
#home > div[style*="text-align:center"] p{
  font-size: clamp(0.9rem, 1.6vw, 1.05rem) !important;
}

/* If any test poster image remains in DOM, force-hide it */
#home .hero-poster{ display:none !important; }
/* === FIX: remove black gap under HOME video & start Gallery immediately === */

/* Le hero se réduit exactement à la hauteur de la vidéo */
#home.hero{
  background: transparent !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;   /* évite le « baseline gap » sous les médias */
  overflow: hidden;
  display: block;
}

/* La vidéo occupe toute la largeur, pas de marge ni bord */
#home #bg-video{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;     /* conserve 1080×800 */
  object-fit: contain !important;
  background: transparent !important;
  margin: 0 !important;
  border: 0 !important;
  vertical-align: top !important; /* supprime le petit gap d’élément inline */
}

/* Texte collé sur la vidéo (pas sous une bande) */
#home .hero-text,
#home > div[style*="text-align:center"]{
  position: absolute !important;
  left: 50%;
  bottom: 4%;                  /* ajuste 2–8% si tu veux */
  transform: translateX(-50%);
  margin: 0 !important;
  z-index: 2;
  text-align: center;
  color: #fff;
}

/* La galerie commence immédiatement, sans marge haute parasite */
#gallery{
  margin-top: 0 !important;
  padding-top: 0 !important;   /* si tu veux un peu d’air, remets 20–30px ici */
}

/* Le h2 qui avait un inline margin-top:20px est neutralisé */
#gallery .container > h2{
  margin-top: 0 !important;
}
/* === HERO (vidéo 1920x800) — plein large, sans bande, galerie collée === */

/* On donne au hero la même proportion que la vidéo : 1920/800 = 12/5 = 2.4 */
#home.hero{
  position: relative;
  width: 100%;
  aspect-ratio: 12 / 5;                 /* hauteur = 41.666% de la largeur */
  height: auto !important;              /* override anciens réglages */
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  background: #000;
  overflow: hidden;
}

/* Fallback anciens navigateurs (au cas où aspect-ratio n’est pas supporté) */
@supports not (aspect-ratio: 12 / 5) {
  #home.hero{
    height: calc(100vw * (800 / 1920)) !important; /* 41.666vw */
  }
}

/* La vidéo remplit TOUT le hero, sans bande (recadrage éventuel) */
#home #bg-video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;         /* plus de letterbox */
  object-position: center;
  background: #000;
  margin: 0 !important;
  border: 0 !important;
}

/* Texte collé sur la vidéo (en bas) */
#home .hero-text,
#home > div[style*="text-align:center"]{
  position: absolute !important;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  margin: 0 !important;
  text-align: center;
  color: #fff;
  z-index: 2;
}

/* La galerie démarre immédiatement sous la vidéo */
#gallery{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#gallery .container > h2{ margin-top: 0 !important; }
/* === HERO — Full-width video 1920×800, keep full ratio, no gap === */
#home.hero-fit{
  position: relative;
  background: #000;
  line-height: 0;              /* évite le gap baseline sous les médias */
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* La vidéo conserve son ratio (hauteur auto), prend toute la largeur */
#home .hero-video{
  display: block;              /* pas inline → pas de ligne fantôme */
  width: 100%;
  height: auto;                /* conserve 1920×800 */
  object-fit: contain;         /* aucune découpe */
  object-position: center;
  background: #000;
  margin: 0;
  border: 0;
  vertical-align: top;         /* supprime le minuscule gap inline éventuel */
}

/* Texte + bouton posés SUR la vidéo, en bas (sans sortir) */
#home .hero-overlay{
  position: absolute;
  left: 50%;
  bottom: 6%;                  /* règle l’écart bas (2–10%) */
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  line-height: 1.25;
  z-index: 2;
}
#home .hero-overlay h1{ font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 800; margin: .4em 0 0; }
#home .hero-overlay p { font-size: clamp(0.9rem, 1.6vw, 1.05rem); margin: .6em 0 1.1em; color:#f5f5f5; }

/* CTA (déjà utilisé dans ta V02) */
#home .cta-btn{ display:inline-block; width:280px; height:52px; }
#home .cta-btn .cta-svg{ width:100%; height:100%; display:block; }

/* Retirer toute interface vidéo forcée (Safari/Opera) */
#bg-video::-webkit-media-controls,
#bg-video::-webkit-media-controls-enclosure,
#bg-video::-webkit-media-controls-overlay-play-button{
  display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}

/* La galerie commence immédiatement sous la vidéo (pas de marge haute) */
#gallery{ margin-top: 0 !important; padding-top: 0 !important; }
#gallery .container > h2{ margin-top: 0 !important; }
/* HERO — robust centering + parallax-friendly */
#home .hero-overlay{
  position: absolute;
  left: 0;              /* use left/right instead of translateX for centering */
  right: 0;
  bottom: 6%;
  transform: none;      /* parallax will set translateY without overwriting centering */
  margin: 0 auto;
  text-align: center;
  color: #fff;
  z-index: 2;
  pointer-events: auto;
}

/* mobile: keep nicely centered and a touch higher */
@media (max-width: 640px){
  #home .hero-overlay{
    bottom: 10%;
    padding: 0 14px;    /* a bit of breathing room on tiny screens */
  }
}
/* === HERO — mobile-specific layout (hide CTA, move text lower) === */
@media (max-width: 768px){

  /* cache la pilule sur mobile */
  #home .cta-btn{
    display: none !important;
  }

  /* descend le texte/titre vers le bas de la vidéo */
  #home .hero-overlay{
    bottom: 5% !important;          /* position plus basse (2–6% possible) */
    text-align: center;
    padding: 0 10px;                /* un peu d’air sur les bords */
  }

  #home .hero-overlay h1{
    font-size: clamp(1.2rem, 6vw, 1.8rem);
    margin-bottom: 0.4em;
  }

  #home .hero-overlay p{
    font-size: clamp(0.8rem, 4.5vw, 1rem);
  }
}
/* === MOBILE FONT ADJUSTMENTS (hero + gallery) === */
@media (max-width: 768px){

  /* --- HERO --- */
  #home .hero-overlay h1 {
    font-size: clamp(1rem, 5vw, 1.5rem) !important;
    letter-spacing: 0.5px;
  }

  #home .hero-overlay p {
    font-size: clamp(0.75rem, 3.5vw, 0.9rem) !important;
  }

  /* --- GALLERY --- */
  #gallery .container > h2 {
    font-size: clamp(1rem, 4vw, 1.3rem) !important;
    margin-bottom: 0.5em;
  }

  #gallery .container > p {
    font-size: clamp(0.8rem, 3.2vw, 0.95rem) !important;
    line-height: 1.4;
    color: #ddd; /* reste lisible sur fond sombre */
  }

  /* Ajuste aussi les légendes sous les œuvres */
  #gallery .meta-line,
  #gallery .price,
  #gallery .left {
    font-size: 0.85rem !important;
  }

  /* Laisse un peu d'air entre les œuvres */
  #gallery .item {
    margin-bottom: 1.4rem !important;
  }
}
/* === GALLERY — small top spacing for "Available Prints" === */
#gallery .container > h2 {
  margin-top: 40px !important;   /* espace au-dessus du titre (desktop + mobile) */
}

/* === MOBILE ONLY TWEAKS === */
@media (max-width: 768px){

  /* 1. Texte d'intro de la galerie un peu plus sombre */
  #gallery .container > p {
    color: rgba(230,230,230,0.75) !important; /* gris clair atténué */
  }

  /* 2. Réduction de l’espace avant/après le texte du about */
  #about .container {
    padding-top: 30px !important;   /* au lieu de ~60px */
    padding-bottom: 20px !important;
  }

  #about .container p {
    margin-top: 0.4em !important;
    margin-bottom: 0.6em !important;
  }
}
/* === HERO — plus de parallaxe + ombre bleue marine === */
#home .hero-overlay.parallax {
  /* même effet parallax mais plus marqué */
  transition: transform 0.2s ease-out;
  filter: drop-shadow(0 4px 10px rgba(10,20,60,0.3)); /* ombre bleu marine 30% */
}

/* La pilule suit le mouvement plus légèrement */
#home .cta-btn.parallax {
  filter: drop-shadow(0 4px 10px rgba(10,20,60,0.3));
}

/* --- Mobile-only tweaks --- */
@media (max-width: 768px){

  /* 1. Texte d’intro de la galerie plus foncé (gris anthracite) */
  #gallery .container > p {
    color: rgba(60,60,60,1) !important; /* gris anthracite */
  }

  /* 2. Moins d’espace avant/après le texte du about */
  #about .container {
    padding-top: 25px !important;
    padding-bottom: 20px !important;
  }

  #about .container p {
    margin-top: 0.3em !important;
    margin-bottom: 0.4em !important;
  }
}
/* === HERO — parallaxe + ombre accentuées === */
#home .hero-overlay.parallax {
  transition: transform 0.2s ease-out;
  filter: drop-shadow(0 6px 16px rgba(10,20,60,0.45)); /* ombre bleu-marine plus forte */
}

#home .cta-btn.parallax {
  filter: drop-shadow(0 6px 16px rgba(10,20,60,0.45));
}

/* --- Mobile-only adjustments --- */
@media (max-width: 768px){

  /* 1. Texte du ABOUT = même taille que texte de la galerie */
  #about .container p {
    font-size: clamp(0.8rem, 3.2vw, 0.95rem) !important; /* identique à la galerie */
    color: #eaeaea; /* gris clair lisible sur fond sombre */
    line-height: 1.4;
    margin-top: 0.3em !important;
    margin-bottom: 0.4em !important;
  }

  /* 2. Moins d’espace entre la vidéo et le texte du about */
  #about .container {
    padding-top: 20px !important;   /* réduit (était ~60px) */
    padding-bottom: 20px !important;
  }
}
/* HERO — parallaxe + ombre bleue bien visibles */
#home .hero-overlay.parallax{
  will-change: transform;
  filter: drop-shadow(0 10px 22px rgba(10,20,60,0.45)) !important; /* ombre + marquée */
}

#home .cta-btn.parallax{
  will-change: transform;
  filter: drop-shadow(0 10px 22px rgba(10,20,60,0.45)) !important;
}

/* Option : un tout petit lift au survol desktop (n’affecte pas mobile) */
@media (hover:hover){
  #home .cta-btn:hover{ transform: translateY(-1px); }
}
/* MOBILE (<=768px) — About lisible + resserré */
@media (max-width: 768px){

  /* Couleur anthracite pour le texte du about */
  #about .container p{
    color: #333 !important;            /* gris anthracite */
    font-size: clamp(0.8rem, 3.2vw, 0.95rem) !important; /* taille = galerie */
    line-height: 1.4;
    margin-top: 0.25em !important;
    margin-bottom: 0.35em !important;
  }

  /* Réduire les marges haut/bas autour du bloc texte */
  #about .container{
    padding-top: 10px !important;      /* avant : plus grand */
    padding-bottom: 10px !important;
  }

  /* Titre un poil plus compact aussi */
  #about .container h1{
    margin-top: 0 !important;
    margin-bottom: 0.4em !important;
  }
}
/* === HERO — équilibrage parallaxe + ombres + dégradé bas === */

/* 1. Parallaxe du texte et de la pilule harmonisée */
#home .hero-overlay.parallax,
#home .cta-btn.parallax {
  will-change: transform;
  transition: transform 0.2s ease-out;
}

/* 2. Ombres plus fortes (bleu-marine 55%) */
#home .hero-overlay {
  filter: drop-shadow(0 12px 28px rgba(10, 20, 60, 0.55));
}
#home .cta-btn {
  filter: drop-shadow(0 8px 20px rgba(10, 20, 60, 0.55));
}

/* 3. Dégradé bleu-marine (10%) sur le bas de la vidéo */
#home.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%; /* hauteur du dégradé visible, ajuste 20–40% selon ton goût */
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 20, 60, 0.1) 0%,
    rgba(10, 20, 60, 0.0) 100%
  );
  z-index: 1;
}

/* 4. Pilule : trou du texte vraiment transparent à 50% */
#home .cta-btn .cta-svg rect[mask] {
  fill: rgba(255, 255, 255, 0.5) !important; /* blanc semi-transparent 50% */
}
/* Sync look: stronger shadow + subtle bottom gradient */
#home .hero-overlay,
#home .cta-btn{
  filter: drop-shadow(0 14px 28px rgba(10,20,60,.55));
}

#home.hero::after{
  content:"";
  position:absolute; left:0; bottom:0; width:100%; height:28%;
  background: linear-gradient(to top, rgba(10,20,60,.10) 0%, rgba(10,20,60,0) 100%);
  pointer-events:none; z-index:1;
}
/* MOBILE — videos full width, keep ratio */
@media (max-width: 768px){
  /* Home video already fits width; this enforces it on all devices */
  #home .hero-video{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* About video: switch from absolute cover to responsive block on mobile */
  .about-video{ position: relative; height: auto !important; }
  .about-video-el{
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* keep full frame, no crop */
  }

  /* Optional: lighter overlay on mobile so video stays clear */
  .about-video-overlay{ background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0)); }
}
/* HERO — navy outline around text */
#home .hero-overlay h1,
#home .hero-overlay p{
  /* crisp, subtle outline */
  -webkit-text-stroke: 0.6px rgba(10,20,60,.85);
  text-shadow:
    0 0 1px rgba(10,20,60,.90),
    0 0 2px rgba(10,20,60,.60),
    0 2px 6px rgba(10,20,60,.35);
  paint-order: stroke fill;
}
/* --- Remove the outline we tried earlier --- */
#home .hero-overlay h1,
#home .hero-overlay p{
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  paint-order: normal !important;
}

/* --- Ensure pill uses the correct mask/opacity (white 100%, navy 30%) --- */
#home .cta-btn .cta-svg rect[mask]{
  fill: #fff !important; /* opaque white pill */
}
/* if an old rule forced 50% white, this overrides it */

/* --- Sync parallax: remove any extra transforms on the CTA --- */
#home .cta-btn{
  transform: none !important;   /* no scale/translate lingering */
}
@media (hover:hover){
  #home .cta-btn:hover{ transform: none !important; }
}

/* --- Stronger shared shadow for text + pill (navy) --- */
#home .hero-overlay,
#home .cta-btn{
  filter: drop-shadow(0 12px 28px rgba(10,20,60,0.55));
}
@media (max-width: 768px){
  /* Home video: full width, keep full frame */
  #home .hero-video{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;   /* no crop */
    background: #000;
  }
  /* About video too */
  .about-video{ position: relative; height: auto !important; }
  .about-video-el{
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}
/* --- Unstick hero from covering the following sections --- */
#home.hero-fit{
  position: relative !important;
  z-index: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important; /* no stray gap */
  overflow: hidden !important;
}

/* The decorative gradient must never block anything below */
#home.hero-fit::after{
  pointer-events: none !important;
  z-index: 0 !important; /* keep it under the overlay text */
}

/* Video is confined to the hero box only */
#home .hero-video{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;       /* keeps full 1920×800 frame */
  object-fit: contain !important;
  margin: 0 !important;
  border: 0 !important;
  background: #000;
}

/* Overlay text sits inside the hero and cannot overflow it */
#home .hero-overlay{
  position: absolute !important;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  z-index: 2 !important;
  pointer-events: auto;
}

/* Make sure the next sections render above normal flow and are visible */
#gallery, #about{
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding-top: 0 !important;
}

/* If any strange top gap remains, kill margins on the first elements */
#gallery .container > h2,
#about .about-content h1{
  margin-top: 12px !important;
}

/* Ensure page is scrollable */
html, body{ overflow-y: auto !important; }
/* === Ensure HERO doesn't overlap next sections === */
#home.hero-fit{
  position: relative !important;
  z-index: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}
#home.hero-fit::after{ pointer-events:none; z-index:0 !important; }
#home .hero-video{
  position: relative !important;
  width:100% !important; height:auto !important;
  object-fit: contain !important; margin:0 !important; border:0 !important;
}

/* === Force GALLERY & ABOUT to render normally below === */
#gallery, #about{
  position: relative !important;
  display: block !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding-top: 0 !important;
}
#gallery .container > h2{ margin-top: 32px !important; }
#gallery .container > p.note{ margin: 8px auto 20px !important; }

/* Lightbox must float above everything */
.lightbox{ z-index: 999 !important; }

/* Avoid any accidental full-screen overlay */
html, body{ overflow-y:auto !important; }

/* Keep hero from overlapping next sections; ensure flow continues */
#home.hero-fit{ position:relative; z-index:0; line-height:0; overflow:hidden; }
#home.hero-fit::after{ pointer-events:none; z-index:0; }
#gallery, #about{ position:relative; z-index:1; margin:0; padding-top:0; display:block; }
.lightbox{ z-index: 999; }
/* About — assure le texte overlay visible au-dessus de la vidéo */
.about-video{ position: relative; overflow: hidden; }
.about-video-el{
  display:block; width:100%; height:auto;
  object-fit: contain; background:#000;
}
.about-video-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
  z-index: 1; pointer-events:none;
}
.about-video-text{
  position:absolute; left:0; right:0; bottom:10%;
  text-align:center; z-index: 2; /* au-dessus de l’overlay */
}
.about-video-text h2{
  color:#fff; margin:0; font-weight:700;
  text-shadow: 0 6px 16px rgba(0,0,0,.6);
}

/* Mobile : même si on a mis le texte plus foncé ailleurs, garde-le lisible ici */
@media (max-width: 768px){
  .about-video-text h2{ color:#f5f7ff; }
}

/* Galerie : s'assurer que la grille s'affiche */
#gallery .grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Hide native video controls overlays (Safari/Opera) */
#bg-video::-webkit-media-controls,
#bg-video::-webkit-media-controls-enclosure,
#bg-video::-webkit-media-controls-overlay-play-button,
.about-video-el::-webkit-media-controls,
.about-video-el::-webkit-media-controls-enclosure,
.about-video-el::-webkit-media-controls-overlay-play-button{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
/* ============================= */
/* HERO — centrage du texte et du bouton */
/* ============================= */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* place le texte vers le bas de la vidéo */
  align-items: center;
  text-align: center;
  padding-bottom: 8%; /* ajustable : espace depuis le bas de la vidéo */
  z-index: 2;
}

.hero-overlay h1,
.hero-overlay p {
  text-align: center;
  margin: 0.4rem 0;
}

.hero-overlay .cta-btn {
  margin-top: 1rem;
  display: inline-block;
  transform: none !important;
}

/* ============================= */
/* ABOUT — centrage du texte sur la vidéo */
/* ============================= */
.about-video-text {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  z-index: 2;
}

.about-video-text h2 {
  color: #fff;
  text-align: center;
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  margin: 0;
}
/* ============ HERO: centrer solidement le bloc même avec la parallaxe ============ */
/* Le problème venait de translateX(-50%) écrasé par la parallaxe (transform). 
   On centre donc SANS transform horizontal : */
#home .hero-overlay{
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;   /* occupe toute la vidéo */
  transform: none !important;              /* la parallaxe n’écrase plus le centrage */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;               /* vers le bas de la vidéo */
  align-items: center;                     /* centré horizontalement */
  text-align: center;
  padding-bottom: 8%;
  z-index: 2;
}
/* La pilule ne doit pas avoir de transform “fantôme” côté CSS */
#home .cta-btn{ transform: none !important; }

/* ============ GALLERY: centrer le titre ============ */
#gallery .container{
  text-align: center;
}
#gallery .container h2{
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
/* remettre l’alignement normal à gauche pour le contenu de la grille */
#gallery .grid{
  margin-top: 16px;
  text-align: left;
}

/* ============ FOOTER: tout sur une seule ligne ============ */
#site-footer .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;              /* pas de retour à la ligne */
  overflow-x: auto;               /* évite la casse si l’écran est très étroit */
  white-space: nowrap;
}
#site-footer .footer-nav{
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
}
#site-footer .container p,
#site-footer .footer-nav a{
  white-space: nowrap;
}
/* ==========================================================
   📱 MOBILE ADAPTATIONS (Hero, Gallery, About)
   ========================================================== */
@media (max-width: 768px) {

  /* --- HERO: centrer parfaitement le texte et le bouton --- */
  #home .hero-overlay {
    justify-content: flex-end;   /* vers le bas de la vidéo */
    align-items: center;         /* centrage horizontal */
    text-align: center;
    padding-bottom: 10%;         /* espace depuis le bas */
  }

  #home .hero-overlay h1 {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
  }

  #home .hero-overlay p {
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }

  #home .cta-btn {
    transform: none !important;
    margin-top: 0.6rem;
  }

  /* --- GALLERY: centrer le titre “Available Prints” --- */
  #gallery .container {
    text-align: center;
  }

  #gallery .container h2 {
    margin: 0 auto 1rem auto;
    display: inline-block;
    text-align: center;
  }

  /* --- ABOUT: centrer “What is your favorite?” sur la vidéo --- */
  .about-video-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* centrage parfait */
    text-align: center;
    width: 100%;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }

  .about-video-text h2 {
    font-size: 1.2rem;
    margin: 0;
  }
}
/* ==========================================================
   📱 MOBILE — Adjustments (Hero spacing, About spacing)
   ========================================================== */
@media (max-width: 768px) {

  /* --- HERO: rapprocher les deux lignes et descendre le bloc --- */
  #home .hero-overlay {
    justify-content: flex-end;   /* placer vers le bas de la vidéo */
    padding-bottom: 6%;          /* descendre encore un peu */
  }

  #home .hero-overlay h1 {
    font-size: 1.8rem;
    margin-bottom: 0.1rem;       /* resserre l’espace */
  }

  #home .hero-overlay p {
    font-size: 1rem;
    margin-top: 0.1rem;          /* resserre davantage */
  }

  /* --- ABOUT: supprimer vide au-dessus du titre --- */
  #about .about-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* --- ABOUT: supprimer le gris entre la vidéo et le compteur --- */
  .about-video {
    margin-bottom: 0 !important;
  }

  .ig-counter {
    margin-top: 0 !important;
    background: transparent !important;
  }

  /* Pour éviter tout fond parasite ou espace résiduel */
  #about {
    background: #000; /* ou transparent si ton site est noir */
  }
}
/* ==========================================================
   📱 MOBILE-ONLY FIXES (≤ 768px)
   ========================================================== */
@media (max-width: 768px){

  /* 1) HERO encore plus bas */
  #home .hero-overlay{
    justify-content: flex-end;
    padding-bottom: 3% !important;   /* baisse encore (met 2% si tu veux collé) */
  }
  #home .hero-overlay h1{ margin-bottom: .05rem; }
  #home .hero-overlay p { margin-top: .05rem;  }

  /* 2) ABOUT sur fond blanc (pas noir) */
  #about{
    background: #fff !important;
    color: #111 !important;
  }
  #about .about-content{ 
    background: transparent !important;
    color: inherit !important;
  }
  .about-video-text h2{ color:#111 !important; text-shadow:none !important; }

  /* 3) Réduire l’espace entre GALERIE et ABOUT */
  /* On serre la fin de #gallery et on supprime tout “espace section” résiduel */
  #gallery{ 
    margin-bottom: 0 !important; 
    padding-bottom: 8px !important;
  }
  /* si un style générique met de la marge entre sections, on l’écrase ici */
  #gallery + #about{
    margin-top: 0 !important;
    padding-top: 6px !important;
  }

  /* 4) Réduire la distance entre la vidéo du ABOUT et le compteur */
  .about-video{ 
    margin-bottom: 4px !important;     /* collé sous la vidéo */
  }
  .ig-counter{
    margin-top: 6px !important;        /* très proche de la vidéo */
    padding-top: 0 !important;
    background: transparent !important;/* retire tout aplat gris éventuel */
  }

  /* 5) Footer plus petit et sans “slider” horizontal */
  #site-footer{
    font-size: 12px !important;        /* texte plus petit */
  }
  #site-footer .container{
    flex-wrap: wrap !important;         /* autorise le retour à la ligne si nécessaire */
    gap: 10px !important;
    overflow-x: visible !important;     /* pas de scroll horizontal */
  }
  #site-footer .footer-nav{
    gap: 10px !important;
    flex-wrap: wrap !important;         /* évite la contrainte d’une seule ligne */
  }
  #site-footer .container p,
  #site-footer .footer-nav a{
    white-space: normal !important;     /* plus de “nowrap” → pas de slider */
  }
}
/* ==========================================================
   📱 MOBILE — HERO + ABOUT (final fine tuning)
   ========================================================== */
@media (max-width: 768px){

  /* --- HERO : descendre encore et ajouter un léger dégradé bleu marine --- */
  #home .hero-overlay{
    justify-content: flex-end;
    padding-bottom: 2% !important;  /* encore plus bas */
    position: relative;
  }

  /* Dégradé bleu-marine discret au bas de la vidéo */
  #home::after{
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 25%;
    background: linear-gradient(to top, rgba(10,20,60,0.45), rgba(10,20,60,0));
    pointer-events: none;
    z-index: 1;
  }

  /* --- ABOUT : centrer “What is your favorite?” et le remettre en blanc --- */
  .about-video-text{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 2;
  }
  .about-video-text h2{
    color: #fff !important;
    text-shadow: 0 4px 10px rgba(0,0,0,0.6);
    font-size: 1.3rem;
    margin: 0;
  }

  /* --- ABOUT : supprimer l’espace gris entre la vidéo et le compteur --- */
  .about-video{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .ig-counter{
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
  }

  /* Optionnel : petit ajustement pour garder un flux harmonieux */
  #about{
    background: #fff !important; 
    color: #111 !important;
  }
}
/* ==========================================================
   📱 MOBILE ONLY (≤768px) — FORCE OVERRIDES
   ========================================================== */
@media (max-width: 768px){

  /* HERO : descendre le bloc + dégradé bleu-marine au bas de la vidéo */
  #home.hero-fit{ position: relative !important; }
  #home.hero-fit .hero-video{
    position: relative !important;
    z-index: 0 !important;
  }
  #home.hero-fit .hero-overlay{
    position: absolute !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;   /* vers le bas */
    align-items: center !important;         /* centré horizontal */
    padding-bottom: 2% !important;          /* encore plus bas */
    transform: none !important;             /* pas de translateX qui saute avec la parallaxe */
    z-index: 2 !important;
    text-align: center !important;
  }
  /* dégradé discret bleu-marine collé au bas de la vidéo */
  #home.hero-fit::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 26% !important;
    background: linear-gradient(to top, rgba(10,20,60,0.45), rgba(10,20,60,0)) !important;
    pointer-events: none !important;
    z-index: 1 !important;  /* sous le texte (overlay=2) mais au-dessus de la vidéo (0) */
  }

  /* ABOUT : centrer “What is your favorite?” au milieu de la vidéo en blanc */
  #about .about-video{ position: relative !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
  #about .about-video-el{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;      /* ratio complet */
    object-fit: contain !important;
    background: #000 !important;  /* si ta vidéo a des bandes */
  }
  #about .about-video-text{
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 2 !important;
  }
  #about .about-video-text h2{
    color: #fff !important;
    text-shadow: 0 4px 10px rgba(0,0,0,0.6) !important;
    margin: 0 !important;
  }

  /* Supprimer l’espace gris entre la vidéo About et le compteur */
  #about .ig-counter,
  .ig-counter{
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
  }

  /* (au cas où) enlever toute marge haute du bloc “About Piralou” */
  #about .about-content{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Centrer “Available Prints” sur mobile aussi */
  #gallery .container{ text-align: center !important; }
  #gallery .container h2{
    display: inline-block !important;
    margin: 0 auto 1rem auto !important;
    text-align: center !important;
  }
}
/* ==========================================================
   📱 MOBILE — final fine tuning (Hero + About)
   ========================================================== */
@media (max-width: 768px){

  /* 1️⃣ HERO : dégradé bleu-marine plus haut et plus opaque */
  #home.hero-fit::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 40% !important;  /* plus haut (était 25%) */
    background: linear-gradient(to top, rgba(10,20,60,0.8), rgba(10,20,60,0)) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* 2️⃣ ABOUT : centrer parfaitement “What is your favorite?” dans la vidéo */
  #about .about-video{
    position: relative !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  #about .about-video-el{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: #000 !important;
  }
  #about .about-video-text{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 2 !important;
  }
  #about .about-video-text h2{
    color: #fff !important;
    font-size: 1.3rem !important;
    text-shadow: 0 4px 10px rgba(0,0,0,0.6) !important;
    margin: 0 !important;
  }

  /* 3️⃣ Supprimer tout espace entre la vidéo About et le compteur */
  .ig-counter,
  #about .ig-counter{
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
  }

  /* Petit ajustement global pour lisser la transition */
  #about{
    background: #fff !important;
    color: #111 !important;
  }
}
/* =========================
   📱 MOBILE — ABOUT hard fixes
   ========================= */
@media (max-width: 768px){

  /* 0) Pull "About Piralou" closer to the video */
  #about .about-content{
    margin-top: 6px !important;
    padding-top: 0 !important;
  }

  /* 1) About video wrapper: no extra space, acts as positioning context */
  #about .about-video{
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;         /* kills baseline grey gaps */
    background: transparent !important; /* ensure no grey background */
  }

  /* 2) Video itself: full width, keep full frame, no cropping */
  #about .about-video-el{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: #000 !important;       /* if letterboxing occurs, it’s black */
    margin: 0 !important;
    border: 0 !important;
    vertical-align: top !important;     /* avoid inline gaps */
  }

  /* 3) Center “What is your favorite?” in the middle of the video */
  #about .about-video-text{
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 2 !important;
    margin: 0 !important; padding: 0 !important;
  }
  #about .about-video-text h2{
    color: #fff !important;
    margin: 0 !important;
    text-shadow: 0 4px 10px rgba(0,0,0,.6) !important;
  }

  /* 4) Remove ALL space between the video and the counter */
  #about .about-video + .ig-counter{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #about .ig-counter{
    background: transparent !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Safety: kill generic section spacing that might add grey area */
  #about{ background: #fff !important; color:#111 !important; }
  #about .container{ margin:0 !important; padding:0 !important; }
}
/* ==========================================================
   📱 MOBILE — ABOUT fixes (centre texte + supprime l'espace)
   ========================================================== */
@media (max-width: 768px){

  /* 0) Titre/texte "About Piralou" un peu plus haut */
  #about .about-content{
    margin-top: 8px !important;
    padding-top: 0 !important;
  }
  #about .about-content h1{ margin-top: 0 !important; }
  #about .about-content p { margin-top: .4em !important; }

  /* 1) Le conteneur vidéo ne crée aucun "gap" */
  #about .about-video{
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;              /* élimine le gap baseline */
    background: transparent !important;
  }

  /* 2) La vidéo garde tout son cadre, pleine largeur */
  #about .about-video-el{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;         /* pas de crop */
    background: #000 !important;            /* si bandes, elles sont noires */
    margin: 0 !important;
    border: 0 !important;
    vertical-align: top !important;
  }

  /* 3) "What is your favorite?" centré au milieu de la vidéo */
  #about .about-video-text{
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 2 !important;
    margin: 0 !important; padding: 0 !important;
  }
  #about .about-video-text h2{
    color: #fff !important;
    text-shadow: 0 4px 10px rgba(0,0,0,.6) !important;
    font-size: 1.25rem !important;
    margin: 0 !important;
  }

  /* 4) Compteur collé juste sous la vidéo (zéro espace gris) */
  #about .about-video + .ig-counter{
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
  }
  #about .ig-counter{
    margin-top: 0 !important;    /* ceinture et bretelles */
    padding-top: 0 !important;
    background: transparent !important;
  }
}
/* ==========================================================
   📱 MOBILE — About: center text + remove grey gap (final)
   ========================================================== */
@media (max-width: 768px){

  /* About on white */
  #about{ background:#fff !important; color:#111 !important; }

  /* Pull the "About Piralou" block closer */
  #about .about-content{
    margin-top: 8px !important;
    padding-top: 0 !important;
  }

  /* Kill the forced tall box & any baseline gap */
  #about .about-video{
    position: relative !important;
    min-height: auto !important;   /* was 78vh */
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;     /* fixes tiny inline gaps */
    background: transparent !important;
  }

  /* Make the video a normal responsive block */
  #about .about-video-el{
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: #000 !important;   /* letterbox = black, not grey */
    margin: 0 !important;
    border: 0 !important;
    vertical-align: top !important;
  }

  /* Center "What is your favorite?" exactly in the video */
  #about .about-video-text{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;       /* override older bottom:10% */
    width: 100% !important;
    text-align: center !important;
    z-index: 2 !important;
    margin: 0 !important; padding: 0 !important;
  }
  #about .about-video-text h2{
    color: #fff !important;
    text-shadow: 0 4px 10px rgba(0,0,0,.6) !important;
    margin: 0 !important;
  }

  /* Remove ALL space after the video → counter sits right under it */
  #about .about-video + .ig-counter,
  #about .ig-counter{
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
  }
}
/* --- Supprime complètement les boutons et menus des vidéos --- */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button,
video::-internal-media-controls-overlay-cast-button,
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* ==========================================================
   MOBILE TWEAKS (v03.1)
   ========================================================== */
@media (max-width: 768px) {

  /* 1️⃣ Un peu d'air au-dessus de "Available Prints" */
  #gallery h1,
  #gallery .section-title {
    margin-top: 6vh;   /* léger espace respirant */
  }

  /* 2️⃣ Marges autour du texte About (même logique que le footer) */
  #about .about-content {
    padding-left: 5vw;
    padding-right: 5vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* 3️⃣ Un peu d'air après la section About */
  #about {
    margin-bottom: 8vh;
  }
}
/* ==========================================================
   📱 MOBILE — Zoom de la vidéo Home (+25% hauteur)
   ========================================================== */
@media (max-width: 768px) {
  #home .hero-video,
  #home #bg-video {
    object-fit: cover !important;   /* on recadre plutôt que de laisser des bandes */
    transform: scale(1.25);         /* zoom visuel de +25% */
    transform-origin: center center;
    transition: transform 0.3s ease; /* fluide si resize ou rotation d’écran */
  }
}
/* ==========================================================
   📱 MOBILE — zoom vidéo home + espacement galerie + marges About
   ========================================================== */
@media (max-width: 768px) {

  /* 1️⃣ Home video : zoom plus fort (~+50%) */
  #home .hero-video,
  #home #bg-video {
    object-fit: cover !important;   /* rempli l’écran sans bandes */
    transform: scale(1.5);          /* zoom plus important */
    transform-origin: center center;
    transition: transform 0.3s ease;
  }

  /* 2️⃣ Espace avant “Available Prints” */
  #gallery .container > h2 {
    margin-top: 8vh !important;     /* ajoute de l’air au-dessus du titre */
  }

  /* 3️⃣ Marges autour du texte About */
  #about .about-content {
    padding-left: 6vw !important;
    padding-right: 6vw !important;
    padding-bottom: 6vw !important; /* espace sous le texte */
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }
}