/* ------------------------------------------------------------------
   Nosce — feuille de style unique.
   Les zones du recto sont calées sur les mesures du gabarit
   (gabarit/carte-nosce-gabarit.png, 1100 x 1600).
   ------------------------------------------------------------------ */

:root {
  --nuit: #08171d;
  --nuit-carte: #0e1c22;
  --parchemin: #ead3b4;
  --parchemin-ombre: #d8bd97;
  --or: #bc8447;
  --encre: #101f26;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --titrage: 'Imbue', 'Cormorant Garamond', Georgia, serif;

  /* Fenêtre de l'illustration, en pourcentage du gabarit. */
  --fenetre-x: 10.909%;
  --fenetre-y: 13.125%;
  --fenetre-l: 77.273%;
  --fenetre-h: 56.375%;

  /* Cartouche du titre. */
  --titre-x: 6.91%;
  --titre-y: 71.75%;
  --titre-l: 85.27%;
  --titre-h: 6.94%;

  /* Cartouche de la description courte. */
  --court-x: 6.91%;
  --court-y: 80.94%;
  --court-l: 85.27%;
  --court-h: 11.81%;

  /* Verso : bandeau du titre, puis panneau de la description complète. */
  --verso-titre-y: 7.13%;
  --verso-panneau-y: 16.31%;
  --verso-panneau-h: 76.44%;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: clip;
  background: var(--nuit);
  color: var(--parchemin);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Halo froid au centre, coins assombris : la carte semble posée sous une lueur. */
/*
 * Le fond : une lueur dorée au centre, assombrie vers les bords. Les dégradés
 * restent en composition normale — les modes de fusion appliqués ici
 * désaturaient l'or au lieu de le renforcer. La texture est portée par une
 * couche à part, .lueur.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 66% 60% at 50% 40%, rgba(208, 149, 80, 0.58), rgba(160, 111, 60, 0.2) 50%, transparent 78%),
    radial-gradient(ellipse 130% 100% at 50% 42%, transparent 25%, rgba(2, 7, 9, 0.78) 79%, rgba(0, 3, 4, 0.94) 100%);
}

/*
 * Le paquet posé sous la pochette : trois cartes décalées vers la droite et le
 * bas, dont seules les tranches dépassent. Elles reprennent le gabarit de la
 * pochette, assombri, pour que leur liseré doré reste juste.
 *
 * Au chargement, elles partent alignées sous la carte du dessus puis glissent en
 * place l'une après l'autre : le paquet a l'air de se poser.
 */
.pile span {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 2.6cqw;
  background-image: url('img/pochette.webp');
  background-size: 100% 100%;
  animation: pile-se-decale 760ms cubic-bezier(0.2, 0.8, 0.28, 1) both;
}

.pile span:nth-child(1) {
  --decalage-x: 2.1%;
  --decalage-y: 1.3%;
  --pivot: 0.7deg;
  filter: brightness(0.72);
  animation-delay: 170ms;
}

.pile span:nth-child(2) {
  --decalage-x: 4.1%;
  --decalage-y: 2.5%;
  --pivot: 1.5deg;
  filter: brightness(0.56);
  animation-delay: 280ms;
}

.pile span:nth-child(3) {
  --decalage-x: 0.9%;
  --decalage-y: 1.6%;
  --pivot: -5.7deg;
  filter: brightness(0.42);
  animation-delay: 390ms;
}

@keyframes pile-se-decale {
  from {
    transform: none;
  }
  to {
    transform: translate(var(--decalage-x), var(--decalage-y)) rotate(var(--pivot));
  }
}

@keyframes paquet-se-pose {
  from {
    opacity: 0;
    transform: translateY(3.5%) scale(0.965);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*
 * Nuage de basse fréquence appliqué sur la lueur : il lui donne des variations
 * de densité, là où un dégradé seul reste lisse. Le masque le confine au centre,
 * et « overlay » ne mord que sur les zones déjà éclaircies.
 */
.lueur {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.48;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='1200' height='1200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170% 170%;
  background-position: 50% 36%;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 70% 64% at 50% 40%, #000 12%, transparent 82%);
  mask-image: radial-gradient(ellipse 70% 64% at 50% 40%, #000 12%, transparent 82%);
}

/*
 * Grain de matière sur le fond, sous la pochette et les cartes. Le bruit est
 * généré par un filtre SVG en URI de données : pas de fichier image à charger,
 * et la tuile se répète sans coupure visible (stitchTiles).
 *
 * La fréquence est haute et les octaves peu nombreuses : sur un écran à haute
 * densité, une fréquence plus basse produit des grains de plusieurs pixels, qui
 * se voient comme des grumeaux au lieu d'une matière.
 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

.plateau {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 26px);
  padding: max(16px, env(safe-area-inset-top)) 16px calc(78px + env(safe-area-inset-bottom));
}

/* ---------- La carte ---------- */

/*
 * La scène porte les entrées et sorties de carte ; le pivot, lui, est réservé au
 * retournement. Les deux animations ne peuvent pas cohabiter sur un même
 * élément, d'où cette séparation.
 *
 * La direction est passée en variables plutôt qu'en multipliant les jeux
 * d'images clés : le tirage fait monter la carte du bas, la navigation la fait
 * venir du côté d'où l'on vient.
 */
.scene {
  display: block;
  --sortie-x: 0%;
  --sortie-y: 115%;
  --sortie-rotation: 7deg;
  --entree-x: 0%;
  --entree-y: -115%;
  --entree-rotation: -7deg;
}

/*
 * Les points intermédiaires se déduisent des variables de direction : un léger
 * recul avant de plonger, puis un dépassement d'environ 2 % au moment de se
 * poser. Sans eux, le mouvement paraissait rectiligne et le rebond, calculé par
 * la seule courbe d'easing, ne dépassait pas un pixel.
 */
@keyframes carte-sort {
  0% {
    opacity: 1;
    transform: none;
    animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1);
  }
  18% {
    opacity: 1;
    transform: translate(calc(var(--sortie-x) * -0.028), calc(var(--sortie-y) * -0.028))
      rotate(calc(var(--sortie-rotation) * -0.16)) scale(1.012);
    animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.35);
  }
  100% {
    opacity: 0;
    transform: translate(var(--sortie-x), var(--sortie-y)) rotate(var(--sortie-rotation)) scale(0.88);
  }
}

@keyframes carte-arrive {
  0% {
    opacity: 0;
    transform: translate(var(--entree-x), var(--entree-y)) rotate(var(--entree-rotation)) scale(0.88);
    animation-timing-function: cubic-bezier(0.22, 0.72, 0.36, 1);
  }
  68% {
    opacity: 1;
    transform: translate(calc(var(--entree-x) * -0.022), calc(var(--entree-y) * -0.022))
      rotate(calc(var(--entree-rotation) * -0.12)) scale(1.008);
    animation-timing-function: cubic-bezier(0.36, 0, 0.3, 1);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.scene.sort {
  animation: carte-sort 340ms linear both;
}

.scene.arrive {
  animation: carte-arrive 520ms linear both;
}

.carte {
  /* Le ratio prime : la carte se cale sur la plus contraignante des dimensions. */
  width: min(94vw, calc(78svh * 0.6875), 520px);
  aspect-ratio: 1100 / 1600;
  container-type: inline-size;
  perspective: 2200px;

  position: relative;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--serif);
  color: inherit;
  cursor: pointer;
  /* Supprime le délai de double-tap sans interdire le zoom pincé. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}

.carte:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 10px;
  border-radius: 5cqw;
}

.carte__pivot {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.carte.est-retournee .carte__pivot {
  transform: rotateY(180deg);
}

/*
 * L'ordre des transformations compte : l'élévation (translate) est appliquée
 * avant les rotations pour rester dirigée vers le spectateur tout au long du
 * mouvement, et non dans le repère de la carte en train de pivoter.
 */
/*
 * Une courbe d'easing CSS s'applique entre chaque paire d'images clés : posée sur
 * l'animation entière, elle ferait décélérer jusqu'à l'arrêt à 50 % avant de
 * repartir. Chaque segment porte donc la sienne, et les deux se raccordent à la
 * même vitesse au point milieu (pente 1,8 de part et d'autre) : le mouvement
 * accélère, franchit la tranche à pleine vitesse, puis se pose.
 */
@keyframes retourner-aller {
  0% {
    transform: translateY(0) translateZ(0) rotate(0deg) rotateY(0deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.55);
  }
  50% {
    transform: translateY(-3.5%) translateZ(90px) rotate(-2.6deg) rotateY(90deg);
    animation-timing-function: cubic-bezier(0.25, 0.45, 0.5, 1);
  }
  100% {
    transform: translateY(0) translateZ(0) rotate(0deg) rotateY(180deg);
  }
}

@keyframes retourner-retour {
  0% {
    transform: translateY(0) translateZ(0) rotate(0deg) rotateY(180deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.55);
  }
  50% {
    transform: translateY(-3.5%) translateZ(90px) rotate(2.6deg) rotateY(270deg);
    animation-timing-function: cubic-bezier(0.25, 0.45, 0.5, 1);
  }
  100% {
    transform: translateY(0) translateZ(0) rotate(0deg) rotateY(360deg);
  }
}

.carte__pivot.va-au-verso {
  animation: retourner-aller 1050ms linear both;
}

.carte__pivot.va-au-recto {
  animation: retourner-retour 1050ms linear both;
}

.face {
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ---------- Recto : illustration + gabarit + textes ---------- */

.face__illustration,
.face__gabarit {
  position: absolute;
  display: block;
}

/* L'illustration se loge dans la fenêtre, sous le gabarit qui l'habille. */
.face__illustration {
  left: var(--fenetre-x);
  top: var(--fenetre-y);
  width: var(--fenetre-l);
  height: var(--fenetre-h);
  object-fit: cover;
  object-position: 50% 42%;
  background: var(--nuit-carte);
}

.face__gabarit {
  inset: 0;
  width: 100%;
  height: 100%;
}

.zone {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--encre);
  overflow: hidden;
}

.zone--titre {
  left: var(--titre-x);
  top: var(--titre-y);
  width: var(--titre-l);
  height: var(--titre-h);
  padding: 0 3.4cqw;
}

.titre {
  font-family: var(--titrage);
  font-optical-sizing: auto;
  font-size: 7.2cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Ajusté par app.js lorsqu'un titre dépasse la largeur du cartouche. */
  transform: scale(var(--ajustement, 1));
}

.zone--court {
  left: var(--court-x);
  top: var(--court-y);
  width: var(--court-l);
  height: var(--court-h);
  padding: 0 7cqw;
}

.court {
  font-size: 4.15cqw;
  font-style: italic;
  font-weight: 600;
  line-height: 1.26;
  color: #24333a;
}

/* ---------- Verso : titre + description complète ---------- */

.face--recto,
.face--verso {
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.6));
}

.face--verso {
  transform: rotateY(180deg);
}

.zone--titre-verso {
  left: var(--titre-x);
  top: var(--verso-titre-y);
  width: var(--titre-l);
  height: var(--titre-h);
  padding: 0 3.4cqw;
}

.zone--long {
  left: var(--court-x);
  top: var(--verso-panneau-y);
  width: var(--court-l);
  height: var(--verso-panneau-h);
  flex-direction: column;
  justify-content: space-between;
  gap: 3cqw;
  padding: 3.6cqw 10cqw;
}

.verso__texte {
  font-size: 4.15cqw;
  line-height: 1.34;
  text-align: left;
  text-wrap: pretty;
}

.verso__source {
  font-family: ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 2.5cqw;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #6b5a44;
  flex: none;
}

/* ---------- Pochette d'ouverture ---------- */

/*
 * La pochette est une carte à part entière : le gabarit porte lui-même le cadre
 * doré, la texture et les coins découpés, d'où l'absence de bordure, de rayon et
 * de fond ici. Les zones de texte sont calées sur ses mesures — la colonne libre
 * entre les montants de l'arche va de 54 % à 76 % de largeur, et les deux
 * figures s'étendent de 71,6 % à 94,7 % de hauteur.
 */
.pochette {
  position: relative;
  width: min(94vw, calc(78svh * 0.6875), 520px);
  aspect-ratio: 1100 / 1600;
  container-type: inline-size;
  margin-inline: auto;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.6));
  animation: paquet-se-pose 720ms cubic-bezier(0.2, 0.75, 0.3, 1) both;
}

.pochette[hidden] {
  display: none;
}

.pochette__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.pochette__contenu {
  position: absolute;
  left: 0;
  top: 10.5%;
  width: 100%;
  height: 61%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 23cqw;
  text-align: center;
}

.pochette__marque {
  font-family: var(--titrage);
  font-optical-sizing: auto;
  font-size: 11.5cqw;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1;
  margin: 0 0 7cqw;
  color: #fff;
}

.pochette__signature {
  font-size: 4.5cqw;
  line-height: 1.24;
  color: var(--parchemin);
  /* Placée haut, là où l'arche est large : elle peut déborder de la colonne du
     paragraphe pour tenir sur une seule ligne. */
  margin: 0 -6cqw 5.5cqw;
}

.pochette__texte {
  font-size: 4.05cqw;
  line-height: 1.4;
  color: rgba(229, 201, 147, 0.86);
  margin: 0;
  text-wrap: pretty;
}

.pochette__chute {
  position: absolute;
  left: 0;
  bottom: 17%;
  width: 100%;
  padding: 0 19cqw;
  margin: 0;

  font-size: 4.35cqw;
  font-style: italic;
  line-height: 1.34;
  text-align: center;
  color: rgba(229, 201, 147, 0.62);
}

/* ---------- Autour de la carte ---------- */

.indice {
  margin: 0;
  font-size: clamp(0.86rem, 2.6vw, 1rem);
  font-style: italic;
  color: rgba(229, 201, 147, 0.42);
  transition: opacity 300ms ease;
}

.indice.masque {
  opacity: 0;
}

.tirage {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 2;

  font-family: ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.87rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid var(--or);
  background: rgba(14, 28, 34, 0.9);
  backdrop-filter: blur(8px);
  color: var(--parchemin);
  cursor: pointer;
  transition: background 260ms ease, color 260ms ease;
}

.tirage:hover {
  background: var(--or);
  color: var(--nuit);
}

.tirage:active {
  transform: translateY(1px);
}

/* Historique : les cartes déjà tirées, à l'opposé du bouton de tirage. */
.navigation[hidden] {
  display: none;
}

.navigation {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  gap: 10px;
}

.navigation button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--or);
  background: rgba(14, 28, 34, 0.9);
  backdrop-filter: blur(8px);
  color: var(--parchemin);
  cursor: pointer;
  transition: background 260ms ease, color 260ms ease, opacity 260ms ease;
}

.navigation button:hover:not(:disabled) {
  background: var(--or);
  color: var(--nuit);
}

.navigation button:disabled {
  opacity: 0.28;
  cursor: default;
}

.navigation svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 480px) {
  .tirage {
    font-size: 0.82rem;
    padding: 12px 18px;
  }

  .navigation button {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carte__pivot.va-au-verso,
  .carte__pivot.va-au-recto,
  .scene.sort,
  .scene.arrive,
  .pochette,
  .pile span {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}