/* ========== Reset léger ========== */
*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body,h1,h2,h3,h4,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }

/* ========== Palette & tokens ========== */
:root{
  --bg:#f4f4f4; --card:#fff; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
  --brand:#0078d7; --brand-600:#005da6; --brand-contrast:#fff;
  --radius:12px; --shadow:0 2px 4px rgba(0,0,0,.06);
  --maxw:1200px;

  /* Familles */
  --fam-faits-header-bg:#aec9f0;  --fam-faits-header-bd:#2f82ef;
  --fam-num-header-bg:#f7e6c1;    --fam-num-header-bd:#f19f23;
  --fam-strat-header-bg:#dafce7;  --fam-strat-header-bd:#2cf770;
  --fam-autres-header-bg:#F3F4F6; --fam-autres-header-bd:#E5E7EB;

  /* Sous-familles */
  --subfam-bg:#F9FAFB; --subfam-bd:#E5E7EB;

  /* ===== FRACTIONS (variables) ===== */
  --frac-bar:2px;   /* épaisseur de la barre horizontale */
  --frac-gap:2px;   /* espace autour de la barre */
}

/* Variantes sous-familles selon famille */
details.family[data-family="Mémoriser des faits numériques"]{ --subfam-bg:#EEF5FF; --subfam-bd:#69a4f7; }
details.family[data-family="Utiliser ses connaissances en numération pour calculer mentalement"]{ --subfam-bg:#FFF7E6; --subfam-bd:#f7b527; }
details.family[data-family="Apprendre des procédures de calcul mental"]{ --subfam-bg:#ECFDF3; --subfam-bd:#38f486; }

/* ========== Base ========== */
body{
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Noto Sans, "Liberation Sans", Arial, sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  display:flex; flex-direction:column; min-block-size:100svh;
}
.muted{ color:var(--muted); }
.hidden{ display:none !important; }

/* Header / wrapper */
header{ background:var(--brand); color:#fff; padding:.5rem 1rem; text-align:center; width:100%; }
.site-main{ flex:1; width:100%; }
.site-main .wrap{ margin:0 auto; max-width:var(--maxw); padding:16px; }

/* ========== Cartes / boutons ========== */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.card .section{ padding:12px 14px; }

.btn{
  background:var(--brand); color:var(--brand-contrast);
  border:1px solid var(--brand); border-radius:6px;
  padding:.32rem .6rem; cursor:pointer; font:inherit;
}
.btn:hover{ background:var(--brand-600); }
.btn.primary{ background:var(--brand); }
.btn.danger{ background:#b91c1c; border-color:#b91c1c; color:#fff; }
.btn.danger:hover{ background:#991b1b; }

/* Formulaires compacts */
form.container{ grid-template-columns:1fr; }
form.container > *{ grid-column:1 / -1; }

/* ========== Barre de contrôle sticky ========== */
.controls-card{ position:sticky; top:10px; z-index:40; }
.controls-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pill{ border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:#fff; }
.levels{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line); padding:6px 10px; border-radius:8px; background:#f9fafb;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.chip[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
.chip input{ margin-right:6px; }

/* Barre code compacte */
.codebar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.codebar[hidden]{ display:none !important; }
.codebar input{
  height:36px; min-width:240px; padding:4px 8px;
  border:1px solid var(--line); border-radius:8px;
}

/* ========== Familles / sous-familles / catégories / générateurs ========== */
.families-wrap{ display:grid; gap:18px; }

details.family{
  border:1px solid var(--line); border-radius:12px; background:#fff;
}
details.family > summary.family-header{
  list-style:none; cursor:pointer; padding:10px 14px; font-weight:700;
  display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--fam-autres-header-bd);
  background:var(--fam-autres-header-bg);
}
details.family > summary.family-header::-webkit-details-marker{ display:none; }
details.family > summary.family-header::before{
  content:"▸"; display:inline-block; transform:translateY(1px);
  transition:transform .15s; opacity:.7;
}
details.family[open] > summary.family-header::before{ transform:rotate(90deg) translateY(0); }

/* Entêtes colorés par famille */
details.family[data-family="Mémoriser des faits numériques"] > summary.family-header{
  background:var(--fam-faits-header-bg); border-bottom-color:var(--fam-faits-header-bd);
}
details.family[data-family="Utiliser ses connaissances en numération pour calculer mentalement"] > summary.family-header{
  background:var(--fam-num-header-bg); border-bottom-color:var(--fam-num-header-bd);
}
details.family[data-family="Apprendre des procédures de calcul mental"] > summary.family-header{
  background:var(--fam-strat-header-bg); border-bottom-color:var(--fam-strat-header-bd);
}
.family-content{ padding:8px 12px; }

details.subfam{
  border:1px solid var(--subfam-bd); border-radius:10px; margin:10px 0; background:#fff;
}
details.subfam > summary{
  list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; gap:10px;
  background:var(--subfam-bg); border-bottom:1px solid var(--subfam-bd);
}
details.subfam > summary::-webkit-details-marker{ display:none; }
.subfam-title{ font-weight:700; }
.subfam-body{ padding:10px 12px; border-top:1px solid var(--line); }
@supports (color: color-mix(in srgb, #000, #fff)){
  details.subfam{ border-color: color-mix(in srgb, var(--subfam-bd), #000 12%); }
  details.subfam:hover{ border-color: color-mix(in srgb, currentColor, #000 8%); }
  details.subfam[open]{ border-color: color-mix(in srgb, currentColor, #000 16%); }
}
details.subfam:focus-within{ outline:2px solid color-mix(in srgb, currentColor, #000 20%); outline-offset:2px; }
details.subfam > summary{ border-top-left-radius:10px; border-top-right-radius:10px; }

details.gen{ border:1px solid var(--line); border-radius:10px; margin:8px 0; background:#fff; }
details.gen > summary{ list-style:none; cursor:pointer; padding:10px 12px; display:flex; align-items:center; gap:10px; }
details.gen > summary::-webkit-details-marker{ display:none; }
.gen-title{ font-weight:600; }
.badge{ margin-left:auto; border:1px solid var(--line); padding:2px 8px; border-radius:999px; font-size:.85rem; }
.gen-body{ padding:10px 12px; border-top:1px solid var(--line); }
.cases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 16px; }
.case label{ display:inline-flex; align-items:center; gap:8px; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

details.category{ border:1px solid var(--line); border-radius:10px; margin:8px 0; background:#fff; }
details.category > summary{
  list-style:none; cursor:pointer; padding:10px 12px; display:flex; align-items:center; gap:10px;
}
details.category > summary::-webkit-details-marker{ display:none; }
.cat-title{ font-weight:700; }
.cat-body{ padding:10px 12px; border-top:1px solid var(--line); }

/* ========== Sélection (dans le dialog) ========== */
#selectedGroups .group{ padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:14px; background:#fff; }
#selectedGroups .sel-gen.card{
  border:1px solid #e6e6e9; border-radius:12px; background:#fff; padding:8px 10px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); margin:8px 0;
}
#selectedGroups .sel-gen-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-bottom:6px; margin-bottom:6px; border-bottom:1px dashed #e9e9ee;
}
#selectedGroups .sel-cases{ display:grid; gap:4px; }
#selectedGroups .sel-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#selectedGroups .remove{ background:none; border:0; color:#b00; cursor:pointer; font-size:.95rem; }
#selectedGroups .remove:hover{ text-decoration:underline; }

/* ========== Dialog générique ========== */
.dlg-card{
  background:#fff; border-radius:12px; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto; max-height:85vh;
}
.dlg-header,.dlg-footer{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:#f8fafc; border-block:1px solid #e5e7eb;
}
.dlg-header{ border-top:0; justify-content:space-between; }
.dlg-footer{ border-bottom:0; justify-content:flex-end; gap:8px; }
.dlg-header h3{ margin:0; font-size:1.1rem; }
.dlg-close{ border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:#334155; padding:2px 8px; border-radius:8px; }
.dlg-close:hover{ background:#e5e7eb; }
.dlg-body{ padding:12px; overflow:auto; max-height:60vh; }

/* ========== Footer ========== */
.site-footer{
  background:#1e293b; color:#cbd5e1; padding:10px 10px 6px; margin-top:auto; text-align:center;
}
.site-footer a{ color:#38bdf8; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* Panneau contact */
#contact-panel{
  display:none; position:relative; text-align:left; max-width:720px; margin:12px auto 0;
  padding:20px; border:1px solid #334155; border-radius:10px; background:#0f172a; color:#e2e8f0;
}
body.contact-open #contact-panel{ display:block; }
#contact-panel input,#contact-panel textarea{ width:100%; box-sizing:border-box; }
#contact-close{
  position:absolute; top:8px; right:8px; background:transparent; border:none;
  font-size:24px; color:#e2e8f0; cursor:pointer;
}
#contact-close:hover{ color:#f87171; }

/* ========== Header compact + nav sombre ========== */
.site-header.header-compact{ background:#0078d7; color:#fff; width:100%; }
.site-header.header-compact .wrap{ padding:.5rem 1rem; text-align:center; }
.site-title{ font-size:clamp(20px, 3vw, 28px); font-weight:700; }

.site-nav{ width:100%; background:#333; }
.site-nav .nav-list{
  margin:0; padding:.3rem; display:flex; flex-wrap:wrap;
  gap:.5rem .75rem; align-items:center; justify-content:center;
}
.site-nav .nav-item{ display:flex; align-items:center; gap:.5rem; }
.site-nav select{
  background:#222; color:#fff; border:1px solid #444; border-radius:4px;
  min-height:36px; padding:.35rem .6rem; font-size:.95rem;
}
.site-nav .btn{
  font-size:.875rem; padding:.28rem .5rem;
}

/* Popover PDF */
.has-popover{ position:relative; }
.nav-popover[hidden]{ display:none !important; }
.nav-popover{
  position:absolute; right:0; top:calc(100% + 8px); width:min(320px, 92vw);
  background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.18); padding:10px 12px; z-index:1000;
}
.nav-popover .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.nav-popover .popover-section{ display:grid; gap:10px; margin-bottom:10px; }
.nav-popover .popover-actions{ display:grid; gap:8px; border-top:1px dashed #e5e7eb; padding-top:10px; }

/* ========== Exercice (index) ========== */
.exo-wrap{ margin-top:8px; display:grid; gap:12px; justify-items:center; }
.exo-meta{ text-align:center; color:var(--muted); font-size:1rem; }

.exo-calc{
  text-align:center; font-weight:700; font-size:clamp(28px, 6vw, 56px);
  line-height:1.2; padding:12px 16px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); max-width:min(900px, 92vw);
  word-break:break-word;                 /* peut forcer des césures agressives */
  font-variant-numeric:tabular-nums;
}

/* Disposition : calcul + réponse + feedback (gauche) | clavier (droite) */
.exo-layout{
  display:grid; grid-template-columns: 1fr minmax(240px,320px);
  gap:16px; align-items:start; width:100%;
}
@media (max-width:820px){
  .exo-layout{ grid-template-columns:1fr; }
  #clavier-numerique{ justify-self:center; }
}

/* Cadre englobant calcul + réponse + feedback */
.exo-work{
  display:grid; gap:12px; padding:14px;
  border:1px solid var(--line); border-radius:14px;
  background:var(--card); box-shadow:var(--shadow);
}
.exo-work .exo-calc{ border:0; box-shadow:none; background:transparent; padding:0; }

.exo-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
#userAnswer{
  font-size:clamp(20px, 3.5vw, 28px); padding:10px 14px; border:2px solid var(--line);
  border-radius:10px; width:min(14ch, 60vw); text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.05);
}
#userAnswer:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
#validateBtn{ font-size:.95rem; padding:8px 12px; }

.exo-feedback{ text-align:center; font-size:1.1rem; min-height:1.2em; }
.exo-feedback--big{ font-size:clamp(22px, 3.5vw, 30px); font-weight:800; }
.exo-feedback.success{ color:#0a7a27; font-family:"Trebuchet MS", Arial, system-ui, sans-serif; font-weight:800; }
.exo-feedback.error{ color:#b91c1c; font-family:"Trebuchet MS", Arial, system-ui, sans-serif; font-weight:800; }

/* ========== Clavier numérique (droite) ========== */
#clavier-numerique{
  margin-top:0; text-align:initial; width:100%; max-width:320px;
  padding:12px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); box-shadow:var(--shadow);
  position:sticky; top:10px;
}
#clavier-btns > div{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.4rem; margin:2px 0;
}
/* ✅ override : dernière rangée = 5 colonnes (0, /, virgule, valider, effacer) */
#clavier-btns > div:last-child{ grid-template-columns:repeat(5, 1fr) !important; }

#clavier-btns :is(button, .btn-chiffre){
  width:100%; height:56px; font-size:24px; line-height:1; padding:0; margin:0;
  background:var(--brand); color:#fff; border:none; border-radius:6px; cursor:pointer;
  transition:background-color .2s ease;
}
#clavier-btns :is(button, .btn-chiffre):hover{ background:var(--brand-600); }
#effacer{ background:#6b7280; } #effacer:hover{ background:#4b5563; }
#valider{ background:#22c55e; } #valider:hover{ background:#16a34a; }
#virgule{ font-weight:700; }

/* ========== Utilitaires grille ========== */
.controls-grid,.controls-row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
@media (max-width:800px){ .controls-grid,.controls-row{ grid-template-columns:1fr; } }

/* ========== Ajustements de layout ========== */
.exo-wrap{ justify-items:stretch; }

/* ===== FRACTIONS — 3 étages stables (num / barre / den) ===== */
.answer-ui{ display:grid; justify-items:center; gap:6px; width:100%; }
#answerPreview:empty{ display:none; }

/* ➜ composant fraction utilisé par main.js + index (aperçu) */
.frac{
  display:inline-flex !important;
  flex-direction:column;
  align-items:stretch;          /* chaque étage prend la même largeur */
  inline-size:max-content;      /* largeur = plus large des 2 étages */
  width:auto;                   /* fallback */
  vertical-align:middle;
  line-height:1;
  /* IMPORTANT pour neutraliser le word-break agressif du conteneur: */
  word-break:normal !important;
  overflow-wrap:normal !important;
  white-space:nowrap;
  hyphens:none;
  padding:0 .12em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.frac .num,
.frac .den{
  display:block;
  text-align:center;
  font-size:1em;               /* augmente à 1.1em si tu veux */
  line-height:1;
  min-inline-size:1ch;
  font-weight:inherit;
}
.frac .bar{
  display:block;
  block-size:var(--frac-bar);
  background:currentColor;
  margin:var(--frac-gap) 0;
  transform:translateZ(0);
}

/* un peu d’air dans l’énoncé */
.exo-calc .frac{ margin:0 .12em; }

/* sécurité : si d’anciens styles grid trainent */
.frac{ grid-template-rows:unset !important; grid-auto-flow:unset !important; }


/* Champ de réponse avec calque "joli" par-dessus */
.answer-field{ position:relative; display:inline-block; }

/* Calque de rendu (les fractions empilées) */
.answer-mask{
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  padding:10px 14px;              /* mêmes paddings que #userAnswer */
  font:inherit; color:inherit; text-align:center;
  white-space:nowrap; overflow:hidden;
}

/* On rend le texte de l'input transparent, mais on garde le caret visible */
#userAnswer.pretty-input{
  color:transparent;
  caret-color:var(--text);         /* ou #111827 */
  background:transparent;
}

/* On n’a plus besoin de l’aperçu au-dessus */
#answerPreview{ display:none !important; }

/* Quand le rendu “joli” est actif, on cache le placeholder de l'input */
#userAnswer.pretty-input::placeholder{
  color: transparent !important;
}

/* (Option) Si tu gardes l’ancien aperçu au-dessus, on le cache définitivement */
#answerPreview{ display:none !important; }

/* ===== Recherche compétence ===== */
.search-wrap { display:flex; gap:6px; align-items:center; }
#skillSearch {
  height:36px; min-width:260px; max-width:480px;
  padding:4px 10px; border:1px solid var(--line); border-radius:8px;
  font-size: 15px;
}
#clearSearch { height:36px; line-height:1; padding:0 10px; }

/* Surlignage temporaire de la compétence ciblée */
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 0 rgba(99,102,241,.75); }
  100% { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
}
.found-glow {
  animation: glowPulse .9s ease-out 0s 2;
  outline: 2px solid rgba(99,102,241,.65);
  border-radius: 10px;
}

/* Toggle Filtrer l’affichage */
.filter-toggle {
  display:flex; align-items:center; gap:6px; font-size:.95rem; user-select:none;
}

/* Classe de masquage propre à la recherche (n’empiète pas sur tes autres filtres) */
.srch-hidden { display: none !important; }

.search-wrap { display:flex; gap:6px; align-items:center; }
#skillSearch { height:36px; min-width:180px; max-width:480px; padding:4px 10px; border:1px solid var(--line); border-radius:8px; }
#clearSearch { height:36px; line-height:1; padding:0 10px; }

/* Masquage spécifique au filtre de recherche */
.srch-hidden { display: none !important; }

/* Surlignage de la compétence ciblée */
@keyframes glowPulse { 0%{ box-shadow:0 0 0 0 rgba(99,102,241,.75);} 100%{ box-shadow:0 0 0 10px rgba(99,102,241,0);} }
.found-glow { animation: glowPulse .9s ease-out 0s 2; outline:2px solid rgba(99,102,241,.65); border-radius:10px; }


/* Fenêtre Sélection : plus grande */
dialog.selector-dlg { width:min(96vw, 1100px); }   /* un peu plus large aussi */
                  /* zone de contenu plus grande */

/* Popover visibles dans le dialog */
.selector-dlg .dlg-card,
.selector-dlg .dlg-footer{ overflow: visible; }
.selector-dlg .code-popover{ z-index: 4000; } /* passe au-dessus des bords */

/* Centrer les boutons + éviter que ça parte à droite */
.selector-dlg .dlg-footer,
.parcours-footer{
  justify-content: center;      /* centre le groupe de boutons */
  flex-wrap: wrap;              /* passe à la ligne si besoin */
  gap: 12px;                    /* espace régulier */
  overflow: visible;            /* popovers visibles */
  text-align: center;
}

.selector-dlg .dlg-footer > div,
.parcours-footer > div{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;              /* options sur plusieurs lignes si étroit */
  justify-content: center;      /* centre à l’intérieur du groupe */
}

/* Popovers centrés par rapport au bouton (au lieu d’être collés à gauche) */
.code-pop{ position: relative; display: inline-block; }
.code-popover{
  left: 50% !important;
  transform: translateX(-50%);
  right: auto !important;
  max-width: min(92vw, 520px);  /* un peu plus large pour les options PDF */
  z-index: 4000;
}

/* Sur mobiles, on force un popover quasi pleine largeur */
@media (max-width: 520px){
  .code-popover{
    width: 92vw;
    max-width: 92vw;
  }
}


/* Masquer l'entête de méta en mode parcours */
html[data-mode="parcours"] #meta {
  display: none !important;
}

/* Boutons fin de parcours */
.end-actions{
  display:flex; justify-content:center; gap:10px; margin-top:12px; flex-wrap:wrap;
}
.end-actions .btn{ min-width:160px; }