/*************************************************  */

/* SURCHARGE RESPONSIVE */

/*************************************************  */

/*   Format réel de travail : 
   Le DPR est généralement d'environ 1.5 à 2. 
   largeur physique de 2000px == largeur CSS typique d'environ 1000px à 1333px en mode paysage. */

/*************************************************  */

/* ================================
   REGLES MEDIA QUERIES
================================= */

/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */

/* @media (max-width: 1599px) {} */

/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */

/* @media (max-width: 1024px) {} */

/* --- 4. MOBILES ( < 768px ) --- */

/* @media (max-width: 767px) {} */

html, body {
    width: 100%;
    height: 100%; /* Utiliser 100% plutôt que vh sur le body évite les bugs de barres d'outils mobiles */
    min-width: 320px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;

    /* Optionnel mais recommandé pour mobile : 
       évite que le rebond vertical ne casse le comportement du sticky */
    overscroll-behavior-y: none;
    font-family: var(--font-family-base);
    font-size: var(--TypoSize-default);
    color: var(--color-text-body);
}

.main-container {
    width: 100%;

    /* 1. CORRECTION : min-height au lieu de height */

    /* Permet au conteneur de faire TOUTE la hauteur de l'écran au minimum, */

    /* mais de s'étirer vers le bas si le contenu demande du scroll. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}




.background-main-content {
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    /* 2. CORRECTION : On supprime height: 100% (ou on met height: auto) */

    /* C'est le flex-grow: 1 qui va se charger de l'étirer par défaut, */

    /* et le fond accompagnera le contenu jusqu'au bout du scroll. */
    height: auto;

    /* Ton calcul de padding qui fonctionne déjà top */
    padding-top: calc(var(--height-taskbar) / 2);

    /* position: relative; */

 /* ← AJOUT : crée le repère de positionnement */

    /* overflow: hidden; */

 /* ← AJOUT : évite tout débordement de l'image */
}

/* .background-image-general {
    background-image: url('/assets/images/background/background-nature.webp');
    background-size: cover;
    background-repeat: no-repeat; */

    /* ANCIEN : background-position: center bottom; */

    /* NOUVEAU : Aligne en bas, mais TRICHE en remontant le décor de 150px (à ajuster) */

    /* background-position: center bottom 150px;
} */



.background-image-general {
    background-image: url('/assets/images/background/back-animed.svg');
    background-repeat: no-repeat;

    /* 1. On force l'image à être plus grande verticalement (115% de hauteur) */

    /* Cela simule le comportement "cover" tout en nous donnant de la marge */

    /* background-size: auto 150%; */

    /* On force l'image à couvrir la largeur (100%) ET à s'étirer massivement en hauteur (180%) */

    /* Cet étirement vertical va mécaniquement "visser" et remonter le sol vers le haut */
    background-size: auto 150%;

    /* 2. On cale l'image horizontalement au centre, et on remonte le cadrage */

    /* Ajustez le 85% : plus vous baissez le chiffre (ex: 80%), plus le sol monte */
    background-position: center 100%;
}

.background-animed-wrapper {
    position: relative;
    overflow: hidden;
}

.background-animed-img {
    position: absolute; /* ← CHANGÉ : fixed → absolute */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* ← reste -1, mais cette fois relatif au conteneur juste au-dessus, pas à toute la page */
    pointer-events: none;
}

/* Force les composants Blazor à transmettre la largeur */

/* taskbar, herosection, splitlayout, logowall, commonactionblock, companyhighlights, avis, socialbar {
    display: block;
    width: 100%;
} */

.main-container section {
    width: 100%;
    display: block;
}

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

img, video, canvas {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, p, small {
    margin: 0;
    font-family: var(--font-family-base);
}

h1 {
    font-size: clamp(1.5rem, 1rem + 1vw, 4.5rem);
    font-weight: 400;
    color: var(--color-primary);
}

h2 {
    font-size: clamp(1.3rem, 1rem + 1vw, 4rem);
    font-weight: 600;
    color: var(--color-primary);
}

h3 {
    font-size: clamp(1.3rem, 1rem + 1vw, 3.5rem);
    font-weight: 800;
    color: var(--color-primary);
}

.show-mobile-only {
    display: none;
}

.hide-mobile {
    display: block;
}

.hide-tablette {
    display: block;
}

.hide-laptops {
    display: block;
}



.widthDesktop50-widthMobile100 {
    width: 40%;
}

/* Par défaut sur PC c'est 50% */

.mascot-margintop {
    margin-top:16rem;
}


.responsive-marginT {
    margin-top: 2rem;
}


/* ===================================================
   --- 2. PETITS PC / LAPTOPS (< 1400px) ---
=================================================== */
@media (width <= 1399px) {
    :root {
        --TypoSize-default: 16px;
        --height-taskbar: 6rem;
        --height-menu-taskbar: 5rem;
        --master-margin-left: 5rem;
        --master-padding-left: 5rem;
    }
    


    .hide-laptops {
        display: none;
    }

    .mascot-margintop {
        margin-top: 10rem;
    }

    /* .background-identity {
        height: calc(100vh - var(--height-taskbar, 97px));
    } */

}


/* ===================================================
   --- 3. TABLETTES PORTRAIT & PETITS PAYSAGES (< 1025px) ---
=================================================== */
@media (width <= 1024px) {
    :root {
        --master-margin-left: 4rem;
        --master-padding-left: 4rem;
    }

    .container-form-add, .container-form-add-medium, .container-form-add-big {
        width: 85% !important;
    }

    .mascot-margintop {
        margin-top: 8rem;
    }

    .hide-tablette {
        display: none;
    }

    /* On transforme le parent de la map en zone scrollable latéralement */
    /* .background-identity {
        overflow-x: auto !important; */ /* Permet le scroll horizontal au doigt */

       /* overflow-y: hidden; */

        /* -webkit-overflow-scrolling: touch; */

 /* Scroll ultra fluide sur iOS */

    /* } */

        .container-row-mobil-col {
            display: flex;
            flex-direction: column;

            /* min-width: 0;  Permet au conteneur de rétrécir sous la taille de son contenu */
        }

    .container-row-mobil-col-reverse {
        display: flex !important;
        flex-direction: column-reverse !important; /* On blinde le reverse */
        justify-content: flex-end !important; /* Si column-reverse, flex-end = HAUT */

        /* Si jamais le navigateur refuse le reverse et reste en column classique : */

        /* justify-content: flex-start !important; */

 /* (À tester si flex-end l'envoie en bas) */

        align-items: center !important;

        /* border: solid red 2px; */
    }
    

}


/* ===================================================
   --- 4. MOBILES ( < 768px ) ---
=================================================== */
@media (width <= 767px) {
    :root {
        --TypoSize-default: 14px; /* On baisse légèrement la base pour mobile */
        --height-taskbar: 3rem;
        --height-menu-taskbar: 3rem;
        --master-margin-left: 1.5rem; /* Marges plus petites pour gagner de l'espace */
        --master-padding-left: 1.5rem;
        --input-width: 100%;
        --input-height-normal: 2.8rem;
        --font-size-label: 1.1rem;
        --radius-input: 0.8rem;
    }

    .main-container {
        flex-direction: column; /* Empilement vertical uniquement sur vrai mobile */

        /* Force le parent à prendre TOUTE la hauteur de l'écran quoi qu'il arrive */

        /* min-height: 100vh; */
    }

    .background-main-content {
        /* On pousse le contenu vers le bas EXACTEMENT de la hauteur de la barre */
        padding-top: var(--height-taskbar) !important;
    }

    .responsive-marginT {
        margin-top: 0;
    }


    .hide-mobile {
        display: none !important;
    }

    .show-mobile-only {
        display: block !important;
    }



    .navHome-taskbar, .bloc-title-page {
        display: none;
    }

    .widthDesktop50-widthMobile100 {
        width: 100%; /* Devient 100% uniquement ici */
    }

    .container-form-add, .container-form-add-medium, .container-form-add-big {
        width: 100% !important; /* Pleine largeur sur mobile */
    }

    .container-back-home {
        height: 45vh;
    }

    .modal-container {
        width: 95vw;
    }

    /* Plus large pour le confort mobile */
    .f-size-extra-triple {
        font-size: 2rem;
    }

    /* On transforme le parent de la map en zone scrollable latéralement */
    /* .background-identity {
        overflow-x: auto !important; */ /* Permet le scroll horizontal au doigt */

        /* overflow-y: hidden; */

        /* -webkit-overflow-scrolling: touch; */

 /* Scroll ultra fluide sur iOS */

    /* } */
   

    /* FLOATING BUTTON (COPIÉ DE TON CODE) */
    .floating-nav-btn {
        position: fixed;
        right: 20px;
        bottom: 90px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: #e67e22;
        border: none;
        box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
        z-index: 1100;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease, transform 0.2s;
    }

        .floating-nav-btn:active {
            transform: scale(0.9);
        }

        .floating-nav-btn.is-last {
            background-color: #27ae60;
        }

    .nav-badge {
        position: absolute;
        top: -10px;
        right: -10px;
        background: #333;
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 10px;
        font-weight: bold;
        white-space: nowrap;
        border: 2px solid white;
    }

    /* ACTIONS BAR */
    .rapport-actions-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        background: rgb(255 255 255 / 100%);
        padding: 10px;
        box-shadow: 0 -3px 15px rgb(0 0 0 / 15%);
        z-index: 1000;
        margin: 0 !important;
        justify-content: space-around !important;
        border-top: 2px solid #e67e22;
    }

        .rapport-actions-bar .btn {
            flex: 1;
            margin: 0 5px !important;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
        }

        .rapport-actions-bar img {
            width: 24px !important;
            height: 24px !important;
        }

    .excel-container, .excel-tabs-bar {
        padding: 0;
        margin: 0;
    }

    .marginT-height-taskbar {
        margin-top: 2rem;
    }

    .marginTB2 {
        margin: 0.5rem auto;
    }

    .mascot-margintop {
        margin-top: 9rem;
    }

}

/***************************************************
 HOVER AVANCÉ (DESKTOP UNIQUEMENT) 
***************************************************/
@media (hover: hover) and (pointer: fine) {
    .card-dash:hover .card-dash-inner,
    .card-dash-double:hover .card-dash-double-inner,
    .card-dash-min:hover .card-dash-min-inner {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgb(0 0 0 / 30%);
        filter: brightness(1.05);
    }

    .card-dash:hover img {
        animation: floaty 0.6s ease-in-out forwards;
    }

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

/***********************  */

/* --- 1. STYLES PAR DÉFAUT (PC & Très grands écrans) --- */

/* html, body {
    width: 100%;
    height: auto;
    min-width: 320px; */

    /* On s'assure que le débordement est géré proprement si 
        l'écran est minuscule (moins de 320px) */

    /* overflow-x: auto;
    font-family: var(--font-family-base);
    font-size: var(--TypoSize-default);
    color: var(--color-text-body);
    margin: 0;
    padding: 0;
}



.main-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap; */

    /* max-width: 1920px; */

 /* limite haute */

    /* margin: 0 auto; */

    /* margin-top: var(--height-menu-taskbar); */

    /* overflow-x: hidden; */

/* } */


/* Force les composants Blazor à transmettre la largeur */

/* Taskbar, HeroSection, SplitLayout, LogoWall, CommonActionBlock, CompanyHighlights, Avis, SocialBar {
    display: block;
    width: 100%;
} */

/* Ciblage plus précis pour ne pas casser d'autres éléments */
/* .main-container section {
    width: 100%;
    display: block; */ /* Sécurité supplémentaire */

/* } */


/* Garantit que le padding et les bordures ne "cassent" pas vos largeurs 
    (le calcul devient width = contenu + padding au lieu de width + padding). */

/** , *::before, *::after {
    box-sizing: border-box;
} */


/* Sécurité globale pour les médias */

/* img, video, canvas {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, p, small {
    margin: 0;
    font-family: var(--font-family-base);
}

h1 {
    font-size: clamp(1.5rem, 1rem + 1vw, 4.5rem);
    font-weight: 400;
    color: var(--color-primary);
}

h2 {
    font-size: clamp(1.3rem, 1rem + 1vw, 4rem);
    font-weight: 600;
    color: var(--color-primary); */

    /*    display: flex;
    justify-content: center; */

/* }

h3 {
    font-size: clamp(1.3rem, 1rem + 1vw, 3.5rem);
    font-weight: 800;
    color: var(--color-primary);
}

.show-mobile-only {
    display: none;
}

.logo-taskbar {
    height: 8rem;
    width: auto;
    object-fit: contain;
}

.widthDesktop50-widthMobile100 {
    width: 100%;
} */


/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
/* @media (max-width: 1599px) {
    :root {
        --TypoSize-default: 16px;
        --height-taskbar: 6rem;
        --height-menu-taskbar: 5rem;
        --master-margin-left: 8rem; */ /* marge gauche cadre du site */

        /* --master-padding-left: 8rem;
    }

    .main-container { */

        /*  max-width: 1400px; On réduit un peu la zone de confort */

    /* }

    .logo-taskbar {
        height: 6rem;
        width: auto;
        object-fit: contain;
    }

    .widthDesktop50-widthMobile100 {
        width: 100%;
    }
} */



/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
/* @media (max-width: 1024px) {

    :root {
        --TypoSize-default: 16px;
        --height-taskbar: 6rem;
        --height-menu-taskbar: 5rem;
        --master-margin-left: 6rem; */ /* marge gauche cadre du site */

        /* --master-padding-left: 6rem; */

        /* Variable définie dans form.css */
        /* --input-width: 90%;
        --font-size-label: 1.3rem; */ /* On stabilise le label */
    /* }


    .main-container {
        max-width: 100%; */ /* Sur tablette, on prend souvent toute la largeur */

        /* padding: 0 20px; */

 /* Sécurité pour ne pas coller aux bords */

    /* }

    .container-form-add, .container-form-add-medium, .container-form-add-big {
        width: 80% !important;
    }

    .widthDesktop50-widthMobile100 {
        width: 50%;
    }

    .container-row, .container-col {
        gap: 0.5rem;
    }

    .container-back-home {
        height: 65vh;
    }

    .logo-taskbar {
        height: 4rem;
        width: auto;
        object-fit: contain;
    }

    .f-size-extra-triple {
        font-size: 3rem;
    }

} */



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

    :root {
        --TypoSize-default: 16px;
        --height-taskbar: 3rem;
        --height-menu-taskbar: 3rem;
        --master-margin-left: 3rem; */ /* marge gauche cadre du site */

        /* --master-padding-left: 3rem; */

        /* Variable définie dans form.css */

        /* Largeur totale sur mobile pour le confort de frappe */

        /* --input-width: 100%; */

        /* On réduit un peu la hauteur des inputs pour gagner de la place */

        /* --input-height-normal: 2.8rem; */

        /* Ajustement du label pour mobile */

        /* --font-size-label: 1.1rem; */

        /* On réduit le radius pour un look moins "bulle" sur petit écran */

        /* --radius-input: 0.8rem; */

        /* On ajuste le switch pour qu'il ne soit pas trop imposant */
        /* --switch-width: 60px;
        --switch-height: 34px;
        --switch-knob-size: 26px;
    }


    .main-container {
        width: 100%;
        flex-direction: column; */ /* Empilement vertical */

    /* }
    .hide-mobile {
        display: none;
    }

    .widthDesktop50-widthMobile100 {
        width:100%;
    }

    .show-mobile-only {
        display: block;
    }
    .navHome-taskbar {
        display: none;
    }

    .container-form-add, .container-form-add-medium, .container-form-add-big {
        width: 95% !important;
    }

    .container-back-home {
        height: 45vh;
    } */

    /* MODAL LOGIN */

    /* 1. Conteneur Grande Modale (Pleine Page ou Formulaire Complexe) - FORMAT EXISTANT */

    /* .modal-container {
        width: 90vw;
    }


    .f-size-extra-triple {
        font-size: 2rem;
    }

    .logo-taskbar {
        height: 3rem;
        width: auto;
        object-fit: contain;
    } */

    /***************  */
    /* .quick-nav {
        display: grid;
        grid-template-columns: 1fr 1fr; */ /* 2 colonnes sur mobile pour gagner de la place */

    /* font-size: 0.8rem;
    } */

    /* .bloc-title-page {
        display: none;
    }

    .marginT-height-taskbar {
        margin-top: 2rem;
    }

    .marginTB2 {
        margin: 0.5rem auto;
    } */


    /*************  */

    /* button scroll to mobile */

    /* .floating-nav-btn {
        position: fixed;
        right: 20px;
        bottom: 90px; */ /* Ajuste selon la hauteur de ta barre de signature */
        /* width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: #e67e22; */ /* Ton orange */

        /* border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        z-index: 1100;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease, transform 0.2s;
    }

        .floating-nav-btn:active {
            transform: scale(0.9);
        } */


        /* Style de fin (Vert ou Bleu) */
        /* .floating-nav-btn.is-last {
            background-color: #27ae60; */ /* Un vert discret pour valider la fin */
        /* }


    .nav-badge {
        position: absolute; */ /* Il se place par rapport au bouton maintenant */

        /* top: -10px; */

 /* Ajuste pour qu'il chevauche le bord haut */

        /* right: -10px; */

 /* Ajuste pour qu'il chevauche le bord droit */
        /* background: #333;
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 10px;
        font-weight: bold;
        white-space: nowrap; */ /* Empêche le "1 / 6" de passer sur deux lignes */

        /* border: 2px solid white; */

 /* Un petit liseré blanc pour bien le détacher du bouton */

    /* } */



    /*************  */



    /* .rapport-actions-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important; */ /* On force la largeur pleine */
        /* background: rgba(255, 255, 255, 1);
        padding: 10px;
        box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        margin: 0 !important; */ /* On annule tes marges desktop */

        /* justify-content: space-around !important; */

 /* Répartition égale des boutons */

        /* border-top: 2px solid #e67e22; */

 /* Rappel de ta charte orange */

    /* } */

        /* Ajustement des boutons à l'intérieur pour le tactile */
        /* .rapport-actions-bar .btn {
            flex: 1; */ /* Les boutons se partagent l'espace */
            /* margin: 0 5px !important;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0; */ /* Évite les débordements de texte */

        /* } */

        /* On réduit la taille des images pour qu'elles rentrent toutes sur une ligne */

        /* .rapport-actions-bar img {
            width: 24px !important;
            height: 24px !important;
        } */


    /*************  */

    /* .excel-container {
        padding: 0;
        margin: 0;
    } */

    /* Barre des onglets */

    /* .excel-tabs-bar {
        padding: 0;
        margin: 0;
    }
} */

/* Optionnel : forcer les labels au dessus des inputs si vous aviez du côte à côte */

/*    .form-group {
        flex-direction: column;
        align-items: flex-start;
    } */





/***************************************************
 HOVER AVANCÉ (POINTEUR FIN / DESKTOP UNIQUEMENT) 
***************************************************/

/* Ces effets de translation et d'ombre ne s'appliquent que si une souris est détectée. */

/* @media (hover: hover) and (pointer: fine) {
    .card-dash:hover .card-dash-inner,
    .card-dash-double:hover .card-dash-double-inner,
    .card-dash-min:hover .card-dash-min-inner {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        filter: brightness(1.05);
    }

    .card-dash:hover img {
        animation: floaty 0.6s ease-in-out forwards;
    }

    .card-dash:hover span {
        transform: scale(1.05);
    }
} */