:root {
  --navy: #14273f;
  --blue: #0099cc;
  --blue-rgb: 0, 153, 204;
  --yellow: #ffc400;
  --bg: #f4f6f8;
  --card: #ffffff;
  --card-alt: #f4f6f8;
  --text: #1c2b3a;
  --heading: #14273f;
  --muted: #6b7a8c;
  --danger: #d64545;
  --danger-rgb: 214, 69, 69;
  --danger-bg: #fdecec;
  --warning: #e0932e;
  --warning-bg: #fdf3e7;
  --info-bg: #eef7fb;
  --success: #2e9e5b;
  --border: #e1e6ec;
  --input-bg: #fbfcfd;
  --shadow: rgba(20, 39, 63, 0.08);
  --radius: 10px;
  /* Verre dépoli du rectangle principal (.card) : opaque assez pour rester lisible en mode
     clair, où le dégradé de fond est déjà sombre et contrasté derrière un texte foncé. */
  --card-glass: rgba(255, 255, 255, 0.7);
  --card-glass-border: rgba(255, 255, 255, 0.5);
}

:root[data-theme="dark"] {
  --navy: #101c2c;
  --blue: #2bb3e0;
  --blue-rgb: 43, 179, 224;
  --yellow: #ffd54a;
  --bg: #0f1720;
  --card: #182635;
  --card-alt: #1f2f41;
  --text: #dbe4ee;
  --heading: #f2f5f9;
  --muted: #93a3b8;
  --danger: #ff6b6b;
  --danger-rgb: 255, 107, 107;
  --danger-bg: #3a1f22;
  --warning: #f0a94f;
  --warning-bg: #3a2c16;
  --info-bg: #16323f;
  --success: #3ecf7e;
  --border: #2b3a4d;
  --input-bg: #101b27;
  --shadow: rgba(0, 0, 0, 0.45);
  /* Plus transparent qu'en clair : sur fond sombre, un verre trop opaque écraserait le
     dégradé et le flou perdrait son intérêt ; le texte clair reste lisible malgré tout. */
  --card-glass: rgba(24, 38, 53, 0.55);
  --card-glass-border: rgba(255, 255, 255, 0.09);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

header {
  background: var(--navy);
  color: white;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.15rem;
  color: inherit;
  text-decoration: none;
}

a.brand { cursor: pointer; }
a.brand:hover { opacity: 0.85; }

header .brand .brand-icon {
  height: 26px;
  width: auto;
  display: block;
}

header .user {
  font-size: 0.9rem;
  color: #cfd8e3;
  display: flex;
  align-items: center;
  gap: 14px;
}

header .user a {
  color: var(--yellow);
  text-decoration: none;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Sélecteur d'apparence (fond dégradé / thème clair / thème sombre) : pilule sombre avec
   icônes minimalistes, couleurs forcées (indépendantes de --navy) pour un rendu stable
   quel que soit le thème ou le fond de la page en cours. */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px;
  flex-shrink: 0;
}

.theme-icon-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.theme-icon-btn svg { width: 16px; height: 16px; display: block; }

.theme-icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }
.theme-icon-btn.active { background: rgba(255, 255, 255, 0.18); color: #ffffff; }

/* Bulle du fond dégradé, séparée de la pilule clair/sombre : au survol (ou focus clavier), un
   petit menu vertical se déploie en dessous pour choisir la couleur du dégradé. Cliquer sur le
   bouton icône écran, lui, reste un simple bascule marche/arrêt (cf. toggleBg côté JS) —
   indépendant de la couleur choisie ici. */
.bg-switcher { position: relative; }

.bg-menu {
  position: absolute;
  /* top:100% (pas de gap) : la marge visuelle vient du padding-top ci-dessous plutôt que d'un
     décalage, pour que la boîte survolable touche le bouton sans "zone morte" au milieu — sinon
     la souris sort du survol en descendant du bouton vers le menu et celui-ci se referme avant
     d'être atteint. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 14px 6px 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 20;
}

.bg-switcher:hover .bg-menu,
.bg-switcher:focus-within .bg-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.bg-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.bg-swatch:hover { transform: scale(1.12); border-color: rgba(255, 255, 255, 0.7); }
.bg-swatch.active { border-color: #ffffff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }

/* Aperçus des dégradés, couleurs forcées (identiques à celles réellement appliquées au fond de
   page ci-dessous) pour que le survol montre fidèlement ce qui sera choisi. */
.bg-swatch-blue { background: linear-gradient(135deg, #05070c 0%, #1f4b78 100%); }
.bg-swatch-yellow { background: linear-gradient(135deg, #0c0900 0%, #bf8f00 100%); }

/* Fond dégradé optionnel (bascule à côté du thème clair/sombre) : ne change
   que le fond de la page, header/carte gardent leurs couleurs habituelles. */
:root[data-bg="gradient"] body {
  background: linear-gradient(135deg, #05070c 0%, #0c1626 40%, #163454 75%, #1f4b78 100%);
  background-attachment: fixed;
}

/* Variante jaune, alignée sur --yellow (#ffc400) : même progression de luminosité que la
   variante bleue par défaut, juste une teinte différente. */
:root[data-bg="gradient"][data-bg-color="yellow"] body {
  background: linear-gradient(135deg, #0c0900 0%, #2b1e00 40%, #6b4a00 75%, #bf8f00 100%);
}

/* Avec le dégradé jaune actif, la couleur d'accentuation (--blue : bordures actives,
   halo/anneau de focus, bouton "Copier", radio sélectionné...) suit la teinte du dégradé
   choisi au lieu de rester bleue — un ambre doré assez sombre pour garder un texte blanc
   lisible dessus, comme le bleu qu'il remplace. */
:root:not([data-theme="dark"])[data-bg="gradient"][data-bg-color="yellow"] {
  --blue: #b8860b;
  --blue-rgb: 184, 134, 11;
}
:root[data-theme="dark"][data-bg="gradient"][data-bg-color="yellow"] {
  --blue: #e0a72b;
  --blue-rgb: 224, 167, 43;
}

/* En thème clair + fond dégradé (bleu ou jaune), le rectangle en verre dépoli laisse
   davantage transparaître le dégradé sombre : le gris --muted habituel (labels, zone de
   dépôt d'image, expéditeur/compte à rebours du visualiseur) devient trop peu contrasté dès
   qu'il n'a pas de fond opaque derrière lui. On le rapproche du bleu/noir des titres, comme
   en thème sombre où le contraste reste déjà suffisant sans ajustement. */
:root:not([data-theme="dark"])[data-bg="gradient"] {
  --muted: var(--heading);
}

main {
  max-width: 640px;
  margin: 40px auto;
  padding: 0 20px;
}

.card {
  background: var(--card-glass);
  border: 1px solid var(--card-glass-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 2px 14px var(--shadow);
  /* Verre dépoli : laisse transparaître le dégradé bleu/jaune du fond (quand actif) tout en
     le floutant, pour que le texte du formulaire reste lisible par-dessus. */
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

h1 { font-size: 1.4rem; margin-top: 0; color: var(--heading); }

.radio-group {
  display: flex;
  gap: 16px;
  margin-bottom: 6px;
}

.radio-option {
  flex: 1;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.radio-option.active {
  border-color: var(--blue);
  background: rgba(var(--blue-rgb), 0.06);
}

.radio-option input { accent-color: var(--blue); width: 18px; height: 18px; }

/* Bascule Identifiant/mot de passe <-> Note simple : les deux panneaux existent toujours
   dans le DOM, seule la classe .open change (cf. app.js). On joue sur cette asymétrie pour
   un effet "flou de transition" quasi séquentiel sans JS : quand .open disparaît, c'est CETTE
   règle (.reveal-panel, sans délai) qui pilote la fermeture — flou + fondu immédiats ; quand
   .open apparaît, c'est la règle .reveal-panel.open (avec délai) ci-dessous qui pilote
   l'ouverture, décalée pour laisser le temps au panneau précédent de se flouter/disparaître
   avant que le nouveau ne redevienne net. */
.reveal-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(4px);
  margin-top: 0;
  transition: max-height 0.5s ease-in-out, opacity 0.45s ease-in-out,
    filter 0.45s ease-in-out, margin-top 0.5s ease-in-out;
}

.reveal-panel.open {
  max-height: 900px;
  opacity: 1;
  filter: blur(0);
  margin-top: 20px;
  transition: max-height 0.5s ease-in-out 0.15s, opacity 0.45s ease-in-out 0.15s,
    filter 0.45s ease-in-out 0.15s, margin-top 0.5s ease-in-out 0.15s;
}

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  margin: 16px 0 6px;
}

input[type="text"], input[type="password"], textarea, select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--blue);
}

/* Focus sur un champ texte : le texte d'exemple à l'intérieur (placeholder) s'efface en
   fondu — le libellé au-dessus, lui, ne bouge pas — et un léger halo apparaît autour du
   champ en plus du changement de couleur de bordure ci-dessus. */
input[type="text"]::placeholder,
textarea::placeholder {
  transition: opacity 0.2s ease;
}

input[type="text"]:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0;
}

input[type="text"]:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.15);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Champ nom "Se renommer" en erreur (chiffre saisi, cf. updateIdentifyNameCheck() dans
   app.js) : le contour passe au rouge, y compris en focus où il primerait sinon sur le bleu
   habituel ci-dessus. */
input[type="text"].input-error {
  border-color: var(--danger);
}
input[type="text"].input-error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.15);
}

/* Easter egg "néon" : activé/désactivé via un double-clic coin bas-droit puis coin haut-droit
   du rectangle principal, exclusivement en mode "Note simple" (cf. app.js, NEON_SEQUENCE).
   Une fois activé, survoler le rectangle principal (uniquement — pas les champs) fait défiler
   un halo néon en fondu — palette froide (bleu/violet/magenta) par défaut, chaude
   (jaune/orange/rouge) quand le dégradé jaune est actif, jamais les deux mélangées. Mémorisé
   dans localStorage comme le thème/le dégradé (cf. le petit script en tête de
   index.html/view.html). */
@keyframes neon-cool {
  0%   { box-shadow: 0 0 10px 1px #3b82f6, 0 0 24px 5px rgba(59, 130, 246, 0.5); border-color: #3b82f6; }
  33%  { box-shadow: 0 0 10px 1px #8b5cf6, 0 0 24px 5px rgba(139, 92, 246, 0.5); border-color: #8b5cf6; }
  66%  { box-shadow: 0 0 10px 1px #d946ef, 0 0 24px 5px rgba(217, 70, 239, 0.5); border-color: #d946ef; }
  100% { box-shadow: 0 0 10px 1px #3b82f6, 0 0 24px 5px rgba(59, 130, 246, 0.5); border-color: #3b82f6; }
}

@keyframes neon-warm {
  0%   { box-shadow: 0 0 10px 1px #facc15, 0 0 24px 5px rgba(250, 204, 21, 0.5); border-color: #facc15; }
  33%  { box-shadow: 0 0 10px 1px #fb923c, 0 0 24px 5px rgba(251, 146, 60, 0.5); border-color: #fb923c; }
  66%  { box-shadow: 0 0 10px 1px #f87171, 0 0 24px 5px rgba(248, 113, 113, 0.5); border-color: #f87171; }
  100% { box-shadow: 0 0 10px 1px #facc15, 0 0 24px 5px rgba(250, 204, 21, 0.5); border-color: #facc15; }
}

:root[data-neon="on"] .card:hover {
  animation: neon-cool 8s linear infinite;
}

:root[data-neon="on"][data-bg="gradient"][data-bg-color="yellow"] .card:hover {
  animation: neon-warm 8s linear infinite;
}

.image-drop {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.image-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.image-list img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.image-list .thumb { position: relative; }
.image-list .thumb button {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger); color: white; border: none; cursor: pointer; font-size: 12px; line-height: 1;
}

button.primary {
  margin-top: 22px;
  width: 100%;
  background: var(--navy);
  color: white;
  border: none;
  padding: 13px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, filter 0.2s ease;
}

button.primary:hover { filter: brightness(1.15); }

/* Dégradé jaune actif : bouton principal en ambre uni (--blue, surchargé plus haut) au lieu
   de navy, pour rester cohérent avec le reste de l'accentuation de la page plutôt que de
   trancher avec le fond chaud. */
:root[data-bg="gradient"][data-bg-color="yellow"] button.primary {
  background: var(--blue);
}
button.primary:disabled { opacity: 0.6; cursor: not-allowed; }

button.secondary {
  background: var(--blue);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}

button.secondary.copied {
  background: var(--success);
  cursor: default;
}

button.secondary.copy-error {
  background: var(--danger);
  cursor: default;
}

.alert-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--danger-bg);
  border: 1.5px solid var(--danger);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 22px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.alert-box .alert-emoji { font-size: 1.8rem; line-height: 1; }

.alert-box .alert-text { color: var(--text); font-size: 0.92rem; line-height: 1.4; }
.alert-box .alert-text strong { color: var(--danger); }

/* Variante affichée quand la destruction "1ère ouverture" est désactivée : plusieurs
   ouvertures restent possibles pendant le délai choisi, donc encadré orange (avertissement)
   plutôt que rouge (destruction immédiate garantie). */
.alert-box.multi {
  background: var(--warning-bg);
  border-color: var(--warning);
}
.alert-box.multi .alert-text strong { color: var(--warning); }

/* Option "destruction dès la première ouverture", sous le sélecteur d'autodestruction. */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--card-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.switch {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 46px;
  height: 26px;
  margin-top: 1px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.switch-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.2s ease;
}

.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

/* Dégradé de l'accent (--blue) vers --navy, pas de couleurs figées : reste bleu par défaut
   quel que soit le thème clair/sombre, mais suit l'ambre du dégradé jaune quand celui-ci est
   actif (cf. --blue surchargé plus haut), pour que l'état "activé" reste cohérent avec le
   reste de l'accentuation de la page. */
.switch input:checked ~ .switch-track {
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
}
.switch input:checked ~ .switch-track .switch-thumb { transform: translateX(20px); }
.switch input:focus-visible ~ .switch-track { box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.35); }

.toggle-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
}
.toggle-title { font-weight: 600; font-size: 0.9rem; color: var(--heading); }
.toggle-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }

.result-box {
  margin-top: 22px;
  background: var(--info-bg);
  border: 1.5px solid var(--blue);
  border-radius: 8px;
  padding: 16px;
  transition: background-color 0.2s ease;
}

.result-box .link-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.result-box .link-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.result-box .link-row button {
  flex: 0 0 auto;
  min-width: 84px;
}

.result-box input {
  background: var(--card);
  font-family: monospace;
  font-size: 0.82rem;
}

.badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 8px;
}

.sso-cta {
  text-align: center;
  padding: 50px 20px;
  /* Liseré subtil aux couleurs de l'appli (var(--blue-rgb), suit donc l'ambre du dégradé
     jaune comme tout le reste de l'accentuation) : juste le contour de la carte teinté, plus
     une lueur très légère derrière, en plus de l'ombre habituelle de .card. Blur/opacité
     volontairement faibles (une 1ère version, plus prononcée, lisait comme un halo néon plutôt
     que comme un simple contour coloré). */
  border-color: rgba(var(--blue-rgb), 0.45);
  box-shadow: 0 2px 14px var(--shadow), 0 0 14px -9px rgba(var(--blue-rgb), 0.35);
}

/* Badge avatar en haut de la carte "Se renommer" : dégradé var(--blue) -> var(--navy)
   (même formule que .switch actif, cf. plus bas) pour rester cohérent avec le reste de
   l'accentuation, y compris l'ambre du dégradé jaune puisque les deux variables suivent déjà
   ce thème. Affiche la 1ère lettre du nom en cours de saisie (mise à jour par
   updateIdentifyAvatar() dans app.js), ou l'icône silhouette tant que le champ est vide. */
.avatar-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
  color: white;
  box-shadow: 0 8px 22px -8px rgba(var(--blue-rgb), 0.65);
  transition: background 0.2s ease;
}

.avatar-badge .avatar-letter {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}

.avatar-badge .avatar-icon {
  width: 30px;
  height: 30px;
}

/* Boîte d'infos sous le champ nom, même habillage que les autres encadrés secondaires de
   l'appli (.toggle-row) : fond --card-alt, bordure --border, pas une couleur à part. */
.identify-info {
  text-align: left;
  background: var(--card-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 18px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.identify-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.3;
}

/* Ligne d'avertissement "Chiffres et nombres interdits" (#identifyDigitWarning), affichée
   par updateIdentifyNameCheck() (app.js) dès qu'un chiffre est tapé dans le champ nom, avant
   même de cliquer sur "Continuer" — en rouge plutôt que --muted/--blue comme les autres
   lignes de la boîte, pour bien la distinguer des informations neutres. */
.identify-info-row.identify-info-error,
.identify-info-row.identify-info-error svg {
  color: var(--danger);
}

.identify-info-row svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--blue);
}

.sso-cta button {
  /* Dégradé var(--blue) -> var(--navy), même formule que le badge avatar ci-dessus et que
     .switch actif : contrairement à button.primary (volontairement navy uni, cf. plus haut),
     un dégradé a été explicitement demandé pour CE bouton précis en s'inspirant d'une
     référence visuelle externe — ce n'est pas une généralisation du dégradé à button.primary,
     qui reste navy uni. Suit déjà l'ambre du dégradé jaune via var(--blue)/var(--navy), sans
     règle de surcharge séparée à maintenir. */
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
  color: white;
  border: none;
  padding: 13px 26px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  /* Aligné en largeur avec le champ nom (280px) au lieu de sa largeur "au contenu" par
     défaut d'un <button>, pour que le bouton ne semble plus flotter, trop petit, sous le
     champ. */
  max-width: 280px;
  width: 100%;
  display: block;
  margin: 4px auto 0;
  transition: filter 0.2s ease;
}

.sso-cta button:hover { filter: brightness(1.15); }

.error-text { color: var(--danger); font-size: 0.85rem; margin-top: 10px; }

.viewer-card { text-align: center; }
.viewer-sender { color: var(--muted); margin-bottom: 20px; }
.viewer-sender strong { color: var(--heading); }
.viewer-content { text-align: left; margin-top: 20px; }
.credential-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card-alt); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px;
  transition: background-color 0.2s ease;
}
.credential-row code { font-family: monospace; font-size: 0.95rem; }

.countdown-text {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 20px;
  transition: color 0.2s ease;
}
.countdown-text strong {
  font-family: monospace;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}
.countdown-text strong.countdown-green { color: var(--success); }
.countdown-text strong.countdown-orange { color: var(--warning); }
.countdown-text strong.countdown-red { color: var(--danger); }
.countdown-text.countdown-burned { color: var(--danger); font-weight: 600; }

.brand-footer {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.brand-footer img {
  height: 52px;
  width: auto;
  padding: 10px 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 6px var(--shadow);
}

.viewer-content .viewer-image {
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}
.viewer-content .viewer-image:hover { opacity: 0.85; }

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 22, 0.9);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* Petite notification non-bloquante (coin bas-droit), utilisée entre autres pour confirmer
   l'activation/désactivation de l'easter egg "néon" — disparaît toute seule, ne prend jamais
   le focus ni le clic, l'utilisateur continue de travailler pendant ce temps. */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: 320px;
  background: var(--navy);
  color: white;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  pointer-events: none;
  z-index: 2000;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}