/* Cartes mentales : même vert que le reste du site */
#features.ca-section { padding-top: 1em; }
.ca-section [hidden] { display: none !important; }

.ca-carte { background: #fff; border: 2px solid #e5e5e5; border-radius: 1.2em; padding: 1.2em; text-align: left; }
.ca-scene { max-width: 75em; margin: 0 auto 1.2em auto; padding: 1em; text-align: center; }

/* Barre du haut */
.ca-barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6em 1.4em; margin-bottom: .8em; text-align: left; }
.ca-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .8em; }
.ca-lib { font-size: .85em; color: #878787; margin: 0; }
.ca-formes { display: flex; flex-wrap: wrap; gap: .35em; }
.ca-forme-btn {
	-webkit-appearance: none; appearance: none; cursor: pointer; padding: 0 !important; width: 2.9em !important; height: 2.1em; border-radius: .6em;
	border: 2px solid #d4ece0; background: #fff !important; color: #16855a !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: none; transition: background .15s, border-color .15s;
}
.ca-forme-btn:hover { background: #e8f7f0 !important; border-color: #5cc79a; }
.ca-forme-btn.on { background: #16855a !important; border-color: #16855a; color: #fff !important; }
.ca-ico { width: 2em; height: 1.4em; display: block; }
.ca-ico rect, .ca-ico path { fill: currentColor; fill-opacity: .18; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ca-ico text { stroke: none; }
.ca-forme-btn.on .ca-ico rect, .ca-forme-btn.on .ca-ico path { fill-opacity: .35; }
.ca-groupe select { width: auto; min-width: 9em; padding: .35em .8em; border-radius: .8em; font-size: .9em; }

/* Modèles */
.ca-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5em, 1fr)); gap: .8em; margin: 0 0 1em 0; padding: .9em; border: 2px dashed #5cc79a; border-radius: 1em; background: #f6fcf9; text-align: left; }
.ca-modele {
	-webkit-appearance: none; appearance: none; font: inherit; text-align: left; cursor: pointer; border: 2px solid #e5e5e5; border-radius: .9em; background: #fff !important; color: #555 !important;
	padding: .5em .5em .7em .5em !important; width: auto !important; height: auto; display: flex; flex-direction: column; gap: .25em; letter-spacing: 0; text-transform: none; white-space: normal; line-height: 1.3em; box-shadow: none;
	transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ca-modele:hover { transform: translateY(-3px); border-color: #5cc79a; box-shadow: 0 6px 14px rgba(22, 133, 90, .15); }
.ca-modele strong { color: #16855a; font-size: .95em; padding: 0 .3em; }
.ca-modele span:last-child { font-size: .78em; color: #878787; padding: 0 .3em; }
.ca-mini-vue { display: block; border-radius: .6em; overflow: hidden; border: 1px solid #ececec; line-height: 0; }
.ca-mini-vue svg { width: 100%; height: auto; display: block; }

/* La zone de dessin : toujours 1600 x 900, adaptée à l'écran par un zoom */
.ca-cadre { position: relative; margin: 0 auto; overflow: hidden; border: 2px solid #f0f0f0; border-radius: .8em; box-sizing: content-box; }
.ca-plan { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; background: #fff; }
.ca-fond-blanc { background: #fff; }
.ca-fond-carreaux { background-color: #fff; background-image: linear-gradient(#cfe0f2 1px, transparent 1px), linear-gradient(90deg, #cfe0f2 1px, transparent 1px); background-size: 40px 40px; }
.ca-fond-seyes { background-color: #fff; background-image: linear-gradient(#b8cdee 1px, transparent 1px), linear-gradient(#e3ecf8 1px, transparent 1px), linear-gradient(90deg, #f1b4c3 1.5px, transparent 1.5px); background-size: 100% 40px, 100% 10px, 160px 100%; }
.ca-fond-ciel { background: linear-gradient(#9fd3f5 0%, #d8effd 70%, #fff 100%); }
.ca-fond-jardin { background: linear-gradient(#f6fbe9, #e1f4dc); }
.ca-fond-tableau { background: radial-gradient(circle at 50% 40%, #3b6252, #264236 70%); }
.ca-fl, .ca-sur { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; overflow: visible; }
.ca-fl { pointer-events: none; }
.ca-fl .ca-hit { pointer-events: stroke; cursor: pointer; }
.ca-sur { pointer-events: none; }
.ca-noeuds { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; pointer-events: none; }
.ca-poi-courbe { pointer-events: auto; fill: #3b8fd0; stroke: #fff; stroke-width: 4; cursor: grab; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.ca-vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; color: #6b7b73; font-size: 34px; line-height: 1.5em; }
.ca-vide p { margin: 0; padding: 40px 60px; }
.ca-fond-tableau .ca-vide { color: #cfe3d9; }

/* Un encadré */
.ca-n {
	position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; width: max-content; max-width: 13em; min-width: 3.2em; text-align: center; pointer-events: auto; cursor: move;
	font-family: 'Fredoka', 'Nunito', sans-serif; line-height: 1.25em; letter-spacing: 0; text-transform: none; touch-action: none;
}
.ca-boite { border: 3px solid #ccc; box-shadow: 0 3px 6px rgba(0, 0, 0, .16); }
.ca-forme { position: absolute; overflow: visible; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .18)); }
.ca-forme path { stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ca-t { position: relative; min-height: 1.25em; min-width: 2.4em; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; cursor: inherit; pointer-events: none; }
.ca-t:empty::before { content: attr(data-ph); opacity: .45; }
.ca-edit .ca-t { pointer-events: auto; cursor: text; }
.ca-edit { cursor: text; }
.ca-f-texte.ca-edit .ca-t, .ca-f-texte.ca-sel .ca-t { }
.ca-selbox { position: absolute; display: none; border: 2.5px dashed #3b8fd0; border-radius: 12px; pointer-events: none; box-sizing: border-box; }
.ca-sel .ca-selbox { display: block; }
.ca-edit .ca-selbox { border-style: solid; }
.ca-poi { position: absolute; pointer-events: auto; box-sizing: border-box; border: 4px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.ca-poi-lien { right: -20px; top: 50%; margin-top: -15px; width: 30px; height: 30px; border-radius: 50%; background: #16855a; cursor: crosshair; }
.ca-poi-taille { right: -12px; bottom: -12px; width: 24px; height: 24px; border-radius: 6px; background: #3b8fd0; cursor: ew-resize; }
.ca-edit .ca-poi { display: none; }
.ca-lie { animation: ca-pulse 1s ease-in-out infinite; }
@keyframes ca-pulse { 50% { opacity: .65; } }

/* Boutons */
.ca-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; margin-top: 1em; }
.ca-actions .button { margin: 0; width: auto !important; }
.ca-actions .button:disabled { opacity: .45; cursor: default; }
.ca-mini {
	font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; text-shadow: none; width: auto !important; white-space: nowrap;
	border: 2px solid #5cc79a; color: #16855a !important; background: #fff !important; padding: .4em 1em; border-radius: 2em; font-size: .85em; letter-spacing: 0; text-transform: none; transition: background .15s, color .15s; line-height: 1.4em; height: auto;
}
.ca-mini:hover { background: #16855a !important; color: #fff !important; }
.ca-mini.plein { background: #16855a !important; color: #fff !important; border-color: #16855a; }
.ca-mini.plein:hover { background: #0f6b49 !important; }
.ca-mini.danger { border-color: #e9a4a0; color: #c0392b !important; }
.ca-mini.danger:hover { background: #c0392b !important; border-color: #c0392b; color: #fff !important; }
.ca-mini .icon { margin-right: .35em; }

/* Réglages et astuces */
.ca-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2em; align-items: stretch; max-width: 75em; margin: 0 auto; }
.ca-sous-titre { margin: 0 0 .9em 0; font-size: .85em; color: #878787; }
.ca-texte { margin: 0; color: #666; font-size: .95em; }
.ca-ligne-reglage { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: .5em; align-items: center; margin-bottom: .8em; }
.ca-boutons { display: flex; flex-wrap: wrap; gap: .45em; }
.ca-couleurs { display: flex; flex-wrap: wrap; gap: .4em; }
.ca-sw { -webkit-appearance: none; appearance: none; width: 1.9em !important; height: 1.9em; padding: 0 !important; border-radius: 50%; border: 2px solid #d9d9d9; cursor: pointer; box-shadow: none; }
.ca-sw:hover { transform: scale(1.12); }
.ca-sw.on { border-color: #16855a; box-shadow: 0 0 0 3px #bfe6d3; }
.ca-formes-p .ca-forme-btn { width: 2.7em !important; }
.ca-astuces ul { margin: 0 0 1em 1.2em; padding: 0; font-size: .9em; color: #666; line-height: 1.5em; }
.ca-astuces li { margin-bottom: .4em; }
.ca-ligne { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
.ca-info { margin: .6em 0 0 0; font-size: .85em; color: #16855a; min-height: 1.2em; }
.ca-rgpd { text-align: center; font-size: .8em; color: #878787; margin: 1.2em 0 0 0; }

@media screen and (max-width: 900px) {
	.ca-grille { grid-template-columns: minmax(0, 1fr); }
	.ca-ligne-reglage { grid-template-columns: minmax(0, 1fr); }
}
:fullscreen .ca-scene, .ca-scene:-webkit-full-screen { background: #fff; overflow: auto; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ca-scene:fullscreen { background: #fff; overflow: auto; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

@page { size: A4 landscape; margin: 1cm; }
@media print {
	#header, #banner, #footer, #nav, .ca-barre, .ca-modeles, .ca-actions, .ca-grille, .ca-rgpd { display: none !important; }
	#features.ca-section { padding: 0 !important; }
	.ca-scene { border: 0; padding: 0; margin: 0; }
	.ca-cadre { border: 0; margin: 0 auto; }
	.ca-plan, .ca-plan * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.ca-vide, .ca-selbox { display: none !important; }
}
.ca-carte .ca-sous-titre, .ca-carte .ca-texte { text-align: left !important; }

/* Fractions empilées */
.ca-t .mf { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .14em; line-height: 1.15em; font-size: .95em; white-space: nowrap; }
.ca-t .mf-n { border-bottom: .07em solid currentColor; padding: 0 .25em .04em .25em; }
.ca-t .mf-d { padding: .04em .25em 0 .25em; }
#mk-panneau { text-align: left; }
#mk-panneau .mk-panneau { margin: 0 0 1em 0; }
.ca-groupe .mk-zone { margin-top: 0; }

/* Formules (KaTeX) */
.ca-t .ca-f { display: inline-block; vertical-align: middle; margin: 0 .1em; }
.ca-t .ca-f .katex { font-size: 1.08em; }
