/* Mise en page : illustration à gauche, formulaire à droite ; sur écran étroit, le formulaire seul
   sous un bandeau d'illustration. Identité Collectys Cash : violet, anthracite, vert-jaune du logo. */
:root {
  --fond: #f6f5f7; --surface: #ffffff; --trait: #d9d6dc;
  --encre: #2c2e3d; --encre-2: #646b82;
  --violet: #660066; --violet-fonce: #4d004d; --sur-violet: #ffffff;
  --jaune: #cccc00;
  --erreur: #a3271c; --erreur-fond: #fbe6e3; --info: #5c4a00; --info-fond: #fbf3cf;
  --texte: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1b1a1f; --surface: #25242b; --trait: #44414b;
    --encre: #eceaf0; --encre-2: #aeabb8;
    --violet: #c77dc7; --violet-fonce: #dba3db; --sur-violet: #25102a;
    --erreur: #f2978c; --erreur-fond: #47201c; --info: #f0de8a; --info-fond: #3d3515;
    color-scheme: dark;
  }
  .logo { filter: brightness(1.6); }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.5 var(--texte); }

.page { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr); min-height: 100%; }
.visuel { background: #f0edf2 url("../images/illustration.svg") center / cover no-repeat; }
.panneau { display: grid; place-items: center; padding: 40px 24px; background: var(--surface); }
.contenu { width: min(100%, 380px); display: flex; flex-direction: column; gap: 16px; }

.logo { width: 190px; height: auto; margin-bottom: 12px; }
h1 { font-size: 30px; line-height: 1.15; margin: 0; padding-bottom: 10px; border-bottom: 3px solid var(--jaune); align-self: flex-start; text-wrap: balance; }
p { margin: 0; }
.intro { color: var(--encre-2); }
.message { border-radius: 8px; padding: 10px 14px; }
.message.erreur { background: var(--erreur-fond); color: var(--erreur); }
.message.info { background: var(--info-fond); color: var(--info); }

.formulaire { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--encre-2); }
input, select, textarea {
  font: 16px var(--texte); color: var(--encre); background: var(--fond);
  border: 1px solid var(--trait); border-radius: 8px; padding: 11px 12px; width: 100%;
}
textarea { resize: vertical; min-height: 110px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .bouton:focus-visible, a:focus-visible, .oeil:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 2px;
}
.code { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }

.avec-oeil { position: relative; display: block; }
.avec-oeil input { padding-right: 46px; }
.oeil {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
  border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--encre-2);
}
/* L'icône est dessinée en CSS : un œil, barré quand le mot de passe est affiché. */
.oeil::before { content: ""; position: absolute; inset: 11px 8px; border: 2px solid currentColor; border-radius: 70% 15%; transform: rotate(45deg) scale(.82); }
.oeil::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: currentColor; }
.oeil[aria-pressed="true"]::after { width: 24px; height: 2px; margin: -1px 0 0 -12px; border-radius: 0; transform: rotate(-45deg); }

.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.bouton {
  font: 600 15px var(--texte); color: var(--sur-violet); background: var(--violet);
  border: 1px solid var(--violet); border-radius: 8px; padding: 11px 20px; cursor: pointer; text-decoration: none;
}
.bouton:hover { background: var(--violet-fonce); border-color: var(--violet-fonce); }
.bouton.discret { color: var(--encre); background: none; border-color: var(--trait); }
.bouton.discret:hover { background: var(--fond); }
.bouton[disabled] { opacity: .6; cursor: default; }
.liens { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 14px; }
a { color: var(--violet); }

/* Champ réservé aux robots : hors de l'écran, hors du parcours au clavier. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .page { grid-template-columns: minmax(0, 1fr); grid-template-rows: 160px auto; }
  .panneau { place-items: start center; padding: 28px 16px 40px; }
}
@media (max-width: 480px) {
  .page { grid-template-rows: 96px auto; }
  h1 { font-size: 26px; }
  .actions .bouton { flex: 1 1 100%; text-align: center; }
  .liens { margin-left: 0; align-items: flex-start; flex-direction: row; gap: 16px; }
}
@media (prefers-reduced-motion: no-preference) { .bouton { transition: background .12s; } }