/* ============================================================
   PHP Décodé — tokens
   ============================================================ */
:root{
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --radius:14px;
  --radius-lg:20px;
}

html[data-theme="dark"]{
  --bg:#0a0d15;
  --bg-grad:radial-gradient(circle at 14% -6%,#1c1740 0%,transparent 38%),radial-gradient(circle at 100% 0%,#0e2233 0%,transparent 45%),#0a0d15;
  --panel:#131826;
  --panel2:#171e30;
  --panel-glass:#0f1420cc;
  --text:#eef1fb;
  --muted:#8a91ab;
  --line:#242b3f;
  --line-soft:#1b2133;
  --accent:#9b8cff;
  --accent-strong:#7c6bff;
  --accent2:#4bd6ac;
  --accent2-strong:#2fbf90;
  --danger:#ff8a7a;
  --code-bg:#0a0e18;
  --shadow:0 20px 50px -20px #000a;
}
html[data-theme="light"]{
  --bg:#f7f7fb;
  --bg-grad:radial-gradient(circle at 12% -10%,#e9e4ff 0%,transparent 42%),radial-gradient(circle at 100% 0%,#dcf5ec 0%,transparent 45%),#f7f7fb;
  --panel:#ffffff;
  --panel2:#f2f1fa;
  --panel-glass:#ffffffd9;
  --text:#161726;
  --muted:#5c5f74;
  --line:#e3e2f0;
  --line-soft:#ebeaf5;
  --accent:#6c53f0;
  --accent-strong:#5a3fe0;
  --accent2:#0e9d75;
  --accent2-strong:#0b8563;
  --danger:#d84f3e;
  --code-bg:#f4f3fb;
  --shadow:0 20px 45px -22px #33255522;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-grad);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.65;
  transition:background .35s ease,color .35s ease;
  position:relative;
  overflow-x:hidden;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
::selection{background:var(--accent);color:#fff}

/* faint giant <?php watermark behind hero */
.tagbg{
  position:fixed;top:-4vw;right:-3vw;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:min(34vw,520px);
  color:var(--accent);
  opacity:.05;
  pointer-events:none;
  z-index:0;
  user-select:none;
  line-height:1;
}
html[data-theme="light"] .tagbg{opacity:.06}

/* ============================================================
   Topbar — navigation visuelle inspirée du Guide Java
   ============================================================ */
:root{ --topbar-h:78px; --sidebar-w:248px; --sidebar-w-collapsed:0px }
.topbar{
  position:sticky;top:0;z-index:50;height:var(--topbar-h);
  display:flex;align-items:center;
  padding:0 clamp(12px,2.4vw,34px);
  background:var(--panel-glass);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 12%,transparent);
}
.topbar-inner{
  width:100%;max-width:1680px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(22px,2.7vw,44px);
}
.brand{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-weight:600;flex:0 0 auto;
  text-decoration:none;
}
.brand-tag{color:var(--accent);font-weight:700}
.brand-logo{width:28px;height:28px;object-fit:contain;display:block}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:1.05rem;white-space:nowrap}
.profile-block{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:0 0 auto;min-width:82px;gap:2px;
}
.profile-photo{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
  object-position:center;
  border:2px solid var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
  display:block;
}
.profile-name{font-family:var(--font-display);font-size:.66rem;font-weight:600;line-height:1;color:var(--text);white-space:nowrap}
.motto{
  color:var(--accent);font-family:var(--font-display);font-weight:700;
  font-size:.94rem;white-space:nowrap;letter-spacing:.01em;flex:0 0 auto;
}
.quick-links,.contact-links{display:flex;align-items:center;gap:clamp(8px,1vw,16px);flex:0 0 auto}
.quick-links{padding-left:clamp(12px,1.5vw,24px);border-left:1px solid var(--line)}
.contact-links{padding-left:clamp(14px,1.7vw,28px);border-left:1px solid var(--line)}
.quick-link,.contact-link{
  position:relative;display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--muted);transition:transform .18s ease,color .18s ease,filter .18s ease;
}
.quick-link{width:54px;height:62px;flex-direction:column;gap:2px}
.quick-link img{width:34px;height:34px;object-fit:contain;display:block}
.quick-link span{font-family:var(--font-display);font-size:.61rem;font-weight:700;line-height:1;color:var(--muted)}
.contact-link{width:42px;height:42px;border-radius:12px}
.contact-link img{width:29px;height:29px;object-fit:contain;display:block}
.quick-link:hover,.contact-link:hover{transform:translateY(-2px);color:var(--accent)}
.quick-link:hover span{color:var(--accent)}
.contact-link:hover{background:color-mix(in srgb,var(--accent) 9%,transparent);box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 16%,transparent)}
.quick-link:focus-visible,.contact-link:focus-visible,.brand:focus-visible,.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.theme-toggle{
  position:relative;width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 8%,transparent);
}
.theme-toggle svg{position:absolute;fill:none;stroke:var(--accent);stroke-width:1.8;transition:.25s}
html[data-theme="dark"] .ic-sun{opacity:0;transform:rotate(40deg) scale(.6)}
html[data-theme="dark"] .ic-moon{opacity:1;transform:none}
html[data-theme="light"] .ic-moon{opacity:0;transform:rotate(-40deg) scale(.6)}
html[data-theme="light"] .ic-sun{opacity:1;transform:none}
.theme-toggle:hover{border-color:var(--accent);transform:translateY(-1px)}
.icon-btn.only-mobile{display:none}

/* Scrollbar globale — accent PHP */
html{scrollbar-width:9px;scrollbar-color:var(--accent) transparent}
html::-webkit-scrollbar{width:9px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--accent-strong),var(--accent));
  border-radius:99px;border:2px solid transparent;background-clip:padding-box;
}
html::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box}

/* Search panel: only takes space when explicitly opened, drops
   down below the slim topbar and doesn't stay pinned. */
.search-panel{
  display:none;position:sticky;top:var(--topbar-h);z-index:45;
  background:var(--panel-glass);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.search-panel.open{display:block}
.search-panel-inner{
  margin:0;padding:12px clamp(14px,3vw,32px);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}

/* ============================================================
   Shell: sidebar + main content side by side. The sidebar shows
   where the user is (à la Java Torréfié); the main column stretches
   to fill the rest of the viewport, right up to the edge.
   ============================================================ */
.shell{display:flex;align-items:flex-start;position:relative}

.sidebar{
  position:sticky;left:0;top:var(--topbar-h);align-self:flex-start;
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  height:calc(100vh - var(--topbar-h));
  display:flex;flex-direction:column;
  border-right:1px solid var(--line-soft);
  background:var(--panel-glass);backdrop-filter:blur(16px);
  z-index:30;transition:width .25s ease,flex-basis .25s ease,transform .25s ease;
  overflow:visible;
}
.sidebar-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 12px 12px;border-bottom:1px solid var(--line-soft);flex:0 0 auto;
}
.sidebar-head .brand-tag{font-family:var(--font-mono);font-size:1.05rem}
.sidebar-title{font-family:var(--font-display);font-weight:600;font-size:.95rem;white-space:nowrap}
.sidebar-sub{color:var(--muted);font-size:.72rem;font-family:var(--font-mono);white-space:nowrap}
.sidebar-nav{flex:1;overflow-y:auto;padding:8px 6px 16px;display:flex;flex-direction:column;gap:4px;scrollbar-gutter:stable}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}

.navchap{
  display:flex;align-items:center;gap:11px;
  padding:8px 8px;border-radius:10px;border:1px solid transparent;
  color:var(--muted);cursor:pointer;text-align:left;background:none;width:100%;
}
.navchap:hover{background:var(--panel2);color:var(--text)}
.navchap.active{
  background:color-mix(in srgb, var(--accent) 14%, var(--panel));
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  color:var(--text);
}
.navchap-ic{
  flex:0 0 auto;width:28px;height:28px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:.74rem;
  background:var(--panel2);color:var(--accent);border:1px solid var(--line);
}
.navchap.active .navchap-ic{background:var(--accent);color:#fff;border-color:var(--accent)}
.navchap-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.navchap-title{font-size:.86rem;font-weight:600;line-height:1.25;overflow-wrap:break-word}
.navchap-meta{font-size:.72rem;color:var(--muted);margin-top:1px}
.navchap.active .navchap-meta{color:var(--accent)}

.navchapter{margin:0 0 6px}
.navfiches{
  display:flex;flex-direction:column;gap:2px;
  margin:2px 0 6px 12px;padding-left:12px;
  border-left:1px solid var(--line);
}
.navfiche{
  display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:7px;
  width:100%;padding:7px 7px;border:1px solid transparent;border-radius:9px;
  background:transparent;color:var(--muted);text-align:left;font-size:.76rem;
}
.navfiche:hover{background:var(--panel2);color:var(--text)}
.navfiche.active{
  background:color-mix(in srgb,var(--accent) 13%,var(--panel));
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  color:var(--text);
}
.navfiche-num{font-family:var(--font-mono);font-size:.68rem;color:var(--accent);font-weight:700}
.navfiche-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.navfiche-check{font-weight:700;color:var(--accent2);text-align:center}
.navfiche.done .navfiche-title{color:var(--muted)}
.fiche-page{min-height:0}
.fiche-page .card{margin-top:22px}
.navchap-chev{flex:0 0 auto;opacity:0;transform:translateX(-3px);transition:.2s;color:var(--accent)}
.navchap.active .navchap-chev{opacity:1;transform:none}
.navchap-chev svg{stroke:currentColor;fill:none;stroke-width:2}

/* Collapse toggle: floating circular chevron pinned to the sidebar's
   right edge — click to fold the sidebar away and free the full width. */
.sidebar-collapse{
  position:absolute;top:96px;right:-14px;
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  z-index:31;
}
.sidebar-collapse svg{stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .25s}
.sidebar-collapse:hover{border-color:var(--accent)}

.shell.collapsed .sidebar{width:0;flex-basis:0;border-right-color:transparent;overflow:visible}
.shell.collapsed .sidebar-head,
.shell.collapsed .sidebar-nav{opacity:0;pointer-events:none}
.shell.collapsed .sidebar-collapse svg{transform:rotate(180deg)}
.shell.collapsed .sidebar-collapse{right:-28px}

.main{flex:1;min-width:0;position:relative;z-index:1}
@media(min-width:901px){
  .sidebar{margin-left:0}
  .shell{margin-left:0;margin-right:0}
}
.scrim{display:none}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;z-index:1;
  max-width:900px;
  padding:clamp(40px,6vw,64px) clamp(20px,3vw,44px) 20px;
}
.kicker{
  color:var(--accent2);font-family:var(--font-mono);
  font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:16px;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.6rem,7vw,4.6rem);
  line-height:1.02;
  margin:0 0 20px;
  letter-spacing:-.01em;
}
.hero h1 .cursor{color:var(--accent);animation:blink 1.1s step-end infinite}
.hero.hidden{display:none}
@keyframes blink{50%{opacity:0}}
.lede{color:var(--muted);font-size:1.06rem;max-width:640px;margin:0 0 30px}
.lede strong{color:var(--text)}

.stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.stat{
  border:1px solid var(--line);background:var(--panel);
  border-radius:var(--radius);padding:12px 16px;min-width:110px;
  display:flex;flex-direction:column;gap:2px;
}
.stat b{font-family:var(--font-display);font-size:1.15rem}
.stat span{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}

.progress-wrap{max-width:520px}
.progress-head{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-bottom:7px}
.progress-head strong{color:var(--accent2);font-weight:600}
.progress{height:7px;background:var(--panel2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:99px;transition:width .5s ease}

/* ============================================================
   Search / filter row (inside the dropdown search panel)
   ============================================================ */
.search-wrap{position:relative;flex:1;min-width:220px}
.search-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);stroke:var(--muted);fill:none;stroke-width:2}
.search{
  width:100%;padding:11px 14px 11px 38px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);outline:0;
  transition:border-color .2s;
}
.search:focus{border-color:var(--accent)}
.filters{display:flex;gap:6px}
.filter{
  padding:9px 13px;border-radius:99px;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);font-size:.82rem;font-weight:500;
  transition:.2s;
}
.filter:hover{color:var(--text)}
.filter.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tools{display:flex;gap:8px}
.tool{padding:9px 13px;border-radius:11px;border:1px solid var(--line);background:var(--panel);font-size:.82rem;white-space:nowrap}
.tool:hover{border-color:var(--accent);color:var(--accent)}
.tool.ghost:hover{border-color:var(--danger);color:var(--danger)}

.chip-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;height:100%;align-items:center}
.chip-row::-webkit-scrollbar{display:none}
.chapchip{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:99px;border:1px solid var(--line);
  background:var(--panel);font-size:.78rem;white-space:nowrap;color:var(--muted);
}
.chapchip b{color:var(--accent);font-family:var(--font-mono);font-weight:600}
.chapchip:hover{color:var(--text);border-color:var(--accent)}
.chapchip.active{background:var(--panel2);border-color:var(--accent);color:var(--text)}
.chapchip .cnt{
  font-size:.66rem;background:var(--panel2);border-radius:99px;padding:1px 6px;
}
.chapchip.active .cnt{background:var(--accent);color:#fff}

/* ============================================================
   Content / chapters — fluid width, hugs the right edge of the
   viewport instead of sitting in a narrow centered column.
   ============================================================ */
.content{width:100%;max-width:none;padding:10px clamp(20px,3vw,44px) 60px;position:relative;z-index:1}
.chapter{padding-top:52px;scroll-margin-top:calc(var(--topbar-h) + 16px)}
.chapter-head{display:flex;gap:18px;align-items:baseline;margin-bottom:8px}
.chapter-num{
  font-family:var(--font-mono);color:var(--accent);font-weight:600;
  font-size:1rem;border:1px solid var(--line);border-radius:8px;padding:3px 9px;
}
.chapter h2{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2rem);margin:0}
.chapter-desc{color:var(--muted);border-bottom:1px solid var(--line-soft);padding-bottom:20px;margin:6px 0 22px;max-width:680px}

.empty{text-align:center;padding:70px 20px;color:var(--muted);display:none}

/* ============================================================
   Cards
   ============================================================ */
.card{
  margin:28px 0;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--panel);box-shadow:var(--shadow);
  transition:border-color .2s;
}
.card.done{border-color:var(--accent2)}
.card-top{padding:22px 24px 16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.card-id{display:flex;flex-direction:column;gap:6px;min-width:0}
.num{font-family:var(--font-mono);color:var(--accent);font-weight:600;font-size:.76rem;letter-spacing:.08em}
.card-id h3{margin:0;font-family:var(--font-display);font-size:1.3rem;font-weight:600}
.sub{margin:0;color:var(--muted);font-size:.94rem}
.badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.badge{
  font-size:.7rem;font-family:var(--font-mono);color:var(--muted);
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:3px 7px;
}
.card-actions{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.card-actions button{
  border:1px solid var(--line);background:var(--panel2);color:var(--text);
  border-radius:10px;padding:8px 11px;font-size:.8rem;white-space:nowrap;
}
.card-actions button:hover{border-color:var(--accent)}
.mark.on{background:var(--accent2);border-color:var(--accent2);color:#06251c;font-weight:600}

/* Images stacked vertically, one per row, full card width — matches
   the reference guide's fiche layout (image, then its explanation,
   directly beneath, no accordion). */
.gallery{padding:0 24px}
.imgs{display:flex;flex-direction:column;gap:16px}
.imgs figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--code-bg)}
.imgs img{display:block;width:100%;height:auto;cursor:zoom-in;transition:transform .3s}
.imgs img:hover{transform:scale(1.01)}
.imgs figcaption{padding:8px 12px;color:var(--muted);font-size:.72rem;font-family:var(--font-mono);border-top:1px solid var(--line)}

/* Explanation is always rendered — no toggle, no collapse. */
.explain{border-top:1px solid var(--line);margin-top:20px}
.explain-inner{padding:22px 24px}
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.box{padding:16px;border:1px solid var(--line);border-radius:13px;background:var(--panel2)}
.box h4{margin:0 0 8px;color:var(--accent);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono)}
.box p{margin:0;color:var(--text);font-size:.94rem}

/* "Éléments clés" — auto-built glossary table so every fiche is fully
   legible without ever opening the image. */
.keytable{margin-top:16px;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.keytable-head{padding:10px 16px;background:var(--panel2);border-bottom:1px solid var(--line);
  color:var(--accent);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono)}
.keyrow{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-top:1px solid var(--line-soft)}
.keyrow:first-of-type{border-top:0}
.keynum{
  flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;font-family:var(--font-mono);
}
.keyword{flex:0 0 auto;min-width:132px;color:var(--accent-strong);font-family:var(--font-mono);font-weight:600;font-size:.86rem}
.keydesc{color:var(--text);font-size:.88rem}

/* Numbered "flow" steps — colored badges walking through the example
   the same way the reference guide narrates its slides. */
.stepslist{margin-top:16px;border:1px solid var(--line);border-radius:13px;padding:14px 16px;background:var(--panel2)}
.stepslist h4{margin:0 0 12px;color:var(--accent);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono)}
.step{display:flex;gap:11px;align-items:flex-start;padding:6px 0}
.stepnum{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--accent2);color:#062018;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;font-family:var(--font-mono);
}
.step p{margin:0;font-size:.88rem;padding-top:2px}
.step-arrow{color:var(--muted);font-size:.75rem;padding-left:33px;margin:-2px 0}

.codebox{margin-top:16px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--code-bg)}
.codebox-head{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
.codebox-head-left{display:flex;align-items:center;gap:8px}
.lang-badge{background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.03em}
.codebox-head h4{margin:0;color:var(--accent);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono)}
.copy-btn{border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:4px 9px;font-size:.72rem;color:var(--muted)}
.copy-btn:hover{color:var(--accent);border-color:var(--accent)}
pre{margin:0;white-space:pre-wrap;overflow:auto;padding:16px;color:var(--text);font-family:var(--font-mono);font-size:.87rem;line-height:1.6}

.practice{margin-top:16px;border-left:3px solid var(--accent);padding:2px 0 2px 14px;font-size:.93rem}
.practice b{color:var(--accent)}

/* "À retenir" as a colored checklist — mirrors the reference's green
   check-mark callouts, readable at a glance. */
.retain{margin-top:16px;padding:14px 16px;border-radius:13px;background:color-mix(in srgb, var(--accent2) 10%, transparent);border:1px solid color-mix(in srgb, var(--accent2) 30%, transparent)}
.retain h4{margin:0 0 8px;color:var(--accent2-strong);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono)}
.retain ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.retain li{display:flex;gap:9px;align-items:flex-start;font-size:.93rem}
.retain li::before{content:'✓';flex:0 0 auto;color:var(--accent2-strong);font-weight:700}

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox{
  position:fixed;inset:0;background:#000c;backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;z-index:100;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 30px 70px #000a}
.lightbox-close{position:absolute;top:20px;right:24px;width:40px;height:40px;border-radius:50%;border:1px solid #fff5;background:#ffffff14;color:#fff;font-size:1rem}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line-soft);
  padding:44px clamp(18px,4vw,48px) 26px;
  position:relative;z-index:1;
}
.footer-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.2fr 2fr;gap:40px}
.footer-brand p{color:var(--muted);font-size:.9rem;max-width:320px;margin-top:10px}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.footer-cols h5{margin:0 0 10px;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.footer-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer-cols a{text-decoration:none;color:var(--text);font-size:.88rem}
.footer-cols a:hover{color:var(--accent)}
.footer-cols a span{color:var(--muted);font-family:var(--font-mono);font-size:.76rem;margin-right:6px}
.footer-bottom{max-width:1000px;margin:34px auto 0;padding-top:18px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:.8rem;font-family:var(--font-mono)}

.kbd-hint{max-width:1000px;margin:0 auto;padding:0 clamp(18px,4vw,48px) 10px;color:var(--muted);font-size:.78rem;display:flex;gap:6px;align-items:center}
.kbd-hint kbd{border:1px solid var(--line);background:var(--panel);border-radius:5px;padding:1px 6px;font-family:var(--font-mono);font-size:.72rem}

.totop{
  position:fixed;bottom:22px;right:22px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:.25s;z-index:60;
}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{border-color:var(--accent);color:var(--accent)}

/* Floating pager — direct prev/next navigation between fiches, with a
   live counter, so jumping to "the other page" never needs scrolling. */
.pager{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel-glass);backdrop-filter:blur(16px);
  box-shadow:var(--shadow);z-index:60;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.pager.show{opacity:1;pointer-events:auto}
.pager-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
}
.pager-btn:hover{border-color:var(--accent);background:var(--panel2)}
.pager-btn:disabled{opacity:.35;pointer-events:none}
.pager-btn svg{stroke:currentColor;fill:none;stroke-width:2.3}
.pager-count{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);min-width:56px;text-align:center}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1100px){
  :root{--sidebar-w:236px}
}
@media(max-width:900px){
  .grid2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .icon-btn.only-mobile{display:flex}

  /* Sidebar becomes a slide-in drawer on tablets/phones */
  .sidebar{
    position:fixed;top:var(--topbar-h);left:0;height:calc(100vh - var(--topbar-h));
    width:min(82vw,320px);flex-basis:auto;
    transform:translateX(-100%);border-right:1px solid var(--line-soft);
  }
  .shell.drawer-open .sidebar{transform:translateX(0);box-shadow:var(--shadow)}
  .shell.drawer-open .sidebar-head,
  .shell.drawer-open .sidebar-nav{opacity:1;pointer-events:auto}
  .sidebar-collapse{display:none}
  .scrim{
    display:none;position:fixed;inset:var(--topbar-h) 0 0 0;background:#000000aa;z-index:29;
  }
  .shell.drawer-open .scrim{display:block}
  .content{max-width:100%}
}
@media(max-width:640px){
  :root{--topbar-h:62px}
  .topbar{padding:0 10px}
  .topbar-inner{gap:10px;justify-content:space-between;overflow:hidden}
  .brand-name{display:none}
  .hero{padding-top:28px}
  .card-top{display:block}
  .card-actions{margin-top:12px}
  .search-panel-inner{flex-direction:column;align-items:stretch}
  .search-wrap{min-width:100%}
  .filters{flex-wrap:wrap}
  .keyword{min-width:104px}
  .pager{bottom:14px;padding:6px 8px;gap:7px}
  .pager-btn{width:30px;height:30px}
}
@media(max-width:1180px){
  .topbar-inner{gap:14px}
  .motto{font-size:.82rem}
  .quick-link{width:48px}
  .quick-link img{width:30px;height:30px}
  .contact-link{width:38px;height:38px}
  .contact-link img{width:26px;height:26px}
}
@media(max-width:900px){
  .topbar-inner{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .topbar-inner::-webkit-scrollbar{display:none}
  .icon-btn.only-mobile{display:flex}
  .motto{font-size:.78rem}
}
@media(max-width:700px){
  .profile-block{min-width:62px}
  .profile-photo{width:42px;height:42px}
  .profile-name{font-size:.6rem}
  .motto{font-size:.72rem}
  .quick-links,.contact-links{gap:5px}
  .quick-link{width:43px;height:56px}
  .quick-link img{width:27px;height:27px}
  .quick-link span{font-size:.55rem}
  .contact-link{width:34px;height:34px}
  .contact-link img{width:23px;height:23px}
  .theme-toggle{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Single-fiche pagination layout */
.fiche-page{width:100%;max-width:none;margin:0 0 50px}.fiche-page .card{margin-bottom:40px}