@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bodoni-moda-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  @font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bodoni-moda-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  @font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/bodoni-moda-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  @font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/bodoni-moda-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-sans-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-sans-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/instrument-sans-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/instrument-sans-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/instrument-sans-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/instrument-sans-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

  :root{
    /* Blanc clinique, encre presque noire, un seul ton chaud pour les intitulés.
       Aucune ombre portée, aucun angle arrondi : la hiérarchie tient à l'espace
       et aux filets d'un pixel. */
    --ground:#FFFFFF; --band:#F7F6F4; --ink:#14110F; --ink-2:#5C554E; --ink-3:#736C63;
    --rule:#E7E4DF; --rule-2:#D2CDC5; --taupe:#7C6647; --on-ink:#FFFFFF;
    --display:'Bodoni Moda',Didot,'Times New Roman',serif;
    --text:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --pad:clamp(22px,5vw,64px);
    --blk:clamp(58px,6.6vw,112px);
    --z-nav:40; --z-menu:60; --z-modal:80;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; background:var(--ground);}
  body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--text);
    font-size:17px; line-height:1.76; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  h1,h2,h3{margin:0; font-family:var(--display); font-weight:400; line-height:1.08;
    letter-spacing:-.005em; text-wrap:balance;}
  h4{margin:0; font-family:var(--text); font-weight:600;}
  p{margin:0; text-wrap:pretty;}
  ul{margin:0; padding:0; list-style:none;}
  a{color:inherit; text-decoration:none;}
  button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
  img{display:block; max-width:100%;}
  table{border-collapse:collapse; width:100%;}
  :focus-visible{outline:1.5px solid var(--ink); outline-offset:4px;}
  ::selection{background:var(--ink); color:var(--on-ink);}
  section,[id]{scroll-margin-top:120px;}
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }

  .sr{position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink);
    color:var(--on-ink); padding:14px 22px;}
  .sr:focus{left:0;}
  .hold{max-width:1120px; margin:0 auto; padding:0 var(--pad);}
  /* Un enfant de grille ou de flex refuse par défaut de descendre sous la
     largeur de son contenu, ce qui fait sortir la grille de son conteneur sur
     petit écran. min-width:0 lève ce plancher. */
  .duo > *, .who > *, .grille-p > *, .qr-i > *, .soin-g > *, .pied-c > *,
  .band > *, .tps > *, .notes > *, .ct-r > *, .idx-r > *, .autres > *,
  .suite > *, .acts > *, .hd-in > *{min-width:0;}
  .ct-r dd, .pied p, .txt, .lede{overflow-wrap:break-word;}
  .hold-n{max-width:760px;}
  .mid{text-align:center;}
  .mid .lede{margin-left:auto; margin-right:auto;}

  /* En-tête de section aligné. Une filière en haut pose la limite du bloc, le
     titre tient la colonne de gauche, le chapô celle de droite. Sans cela les
     sections s'enchaînaient toutes avec le même bandeau centré, ce qui donne
     au fil de la page un air de gabarit. */
  .tete{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    gap:clamp(20px,4.5vw,64px); align-items:end;
    padding-top:clamp(22px,2.6vw,34px); border-top:1px solid var(--rule);}
  .tete .sur{margin-bottom:0;}
  .tete .t2{margin-top:13px;}
  .tete .lede{margin-top:0; padding-bottom:7px; font-size:17.5px; max-width:44ch;}
  .tint .tete{border-top-color:var(--rule-2);}
  @media (max-width:880px){
    .tete{grid-template-columns:1fr; gap:12px; align-items:start;}
    .tete .lede{padding-bottom:0; max-width:60ch;}
  }
  .blk{padding:var(--blk) 0;}
  .blk-s{padding:calc(var(--blk) * .64) 0;}
  .tint{background:var(--band);}
  .filet{height:1px; background:var(--rule); border:0; margin:0;}

  /* ---------- en-tête centré ---------- */
  .hd{position:sticky; top:0; z-index:var(--z-nav); background:rgba(255,255,255,.92);
    backdrop-filter:saturate(1.2) blur(14px); -webkit-backdrop-filter:saturate(1.2) blur(14px);
    border-bottom:1px solid var(--rule);}
  /* Le téléphone et la réservation vivaient de part et d'autre du logo, un texte
     gris d'un côté et un bloc noir plein de l'autre : deux poids qui n'avaient
     rien à voir, posés là. Ils passent sur une ligne de service au-dessus, à
     poids égal, et l'en-tête proprement dit ne porte plus que la marque et la
     navigation. */
  .hd-util{border-bottom:1px solid var(--rule); background:var(--band);
    max-height:44px; overflow:hidden;
    transition:max-height .32s cubic-bezier(.22,1,.36,1), opacity .25s ease;}
  .hd-util-in{max-width:1120px; margin:0 auto; padding:0 var(--pad);
    display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:38px;}
  .hd-util a, .hd-util span{font-size:12.5px; letter-spacing:.02em; color:var(--ink-3);}
  .hd-util a{position:relative; transition:color .3s ease;}
  .hd-util a::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:right;
    transition:transform .45s cubic-bezier(.16,1,.3,1);}
  .hd-util a:hover{color:var(--ink);}
  .hd-util a:hover::after{transform:scaleX(1); transform-origin:left;}
  .hd-util .rdv{color:var(--taupe); font-weight:500;}
  .hd-util .rdv::after{transform:scaleX(1); transform-origin:left; background:var(--rule-2);}
  .hd-util .rdv:hover{color:var(--ink);}
  .hd.mini .hd-util{max-height:0; opacity:0;}
  @media (max-width:860px){ .hd-util{display:none;} }

  .hd-in{position:relative; display:flex; flex-direction:column; align-items:center;
    gap:14px; padding:20px var(--pad) 0; max-width:1120px; margin:0 auto;
    transition:padding .3s cubic-bezier(.22,1,.36,1), gap .3s cubic-bezier(.22,1,.36,1);}
  .marque{display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;}
  .marque .logo-img{width:68px; height:auto; display:block;}
  .marque b{font-family:var(--display); font-size:25px; font-weight:400; letter-spacing:.02em;}
  .marque i{font-style:normal; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--ink-3); padding-left:.32em;}
  .marque .logo-img, .marque b, .marque i{transition:width .3s ease, font-size .3s ease, opacity .25s ease;}
  .hd nav{display:flex; justify-content:center; gap:34px; padding-bottom:15px;}
  .hd nav a{position:relative; font-size:14px; letter-spacing:.02em; color:var(--ink-2);
    padding:4px 0; transition:color .3s ease;}
  .hd nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:right;
    transition:transform .45s cubic-bezier(.16,1,.3,1);}
  .hd nav a:hover{color:var(--ink);}
  .hd nav a:hover::after{transform:scaleX(1); transform-origin:left;}
  .hd nav a[aria-current="page"]{color:var(--ink);}
  .hd nav a[aria-current="page"]::after{transform:scaleX(1);}

  /* Collé en haut, l'en-tête complet mangeait 211 px de hauteur en permanence.
     Il se réduit dès le premier défilement. */
  .hd.mini .hd-in{padding-top:11px; gap:6px;}
  .hd.mini .marque{flex-direction:row; align-items:center; gap:12px;}
  .hd.mini .marque .logo-img{width:34px;}
  .hd.mini .marque b{font-size:19px;}
  .hd.mini .marque i{opacity:0; width:0; height:0; margin:0; padding:0; overflow:hidden;}
  .hd.mini nav{padding-bottom:10px; gap:28px;}
  .hd.mini nav a{font-size:13.5px;}

  .burger{display:none; width:44px; height:44px; border:1px solid var(--rule-2);
    flex-direction:column; align-items:center; justify-content:center; gap:5px; flex:none;}
  .burger span{display:block; width:16px; height:1px; background:var(--ink);}
  .hd-mob{display:none; align-items:center; gap:10px;}

  /* Sous 860 px l'en-tête devient une ligne : marque à gauche, actions à droite. */
  @media (max-width:860px){
    .hd nav{display:none;}
    .burger{display:flex;} .hd-mob{display:flex;}
    .hd-in{display:flex; flex-direction:row; align-items:center; justify-content:space-between;
      gap:12px; padding:14px var(--pad);}
    .marque{flex-direction:row; align-items:center; gap:11px; min-width:0; text-align:left;}
    .marque .logo-img{width:40px; flex:none;}
    .marque b{font-size:20px; white-space:nowrap;} .marque i{display:none;}
    .hd.mini .hd-in{padding-top:11px; padding-bottom:11px;}
    .hd.mini .marque{flex-direction:row;}
    .hd.mini .marque .logo-img{width:34px;} .hd.mini .marque b{font-size:18px;}
  }
  .act .court{display:none;}
  @media (max-width:470px){
    .marque .logo-img{width:34px;} .marque b{font-size:17.5px;}
    .hd-mob{gap:8px;}
    .hd-mob .act{padding:12px 15px; font-size:11px; letter-spacing:.1em;}
    .act .long{display:none;} .act .court{display:inline;}
    .burger{width:42px; height:42px;}
  }

  /* Le téléphone et la réservation restent visibles quoi qu'il arrive : seule la
     liste des pages défile. Sinon l'appel à l'action tombe sous la ligne de
     flottaison dès que le menu dépasse la hauteur de l'écran. */
  .menu{position:fixed; inset:0; z-index:var(--z-menu); background:var(--ground);
    display:flex; flex-direction:column; overflow:hidden;}
  .menu-haut{flex:none; display:flex; align-items:center;
    justify-content:space-between; gap:16px; padding:14px var(--pad);
    background:var(--ground); border-bottom:1px solid var(--rule);}
  .menu-haut .marque{flex-direction:row; align-items:center; gap:11px; min-height:44px;}
  .menu-haut .marque .logo-img{width:40px;}
  .menu-haut .marque b{font-family:var(--display); font-size:20px; font-weight:400; white-space:nowrap;}
  .menu-x{position:relative; width:44px; height:44px; flex:none; border:1px solid var(--rule-2);
    transition:border-color .25s ease;}
  .menu-x:hover{border-color:var(--ink);}
  .menu-x span{position:absolute; left:50%; top:50%; width:15px; height:1px; background:var(--ink);}
  .menu-x span:first-child{transform:translate(-50%,-50%) rotate(45deg);}
  .menu-x span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}

  .menu-nav{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    padding:6px var(--pad) 18px;}
  .menu-nav a.ml{display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px 0; border-bottom:1px solid var(--rule);
    font-family:var(--display); font-size:28px; line-height:1.08;}
  .menu-nav a.ml[aria-current="page"]{color:var(--taupe);}
  .menu-nav a.ml[aria-current="page"]::after{content:""; width:6px; height:6px; flex:none;
    border-radius:50%; background:var(--taupe);}
  /* les cinq soins, en second rang : pas de rail, juste un retrait et un ton plus clair */
  .menu-sous{padding:12px 0 16px 2px; display:grid; border-bottom:1px solid var(--rule);}
  .menu-sous a{display:flex; align-items:center; min-height:42px; font-size:16px;
    color:var(--ink-2); transition:color .25s ease;}
  .menu-sous a::before{content:""; width:14px; height:1px; margin-right:12px; flex:none;
    background:var(--rule-2); transition:width .3s cubic-bezier(.16,1,.3,1), background .25s ease;}
  .menu-sous a:hover{color:var(--ink);}
  .menu-sous a:hover::before{width:22px; background:var(--ink);}
  .menu-sous a[aria-current="page"]{color:var(--taupe);}
  .menu-sous a[aria-current="page"]::before{background:var(--taupe); width:22px;}

  .menu-pied{flex:none; background:var(--band); padding:20px var(--pad);
    padding-bottom:calc(20px + env(safe-area-inset-bottom)); display:grid; gap:4px;
    border-top:1px solid var(--rule);}
  .menu-tel{font-family:var(--display); font-size:25px; min-height:42px; display:flex; align-items:center;}
  .menu-pied p{font-size:14.5px; color:var(--ink-3); line-height:1.6;}
  .menu-pied .act{width:100%; margin-top:12px; min-height:52px;}

  /* ---------- écriture ---------- */
  .sur{display:block; font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
    color:var(--taupe); margin-bottom:18px;}
  .t1{font-size:clamp(38px,5.2vw,74px); line-height:1.04;}
  .t2{font-size:clamp(30px,3.9vw,54px);}
  .t3{font-size:clamp(24px,2.8vw,36px);}
  .t1 em,.t2 em,.t3 em{font-style:italic;}
  .lede{margin-top:18px; font-size:18.5px; line-height:1.72; color:var(--ink-2); max-width:56ch;}
  .txt{color:var(--ink-2); max-width:64ch;}
  .txt p + p{margin-top:16px;}
  .fig{font-variant-numeric:tabular-nums lining-nums;}

  /* Le fond du bouton se remplit par le bas plutôt que de changer d'un coup.
     C'est le genre de détail qui distingue une commande d'un gabarit. */
  .act{position:relative; isolation:isolate; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center; min-height:56px;
    padding:17px 36px; font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    border:1px solid var(--ink); white-space:nowrap;
    transition:color .4s cubic-bezier(.16,1,.3,1), border-color .4s cubic-bezier(.16,1,.3,1);}
  .act::before{content:""; position:absolute; inset:-1px; z-index:-1; transform:scaleY(0);
    transform-origin:bottom; transition:transform .5s cubic-bezier(.16,1,.3,1);}
  .act:hover::before{transform:scaleY(1);}
  .act-1{background:var(--ink); color:var(--on-ink);}
  .act-1::before{background:var(--ground);}
  .act-1:hover{color:var(--ink);}
  .act-2{background:transparent; color:var(--ink); border-color:var(--rule-2);}
  .act-2::before{background:var(--ink);}
  .act-2:hover{color:var(--on-ink); border-color:var(--ink);}
  .act-s{min-height:46px; padding:13px 24px; font-size:11.5px;}
  /* Le bouton masque son débordement pour l'effet de remplissage : sur un écran
     étroit, un libellé long s'y ferait couper. Il passe donc à la ligne. */
  @media (max-width:430px){
    .act{padding-left:20px; padding-right:20px; white-space:normal;
      text-align:center; line-height:1.4;}
    .hd-mob .act{white-space:nowrap;}
    .acts > .act{flex:1 1 auto;}
  }
  .acts{display:flex; flex-wrap:wrap; gap:14px;}
  .mid .acts{justify-content:center;}
  .lnk{display:inline-flex; align-items:center; gap:9px; font-size:13px; letter-spacing:.14em;
    text-transform:uppercase; border-bottom:1px solid var(--rule-2); padding-bottom:5px;
    transition:border-color .25s ease;}
  .lnk:hover{border-bottom-color:var(--ink);}
  .lnk i{font-style:normal; transition:transform .25s ease;}
  .lnk:hover i{transform:translateX(4px);}

  /* ---------- accroche ---------- */
  .hero{padding:clamp(30px,3.4vw,54px) 0 0;}
  .hero h1{font-size:clamp(40px,5.8vw,86px); line-height:1.02;}
  .hero .lede{font-size:19px; max-width:52ch;}
  .hero .acts{margin-top:32px;}
  .hero-fig{margin-top:clamp(38px,4.6vw,72px);}
  .hero-fig img{width:100%; height:clamp(280px,42vw,520px); object-fit:cover; object-position:50% 44%;}
  .hero-cred{display:flex; justify-content:space-between; gap:20px; padding-top:14px;
    font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);}
  .svc-fig{max-width:600px; margin:clamp(24px,3vw,44px) auto 0;}
  .svc-fig img{width:100%; aspect-ratio:1; height:auto; object-fit:cover;}

  .band{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule);}
  .band div{padding:34px 30px 38px; border-left:1px solid var(--rule); text-align:center;}
  .band div:first-child{border-left:0;}
  .band b{display:block; font-family:var(--display); font-size:30px; font-weight:400; line-height:1.1;}
  .band span{display:block; margin-top:10px; font-size:14px; color:var(--ink-3); line-height:1.6;}
  @media (max-width:880px){ .band{grid-template-columns:1fr 1fr;}
    .band div:nth-child(3){border-left:0;} .band div:nth-child(n+3){border-top:1px solid var(--rule);} }
  @media (max-width:520px){ .band{grid-template-columns:1fr;}
    .band div{border-left:0; border-top:1px solid var(--rule); padding:26px 20px 30px;}
    .band div:first-child{border-top:0;} }

  /* ---------- manifeste ---------- */
  .mani{max-width:940px; margin:0 auto; text-align:center;}
  .mani blockquote{margin:0; font-family:var(--display); font-size:clamp(26px,3.4vw,44px);
    line-height:1.26; letter-spacing:-.004em;}
  .mani-sig{margin-top:26px; display:inline-flex; flex-direction:column; gap:5px;
    padding-top:22px; border-top:1px solid var(--rule-2);}
  .mani-sig b{font-size:15px; font-weight:600;}
  .mani-sig span{font-size:13.5px; color:var(--ink-3);}
  .mani .txt{margin:32px auto 0; text-align:left; max-width:660px;}

  /* ---------- comparateur ---------- */
  /* aspect-ratio et min-height ensemble font calculer la largeur depuis la
     hauteur : le bloc devenait large de 647 px et faisait déborder la page sur
     mobile. La largeur commande, la hauteur suit. */
  .cmp{position:relative; width:100%; overflow:hidden; background:var(--band);
    aspect-ratio:690/176; touch-action:pan-y; cursor:col-resize;}
  @media (max-width:620px){ .cmp{aspect-ratio:430/176;} }
  .cmp:active{cursor:grabbing;}
  .cmp-kn{transition:transform .3s cubic-bezier(.16,1,.3,1);}
  .cmp:hover .cmp-kn{transform:scale(1.08);}
  .cmp:active .cmp-kn{transform:scale(.94);}
  .cmp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    user-select:none; -webkit-user-drag:none; pointer-events:none;}
  .cmp .apres{clip-path:inset(0 0 0 var(--x));}
  .cmp-tr{position:absolute; top:0; bottom:0; left:var(--x); width:1px; background:#fff;
    box-shadow:0 0 0 1px rgba(20,17,15,.2); pointer-events:none;}
  .cmp-kn{position:absolute; top:50%; left:var(--x); width:52px; height:52px; margin:-26px 0 0 -26px;
    border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
    color:var(--ink); font-size:14px; pointer-events:none;}
  .cmp-lb{position:absolute; top:14px; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink); background:rgba(255,255,255,.9); padding:6px 12px; pointer-events:none;}
  .cmp-lb.g{left:14px;} .cmp-lb.d{right:14px;}
  .cmp-note{margin-top:16px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);}

  /* ---------- index des prestations ---------- */
  .idx{border-top:1px solid var(--rule);}
  .idx-r{display:grid; grid-template-columns:120px 1fr auto; align-items:center;
    gap:clamp(20px,4vw,52px); padding:30px 0; border-bottom:1px solid var(--rule);
    transition:padding-left .4s cubic-bezier(.22,1,.36,1);}
  .idx-r:hover{padding-left:14px;}
  .idx-ph{width:120px; height:120px; overflow:hidden; background:var(--band);}
  .idx-ph img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,1,.36,1);}
  .idx-r:hover .idx-ph img{transform:scale(1.06);}
  .idx-t{font-family:var(--display); font-size:clamp(23px,2.6vw,33px); line-height:1.12;}
  .idx-t em{display:block; margin-top:11px; font-family:var(--text); font-style:normal; font-size:14.5px;
    color:var(--ink-3); line-height:1.55; max-width:52ch;}
  .idx-p{text-align:right; white-space:nowrap;}
  .idx-p b{display:block; font-family:var(--display); font-size:27px; font-weight:400;}
  .idx-p span{display:block; margin-top:6px; font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-3);}
  @media (max-width:760px){
    .idx-r{grid-template-columns:80px 1fr; gap:18px; padding:22px 0;}
    .idx-ph{width:80px; height:80px;}
    .idx-p{grid-column:2; text-align:left; margin-top:8px;}
    .idx-p b{font-size:21px;} .idx-p span{display:inline; margin-left:12px;}
  }

  /* ---------- page d'une prestation ---------- */
  .duo{display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(36px,6vw,88px); align-items:start;}
  @media (max-width:900px){ .duo{grid-template-columns:1fr; gap:36px;} }
  .facts{border-top:1px solid var(--ink);}
  .facts li{display:grid; gap:5px; padding:18px 0; border-bottom:1px solid var(--rule);}
  .facts b{font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe);}
  .facts span{font-size:16px; color:var(--ink-2);}
  .tarif-bloc{margin-top:26px; padding-top:22px; border-top:1px solid var(--ink);}
  .tarif-bloc b{display:block; font-family:var(--display); font-size:clamp(40px,5vw,60px); line-height:1;}
  .tarif-bloc span{display:block; margin-top:12px; font-size:15px; color:var(--ink-3);}
  .tarif-bloc .acts{margin-top:28px;}
  .autres{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,30px);}
  @media (max-width:820px){ .autres{grid-template-columns:repeat(2,1fr);} }
  .autres .ph{aspect-ratio:1; overflow:hidden; background:var(--band); margin-bottom:16px;}
  .autres img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,1,.36,1);}
  .autres a:hover img{transform:scale(1.05);}
  .autres b{display:block; font-family:var(--display); font-size:21px; font-weight:400; line-height:1.15;}
  .autres span{display:block; margin-top:6px; font-size:13.5px; color:var(--ink-3);}

  /* ---------- déroulé ---------- */
  .tps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px);
    border-top:1px solid var(--rule); padding-top:34px;}
  @media (max-width:900px){ .tps{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .tps{grid-template-columns:1fr; gap:30px;} }
  .tps i{display:block; font-style:normal; font-family:var(--display); font-size:14px;
    letter-spacing:.16em; color:var(--taupe); margin-bottom:18px;}
  .tps h3{font-size:24px;}
  .tps p{margin-top:12px; font-size:15px; color:var(--ink-2);}
  .tps em{display:block; margin-top:16px; font-style:normal; font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-3);}

  /* ---------- ce qui protège ---------- */
  .gar{border-top:1px solid var(--rule);}
  .gar-i{display:grid; grid-template-columns:64px 1fr 1.35fr; gap:clamp(18px,4vw,52px);
    padding:34px 0; border-bottom:1px solid var(--rule); align-items:start;}
  @media (max-width:880px){ .gar-i{grid-template-columns:1fr; gap:12px; padding:26px 0;} }
  .gar-n{font-family:var(--display); font-size:17px; color:var(--taupe); letter-spacing:.1em;}
  .gar-i b{font-family:var(--display); font-size:clamp(21px,2.3vw,27px); font-weight:400; line-height:1.18;}
  .gar-i p{font-size:15.5px; color:var(--ink-2);}

  /* ---------- galerie ---------- */
  .grille{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.6vw,20px);}
  @media (max-width:820px){ .grille{grid-template-columns:repeat(2,1fr);} }
  .grille figure{margin:0; position:relative; aspect-ratio:1; overflow:hidden;
    background:var(--band); cursor:zoom-in;}
  .grille img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1);}
  .grille figure:hover img{transform:scale(1.05);}
  .grille figcaption{position:absolute; left:0; right:0; bottom:0; padding:36px 16px 14px;
    font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff;
    background:linear-gradient(to top, rgba(20,17,15,.72), rgba(20,17,15,0));
    opacity:0; transition:opacity .3s ease;}
  .grille figure:hover figcaption, .grille figure:focus-visible figcaption{opacity:1;}
  .fltr{display:flex; flex-wrap:wrap; justify-content:center; gap:30px; padding-bottom:22px;
    margin-bottom:34px; border-bottom:1px solid var(--rule);}
  .fltr button{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
    padding:6px 0; min-height:40px; border-bottom:1px solid transparent; transition:color .25s ease;}
  .fltr button:hover{color:var(--ink);}
  .fltr button.on{color:var(--ink); border-bottom-color:var(--ink);}

  .lb{position:fixed; inset:0; z-index:var(--z-modal); background:rgba(255,255,255,.97);
    display:flex; align-items:center; justify-content:center; padding:8vh 7vw;}
  .lb img{max-width:min(820px,88vw); max-height:74vh; width:auto; object-fit:contain;}
  .lb-cap{position:absolute; left:0; right:0; bottom:32px; text-align:center; color:var(--ink-3);
    font-size:11px; letter-spacing:.2em; text-transform:uppercase;}
  .lb-b{position:absolute; width:48px; height:48px; border:1px solid var(--rule-2); color:var(--ink);
    display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--ground);
    transition:border-color .2s ease;}
  .lb-b:hover{border-color:var(--ink);}
  .lb-x{top:26px; right:26px;} .lb-p{left:3vw; top:50%; margin-top:-24px;} .lb-n{right:3vw; top:50%; margin-top:-24px;}
  @media (max-width:760px){ .lb-p,.lb-n{top:auto; bottom:6vh; margin-top:0;} .lb-p{left:8vw;} .lb-n{right:8vw;}
    .lb-cap{bottom:calc(6vh + 62px);} }

  /* ---------- avis ---------- */
  .avis{text-align:center; max-width:640px; margin:0 auto;}
  .avis-n{display:block; font-family:var(--display); font-size:clamp(66px,9vw,116px); line-height:1;}
  .avis-n i{display:block; margin-top:14px; font-family:var(--text); font-style:normal;
    font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
    color:var(--ink-3);}
  .avis h3{margin-top:22px; font-size:26px;}
  .avis p{margin-top:14px; color:var(--ink-2);}
  .avis .acts{margin-top:30px; justify-content:center;}

  /* ---------- tarifs ---------- */
  .grille-p{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px);}
  @media (max-width:900px){ .grille-p{grid-template-columns:1fr; gap:52px;} }
  .pblk h2{font-size:25px; padding-bottom:16px; border-bottom:1px solid var(--ink);}
  .pblk > span{display:block; margin-top:14px; font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-3);}
  .pblk table{margin-top:16px;}
  .pblk td{padding:14px 0; border-bottom:1px solid var(--rule); font-size:16px; color:var(--ink-2);}
  .pblk td:last-child{text-align:right; white-space:nowrap; padding-left:22px; color:var(--ink);
    font-variant-numeric:tabular-nums lining-nums;}
  .notes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,48px);
    border-top:1px solid var(--rule); padding-top:32px;}
  @media (max-width:820px){ .notes{grid-template-columns:1fr; gap:26px;} }
  .notes b{display:block; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
    color:var(--taupe); margin-bottom:12px;}
  .notes p{font-size:15px; color:var(--ink-2);}

  /* ---------- questions et soins ---------- */
  .qr{border-top:1px solid var(--rule);}
  .qr-i{display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(20px,4vw,64px);
    padding:36px 0; border-bottom:1px solid var(--rule);}
  @media (max-width:860px){ .qr-i{grid-template-columns:1fr; gap:14px; padding:28px 0;} }
  .qr-i h2{font-size:clamp(21px,2.2vw,26px); line-height:1.2;}
  .qr-i .txt{font-size:16px;}
  .soin{border-top:1px solid var(--rule);}
  .soin-z{padding:38px 0; border-bottom:1px solid var(--rule);}
  .soin-z h2{font-size:clamp(24px,2.6vw,32px); margin-bottom:26px;}
  .soin-g{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,48px);}
  @media (max-width:860px){ .soin-g{grid-template-columns:1fr; gap:24px;} }
  .soin-g b{display:block; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
    color:var(--taupe); margin-bottom:11px;}
  .soin-g p{font-size:15.5px; color:var(--ink-2);}

  /* ---------- contact ---------- */
  .ct{border-top:1px solid var(--ink);}
  .ct-r{display:grid; grid-template-columns:180px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--rule);}
  @media (max-width:600px){ .ct-r{grid-template-columns:1fr; gap:5px;} }
  .ct-r dt{font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
    color:var(--taupe); padding-top:5px;}
  .ct-r dd{margin:0; font-size:16.5px;}
  .ct-r a{position:relative; padding-bottom:2px; background-image:linear-gradient(var(--rule-2),var(--rule-2));
    background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
    transition:background-size .45s cubic-bezier(.16,1,.3,1);}
  .ct-r a:hover{background-image:linear-gradient(var(--ink),var(--ink));}
  .hrs{border-top:1px solid var(--ink);}
  .hrs li{display:flex; align-items:baseline; justify-content:space-between; gap:18px;
    padding:14px 0; border-bottom:1px solid var(--rule); font-size:16px;}
  .hrs li span{color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap;}
  .hrs li.off, .hrs li.off span{color:var(--ink-3);}
  .hrs li.now{font-weight:600;}
  .resa{background:var(--band); padding:clamp(28px,4vw,44px);}
  .resa h2{font-size:26px;}
  .resa ul{margin:24px 0; border-top:1px solid var(--rule-2);}
  .resa li{padding:13px 0; border-bottom:1px solid var(--rule-2); font-size:15.5px; color:var(--ink-2);}
  /* colonne étroite : le bouton prend toute la largeur et son libellé passe à la
     ligne plutôt que de se faire couper par le masque de l'effet de remplissage */
  .resa .acts{display:block;}
  .resa .acts .act{width:100%; white-space:normal; text-align:center; line-height:1.4;}

  /* ---------- appel, suite, pied ---------- */
  .appel{border-top:1px solid var(--ink); text-align:center;}
  .appel .hold{padding-top:clamp(46px,5.4vw,80px); padding-bottom:clamp(46px,5.4vw,80px);}
  .appel p{margin:18px auto 0; color:var(--ink-2); max-width:52ch;}
  .appel .acts{margin-top:34px; justify-content:center;}
  .suite{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule);}
  @media (max-width:760px){ .suite{grid-template-columns:1fr;} }
  .suite a{display:block; padding:38px 0 42px; transition:padding-left .4s cubic-bezier(.22,1,.36,1);}
  .suite a + a{border-left:1px solid var(--rule); padding-left:clamp(24px,4vw,52px);}
  @media (max-width:760px){ .suite a + a{border-left:0; border-top:1px solid var(--rule); padding-left:0;} }
  .suite a:hover{padding-left:14px;}
  .suite span{font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe);}
  .suite b{display:block; margin-top:14px; font-family:var(--display); font-size:clamp(25px,3vw,33px); font-weight:400;}
  .suite em{display:block; margin-top:10px; font-style:normal; font-size:15px; color:var(--ink-3); max-width:34ch;}

  .pied{background:var(--band); padding:clamp(42px,5vw,68px) 0 32px; margin-top:0;}
  .pied-c{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px clamp(20px,3vw,44px);
    padding-bottom:46px;}
  @media (max-width:900px){ .pied-c{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .pied-c{grid-template-columns:1fr; gap:30px;} }
  .pied h2{font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
    color:var(--taupe); margin-bottom:18px;}
  .pied p{font-size:15px; color:var(--ink-2);}
  .pied p + p{margin-top:13px;}
  .pied nav{display:grid; gap:11px;}
  .pied nav a, .pied p a{position:relative; font-size:15px; color:var(--ink-2); width:fit-content;
    transition:color .3s ease;}
  .pied nav a::after, .pied p a::after{content:""; position:absolute; left:0; right:0; bottom:-2px;
    height:1px; background:currentColor; transform:scaleX(0); transform-origin:right;
    transition:transform .45s cubic-bezier(.16,1,.3,1);}
  .pied nav a:hover, .pied p a:hover{color:var(--ink);}
  .pied nav a:hover::after, .pied p a:hover::after{transform:scaleX(1); transform-origin:left;}
  .pied-marque .logo-img{width:52px; height:auto; margin-bottom:18px; color:var(--ink);}
  .pied-b{display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
    padding-top:28px; border-top:1px solid var(--rule-2); font-size:12px; letter-spacing:.04em;
    color:var(--ink-3);}

  /* Au doigt, une cible de moins de 44 px se rate. Les liens du pied et les
     liens fléchés sont serrés au clavier et à la souris, ils s'aèrent au doigt. */
  @media (pointer:coarse), (max-width:760px){
    .marque{min-height:44px;}
    .pied nav{gap:2px;}
    .pied nav a{min-height:44px; display:flex; align-items:center;}
    .lnk{min-height:44px; align-items:center;}
    .ct dd a{display:inline-flex; align-items:center; min-height:44px;}
    .menu-sous a{min-height:44px; display:flex; align-items:center;}
    .crumb a{padding:6px 0;}
  }
  .top{position:fixed; right:26px; bottom:26px; z-index:30; width:46px; height:46px;
    border:1px solid var(--rule-2); background:var(--ground); color:var(--ink);
    display:flex; align-items:center; justify-content:center; font-size:14px;}
  .top:hover{border-color:var(--ink);}