/* Inscription.html : un dossier d'enquêteur ouvert sur le bureau. Tout ce qui s'y trouve est en papier ou en encre.
   Chargé après carnet.css, que Profil.html garde seul : tout est sous `.inscription`.
   Matière : un seul papier (marque/paper-texture.webp). Polices : Special Elite (titres, champ) et IBM Plex Sans (étiquettes, boutons)
   (corps et champs). Ombres : une seule direction, en haut à gauche. Couleurs : les tokens de carnet.css. */
.inscription {
  --accent: var(--rouille);
  --serif: 'Special Elite', 'Courier New', monospace;
  --plex: 'IBM Plex Sans', system-ui, sans-serif;
  --machine: 'Special Elite', 'Courier New', monospace;
  --texte-doux: #6b4a22;
  --voile: rgba(241, 231, 205, 0.84);
  --ombre: 3px 4px 10px rgba(37, 24, 15, 0.35);
  --reliure: 58, 31, 14;
  font-family: var(--machine);
  padding-inline: 64px;
}
.inscription :is(button, label, input, p, span, a, small, b, figcaption) { font-family: var(--machine); }

/* Le bureau : la lampe et les photos épinglées de la connexion, très en retrait. */
.inscription::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.2;
  background: url(marque/fond-mur-enquete.svg) center / cover no-repeat; }
.inscription > * { position: relative; z-index: 1; }
.inscription .retour { align-self: center; width: min(1060px, 100%); color: #eadcc0; font-family: var(--machine); font-weight: 400; }

/* --- Le livre --- */
.inscription .livre { width: min(1060px, 100%); padding: 20px 24px; }
.inscription .livre::before, .inscription .livre::after { content: ''; position: absolute; top: 7px; width: 12px; height: 12px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 35% 35%, #f6c987 0%, var(--laiton) 45%, var(--laiton-fonce) 100%); box-shadow: 1px 2px 2px rgba(37, 24, 15, 0.5); }
.inscription .livre::before { left: 9px; }
.inscription .livre::after { right: 9px; }
.inscription .pages { position: relative; }
.inscription .pages::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 70px; margin-left: -35px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--reliure), 0), rgba(var(--reliure), 0.3) 50%, rgba(var(--reliure), 0)); }
.inscription .page { min-height: 640px; padding: 24px 36px 32px;
  background: linear-gradient(var(--voile), var(--voile)), url(marque/paper-texture.webp) center / cover; box-shadow: none; }
.inscription .page.droite { background: linear-gradient(var(--voile), var(--voile)), url(marque/paper-texture.webp) 100% 100% / cover; }
.inscription .page.droite .colonne { position: static; }
.inscription .folio { color: var(--texte-doux); }

/* --- Signets sur le bord droit du livre --- */
.inscription .onglets { position: absolute; top: 74px; left: 100%; z-index: 1; flex-direction: column; gap: 10px; }
.inscription .onglet { writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; min-width: 52px; min-height: 190px; padding: 14px 0;
  font: 700 14px var(--plex); letter-spacing: 0.1em; text-transform: uppercase; color: #f1e3c2; background: var(--cuir); border-radius: 0 8px 8px 0;
  box-shadow: var(--ombre); transition: transform 0.2s, background 0.2s; }
.inscription .onglet:hover { background: var(--cuir-clair); }
.inscription .onglet[aria-selected=true] { transform: translateX(10px); color: var(--encre); background: var(--papier); box-shadow: var(--ombre), inset 0 0 0 2px var(--papier-ombre); }

/* --- Titres, étiquettes --- */
.inscription .tete { gap: 6px; padding-bottom: 14px; box-shadow: none; }
.inscription .kicker { font: 400 12px var(--machine); letter-spacing: 0.16em; color: var(--texte-doux); }
.inscription h1 { font: 400 40px/1.1 var(--serif); letter-spacing: 0.03em; text-transform: uppercase; word-spacing: 0; }
.inscription h2 { margin: 0; font: 400 26px/1.15 var(--serif); letter-spacing: 0.04em; text-transform: uppercase; word-spacing: 0; }
.inscription .ornement { position: relative; height: 12px; margin-top: 8px; --trait: linear-gradient(var(--encre), var(--encre));
  background: var(--trait) left center / calc(50% - 16px) 1px no-repeat, var(--trait) right center / calc(50% - 16px) 1px no-repeat; }
.inscription .ornement::before { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: var(--encre); transform: translate(-50%, -50%) rotate(45deg); }
.inscription .section { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 700 13px var(--plex); letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre); }
.inscription .section::after { content: ''; flex: 1; height: 1px; background: var(--texte-doux); }
.inscription label, .inscription .etiquette { font: 700 12px var(--plex); letter-spacing: 0.08em; color: var(--encre); }
.inscription .aide, .inscription .pas-de-compte { font: 400 13px/1.45 var(--plex); color: var(--texte-doux); }
.inscription label.case { text-transform: none; display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font: 400 13px/1.45 var(--plex); letter-spacing: 0; cursor: pointer; }
.inscription label.case input { flex: none; margin-top: 2px; accent-color: var(--encre); }
.inscription a { color: var(--accent); }
.inscription fieldset.age { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.inscription fieldset.age legend { padding: 0; }
.inscription fieldset.age label.case { margin-top: 6px; }
.inscription fieldset.age .aide { margin: 6px 0 0; }
.inscription [hidden] { display: none !important; }
.inscription .pied-legal { align-self: center; margin: 14px 0 0; font: 400 13px var(--machine); }
.inscription .pied-legal a { color: #eadcc0; }
.inscription input.encre::placeholder { color: #6b4a22; opacity: 0.8; }
.inscription input.encre[aria-invalid=true] { border-bottom-color: #A8321F; background: rgba(168, 50, 31, 0.08); }
.inscription .de { vertical-align: -3px; margin-right: 4px; }

/* --- Le portrait : le cadre polaroïd posé sur la page, l'enquêteur dans sa fenêtre --- */
.inscription .portrait-bloc { display: flex; flex-direction: column; align-items: center; }
.inscription .polaroid { position: relative; margin: 0; width: min(100%, 150px); aspect-ratio: 640 / 662; transform: rotate(-2deg); }
.inscription .polaroid::before { content: ''; position: absolute; top: -9px; left: 50%; z-index: 3; width: 56px; height: 17px; transform: translateX(-50%) rotate(2deg);
  background: rgba(224, 138, 74, 0.55); box-shadow: 1px 1px 2px rgba(37, 24, 15, 0.25); }
.inscription .vitre { position: absolute; left: 9.6%; top: 10.6%; width: 79.9%; height: 77.1%; overflow: hidden; }
.inscription .vitre img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; background: #35463a center / cover; box-shadow: none; }
.inscription .cadre { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(3px 4px 4px rgba(37, 24, 15, 0.4)); }
.inscription .polaroid figcaption { position: absolute; left: 11%; right: 11%; bottom: 3.4%; z-index: 3; text-align: center; font: 400 14px var(--machine); color: var(--encre);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inscription .tourner { margin-top: 0; gap: 10px; }
.inscription .portrait-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin-top: 10px; }
.inscription .portrait-actions .bouton { min-height: 32px; padding: 4px 14px; font-size: 12px; }
.inscription .tourner button { width: 36px; height: 32px; font: 400 16px var(--machine); background: #E4D3AA; box-shadow: 1px 2px 0 rgba(90, 55, 25, 0.3); }

/* --- La garde-robe : fiches à étiquettes --- */
.inscription .garde-robe { margin-top: 14px; min-width: 0; }
.inscription .garde-robe > summary { cursor: pointer; list-style: none; }
.inscription .garde-robe > summary::-webkit-details-marker { display: none; }
.inscription .garde-robe > summary::before { content: '▾'; font-size: 14px; transition: transform 0.2s; }
.inscription .garde-robe:not([open]) > summary::before { transform: rotate(-90deg); }
.inscription .garde-robe:not([open]) > summary { margin-bottom: 0; }
.inscription .sous-onglets { gap: 4px; padding-bottom: 0; box-shadow: none; border-bottom: 1.5px solid #8a6a3a; }
.inscription .sous-onglet { padding: 9px 16px 8px; font: 700 13px var(--plex); color: var(--encre); background: #D9C79C; border: 1.5px solid #8a6a3a; border-bottom: 0;
  border-radius: 7px 7px 0 0; box-shadow: none; margin-bottom: -1.5px; }
.inscription .sous-onglet:hover { background: #E4D3AA; }
.inscription .sous-onglet[aria-selected=true] { background: #F1E7CD; color: var(--encre); padding-bottom: 10px; box-shadow: none; }
.inscription #reglages { gap: 10px; }
.inscription #reglages .choix { gap: 6px; }
.inscription .puce { position: relative; min-height: 32px; padding: 4px 11px 4px 22px; font: 700 12px var(--plex); background: #E4D3AA; border-radius: 3px 9px 9px 3px; box-shadow: 1px 2px 0 rgba(90, 55, 25, 0.3); }
.inscription .puce::before { content: ''; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #F1E7CD; box-shadow: inset 1px 1px 1px rgba(90, 55, 25, 0.55); }
.inscription .puce:hover { background: #DCC891; }
.inscription .puce[aria-pressed=true] { color: #F6EAD0; background: var(--cuir); box-shadow: 1px 2px 0 rgba(37, 24, 15, 0.5); }
.inscription .puce[aria-pressed=true]::before { background: var(--laiton); box-shadow: none; }
.inscription #reglages .nuance, .inscription .nuance { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(42, 33, 24, 0.35); }
.inscription .nuance[aria-pressed=true] { box-shadow: inset 0 0 0 2px rgba(42, 33, 24, 0.35), 0 0 0 3px #F1E7CD, 0 0 0 5px var(--accent); }

/* --- Le dossier : champs à ligne de saisie --- */
.inscription .dossier .colonne { gap: 28px; flex: 1; }
.inscription .dossier .ornement { margin-right: 150px; }
.inscription .page.droite { display: flex; flex-direction: column; }
.inscription #v-skin .colonne > .aide { padding-top: 16px; border-top: 1px dashed var(--texte-doux); }
/* Le bas de la page reste du papier réglé, pas un trou. */
.inscription #v-skin .colonne::after { content: ''; flex: 1; min-height: 40px; margin-top: -12px; background: repeating-linear-gradient(transparent 0 31px, rgba(107, 74, 34, 0.28) 31px 32px); }
.inscription .champ.ligne { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; }
.inscription .ligne label { flex: none; padding-bottom: 6px; }
.inscription .ligne input.encre { flex: 1; width: auto; min-width: 170px; font: 400 20px var(--machine); }
.inscription .ligne input.petit { font-size: 18px; }
.inscription .ligne .mdp-champ { flex: 1; min-width: 170px; }
.inscription .ligne .aide, .inscription .ligne .erreur { flex-basis: 100%; }
.inscription .erreur { font: 600 15px/1.45 var(--plex); padding: 12px 14px; border-radius: 3px; background: rgba(255, 246, 236, 0.9); color: #7A1F12; box-shadow: inset 0 0 0 1px rgba(168, 50, 31, 0.55), inset 4px 0 0 #A8321F; }
.inscription .rangee { gap: 12px; }
.inscription .bouton { min-height: 44px; font: 700 13px var(--plex); letter-spacing: 0.06em; text-transform: uppercase; }
.inscription .bouton.or { font-size: 14px; }
.inscription .rangee .bouton.or { flex: 1 1 100%; order: -1; }
.inscription .oeil { color: var(--texte-doux); }

/* --- Tampons : même encre usée pour les trois (accent, -8°, 85 %, ni ombre ni brillance) --- */
.inscription .tampon { top: 14px; right: 20px; left: auto; z-index: 4; color: var(--accent); opacity: 0.85; transform: rotate(-8deg); pointer-events: none; animation: imprime 0.3s ease-out both; }
.inscription .tampon-secret { width: 136px; height: 136px; background-color: var(--accent);
  -webkit-mask-image: url(marque/stamp-top-secret.png); mask-image: url(marque/stamp-top-secret.png);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.inscription .tampon-nouveau, .inscription .tampon-ouvert { width: 132px; padding: 9px 10px; border: 3px double var(--accent); border-radius: 4px 3px 5px 2px;
  font: 400 16px/1.2 var(--serif); letter-spacing: 0.14em; text-align: center; text-transform: uppercase;
  -webkit-mask-image: url(marque/usure-encre.png); mask-image: url(marque/usure-encre.png); -webkit-mask-size: 256px 256px; mask-size: 256px 256px; }
.inscription .tampon-ouvert { opacity: 0; animation: none; }
.inscription .signe .tampon-secret { opacity: 0; animation: none; }
.inscription .signe .tampon-ouvert { animation: imprime 0.3s ease-out 0.1s both; }
@keyframes imprime {
  from { opacity: 0; transform: rotate(-8deg) scale(1.15); filter: blur(3px); }
  to { opacity: 0.85; transform: rotate(-8deg) scale(1); filter: blur(0); }
}

/* --- Moment fort : à la signature, le polaroïd devient une carte d'agent au nom du joueur --- */
.inscription .agent { position: relative; width: min(100%, 330px); aspect-ratio: 4 / 5; }
.inscription .agent .polaroid { position: absolute; left: 50%; top: 50%; width: 76%; transform: translate(-50%, -50%) rotate(-2deg); z-index: 2;
  transition: left 0.7s ease, top 0.7s ease, width 0.7s ease, transform 0.7s ease; }
.inscription .carte { position: absolute; inset: 0; opacity: 0; z-index: 1; border: 7px solid #4a2c16; border-radius: 6px; color: var(--encre);
  background:
    radial-gradient(circle at 50% 50%, var(--laiton) 0 3px, transparent 4px) 8px 8px / 16px 16px no-repeat,
    radial-gradient(circle at 50% 50%, var(--laiton) 0 3px, transparent 4px) calc(100% - 8px) 8px / 16px 16px no-repeat,
    radial-gradient(circle at 50% 50%, var(--laiton) 0 3px, transparent 4px) 8px calc(100% - 8px) / 16px 16px no-repeat,
    radial-gradient(circle at 50% 50%, var(--laiton) 0 3px, transparent 4px) calc(100% - 8px) calc(100% - 8px) / 16px 16px no-repeat,
    linear-gradient(var(--voile), var(--voile)), url(marque/paper-texture.webp) center / cover;
  box-shadow: inset 0 0 0 2px var(--laiton-fonce), var(--ombre); transition: opacity 0.5s ease 0.15s; }
.inscription .carte p { margin: 0; }
.inscription .carte-titre { padding-top: 7%; text-align: center; font: 400 15px var(--serif); letter-spacing: 0.06em; text-transform: uppercase; }
.inscription .carte .ornement { margin: 4px 9% 0; }
.inscription .carte-lignes { position: absolute; left: 8%; top: 30%; width: 40%; display: flex; flex-direction: column; gap: 22px; font: 400 12px var(--machine); text-transform: uppercase; letter-spacing: 0.1em; color: var(--texte-doux); }
.inscription .carte-lignes b { display: block; margin-top: 3px; font: 400 17px/1.2 var(--machine); letter-spacing: 0; text-transform: none; color: var(--encre); overflow-wrap: anywhere; border-bottom: 1px solid var(--texte-doux); }
.inscription .carte-pied { position: absolute; left: 8%; right: 8%; bottom: 6%; padding: 5px 0; text-align: center; font: 700 11px var(--plex); letter-spacing: 0.14em; text-transform: uppercase;
  color: #F6EAD0; background: #4a2c16; box-shadow: inset 0 0 0 1px var(--laiton); }
.inscription .signe .carte { opacity: 1; }
.inscription .signe .agent .polaroid { left: 73%; top: 55%; width: 42%; transform: translate(-50%, -50%) rotate(0deg); }
.inscription .signe .agent figcaption { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Accessibilité : focus visible accent, cibles tactiles, mouvement réduit --- */
.inscription :focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }

@media (min-width: 861px) {
  .inscription .page.gauche { padding-bottom: 56px; }
  .inscription #reglages { max-height: max(250px, calc(100dvh - 535px)); overflow-y: auto; padding: 0 6px 18px 0; scrollbar-width: thin; scrollbar-color: #9a7a4a rgba(42, 33, 24, 0.08);
    -webkit-mask-image: linear-gradient(black calc(100% - 22px), transparent); mask-image: linear-gradient(black calc(100% - 22px), transparent); }
}
/* Livre étroit (861–1279px) : le tampon ne doit pas couvrir le titre. */
@media (min-width: 861px) and (max-width: 1279px) {
  .inscription .dossier h1 { font-size: 34px; }
  .inscription .tampon { top: 10px; right: 12px; }
  .inscription .tampon-secret { width: 104px; height: 104px; }
  .inscription .tampon-nouveau, .inscription .tampon-ouvert { width: 104px; padding: 6px 7px; font-size: 12px; letter-spacing: 0.1em; }
  .inscription .dossier .tete { padding-right: 96px; }
  /* Garde-robe : les neuf teintes de cheveux tiennent sur une rangée, le fondu annonce la suite à faire défiler. */
  .inscription #reglages .nuance { width: 27px; height: 27px; }
  .inscription #reglages { -webkit-mask-image: linear-gradient(black calc(100% - 28px), transparent); mask-image: linear-gradient(black calc(100% - 28px), transparent); }
}
/* Écran bas : les boutons de rotation passent à côté du polaroïd, l'onglet Corps de la garde-robe tient sans défiler à 1440×900. */
@media (min-width: 861px) and (max-height: 1000px) {
  .inscription .portrait-bloc { flex-direction: row; justify-content: center; gap: 22px; }
  .inscription .portrait-bloc .tourner { flex-direction: column; align-items: stretch; }
  .inscription #reglages { max-height: max(250px, calc(100dvh - 490px)); padding-bottom: 4px; }
}
/* Fiche d'accès : les champs démarrent tous au même bord. */
@media (min-width: 861px) {
  .inscription #v-acces .ligne label { min-width: 13em; }
}
@media (max-width: 860px) {
  .inscription { padding-inline: 10px; }
  .inscription .livre { margin-top: 48px; padding: 14px 12px; }
  .inscription .pages::after { display: none; }
  .inscription .page { min-height: 0; padding: 26px 22px 44px; }
  .inscription .page.droite { border-top: 2px dashed var(--papier-ombre); }
  .inscription .onglets { top: auto; bottom: 100%; left: 18px; flex-direction: row; gap: 8px; }
  .inscription .onglet { writing-mode: horizontal-tb; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 8px 8px 0 0; }
  .inscription .onglet[aria-selected=true] { transform: translateY(-6px); }
  .inscription h1 { font-size: 28px; }
  .inscription .tampon { top: 14px; right: 14px; }
  .inscription .tampon-secret { width: 92px; height: 92px; }
  .inscription .tampon-nouveau, .inscription .tampon-ouvert { width: 92px; padding: 5px 6px; font-size: 11px; letter-spacing: 0.08em; }
  .inscription .dossier .tete { padding-right: 100px; }
  .inscription .dossier .ornement { margin-right: 0; }
  .inscription .rangee .bouton.or { font-size: 13px; letter-spacing: 0.03em; padding-inline: 8px; }
  .inscription .puce, .inscription .sous-onglet, .inscription .bouton { min-height: 44px; }
  .inscription .tourner button { width: 44px; height: 44px; }
  .inscription .oeil { width: 44px; height: 44px; }
  .inscription .champ.ligne { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .inscription .ligne .aide, .inscription .ligne .erreur { flex-basis: auto; }
  .inscription #reglages .nuance, .inscription .nuance { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .inscription .tampon, .inscription .signe .tampon-ouvert { animation: none; }
  .inscription .signe .tampon-ouvert { opacity: 0.85; }
  .inscription .onglet, .inscription .agent .polaroid, .inscription .carte { transition: none; }
}

/* Téléphone étroit : les deux onglets tiennent chacun sur une ligne. */
@media (max-width: 420px) {
  .inscription .onglets { left: 10px; gap: 6px; }
  .inscription .onglet { padding: 0 10px; font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }
}