Spaces:
Sleeping
Sleeping
| body { | |
| display: flex; | |
| min-height: 100vh; | |
| margin: 0; | |
| background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); | |
| font-family: "Georgia", serif; | |
| color: #e6f7ff; | |
| } | |
| /* SIDEBAR */ | |
| .sidebar { | |
| width: 250px; | |
| background: linear-gradient(135deg, #7b2ff7, #4facfe, #00f2fe); | |
| padding: 1rem; | |
| } | |
| .sidebar a { | |
| display: block; | |
| padding: 0.8rem; | |
| margin-bottom: 1rem; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: #e0f7fa; | |
| text-decoration: none; | |
| border-radius: 10px; | |
| transition: 0.3s; | |
| } | |
| .sidebar a:hover { | |
| background-color: #4facfe; | |
| color: #0f2027; | |
| } | |
| /* CONTENU */ | |
| .content { | |
| flex: 1; | |
| padding: 2rem; | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: 15px; | |
| backdrop-filter: blur(6px); | |
| } | |
| /* HERO (bannière) */ | |
| .hero { | |
| background: linear-gradient(135deg, #4facfe, #00f2fe, #7b2ff7); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| text-align: center; | |
| color: white; | |
| box-shadow: 0 0 25px rgba(0, 242, 254, 0.3); | |
| } | |
| /* FOOTER */ | |
| footer { | |
| margin-top: 2rem; | |
| padding: 1rem; | |
| background: linear-gradient(135deg, #7b2ff7, #4facfe, #00f2fe, #7b2ff7); | |
| text-align: center; | |
| color: #e0f7fa; | |
| } | |
| /* FORM */ | |
| textarea { | |
| width: 100%; | |
| padding: 12px; | |
| margin: 10px 0; | |
| border-radius: 10px; | |
| border: none; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: #e6f7ff; | |
| } | |
| /* effet écriture journal */ | |
| textarea::placeholder { | |
| color: #b2ebf2; | |
| font-style: italic; | |
| } | |
| button { | |
| background: linear-gradient(135deg, #4facfe, #00f2fe); | |
| color: #0f2027; | |
| padding: 10px; | |
| border: none; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| font-weight: bold; | |
| } | |
| button:hover { | |
| background: #7b2ff7; | |
| color: white; | |
| } | |
| .hero .subtitle { | |
| color: #e0f7fa; | |
| text-shadow: 0 0 8px rgba(0, 242, 254, 0.6); | |
| } | |
| .result-text { | |
| white-space: pre-wrap; /* garde les retours à la ligne */ | |
| word-break: break-word; /* coupe les longs mots */ | |
| overflow-wrap: break-word; | |
| max-width: 100%; | |
| } | |
| body { | |
| overflow-x: hidden; /* empêche le scroll horizontal */ | |
| } |