/* Te Mata Pearl — feuille de style (charte v1.0) */
:root{
  --sable:#FAF6F0; --lagon:#0E4A5A; --corail:#C96F4A;
  --pandanus:#5A6B4D; --encre:#2B2B28; --brume:#E5DED3;
  --radius:14px; --shadow:0 3px 14px rgba(43,43,40,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--sable);color:var(--encre);font-family:'Nunito Sans',sans-serif;line-height:1.6}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2,.serif{font-family:'Cormorant Garamond',serif;color:var(--lagon);font-weight:600;line-height:1.15}
h1{font-size:clamp(34px,5.2vw,56px)}
h2{font-size:clamp(28px,4vw,38px);margin-bottom:10px}
.kicker{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--corail);font-weight:700;margin-bottom:8px}
.lead{font-size:17px;color:#5b574f;max-width:640px}
.ask{color:var(--corail);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ask.big{font-size:15px}
a{color:inherit;text-decoration:none}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--sable);border-bottom:1px solid rgba(229,222,211,.6)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;gap:18px}
.logo{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--lagon);font-weight:700;letter-spacing:.02em;white-space:nowrap}
.logo span{color:var(--corail)}
nav{display:flex;gap:32px;font-weight:600;font-size:15px}
nav a{padding-bottom:3px;color:var(--encre)}
nav a.on,nav a:hover{color:var(--lagon);border-bottom:2px solid var(--corail)}
.header-right{display:flex;align-items:center;gap:16px}
.lang{font-size:14px;font-weight:700;color:#8a857c}
.lang b{color:var(--lagon)}
.lang a{cursor:pointer}
.burger{display:none;background:none;border:none;cursor:pointer;width:26px}
.burger span{display:block;height:2.5px;background:var(--lagon);border-radius:2px;margin:5px 0}

/* hero */
.hero{position:relative;background:linear-gradient(160deg,#0E4A5A 0%,#17607a 55%,#2a8a8e 100%);color:#fff;text-align:center;overflow:hidden}
.hero-inner{position:relative;max-width:820px;margin:0 auto;padding:96px 24px 130px}
.hero::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:90px;background:var(--sable);clip-path:ellipse(60% 100% at 50% 100%)}
.hero .tag{font-size:13px;letter-spacing:.25em;text-transform:uppercase;color:#f3c9b4;margin-bottom:16px;font-weight:700}
.hero h1{color:#fff;margin-bottom:18px}
.hero p{font-size:17px;opacity:.92;margin-bottom:30px}

/* buttons */
.btn{display:inline-block;border:none;border-radius:999px;padding:15px 36px;font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer}
.btn-light{background:#fff;color:var(--lagon);box-shadow:0 4px 16px rgba(0,0,0,.18)}
.btn-solid{background:var(--lagon);color:#fff}
.btn-outline{background:none;border:1.5px solid var(--corail);color:var(--corail)}

/* sections */
.section{padding:64px 0}
.section.alt{background:var(--brume)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);transition:.25s;box-shadow:0 8px 24px rgba(43,43,40,.13)}
.card-body{padding:18px 20px 22px}
.card .n{font-family:'Cormorant Garamond',serif;font-size:23px;color:var(--lagon);font-weight:600}
.card .m{font-size:13px;color:#8a857c;margin:4px 0 12px}
.ph{height:240px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--lagon);background:var(--brume);position:relative}
.ph.short{height:200px}
.ph-a{background:linear-gradient(135deg,#dcefe9,#9fc7c0)}
.ph-b{background:linear-gradient(135deg,#f2e4d0,#d9b98f)}
.ph-c{background:linear-gradient(135deg,#e3e8d8,#a8b592)}
.ph-portrait{background:linear-gradient(150deg,#d9dee6,#a3b0b8);min-height:340px;border-radius:var(--radius)}

/* split (atelier) */
.split{display:flex;gap:40px;align-items:center;padding:64px 0;max-width:1160px;margin:0 auto;flex-wrap:wrap}
.split .ph-portrait{flex:1;min-width:300px;height:340px}
.split-text{flex:1.2;min-width:300px;padding:0 24px}

/* badges & chips */
.badge{background:var(--pandanus);color:#fff;border-radius:999px;padding:4px 12px;font-size:11px;font-weight:700;display:inline-block}
.chip{display:inline-block;background:#fff;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:700;color:var(--lagon);margin:0 8px 10px 0;box-shadow:var(--shadow);cursor:pointer;border:none;font-family:'Nunito Sans',sans-serif}
.chip.on{background:var(--lagon);color:#fff}

/* CTA band */
.cta-band{background:var(--lagon);text-align:center;padding:64px 24px}
.cta-band h2{color:#fff}
.cta-band p{color:#cfe3e8;margin:8px 0 26px;font-size:16px}

/* footer */
.site-footer{background:var(--encre);color:#a9a599;padding:36px 0;font-size:13.5px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.flogo{font-family:'Cormorant Garamond',serif;font-size:20px;color:#fff}
.fmeta a{color:#a9a599;text-decoration:underline;text-underline-offset:2px}
.fmeta a:hover{color:#fff}

/* forms */
.form-field{margin-bottom:16px}
.form-field label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:13px 16px;border:1.5px solid var(--brume);border-radius:10px;font-family:'Nunito Sans',sans-serif;font-size:15px;background:#fff;color:var(--encre)}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:2px solid var(--lagon);border-color:var(--lagon)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#5b574f;margin:14px 0}
.consent input{margin-top:3px}
.form-ok{background:var(--pandanus);color:#fff;border-radius:10px;padding:14px 18px;font-weight:700;margin-top:16px;display:none}
.form-ok.show{display:block}

/* contact layout */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;margin-top:28px}
.info-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:14px}
.info-card .t{font-weight:700;color:var(--lagon);margin-bottom:6px}
.info-card p,.info-card a{font-size:14.5px;color:#5b574f}
.map-ph{height:180px;border-radius:var(--radius);background:linear-gradient(135deg,#dcefe9,#9fc7c0);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--lagon);margin-bottom:14px}

/* piece page */
.piece-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;margin-top:24px}
.piece-grid .ph-main{height:440px;border-radius:var(--radius)}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.thumbs .ph{height:80px;border-radius:10px}
.crumbs{font-size:13px;color:#8a857c;margin:18px 0 4px}
.crumbs a{color:var(--lagon);text-decoration:underline;text-underline-offset:2px}
.pill-row{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}

/* responsive */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .contact-grid,.piece-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--sable);flex-direction:column;padding:18px 24px;gap:16px;border-bottom:1px solid var(--brume);box-shadow:var(--shadow)}
  nav.open{display:flex}
  .burger{display:block}
  .cards{grid-template-columns:1fr}
  .hero-inner{padding:64px 20px 100px}
  .split{padding:48px 0}
}