:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  /* Même noir mat que l'Atelier (10/11) : fond #000, panneau à peine levé, bouton principal clair. */
  --fond: #000000; --panneau: #0b0b0b; --bord: #242424; --bord-fort: #424242; --texte: #f2f2f2; --doux: #aaaaaa; --accent: #f2f2f2; --sur-accent: #080808; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: var(--fond); color: var(--texte); display: grid; place-items: center; }
.telephone-connexion { width: 100%; min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 22px;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
.horloge { text-align: center; }
.marque { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.marque span { font-size: 22px; font-weight: 800; font-style: italic; letter-spacing: .06em; color: var(--texte); margin-right: 6px; text-transform: none; }
#date { margin: 6px 0 0; font-size: 14px; color: var(--doux); }
.connexion { width: min(420px, 100%); padding: 22px 18px; border: 1px solid var(--bord); border-radius: 14px; background: var(--panneau); text-align: center; }
h1 { font-size: 20px; margin: 0 0 6px; font-weight: 700; }
#statut { font-size: 14px; line-height: 1.5; color: var(--doux); margin: 0 0 16px; }
#erreur { color: #ff9b95; line-height: 1.45; font-size: 14px; }
/* Seulement nos boutons : une règle sur « button » étirait le bouton œil de Clerk sur tout le champ du mot de passe. */
.connexion > button { display: block; width: 100%; min-height: 44px; border: 0; border-radius: 9px; font: inherit; font-size: 15px; font-weight: 650; margin-top: 10px; cursor: pointer; background: var(--accent); color: var(--sur-accent); }
.connexion > button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.connexion > button:disabled { opacity: .5; }
#changer-compte { background: transparent; color: var(--doux); font-size: 14px; border: 1px solid var(--bord-fort); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }