/* ============================================================
   Paloma — feuille de style
   Conçue pour le téléphone d'abord (iPhone), puis élargie
   pour le MacBook à partir de 800 px.
   ============================================================ */
:root {
	--encre:      #1d2733;
	--gris:       #6b7480;
	--gris-clair: #9aa2ac;
	--fond:       #f4f6f8;
	--carte:      #ffffff;
	--trait:      #dfe3e8;
	--accent:     #2563a8;
	--accent-f:   #1c4b80;
	--ok:         #16794c;
	--presque:    #a97400;
	--rate:       #b3261e;
	--medaille:   #c8971b;
	--haut:       env(safe-area-inset-top, 0px);
	--bas:        env(safe-area-inset-bottom, 0px);
	--barre-h:    62px;   /* hauteur de la barre d'onglets du bas */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--fond);
	color: var(--encre);
	font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	padding-bottom: calc(var(--barre-h) + var(--bas));
	overscroll-behavior-y: contain;
}

a { color: var(--accent); }

/* ---------- En-tête ---------- */
.barre {
	background: var(--encre);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: calc(10px + var(--haut)) 16px 10px;
	position: sticky;
	top: 0;
	z-index: 20;
}
.marque {
	font-weight: 700;
	font-size: 19px;
	letter-spacing: .2px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
.marque span { color: #7fb2e8; }
.sortie {
	color: #98a3b0;
	text-decoration: none;
	font-size: 14px;
	padding: 6px 4px;
}
.sortie:hover { color: #fff; }

/* ---------- Onglets : barre du bas sur téléphone ---------- */
.onglets {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 30;
	display: flex;
	background: rgba(255,255,255,.96);
	backdrop-filter: saturate(180%) blur(12px);
	border-top: 1px solid var(--trait);
	padding-bottom: var(--bas);
}
.onglets a {
	flex: 1 1 0;
	min-width: 0;              /* huit onglets : chacun se serre sans déborder */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 0 1px;
	height: var(--barre-h);
	color: var(--gris);
	text-decoration: none;
	font-size: 11px;
	font-weight: 500;
}
.onglets .ico { font-size: 20px; line-height: 1; }
/* Le libellé se replie sur deux lignes plutôt que de déborder sur le
   voisin — « Pré-rentrée » tient ainsi dans sa case sur l'iPhone.
   Uniquement là : sur grand écran la navigation remonte dans l'en-tête,
   où elle a toute la place et garde ses 15 px (voir le bloc 800 px). */
@media (max-width: 799px) {
	.onglets .lib {
		max-width: 100%; text-align: center;
		font-size: 10.5px; line-height: 1.08;
		overflow-wrap: anywhere;
	}
}
.onglets a.actif { color: var(--accent); }
body.pleine .onglets { display: none; }
body.pleine { padding-bottom: 0; }

/* ---------- Contenu ---------- */
main { max-width: 900px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 4px 0 16px; letter-spacing: -.2px; }
h2 { font-size: 17px; margin: 26px 0 10px; }
footer {
	text-align: center;
	color: var(--gris-clair);
	font-size: 12px;
	padding: 20px 16px 32px;
}

.fil { font-size: 13px; color: var(--gris); margin: 0 0 10px; }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { color: var(--accent); }
.fil .sep { margin: 0 6px; color: var(--gris-clair); }
.fil .ici { color: var(--encre); font-weight: 600; }

/* ---------- Messages ---------- */
.flash { padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 15px; }
.flash.ok  { background: #e6f4ec; color: var(--ok);   border: 1px solid #b9dfc9; }
.flash.err { background: #fdecea; color: var(--rate); border: 1px solid #f3c4c0; }
.flash.info{ background: #e8f0fa; color: var(--accent-f); border: 1px solid #c3d8ee; }

/* ---------- Blocs ---------- */
.carte {
	background: var(--carte);
	border: 1px solid var(--trait);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 14px;
}
.carte h2:first-child { margin-top: 0; }
.vide { color: var(--gris); text-align: center; padding: 28px 12px; }

/* ---------- Listes cliquables (matières, livrets, cartes) ---------- */
.rangs { list-style: none; margin: 0; padding: 0; }
.rang {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--carte);
	border: 1px solid var(--trait);
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 8px;
	text-decoration: none;
	color: inherit;
}
.rang:active { background: #eef1f5; }
.rang .corps { flex: 1; min-width: 0; }
.rang .titre { font-weight: 600; display: block; }
.rang .detail { color: var(--gris); font-size: 13px; display: block; margin-top: 2px; }
.rang .chevron { color: var(--gris-clair); font-size: 20px; }
.rang .compteur {
	background: #eef1f5; color: var(--gris);
	border-radius: 20px; padding: 3px 10px; font-size: 13px; white-space: nowrap;
}
.rang .compteur.du { background: var(--accent); color: #fff; }

/* ---------- Tuiles du tableau de bord ---------- */
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.tuile {
	background: var(--carte); border: 1px solid var(--trait);
	border-radius: 12px; padding: 14px;
}
.tuile .valeur { font-size: 26px; font-weight: 700; line-height: 1.1; }
.tuile .intitule { color: var(--gris); font-size: 12.5px; margin-top: 3px; }
.tuile.du .valeur   { color: var(--accent); }
.tuile.retard .valeur { color: var(--rate); }

/* ---------- Boutons ---------- */
.btn, button.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 12px 18px; border-radius: 10px; border: 0;
	background: var(--accent); color: #fff;
	font: inherit; font-weight: 600; font-size: 15.5px;
	text-decoration: none; cursor: pointer;
	min-height: 46px;
}
.btn:hover { background: var(--accent-f); }
.btn.second { background: var(--carte); color: var(--encre); border: 1px solid #c3c9d1; }
.btn.second:hover { background: #eceff3; }
.btn.danger { background: var(--rate); }
.btn.petit { padding: 7px 12px; min-height: 0; font-size: 14px; font-weight: 500; }
.btn.large { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.actions { margin: 16px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Formulaires ---------- */
form.fiche label, form.ligne-edit label {
	display: block; font-weight: 600; font-size: 13.5px; margin: 14px 0 5px;
}
form.fiche input[type=text], form.fiche input[type=email], form.fiche input[type=number],
form.fiche input[type=password], form.fiche input[type=date], form.fiche input[type=time],
form.fiche select, form.fiche textarea,
form.ligne-edit input[type=text], form.ligne-edit input[type=email], form.ligne-edit select {
	width: 100%; padding: 12px; border: 1px solid #c3c9d1; border-radius: 10px;
	font: inherit; font-size: 16px;   /* 16px : évite le zoom automatique iOS */
	background: #fff; color: inherit;
}
form.fiche textarea { min-height: 110px; resize: vertical; }
form.fiche .aide, form.ligne-edit .aide { color: var(--gris); font-size: 12.5px; margin-top: 4px; }

/* Ligne modifiable : les champs d'un côté, les boutons de l'autre */
.ligne-edit {
	display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
	padding: 12px 0; border-bottom: 1px solid var(--trait);
}
.ligne-edit:first-of-type { padding-top: 0; }
.ligne-edit .corps { flex: 1; min-width: 240px; }
.ligne-edit .corps label:first-child { margin-top: 0; }
.ligne-edit .boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.colonnes { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
.interrupteur { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-weight: 600; font-size: 14.5px; }
.interrupteur input { width: 20px; height: 20px; }

/* Saisie du code de connexion */
.champ-code {
	width: 100%; text-align: center; letter-spacing: .5em; text-indent: .5em;
	font-size: 30px !important; font-weight: 700; padding: 14px !important;
	font-variant-numeric: tabular-nums;
}

/* ---------- Page de connexion ---------- */
body.connexion { padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
body.connexion .onglets { display: none; }
.boite { width: 100%; max-width: 380px; padding: 24px 18px calc(24px + var(--bas)); }
.boite .marque { display: block; text-align: center; color: var(--encre); font-size: 30px; margin-bottom: 4px; }
.boite .marque span { color: var(--accent); }
.boite .sous { text-align: center; color: var(--gris); font-size: 14px; margin-bottom: 20px; }

/* ---------- Pastilles ---------- */
.pastille { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; white-space: nowrap; }
.p-nouvelle { background: #eef1f5; color: var(--gris); }
.p-en_cours { background: #e8f0fa; color: var(--accent-f); }
.p-acquise  { background: #e6f4ec; color: var(--ok); }
.p-suspendue{ background: #f3e8e8; color: var(--rate); }
.p-type     { background: #f0eef7; color: #5b3f9e; }

.medaille { color: var(--medaille); font-size: 15px; }
.medaille::before { content: "🏅"; }

/* ---------- Révision ---------- */
.seance { display: flex; flex-direction: column; min-height: 100dvh; }
.seance-haut {
	display: flex; align-items: center; gap: 12px;
	padding: calc(10px + var(--haut)) 16px 10px;
	background: var(--encre); color: #fff;
}
.seance-haut a { color: #98a3b0; text-decoration: none; font-size: 22px; line-height: 1; }
.jauge { flex: 1; height: 6px; background: rgba(255,255,255,.2); border-radius: 4px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: #7fb2e8; }
.seance-haut .reste { font-size: 13px; color: #cfd6de; font-variant-numeric: tabular-nums; }

.zone { flex: 1; padding: 18px 16px 8px; max-width: 760px; margin: 0 auto; width: 100%; }
.face {
	background: var(--carte); border: 1px solid var(--trait);
	border-radius: 14px; padding: 20px 18px;
	font-size: 19px; line-height: 1.6;
}
.face .rubrique {
	color: var(--gris); font-size: 12.5px; text-transform: uppercase;
	letter-spacing: .4px; margin-bottom: 10px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 6px 10px; flex-wrap: wrap;
}
.face .rubrique .pastille { text-transform: none; letter-spacing: 0; }
.face .question { font-weight: 600; }
.face .reponse { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--trait); }
/* Une formule ne se coupe jamais en deux lignes ; si elle est plus large
   que l'écran du téléphone, c'est le bloc qui défile, pas la page. */
.face .question, .face .reponse, .propositions li span { overflow-x: auto; }
.face img.schema { max-width: 100%; height: auto; border-radius: 8px; margin-top: 14px; display: block; }
.face ol.items, .face ul.items { margin: 10px 0 0; padding-left: 22px; }
.face ol.items li, .face ul.items li { margin-bottom: 6px; }

.propositions { list-style: none; margin: 14px 0 0; padding: 0; }
.propositions li {
	border: 1px solid var(--trait); border-radius: 10px;
	padding: 12px 14px; margin-bottom: 8px; background: #fbfcfd;
	display: flex; gap: 10px; align-items: flex-start;
}
.propositions li .marque-vf { font-weight: 700; min-width: 22px; }
.propositions li.vrai { border-color: #b9dfc9; background: #f2faf5; }
.propositions li.vrai .marque-vf { color: var(--ok); }
.propositions li.faux { border-color: #f3c4c0; background: #fdf5f4; }
.propositions li.faux .marque-vf { color: var(--rate); }
.propositions .justif { display: block; color: var(--gris); font-size: 14px; margin-top: 5px; }

.pied-seance {
	position: sticky; bottom: 0;
	padding: 10px 16px calc(12px + var(--bas));
	background: linear-gradient(to top, var(--fond) 72%, rgba(244,246,248,0));
}
.pied-seance .rangee { display: flex; gap: 8px; max-width: 760px; margin: 0 auto; }
.pied-seance .rangee .btn { flex: 1; }
.btn.rate    { background: var(--rate); }
.btn.presque { background: var(--presque); }
.btn.su      { background: var(--ok); }

/* ---------- Progression d'un import ---------- */
.progression { height: 10px; background: #e3e8ee; border-radius: 6px; overflow: hidden; margin: 12px 0 8px; }
.progression span { display: block; height: 100%; background: var(--accent); width: 0; transition: width .4s; }
.journal { font-size: 13px; color: var(--gris); white-space: pre-wrap; margin-top: 10px; }

/* ---------- Formules ----------
   Cambria (la vraie, pas « Cambria Math » dont les métriques débordent
   en CSS) puis Times New Roman sur iPhone — leurs chiffres sont alignés,
   ceux de Georgia dansaient. Exposants et indices : assez grands pour
   être lus, posés à la main plutôt que par le navigateur. */
.fx { white-space: nowrap; font-family: Cambria, "Times New Roman", Times, serif; font-size: 1.12em; }
.fx sup, .fx sub { font-size: .74em; line-height: 0; vertical-align: baseline; position: relative; }
.fx sup { top: -.55em; }
.fx sub { top: .28em; }
.fx .txt { font-family: inherit; font-style: normal; }
.fx .esp { display: inline-block; width: .22em; }
.fx .frac {
	display: inline-block; vertical-align: -0.55em;
	text-align: center; font-size: .92em; margin: 0 .15em;
}
.fx .frac .num { display: block; padding: 0 .3em; border-bottom: 1px solid currentColor; }
.fx .frac .den { display: block; padding: 0 .3em; }
.fx .rac .sous { border-top: 1px solid currentColor; padding: 0 .15em; margin-left: .05em; }
.fx .surligne { text-decoration: overline; }
/* Le vecteur : la flèche vit DANS la boîte (padding), pas au-dessus —
   elle ne peut plus être rognée en première ligne d'un bloc défilable,
   et la ligne s'écarte d'elle-même pour lui faire de la place. */
.fx .vec { position: relative; display: inline-block; padding-top: .55em; line-height: 1.05; }
.fx .vec::after {
	content: "→"; position: absolute; top: -.08em; left: 0; right: 0;
	font-size: .66em; line-height: 1; text-align: center;
}

/* ---------- Trous ---------- */
.trou {
	display: inline-block; min-width: 4.5em; text-align: center;
	border-bottom: 2px solid var(--accent); color: var(--accent);
	padding: 0 .3em; letter-spacing: .1em;
}
.trou.rempli { color: var(--ok); border-bottom-color: var(--ok); font-weight: 600; letter-spacing: 0; }

/* ============================================================
   Choix du type de fiche : les quatre formes, empilées.
   Chacune est dessinée comme la fiche qu'elle produira ; un clic
   ouvre la sienne et on corrige dessus.
   ============================================================ */
/* Le titre qui annonce la pile. */
.titre-pile { margin: 22px 0 12px; }
.titre-pile h3 { margin: 0; font-size: 13px; text-transform: uppercase;
	letter-spacing: .06em; color: var(--gris); }
.titre-pile p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--gris-clair); }

/* La forme ouverte occupe toute la largeur et passe en premier ;
   les autres se rangent en pastilles sur la rangée du dessous. */
.types-cartes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.type-carte.actif { flex: 1 1 100%; order: -1; }
.type-carte:not(.actif) { flex: 1 1 auto; }

.type-carte {
	--teinte: var(--accent);
	--voile:  #eef4fb;
	--halo:   rgba(37,99,168,.16);
	position: relative;
	background: var(--carte);
	border: 1px solid var(--trait);
	border-radius: 16px;
	padding: 15px 16px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(29,39,51,.05);
	transition: border-color .18s, box-shadow .18s, transform .18s, background .25s;
}
.type-carte.t-qcm   { --teinte: #6d3fa3; --voile: #f3eefb; --halo: rgba(109,63,163,.16); }
.type-carte.t-trous { --teinte: #0f766e; --voile: #e8f5f3; --halo: rgba(15,118,110,.16); }
.type-carte.t-liste { --teinte: #b45309; --voile: #fdf2e5; --halo: rgba(180,83,9,.16); }

/* le liseré de couleur, discret tant que la forme n'est pas choisie */
.type-carte::before {
	content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
	border-radius: 0 3px 3px 0; background: var(--teinte); opacity: .22;
	transition: opacity .18s, top .18s, bottom .18s;
}
.type-carte:not(.actif):hover {
	transform: translateY(-1px);
	border-color: var(--teinte);
	box-shadow: 0 10px 22px -16px rgba(29,39,51,.55);
}
.type-carte:not(.actif):hover::before { opacity: .6; }
.type-carte:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--halo); border-color: var(--teinte); }

.type-carte.actif {
	cursor: default;
	border-color: var(--teinte);
	background: linear-gradient(180deg, var(--voile) 0, var(--carte) 96px);
	box-shadow: 0 0 0 3px var(--halo), 0 18px 34px -26px rgba(29,39,51,.75);
}
.type-carte.actif::before { opacity: 1; top: 0; bottom: 0; }

/* ---- l'en-tête : pictogramme, nom, à quoi ça sert ---- */
.tc-tete { display: flex; align-items: center; gap: 12px; }
.tc-ico {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
	display: flex; align-items: center; justify-content: center;
	background: var(--voile); color: var(--teinte);
	box-shadow: inset 0 0 0 1px var(--halo);
	transition: background .18s, color .18s, box-shadow .18s;
}
.tc-ico svg { width: 23px; height: 23px; display: block; }
.type-carte.actif .tc-ico {
	background: var(--teinte); color: #fff;
	box-shadow: 0 8px 16px -8px var(--teinte);
}
.tc-titres { flex: 1; min-width: 0; }
.tc-titres strong { display: block; font-size: 15.5px; letter-spacing: -.15px; }
.tc-titres span { display: block; color: var(--gris); font-size: 13px; margin-top: 1px; }
.tc-marque {
	flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%;
	border: 1.5px solid #ccd2da; color: transparent;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; transition: .18s;
}
.type-carte.actif .tc-marque { background: var(--teinte); border-color: var(--teinte); color: #fff; }

/* ---- repliée : une pastille compacte, juste l'icône et le nom ----
   Les formes non retenues n'affichent ni dessin, ni énoncé, ni
   sous-titre : les trois tiennent sur une rangée, et un clic sur
   la pastille ouvre la forme voulue. */
.tc-apercu { display: none; }
.type-carte:not(.actif) .tc-corps { display: none; }
.type-carte:not(.actif) { padding: 7px 11px; }
.type-carte:not(.actif) .tc-tete { gap: 8px; }
.type-carte:not(.actif) .tc-ico { width: 28px; height: 28px; border-radius: 9px; }
.type-carte:not(.actif) .tc-ico svg { width: 16px; height: 16px; }
.type-carte:not(.actif) .tc-titres span { display: none; }
.type-carte:not(.actif) .tc-titres strong { font-size: 13.5px; white-space: nowrap; }
.type-carte:not(.actif) .tc-marque { width: 19px; height: 19px; font-size: 11px; }
.type-carte:not(.actif)::before { top: 9px; bottom: 9px; }

/* ---- l'éditeur au plus serré : tenir à l'écran sans molette ----
   L'en-tête de la forme ouverte devient aussi discret qu'une pastille,
   et l'explication sous « La forme de la fiche » disparaît : les
   pastilles se comprennent seules. (Les marges et hauteurs des champs
   sont réglées directement dans leurs règles d'origine, plus haut.) */
.type-carte.actif { padding: 12px 14px; }
.type-carte.actif .tc-tete { gap: 9px; }
.type-carte.actif .tc-ico { width: 28px; height: 28px; border-radius: 9px; }
.type-carte.actif .tc-ico svg { width: 16px; height: 16px; }
.type-carte.actif .tc-titres span { display: none; }
.type-carte.actif .tc-titres strong { font-size: 14px; }
.titre-pile { margin: 14px 0 8px; }
.titre-pile p { display: none; }

/* ---- le classement d'une fiche : rangé serré ----
   Les trois champs sur une rangée en grand écran, les interrupteurs
   côte à côte — le bloc perd la moitié de sa hauteur. */
.classement .interrupteurs { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 2px; }
.classement .interrupteurs .interrupteur { margin: 0; }
@media (min-width: 800px) {
	.classement .colonnes { grid-template-columns: repeat(3, 1fr); }
	.classement .colonnes > div > label:first-child { margin-top: 0; }
}

/* Les boutons d'enregistrement suivent le défilement : plus besoin de
   descendre au bout de la page pour enregistrer et passer à la suivante. */
.pied-fiche {
	position: sticky;
	bottom: calc(var(--barre-h) + var(--bas));
	z-index: 15;
	margin: 16px 0 0;
	padding: 10px 0 12px;
	background: linear-gradient(to top, var(--fond) 75%, rgba(244, 246, 248, 0));
}
@media (min-width: 800px) {
	.pied-fiche { bottom: 0; }
}

.tc-apercu { margin-top: 13px; border-top: 1px dashed var(--trait); padding-top: 13px; }
.tc-extrait {
	display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 11px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-extrait.vide { color: var(--gris-clair); font-weight: 400; font-style: italic; }
.tc-prendre {
	display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600;
	color: var(--teinte); opacity: .75;
}
.type-carte:hover .tc-prendre { opacity: 1; }
.tc-prendre::after { content: " ›"; }

.mini .l { display: block; height: 7px; border-radius: 4px; background: #e4e9ef; }
.mini .w20 { width: 20%; } .mini .w25 { width: 25%; } .mini .w30 { width: 30%; }
.mini .w35 { width: 35%; } .mini .w40 { width: 40%; } .mini .w50 { width: 50%; }
.mini .w55 { width: 55%; } .mini .w60 { width: 60%; } .mini .w65 { width: 65%; }
.mini .w70 { width: 70%; } .mini .w75 { width: 75%; } .mini .w80 { width: 80%; }
.mini .w85 { width: 85%; }

.mini-rv { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 11px; }
.mini-rv .mini-face {
	background: #fbfcfd; border: 1px solid var(--trait); border-radius: 11px;
	padding: 11px 10px; display: grid; gap: 6px; min-height: 62px; align-content: center;
}
.mini-rv .mini-face.envers { background: var(--voile); border-color: transparent; }
.mini-rv .mini-face.envers .l { background: rgba(255,255,255,.75); }
.mini-fleche { color: var(--teinte); font-size: 16px; line-height: 1; }

.mini-lignes { display: grid; gap: 8px; }
.mini-ligne { display: flex; align-items: center; gap: 10px; }
.mini-ligne .puce {
	flex: 0 0 auto; width: 21px; height: 21px; border-radius: 7px;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; background: var(--voile); color: var(--teinte);
}
.mini-ligne .puce.vrai { background: #e6f4ec; color: var(--ok); }
.mini-ligne .puce.faux { background: #fdecea; color: var(--rate); }
.mini-ligne .l { flex: 1; }

.mini-trous { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 8px; }
.mini-trous .l { flex: 0 0 auto; }
.mini-trous .trou-vide {
	flex: 0 0 auto; width: 74px; height: 15px; border-radius: 6px;
	background: var(--voile); border: 1px dashed var(--teinte); opacity: .85;
}
.mini-trous .trou-vide.court { width: 48px; }

/* ---- ouvert : les champs, posés sur la fiche ---- */
.tc-corps { margin-top: 10px; }
.tc-label {
	display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .07em; color: var(--gris); margin: 0 0 5px;
}
.tc-label.haut { margin-top: 11px; }
.tc-face {
	background: #fbfcfd; border: 1px solid var(--trait);
	border-radius: 14px; padding: 10px 11px 11px;
}
.tc-face.envers { background: var(--voile); border-color: transparent; }
.tc-face.haut { margin-top: 14px; }
.tc-bascule {
	display: flex; align-items: center; gap: 10px; margin: 7px 0;
	color: var(--gris-clair); font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
}
.tc-bascule::before, .tc-bascule::after { content: ""; flex: 1; height: 1px; background: var(--trait); }

.type-carte textarea.tc-champ, .type-carte input.tc-ligne-champ {
	width: 100%; padding: 11px 12px; border: 1px solid #ccd2da; border-radius: 11px;
	background: #fff; color: inherit; font: inherit; font-size: 16px;
	transition: border-color .15s, box-shadow .15s;
}
.type-carte textarea.tc-champ { min-height: 68px; line-height: 1.55; resize: vertical; }
.type-carte textarea.tc-champ.question { font-weight: 600; }
.type-carte textarea.tc-champ.court { min-height: 52px; }
.type-carte textarea.tc-champ:focus, .type-carte input.tc-ligne-champ:focus {
	outline: none; border-color: var(--teinte); box-shadow: 0 0 0 3px var(--halo);
}
.type-carte input.tc-ligne-champ.discret { margin-top: 6px; font-size: 14.5px; color: var(--gris); }

/* ---------- Champ « comme dans Word » ----------
   Le champ riche reprend exactement l'allure du champ d'origine ;
   celui-ci reste dans le formulaire, mais hors de vue. */
.riche-cache { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.riche-boite { position: relative; }
.type-carte .riche.tc-champ {
	width: 100%; padding: 11px 12px; border: 1px solid #ccd2da; border-radius: 11px;
	background: #fff; color: inherit; font: inherit; font-size: 16px;
	min-height: 68px; line-height: 1.55; overflow-wrap: break-word;
	transition: border-color .15s, box-shadow .15s;
}
/* Le champ « question » ne peut pas être en demi-gras par défaut : le
   navigateur croirait le texte déjà gras, et le bouton G l'enlèverait
   au lieu de le mettre. On le distingue donc par la taille. */
.type-carte .riche.tc-champ.question { font-size: 17px; }
.type-carte .riche.tc-champ.court { min-height: 52px; }
.type-carte .riche.tc-champ:focus {
	outline: none; border-color: var(--teinte); box-shadow: 0 0 0 3px var(--halo);
}
/* le texte d'invite, tant que rien n'est écrit */
.riche:empty::before {
	content: attr(data-vide); color: var(--gris-clair); font-weight: 400; pointer-events: none;
}
.riche strong { font-weight: 800; }

.riche-barre { display: flex; gap: 6px; margin-bottom: 6px; }
.riche-g {
	font: inherit; font-weight: 800; font-size: 14px; line-height: 1;
	width: 30px; height: 28px; border-radius: 8px; cursor: pointer;
	border: 1px solid #ccd2da; background: var(--carte); color: var(--gris);
}
.riche-g:hover { color: var(--teinte); border-color: var(--teinte); }
.riche-boite:focus-within .riche-g { color: var(--teinte); border-color: var(--teinte); }

.tc-lignes { display: grid; gap: 8px; }
.tc-ligne {
	display: flex; gap: 10px; align-items: flex-start;
	background: #fff; border: 1px solid var(--trait); border-radius: 12px; padding: 10px;
}
.tc-ligne .rang-num {
	flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; margin-top: 7px;
	display: flex; align-items: center; justify-content: center;
	background: var(--voile); color: var(--teinte); font-size: 12px; font-weight: 700;
}
.tc-ligne .corps { flex: 1; min-width: 0; }
.tc-sup {
	flex: 0 0 auto; margin-top: 5px; width: 28px; height: 28px; border-radius: 8px;
	border: 0; background: none; color: var(--gris-clair);
	font: inherit; font-size: 19px; line-height: 1; cursor: pointer;
}
.tc-sup:hover { background: #fdecea; color: var(--rate); }

/* le vrai/faux, en bascule à deux volets */
.type-carte label.bascule-vf {
	position: relative; flex: 0 0 auto; margin: 6px 0 0; cursor: pointer;
	display: inline-flex; -webkit-user-select: none; user-select: none;
}
.bascule-vf input { position: absolute; opacity: 0; width: 0; height: 0; }
.bascule-vf .piste {
	display: inline-flex; border: 1px solid #ccd2da; border-radius: 10px;
	overflow: hidden; background: #fff;
}
.bascule-vf .opt {
	padding: 7px 11px; font-size: 12.5px; font-weight: 700; color: #b9bfc7;
	transition: background .15s, color .15s;
}
.bascule-vf input:checked ~ .piste .opt.v { background: #e6f4ec; color: var(--ok); }
.bascule-vf input:not(:checked) ~ .piste .opt.f { background: #fdecea; color: var(--rate); }
.bascule-vf input:focus-visible ~ .piste { border-color: var(--teinte); box-shadow: 0 0 0 3px var(--halo); }

.tc-ajout {
	margin-top: 10px; border: 1px dashed #c3c9d1; background: #fff; border-radius: 11px;
	padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 600;
	color: var(--gris); cursor: pointer;
}
.tc-ajout:hover { border-color: var(--teinte); color: var(--teinte); background: var(--voile); }
.tc-ajout span { font-size: 16px; }

.tc-outil { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.tc-mini-btn {
	border: 1px solid #c3c9d1; background: #fff; border-radius: 9px; padding: 7px 12px;
	font: inherit; font-size: 13.5px; font-weight: 600; color: var(--encre); cursor: pointer;
}
.tc-mini-btn:hover { border-color: var(--teinte); color: var(--teinte); background: var(--voile); }
.tc-aide { flex: 1; min-width: 180px; color: var(--gris); font-size: 12.5px; }

.tc-rendu {
	margin: 11px 0; padding: 13px 14px; border-radius: 14px;
	background: var(--voile); font-size: 16.5px; line-height: 1.85; min-height: 20px;
}
.tc-rendu:empty { display: none; }

.tc-note {
	display: flex; gap: 8px; margin: 9px 0 0;
	color: var(--gris); font-size: 12.5px; line-height: 1.5;
}
.tc-note span { color: var(--teinte); }

.tc-alerte {
	margin: 11px 0 0; padding: 9px 12px; border-radius: 10px;
	background: #fdf6e6; color: #7a5300; border: 1px solid #f0dfb4;
	font-size: 12.5px; line-height: 1.5;
}

/* ---------- L'aperçu, refait à chaque frappe ---------- */
.apercu-vivant h3 span { font-weight: 400; text-transform: none; letter-spacing: 0; }
.apercu-vivant .face { transition: opacity .15s; }
#apercu-direct.perdu { opacity: .45; }
.apercu-vide { color: var(--gris-clair); font-style: italic; font-size: 15px; margin: 0; }

/* ============================================================
   MacBook et grands écrans
   ============================================================ */
@media (min-width: 800px) {
	body { padding-bottom: 0; }
	.barre { padding: 12px 24px; gap: 28px; justify-content: flex-start; }
	.onglets {
		position: static; flex: 1; background: none; border: 0;
		backdrop-filter: none; padding: 0; gap: 4px;
	}
	.onglets a {
		flex: 0 0 auto; flex-direction: row; gap: 7px;
		height: auto; padding: 8px 12px; border-radius: 8px;
		color: #b7c0ca; font-size: 15px;
	}
	.onglets .ico { font-size: 16px; }
	.onglets a:hover { color: #fff; background: rgba(255,255,255,.08); }
	.onglets a.actif { color: #fff; background: rgba(127,178,232,.18); }
	.sortie { margin-left: auto; }
	main { padding: 24px; }
	h1 { font-size: 26px; }
	.tuiles { grid-template-columns: repeat(4, 1fr); }
	.colonnes { grid-template-columns: 1fr 1fr; }
	.face { font-size: 20px; padding: 26px 24px; }
	.rang { padding: 14px 16px; }
	.rang:hover { border-color: var(--accent); }
}

/* Sur grand écran, la page suit la fenêtre par paliers plutôt que de
   rester coincée au milieu d'un désert. On s'arrête à 1400 px : au-delà,
   les lignes de texte deviennent trop longues à lire. */
@media (min-width: 1100px) { main { max-width: 1080px; } }
@media (min-width: 1400px) { main { max-width: 1240px; } }
@media (min-width: 1800px) { main { max-width: 1400px; } }

/* Au-delà de 1400 px, une liste sur toute la largeur n'affiche que du
   vide : les rangs passent sur deux colonnes. La barre de réglage en
   lot, elle, reste sur toute la largeur — c'est un bandeau, pas un rang. */
@media (min-width: 1400px) {
	.rangs {
		display: grid; grid-template-columns: repeat(2, 1fr);
		gap: 8px 12px; align-items: start;
	}
	.rangs > .rang,
	.rangs > .rang-lot,
	.rangs > .rang-lot > .rang { margin-bottom: 0; }
	.rangs > .lot-barre { grid-column: 1 / -1; margin-bottom: 2px; }
}

/* ---------- Impression : fiches papier ---------- */
@media print {
	.barre, .onglets, .pied-seance, footer, .actions { display: none !important; }
	body { background: #fff; padding: 0; }
	.face, .carte { border: 1px solid #999; break-inside: avoid; }
}

/* ============================================================
   L'atelier : la fiche d'un côté, le cours de l'autre.
   Partagé par la relecture d'un livret et la correction d'une
   fiche isolée — les deux doivent se comporter pareil.
   ============================================================ */
body.atelier main { max-width: 1500px; }

.duo { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1050px) {
	.duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.colonne-cours { position: sticky; top: 78px; }
}

.visionneuse {
	width: 100%; height: 62vh; min-height: 380px;
	border: 1px solid var(--trait); border-radius: 12px; background: var(--carte);
}
@media (max-width: 1049px) { .visionneuse { height: 46vh; } }

/* Sur téléphone, le cours se replie : on ne veut pas faire défiler
   un PDF pour atteindre les boutons. */
.cours-repliable > summary {
	cursor: pointer; list-style: none;
	background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
	padding: 12px 14px; font-weight: 600; font-size: 14.5px;
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cours-repliable > summary::-webkit-details-marker { display: none; }
.cours-repliable > summary .etat { color: var(--gris); font-weight: 400; font-size: 13px; }
.cours-repliable[open] > summary { border-radius: 12px 12px 0 0; border-bottom: 0; }
.cours-repliable[open] .visionneuse { border-radius: 0 0 12px 12px; }
@media (min-width: 1050px) { .cours-repliable > summary { display: none; } }

.source {
	background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
	padding: 14px 16px; font-size: 15px; line-height: 1.65; margin-top: 12px;
	white-space: pre-wrap;
}
.source mark { background: #fdf0c4; color: inherit; padding: 1px 2px; border-radius: 3px; }
.source h3, .bloc h3 {
	margin: 0 0 10px; font-size: 13px; text-transform: uppercase;
	letter-spacing: .06em; color: var(--gris);
}

.bloc {
	background: var(--carte); border: 1px solid var(--trait);
	border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
}

/* ============================================================
   L'onglet Programmation : le cours de C.
   Le code s'affiche sur fond sombre, comme dans un vrai éditeur ;
   tout le reste garde l'habillage du site.
   ============================================================ */
:root {
	--code-fond:  #141d28;
	--code-bord:  #2b3948;
	--code-texte: #dce5ee;
}
.mono, .cx-code, .cx-source, .cx-sortie pre, .clavier-liste {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- la leçon ---------- */
.lecon { font-size: 16.5px; }
.lecon h2 { font-size: 18px; margin: 32px 0 10px; }
.lecon p, .lecon ul, .lecon ol { margin: 0 0 13px; }
.lecon ul, .lecon ol { padding-left: 22px; }
.lecon li { margin-bottom: 5px; }
.lecon code, .ex-enonce code, .note-c code, .ex-note-entree code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em; background: #e9edf2; border-radius: 6px; padding: 1px 6px;
	white-space: nowrap;
}

/* les encadrés : piège, astuce, à retenir */
.note-c { border-radius: 12px; padding: 12px 14px; margin: 16px 0; font-size: 15px; line-height: 1.55; }
.note-c .note-titre { display: block; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.note-c.piege  { background: #fdf1f0; border: 1px solid #f3c9c5; }
.note-c.piege .note-titre { color: var(--rate); }
.note-c.astuce { background: #e9f1fa; border: 1px solid #c8dcf0; }
.note-c.astuce .note-titre { color: var(--accent-f); }
.note-c.memo   { background: #e9f5f3; border: 1px solid #bfe0da; }
.note-c.memo .note-titre { color: #0f766e; }
.note-c p:last-child { margin-bottom: 0; }

/* la pastille d'aide 💡 : l'explication courte reste dans la leçon,
   la pastille déplie l'explication imagée. prog.js pose le panneau
   près de la pastille, jamais hors écran ; sans JavaScript, le
   survol seul l'affiche en bas de l'écran. */
.aide-c { display: inline; }
.ac-puce {
	display: inline-flex; align-items: center;
	margin: 0 1px; padding: 1px 9px 2px;
	border: 1px dashed var(--gris-clair); border-radius: 20px;
	background: none; color: var(--gris);
	font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.45;
	cursor: help; vertical-align: 1px; white-space: nowrap;
}
.ac-puce:hover, .aide-c.ouvert .ac-puce { border: 1px solid var(--accent); color: var(--accent); }
.ac-pop {
	display: none; position: fixed; left: 10px; right: 10px;
	bottom: calc(10px + var(--bas)); z-index: 60; cursor: default;
}
.aide-c:hover .ac-pop, .aide-c.ouvert .ac-pop { display: block; }
.ac-bulle {
	display: block; overflow-y: auto; max-height: 58vh;
	background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
	padding: 12px 15px; box-shadow: 0 14px 44px rgba(29, 39, 51, .28);
	color: var(--encre); font-size: 14.5px; font-weight: 400;
	line-height: 1.6; text-align: left; white-space: normal;
}
.ac-bulle code { white-space: nowrap; }

/* ---------- blocs de code et éditeur ---------- */
.cx { margin: 15px 0; }
.cx-cadre { background: var(--code-fond); border: 1px solid var(--code-bord); border-radius: 12px; overflow: hidden; }
.cx-code {
	margin: 0; padding: 13px 15px; overflow-x: auto;
	font-size: 13.5px; line-height: 1.65; color: var(--code-texte);
	-webkit-text-size-adjust: none;
}
.cx-code code { font: inherit; background: none; padding: 0; white-space: pre; }
textarea.cx-source {
	display: block; width: 100%; border: 0; outline: none; resize: none;
	background: var(--code-fond); color: var(--code-texte); caret-color: #7fb2e8;
	padding: 13px 15px; font-size: 16px; line-height: 1.6;   /* 16px : pas de zoom iOS */
	white-space: pre; overflow-x: auto;
}

/* la coloration (classes posées par C.colorer) */
.ck { color: #ff8a80; }                    /* if, while, return… */
.ct { color: #82b6f5; }                    /* int, char, struct… */
.cs { color: #a8d08d; }                    /* "chaînes" */
.cn { color: #d5b2f2; }                    /* nombres, NULL */
.cc { color: #8b97a5; font-style: italic; }/* commentaires */
.cp { color: #f2ad63; }                    /* #include, #define */
.cf { color: #7edcd0; }                    /* appels de fonction */

/* la rangée de touches utiles, au-dessus du clavier du téléphone */
.cx-clavier {
	display: flex; gap: 5px; overflow-x: auto; padding: 8px 10px;
	background: #1b2735; border-top: 1px solid var(--code-bord);
	-webkit-overflow-scrolling: touch;
}
.cx-clavier button {
	flex: 0 0 auto; min-width: 36px; padding: 8px 9px; border: 0; border-radius: 8px;
	background: #2b3948; color: var(--code-texte); cursor: pointer;
	font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; line-height: 1;
}
.cx-clavier button:active { background: #3d4e61; }

.cx-entree-zone { margin-top: 8px; }
.cx-entree-zone label { display: block; font-size: 12.5px; font-weight: 600; color: var(--gris); margin-bottom: 4px; }
textarea.cx-entree {
	display: block; width: 100%; border: 1px solid #c3c9d1; border-radius: 10px;
	padding: 9px 12px; font-size: 16px; resize: none; background: #fff; color: inherit;
	font-family: ui-monospace, Menlo, Consolas, monospace;
}

.cx-barre { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* la sortie : un petit terminal */
.cx-sortie {
	margin-top: 8px; border-radius: 12px; overflow: hidden;
	background: #0c131b; border: 1px solid var(--code-bord);
}
.cx-sortie-titre {
	padding: 7px 13px 0; font-size: 11px; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase; color: #71808f;
}
.cx-sortie pre {
	margin: 0; padding: 8px 13px 12px; overflow-x: auto;
	font-size: 14px; line-height: 1.55; color: #d8f3dc; white-space: pre-wrap; word-break: break-word;
}
.cx-sortie pre.vide { color: #71808f; font-style: italic; }
.cx-erreur {
	padding: 9px 13px 12px; font-size: 14px; line-height: 1.5;
	color: #ffb4ad; border-top: 1px dashed #3d2b2b; white-space: pre-wrap;
}

/* ---------- les exercices ---------- */
.ex {
	position: relative; background: var(--carte); border: 1px solid var(--trait);
	border-left: 4px solid var(--accent); border-radius: 12px;
	padding: 14px 16px; margin: 18px 0;
}
.ex.reussi { border-left-color: var(--ok); }
.ex-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ex-badge {
	font-size: 12px; font-weight: 700; color: var(--accent-f);
	background: #e8f0fa; border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}
.ex.reussi .ex-badge { color: var(--ok); background: #e6f4ec; }
.ex-genre { font-size: 12.5px; color: var(--gris); flex: 1; }
.ex-coche { display: none; font-size: 12.5px; font-weight: 700; color: var(--ok); white-space: nowrap; }
.ex.reussi .ex-coche { display: inline; }
.ex-enonce { font-size: 15.5px; margin-bottom: 4px; }
.ex-label { display: block; font-size: 13.5px; font-weight: 600; margin: 10px 0 6px; }
textarea.ex-reponse {
	display: block; width: 100%; border: 1px solid #c3c9d1; border-radius: 10px;
	padding: 10px 12px; font-size: 16px; background: #fff; color: inherit; resize: none;
	font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ex-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ex-note-entree { font-size: 13.5px; color: var(--gris); margin-top: 6px; }

.ex-verdict { margin-top: 10px; padding: 10px 13px; border-radius: 10px; font-size: 14.5px; line-height: 1.5; }
.ex-verdict.juste { background: #e6f4ec; color: var(--ok); border: 1px solid #b9dfc9; }
.ex-verdict.faux  { background: #fdf1f0; color: #8c3630; border: 1px solid #f3c9c5; }
.ex-verdict code { background: rgba(0,0,0,.06); border-radius: 5px; padding: 1px 5px; white-space: pre-wrap; }
.ex-essai { margin: 4px 0; font-weight: 600; }
.ex-essai .ex-detail { display: block; font-weight: 400; margin: 3px 0 6px; }

/* QCM d'exercice : Vrai/Faux à choisir */
.ex-props { list-style: none; margin: 12px 0 0; padding: 0; }
.ex-props > li {
	border: 1px solid var(--trait); border-radius: 10px; background: #fbfcfd;
	padding: 11px 13px; margin-bottom: 8px;
	display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
}
.ex-props > li.juste { border-color: #b9dfc9; background: #f2faf5; }
.ex-props > li.faux  { border-color: #f3c4c0; background: #fdf5f4; }
.ex-ptexte { flex: 1; font-size: 15px; }
.ex-justif { margin-top: 6px; font-size: 13.5px; color: var(--gris); }
.ex-vf { display: flex; gap: 0; flex: 0 0 auto; border: 1px solid #c3c9d1; border-radius: 9px; overflow: hidden; }
.ex-vf button {
	border: 0; background: #fff; color: var(--gris-clair); padding: 8px 12px;
	font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ex-vf button + button { border-left: 1px solid #e3e7ec; }
.ex-vf button.choisi[data-v="1"] { background: #e6f4ec; color: var(--ok); }
.ex-vf button.choisi[data-v="0"] { background: #fdecea; color: var(--rate); }

/* code à trous */
.trou-c {
	display: inline-block; margin: 0 2px; padding: 2px 7px;
	border: 1px dashed #6f92b8; border-radius: 7px;
	background: #22303f; color: #ffd97a; caret-color: #ffd97a;
	font: inherit; font-size: 13.5px; text-align: center; vertical-align: baseline;
}
.trou-c:focus { outline: none; border-style: solid; border-color: #7fb2e8; }
.trou-c.bon     { border: 1px solid #5cb884; color: #a1e3bc; background: #17281f; }
.trou-c.mauvais { border: 1px solid #d9776f; color: #ffb4ad; background: #2b1b1a; }

.ex-aide { margin-top: 10px; font-size: 14.5px; }
.ex-aide summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.ex-aide > div { margin-top: 8px; color: var(--gris); }
.ex-aide.solution summary { color: var(--presque); }

/* ---------- la page du chapitre ---------- */
.prog-suivi { display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; }
.prog-suivi .progression { flex: 1; margin: 0; }
.prog-suivi .chiffre { font-size: 13px; font-weight: 700; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }

.objectifs { margin: 14px 0 6px; }
.objectifs ul { margin: 6px 0 0; padding-left: 20px; }
.objectifs li { margin-bottom: 4px; }

#prog-fete {
	background: #e6f4ec; border: 1px solid #b9dfc9; color: var(--ok);
	border-radius: 12px; padding: 16px; text-align: center;
	font-weight: 600; margin: 18px 0;
}

.prog-nav { display: flex; gap: 10px; margin: 22px 0 8px; }
.prog-nav .btn { flex: 1; }

/* la liste des chapitres */
.rang .pastille { margin-left: 4px; }
.rang.verrouille { opacity: .55; }

/* ---------- le code dans les fiches de révision ---------- */
.face code, .tc-rendu code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .85em; background: #e9edf2; border-radius: 6px; padding: 1px 6px;
}
.face pre.codebloc, .tc-rendu pre.codebloc {
	margin: 10px 0; padding: 12px 14px; border-radius: 10px; overflow-x: auto;
	background: var(--code-fond); color: var(--code-texte);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px; line-height: 1.6; font-weight: 400; white-space: pre;
}
.propositions li code { font-size: .85em; background: #e9edf2; border-radius: 5px; padding: 1px 5px;
	font-family: ui-monospace, Menlo, Consolas, monospace; }

/* impression du cours */
@media print {
	.cx-barre, .cx-clavier, .ex-actions, .prog-nav { display: none !important; }
	.cx-cadre, .cx-code { background: #fff !important; color: #000 !important; border-color: #999; }
}

/* ============================================================
   L'onglet Planning : la méthode des J, cours par cours.
   ============================================================ */
.aide-planning { color: var(--gris); font-size: 13.5px; margin: -6px 0 16px; }

h2.avec-lien { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lien-auj { font-size: 13px; font-weight: 400; white-space: nowrap; }

.sous-titre {
	margin: 18px 0 4px; font-size: 12.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; color: var(--gris);
}
.carte .sous-titre:first-child { margin-top: 0; }
.rien { color: var(--gris-clair); font-size: 14px; margin: 6px 0 2px; }

/* ---- une ligne à relire ---- */
.relire {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 0; border-bottom: 1px solid var(--trait);
}
.relire:last-of-type { border-bottom: 0; }
.relire form { margin: 2px 0 0; flex: 0 0 auto; }
.coche {
	width: 34px; height: 34px; border-radius: 50%;
	border: 2px solid #c3c9d1; background: #fff; color: transparent;
	font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.coche.fait { background: var(--ok); border-color: var(--ok); color: #fff; }
.relire.faite .titre { color: var(--gris); text-decoration: line-through; }

.j-badge {
	flex: 0 0 auto; margin-top: 8px;
	background: #e8f0fa; color: var(--accent-f);
	border-radius: 8px; padding: 2px 7px; font-size: 12px; font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.j-badge.avenir { background: #eef1f5; color: var(--gris); }
.j-badge.j-cours { background: var(--accent); color: #fff; }
.ag-cours .j-badge, .cours-jour .j-badge { margin-top: 0; }

.relire .corps { flex: 1; min-width: 0; }
.relire .titre { display: block; font-weight: 600; font-size: 15px; margin-top: 5px; }
.relire .detail { display: block; color: var(--gris); font-size: 12.5px; margin-top: 2px; }
.relire .retard-txt { color: var(--rate); font-weight: 600; }
.relire .boutons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.ue {
	display: inline-block; color: #fff; border-radius: 6px;
	padding: 1px 6px; font-size: 11px; font-weight: 700;
	vertical-align: 2px; margin-right: 3px;
}

/* ---- les cours en salle du jour ---- */
.cours-jour {
	display: flex; gap: 12px; align-items: baseline;
	padding: 9px 0; border-bottom: 1px solid var(--trait); font-size: 14.5px;
}
.cours-jour:last-of-type { border-bottom: 0; }
.cours-jour .heures {
	flex: 0 0 auto; font-weight: 700; font-size: 13px; color: var(--accent-f);
	font-variant-numeric: tabular-nums;
}
.cours-jour .corps { flex: 1; min-width: 0; }
.cours-jour .modif { flex: 0 0 auto; font-size: 13px; }

/* ---- le calendrier ---- */
.cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-mois { font-weight: 700; font-size: 16px; }
.cal-nav {
	width: 38px; height: 38px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--trait); background: var(--carte);
	color: var(--encre); text-decoration: none; font-size: 20px; line-height: 1;
}
.cal-nav:active { background: #eef1f5; }

.calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-entete { text-align: center; font-size: 11px; font-weight: 600; color: var(--gris-clair); padding-bottom: 2px; }
.cal-jour {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	min-height: 46px; padding: 4px 1px; border-radius: 9px;
	background: var(--carte); border: 1px solid var(--trait);
	text-decoration: none; color: inherit;
}
.cal-jour .num { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.cal-jour.hors { opacity: .38; }
.cal-jour.auj { border-color: var(--accent); }
.cal-jour.auj .num { color: var(--accent); }
.cal-jour.choisi { background: #e8f0fa; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-jour .points { display: flex; gap: 3px; min-height: 6px; }

.pt { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.pt-cours  { background: var(--accent); }
.pt-afaire { background: var(--presque); }
.pt-retard { background: var(--rate); }
.pt-fait   { background: var(--ok); }

.cal-legende {
	display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
	margin: 10px 0 0; font-size: 12px; color: var(--gris);
}
.cal-legende .leg { display: inline-flex; align-items: center; gap: 5px; }

/* ---- l'agenda du mois, jour par jour ---- */
.agenda .ag-jour { padding: 10px 0; border-bottom: 1px solid var(--trait); }
.agenda .ag-jour:first-child { padding-top: 0; }
.agenda .ag-jour:last-child { border-bottom: 0; padding-bottom: 0; }
.ag-date {
	display: inline-block; font-weight: 700; font-size: 13.5px;
	color: var(--encre); text-decoration: none; margin-bottom: 4px;
}
.ag-date:hover { color: var(--accent); }
.ag-jour.auj .ag-date { color: var(--accent); }
.ag-cours {
	font-size: 13px; color: var(--accent-f); background: #e8f0fa;
	border-radius: 8px; padding: 4px 10px; margin: 3px 0;
}
.ag-ligne { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14.5px; }
.ag-ligne .j-badge { margin-top: 0; }
.ag-quoi { flex: 1; min-width: 0; }
.ag-pages { color: var(--gris); font-size: 12.5px; white-space: nowrap; }
.ag-ligne.faite .ag-quoi { color: var(--gris); text-decoration: line-through; }
.ag-etat.ok { color: var(--ok); font-weight: 700; }
.ag-etat.tard { color: var(--rate); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* ---- l'édition d'un cours : les rangées de parties ---- */
.partie { position: relative; padding-top: 12px; }
.partie label:first-of-type { margin-top: 0; padding-right: 36px; }
.partie-sup {
	position: absolute; top: 8px; right: 8px; z-index: 1;
	width: 32px; height: 32px; border: 0; border-radius: 9px;
	background: none; color: var(--gris-clair);
	font: inherit; font-size: 21px; line-height: 1; cursor: pointer;
}
.partie-sup:hover { background: #fdecea; color: var(--rate); }

@media (min-width: 800px) {
	.cal-jour { min-height: 56px; }
	.cal-jour .num { font-size: 15px; }
	.cal-jour:hover { border-color: var(--accent); }
}

/* ============================================================
   Les caches sur un schéma : les mots masqués côté question,
   le schéma entier côté réponse.
   ============================================================ */
.schema-cache { position: relative; display: inline-block; max-width: 100%; margin-top: 14px; }
.schema-cache img.schema { margin-top: 0; }

/* un schéma est toujours posé sur du blanc, même s'il est transparent */
img.schema, .masques-scene img { background: #fff; }

.cache {
	position: absolute;
	display: flex; align-items: center; justify-content: center;
	background: #dce5ef;
	border: 1.5px solid var(--accent); border-radius: 6px;
	color: var(--accent-f); font-size: 12px; font-weight: 700; line-height: 1;
	font-variant-numeric: tabular-nums; overflow: hidden;
	box-sizing: border-box;
}

/* ---- l'outil de pose, sous « Schéma rattaché » ---- */
.masques-outil { margin-top: 14px; }
.masques-outil > label { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 6px; }
.masques-scene {
	position: relative; display: inline-block; max-width: 100%;
	border: 1px solid var(--trait); border-radius: 10px; overflow: hidden;
	touch-action: none; cursor: crosshair;
	-webkit-user-select: none; user-select: none;
}
.masques-scene img { display: block; max-width: 100%; height: auto; }
.masques-scene .cache { cursor: pointer; }
.masques-scene .cache:hover { background: #f3d8d5; border-color: var(--rate); color: var(--rate); }
.masques-scene .cache.fantome {
	background: rgba(37, 99, 168, .18); border-style: dashed;
	color: transparent; cursor: crosshair; pointer-events: none;
}

/* ============================================================
   L'onglet Mémos : les moyens mnémotechniques, et leur bloc
   sous la réponse d'une fiche. Teinte or, comme la médaille :
   le truc se repère d'un coup d'œil.
   ============================================================ */
.memos { margin-top: 16px; display: grid; gap: 10px; }
/* L'or n'est qu'un accent (liseré, titre, badge) : le corps du mémo
   garde le fond et l'encre des cartes — lisible dans les deux thèmes. */
.memo {
	background: var(--carte); border: 1px solid var(--trait);
	border-left: 4px solid var(--medaille); border-radius: 12px;
	padding: 12px 14px; font-size: 16px; line-height: 1.55;
}
.memo-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.memo-ico { color: var(--medaille); font-size: 14px; }
.memo-titre { font-weight: 700; font-size: 15px; color: #8a6d1f; }
.memo-type {
	margin-left: auto; font-size: 11px; font-weight: 600; color: #8a6d1f;
	background: rgba(200, 151, 27, .14); border-radius: 20px; padding: 2px 9px;
	text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.memo-texte { margin-top: 6px; }
.memo-image {
	display: block; max-width: 100%; max-height: 340px;
	border-radius: 8px; margin-top: 10px; background: #fff;
}

/* la rangée « mémos liés » dans l'éditeur et la relecture d'une fiche */
.memos-lies {
	display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap;
	margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--trait);
	font-size: 14px;
}
.memos-lies .etiquette { font-weight: 600; font-size: 13.5px; }
.memos-lies a { white-space: nowrap; }
.pastille.p-memo { background: #f7efd8; color: #8a6d1f; }

/* En révision : les mémos en puces sous la réponse. Le survol (ou le
   premier appui sur l'iPhone) ouvre le mémo dans un panneau fixé en
   bas de l'écran — jamais coupé, quel que soit sa longueur ; le clic
   sur la puce ouvre sa modification. */
.memos-survol {
	margin-top: 14px;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.memo-puce {
	display: inline-flex; align-items: center; gap: 6px;
	background: #f7efd8; color: #8a6d1f; border: 1px solid #eddfba;
	border-radius: 20px; padding: 5px 12px;
	font-size: 13.5px; font-weight: 600; text-decoration: none;
	line-height: 1.3;
}
.memo-puce .mp-ico { font-size: 12px; color: var(--medaille); }
.memo-puce:hover, .memo-puce:focus-visible { border-color: var(--medaille); }
.memo-pop {
	display: none; position: fixed; left: 0; right: 0; bottom: 0;
	z-index: 60; padding: 0 10px calc(10px + var(--bas));
	cursor: default;
	/* le panneau vit dans le lien-puce doré : on lui rend l'encre
	   normale, sinon tout son texte hérite de l'or de la puce */
	color: var(--encre); font-weight: 400;
}
.memo-puce:hover .memo-pop, .memo-puce:focus .memo-pop,
.memo-puce:focus-within .memo-pop, .memo-puce.ouvert .memo-pop { display: block; }
.memo-pop .memos { margin: 0 auto; max-width: 760px; }
.memo-pop .memo {
	font-size: 15.5px; line-height: 1.55;
	max-height: 62vh; overflow-y: auto;   /* un mémo-fleuve défile dans le panneau */
	box-shadow: 0 -10px 44px rgba(29, 39, 51, .35);
}

/* l'entrée vers le cours des méthodes, mise en avant dans l'onglet */
.rang.cours-memoire { border-color: #e3d3a3; background: #fdf9ee; }
.rang.cours-memoire:hover { border-color: var(--medaille); }

/* Les sections d'une page longue (les Réglages) : une rangée de
   boutons, celui qui est ouvert en plein. */
.sous-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 18px; }

/* ============================================================
   L'importance des fiches : ★★★ Essentiel, ★★ Normal (le cas
   courant, qui ne s'affiche pas pour ne pas faire de bruit),
   ★ Complément — en pause, hors de la séance du jour.
   ============================================================ */
/* Les deux paquets d'un cours : le socle (calme) et les pièges (vif). */
.btn.paq-socle   { color: var(--accent-f); border-color: #c3d7ee; }
.btn.paq-details { color: #9a5a22; border-color: #e6cdb6; }
.btn.paq-autres  { color: var(--gris); border-color: var(--trait); }
.p-paquet.socle   { background: #e8f0fa; color: var(--accent-f); }
.p-paquet.details { background: #f7ece4; color: #9a5a22; }
 .p-paquet.autres  { background: #eef1f5; color: var(--gris); }

.p-niveau.n3 { background: #fdf3dc; color: #8a6d1f; }
.p-niveau.n1 { background: #eef1f5; color: var(--gris); }

/* Les trois crans se reconnaissent à la couleur avant même d'être lus :
   ambre pour l'essentiel, bleu pour l'ordinaire, gris pour la pause. */
.btn.niv.n3 { color: #8a6d1f; border-color: #e3cf8f; }
.btn.niv.n1 { color: var(--gris); border-color: var(--trait); }
.btn.niv.n3.niv-choisi, .importance .niv-choisi.n3 {
	background: var(--medaille); border-color: var(--medaille); color: #fff;
}
.importance .niv-choisi.n2 { background: var(--accent); border-color: var(--accent); color: #fff; }
.importance .niv-choisi.n1 { background: var(--gris); border-color: var(--gris); color: #fff; }

/* la ligne au-dessus de la liste : filtrer, et ouvrir le réglage en lot */
.lot-tete { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.lot-filtres { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.lot-outils { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }   /* toujours à droite */

/* une fiche de la liste, avec sa case à cocher quand le mode est ouvert */
.rang-lot { display: flex; align-items: center; gap: 10px; }
.rang-lot .rang { flex: 1; min-width: 0; }
.lot-case { display: none; flex: 0 0 auto; width: 22px; height: 22px; margin: 0; }
.lot-actif .lot-case { display: block; }
.lot-actif .rang { cursor: pointer; }
.lot-actif .rang .chevron { visibility: hidden; }

/* la barre d'action, collée en haut de la liste pendant le réglage */
.lot-barre {
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
	position: sticky; top: 0; z-index: 5;
	background: var(--carte); border: 1px solid var(--trait);
	border-radius: 12px; padding: 8px 10px; margin-bottom: 10px;
}
.lot-barre[hidden] { display: none; }   /* display:flex écrase l'attribut, il faut le dire */
.lot-barre .lot-compte { color: var(--gris); font-size: 13px; flex: 1; min-width: 120px; }

/* Sous la réponse, pendant la séance : deux rangées de trois. Sur le
   téléphone, chacune prend toute la largeur en trois colonnes égales —
   des cibles larges et hautes, qu'on vise du pouce sans se tromper.
   Les libellés s'y raccourcissent (.court) et s'y empilent (.et/.nom). */
.outils-carte,
.importance {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 8px; margin: 12px 0 0; align-items: stretch;
}
.outils-carte .btn,
.importance .btn {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 1px; width: 100%; min-height: 50px;
	padding: 6px 4px; font-size: 12.5px; line-height: 1.2; text-align: center;
}
.importance .lib,
.importance .mot { grid-column: 1 / -1; text-align: center; color: var(--gris); font-size: 13px; }
.importance .lib { margin-bottom: -3px; }
.outils-carte .long { display: none; }

@media (min-width: 800px) {
	/* à la souris, une simple rangée centrée suffit */
	.outils-carte,
	.importance {
		display: flex; align-items: center; justify-content: center;
		gap: 6px; flex-wrap: wrap;
	}
	.outils-carte .btn,
	.importance .btn {
		display: inline-flex; flex-direction: row; gap: 5px;
		width: auto; min-height: 0; padding: 7px 12px; font-size: 13px;
	}
	.outils-carte .long { display: inline; }
	.outils-carte .court { display: none; }
	.importance .mot { flex: 1 0 100%; }
}

/* La capacité mesurée : une ligne par palier de volume, la barre
   donnant le taux de bonnes réponses. Le palier d'après le
   décrochage se ternit — c'est là qu'il ne faut plus aller. */
.paliers { display: flex; flex-direction: column; gap: 6px; }
.palier { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.palier .volume  { color: var(--gris); flex: 0 0 92px; }
.palier .pal-barre { flex: 1; height: 10px; background: #eef1f5; border-radius: 6px; overflow: hidden; }
.palier .pal-barre span { display: block; height: 10px; background: var(--ok); border-radius: 6px; }
.palier .taux    { flex: 0 0 38px; text-align: right; font-variant-numeric: tabular-nums; }
.palier .combien { color: var(--gris-clair); flex: 0 0 34px; text-align: right; }
.palier.au-dela .pal-barre span { background: var(--rate); }
.palier.au-dela .volume,
.palier.au-dela .taux { color: var(--rate); }

/* Statistiques (le taux par chapitre) : une ligne par chapitre, la barre donnant le taux de
   bonnes réponses. Vert au-dessus de 80 %, ambre entre 60 et 80,
   rouge en dessous — la couleur suffit à repérer où travailler. */
.chapitre-taux {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px;
	background: var(--carte); font-size: 13px;
}
.chapitre-taux .titre {
	flex: 1 1 220px; min-width: 0; font-weight: 600; font-size: 14px;
	color: inherit; text-decoration: none;
}
.chapitre-taux .ue-code {
	background: #eef1f5; color: var(--gris); border-radius: 6px;
	padding: 1px 6px; font-size: 11px; margin-right: 4px;
}
/* La ligne du titre, avec le bouton « Réviser » juste à sa droite ; la
   mesure (barre, taux, comptes, temps) vient sur la ligne du dessous. */
.chapitre-taux .tete   { flex: 1 1 100%; display: flex; align-items: center; gap: 12px; }
.chapitre-taux .tete .titre { flex: 0 1 auto; }
.chapitre-taux .mesure { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chapitre-taux .pal-barre { flex: 1 1 120px; height: 10px; background: #eef1f5; border-radius: 6px; overflow: hidden; }
.chapitre-taux .pal-barre span { display: block; height: 10px; border-radius: 6px; background: var(--ok); }
.chapitre-taux .taux { flex: 0 0 42px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.chapitre-taux .combien { flex: 0 0 auto; margin-left: auto; white-space: nowrap; text-align: right; color: var(--gris-clair); }
.chapitre-taux .temps   { flex: 0 0 auto; white-space: nowrap; color: var(--gris-clair); }
.chapitre-taux.moyen  .pal-barre span { background: var(--presque); }
.chapitre-taux.moyen  .taux { color: var(--presque); }
.chapitre-taux.faible .pal-barre span { background: var(--rate); }
.chapitre-taux.faible .taux { color: var(--rate); }
.chapitre-taux.ok     .taux { color: var(--ok); }

/* Sous le chapitre, son détail par paquet — socle, détails et pièges,
   autres — : une petite ligne chacun, même barre, même code couleur,
   et la ligne mène à la révision de ce paquet. Un paquet trop peu vu
   n'a ni barre ni taux, juste son compte. */
.chapitre-taux .paquets {
	flex: 1 1 100%; display: flex; flex-direction: column; gap: 5px;
	margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--trait);
}
.chapitre-taux .paquet {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	color: inherit; text-decoration: none; font-size: 12px;
}
.chapitre-taux .paquet .ico { flex: 0 0 auto; color: var(--gris); }
/* bases courtes : sur un iPhone, nom, barre, taux et compte tiennent sur une ligne */
.chapitre-taux .paquet .nom { flex: 1 1 80px; min-width: 0; color: var(--gris); }
.chapitre-taux .paquet:hover .nom { color: var(--accent); text-decoration: underline; }
.chapitre-taux .paquet .pal-barre { flex: 1 1 60px; height: 6px; }
.chapitre-taux .paquet .pal-barre span { height: 6px; }
.chapitre-taux .paquet .peu { flex: 1 1 160px; text-align: right; color: var(--gris-clair); }
.chapitre-taux .paquet.ok     .pal-barre span { background: var(--ok); }
.chapitre-taux .paquet.ok     .taux { color: var(--ok); }
.chapitre-taux .paquet.moyen  .pal-barre span { background: var(--presque); }
.chapitre-taux .paquet.moyen  .taux { color: var(--presque); }
.chapitre-taux .paquet.faible .pal-barre span { background: var(--rate); }
.chapitre-taux .paquet.faible .taux { color: var(--rate); }

/* ============================================================
   Thème sombre. Le bouton ☾/☀ vit dans les barres d'en-tête ;
   le choix est retenu par le navigateur (localStorage) et posé
   en data-theme sur <html> avant la feuille de style (voir
   tete_theme() dans inc/fonctions.php). Les variables font le
   gros du travail ; le reste reprend une à une les couleurs
   posées en dur pour le clair.
   ============================================================ */
.btn-theme {
	background: none; border: 0; cursor: pointer; padding: 6px 8px;
	font: inherit; font-size: 17px; line-height: 1; color: #98a3b0; flex: 0 0 auto;
}
.btn-theme:hover { color: #fff; }
.btn-theme .th-s { display: none; }
html[data-theme="sombre"] .btn-theme .th-c { display: none; }
html[data-theme="sombre"] .btn-theme .th-s { display: inline; }

/* ---------- Exercices (onglet de Tim) ---------- */
.ex-section { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; }
.ex-section .ico { color: var(--gris); font-size: 15px; }
.rang-lot.exo { margin-bottom: 8px; }
.rang-lot.exo .rang { margin-bottom: 0; }
.rang-lot.exo .rang .titre { font-weight: 500; font-size: 15px; line-height: 1.35; }
.rang-lot.exo.fait .rang .titre { color: var(--gris); }
span.rang.verrouille { cursor: default; }
.ex-fait {
	border: 1px solid #c3c9d1; background: var(--carte); color: var(--gris);
	border-radius: 20px; padding: 7px 12px; font: inherit; font-size: 13.5px; font-weight: 500;
	white-space: nowrap; cursor: pointer; min-height: 0;
}
.ex-fait:hover { background: #eceff3; }
.ex-fait.oui { background: var(--ok); border-color: var(--ok); color: #fff; }
.ex-fait.oui:hover { background: #12613d; }
.ex-fait:disabled { opacity: .6; cursor: wait; }
.ex-source { color: var(--gris); font-size: 13px; margin-top: 20px; word-break: break-all; }

/* ---------- Exercices en ligne (exercice_ligne.php, chez Tim) ---------- */
.exl-pastille {
	display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent);
	border-radius: 20px; padding: 1px 7px; margin-right: 3px; vertical-align: 1px; white-space: nowrap;
}
.exl {
	background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid var(--trait);
	border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; scroll-margin-top: 80px;
}
.exl.entame { border-left-color: var(--presque); }
.exl.reussi { border-left-color: var(--ok); }
.exl-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.exl-badge {
	font-size: 12.5px; font-weight: 700; color: var(--accent); background: #e8f0fa;
	border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}
.exl.reussi .exl-badge { color: var(--ok); background: #e6f4ec; }
.exl-titre { flex: 1; min-width: 0; font-size: 13px; color: var(--gris); }
.exl-etat { font-size: 12.5px; font-weight: 600; color: var(--gris); white-space: nowrap; }
.exl.entame .exl-etat { color: var(--presque); }
.exl.reussi .exl-etat { color: var(--ok); }
.exl-enonce { font-size: 15.5px; line-height: 1.65; }
.exl-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.exl-nb { font-size: 13px; color: var(--gris); }
.exl-etapes { list-style: none; margin: 12px 0 0; padding: 0; }
.exl-etape { border-top: 1px dashed var(--trait); padding: 12px 0 4px; }
.exl-etape-titre {
	font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--gris); margin-bottom: 6px;
}
.exl-etape.juste .exl-etape-titre { color: var(--ok); }
.exl-etape.juste .exl-etape-titre::after { content: ' ✓'; }
.exl-etape.faux .exl-etape-titre { color: var(--rate); }
.exl-etape.faux .exl-etape-titre::after { content: ' ✗'; }
.exl-question, .exl-texte, .exl-consigne { font-size: 15px; line-height: 1.8; }
.exl-options { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.exl-option {
	display: block; width: 100%; text-align: left; font: inherit; font-size: 15px; line-height: 1.6;
	padding: 10px 12px; border: 1px solid #c3c9d1; border-radius: 10px;
	background: var(--carte); color: var(--encre); cursor: pointer;
}
.exl-option:not(:disabled):hover { background: #f3f5f8; }
.exl-option:disabled { cursor: default; color: var(--encre); }
.exl-option.bonne  { border-color: #8fcaa9; background: #f2faf5; }
.exl-option.fausse { border-color: #eeb2ac; background: #fdf5f4; }
.exl-option.bonne::before  { content: '✓ '; color: var(--ok); font-weight: 700; }
.exl-option.fausse::before { content: '✗ '; color: var(--rate); font-weight: 700; }
input.exl-trou {
	font: inherit; font-size: 15px; width: auto; min-width: 0; margin: 2px 3px; padding: 2px 6px;
	border: 1px solid #c3c9d1; border-radius: 7px; background: var(--carte); color: var(--encre);
	text-align: center;
}
input.exl-trou:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input.exl-trou.bon     { border-color: var(--ok);   background: #f2faf5; }
input.exl-trou.mauvais { border-color: var(--rate); background: #fdf5f4; }
.exl-attendu { font-size: 14px; font-weight: 700; color: var(--ok); margin-right: 4px; white-space: nowrap; }
.exl-clavier { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.exl-clavier button {
	font: inherit; font-size: 15px; min-width: 36px; padding: 4px 8px; border: 1px solid #c3c9d1;
	border-radius: 8px; background: var(--carte); color: var(--encre); cursor: pointer;
}
.exl-verdict { margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.exl-verdict.juste { background: #e6f4ec; color: var(--ok); border: 1px solid #b9dfc9; }
.exl-verdict.faux  { background: #fdf1f0; color: #8c3630; border: 1px solid #f3c9c5; }
.exl-explication { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--gris); }
.exl-corrige {
	margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--trait);
	background: #f6f8fa; font-size: 15px; line-height: 1.8;
}
.exl-auto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; font-weight: 600; }
.exl-fin { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #e8f0fa; }
.exl-fin.parfait { background: #e6f4ec; }
.exl-conclusion { font-size: 15px; line-height: 1.75; }
.exl-score { font-weight: 700; margin-top: 6px; font-size: 14.5px; }
.exl-fin.parfait .exl-score { color: var(--ok); }

html[data-theme="sombre"] {
	color-scheme: dark;   /* cases, menus et ascenseurs suivent */
	--encre:      #e6ebf1;
	--gris:       #98a3af;
	--gris-clair: #6a7480;
	--fond:       #10161d;
	--carte:      #1a2330;
	--trait:      #2c3644;
	--accent:     #7ab0e4;
	--accent-f:   #9cc3ec;
	--ok:         #52c08b;
	--presque:    #d9a53f;
	--rate:       #e8837b;
	--medaille:   #d9b14e;
	--code-fond:  #101823;
	--code-bord:  #263442;
}

/* les barres restent sombres, un cran à part du fond */
html[data-theme="sombre"] .barre,
html[data-theme="sombre"] .seance-haut,
html[data-theme="sombre"] .entete-relecture { background: #151d27; }
html[data-theme="sombre"] .onglets { background: rgba(16, 22, 29, .96); }

/* les aplats gris clair deviennent des aplats de nuit */
html[data-theme="sombre"] .rang:active,
html[data-theme="sombre"] .cal-nav:active { background: #232e3d; }
html[data-theme="sombre"] .rang .compteur { background: #253141; }
html[data-theme="sombre"] .progression { background: #253141; }
html[data-theme="sombre"] .mini .l { background: #2c3644; }
html[data-theme="sombre"] .mini-rv .mini-face.envers .l { background: rgba(255, 255, 255, .16); }

html[data-theme="sombre"] .flash.ok   { background: #14291f; color: #7fd7a8; border-color: #245a3e; }
html[data-theme="sombre"] .flash.err  { background: #33201f; color: #f1a49e; border-color: #5f312e; }
html[data-theme="sombre"] .flash.info { background: #16283e; color: #9cc3ec; border-color: #2c4666; }

/* boutons : des fonds pleins un peu plus profonds, le texte blanc reste lisible */
html[data-theme="sombre"] .btn { background: #2e69ad; }
html[data-theme="sombre"] .btn:hover { background: #3a7ac2; }
html[data-theme="sombre"] .btn.second { background: var(--carte); color: var(--encre); border-color: #3b4757; }
html[data-theme="sombre"] .btn.second:hover { background: #232e3d; }
html[data-theme="sombre"] .btn.danger,
html[data-theme="sombre"] .btn.rate { background: #b3453e; }
html[data-theme="sombre"] .btn.presque { background: #9d7418; }
html[data-theme="sombre"] .btn.su { background: #1f8a5c; }
html[data-theme="sombre"] .rang .compteur.du { background: #2e69ad; color: #fff; }

/* champs de saisie */
html[data-theme="sombre"] form.fiche input, html[data-theme="sombre"] form.fiche select,
html[data-theme="sombre"] form.fiche textarea,
html[data-theme="sombre"] form.ligne-edit input, html[data-theme="sombre"] form.ligne-edit select,
html[data-theme="sombre"] .type-carte textarea.tc-champ,
html[data-theme="sombre"] .type-carte input.tc-ligne-champ,
html[data-theme="sombre"] .type-carte .riche.tc-champ,
html[data-theme="sombre"] textarea.cx-entree,
html[data-theme="sombre"] textarea.ex-reponse { background: #121a26; border-color: #3b4757; }

/* pastilles et badges */
html[data-theme="sombre"] .btn.paq-socle   { color: var(--accent);  border-color: #2b3a4d; }
html[data-theme="sombre"] .btn.paq-details { color: #e0a976; border-color: #4a3423; }
html[data-theme="sombre"] .btn.paq-autres  { color: var(--gris); border-color: #2c3644; }
html[data-theme="sombre"] .p-paquet.socle   { background: #1b2635; color: var(--accent); }
html[data-theme="sombre"] .p-paquet.details { background: #2f2317; color: #e0a976; }
html[data-theme="sombre"] .p-paquet.autres  { background: #232d3a; color: var(--gris); }
html[data-theme="sombre"] .p-niveau.n3 { background: #2e2712; color: #e0c476; }
html[data-theme="sombre"] .p-niveau.n1 { background: #232d3a; color: var(--gris); }
/* Le cran choisi passe en couleur pleine. Les règles sombres de
   .btn.second l'emportant sur les claires, on redit tout ici. */
html[data-theme="sombre"] .btn.niv.n3 { color: #e0c476; border-color: #4a3f1c; }
html[data-theme="sombre"] .btn.niv.n1 { color: var(--gris); }
html[data-theme="sombre"] .btn.niv.n3.niv-choisi,
html[data-theme="sombre"] .importance .niv-choisi.n3 {
	background: var(--medaille); border-color: var(--medaille); color: #221a05;
}
html[data-theme="sombre"] .importance .niv-choisi.n2 {
	background: var(--accent); border-color: var(--accent); color: #10161d;
}
html[data-theme="sombre"] .importance .niv-choisi.n1 {
	background: var(--gris); border-color: var(--gris); color: #10161d;
}
html[data-theme="sombre"] .lot-barre   { background: var(--carte); border-color: var(--trait); }
html[data-theme="sombre"] .palier .pal-barre { background: #253141; }
html[data-theme="sombre"] .chapitre-taux .pal-barre { background: #253141; }
html[data-theme="sombre"] .chapitre-taux .ue-code { background: #253141; }
html[data-theme="sombre"] .importance .niv-choisi { color: #10161d; }
html[data-theme="sombre"] .p-nouvelle  { background: #253141; }
html[data-theme="sombre"] .p-en_cours  { background: #16283e; }
html[data-theme="sombre"] .p-acquise   { background: #14291f; }
html[data-theme="sombre"] .p-suspendue { background: #33201f; }
html[data-theme="sombre"] .p-type      { background: #241f38; color: #b7a4e8; }
html[data-theme="sombre"] .pastille.p-memo { background: #2e2712; color: #e0c476; }

/* la séance et les pieds collants : le voile reprend le fond de nuit */
html[data-theme="sombre"] .pied-seance { background: linear-gradient(to top, var(--fond) 72%, rgba(16, 22, 29, 0)); }
html[data-theme="sombre"] .pied-fiche  { background: linear-gradient(to top, var(--fond) 75%, rgba(16, 22, 29, 0)); }
html[data-theme="sombre"] .pied-relecture { background: rgba(16, 22, 29, .97); }

/* QCM, mini-aperçus, bascules vrai/faux */
html[data-theme="sombre"] .propositions li, html[data-theme="sombre"] .ex-props > li,
html[data-theme="sombre"] .mini-rv .mini-face, html[data-theme="sombre"] .tc-face,
html[data-theme="sombre"] .tc-ligne, html[data-theme="sombre"] .bascule-vf .piste,
html[data-theme="sombre"] .tc-ajout, html[data-theme="sombre"] .tc-mini-btn,
html[data-theme="sombre"] .ex-vf button, html[data-theme="sombre"] .coche { background: #121a26; }
html[data-theme="sombre"] .propositions li.vrai, html[data-theme="sombre"] .ex-props > li.juste
	{ background: #14291f; border-color: #2b5741; }
html[data-theme="sombre"] .propositions li.faux, html[data-theme="sombre"] .ex-props > li.faux
	{ background: #2e1d1c; border-color: #5f312e; }
html[data-theme="sombre"] .bascule-vf .piste, html[data-theme="sombre"] .tc-ajout,
html[data-theme="sombre"] .tc-mini-btn, html[data-theme="sombre"] .ex-vf,
html[data-theme="sombre"] .coche, html[data-theme="sombre"] .tc-marque,
html[data-theme="sombre"] .riche-g { border-color: #3b4757; }
html[data-theme="sombre"] .ex-vf button + button { border-left-color: #2c3644; }
html[data-theme="sombre"] .bascule-vf input:checked ~ .piste .opt.v { background: #14291f; }
html[data-theme="sombre"] .bascule-vf input:not(:checked) ~ .piste .opt.f { background: #2e1d1c; }
html[data-theme="sombre"] .mini-ligne .puce.vrai { background: #14291f; }
html[data-theme="sombre"] .mini-ligne .puce.faux { background: #2e1d1c; }
html[data-theme="sombre"] .ex-vf button.choisi[data-v="1"] { background: #14291f; }
html[data-theme="sombre"] .ex-vf button.choisi[data-v="0"] { background: #2e1d1c; }
html[data-theme="sombre"] .tc-sup:hover, html[data-theme="sombre"] .partie-sup:hover
	{ background: #2e1d1c; }
html[data-theme="sombre"] .coche.fait { background: #1f8a5c; border-color: #1f8a5c; }

/* les quatre formes de fiche : voiles de nuit, teintes éclaircies */
html[data-theme="sombre"] .type-carte { --voile: #1b2939; --halo: rgba(122, 176, 228, .18); }
html[data-theme="sombre"] .type-carte.t-qcm   { --teinte: #a884d8; --voile: #251d38; --halo: rgba(168, 132, 216, .18); }
html[data-theme="sombre"] .type-carte.t-trous { --teinte: #3fb3a9; --voile: #122a28; --halo: rgba(63, 179, 169, .18); }
html[data-theme="sombre"] .type-carte.t-liste { --teinte: #dd8f3d; --voile: #2e2114; --halo: rgba(221, 143, 61, .18); }
html[data-theme="sombre"] .tc-alerte { background: #2b2410; color: #dfc06a; border-color: #4d3f1c; }

/* le code en pastille dans les leçons et les fiches */
html[data-theme="sombre"] .lecon code, html[data-theme="sombre"] .ex-enonce code,
html[data-theme="sombre"] .note-c code, html[data-theme="sombre"] .ex-note-entree code,
html[data-theme="sombre"] .face code, html[data-theme="sombre"] .tc-rendu code,
html[data-theme="sombre"] .propositions li code { background: #28303c; }

/* les encadrés du cours de C */
html[data-theme="sombre"] .note-c.piege  { background: #2e1d1c; border-color: #5f312e; }
html[data-theme="sombre"] .note-c.astuce { background: #16283e; border-color: #2c4666; }
html[data-theme="sombre"] .note-c.memo   { background: #122a27; border-color: #1f4d47; }
html[data-theme="sombre"] .note-c.memo .note-titre { color: #3fb3a9; }
html[data-theme="sombre"] .ex-badge { background: #16283e; }
html[data-theme="sombre"] .ex.reussi .ex-badge { background: #14291f; }
html[data-theme="sombre"] .ex-verdict.juste { background: #14291f; border-color: #2b5741; }
html[data-theme="sombre"] .ex-verdict.faux  { background: #2e1d1c; color: #f1a49e; border-color: #5f312e; }
html[data-theme="sombre"] .ex-verdict code { background: rgba(255, 255, 255, .08); }
html[data-theme="sombre"] #prog-fete { background: #14291f; border-color: #2b5741; }

/* le planning */
html[data-theme="sombre"] .j-badge { background: #16283e; }
html[data-theme="sombre"] .j-badge.avenir { background: #253141; }
html[data-theme="sombre"] .j-badge.j-cours { background: #2e69ad; color: #fff; }
html[data-theme="sombre"] .cal-jour.choisi { background: #16283e; }
html[data-theme="sombre"] .ag-cours { background: #16283e; }
html[data-theme="sombre"] .source mark { background: #4a3c12; }

/* les mémos : fond de carte normal, l'or reste un accent */
html[data-theme="sombre"] .memo { background: #1e2531; border-color: #2c3644; border-left-color: var(--medaille); }
html[data-theme="sombre"] .memo-titre { color: #e3c878; }
html[data-theme="sombre"] .memo-type { color: #dfc06a; background: rgba(217, 177, 78, .14); }
html[data-theme="sombre"] .memo-puce { background: #2e2712; color: #e0c476; border-color: #4a3c1c; }
html[data-theme="sombre"] .memo-pop .memo { box-shadow: 0 -10px 44px rgba(0, 0, 0, .65); }
html[data-theme="sombre"] .rang.cours-memoire { background: #241f12; border-color: #4a3c1c; }

/* la pastille d'aide du cours de C : la bulle garde le fond de carte */
html[data-theme="sombre"] .ac-bulle { box-shadow: 0 14px 44px rgba(0, 0, 0, .65); }

/* les exercices : la coche « fait » et la rangée faite */
html[data-theme="sombre"] .ex-fait { border-color: #3a4656; background: #1a2330; }
html[data-theme="sombre"] .ex-fait:hover { background: #243040; }
html[data-theme="sombre"] .ex-fait.oui { background: #2f8a5f; border-color: #2f8a5f; color: #fff; }
html[data-theme="sombre"] .ex-fait.oui:hover { background: #3a9d6e; }

/* les exercices en ligne */
html[data-theme="sombre"] .exl-badge { background: #16283e; }
html[data-theme="sombre"] .exl.reussi .exl-badge { background: #14291f; }
html[data-theme="sombre"] .exl-option,
html[data-theme="sombre"] input.exl-trou,
html[data-theme="sombre"] .exl-clavier button { border-color: #3a4656; background: #121a26; }
html[data-theme="sombre"] .exl-option:not(:disabled):hover { background: #1f2a38; }
html[data-theme="sombre"] .exl-option.bonne  { border-color: #2b5741; background: #14291f; }
html[data-theme="sombre"] .exl-option.fausse { border-color: #5f312e; background: #2e1d1c; }
html[data-theme="sombre"] input.exl-trou.bon     { border-color: var(--ok);   background: #14291f; }
html[data-theme="sombre"] input.exl-trou.mauvais { border-color: var(--rate); background: #2e1d1c; }
html[data-theme="sombre"] .exl-verdict.juste { background: #14291f; border-color: #2b5741; }
html[data-theme="sombre"] .exl-verdict.faux  { background: #2e1d1c; color: #f1a49e; border-color: #5f312e; }
html[data-theme="sombre"] .exl-corrige { background: #121a26; }
html[data-theme="sombre"] .exl-fin { background: #16283e; }
html[data-theme="sombre"] .exl-fin.parfait { background: #14291f; }

/* l'impression reste sur papier blanc, même en thème sombre */
@media print {
	html[data-theme="sombre"] {
		--encre: #1d2733; --gris: #6b7480; --gris-clair: #9aa2ac;
		--fond: #fff; --carte: #fff; --trait: #dfe3e8;
	}
}