/* Page de connexion : la carte illustrée est une image ; les vrais champs sont posés exactement sur les
   champs dessinés (positions en % de l'image carte-connexion, 1447 × 1087). */
html, body { margin: 0; min-height: 100%; }
body.page-connexion { color: var(--texte); font-family: var(--police);
  background: #111112 url("/static/img/pierre.webp") 0 0 / 627px repeat; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Halo chaud derrière la carte et bords assombris, sur le fond de pierre du site */
.scene { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 45% 55% at 50% 52%, rgba(255, 150, 60, .16), transparent 70%),
              radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .65) 100%); }
.scene-cadre { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
/* Taille : environ 1/3 de l'écran pour le cadre (comme la maquette), jamais plus haut que l'écran */
.carte-connexion { position: relative; flex: none; width: min(60vw, 118vh, 1150px); container-type: inline-size; margin: 0; }
.carte-image { display: block; width: 100%; height: auto; user-select: none; pointer-events: none;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); }

/* Champs */
.champ {
  position: absolute; left: 32.6%; width: 35.9%; height: 4.6%;
  box-sizing: border-box; margin: 0; border: 0; border-radius: .6cqw; background: transparent;
  color: #f6ead2; font: 500 1.75cqw/1 var(--police); padding: 0 1.4cqw 0 4.1cqw; outline: none;
  caret-color: #f3d699;
}
.champ-ident { top: 60.85%; }
.champ-mdp { top: 70.4%; }
.champ::placeholder { color: rgba(242, 232, 214, .35); font-style: italic; }
.champ:focus-visible { box-shadow: 0 0 0 .25cqw #f3d699, 0 0 2cqw rgba(243, 214, 153, .45); }
.champ:-webkit-autofill { -webkit-text-fill-color: #f6ead2; transition: background-color 9999s; }

/* Se souvenir de moi : la case dessinée reçoit une coche */
.souvenir { position: absolute; left: 32.4%; top: 76.2%; width: 15%; height: 2.9%; cursor: pointer; }
.souvenir input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.coche { position: absolute; left: .25cqw; top: .15cqw; width: 1.8cqw; height: 1.8cqw; border-radius: .25cqw; pointer-events: none; }
.souvenir input:checked + .coche::after { content: ""; position: absolute; left: .55cqw; top: .15cqw; width: .55cqw; height: 1.05cqw;
  border: solid #f3d699; border-width: 0 .3cqw .3cqw 0; transform: rotate(45deg); filter: drop-shadow(0 0 .4cqw rgba(243, 214, 153, .8)); }
.souvenir input:focus-visible + .coche { box-shadow: 0 0 0 .25cqw #f3d699; }

/* Bouton dessiné : zone cliquable transparente, lueur au survol */
.entrer { position: absolute; left: 31.2%; top: 81.2%; width: 38.6%; height: 5.6%; border: 0; border-radius: 1.2cqw;
  background: transparent; cursor: pointer; transition: box-shadow .2s, background-color .2s; }
.entrer:hover { background: rgba(255, 214, 150, .10); box-shadow: 0 0 3cqw rgba(255, 170, 80, .45); }
.entrer:active { background: rgba(0, 0, 0, .15); }
.entrer:focus-visible { outline: none; box-shadow: 0 0 0 .3cqw #f3d699, 0 0 3cqw rgba(255, 170, 80, .5); }

.connexion-erreur {
  position: fixed; z-index: 5; top: 1rem; left: 50%; transform: translateX(-50%); margin: 0;
  background: rgba(40, 14, 12, .92); border: 1px solid #b4483f; color: #ffd9d4; border-radius: 6px;
  padding: .6rem 1.1rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); max-width: calc(100vw - 2rem);
}

/* Téléphone / écran étroit : la carte prend toute la largeur (les mèches débordent sur les côtés) */
@media (max-aspect-ratio: 6/5) {
  .carte-connexion { width: min(172vw, 118svh); }
  .champ { font-size: max(16px, 2.3cqw); }
}
@media (prefers-reduced-motion: reduce) { .entrer { transition: none; } }

/* Accès bloqué : champs et bouton inactifs, carte assombrie */
.bloquee .carte-image { filter: grayscale(.55) brightness(.75) drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.bloquee .champ { cursor: not-allowed; background: rgba(0, 0, 0, .35); }
.bloquee .champ::placeholder { color: #ff9b90; font-style: normal; }
.bloquee .entrer, .bloquee .souvenir, .bloquee .souvenir input { cursor: not-allowed; }
.bloquee .entrer:hover { background: transparent; box-shadow: none; }