/**
 * Cabrio Carousel : styles des deux blocs.
 *
 * Jusqu'à la 1.4.0, chaque carrousel imprimait ces règles dans la page, une
 * fois par carrousel. Depuis la 1.5.0 elles sont ici, chargées une seule fois
 * et seulement sur les pages qui ont un carrousel.
 *
 * @package cab-carousel
 * @since   1.5.0
 */

/* ===== Carrousel animé (Owl Carousel) ===== */

@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

.cab-animated-wrapper .cab-animated-hero .item { min-height: 80vh; height: auto; position: relative; display: flex; }
.cab-animated-wrapper .cab-animated-hero .item img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; z-index: 0; }
.cab-animated-wrapper .cab-animated-hero .item .cover { position: relative; width: 100%; height: auto; min-height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; text-align: left; z-index: 1; padding: 40px 100px !important; }

@media (max-width: 991px) { .cab-animated-wrapper .cab-animated-hero .item .cover { padding: 40px 50px !important; } }
@media (max-width: 767px) { .cab-animated-wrapper .cab-animated-hero .item .cover { padding: 40px 15px !important; } }

/* 1.7.2 : le texte posé sur le voile sombre est blanc en entier, comme la .carousel-caption de
   Bootstrap, et pas seulement les titres : le bouton Contour du thème suit la couleur du texte
   autour de lui et restait de la couleur de la page. */
.owl-carousel.owl-theme.cab-animated-hero .item .cover .header-content { position: relative; padding: 40px; overflow: hidden; width: 100%; color: #fff; }
.cab-animated-wrapper .cab-animated-hero .item .cover .header-content { width: 80%; }
@media (max-width: 768px) { .cab-animated-wrapper .cab-animated-hero .item .cover .header-content { width: 100%; } }

.owl-carousel.owl-theme.cab-animated-hero .item .cover .header-content .line { content: ""; display: inline-block; width: 100%; height: 100%; left: 0; top: 0; position: absolute; border: 9px solid #fff; -webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%); clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%); }
.owl-carousel.owl-theme.cab-animated-hero .item .cover .header-content .h2 { font-weight: 300; font-size: 28px; color: #fff; }
.owl-carousel.owl-theme.cab-animated-hero .item .cover .header-content .h1 { font-size: 46px; font-weight: 600; margin: 5px 0 20px; word-spacing: 3px; color: #fff; }
.owl-carousel.owl-theme.cab-animated-hero .item .cover .header-content .h4 { font-size: 20px; font-weight: 300; line-height: 32px; color: #fff; margin-bottom: 0; }

@media (max-width: 768px) {
    .owl-carousel.owl-theme.cab-animated-hero .item .cover .header-content .h2 { font-size: 18px; }
    .owl-carousel.owl-theme.cab-animated-hero .item .cover .header-content .h1 { font-size: 28px; margin: 5px 0 12px; word-spacing: 1px; }
    .owl-carousel.owl-theme.cab-animated-hero .item .cover .header-content .h4 { font-size: 14px; line-height: 22px; }
    .owl-carousel.owl-theme.cab-animated-hero .item .cover { padding: 30px 15px !important; }
}

/* Très étroit (colonne de contenu de 645px, par exemple) */
@media (max-width: 700px) {
    .owl-carousel.owl-theme.cab-animated-hero .item .cover .header-content .h2 { font-size: 16px; }
    .owl-carousel.owl-theme.cab-animated-hero .item .cover .header-content .h1 { font-size: 24px; margin: 4px 0 10px; }
    .owl-carousel.owl-theme.cab-animated-hero .item .cover .header-content .h4 { font-size: 12px; line-height: 18px; }
    .owl-carousel.owl-theme.cab-animated-hero .item .cover { padding: 25px 10px !important; }
    .cab-animated-wrapper .cab-animated-hero .item .cover .header-content { width: 100%; padding: 20px !important; }
}

/* Animations de la diapositive affichée */
.owl-carousel.owl-theme.cab-animated-hero .owl-item.active .h1,
.owl-carousel.owl-theme.cab-animated-hero .owl-item.active .h2 { animation-duration: 1s; animation-fill-mode: both; animation-name: fadeInDown; animation-delay: 0.3s; }
.owl-carousel.owl-theme.cab-animated-hero .owl-item.active .h4 { animation-duration: 1s; animation-fill-mode: both; animation-name: fadeInUp; animation-delay: 0.3s; }
.owl-carousel.owl-theme.cab-animated-hero .owl-item.active .line { animation-duration: 1s; animation-fill-mode: both; animation-name: fadeInLeft; animation-delay: 0.3s; }
.owl-carousel.owl-theme.cab-animated-hero .owl-item.active .cab-hero-btns { animation-duration: 1s; animation-fill-mode: both; animation-name: fadeInUp; animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
    .owl-carousel.owl-theme.cab-animated-hero .owl-item.active .h1,
    .owl-carousel.owl-theme.cab-animated-hero .owl-item.active .h2,
    .owl-carousel.owl-theme.cab-animated-hero .owl-item.active .h4,
    .owl-carousel.owl-theme.cab-animated-hero .owl-item.active .line,
    .owl-carousel.owl-theme.cab-animated-hero .owl-item.active .cab-hero-btns { animation: none; }
}

/* Flèches : un chevron, sans Font Awesome (1.5.0 ; l'icône s'ajoutait au caractère, « ‹‹ »).
   1.6.1 : le bouton est remis à zéro ici (bordure, marge intérieure), car la copie d'Owl d'un
   thème peut être plus ancienne que la nôtre et ne pas le faire (Owl 2.2.1 de Cabrio Electro :
   d'où la bordure du navigateur autour du carré). Le chevron est un SVG centré
   (assets/js/cab-carousel-animated.js). */
.owl-carousel.owl-theme.cab-animated-hero .owl-nav .owl-prev,
.owl-carousel.owl-theme.cab-animated-hero .owl-nav .owl-next { position: absolute; top: 43%; opacity: 0; transition: all 0.4s ease-out; background: rgba(0, 0, 0, 0.5) !important; box-sizing: border-box; width: 40px; height: 40px; padding: 0 !important; border: 0; display: flex; align-items: center; justify-content: center; z-index: 1000; border-radius: 0; color: #fff; line-height: 0; cursor: pointer; }
.owl-carousel.owl-theme.cab-animated-hero .owl-nav .owl-prev { left: 15px; }
.owl-carousel.owl-theme.cab-animated-hero .owl-nav .owl-next { right: 15px; }
.owl-carousel.owl-theme.cab-animated-hero .owl-nav .cab-carousel-chevron { display: block; flex: none; width: 20px; height: 20px; pointer-events: none; }
.owl-carousel.owl-theme.cab-animated-hero:hover .owl-prev,
.owl-carousel.owl-theme.cab-animated-hero .owl-prev:focus-visible { left: 0; opacity: 1; }
.owl-carousel.owl-theme.cab-animated-hero:hover .owl-next,
.owl-carousel.owl-theme.cab-animated-hero .owl-next:focus-visible { right: 0; opacity: 1; }

/* Avant qu'Owl démarre (et dans l'éditeur) : la première diapositive seule.
   Sans ça, la règle `.owl-carousel { display: none }` d'Owl masque le bloc. */
.cab-animated-hero.owl-carousel:not(.owl-loaded) { display: block !important; }
.cab-animated-hero.owl-carousel:not(.owl-loaded) .item { display: block !important; width: 100% !important; margin: 0 !important; min-height: 300px; }
.cab-animated-hero.owl-carousel:not(.owl-loaded) .item:not(:first-child) { display: none !important; }
.cab-animated-hero.owl-carousel:not(.owl-loaded) .owl-nav,
.cab-animated-hero.owl-carousel:not(.owl-loaded) .owl-dots { display: none !important; }

.cab-animated-hero { margin-bottom: 0 !important; }
.cab-animated-hero .owl-nav { margin: 0 !important; padding: 0 !important; height: 0 !important; line-height: 0 !important; }
.cab-animated-hero .owl-dots { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }

/* ===== Carrousel Bootstrap ===== */

/* Jusqu'à la 1.4.0 écrite sans portée : elle déplaçait aussi les légendes des carrousels du thème.
   Trois classes : le Bootstrap réduit (.cab-carousel .carousel-caption) est chargé après ce fichier. */
.cab-carousel.wp-block-cab-carousel-bootstrap .carousel-caption { bottom: 3rem; }
/* 1.8.1 : le voile et la transparence du chapeau sans dépendre de Bootstrap 5.1+. Les classes
   bg-black, opacity-50 et opacity-75 n'existent pas dans un Bootstrap 5.0 (Cabrio Electro) :
   le voile ne paraissait pas et le texte blanc devenait illisible sur une photo claire. */
.cab-carousel .carousel-overlay { background-color: #000; opacity: .5; }
.cab-carousel .carousel-caption .opacity-75 { opacity: .75; }
/* 1.10.0 : le titre tient en deux lignes au plus, coupé par des points de suspension. Un titre
   d'article de trois lignes en grand corps repoussait le chapeau et les boutons hors de la photo. */
.cab-carousel.wp-block-cab-carousel-bootstrap .carousel-caption h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* ===== Les trois blocs (1.6.0) ===== */

/* L'arrondi vient du réglage Bordure de WordPress, posé sur l'enveloppe : le contenu le suit. */
.cab-carousel { overflow: hidden; }
.cab-carousel .carousel,
.cab-carousel .cab-animated-wrapper { border-radius: inherit; }

/* Encart à côté du carrousel : 3/4 - 1/4 sur grand écran, 7/12 - 5/12 en dessous, l'un sous l'autre sur tablette et téléphone. */
.cab-carousel__layout { display: flex; flex-wrap: wrap; align-items: stretch; }
.cab-carousel__main { flex: 1 1 100%; min-width: 0; }
.cab-carousel__aside { flex: 1 1 100%; position: relative; min-height: 22rem; }
@media (min-width: 992px) {
    .cab-carousel__main { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .cab-carousel__aside { flex: 0 0 41.6667%; max-width: 41.6667%; }
}
@media (min-width: 1200px) {
    .cab-carousel__main { flex: 0 0 75%; max-width: 75%; }
    .cab-carousel__aside { flex: 0 0 25%; max-width: 25%; }
}

/* 1.8.0 : la couleur d'accent de l'encart et des flèches de repli. Sous un thème Bootstrap,
   son primaire ; sinon le blanc de l'encart (inc/functions/assets.php). Un thème la règle
   sur le bloc : --cab-carousel-accent et --cab-carousel-accent-contrast (texte posé dessus). */
:where(.cab-carousel) { --cab-carousel-accent: var(--bs-primary, #fff); --cab-carousel-accent-contrast: #fff; }
.cab-carousel-panel { overflow: hidden; color: #fff; }
.cab-carousel-panel__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cab-carousel-panel__label { position: absolute; top: 20px; left: 20px; right: 20px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.cab-carousel-panel__label > span:last-child { color: var(--cab-carousel-accent); font-weight: 700; font-size: 1.1rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.cab-carousel-panel__badge { background: var(--cab-carousel-accent); color: var(--cab-carousel-accent-contrast); border-radius: .375rem; padding: .5rem 1.5rem; font-size: 1rem; }
.cab-carousel-panel__overlay { position: absolute; inset: 0; z-index: 1; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: rgba(0, 0, 0, .3); }
.cab-carousel-panel__content { text-align: center; padding: 1.5rem; }
.cab-carousel-panel__terms { display: block; margin-bottom: .5rem; color: rgba(255, 255, 255, .5); }
.cab-carousel-panel__terms a { color: inherit; text-decoration: none; }
.cab-carousel .cab-carousel-panel__title { display: block; color: #fff; font-size: calc(1.3rem + .6vw); line-height: 1.2; text-decoration: none; }
@media (min-width: 1200px) { .cab-carousel .cab-carousel-panel__title { font-size: 1.75rem; } }
.cab-carousel-panel__excerpt { margin: .5rem 0 0; color: rgba(255, 255, 255, .5); font-size: .875em; }
.cab-carousel-panel__prices { margin: .5rem 0 0; font-size: 1.25rem; }
.cab-carousel-panel__prices del { color: #fff; margin-right: .5rem; }
.cab-carousel-panel__prices ins { color: var(--cab-carousel-accent); text-decoration: none; }

/* ===== Carrousel vitrine (1.6.0) ===== */

.wp-block-cab-carousel-hero:not(.has-background) { background-color: #f8f9fa; }
.cab-hero__item { display: grid; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1200px) { .cab-hero__item { grid-template-columns: 1fr 1fr; } }
.cab-hero__media img { display: block; width: 100%; height: auto; }
/* 1.10.1 : UNE MÊME HAUTEUR POUR TOUTES LES DIAPOSITIVES, ENTRE UN MINIMUM ET UN MAXIMUM. Owl pose les
   diapositives côte à côte : la vitrine prenait la hauteur de la plus haute, et une photo paysage
   laissait un vide sous elle. Désormais le script les égalise (comme le carrousel animé), la photo
   remplit sa colonne en se recadrant, et la hauteur reste entre les deux bornes, que le thème peut
   régler sur le bloc : --cab-hero-min-height et --cab-hero-max-height. Sur deux colonnes seulement :
   empilées (moins de 1200 px), la photo garde un cadre 16/9 et le texte passe dessous. */
.wp-block-cab-carousel-hero { --cab-hero-min-height: 32rem; --cab-hero-max-height: 42rem; }
.cab-hero__media img { aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 1200px) {
    .cab-hero__item { align-items: stretch; min-height: var(--cab-hero-min-height); max-height: var(--cab-hero-max-height); overflow: hidden; }
    .cab-hero__media { position: relative; }
    .cab-hero__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
    .cab-hero__content { align-self: center; }
}
.cab-hero__content { padding: 1.5rem; }
.cab-hero__tagline { margin: 0 0 1.5rem; font-size: calc(1.275rem + .3vw); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.cab-hero__title { margin: 0 0 1.5rem; font-size: calc(1.575rem + 3.9vw); font-weight: 300; line-height: 1.2; text-transform: capitalize; }
@media (min-width: 1200px) {
    .cab-hero__tagline { font-size: 1.5rem; }
    .cab-hero__title { font-size: 4.5rem; }
}
.cab-hero__text > :last-child { margin-bottom: 0; }
.cab-hero__buttons { margin-top: 1.5rem; }

/* Boutons (1.7.0) : boutons de WordPress, habillés par le thème ; l'extension ne fait que les aligner. */
.cab-carousel .cab-carousel-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Légendes sur photo : l'écart d'avant (marge .me-2 et espace entre les liens). */
.cab-carousel .cab-hero-btns.cab-carousel-buttons,
.cab-carousel .carousel-caption .cab-carousel-buttons { column-gap: .75rem; }
.cab-carousel .carousel-caption.text-center .cab-carousel-buttons { justify-content: center; }
.cab-carousel .carousel-caption.text-end .cab-carousel-buttons { justify-content: flex-end; }
.cab-carousel .cab-carousel-buttons > .wp-block-button { margin: 0; }

/* Flèches rondes en bas à droite, comme l'en-tête d'accueil de Cabrio Electro.
   1.6.2 : chevron SVG centré (assets/js/cab-carousel-animated.js) au lieu de ← → ; taille
   comptée bordure comprise et sans marge intérieure, pour rester un rond de 50 px même
   quand ni le thème ni sa copie d'Owl ne le font. */
.cab-hero-carousel.owl-carousel .owl-nav { margin: 0; }
/* 1.8.0 : la forme seule ; les couleurs viennent du thème (wp-element-button) ou du repli ci-dessous. */
.cab-hero-carousel.owl-carousel .owl-nav .cab-hero__nav { position: absolute; bottom: 1.5rem; box-sizing: border-box; width: 50px; height: 50px; margin: 0; padding: 0 !important; border-radius: 30px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 0; cursor: pointer; }
.cab-hero-carousel.owl-carousel .owl-nav .cab-hero__nav--prev { right: 130px; }
.cab-hero-carousel.owl-carousel .owl-nav .cab-hero__nav--next { right: 60px; }
/* Repli, sous un thème qui ne dessine pas ses boutons : la couleur d'accent, sans bordure
   (la copie d'Owl de Cabrio Electro ne remet pas les boutons à zéro : 2 px en relief). */
.cab-hero-carousel.owl-carousel .owl-nav .cab-hero__nav:not(.wp-element-button) { border: 0; background: var(--cab-carousel-accent); color: var(--cab-carousel-accent-contrast); transition: background-color .5s; }
.cab-hero-carousel.owl-carousel .owl-nav .cab-hero__nav:not(.wp-element-button):hover,
.cab-hero-carousel.owl-carousel .owl-nav .cab-hero__nav:not(.wp-element-button):focus-visible { background: var(--bs-secondary, #6c757d); color: #fff; }
.cab-hero-carousel.owl-carousel .owl-nav .cab-carousel-chevron { display: block; flex: none; width: 20px; height: 20px; pointer-events: none; }

/* Avant qu'Owl démarre (et dans l'éditeur) : la première diapositive seule. */
.cab-hero-carousel.owl-carousel:not(.owl-loaded) { display: block; }
.cab-hero-carousel.owl-carousel:not(.owl-loaded) > .cab-hero__item:not(:first-child) { display: none; }