:root{
    /* Palette relevée sur abdbeauty.com */
    --white:#FFFFFF;
    --cream:#F9F7F4;
    --sand:#D5C9BA;
    --sand-light:#F2EEEA;
    --mocha:#AE8A79;
    --brown:#583E30;
    --brown-deep:#4A3327;
    --ink:#000000;
    --muted:#6E6259;
    --line:#E7DFD6;

    --head:'Poppins', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --body:'Assistant', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --accent:'Playfair Display', Georgia, serif;
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--white); color:var(--ink);
    font-family:var(--body); font-weight:400; font-size:16px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block}
  a{color:inherit; text-decoration:none}
  .wrap{max-width:1260px; margin:0 auto; padding:0 26px}
  h1,h2,h3,h4{font-family:var(--head); font-weight:600; margin:0; line-height:1.2; color:var(--brown)}
  .it{font-family:var(--accent); font-style:italic; font-weight:400}

  /* ---------- Bandeau annonce ---------- */
  .strip{
    background:var(--cream); color:var(--ink); text-align:center;
    font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.02em;
    text-transform:uppercase; padding:11px 20px;
  }

  /* ---------- Nav ---------- */
  header{position:sticky; top:0; z-index:60; background:var(--mocha); color:var(--white)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:66px; gap:20px}
  .logo{font-family:var(--head); font-weight:700; font-size:26px; letter-spacing:-.01em; color:var(--white); text-transform:lowercase; white-space:nowrap}
  .links{display:flex; gap:28px; font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--white)}
  .links a{padding:4px 0; border-bottom:1.5px solid transparent; transition:border-color .2s; white-space:nowrap}
  .links a:hover{border-color:var(--white)}
  .links .muted-link{opacity:.62; cursor:default}
  .links .muted-link:hover{border-color:transparent}
  .nav-cta{
    font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
    background:var(--brown); color:var(--white); padding:12px 22px; cursor:pointer; transition:.2s; border:0; white-space:nowrap;
  }
  .nav-cta:hover{background:var(--brown-deep)}
  .burger{display:none; background:none; border:0; font-size:22px; color:var(--white); cursor:pointer}

  /* ---------- Boutons ---------- */
  .btn{
    display:inline-block; font-family:var(--head); font-weight:600; font-size:12.5px;
    letter-spacing:.05em; text-transform:uppercase; padding:14px 26px;
    background:var(--brown); color:var(--white); border:1.5px solid var(--brown);
    cursor:pointer; transition:.2s; text-align:center;
  }
  .btn:hover{background:var(--brown-deep); border-color:var(--brown-deep)}
  .btn-line{background:transparent; color:var(--brown)}
  .btn-line:hover{background:var(--brown); color:var(--white)}
  .btn-white{background:var(--white); color:var(--brown); border-color:var(--white)}
  .btn-white:hover{background:var(--cream); border-color:var(--cream); color:var(--brown)}

  /* ---------- Hero ---------- */
  .hero{display:grid; grid-template-columns:1.02fr 1fr; background:var(--cream); align-items:center}
  .hero-txt{padding:86px 6vw}
  .hero h1{font-size:clamp(36px,4.6vw,58px); margin-bottom:20px}
  .hero h1 .it{color:var(--mocha)}
  .hero p{color:var(--muted); max-width:44ch; margin:0 0 32px; font-size:17px}
  .hero-img{position:relative; overflow:hidden; height:100%; min-height:520px}
  .hero-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

  /* ---------- Trois temps ---------- */
  .steps{background:var(--white); padding:76px 0}
  .steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .step{background:var(--sand-light); padding:44px 38px 62px; position:relative; overflow:hidden}
  .step:nth-child(2){background:var(--sand)}
  .step .num{
    position:absolute; right:16px; bottom:2px; font-family:var(--head); font-weight:700;
    font-size:86px; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(88,62,48,.22);
  }
  .step h3{font-size:19px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px}
  .step p{color:var(--muted); font-size:15.5px; margin:0; max-width:34ch; position:relative; z-index:1}

  /* ---------- Sections ---------- */
  section{padding:80px 0}
  .sec-head{text-align:center; margin:0 auto 46px; max-width:680px}
  .sec-head h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:8px}
  .sec-head .sub{
    font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); margin:0;
  }
  .cat{margin-top:60px}
  .cat:first-of-type{margin-top:0}
  .cat-head{text-align:center; margin-bottom:30px}
  .cat-head h3{font-size:clamp(24px,2.8vw,32px); margin-bottom:6px}
  .cat-head .sub{font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

  /* ---------- Diagnostic ---------- */
  .diag{background:var(--mocha); color:var(--white)}
  .diag-in{display:grid; grid-template-columns:1fr 1.05fr; align-items:stretch}
  .diag-img{position:relative; overflow:hidden; height:100%; min-height:460px}
  .diag-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .diag-txt{padding:72px 6vw}
  .diag-txt h2{color:var(--white); font-size:clamp(27px,3.2vw,38px); margin-bottom:16px}
  .diag-txt h2 .it{color:var(--cream)}
  .diag-txt p{color:rgba(255,255,255,.9); max-width:46ch}
  .diag-list{list-style:none; padding:0; margin:22px 0 30px}
  .diag-list li{
    position:relative; padding-left:26px; margin-bottom:10px; color:rgba(255,255,255,.92);
  }
  .diag-list li::before{
    content:''; position:absolute; left:0; top:9px; width:11px; height:11px;
    border:1.5px solid var(--white); border-radius:50%;
  }

  /* ---------- Cartes soins ---------- */
  .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
  .card{background:var(--sand-light); display:flex; flex-direction:column}
  .card .ph{display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--sand)}
  .card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
  .card:hover .ph img{transform:scale(1.05)}
  .card .dur{
    position:absolute; left:0; top:0; background:var(--mocha); color:var(--white);
    font-family:var(--head); font-weight:600; font-size:10.5px; letter-spacing:.07em;
    text-transform:uppercase; padding:6px 11px;
  }
  .card .body{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1}
  .card h4{font-size:16px; letter-spacing:.04em; text-transform:uppercase; line-height:1.32; margin-bottom:8px}
  .card .price{font-family:var(--head); font-weight:500; font-size:19px; color:var(--ink); margin:0 0 18px}
  .card .btn{margin-top:auto; padding:12px 16px; font-size:11.5px}

  /* ---------- Avis ---------- */
  .avis{background:var(--cream)}
  .avis-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .avis-card{background:var(--white); padding:34px 32px; border:1px solid var(--line); display:flex; flex-direction:column}
  .stars{color:var(--mocha); letter-spacing:.16em; font-size:15px; margin-bottom:16px}
  .avis-card p{font-family:var(--accent); font-style:italic; font-size:19px; line-height:1.5; color:var(--brown); margin:0 0 20px; flex:1}
  .avis-card .who{font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
  .placeholder{outline:2px dashed var(--mocha); outline-offset:-2px}
  .placeholder p{color:var(--muted)}

  /* ---------- À propos ---------- */
  .about-in{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center}
  .about-img{position:relative; overflow:hidden; height:560px; background:var(--sand)}
  .about-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:68% 20%}
  .about-txt h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:20px}
  .about-txt p{color:var(--muted); margin:0 0 16px; max-width:52ch}
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
  .pillar{background:var(--sand-light); padding:26px 22px}
  .pillar h4{font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px}
  .pillar p{font-size:14.5px; margin:0; color:var(--muted)}

  /* ---------- Avant votre RDV ---------- */
  .before{background:var(--sand-light)}
  .before-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
  .before-item{background:var(--white); padding:32px 26px}
  .before-item .n{
    font-family:var(--head); font-weight:700; font-size:13px; color:var(--mocha);
    letter-spacing:.1em; margin-bottom:12px; display:block;
  }
  .before-item h4{font-size:15px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px}
  .before-item p{font-size:15px; color:var(--muted); margin:0}

  /* ---------- Produits bientôt ---------- */
  .soon{background:var(--cream)}
  .soon-in{display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch}
  .soon-img{position:relative; overflow:hidden; height:540px}
  .soon-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 26%}
  .soon-txt{padding:72px 6vw}
  .soon-txt h2{font-size:clamp(27px,3.2vw,38px); margin-bottom:16px}
  .soon-txt p{color:var(--muted); max-width:44ch}
  .tag{
    display:inline-block; font-family:var(--head); font-weight:600; font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; background:var(--mocha); color:var(--white); padding:7px 15px; margin-bottom:20px;
  }
  .soon-form{display:flex; gap:10px; margin-top:26px; max-width:430px}
  .soon-form input{
    flex:1; border:1.5px solid var(--line); background:var(--white); padding:13px 15px;
    font-family:var(--body); font-size:15px; color:var(--ink);
  }
  .soon-form input:focus{outline:none; border-color:var(--mocha)}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:840px; margin:0 auto}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{
    width:100%; background:none; border:0; text-align:left; cursor:pointer;
    font-family:var(--head); font-weight:600; font-size:16.5px; color:var(--brown);
    padding:24px 40px 24px 0; position:relative;
  }
  .faq-q::after{
    content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
    font-size:24px; font-weight:500; color:var(--mocha); transition:transform .2s;
  }
  .faq-item.open .faq-q::after{content:'−'}
  .faq-a{display:none; padding:0 40px 26px 0; color:var(--muted); max-width:70ch}
  .faq-item.open .faq-a{display:block}

  /* ---------- Infos pratiques ---------- */
  .infos{background:var(--sand)}
  .infos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
  .infos-grid h4{font-size:13px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:14px}
  .infos-grid p, .infos-grid li{color:var(--brown-deep); margin:0 0 7px}
  .infos-grid ul{list-style:none; padding:0; margin:0}

  /* ---------- Citation ---------- */
  .quote-band{background:var(--white); padding:76px 0}
  .quote{text-align:center; max-width:820px; margin:0 auto}
  .quote p{font-family:var(--accent); font-style:italic; font-size:clamp(23px,2.8vw,33px); line-height:1.42; color:var(--brown); margin:0 0 18px}
  .quote span{font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--brown-deep)}

  /* ---------- Footer ---------- */
  footer{background:var(--brown); color:#E4D9D0; padding:70px 0 30px; font-size:15px}
  .f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:42px}
  footer h4{font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--white); margin:0 0 17px}
  footer .logo{color:var(--white); font-size:26px; margin-bottom:15px}
  footer p{margin:0 0 7px; color:#C9B9AC}
  footer a:hover{color:var(--white)}
  footer ul{list-style:none; margin:0; padding:0}
  footer li{margin-bottom:9px; color:#C9B9AC}
  .f-bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:52px; padding-top:22px; display:flex; justify-content:space-between; gap:18px; font-size:13px; color:#B0A094}

  /* ---------- Responsive ---------- */
  @media (max-width:1180px){
    .links{gap:20px; font-size:11.5px}
  }
  @media (max-width:1080px){
    .grid, .before-grid{grid-template-columns:repeat(2,1fr)}
    .f-grid{grid-template-columns:1fr 1fr}
    .about-in{grid-template-columns:1fr; gap:36px}
    .about-img{height:400px}
  }
  @media (max-width:860px){
    .links{display:none}
    .burger{display:block}
    .nav-cta{display:none}
    .hero, .diag-in, .soon-in{grid-template-columns:1fr}
    .hero-txt{padding:56px 26px 48px; order:2}
    .hero-img{order:1; min-height:340px; height:340px}
    .steps-grid, .avis-grid, .infos-grid, .pillars{grid-template-columns:1fr}
    .diag-img, .soon-img{height:320px}
    .diag-txt, .soon-txt{padding:52px 26px}
    section, .steps, .quote-band{padding:56px 0}
  }
  @media (max-width:580px){
    .grid{grid-template-columns:repeat(2,1fr); gap:14px}
    .card h4{font-size:14px}
    .card .body{padding:15px}
    .before-grid{grid-template-columns:1fr}
    .f-grid{grid-template-columns:1fr}
    .soon-form{flex-direction:column}
  }

  /* ---------- Pages soins ---------- */
  .soin-hero{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; padding:70px 0 30px}
  .soin-hero .ph{position:relative; height:440px; overflow:hidden; background:var(--sand)}
  .soin-hero .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .soin-hero .meta{font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
  .soin-hero h1{font-family:var(--head); font-weight:600; font-size:clamp(30px,3.6vw,44px); color:var(--brown); line-height:1.15; margin:0 0 12px}
  .soin-hero .price{font-family:var(--head); font-weight:600; font-size:24px; color:var(--ink); margin:0 0 24px}
  .soin-hero p{color:var(--muted); max-width:58ch; margin:0 0 14px}
  .soin-hero ul{color:var(--muted); margin:0 0 14px; padding-left:20px}
  .soin-hero ul li{margin-bottom:6px}
  .crumb{display:inline-block; font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--brown); margin:30px 0 0}
  .crumb:hover{color:var(--mocha)}
  .card h4 a:hover{text-decoration:underline}
  .card .more{display:block; font-family:var(--head); font-weight:600; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--mocha); margin:-10px 0 16px}
  .card .more:hover{text-decoration:underline}
  .page-head{padding:64px 0 0; text-align:center}
  .page-head h1{font-family:var(--head); font-weight:600; font-size:clamp(32px,4vw,48px); color:var(--brown); margin:0 0 8px}
  @media (max-width:860px){
    .soin-hero{grid-template-columns:1fr; gap:28px; padding:44px 0 10px}
    .soin-hero .ph{height:300px}
  }

  /* ---------- Menu mobile ---------- */
  @media (max-width:860px){
    header.nav-open .links{
      display:flex; flex-direction:column; gap:18px;
      position:absolute; top:100%; left:0; right:0;
      background:var(--mocha); padding:20px 26px 26px;
      border-top:1px solid rgba(255,255,255,.18);
      box-shadow:0 14px 24px rgba(0,0,0,.14);
    }
    header.nav-open .burger::before{content:''}
    .hero-txt .btn{margin-bottom:10px}
    .diag-txt .btn{margin-bottom:10px}
  }

  /* ---------- Logo monogramme ---------- */
  .logo{display:flex; align-items:center; gap:11px}
  .logo-mark{height:36px; width:auto; display:block}
  footer .logo{gap:10px}
  footer .logo-mark{height:30px}

  /* ---------- Logotype Hamaya Beauty (comme les supports imprimés) ---------- */
  .logo{display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-transform:none}
  .logo-name{font-family:var(--accent); font-style:normal; font-weight:500; font-size:27px; line-height:1; color:var(--white); letter-spacing:.01em}
  .logo-sub{font-family:var(--head); font-weight:600; font-size:9.5px; line-height:1; letter-spacing:.52em; text-transform:uppercase; color:#F0DDB4; margin-left:2px}
  footer .logo-name{font-size:25px}
  footer .logo{margin-bottom:15px}