/* ====================================== */
/* BASE                                   */
/* ====================================== */

* {
    box-sizing: border-box;
}


body {
    margin: 0;
    padding: 20px;

    min-height: 100vh;

    font-family: Arial, sans-serif;

    background: linear-gradient(
        135deg,
        #667eea 0%,
        #9b6dcc 50%,
        #e78ab0 100%
    );

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


/* ====================================== */
/* CARTE PRINCIPALE                       */
/* ====================================== */

.container {
    width: 100%;
    max-width: 450px;

    padding: 30px;

    background: white;

    border-radius: 15px;

    text-align: center;

    box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.15);
}


/* ====================================== */
/* TEXTES                                 */
/* ====================================== */

h1 {
    margin-top: 0;
    color: #333;
}


h2,
h3 {
    color: #333;
}


p {
    color: #666;
    line-height: 1.5;
}


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

form {
    margin-top: 25px;
    text-align: left;
}


label {
    display: block;

    margin-top: 15px;
    margin-bottom: 6px;

    color: #444;

    font-weight: bold;
}


input,
textarea {
    width: 100%;

    padding: 13px;

    border: 1px solid #ccc;
    border-radius: 8px;

    font-size: 16px;

    outline: none;
}


input:focus,
textarea:focus {
    border-color: #7b68c8;

    box-shadow:
        0 0 0 2px
        rgba(123, 104, 200, 0.10);
}


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

button {
    width: 100%;

    padding: 15px;
    margin-top: 20px;

    border: none;
    border-radius: 10px;

    background: #7b68c8;
    color: white;

    font-size: 17px;
    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;
}


button:hover {
    background: #6957b5;
}


button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


.bouton-secondaire {
    background: #eeeef4;
    color: #555;
}


.bouton-secondaire:hover {
    background: #dedee8;
    color: #333;
}


.bouton-danger {
    background: #d95c5c;
}


.bouton-danger:hover {
    background: #c34848;
}


/* ====================================== */
/* CACHÉ                                  */
/* ====================================== */

.cache {
    display: none;
}


/* ====================================== */
/* QUESTIONNAIRE PARTICIPANT              */
/* ====================================== */

#numero-question {
    margin-bottom: 15px;

    font-size: 14px;
    font-weight: bold;

    color: #7b68c8;
}


#texte-question {
    font-size: 22px;
    line-height: 1.4;
}


.reponses {
    margin-top: 25px;
}


.reponse {
    margin-top: 10px;
}


/* ====================================== */
/* ADMINISTRATION                         */
/* ====================================== */

.container-admin {
    max-width: 1000px;
    text-align: left;
}


.entete-admin {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}


.entete-admin h1 {
    margin-bottom: 5px;
}


.entete-admin p {
    margin: 0;
}


#deconnexion {
    width: auto;

    margin: 0;

    padding: 12px 18px;
}


/* ====================================== */
/* SECTIONS ADMIN                         */
/* ====================================== */

#section-mon-questionnaire,
#section-administrateurs,
#section-questions,
#section-resultats {
    margin-top: 30px;
    padding: 25px;

    background: #f8f8fb;

    border: 1px solid #e5e5ee;
    border-radius: 15px;
}


/* ====================================== */
/* MON QUESTIONNAIRE                      */
/* ====================================== */

.ligne-lien {
    display: flex;
    align-items: stretch;

    gap: 10px;
}


.ligne-lien input {
    flex: 1;

    min-width: 0;

    background: white;
}


#copier-lien-questionnaire {
    width: auto;

    margin: 0;

    padding-left: 22px;
    padding-right: 22px;
}


#zone-qr {
    margin-top: 25px;

    padding: 20px;

    background: white;

    border: 1px solid #e5e5ee;
    border-radius: 12px;

    text-align: center;
}


#qr-code {
    display: flex;
    justify-content: center;

    min-height: 180px;
}


#qr-code img,
#qr-code canvas {
    max-width: 100%;
    height: auto;
}




/* ====================================== */
/* PERSONNALISATION DU QUESTIONNAIRE      */
/* ====================================== */

#personnalisation-questionnaire {
    margin-top: 25px;
    padding: 20px;
    background: white;
    border: 1px solid #e5e5ee;
    border-radius: 12px;
}

#personnalisation-questionnaire h3 {
    margin-top: 0;
}

#formulaire-personnalisation {
    margin-top: 15px;
}

#formulaire-personnalisation textarea {
    width: 100%;
    min-height: 100px;
    padding: 13px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    resize: vertical;
    outline: none;
}


/* ====================================== */
/* ADMINISTRATEURS                        */
/* ====================================== */

.bloc-administrateur {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-top: 12px;
    padding: 18px;

    background: white;

    border: 1px solid #e5e5ee;
    border-radius: 12px;
}


.bloc-administrateur h3 {
    margin-top: 0;
    margin-bottom: 5px;
}


.bloc-administrateur p {
    margin: 0;
}


.actions-administrateur {
    display: flex;

    gap: 8px;

    flex-shrink: 0;
}


.actions-administrateur button {
    width: auto;

    margin: 0;

    padding: 10px 14px;

    font-size: 14px;
}


#formulaire-administrateur {
    margin-top: 20px;
    padding: 20px;

    background: white;

    border: 1px solid #e5e5ee;
    border-radius: 12px;
}


.info-admin {
    padding: 12px;

    background: #f2f0fa;

    border-left: 4px solid #7b68c8;
    border-radius: 6px;
}


/* ====================================== */
/* QUESTIONS                              */
/* ====================================== */

.bloc-question {
    margin-top: 15px;
    padding: 18px;

    background: white;

    border: 1px solid #e5e5ee;
    border-radius: 12px;
}


.actions-question {
    display: flex;

    gap: 10px;
}


.actions-question button {
    flex: 1;

    margin-top: 10px;
}


#formulaire-question {
    margin-top: 20px;
    padding: 20px;

    background: white;

    border: 1px solid #e5e5ee;
    border-radius: 12px;
}


/* ====================================== */
/* ACTIONS FORMULAIRES                    */
/* ====================================== */

.actions-formulaire {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}


.actions-formulaire button {
    flex: 1;

    margin-top: 0;
}


/* ====================================== */
/* TABLEAU POINTS                         */
/* ====================================== */

.table-responsive {
    width: 100%;

    overflow-x: auto;
}


.table-points {
    width: 100%;

    margin-top: 15px;

    border-collapse: collapse;
}


.table-points th,
.table-points td {
    padding: 10px;

    text-align: center;

    border-bottom: 1px solid #ddd;
}


.table-points input {
    min-width: 70px;
}


/* ====================================== */
/* FILTRES RÉSULTATS                      */
/* ====================================== */

#filtres-categorie,
#filtres-nombre {
    display: flex;

    gap: 10px;

    margin-top: 15px;
}


#filtres-categorie button,
#filtres-nombre button {
    flex: 1;

    margin-top: 0;

    background: white;
    color: #555;

    border: 1px solid #d8d8e5;
}


#filtres-categorie button:hover,
#filtres-nombre button:hover {
    background: #f0eef9;
    color: #7b68c8;
}


#filtres-categorie button.actif,
#filtres-nombre button.actif {
    background: #7b68c8;
    color: white;

    border-color: #7b68c8;

    box-shadow:
        0 3px 10px
        rgba(123, 104, 200, 0.25);
}


/* ====================================== */
/* RÉSULTATS                              */
/* ====================================== */

.bloc-resultat {
    margin-top: 12px;
    padding: 18px;

    background: white;

    border: 1px solid #e5e5ee;
    border-radius: 12px;

    cursor: pointer;

    transition: 0.2s;
}


.bloc-resultat:hover {
    transform: translateY(-2px);

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, 0.08);
}


.bouton-detail-participant {
    margin-top: 10px;

    padding: 10px 15px;

    font-size: 14px;
}


/* ====================================== */
/* FOND POPUP                             */
/* ====================================== */

#fond-popup {
    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.55);

    z-index: 999;
}


#fond-popup.cache {
    display: none;
}


/* ====================================== */
/* POPUP PARTICIPANT                      */
/* ====================================== */

#fiche-participant {
    position: fixed;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    width: calc(100% - 40px);
    max-width: 650px;

    max-height: 85vh;

    overflow-y: auto;

    padding: 30px;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 15px 50px
        rgba(0, 0, 0, 0.30);

    z-index: 1000;
}


#fiche-participant.cache {
    display: none;
}


#fiche-participant > h2 {
    margin-top: 0;

    padding-right: 50px;
}


#croix-fermer-fiche {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 38px;
    height: 38px;

    margin: 0;
    padding: 0;

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

    border-radius: 50%;

    background: #f1f1f5;
    color: #555;

    font-size: 18px;
}


#croix-fermer-fiche:hover {
    background: #e3e1ed;
    color: #7b68c8;
}


#infos-participant,
#scores-participant {
    padding: 15px;

    background: #f8f8fb;

    border-radius: 10px;
}


.bloc-reponse-participant {
    margin-top: 12px;
    padding: 15px;

    background: white;

    border-left: 4px solid #7b68c8;
    border-radius: 8px;
}


#fermer-fiche-participant {
    margin-top: 25px;
}


/* ====================================== */
/* VERSION GSM                            */
/* ====================================== */

@media (max-width: 600px) {

    body {
        padding: 10px;

        align-items: flex-start;
    }


    .container {
        padding: 20px;
    }


    .container-admin {
        padding: 18px;
    }


    .entete-admin {
        display: block;
    }


    #deconnexion {
        width: 100%;

        margin-top: 15px;
    }


    #section-mon-questionnaire,
    #section-administrateurs,
    #section-questions,
    #section-resultats {
        padding: 15px;
    }


    .ligne-lien {
        display: block;
    }


    #copier-lien-questionnaire {
        width: 100%;

        margin-top: 10px;
    }


    .bloc-administrateur {
        display: block;
    }


    .actions-administrateur {
        margin-top: 15px;
    }


    .actions-administrateur button {
        flex: 1;
    }


    .actions-question,
    .actions-formulaire {
        display: block;
    }


    .actions-question button,
    .actions-formulaire button {
        width: 100%;

        margin-top: 10px;
    }


    .table-points {
        font-size: 13px;
    }


    .table-points th,
    .table-points td {
        padding: 5px;
    }


    .table-points input {
        min-width: 55px;

        padding: 8px;
    }


    #filtres-categorie,
    #filtres-nombre {
        gap: 6px;
    }


    #filtres-categorie button,
    #filtres-nombre button {
        padding: 11px 6px;

        font-size: 14px;
    }


    #fiche-participant {
        width: calc(100% - 20px);

        max-height: 90vh;

        padding: 20px;

        border-radius: 15px;
    }
}

/* ========================================
   AMÉLIORATIONS V2
   ======================================== */

.recherche-participants {
    margin: 18px 0 14px;
}

.recherche-participants label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
}

#recherche-participant {
    width: 100%;
    border: 1px solid #d8dbe5;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
}

.actions-question .deplacer-question {
    min-width: 46px;
    font-size: 18px;
    font-weight: 800;
}

.bloc-resultat {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bloc-resultat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

#infos-participant,
#scores-participant {
    background: #f8f8fb;
    border: 1px solid #e7e8ef;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 16px;
}

#scores-participant p {
    margin: 8px 0;
    font-weight: 700;
}

.bloc-reponse-participant {
    border: 1px solid #e4e6ee;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fff;
}

.bloc-reponse-participant p {
    margin: 6px 0;
}

.reponse-choisie {
    font-weight: 700;
}

.points-reponse {
    font-size: 13px;
    opacity: 0.75;
}

@media (max-width: 600px) {
    .actions-question {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .actions-question button {
        width: 100%;
        margin-top: 0;
    }

    #fiche-participant {
        max-height: 92vh;
        overflow-y: auto;
    }

    .bloc-resultat {
        padding: 14px;
    }
}


/* ========================================
   V1.1 - COMPTE / DATES / SUPPRESSIONS
   ======================================== */
#section-compte { margin-top:30px; padding:25px; background:#f8f8fb; border:1px solid #e5e5ee; border-radius:15px; }
#section-compte form { max-width:520px; }
.bouton-lien { background:transparent; color:#7b68c8; padding:10px; margin-top:8px; }
.bouton-lien:hover { background:#f2f0fa; }
#tri-date-resultats { margin:16px 0; }
#tri-date-resultats select { width:100%; padding:12px; border:1px solid #d8d8e5; border-radius:10px; background:white; font-size:16px; }
.date-participation { font-size:14px; margin:6px 0; }
.zone-danger-resultats { margin:20px 0; padding:16px; border:1px solid #efcaca; border-radius:12px; background:#fff7f7; }
.zone-danger-resultats .bouton-danger { margin-top:0; }
.zone-danger-resultats p { margin-bottom:0; font-size:13px; }
#supprimer-participant { margin-top:25px; }
@media (max-width:600px) { #section-compte { padding:15px; } }

/* ========================================
   V1.2 - OPTIMISATION MOBILE SANS JS
   ======================================== */
@media (max-width: 600px) {
    html { scroll-behavior: smooth; }
    body { padding: 8px; }
    .container-admin { padding: 14px; border-radius: 12px; }
    .container-admin h1 { font-size: 26px; }
    .container-admin h2 { font-size: 21px; }
    .container-admin h3 { font-size: 18px; }

    #section-mon-questionnaire,
    #section-administrateurs,
    #section-questions,
    #section-compte,
    #section-resultats {
        margin-top: 18px;
        padding: 14px;
        border-radius: 12px;
    }

    input, textarea, select, button { font-size: 16px; }
    button { min-height: 46px; }

    #zone-qr { padding: 14px; }
    #qr-code { min-height: 0; }

    .bloc-administrateur,
    .bloc-question,
    .bloc-resultat { padding: 13px; }

    .actions-administrateur {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .actions-administrateur button { width: 100%; min-width: 0; }

    .actions-question {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .actions-question button { min-width: 0; }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .table-points { min-width: 540px; }
    .table-points th,
    .table-points td { white-space: nowrap; }

    #filtres-categorie,
    #filtres-nombre {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    #filtres-categorie button,
    #filtres-nombre button {
        min-width: 0;
        padding: 10px 4px;
        font-size: 13px;
    }

    .zone-danger-resultats { padding: 13px; }

    #fiche-participant {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        padding: 20px 14px 28px;
        border-radius: 0;
    }
    #croix-fermer-fiche {
        position: sticky;
        top: 0;
        margin-left: auto;
        z-index: 2;
    }
    #fiche-participant > h2 {
        padding-right: 0;
        margin-top: -34px;
        padding-right: 48px;
    }
    #infos-participant,
    #scores-participant,
    .bloc-reponse-participant { padding: 12px; }

    #supprimer-participant,
    #fermer-fiche-participant { width: 100%; }
}

@media (max-width: 380px) {
    .container-admin { padding: 11px; }
    #filtres-categorie button,
    #filtres-nombre button { font-size: 12px; }
}
/* ========================================
   V1.3 - TABLEAU DE BORD RÉSULTATS
   ======================================== */

#statistiques-resultats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 22px;
}

.carte-statistique {
    min-width: 0;
    padding: 16px 10px;
    background: white;
    border: 1px solid #e5e5ee;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

.carte-statistique .stat-icone {
    display: block;
    margin-bottom: 7px;
    font-size: 21px;
}

.carte-statistique strong {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-size: 24px;
    line-height: 1.1;
}

.carte-statistique > span:last-child {
    display: block;
    color: #666;
    font-size: 12px;
    line-height: 1.3;
}

@media (max-width: 800px) {
    #statistiques-resultats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .carte-statistique:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    #statistiques-resultats {
        gap: 8px;
        margin: 16px 0 18px;
    }

    .carte-statistique {
        padding: 13px 8px;
        border-radius: 12px;
    }

    .carte-statistique strong {
        font-size: 21px;
    }

    .carte-statistique > span:last-child {
        font-size: 11px;
    }
}
/* ========================================
   V1.3.1 - SECTION QUESTIONS REPLIABLE
   ======================================== */

#section-questions {
    padding: 0;
    overflow: hidden;
}

#panneau-questions {
    width: 100%;
}

#panneau-questions > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 22px 25px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

#panneau-questions > summary::-webkit-details-marker {
    display: none;
}

#panneau-questions > summary:hover {
    background: rgba(123, 104, 200, 0.05);
}

#panneau-questions > summary span:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#panneau-questions > summary strong {
    color: #333;
    font-size: 1.5em;
}

#panneau-questions > summary small {
    color: #777;
    font-size: 13px;
    font-weight: normal;
}

.indicateur-repli {
    flex-shrink: 0;
    color: #7b68c8;
    font-size: 28px;
    line-height: 1;
    transition: transform 0.2s ease;
}

#panneau-questions[open] .indicateur-repli {
    transform: rotate(180deg);
}

.contenu-panneau-questions {
    padding: 0 25px 25px;
    border-top: 1px solid #e5e5ee;
}

.contenu-panneau-questions > h2:first-child,
.contenu-panneau-questions > h2:first-of-type {
    display: none;
}

@media (max-width: 600px) {
    #panneau-questions > summary {
        padding: 18px;
    }

    #panneau-questions > summary strong {
        font-size: 20px;
    }

    .contenu-panneau-questions {
        padding: 0 15px 18px;
    }
}


/* ========================================
   V1.4 - SUIVI PRIVÉ DES PARTICIPANTS
   ======================================== */

#suivi-participant {
    margin: 22px 0;
    padding: 18px;
    background: #f8f8fb;
    border: 1px solid #e5e5ee;
    border-radius: 14px;
}

#suivi-participant h3 {
    margin-top: 0;
    margin-bottom: 14px;
}

.ligne-favori {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px;
    background: white;
    border: 1px solid #e5e5ee;
    border-radius: 10px;
    cursor: pointer;
}

.ligne-favori input {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

#participant-statut {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: white;
    font-size: 16px;
    outline: none;
}

#participant-statut:focus {
    border-color: #7b68c8;
    box-shadow: 0 0 0 2px rgba(123, 104, 200, 0.10);
}

#participant-note-privee {
    min-height: 110px;
    resize: vertical;
    font-family: Arial, sans-serif;
}

.ligne-enregistrement-suivi {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

#enregistrer-suivi-participant {
    width: auto;
    margin: 0;
    padding: 12px 16px;
}

.message-suivi {
    font-size: 13px;
    font-weight: bold;
}

.message-suivi.succes {
    color: #27864a;
}

.message-suivi.erreur {
    color: #c34848;
}

.suivi-resume-resultat {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 6px 0 10px;
}

.badge-suivi {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eeeef4;
    color: #555;
    font-size: 12px;
    font-weight: bold;
}

.badge-favori {
    background: #fff5cf;
    color: #7a6200;
}

.statut-a_contacter {
    background: #eeeef4;
    color: #555;
}

.statut-contacte {
    background: #e7f6ec;
    color: #277442;
}

.statut-ecarte {
    background: #f8e8e8;
    color: #a03e3e;
}

@media (max-width: 600px) {
    #suivi-participant {
        padding: 14px;
    }

    .ligne-enregistrement-suivi {
        align-items: stretch;
        flex-direction: column;
    }

    #enregistrer-suivi-participant {
        width: 100%;
    }
}


/* ========================================
   V1.5 À V1.8
   ======================================== */

#filtres-suivi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}
#filtres-suivi button {
    width: auto;
    flex: 1 1 145px;
    margin: 0;
    padding: 10px 12px;
    background: white;
    color: #555;
    border: 1px solid #d8d8e5;
    font-size: 14px;
}
#filtres-suivi button.actif {
    background: #7b68c8;
    color: white;
    border-color: #7b68c8;
}
.resume-participant {
    margin: 18px 0;
    padding: 16px;
    background: #f8f8fb;
    border: 1px solid #e5e5ee;
    border-radius: 12px;
}
.resume-participant h3 { margin: 0 0 8px; }
.resume-participant p { margin: 0; }

.progression-questionnaire {
    width: 100%;
    height: 9px;
    margin: 8px 0 5px;
    overflow: hidden;
    background: #eeeef4;
    border-radius: 999px;
}
#barre-progression-questionnaire {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #667eea, #e78ab0);
    border-radius: inherit;
    transition: width 0.25s ease;
}
#pourcentage-progression {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: bold;
    color: #7b68c8;
    text-align: right;
}
#regenerer-lien-questionnaire {
    width: auto;
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
}
@media (max-width: 650px) {
    .ligne-lien { flex-wrap: wrap; }
    .ligne-lien input { flex-basis: 100%; }
    #copier-lien-questionnaire,
    #regenerer-lien-questionnaire { flex: 1; }
    #filtres-suivi button { flex-basis: calc(50% - 8px); }
}