.size-controls {
            display: flex;
            gap: 10px;
            margin-left: auto; /* Pousse le conteneur à droite */
            align-items: center;
        }

        .size-controls button {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 1.5em;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
    
.size-controls button:hover {
    background: rgba(255, 255, 255, 0.2);
}


    @keyframes shake {
        0%, 100% { transform: scale(1.1) rotate(0deg); }
        25% { transform: scale(1.15) rotate(3deg); }
        75% { transform: scale(1.15) rotate(-3deg); }
    }

    @keyframes pulse {
        0%, 100% { 
            transform: scale(1);
            filter: brightness(1);
        }
        50% { 
            transform: scale(1.05);
            filter: brightness(1.2) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
        }
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-30px) scale(0.9); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes particleFloat {
        0% { transform: translateY(100vh) translateX(-10px) rotate(0deg); opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { transform: translateY(-100px) translateX(10px) rotate(360deg); opacity: 0; }
    }

    :root {
	--base-size: 150px; /* Taille de base des cadres */
        --glass-bg: rgba(255, 255, 255, 0.1);
        --glass-border: rgba(255, 255, 255, 0.2);
        --text-primary: #ffffff;
        --text-secondary: rgba(255, 255, 255, 0.8);
        --accent-glow: #00d4ff;
        --card-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        --border-radius: 25px;
    }

    * {
        box-sizing: border-box;
    }

    body {
        font-family: 'Poppins', sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #6B73FF 50%, #000DFF 75%, #9A4AE2 100%);
        color: var(--text-primary);
        margin: 0;
        padding: 2rem;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-x: hidden;
        position: relative;
    }

    /* Particules flottantes */
    .particle {
        position: fixed;
        pointer-events: none;
        border-radius: 50%;
        z-index: 1;
    }

    .particle-1 {
        width: 4px;
        height: 4px;
        background: rgba(255, 255, 255, 0.6);
        animation: particleFloat 15s infinite linear;
        animation-delay: 0s;
        left: 10%;
    }

    .particle-2 {
        width: 6px;
        height: 6px;
        background: rgba(0, 212, 255, 0.4);
        animation: particleFloat 18s infinite linear;
        animation-delay: -5s;
        left: 20%;
    }

    .particle-3 {
        width: 3px;
        height: 3px;
        background: rgba(255, 255, 255, 0.8);
        animation: particleFloat 12s infinite linear;
        animation-delay: -8s;
        left: 35%;
    }

    .particle-4 {
        width: 5px;
        height: 5px;
        background: rgba(154, 74, 226, 0.5);
        animation: particleFloat 20s infinite linear;
        animation-delay: -12s;
        left: 50%;
    }

    .particle-5 {
        width: 4px;
        height: 4px;
        background: rgba(255, 255, 255, 0.5);
        animation: particleFloat 16s infinite linear;
        animation-delay: -3s;
        left: 65%;
    }

    .particle-6 {
        width: 7px;
        height: 7px;
        background: rgba(0, 212, 255, 0.3);
        animation: particleFloat 14s infinite linear;
        animation-delay: -10s;
        left: 80%;
    }

    .particle-7 {
        width: 3px;
        height: 3px;
        background: rgba(255, 255, 255, 0.7);
        animation: particleFloat 22s infinite linear;
        animation-delay: -6s;
        left: 90%;
    }

    .particle-8 {
        width: 5px;
        height: 5px;
        background: rgba(102, 126, 234, 0.4);
        animation: particleFloat 17s infinite linear;
        animation-delay: -2s;
        left: 15%;
    }

    .particle-9 {
        width: 4px;
        height: 4px;
        background: rgba(255, 255, 255, 0.6);
        animation: particleFloat 19s infinite linear;
        animation-delay: -9s;
        left: 25%;
    }

    .particle-10 {
        width: 6px;
        height: 6px;
        background: rgba(118, 75, 162, 0.5);
        animation: particleFloat 13s infinite linear;
        animation-delay: -4s;
        left: 40%;
    }

    .particle-11 {
        width: 3px;
        height: 3px;
        background: rgba(0, 212, 255, 0.7);
        animation: particleFloat 21s infinite linear;
        animation-delay: -11s;
        left: 55%;
    }

    .particle-12 {
        width: 7px;
        height: 7px;
        background: rgba(255, 255, 255, 0.3);
        animation: particleFloat 15s infinite linear;
        animation-delay: -1s;
        left: 70%;
    }

    .particle-13 {
        width: 4px;
        height: 4px;
        background: rgba(107, 115, 255, 0.6);
        animation: particleFloat 18s infinite linear;
        animation-delay: -7s;
        left: 85%;
    }

    .particle-14 {
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.8);
        animation: particleFloat 16s infinite linear;
        animation-delay: -13s;
        left: 5%;
    }

    .particle-15 {
        width: 6px;
        height: 6px;
        background: rgba(154, 74, 226, 0.4);
        animation: particleFloat 20s infinite linear;
        animation-delay: -14s;
        left: 95%;
    }

    /* Styles pour ordinateur (par défaut) */
    .datetime {
        position: fixed;
        top: 20px;
        right: 20px;
        font-size: 1.2em;
        font-weight: 300;
        color: var(--text-secondary);
        z-index: 10;
        text-align: right;
        backdrop-filter: blur(10px);
        background: rgba(0, 0, 0, 0.1);
        padding: 8px 12px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        animation: fadeIn 0.8s ease-out 0.2s both;
    }

    .welcome-message {
        font-size: 2em;
        font-weight: 600;
        margin-bottom: 0.5rem;
        text-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
        animation: fadeIn 0.8s ease-out;
        
        background: linear-gradient(45deg, #ffffff, #00d4ff, #ffffff);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .main-content-wrapper {
        width: 100%;
        max-width: 1200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
        position: relative;
    }

    h1 {
        font-size: 3.5em;
        font-weight: 700;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 8px;
        margin: 1rem 0 3rem 0;
        position: relative;
        text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
        animation: fadeIn 1s ease-out;
        text-align: center;
        background: linear-gradient(45deg, #ffffff, #00d4ff, #ffffff);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    h1::after {
        content: '';
        display: block;
        width: 150px;
        height: 4px;
        background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
        box-shadow: 0 0 20px var(--accent-glow);
    }

    .game-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--base-size), 1fr));
        gap: 40px;
        width: 100%;
        flex: 1;
    }

    .game-card {
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: var(--border-radius);
        box-shadow: var(--card-shadow);
        text-decoration: none;
        color: var(--text-primary);
        padding: 3rem 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        overflow: hidden;
        transform-style: preserve-3d;
        perspective: 1000px;
    }

    .game-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.6s;
    }

    .game-card:hover::before {
        left: 100%;
    }

    .game-card:hover {
        transform: translateY(-20px) rotateX(10deg) rotateY(5deg) scale(1.05);
        box-shadow: 
            0 40px 80px rgba(0, 0, 0, 0.3),
            0 0 40px rgba(0, 212, 255, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border-color: rgba(0, 212, 255, 0.3);
    }

    .game-card-icon {
        font-size: 4em;
        margin-bottom: 1rem;
        transition: all 0.4s ease;
        animation: pulse 3s infinite;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
        transform-style: preserve-3d;
    }

    .game-card:hover .game-card-icon {
        animation: shake 0.8s infinite, pulse 3s infinite;
        transform: translateZ(20px);
        filter: drop-shadow(0 0 25px var(--accent-glow));
    }

    .game-card-title {
        font-size: 1.4em;
        font-weight: 600;
        color: var(--text-primary);
        margin-top: 0.5rem;
        transition: all 0.4s ease;
        text-align: center;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform-style: preserve-3d;
    }

    .game-card:hover .game-card-title {
        color: var(--accent-glow);
        text-shadow: 0 0 20px var(--accent-glow);
        transform: translateZ(10px);
    }

    .copyright {
        position: fixed;
        bottom: 15px;
        right: 20px;
        font-size: 0.75em;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 300;
        z-index: 10;
        text-align: right;
        line-height: 1.3;
        backdrop-filter: blur(10px);
        background: rgba(0, 0, 0, 0.1);
        padding: 8px 12px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }

    .copyright:hover {
        color: rgba(255, 255, 255, 0.9);
        background: rgba(0, 0, 0, 0.2);
        transform: scale(1.05);
    }

    .copyright .name {
        font-weight: 600;
        color: var(--accent-glow);
        text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
    }

    .copyright .email {
        font-size: 0.9em;
        opacity: 0.8;
    }

    /* Styles pour les petits écrans */
    @media (max-width: 768px) {
        body {
            padding: 1rem;
        }
        
        .main-content-wrapper {
            padding-top: 1rem;
        }
        
        .welcome-message {
            display: block; /* Affiché sur les petits écrans */
            font-size: 1.5em; /* Taille ajustée pour le mobile */
            text-align: left;
            margin-bottom: 0.5rem;
        }

        .datetime {
            display: block; /* Affiché sur les petits écrans */
            position: relative;
            font-size: 0.8em;
            text-align: right;
            padding: 6px 8px;
            top: auto;
            right: auto;
        }

        h1 {
            font-size: 2.5em; /* Taille ajustée pour le mobile */
            letter-spacing: 4px;
            margin: 0.5rem 0 2rem 0;
        }
        
        h1::after {
            width: 100px;
        }
        
        .game-grid {
            grid-template-columns: 1fr;
            gap: 25px;
        }
        
        .game-card {
            padding: 2rem 1.5rem;
        }

        .game-card:hover {
            transform: translateY(-10px) scale(1.02);
        }

        /* Positionnement des éléments du haut sur mobile */
        .header-mobile {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        /* Masquons le message de bienvenue pour le bureau pour éviter la duplication */
        .welcome-message {
            display: none;
        }
        .datetime {
            display: none;
        }
        /* Affiche le message de bienvenue et l'horloge sur mobile */
        .header-mobile .welcome-message, .header-mobile .datetime {
            display: block;
        }

    }

    .game-card:nth-child(1) { animation: fadeIn 0.8s ease-out 0.1s both; }
    .game-card:nth-child(2) { animation: fadeIn 0.8s ease-out 0.2s both; }
    .game-card:nth-child(3) { animation: fadeIn 0.8s ease-out 0.3s both; }
    .game-card:nth-child(4) { animation: fadeIn 0.8s ease-out 0.4s both; }
    .game-card:nth-child(5) { animation: fadeIn 0.8s ease-out 0.5s both; }
    .game-card:nth-child(6) { animation: fadeIn 0.8s ease-out 0.6s both; }

    .particle-dynamic {
        position: fixed;
        border-radius: 50%;
        pointer-events: none;
        z-index: 1;
    }

    .particle-star {
        position: fixed;
        pointer-events: none;
        z-index: 1;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
        animation: particleFloat 25s infinite linear, spin 4s infinite linear;
    }

    .particle-star::before {
        content: "✦";
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .particle-triangle {
        width: 0;
        height: 0;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-bottom: 5px solid rgba(0, 212, 255, 0.5);
        position: fixed;
        pointer-events: none;
        z-index: 1;
        animation: particleFloat 22s infinite linear, spin 6s infinite linear;
    }

    .particle-diamond {
        width: 6px;
        height: 6px;
        background: rgba(154, 74, 226, 0.6);
        transform: rotate(45deg);
        position: fixed;
        pointer-events: none;
        z-index: 1;
        animation: particleFloat 20s infinite linear, spin 8s infinite linear;
    }

    .copyright {
        position: fixed;
        bottom: 15px;
        right: 20px;
        font-size: 0.75em;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 300;
        z-index: 10;
        text-align: right;
        line-height: 1.3;
        backdrop-filter: blur(10px);
        background: rgba(0, 0, 0, 0.1);
        padding: 8px 12px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }

    .copyright:hover {
        color: rgba(255, 255, 255, 0.9);
        background: rgba(0, 0, 0, 0.2);
        transform: scale(1.05);
    }

    .copyright .name {
        font-weight: 600;
        color: var(--accent-glow);
        text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
    }

    .copyright .email {
        font-size: 0.9em;
        opacity: 0.8;
    }

.search-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 600px;
    background-color: #ffffff;
    border-radius: 50px;
    box-shadow: var(--shadow);
    padding: 8px 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.search-engine-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0 10px;
    color: var(--text-color);
    transition: transform 0.2s ease-in-out;
}

.search-engine-button:hover {
    transform: scale(1.1);
}

.search-form {
    flex-grow: 1;
    display: flex;
}

#search-input {
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    padding: 10px;
    background: transparent;
}

#search-input::placeholder {
    color: #b0b0b0;
}

</style>
</head>
<body>
    <div class="particle particle-1"></div>
    <div class="particle particle-2"></div>
    <div class="particle particle-3"></div>
    <div class="particle particle-4"></div>
    <div class="particle particle-5"></div>
    <div class="particle particle-6"></div>
    <div class="particle particle-7"></div>
    <div class="particle particle-8"></div>
    <div class="particle particle-9"></div>
    <div class="particle particle-10"></div>
    <div class="particle particle-11"></div>
    <div class="particle particle-12"></div>
    <div class="particle particle-13"></div>
    <div class="particle particle-14"></div>
    <div class="particle particle-15"></div>

    <div class="header-mobile">
        <h2 class="welcome-message"></h2>
        <div class="datetime"></div>
        <div class="size-controls">
            <button id="size-down">-</button>
            <button id="size-up">+</button>
        </div>

    </div>

    <div class="main-content-wrapper">
	<div class="search-container">
    	<button class="search-engine-button" id="engine-btn">
        <img id="engine-icon" src="https://www.google.com/favicon.ico" alt="Google" style="width:20px;height:20px;">
    	</button>
    	<form id="search-form" action="https://www.google.com/search" method="GET" target="_blank" class="search-form">
        <input type="text" id="search-input" name="q" placeholder="Rechercher sur Google..." required>
    	</form>
	</div>
        <h1>Menu des applications</h1>
        <div class="game-grid" id="game-grid">

	    <a href="/carburants.html" class="game-card">
		<span class="game-card-icon">⛽</span>
		<span class="game-card-title">Prix Carburants</span>
	    </a>
            <a href="/meteo.html" class="game-card">
                <span class="game-card-icon">🌤️</span>
                <span class="game-card-title">Météo</span>
            </a>
	    <a href="/des.html" class="game-card">
		<span class="game-card-icon">🎲</span>
		<span class="game-card-title">Dés</span>
	    </a>
	    <a href="/liste-courses.html" class="game-card">
		<span class="game-card-icon">🛒</span>
		<span class="game-card-title">Liste courses</span>
	    </a>
	    <a href="convertisseur.html" class="game-card">
		<span class="game-card-icon">↔️</span>
		<span class="game-card-title">Convertisseur</span>
	    </a>
	    <a href="ascii-art.html" class="game-card">
		<span class="game-card-icon">⌨️</span>
		<span class="game-card-title">Art ASCII</span>
	    </a>
	    <a href="youtubedl.html" class="game-card">
		<span class="game-card-icon">▶️</span>
		<span class="game-card-title">Youtube DL</span>
	    </a>
	    <a href="file-share.html" class="game-card">
		<span class="game-card-icon">📤</span>
		<span class="game-card-title">Partage Fichiers</span>
	    </a>
	    <a href="pdf-tools.html" class="game-card">
		<span class="game-card-icon">📄</span>
		<span class="game-card-title">Outils PDF</span>
	    </a>
	    <a href="image-tools.html" class="game-card">
		<span class="game-card-icon">🖼️</span>
		<span class="game-card-title">Outils Image</span>
	    </a>

    


        
    </div>

    <div class="copyright">
        <div class="name">DELVILLE Thibaut</div>
        <div class="email">delville.thibaut@gmail.com</div>
    </div>

    <script>

const searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
const engineButton = document.getElementById('engine-btn');
const engineIcon = document.getElementById('engine-icon');

const searchEngines = [
    { name: 'Google', url: 'https://www.google.com/search', icon: 'https://www.google.com/favicon.ico' },
    { name: 'DuckDuckGo', url: 'https://duckduckgo.com/', icon: 'https://duckduckgo.com/favicon.ico' },
    { name: 'Bing', url: 'https://www.bing.com/search', icon: 'https://www.bing.com/favicon.ico' }
];
let currentEngineIndex = 0;

function updateSearchEngine() {
    currentEngineIndex = (currentEngineIndex + 1) % searchEngines.length;
    const engine = searchEngines[currentEngineIndex];
    
    searchForm.action = engine.url;
    engineIcon.src = engine.icon;
    engineIcon.alt = engine.name;
    searchInput.placeholder = `Rechercher sur ${engine.name}...`;
    searchInput.name = 'q';
}

engineButton.addEventListener('click', (e) => {
    e.preventDefault();
    updateSearchEngine();
});

        function updateDateTime() {
            const now = new Date();
            const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            const timeOptions = { hour: '2-digit', minute: '2-digit', second: '2-digit' };

            const formattedDate = now.toLocaleDateString('fr-FR', dateOptions);
            const formattedTime = now.toLocaleTimeString('fr-FR', timeOptions);

            const datetimeElement = document.querySelector('.datetime');
            if (datetimeElement) {
                datetimeElement.innerHTML = `${formattedDate}<br>${formattedTime}`;
            }
        }
        
        function setWelcomeMessage() {
            const now = new Date();
            const hour = now.getHours();
            let message;

            if (hour < 12) {
                message = "Bonjour";
            } else if (hour < 18) {
                message = "Bon après-midi";
            } else {
                message = "Bonsoir";
            }
            
            const welcomeElement = document.querySelector('.welcome-message');
            if (welcomeElement) {
                welcomeElement.textContent = message;
            }
        }

        function createParticle(className, minSize, maxSize, minDuration, maxDuration, delay) {
            const particle = document.createElement('div');
            particle.className = className;
            
            const size = Math.random() * (maxSize - minSize) + minSize;
            const left = Math.random() * 100;
            const duration = Math.random() * (maxSize - minDuration) + minDuration;
            
            particle.style.cssText = `
                width: ${size}px;
                height: ${size}px;
                left: ${left}%;
                bottom: -10px;
                animation: particleFloat ${duration}s linear forwards;
                animation-delay: ${delay}s;
            `;
            
            document.body.appendChild(particle);
            
            setTimeout(() => {
                if (particle.parentNode) {
                    particle.remove();
                }
            }, (duration * 1000) + (delay * 1000));
        }


        setInterval(() => createParticle('particle-dynamic', 2, 8, 15, 25, 0), 800);
        setInterval(() => createParticle('particle-star', 12, 12, 20, 30, 0), 2000);
        setInterval(() => createParticle('particle-triangle', 0, 0, 18, 28, 0), 3000);
        setInterval(() => createParticle('particle-diamond', 6, 6, 16, 26, 0), 2500);
	//setInterval(() => createParticle('particle-dynamic', 2, 8, 15, 25, 0), 800);
	//setInterval(() => createParticle('particle-star', 12, 12, 20, 30, 0), 2000);
	//setInterval(() => createParticle('particle-triangle', 0, 0, 18, 28, 0), 3000);
	//setInterval(() => createParticle('particle-diamond', 6, 6, 16, 26, 0), 2500);

        setWelcomeMessage();
        updateDateTime();
        setInterval(updateDateTime, 1000);

        const cardIcons = document.querySelectorAll('.game-card-icon');
        cardIcons.forEach(icon => {
            icon.addEventListener('mouseover', () => {
                icon.style.transform = 'translateZ(20px)';
            });
            icon.addEventListener('mouseout', () => {
                icon.style.transform = 'translateZ(0)';
            });
        });


// --- NOUVEAU CODE JAVASCRIPT POUR LE REDIMENSIONNEMENT ---
const sizeUpButton = document.getElementById('size-up');
const sizeDownButton = document.getElementById('size-down');
const root = document.documentElement;

let baseSize = 150; // On initialise la taille de base en JavaScript

sizeUpButton.addEventListener('click', () => {
    if (baseSize < 250) {
        baseSize += 10;
        root.style.setProperty('--base-size', `${baseSize}px`);
    }
});

sizeDownButton.addEventListener('click', () => {
    if (baseSize > 80) {
        baseSize -= 10;
        root.style.setProperty('--base-size', `${baseSize}px`);
    }
});
// --- FIN DU NOUVEAU CODE ---

    </script>


</body>
</html>