/* Style commun (noir / bleu / rouge de l'ancien site), adapte aux telephones */
body { background: #000; color: #eee; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 16px; line-height: 1.4; }
.page { max-width: 860px; margin: 0 auto; text-align: center; }
img { max-width: 100%; height: auto; }
h1 { font-size: clamp(1.4rem, 5vw, 2rem); margin: 1em 0 .6em; }
h1 .red, .red { color: #ff2222; }
.blue { color: #00ccff; }
ul.info { color: #00ccff; text-align: left; max-width: 640px; margin: 1.5em auto; padding-left: 1.4em; list-style-type: circle; }
ul.info li { margin: .3em 0; }
textarea { width: 100%; max-width: 640px; box-sizing: border-box; min-height: 8em; font-size: 16px; padding: 8px; }
/* zone de saisie + petit bouton "Generer un mot de passe" pose dans son coin haut droit */
.editor { position: relative; max-width: 640px; margin: 0 auto; }
.editor textarea { display: block; padding-top: 38px; }
.editor button.small { position: absolute; top: 6px; right: 6px; margin: 0; padding: 3px 10px; font-size: 13px; }
button, input[type=submit] { font-size: 16px; padding: 8px 20px; margin: 8px 4px; cursor: pointer; }
.link { color: #00ccff; font-size: clamp(1rem, 3.5vw, 1.35rem); font-weight: bold; word-break: break-all; margin: 1em 0; }
.secret { background: #fff; color: #000; border: 2px dashed #888; padding: 12px; max-width: 640px; margin: 1em auto; text-align: center; }
.secret pre { white-space: pre-wrap; word-break: break-all; margin: 0; font-size: 18px; }
.error { color: #ff1111; font-weight: bold; }
.error a { color: #00ccff; }
.intro { max-width: 640px; margin: 1em auto; }
.lang { margin-top: 2em; font-size: 14px; }
.lang a { color: #888; }
/* champ piege anti-robot : invisible pour un humain */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }