/* Le Chai — connexion.css · page de connexion (serveur/porte.py). Mêmes jetons que l'outil (style.css, theme-clair.css) :
   papier, encre brune, or foncé, Bodoni pour le titre, Quicksand pour le reste.
   Grand visuel du chai (rendu 3D figé, puis photo, en fondu lent) et carte de connexion en verre dépoli.
   Téléphone d'abord : visuel en tête, carte pleine largeur, champs de 16 px (Safari ne zoome pas), cibles de 48 px.
   Aucun style en ligne (CSP : style-src 'self'), aucune ressource externe, mouvement coupé si l'appareil le demande. */
.cx {
  --cx-nuit: #140d08;                 /* brun très sombre sous les visuels */
  --cx-creme: #f7efe3;                /* texte posé sur le visuel, quel que soit le thème */
  --cx-creme-2: rgba(247, 239, 227, .84);
  --cx-or: #e0a26f;                   /* cuivre clair, lisible sur le visuel assombri */
  --cx-verre: rgba(252, 248, 242, .86);   /* papier crème translucide (thème clair) */
  --cx-verre-bord: rgba(255, 255, 255, .55);
  --cx-cycle: 18s;
  display: block; min-height: 100vh; min-height: 100dvh; margin: 0; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] .cx { --cx-verre: color-mix(in srgb, var(--bg-card) 74%, transparent); --cx-verre-bord: rgba(255, 236, 214, .12); }

/* ── Visuel ── */
.cx-scene { position: absolute; inset: 0 0 auto; height: 46vh; height: 46svh; min-height: 300px; overflow: hidden;
  background: var(--cx-nuit); z-index: 0; }
.cx-visuel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: 60% 45%; will-change: transform; }
.cx-visuel-3d { object-position: 50% 62%; animation: cx-derive-a calc(var(--cx-cycle) * 2) ease-in-out infinite alternate; }
.cx-visuel-photo { object-position: 46% 50%; opacity: 0; will-change: transform, opacity;
  animation: cx-fondu var(--cx-cycle) ease-in-out infinite, cx-derive-b calc(var(--cx-cycle) * 2) ease-in-out infinite alternate; }
.cx-voile { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 13, 8, .4) 0%, rgba(20, 13, 8, .1) 28%, rgba(20, 13, 8, .7) 62%, rgba(20, 13, 8, .94) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(20, 13, 8, .45) 100%); }

/* ── Mise en page ── */
.cx-page { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  display: grid; grid-template-rows: auto 1fr; padding: 0 0 max(24px, env(safe-area-inset-bottom)); }

.cx-recit { box-sizing: border-box; min-height: max(300px, 46vh); min-height: max(300px, 46svh); display: flex; flex-direction: column; justify-content: flex-end;
  gap: 10px; padding: max(28px, env(safe-area-inset-top)) 22px 52px; color: var(--cx-creme);
  animation: cx-arrivee .7s cubic-bezier(.2, .7, .2, 1) both; }
.cx-marque { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cx-creme-2); }
.cx-sceau { flex: none; width: 34px; height: 34px; background: var(--cx-or);
  -webkit-mask: url(/img/logo-dh-sceau.svg) center / contain no-repeat;
  mask: url(/img/logo-dh-sceau.svg) center / contain no-repeat; }
.cx-titre { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 13vw, 60px); line-height: .98;
  letter-spacing: -.005em; color: var(--cx-creme); text-shadow: 0 2px 24px rgba(10, 6, 3, .45); }
.cx-accroche { margin: 2px 0 0; max-width: 34ch; font-size: var(--t-base); line-height: 1.5; font-weight: 500; color: var(--cx-creme-2);
  text-shadow: 0 1px 12px rgba(10, 6, 3, .5); }
.cx-atouts { display: none; }
.cx-legende { display: none; }

/* ── Carte de connexion (verre dépoli) ── */
.cx-carte { position: relative; box-sizing: border-box; width: auto; margin: -30px 12px 0; align-self: start;
  display: grid; gap: var(--esp-6); padding: 28px 22px 22px;
  background: var(--cx-verre); border: 1px solid var(--cx-verre-bord); border-radius: 22px;
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 24px 60px -18px rgba(20, 13, 8, .45), 0 2px 8px rgba(20, 13, 8, .12);
  animation: cx-arrivee .6s .08s cubic-bezier(.2, .7, .2, 1) both; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cx-carte { background: var(--bg-card); } }

.cx-tete { display: grid; gap: 4px; }
.cx-surtitre { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; color: var(--accent); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cx-carte-titre { margin: 0; font-family: var(--serif); font-size: var(--t-2xl); font-weight: 500; line-height: 1.1; color: var(--ink); }
.cx-sous { margin: 0; color: var(--ink-2); font-size: var(--t-s); }

.cx-form { display: grid; gap: var(--esp-4); }
.cx-form[hidden] { display: none; }
.cx-champ { display: grid; gap: 6px; }
.cx-champ label { color: var(--ink-2); font-size: var(--t-s); font-weight: 600; }
.cx-champ input { box-sizing: border-box; width: 100%; min-height: 52px; padding: 0 16px; font: inherit; font-size: var(--t-champ);
  color: var(--ink); background: color-mix(in srgb, var(--bg-card) 92%, transparent); border: 1px solid var(--champ-bord, var(--line));
  border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.cx-champ input:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cx-champ input:focus, .cx-champ input:focus-visible { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.cx-mdp { position: relative; }
.cx-mdp input { padding-right: 96px; }
.cx-voir { position: absolute; top: 5px; right: 5px; bottom: 5px; min-width: 80px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--accent); font: inherit; font-size: var(--t-s); font-weight: 700; cursor: pointer; }
.cx-voir:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cx-voir:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.cx-code-champ { text-align: center; font-family: var(--chiffres, var(--sans)); font-size: 26px !important; letter-spacing: .4em;
  padding-left: calc(14px + .4em) !important; font-variant-numeric: tabular-nums; }
.cx-etape { display: grid; gap: 4px; }
.cx-etape-titre { margin: 0; font-family: var(--serif); font-size: var(--t-xl); }
.cx-aide { margin: 0; color: var(--ink-2); font-size: var(--t-s); line-height: 1.5; }
.cx-case { display: flex; gap: 10px; align-items: center; min-height: 44px; color: var(--ink-2); font-size: var(--t-m); cursor: pointer; }
.cx-case input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }

.cx-retour { margin: 0; min-height: 0; color: var(--warn); font-size: var(--t-s); font-weight: 600; line-height: 1.45; }
.cx-retour:empty { display: none; }
.cx-retour-info { color: var(--ink-2); font-weight: 500; }

.cx-bouton { min-height: 54px; width: 100%; border: 0; border-radius: 12px; cursor: pointer; touch-action: manipulation;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  color: var(--encre-sur-or); font: inherit; font-size: var(--t-l); font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: filter .15s, transform .1s, box-shadow .15s; }
html[data-theme="light"] .cx-bouton { color: #fff; }
.cx-bouton:hover:not(:disabled) { filter: brightness(1.07); }
.cx-bouton:active:not(:disabled) { transform: translateY(1px); }
.cx-bouton:disabled { opacity: .7; cursor: progress; }
.cx-bouton:focus-visible, .cx-lien:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cx-lien { justify-self: center; min-height: 44px; padding: 0 8px; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: inherit; font-size: var(--t-s); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.cx-pied { display: flex; gap: 8px; align-items: center; justify-content: center; padding-top: var(--esp-4);
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); color: var(--ink-3); font-size: var(--t-xs);
  text-align: center; line-height: 1.4; }
.cx-cadenas { flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Tablette et ordinateur : visuel plein écran, récit à gauche, carte à droite ── */
@media (min-width: 900px) {
  .cx { background: var(--cx-nuit); }
  .cx-scene { position: fixed; inset: 0; height: auto; min-height: 0; }
  .cx-voile { background:
      linear-gradient(90deg, rgba(20, 13, 8, .9) 0%, rgba(20, 13, 8, .66) 30%, rgba(20, 13, 8, .18) 58%, rgba(20, 13, 8, .32) 100%),
      linear-gradient(180deg, rgba(20, 13, 8, .35) 0%, transparent 22%, transparent 70%, rgba(20, 13, 8, .7) 100%); }
  .cx-page { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(380px, 430px); align-items: center;
    gap: clamp(32px, 6vw, 112px); padding: clamp(32px, 6vh, 64px) clamp(40px, 6vw, 96px); }
  .cx-recit { position: relative; min-height: 0; height: 100%; justify-content: center; padding: 0; gap: 16px; }
  .cx-marque { font-size: var(--t-s); }
  .cx-sceau { width: 44px; height: 44px; }
  .cx-titre { font-size: clamp(64px, 7.4vw, 112px); }
  .cx-accroche { font-size: var(--t-l); max-width: 36ch; line-height: 1.55; }
  .cx-atouts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
  .cx-atouts li { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px;
    color: var(--cx-creme); font-size: var(--t-s); font-weight: 600; letter-spacing: .01em;
    background: rgba(255, 244, 230, .08); border: 1px solid rgba(255, 236, 214, .22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .cx-atouts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-or); }
  .cx-legende { display: grid; position: absolute; left: 0; bottom: 0; margin: 0; padding-left: 44px;
    color: var(--cx-creme-2); font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .cx-legende::before { content: ""; position: absolute; left: 0; top: 50%; width: 32px; height: 1px; background: var(--cx-or); }
  .cx-legende span { grid-area: 1 / 1; }
  .cx-legende-photo { opacity: 0; animation: cx-fondu var(--cx-cycle) ease-in-out infinite; }
  .cx-legende-3d { animation: cx-fondu-inverse var(--cx-cycle) ease-in-out infinite; }
  .cx-carte { align-self: center; margin: 0; padding: 40px 36px 28px; gap: var(--esp-6); border-radius: 26px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 40px 90px -24px rgba(10, 6, 3, .7), 0 2px 10px rgba(10, 6, 3, .2); }
}
@media (min-width: 900px) and (max-height: 640px) {
  .cx-legende { display: none; }
  .cx-carte { padding-top: 28px; gap: var(--esp-5); }
}
@media (max-width: 360px) {
  .cx-recit { padding-left: 18px; padding-right: 18px; }
  .cx-carte { margin-left: 8px; margin-right: 8px; padding: 24px 18px 18px; }
}

@keyframes cx-arrivee { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Fondu : rendu 3D ~45 % du cycle, photo ~45 %, deux transitions de ~1,5 s. */
@keyframes cx-fondu { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cx-fondu-inverse { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
/* Lente dérive façon Ken Burns : on survole le chai. */
@keyframes cx-derive-a { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); } }
@keyframes cx-derive-b { from { transform: scale(1.12) translate3d(1.2%, -.8%, 0); } to { transform: scale(1.03) translate3d(0, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .cx-recit, .cx-carte, .cx-visuel, .cx-legende span { animation: none; }
  .cx-visuel { transform: none; will-change: auto; }
  .cx-visuel-photo, .cx-legende-photo { display: none; }
  .cx-legende-3d { opacity: 1; }
  .cx-bouton, .cx-champ input { transition: none; }
}