:root {
  --lin:#f3ece0; --creme:#faf6ef; --brique:#b85c3a; --brique-cl:#d4845f;
  --terre:#7a5c3f; --mousse:#5e7052; --mousse-cl:#8fa37f;
  --encre:#2c2318; --gris:#9e9187; --or:#c8963a; --bordure:#ddd3c4;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--encre); font-family:'Source Serif 4',serif; font-weight:300; overflow-x:hidden; }
body::after { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events:none; z-index:9000; }
#page { max-width: 1920px; margin: 0 auto; background: var(--creme); color: var(--encre); box-shadow: 0 0 60px rgba(0,0,0,0.2); }

/* NAV */
nav { /*position:sticky; top:0; z-index:200;*/ background:var(--creme); border-bottom:1px solid var(--bordure); padding:1rem 3rem; display:flex; justify-content:space-between; align-items:center; gap: 32px; }
.nav-logo { display:flex; flex-direction:column; line-height:1; }
.nav-logo-nom { font-family:'Caveat',cursive; font-size:1.55rem; font-weight:700; color:var(--encre); }
.nav-logo-nom span { color:var(--brique); }
.nav-logo-base { font-size:0.65rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gris); font-style:italic; padding-top:0.15rem; }
.nav-badge { font-family:'Caveat',cursive; font-size:0.95rem; color:var(--brique); border:1px solid var(--bordure); padding:0.4rem 1rem; letter-spacing:0.04em; white-space: nowrap; }

/* HERO */
#hero { background:var(--lin); border-bottom:1px solid var(--bordure); display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:3rem; padding:2rem 3rem 4.5rem; position:relative; overflow:hidden; max-height: 850px; min-height: 680px; }
#hero::before { content:''; position:absolute; right:-80px; top:-80px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(94,112,82,0.07) 0%,transparent 70%); pointer-events:none; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:0.7rem; font-size:0.8rem; font-style:italic; color:var(--gris); margin-bottom:1.4rem; }
.hero-eyebrow::before { content:''; width:28px; height:1px; background:var(--bordure); display:block; }
h1.hero-titre { font-family:'Lora',serif; font-size:clamp(2.4rem,4.2vw,3.6rem); font-weight:600; line-height:1.15; color:var(--encre); margin-bottom:0.5rem; }
h1.hero-titre em { font-style:italic; color:var(--brique); }
.hero-accroche { font-family:'Caveat',cursive; font-size:clamp(1.4rem,2.6vw,2rem); color:var(--brique); font-weight:600; margin-bottom:1.8rem; line-height:1.4; }
.hero-desc { font-size:1rem; line-height:1.9; color:var(--terre); max-width:430px; margin-bottom:2.5rem; }
.email-label { font-family:'Caveat',cursive; font-size:1rem; color:var(--gris); margin-bottom:0.7rem; letter-spacing:0.03em; }
.email-form { display:flex; max-width:440px; }
.email-input { flex:1; background:var(--creme); border:1px solid var(--bordure); border-right:none; color:var(--encre); padding:0.85rem 1.1rem; font-family:'Source Serif 4',serif; font-size:0.9rem; font-weight:300; outline:none; transition:border-color 0.25s; }
.email-input::placeholder { color:var(--gris); font-style:italic; }
.email-input:focus { border-color:var(--mousse); }
.email-btn { background:var(--brique); color:white; border:none; padding:0.85rem 1.6rem; font-family:'Source Serif 4',serif; font-size:0.85rem; cursor:pointer; transition:background 0.25s; white-space:nowrap; }
.email-btn:hover { background:var(--terre); }
.email-note { font-size:0.76rem; font-style:italic; color:var(--gris); margin-top:0.5rem; }
.hero-promesses { display:flex; gap:1.8rem; margin-top:2.5rem; flex-wrap:wrap; }
.promesse { display:flex; align-items:center; gap:0.55rem; font-size:0.82rem; color:var(--terre); }
.promesse-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.promesse-dot.p1 { background:var(--brique); }
.promesse-dot.p2 { background:var(--mousse); }
.promesse-dot.p3 { background:var(--or); }
.hero-right { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem; }
.vitrine-wrap { width: 100%; height: 100%; overflow: hidden;}
.vitrine-wrap img {width: 100%;}

/* BANDEAU */
.bandeau { background:var(--brique); padding:0.9rem 0; overflow:hidden; white-space:nowrap; }
.bandeau-track { display:inline-flex; animation:defiler 28s linear infinite; }
.bandeau-item { font-family:'Caveat',cursive; font-size:1.05rem; color:rgba(255,255,255,0.9); padding:0 2.5rem; }
.bandeau-item.sep { color:rgba(255,255,255,0.4); }
@keyframes defiler { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* SECTIONS */
.etiquette { font-family:'Caveat',cursive; font-size:1.05rem; color:var(--mousse); letter-spacing:0.05em; display:block; margin-bottom:0.5rem; position: relative; }
h2.ts { font-family:'Lora',serif; font-size:clamp(1.8rem,3vw,2.7rem); font-weight:600; line-height:1.22; color:var(--encre); position: relative; }
h2.ts em { font-style:italic; color:var(--brique); }
.trait { width:48px; height:2px; background:var(--or); margin:1.4rem 0 2.4rem; }

/* SERVICES */
#services { position:relative; background:var(--creme); border-bottom:1px solid var(--bordure); padding:10rem 3rem 20rem 3rem; }
#background-services { z-index:0; position:absolute; right:0; top:50%; transform:translateY(-50%); height:80%; width:50%; min-width: 350px; background: url('ressources/img/back-services-creastore-artisan-createurs-colombey-les-belles.png') right / cover no-repeat; }
.services-grille { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3.5rem; }
.service-carte { background:var(--lin); border:1px solid var(--bordure); padding:2.8rem 2.2rem; transition:box-shadow 0.3s,transform 0.3s; }
.service-carte:hover { box-shadow:0 8px 28px rgba(44,35,24,0.09); transform:translateY(-4px); }
.service-icone { margin-bottom:1.5rem; }
.service-carte h3 { font-family:'Lora',serif; font-size:1.1rem; font-weight:600; color:var(--encre); margin-bottom:0.7rem; }
.service-carte p { font-size:0.88rem; line-height:1.85; color:var(--terre); }
.service-tag { display:inline-block; margin-top:1.6rem; font-family:'Caveat',cursive; font-size:0.88rem; color:var(--mousse); border-bottom:1px solid var(--mousse-cl); padding-bottom:1px; }

/* ENGAGEMENT */
#engagement { background:var(--lin); border-top:1px solid var(--bordure); border-bottom:1px solid var(--bordure); display:grid; grid-template-columns:1fr 1fr; }
.eng-gauche { padding:5.5rem 3.5rem 5.5rem 3rem; border-right:1px solid var(--bordure); }
.eng-gauche p { font-size:0.97rem; line-height:1.95; color:var(--terre); margin-bottom:1.3rem; }
.eng-droite { padding:5.5rem 3rem 5.5rem 3.5rem; display:flex; flex-direction:column; justify-content:center; }
.chiffre-ligne { padding:2.2rem 0; border-bottom:1px solid var(--bordure); display:flex; align-items:center; gap:1.5rem; }
.chiffre-ligne:first-of-type { border-top:1px solid var(--bordure); }
.chiffre-nb { font-family:'Caveat',cursive; font-size:3.2rem; font-weight:700; color:var(--brique); min-width:90px; line-height:1; }
.chiffre-txt { font-size:0.9rem; line-height:1.65; color:var(--terre); }

/* RÉSEAUX */
#reseaux { background:var(--creme); border-bottom:1px solid var(--bordure); padding:7rem 3rem; display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
.reseaux-texte { max-width:420px; }
.reseaux-texte p { font-size:0.92rem; line-height:1.7; color:var(--terre); margin-top:0.3rem; }
.reseaux-liens { display:flex; gap:1rem; flex-wrap:wrap; }
.rs-btn { display:inline-flex; align-items:center; gap:0.55rem; padding:0.65rem 1.3rem; border:1px solid var(--bordure); color:var(--terre); text-decoration:none; font-family:'Source Serif 4',serif; font-size:0.85rem; transition:border-color 0.25s,color 0.25s; }
.rs-btn:hover { border-color:var(--brique); color:var(--brique); }

/* ENCART CRÉATEURS */
#createurs-cta { background:var(--terre); padding:8rem 3rem; display:grid; grid-template-columns:1fr auto; gap:4rem; align-items:center; }
.cta-tag { font-family:'Caveat',cursive; font-size:1rem; color:rgba(240,235,225,0.5); letter-spacing:0.05em; display:block; margin-bottom:0.5rem; }
#createurs-cta h2 { font-family:'Lora',serif; font-size:clamp(1.8rem,2.8vw,2.5rem); font-weight:600; line-height:1.25; color:var(--lin); margin-bottom:0.6rem; }
#createurs-cta h2 em { font-style:italic; color:var(--brique-cl); }
#createurs-cta .trait { background:rgba(255,255,255,0.2); }
#createurs-cta p { font-size:0.95rem; line-height:1.9; color:rgba(240,235,225,0.6); margin-bottom:1.3rem; max-width:500px; }
.cta-liste { list-style:none; display:flex; flex-direction:column; gap:0.55rem; margin-top:0.5rem; }
.cta-liste li { font-size:0.88rem; color:rgba(240,235,225,0.6); display:flex; align-items:center; gap:0.7rem; }
.cta-liste li::before { content:''; width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,0.1) url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 8px; flex-shrink:0; }
.btn-cta { background:var(--lin); color:var(--terre); padding:1rem 2.2rem; font-family:'Source Serif 4',serif; font-size:0.9rem; text-decoration:none; display:block; text-align:center; transition:background 0.25s,transform 0.2s; flex-shrink:0; }
.btn-cta:hover { background:white; color:var(--encre); transform:translateY(-2px); }
.btn-cta-sub { font-size:0.72rem; font-style:italic; color:rgba(240,235,225,0.3); text-align:center; margin-top:0.5rem; }

/* FOOTER */
footer { background:var(--encre); border-top:3px solid var(--brique); padding:2.5rem 3rem; display:flex; justify-content:space-between; align-items:center; }
.footer-logo-nom { font-family:'Caveat',cursive; font-size:1.4rem; font-weight:700; color:var(--lin); }
.footer-logo-nom span { color:var(--brique-cl); }
.footer-baseline { font-size:0.7rem; font-style:italic; color:rgba(240,235,225,0.35); letter-spacing:0.1em; margin-top:0.2rem; }
.footer-info { text-align:right; font-size:0.75rem; font-style:italic; color:rgba(240,235,225,0.3); line-height:1.7; }
.footer-legal { background:#1a110a; padding:1rem 3rem; display:flex; gap:2rem; align-items:center; border-top:1px solid rgba(240,235,225,0.06); flex-wrap:wrap; }
.footer-legal span { font-size:0.72rem; color:rgba(240,235,225,0.35); font-style:italic; }
.footer-legal a { font-size:0.72rem; color:rgba(240,235,225,0.35); text-decoration:none; font-style:italic; transition:color 0.2s; cursor:pointer; }
.footer-legal a:hover { color:var(--brique-cl); }

/* PANNEAUX LÉGAUX */
.legal-panel { background:var(--lin); border-top:1px solid var(--bordure); display:none; }
.legal-panel.open { display:block; }
.legal-inner { max-width:720px; margin:0 auto; padding:4rem 2rem; }
.legal-inner h3 { font-family:'Lora',serif; font-size:1.6rem; font-weight:600; color:var(--encre); margin-bottom:1.5rem; }
.legal-inner p { font-size:0.88rem; line-height:1.85; color:var(--terre); margin-bottom:1.4rem; }
.legal-inner p strong { color:var(--encre); display:block; margin-bottom:0.2rem; }
.legal-inner a { text-decoration: none; color: var(--brique); font-weight:400;}
.legal-inner a:hover, .legal-inner a:focus { color: var(--terre);}
.legal-close { background:none; border:1px solid var(--bordure); color:var(--gris); padding:0.4rem 1rem; font-family:'Caveat',cursive; font-size:0.9rem; cursor:pointer; float:right; margin-bottom:1.5rem; transition:border-color 0.2s,color 0.2s; }
.legal-close:hover { border-color:var(--brique); color:var(--brique); }

/* RESPONSIVE */
@media(max-width:880px) {
  nav { padding:1rem 1.5rem; }
  #hero { grid-template-columns:1fr; padding:2rem 1.5rem 3rem; gap:2.5rem; height: inherit; }
  .hero-right { display: none }
  .hero-promesses { gap: 0.8rem; }
  .vitrine-wrap svg { width:260px; height:auto; }
  .email-form { flex-direction:column; }
  .email-input { border-right:1px solid var(--bordure); }
  .email-btn { width:100%; }
  #services { padding:6rem 1.5rem 15rem 1.5rem; }
  #background-services { top:5.5%; transform:translateY(0); height:45%; }
  .services-grille { width: 65%; grid-template-columns:1fr; gap:2rem; }
  #engagement { grid-template-columns:1fr; }
  .eng-gauche { border-right:none; padding:4rem 1.5rem; }
  .eng-droite { padding:0 1.5rem 4rem 1.5rem; }
  #reseaux { flex-direction:column; align-items:flex-start; padding:3rem 1.5rem; }
  #createurs-cta { grid-template-columns:1fr; gap:2.5rem; padding:4rem 1.5rem; }
  footer { flex-direction:column; gap:1rem; text-align:center; padding:2rem 1.5rem; }
  .footer-info { text-align:center; }
  .footer-legal { padding:1rem 1.5rem; gap:1rem; }
}

@media(max-width: 725px) {
  #background-services { top: inherit; bottom: 6%; height: 27%; width: 100%; }
  .services-grille { width: 100%; }
  #services { padding: 6rem 1.5rem 37rem 1.5rem; }
}

/* iOS safe area */
#page {
  padding-bottom: env(safe-area-inset-bottom);
}
nav {
  padding-top: max(1rem, env(safe-area-inset-top));
}

/* iOS Dynamic Island / notch fix */
nav {
  padding-top: calc(1rem + env(safe-area-inset-top));
  background: var(--creme);
}
body {
  background: var(--creme);
}

/* Couvre la zone Dynamic Island en permanence au scroll */
nav::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: var(--creme);
  z-index: 201;
}