@charset "utf-8";

/* Clinique Lumen — a demonstration site for matiscale.com.
 *
 * The world in one line: porcelain and consultation green, square corners,
 * hairlines instead of cards, and exactly one warm value in the whole system
 * which is only ever allowed to behave like light.
 */

/* ------------------------------------------------------------- faces */

@font-face {
  font-family: 'Sentient';
  src: url('/assets/fonts/sentient-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sentient';
  src: url('/assets/fonts/sentient-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sentient';
  src: url('/assets/fonts/sentient-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/switzer-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/switzer-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/switzer-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------ tokens */

:root {
  color-scheme: light;

  /* Ground. Cool, faintly green-grey. Cream was the thing to avoid. */
  --porcelaine: #edeee9;
  --encre: #14201c;
  --encre-2: #56635d;
  --trait: #d2d6cd;
  --trait-fort: #b9c0b5;

  /* The field. Two full-bleed bands carry it. */
  --vert: #1b322b;
  --vert-haut: #274a3f;
  --sur-vert: #e7ebe4;
  --sur-vert-2: #a3b3a8;
  --trait-vert: #35544a;

  /* The only warm value in the system. It is light, never a colour. */
  --lumiere: #f6e6c8;
  --lumiere-vive: #fff3da;

  --serif: 'Sentient', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Switzer', ui-sans-serif, 'Segoe UI', Helvetica, Arial, sans-serif;

  --marge: clamp(22px, 4.4vw, 64px);

  /* The reference's formal language: soft containers, pill actions, and
     fields that stay inset from the viewport edge. */
  --r: 4px;
  --r-carte: 22px;
  --r-image: 18px;
  --r-bande: 34px;
  --r-pilule: 999px;

  /* Exponential ease-out. Everything that moves uses this or nothing. */
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);

  /* One drawn glyph, used only where a field needs attention. */
  --signe-alerte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.4v5.6M12 16.6h.01'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- fondations */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--trait-fort) var(--porcelaine);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--porcelaine);
  color: var(--encre);
  font: 400 17px/1.65 var(--sans);
  letter-spacing: -0.006em;
  font-feature-settings: 'ss01' 1;
  text-rendering: optimizeLegibility;
}

/* The parts we did not draw still belong to the design. */
::selection { background: var(--vert); color: var(--lumiere); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--porcelaine); }
::-webkit-scrollbar-thumb {
  background: var(--trait-fort);
  border: 3px solid var(--porcelaine);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--encre-2); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
  border-radius: var(--r);
}

.sur-vert :where(a, button, input, textarea, select):focus-visible {
  outline-color: var(--lumiere);
}

/* display on a component must never outrank the hidden attribute. */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.saut-lien {
  position: absolute; left: 12px; top: -60px; z-index: 90;
  background: var(--vert); color: var(--sur-vert);
  padding: 12px 18px; font: 500 14px/1 var(--sans);
  transition: top 0.2s var(--sortie);
}
.saut-lien:focus { top: 12px; }

.hors-ecran {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------- typographie */

.titre {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.02;
  font-size: clamp(38px, 5vw, 72px);
  text-wrap: balance;
}

.titre-section {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.06;
  font-size: clamp(30px, 3.2vw, 46px);
  text-wrap: balance;
}

.lede {
  font-size: clamp(17.5px, 1.42vw, 20.5px);
  line-height: 1.55;
  letter-spacing: -0.009em;
  color: var(--encre-2);
  max-width: 30em;
  text-wrap: pretty;
}

.etiquette {
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-2);
}

.chiffres { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Links carry the light: the underline is lit from the left on hover. */
.lien {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--encre), var(--encre));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 3px;
  transition: background-size 0.45s var(--sortie), color 0.3s var(--sortie);
}
.lien:hover {
  background-image: linear-gradient(90deg, var(--lumiere-vive), var(--vert-haut) 55%, var(--vert));
  background-size: 100% 2px;
}
.sur-vert .lien {
  background-image: linear-gradient(90deg, var(--trait-vert), var(--trait-vert));
}
.sur-vert .lien:hover {
  background-image: linear-gradient(90deg, var(--lumiere-vive), var(--lumiere) 60%, var(--sur-vert-2));
}

/* ------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px 16px;
  border: 1px solid var(--vert);
  border-radius: var(--r-pilule);
  background: var(--vert);
  color: var(--sur-vert);
  font: 500 15px/1 var(--sans);
  letter-spacing: 0.004em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s var(--sortie), box-shadow 0.4s var(--sortie);
}
/* Hover lights the button from its left edge, the same gesture as the fields. */
.bouton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(246, 230, 200, 0.26), rgba(246, 230, 200, 0) 58%);
  opacity: 0;
  transition: opacity 0.5s var(--sortie);
}
.bouton:hover { background: var(--vert-haut); box-shadow: 0 10px 26px -14px rgba(20, 32, 28, 0.7); }
.bouton:hover::after { opacity: 1; }
.bouton:active { transform: translateY(1px); }

.bouton--clair {
  background: transparent; color: var(--encre); border-color: var(--trait-fort);
}
.bouton--clair:hover { background: transparent; border-color: var(--encre); box-shadow: none; }
.bouton--clair::after { display: none; }

.bouton-texte {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 15px/1 var(--sans);
  color: var(--encre);
  text-decoration: none;
  padding: 15px 2px 16px;
  position: relative;
}
.bouton-texte::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 11px; height: 1px;
  background: var(--trait-fort);
  transform-origin: left;
  transition: transform 0.5s var(--sortie), background-color 0.5s var(--sortie);
}
.bouton-texte:hover::before {
  background: linear-gradient(90deg, var(--vert), var(--vert-haut) 60%, var(--lumiere));
  transform: scaleY(2);
}
.bouton-texte svg { transition: transform 0.5s var(--sortie); }
.bouton-texte:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------- ruban */

.ruban {
  background: var(--vert);
  color: var(--sur-vert-2);
  padding: 11px var(--marge) 12px;
  text-align: center;
  font: 500 12px/1.35 var(--sans);
  letter-spacing: 0.055em;
}
.ruban b { color: var(--lumiere); font-weight: 500; }
.ruban-court { display: none; }
.ruban a {
  color: var(--lumiere); text-decoration: none;
  border-bottom: 1px solid rgba(246, 230, 200, 0.35);
  padding-bottom: 1px;
  transition: border-color 0.3s var(--sortie);
}
.ruban a:hover { border-color: var(--lumiere); }

/* ------------------------------------------------------------ entete */

.entete {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--porcelaine) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--sortie), background-color 0.4s var(--sortie);
}
.entete[data-decolle='true'] {
  border-bottom-color: var(--trait);
  background: color-mix(in srgb, var(--porcelaine) 94%, transparent);
}
.entete-rang {
  display: flex; align-items: center; gap: 20px;
  height: 76px;
  padding: 0 var(--marge);
}

.marque { display: flex; align-items: center; gap: 12px; padding-block: 6px; text-decoration: none; color: var(--encre); }
.marque-signe { flex: none; display: block; }
.marque-nom {
  font-family: var(--serif); font-weight: 500; font-size: 20px;
  letter-spacing: 0.006em; line-height: 1; white-space: nowrap;
}

.tag-demo {
  flex: none;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vert);
  border: 1px solid var(--trait-fort);
  padding: 6px 10px 5px;
  border-radius: var(--r-pilule);
  white-space: nowrap;
}

.nav-site { margin: 0 auto; display: flex; align-items: center; gap: 26px; }
.nav-site a {
  font: 500 15px/1 var(--sans);
  color: var(--encre-2); text-decoration: none;
  padding: 6px 0;
  position: relative;
  transition: color 0.3s var(--sortie);
}
.nav-site a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--lumiere), var(--vert));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--sortie);
}
.nav-site a:hover { color: var(--encre); }
.nav-site a:hover::after { transform: scaleX(1); }

.entete-fin { display: flex; align-items: center; gap: 16px; }
.tel-entete {
  display: inline-flex; align-items: center; gap: 8px;
  padding-block: 6px;
  font: 600 15px/1 var(--sans);
  color: var(--encre); text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--sortie);
}
.tel-entete svg { color: var(--encre-2); transition: color 0.3s var(--sortie); }
.tel-entete:hover, .tel-entete:hover svg { color: var(--vert-haut); }

.langues { display: flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--sans); letter-spacing: 0.08em; }
.langues a { display: inline-block; padding: 6px 3px; color: var(--encre-2); text-decoration: none; transition: color 0.3s var(--sortie); }
.langues a:hover { color: var(--encre); }
.langues [aria-current] { color: var(--encre); }
.langues span { color: var(--trait-fort); }

.menu-bouton { display: none; }

/* ------------------------------------------------------- menu mobile */

.menu-mobile {
  position: fixed; inset: 0; z-index: 70;
  background: var(--porcelaine);
  padding: 130px var(--marge) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto;
}
.menu-mobile nav { display: flex; flex-direction: column; }
.menu-mobile nav a {
  font-family: var(--serif); font-size: 30px; font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--encre); text-decoration: none;
  padding: 17px 0;
  border-bottom: 1px solid var(--trait);
}
.menu-mobile nav a:first-child { border-top: 1px solid var(--trait); }
.menu-mobile nav a:focus-visible { outline-offset: -4px; }
.menu-mobile-pied { display: flex; flex-direction: column; gap: 20px; padding-top: 36px; }
.menu-mobile-pied .bouton { justify-content: center; }
.tel-menu {
  display: inline-block; padding-block: 4px;
  font: 600 19px/1 var(--sans); color: var(--encre); text-decoration: none;
  letter-spacing: 0.01em;
}

/* -------------------------------------------------------------- hero */

/* Full-bleed photograph with the words over it, the way the reference
 * opens; the facts strip along the bottom is ours. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  height: calc(100svh - 116px);
  max-height: 880px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
.hero-fond {
  position: absolute; inset: 0;
  width: 100%; height: 116%; top: -8%;
  object-fit: cover; object-position: 76% 30%;
  z-index: -2;
}
.hero-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, rgba(20, 32, 28, 0.86) 4%, rgba(20, 32, 28, 0.58) 38%,
      rgba(20, 32, 28, 0.16) 62%, rgba(20, 32, 28, 0.3) 100%),
    linear-gradient(180deg, rgba(20, 32, 28, 0.42), rgba(20, 32, 28, 0) 28%,
      rgba(20, 32, 28, 0) 58%, rgba(20, 32, 28, 0.62));
}

.hero-corps {
  padding: 0 var(--marge) clamp(38px, 4.6vw, 62px);
  max-width: 1440px; width: 100%;
  margin-inline: auto;
  color: var(--porcelaine);
}
.hero h1 { max-width: 15ch; color: var(--porcelaine); }
.hero .lede--hero {
  margin-top: 24px;
  max-width: 30em;
  color: color-mix(in srgb, var(--porcelaine) 84%, var(--vert));
}
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.hero .bouton { background: var(--lumiere); border-color: var(--lumiere); color: var(--vert); }
.hero .bouton:hover { background: var(--lumiere-vive); border-color: var(--lumiere-vive); }

/* Eyebrow with a lit dot — the reference's, and pinned by the brief. */
.sourcil {
  display: flex; align-items: center; gap: 11px;
  font: 500 13px/1.3 var(--sans);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--porcelaine) 82%, var(--vert));
  margin-bottom: 22px;
}
.sourcil-point {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--lumiere);
}
.sourcil--centre { justify-content: center; color: var(--sur-vert-2); margin-bottom: 16px; }

/* The facts strip: the page's only numbers before the first scroll. */
.faits {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px clamp(20px, 3vw, 52px);
  max-width: 1440px; width: 100%;
  margin-inline: auto;
  padding: 22px var(--marge) 24px;
  border-top: 1px solid rgba(237, 238, 233, 0.22);
  color: var(--porcelaine);
}
.faits dt { margin-bottom: 7px; color: color-mix(in srgb, var(--porcelaine) 72%, var(--vert)); }
.faits dd { font: 500 15px/1.3 var(--sans); letter-spacing: -0.004em; color: var(--porcelaine); }

.bouton-texte--clair { color: var(--porcelaine); }
.bouton-texte--clair::before { background: rgba(237, 238, 233, 0.42); }
.bouton-texte--clair:hover::before {
  background: linear-gradient(90deg, var(--lumiere), var(--lumiere-vive) 60%, rgba(246, 230, 200, 0.4));
}

/* ------------------------------------------------------------ mobile */

@media (max-width: 1180px) {
  .nav-site { gap: 22px; }
  .nav-site a { font-size: 14px; }
}

@media (max-width: 900px) {
  .nav-site, .entete-fin { display: none; }
  .menu-bouton {
    display: inline-flex; align-items: center; gap: 9px;
    margin-left: auto;
    background: none; border: 1px solid var(--trait-fort); border-radius: var(--r-pilule);
    padding: 10px 15px;
    font: 500 13px/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--encre); cursor: pointer;
  }
  .menu-bouton .icone-fermer, .menu-bouton .mot-fermer { display: none; }
  .menu-bouton[aria-expanded='true'] .icone-menu,
  .menu-bouton[aria-expanded='true'] .mot-menu { display: none; }
  .menu-bouton[aria-expanded='true'] .icone-fermer { display: block; }
  .menu-bouton[aria-expanded='true'] .mot-fermer { display: inline; }

  .hero .lede { margin-top: 22px; }
  .hero-actions { margin-top: 30px; gap: 20px; }
  .faits { margin-top: 36px; gap: 12px 34px; }
}

@media (max-width: 560px) {
  .ruban-court { display: inline; }
  .ruban-long { display: none; }
  .entete-rang { height: 64px; gap: 10px; padding-right: max(14px, calc(var(--marge) - 8px)); }
  .marque { gap: 9px; }
  .marque-signe { width: 22px; height: 22px; }
  .marque-nom { font-size: 17.5px; }
  .tag-demo { font-size: 11px; letter-spacing: 0.1em; padding: 5px 7px 4px; }
  .tag-demo .tag-long { display: none; }
  .menu-bouton { padding: 9px 11px; font-size: 0; gap: 0; }
  .menu-bouton svg { width: 17px; height: 12px; }
  .ruban { font-size: 12px; letter-spacing: 0.035em; padding: 10px var(--marge) 11px; }
  .hero .lede { font-size: 17px; margin-top: 20px; }
  .hero-actions { gap: 12px; margin-top: 26px; }
  .hero-actions .bouton { width: 100%; justify-content: center; }
  .hero-actions .bouton-texte { padding-top: 4px; padding-bottom: 10px; }
  .faits { margin-top: 24px; padding-top: 20px; gap: 14px 32px; }
}


/* =====================================================================
   Bands
   ===================================================================== */

.enveloppe {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--marge);
}
.bande > .enveloppe { max-width: 1312px; padding-inline: 0; }

.bande { padding: clamp(62px, 8.4vw, 124px) var(--marge); position: relative; }
.bande--vert { background: var(--vert); color: var(--sur-vert); overflow: hidden; }
.bande--vert .titre-section,
.bande--vert .etiquette { color: var(--sur-vert); }
.bande--vert .etiquette { color: var(--sur-vert-2); }

.bande-tete { max-width: 44rem; }
.bande-tete .lede { margin-top: 22px; }
.bande-tete--centre { max-width: 40rem; margin-inline: auto; text-align: center; }
.bande-tete--centre .lede { margin-inline: auto; }

/* La lumière passe: one slow warm sweep the first time a field is reached. */
.bande--vert::before {
  content: '';
  position: absolute; inset: -12% -34%;
  background: linear-gradient(104deg,
    rgba(246, 230, 200, 0) 34%,
    rgba(246, 230, 200, 0.155) 47%,
    rgba(246, 230, 200, 0.045) 57%,
    rgba(246, 230, 200, 0) 68%);
  transform: translate3d(-72%, 0, 0);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.bande--vert > * { position: relative; z-index: 1; }
[data-lumiere][data-eclaire='true']::before { animation: passage 2s var(--sortie) forwards; }
@keyframes passage {
  0%   { transform: translate3d(-72%, 0, 0); opacity: 0; }
  14%  { opacity: 1; }
  100% { transform: translate3d(72%, 0, 0); opacity: 0; }
}

/* =====================================================================
   Motion. Nothing here runs before JS confirms the visitor wants it.
   ===================================================================== */

html.js-motion [data-monte] {
  transition: opacity 0.85s var(--sortie), transform 0.95s var(--sortie);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
html.js-motion [data-monte='attente'] { opacity: 0.001; transform: translateY(24px); }
html.js-motion [data-monte='fait'] { opacity: 1; transform: none; will-change: auto; }

html.js-motion [data-cadre] img {
  clip-path: inset(0 0 100% 0);
  scale: 1.06;
  transition: clip-path 1.15s var(--sortie), scale 1.6s var(--sortie);
}
html.js-motion [data-cadre][data-revele='true'] img { clip-path: inset(0 0 0 0); scale: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-monte],
  html.js-motion [data-cadre] img {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; scale: 1 !important; transition: none !important;
  }
}

/* =====================================================================
   Bandeau
   ===================================================================== */

.bandeau {
  overflow: hidden;
  border-block: 1px solid var(--trait);
  padding-block: 19px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bandeau-piste { display: flex; width: max-content; animation: defile 58s linear infinite; }
.bandeau:hover .bandeau-piste, .bandeau:focus-within .bandeau-piste { animation-play-state: paused; }
.bandeau-suite { display: flex; align-items: center; gap: 32px; padding-right: 32px; }
.bandeau-suite li {
  font-family: var(--serif); font-size: 21px; font-weight: 400;
  letter-spacing: -0.012em; white-space: nowrap; color: var(--encre);
}
.bandeau-point {
  width: 7px; height: 7px; flex: none;
  border: 1px solid var(--trait-fort); border-radius: 50%;
  border-top-color: var(--encre-2);
}
@keyframes defile { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .bandeau-piste { animation: none; } }

/* =====================================================================
   Les soins
   ===================================================================== */

.soins { margin-top: clamp(44px, 5vw, 72px); border-top: 1px solid var(--trait); }

.soin {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(32px, 5vw, 88px);
  padding: clamp(30px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--trait);
  position: relative;
}
/* The rule under a row lights when the row is read. */
.soin::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--vert), var(--lumiere) 78%, transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s var(--sortie);
}
.soin:hover::after { transform: scaleX(1); }

.soin-phrase {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.15vw, 31px);
  line-height: 1.18; letter-spacing: -0.017em;
  text-wrap: balance;
  transition: color 0.5s var(--sortie);
}
.soin-reponse > p { max-width: 38em; }
.soin-reponse p + p { margin-top: 14px; }

.soin-reponse .soin-details {
  max-width: none;
  margin-top: 18px;
  font: 500 13px/1.5 var(--sans);
  letter-spacing: 0.012em;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.soin-details span { color: var(--trait-fort); padding: 0 3px; }
.soin-details b { color: var(--encre); font-weight: 600; }
.soin-details sup { font-size: 0.72em; vertical-align: 0.42em; }

/* =====================================================================
   La praticienne
   ===================================================================== */

.prat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: stretch;
}
/* A photograph column holds the row's height rather than floating in it. */
.prat-image { position: relative; overflow: hidden; min-height: 540px; border-radius: var(--r-image); }
.prat-image img { width: 100%; height: 112%; object-fit: cover; }

.prat-texte { padding-top: 4px; }
.prat-corps { margin-top: 26px; max-width: 40em; color: var(--sur-vert); }
.prat-corps p { color: color-mix(in srgb, var(--sur-vert) 88%, var(--vert)); }
.prat-corps p + p { margin-top: 17px; }

.citation {
  margin-top: 34px; padding: 26px 0 26px 26px;
  border-left: 1px solid var(--trait-vert);
  position: relative;
}
.citation::before {
  content: '';
  position: absolute; left: -1px; top: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, var(--lumiere), rgba(246, 230, 200, 0));
}
.citation p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2vw, 28px); line-height: 1.3; letter-spacing: -0.015em;
  color: var(--lumiere);
  max-width: 22em;
}

.titres { margin-top: 40px; border-top: 1px solid var(--trait-vert); }
.titres > div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 24px;
  padding: 14px 0; border-bottom: 1px solid var(--trait-vert);
}
.titres dt { font: 500 14.5px/1.4 var(--sans); color: var(--sur-vert); }
.titres dd { font: 400 14.5px/1.4 var(--sans); color: var(--sur-vert-2); font-variant-numeric: tabular-nums; }

.prat-note {
  margin-top: 24px;
  font: 500 13.5px/1.5 var(--sans); letter-spacing: 0.03em;
  color: var(--sur-vert-2);
}

/* =====================================================================
   La première visite
   ===================================================================== */

.etapes {
  margin-top: clamp(46px, 5vw, 76px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 40px);
}
.etape { position: relative; padding-top: 26px; border-top: 1px solid var(--trait); }
.etape::before {
  content: '';
  position: absolute; left: 0; top: -4px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--vert);
  box-shadow: 0 0 0 4px var(--porcelaine);
  z-index: 1;
}
.etape::after {
  content: '';
  position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, var(--vert), var(--lumiere) 62%,
    color-mix(in srgb, var(--lumiere) 0%, transparent));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--sortie);
  transition-delay: var(--d, 0s);
  pointer-events: none;
}
.etape[data-monte='fait']::after { transform: scaleX(1); }
.etape-temps {
  font: 600 12.5px/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--encre-2);
}
.etape-titre {
  margin-top: 13px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.2; letter-spacing: -0.016em;
}
.etape p:last-child { margin-top: 11px; font-size: 16px; line-height: 1.62; color: var(--encre-2); }
.etape-regle {
  margin-top: 14px !important; padding-top: 14px;
  border-top: 1px solid var(--trait);
  color: var(--encre) !important; font-weight: 500;
}

/* =====================================================================
   Rendez-vous
   ===================================================================== */

.rdv {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: stretch;
}
.lede--vert { color: var(--sur-vert-2); margin-top: 20px; }

.tel-grand {
  display: inline-flex; align-items: center; gap: 13px;
  margin-top: 32px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(28px, 2.9vw, 40px); letter-spacing: -0.02em; line-height: 1;
  color: var(--lumiere); text-decoration: none;
  transition: color 0.4s var(--sortie);
}
.tel-grand svg { color: var(--sur-vert-2); transition: color 0.4s var(--sortie), transform 0.5s var(--sortie); }
.tel-grand:hover { color: var(--lumiere-vive); }
.tel-grand:hover svg { color: var(--lumiere); transform: rotate(-8deg); }
.tel-note { margin-top: 14px; font: 400 14px/1.55 var(--sans); color: var(--sur-vert-2); max-width: 30em; }

.formulaire {
  margin-top: 44px; padding-top: 34px;
  border-top: 1px solid var(--trait-vert);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 32px;
}
.champ--large { grid-column: 1 / -1; }
.champ-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.champ label { display: block; margin-bottom: 12px; color: var(--sur-vert-2); }
.champ-tete label { margin-bottom: 0; }
.facultatif {
  font: 400 12px/1 var(--sans); letter-spacing: 0.015em;
  color: var(--sur-vert-2);
}

.champ input, .champ textarea, .champ select {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--trait-vert);
  border-radius: 0;
  padding: 9px 0 11px;
  color: var(--sur-vert);
  font: 400 16.5px/1.5 var(--sans);
  letter-spacing: -0.004em;
  transition: border-color 0.4s var(--sortie), box-shadow 0.4s var(--sortie);
}
.champ textarea { resize: vertical; min-height: 46px; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--sur-vert-2); }
.champ input:hover, .champ textarea:hover, .champ select:hover { border-bottom-color: var(--sur-vert-2); }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none;
  border-bottom-color: var(--lumiere);
  box-shadow: 0 1px 0 0 var(--lumiere);
}
.champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible {
  outline: 2px solid var(--lumiere);
  outline-offset: 3px;
}

.select-enveloppe { position: relative; display: block; }
.select-enveloppe select { appearance: none; padding-right: 26px; cursor: pointer; }
.select-enveloppe svg {
  position: absolute; right: 2px; top: 50%; margin-top: -3px;
  color: var(--sur-vert-2); pointer-events: none;
}
.select-enveloppe option { background: var(--vert); color: var(--sur-vert); }

.champ-erreur {
  margin-top: 10px; font: 500 13px/1.45 var(--sans);
  color: var(--lumiere);
  display: none;
  position: relative;
  padding-left: 23px;
}
.champ-erreur::before {
  content: '';
  position: absolute; left: 0; top: 1px;
  width: 16px; height: 16px;
  background: var(--lumiere);
  -webkit-mask: var(--signe-alerte) center / contain no-repeat;
  mask: var(--signe-alerte) center / contain no-repeat;
}
.champ[data-invalide='true'] input { border-bottom-color: var(--lumiere); border-bottom-width: 2px; }
.champ[data-invalide='true'] .champ-erreur { display: block; }

.formulaire-pied {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 22px 28px; flex-wrap: wrap;
  margin-top: 6px;
}
.bouton--sur-vert {
  background: var(--lumiere); border-color: var(--lumiere); color: var(--vert);
}
.bouton--sur-vert:hover { background: var(--lumiere-vive); border-color: var(--lumiere-vive); }
.bouton--sur-vert::after {
  background: linear-gradient(100deg, color-mix(in srgb, var(--porcelaine) 55%, transparent),
    color-mix(in srgb, var(--porcelaine) 0%, transparent) 56%);
}
.formulaire-note { font: 400 13px/1.5 var(--sans); color: var(--sur-vert-2); }

.formulaire-reponse {
  margin-top: 44px; padding: 34px 36px 36px;
  border-radius: var(--r-carte);
  border: 1px solid var(--trait-vert);
  background: color-mix(in srgb, var(--vert-haut) 55%, transparent);
  font: 400 15.5px/1.65 var(--sans); color: var(--sur-vert);
  max-width: 38em;
}
.reponse-titre {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.018em;
  color: var(--lumiere);
  margin-bottom: 14px !important;
}
.reponse-actions {
  display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap;
  margin-top: 26px;
}
.reponse-actions .lien { font-size: 14.5px; color: var(--sur-vert-2); }

.rdv-image { position: relative; overflow: hidden; min-height: 540px; border-radius: var(--r-image); }
.rdv-image img { width: 100%; height: 112%; object-fit: cover; }
.rdv-citation {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 26px 24px;
  background: linear-gradient(180deg, rgba(20, 32, 28, 0), rgba(20, 32, 28, 0.86) 42%);
  color: var(--porcelaine);
}
.rdv-citation p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 18px; line-height: 1.34; letter-spacing: -0.012em;
}
.rdv-citation-nom {
  display: block; margin-top: 12px;
  font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lumiere);
}

/* =====================================================================
   Le cabinet
   ===================================================================== */

.cab {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: stretch;
}
.cab-image { position: relative; overflow: hidden; min-height: 540px; border-radius: var(--r-image); }
.cab-image img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 42%; }
.plaque--cab { max-width: 24rem; }

.cab-acces { margin-top: 30px; }
.acces { margin-top: 18px; border-top: 1px solid var(--trait); }
.acces li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 15px;
  align-items: start;
  padding: 15px 0; border-bottom: 1px solid var(--trait);
  font-size: 16px; line-height: 1.55; color: var(--encre-2);
}
.acces svg { width: 20px; height: 20px; margin-top: 2px; color: var(--encre); }
.acces b { color: var(--encre); font-weight: 600; }

.cab-heures { margin-top: 42px; }
.heures-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.statut {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 12.5px/1 var(--sans); letter-spacing: 0.04em; color: var(--encre);
}
.statut-point {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--trait-fort);
}
.statut[data-ouvert='true'] .statut-point { background: var(--vert-haut); }

.heures { width: 100%; border-collapse: collapse; margin-top: 16px; }
.heures tr { border-bottom: 1px solid var(--trait); }
.heures tr:first-child { border-top: 1px solid var(--trait); }
.heures th, .heures td { padding: 12px 0; text-align: left; font-weight: 400; font-size: 16px; }
.heures th { color: var(--encre); width: 42%; }
.heures td { color: var(--encre-2); }
.heures tr[data-aujourdhui] th, .heures tr[data-aujourdhui] td { color: var(--encre); font-weight: 500; }
.heures tr[data-aujourdhui] {
  position: relative;
  background: linear-gradient(90deg, rgba(246, 230, 200, 0.72), rgba(246, 230, 200, 0) 72%);
  box-shadow: -14px 0 0 0 rgba(246, 230, 200, 0.72), 14px 0 0 0 rgba(246, 230, 200, 0);
}

/* =====================================================================
   Pied
   ===================================================================== */

.pied { background: var(--encre); color: var(--sur-vert-2); padding-top: clamp(56px, 6vw, 92px); }
.pied-haut {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(44px, 5vw, 72px);
}
.marque--pied { color: var(--porcelaine); }
.pied-ligne { margin-top: 18px; font: 400 14.5px/1.6 var(--sans); color: var(--sur-vert-2); }
.pied-heures-titre { display: block; margin-top: 26px; color: color-mix(in srgb, var(--sur-vert-2) 78%, var(--encre)); }
.pied-heures { margin-top: 14px; font: 400 14.5px/1.7 var(--sans); color: var(--sur-vert-2); }
.pied-colonne h2 { margin-bottom: 18px; color: color-mix(in srgb, var(--sur-vert-2) 78%, var(--encre)); }
.pied-colonne ul { display: flex; flex-direction: column; gap: 7px; }
.pied-colonne li { font: 400 14.5px/1.5 var(--sans); color: var(--sur-vert-2); }
.pied-colonne li .lien { display: inline-block; padding-block: 4px 6px; }
.pied .lien {
  color: var(--porcelaine);
  background-image: linear-gradient(90deg, rgba(163, 179, 168, 0.4), rgba(163, 179, 168, 0.4));
}
.pied .lien:hover { background-image: linear-gradient(90deg, var(--lumiere-vive), var(--lumiere) 60%, rgba(246, 230, 200, 0.3)); }

.pied-bas {
  border-top: 1px solid rgba(163, 179, 168, 0.22);
  padding-block: 26px 34px;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 18px clamp(32px, 4vw, 64px);
  align-items: start;
}
.pied-avis { font: 400 12.5px/1.65 var(--sans); color: color-mix(in srgb, var(--sur-vert-2) 82%, var(--encre)); max-width: 62em; }
.pied-avis b { color: var(--lumiere); font-weight: 600; }
.pied-signature { font: 400 12.5px/1.65 var(--sans); color: var(--sur-vert-2); }
.pied-lang { display: block; margin-top: 5px; }
.pied-lang .lien { display: inline-block; padding-block: 4px 6px; }

/* =====================================================================
   Adaptations
   ===================================================================== */

@media (max-width: 1180px) {
  .soin { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .soin-phrase { max-width: 22ch; }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px clamp(24px, 3vw, 44px); }
  .res-tete { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pied-haut { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
  .pied-colonne--contact { grid-column: 2 / -1; }
}

@media (max-width: 900px) {
  .prat, .rdv, .cab { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .prat-image, .cab-image { min-height: 0; aspect-ratio: 3 / 2; }
  .rdv-image { min-height: 0; aspect-ratio: 4 / 5; max-height: 78vh; }
  .cab-image { order: -1; }
  .bandeau-suite li { font-size: 18px; }
  .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
  .pied-colonne--contact { grid-column: auto; }
  .pied-bas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .etapes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .formulaire { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .heures th, .heures td { font-size: 15px; }
  .pied-haut { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* Parallax slack, split top and bottom so no edge can ever show. */
.prat-image img, .rdv-image img, .cab-image img { position: relative; top: -6%; }

/* =====================================================================
   Bands, rounded and inset — the reference's field language
   ===================================================================== */

.bande--ronde {
  margin-inline: clamp(8px, 0.8vw, 12px);
  border-radius: var(--r-bande);
}
.centre { text-align: center; margin-inline: auto; }
.titre-section.centre { max-width: 18ch; }
.lede.centre { max-width: 34em; margin-top: 20px; }

/* =====================================================================
   Les soins — two cards, tone on tone
   ===================================================================== */

.cartes {
  margin-top: clamp(42px, 4.6vw, 66px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 32px);
}
.carte {
  display: flex; flex-direction: column;
  background: var(--vert-haut);
  border-radius: var(--r-carte);
  padding: clamp(28px, 2.6vw, 40px) clamp(26px, 2.4vw, 38px) clamp(30px, 2.6vw, 40px);
  transition: transform 0.6s var(--sortie), background-color 0.6s var(--sortie);
}
.carte:hover { transform: translateY(-4px); background: color-mix(in srgb, var(--vert-haut) 88%, var(--lumiere)); }
.carte-titre {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.1vw, 30px); line-height: 1.14; letter-spacing: -0.018em;
  color: var(--sur-vert);
  text-wrap: balance;
}
.carte > p {
  margin-top: 18px;
  color: color-mix(in srgb, var(--sur-vert) 86%, var(--vert));
  max-width: 34em;
}
.carte-liste { margin-top: 22px; border-top: 1px solid var(--trait-vert); }
.carte-liste li {
  padding: 11px 0; border-bottom: 1px solid var(--trait-vert);
  font: 400 14.5px/1.45 var(--sans);
  color: color-mix(in srgb, var(--sur-vert) 82%, var(--vert-haut));
  font-variant-numeric: tabular-nums;
}
.carte-liste sup { font-size: 0.72em; vertical-align: 0.42em; }
.carte-prix {
  margin-top: auto; padding-top: 26px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 1.9vw, 27px); letter-spacing: -0.018em; line-height: 1;
  color: var(--lumiere);
}
.carte .bouton { margin-top: 22px; align-self: flex-start; }

.bouton--petit { padding: 11px 20px 12px; font-size: 14px; }

/* =====================================================================
   Les tarifs — rating pill and three price cards
   ===================================================================== */

.pastille {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 26px auto 0;
  padding: 11px 20px 12px;
  border-radius: var(--r-pilule);
  background: color-mix(in srgb, var(--vert-haut) 70%, transparent);
  border: 1px solid var(--trait-vert);
  font: 500 13.5px/1 var(--sans);
  color: var(--sur-vert);
  letter-spacing: 0.01em;
}
.pastille { display: flex; width: max-content; max-width: 100%; text-align: left; }
.pastille--note { margin-top: 22px; }
.pastille-mot { color: var(--lumiere); flex: none; }
.etoiles { display: inline-flex; align-items: center; gap: 3px; }
.etoiles svg { fill: var(--lumiere); display: block; }

.tarifs {
  margin-top: clamp(40px, 4.4vw, 62px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
.tarif {
  display: flex; flex-direction: column;
  background: var(--porcelaine);
  color: var(--encre);
  border-radius: var(--r-carte);
  padding: clamp(26px, 2.4vw, 36px) clamp(24px, 2.2vw, 32px) clamp(28px, 2.4vw, 36px);
  transition: transform 0.6s var(--sortie);
}
.tarif:hover { transform: translateY(-4px); }
.tarif--large { background: var(--lumiere); }
.tarif-nom {
  font: 500 15px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--encre-2);
}
.tarif--large .tarif-nom { color: var(--vert); }
.tarif-prix {
  margin-top: 20px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 2.9vw, 40px); line-height: 1; letter-spacing: -0.028em;
  color: var(--encre);
}
.tarif-prix span { font-size: 0.62em; letter-spacing: -0.01em; }
.tarif-note { margin-top: 9px; font: 400 13.5px/1.4 var(--sans); color: var(--encre-2); }
.tarif-liste { margin-top: 24px; border-top: 1px solid var(--trait); }
.tarif-liste li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--trait);
  font: 400 14.5px/1.45 var(--sans);
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.tarif-liste li::before {
  content: '';
  position: absolute; left: 1px; top: 18px;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--vert); border-bottom: 1.5px solid var(--vert);
  transform: rotate(-45deg);
}
.tarif--large .tarif-liste, .tarif--large .tarif-liste li { border-color: rgba(27, 50, 43, 0.22); }
.tarif--large .tarif-liste li,
.tarif--large .tarif-note { color: var(--vert-haut); }
.tarif .bouton { margin-top: auto; padding-top: 0; }
.tarif .bouton {
  margin-top: 26px; align-self: stretch; justify-content: center;
  background: var(--vert); border-color: var(--vert); color: var(--sur-vert);
}
.tarif .bouton:hover { background: var(--vert-haut); border-color: var(--vert-haut); }
.tarifs-pied {
  margin-top: clamp(28px, 3vw, 44px);
  text-align: center; margin-inline: auto; max-width: 44em;
  font: 400 14.5px/1.6 var(--sans); color: var(--sur-vert-2);
}

/* =====================================================================
   À qui s'adresse ce cabinet
   ===================================================================== */

.public {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}
.public-liste { margin-top: 32px; }
.public-liste li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-bottom: 1px solid var(--trait);
  font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.5;
  color: var(--encre);
  text-wrap: pretty;
}
.public-liste--oui { border-top: 1px solid var(--trait); }
.public-liste--oui li::before {
  content: '';
  position: absolute; left: 3px; top: 22px;
  width: 13px; height: 7px;
  border-left: 1.6px solid var(--vert); border-bottom: 1.6px solid var(--vert);
  transform: rotate(-45deg);
}
.public-liste--non { margin-top: 26px; }
.public-liste--non li { color: var(--encre-2); font-size: 16px; }
.public-liste--non li::before {
  content: '';
  position: absolute; left: 4px; top: 22px;
  width: 12px; height: 1.6px;
  background: var(--trait-fort);
}
.public-image {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-image);
}
.public-image img {
  width: 100%; height: 112%; object-fit: cover; object-position: 50% 26%;
  position: relative; top: -6%;
}

/* =====================================================================
   Ce que vous pouvez attendre — the icon grid
   ===================================================================== */

.attentes {
  margin-top: clamp(44px, 4.8vw, 70px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 3.4vw, 54px) clamp(28px, 3vw, 52px);
}
.attente { text-align: center; display: flex; flex-direction: column; align-items: center; }
.attente svg {
  width: 32px; height: 32px;
  color: var(--vert);
  margin-bottom: 18px;
}
.attente p {
  font-size: clamp(16px, 1.3vw, 17.5px); line-height: 1.5;
  color: var(--encre);
  max-width: 22em;
  text-wrap: balance;
}

/* =====================================================================
   Les avis — rated cards
   ===================================================================== */

.avis {
  margin-top: clamp(40px, 4.4vw, 62px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.avis-carte {
  display: flex; flex-direction: column;
  background: var(--porcelaine);
  color: var(--encre);
  border-radius: var(--r-carte);
  padding: clamp(26px, 2.4vw, 34px) clamp(24px, 2.2vw, 32px);
  transition: transform 0.6s var(--sortie);
}
.avis-carte:hover { transform: translateY(-4px); }
.avis-note { display: flex; align-items: center; gap: 10px; margin-bottom: 18px !important; }
.avis-note .etoiles svg { fill: var(--vert); }
.avis-note .chiffres { font: 600 14px/1 var(--sans); color: var(--encre); }
.avis-carte p {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(18px, 1.5vw, 20.5px); line-height: 1.36; letter-spacing: -0.013em;
  text-wrap: pretty;
}
.avis-carte footer {
  margin-top: auto; padding-top: 22px;
  display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
}
.avis-nom { font: 600 14px/1 var(--sans); }
.avis-info { font: 400 13px/1 var(--sans); color: var(--encre-2); }
.avis-pied {
  margin-top: clamp(28px, 3vw, 44px);
  text-align: center; margin-inline: auto; max-width: 46em;
  font: 400 13px/1.6 var(--sans); color: var(--sur-vert-2);
}
.avis-pied b { color: var(--lumiere); font-weight: 500; }

/* =====================================================================
   La galerie
   ===================================================================== */

.galerie-tete {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(32px, 5vw, 88px);
  align-items: start;
}
.galerie-note p { max-width: 38em; color: var(--encre-2); }
.galerie-note p + p { margin-top: 15px; }

.galerie {
  margin-top: clamp(40px, 4.4vw, 64px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(210px, 20vw, 300px);
  gap: clamp(12px, 1.2vw, 18px);
}
.tuile {
  position: relative; overflow: hidden;
  border-radius: var(--r-image);
  grid-column: span 2;
}
.tuile--large { grid-column: span 3; }
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--sortie); }
.tuile:hover img { scale: 1.04; }
.tuile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 18px 15px;
  background: linear-gradient(180deg, rgba(20, 32, 28, 0), rgba(20, 32, 28, 0.8));
  color: var(--porcelaine);
  font: 500 12.5px/1.35 var(--sans);
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--sortie), transform 0.5s var(--sortie);
}
.tuile:hover figcaption, .tuile:focus-within figcaption { opacity: 1; transform: none; }
@media (hover: none) {
  .tuile figcaption { opacity: 1; transform: none; }
}

/* =====================================================================
   La praticienne, on paper this time
   ===================================================================== */

.prat { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.bande--prat .prat-image { min-height: 0; aspect-ratio: 4 / 5; margin-top: 8px; }
.bande--prat .prat-image img { object-position: 56% 24%; }
.bande--prat .prat-corps p { color: var(--encre-2); }
.bande--prat .citation { border-left-color: var(--trait); }
.bande--prat .citation::before { background: linear-gradient(180deg, var(--vert), rgba(27, 50, 43, 0)); }
.bande--prat .citation p { color: var(--vert); }
.bande--prat .titres, .bande--prat .titres > div { border-color: var(--trait); }
.bande--prat .titres dt { color: var(--encre); }
.bande--prat .titres dd { color: var(--encre-2); }
.bande--prat .prat-texte .bouton { margin-top: 30px; }
.prat-legende {
  position: absolute; left: 16px; bottom: 16px; right: 16px;
  padding: 12px 16px 13px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--encre) 62%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--porcelaine);
  font: 400 12.5px/1.4 var(--sans);
}

/* =====================================================================
   Nameplate, shared by the hero-era markup and the cabinet
   ===================================================================== */

.plaque {
  position: absolute; left: 16px; bottom: 16px;
  background: var(--porcelaine);
  border-radius: var(--r-carte);
  padding: 16px 24px 17px 22px;
  max-width: 19rem;
}
.plaque-nom {
  display: block;
  font-family: var(--serif); font-weight: 500; font-size: 18.5px;
  letter-spacing: -0.008em; line-height: 1.2;
  color: var(--encre);
}
.plaque-role {
  display: block; margin-top: 5px;
  font: 400 12.5px/1.4 var(--sans); color: var(--encre-2);
}

/* =====================================================================
   Adaptations for everything above
   ===================================================================== */

@media (max-width: 1180px) {
  .nav-site { gap: 20px; }
  .entete-fin .bouton--petit { display: none; }
  .tarifs { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .avis { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .attentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie-tete { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 900px) {
  .hero { height: auto; max-height: none; min-height: 0; padding-top: clamp(120px, 42vw, 240px); }
  .hero-fond { object-position: 64% 20%; }
  .hero-corps { padding-bottom: clamp(30px, 5vw, 46px); }
  .hero h1 { max-width: 16ch; }
  .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartes { grid-template-columns: minmax(0, 1fr); }
  .public { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .public-image { min-height: 0; aspect-ratio: 4 / 3; }
  .prat { grid-template-columns: minmax(0, 1fr); }
  .prat-image { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38vw; }
  .tuile { grid-column: span 1; }
  .tuile--large:last-child { grid-column: span 2; }
  .bande--ronde { margin-inline: 8px; border-radius: 26px; }
}

@media (max-width: 620px) {
  .attentes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .attente p { max-width: 26em; }
  .faits { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .galerie { grid-auto-rows: 46vw; }
  .public-liste li { font-size: 16.5px; }
}