:root{
  --bg: #070707;
  --text: #ffffff;
  --muted: rgba(255,255,255,0.78);

  /* Premium beige / champagne */
  --accent: #d9b47b;
  --accent2:#8a6b3e;

  --shadow: 0 24px 80px rgba(0,0,0,0.55);
  --shadow2: 0 10px 30px rgba(0,0,0,0.35);

  --radius: 18px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a{ color:inherit; text-decoration:none; }
.container{ width:min(1180px, 92%); margin:0 auto; }
.page{ padding-top: 0; }

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding: 0.95rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color:#0b0b0b;
  font-weight: 950;
  box-shadow: 0 16px 45px rgba(217,180,123,0.18);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 20px 55px rgba(217,180,123,0.22);
}
.btn--ghost{
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow2);
}
.btn--small{ padding: .65rem .95rem; }
.btn--big{ padding: 1.05rem 1.25rem; font-size: 1.02rem; }
.btn--full{ width:100%; }

.centerBtn{
  display:flex;
  justify-content:center;
  margin-top: 1.3rem;
}

/* ===================== NAVBAR ===================== */
.navbar{
  position: sticky;
  top:0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(10,10,10,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0.9rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-weight: 950;
  letter-spacing: .6px;
}
.brand__logo{ font-size: 1.35rem; }
.brand__name{
  opacity:.98;
  font-size:.98rem;
  position:relative;
}
.brand__name::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width: 58%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity:.85;
}

.nav{ position:relative; }
.nav__links{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 1.05rem;
  margin:0;
  padding:0;
}
.nav__links a{
  color: rgba(255,255,255,0.82);
  font-weight: 750;
  padding: .25rem .25rem;
}
.nav__links a:hover{ color: #fff; }

.nav__active{
  color:#fff !important;
  position: relative;
}
.nav__active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .9;
}

.nav__toggle{
  width:46px; height:46px;
  display:none;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background: #fff;
  margin: 5px auto;
}

/* ===================== FLOATING CTA ===================== */
.floatingCTA{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}
.ctaBtn{
  display:flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(20,20,20,0.70);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
  font-weight: 950;
  min-width: 160px;
  transition: transform .12s ease, filter .12s ease;
}
.ctaBtn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.ctaBtn__small{
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  font-size: .88rem;
}
.ctaBtn--call{
  background: linear-gradient(135deg, rgba(217,180,123,0.95), rgba(138,107,62,0.95));
  color: #0b0b0b;
  border: 1px solid rgba(255,255,255,0.10);
}
.ctaBtn--call .ctaBtn__small{ color: rgba(0,0,0,0.70); }
.ctaBtn--wa{ background: rgba(255,255,255,0.09); }

/* ===================== HERO CINÉMATIQUE ===================== */
.heroCine{
  position: relative;
  min-height: 93vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.heroBg{
  position:absolute;
  inset:0;
  z-index: -1;
}
.heroBg__img{
  position:absolute;
  inset:-40px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  animation: heroSlide 18s infinite;
}
.heroBg__img--1{
  animation-delay: 0s;
}
.heroBg__img--2{
  animation-delay: 6s;
}
.heroBg__img--3{
  animation-delay: 12s;
}

/* ✅ Desktop : images ici (évite double téléchargement) */
@media (min-width: 761px){
  .heroBg__img--1{
    background-image: url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=2000&q=80");
  }
  .heroBg__img--2{
    background-image: url("https://images.unsplash.com/photo-1590725121839-892b458a74fe?auto=format&fit=crop&w=2000&q=80");
  }
  .heroBg__img--3{
    background-image: url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2000&q=80");
  }
}

@keyframes heroSlide{
  0%{ opacity: 0; transform: scale(1.08); }
  10%{ opacity: 1; }
  40%{ opacity: 1; transform: scale(1.12); }
  55%{ opacity: 0; }
  100%{ opacity: 0; }
}

.heroBg__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(217,180,123,0.16), transparent 60%),
    radial-gradient(700px 450px at 100% 0%, rgba(138,107,62,0.14), transparent 55%),
    linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.32) 55%, rgba(0,0,0,0.76) 100%);
}
.heroBg__grain{
  position:absolute;
  inset:-60px;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* bandeau Musso en bas à gauche */
.heroWrap{
  position: relative;
  min-height: 93vh;
  display:flex;
  align-items:flex-end;
  padding: 3.5rem 0 2.2rem;
}

.heroRibbon{
  width: min(720px, 100%);
  margin-left: 4.5rem;
  padding: 1.15rem 1.25rem 1.15rem;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(12,12,12,0.45);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden; /* pour l'effet lumière */
}

/* petite barre or en haut */
.heroRibbon::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 14px;
  width: 80px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .9;
}

.heroRibbon__brand{
  font-weight: 950;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.95);
  padding-top: .35rem;
}
.heroRibbon__brand span{
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.95));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}
.heroRibbon__line{
  margin-top: .35rem;
  color: rgba(255,255,255,0.78);
  font-weight: 750;
  font-size: .95rem;
}
.heroRibbon__actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top: 1rem;
}

/* Effet lumière premium (shimmer) */
.heroRibbon::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 55%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(217,180,123,0.00) 20%,
    rgba(217,180,123,0.22) 45%,
    rgba(255,255,255,0.16) 52%,
    rgba(217,180,123,0.22) 60%,
    rgba(217,180,123,0.00) 82%,
    transparent 100%
  );
  filter: blur(1px);
  opacity: 0.85;
  pointer-events: none;
  animation: ribbonShine 6.5s ease-in-out infinite;
}
@keyframes ribbonShine{
  0%{ left:-70%; opacity:0; }
  12%{ opacity:.85; }
  35%{ left:120%; opacity:.55; }
  100%{ left:120%; opacity:0; }
}
.heroRibbon:hover{
  box-shadow:
    0 24px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(217,180,123,0.18),
    0 0 40px rgba(217,180,123,0.12);
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* WOW : glow qui suit la souris + tilt */
.heroRibbon--wow{
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease;
}
.ribbonGlow{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 22px;
  background:
    radial-gradient(650px circle at var(--mx) var(--my),
      rgba(217,180,123,0.22),
      transparent 55%);
  opacity: .75;
  mix-blend-mode: screen;
}

/* cue scroll */
.scrollCue{
  position: absolute;
  left: 2rem;
  bottom: 2.2rem;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:.5rem;
  color: rgba(255,255,255,0.75);
  font-weight: 800;
}
.mouse{
  width: 32px;
  height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  display:grid;
  place-items:center;
}
.mouseDot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(217,180,123,0.95);
  animation: mouseDot 1.3s infinite;
}
@keyframes mouseDot{
  0%{ transform: translateY(-10px); opacity:.7; }
  60%{ transform: translateY(10px); opacity:1; }
  100%{ transform: translateY(-10px); opacity:.7; }
}

/* ===================== SECTIONS ===================== */
.section{ padding: 4rem 0; }
.section--alt{
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.section__head{ margin-bottom: 1.7rem; }
.section__head h2{
  margin: 0 0 .45rem;
  font-size: 2rem;
  letter-spacing: -0.6px;
}
.section__head h2::after{
  content:"";
  display:block;
  width: 62px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity:.9;
}
.section__head p{
  margin:0;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}

/* ===================== PAGE HERO ===================== */
.pageHero{
  padding: 3.5rem 0 1.6rem;
}
.pageHero h1{
  margin:0 0 .4rem;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 950;
  letter-spacing: -1px;
}
.pageHero p{
  margin:0;
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  max-width: 70ch;
}

/* ===================== CARDS ===================== */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.card{
  padding: 1.15rem 1.15rem 1.25rem;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow2);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(0,0,0,0.45);
}
.card__icon{
  font-size: 1.5rem;
  margin-bottom: .55rem;
}
.card h3{
  margin: .1rem 0 .4rem;
  font-weight: 950;
}
.card p{
  margin:0;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
}

/* ===================== WHY GRID ===================== */
.whyGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.whyCard{
  padding: 1.15rem;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow2);
}
.whyIcon{ font-size: 1.4rem; margin-bottom: .55rem; }
.whyTitle{ font-weight: 950; margin-bottom: .25rem; }
.whyText{ color: rgba(255,255,255,0.78); line-height: 1.55; }

/* ===================== MINI GALLERY ===================== */
.miniGallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.2rem;
}
.miniShot{
  position:relative;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,0.12);
  overflow:hidden;
  min-height: 190px;
  background-size: cover;
  background-position:center;
  box-shadow: var(--shadow2);
  transform: translateZ(0);
  transition: transform .12s ease;
}
.miniShot:hover{ transform: translateY(-2px); }
.miniShot__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.75) 100%);
}
.miniShot__txt{
  position:absolute;
  left: 14px;
  bottom: 14px;
  font-weight: 950;
  letter-spacing: .3px;
}

/* ===================== ABOUT ===================== */
.aboutGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  align-items:center;
}
.aboutMedia{
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 420px;
}
.aboutImage{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: contrast(1.05) saturate(1.03);
  animation: slowZoom 12s ease-in-out infinite;
  background-image: url("https://images.unsplash.com/photo-1600566753051-f0fbcf9f8ae0?auto=format&fit=crop&w=2000&q=80");
}
@keyframes slowZoom{
  0%,100%{ transform: scale(1.06); }
  50%{ transform: scale(1.12); }
}
.aboutGlow{
  position:absolute;
  inset:-120px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(217,180,123,0.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(138,107,62,0.16), transparent 60%);
  filter: blur(10px);
  opacity: .9;
  pointer-events:none;
}
.aboutFloat{
  position:absolute;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
  padding: .75rem .85rem;
  font-weight: 950;
}
.aboutFloat__top{ font-size: .98rem; }
.aboutFloat__sub{
  margin-top:.2rem;
  color: rgba(255,255,255,0.78);
  font-weight: 700;
  font-size: .9rem;
}
.aboutFloat--1{ left: 18px; bottom: 18px; }
.aboutFloat--2{ right: 18px; top: 18px; }

.aboutContent h3{
  margin: 0 0 .55rem;
  font-size: 1.35rem;
  letter-spacing: -0.3px;
}
.aboutContent p{
  margin: 0 0 1rem;
  color: rgba(255,255,255,0.80);
  line-height: 1.75;
}
.aboutHighlights{
  display:grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin: 1rem 0;
}
.hi{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  padding: .9rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow2);
}
.hi__icon{ font-size: 1.25rem; }
.hi__title{ font-weight: 950; }
.hi__txt{
  margin-top:.15rem;
  color: rgba(255,255,255,0.78);
  font-weight: 650;
  line-height: 1.55;
}

/* ===================== GALLERY ===================== */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.gItem{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  overflow:hidden;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: var(--shadow2);
}
.gItem:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(0,0,0,0.45);
}
.gItem__img{
  height: 190px;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
}
.gItem__info{ padding: .95rem 1rem; }
.gItem__title{ margin:0; font-weight: 950; }
.gItem__desc{
  margin:.35rem 0 0;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  font-size: .96rem;
}

/* ===================== BEFORE / AFTER ===================== */
.beforeAfter{
  position: relative;
  height: 460px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
  overflow:hidden;
  background: #111;
}
.beforeAfter__after,
.beforeAfter__before{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}
.beforeAfter__after{
  background-image: url("https://images.unsplash.com/photo-1523413651479-597eb2da0ad6?auto=format&fit=crop&w=2000&q=80");
}
.beforeAfter__before{
  background-image: url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2000&q=80");
  width: 50%;
}
.beforeAfter__label{
  position:absolute;
  top: 16px;
  padding: .45rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  font-weight: 900;
}
.beforeAfter__label--before{ left: 16px; }
.beforeAfter__label--after{ right: 16px; }

.beforeAfter__handle{
  position:absolute;
  top:0; bottom:0;
  left: 50%;
  width: 2px;
  cursor: ew-resize;
}
.baLine{
  position:absolute;
  left:0; top:0; bottom:0;
  width: 2px;
  background: rgba(217,180,123,0.95);
  box-shadow: 0 0 0 6px rgba(217,180,123,0.08);
}
.baKnob{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 54px; height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.55);
  display:grid;
  place-items:center;
  font-weight: 950;
  box-shadow: var(--shadow2);
}

/* ===================== CONTACT ===================== */
.contact{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  align-items:start;
}
.form{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  padding: 1.2rem;
  box-shadow: var(--shadow2);
}
.form__row{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin-bottom: .9rem;
}
label{
  color: rgba(255,255,255,0.85);
  font-weight: 800;
}
input, textarea{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  padding: .85rem .9rem;
  color: #fff;
  outline:none;
}
textarea{ min-height: 120px; resize: vertical; }
input:focus, textarea:focus{
  border-color: rgba(217,180,123,0.65);
  box-shadow: 0 0 0 4px rgba(217,180,123,0.12);
}
.form__hint{
  margin: .8rem 0 0;
  color: rgba(255,255,255,0.75);
  min-height: 1.2em;
}

.infoBox{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  padding: 1.2rem;
  box-shadow: var(--shadow2);
}
.infoBox h3{ margin: .2rem 0 .6rem; }
.infoBox p{ margin:.35rem 0; color: rgba(255,255,255,0.78); }
.divider{
  height:1px;
  background: rgba(255,255,255,0.10);
  margin: 1rem 0;
}
.map{
  overflow:hidden;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.map iframe{ width:100%; height: 220px; border:0; }

/* ===================== FOOTER ===================== */
.footer{
  border-top:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.55);
  padding: 1.6rem 0;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  flex-wrap:wrap;
  color: rgba(255,255,255,0.75);
}
.footer__links{ display:flex; align-items:center; gap:.6rem; }
.footer__links a:hover{ color: #fff; }

/* ===================== MODAL ===================== */
/* (MODIF PREMIUM : photo entière + fond flouté uniquement pour le modal galerie #modal) */
.modal{ position: fixed; inset: 0; display:none; z-index: 999; }
.modal.open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.70); }

.modal__content{
  position: relative;
  width: min(900px, 92vw);
  margin: 5vh auto;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(10,10,10,0.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* ✅ seulement pour la galerie */
#modal .modal__content{
  display:flex;
  flex-direction: column;
  --modal-bg: none;
}

/* ✅ fond flouté premium derrière l’image (évite bordure noire) */
#modal .modal__content::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--modal-bg);
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.45);
  transform: scale(1.25);
  z-index: 0;
  pointer-events:none;
}

.modal__close{
  position:absolute; top: 10px; right: 10px;
  width: 44px; height: 44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 1.1rem;
  cursor:pointer;
  z-index: 2;
}

/* ✅ image entière + centrée */
#modalImg{
  display:block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(90vh - 110px);
  margin: 0 auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.modal__caption{
  padding: .9rem 1rem;
  color: rgba(255,255,255,0.78);
  position: relative;
  z-index: 1;
}

/* mobile : un poil plus compact */
@media (max-width: 760px){
  #modalImg{
    max-height: calc(85vh - 110px);
  }
}

/* ===================== REVEAL ===================== */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}

/* ===================== RESPONSIVE ===================== */
/* Tablette : 2 colonnes */
@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .whyGrid{ grid-template-columns: repeat(2, 1fr); }
  .miniGallery{ grid-template-columns: repeat(2, 1fr); }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .contact{ grid-template-columns: 1fr; }
  .aboutGrid{ grid-template-columns: 1fr; }
  .aboutMedia{ min-height: 360px; }
}

/* Mobile : 1 colonne */
@media (max-width: 580px){
  .cards{ grid-template-columns: 1fr; }
  .whyGrid{ grid-template-columns: 1fr; }
  .miniGallery{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr; }
}

/* ===================== MOBILE (≤ 760px) ===================== */
@media (max-width: 760px){

  /* NAVBAR */
  .navbar{ padding-top: env(safe-area-inset-top); }
  .nav__inner{ padding: .65rem 0; }
  .brand{ gap: .55rem; }
  .brand__name{ font-size: .92rem; letter-spacing: .4px; }
  .brand__logo img{ width: 36px; height: 36px; }

  .nav__toggle{ display: block; width: 44px; height: 44px; }

  .nav__links{
    position: fixed;
    top: 58px;
    left: 12px;
    right: 12px;
    width: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: .8rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(10,10,10,0.92);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    z-index: 49;
  }
  .nav__links.open{ display: flex; }
  .nav__links li a{
    display: block;
    padding: .85rem .9rem;
    border-radius: 14px;
  }
  .nav__links li a:hover{ background: rgba(255,255,255,0.06); }

  /* SECTIONS */
  .section{ padding: 3.2rem 0; }
  .pageHero{ padding: 2.8rem 0 1.2rem; }
  .pageHero h1{ font-size: 1.9rem; line-height: 1.1; }
  .pageHero p{ font-size: 1rem; line-height: 1.65; }

  /* HERO CINÉMATIQUE */
  .heroCine{ position: relative; z-index: 0; min-height: 93svh; }
  .heroBg{ position: absolute; inset: 0; z-index: 0; }
  .heroWrap{
    position: relative;
    z-index: 2;
    min-height: 93svh;
    padding: calc(4.2rem + env(safe-area-inset-top)) 0 calc(6.8rem + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 1rem;
  }

  .heroBg__img{
    inset: 0;
    transform: none;
    background-size: cover;
    background-repeat: no-repeat;
    animation: heroSlideMobile 18s infinite;
    will-change: opacity;
  }
  @keyframes heroSlideMobile{
    0%{ opacity: 0; }
    10%{ opacity: 1; }
    40%{ opacity: 1; }
    55%{ opacity: 0; }
    100%{ opacity: 0; }
  }
  .heroBg__img--1{
    background-image: url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1200&q=70");
    animation-delay: 0s;
    background-position: 50% 40%;
  }
  .heroBg__img--2{
    background-image: url("https://images.unsplash.com/photo-1590725121839-892b458a74fe?auto=format&fit=crop&w=1200&q=70");
    animation-delay: 6s;
    background-position: 50% 40%;
  }
  .heroBg__img--3{
    background-image: url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1200&q=70");
    animation-delay: 12s;
    background-position: 50% 45%;
  }

  .heroBg__grain{ opacity: .06; }
  .heroBg__overlay{
    background:
      radial-gradient(900px 520px at 20% 15%, rgba(217,180,123,0.12), transparent 60%),
      linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.82) 100%);
  }

  .heroRibbon{ width: 100%; margin-left: 0; border-radius: 18px; padding: 1.05rem; }
  .heroRibbon__actions{ width: 100%; flex-direction: column; gap: .55rem; }
  .heroRibbon__actions .btn{ width: 100%; }
  .scrollCue{ display: none; }

  /* FLOATING CTA */
  body{ padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .floatingCTA{ left: 12px; right: 12px; bottom: 12px; flex-direction: row; gap: 10px; }
  .ctaBtn{ flex: 1; min-width: auto; align-items: center; text-align: center; padding: 10px 12px; border-radius: 14px; }
  .ctaBtn__small{ display: none; }

  /* GRILLES */
  .cards, .whyGrid, .miniGallery, .gallery{ gap: .85rem; }
  .card, .whyCard{ padding: 1rem; border-radius: 16px; }
}

@media (max-width: 1100px){
  .scrollCue{ display: none; }
}

/* Accessibilité : réduire animations */
@media (prefers-reduced-motion: reduce){
  .heroBg__img{ animation: none !important; opacity:1 !important; }
  .heroRibbon::after{ animation:none !important; opacity:.25 !important; }
  .mouseDot{ animation:none !important; }
  .aboutImage{ animation:none !important; }
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
}

/* Badge premium au-dessus du nom */
.heroRibbon__kicker{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .7rem;
  border-radius: 999px;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(217,180,123,0.22);
  box-shadow: 0 16px 45px rgba(0,0,0,0.25);

  color: rgba(255,255,255,0.88);
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .2px;
  margin-bottom: .55rem;
}

/* petit point doré (premium) */
.heroRibbon__kicker::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d9b47b, #8a6b3e);
  box-shadow: 0 0 0 6px rgba(217,180,123,0.10);
}

/* Bouton itinéraire sur la carte */
.mapWrap{
  position: relative;
}

.mapRouteBtn{
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: .65rem .9rem;
  border-radius: 999px;
  box-shadow: 0 16px 45px rgba(0,0,0,0.35);
}

/* ===================== FOOTER PREMIUM (nouvelle mise en page) ===================== */
.footer{
  border-top:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.55);
  padding: 2rem 0 1.4rem;
}

.footerGrid{
  display:grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 1.2rem;
  align-items:start;
}

.footerTitle{
  font-weight: 950;
  letter-spacing: .8px;
  margin: 0 0 .55rem;
}

.footerDesc{
  margin: 0;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  max-width: 46ch;
}

.footerLabel{
  font-weight: 900;
  color: rgba(255,255,255,0.88);
  margin: 0 0 .7rem;
}

.footerNav,
.footerContact{
  display:flex;
  flex-direction: column;
  gap: .45rem;
}

.footerNav a,
.footerContact a{
  color: rgba(255,255,255,0.78);
  font-weight: 750;
}

.footerNav a:hover,
.footerContact a:hover{
  color:#fff;
}

.footerContact span{
  color: rgba(255,255,255,0.75);
  font-weight: 650;
  line-height: 1.5;
}

.footerBottom{
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: .8rem;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.70);
}

@media (max-width: 980px){
  .footerGrid{
    grid-template-columns: repeat(2, 1fr);
  }
  .footerDesc{
    max-width: 65ch;
  }
}

@media (max-width: 580px){
  .footerGrid{ grid-template-columns: 1fr; }
}

/* =====================
   REALISATIONS — UPGRADE SAFE (uniquement cette page)
===================== */

.page-realisations .reaControls{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow2);
}

.page-realisations .reaKicker{
  display:inline-flex;
  align-items:center;
  gap: .45rem;
  padding: .36rem .7rem;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .4px;
  font-size: .82rem;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(217,180,123,0.18);
}

.page-realisations .reaKicker::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(217,180,123,0.10);
}

.page-realisations .reaHint{
  margin-top: .55rem;
  color: rgba(255,255,255,0.75);
  font-weight: 650;
}

/* ====== GALLERY PREMIUM MOSAIQUE ====== */
.page-realisations .gallery--premium{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

/* chaque carte */
.page-realisations .gallery--premium .gItem{
  grid-column: span 4;
  border-radius: 22px;
  overflow:hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 22px 70px rgba(0,0,0,0.45);
  transform: translateZ(0);
}

/* image plus grande + effet premium */
.page-realisations .gallery--premium .gItem__img{
  height: 255px;
  transform: scale(1.03);
  transition: transform .28s ease, filter .28s ease;
  filter: saturate(1.06) contrast(1.06);
}

/* overlay sombre + texte par-dessus */
.page-realisations .gallery--premium .gItem__info{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.82) 100%);
}

/* petite ligne dorée */
.page-realisations .gallery--premium .gItem__info::before{
  content:"";
  display:block;
  width: 62px;
  height: 3px;
  border-radius: 999px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .9;
}

.page-realisations .gallery--premium .gItem__title{
  margin:0;
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 1.05rem;
}

.page-realisations .gallery--premium .gItem__desc{
  margin: 6px 0 0;
  color: rgba(255,255,255,0.78);
  font-weight: 650;
  line-height: 1.4;
  font-size: .92rem;
}

.page-realisations .gallery--premium .gItem:hover .gItem__img{
  transform: scale(1.10);
  filter: saturate(1.12) contrast(1.08);
}

.page-realisations .gallery--premium .gItem:hover{
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
}

/* MOSAIQUE "WAOUH" sans JS */
.page-realisations .gallery--premium .gItem:nth-child(1){
  grid-column: span 8;
}
.page-realisations .gallery--premium .gItem:nth-child(1) .gItem__img{
  height: 340px;
}

.page-realisations .gallery--premium .gItem:nth-child(4){
  grid-column: span 8;
}
.page-realisations .gallery--premium .gItem:nth-child(4) .gItem__img{
  height: 340px;
}

/* responsive */
@media (max-width: 980px){
  .page-realisations .reaControls{
    flex-direction: column;
    align-items:flex-start;
  }

  .page-realisations .gallery--premium{
    grid-template-columns: 1fr;
  }
  .page-realisations .gallery--premium .gItem{
    grid-column: auto;
  }
  .page-realisations .gallery--premium .gItem__img{
    height: 230px;
  }
}

/* ✅ HERO IMAGE uniquement sur la page Services */
.page-services .pageHero{
  position: relative;
  overflow: hidden;
}

.page-services .pageHero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1600&q=80");
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  z-index: 0;
}

.page-services .pageHero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.88), rgba(0,0,0,0.65));
  z-index: 1;
}

.page-services .pageHero .container{
  position: relative;
  z-index: 2;
}

/* =========================
  AVANT / APRÈS (PREMIUM)
========================= */

.beforeAfter{
  position: relative;
  width: 100%;
  height: min(70vh, 520px);
  border-radius: 18px;
  overflow: hidden;
  background: #0d0f14;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}

/* Sur mobile, on garde un bon ratio */
@media (max-width: 700px){
  .beforeAfter{
    height: 360px;
    border-radius: 16px;
  }
}

/* ✅ IMAGES : tu remplaceras ensuite par tes vraies photos */
.beforeAfter__after,
.beforeAfter__before{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* AFTER = photo "après" */
.beforeAfter__after{
  background-image: url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1600&q=80");
  filter: saturate(1.05) contrast(1.05);
}

/* BEFORE = photo "avant" (au dessus, coupée avec width en JS) */
.beforeAfter__before{
  background-image: url("https://images.unsplash.com/photo-1590725121839-892b458a74fe?auto=format&fit=crop&w=1600&q=80");
  width: 50%;
  filter: saturate(0.90) contrast(0.95);
}

/* Petit overlay sombre premium (lisibilité) */
.beforeAfter::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(70% 70% at 50% 35%, rgba(0,0,0,.20), rgba(0,0,0,.55));
  pointer-events:none;
}

/* Labels AVANT / APRÈS */
.beforeAfter__label{
  position: absolute;
  top: 18px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  z-index: 4;
}

.beforeAfter__label--before{ left: 18px; }
.beforeAfter__label--after{ right: 18px; }

/* Handle */
.beforeAfter__handle{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 100%;
  cursor: ew-resize;
  z-index: 5;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Ligne verticale */
.baLine{
  position:absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 0 0 1px rgba(0,0,0,.30);
}

/* Bouton rond */
.baKnob{
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  color: #111;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 35px rgba(0,0,0,.40);
  border: 1px solid rgba(0,0,0,.10);
}

.beforeAfter:hover .baKnob{
  transform: scale(1.05);
  transition: transform .18s ease;
}

/* Bonus : petit effet "glow" sur le handle */
.beforeAfter__handle::before{
  content:"";
  position:absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.20), transparent 65%);
  opacity: .55;
  pointer-events:none;
}

/* =====================
   FOOTER LEGAL LINKS
===================== */
.footerLegal{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
}

.footerLegal__link{
  color: rgba(255,255,255,0.72);
  font-weight: 750;
}

.footerLegal__link:hover{
  color:#fff;
}

/* ✅ uniquement pour la popup "legal" */
#legalModal .modal__content{
  max-height: 90vh;
  overflow: auto;
}
/* =====================
   MODAL GALLERY PREMIUM (mini-album)
   ✅ miniatures + prev/next + fond flouté premium
===================== */

.modal__media{
  position: relative;
  overflow: hidden;
  background: rgba(10,10,10,0.92);
}

/* Fond flouté de la photo (premium) */
.modal__media::before{
  content:"";
  position:absolute;
  inset:-20px;
  background-image: var(--modalBg);
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(1.08);
  transform: scale(1.15);
  opacity: .35;
  pointer-events:none;
}

/* Légère vignette pour la lisibilité */
.modal__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(70% 65% at 50% 40%, rgba(0,0,0,.15), rgba(0,0,0,.55));
  pointer-events:none;
}

/* Image principale : entière, centrée, premium */
.modal__media img,
#modalImg{
  position: relative;
  z-index: 2;
  width: 100%;
  max-height: 72vh;
  height: auto;
  object-fit: contain;
  display:block;
}

/* Boutons prev/next */
.modalNav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.95);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index: 4;
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 45px rgba(0,0,0,0.35);
  font-size: 28px;
  line-height: 1;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.modalNav:hover{
  transform: translateY(-50%) scale(1.03);
  filter: brightness(1.06);
  background: rgba(0,0,0,0.45);
}
.modalNav--prev{ left: 10px; }
.modalNav--next{ right: 10px; }

@media (max-width: 760px){
  .modalNav{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 26px;
  }
  .modalNav--prev{ left: 8px; }
  .modalNav--next{ right: 8px; }
}

/* Bande de miniatures */
.modalThumbs{
  display:flex;
  gap: 10px;
  padding: 12px 12px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
}
.modalThumbs::-webkit-scrollbar{ height: 8px; }
.modalThumbs::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
}

.modalThumb{
  flex: 0 0 auto;
  width: 92px;
  height: 60px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: .70;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform .12s ease, opacity .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.modalThumb:hover{
  transform: translateY(-1px);
  opacity: .92;
}
.modalThumb.is-active{
  opacity: 1;
  border-color: rgba(217,180,123,0.75);
  box-shadow: 0 16px 45px rgba(217,180,123,0.12), 0 10px 30px rgba(0,0,0,0.35);
}

@media (max-width: 760px){
  .modalThumb{
    width: 78px;
    height: 52px;
    border-radius: 12px;
  }
}
/* ================================
   FIX MINI-ALBUM (MODAL GALLERY)
   - centrage stable
   - croix toujours cliquable
   - boutons prev/next premium
================================= */

#modal .modal__content{
  display: flex;
  flex-direction: column;
}

/* zone image = centrée + fond premium (évite l'effet “bande noire bizarre”) */
#modal .modalMedia{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 52vh;
  background: radial-gradient(70% 70% at 50% 40%, rgba(255,255,255,0.06), rgba(0,0,0,0.55));
}

/* Hauteur fixe : la zone image ne bouge pas selon l'orientation */
#modal .modal__content{
  width: min(900px, 92vw);
}

#modal #modalImg{
  display: block !important;
  width: 100% !important;
  height: min(560px, 65vh) !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #0a0a0a;
}

/* croix au-dessus de tout */
#modal .modal__close{
  z-index: 60;
}

/* boutons navigation */
#modal .modalNavBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 55;
}

#modal .modalNavBtn:hover{ filter: brightness(1.08); }

#modal .modalNavBtn--prev{ left: 12px; }
#modal .modalNavBtn--next{ right: 12px; }

#modal .modalNavBtn:disabled{
  opacity: .35;
  cursor: default;
}

@media (max-width: 760px){
  #modal #modalImg{
    height: min(420px, 62vh) !important;
    margin: auto !important;
    display: flex !important;
    align-self: center !important;
  }
  #modal .modal__content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70vh;
  }
  #modal .modalNavBtn{ width: 42px; height: 42px; }
}
/* ================================
   FIX MOBILE - RÉALISATIONS
   (évite que la mosaïque "span 8" casse la grille)
================================ */

@media (max-width: 980px){
  /* Empêche les colonnes fantômes */
  .page-realisations,
  .page-realisations .page,
  .page-realisations .section{
    overflow-x: hidden;
  }

  /* Force la grille en 1 colonne propre */
  .page-realisations .gallery--premium{
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }

  /* IMPORTANT : on annule le "WAOUH" (span 8) sur mobile */
  .page-realisations .gallery--premium .gItem:nth-child(1),
  .page-realisations .gallery--premium .gItem:nth-child(4){
    grid-column: auto !important;
  }

  /* Et on remet une hauteur normale (sinon ça fait des blocs énormes) */
  .page-realisations .gallery--premium .gItem:nth-child(1) .gItem__img,
  .page-realisations .gallery--premium .gItem:nth-child(4) .gItem__img{
    height: 230px !important;
  }
}
/* ===================== LOGO NAVBAR ===================== */
.brand__logo img{
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
}