/* ------------- Reset de base ------------- */ *{margin:0;padding:0;box-sizing:border-box;} body{ font-family:'Georgia',serif; line-height:1.6; color:#333; background:#fdf5e6; margin:0; /* supprime la marge par défaut du */ } /* ------------- HEADER plein écran ------------- */ html,body{overflow-x:hidden;} /* évite le scroll horizontal si le header déborde */ header{ position:relative; height:60vh; /* conserve ta hauteur initiale */ max-height:700px; width:100vw; /* occupe toute la largeur viewport */ margin-left:calc(-50vw + 50%); /* compense le centrage du */ overflow:hidden; color:#fff; text-align:center; } /* image de fond floutée en arrière-plan */ .header-blur{ position:absolute;inset:0; background:url('Ok1.jpg') center/cover; filter:blur(20px); transform:scale(1.2); z-index:0; } /* image nette pour couvrir l’ensemble (si tu l’utilises encore) */ .header-image{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover; object-position:50% 15%; /* centre la photo et remonte un peu */ filter:brightness(.55); /* assombrit pour le texte */ z-index:0; } .header-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; /* ⬅ place le texte en bas */ height:100%; padding-bottom:6vh; /* marge bas – ajuste si nécessaire */ text-align:center; color:#fff; text-shadow:2px 2px 8px rgba(0,0,0,.8); } h1{font-size:clamp(2.2rem,4.5vw,3.2rem);margin-bottom:1rem;} /* ------------- Titres secondaires ------------- */ h2{ font-family:'Georgia',cursive; color:goldenrod; margin:20px 0; } /* ------------- Conteneur centré ------------- */ .container{ max-width:800px; margin:2rem auto; padding:0 20px; } /* ------------- Bannière déroulante (option) ------------- */ .banniere{ width:100%;background:#ffcc00;color:#000;font-size:20px;font-weight:bold; text-align:center;padding:10px;position:fixed;top:0;left:0; overflow:hidden;white-space:nowrap; } .texte{display:inline-block;animation:defilement 10s linear infinite;} /* ------------- Texte compteur doré ------------- */ .wedding-text{ font-family:'Georgia',cursive; color:goldenrod;text-align:center; font-size:36px;margin:20px 0; border:2px solid goldenrod;padding:10px;border-radius:5px; } /* ------------- Séparateurs ------------- */ hr{border:0;height:2px;background:goldenrod;} /* ------------- Mot clignotant ------------- */ .clignote{ font-weight:bold; animation:clignoter 1s infinite alternate; } @keyframes clignoter{ 0%{color:red;}25%{color:blue;}50%{color:green;}75%{color:orange;}100%{color:purple;} } /* ------------- Galerie ------------- */ .gallery{display:flex;flex-wrap:wrap;gap:10px;} .gallery img{ width:100px;height:100px;object-fit:cover;cursor:pointer; border:2px solid #ccc;transition:transform .3s; } .gallery img:hover{transform:scale(1.1);} /* ------------- Lightbox ------------- */ #lightbox{ display:none;position:fixed;inset:0; background:rgba(0,0,0,.8);align-items:center;justify-content:center; z-index:10000; } #lightbox img{max-width:80%;max-height:80%;border-radius:6px;} /* ------------- Media queries ------------- */ @media(max-width:768px){ header{height:50vh;} h1{font-size:2rem;} .header-image{object-position:center 20%;} }