/*
 * Charte graphique Cegape appliquée à BPOLINE.
 *
 * Source : C:\Projets\Cdc\charte graphique — planches « Couleurs Cegape » et « Codes couleurs »,
 * et logos fournis. Les valeurs ci-dessous sont relevées sur ces planches, non interprétées.
 *
 * Deux règles de la charte commandent la plupart des choix faits ici :
 *
 *   1. « Le bleu est la couleur majeure de l'identité Cegape. » Le bleu #0931FF et le violet
 *      #4A35D4 y sont explicitement étiquetés « Logiciel ». BPOLINE étant un logiciel, ce sont
 *      ses deux couleurs. Le corail #FF4370 est étiqueté « Formation » et l'orange #FFA547
 *      « Service » : ils appartiennent à d'autres métiers et ne sont pas utilisés comme
 *      couleurs d'interface. Ils ne subsistent que dans le dégradé du logo.
 *
 *   2. « Pour l'écriture d'un texte courant sur fond clair, on privilégie la couleur noire,
 *      et l'on utilise le bleu pour mettre en exergue un mot. » Le texte courant est donc noir,
 *      et le bleu réservé aux liens, aux titres de panneaux et aux actions.
 *
 * Un écart assumé par rapport à ces valeurs : l'interface n'emploie pas le #0931FF brut, mais
 * une déclinaison désaturée de même teinte. Le pourquoi est détaillé dans le bloc « Bleu
 * d'interface » plus bas.
 *
 * Cette feuille est chargée après Bootstrap et sb-admin-2, et avant bpoline-corrections.css :
 * elle porte l'habillage, l'autre les correctifs de mise en page, qui doivent primer.
 */

/* ------------------------------------------------------------------ *
 * Poppins — police de la charte, embarquée dans le WAR
 *
 * Licence SIL Open Font, redistribuable. Les fichiers sont servis depuis
 * webapp/fonts/poppins : aucun appel à un CDN, l'application reste utilisable
 * sur un réseau fermé. Deux jeux par graisse, latin et latin étendu, chacun
 * borné par sa plage Unicode pour que le navigateur ne télécharge que le
 * nécessaire.
 * ------------------------------------------------------------------ */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins/poppins-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins/poppins-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins/poppins-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins/poppins-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins/poppins-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins/poppins-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins/poppins-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ *
 * Palette
 *
 * Les variables donnent un point de reprise unique. Chaque règle plus bas
 * répète la valeur littérale en second, pour qu'un navigateur ancien qui
 * ignore var() reste habillé plutôt que de retomber sur du bleu Bootstrap.
 * ------------------------------------------------------------------ */

:root {
    /*
     * Couleurs de la charte, telles que les donnent les planches.
     *
     * Le bleu sert de reference documentaire et n'habille plus l'interface, pour la raison
     * expliquee juste en dessous. Il reste employe tel quel dans le degrade de marque de
     * l'ecran de connexion, ou il joue son role d'element d'identite.
     */
    --cegape-bleu-charte: #0931FF;   /* couleur majeure, etiquetee « Logiciel » */
    --cegape-violet-charte: #4A35D4; /* seconde couleur « Logiciel » */
    --cegape-fond: #F2F6F8;          /* gris tres clair de la planche, fond d'application */
    --cegape-texte: #000000;         /* texte courant, impose par la charte */
    --cegape-bordure: #DCE3EA;

    /*
     * Bleu d'interface.
     *
     * Le #0931FF de la charte est a saturation maximale — hsl(230, 100 %, 52 %). Sur un
     * support de communication, regarde quelques secondes, il fait son effet. Sur un outil
     * de gestion ouvert toute la journee, il fatigue, d'autant qu'il revient a la fois en
     * aplat sur le menu et sur chaque bouton.
     *
     * Ces deux tons gardent la teinte exacte de la marque, 230 degres, et n'en baissent que
     * la saturation : hsl(230, 60 %, 58 %) et hsl(230, 46 %, 49 %). L'ecran reste
     * reconnaissable comme du Cegape, sans l'agressivite de la teinte pure.
     */
    --cegape-bleu-interface: #5469D4;        /* menu, en-tetes, boutons, liens */
    --cegape-bleu-interface-fonce: #4357B6;  /* bloc d'identite, survols, etats actifs */
}

/* ------------------------------------------------------------------ *
 * Typographie
 *
 * Seule la famille change. Le corps reste a la taille de Bootstrap : la
 * charte prevoit 16 px pour les supports de communication, mais l'imposer a
 * un ecran de gestion dense reflowerait chaque tableau et chaque formulaire.
 * A rediscuter separement si le confort de lecture le demande.
 * ------------------------------------------------------------------ */

body,
.nav-side-menu,
.panel,
.btn,
.form-control,
input, select, textarea, button,
table.dataTable,
.dt-container {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

body {
    color: #000000;
    color: var(--cegape-texte);
    background-color: #F2F6F8;
    background-color: var(--cegape-fond);
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
}

/*
 * sb-admin-2 pose un fond blanc sur #page-wrapper. Les panneaux, blancs eux aussi, s'y
 * fondaient, et le gris de body n'apparaissait qu'en bas de page, comme une rupture.
 * En donnant au conteneur le gris de la charte, les panneaux se detachent en cartes
 * blanches sur fond clair, ce qui est la raison d'etre du #F2F6F8 de la planche.
 */
#page-wrapper {
    background-color: #F2F6F8;
    background-color: var(--cegape-fond);
}

/* ------------------------------------------------------------------ *
 * Respiration des formulaires
 *
 * Les valeurs de Bootstrap 3 datent de sa police d'origine, plus etroite
 * que Poppins : 5 px entre un libelle et son champ, 15 px entre deux
 * lignes, et rien du tout entre une case a cocher et son texte. Mesure
 * faite sur la fiche utilisateur avant modification. Le resultat etait
 * dense au point que libelles et champs se lisaient comme un seul bloc.
 *
 * Les ecarts sont elargis sans toucher a la hauteur des champs, qui
 * reste a 34 px : agrandir les champs eux-memes decalerait les grilles
 * et les bandeaux de filtres, alors qu'elargir les gouttieres ne fait
 * que reporter le contenu vers le bas.
 * ------------------------------------------------------------------ */

/* Libelle pose au-dessus de son champ : 5 px d'origine */
label {
    margin-bottom: 8px;
}

/* Entre deux lignes de champs : 15 px d'origine */
.form-group {
    margin-bottom: 20px;
}

/*
 * Cases a cocher et boutons radio : les JSP les ecrivent colles a leur
 * texte, « <s:checkbox .../>Entité de gestion » ou « Civilité <radio/>Madame ».
 * Sans marge, la coche touche la premiere lettre.
 */
input[type="checkbox"],
input[type="radio"] {
    margin-right: 6px;
}

/*
 * Libelle place a gauche de son champ plutot qu'au-dessus, dans les
 * bandeaux de filtres et les blocs de selection.
 */
label + input,
label + select,
label + textarea {
    margin-left: 8px;
}

/*
 * Champ de recherche de DataTables : le libelle « Rechercher : » et sa
 * zone de saisie sont deux elements voisins, sans separation.
 */
.dt-search label {
    margin-right: 8px;
    margin-bottom: 0;
}

.dt-search input {
    margin-left: 0;
}

/* ------------------------------------------------------------------ *
 * Menu lateral
 *
 * Aplat en bleu desature, teinte de la marque conservee. Les trois niveaux
 * — menu, bloc d'identite et sous-menus — se distinguent par la profondeur
 * plutot que par un changement de couleur, ce qui evite d'empiler deux
 * teintes vives sur une grande surface.
 * ------------------------------------------------------------------ */

.nav-side-menu {
    background-color: #5469D4;
    background-color: var(--cegape-bleu-interface);
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
}

/* Bloc d'identite : logo Cegape en blanc, puis nom de l'utilisateur */
.nav-side-menu .brand {
    background-color: #4357B6;
    background-color: var(--cegape-bleu-interface-fonce);
    color: #ffffff !important;
    line-height: 1.4;
    padding: 14px 10px 12px;
    font-weight: 500;
}

.nav-side-menu .brand .logo-cegape {
    display: block;
    margin: 0 auto 10px;
    width: 150px;
    max-width: 80%;
}

.nav-side-menu .brand a {
    color: #ffffff;
}

.nav-side-menu li {
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-side-menu li a {
    color: #ffffff;
}

.nav-side-menu li:hover {
    border-left: 3px solid #ffffff;
    background-color: #4357B6;
    background-color: var(--cegape-bleu-interface-fonce);
}

.nav-side-menu ul .active,
.nav-side-menu li .active {
    border-left: 3px solid #ffffff;
    background-color: #4357B6;
    background-color: var(--cegape-bleu-interface-fonce);
}

/* Sous-menus : un cran plus profond, pour se detacher du niveau superieur */
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
    background-color: #3D4E9E;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
    background-color: #4357B6;
    background-color: var(--cegape-bleu-interface-fonce);
}

/*
 * Les entrees de sous-menu portaient chacune un « style="color: #0078ff" » en dur,
 * seize fois dans menu.jsp, illisible sur fond bleu. Ces attributs ont ete retires de la
 * JSP plutot que neutralises a coups de !important : la couleur se pilote desormais ici.
 */
.nav-side-menu .sub-menu li,
.nav-side-menu .sub-menu li a {
    color: #ffffff;
}

.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active,
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
    color: #ffffff;
    font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Liens et actions — le bleu « met en exergue », conformement a la charte
 * ------------------------------------------------------------------ */

a {
    color: #5469D4;
    color: var(--cegape-bleu-interface);
}

a:hover,
a:focus {
    color: #4357B6;
    color: var(--cegape-bleu-interface-fonce);
}

.btn-primary {
    background-color: #5469D4;
    background-color: var(--cegape-bleu-interface);
    border-color: #5469D4;
    border-color: var(--cegape-bleu-interface);
    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: #4357B6;
    background-color: var(--cegape-bleu-interface-fonce);
    border-color: #4357B6;
    border-color: var(--cegape-bleu-interface-fonce);
}

/* ------------------------------------------------------------------ *
 * Panneaux
 * ------------------------------------------------------------------ */

.panel {
    border-radius: 4px;
    border-color: #DCE3EA;
    border-color: var(--cegape-bordure);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* En-tetes de panneaux : meme aplat desature que le menu, pour la meme raison */
.panel-primary,
.panel-primary > .panel-heading {
    border-color: #5469D4;
    border-color: var(--cegape-bleu-interface);
}

.panel-primary > .panel-heading {
    background-color: #5469D4;
    background-color: var(--cegape-bleu-interface);
    color: #ffffff;
    font-weight: 600;
}

/*
 * Les bandeaux de filtres et les blocs de selection utilisent panel-info.
 * Fond neutre de la charte et titre noir : le bleu reste reserve aux
 * elements qu'il faut mettre en avant, et ne se banalise pas.
 */
.panel-info,
.panel-info > .panel-heading {
    border-color: #DCE3EA;
    border-color: var(--cegape-bordure);
}

.panel-info > .panel-heading {
    background-color: #F2F6F8;
    background-color: var(--cegape-fond);
    color: #000000;
    color: var(--cegape-texte);
    font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Tableaux
 * ------------------------------------------------------------------ */

.table > thead > tr > th {
    background-color: #F2F6F8;
    background-color: var(--cegape-fond);
    border-bottom: 2px solid #5469D4;
    border-bottom: 2px solid var(--cegape-bleu-interface);
    font-weight: 600;
    color: #000000;
    color: var(--cegape-texte);
}

/* Pagination et bouton d'export de DataTables */
.dt-paging .dt-paging-button.current,
.dt-paging .dt-paging-button.current:hover {
    background: #5469D4 !important;
    background: var(--cegape-bleu-interface) !important;
    border-color: #5469D4 !important;
    color: #ffffff !important;
}

.dt-button {
    font-weight: 500;
}