/* ========================================================================= QCM Moniteur de conduite — feuille de style Direction « Plateforme moderne » : identité rouge suisse raffinée, typographie IBM Plex Sans (+ Mono pour les chiffres), cartes douces. Aucune dépendance hors Google Fonts (chargées dans le ). ========================================================================= */ :root { --rouge: #d52b1e; --rouge-fonce: #b3231a; --rouge-fond: #fdecea; --rouge-bord: #f3c8c3; --encre: #15181d; --gris: #5b6470; --gris-clair: #8b929c; --fond: #f4f6f8; --carte: #ffffff; --bord: #e8ebef; --bord-fort: #d7dce2; --vert: #1f7a43; --vert-fond: #e8f5ee; --bleu: #1456a0; --bleu-fond: #e7f0fb; --ambre: #8a6d00; --jaune-fond: #fff7e0; --jaune-bord: #ecd58a; --rayon: 16px; --rayon-sm: 12px; --rayon-xs: 10px; --pill: 999px; --ombre: 0 6px 28px rgba(20, 28, 40, .07); --ombre-sm: 0 1px 2px rgba(20, 28, 40, .06); --ombre-modal: 0 24px 60px rgba(15, 22, 35, .28); --ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; } /* ----- Mode sombre ------------------------------------------------------- */ [data-theme="dark"] { --encre: #e9ecf0; --gris: #aab2bd; --gris-clair: #818b97; --fond: #10151c; --carte: #1b232e; --bord: #2b3543; --bord-fort: #3c4858; --rouge: #e8392c; --rouge-fonce: #ff7468; --rouge-fond: #3a1d1b; --rouge-bord: #5c2c28; --vert: #5ec07e; --vert-fond: #15301f; --bleu: #6aa6e8; --bleu-fond: #16263a; --ambre: #d9b34d; --jaune-fond: #2c2613; --jaune-bord: #4a3f1d; --ombre: 0 6px 28px rgba(0,0,0,.5); --ombre-sm: 0 1px 2px rgba(0,0,0,.4); --ombre-modal: 0 24px 60px rgba(0,0,0,.65); color-scheme: dark; } [data-theme="dark"] .niveau-debutant { background: #15301f; color: #6ddf97; } [data-theme="dark"] .niveau-intermediaire { background: #16263a; color: #7fb6f0; } [data-theme="dark"] .niveau-avance { background: #33260f; color: #e3a94a; } [data-theme="dark"] .niveau-expert { background: #3a1d1b; color: #ff8f84; } [data-theme="dark"] .stat-fill.moyen { background: #e0a93a; } [data-theme="dark"] .choix li:has(input:checked) label { background: #20262f; } /* Bouton bascule de thème (dans l'en-tête rouge) */ .btn-theme { font-size: 1.05rem; line-height: 1; cursor: pointer; width: 2.15rem; height: 2.15rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rayon-xs); border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.14); color: #fff; margin-left: auto; transition: border-color .15s, background .15s; } .btn-theme:hover, .btn-theme:focus-visible { border-color: #fff; background: rgba(255,255,255,.24); outline: none; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--ui); color: var(--encre); background: var(--fond); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ----- En-tête ----------------------------------------------------------- */ .entete { background: var(--rouge); color: #fff; padding: .8rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; } .entete h1 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: .65rem; } .retour { color: rgba(255,255,255,.92); text-decoration: none; font-weight: 600; font-size: .9rem; padding: .4rem .75rem; border-radius: var(--rayon-xs); border: 1px solid rgba(255,255,255,.42); transition: border-color .15s ease, color .15s ease, background .15s ease; } .retour:hover, .retour:focus-visible { border-color: #fff; background: rgba(255,255,255,.14); color: #fff; outline: none; } .select-langue-wrap { margin-left: auto; } .select-langue { font: inherit; font-size: .9rem; font-weight: 500; padding: .42rem 2rem .42rem .75rem; border-radius: var(--rayon-xs); border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .65rem center; color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; } .select-langue:hover { border-color: #fff; } .select-langue option { color: var(--encre); } .aid-note { max-width: 48rem; margin: .75rem auto -.25rem; padding: 0 1.5rem; font-size: .82rem; color: var(--gris-clair); text-align: center; } /* ----- Mise en page ------------------------------------------------------ */ main { max-width: 50rem; margin: 1rem auto 1.25rem; padding: 0 1.5rem; } .ecran { display: none; } .ecran.actif { display: block; } h2 { font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 1.25rem; } .info { color: var(--gris); margin: 0 0 1rem; font-size: .95rem; } .avertissement { background: var(--jaune-fond); border: 1px solid var(--jaune-bord); border-radius: var(--rayon-sm); padding: .85rem 1.1rem; font-size: .92rem; margin-bottom: 1.25rem; } /* ----- Boutons ----------------------------------------------------------- */ .btn { font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; padding: .7rem 1.2rem; border: 1.5px solid var(--bord); background: var(--carte); border-radius: var(--rayon-xs); color: var(--encre); transition: background .14s ease, border-color .14s ease, transform .08s ease, box-shadow .14s ease; } .btn:hover, .btn:focus-visible { border-color: var(--bord-fort); background: var(--fond); outline: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primaire { background: var(--rouge); border-color: var(--rouge); color: #fff; box-shadow: 0 1px 2px rgba(213, 43, 30, .25); } .btn-primaire:hover:not(:disabled), .btn-primaire:focus-visible:not(:disabled) { background: var(--rouge-fonce); border-color: var(--rouge-fonce); } .btn-commencer { width: 100%; padding: .95rem 1.2rem; font-size: 1.02rem; margin-top: .5rem; } /* ----- Tableau de bord de progression (accueil) -------------------------- */ .dashboard { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-sm); padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; } .dash-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .dash-head h3 { margin: 0; font-size: 1.02rem; font-weight: 600; } .dash-reset { font: inherit; font-size: .8rem; cursor: pointer; background: none; border: 1px solid var(--bord); border-radius: var(--rayon-xs); padding: .3rem .65rem; color: var(--gris); transition: border-color .14s ease, color .14s ease; } .dash-reset:hover, .dash-reset:focus-visible { border-color: var(--rouge); color: var(--rouge); outline: none; } .dash-line { color: var(--gris); margin: .55rem 0; font-size: .92rem; } .dash-weak-lbl { font-weight: 600; margin: .8rem 0 .5rem; font-size: .9rem; } .dash-weak { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; } .dash-chip { font-size: .85rem; font-weight: 500; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--pill); padding: .25rem .7rem; } .btn-train { background: var(--rouge); color: #fff; border-color: var(--rouge); box-shadow: 0 1px 2px rgba(213,43,30,.25); } .btn-train:hover, .btn-train:focus-visible { background: var(--rouge-fonce); border-color: var(--rouge-fonce); } .dash-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--bord); } .dash-mini { font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: .35rem .7rem; border: 1px solid var(--bord); border-radius: var(--rayon-xs); background: var(--carte); color: var(--gris); transition: border-color .14s, color .14s; } .dash-mini:hover, .dash-mini:focus-visible { border-color: var(--rouge); color: var(--rouge); outline: none; } /* ----- Panneau de réglages (lignes cliquables) --------------------------- */ .reglages { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; } .reglage-row { font: inherit; display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; padding: .9rem 1.1rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon-sm); box-shadow: var(--ombre-sm); cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, transform .08s ease; } .reglage-row:hover, .reglage-row:focus-visible { border-color: var(--bord-fort); box-shadow: var(--ombre); outline: none; } .reglage-row:active { transform: translateY(1px); } .reglage-ic { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--fond); border-radius: var(--rayon-xs); } .reglage-label { font-weight: 600; flex: 0 0 auto; } .reglage-val { margin-left: auto; color: var(--gris); font-size: .92rem; text-align: right; } .reglage-chevron { flex: 0 0 auto; color: var(--gris-clair); font-size: 1.3rem; line-height: 1; } /* ----- Fenêtre modale ---------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(15, 20, 30, .5); display: flex; align-items: center; justify-content: center; padding: 1.25rem; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .modal-overlay[hidden] { display: none; } .modal { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-modal); width: 100%; max-width: 30rem; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--bord); } .modal-head h3 { margin: 0; font-size: 1.1rem; font-weight: 600; } .modal-fermer { font: inherit; font-size: 1.5rem; line-height: 1; width: 34px; height: 34px; border-radius: var(--rayon-xs); border: 1px solid var(--bord); background: var(--carte); color: var(--gris); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .14s, color .14s, background .14s; } .modal-fermer:hover, .modal-fermer:focus-visible { border-color: var(--rouge); color: var(--rouge); outline: none; } .modal-corps { padding: 1.25rem 1.35rem; overflow-y: auto; } .modal-pied { display: flex; justify-content: flex-end; gap: .65rem; padding: 1rem 1.35rem; border-top: 1px solid var(--bord); background: var(--fond); } /* options du mode (radios en cartes) */ .opt-card { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; margin-bottom: .65rem; border: 1.5px solid var(--bord); border-radius: var(--rayon-sm); cursor: pointer; transition: border-color .14s, background .14s; } .opt-card:hover { border-color: var(--bord-fort); } .opt-card.coche { border-color: var(--rouge); background: var(--rouge-fond); } .opt-card input { margin-top: .2rem; accent-color: var(--rouge); width: 18px; height: 18px; flex: 0 0 auto; } .opt-txt { display: flex; flex-direction: column; gap: .15rem; } .opt-titre { font-weight: 600; } .opt-desc { font-size: .85rem; color: var(--gris); line-height: 1.45; } .opt-toggle { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; margin-top: .25rem; border: 1.5px solid var(--bord); border-radius: var(--rayon-sm); cursor: pointer; } .opt-toggle input { margin-top: .2rem; accent-color: var(--rouge); width: 18px; height: 18px; flex: 0 0 auto; } /* chips (minuteur) */ .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; padding: .5rem .9rem; border-radius: var(--pill); border: 1.5px solid var(--bord); background: var(--carte); color: var(--encre); transition: border-color .14s, background .14s, color .14s; } .chip:hover { border-color: var(--bord-fort); } .chip.on { background: var(--rouge); border-color: var(--rouge); color: #fff; } /* listes à cocher (niveaux / lois / thèmes) */ .modal-tools { display: flex; gap: .5rem; margin-bottom: .85rem; } .mini { font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: .35rem .75rem; border-radius: var(--rayon-xs); border: 1px solid var(--bord); background: var(--carte); color: var(--gris); transition: border-color .14s, color .14s; } .mini:hover, .mini:focus-visible { border-color: var(--rouge); color: var(--rouge); outline: none; } .modal-list { display: flex; flex-direction: column; gap: .25rem; } .chk-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; border-radius: var(--rayon-xs); cursor: pointer; transition: background .12s; } .chk-row:hover { background: var(--fond); } .chk-row input { accent-color: var(--rouge); width: 18px; height: 18px; flex: 0 0 auto; } .chk-lib { flex: 1 1 auto; } .chk-pct { font-family: var(--mono); font-size: .8rem; color: var(--gris-clair); white-space: nowrap; } /* ----- Barre du quiz ----------------------------------------------------- */ .barre-quiz { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .progression { margin: 0; font-weight: 600; font-size: .92rem; color: var(--gris); background: var(--carte); border: 1px solid var(--bord); border-radius: var(--pill); padding: .4rem .9rem; } .minuteur { margin: 0 0 0 auto; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.02rem; font-weight: 600; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--pill); padding: .35rem .85rem; } .minuteur.urgent { color: var(--rouge); border-color: var(--rouge-bord); background: var(--rouge-fond); } /* Joker 50/50 */ .btn-joker { font: inherit; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; padding: .4rem .85rem; border-radius: var(--pill); border: 1px solid var(--jaune-bord); background: var(--jaune-fond); color: var(--ambre); cursor: pointer; transition: border-color .14s, color .14s; } .btn-joker:hover:not(:disabled), .btn-joker:focus-visible:not(:disabled) { border-color: var(--rouge); color: var(--rouge-fonce); outline: none; } .btn-joker:disabled { opacity: .45; cursor: not-allowed; } /* ----- Carte de question ------------------------------------------------- */ .zone-question { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1rem 1.2rem; margin-bottom: .6rem; } .q-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .7rem; } .theme-tag { display: inline-block; font-size: .74rem; font-weight: 600; color: var(--rouge-fonce); background: var(--rouge-fond); padding: .25rem .7rem; border-radius: var(--pill); } .niveau-tag { display: inline-block; font-size: .74rem; font-weight: 600; padding: .25rem .7rem; border-radius: var(--pill); } .niveau-debutant { background: var(--vert-fond); color: var(--vert); } .niveau-intermediaire { background: var(--bleu-fond); color: var(--bleu); } .niveau-avance { background: #fff1e0; color: #9a5a00; } .niveau-expert { background: var(--rouge-fond); color: var(--rouge-fonce); } .loi-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; padding: .25rem .65rem; border-radius: var(--pill); border: 1px solid transparent; } .loi-ic { font-size: .85rem; line-height: 1; } /* Disposition image (figure) + contenu */ .q-body { display: flex; gap: 1.5rem; align-items: flex-start; } .q-body.no-image { display: block; } .q-image-col { flex: 0 0 230px; max-width: 230px; } .q-content-col { flex: 1 1 auto; min-width: 0; } .q-figure { margin: 0; width: 100%; } .q-figure-frame { width: 100%; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon-sm); padding: 10px; display: flex; align-items: center; justify-content: center; min-height: 110px; } .q-figure-frame .question-image { display: block; width: 100%; max-height: 240px; height: auto; object-fit: contain; border: 0; border-radius: 4px; margin: 0; } .q-figcap { text-align: center; font-size: .78rem; font-weight: 600; color: var(--gris); margin-top: .6rem; line-height: 1.35; } .enonce { font-size: 1.08rem; font-weight: 600; line-height: 1.38; letter-spacing: -.01em; margin: 0 0 .7rem; color: var(--encre); } .choix { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .choix li { margin: 0; } .choix label { display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem; border: 1.5px solid var(--bord); border-radius: var(--rayon-sm); background: var(--carte); cursor: pointer; transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; } .choix label:hover { border-color: var(--bord-fort); } .choix input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--rouge); cursor: pointer; } .texte-choix { font-size: .98rem; line-height: 1.4; } .choix li:has(input:checked) label { border-color: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); background: #fff; } .choix input:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; } /* Proposition éliminée par le joker */ .choix li.elimine label { opacity: .42; text-decoration: line-through; background: var(--fond); cursor: not-allowed; pointer-events: none; box-shadow: none; border-color: var(--bord); } /* Mode entraînement : correction immédiate */ .choix li.bonne label { border-color: var(--vert); background: var(--vert-fond); box-shadow: inset 0 0 0 1px var(--vert); } .choix li.choisie-fausse label { border-color: var(--rouge); background: var(--rouge-fond); box-shadow: inset 0 0 0 1px var(--rouge); } .feedback { margin-top: 1.1rem; border-radius: var(--rayon-sm); padding: 1rem 1.1rem; border: 1px solid var(--bord); } .feedback.ok { background: var(--vert-fond); border-color: #b6e0c6; } .feedback.ko { background: var(--rouge-fond); border-color: var(--rouge-bord); } .feedback-verdict { font-weight: 700; margin: 0 0 .4rem; } .feedback.ok .feedback-verdict { color: var(--vert); } .feedback.ko .feedback-verdict { color: var(--rouge-fonce); } .feedback-expl { margin: 0 0 .5rem; font-size: .95rem; } /* Renvoi à l'article de loi */ .ref-chip { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--rouge-fonce); background: var(--rouge-fond); border: 1px solid var(--rouge-bord); border-radius: var(--rayon-xs); padding: .4rem .7rem; margin: .1rem 0 .5rem; } .source { font-size: .85rem; color: var(--gris); margin: .5rem 0 0; } .source a { color: var(--rouge); } .feedback .source { margin-top: .5rem; } /* ----- Navigateur de questions ------------------------------------------- */ .navigateur { display: flex; flex-wrap: nowrap; gap: .35rem; margin: .8rem 0; padding: .55rem .65rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon-sm); overflow-x: auto; scrollbar-width: thin; } .nav-cell { flex: 0 0 auto; } .nav-cell { min-width: 2rem; height: 2rem; padding: 0 .25rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--gris); background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon-xs); cursor: pointer; transition: border-color .14s, color .14s, background .14s; } .nav-cell:hover, .nav-cell:focus-visible { border-color: var(--bord-fort); color: var(--encre); outline: none; } .nav-cell.repondue { background: var(--vert-fond); border-color: #b6e0c6; color: var(--vert); } .nav-cell.courante { border-color: var(--rouge); color: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); } /* ----- Navigation -------------------------------------------------------- */ .navigation { display: flex; gap: .7rem; flex-wrap: wrap; margin: .8rem 0 0; } .navigation .btn-primaire { margin-left: auto; } /* ----- Résultats --------------------------------------------------------- */ .resume { text-align: center; padding: 1.75rem 1.5rem; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--carte); box-shadow: var(--ombre); margin-bottom: 1.25rem; } .resume .verdict { font-size: 1.2rem; font-weight: 700; } .resume .score { font-size: 2.6rem; font-weight: 800; margin: .25rem 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .resume .score-pct { font-size: 1.3rem; font-weight: 600; opacity: .6; } .resume.reussi { background: linear-gradient(180deg, var(--vert-fond), #fff); border-color: #b6e0c6; } .resume.echoue { background: linear-gradient(180deg, var(--rouge-fond), #fff); border-color: var(--rouge-bord); } .resume.reussi .verdict { color: var(--vert); } .resume.echoue .verdict { color: var(--rouge-fonce); } .temps-utilise { color: var(--gris); font-size: .9rem; margin: .35rem 0 0; } /* Statistiques */ .stats { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-sm); padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; } .stats-titre { font-size: 1rem; font-weight: 600; margin: 1rem 0 .6rem; } .stats-titre:first-child { margin-top: 0; } .stat-row { display: flex; align-items: center; gap: .7rem; margin: .45rem 0; } .stat-lib { flex: 0 0 11rem; font-size: .9rem; } .stat-bar { flex: 1 1 auto; height: .55rem; background: var(--bord); border-radius: var(--pill); overflow: hidden; } .stat-fill { display: block; height: 100%; border-radius: var(--pill); } .stat-fill.bon { background: var(--vert); } .stat-fill.moyen { background: #e6a000; } .stat-fill.faible { background: var(--rouge); } .stat-val { flex: 0 0 5.5rem; text-align: right; font-family: var(--mono); font-size: .82rem; color: var(--gris); } .detail { display: grid; gap: 1rem; margin: 1.25rem 0; } .carte-resultat { border: 1px solid var(--bord); border-left-width: 4px; border-radius: var(--rayon-sm); background: var(--carte); box-shadow: var(--ombre-sm); padding: 1.2rem 1.35rem; } .carte-resultat.juste { border-left-color: var(--vert); } .carte-resultat.faux { border-left-color: var(--rouge); } .carte-resultat .enonce-res { font-weight: 600; margin: 0 0 .7rem; line-height: 1.45; } .carte-resultat .q-figure { max-width: 320px; margin: 0 0 .8rem; } .carte-resultat .q-figure-frame { min-height: 0; padding: 14px; } .carte-resultat .q-figure-frame .question-image { max-height: 220px; } .carte-resultat ul { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .4rem; } .carte-resultat li { padding: .5rem .7rem; border-radius: var(--rayon-xs); font-size: .95rem; } .carte-resultat li.bonne { background: var(--vert-fond); } .carte-resultat li.choisie-fausse { background: var(--rouge-fond); } .carte-resultat .explication { font-size: .92rem; color: var(--encre); background: var(--fond); border-radius: var(--rayon-xs); padding: .7rem .85rem; margin: .5rem 0 0; } .badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: .15rem .55rem; border-radius: var(--pill); } .badge.juste { background: var(--vert-fond); color: var(--vert); } .badge.faux { background: var(--rouge-fond); color: var(--rouge-fonce); } /* ----- Pied -------------------------------------------------------------- */ .pied { text-align: center; color: var(--gris-clair); font-size: .85rem; padding: 2rem 1.5rem; } /* ----- Accessibilité ----------------------------------------------------- */ .visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ----- Mouvement réduit -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ----- Responsive -------------------------------------------------------- */ @media (max-width: 640px) { main { margin: 1rem auto 1.25rem; } .zone-question { padding: 1rem 1.1rem; } .q-body { flex-direction: column; gap: .7rem; } .q-image-col { flex: 0 0 auto; width: 100%; max-width: 260px; align-self: center; } .q-figure-frame .question-image { max-height: 180px; } .enonce { font-size: 1.05rem; } .stat-lib { flex-basis: 7.5rem; } } @media (max-width: 30rem) { .navigation .btn { flex: 1 1 auto; } .navigation .btn-primaire { margin-left: 0; } } /* ----- Modes de révision (accueil) ------------------------------------- */ .modes-revision { margin-top: 2rem; } .modes-revision h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .9rem; } .modes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; } .mode-btn { font: inherit; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon-sm); box-shadow: var(--ombre-sm); color: var(--encre); transition: border-color .14s ease, box-shadow .14s ease, transform .08s ease; } .mode-btn:hover, .mode-btn:focus-visible { border-color: var(--bord-fort); box-shadow: var(--ombre); outline: none; } .mode-btn:active { transform: translateY(1px); } .btn-examen-otr2-primaire { display: flex; align-items: center; gap: 1.2rem; padding: 1.5rem 1.8rem; width: 100%; margin: 1.5rem 0 2rem; background: linear-gradient(135deg, #d52b1e, #f44336); border: 2px solid var(--rouge-fonce); border-radius: var(--rayon-md); color: white; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(213,43,30,.3); transition: all 0.2s ease; } .btn-examen-otr2-primaire:hover, .btn-examen-otr2-primaire:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(213,43,30,.4); outline: none; } .btn-examen-otr2-primaire:active { transform: translateY(0); } .icon-otr2 { font-size: 2.2rem; } .label-otr2 { text-align: left; font-size: 1.05rem; line-height: 1.4; } .label-otr2 small { font-size: 0.9rem; font-weight: 500; opacity: 0.95; } .section-moniteur { margin: 1.5rem 0; } .section-moniteur summary { cursor: pointer; font-weight: 600; padding: 0.8rem 1rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon-sm); user-select: none; } .section-moniteur summary:hover { border-color: var(--bord-fort); } .section-moniteur[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .moniteur-content { padding: 1.2rem; background: var(--carte); border: 1px solid var(--bord); border-top: none; border-radius: 0 0 var(--rayon-sm) var(--rayon-sm); } .theme-filter { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .filter-btn { font-size: 0.9rem; padding: 0.5rem 1rem; border: 1px solid var(--bord); border-radius: var(--rayon-xs); background: var(--carte); color: var(--encre); cursor: pointer; transition: all 0.14s; } .filter-btn:hover { border-color: var(--bord-fort); } .filter-active { background: var(--rouge); color: white; border-color: var(--rouge); font-weight: 600; } .mode-ic { font-size: 1.4rem; } /* ----- Graphe de progression (dashboard) ------------------------------- */ .dash-chart { display: block; margin: .25rem 0 .75rem; } /* ----- Cartes mémo (flashcards) ---------------------------------------- */ .zone-carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.5rem; min-height: 18rem; display: flex; flex-direction: column; align-items: stretch; } .carte-img { text-align: center; margin: .25rem 0 1rem; } .carte-img .question-image { max-height: 200px; width: auto; margin: 0 auto; } .carte-enonce { font-size: 1.2rem; font-weight: 600; line-height: 1.45; margin: 0 0 1.25rem; } .btn-large { width: 100%; padding: .9rem; font-size: 1rem; margin-top: auto; } .carte-reponse { border-top: 1px solid var(--bord); padding-top: 1rem; } .carte-rep-txt { font-size: 1.15rem; font-weight: 700; color: var(--vert); margin: 0 0 .6rem; } .carte-notes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.1rem; } .btn-revoir { background: var(--rouge-fond); border-color: var(--rouge-bord); color: var(--rouge-fonce); padding: .85rem; } .btn-revoir:hover, .btn-revoir:focus-visible { border-color: var(--rouge); } .btn-su { background: var(--vert-fond); border-color: #bfe3cd; color: var(--vert); padding: .85rem; } .btn-su:hover, .btn-su:focus-visible { border-color: var(--vert); } .carte-fin { text-align: center; margin: auto; } .carte-fin-emo { font-size: 3rem; margin: 0 0 .5rem; } /* ----- À ne pas confondre (pièges) ------------------------------------- */ .zone-pieges { display: grid; gap: 1rem; } .piege-carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-sm); padding: 1.1rem 1.25rem; } .piege-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } .piege-col { text-align: center; } .piege-img { height: 64px; width: auto; object-fit: contain; margin-bottom: .4rem; } .piege-t { font-weight: 700; margin: 0 0 .3rem; font-size: .98rem; } .piege-d { color: var(--gris); font-size: .88rem; margin: 0; } .piege-vs { font-size: 1.5rem; font-weight: 700; color: var(--rouge); } .piege-cle { margin: 1rem 0 0; padding: .7rem .9rem; background: var(--jaune-fond); border: 1px solid var(--jaune-bord); border-radius: var(--rayon-sm); font-size: .92rem; font-weight: 500; } @media (max-width: 30rem) { .modes-grid { grid-template-columns: 1fr; } .piege-pair { grid-template-columns: 1fr; } .piege-vs { transform: rotate(90deg); margin: -.3rem 0; } } /* ----- Navigation clavier ---------------------------------------------- */ .choix-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; font-family: var(--mono); font-size: .78rem; font-weight: 600; color: var(--gris); background: var(--fond); border: 1px solid var(--bord); border-radius: 7px; } .choix li.bonne .choix-num { color: var(--vert); border-color: #bfe3cd; background: var(--vert-fond); } .choix li.choisie-fausse .choix-num { color: var(--rouge-fonce); border-color: var(--rouge-bord); background: var(--rouge-fond); } .choix li.elimine .choix-num { opacity: .4; } .kbd-hint { font-size: .8rem; color: var(--gris-clair); margin: .6rem 0 0; } :focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; } /* surbrillance clavier (flèches ↑↓) */ .choix li.survol label { border-color: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); background: var(--rouge-fond); } .choix li.survol .choix-num { border-color: var(--rouge); color: var(--rouge); } /* Barre de complétion du quiz (% répondu en temps réel) */ .quiz-progress { display: flex; align-items: center; gap: .75rem; margin: 0 0 .8rem; } .quiz-progress-track { flex: 1 1 auto; height: 8px; background: var(--bord); border-radius: var(--pill); overflow: hidden; } .quiz-progress-bar { height: 100%; width: 0; background: var(--rouge); border-radius: var(--pill); transition: width .25s ease; } .quiz-progress-pct { flex: 0 0 auto; font-size: .8rem; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }