/*Styles qui restent stables (formes, ombres, liserés, effets de survol simples).*/





/*****************/
/* EFFET CLIP-PATH REUTILISABLE SUR TOUT TYPE DE CONTAINER SIMPLE OU IMAGE
    Avec BORDURE COULEUR : 
    BORD top/bottom = --border-thickness
    && BORD right ou left (coupe) = 2 * --border-thickness 
+ POSSIBILITE DE CREER DEUX CONTAINER COUPE SYMETRIQUE INVERSE
(cf. Exemple structure HTML ci-dessous) */
/* Définition des variables */
:root {
    --border-thickness: 4px;
    --border-color: var(--color-CTA-primary);
}

/****************************/
/* EXEMPLE STRUCTURE HTML */
/* 
*** Mettre un container supérieur si besoin d'intégrer un effet sur l'ensemble ***
 <div class="clip-path-base clip-path-leftT100B90"> 
    <div class="clip-path-content-left"> 
        <div class="img-detail-entretien-ravalement"></div> * Ici l'image ou la zone doit définir une dimension Width(Vw)
    </div> 
 </div>
*/
/****************************/


/* CLASSE DE BASE (Le Conteneur Extérieur : La Bordure) */
.clip-path-base {
    position: relative; /* Contexte pour positionner l'intérieur */
    background-color: var(--border-color); /* C'est ça qui crée la bordure */
    overflow: hidden; /* Empêche tout débordement indésirable */
}


/* CLASSE DE CONTENU (Le Div Intérieur : L'Image/Contenu) */
.clip-path-content-left {
    position: absolute; /* Se positionne par rapport au parent */
    z-index: 2; /* S'assure d'être AU-DESSUS du parent (la bordure) */
    /* Décalage pour créer l'espace de la bordure */
    top: var(--border-thickness);
    bottom: var(--border-thickness);
    left: calc(4 * var(--border-thickness));
    /*right: var(--border-thickness);*/
    width: calc(100% - (4 * var(--border-thickness)));
    /*right: var(--border-thickness);*/
    height: calc(100% - (2 * var(--border-thickness)));
    /*bottom: var(--border-thickness);*/ /* <--- AJOUT CRUCIAL */
    /* Applique la même forme clipée au contenu */
    clip-path: inherit; /* Inherit est très utile si le parent est clipé */
    overflow: hidden; /* Empêche tout débordement indésirable */
    /*margin-right: -16px;*/
}


/* CLASSE DE CONTENU (Le Div Intérieur : L'Image/Contenu) */
    .clip-path-content-right {
        position: absolute; /* Se positionne par rapport au parent */
        z-index: 2; /* S'assure d'être AU-DESSUS du parent (la bordure) */
        /* Décalage pour créer l'espace de la bordure */
        top: var(--border-thickness);
        bottom: var(--border-thickness);
        /*left: var(--border-thickness);*/
        right: calc(2 * var(--border-thickness));
        width: calc(100% - (2 * var(--border-thickness)));
        /*right: var(--border-thickness);*/
        height: calc(100% - (2 * var(--border-thickness)));
        /*bottom: var(--border-thickness);*/ /* <--- AJOUT CRUCIAL */
        /* Applique la même forme clipée au contenu */
        clip-path: inherit; /* Inherit est très utile si le parent est clipé */
        overflow: hidden; /* Empêche tout débordement indésirable */
    }

/* CLASSE DE FORME  */
/* * Définit les 4 coins du polygone :
     * 1. Haut Droit (100% 0)
     * 2. Bas Droit (100% 100%)
     * 3. Bas Gauche (0% 100%)
     * 4. Haut Gauche (Déplacé pour créer la coupe, ex: 10% 0)
     */


/* ========================================================= */
/* MODULE CLIP-PATH - LOGIQUE DE NOMMAGE : Tx/Bx = % restant */
/* ========================================================= */

/* Coupe 10% Haut-Gauche (Parallèle à RightT100B84) */
/* Reste 90% en Haut (10% coupé) / Reste 100% en Bas (0% coupé) */
/*.clip-path-leftT90B100 {*/
    /* P4 (10% 0) et P3 (0% 100%) definissent la coupe */
    /*clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 0);
}*/

/* Coupe 16% Bas-Droit (Inverse Parallèle à LeftT90B100) */
/* Reste 100% en Haut (0% coupé) / Reste 84% en Bas (16% coupé) */
/*.clip-path-rightT100B84 {*/
    /* P2 (100% 0) et P3 (84% 100%) definissent la coupe */
    /*clip-path: polygon(0% 0%, 100% 0%, 84% 100%, 0% 100%);
}*/

/* ------------------------------------------------------------------- */
/* AUTRES COUPES SYMETRIQUES (si même largeur, décalage 10% partout) */
/* ------------------------------------------------------------------- */

/* Coupe 10% Bas-Gauche */
/* Reste 100% en Haut / Reste 90% en Bas */
/*.clip-path-leftT100B90 {*/
    /* P4 (0% 0) et P3 (10% 100%) definissent la coupe */
    /*clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0% 0);
}*/

/* Coupe 10% Haut-Droit */
/* Reste 90% en Haut / Reste 100% en Bas */
/*.clip-path-rightT90B100 {*/
    /* P2 (90% 0) et P3 (100% 100%) definissent la coupe */
    /*clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 0% 100%);
}*/

.clip-path-leftT100B90 {
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 0);
}
.clip-path-leftT90B100 {
    clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0% 0);
}

.clip-path-rightT100B84 {
    clip-path: polygon(0% 0%, 100% 0%, 84% 100%, 0% 100%);
}

.clip-path-rightT100B90 {
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
}


/* ======================================= */
/* EFFET UTILITAIRE : HOVER SCALE UNIVERSEL */
/* ======================================= */
.hover-scale {
    /* Clé pour la compatibilité avec les éléments inline (<a>, <span>) */
    display: inline-block;
    /* Point de référence pour la transformation (souvent le défaut, mais explicité) */
    transform-origin: center center; /* Ancrer la transformation au centre évite effet Jiggle */
    /* Transition pour l'effet de fluidité */
    transition: transform 0.2s ease-in-out;
    /* Optimisation du rendu */
    will-change: transform;
}

    .hover-scale:hover {
        transform: scale(1.05);
    }


/* ======================================= */
/* TEXT SHADOW & LISERÉ (Dans effects.css) */
/* ======================================= */

/* Effet d'ombre porté pour améliorer la lisibilité */
.txt-shadow {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.5);
}

/* Liseré de texte standard (pour les éléments secondaires) */
.liseret-texte-secondary {
    -webkit-text-stroke: 2px var(--color-CTA-primary);
    text-stroke: 2px var(--color-CTA-primary);
    /* color: transparent; /* Décommenter pour laisser uniquement le contour */
}

/* Liseré de texte fin (pour les CTA ou autres éléments) */
.liseret-texte-cta {
    -webkit-text-stroke: 0.5px var(--color-primary);
    text-stroke: 0.5px var(--color-primary);
    /* color: transparent; */
}

/******************************/
/* TOOLTIP : class view info bulle aide */
/******************************/

.helperInfo span {
    display: none;
    color: #fff;
    background: rgba(51,51,51,0.95);
    padding: 20px;
    border-radius: var(--radius);
    -moz-border-radius: var(--radius);
    -webkit-border-radius: var(--radius);
    width: 110px;
    text-align: center;
    position: fixed;
    z-index: 1200;
}

.helperInfo:hover span {
    display: block;
}


/******************************/
/* Style bulle personnalisées 
    SWIPER CAROUSEL */
/******************************/

/* CONTAINER SWIPER */
.swiper {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 2rem 0 4rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-inner {
    width: 90%; /* un peu plus large pour aérer */
    margin: 0 auto;
    padding: 3rem 0; /* réduit (avant 5rem) */
    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* LOGO SLIDE */
.swiper-slide {
    width: calc((100% - 60px) / 3);
    height: 120px; /* + grand pour éviter logos rognés */
    margin-right: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}

    .swiper-slide:last-child {
        margin-right: 0;
    }

    /*.swiper-slide img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
        filter: grayscale(0.3);
        transition: filter 0.3s ease;
        display: block;
    }*/
    .swiper-slide img {
        /* On dit au navigateur d'ignorer la valeur fixe de 50px ou 100px */
        width: 100% !important;
        height: auto !important;
        /* On garde un aspect propre pour les logos de différentes formes */
        max-height: 120px; /* Ou la taille max que tu souhaites pour tes logos */
        object-fit: contain;
        filter: grayscale(0.3);
        transition: filter 0.3s ease;
        display: block;
    }
        .swiper-slide img:hover {
            filter: grayscale(0);
        }

/* BOUTONS DE NAVIGATION */
.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    /* border-radius: 100%;
    border: solid var(--color-primary) 1px;*/
    color: var(--color-primary);
    /* background-color: var(--color-white);*/
    z-index: 10;
}

.swiper-button-prev {
    left: 0.25rem;
}

.swiper-button-next {
    right: 0.25rem;
}

/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {}

/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .swiper-inner {
        width: 95%;
        padding: 2rem 0;
    }

    .swiper-slide {
        width: calc((100% - 60px) / 2); /* 2 logos par ligne */
        height: 100px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }

    /* clip path */

    .clip-path-base {
        position: relative; /* Contexte pour positionner l'intérieur */
        background-color: var(--border-color); /* C'est ça qui crée la bordure */
        overflow: hidden; /* Empêche tout débordement indésirable */
    }


    /* CLASSE DE CONTENU (Le Div Intérieur : L'Image/Contenu) */
    .clip-path-content-left, .clip-path-content-right {
        position: relative; /* Se positionne par rapport au parent */
        /*z-index: 2;*/ /* S'assure d'être AU-DESSUS du parent (la bordure) */
        /* Décalage pour créer l'espace de la bordure */
        /*top: var(--border-thickness);
        bottom: var(--border-thickness);
        left: calc(4 * var(--border-thickness));*/
        /*right: var(--border-thickness);*/
        width: 100% !important;
        justify-content: center;
        /*right: var(--border-thickness);*/
        height: auto;
        /*bottom: var(--border-thickness);*/ /* <--- AJOUT CRUCIAL */
        /* Applique la même forme clipée au contenu */
        clip-path: none !important;
        ; /* Inherit est très utile si le parent est clipé */
        overflow: hidden; /* Empêche tout débordement indésirable */
        /*margin-right: -16px;*/
    }

    .clip-path-leftT100B90, .clip-path-leftT90B100, .clip-path-rightT100B84, .clip-path-rightT100B90 {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        width: 100% !important;
    }
}

/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {

    /*  swiper */
    .swiper-inner {
        width: 100%;
        padding: 1.5rem 0;
    }

    .swiper-slide {
        width: 100%; /* 1 logo par ligne */
        height: 80px;
        margin-right: 0;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }



    

}