* {
    box-sizing: border-box; /* Les bordures et padding ne grossissent plus les boîtes */
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: url("./images/bliss-600dpi.png") no-repeat center center fixed;
    background-size: cover;
    font-family: "Tahoma", sans-serif;
    overflow: hidden;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #245edb 92%, #333 100%);
    border-top: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    z-index: 1000;
}

.task-area {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
}

.task-button {
    width: 175px; /* Largeur fixe comme sur XP (ou max-width) */
    height: 40px; /* Un peu plus petit que la barre elle-même */
    margin-right: 2px;
    
    /* Le style Bleu XP "Relâché" */
    background: linear-gradient(to bottom, #3E94EA 0%, #2260D6 100%);
    border: 1px solid #143586;
    border-radius: 3px;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3); /* Petit reflet en haut */
    
    /* Texte et alignement */
    color: white;
    font-size: 11px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    cursor: pointer;
    user-select: none;
    opacity: 0.9;
}

.task-button:hover {
    filter: brightness(1.1); /* Plus clair au survol */
}

/* Quand le bouton est "Actif" (fenêtre ouverte et sélectionnée) */
.task-button.active {
    /* Style "Enfoncé" (plus foncé) */
    background: linear-gradient(to bottom, #18469C 0%, #174395 100%);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
    opacity: 1;
}

.start-btn {
    height: 100%;
}

.start-btn button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    height: 100%;
    width: 140px;
    padding: 0 15px 0 15px;
    margin-right: 10px;

    background: linear-gradient(to bottom, #63b900 0%, #3d7f00 100%);
    border-radius: 0 15px 15px 0;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);

    color: white;
    font-weight: bold;
    font-style: italic;
    font-size: 15px;
    font-family: "MS Sans Serif", Arial, sans-serif;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.start-btn button:hover {
    background: linear-gradient(to bottom, #7fc900 0%, #4a9900 100%);
}

.start-btn button:active {
    background: linear-gradient(to bottom, #4a9900 0%, #7fc900 100%);
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.3), inset -1px -1px 0 rgba(255, 255, 255, 0.3);
}

.start-btn button,
.start-btn span {
    cursor: pointer;
}

.window {
    width: 400px;
    min-height: 200px;
    background-color: #ECE9D8;
    border: 1px solid #0055EA;
    border-radius: 8px 8px 0 0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);

    /* --- ICI C'EST IMPORTANT --- */
    display: none; /* Caché par défaut */
    flex-direction: column; /* Prépare la colonne pour quand ce sera visible */
    /* --------------------------- */

    position: absolute;
    top: 50px;
    left: 50px;

    z-index: 100;

    transition:
       width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
       height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
       top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
       left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
       border-radius 0.4s ease;
       
   /* Astuce performance pour fluidifier l'animation */
   will-change: top, left, width, height;
}

.window.is-dragging {
    transition: none !important;
}

/* --- ÉTAT MAXIMISÉ --- */
.window.maximized {
    /* Force la position en haut à gauche */
    top: 0 !important;
    left: 0 !important;
    
    /* Prend toute la largeur et hauteur (moins la barre des tâches de 50px) */
    width: 100% !important;
    height: calc(100vh - 50px) !important;
    
    /* Enlève les arrondis pour coller aux coins */
    border-radius: 0;
    border: none;
    
    /* Assure qu'on ne peut pas la bouger */
    transform: none !important;
}

/* Quand la fenêtre est maximisée, on change le curseur de la barre de titre */
.window.maximized .title-bar {
    cursor: default; /* On ne peut plus drag & drop */
}

.desktop-icons {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100px;
}

.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px black;
    cursor: pointer;
    width: 80px;
}

.icon img {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
}

.title-bar {
    background: linear-gradient(to bottom, #0058EE 0%, #3593FF 4%, #288EFF 18%, #127DFF 100%);
    padding: 5px 8px;
    border-radius: 6px 6px 0 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    color: white;
    font-weight: bold;
    text-shadow: 1px 1px #000;
    cursor: move; /* Change la souris en croix de déplacement, c'est laid, on le change juste quand on va avoir le mouse enfocee plus tard */
    user-select: none;
}

.title-bar-controls {
    display: flex;
    gap: 2px;
}

.title-bar-controls button {
    width: 20px;
    height: 20px;
    border: 1px solid white;
    border-radius: 3px;
    background-color: #ECE9D8;
    cursor: pointer;
    font-size: 10px;
    line-height: 10px;
    padding: 0;
}

.title-bar-controls button[aria-label="Close"] {
    background-color: #E04343;
    color: white;
    font-weight: bold;
    border: 1px solid #fff;
}

.title-bar-controls button[aria-label="Minimize"] {
    background-color: #eef106;
    color: black;
    font-weight: bold;
    border: 1px solid #fff;
}

.title-bar-controls button[aria-label="Maximize"] {
    background-color: #48cc27;
    color: black;
    font-weight: bold;
    border: 1px solid #fff;
}

.window-body {
    background-color: #ECE9D8;
    border: 1px solid #D3D3D3; /* La petite bordure grise interne */
    margin: 3px; /* La petite marge style XP entre le bleu et le blanc */
    color: black;

    display: flex;
    flex-direction: column;
    
    /* TRÈS IMPORTANT : flex-grow remplace height: 100% */
    height: auto; 
    flex-grow: 1; 
    padding: 0; 
    
    /* Gère le dépassement si le contenu est trop grand */
    overflow: hidden; 
}

.system-tray {
    background-color: #0b9aee;
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    
    border-left: 1px solid #1042af;
    box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2); /* Effet "enfoncé" */
    
    color: white;
    font-size: 14px;
}    

.system-tray:hover {
    cursor: default;
}

/* 1. Barre d'adresse (Décoration) */
.address-bar {
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #ECE9D8;
    border-bottom: 1px solid #D3D3D3;
    font-size: 11px;
    gap: 5px;
}

.address-input {
    background: white;
    border: 1px solid #7F9DB9;
    padding: 2px 5px;
    flex-grow: 1;
}

/* 2. La grille des fichiers */
.explorer-grid {
    flex-grow: 1; /* Prend tout l'espace restant */
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-wrap: wrap; /* Revient à la ligne si pas de place */
    align-content: flex-start; /* Colle les éléments en haut */
    gap: 10px;
    background-color: white;
}

/* 3. Un fichier / Projet */
.file-item {
    width: 70px;
    text-align: center;
    border: 1px solid transparent; /* Pour éviter le saut au hover */
    padding: 5px;
    cursor: pointer;
}

.file-item a {
    text-decoration: none;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
}

.file-item img {
    width: 32px;
    height: 32px;
    margin-bottom: 3px;
}

/* L'EFFET XP : Le bleu au survol */
.file-item:hover {
    background-color: #EBF4FE; /* Bleu très clair */
    border: 1px solid #BCC7D8; /* Bordure bleu gris */
    border-radius: 3px;
}
.file-item:hover span {
    color: #0055EA; /* Texte devient bleu */
}

/* 4. Barre de statut en bas */
.status-bar {
    flex-shrink: 0; /* Ne rétrécit pas */
    border-top: 1px solid #D3D3D3;
    background-color: #ECE9D8;
    padding: 2px 5px;
    font-size: 11px;
    color: #333;
}

/* Ajustement spécifique pour la fenêtre contact */
.contact-body {
    background-color: #ECE9D8; /* Fond beige Windows */
    padding: 10px; /* On remet un peu de padding ici car c'est un formulaire */;
}

.xp-form {
    display: flex;
    margin: 5px;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    gap: 10px;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-row label {
    width: 50px; /* Largeur fixe pour aligner les champs */
    font-size: 11px;
}

.form-row:has(textarea) {
    align-items: flex-start; /* Aligne le label en haut */
}

/* LE STYLE DES INPUTS (Look enfoncé) */
.xp-form input, 
.xp-form textarea {
    flex-grow: 1;
    border: 2px inset #D3D3D3; /* L'effet 3D rétro */
    padding: 3px;
    font-family: "Tahoma", sans-serif;
    font-size: 12px;
}

.xp-form input:focus, 
.xp-form textarea:focus {
    outline: none;
    background-color: white;
}

.xp-form textarea {
    resize: none; /* Empêche de casser le design */
    height: 100%; /* Prend toute la place restante */
    min-height: 100px;
}

/* LE BOUTON ENVOYER (Style Windows natif) */
.form-footer {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.xp-button {
    min-width: 80px;
    padding: 4px 10px;
    background: linear-gradient(to bottom, #f9f9f9 0%, #e3e3e3 100%);
    border: 1px solid #707070;
    border-radius: 3px;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    color: black;
    cursor: pointer;
    box-shadow: inset 1px 1px 0 white; /* Petit reflet blanc */
}

.xp-button:active {
    background: #e3e3e3;
    box-shadow: inset 1px 1px 2px #888; /* Enfoncé au clic */
    padding-top: 5px; /* Décalage visuel */
    padding-bottom: 3px;
}

/* 1. La ligne du message devient "élastique" */
.message-row {
    flex-grow: 1; /* C'est LA clé : prend tout l'espace vertical restant */
    align-items: flex-start; /* Important : Garde le label "Sujet :" tout en haut */
}

/* 2. Le textarea doit remplir cette ligne élastique */
.message-row textarea {
    height: 100% !important; /* Force la hauteur */
    resize: none; /* Enlève le coin gris moche pour redimensionner */
    box-sizing: border-box; /* Pour que les bordures ne cassent pas la taille */
}

/* Style spécifique pour le corps du navigateur */
.browser-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    flex-grow: 1;
    height: auto;
    background-color: #ECE9D8;
}

/* L'iframe doit prendre tout l'espace restant */
iframe {
    flex-grow: 1;
    width: 100%;
    border: 2px inset #D3D3D3; /* Bordure 3D enfoncée */
    background-color: white;
}

/* On force un peu la taille de la fenêtre navigateur pour qu'on voit bien le site */
#window-browser {
    width: 900px; /* Plus large pour afficher des sites web confortablement */
    height: 600px;
}

/* --- LE LECTEUR PDF --- */

.pdf-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0; /* Pas de padding, le PDF doit toucher les bords */
    background-color: #808080; /* Fond gris foncé comme derrière les pages PDF */
}

.pdf-toolbar {
    flex-shrink: 0; /* Ne rétrécit pas */
    height: 30px;
    background-color: #ECE9D8; /* Gris XP */
    border-bottom: 1px solid #D3D3D3;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 10px;
    font-size: 11px;
}

/* Le nouveau conteneur qui gère le scroll */
.pdf-viewport {
    flex-grow: 1; /* Prend tout l'espace entre la barre d'outils et le statut */
    overflow: auto; /* C'EST ICI QUE LES SCROLLBARS APPARAISSENT */
    display: block;
    justify-content: center; /* Centre le PDF si on dézoome */
    background-color: #808080;
    padding: 20px; /* Un peu d'espace autour du PDF */
    
}

/* Le bouton de téléchargement */
.pdf-btn {
    text-decoration: none;
    color: black;
    border: 1px solid transparent;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pdf-btn:hover {
    border: 1px solid #707070;
    background-color: #e3e3e3;
    border-radius: 3px;
}

.divider {
    color: #999;
}

/* L'IMAGE DU CV */
#cv-image {
    /* Par défaut, elle s'adapte à la largeur mais ne dépasse pas sa taille réelle */
    height: auto;
    display: block;
    margin: auto;
    
    /* Look "Feuille de papier" */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Ombre réaliste */
    background-color: white; /* Au cas où l'image serait un PNG transparent */
    
    
}

/* Style des petits boutons +/- */
.pdf-tool-btn {
    width: 20px;
    height: 20px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-weight: bold;
    font-family: "Courier New", monospace; /* Look rétro */
}
.pdf-tool-btn:hover {
    background-color: #e3e3e3;
    border: 1px solid #707070;
    border-radius: 3px;
}

/* L'iframe qui va subir le zoom */
#window-cv iframe {
    /* Important : Transition douce pour l'effet "Woosh" */
    transition: transform 0.2s ease-out;
    transform-origin: top center; /* On zoome depuis le haut, centré */
    
    /* On enlève flex-grow ici car la taille va être gérée par le zoom */
    width: 100%;
    min-height: 100%; /* Remplit au moins la fenêtre */
    border: none;
}

/* --- START MENU --- */
.start-menu {
    position: fixed;
    bottom: 50px; /* Juste au-dessus de la barre des tâches */
    left: 0;
    width: 380px;
    background-color: white;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    z-index: 9999; /* Toujours devant */
    display: flex;
    flex-direction: column;
    font-family: "Tahoma", sans-serif;
    border: 1px solid #0055EA;
}

/* En-tête (Bleu) */
.start-header {
    background: linear-gradient(to bottom, #1868CE 0%, #0E60CB 100%);
    padding: 10px 15px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    border-bottom: 2px solid #E55800; /* La ligne orange sous le header */
}
.start-header img {
    width: 40px;
    height: 40px;
    border: 2px solid white;
    border-radius: 3px;
}

/* Corps (Colonnes) */
.start-body {
    display: flex;
    height: 350px; /* Hauteur fixe */
}

/* Colonne Gauche (Blanche) */
.start-col-left {
    width: 50%;
    padding: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.start-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
    color: black;
}
.start-item:hover {
    background-color: #316AC5;
    color: white;
}
.start-item:hover .desc { color: #DDD; }

.start-item img { width: 32px; height: 32px; }
.start-item-text { display: flex; flex-direction: column; }
.start-item-text .title { font-weight: bold; font-size: 12px; }
.start-item-text .desc { font-size: 10px; color: #888; }

/* Colonne Droite (Bleue ciel) */
.start-col-right {
    width: 50%;
    background-color: #D3E5FA;
    border-left: 1px solid #95BDEE;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.start-right-item {
    font-size: 11px;
    padding: 3px;
    cursor: default; /* Juste déco pour l'instant */
    color: #00156E;
    font-weight: bold;
}
.start-right-item:hover {
    background-color: #316AC5;
    color: white;
}

/* Footer (Orange) */
.start-footer {
    background: linear-gradient(to bottom, #3882E6 0%, #1D5FB5 100%);
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #fff;
}
.shutdown-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 11px;
}
.shutdown-btn img { width: 20px; }
.shutdown-btn:hover { opacity: 0.8; }

/* --- CLIPPY --- */
#clippy-container {
    position: fixed;
    bottom: 60px; /* Au dessus de la barre des tâches */
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    animation: popUp 0.5s ease-out;
}

.clippy-img {
    width: 100px;
    height: auto;
    cursor: pointer;
}

.clippy-bubble {
    background: #FFFFCC;
    border: 1px solid black;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 11px;
    font-family: "Tahoma", sans-serif;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    max-width: 200px;
    position: relative;
}

/* Petit triangle de la bulle */
.clippy-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 40px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #FFFFCC transparent;
    display: block;
    width: 0;
}

.clippy-buttons {
    margin-top: 5px;
    display: flex;
    gap: 5px;
    justify-content: center;
}

.clippy-buttons button {
    cursor: pointer;
    font-size: 10px;
}

@keyframes popUp {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- BOOT SCREEN --- */
#boot-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 10000; /* Devant ABSOLUMENT TOUT */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Pour la transition de disparition douce */
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.boot-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.boot-logo {
    width: 200px; /* Taille du logo */
}

/* La barre de chargement vide */
.boot-loading-bar {
    width: 150px;
    height: 12px;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 2px;
    position: relative;
    overflow: hidden; /* Important pour que les carrés bleus disparaissent sur les bords */
}

/* Les petits carrés bleus qui bougent */
.boot-progress {
    width: 8px;
    height: 100%;
    background: linear-gradient(to bottom, #2d66f4, #123e9c);
    position: absolute;
    top: 1px;
    border-radius: 1px;
    box-shadow: 0 0 2px #2d66f4;
    
    /* L'animation */
    animation: bootLoad 2s infinite linear;
}

/* On décale les 3 carrés pour faire une suite */
.boot-progress:nth-child(1) { animation-delay: 0s; }
.boot-progress:nth-child(2) { animation-delay: 0.15s; }
.boot-progress:nth-child(3) { animation-delay: 0.3s; }

@keyframes bootLoad {
    0% { left: -20px; }
    100% { left: 100%; }
}

/* --- BLUE SCREEN OF DEATH (BSOD) --- */
#bsod {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* ou 100dvh pour mobile */
    background-color: #000082; /* Le bleu officiel de la mort */
    color: white;
    z-index: 20000; /* Devant TOUT, même le boot screen */
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 14px; /* Un peu gros style DOS */
    padding: 40px;
    line-height: 1.5;
    
    /* Empêcher la sélection du texte */
    user-select: none;
    cursor: none; /* On cache la souris pour faire peur */
}

/* Espacement entre les paragraphes */
#bsod p {
    margin-bottom: 15px;
    max-width: 800px;
}

/* Le petit curseur qui clignote en bas */
.bsod-blink {
    animation: blink 1s step-end infinite;
    display: inline-block;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.title-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 5px;
}

.task-button img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.title-bar-text {
    display: flex;
    align-items: center;
}

/* Responsive pour mobile : Texte plus petit */
@media screen and (max-width: 768px) {
    #bsod {
        font-size: 11px;
        padding: 20px;
        overflow-y: auto; /* Au cas où le texte dépasse */
    }
}

/* =========================================
   RESPONSIVE MOBILE (Max 768px)
   ========================================= */
@media screen and (max-width: 768px) {
    
    body {
        overscroll-behavior: none; /* Empêche le rebond sur mobile */
    }
    /* 1. On cache le bureau classique */
    .desktop-icons {
        display: none;
    }

    /* 2. On cache la barre des tâches (Optionnel, selon ton goût) */
    /* Si tu veux que le menu fasse 100% de la hauteur, on vire le footer */
    footer {
        display: none;
    }

    .start-header {
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
    }

    /* 3. LE MENU DÉMARRER PLEIN ÉCRAN */
    #start-menu {
        /* On force l'affichage (on gèrera la fermeture autrement ou pas du tout) */
        display: flex !important; 
        
        /* Prend toute la place */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh; /* 100% de la hauteur de vue */
        
        /* On enlève les arrondis et les ombres qui font "popup" */
        border-radius: 0;
        border: none;
        box-shadow: none;
        
        /* Ajustement du Z-Index pour être sûr qu'il est au fond (ou dessus ?) */
        /* Pour l'instant, disons qu'il est la base */
        z-index: 50; 
    }

    .start-body {
        height: auto; /* Hauteur automatique */
        flex-grow: 1; /* Prend tout l'espace vertical restant */
        flex-direction: row; /* Colonnes côte à côte */
    }

    .start-col-left, .start-col-right {
        width: 50%; /* Chacune prend la moitié */
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* 4. LES FENÊTRES DEVIENNENT DES APPS */
    .window {
        position: fixed !important; /* Fixe la position */
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
        transform: none !important; /* On empêche le JS de la bouger */
        border: none !important;
        display: none; /* Caché par défaut, le JS le passera en flex */
        overscroll-behavior: none;
    }

    /* On enlève les arrondis de la barre de titre aussi */
    .title-bar {
        border-radius: 0;
        padding: 10px; /* Un peu plus gros pour les doigts */
    }

    /* On cache les boutons Minimiser/Maximiser qui ne servent à rien sur mobile */
    .title-bar-controls button[aria-label="Minimize"],
    .title-bar-controls button[aria-label="Maximize"] {
        display: none;
    }

    /* On garde le bouton X mais on le fait plus gros pour le doigt */
    .title-bar-controls button[aria-label="Close"] {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    /* Fix pour Clippy sur Mobile */
    #clippy-container {
        bottom: 30px !important; /* On le colle en bas */
        right: 10px !important;  /* On le colle à droite */
    }
    
    /* Optionnel : On le rend un peu plus petit pour qu'il ne cache pas tout */
    .clippy-img {
        width: 80px; /* Un peu plus discret */
    }
    
    /* On ajuste la bulle pour qu'elle ne sorte pas de l'écran */
    .clippy-bubble {
        right: -5px; /* Aligné avec Clippy */
        max-width: 250px; /* Un peu plus large pour le texte */
    }
}