/* ============================================================
   1. IMPORT FONTS & VARIABLES CSS
   Description : Import de la police Google Fonts et définition
                des variables CSS pour une maintenance facile
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;800&display=swap');

:root {
    /* ===== PALETTE DE COULEURS PRINCIPALE ===== */
    --navy-dark: #1B3C53;              /* Bleu marine foncé - arrière-plans sombres */
    --navy-med:  #234C6A;              /* Bleu marine moyen - éléments secondaires */
    --blue-steel: rgb(69, 104, 130);   /* Bleu acier - accents et hover */
    --grey-light: #E3E3E3;             /* Gris clair - arrière-plans clairs */
    --white: #ffffff;                  /* Blanc pur - textes sur fonds sombres */

    /* ===== COULEURS DE LA LAMPE À LAVE ===== */
    --lava-coral: rgba(255, 107, 107, 0.6);    /* Rose corail - bulle 1 */
    --lava-cyan: rgba(47, 124, 165, 0.6);      /* Bleu cyan - bulle 2 */
    --lava-purple: rgba(138, 43, 226, 0.5);    /* Violet - bulle 3 */

    /* ===== VARIABLES DE CONFIGURATION ===== */
    --font-main: 'Montserrat', sans-serif;     /* Police principale du site */
    --radius: 12px;                             /* Rayon de bordure standard */
    --shadow: 0 10px 30px rgba(27, 60, 83, 0.15);       /* Ombre légère */
    --shadow-strong: 0 15px 50px rgba(27, 60, 83, 0.3); /* Ombre marquée */
}

/* ============================================================
   2. SCROLLBAR PERSONNALISÉE
   Description : Stylise la barre de défilement pour s'harmoniser
                avec le thème général du site
   Compatibilité : Webkit uniquement (Chrome, Safari, Edge)
   ============================================================ */

/* Largeur de la barre de défilement */
::-webkit-scrollbar {
    width: 12px;
}

/* Piste de la scrollbar (fond) */
::-webkit-scrollbar-track {
    background: var(--grey-light);
}

/* Poignée de défilement (thumb) */
::-webkit-scrollbar-thumb {
    background: var(--navy-med);
    border-radius: 6px;
    border: 3px solid var(--grey-light);  /* Bordure pour effet encadré */
}

/* État hover de la poignée */
::-webkit-scrollbar-thumb:hover {
    background: var(--blue-steel);
}

/* ============================================================
   3. RESET & CONFIGURATION DE BASE
   Description : Réinitialisation CSS et configuration globale
                pour assurer une cohérence entre navigateurs
   ============================================================ */

/* Reset universel avec box-sizing */
* {
    box-sizing: border-box;  /* Inclut padding et border dans la largeur/hauteur */
    margin: 0;
    padding: 0;
}

/* Configuration HTML : scroll fluide et hauteur complète */
html {
    scroll-behavior: smooth;   /* Défilement fluide pour les ancres */
    height: 100%;
    overflow: hidden;          /* Empêche le double scroll */
}

/* Configuration Body : typographie et espacement */
body {
    height: 100%;
    overflow-x: hidden;        /* Empêche le scroll horizontal */
    overflow-y: auto;          /* Active le scroll vertical */
    padding-top: 80px;         /* Espace en haut */
    padding-bottom: 80px;      /* Espace en bas */
    margin: 0;

    /* Styles de base */
    background-color: var(--grey-light);
    font-family: var(--font-main);
    color: var(--navy-dark);
    line-height: 1.8;          /* Interligne confortable pour la lecture */
    font-size: 15px;
}

/* ============================================================
   4. GESTION DES CURSEURS
   Description : Définit les comportements du curseur pour
                améliorer l'UX et indiquer les zones interactives
   ============================================================ */

/* Curseur par défaut pour les zones non interactives */
header,
.intro,
.main p,
.main li,
.sidebar,
.sidebar p,
.sidebar li,
.main h3,
.sidebar h3 {
    cursor: default;
}

/* Curseur invisible pour les éléments avec animations spéciales */
header:hover,
.intro h3,
a:hover {
    cursor: none;
}

/* Curseur texte pour les abréviations */
abbr {
    cursor: text;
}

/* ============================================================
   5. EFFET LAMPE À LAVE (ARRIÈRE-PLAN ANIMÉ)
   Description : Crée un effet de lampe à lave avec des bulles
                colorées qui flottent, fusionnent et se séparent
                en arrière-plan du site
   Technique : Utilisation de pseudo-éléments et radial-gradient
   ============================================================ */

/* Fond dégradé bleu clair (couche de base) */
body::before {
    content: "";
    position: fixed;           /* Fixé à l'écran, ne défile pas */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Dégradé vertical du bleu clair au bleu moyen */
    background: linear-gradient(180deg, #bed9f3 0%, #9dc1ff 50%, #d3e9ff 100%);

    z-index: -10;              /* Derrière tout le contenu */
    pointer-events: none;      /* N'interfère pas avec les clics */
}

/* Container des bulles animées (couche supérieure) */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5;               /* Entre le fond et le contenu */
    pointer-events: none;

    /* Trois bulles colorées créées avec radial-gradient */
    background:
        /* Bulle 1 - Rose/Corail : part du bas gauche */
        radial-gradient(circle at 30% 100%,
            var(--lava-coral) 0%,
            rgba(255, 107, 107, 0.4) 30%,
            transparent 50%),

        /* Bulle 2 - Bleu Cyan : part du haut droit */
        radial-gradient(circle at 70% 0%,
            var(--lava-cyan) 0%,
            rgba(107, 203, 255, 0.4) 30%,
            transparent 50%),

        /* Bulle 3 - Violet : reste au centre */
        radial-gradient(circle at 50% 50%,
            var(--lava-purple) 0%,
            rgba(138, 43, 226, 0.3) 25%,
            transparent 45%);

    /* Tailles initiales des bulles */
    background-size:
        400px 400px,           /* Bulle 1 */
        500px 500px,           /* Bulle 2 */
        350px 350px;           /* Bulle 3 */

    /* Positions de départ des bulles */
    background-position:
        30% 100%,              /* Bulle 1 : bas gauche */
        70% 0%,                /* Bulle 2 : haut droit */
        50% 50%;               /* Bulle 3 : centre */

    /* Flou pour créer l'effet organique de fusion */
    filter: blur(40px);

    /* Animation continue (12 secondes) */
    animation: lavaLampBubbles 12s ease-in-out infinite;
}

/* ============================================================
   6. ANIMATIONS KEYFRAMES
   Description : Définit toutes les animations keyframes utilisées
                dans le site pour les transitions et effets visuels
   ============================================================ */

/* ===== ANIMATION D'APPARITION AVEC MONTÉE ===== */
/* Utilisée pour le fade-in des éléments au chargement */
@keyframes fadeInUp {
    from {
        opacity: 0;                    /* Invisible */
        transform: translateY(30px);   /* Position basse */
    }
    to {
        opacity: 1;                    /* Visible */
        transform: translateY(0);      /* Position normale */
    }
}

/* ===== ANIMATION DE GRADIENT PULSANT (SENS NORMAL) ===== */
/* Pour le header en état normal */
@keyframes pulseGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== ANIMATION DE GRADIENT PULSANT (SENS INVERSE) ===== */
/* Pour le header au survol */
@keyframes pulseGradientReverse {
    0% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* ===== ANIMATION LAMPE À LAVE ===== */
/* Les bulles montent, fusionnent au centre, puis se séparent
   Cycle complet : 12 secondes en boucle infinie */
@keyframes lavaLampBubbles {
    /* 0% : État initial - bulles séparées */
    0% {
        background-position:
            30% 100%,              /* Bulle 1 en bas à gauche */
            70% 0%,                /* Bulle 2 en haut à droite */
            50% 50%;               /* Bulle 3 au centre */
        background-size:
            400px 400px,
            500px 500px,
            350px 350px;
    }

    /* 25% : Les bulles se rapprochent du centre */
    25% {
        background-position:
            35% 40%,               /* Bulle 1 monte */
            65% 40%,               /* Bulle 2 descend */
            50% 50%;               /* Bulle 3 reste centrée */
        background-size:
            450px 450px,           /* Légère augmentation */
            450px 450px,
            350px 350px;
    }

    /* 50% : FUSION - Toutes les bulles au centre */
    50% {
        background-position:
            50% 50%,               /* Toutes au centre */
            50% 50%,
            50% 50%;
        background-size:
            600px 600px,           /* Taille maximale pour fusion visuelle */
            600px 600px,
            500px 500px;
    }

    /* 75% : Séparation - Les bulles s'éloignent */
    75% {
        background-position:
            25% 70%,               /* Bulle 1 redescend à gauche */
            75% 30%,               /* Bulle 2 remonte à droite */
            50% 50%;               /* Bulle 3 au centre */
        background-size:
            420px 420px,
            480px 480px,
            380px 380px;
    }

    /* 100% : Retour à la position initiale (boucle parfaite) */
    100% {
        background-position:
            30% 100%,
            70% 0%,
            50% 50%;
        background-size:
            400px 400px,
            500px 500px,
            350px 350px;
    }
}

/* ============================================================
   7. LAYOUT PRINCIPAL (GRID)
   Description : Structure en grille CSS avec zones nommées
                pour un layout responsive et organisé
   Zones : header, intro, main, sidebar, footer
   ============================================================ */
.page-wrapper {
    max-width: 1200px;                 /* Largeur maximale du contenu */
    margin: 60px auto;                 /* Centrage horizontal */

    /* Effet glassmorphism : fond semi-transparent avec flou */
    background: rgba(227, 227, 227, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--radius);

    /* Ombre prononcée pour décoller du fond */
    box-shadow: var(--shadow-strong);

    padding: 0;
    overflow: hidden;                  /* Contient les éléments flottants */

    /* Configuration de la grille CSS */
    display: grid;
    grid-template-columns: 2fr 1fr;    /* Colonne gauche (2/3) + droite (1/3) */
    grid-template-areas:
        "header header"                /* Header sur toute la largeur */
        "intro intro"                  /* Intro sur toute la largeur */
        "main sidebar"                 /* Main à gauche, Sidebar à droite */
        "footer footer";               /* Footer sur toute la largeur */

    gap: 0;                            /* Pas d'espace entre zones (géré par padding) */
}

/* ============================================================
   8. HEADER (HERO SECTION AVEC ANIMATIONS)
   Description : Bannière principale avec gradient animé
   Effets : Gradient pulsant qui s'inverse au survol,
            augmentation du border-radius, apparition des titres
   ============================================================ */
header {
    grid-area: header;                 /* Se place dans la zone "header" */

    /* Gradient diagonal animé (3 nuances de bleu) */
    background: linear-gradient(-45deg,
        rgba(33, 65, 88, 0.95),
        rgb(91, 113, 129),
        #1B3C53);
    background-size: 400% 400%;        /* Taille étendue pour l'animation */

    /* Animation du gradient (sens normal) */
    animation: pulseGradient 10s ease infinite;

    /* Styles visuels */
    color: var(--white);
    padding: 80px 40px;
    text-align: center;
    position: relative;

    /* Flexbox pour centrage vertical */
    display: flex;
    flex-direction: column;
    align-items: center;

    border-radius: 10px;               /* Bordures arrondies */
    box-shadow: var(--shadow-strong);  /* Ombre forte pour effet 3D */

    transition: all 1s ease;           /* Transition fluide de toutes les propriétés */
}

/* État hover du header : inversion de l'animation */
header:hover {
    border-radius: 50px;               /* Arrondi plus prononcé au survol */

    /* Changement d'animation pour le sens inverse */
    animation: pulseGradientReverse 10s ease infinite;

    /* Gradient avec couleurs inversées */
    background: linear-gradient(-45deg,
        #1B3C53,
        rgb(91, 113, 129),
        rgba(33, 65, 88, 0.95));
    background-size: 400% 400%;
}

/* Titre principal (h1) du header */
header h1 {
    font-weight: 800;                  /* Extra gras */
    font-size: 3.5rem;                 /* Grande taille */
    text-transform: uppercase;         /* Majuscules */
    letter-spacing: 2px;               /* Espacement des lettres */
    margin-bottom: 20px;

    /* Ombre portée pour décoller le texte */
    text-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);

    /* Animation d'apparition au chargement */
    animation: fadeInUp 1s ease-out forwards;
}

/* Sous-titre (h2) du header */
header h2 {
    font-weight: 300;                  /* Léger */
    font-size: 1.2rem;
    text-transform: uppercase;
    color: var(--grey-light);

    /* Apparaît 0.5s après le h1 */
    animation: fadeInUp 1s ease-out 0.5s forwards;
    opacity: 0;                        /* Invisible au départ */

    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   9. SECTION INTRODUCTION
   Description : Section d'introduction avec titre animé et
                effet de fond au survol
   ============================================================ */

/* Container de la section intro */
.intro {
    grid-area: intro;                  /* Se place dans la zone "intro" */
    padding: 40px;
    text-align: center;
    transition: all 1s ease;
    border-bottom: 2px solid var(--grey-light);  /* Séparateur visuel */

    /* Ombre légère */
    box-shadow: 0 5px 20px rgba(27, 60, 83, 0.1);
}

/* Effet au survol : fond coloré + arrondi */
.intro:hover {
    border-radius: 25px;
    background-color: rgb(237, 230, 253);  /* Violet pastel */
    transition: all 0.4s ease-in-out;
    box-shadow: 0 8px 30px rgba(27, 60, 83, 0.2);
}

/* Titre de l'intro (h3) : "The Road to Enlightenment" */
.intro h3 {
    /* Texte avec gradient de couleur */
    background: linear-gradient(to right, #477da3, rgb(25, 3, 78));
    -webkit-background-clip: text;     /* Applique le gradient au texte */
    background-clip: text;
    color: transparent;                /* Le texte devient transparent pour voir le gradient */

    font-size: 1.8rem;
    margin-top: 30px;
    display: inline-block;             /* Nécessaire pour ::after */

    /* Position relative pour le soulignement */
    position: relative;
    transition: color 0.3s ease;
}

/* Soulignement animé sous le titre */
.intro h3::after {
    content: '';
    position: absolute;
    bottom: -5px;                      /* Sous le texte */
    left: 0;
    width: 0%;                         /* Invisible au départ */
    height: 2px;
    background: linear-gradient(to right, #477da3, rgb(25, 3, 78));  /* Même gradient */
    transition: width 0.4s ease-in-out;
}

/* Au survol : le soulignement s'étend */
.intro h3:hover::after {
    width: 100%;
}

/* Paragraphes de l'intro (summary et preamble) */
.summary p,
.preamble p {
    font-size: 16px;
    max-width: 700px;                  /* Largeur maximale pour lisibilité */
    margin: 50px auto 20px auto;       /* Centrage horizontal */
}

/* ============================================================
   10. SECTIONS MAIN & SIDEBAR
   Description : Conteneurs principaux du contenu et de la
                barre latérale avec effets glassmorphism
   ============================================================ */

/* Configuration de base commune */
.main,
.sidebar {
    padding: 40px;
    transition: all 0.4s ease;
    border-radius: 12px;
}

/* Section Main : contenu principal */
.main {
    grid-area: main;                   /* Se place dans la zone "main" */
    padding: 40px;
    transition: all 1s ease;
    border-radius: 5px;

    /* Ombre moyenne */
    box-shadow: 0 8px 25px rgba(27, 60, 83, 0.12);
}

/* Effet glassmorphism au survol du Main */
.main:hover {
    background: rgb(237, 230, 253);    /* Fond violet pastel */
    backdrop-filter: blur(5px);        /* Flou de l'arrière-plan */
    box-shadow: 0 12px 40px rgba(27, 60, 83, 0.18);
    border-radius: 50px;               /* Arrondi prononcé */
}

/* Sidebar : barre latérale droite */
.sidebar {
    grid-area: sidebar;                /* Se place dans la zone "sidebar" */
    background: var(--navy-dark);      /* Fond sombre */
    color: var(--grey-light);

    /* Ombre forte pour la démarquer */
    box-shadow: 0 10px 35px rgba(11, 24, 34, 0.25);
}

/* Survol de la sidebar */
.sidebar:hover {
    background: var(--navy-med);       /* Légèrement plus clair */
    backdrop-filter: blur(5px);
    border-radius: 50px;
    box-shadow: 0 15px 50px rgba(27, 60, 83, 0.35);
}

/* ============================================================
   11. TITRES AVEC BARRE COULISSANTE (SLIDER)
   Description : Barre horizontale qui s'étire au survol sous
                les titres h3 pour créer un effet interactif
   Applicable : Main et Sidebar
   ============================================================ */

/* Configuration de base des titres h3 */
.main h3,
.sidebar h3 {
    color: var(--navy-med);
    font-size: 1.4rem;
    margin-top: 30px;
    margin-bottom: 15px;

    position: relative;                /* Pour positionner le ::after */
    display: inline-block;             /* La barre fait la taille du texte */
    padding-bottom: 5px;               /* Espace pour la barre */
}

/* Couleur spécifique pour les titres de sidebar */
.sidebar h3 {
    color: var(--white);
}

/* La barre bleue (pseudo-élément ::after) */
.main h3::after,
.sidebar h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;

    width: 0%;                         /* Invisible au départ */
    height: 3px;

    background-color: var(--blue-steel);
    border-radius: 2px;

    /* Transition fluide sur la largeur */
    transition: width 0.4s ease-in-out;
}

/* Au survol : la barre s'étire à 100% */
.main h3:hover::after,
.sidebar h3:hover::after {
    width: 100%;
}

/* Changement de couleur du texte au survol (Main) */
.main h3:hover {
    color: var(--blue-steel);
    transition: color 0.3s ease;
}

/* Changement de couleur du texte au survol (Sidebar) */
/* Les titres deviennent blanc pur au lieu de s'assombrir */
.sidebar h3:hover {
    color: #ffffff;
    transition: color 0.3s ease;
}

/* ============================================================
   12. BARRE VERTICALE ANIMÉE SUR TEXTE
   Description : Barre verticale qui descend au survol des
                paragraphes et items de liste
   Technique : Utilisation de ::before pour créer la barre
   Applicable : Paragraphes et listes du Main et Sidebar
   ============================================================ */

/* Configuration des éléments de texte */
.main p,
.main li,
.sidebar p,
.sidebar li {
    position: relative;
    transition: color 0.3s ease;
    padding-left: 20px;                /* Espace pour la barre à gauche */
}

/* La barre verticale (pseudo-élément ::before) */
.main p::before,
.main li::before,
.sidebar p::before,
.sidebar li::before {
    content: '';
    position: absolute;

    top: 0;
    left: 0;                           /* Alignée à gauche */

    width: 3px;                        /* Épaisseur de la barre */
    height: 0%;                        /* Invisible au départ */

    background-color: var(--blue-steel);
    border-radius: 2px;
    opacity: 0.8;

    /* Transition fluide sur la hauteur */
    transition: height 0.4s ease-in-out;
}

/* Au survol : la barre descend à 100% de hauteur */
.main p:hover::before,
.main li:hover::before,
.sidebar p:hover::before,
.sidebar li:hover::before {
    height: 100%;
}

/* Mise en valeur du texte au survol */
.main p:hover,
.main li:hover,
.sidebar p:hover,
.sidebar li:hover {
    color: var(--navy-med);
}

/* ============================================================
   13. SIDEBAR - STYLES SPÉCIFIQUES
   Description : Styles pour les listes et éléments spécifiques
                de la sidebar (design-name, designer-name)
   ============================================================ */

/* Liste de la sidebar */
.sidebar ul {
    list-style: none;                  /* Supprime les puces */
    padding: 0;
    margin-top: 20px;
}

/* Items de liste individuels */
.sidebar li {
    margin-bottom: 20px;               /* Espacement vertical entre items */
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);  /* Fond légèrement visible */
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

/* Effet au survol des items de liste */
.sidebar li:hover {
    background: rgba(255, 255, 255, 0.01);  /* Fond plus discret */
    border-left: 3px solid var(--blue-steel);  /* Bordure gauche colorée */
    transform: translateX(5px);        /* Décalage vers la droite */
    color: var(--white);
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));  /* Effet lumineux */
}

/* Nom du design : style mis en avant */
.design-name {
    font-weight: 600;                  /* Semi-gras */
    font-size: 1.1rem;                 /* Plus grand */
    color: var(--white);
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;         /* Majuscules */
    letter-spacing: 1px;               /* Espacement des lettres */
}

/* Nom du designer : style plus discret */
.designer-name {
    font-weight: 300;                  /* Léger */
    font-size: 0.9rem;                 /* Plus petit */
    color: rgba(255, 255, 255, 0.7);   /* Semi-transparent */
    font-style: italic;                /* Italique */
    display: block;
}

/* ============================================================
   14. LIENS AVEC SOULIGNEMENT ANIMÉ
   Description : Style des liens avec ligne qui s'anime au survol
   Exception : Liens de la sidebar ont un style différent
   ============================================================ */

/* Style de base des liens */
a {
    position: relative;                /* Pour positionner le ::after */
    color: var(--navy-med);
    text-decoration: none;             /* Supprime le soulignement par défaut */
    font-weight: 600;
    transition: color 0.2s;
}

/* La ligne qui s'anime (pseudo-élément ::after) */
a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;                         /* Invisible au départ */
    height: 2px;
    background: var(--blue-steel);
    transition: width 0.3s ease-in-out;
}

/* Au survol : changement de couleur + ligne à 100% */
a:hover {
    color: var(--blue-steel);
}

a:hover::after {
    width: 100%;
}

/* ===== LIENS DE LA SIDEBAR (STYLE SPÉCIFIQUE) ===== */

/* Base des liens sidebar */
.sidebar a {
    color: var(--grey-light);
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

/* Désactive le soulignement animé pour les liens sidebar */
.sidebar a::after {
    content: none;
}

/* Survol des liens sidebar */
.sidebar a:hover {
    background: rgba(255,255,255,0.1);  /* Fond semi-transparent */
    border-left: 3px solid var(--white);  /* Bordure gauche blanche */
    transform: translateX(5px);        /* Décalage vers la droite */
    color: var(--white);
}

/* ============================================================
   15. FOOTER STYLISÉ AVEC ICÔNES
   Description : Pied de page avec boutons circulaires en colonne
   Icônes : HTML5, CSS3, Creative Commons, Accessibilité, GitHub
   Séparé visuellement du reste du contenu
   ============================================================ */

/* Container du footer */
footer {
    grid-area: footer;                 /* Se place dans la zone "footer" */
    background: var(--navy-dark);
    text-align: center;

    /* Espacement important pour séparer du contenu */
    padding: 50px;
    margin-top: 100px;

    /* Disposition en colonne */
    display: flex;
    flex-direction: column;            /* Boutons empilés verticalement */
    align-items: center;               /* Centre horizontalement */

    border-radius: 15px;
    transition: all 0.5s ease;
    gap: 50px;

    /* Ombre forte pour effet de profondeur */
    box-shadow: var(--shadow-strong);
}

/* Boutons circulaires du footer avec icônes */
footer a {
    color: transparent;                /* Rend le texte invisible */
    background: var(--navy-med);

    /* Dimensions circulaires */
    width: 80px;
    height: 80px;

    /* Centrage du contenu */
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;                /* Forme circulaire */

    /* Configuration de l'image de fond (icône) */
    background-size: 60%;              /* Taille de l'icône dans le cercle */
    background-repeat: no-repeat;
    background-position: center;

    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    /* Empêche le débordement tout en gardant les icônes visibles */
    overflow: visible;
    text-indent: -9999px;              /* Cache le texte hors du viewport */

    position: relative;                /* Pour assurer la stabilité de l'image */
}

/* ===== ICÔNES SPÉCIFIQUES POUR CHAQUE BOUTON ===== */

/* Bouton HTML5 */
footer a.zen-validate-html {
    background-image: url('https://api.iconify.design/mdi/language-html5.svg?color=white');
}

/* Bouton CSS3 */
footer a.zen-validate-css {
    background-image: url('https://api.iconify.design/mdi/language-css3.svg?color=white');
}

/* Bouton Creative Commons */
footer a.zen-license {
    background-image: url('https://api.iconify.design/ri/creative-commons-line.svg?color=white');
    background-size: 65%;
}

/* Bouton Accessibilité */
footer a.zen-accessibility {
    background-image: url('https://api.iconify.design/iconoir/accessibility.svg?color=white');
    background-size: 60%;
}

/* Bouton GitHub */
footer a.zen-github {
    background-image: url('https://api.iconify.design/mdi/github.svg?color=white');
}

/* Désactive le soulignement animé pour les boutons footer */
footer a::after {
    content: none;
}

/* Effet au survol : agrandissement sans rotation */
/* La rotation a été retirée pour éviter que l'icône sorte du cadre */
footer a:hover {
    background-color: var(--blue-steel);
    transform: scale(1.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

    /* Effet d'éclat lumineux */
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* ============================================================
   16. ÉLÉMENTS DÉCORATIFS (SIDEBAR)
   Description : Image décorative affichée en haut de la sidebar
                avec effet au survol
   ============================================================ */

/* Image décorative (pseudo-élément ::before) */
.design-selection::before {
    content: '';
    display: block;
    width: 100%;
    height: 150px;

    /* Image de fond */
    background-image: url('https://w.wallhaven.cc/full/e8/wallhaven-e88epr.jpg');
    background-size: cover;
    background-position: center;

    margin-bottom: 20px;
    border-radius: 15px;
    opacity: 0.8;

    /* Ombre pour faire ressortir l'image */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

    transition: all 0.3s ease;
}

/* Survol de l'image : opacité pleine + ombre plus marquée */
.design-selection::before:hover {
    opacity: 1;                        /* Opacité complète */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}