/* ─────────────────────────────
   IMPORT DES TYPOGRAPHIES
───────────────────────────── */

@font-face {
  font-family: "Modern Gothic Poster";
  src: url("./fonts/ModernGothicPoster-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────
   ÉCHELLE FLUIDE (unités rem)
   Le rem de base s'adapte à la taille de l'écran (largeur et hauteur),
   entre 12px et 16px. Toutes les tailles de l'interface en dépendent :
   --ui-size = 55px quand le rem vaut 16px (grand écran), plus petit sur
   les petits écrans.
───────────────────────────── */

:root {
  --vh: 1vh;
  --ui-size: 3.4375rem;      /* corps de la typo du logo, compteur, bouton… */
  --pad-top: 5.625rem;       /* espace réservé en haut (logo) */
  --pad-bottom: 10.3125rem;  /* espace réservé en bas (compteur + bouton) */
}

@supports (height: 100dvh) {
  :root {
    --vh: 1dvh;
  }
}

html {
  font-size: clamp(12px, min(4.2vw, 2vh), 16px);
}

@supports (height: 1svh) {
  html {
    font-size: clamp(12px, min(4.2vw, 2svh), 16px);
  }
}

/* ─────────────────────────────
   APPLICATION GLOBALE
───────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  /* Pas de « overflow: hidden » ici : il empêche Safari (iPhone) de faire le
     « tirer pour rafraîchir ». Tous les éléments sont en position fixed, la page ne défile pas. */
  touch-action: manipulation;
}

body {
  position: relative; /* repère du rideau de couleur (position: absolute) */
  background: #efefef;
  color: #000000;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 18px;
  user-select: none;
  -webkit-user-select: none;
}

/* ─────────────────────────────
   HEADER & MENU MOBILE TOGGLE
───────────────────────────── */

header {
  position: fixed;
  z-index: 30; /* au-dessus du menu plein écran */
  top: 1.375rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "Modern Gothic Poster", sans-serif;
  font-size: var(--ui-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none; /* les taps passent à travers vers la zone gauche / droite */
}

.header-btn {
  pointer-events: auto;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
}

/* ─────────────────────────────
   ZONE CENTRALE & POSTER
───────────────────────────── */

main {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-top) 1.25rem var(--pad-bottom);
}

#poster {
  position: relative;
  visibility: hidden;
  flex: 0 0 auto;
  /* Ratio A3/A4 (297 × 420) toujours respecté : seule la largeur est calculée,
     la hauteur en découle. La largeur est limitée par la largeur de l'écran
     ET par la hauteur disponible (écran moins l'espace réservé en haut et en bas). */
  width: min(53vw, 550px, calc((100 * var(--vh) - var(--pad-top) - var(--pad-bottom)) * 297 / 420));
  height: auto;
  aspect-ratio: 297 / 420;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1%;
  box-sizing: border-box;
  background: #000000;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 50ms ease, transform 0.15s ease-out;
  touch-action: pan-y pinch-zoom;
}

#slogan {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin: 0;
  color: #ffffff;
  font-family: "Modern Gothic Poster", sans-serif;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: wrap;
  overflow: visible;
}

#slogan * {
  text-align: center;
}

/* ─────────────────────────────
   MENU DES CATÉGORIES (PLEIN ÉCRAN — MOBILE ET DESKTOP)
───────────────────────────── */

.categories {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: #efefef;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.25rem;
  padding: 6.25rem 1.25rem 2.5rem;
  margin: 0;
  width: 100%;
  max-width: 100%;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* Classe d'activation du menu */
.categories.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Centrage vertical « sûr » : centre si ça tient, scroll sinon */
.categories button:first-child {
  margin-top: auto;
}

.categories button:last-child {
  margin-bottom: auto;
}

/* Même corps de typo que le logo « MANIFESTE » */
.categories button {
  appearance: none;
  font-family: "Modern Gothic Poster", sans-serif;
  font-size: var(--ui-size);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #dcdcdc;
  background: none;
  border: none;
  padding: 0;
  width: auto;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  transition: color 0.15s ease;
}

.categories button:hover,
.categories button.active {
  color: #000000;
}

/* Lien « Manifeste » en fin de menu, après un saut de ligne */
.categories .menu-about {
  margin-top: 1.75rem;
  color: #000000;
}

.categories .menu-about:hover {
  opacity: 0.5;
}

/* ─────────────────────────────
   NAVIGATION & COMPTEUR
───────────────────────────── */

nav {
  position: fixed;
  z-index: 5;
  right: 0.875rem;
  bottom: 0.875rem;
  left: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none; /* seuls les boutons captent les clics */
}

nav button {
  pointer-events: auto;
  appearance: none;
  border: 0;
  padding: 0.3125rem;
  background: none;
  color: #000000;
  font-family: "Modern Gothic Poster", sans-serif;
  font-size: var(--ui-size);
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) {
  nav button:hover {
    opacity: 0.5;
  }
}

#counter {
  position: fixed;
  left: 50%;
  bottom: 5.25rem; /* ligne 1 : au-dessus du bouton télécharger */
  transform: translateX(-50%);
  color: #dcdcdc;
  font-family: "Modern Gothic Poster", sans-serif;
  font-size: var(--ui-size);
  line-height: 1;
  pointer-events: none;
}

#download {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: 1.1875rem; /* ligne 2 : à la place de l'ancien compteur */
  transform: translateX(-50%);
  border: 0;
  padding: 0;
  background: none;
  color: #000000;
  font-family: "Modern Gothic Poster", sans-serif;
  font-size: var(--ui-size);
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  cursor: pointer;
}

#download:hover {
  opacity: 0.5;
}

/* ─────────────────────────────
   RIDEAU DE COULEUR (survol du bouton télécharger)
   Recouvre toute la fenêtre, affiche comprise, en fusion « produit »
   (multiply) : le noir reste noir, le blanc prend la couleur.
───────────────────────────── */

#curtain {
  display: none; /* retiré du rendu au repos */
  /* « absolute » et non « fixed » : Safari (iPhone) teinte ses barres du haut et du bas
     avec la couleur des éléments en position fixed qui touchent les bords de l'écran,
     et garde cette teinte après coup. Un élément absolute n'est jamais pris en compte. */
  position: absolute;
  inset: 0;
  z-index: 40; /* au-dessus de tout, sans bloquer les clics */
  pointer-events: none;
  background: var(--curtain-color, transparent);
  mix-blend-mode: multiply;
  transform: translateY(-100%);
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

#curtain.active {
  display: block;
}

#curtain.open {
  transform: translateY(0);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────────
   APERÇU D'EXPORT (repli iPhone : appui long sur l'image pour l'enregistrer)
───────────────────────────── */

#export-preview {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4.5rem 1.25rem 1.25rem;
  background: #efefef;
}

#export-preview p {
  margin: 0;
  max-width: 28rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}

#export-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100 * var(--vh) - 12rem);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}

#export-preview button {
  position: absolute;
  top: 1.125rem;
  right: 1.25rem;
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  color: #000000;
  font-family: "Modern Gothic Poster", sans-serif;
  font-size: var(--ui-size);
  line-height: 1;
  cursor: pointer;
}

/* ─────────────────────────────
   PAGE « MANIFESTE » (À PROPOS)
───────────────────────────── */

#about {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: #efefef;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 6.25rem 1.5rem 3rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  overscroll-behavior-y: contain;
  user-select: text;
  -webkit-user-select: text;
}

#about.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

.about-content {
  width: 100%;
  max-width: 900px;
  margin: auto 0; /* centrage vertical « sûr » : scroll si le texte est long */
  text-align: center;
  color: #000000;
  font-family: "Modern Gothic Poster", sans-serif;
  font-size: var(--ui-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere; /* sécurité : jamais de scroll horizontal, sans trait d'union */
  hyphens: none;
  -webkit-hyphens: none;
}

.about-content p {
  margin: 0 0 1em;
}

.about-content p:last-child {
  margin-bottom: 0;
}

.about-content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.375rem;
  text-decoration-thickness: 0.1875rem;
}

.about-content a:hover {
  opacity: 0.5;
}

/* ─────────────────────────────
   RESPONSIVE — MOBILE (≤ 700px)
───────────────────────────── */

@media (max-width: 700px) {

  :root {
    --pad-bottom: 9.375rem;
  }

  header {
    top: 1.125rem;
  }

  main {
    padding: var(--pad-top) 1rem var(--pad-bottom);
  }

  /* Largeur limitée par l'écran ET par la hauteur disponible :
     la hauteur découle toujours du ratio 297 / 420 (plus d'écrasement). */
  #poster {
    width: min(88vw, 360px, calc((100 * var(--vh) - var(--pad-top) - var(--pad-bottom)) * 297 / 420));
    height: auto;
    visibility: hidden;
  }

  /* Flèches visibles sur mobile : à gauche et à droite, alignées sur le bouton télécharger
     (0.8125rem + 0.3125rem de padding du bouton = 1.125rem) */
  nav {
    bottom: 0.8125rem;
  }

  /* Ligne 1 : compteur centré, au-dessus du bouton */
  #counter {
    position: fixed;
    left: 50%;
    bottom: 4.875rem;
    transform: translateX(-50%);
    display: block;
    font-size: var(--ui-size);
    line-height: 1;
  }

  /* Ligne 2 : bouton de téléchargement en bas */
  #download {
    bottom: 1.125rem;
    font-size: var(--ui-size);
  }
}