/* Au Palais du Toilettage — feuille de style unique, partagée par toutes les pages */

:root{
  --ardoise:#2E3A43;      --ardoise-clair:#4A5A66;
  --creme:#FAF6F0;        --sable:#F0E7DA;
  --terracotta:#C8704F;   --terracotta-fonce:#A85639;
  --sauge:#7D9183;        --sauge-clair:#A8B8AC;
  --blanc:#FFFFFF;
  --ombre:0 1px 3px rgba(46,58,67,.08), 0 8px 24px rgba(46,58,67,.06);
  --ombre-forte:0 2px 6px rgba(46,58,67,.10), 0 16px 40px rgba(46,58,67,.10);
  --rayon:14px;
  --max:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--creme); color:var(--ardoise);
  font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fraunces','Georgia',serif; font-weight:600; line-height:1.15; margin:0}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* ---------- en-tête ---------- */
.site-header{position:sticky; top:0; z-index:50; background:var(--blanc); box-shadow:0 1px 0 rgba(46,58,67,.08)}
.header-in{max-width:var(--max); margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:20px}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0}
.logo-mark{width:42px;height:42px;flex-shrink:0}
.logo-txt{display:flex; flex-direction:column; line-height:1.1}
.logo-nom{font-family:'Fraunces',serif; font-weight:600; font-size:1.07rem; letter-spacing:-.01em}
.logo-sous{font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sauge); font-weight:700}

.nav{margin-left:auto; display:flex; align-items:center; gap:3px}
.nav a{
  text-decoration:none; font-size:.86rem; font-weight:600; padding:9px 13px;
  border-radius:9px; color:var(--ardoise-clair); white-space:nowrap; transition:background .15s,color .15s;
}
.nav a:hover{background:var(--sable); color:var(--ardoise)}
.nav a.actif{color:var(--terracotta-fonce); background:rgba(200,112,79,.09)}
.nav .cta{background:var(--terracotta); color:#fff; padding:10px 17px; margin-left:7px}
.nav .cta:hover{background:var(--terracotta-fonce); color:#fff}

.burger{display:none; margin-left:auto; background:none; border:0; padding:9px; cursor:pointer; border-radius:9px}
.burger:hover{background:var(--sable)}
.burger span{display:block; width:23px; height:2px; background:var(--ardoise); border-radius:2px; margin:5px 0; transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1000px){
  .burger{display:block}
  .nav{
    position:absolute; top:100%; left:0; right:0; background:var(--blanc);
    flex-direction:column; align-items:stretch; gap:2px; padding:10px 16px 18px;
    box-shadow:var(--ombre-forte); display:none;
  }
  .nav.ouvert{display:flex}
  .nav a{padding:12px 14px; font-size:.95rem}
  .nav .cta{margin:7px 0 0; text-align:center}
}

/* ---------- bandeaux ---------- */
.hero{position:relative; overflow:hidden; background:var(--ardoise)}
.hero img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.hero-voile{position:absolute; inset:0; background:linear-gradient(105deg,rgba(46,58,67,.93) 0%,rgba(46,58,67,.82) 42%,rgba(46,58,67,.52) 100%)}
.hero-in{position:relative; max-width:var(--max); margin:0 auto; padding:104px 20px 112px; color:#fff}
.hero-txt{max-width:620px}
.pastille{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24); color:#fff; padding:7px 15px; border-radius:999px;
  font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-bottom:22px;
}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.85rem); color:#fff; letter-spacing:-.02em; margin-bottom:20px}
.hero p{font-size:1.14rem; color:rgba(255,255,255,.93); margin:0 0 32px; max-width:540px}
.hero-actions{display:flex; flex-wrap:wrap; gap:13px}

/* bandeau court pour pages internes */
.bandeau{position:relative; overflow:hidden; background:var(--ardoise)}
.bandeau img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.bandeau-voile{position:absolute; inset:0; background:linear-gradient(100deg,rgba(46,58,67,.94),rgba(46,58,67,.78))}
.bandeau-in{position:relative; max-width:var(--max); margin:0 auto; padding:62px 20px 66px; color:#fff}
.bandeau h1{font-size:clamp(1.95rem,4vw,2.9rem); color:#fff; margin-bottom:11px}
.bandeau p{margin:0; color:rgba(255,255,255,.9); max-width:620px; font-size:1.04rem}
.fil{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sauge-clair); font-weight:700; margin-bottom:14px}
.fil a{text-decoration:none}
.fil a:hover{text-decoration:underline}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:11px;
  font-weight:700; font-size:.95rem; text-decoration:none; border:2px solid transparent;
  cursor:pointer; transition:transform .15s, background .15s, box-shadow .15s; font-family:inherit;
}
.btn:hover{transform:translateY(-2px)}
.btn-primaire{background:var(--terracotta); color:#fff; box-shadow:0 6px 18px rgba(200,112,79,.32)}
.btn-primaire:hover{background:var(--terracotta-fonce)}
.btn-clair{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.4)}
.btn-clair:hover{background:rgba(255,255,255,.19)}
.btn-ligne{background:transparent; color:var(--ardoise); border-color:rgba(46,58,67,.2)}
.btn-ligne:hover{border-color:var(--terracotta); color:var(--terracotta-fonce)}

/* ---------- sections ---------- */
.section{padding:78px 0}
.section-sable{background:var(--sable)}
.section-blanc{background:var(--blanc)}
.surtitre{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta); font-weight:800; margin-bottom:13px}
.section h2{font-size:clamp(1.75rem,3.4vw,2.5rem); margin-bottom:16px; letter-spacing:-.015em}
.chapo{font-size:1.07rem; color:var(--ardoise-clair); max-width:640px; margin:0 0 42px}
.centre{text-align:center}
.centre .chapo{margin-left:auto; margin-right:auto}

.grille{display:grid; gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.carte{background:var(--blanc); border-radius:var(--rayon); padding:28px; box-shadow:var(--ombre); border:1px solid rgba(46,58,67,.05)}
.carte h3{font-size:1.16rem; margin-bottom:9px}
.carte p{margin:0; color:var(--ardoise-clair); font-size:.95rem}
.ico{
  width:48px;height:48px;border-radius:12px;background:rgba(125,145,131,.15);
  display:flex;align-items:center;justify-content:center;margin-bottom:17px;
}
.ico svg{width:25px;height:25px;stroke:var(--sauge);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* liste de prestations */
.liste{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.liste li{display:flex; gap:12px; align-items:flex-start; font-size:.97rem; color:var(--ardoise-clair)}
.liste svg{width:19px;height:19px;flex-shrink:0;margin-top:3px;stroke:var(--terracotta);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* duo texte + image */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
@media(max-width:860px){.duo{grid-template-columns:1fr; gap:34px}}
.duo-img{border-radius:var(--rayon); overflow:hidden; box-shadow:var(--ombre-forte)}
.duo-img img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}

/* cartes gabarits / tarifs */
.gabarit{background:var(--blanc); border-radius:var(--rayon); overflow:hidden; box-shadow:var(--ombre); text-decoration:none; display:block; transition:transform .18s, box-shadow .18s; border:1px solid rgba(46,58,67,.05)}
.gabarit:hover{transform:translateY(-4px); box-shadow:var(--ombre-forte)}
.gabarit img{width:100%; aspect-ratio:4/3; object-fit:cover}
.gabarit-corps{padding:20px 22px 24px}
.gabarit h3{font-size:1.1rem; margin-bottom:5px}
.gabarit .races{font-size:.83rem; color:var(--ardoise-clair); margin:0 0 13px; min-height:2.4em}
.gabarit .prix{font-family:'Fraunces',serif; font-size:1.4rem; font-weight:600; color:var(--terracotta-fonce)}
.gabarit .prix small{font-size:.74rem; color:var(--ardoise-clair); font-weight:600; font-family:'Nunito Sans',sans-serif; display:block; letter-spacing:.04em; text-transform:uppercase; margin-bottom:2px}

/* tableau de tarifs */
.tableau-enveloppe{overflow-x:auto; border-radius:var(--rayon); box-shadow:var(--ombre); background:var(--blanc); border:1px solid rgba(46,58,67,.05)}
table{width:100%; border-collapse:collapse; font-size:.93rem; min-width:560px}
thead th{
  background:var(--ardoise); color:#fff; text-align:left; padding:14px 16px;
  font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; font-weight:700; white-space:nowrap;
}
tbody td{padding:13px 16px; border-top:1px solid rgba(46,58,67,.07)}
tbody tr:nth-child(even){background:rgba(240,231,218,.42)}
tbody td:first-child{font-weight:700; color:var(--ardoise)}
.tarif-prix{font-family:'Fraunces',serif; font-weight:600; color:var(--terracotta-fonce); white-space:nowrap}
.vide{color:rgba(46,58,67,.3)}

/* note / encart */
.note{
  background:rgba(125,145,131,.11); border-left:3px solid var(--sauge);
  padding:17px 21px; border-radius:0 11px 11px 0; font-size:.92rem; color:var(--ardoise-clair); margin-top:26px;
}
.note strong{color:var(--ardoise)}

/* horaires */
.horaires{list-style:none;margin:0;padding:0}
.horaires li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid rgba(46,58,67,.08);font-size:.95rem}
.horaires li:last-child{border-bottom:0}
.horaires .jour{font-weight:700}
.horaires .h{color:var(--ardoise-clair); text-align:right; font-variant-numeric:tabular-nums}
.horaires .ferme{color:var(--terracotta); font-weight:600}

/* contact */
.coord{list-style:none;margin:0;padding:0;display:grid;gap:19px}
.coord li{display:flex;gap:15px;align-items:flex-start}
.coord svg{width:21px;height:21px;flex-shrink:0;margin-top:3px;stroke:var(--terracotta);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.coord .lab{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sauge);font-weight:800;margin-bottom:2px}
.coord a{color:var(--ardoise);text-decoration:none;font-weight:600}
.coord a:hover{color:var(--terracotta-fonce);text-decoration:underline}

/* bandeau de rappel RDV */
.rappel{background:var(--ardoise); color:#fff; padding:62px 0}
.rappel h2{color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:13px}
.rappel p{color:rgba(255,255,255,.84); max-width:560px; margin:0 auto 28px}

/* pied de page */
.pied{background:#252F37; color:rgba(255,255,255,.72); padding:54px 0 28px; font-size:.91rem}
.pied-grille{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:38px; margin-bottom:38px}
@media(max-width:760px){.pied-grille{grid-template-columns:1fr; gap:30px}}
.pied h4{color:#fff; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:15px; font-family:'Nunito Sans',sans-serif; font-weight:800}
.pied a{color:rgba(255,255,255,.72); text-decoration:none}
.pied a:hover{color:#fff; text-decoration:underline}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pied-bas{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.82rem; color:rgba(255,255,255,.5)}

/* apparition au scroll */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease}
.reveal.vu{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .btn:hover,.gabarit:hover{transform:none}
}