/* ===== Compétences : liste à intercalaires + classeur de cartes à collectionner (js/skill-cards.js) =====
   Par défaut, la liste du site (une famille par onglet, détails au clic sur les pastilles « + »).
   Sur le côté dépasse un classeur : au clic il vient au centre, la couverture tourne sur les anneaux
   et révèle les 18 cartes rangées dans leurs pochettes. Gabarits de cartes et illustrations pixel art : assets/images/cartes/. */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Direction A : vraies cartes à collectionner rangées dans les pochettes plastique d'un classeur, deux pages de 9 */
:root { --cover: #2f6b4f; --cover-dark: #1f4a36; --pvc: rgba(236, 244, 250, .12); --ring: #c9ccd3; }

.cl-binder { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); padding: 22px;
  border: var(--line); border-radius: 18px; box-shadow: 9px 9px 0 var(--ink);
  background: var(--grain), radial-gradient(120% 90% at 30% 10%, #3d8562, var(--cover) 55%, var(--cover-dark)); }
.cl-binder::after { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(255,255,255,.22); border-radius: 12px; pointer-events: none; }
.cl-spine { position: relative; display: flex; flex-direction: column; justify-content: space-around; align-items: center; }
.cl-spine::before { content: ""; position: absolute; inset: -22px 8px; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.08) 30%, rgba(255,255,255,.08) 50%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.35)); }
.cl-ring { position: relative; width: 70px; height: 26px; border-radius: 13px; z-index: 3;
  background: linear-gradient(180deg, #f4f5f8, var(--ring) 40%, #8b8f99 60%, #e9ebef);
  box-shadow: 0 3px 4px rgba(0,0,0,.45), inset 0 1px 0 #fff; }
.cl-ring::after { content: ""; position: absolute; inset: 7px 9px; border-radius: 6px; background: var(--cover-dark); box-shadow: inset 0 2px 3px rgba(0,0,0,.6); }

.cl-sheet { position: relative; padding: 14px 14px 14px 30px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(240,246,250,.5)); box-shadow: 0 2px 0 rgba(0,0,0,.15), 0 10px 22px rgba(0,0,0,.35); }
.cl-sheet.cl-right { padding: 14px 30px 14px 14px; }
.cl-sheet .cl-holes { position: absolute; top: 0; bottom: 0; left: 9px; display: flex; flex-direction: column; justify-content: space-around; }
.cl-sheet.cl-right .cl-holes { left: auto; right: 9px; }
.cl-holes i { width: 12px; height: 12px; border-radius: 50%; background: var(--cover-dark); box-shadow: inset 0 2px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.6); }
.cl-sheet-label { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-1.5deg); padding: 4px 10px; background: var(--yellow); border: 2px solid var(--ink); font: italic 900 12px/1 var(--display); text-transform: uppercase; box-shadow: 2px 2px 0 var(--ink); z-index: 4; white-space: nowrap; }
.cl-pockets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(120,140,160,.5); }
.cl-pocket { position: relative; padding: 7% 6% 6%; border: 1px solid rgba(120,140,160,.45); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
/* Le film plastique au-dessus de la carte : voile, reflet en biais, bord d'ouverture */
.cl-pocket::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 38%, rgba(255,255,255,0) 46%, rgba(255,255,255,0) 64%, rgba(255,255,255,.22) 70%, rgba(255,255,255,0) 76%), var(--pvc);
  border-top: 2px solid rgba(255,255,255,.85); }


/* ---------- La carte : gabarit dessiné par GPT, textes posés par-dessus (positions en % de l'image 994 x 1449) ---------- */
.cl-card { --k: var(--yellow); position: relative; display: block; width: 100%; aspect-ratio: 994 / 1449; padding: 0; border: 0; cursor: pointer; background: none; text-align: left; container-type: inline-size;
  border-radius: 3.4cqw; box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.25); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.cl-pocket .cl-card:hover { transform: translateY(-6%); }
.cl-face { position: absolute; inset: 0; border-radius: 3.4cqw; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: center / 100% 100% no-repeat; }
.cl-f-yellow .cl-front { background-image: url("../assets/images/cartes/front-yellow.webp"); }
.cl-f-yellow .cl-back { background-image: url("../assets/images/cartes/back-yellow.webp"); }
.cl-f-blue .cl-front { background-image: url("../assets/images/cartes/front-blue.webp"); }
.cl-f-blue .cl-back { background-image: url("../assets/images/cartes/back-blue.webp"); }
.cl-f-pink .cl-front { background-image: url("../assets/images/cartes/front-pink.webp"); }
.cl-f-pink .cl-back { background-image: url("../assets/images/cartes/back-pink.webp"); }
.cl-z { position: absolute; display: flex; align-items: center; min-width: 0; color: #1f1b29; }
/* Recto */
.cl-z-name { left: 6.4%; right: 15%; top: 3.6%; height: 6.8%; padding-left: 1.5cqw; font: italic 900 6.6cqw/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; }
.cl-z-name.cl-long { font-size: 5.2cqw; }
.cl-z-rar { left: 86.4%; width: 8.6%; top: 4%; height: 5.9%; justify-content: center; }
.cl-z-rar svg { width: 62%; height: auto; filter: drop-shadow(0 .3cqw .3cqw rgba(0,0,0,.35)); }
.cl-z-art { left: 5%; right: 5.2%; top: 11.2%; height: 46.4%; justify-content: center; }
.cl-z-art.cl-pic { left: 5.6%; right: 5.8%; top: 11.6%; height: 45.6%; border-radius: 1.8cqw; background: center / cover no-repeat; box-shadow: inset 0 0 0 .5cqw rgba(23,20,31,.55), inset 0 1.5cqw 3cqw rgba(0,0,0,.25); }
.cl-z-art.cl-pic svg { display: none; }
.cl-z-art svg { width: 40%; height: auto; overflow: visible; filter: drop-shadow(1.6cqw 1.6cqw 0 rgba(23,20,31,.8)) drop-shadow(0 0 5cqw rgba(255,255,255,.9)); }
.cl-z-type { left: 5.4%; right: 5.4%; top: 58.8%; height: 5.4%; justify-content: space-between; padding: 0 3cqw; font: 800 4.2cqw/1 var(--body); text-transform: uppercase; letter-spacing: .08em; }
.cl-z-type b { font: italic 900 4.6cqw/1 var(--display); letter-spacing: 0; }
.cl-z-text { left: 5.6%; right: 5.6%; top: 65.6%; height: 24.6%; flex-direction: column; align-items: stretch; justify-content: center; gap: 2.4cqw; padding: 3cqw 5cqw; }
.cl-z-text b { font: italic 900 5cqw/1 var(--display); text-transform: uppercase; color: var(--kd); }
.cl-z-text p { margin: 0; font: 600 5.4cqw/1.32 var(--body); }
.cl-z-text small { display: flex; justify-content: space-between; padding-top: 2cqw; border-top: .35cqw solid rgba(31,27,41,.2); font: 700 3.5cqw/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #5a5466; }
.cl-z-meter { left: 5.6%; right: 5.6%; top: 92.3%; height: 3.6%; padding: .9cqw 1.4cqw; }
.cl-z-meter i, .cl-zb-meter i { display: block; height: 100%; width: var(--lvl); border-radius: 9cqw;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 55%), linear-gradient(90deg, var(--kd), var(--k)); box-shadow: 0 0 2cqw color-mix(in srgb, var(--k) 80%, transparent); }
/* Verso */
.cl-zb-logo { left: 33.4%; width: 33.2%; top: 9.6%; height: 22.8%; justify-content: center; font: italic 900 15cqw/1 var(--display); letter-spacing: -.04em; color: #1f1b29; text-shadow: -1.2cqw 1cqw 0 var(--k); }
.cl-zb-title { left: 9.5%; right: 9.5%; top: 34.8%; height: 6.4%; justify-content: center; font: italic 900 6cqw/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; }
.cl-zb-title.cl-long { font-size: 5cqw; }
.cl-zb-desc { left: 7.6%; right: 7.6%; top: 44.4%; height: 16.6%; flex-direction: column; align-items: stretch; justify-content: center; gap: 1.6cqw; padding: 2cqw 5cqw; text-align: center; color: #15213f; }
.cl-zb-desc b { font: 800 3.6cqw/1 var(--body); text-transform: uppercase; letter-spacing: .12em; color: #2c3d6b; }
.cl-zb-desc p { margin: 0; font: 600 5.2cqw/1.3 var(--body); }
.cl-zb-li { left: 17.4%; right: 8.8%; height: 4.1%; padding-left: 3cqw; font: 700 4.6cqw/1 var(--body); color: #15213f; white-space: nowrap; }
.cl-zb-dot { left: 9.6%; width: 5.8%; height: 4.1%; justify-content: center; }
.cl-zb-dot svg { width: 70%; }
.cl-zb-meter { left: 7.4%; right: 7.4%; top: 84.4%; height: 4.2%; padding: 1cqw 1.6cqw; }
.cl-zb-a, .cl-zb-b { top: 90.6%; height: 4.9%; justify-content: center; font: 800 3.8cqw/1 var(--body); text-transform: uppercase; letter-spacing: .1em; }
.cl-zb-a { left: 7.2%; width: 34%; } .cl-zb-b { left: 58.6%; width: 34.4%; }
/* Rareté : reflet holo par-dessus l'image, plus fort quand la carte est rare */
.cl-holo, .cl-sweep { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.cl-holo { opacity: calc(.12 * var(--foil, 0)); mix-blend-mode: color-dodge;
  background: repeating-linear-gradient(110deg, #ff7ab8 0%, #ffd93d 6%, #74e3a6 12%, #5cb8ff 18%, #c9a2ff 24%, #ff7ab8 30%); background-size: 260% 260%; background-position: var(--mx, 30%) var(--my, 30%); transition: opacity .3s; }
.cl-r-r { --foil: .5; } .cl-r-e { --foil: .85; } .cl-r-l { --foil: 1.2; }
.cl-r-l .cl-front .cl-sweep { background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%) no-repeat; background-size: 250% 100%; animation: cl-sweep 5s ease-in-out infinite; animation-delay: calc(var(--i) * 280ms); mix-blend-mode: overlay; }
@keyframes cl-sweep { 0%, 65% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.cl-back { transform: rotateY(180deg); }
.cl-pocket .cl-back { display: none; }

/* ---------- Carte sortie de sa pochette ---------- */
.cl-hand { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(23,20,31,.55); backdrop-filter: blur(3px); perspective: 1100px; }
.cl-hand-inner { display: grid; justify-items: center; gap: 18px; }
.cl-hand .cl-card { width: min(340px, 78vw, calc((100dvh - 150px) * .686)); cursor: grab; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg)));
  transition: transform .6s cubic-bezier(.3,.8,.2,1); animation: cl-lift .55s cubic-bezier(.2,.9,.3,1.15); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.cl-hand .cl-card.cl-live { transition: transform .08s linear; }
.cl-hand .cl-card.cl-flipped { --flip: 180deg; }
@keyframes cl-lift { from { transform: translateY(60px) scale(.6) rotate(-4deg); opacity: 0; } }
.cl-hand-bar { display: flex; gap: 10px; }
.cl-hand-bar button { min-height: 44px; padding: 10px 18px; border: var(--line); border-radius: 999px; background: #fff; font: 700 15px/1 var(--body); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.cl-hand-bar button:first-child { background: var(--yellow); }

.cl-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; font: 600 14px/1.3 var(--body); }
.cl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.cl-legend svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .cl-binder { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 30px; }
  .cl-spine { flex-direction: row; justify-content: space-evenly; height: 0; margin: -6px 0; }
  .cl-spine::before { display: none; }
  .cl-ring { width: 26px; height: 54px; }
  .cl-sheet.cl-right { padding: 14px 14px 14px 30px; }
  .cl-sheet.cl-right .cl-holes { left: 9px; right: auto; }
}
@media (max-width: 520px) {
  .cl-pocket .cl-z-type, .cl-pocket .cl-z-text p, .cl-pocket .cl-z-text small { display: none; }
  .cl-pocket .cl-z-text { align-items: center; } .cl-pocket .cl-z-text b { font-size: 9cqw; }
  .cl-pocket .cl-z-name { font-size: 9cqw; } .cl-pocket .cl-z-name.cl-long { font-size: 6.6cqw; }
}

/* ---------- A3 : liste classique par défaut, classeur qui dépasse sur le côté ---------- */
.cl-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 0 24px; }
.cl-listing { transition: opacity .25s ease, transform .25s ease; }
.cl-stage.cl-open .cl-listing, .cl-stage.cl-open .cl-rail { display: none; }
.cl-listing.cl-fade { opacity: 0; transform: translateX(-12px); }
/* La couverture du classeur (sert pour le classeur qui dépasse et pour le classeur fermé) */
.cl-cover { position: absolute; inset: 0; container-type: inline-size; border: var(--line); border-radius: 4cqw 3cqw 3cqw 4cqw; overflow: hidden;
  background: var(--grain), radial-gradient(130% 90% at 70% 15%, #3d8562, var(--cover) 55%, var(--cover-dark)); box-shadow: inset 0 0 0 1.4cqw rgba(0,0,0,.08); }
.cl-cover::before { content: ""; position: absolute; inset: 3cqw 3cqw 3cqw 15cqw; border: .7cqw dashed rgba(255,255,255,.28); border-radius: 2.5cqw; }
.cl-cover-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 12cqw; display: grid; place-items: center;
  background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.14) 55%, rgba(255,255,255,.12) 80%, rgba(0,0,0,.3)); }
.cl-cover-spine span { writing-mode: vertical-rl; transform: rotate(180deg); font: italic 900 5.4cqw/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.cl-cover-band { position: absolute; right: 11cqw; top: -1%; bottom: -1%; width: 5cqw; background: linear-gradient(90deg, #111, #2a2a2e 40%, #111); box-shadow: -.6cqw 0 1cqw rgba(0,0,0,.35); }
.cl-cover-plate { position: absolute; left: 22cqw; right: 22cqw; top: 13%; padding: 5cqw 4cqw; background: var(--paper); border: .7cqw solid var(--ink); box-shadow: 2cqw 2cqw 0 var(--ink); transform: rotate(-2deg); text-align: center; }
.cl-cover-plate b { display: block; font: italic 900 8cqw/.95 var(--display); text-transform: uppercase; letter-spacing: -.03em; text-shadow: -1.2cqw 1cqw 0 var(--yellow); }
.cl-cover-plate small { display: block; margin-top: 3cqw; font: 800 3.6cqw/1.2 var(--body); text-transform: uppercase; letter-spacing: .12em; }
.cl-cover-window { position: absolute; left: 24cqw; right: 24cqw; top: 46%; aspect-ratio: 892 / 672; border: .7cqw solid var(--ink); border-radius: 2cqw; background: center / cover no-repeat; box-shadow: inset 0 0 0 1.4cqw rgba(255,255,255,.35); }
.cl-cover-window::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,.5) 40%, transparent 50%); }
.cl-cover-sticker { position: absolute; left: 17cqw; bottom: 7%; padding: 2.4cqw 4cqw; background: var(--yellow); border: .6cqw solid var(--ink); border-radius: 999px; font: 800 3.8cqw/1 var(--body); transform: rotate(-6deg); }

/* Le classeur qui dépasse du bord */
.cl-rail { position: relative; overflow: hidden; margin-right: calc(-1 * max(16px, (100vw - 1148px) / 2)); min-height: 420px; }
.cl-peek { position: absolute; top: 24px; right: -150px; width: 300px; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer;
  transform: rotate(-6deg); transform-origin: 20% 50%; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.cl-peek:hover, .cl-peek:focus-visible { transform: translateX(-26px) rotate(-3deg); }
.cl-peek .cl-peek-card { position: absolute; top: -9%; left: 18%; width: 34%; aspect-ratio: 994 / 1449; transform: rotate(9deg); transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.cl-peek .cl-peek-card .cl-card { cursor: inherit; }
.cl-peek:hover .cl-peek-card, .cl-peek:focus-visible .cl-peek-card { transform: translateY(-14%) rotate(14deg); }
.cl-peek .cl-cover { box-shadow: -6px 10px 0 rgba(23,20,31,.85); }
.cl-peek-tag { position: absolute; z-index: 2; top: 5px; right: 40px; padding: 5px 10px; background: #fff; border: 2px solid var(--ink); font: 800 12px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--ink); pointer-events: none; animation: cl-nudge 3.2s ease-in-out infinite; }
@keyframes cl-nudge { 0%, 70%, 100% { transform: rotate(-4deg); } 78% { transform: rotate(-9deg) translateX(-3px); } 86% { transform: rotate(1deg); } }

/* Le classeur ouvert : la couverture pivote sur les anneaux */
.cl-book-zone { display: none; grid-column: 1 / -1; }
.cl-stage.cl-open .cl-book-zone { display: block; }
.cl-book-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cl-book-bar button { min-height: 44px; padding: 10px 18px; border: var(--line); border-radius: 999px; background: #fff; font: 700 15px/1 var(--body); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.cl-mover { position: relative; transform-origin: 0 0; }
.cl-book { position: relative; perspective: 2600px; transition: transform 1.05s cubic-bezier(.45,.05,.25,1); }
.cl-book.cl-closed { transform: translateX(-25%); }
.cl-book .cl-binder { transition: clip-path 0s; }
.cl-book.cl-closed .cl-binder, .cl-book.cl-turning .cl-binder { clip-path: inset(-20px -20px -20px 50%); }
.cl-flap { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-style: preserve-3d; transform-origin: 0 50%; transition: transform 1.05s cubic-bezier(.45,.05,.25,1); z-index: 5; }
.cl-book.cl-closed .cl-flap { transform: rotateY(0deg); }
.cl-book:not(.cl-closed) .cl-flap { transform: rotateY(-180deg); }
.cl-book.cl-done .cl-flap { visibility: hidden; }
.cl-flap-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cl-flap-face .cl-cover { border-radius: 4px 18px 18px 4px; }
.cl-flap-back { transform: rotateY(180deg); display: grid; grid-template-columns: minmax(0, 1fr) 27px; padding: 22px 0 22px 22px; border: var(--line); border-right: 0; border-radius: 18px 0 0 18px;
  background: var(--grain), radial-gradient(240% 90% at 60% 10%, #3d8562, var(--cover) 55%, var(--cover-dark)); }
.cl-flap-back .cl-sheet { pointer-events: none; }
.cl-binder .cl-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
.cl-book:not(.cl-done) .cl-sheet .cl-card { opacity: .98; }

/* ---------- Matière du classeur : simili cuir cousu, coins métal, anneaux chromés ---------- */
:root { --leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)' opacity='.38'/%3E%3C/svg%3E");
  --stitch: rgba(246,234,204,.7); --chrome: linear-gradient(180deg, #ffffff, #dfe2e7 22%, #9196a0 52%, #d4d7dc 74%, #737780); }
.cl-binder, .cl-flap-back { background: var(--leather), var(--grain), radial-gradient(120% 90% at 30% 10%, #3f8a65, var(--cover) 55%, var(--cover-dark)); }
.cl-binder { box-shadow: 9px 9px 0 var(--ink), inset 0 0 0 3px rgba(255,255,255,.06), inset 0 0 40px rgba(0,0,0,.4); }
.cl-binder::after { inset: 9px; border: 2px dashed var(--stitch); border-radius: 13px; box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.cl-cover { background: var(--leather), var(--grain), radial-gradient(130% 90% at 70% 15%, #3f8a65, var(--cover) 55%, var(--cover-dark));
  box-shadow: inset 0 0 0 1.4cqw rgba(0,0,0,.06), inset 0 0 8cqw rgba(0,0,0,.45); }
.cl-cover::before { border: .55cqw dashed var(--stitch); filter: drop-shadow(0 .3cqw 0 rgba(0,0,0,.35)); }
.cl-cover-band { background: repeating-linear-gradient(0deg, #141416 0 .6cqw, #26262b .6cqw 1.2cqw), linear-gradient(90deg, #0c0c0d, #2f2f35 45%, #0c0c0d); background-blend-mode: overlay; }
.cl-cover-spine { background: repeating-linear-gradient(0deg, transparent 0 9cqw, rgba(255,255,255,.07) 9cqw 9.5cqw), linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.12) 55%, rgba(255,255,255,.14) 80%, rgba(0,0,0,.32)); }
.cl-cover-plate { background: #fffaf0; box-shadow: 2cqw 2cqw 0 var(--ink), inset 0 0 0 1cqw #fffaf0, inset 0 0 0 1.4cqw #c9a447; }
.cl-cover-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 42%, transparent 52%); pointer-events: none; }
.cl-corner { position: absolute; z-index: 4; width: 30px; height: 30px; pointer-events: none;
  background: radial-gradient(circle at 34% 34%, #fff 0 1.5px, #8b9099 2.5px 4px, transparent 4.5px), var(--chrome);
  clip-path: polygon(0 0, 100% 0, 0 100%); filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.cl-cover .cl-corner { width: 13cqw; height: 13cqw; }
.cl-corner.cl-tl { top: -1px; left: -1px; }
.cl-corner.cl-tr { top: -1px; right: -1px; transform: scaleX(-1); }
.cl-corner.cl-bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.cl-corner.cl-br { bottom: -1px; right: -1px; transform: scale(-1, -1); }
.cl-cover .cl-corner.cl-tl, .cl-cover .cl-corner.cl-bl { display: none; }
/* Mécanisme : plaque chromée et anneaux en D */
.cl-spine::after { content: ""; position: absolute; left: 50%; top: 4%; bottom: 4%; width: 26px; transform: translateX(-50%); border-radius: 7px; z-index: 2;
  background: radial-gradient(circle at 50% 14px, #fff 0 2px, #6e737c 3px 5px, transparent 5.5px), radial-gradient(circle at 50% calc(100% - 14px), #fff 0 2px, #6e737c 3px 5px, transparent 5.5px), linear-gradient(90deg, #5f636b, #c9ccd3 20%, #ffffff 42%, #a9adb5 62%, #6a6e76);
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.25); }
.cl-ring { width: 78px; height: 24px; background: var(--chrome); box-shadow: 0 4px 5px rgba(0,0,0,.5), inset 0 1px 0 #fff, inset 0 -2px 2px rgba(0,0,0,.25); }
.cl-ring::before { content: ""; position: absolute; left: 10px; right: 10px; top: 3px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.9); z-index: 1; }
.cl-ring::after { background: linear-gradient(180deg, #16311f, var(--cover-dark)); }
/* Feuilles et pochettes plastique */
.cl-sheet { background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(236,243,248,.55)); }
.cl-sheet.cl-left::after, .cl-sheet.cl-right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 46px; pointer-events: none; z-index: 3; }
.cl-sheet.cl-left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.16)); }
.cl-sheet.cl-right::after { left: 0; background: linear-gradient(270deg, transparent, rgba(0,0,0,.16)); }
.cl-holes i { box-shadow: 0 0 0 4px rgba(255,255,255,.7), 0 0 0 5px rgba(120,140,160,.5), inset 0 2px 2px rgba(0,0,0,.6); }
.cl-pocket { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(120,140,160,.45), inset 0 0 0 3px rgba(255,255,255,.3); }
.cl-pocket::before { content: ""; position: absolute; left: 3px; right: 3px; top: 6%; height: 4px; z-index: 3; pointer-events: none; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0)); box-shadow: 0 1px 0 rgba(120,140,160,.35); }
.cl-pocket::after { background: linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 38%, rgba(255,255,255,0) 46%, rgba(255,255,255,0) 64%, rgba(255,255,255,.2) 70%, rgba(255,255,255,0) 76%) var(--px, 30%) 0 / 300% 100% no-repeat, var(--pvc); transition: background-position .25s ease-out; border-top: 0; }
.cl-pocket .cl-card { transform: rotate(var(--tilt, 0deg)); box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 5px 9px rgba(0,0,0,.28); }
.cl-pocket .cl-card:hover { transform: translateY(-6%) rotate(var(--tilt, 0deg)); }
/* ---------- B retenue : intercalaires du site ---------- */
.cl-lt-tabs .cl-ttabs { display: flex; align-items: flex-end; gap: 6px; padding-left: 16px; }
.cl-lt-tabs .cl-tab { position: relative; flex-shrink: 0; padding: 8px 15px 9px; border: var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--c); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transform: translateY(4px); transition: transform .15s ease, padding .15s ease; min-height: 0; box-shadow: none; }
.cl-lt-tabs .cl-tab:hover { transform: translateY(0); }
.cl-lt-tabs .cl-tab small { display: block; padding: 0; border: 0; background: none; font: 700 10px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.cl-lt-tabs .cl-tab b { display: block; font: italic 900 17px/1.15 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.cl-lt-tabs .cl-tab[aria-selected="true"] { z-index: 2; padding-top: 13px; padding-bottom: 14px; margin-bottom: -2.5px; transform: none; }
.cl-lt-tabs .cl-tpanel { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 24px; border: var(--line); border-top: var(--line); background: var(--c); box-shadow: 7px 7px 0 var(--ink); }
.cl-lt-tabs .cl-tpanel[hidden] { display: none; }
.cl-tsub { display: block; padding: 0; border: var(--line); background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }
.cl-tsub-head { padding: 9px 14px; border-bottom: var(--line); background: #fff; font: italic 900 14px/1.2 var(--display); text-transform: uppercase; text-shadow: -2px 2px 0 var(--c); }
.cl-tsub .cl-row { padding: 14px; gap: 8px; }
.cl-lt-tabs .cl-kw { padding: 7px 13px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: 700 14px/1.1 var(--body); }
.cl-kwg { display: contents; }
.cl-kw.cl-more { gap: 7px; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.cl-kw.cl-more i { display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 50%; background: var(--c); font: 900 13px/1 var(--body); font-style: normal; transition: transform .25s; }
.cl-kw.cl-more:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--ink); }
.cl-kw.cl-more[aria-expanded="true"] { background: var(--c); }
.cl-kw.cl-more[aria-expanded="true"] i { transform: rotate(45deg); background: #fff; }
.cl-det { display: contents; }
.cl-det[hidden] { display: none; }
.cl-det .cl-tool { border: 2px dashed var(--ink); border-radius: 999px; background: color-mix(in srgb, var(--c) 30%, #fff); padding: 6px 11px; font: 700 12.5px/1.1 var(--body); color: var(--ink); animation: det-in .3s cubic-bezier(.3,1.5,.5,1) backwards; }
.cl-det .cl-tool:nth-child(2) { animation-delay: .05s; } .cl-det .cl-tool:nth-child(3) { animation-delay: .1s; }
@keyframes det-in { from { opacity: 0; transform: translateX(-10px) scale(.7); } }

/* Petits points du site dans les boîtes de sous-thèmes */
.cl-tsub .cl-row { background: radial-gradient(rgba(23,20,31,.16) 1px, transparent 1.4px) 0 0 / 14px 14px, var(--paper); animation: cl-subdots 4s linear infinite; }
@keyframes cl-subdots { to { background-position: 14px 14px, 0 0; } }

.cl-list-note { margin: 18px 0 0; font: 600 14px/1.4 var(--body); color: var(--ink-soft); }
.cl-row { display: flex; flex-wrap: wrap; gap: 7px; }
.cl-tool { display: inline-flex; align-items: center; padding: 4px 8px; border: 1.5px solid rgba(23,20,31,.35); border-radius: 6px; background: rgba(255,255,255,.75); font: 600 12px/1.1 var(--body); color: #4a4456; }
.cl-extras { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 26px; padding: 12px 16px; border: 2px dashed rgba(23,20,31,.35); background: rgba(255,255,255,.5); }
.cl-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.cl-extra b { margin-right: 4px; font: italic 900 13px/1 var(--display); text-transform: uppercase; }
.cl-stage { grid-template-columns: minmax(0, 1fr) 130px; }

@media (max-width: 900px) {
  .cl-book.cl-closed { transform: none; }
  .cl-book.cl-closed .cl-binder, .cl-book.cl-turning .cl-binder { clip-path: none; }
  .cl-flap { left: 0; width: 100%; }
  .cl-book:not(.cl-closed) .cl-flap { transform: rotateY(-100deg); opacity: 0; transition: transform 1s cubic-bezier(.45,.05,.25,1), opacity .4s .6s; }
  .cl-flap-back { display: none; }
  .cl-flap .cl-cover-plate { top: 7%; } .cl-flap .cl-cover-window { top: 24%; }
  /* le classeur est glissé derrière le panneau, en haut à droite */
  .cl-stage { grid-template-columns: minmax(0, 1fr); margin-top: 112px; }
  .cl-rail { position: absolute; z-index: 0; right: calc(-1 * clamp(16px, 3vw, 40px)); bottom: 100%; width: 300px; height: 124px; min-height: 0; margin: 0 !important; overflow: hidden; }
  .cl-listing { position: relative; z-index: 1; }
  .cl-peek { width: 150px; right: -30px; left: auto; top: 18px; transform: rotate(-9deg); }
  .cl-peek:hover, .cl-peek:focus-visible { transform: translateY(-14px) rotate(-6deg); }
  .cl-peek-tag { top: 52px; right: 150px; font-size: 11px; }
}
@media (max-width: 600px) {
  .cl-lt-tabs .cl-ttabs { padding-left: 0; gap: 4px; }
  .cl-lt-tabs .cl-tab { flex: 1 1 0; min-width: 0; padding: 10px 6px 11px; }
  .cl-lt-tabs .cl-tab b { font-size: 13px; }
  .cl-lt-tabs .cl-tab small { display: none; }
  .cl-lt-tabs .cl-tab[aria-selected="true"] { padding-top: 14px; }
  .cl-lt-tabs .cl-tpanel { padding: 14px; grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Intégration au site ---------- */
.cl-hint { font: 600 14px/1.4 var(--body); color: var(--ink-soft); }
.cl-hand { z-index: 8000; }
.cl-hand[hidden], .cl-det[hidden] { display: none; }
.cl-stage .section-title { margin: 0; }
.cl-shut { min-height: 44px; }
.cl-peek:focus-visible, .cl-tab:focus-visible, .cl-kw:focus-visible, .cl-card:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .cl-peek-tag, .cl-tsub .cl-row, .cl-sweep, .cl-det .cl-tool { animation: none !important; }
}
@media print {
  .cl-rail, .cl-book-zone, .cl-ttabs, .cl-hand { display: none !important; }
  .cl-tpanel[hidden] { display: grid !important; }
  .cl-det[hidden] { display: contents !important; }
  .cl-more i { display: none !important; }
  .cl-tpanel { box-shadow: none !important; margin-bottom: 12px; }
}
.cl-kw { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }

/* Reflet : calme partout, vivant seulement sur la pochette survolée */
.cl-pocket::after { opacity: .55; transition: opacity .25s ease, background-position .25s ease-out; }
.cl-pocket.cl-lit::after { opacity: 1; background: linear-gradient(118deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.75) 38%, rgba(255,255,255,0) 48%, rgba(255,255,255,0) 62%, rgba(255,255,255,.3) 70%, rgba(255,255,255,0) 78%) var(--px, 30%) 0 / 300% 100% no-repeat, var(--pvc); }
/* Onglets : le trait noir du panneau passe devant les onglets non choisis */
.cl-lt-tabs .cl-tpanel { position: relative; z-index: 1; }
.cl-lt-tabs .cl-tab[aria-selected="true"] { z-index: 2; }
/* Couverture sans image : l'étiquette descend au centre */
.cl-cover-plate { top: 30%; }
@media (max-width: 900px) { .cl-flap .cl-cover-plate { top: 16%; } }

/* Les points couvrent toute la boîte, même quand elle est plus haute que ses pastilles */
.cl-tsub { display: flex; flex-direction: column; }
.cl-tsub .cl-row { flex: 1; align-content: flex-start; }