/*
 * [expertise_slider] — carousel "Nos expertises"
 * Composant autonome, entièrement scopé sous .expertise-slider.
 * Aucune règle générique (.card, .tag, button, etc.) : tout est préfixé.
 * Dimensions/couleurs alignées sur la maquette Figma (desktop ~1440px :
 * carte 395×459, radius 24px, padding 36px 40px).
 *
 * Stabilité de layout : chaque carte a une hauteur fixe ; le hover/
 * l'ouverture ne fait que cross-fader deux couches absolument positionnées
 * dans .expertise-card__body (.expertise-card__default-content /
 * .expertise-card__expanded-content), jamais varier la géométrie de la carte.
 *
 * Pleine largeur : ce fichier ne pose aucun max-width ni margin auto sur
 * .expertise-slider — le composant respecte le container Elementor
 * (full width, padding 0) qui l'englobe déjà.
 */

.expertise-slider {
    /* Couleur d'entité : réutilise la couleur globale Elementor déjà en
       place ailleurs dans le thème (voir style.css, .value-item.active),
       avec l'orange du site en repli si elle n'est pas définie. */
    --expertise-color: var(--e-global-color-primary, #ff4200);
    --expertise-text-color: var(--e-global-color-text, #0b2545);
    --expertise-card-bg: rgba(242, 242, 242, 1);
    --expertise-hover-bg: rgba(255, 160, 128, 1);
    --expertise-tag-bg: #ffffff;
    --expertise-font: "Hanken Grotesk", sans-serif;

    --expertise-gap: 16px;
    --expertise-radius: 24px;
    --expertise-card-width: clamp(280px, 80vw, 395px);
    --expertise-card-height: 420px;
    --expertise-card-padding: 30px 26px;

    width: 100%;
    box-sizing: border-box;
}

.expertise-slider *,
.expertise-slider *::before,
.expertise-slider *::after {
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .expertise-slider {
        --expertise-gap: 20px;
        --expertise-card-width: clamp(320px, 46vw, 395px);
        --expertise-card-height: 440px;
        --expertise-card-padding: 34px 34px;
    }
}

@media screen and (min-width: 1280px) {
    .expertise-slider {
        --expertise-gap: 24px;
        --expertise-card-width: 395px;
        --expertise-card-height: 459px;
        --expertise-card-padding: 36px 40px;
        /* 3 cartes pleines + ~50% de la 4e : 3×(395+24) + 395/2. Calculé à
           partir des mêmes variables que les cartes, jamais une valeur
           isolée codée en dur deux fois. */
        --expertise-viewport-max: calc(3 * (var(--expertise-card-width) + var(--expertise-gap)) + (var(--expertise-card-width) / 2));
    }
}


/* ------------------------------------------------------------------ */
/* Contrôles — flèches images en haut à gauche, avant les cartes        */
/* ------------------------------------------------------------------ */

.expertise-slider__controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    margin-bottom: 36px;
}

/* Boutons "nus" : les images pres.png / suiv.png portent déjà leur propre
   cercle orange, donc aucun fond/rayon CSS n'est ajouté par-dessus, et la
   taille n'est pas forcée au-delà du rendu naturel du fichier. */

.expertise-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: transparent;
    border: 0 !important;
    cursor: pointer;
    line-height: 0;
    transition: opacity 0.2s ease;
}

.expertise-slider__arrow img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

.expertise-slider__arrow:focus-visible {
    outline: 2px solid var(--expertise-color);
    outline-offset: 3px;
}

.expertise-slider__arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


/* ------------------------------------------------------------------ */
/* Viewport / Track — scroll natif horizontal, snap, sans pagination.
   Pas de padding horizontal : le slider reste collé au bord gauche et
   peut déborder naturellement à droite (container Elementor full width). */
/* ------------------------------------------------------------------ */

.expertise-slider__viewport {
    width: 100%;
    /* Pas de contrainte sous le desktop large : le viewport suit simplement
       la largeur du container Elementor (full width, padding 0). */
    max-width: none;
}

/* Desktop large uniquement : cadre le viewport à "3 cartes + moitié de la
   4e" (voir --expertise-viewport-max ci-dessus) SANS toucher au container
   Elementor lui-même — s'il est plus large, l'espace restant reste vide à
   droite plutôt que d'afficher une 4e carte entière ou de centrer le
   carousel (pas de margin:auto). En dessous de cette largeur de viewport,
   min() ramène naturellement le composant à 100% du container. */
@media screen and (min-width: 1280px) {
    .expertise-slider__viewport {
        max-width: var(--expertise-viewport-max);
    }
}

.expertise-slider__track {
    display: flex;
    align-items: stretch;
    gap: var(--expertise-gap);
    width: 100%;
    margin: 0;
    padding: 2px 0 8px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.expertise-slider__track::-webkit-scrollbar {
    display: none;
    height: 0;
}


/* ------------------------------------------------------------------ */
/* Carte Expertise — hauteur fixe, jamais modifiée par l'état           */
/* ------------------------------------------------------------------ */

.expertise-card {
    position: relative;
    flex: 0 0 var(--expertise-card-width);
    width: var(--expertise-card-width);
    height: var(--expertise-card-height);
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    background-color: var(--expertise-card-bg);
    border-radius: var(--expertise-radius);
    padding: var(--expertise-card-padding);
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.expertise-card.is-expanded {
    background-color: var(--expertise-hover-bg);
}

/* Pictogramme : totalement en dehors des couches qui changent, ne bouge,
   ne redimensionne et ne se repositionne jamais pendant le hover/l'ouverture.
   Aligné en haut à gauche (comportement par défaut, aucun centrage). */

.expertise-card__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 88px;
    height: 88px;
    margin-bottom: 28px;
}

.expertise-card__icon-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* Zone de contenu : seule cette zone accueille les deux couches
   superposées, avec une hauteur réelle issue de flex-grow (les couches
   sont en position absolute, donc sans influence sur cette hauteur —
   c'est justement ce qui garantit qu'elle ne bouge jamais, et que le
   carousel ne recalcule jamais sa hauteur au hover). */

.expertise-card__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.expertise-card__default-content,
.expertise-card__expanded-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    transition:
        opacity 0.25s ease,
        transform 0.3s ease,
        visibility 0s linear 0s;
}

.expertise-card__default-content {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Couche étendue : justify-content:flex-end conserve un grand espace vide
   entre le pictogramme (hors de cette couche) et les tags, qui restent
   ancrés en bas de la carte au lieu de remonter sous l'icône. */

.expertise-card__expanded-content {
    opacity: 0;
    transform: translateY(8px);
    visibility: hidden;
    pointer-events: none;
    justify-content: flex-end;
    transition:
        opacity 0.25s ease,
        transform 0.3s ease,
        visibility 0s linear 0.25s;
}

.expertise-card.is-expanded .expertise-card__default-content {
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.3s ease,
        visibility 0s linear 0.25s;
}

.expertise-card.is-expanded .expertise-card__expanded-content {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.25s ease,
        transform 0.3s ease,
        visibility 0s linear 0s;
}

.expertise-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    color: var(--expertise-text-color);
}

.expertise-card__description {
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--expertise-text-color);
}


/* ------------------------------------------------------------------ */
/* Tags — largeur naturelle, wrap libre, ancrés en bas de leur couche   */
/* ------------------------------------------------------------------ */

.expertise-card__default-content .expertise-card__tags {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.expertise-card__tags--expanded {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.expertise-card__tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    background-color: var(--expertise-tag-bg);
    color: var(--expertise-color);
    border-radius: 100px;
    padding: 8px 16px;
    font-family: var(--expertise-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
}


/* Révélation en cascade des tags de la couche étendue : léger stagger,
   rapide et sobre (200ms de délai max, peu importe le nombre de tags). */

.expertise-card__tags--expanded .expertise-card__tag {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.3s ease;
}

.expertise-card.is-expanded .expertise-card__expanded-content .expertise-card__tag {
    opacity: 1;
    transform: translateY(0);
}

.expertise-card__tags--expanded .expertise-card__tag:nth-child(n+5) { transition-delay: 40ms; }
.expertise-card__tags--expanded .expertise-card__tag:nth-child(n+6) { transition-delay: 80ms; }
.expertise-card__tags--expanded .expertise-card__tag:nth-child(n+7) { transition-delay: 120ms; }
.expertise-card__tags--expanded .expertise-card__tag:nth-child(n+8) { transition-delay: 160ms; }
.expertise-card__tags--expanded .expertise-card__tag:nth-child(n+9) { transition-delay: 200ms; }


/* Bouton + / − : appartient au flux des tags (flex:0 0 48px, jamais en
   position absolute indépendante), fond orange plein, symbole dessiné en
   CSS (aucun chiffre, aucun caractère texte). Chaque couche porte le sien ;
   visibility:hidden retire automatiquement celui de la couche masquée du
   flux au clavier — pas de double contrôle atteignable. */

.expertise-card__toggle {
    display: inline-flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
    padding: 8px 16px !important;
    background-color: var(--expertise-color);
    border: 0 !important;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.expertise-card__toggle:focus-visible {
    outline: 2px solid var(--expertise-text-color);
    outline-offset: 2px;
}

/* Symbole +/− : construit en CSS pur (deux traits blancs), jamais un
   caractère texte, pour un rendu identique quelle que soit la police. */

.expertise-card__toggle-icon {
    position: relative;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expertise-card__toggle-icon::before,
.expertise-card__toggle-icon::after {
    content: "";
    position: absolute;
    background: #ffffff;
    border-radius: 2px;
    transition: width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

/* Trait horizontal (commun aux deux états). */
.expertise-card__toggle-icon::before {
    width: 16px;
    height: 2px;
}

/* Trait vertical : présent pour "+", disparaît pour "−". */
.expertise-card__toggle-icon::after {
    width: 2px;
    height: 16px;
    opacity: 1;
    transform: scaleY(1);
}

/* Bouton de fermeture (couche étendue) : toujours en état "−". */
.expertise-card__toggle--close .expertise-card__toggle-icon::before {
    width: 12.5px;
}

.expertise-card__toggle--close .expertise-card__toggle-icon::after {
    opacity: 0;
    transform: scaleY(0);
}


/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
    .expertise-card__title {
        font-size: 20px;
    }

    .expertise-slider__controls {
        margin-bottom: 24px;
        gap: 24px;
    }
}

@media screen and (max-width: 360px) {
    .expertise-slider {
        --expertise-card-height: 440px;
    }
}