@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,350;0,9..144,600;1,9..144,400&family=Dancing+Script:wght@500;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#17140f;
  --paper:#f7f3ea;
  --paper-dim:#eee8db;
  --brass:#a9803f;
  --brass-light:#c9a35f;
  --line: rgba(23,20,15,0.14);
  --overlay: rgba(15,12,8,0.52);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:350; letter-spacing:-0.01em;}
.script{font-family:'Dancing Script', cursive; font-weight:700;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}

.eyebrow{
  font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--brass); font-weight:600;
}

/* ---------- PHOTO BANDS (real photos, dark overlay for legibility) ---------- */
.photo-band{
  position:relative;
  background-size:cover;
  background-position:center;
  color:#f5f0e6;
}
.photo-band::before{
  content:"";
  position:absolute; inset:0;
  background:var(--overlay);
}
.photo-band > *{position:relative; z-index:1;}

.wood{ background-image:url('assets/wood.jpg'); }
.wood.dark-overlay::before{ background:rgba(10,7,4,0.62); }
.hero-photo{ background-image:url('assets/boutique-interieur.jpg'); }
.hero-photo::before{ background:rgba(8,7,5,0.58); }

/* ---------- HEADER / NAV ---------- */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(23,20,15,0.5);
  backdrop-filter:blur(6px);
}
nav.topnav{
  max-width:1220px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.brandmark{display:flex; align-items:center;}
.brandmark img{height:34px; width:auto;}

.desktop-links{
  display:none;
  gap:38px;
  font-size:0.85rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.desktop-links a{color:#f2ece0; opacity:0.82; transition:opacity .2s; padding:6px 0; position:relative;}
.desktop-links a:hover{opacity:1;}
.desktop-links a.current{opacity:1;}
.desktop-links a.current::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--brass-light);
}
.desktop-cta{
  display:none;
  font-size:0.82rem; padding:9px 20px;
  border:1px solid rgba(242,236,224,0.55); border-radius:22px;
  color:#f2ece0; letter-spacing:0.02em; white-space:nowrap;
  transition:background .2s, border-color .2s;
}
.desktop-cta:hover{background:rgba(242,236,224,0.12); border-color:#f2ece0;}

.burger{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.4);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:transparent;
}
.burger svg{width:18px; height:18px; stroke:#f2ece0;}

@media(min-width:860px){
  .desktop-links{display:flex; align-items:center;}
  .desktop-cta{display:inline-block;}
  .burger{display:none;}
}

.navdrawer{
  position:fixed; inset:0 0 0 auto; z-index:80;
  width:min(320px, 84vw); height:100%;
  background:#211b15; color:#f2ece0;
  transform:translateX(100%);
  transition:transform .35s ease;
  padding:28px 26px;
  display:flex; flex-direction:column; gap:6px;
}
.navdrawer.open{transform:translateX(0);}
.navdrawer .close-btn{
  align-self:flex-end; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center;
  cursor:pointer; margin-bottom:24px; background:transparent;
}
.navdrawer .close-btn svg{width:15px; height:15px; stroke:#f2ece0;}
.navdrawer a{
  padding:16px 4px; border-bottom:1px solid rgba(255,255,255,0.1);
  font-size:0.95rem; letter-spacing:0.04em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; color:#f2ece0;
}
.navdrawer a svg{width:12px; height:12px; opacity:0.6;}
.navdrawer a.current{color:var(--brass-light);}
.scrim{
  position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:70;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.scrim.open{opacity:1; pointer-events:auto;}
@media(min-width:860px){ .navdrawer, .scrim{ display:none; } }

/* ---------- HERO (home) ---------- */
.hero{
  padding:120px 24px 100px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  min-height:560px;
  justify-content:center;
}
.hero .mark img{height:auto; width:min(420px, 78vw); margin:0 auto;}
.hero .since{
  font-family:'Dancing Script', cursive; font-weight:700;
  color:var(--brass-light); font-size:1.9rem; margin-top:18px;
}
.hero .followline{margin-top:40px; font-size:0.92rem; opacity:0.85; font-style:italic;}
.social-row{display:flex; gap:16px; justify-content:center; margin-top:14px;}
.social-row a{
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid rgba(242,236,224,0.6);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
}
.social-row a:hover{background:rgba(242,236,224,0.12); border-color:#f2ece0;}
.social-row svg{width:18px; height:18px; stroke:#f2ece0;}

/* generic banner (services/dynoptic/rendez-vous) */
.banner{padding:100px 24px; text-align:center;}
.banner h1{font-size:clamp(2rem,5vw,2.8rem); text-transform:uppercase; letter-spacing:0.02em; font-weight:350;}
.banner p{margin-top:16px; opacity:0.88; font-size:0.98rem; max-width:52ch; margin-left:auto; margin-right:auto;}

/* ---------- SECTION shell ---------- */
section{max-width:1180px; margin:0 auto; padding:90px 24px;}
.section-head{text-align:center; margin-bottom:52px;}
.section-head h2.script{font-size:clamp(2rem,5vw,2.9rem); margin-top:6px;}

/* ---------- HORAIRES ---------- */
.hours-grid{display:grid; gap:18px; grid-template-columns:1fr; max-width:800px; margin:0 auto;}
@media(min-width:680px){.hours-grid{grid-template-columns:repeat(3,1fr);}}
.hcard{background:#fff; border-radius:6px; padding:30px 26px; box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.hcard .check{width:26px; height:26px; margin-bottom:16px;}
.hcard .day{font-weight:600; letter-spacing:0.08em; text-transform:uppercase; font-size:0.8rem; margin-bottom:14px;}
.hcard .times div{display:flex; justify-content:space-between; font-size:0.92rem; padding:3px 0; color:rgba(23,20,15,0.72);}
.hcard.closed .times{font-style:italic; color:rgba(23,20,15,0.45);}
.horaires-band{background:var(--paper-dim);}

/* ---------- MAP / CONTACT ---------- */
.map-embed{border-radius:6px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.08); max-width:820px; margin:0 auto;}
.map-embed iframe{width:100%; height:280px; border:0; display:block;}
.address-block{text-align:center; margin-top:26px;}
.address-block h3{font-size:1.4rem; font-weight:500;}
.address-block p{margin-top:6px; color:rgba(23,20,15,0.65); font-size:0.95rem;}

.contact-wrap{max-width:820px; margin:60px auto 0;}
form{display:flex; flex-direction:column; gap:18px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}
label{font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase; color:rgba(23,20,15,0.55); display:block; margin-bottom:7px;}
input, textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:3px;
  background:#fff; font-family:'Inter',sans-serif; font-size:0.95rem; color:var(--ink);
}
input:focus, textarea:focus{outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass);}
textarea{resize:vertical; min-height:130px;}
.submit-btn{
  align-self:flex-start; background:#2f5fd6; color:#fff;
  padding:14px 30px; border-radius:26px; font-size:0.92rem; letter-spacing:0.02em;
  border:none; cursor:pointer; transition:filter .2s;
}
.submit-btn:hover{filter:brightness(1.08);}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
}

.info-cols{display:grid; gap:28px; grid-template-columns:1fr; margin-top:56px; max-width:820px; margin-left:auto; margin-right:auto;}
@media(min-width:600px){.info-cols{grid-template-columns:1fr 1fr;}}
.info-cols .label{font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--brass); font-weight:600; margin-bottom:8px;}
.info-cols p{font-size:0.95rem; color:rgba(23,20,15,0.75);}

/* ---------- BRAND BADGES ---------- */
.brand-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:34px; max-width:960px; margin:0 auto;}
.brand-badge{
  width:160px; height:160px; border-radius:50%;
  background:#000000; color:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem; letter-spacing:0.01em;
  padding:10px; transition:transform .25s ease;
}
.brand-badge:hover{transform:translateY(-4px);}
.brand-badge img{width:68%; height:auto; object-fit:contain;}
.brand-badge span{display:block;}
.brand-badge .sub{font-family:'Inter',sans-serif; font-weight:500; font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; opacity:0.75; margin-top:4px;}

/* ---------- LUNETTERIE INTRO (with real model photo) ---------- */
.lunetterie-intro{
  display:grid; gap:40px; grid-template-columns:1fr; align-items:center; margin-bottom:70px;
}
@media(min-width:820px){.lunetterie-intro{grid-template-columns:0.9fr 1.1fr;}}
.lunetterie-intro img{border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,0.12);}
.lunetterie-intro h2{font-size:1.7rem; margin-bottom:14px;}
.lunetterie-intro p{color:rgba(23,20,15,0.72); font-size:0.98rem;}

/* ---------- DYNOPTIC PAGE ---------- */
.dynoptic-text{max-width:760px; margin:0 auto; text-align:left;}
.dynoptic-text h2{font-size:1.7rem; margin-bottom:18px;}
.dynoptic-text p{color:rgba(23,20,15,0.75); margin-bottom:14px;}
.dynoptic-text li{
  position:relative; padding-left:20px; margin:8px 0; color:rgba(23,20,15,0.78); font-size:0.95rem;
}
.dynoptic-text li::before{content:"•"; position:absolute; left:0; color:var(--brass);}
.dynoptic-plaque{
  max-width:640px; margin:56px auto 0;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px;
}
.dynoptic-plaque img{width:100%; height:auto;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:38px 24px; text-align:center; font-size:0.82rem; color:rgba(23,20,15,0.55);}
footer a{color:var(--brass);}
footer .foot-nav{display:flex; gap:22px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; font-size:0.82rem;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}