/* Widget Portfolio - suggested front-end CSS
   Adapt to your theme's design system. */

.widgetPortfolio{
margin:30px auto;
position:relative;
border:1px dashed var(--debug); /* debug */
width:100%;
max-width:1280px;
}

/* Filter dropdown (mur + filter mode) */
.widgetPortfolio-filter{
    margin-bottom:10px;
    text-align:center;
direction:ltr;
}
/* Filter dropdown : arrow on the right via background-image */
.widgetPortfolio-filter-select{
    padding:8px 32px 8px 12px; /* extra right padding for the arrow */
    border:1px solid #ccc;
    border-radius:2em;
    font-size:1em;
    background:#fff;
    cursor:pointer;
    min-width:240px;
    color:var(--text);
    /* Remove native appearance */
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    /* Custom chevron on the right (SVG inline, currentColor) */
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23333' stroke-width='2' d='M1 1l5 5 5-5'/></svg>");
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:12px 8px;
}
/* Hide the default IE arrow */
.widgetPortfolio-filter-select::-ms-expand{
    display:none;
}

/* Item card (shared between slick and mur) */
.widgetPortfolio-item{
    padding:10px;
direction:ltr;
}
.widgetPortfolio-video{
    position:relative;
    width:100%;
    padding-bottom:56.25%; /* 16:9 */
    background:#000;
    border-radius:6px;
    overflow:hidden;
    margin-bottom:5px;
    cursor:pointer;
}
.widgetPortfolio-video iframe,
.widgetPortfolio-thumb{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    border:none;
    display:block;
    object-fit:cover; /* covers even if maxres has aspect variance */
}
.widgetPortfolio-video.is-playing{
    cursor:default;
}
/* Custom play button overlay (YouTube-style) */
.widgetPortfolio-play{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    border:none;
    cursor:pointer;
    padding:0;
    transition:opacity .25s;
    z-index:1;
    background:transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 138.28 138.28'%3E%3Cdefs%3E%3ClinearGradient id='g1' gradientUnits='userSpaceOnUse' x1='0' y1='14.6' x2='0' y2='65.6'%3E%3Cstop offset='0' stop-color='%23ddb97f'/%3E%3Cstop offset='.95' stop-color='%23ddb97f' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' gradientUnits='userSpaceOnUse' x1='0' y1='124.4' x2='0' y2='86.7' xlink:href='%23g1'/%3E%3C/defs%3E%3Ccircle cx='69.14' cy='69.14' r='69.14' fill='%231b1412' opacity='.8'/%3E%3Cpolygon points='55.21 92.28 93.07 69.14 55.21 46' fill='%23fff'/%3E%3Cpath fill='url(%23g1)' d='M124.68,66.85c-1.2-27.51-25.6-49.91-55.54-49.91S14.8,39.35,13.6,66.85c1.2-29.64,25.6-53.3,55.54-53.3s54.34,23.66,55.54,53.3Z'/%3E%3Cpath fill='url(%23g2)' d='M121.73,87.19c-7.5,20.78-28.21,34.11-52.59,34.11s-45.09-13.32-52.59-34.11c7.5,21.84,28.21,37.53,52.59,37.53s45.09-15.7,52.59-37.53Z'/%3E%3C/svg%3E");    background-repeat: no-repeat;
    background-size: contain;
    width: 96px;
    height: 96px;
    opacity:.7;
}
.widgetPortfolio-video:hover .widgetPortfolio-play{
    opacity:1;
}
.widgetPortfolio-play::before{
    content:'';
    position:absolute;
    top:50%; left:50%;
    transform:translate(-40%,-50%);
    width:0; height:0;
    border-style:solid;
    border-width:10px 0 10px 16px;
    border-color:transparent transparent transparent #fff;
}
.widgetPortfolio-nom{
    font-size:18px;
    margin:8px 0 4px 0;
color:var(--dore);
font-weight:600;
line-height:1.1em;
}
.widgetPortfolio-date{
    font-size:13px;
    color:#888;
    margin:0 0 6px 0;
}
.widgetPortfolio-descriptif{
    font-size:14px;
    line-height:1.3;
}




/* Mur mode: flex-wrap centered when items don't fill the row */
.widgetPortfolio-mur .widgetPortfolio-items{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0px;
}
.widgetPortfolio-mur .widgetPortfolio-item{
    flex:0 1 400px; /* base width 300px, can shrink but not grow */
    max-width:calc(33.333% - 14px); /* max 3 per row on wide screens */
}
@media (max-width:900px){
    .widgetPortfolio-mur .widgetPortfolio-item{ max-width:calc(50% - 10px); }
}
@media (max-width:600px){
    .widgetPortfolio-mur .widgetPortfolio-item{ max-width:100%; }
}

/* Slick mode: custom vanilla carousel */
.widgetPortfolio-slick{
max-width:1280px;
margin:30px auto 30px auto;
    position:relative;
    padding:30px 40px 0 40px; /* Space for the side arrows */
    --pf-visible:2;
}
.widgetPortfolio-slick::before{
content:'';
width:80%;
background:linear-gradient(to right, transparent, var(--text), transparent);
height:2px;
display:block;
position:relative;
top:-30px;
margin:auto;
}

.none > :not(.fullBkgImage, .colorDark) > .widgetPortfolio-slick::before{
background:linear-gradient(to right, transparent, var(--dore), transparent);
}

.none > :is(.fullBkgImage, .colorDark) .widgetPortfolio-nom{
color:var(--text)!important;    
}

.widgetPortfolio-viewport{
    overflow:hidden;
    width:100%;
}
.widgetPortfolio-track{
    display:flex;
    will-change:transform;
}
.widgetPortfolio-slick .widgetPortfolio-item{
    flex:0 0 calc(100% / var(--pf-visible));
    box-sizing:border-box;
    padding:0 10px;
    text-align:left;
}


.widgetPortfolio-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    transition:all .15s,transform .15s;
}

.widgetPortfolio-arrow-prev{
left:0px;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231b1412' d='M18,2L6,12l12,10V2z'/></svg>");
}
.widgetPortfolio-arrow-next{
right:0px;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231b1412' d='M6,2l12,10L6,22V2z'/></svg>");
}
.widgetPortfolio-arrow-prev:hover{
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231b141255' d='M18,2L6,12l12,10V2z'/></svg>");
}
.widgetPortfolio-arrow-next:hover{
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231b141255' d='M6,2l12,10L6,22V2z'/></svg>");
}

.none > :not(.fullBkgImage, .colorDark) > .widgetPortfolio-arrow-prev{
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ddb97f' d='M18,2L6,12l12,10V2z'/></svg>");    
}
.none > :not(.fullBkgImage, .colorDark) > .widgetPortfolio-arrow-next{
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ddb97f' d='M6,2l12,10L6,22V2z'/></svg>");
}
.none > :not(.fullBkgImage, .colorDark) > .widgetPortfolio-arrow-prev:hover{
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ddb97f55' d='M18,2L6,12l12,10V2z'/></svg>");    
}
.none > :not(.fullBkgImage, .colorDark) > .widgetPortfolio-arrow-next:hover{
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ddb97f55' d='M6,2l12,10L6,22V2z'/></svg>");
}


@media (max-width:767px){
    .widgetPortfolio-slick{
        --pf-visible:1;
    }
}

/* Empty state */
.widgetPortfolio-empty{
    padding:20px;
    text-align:center;
    color:#999;
    font-style:italic;
    border:1px dashed #ccc;
    border-radius:6px;
}
    
@media (max-width:960px){
.none:has(.widgetPortfolio){
margin-bottom:30px;
}

.widgetPortfolio-slick::before{
background:linear-gradient(to right, transparent, var(--dore), transparent);
}
    
.widgetPortfolio-arrow-prev{
left:0px;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ddb97f' d='M18,2L6,12l12,10V2z'/></svg>");
}
.widgetPortfolio-arrow-next{
right:0px;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ddb97f' d='M6,2l12,10L6,22V2z'/></svg>");
}
.widgetPortfolio-arrow-prev:hover{
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ddb97f55' d='M18,2L6,12l12,10V2z'/></svg>");
}
.widgetPortfolio-arrow-next:hover{
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ddb97f55' d='M6,2l12,10L6,22V2z'/></svg>");
}
    
}