/* ================= PAGE DECORS ================= */

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

:root{
--bleu-aqua:#8FD3DA;
--bleu-deep:#6BBCC5;

--rose:#C85AA6;
--rose-deep:#A94B8C;

--fond:#FAFBFB;
--texte:#2F2F2F;
--texte-light:#6B6B6B;
}

/* ================= TYPO ================= */

.hero.decors-hero{
position:relative;

min-height:100vh;

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

padding:120px 20px 0;

text-align:center;

background:linear-gradient(
180deg,
#ffffff 0%,
#F2FAFB 40%,
#F8F3F8 100%
);

overflow:hidden;
}

.hero-content{
max-width:750px;

display:flex;
flex-direction:column;
align-items:center;

gap:24px;

z-index:2;
}

.hero-title{
font-size:64px;
line-height:1.1;
letter-spacing:-1px;
margin:0;
color:var(--texte);
}

.hero-accent{
font-family:'Cormorant Garamond', serif; /* 🔥 changement clé */
font-style:italic;
color:var(--violet);
}

.hero-description{
font-size:20px;
line-height:1.6;
color:#666;
max-width:500px;
margin:0;
}

.hero.decors-hero .cta-main{
margin-top:10px;
padding:16px 34px;
background:var(--violet);
}

h1, h2, h3{
font-family:'Cormorant Garamond', serif;
letter-spacing:-0.5px;
color:var(--texte);
}

.hero-content h1{
font-size:64px;
line-height:1.2;
font-weight:600;
letter-spacing:-1px;
margin-bottom:30px;
}

h2{
font-size:42px;
font-weight:600;
line-height:1.2;
}

h3{
font-size:22px;
font-weight:500;
}

p{
font-family:'Manrope', sans-serif;
font-size:16px;
line-height:1.8;
color:var(--texte-light);
}

/* ================= INTRO ================= */

.decors-intro{
padding:120px 20px 80px;
background:#ffffff;
}

.intro-container{
max-width:1100px;
margin:auto;
}

/* TITRE */
.intro-container h2{
font-size:48px;
line-height:1.1;
margin-bottom:30px;
text-align:left;
}

.intro-container span{
color:var(--violet);
font-family:'Cormorant Garamond', serif;
font-style:italic;
}

/* TEXTE */
.intro-text{
font-size:18px;
max-width:600px;
color:#555;
line-height:1.6;
margin-bottom:60px;
text-align:left;
}

/* POINTS */
.decors-points{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

/* CARDS */
.point{
padding:30px;
border-radius:20px;
background:linear-gradient(180deg,#ffffff,#fafafa);
border:1px solid rgba(0,0,0,0.05);
transition:0.3s;
}

.point:hover{
transform:translateY(-6px);
}

/* NUMÉRO */
.point span{
font-size:11px;
letter-spacing:3px;
color:var(--violet);
opacity:0.6;
}

/* TITRE */
.point h3{
margin:10px 0;
font-size:20px;
}

/* TEXTE */
.point p{
font-size:15px;
color:#666;
line-height:1.5;
}

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

.decors-gallery{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
gap:24px;
padding:100px 40px;
}

/* ITEM */
.gallery-item{
position:relative;
border-radius:24px;
overflow:hidden;
cursor:pointer;
}

/* IMAGE */
.gallery-item img{
width:100%;
height:360px;
object-fit:cover;
transition:0.6s ease;
}

/* ZOOM */
.gallery-item:hover img{
transform:scale(1.1);
}

/* OVERLAY */
.overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:30px;

background:linear-gradient(
to top,
rgba(0,0,0,0.6),
rgba(0,0,0,0)
);

color:white;
font-family:'Cormorant Garamond', serif;
font-size:22px;

transform:translateY(20px);
opacity:0;
transition:0.4s ease;
}

.gallery-item:hover .overlay{
transform:translateY(0);
opacity:1;
}

/* ================= CTA DECORS ================= */

.decors-cta{
padding:140px 20px;
display:flex;
justify-content:center;

background:linear-gradient(
180deg,
#ffffff,
#F8F3F8
);
}

.cta-box{
max-width:700px;
text-align:center;

padding:80px 60px;
border-radius:30px;

background:linear-gradient(
135deg,
rgba(126,202,211,0.15),
rgba(183,123,203,0.15)
);

border:1px solid rgba(0,0,0,0.05);
}

/* TITRE */
.cta-box h2{
font-size:44px;
line-height:1.2;
margin-bottom:20px;
}

.cta-box span{
font-family:'Cormorant Garamond', serif;
font-style:italic;
color:var(--violet);
}

/* TEXTE */
.cta-box p{
font-size:18px;
color:#666;
margin-bottom:30px;
}

/* CTA */
.cta-main{
display:inline-flex;
align-items:center;
justify-content:center;

padding:16px 36px;
border-radius:999px;

background:var(--violet);
color:white;

font-size:15px;
font-weight:500;
text-decoration:none;

transition:0.25s ease;
}

.cta-main:hover{
transform:translateY(-2px);
opacity:0.9;
}

.footer-bottom p{
font-size:13px;
line-height:1.4;
margin-bottom: 20px;
}

/* ================= GLOBAL FIX ================= */

section{
position:relative;
}

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

@media (max-width:900px){

.intro-container h2,
.intro-text{
text-align:center;
margin-left:auto;
margin-right:auto;
}

.decors-points{
grid-template-columns:1fr;
}

.decors-gallery{
padding:80px 20px;
}

.cta-box{
padding:60px 30px;
}

}

/* ================= RESPONSIVE MOBILE ================= */
 
@media (max-width: 768px) {
 
  /* HERO */
  .hero.decors-hero {
    padding: 120px 20px 60px;
    min-height: auto;
  }
 
  .hero-title {
    font-size: 38px;
    letter-spacing: -0.5px;
  }
 
  .hero-content h1 {
    font-size: 38px;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
  }
 
  .hero-description {
    font-size: 16px;
  }
 
  .hero.decors-hero .cta-main {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
 
  /* TITRES GLOBAUX */
  h2 {
    font-size: 28px;
  }
 
  h3 {
    font-size: 18px;
  }
 
  /* INTRO */
  .decors-intro {
    padding: 60px 20px 40px;
  }
 
  .intro-container h2 {
    font-size: 30px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
 
  .intro-text {
    font-size: 16px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 36px;
  }
 
  /* POINTS */
  .decors-points {
    grid-template-columns: 1fr;
    gap: 20px;
  }
 
  .point {
    padding: 24px;
  }
 
  /* GALERIE */
  .decors-gallery {
    grid-template-columns: 1fr;
    padding: 50px 20px;
    gap: 16px;
  }
 
  .gallery-item img {
    height: 240px;
  }
 
  /* CTA */
  .decors-cta {
    padding: 60px 20px;
  }
 
  .cta-box {
    padding: 40px 24px;
    border-radius: 20px;
  }
 
  .cta-box h2 {
    font-size: 28px;
  }
 
  .cta-box p {
    font-size: 15px;
  }
 
  .cta-main {
    width: 100%;
    max-width: 280px;
  }
 
}