/* France Collège — outil de géométrie dynamique (assets/js/geo/geo.js) et page élève Géométrie.
   Le composant (.cg-*) est autonome : il ne dépend d'aucune autre feuille de style du site. */

/* ------------------------------------------------------------------ composant */
.cg-root{--cg-ink:#10234f;--cg-ink2:#4c5d7b;--cg-line:#d7e1ef;--cg-blue:#1769d7;--cg-soft:#eef4fc;
  position:relative;display:flex;flex-direction:column;background:#fff;color:var(--cg-ink);border:1px solid var(--cg-line);border-radius:18px;overflow:hidden;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;font-size:15px;line-height:1.4;box-shadow:0 10px 30px rgba(26,48,89,.08)}
.cg-root *,.cg-root *::before,.cg-root *::after{box-sizing:border-box}
.cg-root button{font:inherit}

/* consigne de l'exercice */
.cg-exo{padding:14px 16px 12px;border-bottom:1px solid var(--cg-line);background:linear-gradient(180deg,#f7fbff,#fff)}
.cg-exo-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.cg-chip{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--cg-ink);color:#fff;font-size:12px;font-weight:700}
.cg-chip.soft{background:#e6eefb;color:#1452b0}
.cg-stars{color:#f59e0b;font-size:14px;letter-spacing:1px;margin-left:auto}
.cg-stars .off{color:#d6dde8}
.cg-exo-title{margin:2px 0 4px;font-size:19px;line-height:1.25}
.cg-consigne{margin:0 0 8px;font-size:16px}
.cg-question{margin:6px 0 10px;padding:8px 10px;border-radius:12px;background:var(--cg-soft)}
.cg-question fieldset{border:0;margin:0;padding:0}
.cg-question legend{font-weight:700;margin-bottom:4px}
.cg-opt{display:flex;gap:8px;align-items:flex-start;padding:5px 2px;cursor:pointer}
.cg-opt input{margin-top:4px;width:18px;height:18px}
.cg-num{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-weight:700}
.cg-num input{font:inherit;font-size:17px;width:7.5em;padding:6px 8px;border:2px solid #b9c9e2;border-radius:10px}
.cg-num input:focus{border-color:var(--cg-blue);outline:none}
.cg-exo-actions{display:flex;flex-wrap:wrap;gap:8px}
.cg-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:12px;border:1px solid #cdd8ea;background:#fff;color:var(--cg-ink);font-weight:700;cursor:pointer}
.cg-btn:hover{background:#f3f7fd}
.cg-btn.primary{background:#14874f;border-color:#14874f;color:#fff}
.cg-btn.primary:hover{background:#0f7342}
.cg-btn:disabled{opacity:.5;cursor:not-allowed}
.cg-btn:focus-visible,.cg-tool:focus-visible,.cg-vbtn:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.cg-hint p{margin:10px 0 0;padding:8px 12px;border-radius:12px;background:#fff7e0;border:1px solid #f6d68a}
.cg-result:empty{display:none}
.cg-result{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid}
.cg-result.ok{background:#e9f8ef;border-color:#9ad8b3}
.cg-result.ko{background:#fff1f2;border-color:#f6b8c2}
.cg-result .cg-score{margin:0 0 4px;font-weight:800}
.cg-result ul{margin:0;padding-left:0;list-style:none}
.cg-result li{margin:3px 0}
.cg-result li.ok{color:#11603a}
.cg-result li.ko{color:#9f1239}

/* barre d'outils */
.cg-bar{display:flex;flex-wrap:wrap;gap:4px 8px;padding:6px 8px;background:#f2f6fc;border-bottom:1px solid var(--cg-line)}
.cg-grp{display:flex;gap:2px;padding-right:8px;border-right:1px solid #dbe4f1}
.cg-grp:last-child{border-right:0}
.cg-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:66px;min-height:54px;padding:4px 2px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--cg-ink);cursor:pointer;touch-action:manipulation}
.cg-tool svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cg-tool svg .dot{fill:currentColor;stroke:none}
.cg-tool span{font-size:10.5px;line-height:1.1;font-weight:700;text-align:center}
.cg-tool:hover{background:#e4edf9}
.cg-tool.on{background:var(--cg-blue);color:#fff;border-color:#0f56b5;box-shadow:0 4px 10px rgba(23,105,215,.25)}

/* feuille */
.cg-main{position:relative}
.cg-stage{position:relative;height:var(--cg-h,540px);min-height:320px;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;cursor:crosshair;background:#fff}
.cg-stage[data-tool="move"]{cursor:default}
.cg-stage:focus-visible{box-shadow:inset 0 0 0 3px #f59e0b}
.cg-svg{display:block;width:100%;height:100%}
.cg-svg text{font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif}
.cg-readonly .cg-stage{cursor:grab}
.cg-viewbar{position:absolute;top:8px;right:8px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:calc(100% - 16px);z-index:2}
.cg-vbtn{width:38px;height:38px;border-radius:10px;border:1px solid #cdd8ea;background:rgba(255,255,255,.94);color:var(--cg-ink);font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
.cg-vbtn:hover{background:#eef4fc}
.cg-vbtn.on{background:#e0ebfb;border-color:#8fb3e8}
.cg-help{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 70px);padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.93);border:1px solid #dbe4f1;font-size:13.5px;color:var(--cg-ink2);pointer-events:none;z-index:2}
.cg-help b{color:var(--cg-ink)}
.cg-props{position:absolute;top:8px;left:8px;z-index:3;width:250px;padding:10px;border-radius:14px;background:#fff;border:1px solid #cdd8ea;box-shadow:0 12px 30px rgba(16,35,79,.16)}
.cg-props-head{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:6px}
.cg-x{border:0;background:#eef2f7;border-radius:8px;width:30px;height:30px;font-size:18px;cursor:pointer}
.cg-prow{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:6px 0}
.cg-prow input{font:inherit;width:90px;padding:4px 6px;border:1px solid #b9c9e2;border-radius:8px;margin-left:6px}
.cg-sw{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #c3cfe2;cursor:pointer}
.cg-sw.on{box-shadow:0 0 0 3px #f59e0b}
.cg-mini{padding:4px 9px;border-radius:8px;border:1px solid #cdd8ea;background:#fff;font-size:13px;cursor:pointer}
.cg-mini.on{background:#e0ebfb;border-color:#8fb3e8}
.cg-mini.danger{color:#9f1239;border-color:#f3b4c0}
.cg-dialog{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;background:rgba(16,35,79,.18)}
.cg-dialog[hidden]{display:none}
.cg-ask{width:min(360px,92%);padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 18px 40px rgba(16,35,79,.25)}
.cg-ask-title{margin:0 0 8px;font-weight:800}
.cg-ask label{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cg-ask input{font:inherit;font-size:17px;width:8em;padding:6px 8px;border:2px solid #b9c9e2;border-radius:10px}
.cg-ask-err{color:#9f1239;margin:6px 0 0}
.cg-ask-btns{display:flex;gap:8px;margin-top:10px}
.cg-toast{position:absolute;left:50%;bottom:54px;transform:translate(-50%,-8px);max-width:80%;padding:7px 14px;border-radius:999px;background:#10234f;color:#fff;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
.cg-toast.on{opacity:.95;transform:translate(-50%,0)}

@media (max-width:760px){
  .cg-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .cg-tool{width:58px;flex:0 0 auto}
  .cg-stage{height:var(--cg-h-mobile,62vh)}
  .cg-help{font-size:12.5px;max-width:calc(100% - 16px)}
  .cg-vbtn{width:32px;height:32px;font-size:16px}
  .cg-exo-title{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.cg-toast{transition:none}}

/* ------------------------------------------------------------------ page élève « Géométrie » */
.geo-app{margin-top:16px}
.geo-tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.geo-tab{min-height:42px;padding:8px 16px;border-radius:999px;border:1px solid #cdd8ea;background:#fff;color:#10234f;font:inherit;font-weight:800;cursor:pointer}
.geo-tab[aria-selected="true"]{background:#1769d7;border-color:#1769d7;color:#fff}
.geo-free{margin-left:auto}
.geo-summary{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:4px 0 14px;font-weight:700}
.geo-bar{flex:1 1 220px;height:12px;border-radius:999px;background:#e6edf7;overflow:hidden}
.geo-bar span{display:block;height:100%;background:linear-gradient(90deg,#14874f,#34c77b)}
.geo-theme{margin:18px 0 8px;font-size:18px}
.geo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;padding:0;margin:0;list-style:none}
.geo-card{display:flex;flex-direction:column;gap:4px;width:100%;height:100%;text-align:left;padding:12px 14px;border-radius:16px;border:1px solid #d7e1ef;background:#fff;color:#10234f;font:inherit;cursor:pointer;box-shadow:0 4px 12px rgba(26,48,89,.05)}
.geo-card:hover{border-color:#8fb3e8;box-shadow:0 8px 20px rgba(26,48,89,.10)}
.geo-card b{font-size:15.5px}
.geo-card small{color:#4c5d7b}
.geo-card .geo-st{font-size:13px;font-weight:800}
.geo-card.done{border-color:#9ad8b3;background:#f3fbf6}
.geo-card.done .geo-st{color:#11603a}
.geo-card.tried .geo-st{color:#b35200}
.geo-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.geo-banner{margin:0 0 12px;padding:10px 14px;border-radius:14px;border:1px solid}
.geo-banner.info{background:#eef4fc;border-color:#bcd2f1}
.geo-banner.ok{background:#e9f8ef;border-color:#9ad8b3}
.geo-banner.ko{background:#fff1f2;border-color:#f6b8c2}
.geo-next{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}