:root{
    --bg:#f9f9f9;
    --text:#193f56;
    --accent:#b1a695;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Cormorant Garamond',serif;
    font-size:1.2rem;
    background:var(--bg);
    color:var(--text);
    line-height:1.8;
}

html,
body{
    min-height:100%;
}

body{
    display:flex;
    flex-direction:column;
}

main{
    flex:1;
}

img{
    width:70%;
    max-width:100%;
    height:auto;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

.container{
    width:90%;
    max-width:1400px;
    margin:auto;
}



header{
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
    background:rgba(250,248,245,0.95);
    backdrop-filter:blur(10px);
}

/* =========================
   NAV
========================= */


nav{

    display:grid;
    position:relative;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:8px;
    
}

.logo img{
    height:40px;
    width:auto;
}

.menu{
    display:flex;
    justify-content:center;
    gap:40px;
    font-family:'Inter', sans-serif;
    font-size:.7rem;
    letter-spacing:2px;
    text-transform:uppercase;
}

.menu a{
    color:#193f56;
    text-decoration:none;
    transition:color .35s ease;
    position:relative;
}

.menu a:hover{
    color:#b1a695;
}

.menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:1px;
    background:#b1a695;
    transition:width .35s ease;
}

.menu a:hover::after{
    width:100%;
}

.social-nav{
    display:flex;
    justify-content:flex-end;
    gap:15px;
}

.social-nav a{
    width:34px;
    height:34px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
    color:#193f56;
    opacity:.65;
    text-decoration:none;
}

.social-nav a:hover{
    background:#b1a695;
    border-color:#b1a695;
    color:white;
    opacity:1;
}


/* MENU TOGGLE */

.menu-toggle{
    display:none;
}

/* HERO */

.hero{
    height:100vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
}

.hero-slideshow{
    position:absolute;
    inset:0;
}

.slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1.5s ease;
    transform:scale(1.05);
}

.slide.active{
    opacity:1;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
    z-index:1;
}

.hero-content{
    position:relative;
    z-index:2;
    line-height: 1;
}

.hero h1{ 
    font-family:'Cormorant Garamond',serif; 
    font-size:3rem; 
    font-weight:300; 
    letter-spacing:6px; 
} 
    
.hero p{
    font-family:'inter'; 
    margin-top:15px; 
    font-size:0.7rem; 
    letter-spacing:4px; 
    text-transform:uppercase; 
} 

.hero-btn{ 
    display:inline-block; 
    margin-top:35px; 
    padding:16px 38px; 
    background:transparent; 
    border:1px solid white; 
    border-radius:999px; 
    color:white; 
    font-family:'Inter',sans-serif; 
    font-size:.75rem; 
    letter-spacing:2px; 
    text-transform:uppercase; 
    transition:.35s; 
    
} 
    
.hero-btn:hover{ 
    background:#b1a695; 
    color:white; 
    border-color:transparent; 
    
}

.scroll-down{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    color:white;
    font-size:1.4rem;
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,0.6);
    border-radius:50%;
    transition:.3s;
    backdrop-filter: blur(4px);
}

.scroll-down:hover{
    background:white;
    color:black;
    transform:translateX(-50%) translateY(3px);
}

.scroll-down i{
    animation: bounce 2s infinite;
}

@keyframes bounce{
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* SECTIONS */

section{
    padding:60px 0;
}

.section-title{
    font-family:'Inter', sans-serif;
    text-transform:uppercase;
    font-size:2rem;
    font-weight:300;
    text-align:center;
    letter-spacing:2px;
    margin-bottom:40px;
}



/* PORTFOLIO */

.portfolio-hero{
    position:relative;
    height:70vh;
    min-height:500px;
    background-image: url("/images/sortie-ceremonie-mariage.webp");
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:80px 0;
}

/* overlay sombre élégant */
.portfolio-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.35);
}

/* contenu centré */
.portfolio-overlay{
    position:relative;
    text-align:center;
    color:white;
    max-width:700px;
    padding:0 20px;
}

/* titre */
.portfolio-overlay h2{
    font-family:'Inter', sans-serif;
    text-transform:uppercase;
    font-size:2rem;
    font-weight:300;
    letter-spacing:3px;
    margin-bottom:20px;
}

/* texte */
.portfolio-overlay p{
    font-size:1.2rem;
    letter-spacing:2px;
    line-height:1.6;
    margin-bottom:40px;
}

/* bouton */
.portfolio-btn{
    display:inline-block;
    padding:14px 38px;
    border:1px solid white;
    border-radius:999px;
    font-family:'Inter',sans-serif;
    font-size:0.75rem;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:0.3s;
}

.portfolio-btn:hover{
    background:white;
    color:#193f56;
}


/* EXPERIENCE */

.experience{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
    text-align:center;
}

.step-number{
    font-family:'Cormorant Garamond',serif;
    font-size:3rem;
    color:var(--accent);
}

/* ABOUT */

.about{
    display:grid;
    grid-template-columns:450px 1fr;
    gap:40px;
    align-items:center;
}

.about img{
    width:100%;
    max-width:400px;
    margin:auto;
    border-radius:8px;
}

.about h2{
    font-family:'Inter', sans-serif;
    text-transform:uppercase;
    font-size:2rem;
    font-weight:300;
    letter-spacing:2px;
    margin-bottom:40px;
}

/* TESTIMONIALS */

.testimonials{
    max-width:1000px;
    margin:auto;
    text-align:center;
}

.testimonial-name{
    font-family:'Inter', sans-serif;
    font-size:0.9rem;
    font-weight:300;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

blockquote{
    font-family:'Cormorant Garamond',serif;
    font-size:1.2rem;
    margin-bottom:50px;
}

/* =========================
   PRESTATIONS
========================= */


.collections{
    padding:80px 20px;
    text-align:center;
}

.collections-content{
    max-width:700px;
    margin:auto;
}

.section-tag{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:0.9rem;
    color:#8b6d58;
}

.collections h2{
    font-family:'Inter', sans-serif;
    text-transform:uppercase;
    font-size:2rem;
    font-weight:300;
    letter-spacing:2px;
    margin-bottom:40px;
}

.collections p{
    font-family:'Cormorant Garamond',serif;
    font-size:1.15rem;
    line-height:1.8;
    color:#193f56;
}

.price-highlight{
    font-size:2.5rem;
    margin:35px 0;
    color:#8b6d58;
}

.collections-includes{
    max-width:500px;
    margin:35px auto;
    text-align:left;
}

.include-item{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
    font-family:'Inter',sans-serif;
    font-size:.95rem;
}

.include-item i{
    color:#b1a695;
    font-size:.9rem;
}

.details{
    font-style:italic;
}


/* =========================
   EXPERIENCE
========================= */



.mini-experience{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin:50px 0;
    text-align:center;
}

.mini-step{
    padding:10px;
}

.mini-number{
    font-family:'Cormorant Garamond',serif;
    font-size:2.4rem;
    color:#b1a695;
    margin-bottom:10px;
}

.mini-step h3{
    font-family:'Inter',sans-serif;
    font-size:.8rem;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.mini-step p{
    font-size:.95rem;
    line-height:1.6;
}

.booking{
    padding:100px 20px;
    background:#f3f1ed;
    text-align:center;
}

.booking-content{
    max-width:700px;
    margin:auto;
}

.booking h2{
    font-family:'Inter',sans-serif;
    font-weight:300;
    text-transform:uppercase;
    letter-spacing:2px;
    margin:20px 0 30px;
    font-size:2rem;
}

.booking p{
    margin-bottom:20px;
}

.booking-btn{
    display:inline-block;
    margin-top:25px;
    padding:15px 40px;
    border-radius:999px;
    border:1px solid #193f56;
    color:#193f56;
    font-family:'Inter',sans-serif;
    font-size:.75rem;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:.35s;
}

.booking-btn:hover{
    background:#b1a695;
    border-color:#b1a695;
    color:white;
}


.local-seo{
    padding:100px 20px;
}

.local-content{
    max-width:850px;
    margin:auto;
    text-align:center;
}

.local-content h2{
    font-family:'Inter',sans-serif;
    font-weight:300;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:2rem;
    margin:20px 0 35px;
}

.local-content p{
    margin-bottom:25px;
}

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


.contact{
    text-align:center;
    max-width:80ch;
    margin:0 auto 80px;
    margin-bottom: 40px;

}

.contact a{
    border-bottom:1px solid var(--accent);
    padding-bottom:5px;
}

.contact-form{
    margin-top:50px;
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
}

.form-row{
    margin-bottom:20px;
}

.contact-form{
    margin-top:80px;
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
}

.form-row{
    margin-bottom:35px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:12px 0;
    border:none;
    border-bottom:1px solid rgba(0,0,0,.18);
    background:transparent;
    font-family:'Inter',sans-serif;
    font-size:.95rem;
    color:var(--text);
    outline:none;
    transition:.35s;
    resize:none;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-bottom:1px solid var(--accent);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#8f8f8f;
    letter-spacing:.5px;
}

.contact-btn{
    margin-top:20px;
    padding:15px 40px;
    background:transparent;
    border:1px solid var(--accent);
    border-radius:999px;
    color:var(--text);
    font-family:'Inter',sans-serif;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:.75rem;
    cursor:pointer;
    transition:.35s;
}

.contact-btn:hover{
    background:var(--accent);
    color:white;
}

.contact-form label{
    display:block;
    margin-bottom:8px;
    font-family:'Inter',sans-serif;
    font-size:.7rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777;
}

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


footer.footer{
    width:100%;
    padding:30px 20px 25px;
    border-top:1px solid rgba(0,0,0,.08);
    background:var(--bg);
    text-align:center;
    line-height: 1;
    position:relative;
}





.footer-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
}

.footer-title{
    font-family:'Inter', sans-serif;
    font-size:1.2rem;
    font-weight:400;
    letter-spacing:2px;
}

.footer-subtitle{
    font-family:'Inter',sans-serif;
    font-size:.75rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777;
}

.footer-location{
    font-family:'Inter',sans-serif;
    font-size:.75rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777;
}

.footer-copyright{
    margin-top:10px;
    font-family:'Inter',sans-serif;
    font-size:.7rem;
    color:#999;
}

.scroll-top{
    position:fixed;
    bottom:30px;
    right:30px;

    width:50px;
    height:50px;

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

    border:1px solid rgba(0,0,0,.2);
    border-radius:50%;

    color:#193f56;
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(6px);

    font-size:1.3rem;

    opacity:0;
    visibility:hidden;

    transform:translateY(15px);

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s;

    z-index:999;
}

.scroll-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.scroll-top:hover{
    background:#b1a695;
    border-color:#b1a695;
    color:#fff;
}

.scroll-top i{
    animation:bounce 2s infinite;
}


@media (max-width:900px)
{

nav{
    grid-template-columns: auto 1fr auto;
    align-items:center;
}

/* bouton hamburger */
.menu-toggle{ 
    display:flex; 
    position:relative; /* IMPORTANT : on enlève absolute */
    justify-self:end;
    font-size:28px; 
    cursor:pointer; 
    z-index:2001; 
    color:#193f56; 
}

/* logo */
.logo{
    justify-self:start;
}

/* SOCIAL MOBILE CENTRÉ */
.social-nav{
    display:flex;            /* on réactive */
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    justify-content:center;
    gap:12px;
    z-index:2002;
}

/* icônes un peu plus petites en mobile */
.social-nav a{
    width:30px;
    height:30px;
}

/* menu plein écran */
.menu{ 
    position:fixed; 
    top:0; 
    right:-100%; 
    width:100%; 
    height:100vh; 
    background:#f9f9f9; 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    align-items:center; 
    gap:30px; 
    transition:.4s; 
    z-index:2000; 
} 

.menu.active{ 
    right:0; 
} 

.menu a{ 
    font-size:1rem; 
    letter-spacing:3px; 
} 

/* autres ajustements */
.hero h1{ font-size:3rem; } 
.about{ grid-template-columns:1fr; } 
.experience{ grid-template-columns:1fr; } 
.portfolio-hero{ height:60vh; } 
.portfolio-overlay h2{ font-size:2.5rem; } 

}