Fix Btn issues

css/style.css

@@ -1,18 +1,16 @@
-/* Variables pour les couleurs */
 :root {
   --bg-color: #050b16;
   --deep-blue: #0a192f;
   --glass-light: rgba(255, 255, 255, 0.08);
   --glass-border: rgba(255, 255, 255, 0.25);
-  --accent-yellow: #fcd53f; /* Jaune plus lumineux */
+  --accent-yellow: #fcd53f;
-  --accent-blue: #3ecaf8; /* Bleu plus lumineux pour les bordures */
+  --accent-blue: #3ecaf8;
 }
 
 body {
   font-family: 'Noto Sans', sans-serif;
   background-color: var(--bg-color);
-  /* Arrière-plan complexe pour rendre la réfraction visible */
+  background-image:
-  background-image: 
     radial-gradient(at 10% 10%, rgba(10, 25, 47, 0.8) 0px, transparent 50%),
     radial-gradient(at 90% 90%, rgba(62, 202, 248, 0.15) 0px, transparent 50%),
     linear-gradient(135deg, #050b16 0%, #1a3c6f 100%);
@@ -22,129 +20,148 @@ body {
   padding: 20px;
 }
 
-/* Style de base pour tous les éléments "verre" */
+/* --- Conteneurs principaux avec Réfraction --- */
-.glass-effect {
+.container {
-  background: var(--glass-light);
+  background: rgba(10, 25, 47, 0.08);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
-  border-radius: 30px; /* Bords plus adoucis */
+  border-radius: 30px;
   border: 1px solid var(--glass-border);
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
   position: relative;
   z-index: 1;
   overflow: hidden;
+  width: 80%;
+  margin: 40px auto;
+  padding: 40px;
 }
 
-/* Le cœur de la réfraction : un pseudo-élément qui déforme l'arrière-plan */
+/* Le cœur de la réfraction : seulement pour .container */
-.glass-effect::before {
+.container::before {
   content: '';
   position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
+  top: 0;
-  /* Copie l'arrière-plan de la page */
+  left: 0;
-  background: inherit; 
+  right: 0;
-  /* Applique un filtre de distorsion (ici une légère ondulation) */
+  bottom: 0;
+  background: inherit;
   filter: blur(5px) brightness(1.1) contrast(0.9);
-  /* Décale légèrement le contenu pour l'effet de réfraction */
+  transform: scale(1.05) translate(-2px, -2px);
-  transform: scale(1.05) translate(-2px, -2px); 
   z-index: -1;
   border-radius: inherit;
 }
 
-/* Application du style aux conteneurs */
+/* --- Footer : style simplifié (sans réfraction) pour éviter le cadre --- */
-.container, div.footer, .video-container {
+div.footer {
-  @extend .glass-effect; /* Si vous utilisez SASS, sinon copier les propriétés */
+  background: rgba(10, 25, 47, 0.2); /* Fond un peu plus opaque pour compenser */
-  /* Propriétés copiées pour le rendu final : */
+  backdrop-filter: blur(10px);
-  background: rgba(10, 25, 47, 0.08);
+  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
   border-radius: 30px;
-  border: 1px solid rgba(255, 255, 255, 0.25);
+  border: 1px solid var(--glass-border);
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+  /* Pas d'ombre, pas de ::before de réfraction */
   position: relative;
-  z-index: 1;
-  overflow: hidden;
-  
   width: 80%;
-  margin: 40px auto; /* Espacement augmenté */
+  margin: 40px auto;
-  padding: 40px;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.container::before, div.footer::before, .video-container::before {
+/* --- Video Container : PROPRE 16:9 --- */
-    /* Pseudo-élément de réfraction appliqué */
-    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
-    background: inherit; filter: blur(5px) brightness(1.1) contrast(0.9);
-    transform: scale(1.05) translate(-2px, -2px); z-index: -1; border-radius: inherit;
-}
-
-/* Cas spécifique pour la vidéo (pas de padding-bottom, on fixe la taille) */
 .video-container {
-  padding: 0;
+  margin: 40px auto;
+  width: 80%;
+  /* IMPORTANT : On garde le ratio 16:9 et on supprime la réfraction */
+  position: relative;
+  overflow: hidden;
   height: 0;
-  padding-bottom: 56.25%;
+  padding-bottom: 56.25%; /* Ratio 16:9 */
+  border-radius: 25px;
+  border: 1px solid var(--glass-border);
+  background: rgba(0, 0, 0, 0.5);
+  /* PAS de ::before de réfraction pour ne pas casser le ratio ni créer de cadre */
 }
 
 .video-container iframe {
   position: absolute;
-  top: 0; left: 0; width: 100%; height: 100%;
+  top: 0;
-  border: none; /* Suppression de la bordure de l'iframe */
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* --- Header & Logo --- */
+header {
+  text-align: left;
+  margin-bottom: 40px;
+  padding-left: 10%;
+}
+
+.logo {
+  /* Logo beaucoup plus gros */
+  height: 128px;
+  width: 128px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 20px;
+  /* Style verre */
+  background: var(--glass-light);
+  backdrop-filter: blur(10px);
+  border-radius: 25px;
+  border: 1px solid var(--glass-border);
+  padding: 10px;
+}
+
+.title {
+  display: inline-block;
+  /* Titre ajusté en conséquence */
+  font-size: 64px;
+  line-height: 128px; /* Aligné sur la hauteur du logo */
+  vertical-align: middle;
+  color: #fff;
+  font-weight: 800;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+
+/* --- Navigation (inchangé, parfait selon vos dires) --- */
+.nav {
+  text-align: center;
+  margin: 40px 0;
 }
 
-/* Navigation : Style Bouton Liquide 3D */
 .nav a {
   text-decoration: none;
   color: #fff;
   padding: 15px 35px;
   margin: 0 10px;
-  
-  /* Bordure déformée et animée (technique border-image) */
   border: 4px solid transparent;
   border-image: repeating-linear-gradient(45deg, var(--accent-yellow) 0%, var(--accent-blue) 10%, var(--accent-yellow) 20%) 1;
-  border-radius: 50px; /* Forme pilule */
+  border-radius: 50px;
-  
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
-  
+  box-shadow:
-  /* Effet de biseau interne pour le côté 3D */
-  box-shadow: 
     inset 0 2px 0 rgba(255, 255, 255, 0.3),
     inset 0 -2px 0 rgba(0, 0, 0, 0.2),
     0 5px 15px rgba(0, 0, 0, 0.3);
-    
   transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
   font-weight: 600;
   display: inline-block;
 }
 
 .nav a:hover {
-  /* Au survol : le bouton s'illumine et la bordure "coule" plus vite */
   background-color: var(--accent-yellow);
   color: var(--deep-blue);
-  border-color: transparent; /* Cache la bordure d'origine */
+  border-color: transparent;
-  box-shadow: 
+  box-shadow:
-    0 0 30px var(--accent-yellow), /* Glow externe */
+    0 0 30px var(--accent-yellow),
-    inset 0 0 10px rgba(255, 255, 255, 0.5); /* Highlight interne */
+    inset 0 0 10px rgba(255, 255, 255, 0.5);
-  transform: translateY(-3px); /* Lévitation */
+  transform: translateY(-3px);
   cursor: pointer;
 }
 
-header { text-align: left; margin-bottom: 40px; }
+/* --- Image Flash --- */
-
-.logo {
-  height: 60px; width: 60px;
-  display: inline-block; vertical-align: middle; margin-right: 20px;
-  /* Le logo est lui-même un élément de verre */
-  @extend .glass-effect;
-  padding: 5px;
-  border-radius: 15px;
-}
-
-.title {
-  display: inline-block; font-size: 56px; line-height: 60px; vertical-align: middle;
-  color: #fff; font-weight: 800;
-  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
-}
-
-/* Image Flash : Effet de zoom avec ombre colorée */
 img.flash {
   display: inline-block;
   width: 128px;
@@ -155,6 +172,5 @@ img.flash {
 
 img.flash:hover {
   width: 800px;
-  /* L'ombre devient un halo lumineux lors de l'agrandissement */
   filter: drop-shadow(0 10px 30px var(--accent-yellow));
 }

index.php

@@ -2,7 +2,7 @@
 <html>
 <head>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-  <link href="css/style.css?v=1.0.1" rel="stylesheet">
+  <link href="css/style.css?v=1.0.2" rel="stylesheet">
   <link rel="icon" href="img/logo.png"> 
   <title>Whykioh.fr - Mon Portefolio</title>
 </head>