/* Styles généraux pour le corps du document */
body {
    margin: 0;
    overflow: hidden; /* Empêche le défilement pour l'effet plein écran */
    background-color: #0d1a0d; /* Fond vert foncé pour l'ambiance rétro */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Fallback pour les navigateurs qui ne supportent pas --vh */
    height: calc(var(--vh, 1vh) * 100); /* Utilise --vh pour une hauteur consistente sur mobile */
    font-family: monospace; /* Police générique monospace pour le style terminal */
    color: #00ff00; /* Texte vert vif */
    text-shadow: 0 0 5px #00ff00; /* Ombre de texte pour un effet de lueur */
    line-height: 1.4;
    user-select: none; /* Désactive la sélection de texte */
}

/* Style pour empêcher le défilement du corps quand la modale est ouverte */
body.modal-open {
    overflow: hidden;
}

/* Conteneur principal pour l'effet CRT */
#crt-effect {
    position: relative;
    width: 95vw; /* Largeur relative à la fenêtre */
    height: 90vh; /* Fallback: réduit légèrement la hauteur */
    height: calc(var(--vh, 1vh) * 90); /* Utilise --vh pour une hauteur consistent  te sur mobile, réduite */
    max-width: 1200px; /* Largeur maximale pour les grands écrans */
    max-height: 800px; /* Hauteur maximale (peut aussi être ajustée si nécessaire) */
    background-color: #000000; /* Fond noir pour l'écran */
    border: 5px solid #222; /* Bordure épaisse simulant le cadre du moniteur */
    box-shadow: 0 0 50px rgba(0, 255, 0, 0.4), inset 0 0 20px rgba(0, 255, 0, 0.2); /* Ombre externe et interne pour la lueur */
    border-radius: 10px; /* Coins légèrement arrondis */
    overflow: hidden; /* Cache tout ce qui dépasse */
    box-sizing: border-box; /* Inclut la bordure dans la largeur/hauteur */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 5px; /* Réduit le padding pour donner plus d'espace au texte */
    z-index: 1; /* S'assure que le CRT est au-dessus du corps */
}

/* Pseudo-élément pour les lignes de balayage (scanlines) */
#crt-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 0.5%,
        transparent 1%
    ); /* Lignes horizontales fines */
    pointer-events: none; /* Permet aux événements de souris de passer à travers */
    z-index: 2; /* Au-dessus du contenu */
}

/* Pseudo-élément pour le bruit statique et la distorsion */
#crt-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%); /* Vignettage */
    background-size: 100% 100%;
    animation: flicker 0.15s infinite; /* Animation de scintillement subtile */
    pointer-events: none;
    z-index: 3; /* Au-dessus des lignes de balayage */
}

/* Animation de scintillement pour l'effet de bruit */
@keyframes flicker {
    0% { opacity: 0.2; }
    50% { opacity: 0.3; }
    100% { opacity: 0.2; }
}

/* Conteneur principal du BBS */
#main-bbs {
    display: flex; /* Utilisé pour le layout flexbox */
    flex-direction: column; /* Empile les éléments verticalement */
    flex-grow: 1; /* Prend l'espace disponible */
    width: 100%;
    height: 100%; /* La hauteur remplira le CRT */
    padding: 5px; /* Conserve un petit padding interne pour le BBS */
    box-sizing: border-box;
    overflow: hidden; /* Empêche le défilement de ce conteneur */
    position: relative;
    opacity: 1; /* Commence visible */
    transition: opacity 1s ease-in;
}

/* Nouvelle zone pour le titre principal au-dessus de l'affichage divisé */
#main-title-area {
    display: none; /* Caché par défaut, géré par JS */
    text-align: center;
    font-size: clamp(1rem, 4vw, 2rem); /* Taille de police réactive pour le titre principal */
    color: #00ff00;
    text-shadow: 0 0 8px #00ff00;
    padding: 10px 0;
    flex-shrink: 0; /* Empêche le rétrécissement */
    box-sizing: border-box;
}

/* Nouvelle zone pour l'affichage initial (image + menu texte) */
#initial-display-area {
    display: none; /* Caché par défaut, géré par JS */
    flex-direction: row; /* Disposition en colonnes par default */
    flex-grow: 1; /* Prend l'espace vertical disponible */
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 10px; /* Espace avant la ligne de commande */
    overflow-y: hidden; /* Par défaut, pas de défilement ici, géré par l'enfant */
}

#menu-image-panel {
    flex-basis: 40%; /* 40% de la largeur pour l'image */
    display: flex;
    flex-direction: column; /* Pour empiler le titre et l'image */
    justify-content: flex-start; /* Aligne le contenu en haut */
    align-items: center;
    overflow: hidden; /* Pour gérer le contenu */
    padding-right: 10px; /* Espace entre l'image et le texte */
    box-sizing: border-box;
}

#menu-text-panel {
    flex-basis: 60%; /* 60% de la largeur pour le texte du menu */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligne le texte en haut */
    box-sizing: border-box;
}


/* Zone de sortie du texte du BBS (sera à l'intérieur de #menu-text-panel ou utilisée seule) */
#bbs-output {
    white-space: pre-wrap; /* Préserve les retours à la ligne et les espaces */
    margin-bottom: 0; /* Pas de marge en bas quand dans un panneau */
    font-size: clamp(0.7rem, 2.5vw, 1.2rem);
    word-break: break-all; /* Pour les très longs mots/URLs */
    flex-grow: 1; /* Prend tout l'espace disponible par default */
    overflow-y: auto; /* Permet le défilement du texte de sortie */
    /* Styles pour la barre de défilement verticale visible */
    scrollbar-width: thin; /* Pour Firefox */
    scrollbar-color: #00ff00 #1a1a1a; /* Pour Firefox (thumb track) */
    display: flex; /* Utilise flex pour le contenu interne */
    flex-direction: column; /* Empile le contenu */
    justify-content: flex-start; /* Aligne le contenu au début pour le menu */
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
    width: 100%; /* Ensure it always takes 100% of its parent's width */
    box-sizing: border-box; /* Inclut padding/border dans la largeur totale */
    text-align: left; /* Aligne le texte à gauche */
}

/* Styles pour la barre de défilement Webkit (Chrome, Safari, Edge) */
#bbs-output::-webkit-scrollbar {
    width: 8px; /* Largeur de la barre de défilement */
}

#bbs-output::-webkit-scrollbar-track {
    background: #1a1a1a; /* Couleur de fond de la piste */
    border-radius: 10px;
}

#bbs-output::-webkit-scrollbar-thumb {
    background: #00ff00; /* Couleur du "pouce" de la barre de défilement */
    border-radius: 10px;
}

#bbs-output::-webkit-scrollbar-thumb:hover {
    background: #00cc00; /* Couleur du "pouce" au survol */
}


/* Styles pour les éléments de menu cliquables */
.menu-item {
    cursor: pointer;
    /* Suppression des styles spécifiques pour que le texte ressemble à du texte normal */
    /* Il héritera des styles du body */
    color: inherit;
    text-shadow: inherit;
    font-size: inherit;
    transition: none; /* Supprime toute transition */
}

.menu-item:hover {
    /* Suppression des effets de survol spécifiques pour une apparence "normale" */
    color: inherit;
    text-shadow: inherit;
    text-decoration: none; /* Empêche tout soulignement par défaut */
}

/* NEW: Styles pour le lien de retour au menu dans les instructions */
.clickable-return-link {
    cursor: pointer;
    color: inherit; /* Hérite la couleur du parent */
    text-shadow: inherit; /* Hérite l'ombre de texte du parent */
    text-decoration: none; /* Pas de soulignement */
    font-size: inherit; /* Hérite la taille de police du parent */
    display: block; /* S'assure que le span prend une ligne complète */
}
.clickable-return-link:hover {
    color: inherit;
    text-shadow: inherit;
    text-decoration: none;
}


.menu-text-content { /* Conteneur pour le texte qui est tapé */
    white-space: pre-wrap; /* Préserve les espaces et les retours à la ligne */
    display: block; /* S'assure qu'il prend toute la largeur */
    /* Les styles de couleur et d'ombre de texte sont hérités du body */
    font-size: inherit; /* Hérite de la taille de police du parent */
}

/* New general style for section titles */
.section-title {
    text-align: center;
    font-size: clamp(1rem, 3.5vw, 1.8rem); /* Ajustez si nécessaire */
    color: #00ff00;
    text-shadow: 0 0 8px #00ff00;
    padding-bottom: 5px; /* Espace après le titre */
    margin-top: 0; /* Changed to 0 as it's now inside projects-heading-area */
    margin-bottom: 5px; /* Marge avant le contenu */
    box-sizing: border-box;
    width: 100%; /* Assure qu'il prend toute la largeur de son conteneur */
    display: block; /* Assure qu'il prend sa propre ligne */
}

/* Zone pour le titre fixe "Mes projets" et autres titres de section */
#projects-heading-area {
    display: none; /* Managed by JS, shown for 'projects' and 'content' modes */
    padding: 5px;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0; /* Assure qu'il ne se réduit pas */
    margin-bottom: 10px; /* Space below the heading area */
    width: 100%; /* Ensure this area takes full width */
}
/* Styles pour le h2 à l'intérieur de projects-heading-area */
#projects-heading-area h2 {
    margin: 0; /* Réinitialise les marges par défaut de h2 pour éviter les conflits */
    padding: 0; /* Réinitialise les paddings par défaut de h2 */
}


/* Conteneur pour le contenu dynamique (le tableau des projets) */
#dynamic-content-area {
    display: flex; /* Flexbox pour centrer le contenu dynamique */
    flex-direction: column; /* Pour organiser le contenu interne */
    justify-content: flex-start; /* Aligne le contenu en haut pour que le tableau soit en haut */
    align-items: center;
    width: 100%;
    height: auto; /* La hauteur est gérée par flex-grow quand il est actif */
    flex-grow: 1; /* Le tableau prend l'espace flexible restant */
    overflow-y: scroll; /* Garde la barre de défilement verticale visible */
    padding-bottom: 10px; /* Empêche le contenu de coller à la ligne de commande */
    box-sizing: border-box; /* Inclut le padding dans la taille */
}
/* ADDED: Pour rendre la barre de défilement visible dans dynamic-content-area sur Webkit */
#dynamic-content-area::-webkit-scrollbar {
    width: 8px; /* Largeur de la barre de défilement */
}

/* OPTIONAL: Style de la barre de défilement pour Webkit (personnalisation) */
#dynamic-content-area::-webkit-scrollbar-track {
    background: #1a1a1a; /* Couleur de fond de la piste */
    border-radius: 10px;
}
#dynamic-content-area::-webkit-scrollbar-thumb {
    background: #00ff00; /* Couleur du "pouce" de la barre de défilement */
    border-radius: 10px;
}
#dynamic-content-area::-webkit-scrollbar-thumb:hover {
    background: #00cc00; /* Couleur du "pouce" au survol */
}


/* Styles pour le conteneur de l'image (utilisé pour le profil d'introduction) */
.image-container {
    width: 80%; /* Prend plus de largeur pour l'impact */
    max-width: 300px; /* Limite la largeur maximale pour les grands écrans */
    margin: 0 auto; /* Centrer le conteneur de l'image horizontalement */
    overflow: hidden; /* Pour que clip-path fonctionne correctement */
    box-sizing: border-box; /* Inclut le padding/bordure dans la largeur */
    display: block; /* S'assure qu'il se comporte comme un bloc */
    text-align: center; /* Pour centrer l'image à l'intérieur */
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
    border: 2px solid #00ff00; /* Bordure verte pour un look rétro */
    clip-path: inset(100% 0 0% 0); /* Masque tout au début, du haut vers le bas */
    animation: revealFromBottom 2s steps(30) forwards; /* L'animation de révélation */
    /* Ajout de filtres pour un look rétro CRT */
    filter: brightness(150%) sepia(100%) hue-rotate(80deg) saturate(200%); /* Teinte verdâtre + contraste */
    image-rendering: pixelated; /* Applique la pixellisation */
    object-fit: contain; /* S'assure que l'image s'adapte sans être coupée */
}

/* Keyframes pour l'animation de révélation (ajouté) */
@keyframes revealFromBottom {
    0% { clip-path: inset(100% 0 0% 0); } /* Commence masqué par le haut */
    100% { clip-path: inset(0% 0 0% 0); } /* Révèle entièrement */
}

/* Styles spécifiques pour le tableau des projets */
.projects-table-styles {
    width: 100%;
    display: flex; /* Utilise flex pour le centrage vertical dans dynamic-content-area */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Aligne le contenu en haut pour que le tableau soit en haut */
    text-align: center;
    padding: 10px 10px 60px 10px; /* MODIFIÉ: padding-bottom à 60px */
    box-sizing: border-box;
}

.project-table {
    width: 100%;
    border-collapse: collapse; /* Supprime les espaces entre les cellules */
    font-size: clamp(0.7rem, 2.2vw, 1.1rem); /* Taille de police réactive pour le tableau */
    table-layout: fixed; /* IMPORTANT : Assure que les largeurs de colonne sont respectées */
    opacity: 0; /* Caché initialement pour l'animation */
    transition: opacity 0.5s ease-in; /* Transition pour l'apparition du tableau */
    margin-bottom: 20px; /* Espace entre le tableau et le texte "Appuyez sur une touche" */
}

.project-table, .project-table th, .project-table td {
    border: 1px solid #00ff00; /* Bordures vertes */
}

.project-table th, .project-table td {
    padding: 8px;
    vertical-align: top; /* Alignement en haut pour le contenu */
    box-sizing: border-box;
    text-align: left; /* Alignement par défaut du texte des cellules */
}

.table-header {
    background-color: #006600; /* Fond plus foncé pour les en-têtes */
    color: #00ff00;
    font-weight: bold;
    padding: 10px;
    text-align: center; /* Centre le texte du titre du projet */
}

/* Nouvelle règle pour la ligne de données de chaque projet */
.project-data-row {
    display: table-row; /* Assure que cette ligne se comporte comme une ligne de tableau */
}

.project-data-row .image-cell {
    width: 120px; /* Largeur fixe pour l'image sur les écrans plus grands */
    min-width: 120px; /* Largeur minimale pour l'image */
    max-width: 120px; /* Largeur maximale pour l'image, garantissant la fixité */
    display: flex; /* Utilise Flexbox pour le centrage du contenu */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    text-align: center; /* Fallback pour le texte, même si l'image est un bloc */
}

.project-data-row .description-cell {
    width: auto; /* Prend la largeur restante */
    text-align: left;
    border-bottom: none; /* Supprime la bordure inférieure pour la description */
}

/* Styles pour le contenu texte tapé dans les cellules du tableau (description et technologies) */
.typed-text-content {
    color: inherit; /* S'assure que le texte hérite de la couleur verte par défaut */
    text-shadow: inherit; /* S'assure que le texte hérite de l'ombre par défaut */
    /* Fallback/explicit default green if inheritance is problematic for some reason */
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
}

/* Nouveau style pour les technologies pour une distinction visuelle */
.technologies-text-content {
    color: #00ffff !important; /* Couleur cyan pour les technologies */
    text-shadow: 0 0 3px #00ffff !important; /* Ombre de texte cyan */
    margin-top: 5px; /* Petite marge au-dessus des technologies */
    display: block; /* S'assure que cela prend une nouvelle ligne */
}


.image-cell img {
    max-width: 100%;
    height: auto;
    display: block; /* Assure que l'image se comporte comme un bloc pour le margin auto */
    margin: 0 auto; /* Centrer l'image horizontalement */
    border: 1px dashed #00cc00; /* Bordure discrète */
    filter: brightness(120%) sepia(80%) hue-rotate(80deg) saturate(150%); /* Effet CRT */
    image-rendering: pixelated; /* Pixellise l'image */
    object-fit: contain; /* S'assure que l'image s'adapte sans être coupée */
    opacity: 0; /* Rendu invisible par défaut */
    visibility: hidden; /* Cache l'élément et le retire du flux pour éviter le "flash" */
}

/* Classe pour déclencher l'animation de l'image du tableau */
.table-image-reveal-animation {
    animation: revealFromBottomTableImage 1s steps(20) forwards; /* Animation plus rapide pour les images du tableau */
}

@keyframes revealFromBottomTableImage {
    0% {
        clip-path: inset(100% 0 0% 0);
        opacity: 0;
        visibility: hidden; /* S'assure que l'élément est caché au début de l'animation */
    }
    1% { /* Applique la visibilité dès le début de l'animation pour permettre la transition */
        visibility: visible;
    }
    100% {
        clip-path: inset(0% 0 0% 0);
        opacity: 1;
        visibility: visible; /* S'assure que l'élément est visible à la fin */
    }
}


/* Ligne de commande */
#command-line {
    display: flex;
    align-items: baseline;
    width: 100%;
    font-size: clamp(0.7rem, 2.5vw, 1.2rem);
    margin-top: 5px; /* Petite marge au-dessus */
    flex-shrink: 0; /* Empêche le rétrécissement */
    background: rgb(0, 0, 0); /* Défini sur noir */
    border: ridge; /* Défini sur ridge */
    outline: none; /* Défini sur none */
    color: #ffffff; /* Défini sur blanc */
    text-shadow: none; /* Retiré l'ombre de texte pour mieux voir le blanc sur noir */
    padding: 2px 5px; /* Ajout d'un léger padding pour l'esthétique du bord */
    box-sizing: border-box; /* Inclut le padding dans la largeur/hauteur */
}

/* Input de la ligne de commande */
#bbs-input {
    background: rgb(0, 0, 0); /* Défini sur noir */
    border: none; /* Retiré border: ridge */
    outline: none; /* Défini sur none */
    color: #ffffff; /* Défini sur blanc */
    text-shadow: none; /* Retiré l'ombre de texte pour mieux voir le blanc sur noir */
    font-family: monospace; /* Police générique monospace */
    flex-grow: 1;
    padding: 0;
    margin-left: 5px; /* Petit espace après le prompt */
    font-size: clamp(0.7rem, 2.5vw, 1.2rem);
}

/* Nouvelle section pour les instructions du BBS (devrait être ajoutée à votre HTML) */
#bbs-instructions {
    margin-top: 10px; /* Espace au-dessus de la section */
    text-align: center; /* Centre le texte */
    font-size: clamp(0.7rem, 2.3vw, 1.1rem); /* Taille de police réactive */
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00; /* Ombre de texte */
    flex-shrink: 0; /* Empêche le rétrécissement */
}

#bbs-instructions p {
    margin: 5px 0; /* Espacement entre les deux lignes de texte */
}


/* Placeholder pour la barre d'erreurs */
#error-message {
    color: #ff0000; /* Texte rouge pour les erreurs */
    text-shadow: 0 0 5px #ff0000;
    margin-top: 5px;
    min-height: 1.2em; /* Réserve de l'espace pour éviter les sauts de mise en page */
    font-size: clamp(0.7rem, 2.5vw, 1.2rem);
    flex-shrink: 0; /* Empêche le rétrécissement */
}

/* Message de l'application (modale simple) */
.app-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1a1a1a;
    border: 2px solid #00ff00;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
    z-index: 1001;
    text-align: center;
    font-family: monospace; /* Police générique monospace */
    color: #00ff00;
    font-size: clamp(0.8rem, 3vw, 1.2rem);
    border-radius: 8px;
}

.app-message button {
    background-color: #00ff00;
    color: #000;
    border: none;
    padding: 8px 15px;
    margin-top: 15px;
    cursor: pointer;
    font-family: monospace; /* Police générique monospace */
    font-size: clamp(0.7rem, 2.5vw, 1rem);
    border-radius: 5px;
    transition: background-color 0.2s;
}

.app-message button:hover {
    background-color: #00cc00;
}

/* Styles pour les liens */
a {
    color: #00ffff; /* Couleur cyan pour les liens */
    text-decoration: none; /* Pas de soulignement par défaut */
    text-shadow: 0 0 5px #00ffff;
}

a:hover {
    text-decoration: underline; /* Souligne au survol */
}

/* Styles spécifiques pour les modales des pages de projets */
.windows-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent sombre */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Assure que la modale est au-dessus du reste du contenu */
}

.windows-modal-dialog {
    background-color: #C0C0C0; /* Couleur de fond gris clair Windows 3.1 */
    border: 3px outset #FFFFFF; /* Bordure 3D "outset" blanche */
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.5); /* Ombre portée noire */
    width: 80vw; /* Largeur de la modale */
    max-width: 700px; /* Largeur maximale */
    height: 80vh; /* Hauteur de la modale */
    max-height: 600px; /* Hauteur maximale */
    display: flex;
    flex-direction: column;
    font-family: 'MS Sans Serif', 'Arial', sans-serif; /* Police typique Windows 3.1 */
    font-size: 0.9rem;
    color: #000; /* Texte noir */
}

.windows-modal-header {
    background: linear-gradient(to right, #000080, #108ED6); /* Dégradé de bleu typique de la barre de titre */
    color: #FFF;
    padding: 5px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    cursor: default; /* Curseur par défaut */
    border-bottom: 2px solid #808080; /* Ligne de séparation sous l'en-tête */
}

.windows-modal-title {
    flex-grow: 1; /* Prend l'espace restant */
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.windows-modal-close-button {
    background-color: #C0C0C0;
    border: 2px outset #FFFFFF;
    color: #000;
    font-weight: bold;
    padding: 1px 6px;
    cursor: pointer;
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 0.9rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 20px;
    min-height: 20px;
}

.windows-modal-close-button:active {
    border-style: inset; /* Effet de bouton pressé */
}

.windows-modal-content {
    flex-grow: 1; /* Prend l'espace disponible */
    background-color: #FFFFFF; /* Fond blanc pour le contenu */
    padding: 10px;
    overflow-y: auto; /* Permet le défilement du contenu */
    border-top: 1px solid #C0C0C0; /* Bordure supérieure douce */
    border-bottom: 1px solid #C0C0C0; /* Bordure inférieure douce */
}


/* ======================================= */
/* Styles Responsifs pour le tableau des projets */
/* ======================================= */
@media (max-width: 768px) {
    .project-table {
        /* Retire la disposition fixe pour permettre aux éléments de s'empiler */
        table-layout: auto;
    }

    .project-table thead,
    .project-table tbody,
    .project-table tr {
        display: block; /* Force les éléments de tableau à se comporter comme des blocs */
        width: 100%; /* Occupe toute la largeur disponible */
    }

    /* Rendre les en-têtes de colonnes visibles et s'assurer qu'ils se comportent comme des blocs */
    .project-table thead th.table-header {
        position: static; /* Retire le positionnement absolu */
        top: auto;
        left: auto;
        display: block; /* S'assure qu'il prend toute la largeur */
        width: 100%; /* S'assure qu'il prend toute la largeur */
        box-sizing: border-box; /* Inclut le padding/bordure dans la largeur */
    }

    /* Affiche chaque cellule comme un bloc */
    .project-table td {
        display: block;
        width: 100% !important; /* Force la largeur complète, priorité importante */
        border: none; /* Retire les bordures internes des cellules pour un look plus propre empilé */
        text-align: center; /* Centre le contenu des cellules */
        padding: 10px 5px; /* Plus de padding pour la lisibilité */
    }
    
    /* Ajoute une bordure visuelle entre chaque paire image/description pour les projets */
    .project-table tr {
        border-bottom: 3px solid #006600; /* Ligne de séparation plus visible entre les projets */
        margin-bottom: 15px; /* Espacement entre les blocs de projets */
    }
    .project-table tr:last-child {
        border-bottom: none; /* Pas de bordure après le dernier projet */
    }

    /* Ajustements spécifiques pour les cellules d'image et de description */
    .image-cell,
    .description-cell,
    .technologies-cell { /* Inclure technologies-cell pour les styles mobiles */
        width: 100% !important; /* Chaque cellule prend 100% de la largeur de la ligne */
    }

    /* L'image cell ne doit pas avoir de rowspan sur mobile, car les tr sont 'display: block' */
    .image-cell[rowspan] {
        rowspan: unset; /* Annule le rowspan sur mobile */
    }

    .image-cell img {
        max-width: 80%; /* Limite la largeur de l'image pour qu'elle ne soit pas trop grande */
        margin-top: 10px; /* Espace au-dessus de l'image */
        margin-bottom: 10px; /* Espacement en-dessous de l'image */
    }
}