/* === FILTRES === */
.container-bloc-portrait .portrait-filtres {flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-bottom: 4rem;}
.container-bloc-portrait .portrait-filtre {display: flex; align-items: center; padding: 1rem 2rem; font-size: 1.4rem; font-weight: 500; text-transform: uppercase; border: none; border-radius: .5rem; background: var(--couleur-principale); color: #fff; cursor: pointer; transition: var(--transition-light); width: max-content;}
.container-bloc-portrait .portrait-filtre.active {background: #8E0135;}

/* === GROUPES === */
.container-bloc-portrait .portrait-group {display: none;}
.container-bloc-portrait .portrait-group.active {display: block;}

.container-bloc-portrait .portrait-inner {display: flex; flex-direction: column; gap: 2rem;}

/* === MINIATURES === */
.container-bloc-portrait .portrait-thumbs {display: none; flex-direction: row; gap: 1rem; overflow-x: auto; padding-bottom: .5rem;}
.container-bloc-portrait .portrait-thumb {flex-shrink: 0; width: 7rem; height: calc((80vh - 3.6rem) / 4); /*hauteur du container - 3 gaps de 1.2rem / 4 slides*/ border: none; padding: 0; cursor: pointer; border-radius: var(--border-radius, .8rem); overflow: hidden; opacity: .35; transition: opacity 250ms ease; background-color: var(--couleur-secondaire); background-image: url(/wp-content/themes/iwego-child/images/grappe-couleur.svg); background-repeat: no-repeat; background-size: 4rem; background-position: center;}
.container-bloc-portrait .portrait-thumb.active {opacity: 1;}
.container-bloc-portrait .portrait-thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}

/* === CARROUSEL === */
.container-bloc-portrait .portrait-carousel-wrap  {position: relative; min-width: 0; border-radius: var(--border-radius);}
.container-bloc-portrait .portrait-slider {width: 100%;}
.container-bloc-portrait .portrait-slide-image {width: 100%; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--border-radius, 1.2rem); background-color: var(--couleur-secondaire);  background-image: url(/wp-content/themes/iwego-child/images/grappe-couleur.svg); background-repeat: no-repeat; background-size: 20rem; background-position: center;}
.container-bloc-portrait .portrait-slide-image img, .container-bloc-portrait .portrait-slide-image iframe {width: 100%; height: 100%; object-fit: cover; display: block;}
.container-bloc-portrait .portrait-slide-image iframe {width: calc(100% + .2rem); height: calc(100% + .2rem); margin: auto; object-fit: cover; border: none; display: block; }

.container-bloc-portrait .youtube-facade {position: relative; cursor: pointer; height: 100%;}
.container-bloc-portrait .youtube-facade img {width: 100%;  display: block;}
.container-bloc-portrait .play-button {position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%); width: 6rem; height: 6rem; border: none; border-radius: 50%; background-color: var(--couleur-principale); cursor: pointer; transition: var(--transition-light);}
.container-bloc-portrait .play-button::before {content: '';  position: absolute;  top: 50%; left: 55%; transform: translate(-50%, -50%); border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent white;}


/* === INFOS === */
.container-bloc-portrait .portrait-infos-wrap {position: relative; flex-direction: column;}
.container-bloc-portrait .portrait-info {display: none;}
.container-bloc-portrait .portrait-info.active {display: block;}
.container-bloc-portrait .portrait-info-chateau {font-size: 2rem; font-weight: 400; margin: 0 0 .5rem; line-height: 1.3; text-wrap: balance;}
.container-bloc-portrait .portrait-info-nom {font-size: 3rem; line-height: 1.1; margin: 0 0 2rem; text-wrap: balance;}
.container-bloc-portrait .portrait-info-desc {font-size: 1.4rem; line-height: 1.8; color: var(--couleur-texte);}
.container-bloc-portrait .portrait-info-desc p {margin: 0 0 .8rem;}

/* === LIENS & VIDÉO === */
.container-bloc-portrait .portrait-links {gap: 1.2rem; flex-wrap: wrap; margin: 2rem 0; align-items: center;}
.container-bloc-portrait .portrait-btn-ts {font-size: 1.4rem; margin-top: 2rem;}
.container-bloc-portrait .portrait-link-icon {width: 3.8rem; height: 3.8rem; border-radius: 50%; align-items: center; justify-content: center; font-size: 1.6rem; border: .2rem solid var(--couleur-texte); transition: var(--transition-light);}
.container-bloc-portrait .portrait-video {position: relative; width: 100%; padding-top: 56.25%; margin-top: 2rem; border-radius: var(--border-radius, 1.2rem); overflow: hidden;}
.container-bloc-portrait .portrait-video iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: none;}

/* === NAVIGATION === */
.container-bloc-portrait .portrait-nav {display: flex; gap: 1rem; margin-bottom: 2.5rem; order: -1;}
.container-bloc-portrait .portrait-prev, .container-bloc-portrait .portrait-next {width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--couleur-cta); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; transition: background 200ms ease;}
.container-bloc-portrait .portrait-prev.slick-disabled, .container-bloc-portrait .portrait-next.slick-disabled {opacity: .35; pointer-events: none;}

/* === HOVER === */
@media (hover: hover) {
    .container-bloc-portrait .portrait-prev:hover, .container-bloc-portrait .portrait-next:hover {background: var(--couleur-texte);}
    .container-bloc-portrait .portrait-thumb:not(.active):hover {opacity: .7;}
    .container-bloc-portrait .portrait-filtre:hover {background: #8E0135;}
    .container-bloc-portrait .portrait-link-icon:hover {background: var(--couleur-principale); color: #fff; border-color: var(--couleur-principale);}
    .container-bloc-portrait .play-button:hover {background-color: #8E0135;}
}

/* === TABLETTE === */
@media (min-width: 768px) {
    .container-bloc-portrait .portrait-thumb {width: 9rem;}
    .container-bloc-portrait .portrait-slide-image {aspect-ratio: unset; height: 60rem;}
    
}

/* === DESKTOP === */
@media (min-width: 1025px) {
    .container-bloc-portrait .portrait-inner {display: grid; grid-template-columns: 1fr 45rem; align-items: start;}
    .container-bloc-portrait .portrait-thumb {width: 100%; flex-shrink: 0;}
    .container-bloc-portrait .portrait-carousel-wrap {height: 65vh; overflow: hidden;}
    .container-bloc-portrait .portrait-slider {height: 100%;}
    .container-bloc-portrait .portrait-slider .slick-list {height: 100% !important;}
    .container-bloc-portrait .portrait-slider .slick-track {height: 100% !important;}
    .container-bloc-portrait .portrait-slider .slick-slide {height: 100%;}
    .container-bloc-portrait .portrait-slider .slick-slide > div {height: 100%;}
    .container-bloc-portrait .portrait-slide {height: 100%;}
    .container-bloc-portrait .portrait-slide-image {height: 100%;}
    .container-bloc-portrait .portrait-infos-wrap {height: 65vh; display: flex; flex-direction: column; overflow: visible; justify-content: center;}
    .container-bloc-portrait .portrait-infos {overflow: hidden;}
    .container-bloc-portrait .portrait-info.active {height: 100%; overflow-y: scroll; scrollbar-width: none; padding-right: 2.5rem;}
    .container-bloc-portrait .portrait-info.active::-webkit-scrollbar {display: none;}
    .container-bloc-portrait .portrait-info-chateau {font-size: 2.2rem;}
    .container-bloc-portrait .portrait-info-nom {font-size: 4rem; margin-bottom: 3rem;}
    .container-bloc-portrait .portrait-nav {flex-shrink: 0; order: initial; margin-top: 2.5rem; margin-bottom: 0; padding-top: .5rem;}
    
}



@media (min-width: 1400px) {
    .container-bloc-portrait .portrait-infos {padding: 0 6rem 2rem 5rem;}
    .container-bloc-portrait .portrait-inner {grid-template-columns: 20rem 1fr 55rem;}
    .container-bloc-portrait .portrait-info-chateau {font-size: 2.8rem;}
    .container-bloc-portrait .portrait-nav {margin-left: 5rem;}
    .container-bloc-portrait .portrait-info-nom {font-size: 5rem;}
    .container-bloc-portrait .portrait-thumbs {display: flex; flex-direction: column; overflow-x: visible; overflow-y: scroll; scrollbar-width: none; height: 80vh; gap: 1.2rem; padding-bottom: 0;}
    .container-bloc-portrait .portrait-thumbs::-webkit-scrollbar {display: none;}
    .container-bloc-portrait .portrait-carousel-wrap {height: 80vh;}
        .container-bloc-portrait .portrait-infos-wrap {height: 80vh;}


}

@media (min-width: 1800px) {
    .container-bloc-portrait .portrait-infos {padding: 0 6rem 2rem;}
    .container-bloc-portrait .portrait-inner {grid-template-columns: 25rem 1fr 70rem;}
    .container-bloc-portrait .portrait-nav {margin-left: 6rem;}
}

@media (min-width: 2000px) {
    .container-bloc-portrait .portrait-inner {grid-template-columns: 30rem 1fr 75rem;}
}