/* ============================================================
   ACCIDENTS APNÉE — styles.css (complet, cohérent, robuste)
   - Mode écran : slides full-screen + navbar + drawer + lightbox
   - Mode impression/PDF : deck cloné (#print-deck) en flux A4
   - Fix “Milieux” : backgrounds CSS remplacés par <img> injectée
   ============================================================ */

/* =========================
   0) Variables
   ========================= */
:root{
  /* Spacing / layout */
  --top-band: 14px;
  --outer-pad: 6px;
  --panel-pad: 6px;
  --gap: 6px;

  /* Radius */
  --radius-xl: 18px;
  --radius-lg: 16px;
  --radius-md: 12px;

  /* Navbar */
  --nav-h: 46px;
  --nav-pad-y: 12px;
  --nav-pad-x: 6px;
  --nav-bottom: 6px;
  --nav-gap: 6px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Backgrounds (screen only) */
  --bg-default: url("images/default.jpeg");
  --bg-default-fallback: url("images/default.jpg");
  --bg-pool: url("images/piscine.jpeg");
  --bg-pit:  url("images/fosse.jpeg");
  --bg-lake: url("images/lac.jpeg");
  --bg-sea:  url("images/mer.jpeg");

  /* Colors */
  --ink: rgba(15,23,42,.95);
  --muted: rgba(37,99,235,.78);

  --panel-bg: rgba(203,213,225,.0);
  --panel-line: rgba(148,163,184,.35);
  --panel-shadow: 0 14px 35px rgba(2,6,23,.25);

  --card-bg: rgba(241,245,249,.70);
  --card-line: rgba(148,163,184,.30);

  --btn-bg: rgba(145,160,180,.7);

  --pill-bg: rgba(226,232,240,.70);
  --pill-line: rgba(148,163,184,.32);
}

/* =========================
   1) Reset / base
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-size:14px;
  line-height:1.28;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  overflow:hidden; /* app full screen */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3{ margin:0 0 0px; letter-spacing:.1px; }
h1{ font-size:27px; font-weight:950; }
h2{ font-size:17px; font-weight:900; }
h3{ font-size:13px; font-weight:900; }

p{ margin:0 0 8px; }
small{ font-size:12px; color: var(--muted); }
b{ font-weight:900; }

.muted{ color: var(--muted); }
.mt-6{ margin-top:6px; }
.print-break{ display:block; }
.print-break:empty{ height:0; margin:0; padding:0; }
h1.print-break,
h2.print-break,
h3.print-break{ height:auto; }

button:focus-visible,
a:focus-visible,
.drawer-item:focus-visible{
  outline: 2px solid rgba(56,189,248,.9);
  outline-offset: 2px;
}

ul.bullets{
  margin:0;
  padding-left:1.2em;
  list-style-position: outside;
}
ul.bullets li{ margin:0; color: rgba(15,23,42,.90); }

/* =========================
   2) Stage / deck
   ========================= */
.stage{
  position:relative;
  width:100vw;
  height:100dvh;
  min-height:100vh;
  overflow:hidden;
  padding: var(--outer-pad);
  background:
    radial-gradient(1100px 700px at 30% 20%, rgba(59,130,246,.22), transparent 75%),
    radial-gradient(900px 650px at 75% 35%, rgba(6,182,212,.18), transparent 75%),
    radial-gradient(1100px 700px at 55% 90%, rgba(16,185,129,.16), transparent 80%),
    linear-gradient(180deg, #0b1220 0%, #0b1524 50%, #08101c 100%);
}

.deck{
  position:relative;
  width:100%;
  height:100%;
}

/* =========================
   3) Slides écran
   ========================= */
.slide{
  margin:0 !important;
  position:absolute;
  inset:0;

  /* réserve nav + safe-area en bas */
  padding: var(--outer-pad);
  padding-bottom: calc(var(--nav-h) + var(--nav-gap) + var(--nav-bottom) + var(--safe-b));
  padding-top: 0 !important;

  display:none;
  overflow:hidden;
}
.slide.active{ display:block; }

/* Bande haute */
.slide .content{
  margin-top: var(--top-band);
  height: calc(100% - var(--top-band));
}

/* Fond par défaut (screen only) */
.slide::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--bg-default), var(--bg-default-fallback);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
  z-index:0;
}

/* Fond dédié si .bg présent */
.slide .bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
  z-index:0; /* couvre le ::before */
}

/* voile sombre */
.slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.28);
  z-index:1;
}

/* contenu au-dessus */
.slide > *:not(.bg){ position:relative; z-index:2; }

/* =========================
   4) Panel / cards / grids
   ========================= */
.content{
  height:100%;
  min-height:0;
  padding: var(--panel-pad);
  border-radius: var(--radius-xl);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 7px 9px;
  border-radius: var(--radius-lg);
  background: rgba(226,232,240,.55);
  border: 1px solid rgba(148,163,184,.26);
}

.crumb{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  font-size:18px;
}

.pills{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-line);
  font-size:12px;
  font-weight:800;
  color: rgba(15,23,42,.85);
}
.pill.blue  { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.30); color:#1e40af; }
.pill.teal  { background: rgba(6,182,212,.12); border-color: rgba(6,182,212,.30); color:#0e7490; }
.pill.green { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.30); color:#047857; }
.pill.amber { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.32); color:#92400e; }
.pill.red   { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.30); color:#991b1b; }

.grid{
  display:grid;
  gap: var(--gap);
  min-height:0;
}
.grid.cols-1{ grid-template-columns: 1fr; }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.situations-grid{ grid-template-columns: minmax(220px, 20fr) minmax(0, 80fr); }

.card{
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  padding: 6px 6px;
  min-height:0;
}
.card.tight{ padding:6px; }
.card.scroll{ overflow:auto; min-height:0; }
.graph-block{ margin-top:6px; }

.btncard{
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
}
.btncard:hover{ transform: translateY(-1px); }

.callout{
  display:flex;
  align-items:flex-start;
  gap:6px;
  padding:6px 6px;
  border-radius: var(--radius-lg);
  background: rgba(226,232,240,.55);
  border: 1px solid rgba(148,163,184,.28);
}
.callout.red{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.18); }
.callout.green{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.18); }
.callout.blue{ background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.30); }


/* =========================
   5) Icons / schemas SVG
   ========================= */
.icon{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke: currentColor;
  stroke-width:2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--white{ color: rgba(255,255,255,.96); }
.icon--black{ color: rgba(15,23,42,.92); }

.ico{
  width:30px;
  height:30px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(226,232,240,.65);
  color: rgba(15,23,42,.92);
  vertical-align: middle;
}

.ico.red   { background: rgba(239,68,68,.15);  border-color: rgba(239,68,68,.25);  color: rgba(127,29,29,.95); }
.ico.amber { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.25); color: rgba(120,53,15,.95); }
.ico.blue  { background: rgba(59,130,246,.15); border-color: rgba(59,130,246,.25); color: rgba(30,58,138,.95); }
.ico.green { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.25); color: rgba(6,95,70,.95); }
.ico.teal  { background: rgba(6,182,212,.15);  border-color: rgba(6,182,212,.25);  color: rgba(15,118,110,.95); }

.schema{
  width:100%;
  height:auto;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.52);
  vertical-align: middle;
}

.h3icon{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 6px;
}

/* =========================
   6) Fiches (table/grid)
   ========================= */
.fiche{
  display:grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--gap);
  min-height:0;
  width:100%;
  max-width:100%;
}
.fiche > .card{ min-width:0; grid-column:auto !important; }

.fiche .tbl{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
.fiche .tbl .row{
  display:grid;
  grid-template-columns: minmax(70px, 110px) 1fr;
  gap:6px;
  align-items:start;
  padding:6px 6px;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(15,23,42,.10);
  border-radius:14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fiche .tbl .k{ font-weight:950; color: var(--ink); }
.fiche .tbl .v{ color: var(--ink); }

.fiche .tbl .row.blue{  
  background: rgba(37,99,235,.12);
}
.fiche .tbl .row.red{
  background: rgba(239,68,68,.12);
}


/* =========================
   7) Milieux cards (écran)
   IMPORTANT : ces backgrounds sont “screen only”.
   En print, on utilisera <img.milieu-print-img> injectée.
   ========================= */
.milieu-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background: transparent !important;
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
}

.milieu-card h3{ color: rgba(255,255,255,.98); }
.milieu-card .muted{ color: rgba(255,255,255,.88) !important; }
.milieu-card .tag{
  color: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.22);
  background: rgba(2,6,23,.24);
}

.milieu-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
  z-index:0;
  pointer-events:none;
}

.milieu-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.62));
  z-index:1;
  pointer-events:none;
}
.milieu-card > *{ position:relative; z-index:2; }

.milieu-card.pool::before{ background-image: var(--bg-pool); }
.milieu-card.pit::before{  background-image: var(--bg-pit); }
.milieu-card.lake::before{ background-image: var(--bg-lake); }
.milieu-card.sea::before{  background-image: var(--bg-sea); }

/* Tags (lisibles sur fond photo) */
.tagrow{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }

.tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.55);
  color: rgba(15,23,42,.88);
}

.tag.blue{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.30);
  color: #1e40af;
}
.tag.teal{
  background: rgba(6,182,212,.12);
  border-color: rgba(6,182,212,.30);
  color: #0e7490;
}
.tag.green{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.30);
  color: #047857;
}
.tag.amber{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.32);
  color: #92400e;
}
.tag.red{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.30);
  color: #991b1b;
}

/* =========================
   TAGS — override UNIQUEMENT dans les cartes Milieux
   (si tu veux des tags lisibles sur photo)
   ========================= */
.milieu-card .tag{
  color: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.22);
  background: rgba(2,6,23,.24);
}

/* =========================
   8) Buttons
   ========================= */
button{ font-family:inherit; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 10px;
  border-radius:12px;
  border: 1px solid rgba(148,163,184,.28);
  background: var(--btn-bg);
  color: rgba(15,23,42,.92);
  font-weight:950;
  font-size:13px;
  cursor:pointer;
  transition: background .12s ease, transform .12s ease;
  line-height:1;
}
.btn:hover{ background: rgba(255,255,255,.70); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

/* =========================
   9) Navbar
   ========================= */
.navbar{
  position:absolute;
  left: var(--outer-pad);
  right: var(--outer-pad);
  bottom: calc(var(--nav-bottom) + var(--safe-b));
  height: var(--nav-h);
  padding: var(--nav-pad-y) var(--nav-pad-x);

  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;

  border-radius: var(--radius-xl);
  background: rgba(2,6,23,.35);
  border: 1px solid rgba(148,163,184,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navgroup{
  display:flex;
  align-items:center;
  gap:10px;
  overflow:hidden;
}

.navbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.08);
  color: rgba(226,232,240,.95);
  font-weight:950;
  cursor:pointer;
  line-height:1;
  white-space:nowrap;
}
.navbtn:hover{ background: rgba(255,255,255,.12); }
.navbtn.primary{ background: rgba(255,255,255,.10); }

.progress{
  flex:1;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(148,163,184,.18);
  overflow:hidden;
  min-width:180px;
}
.bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(6,182,212,.95), rgba(16,185,129,.95));
}
.counter{
  font-size:12px;
  font-weight:950;
  color: rgba(226,232,240,.95);
}

/* Patch iPad/Safari navbar parity */
.navbar{ flex-wrap:nowrap; }
.navbar > .navgroup{ flex:0 0 auto; min-width:0; }
.navbar > .navgroup:nth-child(2){ flex:1 1 auto; display:flex; justify-content:center; }
.navbar > .navgroup:nth-child(2) .progress{
  flex:0 1 auto;
  width: clamp(160px, 28vw, 340px);
  min-width:160px;
  max-width:340px;
}
.navbtn .icon{ width:18px; height:18px; flex:0 0 18px; }

/* =========================
   10) Drawer
   ========================= */
.scrim{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index:34;
  display:none;
}
.scrim.active{ display:block; }

.drawer{
  position:absolute;
  top:0; bottom:0; left:0;
  width:320px;
  z-index:35;
  background: rgba(2,6,23,.72);
  border-right: 1px solid rgba(148,163,184,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateX(-102%);
  transition: transform .16s ease;
  display:flex;
  flex-direction:column;
  color: rgba(241,245,249,.95);
}
.drawer.open{ transform: translateX(0); }

.drawer-header{
  padding:18px 16px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: rgba(226,232,240,.95);
}
.drawer-title{ font-weight:950; letter-spacing:.2px; }
.drawer-close{
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.08);
  color: rgba(226,232,240,.95);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:950;
}
.drawer-close:hover{ background: rgba(255,255,255,.12); }

.drawer-body{
  padding:8px 10px 16px;
  overflow:auto;
  color: rgba(241,245,249,.95);
}
.drawer-search{
  padding:4px 4px 10px;
}
.drawer-search-input{
  width:100%;
  border:1px solid rgba(148,163,184,.28);
  background: rgba(15,23,42,.35);
  color: rgba(241,245,249,.95);
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  outline:none;
}
.drawer-search-input::placeholder{
  color: rgba(226,232,240,.6);
}
.drawer-group{ margin-bottom:6px; }
.drawer-section{
  appearance:none;
  background:none;
  border:none;
  color: rgba(226,232,240,.95);
  width:100%;
  text-align:left;
  font-weight:700;
  padding:6px 6px 4px;
  margin:4px 0 2px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.drawer-section::after{
  content:"▾";
  font-size:12px;
  opacity:.75;
  transform-origin:center;
  transition: transform .12s ease;
}
.drawer-group.collapsed .drawer-section::after{
  transform: rotate(-90deg);
}
.drawer-group.collapsed .drawer-items{ display:none; }
.drawer-empty{
  display:none;
  padding:8px 6px;
  font-size:12px;
  color: rgba(226,232,240,.7);
}
.drawer-item{ cursor:pointer; }
.drawer-item.active .drawer-link{
  font-weight:800;
  text-decoration: underline;
}

/* =========================
   11) Lightbox (fallback si tu n'injectes pas)
   ========================= */
.diagram{ cursor: zoom-in; text-align:center; }
.diagram h2{ text-align:left; }

.lightbox{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;
  align-items:center;
  justify-content:center;
  padding:6px;
  background: rgba(2,6,23,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox.open{ display:flex; }

.lightbox-card{
  width:min(1100px, 94vw);
  max-height:90vh;
  overflow:auto;
  border-radius:18px;
  background: rgba(241,245,249,.92);
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 18px 60px rgba(2,6,23,.45);
  padding: 6px;
}
.lightbox-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.lightbox-title{
  font-weight:950;
  font-size:14px;
  color: rgba(15,23,42,.92);
}
.lightbox-close{
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.65);
  color: rgba(15,23,42,.92);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:950;
}
.lightbox-close:hover{ background: rgba(255,255,255,.85); }

.lightbox-body svg,
.lightbox-body img{
  width:100%;
  height:auto;
  display:block;
}
.lightbox-body svg{ max-height:78vh; }

/* =========================
   12) Signature slides
   ========================= */
.slide > .slide-signature{
  position:absolute;
  top:0px;
  right:6px;
  z-index:25;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  color: rgba(226,232,240,.78);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  background:none;
  border:none;
  padding:0;
  border-radius:0;
  pointer-events:none;
  user-select:none;
}

/* =========================
   13) Quiz
   ========================= */
.quiz{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.q{ border:1px solid var(--card-line); border-radius:14px; padding:10px 12px; background:#fff; }
.q-title{ font-weight:800; margin-bottom:6px; }
.quiz .opts{ display:flex; flex-direction:column; gap:0px; }
.quiz .opts label{ display:block; margin:0; padding:0px 6px; border-radius:10px; cursor:pointer; line-height:1.05; }
.opts label:hover{ background: var(--card-bg); }
.opts input{ margin-right:8px; }
.exp{ display:none; margin-top:8px; color: var(--muted); font-size: 13px; }
.q.correct{ border-color:#16a34a; background:#f0fdf4; }
.q.wrong{ border-color:#dc2626; background:#fef2f2; }
.q.correct .exp, .q.wrong .exp{ display:block; }
.quizScore{ font-size:24px; font-weight:900; letter-spacing:-.5px; margin-top:8px; }
.q.correct::before {
  content: "✅ ";
  font-size: 20px;
  color: #16a34a;
}
.q.wrong::before {
  content: "❌ ";
  font-size: 20px;
  color: #dc2626;
}

/* =========================
   14) Responsive
   ========================= */
@media (max-width: 640px){
  .grid.cols-2,
  .grid.cols-3{ grid-template-columns:1fr; }

  .fiche{ grid-template-columns:1fr !important; }

  .navbar{ flex-wrap:wrap; height:auto; }
  .progress{ min-width:120px; }
}

@media (max-width: 900px){
  .grid.situations-grid{ grid-template-columns:1fr; }
  .navbar > .navgroup:nth-child(2) .progress{
    width: clamp(120px, 32vw, 260px);
    max-width:260px;
    min-width:120px;
  }
  .navbtn{ padding: 8px 10px; }
}

@supports (-webkit-touch-callout: none){
  :root{ --nav-bottom: 14px; }
}

/* =========================================================
   PRINT / PDF EXPORT — robuste (A4 portrait)
   - #deck masqué, #print-deck affiché
   - Slides en flux (multi-pages)
   - Pas de fonds ::before/.bg
   - Fix "row" (pas de marges <p>/<ul> qui gonflent le cadre)
   - Fix "Milieux" via <img.milieu-print-img> injectée par JS
   ========================================================= */

@media print{
  @page{ size:A4 portrait; margin:0; }

  :root{
    --print-pad: 3mm;
    --print-surface: rgba(248,250,252,.98);
    --print-surface-line: rgba(15,23,42,.10);
    --print-schema-max-w: 132%;
    --print-schema-max-h: 330px;
  }

  html, body{
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    height:auto !important;
    overflow:visible !important;
  }

  *{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* On n’imprime pas l’app écran */
  #deck, .navbar, #drawer, #scrim, #lightbox{ display:none !important; }

  .stage{
    background:#fff !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  /* Print deck */
  #print-deck{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font-size:12px !important;
    line-height:1.25 !important;
    color:#0f172a !important;
  }

  #print-deck .bg{ display:none !important; }
  #print-deck .slide::before,
  #print-deck .slide::after{
    content:none !important;
    background:none !important;
    display:none !important;
  }

  /* Slides en flux */
  #print-deck .slide{
    display:block !important;
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;

    width:auto !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;

    break-before: page !important;
    page-break-before: always !important;
  }

  /* Forcer un saut de page à l’intérieur d’un slide */
  #print-deck .print-break{
    display:block !important;
    break-before: page !important;
    page-break-before: always !important;
  }
  #print-deck .print-break:empty{
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  #print-deck h1.print-break,
  #print-deck h2.print-break,
  #print-deck h3.print-break{ height:auto !important; }

  #print-deck .slide:first-of-type,
  #print-deck .slide[data-first-slide="1"]{
    break-before:auto !important;
    page-break-before:auto !important;
  }

  /* Cadre principal : AUTO (s’ajuste au contenu) */
  #print-deck .slide > .content{
    box-sizing:border-box !important;
    display:block !important;

    height:auto !important;
    min-height:0 !important;

    margin: var(--print-pad) !important;
    padding: var(--print-pad) !important;

    background:#fff !important;
    border:1px solid rgba(15,23,42,.12) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Neutraliser contraintes écran */
  #print-deck .content,
  #print-deck .grid{
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
  }

  /* ✅ INTRO : les cards s’ajustent au contenu */
  #print-deck .grid.cols-2{
    align-content:start !important;
    grid-auto-rows:max-content !important;
  }
  /* ✅ INTRO/ANNEXES : empiler les cartes en impression */
  #print-deck .grid.cols-2,
  #print-deck .grid.cols-3{
    grid-template-columns:1fr !important;
  }
  #print-deck .grid.cols-2 > .card{
    align-self:start !important;
    height:auto !important;
    max-height:none !important;
  }
  #print-deck .card.scroll{
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
  }

  /* ✅ FICHES : la fiche s’ajuste au contenu */
  #print-deck .fiche{
    display:block !important;
    align-items:start !important;
    align-content:start !important;
    grid-template-columns:1fr !important;
    grid-auto-rows:max-content !important;
  }
  #print-deck .fiche > .card{
    display:block !important;
    width:100% !important;
    align-self:start !important;
    justify-self:stretch !important;
    height:auto !important;
    max-height:none !important;
  }
  #print-deck .fiche > .card + .card{
    margin-top: var(--print-pad) !important;
  }
  #print-deck .tbl{
    align-content:start !important;
    grid-auto-rows:max-content !important;
  }

  /* Cards : peuvent se couper si trop longues (évite débordement) */
  #print-deck .card{
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    break-inside:auto !important;
    page-break-inside:auto !important;
  }

  /* Surfaces plus claires */
  #print-deck .card,
  #print-deck .card.tight{
    background: var(--print-surface) !important;
    border: 1px solid var(--print-surface-line) !important;
  }
  #print-deck .fiche .tbl .row{
    background: var(--print-surface) !important;
    border: 1px solid var(--print-surface-line) !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* ✅ Navbar imprimée : collée (PAS de margin-top:auto) */
  #print-deck .print-navbar{
    display:flex !important;
    margin-top: 0 !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Fond identique topbar (en print) */
  #print-deck .print-navbar.navbar{
    position: static !important;
    left:auto !important; right:auto !important; bottom:auto !important;

    height: var(--nav-h) !important;
    padding: var(--nav-pad-y) var(--nav-pad-x) !important;

    border-radius: var(--radius-xl) !important;
    background: rgba(226,232,240,.55) !important; /* = topbar */
    border: 1px solid rgba(148,163,184,.26) !important; /* = topbar (proche) */
    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #print-deck .print-navbar .navbtn[onclick*="exportPdf"]{ display:none !important; }

  /* =========================
    PRINT — Les .btn deviennent des .navbtn
    ========================= */
  #print-deck .btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    padding:8px 10px !important;
    border-radius:12px !important;
    border: 1px solid rgba(148,163,184,.22) !important;

    background: rgba(148,163,184,.40) !important;
    color: rgba(15,23,42,.92) !important;

    font-size:12px !important;
    font-weight:950 !important;
    line-height:1 !important;
    white-space:nowrap !important;

    transition:none !important;
    transform:none !important;
  }
  #print-deck .btn:hover,
  #print-deck .btn:active{
    background: rgba(148,163,184,.40) !important;
    transform:none !important;
  }
  #print-deck .btn .icon{
    width:14px !important;
    height:14px !important;
    flex:0 0 14px !important;
  }

  /* Flex rows with inline gap (keep buttons on the same line) */
  #print-deck [style*="display:flex"][style*="gap:10px"]{
    gap:6px !important;
  }

  /* Boutons navbar (gardent leur “matière”) */
  #print-deck .print-navbar .navbtn{
    background: rgba(148,163,184,.40) !important;
    border: 1px solid rgba(148,163,184,.28) !important;
    color: rgba(15,23,42,.92) !important;
  }

  /* Blocs à garder groupés */
  #print-deck .topbar,
  #print-deck .print-navbar{
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Médias */
  #print-deck img,
  #print-deck svg{
    max-width:100% !important;
    height:auto !important;
  }
  /* ✅ Schémas : réduire pour limiter le nombre de pages */
  #print-deck .diagram .schema{
    width:auto !important;
    height:auto !important;
    max-width: var(--print-schema-max-w) !important;
    max-height: var(--print-schema-max-h) !important;
  }
  #print-deck .graph-block{
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  #print-deck .situation-card{
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  #print-deck .situations-grid{
    display:block !important;
  }
  /* En impression, on masque le panneau de filtres pour éviter un vide énorme */
  #print-deck .sit-filters{
    display:none !important;
  }
  #print-deck #sit_results{
    display:block !important;
  }
  #print-deck #sit_results > .situation-card{
    display:block !important;
    width:100% !important;
    margin-bottom: var(--print-pad) !important;
  }
  #print-deck #sit_results > .print-break{
    display:block !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Icônes */
  #print-deck svg.icon{ width:14px !important; height:14px !important; }
  #print-deck .ico{ width:24px !important; height:24px !important; }

  /* Signature */
  #print-deck .slide > .slide-signature{
    display:block !important;
    position:absolute !important;
    top:-3mm !important;
    right:6mm !important;
    z-index:25 !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.2px !important;
    color: rgba(15,23,42,.72) !important;
    text-shadow:none !important;
    pointer-events:none !important;
    user-select:none !important;
  }

  /* Liens */
  #print-deck a{
    color: inherit !important;
    text-decoration: underline !important;
  }

  /* FIX rows trop hautes */
  #print-deck .tbl .row{
    align-self:start !important;
    height:auto !important;
    min-height:0 !important;
    align-items:start !important;
    align-content:start !important;
    padding-top: 3mm !important;
    padding-bottom: 3mm !important;
  }
  #print-deck .row p,
  #print-deck .row ul,
  #print-deck .row ol{ margin:0 !important; }
  #print-deck .row .v > * + *{ margin-top: 2.5mm !important; }
  #print-deck .row .v > *:last-child{ margin-bottom:0 !important; }

/* =========================================================
   PRINT — MILIEUX (SANS PHOTO)
   Objectif : cartes propres, cohérentes avec le reste du PDF
   ========================================================= */

  /* 1) On supprime toute logique image/overlay */
  #print-deck .milieu-card::before,
  #print-deck .milieu-card::after{
    content: none !important;
    display: none !important;
    background: none !important;
  }

  #print-deck .milieu-card > .milieu-print-img{
    display: none !important;
  }

  /* 2) Carte milieu = une "card" claire cohérente */
  #print-deck .milieu-card{
    /* cohérent avec tes cards print */
    background: var(--print-surface) !important;
    border: 1px solid var(--print-surface-line) !important;
    border-radius: var(--radius-lg) !important;

    /* texte standard (plus de blanc sur noir) */
    color: rgba(15,23,42,.95) !important;
    text-shadow: none !important;

    /* un peu d'air */
    padding: 8px 10px !important;

    /* pas de hauteur imposée */
    min-height: 0 !important;
    height: auto !important;

    /* évite de casser une carte en deux si possible */
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* 3) Titres / muted / tags reviennent en mode "clair" */
  #print-deck .milieu-card h3{
    color: rgba(15,23,42,.95) !important;
  }

  #print-deck .milieu-card .muted{
    color: rgba(51,65,85,.78) !important;
  }

  /* Tags dans milieu : même style que tags standards (ou très léger) */
  #print-deck .milieu-card .tag{
    background: rgba(226,232,240,.70) !important;
    border: 1px solid rgba(148,163,184,.32) !important;
    color: rgba(15,23,42,.88) !important;
  }

  /* 4) Optionnel : look "btncard" discret en print (sans hover) */
  #print-deck .milieu-card.btncard{
    cursor: default !important;
    transform: none !important;
    transition: none !important;
  }

  /* petit accent visuel (facultatif) */
  #print-deck .milieu-card.btncard{
    box-shadow: none !important;
  }

    /* =========================
     PRINT — FIX icônes invisibles
     (icon--white devient sombre en print)
     ========================= */

  /* Forcer une couleur sombre pour toutes les icônes dans le PDF */
  #print-deck svg.icon{
    color: rgba(15,23,42,.92) !important;
  }

  /* Si certaines icônes portent explicitement icon--white */
  #print-deck .icon--white{
    color: rgba(15,23,42,.92) !important;
  }

/* =========================================================
   PRINT — FIX cartes cliquables devenues <a> (inline => mini cadres)
   ========================================================= */

  /* Les "cards" converties en <a> doivent se comporter comme des blocs */
  #print-deck a.card,
  #print-deck a.card.btncard,
  #print-deck a.milieu-card{
    display: block !important;
    width: 100% !important;
  }

  /* Les cards-liens ne doivent PAS être soulignées en mode "card" */
  #print-deck a.card,
  #print-deck a.card *{
    text-decoration: none !important;
  }

  /* On garde l'underline pour les liens "normaux" dans le texte */
  #print-deck .card a:not(.card):not(.btn):not(.navbtn){
    text-decoration: underline !important;
  }
}