/* ===========================
   Variables & Reset léger
   =========================== */
:root{
  --container-w: 1000px;
  --radius: .6rem;
  --gap: .75rem;
  --fs-slider-w: 160px; /* ← bar length (shorter) */

  /* Entraînement */
  --train-fs: 20px;
  --sidebar-w: 320px;
  --topbar-h: 64px;

  /* Couleurs */
  --c-bg: #fafafa;
  --c-fg: #222;
  --c-hint: #666;
  --c-border: #ddd;
  --c-border-soft: #eee;
  --c-accent: #111;
  --c-voice: #159b26;          /* Voix (vert) */
  --c-liaison: #d00;           /* Arcs de liaison */
  --c-pause: #444;

  --c-group-odd:  rgba(255,220,130,.35);
  --c-group-even: rgba(136,221,255,.35);

  --focus-ring: 0 0 0 3px rgba(0,0,0,.08);
}

*{ box-sizing:border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{ margin:0; }

/* ===========================
   Base
   =========================== */
body.page-prosodie{
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
header h1{ letter-spacing:.03em; margin:0; padding:1rem }
main.container{ max-width: var(--container-w); margin: 2rem auto; padding: 0 1rem; }
.controls details summary{ cursor:pointer }

.row{ display:flex; gap:var(--gap); flex-wrap:wrap; align-items:center }
.hint{ color:var(--c-hint); font-size:.9rem }
.tiny{ font-size:.8rem }
.mt-0{ margin-top:0 }
.mt-1{ margin-top:1rem }
.ml-auto{ margin-left:auto }

/* ===========================
   Boutons / éléments interactifs
   =========================== */
.btn{
  padding:.45rem .7rem;
  border:1px solid var(--c-border);
  border-radius: var(--radius);
  background:#fff;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.btn:hover{ box-shadow: var(--focus-ring) }
.btn:focus{ outline:none; box-shadow: var(--focus-ring) }
.btn.active{
  border-color: var(--c-accent);
  box-shadow: var(--focus-ring);
}

/* ===========================
   Toolbar (édition)
   =========================== */
.toolbar{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.5rem 0 1rem;
}
.toolbar-gap{ width:.5rem }
.separator{ flex:0 0 100%; height:0 }
.switch{ display:inline-flex; gap:.4rem; align-items:center }

/* ===========================
   Éditeur (saisie + enrichir)
   =========================== */
.editor textarea{ width:100%; min-height:180px; }

.stage{
  position:relative;
  border:1px dashed var(--c-border);
  padding:1rem;
  min-height:140px;
  border-radius:1rem;
  background:#fff;
  overflow:auto;
}

/* ===========================
   Texte & Tokens
   =========================== */
.textline, .train-text{
  line-height: 2.2;
  font-size: clamp(1rem, 2vw, 1.25rem);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  position:relative;
  z-index:1;
}

.token{
  position:relative;
  display:inline-block;
  padding:.15rem .15rem;
  border-radius:.25rem;
}
.token.word{ cursor: crosshair; }
.token.punct{ cursor: pointer; }

/* Boundaries & espaces */
.boundary{
  position:relative; display:inline; vertical-align:baseline; cursor:pointer;
}
.boundary .slash{ display:none; }
.boundary.break .slash{
  display:inline; font-weight:600; color:#666;
}
.boundary.break .slash::before{ content:'/'; }

.gap{
  position:relative; display:inline-block; white-space:pre;
}
.gap:hover{ background: rgba(0,0,0,.04); }

/* Groupes alternés (inclut espaces via .gap) */
.group-odd { background: var(--c-group-odd) }
.group-even{ background: var(--c-group-even) }

/* Voix (flèches vertes) : sous la pause */
.voice-mark{
  position:absolute;
  top:-.35rem;                 /* sous la pause */
  left:50%;
  transform:translateX(-50%);
  font-size:.95em;
  color: var(--c-voice);
  pointer-events:none;
}

/* Pauses (vague) : au-dessus de la voix */
.token.pause::before,
.gap.pause::before{
  content: "〰";
  position:absolute;
  top:-1.05rem;                /* un peu plus haut que la voix */
  left:50%;
  transform:translateX(-50%);
  font-size:.95em;
  color: var(--c-pause);
  z-index:2;
  pointer-events:none;
}

/* Accentuation (gros point au-dessus d’un caractère) */
.char{ position:relative; display:inline-block }
.char.accent::before{
  content:"•";
  position:absolute;
  top:-1.2em;
  left:50%;
  transform:translateX(-50%);
  font-size:1.05em;
  line-height:1;
  color:#111;
  pointer-events:none;
}



/* Calque liaisons (SVG) */
.liaison-layer{ position:absolute; inset:0; pointer-events:none; z-index:0 }
.liaison-layer path{ stroke: var(--c-liaison) !important; }

/* ===========================
   Overlay Entraînement (grille 2 colonnes)
   =========================== */
.train-overlay[hidden]{ display:none !important; }

.train-overlay{
  position:fixed; inset:0; background:#fff; z-index:9999; overflow:auto;

  /* Grille : topbar sur 2 colonnes, puis content + sidebar */
  display:grid;
  grid-template-columns: 1fr var(--sidebar-w);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "topbar  topbar"
    "content sidebar";
}

/* Topbar */
.train-topbar{
  grid-area: topbar;
  display:flex; align-items:flex-end; gap:var(--gap);
  padding:.5rem 1rem;
  border-bottom:1px solid var(--c-border-soft);
  background:#fff;
  position:sticky; top:0; z-index:3;
  min-height: var(--topbar-h);
}

/* Toggles */
.train-controls{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.train-controls .toggle{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem;
  border:1px solid var(--c-border);
  border-radius:.5rem;
  background:#fff;
  cursor:pointer;
  -webkit-user-select:none; user-select:none;
}
.train-controls .toggle input{ position:absolute; opacity:0; pointer-events:none; }
.train-controls .toggle:focus-within{ box-shadow: var(--focus-ring) }
.train-controls .toggle.active{
  border-color: var(--c-accent);
  box-shadow: var(--focus-ring);
}
.train-controls .toggle .dot{
  width:.6rem; height:.6rem; border-radius:999px; background:#bbb;
}
.train-controls .toggle.active .dot{ background: var(--c-accent); }

/* Slider bloc */
/* stack container so the native range sits above the custom bar */
.fs-wrap{ display:flex; gap:.5rem; align-items:center; }
.fs-stack{ position:relative; width: var(--fs-slider-w); height:24px; }
.fs-wrap .hint{ margin-right:.25rem; }

/* Zone texte (colonne gauche) */
.train-content{
  grid-area: content;
  padding: 1.2rem;
  min-width: 0; /* permet au contenu de rétrécir (wrap) */
}
.train-text{
  line-height: 2.4;
  font-size: var(--train-fs);
  width:100%;
  max-width:100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Sidebar (colonne droite) */
.train-sidebar{
  grid-area: sidebar;
  width: var(--sidebar-w);
  border-left:1px solid var(--c-border-soft);
  background:#fafafa;
  padding:1rem;

  /* Reste visible sous la topbar si la liste dépasse */
  align-self:start;
  position:sticky;
  top: var(--topbar-h);
  max-height: calc(100dvh - var(--topbar-h) - 16px);
  overflow:auto;
}
.sidebar-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin-bottom:.5rem;
}
.sidebar-actions{ margin-top:.75rem; display:flex; gap:.5rem; }

/* ===========================
   Impression
   =========================== */
@media print{
  .no-print{ display:none !important }
  .stage{ border:0 }
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 900px){
  .train-overlay{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "topbar"
      "sidebar"
      "content";
  }
  .train-sidebar{
    width:auto;
    border-left:none;
    border-top:1px solid var(--c-border-soft);
    position:static;
    max-height:none;
  }
}

/* Ne jamais encadrer les mots au simple survol/focus */
.train-text .token.word,
.train-text .token.word:hover,
.train-text .token.word:focus {
  outline: 0 !important;
}

/* Hitbox au niveau d’un retour à la ligne (largeur annulée) */
.punct-hit,
.lb-hit{
  display:inline-block;
  position:relative;
  width:.8ch;                
  margin-left:-.1ch;         
  height:1.8em;              
  vertical-align:baseline;
}

/* Boundary : inline, sur la ligne de base (même niveau que les caractères) */
.punct-hit .boundary,
.lb-hit .boundary,
.gap .boundary{
  position:relative;
  display:inline-block;
  vertical-align:baseline;
  cursor:pointer;
}


/* custom slider visuals */
.fs-slider{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
}

.fs-track{
  width:100%;
  height:2px;
  background:#d0d0d0;
  border-radius:2px;
  position:relative;
}

.fs-thumb{
  position:absolute;
  top:50%;
  left:0%;
  transform:translate(-50%,-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:#111;
  box-shadow:0 0 0 3px rgba(0,0,0,.06);
  cursor:grab;
  touch-action:none;
}
.fs-thumb:active{ cursor:grabbing; }

/* native range sits on top, invisible, handles keyboard focus */
#fsRange{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;                     /* hide visuals */
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  pointer-events:auto;           /* allow drag/click/keyboard */
}


/* Zoom dialog */
.zoom-dialog {
  padding: 0;
  border: none;
}

.zoom-box {
  padding: 1rem 1.5rem;
  text-align: center;
}

.zoom-content {
  font-size: 3rem;          /* ← police plus grande */
  line-height: 1.6;
  margin: 1rem 0 1.5rem;
  font-weight: 500;
}

.zoom-actions {
  text-align: center;
}

/* Bloc "Groupes de sens" + sous-options */
.mode-group{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.25rem;
}

/* Ligne des deux boutons "Couleurs" / "//" */
.group-display{
  display:flex;
  gap:.25rem;
}

.group-display[hidden]{
  display:none;
}

.group-display-btn.active{
  border-color: var(--c-accent);
  box-shadow: var(--focus-ring);
}