/* DovahCorp V5 — connexion : ouverture HUD et « signature DC ».
   Le décor (cadre à angles diagonaux, ligne vitrée, anneau, deux parties du monogramme officiel) est SÉPARÉ du
   formulaire : aucun champ, message ou focus n'est découpé, recouvert ni incliné. Fond : constellation d'origine
   (styles.css), sans rayure ni faisceau ajouté.
   Séquence (v5-auth.js pose data-phase sur la scène) :
     0  constellation seule
     1  le monogramme s'assemble au centre de la zone visible
     2  D part à gauche, C à droite, sur le même axe ; une fine surface vitrée s'étire entre eux
     3  le panneau se déploie depuis cet axe, vers le haut ET vers le bas, avec une légère profondeur 3D
     4  le formulaire apparaît progressivement
     done  repos (inclinaison discrète au pointeur) ; out = réunion du logo après une connexion confirmée.
   Mouvement réduit : repos immédiat, aucune inclinaison. */

body.v5-auth {
  --cut: 40px;                                   /* angles diagonaux du cadre */
  --dc-w: 124px;                                 /* largeur d'une image (D ou C) au repos */
  --dc-gap: 20px;                                /* écart entre le panneau et chaque lettre */
  --dc-big: 1.4;                                 /* taille du logo assemblé */
  --side: calc(var(--dc-gap) + var(--dc-w) * 0.52 + 2px);   /* la tête d'aigle du C va jusqu'au bord de son image */
  padding: max(84px, env(safe-area-inset-top)) var(--side) max(84px, env(safe-area-inset-bottom));
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
}
body.v5-auth #bg { transform: translate3d(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -5px), 0) scale(1.02); }

/* Le panneau seul est dans le flux : la marque et le retour au site sont posés au-dessus et en dessous, pour que le
   centre du panneau soit le centre de la zone visible quand il y tient. */
.v5-auth .auth-shell { position: relative; width: min(460px, 100%); }
.v5-auth .brand { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 26px; font-size: 1.05rem;
  transition: opacity 500ms ease; }
.v5-auth .auth-footer { position: absolute; left: 0; right: 0; top: 100%; margin: 24px 0 0; transition: opacity 500ms ease; }
.v5-auth .auth-footer a, .v5-auth .auth-links a { color: var(--v5-cyan); }

/* ---------------------------------------------------------------------------------------------- Scène */
.v5-auth-stage { --axis: 50%; position: relative; isolation: isolate; perspective: 1300px; }
.v5-auth-tilt {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
}
/* Cadre décoratif : liseré clair (couche extérieure) + verre fumé léger (couche intérieure), mêmes angles. */
.v5-auth-frame {
  position: absolute; inset: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(140deg, rgba(150, 215, 255, 0.5), rgba(112, 128, 255, 0.2) 45%, rgba(167, 92, 255, 0.35));
  filter: drop-shadow(0 24px 50px rgba(0, 3, 16, 0.55));
  transform-origin: 50% var(--axis);
  transition: transform 780ms cubic-bezier(0.16, 0.86, 0.22, 1), opacity 320ms ease;
}
.v5-auth-frame::before {
  content: ""; position: absolute; inset: 1px;
  clip-path: polygon(calc(var(--cut) - 0.4px) 0, 100% 0, 100% calc(100% - var(--cut) + 0.4px), calc(100% - var(--cut) + 0.4px) 100%, 0 100%, 0 calc(var(--cut) - 0.4px));
  background: linear-gradient(170deg, rgba(14, 22, 42, 0.8), rgba(8, 12, 26, 0.86));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* Anneau : lumière locale du passage connexion → double authentification. */
.v5-auth-ring {
  position: absolute; left: 50%; top: 46%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, transparent 54%, rgba(112, 128, 255, 0.28) 60%, rgba(80, 230, 255, 0.5) 63%, rgba(112, 128, 255, 0.16) 67%, transparent 72%);
}
/* Fine surface vitrée tendue entre D et C, sur l'axe d'ouverture : deux filets lumineux (les futurs bords haut et
   bas du panneau) ; le verre entre eux est la tranche du panneau replié, déjà en place dessous. */
.v5-auth-line {
  position: absolute; z-index: 0; left: calc(var(--dc-gap) * -0.5); right: calc(var(--dc-gap) * -0.5); top: var(--axis); height: 8px; margin-top: -4px;
  border-radius: 3px; pointer-events: none; opacity: 0; transform: scaleX(0);
  background: linear-gradient(180deg, rgba(165, 235, 255, 0.95) 0 2px, rgba(60, 100, 170, 0.22) 2px calc(100% - 2px), rgba(190, 170, 255, 0.9) calc(100% - 2px));
  box-shadow: 0 0 14px rgba(80, 230, 255, 0.4), 0 0 30px rgba(112, 128, 255, 0.22);
  transition: transform 640ms cubic-bezier(0.65, 0, 0.35, 1), opacity 260ms ease;
}

/* Formulaire : net, jamais transformé. */
.v5-auth .auth-card {
  position: relative; z-index: 1; background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 0; padding: 38px 40px 34px; transition: opacity 260ms ease;
}
.v5-auth .auth-title { font-size: 1.85rem; letter-spacing: -0.02em; }
.v5-auth .field input {
  border-radius: 12px; background: rgba(4, 9, 22, 0.66); border: 1px solid rgba(150, 190, 255, 0.22); color: var(--v5-text);
  transition: border-color var(--v5-t-fast) ease, box-shadow var(--v5-t-fast) ease;
}
.v5-auth .field input:focus-visible, .v5-auth .field input:focus {
  outline: 2px solid var(--v5-cyan); outline-offset: 1px; border-color: var(--v5-cyan); box-shadow: 0 0 0 4px rgba(80, 230, 255, 0.12);
}
.v5-auth .btn.primary { width: 100%; min-height: 46px; border-radius: 12px; font-size: 0.98rem; }
.v5-auth .btn.primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.v5-auth .password-toggle:focus-visible { outline: 2px solid var(--v5-cyan); outline-offset: 2px; }
.v5-auth .status-message { border-radius: 12px; }
.v5-auth-stage.is-mfa .v5-auth-invite { display: none; }  /* l'étape MFA ne montre que le code (recommencer reste possible) */
/* Invitation repliée : une ligne discrète sous le formulaire ; dépliée, le formulaire d'invitation complet. */
.v5-auth-invite { margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid var(--v5-stroke); }
.v5-auth-invite > summary {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border-radius: 12px; cursor: pointer; list-style: none;
  color: var(--v5-text-soft); font-size: 0.92rem; font-weight: 600;
}
.v5-auth-invite > summary::-webkit-details-marker { display: none; }
.v5-auth-invite > summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform var(--v5-t-fast) ease; }
.v5-auth-invite[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.v5-auth-invite > summary:hover { color: var(--v5-text); background: rgba(150, 190, 255, 0.06); }
.v5-auth-invite > summary:focus-visible { outline: 2px solid var(--v5-cyan); outline-offset: 2px; }
.v5-auth-invite[open] > summary { color: var(--v5-text); margin-bottom: 6px; }
.v5-auth-invite[open] > :not(summary) { animation: v5-step-enter 300ms var(--v5-ease) both; }

/* ---------------------------------------------------------------------------------------------- Monogramme DC
   Deux images de même cadre (D seul, C seul, découpés du PNG officiel le long de l'arête du cube). Dans l'image,
   le D occupe 0 → 48 % de la largeur, le C 48 → 100 %. Repos : D à gauche du panneau, C à droite, centrés sur l'axe ;
   ils ne sont jamais au-dessus du formulaire. --d-x / --c-x (v5-auth.js) les ramènent au centre pour l'assemblage. */
.v5-dc { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transform: translate3d(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 7px), 0); }
.v5-dc-part {
  position: absolute; top: var(--axis); width: var(--dc-w); height: auto; max-width: none; margin-top: calc(var(--dc-w) * -0.504);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 12px rgba(80, 230, 255, 0.2));
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1), opacity 420ms ease, top 420ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.v5-dc-d { left: calc(var(--dc-gap) * -1 - var(--dc-w) * 0.48); }
.v5-dc-c { left: calc(100% + var(--dc-gap) - var(--dc-w) * 0.48); }

/* ---------------------------------------------------------------------------------------------- Phases */
/* 0 : constellation seule. */
.v5-auth-stage[data-phase="0"] .v5-dc-d { opacity: 0; transform: translateX(calc(var(--d-x, 0px) - 34px)) scale(calc(var(--dc-big) * 0.9)); }
.v5-auth-stage[data-phase="0"] .v5-dc-c { opacity: 0; transform: translateX(calc(var(--c-x, 0px) + 34px)) scale(calc(var(--dc-big) * 0.9)); }
.v5-auth-stage[data-phase="0"] .v5-dc-part { transition: none; }
/* La page démarre en phase 0 (constellation seule, sans image de l'état final). Filet de sécurité : si v5-auth.js ne
   s'exécute pas, le formulaire apparaît quand même après 6 s. */
.v5-auth-stage[data-phase="0"] .auth-card { animation: v5-failsafe 1ms linear 6s forwards; }
@keyframes v5-failsafe { to { opacity: 1; } }
/* 1 : assemblé au centre. */
.v5-auth-stage[data-phase="1"] .v5-dc-d { opacity: 1; transform: translateX(var(--d-x, 0px)) scale(var(--dc-big)); }
.v5-auth-stage[data-phase="1"] .v5-dc-c { opacity: 1; transform: translateX(var(--c-x, 0px)) scale(var(--dc-big)); }
.v5-auth-stage[data-phase="1"] .v5-dc-part { transition: transform 820ms cubic-bezier(0.2, 0.8, 0.25, 1), opacity 620ms ease; }
/* 2 : séparation horizontale (état de repos des lettres) + ligne vitrée. */
.v5-auth-stage[data-phase="2"] .v5-auth-line { opacity: 1; transform: scaleX(1); transition-delay: 120ms; }
/* Panneau replié tant que la ligne n'a pas été tendue. */
.v5-auth-stage:is([data-phase="0"], [data-phase="1"], [data-phase="2"]) .v5-auth-frame { opacity: 0; transform: rotateX(16deg) scaleY(0.012); transition: none; }
.v5-auth-stage[data-phase="2"] .v5-auth-frame { opacity: 1; }
/* 3 : déploiement depuis l'axe, haut et bas à la fois. La ligne se fond dans le panneau. */
.v5-auth-stage:is([data-phase="3"], [data-phase="4"]) .v5-auth-line { opacity: 0; transform: scaleX(1); transition: none; }
/* Formulaire caché jusqu'à la phase 4, puis révélé par blocs. */
.v5-auth-stage:is([data-phase="0"], [data-phase="1"], [data-phase="2"], [data-phase="3"]) .auth-card { opacity: 0; }
.v5-auth-stage[data-phase="4"] .auth-card > * { animation: v5-form-in 520ms cubic-bezier(0.2, 0.8, 0.25, 1) both; }
.v5-auth-stage[data-phase="4"] .auth-card > :nth-child(2) { animation-delay: 60ms; }
.v5-auth-stage[data-phase="4"] .auth-card > :nth-child(3) { animation-delay: 120ms; }
.v5-auth-stage[data-phase="4"] .auth-card > :nth-child(n+4) { animation-delay: 180ms; }
body.v5-auth:has(.v5-auth-stage:not(.is-mfa):is([data-phase="0"], [data-phase="1"], [data-phase="2"], [data-phase="3"])) :is(.brand, .auth-footer) { opacity: 0; }
/* Saut (touche, clic, focus pendant l'ouverture) : repos immédiat. */
.v5-auth-stage.is-skip *, .v5-auth-stage.is-skip *::before { transition: none !important; animation: none !important; }
/* ---------------------------------------------------------------------------------------------- Sortie
   Connexion CONFIRMÉE par le serveur : l'ouverture se joue à l'envers, puis le chargement du tableau de bord.
     out      le formulaire s'efface, le panneau se replie sur son axe et redevient la ligne vitrée
     regroup  la ligne se rétracte pendant que D et C reviennent au centre : le logo se reforme
     load     anneau de chargement 0 → 100 % autour du logo (préchargement réel du tableau de bord)
     final    le logo s'illumine, l'anneau éclate en onde, la scène s'efface ; la page change */
.v5-auth-stage:is([data-phase="out"], [data-phase="regroup"], [data-phase="load"], [data-phase="final"]) .auth-card { opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.v5-auth-stage[data-phase="out"] .v5-auth-frame { transform: rotateX(10deg) scaleY(0.012); transition: transform 560ms cubic-bezier(0.55, 0, 0.75, 0.2) 120ms; }
.v5-auth-stage:is([data-phase="regroup"], [data-phase="load"], [data-phase="final"]) .v5-auth-frame { transform: scaleY(0.012); opacity: 0; transition: opacity 260ms ease; }
.v5-auth-stage[data-phase="out"] .v5-auth-line { opacity: 1; transform: scaleX(1); transition: opacity 200ms ease 520ms; }
.v5-auth-stage[data-phase="regroup"] .v5-auth-line { opacity: 0; transform: scaleX(0); transition: transform 680ms cubic-bezier(0.65, 0, 0.35, 1), opacity 420ms ease 300ms; }
.v5-auth-stage:is([data-phase="regroup"], [data-phase="load"], [data-phase="final"]) .v5-dc-d { transform: translateX(var(--d-x, 0px)) scale(var(--dc-big)); transition: transform 760ms cubic-bezier(0.65, 0, 0.35, 1); animation: none; }
.v5-auth-stage:is([data-phase="regroup"], [data-phase="load"], [data-phase="final"]) .v5-dc-c { transform: translateX(var(--c-x, 0px)) scale(var(--dc-big)); transition: transform 760ms cubic-bezier(0.65, 0, 0.35, 1); animation: none; }
.v5-auth-corner { transition: opacity 200ms ease; }
body.v5-auth:has([data-phase="out"], [data-phase="regroup"], [data-phase="load"], [data-phase="final"]) :is(.brand, .auth-footer) { opacity: 0; }

/* Anneau de chargement, centré sur le logo réassemblé. */
.v5-auth-loader {
  --ring: calc(var(--dc-w) * var(--dc-big) * 1.42);
  position: absolute; z-index: 3; left: 50%; top: var(--axis); width: var(--ring); height: var(--ring);
  margin: calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2); pointer-events: none; opacity: 0; transform: scale(0.82);
  transition: opacity 360ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.25, 1);
}
.v5-auth-loader[hidden] { display: none; }
.v5-auth-loader svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.v5-loader-track { fill: none; stroke: rgba(140, 180, 255, 0.14); stroke-width: 2.5; }
.v5-loader-bar {
  fill: none; stroke: rgb(120, 225, 255); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(80, 230, 255, 0.8)) drop-shadow(0 0 14px rgba(167, 92, 255, 0.45));
}
.v5-auth-pct {
  position: absolute; left: 0; right: 0; top: calc(100% + 14px); text-align: center; font: 600 0.95rem/1 var(--mono, monospace);
  letter-spacing: 0.24em; color: var(--v5-cyan); text-shadow: 0 0 10px rgba(80, 230, 255, 0.5); font-variant-numeric: tabular-nums;
}
.v5-auth-stage:is([data-phase="load"], [data-phase="final"]) .v5-auth-loader { opacity: 1; transform: none; }
/* Pendant le chargement, le logo « respire » plus vite. */
.v5-auth-stage[data-phase="load"] .v5-dc-part { filter: drop-shadow(0 0 16px rgba(120, 210, 255, 0.5)); }

/* Final : éclat du logo, onde de l'anneau, puis fondu de la scène. */
.v5-auth-stage[data-phase="final"] .v5-dc-d { transform: translateX(var(--d-x, 0px)) scale(calc(var(--dc-big) * 1.1)); }
.v5-auth-stage[data-phase="final"] .v5-dc-c { transform: translateX(var(--c-x, 0px)) scale(calc(var(--dc-big) * 1.1)); }
.v5-auth-stage[data-phase="final"] .v5-dc-part { transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 260ms ease;
  filter: brightness(1.55) drop-shadow(0 0 22px rgba(120, 230, 255, 0.95)) drop-shadow(0 0 46px rgba(167, 92, 255, 0.6)); }
.v5-auth-stage[data-phase="final"] .v5-auth-loader { transform: scale(1.7); opacity: 0; transition: transform 620ms cubic-bezier(0.2, 0.8, 0.25, 1) 80ms, opacity 520ms ease 140ms; }
.v5-auth-stage[data-phase="final"] .v5-auth-pct { opacity: 0; transition: opacity 160ms ease; }
.v5-auth-stage[data-phase="final"] { animation: v5-scene-out 360ms ease 420ms both; }
@keyframes v5-scene-out { to { opacity: 0; transform: scale(1.04); } }

@keyframes v5-form-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes v5-step-enter { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes v5-ring { 0% { opacity: 0; transform: scale(0.55); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
/* Passage connexion → double authentification : le panneau se replie sur sa ligne puis se rouvre avec le formulaire du
   code (même langage que l'ouverture). La ligne n'est visible que panneau replié : jamais par-dessus du texte. */
.v5-auth-stage[data-phase="fold"] .auth-card { opacity: 0; transition: opacity 140ms ease; }
.v5-auth-stage[data-phase="fold"] .v5-auth-frame { transform: rotateX(8deg) scaleY(0.012); transition: transform 360ms cubic-bezier(0.65, 0, 0.35, 1); }
.v5-auth-stage[data-phase="fold"] .v5-auth-line { opacity: 1; transform: scaleX(1); transition: opacity 100ms ease 300ms; }
.v5-auth-stage[data-phase="fold"] .v5-auth-corner { opacity: 0; }

/* ---------------------------------------------------------------------------------------------- Petits écrans
   Les lettres restent de part et d'autre du panneau, plus petites ; le panneau garde la largeur restante. */
@media (max-width: 720px) {
  body.v5-auth { --dc-w: 58px; --dc-gap: 7px; --dc-big: 2.1; --cut: 28px; }
  /* En-tête : tient sur une ligne dans le panneau (espacement resserré, trait décoratif masqué). */
  .v5-auth .eyebrow { font-size: 0.7rem; letter-spacing: 0.1em; gap: 0; max-width: 100%; }
  .v5-auth .eyebrow > span:first-child:not([class]) { display: none; }
  .v5-auth .auth-card { padding: 30px 20px 26px; }
  .v5-auth .auth-title { font-size: 1.55rem; }
}
@media (max-width: 360px) {
  body.v5-auth { --dc-w: 46px; --dc-gap: 5px; --dc-big: 2.5; }
  .v5-auth .auth-card { padding: 28px 16px 24px; }
}

/* ---------------------------------------------------------------------------------------------- Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  body.v5-auth #bg, .v5-dc, .v5-auth-tilt { transform: none; }
  .v5-auth-stage *, .v5-auth-stage *::before, .v5-auth .brand, .v5-auth .auth-footer { transition: none !important; animation: none !important; }
}
/* Sans backdrop-filter : verre opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v5-auth-frame::before { background: linear-gradient(170deg, rgba(14, 22, 42, 0.97), rgba(8, 12, 26, 0.98)); }
}

/* ---------------------------------------------------------------------------------------------- Effets HUD
   Arêtes lumineuses qui accompagnent l'ouverture (même courbe que le panneau), crochets d'angle tracés une fois le
   panneau ouvert, lueur lente du monogramme au repos, tremblement bref sur erreur, ligne qui réapparaît au passage
   à la double authentification, en-tête « décodé ». Tous décoratifs ; rien en mouvement réduit. */
.v5-auth-edge {
  position: absolute; height: 10px; opacity: 0; pointer-events: none;
  /* filet lumineux et son halo dans le même élément : rien ne déborde au-delà de ses extrémités */
  background: linear-gradient(180deg, transparent 0, rgba(80, 230, 255, 0.26) 28%, rgba(195, 245, 255, 0.98) 42%,
    rgba(195, 245, 255, 0.98) 58%, rgba(167, 92, 255, 0.26) 72%, transparent 100%);
}
/* Haut : du début de l'angle cassé (gauche) jusqu'au bord droit ; fondu court côté angle. Le resserrement part du
   centre du panneau (même point que la ligne). */
.v5-auth-edge.is-top { top: calc(var(--axis) - 8px); left: var(--cut); right: 0; transform-origin: calc(50% - var(--cut) / 2) 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px); mask-image: linear-gradient(90deg, transparent 0, #000 12px); }
/* Bas : du bord gauche jusqu'au début de l'angle cassé (droite). */
.v5-auth-edge.is-bottom { top: calc(var(--axis) - 2px); left: 0; right: var(--cut); transform-origin: calc(50% + var(--cut) / 2) 50%;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 12px); mask-image: linear-gradient(270deg, transparent 0, #000 12px); }
/* Même courbe que le panneau ; l'animation continue sans coupure de la phase 3 à la phase 4. */
/* Deux mouvements indépendants : resserrement à la largeur exacte (240 ms, avant d'approcher des angles cassés) et
   écartement avec la même courbe que le panneau (780 ms). */
.v5-auth-stage:is([data-phase="3"], [data-phase="4"]) .v5-auth-edge.is-top {
  animation: v5-edge-up 780ms cubic-bezier(0.16, 0.86, 0.22, 1) both, v5-edge-fit 240ms cubic-bezier(0.3, 0.7, 0.4, 1) both, v5-edge-melt 1200ms linear both; }
.v5-auth-stage:is([data-phase="3"], [data-phase="4"]) .v5-auth-edge.is-bottom {
  animation: v5-edge-down 780ms cubic-bezier(0.16, 0.86, 0.22, 1) both, v5-edge-fit 240ms cubic-bezier(0.3, 0.7, 0.4, 1) both, v5-edge-melt 1200ms linear both; }
@keyframes v5-edge-up { from { translate: 0 0; } to { translate: 0 calc(4px - var(--axis)); } }
@keyframes v5-edge-down { from { translate: 0 0; } to { translate: 0 calc(var(--h, 0px) - var(--axis) - 4px); } }
@keyframes v5-edge-fit { from { scale: var(--line-k, 1) 1; } to { scale: 1 1; } }
/* Pleine intensité dès le dédoublement (aucun creux), puis fusion lente dans la bordure du panneau. */
@keyframes v5-edge-melt { 0%, 62% { opacity: 1; } 100% { opacity: 0; } }

.v5-auth-corner { position: absolute; width: 26px; height: 26px; opacity: 0; pointer-events: none; border: 0 solid rgba(140, 230, 255, 0.9);
  filter: drop-shadow(0 0 6px rgba(80, 230, 255, 0.6)); }
.v5-auth-corner.is-tr { top: -8px; right: -8px; border-top-width: 2px; border-right-width: 2px; transform-origin: 100% 0; }
.v5-auth-corner.is-bl { bottom: -8px; left: -8px; border-bottom-width: 2px; border-left-width: 2px; border-color: rgba(190, 150, 255, 0.9); transform-origin: 0 100%;
  filter: drop-shadow(0 0 6px rgba(167, 92, 255, 0.6)); }
.v5-auth-stage:is([data-phase="4"], [data-phase="done"]) .v5-auth-corner { opacity: 0.85; }
.v5-auth-stage[data-phase="4"] .v5-auth-corner { animation: v5-corner 560ms cubic-bezier(0.2, 0.8, 0.25, 1) both; }
@keyframes v5-corner { from { opacity: 0; transform: scale(0.15); } 60% { opacity: 1; } to { opacity: 0.85; transform: none; } }

.v5-auth-stage[data-phase="done"] .v5-dc-part { animation: v5-breathe 5.6s ease-in-out infinite; }
.v5-auth-stage[data-phase="done"] .v5-dc-c { animation-delay: -2.8s; }
@keyframes v5-breathe {
  0%, 100% { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 10px rgba(80, 230, 255, 0.16)); }
  50% { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 20px rgba(120, 200, 255, 0.42)); }
}

.v5-auth-stage.is-error .v5-auth-tilt, .v5-auth-stage.is-error .auth-card, .v5-auth-stage.is-error .v5-dc { animation: v5-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes v5-shake { 15% { transform: translateX(-7px); } 35% { transform: translateX(6px); } 55% { transform: translateX(-4px); } 75% { transform: translateX(2px); } 100% { transform: none; } }


/* En-tête décodé : le vrai texte reste lu par les technologies d'assistance (v5-sr), la version animée est masquée. */
.v5-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* styles.css dessine tout « .eyebrow span » comme le trait décoratif (32 × 1 px, dégradé) : ces deux spans en sont exclus. */
.eyebrow .v5-decode { display: inline; width: auto; height: auto; background: none; flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eyebrow .v5-sr { display: block; background: none; }

@media (prefers-reduced-motion: reduce) {
  .v5-auth-edge { display: none; }
  .v5-auth-stage .v5-auth-corner { opacity: 0.85; }
}

/* Pages secondaires plus larges (acceptation des documents). */
.v5-auth .auth-shell.auth-shell-wide { width: min(560px, 100%); }