/* ╔═══════════════════════════════════════════════════════════╗
   ║ LTC GALLERY CAROUSEL v3.0.0 — 8 presets visuels           ║
   ║ classic / mosaic / polaroid / overlay / frame / zoom /     ║
   ║ masonry / stacked                                          ║
   ╚═══════════════════════════════════════════════════════════╝ */

.ltcg{
    --ltc-primary:#1679BE;
    --ltc-secondary:#000000;
    --ltc-dark:#0f0f10;
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:24px;
    box-sizing:border-box;
    position:relative;
}

/* ──────────────── EN-TÊTE ──────────────── */
.ltcg-header{
    text-align:center;
    margin-bottom:40px;
}
.ltcg-align-left .ltcg-header{text-align:left;}
.ltcg-align-right .ltcg-header{text-align:right;}

.ltcg-eyebrow{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--ltc-primary);
    margin-bottom:14px;
    padding:6px 14px;
    border:1px solid currentColor;
    border-radius:999px;
    background:rgba(22,121,190,0.04);
}
.ltcg-heading{
    font-size:clamp(1.6rem, 3vw, 2.2rem);
    font-weight:700;
    margin:0 0 12px;
    color:var(--ltc-dark);
    letter-spacing:-0.02em;
    line-height:1.2;
}
.ltcg-sub{
    font-size:15px;
    color:#5a5a60;
    line-height:1.6;
    margin:0;
    max-width:600px;
}
.ltcg-align-center .ltcg-sub{margin:0 auto;}
.ltcg-align-right .ltcg-sub{margin:0 0 0 auto;}

/* ──────────────── VIEWPORT & TRACK ──────────────── */
.ltcg-vp{
    position:relative;
    overflow:hidden;
    border-radius:16px;
}
.ltcg-track{
    --cols:4;
    display:flex;
    gap:14px;
    transition:transform .55s cubic-bezier(.4,0,.2,1);
    will-change:transform;
}
.ltcg-slide{
    flex:0 0 calc((100% - (var(--cols) - 1) * 14px) / var(--cols));
    min-width:0;
}

/* ──────────────── THUMB COMMUN ──────────────── */
.ltcg-thumb{
    position:relative;
    height:280px;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    background:#f5f5f5;
    transition:all .55s cubic-bezier(.25,.8,.25,1);
}

/* L'image en background sur un div pour pouvoir l'animer */
.ltcg-img{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition:all .8s cubic-bezier(.25,.8,.25,1);
}

/* Animation à l'apparition */
.ltcg-animate .ltcg-slide{
    opacity:0;
    transform:translateY(24px);
    animation:ltcgFadeUp .8s cubic-bezier(.25,.8,.25,1) forwards;
    animation-delay:var(--ltc-d, 0ms);
}
@keyframes ltcgFadeUp{to{opacity:1; transform:translateY(0);}}

/* ──────────────── ICÔNE LOUPE ──────────────── */
.ltcg-zoom{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%) scale(0.6);
    width:64px; height:64px;
    background:rgba(255,255,255,0.95);
    border-radius:50%;
    color:var(--ltc-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:all .45s cubic-bezier(.25,.8,.25,1);
    box-shadow:0 8px 24px rgba(0,0,0,0.30);
    pointer-events:none;
    z-index:3;
}
.ltcg-no-zoom-icon .ltcg-zoom{display:none;}

/* ──────────────── CAPTION ──────────────── */
.ltcg-caption{
    position:absolute;
    inset:auto 0 0 0;
    padding:18px 20px;
    z-index:2;
    color:#fff;
    display:flex;
    flex-direction:column;
    gap:4px;
    pointer-events:none;
}
.ltcg-city{
    display:inline-block;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:4px;
    opacity:0.9;
}
.ltcg-title{
    font-size:15px;
    font-weight:700;
    line-height:1.3;
}
.ltcg-desc{
    font-size:12.5px;
    opacity:0.85;
    line-height:1.5;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 1 — CLASSIC                                        ║
   ║ Cartes épurées, hover zoom + overlay sombre + loupe       ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltcg-preset-classic .ltcg-thumb{
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
}
.ltcg-preset-classic .ltcg-thumb::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 50%, rgba(15,15,16,0.55) 100%);
    opacity:0;
    transition:opacity .45s;
    pointer-events:none;
    z-index:1;
}
.ltcg-preset-classic .ltcg-thumb:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,0.16);
}
.ltcg-preset-classic .ltcg-thumb:hover .ltcg-img{transform:scale(1.08);}
.ltcg-preset-classic .ltcg-thumb:hover::after{opacity:1;}
.ltcg-preset-classic .ltcg-thumb:hover .ltcg-zoom{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 2 — MOSAIC                                         ║
   ║ La 1ère slide est plus grande (2x), les autres normales   ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltcg-preset-mosaic .ltcg-track{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:200px;
    gap:14px;
    transform:none !important;
}
.ltcg-preset-mosaic .ltcg-slide{flex:none; min-width:0;}
.ltcg-preset-mosaic .ltcg-slide:nth-child(1){
    grid-column:span 2;
    grid-row:span 2;
}
.ltcg-preset-mosaic .ltcg-slide:nth-child(6){
    grid-column:span 2;
}
.ltcg-preset-mosaic .ltcg-thumb{
    height:100% !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
}
.ltcg-preset-mosaic .ltcg-thumb::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 60%, rgba(15,15,16,0.55) 100%);
    opacity:0;
    transition:opacity .45s;
    pointer-events:none;
    z-index:1;
}
.ltcg-preset-mosaic .ltcg-thumb:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(0,0,0,0.16);
}
.ltcg-preset-mosaic .ltcg-thumb:hover .ltcg-img{transform:scale(1.06);}
.ltcg-preset-mosaic .ltcg-thumb:hover::after{opacity:1;}
.ltcg-preset-mosaic .ltcg-thumb:hover .ltcg-zoom{opacity:1; transform:translate(-50%, -50%) scale(1);}

/* En mosaïque, les flèches du carousel sont masquées (pas d'animation horizontale) */
.ltcg-preset-mosaic .ltcg-arrow{display:none !important;}

@media(max-width:768px){
    .ltcg-preset-mosaic .ltcg-track{grid-template-columns:repeat(2, 1fr); grid-auto-rows:180px;}
    .ltcg-preset-mosaic .ltcg-slide:nth-child(1){grid-column:span 2; grid-row:span 1;}
    .ltcg-preset-mosaic .ltcg-slide:nth-child(6){grid-column:span 2;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 3 — POLAROID                                       ║
   ║ Cartes blanches inclinées avec ombre épaisse              ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltcg-preset-polaroid .ltcg-thumb{
    background:#fff;
    padding:12px 12px 40px;
    border-radius:6px !important;
    box-shadow:0 6px 18px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.06);
    transform:rotate(-1deg);
    transition:all .55s cubic-bezier(.25,.8,.25,1);
}
.ltcg-preset-polaroid .ltcg-slide:nth-child(2n) .ltcg-thumb{transform:rotate(1.2deg);}
.ltcg-preset-polaroid .ltcg-slide:nth-child(3n) .ltcg-thumb{transform:rotate(-0.6deg);}
.ltcg-preset-polaroid .ltcg-img{
    position:relative;
    inset:auto;
    width:100%;
    height:100%;
    border-radius:2px;
}
.ltcg-preset-polaroid .ltcg-thumb:hover{
    transform:rotate(0) translateY(-6px);
    box-shadow:0 12px 32px rgba(0,0,0,0.16), 0 24px 48px rgba(0,0,0,0.10);
    z-index:5;
}
.ltcg-preset-polaroid .ltcg-thumb:hover .ltcg-img{transform:scale(1.04);}
.ltcg-preset-polaroid .ltcg-thumb:hover .ltcg-zoom{opacity:1; transform:translate(-50%, -50%) scale(1);}
.ltcg-preset-polaroid .ltcg-caption{
    bottom:0;
    padding:8px 14px 12px;
    color:var(--ltc-dark);
}
.ltcg-preset-polaroid .ltcg-caption::before{display:none;}
.ltcg-preset-polaroid .ltcg-title{font-size:13px; color:var(--ltc-dark); font-family:'Caveat', cursive, system-ui;}
.ltcg-preset-polaroid .ltcg-desc, .ltcg-preset-polaroid .ltcg-city{display:none;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 4 — OVERLAY (texte permanent en bas)               ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltcg-preset-overlay .ltcg-thumb{
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
}
.ltcg-preset-overlay .ltcg-thumb::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 30%, rgba(15,15,16,0.85) 100%);
    pointer-events:none;
    z-index:1;
}
.ltcg-preset-overlay .ltcg-caption{
    z-index:2;
    transform:translateY(0);
    transition:transform .55s cubic-bezier(.25,.8,.25,1);
}
.ltcg-preset-overlay .ltcg-thumb:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(0,0,0,0.16);
}
.ltcg-preset-overlay .ltcg-thumb:hover .ltcg-img{transform:scale(1.06);}
.ltcg-preset-overlay .ltcg-thumb:hover .ltcg-zoom{opacity:1; transform:translate(-50%, -50%) scale(1);}
.ltcg-preset-overlay .ltcg-zoom{top:30%;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 5 — FRAME (bordure double avec accent rouge)       ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltcg-preset-frame .ltcg-thumb{
    background:#fff;
    padding:6px;
    border:2px solid var(--ltc-primary);
    box-shadow:0 0 0 8px #fff, 0 8px 24px rgba(0,0,0,0.08);
    border-radius:4px !important;
    transition:all .55s cubic-bezier(.25,.8,.25,1);
}
.ltcg-preset-frame .ltcg-img{
    position:relative;
    inset:auto;
    width:100%;
    height:100%;
    border-radius:2px;
}
.ltcg-preset-frame .ltcg-thumb::after{
    content:'';
    position:absolute;
    inset:6px;
    background:linear-gradient(180deg, transparent 60%, rgba(15,15,16,0.55) 100%);
    opacity:0;
    transition:opacity .45s;
    pointer-events:none;
    z-index:1;
    border-radius:2px;
}
.ltcg-preset-frame .ltcg-thumb:hover{
    transform:translateY(-4px);
    box-shadow:0 0 0 8px #fff, 0 16px 40px rgba(22,121,190,0.20);
}
.ltcg-preset-frame .ltcg-thumb:hover .ltcg-img{transform:scale(1.05);}
.ltcg-preset-frame .ltcg-thumb:hover::after{opacity:1;}
.ltcg-preset-frame .ltcg-thumb:hover .ltcg-zoom{opacity:1; transform:translate(-50%, -50%) scale(1);}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 6 — ZOOM (image zoomée par défaut, dézoome au hover)║
   ╚══════════════════════════════════════════════════════════╝ */
.ltcg-preset-zoom .ltcg-thumb{
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
}
.ltcg-preset-zoom .ltcg-img{
    transform:scale(1.15);
    filter:saturate(1.1) brightness(0.95);
}
.ltcg-preset-zoom .ltcg-thumb::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(15,15,16,0.30) 0%, transparent 50%, rgba(15,15,16,0.50) 100%);
    transition:opacity .45s;
    pointer-events:none;
    z-index:1;
}
.ltcg-preset-zoom .ltcg-thumb:hover .ltcg-img{
    transform:scale(1);
    filter:saturate(1.2) brightness(1);
}
.ltcg-preset-zoom .ltcg-thumb:hover::after{opacity:0.4;}
.ltcg-preset-zoom .ltcg-thumb:hover .ltcg-zoom{opacity:1; transform:translate(-50%, -50%) scale(1);}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 7 — MASONRY (hauteurs auto adaptées)               ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltcg-preset-masonry .ltcg-track{
    display:grid;
    grid-template-columns:repeat(var(--cols, 4), 1fr);
    grid-auto-flow:dense;
    gap:14px;
    transform:none !important;
}
.ltcg-preset-masonry .ltcg-slide{flex:none;}
/* Hauteurs variables (style mansory) avec nth-child */
.ltcg-preset-masonry .ltcg-slide:nth-child(3n) .ltcg-thumb{height:340px !important;}
.ltcg-preset-masonry .ltcg-slide:nth-child(4n) .ltcg-thumb{height:240px !important;}
.ltcg-preset-masonry .ltcg-slide:nth-child(7n) .ltcg-thumb{height:380px !important;}
.ltcg-preset-masonry .ltcg-thumb{
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
}
.ltcg-preset-masonry .ltcg-thumb::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 60%, rgba(15,15,16,0.60) 100%);
    opacity:0;
    transition:opacity .45s;
    pointer-events:none;
    z-index:1;
}
.ltcg-preset-masonry .ltcg-thumb:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(0,0,0,0.16);
}
.ltcg-preset-masonry .ltcg-thumb:hover .ltcg-img{transform:scale(1.06);}
.ltcg-preset-masonry .ltcg-thumb:hover::after{opacity:1;}
.ltcg-preset-masonry .ltcg-thumb:hover .ltcg-zoom{opacity:1; transform:translate(-50%, -50%) scale(1);}
.ltcg-preset-masonry .ltcg-arrow{display:none !important;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 8 — STACKED (cartes empilées avec rotation aléatoire)║
   ╚══════════════════════════════════════════════════════════╝ */
.ltcg-preset-stacked .ltcg-thumb{
    box-shadow:0 6px 20px rgba(0,0,0,0.10), 0 16px 40px rgba(0,0,0,0.06);
    border-radius:18px !important;
    transition:all .55s cubic-bezier(.25,.8,.25,1);
}
.ltcg-preset-stacked .ltcg-slide:nth-child(odd) .ltcg-thumb{transform:rotate(-1deg);}
.ltcg-preset-stacked .ltcg-slide:nth-child(even) .ltcg-thumb{transform:rotate(1.5deg);}
.ltcg-preset-stacked .ltcg-slide:nth-child(3n) .ltcg-thumb{transform:rotate(-2deg);}
.ltcg-preset-stacked .ltcg-slide:nth-child(4n) .ltcg-thumb{transform:rotate(0.8deg);}
.ltcg-preset-stacked .ltcg-thumb::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 60%, rgba(15,15,16,0.55) 100%);
    opacity:0;
    transition:opacity .45s;
    pointer-events:none;
    z-index:1;
    border-radius:inherit;
}
.ltcg-preset-stacked .ltcg-thumb:hover{
    transform:rotate(0) translateY(-6px) scale(1.03);
    box-shadow:0 16px 40px rgba(22,121,190,0.18), 0 24px 56px rgba(0,0,0,0.10);
    z-index:5;
}
.ltcg-preset-stacked .ltcg-thumb:hover .ltcg-img{transform:scale(1.06);}
.ltcg-preset-stacked .ltcg-thumb:hover::after{opacity:1;}
.ltcg-preset-stacked .ltcg-thumb:hover .ltcg-zoom{opacity:1; transform:translate(-50%, -50%) scale(1);}


/* ╔══════════════════════════════════════════════════════════╗
   ║ EFFETS HOVER SUPPLÉMENTAIRES                              ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Aucun hover */
.ltcg-hv-none .ltcg-thumb:hover{transform:none !important;}
.ltcg-hv-none .ltcg-thumb:hover .ltcg-img{transform:none !important;}
.ltcg-hv-none .ltcg-thumb:hover::after{opacity:0 !important;}

/* Lift (ajoute juste un soulèvement) */
.ltcg-hv-lift .ltcg-thumb:hover{transform:translateY(-8px) !important;}

/* Tilt 3D */
.ltcg-hv-tilt .ltcg-thumb{perspective:1000px;}
.ltcg-hv-tilt .ltcg-thumb:hover{transform:perspective(1000px) rotateY(-6deg) rotateX(3deg) !important;}

/* Fade sombre */
.ltcg-hv-fade .ltcg-thumb:hover .ltcg-img{filter:brightness(0.55) saturate(0.8); transform:scale(1.08);}

/* Shine — reflet brillant qui passe */
.ltcg-hv-shine .ltcg-thumb{overflow:hidden;}
.ltcg-hv-shine .ltcg-thumb::before{
    content:'';
    position:absolute;
    top:0; left:-100%;
    width:60%; height:100%;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
    transform:skewX(-20deg);
    transition:left .8s cubic-bezier(.25,.8,.25,1);
    z-index:2;
    pointer-events:none;
}
.ltcg-hv-shine .ltcg-thumb:hover::before{left:200%;}

/* Zoom doux uniforme (override des presets) */
.ltcg-hv-zoom .ltcg-thumb:hover .ltcg-img{transform:scale(1.10) !important;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ FLÈCHES                                                   ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltcg-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .35s cubic-bezier(.25,.8,.25,1);
    user-select:none;
}
.ltcg-arrow--prev{left:-8px;}
.ltcg-arrow--next{right:-8px;}

/* Style 1 : circle (par défaut) */
.ltcg-arrow--circle{
    width:48px; height:48px;
    background:#fff;
    border-radius:50%;
    color:var(--ltc-primary);
    box-shadow:0 4px 14px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.06);
}
.ltcg-arrow--circle:hover{
    background:var(--ltc-primary);
    color:#fff;
    transform:translateY(-50%) scale(1.1);
    box-shadow:0 8px 24px rgba(22,121,190,0.40);
}

/* Style 2 : square */
.ltcg-arrow--square{
    width:44px; height:44px;
    background:#fff;
    border-radius:10px;
    color:var(--ltc-primary);
    box-shadow:0 4px 14px rgba(0,0,0,0.10);
}
.ltcg-arrow--square:hover{
    background:var(--ltc-dark);
    color:#fff;
    transform:translateY(-50%) translateY(-2px);
}

/* Style 3 : minimal */
.ltcg-arrow--minimal{
    width:40px; height:40px;
    background:transparent;
    color:var(--ltc-dark);
    border-radius:50%;
}
.ltcg-arrow--minimal:hover{
    background:rgba(15,15,16,0.08);
    color:var(--ltc-primary);
}

/* Style 4 : gradient */
.ltcg-arrow--gradient{
    width:48px; height:48px;
    background:linear-gradient(135deg, var(--ltc-primary) 0%, var(--ltc-secondary) 100%);
    background-size:200% 200%;
    color:#fff;
    border-radius:50%;
    box-shadow:0 6px 18px rgba(22,121,190,0.30);
    animation:ltcgGradShift 5s ease infinite;
}
@keyframes ltcgGradShift{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
}
.ltcg-arrow--gradient:hover{
    transform:translateY(-50%) scale(1.1);
    box-shadow:0 10px 28px rgba(22,121,190,0.45);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ DOTS                                                      ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltcg-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:24px;
}
.ltcg-dot{
    width:10px; height:10px;
    border-radius:50%;
    background:rgba(15,15,16,0.20);
    border:none;
    cursor:pointer;
    padding:0;
    transition:all .35s cubic-bezier(.25,.8,.25,1);
}
.ltcg-dot:hover{background:rgba(22,121,190,0.40);}
.ltcg-dot.is-active{
    background:var(--ltc-primary);
    width:28px;
    border-radius:5px;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ COUNTER                                                   ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltcg-counter{
    position:absolute;
    bottom:16px;
    right:16px;
    z-index:5;
    background:rgba(15,15,16,0.75);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    padding:6px 14px;
    border-radius:999px;
    line-height:1;
    pointer-events:none;
}
.ltcg-counter-sep{opacity:0.5; margin:0 4px;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ RESPONSIVE                                                ║
   ╚══════════════════════════════════════════════════════════╝ */
@media(max-width:1024px){
    .ltcg{padding:20px;}
    .ltcg-arrow--prev{left:-4px;}
    .ltcg-arrow--next{right:-4px;}
}
@media(max-width:768px){
    .ltcg{padding:16px;}
    .ltcg-header{margin-bottom:28px;}
    .ltcg-arrow{width:38px !important; height:38px !important;}
    .ltcg-arrow--prev{left:8px;}
    .ltcg-arrow--next{right:8px;}
    .ltcg-arrow svg{width:18px; height:18px;}
}
@media(max-width:480px){
    .ltcg-arrow{display:none;}
    .ltcg-zoom{width:48px; height:48px;}
    .ltcg-zoom svg{width:24px; height:24px;}
    .ltcg-caption{padding:14px;}
    .ltcg-title{font-size:13px;}
    .ltcg-desc{font-size:11.5px;}
}