/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/


/***************************************************************
 *
 *  e-KID — CUSTOM.CSS
 *  LimeSurvey
 *
 *  ============================================================
 *  SOMMAIRE
 *  ============================================================
 *
 *  1. EN-TÊTE
 *     1.1 Titre e-KID
 *     1.2 Adaptation mobile
 *
 *  2. QUESTIONNAIRE
 *     2.1 Conteneur des questions
 *     2.2 Intitulés des questions
 *     2.3 Zone des réponses
 *     2.4 Boutons radio et cases à cocher
 *     2.5 Questions à réponses multiples / Bootstrap
 *     2.6 Texte d'aide
 *     2.7 Champ "durée d'exposition"
 *     2.8 Adaptation mobile
 *
 *  3. SYNTHÈSE
 *     3.1 Texte normal
 *     3.2 Éléments mis en valeur
 *
 *  4. RADAR DE DÉPISTAGE
 *     4.1 Conteneur
 *     4.2 Titre
 *     4.3 Graphique
 *     4.4 Valeurs
 *     4.5 Tablette
 *     4.6 Mobile
 *
 *  5. TÉLÉCHARGEMENT PDF
 *     5.1 Bloc de téléchargement
 *     5.2 Texte
 *     5.3 Bouton
 *     5.4 Icône
 *     5.5 Message de statut
 *     5.6 Source cachée du PDF
 *     5.7 Mobile
 *
 *  6. BOUTON FINAL
 *     6.1 Conteneur
 *     6.2 Bouton
 *     6.3 Texte principal
 *     6.4 Sous-titre
 *     6.5 Flèche
 *     6.6 États interactifs
 *     6.7 Mobile
 *
 ***************************************************************/



/* ============================================================
   1. EN-TÊTE
   ============================================================ */


/* ------------------------------------------------------------
   1.1 Titre e-KID
   ------------------------------------------------------------ */

.ekid-title-header {
    float: left;

    display: flex;
    align-items: center;

    min-height: 60px;

    margin: 0 0 0 20px;
    padding: 0;

    color: #37474f;

    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;

    text-align: left;
}


/* ------------------------------------------------------------
   1.2 Adaptation mobile
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    .ekid-title-header {
        float: none;

        min-height: auto;

        margin: 0;
        padding: 5px 15px 10px;

        font-size: 13px;
        text-align: center;

        justify-content: center;
    }

}



/* ============================================================
   2. QUESTIONNAIRE
   ============================================================ */


/* ------------------------------------------------------------
   2.1 Conteneur des questions
   ------------------------------------------------------------ */

/*
 * Réduction modérée de l'espace vertical.
 * On conserve volontairement les marges latérales du thème
 * LimeSurvey pour ne pas coller les questions aux bords.
 */

.question-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 5px !important;
    padding-bottom: 5px !important;

    background: #ffffff;

    border-bottom: 1px solid #dfe7e4;
}


/* Léger repère visuel au survol */

@media (hover: hover) {

    .question-container:hover {
        background: #fbfdfc;
    }

}


/* ------------------------------------------------------------
   2.2 Intitulés des questions
   ------------------------------------------------------------ */

.question-title-container {
    margin-top: 0 !important;
    margin-bottom: 4px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


.question-text {
    color: #263b3a;

    font-size: 15px;
    font-weight: 600 !important;
    line-height: 1.3;
}


/*
 * Les balises <strong> utilisées dans un intitulé
 * restent légèrement plus marquées.
 */

.question-text strong,
.question-text b {
    font-weight: 700 !important;
}


/* ------------------------------------------------------------
   2.3 Zone des réponses
   ------------------------------------------------------------ */

.answer-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 2px !important;
    padding-bottom: 0 !important;
}


/* ------------------------------------------------------------
   2.4 Boutons radio et cases à cocher
   ------------------------------------------------------------ */

.radio,
.checkbox {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


.radio label,
.checkbox label {
    padding-top: 1px;
    padding-bottom: 1px;

    font-weight: 400;
}


/* Réponses disposées en ligne */

.radio-inline,
.checkbox-inline {
    margin-right: 22px !important;
}


/* ------------------------------------------------------------
   2.5 Questions à réponses multiples / Bootstrap
   ------------------------------------------------------------ */

/*
 * LimeSurvey ajoute parfois des marges aux <li>
 * contenant les réponses.
 */

.answer-container li.answer-item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/*
 * Neutralise la classe Bootstrap "mb-1"
 * lorsqu'elle est ajoutée à une réponse.
 */

.answer-container li.answer-item.mb-1 {
    margin-bottom: 0 !important;
}


/*
 * Supprime uniquement les marges verticales des listes.
 * Les paddings horizontaux Bootstrap sont volontairement
 * conservés.
 */

.answer-container ul.list-unstyled {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Ligne interne de certaines cases à cocher */

.answer-container li.answer-item > .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ------------------------------------------------------------
   2.6 Texte d'aide
   ------------------------------------------------------------ */

/*
 * Exemple :
 * "Cochez tout ce qui s'applique."
 */

.question-help-container,
.ls-questionhelp {
    margin-top: 2px !important;
    margin-bottom: 4px !important;

    color: #4c7d62;

    font-size: 12px;
    line-height: 1.25;
}


/* ------------------------------------------------------------
   2.7 Champ "durée d'exposition"
   ------------------------------------------------------------ */

/*
 * Réglage ciblé.
 * On évite volontairement une règle globale .form-control,
 * qui modifiait les autres champs LimeSurvey.
 */

#answer643338X57300X799127 {
    width: 100px !important;
    min-width: 100px !important;
}


/* ------------------------------------------------------------
   2.8 Adaptation mobile
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    /*
     * On restitue un peu d'espace vertical sur téléphone
     * pour conserver des zones tactiles confortables.
     */

    .question-container {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }


    .question-text {
        font-size: 14px;
    }


    .radio-inline,
    .checkbox-inline {
        margin-right: 12px !important;
    }

}


/* ============================================================
   3. SYNTHÈSE
   ============================================================ */


/* ------------------------------------------------------------
   3.1 Texte de la synthèse
   ------------------------------------------------------------ */

/* Texte normal par défaut */
.question-text .ekid-synthese {
    font-weight: 400 !important;
}


/* ------------------------------------------------------------
   3.2 Éléments volontairement en gras
   ------------------------------------------------------------ */

/*
 * Tout ce qui se trouve dans <strong> ou <b> est en gras,
 * y compris les <span> contenus à l'intérieur.
 */

.question-text .ekid-synthese strong,
.question-text .ekid-synthese strong *,
.question-text .ekid-synthese b,
.question-text .ekid-synthese b * {
    font-weight: 700 !important;
}


/* ============================================================
   4. RADAR DE DÉPISTAGE
   ============================================================ */


/* ------------------------------------------------------------
   4.1 Conteneur
   ------------------------------------------------------------ */

#radar-wrapper {
    width: 100%;
    max-width: 760px;

    margin: 30px auto 40px;
    padding: 24px 28px 28px;

    background: #ffffff;

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

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    box-sizing: border-box;
}


/* ------------------------------------------------------------
   4.2 Titre
   ------------------------------------------------------------ */

#radar-wrapper .radar-title {
    margin: 0 0 20px;
    padding-bottom: 12px;

    border-bottom: 1px solid #e5ecef;

    color: #244b5a;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;

    text-align: center;
}


/* ------------------------------------------------------------
   4.3 Graphique
   ------------------------------------------------------------ */

#radar-wrapper .radar-chart-container {
    position: relative;

    width: 100%;
    height: 430px;

    margin: 0 auto;
}


#radar-wrapper #radarChart {
    display: block;

    width: 100% !important;
    height: 100% !important;
}


/* ------------------------------------------------------------
   4.4 Valeurs
   ------------------------------------------------------------ */

#radar-wrapper .radar-values {
    display: grid;

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

    gap: 10px 14px;

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

    border-top: 1px solid #e5ecef;
}


#radar-wrapper .radar-values > div {
    padding: 11px 12px;

    background: #f7fafb;

    border: 1px solid #e4ecef;
    border-radius: 7px;

    color: #4b5c63;

    font-size: 14px;
    line-height: 1.5;

    text-align: center;

    box-sizing: border-box;
}


#radar-wrapper .radar-value-label {
    display: block;

    margin-bottom: 3px;

    color: #315967;

    font-weight: 600;
}


#radar-wrapper .radar-values strong {
    color: #1f4655;

    font-size: 16px;
    font-weight: 700;
}


/* ------------------------------------------------------------
   4.5 Tablette
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    #radar-wrapper {
        margin: 20px 0 30px;
        padding: 20px 18px 22px;

        border-radius: 10px;
    }


    #radar-wrapper .radar-title {
        margin-bottom: 15px;

        font-size: 17px;
    }


    #radar-wrapper .radar-chart-container {
        height: 360px;
    }


    #radar-wrapper .radar-values {
        gap: 8px;
    }


    #radar-wrapper .radar-values > div {
        padding: 9px 6px;

        font-size: 13px;
    }

}


/* ------------------------------------------------------------
   4.6 Mobile
   ------------------------------------------------------------ */

@media (max-width: 480px) {

    #radar-wrapper {
        margin: 15px 0 25px;
        padding: 16px 4px 18px;

        border-radius: 8px;
    }


    #radar-wrapper .radar-title {
        margin-bottom: 10px;
        padding-bottom: 10px;

        font-size: 16px;
    }


    #radar-wrapper .radar-chart-container {
        height: 340px;
    }


    #radar-wrapper .radar-values {
        grid-template-columns: 1fr 1fr;

        gap: 7px;

        margin-top: 15px;
        padding-top: 14px;
    }


    #radar-wrapper .radar-values > div {
        padding: 8px 4px;

        font-size: 12px;
    }


    #radar-wrapper .radar-values strong {
        font-size: 14px;
    }

}



/* ============================================================
   5. TÉLÉCHARGEMENT PDF
   ============================================================ */


/* ------------------------------------------------------------
   5.1 Bloc de téléchargement
   ------------------------------------------------------------ */

.ekid-pdf-download {
    max-width: 760px;

    margin: 30px auto 20px;
    padding: 22px 24px;

    background: #f7faf9;

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

    text-align: center;

    box-sizing: border-box;
}


/* ------------------------------------------------------------
   5.2 Texte
   ------------------------------------------------------------ */

.ekid-pdf-download-text {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-bottom: 18px;
}


.ekid-pdf-download-text strong {
    color: #263f46;

    font-size: 17px;
    font-weight: 600;
}


.ekid-pdf-download-text span {
    color: #687a7f;

    font-size: 14px;
    line-height: 1.5;
}


/* ------------------------------------------------------------
   5.3 Bouton
   ------------------------------------------------------------ */

.ekid-pdf-button {
    display: inline-flex;

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

    gap: 9px;

    min-height: 46px;

    padding: 11px 22px;

    background: #216b5b;

    border: 0;
    border-radius: 8px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;

    cursor: pointer;

    box-shadow: 0 2px 6px rgba(20, 70, 60, 0.14);

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}


.ekid-pdf-button:hover {
    background: #19594b;

    box-shadow: 0 3px 9px rgba(20, 70, 60, 0.20);
}


.ekid-pdf-button:active {
    transform: translateY(1px);
}


.ekid-pdf-button:focus {
    outline: 3px solid rgba(33, 107, 91, 0.20);
    outline-offset: 3px;
}


.ekid-pdf-button:disabled {
    opacity: 0.60;

    cursor: wait;

    transform: none;
}


/* ------------------------------------------------------------
   5.4 Icône
   ------------------------------------------------------------ */

.ekid-pdf-icon {
    display: inline-flex;

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

    width: 22px;
    height: 22px;

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;

    font-size: 16px;
    line-height: 1;
}


/* ------------------------------------------------------------
   5.5 Message de statut
   ------------------------------------------------------------ */

.ekid-pdf-status {
    min-height: 20px;

    margin-top: 10px;

    color: #687a7f;

    font-size: 12px;
}


/* ------------------------------------------------------------
   5.6 Source cachée utilisée pour générer le PDF
   ------------------------------------------------------------ */

.ekid-pdf-source {
    position: absolute !important;

    left: -99999px !important;
    top: auto !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


/* ------------------------------------------------------------
   5.7 Mobile
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .ekid-pdf-download {
        margin-top: 22px;

        padding: 18px 15px;
    }


    .ekid-pdf-button {
        width: 100%;
        max-width: 340px;
    }

}



/* ============================================================
   6. BOUTON FINAL
   ============================================================ */


/* ------------------------------------------------------------
   6.1 Conteneur
   ------------------------------------------------------------ */

.ekid-final-block {
    margin: 25px 0;
}


/* ------------------------------------------------------------
   6.2 Bouton
   ------------------------------------------------------------ */

.ekid-final-button {
    position: relative;

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

    width: 100%;
    max-width: 650px;
    min-height: 78px;

    margin: 22px auto 10px;
    padding: 16px 60px 16px 22px;

    box-sizing: border-box;

    background: #216b5b;
    color: #ffffff !important;

    border: 1px solid #19594b;
    border-radius: 10px;

    text-decoration: none !important;

    box-shadow: 0 3px 10px rgba(20, 70, 60, 0.18);

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}


/* ------------------------------------------------------------
   6.3 Texte principal
   ------------------------------------------------------------ */

.ekid-final-button-title {
    display: block;

    margin-bottom: 4px;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}


/* ------------------------------------------------------------
   6.4 Sous-titre
   ------------------------------------------------------------ */

.ekid-final-button-subtitle {
    display: block;

    color: rgba(255, 255, 255, 0.88);

    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}


/* ------------------------------------------------------------
   6.5 Flèche
   ------------------------------------------------------------ */

.ekid-final-button-arrow {
    position: absolute;

    top: 50%;
    right: 22px;

    transform: translateY(-50%);

    font-size: 28px;
    font-weight: 400;
}


/* ------------------------------------------------------------
   6.6 États interactifs
   ------------------------------------------------------------ */

.ekid-final-button:hover {
    background: #19594b;
    color: #ffffff !important;

    text-decoration: none !important;

    box-shadow: 0 5px 14px rgba(20, 70, 60, 0.24);

    transform: translateY(-1px);
}


.ekid-final-button:focus {
    color: #ffffff !important;

    outline: 3px solid rgba(33, 107, 91, 0.22);
    outline-offset: 3px;
}


/* ------------------------------------------------------------
   6.7 Mobile
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .ekid-final-button {
        min-height: 74px;

        padding: 14px 48px 14px 16px;
    }


    .ekid-final-button-title {
        font-size: 15px;
    }


    .ekid-final-button-subtitle {
        font-size: 12px;
    }


    .ekid-final-button-arrow {
        right: 16px;

        font-size: 24px;
    }

}

/* ============================================================
   7. PALETTE e-KID — ACADÉMIQUE ET PLUS VIVE
   ============================================================ */


/* ------------------------------------------------------------
   7.1 Titres et textes
   ------------------------------------------------------------ */

.ekid-title-header {
    color: #245866;
}

.question-text {
    color: #263B40;
}

.question-help-container,
.ls-questionhelp {
    color: #3B7E86;
}


/* ------------------------------------------------------------
   7.2 Questions
   ------------------------------------------------------------ */

.question-container {
    background: #FFFFFF;
    border-bottom-color: #D4E4E7;
}

@media (hover: hover) {
    .question-container:hover {
        background: #F7FBFC;
    }
}


/* ------------------------------------------------------------
   7.3 Radar
   ------------------------------------------------------------ */

#radar-wrapper {
    background: #FFFFFF;
    border-color: #C8DEE2;
}

#radar-wrapper .radar-title {
    color: #245866;
    border-bottom-color: #D4E4E7;
}

#radar-wrapper .radar-values {
    border-top-color: #D4E4E7;
}

#radar-wrapper .radar-values > div {
    background: #F3F9FA;
    border-color: #D6E7E9;
    color: #425E64;
}

#radar-wrapper .radar-value-label {
    color: #287682;
}

#radar-wrapper .radar-values strong {
    color: #168FA3;
}


/* ------------------------------------------------------------
   7.4 Bloc PDF
   ------------------------------------------------------------ */

.ekid-pdf-download {
    background: #F3F9FA;
    border-color: #C8DEE2;
}

.ekid-pdf-download-text strong {
    color: #245866;
}

.ekid-pdf-download-text span,
.ekid-pdf-status {
    color: #5C7075;
}


/* ------------------------------------------------------------
   7.5 Bouton PDF
   ------------------------------------------------------------ */

.ekid-pdf-button {
    background: #168FA3;
    color: #FFFFFF;

    box-shadow:
        0 2px 6px rgba(22, 143, 163, 0.18);
}

.ekid-pdf-button:hover {
    background: #117487;

    box-shadow:
        0 3px 9px rgba(22, 143, 163, 0.24);
}

.ekid-pdf-button:focus {
    outline-color: rgba(22, 143, 163, 0.25);
}


/* ------------------------------------------------------------
   7.6 Bouton final
   ------------------------------------------------------------ */

.ekid-final-button {
    background: #168FA3;
    border-color: #117487;

    color: #FFFFFF !important;

    box-shadow:
        0 3px 8px rgba(22, 143, 163, 0.20);
}

.ekid-final-button:hover {
    background: #117487;
    color: #FFFFFF !important;

    box-shadow:
        0 4px 11px rgba(22, 143, 163, 0.26);
}

.ekid-final-button:focus {
    outline-color: rgba(22, 143, 163, 0.25);
}

/* ============================================================
   8. RÉFÉRENCES BIBLIOGRAPHIQUES
   ============================================================ */

.ekid-references {
    margin-top: 28px;
    padding-top: 12px;

    border-top: 1px solid #d9e4e5;

    color: #6b777a;

    font-size: 15px;
    font-weight: 400 !important;
    line-height: 1.4;
}

.ekid-references-title {
    margin-bottom: 7px;

    color: #58676b;

    font-size: 12px;
    font-weight: 600 !important;
}

.ekid-references ol {
    margin: 0;
    padding-left: 22px;
}

.ekid-references li {
    margin-bottom: 7px;
    padding-left: 3px;

    font-weight: 400 !important;
}

.ekid-references a {
    color: #587d84;
    font-weight: 400 !important;
    text-decoration: underline;
}