/* ==========================================================================
   CENTRE DE FORMATION — Démocratie Directe Québec
   Feuille partagée par Formation.aspx (tableau de bord) et
   FormationModule.aspx (leçon). Sortie de la page le 5 septembre 2026 :
   le style était intégré dans le balisage, donc dupliqué et impossible à
   corriger en un seul endroit.

   Palette : bleu profond #0B2A5B (structure), bleu moyen #1E4DA1 (actions),
   or #D4A437 (progression), vert #1F7A4D (conforme), rouge sobre #A33B38
   (interdit), fond #F4F6FB (lecture prolongée).

   Règle de mise en page : une action principale par écran, mesure de texte
   limitée à environ 70 caractères, aucune animation décorative.
   ========================================================================== */

.cf {
    max-width: 1080px;
    margin: 0 auto;
    padding: 36px 16px 64px;
    font-family: 'Open Sans', Arial, sans-serif;
    color: #1c2530;
}

.cf h1 {
    font-family: 'Montserrat', Arial, sans-serif;
    color: #0B2A5B;
    font-size: clamp(1.65rem, 3.6vw, 2.4rem);
    line-height: 1.2;
    margin: 0 0 8px;
}

.cf h2 {
    font-family: 'Montserrat', Arial, sans-serif;
    color: #0B2A5B;
    font-size: 1.3rem;
    margin: 36px 0 12px;
}

.cf h3 {
    font-family: 'Montserrat', Arial, sans-serif;
    color: #0B2A5B;
    font-size: 1.05rem;
    margin: 26px 0 10px;
}

/* Mesure de lecture : au-delà d'environ 70 caractères, l'œil perd la ligne
   suivante en fin de paragraphe. */
.cf p { line-height: 1.75; margin: 0 0 14px; color: #37445c; max-width: 68ch; }
.cf .cf-intro { font-size: 1.05rem; color: #55617a; }
.cf a { color: #1E4DA1; }

/* ---------- Boutons ---------- */
.cf-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: #0B2A5B; color: #fff; border: 0;
    border-radius: 10px; padding: 13px 24px;
    font: 600 .97rem 'Open Sans', Arial, sans-serif;
    text-decoration: none; cursor: pointer;
    transition: background .15s ease;
}
.cf-btn:hover, .cf-btn:focus-visible { background: #1E4DA1; color: #fff; text-decoration: none; }
.cf-btn.or { background: #D4A437; color: #21252b; }
.cf-btn.or:hover, .cf-btn.or:focus-visible { background: #b98d24; color: #21252b; }
.cf-btn.creux { background: #fff; color: #0B2A5B; border: 1px solid #ccd4e4; }
.cf-btn.creux:hover, .cf-btn.creux:focus-visible { background: #f4f6fb; color: #0B2A5B; border-color: #1E4DA1; }
.cf-btn.petit { padding: 9px 16px; font-size: .88rem; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }

/* ---------- Choix du rôle ---------- */
.cf-roles { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 16px; }
@media (min-width: 760px) { .cf-roles { grid-template-columns: repeat(3, 1fr); } }

.cf-role {
    display: block; text-align: left;
    background: #fff; border: 1px solid #e6eaf2; border-top: 5px solid #1E4DA1;
    border-radius: 16px; padding: 22px 24px;
    text-decoration: none; color: inherit; cursor: pointer;
    font-family: 'Open Sans', Arial, sans-serif;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cf-role:hover, .cf-role:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(11, 42, 91, .12);
    border-top-color: #D4A437; color: inherit;
}
.cf-role b { display: block; font-family: 'Montserrat', Arial, sans-serif; font-size: 1.08rem; color: #0B2A5B; margin-bottom: 8px; }
.cf-role span { display: block; font-size: .92rem; line-height: 1.65; color: #55617a; }
.cf-role .cf-role-n { display: block; margin-top: 12px; font-size: .8rem; font-weight: 700; color: #8a93a5; }
.cf-role[aria-pressed="true"] { border-color: #1F7A4D; border-top-color: #1F7A4D; background: #f7fcf9; }

.cf-role-discret {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 8px; padding: 10px 18px;
    background: transparent; border: 1px dashed #ccd4e4; border-radius: 50px;
    color: #55617a; font: 600 .9rem 'Open Sans', Arial, sans-serif; cursor: pointer;
}
.cf-role-discret:hover { border-color: #1E4DA1; color: #0B2A5B; }

/* ---------- Tableau de bord ---------- */
.cf-bord {
    background: #fff; border: 1px solid #e6eaf2; border-radius: 18px;
    padding: 26px 28px; margin: 0 0 22px;
}
.cf-bord-tete { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-bottom: 6px; }
.cf-bord-tete b { font-family: 'Montserrat', Arial, sans-serif; font-size: 1.2rem; color: #0B2A5B; }
.cf-bord-tete .cf-parcours { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #D4A437; }

.cf-barre { background: #e6eaf2; border-radius: 999px; height: 12px; overflow: hidden; margin: 14px 0 8px; }
.cf-barre span { display: block; height: 100%; background: #1F7A4D; width: 0; transition: width .3s ease; }
.cf-barre-txt { font-size: .88rem; color: #55617a; margin: 0 0 18px; }

.cf-suite { background: #f4f6fb; border: 1px solid #e0e6f1; border-radius: 14px; padding: 18px 20px; margin: 0 0 18px; }
.cf-suite em { display: block; font-style: normal; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a93a5; margin-bottom: 6px; }
.cf-suite b { display: block; font-family: 'Montserrat', Arial, sans-serif; font-size: 1.05rem; color: #0B2A5B; margin-bottom: 10px; }

/* ---------- Échéance ---------- */
.cf-echeance {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    background: #fff6e5; border: 1px solid #f0d9a8; border-left: 5px solid #D4A437;
    border-radius: 14px; padding: 16px 20px; margin: 0 0 22px;
}
.cf-echeance.passee { background: #f4f6fb; border-color: #e0e6f1; border-left-color: #8a93a5; }
.cf-echeance-n { font-family: 'Montserrat', Arial, sans-serif; font-size: 1.7rem; font-weight: 800; color: #8a6a1c; line-height: 1; white-space: nowrap; }
.cf-echeance.passee .cf-echeance-n { font-size: 1.15rem; color: #55617a; }
.cf-echeance p { margin: 0; font-size: .92rem; line-height: 1.6; color: #7a5f1f; max-width: 60ch; }
.cf-echeance.passee p { color: #55617a; }

/* ---------- Zone urgente ---------- */
.cf-urgent { background: #0B2A5B; border-radius: 16px; padding: 20px 24px; margin: 0 0 26px; }
.cf-urgent h2 { color: #fff; margin: 0 0 4px; font-size: 1.05rem; }
.cf-urgent p { color: #b9c8e4; font-size: .88rem; margin: 0 0 14px; max-width: none; }
.cf-urgent .cf-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-urgent .cf-liens a {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50px; padding: 9px 16px;
    color: #eaf0fb; font-size: .87rem; font-weight: 600; text-decoration: none;
}
.cf-urgent .cf-liens a:hover, .cf-urgent .cf-liens a:focus-visible { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---------- Liste des modules ---------- */
.cf-modules { list-style: none; margin: 0 0 22px; padding: 0; }
.cf-module {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
    background: #fff; border: 1px solid #e6eaf2; border-radius: 14px;
    padding: 14px 18px; margin-bottom: 8px;
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.cf-module:hover, .cf-module:focus-visible { border-color: #1E4DA1; transform: translateX(3px); color: inherit; }
.cf-module-n {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    background: #f4f6fb; border: 1px solid #d8dfec; color: #0B2A5B;
    font: 800 .82rem 'Montserrat', Arial, sans-serif;
    display: flex; align-items: center; justify-content: center;
}
.cf-module.fait .cf-module-n { background: #1F7A4D; border-color: #1F7A4D; color: #fff; }
.cf-module-t { flex: 1 1 16rem; }
.cf-module-t b { display: block; font-family: 'Montserrat', Arial, sans-serif; font-size: .98rem; color: #0B2A5B; font-weight: 600; }
.cf-module-t span { display: block; font-size: .82rem; color: #8a93a5; margin-top: 2px; }
.cf-module-d { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: #55617a; white-space: nowrap; }
.cf-module.fait { background: #f7fcf9; border-color: #cbe6d5; }

/* ---------- Leçon ---------- */
.cf-fil { font-size: .85rem; color: #8a93a5; margin: 0 0 12px; }
.cf-fil a { color: #55617a; text-decoration: none; }
.cf-fil a:hover { text-decoration: underline; }

.cf-objectif {
    background: #f4f6fb; border-left: 4px solid #1E4DA1; border-radius: 12px;
    padding: 16px 20px; margin: 0 0 22px;
}
.cf-objectif em { display: block; font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #8a93a5; margin-bottom: 6px; }
.cf-objectif p { margin: 0; font-weight: 600; color: #0B2A5B; }

.cf-media { margin: 0 0 24px; }
.cf-media img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid #e6eaf2; background: #fff; }
.cf-media-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: .82rem; color: #8a93a5; }
.cf-etiq-media { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; background: #e6eaf2; color: #45536e; }

.cf-idees { list-style: none; counter-reset: idee; margin: 0 0 22px; padding: 0; }
.cf-idees li {
    counter-increment: idee; position: relative;
    padding: 14px 18px 14px 58px; margin-bottom: 8px;
    background: #fff; border: 1px solid #e6eaf2; border-radius: 12px;
    line-height: 1.7; color: #37445c;
}
.cf-idees li::before {
    content: counter(idee); position: absolute; left: 18px; top: 15px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #D4A437; color: #21252b;
    font: 800 .8rem 'Montserrat', Arial, sans-serif;
    display: flex; align-items: center; justify-content: center;
}

.cf-exemple, .cf-erreur { border-radius: 12px; padding: 16px 20px; margin: 0 0 14px; }
.cf-exemple { background: #f4faf6; border: 1px solid #cbe6d5; border-left: 4px solid #1F7A4D; }
.cf-erreur { background: #fdf4f4; border: 1px solid #f2cccc; border-left: 4px solid #A33B38; }
.cf-exemple b, .cf-erreur b { display: block; font-family: 'Montserrat', Arial, sans-serif; margin-bottom: 6px; }
.cf-exemple b { color: #1F7A4D; }
.cf-erreur b { color: #A33B38; }
.cf-exemple p, .cf-erreur p { margin: 0; font-size: .95rem; }

/* ---------- Mises en situation ----------
   La réponse est repliée : la valeur pédagogique vient de l'effort de
   rappel, pas de la lecture. Elle s'ouvre au clic, et à l'impression. */
.cf-situation {
    background: #fff; border: 1px solid #e6eaf2; border-radius: 12px;
    margin-bottom: 10px; overflow: hidden;
}
.cf-situation summary {
    cursor: pointer; padding: 16px 20px; list-style: none;
    font-weight: 600; color: #0B2A5B; line-height: 1.6;
}
.cf-situation summary::-webkit-details-marker { display: none; }
.cf-situation summary::before { content: "\25B8"; display: inline-block; width: 1.3em; color: #D4A437; font-weight: 800; }
.cf-situation[open] summary::before { content: "\25BE"; }
.cf-situation summary::after { content: "Voir la réponse"; display: block; margin-top: 6px; margin-left: 1.3em; font-size: .78rem; font-weight: 700; color: #8a93a5; text-transform: uppercase; letter-spacing: .06em; }
.cf-situation[open] summary::after { content: ""; margin: 0; }
.cf-situation .cf-reponse { padding: 0 20px 18px 46px; font-size: .95rem; line-height: 1.75; color: #45536e; }

/* ---------- Sources d'une leçon ---------- */
.cf-sources { list-style: none; margin: 0 0 18px; padding: 0; }
.cf-sources li { padding: 10px 0; border-bottom: 1px dashed #dfe4ee; font-size: .92rem; line-height: 1.6; color: #45536e; }
.cf-sources li:last-child { border-bottom: 0; }
.cf-badge { display: inline-block; font-size: .63rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; margin-right: 8px; vertical-align: 2px; white-space: nowrap; }
.cf-badge.officiel { background: #0B2A5B; color: #fff; }
.cf-badge.interne { background: #1F7A4D; color: #fff; }
.cf-badge.proposition { background: #D4A437; color: #21252b; }
.cf-badge.article { background: #e6eaf2; color: #45536e; }
.cf-badge.travail { background: #fdf4f4; color: #A33B38; border: 1px solid #f2cccc; }
.cf-verif { font-size: .82rem; color: #8a93a5; margin: 0 0 26px; }

/* ---------- Navigation entre leçons ---------- */
.cf-nav {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
    border-top: 1px solid #e6eaf2; padding-top: 22px; margin-top: 28px;
}
.cf-nav .cf-nav-d { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Divers ---------- */
.cf-note { background: #f4f6fb; border: 1px solid #e0e6f1; border-left: 4px solid #1E4DA1; border-radius: 12px; padding: 16px 20px; margin: 0 0 18px; }
.cf-note p { margin: 0; font-size: .93rem; color: #45536e; }
.cf-vide { color: #8a93a5; font-style: italic; }

/* ---------- Téléphone : cible 360 px ---------- */
@media (max-width: 420px) {
    .cf { padding: 24px 12px 48px; }
    .cf-bord, .cf-urgent { padding: 18px 16px; }
    .cf-module { padding: 12px 14px; }
    .cf-btn { width: 100%; justify-content: center; }
    .cf-nav .cf-nav-d { width: 100%; }
    .cf-media img { border-radius: 12px; }
}

/* ---------- Impression ---------- */
@media print {
    .cf-urgent, .cf-nav, .cf-actions, .cf-role-discret { display: none !important; }
    .cf-situation .cf-reponse { display: block !important; }
    .cf-situation summary::after { content: "" !important; }
    .cf-bord, .cf-module, .cf-idees li { border-color: #999; box-shadow: none; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    .cf-role, .cf-module, .cf-barre span { transition: none !important; }
    .cf-role:hover, .cf-module:hover { transform: none !important; }
}