/* Représenter une fraction : même vert que le reste du site */
#features.fr-section { padding-top: 1em; }
.fr-outil { max-width: 70em; margin: 0 auto; text-align: left; }
.fr-outil *:focus-visible { outline: 3px solid #f2b01e; outline-offset: 2px; }
.fr-outil:fullscreen { background: #fff; padding: 1.5em 2em; overflow: auto; max-width: none; }
.fr-outil:-webkit-full-screen { background: #fff; padding: 1.5em 2em; overflow: auto; max-width: none; }

/* Haut : la fraction à régler + boutons */
.fr-haut { display: flex; flex-wrap: wrap; gap: 1.2em 2em; align-items: center; justify-content: center; padding: 1.2em; background: #fff; border: 2px solid #e5e5e5; border-radius: 1.2em; }
.fr-editeurs { display: flex; align-items: center; gap: 1.2em; }
.fr-editeur { display: flex; flex-direction: column; align-items: center; gap: .35em; }
.fr-ligne { display: flex; align-items: center; gap: .45em; }
.fr-in { font: 600 2.6em/1 'Fredoka', 'Nunito', sans-serif !important; width: 2.1em !important; height: 1.35em !important; padding: 0 !important; text-align: center; border: 2px solid #e5e5e5 !important; border-radius: .25em !important; color: #16855a !important; background: #fff !important; box-shadow: none !important; }
.fr-in:focus { outline: none; border-color: #16855a !important; }
.fr-editeur.c1 .fr-in { color: #b76a06 !important; }
.fr-trait { width: 6.4em; height: .3em; border-radius: .15em; background: #16855a; }
.fr-editeur.c1 .fr-trait { background: #b76a06; }
.fr-pm { width: 1.9em; height: 1.9em; border-radius: 50%; background: #eaf7f1; color: #16855a; display: flex; align-items: center; justify-content: center; font: 700 1.3em/1 'Nunito', sans-serif; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background .15s; }
.fr-pm:hover { background: #d4efe3; }
.fr-editeur.c1 .fr-pm { background: #fdf2e1; color: #b76a06; }
.fr-editeur.c1 .fr-pm:hover { background: #fae2bd; }
.fr-signe { font: 700 3em/1 'Fredoka', 'Nunito', sans-serif; color: #555; min-width: 1.2em; text-align: center; }
.fr-actions { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: .5em; }
.fr-act { display: flex; align-items: center; gap: .55em; padding: .5em .9em; border: 2px solid #e5e5e5; border-radius: .8em; background: #fff; color: #555; cursor: pointer; font-size: .9em; line-height: 1.3; -webkit-user-select: none; user-select: none; transition: border-color .2s; }
.fr-act:hover { border-color: #5cc79a; }
.fr-act .icon { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: #eaf7f1; color: #16855a; display: flex; align-items: center; justify-content: center; }
.fr-act .icon:before { margin: 0; }
.fr-act.actif { border-color: #16855a; }
.fr-act.actif .icon { background: #16855a; color: #fff; }
@media screen and (max-width: 736px) { .fr-actions { grid-template-columns: minmax(0, 1fr); } .fr-in { font-size: 2.1em !important; } }

/* Choix des représentations */
.fr-choix { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; margin: 1em 0; }
.fr-puce { display: flex; align-items: center; gap: .45em; padding: .35em 1em; border: 2px solid #e5e5e5; border-radius: 2em; background: #fff; color: #777; cursor: pointer; font-size: .92em; -webkit-user-select: none; user-select: none; }
.fr-puce:hover { border-color: #5cc79a; }
.fr-puce.actif { background: #16855a; border-color: #16855a; color: #fff; }

/* Dessins */
.fr-scene { display: flex; flex-wrap: wrap; gap: 1em; }
.fr-scene > .fr-carte { flex: 1 1 19em; min-width: 0; }
.fr-scene > .fr-carte.large { flex-basis: 100%; }
.fr-carte { background: #fff; border: 2px solid #e5e5e5; border-radius: 1.2em; padding: .9em 1em 1em; display: flex; flex-direction: column; }
.fr-carte h3 { margin: 0 0 .5em; font-size: .95em; color: #16855a; text-align: center; letter-spacing: .05em; }
.fr-dessins { flex: 1; display: flex; flex-direction: column; gap: .8em; align-items: stretch; justify-content: center; }
.fr-dessin { flex: 1; width: 100%; display: flex; align-items: center; gap: .6em; justify-content: center; }
.fr-dessin svg { display: block; width: 100%; height: auto; max-height: 15em; }
.fr-dessin.disque.u1 svg { max-width: 14em; }
.fr-dessin.disque.u2 svg { max-width: 26em; }
.fr-dessin.grille.u1 svg { max-width: 14em; }
.fr-dessin.large svg { max-height: none; }
.fr-part { cursor: pointer; transition: fill .2s; }
.fr-part:hover { opacity: .85; }
.fr-etiq { flex: none; font-weight: 700; }
.fr-etiq.c0 { color: #16855a; } .fr-etiq.c1 { color: #b76a06; }
.fr-vide { text-align: center; color: #999; width: 100%; }

/* Écritures */
.fr-ecritures { margin-top: 1em; display: grid; gap: 1em; }
.fr-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); gap: 1em; }
.fr-bloc { background: #fff; border: 2px solid #e5e5e5; border-radius: 1.2em; padding: .5em 1.1em; }
.fr-bloc.c0 { border-color: #d4efe3; } .fr-bloc.c1 { border-color: #fae2bd; }
.fr-bloc.cmp { border-color: #16855a; background: #f6fcf9; }
.fr-bloc h3 { margin: .4em 0; text-align: center; font-size: 1.1em; }
.fr-bloc.c0 h3 { color: #16855a; } .fr-bloc.c1 h3 { color: #b76a06; }
.fr-ec { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: .3em 1em; align-items: center; padding: .55em 0; border-bottom: 1px solid #f0f0f0; line-height: 1.5; }
.fr-ec:last-child { border-bottom: 0; }
.fr-ec-t { font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: #999; font-weight: 700; }
.fr-ec-v { color: #444; }
.fr-ec-v small { color: #888; }
.fr-cache { display: inline-flex; align-items: center; justify-content: center; width: 3em; height: 1.8em; border-radius: .5em; background: #eaf7f1; color: #16855a; font-weight: 700; cursor: pointer; justify-self: start; }
.fr-cache:hover { background: #d4efe3; }
.fr-grand { font-size: 1.5em; color: #16855a; }
@media screen and (max-width: 736px) { .fr-ec { grid-template-columns: minmax(0, 1fr); } }

/* Fraction écrite en étage */
.fr-f { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .15em; line-height: 1.1; font-weight: 700; }
.fr-f > span { padding: 0 .2em; }
.fr-f > span:first-child { border-bottom: 2px solid currentColor; }
.fr-per { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.fr-astuce { margin: 1.2em 0 0; text-align: center; font-size: .82em; color: #999; }
.fr-astuce .icon { color: #5cc79a; margin-right: .3em; }

@media (prefers-reduced-motion: reduce) { .fr-part, .fr-pm, .fr-act { transition: none; } }
@media screen and (max-width: 480px) {
	.fr-haut { padding: 1em .5em; }
	.fr-editeurs { gap: .4em; }
	.fr-ligne { gap: .25em; }
	.fr-in { font-size: 1.7em !important; }
	.fr-pm { width: 1.6em; height: 1.6em; font-size: 1.1em; }
	.fr-trait { width: 4.6em; }
	.fr-signe { font-size: 2em; }
}

/* Animation « comparer pas à pas » */
.fr-anim { border-color: #16855a; box-shadow: 0 0 0 3px #d4efe3; }
.fr-a-etapes { display: flex; flex-wrap: wrap; gap: .4em; justify-content: center; margin: 0 0 .8em; }
.fr-a-chip { padding: .25em .8em; border-radius: 2em; border: 2px solid #e5e5e5; background: #fff; color: #888; font-size: .8em; cursor: pointer; transition: all .3s; -webkit-user-select: none; user-select: none; }
.fr-a-chip b { display: inline-block; width: 1.4em; height: 1.4em; line-height: 1.4em; border-radius: 50%; background: #eee; color: #888; text-align: center; margin-right: .2em; font-size: .9em; }
.fr-a-chip.fait { border-color: #d4efe3; color: #16855a; } .fr-a-chip.fait b { background: #d4efe3; color: #16855a; }
.fr-a-chip.on { border-color: #16855a; background: #16855a; color: #fff; } .fr-a-chip.on b { background: #fff; color: #16855a; }
.fr-a-corps { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(15em, 1fr); gap: 1.2em; align-items: start; }
@media screen and (max-width: 900px) { .fr-a-corps { grid-template-columns: minmax(0, 1fr); } }
.fr-a-vis svg { display: block; width: 100%; height: auto; overflow: visible; }
.fr-a-texte { margin-top: .6em; padding: .8em 1.1em; border-radius: .9em; background: #f6fcf9; color: #444; line-height: 1.7; text-align: center; min-height: 4.6em; }
.fr-a-num { display: inline-block; margin-right: .3em; padding: 0 .6em; border-radius: 1em; background: #16855a; color: #fff; font-size: .78em; font-weight: 700; }
.fr-a-calcul { background: #fbfbfb; border: 2px dashed #e0e0e0; border-radius: 1em; padding: .8em 1em; text-align: center; }
.fr-a-calcul-t { font-size: .75em; text-transform: uppercase; letter-spacing: .08em; color: #aaa; font-weight: 700; margin-bottom: .4em; }
.fr-m { margin: .55em 0; color: #444; line-height: 1.6; }
.fr-m-tete { font-size: 1.5em; }
.fr-m-q { display: inline-grid; min-width: 1em; font-weight: 700; color: #555; }
.fr-m-q > span { grid-area: 1 / 1; }
.fr-m-ligne { font-weight: 600; font-size: .92em; }
.fr-m-ligne.c0 { color: #16855a; } .fr-m-ligne.c1 { color: #b76a06; }
.fr-m-ligne b, .fr-m b { display: inline-block; padding: 0 .35em; border-radius: .35em; background: #f2b01e; color: #fff; }
.fr-m-calc { display: flex; align-items: center; justify-content: center; gap: .3em; margin: .4em 0; font-size: 1.15em; }
.fr-m-fl { display: inline-flex; flex-direction: column; align-items: center; font-size: .62em; font-weight: 700; color: #f2a01e; line-height: 1.5; }
.fr-m-eg { color: #555; font-size: 1.5em; line-height: 1; }
.fr-m-fin { font-size: 1.35em; font-weight: 700; padding: .3em .6em; border: 2px solid #16855a; border-radius: .7em; background: #f6fcf9; }
.fr-f.c0 { color: #16855a; } .fr-f.c1 { color: #b76a06; }
.fr-a-cmd { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; margin-top: 1em; }
.fr-a-cmd .fr-act.off { opacity: .4; pointer-events: none; }
.fr-a-suiv { border-color: #16855a; }
.fr-a-suiv .icon { background: #16855a; color: #fff; }
.fr-anim-btn { display: inline-flex; margin-top: .7em; }

/* Mouvements : chaque élément « an » glisse et apparaît en douceur */
.fr-a2 .an { transition: opacity calc(.6s * var(--k, 1)) ease, transform calc(.9s * var(--k, 1)) cubic-bezier(.3, .7, .3, 1), stroke-dashoffset calc(.6s * var(--k, 1)) ease; }
.fr-a2.sec .an { transition: none !important; }
.fr-a2 g.an, .fr-a2 text.an, .fr-a2 rect.an { transform-box: fill-box; transform-origin: center; }
.fr-a2 .grp0, .fr-a2 .grp1 { transform-box: view-box; transform-origin: 0 0; }
.fr-a2 .cpA { transform: translateY(-60px); } .fr-a2 .cpB { transform: translateY(40px); }
.fr-a2.e-taille .cpA, .fr-a2.e-taille .cpB { transform: none; }
.fr-a2 .pop { transform: scale(.2); } .fr-a2.e-compte .pop { transform: none; }
.fr-a2.e-super .grp1 { transform: translateY(-74px); }
.fr-a2.e-super .clign { animation: fr-clign calc(1.2s * var(--k, 1)) ease-in-out calc(1.6s * var(--k, 1)) 3; }
@keyframes fr-clign { 50% { fill-opacity: .1; } }
.fr-a2 div.an, .fr-a2 span.an { display: inline-block; transform: translateY(6px); }
.fr-a2 div.an { display: block; }
.fr-a2 .fr-m-calc.an { display: flex; }
.fr-a2 .v-intro { opacity: 0; }
.fr-a2 .v-taille { opacity: 0; }
.fr-a2 .v-commun { opacity: 0; }
.fr-a2 .v-decA { opacity: 0; }
.fr-a2 .v-decB { opacity: 0; }
.fr-a2 .v-compte { opacity: 0; }
.fr-a2 .v-super { opacity: 0; }
.fr-a2.e-intro .v-intro { opacity: 1; transform: none; }
.fr-a2.e-intro .pousse.v-intro { stroke-dashoffset: 0 !important; }
.fr-a2.e-taille .v-taille { opacity: 1; transform: none; }
.fr-a2.e-taille .pousse.v-taille { stroke-dashoffset: 0 !important; }
.fr-a2.e-commun .v-commun { opacity: 1; transform: none; }
.fr-a2.e-commun .pousse.v-commun { stroke-dashoffset: 0 !important; }
.fr-a2.e-decA .v-decA { opacity: 1; transform: none; }
.fr-a2.e-decA .pousse.v-decA { stroke-dashoffset: 0 !important; }
.fr-a2.e-decB .v-decB { opacity: 1; transform: none; }
.fr-a2.e-decB .pousse.v-decB { stroke-dashoffset: 0 !important; }
.fr-a2.e-compte .v-compte { opacity: 1; transform: none; }
.fr-a2.e-compte .pousse.v-compte { stroke-dashoffset: 0 !important; }
.fr-a2.e-super .v-super { opacity: 1; transform: none; }
.fr-a2.e-super .pousse.v-super { stroke-dashoffset: 0 !important; }
.fr-a2.e-intro .h-intro { opacity: 0; }
.fr-a2.e-taille .h-taille { opacity: 0; }
.fr-a2.e-commun .h-commun { opacity: 0; }
.fr-a2.e-decA .h-decA { opacity: 0; }
.fr-a2.e-decB .h-decB { opacity: 0; }
.fr-a2.e-compte .h-compte { opacity: 0; }
.fr-a2.e-super .h-super { opacity: 0; }
.fr-a2.e-super .pop { transform: none; }
@media screen and (max-width: 480px) { .fr-a-chip { font-size: .72em; } .fr-m-tete { font-size: 1.25em; } }
@media (prefers-reduced-motion: reduce) { .fr-a2 .an { transition: opacity .2s !important; } .fr-a2 .cpA, .fr-a2 .cpB, .fr-a2 .pop, .fr-a2 div.an, .fr-a2 span.an { transform: none !important; } .fr-a2.e-super .clign { animation: none; } }
.fr-a2 span.h-super { transform: none; }
@media screen and (max-width: 480px) { .fr-a-chip span { display: none; } .fr-a-chip { padding: .2em .35em; } .fr-a-chip b { margin: 0; } }

.fr-vit { display: inline-flex; align-items: center; gap: .45em; margin: 0; padding: .3em .8em; border: 2px solid #e5e5e5; border-radius: .8em; color: #555; font-size: .9em; }
.fr-vit .icon { color: #5cc79a; }
.fr-vit select { font: inherit; padding: .2em .4em; border: 1px solid #ddd; border-radius: .4em; background: #fff; color: #555; height: auto; width: auto; }