/* ============================================================================ */
/* DSMONITOR3 - Feuille de styles globale                                       */
/* ---------------------------------------------------------------------------- */
/* Chargee par TOUTES les pages de l'application.                               */
/* La vue integrable en iframe a sa propre feuille : styles_integration.css     */
/* (contexte de rendu different, fond transparent, noms de classes generiques). */
/*                                                                              */
/* ORGANISATION : sections numerotees. Les sections 1 a 10 sont communes a       */
/* toutes les pages, les suivantes sont propres a une page. Avant d'ajouter une */
/* regle, verifier qu'une classe equivalente n'existe pas deja dans les          */
/* sections communes.                                                           */
/* ============================================================================ */


/* ============================================================================ */
/* 1. POLICES LOCALES                                                           */
/* ---------------------------------------------------------------------------- */
/* Aucun CDN : les fichiers sont dans font/. Ne jamais ajouter d'appel externe. */
/* ============================================================================ */
@font-face {
    font-family: 'Roboto-Light';
    src: url('font/Roboto-Light.woff2') format('woff2'),
         url('font/Roboto-Light.woff') format('woff');
}
@font-face {
    font-family: 'Roboto-medium';
    src: url('font/Roboto-Medium.woff2') format('woff2'),
         url('font/Roboto-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Roboto-Bold-condensed';
    src: url('font/robotocondensed-bold-webfont.woff2') format('woff2'),
         url('font/robotocondensed-bold-webfont.woff') format('woff');
}


/* ============================================================================ */
/* 2. BASE ET REINITIALISATION                                                  */
/* ============================================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    min-height: 100%;
    font-family: 'Roboto-Light', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #e8e8ea;
    background: #2a2d35;
    background: linear-gradient(180deg, #2a2d35 0%, #1d1f25 100%);
}

a { color: #66aaff; text-decoration: none; }
a:hover { color: #99c2ff; text-decoration: underline; }

img { max-width: 100%; }


/* ============================================================================ */
/* 3. EN-TETE DE PAGE                                                           */
/* ============================================================================ */
.entete_page {
    background: rgba(0,0,0,0.5);
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.entete_page h1 {
    font-family: 'Roboto-Bold-condensed', Arial, sans-serif;
    font-size: 22px;
    color: #fff;
    letter-spacing: 0.5px;
}

.entete_page_droite {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

/* ============================================================================ */
/* 4. CONTENEUR ET STRUCTURE DE PAGE                                            */
/* ============================================================================ */
.conteneur_page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

.titre_section {
    font-family: 'Roboto-medium', Arial, sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    margin: 20px 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Variante : titre de section avec un element aligne a droite */
.titre_section_avec_action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Pied de page commun a toutes les pages de l'application */
.pied_page {
    text-align: center;
    margin-top: 30px;
    font-size: 11px;
    color: rgba(255,255,255,0.25);
}

/* Bloc affiche a la place d'une liste vide */
.aucune_donnee {
    padding: 20px;
    text-align: center;
    color: rgba(255,255,255,0.4);
}

.lien_retour {
    display: inline-block;
    margin-bottom: 10px;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
}
.lien_retour:hover { color: #fff; text-decoration: none; }


/* ============================================================================ */
/* 5. BOUTONS                                                                   */
/* ---------------------------------------------------------------------------- */
/* .bouton est le bouton de reference : utiliser ses variantes plutot que de      */
/* redefinir un bouton par page.                                                */
/* ============================================================================ */
.bouton {
    /* inline-flex et non inline-block : un bouton peut porter une icone, et
       en inline-block le SVG et le texte ne s'alignent pas. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    transition: background 0.15s;
    text-decoration: none;
}
.bouton:hover { background: rgba(255,255,255,0.2); text-decoration: none; color: #fff; }

.bouton_principal { background: #3578d4; border-color: #3578d4; }
.bouton_principal:hover { background: #4a8ae0; }


/* Bouton du generateur de script (section 15), seule page a encore utiliser
   .formulaire_encadre. Toute variante doit reprendre le selecteur
   .formulaire_encadre INPUT[type="submit"] en entier : une classe seule
   (specificite 0,1,0) perd contre lui (0,2,1). Ailleurs, poser .bouton et
   sa variante suffit. */
.formulaire_encadre INPUT[type="submit"] {
    background: rgba(100, 150, 255, 0.3);
    border: 1px solid rgba(100, 150, 255, 0.5);
    color: white;
    cursor: pointer;
    padding: 8px 20px;
    border-radius: 4px;
    font-family: 'Roboto-medium', sans-serif;
    font-size: 13px;
    transition: background 0.2s;
}
.formulaire_encadre INPUT[type="submit"]:hover { background: rgba(100, 150, 255, 0.5); }

/* Action destructive : doit rester visuellement distincte de l'enregistrement.
   Comme .bouton_principal, c'est une VARIANTE : elle se pose sur .bouton et ne
   redefinit que les couleurs. */
.formulaire_encadre INPUT[type="submit"].bouton_danger,
.bouton_danger {
    background: rgba(255, 50, 50, 0.3);
    border-color: rgba(255, 50, 50, 0.5);
}
.formulaire_encadre INPUT[type="submit"].bouton_danger:hover,
.bouton_danger:hover { background: rgba(255, 50, 50, 0.5); }


/* ============================================================================ */
/* 6. CHAMPS DE FORMULAIRE                                                      */
/* ============================================================================ */
.formulaire {
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 20px;
    max-width: 500px;
}
.formulaire_groupe { margin-bottom: 14px; }
.formulaire_libelle {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.formulaire_champ {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
}
.formulaire_champ:focus { outline: none; border-color: #3578d4; }

.formulaire_case_a_cocher {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.formulaire_case_a_cocher input[type=checkbox] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Champs du formulaire de modification d'un monitoring (section 14) */
.formulaire_encadre INPUT,
.formulaire_encadre SELECT,
.formulaire_encadre TEXTAREA {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.75);
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Roboto-Light', sans-serif;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
    margin: 4px 0;
    outline: none;
}
.formulaire_encadre INPUT:focus,
.formulaire_encadre SELECT:focus { border-color: rgba(100, 150, 255, 0.5); }
.formulaire_encadre INPUT:disabled { color: rgba(255, 255, 255, 0.4); }

/* Une case a cocher ne doit pas heriter du padding/fond des champs texte */
.formulaire_encadre INPUT[type="checkbox"],
.formulaire_encadre INPUT[type="radio"] {
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    width: auto;
    vertical-align: middle;
}


/* ============================================================================ */
/* 7. PASTILLES DE STATUT                                                       */
/* ============================================================================ */
.pastille {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}
.pastille_ok      { background: rgba(0,200,0,0.2); color: #66cc66; }
.pastille_erreur  { background: rgba(255,0,0,0.2); color: #ff6666; }
.pastille_warning { background: rgba(255,165,0,0.2); color: orange; }
.pastille_en_cours     { background: rgba(0,150,255,0.2); color: #66aaff; }
.pastille_neutre    { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }


/* ============================================================================ */
/* 8. BANDEAUX ET MESSAGES                                                      */
/* ============================================================================ */
.message_succes {
    padding: 10px 14px;
    background: rgba(0,200,0,0.15);
    border-left: 3px solid #66cc66;
    border-radius: 4px;
    color: #99dd99;
    margin-bottom: 14px;
}
.message_erreur {
    padding: 10px 14px;
    background: rgba(255,0,0,0.15);
    border-left: 3px solid #ff4444;
    border-radius: 4px;
    color: #ff9999;
    margin-bottom: 14px;
}

/* Bandeau d'information contextuelle (ex : "aucun changement depuis X jours") */
.bandeau_info {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 13px;
}
.bandeau_info_info {
    background: rgba(102,170,255,0.08);
    border-left: 3px solid #66aaff;
    color: rgba(255,255,255,0.75);
}

/* Bandeau d'alerte. La couleur vient TOUJOURS d'une variante, jamais d'un
   style inline : ajouter une variante ici plutot que de repeindre a la main. */
.alerte_bandeau {
    background: rgba(255,0,0,0.15);
    border-left: 3px solid #ff4444;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
/* L'action de la ligne garde sa largeur, c'est le message qui se replie. */
.alerte_bandeau FORM { flex: 0 0 auto; }

.alerte_bandeau.erreur {
    background: rgba(255,0,0,0.15);
    border-left-color: #ff4444;
}
.alerte_bandeau.warning {
    background: rgba(255,165,0,0.12);
    border-left-color: orange;
}
.alerte_bandeau.succes {
    background: rgba(0,200,0,0.15);
    border-left-color: #66cc66;
}


/* ============================================================================ */
/* 9. CARTES DE RESUME                                                          */
/* ============================================================================ */
.grille_resume {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.carte_resume {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 14px 16px;
    text-align: center;
}
.carte_resume_nombre {
    font-family: 'Roboto-Bold-condensed', Arial, sans-serif;
    font-size: 28px;
    line-height: 1.1;
}
.carte_resume_libelle {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.carte_resume_ok      { border-left: 3px solid #66cc66; }
.carte_resume_erreur  { border-left: 3px solid #ff4444; }
.carte_resume_warning { border-left: 3px solid orange; }
.carte_resume_total   { border-left: 3px solid #66aaff; }

.carte_resume_ok .carte_resume_nombre      { color: #66cc66; }
.carte_resume_erreur .carte_resume_nombre  { color: #ff6666; }
.carte_resume_warning .carte_resume_nombre { color: orange; }
.carte_resume_total .carte_resume_nombre   { color: #66aaff; }


/* ============================================================================ */
/* 10. LISTE DES MONITORINGS                                                    */
/* ============================================================================ */
.liste_monitorings {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.monitoring_ligne {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 12px 16px;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, transform 0.15s;
}
.monitoring_ligne:hover {
    background: rgba(255,255,255,0.08);
    text-decoration: none;
    color: inherit;
    transform: translateX(2px);
}

/* Couleur de bordure selon le statut de la derniere execution */
.monitoring_ligne.statut_ok       { border-left-color: #66cc66; }
.monitoring_ligne.statut_erreur   { border-left-color: #ff4444; }
.monitoring_ligne.statut_warning  { border-left-color: orange; }
.monitoring_ligne.statut_en_cours { border-left-color: #66aaff; }
.monitoring_ligne.statut_timeout  { border-left-color: #ff4444; }
.monitoring_ligne.statut_inconnu  { border-left-color: rgba(255,255,255,0.1); }

.monitoring_icone { width: 36px; flex-shrink: 0; }
.monitoring_icone img { width: 32px; height: 32px; }

.monitoring_nom { flex: 1; min-width: 0; }
.monitoring_titre {
    font-family: 'Roboto-medium', Arial, sans-serif;
    font-size: 15px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.monitoring_date {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}

.monitoring_stats {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-align: center;
}
.monitoring_stats_valeur {
    font-family: 'Roboto-medium', Arial, sans-serif;
    font-size: 14px;
    color: #fff;
    display: block;
}
.monitoring_stats_libelle {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}

.monitoring_pastille { flex-shrink: 0; }


/* ============================================================================ */
/* 11. PAGE - TABLEAU DE BORD ADMIN (index.php)                                 */
/* ============================================================================ */

/* --- Zone de creation client / monitoring, repliable --- */
.accordeon { margin-bottom: 20px; }
.accordeon_boutons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.accordeon_bouton {
    padding: 8px 14px;
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}
.accordeon_bouton:hover { background: rgba(255,255,255,0.12); }
.accordeon_bouton.ouvert { background: #3578d4; border-color: #3578d4; }
.accordeon_panneau { display: none; margin-top: 4px; }
.accordeon_panneau.ouvert { display: block; }

/* --- Bouton "marquer lue" d'une alerte ---
   Il partage sa ligne avec le message de l'alerte, dont la longueur varie.
   Le bouton est enveloppe dans un FORM : c'est donc le FORM qui doit refuser
   de retrecir (regle ci-dessous, avec .alerte_bandeau), sans quoi les messages
   longs le compriment et le libelle passe sur deux lignes -- les boutons de la
   liste n'ont alors plus tous la meme taille. */
.bouton_marquer_lue {
    white-space: nowrap;
    padding: 4px 10px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
}
.bouton_marquer_lue:hover { background: rgba(255,255,255,0.2); }

/* --- Separateur de groupe client dans la liste --- */
.groupe_client {
    font-family: 'Roboto-medium', Arial, sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin: 14px 0 6px 0;
    padding: 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.groupe_client:first-child { margin-top: 0; }

/* --- Bouton "Modifier" sur une ligne de monitoring --- */
.monitoring_bouton_modifier {
    flex-shrink: 0;
    padding: 5px 10px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.1);
}
.monitoring_bouton_modifier:hover { background: rgba(255,255,255,0.2); text-decoration: none; color: #fff; }

/* Zone cliquable de la ligne, hors bouton Modifier : sans ce lien interne,
   un clic sur Modifier ouvrirait aussi la vue detail. */
.monitoring_zone_cliquable {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.monitoring_zone_cliquable:hover { text-decoration: none; color: inherit; }

/* --- Token affiche sous le nom du monitoring --- */
.monitoring_token {
    font-family: monospace;
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    display: block;
    margin-top: 2px;
}

/* --- Cartes de resume cliquables (filtre par statut) ---
   Cible l'attribut qui les rend cliquables, et non la classe : les memes
   cartes servent d'affichage simple sur la fiche du client, ou une main
   au survol promettrait un clic qui ne fait rien. */
.carte_resume[data-filtre-statut] { cursor: pointer; user-select: none; }
.carte_resume.actif {
    outline: 2px solid rgba(255,255,255,0.5);
    outline-offset: 2px;
}

/* --- Barre de filtres --- */
.filtres_barre {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.filtres_barre select {
    padding: 6px 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
}
.filtres_barre_info {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}
.bouton_reinitialiser_filtres {
    padding: 5px 12px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
}
.bouton_reinitialiser_filtres:hover { background: rgba(255,255,255,0.18); }

/* --- Taux de reussite 30j, colore quand il decroche --- */
.taux_warning { color: #ffbb55; font-weight: bold; }
.taux_erreur  { color: #ff6666; font-weight: bold; }


/* ============================================================================ */
/* 12. PAGE - DETAIL D'UN MONITORING (client_detail.php)                        */
/* ============================================================================ */
.detail_entete {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.detail_entete img { width: 40px; height: 40px; }
.detail_entete_titre {
    font-family: 'Roboto-Bold-condensed', Arial, sans-serif;
    font-size: 22px;
    color: #fff;
    line-height: 1.1;
}
.detail_entete_sous_titre {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

/* Description du monitoring, saisie par l'admin et lue par le client */
.detail_description {
    background: rgba(255,255,255,0.04);
    border-left: 3px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    white-space: pre-line;
}

/* --- Icones d'interface (SVG inline, cf. icone_interface() en PHP) ----------
   Elles heritent de la couleur du texte : une icone posee dans un bouton actif
   devient blanche sans regle supplementaire. Ne jamais leur donner de fill,
   ce sont des traces ouverts. ------------------------------------------------ */
.icone {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icone_titre { width: 22px; height: 22px; color: #6f9dff; stroke-width: 1.9; }
.icone_note  { width: 15px; height: 15px; color: #6f9dff; margin-top: 1px; }


/* --- Bloc "Evolution" : entete, selecteur, graphique -------------------------
   Une seule courbe est affichee a la fois : superposer un volume en Mo et un
   espace libre en Go collerait la petite courbe contre l'axe. Le selecteur
   range donc les courbes par rubrique, le titre de rubrique portant le
   contexte pour que le bouton reste court. --------------------------------- */
.evolution { margin-bottom: 22px; }

.evolution_entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
}
.evolution_titre_bloc { display: flex; align-items: flex-start; gap: 12px; }
.evolution_titre {
    font-family: 'Roboto-Bold-condensed', Arial, sans-serif;
    font-size: 24px;
    color: #fff;
    line-height: 1.1;
}
.evolution_sous_titre {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 3px;
}

/* Ce que mesure la courbe affichee, en francais courant : c'est cette phrase
   qui rend le graphique utilisable par quelqu'un qui n'est pas informaticien. */
.evolution_note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 460px;
    background: rgba(100,150,255,0.09);
    border: 1px solid rgba(100,150,255,0.22);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 12px;
    font-style: italic;
    line-height: 1.45;
    color: rgba(255,255,255,0.7);
}

/* --- Selecteur : une colonne par rubrique, separees par un filet --- */
.evolution_selecteur {
    display: flex;
    /* Pas de retour a la ligne : une rubrique qui passerait a la ligne
       porterait un filet de separation en debut de ligne, orphelin. Les
       rubriques se partagent la largeur et ce sont leurs boutons qui se
       replient. Sous 900px, la mise en colonne prend le relais. */
    flex-wrap: nowrap;
    align-items: flex-start;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 16px 4px;
    margin-bottom: 16px;
}
.selecteur_rubrique {
    /* Grandir oui, retrecir non : autoriser le retrecissement ramene la
       rubrique a la largeur de son plus large bouton et fait replier les
       autres. Sous 1140px la mise en colonne prend le relais. */
    flex: 1 0 auto;
    padding: 0 14px;
    border-left: 1px solid rgba(255,255,255,0.09);
}
.selecteur_rubrique:first-child { border-left: none; }

.selecteur_rubrique_titre {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    font-family: 'Roboto-medium', Arial, sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}
.selecteur_rubrique_titre .icone { color: #6f9dff; }

.selecteur_choix { display: flex; flex-wrap: wrap; gap: 6px; }

.bouton_courbe,
.bouton_periode {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.72);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bouton_courbe:hover,
.bouton_periode:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
    text-decoration: none;
}
.bouton_courbe.actif,
.bouton_periode.actif {
    background: #2f6fe4;
    border-color: #2f6fe4;
    color: #fff;
    font-family: 'Roboto-medium', Arial, sans-serif;
}

/* --- Carte du graphique --- */
.evolution_graphique {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 16px 18px 8px;
}
.evolution_graphique_entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
}
.evolution_graphique_titre {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto-Bold-condensed', Arial, sans-serif;
    font-size: 18px;
    color: #fff;
}
.evolution_legende { display: flex; flex-wrap: wrap; gap: 18px; }
.legende_element {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}
.pastille_legende {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.pastille_legende_ok     { background: #66cc66; }
.pastille_legende_alerte { background: #ff4444; }
/* Le seuil est une ligne tiretee sur le graphique : la pastille le rappelle. */
.pastille_legende_seuil {
    width: 16px;
    height: 0;
    border-radius: 0;
    border-top: 2px dashed rgba(255,140,60,0.9);
}

/* Hauteur imposee : sans elle le canvas Chart.js grossit a chaque rendu. */
.graphique {
    height: 300px;
    padding: 4px 0 0;
}


/* --- Tableau d'historique des executions --- */
.tableau_historique {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    overflow: hidden;
    font-size: 13px;
}
.tableau_historique th, .tableau_historique td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tableau_historique th {
    background: rgba(0,0,0,0.3);
    font-family: 'Roboto-medium', Arial, sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.tableau_historique tr:hover td { background: rgba(255,255,255,0.03); }
.tableau_historique tr.execution_erreur  td:first-child { border-left: 2px solid #ff4444; }
.tableau_historique tr.execution_ok      td:first-child { border-left: 2px solid #66cc66; }
.tableau_historique tr.execution_warning td:first-child { border-left: 2px solid orange; }
.tableau_historique tr.execution_en_cours td:first-child { border-left: 2px solid #66aaff; }
.tableau_historique tr.execution_timeout td:first-child { border-left: 2px solid #ff4444; }

/* Colonne "Fichiers" : +crees ~modifies -supprimes, avec code couleur */
.stats_fichiers { white-space: nowrap; font-size: 12px; }
.stats_fichiers .fichiers_crees  { color: #66cc66; margin-right: 6px; }
.stats_fichiers .fichiers_modifies { color: rgba(255,255,255,0.6); margin-right: 6px; }
.stats_fichiers .fichiers_supprimes  { color: #ff6666; }


/* ============================================================================ */
/* 13. PAGE - GESTION DES UTILISATEURS (admin_users.php)                        */
/* ============================================================================ */
.tableau_utilisateurs {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    overflow: hidden;
}
.tableau_utilisateurs th, .tableau_utilisateurs td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tableau_utilisateurs th {
    background: rgba(0,0,0,0.3);
    font-family: 'Roboto-medium', Arial, sans-serif;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tableau_utilisateurs tr:hover td { background: rgba(255,255,255,0.02); }
.tableau_utilisateurs input[type=password],
.tableau_utilisateurs input[type=text],
.tableau_utilisateurs select {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 3px;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
}
.tableau_utilisateurs .bouton_ligne {
    padding: 4px 10px;
    background: #3578d4;
    color: #fff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
}
.tableau_utilisateurs .bouton_ligne:hover { background: #4a8ae0; }
.tableau_utilisateurs .bouton_supprimer {
    background: rgba(255,80,80,0.15);
    color: #ff9999;
    border: 1px solid rgba(255,80,80,0.3);
}
.tableau_utilisateurs .bouton_supprimer:hover { background: rgba(255,80,80,0.3); }


.formulaire_creation {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.formulaire_creation .formulaire_creation_ligne {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.formulaire_creation input[type=text],
.formulaire_creation input[type=password],
.formulaire_creation select {
    padding: 7px 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
}
.formulaire_creation input[type=submit] {
    padding: 7px 16px;
    background: #3578d4;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
}
.formulaire_creation input[type=submit]:hover { background: #4a8ae0; }


/* ============================================================================ */
/* 14. PAGE - MODIFICATION D'UN MONITORING (admin_modifier_monitoring.php)      */
/* ---------------------------------------------------------------------------- */
/* La fiche est decoupee en cartes : informations, modele de script, seuils,     */
/* script et token. Chaque carte porte son icone et une phrase qui dit ce        */
/* qu'on y regle -- l'ecran compte une vingtaine de champs, sans ce decoupage    */
/* il devient une liste indistincte.                                            */
/* ============================================================================ */

/* --- Entete de page --- */
.fiche_entete {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.bouton_retour {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    transition: background 0.15s, color 0.15s;
}
.bouton_retour:hover { background: rgba(255,255,255,0.14); color: #fff; text-decoration: none; }
.icone_entete { width: 26px; height: 26px; color: #6f9dff; stroke-width: 1.9; }

.fiche_entete_texte { flex: 1 1 auto; min-width: 0; }
.fiche_entete_titre {
    font-family: 'Roboto-Bold-condensed', Arial, sans-serif;
    font-size: 22px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.1;
}
.fiche_entete_sous_titre {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 3px;
}
.fiche_entete_client {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
}

/* --- Onglets d'un monitoring ---
   Les reglages et la generation du script sont deux PAGES : le generateur ne
   sert qu'au deploiement et n'a rien a faire sous les yeux a chaque
   modification de seuil. Les onglets sont donc de vrais liens, pas une
   bascule JavaScript -- rien a garder en memoire, rien a perdre au retour. */
.onglets {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.onglet {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px 8px 0 0;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    text-decoration: none;
    /* L'onglet actif est souligne d'un trait qui recouvre celui du conteneur.
       Le fond de page est un degrade : impossible de faire fusionner un onglet
       avec lui, d'ou le soulignement plutot que le decoupage classique. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.onglet:hover { background: rgba(255,255,255,0.05); color: #fff; text-decoration: none; }
.onglet.actif {
    background: rgba(255,255,255,0.05);
    border-bottom-color: #2f6fe4;
    color: #fff;
    font-family: 'Roboto-medium', Arial, sans-serif;
}
.onglet.actif .icone { color: #6f9dff; }


/* --- Carte de section --- */
.fiche_carte {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 18px;
}
.fiche_carte_entete {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.icone_carte {
    width: 22px;
    height: 22px;
    color: #6f9dff;
    stroke-width: 1.9;
    margin-top: 1px;
}
.fiche_carte_titre {
    font-family: 'Roboto-Bold-condensed', Arial, sans-serif;
    font-size: 18px;
    color: #fff;
    line-height: 1.1;
    margin: 0;
}
.fiche_carte_sous_titre {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 3px;
}

/* --- Champs ---
   Les regles portent sur .champ INPUT et non sur une classe par champ : un
   nouveau champ pose dans une carte est correctement habille sans rien ajouter. */
.champ { display: flex; flex-direction: column; min-width: 0; }
.champ_pleine_largeur { margin-top: 18px; }

.champ_libelle {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 6px;
}
.champ_aide {
    font-size: 11px;
    color: rgba(255,255,255,0.38);
    margin-top: 5px;
    line-height: 1.35;
}

/* Habillage par EXCLUSION et non par liste de types : lister text et number
   laissait email et password au rendu par defaut du navigateur, c'est-a-dire
   en blanc sur un theme sombre. Tout ce qui n'est ni case, ni bouton radio,
   ni selecteur de fichier se saisit au clavier et se ressemble. */
.champ INPUT:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.champ SELECT,
.champ TEXTAREA {
    width: 100%;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 7px;
    padding: 9px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
}
.champ TEXTAREA { resize: vertical; line-height: 1.5; }
.champ INPUT:focus,
.champ SELECT:focus,
.champ TEXTAREA:focus {
    outline: none;
    border-color: rgba(100,150,255,0.6);
    background: rgba(0,0,0,0.35);
}
.champ INPUT::placeholder { color: rgba(255,255,255,0.25); }

/* --- Grilles de champs --- */
.fiche_grille { display: grid; gap: 16px 18px; }
/* Le nom est le champ le plus long : il occupe deux colonnes. */
.fiche_grille_informations { grid-template-columns: 2fr 1fr 1fr; }
.fiche_grille_seuils       { grid-template-columns: repeat(5, 1fr); }

.fiche_colonnes {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 18px 26px;
    align-items: start;
}

/* --- Cases des roles surveilles --- */
.grille_roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.carte_role {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.carte_role:hover { background: rgba(255,255,255,0.06); }
/* La vraie case reste focusable au clavier mais laisse la place a la marque. */
.carte_role INPUT { position: absolute; opacity: 0; width: 0; height: 0; }
.carte_role_marque {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.3);
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.carte_role INPUT:checked ~ .carte_role_marque {
    background: #2f6fe4;
    border-color: #2f6fe4;
}
/* Le crochet est dessine en CSS : pas d'image pour une coche. */
.carte_role INPUT:checked ~ .carte_role_marque::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.carte_role INPUT:checked ~ .carte_role_libelle { color: #fff; }
.carte_role INPUT:focus-visible ~ .carte_role_marque { border-color: rgba(100,150,255,0.9); }

/* --- Choix de l'icone du monitoring ---
   Une liste deroulante ne peut pas montrer de dessin : ce sont des vignettes
   radio, une par icone disponible. Les fichiers viennent de images/icones/,
   ce sont les seules icones choisies par l'utilisateur et stockees en base. */
.choix_icones { display: flex; flex-wrap: wrap; gap: 10px; }
/* Le label est lui-meme une boite flex : sans cela, le cadre qu'il contient
   ne s'etire pas a la hauteur de la rangee et les vignettes dont le nom tient
   sur deux lignes sont plus hautes que les autres. */
.vignette_icone { display: flex; cursor: pointer; }
.vignette_icone INPUT { position: absolute; opacity: 0; width: 0; height: 0; }
/* Le cadre est porte par un FRERE de la case, jamais par le label : un selecteur
   de parent (:has) n'est pas garanti sur tous les navigateurs, "~" l'est. */
.vignette_icone_corps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 96px;
    padding: 12px 8px 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    transition: border-color 0.15s, background 0.15s;
}
.vignette_icone:hover .vignette_icone_corps { background: rgba(255,255,255,0.06); }
.vignette_icone_dessin {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
}
.vignette_icone_dessin IMG { max-height: 34px; width: auto; opacity: 0.65; transition: opacity 0.15s; }
.vignette_icone_vide { color: rgba(255,255,255,0.3); font-size: 20px; line-height: 34px; }
.vignette_icone_libelle {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    line-height: 1.25;
    /* Deux lignes reservees : les dessins restent alignes entre eux, que le
       nom tienne sur une ligne ou deux. */
    min-height: 2.5em;
}
/* La vignette retenue s'entoure de bleu, comme les cases de role cochees. */
.vignette_icone INPUT:checked ~ .vignette_icone_corps {
    border-color: #2f6fe4;
    background: rgba(47,111,228,0.16);
}
.vignette_icone INPUT:checked ~ .vignette_icone_corps IMG { opacity: 1; }
.vignette_icone INPUT:checked ~ .vignette_icone_corps .vignette_icone_libelle { color: #fff; }
.vignette_icone INPUT:focus-visible ~ .vignette_icone_corps { border-color: rgba(100,150,255,0.9); }


/* --- Grilles propres aux ecrans d'administration --- */
.fiche_grille_smtp         { grid-template-columns: 2fr 1fr 1.4fr; }
.fiche_grille_expediteur   { grid-template-columns: 1fr 1fr; }
.fiche_grille_mot_de_passe { grid-template-columns: repeat(3, 1fr); }
.fiche_grille_creation     { grid-template-columns: 1fr 1.6fr 1fr 1fr; }
/* Une grille qui en suit une autre a besoin d'air : sans cela les deux
   rangees de champs se touchent et se lisent comme une seule. */
.fiche_grille + .fiche_grille { margin-top: 16px; }

/* --- Liste des icones de monitoring ---
   Une ligne par icone : le dessin, son nom modifiable, son usage, sa
   suppression. Le nombre d'usages n'est pas decoratif : il conditionne la
   suppression, une icone encore choisie ne doit pas disparaitre. */
.liste_icones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.ligne_icone {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 14px;
}
.ligne_icone_dessin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    flex: 0 0 auto;
}
.ligne_icone_dessin IMG { max-height: 32px; max-width: 40px; width: auto; }

.ligne_icone_form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.ligne_icone_form INPUT[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 7px;
    padding: 7px 11px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
}
.ligne_icone_form INPUT[type="text"]:focus {
    outline: none;
    border-color: rgba(100,150,255,0.6);
}
.ligne_icone_usage {
    flex: 0 0 auto;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
}
/* Un bouton desactive doit se voir comme tel, sinon le clic sans effet passe
   pour un bug. */
.bouton:disabled { opacity: 0.4; cursor: not-allowed; }
.bouton:disabled:hover { background: rgba(255, 50, 50, 0.3); }

/* Le formulaire d'ajout est separe de la liste par un filet. */
.ajout_icone {
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.champ INPUT[type="file"] {
    width: 100%;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 7px;
    padding: 8px 11px;
    color: rgba(255,255,255,0.7);
    font-family: inherit;
    font-size: 12px;
}
.champ INPUT[type="file"]::file-selector-button {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    color: #fff;
    padding: 4px 12px;
    margin-right: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}


/* --- Pied de carte : interrupteur a gauche, actions a droite --- */
.fiche_pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 18px;
    margin-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.fiche_pied_actions { display: flex; align-items: center; gap: 10px; }

.interrupteur { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.interrupteur INPUT { position: absolute; opacity: 0; width: 0; height: 0; }
.interrupteur_glissiere {
    width: 42px;
    height: 23px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(255,255,255,0.15);
    position: relative;
    transition: background 0.15s;
}
.interrupteur_glissiere::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}
.interrupteur INPUT:checked ~ .interrupteur_glissiere { background: #2f6fe4; }
.interrupteur INPUT:checked ~ .interrupteur_glissiere::after { transform: translateX(19px); }
.interrupteur INPUT:focus-visible ~ .interrupteur_glissiere { box-shadow: 0 0 0 2px rgba(100,150,255,0.5); }

.interrupteur_texte { display: flex; flex-direction: column; }
.interrupteur_titre {
    font-family: 'Roboto-medium', Arial, sans-serif;
    font-size: 13px;
    color: #fff;
}
.interrupteur_aide { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }


/* ============================================================================ */
/* 15. PAGE - GENERATEUR DE SCRIPT (admin_generer_script.php)                   */
/* ============================================================================ */

/* --- Intitules de section ---
   Le cadre et l'entete viennent de .fiche_carte, comme sur l'onglet des
   reglages : les deux ecrans d'un monitoring se ressemblent. Ne reste ici que
   l'intitule qui decoupe le long formulaire du generateur. */
.panneau_sous_titre {
    font-family: 'Roboto-medium', Arial, sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 12px;
}

.formulaire_grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 18px;
    margin-bottom: 6px;
}
.formulaire_aide {
    font-size: 11px;
    color: rgba(255,255,255,0.38);
    margin-top: 5px;
    line-height: 1.35;
}

/* Lignes repetables : une cible mesuree par ligne (synchro, base, dossier).
   Le bouton d'ajout clone la premiere ligne : garder au moins une ligne dans
   la liste, sinon il n'a plus de modele. */
.liste_lignes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.ligne_cible {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.bouton_retirer_ligne {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    line-height: 1;
    padding: 0;
    background: rgba(255, 80, 80, 0.15);
    color: #ff9999;
    border: 1px solid rgba(255, 80, 80, 0.3);
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
}
.bouton_retirer_ligne:hover { background: rgba(255, 80, 80, 0.3); }

.bouton_ajouter_ligne { font-size: 12px; }

/* Apercu du script genere : chasse fixe, defilement horizontal plutot que
   retour a la ligne, qui rendrait le script illisible. */
.apercu_script {
    max-height: 460px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 14px 16px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre;
}


/* ============================================================================ */
/* 16. PAGE - CONNEXION (identification.php)                                    */
/* ============================================================================ */
.connexion_cadre {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.connexion_carte {
    width: 100%;
    max-width: 380px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 30px 28px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.connexion_titre {
    text-align: center;
    font-family: 'Roboto-medium', Arial, sans-serif;
    font-size: 22px;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.connexion_sous_titre {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 18px;
}
.connexion_heure {
    text-align: center;
    font-family: 'Roboto-medium', Arial, sans-serif;
    font-size: 34px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 16px;
    letter-spacing: 2px;
}
.connexion_avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.connexion_avatar img {
    width: 64px;
    height: 64px;
    padding: 12px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
}
.connexion_champ { margin-bottom: 12px; }
.connexion_champ input[type=text],
.connexion_champ input[type=password] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
}
.connexion_champ input:focus { outline: none; border-color: #3578d4; }
.connexion_bouton {
    width: 100%;
    padding: 11px;
    background: #3578d4;
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    margin-top: 6px;
}
.connexion_bouton:hover { background: #4a8ae0; }
.connexion_erreur {
    background: rgba(255,60,60,0.15);
    border-left: 3px solid #ff4444;
    color: #ffb3b3;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 12px;
    text-align: center;
}
.connexion_pied {
    text-align: center;
    margin-top: 16px;
    font-size: 11px;
    color: rgba(255,255,255,0.25);
}


/* ============================================================================ */
/* 17. UTILITAIRES                                                              */
/* ---------------------------------------------------------------------------- */
/* Toute mise en forme ponctuelle passe par une de ces classes : le HTML ne     */
/* doit porter aucun attribut style=. En creer une nouvelle seulement si aucune  */
/* existante ne convient.                                                       */
/* ============================================================================ */

/* --- Largeurs de champs (nommees par usage, pas par pixels) --- */
.champ_extensible    { flex: 1; }
.champ_large         { min-width: 250px; }
.champ_heures        { width: 120px; }
.champ_duree         { width: 140px; }
.champ_mot_de_passe  { width: 130px; }
.champ_court         { width: 100px; }
.champ_moyen         { width: 190px; }

/* --- Espacements --- */
.marge_haut_moyenne  { margin-top: 16px; }
.espace_avant        { margin-top: 20px; }
.espace_avant_large  { margin-top: 30px; }

/* --- Formulaires imbriques dans une ligne ou une cellule --- */
/* display:contents fait disparaitre le <form> de la grille du tableau : sans
   lui, le formulaire casserait l'alignement des colonnes. */
.formulaire_sans_marge   { margin: 0; }
.formulaire_transparent  { display: contents; }
.formulaire_en_ligne  { display: inline; }

/* --- Alignement --- */
/* La variante th/td est indispensable : ".tableau_utilisateurs th" impose text-align:left
   avec une specificite superieure a celle de la classe seule. */
.aligne_droite { text-align: right; white-space: nowrap; }
th.aligne_droite,
td.aligne_droite { text-align: right; white-space: nowrap; }

/* --- Textes secondaires --- */
.texte_discret       { font-size: 11px; color: rgba(255,255,255,0.4); }
.mention_secondaire  { font-size: 10px; color: rgba(255,255,255,0.3); }
.mention_admin       { font-size: 12px; color: rgba(255,255,255,0.4); }
.note_bas_formulaire { margin-top: 20px; font-size: 11px; color: rgba(255,255,255,0.4); }

/* --- Etat masque, bascule en JS --- */
.masque { display: none; }

/* --- Rangee d'elements alignes : une valeur a gauche, son action a droite --- */
.en_lignes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* Variante : tout le monde a gauche, sans ecarter les elements. */
.en_lignes_gauche { justify-content: flex-start; }
/* --- Valeur technique brute (token, chemin) : lisible caractere par caractere --- */
.valeur_technique {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 8px 12px;
    letter-spacing: 0.5px;
    word-break: break-all;
    user-select: all;
}

/* --- Date sous le libelle d'une alerte --- */
.alerte_date {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}
.alerte_bandeau .pastille { margin: 0 6px; }

/* ============================================================================ */
/* 18. RESPONSIVE MOBILE                                                        */
/* ============================================================================ */
/* Les rubriques du selecteur s'empilent avant le reste : a quatre de front,
   elles n'ont plus la place bien avant que la page ne devienne etroite. */
/* La fiche de reglage passe de quatre a deux colonnes avant de s'empiler :
   ses champs sont courts, les garder a quatre les rendrait illisibles. */
@media (max-width: 1000px) {
    .fiche_grille_informations { grid-template-columns: 1fr 1fr; }
    .fiche_grille_seuils       { grid-template-columns: repeat(3, 1fr); }
    .fiche_colonnes            { grid-template-columns: 1fr; }
    .fiche_grille_smtp         { grid-template-columns: 1fr 1fr; }
    .fiche_grille_creation     { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1140px) {
    .evolution_selecteur { flex-direction: column; padding: 4px 16px 16px; }
    .selecteur_rubrique {
        width: 100%;
        padding: 14px 0 0;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.09);
    }
    .selecteur_rubrique:first-child { border-top: none; }
}

@media (max-width: 700px) {
    .conteneur_page { padding: 12px; }

    .entete_page { padding: 10px 12px; }
    .entete_page h1 { font-size: 18px; }

    .grille_resume { grid-template-columns: repeat(2, 1fr); }
    .carte_resume { padding: 10px; }
    .carte_resume_nombre { font-size: 22px; }

    /* Ligne de monitoring : les stats passent sous le titre */
    .monitoring_ligne { flex-wrap: wrap; padding: 10px 12px; }
    .monitoring_icone { width: 28px; }
    .monitoring_icone img { width: 24px; height: 24px; }
    .monitoring_titre { font-size: 14px; }
    .monitoring_stats {
        width: 100%;
        order: 3;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid rgba(255,255,255,0.06);
        justify-content: space-between;
        gap: 8px;
    }
    .monitoring_pastille { order: 2; }

    .detail_entete { padding: 12px; gap: 10px; }
    .detail_entete img { width: 32px; height: 32px; }
    .detail_entete_titre { font-size: 18px; }

    .graphique { height: 220px; padding: 10px; }

    /* Bloc Evolution : l'entete et les rubriques s'empilent, et les filets
       verticaux entre rubriques deviennent des filets horizontaux. */
    .evolution_entete { flex-direction: column; gap: 12px; }
    .evolution_titre { font-size: 20px; }
    .evolution_note { max-width: none; }

    .evolution_graphique { padding: 12px 12px 4px; }
    .evolution_graphique_titre { font-size: 16px; }

    /* Tableaux : version compacte, colonnes secondaires masquees */
    .tableau_historique { font-size: 12px; }
    .tableau_historique th, .tableau_historique td { padding: 6px 8px; }
    .tableau_historique .colonne_masquee_mobile { display: none; }

    .tableau_utilisateurs { font-size: 11px; }
    .tableau_utilisateurs .colonne_masquee_mobile { display: none; }


    .champ_extensible,
    .champ_large,
    .champ_heures,
    .champ_duree,
    .champ_mot_de_passe { width: 100%; min-width: 0; }

    .formulaire_creation .formulaire_creation_ligne { flex-direction: column; }
    .formulaire_creation input,
    .formulaire_creation select { width: 100%; }

    .fiche_entete { flex-wrap: wrap; gap: 12px; }
    .fiche_entete_titre { font-size: 18px; }
    .fiche_entete_client { width: 100%; }
    .fiche_carte { padding: 16px; }
    .fiche_grille_informations,
    .fiche_grille_seuils { grid-template-columns: 1fr 1fr; }
    .fiche_grille_smtp,
    .fiche_grille_expediteur,
    .fiche_grille_creation,
    .fiche_grille_mot_de_passe { grid-template-columns: 1fr; }
    .ligne_icone { flex-wrap: wrap; }
    .ligne_icone_form { width: 100%; order: 3; }
    .grille_roles { grid-template-columns: 1fr; }
    .fiche_pied { flex-direction: column; align-items: stretch; }
    .fiche_pied_actions { justify-content: flex-end; }

    .en_lignes { flex-direction: column; }
    .barre_navigation { flex-direction: column; gap: 10px; }
}