/* Page victime — extensions au CSS deepfake principal */

.victim-layout{max-width:900px}

.check-list{
  list-style:none;padding:0;margin:.5rem 0;
  display:grid;gap:.4rem;
}
.check-list li{
  position:relative;padding:.55rem .75rem .55rem 2rem;
  background:var(--bg-elev);border:1px solid var(--border);
  border-radius:8px;font-size:.9rem;line-height:1.5;
  color:var(--text);
}
.check-list li::before{
  content:"→";
  position:absolute;left:.65rem;top:.55rem;
  color:var(--accent);font-weight:900;font-size:1rem;
}
.check-list a{color:var(--secondary);text-decoration:underline}
.check-list a:hover{color:var(--accent)}
.check-list strong{color:var(--text)}
.check-list code{
  padding:.1rem .35rem;background:var(--accent-soft);color:var(--accent);
  border-radius:4px;font-size:.85em;font-family:ui-monospace,monospace;
}

.sub-title{
  font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--secondary);margin:1rem 0 .35rem;font-weight:800;
  padding-bottom:.25rem;border-bottom:1px solid var(--border);
}

.law-block{
  margin:.75rem 0;padding:.85rem 1rem;
  border-left:3px solid var(--secondary);
  background:rgba(93,212,247,0.06);border-radius:0 8px 8px 0;
}
.law-title{
  font-weight:800;color:var(--secondary);font-size:.85rem;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;
}
.law-quote{
  margin:.5rem 0 0;padding:.75rem 1rem;
  background:var(--bg-deep);border:1px dashed var(--border-strong);
  border-radius:6px;font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:.82rem;line-height:1.6;color:var(--text);
  font-style:italic;
}

/* Bouton switch de langue (dans .top-controls) */
.lang-switch-btn{
  padding:.5rem .8rem;border-radius:999px;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-muted);text-decoration:none;
  font-weight:700;font-size:.75rem;letter-spacing:.05em;
  backdrop-filter:blur(10px);
  transition:background var(--tween),color var(--tween),border-color var(--tween);
  white-space:nowrap;
}
.lang-switch-btn:hover{color:var(--secondary);border-color:var(--secondary);background:rgba(93,212,247,0.10)}

/* Bloc "besoin de parler à quelqu'un" — apaisant, pas alarmant */
.urgence-block{
  margin-top:1rem;padding:.85rem 1rem;
  border:1px solid var(--secondary);border-left-width:3px;
  border-radius:8px;background:rgba(93,212,247,0.06);
}
.urgence-title{
  font-size:.85rem;font-weight:700;color:var(--secondary);
  margin-bottom:.5rem;
}
.urgence-list{
  list-style:none;padding:0;margin:0;display:grid;gap:.35rem;
}
.urgence-list li{
  font-size:.85rem;line-height:1.55;color:var(--text);
  padding-left:1rem;position:relative;
}
.urgence-list li::before{
  content:"·";position:absolute;left:.2rem;top:-.2rem;
  color:var(--secondary);font-weight:900;font-size:1.4rem;
}
.urgence-list strong{color:var(--secondary);font-family:ui-monospace,SFMono-Regular,monospace;font-size:.95em}
.urgence-list a{color:var(--secondary);text-decoration:underline}

/* ─── Container des boutons du haut (quick-exit / lang / mode) ─── */
/* Flex row-reverse : le quick-exit reste toujours le plus à droite,
   les autres s'empilent à sa gauche automatiquement. */
.top-controls{
  position:fixed;top:12px;right:12px;z-index:100;
  display:flex;flex-direction:row-reverse;align-items:center;
  gap:.5rem;flex-wrap:wrap;
  max-width:calc(100vw - 24px);
  justify-content:flex-end;
}
.top-controls > *{ position:static !important; top:auto !important; right:auto !important; left:auto !important; }

.quick-exit-btn{
  padding:.55rem 1rem;border-radius:8px;
  background:var(--danger);color:#1a0000;text-decoration:none;
  font-weight:800;font-size:.85rem;letter-spacing:.03em;
  border:1px solid var(--danger);
  box-shadow:0 4px 20px -4px rgba(255,42,26,0.5);
  transition:transform var(--tween),box-shadow var(--tween);
  white-space:nowrap;
}
.quick-exit-btn:hover{transform:translateY(-1px);box-shadow:0 6px 25px -4px rgba(255,42,26,0.6)}
.quick-exit-btn span{margin-right:.2rem;font-weight:900}

@media (max-width:640px){
  .top-controls{gap:.35rem}
  .quick-exit-btn{padding:.4rem .7rem;font-size:.72rem}
  .back-to-menu{top:64px}
}

/* ─── Privacy banner ─────────────────────────────────────────────── */
/* Full-width en top fixe, z-index le plus haut. Quand elle est présente,
   body reçoit .has-priv-banner et les éléments fixed du haut sont poussés
   vers le bas pour ne pas chevaucher. */
.priv-banner{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:.7rem 1rem;
  background:linear-gradient(135deg,rgba(255,90,42,0.15),var(--bg-elev));
  border-bottom:1px solid var(--accent);
  display:flex;gap:1rem;align-items:center;justify-content:space-between;
  font-size:.85rem;
  backdrop-filter:blur(10px);
  animation:slideDown .4s ease-out;
}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.priv-msg{flex:1;line-height:1.5;color:var(--text);max-width:70ch}
.priv-close{
  padding:.4rem .8rem;background:var(--bg-card);color:var(--text);
  border:1px solid var(--border-strong);border-radius:6px;
  cursor:pointer;font-size:.75rem;font-weight:600;flex-shrink:0;
  transition:background var(--tween);
}
.priv-close:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

/* Quand la bannière est visible, décale tout ce qui est fixed en haut */
body.has-priv-banner{padding-top:64px}
body.has-priv-banner .top-controls{top:76px}
body.has-priv-banner .back-to-menu{top:76px}
@media (max-width:640px){
  body.has-priv-banner{padding-top:110px}
  body.has-priv-banner .top-controls{top:118px}
  body.has-priv-banner .back-to-menu{top:170px}
}

/* ─── Sticky helplines bar ───────────────────────────────────────── */
.sticky-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  padding:.55rem .85rem;
  background:rgba(8,17,30,0.95);backdrop-filter:blur(12px);
  border-top:1px solid var(--border-strong);
  display:flex;gap:.75rem;align-items:center;justify-content:center;
  transition:transform .3s ease-out;
}
.sticky-bar.is-collapsed{transform:translateY(85%)}
.sticky-bar.is-collapsed .sticky-nums{opacity:0}
.sticky-nums{
  display:flex;flex-wrap:wrap;gap:.5rem;
  transition:opacity .2s;
}
.sticky-num{
  display:flex;flex-direction:column;
  padding:.35rem .75rem;border-radius:6px;
  background:var(--bg-elev);border:1px solid var(--border-strong);
  color:var(--text);text-decoration:none;
  font-size:.72rem;line-height:1.2;text-align:center;
  transition:border-color var(--tween),background var(--tween);
}
.sticky-num:hover{border-color:var(--accent);background:var(--accent-soft)}
.sticky-num strong{color:var(--accent);font-size:1rem;font-family:ui-monospace,monospace;letter-spacing:.03em}
.sticky-num span{color:var(--text-soft);font-size:.65rem;margin-top:.1rem}
.sticky-close{
  padding:.35rem .55rem;background:transparent;color:var(--text-soft);
  border:1px solid var(--border);border-radius:6px;cursor:pointer;
  font-size:.85rem;line-height:1;
  transition:color var(--tween),border-color var(--tween);
}
.sticky-close:hover{color:var(--danger);border-color:var(--danger)}

/* Padding pour ne pas être masqué par la sticky bar */
body{padding-bottom:60px}
@media (max-width:640px){
  body{padding-bottom:80px}
  .sticky-num{font-size:.65rem}
  .sticky-num strong{font-size:.85rem}
}

/* ─── FAQ ─────────────────────────────────────────────────────────── */
.faq{display:grid;gap:.5rem}
.faq details{
  padding:.65rem .85rem;
  background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;
  transition:border-color var(--tween),background var(--tween);
}
.faq details:hover{border-color:var(--secondary);background:rgba(93,212,247,0.05)}
.faq details[open]{border-color:var(--secondary)}
.faq summary{
  cursor:pointer;font-weight:700;color:var(--text);
  padding:.2rem 0;list-style:none;
  display:flex;align-items:center;gap:.6rem;
  font-size:.9rem;
  transition:color var(--tween);
}
.faq summary:hover{color:var(--secondary)}
.faq summary::before{
  content:"?";
  display:inline-grid;place-items:center;
  width:22px;height:22px;flex-shrink:0;
  border-radius:50%;background:var(--secondary);color:var(--bg-deep);
  font-weight:900;font-size:.8rem;
}
.faq details[open] summary::before{content:"−"}
.faq details p{
  margin:.6rem 0 .2rem;padding-left:32px;
  font-size:.85rem;color:var(--text-muted);line-height:1.55;
}

/* ─── Timeline ───────────────────────────────────────────────────── */
.timeline{
  list-style:none;padding:0;margin:.75rem 0;
  display:grid;gap:.35rem;
  position:relative;
}
/* Trait vertical entre la colonne de temps et la colonne de contenu */
.timeline::before{
  content:"";position:absolute;
  left:105px;top:0;bottom:0;
  width:2px;background:linear-gradient(to bottom,var(--accent),var(--secondary));
  opacity:.3;
}
.timeline-item{
  display:grid;
  grid-template-columns:90px 1fr;
  grid-template-areas:
    "time title"
    "time detail";
  column-gap:2rem;
  row-gap:.15rem;
  padding:.55rem .7rem .55rem 0;
  border-radius:6px;
  opacity:0;transform:translateX(-10px);
  transition:opacity .4s ease-out,transform .4s ease-out;
  position:relative;
}
.timeline-item.is-visible{opacity:1;transform:translateX(0)}
/* Dot centré sur le trait vertical, entre les deux colonnes */
.timeline-item::before{
  content:"";position:absolute;
  left:99px;top:.9rem;
  width:14px;height:14px;border-radius:50%;
  background:var(--bg-deep);border:2px solid var(--accent);
  z-index:1;
}
.timeline-item.is-visible::before{background:var(--accent)}
.tl-time{
  grid-area:time;
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:.72rem;font-weight:700;color:var(--accent);
  text-align:right;line-height:1.4;
  padding-top:.15rem;
}
.tl-title{
  grid-area:title;
  font-weight:700;color:var(--text);font-size:.9rem;
}
.tl-detail{
  grid-area:detail;
  color:var(--text-muted);font-size:.8rem;line-height:1.5;
}
@media (max-width:640px){
  .timeline::before{left:80px}
  .timeline-item{grid-template-columns:65px 1fr;column-gap:1.5rem}
  .timeline-item::before{left:74px}
}

/* ─── Do / Don't grid (proches) ──────────────────────────────────── */
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:.75rem 0}
.do,.dont{
  padding:.85rem 1rem;border-radius:8px;
  border:1px solid var(--border);
}
.do{background:var(--ok-soft);border-color:var(--ok)}
.dont{background:var(--danger-soft);border-color:var(--danger)}
.dd-title{
  font-size:.85rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  margin:0 0 .5rem;
}
.do .dd-title{color:var(--ok)}
.dont .dd-title{color:var(--danger)}
.do .check-list li,.dont .check-list li{background:transparent;border:none;padding:.3rem 0 .3rem 1.5rem;font-size:.82rem}
.do .check-list li::before{content:"✓";color:var(--ok);left:0}
.dont .check-list li::before{content:"✗";color:var(--danger);left:0}
@media (max-width:640px){ .do-dont{ grid-template-columns:1fr } }

/* ─── Tuto step-by-step (Pharos, IC3…) ───────────────────────────── */
.tuto-block{
  margin-top:.75rem;padding:.6rem .85rem;
  background:var(--bg-deep);border:1px solid var(--border-strong);border-radius:8px;
}
.tuto-block[open]{border-color:var(--accent)}
.tuto-block > summary{
  cursor:pointer;font-size:.85rem;color:var(--text);
  padding:.15rem 0;list-style:none;
  transition:color var(--tween);
}
.tuto-block > summary::-webkit-details-marker{display:none}
.tuto-block > summary:hover{color:var(--accent)}
.tuto-block[open] > summary{color:var(--accent);margin-bottom:.55rem}
.tuto-steps{
  list-style:none;padding:0;margin:.5rem 0 0;
  display:grid;gap:.5rem;
  counter-reset:tuto-step;
}
.tuto-steps > li{
  display:grid;grid-template-columns:32px 1fr;gap:.75rem;
  padding:.55rem .7rem;background:var(--bg-elev);
  border:1px solid var(--border);border-radius:6px;
  transition:border-color var(--tween),background var(--tween);
}
.tuto-steps > li:hover{border-color:var(--accent-soft);background:var(--bg-card)}
.step-num{
  display:grid;place-items:center;
  width:28px;height:28px;
  background:var(--accent);color:var(--bg-deep);
  border-radius:50%;
  font-weight:900;font-size:.82rem;font-family:ui-monospace,monospace;
  margin-top:.1rem;
}
.step-body{min-width:0}
.step-title{
  font-weight:700;color:var(--text);font-size:.9rem;
  margin-bottom:.25rem;line-height:1.35;
}
.step-desc{
  font-size:.82rem;line-height:1.55;color:var(--text-muted);
}
.step-desc code{
  padding:.1rem .35rem;background:var(--accent-soft);color:var(--accent);
  border-radius:4px;font-size:.85em;font-family:ui-monospace,monospace;
}
.step-desc strong{color:var(--text)}
.step-sublist{
  list-style:none;padding:.35rem 0 0 0;margin:.35rem 0 0 0;
  display:grid;gap:.25rem;
}
.step-sublist > li{
  padding-left:1rem;position:relative;font-size:.8rem;line-height:1.5;
}
.step-sublist > li::before{
  content:"▸";position:absolute;left:0;top:0;
  color:var(--accent);font-size:.75rem;
}
.tuto-note{
  margin-top:.6rem;padding:.55rem .7rem;
  background:var(--danger-soft);border:1px solid var(--danger);
  border-left-width:3px;border-radius:0 6px 6px 0;
  font-size:.78rem;line-height:1.55;color:var(--text);
}
.tuto-note strong{color:var(--danger)}

/* ─── Publics spécifiques (details) ──────────────────────────────── */
.pub-block{
  margin:.5rem 0;padding:.7rem 1rem;
  border:1px solid var(--border);border-radius:8px;
  background:var(--bg-elev);
  transition:border-color var(--tween),background var(--tween);
}
.pub-block:hover{border-color:var(--secondary);background:rgba(93,212,247,0.05)}
.pub-block[open]{border-color:var(--secondary)}
.pub-block summary{
  cursor:pointer;font-size:.95rem;color:var(--text);
  padding:.2rem 0;list-style:none;
  transition:color var(--tween);
}
.pub-block summary:hover{color:var(--secondary)}
.pub-block summary::before{
  content:"▸ ";color:var(--secondary);font-weight:900;
  display:inline-block;transition:transform .2s;
}
.pub-block[open] summary::before{content:"▾ "}

/* ─── Mail generator ─────────────────────────────────────────────── */
.mail-form{display:grid;gap:.5rem;margin-top:.5rem}
.mail-form label{
  display:grid;gap:.25rem;
  font-size:.78rem;color:var(--text-muted);font-weight:600;
}
.mail-form input{
  padding:.5rem .7rem;border-radius:6px;
  background:var(--bg-deep);border:1px solid var(--border);color:var(--text);
  font-family:inherit;font-size:.85rem;
}
.mail-form input:focus{outline:2px solid var(--secondary);outline-offset:2px;border-color:var(--secondary)}

/* Champ date : le curseur pointeur sur toute la zone + icône calendrier visible */
.mail-form input[type="date"]{
  cursor:pointer;color-scheme:dark;
  font-family:inherit;
  padding-right:.5rem;
  min-height:2.3rem;
}
.mail-form input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  filter:invert(0.85) sepia(1) saturate(3) hue-rotate(160deg);
  opacity:.85;padding:2px;margin-left:.25rem;
  transition:opacity .2s,transform .2s;
}
.mail-form input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;transform:scale(1.15)}
.mail-form input[type="date"]::-webkit-datetime-edit{color:var(--text)}
.mail-form input[type="date"]::-webkit-datetime-edit-fields-wrapper{padding:0}
/* Sur Firefox, le picker natif s'affiche via showPicker() en JS */
.date-label{position:relative}
.mail-output{margin-top:.75rem;display:grid;gap:.5rem}
.mail-output textarea{
  width:100%;padding:.7rem;border-radius:6px;
  background:var(--bg-deep);border:1px solid var(--border);color:var(--text);
  font-family:ui-monospace,SFMono-Regular,monospace;font-size:.78rem;line-height:1.55;
  resize:vertical;
}
.mail-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.mail-warn{
  font-size:.75rem;color:var(--text-soft);font-style:italic;
  padding:.5rem .7rem;background:rgba(93,212,247,0.06);border-radius:6px;
  border-left:2px solid var(--secondary);
}

/* ─── Mode "1 minute" (dans .top-controls) ────────────────────────── */
.view-mode-btn{
  padding:.5rem .8rem;border-radius:8px;
  background:var(--bg-card);color:var(--secondary);
  border:1px solid var(--secondary);
  font-weight:700;font-size:.75rem;letter-spacing:.03em;
  cursor:pointer;backdrop-filter:blur(10px);
  transition:background var(--tween),color var(--tween);
  white-space:nowrap;
}
.view-mode-btn:hover{background:var(--secondary);color:var(--bg-deep)}
@media (max-width:640px){
  .view-mode-btn{font-size:.7rem;padding:.35rem .55rem}
}

body.mode-quick .hide-in-quick{display:none !important}
body.mode-quick .intro{
  animation:panelIn .4s ease-out;
}

/* ─── Read-aloud button ──────────────────────────────────────────── */
.read-aloud-btn{
  position:fixed;bottom:90px;right:12px;z-index:49;
  padding:.6rem .9rem;border-radius:999px;
  background:var(--bg-card);color:var(--secondary);
  border:1px solid var(--secondary);
  font-weight:700;font-size:.8rem;
  cursor:pointer;backdrop-filter:blur(10px);
  box-shadow:0 4px 15px -3px rgba(0,0,0,.3);
  transition:background var(--tween);
}
.read-aloud-btn:hover{background:var(--secondary);color:var(--bg-deep)}

/* ─── TOC (sommaire cliquable) ───────────────────────────────────── */
.toc-wrap{
  margin:0 0 1rem;padding:.85rem 1rem;
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);
  animation:panelIn .35s ease-out;
  transition:padding .3s ease-out;
}
.toc-wrap.is-hidden{padding:.5rem 1rem}
.toc-wrap.is-hidden .toc-links{max-height:0;opacity:0;margin-top:0;pointer-events:none}
.toc-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
}
.toc-title{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-soft);font-family:ui-monospace,monospace;
}
.toc-toggle{
  padding:.3rem .6rem;background:var(--bg-deep);color:var(--text-muted);
  border:1px solid var(--border);border-radius:6px;cursor:pointer;
  font-size:.7rem;font-weight:600;
  transition:color var(--tween),border-color var(--tween);
}
.toc-toggle:hover{color:var(--secondary);border-color:var(--secondary)}
.toc-links{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:.35rem;margin-top:.75rem;
  transition:max-height .3s ease-out,opacity .3s ease-out,margin .3s ease-out;
  max-height:800px;opacity:1;overflow:hidden;
}
.toc-link{
  padding:.4rem .65rem;border-radius:6px;
  background:var(--bg-deep);border:1px solid var(--border);
  color:var(--text-muted);text-decoration:none;
  font-size:.78rem;line-height:1.3;
  transition:color var(--tween),border-color var(--tween),background var(--tween);
  display:block;
}
.toc-link:hover{
  color:var(--secondary);border-color:var(--secondary);
  background:rgba(93,212,247,0.08);
}

/* Section ciblée : highlight temporaire */
main section.panel.is-target{
  animation:targetFlash 2s ease-out;
}
@keyframes targetFlash{
  0%{box-shadow:0 0 0 3px var(--secondary),0 0 30px -5px var(--secondary)}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ─── PROGRESS BAR (barre de lecture en haut) ────────────────────── */
.read-progress{
  position:fixed;top:0;left:0;right:0;height:3px;
  z-index:150;background:transparent;pointer-events:none;
}
body.has-priv-banner .read-progress{top:64px}
@media (max-width:640px){
  body.has-priv-banner .read-progress{top:110px}
}
.read-progress-fill{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--secondary));
  transition:width .1s linear;
  box-shadow:0 0 10px -1px var(--secondary);
}

/* ─── MODE FOCUS ─────────────────────────────────────────────────── */
.focus-mode-btn{
  padding:.5rem .8rem;border-radius:8px;
  background:var(--bg-card);color:var(--accent);
  border:1px solid var(--accent);
  font-weight:700;font-size:.75rem;letter-spacing:.03em;
  cursor:pointer;backdrop-filter:blur(10px);
  transition:background var(--tween),color var(--tween);
  white-space:nowrap;
}
.focus-mode-btn:hover{background:var(--accent-soft)}
body.mode-focus .focus-mode-btn{background:var(--accent);color:var(--bg-deep)}

body.mode-focus .toc-wrap,
body.mode-focus .sticky-bar{display:none}
body.mode-focus main section.panel.focus-hidden{display:none !important}
body.mode-focus main section.panel:not(.focus-hidden){
  animation:panelIn .5s cubic-bezier(.2,.8,.2,1) both;
  min-height:60vh;
}

/* Barre de nav focus (fixe en bas) */
.focus-nav{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  z-index:60;
  display:grid;grid-template-columns:auto 1fr auto;
  gap:1rem;align-items:center;
  padding:.75rem 1.2rem;
  background:rgba(8,17,30,0.95);backdrop-filter:blur(12px);
  border:1px solid var(--border-strong);border-radius:12px;
  box-shadow:0 8px 30px -5px rgba(0,0,0,.5);
  max-width:calc(100vw - 32px);
  animation:slideUp .4s ease-out;
}
@keyframes slideUp{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.focus-btn{padding:.55rem 1rem;font-size:.85rem;white-space:nowrap;font-weight:700}
.focus-btn:disabled{opacity:.4;cursor:not-allowed}
.focus-progress{min-width:200px}
.focus-progress-text{
  font-size:.72rem;color:var(--text-soft);font-family:ui-monospace,monospace;
  text-align:center;margin-bottom:.3rem;
}
.focus-progress-bar{
  height:4px;background:var(--bg-deep);border-radius:999px;overflow:hidden;
}
.focus-progress-bar span{
  display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--secondary));
  transition:width .4s cubic-bezier(.2,.8,.2,1);
}
@media (max-width:640px){
  .focus-nav{grid-template-columns:1fr;gap:.5rem;padding:.55rem .75rem;bottom:10px}
  .focus-progress{order:-1}
  .focus-btn{padding:.5rem .7rem;font-size:.75rem}
}

/* En mode focus, la sticky-bar en bas doit laisser de la place pour la focus-nav */
body.mode-focus{padding-bottom:120px}

/* ─── Wizard "je ne sais pas par où commencer" ───────────────────── */
.wiz-modal{
  position:fixed;inset:0;z-index:250;
  background:rgba(4,8,20,0.85);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:1rem;
  animation:wizFadeIn .3s ease-out;
}
@keyframes wizFadeIn{from{opacity:0}to{opacity:1}}
.wiz-box{
  position:relative;
  max-width:520px;width:100%;
  background:var(--bg-elev);border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:2rem 1.5rem 1.5rem;
  box-shadow:0 20px 60px -10px rgba(0,0,0,.7);
  animation:wizSlideIn .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes wizSlideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.wiz-close{
  position:absolute;top:.5rem;right:.5rem;
  width:36px;height:36px;border-radius:50%;
  background:transparent;color:var(--text-soft);
  border:1px solid var(--border);cursor:pointer;
  font-size:1.3rem;line-height:1;font-weight:700;
  transition:color var(--tween),border-color var(--tween);
}
.wiz-close:hover{color:var(--danger);border-color:var(--danger)}
.wiz-step-num{
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);font-family:ui-monospace,monospace;margin-bottom:.75rem;
}
.wiz-q,.wiz-priority{
  font-size:1.15rem;font-weight:800;line-height:1.35;
  margin:0 0 1rem;color:var(--text);
}
.wiz-priority-desc{
  font-size:.9rem;color:var(--text-muted);line-height:1.6;margin:0 0 1.25rem;
}
.wiz-opts,.wiz-recos{display:grid;gap:.5rem}
.wiz-opt,.wiz-reco{
  padding:.75rem 1rem;text-align:left;
  background:var(--bg-deep);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-size:.9rem;text-decoration:none;
  cursor:pointer;line-height:1.4;
  transition:border-color var(--tween),background var(--tween),color var(--tween);
  display:block;
}
.wiz-opt:hover,.wiz-reco:hover{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent);
}
.wiz-btn{margin-top:1rem;width:100%}
.wiz-trigger{
  position:fixed;bottom:90px;left:12px;z-index:49;
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:var(--bg-deep);
  border:none;cursor:pointer;
  font-size:1.3rem;font-weight:900;line-height:1;
  box-shadow:0 4px 15px -3px rgba(255,90,42,0.5);
  transition:transform var(--tween);
}
.wiz-trigger:hover{transform:scale(1.1)}
@media (max-width:640px){
  .wiz-trigger{bottom:80px;left:8px;width:38px;height:38px;font-size:1.1rem}
  .wiz-box{padding:1.5rem 1rem 1rem}
}

/* ─── Timeline : progression cochable ─────────────────────────────── */
.tl-progress{
  display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;
  padding:.65rem .85rem;margin-bottom:.75rem;
  background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:8px;
}
.tl-progress-info{display:flex;flex-direction:column;gap:.15rem}
.tl-progress-count{
  font-size:1.1rem;font-weight:800;color:var(--accent);
  font-family:ui-monospace,monospace;
}
.tl-progress-label{font-size:.72rem;color:var(--text-soft);letter-spacing:.05em}
.tl-reset{
  padding:.4rem .8rem;background:transparent;color:var(--text-muted);
  border:1px solid var(--border);border-radius:6px;
  font-size:.72rem;font-weight:600;cursor:pointer;
  transition:color var(--tween),border-color var(--tween);
}
.tl-reset:hover{color:var(--danger);border-color:var(--danger)}
.tl-progress-bar{
  grid-column:1 / -1;
  height:4px;background:var(--bg-deep);border-radius:999px;overflow:hidden;
}
.tl-progress-bar span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--secondary));
  transition:width .4s cubic-bezier(.2,.8,.2,1);
}

/* Checkbox pour chaque timeline-item */
.tl-check{
  position:absolute;top:.6rem;right:.6rem;
  width:26px;height:26px;border-radius:50%;
  background:transparent;color:var(--ok);
  border:2px solid var(--text-soft);
  cursor:pointer;
  display:grid;place-items:center;
  font-weight:900;font-size:.8rem;
  transition:border-color var(--tween),background var(--tween),color var(--tween);
}
.tl-check:hover{border-color:var(--ok);color:var(--ok)}
.tl-check.is-done{
  background:var(--ok);color:#001100;border-color:var(--ok);
}
.timeline-item.is-completed{opacity:.65}
.timeline-item.is-completed .tl-title{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}

/* ─── Mail form : select destinataire ─────────────────────────────── */
.mail-form select{
  padding:.5rem .7rem;border-radius:6px;
  background:var(--bg-deep);border:1px solid var(--border);color:var(--text);
  font-family:inherit;font-size:.85rem;
  cursor:pointer;
  min-height:2.3rem;
}
.mail-form select:focus{outline:2px solid var(--secondary);outline-offset:2px;border-color:var(--secondary)}

/* ─── PRINT: checklist only ──────────────────────────────────────── */
/* À l'écran, la checklist source dans <main> reste cachée. */
.print-only{display:none}
/* Le clone #print-clone créé en JS reste caché à l'écran aussi (media screen). */
@media screen{
  #print-clone{position:absolute;left:-99999px;top:-99999px;visibility:hidden}
}
@media print{
  /* Empêche l'impression de la page complète : on cache tout */
  body.printing > *{display:none !important}
  /* Sauf le clone qui contient uniquement la checklist */
  body.printing > #print-clone{
    display:block !important;visibility:visible !important;
    position:static !important;left:auto !important;top:auto !important;
    padding:1cm;background:white !important;color:black !important;
    font-family:Helvetica,Arial,sans-serif;font-size:11pt;
  }
  body.printing > #print-clone *{
    color:black !important;background:transparent !important;
    visibility:visible !important;
  }
  body.printing{background:white !important;color:black !important;padding:0 !important}
  #print-clone h1{font-size:16pt;margin:0 0 .5cm;border-bottom:2px solid black;padding-bottom:.2cm}
  #print-clone h2{font-size:12pt;margin:.5cm 0 .2cm;text-transform:uppercase;letter-spacing:.05em}
  #print-clone p,#print-clone li{line-height:1.5;margin:.15cm 0}
  #print-clone ul{list-style:none;padding-left:0}
  #print-clone strong{font-weight:bold}
  /* Empêche les sauts de page dans un item */
  #print-clone p,#print-clone li{page-break-inside:avoid}
  /* Toujours cacher les éléments UI non pertinents */
  .priv-banner,.top-controls,.back-to-menu,.quick-exit-btn,.sticky-bar,
  .read-aloud-btn,.read-progress,.focus-nav,.toc-wrap{display:none !important}
}

@media (max-width:640px){
  .check-list li{font-size:.85rem;padding:.5rem .6rem .5rem 1.75rem}
}