/* ============================================================
   JCS2I — Feuilletoir de la plaquette (plaquette/index.php)
   Chargée après assets/css/style.css ; préfixe « plq- ».
   ============================================================ */

/* ── En-tête de page ─────────────────────────────────────── */
.plq-hero { padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 3rem; }
.plq-hero p { margin-bottom: 0; }
.plq-hero .cta-group {
    display: flex; flex-wrap: wrap; gap: 1rem;
    justify-content: center; margin-top: 2rem;
}
.plq-size { font-weight: 500; font-size: .8em; opacity: .7; margin-left: .15rem; }
.plq-hero-meta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem;
    margin-top: 1.4rem; font-size: .82rem; color: var(--muted);
}
.plq-hero-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.plq-hero-meta svg { width: 15px; height: 15px; color: var(--accent); }

/* ── Cadre du feuilletoir ────────────────────────────────── */
.plq-section { padding: 2.5rem 1.5rem 4rem; background: var(--bg); }
.plq-viewer {
    --stage-h: calc(100vh - 270px);
    position: relative;
    max-width: 1400px; margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.plq-viewer.plq-is-fs,
.plq-viewer.plq-fs-fallback {
    --stage-h: calc(100vh - 140px);
    max-width: none; border-radius: 0; border: 0;
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    background: var(--bg);
}
.plq-viewer.plq-fs-fallback { position: fixed; inset: 0; z-index: 9000; }
.plq-viewer.plq-is-fs .plq-stage,
.plq-viewer.plq-fs-fallback .plq-stage { flex: 1; min-height: 0; }

/* ── Barre d'outils ──────────────────────────────────────── */
.plq-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; flex-wrap: wrap;
    padding: .55rem .8rem;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(5,11,24,.55);
}
.plq-tb-group { display: flex; align-items: center; gap: .3rem; }
.plq-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .75rem; border-radius: 10px;
    color: var(--text); font-size: .82rem; font-weight: 600;
    border: 1px solid transparent; background: transparent;
    transition: var(--transition); text-decoration: none; white-space: nowrap;
}
.plq-btn:hover { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--accent); }
.plq-btn.active { background: rgba(0,212,255,.1); border-color: rgba(0,212,255,.35); color: var(--accent); }
.plq-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.plq-btn-pdf { color: var(--accent); }
.plq-counter {
    font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 600;
    color: var(--text); min-width: 11ch; text-align: center;
    padding: .35rem .8rem; border-radius: 50px;
    background: rgba(255,255,255,.04); border: 1px solid var(--border-soft);
}

/* ── Scène et livre ──────────────────────────────────────── */
.plq-stage {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 1.6rem 4.5rem;          /* place pour les flèches en superposition */
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 50% 0%, rgba(0,87,255,.14), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.02), transparent);
    min-height: 320px;
}
.plq-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 300;
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text); background: rgba(13,22,41,.7);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--border); transition: var(--transition);
}
.plq-arrow-prev { left: 14px; }
.plq-arrow-next { right: 14px; }
.plq-arrow svg { width: 22px; height: 22px; }
.plq-arrow:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 20px var(--glow); }
.plq-arrow[disabled] { opacity: .22; pointer-events: none; }

.plq-book {
    position: relative;
    flex: 0 1 auto; min-width: 0;
    /* 64 % au plus : le livre décalé de 20 % sur la couverture ou la
       4e de couverture doit rester dans le cadre, flèches comprises. */
    width: min(64%, calc(var(--stage-h) * 1.4142));
    aspect-ratio: 1.4142 / 1;
    perspective: 2800px;
    perspective-origin: 50% 50%;
    transition: transform .9s cubic-bezier(.4,0,.2,1);
    touch-action: pan-y;
    user-select: none; -webkit-user-select: none;
}
.plq-book.plq-single {
    width: min(100%, calc(var(--stage-h) * .7071));
    aspect-ratio: .7071 / 1;
}
.plq-book.plq-at-start { transform: translateX(20%); }
.plq-book.plq-at-end   { transform: translateX(-20%); }

/* Ombre portée sous le livre */
.plq-book::before {
    content: ''; position: absolute; left: 3%; right: 3%; bottom: -14px; height: 40px;
    background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.55), transparent 70%);
    filter: blur(8px); z-index: 0; pointer-events: none;
    transition: transform .9s cubic-bezier(.4,0,.2,1);
}
.plq-book.plq-at-start::before { transform: translateX(-20%) scaleX(.55); }
.plq-book.plq-at-end::before   { transform: translateX(20%) scaleX(.55); }
.plq-single.plq-book::before   { left: 4%; right: 4%; }

/* ── Feuilles ────────────────────────────────────────────── */
.plq-leaf {
    position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform .9s cubic-bezier(.45,.05,.3,1);
    will-change: transform;
}
.plq-single .plq-leaf { left: 0; width: 100%; }
.plq-leaf.plq-turned { transform: rotateY(-180deg); }
.plq-single .plq-leaf.plq-turned:not(.plq-flipping) { visibility: hidden; }

.plq-face {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: #eef0f4;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.4);
    cursor: zoom-in;
}
.plq-front { border-radius: 0 5px 5px 0; }
.plq-back  { transform: rotateY(180deg); border-radius: 5px 0 0 5px; }
.plq-single .plq-front { border-radius: 4px; }
.plq-single .plq-back  { background: #dfe3ea; cursor: default; }
.plq-blank { background: transparent; box-shadow: none; cursor: default; pointer-events: none; }

.plq-face img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    -webkit-user-drag: none; user-select: none;
    opacity: 0; transition: opacity .35s ease;
}
.plq-face.plq-loaded img { opacity: 1; }
.plq-num {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; font-weight: 800; color: rgba(0,0,0,.12);
    pointer-events: none;
}
.plq-face.plq-loaded .plq-num { display: none; }

/* Ombre de reliure et ombre de mouvement */
.plq-face::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
}
.plq-front::after { background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 5%, transparent 13%); }
.plq-back::after  { background: linear-gradient(-90deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 5%, transparent 13%); }
.plq-single .plq-front::after { background: none; }
.plq-shade {
    position: absolute; inset: 0; pointer-events: none; opacity: 0;
    transition: opacity .4s ease;
}
.plq-front .plq-shade { background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,.08) 45%, transparent 70%); }
.plq-back  .plq-shade { background: linear-gradient(-90deg, rgba(0,0,0,.32), rgba(0,0,0,.08) 45%, transparent 70%); }
.plq-leaf.plq-flipping .plq-shade { opacity: 1; }

/* Zones de bord : cliquer près de la tranche tourne la page */
.plq-edge {
    position: absolute; top: 0; bottom: 0; width: 20%;
    cursor: pointer;
}
.plq-edge-r { right: 0; }
.plq-edge-l { left: 0; }
.plq-edge::after {
    content: ''; position: absolute; bottom: 0; width: 0; height: 0;
    border-style: solid; opacity: 0; transition: opacity .25s ease;
}
.plq-edge-r::after { right: 0; border-width: 0 0 34px 34px; border-color: transparent transparent rgba(0,0,0,.16) transparent; }
.plq-edge-l::after { left: 0;  border-width: 34px 0 0 34px;  border-color: transparent transparent transparent rgba(0,0,0,.16); }
.plq-edge:hover::after { opacity: 1; }
.plq-edge:hover { background: linear-gradient(90deg, transparent, rgba(0,0,0,.05)); }
.plq-edge-l:hover { background: linear-gradient(-90deg, transparent, rgba(0,0,0,.05)); }

/* ── Vignettes ───────────────────────────────────────────── */
.plq-thumbs {
    display: flex; gap: .5rem; overflow-x: auto; overflow-y: hidden;
    padding: .8rem 1rem;
    border-top: 1px solid var(--border-soft);
    background: rgba(5,11,24,.5);
    scrollbar-width: thin;
}
.plq-thumbs[hidden] { display: none; }
.plq-thumbs::-webkit-scrollbar { height: 6px; }
.plq-thumb {
    position: relative; flex: 0 0 auto; width: 62px;
    border-radius: 6px; overflow: hidden;
    border: 2px solid transparent; background: #fff;
    opacity: .6; transition: var(--transition); padding: 0;
}
.plq-thumb img { width: 100%; aspect-ratio: .7071; object-fit: cover; display: block; }
.plq-thumb span {
    position: absolute; bottom: 3px; right: 4px;
    font-size: .6rem; font-weight: 700; line-height: 1;
    padding: 2px 4px; border-radius: 4px;
    background: rgba(5,11,24,.75); color: #fff;
}
.plq-thumb:hover { opacity: 1; transform: translateY(-2px); }
.plq-thumb.active { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,212,255,.25); }

/* ── Sommaire ────────────────────────────────────────────── */
.plq-toc {
    position: absolute; top: 58px; left: 12px; z-index: 600;
    width: min(400px, calc(100% - 24px));
    max-height: calc(100% - 72px); overflow: auto;
    background: rgba(13,22,41,.97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border); border-radius: 14px;
    padding: .5rem; box-shadow: var(--shadow-lg);
}
.plq-toc[hidden] { display: none; }
.plq-toc-title {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
    color: var(--accent); padding: .5rem .7rem .3rem;
}
.plq-toc button {
    display: flex; width: 100%; align-items: baseline; gap: .6rem;
    padding: .5rem .7rem; border-radius: 8px;
    color: var(--text); font-size: .86rem; font-weight: 600; text-align: left;
    transition: var(--transition);
}
.plq-toc button:hover { background: rgba(0,212,255,.08); color: var(--accent); }
.plq-toc-desc { color: var(--muted); font-size: .74rem; font-weight: 400; flex: 1; }
.plq-toc-n { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.plq-toc-sep { height: 1px; background: var(--border-soft); margin: .35rem .5rem; }

/* ── Zoom : lecture d'une page ───────────────────────────── */
.plq-zoom {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(2,6,16,.96);
    display: flex; flex-direction: column;
}
.plq-zoom[hidden] { display: none; }
.plq-zoom-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .9rem; color: var(--text);
    background: rgba(5,11,24,.8); border-bottom: 1px solid var(--border-soft);
}
.plq-zoom-scroll { flex: 1; overflow: auto; text-align: center; padding: .6rem 0 2rem; cursor: zoom-out; }
.plq-zoom-scroll img {
    display: block; margin: 0 auto;
    width: min(100%, 1405px); height: auto;
    cursor: zoom-out; background: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.plq-zoom.plq-fit .plq-zoom-scroll img {
    width: auto; max-width: 100%;
    height: calc(100vh - 80px); cursor: zoom-in;
}

/* ── Aide ────────────────────────────────────────────────── */
.plq-hint {
    max-width: 1400px; margin: 1rem auto 0;
    font-size: .8rem; color: var(--muted); text-align: center;
}
.plq-hint kbd {
    font-family: inherit; font-size: .72rem; padding: .1rem .4rem;
    border: 1px solid var(--border); border-radius: 5px; background: rgba(255,255,255,.04);
}
.plq-noscript {
    max-width: 800px; margin: 0 auto; padding: 2rem;
    text-align: center; color: var(--muted);
}

/* ── Réactivité ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .plq-btn .plq-lbl { display: none; }
    .plq-btn { padding: .5rem .6rem; }
    .plq-counter { min-width: 0; font-size: .78rem; }
}
@media (max-width: 768px) {
    .plq-hero { padding-top: calc(var(--nav-h) + 1.8rem); padding-bottom: 1.8rem; }
    .plq-hero p { font-size: .95rem; }
    .plq-hero .cta-group { margin-top: 1.3rem; gap: .6rem; }
    .plq-hero-meta { display: none; }
    .plq-section { padding: 1rem .6rem 3rem; }
    .plq-viewer { --stage-h: calc(100vh - 220px); border-radius: 14px; }
    .plq-viewer.plq-is-fs, .plq-viewer.plq-fs-fallback { --stage-h: calc(100vh - 120px); }
    .plq-stage { padding: 1rem 1.4rem; }
    .plq-arrow { width: 44px; height: 44px; }   /* cible tactile ≥ 44 px (06/09/2026) */
    .plq-arrow-prev { left: 4px; }
    .plq-arrow-next { right: 4px; }
    .plq-toolbar { padding: .45rem .5rem; }
    .plq-toc { top: 52px; left: 8px; }
    .plq-hint { font-size: .74rem; }
    .plq-hint .plq-hint-desktop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .plq-leaf, .plq-book, .plq-book::before { transition: none; }
}

/* ── Téléphone (06/09/2026) : cibles ≥ 44 px, PDF web seul en avant ─── */
.plq-cta-hd-lite { display: none; }
@media (max-width: 640px) {
    .plq-btn { min-height: 44px; min-width: 44px; justify-content: center; }
    .plq-toc button, .plq-toc a { min-height: 44px; }
    .plq-hero .cta-group .plq-cta-hd { display: none; }
    .plq-cta-hd-lite { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
                       font-size: .8rem; color: var(--muted); text-decoration: underline; }
}