/* ==========================================================================
   Monster UI - surcharge de modernisation
   Cree le 2026-08-23.

   Ce fichier est charge APRES style.css dans index.html. Il ne modifie aucun
   fichier d origine : pour revenir en arriere, il suffit de retirer la ligne
   <link> correspondante dans index.html.

   Parti pris volontairement conservateur : on retouche la typographie, les
   couleurs, les arrondis, les ombres et les etats interactifs, mais on ne
   touche PAS aux positionnements (float, position, width, display), qui sont
   la partie fragile de Monster UI.
   ========================================================================== */

:root {
    /* Palette derivee de l existante (#2297ff) mais avec de meilleurs
       contrastes : le bleu d origine passe mal le ratio AA sur fond blanc. */
    --mui-primary:        #1a7fe0;
    --mui-primary-hover:  #1569bd;
    --mui-primary-light:  #e8f2fd;

    --mui-text:           #1f2430;
    --mui-text-soft:      #5a6273;
    --mui-border:         #dde1e8;
    --mui-bg-soft:        #f6f7f9;

    --mui-radius:         6px;
    --mui-radius-lg:      10px;
    --mui-shadow:         0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --mui-shadow-lg:      0 4px 12px rgba(16, 24, 40, .10);
    --mui-transition:     140ms ease;
}

/* --- Typographie -----------------------------------------------------------
   Police systeme : rendu moderne, aucun telechargement, et cela supprime la
   dependance a Google Fonts (chaque visiteur envoyait son IP a Google). */
body,
input, select, textarea, button,
.monster-content, .core-wrapper {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body { color: var(--mui-text); }

h1, h2, h3, h4 { letter-spacing: -.01em; }

/* --- Champs de formulaire -------------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"],
select, textarea {
    border: 1px solid var(--mui-border);
    border-radius: var(--mui-radius);
    transition: border-color var(--mui-transition), box-shadow var(--mui-transition);
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
select:focus, textarea:focus {
    border-color: var(--mui-primary);
    box-shadow: 0 0 0 3px var(--mui-primary-light);
    outline: none;
}

/* --- Boutons --------------------------------------------------------------- */
.btn {
    border-radius: var(--mui-radius);
    transition: background-color var(--mui-transition),
                border-color var(--mui-transition),
                box-shadow var(--mui-transition),
                transform var(--mui-transition);
}

.btn:hover  { box-shadow: var(--mui-shadow); }
.btn:active { transform: translateY(1px); }

.btn-primary {
    background-color: var(--mui-primary);
    border-color: var(--mui-primary);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--mui-primary-hover);
    border-color: var(--mui-primary-hover);
}

/* Accessibilite : le focus clavier doit rester visible. */
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--mui-primary);
    outline-offset: 2px;
}

/* --- Cartes, panneaux, blocs ----------------------------------------------- */
.panel, .well, .monster-box, .box, .widget {
    border-radius: var(--mui-radius-lg);
    border-color: var(--mui-border);
    box-shadow: var(--mui-shadow);
}

/* --- Tableaux -------------------------------------------------------------- */
table.table thead th {
    border-bottom: 1px solid var(--mui-border);
    color: var(--mui-text-soft);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: .82em;
}

table.table tbody tr {
    transition: background-color var(--mui-transition);
}
table.table tbody tr:hover {
    background-color: var(--mui-bg-soft);
}

/* --- Liens ----------------------------------------------------------------- */
a {
    color: var(--mui-primary);
    transition: color var(--mui-transition);
}
a:hover { color: var(--mui-primary-hover); }

/* --- Barres de defilement (navigateurs Webkit) ----------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #c8cdd6;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #aab1bd; background-clip: content-box; }

/* --- Confort de lecture ---------------------------------------------------- */
.monster-content { line-height: 1.5; }