/* ==========================================================
   FORGE
   Charte graphique officielle v1.0
========================================================== */

:root{

    --forge-blue:#1F3B5A;
    --forge-blue-light:#31567A;
    --forge-gold:#D6A74E;

    --background:#F3F5F8;
    --card:#FFFFFF;

    --text:#243241;
    --text-light:#73808F;

    --border:#DCE2E8;

    --shadow:
        0 10px 30px rgba(0,0,0,.08);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:
        "Segoe UI",
        Inter,
        Arial,
        sans-serif;

    background:var(--background);

    color:var(--text);

}

#app{

    padding:15px 25px;

}


/* ==========================================================
   ACCUEIL
========================================================== */

.home{

    max-width:600px;

    margin:auto;

    text-align:center;

}


/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:block;

    width:240px;

    height:auto;

    margin:30px auto 25px auto;

    filter:drop-shadow(0 8px 20px rgba(0,0,0,.18));

    animation: apparitionLogo .6s ease;

}


/* ==========================================================
   SOUS TITRE
========================================================== */

.subtitle{

    text-align:center;

    color:#6d7c92;

    font-size:1rem;

    line-height:1.5;

    margin-bottom:40px;

}


/* ==========================================================
   MENU
========================================================== */

.menu{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/* ==========================================================
   BOUTONS
========================================================== */

button{

    background:var(--forge-blue);

    color:white;

    border:none;

    border-radius:12px;

    padding:18px;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    box-shadow:var(--shadow);

    position:relative;

    overflow:hidden;

    transition:
        background .20s ease,
        transform .15s ease,
        box-shadow .20s ease;

}

/* ==========================================================
   SURVOL
========================================================== */

button:hover{

    background:#3B628A;

    transform:translateY(-2px);

    filter:brightness(108%);

    box-shadow:
        0 10px 24px rgba(0,0,0,.16);

}

/* ==========================================================
   CLIC
========================================================== */

button:active{

    background:#29486A;

    transform:translateY(1px);

    filter:brightness(92%);

    box-shadow:
        0 3px 8px rgba(0,0,0,.14);

}



/* ==========================================================
   FOOTER
========================================================== */

footer{

    margin-top:20px;

    color:var(--text-light);

    font-size:14px;

}


/* ==========================================================
   CARTES
   (servira aux prochaines vues)
========================================================== */

.card{

    background:var(--card);

    border-radius:16px;

    padding:30px;

    box-shadow:var(--shadow);

}


/* ==========================================================
   TITRES
========================================================== */

h1,h2,h3{

    color:var(--forge-blue);

    font-weight:700;

}
/* ==========================================================
   DESIGN SYSTEM
========================================================== */

/* Carte principale */

.card{

    background:var(--card);

    border-radius:16px;

    padding:32px;

    box-shadow:var(--shadow);

    border:1px solid var(--border);

}


/* Titres de section */

.section-title{

    font-size:24px;

    font-weight:700;

    color:var(--forge-blue);

    margin-bottom:10px;

}

.section-subtitle{

    color:var(--text-light);

    margin-bottom:30px;

}


/* Séparateur */

.separator{

    width:100%;

    height:1px;

    background:var(--border);

    margin:30px 0;

}


/* Champs */

input,
select,
textarea{

    width:100%;

    padding:14px 16px;

    font-size:16px;

    border:1px solid var(--border);

    border-radius:10px;

    background:white;

    color:var(--text);

    transition:.2s;

}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:var(--forge-blue);

    box-shadow:0 0 0 3px rgba(31,59,90,.12);

}


/* Labels */

label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}


/* Barre de progression */

.progress{

    width:100%;

    height:10px;

    background:#E8EDF2;

    border-radius:100px;

    overflow:hidden;

}

.progress-bar{

    height:100%;

    width:0%;

    background:linear-gradient(
        90deg,
        var(--forge-blue),
        var(--forge-gold)
    );

    transition:.25s;

}


/* Badges */

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:100px;

    font-size:13px;

    font-weight:700;

}

.badge-success{

    background:#DDF5E4;

    color:#2E7D32;

}

.badge-warning{

    background:#FFF1D6;

    color:#B26A00;

}

.badge-danger{

    background:#FFE1E1;

    color:#C62828;

}

.badge-neutral{

    background:#ECEFF3;

    color:#607080;

}


/* Boutons secondaires */

.button-secondary{

    background:white;

    color:var(--forge-blue);

    border:1px solid var(--border);

}

.button-secondary:hover{

    background:#F5F8FB;

}
/* ==========================================================
   NOTATION
========================================================== */

.rating{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

    margin-top:12px;

}

.rating button{

    padding:10px;

    font-size:15px;

    font-weight:700;

    border-radius:10px;

    border:2px solid transparent;

    transition:.15s;

}

.rating button.selected{

    border-color:#111;

    transform:scale(.98);

}

.rating-attendu{

    background:#2E7D32;

}

.rating-amelioration{

    background:#F9A825;

}

.rating-nonfait{

    background:#C62828;

}

.rating-na{

    background:#8E99A8;

}
/* ==========================================================
   QUESTIONNAIRE
========================================================== */

.rating-button{

    min-height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.rating-button.selected{

    outline:4px solid rgba(255,255,255,.55);

    box-shadow:
        0 0 0 3px var(--forge-blue),
        var(--shadow);

    transform:scale(.97);

}

.question-navigation{

    display:flex;

    justify-content:space-between;

    gap:10px;

    margin-top:30px;

}

.question-navigation button{

    flex:1;

}

button:disabled{

    background:#BFC7D1;

    color:#EEF2F6;

    opacity:1;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

button:disabled:hover{

    background:#BFC7D1;

    color:#EEF2F6;

    transform:none;

    box-shadow:none;

    filter:none;

}
/* ==========================================================
   DEBRIEF
   Dashboard
========================================================== */

.debrief-dashboard{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

    margin:15px 0 18px;

}

.dashboard-card{

    background:white;

    border:1px solid var(--border);

    border-radius:10px;

    padding:9px 8px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.2s;

}

.dashboard-card:hover{

    transform:translateY(-2px);

}

.dashboard-number{

    font-size:23px;

    font-weight:800;

    color:var(--forge-blue);

    margin-bottom:2px;

}

.dashboard-label{

    color:var(--text-light);

    font-size:11px;

    line-height:1.15;

}

.dashboard-green{

    border-left:5px solid #2E7D32;

}

.dashboard-orange{

    border-left:5px solid #F9A825;

}

.dashboard-red{

    border-left:5px solid #C62828;

}
/* ==========================================================
   TAUX DE CONFORMITE
========================================================== */

.conformite{

    margin:35px 0 45px 0;

}

.conformite-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.conformite-header strong{

    color:var(--forge-blue);

    font-size:22px;

}

.conformite-barre{

    width:100%;

    height:18px;

    background:#E7EBF0;

    border-radius:999px;

    overflow:hidden;

}

.conformite-remplissage{

    height:100%;

    background:linear-gradient(
        90deg,
        #2E7D32,
        #4CAF50
    );

    transition:width .6s ease;

}
/* ==========================================================
   DEBRIEF
   Sections
========================================================== */

.debrief-section{

    margin-top:15px;

}

.debrief-section h2{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

    padding-bottom:10px;

    border-bottom:2px solid var(--border);

}

.debrief-section .badge{

    margin-left:auto;

    background:var(--forge-blue);

    color:white;

}


/* ==========================================================
   CARTES
========================================================== */

.debrief-card{

    background:white;

    border:1px solid var(--border);

    border-radius:16px;

    padding:22px;

    margin-bottom:18px;

    box-shadow:var(--shadow);

    transition:
        transform .15s,
        box-shadow .2s;

}

.debrief-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 34px rgba(0,0,0,.10);

}

.debrief-header{

    display:block;

    margin-bottom:18px;

    padding-bottom:12px;

    border-bottom:1px solid #E4E8EE;

}

.debrief-header h3{

    margin:0 0 12px 0;

    color:var(--forge-blue);

    font-size:22px;

}

.section-badge{

    display:inline-block;

    background:#EEF3F8;

    color:var(--forge-blue);

    padding:6px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}

.debrief-description{

    color:var(--text-light);

    line-height:1.6;

    margin-bottom:18px;

}

.debrief-commentaire{

    background:#F8FAFC;

    border-left:4px solid var(--forge-gold);

    border-radius:10px;

    padding:16px;

}

.debrief-commentaire strong{

    display:block;

    color:var(--forge-blue);

    margin-bottom:8px;

}

.debrief-commentaire p{

    margin:0;

    line-height:1.6;

}
/* ==========================================================
   BADGES — ÉTAT DU CRITÈRE
========================================================== */

.section-badge.badge-attendu{

    background:#E8F5E9;

    color:#2E7D32;

}

.section-badge.badge-amelioration{

    background:#FFF3CD;

    color:#B26A00;

}

.section-badge.badge-nonfait{

    background:#FDECEC;

    color:#C62828;

}

.section-badge.badge-na{

    background:#EEF1F5;

    color:#667085;

}
/* ==========================================================
   DEBRIEF
   Zone manager
========================================================== */

.debrief-zone{

    margin-top:50px;

}

.debrief-zone label{

    margin-top:20px;

    display:block;

}

.debrief-zone textarea{

    resize:vertical;

    min-height:120px;

}

.debrief-zone input{

    max-width:260px;

}


/* ==========================================================
   Boutons
========================================================== */

.question-navigation{

    margin-top:40px;

}

.question-navigation button{

    min-height:58px;

    font-size:16px;

}


/* ==========================================================
   Animations
========================================================== */

.debrief-dashboard,
.debrief-section,
.debrief-card{

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.question-label{

    display:block;

    margin:12px 0 6px;

    font-weight:600;

}
/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1100px){

    .debrief-dashboard{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:700px){

    #app{

        padding:20px;

    }

    .card{

        padding:22px;

    }

    .debrief-dashboard{

        grid-template-columns:1fr;

    }

    .debrief-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .section-badge{

        margin-top:10px;

    }

    .question-navigation{

        flex-direction:column;

    }

}


/* ==========================================================
   Petites finitions
========================================================== */

.debrief-card strong{

    color:var(--forge-blue);

}

.debrief-card p{

    margin-top:8px;

}

.debrief-card:hover .section-badge{

    background:var(--forge-blue);

    color:white;

    transition:.2s;

}

.dashboard-card:hover .dashboard-number{

    transform:scale(1.08);

    transition:.2s;

}

.conformite-header span{

    color:var(--text-light);

    font-weight:600;

}
/* ==========================================================
   ANALYSE
========================================================== */

.analyse-ligne{

    display:flex;

    align-items:center;

    gap:16px;

    padding:14px 0;

    border-bottom:1px solid var(--border);

}

.analyse-ligne:last-child{

    border-bottom:none;

}

.analyse-icone{

    width:34px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.analyse-check{

    width:26px;

    height:26px;

    border-radius:50%;

    background:#2E7D32;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:14px;

    box-shadow:0 4px 10px rgba(46,125,50,.25);

}

.analyse-texte{

    flex:1;

    font-size:16px;

    color:var(--text);

}

@keyframes apparitionLogo{

    from{

        opacity:0;

        transform:translateY(-20px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}
.footer{

.footer{

    margin-top:55px;

    padding-top:20px;

    border-top:1px solid var(--border);

    text-align:center;

    color:#7b8798;

    font-size:12px;

    line-height:1.7;

}

}

.footer strong{

    color:#55606f;

    font-weight:600;

}
/* ==========================================
   LOGO FORGE
========================================== */

.logo-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:5px;

    margin-bottom:0;

}

.logo-centre{

    width:400px;

    height:auto;

    margin-bottom:-80px;

}

.logo-forge{

    width:360px;

    height:auto;

    margin-top:-20px;
    margin-bottom:-30px;

}
/*==================================================
ANIMATIONS ACCUEIL
==================================================*/

.intro-logo,
.intro-forge,
.menu-item{

    opacity:0;

    transform:translateY(20px);

}

/* Apparition logo */

.intro-logo{

    animation:introLogo .55s ease forwards;

}

/* Apparition titre */

.intro-forge{

    animation:introForge .55s ease forwards;

    animation-delay:.20s;

}

/* Apparition boutons */

.menu-item:nth-child(1){

    animation:introMenu .45s ease forwards;

    animation-delay:.45s;

}

.menu-item:nth-child(2){

    animation:introMenu .45s ease forwards;

    animation-delay:.55s;

}

.menu-item:nth-child(3){

    animation:introMenu .45s ease forwards;

    animation-delay:.65s;

}

.menu-item:nth-child(4){

    animation:introMenu .45s ease forwards;

    animation-delay:.75s;

}

/*==========================
KEYFRAMES
==========================*/

@keyframes introLogo{

    0%{

        opacity:0;

        transform:
            translateY(20px)
            scale(.94);

    }

    70%{

        opacity:1;

        transform:
            translateY(0)
            scale(1.03);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

@keyframes introForge{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes introMenu{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==========================================================
   VERSION MOBILE
========================================================== */

@media (max-width:700px){

    /* -----------------------------
       Accueil
    ------------------------------ */

    .home{

        padding:10px;

    }

    .logo-centre{

        width:240px;

    }

    .logo-forge{

        width:220px;

        margin-top:-20px;

        margin-bottom:6px;

    }

    .menu{

        gap:12px;

        margin-top:4px;

    }
    /* -----------------------------
   Questionnaire
------------------------------ */

.card{

    padding:14px;

}

.card h2{

    margin:4px 0;

}

.subtitle{

    margin:4px 0 8px;

    font-size:14px;

}

.separator{

    margin:10px 0;

}
.rating{

    gap:8px;

    margin-top:8px;

}

.rating-button{

    min-height:44px;

}

.rating button{

    padding:10px;

    font-size:14px;

}
textarea{

    min-height:70px;

}

    /* -----------------------------
       Boutons
    ------------------------------ */

    button{

        padding:14px;

        font-size:16px;

    }

    /* -----------------------------
       Champs de formulaire
    ------------------------------ */

    input,
    select,
    textarea{

        padding:10px 14px;

        font-size:15px;

        border-radius:8px;

    }
    /* ==========================================================
   FORMULAIRES
========================================================== */

.formulaire{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:20px;

}

.formulaire label{

    font-size:18px;

    font-weight:600;

    color:var(--forge-blue);

    margin-top:6px;

}
/* -----------------------------
   Cartes
------------------------------ */

.card{

    padding:20px;

}
/* -----------------------------
   Formulaires
------------------------------ */

.formulaire{

    gap:6px;

    margin-top:8px;

}

.formulaire label{

    font-size:16px;

    margin-top:2px;

}
.question-label{

    margin:8px 0 4px;

}
#sectionTitre{

    font-size:28px;

    margin-bottom:2px;

}

#questionTitre{

    font-size:22px;

    line-height:1.1;

    margin:8px 0 4px;

}

#questionDescription{

    font-size:14px;

    line-height:1.25;

    margin-bottom:10px;

}
.rapport-header {

    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #223b5f;

}

.rapport-header h1 {

    margin-bottom: 20px;
    text-align: center;

}

.rapport-infos {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 30px;

}

.rapport-infos p {

    margin: 0;

}
}
.pdf-cover{

    margin:-35px -35px 10px -35px;

    background:white;

}

.pdf-cover-image{

    position:relative;

    width:100%;

    height:300px;

    overflow:visible;

}

.pdf-cover-photo{

    width:100%;

    height:300px;

    overflow:hidden;

}

.pdf-cover-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 35%;

    display:block;

}

.pdf-cover-logo{

    position:absolute;

    left:50%;

    top:250px;

    transform:translateX(-50%);

    width:180px;

    height:105px;

    background:white;

    border-radius:0 0 16px 16px;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 12px 30px rgba(0,0,0,.20);

    z-index:10;

}

.pdf-cover-logo img{

    width:120px;

    height:auto;

}
.pdf-cover-title{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    width:100%;

    text-align:center;

    z-index:3;

}

.pdf-cover-title h1{

    margin:0;

    font-size:36px;

    font-weight:700;

    color:#17375E;

    text-shadow:0 2px 10px rgba(255,255,255,.8);

}

.pdf-cover-title p{

    margin:10px 0 0;

    font-size:18px;

    color:#555;

}

.pdf-cover-info{

    max-width:900px;

    width:calc(100% - 80px);

    margin:55px auto 10px;

    padding:15px 50px;

    position:relative;

    z-index:2;

    box-sizing:border-box;

    text-align:center;

}

.pdf-cover-card h1{

    margin:0 0 12px;

    text-align:center;

}

.pdf-cover-table{

    width:100%;

    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:8px;

    text-align:left;

}

.pdf-cover-field{

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:0;

    font-size:14px;

}

/* ==========================================================
   NOTE GLOBALE — COLORRECT
========================================================== */

.pdf-cover-field.note-globale{

    padding:10px 12px;

    border-radius:10px;

    color:white;

    justify-content:center;

    align-items:center;

    transform:scale(1.1);

    position:relative;

    z-index:2;

}

/* ==========================================================
NOTE GLOBALE — COLORRECT
========================================================== */

.pdf-cover-field.note-globale{

    padding:10px 12px;

    border-radius:10px;

    color:white;

    justify-content:center;

    align-items:center;

    transform:scale(1.1);

    position:relative;

    z-index:2;

}
.pdf-cover-table .note-globale strong{

    display:block !important;

    margin:0 0 5px 0 !important;

    padding:0 !important;

    color:white !important;

    font-size:13px !important;

    font-weight:700 !important;

    line-height:1.1 !important;

}

.pdf-cover-table .note-globale span{

    display:block !important;

    margin:0 !important;

    padding:0 !important;

    color:white !important;

    font-size:22px !important;

    font-weight:800 !important;

    line-height:1 !important;

}

.pdf-cover-table .note-globale.note-rouge{

    background:#C62828 !important;

}

.pdf-cover-table .note-globale.note-orange{

    background:#EF8F00 !important;

}

.pdf-cover-table .note-globale.note-jaune{

    background:#D6A800 !important;

}

.pdf-cover-table .note-globale.note-vert-clair{

    background:#4CAF50 !important;

}

.pdf-cover-table .note-globale.note-vert{

    background:#2E7D32 !important;

}


/* ==========================================================
   NOTE GLOBALE
========================================================== */

.pdf-cover-table tr.note-rouge,
.pdf-cover-table tr.note-orange,
.pdf-cover-table tr.note-jaune,
.pdf-cover-table tr.note-vert-clair,
.pdf-cover-table tr.note-vert{

    color:white;

    border-radius:10px;

    padding:10px 12px;

    box-sizing:border-box;

    justify-content:center;

}


/* COULEURS */

.pdf-cover-table tr.note-rouge{

    background:#C62828;

}

.pdf-cover-table tr.note-orange{

    background:#EF8F00;

}

.pdf-cover-table tr.note-jaune{

    background:#D6A800;

}

.pdf-cover-table tr.note-vert-clair{

    background:#4CAF50;

}

.pdf-cover-table tr.note-vert{

    background:#2E7D32;

}


/* TEXTE NOTE */

.pdf-cover-table tr.note-rouge th,
.pdf-cover-table tr.note-orange th,
.pdf-cover-table tr.note-jaune th,
.pdf-cover-table tr.note-vert-clair th,
.pdf-cover-table tr.note-vert th{

    color:white;

    font-weight:700;

    padding:0;

}

.pdf-cover-table tr.note-rouge td,
.pdf-cover-table tr.note-orange td,
.pdf-cover-table tr.note-jaune td,
.pdf-cover-table tr.note-vert-clair td,
.pdf-cover-table tr.note-vert td{

    color:white;

    font-size:20px;

    font-weight:700;

    padding:0;

}
/*==================================================
BADGE MENU
==================================================*/

.menu-badge{

    position:absolute;

    top:50%;

    right:22px;

    transform:translateY(-50%);

    min-width:22px;

    height:22px;

    padding:0 6px;

    border-radius:999px;

    background:#E60028;

    color:white;

    font-size:12px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 2px 8px rgba(0,0,0,.25);

}
/* ==========================================================
   COACHINGS EN COURS
========================================================== */

.coachings-en-cours {

    width: 100%;
    max-width: 850px;

    display: flex;
    flex-direction: column;
    gap: 18px;

    margin: 30px auto;

}


.coaching-en-cours-card {

    background: #ffffff;

    border: 1px solid #dfe5ec;

    border-radius: 14px;

    padding: 22px 26px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);

}


.coaching-en-cours-header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

}


.coaching-en-cours-header h2 {

    margin: 0 0 6px;

    font-size: 20px;

}


.coaching-en-cours-header p {

    margin: 0;

    color: #6b7280;

    font-size: 14px;

}


.coaching-progression {

    font-size: 18px;

    font-weight: 700;

    color: #223b5f;

}


.coaching-progress {

    height: 8px;

    margin: 18px 0 12px;

    background: #e8edf3;

    border-radius: 999px;

    overflow: hidden;

}


.coaching-progress-bar {

    height: 100%;

    background: #223b5f;

    border-radius: 999px;

    transition: width 0.2s ease;

}


.coaching-question {

    margin: 0;

    color: #596579;

    font-size: 14px;

}


.coaching-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 18px;

}


.coaching-vide {

    text-align: center;

}


.coaching-vide p {

    margin: 0;

    color: #6b7280;

}
/* ==========================================================
   RÉSUMÉ DE L'ÉCHANGE
========================================================== */

.resume-echange {
    width: 100%;
}

.resume-question {
    margin-bottom: 12px;
}


/* ----------------------------------------------------------
   MOOD
---------------------------------------------------------- */

.mood-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}

.mood-option {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 10px;

    border: 2px solid transparent;
    border-radius: 12px;

    cursor: pointer;

    font-weight: 700;

    transition:
        transform 0.15s ease,
        opacity 0.15s ease,
        box-shadow 0.15s ease;
}

.mood-option:hover {
    transform: translateY(-2px);
}

.mood-circle {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: white;

    font-size: 24px;
}

.mood-label {
    font-size: 14px;
}


/* Couleurs */

.mood-vert {
    background: #3b873e;
    color: white;
}

.mood-jaune {
    background: #e0b400;
    color: white;
}

.mood-orange {
    background: #f39a24;
    color: white;
}

.mood-rouge {
    background: #c92332;
    color: white;
}


/* État sélectionné */

.mood-option:not(.mood-selected) {
    opacity: 0.55;
}

.mood-option.mood-selected {
    opacity: 1;

    transform: scale(1.03);

    box-shadow:
        0 0 0 3px white,
        0 0 0 5px currentColor;
}


/* ----------------------------------------------------------
   COLONNES COLLABORATEUR / COACH
---------------------------------------------------------- */

.resume-echange-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    width: 100%;
}

.resume-colonne {
    min-width: 0;
}

.resume-colonne h3 {
    margin-top: 0;
    margin-bottom: 4px;
}

.resume-aide {
    margin-top: 0;
    margin-bottom: 8px;

    font-size: 14px;
}

.resume-colonne textarea {
    width: 100%;

    box-sizing: border-box;

    resize: vertical;
}
/* ==========================================================
   CHECK-LIST — STATUTS
========================================================== */

.checklist-statuts {

    display: flex;

    gap: 12px;

    width: 100%;

    margin-top: 20px;
}


.checklist-statut {

    flex: 1;

    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 12px;

    border: 2px solid transparent;

    border-radius: 12px;

    cursor: pointer;

    font-size: 16px;

    font-weight: 700;

    transition:
        transform 0.15s ease,
        opacity 0.15s ease,
        box-shadow 0.15s ease;

}


/* ----------------------------------------------------------
   Couleurs
---------------------------------------------------------- */

.statut-ok {

    background: #3b873e;

    color: white;

}


.statut-nok {

    background: #f39a24;

    color: white;

}


.statut-na {

    background: #3B628A;

    color: white;

}


/* ----------------------------------------------------------
   Survol
---------------------------------------------------------- */

.checklist-statut:hover {

    transform: translateY(-2px);

}


/* ----------------------------------------------------------
   Statut non sélectionné
---------------------------------------------------------- */

.checklist-statut:not(.statut-selectionne) {

    opacity: 0.55;

}


/* ----------------------------------------------------------
   Statut sélectionné
---------------------------------------------------------- */

.checklist-statut.statut-selectionne {

    opacity: 1;

    transform: scale(1.03);

    box-shadow:
        0 0 0 3px white,
        0 0 0 5px currentColor;

}

/* ----------------------------------------------------------
   ÉCHANGE TROP ANCIEN
---------------------------------------------------------- */

.resume-ancien {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 12px;

    font-weight: 600;

    cursor: pointer;
}


/* ----------------------------------------------------------
   COLLABORATEUR MASQUÉ
---------------------------------------------------------- */

.resume-collaborateur.resume-cache {
    display: none;
}

.resume-coach.resume-coach-large {
    grid-column: 1 / -1;
}


/* ----------------------------------------------------------
   PETITS ÉCRANS
---------------------------------------------------------- */

@media (max-width: 700px) {

    .mood-selector {
        flex-wrap: wrap;
    }

    .mood-option {
        min-width: calc(50% - 5px);
    }

    .resume-echange-grid {
        grid-template-columns: 1fr;
    }

    .resume-coach.resume-coach-large {
        grid-column: auto;
    }

}