/* Visionneuse de documents (maison) */
.docflip-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 1vw;
    overflow: hidden;
    touch-action: manipulation; /* pas de double-tap-zoom du site dans la modale (le viewport est en none) */
}
.docflip {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Barre du haut : zoom (gauche) + actions télécharger/imprimer/fermer (droite) */
.docflip__bar {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 2px 2px 8px;
}
.docflip__zoom, .docflip__actions { display: flex; gap: .4rem; }
.docflip__btn {
    background: rgba(255, 255, 255, .15);
    border: 0;
    color: #fff;
    line-height: 1;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    touch-action: manipulation; /* supprime le double-tap-zoom du site sur les boutons */
    -webkit-user-select: none;
    user-select: none;
}
.docflip__btn:hover { background: rgba(255, 255, 255, .32); color: #fff; }
.docflip__btn svg { width: 24px; height: 24px; display: block; }

/* Scène : flèches + zone d'affichage */
.docflip__stage {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
}
.docflip__viewport {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    touch-action: none; /* on gère pinch-zoom / pan / swipe en JS → pas de zoom natif du site */
}
/* Zoom : pan à la souris (survol), sans scrollbars (le curseur zoom-in/out est géré en JS) */
.docflip__viewport { cursor: zoom-in; }
.docflip__viewport.is-zoomed {
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    scrollbar-width: none;
}
.docflip__viewport.is-zoomed::-webkit-scrollbar { width: 0; height: 0; }
/* margin auto : centre la planche tant qu'une dimension tient dans le viewport, scrollable au-delà */
.docflip__viewport.is-zoomed .docflip__spread { margin: auto; }

/* Planche (1 ou 2 pages) */
.docflip__spread {
    display: flex;
    line-height: 0;
    position: relative;
}
.docflip__spread[data-align="right"] { justify-content: flex-end; }
.docflip__spread[data-align="left"] { justify-content: flex-start; }
.docflip__spread[data-align="center"], .docflip__spread[data-align="fill"] { justify-content: center; }
/* Pli central (reliure) en double-page : ombre du fond du livre au centre */
.docflip__spread[data-align="fill"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 70px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, .28) 47%,
        rgba(0, 0, 0, .28) 53%,
        rgba(0, 0, 0, 0));
}
.docflip__page {
    position: relative;
    display: block;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 6px 30px rgba(0, 0, 0, .45);
    overflow: hidden;
}
/* Emplacement vide (côté libre d'une couverture seule ou d'une dernière page seule) */
.docflip__page--empty { background: transparent; box-shadow: none; }

/* Coin de page qui se courbe au survol des zones de navigation (indice : le clic tourne la page).
   ::after = coin bas-droite (suivant), ::before = coin bas-gauche (précédent). */
.docflip__page::after,
.docflip__page::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 3;
    transition: width .2s ease, height .2s ease, opacity .2s ease;
}
.docflip__page::after {
    right: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%); /* triangle pointu coin bas-droite */
    /* dessus : liseré clair du pli + ombre du rabat ; dessous : la page suivante */
    background-image:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0) 44%,
            rgba(255, 255, 255, .55) 49%,
            rgba(0, 0, 0, .38) 55%,
            rgba(0, 0, 0, 0) 82%),
        var(--peel-img, none);
    background-size: auto, var(--peel-bg, cover);
    background-position: center, bottom right;
    background-repeat: no-repeat;
    background-color: #3f3f3f;
}
.docflip__page::before {
    left: 0;
    clip-path: polygon(0 0, 0 100%, 100% 100%); /* triangle pointu coin bas-gauche */
    background-image:
        linear-gradient(225deg,
            rgba(255, 255, 255, 0) 44%,
            rgba(255, 255, 255, .55) 49%,
            rgba(0, 0, 0, .38) 55%,
            rgba(0, 0, 0, 0) 82%),
        var(--peel-img, none);
    background-size: auto, var(--peel-bg, cover);
    background-position: center, bottom left;
    background-repeat: no-repeat;
    background-color: #3f3f3f;
}
.docflip__page.is-peel-br::after {
    width: 70px;
    height: 70px;
    opacity: 1;
    filter: drop-shadow(-4px -4px 5px rgba(0, 0, 0, .35));
}
.docflip__page.is-peel-bl::before {
    width: 70px;
    height: 70px;
    opacity: 1;
    filter: drop-shadow(4px -4px 5px rgba(0, 0, 0, .35));
}
.docflip__page img {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.docflip__page-spin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: docflip-rot .8s linear infinite;
}
@keyframes docflip-rot { to { transform: rotate(360deg); } }

/* Effet tourne-page 3D (flip autour de la reliure) — structure flip-card, sans scintillement */
.docflip__turn {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    perspective: 1800px;
}
.docflip__turn-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
}
.docflip__turn-face {
    position: absolute;
    inset: 0;
    background-size: 100% 100%; /* identique au rendu des cellules (<img> étiré) → pas de saut à la fin */
    background-position: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 6px 26px rgba(0, 0, 0, .4);
    overflow: hidden;
}
/* Faux curl : une bande ombre + lumière balaie la feuille pendant le flip → illusion de page qui se plie */
.docflip__turn-face::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg,
        rgba(0, 0, 0, 0) 38%,
        rgba(0, 0, 0, .30) 47%,
        rgba(255, 255, 255, .22) 51%,
        rgba(0, 0, 0, 0) 62%);
    background-size: 220% 100%;
    background-position: 130% 0;
    background-repeat: no-repeat;
    opacity: 0;
}
.docflip__turn-back { transform: rotateY(180deg); }
.docflip__turn.is-next .docflip__turn-inner { transform-origin: left center;  animation: docflip-turn-next .4s ease-in-out forwards; }
.docflip__turn.is-prev .docflip__turn-inner { transform-origin: right center; animation: docflip-turn-prev .4s ease-in-out forwards; }
.docflip__turn.is-next .docflip__turn-face::after { animation: docflip-curl .4s ease-in-out forwards; }
.docflip__turn.is-prev .docflip__turn-face::after { animation: docflip-curl-rev .4s ease-in-out forwards; }
@keyframes docflip-turn-next { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes docflip-turn-prev { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes docflip-curl {
    0%   { opacity: 0;   background-position: 130% 0; }
    18%  { opacity: 1; }
    100% { opacity: .22; background-position: -30% 0; }
}
@keyframes docflip-curl-rev {
    0%   { opacity: 0;   background-position: -30% 0; }
    18%  { opacity: 1; }
    100% { opacity: .22; background-position: 130% 0; }
}

/* Flèches de navigation */
.docflip__nav {
    background: rgba(255, 255, 255, .15);
    border: 0;
    color: #fff;
    width: 48px;
    height: 64px;
    border-radius: 6px;
    cursor: pointer;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.docflip__nav svg { width: 28px; height: 28px; display: block; }
.docflip__nav:hover { background: rgba(255, 255, 255, .3); }
.docflip__nav.is-hidden { visibility: hidden; } /* 1re / dernière planche */

.docflip__status {
    color: #fff;
    min-height: 1.2em;
    font-size: .9rem;
    text-align: center;
}

/* Loader */
.docflip__loader {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border: 4px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: docflip-spin .8s linear infinite;
    z-index: 3;
}
@keyframes docflip-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.docflip-overlay.is-loading .docflip__loader { display: block; }
.docflip-overlay.is-loading .docflip__nav,
.docflip-overlay.is-loading .docflip__spread,
.docflip-overlay.is-loading .docflip__controls,
.docflip-overlay.is-loading .docflip__grid { visibility: hidden; }

/* Slider de pages + compteur */
.docflip__controls {
    flex: 0 0 auto;
    width: 100%;
    max-width: 620px;
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #fff;
    padding: .6rem 1rem .2rem;
}
.docflip__counter { font-size: .85rem; white-space: nowrap; min-width: 70px; text-align: right; }
.docflip__slider { flex: 1 1 auto; cursor: pointer; accent-color: #fff; }

/* Mode vignettes : grille plein écran (basculée par le bouton en haut à droite) */
.docflip__grid {
    display: none;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 1rem;
    padding: 1rem .5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .4) transparent;
}
.docflip--thumbs .docflip__grid { display: flex; }
.docflip--thumbs .docflip__stage,
.docflip--thumbs .docflip__controls { display: none; }
.docflip--thumbs .docflip__thumbs-toggle { background: rgba(255, 255, 255, .4); }

.docflip__thumb {
    flex: 0 0 auto;
    position: relative;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background: rgba(255, 255, 255, .1);
    cursor: pointer;
    overflow: hidden;
    opacity: .85;
    transition: opacity .15s, border-color .15s;
    line-height: 0;
    height: max-content;
}
.docflip__thumb:hover { opacity: 1; }
.docflip__thumb-imgs { display: flex; position: relative; z-index: 1; }
.docflip__thumb-img { width: var(--thumb-w, 64px); height: var(--thumb-h, 90px); object-fit: cover; display: block; opacity: 0; transition: opacity .2s; }
.docflip__thumb-img.is-loaded { opacity: 1; }
.docflip__thumb-spin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: docflip-rot .8s linear infinite;
    z-index: 0;
}
.docflip__thumb.is-active { border-color: #fff; opacity: 1; }
.docflip__thumb-num {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
}

/* Une seule planche : pas de slider ni de bouton vignettes */
.docflip--single .docflip__controls,
.docflip--single .docflip__thumbs-toggle { display: none; }

@media (max-width: 600px) {
    .docflip__nav { width: 36px; height: 52px; }
    .docflip__nav svg { width: 22px; height: 22px; }
}