/* Graphen Studio — Accès clients
   Le formulaire remplace la partie gauche du panneau de menu (onglets, contact,
   mentions) ; les deux images de droite restent en place, et la page derrière
   n'est pas quittée. Puis la scène de connexion : fondu au blanc, marque du
   studio « X » logo du client, et enfin l'aperçu du site en pleine page. */

.menu.is-login .menu__nav,
.menu.is-login .menu__contact,
.menu.is-login .menu__client { opacity: 0; pointer-events: none; }

.menu__nav, .menu__contact, .menu__client { transition: opacity .3s var(--ease); }

/* ---------- Le formulaire ---------- */

/* Le formulaire occupe tout le panneau, et ses blocs se posent aux places
   qu'occupent les éléments du menu normal : l'intitulé là où est l'onglet
   « Accès Clients », les boutons là où sont les onglets de navigation. */
.acces {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* Le formulaire s'étend sur tout le panneau, bouton Fermer compris : sans
     ceci, sa surface vide avalerait le clic destiné à ce bouton. Seuls ses
     blocs reçoivent la souris ; entre eux, le panneau reste atteignable. */
  pointer-events: none;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.acces > *, .acces__haut > * { pointer-events: auto; }
.menu.is-login .acces { opacity: 1; visibility: visible; transition-delay: .1s, 0s; }

/* Même place que .menu__client : en bas, juste à gauche des images. */
.acces__title {
  position: absolute;
  right: calc(2 * var(--menu-img-w) + 20px);
  bottom: 25px;
  color: var(--grey);
  white-space: nowrap;
}

/* Les deux champs tiennent la rangée du milieu, entre deux rangées égales : ils
   restent au centre exact du panneau, et ni le message d'erreur qui s'affiche
   au-dessus ni le bloc d'aide qui s'ouvre en dessous ne les déplacent. */
.acces__haut {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  right: calc(2 * var(--menu-img-w) + 40px);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: start;
  gap: 14px;
  /* Il court sur toute la hauteur du panneau, bouton Fermer compris : comme le
     formulaire, il laisse passer la souris et ne la rend qu'à ses blocs. */
  pointer-events: none;
}

.acces__mots { align-self: end; display: flex; flex-direction: column; gap: 4px; }
.acces__qui { color: var(--grey); }
.acces__error { color: var(--ink); }

.acces__fields { display: flex; gap: 20px; width: 100%; max-width: 560px; }
.acces__field { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; }
.acces__field label { color: var(--grey); }

.acces__field input {
  width: 100%;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--grey-2);
  border-radius: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink);
  transition: border-color .25s var(--ease);
}
.acces__field input:focus { outline: none; border-bottom-color: var(--ink); }
.acces__field input::placeholder { color: var(--grey-2); }

/* Même place que .menu__nav : en bas à gauche, là où sont les onglets. */
.acces__actions {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.acces__forgot .roll { --c1: var(--grey); --c2: var(--ink); }

/* Session déjà ouverte : le cookie du portail vaut douze heures, le panneau
   propose donc d'ouvrir le site au lieu de redemander les identifiants. */
.acces__qui,
.acces__actions[data-actions="connecte"] { display: none; }
.acces.is-connecte .acces__qui { display: block; }
.acces.is-connecte .acces__actions[data-actions="connecte"] { display: flex; }
.acces.is-connecte .acces__fields,
.acces.is-connecte .acces__help,
.acces.is-connecte .acces__actions[data-actions="connexion"] { display: none; }

/* ---------- La carte du client ----------
   Elle prend la place exacte des deux images du menu, et montre le média du
   bandeau du site démo — l'image ou le film seuls, sans l'interface du site. */

.acces-vitre {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(2 * var(--menu-img-w));
  overflow: hidden;
  background: var(--line);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
/* Sans média connu pour ce client, la carte reste absente et les deux images
   du menu gardent leur place. */
.menu.is-login.is-connecte.is-vitre .acces-vitre { opacity: 1; visibility: visible; transition-delay: .1s, 0s; }
.menu.is-login.is-connecte.is-vitre .menu__imgs { opacity: 0; }
.menu__imgs { transition: opacity .3s var(--ease); }

.acces-vitre__image,
.acces-vitre__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Boréal passe son film en noir et blanc sur son propre site : la carte le
   montre tel qu'il s'y voit. */
.acces-vitre[data-gris] > * { filter: grayscale(1) contrast(1.04); }

/* Trois lignes, pas quatre : la phrase tient d'un trait, et le bloc s'arrête
   au-dessus des boutons du bas au lieu de venir les toucher. */
.acces__help {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 48ch;
  color: var(--grey);
}
.acces__help a { color: var(--ink); }

/* ---------- La scène de connexion ---------- */

html.acces-ouvert { overflow: hidden; }

.acces-scene {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #fff;
  opacity: 0;
  transition: opacity .5s var(--ease-page);
}
.acces-scene.is-blanc { opacity: 1; }

.acces-scene__marque {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 120px;
  opacity: 0;
  /* Décoratif : sans ceci, le bloc reste étendu sur tout l'écran une fois
     effacé et continue d'intercepter la souris. */
  pointer-events: none;
  transition: opacity .6s var(--ease-page);
}
.acces-scene.is-marque .acces-scene__marque { opacity: 1; }

.acces-scene__marque .wordmark { font-size: 72px; line-height: 1; }

.acces-scene__x { width: 64px; height: 92px; overflow: visible; }
.acces-scene__x-plein { fill: var(--ink); }
.acces-scene__x-filet {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.acces-scene__client { width: auto; max-width: 300px; max-height: 108px; object-fit: contain; }

/* ---------- L'aperçu du site client ----------
   Il occupe la page, sauf un rail à gauche large comme le bouton Menu : de quoi
   dérouler l'en-tête de Graphen et revenir à l'accueil par le cube. */

.acces-scene { --rail: 64px; }

/* Largeur explicite : une iframe est un élément remplacé, `width: auto` lui
   rend sa largeur intrinsèque de 300 px au lieu de l'étirer jusqu'au bord. */
.acces-scene__site {
  position: absolute;
  top: 0;
  left: var(--rail);
  width: calc(100% - var(--rail));
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity .7s var(--ease-page);
}
.acces-scene.is-site .acces-scene__site { opacity: 1; }

/* Centré dans le rail, et non calé à 10 px comme le bouton Menu : le cube est
   un signe, il se pose au milieu de sa colonne. */
.acces-scene__cube {
  position: fixed;
  left: 0;
  bottom: 20px;
  z-index: 45;
  display: flex;
  justify-content: center;
  width: var(--rail);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease);
}
.acces-scene.is-site .acces-scene__cube { opacity: 1; visibility: visible; }

/* La scène passe sous le bouton Menu et sous le panneau du menu (z-index 50),
   pour que l'en-tête reste déroulable par-dessus l'aperçu. Le bouton revient
   dans le rail à toutes les largeurs : sous 1200 px il file à droite, où il se
   retrouverait en noir sur le site du client. */
html.acces-ouvert .menu-btn { z-index: 45; left: 10px; right: auto; }

/* ================= Tablette et mobile ================= */

@media (max-width: 1199px) {
  .acces {
    position: static;
    padding: 0 10px;
    gap: 16px;
  }
  .acces__fields { flex-direction: column; gap: 14px; max-width: none; }
  /* Le panneau passe en grille plein écran : le formulaire prend la place
     des onglets (2e rangée), les images restent en dessous. */
  .menu.is-login .menu__nav,
  .menu.is-login .menu__contact,
  .menu.is-login .menu__client { display: none; }
  .menu.is-login .acces { grid-row: 2; align-self: start; }

  /* Le panneau passe en grille plein écran : la carte du client n'y a pas de
     place réservée, les deux images gardent la leur. */
  .acces-vitre { display: none; }
  .menu.is-login.is-connecte .menu__imgs { opacity: 1; }

  .acces__title, .acces__haut, .acces__actions { position: static; }
  .acces__haut { display: flex; flex-direction: column; align-items: flex-start; }
  .acces__mots, .acces__help { align-self: start; }
  .acces__actions { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .acces, .acces-scene, .acces-scene__marque, .acces-scene__site { transition: none; }
}