/* Anne Lepeltier, site B « Six heures ». Tokens from design.md, nothing else. */

@font-face {
  font-family: "Chivo";
  src: url("assets/fonts/chivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("assets/fonts/lexend.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* la palette */
  --crepi: #F4EFE4;
  --mortier: #E3DACA;
  --brique: #9E5234;
  --carreau: #4F5F36;
  --or: #CDB47A;
  --ardoise: #26292A;
  --carreau-fonce: #3E4B2A;
  --ombre: #5A2B1A;
  --ardoise-douce: #4A4E4F;

  --f-titre: "Chivo", "Arial Narrow", Arial, sans-serif;
  --f-texte: "Lexend", "Segoe UI", system-ui, sans-serif;

  /* l'échelle, 390 -> 1440 */
  --t-nom: clamp(44px, calc(27.66px + 4.19vw), 88px);
  --t-h1: clamp(38px, calc(28.34px + 2.476vw), 64px);
  --t-h2: clamp(30px, calc(24.8px + 1.333vw), 44px);
  --t-h3: clamp(22px, calc(20.51px + 0.381vw), 26px);
  --t-texte: clamp(19px, calc(18.63px + 0.0952vw), 20px);
  --t-bouton: var(--t-texte);
  --t-petit: 16px;
  /* le pas ajouté par le plan : l'heure */
  --t-heure: clamp(96px, calc(57.37px + 9.905vw), 200px);
  --t-heure-section: clamp(88px, calc(61.26px + 6.857vw), 160px);

  /* l'espacement, base 8 */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 104px;
  --s-7: 160px;
  --marge: clamp(16px, calc(4.571vw - 1.83px), 64px);
  --bande: clamp(64px, calc(49.14px + 3.81vw), 104px);

  --r-carreau: 3px;
  --r-bouton: 6px;

  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  --entete-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--crepi);
  color: var(--ardoise);
  font: 400 var(--t-texte)/1.6 var(--f-texte);
  overflow-x: clip;
}
html { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--ardoise); outline-offset: 2px; }
.sur-fonce :focus-visible { outline-color: var(--crepi); }

.cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saut {
  position: absolute; left: var(--marge); top: -80px; z-index: 30;
  background: var(--ardoise); color: var(--crepi); padding: var(--s-1) var(--s-2);
  border-radius: var(--r-bouton); text-decoration: none;
}
.saut:focus { top: var(--s-1); }

/* ---------- le fond en couches ---------- */
.fond { position: relative; isolation: isolate; overflow-x: clip; }
.fond::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/texture/crepi.jpg") repeat;
  background-size: 512px 512px;
  mix-blend-mode: multiply; opacity: 0.12;
}
.fond--lumiere::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 70vw; height: 60vw; max-width: 900px; max-height: 760px;
  right: -18vw; top: 4%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--or) 10%, transparent), transparent);
  filter: blur(120px);
}
.surface-crepi { background-color: var(--crepi); }
.surface-mortier { background-color: var(--mortier); }

/* ---------- les boutons et les liens ---------- */
.bouton {
  display: inline-flex; align-items: center; min-height: 56px;
  padding: 14px 24px 14px 50px;
  font: 500 var(--t-bouton)/1.2 var(--f-texte);
  color: var(--crepi); text-decoration: none; white-space: nowrap;
  border-radius: var(--r-bouton);
  background:
    linear-gradient(var(--crepi), var(--crepi)) no-repeat 22px 50% / 14px 14px,
    var(--carreau);
  transition: background-color 200ms ease-out, background-position 200ms ease-out;
}
.bouton::before { content: "Appeler le\00a0"; }
.bouton:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .bouton:hover {
    background:
      linear-gradient(var(--crepi), var(--crepi)) no-repeat 26px 50% / 14px 14px,
      var(--carreau-fonce);
  }
}

.lien {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  background: linear-gradient(var(--carreau), var(--carreau)) no-repeat 0 100% / 0 2px;
  transition: background-size 300ms ease-out, text-decoration-color 300ms ease-out;
  padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .lien:hover { background-size: 100% 2px; text-decoration-color: transparent; }
  .sur-fonce .lien:hover { background-image: linear-gradient(var(--crepi), var(--crepi)); }
}

/* ---------- l'en-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  height: var(--entete-h);
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--marge);
  background: var(--crepi);
}
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marque img { width: 32px; height: 32px; }
.marque-nom { font: 700 var(--t-petit)/1.05 var(--f-titre); letter-spacing: 0.005em; }
.entete-tel {
  font: 500 var(--t-bouton)/1 var(--f-texte);
  font-variant-numeric: tabular-nums;
  text-decoration: none; white-space: nowrap;
  padding: 14px 0;
}
.menu-bouton {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  font: 500 var(--t-petit)/1 var(--f-texte); color: var(--ardoise);
  background: var(--mortier); border: 0; border-radius: var(--r-bouton); cursor: pointer;
  transition: background-color 200ms ease-out;
}
.menu-icone { fill: var(--carreau); width: 14px; height: 19px; }
.menu-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .menu-bouton:hover { background: color-mix(in srgb, var(--mortier) 70%, var(--ardoise-douce) 12%); }
  .entete-tel:hover { color: var(--carreau); }
}

@media (max-width: 767px) {
  .entete { gap: 12px; }
  .menu-bouton { width: 44px; padding: 0; justify-content: center; }
}

/* le menu : les heures de la journée */
.journee {
  position: fixed; inset: var(--entete-h) 0 0 0; z-index: 19;
  padding: var(--s-4) var(--marge) var(--s-6);
  overflow-y: auto;
  background: var(--crepi);
}
.journee[hidden] { display: none; }
.journee ol { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 4px; }
.journee a {
  display: grid; grid-template-columns: 4.6em 1fr; align-items: baseline; gap: var(--s-2);
  padding: 10px 0; text-decoration: none;
}
.journee-h { font: 800 clamp(34px, calc(28px + 1.6vw), 52px)/1 var(--f-titre); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.journee-h .h { font-size: 0.5em; margin: 0 0.18em 0 0.22em; }
.journee-n { font: 400 var(--t-texte)/1.3 var(--f-texte); }
@media (hover: hover) and (pointer: fine) {
  .journee a { transition: color 200ms ease-out; }
  .journee a:hover { color: var(--carreau); }
}

/* ---------- le premier écran ---------- */
.ouverture { position: relative; }
.ouverture-photo {
  position: relative; z-index: 0; overflow: hidden;
  height: calc((100svh - var(--entete-h)) * 0.55);
  min-height: 360px;
  background: var(--ardoise);
}
.ouverture-photo > img:first-child {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%;
}
/* le manteau sombre sous le chiffre, puis le fondu de 160 px vers le crépi */
.ouverture-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 16%,
    color-mix(in srgb, var(--ardoise) 42%, transparent) 38%,
    color-mix(in srgb, var(--ardoise) 34%, transparent) 60%,
    transparent 70%);
}
.ouverture-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--fondu-vers, var(--crepi)));
}
.soleil {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 0;
  mix-blend-mode: screen; opacity: 0.45; pointer-events: none;
}

.cadran-bloc {
  position: absolute; z-index: 4; left: var(--marge); right: var(--marge);
  bottom: calc(100% + 160px + 6px);
  text-align: center; color: var(--crepi);
}
.cadran {
  display: inline-flex; align-items: baseline;
  font: 800 var(--t-heure)/1 var(--f-titre);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.cadran .h { font-size: 0.5em; font-weight: 700; margin: 0 0.18em 0 0.22em; letter-spacing: 0; }
.case { display: inline-block; height: 1em; width: 0.595em; overflow: hidden; text-align: center; }
.bande { display: block; }
.bande > span { display: block; height: 1em; }
.bande--hh, .bande--h { transform: translateY(-14em); }
.bande--mm { transform: translateY(-3em); }
.cadran-fixe { display: none; }
.cadran-ligne { margin-top: 10px; font: 400 var(--t-texte)/1.3 var(--f-texte); }

.ouverture-gauche { z-index: 1; }
.ouverture-texte {
  padding: var(--s-2) var(--marge) calc(var(--s-5) + 40px);
}
.ouverture h1 {
  font: 700 var(--t-h1)/1.05 var(--f-titre);
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 13em;
}
.ouverture .ligne { margin-top: var(--s-2); max-width: 34ch; color: var(--ardoise-douce); }
.bouton--pouce {
  position: fixed; z-index: 18; left: var(--marge); right: var(--marge); bottom: 16px;
}

/* ---------- les heures ---------- */
.heure { padding: var(--bande) var(--marge); scroll-margin-top: var(--entete-h); }
.heure-tete { margin-bottom: var(--s-4); }
.heure-titre { display: flex; flex-direction: column; gap: 6px; }
.heure-chiffre {
  font: 800 var(--t-heure-section)/0.9 var(--f-titre);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  white-space: nowrap;
}
.heure-chiffre .h { font-size: 0.5em; font-weight: 700; margin: 0 0.18em 0 0.22em; letter-spacing: 0; }
.heure-nom { font: 700 var(--t-h3)/1.2 var(--f-titre); color: var(--ardoise-douce); }
.heure p { max-width: 52ch; }
.heure .enonce, .heure .citation { max-width: 34ch; }

.photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--mortier); }
.plein { margin-inline: calc(-1 * var(--marge)); width: calc(100% + 2 * var(--marge)); max-width: none; }
.corps > * + * { margin-top: var(--s-4); }

/* 6 h, la tournée */
.enonce { max-width: 34ch; }
.quartiers, .soins { display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--s-3); }
.soins { grid-template-columns: 1fr; }
.quartiers li, .soins li { display: flex; align-items: center; gap: 12px; font-size: var(--t-texte); line-height: 1.3; }
.quartiers li::before, .soins li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--carreau); }

/* 7 h 20, le café */
.cafe { position: relative; overflow: hidden; }
.cafe .soleil { left: 45%; width: 55%; opacity: 0.35; object-position: 100% 0; }
.citation { max-width: 34ch; }

/* 11 h, deux soins côte à côte */
.duo { display: grid; gap: var(--s-2); }

/* 12 h, la bande brique */
.heure--cabinet { position: relative; isolation: isolate; background: var(--brique); color: var(--crepi); }
.heure--cabinet::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("assets/texture/brique.jpg") repeat; background-size: 256px 256px; opacity: 0.3;
}
.heure--cabinet .heure-nom { color: var(--crepi); }
.relief { text-shadow: 0.06em 0.06em 0 var(--ombre); }
.depuis { font: 900 var(--t-nom)/1 var(--f-titre); letter-spacing: 0.01em; text-wrap: balance; }
.nom-caps { font: 900 var(--t-h3)/1.2 var(--f-titre); text-transform: uppercase; letter-spacing: 0.01em; }
.cabinet-infos { display: grid; gap: var(--s-3); }
.cabinet-infos p { max-width: 40ch; }
.cabinet-infos strong { display: block; font: 700 var(--t-h3)/1.2 var(--f-titre); margin-bottom: 4px; }
.adresse-logo { display: flex; gap: var(--s-2); align-items: flex-start; }
.adresse-logo img { width: 48px; height: 48px; flex: none; margin-top: 4px; }
.conventions { font-weight: 500; }

/* 20 h 30, le contact */
.heure--contact .heure-tete { margin-bottom: var(--s-5); }
.contact-grille { display: grid; gap: var(--s-5); }
.semaine { display: flex; gap: 6px; }
.jour { position: relative; display: grid; justify-items: center; gap: 6px; }
.jour-carreau { width: 40px; height: 40px; border-radius: var(--r-carreau); background: var(--carreau); }
.jour.aujourdhui .jour-carreau { background: var(--or); }
.jour-lettre { font: 500 var(--t-petit)/1 var(--f-texte); color: var(--ardoise-douce); }
.bulle {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 6px 10px; border-radius: var(--r-carreau);
  background: var(--ardoise); color: var(--crepi); font: 400 var(--t-petit)/1.2 var(--f-texte);
  opacity: 0; pointer-events: none; transition: opacity 150ms ease-out;
}
.jour:nth-child(n+6) .bulle { left: auto; right: 0; transform: none; }
@media (hover: hover) and (pointer: fine) { .jour:hover .bulle { opacity: 1; } }
.semaine-ligne { margin-top: var(--s-3); font: 700 var(--t-h3)/1.25 var(--f-titre); }
.contact-action .bouton { margin-top: var(--s-4); }
.contact-infos { display: grid; gap: var(--s-3); align-content: start; }
.contact-infos .etiquette { display: block; font: 700 var(--t-h3)/1.2 var(--f-titre); margin-bottom: 2px; }

/* ---------- le pied de page ---------- */
.pied { background: var(--ardoise); color: var(--crepi); padding: var(--s-5) var(--marge) calc(var(--s-5) + 72px); }
.pied-enseigne { width: 100%; max-width: 640px; border-radius: var(--r-carreau); }
.pied .bouton:focus-visible { outline-color: var(--crepi); }
.pied-appel { display: none; }
.pied-infos { margin-top: var(--s-4); display: grid; gap: var(--s-2); font-size: var(--t-texte); max-width: 1100px; }
.pied-infos p { max-width: 52ch; }
.pied-legal { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--t-petit); }

/* ---------- le mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bande--hh, .bande--h { animation: defile-h 1250ms var(--courbe) both; }
  .bande--mm { animation: defile-mm 600ms var(--courbe) 1000ms both; }
  .soleil--aube { animation: aube 1600ms var(--courbe) both; }
  .cadran-ligne { animation: parait 300ms ease-out 1300ms both; }
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--courbe), transform 900ms var(--courbe); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal .heure-nom { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--courbe) 80ms, transform 900ms var(--courbe) 80ms; }
  .js .reveal.is-in .heure-nom { opacity: 1; transform: none; }
}
@keyframes defile-h { from { transform: translateY(0); } to { transform: translateY(-14em); } }
@keyframes defile-mm { from { transform: translateY(0); } to { transform: translateY(-3em); } }
@keyframes aube { from { opacity: 0; transform: translateX(12%); } to { opacity: 0.45; transform: none; } }
@keyframes parait { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cadran { display: none; }
  .cadran-fixe { display: block; font: 800 calc(var(--t-heure) * 0.62)/1 var(--f-titre); letter-spacing: -0.02em; }
  .cadran-fixe .h { font-size: 0.5em; font-weight: 700; margin: 0 0.18em 0 0.22em; }
  .cadran-fixe .a { font-size: 0.5em; font-weight: 700; margin: 0 0.3em; }
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}

/* ---------- 768 et plus ---------- */
@media (min-width: 768px) {
  :root { --entete-h: 72px; }
  .marque-nom br { display: none; }
  .marque-nom { font-size: 19px; }
  .photo { border-radius: var(--r-carreau); }
  .plein { margin-inline: 0; width: 100%; }
  .bouton--pouce { right: auto; }
  .menu-mot { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .quartiers { grid-template-columns: repeat(3, 1fr); }
  .soins { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr 1fr; }
  .contact-grille { grid-template-columns: 1fr 1fr; }
  .pied { padding-bottom: var(--s-5); }
}

/* ---------- 1024 et plus : deux colonnes, l'heure collée à gauche ---------- */
@media (min-width: 1024px) {
  .bouton--pouce { position: static; }
  .pied-appel { display: block; }
  .ouverture-texte { padding: 0; }
  .ouverture {
    display: grid; grid-template-columns: 5fr 7fr;
    height: calc(100svh - var(--entete-h)); min-height: 680px; max-height: 980px;
  }
  .ouverture-photo { grid-column: 2; grid-row: 1; height: 100%; --fondu-vers: var(--mortier); }
  .ouverture-photo > img:first-child { object-position: 55% 40%; }
  .ouverture-photo::before { display: none; }
  .ouverture-gauche {
    grid-column: 1; grid-row: 1; align-self: center;
    padding: var(--s-5) var(--s-4) var(--s-5) var(--marge);
  }
  .cadran-bloc { position: static; text-align: left; color: var(--ardoise); }
  .cadran { font-size: min(var(--t-heure), calc((41.667vw - 104px) / 2.9)); }
  .cadran-ligne { color: var(--ardoise-douce); margin-top: 14px; }
  .ouverture-texte { margin-top: var(--s-5); }
  .ouverture .bouton { margin-top: var(--s-4); }

  .heure { display: grid; grid-template-columns: 4fr 8fr; column-gap: var(--s-4); align-items: start; }
  .heure-tete { position: sticky; top: calc(var(--entete-h) + var(--s-4)); margin-bottom: 0; }
  .corps { grid-column: 2; }
  .deborde { margin-right: calc(-1 * var(--marge)); width: calc(100% + var(--marge)); max-width: none; border-radius: var(--r-carreau) 0 0 var(--r-carreau); }
  .decale { margin-left: 25%; }
  .cabinet-infos { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
  .cabinet-infos .large { grid-column: 1 / -1; }

  .heure--contact { display: block; }
  .heure--contact .heure-tete { position: static; }
  .contact-grille { grid-template-columns: 4fr 8fr; column-gap: var(--s-4); }
  .contact-infos { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
  .contact-infos .large { grid-column: 1 / -1; }
  .pied-infos { grid-template-columns: repeat(4, auto); justify-content: start; align-items: center; column-gap: var(--s-5); }
}

/* ---------- les pages : les soins et leur prix, demander un passage ----------
   Ajoutées après le choix du juge. Rien au-dessus ne change : ces règles ne prennent que les tokens. */
.journee-pages { max-width: 1100px; margin: var(--s-4) auto 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--mortier); display: grid; gap: 4px; }
.journee .journee-pages a { display: flex; align-items: center; gap: 12px; padding: 10px 0; font: 700 var(--t-h3)/1.2 var(--f-titre); text-decoration: none; }
.journee-pages a::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--carreau); }
.journee-pages a[aria-current="page"] { color: var(--ardoise-douce); }

/* le haut d'une page */
.page-tete { padding: var(--bande) var(--marge) var(--s-5); }
.page-tete h1 { font: 700 var(--t-h1)/1.05 var(--f-titre); letter-spacing: -0.01em; text-wrap: balance; max-width: 13em; }
.page-tete .ligne { margin-top: var(--s-2); max-width: 44ch; color: var(--ardoise-douce); }
.urgence { margin-top: var(--s-3); font-weight: 500; }

/* les choix : le filtre des soins, les puces du formulaire */
.filtres { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.filtre, .etape { border: 0; margin: 0; padding: 0; min-width: 0; }
.filtre legend { padding: 0; margin-bottom: 12px; font: 700 var(--t-texte)/1.3 var(--f-titre); }
.etape legend { padding: 0; margin-bottom: var(--s-2); font: 700 var(--t-h3)/1.2 var(--f-titre); }
.choix-groupe { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.choix { position: relative; display: inline-flex; }
.choix input, .jour-choix input, .depot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px;
  font: 500 var(--t-bouton)/1.2 var(--f-texte); color: var(--ardoise);
  background: var(--mortier); border: 0; border-radius: var(--r-bouton); cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.surface-mortier .puce { background: var(--crepi); }
.puce[aria-pressed="true"], .choix input:checked + .puce { background: var(--carreau); color: var(--crepi); }
.choix input:focus-visible + .puce { outline: 2px solid var(--ardoise); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .puce:hover { background: color-mix(in srgb, var(--mortier) 70%, var(--ardoise-douce) 12%); }
  .puce[aria-pressed="true"]:hover, .choix input:checked + .puce:hover { background: var(--carreau-fonce); }
}
.compte { margin-top: var(--s-3); max-width: 52ch; color: var(--ardoise-douce); }

/* une ligne de soin : le nom, où, quand, le tarif, ce qui reste */
.soins-liste { border-top: 1px solid color-mix(in srgb, var(--ardoise) 20%, transparent); }
.soin {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid color-mix(in srgb, var(--ardoise) 20%, transparent);
}
.soin[hidden], .heure[hidden], .passage-ou[hidden], [data-si][hidden] { display: none; }
.soin-texte { grid-column: 1 / -1; display: grid; gap: 6px; }
.soin-nom { font: 700 var(--t-h3)/1.2 var(--f-titre); }
.soin-ou { display: flex; flex-wrap: wrap; gap: 4px var(--s-3); }
.soin-ou li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.soin-ou li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--carreau); }
.soin-quand { color: var(--ardoise-douce); }
.soin-chiffre { display: grid; align-content: start; gap: 2px; }
.soin-etiquette, .soin-code { font: 400 var(--t-petit)/1.3 var(--f-texte); color: var(--ardoise-douce); }
.montant { font: 800 var(--t-h3)/1.2 var(--f-titre); font-variant-numeric: tabular-nums; }
.soin-demander { grid-column: 1 / -1; justify-self: start; }
.suite-titre { font: 700 var(--t-h2)/1.1 var(--f-titre); text-wrap: balance; max-width: 14em; }

/* le bouton d'envoi : le même bouton, sans « Appeler le » */
button.bouton { border: 0; cursor: pointer; }
.bouton--envoi::before { content: none; }

/* la demande de passage */
.passage-form { display: grid; gap: var(--s-5); }
.champ { display: grid; gap: 6px; margin-top: var(--s-3); }
.champ label { font-weight: 500; }
.champ input, .champ textarea {
  width: 100%; min-height: 56px; padding: 12px 16px;
  font: 400 var(--t-texte)/1.4 var(--f-texte); color: var(--ardoise);
  background: var(--crepi); border: 1.5px solid var(--ardoise-douce); border-radius: var(--r-bouton);
}
.champ textarea { resize: vertical; }
.champ [aria-invalid="true"] { border: 2px solid var(--brique); }
.erreur { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 500; }
.erreur::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--brique); }
.erreur[hidden] { display: none; }
.etape-note { margin-top: var(--s-3); max-width: 44ch; }
.etape-sous { margin: var(--s-4) 0 12px; font: 700 var(--t-texte)/1.3 var(--f-titre); }

.jours-choix { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.jour-choix { position: relative; }
.jour-choix-carreau {
  display: grid; place-content: center; justify-items: center; gap: 2px; aspect-ratio: 1;
  border-radius: var(--r-carreau); background: var(--crepi); cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.jour-choix-l { font: 500 var(--t-petit)/1 var(--f-texte); }
.jour-choix-n { font: 800 var(--t-h3)/1 var(--f-titre); font-variant-numeric: tabular-nums; }
.jour-choix input:checked + .jour-choix-carreau { background: var(--carreau); color: var(--crepi); }
.jour-choix input:focus-visible + .jour-choix-carreau { outline: 2px solid var(--ardoise); outline-offset: 2px; }
.jours-mois { margin-top: 12px; color: var(--ardoise-douce); }

.depot {
  position: relative; display: grid; gap: 4px; padding: var(--s-3);
  border: 1.5px dashed var(--ardoise-douce); border-radius: var(--r-carreau); background: var(--crepi); cursor: pointer;
}
.depot:focus-within { outline: 2px solid var(--ardoise); outline-offset: 2px; }
.depot-titre { display: flex; align-items: center; gap: 12px; font: 700 var(--t-texte)/1.3 var(--f-titre); }
.depot-titre::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 2px; background: var(--carreau); }
.depot-detail { color: var(--ardoise-douce); padding-left: 26px; }
.depot-apercu { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.depot-apercu[hidden] { display: none; }
.depot-apercu img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-carreau); }
.coche { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: var(--s-2); cursor: pointer; }
.coche input { width: 22px; height: 22px; margin: 0; accent-color: var(--carreau); }

.recu { display: grid; gap: var(--s-3); scroll-margin-top: calc(var(--entete-h) + var(--s-3)); }
.recu[hidden] { display: none; }
.recu-titre { display: flex; align-items: center; gap: 14px; font: 700 var(--t-h2)/1.1 var(--f-titre); }
.recu-titre::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border-radius: var(--r-carreau); background: var(--carreau); }
.recu-titre:focus { outline: none; }
.recu-telephone { max-width: 560px; padding: var(--s-3); border-radius: var(--r-carreau); background: var(--ardoise); color: var(--crepi); }
.recu-de { font: 400 var(--t-petit)/1.3 var(--f-texte); }
.recu-message { margin-top: var(--s-1); white-space: pre-line; }
.recu-note { font-size: var(--t-petit); color: var(--ardoise-douce); }
.lien-bouton { border: 0; padding: 0 0 2px; font: 500 var(--t-texte)/1.4 var(--f-texte); color: var(--ardoise); cursor: pointer; background-color: transparent; }
.passage-ou { display: grid; gap: var(--s-2); justify-items: start; padding-top: var(--s-4); border-top: 1px solid color-mix(in srgb, var(--ardoise) 20%, transparent); }

@media (min-width: 768px) {
  .filtres { grid-template-columns: auto auto; justify-content: start; column-gap: var(--s-5); }
  .jour-choix-n { font-size: var(--t-h2); }
}
@media (min-width: 1024px) {
  .page-tete .bouton { margin-top: var(--s-4); }
  .soin { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.3fr); column-gap: var(--s-4); }
  .soin-texte { grid-column: auto; grid-row: span 2; }
  .soin-demander { grid-column: 3; }
}