:root {
        --primary: #812626;
        --primary-soft: rgba(129, 38, 38, 0.05);
        --gold: #d4af37;
        --silver-light: #f4f4f4;
    }

    /* Section Forfait */
    .grid_forfait {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        padding: 20px;
    }

    .fieldset_service {
        border: 1px solid #eee;
        border-radius: 1.5rem; /* Coins très arrondis */
        background: #fff;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        padding-top: 2rem;
    }

    .fieldset_service:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
        border-color: var(--primary);
    }

    /* Badge "Populaire" moderne */
    .fieldset_service.populaire {
        border: 2px solid var(--primary);
        scale: 1.05;
        z-index: 2;
    }

    .fieldset_service legend {
        float: none;
        width: auto;
        margin: 0 auto;
        padding: 5px 20px;
        background: var(--primary);
        color: white;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        border-radius: 50px;
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Bouton Badge "Transformation" */
    .btn_last_toujo {
        background: var(--primary-soft);
        color: var(--primary) !important;
        padding: 10px 25px;
        font-size: 0.85rem;
        font-weight: 600;
        border-radius: 50px;
        border: 1px solid rgba(129, 38, 38, 0.1);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Dots d'état modernes */
    .dot_style {
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 50%;
        position: relative;
    }

    /* Effet de pulsation pour les dots */
    .bg_green { background: #28a745; box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.2); }
    .bg_primary { background: var(--primary); }
    .bg_blue { background: #007bff; box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2); }
    .bg_red { background: #dc3545; box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2); }

    /* Vidéo Div & Cercles Arrière-plan */
    .video_div::before, .video_div::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-soft), transparent);
        pointer-events: none;
    }

    .video_div::before {
        width: 15rem; height: 15rem;
        top: -5rem; right: -5rem;
        filter: blur(40px);
    }

    .video_div::after {
        width: 20rem; height: 20rem;
        bottom: -8rem; left: -8rem;
        filter: blur(50px);
    }

    /* Bouton Réservation Premium */
    .btn_reserve {
        /* width: 100%;
        padding: 15px; */
        border-radius: 12px;
        border: none;
        background: #1a1a1a;
        color: white;
        font-weight: 500;
        transition: 0.3s;
    }

     .btn_reserve1 {
        width: 100%;
        padding: 15px;
        border-radius: 12px;
        border: none;
         background: var(--primary);
        color: white;
        font-weight: 500;
        transition: 0.3s;
    }

    .btn_reserve:hover {
        box-shadow: 0 10px 20px rgba(129, 38, 38, 0.2);
    }
.card_coiffure {
        display: none;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .4s ease, transform .4s ease;
    }

    .card_coiffure.is-visible-coiffures {
        display: flex;
    }

    .card_coiffure.is-visible-coiffures.is-show-coiffures {
        opacity: 1;
        transform: translateY(0);
    }

    .card_coiffure.is-hide-coiffures {
        opacity: 0;
        transform: translateY(20px);
    }

    .disabledCoiffures {
        opacity: .4;
        pointer-events: none;
    }

    .grid_3_coiffure>.card_coiffure:not(.is-visible-coiffures) {
        display: none !important;
    }

    .grid_3_coiffure {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        /* force une seule ligne */

    }

    /* Mobile */
    @media (max-width: 640px) {
        .coiffure_section {
            --cards-visible-services: 1;
        }

        .grid_3_coiffure {
            grid-template-columns: repeat(1, 1fr);
        }

        /* .card {
            flex: 0 0 calc((50% -(24px*(var(--cols) - 1))) / var(--cols)) ;
        } */

    }

    /* Tablette */
    @media (min-width: 641px) and (max-width: 1023px) {
        .coiffure_section {
            --cards-visible-services: 3;
        }

        .grid_3_coiffure {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* Desktop */
    @media (min-width: 1024px) {
        .coiffure_section {
            --cards-visible-services: 4;
        }

        .grid_3_coiffure {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }


    .img_service_home {
        width: 100%;
        /* aspect-ratio: 20 / 18; */
        transition: 0.1s;
        object-fit: cover;
        height: 100%;
        max-width: 100%;
        max-height: max-content;
    }

    .img_div_home {
        height: 100%;
        width: 100%;
    }

    .btn_service_home {
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 2em;
    }

    .fb_service_home {
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 2em;
    }

    .text_service {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        color: white;
        /* background: #00000063; */
        background: linear-gradient(50deg, #00000069 10%, #0000000e);
        justify-content: end;
        opacity: 0;
        cursor: pointer;
        transition: 0.5s;
    }

    .text_service button {
        pointer-events: none;
    }

    .img_service_tj {
        width: 100%;
        aspect-ratio: 0 !important;
        transition: 0.15s;
        object-position: center;
        height: 100%;
        object-fit: cover;
    }

    .card_serv_tj {
        overflow: hidden;
    }

    .card_serv_tj:hover img {
        scale: 1.05;
    }

    .card_serv_tj:hover .text_service .line {
        display: flex !important;
    }

    .line {
        height: 1em;
        width: 30%;
        display: flex !important;
        margin-top: 0.5em;
    }

    .line span {
        background: #fff;
        width: 100%;
        padding: 0.1em;
        border-radius: 2em;
    }

    .card_serv_tj:hover .text_service {
        opacity: 1;
    }

    .grid_4 {
        display: grid;
        grid-template-columns: 1fr 1fr 1f;
    }

    .abso_tojo {
        position: absolute;
        top: 0;
        right: 0;
        margin: 1em;
    }

    /* .text_service_tojo{
    bottom: -5em;
} */

    .img_home {
        height: 35em !important;
        overflow: hidden;
    }

    .service_head {
        margin-top: 3em !important;
    }

    .overlay_service {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(50deg, #0000008a 80%, #00000080);
    }

    .desc_service {
        width: 100%;
        height: 100%;
        color: #fff;
    }

    .mouse {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        margin: 1em;
        cursor: pointer;
    }

    .mouse svg {

        stroke: white;
    }

    .mouse svg path {
        transition: 0.1s;
        stroke: white;
    }

    .mouse:hover svg {
        scale: 1.05;
    }

    .mouse:hover svg path {

        transform: translateY(0.5em);
    }

    .btn_badge {
        font-size: 0.8em;
        border-radius: 1.5em !important;
    }
    .carousel_wrapper {
        width: 100%;
        position: relative;

        /* GRID LOGIQUE */
        --cols: 3;
        display: grid;
        grid-template-columns: repeat(var(--cols), 1fr);
    }

    /* TRACK (reste en flex pour le mouvement) */
    .carousel_track {
        display: flex;
        gap: 24px;
        transition: transform 0.5s ease;
        will-change: transform;
    }

    /* CARD */
    .card_serv_tj {
        flex: 0 0 calc((100% - (24px * (var(--cols) - 1))) / var(--cols));

        opacity: 0.5;
        transform: scale(1);
        transition: opacity 0.4s, transform 0.4s;
        cursor: pointer;
        pointer-events: none;
    }

    .card_serv_tj.active {
        opacity: 1;
        transform: scale(1.2);
        pointer-events: auto;
        margin-inline: 1.4em;
    }

    /* ===== TABLET ===== */
    @media (max-width: 1024px) {
        .carousel_wrapper {
            --cols: 2;
            grid-template-columns: 1fr 1fr;
        }
    }

    /* ===== MOBILE ===== */
    @media (max-width: 640px) {
        .carousel_wrapper {
            --cols: 1;
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 930px) {
        .img_home {
            height: 50em !important;
            overflow: hidden;
        }
    }

    .nav_btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* background: #812626; */
        color: #fff;
        border: none;
        /* font-size: 30px; */
        width: 45px;
        height: 45px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
    }

    .nav_btn:hover {
        background: #812626;
    }

    .prev_btn {
        left: 10px;
    }

    .next_btn {
        right: 10px;
    }

    /* POPUP */
    .popup_img {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 50;
    }

    .popup_img img {
        max-width: 80%;
        max-height: 80%;
    }

    .h_full {
        height: 100%;
    }

    .popup_img.active {
        display: flex;
    }

    .close_popup {
        position: absolute;
        top: 30px;
        right: 40px;
        font-size: 1.5em;
        color: white;
        cursor: pointer;
        background: #00000061;
        width: 1.5em;
        height: max-content !important;
        /* min-height: max-content; */
        display: flex;
        justify-content: center;
        border-radius: 50%;
    }

    .p_left {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;
        stroke: #812626;
    }

    .nav_btn:hover svg {
        stroke: white;
    }


    @media (max-width:430px) {
        .card_serv_tj {
            flex: 0;
            min-width: 40% !important;
        }
    }

    @media (max-width:930px) {
        .nav_btn {
            position: static !important;
            margin-top: 8em !important;
        }

        .card_serv_tj.active {


            padding: 1.5em !important;
        }

        .card_serv_tj {
            flex: 0;
            min-width: 70%;
        }

        .ml_mob {
            margin-left: 40% !important;
        }
    }

    .m_tojo {
        margin: 5em auto;
    }
     .div_gallery {
        width: 90%;
        margin: 5em auto;
        padding: 3em 0;
    }

    .gallery_service{
        overflow: hidden;
    }

    .video_div2::before {
        content: "";
        position: absolute;
        width: 5em;
        height: 5em;
        background: #8126262e;
        top: -2.3em;
        right: -2em;
        border-radius: 50%;
        z-index: 9999;
    }

    .video_div2::after {
        content: "";
        position: absolute;
        width: 7em;
        height: 7em;
        background: #8126262e;
        bottom: -3.3em;
        left: -3em;
        z-index: 999;
        border-radius: 50%;
    }

    .text_service_op {
        opacity: 1 !important;
    }

    @media (max-width:630px) {
        .grid_3 {
            grid-template-columns: 1fr !important;
        }
    }

    @media screen and (max-width:930px) {
        .grid_3 {
            grid-template-columns: 1fr 1fr;
        }
    }

    .left_event {
        left: 0 !important;
    }

    .text_service_op::after {
        content: "";
        position: absolute;
        padding: 1em;
        pointer-events: none;
        z-index: 999;
        right: 0;
        top: 0;
        margin: 1em;
        border-top: 2px solid white;
        border-right: 2px solid white;
        opacity: 0;
        transition: 0.4s;
    }

    .card_serv_toujo:hover .text_service_op::after {
        opacity: 1;
    }

    .line_event {
        /* display: none !important; */
        opacity: 0;
        transition: 0.2s;
        margin-bottom: -2em;
    }

    .card_serv_toujo {
        overflow: hidden;
    }

    .card_serv_toujo:hover .line_event {
        opacity: 1 !important;
        margin-bottom: -0.5em !important;

        /* display: flex !important; */

    }

    .card_serv_toujo:hover img {
        scale: 1.2;
    }
    /* --- RESPONSIVE TEXTES HERO --- */

@media (max-width: 768px) {
    /* 1. Réduire le titre principal (le h1) */
    .img_home .fs_3xl {
        font-size: 1.8rem !important; /* Taille réduite pour mobile */
        line-height: 1.2;
        width: 95% !important; /* On occupe plus de largeur sur mobile */
    }

    /* 2. Réduire le paragraphe descriptif */
    .img_home .fs_md {
        font-size: 0.9rem !important;
        width: 90% !important;
        line-height: 1.5;
        opacity: 0.9;
    }

    /* 3. Ajuster le conteneur de texte pour remonter un peu le contenu */
    .desc_service {
        gap: 15px !important; /* Moins d'espace entre titre, texte et boutons */
        padding-top: 20px;
    }

    /* 4. Ajuster les boutons pour qu'ils ne soient pas trop massifs */
    .btn_reserve, .btn_outline_salon {
        padding: 12px 20px !important;
        font-size: 0.85rem !important;
        width: 100%; /* Les boutons s'empilent joliment sur mobile */
        max-width: 280px;
    }

    /* 5. Cacher ou réduire l'icône de la souris qui peut gêner sur mobile */
    .mouse {
        display: none !important; /* Souvent inutile sur mobile car on ne "scrolle" pas à la souris */
    }
}

/* --- OPTIMISATION POUR TRÈS PETITS ÉCRANS (iPhone SE, etc.) --- */
@media (max-width: 480px) {
    .img_home .fs_3xl {
        font-size: 1.5rem !important;
    }
    
    .img_home .fs_md {
        font-size: 0.85rem !important;
    }
}
@media (max-width: 768px) {
    /* 1. On réduit la hauteur de la section Hero sur mobile */
    .img_home, .img_div_home {
        height: 60vh !important; /* L'image prendra 60% de la hauteur de l'écran */
        min-height: 400px; /* Sécurité pour que le texte ne déborde pas */
    }

    /* 2. On s'assure que l'image couvre bien la zone sans se déformer */
    .img_service_tj {
        height: 100% !important;
        object-fit: cover !important; /* Coupe les bords de l'image pour remplir le cadre */
        object-position: center; /* Centre l'image sur le visage ou l'élément principal */
    }

    /* 3. On centre parfaitement le contenu dans cette nouvelle hauteur */
    .overlay_service {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }
}