/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* ============================================================
   SOMMAIRE
   ------------------------------------------------------------
   1.  TYPOGRAPHIE & CLASSES UTILITAIRES
   2.  ICÔNES SVG (Union.svg)
   3.  MARQUEE — Défilement avec fondu latéral
   4.  OWL CAROUSEL — Flèches, points, responsive
   5.  ONGLETS — Style toggle arrondi
   6.  FORMULAIRES ELEMENTOR — Champs & labels flottants
   7.  WIDGET ICÔNE — Correction line-height SVG
   8.  POPUP ELEMENTOR — Animation wave
   9.  MENU SOULIGNÉ — Trait animé + icône fleur
   10. HEADER — Z-index & bannière
   11. PAGINATION MSW
   12. WOOCOMMERCE — Breadcrumb, badge promo, prix
   13. GALERIE PRODUIT WOOCOMMERCE
   14. ATTRIBUTS PRODUIT WOOCOMMERCE — Affichage inline
   15. ACCORDÉON ELEMENTOR — Layout & radius
   16. LISTE BIENFAITS — Items avec icône fleur
   17. LANGUAGE SWITCHER (TranslatePress)
   18. CONTENT CAROUSEL — Responsive margin
   19. ANIMATIONS — Slide up/down sur loops & carousels
   20. RESPONSIVE — Règles mobiles globales
   ============================================================ */


/* ============================================================
   1. TYPOGRAPHIE & CLASSES UTILITAIRES
   ============================================================ */

/* Lien souligné (classe utilitaire) */
.lien-souligne a,
.lien-souligne a:hover {
    text-decoration: underline !important;
}

.lien-souligne a:hover {
    opacity: 0.7;
}

/* Texte en gras coloré en vert */
.texte-vert strong {
    color: #03521D;
}

/* Supprime la marge basse du dernier paragraphe */
.no-last-margin p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   2. ICÔNES SVG (Union.svg)
   ============================================================ */

/* Icône avant le sur-titre (inline) */
.sur-titre-icone .elementor-heading-title::before {
    content: url("/wp-content/uploads/2026/04/Union.svg");
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

/* Icône devant chaque item du menu catégories */
.menu-categories li::before {
    content: url("/wp-content/uploads/2026/04/Union.svg");
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    vertical-align: middle;
}

/* Icône centrée au-dessus du titre de carte engagement */
.carte-engagement .elementor-icon-box-title {
    text-align: center;
}

.carte-engagement .elementor-icon-box-title::before {
    content: url("/wp-content/uploads/2026/04/Union.svg");
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto 6px;
}


/* ============================================================
   3. MARQUEE — Défilement avec fondu latéral
   ============================================================ */

.marquee-fade {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );
}


/* ============================================================
   4. OWL CAROUSEL — Flèches, points & responsive
   ============================================================ */

/* Fond transparent sur les boutons flèches */
button.owl-prev,
button.owl-next {
    background: transparent !important;
}

/* Icônes SVG des flèches via pseudo-élément */
button.owl-prev::before,
button.owl-next::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--e-global-color-primary);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

button.owl-prev::before {
    -webkit-mask-image: url("/wp-content/uploads/2026/05/arrow-left.svg");
            mask-image: url("/wp-content/uploads/2026/05/arrow-left.svg");
}

button.owl-next::before {
    -webkit-mask-image: url("https://le-sanctuaire.ca/wp-content/uploads/2026/05/arrow-right.svg");
            mask-image: url("https://le-sanctuaire.ca/wp-content/uploads/2026/05/arrow-right.svg");
}

/* Flèches désactivées (fin de slider) */
button.owl-next.disabled,
button.owl-prev.disabled {
    display: block !important;
    opacity: 0.3;
}

/* Points de pagination */
button.owl-dot {
    border: 1px solid #D1E9A4 !important;
}

button.owl-dot.active {
    border: 1px solid #FEA002 !important;
}

/* ========================================
   Owl Carousel — Correctifs globaux
   ======================================== */

/* Overflow visible UNIQUEMENT sur mobile (<767px) 
   pour permettre au hover/zoom de déborder.
   Sur mobile/tablette, on garde overflow hidden 
   pour que le swipe fonctionne correctement. */
@media (max-width: 767px) {
  .owl-carousel .owl-stage-outer {
    overflow: visible !important;
  }
}

/* Z-index au survol pour passer au-dessus des items voisins */
.owl-item {
  position: relative;
}

.owl-item:hover {
  z-index: 10;
}

/* ========================================
   Owl Carousel — Flèches de navigation
   ======================================== */

/* Suppression du box-shadow sur toutes les flèches, 
   sur toutes les media queries et tous les états */
.owl-nav button.owl-prev,
.owl-nav button.owl-next,
.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover,
.owl-nav button.owl-prev:focus,
.owl-nav button.owl-next:focus,
.owl-nav button.owl-prev:active,
.owl-nav button.owl-next:active {
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
    /* Cartes avec zoom au survol */
    .carousel-zoom-cards .owl-item .uc_image_carousel_container_holder {
        cursor: pointer;
        transition: transform 0.4s ease !important;
    }
    .carousel-zoom-cards .owl-item .uc_image_carousel_container_holder:hover {
        transform: scale(1.03) !important;
    }
    .carousel-zoom-cards .owl-item .ue-card-valeur {
        transition: transform 0.5s ease !important;
    }
    .carousel-zoom-cards .owl-item .ue-card-valeur:hover {
        transform: scale(1.04) !important;
    }
}


/* ============================================================
   5. ONGLETS — Style toggle arrondi (Pros / Particuliers)
   ============================================================ */

/* Onglet gauche */
.e-n-tab-title[data-tab-index="1"] {
    border-radius: 20px 0 0 20px !important;
}

/* Onglet droit */
.e-n-tab-title[data-tab-index="2"] {
    border-radius: 0 20px 20px 0 !important;
}


/* ============================================================
   6. FORMULAIRES ELEMENTOR — Champs & labels flottants
   ============================================================ */

/* Mode particulier : champ nom en pleine largeur */
.elementor-form.mode-particulier .elementor-field-group-name {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Couleur du placeholder */
.elementor-field::placeholder {
    color: #FDF9EE;
}

/* Curseur de saisie blanc */
.elementor-form .elementor-field {
    caret-color: #fff;
}

/* Label flottant — masqué par défaut */
.elementor-form .elementor-field-group:not(.elementor-field-type-upload) .elementor-field-label {
    position: absolute;
    top: -2px;
    left: 30px;
    z-index: 99;
    padding: 5px;
    font-size: 0.7rem;
    background-color: #D1E9A4;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 300ms ease;
}

/* Label visible quand un input text/email est rempli ou focus */
.elementor-form .elementor-field-group:not(.elementor-field-type-upload):has(input:not(:placeholder-shown)) .elementor-field-label,
.elementor-form .elementor-field-group:not(.elementor-field-type-upload):has(input:focus) .elementor-field-label {
    opacity: 1;
}

/* Label visible quand un select a une valeur choisie */
.elementor-form .elementor-field-group:not(.elementor-field-type-upload):has(select option[value=""]:not(:checked)) .elementor-field-label {
    opacity: 1;
}

/* Label visible quand le textarea est rempli */
.elementor-form .elementor-field-group:not(.elementor-field-type-upload):has(textarea:not(:placeholder-shown)) .elementor-field-label {
    opacity: 1;
}

/* Padding des inputs */
.elementor-form input {
    padding: 10px 20px;
}

/* Style du textarea */
.elementor-form textarea {
    padding: 12px 15px;
    border-radius: 22px !important;
}


/* ============================================================
   7. WIDGET ICÔNE ELEMENTOR — Correction line-height SVG
   ============================================================ */

.elementor-widget-icon,
.elementor-widget-icon * {
    line-height: 0;
}

.elementor-widget-icon svg {
    display: block;
}


/* ============================================================
   8. POPUP ELEMENTOR — Animation wave
   ============================================================ */

/* Animation d'ouverture du popup */
.dialog-widget-content.dialog-lightbox-widget-content.animated.fadeIn {
    overflow: hidden;
    animation: customWaveAnim 0.7s ease-in-out forwards !important;
}

/* Animation de fermeture du popup */
.dialog-widget-content.dialog-lightbox-widget-content.animated.fadeIn.reverse {
    animation: customWaveAnimReverse 0.7s ease-in-out forwards !important;
}

/* Sécurité : pendant l'animation, le bouton burger est désactivé */
.dialog-widget-content.dialog-lightbox-widget-content.animated:not(.fadeIn-done) ~ * .elementor-icon-wrapper {
    pointer-events: none;
}

/* Fond du popup transparent */
.elementor-popup-modal {
    background: none !important;
}

/* Pendant l'animation : visuel "désactivé" sur les éléments interactifs */
body.popup-animating .elementor-icon-wrapper,
body.popup-animating .elementor-menu-toggle,
body.popup-animating .dialog-close-button,
body.popup-animating .dialog-lightbox-close-button,
body.popup-animating a[href*="#elementor-action"] {
    cursor: wait !important;
    pointer-events: none;
}

/* Empêche un clic sur un bouton popup spécifique */
.popupBtn--disabled {
    pointer-events: none;
}

/* Keyframes — ouverture */
@keyframes customWaveAnim {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% -50%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

/* Keyframes — fermeture */
@keyframes customWaveAnimReverse {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% -50%);
    }
}


/* ============================================================
   9. MENU SOULIGNÉ — Trait animé + icône fleur
   ============================================================ */

/* Icône fleur uniquement sur le menu catégories */
.menu-soulignes .elementor-nav-menu li {
    display: flex !important;
    align-items: center;
}

.menu-categories.menu-soulignes .elementor-nav-menu li::before {
    content: url("/wp-content/uploads/2026/04/Union.svg");
    position: relative;
    top: -6px;
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 12px;
}

/* Items du menu : préparation pour le trait */
.menu-soulignes .elementor-nav-menu li a {
    position: relative;
    display: inline-block;
    padding-bottom: 12px !important;
}

/* Trait fixe sous le texte */
.menu-soulignes .elementor-nav-menu li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: #ffffff;
    transition: width 0.4s ease;
}

/* Animation au survol */
.menu-soulignes .elementor-nav-menu li a:hover::after {
    width: 100%;
}

/* Item actif */
.menu-soulignes .elementor-nav-menu li.current-menu-item a::after {
    width: 100%;
}


/* ============================================================
   10. HEADER — Z-index & bannière icônes
   ============================================================ */

header[data-elementor-type="header"] {
    position: relative;
    z-index: 999;
}

.banner-icon-list {
    transition: opacity 0.2s ease-in-out;
}

body.dialog-prevent-scroll .banner-icon-list {
    opacity: 0;
}


/* ============================================================
   11. PAGINATION MSW
   ============================================================ */

/* Conteneur de la pagination */
.msw-pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.msw-pagination {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Style commun à tous les éléments de pagination */
.msw-pagination .msw-pagination__page,
.msw-pagination .msw-pagination__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-family: "Lexend", sans-serif;
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 600px;
    backdrop-filter: blur(5px);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Page active (numéro courant) — cercle vert avec texte blanc */
.msw-pagination .msw-pagination__page--current,
.msw-pagination button.msw-pagination__page--current {
    color: #ffffff !important;
    background: #03521D !important;
    border-radius: 600px;
}

/* Survol des autres pages */
.msw-pagination .msw-pagination__page:not(.msw-pagination__page--current):hover {
    color: #ffffff;
    background: #03521D;
}

/* Flèches Précédent / Suivant (état actif) */
.msw-pagination .msw-pagination__nav {
    padding: 0;
    font-family: "Lexend", sans-serif;
    font-size: 24px;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    color: #03521D;
    background: #D1E9A4;
    border-radius: 8px;
}

/* Survol des flèches actives */
.msw-pagination .msw-pagination__nav:not(:disabled):not([aria-disabled="true"]):hover {
    color: #ffffff;
    background: #03521D;
}

/* Flèches désactivées */
.msw-pagination .msw-pagination__nav:disabled,
.msw-pagination .msw-pagination__nav[aria-disabled="true"] {
    color: #B0B0B0;
    background: #F0F0F0;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Badges actifs MSW */
.msw-active-badges .msw-active-badge__label {
    overflow: visible;
}

/* Barre de recherche filtres MSW */
.msw-filters-search {
    padding: 0;
    padding-left: 20px;
    margin-bottom: 22px;
}

/* .msw-filters-search__icon {
    left: 16px;
} */

.msw-filters-toggle {
  border-radius: 20px !important;
  font-size: 16px !important;
  gap: 12px !important;
}

/* Agrandir l'icône (les 3 traits) */
.msw-filters-toggle .msw-filters-toggle__icon {
  width: 22px !important;
  height: 22px !important;
}

/* Agrandir le label "Filtres" */
.msw-filters-toggle .msw-filters-toggle__label {
  font-size: 16px !important;
}

/* Agrandir la pastille du compteur */
.msw-filters-toggle .msw-filters-toggle__count {
  width: 26px !important;
  height: 26px !important;
  font-size: 14px !important;
  line-height: 26px !important;
}


/* ============================================================
   12. WOOCOMMERCE — Breadcrumb, badge promo & prix
   ============================================================ */

/* Reset breadcrumb */
.woocommerce .woocommerce-breadcrumb {
    margin: 0;
}

/* Reset marge tableau attributs (avant restyle section 14) */
.woocommerce table.shop_attributes {
    margin-bottom: 0;
}

/* Prix barré (ancien prix) */
.price del {
    font-size: 1rem;
}

/* Badge promo (.prixPromo) affiché uniquement sur produits en solde */
.prixPromo {
    display: none !important;
}

.e-loop-item.sale .prixPromo {
    display: flex !important;
}

/* Badge "Promo!" / "-XX%" sur fiche produit et archives */
.woocommerce span.onsale {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 0 !important;
    right: auto !important;
    left: 0 !important;
    width: 80px !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 0 !important;
    padding: 16px !important;
    font-family: "Lexend", sans-serif !important;
    font-size: 1.1rem !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    color: #FFFFFF !important;
    background-color: #C20919 !important;
    border-radius: 20px 0 20px 0 !important;
}


/* ============================================================
   13. GALERIE PRODUIT WOOCOMMERCE — Layout & radius
   ============================================================ */

/* Conteneur de la galerie : ratio 4/3 fixe */
.elementor-element-648e6d4 .woocommerce-product-gallery__image {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

/* Lien wrapper de l'image principale */
.elementor-element-648e6d4 .woocommerce-product-gallery__image > a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Image principale uniquement (PAS le zoomImg, le script gère) */
.elementor-element-648e6d4 .woocommerce-product-gallery__image > a > img.wp-post-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

/* Border-radius stable sur tous les wrappers de la galerie */
.elementor-element-648e6d4 .woocommerce-product-gallery,
.elementor-element-648e6d4 .woocommerce-product-gallery .flex-viewport,
.elementor-element-648e6d4 .woocommerce-product-gallery__wrapper {
    overflow: hidden;
    border-radius: 16px;
}


/* ============================================================
   14. ATTRIBUTS PRODUIT WOOCOMMERCE — Affichage inline
   Format : "Label : valeur   Label : valeur"
   ============================================================ */

/* Reset : neutralise bordures, fonds et ombres natifs WooCommerce */
.woocommerce table.woocommerce-product-attributes.shop_attributes,
.woocommerce table.woocommerce-product-attributes.shop_attributes tbody,
.woocommerce table.woocommerce-product-attributes.shop_attributes tr,
.woocommerce table.woocommerce-product-attributes.shop_attributes th,
.woocommerce table.woocommerce-product-attributes.shop_attributes td {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Le tableau devient un bloc simple */
.woocommerce table.woocommerce-product-attributes.shop_attributes {
    display: block;
    margin: 0;
}

/* Le tbody passe en flex pour aligner les paires sur une ligne */
.woocommerce table.woocommerce-product-attributes.shop_attributes tbody {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px; /* 8px vertical (si wrap), 24px horizontal entre paires */
}

/* Chaque ligne devient un bloc inline-flex (label + valeur côte à côte) */
.woocommerce table.woocommerce-product-attributes.shop_attributes tr {
    display: inline-flex;
    align-items: baseline;
}

/* Label (ex: "Couleurs", "Formats") : souligné avec un peu d'air */
.woocommerce table.woocommerce-product-attributes.shop_attributes th {
    display: inline !important;
    width: auto !important;
    padding: 0 !important;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Ajout automatique du " : " après chaque label */
.woocommerce table.woocommerce-product-attributes.shop_attributes th::after {
    content: " :";
    margin-right: 6px;
}

/* Valeur (ex: "Rose corail", "240ml") */
.woocommerce table.woocommerce-product-attributes.shop_attributes td {
    display: inline !important;
    padding: 0 !important;
    font-style: normal;
    line-height: 1.5;
}

/* WooCommerce enveloppe la valeur dans un <p>, on le neutralise */
.woocommerce table.woocommerce-product-attributes.shop_attributes td p {
    display: inline;
    margin: 0;
    padding: 0;
}


/* ============================================================
   15. ACCORDÉON ELEMENTOR — Layout & radius
   ============================================================ */

/* Layout du titre : titre à gauche, icône à droite */
.e-n-accordion-item-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 16px;
}

.e-n-accordion-item-title-header {
    display: block;
    flex: 1;
}

.e-n-accordion-item-title-text {
    text-align: left;
}

.e-n-accordion-item-title-icon {
    flex-shrink: 0;
    margin-left: auto;
}

/* Supprime le marker natif du <summary> */
summary.e-n-accordion-item-title {
    list-style: none;
    cursor: pointer;
}

summary.e-n-accordion-item-title::-webkit-details-marker {
    display: none;
}

/* Border-radius sur le conteneur <details> */
.e-n-accordion-item {
    overflow: hidden;
    border-radius: 10px !important;
}

/* Border-radius sur le titre (summary) — état plié */
.e-n-accordion-item-title {
    border-radius: 10px !important;
}

/* État ouvert : coins du haut arrondis, bas droits pour coller au contenu */
.e-n-accordion-item[open] > .e-n-accordion-item-title {
    border-radius: 10px 10px 0 0 !important;
}

/* Contenu interne ouvert : coins du bas arrondis */
.e-n-accordion-item[open] > div[role="region"] {
    overflow: hidden;
    border-radius: 0 0 10px 10px;
}


/* ============================================================
   16. LISTE BIENFAITS — Items avec icône fleur
   ============================================================ */

.bienfaits-liste-items {
    margin: 0;
    padding-left: 0 !important;
    list-style: none;
}

.bienfait-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    font-style: italic;
    line-height: 1.5;
}

.bienfait-item:last-child {
    margin-bottom: 0;
}

.bienfait-item::before {
    content: url("/wp-content/uploads/2026/04/Union.svg");
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.bienfait-item .bienfait-texte p {
    margin: 0;
}


/* ============================================================
   17. LANGUAGE SWITCHER (TranslatePress)
   ============================================================ */

/* Conteneur du switcher */
.trp-language-switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 5px 15px;
    background: #679570;
    border: 0.5px solid #fff;
    border-radius: 50px;
}

/* Nom de la langue */
span.trp-language-item-name {
    font-family: var(--e-global-typography-3c5b30b-font-family), Sans-serif !important;
    color: white !important;
}

/* Masque la flèche du shortcode */
.trp-shortcode-arrow {
    display: none;
}

/* Dropdown : hauteur auto */
.trp-switcher-dropdown-list {
    min-height: max-content !important;
}

/* Langue courante en gras */
.trp-current-language-item__wrapper:not(.trp-hide-arrow) span {
    font-weight: 700;
}

.trp-current-language-item__wrapper:not(.trp-hide-arrow) {
    padding: 0;
}

.trp-language-item {
    padding: 0;
}

/* Séparateur " / " entre les langues */
.trp-language-item__default::after {
    content: "/";
    font-weight: 700;
    color: white;
}

/* Masque les ancres non-opposées */
.trp-shortcode-anchor:not(.trp-opposite-button) {
    display: none;
}

/* Survol d'un item */
.trp-language-item:hover {
    background: none;
    opacity: 0.7;
}


/* ============================================================
   19. ANIMATIONS — Slide up/down sur loops & carousels
   ============================================================ */

/* Loop catégories — entrée vers le haut */
.categories-loop.blankAnimationUp .elementor-grid .e-loop-item {
    opacity: 0;
    animation: customSlideUp 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* Loop catégories — entrée vers le bas */
.categories-loop.blankAnimationDown .elementor-grid .e-loop-item {
    opacity: 0;
    animation: customSlideDown 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* Délais en cascade — loop catégories */
.categories-loop .elementor-grid > *:nth-of-type(1) { animation-delay: 400ms !important; }
.categories-loop .elementor-grid > *:nth-of-type(2) { animation-delay: 500ms !important; }
.categories-loop .elementor-grid > *:nth-of-type(3) { animation-delay: 600ms !important; }
.categories-loop .elementor-grid > *:nth-of-type(4) { animation-delay: 700ms !important; }
.categories-loop .elementor-grid > *:nth-of-type(5) { animation-delay: 800ms !important; }
.categories-loop .elementor-grid > *:nth-of-type(6) { animation-delay: 900ms !important; }
.categories-loop .elementor-grid > *:nth-of-type(7) { animation-delay: 1000ms !important; }

/* Value carousel — entrée vers le haut */
.value-carousel.blankAnimationUp .owl-stage .owl-item {
    opacity: 0;
    animation: customSlideUp 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* Value carousel — entrée vers le bas */
.value-carousel.blankAnimationDown .owl-stage .owl-item {
    opacity: 0;
    animation: customSlideDown 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* Délais en cascade — value carousel */
.value-carousel .owl-stage > *:nth-of-type(1) { animation-delay: 400ms !important; }
.value-carousel .owl-stage > *:nth-of-type(2) { animation-delay: 500ms !important; }
.value-carousel .owl-stage > *:nth-of-type(3) { animation-delay: 600ms !important; }
.value-carousel .owl-stage > *:nth-of-type(4) { animation-delay: 700ms !important; }
.value-carousel .owl-stage > *:nth-of-type(5) { animation-delay: 800ms !important; }
.value-carousel .owl-stage > *:nth-of-type(6) { animation-delay: 900ms !important; }
.value-carousel .owl-stage > *:nth-of-type(7) { animation-delay: 1000ms !important; }


/* ============================================================
   20. RESPONSIVE — Règles mobiles globales
   ============================================================ */

@media (max-width: 767px) {
    /* Menu footer centré */
    .menu-footer-centre .elementor-nav-menu--layout-vertical > ul > li > a {
        justify-content: center;
    }

    /* Owl carousel : overflow visible sur mobile */
    .owl-stage-outer {
        overflow: visible !important;
    }

    /* Menu souligné : trait centré sur layout vertical mobile */
    .menu-soulignes .elementor-nav-menu li {
        justify-content: center !important;
    }

    .menu-soulignes .elementor-nav-menu--layout-vertical li a.elementor-item::after {
        left: 50% !important;
        transform: translateX(-50%);
    }
}

/* ============================================
   LANGUAGE SWITCHER FR / EN - Side by side
   ============================================ */

/* Forcer le dropdown ouvert en permanence */
.trp-language-switcher.trp-shortcode-overlay .trp-switcher-dropdown-list {
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    flex-direction: row !important;
    display: inline-flex !important;
    position: static !important;
    align-items: center !important;
    transition: none !important;
}

/* Conteneur principal en ligne */
.trp-language-switcher.trp-shortcode-overlay {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
}

/* Cacher la flèche du dropdown */
.trp-language-switcher.trp-shortcode-overlay .trp-shortcode-arrow {
    display: none !important;
}

/* ========================================
   Zoom image au survol — Classe réutilisable
   À appliquer sur le conteneur parent
   ======================================== */

/* Le conteneur parent : c'est lui qui découpe */
.zoom-img-hover {
  overflow: hidden;
}

/* Wrappers internes : overflow hidden pour sécurité */
.zoom-img-hover .elementor-widget-image,
.zoom-img-hover .elementor-widget-image .elementor-widget-container {
  overflow: hidden;
}

/* L'image : transition pour le zoom */
.zoom-img-hover .elementor-widget-image img {
  display: block;
  transition: transform 400ms ease;
}

/* Au survol du conteneur parent, l'image zoome */
.zoom-img-hover:hover .elementor-widget-image img {
  transform: scale(1.04) !important;
}


.section-archive-hero {
    position: relative;
    isolation: isolate;
    background-color: #000;
}

.section-archive-hero {
    position: relative;
    isolation: isolate;
    background-color: #000;
    background-image: url('/wp-content/uploads/2026/05/6d588688d73b28eb2f32fa69e9ac970f9fb34d57-scaled.webp');
    background-size: cover;
    background-position: center;
}

/* Voile dégradé par-dessus l'image */
.section-archive-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   FIN DU CSS
   ============================================================ */