/* ================================
   PALETTE
================================ */
:root{
  --bleu-marine:#1e3a5f;
  --navy:#001f3f;
  --ocre:#cc8b3c;
  --terre-sienne:#e97451;
  --gris-clair:#f5f5f5;
  --gris-moyen:#a0a0a0;
  --blanc:#ffffff;

  --gap:12px;
  --radius:10px;

  --page-bg:#f0ede7; /* fond doux global */
}

/* ================================
   RESET
================================ */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  background:var(--page-bg);
  color:var(--bleu-marine);
  line-height:1.6;
}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;color:var(--navy);margin-bottom:1rem}
h1{font-size:2.5rem}
h2{font-size:2rem}

/* ================================
   LAYOUT
================================ */
.container{max-width:1200px;margin:0 auto;padding:2rem}

/* ================================
   HEADER / NAV
================================ */
header{
  background:transparent;
  color:var(--blanc);
  padding:1rem 0;
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  box-shadow:none;
}
nav ul{list-style:none;display:flex;justify-content:center;gap:2rem}
nav a, header nav a{
  color:#fff !important;text-decoration:none;font-weight:500;
  transition:color .3s; text-shadow:0 0 10px rgba(0,0,0,.7);
}
nav a:hover{color:#e2e2e2 !important}
main{margin-top:0}

/* ================================
   HERO (ancien bleu — conservé si besoin)
================================ */
.hero{
  text-align:center;padding:6rem 2rem;
  background:linear-gradient(135deg,var(--navy) 0%,var(--bleu-marine) 100%);
  color:var(--blanc);margin-bottom:3rem;
}
.hero h1{font-size:3.5rem;margin-bottom:1rem;color:var(--blanc)}
.hero .subtitle{font-size:1.2rem;margin-bottom:2rem;opacity:.9}
.hero-buttons{display:flex;gap:1rem;justify-content:center}

/* ================================
   HERO PHOTO (accueil)
================================ */
.hero-photo{
  width:100%;
  aspect-ratio:5659/2137;
  min-height:clamp(260px,38vw,520px);
  background-image:var(--hero-img);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  position:relative;margin-bottom:3rem;
}
.hero-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,.15) 40%,rgba(0,0,0,.10) 100%);
  text-align:center;
}
.hero-photo h1,.hero-photo .subtitle{
  color:#fff !important;text-shadow:0 2px 12px rgba(0,0,0,.7);
}

/* ✅ Boutons du hero — grands et cohérents partout */
.hero-photo .hero-buttons .btn-oct,
.hero-photo .hero-buttons .btn-small{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:1rem 2.2rem !important;
  font-size:1.05rem !important;
  border-radius:12px !important;
  border:2px solid rgba(255,255,255,.95) !important;
  background:rgba(255,255,255,.15) !important;
  color:#fff !important;
  transition:all .3s ease;
  text-decoration:none !important;
}
.hero-photo .hero-buttons .btn-oct:hover,
.hero-photo .hero-buttons .btn-small:hover{
  background:rgba(255,255,255,.30) !important;
  transform:translateY(-2px);
  text-decoration:none !important;
}

/* 🔒 Anti-soulignement à 100% (tous les états du lien) */
.hero-photo .hero-buttons a,
.hero-photo .hero-buttons a:link,
.hero-photo .hero-buttons a:visited,
.hero-photo .hero-buttons a:hover,
.hero-photo .hero-buttons a:active,
.hero-photo .hero-buttons .btn-oct,
.hero-photo .hero-buttons .btn-small{
  text-decoration:none !important;
  -webkit-text-decoration-skip: objects;
  text-underline-offset: 0;
}

/* ================================
   ACCUEIL — CATÉGORIES (70% centrée, 3 par ligne)
================================ */
.home-cats{
  padding: 28px 0 44px;
}

.cats-title{
  text-align: center;
  margin-bottom: 16px;
}

/* Conteneur centré à 70% de la fenêtre */
.cats-grid{
  width: 70%;
  margin: 0 auto;              /* centre horizontalement */
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;  /* mobile : 1 colonne */
}

/* ≥ 680px : 2 colonnes */
@media (min-width: 680px){
  .cats-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ≥ 980px : 3 colonnes (objectif) */
@media (min-width: 980px){
  .cats-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Cartes (inchangé, au cas où) */
.cat-card{
  display:block; text-decoration:none; color:inherit;
  background:transparent !important; border:none; box-shadow:none;
  border-radius:10px; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.cat-card .thumb{
  width:100%; aspect-ratio:1/1;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}
.cat-card .meta{
  padding: 12px 14px 14px; background: transparent;
}
.cat-card .meta h3{ margin:0 0 6px; font-size:1.1rem; color:var(--navy); }
.cat-card .meta p{ margin:0; font-size:.95rem; color:var(--gris-moyen); }


/* ================================
   GALERIE — GRID LTR (ordre gauche→droite)
================================ */
#gallery-title{text-align:center;margin-top:90px;margin-bottom:12px}

#gallery{
  width:100%;
  padding:0 12px;
  max-width:none !important;

  /* ✅ Grid au lieu de colonnes */
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
  /* Unité de base pour la hauteur “masonry” (tu peux ajuster 6–12px) */
  grid-auto-rows:8px;
}

/* 2 puis 3 colonnes */
@media (min-width:680px){
  #gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:980px){
  #gallery{ grid-template-columns: repeat(3, 1fr); }
}

/* Cartes */
.gallery .item{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  background:var(--page-bg) !important;
  /* ❌ pas de margin-bottom, c’est le gap du grid qui gère l’espacement */
  box-shadow:0 4px 12px rgba(0,0,0,0.08);line-height:0;
}

/* Images */
.gallery .item img{
  display:block;width:100%;height:auto !important;object-fit:cover;
  border-radius:inherit;transition:transform .25s ease;transform:translateZ(0);will-change:transform;
}
.gallery .item:hover img{transform:scale(1.02)}
.gallery .item{content-visibility:auto}

/* ================================
   PLACEHOLDER (skeleton)
================================ */
.ph{background:linear-gradient(90deg,#ececec,#f0ede7 30%,#ececec 60%);animation:sh 1.2s infinite}
@keyframes sh{0%{background-position:-200px 0}100%{background-position:200px 0}}

/* ================================
   LIGHTBOX
================================ */
.lb{position:fixed;inset:0;display:none;z-index:9999}
.lb.is-open{display:block}
.lb__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.92);cursor:zoom-out;z-index:0}
.lb__stage{position:absolute;inset:5% 6%;display:flex;align-items:center;justify-content:center;z-index:1}
@media (max-width:640px){.lb__stage{inset:10% 4%}}
#lb-img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.35);user-select:none}

/* ✅ Flèches — visibles, ocre, 25% puis 100% au hover (texte ‹ ›) */
.lb__nav{
  position:absolute;top:0;bottom:0;width:26vw;max-width:320px;min-width:140px;
  border:none;background:transparent;cursor:pointer;opacity:.25;transition:opacity .15s;z-index:2;
}
.lb__nav:hover{opacity:1}
.lb__nav--left{left:0}
.lb__nav--right{right:0}
.lb__nav::after{
  position:absolute;top:50%;transform:translateY(-50%);
  width:auto;height:auto;line-height:1;font-size:56px;font-weight:700;
  color:var(--ocre);text-shadow:0 2px 10px rgba(0,0,0,.5);pointer-events:none;content:'';
}
.lb__nav--left::after{content:'‹';left:24px}
.lb__nav--right::after{content:'›';right:24px}
.lb__nav[disabled]{display:none}

/* Bouton fermer */
.lb__close{
  position:absolute;top:14px;right:16px;width:44px;height:44px;
  border:none;border-radius:999px;background:rgba(255,255,255,.08);
  color:#fff;font-size:30px;line-height:44px;cursor:pointer;backdrop-filter:blur(4px);z-index:3;
}
.lb__close:hover{background:rgba(255,255,255,.16)}

/* ================================
   SCOPES DE PAGE
================================ */
.page-galerie{background:var(--page-bg)}
.page-galerie main{padding-top:10px}

/* ================================
   RESPONSIVE
================================ */
@media (max-width:768px){
  .hero h1{font-size:2.5rem}
  nav ul{gap:1rem}
}

/* Badges catégories (admin + site si besoin) */
.badge-cat{
  display:inline-block;
  padding:.25rem .55rem;
  font-size:.8rem;
  border-radius:999px;
  background:#cc8b3c;
  color:#fff;
}

/* ——— Copyright global ——— */
.site-copyright{
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: 9999;
  padding: 6px 10px;
  background: rgba(0,0,0,.35);
  color: #fff;
  border-radius: 8px;
  font-size: .9rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (max-width:640px){
  .site-copyright{ font-size:.8rem; right:10px; bottom:10px; }
}

/* Signature Lightbox — position gérée par JS */
.lb__wm{
  position:absolute;
  pointer-events:none;
  font-family:"Playfair Display", serif;
  font-style:italic;
  font-weight:600;
  line-height:1;
  color:#ffffff;                 /* recolorisé dynamiquement */
  text-shadow:0 2px 8px rgba(0,0,0,.55);
  white-space:nowrap;
  opacity:.95;
}


/* Galerie : pas d'ombre autour des vignettes, même au survol */
.gallery .item { box-shadow: none !important; }
.gallery .item:hover { box-shadow: none !important; }