/* Page de connexion (maquette Claude Design) : le fennec endormi en plein écran, « CAN » et le mot de passe dans un
   panneau à droite (en dessous sur téléphone). Aucune ressource externe : la CSP n'autorise que 'self'.
   États du <main> : .dort (respiration lente de l'image), .erreur (secousse, champ rouge), .reveille (zoom doux). */
:root{
  --fond:#EAD5B9; --encre:#2A1E16; --muet:#4E3D2E; --filet:#7C6446; --champ:rgba(252,246,238,.9);
  --bouton:#33241B; --bouton-texte:#FBF4EA; --bouton-survol:#7A3A18; --rouge:#9E2418;
  --ombre:rgba(80,52,30,.10); --ombre-bouton:rgba(51,36,27,.22); --acc:#15803D;
}
@media (prefers-color-scheme:dark){:root{
  --fond:#1C1510; --encre:#F3E9DC; --muet:#D8C7B2; --filet:#8C7455; --champ:rgba(36,28,22,.88);
  --bouton:#F3E9DC; --bouton-texte:#1C1510; --bouton-survol:#E2A878; --rouge:#F28B7D;
  --ombre:rgba(0,0,0,.35); --ombre-bouton:rgba(0,0,0,.4); --acc:#22A55B;
}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--fond);color:var(--encre);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
main{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden}

.visuel{position:absolute;inset:0;overflow:hidden}
.visuel img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 70%;transform-origin:32% 62%;transition:transform 1.6s cubic-bezier(.2,.8,.2,1),filter 1.6s}
.dort .visuel img{animation:respire 5s ease-in-out infinite}
.reveille .visuel img{transform:scale(1.06);filter:brightness(1.06) saturate(1.08)}
@keyframes respire{0%,100%{transform:scale(1)}50%{transform:scale(1.008)}}

.panneau{position:relative;margin-left:max(66%,calc(100% - 420px));width:28%;min-width:320px;min-height:100vh;min-height:100dvh;padding:48px 0;display:flex;flex-direction:column;justify-content:center}
.bloc{display:flex;flex-direction:column;gap:16px;max-width:420px}
.marque{margin:0 0 8px;font:800 52px/1 ui-serif,"New York",Georgia,serif;letter-spacing:.06em;color:var(--acc)}
form{display:flex;flex-direction:column;gap:14px}
label{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muet)}
input{height:60px;width:100%;padding:0 18px;font:inherit;font-size:18px;color:var(--encre);background:var(--champ);border:1.5px solid var(--filet);border-radius:14px;outline:2px solid transparent;box-shadow:0 6px 18px var(--ombre);transition:border-color .2s,box-shadow .2s}
input[type=password]{letter-spacing:.2em}
input:focus-visible{border-color:var(--encre);outline:3px solid var(--encre);outline-offset:2px}
.erreur input{border-color:var(--rouge)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aide{font:inherit;font-weight:400}
button{height:60px;border:2px solid transparent;border-radius:14px;background:var(--bouton);color:var(--bouton-texte);font:inherit;font-size:18px;font-weight:600;letter-spacing:.03em;cursor:pointer;box-shadow:0 8px 20px var(--ombre-bouton);transition:background .2s,opacity .2s}
button:hover:not(:disabled){background:var(--bouton-survol)}
button:focus-visible{outline:3px solid var(--bouton-survol);outline-offset:3px}
button:disabled{opacity:.5;cursor:default}
.msg{margin:0;min-height:1.5em;font-size:16px;color:var(--encre)}
.erreur .msg{color:var(--rouge)}
.aide{margin:0;font-size:14px;color:var(--muet)}
[hidden]{display:none!important}

.erreur .bloc{animation:sursaut .42s}
@keyframes sursaut{25%{transform:translateX(-8px)}55%{transform:translateX(7px)}80%{transform:translateX(-3px)}}

@media (max-width:1000px){
  .visuel{position:relative;inset:auto;height:34vh;min-height:180px}
  .visuel img{object-position:32% 62%}
  .panneau{margin:0;width:auto;min-width:0;min-height:0;padding:28px 24px 48px}
}
@media (prefers-reduced-motion:reduce){.visuel img,.dort .visuel img,.erreur .bloc{animation:none;transition:none}}