/* Mariage Galerie — style.css
   Tous les sélecteurs sont préfixés #mg-wrap pour isoler du thème WordPress */

/* ── Reset ciblé : ne touche QUE les éléments du plugin ── */
#mg-wrap, #mg-wrap * { box-sizing: border-box !important; }
#mg-wrap p, #mg-wrap h2, #mg-wrap h3, #mg-wrap label,
#mg-wrap input, #mg-wrap button, #mg-wrap a { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Variables ── */
#mg-wrap {
  --mg-gold:    #c9a97a;
  --mg-gold-dk: #a8844f;
  --mg-brown:   #3a3530;
  --mg-muted:   #7a6e67;
  --mg-border:  #e8dfd4;
  --mg-bg:      #faf8f5;
  --mg-white:   #ffffff;
  --mg-serif:   Georgia, 'Times New Roman', serif;
  background:   #faf8f5 !important;
  color:        #3a3530 !important;
  max-width:    900px !important;
  margin:       0 auto !important;
  padding:      0 1rem 3rem !important;
  position:     relative !important;
}

/* ── Hero ── */
#mg-wrap .mg-hero { text-align:center; padding:2.5rem 1rem 2rem; border-bottom:1px solid #e8dfd4; margin-bottom:2.5rem; background:transparent !important; }
#mg-wrap .mg-hero-eyebrow { font-family:Georgia,serif !important; font-size:12px !important; letter-spacing:3px; text-transform:uppercase; color:#c9a97a !important; margin:0 0 .6rem; display:block; }
#mg-wrap .mg-hero-title { font-family:Georgia,serif !important; font-size:clamp(1.6rem,4vw,2.4rem) !important; font-weight:400 !important; color:#3a3530 !important; margin:0 0 .75rem; line-height:1.2; }
#mg-wrap .mg-hero-title em { font-style:italic; color:#c9a97a !important; }
#mg-wrap .mg-hero-desc { font-size:15px !important; color:#7a6e67 !important; line-height:1.65; max-width:500px; margin:0 auto; }

/* ── Card ── */
#mg-wrap .mg-card { background:#fff !important; border:1px solid #e8dfd4 !important; border-radius:12px !important; padding:1.5rem !important; margin-bottom:2.5rem !important; box-shadow:none !important; }

/* ── Zone dépôt ── */
#mg-wrap .mg-drop-zone { border:2px dashed #c9a97a !important; border-radius:10px !important; padding:2rem 1.5rem !important; text-align:center; background:#fefcf9 !important; cursor:pointer; margin-bottom:1.5rem !important; }
#mg-wrap .mg-drop-zone:hover, #mg-wrap .mg-drop-zone.mg-drag-over { background:#fdf7ee !important; border-color:#a8844f !important; }
#mg-wrap .mg-drop-icon { color:#c9a97a !important; margin-bottom:.75rem; }
#mg-wrap .mg-drop-icon svg { display:inline-block; }
#mg-wrap .mg-drop-title { font-family:Georgia,serif !important; font-size:1.1rem !important; color:#3a3530 !important; margin:0 0 .3rem !important; }
#mg-wrap .mg-drop-hint { font-size:12px !important; color:#b8a89a !important; margin:0 0 1rem !important; }

/* ── Aperçu ── */
#mg-wrap .mg-preview-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1.25rem; }
#mg-wrap .mg-preview-item { width:72px; height:72px; border-radius:8px; overflow:hidden; border:1px solid #e8dfd4; }
#mg-wrap .mg-preview-item img { width:100% !important; height:100% !important; object-fit:cover !important; display:block; }
#mg-wrap .mg-preview-more { width:72px; height:72px; border-radius:8px; background:#f4f0e8; border:1px solid #e8dfd4; display:flex; align-items:center; justify-content:center; font-size:13px; color:#7a6e67; }

/* ── Formulaire ── */
#mg-wrap .mg-field { margin-bottom:1rem !important; }
#mg-wrap .mg-field label { display:block !important; font-size:11px !important; letter-spacing:1.5px; text-transform:uppercase; color:#b8a89a !important; margin-bottom:.4rem !important; font-weight:400 !important; }
#mg-wrap .mg-optional { text-transform:none; font-size:11px; }
#mg-wrap .mg-field input[type="text"] {
  width:100% !important; border:1px solid #e8dfd4 !important; border-radius:8px !important;
  padding:.6rem .9rem !important; font-size:15px !important; color:#3a3530 !important;
  background:#fff !important; outline:none !important; box-shadow:none !important;
  -webkit-appearance:none; appearance:none;
}
#mg-wrap .mg-field input[type="text"]:focus { border-color:#c9a97a !important; }

/* ── Progression ── */
#mg-wrap .mg-progress-wrap { margin:.75rem 0; }
#mg-wrap .mg-progress-bar { height:4px; background:#f4f0e8; border-radius:2px; overflow:hidden; margin-bottom:.4rem; }
#mg-wrap .mg-progress-fill { height:100%; background:#c9a97a; border-radius:2px; width:0; transition:width .3s; }
#mg-wrap .mg-progress-text { font-size:12px !important; color:#7a6e67 !important; }

/* ── Boutons ── */
#mg-wrap .mg-btn-primary {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:8px; background:#3a3530 !important; color:#faf8f5 !important; border:none !important;
  border-radius:8px !important; padding:.75rem 1.75rem !important; font-size:14px !important;
  cursor:pointer; width:100% !important; letter-spacing:.5px;
  box-shadow:none !important; text-shadow:none !important;
}
#mg-wrap .mg-btn-primary:hover:not(:disabled) { background:#2a2520 !important; color:#faf8f5 !important; }
#mg-wrap .mg-btn-primary:disabled { opacity:.45; cursor:not-allowed; }
#mg-wrap .mg-btn-primary svg { flex-shrink:0; }

#mg-wrap .mg-btn-outline {
  display:inline-flex !important; align-items:center !important; gap:6px;
  background:transparent !important; color:#a8844f !important; border:1px solid #c9a97a !important;
  border-radius:8px !important; padding:.5rem 1.25rem !important; font-size:13px !important;
  cursor:pointer; box-shadow:none !important; text-shadow:none !important;
}
#mg-wrap .mg-btn-outline:hover { background:#fdf7ee !important; color:#a8844f !important; }

/* ── Message formulaire ── */
#mg-wrap .mg-form-msg { margin-top:.75rem; font-size:14px !important; min-height:20px; text-align:center; }
#mg-wrap .mg-form-msg.success { color:#2d7a4f !important; }
#mg-wrap .mg-form-msg.error   { color:#b33030 !important; }

/* ── Section galerie ── */
#mg-wrap .mg-gallery-section { margin-top:1rem; }
#mg-wrap .mg-section-title {
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:Georgia,serif !important; font-size:1.4rem !important; font-weight:400 !important;
  color:#3a3530 !important; text-align:center; margin-bottom:1.5rem;
}
#mg-wrap .mg-section-title::before,
#mg-wrap .mg-section-title::after { content:''; flex:1; max-width:80px; height:1px; background:#c9a97a; }
#mg-wrap .mg-count-badge { font-size:12px !important; color:#a8844f !important; background:#fdf7ee; border:1px solid #e8d8c0; border-radius:20px; padding:2px 10px; }

/* ── Galerie masonry ── */
#mg-wrap .mg-gallery { columns:3; column-gap:8px; }
@media (max-width:600px) { #mg-wrap .mg-gallery { columns:2; } }
@media (max-width:360px) { #mg-wrap .mg-gallery { columns:1; } }

#mg-wrap .mg-photo-item { break-inside:avoid; margin-bottom:8px; border-radius:8px; overflow:hidden; position:relative !important; cursor:pointer; background:#f0ebe3; display:block !important; }
#mg-wrap .mg-photo-item img { width:100% !important; height:auto !important; display:block !important; transition:transform .35s; }
#mg-wrap .mg-photo-item:hover img { transform:scale(1.04); }

/* Overlay hover desktop */
#mg-wrap .mg-photo-overlay { position:absolute !important; inset:0; background:rgba(58,53,48,.52); display:flex !important; flex-direction:column; align-items:center; justify-content:flex-end; padding:.6rem; opacity:0; transition:opacity .25s; pointer-events:none; }
#mg-wrap .mg-photo-item:hover .mg-photo-overlay { opacity:1; pointer-events:auto; }
#mg-wrap .mg-photo-author { font-size:12px !important; color:rgba(255,255,255,.9) !important; text-align:center; margin-bottom:4px !important; }

/* Bouton télécharger sur vignette */
#mg-wrap .mg-photo-dl-btn {
  display:inline-flex !important; align-items:center; gap:4px;
  font-size:12px !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.65) !important; border-radius:6px !important;
  padding:4px 10px !important; text-decoration:none !important;
  background:rgba(58,53,48,.4) !important; cursor:pointer;
}
#mg-wrap .mg-photo-dl-btn:hover { background:rgba(58,53,48,.7) !important; color:#fff !important; }

/* Bouton DL mobile (toujours visible sur écrans tactiles) */
#mg-wrap .mg-photo-dl-mobile {
  display:none !important; position:absolute !important;
  bottom:6px; right:6px;
  background:rgba(58,53,48,.75) !important; border:none !important;
  border-radius:6px !important; padding:5px 8px !important;
  color:#fff !important; text-decoration:none !important;
  font-size:11px !important; align-items:center; gap:3px; cursor:pointer;
}
@media (hover:none) {
  #mg-wrap .mg-photo-dl-mobile { display:inline-flex !important; }
  #mg-wrap .mg-photo-overlay { display:none !important; }
}

/* ── Galerie vide / spinner ── */
#mg-wrap .mg-gallery-empty { text-align:center; padding:3rem 1rem; color:#7a6e67 !important; font-family:Georgia,serif !important; font-style:italic; font-size:1.05rem !important; }
#mg-wrap .mg-load-more-wrap { text-align:center; margin-top:1.5rem; }
#mg-wrap .mg-spinner { text-align:center; color:#7a6e67 !important; padding:2rem 0; font-size:14px !important; }

/* ══════════════════════════════════════════
   LIGHTBOX — cachée jusqu'à body.mg-lb-open
   Utilise !important partout pour résister
   aux sliders/thèmes qui ajoutent du fixed
   ══════════════════════════════════════════ */

/* Conteneur racine : invisible par défaut */
#mg-lb-root { display:none !important; }

/* Quand la lightbox est ouverte */
body.mg-lb-open #mg-lb-root { display:block !important; }

/* Fond sombre */
body.mg-lb-open #mg-lb-overlay {
  position:fixed !important; top:0 !important; left:0 !important;
  right:0 !important; bottom:0 !important;
  background:rgba(20,16,12,.92) !important;
  z-index:999990 !important;
  display:block !important;
}

/* Boîte principale */
body.mg-lb-open #mg-lightbox {
  position:fixed !important; top:0 !important; left:0 !important;
  right:0 !important; bottom:0 !important;
  z-index:999999 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:1rem !important;
}

/* Image + footer */
body.mg-lb-open .mg-lb-inner {
  display:flex !important; flex-direction:column !important;
  align-items:center !important; gap:.75rem;
  max-width:min(90vw, 860px) !important; max-height:90vh !important;
  z-index:999999 !important; position:relative !important;
}
body.mg-lb-open .mg-lb-inner img {
  max-width:100% !important; max-height:72vh !important;
  border-radius:8px !important; display:block !important;
  object-fit:contain !important; width:auto !important; height:auto !important;
}
body.mg-lb-open .mg-lb-footer {
  display:flex !important; align-items:center !important;
  justify-content:space-between !important; gap:16px;
  width:100% !important; flex-wrap:wrap;
}
body.mg-lb-open .mg-lb-meta { display:flex !important; align-items:center; gap:10px; color:rgba(255,255,255,.85) !important; font-size:14px !important; flex:1; }
body.mg-lb-open .mg-lb-nom  { font-weight:500 !important; color:rgba(255,255,255,.85) !important; }
body.mg-lb-open .mg-lb-msg  { color:rgba(255,255,255,.6) !important; font-style:italic !important; }

/* Bouton télécharger lightbox */
body.mg-lb-open .mg-lb-dl {
  display:inline-flex !important; align-items:center !important; gap:6px;
  color:#fff !important; border:1px solid rgba(201,169,122,.8) !important;
  border-radius:8px !important; padding:.45rem 1.1rem !important;
  text-decoration:none !important; font-size:13px !important;
  background:rgba(201,169,122,.18) !important; white-space:nowrap; flex-shrink:0;
  cursor:pointer;
}
body.mg-lb-open .mg-lb-dl:hover { background:rgba(201,169,122,.35) !important; color:#fff !important; }

/* Fermer */
body.mg-lb-open .mg-lb-close {
  position:fixed !important; top:1rem !important; right:1.25rem !important;
  background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.2) !important;
  border-radius:8px !important; color:rgba(255,255,255,.85) !important;
  cursor:pointer; padding:.4rem !important; line-height:1 !important;
  z-index:1000000 !important; display:flex !important; align-items:center !important;
}

/* Flèches navigation */
body.mg-lb-open .mg-lb-nav {
  position:fixed !important; top:50% !important; transform:translateY(-50%) !important;
  background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.15) !important;
  color:rgba(255,255,255,.8) !important; cursor:pointer;
  padding:.75rem .5rem !important; border-radius:8px !important;
  line-height:1 !important; z-index:1000000 !important;
  display:flex !important; align-items:center !important;
}
body.mg-lb-open .mg-lb-nav:disabled { opacity:.25 !important; cursor:default !important; }
body.mg-lb-open .mg-lb-prev { left:.75rem !important; right:auto !important; }
body.mg-lb-open .mg-lb-next { right:.75rem !important; left:auto !important; }

@media (max-width:500px) {
  body.mg-lb-open .mg-lb-prev { left:.25rem !important; }
  body.mg-lb-open .mg-lb-next { right:.25rem !important; }
  body.mg-lb-open .mg-lb-footer { justify-content:center !important; }
}

/* ════════════════════════════════════════
   AJOUTS v2.0 — Likes, Vidéos, Layouts
   ════════════════════════════════════════ */

/* Vidéo dans la grille */
#mg-wrap .mg-photo-item video { width:100% !important; display:block !important; transition:transform .35s; }
#mg-wrap .mg-photo-item:hover video { transform:scale(1.04); }
#mg-wrap .mg-play-badge {
  position:absolute !important; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(58,53,48,.7); color:#fff; border-radius:50%;
  width:40px; height:40px; display:flex !important; align-items:center; justify-content:center;
  font-size:14px; pointer-events:none;
}

/* Preview vidéo dans le formulaire */
#mg-wrap .mg-preview-video {
  width:100%; height:100%; background:#3a3530; color:#faf8f5;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; border-radius:8px;
}

/* Actions overlay (like + dl) */
#mg-wrap .mg-overlay-actions { display:flex !important; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:4px; }

/* Bouton like sur la vignette */
#mg-wrap .mg-thumb-like {
  display:inline-flex !important; align-items:center; gap:4px;
  font-size:12px !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.65) !important; border-radius:6px !important;
  padding:4px 8px !important; background:rgba(58,53,48,.4) !important;
  cursor:pointer; transition:background .2s;
}
#mg-wrap .mg-thumb-like:hover,
#mg-wrap .mg-thumb-like.liked { background:rgba(200,50,50,.6) !important; border-color:rgba(255,120,120,.7) !important; }
#mg-wrap .mg-thumb-like.liked svg { fill:rgba(255,150,150,.9); stroke:rgba(255,100,100,.9); }

/* ── MODE GRILLE ── */
#mg-wrap .mg-layout-grille { columns:unset !important; display:grid !important; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:600px) { #mg-wrap .mg-layout-grille { grid-template-columns:repeat(2,1fr) !important; } }
#mg-wrap .mg-layout-grille .mg-photo-item { margin-bottom:0 !important; aspect-ratio:1; }
#mg-wrap .mg-layout-grille .mg-photo-item img,
#mg-wrap .mg-layout-grille .mg-photo-item video { height:100% !important; object-fit:cover !important; }

/* ── MODE CARROUSEL ── */
#mg-wrap .mg-layout-carrousel { columns:unset !important; display:block !important; position:relative; }
#mg-wrap .mg-layout-carrousel .mg-photo-item { width:100% !important; border-radius:12px !important; margin-bottom:0 !important; }
#mg-wrap .mg-layout-carrousel .mg-photo-item img { max-height:60vh; object-fit:contain !important; background:#111; border-radius:12px; }

/* ── LIKE dans la lightbox ── */
body.mg-lb-open .mg-lb-actions { display:flex !important; align-items:center; gap:10px; flex-wrap:wrap; }
body.mg-lb-open .mg-lb-like-btn {
  display:inline-flex !important; align-items:center; gap:6px;
  color:#fff !important; border:1px solid rgba(255,255,255,.4) !important;
  border-radius:8px !important; padding:.45rem 1rem !important;
  font-size:13px !important; background:rgba(255,255,255,.1) !important;
  cursor:pointer; transition:background .2s;
}
body.mg-lb-open .mg-lb-like-btn:hover,
body.mg-lb-open .mg-lb-like-btn.liked { background:rgba(200,50,50,.5) !important; border-color:rgba(255,120,120,.6) !important; }
body.mg-lb-open .mg-lb-like-btn.liked svg { fill:rgba(255,150,150,.9); stroke:rgba(255,100,100,.9); }

/* Vidéo dans la lightbox */
body.mg-lb-open #mg-lb-video { max-width:100% !important; max-height:72vh !important; border-radius:8px !important; }

/* ════════════════════════════════════════
   CARROUSEL v2.1 — contrôles réels
   ════════════════════════════════════════ */

/* Contrôles nav carrousel */
#mg-wrap .mg-car-controls {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1rem;
  margin-bottom:1rem !important;
}
#mg-wrap .mg-car-btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  border:1px solid #e8dfd4 !important;
  border-radius:8px !important;
  padding:.45rem .6rem !important;
  cursor:pointer;
  color:#3a3530 !important;
  transition:background .2s, border-color .2s;
  line-height:1 !important;
}
#mg-wrap .mg-car-btn:hover:not(:disabled) {
  background:#fdf7ee !important;
  border-color:#c9a97a !important;
}
#mg-wrap .mg-car-btn:disabled {
  opacity:.3 !important;
  cursor:default !important;
}
#mg-wrap .mg-car-counter {
  font-family:Georgia, serif !important;
  font-size:14px !important;
  color:#7a6e67 !important;
  min-width:60px;
  text-align:center;
}

/* Layout carrousel : une seule image visible à la fois */
#mg-wrap .mg-layout-carrousel {
  columns: unset !important;
  display: block !important;
  position: relative !important;
}
#mg-wrap .mg-layout-carrousel .mg-photo-item {
  width:100% !important;
  border-radius:12px !important;
  margin-bottom:0 !important;
  overflow:hidden !important;
  /* Caché par défaut — JS affiche uniquement l'item courant */
}
#mg-wrap .mg-layout-carrousel .mg-photo-item img {
  width:100% !important;
  max-height:65vh !important;
  object-fit:contain !important;
  background:#111 !important;
  border-radius:12px !important;
  display:block !important;
}
#mg-wrap .mg-layout-carrousel .mg-photo-item video {
  width:100% !important;
  max-height:65vh !important;
  border-radius:12px !important;
  display:block !important;
}

/* ════════════════════════════════════════
   BARRE DE LIKES PERMANENTE v2.2
   Visible sur chaque vignette sans survol
   ════════════════════════════════════════ */

#mg-wrap .mg-like-bar {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px;
  padding: 5px 8px !important;
  background: linear-gradient(to top, rgba(20,16,12,.65) 0%, transparent 100%) !important;
  border-radius: 0 0 8px 8px !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* Bouton like dans la barre permanente */
#mg-wrap .mg-like-bar-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  padding: 2px !important;
  cursor: pointer !important;
  color: rgba(255,255,255,.85) !important;
  line-height: 1 !important;
  transition: transform .15s, color .2s !important;
  flex-shrink: 0 !important;
}
#mg-wrap .mg-like-bar-btn:hover { transform: scale(1.2) !important; }
#mg-wrap .mg-like-bar-btn.liked { color: #ff6b6b !important; }
#mg-wrap .mg-like-bar-btn svg { display: block !important; }

/* Compteur de likes */
#mg-wrap .mg-like-bar-count {
  font-size: 11px !important;
  color: rgba(255,255,255,.9) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Sur mobile : barre toujours visible, overlay masqué */
@media (hover: none) {
  #mg-wrap .mg-like-bar { background: linear-gradient(to top, rgba(20,16,12,.75) 0%, transparent 100%) !important; }
}