/* =========================================================
   Culture Digitale — révision intensive
   Direction : la fiche bristol surlignée, version numérique.
   Papier chaud, encre bleutée, un seul geste fort : le trait
   de surligneur jaune qui marque ce qui compte.
   ========================================================= */

:root{
  --ink:#1C2433;
  --ink-soft:#4A5468;
  --muted:#8A92A3;
  --paper:#F6F4EE;
  --card:#FFFFFF;
  --line:#E4E1D6;
  --marker:#FFE45C;
  --marker-soft:#FFF3B8;
  --blue:#2F54EB;
  --blue-soft:#E9EEFF;
  --green:#1F9D55;
  --green-soft:#E3F5EB;
  --red:#D64545;
  --red-soft:#FBEAEA;
  --radius:14px;
  --shadow:0 1px 2px rgba(28,36,51,.05), 0 6px 18px rgba(28,36,51,.06);
  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-body:"Instrument Sans", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------- structure ---------- */
.app{display:flex;min-height:100vh}
.content{flex:1;min-width:0;padding:32px clamp(16px,4vw,56px) 96px;max-width:1060px;margin:0 auto}
.content:focus{outline:none}

.sidebar{
  width:216px;flex-shrink:0;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:28px;
  padding:28px 18px;border-right:1px solid var(--line);background:var(--paper);
}
.brand-mark{
  font-family:var(--font-display);font-weight:800;font-size:1.45rem;line-height:1.05;display:inline-block;
  background:linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);
}
.brand-sub{display:block;margin-top:8px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nav-items{display:flex;flex-direction:column;gap:4px}
.nav-btn{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 12px;border:none;background:none;border-radius:10px;
  font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--ink-soft);
  cursor:pointer;text-align:left;transition:background .15s,color .15s;
}
.nav-btn svg{width:20px;height:20px;flex-shrink:0}
.nav-btn:hover{background:#EFEDE4}
.nav-btn.active{background:var(--ink);color:#fff}
.sidebar-foot{margin-top:auto}
.link-btn{border:none;background:none;color:var(--muted);font-size:.78rem;cursor:pointer;padding:6px 12px;font-family:var(--font-body)}
.link-btn:hover{color:var(--red);text-decoration:underline}

/* mobile : barre en bas */
@media (max-width:760px){
  .app{flex-direction:column}
  .sidebar{
    width:100%;height:auto;position:fixed;bottom:0;top:auto;z-index:50;
    flex-direction:row;align-items:center;gap:0;padding:0;
    border-right:none;border-top:1px solid var(--line);
    background:rgba(246,244,238,.96);backdrop-filter:blur(8px);
  }
  .brand,.sidebar-foot{display:none}
  .nav-items{flex-direction:row;width:100%;justify-content:space-around}
  .nav-btn{flex-direction:column;gap:3px;font-size:.62rem;padding:9px 4px calc(9px + env(safe-area-inset-bottom));border-radius:0;flex:1;align-items:center}
  .nav-btn.active{background:none;color:var(--blue)}
  .nav-btn svg{width:22px;height:22px}
  .content{padding:20px 16px 110px}
}

/* ---------- typo générale ---------- */
h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.12;margin:0 0 6px}
h2{font-family:var(--font-display);font-weight:600;font-size:1.18rem;margin:0 0 12px}
.kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.lead{color:var(--ink-soft);max-width:60ch;margin:0 0 26px}
.hl{background:linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 94%, transparent 94%);padding:0 2px}

/* ---------- composants ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:.92rem;
  border-radius:10px;padding:11px 18px;cursor:pointer;border:1px solid transparent;
  transition:transform .08s,background .15s,border-color .15s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#2B3548}
.btn-ghost{background:none;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-soft)}
.btn-green{background:var(--green);color:#fff}
.btn-red{background:var(--red-soft);color:var(--red)}
.btn-marker{background:var(--marker);color:var(--ink)}
.btn-marker:hover{background:#F8D83C}
.btn[disabled]{opacity:.45;cursor:default}
.btn-sm{padding:7px 13px;font-size:.83rem}

.chip{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);
  border-radius:999px;padding:6px 13px;font-size:.83rem;font-weight:500;color:var(--ink-soft);
  cursor:pointer;transition:all .15s;font-family:var(--font-body);
}
.chip:hover{border-color:var(--ink-soft)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}

.tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:3px 8px;background:var(--blue-soft);color:var(--blue)}
.tag.t5{background:#FFF0E0;color:#B4690E}
.tag.t1{background:#E9EEFF;color:#2F54EB}
.tag.t2{background:#EDE7FB;color:#6B3FD6}
.tag.t3{background:#E0F3F4;color:#0E8489}
.tag.t4{background:#E3F5EB;color:#1F9D55}

.progress{height:7px;background:var(--line);border-radius:99px;overflow:hidden}
.progress > i{display:block;height:100%;background:var(--blue);border-radius:99px;transition:width .3s}
.progress.marker > i{background:var(--marker)}
.progress.green > i{background:var(--green)}

/* ---------- vue Plan 5 jours ---------- */
.protocol{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:24px 0 30px;
}
.day-seg{
  border:1px solid var(--line);background:var(--card);border-radius:12px;
  padding:13px 12px;cursor:pointer;text-align:left;font-family:var(--font-body);
  transition:all .15s;position:relative;overflow:hidden;
}
.day-seg .d-num{font-family:var(--font-display);font-weight:800;font-size:1.3rem;display:block}
.day-seg .d-label{font-size:.7rem;color:var(--muted);display:block;margin-top:2px;line-height:1.3}
.day-seg .d-done{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);display:block;margin-top:7px}
.day-seg:hover{border-color:var(--ink-soft)}
.day-seg.current{border-color:var(--ink);box-shadow:var(--shadow)}
.day-seg.current::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--marker);
}
.day-seg.complete .d-num{color:var(--green)}
@media (max-width:760px){
  .protocol{grid-template-columns:repeat(5,1fr);gap:5px}
  .day-seg{padding:9px 7px}
  .day-seg .d-label{display:none}
}

.task{
  display:flex;align-items:flex-start;gap:14px;padding:15px 18px;
  border-bottom:1px solid var(--line);
}
.task:last-child{border-bottom:none}
.task-check{
  width:23px;height:23px;border-radius:7px;border:2px solid var(--line);background:var(--card);
  cursor:pointer;flex-shrink:0;margin-top:2px;display:grid;place-items:center;transition:all .15s;padding:0;
}
.task-check svg{width:13px;height:13px;opacity:0;transition:opacity .15s}
.task-check.on{background:var(--green);border-color:var(--green)}
.task-check.on svg{opacity:1}
.task-body{flex:1;min-width:0}
.task-title{font-weight:600;font-size:.96rem}
.task.done .task-title{color:var(--muted);text-decoration:line-through}
.task-meta{font-size:.8rem;color:var(--muted);margin-top:2px}
.task-go{flex-shrink:0;align-self:center}

/* ---------- flashcards ---------- */
.fc-stage{max-width:620px;margin:0 auto}
.fc-meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.74rem;color:var(--muted);margin-bottom:12px}
.fc-card{
  perspective:1400px;cursor:pointer;min-height:300px;outline:none;
}
.fc-inner{
  position:relative;width:100%;min-height:300px;
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.4,.1,.2,1);
}
.fc-card.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:36px 32px;text-align:center;gap:14px;
}
.fc-face.back{transform:rotateY(180deg);background:#FFFDF2;border-color:#EFE6BC}
.fc-q{font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.35}
.fc-a{font-size:1.02rem;line-height:1.6;color:var(--ink)}
.fc-hint{font-size:.74rem;color:var(--muted);position:absolute;bottom:14px;left:0;right:0}
.fc-actions{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.fc-actions .btn{min-width:150px}
.fc-done{padding:54px 24px;text-align:center}
.fc-done .big{font-family:var(--font-display);font-weight:800;font-size:2rem;margin-bottom:8px}
@media (prefers-reduced-motion:reduce){.fc-inner{transition:none}}

.kbd{font-family:var(--font-mono);font-size:.68rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--card);color:var(--ink-soft)}

/* ---------- questions ---------- */
.q-item{padding:20px 22px;border-bottom:1px solid var(--line)}
.q-item:last-child{border-bottom:none}
.q-head{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.q-enonce{font-weight:600;font-size:1rem;line-height:1.5}
.q-answer{
  margin-top:12px;padding:14px 16px;border-radius:10px;background:var(--marker-soft);
  border-left:4px solid var(--marker);font-size:.95rem;
}
.q-eval{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.q-eval .lbl{font-size:.8rem;color:var(--muted)}
.q-status{font-family:var(--font-mono);font-size:.7rem;padding:3px 9px;border-radius:6px}
.q-status.ok{background:var(--green-soft);color:var(--green)}
.q-status.ko{background:var(--red-soft);color:var(--red)}

/* ---------- examens ---------- */
.exam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:16px}
.exam-tile{padding:22px;display:flex;flex-direction:column;gap:10px}
.exam-tile .ex-title{font-family:var(--font-display);font-weight:600;font-size:1.08rem}
.exam-tile .ex-sub{font-size:.82rem;color:var(--muted)}
.exam-best{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft)}
.exam-best b{color:var(--green)}

/* passage d'examen */
.exam-top{
  position:sticky;top:0;z-index:10;background:var(--paper);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:22px;
}
.timer{font-family:var(--font-mono);font-weight:600;font-size:1.05rem;padding:7px 14px;border-radius:9px;background:var(--card);border:1px solid var(--line)}
.timer.low{background:var(--red-soft);color:var(--red);border-color:var(--red)}
.exam-q-card{padding:26px 26px 22px}
.exam-q-num{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);margin-bottom:8px;display:flex;gap:10px;align-items:center}
.exam-enonce{font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.4;margin-bottom:18px}
.opt{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  border:1.5px solid var(--line);background:var(--card);border-radius:11px;
  padding:13px 15px;margin-bottom:9px;cursor:pointer;font-family:var(--font-body);
  font-size:.95rem;line-height:1.45;transition:all .12s;color:var(--ink);
}
.opt:hover{border-color:var(--ink-soft)}
.opt .box{
  width:20px;height:20px;border-radius:6px;border:2px solid var(--line);flex-shrink:0;margin-top:1px;
  display:grid;place-items:center;transition:all .12s;
}
.opt .box svg{width:12px;height:12px;opacity:0}
.opt.sel{border-color:var(--blue);background:var(--blue-soft)}
.opt.sel .box{background:var(--blue);border-color:var(--blue)}
.opt.sel .box svg{opacity:1}
.opt.correct{border-color:var(--green);background:var(--green-soft)}
.opt.correct .box{background:var(--green);border-color:var(--green)}
.opt.correct .box svg{opacity:1}
.opt.wrong{border-color:var(--red);background:var(--red-soft)}
.opt.missed{border-style:dashed;border-color:var(--green)}
.multi-note{font-size:.78rem;color:var(--blue);margin-bottom:12px;font-weight:500}
.exam-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.q-dots{display:flex;flex-wrap:wrap;gap:5px;margin-top:22px}
.q-dot{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--card);
  font-family:var(--font-mono);font-size:.68rem;cursor:pointer;color:var(--ink-soft);
}
.q-dot.answered{background:var(--ink);color:#fff;border-color:var(--ink)}
.q-dot.now{outline:2px solid var(--marker);outline-offset:1px}
.q-dot.ok{background:var(--green);border-color:var(--green);color:#fff}
.q-dot.ko{background:var(--red);border-color:var(--red);color:#fff}

/* résultats */
.score-hero{text-align:center;padding:40px 20px 30px}
.score-big{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,8vw,4.5rem);line-height:1}
.score-big small{font-size:.35em;color:var(--muted);font-weight:600}
.score-verdict{margin-top:8px;color:var(--ink-soft)}
.theme-bars{display:flex;flex-direction:column;gap:13px;padding:22px}
.tb-row{display:grid;grid-template-columns:170px 1fr 52px;gap:12px;align-items:center;font-size:.88rem}
.tb-row .pct{font-family:var(--font-mono);font-size:.78rem;text-align:right}
@media (max-width:560px){.tb-row{grid-template-columns:1fr;gap:5px}.tb-row .pct{text-align:left}}

/* ---------- bilan ---------- */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-bottom:26px}
.stat-card{padding:18px}
.stat-num{font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1.1}
.stat-lbl{font-size:.78rem;color:var(--muted);margin-top:3px}
.advice{
  padding:18px 20px;border-radius:var(--radius);background:var(--marker-soft);
  border:1px solid #EFE0A0;font-size:.94rem;margin-bottom:26px;
}
.advice b{font-weight:600}

.section-gap{margin-top:34px}
.empty{padding:40px 24px;text-align:center;color:var(--muted)}

/* focus visible */
button:focus-visible,.fc-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.fade-in{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade-in{animation:none}}

/* ---------- texte formaté (flashcards, réponses, corrections) ---------- */
.fmt-list{margin:0;padding-left:1.25em;text-align:left;display:flex;flex-direction:column;gap:7px}
.fmt-list li{line-height:1.5}
.fmt-defs,.fmt-steps{display:flex;flex-direction:column;gap:7px;text-align:left}
.fmt-step{padding-left:14px;position:relative;font-variant-numeric:tabular-nums}
.fmt-step::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:99px;background:var(--marker)}
.fc-a .fmt-list,.fc-a .fmt-defs,.fc-a .fmt-steps{font-size:.97rem}
.fc-face.back{justify-content:flex-start;overflow:auto}
/* la carte grandit avec le contenu (pile en grille au lieu d'absolu) */
.fc-inner{display:grid}
.fc-face{position:relative;inset:auto;grid-area:1/1;min-height:300px}

/* ---------- glossaire ---------- */
button.gloss{
  font:inherit;color:inherit;background:none;border:none;padding:0;cursor:help;
  border-bottom:2px dotted var(--blue);border-radius:0;
}
button.gloss:hover{background:var(--blue-soft)}
.gloss-pop{
  position:absolute;z-index:200;padding:15px 17px;max-width:340px;
  border-color:#D8D4C4;box-shadow:0 8px 28px rgba(28,36,51,.16);
  animation:fadeIn .15s ease;
}
.gp-term{font-family:var(--font-display);font-weight:600;font-size:.98rem;margin-bottom:5px;text-transform:capitalize}
.gp-def{font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.gp-link{display:inline-block;margin-top:10px;font-size:.8rem;font-weight:600;color:var(--blue);text-decoration:none}
.gp-link:hover{text-decoration:underline}

/* ---------- visualiseur de cours ---------- */
.slide-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 16px}
.slide-count{font-family:var(--font-mono);font-size:.84rem;min-width:70px;text-align:center}
.slide-frame{overflow:hidden;display:grid;place-items:center;background:#fff}
.slide-frame img{width:100%;height:auto;display:block;user-select:none}
.btn.disabled{opacity:.4;pointer-events:none}
.kicker a{text-decoration:none}
.kicker a:hover{text-decoration:underline}
.q-answer{border-left-color:var(--marker)}

/* ---------- recherche ---------- */
.search-input{
  width:100%;max-width:640px;display:block;font-family:var(--font-body);font-size:1rem;
  padding:13px 17px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);
  color:var(--ink);margin-bottom:18px;box-shadow:var(--shadow);
}
.search-input:focus{outline:none;border-color:var(--blue)}
.search-out{margin-bottom:30px}
.sr-item{display:block;padding:15px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.sr-item:last-child{border-bottom:none}
a.sr-item:hover{background:var(--blue-soft)}
.sr-kind{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.sr-text{font-size:.92rem;line-height:1.5}
.sr-text mark{background:var(--marker);padding:0 2px;border-radius:3px}

/* ---------- exercices interactifs ---------- */
.train-meta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:.86rem;color:var(--ink-soft);margin:10px 0 18px}
.t-card{padding:26px}
.t-prompt{font-family:var(--font-display);font-weight:600;font-size:1.12rem;line-height:1.45;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.t-prompt code,.xl-opt code{font-family:var(--font-mono);font-size:.88em;background:var(--blue-soft);color:var(--blue);padding:2px 7px;border-radius:6px}
.t-big{font-size:1.5em;font-family:var(--font-mono)}
.t-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.t-input{
  font-family:var(--font-mono);font-size:1.15rem;width:130px;padding:11px 14px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);
}
.t-input:focus{outline:none;border-color:var(--blue)}
.t-verdict{margin-top:18px;padding:16px 18px;border-radius:12px;animation:fadeIn .2s ease}
.t-verdict.ok{background:var(--green-soft);border:1px solid #BCE3CC}
.t-verdict.ko{background:var(--red-soft);border:1px solid #EFC6C6}
.t-verdict-head{font-weight:700;font-family:var(--font-display);margin-bottom:6px}
.t-corrige{font-size:.92rem;line-height:1.55}

/* machine à bits */
.bit-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0 4px}
.bit-cell{display:flex;flex-direction:column;align-items:center;gap:5px}
.bit-w{font-family:var(--font-mono);font-size:.68rem;color:var(--muted)}
.bit{
  width:52px;height:52px;border-radius:12px;border:2px solid var(--line);background:var(--card);
  font-family:var(--font-mono);font-size:1.35rem;font-weight:600;cursor:pointer;color:var(--muted);
  transition:all .12s;display:grid;place-items:center;
}
.bit:hover:not(.fixed):not(:disabled){border-color:var(--ink-soft)}
.bit.on{background:var(--ink);border-color:var(--ink);color:var(--marker)}
.bit.fixed{cursor:default}
.bit-sum{text-align:center;font-family:var(--font-mono);font-size:.9rem;margin-top:10px;color:var(--ink-soft)}
@media (max-width:560px){.bit{width:40px;height:40px;font-size:1.1rem}}

/* périphériques */
.dev-icon{font-size:3.4rem;line-height:1;margin:8px 0 12px}
.cat-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.cat-good{border-color:var(--green)!important;background:var(--green-soft)!important;color:var(--green)!important}
.cat-bad{border-color:var(--red)!important;background:var(--red-soft)!important;color:var(--red)!important}

/* séquences à ordonner */
.seq-pool{display:flex;flex-direction:column;gap:9px}
.seq-pool .seq-step{order:999} /* les non-placées restent en bas, les validées prennent order=0,1,2… */
.seq-step{
  display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;
  border:1.5px solid var(--line);background:var(--card);border-radius:11px;
  padding:12px 15px;cursor:pointer;font-family:var(--font-body);font-size:.93rem;line-height:1.45;color:var(--ink);
  transition:all .12s;
}
.seq-step:hover:not(.done){border-color:var(--ink-soft)}
.seq-step.done{border-color:var(--green);background:var(--green-soft);cursor:default}
.seq-num{font-family:var(--font-mono);font-weight:600;color:var(--green);min-width:20px}
.seq-step.shake{animation:shake .3s;border-color:var(--red)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.seq-step.shake{animation:none}}

/* URL */
.url-line{
  font-family:var(--font-mono);font-size:clamp(.85rem,2.4vw,1.05rem);background:var(--card);
  border:1.5px solid var(--line);border-radius:11px;padding:14px 16px;
  display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;
}
.url-part{
  font:inherit;border:none;background:none;color:var(--ink);cursor:pointer;
  padding:3px 4px;border-radius:7px;border:1.5px dashed transparent;
}
.url-part:hover:not(:disabled){border-color:var(--blue);background:var(--blue-soft)}
.url-sep{color:var(--muted)}

/* mini-feuille Excel */
.xl{border-collapse:collapse;font-family:var(--font-body);font-size:.88rem;margin:0 auto}
.xl th{
  background:#EFEDE4;border:1px solid var(--line);font-family:var(--font-mono);font-weight:400;
  font-size:.68rem;color:var(--muted);padding:4px 10px;min-width:34px;text-align:center;
}
.xl td{border:1px solid var(--line);background:var(--card);padding:7px 16px;text-align:left}
.xl .xl-h{font-weight:600;background:#FAF9F4}
.xl-opts{display:flex;flex-direction:column;gap:9px;align-items:stretch}
.xl-opt{justify-content:flex-start}