:root{
  --ink:#0A0908;
  --surface:#15130F;
  --surface-2:#1E1B16;
  --brass:#C9A063;
  --brass-hi:#E8CB94;
  --paper:#FFFFFF;
  --txt:#F4F1EC;
  --txt-mut:#A79F93;
  --ink-txt:#141210;
  --ink-mut:#5A5248;
  --max:1240px;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --script:"Italianno",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--txt);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:700;letter-spacing:-0.02em;margin:0}
p{margin:0}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 28px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- marque, reprise de l'enseigne du salon ---------- */
.marque{display:inline-flex;align-items:baseline;gap:.42em;white-space:nowrap}
.marque i{font-family:var(--script);font-style:normal;font-size:2.15em;line-height:.8;color:var(--brass-hi)}
.marque b{font-weight:600;font-size:.94em;letter-spacing:.2em;color:var(--txt)}

/* ---------- navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s ease}
.nav.colle{background:var(--ink);border-bottom:1px solid rgba(201,160,99,.22)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.nav a.logo{text-decoration:none;font-size:15px}
.nav-liens{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav-liens a{color:var(--txt-mut);text-decoration:none;font-size:15px}
.nav-liens a:hover{color:var(--txt)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:16px;font-weight:600;text-decoration:none;
  padding:14px 26px;border:1px solid var(--brass);color:var(--ink);background:var(--brass);
  transition:background .2s ease,border-color .2s ease;
}
.btn:hover{background:var(--brass-hi);border-color:var(--brass-hi)}
.btn-fant{background:transparent;color:var(--txt);border-color:rgba(244,241,236,.4)}
.btn-fant:hover{background:rgba(244,241,236,.09);border-color:rgba(244,241,236,.7)}
.btn-ink{background:var(--ink);color:var(--txt);border-color:var(--ink)}
.btn-ink:hover{background:var(--surface-2);border-color:var(--surface-2)}
.btn:focus-visible,.nav-liens a:focus-visible,.nav a.logo:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}

/* ---------- entete ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero img.fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero .voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.86) 0,rgba(10,9,8,.42) 26%,rgba(10,9,8,.74) 58%,rgba(10,9,8,.97) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:130px;padding-bottom:58px}
.hero h1{font-size:clamp(2.5rem,7vw,5.4rem);line-height:.98;max-width:13ch;margin-bottom:22px}
.hero .sous{font-size:clamp(1.05rem,2vw,1.3rem);color:#D8D2C8;max-width:46ch;margin-bottom:32px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- blocs ---------- */
.bloc{padding:clamp(76px,9vw,132px) 0;scroll-margin-top:70px}
.bloc.serre{padding-top:0}
.blanc{background:var(--paper);color:var(--ink-txt)}
.blanc .mut{color:var(--ink-mut)}
.mut{color:var(--txt-mut)}
h2.gros{font-size:clamp(2.1rem,5.2vw,4rem);line-height:1.02;max-width:17ch}
.intro{font-size:1.1rem;max-width:52ch;margin-top:20px}

/* ---------- la preuve, un moment typographique et non des tuiles ---------- */
.preuve{background:var(--surface);padding:clamp(76px,10vw,140px) 0}
.preuve .chiffre{font-size:clamp(4.5rem,17vw,13rem);line-height:.82;font-weight:800;letter-spacing:-0.045em;color:var(--brass)}
.preuve .ligne1{font-size:clamp(1.5rem,3.8vw,2.9rem);font-weight:600;line-height:1.2;max-width:20ch;margin-top:26px}
.preuve .ligne2{margin-top:22px;max-width:50ch;font-size:1.05rem}
.barres{margin-top:46px;max-width:430px}
.barre{display:flex;align-items:center;gap:14px;padding:5px 0;font-size:14px;color:var(--txt-mut)}
.barre > span:first-child{width:22px;flex:0 0 auto}
.barre .piste{display:block;flex:1;height:7px;background:rgba(244,241,236,.12);overflow:hidden}
.barre .jauge{display:block;height:100%;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:left center;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.vu .barre .jauge{transform:scaleX(var(--s))}
.barre > span:last-child{width:52px;text-align:right;flex:0 0 auto;font-variant-numeric:tabular-nums}

/* ---------- services, liste typographique sans cartes ---------- */
.liste{margin-top:54px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(40px,6vw,96px)}
.ligne-serv{padding:26px 0;border-top:1px solid rgba(244,241,236,.14)}
.blanc .ligne-serv{border-top-color:rgba(20,18,16,.14)}
.ligne-serv h3{font-size:1.3rem;margin-bottom:6px}
.ligne-serv p{font-size:1rem;color:var(--ink-mut)}

/* ---------- mur de photos, pleine largeur, sans cartes ---------- */
.mur{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:3px;background:var(--ink)}
.mur img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.mur .h2{grid-column:span 2;grid-row:span 2}
.mur .h2 img{aspect-ratio:1/1;height:100%}
.mur .w2{grid-column:span 2}

/* ---------- mur d'avis, l'element signature ---------- */
.avis-mur{columns:5 190px;column-gap:26px;margin-top:50px}
.avis-mur figure{margin:0 0 26px;break-inside:avoid}
.avis-mur blockquote{margin:0;font-size:15px;line-height:1.5;color:var(--txt)}
.avis-mur figcaption{margin-top:9px;font-size:12.5px;color:var(--txt-mut)}
.avis-mur figcaption b{font-weight:600;color:var(--brass)}
.compteur{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:26px}
.compteur strong{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;color:var(--brass);letter-spacing:-0.03em;line-height:1}
.fondu{position:relative}
.fondu::after{content:"";position:absolute;left:0;right:0;bottom:0;height:190px;background:linear-gradient(transparent,var(--ink));pointer-events:none}
.plus-avis{margin-top:30px;display:flex;justify-content:center}

/* ---------- prenoms ---------- */
.prenoms{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:38px;font-size:clamp(1.4rem,3.6vw,2.4rem);font-weight:700;letter-spacing:-0.02em}
.prenoms span{color:var(--ink-txt)}

/* ---------- pratique ---------- */
.deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);margin-top:50px;align-items:start}
.horaire{width:100%;border-collapse:collapse}
.horaire th,.horaire td{text-align:left;padding:12px 0;border-bottom:1px solid rgba(244,241,236,.13);font-weight:400;font-size:16px}
.horaire th{color:var(--txt-mut)}
.horaire td{text-align:right;font-variant-numeric:tabular-nums}
.horaire tr.tard td{color:var(--brass-hi);font-weight:600}
.faits{list-style:none;margin:32px 0 0;padding:0}
.faits li{padding:10px 0;border-bottom:1px solid rgba(244,241,236,.13);font-size:16px;color:var(--txt-mut)}
.adresse{font-size:clamp(1.3rem,2.6vw,1.75rem);font-weight:600;line-height:1.45}
.adresse a{color:var(--brass-hi);text-decoration:none}
.adresse a:hover{text-decoration:underline}
.pratique-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- appel final ---------- */
.final{background:var(--paper);color:var(--ink-txt);padding:clamp(76px,10vw,140px) 0;text-align:center}
.final h2{font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.02;max-width:16ch;margin:0 auto 20px}
.final p{color:var(--ink-mut);max-width:44ch;margin:0 auto 32px;font-size:1.08rem}

/* ---------- pied ---------- */
footer{background:var(--ink);padding:60px 0 36px;font-size:15px;color:var(--txt-mut);border-top:1px solid rgba(201,160,99,.2)}
footer .cols{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between}
footer h3{font-size:15px;font-weight:600;color:var(--txt);margin-bottom:10px}
footer a{color:var(--txt-mut);text-decoration:none}
footer a:hover{color:var(--brass-hi)}
.credit{margin-top:36px;padding-top:22px;border-top:1px solid rgba(244,241,236,.1);font-size:13.5px}

.appel-mobile{display:none}

/* ---------- reveal ---------- */
.rev{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.rev.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .barre .jauge{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .mur{grid-template-columns:repeat(4,1fr)}
  .avis-mur{columns:3 180px}
}
@media (max-width:760px){
  .deux{grid-template-columns:1fr}
  .liste{grid-template-columns:1fr}
  .nav-liens{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .mur{grid-template-columns:repeat(2,1fr)}
  .mur .h2{grid-column:span 2;grid-row:span 1}
  .mur .h2 img{aspect-ratio:4/3}
  .mur .w2{grid-column:span 2}
  .avis-mur{columns:1}
  .nav .wrap .btn{display:none}
  .hero .wrap{padding-top:112px}
  footer{padding-bottom:92px}
  .appel-mobile{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--brass);color:var(--ink);text-decoration:none;font-weight:600;
    align-items:center;justify-content:center;padding:16px;font-size:16px;
  }
}