/* ==========================================================================
   Écran d'entrée — Salon de l'Agronomie · Check-in

   Cinq secondes, trois temps. Deux éléments viennent directement des supports
   du salon : la police Apple Tea, celle de l'affiche, et l'épi vectoriel
   extrait du fichier Illustrator fourni. Rien n'est approximé.

   Minutage
     0,00  la vague de fond glisse, la vague de tête la rattrape
     0,25  l'épi pousse au centre, du pied vers la pointe
     1,00  l'épi rejoint sa place au bout du titre
     1,05  « SALON », lettre par lettre, 65 ms d'écart
     1,60  « DE L'AGRONOMIE » se dévoile derrière un volet
     1,95  les dates
     2,70  l'événement se retire vers le haut
     2,95  le QR se dessine
     3,35  la ligne de scan le traverse, deux fois
     3,55  « CHECK-IN »
     3,95  la signature
     4,25  la mention « en partenariat avec »
     4,50  les logos Bibl'ESSA puis Agrotech, filet entre les deux
     5,40  l'ensemble se lève

   Aucune ressource externe, aucun script d'animation : tout est en CSS, donc
   composé par le processeur graphique et interruptible à tout instant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La police du salon

   Apple Tea, celle de l'affiche et de la plaquette. Convertie de l'OpenType
   fourni vers WOFF2 : 5,6 Ko, servie par ce serveur comme tout le reste.
   Capitales uniquement, et strictement ASCII — aucune lettre accentuée. Les
   textes qu'elle porte sont écrits en conséquence, et Inter prend le relais
   pour tout glyphe absent.
   -------------------------------------------------------------------------- */
/* La declaration @font-face d'Apple Tea vit desormais dans app.css : le
   logotype s'en sert aussi, sur des pages ou entree.css n'est pas chargee. */

.entree {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #06301b;
  transform-origin: 50% 0;
  font-family: 'Apple Tea', 'Inter', system-ui, sans-serif;
  color: #ffffff;
}

/* Le script pose cette classe : sans lui, rien ne s'affiche. */
.entree.est-visible { display: flex; }

/* Inerte dès que la sortie commence : dans un onglet en arrière-plan, les
   minuteurs sont bridés et le retrait du nœud peut tarder. La couche couvrant
   tout l'écran, elle intercepterait les clics sur le formulaire. */
.entree.est-sortie {
  pointer-events: none;
  animation: entree-lever 0.78s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes entree-lever {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(-16%) scale(1.07); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Fond
   -------------------------------------------------------------------------- */

.entree__affiche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% 45%;
  /* Un rapprochement très lent sur toute la durée : le fond ne s'immobilise
     jamais, ce qui suffit à donner de la vie sans détourner le regard. */
  animation: entree-approche 6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes entree-approche {
  from { transform: scale(1.14); opacity: 0; }
  10%  { opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

/* Le voile assombrit la bande centrale, là où se posent le titre puis le
   produit. Sans lui, la lisibilité du texte blanc dépendrait entièrement de
   la photo déposée — et changerait le jour où elle est remplacée. */
.entree__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(4, 26, 14, 0.30) 0%,
    rgba(4, 26, 14, 0.52) 38%,
    rgba(4, 26, 14, 0.56) 62%,
    rgba(4, 26, 14, 0.34) 100%
  );
}

/* Sans affiche, un dégradé profond tient lieu de fond. */
.entree:not([data-entree-affiche]) {
  background:
    radial-gradient(120% 90% at 15% 0%, #0f6b3c 0%, transparent 60%),
    radial-gradient(100% 80% at 85% 100%, #0a5230 0%, transparent 55%),
    #06301b;
}

.entree__vague {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #00a94f;
  transform: translateX(36%);
  animation: entree-vague 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.entree__vague--fond {
  fill: #058c41;
  transform: translateX(30%);
  animation: entree-vague-fond 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0s both;
}

@keyframes entree-vague {
  from { transform: translateX(104%); }
  to   { transform: translateX(36%); }
}

@keyframes entree-vague-fond {
  from { transform: translateX(112%); }
  to   { transform: translateX(30%); }
}

/* Sans affiche, les vagues couvrent l'écran entier. */
.entree:not([data-entree-affiche]) .entree__vague {
  transform: translateX(-2%);
  animation-name: entree-vague-pleine;
}
.entree:not([data-entree-affiche]) .entree__vague--fond {
  transform: translateX(-9%);
  animation-name: entree-vague-pleine-fond;
}

@keyframes entree-vague-pleine {
  from { transform: translateX(100%); }
  to   { transform: translateX(-2%); }
}
@keyframes entree-vague-pleine-fond {
  from { transform: translateX(108%); }
  to   { transform: translateX(-9%); }
}

/* --------------------------------------------------------------------------
   Scène : les deux temps occupent la même place, l'un chasse l'autre
   -------------------------------------------------------------------------- */

.entree__scene {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  text-shadow: 0 2px 28px rgba(3, 26, 14, 0.55);
}

.entree__acte {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- premier temps ---------- */

.entree__acte--evenement {
  animation: entree-acte-sortir 0.62s cubic-bezier(0.7, 0, 0.84, 0) 2.7s both;
}

@keyframes entree-acte-sortir {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to   { opacity: 0; transform: translateY(-1.6rem); filter: blur(6px); }
}

.entree__ligne-titre {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Apple Tea ne connaît qu'une graisse et que des capitales : ni font-weight
   ni text-transform ici, ils n'auraient aucun effet. */
.entree__salon {
  display: flex;
  line-height: 0.88;
  letter-spacing: -0.005em;
  font-size: clamp(3.4rem, 16vw, 9rem);
}

/* ---------- l'épi du logo ---------- */

/* Extrait du fichier vectoriel du salon. Il pousse d'abord seul et très grand
   au centre de l'écran, puis se replie à sa place au bout du titre — comme
   sur l'affiche. Deux animations enchaînées sur le même élément. */
.entree__epi {
  display: block;
  width: 0.32em;
  margin-left: 0.05em;
  font-size: clamp(3.4rem, 16vw, 9rem);
  color: #ffffff;
  transform-origin: 50% 100%;
  animation:
    entree-epi-pousse 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both,
    entree-epi-place 0.85s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
}

.entree__epi-svg {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
}

/* La pousse : le pied d'abord, la pointe en dernier. Un volet qui remonte
   est bien plus lisible qu'un fondu pour dire « ça grandit ». */
@keyframes entree-epi-pousse {
  from { clip-path: inset(100% 0 0 0); opacity: 0; }
  15%  { opacity: 1; }
  to   { clip-path: inset(-10% 0 0 0); opacity: 1; }
}

/* Le déplacement : de très grand et centré, vers sa taille dans le titre. */
@keyframes entree-epi-place {
  from { transform: scale(3.1) translate(-0.06em, 0.12em); }
  to   { transform: none; }
}

/* Chaque lettre entre pour elle-même, décalée de 60 ms sur sa voisine : c'est
   ce qui distingue une composition d'un simple bloc de texte qui apparaît. */
.entree__lettre {
  display: inline-block;
  animation: entree-lettre 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(1.05s + var(--rang) * 0.065s);
}

@keyframes entree-lettre {
  from { opacity: 0; transform: translateY(0.8em) rotate(3deg); }
  to   { opacity: 1; transform: none; }
}

/* Le sous-titre se dévoile derrière un volet qui remonte, plutôt que
   d'apparaître en fondu. */
.entree__agronomie {
  overflow: hidden;
  margin-top: 0.1em;
  font-size: clamp(1.1rem, 5vw, 2.6rem);
  letter-spacing: 0.02em;
  clip-path: inset(0 0 100% 0);
  animation: entree-volet 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.6s both;
}

@keyframes entree-volet {
  from { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); }
  to   { clip-path: inset(0 0 -10% 0); transform: none; }
}

.entree__dates {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.1rem;
  padding: 0.45rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  font-size: clamp(0.8rem, 2.6vw, 1.05rem);
  letter-spacing: 0.06em;
  animation: entree-monte 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.95s both;
}

/* Séparateur dessiné plutôt qu'écrit : le point médian n'existe pas dans
   Apple Tea et serait emprunté à une autre police, ce qui se verrait. */
.entree__point {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

/* ---------- second temps ---------- */

.entree__acte--produit {
  gap: 0.35rem;
  animation: entree-acte-entrer 0.7s cubic-bezier(0.16, 1, 0.3, 1) 2.95s both;
}

@keyframes entree-acte-entrer {
  from { opacity: 0; transform: translateY(1.4rem) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Le QR est un vrai code, dessiné par le serveur. Ses modules se révèlent du
   haut vers le bas, comme s'il s'imprimait. */
.entree__qr {
  position: relative;
  display: block;
  width: clamp(4.2rem, 16vw, 6.4rem);
  margin-bottom: 0.9rem;
  clip-path: inset(0 0 100% 0);
  animation: entree-qr 0.75s cubic-bezier(0.16, 1, 0.3, 1) 2.95s both;
}

.entree__qr svg {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes entree-qr {
  from { clip-path: inset(0 0 100% 0); opacity: 0.2; }
  to   { clip-path: inset(0 0 -6% 0); opacity: 1; }
}

/* La ligne de balayage : deux passages, comme un lecteur qui cherche puis
   confirme. C'est le geste que la plateforme fait toute la journée. */
.entree__balayage {
  position: absolute;
  left: -6%;
  right: -6%;
  height: 18%;
  top: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  mix-blend-mode: screen;
  opacity: 0;
  animation: entree-balayage 1.15s cubic-bezier(0.45, 0, 0.55, 1) 3.35s 2 both;
}

@keyframes entree-balayage {
  0%   { opacity: 0; transform: translateY(-40%); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(460%); }
}

.entree__produit {
  font-size: clamp(2.4rem, 11vw, 5.8rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: #ffffff;
  animation: entree-monte 0.75s cubic-bezier(0.16, 1, 0.3, 1) 3.55s both;
}

/* Un reflet traverse le mot une fois, de gauche à droite.
   Sous condition : cet effet rend le texte transparent et le fait porter par
   un dégradé découpé à la forme des lettres. Là où le découpage n'est pas
   pris en charge, le mot disparaîtrait purement et simplement — on ne
   l'applique donc que si le navigateur sait le faire. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .entree__produit {
    background: linear-gradient(100deg,
      #ffffff 0%, #ffffff 38%,
      #b9ffd8 47%, #ffffff 56%, #ffffff 100%);
    background-size: 280% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation:
      entree-monte 0.75s cubic-bezier(0.16, 1, 0.3, 1) 3.55s both,
      entree-reflet 1.5s ease-out 3.95s both;
  }
}

@keyframes entree-reflet {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* La signature revient à Inter : elle est en minuscules dans la source, ce
   qu'Apple Tea ne sait pas rendre. */
.entree__baseline {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.74rem, 2.4vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  animation: entree-monte 0.7s cubic-bezier(0.16, 1, 0.3, 1) 3.95s both;
}

@keyframes entree-monte {
  from { opacity: 0; transform: translateY(1em); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Partenariat
   -------------------------------------------------------------------------- */

.entree__partenaire {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.4rem, 5vh, 2.8rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  text-align: center;
  animation: entree-monte 0.8s cubic-bezier(0.16, 1, 0.3, 1) 4.25s both;
}

.entree__partenaire-mention {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.58rem, 1.9vw, 0.7rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.entree__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 4vw, 2rem);
}

/* Les deux logos sont reglés séparément, pas à hauteur égale : l'un est
   vertical et étroit, l'autre large et trapu. À hauteur identique, Agrotech
   écraserait Bibl'ESSA. On équilibre les masses, pas les mesures. */
.entree__logo {
  display: block;
  width: auto;
  opacity: 0;
  animation: entree-logo 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Seuil mesuré : en dessous d'environ 46 px de haut, le trait fin du logo
   Agrotech et le mot qu'il contient se referment en une tache. Ces hauteurs
   partent de là, et Bibl'ESSA suit dans le même rapport. */
.entree__logo--biblessa {
  height: clamp(3.5rem, 10vw, 4.4rem);
  animation-delay: 4.5s;
}

/* 0,74 fois la hauteur de Bibl'ESSA : la puce d'Agrotech est large et
   basse, l'autre etroit et haut. A hauteur egale, le premier occupait
   les deux tiers de surface en plus — l'oeil compare des masses. */
.entree__logo--agrotech {
  height: clamp(2.6rem, 7.4vw, 3.25rem);
  animation-delay: 4.62s;
}

@keyframes entree-logo {
  from { opacity: 0; transform: translateY(0.7rem) scale(0.94); }
  to   { opacity: 0.95; transform: none; }
}

/* Un filet se trace entre les deux logos, du centre vers le haut et le bas. */
.entree__separateur {
  width: 1px;
  height: clamp(2.4rem, 7.4vw, 3.2rem);
  background: rgba(255, 255, 255, 0.42);
  transform: scaleY(0);
  animation: entree-separateur 0.55s cubic-bezier(0.16, 1, 0.3, 1) 4.72s both;
}

/* La hauteur est fixe et c'est l'echelle qui varie : animer height aurait
   force un recalcul de la mise en page a chacune des trente-trois images. */
@keyframes entree-separateur {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Échappatoire
   -------------------------------------------------------------------------- */

.entree__passer {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 4;
  padding: 0.55rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.26);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  animation: entree-monte 0.5s ease 0.9s both;
  transition: background 0.16s ease, transform 0.2s ease;
}

.entree__passer:hover { background: rgba(0, 0, 0, 0.42); }
.entree__passer:active { transform: scale(0.94); }
.entree__passer:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Économie de mouvement

   La séquence n'est pas supprimée mais réduite à son information : les deux
   temps s'affichent côte à côte, immobiles, et l'écran se retire vite.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .entree__affiche,
  .entree__vague,
  .entree__lettre,
  .entree__epi,
  .entree__agronomie,
  .entree__dates,
  .entree__qr,
  .entree__produit,
  .entree__baseline,
  .entree__partenaire,
  .entree__logo,
  .entree__separateur,
  .entree__passer {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
  }

  .entree__balayage { display: none; }
  .entree__produit { background: none; -webkit-text-fill-color: #ffffff; color: #ffffff; }
  .entree__logo { opacity: 0.95; }
  .entree__separateur { height: 2.2rem; opacity: 1; }

  .entree__acte { grid-area: auto; }
  .entree__acte--evenement { animation: none; opacity: 1; transform: none; filter: none; }
  .entree__acte--produit { margin-top: 1.6rem; }

  .entree.est-sortie { animation: entree-fondu 0.2s linear forwards; }
}

@keyframes entree-fondu { to { opacity: 0; } }

/* --------------------------------------------------------------------------
   Écrans étroits
   -------------------------------------------------------------------------- */
@media (orientation: portrait) {
  .entree__affiche { object-position: 50% 40%; }
  .entree__vague { transform: translateX(50%); }
  .entree__vague--fond { transform: translateX(44%); }

  @keyframes entree-vague {
    from { transform: translateX(104%); }
    to   { transform: translateX(50%); }
  }
  @keyframes entree-vague-fond {
    from { transform: translateX(112%); }
    to   { transform: translateX(44%); }
  }
}

@media (max-height: 520px) {
  /* Téléphone couché : on retire le QR plutôt que de tout comprimer, et les
     logos passent en ligne avec la mention. */
  .entree__qr { display: none; }
  .entree__partenaire {
    bottom: 0.7rem;
    flex-direction: row;
    gap: 0.9rem;
  }
  .entree__logo--biblessa { height: 3.2rem; }
  .entree__logo--agrotech { height: 2.4rem; }
  .entree__separateur { height: 1.3rem; }
}

@media print {
  .entree { display: none !important; }
}