/* ==========================================================================
   Commande Tirage — styles front
   Fichier : assets/ctg.css
   ========================================================================== */

/* ------------------------------
   Filtres (catégories)
   ------------------------------ */
.ctg-filters{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 12px;
}
.ctg-filter{
  padding:6px 12px;
  border:1px solid #111; background:#fff; color:#111;
  border-radius:999px; cursor:pointer;
  font-weight:600; font-size:13px; line-height:1;
}
.ctg-filter.is-active{
  background:#111; color:#fff;
}

/* ------------------------------
   Layouts généraux
   ------------------------------ */
.ctg-gallery{ position:relative; }

/* GRID */
.ctg-gallery.layout-grid{
  display:grid;
}

/* MASONRY via colonnes CSS */
.ctg-gallery.layout-masonry{
  column-gap: var(--gap, 10px);
}
.ctg-gallery.layout-masonry .ctg-item{
  break-inside: avoid;
  margin: 0 0 var(--gap, 10px);
}

/* JUSTIFIED (ligne de hauteur fixe) */
.ctg-gallery.layout-justified{
  display:flex; flex-wrap:wrap;
  gap: var(--gap, 10px);
}
.ctg-gallery.layout-justified .ctg-item{
  margin:0; /* l’espacement est géré par gap */
}
.ctg-gallery.layout-justified .ctg-item img{
  height: var(--ctg-row, 220px);
  width:auto;
  object-fit: cover;
  display:block;
  border-radius:12px;
}

/* ------------------------------
   Items & images
   ------------------------------ */
.ctg-item{ position:relative; }
.ctg-item img{
  width:100%; height:auto; display:block;
  border-radius:12px;
}

/* Légende sous l’image */
.ctg-caption{
  margin-top:6px;
  font-size:13px; color:#222;
}

/* Caddy sous vignettes : caché (le caddy est dans la lightbox) */
.ctg-gallery .ctg-cart-btn{
  display:none !important;
}

/* ------------------------------
   Panneau off-canvas (commande)
   ------------------------------ */
.ctg-offcanvas{
  position:fixed; inset:0; z-index:9999;
  display:none;
}
.ctg-offcanvas.active{ display:block; }

.ctg-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.4);
  opacity:0; transition:opacity .25s;
}
.ctg-offcanvas.active .ctg-backdrop{ opacity:1; }

.ctg-panel{
  position:absolute; top:0; right:0;
  height:100%; width:360px; max-width:100%;
  background:#fff;
  box-shadow:-8px 0 24px rgba(0,0,0,.2);
  transform:translateX(100%);
  transition:transform .25s;
  padding:20px 18px;
}
.ctg-offcanvas.active .ctg-panel{ transform:none; }

.ctg-close{
  position:absolute; top:10px; right:12px;
  border:none; background:transparent;
  font-size:24px; line-height:1; cursor:pointer;
}

.ctg-title{
  margin:8px 0 16px;
  font-size:18px; font-weight:700;
}

.ctg-field{ margin-bottom:12px; }

.ctg-field label{
  display:block; font-weight:600; margin-bottom:6px;
}

.ctg-field select,
.ctg-field input[type="number"]{
  width:100%; padding:10px;
  border:1px solid #ddd; border-radius:8px;
  font-size:14px; background:#fff;
}

.ctg-submit{
  width:100%; padding:12px;
  border:none; border-radius:10px;
  background:#111; color:#fff;
  font-weight:700; cursor:pointer;
}

.ctg-feedback{
  margin-top:10px; font-size:13px; min-height:18px;
}

/* ------------------------------
   Lightbox Elementor — fond blanc
   + bouton caddy (icône grise) bas/droite
   ------------------------------ */

/* Forcer un fond blanc partout dans la lightbox */
.elementor-lightbox,
.elementor-lightbox .dialog-widget-content,
.elementor-lightbox .dialog-lightbox-message,
.elementor-lightbox .elementor-lightbox-item,
.elementor-lightbox .swiper-container,
.elementor-lightbox .swiper-wrapper,
.elementor-lightbox .swiper-slide{
  background:#fff !important;
}

/* Couleur des contrôles natifs */
.elementor-lightbox .dialog-close-button,
.elementor-lightbox .elementor-swiper-button{
  color:#111;
}

/* Barre conteneur du bouton (placée en bas à droite, sous la photo) */
.elementor-lightbox .ctg-lb-bar{
  position:absolute;
  right:24px; bottom:16px; left:auto; top:auto;
  display:flex; justify-content:flex-end;
  z-index:99999;
  pointer-events:none; /* clics traversants, sauf sur le bouton */
}

/* Bouton rond (icône seule) */
.elementor-lightbox .ctg-lb-btn{
  pointer-events:auto;
  width:44px; height:44px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff;
  border:1px solid #e5e5e5;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  text-decoration:none;
}

/* Icône caddy grise */
.elementor-lightbox .ctg-lb-btn svg{
  width:20px; height:20px;
  stroke:#8a8a8a; fill:none;
}

/* Hover */
.elementor-lightbox .ctg-lb-btn:hover{
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  border-color:#d9d9d9;
}

/* ------------------------------
   Petites adaptations responsive
   ------------------------------ */
@media (max-width: 480px){
  .ctg-panel{ width:92vw; }
  .elementor-lightbox .ctg-lb-bar{ right:16px; bottom:12px; }
  .elementor-lightbox .ctg-lb-btn{ width:42px; height:42px; }
}

/* ------------------------------
   Utilitaires (facultatifs)
   ------------------------------ */
:root{
  --gap: 10px; /* fallback pour Masonry */
}
/* ——————————— Lightbox (PhotoSwipe) thème ——————————— */
/* Couleur de fond (variable) */
.ctg-lb-theme .pswp__bg{ background: var(--ctg-lb-bg, #000); }

/* Couleur icônes (flèches/close) */
.pswp__button{ color: var(--ctg-lb-arrow, #fff); }
.pswp__icn{ stroke: currentColor; }

/* Bouton caddy en bas à droite dans la lightbox */
.ctg-pswp-cart{
  position: absolute;
  right: 16px; bottom: 16px;
  border: 1px solid var(--ctg-lb-arrow, #fff);
  background: rgba(255,255,255,0.08);
  color: var(--ctg-lb-arrow, #fff);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.ctg-pswp-cart i{ font-size: 16px; }

/* Responsive safety */
@media (max-width: 480px){
  .ctg-pswp-cart{ right: 10px; bottom: 10px; padding: 8px 12px; }
}