/* =====================================================
   OPTI'T LUNETTES - STYLE V2
   Partie 1 : Base + Header + Hero
===================================================== */

:root{

    --primary:#18BCD6;
    --primary-dark:#1198AE;

    --navy:#17324D;

    --bg:#EDF9FA;

    --text:#4F5E67;

    --white:#ffffff;

    --radius:22px;

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

}

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:var(--bg);

    color:var(--text);

    line-height:1.7;

}

/* ==========================
        HEADER
========================== */

.site-header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:100;

    background:transparent;

}

.container{

    max-width:1300px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px 40px;

}

/* ==========================
          LOGO
========================== */

.logo{

    height:160px;

    transition:.35s;

}

.logo:hover{

    transform:scale(1.03);

}

/* ==========================
          MENU
========================== */

nav{

    display:flex;

    gap:38px;

}

nav a{

    color:var(--navy);

    text-decoration:none;

    font-size:1rem;

    font-weight:600;

    position:relative;

    transition:.3s;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:var(--primary);

    transition:.35s;

}

nav a:hover{

    color:var(--primary-dark);

}

nav a:hover::after{

    width:100%;

}

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

.hero{

    max-width:1320px;

    margin:auto;

    padding-top:190px;

    padding-bottom:60px;

    padding-left:30px;

    padding-right:30px;

}

.hero h1{

    text-align:center;

    font-size:3.7rem;

    color:var(--navy);

    line-height:1.15;

    margin-bottom:25px;

}

.hero-subtitle{

    text-align:center;

    font-size:1.25rem;

    color:#617686;

    margin-bottom:35px;

}

/* ==========================
         BOUTON
========================== */

.btn{

    display:inline-block;

    padding:16px 34px;

    background:linear-gradient(
        135deg,
        #1FC7E2,
        #11A6BE
    );

    color:#fff;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

    box-shadow:

        0 10px 25px rgba(0,0,0,.12);

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 35px rgba(0,0,0,.18);

}

/* Centrage du bouton */

.hero .btn{

    display:table;

    margin:0 auto 55px;

}
/* =====================================================
   PARTIE 2
   CARTES DES MAGASINS
===================================================== */

.stores{

    display:grid;

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

    gap:35px;

    margin-top:50px;

}

.store-card{

    position:relative;

    overflow:hidden;

    border-radius:26px;

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

    transition:.45s;

    background:#fff;

}

.store-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}

.store-card img{

    width:100%;

    height:600px;

    object-fit:cover;

    display:block;

    transition:transform .7s;

}

/* Zoom léger au survol */

.store-card:hover img{

    transform:scale(1.05);

}

/* Dégradé bleu élégant */

.store-card::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:60%;

    background:linear-gradient(
        to top,
        rgba(23,50,77,.92),
        rgba(23,50,77,.45),
        rgba(23,50,77,0)
    );

}

/* ==========================
      TEXTE SUR LES PHOTOS
========================== */

.store-info{

    position:absolute;

    left:35px;

    right:35px;

    bottom:28px;

    z-index:5;

    color:#fff;

}

.store-info h2{

    font-size:2.3rem;

    font-weight:700;

    margin-bottom:10px;

}

.store-info p{

    font-size:1.12rem;

    margin:3px 0;

    letter-spacing:.3px;

}

.store-info strong{

    color:#9FE8F5;

}

/* ==========================
      PETIT EFFET LUMIÈRE
========================== */

.store-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

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

    top:-100px;

    right:-100px;

    z-index:1;

    transition:.5s;

}

.store-card:hover::before{

    transform:scale(1.3);

}
/* =====================================================
   PARTIE 3
   SECTION PRESENTATION + SERVICES
===================================================== */

.intro{

    max-width:1200px;

    margin:90px auto;

    padding:0 30px;

    text-align:center;

}

.intro h2{

    font-size:2.6rem;

    color:var(--navy);

    margin-bottom:25px;

}

.intro p{

    max-width:850px;

    margin:auto;

    font-size:1.18rem;

    color:#667785;

    line-height:1.9;

}

/* =====================================================
      SERVICES
===================================================== */

.services{

    max-width:1300px;

    margin:90px auto;

    padding:0 30px;

}

.services h2{

    text-align:center;

    font-size:2.5rem;

    color:var(--navy);

    margin-bottom:55px;

}

.services-grid{

    display:grid;

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

    gap:28px;

}

/* ======================= */

.service{

    background:#ffffff;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

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

    transition:.35s;

    border:1px solid rgba(24,188,214,.08);

}

/* ======================= */

.service:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(0,0,0,.14);

    border-color:#18BCD6;

}

/* ======================= */

.service .icon{

    width:72px;

    height:72px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #1EC8E2,
        #16A9C2
    );

    color:white;

    font-size:32px;

}

/* ======================= */

.service h3{

    font-size:1.35rem;

    color:var(--navy);

    margin-bottom:15px;

}

/* ======================= */

.service p{

    color:#6C7D89;

    font-size:1rem;

    line-height:1.7;

}

/* ======================= */

.service small{

    display:block;

    margin-top:10px;

    color:#18BCD6;

    font-weight:600;

}

/* =====================================================
      PETITE BANDE DE CONFIANCE
===================================================== */

.trust{

    max-width:1200px;

    margin:80px auto;

    background:linear-gradient(
        135deg,
        #17324D,
        #234A68
    );

    color:white;

    border-radius:24px;

    padding:45px;

    display:grid;

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

    gap:25px;

    text-align:center;

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

}

.trust h3{

    font-size:2.4rem;

    color:#55E0F5;

}

.trust p{

    margin-top:10px;

    opacity:.92;

    font-size:1rem;

}
:root{
 --primary:#18b7d6;
 --primary-dark:#0f8ca5;
 --navy:#17324d;
 --bg:#f4f8fa;
 --text:#4c5965;
 --radius:22px;
 --shadow:0 12px 35px rgba(0,0,0,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 font-family:Poppins,Arial,sans-serif;
 background:var(--bg);
 color:var(--text);
 line-height:1.7;
}
.header{
 position:fixed;top:0;left:0;width:100%;
 background:rgba(255,255,255,.92);
 backdrop-filter:blur(12px);
 box-shadow:0 3px 15px rgba(0,0,0,.05);
 z-index:999;
}
.container{
 max-width:1300px;
 margin:auto;
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:18px 40px;
}
.logo{
 height:135px;
 transition:.3s;
}
.logo:hover{transform:scale(1.03)}
nav{display:flex;gap:34px}
nav a{
 text-decoration:none;
 color:var(--navy);
 font-weight:600;
 position:relative;
}
nav a::after{
 content:"";
 position:absolute;
 left:0;bottom:-6px;
 width:0;height:3px;
 background:var(--primary);
 transition:.35s;
}
nav a:hover::after{width:100%}

.hero{
 max-width:1320px;
 margin:auto;
 padding:180px 30px 70px;
}
.hero-title{text-align:center;margin-bottom:45px}
.hero-title h1{
 font-size:3.6rem;
 color:var(--navy);
 line-height:1.12;
 margin-bottom:20px;
}
.subtitle{
 font-size:1.2rem;
 color:#5d7185;
 margin-bottom:30px;
}
.btn{
 display:inline-block;
 background:var(--primary);
 color:#fff;
 padding:14px 28px;
 border-radius:40px;
 text-decoration:none;
 font-weight:600;
 transition:.3s;
}
.btn:hover{background:var(--primary-dark)}

.stores{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:28px;
}
.store{
 position:relative;
 overflow:hidden;
 border-radius:24px;
 box-shadow:var(--shadow);
}
.store img{
 width:100%;
 height:580px;
 object-fit:cover;
 display:block;
 transition:transform .7s;
}
.store:hover img{transform:scale(1.05)}
.store::after{
 content:"";
 position:absolute;inset:0;
 background:linear-gradient(to top,rgba(23,50,77,.88),rgba(23,50,77,0));
}
.overlay{
 position:absolute;
 left:35px;
 right:35px;
 bottom:25px;
 color:#fff;
 z-index:2;
}
.overlay h2{
 font-size:2.2rem;
 margin-bottom:10px;
}
.overlay p{
 font-size:1.08rem;
}

.intro{
 max-width:1050px;
 margin:70px auto;
 background:#fff;
 border-radius:24px;
 padding:60px;
 text-align:center;
 box-shadow:var(--shadow);
}
.intro h2{
 color:var(--navy);
 font-size:2rem;
 margin-bottom:20px;
}
.features{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:22px;
 margin-top:40px;
}
.feature{
 background:#f8fbfc;
 border-radius:18px;
 padding:30px;
 box-shadow:0 8px 22px rgba(0,0,0,.06);
 transition:.3s;
}
.feature:hover{transform:translateY(-6px)}

.cookie-banner{
 position:fixed;
 left:20px;right:20px;bottom:20px;
 background:#17324d;
 color:#fff;
 border-radius:16px;
 padding:18px 22px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:15px;
 flex-wrap:wrap;
}
.cookie-actions{display:flex;gap:10px}

footer{
 background:var(--navy);
 color:#fff;
 text-align:center;
 padding:45px;
 margin-top:70px;
}

@media(max-width:900px){
 .container{flex-direction:column}
 .logo{height:95px}
 nav{flex-wrap:wrap;justify-content:center}
 .stores,.features{grid-template-columns:1fr}
 .store img{height:360px}
 .hero-title h1{font-size:2.4rem}
 .hero{padding-top:220px}
}