body {
            max-width: 1280px;
            margin: 0 auto;
            padding: 2rem;
            text-align: center;
            font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
            line-height: 1.5;
            font-weight: 400;

            color-scheme: light dark;
            color: rgba(255, 255, 255, 0.87);
            background-color: #191970; /*#3F0344;*/

            font-synthesis: none;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .home {
            /* min-h-screen */
            min-height: 100%;
            /* Hauteur minimale de 100% de la hauteur de la fenêtre (viewport height) */

            /* font-sans */
            font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

            /* text-slate-800 */
            color: white;
            /* Couleur par défaut pour slate-800 */

            /* p-4 (Par défaut pour mobile) */
            padding: 1rem;
            /* 16px */
        }

        @media (min-width: 640px) {
            .home {
                /* sm:p-6 */
                padding: 1.5rem;
                /* 24px */
            }
        }

        @media (min-width: 1024px) {
            .home {
                /* lg:p-8 */
                padding: 2rem;
                /* 32px */
            }
        }

        .conteneur-principal {
            /* max-w-7xl */
            max-width: 80rem;
            /* 1280px (Taille par défaut pour 7xl dans Tailwind) */

            /* mx-auto (mx signifie margin-left et margin-right) */
            margin-left: auto;
            margin-right: auto;
        }

        header {
            /* flex */
            display: flex;

            /* items-center */
            align-items: center;
            /* Aligne les éléments verticalement au centre */

            /* justify-between */
            justify-content: space-between;
            /* Distribue l'espace restant entre les éléments */
        }

        .button-style {
            /* flex items-center */
            display: flex;
            align-items: center;

            /* Une alternative plus moderne (flexbox gap) si supporté : */
            gap: 0.5rem;
            /* 8px */


            /* px-3 py-2 */
            padding-left: 0.75rem;
            padding-right: 0.75rem;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;

            /* border border-transparent */
            border: 1px solid transparent;

            /* text-sm font-medium */
            font-size: 0.875rem;
            /* 14px */
            font-weight: 500;

            /* rounded-md */
            border-radius: 0.375rem;
            /* 6px */

            /* shadow-sm */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

            /* text-violet-200 */
            color: white;

            /* bg-fuchsia-600/30 */
            background-color: #191970; /*rgba(219, 39, 119, 0.3);*/
            /* fuchsia-600 avec 30% d'opacité */

            /* focus:outline-none (Réinitialise le style de focus par défaut du navigateur) */
            outline: none;

            /* transition-colors (implicite dans Tailwind pour les hover/focus background/color) */
            transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        /* Styles pour l'état de survol (hover:bg-fuchsia-600/50) */
        .button-style:hover {
            background-color: rgba(25, 25, 112, 0.5);
            color : black;
            /* fuchsia-600 avec 50% d'opacité */
        }

        /* Styles pour l'état de focus (focus:ring-2 focus:ring-offset-2 focus:ring-fuchsia-500) */
        .button-style:focus {
            /* focus:ring-2 (Simulation d'un "ring" ou "glow" autour du bouton) */
            /* Utilisation de box-shadow pour simuler l'effet de ring offset (décalage) */
            box-shadow: 0 0 0 2px #fff,
                /* offset-2 (blanc) */
                0 0 0 4px #ec4899,
                /* ring-2 (fuchsia-500) */
                0 1px 2px rgba(0, 0, 0, 0.05);
            /* shadow-sm d'origine */
        }

        /* Styles pour le mode sombre (dark:focus:ring-offset-[#3F0344]) */
        @media (prefers-color-scheme: dark) {
            .button-style:focus {
                /* Remplace le décalage blanc par la couleur spécifiée en dark mode */
                box-shadow: 0 0 0 2px #3F0344,
                    /* dark:focus:ring-offset-[#3F0344] */
                    0 0 0 4px #ec4899,
                    /* ring-2 (fuchsia-500) */
                    0 1px 2px rgba(0, 0, 0, 0.05);
            }
            .home {
                /* dark:text-violet-200 */
                color: white;
                /* Couleur par défaut pour violet-200 */
            }
        }


        .card {
            /* bg-#333333 dark:bg-black/30 p-6 rounded-xl shadow-md border border-slate-200 dark:border-fuchsia-500/20 h-full" */
            background: #BBD2FC; /*purple;*/
            /*background : rba(0, 0, 0, 0.3);*/
            padding: 1.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
            /* border */
            border-width: 1px;
            border-style: solid;
            /* border-slate-200 */
            /*border-color: #e2e8f0;*/
            border-color: rgba(219, 39, 119, 0.2);
            /* h-full */
            height: 100%;
        }

        .box {
            display: flex;
            /* items-center */
            align-items: center;
            /* mb-4 */
            margin-bottom: 1rem;
            justify-content: center;
        }

        .box span {
            /* mr-3 */
            margin-right: 0.75rem;
            /* Valeur standard Tailwind pour mr-3 (12px) */
            background: #BBD2FC;/*purple;*/
            /* text-fuchsia-500 */
            /*color: #db2777; /* Couleur par défaut pour fuchsia-500 */
            color: black;
        }

        .box h2 {
            /* text-lg */
            font-size: 1.125rem;
            /* 18px */
            line-height: 1.75rem;
            /* 28px */
            /* font-semibold */
            font-weight: 600;
            /* Semi-gras */
            /* text-slate-800 */
            color: black;
            /* Couleur par défaut pour slate-800 */
        }

        .grid-container {
            display: grid;
            grid-template-areas: 'stat graph graph';
            grid-gap: 10px;
            padding: 10px;
        }

        .grid-container>div {
            text-align: center;
            background: purple;
            padding: 20px 0;
            font-size: 30px;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(219, 39, 119, 0.2);
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .item1 {
            grid-area: stat;
        }

        .item2 {
            grid-area: graph;
        }

        .form_css {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .box option,
        select,
        input {
            background-color: #191970;/*#280344;*/
            /*#8b5cf6;*/
            margin-top: 0.25rem;
            /* 4px */
            display: block;
            color : white;
            width: 100%;
            padding-left: 0.75rem;
            /* 12px */
            padding-right: 0.75rem;
            /* 12px */
            padding-top: 0.5rem;
            /* 8px */
            padding-bottom: 0.5rem;
            /* 8px */
            border: 1px solid #cbd5e1;
            border-radius: 0.375rem;
            /* 6px */
            font-size: 0.875rem;
            /* 14px */
            line-height: 1.25rem;
            /* 20px */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            outline: none;
            transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

        }

        .input-field {
            background-color: #280344;
            /*8b5cf6;*/
            margin-top: 0.25rem;
            /* 4px */
            display: block;
            width: 100%;
            padding-left: 0.75rem;
            /* 12px */
            padding-right: 0.75rem;
            /* 12px */
            padding-top: 0.5rem;
            /* 8px */
            padding-bottom: 0.5rem;
            /* 8px */
            border: 1px solid #cbd5e1;
            border-radius: 0.375rem;
            /* 6px */
            font-size: 0.875rem;
            /* 14px */
            line-height: 1.25rem;
            /* 20px */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            outline: none;
            transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        /* Pseudo-éléments pour placeholder-slate-400 */
        /* text-slate-400 (couleur de placeholder par défaut) */
        .input-field::placeholder {
            color: white;
        }

        /* Styles pour l'état de focus (focus:border-fuchsia-500 focus:ring-1 focus:ring-fuchsia-500) */
        .input-field:focus {
            border-color: #d946ef;
            /* fuchsia-500 */
            /* Simulation de l'effet "ring" avec box-shadow */
            box-shadow: 0 0 0 1px #d946ef,
                /* ring-1 (fuchsia-500) */
                0 1px 2px rgba(0, 0, 0, 0.05);
            /* shadow-sm original */
        }

        /* Styles pour l'état désactivé (disabled:) */
        .input-field:disabled {
            /* disabled:bg-slate-50 */
            background-color: #f8fafc;

            /* disabled:text-slate-500 */
            color: white;

            /* disabled:border-slate-200 */
            border-color: #e2e8f0;

            /* disabled:shadow-none */
            box-shadow: none;
        }

        .form-css {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            color : black;
            /* 24px */
        }
        .input-css{
            color : white;
        }
        input-css::placeholder {
            color: gray; /* Your desired color */
            opacity: 1; /* Prevents Firefox from reducing opacity */
        }

        .label-css {
            display: block;
            text-align: left;
            font-size: 0.875rem;
            /* 14px */
            line-height: 1.25rem;
            /* 20px, default for text-sm */
        }

        .label-css-stat {
            text-align: center;
            font-size: 0.875rem;
            /* 14px */
            line-height: 1.25rem;
            /* 20px, default for text-sm */
        }

        .taille-card {
            width: 60%;
            min-width: 400px;
        }

        @media (max-width: 1000px) {
            .grid-container {
                /* lg:grid-cols-12 */
                grid-template-areas: "stat"
                    "graph";
            }

            .taille-card {
                width: 90%;
            }
        }
        .myDIV {
  height:100px;
  display: grid;
  gap: 10px;
  padding: 10px;
  grid-template: auto / auto auto;
}
.myDIV div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}