/**************************************************/
/* 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) {}*/


/* --- 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;
    /*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);
}


/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {
    :root {
        --TypoSize-default: 16px;
        --height-taskbar: 3rem;
        --height-menu-taskbar: 8rem;
        --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 */
    }
}



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

    :root {
        --TypoSize-default: 18px;
        --height-taskbar: 3rem;
        --height-menu-taskbar: 12rem;
        --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;
    }


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

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


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

    :root {
        --TypoSize-default: 18px;
        --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 */
    }

    .navHome-taskbar {
        display: none;
    }

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

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


}

/* 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;
    }*/