/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@400;700&family=Playfair+Display:wght@400;700&family=Libre+Baskerville:wght@400;700&family=Londrina+Solid:wght@100;300;400;900&display=swap');

#pb-root {
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,
  "Playfair Display","Libre Baskerville","Londrina Solid",sans-serif;
  padding:8px;
}

#pb-edit-toolbar{
  position:sticky; top:8px; z-index:10; display:flex; gap:8px; align-items:center;
  background:#fff; border:1px solid #e5e7eb; padding:8px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.06);
}

#pb-edit-toolbar .sep{width:1px;height:22px;background:#e5e7eb;margin:0 6px}
#pb-edit-toolbar button{border:1px solid #e5e7eb;background:#f9fafb;border-radius:8px;padding:6px 10px;cursor:pointer}
#pb-edit-toolbar button:hover{background:#eef2ff}
#pb-edit-toolbar .toggle{font-size:12px; color:#374151; display:flex; align-items:center; gap:6px}

#pb-canvas-wrap{margin-top:12px; display:flex; justify-content:center;}
#pb-canvas{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:20px; width:min(1100px,100%);}

.pb-page{
  position:relative; width:100%; padding-top:112%; /* ratio */
  background:#fafafa; border:2px dashed #e5e7eb; border-radius:16px; overflow:hidden;
}
.pb-page::after{content:attr(aria-label); position:absolute; top:8px; left:12px; font-size:12px; color:#6b7280}

.pb-block-item{position:absolute; outline:0; user-select:none; border-radius:0 !important;}
.pb-block-text {
  display: inline-block !important;
  white-space: nowrap !important;
  width: max-content !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  font-size: 22px;
  line-height: 1;
  color: #111827;
  font-family: "Playfair Display", serif;
}
.pb-block-image img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:0 !important;
}

/* état sélection */
.pb-selected {
  outline: 0px solid #ffffff;
  outline-offset: 0;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* handles (base inchangée) */
.pb-handle{position:absolute; width:10px; height:10px; background:#3b82f6; border-radius:50%; cursor:nwse-resize}
.pb-handle.br{right:-6px; bottom:-6px}
.pb-rot{position:absolute; top:-22px; left:50%; transform:translateX(-50%); width:12px;height:12px; background:#10b981; border-radius:50%; cursor:grab}

/* mini-toolbar */
#pb-mini-toolbar{
  position:fixed; left:12px; top:70px; display:flex; gap:10px; align-items:center;
  background:#fff; border:1px solid #e5e7eb; padding:6px 10px; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08);
}
#pb-mini-toolbar button{border:1px solid #e5e7eb;background:#f9fafb;border-radius:8px;padding:4px 8px;cursor:pointer}
#pb-mini-toolbar .vsep{width:1px;height:18px;background:#e5e7eb}
#pb-mini-toolbar .tiny{font-size:12px;color:#374151;display:flex;align-items:center;gap:6px}
#pb-mini-toolbar input[type="range"]{width:120px}

/* panneaux */
#pb-fly-panels .panel{
  position:fixed; z-index:20; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.1);
  padding:8px; min-width:220px;
}
.panel .title{font-weight:600; margin:2px 4px 6px}
.panel .item-btn{display:block;width:100%;text-align:left;border:0;background:#fff;padding:8px;border-radius:8px;cursor:pointer}
.panel .item-btn:hover{background:#f3f4f6}

/* grille */
#pb-grid-overlay{
  position:absolute; inset:0; pointer-events:none; grid-column:1 / span 2;
}
#pb-grid-overlay.hidden{display:none}

#pb-grid-overlay::before,
#pb-grid-overlay::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:calc(50% - 10px);            /* 10px = gap/2 (gap des pages = 20px) */
  border-radius:16px;
  background:
    linear-gradient(to right, rgba(59,130,246,.12) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, rgba(59,130,246,.12) 1px, transparent 1px) 0 0 / 40px 40px;
  opacity:.8;
}
#pb-grid-overlay::before{ left:0; }
#pb-grid-overlay::after{ right:0; }
#pb-grid-overlay.hidden{display:none}

/* boutons + focus */
button:focus-visible{outline:2px solid #6366f1; outline-offset:2px}

/* Page active (couverture sélectionnée) */
.pb-page.is-active{ 
  border-color:#3b82f6 !important;
  box-shadow:0 0 0 2px rgba(59,130,246,.35) inset;
}
.pb-page.is-active::after{
  color:#3b82f6;
  font-weight:600;
}

/* --- Nouveau look "pro" des 2 couvertures (visuel uniquement) --- */
.pb-page{
  background:#ffffff !important;
  border:1px solid #d1d5db !important;
  border-radius:14px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.08) !important;
}
.pb-page::after{
  color:#9ca3af !important;
  font-weight:600;
}
.pb-page[data-page="left"]{
  background:
    linear-gradient(to right,
      transparent calc(100% - 24px),
      rgba(17,24,39,.18) calc(100% - 24px),
      rgba(17,24,39,.18) calc(100% - 23px),
      transparent calc(100% - 23px)
    ),
    #ffffff;
}
.pb-page[data-page="right"]{
  background:
    linear-gradient(to right,
      rgba(17,24,39,0.18) 24px,
      rgba(17,24,39,0.18) 25px,
      transparent 25px
    ),
    #ffffff;
}
.pb-page.is-active{
  border-color:#3b82f6 !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.10),
    inset 0 0 0 2px rgba(59,130,246,.35);
}

/* === Handles & Bulle propres === */

/* Poignée de redimensionnement */
.pb-handle{
  position:absolute;
  right:-10px;
  bottom:-10px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#3b82f6;
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  cursor:nwse-resize;
  touch-action:none;
  display:none;
}

/* Afficher la poignée uniquement quand sélectionné */
.pb-block-item.pb-selected .pb-handle{
  display:block;
}

.pb-rot {
  display: none !important;
}

/* ===================== MENU LATERAL (merge) ================== */
/* Variables menu */
:root{
  --bg: #0f141a;
  --panel: #10161d;
  --muted: #8aa0b2;
  --text: #eaf2f8;

  /* Palette voyage */
  --sea: #2aa7d8;
  --dusk: #ff8aa0;
  --sand: #e7c390;
  --sage: #8ec7a7;
  --coral: #ff7a59;

  --card: #121a22;
  --stroke: rgba(255,255,255,.08);
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --radius: 18px;
}
.app{
  /* placé sous la barre WP */
  position: fixed;
  top: 32px;             /* adapte si besoin */
  left: 0;
  width: 100vw;
  height: calc(100vh - 32px);
  display: grid;
  grid-template-columns: 300px 1fr auto;
  z-index: 9990;
  margin-left: 300px;    /* réserve l'espace sidebar */
}

/* Sidebar gauche (menu) */
.sidebar{
  position: fixed;
  top: 32px; /* barre WP admin */
  left: 0;
  width:300px;
  min-width:300px;
  height: calc(100vh - 32px);
  z-index: 1000;

  background:linear-gradient(180deg,#0f171f 0%, #0c1218 100%);
  border-right:1px solid var(--stroke);
  padding:16px 12px;
  display:flex; flex-direction:column; gap:12px;
}

.brand{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--stroke);
}
.brand-icon{font-size:20px}
.brand-name{font-weight:700; letter-spacing:.2px}

.tabs{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.tab{
  all:unset; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; color:var(--text);
  background:transparent; border:1px solid transparent; position:relative;
}
.tab .tab-ico{width:22px; text-align:center; font-size:18px; opacity:.9}
.tab .tab-label{font-weight:600; opacity:.9}
.tab:hover{background:rgba(255,255,255,.04)}
.tab.is-active{
  background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border-color:var(--stroke);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.sidebar-footer{margin-top:auto; display:flex; justify-content:flex-end}
.collapse{
  all:unset; cursor:pointer; padding:8px 10px; border-radius:10px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.04);
}
.sidebar.is-collapsed{width:72px}
.sidebar.is-collapsed .brand-name,
.sidebar.is-collapsed .tab-label{display:none}
.sidebar.is-collapsed .tabs .tab{justify-content:center}

/* Zone panneau (bibliothèque) à droite de la sidebar */
.panel-area{
  position: fixed;
  top: 32px;                 /* WordPress admin bar */
  left: 300px;               /* largeur sidebar */
  width: 300px;              /* largeur colonne type Canva */
  height: calc(100vh - 32px);
  background: rgba(18, 22, 28, 0.92);
  backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255,255,255,0.07);
  box-shadow: 8px 0 30px rgba(0,0,0,0.35);
  padding: 0;
  overflow: hidden;
  z-index: 1000;
  border-radius: 0 16px 16px 0;

  /* état fermé par défaut */
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: .25s ease;
}

/* Quand ouverte */
.panel-area.is-open{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* En-tête de la bibliothèque */
.panel-area .panel-header{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  padding: 14px 16px;
  z-index: 5;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.panel-area .panel-header h1,
.panel-area .panel-header .crumb{ color: #eaf2f8; }

/* Panneaux internes du menu (scopés pour éviter tout conflit) */
.panel-area .panel{ display:none; padding:14px; height:calc(100vh - 110px); overflow-y:auto; }
.panel-area .panel.is-active{ display:block; animation:fade .2s ease; }

/* Animation utilisée par le menu */
@keyframes fade{from{opacity:.5; transform:translateY(4px)} to{opacity:1; transform:none}}

/* Grilles et cartes de la bibliothèque (scopées) */
.panel-area .grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-area .card{
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.panel-area .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.panel-area .card .photo{
  background: #eee !important;
  height: 120px;
  display:flex; align-items:center; justify-content:center; font-size:40px;
}
.panel-area .card .meta{padding:12px 14px}
.panel-area .card .meta h3{margin:0 0 4px; font-size:15px; color:#111;}
.panel-area .card .meta p{margin:0; color:#666; font-size:12px}

/* Variantes “stamp” & couleurs (scopées) */
.panel-area .card.stamp::after{
  content:""; position:absolute; inset:auto 12px 12px auto; width:60px; height:60px; border-radius:50%;
  border:2px dashed rgba(0,0,0,.18); opacity:.9; pointer-events:none; transform:rotate(-8deg);
}
.panel-area .sea  .photo{background:linear-gradient(135deg, #0f2a3a, #13344a) !important}
.panel-area .dusk .photo{background:linear-gradient(135deg, #2a1820, #23141b) !important}
.panel-area .sand .photo{background:linear-gradient(135deg, #2c2419, #201a13) !important}
.panel-area .sage .photo{background:linear-gradient(135deg, #152520, #101c17) !important}
.panel-area .coral .photo{background:linear-gradient(135deg, #2b1714, #1f1210) !important}

.panel-area .bg.sea   .photo{background:linear-gradient(135deg, #0c3b56, #136a92) !important}
.panel-area .bg.sand  .photo{background:linear-gradient(135deg, #8f744b, #caa66a) !important}
.panel-area .bg.dusk  .photo{background:linear-gradient(135deg, #8a3a4a, #ff8aa0) !important}
.panel-area .bg.sage  .photo{background:linear-gradient(135deg, #3d7a60, #8ec7a7) !important}

/* Mockups “booklet” (scopés) */
.panel-area .booklet .book{
  margin:14px; height:130px; border-radius:10px; position:relative; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--stroke);
}
.panel-area .booklet .spine{
  position:absolute; left:0; top:0; bottom:0; width:22px; background:rgba(255,255,255,.06);
  border-right:1px solid var(--stroke); border-radius:10px 0 0 10px;
}
.panel-area .booklet .cover{
  letter-spacing:.22em; font-weight:800; font-size:14px; color:#e9f6ff; opacity:.9;
}
.panel-area .booklet .book.blue  { background:linear-gradient(135deg, rgba(42,167,216,.3), rgba(42,167,216,.08)); }
.panel-area .booklet .book.coral { background:linear-gradient(135deg, rgba(255,122,89,.28), rgba(255,122,89,.08)); }
.panel-area .booklet .book.mint  { background:linear-gradient(135deg, rgba(142,199,167,.32), rgba(142,199,167,.09)); }

/* Scrollbar pour le contenu de la bibliothèque */
.panel-area ::-webkit-scrollbar{height:10px;width:10px}
.panel-area ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3); border-radius:20px}
.panel-area ::-webkit-scrollbar-track{background:transparent}

/* Helpers d’ouverture/fermeture via classe sur body si besoin */
body.menu-open .panel-area{ transform: translateX(0); opacity:1; pointer-events:auto; }
body.menu-open .sidebar{ transform: translateX(0); }

/* Fin MENU LATERAL */
/* ===================== OVERRIDES MENU COMPACT ===================== */
/* Place ce bloc TOUT EN BAS de ton CSS existant */

:root{
  /* largeur compacte de la sidebar */
  --sidebar-w: 200px;

  /* paddings ultra-compacts des éléments */
  --sidebar-pad-y: 8px;
  --sidebar-pad-x: 8px;
  --tab-pad-y: 6px;   /* ~bordure quasi collée verticalement */
  --tab-pad-x: 8px;   /* ~bordure quasi collée horizontalement */
  --tabs-gap: 6px;
}

/* Aligner toute la grille et le panneau droit sur la nouvelle largeur */
.app{
  grid-template-columns: var(--sidebar-w) 1fr auto !important;
  margin-left: var(--sidebar-w) !important;
}
.sidebar{
  width: var(--sidebar-w) !important;
  min-width: var(--sidebar-w) !important;
  padding: var(--sidebar-pad-y) var(--sidebar-pad-x) !important;
}

/* Le panneau “bibliothèque” suit exactement la sidebar */
.panel-area{
  left: var(--sidebar-w) !important;
}

/* Réduction de l’espace interne des items et de leur gap */
.tabs{
  gap: var(--tabs-gap) !important;
  margin-top: 4px !important;
}
.tab{
  padding: var(--tab-pad-y) var(--tab-pad-x) !important;
  border-radius: 10px !important; /* un peu plus tranchant visuellement */
}
.tab .tab-ico{
  width: 18px !important;     /* icône plus compacte */
  font-size: 16px !important;
}
.tab .tab-label{
  font-weight: 600;
  opacity: .95;
}

/* En-tête “Souvenirs” compact */
.brand{
  padding: 6px 8px !important;
  border-radius: 10px !important;
}
.brand-icon{ font-size: 18px !important; }

/* État “collapsed” intact (pas besoin de modifier JS) */
.sidebar.is-collapsed{
  width: 72px !important;
  min-width: 72px !important;
}
/* Cartes de la bibliothèque : légère compaction pour cohérence */
.panel-area .panel{ padding: 10px !important; }
.panel-area .panel-header{ padding: 10px 12px !important; }
.panel-area .card .meta{ padding: 10px 12px !important; }
.panel-area .card .photo{ height: 110px !important; }

/* Optionnel : onglet actif encore plus net malgré le padding réduit */
.tab.is-active{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  border-color: var(--stroke) !important;
}
/* ====== OFFSET DYNAMIQUE SOUS LE HEADER (OVERRIDES) ====== */
:root{
  /* sera mis à jour par le JS ci-dessous */
  --chrome-top: 32px;            /* fallback si JS off */
  --sidebar-w: 200px;            /* garde ta largeur compacte actuelle */
}

/* repositionne tout en fonction de --chrome-top */
.app{
  position: fixed !important;
  top: var(--chrome-top) !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--chrome-top)) !important;
  grid-template-columns: var(--sidebar-w) 1fr auto !important;
  margin-left: var(--sidebar-w) !important;
  z-index: 9990 !important;
}

/* sidebar gauche */
.sidebar{
  position: fixed !important;
  top: var(--chrome-top) !important;
  height: calc(100vh - var(--chrome-top)) !important;
  width: var(--sidebar-w) !important;
  min-width: var(--sidebar-w) !important;
}

/* panneau bibliothèque à droite de la sidebar */
.panel-area{
  position: fixed !important;
  top: var(--chrome-top) !important;
  left: var(--sidebar-w) !important;
  height: calc(100vh - var(--chrome-top)) !important;
}

/* état replié conservé */
.sidebar.is-collapsed{
  width: 72px !important;
  min-width: 72px !important;
}
.sidebar.is-collapsed + .panel-area,
body .panel-area{ left: var(--sidebar-w) !important; }



/* =========================================================
   LIVRE : GAUCHE | SPINE | DROITE — TOUT DROIT, ÉDITABLE
   ========================================================= */
:root{
  --spine: 42px;       /* largeur du dos */
  --page-width: 400px; /* largeur fixe d'une couverture (à ajuster) */
}

/* Le livre s'élargit, mais chaque couverture garde la même largeur */
#pb-canvas{
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--page-width) var(--spine) var(--page-width) !important;
  width: calc(var(--page-width) * 2 + var(--spine)) !important; /* total = gauche + dos + droite */
  gap: 20px !important;
  margin: 12px auto 0 !important;
  align-items: stretch !important;
}

/* Pages : ratio gère la hauteur, mais comme la largeur reste fixe,
   la hauteur restera constante même si le dos grossit */
.pb-page{
  position: relative;
  background:#fff !important;
  border:2px solid #e5e7eb !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden;
  aspect-ratio: 0.707;
  height:auto !important;
}



/* Couvertures : blanches, bords droits, ratio de page */
.pb-page{
  position: relative;
  background:#fff !important;
  border:2px solid #e5e7eb !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden;

  /* ON SUPPRIME LE RATIO QUI FAIT REMONTER LA COUVERTURE */
  height:100% !important;
  aspect-ratio:auto !important;
}

.pb-page[data-page="left"]{  grid-column:1; }
.pb-page[data-page="right"]{ grid-column:3; }

/* SPINE : même hauteur que les pages (stretch), étroit et éditable */
.pb-spine{
  grid-column:2;
  aspect-ratio:auto !important; /* on ignore le ratio pour le spine */
  align-self:stretch !important;
  height:100% !important;
  display:block;
  position: relative; /* nécessaire pour ancrer les barres */
  z-index: 1;
  /* bordures du dos */
  border-left: 2px solid #e5e7eb !important;
  border-right:2px solid #e5e7eb !important;
  border-top:0 !important;
  border-bottom:0 !important;
}

/* ===== Barres haut et bas du spine ===== */
.pb-spine::before,
.pb-spine::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  height: 2px;
  background: #e5e7eb; /* même couleur que les bordures */
  z-index: 2;
}
/* Grille au-dessus des 3 colonnes */
#pb-grid-overlay{
  grid-column:1 / span 3;
  position:relative;
  z-index:2;
}

/* Active = fin liseré bleu uniquement */
.pb-page.is-active{
  border-color:#3b82f6 !important;
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.3) !important;
}

/* Pas d’effets internes */
.pb-page::before,
.pb-page::after{ display:none !important; }
/* ===== Barres qui FERMENT le spine (haut/bas) ===== */
/* On vise à la fois l'id et la classe au cas où */
#pb-spine, .pb-spine {
  position: relative; /* ancrage des pseudo-éléments */
}

#pb-spine::before,
.pb-spine::before {
  top: 0px;                          /* position du trait du haut */
  border-top: 2px solid #e5e7eb;      /* épaisseur et couleur du trait */
}

#pb-spine::after,
.pb-spine::after {
  bottom:0px;                       /* position du trait du bas */
  border-bottom: 2px solid #e5e7eb;   /* épaisseur et couleur du trait */
}


/* Mode compact par défaut (on garde ce que tu as) */
#pb-canvas{
  gap:0 !important;
}
.pb-page[data-page="left"]  { border-right:0 !important; }
.pb-page[data-page="right"] { border-left:0 !important; }
/* barres haut/bas déjà gérées par #pb-canvas::before/after */

/* Mode 3 BLOCS : remettre l'espace + les bordures internes et couper les barres */
#pb-canvas.book-three{
  gap:20px !important;                 /* re-crée l’espace visuel */
}
#pb-canvas.book-three .pb-page[data-page="left"]{
  border-right:2px solid #e5e7eb !important;  /* re-affiche le trait interne gauche */
}
#pb-canvas.book-three .pb-page[data-page="right"]{
  border-left:2px solid #e5e7eb !important;   /* re-affiche le trait interne droit */
}
/* En 3 blocs, on ne ferme pas en haut/bas */
#pb-canvas.book-three::before,
#pb-canvas.book-three::after{
  display:none !important;
}
/* === FIX GRILLE (overlay couvrant) === */
#pb-canvas{ position: relative !important; }

#pb-grid-overlay{
  grid-column: 1 / span 3 !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 4 !important;   /* au-dessus des pages, sous les barres haut/bas (z=9/10) */
}
/* === Spine actif (même style que les couvertures sélectionnées) === */
.pb-spine.is-active {
  border-color: #3b82f6 !important;
  box-shadow: inset 0 0 0 2px rgba(59,130,246,.35) !important;
}

#pb-canvas:not(.book-three) .pb-page.is-active[data-page="left"]{
  border-right-width: 2px !important;
  border-right-style: solid !important;
  border-right-color: #3b82f6 !important;
}

#pb-canvas:not(.book-three) .pb-page.is-active[data-page="right"]{
  border-left-width: 2px !important;
  border-left-style: solid !important;
  border-left-color: #3b82f6 !important;
}
/* SPINE : au-dessus des pages, et coupe ce qui dépasse */
.pb-page{ z-index:1 !important; }
.pb-spine{
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important; /* empêche le titre de sortir */
}
.pb-spine {
  overflow: hidden !important; /* empêche le texte de dépasser */
}
/* priorité d’empilement : la tranche au-dessus des couvertures */
.pb-page[data-page="left"],
.pb-page[data-page="right"] { z-index: 1 !important; }

#pb-spine, .pb-spine { z-index: 10 !important; }
#pb-spine .pb-block-item { z-index: 11 !important; } /* texte toujours devant */
:root{ --spine-nudge: 9px; }  /* ajuste à 1px, -1px, 2px si besoin */


/* ===== Barres haut et bas du spine (fermeture visuelle du dos) ===== */
/* Couvre les petits “trous” en haut et en bas de la tranche */
#pb-spine, .pb-spine {
  position: relative; /* ancrage des pseudo-éléments */
  overflow: visible !important; /* pour éviter que les traits soient coupés */
}
/* === DÉSACTIVATION VISUELLE DU BLEU === */
.pb-page.is-active,
.pb-spine.is-active,
#pb-canvas:not(.book-three) .pb-page.is-active,
#pb-canvas:not(.book-three) .pb-page.is-active[data-page="left"],
#pb-canvas:not(.book-three) .pb-page.is-active[data-page="right"],
#pb-active-frame {
  /* border-color:#3b82f6 !important; */
  /* box-shadow: inset 0 0 0 2px rgba(59,130,246,.35) !important; */
  border-color: transparent !important;
  box-shadow: none !important;
}

.pb-handle {
  /* background:#3b82f6; */
  background:#aaa !important;
}

/* === Optionnel : neutralise focus bleu === */
button:focus-visible {
  outline:none !important;
}

/* === Désactive grille bleue === */
#pb-grid-overlay::before,
#pb-grid-overlay::after {
  background:none !important;
}

/* === Désactive surbrillance bleue de page active === */
.pb-page.is-active::after {
  color:inherit !important;
}

/* === Désactive le cadre bleu superposé === */
#pb-active-frame {
  border:none !important;
  box-shadow:none !important;
  display:none !important;
}
/* === FIN DÉSACTIVATION BLEU === */
/* === Remplace le bleu par un gris de sélection discret === */
.pb-page.is-active,
.pb-spine.is-active {
  border-color: #c5c7ca !important;   /* gris clair au lieu de bleu */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important; /* léger relief */
}

.pb-page.is-active::after {
  color: #9ca3af !important; /* gris neutre pour le label */
}
/* === Sélection GRIS forcée, plus spécifique (écrase la neutralisation) === */
#pb-canvas:not(.book-three) .pb-page.is-active,
#pb-canvas:not(.book-three) .pb-page.is-active[data-page="left"],
#pb-canvas:not(.book-three) .pb-page.is-active[data-page="right"],
#pb-canvas .pb-page.is-active,
.pb-page.is-active,
.pb-spine.is-active {
  border-color: #c5c7ca !important;                 /* gris clair */
  border-style: solid !important;                    /* au cas où */
  border-width: 2px !important;                      /* visibilité */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

/* label de page actif en gris neutre */
.pb-page.is-active::after {
  color: #9ca3af !important;
}
/* === FIX GRILLE : réactive le motif et remet l'overlay au-dessus des pages === */
#pb-grid-overlay { 
  z-index: 4 !important;            /* au-dessus des .pb-page */
}

#pb-grid-overlay::before,
#pb-grid-overlay::after{
  background:
    linear-gradient(to right, rgba(59,130,246,.12) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, rgba(59,130,246,.12) 1px, transparent 1px) 0 0 / 40px 40px !important;
}
#pb-spine .pb-block-text { will-change: transform; }
#pb-spine .spine-inner { transform-origin: center center; white-space: nowrap; line-height: 1; text-align: center; }
/* Feedback léger quand on survole un bloc déjà posé (placeholders + images) */
.pb-page .pb-block-item { 
  transition: filter .12s ease, box-shadow .12s ease, background-color .12s ease;
}

/* Ne touche pas les blocs texte */
.pb-page .pb-block-item.pb-block-text:hover { filter: none; }

/* Placeholders gris (is-empty) : éclaircir au survol */
.pb-page .pb-block-item.is-empty:hover {
  filter: brightness(1.15);
}

/* Blocs image : éclaircir au survol */
.pb-page .pb-block-image:hover,
.pb-page .pb-block-image:hover img {
  filter: brightness(1.12);
}

/* Petit liseré interne discret au survol (sauf texte) */
.pb-page .pb-block-item:not(.pb-block-text):hover {
  box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset;
}

/* Pendant le drag : pas d'effet de survol */
.pb-page .pb-block-item.is-dragging { 
  filter: none !important; 
  box-shadow: none !important; 
}
/* Cacher toutes les poignées quand le bloc image est vide (placeholder) */
.pb-block-image.is-empty .pb-handle,
.pb-block-image.is-empty .pb-rot {
  display: none !important;
}

/* Si elles n'apparaissent que quand c'est sélectionné, on couvre aussi ce cas */
.pb-block-image.is-empty.pb-selected .pb-handle,
.pb-block-image.is-empty.pb-selected .pb-rot {
  display: none !important;
}

/* Effet au survol : halo doux et zoom léger */
.pb-block-item.pb-selected .resize-handle:hover {
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(255,255,255,0.8);
  opacity: 1;
}
/* Le cercle s'adapte automatiquement à la taille du carré */
.ph-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drop-circle {
  width: 40%;
  height: 40%;
  max-width: 120px;
  max-height: 120px;
  min-width: 50px;
  min-height: 50px;
  border: 2px dashed rgba(255, 255, 255, 0.0);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.drop-circle .drop-label {
  font-size: clamp(10px, 2vw, 14px);
}
.drop-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
}

/* Contenu normal : texte + icône */
.drop-circle .drop-label,
.drop-circle img {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Icône et texte proportionnels */
.drop-circle img {
  width: clamp(16px, calc(var(--c, 90px) * 0.32), 64px);
  height: auto;
}

.drop-circle .drop-label {
  font-size: clamp(10px, calc(var(--c, 90px) * 0.16), 22px);
  line-height: 1.1;
}

/* Le symbole “+” pour les petits cercles */
.drop-circle::after {
  content: "+";
  position: absolute;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  font-size: 26px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Quand le cercle devient trop petit (<70px env) → affiche le “+” et masque le reste */
.drop-circle.small .drop-label,
.drop-circle.small img {
  opacity: 0;
  transform: scale(0.5);
}

.drop-circle.small::after {
  opacity: 1;
}
.drop-circle.small .drop-label,
.drop-circle.small img { 
  display: none !important;
}

.drop-circle.small::after{
  content: '+';
  font-weight: 700;
  font-size: calc(var(--c, 90px) * 0.45);
  line-height: 1;
  color: #fff;
}
#pb-guides{
  position:absolute; inset:0; pointer-events:none; z-index:9999;
}
#pb-guides .guide{position:absolute; background:rgba(231,76,60,.9);}
#pb-guides .guide.h{height:1px; width:100%;}
#pb-guides .guide.v{width:1px; height:100%;}
#pb-guides.hidden{display:none;}
  
/* === Mini règles sous la tranche + couvertures gauche/droite === */
#pb-spine-ruler,
#pb-cover-ruler-left,
#pb-cover-ruler-right{
  grid-row: 2;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: #6b7280;
  pointer-events: none;
}

/* positions grille */
#pb-spine-ruler{        grid-column: 2; }
#pb-cover-ruler-left{   grid-column: 1; }
#pb-cover-ruler-right{  grid-column: 3; }

#pb-spine-ruler .ruler-track,
#pb-cover-ruler-left .ruler-track,
#pb-cover-ruler-right .ruler-track{
  position: relative;
  width: 100%;
  max-width: none;
  height: 10px;
}

/* ligne de base + petites graduations */
#pb-spine-ruler .ruler-track::before,
#pb-cover-ruler-left .ruler-track::before,
#pb-cover-ruler-right .ruler-track::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  border-bottom: 1px dashed #9ca3af;

  background-image: repeating-linear-gradient(
    to right,
    rgba(156,163,175,0.85) 0px,
    rgba(156,163,175,0.85) 1px,
    transparent 1px,
    transparent 4px
  );
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;

  height: 8px;
}

/* traits de fin plus marqués */
#pb-spine-ruler .ruler-end,
#pb-cover-ruler-left .ruler-end,
#pb-cover-ruler-right .ruler-end{
  position: absolute;
  bottom: -1px;
  width: 1px;
  height: 9px;
  background: #4b5563;
}
#pb-spine-ruler .ruler-end.left,
#pb-cover-ruler-left .ruler-end.left,
#pb-cover-ruler-right .ruler-end.left{ left: 0; }

#pb-spine-ruler .ruler-end.right,
#pb-cover-ruler-left .ruler-end.right,
#pb-cover-ruler-right .ruler-end.right{ right: 0; }

/* trait central */
#pb-spine-ruler .ruler-track::after,
#pb-cover-ruler-left .ruler-track::after,
#pb-cover-ruler-right .ruler-track::after{
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 1px;
  height: 10px;
  background: #4b5563;
}

/* texte sous la règle */
#pb-spine-ruler .ruler-label,
#pb-cover-ruler-left .ruler-label,
#pb-cover-ruler-right .ruler-label{
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-align: center;
}

/* petite animation à l’update */
.ruler-track.pulse{
  animation: rulerPulse 0.35s ease-out;
}
.ruler-label.pulse{
  animation: rulerLabelPulse 0.35s ease-out;
}

@keyframes rulerPulse{
  0%   { transform: scaleX(0.96); opacity: 0.4; }
  60%  { transform: scaleX(1.03); opacity: 1;   }
  100% { transform: scaleX(1.00); opacity: 1;   }
}
@keyframes rulerLabelPulse{
  0%   { transform: translateY(2px); opacity: 0; }
  100% { transform: translateY(0);   opacity: 1; }
}

/* on garde les pages + spine sur la ligne 1 */
#pb-canvas .pb-page,
#pb-canvas .pb-spine,
#pb-canvas #pb-grid-overlay{
  grid-row: 1;
}

/* === Règles VERTICALES hauteur couverture A4 (gauche / droite) === */
#pb-cover-side-left,
#pb-cover-side-right{
  position: absolute;
  width: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 10px;
  color: #6b7280;
  z-index: 5; /* au-dessus du fond, sous les blocs */
}

#pb-cover-side-left .side-track,
#pb-cover-side-right .side-track{
  position: relative;
  width: 8px;
  height: 100%;
}

/* ligne verticale en pointillé + petites graduations */
#pb-cover-side-left .side-track::before,
#pb-cover-side-right .side-track::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  border-left: 1px dashed #9ca3af;

  background-image: repeating-linear-gradient(
    to bottom,
    rgba(156,163,175,0.85) 0px,
    rgba(156,163,175,0.85) 1px,
    transparent 1px,
    transparent 4px
  );
  background-position: 50% 0;
  background-size: 6px auto;
  background-repeat: repeat-y;

  width: 6px;
}

/* traits de fin haut/bas plus marqués */
#pb-cover-side-left .side-track::after,
#pb-cover-side-right .side-track::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 10px;
  background: #4b5563;
  top: 0;
  box-shadow: 0 calc(100% - 10px) 0 0 #4b5563;
}


/* Texte vertical centré */
#pb-cover-side-left .side-label,
#pb-cover-side-right .side-label{
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: 10px;
  color: #6b7280;
  pointer-events: none;
}

/* Correction du spacing */
#pb-cover-side-left .side-label{
  right: 14px;   /* rapproché (avant -12) */
}

#pb-cover-side-right .side-label{
  left: +14px;   /* éloigné (avant -12) */
}
/* RÈGLE VERTICALE GAUCHE — rapprochée */
#pb-cover-side-left {
  position: absolute;
  left: -12px;     /* AVANT : -12px → on rapproche */
  top: var(--cover-top, 0);
  height: var(--cover-height, 100%);
  width: 18px;
}

/* RÈGLE VERTICALE DROITE — éloignée */
#pb-cover-side-right {
  position: absolute;
  right: -12px;   /* AVANT : -12px → on éloigne */
  top: var(--cover-top, 0);
  height: var(--cover-height, 100%);
  width: 22px;
}
#pb-canvas {
  /* Hauteur totale des pages + tranche + couverture */
  --cover-height: 600px; /* modifie cette valeur, ex : 550 / 600 / 650 */

  height: var(--cover-height);
}

.pb-page[data-page="left"],
.pb-page[data-page="right"],
#pb-spine {
  height: var(--cover-height) !important;
}

.sidebar {
  position: relative;
}

#collapseSidebar {
  position: absolute;
  top: 8px;
  right: 8px;
  margin-top: 0;      /* si avant il était poussé en bas */
}