/*
 * DEFI v2 : accueil / liste / fiche participante / connexion.
 * Charger apres les styles historiques. Retirer ce lien pour revenir en arriere.
 * Grilles, menus, icones et largeurs restent en place ; espacements verticaux cibles.
 * Les couleurs metier et les styles d'impression restent ceux de DEFI.
 */
@media screen {
    body {
        background-color: #edf2f8;
    }

    #main-content {
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        font-weight: 400;
        /* L'accueil porte la classe historique bg-white avec !important. */
        background-color: #edf2f8 !important;
    }

    #main-content h1,
    #main-content h2,
    #main-content h3,
    #main-content h4,
    #main-content .panel-title {
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        letter-spacing: 0.01em;
    }

    #main-content > .page-title {
        /* Bandeau decoratif, independant des etats metier des fiches. */
        background: #214f7a !important;
        border-bottom: 2px solid #143958;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(24, 56, 88, 0.18);
    }

    #main-content > .page-title > h3 {
        color: #fff;
    }

    /* Le theme impose font-weight: 300 !important sur tous les titres. */
    #main-content > .page-title > h3,
    #main-content .panel-heading > .panel-title {
        font-weight: 600 !important;
    }

    #main-content .panel {
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(24, 56, 88, 0.16);
    }

    #main-content .panel-default {
        border-color: #cbd5df;
    }

    #main-content .panel-default:not([class*="bg-"]),
    #main-content .panel-default > .panel-body:not([class*="bg-"]),
    #main-content .tab-content:not([class*="bg-"]) {
        background-color: #fff;
    }

    #main-content .panel-default > .panel-heading:not([class*="bg-"]) {
        background-color: #285f94;
        color: #fff;
        border-bottom-color: #214f7a;
    }

    #main-content .panel-default > .panel-heading.bg-blue {
        background-color: #285f94 !important;
    }

    #main-content .panel-heading:not([class*="bg-"]) > .panel-title,
    #main-content .panel-heading.bg-blue > .panel-title {
        color: #fff;
    }

    /* Accueil : conserver les couleurs des raccourcis dans leur bandeau d'icone. */
    .defi-dashboard #main-content .panel-icon > .panel-footer {
        background-color: #fff !important;
        color: #253f57 !important;
        border-radius: 0 0 10px 10px;
    }

    .defi-dashboard #main-content .panel-icon > .panel-footer h2 {
        color: #253f57;
        font-weight: 600 !important;
    }

    .defi-dashboard #main-content .panel-icon > .panel-body {
        border-radius: 10px 10px 0 0;
    }

    #main-content .tab-content:not([class*="bg-"]) {
        border-radius: 0 0 8px 8px;
        box-shadow: 0 3px 12px rgba(35, 49, 63, 0.09);
    }

    #main-content .btn {
        border-radius: 6px;
        font-weight: 600;
        box-shadow: 0 2px 4px rgba(35, 49, 63, 0.17);
    }

    /* Bleu d'action uniquement : danger, warning, success et info restent historiques. */
    #main-content .btn-primary:not(.disabled):not([disabled]):not(fieldset[disabled] *) {
        background-color: #285f94;
        border-color: #214f7a;
    }

    #main-content .btn-primary:not(.disabled):not([disabled]):not(fieldset[disabled] *):hover,
    #main-content .btn-primary:not(.disabled):not([disabled]):not(fieldset[disabled] *):focus {
        background-color: #1c4872;
    }

    #main-content .btn-default:not(.btn-transparent):not(.disabled):not([disabled]):not(.active):not(fieldset[disabled] *) {
        background-color: #fff;
        border-color: #9db2c8;
        color: #214f7a;
    }

    #main-content .btn:active,
    #main-content .btn.active {
        box-shadow: inset 0 2px 4px rgba(24, 56, 88, 0.25);
    }

    /* Conserver les jonctions des boutons groupes et des champs composites. */
    #main-content .btn-group > .btn {
        border-radius: 0;
    }

    #main-content .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
        border-radius: 6px 0 0 6px;
    }

    #main-content .btn-group > .btn:last-child:not(:first-child),
    #main-content .btn-group > .dropdown-toggle:not(:first-child) {
        border-radius: 0 6px 6px 0;
    }

    #main-content .input-group .form-control,
    #main-content .input-group .btn {
        border-radius: 0;
    }

    #main-content .input-group > .form-control:first-child {
        border-radius: 6px 0 0 6px;
    }

    #main-content .input-group > .form-control:last-child {
        border-radius: 0 6px 6px 0;
    }

    #main-content .btn:focus-visible,
    #main-content a:focus-visible {
        outline: 2px solid #315f86;
        outline-offset: 2px;
    }

    #main-content .btn[disabled],
    #main-content .btn.disabled {
        box-shadow: none;
    }

    #main-content .form-control {
        border-radius: 6px;
        box-shadow: inset 0 1px 3px rgba(35, 49, 63, 0.12);
    }

    /* Champs neutres uniquement : exclure les couleurs et etats de validation. */
    #dynsel :is(input, select, textarea).form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([readonly]):not(:disabled):not(.parsley-error):not(.parsley-success):not([aria-invalid="true"]):not([class*="bg-"]):not([style*="background"]):not(.has-error *):not(.has-warning *):not(.has-success *) {
        background-color: #f6f9fd !important;
        border-color: #93adc4;
    }

    #dynsel :is(input, textarea).form-control::placeholder {
        color: #63768a;
        opacity: 1;
    }

    #dynsel .form-group {
        margin-bottom: 18px;
    }

    #main-content .form-control:focus {
        outline: 2px solid rgba(49, 95, 134, 0.55);
        outline-offset: 1px;
    }

    #main-content .form-control[readonly],
    #main-content .form-control[disabled] {
        box-shadow: none;
    }

    #main-content label.control-label {
        font-weight: 600;
    }

    #main-content .table > thead > tr > th {
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        font-weight: 600;
    }

    /* En-tetes decoratifs : background-color conserve les images de tri. */
    #main-content #listeparticipantes > thead > tr > th {
        background-color: #285f94;
        color: #fff;
        padding-top: 12px;
        padding-bottom: 12px;
        box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    }

    /* Fonds alternes et survol uniquement pour les lignes neutres de DataTables. */
    #main-content #listeparticipantes > tbody > tr.even {
        --defi-row-background: #f3f7fc;
    }

    #main-content #listeparticipantes > tbody > tr:is(.odd, .even):not([class*="bg-"]):not(.success):not(.warning):not(.danger):not(.info):not(.active):not(.selected):not([style*="background"]) > td:not([class*="bg-"]):not([style*="background"]):not(.success):not(.warning):not(.danger):not(.info) {
        background-color: var(--defi-row-background, #fff);
    }

    #main-content #listeparticipantes > tbody > tr:is(.odd, .even):not([class*="bg-"]):not(.success):not(.warning):not(.danger):not(.info):not(.active):not(.selected):not([style*="background"]):hover > td:not([class*="bg-"]):not([style*="background"]):not(.success):not(.warning):not(.danger):not(.info) {
        background-color: #e5eff9;
    }

    #main-content #listeparticipantes > tbody > tr > td {
        border-bottom: 1px solid #dce5ef;
    }

    #main-content #myTab.nav-tabs > li.active > a {
        box-shadow: inset 0 3px 0 #285f94;
        font-weight: 600;
    }

    #main-content .dataTables_filter input,
    #main-content .dataTables_length select,
    #main-content #listeparticipantes_filter input {
        border-radius: 6px;
        box-shadow: inset 0 1px 3px rgba(35, 49, 63, 0.12);
    }

    #main-content .pagination > li > a,
    #main-content .pagination > li > span {
        box-shadow: 0 1px 2px rgba(35, 49, 63, 0.04);
    }

    /* Connexion : aucun changement de champ, de dimension ou de mecanisme reCAPTCHA. */
    body.login[data-page="login"] {
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        background: radial-gradient(ellipse at top left, #c3d2e3, #d4deea 65%);
        color: #253f57;
    }

    body.login[data-page="login"] .login-box {
        background-color: #5f81a3;
        color: #07111b;
        border-radius: 12px;
        box-shadow: 0 16px 44px rgba(24, 56, 88, 0.32), 0 4px 12px rgba(24, 56, 88, 0.12), inset 0 4px 0 #285f94;
    }

    body.login[data-page="login"] .page-icon {
        background-color: #285f94;
    }

    body.login[data-page="login"] .login-form .input-field {
        border-radius: 6px;
        background-color: #e8eef5 !important;
        /* Bordure interieure : conserver la hauteur et la largeur historiques. */
        box-shadow: inset 0 0 0 1px #93adc4;
    }

    body.login[data-page="login"] .login-form .input-field:focus {
        outline: 2px solid #285f94;
        outline-offset: 2px;
    }

    body.login[data-page="login"] .btn-login:not([disabled]) {
        background-color: #285f94;
        color: #fff;
        border-radius: 6px;
        font-weight: 600;
        box-shadow: 0 3px 8px rgba(24, 56, 88, 0.2);
    }

    body.login[data-page="login"] .btn-login:not([disabled]):hover {
        background-color: #1c4872;
        opacity: 1;
    }

    body.login[data-page="login"] .login-links a {
        color: #07111b;
        opacity: 1;
        text-decoration: underline;
    }

    body.login[data-page="login"] .defi-version {
        position: fixed;
        right: 18px;
        bottom: 88px; /* Au-dessus du badge Google, qui doit rester accessible. */
        padding: 4px 9px;
        border-radius: 5px;
        background-color: #fff;
        color: #4b6178;
        font-size: 12px;
        font-weight: 600;
        pointer-events: none;
    }
}