/* --- Styles Modernes & Épurés --- */
     :root {
         --color-dark: #121212;
         /* Fond très sombre */
         --color-card: #1e1e1e;
         /* Fond des cartes */
         --color-primary: #0077b5;
         /* Bleu LinkedIn/Primaire */
         --color-accent: #4c72d1;
         /* Cyan/Néon pour l'énergie */
         --color-text-light: #e0e0e0;
         --color-border: #333333;
         --spacing-large: 40px;
     }

     body {
         font-family: 'Inter', sans-serif;
         /* Police moderne */
         margin: 0;
         background-color: var(--color-dark);
         color: var(--color-text-light);
         min-height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
         background-attachment: fixed;
         /* Rend le fond plus statique */
     }

     .container {
         width: 90%;
         max-width: 900px;
         margin: var(--spacing-large) auto;
         padding: var(--spacing-large) 30px;
         background-color: var(--color-card);
         border-radius: 16px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 188, 212, 0.2);
         /* Ombre profonde + lueur néon subtile */
         animation: fadeIn 0.8s ease-out;
     }

     /* Animation d'apparition */
     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(15px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }
     .header {
        display: flex;
        flex-direction: column;

        .linkLogo {
            display: flex;
            justify-content: center;
            align-items: center;
            
            img {
                width: 30%;
            }
        }
     }
     /* Titres */
     h1 {
         color: var(--color-accent);
         text-align: center;
         font-size: 2.2em;
         margin-bottom: 5px;
         letter-spacing: 1px;
     }

     .subtitle {
         text-align: center;
         color: #999;
         margin-bottom: 30px;
         font-size: 1em;
     }

     /* Champs d'entrée stylisés */
     label {
         display: block;
         margin-top: 25px;
         margin-bottom: 10px;
         font-weight: 600;
         color: var(--color-text-light);
         transition: color 0.3s;
     }

     textarea,
     input[type="text"] {
         width: 100%;
         padding: 15px;
         background-color: #2a2a2a;
         border: 1px solid var(--color-border);
         border-radius: 8px;
         color: var(--color-text-light);
         box-sizing: border-box;
         transition: border-color 0.3s, box-shadow 0.3s;
         resize: vertical;
     }

     textarea:focus,
     input[type="text"]:focus {
         border-color: var(--color-accent);
         box-shadow: 0 0 8px rgba(0, 188, 212, 0.6);
         background-color: #222;
         outline: none;
     }

     #resultUrl {
         cursor: copy;
         background-color: #1a1a1a;
         font-family: monospace;
         font-size: 0.9em;
     }

     /* Groupement des boutons */
     .button-group {
         display: flex;
         gap: 15px;
         margin-top: 30px;
         flex-wrap: wrap;
     }

     button {
         flex-grow: 1;
         min-width: 180px;
         padding: 14px 25px;
         border: none;
         border-radius: 8px;
         cursor: pointer;
         font-size: 1em;
         font-weight: bold;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         transition: all 0.3s ease;
     }

     #generateButton {
         background-color: var(--color-accent);
         color: var(--color-dark);
         box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
     }

     #generateButton:hover {
         background-color: #00e0ff;
         transform: translateY(-2px);
     }

     #copyButton {
         background-color: var(--color-primary);
         color: var(--color-text-light);
         border: 1px solid var(--color-primary);
     }

     #copyButton:hover {
         background-color: #005f93;
         transform: translateY(-2px);
     }

     /* Séparateur minimaliste */
     hr {
         border: none;
         height: 1px;
         background-color: var(--color-border);
         margin: var(--spacing-large) 0;
     }

     /* Messages de statut */
     .message {
         margin-top: 25px;
         padding: 15px;
         border-radius: 8px;
         text-align: center;
         font-weight: 600;
         display: none;
     }

     .success {
         background-color: #004d40;
         /* Vert foncé */
         color: #4CAF50;
         border: 1px solid #4CAF50;
     }

     .error {
         background-color: #4c0000;
         /* Rouge foncé */
         color: #FF5252;
         border: 1px solid #FF5252;
     }

     /* Media Query pour la réactivité */
     @media (max-width: 600px) {
         .container {
             padding: 20px 15px;
             margin: 20px auto;
         }

         .button-group {
             flex-direction: column;
             gap: 10px;
         }

         button {
             min-width: 100%;
         }

         h1 {
             font-size: 1.8em;
         }
     }