/* ========= Theme extras ========= */
/* Provide better form colors and selections */
::selection{ background: rgba(255,212,0,.35); }

input, textarea, select, button{
  font: inherit;
}


/* Forms (generic) */
form{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
label{
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
}
input[type="text"], input[type="email"], input[type="password"], textarea, select{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--surface2);
  color: var(--text);
  outline: none;
}
textarea{ min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus{
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 4px rgba(124,58,237,.16);
}
.form-card{
  max-width: 720px;
  margin: 0 auto;
}


            /* 1. FORCE LE BLANC ET LA TAILLE MOYENNE SUR LES TEXTES (DEMANDE PROF) */
            .project h3, .project h4, .project p, .project li, .intro p, header h1 {
                color: #ffffff !important;
            }
            .project p, .project li, .intro p {
                font-size: 1.05rem !important;
                line-height: 1.6 !important;
            }
            .dates {
                color: #8b5cf6 !important;
                font-weight: bold;
            }

            /* 2. ESPACEMENT DES RÉSEAUX SOCIAUX (FOOTER) */
            footer .colonne .Logo {
                display: flex !important;
                align-items: center !important;
                margin-bottom: 20px !important; /* Espacement vertical entre Twitter, Insta, etc. */
                gap: 12px !important;
            }
            footer .colonne .Logo img {
                width: 22px !important;
                height: auto !important;
            }
            footer .colonne h3 {
                margin-bottom: 25px !important;
                color: #ffffff !important;
            }
            footer .colonne a {
                color: #ffffff !important;
                text-decoration: none;
            }
        </style>
        <style>
    /* 1. MISE EN BLANC ET TAILLE DU TEXTE DU FOOTER */
    footer .colonne h3 {
        color: #ffffff !important;
        margin-bottom: 25px !important; /* Espace sous le titre */
        font-size: 1.2rem !important;
    }

    footer .colonne a {
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 1.05rem !important;
        display: inline-block; /* Permet de mettre des marges */
        margin-bottom: 12px !important; /* Espace entre les liens classiques */
    }

    /* 1. ON ESPACE LES RÉSEAUX SOCIAUX (LES DIV LOGO) */
    footer .colonne .Logo {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 15px !important; /* Espace vertical entre Twitter, Insta, etc. */
        gap: 12px !important; /* Espace entre l'image et le texte */
    }

    footer .colonne .Logo img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
    }

    /* 2. ON ESPACE LES LIENS DES AUTRES COLONNES (INFOS, RÉALISATIONS) */
    footer .colonne a {
        display: block !important; /* Force chaque lien sur une nouvelle ligne */
        margin-bottom: 10px !important; /* Espace entre les liens */
        color: #ffffff !important; /* Tout en blanc pur */
        text-decoration: none !important;
        font-size: 0.95rem !important;
        transition: 0.3s !important;
    }

    /* 3. LE TITRE DE CHAQUE COLONNE */
    footer .colonne h3 {
        color: #ffffff !important;
        margin-bottom: 25px !important;
        font-size: 1.1rem !important;
        border-left: 3px solid #8b5cf6;
        padding-left: 10px;
    }

    /* 4. ALIGNEMENT DU CONTENEUR GLOBAL */
    .footer-inner {
        display: flex !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        padding: 50px 20px !important;
        gap: 30px !important;
    }

    /* Effet de survol pour faire "pro" */
    footer .colonne a:hover {
        color: #8b5cf6 !important;
        transform: translateX(5px);
    }
    
    /* 1. RÉDUIRE L'ESPACEMENT ENTRE LES COLONNES */
.footer-inner {
    display: flex !important;
    justify-content: center !important; /* On centre les colonnes au lieu de les écarter au maximum */
    flex-wrap: wrap !important;
    padding: 40px 20px !important;
    gap: 60px !important; /* On définit un espace fixe et moyen entre chaque catégorie */
}

/* 2. ALIGNEMENT DES TEXTES */
footer .colonne {
    min-width: 200px; /* Assure que les colonnes ont une largeur minimale cohérente */
    text-align: left !important;
}

/* 3. ESPACEMENT SOUS LES TITRES DE CATÉGORIE */
footer .colonne h3 {
    color: #ffffff !important;
    margin-bottom: 20px !important; /* Espace équilibré sous le titre */
    font-size: 1.1rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 4. ESPACE ENTRE LES LIENS ET LOGOS */
footer .colonne .Logo, 
footer .colonne a {
    margin-bottom: 12px !important; /* Espacement vertical modéré et uniforme */
}

/* --- NOUVEAU DESIGN FOOTER TYPE "ILLUZIONAIR" --- */

.footer-inner {
    display: flex !important;
    justify-content: space-between !important; /* Garde l'écartement horizontal large */
    align-items: flex-start !important;
    padding: 60px 20px !important;
    max-width: 1200px;
    margin: 0 auto;
}

/* La colonne de présentation à gauche */
.colonne-identite {
    flex: 1;
    padding-right: 40px;
}

/* Les colonnes de liens */
footer .colonne {
    flex: 0 1 auto;
    min-width: 150px;
}

/* RESSERREMENT VERTICAL : On diminue les marges ici */
footer .colonne h3 {
    color: #ffffff !important;
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px !important; /* Titre plus proche des liens */
}

footer .colonne .Logo, 
footer .colonne a {
    margin-bottom: 8px !important; /* Liens bien resserrés entre eux */
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 0.9rem;
}

footer .colonne a:hover {
    color: #8b5cf6 !important;
}

/* --- RESSERREMENT VERTICAL DU FOOTER (STYLE ILLUZIONAIR) --- */

/* 1. Réduction de l'espace entre chaque réseau social */
.footer-inner .colonne .Logo {
    margin-bottom: 8px !important; /* On passe de 20px à 8px pour resserrer */
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 2. Réduction de l'espace entre les liens textuels (Projets, Légal) */
.footer-inner .colonne a {
    margin-bottom: 6px !important; /* Resserre les liens qui n'ont pas de logo */
    display: block;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 0.9rem;
}

/* 3. Rapprochement du titre par rapport à la liste */
.footer-inner .colonne h3 {
    margin-bottom: 12px !important; /* Le titre est plus proche du premier lien */
    font-size: 1rem;
    color: #ffffff !important;
    text-transform: uppercase;
}

/* 4. On garde l'espacement large de gauche à droite entre les colonnes */
.footer-inner {
    display: flex !important;
    justify-content: space-between !important; 
    gap: 40px; /* Espace horizontal maintenu */
    padding: 40px 20px;
}

footer .colonne h3 {
    font-size: 1.25rem !important; /* On augmente le titre */
    letter-spacing: 1.5px;         /* Un peu d'espacement pour le look pro */
    margin-bottom: 15px;
}

footer .colonne a {
    font-size: 0.95rem !important; /* On laisse la taille naturelle */
}

#themeToggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.2s;
    line-height: 1;
}

#themeToggle:hover {
    background: rgba(139, 92, 246, 0.15);
}