/* Pharmacie Geneslay Darreau, site A, "La croix-fenêtre". Tokens from design.md only. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --platre: #F2F3F0;
  --beton: #D7D2CA;
  --anthracite: #2F3337;
  --vert-croix: #407C56;
  --vert-croix-fonce: #326244;
  --chene: #B8915F;
  --tilleul: #8CCB4E;
  --encre-douce: color-mix(in srgb, var(--anthracite) 78%, var(--platre));

  --f-titre: "Archivo", "Arial Black", sans-serif;
  --f-texte: "Atkinson Hyperlegible Next", "Verdana", sans-serif;

  /* phone 390 -> desktop 1440, linear between */
  --t-titre: clamp(54px, 38.4px + 4vw, 96px);
  --t-section: clamp(34px, 27.31px + 1.714vw, 52px);
  --t-bloc: clamp(23px, 21.14px + 0.476vw, 28px);
  --t-heure: clamp(44px, 36.57px + 1.905vw, 64px);
  --t-pratique: clamp(19px, 18.26px + 0.1905vw, 21px);
  --t-texte: clamp(17px, 16.63px + 0.0952vw, 18px);
  --t-petit: 15px;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; --e9: 112px;
  --marge: clamp(20px, 9.6px + 2.667vw, 48px);
  --bande: clamp(72px, 57.14px + 3.81vw, 112px);
  --rayon: 6px;

  --sortie: cubic-bezier(0.2, 0.7, 0.2, 1);
  --trace: cubic-bezier(0.65, 0, 0.35, 1);
  --h-barre: 56px;
  --ligne: 29em;
}
@media (min-width: 900px) { :root { --h-barre: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip;
  background: var(--platre); color: var(--anthracite);
  font-family: var(--f-texte); font-size: var(--t-texte); line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titre); font-stretch: 125%; text-wrap: balance; }
h1 { font-size: var(--t-titre); font-weight: 700; line-height: 1.02; letter-spacing: -0.015em; }
h2 { font-size: var(--t-section); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
h3 { font-size: var(--t-bloc); font-weight: 600; line-height: 1.2; }
p { max-width: var(--ligne); text-wrap: pretty; }
.pratique { font-family: var(--f-titre); font-stretch: 75%; font-weight: 600; font-size: var(--t-pratique); line-height: 1.25; font-variant-numeric: tabular-nums; }
.petit { font-size: var(--t-petit); line-height: 1.5; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--vert-croix); outline-offset: 2px; }
.sombre :focus-visible, .barre :focus-visible, .pied :focus-visible { outline-color: var(--tilleul); }

/* ---------- The one button, the same everywhere ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 24px;
  background: var(--vert-croix); color: var(--platre);
  font-family: var(--f-texte); font-weight: 600; font-size: 18px; line-height: 1.2;
  text-decoration: none; border-radius: var(--rayon);
  transition: background-color 200ms ease-out, transform 120ms ease-out;
}
.btn:active { transform: translateY(1px); background: var(--vert-croix-fonce); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--vert-croix-fonce); } }

/* Links: 1 px at 40 % at rest, a 2 px --vert-croix underline drawn left to right in 300 ms */
.lien {
  text-decoration: none; padding-bottom: 2px;
  background:
    linear-gradient(var(--vert-croix), var(--vert-croix)) 0 100% / 0 2px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 40%, transparent), color-mix(in srgb, currentColor 40%, transparent)) 0 100% / 100% 1px no-repeat;
  transition: background-size 300ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .lien:hover { background-size: 100% 2px, 100% 1px; }
}
.sombre .lien, .pied .lien { background-image: linear-gradient(var(--tilleul), var(--tilleul)), linear-gradient(color-mix(in srgb, var(--platre) 40%, transparent), color-mix(in srgb, var(--platre) 40%, transparent)); }

/* ---------- The bar ---------- */
.barre {
  position: sticky; top: 0; z-index: 50; height: var(--h-barre);
  display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--marge);
  background: var(--anthracite); color: var(--platre);
}
.barre__nom { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.barre__nom img { width: 30px; height: 30px; flex: none; }
.barre__nom span { max-width: 9.5em; line-height: 1.05; }
.barre__tel { text-decoration: none; white-space: nowrap; }
@media (min-width: 700px) { .barre__nom span { max-width: none; } }

/* ---------- The cross-window: first screen and the opening ---------- */
.croix { position: relative; background: var(--anthracite); color: var(--platre); }
.croix__fond, .croix__vue {
  position: sticky; top: var(--h-barre); height: calc(100svh - var(--h-barre));
  overflow: hidden;
}
.croix__fond { z-index: 0; background: var(--anthracite); isolation: isolate; }
.croix__fond::before {
  content: ""; position: absolute; inset: 0; opacity: 0.06;
  background: url("../img/motif-croix.svg") 0 0 / 120px 120px;
}
.croix__halo {
  position: absolute; width: calc(var(--cw) * 2.6); aspect-ratio: 3 / 2;
  left: calc(var(--cx) - var(--cw) * 1.66); top: calc(var(--cy) - var(--cw) * 0.87);
  background: url("../img/halo.webp") center / cover no-repeat;
  mix-blend-mode: screen; opacity: 0.3;
}
.croix__vue { z-index: 2; margin-top: calc(-1 * (100svh - var(--h-barre))); pointer-events: none; }
.croix__fenetre {
  position: absolute; inset: 0;
  -webkit-mask: url("../img/croix-plein.svg") no-repeat;
  mask: url("../img/croix-plein.svg") no-repeat;
  -webkit-mask-size: calc(var(--cw) * var(--s)) calc(var(--cw) * var(--s));
  mask-size: calc(var(--cw) * var(--s)) calc(var(--cw) * var(--s));
  -webkit-mask-position: calc(var(--cx) - var(--cw) * var(--s) / 2) calc(var(--cy) - var(--cw) * var(--s) / 2);
  mask-position: calc(var(--cx) - var(--cw) * var(--s) / 2) calc(var(--cy) - var(--cw) * var(--s) / 2);
}
.croix__fenetre img {
  position: absolute; left: 0; width: 100%; top: var(--py); height: var(--ph);
  object-fit: cover; object-position: 40% 50%;
  transform-origin: var(--cx) calc(var(--cy) - var(--py));
}
.croix__fondu { /* the foot of the photo melts into the anthracite over its bottom 18 % */
  position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--anthracite) 0%, transparent), var(--anthracite));
}
.croix__trait {
  position: absolute; width: var(--cw); height: var(--cw); overflow: visible;
  left: calc(var(--cx) - var(--cw) / 2); top: calc(var(--cy) - var(--cw) / 2);
  transform: scale(var(--s)); transform-origin: 50% 50%;
  fill: none; stroke-linecap: round; stroke-linejoin: miter;
}
.croix__trait .contour { stroke: var(--vert-croix); stroke-width: 4.47; }
.croix__trait .tiret { stroke: var(--tilleul); stroke-width: 4.47; }
.croix__texte {
  position: relative; z-index: 1;
  margin-top: calc(-1 * (100svh - var(--h-barre)));
  min-height: calc(100svh - var(--h-barre));
  padding: calc(var(--cy) + var(--cw) / 2 + var(--e5)) var(--marge) var(--e6);
  display: flex; flex-direction: column; justify-content: flex-start; gap: var(--e5);
}
.croix__texte h1 { font-size: min(var(--t-titre), calc((100vw - 2 * var(--marge)) / 7.45)); text-wrap: wrap; }
.croix__texte .btn { width: 100%; }
.croix__plein { display: none; position: relative; }
.croix__plein img { width: 100%; height: 72svh; object-fit: cover; }
.croix__plein::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--anthracite) 0%, transparent), var(--anthracite));
}
html:not(.moment) .croix__plein { display: block; }
.moment .croix { height: calc(200svh - var(--h-barre)); }
.moment .croix__texte { min-height: 0; }

@media (min-width: 900px) {
  .croix__texte {
    padding: 0 var(--marge);
    min-height: calc(100svh - var(--h-barre));
    justify-content: center; max-width: 54vw;
  }
  .moment .croix__texte { min-height: calc(100svh - var(--h-barre)); }
  .croix__texte h1 { font-size: var(--t-titre); }
  .croix__texte .btn { width: auto; align-self: flex-start; }
  .croix__fenetre img { object-position: 50% 50%; }
}

/* The moment on arrival */
.moment .croix__trait .contour { stroke-dasharray: 1 1; animation: trace 1200ms var(--trace) both; }
.moment .croix__fenetre img { animation: apparait 700ms var(--sortie) 400ms both; }
.moment .croix__trait .tiret { animation: tiret 300ms var(--sortie) 1500ms both; }
.moment .croix__texte h1 { animation: leve 600ms var(--sortie) 1600ms both; }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes apparait { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes tiret { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes leve { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* The oak seam: the top of their counters */
.couture { height: 8px; background: var(--chene) url("../img/chene.webp") 0 0 / 256px 256px; }

/* ---------- Bands ---------- */
.bande { padding: var(--bande) var(--marge); position: relative; isolation: isolate; }
.cadre { max-width: 1344px; margin: 0 auto; }
.platre { background: var(--platre); }
.beton { background: var(--beton); }
.beton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.12; pointer-events: none;
  background: url("../img/beton.webp") 0 0 / 700px 280px;
}
.sombre { background: var(--anthracite); color: var(--platre); }
.sombre::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.06; pointer-events: none;
  background: url("../img/motif-croix.svg") 0 0 / 120px 120px;
}
.tablette { display: block; height: 8px; background: var(--chene) url("../img/chene.webp") 0 0 / 256px 256px; }

/* 3. The prescription block */
.ordo__photo { position: relative; }
.ordo__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ordo__photo::after { /* the 4 % grain on the generated image */
  content: ""; position: absolute; inset: 0; opacity: 0.04; pointer-events: none; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ordo__texte { margin-top: var(--e7); }
.ordo__texte h2 { max-width: 11em; }
.ordo__texte > p { margin-top: var(--e5); }
.etapes { margin: var(--e6) 0; display: grid; gap: var(--e4); counter-reset: none; }
.etapes li { display: grid; grid-template-columns: 40px 1fr; gap: var(--e3); align-items: baseline; }
.etapes .num { font-family: var(--f-titre); font-stretch: 75%; font-weight: 600; font-size: var(--t-section); line-height: 1; font-variant-numeric: tabular-nums; }
.etapes .pratique { font-weight: 600; }
.ordo__bloc { padding-bottom: var(--e6); }
.ordo__bloc .btn { width: 100%; }
.ordo__mail { margin-top: var(--e4); }
.ordo__bloc + .tablette { max-width: 100%; }
@media (min-width: 900px) {
  .ordo .cadre { display: grid; grid-template-columns: 5fr 6fr; gap: var(--e9); align-items: center; }
  .ordo__texte { margin-top: 0; }
  .ordo__bloc .btn { width: auto; }
}

/* 4. The aisles, in the order of the shop */
.rayons__tete { margin-bottom: var(--e8); }
.rayons__tete h2 { max-width: 14em; }
.rayons__tete p { margin-top: var(--e4); }
.rayon + .rayon { margin-top: var(--e8); }
.rayon__photo { overflow: hidden; margin: 0 calc(-1 * var(--marge)); }
.rayon__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 400ms var(--sortie); }
.rayon__texte { padding-top: var(--e5); }
.rayon__texte h3 { display: inline-block; padding-bottom: var(--e2); }
.rayon__texte h3 + .tablette { width: 100%; max-width: 12em; margin-bottom: var(--e4); transform-origin: 0 50%; transition: height 200ms ease-out; }
.rayon__texte ul { display: grid; gap: 2px; }
.rayon__texte ul li::before { content: ""; display: inline-block; width: 8px; height: 2px; background: var(--anthracite); margin: 0 10px 0.3em 0; vertical-align: middle; }
@media (hover: hover) and (pointer: fine) {
  .rayon:hover .rayon__photo img { transform: scale(1.03); }
  .rayon:hover .rayon__texte .tablette { height: 12px; }
}
@media (min-width: 900px) {
  .rayon { display: grid; grid-template-columns: 7fr 5fr; gap: var(--e8); align-items: center; }
  .rayon:nth-of-type(even) { grid-template-columns: 5fr 7fr; }
  .rayon:nth-of-type(even) .rayon__photo { order: 2; }
  .rayon__photo { margin: 0; }
  .rayon__texte { padding-top: 0; }
  .rayon + .rayon { margin-top: var(--e9); }
}
/* the reveals: photos uncover from the bottom, the oak tablet draws itself; the text never moves */
.js .rayon__photo { clip-path: inset(100% 0 0 0); }
.js .rayon.is-in .rayon__photo { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--sortie); }
.js .rayon .tablette { transform: scaleX(0); }
.js .rayon.is-in .tablette { transform: none; transition: transform 700ms var(--trace), height 200ms ease-out; }
.js .reveal.is-in, .js .reveal { }

/* 5. The aisle toward the counters, no text */
.allee img { width: 100%; height: 60svh; object-fit: cover; object-position: 50% 55%; }

/* 6. Appointments */
.rdv { border-top: 2px solid var(--tilleul); }
.rdv h2 { max-width: 12em; margin-bottom: var(--e7); }
.rdv__liste li {
  display: grid; gap: var(--e2); padding: var(--e5) 0;
  border-top: 1px solid color-mix(in srgb, var(--platre) 24%, transparent);
}
.rdv__liste li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--platre) 24%, transparent); }
.rdv__liste p { color: color-mix(in srgb, var(--platre) 86%, var(--anthracite)); }
.rdv__liste .lien { justify-self: start; font-weight: 600; }
@media (min-width: 900px) {
  .rdv .cadre { display: grid; grid-template-columns: 4fr 7fr; gap: var(--e9); align-items: start; }
  .rdv h2 { margin-bottom: 0; position: sticky; top: calc(var(--h-barre) + var(--e7)); }
  .rdv__liste li { grid-template-columns: 1fr 1.3fr auto; align-items: baseline; gap: var(--e6); }
}

/* 7. The team */
.equipe h2 { max-width: 13em; margin-bottom: var(--e6); }
.equipe__rangee {
  display: flex; gap: var(--e5); overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge) var(--e4);
  scrollbar-width: thin; scrollbar-color: var(--beton) transparent;
}
.equipe__rangee figure { flex: none; width: 180px; scroll-snap-align: start; }
.equipe__rangee img { width: 180px; height: 270px; object-fit: cover; background: var(--beton); }
.equipe__rangee .prenom { margin-top: var(--e3); font-weight: 600; }
.equipe__rangee .metier { color: var(--encre-douce); font-size: var(--t-petit); }

/* 8. Find us */
.trouver h2 { max-width: 13em; margin-bottom: var(--e6); }
.trouver__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.panneau { background: var(--vert-croix); color: var(--platre); padding: var(--e6) var(--e5); }
.panneau__etat { display: flex; align-items: center; gap: var(--e3); }
.panneau__grand { font-family: var(--f-titre); font-stretch: 75%; font-weight: 600; font-size: var(--t-heure); line-height: 1; font-variant-numeric: tabular-nums; margin: var(--e4) 0 var(--e5); }
.panneau__grand span { display: block; }
.panneau__jours li { display: grid; grid-template-columns: 3.4em 1fr; gap: var(--e3); padding: 2px 0; }
.panneau__jours [data-content-kind="hours"] span + span::before { content: " · "; }
.plus { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -2px; }
.plus path { stroke: var(--platre); stroke-width: 10; fill: none; stroke-linecap: round; }
.panneau__jours li.aujourdhui .jour { display: inline-flex; align-items: center; gap: 4px; }
.trouver__infos { display: grid; gap: var(--e5); margin-top: var(--e6); }
.trouver__tel { font-family: var(--f-titre); font-stretch: 75%; font-weight: 600; font-size: var(--t-heure); line-height: 1; font-variant-numeric: tabular-nums; text-decoration: none; }
@media (min-width: 900px) {
  .trouver .cadre { display: grid; grid-template-columns: 7fr 5fr; gap: 0 var(--e7); align-items: stretch; }
  .trouver h2 { grid-column: 1 / -1; }
  .trouver__photo img { height: 100%; aspect-ratio: auto; }
  .trouver__infos { grid-column: 1 / -1; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--e8); align-items: end; }
}

/* 9. Footer */
.pied { background: var(--anthracite); color: var(--platre); padding: var(--e8) var(--marge) calc(var(--e6) + 84px); }
.pied .cadre { display: grid; gap: var(--e6); }
.pied__marque { display: flex; align-items: center; gap: var(--e3); }
.pied__marque img { width: 48px; height: 48px; }
.pied address { font-style: normal; }
.pied__legal { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); padding-top: var(--e5); border-top: 1px solid color-mix(in srgb, var(--platre) 20%, transparent); }
.pied__legal a { text-decoration: none; }
@media (min-width: 900px) {
  .pied { padding-bottom: var(--e6); }
  .pied .cadre { grid-template-columns: 4fr 3fr 3fr 3fr; }
  .pied__legal { grid-column: 1 / -1; }
}

/* ---------- The action under the thumb, phone only ---------- */
.pouce {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  padding: 12px var(--marge) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--platre) 94%, transparent); border-top: 1px solid var(--beton);
  opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, visibility 0s 200ms;
}
.pouce.vue { opacity: 1; visibility: visible; transition: opacity 200ms ease-out; }
.pouce .btn { width: 100%; }
@media (min-width: 900px) { .pouce { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .rayon__photo { clip-path: none; }
  .js .rayon .tablette { transform: none; }
  .rayon:hover .rayon__photo img { transform: none; }
}
.insecable { white-space: nowrap; }

/* ---------- 10. The asset pages: the prescription sent, the appointment booked. Tokens only, the same button. ---------- */
.page-tete h1 { font-size: var(--t-section); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; max-width: 11em; }
.page-tete > p { margin-top: var(--e4); }
.formulaire { display: grid; gap: var(--e7); margin-top: var(--e7); }
.pas { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--e4); }
.pas legend { padding: 0; margin-bottom: var(--e4); display: grid; grid-template-columns: 40px 1fr; gap: var(--e3); align-items: baseline; }
.pas .num { font-family: var(--f-titre); font-stretch: 75%; font-weight: 600; font-size: var(--t-section); line-height: 1; font-variant-numeric: tabular-nums; }
.champ { display: grid; gap: var(--e2); }
.champ label { font-weight: 600; }
.champ input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; color: inherit; background: var(--platre);
  border: 1px solid var(--beton); border-radius: var(--rayon);
}
.champ input:focus { border-color: var(--vert-croix); box-shadow: inset 0 0 0 1px var(--vert-croix); }
.champ input[aria-invalid="true"] { border-color: var(--anthracite); box-shadow: inset 0 0 0 1px var(--anthracite); }
.aide { font-size: var(--t-petit); color: var(--encre-douce); }
.erreur { font-size: var(--t-petit); font-weight: 600; }
.erreur::before { content: ""; display: inline-block; width: 8px; height: 2px; background: var(--anthracite); margin: 0 10px 0.3em 0; vertical-align: middle; }
.erreur:empty { display: none; }

/* the photo of the prescription */
.depot {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--e4);
  min-height: 132px; padding: var(--e5); cursor: pointer;
  background: color-mix(in srgb, var(--beton) 35%, var(--platre));
  border: 1px solid var(--beton); border-radius: var(--rayon);
}
.depot:focus-within { outline: 2px solid var(--vert-croix); outline-offset: 2px; }
.depot.manque { border-color: var(--anthracite); box-shadow: inset 0 0 0 1px var(--anthracite); }
.depot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.depot__vignette { width: 72px; height: 88px; display: grid; place-items: center; background: var(--platre); border: 1px solid var(--beton); overflow: hidden; }
.depot__vignette img { width: 100%; height: 100%; object-fit: cover; }
.depot__vignette svg { width: 34px; height: 34px; }
.depot__vignette path { fill: none; stroke: var(--anthracite); stroke-width: 10; stroke-linecap: round; }
.depot__texte { display: grid; gap: var(--e1); min-width: 0; }
.depot__nom { overflow-wrap: anywhere; }

/* the times: one pressed at a time, anthracite, never green */
.creneaux__jour + .creneaux__jour { margin-top: var(--e4); }
.creneaux__titre { font-weight: 600; margin-bottom: var(--e2); }
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--e2); }
.creneau {
  position: relative; display: grid; place-items: center; min-height: 48px; padding: 6px 8px; cursor: pointer; text-align: center;
  font-family: var(--f-titre); font-stretch: 75%; font-weight: 600; font-size: var(--t-pratique); line-height: 1.1; font-variant-numeric: tabular-nums;
  background: var(--platre); border: 1px solid var(--beton); border-radius: var(--rayon);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.creneau input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.creneau small { display: block; font-family: var(--f-texte); font-stretch: 100%; font-weight: 400; font-size: var(--t-petit); }
.creneau:has(input:checked) { background: var(--anthracite); color: var(--platre); border-color: var(--anthracite); }
.creneau:has(input:focus-visible) { outline: 2px solid var(--vert-croix); outline-offset: 2px; }
.creneau:has(input:disabled) { cursor: default; color: color-mix(in srgb, var(--anthracite) 40%, var(--platre)); text-decoration: line-through; background: transparent; }
@media (hover: hover) and (pointer: fine) { .creneau:not(:has(input:checked, input:disabled)):hover { border-color: var(--anthracite); } }
.jours { display: flex; gap: var(--e2); overflow-x: auto; margin: 0 calc(-1 * var(--marge)); padding: 2px var(--marge) var(--e2); scrollbar-width: thin; scrollbar-color: var(--beton) transparent; }
.jours .creneau { flex: none; min-width: 84px; }
.pret { font-weight: 600; }
.formulaire > .btn { width: 100%; }

/* the answer on the page: the cross closes, the text says it */
.recu { background: var(--anthracite); color: var(--platre); padding: var(--e6) var(--e5); display: grid; gap: var(--e4); margin-top: var(--e7); }
.recu[hidden] { display: none; }
.recu, .resa { scroll-margin-top: var(--h-barre); }
.recu:focus { outline: none; }
.recu__croix { width: 64px; height: 64px; fill: none; stroke-linecap: round; stroke-linejoin: miter; }
.recu__croix .contour { stroke: var(--vert-croix); stroke-width: 22; }
.recu__croix .tiret { stroke: var(--tilleul); stroke-width: 22; }
.moment .recu__croix .contour { stroke-dasharray: 1 1; animation: trace 600ms var(--trace) both; }
.moment .recu__croix .tiret { animation: tiret 300ms var(--sortie) 600ms both; }
.recu h2 { font-size: var(--t-bloc); line-height: 1.2; }
.recu__heure { font-family: var(--f-titre); font-stretch: 75%; font-weight: 600; font-size: var(--t-heure); line-height: 1; font-variant-numeric: tabular-nums; }
.recu__liste { display: grid; gap: var(--e2); padding: var(--e4) 0; border-top: 1px solid color-mix(in srgb, var(--platre) 24%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--platre) 24%, transparent); }
.recu__liste div { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--e3); }
.recu__liste dt { color: color-mix(in srgb, var(--platre) 70%, var(--anthracite)); }
.recu__liste dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.recu__message { border-left: 2px solid var(--tilleul); padding-left: var(--e4); color: color-mix(in srgb, var(--platre) 86%, var(--anthracite)); }
.recu__message strong { color: var(--platre); display: block; }
.recu__suite { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); }
.recu .lien { background-image: linear-gradient(var(--tilleul), var(--tilleul)), linear-gradient(color-mix(in srgb, var(--platre) 40%, transparent), color-mix(in srgb, var(--platre) 40%, transparent)); font-weight: 600; }
.recu :focus-visible { outline-color: var(--tilleul); }

/* Envoyer mon ordonnance */
.envoi__photo { display: none; }
@media (min-width: 700px) { .pas > :not(legend) { margin-left: 52px; } .formulaire > .btn { width: auto; justify-self: start; } }
@media (min-width: 900px) {
  .envoi .cadre { display: grid; grid-template-columns: 5fr 6fr; gap: var(--e9); align-items: start; }
  .envoi__photo { display: block; position: sticky; top: calc(var(--h-barre) + var(--e6)); }
}

/* Prendre rendez-vous */
.rdv .page-tete p { color: color-mix(in srgb, var(--platre) 86%, var(--anthracite)); }
.rdv .page-tete { margin-bottom: var(--e7); }
.rdv__duree { margin-top: var(--e2); color: var(--platre); }
.rdv__liste p.rdv__duree { color: var(--platre); }
button.lien { font: inherit; font-weight: 600; color: inherit; border: 0; background-color: transparent; padding: 0 0 2px; cursor: pointer; justify-self: start; }
.rdv__liste li.choisi { box-shadow: inset 2px 0 0 var(--tilleul); padding-left: var(--e4); }
.rdv__liste li.choisi button.lien { background-size: 100% 2px, 100% 1px; }
.rdv__doctolib { margin-top: var(--e5); }
.resa h2 { max-width: 14em; }
.resa h2 + p { margin-top: var(--e3); }
@media (min-width: 900px) {
  .rdv .page-tete { margin-bottom: 0; position: sticky; top: calc(var(--h-barre) + var(--e7)); }
  .resa .cadre { display: grid; grid-template-columns: 4fr 7fr; gap: var(--e9); align-items: start; }
  .resa .formulaire, .resa .recu { margin-top: 0; }
  .jours { margin: 0; padding: 2px 2px var(--e2); flex-wrap: wrap; }
}