/* ==========================================================================
   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.
   ========================================================================== */
/* =====================================================================
   NOTE SUR LES GRIS — mesuré le 7 septembre 2026

   #636e88 est le gris le plus clair qui passe WCAG AA (4,5:1) à la fois
   sur blanc (5,10), sur le fond gris #f4f6fb (4,72) et sur le fond doré
   #fdf1e3 (4,58). Il remplace #8a93a5, qui échouait partout (3,09 / 2,86
   / 2,78) alors qu'il portait les durées, les dates et les états.

   #69748d est le gris des indications de champ : 4,68 sur blanc, donc
   conforme. Il était à 2,18, puis à 4,09 — encore sous le seuil. Le fait
   qu'un champ possède une étiquette ne crée AUCUNE exemption pour son
   texte d'indication (WCAG 1.4.3).

   Ne pas les éclaircir. Ces gris ne sont pas décoratifs : ils portent
   l'information qu'on lit vite et de loin, souvent au soleil, sur un
   téléphone.
   ===================================================================== */


.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: #636e88; }
.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: #636e88; 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: #636e88; }
.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: #636e88; 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: #636e88; 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: #636e88; 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: #636e88; }
.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: #636e88; 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; }

/* ---------- La nuance qui compte ----------
   Le paragraphe qui empêche de dire une chose presque vraie. Traité comme une
   note de l'auteur, pas comme un avertissement : la personne l'a déjà lu, il
   la corrige à la marge. */
.cf-nuance {
    background: #fbf7ec; border: 1px solid #ecdcb4; border-left: 4px solid #D4A437;
    border-radius: 12px; padding: 16px 20px; margin: 0 0 22px;
}
.cf-nuance em {
    display: block; font-style: normal;
    font: 800 .68rem/1.4 'Montserrat', Arial, sans-serif;
    letter-spacing: .11em; text-transform: uppercase; color: #8a6a1c; margin-bottom: 8px;
}
.cf-nuance p { margin: 0; font-size: .95rem; line-height: 1.75; color: #6b5518; max-width: none; }

/* ---------- Bloc complémentaire : liste ou paires ---------- */
.cf-complement {
    background: #fff; border: 1px solid #e6eaf2; border-radius: 14px;
    padding: 20px 22px; margin: 0 0 24px;
}
.cf-complement h3 { margin: 0 0 14px; font-size: 1rem; }

.cf-paires { display: grid; grid-template-columns: 1fr; gap: 4px 20px; margin: 0; }
@media (min-width: 720px) { .cf-paires { grid-template-columns: 13rem 1fr; } }
.cf-paires dt {
    font: 700 .82rem/1.5 'Montserrat', Arial, sans-serif; color: #0B2A5B; padding-top: 2px;
}
.cf-paires dd { margin: 0 0 12px; font-size: .94rem; line-height: 1.7; color: #45536e; }
.cf-paires dd:last-of-type { margin-bottom: 0; }

.cf-echelle { counter-reset: ech; list-style: none; margin: 0; padding: 0; }
.cf-echelle li {
    counter-increment: ech; position: relative;
    padding: 7px 0 7px 34px; font-size: .94rem; line-height: 1.65; color: #45536e;
}
.cf-echelle li::before {
    content: counter(ech); position: absolute; left: 0; top: 8px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #f4f6fb; border: 1px solid #d8dfec; color: #0B2A5B;
    font: 800 .72rem 'Montserrat', Arial, sans-serif;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Les trois encadrés de fin de leçon ----------
   Toujours les mêmes, toujours au même endroit, toujours dans le même ordre.
   C'est ce qui permet de les retrouver de mémoire devant une porte : la
   personne ne cherche pas où était l'information, elle sait. */
.cf-emporter { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 26px; }
@media (min-width: 860px) { .cf-emporter { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.cf-boite { border-radius: 14px; padding: 18px 20px; border: 1px solid #e6eaf2; background: #fff; }
.cf-boite em {
    display: block; font-style: normal;
    font: 800 .68rem/1.4 'Montserrat', Arial, sans-serif;
    letter-spacing: .11em; text-transform: uppercase; margin-bottom: 10px;
}
.cf-boite p { margin: 0; font-size: .95rem; line-height: 1.65; }
.cf-boite ul { margin: 0; padding-left: 18px; }
.cf-boite li { font-size: .93rem; line-height: 1.6; margin-bottom: 6px; color: #45536e; }
.cf-boite li:last-child { margin-bottom: 0; }

.cf-boite.phrase { background: #0B2A5B; border-color: #0B2A5B; }
.cf-boite.phrase em { color: #D4A437; }
.cf-boite.phrase p { color: #fff; font-size: 1.02rem; font-weight: 600; }

.cf-boite.eviter { background: #fdf4f4; border-color: #f2cccc; border-left: 4px solid #A33B38; }
.cf-boite.eviter em { color: #A33B38; }

.cf-boite.geste { background: #f4faf6; border-color: #cbe6d5; border-left: 4px solid #1F7A4D; }
.cf-boite.geste em { color: #1F7A4D; }
.cf-boite.geste p { color: #2c5a43; }

/* ---------- « Je dois parler à un citoyen maintenant » ----------
   Le bouton qu'on cherche quand on n'a pas le temps de suivre une leçon.
   Il ouvre les cinq situations réelles, pas une table des matières. */
.cf-parler {
    background: #D4A437; border-radius: 18px; padding: 24px 26px; margin: 0 0 26px;
}
.cf-parler h2 { color: #21252b; margin: 0 0 4px; font-size: 1.12rem; }
.cf-parler p { color: #4a3c0e; font-size: .9rem; margin: 0 0 16px; max-width: none; }
.cf-parler-choix { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .cf-parler-choix { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.cf-parler-choix a {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, .92); border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 11px; padding: 13px 16px;
    color: #21252b; font-size: .92rem; font-weight: 600; text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.cf-parler-choix a:hover, .cf-parler-choix a:focus-visible {
    background: #fff; transform: translateY(-2px); color: #0B2A5B;
}
.cf-parler-choix a i { color: #8a6a1c; }

/* ---------- 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: #636e88; 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: #636e88; 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; }
}

/* ---------- Impression et mode sombre des encadrés ---------- */
@media print {
    .cf-parler { display: none !important; }
    .cf-emporter { grid-template-columns: 1fr 1fr 1fr; }
    .cf-boite.phrase { background: #fff !important; border: 2px solid #000 !important; }
    .cf-boite.phrase p, .cf-boite.phrase em { color: #000 !important; }
}

/* ---------- Recherche ----------
   Elle traverse tous les parcours : quelqu'un qui cherche « signatures » doit
   la trouver même s'il a choisi « candidat officiel ». */
.cf-recherche { margin: 0 0 20px; }
.cf-recherche label { display: block; font-size: .85rem; color: #55617a; margin-bottom: 8px; }
.cf-recherche-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-recherche input[type="search"] {
    flex: 1 1 16rem; min-width: 0;
    padding: 12px 16px; border: 1px solid #ccd4e4; border-radius: 10px;
    font: 400 1rem 'Open Sans', Arial, sans-serif; color: #1c2530; background: #fff;
}
.cf-recherche input[type="search"]:focus-visible { outline: 2px solid #1E4DA1; outline-offset: 1px; border-color: #1E4DA1; }
.cf-recherche-etat { margin: 10px 0 0; font-size: .87rem; color: #1F7A4D; min-height: 1.2em; }

/* ---------- Reprendre ---------- */
.cf-reprise { margin: 0 0 14px; }

/* ---------- Marqueur d'obligation ---------- */
.cf-oblig {
    flex: 0 0 auto;
    font: 800 .62rem/1 'Montserrat', Arial, sans-serif;
    letter-spacing: .09em; text-transform: uppercase;
    color: #8a6a1c; background: #fbf2dc; border: 1px solid #ecdcb4;
    border-radius: 4px; padding: 4px 8px; white-space: nowrap;
}
.cf-module.fait .cf-oblig { color: #636e88; background: #f4f6fb; border-color: #e0e6f1; }

/* ---------- Je cherche comment… ---------- */
.cf-aide { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 24px; }
@media (min-width: 720px) { .cf-aide { grid-template-columns: repeat(2, 1fr); } }
.cf-aide a {
    display: block; background: #fff; border: 1px solid #e6eaf2;
    border-left: 4px solid #1E4DA1; border-radius: 12px; padding: 14px 18px;
    text-decoration: none; color: inherit;
    transition: border-left-color .15s ease, transform .15s ease;
}
.cf-aide a:hover, .cf-aide a:focus-visible { border-left-color: #D4A437; transform: translateX(3px); color: inherit; }
.cf-aide b { display: block; font-family: 'Montserrat', Arial, sans-serif; font-size: .95rem; color: #0B2A5B; margin-bottom: 4px; }
.cf-aide span { display: block; font-size: .86rem; line-height: 1.55; color: #55617a; }

/* ---------- Je suis bloqué ---------- */
.cf-bloque {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; background: #f4f6fb; border: 1px solid #e0e6f1;
    border-radius: 14px; padding: 18px 22px; margin: 0 0 24px;
}
.cf-bloque b { display: block; font-family: 'Montserrat', Arial, sans-serif; color: #0B2A5B; margin-bottom: 3px; }
.cf-bloque span { display: block; font-size: .88rem; line-height: 1.55; color: #55617a; }

/* ---------- Téléphone : cible 360 px ---------- */
@media (max-width: 420px) {
    .cf-bloque { flex-direction: column; align-items: stretch; }
    .cf-bloque .cf-btn { width: 100%; justify-content: center; }
    .cf-recherche input[type="search"] { flex-basis: 100%; }
    .cf-recherche .cf-btn { width: 100%; justify-content: center; }
    .cf-module-t { flex-basis: 100%; }
}

@media print {
    .cf-recherche, .cf-aide, .cf-bloque, .cf-reprise { display: none !important; }
}

/* ==========================================================================
   TABLEAU DE BORD, VERSION GUIDEE (6 septembre 2026)
   La page etait un repertoire de contenu : l urgence et les reponses rapides
   arrivaient avant la progression. Deux onglets separent desormais « je veux
   apprendre » de « j ai besoin d une reponse maintenant », et le bouton
   Continuer est la premiere chose que voit un habitue.
   ========================================================================== */

/* ---------- Onglets ---------- */
.cf-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.cf-onglet {
    appearance: none; border: 1px solid #d8dfec; background: #fff; color: #37445c;
    border-radius: 50px; padding: 12px 26px; min-height: 44px;
    font: 600 .97rem 'Open Sans', Arial, sans-serif; cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cf-onglet:hover { border-color: #1E4DA1; color: #0B2A5B; }
.cf-onglet[aria-selected="true"] { background: #0B2A5B; border-color: #0B2A5B; color: #fff; }

/* « Ma semaine » n'est plus un onglet : le calendrier vivant est une page
   a lui seul. Ce lien garde sa place dans la rangee, mais il n'a pas de
   role="tab" — le clavier des onglets l'ignore, et il quitte la page. */
.cf-onglet-lien {
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    background: #f4f6fb; color: #1E4DA1; border-color: #c6d8f4;
}
.cf-onglet-lien:hover, .cf-onglet-lien:focus-visible {
    background: #fff; border-color: #1E4DA1; color: #0B2A5B; text-decoration: none;
}

.cf-volet[hidden] { display: none !important; }

/* ---------- Le bouton qui compte ---------- */
.cf-btn-grand {
    font-size: 1.05rem; padding: 16px 30px; width: 100%;
    justify-content: center; background: #1F7A4D;
}
.cf-btn-grand:hover, .cf-btn-grand:focus-visible { background: #17603c; }
@media (min-width: 560px) { .cf-btn-grand { width: auto; } }

.cf-suite { border-left: 4px solid #1F7A4D; }
.cf-actions-bord, .cf-actions-liste { margin: 14px 0 0; }
.cf-actions-liste { margin: 0 0 14px; }

/* ---------- Groupes repliables ---------- */
.cf-groupes { margin: 0 0 10px; }
.cf-groupe { margin: 0 0 12px; }
.cf-groupe-tete {
    display: flex; align-items: center; gap: 14px; width: 100%;
    background: #f4f6fb; border: 1px solid #e0e6f1; border-radius: 12px;
    padding: 14px 18px; min-height: 44px; cursor: pointer; text-align: left;
    font-family: 'Open Sans', Arial, sans-serif;
}
.cf-groupe-tete:hover { border-color: #1E4DA1; }
.cf-groupe-nom { flex: 1 1 auto; font: 700 .98rem 'Montserrat', Arial, sans-serif; color: #0B2A5B; }
.cf-groupe-compte { flex: 0 0 auto; font-size: .85rem; font-weight: 700; color: #55617a; font-variant-numeric: tabular-nums; }
.cf-groupe-chevron { flex: 0 0 auto; width: 12px; height: 12px; border-right: 2px solid #636e88; border-bottom: 2px solid #636e88; transform: rotate(45deg); transition: transform .15s ease; }
.cf-groupe.replie .cf-groupe-chevron { transform: rotate(-45deg); }
.cf-groupe.replie .cf-modules { display: none; }
.cf-groupe .cf-modules { margin: 10px 0 0; }

/* ---------- Etats de lecon ---------- */
.cf-module { min-height: 44px; }
.cf-module-etat {
    flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: #636e88; white-space: nowrap;
}
.cf-module.fait .cf-module-etat { color: #1F7A4D; }
.cf-module.a-faire {
    border-color: #1F7A4D; border-left: 4px solid #1F7A4D; background: #f7fcf9;
}
.cf-module.a-faire .cf-module-n { background: #1F7A4D; border-color: #1F7A4D; color: #fff; }
.cf-module.a-faire .cf-module-etat { color: #1F7A4D; }

/* ---------- Cartes de role : icone, cible large ---------- */
.cf-role { min-height: 44px; position: relative; }
.cf-role > i { display: block; font-size: 1.4rem; color: #1E4DA1; margin-bottom: 10px; }
.cf-roles-liens .cf-role { border-top-color: #D4A437; }
@media (min-width: 760px) { .cf-roles { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* ---------- Effacer : discret, et confirme ---------- */
.cf-effacer { margin: 24px 0 0; }
.cf-lien-discret {
    background: none; border: 0; padding: 6px 2px; min-height: 44px;
    color: #636e88; font: 400 .84rem 'Open Sans', Arial, sans-serif;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cf-lien-discret:hover { color: #A33B38; }

/* ---------- Focus visible, partout ---------- */
.cf a:focus-visible, .cf button:focus-visible, .cf input:focus-visible,
.cf-onglet:focus-visible, .cf-groupe-tete:focus-visible, .cf-role:focus-visible {
    outline: 3px solid #1E4DA1; outline-offset: 2px; border-radius: 8px;
}

/* ---------- Contraste : les gris trop clairs remontes ---------- */
.cf-module-t span { color: #55617a; }
.cf-role span { color: #4a586f; }

@media print {
    .cf-onglets { display: none !important; }
    .cf-volet[hidden] { display: block !important; }
    .cf-groupe.replie .cf-modules { display: block !important; }
}

/* ---------- Mise en situation : un exercice, pas une lecture ---------- */
.cf-situation {
    background: #fff; border: 1px solid #e6eaf2; border-radius: 12px;
    padding: 18px 20px; margin-bottom: 12px;
}
.cf-question { margin: 0 0 14px; font-weight: 600; color: #0B2A5B; line-height: 1.6; max-width: none; }
.cf-repondre { display: block; margin: 0 0 12px; font-size: .82rem; color: #55617a; }
.cf-repondre textarea {
    display: block; width: 100%; margin-top: 6px;
    padding: 12px 14px; border: 1px solid #ccd4e4; border-radius: 10px;
    font: 400 .95rem/1.6 'Open Sans', Arial, sans-serif; color: #1c2530;
    background: #fbfcfe; resize: vertical; min-height: 76px;
}
.cf-repondre textarea:focus-visible { outline: 3px solid #1E4DA1; outline-offset: 1px; border-color: #1E4DA1; }
.cf-devoile summary {
    cursor: pointer; list-style: none; min-height: 44px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 50px;
    background: #f4f6fb; border: 1px solid #d8dfec;
    font: 600 .88rem 'Open Sans', Arial, sans-serif; color: #0B2A5B;
}
.cf-devoile summary::-webkit-details-marker { display: none; }
.cf-devoile summary::before { content: "B8"; color: #D4A437; font-weight: 800; }
.cf-devoile[open] summary::before { content: "BE"; }
.cf-devoile[open] summary { background: #0B2A5B; border-color: #0B2A5B; color: #fff; }
.cf-devoile .cf-reponse {
    padding: 16px 4px 4px; font-size: .95rem; line-height: 1.75; color: #45536e;
}

/* ---------- Avancer sans chercher : barre collante sur telephone ---------- */
@media (max-width: 720px) {
    .cf-nav {
        position: sticky; bottom: 0; z-index: 20;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(6px);
        border-top: 1px solid #e0e6f1; border-bottom: 0;
        margin: 28px -12px 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }
    .cf-nav .cf-btn { width: 100%; justify-content: center; }
    .cf-nav .cf-nav-d { width: 100%; flex-direction: column; }
}

@media print {
    .cf-devoile .cf-reponse { display: block !important; }
    .cf-repondre { display: none !important; }
    .cf-nav { display: none !important; }
}

/* ---------- Couvertures de parcours ---------- */
/* Les illustrations ne portent aucun texte : les titres peuvent changer sans
   refaire les images. Elles servent a reconnaitre un parcours, pas a
   l'expliquer — les schemas des lecons restent la pour cela. */

/* Carte de choix : bandeau en tete, a fond perdu sous la bordure coloree.
   C'est le premier ecran, et le seul ou l'illustration a la place de se lire
   en entier. */
.cf-role .cf-role-vue {
    display: block; margin: -22px -24px 16px; height: 116px; overflow: hidden;
    border-radius: 11px 11px 0 0; background: #eef2f9;
}
.cf-role .cf-role-vue img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center 42%;
}

/* En-tete de parcours : une vignette, pas une bande de fond. Une image etalee
   derriere le titre l'aurait rendu moins lisible sans etre reconnaissable pour
   autant ; recadree en carre, elle reste identifiable et ne gene rien. */
.cf-groupe-tete { min-height: 72px; }
.cf-groupe-vue {
    flex: 0 0 auto; display: block; width: 56px; height: 56px;
    border-radius: 10px; overflow: hidden; background: #eef2f9;
}
.cf-groupe-vue img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: 68% 45%;
}

@media (max-width: 620px) {
    .cf-groupe-vue { width: 48px; height: 48px; }
    .cf-role .cf-role-vue { height: 96px; }
}

/* A l'impression, l'illustration ne dit rien de plus et coute de l'encre. */
@media print { .cf-groupe-vue, .cf-role-vue { display: none; } }

/* ---------- Ma semaine : horaire et ordres du jour ---------- */

/* La prochaine rencontre est calculee sur le serveur, donc juste meme sans
   JavaScript et a l'impression. C'est la seule information qu'un candidat
   vient chercher en coup de vent. */
.cf-prochaine {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    background: #0B2A5B; border-radius: 16px; padding: 20px 24px; margin: 0 0 26px;
    color: #fff;
}
.cf-prochaine em {
    flex: 0 0 100%; font-style: normal; font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: #9db6e0;
}
.cf-prochaine b { font: 700 1.24rem 'Montserrat', Arial, sans-serif; }
.cf-prochaine-nom { flex: 1 1 240px; font-size: .96rem; color: #dbe5f5; }
.cf-prochaine .cf-btn { flex: 0 0 auto; background: #fff; border-color: #fff; color: #0B2A5B; }
.cf-prochaine.encours { background: #1F7A4D; }
.cf-prochaine.encours em { color: #bfe6d1; }
.cf-prochaine.encours .cf-prochaine-nom { color: #e3f5ea; }
.cf-prochaine.encours .cf-btn { color: #145636; }

/* Jetons : public ou sur invitation. Ecrit, jamais porte par la seule couleur. */
.cf-jeton {
    display: inline-block; padding: 4px 11px; border-radius: 50px;
    font: 700 .74rem 'Open Sans', Arial, sans-serif;
    background: #eef2f9; color: #55617a; white-space: nowrap;
}
.cf-jeton.public { background: #e6f4ec; color: #145636; }
.cf-jeton.prive { background: #fdf1e3; color: #8a5a12; }
.cf-prochaine .cf-jeton { background: rgba(255, 255, 255, .18); color: #fff; }

/* Les sept temps de la semaine : une grille, pas une liste a puces. */
.cf-rythme {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 10px; list-style: none; margin: 0 0 30px; padding: 0;
    counter-reset: none;
}
.cf-rythme li {
    background: #f4f6fb; border: 1px solid #e0e6f1; border-radius: 12px;
    padding: 12px 14px;
}
.cf-rythme b {
    display: block; font: 700 .8rem 'Open Sans', Arial, sans-serif;
    letter-spacing: .06em; text-transform: uppercase; color: #636e88; margin-bottom: 4px;
}
.cf-rythme span { font: 700 .96rem 'Montserrat', Arial, sans-serif; color: #0B2A5B; }

/* Une rencontre = une carte, ancrable. Le liseré dit d'un coup si c'est public. */
.cf-rdv {
    background: #fff; border: 1px solid #e6eaf2; border-left: 5px solid #D4A437;
    border-radius: 14px; padding: 22px 24px; margin: 0 0 16px;
    scroll-margin-top: 24px;
}
.cf-rdv.publique { border-left-color: #1F7A4D; }
.cf-rdv-tete {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
    margin-bottom: 12px;
}
.cf-rdv-quand {
    flex: 0 0 auto; font: 700 .92rem 'Open Sans', Arial, sans-serif; color: #55617a;
    font-variant-numeric: tabular-nums;
}
.cf-rdv-quand b {
    display: block; font: 700 1.12rem 'Montserrat', Arial, sans-serif; color: #0B2A5B;
}
.cf-rdv-nom { flex: 1 1 220px; font: 600 1rem 'Open Sans', Arial, sans-serif; color: #0B2A5B; }
.cf-rdv-but { margin: 0 0 14px; color: #4a586f; }
.cf-odj-t {
    display: block; font: 700 .78rem 'Open Sans', Arial, sans-serif;
    letter-spacing: .07em; text-transform: uppercase; color: #636e88; margin: 14px 0 8px;
}
.cf-odj { margin: 0 0 4px; padding-left: 20px; }
.cf-odj li { margin-bottom: 5px; color: #4a586f; line-height: 1.6; }
.cf-rdv-lien { margin: 14px 0 0; font-size: .9rem; }
.cf-rdv-lien a { color: #1E4DA1; }

/* Les trois blocs du mercredi : numerotes, parce que l'ordre est reel. */
.cf-blocs { list-style: none; counter-reset: bloc; margin: 6px 0 0; padding: 0; }
.cf-blocs > li {
    counter-increment: bloc; position: relative;
    padding: 14px 0 14px 46px; border-top: 1px solid #eef1f7;
}
.cf-blocs > li::before {
    content: counter(bloc); position: absolute; left: 0; top: 16px;
    width: 30px; height: 30px; border-radius: 50%;
    background: #eef2f9; color: #1E4DA1;
    font: 700 .9rem 'Montserrat', Arial, sans-serif;
    display: flex; align-items: center; justify-content: center;
}
.cf-blocs > li > b { display: block; color: #0B2A5B; margin-bottom: 6px; }
.cf-blocs p { margin: 0 0 8px; color: #4a586f; }

/* Encadre : la phrase exacte a preparer. */
.cf-encadre {
    background: #f7f9fd; border: 1px dashed #ccd8ee; border-radius: 12px;
    padding: 16px 18px; margin: 14px 0 0;
}
.cf-encadre b { display: block; color: #0B2A5B; margin-bottom: 8px; }
.cf-encadre p { margin: 0 0 6px; color: #34456b; }
.cf-encadre-n { font-size: .9rem; color: #55617a !important; }

/* Le live : un minutage, donc des chiffres alignes. */
.cf-live {
    background: #f4f6fb; border: 1px solid #e0e6f1; border-radius: 14px;
    padding: 20px 24px; margin: 0 0 26px;
}
.cf-minutage { list-style: none; margin: 14px 0; padding: 0; }
.cf-minutage li {
    display: flex; align-items: baseline; gap: 14px;
    padding: 8px 0; border-bottom: 1px solid #e4e9f3; color: #34456b;
}
.cf-minutage li:last-child { border-bottom: 0; }
.cf-minutage span {
    flex: 0 0 58px; font: 700 .88rem 'Open Sans', Arial, sans-serif;
    color: #1E4DA1; font-variant-numeric: tabular-nums;
}

/* Trois responsabilites : numerotees, ce sont des devoirs comptables. */
.cf-devoirs {
    display: grid; grid-template-columns: 1fr; gap: 12px;
    list-style: none; counter-reset: devoir; margin: 0 0 26px; padding: 0;
}
@media (min-width: 700px) { .cf-devoirs { grid-template-columns: repeat(3, 1fr); } }
.cf-devoirs li {
    counter-increment: devoir;
    background: #fff; border: 1px solid #e6eaf2; border-top: 4px solid #1E4DA1;
    border-radius: 14px; padding: 18px 20px;
}
.cf-devoirs li::before {
    content: counter(devoir); display: block;
    font: 700 1.5rem 'Montserrat', Arial, sans-serif; color: #ccd6e8; line-height: 1;
    margin-bottom: 8px;
}
.cf-devoirs b { display: block; color: #0B2A5B; margin-bottom: 6px; }
.cf-devoirs span { font-size: .9rem; color: #55617a; }

/* Acte 1 : date, donc perissable. Le jeton dit s'il court encore. */
.cf-acte {
    background: #fbf7ee; border: 1px solid #ecdcb9; border-radius: 16px;
    padding: 24px 26px; margin: 0 0 26px;
}
.cf-acte.passe { background: #f6f7fa; border-color: #e0e6f1; }
.cf-acte-tete {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 14px;
}
.cf-acte-tete b { font: 700 1.08rem 'Montserrat', Arial, sans-serif; color: #0B2A5B; }
.cf-acte blockquote {
    margin: 0 0 14px; padding: 0 0 0 18px; border-left: 4px solid #D4A437;
    font-size: 1.02rem; font-style: italic; color: #34456b;
}
.cf-acte blockquote p { margin: 0; }
.cf-acte p { color: #4a586f; }
.cf-8020 { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 18px 0; }
@media (min-width: 560px) { .cf-8020 { grid-template-columns: 4fr 1fr; } }
.cf-8020 > div {
    background: #fff; border: 1px solid #ecdcb9; border-radius: 12px; padding: 14px 18px;
}
.cf-8020 b {
    display: block; font: 700 1.4rem 'Montserrat', Arial, sans-serif; color: #0B2A5B;
    font-variant-numeric: tabular-nums;
}
.cf-8020 span { font-size: .88rem; color: #55617a; }
.cf-acte-n { font-size: .94rem; margin-bottom: 0 !important; }

/* Conformite : le seul bloc rouge de la page, pour qu'il reste rare. */
.cf-alerte {
    background: #fdf3f2; border: 1px solid #f0cfcd; border-left: 5px solid #A33B38;
    border-radius: 14px; padding: 20px 24px; margin: 0 0 26px;
}
.cf-alerte p { color: #4a586f; }
.cf-regle {
    font: 700 1.06rem 'Montserrat', Arial, sans-serif; color: #A33B38 !important;
    margin: 14px 0 !important;
}

@media print {
    .cf-prochaine { background: #fff !important; color: #000; border: 1px solid #999; }
    .cf-prochaine em, .cf-prochaine-nom { color: #333 !important; }
    .cf-prochaine .cf-btn { display: none; }
    .cf-rdv { break-inside: avoid; }
}

/* ---------- « Tout afficher sur une page » ---------- */
/* Les onglets servent a lire; ce bouton sert a relire, a chercher avec Ctrl+F,
   a imprimer et a faire analyser la page par quelqu'un d'autre. */
.cf-onglets-ligne {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 16px; margin: 0 0 22px;
}
.cf-onglets-ligne .cf-onglets { margin-bottom: 0; }
.cf-tout-onglets {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 8px 16px;
    background: transparent; border: 1px dashed #ccd4e4; border-radius: 50px;
    color: #55617a; font: 600 .86rem 'Open Sans', Arial, sans-serif; cursor: pointer;
}
.cf-tout-onglets:hover { border-color: #1E4DA1; color: #0B2A5B; }
.cf-tout-onglets[aria-pressed="true"] {
    border-style: solid; border-color: #1F7A4D; background: #f7fcf9; color: #145636;
}

/* Tout deplie : les volets s'enchainent, il faut donc les separer et dire
   lequel on lit. Sans cela, la page devient un mur indifferencie. */
.cf-tout-ouvert .cf-volet + .cf-volet {
    margin-top: 38px; padding-top: 30px; border-top: 2px solid #e0e6f1;
}
.cf-tout-ouvert .cf-onglet[aria-selected="true"] { position: relative; }

/* ---------- Quatre niveaux de verite ---------- */
/* Chaque etiquette a sa couleur, mais elle est aussi ecrite : la distinction
   droit / proposition est trop importante pour dependre d'une nuance de
   couleur qu'un daltonien ou une impression noir et blanc effacerait. */
.cf-verite {
    background: #fff; border: 1px solid #e6eaf2; border-radius: 14px;
    padding: 18px 22px; margin: 0 0 26px;
}
.cf-verite > em {
    display: block; font-style: normal; font-size: .76rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: #636e88;
    margin-bottom: 12px;
}
.cf-verite ul { list-style: none; margin: 0; padding: 0; }
.cf-verite li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
    padding: 10px 0 10px 14px; border-left: 4px solid #ccd4e4;
    margin-bottom: 8px;
}
.cf-verite li:last-child { margin-bottom: 0; }
.cf-vjeton {
    flex: 0 0 auto; padding: 3px 11px; border-radius: 50px;
    font: 700 .74rem 'Open Sans', Arial, sans-serif; white-space: nowrap;
    background: #eef2f9; color: #55617a;
}
.cf-vtexte { flex: 1 1 240px; color: #4a586f; line-height: 1.65; }

.cf-verite li.v-droit { border-left-color: #1E4DA1; }
.cf-verite li.v-droit .cf-vjeton { background: #e8eefb; color: #16407f; }
.cf-verite li.v-interne { border-left-color: #D4A437; }
.cf-verite li.v-interne .cf-vjeton { background: #fdf1e3; color: #8a5a12; }
.cf-verite li.v-engagement { border-left-color: #1F7A4D; }
.cf-verite li.v-engagement .cf-vjeton { background: #e6f4ec; color: #145636; }
.cf-verite li.v-proposition { border-left-color: #6B4C9A; }
.cf-verite li.v-proposition .cf-vjeton { background: #f0eaf8; color: #52377a; }

.cf-verite li.v-methode { border-left-color: #4A6072; border-left-style: dashed; }
.cf-verite li.v-methode .cf-vjeton { background: #eef1f4; color: #3B4E5C; }

/* « A confirmer » : la seule etiquette qui doit accrocher l'oeil. Elle dit
   qu'on ne sait pas encore, et c'est precisement ce qu'il ne faut pas rater. */
.cf-verite li.v-aconfirmer { border-left-color: #A33B38; border-left-style: dashed; }
.cf-verite li.v-aconfirmer .cf-vjeton { background: #fdf3f2; color: #8C2F2C; }

.cf-verite-n { margin: 12px 0 0; font-size: .88rem; }
.cf-verite-n a { color: #1E4DA1; }

@media print { .cf-verite { break-inside: avoid; } .cf-verite-n { display: none; } }

/* ---------- Validation des competences ---------- */
.va-badges {
    display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 30px;
}
@media (min-width: 720px) { .va-badges { grid-template-columns: repeat(4, 1fr); } }
.va-badge {
    background: #fff; border: 1px solid #e6eaf2; border-top: 4px solid #ccd4e4;
    border-radius: 14px; padding: 16px 18px;
}
.va-badge.obtenu { border-top-color: #1F7A4D; background: #f7fcf9; }
.va-badge-etat {
    display: block; font-size: 1.5rem; line-height: 1; color: #ccd4e4; margin-bottom: 8px;
}
.va-badge.obtenu .va-badge-etat { color: #1F7A4D; }
.va-badge b { display: block; color: #0B2A5B; margin-bottom: 6px; font-family: 'Montserrat', Arial, sans-serif; }
.va-badge-d { display: block; font-size: .86rem; color: #55617a; line-height: 1.55; }
.va-badge-mot {
    display: block; margin-top: 10px; font: 700 .78rem 'Open Sans', Arial, sans-serif;
    color: #636e88;
}
.va-badge.obtenu .va-badge-mot { color: #145636; }

.va-epreuve {
    background: #fff; border: 1px solid #e6eaf2; border-radius: 16px;
    padding: 24px 26px; margin: 0 0 22px; scroll-margin-top: 24px;
}
.va-epreuve.va-critique { border-left: 5px solid #A33B38; }
.va-epreuve h2 { margin-top: 0; }
.va-consigne { color: #4a586f; }

.va-q {
    border: 0; border-left: 4px solid #e0e6f1; border-radius: 0;
    margin: 0 0 18px; padding: 4px 0 4px 16px;
}
.va-q legend { font-weight: 700; color: #0B2A5B; padding: 0 0 8px; }
.va-q.juste { border-left-color: #1F7A4D; }
.va-q.faux { border-left-color: #A33B38; }
.va-choix {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; min-height: 44px; cursor: pointer; color: #4a586f;
}
.va-choix input { margin-top: 5px; flex: 0 0 auto; width: 18px; height: 18px; }
.va-pourquoi {
    margin: 8px 0 0; padding: 10px 14px; background: #f4f6fb; border-radius: 10px;
    font-size: .9rem; color: #37445c;
}

.va-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.va-score { margin: 14px 0 0; font-weight: 700; color: #55617a; }
.va-score.reussi { color: #1F7A4D; }
.va-score.rate { color: #A33B38; }
.va-score.attention { color: #8a5a12; }

.va-chrono {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    background: #f4f6fb; border-radius: 12px; padding: 16px 18px; margin: 16px 0;
}
.va-chrono-n {
    font: 800 2.2rem 'Montserrat', Arial, sans-serif; color: #0B2A5B;
    font-variant-numeric: tabular-nums; min-width: 68px;
}
.va-chrono-n2 { font-size: .9rem; color: #55617a; }

.va-grille { list-style: none; margin: 0; padding: 0; }
.va-grille li { border-bottom: 1px solid #eef1f7; }
.va-grille li:last-child { border-bottom: 0; }
.va-grille label {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 0; min-height: 44px; cursor: pointer; color: #4a586f;
}
.va-grille input { margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px; }

.va-obj {
    border-top: 1px solid #eef1f7; padding: 18px 0;
}
.va-obj:first-child { border-top: 0; padding-top: 0; }
.va-obj-t {
    font: 700 1.04rem 'Montserrat', Arial, sans-serif; color: #0B2A5B; margin: 0 0 12px;
}
.va-auto {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 12px; padding: 8px 0; min-height: 44px; cursor: pointer;
    font-size: .9rem; color: #4a586f;
}
.va-auto input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }

@media print {
    .va-actions, .va-chrono { display: none; }
    .va-epreuve { break-inside: avoid; }
}

/* ---------- Essentiel et approfondissement ---------- */
.cf-role-plus {
    display: block; margin-top: 4px; font-weight: 400; color: #636e88;
}
.cf-btn[data-essentiel][aria-pressed="true"] {
    border-style: solid; border-color: #1F7A4D; background: #f7fcf9; color: #145636;
}
/* Une leçon d'approfondissement se distingue sans être devaluee : pas de
   couleur, seulement un liseré plus discret. */
.cf-module[data-obligatoire="0"] { border-left: 3px dashed #dde4f0; }

/* ---------- Objections a trois niveaux ---------- */
/* Quinze secondes suffisent presque toujours ; la preuve ne sert que si l'on
   ne vous croit pas. L'ordre visuel doit dire cette hierarchie. */
.fp-niv { margin: 0 0 12px; }
.fp-niv:last-child { margin-bottom: 0; }
.fp-niv b {
    display: inline-block; margin-bottom: 4px;
    font: 700 .74rem 'Open Sans', Arial, sans-serif;
    letter-spacing: .07em; text-transform: uppercase; color: #636e88;
}
.fp-preuve { padding-top: 10px; border-top: 1px dashed #dde4f0; }
.fp-preuve b { color: #1E4DA1; }

/* ---------- Script de capsule ---------- */
/* Un script de tournage n'est pas de la matiere a lire : il est replie, et il
   disparait le jour ou la video existe. */
.cf-script { margin: 14px 0 0; }
.cf-script > summary {
    cursor: pointer; padding: 10px 0; min-height: 44px;
    font: 700 .86rem 'Open Sans', Arial, sans-serif; color: #1E4DA1;
}
.cf-script pre {
    margin: 8px 0 0; padding: 18px 20px; overflow-x: auto;
    background: #f4f6fb; border: 1px solid #e0e6f1; border-radius: 12px;
    font: 400 .88rem/1.7 ui-monospace, Consolas, 'Courier New', monospace;
    color: #37445c; white-space: pre-wrap; word-break: break-word;
}
@media print { .cf-script { display: none; } }

/* ---------- Le compte : bandeau et invitations ---------- */
/* Discret en permanence. Une invitation criarde se fait ignorer en trois
   jours ; celle qui arrive au moment ou la personne vient de reussir
   quelque chose se lit. */
.cf-compte {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    background: #f4f6fb; border: 1px solid #e0e6f1; border-radius: 12px;
    padding: 12px 18px; margin: 0 0 20px;
    font-size: .92rem; color: #55617a;
}
.cf-compte > i { flex: 0 0 auto; color: #636e88; }
.cf-compte > span { flex: 1 1 240px; line-height: 1.6; }
.cf-compte b { color: #0B2A5B; }
.cf-compte .cf-btn { flex: 0 0 auto; }
.cf-compte.connecte { background: #f7fcf9; border-color: #cfe8db; }
.cf-compte.connecte > i { color: #1F7A4D; }
.cf-compte.attente { background: #fdf9f1; border-color: #ecdcb9; }
.cf-compte.attente > i { color: #8a5a12; }

.cf-invite {
    background: #fff; border: 1px solid #e6eaf2; border-left: 5px solid #1F7A4D;
    border-radius: 14px; padding: 18px 22px; margin: 0 0 22px;
}
.cf-invite b {
    display: block; font: 700 1.06rem 'Montserrat', Arial, sans-serif;
    color: #0B2A5B; margin-bottom: 6px;
}
.cf-invite p { margin: 0 0 14px; color: #4a586f; }
.cf-invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

@media print { .cf-compte, .cf-invite { display: none; } }

/* ---------- Ecran d'equipe ---------- */
.eq-filtres { margin: 0 0 18px; }
.eq-filtres label {
    display: block; margin-bottom: 8px;
    font: 700 .86rem 'Open Sans', Arial, sans-serif; color: #55617a;
}
/* Un tableau de donnees defile dans son propre conteneur : la page, elle,
   ne doit jamais defiler de cote. */
.eq-table { overflow-x: auto; border: 1px solid #e6eaf2; border-radius: 14px; background: #fff; }
.eq-table table { width: 100%; border-collapse: collapse; min-width: 720px; }
.eq-table th, .eq-table td {
    padding: 12px 16px; text-align: left; border-bottom: 1px solid #eef1f7;
    font-size: .92rem; color: #4a586f; vertical-align: top;
}
.eq-table th {
    font: 700 .76rem 'Open Sans', Arial, sans-serif;
    letter-spacing: .07em; text-transform: uppercase; color: #636e88;
    background: #f7f9fd; position: sticky; top: 0;
}
.eq-table tbody tr:last-child td { border-bottom: 0; }
.eq-table tbody tr:hover { background: #f7f9fd; }
.eq-table b { display: block; color: #0B2A5B; }
.eq-courriel { display: block; font-size: .82rem; color: #636e88; margin-top: 2px; }
.eq-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-badge {
    display: inline-block; padding: 3px 10px; border-radius: 50px;
    font: 700 .72rem 'Open Sans', Arial, sans-serif;
    background: #f1f3f8; color: #69748d; border: 1px solid #e6eaf2;
}
.eq-badge.obtenu { background: #e6f4ec; color: #145636; border-color: #cfe8db; }

@media print {
    .eq-filtres { display: none; }
    .eq-table { overflow: visible; }
    .eq-table table { min-width: 0; }
}

/* ---------- Recherche globale ---------- */
.rg { position: relative; margin: 0 0 22px; }
.rg > label {
    display: block; margin-bottom: 8px;
    font: 700 .86rem 'Open Sans', Arial, sans-serif; color: #55617a;
}
.rg-ligne {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 2px solid #d8dfec; border-radius: 12px;
    padding: 4px 12px;
}
.rg-ligne:focus-within { border-color: #1E4DA1; }
.rg-ligne > i { flex: 0 0 auto; color: #636e88; }
.rg-ligne input {
    flex: 1 1 auto; min-width: 0; min-height: 44px;
    border: 0; background: transparent; outline: none;
    font: 400 1rem 'Open Sans', Arial, sans-serif; color: #0B2A5B;
}
.rg-ligne input::placeholder { color: #69748d; }

/* La liste flotte au-dessus du contenu : elle ne doit pas pousser la page
   a chaque frappe, ce qui ferait sauter tout ce qui suit. */
.rg-liste {
    position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
    margin: 6px 0 0; padding: 6px; list-style: none;
    max-height: 60vh; overflow-y: auto;
    background: #fff; border: 1px solid #d8dfec; border-radius: 12px;
    box-shadow: 0 16px 40px rgba(11, 42, 91, .16);
}
.rg-liste li { border-radius: 9px; }
.rg-liste li.actif, .rg-liste li:hover { background: #f4f6fb; }
.rg-liste a {
    display: block; padding: 12px 14px; min-height: 44px;
    text-decoration: none; color: inherit;
}
.rg-liste b { display: block; color: #0B2A5B; font-size: .98rem; margin: 4px 0 2px; }
.rg-liste mark { background: #fdf1c8; color: inherit; padding: 0 1px; border-radius: 3px; }
.rg-c { display: block; font-size: .84rem; color: #636e88; }
.rg-g {
    display: inline-block; padding: 2px 9px; border-radius: 50px;
    font: 700 .7rem 'Open Sans', Arial, sans-serif;
    background: #eef2f9; color: #55617a;
}
.rg-lecon-essentielle { background: #e6f4ec; color: #145636; }
.rg-document { background: #fdf1e3; color: #8a5a12; }
.rg-manuel { background: #f0eaf8; color: #52377a; }
.rg-ecran { background: #e8eefb; color: #16407f; }
.rg-vide { padding: 16px; color: #55617a; font-size: .92rem; }
.rg-vide a { color: #1E4DA1; }
.rg-etat { margin: 8px 0 0; font-size: .84rem; color: #636e88; }

@media print { .rg { display: none; } }

/* ---------- L'assistant de campagne ---------- */
.as-limites { margin: 0 0 22px; }
.as-limites > summary {
    cursor: pointer; padding: 10px 0; min-height: 44px;
    font: 700 .88rem 'Open Sans', Arial, sans-serif; color: #1E4DA1;
}
.as-limites .cf-odj { margin-top: 8px; }

.as-fil { margin: 0 0 20px; }
.as-bulle { border-radius: 14px; padding: 16px 20px; margin: 0 0 12px; max-width: 92%; }
.as-bulle p { margin: 0 0 10px; }
.as-bulle p:last-child { margin-bottom: 0; }

.as-moi {
    margin-left: auto; background: #0B2A5B; color: #fff;
    border-bottom-right-radius: 4px;
}
.as-lui {
    background: #fff; border: 1px solid #e6eaf2; color: #37445c;
    border-bottom-left-radius: 4px;
}
/* Un refus n'est pas un echec : il est signale sans etre alarmant. */
.as-refus { border-left: 4px solid #D4A437; background: #fdfaf3; }
.as-erreur { border-left: 4px solid #A33B38; background: #fdf3f2; }

/* Les sources sont toujours visibles, jamais dans un repli : une reponse
   sans source verifiable est une reponse a laquelle il ne faut pas se fier. */
.as-sources {
    margin-top: 14px !important; padding-top: 12px;
    border-top: 1px dashed #dde4f0; font-size: .86rem; color: #55617a;
}
.as-sources b {
    display: block; margin-bottom: 4px; font-size: .72rem;
    letter-spacing: .07em; text-transform: uppercase; color: #636e88;
}
.as-sources a { color: #1E4DA1; }

.as-faux {
    margin-top: 12px; padding: 6px 2px; min-height: 44px;
    background: none; border: 0; cursor: pointer;
    color: #636e88; font: 400 .8rem 'Open Sans', Arial, sans-serif;
    text-decoration: underline; text-underline-offset: 3px;
}
.as-faux:hover { color: #A33B38; }
.as-faux:disabled { color: #1F7A4D; text-decoration: none; cursor: default; }

.as-points { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 6px; }
.as-points i {
    width: 6px; height: 6px; border-radius: 50%; background: #ccd4e4;
    animation: as-clign 1.2s infinite;
}
.as-points i:nth-child(2) { animation-delay: .2s; }
.as-points i:nth-child(3) { animation-delay: .4s; }
@keyframes as-clign { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .as-points i { animation: none; opacity: .6; } }

.as-suggestions { margin: 0 0 20px; }
.as-sug-t { margin: 0 0 10px; font-size: .86rem; color: #636e88; }
.as-sug {
    display: block; width: 100%; text-align: left;
    margin: 0 0 8px; padding: 12px 16px; min-height: 44px;
    background: #fff; border: 1px dashed #ccd4e4; border-radius: 10px;
    color: #37445c; font: 400 .92rem 'Open Sans', Arial, sans-serif; cursor: pointer;
}
.as-sug:hover { border-style: solid; border-color: #1E4DA1; color: #0B2A5B; }

.as-saisie { margin: 0 0 26px; }
.as-label {
    display: block; margin-bottom: 8px;
    font: 700 .86rem 'Open Sans', Arial, sans-serif; color: #55617a;
}
.as-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.as-ligne textarea {
    flex: 1 1 260px; min-height: 60px; resize: vertical;
    padding: 12px 14px; border: 2px solid #d8dfec; border-radius: 12px;
    font: 400 1rem/1.5 'Open Sans', Arial, sans-serif; color: #0B2A5B; background: #fff;
}
.as-ligne textarea:focus { outline: none; border-color: #1E4DA1; }
.as-ligne .cf-btn { flex: 0 0 auto; }
.as-quota { margin: 10px 0 0; font-size: .84rem; color: #636e88; }

@media (min-width: 700px) { .as-bulle { max-width: 78%; } }
@media print { .as-saisie, .as-suggestions, .as-faux { display: none; } }

/* ---------- Les trente questions pieges ---------- */
.ep-ligne {
    background: #fff; border: 1px solid #e6eaf2; border-left: 5px solid #ccd4e4;
    border-radius: 12px; padding: 16px 20px; margin: 0 0 10px;
}
.ep-ok { border-left-color: #1F7A4D; }
.ep-ko { border-left-color: #A33B38; background: #fdf3f2; }
.ep-ligne b {
    display: block; color: #0B2A5B; font-size: .98rem; margin-bottom: 8px;
    font-family: 'Montserrat', Arial, sans-serif;
}
.ep-n {
    display: inline-block; min-width: 26px; margin-right: 8px;
    font-variant-numeric: tabular-nums; color: #636e88;
}
.ep-piege {
    display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 40px;
    background: #fdf1e3; color: #8a5a12;
    font: 700 .68rem 'Open Sans', Arial, sans-serif;
    letter-spacing: .06em; text-transform: uppercase;
}
.ep-attendu { margin: 0 0 8px; font-size: .86rem; color: #636e88; }
.ep-recu {
    margin: 0; padding: 12px 14px; background: #f4f6fb; border-radius: 10px;
    font-size: .9rem; color: #37445c; white-space: pre-wrap;
}
.ep-ko .ep-recu { background: #fff; }
.ep-faute {
    margin: 10px 0 0; font: 700 .88rem 'Open Sans', Arial, sans-serif; color: #A33B38;
}

/* ---------- Liens sortants ---------- */
/* Visible pour l'oeil (une fleche), lisible pour un lecteur d'ecran (le
   texte). Masquer le texte a l'ecran sans le retirer de l'arbre
   d'accessibilite : ni display:none ni visibility:hidden, qui le
   supprimeraient des deux. */
.cf-lu {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cf-hors { margin-left: 6px; font-size: .78em; opacity: .75; }

/* ---------- Photos de formation ---------- */
/* Les personnages sont fictifs. Une photo accueille et situe ; un schema
   explique. On ne remplace donc jamais un schema par une photo. */
.cf-hero {
    margin: 0 0 8px; border-radius: 18px; overflow: hidden;
    background: #eef2f9; aspect-ratio: 3 / 2;
}
.cf-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-hero-note {
    margin: 0 0 26px; font-size: .8rem; color: #636e88;
}

/* Vignette de parcours : le meme cadre que les anciennes illustrations, pour
   que le remplacement ne deplace rien. */
.cf-role .cf-role-vue {
    display: block; margin: -22px -24px 16px; height: 116px; overflow: hidden;
    border-radius: 11px 11px 0 0; background: #eef2f9;
}
.cf-role .cf-role-vue img,
.cf-groupe-vue img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.cf-role .cf-role-vue img { object-position: center 45%; }
.cf-groupe-vue { flex: 0 0 auto; width: 56px; height: 56px; margin: 0;
    border-radius: 10px; overflow: hidden; background: #eef2f9; }
.cf-groupe-vue img { object-position: center 45%; }

/* Photo de lecon : un bandeau, sous le titre, avant le resume. */
.cf-photo {
    margin: 0 0 20px; border-radius: 14px; overflow: hidden;
    background: #eef2f9; aspect-ratio: 3 / 1;
}
.cf-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
@media (max-width: 620px) {
    .cf-photo { aspect-ratio: 2 / 1; }
    .cf-role .cf-role-vue { height: 96px; }
    .cf-groupe-vue { width: 48px; height: 48px; }
}

/* Bandeau des autres ecrans. */
.cf-banniere {
    margin: 0 0 24px; border-radius: 16px; overflow: hidden;
    background: #eef2f9; aspect-ratio: 4 / 1;
}
.cf-banniere img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
@media (max-width: 620px) { .cf-banniere { aspect-ratio: 2 / 1; } }

@media print { .cf-hero, .cf-photo, .cf-banniere, .cf-hero-note { display: none; } }

/* ---------- La fiche d'ouverture ---------- */
/* Cinq blocs, avant tout le reste. Quelqu'un qui n'a que trente secondes doit
   repartir avec la phrase et l'exemple ; le reste est pour qui a dix minutes.
   Chaque bloc porte son liseré : on repère « le geste à faire » sans lire. */
.cf-fiche {
    display: grid; grid-template-columns: 1fr; gap: 12px;
    margin: 0 0 26px;
}
@media (min-width: 720px) {
    .cf-fiche { grid-template-columns: 1fr 1fr; }
    .cf-f-simple { grid-column: 1 / -1; }
}
.cf-f {
    background: #fff; border: 1px solid #e6eaf2; border-left: 5px solid #ccd4e4;
    border-radius: 12px; padding: 16px 20px;
}
.cf-f > em {
    display: block; font-style: normal; font-size: .72rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: #636e88;
    margin-bottom: 8px;
}
.cf-f p { margin: 0; color: #37445c; line-height: 1.6; }
.cf-f ul { margin: 0; padding-left: 20px; }
.cf-f li { margin-bottom: 5px; color: #37445c; line-height: 1.55; }
.cf-f li:last-child { margin-bottom: 0; }

/* La phrase qu'on retient : plus grande, parce que c'est celle qui ressort
   de la conversation trois semaines plus tard. */
.cf-f-simple { border-left-color: #0B2A5B; background: #f7f9fd; }
.cf-f-simple p {
    font: 600 1.12rem/1.55 'Montserrat', Arial, sans-serif; color: #0B2A5B;
}
.cf-f-exemple { border-left-color: #1E4DA1; }
.cf-f-pas { border-left-color: #A33B38; }
.cf-f-geste { border-left-color: #1F7A4D; }
.cf-f-source { border-left-color: #D4A437; }
.cf-f-source a { color: #1E4DA1; }
.cf-f-plus { color: #636e88; font-size: .88rem; }

@media print { .cf-fiche { break-inside: avoid; } }

/* ---------- Guide technique ---------- */
.gt-compte { margin: -4px 0 14px; font-size: .88rem; color: #636e88; }
.gt-table { overflow-x: auto; border: 1px solid #e6eaf2; border-radius: 12px;
    background: #fff; margin: 0 0 26px; }
.gt-table table { width: 100%; border-collapse: collapse; min-width: 620px; }
.gt-table th, .gt-table td {
    padding: 10px 14px; text-align: left; border-bottom: 1px solid #eef1f7; font-size: .9rem;
}
.gt-table th {
    font: 700 .7rem 'Open Sans', Arial, sans-serif; letter-spacing: .08em;
    text-transform: uppercase; color: #636e88; background: #f7f9fd;
}
.gt-table tbody tr:last-child td { border-bottom: 0; }
.gt-table a { color: #1E4DA1; font-family: ui-monospace, Consolas, monospace; font-size: .86rem; }
.gt-n { font-variant-numeric: tabular-nums; text-align: right; color: #636e88; }
.gt-e, .gt-a {
    display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center;
    border-radius: 50%; font: 700 .72rem 'Open Sans', Arial, sans-serif;
}
.gt-e { background: #e6f4ec; color: #145636; }
.gt-a { background: #eef2f9; color: #636e88; }