html
{
    background-color: #000;
}

body
{
    background-color: #000;
    cursor: default;
}

.rapport-remediation
{
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--bleu-nuit);
    width: 1350px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    page-break-after: always;
    --bleu-nuit: #0b1f3a;
    --bleu-nuit-clair: #14345c;
    --teal: #2dd4bf;
    --vert: #16a34a;
    --vert-pale: #88c39e;
    --vert-fond: #e7f7ef;
    --jaune: #fee81f;
    --orange: #f59e0b;
    --orange-fond: #fff2e3;
    --rouge: #dc2626;
    --rouge-fond: #fdeaea;
    --bleu: #2563eb;
    --bleu-fond: #eaf2fb;
    --gris-texte: #475569;
    --gris: #969696;
    --gris-clair: #e2e8f0;
    --ombre: 0 2px 10px rgba(15, 35, 65, 0.08);
}

    .rapport-remediation:not(:last-child)
    {
        margin-bottom: 100px;
    }

    .rapport-remediation .rapport-remediation-contenu
    {
        padding: 20px;
        background-color: #fff;
    }

.icone-svg
{
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}

.icone-svg--trait
{
    fill: none;
    stroke: currentColor;
}


/* ---------------------------------------------------------------------- */
/* En-tête                                                                 */
/* ---------------------------------------------------------------------- */
.rapport-entete
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-nuit-clair) 100%);
    color: #ffffff;
    /*border-radius: 12px;*/
    padding: 28px 36px;
    box-shadow: none;
}

.rapport-entete-titre
{
    display: flex;
    align-items: center;
    gap: 20px;
}

.rapport-entete-icone
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    font-size: 30px;
    flex-shrink: 0;
}

    .rapport-entete-icone .icone-svg
    {
        width: 3em;
        height: 3em;
    }

.rapport-entete-textes
{
    padding-left: 26px;
    border-left: solid 1px var(--gris-clair);
    margin-left: 5px;
    text-transform: uppercase;
}

    .rapport-entete-textes h1
    {
        margin: 0;
        font-size: 24px;
        font-weight: 800;
        letter-spacing: 0.5px;
        line-height: 1.25;
    }

    .rapport-entete-textes .accentuation
    {
        color: var(--teal);
    }

.rapport-entete-sous-titre
{
    margin: 6px 0 0;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
    opacity: 0.9;
}

.rapport-entete-meta
{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.rapport-entete-date
{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    white-space: nowrap;
}

    .rapport-entete-date .icone-svg
    {
        font-size: 18px;
    }

.rapport-entete-badge
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    font-size: 22px;
}

/* ---------------------------------------------------------------------- */
/* Bandeau d'indicateurs                                                   */
/* ---------------------------------------------------------------------- */

.bandeau-indicateurs
{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin: 0 0 20px 0;
}

.carte-indicateur
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 16px 7px 16px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--ombre);
    border: 1px solid var(--gris-clair);
}

.carte-indicateur-icone
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
}

    .carte-indicateur-icone .icone-svg
    {
        width: 2.6em;
        height: 1.9em;
    }

.carte-indicateur--neutre .carte-indicateur-icone
{
    color: var(--gris-texte);
}

.carte-indicateur--neutre .carte-indicateur-contenu .carte-indicateur-valeur
{
    font-size: 42px;
    font-weight: 700;
}

.carte-indicateur--vert .carte-indicateur-icone
{
    color: var(--vert);
}

.carte-indicateur--orange .carte-indicateur-icone
{
    color: var(--orange);
}

.carte-indicateur--bleu .carte-indicateur-icone
{
    color: var(--bleu);
}

.carte-indicateur--rouge .carte-indicateur-icone,
.carte-indicateur--rouge-clair .carte-indicateur-icone,
.carte-indicateur--rouge-clair .carte-indicateur-libelle,
.carte-indicateur--rouge-clair .carte-indicateur-valeur,
.carte-indicateur--rouge-clair .carte-indicateur-detail
{
    color: var(--rouge);
}

.carte-indicateur--vert
{
    background: var(--vert-fond);
}

.carte-indicateur--orange
{
    background: var(--orange-fond);
}

.carte-indicateur--bleu
{
    background: var(--bleu-fond);
}

.carte-indicateur--rouge,
.carte-indicateur--rouge-clair
{
    background: var(--rouge-fond);
}

.carte-indicateur-libelle
{
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--gris-texte);
    line-height: 1.3;
}

.carte-indicateur-valeur
{
    margin: 2px 0 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    height: 35px;
}

.carte-indicateur-detail
{
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--gris-texte);
    font-style: italic;
}

.carte-indicateur--anneau
{
    justify-content: center;
}

.carte-indicateur-anneau-conteneur
{
    position: relative;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
}

.anneau-avancement
{
    idth: 78px;
    height: 78px;
    transform: rotate(-90deg);
    margin-left: -10px;
    margin-top: -6px;
}

.anneau-fond
{
    fill: none;
    stroke: var(--gris-clair);
    stroke-width: 7;
}

.anneau-remplissage
{
    fill: none;
    stroke: var(--vert);
    stroke-width: 7;
    stroke-linecap: round;
}

.anneau-valeur
{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* Tableau des actions                                                     */
/* ---------------------------------------------------------------------- */

.tableau-conteneur
{
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: var(--ombre);
    border: 1px solid var(--gris-clair);
}

.tableau-actions
{
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    font-size: 13.5px;
}

    .tableau-actions thead tr
    {
        background: var(--bleu-nuit-clair);
        color: #ffffff;
    }

    .tableau-actions th
    {
        text-align: left;
        padding: 14px 16px;
        font-weight: 700;
        white-space: nowrap;
    }

        .tableau-actions th:first-child
        {
            /*border-left: solid 6px var(--bleu-nuit-clair);*/
        }

        .tableau-actions th:not(:first-child)
        {
            border-left: 1px solid var(--gris);
        }

.entete-colonne
{
    display: flex;
    align-items: center;
    gap: 8px;
}

    .entete-colonne .icone-svg
    {
        font-size: 15px;
        width: 1.7em;
        height: 1.7em;
    }

.tableau-actions td
{
    padding: 11px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--gris-clair);
/*    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: transparent;
*/}

    .tableau-actions td:not(:first-child)
    {
        border-left: 1px solid var(--gris-clair);
    }

    .tableau-actions td.cellule-priorite
    {
        text-align: center;
    }

.tableau-actions tbody tr.ligne-paire
{
    background: #ffffff;
}

.tableau-actions tbody tr.ligne-impaire
{
    background: #f5f8fc;
}

.tableau-actions tbody tr.action-terminee
{
}

    .tableau-actions tbody tr.action-terminee td:first-child
    {
        border-left-color: var(--vert);
    }

    .tableau-actions tbody tr.action-terminee .cellule-avancement
    {
        color: var(--vert);
        font-weight: 500;
        padding-left: 38px !important;
        padding-right: 5px !important;
    }

        .tableau-actions tbody tr.action-terminee .cellule-avancement .icone-svg
        {
            color: var(--vert);
        }

.tableau-actions tbody tr.action-encours
{
}

    .tableau-actions tbody tr.action-encours td:first-child
    {
        border-left-color: var(--orange);
    }

    .tableau-actions tbody tr.action-encours .cellule-avancement
    {
        text-align: center;
    }

.tableau-actions tbody tr.action-enretard
{
}

    .tableau-actions tbody tr.action-enretard td:first-child
    {
        /*border-left-color: var(--rouge);*/
    }

    .tableau-actions tbody tr.action-enretard .cellule-date-fin,
    .tableau-actions tbody tr.action-enretard .cellule-date-fin .icone-svg
    {
        color: var(--rouge);
        /*opacity: 1.0 !important;*/
    }

/*.tableau-actions tbody tr.action-enretard .cellule-date-fin .icone-svg
        {
            margin-left: -2px;
            margin-right: 5px;
        }*/

.tableau-actions tbody tr.action-enattente
{
}

    .tableau-actions tbody tr.action-enattente td:first-child
    {
        border-left-color: var(--bleu);
    }

    .tableau-actions tbody tr.action-enattente .cellule-avancement
    {
        color: var(--bleu);
        font-weight: 500;
        padding-left: 38px !important;
        padding-right: 5px !important;
    }

        .tableau-actions tbody tr.action-enattente .cellule-avancement .icone-svg
        {
            color: var(--bleu);
        }

@media screen
{
    .tableau-actions tbody tr:hover
    {
        background: #eef4fc;
    }
}

.cellule-action
{
    min-width: 240px;
}

.action-libelle
{
    margin: 0;
    font-weight: 700;
    color: var(--bleu-nuit);
}

.action-categorie
{
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--gris-texte);
}

/* Responsable */

.responsable-conteneur
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge-trigramme
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--gris-texte);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.responsable-nom
{
    margin: 0;
    font-weight: 600;
}

.responsable-fonction
{
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--gris-texte);
}

/* Priorité */

.cellule-priorite
{
    width: 157px;
}

.badge-priorite
{
    height: 28px;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    width: 100px;
    text-align: center;
    line-height: 18px;
}

.badge-priorite--critique
{
    background: var(--rouge);
}

.badge-priorite--haute
{
    background: var(--orange);
    color: #000;
}

.badge-priorite--moyenne
{
    background: var(--jaune);
    color: #000;
}

.badge-priorite--faible
{
    background: var(--vert-pale);
    color: #000;
}

/* Météo */

.cellule-meteo
{
    text-align: center;
    width: 127px;
}

.meteo-icone
{
    display: inline-flex;
    font-size: 24px;
}

    .meteo-icone .icone-svg
    {
        width: 1.7em;
        height: 1.7em;
    }

.meteo-bonne
{
    color: var(--vert);
}

.meteo-alerte
{
    color: var(--orange);
}

.meteo-mauvaise
{
    color: var(--rouge);
}

/* Avancement */

.cellule-avancement
{
    width: 188px;
}

    .cellule-avancement .icone-svg
    {
        font-size: 15px;
        margin-right: 3px;
        color: var(--gris-texte);
        vertical-align: -7px;
        width: 2.3em;
        height: 1.7em;
    }

.barre-avancement-conteneur
{
    display: flex;
    align-items: center;
    gap: 0;
}

.barre-avancement-fond
{
    flex: 1;
    height: 12px;
    border-radius: 6px;
    background: var(--gris-clair);
    overflow: hidden;
}

.barre-avancement-remplissage
{
    height: 100%;
    width: var(--largeur);
    border-radius: 6px;
}

.barre-avancement--vert
{
    background: var(--vert);
}

.barre-avancement--orange
{
    background: var(--orange);
}

.barre-avancement--rouge
{
    background: var(--rouge);
}

.barre-avancement-texte
{
    font-size: 12.5px;
    font-weight: 700;
    min-width: 34px;
    text-align: right;
}

/* Date de fin */

.cellule-date-fin
{
    display: table-cell;
    width: 164px;
    white-space: nowrap;
    font-weight: 500;
    padding-left: 26px !important;
    padding-right: 5px !important;
}

    .cellule-date-fin .icone-svg
    {
        font-size: 15px;
        margin-right: 3px;
        color: var(--gris-texte);
        vertical-align: -7px;
        width: 2.3em;
        height: 1.7em;
    }

/* Décision attendue */

.decision-conteneur
{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

    .decision-conteneur .icone-svg
    {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        padding: 3px;
        box-sizing: border-box;
        flex-shrink: 0;
        color: #fff;
    }

.decision--positive
{
    /*color: var(--vert);*/
}

    .decision--positive .icone-svg
    {
        background: var(--vert);
    }

.decision--information
{
    /*color: var(--bleu);*/
}

    .decision--information .icone-svg
    {
        background: var(--bleu);
    }

.decision--alerte
{
    /*color: var(--orange);*/
}

    .decision--alerte .icone-svg
    {
        background: var(--orange);
    }

/* ---------------------------------------------------------------------- */
/* Légende                                                                  */
/* ---------------------------------------------------------------------- */

.legende-conteneur
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.legende-bloc
{
    background: #ffffff;
    border: 1px solid var(--gris-clair);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: var(--ombre);
}

.legende-titre
{
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bleu-nuit);
}

.legende-lignes
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legende-ligne
{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--gris-texte);
}

    .legende-ligne .icone-svg
    {
        font-size: 18px;
        flex-shrink: 0;
    }

.puce-priorite,
.puce-avancement
{
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.puce-priorite--critique
{
    background: var(--rouge);
}

.puce-priorite--haute
{
    background: var(--orange);
}

.puce-priorite--moyenne
{
    background: #eab308;
}

.puce-avancement--rouge
{
    background: var(--rouge);
}

.puce-avancement--orange
{
    background: var(--orange);
}

.puce-avancement--vert-clair
{
    background: #86efac;
}

.puce-avancement--vert
{
    background: var(--vert);
}

/* ---------------------------------------------------------------------- */
/* Formulaire d'import                                                     */
/* ---------------------------------------------------------------------- */

.page-import
{
    position: fixed;
    top: 65px;
    right: 9px;
    z-index: 10000;
}

    .page-import .icone-import
    {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
        text-align: center;
        color: #000;
        line-height: 65px;
        opacity: 0.5;
    }

        .page-import .icone-import:hover
        {
            opacity: 1.0;
        }

        .page-import .icone-import .icone-svg
        {
            width: 40px;
            height: 40px;
        }

    .page-import .formulaire-import
    {
        display: none;
    }

    .page-import .etiquette-import
    {
        font-size: 13px;
        font-weight: 700;
        color: #0b1f3a;
    }

    .page-import .ligne-import
    {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

.exemple-import
{
    display: block;
    width: 400px;
    box-sizing: border-box;
    text-align: center;
    font-size: 24px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40vh;
    text-decoration: none;
    padding: 10px;
    color: #000 !important;
    background-color: #fff;
    border-radius: 36px;
    opacity: 0.5;
}

    .exemple-import:hover
    {
        opacity: 1.0 !important;
    }


/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
/*
@media (max-width: 1100px)
{
    .bandeau-indicateurs
    {
        grid-template-columns: repeat(3, 1fr);
    }

    .legende-conteneur
    {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px)
{
    .bandeau-indicateurs
    {
        grid-template-columns: 1fr 1fr;
    }

    .rapport-entete
    {
        flex-direction: column;
        align-items: flex-start;
    }
}
*/
@media print
{
    html
    {
        background-color: #fff;
    }

    body
    {
        background-color: #fff;
    }

    .page-import
    {
        display: none;
    }

    .rapport-remediation
    {
        margin-bottom: 0;
    }
}