/* ==========================
   RESET
========================== */

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

html{
scroll-behavior:smooth;
}

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

a{
text-decoration:none;
}

ul{
list-style:none;
}

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

:root{

/* Fonds */

--bg:#FFF4D6;
--surface:#FFFFFF;


/* Texte */

--text:#232323;


/* Couleurs principales */

--primary:#87D938;
--secondary:#67cd8c;

--accent:#D78D64;


/* Couleurs complémentaires */

--soft:#EEDDD3;
--neutral:#D6C9BA;

/* Ombre */

--shadow:
0 10px 30px rgba(0,0,0,.05);

}

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

body{

font-family:"Inter",sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.8;

}

section{

padding:110px 8%;

}

h1,
h2,
h3{

font-family:"Lora",serif;

font-weight:500;

}

h2{

font-size:clamp(2rem,4vw,3.5rem);

line-height:1.2;

margin-bottom:20px;

}

p{

font-size:1rem;

}

/* ==========================
   SEPARATOR
========================== */

.separator{

width:120px;
height:2px;

background:#E8D6CB;

margin:auto;

border-radius:10px;

}

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

header{

display:flex;

justify-content:space-between;

align-items:center;

padding:30px 8%;

position:sticky;

top:0;

background:#F1B089;

backdrop-filter:blur(10px);

z-index:1000;

}


.logo{

display:flex;

align-items:center;

gap:20px; 

}

.logo img{

height:70px;
width:auto;
color: #d95712;
display:block;

transition:.3s;

}

.logo img:hover{

transform:scale(1.03);

}

.logo-text h1{

font-size:1.4rem;

margin-bottom:4px;

}

.logo-text span{

font-size:.9rem;

color:#FF4800;

letter-spacing:1px;

}

nav{

display:flex;

gap:30px;

}

nav a{

color:#FFF4D6;

font-size:.95rem;

transition:.3s;

}

nav a:hover{

color:#FFF4D6;

}

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

.hero{

min-height:100vh;

background:
linear-gradient(
rgba(255,249,235,.82),
rgba(255,243,220,.86)
),
url("./images/heroimage.jpeg");

background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.hero-content{

max-width:850px;

}

.eyebrow{

display:block;

letter-spacing:2px;

font-size:.98rem;

margin-bottom:20px;

opacity:.9;

}

.hero h2{

font-size:clamp(3rem,6vw,5rem);

line-height:1.05;

margin-bottom:30px;

}

.hero p{

max-width:700px;

margin:auto;

margin-bottom:40px;

font-size:1.1rem;

}

.btn-primary{

display:inline-block;

padding:18px 32px;

background:var(--primary);

border-radius:20px;

color:white;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

}

/* ==========================
   A PROPOS
========================== */

.apropos{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.apropos img{

border-radius:30px;

box-shadow:var(--shadow);

}

.apropos span{

letter-spacing:2px;

font-size:.8rem;

opacity:.6;

}

/* ==========================
   PUBLICS
========================== */

.publics{

text-align:center;

}

.publics-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.public-card{

background:white;

padding:40px;

border-radius:25px;

box-shadow:var(--shadow);

}

.public-card h3{

margin-bottom:15px;

}

/* ==========================
   INTERVENTIONS
========================== */

.interventions{

margin-top:80px;

padding:55px;

background:var(--surface);

border-radius:32px;

box-shadow:var(--shadow);

text-align:center;

}

.interventions h3{

margin-bottom:15px;

color:var(--primary);

}

.interventions-intro{

max-width:700px;

margin:0 auto 40px;

}

.interventions h4{

margin:35px 0 20px;

font-size:1rem;

color:var(--text);

font-weight:600;

}

.badges{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

.badges span{

padding:12px 22px;

background:var(--primary);

color:white;

border-radius:999px;

font-size:.95rem;

font-weight:500;

transition:.3s;

}



/* ==========================
   ATELIERS
========================== */

.atelier-card ul{

    list-style:none;
    padding:0;
    margin-top:20px;

}

.atelier-card li{

    position:relative;

    padding-left:28px;

    margin-bottom:18px;

    text-align:left;

}

.atelier-card li::before{

    content:"•";

    position:absolute;

    left:0;

    top:0;

    color:var(--accent);

    font-size:1.1rem;

    font-weight:bold;

}

.catalogue{

    max-width:800px;

    margin:70px auto 0;

    padding:45px;

    background:var(--surface);

    border-radius:30px;

    text-align:center;

    box-shadow:var(--shadow);

}

.catalogue p{

    margin:20px 0 30px;

}

.ateliers{

text-align:center;

}

.ateliers h3{

color: #ca7445;

}

.atelier-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.atelier-card{

background:white;

padding:40px;

border-radius:25px;

box-shadow:var(--shadow);

transition:.3s;

}

.atelier-card:hover{

transform:translateY(-5px);

}

.atelier-card h3{

margin-bottom:15px;

}

.atelier-icon{

width:64px;
height:50px;

margin:0 auto 0px;

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

border-radius:50%;

background:var(--orange-100);

color:var(--accent);

}

.atelier-icon svg{

width:32px;
height:32px;

stroke-width:1.8;

}

/* ==========================
   VISION
========================== */

.vision{

background:white;

}

.vision-content{

max-width:850px;

margin:auto;

text-align:center;

}

/* ==========================
   APPROCHE
========================== */

.approche{

text-align:center;

}

.approche-intro{

max-width:700px;

margin:auto;

margin-bottom:60px;

}

.approche-intro span{

letter-spacing:2px;

font-size:.8rem;

opacity:.6;

}

.approche-grid{

display:grid;

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

gap:30px;

}

.approche-card{

background:white;

padding:35px;

border-radius:25px;

box-shadow:var(--shadow);

}

.icon{

width:45px;

height:45px;

margin:auto;

margin-bottom:20px;

background:var(--primary);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

color:white;

}

.approche-card h3{

margin-bottom:15px;

}

/* ==========================
   BANNIÈRE COOKIES
========================== */

.partenaires{

text-align:center;

}

.partenaires p{

max-width:700px;

margin:20px auto 50px;

}

.logos{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:70px;

}

.logos img{

height:60px;

width:auto;

opacity:.75;

transition:.3s;

filter:grayscale(100%);

}

.logos img:hover{

opacity:1;

filter:none;

transform:scale(1.05);

}


/* ==========================
   TEMOIGNAGES
========================== */

.temoignages{

text-align:center;

}

.temoignages-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

blockquote{

background:white;

padding:35px;

border-radius:25px;

box-shadow:var(--shadow);

font-style:italic;

}

/* ==========================
   CONTACT
========================== */

.contact{

text-align:center;

}

.contact form{

max-width:700px;

margin:50px auto 0;

display:flex;

flex-direction:column;

gap:20px;

}

input,
textarea{

padding:18px;

border:none;

border-radius:18px;

background:white;

font-family:inherit;

}

textarea{

resize:vertical;

}

button{

padding:18px;

border:none;

border-radius:18px;

background:var(--primary);

color:white;

font-family:inherit;

cursor:pointer;

transition:.3s;

}

button:hover{

transform:translateY(-3px);

}

/* ==========================
   CONTACT ALTERNATIF
========================== */

.contact-alt{

    margin-top:40px;

    text-align:center;

}

.contact-alt p{

    margin-bottom:20px;

    color:var(--text);

    opacity:.75;

}

.whatsapp-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 26px;

    background:#87D938;

    color:white;

    border-radius:18px;

    font-weight:600;

    transition:.3s;

    box-shadow:var(--shadow);

}

.whatsapp-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(37,211,102,.25);

}

.whatsapp-btn img{

    width:26px;

    height:26px;

}

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

footer{

padding:60px 8%;

text-align:center;

border-top:1px solid rgba(0,0,0,.08);

}

.legalbar{

margin-top:20px;

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.legalbar a{

color:var(--text);

opacity:.7;

font-size:.9rem;

}

.legalbar a:hover{

opacity:1;

}


/* ==========================
   BANNIÈRE COOKIES
========================== */

.cookie-banner{

position:fixed;

bottom:30px;

left:50%;

transform:translateX(-50%);

width:min(92%,760px);

background:var(--surface);

border-radius:28px;

padding:28px;

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

display:none;

align-items:center;

justify-content:space-between;

gap:35px;

z-index:9999;

border:1px solid rgba(103,116,138,.10);

}


.cookie-content{

flex:1;

}

.cookie-content h3{

font-size:1.2rem;

margin-bottom:10px;

color:var(--primary);

}

.cookie-content p{

font-size:.95rem;

line-height:1.7;

color:var(--text);

opacity:.85;

}


/* Boutons */

.cookie-buttons{

display:flex;

gap:15px;

flex-shrink:0;

}

.btn-cookie{

padding:14px 22px;

border-radius:16px;

border:none;

font-family:inherit;

font-size:.95rem;

cursor:pointer;

transition:.3s;

}


/* Accepter */

.accept{

background:var(--primary);

color:white;

}

.accept:hover{

transform:translateY(-2px);

}


/* Refuser */

.refuse{

background:#FF4800;

color:var(--text);

}

.refuse:hover{

transform:translateY(-2px);

}

/* ==========================
   PAGE MERCI POST ENVOI
========================== */

.merci-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;

    background:
        linear-gradient(
            135deg,
            #FFFBF4,
            #FFF8E8,
            #EEF6E5
        );
}

.merci-card {
    width: min(600px, 100%);
    padding: 50px 40px;

    text-align: center;

    background: #ffffff;

    border-radius: 24px;

    box-shadow:
        0 20px 50px rgba(95, 126, 56, 0.12);
}

.merci-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 25px;

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

    border-radius: 50%;

    background: #EEF6E5;
    color: #5F7E38;

    font-size: 34px;
    font-weight: 700;
}

.merci-card h1 {
    margin-bottom: 20px;

    color: #B9470F;
}

.merci-card p {
    color: #555;
    line-height: 1.7;
}

.merci-button {
    display: inline-block;

    margin-top: 25px;
    padding: 13px 24px;

    border-radius: 999px;

    background: #D95712;
    color: white;

    text-decoration: none;
    font-weight: 600;

    transition: 0.2s ease;
}

.merci-button:hover {
    background: #B9470F;
}



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

@media(max-width:900px){

.apropos,
.publics-grid,
.atelier-grid,
.approche-grid,
.temoignages-grid{

grid-template-columns:1fr;

}

section{

padding:80px 7%;

}

header{

flex-direction:column;

gap:20px;

}

nav{

flex-wrap:wrap;

justify-content:center;

}

.hero h2{

font-size:2.8rem;

}

.cookie-banner{

flex-direction:column;

text-align:center;

padding:24px;

}

.cookie-buttons{

width:100%;

justify-content:center;

}

.btn-cookie{

flex:1;

}

}