/* ===========================
   QUINTESSA
   STYLE.CSS
=========================== */

:root{

--creme:#FAF8F4;
--blanc:#ffffff;

--ocre:#BE8A5A;

--terracotta:#C47B5A;

--sauge:#A8B39B;

--texte:#4E463F;

--gris:#8B847D;

--ombre:0 12px 35px rgba(0,0,0,.08);

--radius:28px;

}

/**********************/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--creme);

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

color:var(--texte);

line-height:1.7;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

/**********************/

header{

position:sticky;

top:0;

background:rgba(250,248,244,.95);

backdrop-filter:blur(12px);

z-index:999;

border-bottom:1px solid #ece7df;

}

.container{

width:92%;

max-width:1400px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 0;

}

.logo a{

font-family:'Cormorant Garamond',serif;

font-size:40px;

color:var(--texte);

font-weight:700;

}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav a{

color:var(--texte);

font-weight:500;

transition:.3s;

}

nav a:hover{

color:var(--ocre);

}

/**********************/

.hero{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

width:92%;

max-width:1400px;

margin:auto;

padding:100px 0;

}

.collection{

display:inline-block;

background:#EFE5D6;

padding:10px 18px;

border-radius:30px;

margin-bottom:25px;

font-size:15px;

font-weight:600;

}

.hero h1{

font-size:72px;

font-family:'Cormorant Garamond',serif;

line-height:1.05;

margin-bottom:25px;

}

.hero p{

font-size:20px;

max-width:560px;

margin-bottom:40px;

color:var(--gris);

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:50px;

}

.btn-primary{

background:var(--ocre);

padding:18px 36px;

border-radius:40px;

color:white;

font-weight:600;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:var(--ombre);

}

.btn-secondary{

background:white;

padding:18px 36px;

border-radius:40px;

color:var(--texte);

border:1px solid #ddd;

transition:.3s;

}

.btn-secondary:hover{

background:#f5f5f5;

}

.hero-icons{

display:flex;

gap:45px;

margin-top:20px;

}

.hero-icons div{

text-align:center;

font-size:14px;

}

.hero-icons p{

margin-top:8px;

font-size:14px;

}

.hero-image img{

border-radius:35px;

box-shadow:var(--ombre);

}

/**********************/

section{

padding:90px 0;

width:92%;

max-width:1400px;

margin:auto;

}

.title{

text-align:center;

margin-bottom:70px;

}

.title h2{

font-size:55px;

font-family:'Cormorant Garamond',serif;

margin-bottom:20px;

}

.title p{

font-size:20px;

color:var(--gris);

}

/**********************/

.products{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:35px;

}

/**********************/

.product{

background:white;

border-radius:30px;

overflow:hidden;

box-shadow:var(--ombre);

transition:.35s;

position:relative;

}

.product:hover{

transform:translateY(-10px);

}

.product img{

height:320px;

object-fit:cover;

width:100%;

}

.product h3{

padding:25px 25px 10px;

font-size:30px;

font-family:'Cormorant Garamond',serif;

}

.product p{

padding:0 25px;

color:var(--gris);

min-height:90px;

}

.price{

padding:20px 25px;

font-size:28px;

font-weight:700;

color:var(--ocre);

}

.product a{

display:block;

margin:0 25px 30px;

background:var(--ocre);

text-align:center;

padding:15px;

border-radius:40px;

color:white;

font-weight:600;

transition:.3s;

}

.product a:hover{

background:var(--terracotta);

}

.badge{

position:absolute;

top:20px;

left:20px;

background:#d3b17d;

color:white;

padding:8px 15px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.new{

background:#B8744F;

}

/**********************/

.included{

text-align:center;

}

.included h2{

font-size:52px;

font-family:'Cormorant Garamond',serif;

margin-bottom:60px;

}

.content-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.content-grid div{

background:white;

padding:35px;

border-radius:25px;

font-size:19px;

box-shadow:var(--ombre);

}

/**********************/

.pack{

background:linear-gradient(135deg,#efe5d6,#faf8f4);

border-radius:40px;

padding:90px;

text-align:center;

}

.pack h2{

font-size:56px;

font-family:'Cormorant Garamond',serif;

margin-bottom:20px;

}

.pack h3{

margin-top:30px;

font-size:30px;

}

.promo{

font-size:80px;

font-weight:700;

color:var(--ocre);

margin:30px 0;

}

/**********************/

.mediation{

text-align:center;

padding:120px 0;

}

.mediation h2{

font-size:54px;

font-family:'Cormorant Garamond',serif;

margin-bottom:25px;

}

.mediation p{

max-width:700px;

margin:auto;

margin-bottom:40px;

}

/**********************/

footer{

background:#ECE5DA;

margin-top:120px;

padding:80px 20px;

text-align:center;

}

footer h2{

font-size:44px;

font-family:'Cormorant Garamond',serif;

margin-bottom:20px;

}

.footer-links{

margin-top:35px;

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}

.footer-links a{

color:var(--texte);

}

/* Bouton retour accueil */

.retour-accueil{

display:inline-block;

margin-top:50px;

}

/**********************
RESPONSIVE
**********************/

@media(max-width:980px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero h1{

font-size:55px;

}

.hero p{

margin:auto auto 35px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-icons{

justify-content:center;

flex-wrap:wrap;

}

nav{

display:none;

}

.pack{

padding:50px 25px;

}

}
/* Informations d'achat */

.purchase-info{
    max-width:900px;
    margin:25px auto 45px;
    padding:18px 24px;
    background:#FFF8F1;
    border:1px solid #E8D7BF;
    border-radius:14px;
    text-align:center;
}

.purchase-info p{
    margin:6px 0;
    color:#666;
    font-size:0.95rem;
    line-height:1.6;
}

.purchase-info strong{
    color:#556B4F;
}