/* ==========================================================================
   Agence B-LIGHT — catalogues fabricants feuilletables (/catalogue/catalogues/)
   Bibliothèque (grille, filtre par univers) et liseuse type livre, thème clair.
   Repose sur css/site.css et css/mobilier-urbain.css ; classes préfixées cf-.
   Pages générées par tools/build-mobilier-urbain.py, animées par js/catalogues.js.
   ========================================================================== */

/* ---------- Bibliothèque ---------- */
.cf-filtres{margin:26px 0 18px}
.cf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:22px}
.cf-filtres + .cf-grid{margin-top:0}
.cf-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .2s,border-color .2s}
.cf-card:hover{box-shadow:var(--mu-shadow);border-color:var(--green-light)}
.cf-card[hidden]{display:none}
.cf-card__ph{display:block;background:var(--bg-3);padding:18px 18px 0}
.cf-card__ph img{display:block;width:100%;height:auto;border-radius:4px 4px 0 0;box-shadow:0 10px 24px -14px rgba(32,51,74,.55);transition:transform .35s}
.cf-card:hover .cf-card__ph img{transform:translateY(-3px)}
.cf-card__txt{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.cf-card__txt b{font:700 var(--fs-20)/1.2 var(--display)}
.cf-card__txt .eyebrow{margin:0}
.cf-card__desc{font-size:var(--fs-14);line-height:1.5;color:var(--muted);flex:1}

/* ---------- Liseuse ---------- */
.cf-reader{--cf-top:calc(var(--header-h) + var(--mu-bar-h) + var(--mu-megabar-h));
  display:flex;flex-direction:column;gap:10px;max-width:1680px;margin:0 auto;padding:4px 24px 18px;
  height:calc(100svh - var(--cf-top));min-height:480px;background:var(--bg)}
.cf-bar{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap}
.cf-bar__title{flex:1 1 260px;min-width:0}
.cf-bar__title .eyebrow{margin:0}
.cf-bar__title h1{font:800 clamp(18px,1.7vw,24px)/1.15 var(--display);margin:2px 0 0;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-bar__tools{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:4px}
.cf-tool{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.cf-tool:hover{background:var(--chip-bg);color:var(--accent-text)}
.cf-tool:disabled{opacity:.35;cursor:default;background:transparent;color:var(--ink)}
.cf-tool[aria-pressed="true"]{background:var(--chip-bg);color:var(--accent-text)}
.cf-tool--txt{width:auto;padding:0 12px;border-radius:var(--r-pill);font:600 var(--fs-13) var(--sans);text-decoration:none}
.cf-tool svg,.cf-nav svg,.cf-voir svg,.cf-encart svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cf-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.cf-count{display:flex;align-items:center;gap:6px;font:500 var(--fs-13) var(--mono);color:var(--muted);padding:0 4px;white-space:nowrap}
.cf-count input{width:3.6em;height:32px;border:1px solid var(--line);border-radius:8px;text-align:center;font:600 var(--fs-14) var(--mono);color:var(--ink);background:var(--bg-2);-moz-appearance:textfield;appearance:textfield}
.cf-count input::-webkit-inner-spin-button,.cf-count input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cf-devis{flex:none;gap:10px;padding:12px 18px}
.cf-devis__n{min-width:24px;height:24px;border-radius:var(--r-pill);background:var(--navy-2);color:#fff;display:inline-grid;place-items:center;font:700 var(--fs-12) var(--mono);padding:0 6px}

.cf-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;border-radius:var(--r-panel);
  background:radial-gradient(ellipse at 50% 40%,#fff 0%,var(--bg-3) 75%);border:1px solid var(--line);
  perspective:2600px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.cf-stage:focus-visible{box-shadow:0 0 0 3px var(--green-light)}
.cf-stage.is-zoomed{touch-action:none;cursor:grab}
.cf-stage.is-panning{cursor:grabbing}
.cf-book{position:absolute;left:50%;top:50%;transform-origin:0 0;transform-style:preserve-3d}
.cf-pg{position:absolute;top:0;height:100%;background:#fff;overflow:hidden}
.cf-pg img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.cf-pg.is-loading{background:#fff linear-gradient(90deg,#fff 0,var(--bg-3) 50%,#fff 100%) 0 0/200% 100%;animation:cf-shimmer 1.2s linear infinite}
@keyframes cf-shimmer{to{background-position:-200% 0}}
.cf-book--double .cf-pg--l{left:0;width:50%;box-shadow:-10px 14px 30px -18px rgba(20,30,45,.45)}
.cf-book--double .cf-pg--r{left:50%;width:50%;box-shadow:10px 14px 30px -18px rgba(20,30,45,.45)}
.cf-book--double .cf-pg--l::after,.cf-book--double .cf-pg--r::after{content:"";position:absolute;top:0;bottom:0;width:7%;pointer-events:none}
.cf-book--double .cf-pg--l::after{right:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.14))}
.cf-book--double .cf-pg--r::after{left:0;background:linear-gradient(270deg,rgba(0,0,0,0),rgba(0,0,0,.14))}
.cf-book--single .cf-pg{left:0;width:100%;box-shadow:0 14px 30px -18px rgba(20,30,45,.45)}
.cf-pg[hidden]{display:none}

/* feuille qui tourne (mode double) */
.cf-leaf{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;z-index:3;will-change:transform}
.cf-leaf--next{left:50%;transform-origin:0 50%}
.cf-leaf--prev{left:0;transform-origin:100% 50%}
.cf-leaf__f,.cf-leaf__b{position:absolute;inset:0;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.cf-leaf__b{transform:rotateY(180deg)}
.cf-leaf img{display:block;width:100%;height:100%;object-fit:contain}
.cf-leaf__f::after,.cf-leaf__b::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--cf-shade,0);background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,0) 60%)}

.cf-nav{position:absolute;top:50%;z-index:5;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;box-shadow:0 8px 20px -12px rgba(20,30,45,.5);transition:opacity .2s,background .15s}
.cf-nav:hover{background:#fff;color:var(--accent-text)}
.cf-nav:disabled{opacity:0;pointer-events:none}
.cf-nav--prev{left:14px}
.cf-nav--next{right:14px}
.cf-stage.is-zoomed .cf-nav{opacity:.35}
.cf-noscript{position:absolute;inset:auto 0 50%;text-align:center}

.cf-thumbs{position:relative;display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;flex:none}
.cf-thumbs[hidden]{display:none}
.cf-thumbs button{flex:none;width:118px;padding:0;border:2px solid transparent;border-radius:8px;background:none;cursor:pointer;position:relative}
.cf-thumbs img{display:block;width:100%;height:auto;aspect-ratio:var(--cf-ratio,1.414);object-fit:cover;border-radius:6px;background:var(--bg-3)}
.cf-thumbs span{position:absolute;right:5px;bottom:5px;font:600 10px/1 var(--mono);background:rgba(255,255,255,.92);color:var(--ink);border-radius:4px;padding:3px 5px}
.cf-thumbs button:hover{border-color:var(--line)}
.cf-thumbs button.is-on{border-color:var(--green-light)}
.cf-foot{display:flex;justify-content:space-between;align-items:center;gap:8px 20px;flex-wrap:wrap;flex:none}
.cf-foot .mu-note{margin:0}
.cf-msg{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;pointer-events:none}
.cf-msg:not(:empty){background:var(--navy-2);color:#fff;font:600 var(--fs-14) var(--sans);padding:10px 18px;border-radius:var(--r-pill);box-shadow:var(--mu-shadow)}

/* plein écran (API Fullscreen ou repli plein cadre sur iPhone) */
.cf-reader:fullscreen{height:100vh;max-width:none;padding:12px 20px 14px}
.cf-reader.is-fs{position:fixed;inset:0;z-index:200;height:100%;max-width:none;padding:10px 14px 12px}
html.cf-lock,html.cf-lock body{overflow:hidden}

@media (max-width:900px){
  .cf-reader{--cf-top:calc(var(--header-h) + 48px);padding:8px 12px 12px;gap:8px;min-height:420px}
  .cf-bar{gap:8px 10px}
  .cf-bar__title{flex:1 1 0}
  .cf-bar__title .eyebrow{display:none}
  .cf-bar__title h1{font-size:var(--fs-16);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .cf-devis{padding:9px 14px;font-size:var(--fs-14)}
  .cf-bar__tools{order:3;width:100%;justify-content:space-between}
  .cf-tool{width:36px;height:36px}
  .cf-sep{display:none}
  .cf-stage{border-radius:var(--r)}
  .cf-nav{display:none}
  .cf-thumbs button{width:88px}
  .cf-foot .mu-note{display:none}
}
@media (max-width:900px) and (orientation:portrait){.cf-reader{height:auto;min-height:0}.cf-stage{flex:none}}
@media (max-width:380px){.cf-bar__tools [data-cf-zoom="-1"]{display:none}}
@media (prefers-reduced-motion:reduce){.cf-pg.is-loading{animation:none}}