/* ================= LA PAGE ACCÈS CLIENT =================

   Le panneau retenu : LA CRAIE. Un rectangle opaque, encre sombre — la
   matière du panneau latéral de l'ancien site, revenue porter le formulaire.
   Aucun verre, aucun flou : c'est la seule page où l'on doit lire et écrire,
   elle prend la matière la plus lisible du système.

   ---- L'ÉCHELLE, ET POURQUOI ELLE EST PETITE ----

   La première version titrait en 34 et saisissait en 21 : les tailles d'un
   panneau ÉDITORIAL, appliquées à un formulaire. Un formulaire n'est pas une
   affiche — personne ne le lit à deux mètres, on a le nez dessus. Tout
   descend donc d'un cran de la suite : titre 21, saisie 16, intro 13,
   étiquettes 11. Le panneau se resserre à 322 (un terme) et son padding
   intérieur reste à 34. Petit, dense, posé — une fiche, pas une pancarte.

   ---- LES CHAMPS ----

   Un filet sous la ligne, comme un cahier ; le champ actif épaissit son
   filet. Les étiquettes sont TOUJOURS visibles — jamais des textes de
   remplacement qui disparaissent à la frappe.

   ---- L'OUBLI ----

   Pas de page dédiée, pas de formulaire de réinitialisation : les
   identifiants sont remis PAR LE STUDIO, donc l'oubli se résout en parlant
   au studio. Le lien « Identifiants oubliés ? » ouvre au survol (et au focus
   clavier) une fiche noire avec le courriel et le téléphone. */

/* Le ciel est posé par ciel.css ; cette couche centre le panneau et laisse
   passer les clics ailleurs (en-tête, barre de chat). */
.acces {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: calc(var(--f-89) + var(--f-34)) var(--menu-inset)
           calc(var(--barre-bas) + var(--barre-hauteur) + var(--f-55));
  pointer-events: none;
}

/* ---- L'ARRIVEE DU PANNEAU ----

   La page s'ouvre sur le ciel seul, puis la fiche se forme dessus. Fondu
   PUR : aucune montee, aucune echelle, aucun flou. Elle nait sur place,
   comme les mots du titre de l'accueil.

   ---- LE PIEGE, ET IL EST GROS ----

   Un `animation-delay` ne marche PAS ici. L'horloge d'une animation CSS part
   de la NAVIGATION, pas du moment ou la page devient visible — et le passage
   natif (ciel.css) garde la nouvelle page cachee derriere l'instantane de
   l'ancienne pendant tout son chargement, puis 520 ms de plus.

   Mesure faite sur cette page, arrivee par un clic depuis /contact/ :

     t=395   la transition demarre (`pagereveal`, viewTransition.ready)
     t=915   la revelation commence   (retard de ::view-transition-new(root))
     t=994   DOMContentLoaded         — la page n'existe que maintenant
     t=2200  la transition se termine

   Un fondu confie a l'horloge du document commencait donc AVANT que la page
   ne soit peinte et se terminait souvent avant qu'on la voie. Au lever du
   voile, la fiche etait deja pleine : elle n'apparaissait pas en fondu, elle
   etait revelee d'un coup. C'est exactement la brutalite qu'on cherchait a
   supprimer.

   ---- CE QU'ON FAIT A LA PLACE ----

   On confie le fondu AU PASSAGE LUI-MEME. `view-transition-name` sort la
   fiche de l'instantane de la page et en fait un element a part entiere de
   la transition, comme le ciel et l'en-tete plus haut. Son horloge devient
   celle de la transition : elle part a la revelation, jamais avant, quel que
   soit le temps de chargement.

   Reste le cas ou il n'y a PAS de transition — adresse tapee, rechargement,
   navigateur sans `@view-transition`. La, un script pose `html.acces-pose` a
   la premiere image peinte (voir acces/index.html) et le fondu se joue en
   CSS, avec exactement les memes chiffres.

   ---- LES CHIFFRES ----

   377 de retard, 987 de duree : 1364 en tout, bien a l'interieur des 1800
   que met le ciel a virer. La fiche commence a se former pendant que le
   contenu precedent finit de s'effacer, et elle est posee avant que le ciel
   n'ait fini son tour. Assez lent pour qu'on VOIE le fondu, assez court pour
   qu'on n'attende pas.

   Une premiere version tenait 1597 avec 610 de retard : mesurable, propre,
   et trop lente a l'usage — on voyait la page rester vide.

   Courbe (0.33, 0, 0.67, 1) et pas celle du site (0.22, 1, 0.36, 1). Cette
   derniere est faite pour du MOUVEMENT : elle place 80 % de sa course dans
   son premier tiers, ce qui donne du ressort a un deplacement mais fait
   CLAQUER une opacite. Ici, sinus adouci aux deux bouts : la valeur monte
   regulierement, sans depart brusque ni arrivee seche. */

.acces-panneau {
  pointer-events: auto;
  width: 100%;
  max-width: var(--f-322, 322px);
  padding: var(--f-34);
  background-color: var(--degrade-craie, #eef0f3);
  border-radius: var(--radius-xs);
  color: #0B1416;
  /* Ce nom sort la fiche de l'instantane de la page et en fait un element a
     part entiere du passage — comme .ciel et .entete dans ciel.css. C'est ce
     qui donne au fondu l'horloge de la TRANSITION au lieu de celle du
     document. */
  view-transition-name: fiche;
}

/* L'ARRIVEE, quand le navigateur sait faire le passage. */
::view-transition-new(fiche) {
  animation-duration: 987ms;
  animation-delay: 377ms;
  animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
}
/* Le groupe doit couvrir retard + duree, sinon il coupe le fondu en route. */
::view-transition-group(fiche) { animation-duration: 1364ms; }

/* LE DEPART, quand on quitte la page. Sans cette regle la fiche s'en irait
   avec le fondu par defaut du navigateur — 250 ms — pendant que tout le reste
   met 760. Elle disparaitrait d'un coup avant les autres. */
::view-transition-old(fiche) {
  animation-duration: 760ms;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

/* ---- ET SANS PASSAGE : adresse tapee, rechargement, vieux navigateur ----
   `acces-attend` est posee avant la premiere image, `acces-pose` a la
   premiere image peinte. Sans JavaScript, ni l'une ni l'autre n'existe et la
   fiche est simplement la, tout de suite. */
html.acces-attend .acces-panneau { opacity: 0; }
html.acces-pose .acces-panneau {
  animation: paraitre 987ms cubic-bezier(0.33, 0, 0.67, 1) 377ms both;
}

.acces-titre {
  margin: 0 0 var(--f-5);
  min-height: 0;
  font-size: var(--f-21);
  line-height: var(--l-29, 29px);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-snug);
  color: #0B1416;
}
.acces-intro {
  margin: 0 0 var(--f-29, 29px);
  font-size: var(--text-sm);
  line-height: var(--l-18);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-normal);
  color: rgba(11, 20, 22, 0.55);
}

.acces-champ { display: grid; gap: var(--f-3); margin-bottom: var(--f-21); }
.acces-champ label {
  font-size: 11px;
  line-height: var(--l-18);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(11, 20, 22, 0.5);
}
.acces-champ input {
  width: 100%;
  padding: var(--f-5) 0;
  font-family: inherit;
  font-size: 16px;             /* 16 et pas moins : sous 16, iOS zoome la page à la saisie */
  line-height: var(--l-24, 24px);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-normal);
  color: #0B1416;
  background: none;
  border: 0;
  border-bottom: var(--border-hair) solid rgba(11, 20, 22, 0.25);
  border-radius: 0;
  transition: border-color 233ms;
}
.acces-champ input:focus {
  outline: none;
  border-bottom-color: #0B1416;
}
/* Le remplissage automatique de Chrome repeint le fond en jaune. L'ombre
   interne géante est le seul moyen de le neutraliser — background-color est
   ignoré dans cet état. Ici elle est CRAIE, pas transparente : le panneau est
   opaque. */
.acces-champ input:-webkit-autofill,
.acces-champ input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0B1416;
  -webkit-box-shadow: 0 0 0 1000px var(--degrade-craie, #eef0f3) inset;
}

.acces-envoi {
  width: 100%;
  margin-top: var(--f-8);
  padding: var(--f-8) var(--f-21);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: var(--l-18);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #fff;
  background-color: #000;
  border: var(--border-hair) solid #000;
  border-radius: var(--radius-xs);
  transition: background-color 233ms, color 233ms;
}
/* L'INVERSION, comme partout sur le site. */
.acces-envoi:hover,
.acces-envoi:focus-visible {
  background-color: var(--degrade-craie, #eef0f3);
  color: #000;
  outline: none;
}

/* ---- L'OUBLI ---- */
.acces-oubli {
  position: relative;
  display: inline-block;
  margin-top: var(--f-13);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-light);
  color: rgba(11, 20, 22, 0.55);
  cursor: pointer;
}
.acces-oubli > span {
  border-bottom: var(--border-hair) solid rgba(11, 20, 22, 0.3);
  transition: color 233ms, border-color 233ms;
}
.acces-oubli:hover > span,
.acces-oubli:focus-within > span { color: #0B1416; border-color: #0B1416; }

.acces-fiche {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--f-8));
  width: max-content;
  max-width: min(377px, 84vw);
  padding: var(--f-13) var(--f-21);
  background: #000;
  color: #fff;
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-light);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--f-5));
  transition: opacity 233ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 233ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 233ms;
}
/* Le pont invisible entre le lien et la fiche : sans lui, la souris tombe
   dans le vide de 8px et la fiche se ferme en route. */
.acces-fiche::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: var(--f-8);
}
.acces-oubli:hover .acces-fiche,
.acces-oubli:focus-within .acces-fiche {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.acces-fiche b {
  display: block;
  margin-bottom: var(--f-5);
  font-weight: var(--fw-light);
  color: rgba(255, 255, 255, 0.6);
}
.acces-fiche a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.acces-fiche a:hover,
.acces-fiche a:focus-visible { text-decoration: underline; outline: none; }

@media (max-width: 610px) {
  .acces-panneau { padding: var(--f-21); }
}

@media (prefers-reduced-motion: reduce) {
  .acces-champ input,
  .acces-envoi,
  .acces-oubli > span,
  .acces-fiche { transition: none; }
  /* Pas d'entree non plus : la fiche est la, tout de suite. `animation: none`
     et non un retard a zero — a zero, le fondu se joue quand meme, en
     accelere. Et on releve l'opacite, sinon la classe d'attente la laisse
     invisible pour toujours. */
  html.acces-attend .acces-panneau { opacity: 1; }
  html.acces-pose .acces-panneau { animation: none; }
}