/* Figures à main levée : même vert que le reste du site */
#features.fg-section { padding-top: 1em; }
.fg-section [hidden] { display: none !important; }

.fg-grille {
	display: grid; max-width: 75em; margin: 0 auto; gap: 1.2em; align-items: start;
	grid-template-columns: minmax(0, 26em) minmax(0, 1fr);
	grid-template-areas: "fig prev" "reg prev";
}
.fg-zone-fig { grid-area: fig; }
.fg-zone-prev { grid-area: prev; display: grid; gap: 1.2em; }
.fg-zone-reg { grid-area: reg; }
@media screen and (max-width: 980px) {
	.fg-grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fig" "prev" "reg"; }
}

.fg-carte { background: #fff; border: 2px solid #e5e5e5; border-radius: 1.2em; padding: 1.2em; text-align: left; }
.fg-titre { margin: 0 0 .7em 0; font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; font-size: 1.05em; color: #16855a; }
.fg-carte .fg-titre ~ .fg-titre { margin-top: 1.3em; }

/* Les figures à choisir */
.fg-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2em, 1fr)); gap: .5em; }
.fg-tuile {
	font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; text-shadow: none; text-transform: none; letter-spacing: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .25em;
	width: auto !important; height: auto; padding: .45em .2em .4em .2em !important; margin: 0;
	border: 2px solid #e5e5e5; border-radius: .8em; background: #fff !important; color: #555 !important; font-size: .72em; line-height: 1.2; box-shadow: none;
	transition: border-color .15s, background-color .15s;
}
.fg-tuile canvas { width: 3.6em; height: 3em; display: block; }
.fg-tuile span { display: block; text-align: center; font-weight: 600; }
.fg-tuile:hover { border-color: #5cc79a; }
.fg-tuile[aria-pressed="true"] { border-color: #16855a; background: #e8f7f0 !important; color: #16855a !important; }

/* Champs */
.fg-params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7em; margin-bottom: .8em; }
.fg-champ { display: block; margin: 0; }
.fg-champ > span { display: block; margin: 0 0 .3em 0; font-size: .82em; color: #878787; }
.fg-champ b { color: #16855a; }
.fg-ligne { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: .7em; }
.fg-carte input[type="number"], .fg-carte input[type="text"], .fg-carte select {
	width: 100%; font: inherit; padding: .5em .7em; border: 2px solid #e5e5e5; border-radius: .6em; background: #fff; color: #555; box-sizing: border-box; height: auto;
}
.fg-carte input:focus, .fg-carte select:focus { outline: none; border-color: #16855a; }
.fg-carte input[type="range"] { width: 100%; accent-color: #16855a; padding: 0; border: 0; height: 1.6em; -webkit-appearance: auto; appearance: auto; background: transparent; }
.fg-erreur { margin: .8em 0 0 0; padding: .6em .8em; border-radius: .6em; background: #fdecea; color: #b03a2e; font-size: .9em; }

/* Réglages */
.fg-groupe { border-top: 2px solid #f0f0f0; padding: .2em 0; }
.fg-groupe:first-of-type { border-top: 0; }
.fg-groupe summary { cursor: pointer; padding: .7em 0; font-weight: 700; color: #555; list-style: none; position: relative; }
.fg-groupe summary::-webkit-details-marker { display: none; }
.fg-groupe summary:after { content: '+'; position: absolute; right: .3em; top: .55em; color: #16855a; font-size: 1.2em; }
.fg-groupe[open] summary:after { content: '–'; }
.fg-groupe[open] { padding-bottom: .9em; }
.fg-grille-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7em; margin-bottom: .6em; }
.fg-cases { display: grid; gap: .1em; margin: .4em 0; }
.fg-case { display: block; font-size: .9em; color: #555; cursor: pointer; margin: 0; padding: .15em 0; }
.fg-case input { appearance: auto; -webkit-appearance: checkbox; opacity: 1; position: static; width: auto; margin: 0 .5em 0 0; }
.fg-etroit { max-width: 15em; margin-top: .5em; }
@media screen and (max-width: 480px) {
	.fg-grille-champs, .fg-params { grid-template-columns: minmax(0, 1fr); }
}

/* Images */
.fg-cadre { line-height: 0; border: 2px solid #f0f0f0; border-radius: .8em; background: #fff; overflow: hidden; text-align: center; }
.fg-cadre canvas { max-width: 100%; height: auto; display: inline-block; }
.fg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; margin-top: 1em; }
.fg-actions .button { margin: 0; width: auto !important; }
.fg-bas { margin-top: 1em; }
.fg-info { margin: 0; min-height: 1.3em; text-align: center; font-size: .9em; color: #16855a; font-weight: 700; }
.fg-rgpd { margin: 0; text-align: center; font-size: .85em; color: #878787; }
.fg-section .button.gris { background: #878787; }
.fg-section .button.gris:hover { background: #6d6d6d; }