/* 5 & Sens, Lyon 3e. Palette relevée sur leur propre devanture :
   vert enseigne, bleu marine du store, prune des panneaux, fuchsia du comptoir,
   bois miel du sol. Pas de rose "spa" générique. */

:root{
  --green:#3DAF2C;
  --green-dk:#2B7D1F;
  --navy:#1D2B4F;
  --plum:#5B3557;
  --fuchsia:#E3267A;
  --wood:#A8783C;
  --ink:#23212B;
  --muted:#55505C;
  --sand:#F7F4EE;
  --line:#E2DCD2;
  /* Polices système uniquement : aucune requête réseau, aucun CDN, et la page
     s'affiche instantanément même en 3G. Le caractère géométrique de l'enseigne
     est repris par la graisse et l'interlettrage, pas par un fichier distant. */
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --pad:1.25rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);font-weight:400;
  font-size:1rem;line-height:1.6;color:var(--ink);background:#fff;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:900;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:1.6rem}
h2{font-size:1.35rem}
h3{font-size:1.02rem}
p{margin:0 0 1em}
a{color:var(--green-dk)}
.wrap{max-width:62rem;margin:0 auto;padding:2.5rem var(--pad)}

/* focus visible partout, jamais supprimé */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--navy);outline-offset:3px;border-radius:4px;
}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:.75rem 1rem;z-index:20;
}
.skip:focus{left:0}

/* ---------- barre ---------- */
.bar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem var(--pad);background:#fff;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--plum)}
.brand-mark{width:64px;height:auto}
.brand-txt{font-size:.72rem;line-height:1.25;text-transform:uppercase;letter-spacing:.08em}
.brand-txt b{font-weight:900;color:var(--navy)}
.call{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px;padding:0 1rem;border-radius:999px;
  background:var(--navy);color:#fff;text-decoration:none;
  font-weight:900;font-size:.85rem;
  transition:background .2s ease;
}
.call:hover{background:#152040}
.call svg{width:18px;height:18px;fill:currentColor}

/* ---------- héro ---------- */
.hero-img{margin:0}
.hero-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero-txt{padding:1.75rem var(--pad) 2rem;max-width:62rem;margin:0 auto}
.lede{font-size:1.02rem;color:var(--muted)}
.today{
  display:flex;align-items:center;gap:.5rem;
  font-weight:900;font-size:.9rem;color:var(--navy);
  background:var(--sand);border-left:4px solid var(--green);
  padding:.6rem .8rem;border-radius:0 6px 6px 0;
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
.cta{display:flex;flex-direction:column;gap:.6rem;margin:1.25rem 0 .75rem}
.btn{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:52px;padding:.7rem 1.1rem;border-radius:8px;
  font-weight:900;font-size:.95rem;text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.btn-1{background:var(--navy);color:#fff}
.btn-1:hover{background:#152040}
.btn-2{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn-2:hover{background:var(--sand)}
.btn-3{background:#fff;color:var(--plum);border:2px solid var(--plum)}
.btn-3:hover{background:var(--sand)}
.note,.micro{font-size:.82rem;color:var(--muted);margin:0}
.micro{margin-top:1rem}

/* ---------- végétal : le bloc vert, la spécialité ---------- */
.vegetal{background:var(--green);color:var(--navy)}
.vegetal .wrap{padding-top:2.25rem;padding-bottom:2.25rem}
.vegetal h2{color:var(--navy);font-size:1.5rem}
.vegetal p{color:var(--navy)}
.kicker{
  font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 .4rem;color:var(--navy);
}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 0;padding:0}
.tags li{
  background:#fff;color:var(--plum);font-weight:900;font-size:.8rem;
  padding:.45rem .8rem;border-radius:999px;
}

/* ---------- prestations ---------- */
.grid{display:grid;gap:.85rem}
.card{
  border:1px solid var(--line);border-top:4px solid var(--green);
  border-radius:8px;padding:1.1rem;background:#fff;
}
.card h3{color:var(--plum)}
.card p{margin:0;font-size:.92rem;color:var(--muted)}
.card-hi{border-top-color:var(--fuchsia);background:var(--sand)}

/* ---------- venir ---------- */
.two{display:grid;gap:2rem}
.blk h3{color:var(--plum);margin-bottom:.4rem}
.mt{margin-top:1.75rem}
.hrs{width:100%;border-collapse:collapse;font-size:.92rem}
.hrs th,.hrs td{text-align:left;padding:.5rem 0;border-bottom:1px solid var(--line)}
.hrs th{font-weight:400;color:var(--muted)}
.hrs td{font-weight:900;text-align:right;color:var(--navy)}
.hrs .off{font-weight:400;color:var(--muted)}
/* Marqueur de renvoi, volontairement non cliquable : la note est juste en dessous,
   et un astérisque de 12px ne peut pas faire une cible tactile de 44px. */
.ast{color:var(--fuchsia);font-weight:900;padding:0 .2rem}
address{font-style:normal;font-weight:900;font-size:1.05rem;color:var(--navy);margin-bottom:.8rem}
.facts{margin:0 0 0;padding-left:1.1rem;font-size:.88rem;color:var(--muted)}
.facts li{margin-bottom:.35rem}
.ctc{display:flex;flex-direction:column;gap:.6rem;margin:0 0 .8rem}
.full{width:100%}
.soc{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
.soc a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;min-width:7.5rem;padding:.5rem 1.25rem;
  border:1px solid var(--line);border-radius:999px;
  font-size:.85rem;font-weight:900;color:var(--plum);text-decoration:none;
}
.soc a:hover{background:var(--sand)}

/* ---------- pied ---------- */
.ft{background:var(--navy);color:#fff;padding:2rem var(--pad);text-align:center}
.ft p{margin:0 0 .4rem;font-size:.85rem;color:#D7DCE8}
.ft-b{margin-bottom:.9rem}
.ft-mark{width:96px;height:auto;margin:0 auto;border-radius:4px}

/* ---------- large ---------- */
@media (min-width:720px){
  h1{font-size:2.25rem}
  h2{font-size:1.7rem}
  .vegetal h2{font-size:1.9rem}
  .brand-mark{width:78px}
  .brand-txt{font-size:.78rem}
  .hero-img img{aspect-ratio:21/9;max-height:26rem}
  .hero-txt{padding-top:2.25rem}
  .lede{font-size:1.12rem;max-width:44rem}
  .cta{flex-direction:row;flex-wrap:wrap}
  .btn{padding:.7rem 1.5rem}
  .full{width:auto;min-width:14rem}
  .ctc{flex-direction:row;flex-wrap:wrap}
  .grid{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr 1fr;gap:3rem}
  .ft-mark{width:112px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}