/* =======================================================
   BAR MITSVA D'EYAL
   STYLE PREMIUM
======================================================= */

/* ===========================
   VARIABLES
=========================== */

:root{

--background:#F8F4EC;
--background-light:#FFFCF8;

--paper:#FCFAF6;

--champagne:#E8DCC8;

--gold:#C7A34B;

--gold-light:#E7D7A7;

--brown:#4B392A;

--text:#5D4A3B;

--border:#E3D6C5;

--shadow:0 25px 60px rgba(0,0,0,.08);

--radius:22px;

--transition:.35s ease;

}

/* ===========================
RESET
=========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

font-family:'Montserrat',sans-serif;

background:var(--background);

color:var(--text);

line-height:1.8;

overflow-x:hidden;

}

/* ===========================
TYPOGRAPHIE
=========================== */

h1,h2,h3{

font-family:'Cormorant Garamond',serif;

font-weight:600;

color:var(--brown);

}

h1{

font-size:5rem;

}

h2{

font-size:3rem;

margin-bottom:20px;

}

h3{

font-size:2rem;

}

p{

font-size:18px;

margin-bottom:20px;

}

.hebrew{

font-family:'Noto Serif Hebrew',serif;

font-size:42px;

direction:rtl;

color:var(--gold);

margin-bottom:25px;

}

/* ===========================
CONTAINER
=========================== */

.container{

width:min(1180px,92%);

margin:auto;

}

.narrow{

max-width:850px;

}

/* ===========================
SECTIONS
=========================== */

.section{

padding:120px 0;

position:relative;

}

.light{

background:var(--paper);

}

/* ===========================
TITRES
=========================== */

.section-subtitle{

display:block;

letter-spacing:4px;

text-transform:uppercase;

font-size:13px;

color:var(--gold);

margin-bottom:10px;

}

.section-title{

margin-bottom:25px;

}

.gold-divider{

width:90px;

height:3px;

background:linear-gradient(
90deg,
transparent,
var(--gold),
transparent
);

margin:35px auto;

border-radius:20px;

}

/* ===========================
BOUTONS
=========================== */

.hero-button,
.event-button,
.music-link,
.rsvp-form button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 40px;

border-radius:60px;

text-decoration:none;

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

color:white;

font-weight:600;

transition:var(--transition);

border:none;

cursor:pointer;

box-shadow:0 15px 35px rgba(199,163,75,.35);

}

.hero-button:hover,
.event-button:hover,
.music-link:hover,
.rsvp-form button:hover{

transform:translateY(-4px);

box-shadow:0 25px 45px rgba(199,163,75,.45);

}

/* ===========================
IMAGES
=========================== */

img{

max-width:100%;

display:block;

border-radius:18px;

}

/* ===========================
LIENS
=========================== */

a{

color:inherit;

text-decoration:none;

}

/*======================================================
LOADER
======================================================*/

#loader{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:#F8F4EC;

display:flex;

justify-content:center;
align-items:center;

z-index:99999;

transition:1s;

}

.loader-content{

text-align:center;

}

.loader-logo{

width:140px;

margin:auto;

animation:logoFloat 3s ease-in-out infinite;

}

.loader-line{

margin:35px auto;

width:180px;

height:2px;

background:linear-gradient(
90deg,
transparent,
#C7A34B,
transparent
);

animation:loading 2.2s infinite;

}

.loader-text{

font-size:15px;

letter-spacing:4px;

text-transform:uppercase;

color:#8b7355;

}

@keyframes loading{

0%{

width:0;

}

100%{

width:180px;

}

}

@keyframes logoFloat{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

}

/*======================================================
NAVBAR
======================================================*/

header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

transition:.4s;

}

.navbar{

width:min(1250px,94%);

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 0;

}

.logo img{

height:72px;

transition:.4s;

}

.navbar ul{

display:flex;

gap:42px;

list-style:none;

}

.navbar a{

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

font-weight:600;

color:white;

transition:.35s;

position:relative;

}

.navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#C7A34B;

transition:.35s;

}

.navbar a:hover::after{

width:100%;

}

header.scrolled{

background:rgba(255,252,248,.96);

backdrop-filter:blur(20px);

box-shadow:0 10px 35px rgba(0,0,0,.08);

}

header.scrolled a{

color:#4B392A;

}

header.scrolled .logo img{

height:58px;

}

/*======================================================
HERO
======================================================*/

#hero{

position:relative;

height:100vh;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

}

.hero-background{

position:absolute;

inset:0;

}

.hero-background img{

width:100%;

height:100%;

object-fit:cover;

animation:zoomHero 18s linear infinite alternate;

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

rgba(20,18,15,.35),

rgba(20,18,15,.55)

);

}

.hero-content{

position:relative;

z-index:10;

text-align:center;

color:white;

padding:20px;

}

.hero-logo{

width:170px;

margin:auto;

margin-bottom:35px;

filter:drop-shadow(0 15px 25px rgba(0,0,0,.35));

animation:logoFloat 5s ease-in-out infinite;

}

.hero-subtitle{

letter-spacing:10px;

text-transform:uppercase;

font-size:15px;

margin-bottom:20px;

color:#F6E7C3;

}

.hero-content h1{

font-size:95px;

color:white;

margin-bottom:15px;

}

.hero-date{

font-size:24px;

line-height:1.8;

margin-bottom:45px;

}

.hero-button{

font-size:15px;

letter-spacing:2px;

padding:18px 42px;

}

.hero-button:hover{

transform:translateY(-5px) scale(1.04);

}

/*======================================================
MUSIC BUTTON
======================================================*/

#musicButton{

position:fixed;

bottom:35px;

right:35px;

z-index:999;

padding:16px 28px;

border:none;

border-radius:60px;

background:white;

color:#4B392A;

font-weight:600;

cursor:pointer;

box-shadow:0 20px 40px rgba(0,0,0,.12);

transition:.35s;

}

#musicButton:hover{

transform:translateY(-4px);

background:#C7A34B;

color:white;

}

/*======================================================
HERO ANIMATION
======================================================*/

@keyframes zoomHero{

0%{

transform:scale(1);

}

100%{

transform:scale(1.10);

}

}
/*======================================================
PRESENTATION
======================================================*/

.presentation-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.presentation-image{

position:relative;

}

.presentation-image img{

border-radius:28px;

box-shadow:0 35px 80px rgba(0,0,0,.15);

transition:.5s;

}

.presentation-image img:hover{

transform:scale(1.03);

}

.presentation-text{

font-size:18px;

line-height:2;

}

.presentation-text h2{

margin-bottom:30px;

}

/*======================================================
CITATION
======================================================*/

.citation{

padding:90px 0;

background:linear-gradient(
180deg,
#FCFAF6,
#F8F4EC
);

text-align:center;

}

.translation{

font-size:20px;

font-style:italic;

color:#8A7357;

}

/*======================================================
COMPTE A REBOURS
======================================================*/

.countdown-section{

padding:130px 0;

background:#FCFAF6;

text-align:center;

}

.countdown-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:35px;

margin-top:60px;

}

.count-box{

background:white;

padding:40px;

border-radius:24px;

box-shadow:0 25px 60px rgba(0,0,0,.08);

transition:.35s;

border:1px solid #EEE4D5;

}

.count-box:hover{

transform:translateY(-10px);

}

.count-box span{

display:block;

font-family:'Cormorant Garamond',serif;

font-size:72px;

color:#C7A34B;

line-height:1;

margin-bottom:12px;

}

.count-box small{

font-size:15px;

letter-spacing:3px;

text-transform:uppercase;

color:#7B6652;

}

/*======================================================
CARTES EVENEMENTS
======================================================*/

.cards-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:45px;

margin-top:70px;

}

.event-card{

background:rgba(255,255,255,.75);

backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.7);

border-radius:30px;

padding:55px;

text-align:center;

box-shadow:0 30px 70px rgba(0,0,0,.08);

transition:.4s;

position:relative;

overflow:hidden;

}

.event-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
transparent,
#C7A34B,
transparent
);

}

.event-card:hover{

transform:translateY(-12px);

box-shadow:0 45px 80px rgba(0,0,0,.12);

}

.event-icon{

font-size:60px;

margin-bottom:30px;

}

.event-card h3{

margin-bottom:20px;

}

.event-time{

font-weight:600;

letter-spacing:2px;

color:#B28B38;

margin-bottom:20px;

}

.event-button{

margin-top:25px;

}

/*======================================================
SECTION JERUSALEM
======================================================*/

.location-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.location-image img{

border-radius:28px;

box-shadow:0 35px 70px rgba(0,0,0,.15);

transition:.5s;

}

.location-image img:hover{

transform:scale(1.03);

}

.location-text p{

line-height:2;

}

/*======================================================
EFFET FOND PREMIUM
======================================================*/

.section{

position:relative;

overflow:hidden;

}

.section::after{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:rgba(199,163,75,.05);

filter:blur(80px);

top:-150px;

right:-150px;

pointer-events:none;

}

/*======================================================
GALERIE
======================================================*/

.gallery{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

margin-top:70px;

}

.gallery img{

width:100%;

height:320px;

object-fit:cover;

border-radius:24px;

cursor:pointer;

transition:.45s;

box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.gallery img:hover{

transform:scale(1.04);

box-shadow:0 35px 70px rgba(0,0,0,.16);

}

/*======================================================
MUSIQUE
======================================================*/

.music-section{

padding:140px 0;

text-align:center;

background:linear-gradient(
180deg,
#FDFBF8,
#F5EEE4
);

}

.music-link{

margin-top:35px;

}

/*======================================================
RSVP
======================================================*/

.rsvp-form{

display:flex;

flex-direction:column;

gap:22px;

margin-top:55px;

}

.rsvp-form input,
.rsvp-form textarea{

padding:18px 22px;

border-radius:18px;

border:1px solid #E6DCCF;

background:white;

font-size:16px;

transition:.35s;

outline:none;

font-family:inherit;

}

.rsvp-form textarea{

min-height:180px;

resize:vertical;

}

.rsvp-form input:focus,
.rsvp-form textarea:focus{

border-color:#C7A34B;

box-shadow:0 0 0 4px rgba(199,163,75,.15);

}

/*======================================================
FOOTER
======================================================*/

footer{

padding:100px 0 60px;

background:#3D2F24;

color:white;

text-align:center;

}

.footer-logo{

width:95px;

margin:auto;

margin-bottom:25px;

}

footer h3{

font-size:42px;

color:white;

margin-bottom:15px;

}

.footer-divider{

width:120px;

height:2px;

margin:35px auto;

background:linear-gradient(
90deg,
transparent,
#C7A34B,
transparent
);

}

footer blockquote{

font-family:"Cormorant Garamond",serif;

font-size:30px;

font-style:italic;

color:#F4E2B8;

margin-bottom:18px;

}

.dedicace{

font-size:18px;

color:#E9D8B2;

margin-bottom:25px;

}

footer .copyright{

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

opacity:.75;

}

/*======================================================
RETOUR EN HAUT
======================================================*/

#backToTop{

position:fixed;

right:28px;

bottom:105px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:#C7A34B;

color:white;

font-size:22px;

cursor:pointer;

box-shadow:0 15px 35px rgba(0,0,0,.18);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

#backToTop.show{

opacity:1;

visibility:visible;

}

#backToTop:hover{

transform:translateY(-6px);

}

/*======================================================
ANIMATIONS
======================================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.fade-up.visible{

opacity:1;

transform:translateY(0);

}

/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:992px){

.presentation-grid,
.location-grid,
.cards-grid{

grid-template-columns:1fr;

}

.gallery{

grid-template-columns:repeat(2,1fr);

}

.countdown-grid{

grid-template-columns:repeat(2,1fr);

}

.hero-content h1{

font-size:70px;

}

}

@media (max-width:640px){

.gallery{

grid-template-columns:1fr;

}

.countdown-grid{

grid-template-columns:1fr;

}

.hero-content h1{

font-size:52px;

}

.navbar ul{

display:none;

}

.section{

padding:90px 0;

}

h2{

font-size:2.2rem;

}

}

/*======================================================
PARTIE 2.5
FINITIONS PREMIUM
======================================================*/

/* ===========================
SCROLLBAR
=========================== */

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#F7F2EA;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
#E7D7A7,
#C7A34B
);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#B68D2E;

}

/* ===========================
SELECTION
=========================== */

::selection{

background:#C7A34B;

color:white;

}

/* ===========================
ANIMATIONS
=========================== */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes zoomIn{

from{

opacity:0;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}

.fade-up{

animation:fadeUp .9s ease both;

}

.fade-left{

animation:fadeLeft .9s ease both;

}

.fade-right{

animation:fadeRight .9s ease both;

}

.zoom{

animation:zoomIn .9s ease both;

}

/* ===========================
OMBRE PREMIUM
=========================== */

.shadow-xl{

box-shadow:

0 20px 60px rgba(0,0,0,.08),

0 35px 100px rgba(0,0,0,.06);

}

/* ===========================
EFFET VERRE
=========================== */

.glass{

background:rgba(255,255,255,.65);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.5);

}

/* ===========================
PARTICULES DORÉES
=========================== */

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

opacity:.18;

background-image:

radial-gradient(circle at 20% 20%, rgba(199,163,75,.25) 1px, transparent 1px),

radial-gradient(circle at 80% 40%, rgba(199,163,75,.18) 1px, transparent 1px),

radial-gradient(circle at 60% 75%, rgba(199,163,75,.22) 1px, transparent 1px);

background-size:

240px 240px,

320px 320px,

420px 420px;

animation:particlesMove 40s linear infinite;

z-index:-1;

}

@keyframes particlesMove{

0%{

transform:translateY(0);

}

100%{

transform:translateY(-120px);

}

}

/* ===========================
EFFET SUR LES CARTES
=========================== */

.event-card,
.count-box,
.presentation-image img,
.location-image img{

transition:

transform .4s ease,

box-shadow .4s ease;

}

.event-card:hover,
.count-box:hover{

transform:translateY(-10px);

box-shadow:

0 25px 60px rgba(0,0,0,.10),

0 10px 30px rgba(199,163,75,.18);

}

/* ===========================
LIENS
=========================== */

a{

transition:.3s;

}

a:hover{

opacity:.9;

}

/* ===========================
FOCUS ACCESSIBILITÉ
=========================== */

button:focus,
a:focus,
input:focus,
textarea:focus{

outline:3px solid rgba(199,163,75,.35);

outline-offset:3px;

}

/* ===========================
FIN
=========================== */