/*
 * OG Media Suite — Frontend styles
 * Structure statique uniquement. Les valeurs dynamiques (couleurs, tailles,
 * graisse, police, rayon global) sont injectées via des variables CSS sur
 * :root par le plugin (voir print_styles() / OG_Media_Suite::root_css_vars()).
 * Les overrides par instance (couleur d'accent d'une galerie, colonnes, etc.)
 * restent posés en inline sur chaque shortcode et prennent le pas sur ce fichier.
 */
/* ===== OG Media Suite (see readme for version) ===== */
@keyframes ogms-conveyor { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes ogms-kzoom    { from{transform:scale(1)}     to{transform:scale(1.06)}       }
@keyframes ogms-fadein   { from{opacity:0;transform:scale(1.04)} to{opacity:1;transform:scale(1)} }

/* ── Gallery base ── */
.ogms-gallery{width:100%;box-sizing:border-box;font-family:var(--ogms-font-family)}
.ogms-gallery *{box-sizing:border-box}
.ogms-gallery-uniform,.ogms-gallery-mosaic{
    display:grid;grid-template-columns:repeat(var(--ogms-cols,3),1fr);gap:var(--ogms-gap,8px)
}
.ogms-gallery-uniform .ogms-gallery-item,
.ogms-gallery-mosaic  .ogms-gallery-item{aspect-ratio:4/3}
.ogms-gallery-mosaic  .ogms-gallery-item:nth-child(5n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.ogms-gallery-masonry{position:relative}
.ogms-gallery-item{
    position:relative;overflow:hidden;cursor:pointer;
    border-radius:var(--ogms-radius,var(--ogms-radius-base));
    background:#e8edf2
}
.ogms-gallery-item img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .45s ease
}

/* ── Barre de filtres (pills) — style club pro, personnalisable via variables CSS du thème ── */
.ogms-filterbar{
    width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-bottom:calc(var(--ogms-gap,8px) * 1.5);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.ogms-filterbar::-webkit-scrollbar{display:none}
.ogms-filterbar-track{
    display:flex;gap:10px;padding:2px 4px;width:max-content;
    scroll-snap-type:x proximity
}
.ogms-pill{
    scroll-snap-align:start;flex:0 0 auto;
    padding:9px 20px;border-radius:999px;border:1.5px solid var(--ogms-accent,var(--ogms-accent-base));
    background:transparent;color:var(--ogms-primary,var(--ogms-primary-base));
    font-family:var(--ogms-font-family);font-size:var(--ogms-body-size);font-weight:var(--ogms-font-weight);white-space:nowrap;
    cursor:pointer;transition:background .25s ease,color .25s ease,transform .15s ease
}
.ogms-pill:hover{transform:translateY(-1px)}
.ogms-pill.is-active{background:var(--ogms-accent,var(--ogms-accent-base));color:#fff;border-color:var(--ogms-accent,var(--ogms-accent-base))}

/* ── Fondu/décalage à l'apparition + transition douce lors du filtrage ── */
.ogms-gallery-item{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.ogms-gallery-item.ogms-fadein-ready{opacity:1;transform:translateY(0)}
.ogms-gallery.ogms-filtering{opacity:.35;transition:opacity .16s ease}

/* ── Charger plus ── */
.ogms-loadmore-wrap{display:flex;justify-content:center;margin-top:calc(var(--ogms-gap,8px) * 2)}
.ogms-btn-loadmore{
    padding:12px 32px;border-radius:calc(var(--ogms-radius,var(--ogms-radius-base))/1.5);
    border:1.5px solid var(--ogms-accent,var(--ogms-accent-base));background:transparent;color:var(--ogms-primary,var(--ogms-primary-base));
    font-family:var(--ogms-font-family);font-size:var(--ogms-body-size);font-weight:var(--ogms-font-weight);cursor:pointer;
    transition:background .25s ease,color .25s ease
}
.ogms-btn-loadmore:hover{background:var(--ogms-accent,var(--ogms-accent-base));color:#fff}

@media(max-width:767px){
    .ogms-filterbar-track{gap:8px}
    .ogms-pill{padding:8px 16px;font-size:13px}
}

/* ── Hover effects ── */
.ogms-hover-zoom:hover img{transform:scale(1.07)}

.ogms-hover-overlay .ogms-hover-overlay,
.ogms-hover-slide   .ogms-hover-overlay{
    position:absolute;display:flex;flex-direction:column;pointer-events:none
}
.ogms-hover-overlay .ogms-hover-overlay{
    inset:0;background:rgba(10,37,64,.72);
    justify-content:center;align-items:center;padding:16px;text-align:center;
    opacity:0;transition:opacity .3s ease
}
.ogms-hover-overlay:hover .ogms-hover-overlay{opacity:1}
.ogms-hover-slide .ogms-hover-overlay{
    bottom:0;left:0;right:0;top:auto;
    background:linear-gradient(0deg,rgba(10,37,64,.88),transparent);
    justify-content:flex-end;padding:14px;
    transform:translateY(102%);transition:transform .35s ease
}
.ogms-hover-slide:hover .ogms-hover-overlay{transform:translateY(0)}
.ogms-hover-title{color:#fff;font-size:var(--ogms-caption-size);font-weight:var(--ogms-font-weight);font-family:var(--ogms-font-family);display:block}
.ogms-hover-caption{color:rgba(255,255,255,.75);font-size:12px;margin-top:4px;display:block}
.ogms-zoom-icon{
    position:absolute;top:10px;right:10px;
    background:rgba(0,0,0,.4);color:#fff;border-radius:50%;
    width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none
}
.ogms-gallery-item:hover .ogms-zoom-icon{opacity:1}

/* ── Lightbox ── */
.ogms-lightbox{
    display:none;position:fixed;inset:0;z-index:99999;
    background:var(--lb-bg,rgba(0,0,0,.95));
    flex-direction:column;align-items:center;justify-content:center;padding:16px
}
.ogms-lightbox.ogms-lb-open{display:flex}
.ogms-lb-stage{display:flex;flex-direction:column;align-items:center;max-width:92vw}
.ogms-lb-img{max-width:90vw;max-height:70vh;object-fit:contain;border-radius:4px;display:block}
.ogms-lb-caption{color:rgba(255,255,255,.75);font-size:14px;margin:10px 0 3px;text-align:center;font-family:var(--ogms-font-family)}
.ogms-lb-counter{color:rgba(255,255,255,.4);font-size:12px}
.ogms-lb-close{
    position:fixed;top:16px;right:20px;
    background:none;border:none;color:#fff;font-size:30px;cursor:pointer;
    opacity:.7;z-index:2;line-height:1;padding:4px
}
.ogms-lb-close:hover{opacity:1}
.ogms-lb-prev,.ogms-lb-next{
    position:fixed;top:50%;transform:translateY(-50%);
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
    color:#fff;font-size:46px;width:54px;height:54px;border-radius:50%;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .2s;z-index:2;padding:0
}
.ogms-lb-prev{left:14px}
.ogms-lb-next{right:14px}
.ogms-lb-prev:hover,.ogms-lb-next:hover{background:rgba(255,255,255,.28)}
.ogms-lb-thumbs{
    display:flex;gap:6px;margin-top:14px;
    overflow-x:auto;max-width:88vw;padding-bottom:4px;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent
}
.ogms-lb-thumbs img{
    width:60px;height:44px;object-fit:cover;border-radius:3px;flex-shrink:0;
    cursor:pointer;opacity:.45;transition:opacity .2s;
    border:2px solid transparent
}
.ogms-lb-thumbs img.active{opacity:1;border-color:var(--ogms-accent,var(--ogms-accent-base))}

/* ── Slider base ── */
.ogms-slider-wrap{
    position:relative;width:100%;overflow:hidden;
    height:var(--ogms-h,500px);
    border-radius:var(--ogms-radius,var(--ogms-radius-base));
    font-family:var(--ogms-font-family)
}
.ogms-slider-wrap *{box-sizing:border-box}
.ogms-track{
    display:flex;height:100%;
    transition:transform .52s cubic-bezier(.4,0,.2,1);
    will-change:transform
}
.ogms-slide{flex:0 0 calc(100%/var(--sv,1));height:100%;position:relative;overflow:hidden}

/* Responsive slides-visible via CSS custom props */
.ogms-slider-wrap{--sv:var(--sv-d,1)}
@media(max-width:1023px){.ogms-slider-wrap{--sv:var(--sv-t,1)}}
@media(max-width:767px) {.ogms-slider-wrap{--sv:var(--sv-m,1)}}

/* Fade / Zoom mode */
.ogms-fade .ogms-track{position:relative;transform:none!important}
.ogms-fade .ogms-slide{
    position:absolute;inset:0;flex:none;width:100%;
    opacity:0;transition:opacity .6s ease;pointer-events:none
}
.ogms-fade .ogms-slide.ogms-active{opacity:1;pointer-events:auto}
.ogms-zoom .ogms-slide.ogms-active .ogms-slide-bg{animation:ogms-kzoom 7s ease forwards}
.ogms-zoom .ogms-slide.ogms-active .ogms-slide-team,
.ogms-zoom .ogms-slide.ogms-active .ogms-slide-testi{animation:ogms-fadein .6s ease}

/* Card style */
.ogms-cards .ogms-slide{padding:8px}
.ogms-cards .ogms-slide>div{
    border-radius:var(--ogms-radius,var(--ogms-radius-base));
    box-shadow:0 8px 30px rgba(0,0,0,.1);
    overflow:hidden;height:100%
}

/* ── Bannière statique (CPT dédié) ── */
.ogms-banner{
    width:100%;position:relative;overflow:hidden;
    background-size:cover;background-position:var(--ogms-focal-d,center center);
}
@media(max-width:767px){
    .ogms-banner{background-position:var(--ogms-focal-m,var(--ogms-focal-d,center center))}
}
.ogms-banner-veil{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,37,64,.12) 0%,rgba(10,37,64,.58) 100%)
}

/* Placement du bloc de contenu — grille 9 zones via variables CSS composées (aucun JS requis) */
.ogms-content{
    position:absolute;max-width:min(560px,88%);padding:32px;
    --tx:0px;--ty:0px;transform:translate(var(--tx),var(--ty));
}
.ogms-content[data-pos^="top-"]{top:0}
.ogms-content[data-pos^="middle-"]{top:50%;--ty:-50%}
.ogms-content[data-pos^="bottom-"]{bottom:0}
.ogms-content[data-pos$="-left"]{left:0}
.ogms-content[data-pos$="-center"]{left:50%;--tx:-50%}
.ogms-content[data-pos$="-right"]{right:0}

.ogms-content-inner{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.ogms-content-inner .ogms-s-title,.ogms-content-inner .ogms-s-sub{margin:0;text-shadow:0 2px 10px rgba(0,0,0,.35)}

/* Effets d'apparition */
.ogms-content-inner.ogms-effect-fade{opacity:0;transition:opacity .7s ease}
.ogms-content-inner.ogms-effect-slide-up{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.ogms-content-inner.ogms-fadein-ready{opacity:1;transform:translateY(0)}

/* Rangée de boutons */
.ogms-content-buttons{display:flex;flex-wrap:wrap;gap:14px}
.ogms-cbtn{
    display:inline-block;padding:13px 30px;border-radius:calc(var(--ogms-radius,var(--ogms-radius-base))/2);
    background:var(--btn-bg,var(--ogms-accent-base));color:var(--btn-color,#fff);text-decoration:none;
    font-family:var(--ogms-font-family);font-size:var(--ogms-body-size);transition:transform .2s ease,box-shadow .2s ease,background .25s ease,color .25s ease
}
.ogms-cbtn:hover{color:var(--btn-color,#fff)}
.ogms-cbtn-hover-lift:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.ogms-cbtn-hover-color:hover{background:var(--btn-color,#fff);color:var(--btn-bg,var(--ogms-accent-base))}

@media(max-width:767px){
    .ogms-content{padding:20px}
}

/* Image / Article slides */
.ogms-slide-bg{
    width:100%;height:100%;
    background-size:cover;background-position:var(--ogms-focal-d,center center);
    position:relative
}
@media(max-width:767px){
    .ogms-slide-bg{background-position:var(--ogms-focal-m,var(--ogms-focal-d,center center))}
}
.ogms-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(10,37,64,.88) 0%,rgba(10,37,64,.1) 55%,transparent 100%);
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:40px
}
.ogms-s-date {color:rgba(255,255,255,.6);font-size:var(--ogms-caption-size);margin-bottom:8px}
.ogms-s-title{
    color:var(--ogms-text-base);font-size:var(--ogms-title-size);font-weight:var(--ogms-font-weight);text-transform:var(--ogms-text-transform);
    margin:0 0 14px;line-height:1.2;
    text-shadow:0 2px 10px rgba(0,0,0,.35);font-family:var(--ogms-font-family)
}
.ogms-s-sub{color:rgba(255,255,255,.82);font-size:var(--ogms-subtitle-size);margin:0 0 24px;font-family:var(--ogms-font-family);line-height:1.6}
.ogms-s-cta{
    display:inline-block;padding:13px 30px;
    background:var(--ogms-accent,var(--ogms-accent-base));color:#fff;text-decoration:none;
    border-radius:calc(var(--ogms-radius,var(--ogms-radius-base))/2);
    font-size:var(--ogms-body-size);font-weight:600;
    transition:transform .2s,box-shadow .2s;align-self:flex-start
}
.ogms-s-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.28);color:#fff}

/* Logo slides */
.ogms-slide-logo{
    display:flex;align-items:center;justify-content:center;
    height:100%;padding:20px;background:#fff
}
.ogms-slide-logo img{max-width:160px;max-height:90px;object-fit:contain;transition:filter .35s,opacity .35s}
.ogms-gray img{filter:grayscale(100%);opacity:.5}
.ogms-gray:hover img{filter:none;opacity:1}

/* Team slides */
.ogms-slide-team{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    height:100%;padding:32px 24px;background:#fff;text-align:center;gap:10px
}
.ogms-team-avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--ogms-accent,var(--ogms-accent-base))}
.ogms-team-nophoto{width:100px;height:100px;border-radius:50%;background:var(--ogms-primary,var(--ogms-primary-base));display:flex;align-items:center;justify-content:center;font-size:38px}
.ogms-team-name{font-size:var(--ogms-subtitle-size);font-weight:700;color:var(--ogms-primary,var(--ogms-primary-base));margin:0;font-family:var(--ogms-font-family);text-transform:var(--ogms-text-transform)}
.ogms-team-role{font-size:var(--ogms-body-size);font-weight:500;color:var(--ogms-accent,var(--ogms-accent-base))}
.ogms-team-bio{font-size:var(--ogms-caption-size);color:#666;margin:0;line-height:1.7;max-width:280px;font-family:var(--ogms-font-family)}
.ogms-socials{display:flex;gap:8px;justify-content:center;margin-top:4px}
.ogms-social{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:50%;
    background:var(--ogms-primary,var(--ogms-primary-base));color:#fff;
    text-decoration:none;font-size:12px;font-weight:700;
    transition:opacity .2s
}
.ogms-social:hover{opacity:.8;color:#fff}

/* Testimonial slides */
.ogms-slide-testi{
    display:flex;flex-direction:column;justify-content:center;
    height:100%;padding:40px;background:#fff
}
.ogms-testi-quote{font-size:72px;line-height:.5;font-family:Georgia,serif;color:var(--ogms-accent,var(--ogms-accent-base));opacity:.3;margin-bottom:16px}
.ogms-testi-text{font-size:var(--ogms-body-size);color:#333;line-height:1.85;font-style:italic;margin:0 0 20px;font-family:var(--ogms-font-family)}
.ogms-stars{margin-bottom:18px}
.ogms-star-on{color:var(--ogms-accent,var(--ogms-accent-base));font-size:18px}
.ogms-star-off{color:#ddd;font-size:18px}
.ogms-testi-foot{display:flex;align-items:center;gap:12px}
.ogms-testi-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;flex-shrink:0}
.ogms-testi-name{display:block;font-size:var(--ogms-body-size);font-weight:700;color:var(--ogms-primary,var(--ogms-primary-base));font-family:var(--ogms-font-family)}
.ogms-testi-co{display:block;font-size:var(--ogms-caption-size);color:#999;margin-top:2px}

/* Arrows */
.ogms-arr{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);
    color:#fff;font-size:42px;width:52px;height:52px;border-radius:50%;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .2s;z-index:10;padding:0;
    backdrop-filter:blur(6px)
}
.ogms-arr-prev{left:14px}
.ogms-arr-next{right:14px}
.ogms-arr:hover{background:rgba(255,255,255,.32)}

/* Dots */
.ogms-dots{
    position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
    display:flex;gap:8px;z-index:10
}
.ogms-dot{
    width:10px;height:10px;border-radius:50%;padding:0;border:none;
    background:var(--dots-off,#ccc);cursor:pointer;
    transition:background .3s,transform .2s
}
.ogms-dot.active{background:var(--dots-on,var(--ogms-accent-base));transform:scale(1.35)}

/* Error */
.ogms-error{color:#c00;font-style:italic;padding:8px 12px;border:1px dashed #c00;border-radius:4px;display:inline-block;margin:8px 0}

/* Responsive */
@media(max-width:1023px){
    .ogms-gallery-uniform,.ogms-gallery-mosaic{grid-template-columns:repeat(2,1fr)}
    .ogms-gallery-mosaic .ogms-gallery-item:nth-child(5n+1){grid-column:span 2;grid-row:auto}
}
@media(max-width:767px){
    .ogms-gallery-uniform,.ogms-gallery-mosaic{grid-template-columns:repeat(2,1fr)}
    .ogms-overlay{padding:18px}
    .ogms-s-title{font-size:20px}
    .ogms-slide-testi{padding:22px 18px}
    .ogms-testi-quote{font-size:52px}
    .ogms-lb-prev{left:6px}
    .ogms-lb-next{right:6px}
    .ogms-arr-prev{left:6px}
    .ogms-arr-next{right:6px}
}