/* Calcul mental : même vert que le reste du site */
#features.cm-section { padding-top: 1em; }
.cm-section [hidden] { display: none !important; }
.cm-carte { padding: 1.4em 1.4em 1.2em 1.4em; background: #fff; border: 2px solid #e5e5e5; border-radius: 1.2em; text-align: center; transition: background-color .35s ease, border-color .35s ease; }
.cm-carte h3 { margin: 0 0 .7em 0; color: #16855a; }
.cm-carte h3 .icon { margin-right: .3em; }
.cm-vide { margin: .4em 0; color: #878787; font-size: .9em; }

/* Mise en page : catalogue à gauche, panier et usage à droite */
.cm-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2em; align-items: start; max-width: 74em; margin: 0 auto; }
.cm-colonne { display: grid; gap: 1.2em; }
.cm-catalogue { text-align: left; }
.cm-catalogue h3, .cm-panier h3, .cm-usage h3 { text-align: center; }

/* Onglets (niveaux, usages) */
.cm-onglets { display: flex; justify-content: center; gap: .5em; flex-wrap: wrap; margin-bottom: 1em; }
.cm-onglet {
	font: inherit; padding: .45em 1.3em; border-radius: 2em; cursor: pointer; letter-spacing: 0; text-transform: none; text-shadow: none;
	-webkit-appearance: none; appearance: none; border: 2px solid #e5e5e5; color: #878787 !important; background: #fff !important;
	transition: background-color .25s, border-color .25s, color .25s;
}
.cm-onglet:hover { border-color: #5cc79a; color: #16855a !important; }
.cm-onglet.actif, .cm-onglet.actif:hover { background: #16855a !important; border-color: #16855a; color: #fff !important; }
.cm-onglet sup { font-size: .7em; }

/* Recherche */
.cm-recherche label { display: block; font-size: .85em; color: #878787; margin-bottom: .3em; }
.cm-recherche input, .cm-champ-opt input[type="text"], .cm-champ-opt select, .cm-reglages input {
	font: inherit; border: 2px solid #e5e5e5; border-radius: .6em; background: #fff; color: #555; box-sizing: border-box;
}
.cm-recherche input { width: 100%; padding: .5em .8em; }
.cm-recherche input:focus, .cm-champ-opt input:focus, .cm-champ-opt select:focus, .cm-reglages input:focus { outline: none; border-color: #16855a; }

/* Liste d'activités */
#liste h4 { margin: 1.1em 0 .4em 0; font-size: .85em; color: #16855a; letter-spacing: .08em; text-transform: uppercase; }
.cm-act { display: flex; align-items: center; gap: .6em; padding: .35em .5em .35em .8em; border-radius: .7em; border: 2px solid transparent; transition: background-color .2s, border-color .2s; }
.cm-act:hover { background: #f6fcf9; border-color: #e1f3ea; }
.cm-act.dans { background: #eaf7f1; border-color: #5cc79a; }
.cm-act-titre { flex: 1; color: #444; line-height: 1.25; }
.cm-niv { display: inline-block; margin-right: .5em; padding: .05em .55em; border-radius: 1em; background: #eaf7f1; color: #16855a; font-size: .75em; font-weight: 700; }
.cm-ajout, .cm-retire {
	flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; padding: 0; cursor: pointer; font: inherit; font-size: 1.05em; line-height: 1; letter-spacing: 0; text-shadow: none;
	display: inline-flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none;
	border: 2px solid #5cc79a; color: #16855a !important; background: #fff !important; transition: background-color .2s, color .2s;
}
.cm-ajout:hover, .cm-retire:hover, .cm-ajout.actif { background: #16855a !important; color: #fff !important; border-color: #16855a; }

/* Panier */
.cm-panier { text-align: left; }
.cm-item { position: relative; padding: .7em .9em; margin-bottom: .6em; border: 2px solid #5cc79a; border-radius: .9em; background: #f6fcf9; }
.cm-item-titre { padding-right: 2.8em; color: #333; font-weight: 700; line-height: 1.25; }
.cm-item .cm-retire { position: absolute; top: .5em; right: .5em; width: 1.9em; height: 1.9em; }
.cm-reglages { display: flex; flex-wrap: wrap; gap: .4em 1.2em; margin-top: .5em; font-size: .85em; color: #666; }
.cm-reglages label { display: inline-flex; align-items: center; gap: .4em; }
.cm-reglages input { width: 4.2em; padding: .25em .4em; text-align: center; }
.cm-main { color: #16855a; font-weight: 700; }

/* Usage */
.cm-aide-mode { margin: 0 0 .6em 0; font-size: .85em; color: #878787; }
.cm-options { display: grid; gap: .5em; justify-items: center; margin: .4em 0; text-align: left; }
.cm-case, .cm-champ-opt { font-size: .9em; color: #555; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; }
.cm-case input[type="checkbox"] {
	-webkit-appearance: checkbox; appearance: auto; opacity: 1; position: static; z-index: auto;
	width: 1.15em; height: 1.15em; margin: 0; accent-color: #16855a; display: inline-block;
}
.cm-champ-opt input[type="text"] { padding: .3em .6em; width: 14em; max-width: 100%; }
.cm-champ-opt select { padding: .3em .5em; }
.cm-commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; margin-top: 1.1em; }
.cm-commandes .button { margin: 0; }
.cm-erreur { min-height: 1.4em; margin: .6em 0 0 0; color: #c0392b; font-weight: 700; font-size: .9em; }

/* La série */
.cm-scene { max-width: 58em; margin: 0 auto; padding: 1.2em 1.4em; }
.cm-haut { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #878787; min-height: 1.6em; }
.cm-compteur { text-align: left; }
.cm-activite { text-align: center; font-size: .85em; text-transform: uppercase; letter-spacing: .06em; color: #16855a; }
.cm-score { text-align: right; color: #16855a; font-weight: 700; }
.cm-question {
	font-weight: 700; color: #16855a; line-height: 1.15; font-variant-numeric: tabular-nums; margin: .5em 0 .1em 0; word-break: break-word;
	font-size: clamp(2.2em, 9vw, 5.6em); min-height: 1.3em; display: flex; align-items: center; justify-content: center;
}
.cm-scene.cm-long .cm-question { font-size: clamp(1.5em, 4.2vw, 2.8em); line-height: 1.3; min-height: 4em; }
.cm-reponse { min-height: 1.5em; font-weight: 700; font-size: clamp(1.4em, 5vw, 2.6em); color: #16855a; }
.cm-reponse.montree { color: #e08a00; animation: cm-pop .4s ease-out; }
@keyframes cm-pop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.cm-saisie { display: flex; justify-content: center; align-items: stretch; gap: .6em; margin: .6em auto 0 auto; max-width: 28em; }
.cm-saisie input { flex: 1; min-width: 0; font: inherit; font-size: 1.6em; text-align: center; padding: .25em .4em; border: 2px solid #e5e5e5; border-radius: .6em; color: #16855a; }
.cm-saisie input:focus { outline: none; border-color: #16855a; }
.cm-saisie .button { margin: 0; }
.cm-barre { height: .7em; background: #e5e5e5; border-radius: 1em; overflow: hidden; margin: 1.1em auto .4em auto; max-width: 36em; }
.cm-barre-ok { height: 100%; width: 100%; background: #5cc79a; border-radius: 1em; }
.cm-scene.cm-urgent .cm-barre-ok { background: #e08a00; }
.cm-scene.cm-ok { background: #eaf7f1; border-color: #16855a; }
.cm-scene.cm-ko { background: #fdecea; border-color: #d9534f; }
.cm-scene.cm-ko .cm-reponse { color: #c0392b; }
.cm-scene.cm-en-pause .cm-question { opacity: .35; }
.cm-aide { margin: 1em 0 0 0; font-size: .8em; color: #878787; }
.cm-aide kbd { background: #f3f3f3; border: 1px solid #ddd; border-radius: .3em; padding: .05em .45em; font-family: inherit; }

/* Bilan et corrigé */
#vue-bilan { max-width: 58em; margin: 0 auto; }
.cm-bilan-score { font-size: 1.4em; font-weight: 700; color: #16855a; margin: 0 0 .6em 0; }
#corrige h4 { margin: 1em 0 .4em 0; font-size: .85em; text-align: left; color: #16855a; letter-spacing: .08em; text-transform: uppercase; }
.cm-corrige { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: .5em .8em; text-align: left; }
.cm-ligne { padding: .4em .8em; border-radius: .6em; background: #f6fcf9; border: 2px solid #e6f4ec; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.cm-ligne.juste { border-color: #5cc79a; }
.cm-ligne.faux { background: #fdf3f2; border-color: #e8a29d; }
.cm-lr { font-size: .8em; color: #c0392b; }

/* Feuille d'exercices (à l'écran, puis à l'impression) */
.cm-barre-feuille { margin: 0 0 1.2em 0; }
.cm-feuille { max-width: 52em; margin: 0 auto; color: #222; text-align: left; }
.cm-page { background: #fff; border: 2px solid #e5e5e5; border-radius: .6em; padding: 1.6em 2em; margin-bottom: 1.2em; }
.cm-page h2 { text-align: center; margin: 0 0 .5em 0; color: #16855a; font-size: 1.5em; }
.cm-page h3 { margin: 1.2em 0 .4em 0; font-size: 1.05em; color: #16855a; border-bottom: 2px solid #eaf7f1; padding-bottom: .15em; }
.cm-identite { margin: 0 0 .6em 0; font-size: .85em; color: #555; text-align: center; }
.cm-exos { margin: 0; padding-left: 2em; columns: 2; column-gap: 2.4em; }
.cm-exos li { margin: 0 0 .9em 0; break-inside: avoid; line-height: 1.4; font-variant-numeric: tabular-nums; }
.cm-corr { margin: .3em 0; font-size: .95em; line-height: 1.6; }

/* Plein écran */
.cm-scene:fullscreen { max-width: none; display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; padding: 2em; overflow: auto; }
.cm-scene:fullscreen .cm-question { font-size: clamp(4em, 18vw, 16em); }
.cm-scene:fullscreen.cm-long .cm-question { font-size: clamp(2em, 5vw, 5em); }
.cm-scene:fullscreen .cm-reponse { font-size: clamp(2em, 8vw, 7em); }
.cm-scene:fullscreen .cm-aide { display: none; }
.cm-scene:-webkit-full-screen { max-width: none; display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; padding: 2em; background: #fff; }

@media screen and (max-width: 900px) {
	.cm-grille { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 700px) {
	.cm-commandes .button { width: 100%; }
	.cm-carte { padding: 1.1em .8em; }
	.cm-saisie { flex-direction: column; }
	.cm-exos { columns: 1; }
	.cm-page { padding: 1.2em 1em; }
	.cm-haut { grid-template-columns: auto 1fr auto; gap: .5em; }
	.cm-activite { font-size: .7em; }
}
@media print {
	body { background: #fff !important; }
	#header, #banner, #footer, #nav, .cm-barre-feuille { display: none !important; }
	#features { padding: 0 !important; background: #fff !important; }
	#features .container { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
	.cm-page { border: 0; border-radius: 0; padding: 0; margin: 0; page-break-after: always; break-after: page; }
	.cm-page:last-child { page-break-after: auto; break-after: auto; }
	.cm-page h2, .cm-page h3 { color: #000; border-color: #999; }
	.cm-exos li { margin-bottom: 1.1em; }
}
@media (prefers-reduced-motion: reduce) { .cm-reponse.montree { animation: none; } }

.cm-corr { text-align: left; }
.cm-corr strong { color: #16855a; }
@media screen and (max-width: 700px) {
	.cm-onglet { width: auto !important; padding: .45em 1.1em; }
	.cm-act-titre { font-size: .95em; }
}

/* Corrigé : le calcul, puis la réponse bien en évidence (sans numéros) */
.cm-ligne { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: .1em .5em; padding: .5em .9em; }
.cm-lq { color: #555; }
.cm-lrep { color: #16855a; font-size: 1.15em; }
.cm-ligne.faux .cm-lrep { color: #16855a; }
.cm-ligne.juste .cm-lrep::after { content: ' \2713'; }
.cm-lr { flex-basis: 100%; }
.cm-corrige { grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); }

/* Corrigé : le calcul, puis la réponse bien en évidence, le tout centré (sans numéros) */
.cm-corrige { grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); }
.cm-ligne { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; text-align: center; gap: .1em .5em; padding: .6em .9em; }
.cm-lq { color: #555; }
.cm-lrep { color: #16855a; font-size: 1.15em; }
.cm-lrep.phrase { flex-basis: 100%; }
.cm-ligne.juste .cm-lrep::after { content: ' \2713'; }
.cm-lr { flex-basis: 100%; text-align: center; }

.cm-corrige.larges { grid-template-columns: repeat(auto-fill, minmax(21em, 1fr)); }