:root {
  --fond:#f1f5f9; --carte:#fff; --carte-2:#f8fafc; --champ:#fff;
  --bord:#e2e8f0; --bord-fort:#cbd5e1;
  --texte:#0f172a; --texte-2:#64748b; --texte-3:#94a3b8;
  --primaire:#4f46e5; --primaire-clair:#6366f1; --sur-primaire:#fff;
  --ok:#059669; --danger:#dc2626; --accent:#0ea5e9;
  --ombre:0 10px 25px rgba(15,23,42,.08); --rayon:12px;
}
html.dark {
  --fond:#0f172a; --carte:#1e293b; --carte-2:#172033; --champ:#0f172a;
  --bord:#334155; --bord-fort:#475569;
  --texte:#f1f5f9; --texte-2:#94a3b8; --texte-3:#64748b;
  --primaire:#6366f1; --primaire-clair:#818cf8; --sur-primaire:#fff;
  --ok:#34d399; --danger:#f87171; --accent:#38bdf8;
  --ombre:0 10px 25px rgba(0,0,0,.4);
}
* { box-sizing:border-box }
body { margin:0; min-height:100vh; font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
       background:var(--fond); color:var(--texte); transition:background-color .2s,color .2s }
main { max-width:1280px; margin:0 auto; padding:20px 16px 50px }
header.site { border-bottom:1px solid var(--bord); background:color-mix(in srgb,var(--carte) 88%,transparent);
              backdrop-filter:blur(8px); position:sticky; top:0; z-index:50 }
header.site .barre { max-width:1280px; margin:0 auto; padding:10px 16px;
              display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px }
.logo { display:flex; align-items:center; gap:10px }
.logo .pastille { background:var(--primaire); color:var(--sur-primaire); border-radius:10px;
              width:38px; height:38px; display:grid; place-items:center; font-size:18px }
.logo h1 { font-size:1.1rem; margin:0; color:var(--primaire-clair) }
.logo p { margin:0; font-size:.72rem; color:var(--texte-2) }
.bouton { cursor:pointer; border:1px solid var(--bord-fort); background:var(--carte); color:var(--texte);
          border-radius:8px; padding:7px 14px; font:inherit; font-weight:600; transition:.15s }
.bouton:hover { border-color:var(--primaire); color:var(--primaire) }
.bouton.plein { background:var(--primaire); color:var(--sur-primaire); border-color:var(--primaire) }
.grille { display:grid; grid-template-columns:340px minmax(0,1fr); gap:20px; align-items:start; margin-top:20px }
@media (max-width:950px) { .grille { grid-template-columns:minmax(0,1fr) } }
.carte { background:var(--carte); border:1px solid var(--bord); border-radius:var(--rayon); padding:16px; box-shadow:var(--ombre); margin-bottom:20px }
.carte h2 { font-size:.85rem; margin:0 0 12px; display:flex; align-items:center; gap:8px }
.carte h2 .num { background:var(--primaire); color:var(--sur-primaire); border-radius:50%;
                 width:20px; height:20px; display:inline-grid; place-items:center; font-size:.7rem }
label.petit { display:block; font-size:.72rem; color:var(--texte-2); margin:10px 0 3px }
input,select,textarea { font:inherit; color:var(--texte); background:var(--champ);
              border:1px solid var(--bord-fort); border-radius:7px; padding:7px 8px; width:100% }
input[type=color] { padding:2px; height:34px; cursor:pointer }
input[type=file] { padding:5px }
.rangee { display:flex; gap:6px; align-items:center; flex-wrap:wrap }
#liste-evenements { max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:4px; margin-top:8px }
.ev-item { background:var(--carte-2); border:1px solid var(--bord); border-radius:8px; padding:8px 10px; font-size:.78rem; cursor:pointer }
.ev-item:hover { border-color:var(--primaire) }
.ev-item .tete { display:flex; justify-content:space-between; align-items:center; gap:8px }
.ev-item b.annee { color:var(--primaire-clair); font-size:.85rem }
.ev-item img { width:100%; height:52px; object-fit:cover; border-radius:5px; margin-top:6px }
.ev-item .mini { cursor:pointer; border:none; background:none; color:var(--danger); font-size:.85rem; padding:2px }

/* ---------- boîte modale sauvegarde ---------- */
.voile { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.5);
         display:grid; place-items:center; padding:16px }
.modale { background:var(--carte); border:1px solid var(--bord-fort); border-radius:12px;
          box-shadow:0 20px 50px rgba(0,0,0,.35); padding:18px; width:min(640px,100%);
          max-height:calc(100vh - 32px); overflow:auto }
.modale-tete { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px }
.modale-tete h2 { margin:0; font-size:1.05rem; color:var(--primaire-clair) }
.bouton.mini { padding:4px 10px; font-size:.9rem }

/* banque d'images de la modale */
#banque-images { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.bq-item { width:140px; border:1px solid var(--bord-fort); border-radius:8px; padding:6px }
.bq-item img { width:100%; height:64px; object-fit:cover; border-radius:6px; display:block }
.bq-ctrl { display:flex; gap:4px; margin-top:4px; align-items:center }
.bq-ctrl select { flex:1; min-width:0; font-size:.72rem; padding:2px }
.bq-ctrl .bouton.mini { padding:2px 6px }
.ev-item .editer { cursor:pointer; border:none; background:none; color:var(--accent); font-size:.85rem; padding:2px }
.explication { font-size:.72rem; color:var(--texte-2) }
.masque { display:none !important }
.mode-choix { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.mode-choix label { cursor:pointer; border:1px solid var(--bord-fort); border-radius:8px; padding:6px 10px;
                    font-size:.75rem; font-weight:600; display:flex; align-items:center; gap:6px }
.mode-choix input { width:auto; accent-color:var(--primaire) }
.mode-choix label.choisi { border-color:var(--primaire); color:var(--primaire) }
.avertissement { background:color-mix(in srgb,var(--danger) 12%,transparent); border-left:3px solid var(--danger);
                 border-radius:6px; padding:8px 10px; font-size:.75rem; margin:6px 0 }
.avertissement.ok { border-color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent) }

#zone-frise { overflow-x:auto }
svg text { font-family:inherit }
.titre-frise { text-align:center; font-size:1.4rem; font-weight:800; margin:0 0 2px }
.sous-titre-frise { text-align:center; font-size:.8rem; color:var(--texte-2); margin:0 0 10px }
.page-frise { margin-bottom:16px }
/* mode exercice : textes masqués jusqu'au clic */
body.exercice svg g.exo-txt { opacity:0 }
body.exercice svg g.exo-txt.revele { opacity:1 }
body.exercice svg .carte-ev { cursor:pointer }
body.exercice svg .carte-ev:hover { stroke-width:2.6 }

#toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:300; background:var(--carte);
         border:1px solid var(--bord-fort); border-radius:10px; padding:8px 12px; box-shadow:var(--ombre); align-items:center; gap:10px }
.coupe-marque { display:none }
@media print {
  header.site, .no-print, .voile { display:none !important }
  body { background:#fff !important; color:#000 !important }
  .grille { display:block }
  .carte { border:none !important; box-shadow:none !important; padding:0 !important; background:#fff !important }
  #zone-frise { overflow:visible !important }
  .page-frise { page-break-after:always; break-after:page }
  .page-frise:last-child { page-break-after:auto; break-after:auto }
  .coupe-marque { display:block; border-top:2px dashed #999; color:#555; font-size:11px; text-align:center; padding:4px 0 }
}

.bouton:disabled { opacity:.4; cursor:default; border-color:var(--bord-fort); color:var(--texte) }
#zone-frise svg { user-select:none; -webkit-user-select:none }
.fantome { position:fixed; z-index:400; pointer-events:none; background:var(--primaire); color:var(--sur-primaire);
           border-radius:8px; padding:5px 10px; font-size:.78rem; font-weight:600; box-shadow:var(--ombre); max-width:260px }

.etiquette { display:inline-block; background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); border-radius:5px; padding:0 5px; font-size:.68rem; font-weight:700 }
.eval-ligne { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 8px; border:1px solid var(--bord); border-radius:8px; margin-bottom:6px; background:var(--carte-2) }
.eval-ligne .eval-num { background:var(--primaire); color:var(--sur-primaire); border-radius:50%; width:22px; height:22px; display:inline-grid; place-items:center; font-size:.72rem; flex:none }
.eval-ligne .eval-titre { flex:1 1 180px; min-width:0 }
.eval-ligne .eval-titre small { display:block; color:var(--texte-2); font-size:.72rem }
.eval-ligne input { width:92px }
.eval-ligne .eval-res { font-weight:800; width:1.4em; text-align:center }
.eval-ligne.juste { border-color:var(--ok); background:color-mix(in srgb,var(--ok) 10%,var(--carte-2)) }
.eval-ligne.juste .eval-res { color:var(--ok) }
.eval-ligne.faux { border-color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--carte-2)) }
.eval-ligne.faux .eval-res { color:var(--danger) }
.bandeau-lecture { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; margin-bottom:12px;
                   background:color-mix(in srgb,var(--accent) 14%,var(--carte)); border:1px solid var(--accent); border-radius:10px; font-weight:600 }
body.lecture .colonne-edition, body.lecture #btn-annuler, body.lecture #btn-retablir, body.lecture #btn-exemple, body.lecture #btn-sauvegarde { display:none !important }
body.lecture .grille { grid-template-columns:minmax(0,1fr) }
#titre-lecture { text-align:center; margin-bottom:8px }
#titre-lecture b { display:block; font-size:1.4rem }
#titre-lecture span { color:var(--texte-2); font-size:.85rem }
html.hc { --texte:#000; --texte-2:#1a1a1a; --bord:#000; --bord-fort:#000; --fond:#fff; --carte:#fff; --carte-2:#fff; --champ:#fff; --primaire:#0030b8; --primaire-clair:#0030b8; --ok:#006b2d; --danger:#b00020; --accent:#005a9e }
html.hc.dark { --texte:#fff; --texte-2:#f0f0f0; --bord:#fff; --bord-fort:#fff; --fond:#000; --carte:#000; --carte-2:#000; --champ:#000; --primaire:#7aa7ff; --primaire-clair:#7aa7ff; --ok:#5eea9b; --danger:#ff8a9b; --accent:#6cc4ff }
html.hc .carte, html.hc .bouton, html.hc input, html.hc select, html.hc textarea { border-width:2px }
html.lisible body, html.lisible input, html.lisible select, html.lisible textarea, html.lisible button { font-family:Verdana, Tahoma, "Trebuchet MS", sans-serif; letter-spacing:.03em; word-spacing:.08em; line-height:1.65 }

/* aperçu épinglé : la frise reste visible pendant qu'on édite (ordinateur de bureau) */
:root { --h-header:64px }
#colonne-apercu { min-width:0 }
@media (min-width:951px) and (min-height:560px) {
  .grille > .colonne-droite { align-self:stretch }
  html.epingle #colonne-apercu { position:sticky; top:calc(var(--h-header) + 12px); max-height:calc(100vh - var(--h-header) - 24px);
                                 overflow-y:auto; padding:2px 6px 10px; margin:-2px -6px; overscroll-behavior:contain }
  html.epingle #zone-frise { max-height:calc(100vh - var(--h-header) - 150px); overflow:auto }
}
#btn-epingler[aria-pressed="false"] { opacity:.55 }
@media (max-width:950px), (max-height:559px) { #btn-epingler { display:none } }
@media print { #colonne-apercu { position:static !important; max-height:none !important; overflow:visible !important; padding:0 !important; margin:0 !important }
               #zone-frise { max-height:none !important } }

.badge-version { display:inline-block; border-radius:8px; padding:4px 10px; font-size:.78rem; font-weight:700; margin:0 0 8px; border:1px solid }
.badge-version.eleve { background:color-mix(in srgb,var(--ok) 14%,transparent); border-color:var(--ok); color:var(--ok) }
.badge-version.corrige { background:color-mix(in srgb,var(--danger) 14%,transparent); border-color:var(--danger); color:var(--danger) }
body.visionneuse #bandeau-lecture { display:none !important }
body.sans-reponses #btn-reveler-tout, body.sans-reponses #eval-reponses { display:none !important }
.bandeau-lecture button[aria-pressed="true"] { background:var(--primaire); color:var(--sur-primaire); border-color:var(--primaire) }
/* lecture / visionneuse : colonne unique, pas d'épinglage ni de numéros de section */
body.lecture #colonne-apercu { position:static !important; max-height:none !important; overflow:visible !important; padding:0 !important; margin:0 !important }
body.lecture #zone-frise { max-height:none !important }
body.lecture #btn-epingler, body.lecture .num { display:none !important }

a.bouton { text-decoration:none; display:inline-block }
/* curseurs : la valeur reste visible à droite */
.rangee input[type=range] { width:auto; min-width:0; flex:1 1 110px; padding:0 }
.rangee output { flex:none }
/* menus rétractables */
.barre-menus { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap }
.repliable-titre { cursor:pointer; user-select:none }
.repliable-titre::after { content:"▾"; margin-left:auto; color:var(--texte-2); font-size:1rem; transition:transform .15s }
.carte.replie .repliable-titre::after { transform:rotate(-90deg) }
.carte.replie > h2 { margin-bottom:0 }
.repliable-titre:focus-visible, details.sous-menu > summary:focus-visible { outline:2px solid var(--primaire-clair); outline-offset:2px; border-radius:6px }
details.sous-menu { border-top:1px solid var(--bord); padding:2px 0 8px }
details.sous-menu > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; padding:7px 0 4px; font-weight:700; font-size:.82rem; color:var(--primaire-clair); user-select:none }
details.sous-menu > summary::-webkit-details-marker { display:none }
details.sous-menu > summary::before { content:"▸"; display:inline-block; transition:transform .15s; width:1em }
details.sous-menu[open] > summary::before { transform:rotate(90deg) }
@media print { .repliable-titre::after { display:none } }
/* zoom de la frise (écran seulement : à l'impression la frise garde sa taille calculée) */
.barre-zoom { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:0 0 8px }
.barre-zoom .bouton[aria-pressed="true"] { background:var(--primaire); color:var(--sur-primaire); border-color:var(--primaire) }
#zoom-valeur { min-width:4.2em }
@media screen {
  #zone-frise > svg { width:min(100%, calc(var(--zw, 800) * 1px)); height:auto; max-width:none !important }
  #zone-frise.zoom-libre > svg { width:calc(var(--zw, 800) * var(--z, 1) * 1px) }
}

/* les textes et images d'une carte laissent passer le pointeur : on peut saisir la carte (glisser, révéler) en appuyant n'importe où dessus */
@media screen { #zone-frise svg text, #zone-frise svg image { pointer-events:none } }

/* =====================================================================
   HABILLAGE OTOOLIA — chargé APRÈS style.css quand l'outil est intégré au site.
   Les variables de l'outil reprennent celles d'Otoolia (--ot-*) : le thème clair,
   sombre ou « système » du site s'applique donc tout seul à l'outil, à ses
   exports (PNG, SVG, PDF) et à son impression.
   ===================================================================== */

/* ---------- variables : l'outil suit le site ---------- */
:root {
  --fond: var(--ot-bg);
  --carte: var(--ot-surface);
  --carte-2: var(--ot-surface-2);
  --champ: var(--ot-surface);
  --bord: var(--ot-border);
  --bord-fort: color-mix(in srgb, var(--ot-border) 65%, var(--ot-text-soft));
  --texte: var(--ot-text);
  --texte-2: var(--ot-text-soft);
  --texte-3: color-mix(in srgb, var(--ot-text-soft) 70%, transparent);
  --primaire: var(--ot-brand);
  --primaire-clair: var(--ot-brand);
  --sur-primaire: var(--ot-brand-ink);
  --ok: var(--ot-success);
  --danger: var(--ot-danger);
  --accent: var(--ot-brand-2);
  --ombre: var(--ot-shadow);
  --rayon: var(--ot-radius);
}

/* haut contraste (réglage de l'outil) en thème sombre : le site n'utilise pas la classe « dark » */
:root[data-theme="dark"].hc {
  --texte:#fff; --texte-2:#f0f0f0; --bord:#fff; --bord-fort:#fff; --fond:#000; --carte:#000; --carte-2:#000; --champ:#000;
  --primaire:#7aa7ff; --primaire-clair:#7aa7ff; --ok:#5eea9b; --danger:#ff8a9b; --accent:#6cc4ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]).hc {
    --texte:#fff; --texte-2:#f0f0f0; --bord:#fff; --bord-fort:#fff; --fond:#000; --carte:#000; --carte-2:#000; --champ:#000;
    --primaire:#7aa7ff; --primaire-clair:#7aa7ff; --ok:#5eea9b; --danger:#ff8a9b; --accent:#6cc4ff;
  }
}

/* ---------- typographie et mise en page : celles du site ---------- */
body { font-family: var(--ot-font); font-size: 16px; line-height: 1.55; background: var(--ot-bg); color: var(--ot-text); transition: none; }
main.frise-app { max-width: var(--ot-max, 1180px); width: 100%; margin: 0 auto; padding: 8px 16px 40px; font: 14px/1.5 var(--ot-font); }
.voile, #toast, .fantome { font: 14px/1.5 var(--ot-font); }
html.lisible main.frise-app, html.lisible .voile, html.lisible #toast { font-family: Verdana, Tahoma, "Trebuchet MS", sans-serif; }
.frise-entete { padding: 14px 0 0; }
.frise-entete h1 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 2px; letter-spacing: -.01em; }
.frise-entete p { margin: 0; font-size: .95rem; }
.grille { margin-top: 14px; }

/* ---------- barre d'outils, collée sous l'en-tête du site ---------- */
.barre-outil { position: sticky; top: var(--h-ot, 61px); z-index: 15;
  background: color-mix(in srgb, var(--ot-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ot-border); }
.barre-outil__inner { max-width: var(--ot-max, 1180px); margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 14px/1.5 var(--ot-font); }

/* téléphone : barre d'outils sur une seule ligne défilante, non collée (elle mangerait l'écran) */
@media (max-width: 700px) {
  .barre-outil { position: static; }
  .barre-outil__inner { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
  .barre-outil .bouton { flex: none; white-space: nowrap; }
}

/* ---------- composants : même famille de formes que le site ---------- */
.bouton { border-radius: 999px; border-color: var(--ot-border); }
.bouton:hover { border-color: var(--ot-brand); color: var(--ot-brand); }
.bouton.plein { background: var(--ot-brand); border-color: var(--ot-brand); color: var(--ot-brand-ink); }
.bouton.plein:hover { color: var(--ot-brand-ink); filter: brightness(1.08); }
.carte { border-radius: var(--ot-radius-l); box-shadow: var(--ot-shadow); }
.modale { border-radius: var(--ot-radius-l); }
input, select, textarea { border-radius: var(--ot-radius-s); }
.carte h2 { margin: 0 0 12px; font-size: .9rem; }
.carte h3, .modale h3 { font-size: 1rem; }
.modale-tete h2 { font-size: 1.05rem; }
.carte .explication, .modale .explication { margin-bottom: 0; }
a.bouton:hover { color: var(--ot-brand); }

/* ---------- impression : seule la frise (et son titre) sort ---------- */
@media print {
  .ot-header, .ot-footer, .ot-skip, .barre-outil, .frise-entete { display: none !important; }
  body { display: block; background: #fff !important; }
  main.frise-app { max-width: none; padding: 0; }
}

/* lien vers le guide : à droite de la barre d'outils */
.barre-outil .lien-guide { margin-left: auto; text-decoration: none; display: inline-block; flex: none; white-space: nowrap; }

/* invitation à lire le guide, toujours visible sous le titre */
.frise-entete .frise-aide { margin: 8px 0 0; font-size: .95rem; }
.frise-entete .frise-aide a { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none;
  padding: 5px 14px; border: 1px solid var(--ot-border); border-radius: 999px; background: var(--ot-surface); color: var(--ot-brand); }
.frise-entete .frise-aide a:hover { border-color: var(--ot-brand); }