/* /ce1/fractions.css — les fractions du CE1, dans l'habillage de la vallée CE1
   (accueil.css). Même modèle que /ce2/fractions.css (préfixe « fx- »), recopié ici
   pour que la page CE1 ne dépende pas d'un fichier du CE2. Les couleurs de l'étape
   arrivent par --c / --clair / --ombre, posées sur le conteneur (fractions.js). */

/* ---------- les 9 étapes ---------- */
.fx-etapes{grid-template-columns:repeat(3,1fr)}
.fx-etape{padding:18px 14px 16px}
.fx-rond{width:84px;height:84px}
.fx-rond .fx-ic{width:74%;height:74%;display:block}
.fx-rond.grand{width:110px;height:110px;margin:0 auto}
.fx-num{display:block;margin-top:10px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--doux)}
.fx-nom{font-size:24px;margin:2px 0 4px}
.fx-etat{display:block;margin-top:10px;font-size:14px;color:var(--doux)}
.fx-etoiles{display:block;font-size:24px;letter-spacing:3px;color:#E3A008;margin-top:2px}
.fx-go{display:inline-block;margin-top:12px;padding:10px 16px;border-radius:999px;background:var(--c);color:#fff;font-weight:700;font-size:16px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.fx-legende{max-width:640px;margin:0 auto 12px;line-height:1.5}

/* ---------- le bandeau d'une séance ---------- */
.fx-barre{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:linear-gradient(180deg,#BDF0DA,#E6FAF0);box-shadow:0 3px 0 rgba(31,29,92,.12)}
.fx-retour{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--marine);
  font-size:24px;font-weight:700;text-decoration:none;box-shadow:0 3px 0 rgba(31,29,92,.2)}
.fx-barre-ic{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff 0%,var(--clair) 45%,var(--c) 100%)}
.fx-barre-ic .fx-ic{width:76%;height:76%}
.fx-barre-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;color:var(--marine)}
.fx-barre-t b{font-family:"Baloo 2",Quicksand,sans-serif;font-size:clamp(19px,4.4vw,25px);line-height:1.1}
.fx-or{flex:none;padding:9px 14px;border-radius:999px;background:#FFF3C4;border:2px solid #E3A008;color:#7A4E00;font-weight:700;font-size:18px;box-shadow:0 3px 0 #E3A008}
.fx-prog{display:flex;gap:5px;max-width:320px}
.fx-prog span{flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.75)}
.fx-prog span.ok{background:#40C057}
.fx-prog span.ko{background:#FA8C5A}
.fx-prog span.ici{background:var(--c)}

/* ---------- une question ---------- */
.fx-corps{width:100%;max-width:820px;box-sizing:border-box;margin:0 auto;padding:18px 16px 30px;flex:1}
.fx-q{background:#fff;border-radius:26px;padding:20px 18px 22px;border-top:10px solid var(--c);
  box-shadow:0 6px 0 var(--ombre),0 14px 26px rgba(31,29,92,.12);text-align:center}
.fx-consigne{margin:0 0 16px;font-family:"Baloo 2",Quicksand,sans-serif;font-size:clamp(22px,4.6vw,28px);line-height:1.25;color:var(--marine)}
.fx-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fx-fig-carte{display:grid;place-items:center;min-height:170px;padding:14px;border:4px solid #EADFC6;border-radius:22px;background:#FFFBF2;cursor:pointer;
  box-shadow:0 5px 0 #EADFC6;transition:transform .1s}
.fx-fig-carte:hover:not(:disabled){transform:translateY(-3px);border-color:var(--c)}
.fx-fig-carte:disabled{cursor:default}
.fx-fig-carte.bon{border-color:#2B8A3E;background:#EBFBEE;box-shadow:0 5px 0 #2B8A3E}
.fx-fig-carte.faux{border-color:#FD7E14;background:#FFF4E6;box-shadow:0 5px 0 #FD7E14;animation:fx-secoue .35s}
.fx-figzone{display:grid;place-items:center;margin:4px 0 6px}
.fx-oui-non{display:flex;gap:16px;justify-content:center;margin-top:18px}
.fx-choix{min-width:150px;min-height:72px;border:4px solid var(--c);border-radius:22px;background:#fff;cursor:pointer;
  font-family:"Baloo 2",Quicksand,sans-serif;font-size:30px;color:var(--marine);box-shadow:0 5px 0 var(--c)}
.fx-choix:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--c)}
.fx-choix:disabled{cursor:default}
.fx-choix.bon{border-color:#2B8A3E;background:#EBFBEE;box-shadow:0 5px 0 #2B8A3E;color:#1B5E29}
.fx-choix.faux{border-color:#FD7E14;background:#FFF4E6;box-shadow:0 5px 0 #FD7E14;animation:fx-secoue .35s}
@keyframes fx-secoue{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* les figures : parts sable, traits bleu nuit (le jeu : --part) */
.fx-fig{display:block;height:auto;max-width:100%}
.fx-fig.petit{max-height:130px}
.fx-fig.moyen{max-height:180px;max-width:min(80vw,420px)}
.fx-fig.grand{max-height:230px;max-width:min(86vw,480px)}
.fx-fig .part{transition:transform .5s ease;fill:#FFF1CF;stroke:#1F1D5C;stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fx-fig .part.on{fill:#FF8A3D}
.fx-fig .outline{fill:none;stroke:#1F1D5C;stroke-width:4px;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* ---------- le retour ---------- */
.fx-fb{margin-top:16px}
.fx-fb-boite{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;border-radius:22px;padding:14px 18px;animation:fx-monte .2s ease-out}
.fx-fb-boite.ok{background:#EBFBEE;border:3px solid #40C057}
.fx-fb-boite.ko{background:#FFF4E6;border:3px solid #FD7E14}
@keyframes fx-monte{from{opacity:0;transform:translateY(8px)}}
.fx-fb-t{font-family:"Baloo 2",Quicksand,sans-serif;font-size:28px;color:var(--marine)}
.fx-gain{font-weight:700;font-size:22px;color:#7A4E00}
.fx-fb-s{flex-basis:100%;margin:0;font-size:17px;color:#1B5E29;font-weight:700}
.fx-fb-suite{flex-basis:100%;display:flex;justify-content:center}
.fx-suite{min-height:56px;font-size:19px}
.fx-suite:disabled{opacity:.45;cursor:default}
.fx-phrase{font-size:19px;color:var(--doux);margin:8px 0 0}
.fx-remed .fx-fb-suite{margin-top:16px}

/* ---------- fin de séance ---------- */
.fx-fin-t{font-family:"Baloo 2",Quicksand,sans-serif;font-size:clamp(30px,6vw,40px);color:var(--marine);margin:12px 0 0}
.fx-fin-et{font-size:46px;letter-spacing:6px;color:#E3A008;margin:2px 0}
.fx-fin-score{font-size:21px;margin:0 0 8px}
.fx-fin-caps{list-style:none;padding:0;margin:8px auto;max-width:520px;text-align:left}
.fx-fin-caps li{background:#FFFBF2;border-radius:16px;padding:10px 14px}
.fx-fin-caps b{display:block;font-size:17px}
.fx-fin-caps span{display:block;color:var(--doux);font-size:15px;margin-top:2px}
.fx-coffre{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin:14px auto;padding:12px 24px;border-radius:20px;background:#FFF3C4;border:3px solid #E3A008;color:#7A4E00}
.fx-coffre b{font-size:22px}
.fx-fin-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.fx-fin-btns .il-bouton{text-decoration:none}

/* ---------- les écritures de fractions : toujours debout, jamais « a/b » ---------- */
.fx-frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-family:"Baloo 2",Quicksand,sans-serif;font-weight:700;vertical-align:middle;margin:0 .12em}
.fx-frac span{padding:1px 6px}
.fx-frac i{display:block;height:.1em;min-height:3px;width:100%;min-width:1.1em;background:currentColor;border-radius:3px;margin:.06em 0}
.fx-frac.grande{font-size:1.6em}
.fx-consigne .fx-frac{font-size:1.05em}
.fx-sous{margin:-6px 0 14px;font-size:19px;color:var(--doux)}
.fx-calcul{display:inline-flex;align-items:center;gap:10px;font-size:1.25em}
.fx-trou{display:inline-block;min-width:1.4em;padding:0 .2em;border-bottom:4px solid var(--c);border-radius:8px 8px 0 0;background:#F3EBDA;color:#9A8B6A;text-align:center}
.fx-compare{display:flex;align-items:center;justify-content:center;gap:22px;font-size:26px;color:var(--marine)}
.fx-compare .fx-trou{font-family:"Baloo 2",Quicksand,sans-serif;font-size:34px}
.fx-pile{display:flex;flex-direction:column;gap:10px;width:min(440px,86vw)}
.fx-pile .fx-fig{max-height:58px;width:100%}
.fx-aide{min-height:1.4em;margin:6px 0 0;font-size:18px;color:#A34A00;font-weight:700}

/* ---------- les réponses ---------- */
.fx-reponses{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:16px}
.fx-reponses .fx-choix{min-width:110px;padding:8px 18px}
.fx-choix .fx-frac{font-size:30px}
.fx-choix.nb{min-width:96px;font-size:34px}
.fx-valider{min-height:56px;font-size:19px;margin-top:14px}
.fx-valider:disabled{opacity:.45;cursor:default}
/* écrire une fraction : une case à la fois, un pavé de 1 à 10 */
.fx-saisie{display:inline-flex;flex-direction:column;align-items:center;margin-left:22px;font-family:"Baloo 2",Quicksand,sans-serif;font-size:40px;color:var(--marine);vertical-align:middle}
.fx-saisie i{display:block;height:5px;width:74px;background:var(--marine);border-radius:3px;margin:4px 0}
.fx-case{display:grid;place-items:center;width:64px;height:58px;border-radius:14px;background:#F3EBDA;border:3px dashed #D8CBB0}
.fx-case.active{border:3px solid var(--c);background:#FFF8E6;box-shadow:0 0 0 4px rgba(224,123,18,.15)}
.fx-figzone:has(.fx-saisie){display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.fx-pave{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:520px;margin:16px auto 0}
.fx-touche{min-height:62px;border:0;border-radius:16px;background:#fff;color:var(--marine);font-family:"Baloo 2",Quicksand,sans-serif;font-size:28px;cursor:pointer;box-shadow:0 4px 0 #D8CBB0;border:2px solid #EADFC6}
.fx-touche:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #D8CBB0}
.fx-touche:disabled{opacity:.5;cursor:default}
.fx-touche.efface{background:#F3EBDA}

/* ---------- figures : parts coloriées, deux couleurs, figures à colorier ---------- */
.fx-fig .part.hlA{fill:#2EC4C9}
.fx-fig .part.hlB{fill:#FF8A3D}
.fx-fig.clic .part{cursor:pointer}
/* survol : une part vide s'éclaire, une part coloriée GARDE sa couleur (sinon elle a l'air déjà décolorée et le clic semble ne rien faire) */
.fx-fig.clic .part:not(.hlA):not(.hlB):hover{fill:#FFE3B3}
.fx-fig.clic .part:not(.hlB):hover{stroke-width:6px}
.fx-fig.barre{max-height:64px;width:min(440px,86vw)}
.fx-fig.grp{max-height:230px;max-width:min(86vw,520px);height:auto}
.fx-fig.ligne{width:min(680px,90vw);height:auto}
.fx-fig.ligne .lgd{font-family:"Baloo 2",Quicksand,sans-serif;font-size:26px;fill:#1F1D5C}
.fx-fig.ligne .pt{fill:rgba(255,255,255,.01);stroke:var(--c);stroke-width:3;stroke-dasharray:5 5;cursor:pointer}
.fx-fig.ligne .pt:hover{fill:rgba(224,123,18,.18)}
.fx-fig.ligne .pt.choisi{fill:rgba(224,123,18,.25)}

/* ---------- la carte : l'étape conseillée ---------- */
.fx-etape.conseil{box-shadow:0 6px 0 var(--ombre),0 0 0 4px var(--c),0 14px 26px rgba(31,29,92,.12)}
.fx-conseil{position:absolute;top:12px;left:12px;background:var(--c);color:#fff;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700}

/* ---------- propre au CE1 : atelier 1 « Parts égales » ---------- */
.fx-fb-s.ko{color:#A34A00}
.fx-cartes.deux{grid-template-columns:repeat(2,1fr);max-width:520px;margin:0 auto}
.fx-fig-carte.choisi{border-color:#3A3A9E;background:#fff;box-shadow:0 5px 0 #3A3A9E,0 0 0 4px #DCDDF7}
.fx-fig-carte.pale{opacity:.45}
.fx-compte{min-height:1.4em;margin:10px 0 0;font-weight:700;color:var(--doux)}
.fx-avec-frac{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;font-size:30px;color:var(--marine)}
.fx-plein{margin:0;font-weight:700;color:var(--marine)}
/* la correction : deux barres côte à côte, l'une bleue, l'autre orange */
.fx-cmp{min-height:0}
.fx-barres{display:flex;flex-direction:column;gap:10px;width:min(420px,84vw);margin:12px auto 4px}
.fx-barres-l{display:block;height:22px;border-radius:11px;background:#F3EBDA;overflow:hidden}
.fx-barres-l i{display:block;height:100%;border-radius:11px;transition:width .8s ease}
.fx-barres-l i.hlA{background:#2EC4C9}
.fx-barres-l i.hlB{background:#FF8A3D}
/* les points de l'automatisation */
.fx-points{display:flex;gap:8px;justify-content:center;margin:0 0 12px}
.fx-points i{width:16px;height:16px;border-radius:50%;background:#E6E8F7}
.fx-points i.ok{background:#40C057}
.fx-points i.ko{background:#FA8C5A}
.fx-oui-non + .fx-points{margin:22px 0 0}
.fx-banniere{padding-top:30px;padding-bottom:30px}
.fx-fin-dino{margin:6px 0 10px;font-size:18px;font-weight:700;color:#2B8A3E}

@media (max-width:760px){
  .fx-etapes{grid-template-columns:1fr 1fr}
  .fx-cartes{grid-template-columns:1fr}
  .fx-fig-carte{min-height:120px}
  .fx-pave{grid-template-columns:repeat(5,1fr)}
  .fx-saisie{margin:10px 0 0}
}
@media (max-width:480px){ .fx-etapes{grid-template-columns:1fr} .fx-cartes.deux{grid-template-columns:1fr 1fr} }
@media (prefers-reduced-motion:reduce){ .fx-fig .part,.fx-barres-l i{transition:none} }

/* ---------- les ateliers 2 à 9 et le test final (ceux du jeu, jeu1.js / jeu1.css) ----------
   jeu1.css est la feuille du jeu rangée sous .fx-jeu ; ici, on la met aux
   couleurs du CE1 : traits bleu nuit, parts sable, parts prises en orange
   (comme le nombre du haut), le nombre du bas en lagon, les parts AJOUTÉES
   (additions) en jaune d'or pour se distinguer des parts de départ. */
.fx-jeu{
  --marine:#1F1D5C; --ink:#1F1D5C; --line:#1F1D5C; --soft:#4B4A7A; --ink-inv:#fff;
  --bg:#FFF8E6; --bg-2:#F3EBDA; --card:#fff; --card-sel:#FFF3E6; --voile:#FFF8E6EE;
  --part:#FFF1CF; --border:#EADFC6; --border-fort:#A39880;
  --acc:#FF8A3D; --acc-txt:#B5520F; --acc2:#8A3A08;
  --hlA:#FFC83D; --hlA-txt:#B5520F; --hlB:#2EC4C9; --hlB-txt:#0B6E73;
  --ok:#2B8A3E; --err:#C2410C; --gold:#7A4E00; --gold-vif:#FFC83D;
}
.fx-q.fx-q-jeu{padding:6px 10px 14px;text-align:center}
.fx-jeu .stage{padding:10px 8px 6px;min-height:0;font-family:Quicksand,system-ui,sans-serif}
.fx-jeu .consigne,.fx-jeu .big-txt,.fx-jeu .machine{font-family:"Baloo 2",Quicksand,sans-serif;font-weight:700;color:var(--ink)}
.fx-jeu .frac{font-family:"Baloo 2",Quicksand,sans-serif;font-weight:700}
.fx-jeu .big{font-family:"Baloo 2",Quicksand,sans-serif;font-weight:700;border-radius:20px}
.fx-jeu .big:not(.go):not(.ghost):not(.good):not(.bad):not(.sel){border-color:var(--c);box-shadow:0 5px 0 var(--c)}
.fx-jeu .big.go{background:#3A3A9E;border-color:#3A3A9E;box-shadow:0 4px 0 #1F1D5C}
.fx-jeu .big.go:hover:not([disabled]){background:#2B2878;border-color:#2B2878}
.fx-jeu .card{border-radius:22px;background:#FFFBF2;border-color:#EADFC6;box-shadow:0 5px 0 #EADFC6}
.fx-jeu .card:hover{border-color:var(--c)}
.fx-jeu .reward{background:var(--voile)}
.fx-jeu .overlay{background:rgba(31,29,92,.55)}
/* le bilan du test final : un tableau lisible sur téléphone */
.fx-jeu table{border-collapse:collapse;margin:6px auto;font-size:15px}
.fx-jeu table th,.fx-jeu table td{padding:6px 10px;border-bottom:1px solid #EADFC6;text-align:left}
/* l'écran de fin : les pièces d'or et la couveuse */
.fx-fin-ce1{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 6px}
.fx-fin-ce1 .fx-coffre{margin:4px auto}
.fx-fin-ce1 .il-bouton{text-decoration:none}

/* ---------- téléphone : rien ne doit dépasser à droite ---------- */
.fx-jeu .stage{max-width:100%;min-width:0}
.fx-jeu .figzone{max-width:100%}
.fx-jeu .figzone>div{max-width:100%;min-width:0}
.fx-jeu .figzone>div>.fig{min-width:0;flex:0 1 auto}
.fx-jeu .card{min-width:0}
.fx-jeu .card .fig{max-width:100%;height:auto}
/* après une réponse : le choix et la bonne réponse restent bien visibles */
.fx-jeu .big.good[disabled],.fx-jeu .big.bad[disabled]{opacity:1}
/* la chenille 🐛 (signalement) ne doit pas recouvrir les boutons du bas */
.fx .fx-corps{padding-bottom:96px}
@media (max-width:520px){
  .fx-jeu .cards,.fx-jeu .cards.n4,.fx-jeu .cards.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- la page des étapes sur téléphone ----------
   accueil.css met les cartes en ligne (rond à gauche, texte à droite) : pour les
   étapes, qui portent en plus l'état, les étoiles et un bouton, on garde la
   carte en colonne, centrée, comme sur ordinateur. */
@media (max-width:760px){
  .fx-etapes .fx-etape{flex-direction:column;text-align:center;gap:0;padding:18px 16px 16px}
  .fx-etape .fx-titre{display:flex;flex-direction:column;align-items:center}
  .fx-etape .fx-go{margin-top:10px}
  .fx-conseil{top:12px;left:12px}
}
/* la feuille du jeu compte en « border-box » partout (sa règle * n'est pas reprise) */
.fx-q-jeu *,.fx-q-jeu *::before,.fx-q-jeu *::after{box-sizing:border-box}

/* ---------- le choix avant un atelier : « Montre-moi » ou « Je sais déjà » ---------- */
.fx-choix-chemin{max-width:640px;margin:0 auto}
.fx-chemin{display:flex;align-items:center;gap:16px;width:100%;margin:12px 0;padding:16px 20px;border-radius:22px;text-align:left;text-decoration:none;cursor:pointer;
  font:inherit;color:var(--marine) !important;background:#fff;border:4px solid var(--c);box-shadow:0 6px 0 var(--c)}
.fx-chemin:active{transform:translateY(3px);box-shadow:0 3px 0 var(--c)}
.fx-chemin.montre{background:var(--clair)}
.fx-chemin-ic{flex:none;font-size:42px;line-height:1}
.fx-chemin b{display:block;font-family:"Baloo 2",Quicksand,sans-serif;font-size:26px;line-height:1.1}
.fx-chemin small{display:block;font-size:16px;color:var(--doux);margin-top:4px;line-height:1.35}
@media (max-width:760px){ .fx-chemin b{font-size:22px} }

/* ---------- retouches de présentation (reprises du CM1) ---------- */
.fx-chemin{box-sizing:border-box}
.fx-etape .fx-etat{margin-top:auto;padding-top:6px}
.fx-pile{width:min(440px,100%)}
.fx-etapes>*{min-width:0}
@media (max-width:760px){
  .fx-etape{flex-direction:column;text-align:center;min-width:0;gap:0}
  .fx-etape .fx-rond{width:72px;height:72px}
  .fx-go{white-space:normal}
}
/* téléphone : les étapes sur deux colonnes, sans le texte d'explication */
@media (max-width:480px){
  .fx-etapes{grid-template-columns:1fr 1fr;gap:12px}
  .fx-etape{padding:30px 8px 12px}
  .fx-etape .il-quoi{display:none}
  .fx-etape .fx-rond{width:58px;height:58px}
  .fx-nom{font-size:18px}
  .fx-num{font-size:11px;margin-top:6px}
  .fx-etat{font-size:12px;margin-top:4px}
  .fx-etoiles{font-size:18px}
  .fx-go{font-size:13px;padding:8px 10px;margin-top:8px}
  .fx-conseil,.fx-plus{top:6px;font-size:10px;padding:3px 7px}
  .fx-plus{right:6px;left:6px;text-align:center}
  .fx-conseil{left:6px}
  .fx-auto-carte{flex-wrap:wrap;gap:10px 14px}
  .fx-auto-t{min-width:180px}
  .fx-auto-carte .fx-go{margin:0 auto}
}