/* ========== 1. VARIABLES COULEURS ========== */ :root { --logo-light: "/inclus/images/alix-logo-light.png"; --logo-dark: "/inclus/images/alix-logo-dark.png"; } :root { /* Mode clair (par défaut) */ --bg-img: url('/inclus/images/rideau-512-clair.jpg'); --text-color: #1a1a1a; --font-family: 'Poppins', Roboto, system-ui, -apple-system, sans-serif; --font-weight: 800; --primary-color: #0066cc; --border-color: #d0d0d0; --textnavbar: black; --fdnavbar: rgba(128, 128, 128, 0.171); --fdbtnmode: linear-gradient(360deg, rgba(59, 59, 59, 0.411) 1%, rgba(255, 255, 255, 0.65) 100%); --card-bg: #14141421; --card-txt: black; --fdtabvert1: linear-gradient(120deg, rgba(128, 128, 128, 0.178) 1%, rgba(226, 226, 225, 0.65) 100%); --fdtabvert2: linear-gradient(240deg, rgba(128, 128, 128, 0.178) 1%, rgba(226, 226, 225, 0.65) 100%); --fdtabvert3: linear-gradient(360deg, rgba(128, 128, 128, 0.178) 1%, rgba(226, 226, 225, 0.65) 100%); --shatab: 5px 5px 12px black; --shadtext: 2px 2px 4px black; --txtlogocolor: rgba(34, 34, 34, 0.514); --img01-url: "/inclus/images/alix-logo-light.png"; --colorcreat: rgb(2, 2, 2); --colorslogan: rgb(90, 35, 35); --bg-modale: rgba(90, 65, 65, 0.096); --bg-modale-cont: rgba(156, 150, 150, 0.637); --colortxt-modale: black; --fd-menu-burger: rgba(87, 86, 86, 0.397); --txt-section-tag: rgb(0, 0, 0); --primary: rgb(0, 4, 255); --primary-light: rgb(255, 255, 96); --primary-dark: lime; /* Bleu foncé pour les contrastes */ --secondary: #d4af37; /* Doré/cuivre pour les accents */ --neutral-20: rgba(65, 70, 69, 0.411); --neutral-50: rgba(254, 254, 1, 0.92); /* Jaune */ --neutral-100: #ffffff; /* Blanc */ --neutral-200: #f5f7fa; /* Gris très clair (fond alterné) */ --neutral-250: #6c6c6d97; /* Gris moubs clair (bordures mobiles) */ --neutral-300: #e0e5ecaf; /* Gris clair (bordures) */ --neutral-800: #ffb300de; /* Gris foncé (textes) */ --success: #2ecc71; /* Vert pour messages de succès */ --error: #e74c3c; /* Rouge pour erreurs */ --color-titre-ctc: rgb(61, 60, 60); --color-sous-titre-ctc: rgb(255, 0, 0); --color-label: black; --wei-label: 900; } /* Mode sombre — activé par la classe .dark sur */ html.dark { --bg-img: url('/inclus/images/rideau-1024.jpg'); --text-color: #fff788; --font-family: 'Poppins', Roboto, system-ui, -apple-system, sans-serif; --font-weight: 200; --primary-color: #4da6ff; --border-color: #333333; --textnavbar: rgb(222, 231, 182); --fdnavbar: rgba(0, 4, 255, 0.233); --fdbtnmode: linear-gradient(360deg, rgba(59, 59, 59, 0.411) 1%, rgba(155, 122, 245, 0.65) 100%); --card-bg: rgba(18, 1, 255, 0.176); --card-txt: #fff788; --shadow: 0 4px 12px rgba(0, 0, 0, 0.4); --fdtabvert1: linear-gradient(120deg, rgba(26, 26, 26, 0.178) 1%, rgba(194, 176, 12, 0.65) 100%); --fdtabvert2: linear-gradient(240deg, rgba(26, 26, 26, 0.178) 1%, rgba(194, 176, 12, 0.65) 100%); --fdtabvert3: linear-gradient(360deg, rgba(26, 26, 26, 0.178) 1%, rgba(194, 176, 12, 0.65) 100%); --shatab: 5px 5px 12px rgba(238, 238, 238, 0.8); --shadtext: 2px 2px 4px rgba(238, 238, 238, 0.8); --txtlogocolor: rgba(209, 255, 4, 0.432); --img01-url: "/inclus/images/alix-logo-dark.png"; --colorcreat: rgba(91, 162, 255, 0.562); --colorslogan: rgb(255, 0, 0); --bg-modale: rgba(75, 74, 74, 0.096); --bg-modale-cont: rgba(128, 103, 103, 0.425); --colortxt-modale: white; --fd-menu-burger: rgba(7, 7, 104, 0.397); --txt-section-tag: rgb(122, 121, 121); --primary: rgba(149, 249, 149, 0.309); --primary-dark: rgba(10, 164, 10, 0.599); --secondary: #d4af37; --neutral-20: rgba(7, 101, 96, 0.131); --neutral-50: rgba(254, 254, 1, 0.92); --neutral-100: #ffffff; --neutral-200: #f5f7fa; --neutral-250: #6c6c6d97; --neutral-300: #e0e5ecaf; --neutral-800: #ffb300de; --success: #2ecc71; --error: #e74c3c; --color-titre-ctc: rgb(255, 255, 158); --color-sous-titre-ctc: rgb(255, 102, 0); --color-label: rgb(255, 255, 158); --wei-label: 200; } /* ========== 2. STYLES GÉNÉRAUX ========== */ * { margin: 1px 0; padding: 0; box-sizing: border-box; } .hidden { display: none; } body { overflow: hidden; /* ← Empêche le body de défiler */ height: 100vh; /* ← Hauteur = fenêtre */ font-family: var(--font-family); background-image: var(--bg-img); background-size: cover; background-position: center; background-attachment: fixed !important; background-repeat: no-repeat; color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px; } h1 { font-size: 2rem; margin-bottom: 1rem; } p { line-height: 1.7; margin-bottom: 1rem; opacity: 0.9; } /* ========== 3. BOUTON ========== */ .theme-toggle { background: var(--fdbtnmode); color: white; border: none; padding: 10px 20px; border-radius: 25px; font-weight: bold; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } [data-theme="dark"] .theme-toggle { background: var(--fdbtnmode); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); } .theme-toggle:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .theme-toggle:active { transform: scale(0.96); } /* Icône du bouton */ .theme-toggle .icon { font-size: 20px; line-height: 1; } h1 { margin: 0; padding: 0; font-size: 48px; } .navbar .bouton { background-color: transparent; border: none; color: yellow; padding: 1px 1px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 0 15px; border-radius: 10px; cursor: pointer; } /* ******** AGJ BOUTON ----------- */ .agj-bouton { white-space: nowrap; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 28px; background: linear-gradient(145deg, #0f0f0f, #1c1c1c); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 80px 0px 80px 20px; -webkit-border-radius: 80px 0px 80px 20px; -moz-border-radius: 80px 0px 80px 20px; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; overflow: hidden; transition: all 0.4s ease-in-out; box-shadow: 0 0 20px rgba(0, 255, 255, 0.1); backdrop-filter: blur(8px); z-index: 1; } .agj-bouton::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, #00ffff, #ff00ff, #00ffff); animation: rotate 4s linear infinite; z-index: -2; } .agj-bouton::after { content: ""; position: absolute; inset: 2px; background: #0a0a0a; border-radius: inherit; z-index: -1; } .agj-bouton:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); color: red; } .agj-bouton:hover .arrow { transform: translateX(6px); } .arrow { width: 12px; height: 12px; transition: transform 0.3s ease-in-out; color: #00ffff; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .navbar .bouton:hover { background-color: #7d2d0d; border-radius: 25px; } .navbar li { list-style: none; } a { text-decoration: none; color: rgb(255, 255, 0); font-size: 1rem; } a:hover { color: whitesmoke; text-shadow: 3px 3px 0px rgba(209, 255, 2, 0, 75); background-color: blue; border: 1px blue; border-radius: 10px; } a:active { background-color: red; } .links { display: none; gap: 50px; } .links.active { display: block; /* ou max-height: 500px; */ } .buttons { display: flex; gap: 10px; } .action-button { padding: 0px 10px; color: rgb(202, 196, 244); background-color: transparent; color: yellow; border: 1px solid yellow; border-radius: 5px; cursor: pointer; height: 20px; } .action-button:hover { background-color: rgba(148, 214, 17, 0.874); color: black; border: #00ff00; } .ico-burger { height: 25px; width: auto; cursor: pointer; } /* --------- MENU REDUIT ------------- */ .burger-menu { cursor: pointer; position: fixed; /* Changé : fixed au lieu de absolute */ top: 10px; /* Ajustez selon la hauteur de votre header */ right: 0; left: 0; width: 100%; /* Changé : 0 → 100% */ background-color: rgba(0, 0, 255, 0.384); backdrop-filter: blur(15px); border-radius: 0; overflow: hidden; display: none; height: 0; z-index: 9999; /* Ajouté pour passer au-dessus du contenu */ transition: height 0.3s ease; } .burger-menu.open { margin-top: 25px; height: auto !important; /* Ajustez selon le nombre d'éléments */ width: 100%; padding: 10px 0; display: block; /* Ajouté pour afficher quand open */ } .burger-menu .links { display: flex; flex-direction: column; gap: 5px; padding: 10px; background-color: transparent; /* Changé : transparent (car déjà sur le parent) */ margin: 0; /* Ajouté pour éviter les marges par défaut */ list-style: none; /* Ajouté pour enlever les puces */ } .burger-menu li { padding: 0.7rem; display: flex; align-items: center; justify-content: center; } .burger-menu li:hover { width: 150px; margin-left: auto; margin-right: auto; border-radius: 50px; background-color: #7d2d0d; } .burger-menu a { color: white; /* Ajouté pour que les liens soient lisibles */ text-decoration: none; /* Ajouté pour enlever le soulignement */ font-size: 1.2rem; /* Ajustez selon votre design */ } .burger-menu .action-button { width: 80%; display: flex; justify-content: center; align-items: center; } .buttons-burger-menu { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; } .diviser { height: 1px; background-color: rgb(51, 51, 51); width: 80%; max-width: 150px; margin-left: auto; margin-right: auto; margin-bottom: 1rem; } /* Version mobile : afficher le bouton hamburger */ @media (max-width: 768px) { .navbar .burger-menu-button { display: block; cursor: pointer; z-index: 10000; /* Important : au-dessus du menu */ } .navbar .links, .navbar .buttons { display: none; /* Cache les liens du navbar en mobile */ } } /* ----------- BOUTON 1 --------------- */ .agjbtn { white-space: nowrap; margin-right: 50px; padding: 0.6em 2em; border: none; outline: none; color: rgb(255, 255, 255); background: #111; cursor: pointer; position: relative; z-index: 0; border-radius: 10px; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .agjbtn:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); color: red; } .agjbtn:before { content: ""; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -2px; left: -2px; background-size: 400%; z-index: -1; filter: blur(5px); -webkit-filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing-agjbtn 20s linear infinite; transition: opacity 0.3s ease-in-out; border-radius: 10px; } @keyframes glowing-agjbtn { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } .agjbtn:after { z-index: -1; content: ""; position: absolute; width: 100%; height: 100%; background: #222; left: 0; top: 0; border-radius: 10px; } /* -------- FIN DU BOUTON 1 -------- */ #contenu { padding: 10px; width: 100%; min-height: 100vh; position: absolute; top: 35px; left: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 60px); mask-image: linear-gradient(to bottom, transparent 0%, black 60px); } .creat, .creat a { background-color: none; margin: 30px 0 50px 0; width: 100%; margin-right: auto; margin-left: auto; font-family: var(--textfont); font-size: 12px; color: var(--colorcreat); font-weight: 900; text-align: center; } /* ---------- RESPONSIVE ----------- */ @media screen and (max-width: 768px) { nav { background: none; } .navbar .links { display: none; } .navbar .burger-menu-button { display: block !important; } .burger-menu { display: block; } .buttons { display: none; } } /* Ajout pour s'assurer que le bouton hamburger est visible en mobile */ @media (max-width: 768px) { .navbar .burger-menu-button { display: block !important; cursor: pointer; z-index: 10000; background: transparent; border: none; padding: 5px; margin-left: auto; } .navbar .burger-menu-button img { height: 30px; width: auto; display: block; } }