/* Piste A « carnet » : la carte reste sur le bureau, les objets se posent autour.
   Chargée APRÈS style.css (la repasse) et sceau.css (le sceau de cire porté du site). */

[hidden] { display: none !important; }

/* Cire de l'Entrecarte : la lie foncée validée pour les sceaux (enluminures, 26 oct.) */
.ch-sceau { --cire-clair: #74304a; --cire-c: #521c33; --cire-sombre: #210815; }

/* ================================================================ */
/* L'en-tête : un marque-page et une étiquette collée                */
/* ================================================================ */
.pa-entete {
  position: fixed;
  left: 18px;
  top: 16px;
  z-index: 99;
  width: 18%;
}
/* Le marque-page : un ruban de soie lie-de-vin qui passe sous l'étiquette */
.pa-marque {
  position: absolute;
  left: 26px;
  top: -16px;
  width: 30px;
  height: calc(100% + 74px);
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.45));
  pointer-events: none;
}
.pa-marque::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 13px), 0 100%);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #3d1427 0%, #6e2a45 38%, #7b3350 50%, #62243c 64%, #3a1224 100%);
}
/* Le pli du ruban à la sortie de l'étiquette */
.pa-marque::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 58px;
  height: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.28), transparent);
}

.pa-etiquette {
  position: relative;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(ellipse at 85% 95%, rgba(91,70,54,.16), transparent 60%),
    var(--papier);
  border: 1px solid var(--papier-ombre);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 6px var(--papier),
    inset 0 0 0 7px rgba(107,90,76,.55),
    0 10px 22px rgba(0,0,0,.5);
  padding: 16px 20px 14px;
  transform: rotate(-0.8deg);
  color: var(--encre);
}
.pa-retour {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #6b5a4c;
  text-decoration: none;
  margin-bottom: 6px;
  transition: color .25s;
}
.pa-retour:hover { color: var(--cire); }
.pa-etiquette h1 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: var(--cire);
}
.pa-sous {
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #4a3a3c;
}

/* La rangée des quinze cachets */
.pa-cachets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 4px;
  max-width: calc(8 * 32px + 7 * 4px);
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(107,90,76,.35);
}
.pa-emplacement {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: rgba(91,70,54,.08);
  box-shadow: inset 0 1px 3px rgba(43,26,34,.28), 0 1px 0 rgba(255,255,255,.5);
  border: 0;
  padding: 0;
}
.pa-emplacement[data-visite="1"] { background: none; box-shadow: none; cursor: pointer; }
.pa-cachets .ch-sceau {
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  bottom: auto; right: auto;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
.pa-cachets .ch-sceau-coulure { width: 6px; height: 7px; bottom: -3px; }
.pa-cachets .ch-empreinte { inset: 17%; }
/* À cette taille, le relief du site s'efface : creux et lumière un peu plus appuyés */
.pa-cachets .ch-empreinte--creux { opacity: 1; transform: translate(-.6px, -.6px); }
.pa-cachets .ch-empreinte--lumiere { opacity: .9; transform: translate(.8px, 1px); }
.pa-cachets .ch-sceau-galette { box-shadow: inset 0 -2px 3px rgba(0,0,0,.45), inset 0 2px 2px rgba(255,255,255,.2); }
.pa-cachets .ch-sceau-galette::after { inset: 2px; }
.pa-emplacement:focus-visible { outline: 2px solid var(--cire); outline-offset: 2px; }

.pa-compte {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--cire);
}

/* ================================================================ */
/* Le carnet de Zorbin, qui glisse sur le bureau (remplace la popup)  */
/* ================================================================ */
.modal.pa-carnet {
  display: grid;
  place-items: center;
  inset: 0;
  padding: 4vh 16px;
  background: rgba(27,16,19,0);
  backdrop-filter: none;
  pointer-events: none;
  visibility: hidden;
  transition: background .45s, visibility 0s linear .55s;
  z-index: 1000;   /* au-dessus du Zorbin qui marche */
}
/* Ouvert : le bureau s'assombrit un peu, un clic à côté du carnet le referme */
.modal.pa-carnet.open {
  pointer-events: auto;
  visibility: visible;
  background: rgba(27,16,19,.45);
  transition: background .45s, visibility 0s;
}
.pa-carnet .pa-page {
  pointer-events: auto;
  width: min(1000px, 100%);
  height: auto;               /* la page prend la hauteur de son contenu : jamais de défilement dedans */
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 4px 10px 10px 4px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.3), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(91,70,54,.14), transparent 55%),
    var(--papier);
  color: var(--encre);
  box-shadow:
    inset 16px 0 20px -14px rgba(91,70,54,.55),   /* le creux de la reliure */
    0 0 0 9px #3a1a26,                           /* la couverture qui dépasse */
    0 0 0 10px #28121b,
    0 22px 50px rgba(0,0,0,.6);
  /* posé sur le bureau : il arrive d'un peu plus bas, légèrement de biais, et se pose */
  transform: translateY(70px) rotate(2.5deg) scale(.96);
  opacity: 0;
  visibility: hidden;
  transition: transform .55s cubic-bezier(.2,.8,.25,1), opacity .3s, visibility 0s linear .55s;
}
.pa-carnet.open .pa-page {
  transform: translateY(0) rotate(-0.6deg) scale(1);
  opacity: 1;
  visibility: visible;
  transition: transform .55s cubic-bezier(.2,.8,.25,1), opacity .3s, visibility 0s;
}
.pa-carnet .pa-page::before { display: none; }

/* Le signet du carnet, qui dépasse en haut de la page */
.pa-signet {
  position: absolute;
  top: -14px;
  right: 64px;
  width: 22px;
  height: 64px;
  z-index: 3;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.35));
}
.pa-signet::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #3d1427, #7b3350 50%, #3a1224);
}

.pa-carnet .popup-head {
  position: relative;
  background: none;
  border-bottom: 1px solid rgba(107,90,76,.3);
  padding: 22px 26px 12px 34px;
  flex: none;
}
.pa-carnet .popup-head h2 {
  color: var(--cire);
  font-size: 28px;
  padding-right: 70px;
}
.pa-carnet .close-btn {
  top: 16px;
  right: 14px;
  background: none;
  border: 0;
  color: #6b5a4c;
  font-size: 1.1rem;
}
.pa-carnet .close-btn:hover { color: var(--cire); }

.pa-carnet .popup-body {
  flex: 1;
  overflow: auto;             /* filet de sécurité seulement (petits écrans) */
  padding: 20px 34px 8px 38px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}
.pa-carnet #mLead { margin: 0; }
.pa-carnet .popup-body p { color: var(--encre); }
/* Le récit : directement sur la page, à sa main */
.pa-carnet .popup-body blockquote {
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--encre);
}

/* Le collage : la vidéo et deux photos, en polaroïds scotchés */
.pa-collage {
  position: relative;
  padding: 16px 6px 12px;
}
.pa-carnet #mVideo:not(:empty),
.pa-carnet .popup-gallery img {
  position: relative;
  background: #f5f0e6;
  padding: 10px 10px 30px;
  box-shadow: 0 6px 14px rgba(43,26,34,.35);
}
.pa-carnet #mVideo:not(:empty) { width: 100%; margin: 0; transform: rotate(-1.6deg); }
.pa-carnet #mVideo .yt { margin-top: 0; border-radius: 0; }
.pa-carnet #mVideo .yt > img { filter: brightness(.8) saturate(.92); }

.pa-carnet .popup-gallery {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 0;
  margin-top: -15%;            /* les photos chevauchent le bas de la vidéo */
  padding: 0 0 0 0;
  pointer-events: none;        /* le bouton de lecture reste cliquable sous leurs bords */
}
.pa-carnet .popup-gallery img { pointer-events: auto; }
.pa-carnet .popup-gallery img {
  width: 44%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}
.pa-carnet .popup-gallery img:nth-child(1) { transform: rotate(-4deg) translate(-16px, 0); z-index: 1; }
.pa-carnet .popup-gallery img:nth-child(2) { transform: rotate(3.5deg) translate(18px, 10px); }
.pa-carnet .popup-gallery img:hover { border: 0; }

/* Le scotch : un ruban de papier translucide aux bords déchirés */
.pa-scotch {
  position: absolute;
  z-index: 2;
  width: 92px;
  height: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.25), transparent 40%, rgba(91,70,54,.08)),
    rgba(184,164,124,.82);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 20% 2%, 30% 6%, 42% 0, 55% 7%, 68% 1%, 80% 8%, 90% 0, 100% 6%,
    97% 50%, 100% 94%, 92% 100%, 82% 92%, 70% 100%, 58% 94%, 46% 100%, 34% 93%, 22% 100%, 10% 92%, 3% 100%, 0 90%, 3% 50%);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

.pa-carnet .popup-foot {
  flex: none;
  border-top: 1px solid rgba(107,90,76,.3);
  padding: 12px 26px 16px 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pa-carnet .btn-carnet { color: var(--cire); border-bottom-color: rgba(98,36,60,.45); }
.pa-carnet .btn-carnet::after { background: var(--cire); }
.pa-carnet .btn-carnet:hover { color: var(--cire); }

/* Le cachet du lieu, apposé sur la page une fois le lieu visité */
.pa-sceau-page { position: relative; width: 58px; height: 58px; flex: none; }
.pa-sceau-page:empty { visibility: hidden; }
.pa-sceau-page .ch-sceau { left: 0; top: 0; width: 100%; height: 100%; bottom: auto; right: auto; transform: rotate(-8deg); }
.pa-sceau-page .ch-empreinte { inset: 13px; }

/* ================================================================ */
/* Téléphone                                                        */
/* ================================================================ */
@media (max-width: 640px) {
  .pa-entete { width: 72%; left: 10px; top: 10px; }
  .pa-etiquette { padding: 11px 14px 10px; }
  .pa-etiquette h1 { font-size: 20px; }
  .pa-sous { display: none; }
  .pa-marque { left: 18px; width: 22px; }
  .pa-cachets { gap: 4px; margin-top: 8px; padding-top: 8px; }
  .pa-emplacement { width: 22px; height: 22px; }
  .pa-cachets { max-width: none; }

  .modal.pa-carnet { display: flex; align-items: flex-end; padding: 0 10px; }
  .pa-carnet .pa-page {
    width: 100%;
    height: 80vh;
    opacity: 1;
    border-radius: 10px 10px 0 0;
    transform: translateY(105%);
    box-shadow: 0 0 0 7px #3a1a26, 0 -10px 40px rgba(0,0,0,.55);
  }
  .pa-carnet.open .pa-page { transform: translateY(0); }
  .pa-carnet .popup-head { padding: 18px 16px 10px 18px; }
  .pa-carnet .popup-head h2 { font-size: 24px; }
  .pa-carnet .popup-body { padding: 14px 16px 8px 18px; grid-template-columns: 1fr; gap: 18px; }
  .pa-carnet .popup-foot { padding: 10px 16px 14px 18px; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .pa-carnet .popup-body { grid-template-columns: 1fr; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-carnet .pa-page, .pa-carnet.open .pa-page { transition: none; }
}