/* ============================================================================
   carnet-fl.css — carnet de vol FlightLedger
   ========================================================================== */

.carnet-zone {
  position: relative;
  width: min(760px, 92vw);
  aspect-ratio: 3 / 2;
  margin: clamp(48px, 8vw, 120px) auto;
}

/* Le canvas Three.js est injecté ici */
.carnet-zone canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .5s ease;
}
.carnet-zone.carnet-pret canvas { opacity: 1; }

/* --- Boutons posés sur les pages ------------------------------------------
   Positionnés en pourcentage du conteneur : ils suivent la mise en page.
   Ajuster left/top si le cadrage de la caméra change.                        */
.carnet-boutons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.carnet-lien {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(calc(-50% + var(--decalage, 0px)), -50%) rotate(var(--pencil-tilt, -1.5deg)) scale(.96);
  transition: opacity .7s ease .15s, transform .7s ease .15s;

  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(14px, 1.6vw, 19px);
  letter-spacing: .01em;
  color: #4a4038;                       /* mine de crayon sur papier jauni */
  text-decoration: none;
  text-align: center;
  line-height: 1.35;
  padding: .35em .6em;
  border-bottom: 1.5px solid rgba(74, 64, 56, .45);
}

.carnet-lien:hover {
  color: #2e2620;
  border-bottom-color: rgba(46, 38, 32, .8);
}

/* left/top ne sont plus réglés ici : carnet-fl.js les recalcule à chaque image
   en projetant à l'écran le centre des maillages Page_Gauche et Page_Droite.
   Les liens suivent donc le carnet quoi qu'il arrive. Seul reste un décalage
   manuel, pour écarter le lien de droite de l'élastique rouge qui traverse
   sa page — un texte manuscrit posé sur la sangle ne serait pas crédible. */
/* Page gauche */
.carnet-lien--pilote { --pencil-tilt: -2deg; }
/* Page droite */
.carnet-lien--codex  { --pencil-tilt: 1.5deg; --decalage: -18px; }

/* Révélation une fois le carnet ouvert */
.carnet-zone.carnet-ouvert .carnet-lien {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(var(--pencil-tilt, -1.5deg)) scale(1);
}
.carnet-zone.carnet-ouvert .carnet-lien--codex { transition-delay: .32s; }

/* Repli sans 3D : si le modèle n'a pas pu être chargé, les deux liens sont
   affichés côte à côte en clair, sans le rendu crayon qui n'aurait plus de
   support. Posé par carnet-fl.js sur erreur de chargement. */
.carnet-zone.carnet-sans-3d {
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
}
.carnet-zone.carnet-sans-3d .carnet-boutons {
  position: static;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}
.carnet-zone.carnet-sans-3d .carnet-lien {
  position: static;
  transform: none;
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #d7dcc4;
  border-bottom-color: rgba(215, 220, 196, .5);
}

/* --- La Forge DCS : troisième note au crayon -------------------------------
   Même écriture que les deux autres liens, mais elle déplie ses trois outils
   au survol. Ce ne sont volontairement PAS des liens : la Forge est réservée
   à l'administration. D'où l'absence de <a>, le curseur qui reste une flèche,
   et la mention « accès restreint » — sans elle, un visiteur qui clique sans
   effet croirait à un bug plutôt qu'à une restriction.
   Position posée par carnet-fl.js, sous la page de droite.                  */
.carnet-forge {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease .45s;
  text-align: center;
}
.carnet-zone.carnet-ouvert .carnet-forge {
  opacity: 1;
  pointer-events: auto;      /* seul le survol est permis, rien à cliquer */
}

.carnet-forge-titre {
  display: inline-block;
  padding: .35em .6em;
  border-bottom: 1.5px solid rgba(74, 64, 56, .45);
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(14px, 1.6vw, 19px);
  line-height: 1.35;
  color: #4a4038;
  cursor: default;
  transform: rotate(1deg);
}
.carnet-forge:hover .carnet-forge-titre {
  color: #2e2620;
  border-bottom-color: rgba(46, 38, 32, .8);
}

/* Le menu s'ouvre VERS LE HAUT : sous la note, il déborderait du carnet. */
.carnet-forge-menu {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .35rem);
  min-width: 12.5rem;
  margin: 0;
  padding: .45rem .2rem;
  list-style: none;
  background: rgba(250, 247, 238, .97);
  border: 1px solid rgba(74, 64, 56, .3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.carnet-forge:hover .carnet-forge-menu,
.carnet-forge:focus-within .carnet-forge-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.carnet-forge-menu li {
  padding: .3rem .85rem;
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(12px, 1.25vw, 15px);
  text-align: left;
  color: rgba(74, 64, 56, .58);   /* atténué : lisible, mais visiblement inactif */
  cursor: default;
}

.carnet-forge-note {
  margin-bottom: .2rem;
  padding-bottom: .35rem !important;
  border-bottom: 1px dashed rgba(74, 64, 56, .3);
  font-family: 'DM Mono', monospace !important;
  font-size: .58rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(74, 64, 56, .75) !important;
}
.carnet-forge-note::before { content: "🔒 "; }

@media (prefers-reduced-motion: reduce) {
  .carnet-zone canvas, .carnet-lien,
  .carnet-forge, .carnet-forge-menu { transition: none; }
}