/* La main et l'enluminure de cyberboulet.fr (validées le 31 oct. 2026), partagées par l'accueil et le media kit. Classes cb-p-, aucune ne touche une classe cb-
   sans la nommer explicitement. Pas de pointillés, pas d'emoji, pas d'or en dégradé (charte v3.1). */

[hidden] { display: none !important; }

/* ---------- la main : annotations en Gaegu Maison et flèches tracées ---------- */
.cb-p-note {
  position: absolute; z-index: 3; pointer-events: none;
  font: 700 22px/1 var(--main); color: var(--lie); white-space: nowrap;
}
.cb-p-fleche { display: block; position: absolute; overflow: visible; }
.cb-p-fleche path { fill: none; stroke: var(--lie); stroke-linecap: round; stroke-linejoin: round; }
.cb-p-fleche .cb-p-tige { stroke-width: 2.1; }
.cb-p-fleche .cb-p-repasse { stroke-width: .9; opacity: .55; }
.cb-p-fleche .cb-p-tete { stroke-width: 2.1; }
.cb-p-aparte { font: 700 22px/1 var(--main); color: var(--lie); margin-left: 10px; display: inline-block; transform: rotate(-3deg) translateY(1px); }

/* ---------- ses séparateurs de texte (Skyblog assumé) ----------
   Comfortaa n'a pas ces signes : chaque appareil les dessine avec sa propre police de symboles */
.cb-p-sep {
  margin: 4px 0 10px; text-align: center; white-space: nowrap; overflow: hidden;
  font: 400 18px/1.2 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Apple Symbols', 'Nirmala UI', system-ui, sans-serif;
  color: var(--sauge); letter-spacing: .08em;
}
.cb-p-sep-court { text-align: left; font-size: 17px; margin: -2px 0 8px; }
/* en pied de bloc : centré, il ferme le bloc */
.cb-p-sep-pied { text-align: center; font-size: 17px; margin: 12px 0 -4px; }

/* ---------- l'enluminure en touche : filet et lettrine repris des fichiers de la charte ---------- */
.cb-p-filet {
  display: block; width: 240px; max-width: 100%; aspect-ratio: 15 / 1;
  background: url(../img/filet-enlumine.png) center / 100% 100% no-repeat; margin: -4px 0 18px;
}
.cb-p-lettrine {
  float: left; width: 88px; height: 88px; margin: 0 12px 2px -6px;
  background: url(../img/cadre-lettrine.png) center / contain no-repeat;
  display: grid; place-items: center; padding: 0 0 9px 3px;
  font: 800 54px/1 var(--titre); color: var(--lie);
}
.cb-p-intro { display: flow-root; min-height: 88px; }

/* ---------- scotch vichy ---------- */
.cb-p-scotch, .cb-p-pola::before {
  content: ""; position: absolute; z-index: 2; width: 46px; height: 16px; left: 50%; top: -8px;
  transform: translateX(-50%) rotate(-4deg);
  background-color: rgba(226, 214, 200, .82); background-image: var(--vichy); background-size: 8px 8px;
  box-shadow: 0 1px 2px rgba(43, 26, 34, .12);
  -webkit-mask: linear-gradient(90deg, #0000 0 2px, #000 2px calc(100% - 2px), #0000 0); mask: linear-gradient(90deg, #0000 0 2px, #000 2px calc(100% - 2px), #0000 0);
}

/* ---------- polaroïds ---------- */
.cb-p-pola {
  position: relative; margin: 0; padding: 6px 6px 18px; background: #fffdf8; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(43, 26, 34, .1), 0 8px 16px -8px rgba(43, 26, 34, .35);
  transform: rotate(var(--r, 0deg)); transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.cb-p-pola img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 1px; background: var(--beige2); display: block; }
.cb-p-pola img.cb-pixel { object-fit: contain; image-rendering: pixelated; }
.cb-p-pola:hover { transform: rotate(0deg) translateY(-3px) scale(1.04); }

/* ---------- les tickets (jeux) : encoches rondes aux deux bouts ---------- */
/* ul. : passe devant .cb-jeux li de accueil.css, chargée après */
ul.cb-p-tickets { gap: 9px 7px; }
ul.cb-p-tickets li {
  border: 0; border-radius: 3px; padding: 8px 15px; background: var(--papier);
  -webkit-mask: radial-gradient(circle 4.5px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4.5px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 4.5px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4.5px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
  transform: rotate(var(--r, 0deg)); box-shadow: inset 0 0 0 1px var(--filet);
}
ul.cb-p-tickets li:nth-child(3n + 1) { --r: -1.4deg; }
ul.cb-p-tickets li:nth-child(3n + 2) { --r: .8deg; background: #efe4d4; }
ul.cb-p-tickets li:nth-child(4n) { --r: 1.6deg; background: #e9e6d8; }
ul.cb-p-tickets li:nth-child(5n) { --r: -.6deg; }

/* ---------- objets partagés par l'accueil et le media kit ---------- */
/* la carte : une feuille dépliée, scotchée, qui déborde du panneau en haut et en bas */
.cb-p-pc-carte {
  position: relative; display: block; margin: -26px 0; transform: rotate(2.2deg);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .15), 0 22px 30px -16px rgba(20, 8, 14, .7);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.cb-p-pc-carte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.cb-p-pc-carte::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 32.4%, rgba(43, 26, 34, .22) 33.3%, rgba(255, 250, 240, .2) 33.9%, transparent 35.4%,
                           transparent 65.8%, rgba(43, 26, 34, .22) 66.6%, rgba(255, 250, 240, .2) 67.2%, transparent 68.7%),
    linear-gradient(180deg, transparent 48.4%, rgba(43, 26, 34, .2) 50%, rgba(255, 250, 240, .16) 50.8%, transparent 52.6%); }
.cb-p-pc-carte::before {
  content: ""; position: absolute; z-index: 2; width: 74px; height: 20px; left: 18%; top: -10px; transform: rotate(-5deg);
  background-color: rgba(226, 214, 200, .88); background-image: var(--vichy); background-size: 9px 9px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
/* la lettre : rabat, cachet de cire (picto du pack médiéval tiré au hasard par main.js), timbre */
.cb-p-lettre-rabat { position: absolute; left: 0; right: 0; top: 0; height: 76px; background: #ece2d4; clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 6px 6px 0 0; }
.cb-p-lettre-rabat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(43, 26, 34, .08)); }
.cb-p-lettre-cachet {
  position: absolute; left: 50%; top: 52px; width: 46px; height: 46px; transform: translateX(-50%) rotate(-8deg);
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #8a3a58, var(--lie) 55%, var(--lie-fonce));
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  box-shadow: 0 0 0 4px rgba(98, 36, 60, .85), 0 3px 6px rgba(43, 26, 34, .35), inset 0 0 0 5px rgba(43, 26, 34, .18);
}
.cb-p-lettre-cachet i { width: 26px; height: 26px; background: rgba(243, 235, 225, .9);
  -webkit-mask: var(--picto) center / contain no-repeat; mask: var(--picto) center / contain no-repeat; }
.cb-p-lettre-timbre {
  position: absolute; right: 18px; top: 16px; width: 58px; height: 68px; display: grid; place-items: center; transform: rotate(5deg);
  background-color: #e2d6c8; background-image: var(--vichy); background-size: 10px 10px;
  box-shadow: inset 0 0 0 3px var(--papier), inset 0 0 0 4.5px var(--lie-clair), 0 1px 2px rgba(43, 26, 34, .2);
}
.cb-p-lettre-timbre img { width: 48px; height: 48px; image-rendering: pixelated; }

@media (prefers-reduced-motion: reduce) {
  .cb-p-fleche path { transition: none !important; }
}