/* Ce que Claude fournissait à la page, et l'écran de connexion */
:root {
  --cds-dur-slow: .2s;
  --font-anthropic-sans: system-ui, sans-serif;
  --acces-fond: #fff6ec; --acces-carte: #ffffff; --acces-texte: #25303a; --acces-doux: #5a6771; --acces-filet: #f0e0cc; --acces-action: #0b6e8f; --acces-lien: #0b6e8f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --acces-fond: #11201f; --acces-carte: #19302e; --acces-texte: #eaf4f2; --acces-doux: #9db8b4; --acces-filet: #2c4f4a; --acces-lien: #5cc3e6;
    color-scheme: dark;
  }
}
html, body { background: var(--acces-fond); }
body { margin: 0; color: var(--acces-texte); font-family: Inter, var(--font-anthropic-sans); }
[hidden] { display: none !important; }

.acces { display: flex; flex-direction: column; align-items: center; gap: 1rem; min-height: 100vh; box-sizing: border-box; padding-bottom: 3rem; }
.acces-photo { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; box-sizing: border-box; min-height: 15rem; padding: 1.25rem clamp(1rem, 2.5vw, 2.5rem) 4rem; background-color: #0e6f78; background-image: linear-gradient(to right, rgb(5 25 28 / .78), rgb(5 25 28 / .35) 42%, rgb(5 25 28 / 0) 68%), var(--mp-photo, linear-gradient(#35b6c0, #0e6f78)); background-size: cover; background-position: 75% 62%; color: #ffffff; }
.acces-marque { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.acces-titre { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; }
.acces-carte { display: flex; flex-direction: column; gap: .875rem; width: min(100% - 2rem, 24rem); box-sizing: border-box; margin-top: -3rem; padding: 1.25rem; border: 1px solid var(--acces-filet); border-radius: 1rem; background: var(--acces-carte); }
.acces-carte h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.acces-carte label { display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; font-weight: 600; }
.acces-carte input { box-sizing: border-box; width: 100%; padding: .55rem .7rem; font: inherit; font-weight: 400; font-size: 1rem; color: var(--acces-texte); background: transparent; border: 1px solid color-mix(in srgb, var(--acces-texte) 30%, transparent); border-radius: .625rem; }
.acces-bouton { padding: .6rem .9rem; font: inherit; font-weight: 700; color: #ffffff; background: var(--acces-action); border: 0; border-radius: .625rem; cursor: pointer; }
.acces-bouton:disabled { opacity: .6; cursor: default; }
.acces-lien { align-self: center; padding: 0; font: inherit; font-size: .875rem; color: var(--acces-lien); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acces-message { width: min(100% - 2rem, 24rem); margin: 0; font-size: .875rem; font-weight: 600; text-align: center; }
.acces input:focus-visible, .acces button:focus-visible { outline: 2px solid var(--acces-lien); outline-offset: 2px; }

#deconnexion { position: absolute; top: 1rem; right: clamp(1rem, 2.5cqw, 2.5rem); padding: .35rem .75rem; font: inherit; font-size: .875rem; font-weight: 600; color: #ffffff; background: rgb(5 25 28 / .55); border: 1px solid rgb(255 255 255 / .5); border-radius: .625rem; cursor: pointer; }
#deconnexion:hover { background: rgb(5 25 28 / .75); }
#deconnexion:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.mp-head { position: relative; }