/* pages.css - About/story page, legal page, privacy page, reviews section, delivery zone, footer */

/* About Page */
.about-hero{
    min-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:100px 20px;
    background:linear-gradient(rgba(28,31,92,.9),rgba(28,31,92,.9)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%231C1F5C" width="1200" height="600"/><path fill="%23ff4757" opacity="0.1" d="M0 300L50 325L100 300L150 275L200 300L250 325L300 300L350 275L400 300L450 325L500 300L550 275L600 300L650 325L700 300L750 275L800 300L850 325L900 300L950 275L1000 300L1050 325L1100 300L1150 275L1200 300V600H0V300Z"/></svg>');
    background-size:cover;
    background-position:center;
    position:relative;
}

.about-hero::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:200px;
    background:linear-gradient(to top,var(--dark),transparent);
}

/* === MODIFIÉ : Typographie manuscrite === */
.about-hero h1{
    font-family:var(--handwriting);
    font-size:80px;
    color:var(--t);
    margin-bottom:30px;
    letter-spacing:2px;
    position:relative;
    z-index:1;
    font-weight:700;
}

.about-hero p{
    font-size:22px;
    color:var(--m);
    max-width:700px;
    margin:0 auto;
    position:relative;
    z-index:1;
    line-height:1.8;
}

.story-section{
    padding:100px 20px;
    max-width:1000px;
    margin:0 auto;
}

.story-block{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    margin-bottom:100px;
}

.story-block:nth-child(even) .story-text{order:2;}

/* === MODIFIÉ : Typographie manuscrite === */
.story-text h2{
    font-family:var(--handwriting);
    font-size:56px;
    margin-bottom:25px;
    color:var(--t);
    letter-spacing:2px;
    font-weight:700;
}

.story-text p{
    color:var(--m);
    font-size:17px;
    line-height:1.9;
    margin-bottom:20px;
}

.story-image, .story-media{
    background:var(--bg);
    border-radius:24px;
    height:400px;
    border:1px solid var(--l);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:80px;
    position:relative;
    overflow:hidden;
}

.story-image::before, .story-media::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:linear-gradient(45deg,var(--accent-modern),transparent);
    opacity:.1;
}

.story-media img, .story-media video{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    top:0;left:0;
}

.story-media video{
    controls:none;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    margin-top:60px;
}

.value-card{
    text-align:center;
    padding:40px 30px;
    background:rgba(255,255,255,.03);
    border-radius:20px;
    border:1px solid var(--l);
    transition:all .3s;
}

.value-card:hover{
    transform:translateY(-10px);
    border-color:var(--accent-modern);
}

.value-card i{
    font-size:48px;
    color:var(--accent-modern);
    margin-bottom:25px;
}

.value-card h3{font-size:22px;margin-bottom:15px;}
.value-card p{color:var(--m);line-height:1.7;}

/* Reviews Section */
.reviews-section{
    padding:100px 20px;
    background:var(--bg);
}

.reviews-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    max-width:1200px;
    margin:40px auto 0;
}

.review-card{
    background:rgba(255,255,255,.03);
    padding:30px;
    border-radius:20px;
    border:1px solid var(--l);
    transition:all .3s;
}

.review-card:hover{
    transform:translateY(-5px);
    border-color:var(--accent-modern);
}

.review-header{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}

.review-avatar{
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--accent-modern);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
}

.review-stars{color:var(--warning);margin-bottom:15px;}
.review-text{color:var(--m);line-height:1.7;font-style:italic;}
.review-date{color:var(--m);font-size:12px;margin-top:15px;opacity:.7;}

/* === Page Mentions Légales / Confidentialité === */
.legal-page{padding:80px 20px 60px;max-width:800px;margin:0 auto;}
.legal-page h1{font-size:32px;margin-bottom:30px;color:var(--t);}
.legal-page h2{font-size:22px;margin-top:40px;margin-bottom:15px;color:var(--t);border-bottom:1px solid var(--l);padding-bottom:10px;}
.legal-page h3{font-size:18px;margin-top:25px;margin-bottom:10px;color:var(--accent-modern);}
.legal-page p,.legal-page li{font-size:14px;color:var(--m);line-height:1.8;margin-bottom:10px;}
.legal-page ul{padding-left:20px;}
.legal-page a{color:var(--accent-modern);}
.legal-back{display:inline-flex;align-items:center;gap:8px;color:var(--accent-modern);font-size:14px;font-weight:600;cursor:pointer;border:none;background:none;margin-bottom:20px;padding:0;}
.legal-back:hover{opacity:.8;}

/* Footer */
footer{
    background:var(--dark);
    border-top:1px solid var(--l);
    padding:80px 20px 40px;
    margin-top:100px;
}

.footer-content{max-width:1200px;margin:0 auto;}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:50px;
    margin-bottom:60px;
}

.footer-col h4{
    font-family:var(--handwriting);
    font-size:36px;
    margin-bottom:25px;
    color:var(--t);
    letter-spacing:2px;
    font-weight:700;
}

.footer-col p,.footer-col a{
    color:var(--m);
    text-decoration:none;
    line-height:1.9;
    font-size:15px;
    transition:all .3s;
}

.footer-col a:hover{color:var(--accent-modern);}

.footer-logo{
    font-family:var(--handwriting);
    font-size:42px;
    color:var(--t);
    margin-bottom:25px;
    letter-spacing:2px;
    font-weight:700;
}

.footer-logo span{color:var(--accent-modern);}

.footer-social{
    display:flex;
    gap:20px;
    margin-top:25px;
}

.footer-social a{
    width:50px;
    height:50px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--t);
    font-size:20px;
    transition:all .3s;
    border:1px solid var(--l);
}

.footer-social a:hover{
    background:var(--accent-modern);
    transform:translateY(-5px);
    border-color:var(--accent-modern);
}

.footer-hours{
    background:rgba(255,255,255,.03);
    padding:25px;
    border-radius:16px;
    margin-top:25px;
    border:1px solid var(--l);
}

.footer-hours strong{color:var(--accent-modern);display:block;margin-bottom:10px;font-size:18px;}

.footer-bottom{
    text-align:center;
    padding-top:40px;
    border-top:1px solid var(--l);
    color:var(--m);
    font-size:14px;
}